/*
 * vxmodules.com — home page. Light.
 * Tokens, nav, off-canvas menu, buttons, feature rows, signup, footer, motion,
 * then the home page's own sections.
 */
:root {
  --ground: #FFFFFF;
  --sunk: #F5F6F9;
  --panel: #FFFFFF;
  --ink: #0E1116;
  --body: #4B5563;
  --muted: #7B8494;
  --line: #E4E7EE;
  --hairline: #EEF0F5;
  --accent: #EA6A0A;
  --accent-deep: #C4570A;
  --accent-soft: #FFF1E6;
  --on-accent: #FFFFFF;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* The mark's three faces, lit from the top left. */
  --accent-hi: #F98B33;
  --accent-lo: #B4490A;
  --wire: #C9CED9;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --display: 'Space Grotesk', var(--sans);
  --shell: 1140px;
  --r: 14px;
  --shadow: 0 24px 60px -30px rgba(14, 17, 22, 0.35), 0 2px 6px rgba(14, 17, 22, 0.05);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 22px; }
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--sunk { background: var(--sunk); }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--body); max-width: 40rem; }
.measure { max-width: 46rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 10px;
  font-weight: 600; font-size: 1rem; line-height: 1;
  border: 1px solid transparent; cursor: pointer; text-decoration: none !important;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost { background: var(--panel); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: #C9CED9; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #262B35; }
.btn svg { width: 16px; height: 16px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.9); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--hairline); }
.nav .shell { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 1.15rem; text-decoration: none !important; }
.brand img { width: 30px; height: 32px; }
.brand span { color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--body); font-weight: 500; font-size: .95rem; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-cta .btn { padding: 10px 16px; font-size: .92rem; white-space: nowrap; }
.menu-btn { display: none; }
@media (max-width: 860px) {
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav .shell { padding: 0 16px; }
  .nav-cta .btn { padding: 10px 12px; font-size: .88rem; }
  .brand { font-size: 1.05rem; }
  .menu-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; padding: 0; }
  .menu-btn span { display: block; width: 18px; height: 2px; background: var(--ink); box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink); transition: transform .2s; }
}

/* Off-canvas menu */
.drawer-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(14, 17, 22, .45); opacity: 0; transition: opacity .3s; }
.drawer-backdrop[hidden] { display: block; pointer-events: none; }
body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(340px, 88vw); background: #fff; display: flex; flex-direction: column; padding: 14px 18px 22px; box-shadow: -20px 0 60px -30px rgba(14,17,22,.4); transform: translateX(104%); transition: transform .36s cubic-bezier(.2, .8, .2, 1); visibility: hidden; }
body.drawer-open .drawer { transform: none; visibility: visible; }
body.drawer-open { overflow: hidden; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; height: 40px; margin-bottom: 18px; }
.drawer-close { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 24px; line-height: 1; color: var(--ink); cursor: pointer; }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-nav a { padding: 14px 6px; border-bottom: 1px solid var(--hairline); color: var(--ink); font-family: var(--display); font-weight: 500; font-size: 1.3rem; text-decoration: none !important; }
.drawer-nav a:hover { color: var(--accent-deep); }
.drawer-foot { margin-top: auto; display: grid; gap: 10px; padding-top: 22px; }
.drawer-foot .btn { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-backdrop { transition: none; } }

/* Motion: rise on load, reveal on scroll, lift on hover. Off for people who ask for less motion. */
.rise { animation: rise .7s cubic-bezier(.2, .8, .2, 1) backwards; }
.rise:nth-child(2) { animation-delay: .1s; }
.rise:nth-child(3) { animation-delay: .2s; }
.rise:nth-child(4) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.reveal-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.reveal-ready .reveal.is-in { opacity: 1; transform: none; }
.frame { transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s; }
.row .frame:hover { transform: translateY(-4px); box-shadow: 0 34px 70px -30px rgba(14, 17, 22, 0.4), 0 2px 6px rgba(14, 17, 22, 0.05); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .rise, .frame, .btn { animation: none; transition: none; } }

/* Browser frame around screenshots */
.frame { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.frame-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #F7F8FB; border-bottom: 1px solid var(--hairline); }
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: #E1E4EB; }
.frame-bar b { margin-left: 10px; flex: 1; height: 18px; border-radius: 6px; background: #ECEEF3; }
.frame img { width: 100%; }

/* Feature rows (alternating) */
.rows { display: flex; flex-direction: column; gap: clamp(48px, 7vw, 96px); }
.row { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.row .copy h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.row .copy ul, ul.ticks { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.row .copy li, ul.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.row .copy li svg, ul.ticks li svg { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--accent); }
@media (min-width: 880px) {
  .row { grid-template-columns: 1fr 1fr; gap: 64px; }
  .row.flip .copy { order: 2; }
}

/* Signup */
.signup { max-width: 34rem; }
.signup .fields { display: flex; flex-wrap: wrap; gap: 10px; }
.signup input { flex: 1 1 180px; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 1rem; background: #fff; color: var(--ink); }
.signup input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(234,106,10,.18); }
.signup button { flex: 0 0 auto; height: 48px; }
.signup .hp { position: absolute; left: -9999px; }
.signup .note { min-height: 1.2em; margin: 10px 0 0; font-size: .95rem; }
.signup .note.is-ok { color: #15803D; }
.signup .note.is-bad { color: #B91C1C; }
.signup .fineprint { margin: 6px 0 0; font-size: .85rem; color: var(--muted); }

/* Footer */
.footer { border-top: 1px solid var(--hairline); padding: 40px 0; font-size: .92rem; color: var(--muted); }
.footer .shell { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; }
.footer nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.footer a { color: var(--body); }

/* ---- Home page sections ---- */
/* B — centered product page: soft gray hero, screenshot bleeding out of it, three-up benefits, alternating rows. */
.hero { background: var(--sunk); padding: clamp(56px, 8vw, 96px) 0 0; text-align: center; overflow: hidden; }
.hero h1 { max-width: 24ch; margin: 0 auto .4em; }
.hero .lede { max-width: 50rem; margin: 0 auto 28px; }
.hero .cta-row { justify-content: center; }
.hero-shot { max-width: 1040px; margin: clamp(40px, 6vw, 64px) auto -1px; transform: translateY(1px); }
.hero-shot .frame { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 40px; }
.three h3 { margin: 12px 0 6px; }
.three p { margin: 0; }
.three .glyph { width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: #fff; display: grid; place-items: center; }
.three .glyph svg { width: 22px; height: 22px; }
.list { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.list .item { display: grid; grid-template-columns: 1fr; gap: 6px 24px; padding: 22px 24px; border-top: 1px solid var(--hairline); }
.list .item:first-child { border-top: 0; }
.list h3 { margin: 0; font-size: 1.05rem; }
.list p { margin: 0; font-size: .97rem; }
.list .state { font-size: .82rem; color: var(--muted); align-self: start; }
@media (min-width: 720px) { .list .item { grid-template-columns: 200px 1fr auto; align-items: start; } }
.ember { background: linear-gradient(135deg, #FFF1E6, #FFE3CC); border: 1px solid #FFD3B0; border-radius: 22px; padding: clamp(32px, 5vw, 60px); display: grid; gap: 24px; align-items: center; }
@media (min-width: 880px) { .ember { grid-template-columns: 1.3fr 1fr; } .ember .cta-row { justify-content: flex-end; } }
.ember p { color: #6B4A2E; }
.signup-wrap { text-align: center; }
.signup-wrap .signup { margin: 0 auto; }
.signup-wrap .fields { justify-content: center; }
.faq { display: grid; gap: 12px; max-width: 46rem; }
.faq details { border: 1px solid var(--line); border-radius: 12px; padding: 0 18px; background: #fff; }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--muted); font-weight: 500; }
.faq details[open] summary::after { content: '–'; }
.faq p { margin: 0 0 16px; }

/* Hero glow: a soft ember light that drifts slowly behind the screenshot. */
.hero { position: relative; }
.hero::before { content: ''; position: absolute; left: 50%; top: 42%; width: min(900px, 90vw); height: 520px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(234,106,10,.18), rgba(234,106,10,0)); filter: blur(10px); pointer-events: none; animation: glow 9s ease-in-out infinite alternate; }
.hero .shell { position: relative; }
@keyframes glow { from { transform: translateX(-56%) scale(.96); opacity: .8; } to { transform: translateX(-44%) scale(1.04); opacity: 1; } }
.three > div { transition: transform .35s ease; }
.list .item { transition: background-color .2s; }
.list .item:hover { background: var(--sunk); }
.faq details { transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: #F4C7A4; box-shadow: 0 8px 24px -18px rgba(234,106,10,.5); }

/* Coming next: dashed cards so they read as not-yet. */
.next-title { margin: 32px 0 12px; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.next { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.next .card { border: 1px dashed #C9CED9; border-radius: var(--r); padding: 20px 20px 18px; background: #fff; }
.next .card h3 { margin-bottom: 6px; font-size: 1.05rem; }
.next .card p { margin: 0 0 10px; font-size: .97rem; }
.next .state { font-size: .82rem; color: var(--muted); }
/* The one that is designed rather than merely planned reads solid, not dashed. */
.next .card--lead { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.next .state--now { color: var(--accent-ink, #B4490A); font-weight: 600; }

/* ---- Multi-page additions ---- */
.nav-quiet { color: var(--body); font-weight: 500; font-size: .95rem; white-space: nowrap; }
.nav-quiet:hover { color: var(--ink); text-decoration: none; }
.nav-links a[aria-current="page"], .drawer-nav a[aria-current="page"] { color: var(--accent-deep); }
@media (max-width: 860px) { .nav-quiet { display: none; } }
.link-more { font-weight: 600; }

/* Page hero: a short, left-aligned opener for inner pages */
.page-hero { background: var(--sunk); padding: clamp(44px, 6vw, 72px) 0 clamp(36px, 5vw, 56px); border-bottom: 1px solid var(--hairline); }
.page-hero h1 { max-width: 22ch; font-size: clamp(2rem, 4.4vw, 3.3rem); }
.page-hero .lede { max-width: 46rem; margin-bottom: 22px; }
.eyebrow { margin: 0 0 10px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.jump a { padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font-size: .9rem; font-weight: 500; }
.jump a:hover { border-color: var(--accent); text-decoration: none; }
.section--tight { padding: clamp(40px, 6vw, 72px) 0; }

/* Module cards on the home page */
.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 28px; }
.module-card { display: block; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: inherit; transition: border-color .2s, transform .2s, box-shadow .2s; }
.module-card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 16px 40px -28px rgba(14, 17, 22, .4); }
.module-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.module-card p { margin: 0; font-size: .95rem; color: var(--body); }
.module-card--more { background: var(--accent-soft); border-color: #FFD3B0; }

/* Kinds of form */
.kind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; }
.kind { padding: 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.kind h3 { margin: 0 0 6px; font-size: 1.05rem; }
.kind p { margin: 0; font-size: .95rem; }

/* Split: copy on the left, four short points on the right */
.split { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 880px) { .split { grid-template-columns: 1.1fr 1fr; gap: 56px; } }
.split-list { display: grid; gap: 18px; }
.split-list > div { padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.split-list h3 { margin: 0 0 4px; font-size: 1rem; }
.split-list p { margin: 0; font-size: .95rem; }
.copy code { padding: 2px 6px; border-radius: 6px; background: var(--sunk); font-size: .9em; }

/* Pricing */
.pricing-note { display: inline-block; margin: 0; padding: 10px 14px; border: 1px solid #FFD3B0; border-radius: 10px; background: var(--accent-soft); color: #6B4A2E; font-size: .95rem; }
.plans-title { margin: 0 0 14px; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.plans + .plans-title { margin-top: 44px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.plan { position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.plan h3 { margin: 0; font-size: 1.05rem; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 4px; }
.plan-price b { font-family: var(--display); font-size: 2.4rem; font-weight: 700; color: var(--ink); letter-spacing: -.03em; line-height: 1; }
.plan-price span { font-size: .9rem; color: var(--muted); font-weight: 500; }
.plan-price .plan-was { font-size: 1.15rem; font-weight: 600; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.plan-note { margin: 0; font-size: .9rem; color: var(--muted); }
.plan ul { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 9px; }
.plan li { position: relative; padding-left: 26px; font-size: .95rem; color: var(--body); }
.plan li::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-soft); }
.plan li::after { content: ''; position: absolute; left: 5px; top: 8px; width: 6px; height: 3px; border-left: 2px solid var(--accent-deep); border-bottom: 2px solid var(--accent-deep); transform: rotate(-45deg); }
.plan .btn { margin-top: auto; }
.btn-block { justify-content: center; width: 100%; }
.plan--featured { border-color: var(--accent); box-shadow: var(--shadow); }
.plan-tag { position: absolute; top: -11px; left: 22px; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.included { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 24px; }
.included > div { padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.included h3 { margin: 0 0 4px; font-size: 1rem; }
.included p { margin: 0; font-size: .93rem; }

/* Closing band */
.cta-band { position: relative; overflow: hidden; padding: clamp(36px, 5vw, 56px) 32px; border-radius: 22px; background: var(--ink); text-align: center; }
.cta-band::before { content: ''; position: absolute; inset: -60% 40% auto auto; width: 640px; height: 460px; background: radial-gradient(circle, rgba(234, 106, 10, .35), transparent 66%); filter: blur(14px); }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { max-width: 34rem; margin: 0 auto 22px; color: #C9CED9; }
.cta-band .cta-row { justify-content: center; }
.cta-band .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.cta-band .btn-ghost:hover { border-color: rgba(255, 255, 255, .6); }

/* Footer with columns */
.footer { padding: 52px 0 26px; }
.footer-in { display: grid; grid-template-columns: 1.15fr 2fr; gap: 44px; align-items: start; }
.footer-brand p { margin: 14px 0 0; max-width: 330px; font-size: .92rem; color: var(--muted); }
.footer-req { font-weight: 600; color: var(--body) !important; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.footer-cols h4 { margin: 0 0 12px; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); }
.footer-cols a { display: block; padding: 5px 0; font-size: .92rem; font-weight: 500; color: var(--body); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--hairline); font-size: .85rem; color: var(--muted); }
@media (max-width: 860px) { .footer-in { grid-template-columns: 1fr; gap: 28px; } .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .footer-cols { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Long-form reading — the comparison page
   -------------------------------------------------------------------------- */

/* A column of prose inside a .section, at a width that reads. */
.prose { max-width: 44rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h3 { margin-top: 1.8em; font-size: 1.15rem; }
.prose p { color: var(--body); }
.prose strong { color: var(--ink); }
.prose code { padding: 2px 6px; border-radius: 6px; background: var(--sunk); font-family: var(--mono); font-size: .88em; }
.prose ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 8px; color: var(--body); }

/* The at-a-glance table. Scrolls on its own rather than pushing the page
   sideways, and on a phone each row keeps its header beside it. */
.tablewrap { margin-top: 26px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.cmp { width: 100%; min-width: 680px; border-collapse: collapse; font-size: .95rem; }
.cmp th, .cmp td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); }
.cmp thead th { position: sticky; top: 0; background: var(--sunk); color: var(--ink); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody th { width: 22%; font-weight: 600; color: var(--ink); }
.cmp td { color: var(--body); }
.cmp tbody tr:hover td, .cmp tbody tr:hover th { background: var(--sunk); }

/* Two columns of "choose this when". */
.pair { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 26px; }
@media (min-width: 820px) { .pair { grid-template-columns: repeat(2, 1fr); } }
.pair > div { padding: 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.pair h3 { margin: 0 0 12px; font-size: 1.1rem; }
.pair ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 9px; font-size: .95rem; color: var(--body); }

/* A numbered list where the first sentence carries the point. */
.points { counter-reset: point; list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.points li { position: relative; padding: 20px 22px 18px 62px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); font-size: .97rem; color: var(--body); }
.points li::before { counter-increment: point; content: counter(point); position: absolute; left: 22px; top: 20px; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-deep); font-family: var(--mono); font-size: .8rem; font-weight: 700; display: grid; place-items: center; }
.points strong { display: block; margin-bottom: 4px; color: var(--ink); }

/* A quiet aside for a caveat. */
.caution { margin-top: 26px; padding: 20px 22px; border: 1px solid #FFD3B0; border-radius: var(--r); background: var(--accent-soft); }
.caution h3 { margin: 0 0 10px; font-size: 1.05rem; }
.caution ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 8px; font-size: .95rem; color: #6B4A2E; }

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

/* Two columns on desktop: the question and the transcript on the left, the
   answers on the right and sticky, so clicking never moves the thing you are
   about to click. One column on phones, in reading order. */
.quiz { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 56px; align-items: start; align-content: start; }

@media (min-width: 960px) {
  .quiz { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  /* Line the first answer up with the question, which sits below the progress
     row: the mark renders 85px tall at 60px wide (viewBox 124x176), plus the
     row's own 34px below it. */
  .quiz-side { position: sticky; top: 92px; padding-top: 119px; }
}
@media (max-width: 959px) {
  .quiz-main, .quiz-side { display: contents; }
  .quiz-progress { order: 1; }
  .ask { order: 2; }
  .answers { order: 3; margin-bottom: 30px; }
  .result { order: 4; }
  .thread { order: 5; }
  .quiz.is-done .answers { order: 6; margin: 28px 0 0; }
}

.quiz-progress { display: flex; align-items: center; gap: 18px; margin: 0 0 34px; }

/* The mark at progress size: the same geometry as the brand mark, smaller.
   Scoped to .slots so it never reaches the screenshot frames, which share
   the class name. */
.slots { flex: none; width: 60px; height: auto; overflow: visible; }
.slots .face-t { fill: var(--accent-hi); }
.slots .face-l { fill: var(--accent); }
.slots .face-r { fill: var(--accent-lo); }
.slots .frame { fill: none; stroke: var(--wire); stroke-width: 6; stroke-linejoin: round; border: 0; border-radius: 0; box-shadow: none; }
.slot { opacity: 0; transform: translateY(-18px); transition: opacity .32s ease, transform .5s cubic-bezier(.22, 1.18, .36, 1); }
.slot.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .slot { transition: none; } }

.quiz-count { margin: 0; font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.quiz-count b { color: var(--ink); }

.ask[hidden], .result[hidden], .thread[hidden] { display: none; }
.ask .step { margin: 0 0 10px; font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.ask h2 { margin: 0; font-size: clamp(1.5rem, 3.8vw, 2rem); outline: none; }

.options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.option {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--ink); font: inherit; font-size: .97rem;
  line-height: 1.4; text-align: left; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.option:hover { border-color: var(--wire); }
.option:active { transform: translateY(1px); }
/* The accent belongs to the action: the answer you just took, and the answer
   you gave last time when you come back to change it. */
.option.is-picked, .option.is-current { border-color: var(--accent); }
.option.is-picked { box-shadow: 0 0 0 3px rgba(234, 106, 10, .22); }
.option .key {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 6px;
  font-family: var(--mono); font-size: .72rem; font-weight: 700; color: var(--muted);
}
.option:hover .key, .option.is-current .key { border-color: var(--accent); color: var(--accent-deep); }
.option .label { min-width: 0; text-wrap: pretty; }

.answers .hint { margin: 14px 0 0; font-size: .82rem; color: var(--muted); }
.answers .links { margin-top: 0; flex-direction: column; align-items: stretch; }
.answers .links .btn-ghost { justify-content: center; }

/* The transcript: what you have said so far, quiet so the question stays
   the loudest thing on the page. */
.thread { list-style: none; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--hairline); }
.thread li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 2px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.thread .q { grid-column: 1; font-size: .84rem; color: var(--muted); }
.thread .a { grid-column: 1; font-size: 1rem; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.thread .change { grid-column: 2; grid-row: 1 / span 2; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--body); font: inherit; font-size: .82rem; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.thread .change:hover { border-color: var(--wire); color: var(--ink); }

/* Results. The cards are identical on purpose: whichever fits, it is shown
   the same way, and a close call shows both with equal weight. */
.verdict { margin: 0 0 12px; font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.tiebreak { margin: 0 0 18px; font-size: .97rem; color: var(--body); text-wrap: pretty; }
.fits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 700px) { .fits.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fit { padding: 24px 24px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); min-width: 0; box-shadow: var(--shadow); }
.fit h2 { margin: 0 0 10px; font-size: 1.5rem; outline: none; }
.fit p { margin: 0 0 12px; font-size: .95rem; color: var(--body); text-wrap: pretty; }
.fit .price { color: var(--ink); }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.fit .links { margin-top: 14px; }
.footnotes { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: .85rem; color: var(--muted); }
.footnotes li { padding-left: 14px; border-left: 2px solid var(--line); }
button.btn-ghost { cursor: pointer; font: inherit; font-size: .95rem; font-weight: 600; }