/* ============================================================
   GrowCarte — Paid Advertising Service Page
   Stylesheet (extracted from inline <style>, aligned with the
   site-wide responsive system: ≥1400 desktop, 1024–1399 laptop,
   768–1023 tablet, 481–767 large phone, ≤480 phone)
   ============================================================ */

/* ============================================
   TOKENS — identical to homepage
   ============================================ */
:root{
  --ink:        #040037;
  --ink-soft:   #4A4776;
  --blue:       #0077FC;
  --blue-deep:  #0058C4;
  --blue-pale:  #E7F0FE;
  --paper:      #F7F8FC;
  --paper-alt:  #FFFFFF;
  --mist:       #EEF2FB;
  --line:       #DEE4F5;
  --lift:       #12995A;
  --lift-pale:  #E4F6EC;
  --danger:     #C0392B;

  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --max: 1160px;
  --radius: 14px;
  --radius-sm: 8px;

  --shadow-sm: 0 1px 2px rgba(4,0,55,0.06);
  --shadow-md: 0 12px 32px -12px rgba(4,0,55,0.18);
  --shadow-lg: 0 24px 60px -20px rgba(4,0,55,0.28);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0; font-family:var(--font-body); color:var(--ink); background:var(--paper);
  line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); margin:0; line-height:1.15; letter-spacing:-0.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
a.inline-link{ color:var(--blue); }
a.inline-link:hover{ color:var(--blue-deep); }
img, svg{ max-width:100%; }
img{ display:block; }
button{ font-family:inherit; cursor:pointer; }

a:focus-visible, button:focus-visible{ outline:2.5px solid var(--blue); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; width:100%; }

.eyebrow{
  font-family:var(--font-mono); font-size:0.72rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--blue-deep); display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:""; width:16px; height:2px; background:var(--blue); display:inline-block; flex:none; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:100px; font-family:var(--font-body); font-weight:600; font-size:0.95rem;
  border:1.5px solid transparent;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 10px 24px -10px rgba(0,119,252,0.55); }
.btn-primary:hover{ background:var(--blue-deep); transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(0,119,252,0.6); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue-deep); transform:translateY(-2px); }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger.is-visible > *{ transition-delay:calc(var(--i) * 90ms); }

/* ============================================
   HEADER
   ============================================ */
header.site-header{
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid transparent; transition:border-color .25s ease, box-shadow .25s ease;
  width:100%;
  isolation:isolate;
}
/* Blur lives on a ::before layer instead of directly on the header.
   backdrop-filter on the header itself creates a new CSS containing
   block for position:fixed descendants on most mobile browsers,
   which traps the full-screen mobile nav inside the header's own
   (tiny) box instead of letting it cover the viewport. */
header.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
header.site-header.is-scrolled{ border-bottom-color:var(--line); box-shadow:var(--shadow-sm); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:78px; }
.brand{ display:flex; align-items:center; gap:10px; min-width:0; flex:none; }
.brand img{ height:154px; width:auto; object-fit:contain; }
nav.main-nav{ display:flex; align-items:center; gap:6px; }
nav.main-nav a.nav-link{ padding:10px 14px; border-radius:100px; font-size:0.93rem; font-weight:500; color:var(--ink-soft); transition:background .18s ease, color .18s ease; white-space:nowrap; }
nav.main-nav a.nav-link:hover{ background:var(--mist); color:var(--ink); }
nav.main-nav a.nav-link.is-current{ color:var(--blue-deep); background:var(--blue-pale); }
.header-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.nav-cta{ display:none; }
.nav-toggle{
  display:none; width:42px; height:42px; border:1.5px solid var(--line); border-radius:10px; background:#fff;
  align-items:center; justify-content:center; flex-direction:column; gap:4px; flex:none;
}
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ============================================
   SERVICES DROPDOWN (header nav)
   ============================================ */
.nav-dropdown{ position:relative; }
.nav-dropdown > .nav-link{ display:inline-flex; align-items:center; gap:5px; }
.nav-dropdown .caret{ font-size:0.6rem; transition:transform 200ms ease; }
.nav-dropdown-menu{
  position:absolute; top:100%; left:0; padding-top:8px; min-width:230px; z-index:110;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity 180ms ease, transform 180ms ease;
}
.nav-dropdown-menu-inner{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); padding:8px; display:flex; flex-direction:column; gap:2px;
}
.nav-dropdown-menu a{ padding:10px 12px; border-radius:8px; font-size:0.9rem; font-weight:500; color:var(--ink-soft); transition:background .18s ease, color .18s ease; }
.nav-dropdown-menu a:hover{ background:var(--mist); color:var(--ink); }
@media (hover:hover) and (pointer:fine){
  .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .nav-dropdown:hover .caret{ transform:rotate(180deg); }
}
.nav-dropdown.is-open .nav-dropdown-menu{ opacity:1; transform:translateY(0); pointer-events:auto; }
.nav-dropdown.is-open .caret{ transform:rotate(180deg); }
/* Marks the specific service page you're currently on inside the
   dropdown — separate from .nav-link.is-current on the "Services"
   trigger itself, which only says you're somewhere under Services. */
.nav-dropdown-menu a.is-current{ background:var(--blue-pale); color:var(--blue-deep); font-weight:600; }
.nav-dropdown-menu a.is-current:hover{ background:var(--blue-pale); color:var(--blue-deep); }

/* ============================================
   FOOTER
   ============================================ */
footer.site-footer{ background:var(--ink); color:rgba(255,255,255,0.72); padding:64px 0 28px; width:100%; }
.footer-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,0.12); }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand img{ height:30px; }
.footer-col p.foot-desc{ font-size:0.88rem; max-width:32ch; color:rgba(255,255,255,0.55); }
.footer-col h4{ color:#fff; font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase; font-family:var(--font-mono); font-weight:600; margin-bottom:16px; }
.footer-col ul li{ margin-bottom:11px; }
.footer-col ul a{ font-size:0.9rem; color:rgba(255,255,255,0.72); transition:color .18s ease; }
.footer-col ul a:hover{ color:#fff; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:24px; font-size:0.82rem; color:rgba(255,255,255,0.5); flex-wrap:wrap; gap:12px; }
.footer-legal{ display:flex; gap:20px; }

/* ============================================
   SHARED SECTION / CARD PATTERNS
   ============================================ */
.section{ padding:88px 0; width:100%; }
.section-alt{ background:var(--paper-alt); }
.section-head{ max-width:680px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(1.7rem, 3vw, 2.3rem); margin-top:14px; }
.section-head p{ margin-top:14px; color:var(--ink-soft); font-size:1.02rem; }
.service-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px; min-width:0; }

.card-hover{ transition:transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.card-hover:hover{ transform:translateY(-5px) scale(1.02); box-shadow:var(--shadow-md); border-color:var(--blue); }

/* ============================================
   SERVICE HERO
   ============================================ */
.svc-hero{ padding:64px 0 40px; width:100%; }
.svc-hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.svc-hero h1{ font-size:clamp(1.9rem, 3.8vw, 3.1rem); margin-top:16px; }
.svc-hero h1 .accent{ color:var(--blue); }
.svc-hero .lede{ margin-top:18px; font-size:1.06rem; color:var(--ink-soft); max-width:520px; }
.svc-outcomes{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.svc-outcomes li{ display:flex; align-items:flex-start; gap:10px; font-size:0.96rem; color:var(--ink-soft); }
.svc-outcomes li::before{ content:""; width:7px; height:7px; margin-top:8px; border-radius:2px; background:var(--blue); flex:none; }
.svc-hero-actions{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.svc-hero-media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:1402/1122; width:100%; margin:0 auto; display:flex; align-items:center; justify-content:center; background:var(--blue-pale); min-width:0; }
.svc-hero-media img{ width:100%; height:100%; object-fit:cover; }

/* ============================================
   WHO THIS IS FOR
   ============================================ */
.who-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.who-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.who-card .ico{ width:38px; height:38px; border-radius:50%; background:var(--blue-pale); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.9rem; flex:none; }
.who-card p{ font-size:0.92rem; color:var(--ink-soft); }

/* ============================================
   PROBLEMS WE SOLVE
   ============================================ */
.problems-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; }
.problems-list{ display:flex; flex-direction:column; gap:16px; }
.problem-item{ display:flex; gap:14px; align-items:flex-start; padding:18px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; min-width:0; }
.problem-item .ico{ width:34px; height:34px; border-radius:8px; background:#FDEEEC; color:var(--danger); display:flex; align-items:center; justify-content:center; flex:none; }
.problem-item h4{ font-size:0.96rem; }
.problem-item p{ font-size:0.88rem; color:var(--ink-soft); margin-top:4px; }
.problems-media{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); min-width:0; background:var(--mist); aspect-ratio:4/3; }
.problems-media img{ width:100%; height:100%; object-fit:cover; }

/* ============================================
   SERVICE COMPONENTS
   ============================================ */
.components-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.component-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.component-card .num{ font-family:var(--font-mono); font-size:0.72rem; font-weight:600; color:var(--blue-deep); }
.component-card h3{ font-size:1.05rem; }
.component-card p{ font-size:0.92rem; color:var(--ink-soft); }

/* ============================================
   PROCESS
   ============================================ */
.process-list{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.process-step{ display:flex; flex-direction:column; gap:10px; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; min-width:0; }
.process-step .process-num{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--blue); }
.process-step h3{ font-size:1.05rem; }
.process-step p{ font-size:0.9rem; color:var(--ink-soft); }

/* ============================================
   PROOF / METRICS
   ============================================ */
.metrics-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:16px; }
.metric-tile{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 16px; text-align:center; min-width:0; }
.metric-tile .val{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--blue); }
.metric-tile .lbl{ font-size:0.78rem; color:var(--ink-soft); margin-top:6px; }
/* Fixed height:420px + only max-width:100% (no aspect-ratio) meant
   the box stayed literally 420px tall while its width shrank on
   narrow screens, distorting the image out of proportion. Swapped
   to aspect-ratio so it always stays square. */
.proof-media{ margin-top:36px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); max-width:420px; aspect-ratio:1/1; margin-left:auto; margin-right:auto; background:var(--mist); }
.proof-media img{ display:block; width:100%; height:100%; object-fit:cover; }

/* ============================================
   FAQ
   ============================================ */
.faq-list{ display:flex; flex-direction:column; gap:12px; max-width:760px; }
.faq-item{ border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; overflow:hidden; transition:border-color 200ms ease, box-shadow 200ms ease; }
.faq-item .faq-q{
  width:100%; padding:18px 22px; font-weight:600; font-size:0.98rem; font-family:inherit; text-align:left;
  background:none; border:none; color:var(--ink); cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item .faq-q .faq-icon{ color:var(--blue); font-size:1.2rem; flex:none; transition:transform 200ms ease, color 200ms ease; }

.faq-item .faq-a-wrap{ max-height:0; opacity:0; overflow:hidden; transition:max-height 220ms ease, opacity 200ms ease; }
.faq-item .faq-a{ padding:0 22px 20px; font-size:0.92rem; color:var(--ink-soft); }

/* Opening is always driven by a click/tap — on every device, no
   feature-detection involved (see script). Detecting "does this
   device support hover" to decide whether JS should even run is
   unreliable in practice (touch laptops, some Android browsers,
   etc. can misreport it), which would silently disable the
   accordion on some phones. Hover only gives desktop pointer users
   a subtle highlight — it doesn't open the panel itself, so there's
   nothing for a touch device to miss. */
@media (hover:hover) and (pointer:fine){
  .faq-item:hover{ border-color:var(--blue); box-shadow:var(--shadow-sm); }
}
.faq-item.is-open{ border-color:var(--blue); box-shadow:var(--shadow-sm); }
.faq-item.is-open .faq-a-wrap{ max-height:320px; opacity:1; }
.faq-item.is-open .faq-q .faq-icon{ transform:rotate(45deg); }

/* ============================================
   CLOSING CTA
   ============================================ */
.svc-cta{ background:var(--ink); border-radius:var(--radius); padding:52px 48px; text-align:center; }
.svc-cta h2{ color:#fff; font-size:clamp(1.5rem, 3vw, 2.1rem); }
.svc-cta p{ color:rgba(255,255,255,0.68); margin-top:14px; max-width:560px; margin-left:auto; margin-right:auto; }
.svc-cta-actions{ display:flex; justify-content:center; gap:12px; margin-top:26px; flex-wrap:wrap; }
.svc-cta .fine{ margin-top:16px; font-size:0.82rem; color:rgba(255,255,255,0.5); }

/* ============================================================
   BEFORE VS. AFTER COMPARISON CHART — scoped entirely under
   .paid-ads-profit-calculator so nothing here leaks into (or is
   affected by) the rest of the page.
   ============================================================ */
.paid-ads-profit-calculator{
  --pc-bg-1:#050b2e; --pc-bg-2:#071c4d; --pc-bg-3:#0a2d6b;
  --pc-line-blue:#2e8fff; --pc-line-blue-bright:#5cabff; --pc-dot-ring:#0d1b4a;
  --pc-grid-line:rgba(255,255,255,0.06); --pc-text-dim:#7f8bbd; --pc-text-mid:#a9b3da;
  --pc-text-bright:#ffffff; --pc-radius-card:22px; --pc-before-line:#8b93b8;
  --pc-font-mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
.paid-ads-profit-calculator .section-head{ margin-bottom:24px; }
/* Capped and centered instead of spanning the full .wrap width
   (up to 1160px). A narrower card means the graph — which sizes
   itself from the card's own width — comes out physically smaller
   in real pixels too, on top of its aspect-ratio, so the whole
   widget reads as a compact tool rather than a full-bleed section. */
.paid-ads-profit-calculator .pc-card{
  width:100%; max-width:660px; margin-left:auto; margin-right:auto;
  background:radial-gradient(120% 140% at 100% 0%, var(--pc-bg-3) 0%, var(--pc-bg-2) 45%, var(--pc-bg-1) 100%);
  border-radius:var(--pc-radius-card); padding:20px 20px 16px; box-shadow:0 30px 70px -25px rgba(5,11,46,0.55); color:var(--pc-text-bright);
  min-width:0;
}
.paid-ads-profit-calculator .pc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.paid-ads-profit-calculator .pc-title{ font-family:var(--pc-font-mono); font-size:0.72rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--pc-text-dim); }
.paid-ads-profit-calculator .pc-toggle-row{ display:flex; flex-wrap:wrap; gap:8px; }
.paid-ads-profit-calculator .pc-timeline-toggle{ display:flex; gap:6px; background:rgba(255,255,255,0.06); border-radius:100px; padding:4px; flex:none; }
.paid-ads-profit-calculator .pc-timeline-toggle button{ font-family:var(--pc-font-mono); font-size:0.72rem; font-weight:700; letter-spacing:0.04em; padding:7px 14px; border-radius:100px; color:var(--pc-text-mid); background:none; border:none; cursor:pointer; transition:background .18s ease, color .18s ease; }
.paid-ads-profit-calculator .pc-timeline-toggle button.active{ background:var(--pc-line-blue); color:#fff; }
/* The legend's "dashed = before, solid = after" key is repeated
   word-for-word in .pc-hint below the graph — keeping both cost
   real vertical space for zero extra information, so the legend
   is dropped everywhere and the hint carries that job alone. */
.paid-ads-profit-calculator .pc-legend{ display:none; }
.paid-ads-profit-calculator .pc-options{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.paid-ads-profit-calculator .pc-option{ display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:100px; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.03); color:var(--pc-text-mid); font-size:0.86rem; font-weight:600; cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.paid-ads-profit-calculator .pc-option img{ width:20px; height:20px; object-fit:contain; border-radius:4px; background:#fff; }
.paid-ads-profit-calculator .pc-option:hover{ border-color:rgba(255,255,255,0.28); color:var(--pc-text-bright); }
.paid-ads-profit-calculator .pc-option.active{ background:rgba(46,143,255,0.16); border-color:var(--pc-line-blue-bright); color:#fff; box-shadow:0 0 0 1px var(--pc-line-blue-bright) inset; }
.paid-ads-profit-calculator .pc-control{ margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
.paid-ads-profit-calculator .pc-control label{ font-family:var(--pc-font-mono); font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--pc-text-dim); flex:none; }
.paid-ads-profit-calculator .pc-amount-field{ display:flex; align-items:center; gap:4px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); border-radius:10px; padding:7px 12px; flex:none; }
.paid-ads-profit-calculator .pc-amount-field span{ color:var(--pc-text-dim); font-weight:700; }
.paid-ads-profit-calculator .pc-amount-field input[type="number"]{ width:100px; background:none; border:none; color:#fff; font-weight:700; font-size:0.95rem; outline:none; }
.paid-ads-profit-calculator input[type="range"]{ flex:1 1 200px; min-width:140px; accent-color:var(--pc-line-blue-bright); }
/* Cut hard from the original 16/7.4 — this graph plus everything
   above it was already taller than most laptop screens on its own,
   forcing a scroll before the callouts and comparison grid below
   were even reachable. A capped max-height also stops it growing
   even taller on wide monitors. The SVG uses preserveAspectRatio=
   "none" and simply stretches to fill whatever box it's given, so
   nothing gets cropped by shrinking this — it just reads flatter. */
.paid-ads-profit-calculator .pc-graph-wrap{ position:relative; margin-top:12px; width:100%; aspect-ratio:16/4.4; max-height:210px; touch-action:none; }
.paid-ads-profit-calculator .pc-graph-wrap svg{ width:100%; height:100%; display:block; overflow:visible; }
.paid-ads-profit-calculator .pc-grid-line{ stroke:var(--pc-grid-line); stroke-width:1; }
.paid-ads-profit-calculator .pc-area-fill{ transition:d .3s ease; }
.paid-ads-profit-calculator .pc-line{ fill:none; stroke:var(--pc-line-blue); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; filter:url(#pcLineGlow); transition:d .3s ease, opacity .2s ease; }
.paid-ads-profit-calculator .pc-line-before{ fill:none; stroke:var(--pc-before-line); stroke-width:2.5; stroke-dasharray:6 5; stroke-linecap:round; stroke-linejoin:round; opacity:0.85; transition:d .3s ease; }
.paid-ads-profit-calculator .pc-marker-line{ stroke:rgba(255,255,255,0.22); stroke-width:1; stroke-dasharray:4 4; }
.paid-ads-profit-calculator .pc-point-ring{ fill:var(--pc-dot-ring); stroke:var(--pc-line-blue-bright); stroke-width:2.5; r:6; transition:cx .3s ease, cy .3s ease, stroke .25s ease, opacity .2s ease; }
.paid-ads-profit-calculator .pc-point-core{ fill:var(--pc-line-blue-bright); transition:cx .3s ease, cy .3s ease, fill .25s ease, opacity .2s ease; }
.paid-ads-profit-calculator .pc-point-ring.is-before{ stroke:var(--pc-before-line); }
.paid-ads-profit-calculator .pc-point-core.is-before{ fill:var(--pc-before-line); }
.paid-ads-profit-calculator .pc-point-value{ font-family:var(--pc-font-mono); font-size:11.5px; font-weight:700; fill:var(--pc-text-bright); text-anchor:middle; transition:x .3s ease, y .3s ease, opacity .2s ease; }
.paid-ads-profit-calculator .pc-axis-label{ font-family:var(--pc-font-mono); font-size:11.5px; fill:var(--pc-text-mid); }
.paid-ads-profit-calculator .pc-y-tick-label{ font-family:var(--pc-font-mono); font-size:10.5px; fill:var(--pc-text-dim); }
.paid-ads-profit-calculator .pc-axis-title{ font-family:var(--pc-font-mono); font-size:10.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; fill:var(--pc-text-mid); }
.paid-ads-profit-calculator .pc-callouts{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.paid-ads-profit-calculator .pc-callout{ background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:13px 15px; transition:border-color .2s ease, background .2s ease; min-width:0; }
.paid-ads-profit-calculator .pc-callout.is-focused{ border-color:var(--pc-line-blue-bright); background:rgba(46,143,255,0.1); }
.paid-ads-profit-calculator .pc-callout .pc-callout-label{ font-family:var(--pc-font-mono); font-size:0.68rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--pc-text-dim); }
.paid-ads-profit-calculator .pc-callout .pc-callout-value{ margin-top:6px; font-size:1.4rem; font-weight:800; color:#fff; transition:opacity .2s ease; }
.paid-ads-profit-calculator .pc-callout .pc-callout-value.lift{ color:#2fe08c; }
.paid-ads-profit-calculator .pc-comparison{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.08); }
.paid-ads-profit-calculator .pc-comparison-title{ font-family:var(--pc-font-mono); font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--pc-text-dim); margin-bottom:10px; }
.paid-ads-profit-calculator .pc-summary-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.06); font-size:0.82rem; flex-wrap:wrap; }
.paid-ads-profit-calculator .pc-summary-row:last-child{ border-bottom:none; }
.paid-ads-profit-calculator .pc-summary-row .pc-summary-label{ color:var(--pc-text-mid); font-weight:600; flex:none; }
.paid-ads-profit-calculator .pc-summary-row .pc-summary-vals{ display:flex; align-items:center; gap:8px; font-family:var(--pc-font-mono); color:var(--pc-text-bright); font-weight:700; }
.paid-ads-profit-calculator .pc-summary-row .pc-summary-vals .arrow{ color:var(--pc-text-dim); font-weight:400; }
.paid-ads-profit-calculator .pc-summary-row .pc-summary-vals .after-val{ color:#2fe08c; }
.paid-ads-profit-calculator .pc-comparison-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.paid-ads-profit-calculator .pc-comparison-card{ display:flex; align-items:center; gap:8px; padding:8px; border-radius:12px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03); cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; min-width:0; }
.paid-ads-profit-calculator .pc-comparison-card:hover{ transform:translateY(-3px); box-shadow:0 12px 24px -12px rgba(46,143,255,0.5); border-color:rgba(255,255,255,0.24); }
.paid-ads-profit-calculator .pc-comparison-card.is-active{ border-color:var(--pc-line-blue-bright); background:rgba(46,143,255,0.1); }
.paid-ads-profit-calculator .pc-comparison-card img{ width:24px; height:24px; object-fit:contain; border-radius:5px; background:#fff; flex:none; }
.paid-ads-profit-calculator .pc-comparison-card-body{ min-width:0; }
.paid-ads-profit-calculator .pc-comparison-card-name{ font-size:0.84rem; font-weight:700; color:var(--pc-text-bright); }
.paid-ads-profit-calculator .pc-comparison-card-values{ display:flex; gap:10px; margin-top:2px; font-size:0.76rem; color:var(--pc-text-mid); flex-wrap:wrap; }
.paid-ads-profit-calculator .pc-comparison-card-values b{ color:#2fe08c; font-weight:700; }
.paid-ads-profit-calculator .pc-hint{ margin-top:10px; font-size:0.76rem; color:var(--pc-text-dim); }
.paid-ads-profit-calculator .pc-disclaimer{ margin-top:6px; font-size:0.76rem; color:var(--pc-text-dim); font-style:italic; }

/* ============================================================
   RESPONSIVE
   Breakpoints: 1024 (laptop/tablet), 980 (grid stacking, matches
   homepage), 720 (mobile nav + single-column), 600 / 480 / 360
   (progressive phone tightening).
   ============================================================ */

@media (max-width: 1024px){
  .wrap{ padding:0 20px; }
  .section{ padding:76px 0; }
  .section-head{ margin-bottom:38px; }
}

@media (max-width: 980px){
  .svc-hero-grid{ grid-template-columns:1fr; gap:36px; }
  .svc-hero .lede{ max-width:none; }
  .who-grid{ grid-template-columns:repeat(2,1fr); }
  .problems-grid{ grid-template-columns:1fr; gap:32px; }
  .problems-grid .problems-media{ order:-1; }
  .components-grid{ grid-template-columns:repeat(2,1fr); }
  .process-list{ grid-template-columns:repeat(2,1fr); }
  .metrics-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:36px; }
}

@media (max-width: 720px){
  .header-inner{ height:64px; }

  /* Full-screen mobile dropdown. Sized with dvh (falls back to vh
     on older browsers) so mobile browser toolbars showing/hiding
     never leave part of the menu unreachable. Paired with
     header::before above (blur off the header itself) so this
     fixed panel isn't trapped inside the header's own small box. */
  nav.main-nav{
    position:fixed;
    top:64px;
    left:0;
    right:0;
    height:calc(100vh - 64px);
    height:calc(100dvh - 64px);
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:14px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    gap:2px;
    transform:translateY(-12px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
    border-top:1px solid var(--line);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:99;
  }
  nav.main-nav.is-open{
    opacity:1;
    transform:translateY(0);
    visibility:visible;
    pointer-events:auto;
  }
  nav.main-nav a.nav-link{
    padding:16px 14px;
    font-size:1.05rem;
    border-bottom:1px solid var(--mist);
  }
  .nav-toggle{ display:flex; }
  .header-actions .btn-primary{ display:none; }
  nav.main-nav .nav-cta{ display:inline-flex; justify-content:center; margin-top:18px; width:100%; }

  /* Services dropdown becomes an inline expandable section on mobile.
     max-height raised from 220px to 420px — the 8 service links need
     roughly 330px to show in full; 220px was silently clipping the
     last few with no way to reach them. */
  .nav-dropdown-menu{
    position:static; opacity:1; transform:none; pointer-events:auto; padding-top:0;
    max-height:0; overflow:hidden;
    transition:max-height 260ms ease;
  }
  .nav-dropdown-menu-inner{ background:var(--paper); border:none; box-shadow:none; padding:0 8px; border-radius:var(--radius-sm); }
  .nav-dropdown-menu a{ padding:13px 12px; font-size:0.98rem; }
  .nav-dropdown.is-open .nav-dropdown-menu{ max-height:420px; }
  .nav-dropdown.is-open .nav-dropdown-menu-inner{ padding:8px; margin:4px 0 6px; }
  .nav-dropdown > .nav-link{ width:100%; justify-content:space-between; border-bottom:1px solid var(--mist); }
  .nav-dropdown.is-open > .nav-link{ border-bottom-color:transparent; }

  .who-grid{ grid-template-columns:1fr; }
  .components-grid{ grid-template-columns:1fr; }
  .process-list{ grid-template-columns:1fr; }
  .metrics-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr; }
  .section{ padding:64px 0; }
  .svc-hero{ padding:40px 0 32px; }
  .svc-cta{ padding:40px 24px; }
  .svc-cta-actions{ flex-direction:column; }
  .svc-cta-actions .btn{ width:100%; }

  /* ---- Comparison chart widget: compacted like the homepage's
     investment simulator — shorter graph, tighter everything, so
     it reads as one unit instead of a tall scroll on a phone. ---- */
  .paid-ads-profit-calculator .section-head{ margin-bottom:16px; }
  .paid-ads-profit-calculator .pc-card{ padding:16px 14px 14px; border-radius:16px; }
  .paid-ads-profit-calculator .pc-title{ font-size:0.64rem; }
  .paid-ads-profit-calculator .pc-toggle-row{ gap:6px; }
  .paid-ads-profit-calculator .pc-timeline-toggle button{ padding:6px 11px; font-size:0.68rem; }
  /* Wrap onto two rows instead of a horizontal-scroll strip — the
     earlier nowrap+overflow-x version hid "Microsoft Ads" off the
     edge of the screen with no visible sign it was scrollable. */
  .paid-ads-profit-calculator .pc-options{ margin-top:12px; gap:6px; }
  .paid-ads-profit-calculator .pc-option{ flex:1 1 calc(50% - 3px); justify-content:center; padding:7px 8px; font-size:0.78rem; }
  .paid-ads-profit-calculator .pc-control{ flex-direction:column; align-items:stretch; margin-top:12px; padding-top:12px; gap:8px; }
  /* flex: 1 1 200px on the range input sets its WIDTH in the
     desktop row layout, but once this container becomes a column
     the same flex-basis governs HEIGHT instead — stretching the
     slider to ~200px tall with just a thin track floating in the
     middle of all that empty space. Reset it to a plain full-width
     block here. */
  .paid-ads-profit-calculator input[type="range"]{ flex:none; width:100%; min-width:0; }
  .paid-ads-profit-calculator .pc-graph-wrap{ aspect-ratio:16/4.4; min-height:160px; max-height:230px; margin-top:12px; }
  .paid-ads-profit-calculator .pc-callouts{ grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px; }
  .paid-ads-profit-calculator .pc-callout{ padding:9px 8px; border-radius:10px; }
  .paid-ads-profit-calculator .pc-callout .pc-callout-label{ font-size:0.56rem; }
  .paid-ads-profit-calculator .pc-callout .pc-callout-value{ font-size:0.96rem; margin-top:2px; }
  .paid-ads-profit-calculator .pc-comparison{ margin-top:14px; padding-top:12px; }
  .paid-ads-profit-calculator .pc-comparison-title{ font-size:0.6rem; margin-bottom:8px; }
  .paid-ads-profit-calculator .pc-summary-row{ font-size:0.78rem; padding:6px 0; }
  .paid-ads-profit-calculator .pc-comparison-grid{ grid-template-columns:repeat(2,1fr); gap:6px; }
  .paid-ads-profit-calculator .pc-comparison-card{ padding:8px; gap:6px; }
  .paid-ads-profit-calculator .pc-comparison-card-name{ font-size:0.76rem; }
  .paid-ads-profit-calculator .pc-comparison-card-values{ font-size:0.68rem; gap:6px; }
  .paid-ads-profit-calculator .pc-hint{ font-size:0.68rem; margin-top:10px; }
  .paid-ads-profit-calculator .pc-disclaimer{ font-size:0.68rem; margin-top:4px; }
}

/* When the mobile nav is open, body scroll is locked via JS
   (position:fixed technique) — see the inline script. This class
   supplies the fixed positioning so the lock can't leave the page
   scrolled to the wrong spot when it's released. */
body.nav-open{
  position:fixed;
  inset:0;
  overflow:hidden;
  width:100%;
}

/* ---- Large phones / small tablets (600px) ---- */
@media (max-width: 600px){
  .wrap{ padding:0 18px; }
  .section{ padding:56px 0; }
  .section-head{ margin-bottom:30px; }
  .section-head p{ font-size:0.96rem; }

  .brand img{ height:112px; }
  .btn{ padding:13px 22px; font-size:0.92rem; }

  .svc-hero h1{ font-size:clamp(1.6rem, 7vw, 2.1rem); }
  .svc-hero .lede{ font-size:0.98rem; }
  .svc-hero-actions .btn{ width:100%; }

  .who-card, .process-step, .component-card{ padding:20px; }
  .problem-item{ padding:14px; }

  .metrics-grid{ gap:10px; }
  .metric-tile{ padding:16px 12px; }
  .metric-tile .val{ font-size:1.25rem; }

  .faq-item .faq-q{ padding:16px 18px; font-size:0.94rem; }
  .faq-item .faq-a{ padding:0 18px 18px; font-size:0.9rem; }

  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:10px; }
  .footer-legal{ gap:16px; }

  .paid-ads-profit-calculator .pc-graph-wrap{ aspect-ratio:16/4; min-height:150px; max-height:200px; }
}

/* ---- Small phones (≤480px) ---- */
@media (max-width: 480px){
  html{ font-size:15px; }
  .wrap{ padding:0 16px; }
  .header-inner{ gap:10px; }

  .svc-hero h1{ font-size:clamp(1.5rem, 8vw, 1.9rem); }
  .section-head h2{ font-size:clamp(1.5rem, 8vw, 1.9rem); }

  .metrics-grid{ grid-template-columns:repeat(2,1fr); }

  .svc-cta{ padding:32px 20px; border-radius:var(--radius-sm); }
  .svc-cta h2{ font-size:1.35rem; }
  .svc-cta p{ font-size:0.92rem; }

  .footer-top{ gap:28px; }
  .footer-col p.foot-desc{ max-width:none; }

  .paid-ads-profit-calculator .pc-comparison-grid{ grid-template-columns:1fr; }
  .paid-ads-profit-calculator .pc-comparison-card-values{ flex-direction:column; gap:2px; }
}

/* ---- Very small phones (≤360px) ---- */
@media (max-width: 360px){
  html{ font-size:14px; }
  .wrap{ padding:0 14px; }
  .btn{ padding:12px 18px; font-size:0.88rem; }
  .svc-hero h1{ font-size:1.4rem; }
  .metrics-grid{ grid-template-columns:1fr; }

  .paid-ads-profit-calculator .pc-callouts{ grid-template-columns:1fr 1fr 1fr; gap:6px; }
  .paid-ads-profit-calculator .pc-callout{ padding:9px 7px; }
  .paid-ads-profit-calculator .pc-callout .pc-callout-value{ font-size:0.92rem; }
  .paid-ads-profit-calculator .pc-amount-field input[type="number"]{ font-size:0.86rem; }
}

/* ---- Landscape phones (short height) ---- */
@media (max-height: 480px) and (orientation: landscape){
  .svc-hero{ padding:28px 0; }
}

/* ---- Guard against any accidental horizontal scroll ---- */
img, svg, video, canvas, iframe, table{ max-width:100%; height:auto; }
.wrap, .section, header.site-header, footer.site-footer{ max-width:100%; }