/* Lorne & Vale · design system v8 ("intake infrastructure")
   One file for the rebuilt pages. Legacy pages load it after site.css, so the
   shared chrome (nav, footer, buttons) uses the same class names and wins.
   Monochrome ink on white, one accent blue reserved for the primary action and
   product state. Colour otherwise lives only inside product imagery. */

:root{
  --bg:#ffffff; --soft:#f5f5f7; --soft2:#ebebef;
  --ink:#1d1d1f; --ink2:#515154; --ink3:#6b6b70;
  --line:#d2d2d7; --line2:#e6e6ea;
  --dbg:#000000; --dsoft:#0f0f10; --dcard:#1c1c1e; --dink:#f5f5f7; --dink2:#a1a1a6; --dink3:#8e8e93; --dline:#2c2c2e;
  --acc:#0071e3; --acc-ink:#0a5fc2; --acc-soft:#e8f1fd;
  --hot:#d70015; --warm:#c93400; --good:#248a3d;
  /* Text-safe variants: the status greens and reds are tuned for dots and
     bars; as text on the soft grey they fall below 4.5:1. */
  --good-ink:#1a6b2f;
  --r-xl:32px; --r-lg:24px; --r-md:16px; --r-sm:10px; --pill:999px;
  --sh-1:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
  --sh-2:0 2px 6px rgba(0,0,0,.05),0 24px 64px rgba(0,0,0,.12);
  --sh-3:0 40px 120px rgba(0,0,0,.18),0 10px 30px rgba(0,0,0,.08);
  --wrap:1180px; --wrap-w:1360px; --wrap-n:720px;
  --ff:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --nav-h:56px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--ff);color:var(--ink);background:var(--bg);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:6px}
::selection{background:#1d1d1f;color:#fff}
.dk ::selection{background:#f5f5f7;color:#000}
.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}
.skip{position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:10px 16px;z-index:99;border-radius:0 0 8px 0}
.skip:focus{left:0}
[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.wrap--w{max-width:var(--wrap-w)}
.wrap--n{max-width:var(--wrap-n)}
.sec{padding:clamp(72px,10vw,140px) 0}
.sec--tight{padding:clamp(48px,7vw,88px) 0}
.sec--soft{background:var(--soft)}
.sec--flush-b{padding-bottom:0}
.dk{background:var(--dbg);color:var(--dink)}
.center{text-align:center}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}.mt-56{margin-top:56px}
.grid{display:grid;gap:16px}
.grid>*{min-width:0}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

/* ---------- Type ---------- */
.h1{font-size:clamp(2.55rem,6.2vw,5.2rem);line-height:1.02;letter-spacing:-.034em;font-weight:700;text-wrap:balance}
.h2{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.05;letter-spacing:-.028em;font-weight:700;text-wrap:balance}
.h3{font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.15;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
.h4{font-size:1.125rem;line-height:1.3;letter-spacing:-.012em;font-weight:600}
.lead{font-size:clamp(1.125rem,1.7vw,1.375rem);line-height:1.45;color:var(--ink2);letter-spacing:-.012em;text-wrap:pretty}
.dk .lead{color:var(--dink2)}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:18px}
.dk .eyebrow{color:var(--dink3)}
.eyebrow--acc{color:var(--acc)}
.muted{color:var(--ink2)}.dk .muted{color:var(--dink2)}
.small{font-size:14px;line-height:1.5;color:var(--ink3)}.dk .small{color:var(--dink3)}
.fine{font-size:13px;line-height:1.55;color:var(--ink3);text-wrap:pretty}
.mono{font-family:var(--mono);font-size:.88em;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
p+p{margin-top:12px}
.sec-head{max-width:760px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
.sec-head--l{margin-left:0;text-align:left}
.sec-head .lead{margin-top:18px}
.measure{max-width:62ch}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:var(--pill);
  font-size:16px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  transition:background .2s,color .2s,box-shadow .2s,transform .2s var(--ease)}
.btn:active{transform:scale(.98)}
.btn--p{background:var(--acc);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08),0 10px 24px rgba(0,113,227,.22)}
.btn--p:hover{background:var(--acc-ink)}
.btn--s{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--s:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#000}
.btn--lg{min-height:56px;padding:0 30px;font-size:17px}
.btn--sm{min-height:40px;padding:0 16px;font-size:14px}
.btn svg{width:16px;height:16px;flex:none}
.dk .btn--s{color:var(--dink);box-shadow:inset 0 0 0 1.5px rgba(245,245,247,.35)}
.dk .btn--s:hover{box-shadow:inset 0 0 0 1.5px #f5f5f7}
.dk .btn--ink{background:#f5f5f7;color:#000}
.cta-row{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.cta-row--l{justify-content:flex-start}
.cta-note{font-size:13.5px;color:var(--ink3);margin-top:14px}
.dk .cta-note{color:var(--dink3)}
/* Link text uses the darker accent: the button blue reaches only 4.31:1 on
   the soft grey sections, below the 4.5:1 needed for body-sized text. */
.link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--acc-ink);letter-spacing:-.01em}
.link svg{width:9px;height:14px;flex:none;transition:transform .2s}
.link:hover svg{transform:translateX(2px)}
.link--ink{color:var(--ink)}
.dk .link--ink{color:var(--dink)}
p a:not(.btn):not(.link),li a:not(.btn):not(.link){text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
p a:not(.btn):not(.link):hover{text-decoration-color:currentColor}

/* ---------- Nav (light, translucent, condensing) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,0);transition:border-color .25s,background .25s}
html.is-scrolled .nav{border-bottom-color:var(--line2);background:rgba(255,255,255,.86)}
.nav__in{max-width:var(--wrap-w);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));height:var(--nav-h);display:flex;align-items:center;gap:22px}
.nav__brand{font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--ink);display:inline-flex;align-items:center;gap:10px}
.nav__links{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav__links a{font-size:14px;font-weight:500;color:var(--ink2);transition:color .2s}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--ink)}
.nav__links a.nav__cta{color:#fff}
.nav__login{color:var(--ink3)!important}
.nav__cta{background:var(--ink);color:#fff!important;border-radius:var(--pill);padding:8px 16px;font-weight:600!important;font-size:13.5px!important;transition:background .2s}
.nav__cta:hover{background:#000}
.nav__lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--pill);border:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--ink3);letter-spacing:.04em;margin-left:8px}
.nav__lang span{padding:4px 8px;border-radius:var(--pill)}
.nav__lang span.is-on{background:var(--ink);color:#fff}
.nav__burger{display:none;position:relative;width:44px;height:44px;margin-left:auto;border-radius:12px}
.nav__burger span{position:absolute;left:12px;right:12px;height:1.6px;background:var(--ink);transition:transform .25s,opacity .2s;border-radius:2px}
.nav__burger span:nth-child(1){top:18px}.nav__burger span:nth-child(2){top:25px}
.is-open .nav__burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.is-open .nav__burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:900px){
  .nav__burger{display:block}
  .nav__links{display:none;position:fixed;top:var(--nav-h);right:0;left:0;height:calc(100dvh - var(--nav-h));background:#fff;flex-direction:column;align-items:stretch;padding:14px 20px calc(24px + env(safe-area-inset-bottom));gap:0;border-top:1px solid var(--line2);z-index:55;overflow-y:auto}
  .nav__links a{font-size:19px;font-weight:600;color:var(--ink);padding:16px 4px;border-bottom:1px solid var(--line2)}
  .nav__links a.nav__login{color:var(--ink2)!important;font-weight:500}
  .is-open .nav__links{display:flex}
  .nav__links .nav__cta{margin-top:auto;border-bottom:0;text-align:center;padding:16px 22px;font-size:17px!important;border-radius:var(--pill);background:var(--acc)}
}
/* dark hero pages can invert the chrome */
.nav--dk{background:rgba(0,0,0,.6)}
.nav--dk .nav__brand,.nav--dk .nav__links a,.nav--dk .nav__burger span{color:#f5f5f7;background-color:transparent}
.nav--dk .nav__burger span{background:#f5f5f7}
.nav--dk .nav__links a.nav__cta{background-color:#f5f5f7;color:#000!important}
html.is-scrolled .nav--dk{background:rgba(0,0,0,.78);border-bottom-color:var(--dline)}

/* ---------- Chips and pills ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:var(--pill);padding:5px 12px;font-size:13px;font-weight:500;color:var(--ink);background:#fff;white-space:nowrap;max-width:100%}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink3);flex:none}
.chip--plain::before{display:none}
.chip--acc::before{background:var(--acc)}
.chip--hot::before{background:var(--hot)}
.chip--good::before{background:var(--good)}
.chip--ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip--ink::before{background:#fff}
.dk .chip{background:rgba(255,255,255,.06);border-color:var(--dline);color:var(--dink)}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chiprow--l{justify-content:flex-start}

/* ---------- Trust strip ---------- */
.trust{display:flex;gap:10px 28px;flex-wrap:wrap;justify-content:center;align-items:center;font-size:13.5px;color:var(--ink3);font-weight:500}
.trust li{list-style:none;display:inline-flex;align-items:center;gap:8px}
.trust svg{width:15px;height:15px;color:var(--ink2);flex:none}
.dk .trust{color:var(--dink3)}
.dk .trust svg{color:var(--dink2)}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--line2);border-radius:var(--r-lg);padding:clamp(22px,3vw,30px)}
.sec--soft .card{border-color:#e2e2e6}
.card h3{margin-bottom:8px}
.card p{font-size:15.5px;line-height:1.55;color:var(--ink2)}
.card--soft{background:var(--soft);border-color:transparent}
.dk .card{background:var(--dcard);border-color:var(--dline)}
.dk .card p{color:var(--dink2)}
.ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--soft);color:var(--ink);margin-bottom:16px}
.ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dk .ic{background:rgba(255,255,255,.08);color:var(--dink)}

/* ---------- Product presentation ---------- */
/* Web platform: the app carries its own chrome, so the frame is only depth. */
.win{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#f5f5f7;border:1px solid rgba(0,0,0,.08);box-shadow:var(--sh-2)}
.win img{width:100%;height:auto;display:block}
.win--flat{box-shadow:var(--sh-1)}
.win--hero{box-shadow:var(--sh-3)}
.dk .win{border-color:rgba(255,255,255,.12);box-shadow:0 50px 140px rgba(0,0,0,.6)}
/* Deliberate crop: show a region of a taller capture. --ar sets the aspect, --y the focus. */
/* ---------- Framing a product screenshot ----------
   The frame states an aspect ratio; the image covers it and is anchored by
   --x/--y, which read as "this point of the picture sits at this point of the
   frame" (0% left/top, 100% right/bottom). Cover guarantees the frame is
   always filled: the previous model translated the image by a percentage of
   its own size, so a tall crop left an empty band under the picture and a
   wide one cut through the content. --s zooms further from the same anchor. */
.crop,.zoom{position:relative;overflow:hidden;aspect-ratio:var(--ar,16/10);background:var(--soft)}
.crop img,.zoom img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--x,50%) var(--y,50%);
  transform:scale(var(--s,1));transform-origin:var(--x,50%) var(--y,50%)}
/* Zoom: scale a capture so a region is readable; --s scale, --x/--y offsets in % of the image */

/* iPhone: the frame is baked into the image (transparent corners), so the element only sizes it. */
.phone{position:relative;width:var(--pw,300px);max-width:100%;flex:none}
.phone img{width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.28))}
.phone--sm{--pw:240px}
.phone--lg{--pw:360px}
.phone--xl{--pw:400px}
.dk .phone img{filter:drop-shadow(0 30px 80px rgba(0,0,0,.7))}
.figcap{font-size:13px;color:var(--ink3);text-align:center;margin-top:14px}
.dk .figcap{color:var(--dink3)}

/* ---------- Hero ---------- */
.hero{padding:calc(var(--nav-h) + clamp(44px,7vw,96px)) 0 0;background:linear-gradient(180deg,#fff 0%,#fff 55%,var(--soft) 100%);overflow:hidden}
.hero__copy{max-width:860px;margin:0 auto;text-align:center}
.hero__copy .lead{max-width:640px;margin:22px auto 0}
.hero__cta{margin-top:30px}
.hero__stage{position:relative;max-width:var(--wrap-w);margin:clamp(44px,6vw,72px) auto 0;padding:0 max(20px,env(safe-area-inset-left)) 0 max(20px,env(safe-area-inset-right))}
.stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:end}
.stage__win{position:relative;z-index:1;width:min(100%,1120px);margin:0 auto;border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;background:#f5f5f7;border:1px solid rgba(0,0,0,.08);border-bottom:0;box-shadow:var(--sh-3)}
.stage__win.zoom{aspect-ratio:var(--ar,16/9)}
.stage__win img{width:100%;height:auto;display:block}
.stage__phone{position:absolute;right:max(0px,calc((100% - 1120px)/2 - 40px));bottom:-24px;z-index:2;--pw:clamp(200px,20vw,300px)}
.stage__phone img{filter:drop-shadow(0 40px 80px rgba(0,0,0,.35))}
/* the sequence rail: the timeline of one enquiry */
.seq{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:0 auto clamp(20px,3vw,30px);padding:0;list-style:none}
.seq li{display:contents}
.seq button{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;border-radius:var(--pill);border:1px solid var(--line2);background:#fff;cursor:pointer;font:inherit;font-size:13px;font-weight:500;color:var(--ink3);transition:color .35s,border-color .35s,background .35s}
.seq time{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink2);background:var(--soft);border-radius:6px;padding:2px 6px}
.seq button.is-on{color:var(--ink);border-color:var(--ink);background:#fff}
.seq button.is-on time{background:var(--ink);color:#fff}
.seq button.is-done{color:var(--ink2)}
.seq button.is-done time{color:var(--ink)}
.seq button i{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none;transition:background .35s}
.seq button.is-on i{background:var(--acc)}
.seq button.is-done i{background:var(--ink)}

/* ---------- The stage follows the sequence ----------
   Each step of the rail shows the product moment it names: the window
   cross-fades between the list, the brief and the board, and the phone comes
   forward for the two steps that happen on it. Layers declare the steps they
   belong to in the markup, so the mapping is readable where the images are. */
.stage__win .lay{position:absolute;inset:0;display:block;opacity:0;
  transition:opacity .55s cubic-bezier(.16,1,.3,1)}
.stage__win .lay.is-on{opacity:1}
.stage__phone{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.stage__phone img.lay{opacity:0;transition:opacity .5s cubic-bezier(.16,1,.3,1)}
.stage__phone img.lay.is-on{opacity:1}
.stage__phone img.lay + img.lay{position:absolute;inset:0;width:100%;height:auto}
.stage[data-step="3"] .stage__phone,.stage[data-step="4"] .stage__phone{transform:translateY(-16px) scale(1.05)}
@media (prefers-reduced-motion: reduce){
  .stage__win .lay,.stage__phone,.stage__phone img.lay{transition:none}
  .stage[data-step="3"] .stage__phone,.stage[data-step="4"] .stage__phone{transform:none}
}
@media (max-width:760px){
  .hero{padding-top:calc(var(--nav-h) + 30px)}
  .hero__cta .btn{width:100%;max-width:380px}
  .hero__stage{margin-top:34px}
  .stage{display:block}
  .stage__win{border-radius:18px 18px 0 0}
  /* The frame stays on a phone, at its own ratio: layers of different heights
     would otherwise resize the stage under the reader's thumb as the sequence
     moves. --mar --ms --mx --my let a layer be framed tighter here. */
  .stage__win.zoom{aspect-ratio:var(--mar,4/3)}
  .stage__win.zoom img{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:var(--mx,var(--x,50%)) var(--my,var(--y,50%));
    transform:scale(var(--ms,1));transform-origin:var(--mx,var(--x,50%)) var(--my,var(--y,50%))}
  .stage__win .lay{position:absolute}
  /* A desktop screenshot reduced to a phone's width cannot be read, and every
     other section already answers this by showing the iPhone instead. The hero
     does the same: below this width the phone is the whole stage, at a size
     where its interface is legible, and it carries the sequence on its own. */
  .stage__win{display:none}
  .stage__phone{position:relative;right:auto;bottom:auto;margin:0 auto;--pw:min(76vw,340px)}
  .stage[data-step="3"] .stage__phone,.stage[data-step="4"] .stage__phone{transform:none}
  .trust{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;justify-items:start;font-size:13px;max-width:400px;margin-left:auto;margin-right:auto}
  .seq{gap:5px}
  .seq button{font-size:12px;padding:6px 10px 6px 8px}
}
@media (max-width:420px){.seq button span{display:none}.seq button{padding:6px 8px}}

/* ---------- Enquiry (the incoming message) ---------- */
.enq{width:100%;background:#fff;border:1px solid var(--line2);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;text-align:left;max-width:560px;margin:0 auto}
.enq__hd{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line2);background:var(--soft)}
.enq__av{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.enq__who{min-width:0;flex:1}
.enq__who b{display:block;font-size:15px;letter-spacing:-.01em}
.enq__who span{display:block;font-size:13px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enq__t{font-family:var(--mono);font-size:12.5px;color:var(--ink2);font-variant-numeric:tabular-nums;flex:none}
.enq__body{padding:18px 20px;font-size:15.5px;line-height:1.55;color:var(--ink2)}
.enq__body b{color:var(--ink);font-weight:600;display:block;margin-bottom:6px}
.enq__ft{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--line2);font-size:12.5px;color:var(--ink3)}
.enq__ft .chip{font-size:12px;padding:4px 10px;white-space:normal;text-align:left}

/* ---------- Beats (three-step promise) ---------- */
.beats{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.beat{background:#fff;border:1px solid var(--line2);border-radius:var(--r-lg);padding:clamp(22px,3vw,28px)}
.beat__n{font-family:var(--mono);font-size:12px;color:var(--ink3);letter-spacing:.06em}
.beat h3{margin-top:14px;font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.2;letter-spacing:-.018em}
.beat p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--ink2)}
@media (max-width:820px){.beats{grid-template-columns:1fr}}

/* ---------- Feature story (copy + product) ---------- */
.story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.story--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.story--flip .story__copy{order:2}
.story__copy .h2{font-size:clamp(1.85rem,3.4vw,2.7rem)}
.story__copy .lead{margin-top:16px;font-size:clamp(1.05rem,1.4vw,1.2rem)}
.story__pts{list-style:none;margin-top:26px;display:grid;gap:14px}
.story__pts li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--ink2)}
.story__pts li b{color:var(--ink);font-weight:600}
.story__pts svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--ink)}
.dk .story__pts li{color:var(--dink2)}
.dk .story__pts li b{color:var(--dink)}
.dk .story__pts svg{color:var(--dink)}
.m-only{display:none}
@media (max-width:900px){
  .story,.story--flip{grid-template-columns:minmax(0,1fr);gap:28px}
  .story>*{min-width:0}
  .story--flip .story__copy{order:0}
  .m-only{display:block}
  .d-only{display:none}
  .story .zoom{aspect-ratio:auto}
  .story .zoom img{position:static;width:100%;height:auto;object-fit:fill;transform:none}
}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;text-align:center}
.stat b{display:block;font-size:clamp(2.2rem,4.6vw,3.2rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:6px;font-size:14px;color:var(--ink2);max-width:220px;margin-left:auto;margin-right:auto}
.dk .stat span{color:var(--dink2)}

/* ---------- Phone row ---------- */
.phones{display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,3vw,40px)}
.phones .phone{--pw:clamp(150px,22vw,300px)}
.phones .phone--mid{--pw:clamp(190px,26vw,340px)}
@media (max-width:640px){
  .phones{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:0 20px 20px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -20px}
  .phones::-webkit-scrollbar{display:none}
  .phones .phone,.phones .phone--mid{--pw:min(72vw,280px);scroll-snap-align:center}
}

/* ---------- Comparison rows ---------- */
.rows{display:grid;gap:12px;max-width:820px;margin:0 auto}
.row{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:baseline;padding:20px 24px;background:#fff;border:1px solid var(--line2);border-radius:var(--r-md)}
.row h3{font-size:16px;letter-spacing:-.01em}
.row p{font-size:15px;line-height:1.5;color:var(--ink2)}
.row--lv{border-color:var(--ink);box-shadow:var(--sh-1)}
@media (max-width:640px){.row{grid-template-columns:1fr;gap:6px}}

/* ---------- Accordion (FAQ, objections) ---------- */
.acc{max-width:820px;margin:0 auto}
.acc details{border-bottom:1px solid var(--line2)}
.acc details:first-child{border-top:1px solid var(--line2)}
.acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 2px;font-weight:600;font-size:17px;letter-spacing:-.012em}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";width:11px;height:11px;flex:none;border-right:1.8px solid var(--ink3);border-bottom:1.8px solid var(--ink3);transform:rotate(45deg);transition:transform .25s;margin-right:6px}
.acc details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.acc__a{padding:0 2px 22px;color:var(--ink2);max-width:66ch;font-size:15.5px;line-height:1.6}
.acc__a p+p{margin-top:10px}
.dk .acc details{border-color:var(--dline)}
.dk .acc__a{color:var(--dink2)}
.dk .acc summary::after{border-color:var(--dink2)}

/* ---------- Calculator ---------- */
.calc{max-width:1040px;margin:0 auto;background:#fff;border:1px solid var(--line2);border-radius:var(--r-xl);box-shadow:var(--sh-1);overflow:hidden}
.calc__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.calc__grid>*{min-width:0}
.ctl .seg{display:flex;width:max-content;max-width:100%}
.calc__in{padding:clamp(22px,3.4vw,36px)}
.calc__out{padding:clamp(22px,3.4vw,36px);background:var(--soft);border-left:1px solid var(--line2);display:flex;flex-direction:column;gap:18px}
.ctl+.ctl{margin-top:22px}
.ctl__row{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.ctl__row label{font-size:14.5px;color:var(--ink2);font-weight:500}
.ctl__row output{font-size:17px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ctl input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin-top:6px;background:transparent}
.ctl input[type="range"]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--ink) var(--p,50%),var(--line2) var(--p,50%))}
.ctl input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.18);margin-top:-11px;cursor:grab}
.ctl input[type="range"]::-moz-range-track{height:4px;border-radius:2px;background:var(--line2)}
.ctl input[type="range"]::-moz-range-progress{height:4px;border-radius:2px;background:var(--ink)}
.ctl input[type="range"]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:grab}
.ctl__hint{font-size:12.5px;color:var(--ink3);margin-top:4px}
.seg{display:inline-flex;background:var(--soft2);border-radius:var(--pill);padding:3px;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{border-radius:var(--pill);padding:7px 14px;font-size:13.5px;font-weight:500;color:var(--ink2);white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s}
.seg button.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.seg button:active{opacity:.75}
.out b{display:block;font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.out>span{display:block;margin-top:6px;font-size:13.5px;line-height:1.4;color:var(--ink2)}
.out>span span{display:inline;font-weight:600;color:var(--ink)}
.out--big b{font-size:clamp(2.4rem,4.6vw,3.6rem);color:var(--ink)}
.out__vs{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line2);font-size:14px;color:var(--ink2)}
.out__vs b{font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.out__vs .is-good{color:var(--good-ink)}
.calc__fine{padding:0 clamp(22px,3.4vw,36px) clamp(18px,2.6vw,26px);font-size:12.5px;line-height:1.55;color:var(--ink3)}
.calc__formula{font-family:var(--mono);font-size:12px;color:var(--ink3);margin-top:8px;overflow-wrap:anywhere}
@media (max-width:820px){.calc__grid{grid-template-columns:1fr}.calc__out{border-left:0;border-top:1px solid var(--line2)}}

/* ---------- Pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.tiers>*{min-width:0}
.tier .btn{white-space:normal;text-align:center;line-height:1.25;padding-top:10px;padding-bottom:10px}
.tier{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line2);border-radius:var(--r-lg);padding:clamp(24px,3vw,32px)}
.tier--pick{border-color:var(--ink);box-shadow:var(--sh-2)}
.tier__badge{position:absolute;top:-13px;left:24px;background:var(--ink);color:#fff;border-radius:var(--pill);padding:5px 12px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.tier__name{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.tier__who{margin-top:6px;font-size:16px;font-weight:600;letter-spacing:-.012em}
.tier__amt{margin-top:18px;display:flex;flex-direction:column;gap:6px;font-variant-numeric:tabular-nums}
.tier__amt b{font-size:clamp(2.4rem,4vw,3.1rem);letter-spacing:-.035em;line-height:1}
.tier__amt span{font-size:14px;color:var(--ink3)}
.tier__was{font-size:13.5px;color:var(--ink3);text-decoration:line-through;margin-top:4px;min-height:1.3em}
.tier__pay{margin-top:12px;font-size:14px;color:var(--ink2);min-height:2.7em}
.tier__build{margin-top:16px;padding-top:16px;border-top:1px solid var(--line2);font-size:14px;color:var(--ink2);display:flex;justify-content:space-between;gap:10px}
.tier__build b{color:var(--ink);font-variant-numeric:tabular-nums}
.tier .btn{margin-top:20px;width:100%}
.tier--custom{background:var(--soft);border-color:transparent;grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px 28px;padding:22px 28px}
.tier--custom .tier__name{grid-column:1}
.tier--custom .tier__who{grid-column:1;margin-top:0}
.tier--custom .tier__amt{grid-column:2;grid-row:1/3;margin:0}
.tier--custom .tier__amt b{font-size:1.6rem}
.tier--custom .tier__pay{grid-column:2;grid-row:1/3;margin:0;padding-left:120px;min-height:0}
.tier--custom .btn{grid-column:3;grid-row:1/3;margin:0;width:auto}
.incl{list-style:none;display:grid;gap:10px;margin-top:14px}
.incl li{display:flex;gap:10px;font-size:15px;line-height:1.5;color:var(--ink2);align-items:flex-start}
.incl svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--ink)}
.pr__ctrls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.pr__matter{max-width:440px;margin:0 auto 32px}
.pr__note{max-width:640px;margin:20px auto 0;text-align:center;font-size:13.5px;color:var(--ink3);line-height:1.55}
.found{max-width:900px;margin:0 auto;background:var(--ink);color:var(--dink);border-radius:var(--r-xl);padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,48px);align-items:start}
.found .eyebrow{color:var(--dink3)}
.found h3{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.024em;line-height:1.1}
.found p{color:var(--dink2);font-size:15.5px;margin-top:12px;line-height:1.55}
.found__cols{display:grid;gap:18px}
.found__col b{display:block;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dink3);margin-bottom:8px}
.found__col ul{list-style:none;display:grid;gap:8px}
.found__col li{display:flex;gap:10px;font-size:15px;line-height:1.45;color:var(--dink)}
.found__col li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dink2);flex:none;margin-top:8px}
@media (max-width:960px){.tiers{grid-template-columns:1fr;max-width:520px;margin:0 auto}.tier--pick{order:-1}.tier--custom{grid-template-columns:1fr;padding:24px}.tier--custom .tier__amt,.tier--custom .tier__pay,.tier--custom .btn{grid-column:1;grid-row:auto;padding-left:0}.tier--custom .btn{width:100%;margin-top:12px}}
@media (max-width:760px){.found{grid-template-columns:1fr}}

/* ---------- Forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px}
.field .opt{font-weight:400;color:var(--ink3)}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:13px 14px;font:inherit;font-size:16px;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s;min-height:50px}
/* The caret is drawn with two gradients rather than a data: URI, because the
   site's own policy allows images from 'self' only: an inline SVG background
   is blocked and the select would render with no arrow at all. */
.field select{appearance:none;-webkit-appearance:none;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:calc(100% - 21px) calc(50% + 1px),calc(100% - 15px) calc(50% + 1px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field select:focus{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(29,29,31,.1)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--hot)}
.field__err{display:none;font-size:13px;color:var(--hot);margin-top:6px}
.field.is-bad .field__err{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.check{display:flex;gap:10px;font-size:14px;color:var(--ink2);align-items:flex-start;line-height:1.45}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--ink);flex:none}
.form__note{font-size:12.5px;color:var(--ink3);line-height:1.5;margin-top:12px}
.done{background:var(--soft);border-radius:var(--r-lg);padding:clamp(24px,3vw,32px)}
.done b{display:block;font-size:19px;letter-spacing:-.015em;margin-bottom:8px}

/* ---------- Calendly frame ---------- */
.cal{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line2);background:#fff;box-shadow:var(--sh-1)}
.cal iframe{display:block;width:100%;height:760px;border:0}
.cal__fallback{padding:16px 20px;border-top:1px solid var(--line2);font-size:14px;color:var(--ink2);display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
@media (max-width:640px){.cal iframe{height:1000px}}

/* ---------- Footer ---------- */
.foot{background:var(--dbg);color:var(--dink2);padding:clamp(48px,6vw,72px) 0 36px}
.foot__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px;margin-bottom:40px}
.foot__brand{font-weight:700;font-size:17px;color:var(--dink);letter-spacing:-.02em}
.foot__tag{margin-top:10px;font-size:14px;line-height:1.5;max-width:34ch;color:var(--dink2)}
.foot nav b{display:block;color:var(--dink);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.foot nav a{display:block;font-size:14.5px;color:var(--dink2);padding:5px 0;transition:color .2s}
.foot nav a:hover{color:var(--dink)}
.foot__legal{font-size:12.5px;color:var(--dink3);border-top:1px solid var(--dline);padding-top:22px;line-height:1.6;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot__legal p{max-width:70ch}
@media (max-width:820px){.foot__top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot__top{grid-template-columns:1fr;gap:26px}}

/* ---------- Mobile sticky CTA ---------- */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;padding:10px max(16px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right));background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 -1px 0 var(--line2);transform:translateY(110%);transition:transform .35s var(--ease)}
.mcta.is-show{transform:none}
.mcta .btn{width:100%}
@media (max-width:900px){.mcta{display:block}}

/* ---------- Reveal ---------- */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .rv.is-in{opacity:1;transform:none}
@media print{.rv{opacity:1!important;transform:none!important}}

/* ---------- Final band ---------- */
.fin{text-align:center}
.fin .h2{max-width:14ch;margin:0 auto}
.fin .lead{max-width:560px;margin:18px auto 0}
.fin__alt{margin-top:18px;font-size:14px;color:var(--dink3)}
.fin__alt a{color:var(--dink);text-decoration:underline;text-underline-offset:3px}

/* ---------- People (founders strip) ---------- */
.ppl{display:flex;justify-content:center;gap:clamp(24px,5vw,56px);flex-wrap:wrap}
.ppl a{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.ppl img{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:10px;border:1px solid var(--line2)}
.ppl b{font-size:15px;letter-spacing:-.01em}
.ppl span{font-size:13px;color:var(--ink3)}

/* ---------- Motion discipline ---------- */
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
  .btn,.seq li,.link svg,.mcta{transition:none}
  .btn:active{transform:none}
}
@media (max-width:520px){
  .btn{white-space:normal;text-align:center;line-height:1.25;padding-top:10px;padding-bottom:10px}
  .sec{padding:64px 0}
  .h1{letter-spacing:-.03em}
  .btn{min-height:52px}
  .card{border-radius:20px}
  .win{border-radius:16px}
}

/* ---------- Pricing comparison matrix ---------- */
.matrix{display:grid;gap:10px;max-width:960px;margin:0 auto}
.matrix__head{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) repeat(5,minmax(0,1fr));gap:8px;padding:0 20px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.matrix__row{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) repeat(5,minmax(0,1fr));gap:8px;align-items:center;padding:16px 20px;background:#fff;border:1px solid var(--line2);border-radius:var(--r-md)}
.matrix__row.is-us{border-color:var(--ink);box-shadow:var(--sh-1)}
.matrix__name b{display:block;font-size:15.5px;letter-spacing:-.01em}
.matrix__name em{display:block;font-style:normal;font-size:13px;color:var(--ink3);margin-top:3px;line-height:1.4}
.matrix__price{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.matrix__cell{display:flex;align-items:center;justify-content:center}
.matrix__cell i{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--soft2)}
.matrix__cell.is-yes i{background:var(--ink)}
.matrix__cell.is-yes i::after{content:"";width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-2px}
.matrix__cell.is-part i{background:#fff;border:1.5px solid var(--ink3)}
.matrix__cell.is-part i::after{content:"";width:8px;height:2px;background:var(--ink3)}
.matrix__cell.is-no i::after{content:"";width:8px;height:1.5px;background:var(--line)}
.matrix__lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media (max-width:900px){
  .matrix__head{display:none}
  .matrix__row{grid-template-columns:1fr;gap:10px}
  .matrix__cell{justify-content:flex-start;gap:10px}
  .matrix__lab{position:static;width:auto;height:auto;overflow:visible;clip:auto;font-size:14px;color:var(--ink2)}
  .matrix__price::before{content:attr(data-label)}
}

/* ---------- Contrast on dark bands ----------
   The muted grey and the darker link blue are tuned for white grounds; on the
   black hero and footer bands they fall below 4.5:1, so both lighten there. */
.nav--dk .nav__login{color:rgba(245,245,247,.66)!important}
.nav--dk .nav__login:hover{color:#f5f5f7!important}
.dk .link{color:#7ab8ff}
.dk .link--ink{color:var(--dink)}