@import url('tokens.css');

/* ---- Reset (was inline in all 26 canvases) ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-body-lg);line-height:1.5;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
img,svg{max-width:100%}
[hidden]{display:none!important}

a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink);background:var(--lime)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
::selection{background:var(--lime);color:var(--ink)}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rise{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- Type ---- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;
  line-height:1.05;margin:0;text-wrap:pretty}
h1{font-size:var(--d-xl)}
h2{font-size:var(--d-l)}
h3{font-size:var(--d-s);line-height:1.15}
h4{font-family:var(--sans);font-size:var(--t-lead);font-weight:700;line-height:1.3}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong{font-weight:700}

.eyebrow{font-size:var(--t-label);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 14px}
.lead{font-size:var(--t-lead-lg);line-height:1.6;max-width:54ch}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}
.prose{max-width:var(--w-prose)}
.prose p,.prose li{font-size:var(--t-lead);line-height:1.65;color:var(--ink)}
.prose h2{margin:1.8em 0 .5em}
.prose h3{margin:1.4em 0 .4em}

/* ---- Frame ---- */
.page{padding:clamp(0px,2vw,28px) clamp(0px,2vw,24px) clamp(40px,6vw,72px)}
.frame{max-width:var(--w-app);margin:0 auto;background:var(--surface);border:1px solid var(--border)}
.frame--wide{max-width:var(--w-wide)}
.section{padding:var(--gap) var(--pad-frame)}
.section+.section{border-top:1px solid var(--rule)}

/* ---- Buttons: exactly one filled button per screen ---- */
.btn{display:inline-block;font-size:var(--t-lead);font-weight:700;
  color:var(--ink);background:var(--lime);border:1px solid var(--ink);
  text-decoration:none;padding:15px 28px;white-space:nowrap;cursor:pointer;
  text-align:center}
.btn:hover{background:var(--lime-deep);color:var(--ink)}
.btn:disabled,.btn[aria-disabled=true]{background:var(--alt);color:var(--ink-4);
  border-color:var(--border);cursor:not-allowed}
.btn--ghost{background:transparent;font-size:var(--t-body);padding:13px 18px}
.btn--ghost:hover{background:var(--lime)}
.btn--sm{font-size:var(--t-ui);padding:9px 14px}
.btn--block{display:block;width:100%}
.btn--danger{background:transparent;border-color:var(--ink-2);color:var(--ink-2)}
.btn--danger:hover{background:var(--ink);color:var(--ink-inv);border-color:var(--ink)}

/* Plain text link that behaves like a control */
.link{font-size:var(--t-body);font-weight:700;color:var(--ink);background:none;
  border:0;padding:0;cursor:pointer;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}
.link:hover{background:var(--lime)}
.link--trans{color:var(--blue);font-size:var(--t-ui)}
.link--trans:hover{background:var(--lime-soft)}

/* ---- Cards, chips, notes ---- */
.card{background:var(--card);border:1px solid var(--border);padding:clamp(24px,3.5vw,40px)}
.card--inset{background:var(--alt);border-color:var(--rule)}
.chip{display:inline-block;font-size:var(--t-small);font-weight:600;
  padding:5px 10px;border:1px solid var(--border);background:var(--surface);
  color:var(--ink-2);white-space:nowrap}
.chip--on{background:var(--lime-soft);border-color:var(--lime-deep);color:var(--ink)}
.chip--off{color:var(--ink-3);border-style:dashed}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.note{font-size:var(--t-body);line-height:1.5;color:var(--ink-2)}
.note--warm{background:var(--warm);border:1px solid var(--rule);padding:14px 16px;color:var(--ink)}
.rule{border:0;border-top:1px solid var(--rule);margin:22px 0}

/* ---- Data ---- */
.stat{display:block}
.stat__n{font-family:var(--serif);font-size:var(--d-m);line-height:1;display:block}
.stat__k{font-size:var(--t-small);color:var(--ink-2);letter-spacing:.02em}
.stats{display:grid;gap:24px 40px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

table{width:100%;border-collapse:collapse;font-size:var(--t-ui)}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-size:var(--t-label);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.table-scroll{overflow-x:auto}

/* ---- Forms ---- */
label{display:block;font-size:var(--t-ui);font-weight:600;margin:0 0 6px}
input[type=text],input[type=email],input[type=number],select,textarea{
  width:100%;padding:12px 14px;background:var(--card);
  border:1px solid var(--border);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:-1px;border-color:var(--ink)}
fieldset{border:0;margin:0;padding:0}
.field{margin:0 0 18px;max-width:420px}
.hint{font-size:var(--t-small);color:var(--ink-2);margin:6px 0 0}

/* Big tappable radio — 44px floor, used by quiz and onboarding */
.choice{display:block;width:100%;text-align:left;min-height:44px;
  padding:14px 16px;margin:0 0 10px;background:var(--card);
  border:1px solid var(--border);font-size:var(--t-lead);cursor:pointer}
.choice:hover{background:var(--lime-soft)}
.choice[aria-checked=true]{background:var(--lime);border-color:var(--ink);font-weight:700}
.choice__key{display:inline-block;width:22px;color:var(--ink-3);font-size:var(--t-small);font-weight:700}
.choice[aria-checked=true] .choice__key{color:var(--ink)}

/* ---- Accordion (was duplicated in landing, pricing, teams) ---- */
.acc{border-top:1px solid var(--rule)}
.acc__item{border-bottom:1px solid var(--rule)}
.acc__btn{display:flex;width:100%;gap:20px;align-items:baseline;
  justify-content:space-between;padding:20px 0;background:none;border:0;
  text-align:left;font-size:var(--t-lead);font-weight:600;cursor:pointer}
.acc__btn:hover{color:var(--ink);text-decoration:underline}
.acc__mark{font-size:24px;line-height:1;color:var(--ink-2);flex:none}
.acc__body{padding:0 0 22px;max-width:64ch;font-size:var(--t-body-lg);
  line-height:1.6;color:var(--ink-2)}

/* ---- Utilities ---- */
.row{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.row--between{justify-content:space-between}
.row--baseline{align-items:baseline}
.spacer{flex:1 1 0;min-width:0}
.grid-2{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.center{text-align:center}