/* 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;
  /* The only visible edge of an interactive control, so it owes 3:1 under
     WCAG 1.4.11 rather than the 1.51:1 a decorative hairline can get away with. */
  --line-ui:#8e8e93;
  --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-ui)}
.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;white-space:nowrap}
.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;white-space:nowrap;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:1000px){
  .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 ---------- */
/* The hero used to resolve to --soft while the section under it is white, so
   the join drew a hard grey-to-white edge the full width of the page, directly
   under the caption. That is the line a reader notices, not the window's. The
   grey is a band behind the product now and the hero returns to white where it
   meets the next section, so there is nothing to see at the seam. */
.hero{padding:calc(var(--nav-h) + clamp(44px,7vw,96px)) 0 0;background:linear-gradient(180deg,#fff 0%,#fff 34%,var(--soft) 66%,var(--soft) 88%,#fff 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}

/* ---------- The hero shows the product ----------
   Earlier versions of this fold argued in type: a statistic, a claim, a
   schedule of account, four principles, all set beside each other. It read as a
   page about the product rather than the product. The screen a firm actually
   buys is the strongest thing this company owns, so the copy is cut to what a
   stranger needs (the category, what happens, and where it comes from) and the
   platform and the phone take the rest of the fold. The price and the
   principles keep their place, one section lower, where they read as
   specification rather than as competition for the headline. */
.hero--show .hero__copy{max-width:820px;margin:0 auto;text-align:center}
.hero--show .h1{color:var(--ink);font-size:clamp(2.3rem,5vw,4rem);line-height:1.04;
  letter-spacing:-.032em;max-width:17ch;margin:0 auto}
.hero--show .h1__q{display:block;color:var(--ink2);margin-top:.08em}
.hero--show .hero__copy .lead{max-width:52ch;margin:20px auto 0}
.hero--show .hero__cta{margin-top:28px;justify-content:center;gap:10px 22px}

/* French runs about a fifth longer than English for the same sentence, so a
   measure tuned to the English headline pushed it to four lines and left the
   screen empty either side. The French fold gets its own width: the same type
   scale, more room to run in. */
html[lang="fr"] .hero--show .hero__copy{max-width:1080px}
html[lang="fr"] .hero--show .h1{max-width:23ch}
html[lang="fr"] .hero--show .hero__copy .lead{max-width:64ch}
.hero--show .hero__stage{margin-top:clamp(34px,4.4vw,58px)}

/* The phone is absolutely positioned and hangs below the window, so the caption
   that follows it in flow was running underneath it: on a wide screen the right
   half of that sentence sat behind the iPhone. The stage now reserves the
   overhang, and the caption keeps to a measure narrower than the gap between
   the window and the phone. */
/* Wherever a stage carries a phone, that phone is absolutely positioned and
   hangs below the window, so a caption following it in flow ends up behind it
   on the right. This was never a home-page problem: the same figure is on the
   product page, security, workflow and all sixteen practice pages. Note that
   padding on the stage cannot fix it, because the phone is positioned against
   that same padding box and moves down with it; the clearance has to be margin
   on the caption, plus a measure too narrow to reach under the device. Below
   901px every one of those pages returns the phone to the flow, so the
   clearance is only wanted above that. */
.stage + .figcap{max-width:62ch;margin-left:auto;margin-right:auto}
@media (min-width:901px){
  .stage + .figcap{margin-top:clamp(44px,5.4vw,78px)}
}

@media (max-width:900px){
  .hero--show .h1{max-width:20ch}
}
@media (max-width:600px){
  .hero--show .hero__cta{flex-direction:column;align-items:stretch;gap:14px}
  .hero--show .hero__cta .btn{width:100%}
  .hero--show .hero__cta .link{justify-content:center}
  /* a label that wraps should not drag its icon to the middle of two lines */
  .trust li{align-items:flex-start}
  .trust svg{margin-top:3.5px}
}

/* ---------- One system, three surfaces ----------
   The site had a section for the iPhone and none for the platform, and below
   900px css/ui.css hid every drawn screen, so a reader on a phone met an iPhone
   app with a website attached. Three panels, platform first, each carrying the
   real surface rather than an icon standing in for it: the drawn platform at
   the width its container queries were written for, the app in a real capture,
   and the acknowledgement as the client receives it. The artwork is cropped at
   a common height so the three read as one row of screens continuing past the
   frame, rather than three boxes of different shapes. */
.surf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,38px);align-items:start}
.surf__p{display:flex;flex-direction:column;min-width:0}
.surf__art{height:clamp(236px,25vw,300px);border-radius:var(--r-lg);background:var(--soft);
  border:1px solid var(--line2);overflow:hidden;padding:20px 20px 0;display:flex;justify-content:center;align-items:flex-start}
.surf__art .uiwrap{width:100%}
.surf__art .ui{box-shadow:0 12px 34px rgba(0,0,0,.10)}
.surf__art--phone{padding-top:26px}
.surf__art--phone .phone{--pw:min(100%,196px)}
.surf__art--mail .ui{background:var(--soft)}
.surf__p h3{margin-top:24px;letter-spacing:-.014em}
.surf__p>p{margin-top:11px;color:var(--ink2);font-size:15.5px;line-height:1.55}
.surf__p>p.fine{margin-top:13px;color:var(--ink3)}
.surf__closer{margin:clamp(44px,5.4vw,72px) auto 0;text-align:center;max-width:34ch;
  font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.35;letter-spacing:-.018em;color:var(--ink)}
@media (max-width:900px){
  .surf{grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vw,44px);max-width:520px;margin-inline:auto}
  .surf__art{height:clamp(260px,62vw,330px)}
  .surf__closer{max-width:26ch}
}

/* the rail says what it is */
.seq__note{margin:-6px auto clamp(18px,2.6vw,26px);text-align:center;font-size:12px;color:var(--ink3)}

@media (max-width:900px){
}
@media (max-width:1040px){
  /* Stacked below this width. The two-column fold needs genuine room: at 904px
     it was a 472px argument beside a 342px schedule, which wrapped the labels
     and pushed the headline to four lines. Above this it has space; below it
     the fold reads better as one column than as two cramped ones.
     On a phone the schedule fell below the four principles, so the fold ended
     on a grey list and the money never appeared on the first screen. The note
     and the schedule become one flow here and the schedule is ordered up to sit
     directly under the buttons, where it does on the desk. gap:0 because each
     element already carries its own rhythm. */
}
@media (max-width:600px){
  /* a label that wraps should not drag its icon to the middle of two lines */
  .trust li{align-items:flex-start}
  .trust svg{margin-top:3.5px}
  .seq__note{text-align:left}
}
.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}
/* The foot of the window dissolves rather than ending on an edge. Closing the
   frame was the wrong answer to the same complaint: a border still draws a hard
   line straight across the page at the exact point the reader is trying to look
   past, and the content behind it is cut mid-row either way. An application
   screen has no bottom edge in life, so this one fades out and the crop stops
   being an event. The side borders and the radius stay for the top and flanks;
   the mask takes care of the foot, and the phone is a sibling so it stays
   crisp. */
.stage__win{position:relative;z-index:1;width:min(100%,1120px);margin:0 auto;border-radius:var(--r-lg);overflow:hidden;background:#f5f5f7;border:1px solid rgba(0,0,0,.08);box-shadow:var(--sh-3)}
.stage__win.zoom{aspect-ratio:var(--ar,16/9)}
/* Each drawn screen fills its frame. The screens are far taller than any frame
   (the sidebar alone runs to 1644px, as a real app sidebar would before it
   scrolls), so they are always a viewport onto something larger. Filling means
   a shorter screen runs its own canvas to the edge instead of stopping
   mid-window on its own rounded border. */
.stage__win .lay > .ui{height:100%}
.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(--line-ui);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}
}
/* The hero turns phone-led at the SAME width where css/ui.css stops drawing the
   product screens (900px). While these two disagreed, 761-900px got a hero
   window with nothing in it: a 721-860px panel of --soft with a border and a
   shadow, and the iPhone hanging over the caption below it. css/security-page.css
   and css/landing.css already switch at 900; this is the sheet that did not. */
@media (max-width:900px){
  /* The phone now stands alone on the page, so its shadow is the only thing
     grounding it. overflow:hidden was here to hold the desktop stage window;
     with that window gone below this width, clipping only served to slice the
     device shadow into a straight edge. body{overflow-x:clip} still stops any
     sideways scroll, so the section can let the shadow fall freely. */
  .hero{padding-top:calc(var(--nav-h) + 30px);overflow:visible}
  .hero__cta .btn{width:100%;max-width:380px}
  .hero__stage{margin-top:34px}
  .stage{display:block}
  .stage__win{border-radius:18px}
  /* 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}
}
/* ---------- The principles and the rail at phone widths ----------
   Wrapped onto a phone, the centred flex row of the four principles became a
   two-column grid that split each label across two lines with its icon left
   adrift, and the five-chip rail broke into a ragged 2-2-1 pyramid. Both read
   as clutter. Below 600px each becomes one clear column instead: the principles
   as an aligned checklist, and the rail as a top-to-bottom timeline of a single
   enquiry (the live step lit, the ones behind it marked done), which is what
   the sequence has always meant. The clock and the node earn their place here,
   so the earlier width-by-width hiding of them is gone. */
@media (max-width:600px){
  .trust{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;
    width:max-content;max-width:90vw;gap:14px;margin:26px auto 0;font-size:14px}
  .trust li{gap:11px}
  .trust svg{width:17px;height:17px}

  /* The vertical stepper spent roughly 600px saying 22:47, 22:47, 22:48, 22:49,
     22:52. The claim is the span, not the increments: an enquiry lands and it
     is on the partner's phone five minutes later. So the two ends carry their
     time and their word, and the three steps between become the markers that
     prove it is a path rather than a jump. Their labels are taken off the
     screen rather than out of the document, because they are the accessible
     name of a button that still works. */
  .seq{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:6px 3px;width:100%;max-width:none;margin:0 auto clamp(18px,4vw,26px)}
  .seq li{display:block;flex:none}
  .seq button{width:auto;gap:6px;padding:6px 9px 6px 7px;font-size:11.5px;border-radius:var(--pill);min-height:44px}
  .seq time{display:inline-block;font-size:11px;padding:2px 4px}
  .seq button i{display:none}
  /* The three markers were 13x30px targets with 3px between them, under half
     the 28pt Apple treats as an absolute floor, on the control that drives the
     hero's product shot. The dot itself does not change size; the target
     around it does, which is the order Apple asks for -- pad the target, do
     not inflate the shape. The middle steps divide whatever the two end pills
     leave, so the rail still fits on one line at 375px. The 24px floor is the
     point of it: without it a 320px screen would divide what little is left
     into 7px targets, which is worse than the 13px it started with. Below that
     the rail wraps, as it already did at that width. Scoped to rails that
     carry buttons: the practice pages draw a static .seq that keeps its own
     rhythm. */
  .seq:has(button){column-gap:0}
  .seq li:has(button):not(:first-child):not(:last-child){flex:1 1 0;min-width:24px}
  .seq li:not(:first-child):not(:last-child) button{padding:0;width:100%;min-width:0;min-height:44px;
    border-color:transparent;background:none;justify-content:center}
  .seq li:not(:first-child):not(:last-child) time{display:none}
  .seq li:not(:first-child):not(:last-child) button span{position:absolute;width:1px;height:1px;
    padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .seq li:not(:first-child):not(:last-child) button i{display:block;width:6px;height:6px}
}

/* ---------- The device shadow on a phone ----------
   The desktop shadow (80px spread at 35% black) is drawn for a phone that
   overlaps a window; standing alone on the hero's near-white it became a grey
   mass 120px wide that the section clipped into a straight edge. The earlier
   answer shrank it so far (a single 26px pass at 16%) that on the grey lower
   half of the hero it vanished, and the device read as a flat cut-out with its
   corners melting into the page. This is the middle: a tight contact shadow to
   draw the bottom edge crisply, and one soft ambient pass to lift the device
   off the page. Both fall well inside the section now that it no longer clips,
   and read as a real object rather than a rectangle. */
@media (max-width:900px){
  .phone img,.stage__phone img{filter:drop-shadow(0 2px 4px rgba(0,0,0,.12)) drop-shadow(0 14px 24px rgba(0,0,0,.20))}
  .dk .phone img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)) drop-shadow(0 16px 30px rgba(0,0,0,.62))}
}

/* ---------- 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){
  /* overflow-x:auto makes the vertical axis clip too, so the device shadow needs
     its room paid for in padding; otherwise the same straight-edge slice returns
     along the bottom of the scroller. */
  .phones{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:6px 22px 34px;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}
/* A segmented control is a set of choices, so all of them have to be visible.
   .seg scrolls sideways with its scrollbar hidden, which on a 393px screen put
   the third firm-size option, the one a 10-to-20-lawyer firm needs, past the
   edge with nothing to say it was there. Tightening the padding was not
   enough: at 390px the track still measured 333px inside a 304px box, so 29px
   of "10 to 20 lawyers" sat off screen and that firm was priced as a 3-to-9 by
   default. Inside the calculator the control now fills its row and the three
   segments divide it, wrapping to a second line rather than overflowing. The
   bare .seg rule stays for the tab strips on the other pages. */
@media (max-width:430px){
  .seg button{padding:7px 10px;font-size:12.5px}
  .ctl .seg{display:flex;width:100%}
  .ctl .seg button{flex:1 1 0;min-width:0;padding:7px 6px;white-space:normal;line-height:1.2}
}
.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:20px;align-items:stretch}
.tiers>*{min-width:0}
.tier{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line2);border-radius:24px;padding:clamp(24px,3vw,34px)}
.tier--pick{border-color:var(--ink);box-shadow:0 8px 32px rgba(0,0,0,.04)}
.tier__badge{position:absolute;top:-13px;left:24px;background:var(--ink);color:#fff;border-radius:var(--pill);padding:5px 14px;font-size:14px;font-weight:600;line-height:1.3}
.tier__name{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.tier__who{margin-top:6px;font-size:16px;color:var(--ink2)}
.tier__amt{margin-top:26px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font-variant-numeric:tabular-nums}
.tier__amt b{font-size:clamp(2.6rem,4vw,3.3rem);letter-spacing:-.045em;line-height:1.1;white-space:nowrap}
.tier__amt span{font-size:14px;color:var(--ink2)}
.tier__features{list-style:none;display:grid;gap:12px;margin:26px 0 0;padding:0;flex:1}
.tier__features li{display:flex;align-items:flex-start;gap:10px;font-size:16px;line-height:1.5;color:var(--ink2)}
.tier__features svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--ink)}
.tier .btn{margin-top:28px;width:100%;min-height:50px;white-space:normal;text-align:center;line-height:1.4}
.tier__build{margin-top:24px;padding-top:20px;border-top:1px solid var(--line2);font-size:14px;line-height:1.5;color:var(--ink2)}
.tier__build>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.tier__build b{color:var(--ink);font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tier__build b small{font-size:14px;font-weight:400}
.tier__build p{margin-top:9px}
.tier__found{display:block;margin-top:18px;font-size:14px;line-height:1.5;color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.tier__found:hover{color:var(--acc-ink)}
.tier__pay{font-size:16px;line-height:1.5;color:var(--ink2)}
.tier--custom{background:var(--soft);border-color:transparent;grid-column:1/-1;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:4px 28px;padding:26px 30px}
.tier--custom .tier__name{grid-column:1;grid-row:1;font-size:16px}
.tier--custom .tier__who{grid-column:1;grid-row:2;margin:0;font-size:14px}
.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:3;grid-row:1/3;margin:0}
.tier--custom .btn{grid-column:4;grid-row:1/3;margin:0;width:auto}
.pr__team{margin-top:20px;font-size:16px;line-height:1.5;color:var(--ink2)}
.price-math{max-width:900px;margin:30px auto 0;border:1px solid var(--line2);border-radius:18px;background:#fff}
.price-math summary{padding:20px 24px;font-size:16px;font-weight:600;line-height:1.5;cursor:pointer}
.price-math summary:focus-visible{outline:2px solid var(--acc-ink);outline-offset:4px;border-radius:18px}
.price-math__body{padding:0 24px 24px;font-size:16px;line-height:1.6;color:var(--ink2)}
.price-math .pr__matter{max-width:none;margin:24px 0}
.price-math .ctl__row{flex-wrap:wrap;gap:8px 16px}
.price-math__results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:24px 0}
.price-math__results dt{font-weight:600;color:var(--ink)}
.price-math__results dd{margin:6px 0 0;font-size:14px}
.price-math__note{font-size:14px;color:var(--ink2)}
@media(max-width:1100px){.tier--custom{grid-template-columns:1fr 1fr}.tier--custom .tier__amt{grid-column:2;grid-row:1/3;justify-content:flex-end}.tier--custom .tier__pay{grid-column:1;grid-row:3;margin-top:14px}.tier--custom .btn{grid-column:2;grid-row:3;justify-self:end;margin-top:14px}}
.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:14px;color:var(--ink2);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--custom{grid-template-columns:1fr;padding:24px;gap:6px 0}.tier--custom .tier__name,.tier--custom .tier__who,.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;justify-self:stretch}.tier--custom .tier__amt{justify-content:flex-start;margin-top:12px}.price-math__results{grid-template-columns:1fr}}
@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%}
/* Meets the nav collapse at 1000px. At 900 there was a 100px band where the
   nav CTA had gone and the mobile bar had not yet arrived. */
@media (max-width:1000px){.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}
}

/* ---------- Enquiry handling: alternatives and entry price ---------- */
.price-compare{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);max-width:1120px;margin:0 auto;align-items:start}
.price-compare__alternatives{padding:8px 0;min-width:0}
.price-compare__heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--ink)}
.price-compare__heading h3{font-size:16px;font-weight:600;line-height:1.5}
.price-compare__heading>span{font-size:14px;color:var(--ink2);text-align:right}
.price-option{padding:28px 0;border-bottom:1px solid var(--line2)}
.price-option__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:baseline}
.price-option h4{font-size:19px;letter-spacing:-.02em;line-height:1.35}
.price-option__cost{font-size:16px;font-weight:600;line-height:1.45;text-align:right;color:var(--ink2)}
.price-option__description{margin-top:12px;font-size:16px;line-height:1.6;color:var(--ink2);max-width:52ch}
.price-compare__note{margin-top:24px;font-size:14px;line-height:1.6;color:var(--ink2);max-width:58ch}
.price-feature{min-width:0;padding:clamp(28px,3.5vw,44px);border-radius:28px;background:var(--ink);color:#fff}
.price-feature__brand{display:block;font-size:16px;font-weight:600;margin-bottom:18px}
.price-feature h3{font-size:clamp(1.6rem,2.5vw,2rem);font-weight:600;line-height:1.15;letter-spacing:-.035em;max-width:18ch}
.price-feature__description{margin-top:16px;font-size:16px;line-height:1.6;color:#d3d3d8;max-width:42ch}
.price-feature__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:28px;font-variant-numeric:tabular-nums}
.price-feature__price>span{font-size:20px}
.price-feature__price strong{font-size:clamp(3.2rem,5.5vw,4.4rem);font-weight:600;line-height:1.1;letter-spacing:-.045em;white-space:nowrap}
.price-feature__price small{font-size:16px;color:#d3d3d8;white-space:nowrap}
.price-feature__scope{margin-top:12px;font-size:14px;line-height:1.5;color:#d3d3d8}
.price-feature ul{list-style:none;display:grid;gap:12px;padding:24px 0 0;margin:24px 0 0;border-top:1px solid #454548}
.price-feature li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5}
.price-feature li svg{width:18px;height:18px;flex:none;margin-top:3px;color:#fff}
.price-feature .btn{width:100%;min-height:52px;margin-top:28px;background:#fff;border:1px solid #fff;color:var(--ink);white-space:normal;line-height:1.4;text-align:center}
.price-feature .btn:hover{background:#e9e9ec;border-color:#e9e9ec}
.price-feature__setup{margin-top:16px;font-size:14px;line-height:1.6;color:#d3d3d8}
@media(max-width:900px){.price-compare{grid-template-columns:1fr;max-width:640px;gap:32px}.price-feature{grid-row:1}.price-compare__alternatives{padding:0}}
@media(max-width:480px){.price-option__head{grid-template-columns:1fr;gap:8px}.price-option__cost{text-align:left}.price-compare__heading>span{display:none}.price-feature{border-radius:22px;padding:28px 24px}.price-feature__price strong{font-size:3.3rem}}

/* ---------- 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)}