:root{
    --bg:#f4f5f9; --surface:#ffffff; --surface-alt:#f0f1f6;
    --border:#e0e2ea; --border-light:#ecedf3;
    --text:#1e2233; --text-2:#4a4f6a; --text-3:#8b90a5;
    --navy:#1e2233; --navy-2:#262b42; --navy-3:#2f3552;
    --ink:#f5f6fa; --ink-2:#aab0c5; --ink-3:#6d7390;
    --accent:#7ebe31; --accent-dark:#5e9420; --accent-light:#eef7e2;
    --green:#00b075; --amber:#e5a100;
    --r:10px; --r-lg:14px;
    --ease:cubic-bezier(.4,0,.2,1);
    --font:'Plus Jakarta Sans','Plus Jakarta Sans Fallback',system-ui,sans-serif;
    --mono:'JetBrains Mono','JetBrains Mono Fallback',ui-monospace,monospace;
    --cream:#f3ecdc; --cream-2:#f1e8d4; --paper:#fbf7ee; --night:#141a2e; --lime-2:#b8f36b; --lime-ink:#3d6b12;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* The 64px header is sticky, so an anchor jump lands the section heading
     underneath it. The pad is the header plus a hairline of breathing room. */
  html{scroll-behavior:smooth;scroll-padding-top:72px}
  body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.55}
  img{max-width:100%;display:block}
  a{color:inherit}

  .wrap{max-width:1160px;margin:0 auto;padding:0 clamp(18px,4vw,32px)}

  /* ---------- top bar ---------- */
  .top{position:sticky;top:0;z-index:40;background:rgba(20,26,46,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(243,236,220,.08)}
  .top .wrap{display:flex;align-items:center;gap:28px;height:64px}
  .top img.logo{height:26px;filter:brightness(0) invert(1)}
  .top nav{display:flex;gap:26px;margin-left:auto}
  .top nav a{color:#b9bccb;font-size:13.5px;font-weight:600;text-decoration:none;transition:color .15s}
  .top nav a:hover{color:var(--cream)}
  .top .right{display:flex;align-items:center}
  .top .right .btn{padding:12px 20px;font-size:14px;border-radius:12px;font-weight:800;color:#0f1424}
  .btn{display:inline-block;background:var(--accent);color:#16220a;font-weight:800;font-size:14.5px;
    padding:11px 22px;border-radius:var(--r);text-decoration:none;border:0;cursor:pointer;
    transition:transform .15s var(--ease),background .15s;box-shadow:0 8px 22px rgba(126,190,49,.28)}
  .btn:hover{transform:translateY(-2px);background:#8bcb3e}
  .btn.big{font-size:16px;padding:15px 30px}
  .btn.ghost-d{background:none;box-shadow:none;color:var(--ink);border:1px solid rgba(255,255,255,.22);font-weight:700}
  .btn.ghost-d:hover{background:rgba(255,255,255,.07)}

  /* ---------- hero ---------- */
  .hero{background:var(--navy);color:var(--ink);overflow:hidden;position:relative}
  .hero::after{content:"";position:absolute;inset:0;
    background:radial-gradient(80% 60% at 24% 18%,rgba(126,190,49,.10),transparent 60%);pointer-events:none}
  .hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:clamp(28px,5vw,72px);align-items:center;padding-top:clamp(48px,8vh,96px);padding-bottom:clamp(48px,8vh,88px)}
  .kicker{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
  h1{font-size:clamp(34px,5vw,58px);font-weight:800;line-height:1.06;letter-spacing:-.015em;max-width:12em}
  .hero .sub{color:var(--ink-2);font-size:clamp(15px,1.6vw,17.5px);margin-top:22px;max-width:34em}
  .hero .sub b{color:var(--ink);font-weight:700}
  .hero .ctas{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;align-items:center}
  .hero .demoline{margin-top:18px;font-size:13.5px;color:var(--ink-3)}
  .hero .demoline a{color:var(--ink-2);font-family:var(--mono);font-weight:700;text-decoration:none;letter-spacing:.03em}
  .hero .demoline a:hover{color:var(--accent)}
  .trustrow{display:flex;gap:26px;margin-top:40px;flex-wrap:wrap}
  .trustrow div{font-size:12.5px;color:var(--ink-3)}
  .trustrow b{display:block;color:var(--ink);font-size:14px;font-weight:700;margin-bottom:2px}

  /* call card */
  .callcard{background:var(--navy-2);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-lg);
    padding:22px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
  .callcard .head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.07)}
  .callcard .head img{width:44px;height:44px;border-radius:50%;object-fit:cover}
  .callcard .head .who{font-weight:700;font-size:14px}
  .callcard .head .num{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.04em}
  .livepill{margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:rgba(0,176,117,.14);
    color:var(--green);border-radius:20px;padding:5px 12px;font-size:10.5px;font-weight:700;letter-spacing:.08em}
  .livepill i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.6s var(--ease) infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,176,117,.5)}55%{box-shadow:0 0 0 7px rgba(0,176,117,0)}}
  .callcard .line{margin-top:14px;display:flex;gap:10px;font-size:13.5px}
  .callcard .line .tag{flex:none;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-3);width:52px;padding-top:3px}
  .callcard .line.ai .tag{color:var(--accent)}
  .callcard .line p{color:var(--ink-2)}
  .callcard .line.ai p{color:var(--ink)}
  .callcard .booked{margin-top:16px;display:flex;align-items:center;gap:10px;background:rgba(126,190,49,.1);
    border:1px solid rgba(126,190,49,.25);border-radius:var(--r);padding:10px 14px;font-size:12.5px;font-weight:700}
  .callcard .booked .mono{font-family:var(--mono);color:var(--accent);font-weight:700;margin-left:auto;font-size:12px}
  /* The card plays itself in: the transcript arrives in order and the booking
     confirmation lands last, so the hero dramatises the product rather than
     decorating around it. Costs no bytes. */
  @keyframes cardline{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .callcard.play .line,.callcard.play .booked{opacity:0;animation:cardline .45s var(--ease) forwards;animation-delay:var(--d,0s)}
  @media (prefers-reduced-motion: reduce){
    .callcard.play .line,.callcard.play .booked{opacity:1;animation:none}
  }

  /* ---------- answer-first strip (AEO) ---------- */
  .answer{background:var(--navy-2);color:var(--ink-2);border-top:1px solid rgba(255,255,255,.05)}
  .answer .wrap{padding:18px 32px;font-size:13.5px;max-width:1160px}
  .answer b{color:var(--ink)}

  /* ---------- sections ---------- */
  section{padding:clamp(56px,9vh,104px) 0}
  .sechead{max-width:640px;margin-bottom:clamp(32px,5vh,56px)}
  .sechead .kicker{color:var(--accent-dark)}
  h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;line-height:1.12;letter-spacing:-.01em}
  .sechead p{color:var(--text-2);font-size:15.5px;margin-top:14px}

  /* meet the team */
  .team{background:var(--surface)}
  .cast{display:flex;gap:18px;flex-wrap:wrap}
  .cast figure{flex:1 1 132px;min-width:132px;max-width:190px}
  /* display:block kills the inline baseline gap <video> has but <img> did not.
     The background prevents a transparent flash on the frame where the poster
     is released and the first decoded frame arrives. */
  .cast img, .cast video{width:100%;aspect-ratio:1;object-fit:cover;
    border-radius:0 0 var(--r-lg) var(--r-lg);
    transition:transform .25s var(--ease);display:block;background:var(--navy-2)}
  .cast figure:hover img, .cast figure:hover video{transform:translateY(-6px)}
  .cast figcaption{margin-top:10px;font-size:12.5px;color:var(--text-3)}
  .cast figcaption b{display:block;color:var(--text);font-size:13.5px;font-weight:700}
  /* A portrait cannot say what the job is for. "The Host" means nothing to a
     restaurant owner who has not been told; the tab is what tells them. It sits
     ON TOP OF the art rather than over it — an overlay covered the top of every
     head — flush to the portrait so the two read as one card, and rides the
     same hover lift. The tab carries the top corners, the media the bottom. */
  .cast .tag{display:block;
    font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.05em;
    text-transform:uppercase;color:#fff;background:rgba(30,34,51,.88);
    padding:5px 4px;line-height:1.1;text-align:center;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    transition:transform .25s var(--ease)}
  .cast figure:hover .tag{transform:translateY(-6px)}

  /* alternating features */
  .feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;
    padding:clamp(28px,5vh,48px) 0}
  .feat.flip .art{order:2}
  /* Same reasoning as the cast row above: display:block kills the inline
     baseline gap a <video> has, and the background covers the single frame
     where the poster is released and the first decoded frame arrives. */
  .feat .art video{background:var(--surface-2,#eef0f6)}
  .feat .art img, .feat .art video{border-radius:var(--r-lg);box-shadow:0 24px 48px rgba(30,34,51,.14);
    width:100%;display:block;background:var(--surface-alt)}
  .feat h3{font-size:clamp(21px,2.4vw,27px);font-weight:800;line-height:1.15}
  .feat .body p{color:var(--text-2);font-size:15px;margin-top:12px;max-width:30em}
  .feat ul{margin-top:16px;list-style:none}
  .feat li{padding:7px 0 7px 26px;position:relative;font-size:14px;color:var(--text-2)}
  .feat li::before{content:"";position:absolute;left:2px;top:13px;width:14px;height:14px;border-radius:50%;
    background:var(--accent-light) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M3.5 7.5l2.5 2.5 4.5-5" stroke="%235e9420" stroke-width="2" fill="none" stroke-linecap="round"/></svg>') center/10px no-repeat}
  .feat li b{color:var(--text)}

  /* how it works */
  .how{background:var(--surface)}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:step}
  .step{position:relative;padding:26px 24px 24px;background:var(--bg);border:1px solid var(--border-light);border-radius:var(--r-lg)}
  .step::before{counter-increment:step;content:counter(step);position:absolute;top:-16px;left:22px;
    width:32px;height:32px;border-radius:50%;background:var(--accent);color:#16220a;font-weight:800;font-size:15px;
    display:grid;place-items:center;font-family:var(--mono)}
  .step h3{font-size:16.5px;font-weight:800;margin-top:4px}
  .step p{font-size:13.5px;color:var(--text-2);margin-top:8px}
  .how .aha{margin-top:34px;display:flex;align-items:center;gap:14px;background:var(--accent-light);
    border-radius:var(--r-lg);padding:18px 22px;font-size:14.5px}

  /* verticals */
  .verts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .vert{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/11;text-decoration:none}
  .vert img, .vert video{width:100%;height:100%;object-fit:cover;display:block;
    background:var(--surface-2,#eef0f6);transition:transform .35s var(--ease)}
  .vert:hover img, .vert:hover video{transform:scale(1.05)}
  .vert span{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;color:#fff;font-weight:800;font-size:14.5px;
    background:linear-gradient(transparent,rgba(20,23,36,.85))}

  /* pricing */
  .pricing{background:var(--navy);color:var(--ink)}
  .pricing .sechead .kicker{color:var(--accent)}
  .pricing .sechead p{color:var(--ink-2)}
  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
  .plan{border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column}
  .plan .nm{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
  .plan .price{font-family:var(--mono);font-weight:700;font-size:34px;margin-top:12px}
  .plan .price small{font-size:14px;color:var(--ink-3);font-family:var(--font);font-weight:600}
  .plan .note{font-size:12.5px;color:var(--ink-3);margin-top:4px}
  .plan ul{list-style:none;margin-top:18px;flex:1}
  .plan li{font-size:13.5px;color:var(--ink-2);padding:6px 0 6px 22px;position:relative}
  .plan li::before{content:"—";position:absolute;left:0;color:var(--ink-3)}
  .plan.fongo{background:var(--navy-2);border-color:rgba(126,190,49,.5);position:relative;box-shadow:0 26px 52px rgba(0,0,0,.3)}
  .plan.fongo .badge{position:absolute;top:-13px;left:24px;background:var(--accent);color:#16220a;
    font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:14px;padding:5px 12px}
  .plan.fongo .price{color:var(--accent)}
  .plan.fongo li::before{content:"✓";color:var(--accent)}
  .plan.fongo li{color:var(--ink)}
  .plan .btn{margin-top:20px;text-align:center}
  .pricing .fine{margin-top:26px;font-size:12.5px;color:var(--ink-3);max-width:56em}

  /* FAQ */
  .faq details{border-bottom:1px solid var(--border);padding:4px 0}
  .faq summary{cursor:pointer;font-weight:700;font-size:16px;padding:16px 30px 16px 0;list-style:none;position:relative}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:22px;color:var(--text-3);
    transition:transform .2s var(--ease)}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq details p{color:var(--text-2);font-size:14.5px;padding:0 0 18px;max-width:52em}

  /* final CTA + footer */
  .final{background:var(--surface);text-align:center}
  .final h2{max-width:16em;margin:0 auto}
  .final p{color:var(--text-2);margin:16px auto 30px;max-width:36em}
  footer{background:var(--navy);color:var(--ink-3);font-size:13px}
  footer .wrap{display:flex;align-items:center;gap:22px;padding:34px 32px;flex-wrap:wrap}
  footer img{height:22px;filter:brightness(0) invert(1);opacity:.85}
  footer nav{display:flex;gap:18px;flex-wrap:wrap}
  footer nav a{color:var(--ink-3);text-decoration:none}
  footer nav a:hover{color:var(--ink-2)}
  footer .co{margin-left:auto;max-width:36ch;text-align:right}

  /* reveal on scroll */
  .rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .rv.on{opacity:1;transform:none}
  @media (prefers-reduced-motion: reduce){
    .rv{opacity:1;transform:none;transition:none}
    html{scroll-behavior:auto}
    .cast img, .cast video, .cast figure:hover img, .cast figure:hover video{transition:none;transform:none}
    .cast .tag, .cast figure:hover .tag{transition:none;transform:none}
    .livepill i{animation:none}
  }

  /* responsive */
  @media(max-width:960px){
    .hero .wrap{grid-template-columns:1fr;gap:36px}
    .feat{grid-template-columns:1fr}
    .feat.flip .art{order:0}
    .steps{grid-template-columns:1fr}
    .plans{grid-template-columns:1fr}
    .verts{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:720px){
    /* The header nav fits down to 721px — measured. Hiding it at 960 took the
       whole site menu away from every tablet for no reason. Below 720 it does
       not fit and there is no room for a menu button either, so the footer
       carries every destination instead: nothing is unreachable, it is just
       further down. */
    .top nav{display:none}
    /* Desktop breathing room put 145px of empty navy above the first word and
       pushed the button onto the fold of a small phone. */
    .hero .wrap{padding-top:34px}
  }
  /* Thumb-sized. Keyed to the pointer, not the width: a tablet is a touch
     device at 1024px and a laptop can have a touchscreen, so sizing these by
     screen width left every one of them with 20px targets. The footer's new
     padding is traded against its old gap, so the words sit where they did. */
  @media (hover: none), (pointer: coarse){
    .top .wrap > a{display:inline-flex;align-items:center;min-height:44px}
    .top .signin{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
    /* The landing header's CTA is the only button up here on a phone once the
       nav is hidden, and 12px of padding left it under the thumb minimum. */
    .top .right .btn{min-height:44px;display:inline-flex;align-items:center}
    /* nowrap matters: min-width lets the nav shrink these boxes, and a 44px
       box breaks "How it works" onto two lines while min-height keeps the box
       44px tall — so the wrap is invisible to a height measurement. */
    .top nav{gap:0}
    .top nav a{display:inline-flex;align-items:center;justify-content:center;
      min-height:44px;min-width:44px;padding:0 11px;white-space:nowrap}
    .hero .demoline a{display:inline-block;padding:13px 0;min-height:44px}
    .hero .ctas a{min-height:44px}
    footer nav{gap:0}
    footer nav a{display:inline-flex;align-items:center;justify-content:center;
      min-height:44px;min-width:44px;padding:0 9px;white-space:nowrap}
  }

  /* ===== 2026-08-25 landing ===== */
  /* The homepage below the shared header, translated from the approved mock
     assets-recraft/landing-2026-08-25/full-page-v3.html (hero: hero-night-v9).
     Two translations were needed and are deliberate:
       · the mock's own token names (--navy2/--ink2/--lime2) are re-pointed at
         this file's (--navy/--text-2/--lime-2) — no duplicate palette;
       · rules whose selector would also reach for-restaurants.html and
         for-trades.html, which share this stylesheet, are scoped to
         body.landing. Anything named for a landing-only section stays bare.
     The hero's own nav is gone: the shared sticky .top header sits above it. */
  body.landing{background:var(--paper);color:var(--text)}
  .landing h2{font-size:clamp(34px,4vw,52px);line-height:1.02;letter-spacing:-.035em;font-weight:800}
  /* Was an inline style="margin-top:14px" on six headings. Inline margins
     cannot be overridden at a breakpoint, which is exactly how this project's
     phone layout broke before. */
  .landing .eyebrow + h2{margin-top:14px}
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime-ink)}
  .calls .sub,.cast .sub,.close .sub{font-size:18px;line-height:1.5;color:var(--text-2);max-width:52ch}

  /* ---------- 1 · hero ---------- */
  .hero-night{position:relative;overflow:hidden;isolation:isolate;padding:0;
    background:var(--night);color:var(--cream);min-height:720px;
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .hero-night video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 62%;z-index:-2}
  .hero-night .veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#141a2e 0%,#141a2e 30%,rgba(20,26,46,.62) 46%,rgba(20,26,46,.04) 70%,rgba(20,26,46,0) 100%)}
  .hero-night .veil:before{content:"";position:absolute;inset:0 0 auto 0;height:110px;background:linear-gradient(180deg,rgba(20,26,46,.9),rgba(20,26,46,0))}
  .hero-night .veil:after{content:"";position:absolute;inset:auto 0 0 0;height:180px;background:linear-gradient(180deg,rgba(20,26,46,0),#141a2e)}
  .hero-night .copy{padding:22px 44px 60px;align-self:end;position:relative;z-index:2}
  .hero-night .kick{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--lime-2);display:flex;align-items:center;gap:10px}
  .hero-night .kick b{width:7px;height:7px;border-radius:50%;background:var(--lime-2);box-shadow:0 0 0 5px rgba(184,243,107,.14)}
  .hero-night h1{font-size:clamp(40px,4.6vw,66px);line-height:.98;letter-spacing:-.04em;font-weight:800;margin:18px 0 0;max-width:11ch}
  .hero-night h1 span{color:#8f93a8;font-weight:700}
  .hero-night .lede{font-size:17px;line-height:1.5;color:#b9bccb;max-width:42ch;margin:20px 0 0}
  .hero-night .num{margin-top:30px;display:inline-flex;align-items:stretch;border:1.5px solid rgba(243,236,220,.22);border-radius:16px;overflow:hidden}
  .hero-night .num .n{padding:16px 22px;font-family:var(--mono);font-size:clamp(26px,2.6vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1;min-width:0}
  .hero-night .num .n small{display:block;font-size:10.5px;letter-spacing:.16em;color:#8f93a8;margin-top:8px;font-family:var(--font);font-weight:700}
  /* The mock drew this as a <div>; it is a real tel: link now, so it has to be
     told not to look like one. */
  .hero-night .num .call{display:flex;align-items:center;justify-content:center;padding:0 22px;background:var(--cream);color:var(--night);font-weight:800;font-size:14px;text-decoration:none;white-space:nowrap}
  .hero-night .ctas{margin-top:22px;display:flex;align-items:center;gap:16px;font-size:13px;color:#8f93a8;flex-wrap:wrap}
  .hero-night .side{position:relative;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 44px 60px}
  .hero-night .sms{background:var(--cream);color:var(--text);border-radius:14px;padding:14px 16px;width:300px;box-shadow:0 30px 60px rgba(0,0,0,.45);position:relative;z-index:2}
  .hero-night .sms .h{font-size:10.5px;letter-spacing:.14em;font-weight:800;color:var(--text-3);display:flex;justify-content:space-between}
  .hero-night .sms p{margin:8px 0 0;font-size:13.5px;line-height:1.45}
  /* The hero's copy arrives once, on load. */
  @keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  .hero-night .r{animation:up .9s cubic-bezier(.16,1,.3,1) both}
  .hero-night .r:nth-child(2){animation-delay:.08s}
  .hero-night .r:nth-child(3){animation-delay:.16s}
  .hero-night .r:nth-child(4){animation-delay:.26s}
  .hero-night .r:nth-child(5){animation-delay:.36s}
  /* The props breathe on a closed loop: every keyframe track returns to its
     0% value at 100%, so the loop restarts without a jump and never needs a
     reversed second pass. */
  @keyframes drift{0%{transform:translate(0,0) rotate(var(--rot))}25%{transform:translate(5px,-9px) rotate(calc(var(--rot) + 2deg))}50%{transform:translate(0,-15px) rotate(var(--rot))}75%{transform:translate(-5px,-9px) rotate(calc(var(--rot) - 2deg))}100%{transform:translate(0,0) rotate(var(--rot))}}
  .hero-night .prop{position:absolute;z-index:1;filter:brightness(.78) saturate(.85) drop-shadow(0 18px 22px rgba(0,0,0,.5));animation:drift var(--d,7s) cubic-bezier(.45,0,.55,1) infinite;animation-delay:var(--o,0s);--rot:0deg}
  .hero-night .prop img{display:block;width:100%;height:auto}
  .hero-night .p4{left:48%;top:29%;width:82px;--rot:14deg;--d:8.5s;--o:-5s}
  .hero-night .p3{left:54.5%;top:19%;width:92px;--rot:-8deg;--d:7.5s;--o:-1.5s}
  .hero-night .p1{left:62.5%;top:20%;width:132px;--rot:-12deg;--d:8s}
  .hero-night .p5{left:72.5%;top:29%;width:104px;--rot:5deg;--d:9.5s;--o:-2s}
  .hero-night .p2{left:81.5%;top:41%;width:80px;--rot:8deg;--d:9s;--o:-3s}

  /* ---------- 2 · every call ---------- */
  .calls{padding:96px 0 80px}
  .calls .head{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end;margin-bottom:44px}
  .calls .grid{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto;gap:18px}
  .log{grid-row:1/3;background:var(--navy);color:var(--cream);border-radius:20px;padding:26px 26px 22px;position:relative;overflow:hidden}
  .log .h{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.14em;font-weight:800;color:#8f93a8;margin-bottom:18px}
  .log .h b{color:var(--lime-2)}
  .tr{font-family:var(--mono);font-size:13.5px;line-height:1.5;padding:11px 14px;border-radius:12px;margin:9px 0;max-width:84%}
  .tr.ai{background:rgba(184,243,107,.12);color:var(--cream)}
  .tr.c{background:rgba(243,236,220,.1);margin-left:auto;color:#d9d4c6}
  .tr:before{display:block;font-size:9px;letter-spacing:.14em;margin-bottom:4px;font-family:var(--font);font-weight:800}
  .tr.ai:before{content:"AVA";color:var(--lime-2)}
  .tr.c:before{content:"CALLER";color:#8f93a8}
  .log .foot{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(243,236,220,.18);display:flex;gap:12px;align-items:center;font-size:13px;color:#b9bccb}
  .log .foot i{font-style:normal;background:var(--accent);color:#0f1424;border-radius:6px;padding:4px 8px;font-size:10px;font-weight:800;letter-spacing:.1em;flex:none}
  .out{border:1.5px solid #e6dfcc;background:var(--surface);border-radius:20px;padding:24px;display:flex;gap:18px;align-items:flex-start}
  .out .ic{width:44px;height:44px;border-radius:12px;background:var(--cream-2);display:grid;place-items:center;font-size:20px;flex:none}
  .out h3{font-size:19px;letter-spacing:-.02em;margin-bottom:6px}
  .out p{font-size:14.5px;line-height:1.5;color:var(--text-2)}
  .out .tag{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--lime-ink);background:var(--accent-light);border-radius:6px;padding:4px 8px}

  /* ---------- 3 · three steps ---------- */
  /* display:block resets the stale .steps grid above, which belonged to a page
     this stylesheet no longer serves. */
  .steps{display:block;background:var(--cream-2);padding:0;overflow:hidden}
  .steps .in{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;padding:88px 0 0}
  .steps ol{list-style:none;counter-reset:s;margin-top:36px}
  .steps li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:18px;padding:22px 0;border-top:1.5px solid #e2d8c2}
  .steps li:before{content:"0" counter(s);font-family:var(--mono);font-size:26px;font-weight:700;color:var(--lime-ink);line-height:1}
  .steps li h3{font-size:20px;letter-spacing:-.02em;margin-bottom:6px}
  .steps li p{font-size:15px;line-height:1.5;color:var(--text-2)}
  .steps .art{position:relative}
  .steps .art img{width:100%;display:block;border-radius:20px}
  .steps .art .note{position:absolute;left:-18px;bottom:28px;background:var(--navy);color:var(--cream);border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.4;width:250px;box-shadow:0 18px 40px rgba(30,34,51,.25)}
  .steps .art .note b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--lime-2);margin-bottom:4px}
  .steps .band{margin-top:64px;line-height:0}
  .steps .band img{width:100%;display:block}

  /* ---------- 4 · tuned by trade ---------- */
  /* display:block resets the stale .cast flex row above. */
  .cast{display:block;padding:96px 0 40px}
  .cast .head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:36px}
  .cast .sub{max-width:40ch}
  .cast .row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
  .cast .card{border-radius:16px;overflow:hidden;background:var(--surface);border:1.5px solid #e6dfcc}
  /* In flow, above the portrait — never position:absolute. An absolute overlay
     cropped the top of every persona's head once already. */
  .cast .tab{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;padding:9px 12px;background:var(--navy);color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cast .card img{width:100%;display:block;aspect-ratio:1;object-fit:cover;border-radius:0}
  .cast .card .who{padding:12px 14px 14px}
  .cast .card .who b{display:block;font-size:14.5px;letter-spacing:-.01em}
  .cast .card .who span{font-size:12.5px;color:var(--text-3)}

  /* ---------- 5 · honest math ---------- */
  .math{padding:80px 0 96px}
  .math .in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .math .big{font-family:var(--mono);font-size:clamp(72px,8.6vw,118px);font-weight:700;letter-spacing:-.05em;line-height:.9;color:var(--text)}
  .math .big small{font-family:var(--font);font-size:20px;letter-spacing:-.01em;color:var(--text-2);font-weight:700;margin-left:10px}
  .ledger{margin-top:26px;border-top:1.5px solid #e6dfcc}
  .ledger div{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1.5px solid #e6dfcc;font-size:15.5px}
  .ledger div b{font-family:var(--mono);font-weight:700;font-size:20px;white-space:nowrap;margin-left:16px}
  .ledger div.x{color:var(--text-3)}
  .ledger div.x b{text-decoration:line-through;text-decoration-color:#dc2626;text-decoration-thickness:2px;color:var(--text-2)}
  .ledger div.me{color:var(--text)}
  .ledger div.me b{color:var(--lime-ink)}
  .math .inc{list-style:none;margin-top:26px;display:grid;gap:10px}
  .math .inc li{padding-left:28px;position:relative;font-size:15.5px;line-height:1.45}
  .math .inc li:before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:inset 0 0 0 4px #fff,0 0 0 1.5px var(--accent)}
  /* Was an inline style on the paragraph holding the trial button. */
  .math .inc + p{margin-top:22px}
  .math .fine{margin-top:22px;font-size:13px;color:var(--text-3);line-height:1.5}

  /* ---------- 6 · FAQ ---------- */
  /* Scoped: for-restaurants.html and for-trades.html have their own .faq that
     this stylesheet already styles above. The position/transform resets undo
     that older rule's absolutely-placed "+" marker, which would otherwise
     survive into the landing page's flex summary row. */
  .landing .faq{background:var(--surface);border-top:1.5px solid #e6dfcc;border-bottom:1.5px solid #e6dfcc;padding:88px 0}
  .landing .faq .in{display:grid;grid-template-columns:1fr 1.4fr;gap:56px}
  .landing .faq details{border-bottom:1.5px solid #e6dfcc;padding:18px 0}
  .landing .faq summary{cursor:pointer;font-size:18px;font-weight:700;letter-spacing:-.015em;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:0}
  .landing .faq summary:after{content:"+";position:static;font-family:var(--mono);color:var(--lime-ink);font-size:20px;transform:none}
  .landing .faq details[open] summary:after{content:"–";transform:none}
  .landing .faq details p{margin-top:10px;padding:0;font-size:15px;line-height:1.55;color:var(--text-2);max-width:60ch}

  /* ---------- 7 · close ---------- */
  .close{background:var(--night);color:var(--cream);padding:96px 0;position:relative;overflow:hidden}
  .close .in{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;position:relative;z-index:1}
  .close h2{color:var(--cream)}
  .close .sub{color:#b9bccb;margin-top:18px}
  .close .eyebrow{color:var(--lime-2)}
  /* A tel: link, not the mock's <div>. */
  .close .num{margin-top:28px;display:inline-flex;align-items:center;gap:14px;border:1.5px solid rgba(243,236,220,.22);border-radius:14px;padding:12px 18px;font-family:var(--mono);font-size:22px;font-weight:700;color:inherit;text-decoration:none;flex-wrap:wrap}
  .close .num small{font-family:var(--font);font-size:11px;letter-spacing:.14em;color:#8f93a8;font-weight:700}
  .form{background:var(--cream);color:var(--text);border-radius:20px;padding:26px;box-shadow:0 30px 70px rgba(0,0,0,.4)}
  .form label,.form .lbl{display:block;font-size:11px;letter-spacing:.14em;font-weight:800;color:var(--text-3);margin:0 0 8px}
  .form .inp{width:100%;background:var(--surface);border:1.5px solid #e0d7c2;border-radius:12px;padding:14px 16px;font-family:var(--font);font-size:16px;color:var(--text);margin-bottom:18px}
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
  .chips .chip{border:1.5px solid #e0d7c2;background:var(--surface);color:var(--text);border-radius:20px;padding:8px 14px;font-family:var(--font);font-size:13.5px;font-weight:600;cursor:pointer}
  .chips .chip.on{background:var(--navy);color:var(--cream);border-color:var(--navy)}
  .form .btn{width:100%;text-align:center}
  .form .fine{text-align:center;font-size:12.5px;color:var(--text-3);margin-top:12px}

  /* ---------- landing: motion and layout guards ---------- */
  @media (prefers-reduced-motion: reduce){
    .hero-night .prop{animation:none}
    .hero-night .r{animation:none}
  }
  @media(max-width:960px){
    .hero-night h1{max-width:14ch}
    /* .faq keeps its body.landing scope here too, or the scoped two-column
       rule above would out-specify this one and never stack. */
    .calls .grid,.steps .in,.math .in,.landing .faq .in,.close .in{grid-template-columns:1fr}
    .calls .head{grid-template-columns:1fr;gap:18px}
    .cast .head{flex-direction:column;align-items:flex-start;gap:18px}
    .cast .row{grid-template-columns:repeat(3,1fr)}
  }
  @media(max-width:720px){
    .hero-night{grid-template-columns:1fr;min-height:0}
    /* min-width:0 or the single 1fr track takes its minimum from the number
       pill's min-content — measured 415px against a 375px phone, and the
       hero's overflow:hidden then quietly sliced 40px off every line of copy
       rather than showing a scrollbar. */
    .hero-night .copy,.hero-night .side{min-width:0}
    .hero-night .veil{background:linear-gradient(180deg,rgba(20,26,46,.55) 0%,rgba(20,26,46,.92) 55%,#141a2e 100%)}
    /* 200px here was a screenful of empty navy above the first word — the same
       defect the vertical pages' .hero .wrap was trimmed for, reopened on the
       page most people land on. The copy starts just below the sticky header
       and the video keeps running full-bleed behind it. */
    .hero-night .copy{padding:32px 20px 40px}
    .hero-night .num{display:flex;width:100%}
    /* The number is one unbreakable mono token; at the desktop size it cannot
       share 335px with the button. */
    .hero-night .num .n{flex:1;font-size:20px;padding:14px 16px}
    .hero-night .num .call{min-height:44px;padding:0 16px}
    .hero-night .side{padding:0 20px 40px;justify-content:flex-start}
    .hero-night .sms{width:100%}
    /* The props floated in the 200px void the rule above just closed. Four of
       the five now have nowhere to be that is not on top of the headline, so
       one survives: parked in the corner beside the short kick line, clear of
       h1's 14ch measure. */
    .hero-night .p2,.hero-night .p3,.hero-night .p4,.hero-night .p5{display:none}
    .hero-night .p1{left:auto;right:14px;top:10px;width:72px}
    .cast .row{grid-template-columns:repeat(2,1fr)}
    .chips .chip{min-height:44px}
    .form .btn{min-height:48px}
  }
  /* Same rule as the header and footer links above: thumb targets are keyed to
     the pointer, because a tablet is a touch device at 1024px. */
  @media (hover: none), (pointer: coarse){
    .hero-night .num .call{min-height:44px}
    .chips .chip{min-height:44px}
    .form .btn{min-height:48px}
  }

  /* ---------- pause motion (WCAG 2.2.2) ---------- */
  html[data-motion="paused"] *, html[data-motion="paused"] *::before, html[data-motion="paused"] *::after{animation-play-state:paused !important}
  html[data-motion="paused"]{scroll-behavior:auto}
  /* Paused mid-entrance (data-motion is set in <head>, before the "up" keyframe
     ever runs) freezes at the 0% frame — opacity:0 — unless the paused state
     also gets animation:none, same as the prefers-reduced-motion block above. */
  html[data-motion="paused"] .hero-night .r{animation:none}
  html[data-motion="paused"] .hero-night .prop{animation:none}
  html[data-motion="paused"] .livepill i{animation:none}
  .motion-toggle{margin-top:14px;background:transparent;border:1px solid rgba(255,255,255,.25);color:inherit;border-radius:8px;padding:8px 12px;font:inherit;font-size:13px;cursor:pointer;min-height:44px}
  .motion-toggle:hover,.motion-toggle:focus-visible{border-color:var(--accent,#7ebe31);outline:none}
  .motion-toggle:focus-visible{box-shadow:0 0 0 2px var(--accent,#7ebe31)}