/* ============================================================
   WRITETOWEB THEME
   Design System — All tokens from Lovable design
   ============================================================

   TABLE OF CONTENTS:
   1.  Custom Fonts (@font-face)
   2.  CSS Variables (Design Tokens)
   3.  Reset & Base
   4.  Typography Scale
   5.  Layout & Container
   6.  Utility Classes
   7.  Component Classes
   8.  Section Classes — Elementor CSS Class Names
       8a. Header
       8b. Hero Section
       8c. Rent vs Own Section
       8d. How It Works Section
       8e. Who I Am Section
       8f. Pricing Section
       8g. Testimonials Section
       8h. Footer
       8i. Contact Section
   9.  Animations & Keyframes
   10. Scrollbar
   11. Elementor Pro Overrides
   ============================================================ */


/* ============================================================
   1. CUSTOM FONTS
   Clash Display is not on Google Fonts — loaded from CDN
   DM Sans + Space Mono loaded via Google Fonts in functions.php
   ============================================================ */

@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   2. CSS VARIABLES (DESIGN TOKENS)
   All colors in HEX. Font sizes in rem. Spacing in px.
   ============================================================ */

:root {

  /* ── Colors ── */
  --color-background:      #0A0A0A;   /* Deep black — main bg */
  --color-surface:         #111111;   /* Off black — section bg */
  --color-card:            #1E1E1E;   /* Card / component bg */
  --color-border:          #333333;   /* Subtle borders */
  --color-input:           #333333;   /* Input borders */

  --color-primary:         #C8F135;   /* Electric lime green — main accent */
  --color-primary-fg:      #0A0A0A;   /* Text on lime green backgrounds */

  --color-secondary:       #F0E6D3;   /* Warm white — secondary text/bg */
  --color-secondary-fg:    #0A0A0A;   /* Text on warm white */

  --color-accent:          #FF4D4D;   /* Coral red — highlight accent */
  --color-accent-fg:       #FFFFFF;   /* Text on coral */

  --color-text:            #FFFFFF;   /* Primary text */
  --color-text-muted:      #A3A3A3;   /* Muted / secondary text */
  --color-text-warm:       #F5F0E8;   /* Warm off-white text */

  /* ── Typography — Font Families ── */
  --font-display:          'Clash Display', sans-serif;   /* Headings */
  --font-body:             'DM Sans', sans-serif;         /* Body copy */
  --font-mono:             'Space Mono', monospace;       /* Labels, accents, code */

  /* ── Typography — Font Sizes (rem) ── */
  /* Base: 1rem = 16px */
  --text-xs:               0.625rem;   /* 10px  — mono labels, fine print */
  --text-sm:               0.75rem;    /* 12px  — small labels */
  --text-base:             0.875rem;   /* 14px  — body small */
  --text-md:               1rem;       /* 16px  — body default */
  --text-lg:               1.125rem;   /* 18px  — body large */
  --text-xl:               1.25rem;    /* 20px  — subheadings */
  --text-2xl:              1.5rem;     /* 24px  — section subheadings */
  --text-3xl:              1.875rem;   /* 30px  — card headings */
  --text-4xl:              2.25rem;    /* 36px  — section headings sm */
  --text-5xl:              3rem;       /* 48px  — section headings */
  --text-6xl:              3.75rem;    /* 60px  — large headings */
  --text-7xl:              4.5rem;     /* 72px  — hero headings */
  --text-8xl:              6rem;       /* 96px  — display headings */
  --text-9xl:              8rem;       /* 128px — oversized display */

  /* ── Typography — Font Weights ── */
  --weight-light:          300;
  --weight-regular:        400;
  --weight-medium:         500;
  --weight-semibold:       600;
  --weight-bold:           700;

  /* ── Typography — Line Heights ── */
  --leading-none:          0.9;        /* Tight display headings */
  --leading-tight:         1.1;        /* Headings */
  --leading-snug:          1.3;        /* Subheadings */
  --leading-normal:        1.5;        /* Body default */
  --leading-relaxed:       1.7;        /* Body comfortable */

  /* ── Typography — Letter Spacing ── */
  --tracking-tight:        -0.02em;    /* Display headings */
  --tracking-normal:       0em;
  --tracking-wide:         0.05em;     /* Buttons */
  --tracking-wider:        0.1em;      /* Mono labels */
  --tracking-widest:       0.15em;     /* All-caps labels */

  /* ── Spacing (px) ── */
  --space-1:               4px;
  --space-2:               8px;
  --space-3:               12px;
  --space-4:               16px;
  --space-5:               20px;
  --space-6:               24px;
  --space-8:               32px;
  --space-10:              40px;
  --space-12:              48px;
  --space-14:              56px;
  --space-16:              64px;
  --space-20:              80px;
  --space-24:              96px;
  --space-28:              112px;
  --space-32:              128px;

  /* ── Layout ── */
  --container-max:         1200px;     /* Standard container */
  --container-wide:        1400px;     /* Wide container */
  --container-narrow:      800px;      /* Narrow / centered content */
  --container-padding:     32px;       /* Horizontal padding */
  --nav-height:            64px;       /* Fixed nav height */

  /* ── Border Radius ── */
  /* Design uses sharp corners throughout — radius is minimal */
  --radius-none:           0px;
  --radius-sm:             2px;        /* Subtle rounding */
  --radius:                4px;        /* Default — very subtle */
  --radius-full:           9999px;     /* Pills */

  /* ── Borders ── */
  --border-width:          1px;
  --border-width-2:        2px;
  --border-color:          #333333;
  --border-color-primary:  rgba(200, 241, 53, 0.4);  /* Lime at 40% */
  --border-color-hover:    rgba(200, 241, 53, 0.5);  /* Lime at 50% */

  /* ── Opacity Variants ── */
  --primary-20:            rgba(200, 241, 53, 0.2);
  --primary-30:            rgba(200, 241, 53, 0.3);
  --primary-40:            rgba(200, 241, 53, 0.4);
  --primary-60:            rgba(200, 241, 53, 0.6);
  --white-80:              rgba(255, 255, 255, 0.8);
  --white-60:              rgba(255, 255, 255, 0.6);
  --black-20:              rgba(10, 10, 10, 0.2);
  --black-90:              rgba(10, 10, 10, 0.9);

  /* ── Shadows ── */
  --shadow-sm:             0 1px 3px rgba(0,0,0,0.4);
  --shadow:                0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:             0 8px 32px rgba(0,0,0,0.6);
  --shadow-primary:        0 0 20px rgba(200, 241, 53, 0.15);

  /* ── Transitions ── */
  --transition-fast:       0.15s ease;
  --transition:            0.2s ease;
  --transition-slow:       0.4s ease;

  /* ── Breakpoints (reference only — use in media queries) ── */
  /* --bp-sm: 480px  */
  /* --bp-md: 768px  */
  /* --bp-lg: 1024px */
  /* --bp-xl: 1280px */
}


/* ============================================================
   3. RESET & BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h1, h2 { 
  margin-bottom: 20px !important; 
}
h3, h4  { 
  margin-bottom: 18px !important; 

}
h5, h6  { 
  margin-bottom: 16px !important;
}

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
  letter-spacing: var(--tracking-normal) !important;
}

p {
  font-family: var(--font-body);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

p + p {
  margin-top: 18px;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

.elementor-widget-button {
  cursor: pointer;
}


/* ============================================================
   4. TYPOGRAPHY SCALE
   ============================================================ */

/* Display sizes — fluid using clamp() */
.text-display-xl  { font-size: clamp(3rem, 10vw, 8rem); }
.text-display-lg  { font-size: clamp(2.5rem, 8vw, 6.5rem); }
.text-display-md  { font-size: clamp(2rem, 5vw, 4rem); }
.text-display-sm  { font-size: clamp(1.5rem, 3vw, 3rem); }

/* Mono labels — Space Mono uppercase */
.label-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
}

/* Section numbers — 01, 02, 03 */
.step-number {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 8vw, 5rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.8;
}


/* ============================================================
   5. LAYOUT & CONTAINER
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container-wide {
  max-width: var(--container-wide);
}

.container-narrow {
  max-width: var(--container-narrow);
}

.no-padding {
  padding: 0 !important;
}

/* Page content offset for fixed header */
/* .site-main,
#main-content,
.elementor-page {
  padding-top: var(--nav-height);
} */


/* ============================================================
   6. UTILITY CLASSES
   ============================================================ */

/* Colors */
.text-primary       { color: var(--color-primary); }
.text-secondary     { color: var(--color-secondary); }
.text-accent        { color: var(--color-accent); }
.text-muted         { color: var(--color-text-muted); }
.text-warm          { color: var(--color-text-warm); }
.text-white         { color: #FFFFFF; }
.text-black         { color: #0A0A0A; }

.bg-deep            { background-color: var(--color-background); }
.bg-surface         { background-color: var(--color-surface); }
.bg-card            { background-color: var(--color-card); }
.bg-primary         { background-color: var(--color-primary); }
.bg-accent          { background-color: var(--color-accent); }

/* Borders */
.border-primary     { border-color: var(--color-primary); }
.border-default     { border-color: var(--color-border); }

/* Sharp corners — important for this design */
.sharp              { border-radius: 0 !important; }

/* Diagonal accent line */
.diagonal-line {
  position: absolute;
  width: 140%;
  height: 3px;
  background-color: var(--color-primary);
  transform-origin: left center;
  opacity: 0.6;
}

.diagonal-line-thin {
  height: 1px;
  opacity: 0.3;
}

/* Lime accent bar — animates in on scroll */
.accent-bar {
  width: 96px;
  height: 4px;
  background-color: var(--color-primary);
  transform-origin: left center;
}

/* Corner triangle accents */
.corner-accent-tr {
  position: absolute !important;
  top: 0;
  right: 0;
  width: 80px !important;
  height: 80px !important;
  background-color: rgba(10, 10, 10, 0.1);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.corner-accent-tl {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 80px !important;
  height: 80px !important;
  background-color: rgba(10, 10, 10, 0.1);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.corner-accent-br-lime {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 64px;
  height: 64px;
  background-color: var(--color-primary);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Bottom fade gradient */
.fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 128px;
  background: linear-gradient(to top, var(--color-background), transparent);
  pointer-events: none;
}

.display-none {
  display: none !important;
}

/* ============================================================
   7. COMPONENT CLASSES
   ============================================================ */

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  background-color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-none);
  border: 2px solid var(--color-primary);
  cursor: pointer;
  transition: filter var(--transition);
  text-decoration: none;
  min-width: 297px !important;
  justify-content: center !important;
}

.btn-primary a,
.btn-primary:hover a {
  color: var(--color-primary-fg) !important;
  font-size: var(--text-md);
}

.btn-primary:hover {
  filter: brightness(1.1);
  color: var(--color-primary-fg);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  background-color: transparent;
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-none);
  border: 2px solid var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
  text-decoration: none;
  min-width: 297px !important;
  justify-content: center !important;
}

.btn-outline a {
  font-size: var(--text-md);
  padding: 12px !important;
}

.btn-outline:hover a {
  color: var(--color-primary-fg);
}

.btn-outline:hover {
  background-color: var(--color-text);
  color: var(--color-background);
}

/* Cards */
.card {
  background-color: var(--color-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-none);
  transition: border-color var(--transition);
}

.card:hover {
  border-color: var(--border-color-hover);
}

/* Divider */
.divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
}

/* Quote mark */
.quote-mark {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.4;
  user-select: none;
  transition: opacity var(--transition);
}

.quote-mark:hover {
  opacity: 0.7;
}

/* Backdrop blur header */
.header-blur {
  background-color: var(--black-90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Wordmark */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}

.wordmark .highlight {
  color: var(--color-primary);
}

/* Badge */
.badge-primary {
  display: inline-block;
  padding: 4px 16px;
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  border-radius: var(--radius-none);
  position: absolute !important;
  top: 0;
  right: 0;
}

.badge-primary p {
  color: var(--color-primary-fg) !important;
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: var(--tracking-widest) !important;
}

/* ============================================================
   8. SECTION CLASSES — ELEMENTOR CSS CLASS NAMES
   Apply these in Elementor: Advanced → CSS Classes field
   ============================================================ */


/* ── 8a. HEADER ── */

/* Apply to: the fixed header wrapper section */
.site-header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: var(--black-90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  height: var(--nav-height);
}

/* Apply to: the "Write" and "To" text spans in the wordmark */
.wordmark-text {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

/* Apply to: the "Web." text span in the wordmark */
.wordmark-highlight {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
}

/* Apply to: each nav link in the header */
.nav-link a {
  font-family: var(--font-mono) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-regular) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  color: var(--color-text-muted) !important;
  transition: color var(--transition) !important;
  text-decoration: none !important;
}

.nav-link a:hover {
  color: var(--color-text) !important;
  fill: var(--color-text) !important;
  text-decoration:  none !important;
}

/* Apply to: the "Claim Your Site" header button */
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 20px;
  background-color: var(--color-primary);
  color: var(--color-primary-fg) !important;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-none);
  border: none;
  text-decoration: none;
  transition: filter var(--transition);
}

.header-cta:hover {
  filter: brightness(1.1);
  color: var(--color-primary-fg);
}

.header-cta a {
  padding: 15px !important;
}

.header-cta span,
.header-cta:hover span {
  color: var(--color-primary-fg);
}

/* Hamburger icon lines */
.elementor-nav-menu--toggle .elementor-nav-menu--indicator {
  color: #FFFFFF !important;
}

/* The toggle button itself */
.elementor-menu-toggle {
  color: #FFFFFF !important;
  border: none !important;
  background: transparent !important;
}

.elementor-menu-toggle:hover {
  color: #C8F135 !important;
}

/* Mobile menu dropdown background */
.elementor-nav-menu--dropdown {
  background-color: #0A0A0A !important;
  border-top: 1px solid #333333 !important;
}

/* Mobile menu links */
.elementor-nav-menu--dropdown a {
  font-family: 'Space Mono', monospace  !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #A3A3A3 !important;
}

.elementor-nav-menu--dropdown a:hover {
  color: #FFFFFF !important;
  background-color: transparent !important;
}

.elementor-menu-toggle .e-font-icon-svg {
  fill: var(--color-accent-fg) !important;
}


/* ── 8b. HERO SECTION ── */

/* Apply to: the hero section wrapper */
.hero-section {
  min-height: calc(100vh - 90px) !important;
  display: flex;
  align-items: center;
  background-color: var(--color-background);
  position: relative;
  overflow: hidden;
  padding-top: var(--nav-height);
}

.hero-section > .e-con-inner::before {
  content: '';
  position: absolute;
  top: 300px;
  left: -20%;
  width: 140%;
  height: 3px;
  background-color: #5f7708 !important;
  transform: rotate(-6deg);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.hero-section > .e-con-inner::after {
  content: '';
  position: absolute;
  bottom: 25%;
  left: -20%;
  width: 140%;
  height: 1px;
  background-color: #C8F135;
  transform: rotate(4deg);
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

/* Apply to: the // For authors who mean business label */
.hero-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary) !important;
  margin-bottom: 24px;
}

/* Typewriter cursor */
.hero-label-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--color-primary);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: hero-cursor-blink 0.7s steps(1, end) infinite;
}

@keyframes hero-cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Power-outage flicker — applied after typewriter completes */
@keyframes hero-power-flicker {
  0%    { opacity: 1; }
  4%    { opacity: 0; }
  4.5%  { opacity: 1; }
  5%    { opacity: 0; }
  5.8%  { opacity: 1; }
  12%   { opacity: 1; }
  12.5% { opacity: 0.15; }
  13%   { opacity: 1; }
  13.3% { opacity: 0; }
  13.7% { opacity: 1; }
  22%   { opacity: 1; }
  22.5% { opacity: 0; }
  23%   { opacity: 0.6; }
  23.5% { opacity: 0; }
  24%   { opacity: 1; }
  38%   { opacity: 1; }
  38.2% { opacity: 0; }
  38.5% { opacity: 1; }
  48%   { opacity: 1; }
  49%   { opacity: 0.3; }
  50%   { opacity: 0; }
  51%   { opacity: 0.8; }
  51.5% { opacity: 0; }
  52%   { opacity: 1; }
  63%   { opacity: 1; }
  63.4% { opacity: 0; }
  63.6% { opacity: 1; }
  63.9% { opacity: 0; }
  64.2% { opacity: 1; }
  74%   { opacity: 1; }
  74.5% { opacity: 0.2; }
  75%   { opacity: 0; }
  76%   { opacity: 1; }
  86%   { opacity: 1; }
  86.3% { opacity: 0; }
  86.7% { opacity: 0.5; }
  87%   { opacity: 0; }
  87.5% { opacity: 0; }
  88%   { opacity: 1; }
  95%   { opacity: 1; }
  95.5% { opacity: 0; }
  96%   { opacity: 1; }
  100%  { opacity: 1; }
}

.hero-label-flickering {
  animation: hero-power-flicker 5.5s linear infinite;
}

/* Hero button fade-in — applied via JS one button at a time */
.hero-btn-fade-in {
  transition: opacity 0.5s ease;
  opacity: 1 !important;
}

/* ── Hide all animated elements before JS takes over ── */
/* Scoped to frontend only — Elementor editor stays fully visible */
body:not(.elementor-editor-active) .hero-section .hero-headline-main,
body:not(.elementor-editor-active) .hero-section .hero-headline-warm,
body:not(.elementor-editor-active) .hero-section .hero-label,
body:not(.elementor-editor-active) .hero-section .btn-primary,
body:not(.elementor-editor-active) .hero-section .btn-outline,
body:not(.elementor-editor-active) .rent-vs-own-section .rent-vs-own-heading,
body:not(.elementor-editor-active) .rent-vs-own-section .how-it-works-label,
body:not(.elementor-editor-active) .rent-vs-own-section .rent-vs-own-label,
body:not(.elementor-editor-active) .how-it-works-section .how-it-works-label,
body:not(.elementor-editor-active) .how-it-works-section .how-it-works-heading,
body:not(.elementor-editor-active) .pricing-section .pricing-label,
body:not(.elementor-editor-active) .pricing-section .pricing-heading,
body:not(.elementor-editor-active) .testimonials-label p,
body:not(.elementor-editor-active) .testimonials-heading h2,
body:not(.elementor-editor-active) .contact-section .contact-label,
body:not(.elementor-editor-active) .contact-section .contact-heading {
  opacity: 0;
  visibility: hidden;
}

/* Subheadline containers hidden until JS animates their sentences in */
body:not(.elementor-editor-active) .hero-section .hero-subheadline,
body:not(.elementor-editor-active) .hero-section .hero-subheadline-coral {
  opacity: 0;
  visibility: hidden;
}

/* Apply to: "Your author" and "website." headline lines */
.hero-headline-main {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-bold) !important;
  font-size: clamp(3rem, 10vw, 7rem) !important;
  line-height: 0.9 !important;
  letter-spacing: var(--tracking-normal) !important;
  color: var(--color-text) !important;
  display: block !important;
}

/* Apply to: "No landlord." headline line */
.hero-headline-warm {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(2.5rem, 8vw, 6.5rem);
  line-height: 0.4;
  letter-spacing: var(--tracking-normal);
  color: var(--color-text-warm);
  display: block;
}

/* Apply to: any period "." at end of a headline that should be lime */
.headline-period {
  color: var(--color-primary);
}

/* ── Period slam + impact animations ── */
@keyframes hero-period-slam {
  0%   { transform: scale(6) translateY(-10px); opacity: 0; }
  55%  { transform: scale(0.82) translateY(2px);  opacity: 1; }
  75%  { transform: scale(1.08) translateY(-1px); }
  90%  { transform: scale(0.97); }
  100% { transform: scale(1) translateY(0); }
}

.headline-period-slamming {
  display: inline-block;
  transform-origin: center bottom;
  animation: hero-period-slam 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Shockwave ring that expands from the period */
@keyframes hero-shockwave {
  0%   { transform: translate(-50%, -50%) scale(0.1); opacity: 0.75; }
  25%  { opacity: 0.55; }
  65%  { opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(7);   opacity: 0; }
}

.hero-period-shockwave {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #5a5a5a;
  pointer-events: none;
  z-index: 9999;
  animation: hero-shockwave var(--sw-dur, 1.4s) ease-out forwards;
}

/* Individual dirt/debris particles */
@keyframes hero-dirt-fly {
  0%   { transform: translate(0, 0) scale(1);   opacity: 0.85; }
  70%  { opacity: 0.5; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.1); opacity: 0; }
}

.hero-dirt-particle {
  position: absolute;
  width: var(--size, 4px);
  height: var(--size, 4px);
  border-radius: var(--brad, 50%);
  background: var(--pcolor, #555);
  pointer-events: none;
  z-index: 9999;
  animation: hero-dirt-fly var(--dur, 0.55s) ease-out forwards;
}

/* Apply to: "One-time build. WordPress powered. Yours forever." paragraph */
.hero-subheadline {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: 90% !important;
  margin-top: 32px;
}

/* Apply to: "No Wix. No Squarespace. No monthly rent." line */
.hero-subheadline-coral {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-accent) !important;
  margin-top: 0 !important;
}

/* Apply to: "See How It Works" primary CTA button */
.hero-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-none);
  border: none;
  text-decoration: none;
  transition: filter var(--transition);
}

.hero-cta-primary:hover {
  filter: brightness(1.1);
  color: var(--color-primary-fg);
}

/* Apply to: "View Author Sites" outline CTA button */
.hero-cta-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  background-color: transparent;
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-none);
  border: 2px solid var(--color-text);
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.hero-cta-outline:hover {
  background-color: var(--color-text);
  color: var(--color-background);
}

.hero-btns {
  z-index: 11 !important;
}


/* ── 8c. RENT VS OWN SECTION ── */

/* Apply to: the section wrapper */
.rent-vs-own-section {
  background-color: var(--color-surface);
  padding: 126px 0 96px 0;
  position: relative;
  overflow: hidden;
}

.rent-vs-own-section h2.elementor-heading-title {
  margin-bottom: 0 !important;
}

/* Apply to: the section // label */
.rent-vs-own-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 16px;
}

/* Apply to: "Stop Renting. Start Owning." heading */
.rent-vs-own-heading {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.95;
  letter-spacing: var(--tracking-normal);
  color: var(--color-text);
  text-align: center;
}

.rent-vs-own-breakdown-container {
  gap: 25px !important;
}

.rent-vs-own-breakdown-container h2 img {
  margin-left: 10px !important;
}

/* Apply to: the RENTING column wrapper */
.renting-column {
  display: block !important;
  background-color: var(--color-accent);
  padding: 40px !important;
  position: relative;
}

/* Apply to: the "The Old Way" label inside RENTING column */
.renting-column-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.6);
  margin-bottom: 8px;
}

/* Apply to: "RENTING 😩" heading */
.renting-heading {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  color: var(--color-primary-fg);
  margin-bottom: 32px;
}

.renting-list-items ul {
  margin-top: 20px;
}

/* Apply to: each list item text in RENTING column */
.renting-list-items li {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: rgba(10, 10, 10, 0.9);
  margin-bottom: 15px;
  display: flex !important;
  flex-direction: row !important;
}

.renting-list-items li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  margin-right: 10px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18' stroke-linecap='round'/%3E%3Cline x1='6' y1='6' x2='18' y2='18' stroke-linecap='round'/%3E%3C/svg%3E");  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: sub;
}

/* Apply to: the OWNING column wrapper */
.owning-column {
  display: block !important;
  background-color: var(--color-primary);
  padding: 40px !important;
  position: relative;
}

/* Apply to: the "The WriteToWeb Way" label inside OWNING column */
.owning-column-label {
  display: block !important;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.6);
  margin-bottom: 8px;
}

/* Apply to: "OWNING 🔥" heading */
.owning-heading {
  display: inline-block !important;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  color: var(--color-primary-fg);
  margin-bottom: 32px;
}

.owning-list-items ul {
  margin-top: 20px;
}

/* Apply to: each list item text in OWNING column */
.owning-list-items li {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: rgba(10, 10, 10, 0.9);
  margin-bottom: 15px;
  display: flex !important;
  flex-direction: row !important;
}

.owning-list-items li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  margin-right: 10px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: sub;
}

/* Apply to: the "RENT DUE" badge at the bottom of the RENTING column */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center !important;
  gap: 12px;
  padding: 16px;
  background-color: rgba(10, 10, 10, 0.2);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--color-primary-fg);
  max-width: 200px !important;
  width: 100% !important;
}

.badge .elementor-icon-box-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: center !important;
}

.badge .elementor-icon-box-icon {
  margin: 0 !important;
}

.badge .elementor-icon-box-title {
  font-family: 'Clash Display', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  color: #0A0A0A;
  margin: 0 !important;
}

.renting-icon-box-container,
.owning-icon-box-container {
  display: flex !important;
  align-items: center !important;
  margin-top: 40px !important;
}

/* Apply to: the "IT'S MINE" badge at the bottom of the OWNING column */
.owning-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: rgba(10, 10, 10, 0.2);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--color-primary-fg);
}


/* ── 8d. HOW IT WORKS SECTION ── */

/* Apply to: the section wrapper */
.how-it-works-section {
  background-color: var(--color-background);
  padding: 96px 0;
  position: relative;
}

.how-it-works-section > .e-con-inner::after {
  content: '';
  position: absolute;
  top: 5%;
  left: -20%;
  width: 140%;
  height: 1px;
  background-color: #C8F135;
  transform: rotate(4deg);
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

/* Apply to: the section // label */
.how-it-works-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 16px;
}

/* Apply to: "From Manuscript to Online in 3 Steps." heading */
.how-it-works-heading {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-align: center;
}

@media (max-width: 768px) {
  
  .how-it-works-heading-container {
    width: 100% !important;
  }

}

/* Apply to: each step card wrapper */
.step-card {
  display: block !important;
  background-color: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-none) !important;
  padding: 32px !important;
  transition: border-color var(--transition) !important;
}

.step-card:hover {
  border-color: var(--border-color-hover) !important;
}

.step-card-container {
  margin-top: 25px !important;
  gap: 30px !important;
}

/* Apply to: the 01 / 02 / 03 number inside each step card */
.step-card-number {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 8vw, 5rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.8;
  display: block;
  margin-bottom: 16px;
  transition: opacity var(--transition);
}

.step-card:hover .step-card-number {
  opacity: 1;
}

/* Apply to: the icon inside each step card */
.step-card-icon svg {
  fill: var(--color-primary) !important;
  width: 24px !important;
  height: 24px !important;
  margin-bottom: 16px !important;
}

.step-card-title-container {
  margin-bottom: 15px !important;
}

/* Apply to: "We Design" / "We Build" / "You Own It" step title */
.step-card-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  color: var(--color-text);
  margin-bottom: 12px;
  letter-spacing: var(--tracking-wide) !important;
}

.step-card-desc-container p {
  line-height: 1em;
}

/* Apply to: the description text inside each step card */
.step-card-desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}


/* ── 8e. WHO I AM SECTION ── */

/* Apply to: the section wrapper */
.who-i-am-section {
  background-color: var(--color-surface);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}

/* Apply to: the lime accent bar above the heading */
/* .who-i-am-bar {
  width: 96px;
  height: 4px;
  background-color: var(--color-primary);
  transform-origin: left center;
  margin-bottom: 40px;
} */

.who-i-am-bar .elementor-divider {
  padding: 0 !important;
}

.who-i-am-bar .elementor-divider .elementor-divider-separator {
  display: block !important;
  width: 96px !important;
  height: 4px !important;
  background-color: #C8F135 !important;
  border: none !important;
  border-top: 4px solid #C8F135 !important;
}

/* Apply to: the photo placeholder / image wrapper */
.who-i-am-photo {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-none);
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.who-am-i-img-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 64px;
  height: 64px;
  background-color: #C8F135;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 1;
}

.who-am-i-img-container {
  position: relative;
  overflow: hidden;
}

/* Apply to: "Author + Developer" caption inside photo */
.who-i-am-photo-caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {

  .who-am-i-photo-container-inner {
    padding-left: 0 !important;
  }

  .who-am-i-img-container {
    padding-left: 30px !important;
  }

}

/* Apply to: "Built by an author. Powered by a developer." heading */
.who-i-am-heading {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.0;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-bottom: 32px;
}

/* Apply to: body paragraph text in this section */
.who-i-am-body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* Apply to: "no idea how to tell the world about it" bold span */
.who-i-am-emphasis {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

/* Apply to: "don't hold you hostage" span */
.who-i-am-coral {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

/* Apply to: the final "That's WriteToWeb." line */
.who-i-am-closing {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* Apply to: "WriteToWeb" span inside the closing line */
.who-i-am-brand {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}


/* ── 8f. PRICING SECTION ── */

/* Apply to: the section wrapper */
.pricing-section {
  background-color: var(--color-background);
  padding: 96px 0;
  position: relative;
}

/* Apply to: the section // label */
.pricing-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 16px;
}

/* Apply to: "One Price. No Surprises. No Subscriptions." heading */
.pricing-heading {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-align: center;
}

@media (max-width: 768px) {

  .pricing-heading-container {
    width: 100% !important;
  }

}

/* Apply to: the pricing card wrapper */
.pricing-card {
  display: block !important;
  background-color: var(--color-card);
  border: 2px solid var(--border-color-primary);
  border-radius: var(--radius-none);
  padding: 48px !important;
  position: relative;
  max-width: 520px;
  margin: 0 auto;
}

/* Apply to: "Author Website Package" label inside card */
.pricing-card-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.pricing-card .elementor-divider-separator {
  width: 100%;
  height: 1px;
  border: none;
  border-top: 1px solid #333333 !important;
  background-color: #333333 !important;
}

/* Apply to: the "$1,497" price number */
.pricing-amount {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 1;
  color: var(--color-text);
}

/* Apply to: "One-time payment. No monthly fees. Ever." */
.pricing-subtext {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-top: 4px;
  margin-bottom: 10px;
}

/* Apply to: each included item text in the pricing list */
.pricing-items,
.pricing-item {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.8);
}

.pricing-items li {
  margin-top: 10px;
}

.pricing-items li {
  display: flex;
  flex-direction: row !important;
}

.pricing-items li::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  margin-right: 10px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C8F135' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: sub;
}

/* Apply to: "Claim Your Author Site" pricing CTA button */
.pricing-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 16px 32px;
  background-color: var(--color-primary);
  color: var(--color-primary-fg);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-none);
  border: none;
  text-decoration: none;
  transition: filter var(--transition);
  margin-top: 40px;
  margin-bottom: 10px !important;
}

.pricing-cta .elementor-button-text {
  color: var(--color-primary-fg) !important;
}

.pricing-cta:hover {
  filter: brightness(1.1);
  color: var(--color-primary-fg);
}

.pricing-cta a {
  padding: 12px !important;
}

/* Apply to: "Optional Add-on" label */
.pricing-addon-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

/* Apply to: "$99/mo" addon price span */
.pricing-addon-price {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}

/* Apply to: "(not required)" addon note span */
.pricing-addon-note {
  color: var(--color-text-muted);
}

/* ── 8g. TESTIMONIALS SECTION ── */

/* Apply to: the section wrapper */
.testimonials-section {
  background-color: var(--color-surface);
  padding: 96px 0;
  position: relative;
}

/* Apply to: the section // label */
.testimonials-label p {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary) !important;
  text-align: center;
}

/* Apply to: "What Authors Are Saying." heading */
.testimonials-heading h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text) !important;
  text-align: center;
}

/* Apply to: each testimonial card wrapper */
.testimonial-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-none);
  padding: 32px;
  position: relative;
  overflow: visible !important;
  transition: border-color var(--transition);
  padding: 28px !important;
  justify-content: center !important;
  gap: 0 !important;
}

.card-quotation-marks {
  display: block;
  font-family: 'Clash Display', sans-serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.4;
  position: absolute;
  top: -20px;
  left: 10px;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  transition: opacity 0.2s ease;
}

/* Prevent inner Elementor wrappers from intercepting absolute positioning —
   anchors .card-quotation-marks to .testimonial-card on every card */
.testimonial-card .elementor-widget-wrap,
.testimonial-card .elementor-widget-container {
  position: static !important;
}

.testimonial-card:hover {
  border-color: var(--primary-30);
}

/* Apply to: the large opening " quote mark */
.testimonial-quote-mark {
  display: block;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.4;
  user-select: none;
  transition: opacity var(--transition);
  position: absolute;
  top: -60px;
  left: -20px;
}

/* .testimonial-card:hover .testimonial-quote-mark {
  opacity: 0.7;
}

/* Apply to: the quote text inside each card */
.testimonial-quote p {
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  line-height: var(--leading-relaxed) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-style: italic;
  margin-top: 32px;
  margin-bottom: 24px;
} 

/* Apply to: the author name */
.testimonial-author h4 {
  display: block !important;
  font-family: var(--font-display) !important;
  font-weight: var(--weight-bold) !important;
  font-size: var(--text-base) !important;
  color: var(--color-text) !important;
  letter-spacing: var(--tracking-wider) !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}

/* Apply to: the book title */
.testimonial-book p {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  color: var(--color-text-muted) !important;
  margin-top: 5px;
}

/* Apply to: the genre tag */
.testimonial-genre p {
  display: block !important;
  font-family: var(--font-mono) !important;
  font-size: 0.625rem !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  color: var(--color-primary) !important;
  margin-top: 4px !important;
}

.testimonial-card .elementor-divider {
  padding: 0 !important;
}

.testimonial-card .elementor-divider-separator {
  width: 100%;
  height: 1px;
  border: none;
  border-top: 1px solid #333333 !important;
  background-color: #333333 !important;
}

/* ── 8h. FOOTER ── */

/* Apply to: the footer wrapper */
.site-footer-wrap {
  background-color: var(--color-background);
  border-top: 1px solid var(--color-border);
}

/* Apply to: the main footer content area */
.footer-main {
  padding: 64px 0;
}

/* Apply to: "WriteToWeb." in the footer — same as header wordmark */
.footer-wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 8px;
  gap: 5px !important;
  padding: 0 !important;
}

.footer-wordmark img {
  height: 28px !important;
  width: auto !important;
}

/* Apply to: "Web." and "." in the footer wordmark */
.footer-wordmark-highlight {
  color: var(--color-primary);
}

/* Apply to: "Built for authors. By an author." tagline */
.footer-tagline p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-normal) !important;
}

/* Apply to: "Quick Links" label in the footer */
.footer-links-label h4.elementor-heading-title {
  font-family: var(--font-mono) !important;
  font-size: var(--text-sm) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  color: var(--color-primary) !important;
  margin-bottom: 4px !important;
}

/* Apply to: each footer nav link */
.footer-link li a {
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  color: var(--color-text-muted) !important;
  text-decoration: none !important;
  transition: color var(--transition) !important;
  display: block !important;
  text-transform: none !important;
  letter-spacing: var(--tracking-normal) !important;
  margin-bottom: 10px !important;
}

.footer-link:hover {
  color: var(--color-text);
}

.footer-quicklinks-container {
  gap: 12px !important;
}

.footer-quicklinks-container ul li:last-of-type a {
  margin-bottom: 0 !important;
}

/* Apply to: "Ready to own your site?" text */
.footer-cta-text h4.elementor-heading-title {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-bold) !important;
  font-size: var(--text-lg) !important;
  color: var(--color-text) !important;
  letter-spacing: var(--tracking-wide) !important;
  margin-bottom: 5px !important;
}

/* Apply to: "Claim Your Site" footer button */
.footer-cta-btn a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 12px 24px !important;
  background-color: var(--color-primary) !important;
  color: var(--color-primary-fg) !important;
  font-family: var(--font-display) !important;
  font-weight: var(--weight-bold) !important;
  font-size: var(--text-base) !important;
  letter-spacing: var(--tracking-wide) !important;
  border-radius: var(--radius-none) !important;
  border: none !important;
  text-decoration: none !important;
  transition: filter var(--transition) !important;
}

.footer-cta-btn:hover {
  filter: brightness(1.1);
  color: var(--color-primary-fg);
}

.footer-cta-container {
  align-items: end !important;
}

/* Apply to: the bottom bar wrapper */
.footer-bottom {
  background-color: #0A0A0A;
  border-top: 1px solid #333333;
  padding: 16px 0;
  margin: 0 !important;
}

.footer-bottom-text {
  font-family: 'DM Sans', sans-serif !important;
  font-size: var(--text-sm) !important;
  color: #A3A3A3 !important;
  letter-spacing: var(--tracking-normal) !important;
}

/* Apply to: the copyright text and "Made with ☕ and WordPress" */
.footer-bottom-text {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── 8i. CONTACT SECTION ── */

/* Apply to: the contact section wrapper */
.contact-section {
  background-color: var(--color-surface) !important;
  padding: 96px 10px !important;
  position: relative;
  margin-bottom: 0 !important;
}

.contact-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 16px;
}

/* Apply to: the // Let's talk label */
.contact-field-label .wpforms-field-label {
  font-family: var(--font-mono) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-regular) !important;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase !important;
  color: var(--color-primary) !important;
  margin-bottom: 16px !important;
}

/* Apply to: "Ready to Get Started?" heading */
.contact-heading {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-align: center;
}

/* Apply to: "Drop me a message..." subtext */
.contact-subtext {
  font-family: var(--font-body) !important;
  font-size: var(--text-lg) !important;
  color: var(--color-text-muted) !important;
  text-align: center !important;
  max-width: 560px !important;
  margin: 16px auto 0 !important;
}

/* Apply to: the form card wrapper */
.contact-form-card.wpforms-container {
  background-color: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-none) !important;
  padding: 48px !important;
  max-width: 520px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-top: 40px !important;
}

/* Apply to: each field label — Name, Email, Message */
.contact-field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
}

/* Apply to: text input and email input fields */
.contact-input input {
  width: 100% !important;
  background-color: var(--color-background) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-none) !important;
  padding: 12px 16px !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  transition: border-color var(--transition) !important;
  outline: none !important;
}

.contact-input input::placeholder {
  color: var(--color-text-muted) !important;
}

.contact-input input:focus {
  border-color: var(--color-primary) !important;
}

/* Apply to: the message textarea */
.contact-textarea textarea {
  width: 100% !important;
  background-color: var(--color-background) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-none) !important;
  padding: 12px 16px !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  transition: border-color var(--transition) !important;
  outline: none !important;
  resize: none !important;
  min-height: 140px !important;
}

.contact-textarea textarea::placeholder {
  color: var(--color-text-muted) !important;
}

.contact-textarea textarea:focus {
  border-color: var(--color-primary) !important;
}

/* Apply to: the submit button */
button[type="submit"] {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 16px 32px !important;
  background-color: var(--color-primary) !important;
  color: var(--color-primary-fg) !important;
  font-family: var(--font-display) !important;
  font-weight: var(--weight-bold) !important;
  font-size: var(--text-md) !important;
  letter-spacing: var(--tracking-wide) !important;
  border-radius: var(--radius-none) !important;
  border: none !important;
  cursor: pointer !important;
  transition: filter var(--transition) !important;
}

button[type="submit"]:hover {
  filter: brightness(1.1);
}

button[type="submit"]::after {
  content: '' !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-left: 0px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  vertical-align: middle !important;
}

.wpforms-required-label {
  display: none !important;
}

#wpforms-840-field_1-container {
  padding-top: 0 !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--color-primary) !important;
}

.wpforms-container .wpforms-recaptcha-container .g-recaptcha {
  padding: 10px 0 20px 0 !important;
}

/* reCAPTCHA fluid fix — all major iPhone & Samsung viewports */

/* Base — all mobile */
.g-recaptcha,
.elementor-field-type-recaptcha .g-recaptcha {
  transform-origin: left center;
}

/* iPhone SE / small Android — 320px */
@media (max-width: 320px) {
  .g-recaptcha,
  .elementor-field-type-recaptcha .g-recaptcha {
    transform: scale(0.56);
  }
}

/* Samsung Galaxy mid-range — 360px */
@media (min-width: 321px) and (max-width: 360px) {
  .g-recaptcha,
  .elementor-field-type-recaptcha .g-recaptcha {
    transform: scale(0.57);
  }
}

/* iPhone 6/7/8/SE2 / older iPhones — 375px */
@media (min-width: 361px) and (max-width: 375px) {
  .g-recaptcha,
  .elementor-field-type-recaptcha .g-recaptcha {
    transform: scale(0.69);
  }
}

/* iPhone 12/13/14/15/16 base — 390px */
@media (min-width: 376px) and (max-width: 390px) {
  .g-recaptcha,
  .elementor-field-type-recaptcha .g-recaptcha {
    transform: scale(0.73);
  }
}

/* iPhone 14 Pro / 15 Pro / 16 Pro — 393px */
@media (min-width: 391px) and (max-width: 393px) {
  .g-recaptcha,
  .elementor-field-type-recaptcha .g-recaptcha {
    transform: scale(0.77);
  }
}

/* Samsung Galaxy S series / Pixel — 412px */
@media (min-width: 394px) and (max-width: 412px) {
  .g-recaptcha,
  .elementor-field-type-recaptcha .g-recaptcha {
    transform: scale(0.78);
  }
}

/* iPhone 15/16 Plus & Pro Max — 430px */
@media (min-width: 413px) and (max-width: 430px) {
  .g-recaptcha,
  .elementor-field-type-recaptcha .g-recaptcha {
    transform: scale(0.84);
  }
}

/* Anything wider — full size */
@media (min-width: 431px) {
  .g-recaptcha,
  .elementor-field-type-recaptcha .g-recaptcha {
    transform: scale(1);
  }
}

.wpforms-confirmation-container-full {
  background-color: var(--color-card) !important;
  border: none !important;
  margin-bottom: 0 !important;
}

.wpforms-confirmation-container-full p {
  color: var(--color-primary) !important;
}

/* ============================================================
   9. ANIMATIONS & KEYFRAMES
   ============================================================ */

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scroll-triggered animation classes */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-from-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-from-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.animate-from-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-from-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.animate-scale-x {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s ease;
}

.animate-scale-x.visible {
  transform: scaleX(1);
}

/* Stagger children */
.stagger-children .animate-on-scroll:nth-child(1) { transition-delay: 0.1s; }
.stagger-children .animate-on-scroll:nth-child(2) { transition-delay: 0.25s; }
.stagger-children .animate-on-scroll:nth-child(3) { transition-delay: 0.4s; }
.stagger-children .animate-on-scroll:nth-child(4) { transition-delay: 0.55s; }


/* ============================================================
   10. SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-background);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #444444;
}


/* ============================================================
   11. ELEMENTOR PRO OVERRIDES
   ============================================================ */

/* Force our fonts in Elementor widgets */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display) !important;
  letter-spacing: var(--tracking-tight);
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: var(--font-body);
  color: var(--color-text-muted);
}

/* Elementor buttons match our sharp corner style */
.elementor-button {
  border-radius: var(--radius-none) !important;
  font-family: var(--font-display) !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: var(--tracking-wide) !important;
}

/* Elementor sections max width */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--container-max);
}

/* Remove default Elementor section padding interference */
.elementor-section .elementor-container {
  padding-left: 0;
  padding-right: 0;
}

/* Elementor canvas — no header/footer (used during editing) */
.elementor-template-canvas .site-header,
.elementor-template-canvas .site-footer {
  display: none;
}

/* Elementor full width — remove top padding */
.elementor-template-full-width #main-content,
.elementor-template-full-width .site-main {
  padding-top: 0;
}

/* Elementor Pro Theme Builder header/footer */
.e-con,
.e-con-inner {
  --padding-block-start: 0;
  --padding-block-end: 0;
}

/* Responsive overrides */
@media (max-width: 768px) {
  :root {
    --container-padding: 16px;
    --nav-height:        60px;
  }
}

@media (max-width: 480px) {
  :root {
    --container-padding: 12px;
  }
}