/* ClearDuty website — "Ledger" identity (2.0). Loaded after the page's inline base styles.
   Warm paper, ink, ledger green and one gold signal. Flat surfaces, hairline rules, squared corners. */

:root{
  --ink:#1B211E; --body:#3F4742; --muted:#69716B; --line:#DCD8CE; --line-s:#E8E5DD;
  --bg:#FBFAF7; --soft:#F3F1EB; --soft-2:#ECE9E1;
  --brand:#1F5A4A; --brand-d:#163F34; --brand-l:#2A6E5B; --brand-soft:#E2EDE8; --brand-bright:#9FD1BC;
  --navy:#15241F; --navy-2:#1C2F28; --navy-3:#24392F;
  --gold:#A8741A; --gold-l:#D2A24C; --gold-soft:#F4EAD5;
  --crit:#A3262A; --high:#B4581F; --med:#2E5A84; --low:#4B7458;
  --f:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fc:'IBM Plex Sans Condensed','IBM Plex Sans',system-ui,sans-serif;
  --m:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sh-s:none; --sh-m:0 1px 0 rgba(27,33,30,.05),0 8px 24px rgba(27,33,30,.06); --sh-l:0 1px 0 rgba(27,33,30,.05),0 18px 40px rgba(27,33,30,.10);
}
body{background:var(--bg);font-size:16.5px;-webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--fc);font-weight:600;letter-spacing:-.012em}
h1{font-size:clamp(34px,4vw,52px);line-height:1.06}
h2{font-size:clamp(28px,3.2vw,42px);line-height:1.1}
h3{font-weight:600;letter-spacing:-.005em}
em{color:var(--brand)}
::selection{background:var(--gold-soft);color:var(--ink)}
a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.eyebrow,.row .tag,.strip .lbl{font-family:var(--m);font-weight:500;letter-spacing:.12em;font-size:11.5px;color:var(--gold)}
.sec.dark .eyebrow,.sec.dark .row .tag{color:var(--gold-l)}
.sec.dark{background:var(--navy);color:#B9C6BE}
.sec.soft{background:var(--soft)}

/* Buttons: flat, squared, no lift */
.btn{border-radius:4px;padding:13px 22px;font-weight:600;transition:background .15s,border-color .15s,color .15s}
.btn:hover{transform:none}
.btn-sm{border-radius:4px}
.btn-pri{background:var(--brand);box-shadow:none}
.btn-pri:hover{background:var(--brand-d);box-shadow:none}
.btn-ghost{background:transparent;border-color:#C9C4B8;box-shadow:none}
.btn-ghost:hover{border-color:var(--ink);box-shadow:none;background:#fff}
.sec.dark .btn-ghost{border-color:#3B5348}
.sec.dark .btn-ghost:hover{background:var(--navy-2)}

/* Header */
header.site{background:rgba(251,250,247,.86)}
header.site.sc{background:rgba(251,250,247,.96);box-shadow:none}
.lmark{border-radius:4px;background:var(--navy);box-shadow:none}
.lmark svg{stroke:var(--gold-l)}
.logo b{font-family:var(--fc);font-weight:600;letter-spacing:-.01em}
nav.main a{border-radius:3px}
nav.main a:hover{background:var(--soft-2)}
nav.main a.kb{color:var(--ink)}
.menu-btn{border-radius:4px;background:transparent}
#mnav{background:var(--bg)}

/* Hero: ledger paper, not a glow */
.hero{background:var(--bg);border-bottom:1px solid var(--line)}
.hero::before{content:"";top:0;right:0;left:auto;width:100%;height:100%;border-radius:0;background:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(31,90,74,.06) 31px 32px);mask-image:linear-gradient(100deg,transparent 30%,#000 75%);-webkit-mask-image:linear-gradient(100deg,transparent 30%,#000 75%)}
.hero::after{content:"";inset:0 auto 0 calc(50% - 600px + 0px);width:1px;background:rgba(163,38,42,.18);mask-image:none;-webkit-mask-image:none}
@media(max-width:1240px){.hero::after{display:none}}
.hero h1 span{color:var(--brand)}
.ticks svg{background:var(--gold);border-radius:3px}
.frame{border-radius:6px;border-color:#CFCabd;box-shadow:var(--sh-l)}
.float{border-radius:5px;box-shadow:var(--sh-m)}
.float .fi{border-radius:4px;background:var(--gold-soft)}
.float .fi svg{stroke:var(--gold)}

/* Strip */
.strip{background:var(--soft)}
.strip .it svg{stroke:var(--gold)}

/* Cards: hairline ledger cards, no hover jump */
.card{border-radius:6px;background:#fff;transition:border-color .15s}
.card:hover{transform:none;box-shadow:none;border-color:#BDB7A9}
.ico{border-radius:4px;background:var(--brand-soft)}
.sec.dark .card{background:var(--navy-2);border-color:#2C4238}
.sec.dark .ico{background:#22382F}
.sec.dark .ico svg{stroke:var(--gold-l)}
.pic{border-radius:6px;box-shadow:var(--sh-l)}
.checks svg,.ed li svg{stroke:var(--gold)}
.sec.dark .checks svg{stroke:var(--gold-l)}

/* Metrics: set like a ledger total */
.mx{border-radius:6px}
.mx b{font-family:var(--m);font-weight:500;letter-spacing:-.02em;font-size:32px}
.mx em{font-family:var(--fc);font-size:15px}
.chips span{border-radius:3px;background:#fff}

/* Steps: numbered like working papers */
.step::before{content:"0" counter(s);font-family:var(--m);font-weight:500;background:transparent;color:var(--gold);border:1px solid var(--gold);border-radius:3px;box-shadow:none;width:40px;height:30px;font-size:13px}
.step:not(:last-child)::after{top:15px;background:var(--line)}

/* Editions */
.ed.feat{border-color:var(--brand);box-shadow:none;border-width:1.5px}
.ed.feat::before{border-radius:3px;background:var(--gold);font-family:var(--m);font-weight:500;letter-spacing:.08em}
.ed .pr{color:var(--gold);font-family:var(--m);font-weight:500;font-size:13.5px}

/* FAQ */
details summary::after{border-color:var(--gold)}

/* Footer */
footer.site{background:var(--navy);color:#9BAAA1}
footer.site a{color:#C9D3CC}
.legal{border-top-color:#2C4238;color:#86968D}

/* Why now (market timing) */
.now{display:grid;gap:0;grid-template-columns:1fr;border:1px solid var(--line);border-radius:6px;background:#fff;margin-top:44px}
@media(min-width:900px){.now{grid-template-columns:repeat(4,1fr)}}
.now>div{padding:24px 22px;border-bottom:1px solid var(--line)}
@media(min-width:900px){.now>div{border-bottom:0;border-right:1px solid var(--line)}.now>div:last-child{border-right:0}}
.now .when{font-family:var(--m);font-size:12px;color:var(--gold);letter-spacing:.06em;text-transform:uppercase}
.now h3{margin:8px 0 8px;font-size:17px}
.now p{font-size:14.5px;line-height:1.6}
.src{font-size:12.5px;color:var(--muted);margin-top:14px}
.src a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line)}

/* Knowledge base teaser */
.kbgrid{display:grid;gap:16px;grid-template-columns:1fr;margin-top:40px}
@media(min-width:760px){.kbgrid{grid-template-columns:repeat(3,1fr)}}
.kbgrid a{display:block;border:1px solid var(--line);border-radius:6px;background:#fff;padding:20px 22px;color:var(--body)}
.kbgrid a:hover{text-decoration:none;border-color:var(--brand)}
.kbgrid b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.kbgrid span{font-size:14px}

/* Logo: the same two-square mark as the app */
.lmark{position:relative;background:transparent!important;width:30px;height:30px}
.lmark svg{display:none}
.lmark::before,.lmark::after{content:"";position:absolute;width:18px;height:18px;border-radius:2px}
.lmark::before{left:0;top:0;border:2px solid var(--ink)}
.lmark::after{right:0;bottom:0;background:var(--gold-l)}
footer.site .lmark::before{border-color:#E9EEE9}

/* Header fit: one line from 1180px, burger below */
nav.main a{white-space:nowrap;padding:8px 11px;font-size:14.5px}
.logo small{white-space:nowrap}
.bar .btn{white-space:nowrap}
@media(min-width:1040px) and (max-width:1199px){nav.main{display:none}.menu-btn{display:grid}}
@media(max-width:1279px){.bar .signin{display:none}}
