/* ZAINORA Rate Lab — design tokens + shared components (forked from the Electricity Lab).
   Light "lab bench" theme for the projector. Colour is law:
     particles  A red · B blue · product C gold · catalyst grey
     the two questions  HOW OFTEN (collision frequency) blue · HOW HARD (energy ≥ Ea) amber
     factors  concentration blue · pressure violet · surface area teal · temperature red · catalyst magenta
     rate  orange                                                                                   */

:root {
  --board: #E8EEF6;
  --board-2: #DCE5F0;
  --board-dot: #C3CFDE;
  --paper: #FFFFFF;
  --ink: #13203B;
  --ink-2: #46557A;
  --ink-3: #8592AE;
  --line: #D3DCE8;

  --copper: #D9822B;
  --copper-dk: #9A5414;
  --copper-lt: #F4B676;
  --electron: #2F7DF6;
  --electron-dk: #1745A3;
  --positive: #EF4058;
  --spark: #FFC93C;
  --spark-glow: #FFE68F;
  --mint: #18A874;
  --mint-bg: #DDF5EA;
  --danger: #E5383B;

  --q-I: #2F7DF6;
  --q-V: #D48A00;
  --q-R: #C0601A;
  --q-Q: #0E9F9D;
  --q-P: #7B5CF5;
  --q-E: #D93B86;
  --q-t: #46557A;

  /* chemistry quantity colours */
  --q-c: #2F7DF6;      /* concentration */
  --q-p: #7B5CF5;      /* pressure */
  --q-sa: #0E9F9D;     /* surface area */
  --q-T: #E03131;      /* temperature */
  --q-cat: #D93B86;    /* catalyst */
  --q-rate: #E8590C;   /* rate */
  --q-Ea: #D48A00;     /* activation energy / HOW HARD */
  --often: #1C7ED6;    /* HOW OFTEN (collision frequency) */
  --hard: #D48A00;     /* HOW HARD (energy >= Ea) */
  --pA: #EF4E3A; --pB: #2F7DF6; --pC: #F2B51D; --pK: #8D96A6;

  --lcd-bg: #CAD8B4;
  --lcd-ink: #1E2B17;

  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow-1: 0 1px 0 rgba(19,32,59,.06), 0 2px 6px rgba(19,32,59,.06);
  --shadow-2: 0 2px 0 rgba(19,32,59,.05), 0 10px 30px rgba(19,32,59,.10);
  --shadow-press: inset 0 2px 0 rgba(19,32,59,.12);

  --f-display: "Fredoka", "Segoe UI Rounded", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
  --f-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "Share Tech Mono", "Consolas", "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--board);
  background-image: radial-gradient(var(--board-dot) 1.2px, transparent 1.3px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--electron); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; margin: 0; line-height: 1.1; letter-spacing: -.01em; }
svg { overflow: visible; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* quantity colours */
.q-I { color: var(--q-I); } .q-V { color: var(--q-V); } .q-R { color: var(--q-R); }
.q-Q { color: var(--q-Q); } .q-P { color: var(--q-P); } .q-E { color: var(--q-E); } .q-t { color: var(--q-t); }
.q-I, .q-V, .q-R, .q-Q, .q-P, .q-E, .q-t { font-weight: 800; }
.q-c { color: var(--q-c); } .q-p { color: var(--q-p); } .q-sa { color: var(--q-sa); } .q-T { color: var(--q-T); }
.q-cat { color: var(--q-cat); } .q-rate { color: var(--q-rate); } .q-Ea { color: var(--q-Ea); } .often { color: var(--often); } .hard { color: var(--hard); }
.q-c, .q-p, .q-sa, .q-T, .q-cat, .q-rate, .q-Ea, .often, .hard { font-weight: 800; }
.pA { color: var(--pA); font-weight: 900; } .pB { color: var(--pB); font-weight: 900; } .pC { color: #B98200; font-weight: 900; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-name { font-family: var(--f-display); font-weight: 600; font-size: 19px; line-height: 1; }
.brand-sub { font-size: 11.5px; color: var(--ink-3); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.topbar .spacer { flex: 1; }
.back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--paper);
  border-radius: 999px; padding: 7px 14px 7px 10px; font-weight: 800; font-size: 14px;
  box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none;
}
.back-btn:hover { border-color: var(--ink-3); }
.st-title { min-width: 0; }
.st-title .eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 800; color: var(--copper-dk); letter-spacing: .05em; text-transform: uppercase; }
.st-title h1 { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.star-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #FFF5D6; border: 1px solid #F3D37A; color: #7A5300;
  border-radius: 999px; padding: 6px 12px; font-weight: 900; font-size: 14px; white-space: nowrap;
}
.star-pill svg { width: 18px; height: 18px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-1);
}
.icon-btn svg { width: 20px; height: 20px; }

/* ---------- station layout ---------- */
.station {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  padding: 18px;
  max-width: 1680px; margin: 0 auto;
}
.stage-wrap { min-width: 0; }
.stage {
  position: relative;
  height: calc(100vh - 96px);
  min-height: 540px;
  background: #F6F9FD;
  background-image:
    radial-gradient(#D5DEEA 1.1px, transparent 1.2px);
  background-size: 20px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}
.stage > svg.fill, .stage > canvas.fill { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  padding: 16px;
}
.card h3 { font-size: 15px; font-family: var(--f-body); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }

/* Eli speech */
.eli-card { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: start; background: linear-gradient(180deg, #F2F7FF, #FFFFFF); }
.eli-card .eli { width: 74px; height: 74px; }
.bubble { position: relative; font-size: 15.5px; line-height: 1.45; min-height: 64px; }
.bubble b, .bubble strong { font-weight: 900; }
.bubble.pop { animation: bubblePop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes bubblePop { from { transform: scale(.96); opacity: .4; } to { transform: none; opacity: 1; } }
.eli .eye-l, .eli .eye-r { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.eli .bob { animation: bob 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Formula card */
.formula { text-align: center; }
.eq { font-family: var(--f-display); font-size: 34px; font-weight: 600; letter-spacing: .01em; line-height: 1.2; }
.eq .op { color: var(--ink-3); font-weight: 400; margin: 0 .12em; }
.eq-num { margin-top: 8px; font-family: var(--f-mono); font-size: 19px; background: #F3F6FA; border-radius: var(--r-sm); padding: 8px 10px; }
.eq-words { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.eq-small { font-size: 24px; }

/* Missions */
.missions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.missions li {
  display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center;
  padding: 9px 10px; border-radius: var(--r-md); background: #F5F7FB; font-size: 14.5px; font-weight: 700; line-height: 1.3;
  transition: background .3s;
}
.missions li .tick {
  width: 28px; height: 28px; border-radius: 50%; border: 2px dashed var(--ink-3);
  display: grid; place-items: center;
}
.missions li .tick svg { width: 18px; height: 18px; opacity: 0; }
.missions li.done { background: var(--mint-bg); color: #0B5E40; }
.missions li.done .tick { border: none; background: var(--spark); animation: starPop .6s cubic-bezier(.3,1.8,.4,1); }
.missions li.done .tick svg { opacity: 1; }
@keyframes starPop { 0% { transform: scale(.2) rotate(-90deg); } 100% { transform: none; } }

/* Must know */
.mustknow ul { margin: 0; padding-left: 18px; font-size: 14.5px; }
.mustknow li { margin: 4px 0; }
.mustknow li::marker { color: var(--copper); }
details.mustknow summary { cursor: pointer; list-style: none; }
details.mustknow summary::-webkit-details-marker { display: none; }
details.mustknow summary h3 { margin: 0; }
details.mustknow[open] summary h3 { margin-bottom: 10px; }
details.mustknow summary h3::after { content: "+"; margin-left: auto; font-size: 20px; color: var(--ink-3); }
details.mustknow[open] summary h3::after { content: "–"; }

/* ---------- controls ---------- */
.ctl-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.slider { display: grid; gap: 4px; min-width: 180px; flex: 1; }
.slider .top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; font-weight: 800; color: var(--ink-2); }
.slider .val { font-family: var(--f-mono); font-size: 16px; color: var(--ink); }
.slider input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; margin: 0;
  --pct: 50%; --acc: var(--electron);
}
.slider input[type=range]::-webkit-slider-runnable-track {
  height: 10px; border-radius: 99px;
  background: linear-gradient(90deg, var(--acc) 0 var(--pct), #DCE3EE var(--pct) 100%);
}
.slider input[type=range]::-moz-range-track { height: 10px; border-radius: 99px; background: #DCE3EE; }
.slider input[type=range]::-moz-range-progress { height: 10px; border-radius: 99px; background: var(--acc); }
.slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; margin-top: -8px;
  background: #fff; border: 3px solid var(--acc); box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.slider input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--acc); }

.seg { display: inline-flex; background: #EDF1F7; border-radius: 999px; padding: 4px; gap: 2px; border: 1px solid var(--line); flex-wrap: wrap; }
.seg button { border: none; background: transparent; border-radius: 999px; padding: 7px 14px; font-weight: 800; font-size: 14px; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-1); }

.btn {
  border: none; border-radius: 999px; padding: 10px 18px; font-weight: 900; font-size: 15px;
  background: var(--ink); color: #fff; box-shadow: 0 3px 0 #000A1F33;
  display: inline-flex; align-items: center; gap: 8px; transition: transform .08s;
}
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn.alt { background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 3px 0 #D3DCE8; }
.btn.spark { background: var(--spark); color: #4A3200; box-shadow: 0 3px 0 #C99A1C; }
.btn.blue { background: var(--electron); box-shadow: 0 3px 0 var(--electron-dk); }
.btn.red { background: var(--danger); box-shadow: 0 3px 0 #A4181B; }
.btn.small { padding: 7px 13px; font-size: 13.5px; }

.toggle { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 14px; cursor: pointer; user-select: none; }
.toggle .sw { width: 46px; height: 26px; border-radius: 99px; background: #CDD6E3; position: relative; transition: background .2s; flex: none; }
.toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.toggle[aria-checked="true"] .sw { background: var(--mint); }
.toggle[aria-checked="true"] .sw::after { transform: translateX(20px); }

/* LCD meter readout (multimeter look) */
.lcd {
  display: inline-grid; gap: 2px; background: #2A3348; border-radius: 12px; padding: 6px; min-width: 120px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), var(--shadow-1);
}
.lcd .lbl { font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #AEB9D1; padding: 0 4px; display: flex; justify-content: space-between; }
.lcd .scr {
  background: var(--lcd-bg); color: var(--lcd-ink); border-radius: 7px;
  font-family: var(--f-mono); font-size: 26px; line-height: 1; padding: 8px 10px 6px; text-align: right;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25);
  white-space: nowrap;
}
.lcd .scr .u { font-size: 16px; margin-left: 4px; }
.lcd.mini { min-width: 92px; }
.lcd.mini .scr { font-size: 20px; padding: 6px 8px 4px; }

/* stage overlays: floating control dock on the board */
.dock {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 10px 14px; box-shadow: var(--shadow-2);
}
.chip {
  position: absolute; background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; font-weight: 800; font-size: 13px; box-shadow: var(--shadow-1); pointer-events: none;
}
.hint-pulse { animation: hintPulse 1.6s ease-in-out infinite; }
@keyframes hintPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* SVG helpers */
.hit { cursor: pointer; }
.grab { cursor: grab; }
.grab:active { cursor: grabbing; }
.svg-label { font-family: var(--f-body); font-weight: 800; }
.svg-label:not([fill]) { fill: var(--ink-2); }
.svg-title { font-family: var(--f-display); font-weight: 600; }
.svg-title:not([fill]) { fill: var(--ink); }
.svg-mono { font-family: var(--f-mono); }

/* toast */
.toast-wrap { position: fixed; left: 50%; top: 78px; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; pointer-events: none; }
.toast {
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 800;
  box-shadow: var(--shadow-2); display: flex; align-items: center; gap: 10px;
  animation: toastIn .4s cubic-bezier(.3,1.5,.5,1);
}
.toast svg { width: 22px; height: 22px; }
@keyframes toastIn { from { transform: translateY(20px) scale(.9); opacity: 0; } }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 80; }

/* ---------- home ---------- */
.home { max-width: 1240px; margin: 0 auto; padding: 22px 20px 40px; }
.hero {
  position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center;
  background: #0F1A33; color: #fff; border-radius: 28px; padding: 34px 36px; overflow: hidden;
  box-shadow: var(--shadow-2);
  transition: background .8s;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1.2px, transparent 1.3px);
  background-size: 22px 22px; pointer-events: none;
}
.hero.on { background: #13234A; }
.hero .kicker { font-weight: 900; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--copper-lt); }
.hero h1 { font-size: clamp(40px, 6.2vw, 78px); line-height: .98; margin: 10px 0 14px; color: #5B6785; transition: color .5s, text-shadow .5s; }
.hero.on h1 { color: #FFF6D6; text-shadow: 0 0 18px rgba(255,201,60,.65), 0 0 50px rgba(255,201,60,.35); }
.hero p { font-size: 18px; color: #B9C3DA; max-width: 34ch; margin: 0 0 18px; }
.hero .cta-note { font-weight: 800; color: var(--spark); display: flex; align-items: center; gap: 8px; }
.hero-svg { width: 100%; height: auto; position: relative; }
.hero-svg .switch-hit { cursor: pointer; }

.trail { position: relative; margin-top: 28px; }
.trail-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.st-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.st-card {
  position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 16px 14px; text-decoration: none; color: inherit; box-shadow: var(--shadow-1);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.st-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: #B7C4D8; }
.st-card .bulb-ico { width: 64px; height: 64px; }
.st-card .code { font-size: 12px; font-weight: 900; letter-spacing: .06em; color: var(--copper-dk); }
.st-card h2 { font-size: 21px; margin: 2px 0 4px; }
.st-card p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.st-card .stars { display: flex; gap: 3px; margin-top: 8px; }
.st-card .stars svg { width: 17px; height: 17px; }
.st-card.flag { background: linear-gradient(135deg, #FFFFFF 40%, #FFF7DD); border-color: #F0D58A; }
.st-card.flag h2 { font-size: 23px; }
.st-card .tag { display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; background: var(--spark); color: #4A3200; border-radius: 99px; padding: 2px 8px; margin-left: 6px; vertical-align: 3px; }

.home-foot { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: var(--ink-3); font-size: 13px; font-weight: 700; }
.credit { letter-spacing: .06em; text-transform: uppercase; font-weight: 900; color: var(--ink-2); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; font-size: 13.5px; font-weight: 800; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend span.cc { display: inline; }
.legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .station { grid-template-columns: minmax(0, 1fr) 320px; }
  .st-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .station { grid-template-columns: 1fr; padding: 12px; }
  .stage { height: 72vh; min-height: 460px; }
  .hero { grid-template-columns: 1fr; padding: 26px 22px; }
  .st-title h1 { font-size: 18px; }
  .brand-text { display: none; }
}
@media (max-width: 620px) {
  .st-grid { grid-template-columns: 1fr; }
  .topbar { padding: 8px 12px; gap: 8px; }
  .st-of { display: none; }
  .back-btn span { display: none; }
  .back-btn { padding: 8px 10px; }
  .home { padding: 14px 16px 30px; }
  .eq { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* mode switcher pinned to the top-left of a stage */
.modebar { position: absolute; top: 14px; left: 14px; z-index: 6; max-width: calc(100% - 28px); }
.modebar .seg { background: rgba(255,255,255,.94); box-shadow: var(--shadow-2); }
@media (max-width: 620px) { .toast-wrap { top: auto; bottom: 16px; width: calc(100% - 32px); } .toast { border-radius: 16px; } }

/* ---------- page-layout stations (practice, definitions, tests): the stage grows and scrolls with the page */
.station.page .stage { height: auto; min-height: calc(100vh - 96px); overflow: visible; touch-action: auto; user-select: text; -webkit-user-select: text; background: var(--paper); padding: 22px; }
@media (max-width: 900px) { .station.page .stage { padding: 14px; min-height: 0; } }

/* plots */
svg.plot { display: block; width: 100%; height: auto; background: #fff; border-radius: var(--r-md); }
svg.plot text { user-select: none; }

/* ZAINORA watermark over real Cambridge crops (standing rule) */
.qimg-wrap { position: relative; }
.qimg-wrap img { display: block; max-width: 100%; height: auto; }
.qimg-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .075; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='140'%3E%3Ctext x='20' y='90' transform='rotate(-24 130 70)' font-family='Arial' font-weight='900' font-size='30' fill='%2313203B'%3EZAINORA%3C/text%3E%3C/svg%3E"); }

/* subscript helper so H₂O₂ style text lines up in HTML */
sub, sup { font-size: .72em; line-height: 0; }

/* ---------- Rate Lab home ---------- */
.rl-hero { background: #FFFFFF; color: var(--ink); border: 1px solid var(--line); }
.rl-hero::before { background-image: radial-gradient(#E3E9F2 1.2px, transparent 1.3px); }
.rl-hero .kicker { color: var(--q-rate); }
.rl-hero h1 { color: var(--ink); text-shadow: none; }
.rl-hero h1 .gold { color: #C98A00; text-shadow: 0 0 22px rgba(242,181,29,.45); }
.rl-hero p { color: var(--ink-2); max-width: 38ch; }
.rl-hero.hot { background: #FFF8F2; }
.hero-box { position: relative; height: 330px; border-radius: 22px; background: #F6F9FD; border: 2px solid #C9D3E0; overflow: hidden; box-shadow: inset 0 2px 10px rgba(19,32,59,.06); transition: background .6s, border-color .6s; }
.rl-hero.hot .hero-box { background: #FFF1E6; border-color: #F4B183; }
.hero-box canvas.fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-ctl { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-read { display: grid; gap: 2px; font-size: 14px; font-weight: 800; color: var(--ink-2); }
.hero-read b { font-family: var(--f-mono); font-size: 20px; min-width: 2.2ch; display: inline-block; text-align: right; margin-right: 4px; }
.home .grp { margin-top: 30px; }
.home .grp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.home .grp-head h2 { font-size: 28px; }
.home .grp-head p { margin: 0; color: var(--ink-2); font-weight: 700; }
.st-ico { position: relative; }
.st-ico .st-n { position: absolute; left: -6px; top: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 900; font-size: 13px; display: grid; place-items: center; }
@media (max-width: 900px) { .hero-box { height: 260px; } }
.hero-right { display: grid; gap: 10px; }
.hero-key { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.hero-key span { display: flex; align-items: center; gap: 6px; }
.hero-key .k-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: none; }
.hero-key .k-ring { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #8592AE; display: inline-block; flex: none; }
.hero-key .k-burst { width: 14px; height: 14px; border-radius: 50%; background: #FFE68F; box-shadow: 0 0 0 3px #F2B51D; display: inline-block; flex: none; }
.hero-say { font-size: 16.5px; line-height: 1.5; background: #F5F8FC; border: 1px solid var(--line); border-left: 5px solid var(--q-rate); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; max-width: 46ch; color: var(--ink); }
.st-card.soon { opacity: .55; border-style: dashed; }
.st-card.soon .code { color: var(--ink-3); }
@media (max-width: 620px) { .hero-key { grid-template-columns: 1fr; } }
.hero-key em { font-style: normal; flex: 1 1 auto; }
.hero-read i { font-style: normal; color: var(--ink-3); font-weight: 700; }
.hero-read .refill { font-size: 12.5px; color: var(--ink-3); font-weight: 700; }
.hero-read .rate-line { font-size: 17px; color: var(--ink); } .hero-read .rate-line b { font-size: 26px; }

/* five-factor comparator on the home page */
.fx-hero { display: block; padding: 28px 30px; }
.fx-hero h1 { font-size: clamp(34px, 4.6vw, 58px); margin: 8px 0 10px; }
.fx-lead { font-size: 18px; max-width: 72ch !important; color: var(--ink-2); margin: 0 0 16px !important; position: relative; }
.fx-head { position: relative; }
.fx-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; position: relative; }
.fx-tab { border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 18px; font-weight: 900; font-size: 16px; color: var(--ink-2); }
.fx-tab[aria-selected="true"] { background: var(--tab); border-color: var(--tab); color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.fx-hero .hero-key { grid-template-columns: repeat(4, auto); justify-content: start; margin-bottom: 12px; position: relative; }
.fx-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; position: relative; }
.fx-name { font-family: var(--f-display); font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.fx-side.right .fx-name { color: #B5470B; }
.fx-box { height: 260px; }
.fx-sb svg { width: 100%; max-width: 380px; height: auto; display: block; margin: 6px 0 2px; }
.fx-read { margin-top: 4px; }
.fx-wait { color: var(--ink-3); font-weight: 700; }
.fx-say { max-width: none; margin: 16px 0 10px; position: relative; }
.fx-verdict { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; position: relative; }
.fx-verdict .pill { border-radius: 999px; padding: 7px 14px; font-weight: 800; font-size: 14.5px; border: 2px solid; }
.fx-verdict .pill.yes { border-color: var(--often); color: var(--often); background: #E8F1FD; }
.fx-verdict .pill.hardp.yes { border-color: var(--hard); color: #8A5A00; background: #FFF4DC; }
.fx-verdict .pill.no { border-color: var(--line); color: var(--ink-3); background: #F5F7FA; }
.fx-verdict .remember { font-weight: 900; font-size: 16px; color: var(--ink); }
@media (max-width: 1000px) { .fx-hero .hero-key { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .fx-pair { grid-template-columns: 1fr; } .fx-box { height: 220px; } .fx-hero { padding: 20px 16px; } .fx-hero .hero-key { grid-template-columns: 1fr; } }