:root{
    --bg:#F7F2EC; --ink:#1F2530; --muted:#616D79; --line:#E7DED2;
    --accent:#3B82F6; --gold:#9EC5FA; --card:#FFFFFF;
    --display:'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --body:'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;overflow-x:clip;overflow-y:auto}
  body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip;overflow-y:visible}
  a{color:inherit}

  /* grid (not flex space-between) so the nav sits on the header's true
     centre line — space-between only centres it between the brand and
     the Build button, which drifts off-centre whenever those two differ
     in width (the brand text is wider than the button). */
  /* padding-top (not a top offset) carries the header down below the notch/
     status bar on devices with viewport-fit=cover, so the header's own box
     still starts at the physical top edge — its background fills that strip
     instead of leaving a gap of bare page background above it. */
  .top{position:fixed;top:0;left:0;right:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    padding:calc(16px + env(safe-area-inset-top, 0px)) 28px 16px;pointer-events:none;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom:1px solid var(--line)}
  /* explicit z-index above .tabs (39): .tabs is a sibling with its own
     z-index for the mobile full-screen overlay, and a positioned sibling
     with an explicit z-index paints above one without it regardless of
     DOM order — without this, opening the mobile nav visually covered
     and click-blocked the brand/Build/burger, with no way to close it. */
  .top .brand{justify-self:start;position:relative;z-index:41}
  .top-right{justify-self:end;display:flex;align-items:center;gap:14px;pointer-events:auto;position:relative;z-index:41}
  .tabs{display:flex;gap:clamp(18px,3vw,40px);pointer-events:auto;justify-self:center}
  .tabs a{text-decoration:none;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
    color:var(--muted);position:relative;padding:6px 0;transition:color .2s}
  .tabs a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--accent);
    transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
  .tabs a:hover{color:var(--ink)}
  .tabs a:hover:after{transform:scaleX(1)}
  .burger{display:none;flex:none;width:34px;height:34px;padding:0;border:none;background:transparent;
    cursor:pointer;pointer-events:auto;flex-direction:column;align-items:center;justify-content:center;gap:5px}
  .burger span{display:block;width:22px;height:2px;border-radius:2px;background:var(--ink);
    transition:transform .25s ease,opacity .2s ease}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* below 820px: single row (brand, then Build + burger on the right); the
     burger opens the nav links as a full-screen overlay instead of
     wrapping them into a second row. */
  @media(max-width:820px){
    /* backdrop-filter under a fixed header repaints on every scroll frame —
       expensive enough on mobile GPUs to make the whole page feel sticky/
       janky while scrolling. A near-opaque flat background looks almost
       identical without that per-frame cost. */
    .top{display:flex;justify-content:space-between;padding:calc(9px + env(safe-area-inset-top, 0px)) 14px 9px;background:var(--bg);backdrop-filter:none}
    .burger{display:flex}
    .tabs{position:fixed;top:0;left:0;width:100%;height:100%;justify-self:auto;z-index:39;justify-content:center;flex-direction:column;align-items:center;
      gap:28px;background:var(--bg);opacity:0;visibility:hidden;transform:translateY(-10px);
      transition:opacity .3s ease,transform .3s ease,visibility 0s .3s linear}
    .tabs.open{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .3s ease}
    .tabs a{font-size:19px;letter-spacing:.08em}
  }
  .top .brand{display:inline-flex;align-items:center;text-decoration:none;pointer-events:auto}
  .top .brand img{height:24px;width:auto;display:block}
  .top .cta{pointer-events:auto;display:inline-block;background:var(--accent);color:#fff;text-decoration:none;padding:11px 22px;border-radius:999px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;white-space:nowrap;transition:transform .15s,box-shadow .15s}
  .top .cta:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(59,130,246,.28)}
  /* must come after the base .top .brand/.cta rules to win on equal specificity */
  @media(max-width:820px){
    .top .brand img{height:20px}
  }

  #stage{position:relative;height:100vh}
  #pin{position:sticky;top:0;height:100vh;width:100%;overflow:hidden}
  #pin:before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(52% 48% at 50% 48%, rgba(247,251,255,.5), rgba(247,242,236,0) 72%)}
  #scene{position:absolute;inset:0;z-index:1;display:block}

  /* hover target sitting over the 3D object */
  /* three columns — each with its own 3D object above the title */
  .cols{position:absolute;left:0;right:0;top:28vh;bottom:15vh;z-index:3;display:grid;
    grid-template-columns:repeat(3,1fr);grid-template-rows:1fr auto;
    gap:clamp(16px,3vw,48px);padding:0 clamp(20px,5vw,80px)}
  /* subgrid ties every column to the same two rows, so the titles line up across
     all three no matter how long each column's copy is */
  .col{cursor:pointer;display:grid;grid-row:span 2;grid-template-rows:subgrid}
  /* reserved space the 3D object is positioned into — hovering here counts as the column */
  .col-art{min-height:0}
  /* step layout: big numeral on the left, title and copy beside it */
  .col-txt{will-change:opacity,transform;transition:opacity .4s ease, transform .4s ease;
    padding:14px 4px 0;display:flex;gap:clamp(10px,1.2vw,18px);align-items:flex-start;text-align:left}
  .col .num{font-family:var(--display);font-size:clamp(30px,3.4vw,50px);line-height:.86;
    color:#a9b6c2;flex:none;transition:color .3s ease}
  .col.hot .num,.col.on .num{color:var(--accent)}
  .col h2{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.95vw,27px);line-height:1.12;margin-bottom:8px}
  .col p{color:var(--muted);font-size:clamp(12.5px,1.02vw,15px);line-height:1.55;
    max-width:32ch;transition:opacity .4s ease}
  .col.hot h2{color:var(--accent)}

  /* hero heading above the three steps */
  .hero-head{position:absolute;top:12vh;left:0;right:0;z-index:3;text-align:center;padding:0 24px}
  .hero-head .eyebrow{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:12px}
  .hero-head h1{font-family:var(--display);font-weight:600;font-size:clamp(28px,4.2vw,54px);line-height:1.06}

  @media(max-width:900px){
    .hero-head{top:9vh}
    .cols{top:26vh;bottom:12vh;gap:8px;padding:0 12px}
    .col-txt{padding-top:10px;gap:8px}
    .col .num{font-size:22px}
    .col .eyebrow{font-size:9px;letter-spacing:.16em;margin-bottom:5px}
    .col h2{font-size:clamp(14px,3.6vw,20px)}
    .col p{display:none}
  }
  /* the wrapped two-row bar is taller, so the hero starts lower */
  @media(max-width:820px){
    .hero-head{top:14vh}
    /* the object is centred in .col-art, so a shorter band = less air around it */
    /* stop stretching the art row to fill the viewport: give it a fixed
       height just larger than the object, and let the block size to content */
    .cols{top:26vh;bottom:auto;grid-template-rows:auto auto;gap:6px}
    .col-art{height:176px}
    /* back down at the foot of the hero box */
    .hint{top:auto;bottom:14px}
    /* the hero content ends around 60vh, so crop the empty tail of the
       screen rather than leaving it above the next section */
    /* static, not sticky: the canvas then scrolls away with its own section
       instead of hanging behind the content that scrolls past it */
    #stage,#pin{height:66vh}
    #pin{position:static}
    #why{padding-top:30px}
    .col .num{font-size:19px}
    .col h2{font-size:clamp(13px,3.4vw,18px)}
  }

  .hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:3;color:var(--muted);font-size:11px;letter-spacing:.26em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .4s}
  .hint .mouse{width:22px;height:34px;border:1.5px solid var(--muted);border-radius:12px;position:relative}
  .hint .mouse:after{content:"";position:absolute;left:50%;top:7px;width:3px;height:6px;border-radius:2px;background:var(--muted);transform:translateX(-50%);animation:sc 1.5s infinite}
  @keyframes sc{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,9px)}}
  .bar{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--gold));z-index:45;transition:width .1s linear}

  /* anchored jumps clear the fixed bar instead of hiding under it */
  section[id]{scroll-margin-top:96px}
  @media(max-width:820px){section[id]{scroll-margin-top:104px}}
  .after{position:relative;z-index:5;background:linear-gradient(180deg,#F7F2EC,#FCF9F4)}
  section{padding:96px 24px}

  .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px)}
  @media(max-width:820px){.steps3{grid-template-columns:1fr;max-width:420px;margin:0 auto}}
  .step3{text-align:center}
  .step3-img{aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--line);margin-bottom:18px}
  .step3-img img{width:100%;height:100%;object-fit:cover;display:block}
  /* the live Kings Valeting frame fills this same fixed box (a "cover" crop
     of the iframe, see layoutStep3Cover() in homepage-examples.js) instead
     of sizing itself to its own content, so all three step pictures match */
  .step3-img.step3-live{display:flex;flex-direction:column}
  .step3-img.step3-live .ex-view{flex:1 1 auto}
  .step3-num{font-family:var(--display);font-size:15px;font-weight:700;color:var(--accent);
    letter-spacing:.1em;margin-bottom:6px}
  .step3 h4{font-family:var(--display);font-size:clamp(19px,2.2vw,24px);font-weight:600;margin-bottom:8px}
  .step3 p{color:var(--muted);font-size:15px;max-width:34ch;margin:0 auto}
  .wrap{max-width:1080px;margin:0 auto}
  .sec-head{text-align:center;max-width:620px;margin:0 auto 54px}
  .sec-head .eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:14px}
  .sec-head h3{font-family:var(--display);font-size:clamp(30px,5vw,48px);font-weight:600;line-height:1.1;margin-bottom:14px}
  .sec-head p{color:var(--muted);font-size:17px}
  /* tighter rhythm and smaller type on phones */
  @media(max-width:700px){
    section{padding:58px 18px}
    .sec-head{margin-bottom:34px}
    .sec-head p{font-size:15px}
    .sec-head h3{margin-bottom:12px}
    .ecard{padding:24px 22px}
    .ecard h4{font-size:20px}
    .ecard p{font-size:14px}
    .compare{margin-top:26px}
  }

  /* live website demos */
  .work{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
  .demo{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;
    box-shadow:0 14px 40px rgba(23,32,31,.07);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
  .demo:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(23,32,31,.13)}
  .chrome{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);background:#f7f2e9}
  .chrome i{width:10px;height:10px;border-radius:50%;background:#dcd2c2;flex:none}
  .chrome i:nth-child(1){background:#e0a89a}
  .chrome i:nth-child(2){background:#e3c9a0}
  .chrome i:nth-child(3){background:#c3cdb6}
  .chrome .url{flex:1;margin-left:8px;background:#fff;border:1px solid var(--line);border-radius:999px;
    padding:5px 14px;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .frame{position:relative;aspect-ratio:16/10;background:#F7F2EC;overflow:hidden}
  /* Previews sit still on the homepage of each site: no pan, no scroll. The
     iframe renders a wide viewport and scales down so the layout matches a
     desktop visit rather than the site's mobile breakpoint. */
  .frame iframe{position:absolute;top:0;left:0;width:250%;height:250%;border:0;
    transform:scale(.4);transform-origin:0 0}
  /* transparent layer: keeps page scrolling natural, whole preview opens the site */
  .frame .hit{position:absolute;inset:0;z-index:2;cursor:pointer;display:block}
  .frame .live{position:absolute;z-index:3;top:12px;right:12px;background:rgba(23,32,31,.72);color:#fff;
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:5px 11px;border-radius:999px;
    display:flex;align-items:center;gap:6px;backdrop-filter:blur(4px)}
  .frame .live:before{content:"";width:6px;height:6px;border-radius:50%;background:#8fd08f;box-shadow:0 0 0 0 rgba(143,208,143,.7);animation:pulse 2s infinite}
  @keyframes pulse{70%{box-shadow:0 0 0 7px rgba(143,208,143,0)}100%{box-shadow:0 0 0 0 rgba(143,208,143,0)}}
  .demo .meta{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
  .demo .kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:9px}
  .demo h4{font-family:var(--display);font-size:29px;font-weight:600;margin-bottom:8px;line-height:1.1}
  .demo p{color:var(--muted);font-size:15px;margin-bottom:18px}
  .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
  .tags span{font-size:11.5px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);
    border-radius:999px;padding:5px 12px;background:#faf6ee}
  .demo .go{margin-top:auto;align-self:flex-start;text-decoration:none;padding:12px 24px;border-radius:999px;
    font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;background:var(--accent);color:#fff;transition:.15s}
.demo .go:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(59,130,246,.3)}
.demo .result-strip{margin:14px 0 17px;padding-top:13px;border-top:1px solid var(--line);color:var(--ink);font-size:12px;font-weight:700;line-height:1.45}
  /* pricing */
  #pricing{border-top:1px solid var(--line)}
  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
  .plan{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:34px 30px;
    display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(23,32,31,.05)}
  .plan.feature{border-color:var(--accent);box-shadow:0 22px 55px rgba(59,130,246,.16)}
  .plan .kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:10px}
  .plan h4{font-family:var(--display);font-size:30px;font-weight:600;margin-bottom:7px}
  /* min-height keeps the prices on the same line across both cards */
  .plan .desc{color:var(--muted);font-size:14.5px;line-height:1.55;margin-bottom:20px;min-height:3.1em}
  .plan .price{font-family:var(--display);font-size:38px;font-weight:600;line-height:1}
  .plan .price small{font-size:14px;color:var(--muted);font-family:var(--body)}
  .plan .price-note{font-size:12px;color:var(--muted);margin-bottom:24px}
  .plan ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:28px}
  .plan li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start}
  .plan li:before{content:"✦";color:var(--accent);flex:none;font-size:12px;margin-top:3px}
  .plan li.soon{color:var(--muted)}
  .plan li.soon:before{content:"◷";color:var(--gold)}
  .plan .go{margin-top:auto;align-self:flex-start;text-decoration:none;padding:12px 24px;border-radius:999px;
    font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
    border:1px solid var(--line);color:var(--ink);transition:.15s}
  .plan .go:hover{border-color:var(--accent);color:var(--accent)}
  .plan.feature .go{background:var(--accent);color:#fff;border-color:var(--accent)}
  .plan.feature .go:hover{transform:translateY(-1px);color:#fff}
  @media(max-width:900px){.plans{grid-template-columns:1fr}}

  /* the "clients you never hear from" band */
  #missed{padding-top:0}
  .missed-band{max-width:820px;margin:0 auto;background:rgba(59,130,246,.07);
    border:1px solid rgba(59,130,246,.28);border-radius:20px;padding:clamp(26px,4vw,42px)}
  .missed-band .eyebrow{font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;
    color:var(--accent);font-weight:600;margin-bottom:12px}
  .missed-band h3{font-family:var(--display);font-size:clamp(25px,3.6vw,36px);font-weight:600;
    line-height:1.12;margin-bottom:12px}
  .missed-band>p{color:var(--muted);font-size:15.5px;line-height:1.7}
  .missed-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:26px 0 4px}
  .missed-stats div{display:flex;flex-direction:column;gap:6px;color:var(--muted);
    font-size:14.5px;line-height:1.5;padding-right:10px}
  .missed-stats b{font-family:var(--display);font-size:clamp(36px,4.4vw,46px);font-weight:600;
    line-height:1;color:var(--accent)}
  .missed-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 22px}
  .missed-list div{background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:18px 18px 20px;font-size:14px;line-height:1.55;color:var(--muted)}
  .missed-list b{display:block;font-family:var(--display);font-size:18px;font-weight:600;
    color:var(--ink);margin-bottom:6px}
  .missed-foot{color:var(--ink);font-size:15.5px;font-weight:500;line-height:1.6}
  .missed-cta{display:inline-block;margin-top:22px;background:var(--accent);color:#fff;
    text-decoration:none;padding:14px 28px;border-radius:999px;font-size:14px;font-weight:700;
    letter-spacing:.02em;transition:transform .15s,box-shadow .15s}
  .missed-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.14)}
  @media(max-width:820px){
    .missed-list{grid-template-columns:1fr;gap:12px;margin:20px 0 18px}
    .missed-stats{grid-template-columns:1fr;gap:16px;margin:22px 0 2px}
  }
  .work-note{text-align:center;margin-top:38px;color:var(--muted);font-size:15px}
  .work-note a{color:var(--accent);text-decoration:none;font-weight:600}
  @media(max-width:900px){.work{grid-template-columns:1fr;gap:26px}}

  .band{text-align:center;max-width:640px;margin:0 auto}
  .band h3{font-family:var(--display);font-size:clamp(30px,5vw,50px);font-weight:600;margin-bottom:14px}
  .band p{color:var(--muted);font-size:17px;margin-bottom:30px}
  .band .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .band a{display:inline-block;text-decoration:none;padding:13px 26px;border-radius:999px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
  .band .solid{background:var(--accent);color:#fff}
  .band .out{border:1px solid var(--line);color:var(--ink)}

  footer{text-align:center;padding:48px 24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
  footer .brand{display:inline-flex;align-items:center;text-decoration:none}
  footer .brand img{height:26px;width:auto;display:block}
  footer a{color:var(--accent);text-decoration:none}
  @media(prefers-reduced-motion:reduce){.hint .mouse:after{animation:none}}

  /* standalone subpages (pricing, contact) — clear the fixed header */
  .page{padding-top:clamp(96px,12vh,140px);min-height:70vh}
  .page .sec-head{margin-bottom:46px}
  /* heading block above the monthly plans */
  .mgmt-head{text-align:center;max-width:620px;margin:64px auto 30px}
  .mgmt-head .eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:12px}
  .mgmt-head h3{font-family:var(--display);font-size:clamp(26px,4vw,38px);font-weight:600;line-height:1.1;margin-bottom:10px}
  .mgmt-head p{color:var(--muted);font-size:15.5px}

  /* ── scroll reveals ─────────────────────────────────────────────
     everything enters once, softly, and never moves again          */
  /* keep the travel small: a transform doesn't move the layout box, so a
     block still waiting to reveal can otherwise sit over the one below it */
  /* No `transform` here on purpose: a transform transition on these elements
     reproducibly broke real-finger touch scrolling on iPhone Safari/Chromium
     (confirmed with CDP-level touch dispatch, not just synthetic events) —
     once an element had ever transitioned `transform`, a swipe starting on
     or near it stopped producing any scroll at all, sitewide, matching
     reports of the page being "stuck" at the top and partway down. Opacity
     and blur alone give the same soft-appear feel without that risk. */
  .reveal{opacity:0;
    transition:opacity .85s cubic-bezier(.22,.61,.36,1)}
  .reveal.in{opacity:1}
  .reveal-blur{filter:blur(6px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),
    filter .9s cubic-bezier(.22,.61,.36,1)}
  .reveal-blur.in{filter:none}
  @media(prefers-reduced-motion:reduce){
    .reveal,.reveal-blur{opacity:1;filter:none;transition:none}
  }
  .page-hero{text-align:center;max-width:680px;margin:0 auto 8px}
  .page-hero .eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:14px}
  .page-hero h1{font-family:var(--display);font-size:clamp(34px,5.5vw,58px);font-weight:600;line-height:1.12;margin-bottom:20px}
  .page-hero p{color:var(--muted);font-size:17px}

  /* contact page */
  .contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:760px;margin:0 auto}
  .ccard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px 28px;text-align:center;
    box-shadow:0 10px 30px rgba(23,32,31,.05);text-decoration:none;display:block;transition:transform .18s,box-shadow .18s}
  .ccard:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(23,32,31,.1)}
  .ccard .ic{font-size:24px;margin-bottom:12px}
  .ccard h3{font-family:var(--display);font-size:24px;font-weight:600;margin-bottom:6px}
  .ccard p{color:var(--muted);font-size:14.5px}
  .ccard .val{color:var(--accent);font-weight:600;margin-top:8px;font-size:15px}
  @media(max-width:760px){.contact-grid{grid-template-columns:1fr}}

  /* pricing: two one-offs on top, the monthly plan beneath them */
  .plans.two{grid-template-columns:repeat(2,1fr);max-width:820px;margin:0 auto}
  .plans.four{grid-template-columns:repeat(2,1fr);gap:22px;max-width:1040px;margin:0 auto;align-items:stretch}
  @media(max-width:700px){.plans.four{grid-template-columns:1fr}}
  .perk{display:inline-flex;align-items:center;gap:7px;background:rgba(59,130,246,.10);
    border:1px solid rgba(59,130,246,.32);color:var(--accent);border-radius:999px;
    padding:7px 14px;font-size:12px;font-weight:700;letter-spacing:.04em;margin-bottom:20px}
  .perk:before{content:"★";font-size:11px}
  .sub-card{max-width:820px;margin:26px auto 0;background:var(--card);border:1px solid var(--accent);
    border-radius:20px;padding:36px 34px;display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,46px);
    align-items:start;box-shadow:0 22px 55px rgba(59,130,246,.16)}
  .sub-card .kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:10px}
  .sub-card h4{font-family:var(--display);font-size:30px;font-weight:600;margin-bottom:12px}
  .sub-card .price{font-family:var(--display);font-size:38px;font-weight:600;line-height:1}
  .sub-card .price small{font-size:14px;color:var(--muted);font-family:var(--body)}
  .sub-card .price-note{font-size:12px;color:var(--muted);margin-bottom:20px}
  .sub-card .go{display:inline-block;text-decoration:none;padding:12px 24px;border-radius:999px;font-size:12px;
    letter-spacing:.08em;text-transform:uppercase;font-weight:700;background:var(--accent);color:#fff;transition:.15s}
  .sub-card .go:hover{transform:translateY(-1px)}
  .sub-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 20px}
  .sub-list li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start}
  .sub-list li:before{content:"✦";color:var(--accent);flex:none;font-size:12px;margin-top:3px}
  @media(max-width:820px){
    .plans.two{grid-template-columns:1fr}
    .sub-card{grid-template-columns:1fr;padding:30px 24px}
    .sub-list{grid-template-columns:1fr}
  }

  /* why-us / AI advantage */
  #why{border-top:1px solid var(--line)}
  .edge{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .ecard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px 28px;
    box-shadow:0 10px 30px rgba(23,32,31,.05);transition:transform .18s,box-shadow .18s}
  .ecard:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(23,32,31,.1)}
  .ecard .ic{width:44px;height:44px;border-radius:12px;background:rgba(59,130,246,.10);
    display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px}
  .ecard h4{font-family:var(--display);font-size:23px;font-weight:600;margin-bottom:8px}
  .ecard p{color:var(--muted);font-size:14.5px;line-height:1.6}
  /* the face behind "designed by people" */
  .founder{max-width:820px;margin:0 auto 34px;background:var(--card);border:1px solid var(--line);
    border-radius:20px;padding:26px 30px;display:grid;grid-template-columns:150px 1fr;gap:clamp(20px,2.6vw,32px);
    align-items:center;box-shadow:0 10px 30px rgba(23,32,31,.05)}
  /* square crop reads as a real photo rather than an avatar */
  .founder-photo{border-radius:12px;overflow:hidden;background:#F7F2EC;aspect-ratio:1/1;
    border:1px solid var(--line)}
  .founder-photo img{width:100%;height:100%;object-fit:cover;display:block}
  .founder-txt .eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);
    font-weight:600;margin-bottom:10px}
  .founder-txt h4{font-family:var(--display);font-size:26px;font-weight:600;line-height:1.1}
  .founder-txt .role{color:var(--muted);font-size:13px;letter-spacing:.04em;margin:2px 0 14px}
  .founder-txt p{color:var(--muted);font-size:14.5px;line-height:1.65}
  .founder-txt p+p{margin-top:10px}
  @media(max-width:700px){
    .founder{grid-template-columns:1fr;padding:24px;text-align:center;gap:16px}
    .founder-photo{width:140px;margin:0 auto}
  }
  .compare{max-width:820px;margin:38px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .compare div{border-radius:16px;padding:20px 22px;font-size:14.5px;line-height:1.55}
  .compare .old{background:rgba(23,32,31,.04);border:1px dashed var(--line);color:var(--muted)}
  .compare .new{background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.35)}
  .compare b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:8px}
  .compare .old b{color:var(--muted)}
  .compare .new b{color:var(--accent)}
  @media(max-width:900px){.edge{grid-template-columns:1fr}.compare{grid-template-columns:1fr}}

  /* hero: two flawed options either side, arrows into the AI-built centre.
     sized entirely in vh/vw so the whole thing sits inside one screen, no scroll. */
  /* The hero no longer carries the comparison cards, so it can end higher —
     which is the point: the carousel below should break the fold with roughly
     its top half showing, inviting the scroll. */
  .hero-conv{min-height:72svh;display:flex;align-items:center;padding:clamp(96px,14svh,130px) 20px clamp(10px,2svh,20px);
    position:relative;overflow:hidden;
    /* Airy, not muddy: the deep accent at high opacity over cream turned the
       whole wash grey. Keep the tints light and blue, and let them fall away
       to the background well before the copy starts. */
    background:radial-gradient(50% 50% at 18% 0%, rgba(120,170,250,.85), rgba(247,242,236,0) 68%),
      radial-gradient(50% 50% at 82% 0%, rgba(90,145,250,.72), rgba(247,242,236,0) 68%),
      radial-gradient(110% 115% at 50% -8%, rgba(150,190,253,.85), rgba(247,242,236,0) 92%),
      radial-gradient(64% 46% at 50% 0%, rgba(255,254,250,.75), rgba(247,242,236,0) 55%),
      /* a deeper blue wash underneath the light highlights, fading to the
         cream background — reads as richer/more premium at a glance without
         disturbing the existing highlight composition */
      linear-gradient(180deg, rgba(22,48,102,.24) 0%, rgba(90,145,250,.09) 45%, rgba(247,242,236,0) 78%), var(--bg)}
  /* a slow, barely-visible drift on the deep-blue wash — a still hero background
     reads as flat next to the animated glow-box below it, so this gives it the
     same "alive" quality at a much lower amplitude. Compositor-only (opacity +
     transform), so it costs nothing extra on scroll. */
  /* left/right pinned to 0 rather than a symmetric inset — a negative
     horizontal inset bled past the hero's edges into real horizontal
     scroll once mobile switches .hero-conv to overflow:visible (needed
     for the halo below). Vertical bleed is still fine since nothing
     sits beside the hero to be pushed by it. */
  .hero-conv:after{content:"";position:absolute;top:-15%;bottom:-15%;left:0;right:0;z-index:0;pointer-events:none;
    background:radial-gradient(42% 42% at 50% 15%, rgba(40,80,160,.28), transparent 70%);
    animation:hero-glow-drift 26s ease-in-out infinite}
  @keyframes hero-glow-drift{
    0%,100%{transform:translateY(0);opacity:.65}
    50%{transform:translateY(-2%);opacity:.9}
  }
  @media(prefers-reduced-motion:reduce){.hero-conv:after{animation:none}}
  .hero-conv-wrap{width:100%;position:relative;z-index:2}
  .hero-conv-head{max-width:820px;margin:0 auto clamp(12px,2.5svh,22px);text-align:center}
  .hero-conv-head .eyebrow{font-size:clamp(11px,1.4vw,13px);letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:clamp(8px,1.4svh,14px)}
  .hero-conv-head h1{font-family:var(--display);font-weight:600;font-size:clamp(32px,5.4vw,60px);line-height:1.08}
  .hero-conv-sub{font-size:clamp(16px,2vw,22px);color:var(--muted);margin-top:10px}

  /* ---- futuristic glow box ----
     A single fixed border-radius (not 999px/pill) shared by the outer
     glow ring (:before) and the inner solid box via border-radius:inherit,
     so the halo always matches the box's actual corners exactly — no
     square edges peeking through, at any box height. Outer (z:0) holds
     the blurred ring behind everything; inner (z:1) holds the real
     content on its own background, since a negative z-index pseudo
     paints above its own parent, not behind it.
     Kept far from any ancestor with overflow:hidden — clipping an
     ancestor's box always crops this ring to a hard rectangle. */
  :root{--qa-ease: cubic-bezier(.16,.84,.44,1)} /* smooth decel, no overshoot — "flowy" not bouncy */
  .glow-box{position:relative;border-radius:999px}
  /* Two bright hotspots orbiting the pill. The rotation animates the conic
     gradient's own angle, which forces the blurred layer to re-rasterise every
     frame — fine on a desktop GPU, but it is what previously made phones feel
     sticky while scrolling. So the orbit runs at desktop widths only; small
     screens keep the cheap opacity "breathe", which composites for free. */
  @property --glow-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
  .glow-box:before{content:"";position:absolute;inset:-5px;border-radius:inherit;z-index:0;
    background:conic-gradient(from var(--glow-angle),
      transparent 0deg, var(--gold) 35deg, var(--accent) 70deg, transparent 100deg,
      transparent 180deg, var(--gold) 215deg, var(--accent) 250deg, transparent 280deg, transparent 360deg);
    filter:blur(7px);opacity:.9;
    animation:glow-spin 7s linear infinite, glow-breathe 5s ease-in-out infinite}
  .glow-box-inner{position:relative;z-index:1;border-radius:inherit;background:var(--card)}
  @keyframes glow-spin{to{--glow-angle:360deg}}
  @keyframes glow-breathe{0%,100%{opacity:.62}50%{opacity:.92}}
  /* phones: the desktop gradient has wide transparent gaps between its two
     hotspots, which only reads correctly while it's spinning — frozen, it
     leaves the left/bottom of the box with no glow at all. A transform:rotate
     of the static layer isn't a fix either: on a wide pill the far corners of
     the rotated rectangle sweep a circle much bigger than the box, streaking
     colour across the page. So mobile gets its own gradient with no gaps —
     colour fully wraps the box at every moment — and only opacity breathes. */
  @media(max-width:820px),(hover:none) and (pointer:coarse){
    .glow-box:before{
      background:conic-gradient(var(--gold), var(--accent), var(--gold));
      animation:glow-breathe 5s ease-in-out infinite, glow-pulse-scale 5s ease-in-out infinite}
  }
  /* transform:rotate looked like real motion but the box is a wide pill, not
     a circle — rotating its (non-circular) footprint sweeps its far corners
     way outside the visible ring, streaking colour diagonally across the
     page. transform:scale doesn't have that problem (it grows/shrinks from
     centre, no corner-sweep) and is still compositor-only, so it adds a
     cheap pulse of motion on top of the opacity breathe without the bug. */
  @keyframes glow-pulse-scale{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
  @media(prefers-reduced-motion:reduce){.glow-box:before{animation:none}}


  /* ---- step progress: Step X of 3, with a 3-segment fill bar ---- */
  .qa-progress{width:100%;max-width:220px;margin:0 auto;text-align:center;opacity:0;max-height:0;
    transition:opacity .4s ease,max-height .4s ease,margin .4s ease;overflow:hidden}
  .qa-progress.started{opacity:1;max-height:60px;margin:clamp(10px,1.5svh,16px) auto 0}
  .qa-progress.done{opacity:0;max-height:0;margin-top:0}
  .qa-progress-bar{display:flex;gap:6px}
  .qa-progress-seg{flex:1;height:4px;border-radius:999px;background:rgba(59,130,246,.14);overflow:hidden;position:relative}
  .qa-progress-seg:after{content:"";position:absolute;inset:0;border-radius:999px;
    background:linear-gradient(90deg,var(--accent),var(--gold));transform:scaleX(0);transform-origin:left;
    transition:transform .6s var(--qa-ease)}
  .qa-progress-seg.filled:after{transform:scaleX(1)}
  .qa-progress-label{margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

  /* ---- answered questions: small ✓ pills sitting in a row above the box ---- */
  .qa-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto clamp(10px,1.5svh,14px);
    max-width:560px;min-height:0;transition:margin .4s var(--qa-ease)}
  .qa-pills:empty{margin:0}
  .qa-pill{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);
    border-radius:999px;padding:8px 16px 8px 12px;font-size:13px;font-weight:600;color:var(--ink);
    box-shadow:0 4px 14px rgba(23,32,31,.06);cursor:pointer;
    transition:transform .15s ease,box-shadow .15s ease;
    animation:qa-pill-in .5s cubic-bezier(.34,1.56,.64,1)} /* the one deliberate, tiny spring */
  .qa-pill:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(23,32,31,.1)}
  .qa-pill-check{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
    background:var(--accent);color:#fff;font-size:10px;flex:none}
  @keyframes qa-pill-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}

  /* ---- the question box: one persistent glowing box, its content
     crossfading between the three questions rather than being replaced
     by separate boxes. Compact — a single input row, no label sitting
     above it with empty space beneath. ---- */
  .qa-box{width:100%;max-width:560px;margin:0 auto;transition:opacity .5s var(--qa-ease),max-height .5s var(--qa-ease);
    max-height:200px;overflow:visible}
  .qa-box.qa-box-done{opacity:0;max-height:0;pointer-events:none;margin:0}
  .qa-box .glow-box-inner{position:relative;min-height:64px;display:flex;align-items:stretch;overflow:hidden}
  .qa-slide{position:absolute;inset:0;display:flex;align-items:center;gap:12px;padding:0 8px 0 24px;
    opacity:0;transform:translateY(10px);pointer-events:none;
    transition:opacity .45s var(--qa-ease),transform .45s var(--qa-ease)}
  .qa-slide[hidden]{display:none}
  .qa-slide.qa-active{position:relative;flex:1 1 auto;min-width:0;opacity:1;transform:none;pointer-events:auto}
  .qa-slide.qa-leaving{opacity:0;transform:translateY(-10px);transition-duration:.3s}
  .qa-field{position:relative;flex:1;min-width:0;display:flex;align-items:center;min-height:52px}
  /* 16px floor, not 15px: iOS Safari force-zooms the entire page whenever a
     focused form control renders below 16px, and this viewport deliberately
     sets no maximum-scale. At phone widths the clamp bottomed out at 15px, so
     tapping the very first question zoomed and shifted the layout — which is
     what made the form feel broken on a phone. The placeholder matches the
     input so the text doesn't jump as it fades across. */
  /* Centred against the full row height rather than sitting at its static
     flex position, so it stays put now that the control below fills the row. */
  /* Prompt-field treatment: regular weight at a plain 16px, the way a
     conversational input reads, rather than the semibold the rest of the UI
     uses. Placeholder and input must match exactly or the text shifts as the
     placeholder fades out. */
  .qa-ph{position:absolute;left:0;right:8px;top:50%;transform:translateY(-50%);
    font-family:var(--body);font-size:clamp(16px,1.9vw,17px);
    font-weight:400;letter-spacing:normal;color:var(--muted);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    transition:opacity .28s var(--qa-ease),transform .28s var(--qa-ease)}
  .qa-field.qa-filled .qa-ph,.qa-field.qa-focused .qa-ph{opacity:0;transform:translateY(calc(-50% - 5px))}
  /* align-self:stretch is load-bearing, not cosmetic. Left to size itself the
     input was ~20px tall inside a 52px row, so the top and bottom thirds of
     the pill hit the wrapper div — which has no handler — and a tap there did
     nothing at all. On a phone that reads as "the form is broken", because a
     thumb lands on the visible pill, not on the invisible 20px strip inside
     it. Stretching makes the whole row the tap target. */
  .qa-field input,.qa-field select{position:relative;z-index:1;width:100%;align-self:stretch;min-height:52px;
    border:none;background:transparent;outline:none;
    font-family:var(--body);font-size:clamp(16px,1.9vw,17px);font-weight:400;letter-spacing:normal;
    line-height:1.375;color:var(--ink);
    padding:0;appearance:none;opacity:0;transition:opacity .28s var(--qa-ease)}
  .qa-field input::placeholder{color:transparent;opacity:0}
  .qa-field.qa-filled input,.qa-field.qa-focused input,.qa-field.qa-filled select,.qa-field.qa-focused select{opacity:1}
  .qa-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237a6d81' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 6px center;background-size:16px;cursor:pointer}
  /* visible from the start (not gated behind typing something first) — it's
     the primary call to action, so it shouldn't be hidden on first paint */
  .qa-go{flex:none;align-self:center;width:52px;height:52px;padding:0;margin-right:5px;border-radius:16px;border:none;
    background:var(--accent);color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    opacity:1;transform:scale(1);transition:opacity .25s var(--qa-ease),transform .25s var(--qa-ease)}
  .qa-go svg{width:24px;height:24px;display:block}
  /* Deliberately NOT pointer-events:auto here. The inactive slides are
     position:absolute;inset:0, stacked exactly over the active one, and they
     rely on .qa-slide{pointer-events:none} to stay out of the way. An explicit
     `auto` on a descendant re-enables hit-testing on that descendant even
     though its parent is `none` — so the last slide's invisible Build button
     sat on top of the real one, and tapping Build fired the wrong step's
     handler, which returned early on an empty value and did nothing at all.
     This rule makes that guarantee explicit rather than relying on the
     absence of an override. */
  .qa-slide:not(.qa-active) .qa-go{pointer-events:none}
  .qa-go:hover{transform:scale(1.06)}
  .qa-rating{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;margin:10px 0 0;font-size:13px;color:var(--muted)}
  .qa-rating-stars{display:inline-flex;gap:2px;color:var(--accent)}
  .qa-rating-stars svg{width:14px;height:14px;fill:currentColor}
  .qa-rating-text b{color:var(--ink);font-weight:700}
  .step1-reassure{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:6px 16px;text-align:center;font-size:11.5px;letter-spacing:.02em;color:var(--muted);margin-top:14px}
  .step1-reassure .ri-item{display:inline-flex;align-items:center;gap:5px}
  .step1-reassure .ri{width:13px;height:13px;flex:none;color:var(--accent)}
  @media(max-width:480px){.step1-reassure{gap:5px 10px;font-size:10.5px}}
  .quick-lead-status{text-align:center;font-size:13px;color:var(--muted);margin-top:10px;min-height:18px}
  .quick-lead-status.ok{color:var(--accent);font-weight:600}
  .quick-lead-status.err{color:#b23b2c}

  /* the finishing flourish: box lifts, brightens and dissolves into the
     loading screen instead of just vanishing */
  .qa-box.qa-box-finish{animation:qa-finish .55s var(--qa-ease) forwards}
  @keyframes qa-finish{0%{opacity:1;transform:none;filter:blur(0)}100%{opacity:0;transform:scale(1.04) translateY(-6px);filter:blur(6px)}}

  /* ---- step 1 -> creation animation -> full-page builder ---- */
  .wiz-grid{display:grid;grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .wiz-left{min-width:0;display:flex;flex-direction:column}

  /* reused by the WhatsApp hand-off button in the builder bar below */
  .btn-send{display:block;width:100%;margin-top:12px;background:var(--accent);color:#fff;border:none;
    border-radius:999px;padding:13px 22px;font-size:13.5px;font-weight:700;cursor:pointer;transition:opacity .15s,transform .15s}
  .btn-send:hover{opacity:.9;transform:translateY(-1px)}
  .btn-whatsapp{display:flex;align-items:center;justify-content:center;gap:9px}
  .btn-whatsapp svg{width:18px;height:18px;flex:none}

  /* ---- full-page builder: a real, full-size iframe filling the screen
     below the header, with one floating question bar over the bottom.
     No scaled-down mockup, no browser-chrome wrapper — the iframe just
     renders at its own natural size, so its own responsive CSS and native
     scrolling (wheel/trackpad/touch) behave exactly as a real visit would. ---- */
  /* pointer-events:none on the overlay itself so its invisible top area
     (above the preview) doesn't capture clicks meant for the fixed header,
     which sits at a lower z-index. Only the actual visible pieces re-enable
     pointer events. */
  .builder-overlay{position:fixed;inset:0;z-index:60;pointer-events:none}
  /* the device toggle, the Q&A pill and the fullscreen button beside it
     all live in one row anchored to the bottom bar — see
     .builder-bar-row-outer below — rather than a separate fixed strip
     under the header, which used to eat extra height from the preview. */
  .builder-topbar-copy{min-width:0;display:flex;flex-direction:column;line-height:1.25}
  .builder-topbar-copy strong{font-family:var(--display);font-size:14px;font-weight:700;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .builder-topbar-copy span{font-size:12px;color:var(--accent);font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .builder-segmented{flex:none;display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(59,130,246,.08)}
  .builder-device{border:none;background:transparent;cursor:pointer;border-radius:999px;
    padding:8px 14px;min-height:36px;font-family:var(--display);font-size:12px;font-weight:700;
    letter-spacing:.04em;color:var(--muted);transition:background .15s,color .15s}
  .builder-device:hover{color:var(--ink)}
  .builder-device.is-on{background:var(--card);color:var(--accent);box-shadow:0 1px 4px rgba(36,27,46,.14)}
  /* beside the Q&A pill rather than inside it, so the pill stays just the
     question flow. Wrapped together with .builder-bar in
     .builder-bar-and-fullscreen, which stays a row at every viewport width
     (see below) so the button remains next to the input box on mobile too,
     instead of stacking away from it. */
  .builder-open-html{flex:none;width:34px;height:34px;border:none;border-radius:50%;cursor:pointer;
    background:rgba(59,130,246,.08);color:var(--accent);display:flex;align-items:center;justify-content:center;
    transition:background .15s,color .15s}
  .builder-open-html svg{width:17px;height:17px}
  .builder-open-html:hover{background:rgba(59,130,246,.16);color:var(--ink)}
  .builder-controls{flex:none;display:flex;align-items:center;gap:8px}
  .builder-bar-and-fullscreen{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0}
  /* copy left, Q&A pill + fullscreen button centre, device toggle right —
     all in one row anchored to the bottom bar */
  /* A 3-column grid, not flex: the Q&A pill needs to sit truly centred on
     the row regardless of the device toggle's width on the right, and a
     flex layout can only do that by balancing it against an equal-width
     element on the left (originally .builder-topbar-copy, since removed
     from the markup) — remove that counterweight and the "centre" item
     just fills-and-hugs the leftover space instead of centring in it. The
     empty first column is that counterweight now: it has no content, but
     reserves the same width as the toggle on the right, so the middle
     column is genuinely centred on the row rather than on the leftover
     space after the toggle. */
  .builder-bar-row-outer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,780px) minmax(0,1fr);align-items:center;gap:18px;width:100%;max-width:1180px;margin:0 auto}
  .builder-bar-row-outer .builder-bar-and-fullscreen{grid-column:2;grid-row:1;min-width:0}
  .builder-bar-row-outer .builder-controls{grid-column:3;grid-row:1;justify-self:end}
  /* Below the generated site's own 900px desktop breakpoint the frame can never
     be wider than the pane, so "Desktop" would render the mobile layout anyway
     — the control would do literally nothing. Hide the whole controls strip
     (just the device toggle now) rather than leave an empty row behind.
     .builder-bar-and-fullscreen keeps its own internal row layout regardless
     — only its position among these other stacked pieces changes. */
  @media(max-width:900px){
    .builder-controls{display:none}
    .builder-bar-row-outer{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  }
  @media(max-width:560px){
    .builder-topbar-copy strong{font-size:12.5px}
    .builder-topbar-copy span{font-size:11px}
    .builder-device{padding:8px 11px;font-size:11.5px}
    .builder-open-html{width:32px;height:32px}
  }
  .builder-preview{position:fixed;top:var(--header-h, 75px);left:0;right:0;overflow:hidden;background:var(--bg);
    pointer-events:auto;transition:padding .3s var(--qa-ease),bottom .2s var(--qa-ease)}
  /* centred, because the desktop-ratio sizing above can make it narrower than
     the pane; the surrounding gutter reads as the space beside a browser window */
  .builder-phone-frame{width:100%;height:100%;display:block}
  .builder-preview iframe{width:100%;height:100%;border:0;display:block;margin:0 auto;pointer-events:auto;background:#fff;
    transition:max-width .3s var(--qa-ease)}
  .builder-phone-notch{display:none}
  /* real device-width column (not a scaled mockup) — the iframe is simply
     narrower, so the generated site's own responsive CSS switches to its
     mobile layout naturally, exactly as it would on an actual phone.
     The frame is also height-constrained to a real phone's aspect ratio
     (not the full pane height) and wrapped in a fake device bezel, so it
     reads as an actual phone rather than a tall narrow strip of the page. */
  .builder-preview.mobile-view{padding:24px;display:flex;align-items:center;justify-content:center}
  /* height:100% + aspect-ratio, width:auto (not the reverse): with both
     width and height given explicit lengths, aspect-ratio has nothing
     "auto" left to resolve and is ignored per spec, so the old
     width:min(390px,100%);height:min(844px,100%) pair silently stopped
     enforcing a real phone shape on any pane shorter than 844px — the
     frame just stretched to whatever rectangle those two mins produced.
     Driving off height and letting aspect-ratio size width keeps the
     shape correct at every pane height, and caps out at a real phone's
     max-width once the container is tall enough to hit it. */
  .builder-preview.mobile-view .builder-phone-frame{position:relative;width:auto;
    height:100%;max-height:844px;max-width:min(390px,100%);aspect-ratio:390/844;flex:none;
    padding:14px;border-radius:48px;background:#111;
    box-shadow:0 30px 70px rgba(15,15,20,.4),inset 0 0 0 2px rgba(255,255,255,.06)}
  .builder-preview.mobile-view iframe{max-width:none;width:100%;height:100%;border-radius:28px}
  @media(max-width:820px){
    .builder-preview.mobile-view{padding:0}
    .builder-preview.mobile-view .builder-phone-frame{width:100%;height:100%;aspect-ratio:auto;padding:0;border-radius:0;box-shadow:none;background:none}
    .builder-preview.mobile-view iframe{border-radius:0}
  }

  /* a fixed, full-width white footer strip — reads as part of the page
     chrome rather than floating over the preview — with the same glowing
     pill from the first 3 questions sitting inside it. */
  .builder-bar-wrap{position:fixed;left:0;right:0;bottom:0;z-index:61;display:flex;flex-direction:column;align-items:stretch;
    pointer-events:auto;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(23,32,31,.06);
    padding:16px 20px calc(16px + env(safe-area-inset-bottom, 0px));touch-action:manipulation;will-change:transform}
  .builder-bar{width:100%;max-width:780px;pointer-events:auto;transition:background .35s var(--qa-ease)}
  /* a permanent, visible ring around the pill (on top of the animated glow
     behind it) so it reads clearly against any part of the preview */
  .builder-bar .glow-box-inner{position:relative;overflow:hidden;min-height:64px;display:flex;align-items:center;
    border:1.5px solid rgba(59,130,246,.28);transition:background .35s var(--qa-ease),border-color .35s var(--qa-ease)}
  .builder-bar-row{position:relative;width:100%;display:flex;align-items:center;gap:8px;padding:0 8px 0 10px;
    transition:opacity .22s var(--qa-ease),transform .22s var(--qa-ease)}
  .builder-bar-row.builder-leaving{opacity:0;transform:translateY(-8px)}
  .builder-bar-row.builder-entering{opacity:0;transform:translateY(8px)}
  .builder-icon-btn{flex:none;width:34px;height:34px;border-radius:50%;border:none;background:transparent;
    color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;
    opacity:0;transform:scale(.8);pointer-events:none;transition:opacity .2s var(--qa-ease),transform .2s var(--qa-ease),background .15s,color .15s}
  .builder-icon-btn svg{width:18px;height:18px}
  .builder-icon-btn:hover{background:rgba(59,130,246,.08);color:var(--ink)}
  .builder-mobile-toggle{opacity:1;transform:none;pointer-events:auto}
  .builder-mobile-toggle.active{background:rgba(59,130,246,.12);color:var(--accent)}
  .builder-back.visible{opacity:1;transform:none;pointer-events:auto}
  .builder-progress{flex:none;font-family:var(--display);font-size:11.5px;font-weight:700;color:var(--muted);
    letter-spacing:.02em;min-width:2.4em}
  .builder-field{flex:1;min-width:0}
  /* the row fades/collapses away, the whole pill turns WhatsApp green, and
     the button fades in centred within it — a soft morph rather than an
     abrupt swap */
  .builder-bar-row{opacity:1;transform:none}
  .builder-bar.builder-bar-done .builder-bar-row{position:absolute;inset:0;opacity:0;transform:translateY(-8px);pointer-events:none}
  .builder-bar.builder-bar-done .glow-box-inner{background:#25D366;border-color:#1da851;justify-content:center}
  .builder-whatsapp-row{width:100%;display:flex;align-items:center;justify-content:center;gap:2px;
    opacity:0;transform:scale(.96);transition:opacity .3s var(--qa-ease),transform .3s var(--qa-ease);pointer-events:none}
  .builder-bar.builder-bar-done .builder-whatsapp-row{opacity:1;transform:none;pointer-events:auto}
  .builder-whatsapp-row[hidden]{display:none}
  .builder-whatsapp{margin:0;width:auto;padding:12px 32px;background:transparent;color:#fff}
  .builder-back-final{opacity:1;transform:none;pointer-events:auto;color:#fff}
  .builder-back-final:hover{background:rgba(255,255,255,.18);color:#fff}

  .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;
    clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

  @media(max-width:760px){
    .builder-bar-wrap{padding:10px 8px calc(10px + env(safe-area-inset-bottom, 0px))}
    .builder-bar .glow-box-inner{min-height:58px}
    .builder-bar-row{padding:0 7px;gap:5px}
    .builder-mobile-toggle{display:none}
    .builder-icon-btn{width:40px;height:40px}
    .builder-progress{font-size:10.5px;min-width:2.2em}
    .builder-field{min-height:48px}
    .builder-field input{min-height:44px;font-size:16px;line-height:1.25;pointer-events:auto}
    .builder-field .qa-ph{font-size:16px;font-weight:400}
    .builder-bar .qa-go{width:44px;height:44px;padding:0;margin-right:0;font-size:18px;touch-action:manipulation}
  }

  /* personalised website-build transition */
  .creating-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
    overflow:hidden;background:radial-gradient(110% 90% at 50% 8%,#74AAFF 0%,#3B82F6 47%,#2059BE 100%);
    opacity:0;pointer-events:none;transition:opacity .42s cubic-bezier(.22,.7,.3,1)}
  .creating-overlay:before{content:"";position:absolute;inset:-20%;background:
    radial-gradient(circle at 25% 30%,rgba(255,255,255,.14),transparent 30%),
    radial-gradient(circle at 75% 70%,rgba(255,255,255,.1),transparent 32%);
    transform:scale(1.08);transition:transform 2.7s ease}
  .creating-overlay.active{opacity:1;pointer-events:auto}
  .creating-overlay.active:before{transform:scale(1)}
  .creating-inner{position:relative;text-align:center;padding:0 24px;width:min(560px,90vw);
    opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .55s cubic-bezier(.22,.7,.3,1)}
  .creating-overlay.active .creating-inner{opacity:1;transform:translateY(0)}
  .creating-logo{display:block;width:min(220px,58vw);height:auto;margin:0 auto 38px;
    filter:brightness(0) invert(1);opacity:.96}
  .creating-verb{font-family:var(--body);font-size:clamp(11px,1.5vw,13px);font-weight:750;letter-spacing:.28em;
    text-transform:uppercase;color:rgba(255,255,255,.76);margin-bottom:16px;min-height:1.25em;
    transform:translateY(0);transition:opacity .13s ease,transform .13s ease}
  .creating-name{font-family:var(--display);font-size:clamp(31px,6vw,62px);font-weight:650;color:#fff;
    letter-spacing:-.025em;line-height:1.06;margin-bottom:16px;word-break:break-word;
    text-shadow:0 0 34px rgba(255,255,255,.28);transition:text-shadow .35s ease}
  .creating-overlay.final .creating-name{text-shadow:0 0 44px rgba(255,255,255,.5),0 0 90px rgba(255,255,255,.22)}
  .creating-sub{font-family:var(--body);font-size:clamp(11px,1.5vw,14px);font-weight:600;letter-spacing:.2em;
    text-transform:uppercase;color:rgba(255,255,255,.58);min-height:1.25em;
    transform:translateY(0);transition:opacity .13s ease,transform .13s ease}
  .creating-verb.is-swapping,.creating-sub.is-swapping{opacity:0;transform:translateY(5px)}
  .creating-progress{width:min(360px,72vw);height:3px;margin:30px auto 0;border-radius:999px;
    overflow:hidden;background:rgba(255,255,255,.2)}
  .creating-progress span{display:block;width:6%;height:100%;border-radius:inherit;background:#fff;
    box-shadow:0 0 15px rgba(255,255,255,.62);transition:width .5s cubic-bezier(.22,.7,.3,1)}
  @media(prefers-reduced-motion:reduce){
    .creating-overlay,.creating-overlay:before,.creating-inner,.creating-verb,.creating-name,.creating-sub,.creating-progress span{transition:none}
  }

  /* three compact cards, BrightSite highlighted in the centre — collapsed
     by the builder (id="convRow") while a live preview is open, hence the
     height/opacity transition staying on the same element. */
  .conv-row{transition:max-height .5s cubic-bezier(.22,.7,.3,1),opacity .4s ease,margin .5s ease;overflow:hidden;max-height:2400px}
  .conv-row.collapsed{max-height:0;opacity:0;margin-top:0}
  .conv-row{display:flex;align-items:stretch;gap:clamp(10px,1.6vw,18px);max-width:820px;margin:clamp(14px,2.2svh,24px) auto 0}
  .opt-card{flex:1 1 0;min-width:0;text-align:center;border-radius:16px;padding:clamp(18px,2.2vw,26px) clamp(14px,1.8vw,20px);
    background:var(--card);border:1px solid var(--line);box-shadow:0 10px 30px rgba(23,32,31,.05);
    transition:transform .25s var(--qa-ease),box-shadow .25s var(--qa-ease)}
  .opt-card:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(23,32,31,.09)}
  .opt-card h3{font-family:var(--display);font-size:clamp(14px,1.5vw,17px);font-weight:700;margin-bottom:8px}
  .opt-card p{color:var(--muted);font-size:clamp(12.5px,1.2vw,14px)}
  .opt-card-hi{z-index:1;background:linear-gradient(160deg, rgba(158,197,250,.52), rgba(59,130,246,.16));
    border:1px solid rgba(59,130,246,.18);box-shadow:0 18px 46px rgba(59,130,246,.18)}
  .opt-card-hi:hover{box-shadow:0 20px 46px rgba(59,130,246,.22)}
  .opt-card-hi p{color:var(--ink);font-weight:600}
  .opt-logo{height:1.7em;width:auto;margin-bottom:10px}
  .opt-mini{list-style:none;margin:12px 0 0;padding-top:12px;border-top:1px solid rgba(23,32,31,.08);
    text-align:left;display:flex;flex-direction:column;gap:6px}
  .opt-mini li{position:relative;padding-left:14px;font-size:clamp(11.5px,1.05vw,12.5px);line-height:1.3;color:var(--muted)}
  .opt-mini li:before{content:"—";position:absolute;left:0;color:var(--muted);opacity:.6}
  .opt-mini-pos{border-top-color:rgba(59,130,246,.18)}
  .opt-mini-pos li{color:var(--ink);font-weight:600}
  .opt-mini-pos li:before{content:"✓";color:var(--accent);opacity:1}
  @media(max-width:760px){
    .conv-row{flex-direction:column;max-width:420px;gap:10px;margin-top:10px}
    .opt-card{padding:14px 16px}
    .opt-card-hi{order:-1}
    .opt-mini{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 12px;text-align:center}
    .opt-mini li{padding-left:12px}
  }

  /* terms & privacy page */
  .legal{max-width:760px;margin:0 auto}
  .legal-updated{color:var(--muted);font-size:12.5px;margin-bottom:26px}
  .legal h2{font-family:var(--display);font-size:clamp(24px,3.4vw,32px);font-weight:600;
    margin:40px 0 6px;padding-top:26px;border-top:1px solid var(--line)}
  .legal h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
  .legal h3{font-size:14.5px;font-weight:700;letter-spacing:.01em;margin:24px 0 6px}
  .legal p{color:var(--muted);font-size:15px;line-height:1.75;margin-bottom:10px}
  .legal a{color:var(--accent)}

  /* ---- homepage: what's included ---- */
  .inc-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px);
    max-width:1000px;margin:0 auto}
  .inc-grid li{background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:clamp(14px,1.6vw,18px);font-size:14px;line-height:1.5;color:var(--muted)}
  .inc-grid b{display:block;font-family:var(--display);font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px}
  @media(max-width:820px){.inc-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.inc-grid{grid-template-columns:1fr;max-width:420px}}

  /* ---- homepage: two example builds ---- */

  /* the final call to action reuses .band, centred */
  #final-cta .band{text-align:center}
  #final-cta .band .eyebrow{color:var(--accent)}
  #final-cta .band .go{margin-top:16px}

  /* ---- footer nav ---- */
  .foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:16px}
  .foot-nav a{font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;
    padding:6px 2px;border-bottom:1px solid transparent}
  .foot-nav a:hover{border-bottom-color:var(--accent);color:var(--accent)}

  /* plan sizing + price suffix, shared across pages */
  .plan{position:relative}
  .plan.feature{transform:scale(1.03)}
  .price-plus{display:inline-block;font-size:14px;font-weight:600;color:var(--muted);font-family:var(--body);margin-left:8px}
  .pricing-note{max-width:760px;margin:32px auto 0;text-align:center;font-size:13px;line-height:1.6;color:var(--muted)}
  @media(max-width:900px){.plan.feature{transform:none}}

  /* ---- mobile polish ---- */
  /* a bare .go outside a .plan/.meta had no padding, so it rendered as a 20px
     inline link — too small to tap comfortably */
  #final-cta .band .go{display:inline-block;padding:14px 26px;min-height:46px;line-height:1.3}
  /* 44px minimum touch targets */
  .burger{width:44px;height:44px}
  .foot-nav a{min-height:44px;display:inline-flex;align-items:center}
  /* the header CTA had shrunk to 8px, below comfortable reading size */
  @media(max-width:820px){.top .cta{padding:9px 14px;font-size:10.5px;letter-spacing:.06em}}
  @media(max-width:400px){.top .cta{padding:9px 12px;font-size:10px}}
  @media(max-width:820px){
    /* keep the three process cards compact rather than a tall stack of 4:3 art */
    .step3-img{aspect-ratio:16/10;margin-bottom:14px}
    .step3 h4{font-size:20px}
    /* number + copy read before the picture on mobile, image last */
    .step3{display:flex;flex-direction:column}
    .step3-num{order:1}
    .step3 h4{order:2}
    .step3 p{order:3;margin-bottom:14px}
    .step3-img{order:4;margin-bottom:0}
  }
  .top .cta{display:inline-flex;align-items:center;justify-content:center;min-height:40px}

  /* Keep the arrow comfortably tappable beside the field on narrow screens. */
  @media(max-width:560px){
    .qa-box{border-radius:22px}
    .qa-box .glow-box-inner{min-height:0}
    /* the arrow stays beside the input rather than dropping under it */
    .qa-slide{flex-direction:row;align-items:center;gap:8px;padding:8px 8px 8px 16px}
    .qa-field{min-height:46px}
    .qa-field input,.qa-field select{min-height:46px}
    .qa-go{width:46px;height:46px;border-radius:14px;margin-right:0}
    .qa-go svg{width:21px;height:21px}
  }

  /* ---- three examples, desktop/mobile toggle ----
     Each card holds two device frames; only the active one is displayed and
     an iframe's own fixed intrinsic width (not the card's on-screen size)
     is what makes the live site render its real desktop or mobile layout,
     scaled down to fit via CSS transform. */
  #examples{padding-top:0;margin-top:clamp(-40px,-4vh,-14px)}
  /* Large centred card, the previous/next ones peeking off the edge at
     reduced scale and opacity — no arrows, no dots, just autoplay and drag
     (see homepage-examples.js). The stage width is a PERCENTAGE of the
     carousel's own container (not vw) specifically so the peek math holds
     at every screen size: with offset o=.7 and scale s=.8, a neighbour's
     outer edge sits at stage*(o+.5s)=stage*1.1 from centre, and the
     container's own half-width is carousel/2 — since stage is a fixed
     43% of that container at any size, .43*1.1=.473 always clears .5,
     so the edge never crosses the clip boundary no matter the viewport. */
  .ex-carousel{max-width:1080px;margin:0 auto;overflow:hidden;touch-action:pan-y}
  .ex-viewport{position:relative}
  /* Big enough that it's fine to run past the bottom of the viewport before
     scrolling — width k=68% of the container, with the side peek's offset/
     scale (o=.38, s=.7) chosen so o+.5s=.73 stays under 1/(2k)=.735,
     the same margin-of-safety approach as before. k was dropped from 80%
     to 68% (o/s pushed out to match) purely to widen the margin the
     neighbour cards peek into — the 640px cap keeps desktop untouched,
     this only changes how much of the side cards show on narrower screens. */
  .ex-grid{position:relative;width:min(640px,68%);margin:0 auto;transition:height .35s var(--qa-ease)}
  .ex-card{position:absolute;inset:0;margin:auto;width:100%;height:fit-content;
    border-radius:16px;box-shadow:0 10px 30px rgba(23,32,31,.05);cursor:pointer;
    transition:transform .5s var(--qa-ease),opacity .5s var(--qa-ease)}
  .ex-card[data-pos="0"]{transform:translateX(0) scale(1);opacity:1;z-index:3;cursor:default}
  .ex-card[data-pos="-1"]{transform:translateX(-38%) scale(.7);opacity:.55;z-index:2}
  .ex-card[data-pos="1"]{transform:translateX(38%) scale(.7);opacity:.55;z-index:2}
  .ex-card[data-pos="hidden"]{transform:translateX(0) scale(.6);opacity:0;z-index:1;pointer-events:none}
  @media(prefers-reduced-motion:reduce){.ex-card{transition:opacity .3s ease}}
  .ex-frame{display:none}
  .ex-frame.is-active{display:block}
  /* No card padding/border/background any more — the browser-chrome bar and
     the preview image now form the card's own edge directly, no thick white
     frame around them. */
  .ex-view{position:relative;overflow:hidden;background:#F4EFE8;border-radius:0 0 16px 16px}
  .ex-view iframe,.ex-view img{position:absolute;top:0;left:0;border:0;transform-origin:top left;pointer-events:none}
  /* iOS Safari can still let touch-scroll gestures reach an iframe's own
     content even with pointer-events:none on it, so a real transparent
     layer on top is needed to actually swallow the touch and stop the
     live preview from scrolling under the visitor's finger. */
  .ex-view-lock{position:absolute;inset:0;z-index:2}
  .ex-bar{height:26px;background:#efe9e0;border-radius:16px 16px 0 0;display:flex;align-items:center;gap:5px;padding:0 10px}
  .ex-bar i{width:7px;height:7px;border-radius:50%;background:#d9d0c2;flex:none}
  /* ---- homepage design carousel ----
     Items are absolutely positioned and placed by their signed distance from
     the active index, so the loop never needs cloned nodes and every state is
     a pure transform. Only transform/opacity animate — the same rule that
     keeps the previews and the glow cheap to composite. */
  #showcase{padding-top:0;margin-top:clamp(-40px,-4vh,-14px);padding-bottom:clamp(30px,5vh,56px)}

  .cx{position:relative;width:100%;overflow:hidden;touch-action:pan-y;
      /* room for the scaled-down side cards to sit beside the centre one */
      padding:0 0 clamp(16px,2.4vw,26px)}
  .cx-stage{position:relative;width:min(560px,72vw);margin:0 auto;aspect-ratio:16/10}
  /* Position and opacity move together, one duration and one easing curve
     for both, so the card reads as a single smooth motion rather than two
     properties racing each other or a delayed "pop" once fully grown. The
     .7s settle leaves most of the 1.8s autoplay cycle for the card to just
     sit still before the next move starts. */
  .cx-item{position:absolute;inset:0;margin:auto;will-change:transform,opacity;
    transition:transform .7s cubic-bezier(.22,.61,.36,1), opacity .7s cubic-bezier(.22,.61,.36,1);
    backface-visibility:hidden}
  .cx-item[data-pos="0"]{transform:translateX(0) scale(1);opacity:1;z-index:3}
  .cx-item[data-pos="-1"]{transform:translateX(-50%) scale(.74);opacity:.5;z-index:2}
  .cx-item[data-pos="1"]{transform:translateX(50%) scale(.74);opacity:.5;z-index:2}
  .cx-item[data-pos="hidden"]{transform:translateX(0) scale(.6);opacity:0;z-index:1;pointer-events:none}

  /* A nested layer can keep the active card drifting while the parent owns
     the left/centre/right transition. This avoids competing transforms. */
  .cx-float{position:relative;width:100%;height:100%;will-change:transform}

  /* the mini website itself */
  .cx-win{height:100%;border-radius:14px;overflow:hidden;background:var(--card);
    border:1px solid var(--line);box-shadow:0 10px 28px rgba(23,32,31,.10);display:flex;flex-direction:column}
  .cx-item[data-pos="0"] .cx-win{box-shadow:0 26px 60px rgba(23,32,31,.20)}
  .cx-bar{flex:none;display:flex;align-items:center;gap:5px;padding:7px 10px;background:#f2eee7;border-bottom:1px solid var(--line)}
  .cx-bar i{width:6px;height:6px;border-radius:50%;background:#d9d0c2;flex:none}
  .cx-bar span{flex:1;margin-left:6px;background:#fff;border:1px solid var(--line);border-radius:999px;
    padding:2px 8px;font-size:8.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* A static screenshot of each site's homepage, not a live iframe — see
     homepage-carousel.js for why. object-fit:cover crops to the card's own
     aspect ratio, so no JS-computed scale is needed like the old iframe did. */
  .cx-shot{position:relative;flex:1;min-height:0;overflow:hidden;background:#F4EFE8}
  .cx-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
  .cx-hit{position:absolute;inset:0;z-index:2;display:block}
  .cx-item[data-pos="0"] .cx-hit{cursor:pointer}
  .cx-item:not([data-pos="0"]) .cx-hit{pointer-events:none}
  @media(prefers-reduced-motion:reduce){
    .cx-item{transition:none}
  }

/* ── Homepage interaction and responsive behaviour ─────────────────── */
html,body{max-width:100%}

/* The generated preview is modal-like on desktop. Phones keep their native
   root scroller and scroll inside the preview, so this lock never applies. */
@media(min-width:821px){
  html.builder-scroll-lock,body.builder-scroll-lock{overflow:hidden}
}

/* Reserve enough room above the cards for the colour marker and its halo. */
.cx{padding-top:30px;overflow:hidden;touch-action:pan-y}
.cx-stage,.cx-item,.cx-float{overflow:visible}
.cx-dot{
  position:absolute;left:50%;top:-20px;z-index:6;
  width:11px;height:11px;border-radius:50%;
  transform:translateX(-50%);
  background:var(--cx-hero-colour,#3B82F6);
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 0 8px var(--cx-hero-colour,#3B82F6),0 0 18px var(--cx-hero-colour,#3B82F6);
  opacity:0;pointer-events:none;
  transition:opacity 1.4s ease,transform 1.72s cubic-bezier(.4,0,.2,1)
}
.cx-item[data-pos="0"] .cx-dot{opacity:1}
.cx-item[data-pos="-1"] .cx-dot,.cx-item[data-pos="1"] .cx-dot{
  opacity:.48;transform:translateX(-50%) scale(.8)
}

/* The 1.8s drift fills the tiny gap between carousel translations, keeping
   the centre design visibly alive without making the page hard to read. */
@keyframes cx-centre-drift{
  from{transform:translate3d(0,2px,0) scale(.997)}
  to{transform:translate3d(0,-2px,0) scale(1.003)}
}
.cx-item[data-pos="0"] .cx-float{animation:cx-centre-drift 1.8s linear infinite}

@media(max-width:820px){
  html.nav-open,body.nav-open{overflow:hidden}
  html{
    scroll-behavior:auto;
    height:auto;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto
  }
  body{
    position:relative;
    height:auto;
    min-height:100vh;
    overflow-x:hidden;
    overflow-y:visible
  }

  /* Mobile homepage stays in ordinary document flow. */
  #stage{position:relative;height:66svh;min-height:520px}
  #pin{position:relative;top:auto;height:66svh;min-height:520px;overflow:hidden}
  #scene{pointer-events:none}
  .hero-conv{min-height:72svh;padding:140px 14px 32px;overflow:visible}
  .hero-conv-wrap{position:relative;z-index:2;transform:none}

  /* Use native form placeholders and controls on touch devices. Only the
     active slide is interactive; the other two are removed from layout. */
  #qaFieldName .qa-ph,#qaFieldType .qa-ph,#qaFieldLocation .qa-ph{display:none}
  .qa-slide:not(.qa-active),
  .qa-slide:not(.qa-active) .qa-field,
  .qa-slide:not(.qa-active) input,
  .qa-slide:not(.qa-active) select,
  .qa-slide:not(.qa-active) button{pointer-events:none}
  .qa-slide.qa-active,
  .qa-slide.qa-active .qa-field,
  .qa-slide.qa-active input,
  .qa-slide.qa-active select,
  .qa-slide.qa-active button{pointer-events:auto}
  #bizName,#bizTagline,#bizLocation{
    display:block;
    position:relative;
    z-index:5;
    width:100%;
    min-height:52px;
    opacity:1;
    pointer-events:auto;
    touch-action:auto;
    -webkit-appearance:none;
    appearance:none;
    -webkit-user-select:text;
    user-select:text;
    color:var(--ink);
    background-color:transparent
  }
  #bizName::placeholder,#bizLocation::placeholder{color:var(--muted);opacity:1}
  #bizName:focus::placeholder,#bizLocation:focus::placeholder{opacity:0}

  /* The carousel never claims touch gestures: the centre-card link stays
     available on pointer devices only, so a phone's swipe always belongs
     to the page scroller. */
  #showcase{overflow:hidden;margin-top:0;padding-top:0}
  .cx{padding-top:28px;overflow:hidden;touch-action:pan-y}
  .cx-stage{width:min(72vw,300px);min-width:220px}
  .cx-hit{pointer-events:none;touch-action:pan-y}
  .cx-item[data-pos="-1"]{transform:translateX(-67%) scale(.68);opacity:.62}
  .cx-item[data-pos="1"]{transform:translateX(67%) scale(.68);opacity:.62}
  .cx-dot{top:-18px;width:10px;height:10px}

  /* The root page remains unlocked; swipes over the generated page scroll its
     own full-height iframe with native momentum. */
  .builder-overlay{touch-action:pan-y}
  .builder-preview{
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    touch-action:pan-y
  }
  .builder-preview iframe{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y
  }
}

@media(max-width:420px){
  .hero-conv{padding-top:148px}
  .cx-stage{width:230px;min-width:0}
}

@media(prefers-reduced-motion:reduce){
  .cx-dot{transition:none}
  .cx-item[data-pos="0"] .cx-float{animation:none}
}


/* Builder media step */
.builder-media-field {
  cursor: pointer;
}
.builder-media-field .qa-ph {
  color: #17243d;
  opacity: 1;
  font-weight: 700;
}
.builder-media-field::after {
  content: 'Logo, homepage + gallery';
  display: block;
  margin-left: auto;
  padding-left: 14px;
  color: #6b7486;
  font-size: 12px;
  white-space: nowrap;
}

.media-modal[hidden] {
  display: none;
}
.media-modal {
  position: fixed;
  pointer-events: auto;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  transition: opacity .18s ease;
}
.media-modal.is-open {
  opacity: 1;
}
.media-modal-backdrop {
  position: absolute;
  z-index: 0;
  pointer-events: auto;
  inset: 0;
  border: 0;
  background: rgba(8, 19, 39, .58);
  backdrop-filter: blur(8px);
  cursor: default;
}
.media-modal-card {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  width: min(540px, 100%);
  max-height: min(780px, calc(100dvh - 36px));
  overflow: auto;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 20px;
  padding: 22px;
  background: #fff;
  box-shadow: 0 26px 80px rgba(4, 16, 38, .28);
  transform: translateY(14px) scale(.985);
  transition: transform .18s ease;
}
.media-modal.is-open .media-modal-card {
  transform: translateY(0) scale(1);
}
.media-modal-close {
  position: absolute;
  top: 14px;
  right: 15px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #eef3f9;
  color: #17243d;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}
.media-modal-kicker {
  margin-bottom: 7px;
  color: #0877f9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.media-modal-card h2 {
  margin: 0;
  color: #10203b;
  font-size: clamp(24px, 4vw, 30px);
  line-height: 1.05;
}
.media-modal-intro {
  margin: 7px 42px 14px 0;
  color: #657086;
  line-height: 1.5;
}
.media-upload-grid {
  display: grid;
  gap: 10px;
}
.media-upload-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 11px;
  border: 1px solid #dce4ef;
  border-radius: 15px;
  background: #f8fafd;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.media-upload-option:hover {
  border-color: #0877f9;
  background: #f2f7ff;
  transform: translateY(-1px);
}
.media-upload-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.media-upload-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #e8f2ff;
  color: #0877f9;
  font-weight: 850;
  overflow: hidden;
}
.media-upload-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-upload-thumb[hidden] {
  display: none;
}
.media-upload-icon:has(.media-upload-thumb:not([hidden])) .media-upload-icon-letter {
  visibility: hidden;
}
.media-upload-thumb-count {
  position: absolute;
  right: -2px;
  bottom: -2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: #0877f9;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
}
.media-upload-thumb-count[hidden] {
  display: none;
}
.media-upload-option span:not(.media-upload-icon) {
  display: grid;
  gap: 3px;
}
.media-upload-option strong {
  color: #17243d;
  font-size: 15px;
}
.media-upload-option small {
  color: #788397;
  font-size: 12px;
}
.media-selection-status {
  margin: 8px 0;
  min-height: 18px;
  color: #607089;
  font-size: 13px;
}
.media-primary-action,
.media-secondary-action {
  min-height: 40px;
  border-radius: 13px;
  padding: 8px 12px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.media-primary-action {
  width: 100%;
  border: 0;
  background: #0877f9;
  color: #fff;
}
.media-primary-action:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.media-choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 9px;
}
.media-secondary-action {
  border: 1px solid #d8e0eb;
  background: #fff;
  color: #26344c;
}
.media-designer-action {
  border-color: #b9d6ff;
  background: #f0f6ff;
  color: #075fbf;
}
.media-whatsapp-note {
  margin: 9px 0 0;
  color: #7b8597;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}
@media (max-width: 640px) {
  .builder-media-field::after {
    display: none;
  }
  .media-modal {
    align-items: end;
    padding: 0;
  }
  .media-modal-card {
    width: 100%;
    max-height: 84dvh;
    border-radius: 24px 24px 0 0;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
    transform: translateY(28px);
  }
  .media-choice-row {
    grid-template-columns: 1fr;
  }
}

/* Homepage proof, process and pricing additions */
.compact-head{max-width:760px;margin-left:auto;margin-right:auto}
.journey-line{display:flex!important;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 12px;max-width:960px!important;margin:22px auto 0!important;color:var(--ink)!important;font-size:14px!important}
.journey-line b{font-weight:650}.journey-line span{color:var(--accent);font-size:18px}
.step3-tom img{object-position:center 20%}
#styles-showcase,#before-after,#home-pricing,#faq{border-top:1px solid var(--line)}
.style-preview-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.style-preview-card{min-width:0;padding:7px 7px 14px;border:1px solid var(--line);border-radius:17px;background:var(--card);box-shadow:0 10px 28px rgba(20,35,50,.07);overflow:hidden}
.style-preview-card b{display:block;padding:10px 8px 0;font-family:var(--display);font-size:15px}
.style-preview-window{position:relative;height:190px;border-radius:11px;overflow:hidden;background:#e6e8ec;pointer-events:none}
.style-preview-window iframe{position:absolute;top:0;left:0;width:1440px;height:900px;border:0;transform:scale(.155);transform-origin:top left;pointer-events:none}
.style-preview-card:nth-child(2n) .style-preview-window iframe{animation:style-preview-pan 9s ease-in-out infinite alternate}
.style-preview-card:nth-child(2n+1) .style-preview-window iframe{animation:style-preview-pan 11s 1s ease-in-out infinite alternate}
@keyframes style-preview-pan{from{transform:scale(.155) translateY(0)}to{transform:scale(.155) translateY(-230px)}}
.demo-disclaimer{margin:18px auto 0;max-width:760px;text-align:center;color:var(--muted);font-size:12px;line-height:1.55}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1080px;margin:0 auto}
.review-card{padding:24px 22px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:0 18px 44px rgba(23,32,31,.08);display:flex;flex-direction:column}
.review-stars{display:inline-flex;gap:2px;color:#f5a623;margin-bottom:12px}
.review-stars svg{width:15px;height:15px;fill:currentColor}
.review-card p{color:var(--ink);font-size:14.5px;line-height:1.6;flex:1}
.review-author{margin-top:16px;font-size:13px}
.review-author b{display:block;font-family:var(--display);font-size:15px}
@media(max-width:820px){
  .review-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;max-width:none;padding:0 18px 6px;margin:0 -18px}
  .review-card{flex:0 0 78vw;max-width:300px;scroll-snap-align:center;padding:18px 16px}
  .review-card p{font-size:13.5px}
}
.before-after-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1040px;margin:0 auto}
.proof-card{padding:10px 10px 18px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:0 18px 44px rgba(23,32,31,.08)}
.proof-label{display:flex;align-items:center;gap:9px;padding:8px 6px 13px;font-weight:700;font-size:14px}
.proof-label span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#eef5ff;color:var(--accent);font-size:11px}
.proof-window{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:13px;background:#eceae7;pointer-events:none}
.proof-window iframe{position:absolute;inset:0;width:1440px;height:900px;border:0;transform:scale(.36);transform-origin:top left;pointer-events:none}
.proof-window img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.proof-card>p{padding:14px 8px 0;color:var(--muted);font-size:13px;line-height:1.5}
.home-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:980px;margin:0 auto}
.home-price-card{padding:25px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:0 14px 36px rgba(23,32,31,.07)}
.home-price-card.featured{background:#10203b;color:#fff;border-color:#10203b;transform:translateY(-6px)}
.home-price-card>span{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-weight:800}
.home-price-card h4{margin:8px 0 14px;font-family:var(--display);font-size:24px}
.home-price-card strong{display:block;font-family:var(--display);font-size:38px;line-height:1}
.home-price-card strong small{font:600 13px var(--body);opacity:.7}
.home-price-card p{margin-top:12px;color:var(--muted);font-size:14px}.home-price-card.featured p{color:#cbd5e1}
.pricing-reassure{max-width:720px;margin:23px auto 10px;text-align:center;color:var(--muted);font-size:13px}
.text-link{display:block;width:max-content;margin:0 auto;color:var(--accent);font-weight:700;text-decoration:none;font-size:14px}
.faq-wrap{max-width:880px}.faq-list{display:grid;gap:9px}
.faq-list details{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:0 18px}
.faq-list summary{position:relative;padding:17px 36px 17px 0;cursor:pointer;list-style:none;font-weight:700;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:'+';position:absolute;right:2px;top:13px;font-size:24px;color:var(--accent);font-weight:400}.faq-list details[open] summary::after{content:'−'}
.faq-list p{padding:0 34px 17px 0;color:var(--muted);font-size:14px;line-height:1.6}
.mobile-demo-cta{display:none}
@media(max-width:1000px){.style-preview-grid{grid-template-columns:repeat(3,1fr)}.style-preview-window iframe{transform:scale(.18)}@keyframes style-preview-pan{from{transform:scale(.18) translateY(0)}to{transform:scale(.18) translateY(-210px)}}}
@media(max-width:700px){
  .journey-line{display:grid!important;grid-template-columns:1fr auto;text-align:left;max-width:310px!important}.journey-line b:last-child{grid-column:1}.journey-line span:last-of-type{grid-row:3;grid-column:2}
  .style-preview-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 18px 10px;margin:0 -18px}.style-preview-card{flex:0 0 76vw;scroll-snap-align:center}.style-preview-window{height:210px}.style-preview-window iframe{transform:scale(.2)}
  @keyframes style-preview-pan{from{transform:scale(.2) translateY(0)}to{transform:scale(.2) translateY(-190px)}}
  .before-after-grid,.home-price-grid{grid-template-columns:1fr}.proof-window iframe{transform:scale(.25)}.home-price-card.featured{transform:none}
  .mobile-demo-cta{display:block;position:fixed;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:900;padding:14px 18px;border-radius:999px;background:#0877f9;color:#fff;text-align:center;text-decoration:none;font-weight:800;box-shadow:0 14px 36px rgba(8,119,249,.38)}
  footer{padding-bottom:92px!important}
}
@media(prefers-reduced-motion:reduce){.style-preview-window iframe{animation:none!important}}

/* Compact homepage pricing and contextual mobile handoff. */
/* Comparison cards: clear hierarchy, generous rows and a crisp blue focus. */
#compare .conv-row{max-width:1040px;gap:18px;overflow:visible;margin:0 auto}
#compare .opt-card{position:relative;text-align:left;padding:30px 26px;border-radius:22px;background:#fff;border:1px solid #e1e5ea;box-shadow:0 8px 30px rgba(23,32,31,.045);transition:transform .2s ease,box-shadow .2s ease}
#compare .opt-card h3{font-size:21px;letter-spacing:-.035em;line-height:1.2;min-height:28px;margin-bottom:12px}
#compare .opt-card p{font-size:14px;line-height:1.5;min-height:42px;color:#6b7482}
#compare .opt-card-hi{background:linear-gradient(145deg,#f7fbff,#e9f3ff);border:1px solid #9ec6ff;box-shadow:0 12px 35px rgba(8,119,249,.12)}
#compare .opt-card-hi::before{content:'';position:absolute;top:0;left:26px;right:26px;height:3px;background:#0877f9;border-radius:0 0 4px 4px}
#compare .opt-logo{display:block;width:180px;max-width:100%;height:auto;margin:0 0 16px}
#compare .opt-card-hi p{color:#10203b;font-weight:700}
#compare .opt-mini{display:flex;flex-direction:column;gap:16px;margin:20px 0 0;padding-top:22px;border-top:1px solid #e1e5ea;text-align:left}
#compare .opt-mini li{padding-left:27px;font-size:13px;line-height:1.5;color:#566172}
#compare .opt-mini li::before{top:1px;left:0;display:grid;place-items:center;width:18px;height:18px;background:#f0f2f5;border-radius:50%;font-size:11px;opacity:1;color:#9099a6}
#compare .opt-mini-pos li{color:#17243d;font-weight:600}
#compare .opt-mini-pos li::before{background:#0877f9;color:#fff}
#compare .opt-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(23,32,31,.09)}
.page #realperson{padding:0 0 36px}
.page #realperson .founder{max-width:1040px;margin-bottom:0}
@media(max-width:700px){
 #compare .conv-row{max-width:460px;gap:12px}
 #compare .opt-card{padding:22px}
 #compare .opt-card p{min-height:0}
 #compare .opt-mini{gap:10px;margin-top:15px;padding-top:15px}
 #compare .opt-card-hi{order:-1}
}
@media(prefers-reduced-motion:reduce){#compare .opt-card{transition:none}#compare .opt-card:hover{transform:none}}
.home-price-grid{grid-template-columns:repeat(2,1fr)}
.management-line{text-align:center;margin:22px auto 0;font-size:14px;color:var(--muted);line-height:1.7}
.management-line b{color:var(--ink)}
#handoffStatus{margin:0 auto 8px;max-width:780px;text-align:center;font-size:13px;color:#26344c;background:#fff}
#handoffStatus:empty{display:none}
@media(max-width:700px){
.home-price-grid{grid-template-columns:1fr}
.mobile-demo-cta{display:none}
.mobile-demo-cta.is-visible{display:block}
body.builder-scroll-lock .mobile-demo-cta{display:none}
body:has(.creating-overlay.active) .mobile-demo-cta{display:none}
}

/* Skeleton shimmer for lazy-loaded images (img-skeleton.js toggles
   .img-loaded once the image has actually finished loading). */
img[loading="lazy"]{background:linear-gradient(100deg,#ece7df 30%,#f7f4ef 50%,#ece7df 70%);
  background-size:200% 100%;animation:img-shimmer 1.4s ease-in-out infinite}
img[loading="lazy"].img-loaded{animation:none;background:none}
@keyframes img-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){img[loading="lazy"]{animation:none}}