/* ═════════════════════════════════════════════════════════════════
   site.css — the Going Concern website, in the desk's own register.
   Dark ground, Plex Mono labels, Plex Sans text, documents on paper in
   Plex Serif, one amber accent. The same tokens as banking/desk.css, so
   the site and the product are one thing. The class names are kept from
   the SejrBank site so the content pages keep working.
   ═════════════════════════════════════════════════════════════════ */

:root{
  --bg:#0a0d12; --panel:#11161d; --panel-2:#161c25; --line:#1f2833; --line-2:#2a3542;
  --text:#e3e8ee; --text-2:#aab4bf; --text-3:#8a96a3; --dim:#5f6a76;
  --accent:#f5b000; --accent-dim:#8a6500; --up:#2fbf71; --down:#e5484d; --link:#8fbcff;
  --paper:#f7f4ec; --paper-2:#efeadf; --ink:#161616; --ink-2:#4a4a4a; --paper-line:#d9d3c4;
  --on-ink-1:var(--text); --on-ink-2:var(--text-2); --on-ink-3:var(--text-3); --on-ink-line:var(--line);
  --cream:var(--panel); --crimson:var(--accent); --crimson-hover:#ffc63a; --crimson-press:#c99000; --teal:#2fbf71; --teal-ink:#1f7a3a;

  --font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-display:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono','SF Mono',Consolas,monospace;
  --font-serif:'IBM Plex Serif',Georgia,serif;

  --r-xs:3px; --r-sm:4px; --r:4px; --r-btn:3px; --r-shot:4px;
  --card-shadow:0 1px 0 var(--line); --card-shadow-lg:0 14px 40px #000a; --shot-shadow:0 20px 60px -10px #000c;
  --section-y:clamp(64px, 8vw, 112px);
  --container:1240px; --container-narrow:960px; --container-text:760px;
  --gutter:clamp(20px, 4vw, 48px);
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body.site{ margin:0; font-family:var(--font-sans); font-size:16px; line-height:1.6; color:var(--text); background:var(--bg); }
body.site img{ max-width:100%; height:auto; }
body.site a{ color:var(--link); text-underline-offset:2px; }
body.site a:hover{ color:#fff; }
::selection{ background:rgba(245,176,0,.28); color:#fff; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.skip{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip:focus{ width:auto; height:auto; clip-path:none; left:16px; top:16px; z-index:999; background:var(--panel); color:var(--text); padding:8px 12px; border:1px solid var(--line-2); }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.container-narrow{ width:100%; max-width:var(--container-narrow); margin:0 auto; padding:0 var(--gutter); }
.container-text{ width:100%; max-width:var(--container-text); margin:0 auto; padding:0 var(--gutter); }

/* ── type ── */
.display, .sec-h, .page-hero h1, .cta-plate h2{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; line-height:1.06; margin:0; text-wrap:balance; color:#fff; }
.eyebrow{ display:block; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 16px; }
.sec-h{ font-size:clamp(30px, 3.6vw, 48px); max-width:24ch; }
.sec-lead{ font-size:clamp(16px, .4vw + 15px, 19px); line-height:1.6; color:var(--text-2); max-width:62ch; margin:18px 0 0; }
.num{ font-family:var(--font-mono); font-feature-settings:"tnum" 1, "zero" 1; }
.lead{ font-size:18px; line-height:1.6; color:var(--text-2); }
.dim2{ color:var(--text-3); font-size:14px; }
.textlink{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); text-decoration:none; }
.textlink:hover{ color:#fff; }

/* ── buttons ── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:42px; padding:9px 18px; border:1px solid var(--line-2); border-radius:var(--r-btn); background:var(--panel); color:var(--text) !important; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:background .15s, border-color .15s; }
.btn:hover{ background:var(--panel-2); border-color:var(--text-3); color:#fff !important; }
.btn .arr{ transition:transform .25s var(--ease-out); }
.btn:hover .arr{ transform:translateX(3px); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#000 !important; }
.btn-primary:hover{ background:var(--crimson-hover); border-color:var(--crimson-hover); color:#000 !important; }
.btn-secondary, .btn-ghost-dark{ background:transparent; }
.btn-lg{ min-height:50px; padding:13px 24px; font-size:13.5px; }
.btn95, .go{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid var(--accent); border-radius:var(--r-btn); background:var(--accent); color:#000 !important; font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; }
.btn95:hover{ background:var(--crimson-hover); }

/* ── header ── */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(10,13,18,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.hdr{ display:flex; align-items:center; gap:18px; height:56px; }
.wordmark{ font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--accent) !important; text-decoration:none; white-space:nowrap; }
.wordmark span{ color:var(--text-3); font-weight:400; margin-left:8px; letter-spacing:.12em; }
.nav{ display:flex; gap:2px; margin-left:12px; }
.nav a{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2) !important; text-decoration:none; padding:7px 10px; border-radius:var(--r-btn); }
.nav a:hover, .nav a[aria-current]{ color:#fff !important; background:var(--panel-2); }
.nav a[aria-current]{ color:var(--accent) !important; }
.hdr-right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.hdr-login{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2) !important; text-decoration:none; }
.lang{ display:none; }
.menu-btn{ display:none; width:40px; height:36px; border:1px solid var(--line-2); border-radius:var(--r-btn); background:transparent; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.menu-btn span{ display:block; width:18px; height:1.5px; background:var(--text); }
.mnav{ display:none; }
@media (max-width:900px){
  .nav, .hdr-login, .hdr .btn-primary{ display:none; }
  .menu-btn{ display:flex; margin-left:auto; }
  .mnav.open{ display:flex; flex-direction:column; gap:4px; padding:12px var(--gutter) 18px; border-top:1px solid var(--line); background:var(--bg); }
  .mnav a{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text) !important; text-decoration:none; padding:9px 4px; }
}

/* ── sections ── */
.sec{ padding:var(--section-y) 0; border-top:1px solid var(--line); }
.sec-flush{ padding-top:var(--section-y); }
.sec-nat, .sec-cream{ background:var(--panel); }
.sec-head{ margin-bottom:40px; }
.nat-aurora{ position:relative; isolation:isolate; }
.aurora-rule{ height:1px; background:linear-gradient(90deg, transparent, var(--accent-dim), transparent); margin:0; border:0; }
.sec-note{ display:flex; flex-wrap:wrap; gap:24px 40px; margin-top:28px; }
.sec-note div{ display:flex; flex-direction:column; gap:2px; }
.sec-note span{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.sec-note b{ font-weight:500; color:var(--text); }

/* ── the hero ── */
.hero{ padding:clamp(56px, 8vw, 110px) 0 0; }
.hero-grid{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(28px, 4vw, 60px); align-items:center; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(38px, 5.4vw, 72px); line-height:1.02; letter-spacing:-.025em; margin:0; color:#fff; text-wrap:balance; }
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero-lead{ font-size:clamp(16px, .5vw + 14px, 19px); line-height:1.6; color:var(--text-2); max-width:54ch; margin:22px 0 0; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-trust{ display:flex; align-items:center; gap:10px; margin-top:18px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.hero-trust .dot{ width:7px; height:7px; border-radius:50%; background:var(--up); box-shadow:0 0 10px var(--up); }
.hero-art{ min-width:0; }
.hero-stats{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; padding:36px 0 var(--section-y); border-top:1px solid var(--line); margin-top:clamp(40px, 6vw, 72px); }
@media (max-width:800px){ .hero-stats{ grid-template-columns:repeat(2, 1fr); } }
.hero-stats b{ display:block; font-family:var(--font-mono); font-size:clamp(26px, 3vw, 38px); font-weight:500; color:#fff; line-height:1; }
.hero-stats span{ display:block; margin-top:8px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }

/* ── a screenshot in a frame ── */
.frame{ position:relative; border:1px solid var(--line-2); border-radius:var(--r-shot); background:var(--panel); box-shadow:var(--shot-shadow); overflow:hidden; }
.frame-bar{ display:flex; align-items:center; gap:6px; height:26px; padding:0 10px; background:var(--panel-2); border-bottom:1px solid var(--line); }
.frame-bar i{ width:8px; height:8px; border-radius:50%; background:var(--line-2); }
.frame-bar b{ margin-left:8px; font:11px var(--font-mono); letter-spacing:.08em; color:var(--text-3); font-weight:400; }
.frame img{ display:block; width:100%; height:auto; }

/* ── the system tiles ── */
.bento{ display:grid; grid-template-columns:repeat(12, 1fr); gap:14px; }
.tile{ grid-column:span 6; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); color:var(--text); text-decoration:none; overflow:hidden; transition:border-color .2s; }
.tile:hover{ border-color:var(--accent-dim); color:var(--text); }
.tile.s5{ grid-column:span 5; } .tile.s6{ grid-column:span 6; } .tile.s7{ grid-column:span 7; } .tile.s4{ grid-column:span 4; } .tile.s12{ grid-column:span 12; }
@media (max-width:900px){ .tile, .tile.s4, .tile.s5, .tile.s6, .tile.s7{ grid-column:span 12; } }
.tile-shot{ background:#000; border-bottom:1px solid var(--line); }
.tile-shot img{ display:block; width:100%; height:auto; }
.tile-copy{ padding:18px 20px 22px; }
.tile-copy .eyebrow{ margin-bottom:8px; }
.tile-copy h3{ margin:0 0 6px; font-size:18px; font-weight:600; color:#fff; letter-spacing:-.01em; }
.tile-copy p{ margin:0; color:var(--text-2); font-size:14.5px; line-height:1.55; }
.tile .code{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--accent); }

/* ── lists of things in threes ── */
.sec-three{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-top:40px; }
@media (max-width:800px){ .sec-three{ grid-template-columns:1fr; } }
.sec-three h3{ margin:0 0 8px; font-size:17px; font-weight:600; color:#fff; }
.sec-three p, .sec-three li{ margin:0; color:var(--text-2); font-size:14.5px; line-height:1.55; }
.sec-three ul{ padding-left:18px; margin:0; }
.sec-three-k{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:10px; }

/* ── a document on paper (the ends, the handbook page, the prose pages) ── */
.doc{ background:var(--paper); color:var(--ink); font-family:var(--font-serif); font-size:15.5px; line-height:1.6; padding:40px 48px; border-radius:2px; box-shadow:0 30px 80px -20px #000; }
.doc .doc-kicker{ font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); }
.doc h1, .doc h2{ font-family:var(--font-serif); font-weight:600; color:var(--ink); margin:6px 0 2px; letter-spacing:-.01em; }
.doc h1{ font-size:26px; } .doc h2{ font-size:20px; margin-top:22px; }
.doc .doc-meta{ font-family:var(--font-mono); font-size:11px; color:var(--ink-2); margin-bottom:22px; }
.doc p{ margin:0 0 14px; } .doc a{ color:#1f4e8c; } .doc hr{ border:0; border-top:1px solid var(--paper-line); margin:22px 0; }
.doc .sig{ margin-top:22px; font-style:italic; color:var(--ink-2); }
@media (max-width:640px){ .doc{ padding:26px 22px; } }

/* ── the sandbox on the page ── */
.hb-sandbox{ background:var(--paper-2); border:1px solid var(--paper-line); padding:12px 16px; margin:14px 0; font-family:var(--font-sans); font-size:14px; color:var(--ink); }
.hb-sandbox .row{ display:flex; align-items:center; gap:12px; margin:6px 0; flex-wrap:wrap; }
.hb-sandbox .row label{ min-width:220px; color:var(--ink-2); }
.hb-sandbox input[type=range]{ width:180px; accent-color:#1f4e8c; }
.hb-sandbox .sb-result{ font-family:var(--font-mono); font-size:15px; margin-top:8px; } .hb-sandbox .pos{ color:#1f7a3a; } .hb-sandbox .neg{ color:#b3261e; }

/* ── the closer ── */
.cta-wrap{ padding:var(--section-y) 0; }
.cta-plate{ border:1px solid var(--line-2); border-radius:var(--r); padding:clamp(32px, 5vw, 64px); background:var(--panel); }
.cta-plate h2{ font-size:clamp(28px, 3.4vw, 44px); }
.cta-plate p{ color:var(--text-2); max-width:60ch; font-size:17px; margin:16px 0 0; }

/* ── content pages: the hero and the prose on paper ── */
.page-hero{ padding:clamp(48px, 6vw, 80px) 0 40px; }
.page-hero-grid{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); gap:40px; align-items:end; }
@media (max-width:800px){ .page-hero-grid{ grid-template-columns:1fr; } }
.page-hero h1{ font-size:clamp(30px, 4vw, 52px); }
.page-hero .side p{ color:var(--text-2); margin:0 0 16px; }
.page-hero .meta{ margin-top:12px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.crumbs{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:22px; }
.crumbs a{ color:var(--text-3); text-decoration:none; } .crumbs i{ margin:0 8px; font-style:normal; } .crumbs span{ color:var(--text-2); }
.page-body{ padding:0 0 var(--section-y); }
.prose{ background:var(--paper); color:var(--ink); font-family:var(--font-serif); font-size:16px; line-height:1.65; padding:clamp(28px, 4vw, 56px) clamp(22px, 4vw, 64px); border-radius:2px; box-shadow:0 30px 80px -20px #000; }
.prose h2{ font-family:var(--font-serif); font-size:24px; font-weight:600; margin:34px 0 10px; color:var(--ink); letter-spacing:-.01em; }
.prose h3{ font-family:var(--font-sans); font-size:17px; font-weight:600; margin:24px 0 8px; color:var(--ink); }
.prose p, .prose li{ margin:0 0 14px; } .prose li{ margin-bottom:6px; }
.prose a{ color:#1f4e8c; } .prose a:hover{ color:#000; }
.prose .lead{ color:var(--ink-2); font-size:18px; }
.prose table{ width:100%; border-collapse:collapse; font-family:var(--font-sans); font-size:14px; margin:14px 0 20px; }
.prose th{ text-align:left; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); padding:6px 8px; border-bottom:1px solid var(--ink); }
.prose td{ padding:7px 8px; border-bottom:1px solid var(--paper-line); vertical-align:top; }
.prose img{ border:1px solid var(--paper-line); }
.prose .note95, .prose .help-card{ background:var(--paper-2); border:1px solid var(--paper-line); padding:14px 18px; margin:18px 0; font-family:var(--font-sans); font-size:14.5px; }
.prose .cards95, .prose .grid95, .prose .gallery95{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; margin:16px 0 22px; }
.prose .card95{ border:1px solid var(--paper-line); padding:14px 16px; font-family:var(--font-sans); font-size:14px; background:#fff; }
.prose .card95 b{ display:block; margin:6px 0 4px; } .prose .card95 .ic{ font-size:20px; } .prose .card95 span{ color:var(--ink-2); }
.prose .acc details{ border-top:1px solid var(--paper-line); padding:10px 0; font-family:var(--font-sans); font-size:15px; }
.prose .acc summary{ cursor:pointer; font-weight:600; } .prose .acc p{ margin:8px 0 0; color:var(--ink-2); }
.prose .toc95{ font-family:var(--font-sans); font-size:14px; background:var(--paper-2); border:1px solid var(--paper-line); padding:12px 16px; margin:0 0 22px; }
.prose .sunken95, .prose .field95{ background:#fff; border:1px solid var(--paper-line); padding:10px 12px; font-family:var(--font-mono); font-size:13px; }
.prose .shot95{ margin:16px 0; } .prose .shot95 img{ width:100%; }
.prose .legend{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.prose .dim2{ color:var(--ink-2); }
.prose .btn95{ margin:4px 0; }

/* ── footer ── */
.site-footer{ border-top:1px solid var(--line); padding:48px 0 36px; background:var(--bg); }
.foot-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:28px; }
.foot-mark{ margin:0; font-family:var(--font-mono); font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.foot-mark span{ color:var(--text-3); margin-left:8px; letter-spacing:.12em; }
.foot-tag{ margin:6px 0 0; color:var(--text-2); font-size:14.5px; }
.foot-trust{ display:flex; flex-wrap:wrap; gap:16px 36px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.foot-trust div{ display:flex; flex-direction:column; gap:2px; }
.foot-trust span{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.foot-trust b{ font-weight:500; color:var(--text); font-size:14px; }
.foot-cols{ display:grid; grid-template-columns:1.4fr repeat(4, 1fr); gap:24px; padding:30px 0; font-size:14px; }
@media (max-width:900px){ .foot-cols{ grid-template-columns:1fr 1fr; } }
.foot-co{ color:var(--text-2); line-height:1.6; }
.foot-h{ margin:0 0 10px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); font-weight:500; }
.foot-cols a{ display:block; color:var(--text-2); text-decoration:none; padding:3px 0; }
.foot-cols a:hover{ color:#fff; }
.foot-legal{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; color:var(--text-3); }

/* ── reveals ── */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay:var(--d, 0ms); }
.reveal.in, html:not(.js) .reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }