/* Shared product presentation derived from the approved landing. */
@font-face {
  font-family: Geist;
  src: url("/fonts/geist-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range:
    U+0100-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Geist;
  src: url("/fonts/geist-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter;
  src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range:
    U+0100-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Inter;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
/* These tokens deliberately match landing.css. Semantic status colours remain distinct. */
.product-ui {
  --page:#fff; --paper:#fff; --surface:#fff; --ink:#202124; --muted:#62636b;
  --line:#e5e5e9; --soft:#f6f6f7; --subtle:#f6f6f7; --link:#393443;
  --accent:#202124; --accent-hover:#39393f; --on-accent:#fff;
  --teal:#202124; --teal-dark:#393443; --hero-dark:#202124; --focus:#5041a8;
  --violet:#ede9fa; --blue:#e5effa; --peach:#fae8df; --yellow:#f7f0cf;
  --radius:28px;
  font-family:Inter,Arial,sans-serif; font-synthesis:none;
  background:var(--page); color:var(--ink); line-height:1.65;
}
html[data-theme=dark] .product-ui {
  --page:#17171b; --paper:#17171b; --surface:#212126; --ink:#f4f4f6;
  --muted:#bcbcc6; --line:#44444e; --soft:#292930; --subtle:#292930;
  --accent:#f4f4f6; --accent-hover:#dcdce5; --on-accent:#202124;
  --link:#ddd5ff; --teal:#f4f4f6; --teal-dark:#ddd5ff; --focus:#c3b3ff;
  --violet:#342f45; --blue:#293743; --peach:#42332f; --yellow:#403b28;
}
html[data-theme=warm] .product-ui {
  --page:#fffcf5; --paper:#fffcf5; --surface:#fffdf8; --ink:#302b28;
  --muted:#6c6259; --line:#e4dcd0; --soft:#f6f1e8; --subtle:#f6f1e8;
  --accent:#302b28; --accent-hover:#48403b; --on-accent:#fffdf8;
  --link:#514440; --teal:#302b28; --teal-dark:#514440;
}
.product-ui h1,.product-ui h2,.product-ui h3,.product-ui .brand {
  font-family:Geist,Arial,sans-serif; color:var(--ink);
}
.product-ui h1 {font-size:clamp(2.35rem,4.8vw,4.5rem);font-weight:500;letter-spacing:-.055em;line-height:1.1;max-width:24ch}
.product-ui h2 {font-weight:500;letter-spacing:-.04em;line-height:1.2}
.product-ui h3 {font-weight:550;letter-spacing:-.025em;line-height:1.35}
.product-ui .eyebrow {color:var(--muted);font-size:12px;font-weight:550;letter-spacing:.06em}
.product-ui a {color:var(--link);text-underline-offset:4px}
.product-ui button,.product-ui input,.product-ui select,.product-ui textarea {font-family:inherit}
.product-ui :focus-visible {outline:3px solid var(--focus);outline-offset:4px}
.product-ui [hidden] {display:none!important}
.product-ui > header,.product-ui .site-header {
  position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:20px;
  max-width:1280px;margin:auto;padding:28px 40px;background:var(--page);border:0;box-shadow:none;
}
.product-ui .brand {font-size:23px;font-weight:600;letter-spacing:-.055em;text-decoration:none;color:var(--ink);gap:12px}
.product-ui .brand small {font:500 10px/1.4 Inter,Arial,sans-serif;letter-spacing:.07em;color:var(--muted)}
.product-ui .brand-icon,.product-ui .brand-symbol {background:transparent;border:0;color:var(--ink);border-radius:0}
.product-ui > header nav,.product-ui .site-header nav {
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;
  border:1px solid var(--line);border-radius:28px;background:var(--soft);padding:5px;margin-left:auto;
}
.product-ui > header nav a,.product-ui .site-header nav a {
  display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;
  font-size:14px;font-weight:500;text-decoration:none;white-space:normal;border-radius:99px;color:var(--muted);
}
.product-ui > header nav a:hover,.product-ui .site-header nav a:hover,
.product-ui nav a[aria-current=page] {background:var(--violet);color:var(--ink);text-decoration:none}
.product-ui .guest {max-width:100%;overflow-wrap:anywhere;font-size:12px;color:var(--muted)}
.product-ui .preview {background:var(--soft);color:var(--muted);text-align:center;font-size:12px;letter-spacing:0;padding:9px 20px}
.product-ui .appearance-bar {max-width:1200px;margin:auto;padding:4px 20px 20px;color:var(--muted);background:transparent;border:0}
.product-ui main,.product-ui .page {max-width:1200px;margin:auto;padding:36px 40px 72px}
.product-ui .intro {gap:40px;align-items:center;padding:36px 32px;margin-bottom:40px;border-radius:32px;background:linear-gradient(120deg,var(--blue),var(--page) 50%,var(--peach));border:1px solid var(--line)}
.product-ui .intro h1 {margin-top:12px}
.product-ui .intro .metric {background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:28px;padding:28px;box-shadow:none}
.product-ui .intro .metric strong {color:var(--ink);font-family:Geist,Arial,sans-serif;font-weight:500}
.product-ui .panel,.product-ui .topic-card,.product-ui .price-card,
.product-ui .testas-panel,.product-ui .testas-trail,.product-ui .soft,
.product-ui .sources,.product-ui .guide-toc {border:1px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:none}
.product-ui .panel,.product-ui .testas-panel,.product-ui .price-card {padding:28px}
.product-ui .topic-card {background:var(--soft);padding:28px;gap:8px}
.product-ui .topic-card:nth-child(4n+2),.product-ui .price-card.premium {background:var(--violet);border-color:var(--line)}
.product-ui .topic-card:nth-child(4n+3) {background:var(--peach)}
.product-ui .topic-number {color:var(--ink)}
.product-ui button,.product-ui .button,.product-ui .support-button {
  min-height:46px;border:1px solid var(--line);border-radius:99px;padding:11px 20px;
  background:var(--surface);color:var(--ink);font-size:14px;font-weight:550;line-height:1.5;
}
.product-ui .primary,.product-ui .button.primary,.product-ui .nav-start,
.product-ui .support-submit {background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.product-ui .primary:hover,.product-ui .button.primary:hover {background:var(--accent-hover);color:var(--on-accent)}
.product-ui button:disabled {opacity:.6;cursor:not-allowed}
.product-ui input:not([type=checkbox]):not([type=radio]),.product-ui select,.product-ui textarea {
  max-width:100%;min-height:46px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--ink);padding:10px 14px;
}
.product-ui input[type=checkbox],.product-ui input[type=radio] {accent-color:var(--accent)}
.product-ui .row,.product-ui .actions,.product-ui .testas-attempt-navigation {gap:12px}
.product-ui .attempt-top,.product-ui .testas-attempt-bar {padding:16px 0;border-color:var(--line)}
.product-ui .timer {font-variant-numeric:tabular-nums;color:var(--ink)}
/* Keep diagrams, answers, clocks and saved/error status structurally unchanged. */
.product-ui .question h1,.product-ui .question h2,.product-ui #question-heading {font-size:1.25rem;line-height:1.55;letter-spacing:-.015em;max-width:none}
.product-ui .choices label,.product-ui .choice-grid label,.product-ui .testas-choices label {background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;line-height:1.65}
.product-ui .choices label:has(input:checked),.product-ui .testas-choices label:has(input:checked) {border-color:var(--accent);background:var(--violet)}
.product-ui .figure-options button {border-radius:16px;padding:12px}
.product-ui .testas-feedback {background:var(--soft);border-color:var(--accent);border-radius:0 16px 16px 0}
.product-ui .testas-context,.product-ui .passage {line-height:1.8}
.product-ui .testas-metric {background:var(--soft);border-radius:20px;padding:22px}
.product-ui .testas-metric dd,.product-ui .price {font-family:Geist,Arial,sans-serif;font-weight:500;letter-spacing:-.04em}
.product-ui .testas-notice,.product-ui .testas-independence {background:var(--soft);border-color:var(--line);border-radius:16px}
.product-ui .support-tools {max-width:1120px;margin:20px auto 48px;border:1px solid var(--line);border-radius:28px;background:var(--soft);padding:32px}
.product-ui > footer,.product-ui .site-footer {max-width:1200px;margin:auto;padding:40px;border-top:1px solid var(--line);background:var(--page);color:var(--muted)}
.product-ui .section-title {margin-top:36px;margin-bottom:20px}
.product-ui .split {gap:28px}
.product-ui .study-plan {background:var(--soft);color:var(--ink);border:1px solid var(--line);border-radius:28px}
.product-ui .study-plan p,.product-ui .study-plan .eyebrow,.product-ui .study-plan .check a {color:var(--muted)}
.product-ui .study-plan button {background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
@media(max-width:900px) {
  .product-ui > header,.product-ui .site-header {padding:24px;gap:16px}
  .product-ui > header nav,.product-ui .site-header nav {margin-left:0;width:100%;justify-content:flex-start}
  .product-ui main,.product-ui .page {padding:28px 24px 52px}
  .product-ui .intro {padding:28px;gap:24px}
}
@media(max-width:650px) {
  .product-ui > header,.product-ui .site-header {padding:20px}
  .product-ui > header nav a,.product-ui .site-header nav a {font-size:13px;padding:9px 12px}
  .product-ui main,.product-ui .page {padding:24px 20px 44px}
  .product-ui h1 {font-size:2.35rem}
  .product-ui .intro {grid-template-columns:1fr;padding:24px 20px;border-radius:24px}
  .product-ui .panel,.product-ui .testas-panel,.product-ui .price-card,.product-ui .topic-card {padding:22px 18px;border-radius:22px}
  .product-ui .support-tools {margin:20px;padding:24px 20px}
  .product-ui > footer,.product-ui .site-footer {padding:28px 20px}
  .product-ui .site-header .nav-start {position:static}
}
@media(prefers-reduced-motion:reduce) {.product-ui * {scroll-behavior:auto;transition:none;animation:none}}


.product-ui .brand svg {width:30px;height:30px;flex-shrink:0}
.product-ui .card {border-radius:28px;background:var(--soft);padding:26px;gap:18px}
.product-ui .card:nth-child(4n+2) {background:var(--violet)}
.product-ui .card:nth-child(4n+3) {background:var(--peach)}
.product-ui .card:nth-child(4n+4) {background:var(--yellow)}
.product-ui .number {font:500 26px/1.2 Geist,Arial,sans-serif;color:var(--ink)}
.product-ui .tag {border-radius:99px;padding:5px 10px;color:var(--muted)}
.product-ui .eyebrow {text-transform:none}
.product-ui .danger {color:var(--danger);border-color:var(--danger);background:var(--danger-soft)}
@media(max-width:650px) {.product-ui .intro {display:flex;flex-direction:column;align-items:stretch}.product-ui .card {padding:22px 18px;border-radius:22px}}
.product-ui .site-header nav a.nav-start,.product-ui .site-header nav a.nav-start:hover {background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .product-ui #public-sign-out {border-radius:99px;min-height:44px}