/* ===========================================================================
   Blue Penguin Linux Prep — marketing site
   "Arctic Terminal", carried over from the app.

   The rule the app lives by, kept here: monospace for anything the system
   produced (output, states, counts, labels), the sans face for anything a
   human wrote. Green and red are pass/fail semantics only — never decoration.
   =========================================================================== */

@font-face { font-family: Plex; src: url(fonts/IBMPlexSans-Regular.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Plex; src: url(fonts/IBMPlexSans-Medium.ttf) format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Plex; src: url(fonts/IBMPlexSans-SemiBold.ttf) format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: Plex; src: url(fonts/IBMPlexSans-Bold.ttf) format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: PlexMono; src: url(fonts/IBMPlexMono-Regular.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: PlexMono; src: url(fonts/IBMPlexMono-Medium.ttf) format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: PlexMono; src: url(fonts/IBMPlexMono-SemiBold.ttf) format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: PlexMono; src: url(fonts/IBMPlexMono-Bold.ttf) format('truetype'); font-weight: 700; font-display: swap; }

:root {
  /* Palette lifted from the app's AppColors. */
  --void:     #070C16;
  --terminal: #0B1120;
  --panel:    #0E1A2B;
  --edge:     #1E293B;
  --ice:      #7DD3FC;  /* prompt — the signature accent */
  --action:   #38BDF8;
  --pass:     #4ADE80;
  --fail:     #F87171;
  --comment:  #94A3B8;
  --text:     #E2E8F0;
  --dim:      color-mix(in oklab, var(--comment) 82%, var(--void));

  --sans: Plex, ui-sans-serif, system-ui, sans-serif;
  --mono: PlexMono, ui-monospace, SFMono-Regular, monospace;

  --shell-w: 1240px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 62ch;
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font: 400 clamp(1rem, 0.96rem + 0.2vw, 1.0625rem)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient: a single cold light source behind the hero. One effect, not five. */
body::before {
  content: '';
  position: fixed;
  inset: -30vh -10vw auto;
  height: 90vh;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 22% 12%, color-mix(in oklab, var(--action) 16%, transparent), transparent 70%),
    radial-gradient(45% 45% at 82% 0%, color-mix(in oklab, var(--ice) 10%, transparent), transparent 72%);
  pointer-events: none;
}

img { max-width: 100%; display: block; }
code { font: 500 0.92em var(--mono); color: var(--ice); }

a { color: var(--action); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ice); color: var(--void);
  padding: .6rem 1rem; font: 600 .85rem var(--mono);
}
.skip:focus { left: 1rem; top: 1rem; z-index: 99; }

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

.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklab, var(--void) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid color-mix(in oklab, var(--edge) 70%, transparent);
}
.nav__in {
  max-width: var(--shell-w); margin-inline: auto;
  padding: .8rem var(--gutter);
  display: flex; align-items: center; gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.brand img { border-radius: 8px; }
.brand__name { font: 700 1rem/1 var(--sans); letter-spacing: -0.01em; }
.brand__meta { font: 400 .8rem/1 var(--mono); color: var(--comment); }
.nav__links { margin-left: auto; display: flex; gap: 1.6rem; }
.nav__links a {
  font: 500 .875rem var(--sans); color: var(--comment);
  text-decoration: none; transition: color .18s;
}
.nav__links a:hover { color: var(--text); }

@media (max-width: 680px) {
  .brand__meta, .nav__links { display: none; }
  .nav__in > .btn { margin-left: auto; }
}

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

.eyebrow {
  font: 600 .75rem/1 var(--mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ice); margin: 0 0 1.4rem;
}
.display {
  margin: 0;
  font: 700 clamp(2.25rem, 1.3rem + 4.2vw, 4.25rem)/1.04 var(--sans);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.display em { font-style: normal; color: var(--ice); }

.h2 {
  margin: 0;
  font: 700 clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem)/1.14 var(--sans);
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.h2--wide { max-width: 22ch; margin-bottom: 2.5rem; }

.lede {
  margin: 1.5rem 0 0; max-width: 48ch;
  font-size: 1.08rem; color: color-mix(in oklab, var(--text) 80%, var(--comment));
}
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.15rem; color: color-mix(in oklab, var(--text) 76%, var(--comment)); }
.prose p:last-child { margin-bottom: 0; }
.prose .pull {
  margin-top: 1.6rem; padding-left: 1.1rem;
  border-left: 2px solid var(--ice);
  color: var(--text); font-weight: 500;
}
.prose .honest {
  border: 1px solid var(--edge); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; background: color-mix(in oklab, var(--panel) 60%, transparent);
}
.prose .honest b { color: var(--text); }
.quiet { color: var(--comment); }

/* Shell-comment section headings, exactly as the app labels its sections. */
.shell {
  margin: 0 0 1.6rem;
  font: 500 .8rem/1 var(--mono);
  color: var(--comment);
  letter-spacing: .02em;
}

.tag {
  display: inline-block;
  font: 700 .8rem/1 var(--mono);
  color: var(--void); background: var(--ice);
  padding: .32rem .5rem; border-radius: 6px;
}
.tag--lg { font-size: 1.5rem; padding: .45rem .7rem; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 .9rem/1 var(--sans);
  padding: .85rem 1.4rem; border-radius: 10px;
  text-decoration: none; border: 1px solid transparent;
  transition: transform .16s ease, background .18s, border-color .18s;
}
.btn--sm { padding: .55rem .9rem; font-size: .82rem; }
.btn--primary { background: var(--ice); color: var(--void); }
.btn--primary:hover { background: #A5E3FF; transform: translateY(-2px); }
.btn--ghost { border-color: var(--edge); color: var(--comment); background: transparent; }
.nav .btn--sm:not(.btn--primary) { background: var(--ice); color: var(--void); }
.is-disabled { cursor: not-allowed; opacity: .72; }

.cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.2rem; }
.cta--center { justify-content: center; }
.cta__note {
  margin: 1.1rem 0 0;
  font: 400 .85rem var(--mono); color: var(--comment);
}

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

.hero { padding: clamp(3rem, 7vw, 6.5rem) var(--gutter) clamp(3rem, 6vw, 5rem); }
.hero__grid {
  max-width: var(--shell-w); margin-inline: auto;
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 1020px) {
  .hero__grid { grid-template-columns: 1.02fr 1fr; }
}

/* ---------- terminal panel ---------- */

.term {
  background: var(--terminal);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / .85);
}
.term--flat { box-shadow: none; }
.term__bar {
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem .85rem;
  background: color-mix(in oklab, var(--void) 60%, var(--terminal));
  border-bottom: 1px solid var(--edge);
}
.dots { display: flex; gap: .35rem; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--edge); }
.dots i:first-child { background: color-mix(in oklab, var(--fail) 80%, transparent); }
.dots i:nth-child(2) { background: #FBBF24; }
.dots i:last-child { background: color-mix(in oklab, var(--pass) 80%, transparent); }
.term__title { font: 400 .75rem var(--mono); color: var(--comment); }
.term__body { padding: 1.1rem 1.15rem 1.3rem; }
.term__caption {
  margin: .9rem 0 0; font: 400 .8rem var(--mono); color: var(--dim);
}

.line { margin: 0 0 .7rem; font: 500 .85rem/1.6 var(--mono); }
.line .p { color: var(--ice); font-weight: 700; }
.line .c { color: var(--action); }
.line .d { color: var(--comment); margin-right: .45rem; }
.line--big { font-size: clamp(.95rem, .8rem + .6vw, 1.35rem); margin-bottom: 1rem; }

/* the grading run */
.grade { display: grid; gap: .28rem; min-height: 15.5rem; }
.grade__row {
  display: flex; align-items: baseline; gap: .55rem;
  font: 400 clamp(.72rem, .62rem + .34vw, .84rem)/1.55 var(--mono);
  opacity: 0; transform: translateY(4px);
  animation: rowIn .28s ease forwards;
}
@keyframes rowIn { to { opacity: 1; transform: none; } }
.grade__tag { flex: none; font-weight: 700; }
.grade__tag--ok { color: var(--pass); }
.grade__tag--no { color: var(--fail); }
.grade__name { color: color-mix(in oklab, var(--text) 78%, var(--comment)); }
.grade__dots { flex: 1; border-bottom: 1px dotted var(--edge); transform: translateY(-.25rem); min-width: 1rem; }
.grade__res { flex: none; color: var(--comment); }

.grade__rule { height: 1px; background: var(--edge); margin: .55rem 0; }
.grade__score {
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
  font: 700 .85rem var(--mono);
}
.grade__score .k { color: var(--comment); font-weight: 400; }
.grade__score .bad { color: var(--fail); }

.caret {
  display: inline-block; width: .58em; height: 1.05em;
  background: var(--ice); vertical-align: -.16em; margin-left: .18em;
  animation: blink 1.05s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- bands ---------- */

.band {
  padding: clamp(3.5rem, 7vw, 6.5rem) var(--gutter);
  max-width: var(--shell-w); margin-inline: auto;
}
/* Tinted bands bleed to the viewport edge, so their content is re-constrained
   to the *inner* width of a normal band — otherwise tinted sections sit two
   gutters wider than the ones above and below, and the left edge visibly
   steps in and out as you scroll. */
.band--tint {
  max-width: none;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--panel) 55%, transparent) 18% 82%, transparent);
}
.band--tint > * {
  max-width: calc(var(--shell-w) - 2 * var(--gutter));
  margin-inline: auto;
}

.split { display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---------- facts ---------- */

.facts {
  list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0;
  display: grid; gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge); border-radius: var(--radius);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.facts li {
  background: var(--void);
  padding: 1.5rem 1.4rem;
  display: flex; flex-direction: column; gap: .45rem;
}
.facts b {
  font: 700 clamp(1.9rem, 1.4rem + 1.3vw, 2.6rem)/1 var(--mono);
  color: var(--ice); letter-spacing: -0.02em;
}
.facts span { font-size: .875rem; color: var(--comment); }

/* ---------- quiz ---------- */

.quiz {
  border: 1px solid var(--edge); border-radius: var(--radius);
  background: var(--panel); padding: clamp(1.25rem, 3vw, 2rem);
  max-width: 760px;
}
.quiz__q { margin: 0 0 1.4rem; font-size: 1.05rem; font-weight: 500; }
.quiz__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.quiz__opts button {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--terminal); color: var(--text);
  border: 1px solid var(--edge); border-radius: 10px;
  padding: .85rem 1rem;
  font: 400 clamp(.74rem, .66rem + .3vw, .85rem)/1.5 var(--mono);
  transition: border-color .16s, background .16s, transform .16s;
}
.quiz__opts button:hover:not(:disabled) {
  border-color: var(--action); transform: translateX(3px);
}
.quiz__opts button:disabled { cursor: default; }
.quiz__opts button.is-right { border-color: var(--pass); color: var(--pass); background: color-mix(in oklab, var(--pass) 9%, var(--terminal)); }
.quiz__opts button.is-wrong { border-color: var(--fail); color: var(--fail); background: color-mix(in oklab, var(--fail) 9%, var(--terminal)); }
.quiz__opts button.is-muted { opacity: .45; }

.quiz__ans { margin-top: 1.4rem; border-top: 1px solid var(--edge); padding-top: 1.2rem; }
.quiz__verdict { margin: 0 0 .7rem; font: 700 .95rem var(--mono); }
.quiz__verdict.ok { color: var(--pass); }
.quiz__verdict.no { color: var(--fail); }
.quiz__why { margin: 0; font-size: .95rem; color: color-mix(in oklab, var(--text) 76%, var(--comment)); }
.quiz__why b { color: var(--ice); font: 600 .92em var(--mono); }
.quiz__again {
  margin-top: 1.2rem; cursor: pointer;
  background: transparent; color: var(--comment);
  border: 1px solid var(--edge); border-radius: 8px;
  padding: .5rem .9rem; font: 500 .8rem var(--mono);
}
.quiz__again:hover { color: var(--text); border-color: var(--action); }

/* ---------- inside ---------- */

.inside { display: grid; gap: clamp(1.6rem, 3.5vw, 2.5rem); }
@media (min-width: 960px) { .inside { grid-template-columns: 1.05fr 1fr; align-items: start; } }

.tree {
  margin: 0; overflow-x: auto;
  font: 400 clamp(.72rem, .64rem + .3vw, .82rem)/1.75 var(--mono);
  color: color-mix(in oklab, var(--text) 82%, var(--comment));
}
.tree .p { color: var(--ice); font-weight: 700; }
.tree .c { color: var(--comment); }
.tree .d { color: var(--comment); }
.tree .ok { color: var(--pass); }

.units { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: var(--radius); overflow: hidden; }
.units li { background: var(--void); padding: 1.25rem 1.35rem; font-size: .95rem; color: color-mix(in oklab, var(--text) 74%, var(--comment)); }
.units b { display: block; margin-bottom: .35rem; color: var(--text); font: 600 .95rem var(--sans); }

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

.pricecard {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--ice);
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in oklab, var(--ice) 8%, var(--panel)), var(--panel));
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  max-width: 620px;
}
.pricecard__head { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.pricecard__note { font: 400 .82rem var(--mono); color: var(--comment); }
.checks { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .6rem; }
.checks li { position: relative; padding-left: 1.6rem; font-size: .95rem; }
.checks li::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--pass); font: 700 .9rem var(--mono);
}
.pricecard .cta { margin-top: 1.9rem; }

/* ---------- close ---------- */

.close { text-align: center; }
.close .line--big { display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: center; }
.close__sub {
  margin: .4rem 0 0;
  font: 700 clamp(1.5rem, 1.1rem + 1.7vw, 2.3rem)/1.2 var(--sans);
  letter-spacing: -0.028em;
}

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

.foot { border-top: 1px solid var(--edge); background: var(--terminal); }
.foot__in { max-width: var(--shell-w); margin-inline: auto; padding: 2.5rem var(--gutter); display: grid; gap: 1rem; }
.foot__legal { margin: 0; max-width: 62ch; font-size: .85rem; color: var(--comment); }
.foot__meta { margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; font: 400 .82rem var(--mono); color: var(--comment); }
.foot__meta a { color: var(--comment); }
.foot__meta a:hover { color: var(--ice); }
.foot__fine { margin: 0; font-size: .75rem; color: var(--dim); }

/* ---------- scroll reveal ---------- */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .grade__row { opacity: 1; transform: none; animation: none; }
  .caret { animation: none; }
  .btn:hover, .quiz__opts button:hover:not(:disabled) { transform: none; }
}

/* ---------- document pages (privacy) ----------
   Deliberately quieter than the landing page. A policy is read, not performed:
   one terminal panel for the summary, then prose at a comfortable measure. */

.doc { max-width: 760px; margin-inline: auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) 4rem; }
.doc__title { margin: 0; font: 700 clamp(2rem, 1.5rem + 2vw, 2.75rem)/1.1 var(--sans); letter-spacing: -0.03em; }
.doc__sub { margin: .7rem 0 2.2rem; font: 400 .85rem var(--mono); color: var(--comment); }

/* The whole policy in one line, said the way the app would say it. */
.doc__summary { margin-bottom: 2.6rem; }
.doc__summary .ok { color: var(--pass); font-weight: 700; }

.doc h2 {
  margin: 2.4rem 0 .8rem;
  font: 500 .8rem/1 var(--mono);
  color: var(--comment);
  letter-spacing: .02em;
}
.doc h2::before { content: '# '; }
.doc p, .doc li { color: color-mix(in oklab, var(--text) 78%, var(--comment)); }
.doc p { margin: 0 0 1.1rem; }
.doc strong { color: var(--text); font-weight: 600; }
.doc ul { margin: 0 0 1.1rem; padding-left: 1.2rem; }
.doc li { margin-bottom: .4rem; }
.doc__back {
  display: inline-block; margin-bottom: 2rem;
  font: 500 .82rem var(--mono); color: var(--comment); text-decoration: none;
}
.doc__back:hover { color: var(--ice); }