/* Tally marketing site. Tokens mirror src/report.ts so the site and the product read as one system. */
:root{
  color-scheme:light;
  --page:#f3f4f6;--surface:#ffffff;--surface2:#e9ebf0;--ink:#0f1115;--ink2:#4b5160;--muted:#7d8394;--grid:#dcdfe6;--base:#b8bdc9;
  --accent:#1f5fc9;--accent-ink:#ffffff;--s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;
  --gA:#0a7a3a;--gB:#1f5fc9;--gC:#b8741a;--gD:#c2382f;
  --band:#0f1115;--band-ink:#f2f3f5;--band-ink2:#b9bec9;--band-grid:#2a2e38;
  --chip:#e9ebf0;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --page:#0a0b0f;--surface:#12141a;--surface2:#1a1d25;--ink:#f2f3f5;--ink2:#b9bec9;--muted:#7f8596;--grid:#262a34;--base:#3a3f4b;
    --accent:#4a8cf0;--accent-ink:#0a0b0f;--s1:#3987e5;--s2:#d95926;--s3:#199e70;
    --gA:#22b35a;--gB:#4a8cf0;--gC:#e0a13a;--gD:#e56a62;
    --band:#12141a;--band-ink:#f2f3f5;--band-ink2:#b9bec9;--band-grid:#2a2e38;
    --chip:#1a1d25;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#0a0b0f;--surface:#12141a;--surface2:#1a1d25;--ink:#f2f3f5;--ink2:#b9bec9;--muted:#7f8596;--grid:#262a34;--base:#3a3f4b;
  --accent:#4a8cf0;--accent-ink:#0a0b0f;--s1:#3987e5;--s2:#d95926;--s3:#199e70;
  --gA:#22b35a;--gB:#4a8cf0;--gC:#e0a13a;--gD:#e56a62;
  --band:#12141a;--band-ink:#f2f3f5;--band-ink2:#b9bec9;--band-grid:#2a2e38;
  --chip:#1a1d25;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font:18px/1.6 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{max-width:100%}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.display{font-family:Fraunces,"Iowan Old Style",Georgia,serif;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
.wrap{max-width:1180px;margin:0 auto;padding-inline:24px}
.eyebrow{font:500 12px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
section{padding-block:clamp(88px,12vw,168px)}
section + section{border-top:1px solid var(--grid)}
h2{font:600 clamp(34px,4.6vw,60px)/1.04 Fraunces,Georgia,serif;letter-spacing:-.03em;margin:0 0 22px;max-width:18ch;text-wrap:balance}
.lede{font-size:clamp(18px,1.6vw,22px);line-height:1.55;color:var(--ink2);max-width:58ch;margin:0}
p{max-width:64ch}
.muted{color:var(--ink2)}.small{font-size:14px;color:var(--muted);line-height:1.5}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in oklab,var(--page) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--grid)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
.brand{font:700 22px/1 Fraunces,Georgia,serif;letter-spacing:-.02em;text-decoration:none;margin-right:auto}
.nav a:not(.brand):not(.btn){font-size:15px;color:var(--ink2);text-decoration:none}
.nav a:not(.brand):hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;border:1px solid var(--ink);color:var(--ink);background:transparent;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--ink);color:var(--page);border-color:var(--ink)}
.btn.small{padding:9px 16px;font-size:14px}
.theme{width:36px;height:36px;border-radius:50%;border:1px solid var(--grid);background:var(--surface);color:var(--ink2);cursor:pointer;display:grid;place-items:center}
@media (max-width:760px){.nav .hide-m{display:none}}

/* hero */
.hero{padding-block:clamp(56px,8vw,110px) clamp(72px,9vw,140px);border-top:0}
.hero-grid{margin-top:clamp(44px,6vw,92px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:end}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.grade-hero{position:relative}
.grade-letter{font:700 clamp(200px,34vw,420px)/.82 Fraunces,Georgia,serif;letter-spacing:-.06em;color:var(--gB);margin:0 0 6px -0.04em;font-variation-settings:"opsz" 144;animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.grade-caption{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;color:var(--ink2);font-size:15px}
.grade-caption b{color:var(--ink)}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--chip);font:500 12px/1.6 "IBM Plex Mono",monospace;letter-spacing:.06em;color:var(--ink2)}
.ledger{border-top:1px solid var(--ink);padding-top:6px;animation:rise 1s .15s cubic-bezier(.2,.7,.2,1) both}
.ledger-row{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--grid)}
.ledger-row .g{font:700 30px/1 Fraunces,Georgia,serif;letter-spacing:-.03em}
.ledger-row .n{font-weight:600}
.ledger-row .q{display:block;font-size:14px;color:var(--muted);font-weight:400}
.ledger-row .m{font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--ink2);text-align:right;white-space:nowrap}
.gA{color:var(--gA)}.gB{color:var(--gB)}.gC{color:var(--gC)}.gD{color:var(--gD)}
.hero h1{font:600 clamp(40px,5.6vw,76px)/1.02 Fraunces,Georgia,serif;letter-spacing:-.035em;margin:18px 0 22px;max-width:16ch;text-wrap:balance}
.hero .lede{max-width:62ch}
.cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:34px}
.cta .note{flex-basis:100%;font-size:14px;color:var(--muted);margin-top:4px}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ledger band */
.band{background:var(--band);color:var(--band-ink)}
.band .eyebrow{color:var(--band-ink2)}
.band h2{color:var(--band-ink)}
.band .lede{color:var(--band-ink2)}
.band .small{color:var(--band-ink2)}
.ladder{margin:56px 0 12px}
.ladder svg{width:100%;height:auto;display:block;overflow:visible}
.ladder .grid{stroke:var(--band-grid)}
.ladder .axis{fill:var(--band-ink2);font-size:13px;font-family:"IBM Plex Mono",monospace}
.ladder .mark{fill:var(--band-ink);font-size:15px;font-family:"IBM Plex Mono",monospace}
.ladder .mark.dim{fill:var(--band-ink2)}
.ladder .tick{stroke:var(--band-ink2);stroke-width:2}
.ladder .base{stroke:var(--band-grid);stroke-width:2}
.ladder .range{fill:var(--s2);transform-origin:left center;animation:grow 1.1s .3s cubic-bezier(.2,.7,.2,1) both}
.ladder .ai{fill:var(--s1);stroke:var(--band);stroke-width:4;animation:pop .6s .9s cubic-bezier(.2,.7,.2,1) both;transform-origin:center;transform-box:fill-box}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.legend{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;color:var(--band-ink2);margin:8px 0 0}
.legend span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:8px;vertical-align:-1px}
.legend .s1::before{background:var(--s1)}.legend .s2::before{background:var(--s2)}.legend .rng::before{background:var(--band-ink2);height:2px;vertical-align:3px}
.band details{margin-top:18px;font-size:14px;color:var(--band-ink2)}
.band table{border-collapse:collapse;margin-top:10px;font-size:14px}
.band td,.band th{padding:8px 14px 8px 0;border-bottom:1px solid var(--band-grid);text-align:left}
.band th{color:var(--band-ink2);font:500 12px/1.3 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:56px}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.step .num{font:500 13px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;color:var(--accent);margin-bottom:18px}
.step h3{font:600 26px/1.15 Fraunces,Georgia,serif;letter-spacing:-.02em;margin:0 0 12px}
.step p{margin:0;color:var(--ink2);font-size:17px}
.cmd{display:inline-block;margin:0 0 14px;padding:10px 16px;border-radius:10px;background:var(--surface);border:1px solid var(--grid);font:500 15px/1.4 "IBM Plex Mono",monospace}
.harness{display:flex;gap:10px;flex-wrap:wrap;margin-top:56px}
.harness span{padding:8px 14px;border:1px solid var(--grid);border-radius:999px;font-size:14px;color:var(--ink2);background:var(--surface)}
.harness span b{color:var(--ink);font-weight:600}

/* dimensions */
.dims{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--grid);border:1px solid var(--grid);margin-top:56px;border-radius:16px;overflow:hidden}
@media (max-width:900px){.dims{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.dims{grid-template-columns:1fr}}
.dim{background:var(--surface);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:12px;min-height:300px}
.dim .g{font:700 88px/.9 Fraunces,Georgia,serif;letter-spacing:-.05em;margin:0 0 6px -0.03em}
.dim h3{font:600 24px/1.15 Fraunces,Georgia,serif;letter-spacing:-.02em;margin:0}
.dim .q{color:var(--ink2);font-size:16px;margin:0}
.dim .cut{margin-top:auto;font:500 13px/1.6 "IBM Plex Mono",monospace;color:var(--muted)}
.dim .cut b{color:var(--ink);font-weight:500}
.dim .tip{font-size:15px;color:var(--ink2);margin:0;border-top:1px solid var(--grid);padding-top:12px}

/* quotes */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px) clamp(24px,5vw,80px);margin-top:56px}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}
.quote blockquote{margin:0;font:400 clamp(22px,2.2vw,30px)/1.32 Fraunces,Georgia,serif;letter-spacing:-.015em;text-wrap:pretty}
.quote blockquote::before{content:"“";display:block;font:700 96px/.6 Fraunces,Georgia,serif;color:var(--accent);margin-bottom:14px}
.quote cite{display:block;margin-top:18px;font-style:normal;font-size:15px;color:var(--ink2)}
.quote cite b{color:var(--ink);font-weight:600}
.quote cite a{color:var(--muted);text-decoration:none}

/* research */
.research-quote{margin:48px 0 40px;max-width:60ch}
.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--grid);border:1px solid var(--grid);border-radius:16px;overflow:hidden}
@media (max-width:900px){.refs{grid-template-columns:1fr 1fr}}@media (max-width:600px){.refs{grid-template-columns:1fr}}
.ref{background:var(--surface);padding:clamp(20px,2.6vw,32px);display:flex;flex-direction:column;gap:8px}
.ref h3{font:600 20px/1.15 Fraunces,Georgia,serif;letter-spacing:-.015em;margin:0}.ref p{margin:0;font-size:15px;color:var(--ink2)}.ref a{margin-top:auto;font-size:13px;color:var(--muted);text-decoration:none;padding-top:8px}.ref a:hover{color:var(--ink);text-decoration:underline}
.small a{color:var(--ink2)}

/* teams band */
.caps{display:grid;grid-template-columns:1fr 1fr;gap:28px 48px;margin-top:48px}
@media (max-width:760px){.caps{grid-template-columns:1fr}}
.cap h3{font:600 20px/1.2 "IBM Plex Sans",sans-serif;margin:0 0 6px}
.cap p{margin:0;color:var(--band-ink2);font-size:16px}
.tiers{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.tier{border:1px solid var(--band-grid);border-radius:14px;padding:18px 22px;min-width:220px}
.tier .t{font:700 26px/1 Fraunces,Georgia,serif;margin-bottom:6px}
.tier p{margin:0;font-size:15px;color:var(--band-ink2)}
.band .btn{border-color:var(--band-ink);color:var(--band-ink)}
.band .btn.primary{background:var(--band-ink);color:var(--band)}

/* privacy */
.lists{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);margin-top:48px}
@media (max-width:760px){.lists{grid-template-columns:1fr}}
.lists h3{font:600 22px/1.2 Fraunces,Georgia,serif;margin:0 0 14px}
.lists ul{list-style:none;padding:0;margin:0}
.lists li{padding:12px 0;border-top:1px solid var(--grid);font-size:16px;color:var(--ink2)}
.lists li::before{content:"—";margin-right:12px;color:var(--muted)}

/* faq */
.faq{margin-top:40px;border-top:1px solid var(--grid)}
.faq details{border-bottom:1px solid var(--grid)}
.faq summary{cursor:pointer;list-style:none;padding:22px 0;font:600 22px/1.25 Fraunces,Georgia,serif;letter-spacing:-.015em;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 26px/1 "IBM Plex Mono",monospace;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 22px;color:var(--ink2);max-width:70ch}

/* footer */
footer{padding:48px 0 64px;border-top:1px solid var(--grid);font-size:15px;color:var(--ink2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
footer a{color:var(--ink2);text-decoration:none}
footer .brand{font-size:20px}
footer .grow{flex:1}