/* Daylight — the site's approved design system (2026-08-28).
   Serif display (Fraunces) over Instrument Sans, warm paper, black pill
   buttons, coral held back for accents. Pages opt in with
   bodyclass: home2 and this stylesheet; the shared nav and footer
   partials are recoloured by the body.home2 rules below, never edited. */

/* ── /home-2 · the daylight direction ─────────────────────────────────────
   Scoped entirely under body.home2 so the dark site is untouched. The nav and
   footer are the SHARED partials — same logo, same links — recoloured here,
   never edited there. */
body.home2{
  --d-paper:#FDFCFA; --d-ink:#111114; --d-ink2:#5F5F66; --d-ink3:#98979E;
  --d-line:#ECEAE4; --d-coral:#FF5C3D; --d-coral-deep:#E8492B;
  --d-mint:#E5F4E4; --d-mint-ink:#1E5B33;
  --d-peach:#FFF1E9; --d-sky:#EDF3FC; --d-butter:#FCF3DE; --d-lilac:#F3EFFA;
  --d-wa:#DCF6D0; --d-wa-ink:#14351C; --d-card:#FFFFFF;
  --d-serif:'Fraunces',Georgia,serif;
  --d-sans:'Instrument Sans',system-ui,sans-serif;
  --d-shadow:0 1px 2px rgba(17,17,20,.05),0 12px 32px -12px rgba(17,17,20,.12);
  background:var(--d-paper);color:var(--d-ink2);
  font-family:var(--d-sans);font-size:16.5px;line-height:1.55;
  overflow-x:clip;
}

/* Type: serif display over grotesk body. */
body.home2 h1{
  font-family:var(--d-serif);font-weight:420;font-size:clamp(40px,6.4vw,68px);
  line-height:1.04;letter-spacing:-.022em;color:var(--d-ink);
  margin:0 auto;max-width:17ch;text-wrap:balance;
}
body.home2 h1 em{font-style:italic;font-weight:480;color:var(--d-coral-deep)}
body.home2 h2{
  font-family:var(--d-serif);font-weight:440;font-size:clamp(30px,3.8vw,44px);
  line-height:1.1;letter-spacing:-.018em;color:var(--d-ink);margin:0;max-width:none;text-wrap:balance;
}
body.home2 section{padding:88px 0}

/* Nav: shared partial, daylight colours. The logo mark is untouched — its ink
   ring and coral dot already read on light; only the WORDMARK colour flips. */
body.home2 nav{position:sticky;top:0}
body.home2 nav.stuck{background:rgba(253,252,250,.86);border-bottom-color:var(--d-line)}
body.home2 .logo{color:var(--d-ink)}
/* "ly" greys on both grounds, but not to the same value: #8A909C is a step
   DOWN from white and reads as a wash on #FDFCFA paper. --d-ink2 is the
   matching step UP from ink, so the two halves of the wordmark sit the same
   distance apart either way round. */
body.home2 .logo i{color:var(--d-ink2)}
body.home2 .nlinks a,body.home2 .ntrig,body.home2 .nright > a{color:var(--d-ink2)}
/* ...but NOT the filled button. `.nright > a` is (0,2,1) and out-specifies
   `body.home2 .btn` (0,2,0), so the CTA label was inheriting --d-ink2: mid
   grey on the near-black pill, measured at 2.98:1 where AA wants 4.5. The
   grey belongs to the plain "Log in" link beside it, not to the button. */
body.home2 .nright > a.btn{color:var(--d-paper)}
body.home2 .nlinks a:hover,
body.home2 .ndrop:hover .ntrig,body.home2 .ndrop.open .ntrig{color:var(--d-ink)}
body.home2 .nmenu{background:var(--d-card);border-color:var(--d-line);box-shadow:0 26px 60px rgba(17,17,20,.14)}
body.home2 .nmenu a:hover{background:#F6F4EF}
body.home2 .nmenu a b{color:var(--d-ink)}
body.home2 .nmenu a span{color:var(--d-ink3)}
/* Mega-menu extras. The icon tiles are pale tints that read on either ground,
   so only the group label and the featured panel's inner rows need daylight
   values — the panel itself stays dark on purpose: it is a screenshot of the
   product, and the product is dark there. */
body.home2 .nmh{color:var(--d-ink3)}
body.home2 .nmenu a.nmfeat{background:#15181f;border-color:#242a36}
body.home2 .nmenu a.nmfeat:hover{background:#1a1e27}
body.home2 .nmenu .nmf-k,body.home2 .nmenu .nmf-go{color:var(--d-coral)}
body.home2 .nburger span{background:var(--d-ink)}
body.home2 .nmob{background:var(--d-paper);border-top-color:var(--d-line)}
/* Scoped to the LISTS, not to every <a> in the drawer. As `.nmob a` this was
   (0,2,2) and out-specified `body.home2 .nmob-go` (0,2,1), so the filled
   action inherited link grey and "Start free" measured 2.98:1 on its own
   near-black pill. */
body.home2 .nmob-list a,body.home2 .nmob-grid a{color:var(--d-ink2)}
/* The drawer's own pieces on daylight. The action stays a light pill on the
   dark site and flips to ink-on-paper here, matching the nav button above it. */
body.home2 .nmob-list a,body.home2 .nmob-grid a{color:var(--d-ink)}
body.home2 .nmob-list a:active,body.home2 .nmob-grid a:active{background:#F3F1EC}
body.home2 .nmob-grid a,body.home2 .nmob-cta,body.home2 .nmob-in{border-color:var(--d-line)}
/* the sticky bar fades into paper here, not into the dark site ground */
body.home2 .nmob-cta{background:var(--d-paper)}
/* The drawer is fixed, so the header above it has open page behind it: paint
   it, or content scrolls through the logo bar. (0,3,2) on purpose — it has to
   out-rank `body.home2 nav.stuck` at (0,2,2), which sets the scrolled tint. */
body.home2 .d-topstack.menu-open nav{background:var(--d-paper)}
body.home2 .nmob-sec{border-color:var(--d-line)}
/* .fmark is white — correct on the dark footer, invisible on paper. */
body.home2 .nmob-mark{color:var(--d-ink)}
body.home2 .nmob-go{background:var(--d-ink);color:var(--d-paper)}
body.home2 .nmob-in{color:var(--d-ink2)}
body.home2 .nmob-h{color:var(--d-ink)}
body.home2 .nmob-n{color:var(--d-ink3);border-color:var(--d-line)}

/* Buttons: black pills. Coral is saved for one filled button in the close. */
body.home2 .btn{
  background:var(--d-ink);color:var(--d-paper);border-radius:999px;
  transition:transform .18s ease,box-shadow .18s ease;
}
body.home2 .btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(17,17,20,.4)}
body.home2 .btn.lg{padding:15px 30px;font-size:16px}
body.home2 .btn.d-coral{background:var(--d-coral);color:#fff}
body.home2 :focus-visible{outline:2px solid var(--d-coral-deep);outline-offset:3px;border-radius:6px}

/* Footer: shared partial on its own dark ground — a light page may end dark,
   and the partial's white headings need it. */
body.home2 footer{background:#131318;border-top-color:#26262C}
/* The footer keeps its dark ground on daylight pages, so its colours are
   already correct and nothing needs overriding here. The action is a light
   pill on both stylesheets. */

/* Top stack. Sticky, not fixed: daylight heroes sit in normal flow and never
   padded for an out-of-flow nav, so here the stack takes its own space — which
   also means the dark half’s --ann-h body padding has to be cancelled. */
body.home2{padding-top:0}
body.home2 .d-topstack{position:sticky}
/* The drawer's scroll lock (overflow:hidden on the root) stops position:sticky
   resolving, so this header — sticky here, fixed on the dark site — snapped
   back to its static position and vanished off the top of any scrolled page,
   taking the drawer's measured start edge with it. Pin it outright for as long
   as the drawer is open. Taking it out of flow shifts the page up by its own
   height, which is invisible behind the overlay, and the matching padding
   keeps the document exactly as tall as it was, so nothing moves when the
   drawer closes. (0,3,2) so it beats the sticky rule above and the dark
   site's own .d-topstack. */
@media(max-width:1040px){
  html.nmob-lock body.home2 .d-topstack{position:fixed;top:0;left:0;right:0}
  html.nmob-lock body.home2{padding-top:var(--nmob-stack-h,0px)}
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.d-hero{position:relative;text-align:center;padding:96px 0 84px}
.d-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(52% 46% at 50% 0%, #FFEFE7 0%, rgba(255,239,231,0) 100%),
    radial-gradient(40% 34% at 82% 20%, #EDF3FC 0%, rgba(237,243,252,0) 100%);
}
.d-pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--d-coral-deep);background:#fff;border:1px solid #F6D8CE;
  border-radius:999px;padding:7px 15px;margin-bottom:26px;
}
.d-pill .d{width:6px;height:6px;border-radius:50%;background:var(--d-coral)}
.d-sub{font-size:18.5px;color:var(--d-ink2);max-width:44ch;margin:22px auto 0}
.d-cta{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:34px;flex-wrap:wrap}
.d-note{font-size:14px;color:var(--d-ink3)}

/* Floating proof. Anchored to centre and pushed past the headline's widest
   line, so they cannot collide with it at any viewport width. */
.d-float{
  position:absolute;background:var(--d-card);border:1px solid var(--d-line);
  border-radius:15px;box-shadow:var(--d-shadow);padding:11px 14px;
  font-size:13px;line-height:1.45;text-align:left;max-width:212px;
}
.d-float .tk{color:#3BA55D;font-size:11px;margin-left:6px}
.d-f1{left:calc(50% - 648px);top:122px;transform:rotate(-4deg)}
.d-f2{left:calc(50% - 668px);top:284px;transform:rotate(3deg)}
.d-f3{right:calc(50% - 648px);top:104px;transform:rotate(3deg)}
.d-f4{right:calc(50% - 674px);top:288px;transform:rotate(-3deg)}
.d-float.wa{background:var(--d-wa);border-color:#C4E7B4;color:var(--d-wa-ink)}
.d-float .cap{display:block;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--d-ink3);margin-bottom:6px}
.d-float .who{display:flex;align-items:center;gap:8px}
.d-float .avv{width:26px;height:26px;border-radius:50%;background:var(--d-sky);color:#3D5F94;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;flex:0 0 auto}
.d-float .nm{color:var(--d-ink);font-weight:500;font-size:13px}
.d-float .st{font-size:11.5px;color:var(--d-ink3)}
.d-float .band{display:inline-block;margin-top:7px;font-size:11px;font-weight:600;color:var(--d-coral-deep);background:var(--d-peach);border-radius:999px;padding:3px 9px}
.d-float .rs{font-family:var(--d-serif);font-size:19px;color:var(--d-ink)}

/* ── agent-card float parts ───────────────────────────────────────────────
   Every name is fl-* AND scoped under .d-float on purpose. `.bar` already
   exists at style.css:196 as the dark site's progress bar (66px wide, fill
   #20242c) — an unscoped `.bar` here would have silently inherited both a
   fixed width and a near-black fill on paper. */
.d-float .fl-t{display:block;font-size:12.5px;font-weight:500;color:var(--d-ink)}
.d-float .fl-bar{display:block;height:5px;border-radius:3px;background:#F0EEE9;overflow:hidden;margin:8px 0 6px}
.d-float .fl-bar i{display:block;height:100%;border-radius:3px;background:var(--d-coral)}
.d-float .fl-meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--d-ink3)}
.d-float .fl-meta b{color:var(--d-ink);font-weight:600}
.d-float .fl-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--d-coral);margin-right:6px}
.d-float .fl-q{display:block;font-size:12.5px;font-weight:500;color:var(--d-ink)}
.d-float .fl-a{display:block;margin-top:7px;padding-top:7px;border-top:1px solid var(--d-line);font-size:12px;color:var(--d-ink2)}
.d-float .fl-a b{color:var(--d-ink);font-weight:600}
@media (prefers-reduced-motion:no-preference){
  /* Four cards on one 7s cycle drift as a BLOCK — shared period, so they only
     ever separate by their delay and the eye reads one moving object. Distinct
     durations never come back into phase, which is what makes it read as four
     things floating rather than one panel sliding.

     translate/rotate are the individual properties, not transform: each float
     already carries its resting tilt in `transform`, and writing transform here
     would overwrite it and snap them all straight. */
  .d-float{animation:d-drift 8.5s ease-in-out infinite}
  .d-f1{animation-duration:8.5s}
  .d-f2{animation-duration:7.2s;animation-delay:1.4s}
  .d-f3{animation-duration:9.6s;animation-delay:.8s}
  .d-f4{animation-duration:8s;animation-delay:2.1s}
  @keyframes d-drift{
    0%,100%{translate:0 0;rotate:0deg}
    30%{translate:-3px -16px;rotate:.55deg}
    62%{translate:4px -8px;rotate:-.45deg}
  }
}
@media (max-width:1370px){.d-float{display:none}}

/* ── Section furniture ────────────────────────────────────────────────── */
.d-kick{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--d-coral-deep);margin:0 0 14px}
.d-center{text-align:center}
.d-center h2{margin:0 auto;max-width:24ch}
.d-lead{font-size:17px;color:var(--d-ink2);max-width:48ch;margin:16px 0 0}
.d-center .d-lead{margin-left:auto;margin-right:auto}

/* ── Showcase canvas ──────────────────────────────────────────────────── */
.d-canvas{
  margin-top:52px;border-radius:28px;padding:56px 24px;
  background:linear-gradient(135deg,#FFF0E8 0%,#FDF6EC 46%,#EDF3FC 100%);
  display:flex;justify-content:center;align-items:center;gap:34px;flex-wrap:wrap;
}
.d-phone{width:288px;background:#101014;border-radius:34px;padding:9px;flex:0 0 auto;box-shadow:0 24px 48px -20px rgba(17,17,20,.35)}
.d-scr{background:#F6F3EE;border-radius:26px;overflow:hidden}
.d-wahd{display:flex;align-items:center;gap:9px;background:#075E54;color:#fff;padding:12px 13px;text-align:left}
.d-wahd .avv{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.d-wahd .nm{font-size:13.5px;font-weight:500}
.d-wahd .st{font-size:10.5px;opacity:.75}
.d-msgs{padding:14px 11px;display:flex;flex-direction:column;gap:8px;background:#EFE9DF;min-height:264px}
.d-b{max-width:82%;padding:8px 11px;border-radius:10px;font-size:13px;line-height:1.42;box-shadow:0 1px 1px rgba(0,0,0,.07);text-align:left}
.d-b.in{background:#fff;color:#151515;align-self:flex-start;border-top-left-radius:3px}
.d-b.out{background:var(--d-wa);color:var(--d-wa-ink);align-self:flex-end;border-top-right-radius:3px}
.d-b .tm{display:block;text-align:right;font-size:9.5px;color:rgba(20,53,28,.55);margin-top:3px}
.d-b.in .tm{color:#9A978F}
.d-side{display:flex;flex-direction:column;gap:16px;max-width:270px}
.d-scard{background:var(--d-card);border:1px solid var(--d-line);border-radius:18px;box-shadow:var(--d-shadow);padding:16px 18px;text-align:left}
.d-scard .cap{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--d-ink3)}
.d-scard .big{font-family:var(--d-serif);font-size:30px;font-weight:460;color:var(--d-ink);line-height:1.15;margin-top:6px}
.d-scard .big em{font-style:normal;color:var(--d-coral-deep)}
.d-scard p{font-size:13px;color:var(--d-ink2);margin:7px 0 0}
.d-srow{display:flex;align-items:center;gap:10px;margin-top:11px}
.d-srow .avv{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;flex:0 0 auto}
.d-srow .nm{font-size:13px;font-weight:500;color:var(--d-ink);line-height:1.25}
.d-srow .st{font-size:11px;color:var(--d-ink3)}
.d-srow .sc{margin-left:auto;font-family:var(--d-serif);font-size:17px;color:var(--d-ink)}

/* ── Steps ────────────────────────────────────────────────────────────── */
.d-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:48px}
.d-tile{border-radius:22px;padding:28px 28px 26px;text-align:left}
.d-t1{background:var(--d-peach)}.d-t2{background:var(--d-sky)}
.d-t3{background:var(--d-butter)}.d-t4{background:var(--d-mint)}
.d-tile .n{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--d-ink3)}
.d-tile h3{font-family:var(--d-serif);font-weight:480;font-size:22px;letter-spacing:-.012em;color:var(--d-ink);margin:10px 0 8px;line-height:1.18}
.d-tile p{font-size:14.5px;color:var(--d-ink2);margin:0;max-width:38ch}
@media (max-width:720px){.d-tiles{grid-template-columns:minmax(0,1fr)}}

/* ── Agents ───────────────────────────────────────────────────────────── */
.d-flow{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:36px}
.d-fn{font-size:13px;color:var(--d-ink2);background:var(--d-card);border:1px solid var(--d-line);border-radius:999px;padding:8px 15px}
.d-fn.end{background:var(--d-ink);color:var(--d-paper);border-color:var(--d-ink)}
.d-farr{color:var(--d-ink3);font-size:12px}
.d-agrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:44px}
.d-acard{background:var(--d-card);border:1px solid var(--d-line);border-radius:20px;padding:22px 20px;text-align:left;transition:transform .18s ease,box-shadow .18s ease}
.d-acard:hover{transform:translateY(-3px);box-shadow:var(--d-shadow)}
.d-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:14px}
.d-acard h3{font-family:var(--d-serif);font-weight:500;font-size:19px;color:var(--d-ink);margin:0 0 6px}
.d-acard p{font-size:13.5px;color:var(--d-ink2);margin:0}
.d-acard .owns{font-size:12px;color:var(--d-ink3);border-top:1px solid var(--d-line);margin-top:14px;padding-top:11px}
.d-acard .owns b{color:var(--d-ink2);font-weight:500}
@media (max-width:960px){.d-agrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.d-agrid{grid-template-columns:minmax(0,1fr)}}

/* ── Stats ────────────────────────────────────────────────────────────── */
.d-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border-top:1px solid var(--d-line);border-bottom:1px solid var(--d-line);padding:44px 0}
.d-stat .v{font-family:var(--d-serif);font-weight:440;font-size:clamp(34px,4.4vw,52px);color:var(--d-ink);line-height:1}
.d-stat .l{font-size:14px;color:var(--d-ink2);margin-top:10px;max-width:24ch}
@media (max-width:640px){.d-stats{grid-template-columns:minmax(0,1fr);gap:30px}}

/* ── Verticals ────────────────────────────────────────────────────────── */
.d-verts{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:34px}
.d-vert{font-size:14px;color:var(--d-ink);background:var(--d-card);border:1px solid var(--d-line);border-radius:999px;padding:9px 18px;text-decoration:none}
.d-vert:hover{border-color:#D9D5CC}

/* ── Close ────────────────────────────────────────────────────────────── */
.d-close{
  background:#131318;border-radius:30px;text-align:center;padding:84px 28px;
  background-image:radial-gradient(60% 90% at 50% 110%,rgba(255,92,61,.22),rgba(255,92,61,0));
}
/* body.home2 h2 (0,1,2) outranks a bare .d-close h2 (0,1,1), so this rule
   MUST carry the body class or the headline computes to ink on the dark card
   and disappears. It did, on every daylight page, until 2026-08-28. */
body.home2 .d-close h2{color:#FBFAF6;max-width:20ch;margin:0 auto}
.d-close .d-lead{color:#B9B8BF;margin:16px auto 0}
.d-close .d-note{color:#807F88}

/* ── Shared page furniture ────────────────────────────────────────────────
   Promoted out of /agents when /goals needed the identical thing. Scoped to
   body.home2 so the dark site's own .rel/.relc keep their styling. */
body.home2 .rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:30px}
body.home2 .relc{
  display:block;text-decoration:none;background:var(--d-card);
  border:1px solid var(--d-line);border-radius:16px;padding:20px;
  box-shadow:none;transition:border-color .18s ease,transform .18s ease;
}
body.home2 .relc:hover{border-color:#DCD8D0;transform:translateY(-2px);box-shadow:none}
body.home2 .relc b{display:block;font-family:var(--d-serif);font-weight:500;font-size:17px;color:var(--d-ink);letter-spacing:0;margin-bottom:5px}
body.home2 .relc span{display:block;font-size:13.5px;line-height:1.5;color:var(--d-ink2)}
@media(max-width:760px){body.home2 .rel{grid-template-columns:minmax(0,1fr)}}