/* ═══════════════════════════════════════════════════════════════════════
   RAGULIKA IP — PATENT ASSISTANT
   Design system. Every brand value lives in :root — retune here only.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ---- brand ---- */
  --ink:            #12161d;
  --ink-2:          #2a3140;
  --ink-3:          #545c6b;
  --ink-4:          #7d8593;
  --line:           #e3e6ec;
  --line-2:         #eef0f4;
  --paper:          #ffffff;
  --paper-2:        #f8f9fb;
  --paper-3:        #f1f3f7;

  --brand:          #1b4dcc;
  --brand-deep:     #12358f;
  --brand-tint:     #eaf0ff;
  --brand-line:     #c3d3fb;

  /* ---- semantic: risk ---- */
  --critical:       #b4231f;
  --critical-bg:    #fdf0ef;
  --critical-line:  #f5cdc9;
  --high:           #b45309;
  --high-bg:        #fdf5e9;
  --high-line:      #f2ddb8;
  --medium:         #8a6d0b;
  --medium-bg:      #fdfae9;
  --medium-line:    #eee5b4;
  --low:            #196b45;
  --low-bg:         #edf7f1;
  --low-line:       #bfe0cd;
  --neutral:        #545c6b;
  --neutral-bg:     #f1f3f7;

  /* ---- layers: official vs calculated ---- */
  --official:       #0f4c5c;
  --official-bg:    #eef6f8;
  --official-line:  #c2dde4;
  --calculated:     #4c3a8f;
  --calculated-bg:  #f3f0fc;
  --calculated-line:#d8cff2;

  /* ---- type ---- */
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- space & shape ---- */
  --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 22px;
  --sh-1: 0 1px 2px rgba(18,22,29,.05), 0 1px 3px rgba(18,22,29,.04);
  --sh-2: 0 2px 4px rgba(18,22,29,.04), 0 8px 20px rgba(18,22,29,.06);
  --sh-3: 0 4px 8px rgba(18,22,29,.05), 0 16px 40px rgba(18,22,29,.09);
  --maxw: 1220px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #eef1f6; --ink-2: #cdd3de; --ink-3: #98a1b1; --ink-4: #767f8f;
    --line: #262c38; --line-2: #1d222c;
    --paper: #0e1117; --paper-2: #141922; --paper-3: #1a202b;
    --brand: #7ba0ff; --brand-deep: #a3bcff; --brand-tint: #16203a; --brand-line: #29406e;
    --critical: #ff8b83; --critical-bg: #2a1614; --critical-line: #56241f;
    --high: #f0ad55; --high-bg: #2a1e10; --high-line: #543a18;
    --medium: #e0c65c; --medium-bg: #262010; --medium-line: #4d421c;
    --low: #6ed3a0; --low-bg: #10241a; --low-line: #1e4a33;
    --neutral: #98a1b1; --neutral-bg: #1a202b;
    --official: #7fc7d9; --official-bg: #10242a; --official-line: #1f4652;
    --calculated: #b6a5f0; --calculated-bg: #1c1730; --calculated-line: #372c60;
    --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 6px 18px rgba(0,0,0,.45);
    --sh-3: 0 16px 44px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  --ink: #eef1f6; --ink-2: #cdd3de; --ink-3: #98a1b1; --ink-4: #767f8f;
  --line: #262c38; --line-2: #1d222c;
  --paper: #0e1117; --paper-2: #141922; --paper-3: #1a202b;
  --brand: #7ba0ff; --brand-deep: #a3bcff; --brand-tint: #16203a; --brand-line: #29406e;
  --critical: #ff8b83; --critical-bg: #2a1614; --critical-line: #56241f;
  --high: #f0ad55; --high-bg: #2a1e10; --high-line: #543a18;
  --medium: #e0c65c; --medium-bg: #262010; --medium-line: #4d421c;
  --low: #6ed3a0; --low-bg: #10241a; --low-line: #1e4a33;
  --neutral: #98a1b1; --neutral-bg: #1a202b;
  --official: #7fc7d9; --official-bg: #10242a; --official-line: #1f4652;
  --calculated: #b6a5f0; --calculated-bg: #1c1730; --calculated-line: #372c60;
  --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 6px 18px rgba(0,0,0,.45);
  --sh-3: 0 16px 44px rgba(0,0,0,.55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper-2); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: var(--serif); font-weight: 600; line-height: 1.22;
  letter-spacing: -.011em; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
h3 { font-size: 1.18rem; }
h4 { font-size: 1rem; font-family: var(--sans); font-weight: 650; }
p  { margin: 0 0 1em; }
a  { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: .8125rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.stack > * + * { margin-top: var(--gap, 1rem); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--ink-3); }
.tiny { font-size: .78rem; }
.mono { font-family: var(--mono); font-size: .86em; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.hide { display: none !important; }
@media (max-width: 720px) { .hide-sm { display: none !important; } }

/* ─────────────────────────────── header ─────────────────────────────── */
.site-head {
  background: var(--paper); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 60;
}
.site-head .wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif);
  font-size: 1.16rem; font-weight: 620; color: var(--ink); letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: linear-gradient(140deg, var(--brand) 0%, var(--brand-deep) 100%);
  display: grid; place-items: center; color: #fff; font-weight: 700;
  font-family: var(--sans); font-size: .82rem; letter-spacing: .02em;
}
.brand-sub { color: var(--ink-4); font-family: var(--sans); font-size: .78rem;
  font-weight: 500; border-left: 1px solid var(--line); padding-left: 10px; margin-left: 2px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a { padding: 7px 12px; border-radius: var(--r-sm); color: var(--ink-2);
  font-size: .9rem; font-weight: 500; }
.nav a:hover { background: var(--paper-3); text-decoration: none; }
.nav a.on { color: var(--brand); background: var(--brand-tint); }

/* ─────────────────────────────── buttons ────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--r); border: 1px solid transparent;
  font-family: var(--sans); font-size: .92rem; font-weight: 570; line-height: 1.2;
  cursor: pointer; transition: background .15s, border-color .15s, transform .06s;
  text-decoration: none; background: var(--paper); color: var(--ink);
  border-color: var(--line);
}
.btn:hover { text-decoration: none; background: var(--paper-3); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.btn-critical { background: var(--critical); border-color: var(--critical); color: #fff; }
.btn-critical:hover { filter: brightness(.93); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--brand); }
.btn-ghost:hover { background: var(--brand-tint); }
.btn-lg { padding: 14px 26px; font-size: 1rem; border-radius: var(--r); }
.btn-sm { padding: 7px 12px; font-size: .82rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ─────────────────────────────── cards ──────────────────────────────── */
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.card-p { padding: 22px; }
.card-head {
  padding: 16px 22px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-head h3, .card-head h2 { margin: 0; }
.card-body { padding: 22px; }
.card-foot { padding: 14px 22px; border-top: 1px solid var(--line-2); background: var(--paper-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* ────────────────────────────── badges ──────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 100px; font-size: .74rem; font-weight: 600;
  letter-spacing: .015em; border: 1px solid; white-space: nowrap;
  background: var(--neutral-bg); color: var(--neutral); border-color: var(--line);
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.risk-critical { background: var(--critical-bg); color: var(--critical); border-color: var(--critical-line); }
.risk-high     { background: var(--high-bg);     color: var(--high);     border-color: var(--high-line); }
.risk-medium   { background: var(--medium-bg);   color: var(--medium);   border-color: var(--medium-line); }
.risk-low      { background: var(--low-bg);      color: var(--low);      border-color: var(--low-line); }
.risk-none     { background: var(--neutral-bg);  color: var(--neutral);  border-color: var(--line); }

/* Layer provenance — official vs calculated must be visually unmistakable */
.layer-official {
  background: var(--official-bg); color: var(--official); border-color: var(--official-line);
}
.layer-calculated {
  background: var(--calculated-bg); color: var(--calculated); border-color: var(--calculated-line);
}
.layer-user { background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand-line); }

.panel-official {
  border-left: 3px solid var(--official); background: var(--official-bg);
}
.panel-calculated {
  border-left: 3px solid var(--calculated); background: var(--calculated-bg);
}
.panel-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  display: block; margin-bottom: 8px;
}
.panel-official .panel-label { color: var(--official); }
.panel-calculated .panel-label { color: var(--calculated); }

/* ─────────────────────────── action cards ───────────────────────────── */
.action {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
  padding: 20px 22px; box-shadow: var(--sh-1); position: relative; overflow: hidden;
}
.action::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--neutral);
}
.action.is-critical::before { background: var(--critical); }
.action.is-high::before     { background: var(--high); }
.action.is-medium::before   { background: var(--medium); }
.action.is-low::before      { background: var(--low); }
.action-primary { box-shadow: var(--sh-2); border-color: var(--line); padding: 26px 28px; }
.action-title { font-family: var(--serif); font-size: 1.35rem; font-weight: 620;
  margin: 0 0 4px; letter-spacing: -.012em; }
.action-primary .action-title { font-size: 1.7rem; }

.countdown { display: flex; align-items: baseline; gap: 8px; }
.countdown-n { font-family: var(--serif); font-size: 2.9rem; font-weight: 640;
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.countdown-u { font-size: .84rem; color: var(--ink-3); font-weight: 550; }
.is-critical .countdown-n { color: var(--critical); }
.is-high .countdown-n     { color: var(--high); }
.is-medium .countdown-n   { color: var(--medium); }
.is-low .countdown-n      { color: var(--low); }

.datebar { display: grid; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2);
  border-radius: var(--r); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.datebar > div { background: var(--paper); padding: 12px 14px; }
.datebar dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-4); font-weight: 650; margin: 0 0 3px; }
.datebar dd { margin: 0; font-size: .96rem; font-weight: 560; font-variant-numeric: tabular-nums; }

/* ─────────────────────────────── health ─────────────────────────────── */
.health { display: flex; align-items: center; gap: 18px; }
.health-ring { --v: 0; width: 92px; height: 92px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--hc, var(--brand)) calc(var(--v) * 1%), var(--paper-3) 0);
  display: grid; place-items: center; position: relative; }
.health-ring::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--paper); }
.health-num { position: relative; z-index: 1; font-family: var(--serif); font-size: 1.6rem;
  font-weight: 640; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.health-strong    { --hc: var(--low); }
.health-fair      { --hc: var(--medium); }
.health-attention { --hc: var(--high); }
.health-urgent    { --hc: var(--critical); }

.factor { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--line-2); font-size: .89rem; }
.factor:last-child { border-bottom: 0; }
.factor-d { font-variant-numeric: tabular-nums; font-weight: 620; }
.factor-d.neg { color: var(--critical); }
.factor-d.zero { color: var(--low); }

/* ─────────────────────────────── timeline ───────────────────────────── */
.tl { position: relative; padding-left: 30px; }
.tl::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line); border-radius: 2px; }
.tl-item { position: relative; padding: 0 0 24px; }
.tl-item::before {
  content: ''; position: absolute; left: -26px; top: 5px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--paper); border: 2.5px solid var(--line-2);
}
.tl-item.done::before   { background: var(--official); border-color: var(--official); }
.tl-item.active::before { background: var(--brand); border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-tint); }
.tl-item.future::before { background: var(--paper); border-color: var(--line); }
.tl-when { font-size: .76rem; color: var(--ink-4); font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; }
.tl-what { font-weight: 570; margin: 1px 0 2px; }

/* ─────────────────────────────── tables ────────────────────────────── */
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
table.t { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; }
table.t th { text-align: left; padding: 12px 16px; font-size: .72rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4);
  background: var(--paper-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
table.t td { padding: 13px 16px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.t tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover { background: var(--paper-2); }
.num { font-variant-numeric: tabular-nums; }

/* ─────────────────────────────── forms ─────────────────────────────── */
.field { margin-bottom: 18px; }
.field label, .lbl { display: block; font-size: .84rem; font-weight: 600;
  margin-bottom: 6px; color: var(--ink-2); }
.hint { font-size: .8rem; color: var(--ink-3); margin-top: 5px; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], select, textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: .95rem;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 130px; resize: vertical; font-family: var(--mono); font-size: .85rem; line-height: 1.55; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint);
}
input::placeholder, textarea::placeholder { color: var(--ink-4); }
.field-err input, .field-err textarea { border-color: var(--critical); }
.err-msg { color: var(--critical); font-size: .82rem; margin-top: 5px; font-weight: 550; }

/* ─────────────────────────────── alerts ────────────────────────────── */
.alert { padding: 14px 18px; border-radius: var(--r); border: 1px solid; font-size: .91rem;
  display: flex; gap: 11px; align-items: flex-start; }
.alert-success { background: var(--low-bg); border-color: var(--low-line); color: var(--low); }
.alert-error   { background: var(--critical-bg); border-color: var(--critical-line); color: var(--critical); }
.alert-warning { background: var(--high-bg); border-color: var(--high-line); color: var(--high); }
.alert-info    { background: var(--brand-tint); border-color: var(--brand-line); color: var(--brand-deep); }
.alert strong { font-weight: 660; }

/* ────────────────────────── freshness strip ────────────────────────── */
.fresh { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem;
  color: var(--ink-3); padding: 5px 11px; border-radius: 100px;
  background: var(--paper-3); border: 1px solid var(--line); }
.fresh-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.fresh-green  .fresh-dot { background: var(--low); }
.fresh-amber  .fresh-dot { background: var(--medium); }
.fresh-orange .fresh-dot { background: var(--high); }
.fresh-red    .fresh-dot { background: var(--critical); }

/* ─────────────────────────── checklist ─────────────────────────────── */
.check { list-style: none; padding: 0; margin: 0; }
.check li { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0;
  border-bottom: 1px solid var(--line-2); }
.check li:last-child { border-bottom: 0; }
.check input[type=checkbox] { width: 17px; height: 17px; margin: 3px 0 0; flex: none; accent-color: var(--brand); }
.check li.is-done label { color: var(--ink-4); text-decoration: line-through; }
.check label { font-size: .92rem; cursor: pointer; margin: 0; font-weight: 500; }

.progress { height: 6px; border-radius: 4px; background: var(--paper-3); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--brand); border-radius: 4px;
  transition: width .5s cubic-bezier(.4,0,.2,1); }

/* ────────────────────────────── landing ───────────────────────────── */
.hero { padding: 84px 0 56px; text-align: center; }
.hero h1 { max-width: 17ch; margin: 0 auto .5em; }
.hero-sub { font-size: clamp(1.02rem, .96rem + .4vw, 1.22rem); color: var(--ink-3);
  max-width: 60ch; margin: 0 auto 34px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .76rem;
  font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--brand);
  background: var(--brand-tint); border: 1px solid var(--brand-line);
  padding: 6px 14px; border-radius: 100px; margin-bottom: 22px; }
.loop { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.loop-step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px; text-align: center; box-shadow: var(--sh-1); }
.loop-step b { display: block; font-size: .82rem; font-weight: 640; margin-bottom: 2px; }
.loop-step span { font-size: .74rem; color: var(--ink-4); }

.grid-3 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.grid-2 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ─────────────────────────── dashboard shell ───────────────────────── */
.dash { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
@media (max-width: 1000px) { .dash { grid-template-columns: minmax(0, 1fr); } }
.section-title { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 14px; }
.section-title h2 { margin: 0; font-size: 1.28rem; }
.section-title span { font-size: .82rem; color: var(--ink-4); }

/* ───────────────────────────── calendar ───────────────────────────── */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--line-2); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; }
.cal-h { background: var(--paper-2); padding: 8px 6px; text-align: center;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.cal-d { background: var(--paper); min-height: 84px; padding: 6px 7px; position: relative; }
.cal-d.out { background: var(--paper-2); color: var(--ink-4); }
.cal-d.today { background: var(--brand-tint); }
.cal-n { font-size: .78rem; font-weight: 620; font-variant-numeric: tabular-nums; }
.cal-e { display: block; font-size: .68rem; padding: 2px 5px; border-radius: 4px;
  margin-top: 3px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-e.statutory { background: var(--critical-bg); color: var(--critical); }
.cal-e.internal  { background: var(--high-bg); color: var(--high); }
.cal-e.reminder  { background: var(--medium-bg); color: var(--medium); }
.cal-e.done      { background: var(--low-bg); color: var(--low); }

/* ───────────────────────────── chat ───────────────────────────────── */
.chat { display: flex; flex-direction: column; gap: 14px; max-height: 460px; overflow-y: auto; padding: 4px; }
.msg { max-width: 88%; padding: 12px 15px; border-radius: var(--r-lg); font-size: .92rem; line-height: 1.55; }
.msg-user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 5px; }
.msg-bot { align-self: flex-start; background: var(--paper-3); border: 1px solid var(--line);
  border-bottom-left-radius: 5px; }
.msg-bot .cite { display: block; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: .76rem; color: var(--ink-4); }

/* ───────────────────────────── footer ─────────────────────────────── */
.site-foot { border-top: 1px solid var(--line); background: var(--paper);
  margin-top: 64px; padding: 34px 0; font-size: .85rem; color: var(--ink-3); }
.disclaimer { background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 17px; font-size: .82rem; color: var(--ink-3); line-height: 1.6; }

/* ───────────────────────────── motion ─────────────────────────────── */
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fade-up .32s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ───────────────────────────── mobile ─────────────────────────────── */
@media (max-width: 720px) {
  body { font-size: 15.5px; }
  .hero { padding: 52px 0 36px; }
  .card-p, .card-body { padding: 17px; }
  .action { padding: 17px; }
  .action-primary { padding: 20px 18px; }
  .countdown-n { font-size: 2.4rem; }
  .site-head .wrap { height: 58px; gap: 12px; }
  .brand-sub { display: none; }
  .nav a { padding: 6px 9px; font-size: .84rem; }
}
@media print {
  .site-head, .site-foot, .nav, .btn { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; }
}

/* ─────────────────────────── disclaimer ───────────────────────────── */
.disclaimer-inline{
  font-size:.79rem; color:var(--ink-3); margin:10px 0 0; line-height:1.5;
  padding-left:11px; border-left:2px solid var(--line);
}
.ack-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:var(--paper); border-top:1px solid var(--line);
  box-shadow:0 -4px 20px rgba(18,22,29,.08); padding:16px 0;
}
.ack-bar .wrap{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.ack-bar p{margin:0; font-size:.85rem; color:var(--ink-2); flex:1 1 380px; line-height:1.55}

/* ───────────────────────── next step card ─────────────────────────── */
.nextstep{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-2); padding:30px 32px; position:relative; overflow:hidden;
}
.nextstep::before{content:''; position:absolute; inset:0 auto 0 0; width:5px; background:var(--neutral)}
.nextstep.u-critical::before{background:var(--critical)}
.nextstep.u-high::before{background:var(--high)}
.nextstep.u-medium::before{background:var(--medium)}
.nextstep.u-low::before,.nextstep.u-none::before{background:var(--low)}
.nextstep .eyebrow{margin-bottom:14px}
.nextstep h2{font-size:clamp(1.35rem,1.1rem+1vw,1.85rem); margin:0 0 12px; max-width:26ch}
.nextstep .why{font-size:1rem; color:var(--ink-2); max-width:62ch; margin:0 0 8px}
.nextstep .detail{font-size:.9rem; color:var(--ink-3); max-width:62ch; margin:0 0 20px}
.nextstep .alts{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;
  padding-top:16px; border-top:1px solid var(--line-2)}
.nextstep .alts a{font-size:.82rem; color:var(--ink-3); padding:5px 11px;
  border:1px solid var(--line); border-radius:100px; background:var(--paper-2)}
.nextstep .alts a:hover{text-decoration:none; color:var(--brand); border-color:var(--brand-line);
  background:var(--brand-tint)}
@media (max-width:720px){.nextstep{padding:20px 18px}}

/* ─────────────────────────── one question ─────────────────────────── */
.question{max-width:620px; margin:0 auto}
.question h1{font-size:clamp(1.5rem,1.2rem+1.4vw,2.15rem); margin:0 0 14px; text-wrap:balance}
.question .help{font-size:.95rem; color:var(--ink-3); margin:0 0 26px; line-height:1.62}
.choices{display:flex; flex-direction:column; gap:10px; margin-bottom:22px}
.choice{display:block; width:100%; text-align:left; padding:15px 18px; font-size:1rem;
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper);
  cursor:pointer; font-family:var(--sans); font-weight:520; color:var(--ink);
  transition:border-color .14s, background .14s}
.choice:hover{border-color:var(--brand); background:var(--brand-tint)}
.choice.unsure{color:var(--ink-3); font-weight:450}
.qprogress{font-size:.78rem; color:var(--ink-4); margin-bottom:20px;
  font-variant-numeric:tabular-nums; letter-spacing:.03em}