/* ===================================================================
   Content Cookie — design system
   Palette: white + calm brand blue + warm cream accent + near-black
   Fonts: Aloevera Sans (self-hosted, headings) · Inter (UI/body sans)
   =================================================================== */

@font-face{ font-family:"Aloevera Sans"; src:url("fonts/Aloevera-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Aloevera Sans"; src:url("fonts/Aloevera-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Aloevera Sans"; src:url("fonts/Aloevera-ExtraBold.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }

:root{
  /* color */
  --bg:            #ffffff;
  --bg-soft:       #fafbfc;
  --cream:         #faf3ec;   /* warm accent band */
  --cream-line:    #f0e4d6;
  --ink:           #0e1116;   /* headings / near-black */
  --body:          #414753;   /* body text */
  --muted:         #6b7280;   /* secondary */
  --primary:       #2b59e0;   /* brand blue (calm) */
  --primary-dark:  #1e40c4;
  --primary-ink:   #0f1f57;   /* deep blue for dark sections */
  --line:          #e8ebf0;
  --line-strong:   #d8dde6;

  /* type */
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Aloevera Sans", "Inter", sans-serif;   /* main headings — self-hosted */
  --serif:   var(--sans);                   /* alias: non-heading display bits stay Inter */

  /* rhythm */
  --maxw: 1120px;
  --gutter: clamp(20px, 5vw, 40px);
  --radius: 16px;
  --radius-sm: 10px;
  --section-y: clamp(72px, 10vw, 128px);

  --shadow-sm: 0 1px 3px rgba(16,17,22,.06), 0 1px 2px rgba(16,17,22,.04);
  --shadow-md: 0 10px 30px -12px rgba(16,17,22,.14);
  --shadow-lg: 0 30px 60px -20px rgba(20,32,80,.22);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--body);
  background:var(--bg);
  font-size:17px;
  line-height:1.6;
  overflow-x:clip;            /* never allow horizontal scroll (clip keeps sticky header working) */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* ---------- typography helpers ---------- */
.eyebrow{
  font-size:.85rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--primary); margin:0 0 16px;
}
.eyebrow.center{ text-align:center; }
.eyebrow.light{ color:#cdd9ff; }
.section-title{
  font-family:var(--display); font-weight:700; color:var(--ink);
  font-size:clamp(1.95rem, 4vw, 3.1rem); line-height:1.14; letter-spacing:-.02em;
  margin:0 0 18px;
}
.section-title.center{ text-align:center; }
.section-title.light{ color:#fff; }
.section-title em{ font-style:normal; color:var(--primary); white-space:nowrap; }
.section-title.light em{ color:#bcd0ff; }
.section-lede{ color:var(--muted); font-size:1.08rem; max-width:640px; margin:0 0 48px; }
.section-lede.center{ margin-inline:auto; text-align:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  font-family:var(--sans); font-weight:600; font-size:1rem; line-height:1;
  padding:.9em 1.5em; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 8px 20px -8px rgba(43,89,224,.6); }
.btn-primary:hover{ background:var(--primary-dark); box-shadow:0 12px 26px -8px rgba(43,89,224,.7); }
.btn-outline{ background:#fff; color:var(--ink); border-color:var(--line-strong); }
.btn-outline:hover{ border-color:var(--primary); color:var(--primary); }
.btn-sm{ padding:.62em 1.15em; font-size:.92rem; }
.btn-lg{ padding:1.05em 1.9em; font-size:1.06rem; }
.btn-block{ width:100%; }

/* ===================================================================
   HEADER
   =================================================================== */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; gap:24px; height:72px; }
.brand{ display:inline-flex; align-items:center; gap:9px; font-weight:700; color:var(--ink); font-size:1.12rem; }
.brand-mark{ width:32px; height:32px; border-radius:9px; display:block; object-fit:cover; }
.brand-name{ font-family:var(--display); letter-spacing:-.01em; }
.brand-name .bn-1{ font-weight:700; }   /* "Content" — one step heavier */
.brand-name .bn-2{ font-weight:600; }   /* "Cookie" */
.nav{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.nav a{ font-size:.96rem; font-weight:500; color:var(--body); transition:color .15s ease; }
.nav a:hover{ color:var(--primary); }
.header-cta{ flex:none; }
.menu-cta{ display:none; }
.nav-toggle{ display:none; }

/* ===================================================================
   HERO
   =================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, #fff 0%, var(--cream) 60%, var(--cream) 100%);
  border-bottom:1px solid var(--cream-line);
}
.hero-inner{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-block:clamp(72px, 12vw, 150px) clamp(60px, 9vw, 110px);
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.84rem; font-weight:600; color:var(--primary-ink);
  background:#fff; border:1px solid var(--cream-line);
  padding:.55em 1.1em; border-radius:999px; box-shadow:var(--shadow-sm);
  margin-bottom:30px;
}
.pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--primary); }
.pill-break{ display:none; }
.hero-title{
  font-family:var(--display); font-weight:600; color:var(--ink);   /* line 1: lower intensity */
  font-size:clamp(2.5rem, 6.4vw, 4.9rem); line-height:1.05; letter-spacing:-.02em;
  margin:0 0 22px;
}
/* each line is its own block that can never wrap — kills the mid-word break */
.hero-title .line1,
.hero-title .line2{ display:block; white-space:nowrap; }
.hero-title .line2{ min-height:1.12em; }
/* whole-word swap: fades/slides in as a complete word — never half-typed, never wraps */
/* line 2: heavier + blue so it pops when the phrase swaps */
.typewriter{ display:inline-block; color:var(--primary); font-weight:800; font-style:normal; white-space:nowrap; transition:opacity .3s ease, transform .3s ease; }
.typewriter.swap-out{ opacity:0; transform:translateY(12px); }
.caret{
  display:inline-block; width:3px; height:.92em; margin-left:6px;
  background:var(--primary); border-radius:2px; transform:translateY(.06em);
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
.hero-sub{ font-size:clamp(1.05rem, 2.2vw, 1.28rem); color:var(--body); max-width:560px; margin:0 0 36px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.hero-scroll{ margin-top:56px; display:flex; justify-content:center; color:var(--muted); }
.scroll-chevron{ width:28px; height:28px; animation:scroll-bounce 1.8s ease-in-out infinite; }
@keyframes scroll-bounce{ 0%,100%{ transform:translateY(0); opacity:.45; } 50%{ transform:translateY(7px); opacity:1; } }

/* ===================================================================
   CLIENT MARQUEE
   =================================================================== */
.logos{ padding-block:44px; border-bottom:1px solid var(--line); background:var(--bg); }
.logos-label{ text-align:center; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 26px; }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track{ display:flex; gap:64px; width:max-content; animation:scroll-x 26s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.logo-item{ font-family:var(--serif); font-weight:700; font-size:1.5rem; color:#aeb4c0; white-space:nowrap; transition:color .2s ease; }
.logo-item:hover{ color:var(--ink); }
@keyframes scroll-x{ to{ transform:translateX(-50%); } }

/* ===================================================================
   WHAT YOU CAN EXPECT — pillars as alternating rows
   =================================================================== */
.expect{ padding-block:var(--section-y); }
.expect .section-title{ max-width:760px; margin-bottom:64px; }
.pillars{ display:flex; flex-direction:column; gap:clamp(48px, 8vw, 96px); }
.pillar-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px, 6vw, 80px); align-items:center; }
.pillar-row.reverse .pillar-copy{ order:2; }
.pillar-num{ font-family:var(--serif); font-size:2.4rem; font-weight:700; color:var(--line-strong); display:block; margin-bottom:8px; }
.pillar-copy h3{ font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--ink); font-weight:700; letter-spacing:-.01em; margin:0 0 14px; line-height:1.2; }
.pillar-copy p{ color:var(--body); margin:0 0 20px; max-width:460px; }
.pillar-tag{ display:inline-block; font-size:.82rem; font-weight:600; color:var(--primary); border-bottom:2px solid var(--primary); padding-bottom:2px; }

.pillar-visual{ border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-soft); padding:36px; min-height:240px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); }
.viz-pillars{ display:flex; flex-direction:column; gap:12px; width:100%; }
.viz-pillars span{ background:#fff; border:1px solid var(--line); border-left:3px solid var(--primary); border-radius:10px; padding:14px 18px; font-weight:600; color:var(--ink); box-shadow:var(--shadow-sm); }
.viz-schedule{ display:flex; flex-direction:column; gap:12px; width:100%; }
.viz-post{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px; box-shadow:var(--shadow-sm); }
.viz-post .stage{ font-size:.72rem; font-weight:600; padding:.35em .75em; border-radius:999px; white-space:nowrap; }
.viz-post .stage.awareness{ background:#eaf0fe; color:#2b59e0; }
.viz-post .stage.consideration{ background:#dbe4ff; color:#1e40c4; }
.viz-post .stage.conversion{ background:var(--primary); color:#fff; }
.viz-post .viz-line{ flex:1; height:8px; border-radius:4px; background:linear-gradient(90deg,var(--line-strong),transparent); }
/* visual 3 — matches viz-pillars: white cards, left blue accent, last node emphasized */
.viz-flow{ display:flex; flex-direction:column; gap:12px; width:100%; }
.viz-node{ background:#fff; border:1px solid var(--line); border-left:3px solid var(--primary); border-radius:10px; padding:14px 18px; font-weight:600; color:var(--ink); box-shadow:var(--shadow-sm); }
.viz-node.highlight{ background:var(--primary); border-color:var(--primary); border-left-color:#fff; color:#fff; box-shadow:0 8px 18px -6px rgba(43,89,224,.55); }

/* ===================================================================
   HOW IT WORKS
   =================================================================== */
.how{ padding-block:var(--section-y); background:var(--bg-soft); border-block:1px solid var(--line); }
.how .section-title{ margin-bottom:56px; }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step; }
.step{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 24px 26px; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.step:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.step-badge{ display:inline-block; font-size:.76rem; font-weight:600; color:var(--primary); background:#eef2fe; padding:.4em .8em; border-radius:999px; margin-bottom:18px; }
.step h3{ font-size:1.12rem; color:var(--ink); font-weight:700; line-height:1.28; margin:0 0 10px; }
.step p{ font-size:.94rem; color:var(--muted); margin:0 0 18px; }
.step-tag{ font-size:.8rem; font-weight:600; color:var(--body); }

/* ===================================================================
   NUMBERS / WHAT YOU GET  (dark blue band)
   =================================================================== */
.numbers{ padding-block:var(--section-y); background:radial-gradient(130% 130% at 50% -20%, #5b82f0 0%, var(--primary) 42%, var(--primary-dark) 100%); color:#fff; }
.numbers .section-title{ margin-bottom:56px; }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat{ text-align:center; padding:14px; }
.stat-num{ font-family:var(--serif); font-weight:700; font-size:clamp(3rem,6vw,4.4rem); line-height:1; color:#fff; display:block; white-space:nowrap; }
.stat-num .suffix{ color:#d5e0ff; font-family:var(--sans); font-weight:600; font-size:.42em; margin-left:.08em; letter-spacing:-.01em; }
.stat p{ color:#dbe4ff; font-size:.96rem; margin:14px auto 0; max-width:220px; }

/* ===================================================================
   90-DAY TIMELINE
   =================================================================== */
.timeline{ padding-block:var(--section-y); }
.timeline .section-title{ margin-bottom:56px; }
.tl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tl-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px; box-shadow:var(--shadow-sm); }
.tl-card::before{ content:""; position:absolute; top:0; left:30px; right:30px; height:3px; background:linear-gradient(90deg,var(--primary),#7ea0f4); border-radius:0 0 3px 3px; }
.tl-when{ display:inline-block; font-weight:700; color:var(--primary); font-size:.9rem; letter-spacing:.02em; margin-bottom:6px; }
.tl-card h3{ font-family:var(--serif); font-size:1.4rem; color:var(--ink); margin:0 0 16px; font-weight:700; }
.tl-card ul{ display:flex; flex-direction:column; gap:12px; }
.tl-card li{ position:relative; padding-left:24px; color:var(--body); font-size:.96rem; }
.tl-card li::before{ content:""; position:absolute; left:0; top:.5em; width:8px; height:8px; border-radius:50%; background:var(--primary); }

/* ===================================================================
   PRICING
   =================================================================== */
.pricing{ padding-block:var(--section-y); background:var(--bg-soft); border-block:1px solid var(--line); }
.price-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:860px; margin-inline:auto; }
.price-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:36px 32px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.price-card.featured{ border:2px solid var(--primary); box-shadow:var(--shadow-lg); }
.badge-popular{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--primary); color:#fff; font-size:.76rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:.4em 1em; border-radius:999px; box-shadow:0 6px 14px -6px rgba(43,89,224,.6); }
.tier{ font-family:var(--sans); font-weight:700; font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin:0 0 10px; }
.tier-desc{ color:var(--muted); font-size:.98rem; margin:0 0 22px; }
.tier-list{ display:flex; flex-direction:column; gap:13px; margin:0 0 28px; flex:1; }
.tier-list li{ position:relative; padding-left:28px; color:var(--body); font-size:.96rem; }
.tier-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--primary); font-weight:700; }
.tier-list li strong{ color:var(--ink); }

/* ===================================================================
   GUARANTEE
   =================================================================== */
/* cream background bridges straight into the .testimonials section (also cream) */
.guarantee{ padding-block:var(--section-y) clamp(40px,6vw,64px); background:var(--cream); }
.guarantee-inner{ display:flex; align-items:center; gap:36px; max-width:900px; margin-inline:auto; background:#fff; border:1px solid var(--cream-line); border-radius:var(--radius); padding:clamp(28px,5vw,48px); box-shadow:var(--shadow-md); }
.guarantee-badge{ flex:none; width:104px; height:104px; border-radius:50%; background:var(--primary); border:0; color:#fff; font-family:var(--serif); font-weight:800; font-size:2.6rem; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px -10px rgba(43,89,224,.55); }
.guarantee-copy h2{ font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,3vw,2.1rem); color:var(--ink); margin:0 0 10px; }
.guarantee-copy p{ color:var(--body); margin:0; max-width:720px; }

/* ===================================================================
   TESTIMONIALS
   =================================================================== */
.testimonials{ padding-block:var(--section-y); background:var(--cream); border-block:1px solid var(--cream-line); }
.testimonials .section-title{ margin-bottom:56px; }
.quote-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:940px; margin-inline:auto; }
.quote{ background:#fff; border:1px solid var(--cream-line); border-radius:var(--radius); padding:30px 30px 26px; margin:0; box-shadow:var(--shadow-sm); }
.stars{ color:#f5a623; letter-spacing:2px; margin-bottom:14px; font-size:.95rem; }
.quote blockquote{ margin:0 0 22px; color:var(--ink); font-size:1.06rem; line-height:1.55; }
.quote figcaption{ display:flex; flex-direction:column; gap:2px; }
.q-name{ font-weight:700; color:var(--ink); }
.q-role{ color:var(--muted); font-size:.9rem; }
.q-badge{ display:inline-flex; align-items:center; gap:8px; background:#eaf7ef; color:#1c7a44; font-weight:700; font-size:.86rem; padding:.5em 1em; border-radius:999px; margin-bottom:16px; }
.q-badge .q-dot{ width:8px; height:8px; border-radius:50%; background:#1c7a44; flex:none; }

/* ===================================================================
   BOOKING
   =================================================================== */
.book{ padding-block:var(--section-y); }
.book-inner{ text-align:center; }
.book .section-lede{ margin-bottom:40px; }
.calendly-inline-widget{ margin-inline:auto; max-width:760px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--line); }
.book-fallback{ margin-top:28px; }

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer{ background:#0e1116; color:#c4c9d4; padding-top:56px; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap; padding-bottom:36px; }
.footer-brand .brand{ color:#fff; margin-bottom:14px; }
.footer-brand p{ color:#8b93a4; max-width:380px; font-size:.96rem; margin:0; }
.footer-social{ display:inline-flex; align-items:center; gap:9px; color:#c4c9d4; border:1px solid #2a2f3a; padding:.68em 1.15em; border-radius:999px; font-weight:600; font-size:.94rem; transition:color .15s ease, border-color .15s ease, background .15s ease; }
.footer-social:hover{ color:#fff; border-color:var(--primary); background:rgba(43,89,224,.16); }
.footer-social svg{ width:18px; height:18px; flex:none; }
.footer-legal{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-legal a{ color:#a2aab9; font-size:.9rem; transition:color .15s ease; }
.footer-legal a:hover{ color:#fff; }
.footer-col h4{ color:#fff; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin:0 0 16px; font-weight:600; }
.footer-col li{ margin-bottom:11px; }
.footer-col a{ color:#a2aab9; font-size:.96rem; transition:color .15s ease; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-block:24px; border-top:1px solid #20242e; font-size:.9rem; color:#7a8294; }
.to-top{ width:38px; height:38px; border-radius:50%; background:#1a1e28; color:#fff; display:inline-flex; align-items:center; justify-content:center; transition:background .15s ease; }
.to-top:hover{ background:var(--primary); }

/* ===================================================================
   SCROLL REVEAL
   =================================================================== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal-words .w{ color:var(--line-strong); transition:color .35s ease; }
.reveal-words .w.lit{ color:var(--ink); }
.reveal-words em{ font-style:italic; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ===================================================================
   LEGAL PAGES (refund / privacy / terms)
   =================================================================== */
.legal-hero{ background:var(--cream); border-bottom:1px solid var(--cream-line); padding:clamp(56px,9vw,100px) 0 clamp(34px,5vw,52px); text-align:center; }
.legal-hero .eyebrow{ margin-bottom:12px; }
.legal-hero h1{ font-family:var(--display); font-weight:800; color:var(--ink); font-size:clamp(2.2rem,5vw,3.4rem); letter-spacing:-.02em; margin:0 0 12px; }
.legal-hero .eff{ color:var(--muted); font-size:.95rem; }
.legal-body{ max-width:800px; margin-inline:auto; padding:clamp(44px,7vw,76px) var(--gutter) clamp(60px,8vw,100px); }
.legal-body .lead{ font-size:1.12rem; color:var(--body); margin:0; }
.legal-sec{ margin-top:44px; }
.legal-sec .num{ display:inline-block; font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--primary); margin-bottom:8px; }
.legal-body h2{ font-family:var(--display); font-weight:700; color:var(--ink); font-size:clamp(1.35rem,2.6vw,1.7rem); letter-spacing:-.01em; margin:0 0 14px; }
.legal-body h3{ font-weight:700; color:var(--ink); font-size:1.05rem; margin:24px 0 8px; }
.legal-body p{ margin:0 0 16px; color:var(--body); }
.legal-body ul{ margin:0 0 16px; display:flex; flex-direction:column; gap:11px; }
.legal-body li{ position:relative; padding-left:26px; color:var(--body); }
.legal-body li::before{ content:""; position:absolute; left:5px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--primary); }
.legal-body a{ color:var(--primary); font-weight:500; }
.legal-body strong{ color:var(--ink); }
.legal-contact{ margin-top:18px; padding:26px 28px; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); }
.legal-contact p{ margin:0 0 7px; }
.legal-contact .label{ color:var(--muted); display:inline-block; min-width:88px; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:920px){
  .steps{ grid-template-columns:repeat(2,1fr); }
  .stat-grid{ grid-template-columns:repeat(2,1fr); gap:36px 24px; }
  .tl-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:720px){
  /* header → hamburger dropdown menu */
  .header-cta{ display:none; }
  .nav{ display:none; }
  .nav-toggle{ display:inline-flex; flex-direction:column; gap:5px; margin-left:auto; background:none; border:0; padding:8px; cursor:pointer; }
  .nav-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }
  .nav.open{ display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow-md); padding:8px var(--gutter) 18px; }
  .nav.open a:not(.menu-cta){ padding:14px 2px; font-size:1.02rem; color:var(--ink); border-bottom:1px solid var(--line); }
  .nav.open .menu-cta{ display:inline-flex; width:100%; justify-content:center; margin-top:14px; color:#fff; }
  /* stack multi-column sections */
  .pillar-row{ grid-template-columns:1fr; gap:22px; }
  .pillar-row.reverse .pillar-copy{ order:0; }
  .price-grid{ grid-template-columns:1fr; max-width:440px; }
  .quote-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .steps{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:1fr; }
  .footer-top{ flex-direction:column; gap:22px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:14px; }
  /* headings smaller + blue accent phrase stays whole */
  .section-title{ font-size:1.7rem; }
  .section-lede{ font-size:1rem; }
  /* hero — headline leads; pill + button recede */
  .hero{ overflow-x:clip; }
  .pill{ display:inline-block; font-size:.74rem; padding:.5em 1em; line-height:1.5; text-align:center; max-width:100%; margin-bottom:22px; }
  .pill::before{ display:none; }                 /* drop the stray dot on mobile */
  .pill-break{ display:inline; }                 /* controlled 2-line break */
  .hero-title{ font-size:clamp(1.55rem, 8vw, 2.05rem); }
  .hero-sub{ font-size:1.02rem; }
  .hero-cta .btn{ font-size:.95rem; padding:.85em 1.5em; }   /* auto width, not full-bleed */
  .hero-scroll{ margin-top:42px; }
  .logo-item{ font-size:1.25rem; }
  /* compact CTA in the legal-page headers */
  .site-header .header-inner .btn-sm{ font-size:.84rem; padding:.55em .85em; }
}
@media (max-width:380px){
  .brand-name{ font-size:.98rem; }
  .brand-mark{ width:28px; height:28px; }
}

/* ===================================================================
   DECORATIVE MOCKUP (chip / pixel motif) — DELETE THIS WHOLE BLOCK TO REVERT
   =================================================================== */
/* Spot 1 — faint pixel texture on the dark-blue "what you get" band */
.numbers{ position:relative; overflow:hidden; }
.numbers > .container{ position:relative; z-index:1; }
.numbers::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2728%27%20height%3D%2728%27%3E%3Crect%20width%3D%273%27%20height%3D%273%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E");
  background-size:28px 28px; opacity:.07;
}
/* Spot 2 — scattered brand-blue pixels in the hero corners */
.hero-inner{ position:relative; z-index:1; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Crect%20x%3D%2710%27%20y%3D%2720%27%20width%3D%2716%27%20height%3D%2716%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%2740%27%20y%3D%2710%27%20width%3D%2710%27%20height%3D%2710%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%2764%27%20y%3D%2730%27%20width%3D%2714%27%20height%3D%2714%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%2730%27%20y%3D%2752%27%20width%3D%2710%27%20height%3D%2710%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%2792%27%20y%3D%2718%27%20width%3D%2712%27%20height%3D%2712%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%27116%27%20y%3D%2742%27%20width%3D%2716%27%20height%3D%2716%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%2772%27%20y%3D%2766%27%20width%3D%2710%27%20height%3D%2710%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%27102%27%20y%3D%2782%27%20width%3D%2712%27%20height%3D%2712%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%27136%27%20y%3D%2772%27%20width%3D%2710%27%20height%3D%2710%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%2720%27%20y%3D%2792%27%20width%3D%2712%27%20height%3D%2712%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%2752%27%20y%3D%2788%27%20width%3D%278%27%20height%3D%278%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%27128%27%20y%3D%2720%27%20width%3D%278%27%20height%3D%278%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Crect%20x%3D%2710%27%20y%3D%2720%27%20width%3D%2716%27%20height%3D%2716%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%2740%27%20y%3D%2710%27%20width%3D%2710%27%20height%3D%2710%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%2764%27%20y%3D%2730%27%20width%3D%2714%27%20height%3D%2714%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%2730%27%20y%3D%2752%27%20width%3D%2710%27%20height%3D%2710%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%2792%27%20y%3D%2718%27%20width%3D%2712%27%20height%3D%2712%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%27116%27%20y%3D%2742%27%20width%3D%2716%27%20height%3D%2716%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%2772%27%20y%3D%2766%27%20width%3D%2710%27%20height%3D%2710%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%27102%27%20y%3D%2782%27%20width%3D%2712%27%20height%3D%2712%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%27136%27%20y%3D%2772%27%20width%3D%2710%27%20height%3D%2710%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%2720%27%20y%3D%2792%27%20width%3D%2712%27%20height%3D%2712%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%2752%27%20y%3D%2788%27%20width%3D%278%27%20height%3D%278%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3Crect%20x%3D%27128%27%20y%3D%2720%27%20width%3D%278%27%20height%3D%278%27%20rx%3D%272%27%20fill%3D%27%232b59e0%27%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat, no-repeat;
  background-position:top 18px right 18px, bottom 18px left 18px;
  opacity:.4;
}
@media (max-width:560px){ .hero::after{ display:none; } }

/* ===================================================================
   MOBILE HERO — Concept 2 (live post card). Renders only on <=560px.
   =================================================================== */
.hero-m{ display:none; }
@media (max-width:560px){
  .hero{ display:none; }
  .hero-m{ display:block; }
}
.hero-m{
  position:relative; overflow:hidden; text-align:center;
  padding:32px 22px 40px;
  background:radial-gradient(120% 60% at 50% 0%, #ffffff 0%, var(--cream) 70%);
  border-bottom:1px solid var(--cream-line);
}
.hero-m .m2-tag{ display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--primary); background:#fff; border:1px solid var(--cream-line); padding:.55em 1.05em; border-radius:999px; box-shadow:var(--shadow-sm); margin-bottom:22px; }
.hero-m .m2-title{ font-family:var(--display); font-weight:800; color:var(--ink); font-size:clamp(1.9rem,8.5vw,2.4rem); line-height:1.08; letter-spacing:-.02em; margin:0; }
.hero-m .m2-title .hl{ color:var(--primary); }
.hero-m .m2-rotate{ display:inline-block; transition:opacity .3s ease, transform .3s ease; }
.hero-m .m2-rotate.swap-out{ opacity:0; transform:translateY(10px); }
.hero-m .m2-sub{ color:var(--muted); font-size:1rem; line-height:1.5; max-width:300px; margin:14px auto 0; }
.hero-m .m2-card{ text-align:left; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); padding:16px 16px 14px; margin:26px auto 0; max-width:340px; width:100%; }
.hero-m .m2-top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.hero-m .m2-av{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; }
.hero-m .m2-av-ph{ position:relative; overflow:hidden; background:linear-gradient(135deg,#2b59e0,#1e40c4); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; }
.hero-m .m2-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-m .m2-name{ font-weight:700; color:var(--ink); font-size:.95rem; line-height:1.1; }
.hero-m .m2-meta{ color:var(--muted); font-size:.78rem; }
.hero-m .m2-line{ height:11px; border-radius:6px; background:linear-gradient(90deg,#e9edf5,#f4f6fb); margin:9px 0; opacity:0; transform:translateY(6px); animation:m2line .5s ease forwards; }
.hero-m .m2-line.t{ background:none; height:auto; color:var(--ink); font-size:.95rem; line-height:1.45; }
.hero-m .m2-l1{ animation-delay:.3s; width:100%; }
.hero-m .m2-l2{ animation-delay:.7s; width:92%; }
.hero-m .m2-l3{ animation-delay:1.1s; width:70%; }
@keyframes m2line{ to{ opacity:1; transform:none; } }
.hero-m .m2-foot{ display:flex; align-items:center; gap:16px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; font-weight:600; }
.hero-m .m2-react{ display:inline-flex; align-items:center; gap:6px; }
.hero-m .m2-dot{ width:18px; height:18px; border-radius:50%; background:var(--primary); color:#fff; font-size:.7rem; display:inline-flex; align-items:center; justify-content:center; }
.hero-m .m2-leads{ margin-left:auto; color:var(--primary); font-weight:700; }
.hero-m .m2-cta{ margin-top:28px; }
.hero-m .m2-cta .btn{ width:100%; font-size:1.02rem; padding:1.05em 1.4em; }
.hero-m .m2-chevron{ width:26px; height:26px; margin:26px auto 0; color:var(--muted); animation:scroll-bounce 1.8s ease-in-out infinite; }

/* ===================================================================
   REAL CLIENT LOGOS · ABOUT · KEYWORD TICKER · PRICING FROM (added)
   =================================================================== */
/* logo marquee now uses gray-silhouette PNGs */
.logo-item{ height:30px; width:auto; opacity:.62; flex:none; font-size:0; transition:opacity .2s ease; }
.logo-item:hover{ opacity:1; }

/* About us section */
.about{ background:#fff; padding-block:clamp(52px,8vw,88px); border-bottom:1px solid var(--line); text-align:center; }
.about-copy{ font-size:clamp(1.12rem,2vw,1.42rem); line-height:1.55; color:var(--ink); max-width:800px; margin:16px auto 0; }
.about-copy strong{ font-weight:700; }

/* Keyword ticker band */
.kw-ticker{ overflow:hidden; background:var(--cream); border-block:1px solid var(--cream-line); padding:14px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.kw-track{ display:flex; align-items:center; width:max-content; animation:scroll-x 34s linear infinite; }
.kw{ font-weight:600; color:var(--primary-ink); font-size:.96rem; white-space:nowrap; padding:0 22px; }
.kw-dot{ width:5px; height:5px; border-radius:50%; background:var(--primary); flex:none; }

/* Pricing "From $X/mo" */
.tier-price{ margin:2px 0 16px; color:var(--muted); font-size:1rem; }
.tier-price strong{ font-family:var(--display); font-weight:800; color:var(--ink); font-size:2rem; letter-spacing:-.02em; margin:0 2px; }
.tier-price span{ color:var(--muted); font-size:1rem; }