/* ============================================================================
Centurion Blue — shared design system (cb.css)
Identity: "issued like a challenge coin, precise like a ledger."
Type: Cinzel (display/inscription) · IBM Plex Sans (body) · IBM Plex Mono (data)
Load order in each page :
============================================================================ */
:root{
--ink:#08182b; /* deepest page navy */
--navy:#102a47; /* hero / panels */
--navy-soft:#16335a;
--navy-line:#23456e; /* hairlines on dark */
--gold:#c8a24a;
--gold-br:#ecca77;
--gold-dim:#9a7c37;
--steel:#86a0c0; /* muted text on dark */
--paper:#f4efe3; /* the ledger pay-slip only */
--paper-ink:#22303f;
--paper-line:#ddd1b9;
--cloud:#eef2f7; /* light section bg */
--ink-2:#16273a; /* text on light */
--muted:#586a7c; /* muted text on light */
--line:#dbe3ec; /* borders on light */
--good:#2c7d52;
--shadow:0 24px 60px rgba(6,18,33,.18);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;background:var(--ink);color:var(--ink-2);
font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px;}
/* ---- type utilities ---- */
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.72rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);}
.display{font-family:"Cinzel",Georgia,serif;font-weight:700;letter-spacing:.012em;line-height:1.08;}
.mono{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;}
.hl{color:var(--gold-br);}
.rule{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);opacity:.6;margin:0;}
/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.5em;justify-content:center;border:1px solid transparent;border-radius:4px;cursor:pointer;font-family:"IBM Plex Sans",sans-serif;font-weight:600;font-size:.95rem;letter-spacing:.01em;padding:13px 22px;transition:transform .12s ease,filter .12s ease,background .15s,color .15s;}
.btn:active{transform:translateY(1px);}
.btn-gold{background:linear-gradient(160deg,var(--gold-br),var(--gold));color:#2a2107;box-shadow:0 8px 22px rgba(200,162,74,.28);}
.btn-gold:hover{filter:brightness(1.06);}
.btn-ghost{background:transparent;color:#eaf1fa;border-color:rgba(200,162,74,.55);}
.btn-ghost:hover{background:rgba(200,162,74,.12);border-color:var(--gold);}
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy);}
.btn-navy:hover{background:var(--navy-soft);}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy);}
.btn-outline:hover{background:var(--navy);color:#fff;}
.btn-lg{padding:15px 28px;font-size:1rem;}
.btn-block{display:flex;width:100%;}
a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:2px solid var(--gold-br);outline-offset:3px;}
/* ---- top nav ---- */
nav.top{position:sticky;top:0;z-index:60;background:rgba(8,24,43,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--navy-line);}
nav.top .wrap{display:flex;align-items:center;gap:18px;height:66px;}
.brand{display:flex;align-items:center;gap:11px;color:#fff;}
.brand .em{width:30px;height:33px;flex:none;}
.brand .name{font-family:"Cinzel",serif;font-weight:700;font-size:1.12rem;letter-spacing:.06em;color:#f3f7fc;white-space:nowrap;}
.brand .name b{color:var(--gold-br);font-weight:700;}
.brand .name .slash{color:var(--gold-br);font-weight:700;}
nav.top .links{margin-left:auto;display:flex;align-items:center;gap:24px;}
nav.top .links .nl{font-size:.86rem;color:var(--steel);font-weight:500;letter-spacing:.01em;white-space:nowrap;}
nav.top .links .nl:hover{color:#fff;}
/* ---- hero ---- */
header.hero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 85% -10%, #1a3a63 0%, rgba(16,42,71,0) 55%),linear-gradient(180deg,#0b1f37 0%, #08182b 100%);color:#fff;padding:74px 0 86px;border-bottom:1px solid var(--navy-line);}
.hero .badge-pill{display:inline-block;background:rgba(200,162,74,.12);border:1px solid rgba(200,162,74,.4);color:var(--gold-br);font-family:"IBM Plex Mono",monospace;font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;border-radius:3px;margin-bottom:18px;}
.hero h1{margin:0;font-family:"Cinzel",serif;font-weight:700;font-size:clamp(2.4rem,5vw,4rem);line-height:1.05;letter-spacing:.01em;color:#fff;}
.hero h1 .hl{color:var(--gold-br);}
.hero .sub-line{font-family:"IBM Plex Mono",monospace;color:var(--gold);font-size:.86rem;letter-spacing:.06em;margin:18px 0 0;}
.hero p.lede{color:#d6e2f0;font-size:1.08rem;max-width:46ch;margin:20px 0 0;}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}
.hero .login-line{margin:20px 0 0;font-size:.9rem;color:var(--steel);}
.hero .login-line a{color:var(--gold-br);font-weight:600;}
.hero .hero-note{margin-top:18px;font-size:.82rem;color:var(--steel);}
/* split (two-column) hero */
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;}
.hero-copy .eyebrow{display:block;margin-bottom:18px;}
/* centered hero */
.hero-center{position:relative;z-index:2;text-align:center;max-width:760px;margin:0 auto;}
.hero-center .eyebrow{display:block;margin-bottom:16px;}
.hero-center p.lede{margin-left:auto;margin-right:auto;}
.hero-center .cta-row{justify-content:center;}
.hero-em{width:78px;height:86px;margin:0 auto 18px;filter:drop-shadow(0 14px 28px rgba(0,0,0,.45));}
/* engraved guilloché rosette */
.guilloche{position:absolute;top:-120px;right:-120px;width:560px;height:560px;opacity:.5;pointer-events:none;z-index:0;}
/* ---- signature: duty ledger ---- */
.ledger-stage{position:relative;}
.ledger{position:relative;background:var(--paper);color:var(--paper-ink);border-radius:8px;box-shadow:var(--shadow),0 0 0 1px rgba(0,0,0,.04);padding:26px 26px 22px;max-width:430px;margin-left:auto;background-image:repeating-linear-gradient(0deg,transparent,transparent 37px,rgba(34,48,63,.05) 37px,rgba(34,48,63,.05) 38px);}
.ledger::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:8px 0 0 8px;background:linear-gradient(180deg,var(--gold-br),var(--gold));}
.ledger .lh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.ledger .lh .ttl{font-family:"Cinzel",serif;font-weight:700;font-size:.96rem;letter-spacing:.1em;color:var(--paper-ink);}
.ledger .lh .no{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.08em;color:var(--gold-dim);}
.ledger .detail{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:#6a5f4a;margin:4px 0 16px;letter-spacing:.02em;}
.ledger .lrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;font-family:"IBM Plex Mono",monospace;font-size:.84rem;}
.ledger .lrow .lbl{color:#43505e;}
.ledger .lrow .lbl small{color:#8a7e64;}
.ledger .lrow .amt{font-weight:500;color:var(--paper-ink);}
.ledger .lsep{height:1px;background:repeating-linear-gradient(90deg,var(--paper-line),var(--paper-line) 4px,transparent 4px,transparent 8px);margin:8px 0;}
.ledger .total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0 2px;}
.ledger .total .lbl{font-family:"Cinzel",serif;font-weight:700;font-size:.86rem;letter-spacing:.08em;color:var(--paper-ink);}
.ledger .total .amt{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:1.5rem;color:#1d6b46;letter-spacing:-.01em;}
.ledger .tax{display:flex;justify-content:space-between;font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:#7a6f57;padding-top:4px;}
.ledger .stamp{position:absolute;right:-26px;bottom:-26px;width:104px;height:104px;filter:drop-shadow(0 8px 16px rgba(6,18,33,.4));}
.ledger .foot-chip{margin-top:16px;font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dim);display:flex;align-items:center;gap:8px;}
.ledger .foot-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px rgba(44,125,82,.18);}
/* ---- trust strip ---- */
.trust{background:var(--navy);color:#cfe0f0;border-top:1px solid var(--navy-line);border-bottom:1px solid var(--navy-line);}
.trust .wrap{display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:center;padding:18px 24px;}
.trust .t{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--steel);}
.trust .t b{color:#fff;font-weight:600;}
.trust .t svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:1.7;flex:none;}
/* ---- sections ---- */
section{padding:72px 0;}
.on-cloud{background:linear-gradient(180deg,#f1f5fb 0%,#e8edf5 100%);color:var(--ink-2);}
.on-white{background:#fff;color:var(--ink-2);}
.sec-head{max-width:700px;margin:0 auto 44px;text-align:center;}
.sec-head .eyebrow{display:block;margin-bottom:12px;}
.sec-head h2{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(1.6rem,3vw,2.15rem);margin:0 0 12px;color:var(--navy);letter-spacing:.01em;}
.sec-head h2::after{content:"";display:block;width:48px;height:2px;margin:16px auto 2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
.sec-head p{color:var(--muted);font-size:1.04rem;margin:0;}
.sec-head .more{display:inline-block;margin-top:14px;color:var(--gold-dim);font-weight:600;font-family:"IBM Plex Mono",monospace;font-size:.85rem;letter-spacing:.02em;}
.sec-head .more:hover{color:var(--gold);}
.center-cta{text-align:center;margin-top:38px;}
/* ---- exchange band ---- */
.exchange{background:linear-gradient(180deg,#0c2546,#0a1f3a);color:#fff;border-top:1px solid var(--gold-dim);border-bottom:1px solid var(--navy-line);padding:34px 0;}
.exchange .wrap{display:flex;gap:26px;flex-wrap:wrap;align-items:center;justify-content:space-between;}
.exchange .x-copy{flex:1;min-width:280px;}
.exchange .eyebrow{display:block;margin-bottom:8px;}
.exchange h2{font-family:"Cinzel",serif;font-weight:700;font-size:1.5rem;margin:0 0 8px;letter-spacing:.02em;}
.exchange p{margin:0;color:#cdddf0;max-width:620px;font-size:.98rem;}
.exchange p b{color:#fff;}
/* ---- video w/ logo overlay ---- */
.video-frame{position:relative;max-width:880px;margin:0 auto;border-radius:10px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#000;}
.video-frame video{width:100%;display:block;}
.video-logo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(circle at center,rgba(8,24,43,.45),rgba(8,24,43,.82));cursor:pointer;z-index:2;transition:opacity .35s ease;}
.video-logo.hidden{opacity:0;pointer-events:none;}
.video-logo .em{width:92px;height:101px;filter:drop-shadow(0 12px 28px rgba(0,0,0,.5));}
.video-logo .vname{font-family:"Cinzel",serif;font-weight:700;color:#fff;letter-spacing:.12em;font-size:clamp(1.1rem,2.4vw,1.5rem);}
.video-logo .vsub{font-family:"IBM Plex Mono",monospace;color:var(--gold-br);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;margin-top:-4px;}
.video-logo .play{margin-top:6px;width:62px;height:62px;border-radius:50%;border:2px solid var(--gold);background:rgba(8,24,43,.5);display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s;}
.video-logo:hover .play{background:rgba(200,162,74,.22);transform:scale(1.05);}
.video-logo .play svg{width:24px;height:24px;margin-left:3px;fill:var(--gold-br);}
/* 3-second branded logo splash before the intro video plays */
.video-logo.splash{cursor:default;background:radial-gradient(circle at center,rgba(8,24,43,.74),rgba(8,24,43,.98));}
.video-logo.splash .play{display:none;}
.video-logo.splash .em{animation:vlogoIn .5s ease both, vlogoPulse 1.5s ease-in-out .5s infinite;}
.video-logo.splash::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--gold);animation:vlogoBar 3s linear forwards;}
@keyframes vlogoIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes vlogoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes vlogoBar{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){.video-logo.splash .em{animation:none}.video-logo.splash::after{animation:none;width:100%}}
/* ---- benefit cards (icon + title + desc) ---- */
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.bgrid.cols3{grid-template-columns:repeat(3,1fr);}
.bcard{background:linear-gradient(180deg,#fff 0%,#fbfaf5 100%);border:1px solid var(--line);border-radius:10px;padding:28px 22px;position:relative;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s;}
.bcard::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,var(--gold-br),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .3s ease;}
.bcard:hover{border-color:var(--gold);box-shadow:0 20px 46px rgba(16,42,71,.14);transform:translateY(-4px);}
.bcard:hover::after{transform:scaleX(1);}
.bcard .ic{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(200,162,74,.5);border-radius:50%;margin-bottom:18px;background:linear-gradient(160deg,#fbf4e2,#efe1bf);box-shadow:0 5px 14px rgba(200,162,74,.24),inset 0 1px 0 rgba(255,255,255,.7);}
.bcard .ic svg{width:23px;height:23px;stroke:var(--gold-dim);fill:none;stroke-width:1.7;}
.bcard .num{position:absolute;top:20px;right:22px;font-family:"Cinzel",serif;font-weight:700;font-size:.82rem;color:var(--line);letter-spacing:.05em;}
.bcard h3{font-size:1.02rem;margin:0 0 7px;color:var(--navy);font-weight:600;}
.bcard p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55;}
/* ---- grouped feature list (features page) ---- */
.grp-h{display:flex;align-items:center;gap:14px;margin:0 0 20px;}
.grp-h .ic{width:46px;height:46px;flex:none;border-radius:8px;border:1px solid var(--gold);background:linear-gradient(160deg,#0e2641,#0a1c33);display:flex;align-items:center;justify-content:center;}
.grp-h .ic svg{width:24px;height:24px;stroke:var(--gold-br);fill:none;stroke-width:1.5;}
.grp-h h2{margin:0;font-family:"Cinzel",serif;font-weight:700;font-size:1.5rem;color:var(--navy);letter-spacing:.01em;}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:40px;}
.fcard{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px 18px 16px 36px;position:relative;}
.fcard::before{content:"";position:absolute;left:16px;top:21px;width:11px;height:6px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);}
.fcard b{display:block;color:var(--navy);font-size:.96rem;font-weight:600;margin-bottom:3px;}
.fcard span{color:var(--muted);font-size:.86rem;line-height:1.5;}
/* ---- steps (how it works) ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 22px;}
.step .n{font-family:"Cinzel",serif;font-weight:700;font-size:1.05rem;color:var(--gold-dim);width:46px;height:46px;border:1px solid rgba(200,162,74,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:linear-gradient(160deg,#fbf4e2,#efe1bf);box-shadow:0 5px 14px rgba(200,162,74,.22),inset 0 1px 0 rgba(255,255,255,.7);}
.step h3{margin:0 0 7px;color:var(--navy);font-size:1.05rem;font-weight:600;}
.step p{margin:0;color:var(--muted);font-size:.92rem;}
/* ---- stats ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:880px;margin:0 auto 42px;}
.stat{background:#fff;border:1px solid var(--line);border-radius:8px;padding:18px 12px;text-align:center;}
.stat b{display:block;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:1.4rem;color:var(--navy);}
.stat span{font-size:.78rem;color:var(--muted);}
/* ---- app preview mock ---- */
.preview{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);overflow:hidden;max-width:780px;margin:0 auto;}
.preview .bar{background:var(--navy);color:#fff;padding:12px 16px;font-family:"Cinzel",serif;letter-spacing:.04em;font-size:.92rem;display:flex;align-items:center;gap:10px;}
.preview .bar .em{width:22px;height:24px;}
.preview .body{padding:20px;background:var(--cloud);}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px;}
.kpi{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px;}
.kpi .l{font-family:"IBM Plex Mono",monospace;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);}
.kpi .v{font-family:"IBM Plex Mono",monospace;font-size:1.25rem;font-weight:600;color:var(--navy);margin-top:4px;}
.kpi.gold .v{color:var(--gold-dim);}
.prow{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px;font-size:.84rem;}
.prow .pill{font-family:"IBM Plex Mono",monospace;font-size:.66rem;font-weight:500;letter-spacing:.04em;background:var(--cloud);color:var(--steel);padding:3px 8px;border-radius:3px;border:1px solid var(--line);}
.prow .amt{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--good);}
/* ---- credential / plan + choose cards ---- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:920px;margin:0 auto;}
.cred{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;position:relative;}
.cred.feature{border:1.5px solid var(--gold);box-shadow:0 18px 44px rgba(200,162,74,.16);}
.cred .ribbon{position:absolute;top:0;right:0;background:linear-gradient(160deg,var(--gold-br),var(--gold));color:#2a2107;font-family:"IBM Plex Mono",monospace;font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1;padding:7px 14px;border-radius:0 10px 0 12px;box-shadow:0 4px 10px rgba(200,162,74,.28);}
.cred .ch{padding:24px 26px 18px;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:flex-start;}
.cred .ch .glyph{width:46px;height:46px;flex:none;border-radius:8px;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#fbf6ea,#f3ead2);}
.cred .ch .glyph svg{width:24px;height:24px;stroke:var(--gold-dim);fill:none;stroke-width:1.5;}
.cred .ch h3{margin:0;font-family:"Cinzel",serif;font-weight:700;font-size:1.18rem;color:var(--navy);letter-spacing:.02em;}
.cred .ch .tag{font-size:.82rem;color:var(--muted);margin-top:3px;}
.cred .cb{padding:22px 26px;flex:1;}
.cred .price{display:flex;align-items:baseline;gap:8px;}
.cred .price .amt{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:2rem;color:var(--navy);letter-spacing:-.01em;}
.cred .price .per{font-size:.85rem;color:var(--muted);font-weight:500;}
.cred .price-sub{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--good);font-weight:500;margin:6px 0 16px;letter-spacing:.02em;}
.cred ul{list-style:none;margin:0;padding:0;}
.cred ul li{position:relative;padding:8px 0 8px 26px;font-size:.9rem;color:var(--ink-2);border-bottom:1px solid var(--cloud);}
.cred ul li:last-child{border-bottom:none;}
.cred ul li::before{content:"";position:absolute;left:2px;top:13px;width:11px;height:6px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);}
.cred .cf{padding:0 26px 26px;}
.cred .hint{text-align:center;font-size:.76rem;color:var(--muted);margin-top:11px;font-family:"IBM Plex Mono",monospace;letter-spacing:.02em;}
.strap{text-align:center;color:var(--muted);font-size:.92rem;max-width:64ch;margin:32px auto 0;}
/* ---- panel (single pricing / add-on / generic) ---- */
.panel{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;max-width:480px;margin:0 auto;box-shadow:0 14px 40px rgba(16,42,71,.1);}
.panel.wide{max-width:620px;}
.panel.feature{border:1.5px solid var(--gold);}
.panel .ph{background:linear-gradient(160deg,var(--navy),#1c3f68);color:#fff;text-align:center;padding:28px 22px;}
.panel .ph .amt{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:2.6rem;letter-spacing:-.01em;line-height:1;}
.panel .ph .amt small{font-size:1rem;color:#cfe0f0;font-weight:500;}
.panel .ph .term{font-family:"IBM Plex Mono",monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--gold-br);margin-top:8px;}
.panel .ph .eyebrow{display:block;margin-bottom:8px;}
.panel .plist{list-style:none;margin:0;padding:22px 26px;}
.panel .plist li{position:relative;padding:8px 0 8px 28px;font-size:.92rem;color:var(--ink-2);border-bottom:1px solid var(--cloud);}
.panel .plist li:last-child{border-bottom:none;}
.panel .plist li::before{content:"";position:absolute;left:2px;top:13px;width:11px;height:6px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);}
.panel .pbody{padding:22px 26px 6px;color:var(--ink-2);font-size:.95rem;line-height:1.6;}
.panel .pbody p{margin:0 0 12px;}
.panel .pcta{padding:0 26px 16px;}
.panel .pnote{text-align:center;color:var(--muted);font-size:.76rem;padding:8px 26px 24px;font-family:"IBM Plex Mono",monospace;letter-spacing:.01em;}
/* ---- two-column info (customization / scheduler benefit) ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;max-width:980px;margin:0 auto;}
.checklist{list-style:none;margin:0;padding:0;}
.checklist li{position:relative;padding:11px 0 11px 32px;font-size:.98rem;color:var(--ink-2);border-bottom:1px solid var(--line);}
.checklist li:last-child{border-bottom:none;}
.checklist li b{color:var(--navy);}
.checklist li::before{content:"";position:absolute;left:3px;top:17px;width:12px;height:7px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);}
.info-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:30px;text-align:center;box-shadow:0 10px 30px rgba(16,42,71,.1);}
.info-card.gold{border:1.5px solid var(--gold);}
.info-card .em{width:72px;height:79px;margin:0 auto 14px;}
.info-card h3{margin:0 0 8px;font-family:"Cinzel",serif;font-weight:700;color:var(--navy);font-size:1.25rem;letter-spacing:.01em;}
.info-card p{margin:0 0 18px;color:var(--muted);font-size:.94rem;}
/* ---- FAQ ---- */
.faq{max-width:780px;margin:0 auto;}
.faq details{background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:10px;padding:0 18px;}
.faq summary{cursor:pointer;font-weight:600;color:var(--navy);font-size:.98rem;padding:16px 0;list-style:none;display:flex;align-items:center;gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"+";font-family:"IBM Plex Mono",monospace;color:var(--gold);font-size:1.2rem;font-weight:500;width:16px;flex:none;}
.faq details[open] summary::before{content:"–";}
.faq details p{margin:0 0 16px;color:var(--muted);font-size:.92rem;line-height:1.65;padding-left:28px;}
/* ---- testimonials ---- */
.quote{background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px;display:flex;flex-direction:column;}
.quote .stars{color:var(--gold);font-size:.95rem;letter-spacing:3px;margin-bottom:10px;}
.quote p{margin:0 0 14px;font-size:.96rem;line-height:1.6;color:var(--ink-2);font-style:italic;}
.quote .who{margin-top:auto;font-family:"IBM Plex Mono",monospace;font-weight:500;color:var(--navy);font-size:.8rem;letter-spacing:.02em;}
/* ---- install / QR ---- */
.install-grid{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;max-width:840px;margin:0 auto;}
.qr-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px;text-align:center;box-shadow:0 8px 24px rgba(16,42,71,.1);}
.qr-card img{display:block;width:190px;height:190px;image-rendering:pixelated;}
.qr-cap{margin-top:8px;font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--muted);letter-spacing:.04em;}
.install-steps{display:flex;flex-direction:column;gap:16px;}
.ist h3{margin:0 0 4px;color:var(--navy);font-size:1rem;font-weight:600;}
.ist ol{margin:0;padding-left:20px;color:var(--muted);font-size:.9rem;}
.ist li{margin:2px 0;}
/* ---- generic grids ---- */
.grid{display:grid;gap:18px;}
.g3{grid-template-columns:repeat(3,1fr);}
.g2{grid-template-columns:repeat(2,1fr);}
/* ---- contact / cta band ---- */
.contact,.ctaband{background:linear-gradient(180deg,#0b2244,#08182b);color:#fff;text-align:center;border-top:1px solid var(--gold-dim);}
.contact .eyebrow{display:block;margin-bottom:12px;}
.contact h2,.ctaband h2{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(1.5rem,3vw,2rem);margin:0 0 10px;letter-spacing:.02em;}
.contact p,.ctaband p{color:#cdddf0;margin:0 0 24px;}
.contact .sms,.ctaband .sms{margin-top:18px;font-size:.95rem;color:#cdddf0;}
.contact .sms a,.ctaband .sms a{color:var(--gold-br);font-weight:600;font-family:"IBM Plex Mono",monospace;}
/* ---- long-form document (privacy / terms / unsubscribe) ---- */
.doc{max-width:780px;margin:0 auto;padding:56px 24px 80px;color:var(--ink-2);}
.doc h1{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(1.7rem,3.4vw,2.3rem);color:var(--navy);margin:0 0 6px;letter-spacing:.01em;}
.doc h2{font-family:"Cinzel",serif;font-weight:700;font-size:1.3rem;color:var(--navy);margin:34px 0 10px;border-top:1px solid var(--line);padding-top:26px;letter-spacing:.01em;}
.doc h3{font-size:1.02rem;color:var(--navy);margin:20px 0 6px;font-weight:600;}
.doc p,.doc li{font-size:.96rem;line-height:1.7;}
.doc .eff{font-family:"IBM Plex Mono",monospace;color:var(--muted);font-size:.82rem;letter-spacing:.02em;margin:0 0 8px;}
.doc .lead{background:var(--cloud);border-left:3px solid var(--gold);border-radius:6px;padding:16px 18px;margin:18px 0;font-size:.98rem;}
.doc ul{padding-left:22px;}
.doc li{margin:6px 0;}
.doc a{color:var(--gold-dim);font-weight:600;}
.doc a:hover{color:var(--gold);}
.doc code{background:var(--cloud);padding:1px 6px;border-radius:4px;font-family:"IBM Plex Mono",monospace;font-size:.86rem;}
.doc .docfoot{border-top:1px solid var(--line);margin-top:40px;padding-top:18px;font-size:.82rem;color:var(--muted);text-align:center;}
/* ---- footer ---- */
footer{background:#06121f;color:#7e94ad;font-size:.82rem;padding:38px 0;border-top:1px solid var(--navy-line);}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;justify-content:space-between;}
footer .brand .name{font-size:1rem;}
footer .legal{max-width:66ch;line-height:1.6;}
footer .legal b{color:#aebfd2;}
footer .legal a{color:var(--gold-br);font-weight:600;}
/* ---- responsive ---- */
@media(max-width:960px){
.bgrid,.bgrid.cols3{grid-template-columns:1fr 1fr;}
.fgrid{grid-template-columns:1fr 1fr;}
}
@media(max-width:920px){
.hero-grid{grid-template-columns:1fr;gap:42px;}
.ledger{margin:0 auto;}
.steps{grid-template-columns:1fr;}
.split{grid-template-columns:1fr;}
.stats{grid-template-columns:1fr 1fr;}
.kpis{grid-template-columns:1fr 1fr;}
.install-grid{grid-template-columns:1fr;justify-items:center;}
}
@media(max-width:680px){
nav.top .links .nl{display:none;}
nav.top .links{gap:10px;}
/* Fit fix: brand + Log in + Get started overflowed a 390px phone by 53px,
pushing the gold button off screen and letting the page swipe sideways.
Same look, tightened metrics so everything stays on screen. */
nav.top .wrap{gap:10px;}
.brand .em{width:26px;height:29px;}
.brand .name{font-size:.95rem;letter-spacing:.04em;}
nav.top .links .btn{padding:9px 12px;font-size:.84rem;white-space:nowrap;}
/* The earlier metrics were tuned against index's short "Get started". Denver carries a
wider wordmark (CENTURION BLUE / Denver) and longer calls to action ("Open the App",
"Build my schedule"), which still ran off every iPhone, 61px over on a 430px Pro Max.
On a phone the edition suffix is decoration, the page itself says Denver, so drop it
and let the brand shrink. Buys ~64px, enough for any label we ship. */
.brand .name .slash{display:none;}
.brand{min-width:0;}
.brand .name{overflow:hidden;text-overflow:ellipsis;}
nav.top .links{flex:none;}
/* Long calls to action in the body wrap instead of pushing the page sideways */
.btn{max-width:100%;}
.cards,.bgrid,.bgrid.cols3,.fgrid,.g3,.g2{grid-template-columns:1fr;}
section{padding:54px 0;}
header.hero{padding:54px 0 64px;}
.ledger .stamp{width:84px;height:84px;right:-12px;bottom:-18px;}
}
@media(max-width:390px){
/* the smallest phones: keep both buttons on screen */
.brand .name{font-size:.8rem;letter-spacing:.01em;}
nav.top .links .btn{padding:8px 9px;font-size:.76rem;}
nav.top .wrap{padding:0 12px;gap:8px;}
/* .wrap keeps 24px of padding each side, so the mockup has to clear 48px, not 40,
or it widens its grid column and drags the copy beside it off screen too */
.phone{width:min(290px,calc(100vw - 56px));max-width:100%;}
.showcase>*{min-width:0;}
/* long-label buttons wrap onto a second line rather than off the right edge */
.btn-lg{padding:14px 18px;font-size:.94rem;white-space:normal;text-align:center;}
.showcase-copy,.showcase{min-width:0;}
}
@media(max-width:344px){
/* 320px-class screens: the wordmark keeps the emblem's spot */
.brand .em{display:none;}
.showcase{grid-template-columns:1fr;}
.checklist li{overflow-wrap:anywhere;}
}
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto;}
}
/* ============================================================================
Enhancements — scroll reveal · animated hero · app preview phone
============================================================================ */
/* ---- scroll reveal (progressive: only hides when JS is on) ---- */
html.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform;}
html.js .reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1!important;transform:none!important;}}
/* ---- animated hero guilloché (slow drift) ---- */
header.hero .guilloche{animation:cbSpin 160s linear infinite;transform-origin:50% 50%;}
@keyframes cbSpin{to{transform:rotate(360deg);}}
/* ---- app preview: phone mock ---- */
.showcase{display:grid;grid-template-columns:auto 1fr;gap:58px;align-items:center;max-width:1000px;margin:0 auto;}
.showcase-copy .checklist{margin-bottom:28px;}
.phone{width:300px;flex:none;margin:0 auto;background:linear-gradient(165deg,#20406a,#0c1f37);border-radius:42px;padding:13px;box-shadow:0 46px 90px rgba(6,18,33,.42),inset 0 0 0 1px rgba(200,162,74,.28);}
.phone .frm{position:relative;background:#0b1f37;border-radius:31px;overflow:hidden;}
.phone .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:116px;height:22px;background:#06121f;border-radius:0 0 15px 15px;z-index:3;}
.phone .scr{background:linear-gradient(180deg,#f4f7fb,#e8edf5);padding:36px 15px 20px;min-height:552px;}
.phone .aptop{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:15px;}
.phone .aptop .em{width:20px;height:22px;}
.phone .aptop span{font-family:"Cinzel",serif;font-weight:700;font-size:.9rem;color:var(--navy);letter-spacing:.03em;}
.phone .aphero{background:linear-gradient(160deg,#122c49,#0b1f37);border-radius:16px;padding:17px;text-align:center;color:#fff;box-shadow:0 10px 24px rgba(11,31,55,.32);}
.phone .aphero .l{font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.18em;color:var(--gold-br);text-transform:uppercase;}
.phone .aphero .v{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:1.9rem;margin:5px 0 2px;letter-spacing:-.01em;}
.phone .aphero .s{font-family:"IBM Plex Mono",monospace;font-size:.66rem;color:#9db4d0;}
.phone .apk{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:11px 0;}
.phone .apk .k{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 5px;text-align:center;}
.phone .apk .k span{display:block;font-family:"IBM Plex Mono",monospace;font-size:.55rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.phone .apk .k b{font-family:"IBM Plex Mono",monospace;font-size:1.02rem;color:var(--navy);}
.phone .apr{display:flex;flex-direction:column;gap:8px;}
.phone .apr .r{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;}
.phone .apr .r b{display:block;font-size:.76rem;color:var(--navy);font-weight:600;}
.phone .apr .r small{font-family:"IBM Plex Mono",monospace;font-size:.6rem;color:var(--muted);}
.phone .apr .r .amt{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:.8rem;color:var(--good);}
.phone .apr .r .scan{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:.6rem;font-weight:500;letter-spacing:.04em;color:var(--gold-dim);background:rgba(200,162,74,.13);border:1px solid rgba(200,162,74,.4);border-radius:4px;padding:3px 7px;}
@media(max-width:820px){
.showcase{grid-template-columns:1fr;gap:36px;}
.showcase-copy{text-align:center;}
.showcase-copy .checklist{text-align:left;max-width:420px;margin:0 auto 26px;}
}
/* ---- Phone fit, last word ------------------------------------------------------------
These must live at the END of the file. The showcase/phone base rules are declared at
~line 418, AFTER the mobile media blocks above, and a media query adds no specificity,
so an override written up there loses the cascade and silently does nothing. The phone
mockup stayed 300px wide inside a 272px column and pushed every page 4px sideways. */
@media(max-width:430px){
.showcase>*{min-width:0;}
.showcase-copy .checklist{max-width:100%;}
}
@media(max-width:390px){
/* .wrap keeps 24px padding each side, so the mockup must clear 48px, not 40 */
.phone{width:min(290px,calc(100vw - 56px));max-width:100%;}
}