/* ============================================================
   SHARED — Parth's real design system, extracted for the 5
   homepage variations. Same tokens, fonts, buttons, footer.
   ============================================================ */
@font-face {
  font-family: 'Excalifont';
  src: url('assets/Excalifont-Regular.woff2') format('woff2');
  font-display: swap;
}
:root {
  --paper: #fbfaf4;
  --paper-2: #f5f3e8;
  --dot: #e3decf;
  --ink: #222019;
  --ink-soft: #403c32;
  --muted: #74705f;
  --line: #d8d3c3;
  --accent: #5b3df5;
  --accent-hover: #4c30d9;
  --accent-soft: #ece8ff;
  --hl: #ffe89b;
  --d-blue: #1971c2;  --f-blue: #a5d8ff;
  --d-green: #2f9e44; --f-green: #b2f2bb;
  --d-red: #e03131;   --f-red: #ffc9c9;
  --d-orange: #e8590c;--f-orange: #ffd8a8;
  --d-violet: #6741d9;--f-violet: #d0bfff;
  --d-yellow: #f08c00;--f-yellow: #ffec99;
  --d-gold: #c4973f;   --f-gold: #f3e2c2;
  --font-disp: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Poppins', system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, monospace;
  --font-hand: 'Caveat', ui-rounded, cursive;
  --maxw: 1160px;
  --r-sketch: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 1.15px, transparent 1.15px);
  background-size: 26px 26px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--hl); color: var(--ink); }
img, svg { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, .disp { font-family: var(--font-disp); font-weight: 700; line-height: 1.04; letter-spacing: -0.01em; }
.hand { font-family: var(--font-hand); font-weight: 600; }
.mono { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hl { background: linear-gradient(104deg, transparent .4em, var(--hl) .4em, var(--hl) calc(100% - .3em), transparent calc(100% - .3em)); padding: 0 .35em; border-radius: 2px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }

/* nav (visual parity) */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; padding: 22px clamp(18px, 3vw, 34px); pointer-events: none; }
/* phones: compact chrome so logo + coins + menu all fit at 360-520px */
@media (max-width: 520px) {
  .topbar { padding: 12px 12px; }
  .logo-pill { height: 38px; font-size: 1.05rem; padding: 0 13px; }
  .coins-chip, .pill-menu { height: 38px !important; }
  .coins-chip { padding: 0 11px !important; font-size: .6rem !important; }
  .pill-menu { padding: 0 13px !important; font-size: .82rem !important; }

  /* mobile readability floor — the mono micro-labels sit at 8-9px in the
     desktop design language; on phones everything below gets ≥10px.
     !important because page-level <style> blocks would otherwise win.
     Scoped tightly; web/tablet (>520px) untouched. */
  .tab-trig .tl,          /* work + home level-tab kickers */
  .pcard .ctag, .pcard .cls, /* unit-card chips (contact + home) */
  .chan .tx span,         /* channel sublabels: email/handles */
  .strip span, .strip b,  /* response-time strip (contact + home) */
  .entry .tag,            /* patch-notes NEW/FIX chips */
  .ach .claimed,          /* lore achievement "claimed" chips */
  .stat .l,               /* case-study stat labels */
  .step .sn,              /* case-study step numbers */
  .ibubble .itag,         /* case-study insight kicker */
  .srow, .srow span, .srow b, /* unit-card stat bars (contact + home) */
  .ba-tag,                /* case before/after tags */
  .unlockbar .claim,      /* case achievement claim chip */
  .chan .go,              /* channel action chips: COPY/CONNECT/FOLLOW/READ */
  .card-col .flip-hint, .uflip-hint, /* unit-card hints ONLY — the home stage
                             .flip-hint is a 1.15rem Caveat note, leave it */
  .party label {          /* party-invite field label */
    font-size: 10px !important; letter-spacing: .12em !important;
  }
}
/* same height + chip treatment as the Menu/coins buttons — one chrome row */
.logo-pill { pointer-events: auto; height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 0 18px; font-family: 'Excalifont', var(--font-hand); font-weight: 700; font-size: 1.25rem; box-shadow: 2px 3px 0 rgba(34,32,25,.18); text-decoration: none; color: var(--ink); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
a.logo-pill:hover { transform: translate(-1px, -1px); box-shadow: 3px 4px 0 rgba(34,32,25,.3); }
.logo-pill em { color: var(--accent); font-style: normal; }
.burger { pointer-events: auto; width: 48px; height: 48px; border-radius: 50%; background: var(--paper); border: none; display: grid; place-items: center; gap: 0; cursor: pointer; box-shadow: 0 1px 0 rgba(34,32,25,.04), 0 14px 30px -22px rgba(34,32,25,.5); }
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); margin: 2.5px 0; }

/* sketchy buttons — Parth's final spec (white label, #000 outline) */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-disp); font-weight: 700; font-size: 1rem;
  color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px 4px 16px 5px / 5px 16px 4px 14px;
  padding: 13px 24px; cursor: pointer; text-decoration: none;
  box-shadow: 3px 4px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { background: var(--accent-soft); transform: translate(-1px, -1px); box-shadow: 4px 5px 0 var(--ink); }
.btn:active { transform: translate(3px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn.primary { background: var(--accent); color: #fff; border-color: #000; box-shadow: 3px 4px 0 #000; }
.btn.primary:hover { background: var(--accent-hover); box-shadow: 4px 5px 0 #000; }
.btn.primary:active { box-shadow: 0 0 0 #000; }

/* footer — identical to the real site */
.footer { margin-top: clamp(28px, 5vw, 56px); }
.crowd-canvas { display: block; width: 100%; height: 420px; pointer-events: none; }
@media (max-width: 959px) { .crowd-canvas { height: 220px; } }
@media (max-width: 479px) { .crowd-canvas { height: 130px; } }
.footer-strip { border-top: 2px solid var(--ink); }
.footer-strip-inner { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; align-items: center; padding-block: 14px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--accent); }
.legal-links { display: flex; gap: 18px; font-size: .85rem; color: var(--muted); flex-wrap: wrap; align-items: baseline; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}