/* ============================================================================
   Winner skin for the generated marketing pages (2026-11-03).
   Loaded after site.css. It moves every page onto the winning design's system
   (mxngo-labs/mxngoware-designs, winner/designer-2, designs/winner @ aeee66a):
   one warm-ink ground, cream text, Anton poster headings, Hanken Grotesk text,
   Space Mono tags, mango #f08236 for the moments that matter, one colour per tool,
   status as a dot and a word, and the giant mango wordmark in the footer.
   Copy, URLs and page structure are unchanged; only the look moves.
   ========================================================================= */
:root {
  --ink: #16110d;
  --ink-2: #1d1712;
  --ink-card: #1d1712;
  --ink-raise: #261e17;
  --screen: #0d0a07;
  --fg-ink: #f4ebdf;
  --fg-ink-2: #bcae9f;
  --mango: #f08236;
  --mango-hi: #ff9a52;
  --mango-light: #ff9a52;
  --gold: #fff6e6;
  --teal: #3fd9cb;
  --teal-light: #3fd9cb;
  --line-ink: rgba(255, 236, 214, .11);
  --line-ink-2: rgba(255, 236, 214, .24);
  --subtick: #ff5247;
  --wheel: #ffcc33;
  --snoot: #4da3ff;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --mono: "Space Mono", "Courier New", monospace;
  --header-h: 72px;
  --gutter: clamp(16px, 4.45vw, 64px);
  color-scheme: dark;
}

html { background: var(--ink); scrollbar-color: #4a3a2c var(--ink); }
body { background: var(--ink); color: var(--fg-ink); font-size: 17px; line-height: 1.55; font-weight: 400; letter-spacing: 0;
  -webkit-font-smoothing: antialiased; }
::selection { background: var(--mango); color: var(--on-mango); }
:focus-visible { outline: 2px solid #fff6e6; outline-offset: 3px; }
.skip { background: var(--mango); }

/* One ground everywhere. The old cream bands become the quiet raised band, so pages keep
   their rhythm without a light/dark flip next to the front page. */
.on-cream, .on-cream-2, .on-ink, .on-ink-2 {
  --fg: var(--fg-ink); --fg-2: var(--fg-ink-2); --line: var(--line-ink); --line-2: var(--line-ink-2);
  --card: var(--ink-2); --card-2: var(--ink-raise); --accent-text: var(--mango-hi); --ok-text: var(--teal);
  color: var(--fg);
}
.on-ink, .on-cream-2 { --bg: var(--ink); background: var(--ink); }
.on-ink-2, .on-cream { --bg: var(--ink); background: var(--ink); }
.band + .band { border-top: 1px solid var(--line-ink); }

/* ---------------------------------------------------------------- type -- */
.h1-home, .h1-tool, .h1-std, .h2 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  letter-spacing: .004em; line-height: .94; text-wrap: balance;
}
.h1-home { font-size: clamp(60px, 9.4vw, 152px); }
.h1-tool, .h1-std { font-size: clamp(52px, 6.4vw, 104px); line-height: .94; letter-spacing: .004em; }
.h2 { font-size: clamp(40px, 4.4vw, 68px); line-height: .96; letter-spacing: .004em; }
@media (min-width: 768px) {
  .h1-home { font-size: clamp(60px, 9.4vw, 152px); line-height: .94; }
  .h1-tool, .h1-std { font-size: clamp(52px, 6.4vw, 104px); line-height: .94; }
  .h2 { font-size: clamp(40px, 4.4vw, 68px); }
}
.h3 { font-family: var(--sans); font-weight: 700; letter-spacing: 0; }
.lede { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; }
.lbl, .tag { font-family: var(--mono); }

/* ------------------------------------------------------------- buttons -- */
.btn { font-family: var(--sans); font-weight: 700; letter-spacing: 0; }
.btn-go { box-shadow: none; }
.btn-go:hover { box-shadow: none; }
.btn-line { border-color: var(--line-2); }
.lnk { color: var(--fg); text-decoration-color: var(--line-ink-2); }
.lnk:hover { color: var(--mango-hi); text-decoration-color: var(--mango); }

/* Status is a dot and a word, never a pill (winner rule). */
.chip { padding: 0; border: 0 !important; border-radius: 0; background: transparent !important; font-weight: 600; font-size: 14px; gap: 8px; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.chip-live { color: var(--teal); }
.chip-dev { color: var(--fg-ink-2); }
.chip-dev::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.chip-pro { color: var(--mango-hi); }

/* -------------------------------------------------------------- header -- */
.site-header { background: var(--ink); border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line-ink); }
.site-header .container, .crumbs .container, .site-footer .container { max-width: 1680px; padding-inline: var(--gutter); }
.brand { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
.brand img { width: 40px; height: 40px; }
.nav > li > a, .nav > li > button { font-weight: 600; font-size: 16px; padding: 0 12px; color: var(--fg-ink-2); }
.nav > li > a:hover, .nav > li > button:hover, .nav > li[data-open="true"] > button { color: var(--fg-ink); box-shadow: none; }
.nav > li > [aria-current="page"] { color: var(--fg-ink); box-shadow: inset 0 -2px 0 var(--mango); }
.header-actions .btn-line { border-color: transparent; padding: 0 12px; color: var(--fg-ink-2); }
.header-actions .btn-line:hover { color: var(--fg-ink); border-color: transparent; }
.burger { border-color: var(--line-ink-2); }

.mega { background: var(--ink-2); color: var(--fg-ink); border: 1px solid var(--line-ink-2); border-top: 0;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45); border-radius: 0 0 var(--r-md) var(--r-md); }
.mega-item:hover, .mega-item:focus-visible { background: var(--ink-raise); }
.mega-item span { color: var(--fg-ink-2); }
.mega-item .glyph { color: var(--mango); }
.mega-item[href$="/tools/subtick"] .glyph { color: var(--subtick); }
.mega-item[href$="/tools/wheel"] .glyph { color: var(--wheel); }
.mega-item[href$="/tools/snoot"] .glyph { color: var(--snoot); }
.mega-item .tag { color: var(--fg-ink-2); border: 0; padding: 0; font-family: var(--sans); font-weight: 600; }
.mega-foot { border-top-color: var(--line-ink); color: var(--fg-ink-2); }
.mega-foot .lnk { color: var(--fg-ink); }
.drawer { background: var(--ink); }

/* -------------------------------------------------------------- footer -- */
.crumbs { background: var(--ink); border-top: 1px solid var(--line-ink); }
.site-footer { background: var(--ink); border-top: 1px solid var(--line-ink); padding-top: 56px; }
.site-footer .brand img { width: 32px; height: 32px; }
.site-footer .brand { font-size: 22px; }
.foot-col h2 { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-ink-2); }
.foot-col a { color: var(--fg-ink-2); font-weight: 600; }
.foot-col a:hover, .legal a:hover { color: var(--fg-ink); }
/* The sign-off from the front page: MXNGOWARE in Anton, mango, edge to edge. */
.foot-mark {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; color: var(--mango);
  font-size: calc((min(100vw, 1680px) - 2 * var(--gutter)) / 4.8); line-height: .82; letter-spacing: 0;
  white-space: nowrap; text-align: center; padding: 56px 0 8px; user-select: none;
}
.legal { margin-top: 24px; border-top: 0; }

/* Tool colours where a tool is named in a card or a list. */
a[href$="/tools/subtick"] .glyph, [data-tool="subtick"] .glyph { color: var(--subtick); }
a[href$="/tools/wheel"] .glyph, [data-tool="wheel"] .glyph { color: var(--wheel); }
a[href$="/tools/snoot"] .glyph, [data-tool="snoot"] .glyph { color: var(--snoot); }

/* --------------------------------------------- layout and tool colours -- */
.container, .site-header .container { max-width: 1680px; padding-inline: var(--gutter); }
@media (min-width: 768px) { .container { max-width: 1680px; padding-inline: var(--gutter); } }
.card { box-shadow: none; border-radius: var(--r-xl); background: var(--ink-2); }
.card-hover:hover { box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
/* Each live tool sits on its own colour, as on the front page. */
[data-tool="subtick"] { --tool: var(--subtick); }
[data-tool="wheel"] { --tool: var(--wheel); }
[data-tool="snoot"] { --tool: var(--snoot); }
[data-tool="subtick"] .cap, [data-tool="wheel"] .cap, [data-tool="snoot"] .cap {
  background: var(--tool); background-image: radial-gradient(circle at 18% 12%, rgba(255, 255, 255, .22), transparent 46%);
  border-bottom: 0;
}
[data-tool="subtick"] .cap .lbl, [data-tool="wheel"] .cap .lbl, [data-tool="snoot"] .cap .lbl { color: #1c0c00; }
[data-tool="subtick"] .cap .clock-plate { transform: rotate(-3deg); }
[data-tool] .card-top .h3 { display: flex; align-items: center; gap: 10px; }
[data-tool="subtick"] .card-top .h3::before, [data-tool="wheel"] .card-top .h3::before, [data-tool="snoot"] .card-top .h3::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tool); flex: none;
}
/* Subtick's clock reads like the real plate: Anton digits, red colons. */
.clock { font-family: var(--display); font-weight: 400; letter-spacing: .01em; }
.clock s { color: var(--subtick); }

/* Search, filter rail and form fields: winner field style (raised ink, hairline, cream ring). */
.search { background: var(--ink-raise); border-color: var(--line-ink-2); box-shadow: none; border-radius: var(--r-sm); }
.search input { color: var(--fg-ink); }
.search input::placeholder { color: #a39383; }
.search:focus-within { border-color: transparent; box-shadow: none; outline: 2px solid #fff6e6; outline-offset: 1px; }
.rail a:hover { background: var(--ink-raise); color: var(--fg-ink); }
.rail a[aria-current="true"] { background: var(--ink-raise); color: var(--fg-ink); box-shadow: none; }
.field input, .field textarea, .field select { background: var(--ink-raise); color: var(--fg-ink); border-color: var(--line-ink-2); }
.field input:disabled { background: var(--ink-2); color: var(--fg-ink-2); }
.qa-group h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .004em; font-size: 36px; }
.acc-h { font-weight: 700; }