/* FableForge / Harbour — site design system. One stylesheet, no frameworks. */

/* ---------- tokens ---------- */
:root{
  color-scheme: light dark;
  --paper:#FBFBF9;
  --ink:#1B2230;
  --muted:#5A6474;
  --hairline:#E4E6EA;
  --navy:#142033;
  --navy-edge:#142033;
  --blue:#2F6FE4;
  --blue-hover:#2560CC;
  --link:#2D6AD9;   /* the action blue, darkened one notch: #2F6FE4 is 4.49:1 on paper, just under AA */
  --amber-ink:#9C6000;
  --on-navy:#F4F6F8;
  --on-navy-2:#DBE2EB;
  --on-navy-3:#BCC6D4;
  --win:#FFFFFF;
  --win-bar:#F2F4F7;
  --win-ink:#1B2230;
  --win-muted:#6B7484;
  --win-line:#E4E6EA;
  --win-track:#E7E9ED;
  --ring:#2F6FE4;
  --ring-band:#9FC0FF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1620;
    --ink:#ECEEF1;
    --muted:#9AA3AF;
    --hairline:#23303F;
    --navy-edge:#1E2B3C;
    --link:#5B8DF0;
    --amber-ink:#E8AE44;
    --win:#1F2A38;
    --win-bar:#273344;
    --win-ink:#ECEEF1;
    --win-muted:#A2ACB9;
    --win-line:#3A4759;
    --win-track:#33414F;
    --ring:#8FB4FF;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1620; --ink:#ECEEF1; --muted:#9AA3AF; --hairline:#23303F;
  --navy-edge:#1E2B3C; --link:#5B8DF0; --amber-ink:#E8AE44;
  --win:#1F2A38; --win-bar:#273344; --win-ink:#ECEEF1; --win-muted:#A2ACB9;
  --win-line:#3A4759; --win-track:#33414F; --ring:#8FB4FF;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Bricolage Grotesque","Avenir Next","Helvetica Neue",system-ui,sans-serif;
  font-size:16px;
  line-height:1.55;
  font-variation-settings:"wght" 400,"wdth" 100,"opsz" 14;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (min-width:900px){ body{font-size:17px;line-height:1.6} }
img,svg{max-width:100%}
img{height:auto}
[hidden]{display:none!important}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:2px}
:where(a,button,summary,input):focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:3px}
.band :where(a,button):focus-visible{outline-color:var(--ring-band)}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:max(16px,4vw);top:8px;z-index:9;background:var(--blue);color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none}

.wrap{width:100%;max-width:calc(1120px + 2*max(16px,4vw));margin-inline:auto;padding-inline:max(16px,4vw)}

/* ---------- display type ---------- */
.d{
  font-weight:800;
  font-variation-settings:"opsz" 96,"wdth" 90,"wght" 800;
  line-height:.98;
  letter-spacing:-.02em;
}
h1,h2,h3{margin:0}
.h1{font-size:clamp(36px,6.4vw,56px)}
.h2{font-size:clamp(30px,4.4vw,40px)}
.h3{font-size:clamp(20px,2.2vw,22px);font-weight:700;letter-spacing:-.012em;line-height:1.2}
.lead{font-size:clamp(18px,2.1vw,22px);line-height:1.42;margin:18px 0 0;max-width:32em}
.fine{font-size:14px;line-height:1.5;color:var(--muted);margin:0}
.band .fine{color:var(--on-navy-3)}

/* ---------- bands ---------- */
.band{background:var(--navy);color:var(--on-navy);border-bottom:1px solid var(--navy-edge)}
.band a{color:var(--on-navy)}
.sec{padding-block:clamp(32px,4.2vw,48px)}
.sec>.h2{margin-bottom:clamp(24px,3vw,36px)}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;flex-wrap:nowrap;gap:16px;min-height:66px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--on-navy);white-space:nowrap}
.brand img{width:24px;height:24px;display:block;border-radius:6px;flex:none}
.brand b{font-size:19px;font-weight:700;letter-spacing:-.015em;font-variation-settings:"wght" 700,"wdth" 95,"opsz" 24}
.nav-links{margin-left:auto;display:flex;gap:18px;white-space:nowrap}
.nav-links a{font-size:14.5px;text-decoration:none;color:var(--on-navy-2)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--on-navy);text-decoration:underline;text-underline-offset:4px}
.nav .btn{margin-left:18px}
@media (max-width:639px){
  .nav-links{display:none}
  .nav .btn{margin-left:auto}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 20px;border-radius:10px;border:1px solid transparent;
  font:inherit;font-size:16px;font-weight:600;font-variation-settings:"wght" 600,"wdth" 98,"opsz" 18;
  letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;
}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-hover)}
.btn-ghost{background:transparent;color:var(--on-navy);border-color:rgba(244,246,248,.4)}
.btn-ghost:hover{border-color:var(--on-navy);background:rgba(244,246,248,.08)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--hairline)}
.btn-outline:hover{border-color:var(--muted)}
.nav .btn{padding:9px 16px;font-size:15px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 14px}
@media (max-width:519px){
  .cta{display:grid;gap:10px}
  .cta .btn{width:100%}
}

/* ---------- hero ---------- */
.hero{display:grid;gap:clamp(36px,5vw,48px);padding-block:clamp(44px,6vw,84px) clamp(52px,7vw,92px)}
@media (min-width:980px){
  .hero{grid-template-columns:7fr 5fr;align-items:center}
}
.hero .lead{color:var(--on-navy-2)}

/* ---------- transfers ledger mock ---------- */
.mock{margin:0}
.win{
  background:var(--win);color:var(--win-ink);
  border:1px solid var(--win-line);border-radius:10px;overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(20,32,51,.45);
  font-size:clamp(12px,3.1vw,13.5px);line-height:1.35;
  font-variant-numeric:tabular-nums;
}
.win-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--win-bar);border-bottom:1px solid var(--win-line)}
.lights{display:flex;gap:6px;flex:none}
.lights i{width:10px;height:10px;border-radius:50%;display:block}
.lights i:nth-child(1){background:#FF5F57}
.lights i:nth-child(2){background:#FEBC2E}
.lights i:nth-child(3){background:#28C840}
.win-title{font-size:.95em;font-weight:600;color:var(--win-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rows{list-style:none;margin:0;padding:4px 0}
.row{
  display:grid;align-items:center;column-gap:10px;row-gap:7px;padding:8px 12px;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"nm st" "pb sz";
}
.row+.row{border-top:1px solid color-mix(in srgb,var(--win-line) 55%,transparent)}
@media (min-width:560px){
  .row{grid-template-columns:minmax(0,1fr) auto minmax(54px,84px) auto;grid-template-areas:"nm sz pb st";row-gap:0;padding:7px 12px}
}
.nm{grid-area:nm;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sz{grid-area:sz;color:var(--win-muted);white-space:nowrap}
.pb{grid-area:pb;position:relative;height:4px;border-radius:2px;background:var(--win-track);overflow:hidden}
.pb i{display:block;height:100%;width:100%;background:var(--blue);border-radius:2px}
.pb u{position:absolute;inset:0;opacity:0;text-decoration:none;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.8) 0 2px,rgba(255,255,255,0) 2px 5px)}
.stc{grid-area:st;display:grid;justify-items:end;text-align:right;white-space:nowrap;min-width:72px}
.stc>span{grid-area:1/1;opacity:0}
.s0,.s1,.s2{color:var(--win-muted)}
.s1{color:var(--blue)}
.stc>.s3{opacity:1;color:var(--amber-ink);font-weight:600;display:flex;align-items:center;gap:5px}
.tick{width:11px;height:11px;flex:none}
.win-foot{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--win-bar);border-top:1px solid var(--win-line);color:var(--win-muted)}
.fstack{display:grid;flex:1;min-width:0}
.fstack>span{grid-area:1/1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f1{opacity:0}
.f2 b{color:var(--win-ink);font-weight:600}
.f2 u{text-decoration:none;color:var(--blue)}
.replay{
  flex:none;background:transparent;border:1px solid var(--win-line);color:var(--win-muted);
  border-radius:10px;padding:3px 9px;font:inherit;font-size:.9em;cursor:pointer;
}
.replay:hover{color:var(--win-ink);border-color:var(--win-muted)}

.ledger{--dur:2.2s;--stp:.55s;--tot:5.5s}
.ledger.run .row{--d:calc(var(--i) * var(--stp))}
.ledger.run .pb i{animation:barfill var(--dur) var(--d) linear both}
.ledger.run .pb u{animation:barhatch var(--dur) var(--d) linear both}
.ledger.run .s0{animation:st0 var(--dur) var(--d) linear both}
.ledger.run .s1{animation:st1 var(--dur) var(--d) linear both}
.ledger.run .s2{animation:st2 var(--dur) var(--d) linear both}
.ledger.run .s3{animation:st3 var(--dur) var(--d) linear both}
.ledger.run .f1{animation:fa var(--tot) linear both}
.ledger.run .f2{animation:fb var(--tot) linear both}
@keyframes barfill{0%,25%{width:0}65%,100%{width:100%}}
@keyframes barhatch{0%,64.9%{opacity:0}65%,84.9%{opacity:1}85%,100%{opacity:0}}
@keyframes st0{0%,24.9%{opacity:1}25%,100%{opacity:0}}
@keyframes st1{0%,24.9%{opacity:0}25%,64.9%{opacity:1}65%,100%{opacity:0}}
@keyframes st2{0%,64.9%{opacity:0}65%,84.9%{opacity:1}85%,100%{opacity:0}}
@keyframes st3{0%,84.9%{opacity:0}85%,100%{opacity:1}}
@keyframes fa{0%,93.9%{opacity:1}94%,100%{opacity:0}}
@keyframes fb{0%,93.9%{opacity:0}94%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .ledger.run *{animation:none!important}
}

.band-top{border-bottom:0}
.mock-cap{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--on-navy-3);max-width:46ch}

/* ---------- how a copy works ---------- */
.steps{display:grid}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(4,1fr);column-gap:40px}
  .step{padding-bottom:4px}
}
.step{border-top:1px solid var(--hairline);padding:20px 0 26px}
.step-n{display:block;font-size:40px;margin-bottom:12px;color:var(--ink)}
.step .h3{margin-bottom:8px}
.step p{margin:0;color:var(--muted);font-size:16px;line-height:1.55;max-width:34em}

/* ---------- scenarios ---------- */
.scn{border-top:1px solid var(--hairline);padding:26px 0;display:grid;gap:10px}
@media (min-width:900px){
  .scn{grid-template-columns:minmax(170px,4fr) minmax(0,9fr);column-gap:48px;align-items:start}
}
.scn p{margin:0;color:var(--muted);max-width:60ch}
.scn p b{color:var(--ink);font-weight:700}
.shot{margin:clamp(32px,4vw,48px) 0 0}
.shot img{display:block;width:100%;border:1px solid var(--hairline);border-radius:10px}
.shot figcaption{margin-top:12px;font-size:14px;color:var(--muted);max-width:60ch}

/* ---------- spec sheet / pricing ---------- */
.spec{margin:0;border-top:1px solid var(--hairline)}
.spec>div{border-bottom:1px solid var(--hairline);padding:18px 0;display:grid;gap:4px}
@media (min-width:760px){
  .spec>div{grid-template-columns:210px minmax(0,1fr);column-gap:40px;align-items:baseline}
}
.spec dt{font-weight:700;font-variation-settings:"wght" 700,"wdth" 95,"opsz" 18}
.spec dd{margin:0;color:var(--muted);max-width:60ch}
.spec dd b{color:var(--ink);font-weight:700}
.after-spec{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:32px}
@media (max-width:519px){
  .after-spec{display:grid;gap:14px}
  .after-spec .btn{width:100%}
}

/* ---------- download band ---------- */
.dl{display:grid;gap:4px;padding-block:clamp(52px,6.5vw,80px)}
.dl .h2{margin:0}
.dl .meta{margin:12px 0 0;color:var(--on-navy-2)}
@media (min-width:900px){
  .dl{grid-template-columns:7fr 5fr;column-gap:48px;align-items:center}
  .dl .h2{grid-column:1;grid-row:1}
  .dl .meta{grid-column:1;grid-row:2}
  .dl .cta{grid-column:2;grid-row:1;margin:0;justify-content:flex-end}
  .dl .fine{grid-column:2;grid-row:2;text-align:right;margin-top:12px}
}

/* ---------- footer ---------- */
.foot{padding-block:36px 56px;font-size:14px;color:var(--muted)}
.foot-top{border-top:1px solid var(--hairline);padding-top:28px}
.foot p{margin:0}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:14px;padding:0;list-style:none}

/* ---------- prose pages ---------- */
.prose{max-width:68ch;padding-block:clamp(44px,6vw,72px) clamp(56px,7vw,88px);overflow-wrap:break-word}
.prose .h1{padding-bottom:20px;border-bottom:1px solid var(--hairline)}
.prose .stamp{margin:14px 0 0;font-size:14px;color:var(--muted)}
.prose h2{font-size:clamp(22px,2.6vw,24px);font-weight:700;letter-spacing:-.012em;margin:44px 0 10px;font-variation-settings:"wght" 700,"wdth" 95,"opsz" 26}
.prose h3{font-size:20px;font-weight:700;letter-spacing:-.012em;margin:32px 0 6px;font-variation-settings:"wght" 700,"wdth" 94,"opsz" 22}
.prose p{margin:0 0 16px;color:var(--muted)}
.prose p strong,.prose p b{color:var(--ink)}
.prose code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.92em;background:color-mix(in srgb,var(--muted) 12%,transparent);padding:1px 5px;border-radius:4px}
.prose .key{display:block;word-break:break-all;border:1px solid var(--hairline);border-radius:10px;padding:14px;background:transparent}
.prose form{display:grid;gap:12px;max-width:420px;margin:0 0 16px}
.prose input{padding:11px 13px;border-radius:10px;border:1px solid color-mix(in srgb,var(--muted) 48%,transparent);background:transparent;color:var(--ink);font:inherit}
.prose input::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}

/* ---------- brand page ---------- */
.mark{font-size:clamp(44px,10vw,96px)}
.product{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:28px 0;display:grid;gap:12px;margin-bottom:clamp(56px,7vw,88px)}
@media (min-width:760px){
  .product{grid-template-columns:200px minmax(0,1fr) auto;column-gap:40px;align-items:center}
}
.brand-hero{padding-block:clamp(48px,7vw,88px) clamp(36px,4.5vw,56px)}
.brand-hero .lead{color:var(--muted);max-width:32em}
.prod-name{font-size:clamp(24px,3vw,28px);line-height:1.1}
.product p{margin:0;color:var(--muted);max-width:52ch}
.product .links{display:flex;gap:18px;white-space:nowrap}

/* ---------- checkout, keys and recovery forms ---------- */
.prose form label{display:grid;gap:6px;font-size:15px}
.prose form label span{color:var(--muted);font-size:14px;line-height:1.45}
.prose .check{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  max-width:62ch;margin:28px 0 22px;font-size:14px;line-height:1.5;color:var(--muted);
}
.prose .check input{width:18px;height:18px;margin:1px 0 0;padding:0;accent-color:var(--blue);border-radius:4px}
.prose .check span{display:block}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.btn-primary[disabled]:hover{background:var(--blue)}
.prose .key{
  font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:clamp(12.5px,3.1vw,13.5px);line-height:1.65;margin:22px 0 0;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
/* The stamp is a subtitle: whatever follows it starts a new block, not a second line. */
.prose .stamp+*{margin-top:30px}
@media (max-width:519px){
  .prose p>.btn-primary,.prose form .btn{width:100%}
}
.keyrow{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:16px 0 0}
.keyrow .btn{font-size:15px;padding:10px 16px}
.note{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.note b{color:var(--ink)}