/* NTK Intel landing page: layout + page components on top of brand.css (Brand System v1, palette "Dispatch").
   Colors, fonts and shadows come from brand.css custom properties (--ntk-*). Do not hard-code brand hexes here.
   Brand rules honoured: square corners, 2px ink borders, hard offset shadows, one yellow CTA per screen,
   one red element per composition, never ink/red text on blue. */

/* Self-hosted fonts (SIL OFL 1.1; licenses in /assets/fonts). No third-party font requests. */
@font-face { font-family: "Anton"; src: url("/assets/fonts/anton-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("/assets/fonts/spacemono-bold-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--ntk-background-page); }
img, svg { max-width: 100%; display: block; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--ntk-c-blue); outline-offset: 2px; }
.ntk-dark :focus-visible, .ntk-field :focus-visible, .site-header :focus-visible { outline-color: var(--ntk-c-yellow); }
.paper-card :focus-visible { outline-color: var(--ntk-c-blue); }

.wrap { width: 100%; max-width: var(--ntk-content-max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }
.wrap--prose { max-width: calc(var(--ntk-prose-max) + 64px); }
.wrap--narrow { max-width: 800px; }

.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ntk-c-yellow); color: var(--ntk-c-ink); padding: 10px 14px; border: 2px solid var(--ntk-c-ink); }
.skip-link:focus { top: 8px; }

/* Type helpers (brand.css styles h1/h2 inside .ntk) */
.display { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.05; }
.display-l { font-size: clamp(1.875rem, 4.4vw, 2.75rem); line-height: 1; }
.h3 { font: 800 1.25rem/1.25 var(--ntk-font-body); letter-spacing: -.01em; margin: 0 0 .4em; }
.lede { font-size: 1.125rem; line-height: 1.55; color: var(--ntk-text-secondary); }
.small { font-size: .875rem; line-height: 1.5; }
.num { font: 700 .875rem/1 var(--ntk-font-mono); color: var(--ntk-c-blue); letter-spacing: .14em; margin: 0 0 8px; }
.label-yellow { color: var(--ntk-c-yellow); }
.on-dark-muted { color: var(--ntk-text-on-dark-muted); }
.tag-inline { font-size: .625rem; padding: 3px 5px; vertical-align: 2px; }

/* Banners */
.mock-banner, .internal-banner { display: none; font: 700 .75rem/1.4 var(--ntk-font-mono); letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 8px 12px; }
.mock-banner { background: var(--ntk-c-ink); color: var(--ntk-c-yellow); border-bottom: 1px solid var(--ntk-c-yellow); }
.is-mock .mock-banner { display: block; }
.internal-banner { background: var(--ntk-c-yellow); color: var(--ntk-c-ink); border-bottom: 2px solid var(--ntk-c-ink); }
.is-internal .internal-banner { display: block; }

/* Header: ink bar, horizontal-dark logo. CTA is a ghost button so the hero keeps the single yellow CTA. */
.site-header { background: var(--ntk-c-ink); position: sticky; top: 0; z-index: 10; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 12px; }
.site-header__logo { display: block; background: none !important; }
.site-header__logo img { height: 34px; width: auto; }
.ntk-btn.btn-on-ink { color: var(--ntk-c-paper) !important; border-color: var(--ntk-c-paper); padding: 10px 14px; font-size: 1rem; }
.ntk-btn.btn-on-ink:hover { background: transparent; box-shadow: 4px 4px 0 var(--ntk-c-blue); }

/* Buttons (extends .ntk-btn) */
.ntk .ntk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; }
.ntk .ntk-btn:hover { color: var(--ntk-c-ink); }
.ntk-btn[disabled] { cursor: progress; opacity: .85; transform: none; }
.spinner { display: none; width: 16px; height: 16px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--ntk-text-link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; font-weight: 700; }

/* Hero: blue dot field + paper card */
.hero { padding: 32px 0 56px; border-bottom: 2px solid var(--ntk-c-ink); }
@media (min-width: 960px) { .hero { padding: 64px 0 88px; } }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.hero__main { min-width: 0; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: 1.2fr .8fr; gap: 48px; } .hero__side { order: 2; } }
@media (max-width: 959px) { .countdown-card { margin-right: 6px; } .countdown-card > .ntk-label, .countdown__subject, [data-countdown-caption] { text-align: center; justify-content: center; } }
.paper-card { background: var(--ntk-c-paper); color: var(--ntk-c-ink); border: 2px solid var(--ntk-c-ink); padding: 24px; box-shadow: var(--ntk-shadow-offset-md); }
@media (min-width: 720px) { .paper-card { padding: 36px; box-shadow: var(--ntk-shadow-offset-lg); } }
@media (min-width: 960px) { .hero .paper-card { transform: rotate(-.6deg); } }
.hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.paper-card .display { margin-top: 0; }
.hero__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: center; }
.hero__logo { display: none; width: 100%; max-width: 340px; height: auto; }
@media (min-width: 960px) { .hero__logo { display: block; } }
.countdown-card { width: 100%; max-width: 380px; color: var(--ntk-c-ink); }
.countdown-card p:last-child { margin: 0; }
.countdown { margin: 6px 0 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.countdown__cell { background: var(--ntk-c-ink); color: var(--ntk-c-paper); text-align: center; padding: 10px 4px 8px; display: grid; gap: 4px; }
.countdown__n { font: 400 clamp(2rem, 7vw, 2.75rem)/1 var(--ntk-font-display); font-variant-numeric: tabular-nums; }
.countdown__u { font: 700 .625rem/1 var(--ntk-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ntk-c-yellow); }
.countdown__subject { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.countdown__subject .ntk-redact { font: 400 1rem/1 var(--ntk-font-body); padding: 2px 0; letter-spacing: -.1em; min-width: 0; overflow: hidden; white-space: nowrap; }
.is-zero .countdown__cell { background: var(--ntk-c-blue); color: var(--ntk-c-paper); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

[hidden] { display: none !important; }

/* Signup funnel (D-036). Brand tokens only; selected state is ink on paper, never a new color.
   The yellow button stays the single yellow CTA on each screen. */
.funnel { scroll-margin-top: 80px; }
.hero__head .lede { margin-bottom: 0; }
.funnel .funnel__title { font: 400 clamp(1.5rem, 5vw, 2rem)/1.05 var(--ntk-font-display); text-transform: uppercase; margin: 0 0 14px; outline: none; }
.funnel .funnel__title--first { font-size: 1.375rem; margin-bottom: 10px; }
/* A solid box one line tall, pushed down from the line above. Browsers size an inline highlight from the font's own metrics, and Safari's
   reach further up, so this doesn't use one. The margin is part of the line, so the gap holds at every width, and when the card is tilted. */
.display .ntk-mark { display: inline-block; white-space: nowrap; line-height: 1; padding: .06em .15em .02em; margin-top: .16em; background: var(--ntk-c-yellow); }
.funnel__skip-line { margin: 14px 0 0; text-align: center; }
.funnel__progress { margin-bottom: 16px; }
.funnel__progress-label { margin: 0 0 8px; }
.funnel__bars { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; }
.funnel__bars li { flex: 1; height: 8px; border: 2px solid var(--ntk-c-ink); background: var(--ntk-c-white); }
.funnel__bars li.is-on { background: var(--ntk-c-ink); }
.field { margin-bottom: 12px; }
.field__label { display: block; margin-bottom: 6px; }
.field__optional { letter-spacing: .04em; font-weight: 700; text-transform: none; }
.funnel__next { width: 100%; min-height: 56px; margin-top: 14px; }
.funnel__skip { display: block; width: 100%; min-height: 48px; margin-top: 8px; background: none; border: 0; font: 700 1rem var(--ntk-font-body); color: var(--ntk-c-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.save-note { margin: 14px 0 0; padding: 10px 12px; border: 2px dashed var(--ntk-c-ink); font-size: .875rem; line-height: 1.45; }
.birth { border: 0; padding: 0; min-width: 0; }
.birth legend { padding: 0; }
.birth__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 8px; }
.birth select { padding-right: 8px; }
.birth .consent__policy { margin-top: 6px; }
.founders { margin: 0 0 14px; padding: 12px 14px; border: 2px solid var(--ntk-c-ink); background: var(--ntk-c-manila); }
.founders p { margin: 0; }
.founders__title { font-weight: 700; }
.founders__terms { font-size: .9375rem; }
.founders__count { font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px !important; }
.founders__note { font-size: .875rem; }
.saved-note { margin: 0 0 14px; font-size: .9375rem; overflow-wrap: anywhere; }
.chip-field { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.chip-field legend { padding: 0; margin-bottom: 8px; }
.chip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chip-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chip { position: relative; display: block; cursor: pointer; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span, .chip--tap { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 6px; text-align: center; font: 700 .9375rem/1.2 var(--ntk-font-body); background: var(--ntk-c-white); color: var(--ntk-c-ink); border: 2px solid var(--ntk-c-ink); }
.chip input:checked + span { background: var(--ntk-c-ink); color: var(--ntk-c-paper); }
.chip input:focus-visible + span { outline: 3px solid var(--ntk-c-blue); outline-offset: 2px; }
.chip--tap { width: 100%; min-height: 56px; cursor: pointer; }
.chip--tap[aria-pressed="true"] { background: var(--ntk-c-ink); color: var(--ntk-c-paper); }
@media (hover: hover) { .chip--tap:not([aria-pressed]):hover { background: var(--ntk-c-ink); color: var(--ntk-c-paper); } }
.funnel__panel .funnel__skip { margin-top: 12px; }
@media (max-width: 719px) {
  /* After step 1 the phone screen shows only the current question group. */
  .hero.is-in-funnel .hero__head, .hero.is-in-funnel .hero__side { display: none; }
  .hero.is-in-funnel { padding-top: 16px; }
  .hero { padding-top: 16px; }
  .paper-card { padding: 20px 16px; }
}
@media (max-height: 500px) { .site-header { position: static; } }

/* Signup form (inside paper cards) */
.signup { margin-top: 18px; }
.is-in-funnel .signup { margin-top: 0; }
.signup__label { display: block; margin-bottom: 8px; }
.signup__row { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 560px) { .signup__row { flex-direction: row; } .signup__row .ntk-input { flex: 1; min-width: 0; } }
.ntk-input { width: 100%; font-size: 1.0625rem; }
.ntk-input[aria-invalid="true"] { border-color: var(--ntk-feedback-error); box-shadow: 0 0 0 2px var(--ntk-feedback-error); }
.consent { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; margin-top: 12px; font-size: .9375rem; line-height: 1.45; }
.consent input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--ntk-c-ink); cursor: pointer; }
.consent label { cursor: pointer; }
.consent__policy { display: block; margin-top: 2px; }
.field-error { margin: 8px 0 0; font-weight: 700; font-size: .9375rem; color: var(--ntk-feedback-error); }
.field-error::before { content: "! "; }
.field-suggest { margin: 8px 0 0; font-size: .9375rem; }
.form-alert { margin-top: 14px; padding: 12px 14px; border: 2px solid var(--ntk-c-ink); background: var(--ntk-c-white); color: var(--ntk-feedback-error); font-weight: 700; }
.microcopy { margin: 14px 0 0; font-size: .8125rem; color: var(--ntk-text-muted); }
.turnstile:empty { display: none; }
.turnstile { margin-top: 14px; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.signup__success { background: var(--ntk-c-white); color: var(--ntk-c-ink); border: 2px solid var(--ntk-c-ink); box-shadow: var(--ntk-shadow-offset-md); padding: 22px 24px; }
.signup__success .h3 { margin-top: 12px; }
.signup__success p:last-child { margin: 0; }

/* Sections */
.section { padding: 64px 0; }
@media (min-width: 900px) { .section { padding: 88px 0; } }
.section--white { background: var(--ntk-c-white); border-top: 2px solid var(--ntk-c-ink); }
.section .ntk-label + .display-l { margin-top: 10px; }

.moves { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 28px; }
@media (min-width: 820px) { .moves { grid-template-columns: repeat(3, 1fr); } }
.moves p:last-child { margin: 0; }

.sample { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .sample { grid-template-columns: 1fr 1.1fr; gap: 56px; } }
.sample .display-l { color: var(--ntk-c-paper); }
.email-mock { background: var(--ntk-c-white); color: var(--ntk-c-ink); border: 2px solid var(--ntk-c-paper); box-shadow: 10px 10px 0 var(--ntk-c-blue); }
.email-mock__masthead { background: var(--ntk-c-ink); padding: 16px 24px; border-bottom: 2px solid var(--ntk-c-paper); }
.email-mock__masthead img { height: 30px; width: auto; }
.email-mock__body { padding: 24px; }
@media (min-width: 600px) { .email-mock__body { padding: 28px 32px; } }
.email-mock__title { font: 400 clamp(1.4rem, 3.4vw, 1.75rem)/1.05 var(--ntk-font-display); text-transform: uppercase; margin: 8px 0; }
.one-thing { box-shadow: var(--ntk-shadow-offset-sm); padding: 18px 20px; margin: 4px 0 22px; }
.one-thing p:last-child { margin: 0; }
.also { margin-bottom: 8px; }
.also-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.also-list .num { display: inline; margin-right: 8px; }
.rumor-check { border: 2px dashed var(--ntk-c-ink); padding: 14px 16px; margin-bottom: 20px; }
.rumor-check p { margin: 0 0 6px; }
.rumor-check p:last-child { margin: 0; }
.email-mock__end { margin: 0; padding-top: 14px; border-top: 2px solid var(--ntk-c-ink); }

.benefits { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 28px; }
@media (min-width: 760px) { .benefits { grid-template-columns: repeat(3, 1fr); } }
.benefits li { border-top: 3px solid var(--ntk-c-ink); padding-top: 14px; }
.benefits p { margin: 0; color: var(--ntk-text-secondary); }
.social-proof { margin-top: 32px; font-size: 1.125rem; }

.faq { margin-top: 24px; border-top: 2px solid var(--ntk-c-ink); }
.faq details { border-bottom: 2px solid var(--ntk-c-ink); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 800; font-size: 1.0625rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--ntk-font-display); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 12px 0 0; color: var(--ntk-text-secondary); }

.hero--final { border-top: 2px solid var(--ntk-c-ink); }
.hero--final .display-l { margin: 0 0 10px; }

/* Footer: ink, wordmark */
.site-footer { padding: 48px 0 32px; }
.site-footer a { color: var(--ntk-text-on-dark-link); }
.site-footer .site-footer__logo { display: inline-block; margin-bottom: 14px; background: none; }
.site-footer__logo img { height: 34px; width: auto; }
.site-footer__grid { display: grid; gap: 28px; }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1fr auto; align-items: start; } }
.site-footer p { color: var(--ntk-text-on-dark-muted); }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .footer-links { grid-auto-flow: column; gap: 22px; } }
.site-footer__legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--ntk-background-dark-surface); }
.site-footer__legal p { max-width: 70em; }

/* Legal + utility pages */
.legal { padding: 48px 16px 80px; }
.legal h1 { font-size: clamp(2rem, 6vw, 3.2rem); }
.legal h2 { font: 800 1.35rem/1.25 var(--ntk-font-body); text-transform: none; margin-top: 2em; }
.legal li { margin-bottom: .4em; }
.legal table { display: block; overflow-x: auto; border-collapse: collapse; width: 100%; font-size: .9375rem; margin: 1em 0; background: var(--ntk-c-white); }
.legal th, .legal td { min-width: 110px; overflow-wrap: anywhere; border: 2px solid var(--ntk-c-ink); padding: 8px 10px; text-align: left; vertical-align: top; }
.draft-notice { background: var(--ntk-c-yellow); color: var(--ntk-c-ink); border: 2px solid var(--ntk-c-ink); padding: 14px 16px; font-weight: 700; margin-bottom: 28px; }
.placeholder { background: var(--ntk-c-manila); padding: 0 4px; font-family: var(--ntk-font-mono); font-size: .9em; }
.simple-page { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 64px 16px; }
.simple-page .ntk-tag { margin-bottom: 16px; }
.unsub-state { margin-top: 24px; }

/* The one button at the bottom of the page. Yellow comes from .ntk-btn. */
.ntk-btn--big { display: block; width: 100%; box-sizing: border-box; min-height: 72px; padding: 24px 16px; text-align: center; font-size: clamp(1.5rem, 6vw, 2.25rem); }

.write-in { margin-top: 14px; }

/* Step 3 screens. Two questions must stay readable at 320 px. */
.q-block { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.q-title { padding: 0; margin: 0 0 8px; font: 700 1.125rem/1.25 var(--ntk-font-body); color: var(--ntk-c-ink); outline: none; }
.q-block .small { margin: 0 0 10px; }
.q-more { margin-top: 8px; }
.picked-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.picked-list:empty { display: none; }
.picked { min-height: 44px; max-width: 100%; padding: 8px 12px; font: 700 .9375rem/1.2 var(--ntk-font-body); background: var(--ntk-c-ink); color: var(--ntk-c-paper); border: 2px solid var(--ntk-c-ink); cursor: pointer; overflow-wrap: anywhere; text-align: left; }
.picked:focus-visible { outline: 3px solid var(--ntk-c-blue); outline-offset: 2px; }
.chip--tap { overflow-wrap: anywhere; }
.reply-ask { margin: 24px 0; }
.paid-line { margin: 14px 0 0; padding: 10px 12px; border: 2px solid var(--ntk-c-ink); background: var(--ntk-c-white); color: var(--ntk-c-ink); font-size: .9375rem; line-height: 1.45; }

/* Under the signup card, on the blue: a compact ink strip in the page's display type. Legal: readable, 15px or more, high contrast. */
.paid-line { margin: 26px 0 0; padding: 12px 16px; background: var(--ntk-c-ink); color: var(--ntk-c-paper); font: 400 1.0625rem/1.4 var(--ntk-font-display); letter-spacing: .03em; text-transform: uppercase; }
@media (min-width: 720px) { .paid-line { font-size: 1.125rem; } }
.rumor-check--lead { margin-bottom: 18px; }
.rumor-check--lead p:last-child { margin-bottom: 0; }