/* Aminco home v8: the account book, consumer edition. Paper hero, gold thread and coins, glass; rounder, warmer, Manrope labels. Loaded after site.css. */

/* ---------------------------------------------------------------- nav: minimal, one action */

/* ---------------------------------------------------------------- section heads */
.two{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.15;font-size:clamp(26px,3.2vw,44px);text-wrap:balance}


/* ---------------------------------------------------------------- bento */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.bcard.b6{grid-column:span 6}.bcard.b8{grid-column:span 8}.bcard.b12{grid-column:span 12}.bcard.b3{grid-column:span 3}
.bcard .t{font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.7vw,24px);line-height:1.25;letter-spacing:-.01em}
.bcard .t span{color:var(--ink-3)}
.bcard p{color:var(--ink-2);font-size:14.5px;max-width:48ch}
.bcard .big{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.6vw,52px);line-height:1;letter-spacing:-.02em}
.bcard .fig{margin-top:auto;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:12.5px;display:flex;flex-direction:column;gap:6px}
.bcard .fig .l{display:flex;justify-content:space-between;gap:10px;color:var(--ink-2)}
.bcard .fig .l b{color:var(--navy);font-weight:700;font-variant-numeric:tabular-nums}
.bcard .fig .bar{margin-top:2px}
.sec.navy .bcard p{color:rgba(255,255,255,.78)}
.sec.navy .bcard .t span{color:rgba(255,255,255,.55)}
.sec.navy .bcard .fig{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.sec.navy .bcard .fig .l{color:rgba(255,255,255,.75)}.sec.navy .bcard .fig .l b{color:#fff}
@media (max-width:1000px){.bcard,.bcard.b3,.bcard.b6,.bcard.b8{grid-column:span 6}}
@media (max-width:640px){.bento{gap:12px}.bcard,.bcard.b3,.bcard.b6,.bcard.b8,.bcard.b12{grid-column:span 12;min-height:0}}

/* ---------------------------------------------------------------- sectors: cards come in, hold and fade away as you scroll */
.rail-sec{position:relative;--n:7}
.rail-sec.pin{height:calc(var(--n) * 62vh + 100svh)}   /* JS sets the exact height */
.rail-sticky{position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;justify-content:center;overflow:clip;padding:0 var(--side)}
.rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(20px,3vh,36px)}
.rail-head .eyebrow{display:block;margin-bottom:10px}
.rail-head .cnt{font-family:var(--mono);font-size:12px;color:var(--ink-3);white-space:nowrap}
.sstack{display:grid;width:100%;max-width:1180px;margin:0 auto}
.sstack{list-style:none;padding:0}
.sstack>li{grid-area:1/1;display:block}
.scard{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;color:var(--ink);text-decoration:none;will-change:transform,opacity}
.scard img{width:100%;height:auto;aspect-ratio:5/4;max-height:min(56svh,520px);object-fit:cover;border-radius:var(--rc);display:block;background:var(--navy)}
.scard .n{font-family:var(--mono);font-size:11.5px;color:var(--gold-ink);letter-spacing:.08em}
.scard h3{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,46px);line-height:1.05;letter-spacing:-.02em;margin:10px 0 12px}
.scard .line{font-size:clamp(16px,1.3vw,19px);line-height:1.4;max-width:40ch}
.scard .body{font-size:15px;color:var(--ink-2);margin-top:12px;max-width:48ch}
.scard .st{display:flex;gap:clamp(18px,2.4vw,32px);margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap}
.scard .st div b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.1}
.scard .st div span{font-size:12px;color:var(--ink-3)}
.scard .link{margin-top:22px;font-size:13px}
.scard:hover img{filter:brightness(1.04)}
.rail-sec.pin .scard{pointer-events:none}
.rail-sec.pin .scard.cur{pointer-events:auto}
.rail-dots{display:flex;gap:6px;margin-top:clamp(16px,3vh,28px)}
.rail-dots i{width:22px;height:3px;border-radius:2px;background:var(--line);transition:background .3s}
.rail-dots i.on{background:var(--gold)}
/* list: phones, coarse pointers, short screens, reduced motion and no JS. Cards fade with their distance from the middle of the screen. */
.rail-sec.list{height:auto;padding:clamp(72px,9vw,140px) 0}
.rail-sec.list .rail-sticky{position:static;height:auto;overflow:visible}
.rail-sec.list .sstack{gap:clamp(28px,5vw,48px)}
.rail-sec.list .sstack>li{grid-area:auto}
.rail-sec.list .scard{grid-template-columns:1fr;gap:16px;align-items:start}
.rail-sec.list .scard img{aspect-ratio:3/2;max-height:360px}
.rail-sec.list .rail-dots,.rail-sec.list .cnt{display:none}
@media (min-width:700px) and (max-width:899px){.rail-sec.list .scard{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}.rail-sec.list .scard img{aspect-ratio:4/5;max-height:420px}}


/* ---------------------------------------------------------------- lists */
.rows2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rows2 .r{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--rc);border-top:1px solid var(--gold);padding:18px 20px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.rows2 .r .ic{width:36px;height:36px;border-radius:10px;background:var(--navy);color:var(--gold-soft);display:grid;place-items:center}
.rows2 .r .ic svg{width:17px;height:17px}
.rows2 .r b{display:block;font-family:var(--serif);font-weight:400;font-size:18px;margin-bottom:4px}
.rows2 .r span{font-size:13.5px;color:var(--ink-2)}
@media (max-width:760px){.rows2{grid-template-columns:1fr}}
.outs{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--rc);border-top:1px solid var(--gold);overflow:hidden}
.outs th,.outs td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
.outs th{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:var(--bg)}
.outs td:first-child{font-weight:700;white-space:nowrap}
.outs td.k{font-family:var(--mono);font-size:12.5px;color:var(--gold-ink);white-space:nowrap}
.outs tr:last-child td{border-bottom:0}

/* ---------------------------------------------------------------- news / research compact */
.nlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.nlist{grid-template-columns:1fr}}
.ncard{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--rc);overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s,transform .25s var(--ease)}
.ncard:hover{border-color:var(--gold)}
.ncard .ph{aspect-ratio:16/9;overflow:hidden}
.ncard .ph img{width:100%;height:100%;object-fit:cover}
.ncard .tx{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.ncard .meta{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ncard .h3{font-size:18px}


.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}



/* ================================================================ liquid glass
   Every surface is translucent, blurred and edge-lit. Soft colour sits behind the page (body::before) and inside the
   navy bands so the glass has something to refract. Blur is dropped on coarse pointers for the cards that fade on
   scroll (repainting a blur every frame is expensive on phones); they stay translucent. */
body.v5{--glass:rgba(255,255,255,.56);--glass-strong:rgba(255,255,255,.74);--glass-line:rgba(255,255,255,.85);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(184,150,74,.14);
  --glass-shadow:var(--shadow-soft);
  --dglass-line:rgba(255,255,255,.18);--dglass-edge:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(227,205,152,.12);
  --blur:blur(18px) saturate(160%)}
body.v5::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(42% 38% at 12% 8%,rgba(184,150,74,.22),transparent 70%),
  radial-gradient(38% 34% at 88% 22%,rgba(16,34,74,.16),transparent 70%),
  radial-gradient(34% 30% at 70% 78%,rgba(184,150,74,.16),transparent 70%),
  radial-gradient(30% 30% at 18% 86%,rgba(16,34,74,.13),transparent 70%)}
body.v5 .sec.v5:not(.white):not(.navy){background:transparent}
body.v5 .sec.white,body.v5 .rail-sec.white{background:rgba(255,255,255,.42)}
body.v5 .phead{background:rgba(255,255,255,.34)}
/* navy bands carry their own colour so dark glass refracts it */
body.v5 .sec.navy,body.v5 #security{background:
  radial-gradient(46% 60% at 86% 18%,rgba(184,150,74,.30),transparent 70%),
  radial-gradient(40% 55% at 8% 92%,rgba(72,112,196,.38),transparent 70%),
  radial-gradient(30% 40% at 55% 50%,rgba(255,255,255,.05),transparent 70%),var(--navy)}
/* chrome */
body.v5 .drawer{background:rgba(246,246,244,.72);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
/* pills */
body.v5 .btn{background:var(--glass);border:1px solid var(--glass-line);color:var(--navy);-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);box-shadow:var(--glass-edge),0 10px 26px -16px rgba(16,34,74,.4);transition:transform .25s var(--ease),box-shadow .25s,background .25s}
body.v5 .btn:hover{background:var(--glass-strong);color:var(--navy);transform:translateY(-1px)}
body.v5 .btn.gold,body.v5 .btn.gold:hover{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 55%),var(--gold);border-color:rgba(255,255,255,.4);color:var(--navy);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.1),0 12px 28px -12px rgba(184,150,74,.8)}
body.v5 .btn.solid,body.v5 .btn.solid:hover,body.v5 .nav ul .acct a,body.v5 .nav ul .acct a:hover,body.v5 .wlm .role button[aria-pressed=true],body.v5 .mk .btnrow span.pri{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 55%),var(--navy);border:1px solid rgba(255,255,255,.24);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.2),0 12px 28px -14px rgba(16,34,74,.75)}
body.v5 .nav ul .signin a,body.v5 .wlm .role button,body.v5 .mk .btnrow span,body.v5 .wlm .x{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-edge);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.v5 .nav ul .signin a:hover,body.v5 .wlm .x:hover{background:var(--glass-strong);border-color:var(--glass-line)}
body.v5 .sec.navy .btn:not(.gold):not(.solid){color:#fff;background:rgba(255,255,255,.1);border-color:var(--dglass-line);box-shadow:var(--dglass-edge)}
/* light glass surfaces */
body.v5 .bcard,body.v5 .fcard,body.v5 .card,body.v5 .pcard,body.v5 .panel,body.v5 .mock,body.v5 .ncard,body.v5 .irp,body.v5 .rows2 .r,body.v5 .outs,body.v5 .layer,body.v5 .path li,body.v5 .wlm .box{
  background:linear-gradient(135deg,rgba(255,255,255,.66),rgba(255,255,255,.42));border:1px solid var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),var(--glass-shadow)}
body.v5 .mock .mk{background:rgba(255,255,255,.74);border:1px solid var(--glass-line);box-shadow:var(--glass-edge),0 16px 36px -18px rgba(16,34,74,.4)}
body.v5 .formula code{background:rgba(255,255,255,.5);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--glass-edge)}
body.v5 .input{background:rgba(255,255,255,.55);border:1px solid var(--glass-line);border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--glass-edge)}
body.v5 .input:focus{border-color:var(--navy);background:rgba(255,255,255,.8)}
body.v5 .wlm{background:rgba(16,34,74,.35);-webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%)}
body.v5 .wlm .box{background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,255,255,.66));box-shadow:var(--glass-edge),0 40px 100px -30px rgba(0,0,0,.55)}
/* dark glass surfaces (inside navy bands) */
body.v5 .sec.navy .bcard,body.v5 .bento.navy .bcard,body.v5 .bcard.navy,body.v5 #security .bcard,body.v5 .sec.navy .path li,body.v5 #security .path li,body.v5 .sec.navy .input{
  background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.05));border:1px solid var(--dglass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--dglass-edge),0 18px 44px -22px rgba(0,0,0,.55);color:#fff}
body.v5 .sec.navy .input::placeholder{color:rgba(255,255,255,.55)}
body.v5 .sec.navy .input:focus{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.16)}
/* sector cards: the text panel is a glass pane laid over the edge of the photo */
body.v5 .scard{gap:0}
body.v5 .scard .in{position:relative;z-index:1;padding:clamp(22px,2.6vw,36px);border-radius:var(--rc);margin-left:clamp(-84px,-5vw,-40px);
  background:linear-gradient(135deg,rgba(255,255,255,.84),rgba(255,255,255,.64));border:1px solid var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),var(--glass-shadow)}
body.v5 .rail-sec.list .scard{gap:0}
@media (max-width:699px){body.v5 .rail-sec.list .scard .in{margin:-48px 14px 0}}
@media (min-width:700px) and (max-width:899px){body.v5 .rail-sec.list .scard .in{margin:0 0 0 -40px}}
/* phones: translucent without blur on the cards that repaint every frame */
@media (pointer:coarse){body.v5 .scard .in{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.93)}
  body.v5 .bcard,body.v5 .fcard,body.v5 .mock,body.v5 .ncard,body.v5 .irp,body.v5 .rows2 .r,body.v5 .layer,body.v5 .path li{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.84)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.v5 .nav{background:rgba(246,246,244,.96)}body.v5 .drawer{background:rgba(246,246,244,.98)}
  body.v5 .bcard,body.v5 .fcard,body.v5 .card,body.v5 .pcard,body.v5 .panel,body.v5 .mock,body.v5 .ncard,body.v5 .irp,body.v5 .rows2 .r,body.v5 .outs,body.v5 .layer,body.v5 .path li,body.v5 .wlm .box,body.v5 .scard .in{background:rgba(255,255,255,.94)}}

/* impact: the photo is a wallpaper behind the section that fades out towards the bottom */
#impact{position:relative;isolation:isolate;overflow:hidden}
#impact::before{content:'';position:absolute;inset:0;z-index:-1;background:url(/assets/img/lagos-sunset.jpg) center 35%/cover no-repeat;opacity:.3;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 45%,transparent 95%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 45%,transparent 95%)}
#impact::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(246,246,244,.5),rgba(246,246,244,.15) 55%,transparent)}

/* a11y + small-screen chrome */
body.v5 .skip{position:absolute;left:-9999px;top:10px;z-index:200;background:var(--navy);color:#fff;padding:10px 16px;border-radius:99px;font-weight:700}
body.v5 .skip:focus{left:12px}
@media (max-width:980px){body.v5 .nav ul{display:flex;gap:10px;margin-left:auto;margin-right:12px}body.v5 .nav ul li:not(.acct){display:none}body.v5 .nav ul .acct a{padding:8px 14px;font-size:13px;white-space:nowrap}}
.rail-head .early{margin-top:14px;display:inline-flex}
@media (max-height:780px){.rail-sec.pin .rail-head .early{display:none}}

@media (max-height:720px){.rail-sec.pin .scard .body{display:none}}
@media (max-width:640px){.outs td:first-child,.outs td.k{white-space:normal}.outs th,.outs td{padding:12px 10px}}
@media print{.reveal,.scard{opacity:1!important;transform:none!important}.rail-sec.pin{height:auto!important}.rail-sticky{position:static!important;height:auto!important;overflow:visible!important}.sstack>li{grid-area:auto!important}.nav,.foot,.wlm,.skip{display:none!important}}


/* figures under What we do (v4) */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--line);padding-top:26px;margin:clamp(28px,4vw,48px) 0 clamp(28px,4vw,48px)}
.figs b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.8vw,40px);line-height:1;letter-spacing:-.02em;color:var(--navy)}
.figs span{display:block;font-size:13.5px;color:var(--ink-3);margin-top:8px;max-width:20ch;line-height:1.4}
@media (max-width:760px){.figs{grid-template-columns:1fr 1fr;gap:24px 16px}}

/* sectors: the current card's photo drifts like film, and the money tie pulses under the stats */
.rail-head .sub{margin:12px 0 0;color:var(--ink-2);max-width:48ch;font-size:15px}
.scard img{transition:transform 9s linear}
.scard.cur img{transform:scale(1.06)}
@media (max-height:800px){.rail-sec.pin .scard .body{display:none}}
@media (prefers-reduced-motion:reduce){.scard img,.scard.cur img{transform:none;transition:none}}

/* ================================================================ v7: the account book */
body.v5{--rule:rgba(16,34,74,.075);--ring:var(--bg)}
.sec.navy,body.v5 #security{--ring:var(--navy)}
body.v5 .eyebrow{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
body.v5 .tag,body.v5 .chip,body.v5 .social a,body.v5 .skip{border-radius:3px}
body.v5 .input{border-radius:3px}
body.v5 .btn{border-radius:3px;padding:12px 20px}
body.v5 .btn.sm{padding:7px 12px}
body.v5 .sec.v5{padding:clamp(56px,7vw,104px) var(--side)}
body.v5 .rail-sec.list{padding:clamp(56px,7vw,104px) 0}

body.v5 .nav{background:rgba(246,246,244,.72);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid rgba(184,150,74,.55);box-shadow:none}
body.v5 .nav>a{display:inline-flex;align-items:center}
.nav-tag{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);border:1px solid rgba(184,150,74,.5);border-radius:2px;padding:4px 7px;margin-left:12px;line-height:1;white-space:nowrap}
body.v5 .nav ul{gap:26px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
body.v5 .nav ul a{color:var(--ink-2);padding:4px 0;border-bottom:1px solid transparent}
body.v5 .nav ul a:hover,body.v5 .nav ul a[aria-current]{color:var(--navy);border-bottom-color:var(--gold)}
body.v5 .nav ul .signin a{background:none;border:0;border-bottom:1px solid transparent;border-radius:0;padding:4px 0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;color:var(--ink-2)}
body.v5 .nav ul .signin a:hover{background:none;color:var(--navy);border-bottom-color:var(--gold)}
/* the one action: a stamped seal (navy fill, gold hairline one pixel inside the edge); keeps the navy glass gradient from the existing .acct rule */
body.v5 .nav ul .acct a,body.v5 .nav ul .acct a:hover{border-radius:3px;padding:10px 16px;border:0;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:none;box-shadow:inset 0 0 0 1px var(--navy),inset 0 0 0 2px rgba(184,150,74,.75),0 10px 24px -14px rgba(16,34,74,.7)}
body.v5 .nav .menu-btn{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
body.v5 .drawer .top{border-bottom:1px solid var(--gold);padding-bottom:14px}
@media (max-width:980px){.nav-tag{display:none}body.v5 .nav ul .acct a{padding:8px 14px}}

.intro{position:fixed;inset:0;z-index:300;background:transparent;display:grid;place-items:center;color:#fff;transition:none;will-change:auto}
.intro .half{position:absolute;top:0;bottom:0;width:50%;background:radial-gradient(46% 60% at 86% 18%,rgba(184,150,74,.3),transparent 70%),radial-gradient(40% 55% at 8% 92%,rgba(72,112,196,.38),transparent 70%),var(--navy);background-size:200% 100%;transition:transform .8s cubic-bezier(.76,0,.24,1)}
.intro .half.a{left:0;background-position:0 0;border-right:1.5px solid var(--gold)}
.intro .half.b{right:0;background-position:100% 0}
.intro .imk{position:relative;z-index:1}
.intro .lockup{font-family:var(--serif);font-size:clamp(34px,5vw,58px);display:inline-flex;align-items:center;gap:.25em;color:#fff}
.intro .lockup>span{font-size:1em;color:#fff;opacity:0;animation:introIn .5s ease .85s forwards}
.intro .lockup svg{width:1.05em;height:1.05em;overflow:visible}
/* dash lengths match MARK(): circle r=20 → 125.7; long stroke 96.8+28; stem 37 */
.intro .lockup svg circle{stroke-dasharray:126;stroke-dashoffset:126;animation:draw .6s var(--ease) .1s forwards}
.intro .lockup svg path{stroke-dasharray:125;stroke-dashoffset:125;animation:draw .5s var(--ease) .45s forwards}
.intro .lockup svg path+path{stroke-dasharray:37;stroke-dashoffset:37;animation:draw .25s var(--ease) .8s forwards}
.intro .tag{position:absolute;z-index:1;bottom:18.5%;left:0;right:0;text-align:center;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);border:0;padding:0;border-radius:0;background:none;white-space:normal;opacity:0;animation:introIn .5s ease 1s forwards}
.intro.out .half.a{transform:translateX(-100%)}
.intro.out .half.b{transform:translateX(100%)}
.intro.out .imk,.intro.out .tag{opacity:0;transition:opacity .25s}
@keyframes introIn{to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}

/* hero: the title page. Copy left and plate right, both hung from one gold rule, on ruled paper */
.hv{position:relative;margin-top:0;min-height:0;display:block;overflow:visible;isolation:auto;color:var(--ink);padding:clamp(36px,5vw,72px) var(--side) clamp(48px,6vw,80px);background:transparent;background-image:repeating-linear-gradient(180deg,transparent 0 31px,var(--rule) 31px 32px)}
.hv-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start;border-top:1px solid var(--gold);padding-top:clamp(18px,2.4vw,32px)}
.hv .copy{max-width:none;will-change:auto}
.hv h1{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:clamp(36px,4.4vw,66px);line-height:1.02;letter-spacing:-.025em;max-width:16ch;text-wrap:balance}
.hv .lead{color:var(--ink-2);font-size:clamp(16px,1.25vw,19px);max-width:50ch;margin:24px 0 0}
.hv .lab{font-family:var(--serif);font-style:italic;color:var(--gold-ink)}
.hv .flow{margin-top:clamp(28px,3.5vw,48px);padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:560px}
.hero-plate{margin-top:clamp(24px,4vw,64px)}   /* stepped: the plate hangs lower than the headline */
.hero-plate .slides{position:relative;aspect-ratio:4/5;max-height:min(76svh,720px);overflow:hidden;border-radius:3px;background:var(--navy)}   /* on a short laptop max-height wins and the plate becomes squarer; object-fit:cover handles it */
.hv .sl{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hv .sl.on{opacity:1}
.hv .sl img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);filter:saturate(.92)}
.hv .sl.on img{transform:scale(1);transition:transform 9s linear}
/* plates: every photograph sits in a glass mat with a mono caption */
.plate{margin:0;display:flex;flex-direction:column;padding:8px;border-radius:var(--rc);border:1px solid var(--glass-line);border-top:1px solid var(--gold);background:linear-gradient(135deg,rgba(255,255,255,.66),rgba(255,255,255,.42));-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),var(--glass-shadow)}
.plate .ph,.plate .slides{overflow:hidden;border-radius:3px}
.plate img{border-radius:3px}
.plate figcaption{display:flex;align-items:baseline;gap:14px;padding:10px 6px 2px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);min-width:0}
.plate .pn{color:var(--gold-ink);text-transform:uppercase;white-space:nowrap}.plate .pn b{font-weight:500}
.plate .ticks{margin-left:auto;display:flex;gap:5px;align-items:center}
.plate .ticks i{display:block;width:14px;height:1px;background:var(--line);transition:background .4s,height .4s}
.plate .ticks i.on{background:var(--gold);height:2px}
/* the money tie: shared by the hero strip and the sector cards (replaces the .scard .flow rules) */
.flow{display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.flow span{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);line-height:1.3;white-space:nowrap}
.flow span b{display:block;font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.flow i{flex:1;min-width:28px;height:1px;background:var(--line);position:relative}
.flow i::after{content:'';position:absolute;top:-3px;left:calc(50% - 3.5px);width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--ring)}
.scard .in{--ring:#fff}
.scard .flow i::after{opacity:0}
.scard.cur .flow i::after{opacity:1;animation:tie 2.6s linear infinite}
.scard.cur .flow i+span+i::after{animation-delay:1.3s}
@keyframes tie{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:calc(100% - 7px);opacity:0}}
@media (max-width:420px){.flow{gap:6px}.flow span{font-size:9.5px}.flow span b{font-size:10px}}

/* the app as a two-page spread: seven numbered entries, one straight gold thread down the spine */
.ledger{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);row-gap:clamp(20px,2.4vw,32px);align-items:start;padding:12px 0 8px;background-image:repeating-linear-gradient(180deg,transparent 0 31px,var(--rule) 31px 32px)}
.ledger .thread{position:absolute;top:0;bottom:0;left:50%;width:56px;height:100%;transform:translateX(-50%);overflow:visible;pointer-events:none}   /* out of the grid flow, so its viewBox never sizes the rows */
.ledger .thread path{fill:none;stroke:var(--gold);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1}
.ledger .thread .line{stroke-dashoffset:calc(1 - var(--p,0));transition:stroke-dashoffset .25s linear}
/* the drawing tip carries a light; dasharray .05 2 so the pattern never repeats inside the path */
.ledger .thread .tip{stroke:var(--gold-soft);stroke-width:3;stroke-dasharray:.05 2;stroke-dashoffset:calc(.05 - var(--p,0));filter:drop-shadow(0 0 4px rgba(227,205,152,.9));transition:stroke-dashoffset .25s linear,opacity .6s}
.ledger.done .thread .tip{opacity:0}
.entry{position:relative;border-radius:var(--rc);padding:18px 20px 20px;background:linear-gradient(135deg,rgba(255,255,255,.74),rgba(255,255,255,.52));border:1px solid var(--glass-line);border-top:1px solid var(--gold);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),var(--glass-shadow);font-size:14px;line-height:1.45;color:var(--ink);width:100%}
.entry.l{grid-column:1;justify-self:end}.entry.r{grid-column:3;justify-self:start}
/* placement and the offsets that keep it reading as a scene, not a two-column list */
.entry[data-n="01"],.entry[data-n="02"]{grid-row:1}
.entry[data-n="03"],.entry[data-n="04"]{grid-row:2}
.entry[data-n="05"]{grid-row:3}
.entry[data-n="06"]{grid-row:4}
.entry[data-n="07"]{grid-row:3/5;align-self:end}
.entry.memo{width:min(100%,440px);margin-top:clamp(40px,6vw,88px)}
.entry.deal{margin-top:clamp(24px,3vw,48px)}
.entry.plan{width:min(100%,460px);margin-top:clamp(8px,1.5vw,24px)}
.entry.reply{width:min(100%,520px)}
.entry.total{width:min(100%,400px)}
/* tie and coin: a 17px gold tie from the entry to a 22px coin on the spine, ringed in page colour */
.entry::before{content:'';position:absolute;top:26px;width:17px;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .5s var(--ease) .15s}
.entry.l::before{right:-18px;transform-origin:right}.entry.r::before{left:-18px;transform-origin:left}
.entry::after{content:attr(data-n);position:absolute;top:15px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:11px;line-height:1;background:var(--gold);color:var(--navy);box-shadow:0 0 0 3px var(--ring);transform:scale(0);transition:transform .4s var(--ease) .45s}
.entry.l::after{right:-39px}.entry.r::after{left:-39px}
.entry.r::after{background:var(--ring);color:var(--gold-ink);box-shadow:inset 0 0 0 1.5px var(--gold),0 0 0 3px var(--ring)}   /* app-voice entries: hollow coins */
.entry.in::before{transform:scaleX(1)}.entry.in::after{transform:scale(1)}
.entry .k{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:10px}
.entry.doc table{width:100%;border-collapse:collapse;font-size:13.5px}
.entry.doc td{padding:6px 0;border-top:1px dotted rgba(16,34,74,.28);vertical-align:baseline}
.entry.doc td:first-child{color:var(--ink-3);width:42%;padding-right:12px}
.entry.doc td:last-child{text-align:right;color:var(--navy);font-variant-numeric:tabular-nums}
.entry.doc tr:first-child td{border-top:0}
.entry.doc tr.sum td{border-bottom:3px double var(--navy);padding-bottom:8px}
.entry.memo b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(18px,1.6vw,22px);line-height:1.3;color:var(--navy)}
.entry.reply{background:linear-gradient(135deg,rgba(16,34,74,.96),rgba(16,34,74,.9));color:#fff;border-color:rgba(255,255,255,.2);border-top-color:var(--gold)}
.entry.reply .k{color:var(--gold-soft)}.entry.reply .k svg{width:14px;height:14px;flex:none}
.entry.reply b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.5vw,20px);line-height:1.3;color:#fff}
.entry .t{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.7vw,23px);line-height:1.15;color:var(--navy)}
.entry.deal .dh{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.entry.deal .dh .k{margin-bottom:0}
.entry.deal .dh em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line);border-radius:3px;padding:2px 7px;white-space:nowrap}
.entry.deal .t{margin-top:10px}
.entry.deal .chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.entry.deal .chips span{font-size:12.5px;font-weight:600;padding:4px 9px;border-radius:3px;background:rgba(16,34,74,.06);color:var(--navy)}
.entry.deal .hr{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-3);border-top:1px dotted rgba(16,34,74,.28);padding-top:9px}.entry.deal .hr b{color:var(--up)}
.entry .btn-m{display:block;margin-top:12px;text-align:center;background:var(--navy);color:#fff;border-radius:3px;padding:9px;font-size:13px;font-weight:700}
.entry.plan .bar{height:6px;border-radius:0;background:var(--line);margin-top:12px}.entry.plan .bar i{display:block;height:100%;background:var(--gold)}
.entry.plan .bl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:6px}
.entry .s{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--ink-3);margin-top:8px}
.entry.total .big{display:inline-block;font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.2vw,44px);line-height:1;letter-spacing:-.02em;color:var(--navy);padding-bottom:10px;border-bottom:3px double var(--navy)}
.entry .pills{display:flex;gap:6px;margin-top:14px}.entry .pills span{flex:1;text-align:center;border-radius:3px;padding:8px;font-size:13px;font-weight:700;border:1px solid var(--line);color:var(--navy)}.entry .pills span.pri{background:var(--navy);color:#fff;border-color:var(--navy)}
.ledger-note{margin:clamp(28px,3.5vw,44px) 0 0 auto;max-width:52ch;font-size:15px;color:var(--ink-2);padding-top:14px;border-top:1px solid var(--line)}
.ledger-note b{display:block;font-family:var(--serif);font-weight:400;font-style:italic;font-size:1.25em;color:var(--navy);margin-bottom:6px}

main{counter-reset:sec}
.chead{text-align:left;max-width:none;margin:0 0 clamp(32px,4vw,56px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,4vw,64px);align-items:start;border-top:1px solid var(--gold);padding-top:clamp(16px,2vw,24px)}
.chead .eyebrow,.rail-head .eyebrow,.close-cta .eyebrow{display:flex;align-items:center;gap:12px;color:var(--gold-ink);margin:0}
.chead .eyebrow{grid-column:1/-1;margin-bottom:clamp(18px,2.5vw,30px)}
.chead .eyebrow::before,.rail-head .eyebrow::before,.close-cta .eyebrow::before{counter-increment:sec;content:counter(sec,decimal-leading-zero) " /";color:var(--gold);font-weight:500}
.chead .eyebrow::after{content:'';flex:1;height:1px;background:var(--line)}
.sec.navy .chead{border-top-color:rgba(184,150,74,.75)}
.sec.navy .chead .eyebrow{color:var(--gold-soft)}
.sec.navy .chead .eyebrow::after{background:rgba(255,255,255,.16)}
.chead h2{grid-column:1;margin:0;max-width:20ch;text-align:left}
.chead p{grid-column:2;margin:0;max-width:46ch;padding:.35em 0 0 22px;border-left:1px solid var(--line);font-size:clamp(15.5px,1.2vw,18px);line-height:1.55}
.chead .acts{grid-column:2;justify-content:flex-start;margin-top:0;padding-top:.6em}
.chead p+.acts{margin-top:18px;padding:0 0 0 23px}
.chead h1{grid-column:1/-1;margin:0;text-align:left;max-width:18ch}
.chead:has(h1) p{grid-column:1;border-left:0;padding:0;margin-top:18px}
.chead:has(h1) .acts{grid-column:1;padding:0;margin-top:22px}
.two{text-align:left}.two span{display:block;font-size:.74em;margin-top:.45em;color:var(--ink-3)}.sec.navy .two span{color:rgba(255,255,255,.6)}
.rail-head{border-top:1px solid var(--gold);padding-top:clamp(16px,2vw,24px)}
.rail-head .eyebrow{margin-bottom:12px}
.rail-head .cnt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--gold-ink)}
.rail-head .sub{font-size:15px}
@media (max-width:860px){.chead{grid-template-columns:1fr}.chead h2,.chead p,.chead .acts{grid-column:1}.chead p{border-left:0;padding:0;margin-top:16px}.chead .acts,.chead p+.acts{padding:0;margin-top:18px}}

.bento{gap:14px;counter-reset:card}
.grid3{counter-reset:card}
.bcard{grid-column:span 4;position:relative;counter-increment:card;border-radius:var(--rc);border-top:1px solid var(--gold);padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;min-height:0;background-image:none}
.sec.navy .bcard{background-image:none;color:#fff}
.bcard::before,.fcard::before{content:counter(card,decimal-leading-zero);position:absolute;top:15px;right:18px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3)}
.bento .bcard.b6:first-child{grid-column:span 5}#tryCard{grid-column:span 7}
@media (max-width:1000px){.bento .bcard.b6:first-child,#tryCard{grid-column:span 6}}
@media (max-width:640px){.bento .bcard.b6:first-child,#tryCard{grid-column:span 12}}
/* seal icons: a gold ring, not a navy tile */
body.v5 .bcard .ic,body.v5 .fcard .ic,body.v5 .layer .ic,body.v5 .rows2 .r .ic{width:38px;height:38px;border-radius:50%;background:transparent!important;border:1px solid var(--gold);color:var(--navy);box-shadow:none!important;display:grid;place-items:center}
body.v5 .bcard .ic svg,body.v5 .fcard .ic svg,body.v5 .layer .ic svg,body.v5 .rows2 .r .ic svg{width:17px;height:17px}
body.v5 .sec.navy .bcard .ic{color:var(--gold-soft);border-color:rgba(184,150,74,.7)}
.bcard .t,.fcard .t{display:block;font-size:clamp(19px,1.5vw,22px);line-height:1.2;color:var(--navy)}
.bcard .t span,.fcard .t span{display:block;font-family:var(--sans);font-size:14.5px;line-height:1.55;color:var(--ink-2);margin-top:10px;max-width:46ch}
.sec.navy .bcard .t,.sec.navy .bcard .t span{color:#fff}.sec.navy .bcard .t span{color:rgba(255,255,255,.78)}
.bcard .go{position:static;margin-top:auto;align-self:flex-end;width:18px;height:18px;border:0;border-radius:0;background:none!important;color:var(--gold-ink);display:grid;place-items:center;transition:transform .25s var(--ease),color .25s}
.bcard:hover .go{color:var(--navy);transform:translate(2px,-2px);background:none}
.bcard .eyebrow{color:var(--gold-ink)}
.bcard .big{display:inline-block;align-self:flex-start;padding-bottom:8px;border-bottom:3px double var(--navy)}
.bcard .small{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em}
.bcard input[type=range]{accent-color:var(--gold-ink)!important}
/* figures row: ledger columns */
.figs{gap:0;border-top:1px solid var(--gold);padding-top:0;margin:clamp(28px,4vw,48px) 0}
.figs>div{padding:22px 20px 0 18px;border-left:1px solid var(--line)}.figs>div:first-child{border-left:0;padding-left:0}
.figs b{font-variant-numeric:tabular-nums}
.figs span{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;max-width:none}
@media (max-width:760px){.figs>div:nth-child(3){border-left:0;padding-left:0}.figs>div:nth-child(n+3){border-top:1px solid var(--line);margin-top:18px;padding-top:18px}}

.scard .plate{align-self:center}
.scard img{border-radius:3px}
.scard .st{border-top:1px solid var(--line)}
.scard .st div span{font-family:var(--mono);font-size:11px;letter-spacing:.02em}
body.v5 .scard .in{border-radius:var(--rc);border-top:1px solid var(--gold);margin-left:clamp(-72px,-4vw,-32px)}
.rail-dots i{height:1px;width:28px;border-radius:0}.rail-dots i.on{height:2px}
@media (max-width:699px){body.v5 .rail-sec.list .scard .in{margin:12px 0 0}}
@media (min-width:700px) and (max-width:899px){body.v5 .rail-sec.list .scard .in{margin:0 0 0 -32px}}

body.v5 .mock .mk{background:rgba(255,255,255,.8)}

#security .chead+.bento{display:block;counter-reset:layer;border-top:1px solid var(--gold)}
#security .bcard.b3{counter-increment:layer;display:grid;grid-template-columns:96px minmax(0,5fr) minmax(0,7fr) 24px;column-gap:clamp(16px,2vw,32px);align-items:baseline;padding:22px 0;min-height:0;border:0;border-bottom:1px solid rgba(255,255,255,.16);border-radius:0;background:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;transition:padding .3s var(--ease),background .3s}
#security .bcard.b3::before{content:'Layer ' counter(layer,decimal-leading-zero);position:static;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-soft)}
#security .bcard.b3 .ic{display:none}
#security .bcard.b3 .t{font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.8vw,26px);line-height:1.15;color:#fff;margin:0}
#security .bcard.b3 p{margin:0;font-size:14.5px;color:rgba(255,255,255,.78);max-width:none}
#security .bcard.b3 .go{grid-column:4;align-self:center;justify-self:end;margin:0;color:var(--gold-soft)}
#security .bcard.b3:hover{padding-inline:14px;background:rgba(255,255,255,.04)!important}
#security .bcard.b3:hover .go{color:#fff;transform:translate(2px,-2px)}
#security .bento+.bento{margin-top:28px!important}
#security .bcard.b12{display:block;border-radius:var(--rc);border-top:1px solid var(--gold);padding:22px 24px 26px;min-height:0}
#security .bcard.b12::before{content:none}
#security .bcard.b12 .eyebrow{color:var(--gold-soft);margin-bottom:22px;display:block}
#security .more{text-align:left;margin-top:24px}
#security .more .link{color:#fff;border-color:rgba(255,255,255,.5)}
/* the money path: six points on one gold line (home panel and /security/ white section) */
.path{list-style:none;counter-reset:p;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 18px;position:relative;padding-top:36px}
.path::before{content:'';position:absolute;left:0;right:0;top:10px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease)}
.path.in::before{transform:none}
.path li,body.v5 .path li,body.v5 .sec.navy .path li,body.v5 #security .path li{counter-increment:p;position:relative;display:flex;flex-direction:column;gap:6px;background:none;border:0;border-radius:0;padding:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:inherit}
.path li::before{content:counter(p);position:absolute;left:0;top:-36px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:11px;line-height:1;background:var(--gold);color:var(--navy);box-shadow:0 0 0 3px var(--ring);transform:scale(0);transition:transform .4s var(--ease)}
.path.in li::before{transform:scale(1)}
.path.in li:nth-child(2)::before{transition-delay:.25s}.path.in li:nth-child(3)::before{transition-delay:.5s}.path.in li:nth-child(4)::before{transition-delay:.75s}.path.in li:nth-child(5)::before{transition-delay:1s}.path.in li:nth-child(6)::before{transition-delay:1.25s}
.path li b{font-family:var(--serif);font-weight:400;font-size:17px;line-height:1.25}
.path li span{font-size:13px;color:var(--ink-2)}
.path li .who{margin-top:auto;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.sec.navy .path li b,#security .path li b{color:#fff}
.sec.navy .path li span,#security .path li span{color:rgba(255,255,255,.75)}
.sec.navy .path li .who,#security .path li .who{color:var(--gold-soft)}
@media (max-width:1000px){#security .bcard.b3{grid-template-columns:96px minmax(0,1fr) 24px}#security .bcard.b3 p{grid-column:2;margin-top:6px}#security .bcard.b3 .go{grid-column:3;grid-row:1}}
@media (max-width:860px){.path{grid-template-columns:1fr;gap:20px;padding:0 0 0 40px}.path::before{left:10px;top:0;bottom:0;right:auto;width:1px;height:auto;transform:scaleY(0);transform-origin:top}.path li::before{left:-40px;top:0}}
@media (max-width:600px){#security .bcard.b3{grid-template-columns:72px minmax(0,1fr) 24px;column-gap:12px}}

.ncard{border-top:1px solid var(--gold)}
.ncard .ph{margin:8px 8px 0;border-radius:3px}
.ncard .meta{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.08em}
.ncard .tx{padding:14px 16px 18px}

body.v5 .close-cta{background:transparent;color:var(--ink);padding:clamp(56px,7vw,104px) var(--side);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start;position:relative;overflow:visible;border-top:1px solid var(--gold)}
.close-cta>*{position:relative}
.close-cta h2{color:var(--navy);margin-top:14px}
.close-cta .lead{color:var(--ink-2);margin-top:14px}
.plat-head{color:var(--ink-2);margin-top:32px}.plat-head b{color:var(--navy)}
.plat{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);margin-top:14px;max-width:560px}
.plat a{display:flex;gap:12px;align-items:center;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 0;font-size:14px;font-weight:600;color:var(--ink-2);background:none}
.plat a:hover{color:var(--navy);border-bottom-color:var(--gold)}
.plat a svg{width:15px;height:15px;color:var(--gold-ink)}
.plat a::after{content:'→';margin-left:auto;color:var(--gold)}
.close-cta .inline-form{flex-direction:column;align-items:stretch;gap:12px;padding:22px 24px 24px;border-radius:var(--rc);background:linear-gradient(135deg,rgba(255,255,255,.66),rgba(255,255,255,.42));border:1px solid var(--glass-line);border-top:1px solid var(--gold);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),var(--glass-shadow)}
.close-cta .inline-form .field{flex:none}
.close-cta .field label{color:var(--ink-2)}.close-cta .small{color:var(--ink-3)}.close-cta .err{color:var(--down)}
body.v5 .close-cta .input{background:rgba(255,255,255,.6);border:1px solid var(--glass-line);color:var(--ink);border-radius:3px;-webkit-backdrop-filter:none;backdrop-filter:none}
body.v5 .close-cta .input::placeholder{color:var(--ink-3)}
body.v5 .close-cta .input:focus{border-color:var(--navy);background:rgba(255,255,255,.85)}
.close-cta .h3{color:var(--navy)}
@media (max-width:860px){body.v5 .close-cta{grid-template-columns:1fr}}

body.v5 .foot{position:relative;overflow:hidden;background:var(--navy);border-top:1px solid var(--gold);padding:56px var(--side) 24px;grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr));gap:28px}
.foot>div{position:relative;z-index:1}
.foot>div:first-child .lockup{font-size:34px}
.foot h4{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;color:var(--gold-soft)}
.foot a{color:rgba(255,255,255,.72)}
.foot .fine{border-top:1px solid rgba(255,255,255,.16);font-family:var(--mono);font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.55)}
.foot .fine p{max-width:100ch}
.foot .wm{position:absolute;right:-40px;bottom:-70px;width:min(380px,55vw);color:#fff;opacity:.05;pointer-events:none;z-index:0}
.foot .wm svg{width:100%;height:auto;display:block}
@media (max-width:900px){body.v5 .foot{grid-template-columns:1fr 1fr}}

@media (max-width:900px){
  .hv{padding:28px var(--side) 40px}
  .hv-in{grid-template-columns:1fr;gap:28px}
  .hv h1{font-size:clamp(34px,9.5vw,44px);max-width:none}
  .hv .flow{max-width:none}
  .hero-plate{margin-top:0}
  .hero-plate .slides{aspect-ratio:3/2;max-height:none}
  .hv .sl img,.hv .sl.on img{transform:none;transition:none}   /* no Ken Burns on phones */
}
@media (max-width:760px){
  .ledger{grid-template-columns:28px minmax(0,1fr);row-gap:14px;padding:8px 0}
  .ledger .thread{left:0;width:28px;transform:none}
  .entry,.entry.l,.entry.r{grid-column:2!important;grid-row:auto!important;margin-top:0!important;align-self:auto!important;justify-self:stretch;width:auto;padding:16px 16px 18px;font-size:13.5px}
  .entry::before{left:-14px;right:auto;width:14px;transform-origin:left}
  .entry::after{left:-25px;right:auto}
  .entry .k{font-size:10.5px}.entry.memo b{font-size:18px}.entry .t{font-size:19px}.entry.total .big{font-size:32px}
  .ledger-note{margin-left:0}
  .figs{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){.bento{gap:12px}}

@media (prefers-reduced-motion:reduce){
  .ledger{--p:1}.ledger .thread path{transition:none}.ledger .thread .tip{opacity:0}
  .entry::before,.entry::after,.path::before,.path li::before{transform:none!important;transition:none}
  .plate .ticks i,.hv .sl{transition:none}.hv .sl img,.hv .sl.on img{transform:none;transition:none}
  .scard.cur .flow i::after{animation:none;opacity:1;left:calc(50% - 3.5px)}
  .intro .half,.intro .lockup>span,.intro .lockup svg *,.intro .tag{animation:none;transition:none;opacity:1;stroke-dashoffset:0}
}
@media (pointer:coarse){body.v5 .entry,body.v5 .plate{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.88)}body.v5 .entry.reply{background:rgba(16,34,74,.96)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body.v5 .entry,body.v5 .plate{background:rgba(255,255,255,.94)}body.v5 .entry.reply{background:var(--navy)}}

/* ================================================================ v8: consumer edition. Everything below overrides v7 (later in the cascade, same selectors). */
body.v5{--glass:rgba(255,255,255,.56);--glass-strong:rgba(255,255,255,.74);--glass-line:rgba(255,255,255,.85);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(184,150,74,.14);   /* the gilt edge is now a faint warm ring all the way round, not a hard gold top rule */
  --glass-shadow:var(--shadow-soft);
  --dglass-line:rgba(255,255,255,.18);--dglass-edge:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(227,205,152,.12);
  --blur:blur(18px) saturate(160%)}
body.v5{--rule:rgba(16,34,74,.06);--ring:var(--bg)}
body.v5 .mock .mk{background:rgba(255,255,255,.8);border:1px solid var(--glass-line);box-shadow:var(--glass-edge),0 14px 32px -18px rgba(16,34,74,.2)}
body.v5 .maths code{background:rgba(255,255,255,.55);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--glass-edge)}
/* ---------------------------------------------------------------- v8: no gilt top rules; the ring in --glass-edge carries the warmth */
body.v5 .bcard,body.v5 .fcard,body.v5 .mock,body.v5 .irp,body.v5 .rows2 .r,body.v5 .outs,body.v5 .layer,body.v5 .ncard,body.v5 .plate,body.v5 .entry,body.v5 .scard .in,body.v5 .close-cta .inline-form,body.v5 .wlm .box,body.v5 #security .bcard.b12{border-top-color:var(--glass-line)}
body.v5 .entry.reply{border-top-color:rgba(255,255,255,.2)}
body.v5 .tag,body.v5 .chip,body.v5 .social a,body.v5 .skip{border-radius:var(--pill)}
body.v5 .chip{padding:9px 16px;min-height:40px}
body.v5 .input{border-radius:12px;padding:14px 16px;min-height:50px}
body.v5 .btn{border-radius:var(--pill);padding:14px 24px;min-height:48px;font-size:15px}
body.v5 .btn.sm{padding:9px 16px;min-height:40px;font-size:13.5px}
body.v5 .nav{background:rgba(246,246,244,.72);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid rgba(16,34,74,.08);box-shadow:none}
.nav-tag{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--gold-ink);background:rgba(184,150,74,.12);border:0;border-radius:var(--pill);padding:5px 10px;margin-left:12px;line-height:1;white-space:nowrap}
body.v5 .nav ul{gap:28px;font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:0;text-transform:none}
body.v5 .nav ul .acct a,body.v5 .nav ul .acct a:hover{border-radius:var(--pill);padding:11px 18px;min-height:40px;border:0;font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;box-shadow:inset 0 0 0 1px var(--navy),inset 0 0 0 2px rgba(184,150,74,.6),0 10px 24px -14px rgba(16,34,74,.5)}
body.v5 .nav .menu-btn{font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:0;text-transform:none}
body.v5 .drawer .top{border-bottom:1px solid var(--line);padding-bottom:14px}
body.v5 .close-cta .input{background:rgba(255,255,255,.6);border:1px solid var(--glass-line);color:var(--ink);border-radius:12px;-webkit-backdrop-filter:none;backdrop-filter:none}
body.v5 .eyebrow{font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:0;text-transform:none;color:var(--gold-ink)}
/* labels: Manrope, sentence case, weight 600. Serif for display numbers. No mono outside .maths and the terminal. */
.entry .k{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-3);margin-bottom:12px}
.entry.reply .k{color:var(--gold-soft)}
.entry .s,.entry.plan .bl{font-family:var(--sans);font-size:12.5px;letter-spacing:0;color:var(--ink-3);font-variant-numeric:tabular-nums}
.entry.deal .dh em{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--gold-ink);background:rgba(184,150,74,.14);border:0;border-radius:var(--pill);padding:4px 10px}
.plate figcaption{font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--ink-3);padding:12px 8px 4px}
.plate .pn{display:none}   /* no "Plate 01"; the caption and the ticks are enough */
.figs span{font-family:var(--sans);font-size:13.5px;letter-spacing:0;line-height:1.45;max-width:none}
.scard .n,.rail-head .cnt{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;color:var(--ink-3);text-transform:none}
.scard .st div span{font-family:var(--sans);font-size:12.5px;letter-spacing:0}
.bcard .small{font-family:var(--sans);font-size:13px;letter-spacing:0}
.path li .who{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2);background:rgba(16,34,74,.06);border:0;border-radius:var(--pill);padding:4px 10px;align-self:flex-start;display:inline-block}
.sec.navy .path li .who,#security .path li .who{color:var(--gold-soft);background:rgba(255,255,255,.1)}
.ncard .meta{font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:0;text-transform:none}
.foot h4{font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.02em;text-transform:none}
.foot .fine{font-family:var(--sans);font-size:12.5px}
.outs td.k{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--navy)}
.intro .tag{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.01em;text-transform:none}
.ledger-note b{font-style:normal}
main{counter-reset:sec}
.chead{text-align:left;max-width:none;margin:0 0 clamp(28px,4vw,48px);display:grid;grid-template-columns:1fr;align-items:start;border-top:0;padding-top:0}
.chead .eyebrow,.rail-head .eyebrow,.close-cta .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--gold-ink);margin:0 0 16px}
/* the folio "01 /" becomes the same gold coin that sits on the ledger thread and the money path */
.chead .eyebrow::before,.rail-head .eyebrow::before,.close-cta .eyebrow::before{counter-increment:sec;content:counter(sec);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:12.5px;line-height:1;background:var(--gold);color:var(--navy);flex:none}
.chead .eyebrow::after{content:none}
.sec.navy .chead{border-top:0}
.sec.navy .chead .eyebrow{color:var(--gold-soft)}
.chead h2{grid-column:1;margin:0;max-width:20ch;text-align:left}
.chead p{grid-column:1;margin:18px 0 0;max-width:56ch;padding:0;border-left:0;font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:var(--ink-2)}
.chead .acts{grid-column:1;display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start;margin-top:22px;padding:0}
.chead p+.acts{margin-top:22px;padding:0}
.chead h1{grid-column:1;margin:0;text-align:left;max-width:18ch}
.chead:has(h1) p{margin-top:18px}
.chead:has(h1) .acts{margin-top:24px}
.two{text-align:left}.two span{display:block;font-size:.74em;margin-top:.45em;color:var(--ink-3)}.sec.navy .two span{color:rgba(255,255,255,.6)}
.rail-head{border-top:0;padding-top:0}
.rail-head .eyebrow{margin-bottom:14px}
.rail-head .sub{font-size:16px}
@media (max-width:860px){.chead p{margin-top:16px}.chead .acts,.chead p+.acts{margin-top:20px}}
.hv{position:relative;isolation:isolate;margin-top:0;min-height:0;display:block;overflow:visible;color:var(--ink);padding:clamp(40px,5.5vw,80px) var(--side) clamp(48px,6vw,88px);background:transparent}
.hv::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:repeating-linear-gradient(180deg,transparent 0 31px,var(--rule) 31px 32px);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.45) 45%,transparent 85%);mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.45) 45%,transparent 85%)}
.hv-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start;border-top:0;padding-top:0}
.hv h1{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:clamp(38px,4.6vw,66px);line-height:1.04;letter-spacing:-.02em;max-width:15ch;text-wrap:balance}
.hv .lead{color:var(--ink-2);font-size:clamp(17px,1.3vw,20px);max-width:46ch;margin:22px 0 0}
.hv .flow{margin-top:clamp(24px,3vw,40px);padding:12px 16px;border:0;max-width:600px}
.hv .acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:clamp(24px,3vw,36px)}
.hv .acts .small{flex-basis:100%;margin:4px 0 0;color:var(--ink-3)}
.plate{margin:0;display:flex;flex-direction:column;padding:10px;border-radius:var(--rc);border:1px solid var(--glass-line);background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.46));-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),var(--glass-shadow)}
.plate .ph,.plate .slides{overflow:hidden;border-radius:var(--rc-sm)}
.plate img{border-radius:var(--rc-sm)}
.plate .ticks i{display:block;width:16px;height:4px;border-radius:var(--pill);background:var(--line);transition:background .4s,width .4s}
.plate .ticks i.on{background:var(--gold);width:26px}
.flow{display:flex;align-items:center;gap:12px;margin:16px 0 0;padding:12px 16px;border:0;border-radius:var(--pill);background:rgba(16,34,74,.045)}
.flow span{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--navy);line-height:1.3;white-space:nowrap}
.flow span b{display:block;font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.flow i{flex:1;min-width:24px;height:2px;border-radius:2px;background:rgba(16,34,74,.12);position:relative}
.flow i::after{content:'';position:absolute;top:-3px;left:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:none}
@media (max-width:420px){.flow{gap:8px;padding:10px 12px}.flow span{font-size:11.5px}.flow span b{font-size:11px}}
.ledger{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);row-gap:clamp(22px,2.6vw,36px);align-items:start;padding:12px 0 8px;background-image:none}
.entry{position:relative;border-radius:var(--rc);padding:22px 22px 24px;background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.58));border:1px solid var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),var(--glass-shadow);font-size:14.5px;line-height:1.5;color:var(--ink);width:100%}
.entry[data-n="1"],.entry[data-n="2"]{grid-row:1}
.entry[data-n="3"],.entry[data-n="4"]{grid-row:2}
.entry[data-n="5"]{grid-row:3}
.entry[data-n="6"]{grid-row:4}
.entry[data-n="7"]{grid-row:3/5;align-self:end}
/* tie and coin: a short gold tie from the card to a 28px coin on the spine, ringed in page colour */
.entry::before{content:'';position:absolute;top:30px;width:16px;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transition:transform .5s var(--ease) .15s}
.entry.l::before{right:-17px;transform-origin:right}.entry.r::before{left:-17px;transform-origin:left}
.entry::after{content:attr(data-n);position:absolute;top:17px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:12.5px;line-height:1;background:var(--gold);color:var(--navy);box-shadow:0 0 0 4px var(--ring);transform:scale(0);transition:transform .4s var(--ease) .45s}
.entry.l::after{right:-42px}.entry.r::after{left:-42px}
.entry.r::after{background:var(--ring);color:var(--gold-ink);box-shadow:inset 0 0 0 1.5px var(--gold),0 0 0 4px var(--ring)}   /* app-voice entries: hollow coins */
.entry.doc table{width:100%;border-collapse:collapse;font-size:14px}
.entry.doc td{padding:8px 0;border-top:1px solid rgba(16,34,74,.08);vertical-align:baseline}
.entry.doc td:first-child{color:var(--ink-3);width:44%;padding-right:12px}
.entry.doc td:last-child{text-align:right;color:var(--navy);font-variant-numeric:tabular-nums}
.entry.doc tr:first-child td{border-top:0}
.entry.doc tr.sum td{border-top:1px solid rgba(16,34,74,.18);border-bottom:0;padding-top:10px;font-weight:700}
.entry.deal .chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.entry.deal .chips span{font-size:13px;font-weight:600;padding:6px 12px;border-radius:var(--pill);background:rgba(16,34,74,.06);color:var(--navy)}
.entry.deal .hr{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--ink-3);border-top:1px solid rgba(16,34,74,.08);padding-top:10px}.entry.deal .hr b{color:var(--up)}
.entry .btn-m{display:block;margin-top:14px;text-align:center;background:var(--navy);color:#fff;border-radius:var(--pill);padding:12px;font-size:14px;font-weight:700}
.entry.plan .bar{height:8px;border-radius:var(--pill);background:rgba(16,34,74,.08);margin-top:14px;overflow:hidden}.entry.plan .bar i{display:block;height:100%;background:var(--gold);border-radius:var(--pill)}
.entry.total .big{display:inline-block;font-family:var(--serif);font-weight:400;font-size:clamp(36px,3.2vw,46px);line-height:1;letter-spacing:-.02em;color:var(--navy);padding-bottom:0;border-bottom:0}
.entry .pills{display:flex;gap:8px;margin-top:16px}.entry .pills span{flex:1;text-align:center;border-radius:var(--pill);padding:11px;font-size:14px;font-weight:700;border:1px solid var(--line);color:var(--navy)}.entry .pills span.pri{background:var(--navy);color:#fff;border-color:var(--navy)}
.ledger-note{margin:clamp(28px,3.5vw,44px) 0 0 auto;max-width:54ch;font-size:15.5px;color:var(--ink-2);padding:0;border-top:0}
@media (max-width:760px){
  .ledger{grid-template-columns:28px minmax(0,1fr);row-gap:16px;padding:8px 0}
  .ledger .thread{left:0;width:28px;transform:none}
  .entry,.entry.l,.entry.r{grid-column:2!important;grid-row:auto!important;margin-top:0!important;align-self:auto!important;justify-self:stretch;width:auto;padding:18px 18px 20px;font-size:14px}
  .entry::before{left:-14px;right:auto;width:14px;transform-origin:left}
  .entry::after{left:-28px;right:auto}
  .entry .k{font-size:12.5px}.entry.memo b{font-size:18px}.entry .t{font-size:19px}.entry.total .big{font-size:34px}
  .ledger-note{margin-left:0}
  .figs{grid-template-columns:1fr 1fr}
}
.bento{gap:16px;counter-reset:card}
.grid3{counter-reset:card}
.bcard{grid-column:span 4;position:relative;counter-increment:card;border-radius:var(--rc);padding:26px 26px 28px;display:flex;flex-direction:column;gap:12px;min-height:0;background-image:none}
.sec.navy .bcard{background-image:none;color:#fff}
.bcard::before,.fcard::before{content:none}   /* no folio numbers on cards */
body.v5 .bcard .ic,body.v5 .fcard .ic,body.v5 .layer .ic,body.v5 .rows2 .r .ic{width:44px;height:44px;border-radius:50%;background:rgba(184,150,74,.12)!important;border:1px solid rgba(184,150,74,.5);color:var(--navy);box-shadow:none!important;display:grid;place-items:center}
body.v5 .bcard .ic svg,body.v5 .fcard .ic svg,body.v5 .layer .ic svg,body.v5 .rows2 .r .ic svg{width:20px;height:20px}
body.v5 .sec.navy .bcard .ic{color:var(--gold-soft);background:rgba(255,255,255,.08)!important;border-color:rgba(227,205,152,.45)}
.bcard .t,.fcard .t{display:block;font-size:clamp(20px,1.6vw,23px);line-height:1.2;color:var(--navy)}
.bcard .t span,.fcard .t span{display:block;font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink-2);margin-top:10px;max-width:46ch}
.bcard .big{display:inline-block;align-self:flex-start;padding-bottom:0;border-bottom:0}
.bcard input[type=range]{accent-color:var(--gold-ink)!important;height:32px}
/* figures row: soft tiles */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;border-top:0;padding-top:0;margin:clamp(28px,4vw,48px) 0}
.figs>div{padding:20px 20px 18px;border:0;border-radius:var(--rc-sm);background:rgba(16,34,74,.04)}.figs>div:first-child{padding-left:20px}
.figs b{font-variant-numeric:tabular-nums}
@media (max-width:760px){.figs>div:nth-child(3){border-left:0;padding-left:20px}.figs>div:nth-child(n+3){border-top:0;margin-top:0;padding-top:20px}}
.scard .plate{align-self:center}
.scard img{border-radius:var(--rc-sm)}
.scard .st{border-top:1px solid var(--line-2);padding-top:18px}
body.v5 .scard .in{border-radius:var(--rc);border-top:1px solid var(--glass-line);margin-left:clamp(-72px,-4vw,-32px);padding:clamp(24px,2.8vw,40px)}
.rail-dots i{height:4px;width:22px;border-radius:var(--pill)}.rail-dots i.on{height:4px;width:34px}
@media (max-width:699px){body.v5 .rail-sec.list .scard .in{margin:12px 0 0}}
@media (min-width:700px) and (max-width:899px){body.v5 .rail-sec.list .scard .in{margin:0 0 0 -32px}}
.rail-dots i{width:22px;height:4px;border-radius:var(--pill);background:var(--line);transition:background .3s,width .3s}
#security .chead+.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:layer;border-top:0}
#security .bcard.b3{counter-increment:layer;grid-column:span 1;display:flex;flex-direction:column;gap:12px;padding:24px 24px 26px;min-height:0;border:1px solid var(--dglass-line);border-radius:var(--rc);background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.05))!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--dglass-edge),0 18px 44px -24px rgba(0,0,0,.45);transition:transform .25s var(--ease),background .25s}
#security .bcard.b3::before{content:counter(layer);position:absolute;top:18px;right:18px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:12.5px;line-height:1;background:var(--gold);color:var(--navy)}
#security .bcard.b3 .ic{display:grid}
#security .bcard.b3 .t{font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.5vw,22px);line-height:1.2;color:#fff;margin:0}
#security .bcard.b3 p{margin:0;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.78);max-width:none}
#security .bcard.b3 .go{align-self:flex-end;margin-top:auto;color:var(--gold-soft)}
#security .bcard.b3:hover{background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.08))!important;transform:translateY(-2px)}
#security .bcard.b3:hover .go{color:#fff;transform:translate(2px,-2px)}
#security .bento+.bento{margin-top:20px!important}
#security .bcard.b12{display:block;border-radius:var(--rc);padding:26px 26px 30px;min-height:0}
#security .bcard.b12::before{content:none}
#security .bcard.b12 .eyebrow{color:var(--gold-soft);margin-bottom:24px;display:block}
#security .more{text-align:left;margin-top:24px}
#security .more .link{color:#fff}
.path{list-style:none;counter-reset:p;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 20px;position:relative;padding-top:40px}
.path::before{content:'';position:absolute;left:0;right:0;top:13px;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease)}
.path li::before{content:counter(p);position:absolute;left:0;top:-40px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:12.5px;line-height:1;background:var(--gold);color:var(--navy);box-shadow:0 0 0 4px var(--ring);transform:scale(0);transition:transform .4s var(--ease)}
.path li b{font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.25}
.path li span{font-size:13.5px;line-height:1.5;color:var(--ink-2)}
@media (max-width:1000px){#security .chead+.bento{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.path{grid-template-columns:1fr;gap:22px;padding:0 0 0 44px}.path::before{left:13px;top:0;bottom:0;right:auto;width:2px;height:auto;transform:scaleY(0);transform-origin:top}.path li::before{left:-44px;top:0}}
@media (max-width:600px){#security .chead+.bento{grid-template-columns:1fr}}
.ncard{border-top:1px solid var(--glass-line)}
.ncard .ph{margin:10px 10px 0;border-radius:var(--rc-sm)}
.ncard .tx{padding:16px 18px 20px}
.plat{display:flex;flex-direction:column;gap:8px;border-top:0;margin-top:14px;max-width:560px}
.plat a{display:flex;gap:12px;align-items:center;border:0;border-radius:var(--rc-sm);padding:12px 14px;min-height:52px;font-size:14.5px;font-weight:600;color:var(--ink);background:rgba(16,34,74,.04);transition:background .2s}
.plat a:hover{background:rgba(16,34,74,.07);color:var(--navy)}
.plat a>span{width:36px;height:36px;border-radius:50%;background:rgba(184,150,74,.14);display:grid;place-items:center;flex:none}
.plat a svg{width:16px;height:16px;color:var(--gold-ink)}
.plat a::after{content:'→';margin-left:auto;color:var(--gold)}
.close-cta .inline-form{flex-direction:column;align-items:stretch;gap:12px;padding:26px 26px 28px;border-radius:var(--rc);background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.46));border:1px solid var(--glass-line);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--glass-edge),var(--glass-shadow)}

/* property tweaks the spec listed as line edits */
body.v5{--rule:rgba(16,34,74,.06);--ring:var(--bg)}
.hero-plate .slides{border-radius:var(--rc-sm)}
.ledger .thread path{stroke-width:2}
.bcard .go{width:22px;height:22px}
body.v5 .close-cta{border-top:0}
body.v5 .btn.gold,body.v5 .btn.gold:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.1),0 12px 28px -12px rgba(184,150,74,.5)}
body.v5 .btn.solid,body.v5 .btn.solid:hover,body.v5 .nav ul .acct a,body.v5 .nav ul .acct a:hover,body.v5 .wlm .role button[aria-pressed=true],body.v5 .mk .btnrow span.pri{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.2),0 12px 28px -14px rgba(16,34,74,.45)}
@keyframes tie{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
@media (prefers-reduced-motion:reduce){.scard.cur .flow i::after{animation:none;opacity:1;left:calc(50% - 4px)}}

/* v8 phones: the hero stacks (these must sit after the v8 hero rules) */
@media (max-width:900px){
  .hv{padding:28px var(--side) 40px}
  .hv-in{grid-template-columns:1fr;gap:28px}
  .hv h1{font-size:clamp(34px,9.5vw,44px);max-width:none}
  .hv .flow{max-width:none}
  .hero-plate{margin-top:0}
  .hero-plate .slides{aspect-ratio:3/2;max-height:none}
  .hv .sl img,.hv .sl.on img{transform:none;transition:none}
}