/* WordAcuity marketing site — shared by index.html and boggle-alternative.html. Tokens mirror www/css/styles.css. */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('fonts/figtree.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/newsreader.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('fonts/newsreader-italic.woff2') format('woff2'); }

/* Palette: the app's own tokens (www/css/styles.css), so the page and the game read as one. */
:root {
  --bg: #F4EEE3; --surf: #FBF6EC; --tile: #FFFFFF; --ink: #2C271F; --mut: #6E6350;
  --line: rgba(60,45,28,0.14); --rule: rgba(60,45,28,0.22);
  --acc: #AE7727; --acc-deep: #8A5E1E; --acc-soft: #F6E9CF; --on-acc: #FFF8EC;
  --ring-track: #EBDFC9; --good: #6A9656;
  --shadow: 0 30px 60px -30px rgba(70,50,20,0.45);
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 60ch;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #201A10; --surf: #2B2417; --tile: #2B2417; --ink: #F2EAD8; --mut: #A99B82;
    --line: rgba(255,255,255,0.10); --rule: rgba(255,255,255,0.18);
    --acc: #CA9540; --acc-deep: #E0AC55; --acc-soft: #3A3017; --on-acc: #1E1709;
    --ring-track: #3A3320; --good: #8CB478;
    --shadow: 0 30px 60px -30px rgba(0,0,0,0.8);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-weight: 400; font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--acc-deep); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--acc); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.012em; margin: 0; text-wrap: balance; }
p { margin: 0; }
em.gold { font-style: italic; color: var(--acc); }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.mut { color: var(--mut); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 6px; }
.skip:focus { left: 8px; z-index: 10; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }

/* Buttons: one filled, one quiet. */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; font-family: var(--sans); font-weight: 600; font-size: 1rem;
  text-decoration: none; white-space: nowrap; transition: transform .25s cubic-bezier(.22,1,.36,1), background-color .2s, border-color .2s;
}
.btn:active { transform: translateY(1px); }
/* Primary action: a wide ink button for the App Store; the browser link is a quiet text link beside it. */
.btn-store { background: var(--ink); color: var(--bg); min-height: 54px; min-width: 280px; padding: 0 30px; justify-content: center; font-size: 1.04rem; gap: 12px; }
.btn-store:hover { background: var(--acc-deep); color: var(--on-acc); }
.btn-store svg { width: 20px; height: 20px; margin-top: -2px; }
.link-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 54px; padding: 0 6px; font-weight: 600; font-size: 1.02rem; color: var(--ink); text-decoration: none; }
.link-cta .u { text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 1.5px; text-underline-offset: 7px; }
.link-cta:hover { color: var(--acc-deep); }
.link-cta:hover .u { text-decoration-color: var(--acc-deep); }
.arrow { display: inline-block; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.btn:hover .arrow, .link-cta:hover .arrow { transform: translateX(4px); }
.btn-quiet { color: var(--ink); border: 1px solid var(--rule); background: transparent; }
.btn-quiet:hover { border-color: var(--ink); color: var(--ink); }
.btn svg { width: 18px; height: 18px; flex: none; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.cta-note { font-size: 0.9rem; color: var(--mut); margin-top: 14px; }

/* Header */
.site-head {
  position: sticky; top: 0; z-index: 20; padding: 14px 0;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .25s;
}
.site-head[data-scrolled] { border-bottom-color: var(--line); }
@supports not (background: color-mix(in srgb, red 50%, transparent)) { .site-head { background: var(--bg); } }
section, .site-foot { scroll-margin-top: 72px; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; line-height: 1; font-family: var(--serif); font-weight: 500; font-size: 1.45rem; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
/* Optical centring: the icon is centred on the wordmark's CAP height (cap top to baseline), not its line box.
   Measured from rendered pixels: the line-box centre sits ~4px below the cap centre at 23px Newsreader. */
.wordmark .mark { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 1px 2px rgba(60,45,28,0.25); transform: translateY(-4px); }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 28px); }
.site-nav a:not(.btn) { color: var(--mut); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.site-nav a:not(.btn):hover { color: var(--ink); }
.site-nav .btn { min-height: 40px; padding: 0 16px; font-size: 0.92rem; }
@media (max-width: 719px) { .site-nav a:not(.btn) { display: none; } }

/* Hero: text left, the board right. */
.hero { padding: clamp(40px, 8vw, 96px) 0 clamp(48px, 8vw, 104px); }
.hero .wrap { display: grid; grid-template-columns: 1fr; gap: clamp(36px, 6vw, 72px); align-items: center; }
@media (min-width: 880px) { .hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.hero h1 { font-size: clamp(2.6rem, 7.2vw, 5rem); line-height: 1.02; }
.hero .lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--mut); margin: 24px 0 32px; max-width: 34em; }
.hero .lede strong { color: var(--ink); font-weight: 500; }
.board-wrap { justify-self: center; width: min(100%, 400px); filter: drop-shadow(var(--shadow)); }
.board-wrap svg { width: 100%; height: auto; display: block; }
.board-wrap .tile { fill: var(--tile); stroke: var(--line); }
.board-wrap .tile.hit { fill: var(--acc-soft); stroke: var(--acc); }
.board-wrap .frame { fill: var(--surf); stroke: var(--line); }
.board-wrap text { font-family: var(--sans); font-weight: 600; font-size: 22px; fill: var(--ink); letter-spacing: 0.02em; }
.board-wrap text.hit { fill: var(--acc); }
.board-wrap .trace { fill: none; stroke: var(--acc); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.board-wrap .dot { fill: var(--acc); }
@media (prefers-reduced-motion: no-preference) {
  .board-wrap .trace { stroke-dasharray: 420; stroke-dashoffset: 420; animation: trace 1.4s cubic-bezier(.65,0,.35,1) .5s forwards; }
  .board-wrap .dot { opacity: 0; animation: appear .3s ease-out 1.85s forwards; }
  .board-wrap .hit { opacity: 0.001; animation: appear .35s ease-out forwards; }
  .board-wrap .hit:nth-of-type(1) { animation-delay: .5s; }
  .reveal { opacity: 0; transform: translateY(14px); animation: rise .8s cubic-bezier(.22,1,.36,1) forwards; }
  .reveal:nth-child(2) { animation-delay: .08s; } .reveal:nth-child(3) { animation-delay: .16s; } .reveal:nth-child(4) { animation-delay: .24s; }
}
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Section furniture: a hairline, a small italic number, a heading. */
section { padding: clamp(56px, 9vw, 120px) 0; }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.kicker { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--acc); margin-bottom: 14px; }
.h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.12; }
.intro { color: var(--mut); font-size: 1.1rem; margin-top: 18px; max-width: 48ch; }

/* How it works: alternating text / phone, numbered. */
.beats { display: grid; gap: clamp(48px, 7vw, 96px); margin-top: clamp(40px, 6vw, 72px); }
.beat { display: grid; gap: 28px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .beat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); }
  .beat:nth-child(even) .beat-text { order: 2; }
  .beat:nth-child(odd) .beat-text { padding-left: clamp(0px, 4vw, 48px); }
  .beat:nth-child(even) .beat-text { padding-right: clamp(0px, 4vw, 48px); }
}
.beat .num { font-family: var(--serif); font-style: italic; color: var(--acc); font-size: 1.1rem; display: block; margin-bottom: 10px; }
.beat h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; }
.beat p { margin-top: 14px; color: var(--mut); max-width: 40ch; }
.beat p strong { color: var(--ink); font-weight: 500; }
.phone { width: min(100%, 300px); justify-self: center; aspect-ratio: 1206 / 2622; border-radius: 11% / 5%; overflow: hidden; border: 1px solid var(--line); background: #1E1709; box-shadow: var(--shadow); }
.phone img { width: 100%; height: 100%; object-fit: cover; }
/* The Coach syllabus, set as a ruled list in place of a phone. */
.syllabus { list-style: none; margin: 0; padding: 0; counter-reset: lesson; justify-self: center; width: min(100%, 380px); border-top: 1px solid var(--rule); }
.syllabus li { display: flex; gap: 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; }
.syllabus li::before { counter-increment: lesson; content: counter(lesson, decimal-leading-zero); font-style: italic; color: var(--acc); font-size: 0.95rem; min-width: 1.8em; }

/* Acuity: a definition set in type, not a chart. */
.acuity .wrap { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 880px) { .acuity .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); } }
/* The Acuity ring, drawn exactly as the app draws it (www/js/lab.js renderAcuityRing: r=28 in a 66 box, 4px strokes). */
.ring-demo { margin-top: 28px; width: 176px; text-align: center; }
.ring { position: relative; width: 176px; height: 176px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.ring .track { fill: none; stroke: var(--ring-track); stroke-width: 4; }
.ring .arc { fill: none; stroke: var(--acc); stroke-width: 4; stroke-linecap: round; }
.ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 500; font-size: 4.2rem; color: var(--ink); font-variant-numeric: tabular-nums; padding-top: 0.16em; }
.ring-label { margin-top: 14px; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mut); }
.ring-delta { margin-top: 6px; color: var(--good); font-weight: 600; font-size: 0.95rem; }
@media (prefers-reduced-motion: no-preference) {
  .ring .arc { animation: ring-fill 1.3s cubic-bezier(.22,1,.36,1) .3s both; }
}
@keyframes ring-fill { from { stroke-dashoffset: 175.9; } }
.acuity dl { margin: 0; display: grid; gap: 0; }
.acuity .def { padding: 20px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; }
.acuity .def:last-child { border-bottom: 1px solid var(--line); }
.acuity dt { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); }
.acuity dd { margin: 0; color: var(--mut); }
@media (max-width: 479px) { .acuity .def { grid-template-columns: 1fr; gap: 6px; } }

/* Modes: three columns ruled at the top. */
.modes-grid { display: grid; gap: 40px; margin-top: clamp(36px, 6vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 720px) { .modes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); } }
/* Each card is a column that pushes its phone to the bottom, so the three phones share one top edge
   however long the copy above them runs (grid rows stretch to the tallest card). */
.mode { border-top: 1px solid var(--rule); padding-top: 22px; display: flex; flex-direction: column; }
.mode h3 { font-size: 1.6rem; }
.mode .tag { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); margin-bottom: 8px; }
.mode p { color: var(--mut); margin-top: 12px; }
.mode .phone { width: min(100%, 220px); align-self: flex-start; margin-top: auto; padding-top: 0; }
.mode p + .phone { margin-top: auto; }
.mode .phone { position: relative; top: 0; }
.mode > p:last-of-type { margin-bottom: 26px; }

/* Pro */
/* Left column: eyebrow, heading, body as three rows. The benefits list spans the heading and body rows
   only (not the eyebrow) and is centred on them, so its midpoint matches the midpoint of the text block. */
.pro .wrap { display: grid; gap: 14px; grid-template-columns: 1fr; }
.pro .pro-kicker { margin-bottom: 0; }
@media (min-width: 880px) {
  .pro .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto; column-gap: clamp(40px, 6vw, 96px); row-gap: 14px; align-items: start; }
  .pro .pro-kicker { grid-column: 1; grid-row: 1; }
  .pro-head { grid-column: 1; grid-row: 2; }
  .pro-body { grid-column: 1; grid-row: 3; }
  .pro ul { grid-column: 2; grid-row: 2 / 4; align-self: center; }
}
.pro-body .fine:first-child { margin-top: 4px; }
.pro ul { list-style: none; padding: 0; margin: 0; }
.pro li { padding: 13px 0; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.5; display: flex; gap: 14px; align-items: baseline; }
.pro li:last-child { border-bottom: 1px solid var(--line); }
/* A small dot sitting on the x-height centre of the first line (baseline-aligned, nudged up a tenth of an em). */
.pro li::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); align-self: baseline; transform: translateY(-0.1em); margin-right: 6px; }
.pro .fine { color: var(--mut); margin-top: 16px; font-size: 0.98rem; line-height: 1.5; max-width: 44ch; }

/* FAQ */
.faq .list { margin-top: clamp(28px, 5vw, 48px); border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; font-family: var(--serif); font-size: 1.3rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background:
  linear-gradient(var(--acc), var(--acc)) center / 14px 1.5px no-repeat,
  linear-gradient(var(--acc), var(--acc)) center / 1.5px 14px no-repeat; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--mut); padding: 0 0 22px; max-width: 60ch; }

/* Closing */
.close { text-align: left; }
.close .h2 { max-width: 16ch; }
.close .cta-row { margin-top: 32px; }

/* Footer */
.site-foot { border-top: 1px solid var(--rule); padding: 40px 0 56px; font-size: 0.92rem; color: var(--mut); }
.site-foot .wrap { display: grid; gap: 22px; }
@media (min-width: 720px) { .site-foot .wrap { grid-template-columns: 1fr auto; align-items: start; } }
.site-foot .wordmark { font-size: 1.2rem; gap: 9px; }
.site-foot .wordmark .mark { width: 24px; height: 24px; border-radius: 6px; transform: translateY(-3px); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-foot nav a { color: var(--mut); text-decoration: none; }
.site-foot nav a:hover { color: var(--ink); }
.site-foot .legal { grid-column: 1 / -1; max-width: 72ch; font-size: 0.85rem; line-height: 1.55; }
.site-foot .legal p + p { margin-top: 8px; }

/* Share-link landing (join-room.html / join-challenge.html at /g/CODE and /c/CODE). One column,
   the code set large in the serif so it can be read off a screen and typed into the app. */
.join { padding: clamp(40px, 8vw, 96px) 0 clamp(56px, 9vw, 120px); }
.join .wrap { max-width: 640px; }
.join .h2 { margin-top: 0; }
.join-code-label { margin-top: 28px; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mut); }
.join-code-hint { letter-spacing: 0; text-transform: none; }
.join-code {
  display: inline-block; margin-top: 8px; padding: 10px 22px; cursor: pointer; user-select: all; -webkit-user-select: all;
  font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 10vw, 3.6rem); letter-spacing: 0.14em; line-height: 1.1;
  color: var(--ink); background: var(--surf); border: 1px solid var(--line); border-radius: 14px; position: relative;
  transition: border-color .2s, box-shadow .2s;
}
.join-code:hover { border-color: var(--rule); }
.join-code[data-copied]::after {
  content: 'Copied'; position: absolute; left: 50%; top: 100%; transform: translate(-50%, 8px);
  font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--acc); white-space: nowrap;
}
.join-pitch { color: var(--mut); margin: 26px 0 30px; max-width: 44ch; }