/* nonolingo, galley design system.
 *
 * The house style on a paper ground: the galley proof palette from STATUS §1,
 * three typefaces, hairline rules and the red pen as the only accent. Nothing
 * here invents a colour: every surface is ink-at-low-alpha composited over
 * paper, so the palette stays two colours (paper + ink) plus the correction red.
 *
 * Contrast rule learned the hard way: on paper, ink at .42 alpha is decoration,
 * not text. Anything the reader has to read sits at .60 or above.
 */

:root {
  /* light mode: paper is the ground, ink is the text. Same two colours as the
   * sub-pages and the galley-proof palette, roles swapped. */
  --ground: #FBF8F1;
  --ground-2: #FFFFFF;
  --ink: #16130E;
  --ink-soft: rgba(22, 19, 14, .78);
  --ink-mute: rgba(22, 19, 14, .60);
  --ink-faint: rgba(22, 19, 14, .42);

  /* accents */
  --red: #DE3A1E;
  --red-deep: #B22B12;
  --red-wash: #FBEAE5;
  --pencil: #3D6E92;

  /* surfaces: paper over ink, never a new hex */
  --surface: rgba(22, 19, 14, .035);
  --surface-2: rgba(22, 19, 14, .06);
  --surface-3: rgba(22, 19, 14, .09);
  --hairline: rgba(22, 19, 14, .12);
  --hairline-2: rgba(22, 19, 14, .22);

  /* type: the reference stack. Inter carries every level; Geist Mono is kept
   * only for readouts and keycaps, the way the reference uses mono. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-accent: 'Instrument Serif', Georgia, serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  --wrap: 1140px;
  --shadow-float: 0 1px 2px rgba(22, 19, 14, .05), 0 24px 50px -28px rgba(22, 19, 14, .22);

  /* motion: plain `ease`/`linear` on interactive elements is what the
   * high-end-visual-design skill bans outright — real mass decelerates hard
   * at the end, so the curve is deliberately asymmetric. */
  --ease-spring: cubic-bezier(.32, .72, 0, 1);
  --ease-soft: cubic-bezier(.2, .7, .3, 1);

  /* depth: a single 1px border never reads as a physical object. A hairline
   * ring outside + a cream highlight along the top inner edge does, and both
   * are tinted with ink rather than black. */
  --ring-outer: 0 0 0 1px rgba(22, 19, 14, .07);
  --inset-top: inset 0 1px 0 rgba(255, 253, 248, .9);
  --shadow-card: 0 1px 2px rgba(22, 19, 14, .04), 0 14px 34px -22px rgba(22, 19, 14, .18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: 'cv11' 1, 'ss01' 1;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* paper grain over the ink, same trick as the light pages */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .07 0 0 0 0 .05 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the red pen bleeds a little at the top of the page */
body::after {
  content: "";
  position: absolute;
  top: -340px;
  left: 50%;
  width: 1300px;
  height: 800px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at center, rgba(222, 58, 30, .11), rgba(222, 58, 30, .07) 44%, transparent 72%);
  filter: blur(24px);
}

main, header, footer { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--red-wash); color: var(--red-deep); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 3px; }

/* ---------------------------------------------------------------- type ---- */

/* headings: semibold Inter with tight negative tracking, sized off the
   reference scale (46/80/96 for the hero, 38/56 for section titles). */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.04em; text-wrap: balance; }

.display {
  font-family: var(--font-display);
  font-size: clamp(46px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 600;
}
.display em { font-style: normal; font-weight: 600; color: var(--red); }

h2.section-title {
  font-size: clamp(38px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -.04em;
  font-weight: 600;
}
h2.section-title em { font-style: normal; font-weight: 600; color: var(--red); }

h3 { font-size: 16px; line-height: 1.35; letter-spacing: -.01em; font-weight: 600; }

.lede {
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* overline label, sized off the reference's micro label: 10.5px, 600, .18em */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.kicker {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .04em;
}
.meta-line {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--ink-mute);
  line-height: 1.7;
}
.dot-sep { color: var(--ink-faint); padding: 0 2px; }

/* ------------------------------------------------------------- layout ---- */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { width: 100%; max-width: 780px; margin: 0 auto; padding: 0 24px; }

/* macro-whitespace: minimalist-ui targets 96-128px between sections, so the
   clamp floor/ceiling sit above the old 56/92px band. .tight is a deliberate
   exception for paired sub-blocks that read as one section. */
section { padding: clamp(64px, 7.6vw, 112px) 0; }
section.tight { padding: clamp(36px, 4vw, 60px) 0; }

.section-head { margin-bottom: clamp(34px, 4.4vw, 56px); }
.section-head .kicker, .section-head .eyebrow { display: block; margin-bottom: 18px; }
.section-head .lede { margin-top: 20px; }

.rule { height: 1px; background: var(--hairline); border: 0; }

/* --------------------------------------------------------------- nav ---- */

.nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(251, 248, 241, .82);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--hairline);
}
.nav-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.wordmark {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.wordmark .no { color: var(--red); }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink-soft);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color .18s var(--ease-spring), background .18s var(--ease-spring);
}
.nav-links a:hover { color: var(--ink); background: var(--surface-2); }
/* current page marker: the nav is identical on 19 pages, so without this
   nothing tells you where you are. */
.nav-links a[aria-current="page"] { color: var(--ink); background: var(--surface-2); font-weight: 600; }
/* specificity guard: `.nav-links a` is (0,1,1) and would otherwise repaint the
   CTA label cream-on-cream, which renders as an empty white pill. */
/* the same specificity guard has to cover the button's type: without it the
   `.nav-links a` rule (0,1,1) also wins on font-size and weight. */
.nav-links .btn {
  margin-left: 12px;
  flex: none;
  color: var(--ground);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
}
.nav-links .btn:hover { color: var(--ground); }
.langsel {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 7px 9px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-left: 8px;
  flex: none;
}
.langsel:hover { border-color: var(--hairline-2); color: var(--ink); }

/* ------------------------------------------------------------ buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  padding: 13px 22px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease-spring), background .18s var(--ease-spring),
              color .18s var(--ease-spring), border-color .18s var(--ease-spring),
              box-shadow .18s var(--ease-spring);
}
.btn-primary { background: var(--ink); color: var(--ground); box-shadow: 0 10px 30px -14px rgba(22,19,14,.12); }
.btn-primary:hover { background: #241F17; transform: translateY(-1px); }
.btn-ghost { border-color: rgba(22, 19, 14, .22); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--ink-faint); transform: translateY(-1px); }
.btn-red { background: var(--red); color: var(--ink); }
.btn-red:hover { background: var(--red-deep); transform: translateY(-1px); }
/* press feedback: the skills want a physical click, not just a hover lift.
   .btn-*.hover already translateY(-1px), so :active returns to 0 and
   compresses slightly. transform only, no layout properties. */
.btn:active { transform: translateY(0) scale(.98); }
.btn-sm { padding: 9px 15px; font-size: 13.5px; }
.btn-lg { padding: 15px 27px; font-size: 16px; }
/* button-in-button: the trailing arrow gets its own circular housing sitting
   flush with the button's right inner padding, so the CTA reads as machined
   hardware rather than a label with a glyph stuck on the end. */
.btn .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  transition: transform .22s var(--ease-spring), background .22s var(--ease-spring);
}
.btn:has(.arrow) { padding-right: 13px; }
.btn-primary .arrow { background: rgba(251, 248, 241, .16); }
.btn-ghost .arrow { background: rgba(22, 19, 14, .07); }
.btn-red .arrow { background: rgba(22, 19, 14, .10); }
/* diagonal travel + a slight scale = internal kinetic tension on hover */
.btn:hover .arrow { transform: translate(2px, -1px) scale(1.06); }
.btn:active .arrow { transform: translate(1px, 0) scale(.98); }

.link-arrow {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color .18s var(--ease-spring), gap .22s var(--ease-spring);
}
.link-arrow:hover { color: var(--red); gap: 11px; }

/* --------------------------------------------------------------- hero ---- */

.hero { padding: clamp(60px, 7.6vw, 104px) 0 0; }
.hero .kicker { display: block; margin-bottom: 24px; }
.hero h1 { max-width: 15ch; }
.hero .lede { margin-top: 24px; max-width: 56ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-meta { margin-top: 24px; }

/* ------------------------------------------------------------ surfaces ---- */

.tile {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--ring-outer), var(--inset-top), var(--shadow-card);
  transition: background .3s var(--ease-spring), border-color .3s var(--ease-spring),
              transform .3s var(--ease-spring), box-shadow .3s var(--ease-spring);
}
.tile:hover {
  background: var(--surface-2);
  border-color: var(--hairline-2);
  transform: translateY(-2px);
  box-shadow: var(--ring-outer), var(--inset-top), 0 2px 4px rgba(22,19,14,.05), 0 22px 44px -24px rgba(22,19,14,.22);
}
.tile h3 { margin-bottom: 10px; }
.tile p { color: var(--ink-soft); font-size: 16px; line-height: 1.56; }
.tile .eyebrow { display: block; margin-bottom: 14px; }
.tile-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 18px;
}

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2 > .span-2, .grid-3 > .span-2 { grid-column: span 2; }

/* -------------------------------------------------------------- frames ---- */

.mac {
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline-2);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-float);
}
.mac-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(22, 19, 14, .03);
}
.mac-bar .lights { display: flex; gap: 6px; }
.mac-bar .lights i { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-3); display: block; }
.mac-bar .title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-mute);
  margin: 0 auto;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 10px;
}
.mac-bar .traffic-right { width: 41px; flex: none; }

/* -------------------------------------------------------------- popup ---- */

/* the real suggestion popup, rebuilt to scale */
.popup {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--hairline-2);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 44px -20px rgba(22, 19, 14, .22);
  overflow: hidden;
}
.popup-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.grip { display: flex; gap: 3px; margin-right: 2px; flex: none; }
.grip i { width: 2px; height: 12px; border-radius: 1px; background: var(--ink-faint); display: block; }
.keycap {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.5;
  flex: none;
  white-space: nowrap;
}
.keycap.dim { color: var(--ink-mute); }
.keycap.accent { color: var(--red); border-color: rgba(222, 58, 30, .26); background: rgba(222, 58, 30, .09); }
.popup-head .spacer { flex: 1 1 auto; min-width: 0; }
.popup-body { padding: 11px; display: grid; gap: 8px; }
.sug {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: rgba(22, 19, 14, .025);
}
.sug.selected { border-color: rgba(222, 58, 30, .30); background: rgba(222, 58, 30, .08); }
.sug-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 5px;
  flex: none;
  margin-top: 2px;
}
.sug-tag.fix { color: var(--ink-mute); background: var(--surface-2); border: 1px solid var(--hairline); }
.sug-tag.native { color: var(--red); background: rgba(222, 58, 30, .10); border: 1px solid rgba(222, 58, 30, .24); }
/* min-width:0 is what keeps the trailing keycap inside the card */
.sug-text { font-size: 14.5px; line-height: 1.5; color: var(--ink); flex: 1 1 auto; min-width: 0; }
.sug .keycap { align-self: flex-start; }
.sug-text .keep { color: var(--ink); }
.sug-text .wrong { color: var(--red); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 1.5px; }
.sug-text .right { color: var(--pencil); border-bottom: 1px solid rgba(61, 110, 146, .5); }

/* ------------------------------------------------------------- marquee ---- */

.marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  padding: 6px 0;
}
/* a real gradient scrim on top of the mask: masks are dropped by some
   compositors, and a hard-clipped word at the edge reads as a bug. */
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 110px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ground) 8%, rgba(251, 248, 241, 0)); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--ground) 8%, rgba(251, 248, 241, 0)); }
.marquee-track { display: flex; gap: 40px; width: max-content; animation: slide 52s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink-mute);
  white-space: nowrap;
}
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* -------------------------------------------------------------- stats ---- */

.stat { text-align: left; }
.stat .num {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 600;
  display: block;
}
.stat .num .unit { font-size: .48em; color: var(--ink-mute); letter-spacing: 0; }
.stat .label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 14px;
  display: block;
}
.stat .note { color: var(--ink-soft); font-size: 15.5px; margin-top: 10px; }

/* --------------------------------------------------------------- steps ---- */

.step { position: relative; padding-top: 30px; border-top: 1px solid var(--hairline); }
.step .n { position: absolute; top: -1px; left: 0; width: 26px; height: 2px; background: var(--red); }
.step .idx { font-family: var(--font-mono); font-size: 11px; color: var(--red); letter-spacing: .1em; }
.step h3 { margin: 12px 0 8px; }
.step p { color: var(--ink-soft); font-size: 16px; }

/* --------------------------------------------------------------- price ---- */

.price-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 30px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ring-outer), var(--inset-top), var(--shadow-card);
  transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-spring);
}
.price-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ring-outer), var(--inset-top), 0 2px 4px rgba(22,19,14,.05), 0 24px 48px -24px rgba(22,19,14,.24);
}
/* pricing.html builds its own cards with `.card` / `.nl-pro-card` in an inline
   <style>, and styles.css (loaded after this file) pins every `.card` to
   `box-shadow: var(--shadow-sm) !important`. So the depth has to be restated
   here with the same weight or the pricing page keeps its flat 1px border. */
.nl-pricing-grid > .card {
  box-shadow: var(--ring-outer), var(--inset-top), var(--shadow-card) !important;
  transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-spring);
}
.nl-pricing-grid > .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ring-outer), var(--inset-top), 0 2px 4px rgba(22,19,14,.05), 0 24px 48px -24px rgba(22,19,14,.24) !important;
}
@media (max-width: 900px) {
  /* the featured card is offset with a transform on desktop; below 900 it is
     reset, so the hover lift must not reintroduce it. */
  .nl-pricing-grid > .card:hover { transform: none; }
}
.price-card.featured { border-color: rgba(222, 58, 30, .28); background: rgba(222, 58, 30, .06); }
.price-card .badge {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
  display: block;
}
.price-card .amount {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  margin: 6px 0 4px;
}
.price-card .amount .per { font-family: var(--font-sans); font-size: 13px; letter-spacing: .01em; color: var(--ink-mute); }
.price-card .was { font-family: var(--font-sans); font-size: 13px; color: var(--ink-faint); text-decoration: line-through; margin-left: 8px; }
.price-card .sub { color: var(--ink-mute); font-family: var(--font-sans); font-size: 12.5px; letter-spacing: .01em; }
.price-card ul { list-style: none; margin: 24px 0 26px; display: grid; gap: 11px; }
.price-card li { display: flex; gap: 11px; font-size: 15.5px; color: var(--ink-soft); line-height: 1.45; }
.price-card li::before { content: "✓"; color: var(--red); font-family: var(--font-mono); font-size: 12px; flex: none; margin-top: 3px; }
.price-card .btn { margin-top: auto; }

/* ---------------------------------------------------------------- faq ---- */

.faq details { border-bottom: 1px solid var(--hairline); padding: 22px 0; }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--red);
  transition: transform .28s var(--ease-spring);
  flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { color: var(--ink-soft); font-size: 16.5px; padding: 14px 0 0; max-width: 72ch; }

/* -------------------------------------------------------------- footer ---- */

footer { border-top: 1px solid var(--hairline); padding: 54px 0 44px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.foot-grid h4 {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.foot-grid ul { list-style: none; display: grid; gap: 9px; }
.foot-grid a { color: var(--ink-soft); font-size: 15px; }
.foot-grid a:hover { color: var(--red); }
.foot-bottom {
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

/* --------------------------------------------------------------- misc ---- */

.lang-note {
  display: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  border: 1px solid var(--hairline);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  margin: 18px 0;
}

/* staggered entry: nothing mounts all at once — the cascade is what reads as
   choreography instead of a single fade. transform/opacity only, and the
   delay resets to 0 under reduced motion. Deliberately no blur here: the
   skill's blur-resolve variant would put a compositing layer on every one of
   the 19 reveals on the homepage, which its own perf guardrail forbids. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft); }
.reveal.in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .07s; }
.reveal:nth-child(3) { transition-delay: .14s; }
.reveal:nth-child(4) { transition-delay: .21s; }
.reveal:nth-child(n+5) { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; transition-delay: 0s; }
  .marquee-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------- responsive ---- */

@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 > .span-2 { grid-column: span 2; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .nav-links a:not(.nav-keep) { display: none; }
}
@media (max-width: 700px) {
  body { font-size: 17px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-3 > .span-2, .grid-2 > .span-2 { grid-column: span 1; }
  .hero h1 { max-width: none; }
  .hero-cta .btn { flex: 1 1 auto; }
  .foot-grid { grid-template-columns: 1fr; }
  .price-card { padding: 24px; }
  .nav-in { gap: 12px; }
}

/* below ~420px even guide + pricing + the selector + the button do not fit on
   one row, and the row was pushing the page ~8px wider than the screen. */
@media (max-width: 460px) {
  .nav-in { padding: 0 14px; gap: 8px; }
  .nav-links { gap: 0; }
  .nav-links a.nav-keep { display: none; }
  .nav-links .btn { padding: 8px 12px; font-size: 13px; }
  .wordmark { font-size: 18px; }
  .brand img { height: 26px; }
}

/* accessibility: keyboard users get past the 65px nav in one tab.
   Visually hidden until focused, then it sits over the nav bar. */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 60;
  padding: 10px 16px; border-radius: var(--r-sm); background: var(--ink);
  color: var(--ground); font-size: 14px; font-weight: 500; text-decoration: none;
  transition: top .16s cubic-bezier(.2, .7, .3, 1); }
/* :focus, not :focus-visible: the link sits off-screen, so it can never be
   reached by pointer — but the reveal must not depend on the browser's
   focus-visible heuristic, which programmatic focus does not satisfy. */
.skip-link:focus { top: 12px; }