/* Orthanc — marketing site
   Palette, type, and layout per brand/STYLE_GUIDE.md.
   Dark is the brand's home; light mode is the guest. */

:root {
  /* Core brand tokens (STYLE_GUIDE.md §2) */
  --obsidian: #0A1B20;
  --nightwatch: #17454E;
  --stone: #233A40;
  --moonlight: #7FB6BE;
  --lantern: #F0B254;
  --ember: #D68A22;
  --parchment: #F4F7F6;
  --ink: #122A30;

  /* Semantic — dark mode defaults */
  --bg: var(--obsidian);
  --bg-card: rgba(35, 58, 64, 0.35);
  --text: #EAF2F1;
  --text-2: #9FB8BB;
  --link: var(--moonlight);
  --accent: var(--lantern);
  --accent-hover: var(--ember);
  --accent-ink: #14181C;
  --amber-small: #FFDE9C;        /* small amber text on dark (§2) */
  --session-active: var(--lantern);
  --session-expired: #5C7B81;
  /* Cohort marks on the usage charts: the paid lane is the lit one, free is
     calm moonlight. Read from JS via getComputedStyle, so both modes work. */
  --cohort-full: var(--lantern);
  --cohort-free: var(--moonlight);
  --hairline: rgba(234, 242, 241, 0.12);
  --panel-hairline: rgba(230, 237, 243, 0.09);
  --glow-opacity: 0.8;

  /* Type (STYLE_GUIDE.md §3) — guide families lead; system stacks carry */
  --font-display: "Bricolage Grotesque", "Avenir Next Condensed", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, system-ui, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  color-scheme: dark light;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: var(--parchment);
    --bg-card: #FFFFFF;
    --text: var(--ink);
    --text-2: #4A6268;
    --link: #2C6E7B;             /* teal from icon-small.svg field; AA on parchment */
    --amber-small: var(--ember); /* small amber on light (§2) */
    --session-active: #B36F0E;
    --cohort-full: var(--ember);      /* amber needs to darken on parchment */
    --cohort-free: #2C6E7B;           /* moonlight is too pale on light */
    --hairline: rgba(18, 42, 48, 0.14);
    --glow-opacity: 0.5;
  }
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 26px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* The nightwatch gradient: only the background field, vertical, subtle (§2) */
body.dark-field {
  background: linear-gradient(to bottom, var(--nightwatch) -12%, var(--bg) 620px);
}

@media (prefers-color-scheme: light) {
  body.dark-field {
    background: linear-gradient(to bottom, #E3EDEC -12%, var(--bg) 620px);
  }
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--text);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
}

::selection {
  background: var(--lantern);
  color: var(--accent-ink);
}

.wrap {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

.section {
  padding-block: clamp(56px, 9vw, 104px);
}

.section + .section {
  border-top: 1px solid var(--hairline);
}

/* ---------- Type scale (STYLE_GUIDE.md §3) ---------- */

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 7vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 38px;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  text-wrap: balance;
}

h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
  margin-bottom: 8px;
}

p {
  max-width: 68ch;
}

.lede {
  color: var(--text-2);
  font-size: 19px;
  line-height: 29px;
}

.small {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-2);
}

/* Machine-shaped strings stay mono even inside display type (§3) */
h1 code {
  font-size: 0.82em;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ---------- Header ---------- */

.site-header {
  padding-block: 22px;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}

.wordmark img {
  width: 28px;
  height: 28px;
  display: block;
}

.site-nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  flex-wrap: wrap;
}

.site-nav a {
  font-size: 15px;
  color: var(--text-2);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--text);
}

/* ---------- Buttons ---------- */

.btn-lantern {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: 15px 26px;
  border-radius: 9px;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  cursor: pointer;
}

.btn-lantern:hover {
  background: var(--accent-hover);
  color: var(--accent-ink);
}

.btn-quiet {
  display: inline-block;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  padding: 14px 22px;
  border-radius: 9px;
  border: 1px solid var(--hairline);
  color: var(--text);
  text-decoration: none;
}

.btn-quiet:hover {
  border-color: var(--text-2);
  color: var(--text);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding-block: clamp(48px, 8vw, 96px) clamp(56px, 8vw, 88px);
  text-align: center;
}

/* The signature glow: one fixed radial lantern behind the hero (§5),
   with the sanctioned slow ember flicker. */
.hero::before {
  content: "";
  position: absolute;
  inset: -120px 0 auto 0;
  height: 640px;
  background: radial-gradient(ellipse 60% 55% at 50% 32%,
              rgba(240, 178, 84, 0.17), transparent 70%);
  opacity: var(--glow-opacity);
  pointer-events: none;
  animation: ember 6s ease-in-out infinite alternate;
}

@keyframes ember {
  from { opacity: calc(var(--glow-opacity) * 0.88); }
  to   { opacity: var(--glow-opacity); }
}

.hero > * {
  position: relative;
}

.hero h1 {
  max-width: 21ch;
  margin-inline: auto;
}

.hero .lede {
  margin: 22px auto 0;
  max-width: 58ch;
}

.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px;
}

/* ---------- Channel chooser (hero) ----------
   The App Store build and the direct .dmg are different products, not a
   recommended path and a fallback: one is sandboxed and drives Safari only, the
   other drives every browser. So the two cards are identical in weight, width,
   and row order — neither takes the lantern fill, because the hero's one amber
   element is the glow behind it (§2). The warm border arrives on hover, where
   it reads as the light coming on. */

.channels {
  margin: 34px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 320px));
  justify-content: center;
  gap: 16px;
  text-align: left;
}

.channel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}

/* An h2 for document order, not for the section voice: the display face at
   32px would out-shout the h1 three lines above it. */
.channel-name {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0;
  margin-bottom: 0;      /* the card's own gap spaces it; h2's 18px doubles up */
}

/* One fact per row, in the same order on both cards — browsers, updates,
   payment — so the comparison is read down the pair, not along a sentence. */
.channel-facts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-2);
  flex: 1;                          /* absorbs the slack so both buttons align */
}

/* Each row is one short fact; if one has to wrap, don't leave a single word
   stranded on the second line. */
.channel-facts li {
  text-wrap: pretty;
}

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

.channel .btn-quiet:hover {
  border-color: var(--accent);
}

/* MAS-COMING-SOON: temporary "coming soon" treatment for the Mac App Store card
   while the listing is in App Store review. Option A — quiet dim: the card stays in
   place at reduced opacity with a neutral pill and a non-interactive button, so the
   two-door layout holds and nothing draws the eye off the live Direct-download card.
   All colours are theme tokens, so it reads correctly in both dark and light mode.
   Delete this whole block when the App Store CTA goes live again. */

.channel--soon {
  opacity: 0.55;
}

/* The disabled App Store button: same shape as .btn-quiet but muted and inert. It is
   a <span role="link" aria-disabled="true">, so it is not focusable or clickable and
   keeps no hover affordance. */
.btn-disabled {
  color: var(--text-2);
  background: transparent;
  cursor: not-allowed;
}

.btn-disabled:hover {
  border-color: var(--hairline);   /* no lift on hover — it is not actionable */
  color: var(--text-2);
}

/* "Coming soon" chip beside the card title / on the pricing button. Neutral hairline
   fill so it reads as a state, not a call to action, on either background. */
.soon-pill {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  padding: 3px 8px;
  margin-left: 8px;
  border-radius: 999px;
  background: var(--hairline);
  color: var(--text-2);
  vertical-align: middle;
}


@media (max-width: 640px) {
  .channels {
    grid-template-columns: minmax(0, 340px);
  }
}

.hero-terms {
  margin: 16px auto 0;
  font-family: var(--font-mono);
  font-size: 13px;
  /* Overrides the global `p { max-width: 68ch }`, which at mono 13px is ~530px
     and forced the price line to break with one fact left over. */
  max-width: 680px;
}

/* Each fact is a span, so a line can only break on a separator. Without this
   the mono line wrapped between two words of the same phrase, which reads as a
   layout accident rather than a list. */
.hero-terms span {
  white-space: nowrap;
}

.hero-terms .sep {
  color: var(--text-2);
  opacity: 0.6;
}

/* ---------- The config panel (hero centerpiece) ----------
   ~/.aws/config on the left, the Orthanc popup it becomes on the right.
   Always dark-fielded, in both color schemes — it is brand artwork. */

.panel {
  margin: clamp(40px, 6vw, 64px) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0 18px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 20px;
}

.pane {
  background: linear-gradient(160deg, #11272E, var(--obsidian) 70%);
  border: 1px solid var(--stone);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(4, 12, 15, 0.45);
  overflow: hidden;
  color: #E6EDF3;
}

.pane-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--panel-hairline);
  color: #8FA6AA;
  font-size: 11.5px;
}

.pane-head .bolt {
  color: var(--lantern);
}

.pane-head strong {
  color: #E6EDF3;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pane-config pre {
  padding: 14px 16px 18px;
  overflow-x: auto;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: #93A8AC;
}

.ini-b {
  color: var(--lantern); /* the amber brackets — popup.css's signature */
}

.ini-h {
  color: #E6EDF3;
  font-weight: 600;
}

.ini-v {
  color: #C4D3D5;
}

.panel-arrow {
  align-self: center;
  color: var(--session-expired);
  font-size: 20px;
  user-select: none;
}

/* Popup rendition — faithful to Extension/src/popup-*.css */
.p-row {
  padding: 12px 16px 13px;
  border-bottom: 1px solid var(--panel-hairline);
}

.p-row:last-child {
  border-bottom: none;
}

.p-line {
  display: flex;
  align-items: center;
  gap: 9px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-active {
  background: #3fb950;
  box-shadow: 0 0 5px rgba(63, 185, 80, 0.5);
}

.dot-expired {
  background: #f85149;
}

.p-name {
  font-weight: 600;
  font-size: 13px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-name strong {
  font-weight: 700;
}

.p-name .ini-b {
  font-weight: 400;
}

.p-star {
  color: #f59e0b;
  font-size: 13px;
  flex-shrink: 0;
}

/* A locked (beyond-the-free-two) profile on the All tab: a muted padlock in
   place of the star, echoing the "Unlock unlimited profiles" footer. */
.p-lock {
  color: #565e68;
  font-size: 12px;
  flex-shrink: 0;
}

.p-meta {
  margin: 5px 0 0 16px;
  color: #8b949e;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Assume-role profiles show "via <source_profile>" after the account · role,
   the one place the popup reveals that this profile is reached by chaining
   through another. Amber, faint, so it reads as an annotation, not a value. */
.p-chain {
  color: var(--lantern);
  opacity: 0.75;
  font-size: 10.5px;
  margin-left: 4px;
}

.p-region {
  margin: 2px 0 0 16px;
  color: #565e68;
  font-size: 11px;
}

.p-flag {
  font-family: "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 11px;
  margin-right: 5px;
}

.p-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}

.p-btn {
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 5px;
  border: 1px solid transparent;
}

.p-btn-console {
  background: #f59e0b;
  color: #14181c;
}

.p-btn-login {
  border-color: var(--panel-hairline);
  color: #8b949e;
}

/* Popup footer — mimics the license-footer from the real extension */
.p-footer {
  padding: 10px 16px 12px;
  border-top: 1px solid var(--panel-hairline);
  background: rgba(23, 28, 34, 0.6);
}

.p-footer-context {
  display: block;
  color: #8b949e;
  font-size: 11px;
  margin-bottom: 8px;
}

.p-btn-unlock {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  background: #f59e0b;
  color: #14181c;
  border: none;
}

/* Popup tab bar (Favourites / All) */
.p-tabs {
  display: flex;
  gap: 2px;
  padding: 0 12px;
  border-bottom: 1px solid var(--panel-hairline);
}

.p-tab {
  padding: 8px 8px 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: #8b949e;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: default;
}

.p-tab-active {
  color: #E6EDF3;
  border-bottom-color: #f59e0b;
}

.p-tab-star {
  color: #8b949e;
  margin-right: 5px;
}

/* Refresh icon in popup header */
.pane-refresh {
  margin-left: auto;
  color: #8b949e;
  font-size: 11px;
}

@media (max-width: 819px) {
  .panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    justify-items: stretch;
  }

  .panel-arrow {
    justify-self: center;
    transform: rotate(90deg);
  }
}

/* ---------- The loop (pain) ---------- */

.terminal {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 22px;
  background: var(--obsidian);
  border: 1px solid var(--stone);
  border-radius: 10px;
  padding: 16px 18px;
  color: #C4D3D5;
  overflow-x: auto;
  max-width: 640px;
  margin-bottom: 26px;
}

.terminal .prompt {
  color: var(--moonlight);
}

.terminal .dim {
  color: #7E9296;
}

/* ---------- How it works ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 40px;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
}

.steps li::before {
  content: counter(step) ".";
  display: block;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--amber-small);
  margin-bottom: 10px;
}

.steps p {
  margin-top: 6px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 25px;
}

@media (max-width: 719px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
}

/* ---------- Fact grid (CLI interop, multi-session, status, favourites) ---------- */

/* 2x2 rather than 3-up: the fourth card (favourites) would otherwise orphan a
   row on its own. */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 36px;
}

.fact {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 24px 22px;
}

.fact h3 {
  font-size: 18px;
  line-height: 24px;
}

.fact p {
  color: var(--text-2);
  font-size: 15px;
  line-height: 23px;
}

@media (max-width: 719px) {
  .facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Browsers ---------- */

.browser-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  list-style: none;
}

.browser-row li {
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 8px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--text);
}

.browser-row li.more {
  color: var(--text-2);
  border-style: dashed;
}

.store-links {
  margin-top: 26px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 15px;
}

/* ---------- Privacy ---------- */

.privacy-list {
  list-style: none;
  margin-top: 30px;
  max-width: 74ch;
}

.privacy-list li {
  padding: 14px 0 14px 26px;
  position: relative;
  border-top: 1px solid var(--hairline);
  color: var(--text-2);
  font-size: 16px;
  line-height: 25px;
}

.privacy-list li:last-child {
  border-bottom: 1px solid var(--hairline);
}

/* The keyhole bullet: lit, because the light is the only thing that leaves */
.privacy-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 24px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--session-active);
}

.privacy-list strong {
  color: var(--text);
  font-weight: 600;
}

.privacy-more {
  margin-top: 20px;
}

/* ---------- Pricing ---------- */

.price-card {
  margin-top: 36px;
  max-width: 560px;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: clamp(28px, 5vw, 44px);
}

.price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 8vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* "one-time" does not fit beside the number at 64px, so it gets its own line on
   purpose — aligned under the price, not indented by a margin that only made
   sense inline. A wrapped fragment with a stray offset reads as a bug. */
.price small {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  color: var(--text-2);
  letter-spacing: 0;
}

.price-points {
  list-style: none;
  margin: 24px 0 30px;
}

.price-points li {
  padding: 9px 0;
  border-top: 1px solid var(--hairline);
  font-size: 16px;
  color: var(--text-2);
}

.price-points li strong {
  color: var(--text);
  font-weight: 600;
}

.price-note {
  margin-top: 16px;
}

/* Buy spans the row it is the point of; the two downloads sit beneath it at
   exactly equal width, because they are the same choice as the hero's pair and
   neither is the recommended one. */
.price-cta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.price-cta .btn-lantern {
  grid-column: 1 / -1;
  text-align: center;
}

.price-cta .btn-quiet {
  text-align: center;
}

@media (max-width: 520px) {
  .price-cta {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- FAQ ---------- */

.faq {
  margin-top: 12px;
  max-width: 74ch;
}

.faq details {
  border-top: 1px solid var(--hairline);
}

.faq details:last-child {
  border-bottom: 1px solid var(--hairline);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 34px 18px 0;
  font-weight: 600;
  font-size: 17px;
  position: relative;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 16px;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--amber-small);
}

.faq details[open] summary::after {
  content: "\2013";
}

.faq details p {
  padding: 0 0 20px;
  color: var(--text-2);
}

.faq details p + p {
  margin-top: -8px;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: 40px 56px;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  align-items: baseline;
}

.site-footer nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.site-footer a {
  font-size: 15px;
}

.footer-tag {
  width: 100%;
  margin-top: 6px;
}

/* ---------- Privacy policy page ---------- */

.prose {
  max-width: 74ch;
  padding-block: clamp(40px, 6vw, 72px) clamp(64px, 9vw, 104px);
}

.prose h1 {
  font-size: clamp(34px, 5vw, 46px);
  margin-bottom: 14px;
}

.prose h2 {
  font-size: 26px;
  line-height: 32px;
  margin: 44px 0 14px;
}

.prose p,
.prose ul {
  margin-bottom: 16px;
  color: var(--text);
}

.prose ul {
  padding-left: 24px;
}

.prose li {
  margin-bottom: 8px;
}

.prose .effective {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 32px;
}

.prose hr {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 40px 0 24px;
}

.prose em {
  color: var(--text-2);
}

/* ---------- Usage / stats page ---------- */

.stats-hero {
  position: relative;
  text-align: center;
  padding-block: clamp(40px, 7vw, 80px) clamp(32px, 5vw, 56px);
}

/* The same lantern glow as the home hero, behind the install figure. */
.stats-hero::before {
  content: "";
  position: absolute;
  inset: 40px 0 auto 0;
  height: 520px;
  background: radial-gradient(ellipse 52% 60% at 50% 46%,
              rgba(240, 178, 84, 0.16), transparent 70%);
  opacity: var(--glow-opacity);
  pointer-events: none;
  animation: ember 6s ease-in-out infinite alternate;
}

.stats-hero > * {
  position: relative;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-small);
  margin-bottom: 14px;
}

.stats-hero h1 {
  max-width: 18ch;
  margin-inline: auto;
}

.stats-hero .lede {
  margin: 20px auto 0;
  max-width: 60ch;
}

/* Installs and conversion rate sit side by side, but they are not peers:
   installs is the lit figure, conversion is stone. One amber per view (§2). */
.stats-figures {
  margin-top: clamp(36px, 6vw, 64px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: clamp(28px, 6vw, 72px);
}

/* The signature figure: installs, glowing. The one big amber moment. */
.figure-installs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.figure-quiet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 22ch;
  text-align: center;
}

.figure-number-sm {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 7vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.figure-note {
  font-family: var(--font-mono);
  color: var(--text-2);
}

.figure-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(64px, 15vw, 132px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--lantern);
  text-shadow: 0 0 44px rgba(240, 178, 84, 0.35);
  font-variant-numeric: tabular-nums;
}

.figure-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-2);
}

/* Chart containers */
.chart {
  margin-top: 28px;
  width: 100%;
  min-height: 220px;
}

.chart svg {
  display: block;
  overflow: visible;
}

.chart-empty {
  color: var(--text-2);
  font-size: 15px;
  padding: 40px 0;
  text-align: center;
  border: 1px dashed var(--hairline);
  border-radius: 12px;
}

.chart-caption {
  margin-top: 14px;
  font-family: var(--font-mono);
}

/* Two-series legend. Lit vs quiet, matching the SVG fills exactly. */
.chart-legend {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  color: var(--text-2);
}

.chart-legend .swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.chart-legend .swatch:not(:first-child) {
  margin-left: 10px;
}

.swatch-lit {
  background: var(--cohort-full);
}

.swatch-quiet {
  background: var(--cohort-free);
}

.chart-caption span {
  color: var(--text);
}

.stats-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

@media (max-width: 819px) {
  .stats-two-col {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Version split — horizontal bars */
.bars {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.vbar {
  display: grid;
  grid-template-columns: minmax(64px, auto) 1fr minmax(72px, auto);
  align-items: center;
  gap: 12px;
}

.vbar-name {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text);
}

.vbar-track {
  height: 12px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  overflow: hidden;
}

.vbar-fill {
  display: block;
  height: 100%;
  background: var(--stone);
  transition: width 0.7s ease-out;
}

.vbar-lead .vbar-fill {
  background: var(--lantern);
}

.vbar-val {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-2);
  text-align: right;
  white-space: nowrap;
}

.stats-generated {
  margin-top: 28px;
  font-family: var(--font-mono);
}

/* ---------- License / recovery pages (success.html, recover.html) ---------- */

/* Container that scopes the h1 size and max-width for both pages.
   On success.html this is #license-output itself; on recover.html it is
   a wrapper div around the form and #license-output. */
.license-content {
  max-width: 600px;
}

/* Slightly smaller h1 than the hero — this is a receipt, not a landing. */
.license-content h1 {
  font-size: clamp(28px, 4.5vw, 40px);
  line-height: 1.1;
  margin-bottom: 20px;
}

/* The one Lantern element on the success page. */
.license-key-block {
  margin: 28px 0;
}

.license-key-label {
  margin-bottom: 8px;
}

.license-key {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--lantern);
  border-radius: 10px;
  padding: 14px 18px;
  background: var(--bg-card);
  margin-bottom: 8px;
}

.license-key code {
  font-family: var(--font-mono);
  font-size: 17px;
  flex: 1;
  word-break: break-all;
  color: var(--text);
  letter-spacing: 0.04em;
}

/* Copy button sits inside the amber key block; reset button defaults and
   suppress the btn-quiet border so there is no nested border inside the
   lantern-coloured box. */
.btn-copy {
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 14px;
  border-color: transparent;
  text-align: center;
}

/* Invisible zero-height copy of the widest label ("Copied") keeps the button
   the same width in both states, so the swap never rewraps the key text. */
.btn-copy::after {
  content: "Copied";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.license-steps {
  margin: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.license-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Smaller h2 for the numbered steps — these are labels, not headings. */
.license-step h2 {
  font-size: 20px;
  line-height: 26px;
  margin-bottom: 0;
}

.license-statement {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}

/* Recovery page form */
.recover-form {
  margin: 28px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
}

.recover-form label {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-2);
}

.recover-input {
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  background: var(--bg-card);
  color: var(--text);
  width: 100%;
}

.recover-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: transparent;
}

/* ---------- Release notes (changelog.html) ---------- */

.release {
  padding: 28px 0;
  border-top: 1px solid var(--hairline);
}

.release:last-of-type {
  border-bottom: 1px solid var(--hairline);
}

/* Version number and date on one baseline: the version leads, the date is a
   quiet mono annotation to its right. */
.release-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.release-head h2 {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 32px;
  margin: 0;
}

.release-date {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-2);
}

.release-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  max-width: 74ch;
}

/* Amber keyhole bullet, the same one the privacy list uses, so the release
   items read as belonging to the same site. */
.release-list li {
  position: relative;
  padding: 8px 0 8px 26px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 25px;
}

.release-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 17px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--session-active);
}

.release-list strong {
  color: var(--text);
  font-weight: 600;
}

/* ---------- Motion ---------- */

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

  .hero::before,
  .stats-hero::before {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}