/* Night Ledger v3 (ZT-160 design lab, mock-up only; the URL stays /night-ledger-v2). Round 3 (Ivo, Sep 27): a short landing
   page (the calm hero, proof, three service teasers, advisors, how it works, guidance, Start online) plus three service
   pages, each with its own widgets. This file is shared by every page: tokens, surfaces, buttons, the header, the footer,
   the dock, the reveals, and the landing's sections. The service pages add pages.css (their hero stage, sections and the
   widgets' static fallbacks). Tokens come from /design-lab/shared/base.css. Slots style themselves in their own files,
   scoped to their slot (CONTRACT.md).
   Gold (round 3, "maybe too much gold"): gold for figures, hairlines and one highlight per screen. Everything else on dark
   is pearl (paper over charcoal): icons, outlines, dividers, the dust. */

/* Fraunces for headlines (Ivo, Sep 27, after Jorge asked for a font with more life). The exact Google Fonts woff2 files,
   self-hosted: weight 600, variable in optical size (9-144), so large headlines take the display cut on their own
   (font-optical-sizing is on by default). DM Sans 600-700 does the rest of the display work (Ivo, Oct 1): the "Zolt
   Advisors" wordmark (--f-mark), figures (.num, base.css) and step numbers. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(/nl/fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(/nl/fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Surfaces and text on dark: mixes of two brand colors, not new ones. */
  --night:var(--ink);--night-2:var(--ink2);
  --on-dark:color-mix(in srgb,var(--paper) 78%,var(--ink));      /* body on dark, 10:1 */
  --on-dark-2:color-mix(in srgb,var(--paper) 62%,var(--ink));    /* captions on dark, 6.3:1 or better */
  --gold-rule:rgba(226,194,122,.55);--gold-faint:rgba(226,194,122,.18);
  --gold-paper:rgba(184,145,63,.55);
  /* --gold-hot is the lightest gold in the mark's bezel (light, never text); --night-0 is the near-black of the stages. */
  --gold-hot:#FFF1BF;--night-0:#0B0D10;
  /* Pearl (round 3): paper over charcoal, for the accents gold used to carry. Outlines, dividers, icons, dust. */
  --pearl:color-mix(in srgb,var(--paper) 86%,var(--ink));
  --pearl-rule:rgba(251,250,247,.22);--pearl-faint:rgba(251,250,247,.1);--pearl-line:rgba(251,250,247,.5);
  --f-display:Fraunces,Georgia,serif;--f-mark:'DM Sans',system-ui,sans-serif;--f-body:'DM Sans',system-ui,sans-serif;

  /* Space: a 4/8 scale. The ledger rhythm is 32px. */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;--s11:160px;
  --pitch:32px;
  --gutter:clamp(20px,5vw,72px);--max:1296px;--col-gap:24px;

  /* Type: huge, bold headlines (Fraunces 600, since Sep 27). */
  --t-display:clamp(42px,6.6vw + 16px,118px);
  --t-ch:clamp(36px,4.8vw + 12px,100px);
  --t-h2:clamp(34px,3.6vw + 14px,76px);
  --t-lead:clamp(17px,.35vw + 15.5px,19px);
  --t-body:clamp(16px,.2vw + 15.3px,18px);
  --t-small:15px;--t-cap:13.5px;

  --head-h:80px;
  /* Buttons charge up: one gold light sweep along the edge per hover or focus. */
  --dur-charge:260ms;
  /* The notch on plates and frames: 28px tall, 14px across (the bolt's 1:2). */
  --plate-n:28px;
}
@media (max-width:760px){:root{--head-h:64px;--col-gap:16px;--plate-n:20px}}

html{scroll-padding-top:calc(var(--head-h) + 8px)}
/* While a #link is being held (script.js), the browser anchors its scroll on the target's section only. */
html[data-pin] main section:not([data-pin]){overflow-anchor:none}
body{background:var(--night);color:var(--ink);font-size:var(--t-body)}
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:12px 16px;background:var(--paper);color:var(--ink);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.skip:focus-visible{outline-color:var(--blue)}

/* Surfaces */
.night{position:relative;background:var(--night);color:var(--paper)}
.night2{position:relative;background:var(--night-2);color:var(--paper)}
.night0{position:relative;background:var(--night-0);color:var(--paper)}
.paper,.mist{position:relative;color:var(--ink)}
.paper{background:var(--paper)}
.mist{background:var(--mist)}
.paper::before,.mist::before{content:"";position:absolute;inset:0;background:url(/nl/textures/grain.svg);opacity:.05;pointer-events:none}
.paper>*,.mist>*{position:relative}
.paper :focus-visible,.mist :focus-visible{outline-color:var(--blue-d)}
/* Dark blocks carry .on-dark for a Miami Blue ring (6.1:1 on Ink). Repeated after the paper rule so a dark plate inside paper wins. */
.on-dark :focus-visible{outline-color:var(--blue)}
canvas.dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---------- Buttons and links ---------- */
/* Primary: Miami Blue, charcoal text, the bolt notch bottom-right, a pale gold hairline 5px inside that follows it
   (#FFF1BF, the lightest gold in the mark, at 55%: a fine light line on the blue, not an olive double border).
   Three clipped layers so the hairline stays 1px along the notch; the link itself is never clipped, so its ring shows.
   Inset d moves the notch by .7639 × d (the bolt's 1:2 diagonal), hence the --m offsets. */
.btn{--n:14px;--btn-line:rgba(255,241,191,.55);--sweep:linear-gradient(100deg,transparent 0 41%,rgba(255,241,191,0) 42%,var(--gold-hot) 50%,rgba(226,194,122,0) 58%,transparent 59% 100%) 100% 0/300% 100% no-repeat;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;color:var(--ink);font:600 16px/1.2 var(--f-body);letter-spacing:.005em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform var(--dur-tap) var(--ease-out)}
.btn::before,.btn::after,.btn>span::before{content:"";position:absolute;pointer-events:none}
.btn::before{inset:0;z-index:-3;background:var(--sweep),var(--blue);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--n)),calc(100% - var(--n) * .5) 100%,0 100%)}
.btn::after{--m:calc(var(--n) - 3.82px);inset:5px;z-index:-2;background:linear-gradient(100deg,var(--btn-line) 0 42%,var(--gold-hot) 50%,var(--btn-line) 58% 100%) 100% 0/300% 100% no-repeat;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--m)),calc(100% - var(--m) * .5) 100%,0 100%)}
.btn>span::before{--m:calc(var(--n) - 4.58px);inset:6px;z-index:-1;background:var(--blue);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--m)),calc(100% - var(--m) * .5) 100%,0 100%)}
/* Charge up: on hover or keyboard focus a gold light runs once along the button's edge and its hairline, left to right.
   It jumps back unseen when you leave, so it runs once per hover. */
.btn:is(:hover,:focus-visible)::before,.btn:is(:hover,:focus-visible)::after{background-position:0 0;transition:background-position var(--dur-charge) var(--ease-move)}
.btn:active{transform:scale(.98)}
/* A <button class="btn"> (the form's submit) drops the browser's own border and face. */
button.btn{-webkit-appearance:none;appearance:none;margin:0;border:0;background:none}
.btn-sm{--n:12px;min-height:44px;padding:0 20px;font-size:15px}
/* Quiet: charcoal with a pearl hairline that follows the notch, paper text (round 3: pearl, not gold). The gold light
   still runs along it on hover or focus, the button's one moment of gold. */
.btn-quiet{color:var(--paper)}
.btn-quiet::before{background:linear-gradient(100deg,var(--pearl-line) 0 42%,var(--gold-hot) 50%,var(--pearl-line) 58% 100%) 100% 0/300% 100% no-repeat}
.btn-quiet::after{--m:calc(var(--n) - .76px);inset:1px;background:linear-gradient(100deg,transparent 0 40%,rgba(255,241,191,.09) 50%,transparent 60% 100%) 100% 0/300% 100% no-repeat,var(--q-bg,var(--night))}
.btn-quiet>span::before{content:none}

/* Secondary: text with a hairline underline (pearl at rest) that draws in gold from the left on hover. */
.link{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--paper);font-weight:600;text-decoration:none}
.link::before,.link::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;pointer-events:none}
.link::before{background:var(--pearl-rule)}
.link::after{background:var(--gold-l);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--dur-ui-out) var(--ease-in)}
.link:hover::after{transform:scaleX(1);transition:transform var(--dur-ui) var(--ease-out)}
.paper .link{color:var(--blue-d)}
.paper .link::before{background:var(--gold-paper)}
.paper .link::after{background:var(--gold)}
/* A link inside a sentence (sources): underlined, so it never relies on color alone. Inline links are exempt from the 44px target. */
.in-link{color:var(--blue-d);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold-paper);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color var(--dur-ui) var(--ease-out)}
.in-link:hover{text-decoration-color:currentColor}
.on-dark .in-link{color:var(--paper);text-decoration-color:var(--pearl-rule)}
.on-dark .in-link:hover{text-decoration-color:var(--gold-l)}

/* The hairline with a bolt cut: a 7px gap and a stroke across it at the bolt angle (14px up for 7px across). Pearl on dark
   by default (color), gold where the page names it (a ledger rule). */
.hair{--at:clamp(48px,22%,280px);position:relative;display:block;height:15px;color:var(--pearl-rule)}
.hair::before,.hair::after,.hair i{content:"";position:absolute;height:1px;background:currentColor}
.hair::before{left:0;width:var(--at);top:7px}
.hair::after{left:calc(var(--at) + 7px);right:0;top:7px}
.hair i{left:calc(var(--at) + 3.5px - 7.826px);top:7px;width:15.652px;transform:rotate(-63.435deg)}

/* ---------- Header (every page) ---------- */
/* Fixed. Clear over the hero; a solid night bar fades in once you scroll (script.js sets data-scrolled). Opaque, so the huge
   headlines and the cream sections never ghost through behind the nav. */
.head{position:fixed;inset:0 0 auto;z-index:50;color:var(--paper)}
.head::before{content:"";position:absolute;inset:0;background:var(--night);border-bottom:1px solid var(--pearl-faint);opacity:0;transition:opacity var(--dur-ui-out) var(--ease-in);pointer-events:none}
.head[data-scrolled]::before,.head[data-open]::before{opacity:1;transition:opacity var(--dur-ui) var(--ease-out)}
.head-row{position:relative;display:flex;align-items:center;gap:var(--s5);height:var(--head-h)}
.brand{display:inline-flex;align-items:center;gap:var(--s3);min-height:44px;text-decoration:none;margin-right:auto}
.brand img{width:auto;height:33px}
@media (min-width:761px){.brand img{height:40px}}
.brand span{font:700 17px/1 var(--f-mark);letter-spacing:-.015em;white-space:nowrap}
.nav{display:flex;align-items:center;gap:var(--s6)}
.nav-list{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.nav-list>li>a{position:relative;display:inline-flex;white-space:nowrap;align-items:center;min-height:44px;min-width:44px;justify-content:center;padding-inline:9px;color:var(--on-dark);font:400 15px/1 var(--f-body);text-decoration:none;transition:color var(--dur-ui) var(--ease-out)}
.nav-list>li>a::after{content:"";position:absolute;left:9px;right:9px;bottom:10px;height:1px;background:var(--gold-l);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--dur-ui-out) var(--ease-in)}
.nav-list>li>a:hover{color:var(--paper)}
.nav-list>li>a:hover::after{transform:scaleX(1);transition:transform var(--dur-ui) var(--ease-out)}
/* The current page: paper words and a standing pearl rule (never color alone). */
.nav-list>li>a[aria-current="page"]{color:var(--paper);font-weight:600}
.nav-list>li>a[aria-current="page"]::after{transform:scaleX(1);background:var(--pearl-line)}
/* The service glyphs show inside the phone menu only. */
.nav-g{display:none;flex:none;width:26px;height:26px;margin-right:14px;color:var(--pearl);--gbg:var(--night-2)}

.nav-book{display:none}
/* The sound toggle (landing page only; fx.js wires it): a quiet text button with a small speaker drawn on the bolt's angle.
   Its name stays "Sound"; the state is aria-pressed, drawn as a slash across the speaker at 63.435deg (off) or two arcs
   (on). Its space is kept from the first paint, but it shows only once fx.js has wired it (html[data-fx-sound]), so it is
   never a dead button, and not at all where fx never runs (anything but a mouse or trackpad). */
.snd{flex:none;display:inline-flex;visibility:hidden;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 8px;border:0;background:none;color:var(--on-dark);font:600 14px/1 var(--f-body);white-space:nowrap;cursor:pointer;transition:color var(--dur-ui) var(--ease-out)}
.snd:hover,.snd[aria-pressed="true"]{color:var(--paper)}
.snd-ic{flex:none;width:18px;height:18px;fill:none;stroke:var(--pearl);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.snd-w{opacity:0;transition:opacity var(--dur-ui) var(--ease-out)}
.snd-x{transition:opacity var(--dur-ui) var(--ease-out)}
.snd[aria-pressed="true"] .snd-w{opacity:1}
.snd[aria-pressed="true"] .snd-x{opacity:0}
html[data-fx-sound] .snd{visibility:visible}
@media not all and (hover:hover) and (pointer:fine){.snd{display:none}}
/* Narrow windows with a mouse: the speaker alone (the words stay as its name). */
@media (max-width:420px){.snd [data-sound-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 4px 0 12px;border:0;background:none;color:var(--paper);font:600 15px/1 var(--f-body);cursor:pointer}
.menu-ic{position:relative;width:18px;height:9px}
.menu-ic i{position:absolute;left:0;right:0;height:1px;background:var(--pearl);transition:transform var(--dur-ui) var(--ease-out)}
.menu-ic i:first-child{top:0}.menu-ic i:last-child{bottom:0;left:6px}
/* Open: the two lines cross at the bolt angle, one each way. */
[data-open] .menu-ic i:first-child{transform:translateY(4px) rotate(63.435deg) scaleX(.62)}
[data-open] .menu-ic i:last-child{left:0;transform:translateY(-4px) rotate(-63.435deg) scaleX(.62)}

/* The menu folds into a sheet up to 1040 px: five links, the sound toggle and the button need about 1000 px on one line.
   The Spanish words run longer (and its service links carry an EN tag while the Spanish service pages wait), so its menu
   folds up to 1220 px (the same rules, html[lang="es"]; the bar needs about 1080 px of content). */
@media (max-width:1040px){
  .menu-btn{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:var(--head-h);flex-direction:column;align-items:stretch;gap:0;max-height:calc(100svh - var(--head-h));overflow-y:auto;padding:var(--s2) var(--gutter) var(--s6);background:var(--night-2);border-top:1px solid var(--pearl-faint);box-shadow:0 24px 48px -24px rgba(0,0,0,.6)}
  [data-open] .nav{display:flex}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list>li+li{border-top:1px solid var(--pearl-faint)}
  .nav-list>li>a{justify-content:flex-start;min-height:52px;padding-inline:0;font-size:17px;color:var(--paper)}
  .nav-list>li>a::after{left:0;right:auto;width:100%;bottom:12px}
  .nav-g{display:block}
  .nav-book{display:inline-flex;margin-top:var(--s5);align-self:flex-start}
  .nav-book{--q-bg:var(--night-2)}
}
@media (min-width:1041px) and (max-width:1220px){
  html[lang="es"] .menu-btn{display:inline-flex}
  html[lang="es"] .nav{display:none;position:absolute;left:0;right:0;top:var(--head-h);flex-direction:column;align-items:stretch;gap:0;max-height:calc(100svh - var(--head-h));overflow-y:auto;padding:var(--s2) var(--gutter) var(--s6);background:var(--night-2);border-top:1px solid var(--pearl-faint);box-shadow:0 24px 48px -24px rgba(0,0,0,.6)}
  html[lang="es"] [data-open] .nav{display:flex}
  html[lang="es"] .nav-list{flex-direction:column;align-items:stretch;gap:0}
  html[lang="es"] .nav-list>li+li{border-top:1px solid var(--pearl-faint)}
  html[lang="es"] .nav-list>li>a{justify-content:flex-start;min-height:52px;padding-inline:0;font-size:17px;color:var(--paper)}
  html[lang="es"] .nav-list>li>a::after{left:0;right:auto;width:100%;bottom:12px}
  html[lang="es"] .nav-g{display:block}
  html[lang="es"] .nav-book{display:inline-flex;margin-top:var(--s5);align-self:flex-start;--q-bg:var(--night-2)}
}
@media (max-width:560px){.head-book{display:none}.brand span{font-size:16px}}
/* The Spanish landing links to the English service pages for now (round 3). The folded menu says so in words, right-aligned
   on the row; the open bar shows a small EN tag and keeps the words for screen readers only. */
.nav-en{display:none}
.nav-note{margin-left:auto;padding-left:12px;color:var(--on-dark-2);font-size:13px;font-weight:400}
@media (min-width:1221px){
  .nav-note{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0}
  .nav-en{display:inline-block;margin:-9px 0 0 4px;padding:2px 3px 1px;border:1px solid var(--pearl-rule);color:var(--on-dark-2);font:600 9px/1 var(--f-body);letter-spacing:.06em}
}

/* ---------- Landing 1. Hero (round 4, Ivo, Sep 27: one reading line) ---------- */
/* The H1 says who Zolt is for and the deck says what it does (the old bottom lead and its hairline are gone; the category
   lives in the deck), then both buttons, the caption and the three service icons. The mark is the visual anchor on the right
   (on phones, top left on the reading line); its box is the hero3d slot, which comes first in the source so the intro's Skip
   button is the hero's first Tab stop, and the grid places it. The hero is 80% of the screen and 620 px at least, so 40-60 px
   of the next section's heading peeks in at 1440 x 900 as the scroll cue (no arrow, no bounce). Its last 160 px fade into
   that section's background, --hero-next: today the proof (--night); set it to whatever section follows once the order below
   the hero is decided. The mark's box stays smaller in area than the H1's text at every width, so the LCP element is always
   text, never the poster: the H1 (on Spanish phones, and at 320 px, the deck, which is longer there; both paint together). */
.hero{--mark-h:clamp(260px,min(52svh,33vw),480px);--hero-next:var(--night);position:relative;isolation:isolate;overflow:clip;display:flex;min-height:max(620px,80svh);background:var(--night);color:var(--paper)}
.hero-world{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-world::after{content:"";position:absolute;inset:auto 0 0;height:160px;background:linear-gradient(transparent,var(--hero-next))}
.hero-grid{flex:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr;column-gap:var(--col-gap);padding-top:calc(var(--head-h) + var(--s5));padding-bottom:var(--s6)}
/* The words sit above the slot (z-index 1), so no intro particle or live-3D bleed is ever drawn over them. */
.hero-copy{position:relative;z-index:1;grid-column:1/span 8;grid-row:1;align-self:center}
/* The H1 (38 characters) sets in three balanced lines from 901 px up, "One advisor / for you and / your business.": the
   measure is capped at 10em, so it never sets in two, and the size tops out at 100 px, where the 8-column measure (856 px)
   still holds three. It stays the page's largest type (the section H2s top out at 76 px). Tablets get three lines too;
   phones (560 px and under) three from 360 px, four only at 320. */
.hero h1{max-width:10em;color:var(--paper);font-size:clamp(38px,4.4vw + 24px,100px);line-height:.98;letter-spacing:-.05em;word-spacing:.08em;text-wrap:balance}
/* The tight tracking also narrows the word spaces; word-spacing gives them back on the H1 and every H2 so two words never
   read as one. The H2s get it from 561 px, where they are set large enough to need it. */
@media (min-width:561px){main h2{word-spacing:.08em}}
/* The power-up (hero3d.js) builds the mark from particles: while html[data-h3d-intro] is set (the head script, only when
   the intro will play) the poster stays hidden from the first paint. hero3d.js removes the attribute as soon as it runs
   and restores the poster itself. If it never runs, the poster comes back after 2.5 s. */
html[data-h3d-intro] [data-hero3d]>img{opacity:0;animation:nl-poster-back 240ms var(--ease-out) 2.5s both}
@keyframes nl-poster-back{from{opacity:0}to{opacity:1}}
.deck{margin-top:var(--s5);max-width:22em;color:var(--paper);font-size:clamp(19px,.8vw + 13px,26px);line-height:1.4;letter-spacing:-.005em}
/* The landing's deck carries the category now (two sentences), so it sets smaller and wider than the service pages' deck:
   three lines from 1280 px up (the Spanish one, about 25% longer, gets a wider measure to stay at three). */
.hero .deck{max-width:34em;font-size:clamp(18px,.45vw + 14.5px,22px);line-height:1.45;text-wrap:pretty}
html[lang="es"] .hero .deck{max-width:40em}
.hero-mark{position:relative;grid-column:9/-1;grid-row:1;align-self:center;justify-self:center;height:var(--mark-h);aspect-ratio:264/400}
.hero-mark>img{width:100%;height:100%}
/* The floor (round 4, "real glass on a lit floor"): the mark stands on a plain dark stage like the service pages' objects
   (pages.css, .stage-fb). Page CSS, not WebGL and not in the poster, so the poster, the intro and the live 3D share one floor.
   Both sit under the slot's canvases (z-index -1 in the hero's stacking context, above .hero-world) and never move.
   ::before is the lit floor, a faint pearl pool wider than the mark (lit before the mark forms, so it needs no hold).
   ::after is the contact shadow, the service stage's shadow (.72 to .34), tucked right under the lowest tip (91.1% of the
   slot, measured on the poster and the live 3D), its core 3% of the slot under the tip (14 px at 1440 and 1920), so the mark
   stands on the floor instead of floating over it. */
.hero-mark::before{content:"";position:absolute;left:-12%;right:-12%;bottom:-2%;height:12%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(251,250,247,.06),transparent)}
.hero-mark::after{content:"";position:absolute;left:20%;right:6%;bottom:3.75%;height:4.5%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(0,0,0,.72),rgba(0,0,0,.34) 56%,transparent)}
/* The floor waits for the mark: hidden with the poster from the first paint when the intro will play (back after 2.5 s if
   hero3d.js never runs), and while hero3d.js holds the poster back (the slot's data-h3d-hold; hero3d.css fades it up with
   the poster). Here too so it holds even before hero3d.css lands. */
html[data-h3d-intro] .hero-mark::after{opacity:0;animation:nl-poster-back 240ms var(--ease-out) 2.5s both}
.hero-mark[data-h3d-hold]::after{opacity:0}
.hero-micro{margin-top:var(--s3)}
/* Keeps a hyphenated pair (human-led, tech-powered) from breaking at its hyphen. */
.nw{white-space:nowrap}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s6)}
.micro{color:var(--on-dark-2);font-size:var(--t-cap)}
/* The three services as icons under the buttons: a small ledger row, one hairline cell each. Each links to its page. */
.hero-svc{margin-top:var(--s6)}
.hero-svc ul{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.hero-svc li+li{border-left:1px solid var(--pearl-faint)}
.hero-svc a{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;color:var(--on-dark);font-size:var(--t-small);font-weight:600;text-decoration:none;transition:color var(--dur-ui) var(--ease-out)}
.hero-svc li:first-child a{padding-left:0}
.hero-svc svg{flex:none;width:30px;height:30px;color:var(--pearl);--gbg:var(--night);transition:color var(--dur-ui) var(--ease-out)}
.hero-svc a:hover{color:var(--paper)}
.hero-svc a:hover svg{color:var(--gold-l)}

/* Tablets: the mark in its own row above the words, on the right; the two rows stay together in the middle of the hero. */
@media (max-width:900px){
  .hero{--mark-h:clamp(184px,26vw + 50px,300px)}
  .hero-grid{grid-template-rows:auto auto;align-content:center;padding-top:calc(var(--head-h) + var(--s4));padding-bottom:var(--s8)}
  .hero-mark{grid-column:1/-1;grid-row:1;justify-self:end;margin-right:6%}
  .hero-copy{grid-column:1/-1;grid-row:2;padding-top:var(--s5)}
}
/* Phones: the mark sits on the reading line, top left above the H1's first letter (round 4), so the eye reads down one edge
   and the words rise. The first screen (390 x 844) holds the headline, both buttons side by side and the three service
   icons; the mark shrinks on short screens (112 px at 672 tall and under, 150 px from 710). Its floor is the desktop one
   (the shadow's core 3% of the slot under the tip), which clears the H1's first glyph by 14 px or more. */
@media (max-width:560px){
  .hero{--mark-h:clamp(112px,100svh - 560px,150px)}
  .hero-grid{padding-top:calc(var(--head-h) + var(--s3));padding-bottom:var(--s7)}
  .hero-mark{justify-self:start;margin-right:0}
  .hero-copy{padding-top:var(--s3)}
  /* Three lines from 360 to 560 px ("One advisor / for you and / your business."), four only at 320; still above the
     largest phone H2 (34 px) at every width. */
  .hero h1{font-size:clamp(36px,10.4vw,46px)}
  .deck{margin-top:var(--s3);font-size:18px;line-height:1.42}
  .hero .deck{line-height:1.42}
  .ctas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);margin-top:var(--s5)}
  .ctas .btn{width:100%;padding-inline:10px;font-size:15px}
  .hero-micro{margin-top:var(--s2)}
  .hero-svc{margin-top:var(--s4)}
  .hero-svc ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--pearl-faint);border-bottom:1px solid var(--pearl-faint)}
  .hero-svc a,.hero-svc li:first-child a{flex-direction:column;justify-content:center;gap:6px;min-height:72px;padding:8px 4px;font-size:14px;text-align:center}
  .hero-svc svg{width:28px;height:28px}
}
@media (max-width:371px){.ctas{grid-template-columns:1fr}}
/* The Spanish mirror: "Reserve una llamada gratis" is too long to share a phone row, so the two buttons stack there. Its H1
   ("Un asesor para usted y su negocio.") is shorter than the English one, so it takes the same sizes at every width. */
@media (max-width:560px){html[lang="es"] .ctas{grid-template-columns:1fr}}
/* Spanish phones: the stacked buttons and the longer deck make the Spanish hero taller, so short screens tighten the spacing
   and the stacked buttons (48 px, still over 44). The mark follows the English formula (round 4). */
@media (max-width:560px) and (max-height:760px){
  html[lang="es"] .deck{margin-top:var(--s2)}
  html[lang="es"] .ctas{margin-top:var(--s4)}
  html[lang="es"] .ctas .btn{min-height:48px}
  html[lang="es"] .hero-svc{margin-top:var(--s3)}
}
/* Calm hero (Ivo, Sep 26): no space scene. Round 4: the plain dark stage of the service pages, a soft top light over the
   mark and a cool falloff at the edges, pearl only (the rim is the hero's one gold). On phones the light follows the mark
   to the reading line. */
.hero-calm{background:radial-gradient(30% 40% at 79% 28%,rgba(251,250,247,.06),transparent 72%),radial-gradient(90% 70% at 70% 40%,#232830,var(--night) 70%)}
@media (max-width:767px){.hero-calm{background:radial-gradient(60% 34% at 72% 22%,rgba(251,250,247,.06),transparent 70%),var(--night)}}
@media (max-width:560px){.hero-calm{background:radial-gradient(70% 26% at 18% 12%,rgba(251,250,247,.06),transparent 70%),var(--night)}}

/* ---------- Landing 2. Proof (charcoal) ---------- */
/* Jorge's experience as figures (placeholders until he sends them), the credentials word for word, and how to check them.
   Its last 160px fade from the charcoal into the services' near-black, so the step is a feather, not a seam. The figures
   are this screen's gold. */
.proof{padding-block:var(--s10) var(--s10);background:linear-gradient(rgba(11,13,16,0) calc(100% - 160px),var(--night-0)),var(--night)}
.proof-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.proof-head{grid-column:1/span 6}
.proof-head h2{font-size:clamp(30px,2.4vw + 14px,56px);line-height:1;letter-spacing:-.045em;text-wrap:balance}
@media (min-width:1061px){.proof-head h2{max-width:11em}}
.proof-head p{margin-top:var(--s4);max-width:22em;color:var(--on-dark);font-size:var(--t-lead)}
.figs-box{grid-column:7/-1;align-self:start;min-width:0}
.figs-k{margin-bottom:var(--s3);color:var(--paper);font-size:var(--t-small);font-weight:600;line-height:1.4}
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-self:start;margin:0;border-top:1px solid var(--gold-rule);border-bottom:1px solid var(--pearl-faint)}
.fig-c{display:flex;flex-direction:column;gap:12px;min-width:0;padding:var(--s5) var(--s4) var(--s5) 0}
.fig-c+.fig-c{padding-left:var(--s4);border-left:1px solid var(--pearl-faint)}
.figs dt{color:var(--on-dark-2);font-size:var(--t-cap);line-height:1.4}
.figs dd{margin:auto 0 0;color:var(--gold-l);font-size:clamp(30px,1.6vw + 14px,44px);line-height:1}
/* A figure Jorge hasn't sent yet: a dashed placeholder, never a made-up number. */
.figs dd.tbc{align-self:flex-start;padding:7px 9px;border:1px dashed var(--pearl-rule);color:var(--on-dark);font:600 13.5px/1.3 var(--f-body)}
.proof-hair{grid-column:1/-1;margin-block:var(--s8) var(--s7)}
.proof-creds{grid-column:1/span 5;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s5);align-self:start}
.pc h3{color:var(--paper);font-size:18px;letter-spacing:-.02em}
.pc ul{margin:var(--s3) 0 0;padding:0;list-style:none;border-bottom:1px solid var(--pearl-faint)}
.pc li{padding:12px 0 11px;border-top:1px solid var(--pearl-faint);color:var(--on-dark);font-weight:600;font-size:var(--t-small);line-height:1.4;text-wrap:balance}
.check{grid-column:7/-1}
.check h3{color:var(--paper);font-size:22px;letter-spacing:-.02em}
.check p{margin-top:var(--s3);max-width:34em;color:var(--on-dark);font-size:var(--t-small);line-height:1.6}
.check b{color:var(--paper)}
.check ol{margin:var(--s3) 0 0;padding-left:1.2em;color:var(--on-dark);font-size:var(--t-small);line-height:1.6}
.check ol li{padding-left:.2em}
.check ol li+li{margin-top:6px}
.check .link{margin-top:var(--s1)}
.check .link+p{margin-top:var(--s5)}
.check .fine{margin-top:var(--s4);color:var(--on-dark-2);font-size:var(--t-cap)}
.proof .lab-flag{grid-column:1/-1}
@media (max-width:1060px){
  .proof-head{grid-column:1/-1;margin-bottom:var(--s7)}
  .figs-box,.proof-creds,.check{grid-column:1/-1}
  .check{margin-top:var(--s8)}
}
@media (max-width:640px){
  .proof{padding-block:var(--s9) var(--s9)}
  .figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fig-c,.fig-c+.fig-c{padding:var(--s5) var(--s3) var(--s5) 0;border-left:0}
  .fig-c:nth-child(even){padding-left:var(--s4);border-left:1px solid var(--pearl-faint)}
  .fig-c:nth-child(n+3){border-top:1px solid var(--pearl-faint)}
  .proof-hair{margin-block:var(--s7) var(--s6)}
}
@media (max-width:480px){.proof-creds{grid-template-columns:1fr;row-gap:var(--s6)}}

/* ---------- Landing 3. The services: three teasers ([data-teaser], round 3) ---------- */
/* A ledger of three rows on the near-black, not a card grid: the words on one side and a small preview window on the other,
   alternating sides, each row between hairlines. Each preview is a still taste of its page's widget and carries that row's
   one gold: the "What's left" figure, the return's edge, the family's lines. teasers.js may animate inside .tz-view only. */
.svcs{padding-block:var(--s9) var(--s10);background:var(--night-0);color:var(--paper)}
.svcs-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end;margin-bottom:var(--s8)}
.svcs-head h2{grid-column:1/span 6;font-size:var(--t-h2);line-height:1;letter-spacing:-.045em}
.svcs-head p{grid-column:8/-1;max-width:24em;padding-bottom:.35em;color:var(--on-dark);font-size:var(--t-lead)}
.tz-list{border-bottom:1px solid var(--pearl-faint)}
.tz{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:center;padding-block:var(--s7);border-top:1px solid var(--pearl-faint)}
.tz-copy{grid-column:1/span 5;min-width:0}
.tz-view{grid-column:7/-1;min-width:0;margin:0}
.tz-tax .tz-copy{grid-column:8/-1;grid-row:1}
.tz-tax .tz-view{grid-column:1/span 6;grid-row:1}
.tz-g{width:34px;height:34px;color:var(--pearl);--gbg:var(--night-0)}
.tz-h{margin-top:var(--s4);color:var(--paper);font-size:clamp(28px,1.8vw + 14px,44px);line-height:1.02;letter-spacing:-.04em}
.tz-line{margin-top:var(--s4);max-width:26em;color:var(--on-dark);font-size:var(--t-lead);line-height:1.55}
.tz-copy .link{margin-top:var(--s4)}
/* Spanish landing: the service pages are English for now, said beside each link (the link also says it to screen readers). */
.tz-more{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;margin-top:var(--s4)}
.tz-copy .tz-more .link{margin-top:0}
.tz-en{color:var(--on-dark-2);font-size:var(--t-cap);line-height:1.3}
/* The preview window: a charcoal plate with a pearl hairline and the bolt notch, one fixed height per width so a module can
   animate inside it without moving the page. */
.tz-view{--n:22px;position:relative;display:grid;grid-template-rows:auto 1fr;height:300px;padding:22px 26px 24px;background:var(--night);box-shadow:inset 0 0 0 1px var(--pearl-faint);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--n)),calc(100% - var(--n) * .5) 100%,0 100%)}
.tz-cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;color:var(--on-dark-2);font-size:var(--t-cap);line-height:1.3}
.tz-cap>span:first-child{color:var(--paper);font-weight:600}
.tz-tag{padding:3px 8px;border:1px solid var(--pearl-rule);color:var(--on-dark);font-size:12px;letter-spacing:.01em}
/* Bookkeeping: three figures and six months of bars. */
.tz-glance{grid-template-rows:auto auto 1fr}
.tz-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:var(--s4) 0 0;border-top:1px solid var(--pearl-faint)}
.tz-figs>div{min-width:0;padding:12px 12px 0 0}
.tz-figs>div+div{padding-left:14px;border-left:1px solid var(--pearl-faint)}
.tz-figs dt{color:var(--on-dark-2);font-size:12.5px;line-height:1.3}
.tz-figs dd{margin:6px 0 0;color:var(--paper);font-size:clamp(20px,1vw + 12px,28px);line-height:1}
.tz-left dd{color:var(--gold-l)}
.tz-bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;gap:10px;min-height:0;padding-top:var(--s4)}
.tz-bars span{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:3px;height:100%;padding-bottom:20px}
.tz-bars span::before,.tz-bars span::after{content:"";display:block}
.tz-bars span::before{height:calc(var(--i) * 100%);background:linear-gradient(rgba(251,250,247,.5),rgba(251,250,247,.22))}
.tz-bars span::after{height:calc(var(--o) * 100%);background:rgba(251,250,247,.12)}
.tz-bars .is-now::before{background:linear-gradient(var(--gold-l),rgba(226,194,122,.45))}
.tz-bars b{position:absolute;left:0;right:0;bottom:0;color:var(--on-dark-2);font:400 11.5px/1 var(--f-body);text-align:center}
.tz-bars .is-now b{color:var(--paper);font-weight:600}
/* Tax: the pile, loose along the bolt diagonal, and the return it goes into. */
.tz-pile{grid-template-rows:auto 1fr;align-items:center}
.tz-docs{position:relative;display:grid;grid-template-columns:repeat(2,max-content);gap:10px 12px;align-self:center;margin:0;padding:0;list-style:none}
.tz-docs li{padding:14px 16px 26px;min-width:108px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--pearl-rule);color:var(--paper);font:600 14px/1.1 var(--f-display);letter-spacing:-.01em}
.tz-docs li:nth-child(1){transform:rotate(-5deg) translate(4px,6px)}
.tz-docs li:nth-child(2){transform:rotate(4deg) translate(-2px,-4px)}
.tz-docs li:nth-child(3){transform:rotate(3deg) translate(6px,2px)}
.tz-docs li:nth-child(4){transform:rotate(-3deg) translate(-4px,-2px)}
.tz-ret{position:absolute;right:26px;bottom:44px;display:grid;gap:8px;width:min(46%,250px);padding:18px 20px 22px;background:var(--paper);color:var(--ink);box-shadow:0 18px 30px -18px rgba(0,0,0,.8),inset 0 0 0 1px var(--gold)}
.tz-ret::before{content:"";position:absolute;left:20px;right:20px;top:10px;height:1px;background:var(--gold)}
.tz-ret-k{color:var(--mute);font-size:12.5px;line-height:1.2}
.tz-ret-f{font:600 17px/1.2 var(--f-display);letter-spacing:-.02em}
/* Insurance: the family as a gold-line star chart, and the two lines of cover. */
.tz-people{grid-template-rows:auto minmax(0,1fr) auto;row-gap:var(--s3)}
.tz-fam{justify-self:center;align-self:center;width:auto;max-width:100%;height:100%;min-height:0;color:var(--gold-l);overflow:visible}
.tz-fam-l{opacity:.7}
.tz-cover{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.tz-cover li{padding:5px 12px;border:1px solid var(--pearl-rule);color:var(--on-dark);font-size:13px;line-height:1.3}
@media (max-width:1060px){
  .svcs-head h2,.svcs-head p{grid-column:1/-1}
  .svcs-head p{margin-top:var(--s4)}
  .tz-copy,.tz-tax .tz-copy{grid-column:1/-1;grid-row:1}
  .tz-view,.tz-tax .tz-view{grid-column:1/-1;grid-row:2;margin-top:var(--s6);max-width:640px}
}
@media (max-width:640px){
  .svcs{padding-block:var(--s8) var(--s9)}
  .svcs-head{margin-bottom:var(--s6)}
  .tz{padding-block:var(--s6)}
  .tz-view{--n:18px;height:260px;padding:18px 18px 20px}
  .tz-figs dd{font-size:19px}
  .tz-bars{gap:6px}
  /* Phones: the four documents stay a small 2 x 2 pile at the top and the return sits under them, to the right, so no
     label ever hides under the return (the pile beside the return covered the K-1 at 390 px). */
  .tz-docs{align-self:start;margin-top:14px;gap:8px 10px}
  .tz-docs li{min-width:0;padding:10px 12px 16px;font-size:12.5px}
  .tz-ret{right:18px;bottom:18px;width:min(64%,300px);gap:4px;padding:12px 14px 14px}
  .tz-ret::before{left:14px;right:14px;top:7px}
  .tz-ret-f{font-size:15px}
}

/* ---------- Plates, frames and dials (the advisors, the service pages' "Who you'll work with") ---------- */
.lab-flag{max-width:46em;margin-top:var(--s8);padding:10px 14px;border:1px dashed var(--gold-paper);color:var(--mute);font-size:var(--t-cap);line-height:1.5}
.lab-flag-dark{border-color:var(--pearl-rule);color:var(--on-dark-2)}
/* The frame around the advisors' night windows: a gold hairline 10px out, following the notch. */
.frame{--n:calc(var(--plate-n) + 7.64px);position:relative;padding:10px}
.frame::before,.frame::after{content:"";position:absolute;pointer-events:none}
.frame::before{inset:0;background:var(--gold);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--n)),calc(100% - var(--n) * .5) 100%,0 100%)}
.frame::after{--m:calc(var(--n) - .76px);inset:1px;background:var(--frame-bg,var(--paper));clip-path:polygon(0 0,100% 0,100% calc(100% - var(--m)),calc(100% - var(--m) * .5) 100%,0 100%)}
.frame>*{position:relative;z-index:1}
.dial{position:relative;flex:none;aspect-ratio:1;color:var(--gold-l)}
.dial::before{content:"";position:absolute;inset:7.75%;border-radius:50%;background:radial-gradient(circle at 38% 30%,rgba(251,250,247,.07),rgba(22,25,29,.86) 62%)}
.dial-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dial-mark{position:absolute;left:50%;top:50%;height:65%;aspect-ratio:264/400;transform:translate(-50%,-50%)}
.dial-mark img{width:100%;height:100%}

/* ---------- Landing 4. Advisors (cream) ---------- */
.adv{padding-block:var(--s10) var(--s11)}
.adv-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.adv-head{grid-column:7/-1;grid-row:1;padding-top:var(--s5)}
.adv-head h2{font-size:var(--t-h2);line-height:1;letter-spacing:-.045em}
.adv-head p{margin-top:var(--s5);max-width:30em;color:var(--mute);font-size:var(--t-lead)}
.person{min-width:0}
.p-ivo{grid-column:1/span 5;grid-row:1/span 2}
.p-jorge{grid-column:8/span 4;grid-row:2/span 2;align-self:end;margin-top:var(--s8)}
.plate{--m:calc(28px - 7.64px);position:relative;z-index:1;overflow:hidden;background:var(--night);color:var(--paper);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--m)),calc(100% - var(--m) * .5) 100%,0 100%)}
.adv .frame{--n:28px}
.p-ivo .plate{aspect-ratio:4/5}
.p-jorge .plate{aspect-ratio:3/4}
.plate .dial{position:absolute}
.p-ivo .plate .dial{width:20%;bottom:7%;right:7%}
.p-jorge .plate .dial{width:24%;bottom:7%;right:7%}
.plate .dial-ring{--inner:0}
.plate-cap{position:absolute;left:9%;right:9%}
.p-ivo .plate-cap{bottom:8%;display:flex;flex-direction:column-reverse}
.p-jorge .plate-cap{top:8%}
.plate-name{font-size:clamp(44px,5.2vw,80px);line-height:1.02;letter-spacing:-.035em;color:var(--paper)}
.plate-name span{display:block}
.plate-role{margin-bottom:var(--s4);color:var(--on-dark);font-size:var(--t-small)}
.creds{margin:var(--s5) 0 0;padding:0;list-style:none;border-bottom:1px solid var(--gold-paper)}
.creds li{text-wrap:balance;padding:13px 0 12px;border-top:1px solid var(--gold-paper);font-weight:600;font-size:var(--t-small);line-height:1.4}
.handles{margin-top:var(--s4);color:var(--mute);font-size:var(--t-small);line-height:1.55;max-width:34em}
.handles-k{color:var(--ink);font-weight:600}
@media (max-width:1060px){
  .adv-head{grid-column:1/-1;grid-row:1;padding-top:0;margin-bottom:var(--s8)}
  .p-ivo{grid-column:1/span 6;grid-row:2}
  .p-jorge{grid-column:8/-1;grid-row:2/span 2;margin-top:var(--s10)}
}
@media (max-width:640px){
  .adv{padding-block:var(--s9) var(--s10)}
  .adv-grid{display:block}
  .adv-head{margin-bottom:var(--s7)}
  .p-ivo{width:88%}
  .p-jorge{width:88%;margin:var(--s9) 0 0 auto}
  .p-ivo .plate,.p-jorge .plate{aspect-ratio:5/4}
  .plate-name{font-size:clamp(34px,10vw,44px)}
  .plate-role{margin-bottom:var(--s3);font-size:14px}
}

/* ---------- Landing 5. How it works: the bolt timeline (v1) ---------- */
/* Three points on one gold line at 63.435deg (the screen's gold). script.js sets --R (row height) and --p (how much is written). */
.how-sec{overflow-x:clip;padding-block:var(--s10) var(--s11)}
.how{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.how-head{grid-column:1/span 5}
.how-head h2{font-size:var(--t-h2);line-height:1;letter-spacing:-.045em;color:var(--paper)}
.how-head p{margin-top:var(--s5);color:var(--on-dark);font-size:var(--t-lead)}
.how-head .motto{margin-top:var(--s6);color:var(--on-dark-2);font:600 15px/1.4 var(--f-body);letter-spacing:0}
.bolt{--R:176px;--x0:24px;--ext:40px;--pty:17px;grid-column:6/-1;position:relative;padding-top:var(--s2)}
.steps{margin:0;padding:0;list-style:none}
.steps li{position:relative;height:var(--R);padding-left:calc((2 - var(--i)) * var(--R) / 2 + var(--x0) + 76px)}
.pt{position:absolute;left:calc((2 - var(--i)) * var(--R) / 2 + var(--x0) - 5px);top:calc(var(--pty) - 5px);width:11px;height:11px;border-radius:50%;border:1px solid var(--gold-l);background:var(--night-2);transition:background-color var(--dur-ui) var(--ease-out)}
.steps li.on .pt,.no-draw .pt{background:var(--gold-l)}
.tick{display:none}
.fig{position:absolute;left:calc((2 - var(--i)) * var(--R) / 2 + var(--x0) + 24px);top:0;color:var(--gold-l);font:600 30px/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.fig::after{content:"";display:block;width:100%;height:1px;margin-top:6px;background:var(--gold-rule)}
.step-t h3{font-size:20px;line-height:1.3;letter-spacing:-.02em;color:var(--paper);padding-top:2px}
.step-t p{margin-top:var(--s2);max-width:27em;color:var(--on-dark);font-size:16px;line-height:1.55}
@media (min-width:641px){.steps li:last-child{height:auto;min-height:calc(var(--pty) + var(--ext))}}
.bolt-line{position:absolute;left:calc(var(--R) + var(--x0) + var(--ext) / 2);top:calc(var(--s2) + var(--pty) - var(--ext));width:calc((2 * var(--R) + 2 * var(--ext)) * 1.118034);height:1px;background:linear-gradient(90deg,transparent,var(--gold-l) 9%,var(--gold-l) 91%,transparent);transform-origin:0 50%;transform:rotate(116.565deg) scaleX(var(--p,1));transition:transform var(--dur-tap) linear}
@media (max-width:1060px){
  .how-head{grid-column:1/-1;margin-bottom:var(--s8)}
  .bolt{grid-column:1/-1}
}
@media (max-width:640px){
  .how-sec{padding-block:var(--s9) var(--s10)}
  .how-head{margin-bottom:var(--s6)}
  .bolt-line{left:20px;top:calc(var(--s2) + var(--pty));width:1px;height:var(--run,0px);background:var(--gold-l);transform-origin:50% 0;transform:scaleY(var(--p,1))}
  .steps li{height:auto;padding:52px 0 var(--s7) 48px}
  .steps li:last-child{padding-bottom:0}
  .pt{left:15px}
  .fig{left:48px}
  .tick{display:block;position:absolute;left:calc(20.5px - 11px);top:calc(var(--pty) - .5px);width:22px;height:1px;background:var(--gold-l);transform:rotate(-63.435deg) scaleX(0);transition:transform var(--dur-reveal) var(--ease-out)}
  .steps li.on .tick,.no-draw .tick{transform:rotate(-63.435deg) scaleX(1)}
}

/* ---------- Guidance, not guarantees (cream; the landing and every service page) ---------- */
.guide{padding-block:var(--s10) var(--s9)}
.guide-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end}
.guide h2{grid-column:1/span 7;max-width:8.5em;font-size:var(--t-h2);line-height:1;letter-spacing:-.045em}
.pull{grid-column:8/-1;padding-bottom:.2em;color:var(--ink);font-size:clamp(19px,.6vw + 15px,24px);line-height:1.45;letter-spacing:-.01em;text-wrap:balance}
@media (max-width:900px){
  .guide h2,.pull{grid-column:1/-1}
  .pull{margin-top:var(--s5);max-width:30em}
}

/* ---------- Landing 7. Start online: the closing section, the form and the free call ---------- */
/* Base styles for the form live here, so it reads and works before chapters/start.js (behavior) and start.css (states) load.
   Round 3: pearl outlines and ticks; gold only on the send button's charge-up and the error line. */
.start{padding-block:var(--s9) var(--s11);scroll-margin-top:-8px}  /* a #start link lands flush under the header, no cream sliver */
.start-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto 1fr;column-gap:var(--col-gap)}
.start-hair{grid-column:1/-1;grid-row:1;margin-bottom:var(--s8)}
.start-head{grid-column:1/span 5;grid-row:2}
.start h2{color:var(--paper);font-size:var(--t-h2);letter-spacing:-.045em;line-height:1}
.start-lead{margin-top:var(--s5);max-width:24em;color:var(--on-dark);font-size:var(--t-lead);line-height:1.6}
.start-call{grid-column:1/span 5;grid-row:3;align-self:start;margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--pearl-faint)}
.start-alt{margin-bottom:var(--s4);color:var(--paper);font-weight:600}
.start-call .micro{margin-top:var(--s3)}
.start-form{grid-column:7/-1;grid-row:2/span 2;display:grid;gap:var(--s6);min-width:0;color-scheme:dark}
.start-error{padding:12px 14px;border:1px solid var(--gold-l);background:rgba(226,194,122,.07);color:var(--paper);font-size:var(--t-small);line-height:1.5}
.start-error[hidden]{display:none}
.start-error a{color:inherit}
/* The Turnstile slot holds the widget's height from the first paint (start.css sizes it the same way once start.js sets
   data-ts: 65 px flexible, 140 px compact where the slot is under 300 px wide, i.e. below a 340 px viewport), so when a
   "Start online" link lands on #start the send button doesn't drop 65 px as the module mounts after load (integration,
   Sep 27). Without JS the form can't pass the spam check anyway, so the reserved gap costs nothing. */
.start-form .cf-turnstile{min-height:65px}
@media (max-width:339px){.start-form .cf-turnstile{min-height:140px}}
.sf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4)}
.sf-field{display:grid;align-content:start;gap:8px;min-width:0}
.sf-l{color:var(--paper);font-size:var(--t-small);font-weight:600;line-height:1.3}
.sf-h{margin:-2px 0 var(--s3);color:var(--on-dark-2);font-size:14px;line-height:1.45}
.start-form input:not([type="checkbox"]):not([type="radio"]),.start-form select{width:100%;min-width:0;min-height:52px;margin:0;padding:0 14px;border:1px solid rgba(251,250,247,.34);border-radius:0;background-color:rgba(251,250,247,.04);color:var(--paper);font:400 17px/1.3 var(--f-body);transition:border-color var(--dur-ui) var(--ease-out),background-color var(--dur-ui) var(--ease-out)}
.start-form input:not([type="checkbox"]):not([type="radio"]):hover,.start-form select:hover{border-color:var(--pearl-line)}
.start-form input:not([type="checkbox"]):not([type="radio"]):focus,.start-form select:focus{border-color:var(--paper);background-color:rgba(251,250,247,.07)}
/* The select's caret: two short strokes, like the menu's. */
.start-form select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;background-image:linear-gradient(45deg,transparent calc(50% - .6px),var(--pearl) calc(50% - .6px) calc(50% + .6px),transparent calc(50% + .6px)),linear-gradient(-45deg,transparent calc(50% - .6px),var(--pearl) calc(50% - .6px) calc(50% + .6px),transparent calc(50% + .6px));background-size:7px 7px;background-position:calc(100% - 25px) 50%,calc(100% - 18px) 50%;background-repeat:no-repeat}
.start-form select option{background:var(--night-2);color:var(--paper)}
.sf-set{min-width:0;margin:0;padding:0;border:0}
.sf-set>legend{float:left;width:100%;margin-bottom:10px;padding:0}
.sf-set>legend+*{clear:both}
.sf-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sf-opt{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border:1px solid var(--pearl-rule);color:var(--on-dark);font-size:16px;line-height:1.3;cursor:pointer;transition:border-color var(--dur-ui) var(--ease-out),background-color var(--dur-ui) var(--ease-out),color var(--dur-ui) var(--ease-out)}
.sf-opt:hover{border-color:var(--pearl-line);color:var(--paper)}
.sf-opt:has(:checked){border-color:var(--paper);background:rgba(251,250,247,.07);color:var(--paper)}
.sf-opt input,.consent input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--paper);cursor:pointer}
/* The ring goes round the whole option, not the small box inside it. */
@supports selector(:has(*)){
  .sf-opt:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:3px}
  .sf-opt input:focus-visible{outline:none}
}
.consent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;margin-top:var(--s5);color:var(--on-dark-2);font-size:var(--t-cap);line-height:1.55;cursor:pointer}
.consent input{margin-top:2px}
.consent a{color:var(--paper);text-decoration:underline;text-decoration-color:var(--pearl-rule);text-underline-offset:2px}
.consent a:hover{text-decoration-color:var(--gold-l)}
/* A2P: the second (newsletter) box sits closer to the first; "Text HELLO" under the boxes, then its disclosure. */
.consent + .consent{margin-top:var(--s3)}
.text-us{margin-top:var(--s5);color:var(--on-dark-2);font-size:var(--t-cap);line-height:1.55}
.text-us > a{color:var(--paper);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold-l);text-underline-offset:3px}
.text-us small{display:block;margin-top:6px;font-size:inherit;opacity:.85}
.text-us small a,.foot-text small a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.foot-text small{display:block;margin-top:4px;opacity:.8}
.sf-send{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)}
.sf-send .btn{min-width:min(100%,240px)}
.sf-foot{display:grid;gap:6px;margin-top:calc(var(--s2) * -1)}
.sf-note{color:var(--paper);font-size:var(--t-small);font-weight:600;line-height:1.5}
.sf-fine{color:var(--on-dark-2);font-size:var(--t-cap);line-height:1.5}
@media (max-width:1060px){
  .start-grid{grid-template-rows:auto}
  .start-head,.start-form,.start-call{grid-column:1/-1;grid-row:auto}
  .start-form{margin-top:var(--s8);max-width:720px}
  .start-call{max-width:720px}
}
@media (max-width:640px){
  .start{padding-block:var(--s8) var(--s10)}
  .start-hair{margin-bottom:var(--s7)}
  .start-form{margin-top:var(--s7);gap:var(--s5)}
  .sf-row{grid-template-columns:1fr}
  .sf-send .btn{width:100%}
}
@media (max-width:480px){.sf-opts:not(.sf-opts-2){grid-template-columns:1fr}}

/* ---------- Landing 8. Lab notes ---------- */
.notes{padding-block:var(--s8) var(--s10)}
.lab-notes{border-top:1px solid var(--pearl-faint);border-bottom:1px solid var(--pearl-faint)}
.lab-notes summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:72px;cursor:pointer;list-style:none;color:var(--paper);font:600 18px/1.3 var(--f-display);letter-spacing:-.02em}
.lab-notes summary::-webkit-details-marker{display:none}
.plus{position:relative;flex:none;width:16px;height:16px}
.plus::before,.plus::after{content:"";position:absolute;left:0;right:0;top:7.5px;height:1px;background:var(--pearl)}
.plus::after{transform:rotate(90deg);transition:transform var(--dur-ui) var(--ease-out)}
.lab-notes[open] .plus::after{transform:rotate(0)}
.notes-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:var(--s7) var(--s8);padding-block:var(--s5) var(--s8)}
.n-block h2{color:var(--paper);font-size:26px;letter-spacing:-.025em;margin-bottom:var(--s4)}
.n-block h3{color:var(--paper);font:600 17px/1.3 var(--f-body);letter-spacing:0;margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--pearl-faint)}
.n-block p,.n-block li{color:var(--on-dark);font-size:var(--t-small);line-height:1.6}
.n-block b{color:var(--paper)}
.n-block p+p,.n-block ul+p{margin-top:var(--s3)}
.n-idea{grid-column:1/-1;max-width:48em}
.n-idea p{color:var(--paper);font-size:var(--t-lead)}
.plain{margin:0;padding:0;list-style:none}
.plain li+li{margin-top:var(--s2)}

/* ---------- Footer (every page) ---------- */
.foot{overflow:clip;padding-block:var(--s8) calc(var(--s9) + 8px)}
.foot-row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;column-gap:var(--s5)}
.foot img{height:30px;width:auto}
.foot p{max-width:46em;color:var(--on-dark);font-size:var(--t-small);line-height:1.6}
.foot-nav ul{display:flex;flex-wrap:wrap;gap:0 var(--s5);margin:-10px 0 var(--s3);padding:0;list-style:none}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--paper);font-size:var(--t-small);font-weight:600;text-decoration:underline;text-decoration-color:var(--pearl-rule);text-underline-offset:4px;transition:text-decoration-color var(--dur-ui) var(--ease-out)}
.foot-nav a:hover{text-decoration-color:var(--gold-l)}
.foot-nav a[aria-current="page"]{text-decoration-color:var(--paper)}
.foot .foot-lab{color:var(--on-dark-2);font-size:var(--t-cap);white-space:nowrap}
@media (max-width:760px){
  .foot-row{grid-template-columns:auto minmax(0,1fr);row-gap:var(--s4)}
  .foot .foot-lab{grid-column:2;white-space:normal}
  .foot-nav ul{gap:0 var(--s4)}
}

/* ---------- Phones: the dock (every page) ---------- */
/* Once the page's hero ([data-hero]) has gone, both buttons stay in thumb reach; they step aside from the page's closing
   section ([data-dock-stop]) down (script.js sets data-on). Hidden, it is out of the tab order; the page keeps a matching
   scroll-padding so focus never lands under it. */
.dock{display:none}
@media (max-width:767px){
  html{scroll-padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  .dock{position:fixed;inset:auto 0 0;z-index:40;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);padding:var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));background:var(--night);border-top:1px solid var(--pearl-faint);transform:translateY(100%);visibility:hidden;transition:transform var(--dur-ui-out) var(--ease-in),visibility 0s linear var(--dur-ui-out)}
  .dock[data-on]{transform:none;visibility:visible;transition:transform var(--dur-ui) var(--ease-out),visibility 0s}
  .dock .btn{width:100%;min-height:48px;padding-inline:10px;font-size:15px}
  /* The design-lab bar moves up while the dock is out. */
  .labbar{transition:translate var(--dur-ui) var(--ease-out)}
  body:has(.dock[data-on]) .labbar{translate:0 calc(-72px - env(safe-area-inset-bottom))}
}
@media (max-width:371px){.dock{grid-template-columns:1fr}.dock-start{display:none}}
/* Spanish: the dock keeps the free call only below 481 px, where the two Spanish labels can't share a row. */
@media (max-width:480px){html[lang="es"] .dock{grid-template-columns:1fr}html[lang="es"] .dock-start{display:none}}
/* The lab bar at 320: the v3 link (script.js) pushes its hide button out of reach, so v1 steps out there (it stays in Overview). */
@media (max-width:359px){.labbar>a[href="/design-lab/night-ledger"]{display:none}}

/* ---------- Snappy reveals and the flash (every page) ---------- */
/* script.js marks each section's heading group that starts below the fold with data-rv="" (hidden, a step back along the
   bolt diagonal) and sets data-rv="in" as it arrives: a short arrival, then a small flash under the heading, once: a pearl
   line runs out from the heading's first letter with a hot-gold spark at its tip, and fades (round 3: pearl, the spark the
   only gold). Transform and opacity only. Nothing here applies without JS or under reduced motion. */
[data-rv=""]{opacity:0;transform:translate(var(--arrive-x),var(--arrive-y))}
[data-rv="in"]{transition:opacity 220ms var(--ease-out),transform 300ms var(--ease-out)}
[data-rv] h2{position:relative}
[data-rv] h2::before,[data-rv] h2::after{content:"";position:absolute;pointer-events:none;opacity:0}
[data-rv] h2::after{left:0;bottom:-.08em;width:3.2em;height:2px;background:linear-gradient(90deg,rgba(251,250,247,0),rgba(251,250,247,.7) 62%,var(--paper));transform:scaleX(0);transform-origin:0 50%}
[data-rv] h2::before{left:-5px;bottom:calc(-.08em - 4px);width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,var(--gold-hot) 0 24%,rgba(255,241,191,.4) 46%,rgba(255,241,191,0) 70%)}
[data-rv="in"] h2::after{animation:nl-flash 380ms var(--ease-out) 240ms both}
[data-rv="in"] h2::before{animation:nl-spark 380ms var(--ease-out) 240ms both}
@keyframes nl-flash{0%{opacity:1;transform:scaleX(0)}55%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes nl-spark{0%{opacity:0;transform:translateX(0)}8%{opacity:1}55%{opacity:1;transform:translateX(3.2em)}100%{opacity:0;transform:translateX(3.2em)}}
/* On cream the flash is the deeper gold (pearl would vanish on paper). */
.paper [data-rv] h2::after{background:linear-gradient(90deg,rgba(184,145,63,0),var(--gold))}
.paper [data-rv] h2::before{background:radial-gradient(circle,var(--gold) 0 24%,rgba(184,145,63,.35) 46%,rgba(184,145,63,0) 70%)}

@media (prefers-reduced-motion:reduce){
  .btn:is(:hover,:focus-visible)::before,.btn:is(:hover,:focus-visible)::after{transition:none;background-position:100% 0}
  .bolt-line,.tick{transition:none}
  [data-rv]{opacity:1!important;transform:none!important;transition:none!important}
  [data-rv] h2::before,[data-rv] h2::after{display:none}
}

/* ---------- Headline font: Fraunces (Sep 27) ---------- */
/* Every heading on these pages takes Fraunces. The sections set their headings tight (-.045em); a serif needs less, so the
   tracking is reset here once instead of in each section's rule. */
h1,h2,h3{font-family:var(--f-display)}
:is(h1,h2,h3){letter-spacing:-.018em!important}

/* ---------- App screens (the homepage's "How we work" and the bookkeeping page): the client app's shape, sample data only ---------- */
.app-steps{list-style:none;margin:var(--s7) 0 var(--s4);padding:0;display:grid;gap:var(--s5);grid-template-columns:repeat(4,minmax(0,1fr))}
.app-steps>li{display:flex;flex-direction:column;gap:var(--s4)}
.app-steps h3{display:flex;align-items:baseline;gap:var(--s3);font-size:clamp(17px,.4vw + 14.5px,20px);line-height:1.2;letter-spacing:-.02em;color:var(--paper)}
/* One small app screen per step: the client app's shape, sample data (as-note says so under the row). */
.as-screen{aspect-ratio:4/3;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:var(--s5);border:1px solid var(--pearl-rule);border-radius:20px;background:linear-gradient(180deg,var(--night-0),var(--night));color:var(--paper);font-size:13px;line-height:1.3}
.as-k{margin:0;color:var(--on-dark-2);font-size:12px;letter-spacing:.02em}
.as-big{margin:0;font:600 clamp(16px,.6vw + 12px,19px)/1.15 var(--f-display);letter-spacing:-.02em}
.as-ok{margin:0;display:inline-flex;align-items:center;gap:6px;color:var(--gold-l);font-weight:600}
.as-ok::before{content:"";width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,var(--gold-l) 0 3px,transparent 3.5px),rgba(226,194,122,.18)}
.as-files{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.as-files li{display:flex;justify-content:space-between;align-items:center;padding:5px 8px;border-radius:8px;background:rgba(251,250,247,.05)}
.as-files li::after{font-size:12px}
.as-files li.ok::after{content:"✓";color:var(--gold-l)}
.as-files li.up::after{content:"";width:34px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--pearl) 0 60%,var(--pearl-faint) 60%)}
.as-rem{margin:0;display:flex;gap:8px;padding:6px 8px;border-radius:8px;background:rgba(251,250,247,.05)}
.as-rem b{color:var(--gold-l);font-weight:600;min-width:4.2em}
.as-note{margin:0 0 var(--s6);color:var(--on-dark-2);font-size:13px}
@media (max-width:1060px){.app-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.app-steps{grid-template-columns:1fr}.as-screen{aspect-ratio:auto;min-height:120px}}

/* The progress row, shared by the hero glimpse and step 3: four stages, the current one lit. */
.ag-steps{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;font-size:10px;color:var(--on-dark-2)}
.ag-steps li{padding-top:7px;border-top:2px solid var(--pearl-faint)}
.ag-steps li.done{border-top-color:var(--pearl)}
.ag-steps li.now{border-top-color:var(--gold-l);color:var(--paper);font-weight:600}
.gold-w{color:var(--gold-l)}