/* ─────────────────────────────────────────────────────────────
   DecipherWorld — one stylesheet, every page.
   Tokens first, then the components built from them. Nothing in this
   file hard-codes a colour; nothing outside this file should either.
   ───────────────────────────────────────────────────────────── */
@import url("/assets/tokens.css");

:root{
  /* legacy aliases — the hand-written pages already speak this dialect,
     so they inherit the token system without being rewritten */
  --cream:var(--dw-surface-cream); --paper:var(--dw-surface-paper);
  --paper2:var(--dw-surface-paper-2); --line:var(--dw-surface-line);
  --ink:var(--dw-text-ink); --ink-soft:var(--dw-text-ink-soft); --ink-faint:var(--dw-text-ink-faint);
  --green:var(--dw-brand-green-700); --green2:var(--dw-brand-green-500); --green3:var(--dw-brand-green-300);
  --lemon:var(--dw-brand-lemon); --lemon-deep:var(--dw-brand-lemon-deep);
  --mango:var(--dw-brand-mango); --mango-deep:var(--dw-brand-mango-deep);
  --terra:var(--dw-brand-terra);
  --shadow:var(--dw-shadow);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--dw-font-display);color:var(--dw-text-ink);background:var(--dw-surface-cream);
  background-image:repeating-linear-gradient(0deg,rgba(201,96,59,.02) 0 2px,transparent 2px 6px);
  line-height:var(--dw-leading-body);-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{line-height:var(--dw-leading-tight)}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px;margin-left:0}

/* ── nav ── */
nav{position:sticky;top:0;z-index:50;background:var(--dw-brand-green-700);color:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.18)}
nav .wrap{display:flex;align-items:center;gap:20px;min-height:62px;flex-wrap:wrap}
nav .brand{display:flex;align-items:center;text-decoration:none;padding:9px 0}
nav .brand img{height:30px;width:auto;display:block}
nav .links{display:flex;gap:18px;margin-left:auto;align-items:center;flex-wrap:wrap}
nav .links a{text-decoration:none;font-weight:600;font-size:15px;opacity:.92}
nav .links a:hover{opacity:1}
@media(max-width:720px){nav .links{gap:13px;font-size:14px}}

/* ── buttons ── */
.btn{display:inline-block;font-family:inherit;font-weight:800;font-size:16px;padding:13px 22px;
  border:none;border-radius:999px;cursor:pointer;text-decoration:none;transition:transform .12s}
.btn:active{transform:translateY(1px)}
.btn.lemon{background:var(--dw-brand-lemon);color:var(--dw-text-ink)}
.btn.green{background:var(--dw-brand-green-700);color:var(--dw-text-on-dark)}
/* ink on mango, not white: white scored 3.19:1 and fails WCAG AA */
.btn.mango{background:var(--dw-brand-mango);color:var(--dw-text-ink)}
.btn.ghost{background:transparent;color:var(--dw-brand-green-700);box-shadow:inset 0 0 0 2px var(--dw-surface-line)}
.btn.big{font-size:18px;padding:15px 28px}

/* ── layout blocks ── */
.x-hero{padding:52px 0 34px;background:linear-gradient(180deg,var(--dw-surface-paper-2) 0%,var(--dw-surface-cream) 100%);
  border-bottom:1.5px solid var(--dw-surface-line)}
.x-hero h1{font-size:var(--dw-size-h1);color:var(--dw-brand-green-700);margin-top:10px;max-width:20ch}
.x-lead{font-size:18px;color:var(--dw-text-ink-soft);max-width:660px;margin-top:14px;font-weight:600}
.x-eyebrow{display:inline-block;font-weight:800;font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--dw-brand-mango-ink);background:var(--dw-surface-paper-2);border:1.5px solid var(--dw-surface-line);
  border-radius:999px;padding:6px 14px}
.x-sec{padding:46px 0}
.x-sec.alt{background:var(--dw-surface-paper-2)}
.x-title{font-size:var(--dw-size-h2);color:var(--dw-brand-green-700);font-weight:800;margin-bottom:14px}
.x-body{max-width:720px}
.x-body p{color:var(--dw-text-ink-soft);font-size:var(--dw-size-body);font-weight:600;margin-bottom:14px}
.x-body p b{color:var(--dw-text-ink)}
.crumbs{font-size:13px;color:var(--dw-text-ink-faint);font-weight:700}
.crumbs a{text-decoration:none}

.x-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:16px}
.x-card{background:var(--dw-surface-paper);border:1.5px solid var(--dw-surface-line);
  border-radius:var(--dw-radius);padding:18px 19px;box-shadow:var(--dw-shadow)}
.x-card h3{color:var(--dw-brand-green-700);font-size:17px;margin-bottom:6px}
.x-card p{color:var(--dw-text-ink-soft);font-size:14.5px;font-weight:600}
.x-callout{background:var(--dw-surface-paper-2);border-left:5px solid var(--dw-brand-mango);
  border-radius:var(--dw-radius-sm);padding:16px 18px;color:var(--dw-text-ink-soft);font-weight:600;font-size:15px}
.x-callout b{color:var(--dw-text-ink)}
.x-flow{display:grid;gap:15px}
.x-step{display:flex;gap:14px;align-items:flex-start;color:var(--dw-text-ink-soft);font-weight:600;font-size:15.5px}
.x-step b{color:var(--dw-text-ink)}
.x-num{flex:0 0 34px;height:34px;border-radius:50%;background:var(--dw-brand-green-700);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.tick{display:flex;gap:9px;align-items:flex-start;margin-bottom:10px;font-size:15.5px;
  color:var(--dw-text-ink-soft);font-weight:600}
.tick b{color:var(--dw-text-ink)}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;background:var(--dw-surface-paper);border:1.5px solid var(--dw-surface-line);
  border-radius:999px;padding:7px 14px;font-weight:700;font-size:13.5px;color:var(--dw-text-ink-soft)}
.playcta{background:var(--dw-brand-green-700);color:#fff;border-radius:var(--dw-radius-lg);
  padding:28px 24px;text-align:center}
.playcta h3{font-size:22px;margin-bottom:6px}
.playcta p{opacity:.9;font-weight:600;font-size:15.5px;max-width:540px;margin:0 auto 16px}
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:13px}
.rel a{display:block;background:var(--dw-surface-paper);border:1.5px solid var(--dw-surface-line);
  border-radius:14px;padding:15px 16px;text-decoration:none;box-shadow:var(--dw-shadow)}
.rel a b{display:block;color:var(--dw-brand-green-700);font-size:15.5px;margin-bottom:3px}
.rel a span{color:var(--dw-text-ink-soft);font-size:13.5px;font-weight:600}

/* ── concept-page furniture ── */
.ledger{background:var(--dw-surface-paper);border:1.5px solid var(--dw-surface-line);
  border-radius:var(--dw-radius);padding:18px 20px;box-shadow:var(--dw-shadow);max-width:560px}
.lrow{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1.5px dashed var(--dw-surface-line);font-weight:700}
.lrow:last-child{border-bottom:none}
.lrow .lbl{color:var(--dw-text-ink-soft)} .lrow .val{color:var(--dw-text-ink);white-space:nowrap}
.lrow.total .val{color:var(--dw-brand-green-700);font-size:18px}
.lnote{color:var(--dw-text-ink-faint);font-size:13px;font-weight:600;margin-top:2px}
.demo{background:var(--dw-surface-paper);border:2px solid var(--dw-brand-green-700);
  border-radius:18px;padding:22px;box-shadow:var(--dw-shadow);max-width:620px}
.demo .sub{color:var(--dw-text-ink-faint);font-size:13.5px;font-weight:600;margin-bottom:16px}
.ctrl{margin-bottom:15px}
.ctrl label{display:flex;justify-content:space-between;font-weight:700;font-size:14.5px;
  color:var(--dw-text-ink-soft);margin-bottom:6px}
.ctrl label b{color:var(--dw-text-ink)}
.ctrl input[type=range]{width:100%;accent-color:var(--dw-brand-green-700);height:26px}
.out{background:var(--dw-surface-paper-2);border-radius:13px;padding:15px 17px;margin-top:6px}
.out .big{font-size:29px;font-weight:800;color:var(--dw-brand-green-700);line-height:1.15}
.out .cap{font-size:13.5px;color:var(--dw-text-ink-soft);font-weight:700;margin-top:3px}
.out.warn .big{color:var(--dw-brand-terra)}
.qa{border-top:1.5px dashed var(--dw-surface-line);padding:15px 0}
.qa .q{font-weight:800;font-size:16px;margin-bottom:6px}
.qa .a{color:var(--dw-text-ink-soft);font-size:15.5px;font-weight:600}
.qa details summary{cursor:pointer;font-weight:700;color:var(--dw-brand-green-500);font-size:14.5px;list-style:none}
.qa details summary::-webkit-details-marker{display:none}
.qa details summary::before{content:"▸ "} .qa details[open] summary::before{content:"▾ "}
.qa details .work{margin-top:9px;color:var(--dw-text-ink-soft);font-size:15px;font-weight:600;
  background:var(--dw-surface-paper-2);border-radius:11px;padding:12px 14px}
.faq{border-top:1.5px dashed var(--dw-surface-line);padding:14px 0}
.faq b{display:block;font-size:15.5px;margin-bottom:3px}
.faq span{color:var(--dw-text-ink-soft);font-size:14.5px}

/* ── forms ── */
.formcard{background:var(--dw-surface-paper);border:1.5px solid var(--dw-surface-line);
  border-radius:18px;padding:26px 24px;box-shadow:var(--dw-shadow)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.fgrid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:5px}
.field.full{grid-column:1/-1}
.field label{font-weight:700;font-size:13.5px;color:var(--dw-text-ink-soft)}
.field input,.field select,.field textarea{font-family:inherit;font-size:16px;font-weight:600;
  color:var(--dw-text-ink);padding:12px 13px;border:2px solid var(--dw-surface-line);
  border-radius:var(--dw-radius-sm);background:#fff;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--dw-brand-mango)}
.field .hint{font-size:12px;color:var(--dw-text-ink-faint);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formmsg{margin-top:14px;padding:13px 15px;border-radius:var(--dw-radius-sm);font-weight:700;
  font-size:14.5px;display:none}
.formmsg.ok{display:block;background:#E8F5EC;color:var(--dw-brand-green-700);border:1.5px solid #9ED2B0}
.formmsg.err{display:block;background:#FDECEC;color:var(--dw-semantic-error);border:1.5px solid #F0B4B4}
.datepick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:640px){.datepick{grid-template-columns:1fr}}
.datepick label{display:block;cursor:pointer;position:relative}
.datepick input{position:absolute;opacity:0}
.datepick .d{border:2px solid var(--dw-surface-line);border-radius:14px;padding:13px 10px;
  text-align:center;background:#fff;font-weight:700;transition:.15s}
.datepick input:checked + .d{border-color:var(--dw-brand-green-700);background:var(--dw-surface-paper-2);
  box-shadow:var(--dw-shadow)}
.datepick input:focus-visible + .d{outline:3px solid var(--dw-brand-mango);outline-offset:2px}

/* ── footer ── */
footer{background:var(--dw-brand-green-700);color:var(--dw-text-on-dark);padding:26px 0;
  font-size:14px;text-align:center}
footer a{color:var(--dw-brand-lemon)}
footer .legal{opacity:.72;font-size:12.5px;margin-top:10px;line-height:1.6}

/* ── focus visibility, everywhere ── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--dw-brand-mango);outline-offset:2px;border-radius:4px}