/* ==========================================================================
   Materia: Elements — materiaelements.com
   Design tokens mirror the Materia iOS app's design system.
   ========================================================================== */

:root {
  /* Canvas ------------------------------------------------------------- */
  --bg: #0d0d14;
  --bg-elevated: #14141f;
  --bg-raised: #1a1a26;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-hover: rgba(255, 255, 255, 0.075);

  /* Text --------------------------------------------------------------- */
  --text: #f7f8fb;
  --text-secondary: rgba(247, 248, 251, 0.66);
  --text-tertiary: rgba(247, 248, 251, 0.54);

  /* Accent ------------------------------------------------------------- */
  --accent: #73a6ff;
  --accent-bright: #9dc0ff;
  --accent-deep: #3f6ed0;
  --violet: #9973f2;

  /* Lines -------------------------------------------------------------- */
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* Spacing (8-pt derived) --------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radii -------------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Measure ------------------------------------------------------------ */
  --gutter: clamp(20px, 5vw, 40px);
  --width-content: 1120px;
  --width-narrow: 720px;
  --width-prose: 68ch;

  /* Motion ------------------------------------------------------------- */
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.62s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Section rhythm ----------------------------------------------------- */
  --section-y: clamp(80px, 11vw, 160px);

  /* Element category palette (from the app's ElementCategoryColor) ------ */
  --cat-alkali: #f28c4d;
  --cat-alkaline: #e6bf4d;
  --cat-transition: #66a6f2;
  --cat-post-transition: #73ccbf;
  --cat-metalloid: #b380e6;
  --cat-nonmetal: #66d98c;
  --cat-halogen: #59bfd9;
  --cat-noble: #9973f2;
  --cat-lanthanide: #d999b3;
  --cat-actinide: #e66680;

  color-scheme: dark;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.08;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-bright);
}

ul,
ol {
  margin: 0;
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
}

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

/* Skip-link destinations take focus so the skip actually moves the keyboard,
   but they are containers rather than controls, so they draw no ring. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
}

::selection {
  background: rgba(115, 166, 255, 0.28);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--width-content));
  margin-inline: auto;
}

.wrap--narrow {
  width: min(100% - (var(--gutter) * 2), var(--width-narrow));
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  transform: translate(-50%, -110%);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
}

/* In-flow skip control: hidden until it receives keyboard focus. */
.skip-inline {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-inline:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin-bottom: var(--space-4);
  padding: 8px 16px;
  overflow: visible;
  clip-path: none;
  display: inline-block;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 13, 20, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .nav {
    background: rgba(13, 13, 20, 0.62);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

.nav.is-scrolled {
  border-bottom-color: var(--border);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 54px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px 6px 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.brand:hover {
  color: var(--text);
}

.brand__mark {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--accent);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 30px);
}

.nav__links a {
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 2px;
  transition: color var(--dur-fast) var(--ease);
}

.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--text);
}

.nav__links .btn {
  padding: 7px 15px;
  font-size: 14px;
}

.nav__links .btn:hover {
  color: #0b1020;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.btn--primary {
  background: var(--accent);
  color: #0b1020;
}

.btn--primary:hover {
  background: var(--accent-bright);
  color: #0b1020;
}

.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}

.btn--ghost:hover {
  background: var(--surface-hover);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-1px);
  }
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

/* Pending state: no verified App Store URL is configured yet, so the control
   is deliberately rendered as a non-interactive label rather than a dead link. */
.btn.is-pending {
  background: transparent;
  border-color: var(--border);
  color: var(--text-secondary);
  cursor: default;
  pointer-events: none;
}

.btn.is-pending:hover,
.btn.is-pending:active {
  transform: none;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cta-row--center {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Section furniture
   -------------------------------------------------------------------------- */

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight {
  padding-block: clamp(60px, 8vw, 104px);
}

.section__head {
  max-width: 42ch;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h2,
.h2 {
  font-size: clamp(2rem, 4.6vw, 3.15rem);
}

h3,
.h3 {
  font-size: clamp(1.25rem, 2.1vw, 1.5rem);
  letter-spacing: -0.02em;
}

.lead {
  margin-top: var(--space-5);
  color: var(--text-secondary);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
}

.divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    to right,
    transparent,
    var(--border) 20%,
    var(--border) 80%,
    transparent
  );
}

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

.hero {
  position: relative;
  padding-block: clamp(72px, 13vw, 156px) clamp(48px, 6vw, 88px);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(
    ellipse 76% 58% at 50% 24%,
    rgba(115, 166, 255, 0.2),
    rgba(153, 115, 242, 0.08) 42%,
    transparent 72%
  );
  pointer-events: none;
}

.hero__orbits {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: min(720px, 112vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  color: var(--accent);
  opacity: 0.2;
  pointer-events: none;
}

.hero__orbits .orbit-ring {
  transform-box: view-box;
  transform-origin: 200px 200px;
}

.hero__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-5);
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.hero h1 {
  font-size: clamp(3rem, 10.5vw, 6.25rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.hero__lead {
  max-width: 40ch;
  margin: var(--space-5) auto 0;
  color: var(--text-secondary);
  font-size: clamp(1.0625rem, 2vw, 1.375rem);
  line-height: 1.5;
}

.hero .cta-row {
  margin-top: clamp(32px, 4vw, 44px);
}

.hero__note {
  margin-top: var(--space-5);
  color: var(--text-tertiary);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Periodic table
   -------------------------------------------------------------------------- */

.ptable-frame {
  position: relative;
  padding: clamp(12px, 2vw, 28px);
  border: 1px solid var(--border);
  border-radius: clamp(var(--radius-md), 2vw, var(--radius-xl));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  container-type: inline-size;
}

.ptable {
  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  gap: clamp(1.5px, 0.42cqi, 6px);
}

.el {
  grid-area: var(--pos);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--cat-line);
  border-radius: clamp(2px, 0.7cqi, 9px);
  background: var(--cat-fill);
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease);
}

.el__n {
  font-size: 5px;
  font-size: clamp(4px, 1.05cqi, 11px);
  font-weight: 500;
  line-height: 1;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.el__s {
  font-size: 9px;
  font-size: clamp(6px, 2.05cqi, 21px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

@media (hover: hover) and (pointer: fine) {
  .el:hover {
    background: var(--cat-fill-strong);
    border-color: var(--cat);
    transform: translateY(-1px);
    z-index: 2;
  }
}

.el[aria-pressed="true"] {
  background: var(--cat-fill-strong);
  border-color: var(--cat);
  box-shadow: 0 0 0 1px var(--cat), 0 6px 22px -6px var(--cat);
  z-index: 3;
}

/* The stronger category fill lifts the tile background, so the small atomic
   number needs full strength to stay above AA against it. */
.el[aria-pressed="true"] .el__n,
.el:hover .el__n {
  color: var(--text);
}

/* Lanthanide / actinide range markers in the main body of the table */
.el-ref {
  grid-area: var(--pos);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 1px dashed var(--border);
  border-radius: clamp(2px, 0.7cqi, 9px);
  color: var(--text-tertiary);
  font-size: clamp(4px, 0.95cqi, 10px);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}

/* The lanthanide row opens the visual break below the main body */
.el--fbreak {
  margin-top: clamp(6px, 1.6cqi, 22px);
}

/* Category filter dimming */
.ptable[data-filter] .el {
  opacity: 0.16;
}

.ptable[data-filter="alkali metal"] .el[data-cat="alkali metal"],
.ptable[data-filter="alkaline earth metal"] .el[data-cat="alkaline earth metal"],
.ptable[data-filter="transition metal"] .el[data-cat="transition metal"],
.ptable[data-filter="post-transition metal"] .el[data-cat="post-transition metal"],
.ptable[data-filter="metalloid"] .el[data-cat="metalloid"],
.ptable[data-filter="nonmetal"] .el[data-cat="nonmetal"],
.ptable[data-filter="halogen"] .el[data-cat="halogen"],
.ptable[data-filter="noble gas"] .el[data-cat="noble gas"],
.ptable[data-filter="lanthanide"] .el[data-cat="lanthanide"],
.ptable[data-filter="actinide"] .el[data-cat="actinide"] {
  opacity: 1;
}

/* A dimmed element is still focusable, so it must come back to full strength
   when it takes focus — otherwise the focus ring dims with it. Selection alone
   does not qualify: a lit tile inside a filter would read as belonging to it. */
.ptable[data-filter] .el:focus-visible {
  opacity: 1;
}

/* Category colours -------------------------------------------------------- */

.el[data-cat="alkali metal"] {
  --cat: var(--cat-alkali);
  --cat-fill: rgba(242, 140, 77, 0.13);
  --cat-fill-strong: rgba(242, 140, 77, 0.3);
  --cat-line: rgba(242, 140, 77, 0.3);
}
.el[data-cat="alkaline earth metal"] {
  --cat: var(--cat-alkaline);
  --cat-fill: rgba(230, 191, 77, 0.13);
  --cat-fill-strong: rgba(230, 191, 77, 0.3);
  --cat-line: rgba(230, 191, 77, 0.3);
}
.el[data-cat="transition metal"] {
  --cat: var(--cat-transition);
  --cat-fill: rgba(102, 166, 242, 0.13);
  --cat-fill-strong: rgba(102, 166, 242, 0.3);
  --cat-line: rgba(102, 166, 242, 0.3);
}
.el[data-cat="post-transition metal"] {
  --cat: var(--cat-post-transition);
  --cat-fill: rgba(115, 204, 191, 0.13);
  --cat-fill-strong: rgba(115, 204, 191, 0.3);
  --cat-line: rgba(115, 204, 191, 0.3);
}
.el[data-cat="metalloid"] {
  --cat: var(--cat-metalloid);
  --cat-fill: rgba(179, 128, 230, 0.13);
  --cat-fill-strong: rgba(179, 128, 230, 0.3);
  --cat-line: rgba(179, 128, 230, 0.3);
}
.el[data-cat="nonmetal"] {
  --cat: var(--cat-nonmetal);
  --cat-fill: rgba(102, 217, 140, 0.13);
  --cat-fill-strong: rgba(102, 217, 140, 0.3);
  --cat-line: rgba(102, 217, 140, 0.3);
}
.el[data-cat="halogen"] {
  --cat: var(--cat-halogen);
  --cat-fill: rgba(89, 191, 217, 0.13);
  --cat-fill-strong: rgba(89, 191, 217, 0.3);
  --cat-line: rgba(89, 191, 217, 0.3);
}
.el[data-cat="noble gas"] {
  --cat: var(--cat-noble);
  --cat-fill: rgba(153, 115, 242, 0.13);
  --cat-fill-strong: rgba(153, 115, 242, 0.3);
  --cat-line: rgba(153, 115, 242, 0.3);
}
.el[data-cat="lanthanide"] {
  --cat: var(--cat-lanthanide);
  --cat-fill: rgba(217, 153, 179, 0.13);
  --cat-fill-strong: rgba(217, 153, 179, 0.3);
  --cat-line: rgba(217, 153, 179, 0.3);
}
.el[data-cat="actinide"] {
  --cat: var(--cat-actinide);
  --cat-fill: rgba(230, 102, 128, 0.13);
  --cat-fill-strong: rgba(230, 102, 128, 0.3);
  --cat-line: rgba(230, 102, 128, 0.3);
}

/* Readout ----------------------------------------------------------------- */

.readout {
  --cat: var(--accent);
  grid-area: 10 / 1 / 11 / 19;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4cqi, 26px);
  margin-top: clamp(10px, 2.2cqi, 26px);
  padding: clamp(12px, 2cqi, 22px);
  border: 1px solid var(--border);
  border-radius: clamp(var(--radius-sm), 1.6cqi, var(--radius-lg));
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.readout__symbol {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  width: clamp(64px, 11cqi, 104px);
  aspect-ratio: 1;
  border: 1px solid var(--cat);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--cat) 16%, transparent);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .readout__symbol {
    background: var(--surface);
  }
}

.readout__symbol b {
  font-size: clamp(26px, 4.6cqi, 42px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.readout__symbol span {
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: clamp(11px, 1.4cqi, 13px);
  font-variant-numeric: tabular-nums;
}

.readout__body {
  min-width: 0;
}

.readout__name {
  font-size: clamp(20px, 3.4cqi, 34px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.readout__category {
  margin-top: 4px;
  color: var(--cat);
  font-size: clamp(13px, 1.6cqi, 16px);
  font-weight: 600;
  transition: color var(--dur) var(--ease);
}

.readout__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px clamp(14px, 2.4cqi, 28px);
  margin-top: clamp(10px, 1.6cqi, 16px);
  color: var(--text-secondary);
  font-size: clamp(13px, 1.5cqi, 15px);
}

.readout__stats div {
  display: flex;
  gap: 6px;
}

.readout__stats dt {
  color: var(--text-tertiary);
}

.readout__stats dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* On wide viewports the readout occupies the table's own empty corner. */
@container (min-width: 760px) {
  .readout {
    grid-area: 1 / 3 / 4 / 13;
    margin-top: 0;
    margin-right: clamp(4px, 1cqi, 12px);
  }
}

/* Legend ------------------------------------------------------------------ */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
  list-style: none;
}

.legend__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 13px 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.legend__btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.legend__btn[aria-pressed="true"] {
  border-color: var(--swatch);
  background: var(--surface-hover);
  color: var(--text);
}

.legend__dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--swatch);
}

.table-note {
  margin-top: var(--space-5);
  color: var(--text-tertiary);
  font-size: 14px;
  max-width: 62ch;
}

.table-note--center {
  margin-inline: auto;
  text-align: center;
}

.lead--narrow {
  max-width: 34ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Mode cards (Grid / Table / Orbit)
   -------------------------------------------------------------------------- */

.modes {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .modes {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

.mode {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .mode:hover {
    border-color: var(--border-strong);
    transform: translateY(-3px);
  }
}

.mode__visual {
  display: grid;
  place-items: center;
  margin: 0 0 var(--space-5);
  padding: var(--space-5);
  aspect-ratio: 16 / 11;
  border-radius: var(--radius-md);
  background: radial-gradient(circle at 50% 42%, rgba(115, 166, 255, 0.12), transparent 68%),
    var(--bg-elevated);
  color: var(--accent);
  overflow: hidden;
}

.mode__visual svg {
  width: 100%;
  height: 100%;
  max-width: 260px;
}

/* A real screenshot is a tall phone capture, so its frame turns portrait. The
   image is positioned against a box with a definite height, which is what lets
   object-fit letterbox it instead of overflowing the frame and being cropped. */
.mode__visual--shot {
  position: relative;
  aspect-ratio: 9 / 19.5;
  max-height: 620px;
  padding: 0;
  background: var(--bg-elevated);
}

.mode__visual--shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mode__tag {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mode h3 {
  margin-top: var(--space-2);
}

.mode p {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: 16px;
}

.mode__meta {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Split layout (Go deeper)
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
}

.explain-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
}

.explain-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.explain-item__title {
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
}

.explain-item__formula {
  color: var(--accent);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
  list-style: none;
}

.fact-list li {
  display: flex;
  gap: var(--space-3);
  color: var(--text-secondary);
  font-size: 16px;
}

.fact-list svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}

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

/* --------------------------------------------------------------------------
   Pro
   -------------------------------------------------------------------------- */

.pro-card {
  position: relative;
  padding: clamp(32px, 5vw, 64px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: radial-gradient(circle at 50% 0%, rgba(115, 166, 255, 0.14), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  text-align: center;
  overflow: hidden;
}

.pro-card h2 {
  margin-top: var(--space-4);
}

.pro-card__mark {
  width: 52px;
  height: 52px;
  margin-inline: auto;
  color: var(--accent);
}

.pro-benefits {
  display: grid;
  gap: var(--space-4);
  margin: clamp(32px, 5vw, 48px) auto 0;
  max-width: 720px;
  text-align: left;
  list-style: none;
}

@media (min-width: 720px) {
  .pro-benefits {
    grid-template-columns: 1fr 1fr;
  }
}

.pro-benefits li {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
}

.pro-benefits h3 {
  font-size: 17px;
  font-weight: 600;
}

.pro-benefits p {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 15px;
}

.pro-card__note {
  max-width: 62ch;
  margin: var(--space-6) auto 0;
  color: var(--text-tertiary);
  font-size: 14px;
}

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

.privacy-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(32px, 5vw, 56px);
  list-style: none;
}

@media (min-width: 760px) {
  .privacy-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
}

.privacy-grid li {
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: center;
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 600;
}

.privacy-grid span {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.closing {
  text-align: center;
}

.closing__icon {
  width: 96px;
  height: 96px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  border-radius: 22px;
  box-shadow: 0 20px 60px -20px rgba(115, 166, 255, 0.5);
}

.closing h2 {
  font-size: clamp(2.25rem, 6vw, 4rem);
}

.closing p {
  max-width: 34ch;
  margin: var(--space-5) auto 0;
  color: var(--text-secondary);
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
}

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

.footer {
  padding-block: var(--space-7) var(--space-6);
  border-top: 1px solid var(--border);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  list-style: none;
}

.footer a {
  display: inline-block;
  padding-block: 5px;
  color: var(--text-secondary);
  font-size: 15px;
}

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

.footer__legal {
  color: var(--text-tertiary);
  font-size: 14px;
}

.footer__note {
  margin-top: var(--space-5);
  color: var(--text-tertiary);
  font-size: 13px;
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   Document pages (support, privacy, 404)
   -------------------------------------------------------------------------- */

.doc-hero {
  padding-block: clamp(56px, 9vw, 104px) clamp(28px, 4vw, 48px);
}

.doc-hero h1 {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
}

.doc-hero .lead {
  max-width: 56ch;
}

.doc {
  padding-bottom: clamp(64px, 9vw, 120px);
}

.doc section + section {
  margin-top: clamp(40px, 5vw, 64px);
}

.doc h2 {
  font-size: clamp(1.5rem, 2.8vw, 1.9rem);
  scroll-margin-top: 84px;
}

.doc h3 {
  margin-top: var(--space-6);
  font-size: 1.0625rem;
  font-weight: 600;
}

.doc p,
.doc li {
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.65;
}

.doc p {
  margin-top: var(--space-4);
  max-width: var(--width-prose);
}

.doc ul,
.doc ol {
  margin-top: var(--space-4);
  padding-left: 1.35em;
  max-width: var(--width-prose);
}

.doc li + li {
  margin-top: var(--space-2);
}

.doc ul {
  list-style: disc;
}

.doc ol {
  list-style: decimal;
}

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

.doc__toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
  list-style: none;
}

.doc__toc a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

.doc__toc a:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.callout {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.callout p {
  margin-top: 0;
}

.callout p + p {
  margin-top: var(--space-3);
}

.doc__updated {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  color: var(--text-tertiary);
  font-size: 14px;
}

/* Error page */
.error-page {
  display: grid;
  place-items: center;
  min-height: 62vh;
  padding-block: var(--space-9);
  text-align: center;
}

.error-page h1 {
  font-size: clamp(2rem, 6vw, 3rem);
}

.error-page p {
  margin-top: var(--space-4);
  color: var(--text-secondary);
}

.error-page .cta-row {
  margin-top: var(--space-6);
  justify-content: center;
}

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

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
  }

  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-out);
  }

  .js .hero__enter {
    animation: rise 0.9s var(--ease-out) both;
  }

  .js .hero__enter--1 { animation-delay: 0.05s; }
  .js .hero__enter--2 { animation-delay: 0.14s; }
  .js .hero__enter--3 { animation-delay: 0.23s; }
  .js .hero__enter--4 { animation-delay: 0.32s; }

  .orbit-ring {
    animation: spin linear infinite;
  }

  .orbit-ring--a { animation-duration: 68s; }
  .orbit-ring--b { animation-duration: 92s; animation-direction: reverse; }
  .orbit-ring--c { animation-duration: 116s; }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .btn:hover,
  .mode:hover,
  .el:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Small-viewport refinements
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
  .el__n {
    display: none;
  }

  /* No cell is wide enough to set "89–103" legibly here, so the dashed
     placeholder carries the meaning on its own. */
  .el-ref {
    font-size: 0;
  }

  .brand__name {
    font-size: 16px;
  }
}

@media (max-width: 400px) {
  .nav__links {
    gap: 12px;
  }

  .nav__links a {
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   Forced colours / high contrast
   -------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .el,
  .legend__btn,
  .btn {
    border: 1px solid ButtonBorder;
  }

  .el[aria-pressed="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}