/* WideMath homepage (widemath.com/), 2026-10-13.
   Direction: Editorial. Neutral grey base, near-black ink, white and light-grey
   surfaces, one accent (the WideMath green), Schibsted Grotesk for everything,
   Archivo wide for the footer wordmark only. The tool index is the signature:
   each tool is a row with one real worked answer, not an icon tile.
   Every value below comes from the token block; add a token before adding a value. */

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/assets/fonts/schibsted-grotesk-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "WideMath Wordmark"; font-style: normal; font-weight: 600 800; font-stretch: 112% 125%; font-display: swap;
  src: url(/assets/fonts/archivo-wordmark.woff2) format("woff2"); }

:root {
  /* colour */
  --surface: #F2F2F0; --card: #FFFFFF; --card-2: #E9E9E6; --stage: #0E0E0E;
  --ink: #0E0E0E; --ink-2: #5C5C57; --ink-3: #82827C; --line: #D6D6D1; --line-2: #C4C4BE;
  --accent: #15803D; --accent-text: #11692F; --on-ink: #F2F2F0;
  /* type: Schibsted Grotesk, ratio 1.333 */
  --font: "Schibsted Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-data: "Cambria Math", "STIX Two Math", "Cambria", "Segoe UI Symbol", serif;
  /* ratio about 1.25 on 16px: 13 labels, 15 secondary, 16 body, 18 lead, 20 row names and card titles,
     25 small headings, then statements 28 to 40 and the h1 36 to 56 */
  --t-xs: .8125rem; --t-sm: .9375rem; --t-md: 1rem; --t-lg: 1.125rem; --t-xl: 1.25rem; --t-2xl: 1.5625rem;
  --t-h1: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem); --t-statement: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);
  /* space: 4-point scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  /* radius and borders */
  --r-sm: 8px; --r-md: 16px; --r-lg: 28px; --r-pill: 999px; --b: 1px;
  /* motion */
  --dur-micro: 120ms; --dur-small: 200ms; --dur-scene: 480ms;
  --ease-out: cubic-bezier(.2, 0, 0, 1); --ease-settle: cubic-bezier(.16, 1, .3, 1);
  --wrap: 1240px; --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.home { margin: 0; background: var(--surface); color: var(--ink); font: 400 var(--t-md)/1.6 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.home a { color: inherit; text-decoration-thickness: var(--b); text-underline-offset: 4px; }
.home a:hover { color: var(--accent-text); }
.home :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }
.home code { font: .92em var(--font-data); background: var(--card-2); padding: 1px var(--s1); border-radius: 4px; }
.home [hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s4); top: -64px; background: var(--ink); color: var(--on-ink) !important; padding: var(--s2) var(--s4);
  border-radius: var(--r-pill); z-index: 10; text-decoration: none; transition: top var(--dur-small) var(--ease-out); }
.skip:focus { top: var(--s4); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

/* ---- top bar ----------------------------------------------------------- */
.top { border-bottom: var(--b) solid var(--line); }
.top-inner { display: flex; align-items: center; gap: var(--s5); min-height: 64px; }
.logo { font-weight: 800; font-size: var(--t-lg); letter-spacing: -.02em; text-decoration: none; }
.top-links { margin-left: auto; display: flex; gap: var(--s5); font-size: var(--t-sm); font-weight: 500; }
.top-links a { text-decoration: none; color: var(--ink-2); padding-block: var(--s2); }
.top-links a:hover { color: var(--ink); }
@media (max-width: 640px) {
  .top-links a:nth-child(1), .top-links a:nth-child(2) { display: none; }
}

/* ---- hero --------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s8); align-items: end;
  padding-top: var(--s9); padding-bottom: var(--s8); }
.hero h1 { font-size: var(--t-h1); line-height: 1.06; letter-spacing: -.035em; font-weight: 700; margin: 0; max-width: 17ch; text-wrap: balance; }
.hero h1 span { color: var(--ink-3); }
.hero-sub { margin: var(--s5) 0 0; font-size: var(--t-lg); color: var(--ink-2); max-width: 46ch; }

.find { position: relative; margin-top: var(--s6); max-width: 560px; }
.find input { width: 100%; height: 60px; padding: 0 56px 0 52px; border: var(--b) solid var(--line-2); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink); font: 500 var(--t-lg) var(--font); -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-micro) var(--ease-out); }
.find input::placeholder { color: var(--ink-3); }
.find input:hover { border-color: var(--ink-3); }
.find input:focus { outline: none; border-color: var(--ink); }
.find input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.find input::-webkit-search-cancel-button { -webkit-appearance: none; }
.find-ico { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%);
  fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.find-key { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); min-width: 28px; height: 28px; display: grid; place-items: center;
  border: var(--b) solid var(--line); border-radius: var(--r-sm); font: 600 var(--t-xs) var(--font); color: var(--ink-3); background: var(--surface); }
.find input:focus ~ .find-key { opacity: 0; }
html:not(.js) .find, html:not(.js) .chips { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.chip { appearance: none; border: var(--b) solid var(--line-2); background: transparent; color: var(--ink); min-height: 40px;
  padding: 0 var(--s4); border-radius: var(--r-pill); font: 500 var(--t-sm) var(--font); cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

.hero-text, .stage { min-width: 0; }
.stage { margin: 0; }
.stage-shot { display: block; position: relative; height: 520px; overflow: hidden; border-radius: var(--r-lg); background: var(--stage); }
.stage-shot img { position: absolute; left: 50%; top: var(--s7); width: 300px; height: auto; transform: translateX(-50%);
  border-radius: 22px; transition: transform var(--dur-scene) var(--ease-settle); }
.stage-shot:hover img { transform: translateX(-50%) translateY(-6px); }
.stage figcaption { margin-top: var(--s3); font-size: var(--t-sm); color: var(--ink-2); }
.stage figcaption a { color: var(--ink); font-weight: 600; text-decoration: none; margin-right: var(--s1); }
.stage figcaption a:hover { color: var(--accent-text); }

@media (max-width: 959px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--s7); padding-top: var(--s8); padding-bottom: var(--s7); }
  .stage-shot { height: 380px; }
  .stage-shot img { width: 260px; top: var(--s6); }
}
@media (max-width: 640px) {
  /* one swipeable line of filters, so the stage and the index start higher */
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}
@media (max-width: 480px) {
  .hero { padding-top: var(--s7); }
  .find input { height: 56px; padding-right: var(--s5); font-size: var(--t-md); }
  .find-key { display: none; }
  .stage-shot { height: 320px; }
}

/* ---- tool index (the signature) --------------------------------------- */
.index { padding-top: var(--s8); padding-bottom: var(--s8); border-top: var(--b) solid var(--line); }
.index-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); }
.index-head h2 { font-size: var(--t-statement); line-height: 1.12; letter-spacing: -.03em; margin: 0; font-weight: 700; }
.count { margin: 0; font-size: var(--t-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }

.group { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s6); padding-block: var(--s6); border-top: var(--b) solid var(--line); }
.group-head { position: sticky; top: var(--s5); align-self: start; }
.group-label { margin: 0; font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.group-note { margin: var(--s2) 0 0; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
.rows { list-style: none; margin: 0; padding: 0; }
.row + .row { border-top: var(--b) solid var(--line); }
.row a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px) 24px; gap: var(--s5); align-items: center;
  padding: var(--s4) var(--s4); margin-inline: calc(var(--s4) * -1); border-radius: var(--r-md); text-decoration: none; color: var(--ink);
  transition: background var(--dur-small) var(--ease-out); }
.row a:hover { background: var(--card); color: var(--ink); }
.r-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.r-name { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.r-new { display: inline-block; margin-left: var(--s2); font-size: var(--t-xs); font-weight: 700; color: var(--accent-text);
  letter-spacing: .02em; vertical-align: 3px; }
.r-desc { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
.r-spec { font: var(--t-md)/1.4 var(--font-data); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.r-go { width: 20px; height: 20px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-small) var(--ease-out), stroke var(--dur-small) var(--ease-out); }
.row a:hover .r-go { transform: translateX(4px); stroke: var(--ink); }

.empty { padding: var(--s7) 0 var(--s4); border-top: var(--b) solid var(--line); max-width: 640px; }
.empty p { margin: 0 0 var(--s4); color: var(--ink-2); }
.empty q { color: var(--ink); font-weight: 600; }
.empty-btn { appearance: none; border: 0; background: var(--ink); color: var(--on-ink); min-height: 44px; padding: 0 var(--s5);
  border-radius: var(--r-pill); font: 600 var(--t-sm) var(--font); cursor: pointer; transition: background var(--dur-micro) var(--ease-out); }
.empty-btn:hover { background: var(--accent); }

@media (max-width: 860px) {
  .group { grid-template-columns: 1fr; gap: var(--s3); }
  .group-head { position: static; }
  .row a { grid-template-columns: minmax(0, 1fr) 20px; gap: var(--s1) var(--s4); }
  .r-spec { grid-column: 1; grid-row: 2; text-align: left; font-size: var(--t-sm); color: var(--ink-2); }
  .r-spec:empty { display: none; }
  .r-go { grid-column: 2; grid-row: 1 / span 2; }
  .r-name { font-size: var(--t-lg); }
}

/* ---- statements (sections after the index) ---------------------------- */
.tasks, .how, .learn, .faq-sec, .team { padding-block: var(--s8); border-top: var(--b) solid var(--line); }
.statement { font-size: var(--t-statement); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; margin: 0 0 var(--s6); max-width: 22ch; text-wrap: balance; }
.statement span { color: var(--ink-3); }

.task-list { list-style: none; margin: 0; padding: 0; columns: 2 420px; column-gap: var(--s7); }
.task-list li { break-inside: avoid; display: flex; flex-direction: column; gap: 2px; padding: var(--s3) 0; border-top: var(--b) solid var(--line); }
.t-task { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5; }
.task-list a { font-weight: 600; text-decoration: none; }
.task-list a:hover { text-decoration: underline; }

.how-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.how-card { background: var(--card); border-radius: var(--r-md); padding: var(--s6); }
.how-card h3 { margin: 0 0 var(--s2); font-size: var(--t-xl); letter-spacing: -.015em; }
.how-card p { margin: 0; color: var(--ink-2); }
@media (max-width: 760px) { .how-grid { grid-template-columns: 1fr; } .how-card { padding: var(--s5); } }

.learn-body, .team-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s7); color: var(--ink-2); }
.learn-body p, .team-body p { margin: 0; }
.learn-body a, .team-body a { color: var(--ink); }
@media (max-width: 760px) { .learn-body, .team-body { grid-template-columns: 1fr; } }

.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s7); }
.faq-item { padding: var(--s5) 0; border-top: var(--b) solid var(--line); }
.faq-q { margin: 0 0 var(--s2); font-weight: 600; font-size: var(--t-lg); line-height: 1.4; }
.faq-a { margin: 0; color: var(--ink-2); }
@media (max-width: 760px) { .faq { grid-template-columns: 1fr; } }

/* ---- footer ------------------------------------------------------------- */
.site-foot { max-width: var(--wrap); margin: 0 auto; padding: var(--s8) var(--gutter) 0; border-top: var(--b) solid var(--line); overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s6) var(--s5); }
.foot-col { display: flex; flex-direction: column; gap: var(--s2); font-size: var(--t-sm); }
.foot-col a { color: var(--ink-2); text-decoration: none; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }
.foot-h { margin: 0 0 var(--s1); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
.site-foot .tm-disclaimer { margin: var(--s7) 0 0; font-size: var(--t-xs); line-height: 1.6; color: var(--ink-2); max-width: 90ch; }
.site-foot .tm-disclaimer a { color: var(--ink); }
.wordmark { margin: var(--s7) 0 0; font: 800 min(calc((100vw - 2 * var(--gutter)) / 6.4), 180px)/.8 "WideMath Wordmark", var(--font); font-stretch: 125%;
  letter-spacing: -.035em; color: var(--ink); white-space: nowrap; user-select: none; transform: translateY(.06em); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home *, .home *::before, .home *::after { transition: none !important; }
}
@media print {
  .top, .find, .chips, .stage, .site-foot .wordmark, .skip { display: none !important; }
  body.home { background: #fff; }
}