/* ---- Theme tokens (WCAG AA verified) --------------------------------------
   Same token names + same day/night mechanism as the rest of the SMARt
   fleet (SMARtCheck etc.): --bg/--panel/--panel-2/--text/--muted/--border/
   --accent/--accent-btn, [data-theme] on <html>, localStorage key
   "smartra-theme". Brand hue is SMARtRA's own (violet); every text/bg
   pairing is checked to >=4.5:1 (WCAG 2.1 SC 1.4.3). The S/M/A/Rt FOUR-RUNG
   SCALE LOGIC is unchanged by theming — only the underlying colors swap. */
:root {
  --radius: 14px;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Dark (default until we know otherwise) */
:root, :root[data-theme="dark"] {
  --bg: #0f1220;
  --panel: #171a2b;
  --panel-2: #1e2236;
  --text: #eef0f8;
  --muted: #9aa0be;          /* 7.22:1 on --bg */
  --border: #2a2f47;
  --accent: #6c7bff;         /* 5.25:1 on --bg */
  --accent-btn: #4c56cf;     /* white text: 5.93:1 (plain --accent only gives 3.55:1) */
  --accent-2: #22d3aa;       /* 9.72:1 on --bg */
  --s: #22c55e;              /* 8.17:1 on --bg */
  --m: #3b82f6;              /* 5.06:1 on --bg */
  --a: #f59e0b;              /* 8.67:1 on --bg */
  --rt: #ef4444;             /* 4.95:1 on --bg */
}

/* Light */
:root[data-theme="light"] {
  --bg: #f7f8fc;
  --panel: #ffffff;
  --panel-2: #eef0f7;
  --text: #14172a;
  --muted: #565b78;          /* 6.26:1 on --bg */
  --border: #dfe2ee;
  --accent: #4f5edb;         /* 5.00:1 on --bg */
  --accent-btn: #4451c2;     /* white text: 6.56:1 */
  --accent-2: #0d7a6c;       /* 4.77:1 on --bg (darkened from dark-mode teal for text use) */
  --s: #16803c;              /* 4.73:1 on --bg */
  --m: #1d4ed8;              /* 6.31:1 on --bg */
  --a: #b45309;              /* 4.73:1 on --bg */
  --rt: #b91c1c;             /* 6.10:1 on --bg */
}

@media not all { /* default is dark; light only by the toggle */
  :root:not([data-theme]) {
    --bg: #f7f8fc; --panel: #ffffff; --panel-2: #eef0f7; --text: #14172a;
    --muted: #565b78; --border: #dfe2ee;
    --accent: #4f5edb; --accent-btn: #4451c2; --accent-2: #0d7a6c;
    --s: #16803c; --m: #1d4ed8; --a: #b45309; --rt: #b91c1c;
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body {
  background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column;
  transition: background-color 0.2s ease, color 0.2s ease;
}
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Top bar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  /* Extra right padding reserves a lane for the fixed theme-toggle circle
     (36px + 18px offset) so it never sits on top of the Pro tab. */
  padding: 14px 64px 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--panel); position: sticky; top: 0; z-index: 10;
}

/* Theme toggle — same convention as the rest of the SMARt fleet: a single
   fixed circular icon button, top-right, that cycles day/night. */
.theme-toggle {
  position: fixed; top: 18px; right: 18px; z-index: 20;
  width: 36px; height: 36px; border-radius: 50%; padding: 0;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  font-size: 15px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-family: inherit;
}
.theme-toggle:hover { border-color: var(--accent); }
.brand { display: flex; flex-direction: column; }
.logo { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.logo .ra { color: var(--accent-2); }
.tagline { font-size: 11px; color: var(--muted); }

.wrap { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 32px 24px 56px; }
/* Host-gated panes (see hostRouting.js): each domain shows exactly one. */
.tabpane { display: none; }
.tabpane.active { display: block; }

/* Cross-link between the two domains (bottom of each pane). */
.cross-link { margin-top: 28px; font-size: 13.5px; color: var(--muted); text-align: center; }
.cross-link a { color: var(--accent); font-weight: 600; text-decoration: none; }
.cross-link a:hover { text-decoration: underline; }

/* Hero */
.hero h1 { font-size: 27px; font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; }
.hero .sub, .pro-hero .sub { color: var(--muted); font-size: 15px; line-height: 1.55; margin-top: 10px; }
.hero { margin-bottom: 22px; }

/* Composer */
.composer { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.lbl { font-size: 13px; font-weight: 600; display: block; margin-bottom: 8px; }
#idea, #paperIdea, #refCheckText {
  width: 100%; resize: vertical; background: #ffffff; color: #1a1a2e;
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  font-size: 14px; line-height: 1.5;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
#idea:focus, #paperIdea:focus, #refCheckText:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.composer-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 12px; }
.micro { font-size: 12px; color: var(--muted); }

/* Upload-a-document affordance under the idea textarea (both free and paid composers) */
.upload-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.upload-row input[type="file"] { display: none; }
.upload-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; color: var(--text); font-weight: 600;
}
.upload-btn:hover { border-color: var(--accent); }
.upload-filename { font-size: 12px; color: var(--muted); }
.upload-filename.has-file { color: var(--text); font-weight: 600; }
.upload-clear { font-size: 12px; color: var(--muted); text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; }

/* Pre-flight idea-shaping quiz */
.signal-quiz { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.signal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; flex-wrap: wrap; }
.signal-statement { font-size: 13px; flex: 1 1 260px; }
.signal-choices { display: flex; gap: 6px; flex-shrink: 0; }
.signal-btn {
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--muted);
  cursor: pointer; font-family: inherit;
}
.signal-btn:hover { border-color: var(--accent); }
.signal-btn.active { background: var(--accent-btn); color: white; border-color: transparent; }
#signalNote {
  width: 100%; resize: vertical; background: #ffffff; color: #1a1a2e;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  font-size: 13px; line-height: 1.4; margin-top: 6px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
#signalNote:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }

/* Refinement-tries counter: visually explicit dots + label, not just a sentence */
.paper-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tries-counter { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.tries-dots { display: flex; gap: 4px; }
.tries-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--border); }
.tries-dot.filled { background: var(--accent-btn); }
.tries-dot.spent { background: #e5484d; }
.tries-label { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.tries-label.spent-label { color: #e5484d; }

.btn {
  display: inline-block; text-decoration: none; text-align: center;
  border: none; border-radius: 10px; padding: 11px 18px; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: filter 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent-btn); color: white; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.lg { padding: 14px 24px; font-size: 15px; margin-top: 8px; }
.btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.btn.ghost:hover { color: var(--text); }

/* Result */
.result { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.block { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.block h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 12px; }

/* .card: the generated-paper view (title, each section, references,
   download, confidence-scoring). Was previously used throughout
   explorer.js's renderPaper() with no matching rule anywhere in this file —
   every one of those blocks rendered with no background/border/padding at
   all. Mirrors .block's look so the paper view matches the rest of the app. */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.card:last-child { margin-bottom: 0; }
.card h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
.card h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.card p { font-size: 14px; line-height: 1.6; color: var(--text); }
.card ol { padding-left: 20px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.card ol li { margin-bottom: 4px; }

/* Paper layout: sticky section-nav sidebar + main reading column. Keeps the
   whole paper readable straight through (unlike hard tabs, which would hide
   every other section) while still giving quick jump-navigation. */
.paper-layout { display: flex; gap: 20px; align-items: flex-start; }
.paper-main { flex: 1 1 auto; min-width: 0; }
.paper-toc {
  flex: 0 0 200px; position: sticky; top: 16px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px; max-height: calc(100vh - 32px); overflow-y: auto;
}
.toc-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px;
  font-size: 12.5px; color: var(--muted); text-decoration: none; line-height: 1.3;
}
.toc-row:hover { background: var(--panel-2); color: var(--text); }
.toc-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.confidence-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
@media (max-width: 760px) {
  .paper-layout { flex-direction: column; }
  .paper-toc { position: static; flex-basis: auto; max-height: none; width: 100%; }
}

/* Lead skeleton */
.block.skeleton.lead { background: linear-gradient(160deg, rgba(108,123,255,0.12), rgba(34,211,170,0.06)); border-color: rgba(108,123,255,0.35); }
.lead-title { font-size: 17px !important; font-weight: 800 !important; color: var(--text) !important; text-transform: none !important; letter-spacing: -0.3px !important; margin-bottom: 14px !important; }
.sk-section { margin-bottom: 16px; }
.sk-section:last-of-type { margin-bottom: 4px; }
.sk-head { font-size: 14px; font-weight: 700; margin-bottom: 7px; }
.sk-bullets { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sk-bullets li { font-size: 13.5px; line-height: 1.45; padding-left: 16px; position: relative; }
.sk-bullets li::before { content: "•"; position: absolute; left: 3px; color: var(--accent); }
.sk-paid { margin-top: 7px; font-size: 12.5px; color: var(--accent-2); padding-left: 16px; position: relative; line-height: 1.45; }
.sk-paid::before { content: "★"; position: absolute; left: 0; }
.skeleton-foot { margin-top: 12px; font-size: 12.5px; color: var(--muted); font-style: italic; }

/* Divider */
.divider { display: flex; align-items: center; text-align: center; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; gap: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Strength scale */
.scale { display: flex; flex-direction: column; gap: 10px; }
.scale-track { display: flex; gap: 8px; }
.rung { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rung .dot { width: 100%; height: 7px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--border); }
.rung-label { font-size: 12px; color: var(--muted); text-align: center; }
.rung.current .rung-label { font-weight: 700; color: var(--text); }
.scale.s .rung.current .rung-label { color: var(--s); }
.scale.m .rung.current .rung-label { color: var(--m); }
.scale.a .rung.current .rung-label { color: var(--a); }
.scale.rt .rung.current .rung-label { color: var(--rt); }
.rung.current .dot { height: 10px; }
.scale-note { font-size: 13.5px; color: var(--muted); }

/* Promising / gaps lists */
.block ul.pts { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.block ul.pts li { font-size: 14px; line-height: 1.5; padding-left: 20px; position: relative; }
.block.promising li::before { content: "✓"; position: absolute; left: 0; color: var(--s); font-weight: 700; }
.block.gaps li::before { content: "!"; position: absolute; left: 3px; color: var(--a); font-weight: 700; }
.block.plug p { font-size: 14px; line-height: 1.55; }

/* Honest rejection panel */
.honest { background: linear-gradient(160deg, rgba(239,68,68,0.10), rgba(245,158,11,0.05)); border-color: rgba(239,68,68,0.35); }
.honest .h-title { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.honest p { font-size: 14px; line-height: 1.55; color: var(--text); margin-bottom: 10px; }
.honest .h-ask { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.honest .h-redirect { font-size: 13px; color: var(--muted); font-style: italic; margin-top: 10px; margin-bottom: 0; }

/* CTA */
.cta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cta-text { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* Pro tab */
.pro-hero h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.pro-list { margin: 18px 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pro-list li { font-size: 14.5px; line-height: 1.5; padding-left: 24px; position: relative; }
.pro-list li::before { content: "★"; position: absolute; left: 0; color: var(--accent-2); }

/* Footer */
.foot { border-top: 1px solid var(--border); padding: 14px 24px; font-size: 12px; color: var(--muted); }
.foot-legal { text-align: center; font-size: 11.5px; margin-top: 4px; }
.foot-legal a { color: var(--fleet-link, inherit); text-decoration: none; }
.foot-legal a:hover { text-decoration: underline; }
/* Canonical SMARt-fleet footer suite-row — this is the reference copy;
   every other app's suite-row/suite-item/suite-contact-link CSS should
   match these values (font-size, gap, colors) for cross-app consistency. */
.suite-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; font-size: 11.5px; }
.suite-left { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.suite-brand { font-weight: 600; color: var(--text) !important; }
.suite-label { color: var(--muted); }
.suite-item { display: inline-flex; align-items: center; gap: 6px; }
.suite-item a { color: var(--accent); }
.suite-current { color: var(--accent); font-weight: 600; }
.suite-contact-link { color: var(--muted); white-space: nowrap; }
.suite-contact-link:hover { color: var(--accent); }

@media (max-width: 560px) {
  .hero h1 { font-size: 22px; }
  .rung-label { font-size: 10px; }
  .topbar { flex-direction: column; gap: 10px; align-items: flex-start; }
}

/* ---- SMARtRA product tabs (Draft / Score / Write) and the SMARt Scorecard view ---- */
.product-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; }
@media (max-width: 900px) { .product-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) {
  .product-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ptab { min-height: 84px; padding: 10px 6px; }
  .ptab .pname { font-size: 13px; }
  .ptab .pprice { font-size: 16px; }
  .ptab .pwho { font-size: 11px; }
}
.ptab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-align: center; padding: 14px 12px; min-height: 92px; border-radius: 12px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); color: var(--text); font: inherit;
}
.ptab:hover, .ptab:focus-visible { border-color: var(--accent); outline: none; }
.ptab.active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); background: var(--panel-2); }
.ptab .pname { font-weight: 700; font-size: 15px; }
.ptab .pname b { color: var(--accent-2); font-weight: 800; }
.ptab .pprice { font-size: 18px; font-weight: 800; }
.ptab .pwho { font-size: 12px; color: var(--muted); }
.ptab-pane[hidden] { display: none; }
.tab-tip {
  position: absolute; z-index: 50; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.5; box-shadow: 0 8px 28px rgba(0,0,0,.35); pointer-events: none;
}
.qm { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); font-size: 11px; cursor: help; }
.field-input { padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); width: 100%; font: inherit; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .field-grid { grid-template-columns: 1fr; } }
.form-h { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.req { color: #e5484d; }
.consent-row { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; }
.consent-row input { margin-top: 3px; }
.code-shown { margin-top: 14px; padding: 14px; border: 1px dashed var(--accent); border-radius: 10px; background: var(--panel-2); }
.code-big { font-size: 24px; font-weight: 800; letter-spacing: 1px; margin: 6px 0; font-family: ui-monospace, Menlo, Consolas, monospace; }
.table-wrap { overflow-x: auto; }
.sc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sc-table th, .sc-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.sc-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-weight: 800; font-size: 12px; color: #fff; white-space: nowrap; }
.sc-chip small { font-weight: 600; opacity: .9; }
.sc-chip.sc-S { background: var(--s); } .sc-chip.sc-M { background: var(--m); }
.sc-chip.sc-A { background: var(--a); } .sc-chip.sc-Rt { background: var(--rt); }
.sc-banner { border-left: 6px solid var(--border); }
.sc-banner.sc-S { border-left-color: var(--s); } .sc-banner.sc-M { border-left-color: var(--m); }
.sc-banner.sc-A { border-left-color: var(--a); } .sc-banner.sc-Rt { border-left-color: var(--rt); }
.sc-card { border-left: 5px solid var(--border); }
.sc-card.sc-S { border-left-color: var(--s); } .sc-card.sc-M { border-left-color: var(--m); }
.sc-card.sc-A { border-left-color: var(--a); } .sc-card.sc-Rt { border-left-color: var(--rt); }
.sc-card summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; font-weight: 700; }
.sc-card h4, .sc-banner h4 { font-size: 13px; margin: 12px 0 4px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.sc-card ul, .sc-card ol, .card ul.chk-list { padding-left: 20px; font-size: 13px; line-height: 1.6; }
.chk-list { list-style: none; padding-left: 0 !important; }
.chk-list li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.pill { font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; margin-left: 6px; }
.chk-pass .pill { background: var(--s); color: #fff; } .chk-warn .pill { background: var(--a); color: #fff; } .chk-fail .pill { background: var(--rt); color: #fff; }
.keep-note { margin-top: 10px; padding: 8px 10px; border-left: 3px solid var(--a); background: var(--panel-2); border-radius: 6px; }
.code-mid { font-size: 14px; font-weight: 700; margin: 4px 0 8px; font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
.pw-toggle { padding: 8px 12px; min-width: 64px; }

/* Terms gate: read-and-accept row and dialog */
.terms-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.terms-row input[type="checkbox"] { margin: 0; cursor: default; }
.terms-state { color: var(--muted); }
.terms-state.ok { color: var(--accent-2); font-weight: 600; }
.terms-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 14, 18, 0.55); padding: 16px; }
.terms-dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 14px;
  width: min(42rem, 100%); max-height: min(92vh, 44rem); display: flex; flex-direction: column; padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.terms-dialog h2 { margin: 0 0 10px; font-size: 1.15rem; }
.terms-dialog h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
.terms-scroll { overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; flex: 1 1 auto; min-height: 8rem; max-height: 52vh; font-size: 0.95rem; line-height: 1.5; }
.terms-scroll p { margin: 0 0 .7rem; }
.terms-end { color: var(--muted); font-style: italic; }
.terms-hint { margin: 8px 0 0; }
.terms-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.terms-actions .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Legal links: one small size, centered, same background as the page. */
.gate-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 18px; margin: 14px 0 2px; font-size: 12px; color: var(--muted); }
.gate-item { display: inline-flex; align-items: center; gap: 6px; }
.gate-box { margin: 0; width: 13px; height: 13px; }
.gate-box:disabled { opacity: .55; }
.gate-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.gate-link:hover, .gate-link:focus-visible { color: var(--text); outline: none; }
.gate-hint { margin: 4px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.more-fields { margin: 8px 0 4px; }
.more-fields summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.pro-hero h1 {
  margin: 0 0 6px; font-family: Aptos, Calibri, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-weight: 600; font-size: 1.9rem; letter-spacing: -0.01em; line-height: 1.2;
}
@media (max-width: 460px) { .pro-hero h1 { font-size: 1.5rem; } }

/* The four options are a radio group: the chosen one is unmistakable. */
.pradio { width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 50%; margin-bottom: 6px; flex: 0 0 auto; background: var(--panel); }
.ptab:hover .pradio { border-color: var(--accent); }
.ptab.active .pradio { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 42%, var(--panel) 46%); }
.ptab.active { border-width: 2px; }

/* Phone widths: rows wrap instead of running off the card. */
.composer .composer-row { flex-wrap: wrap; }
.composer .composer-row input[type="password"], .composer .composer-row input[type="text"] { min-width: 0; flex: 1 1 150px; }

/* Compact terms dialog: short enough to read without scrolling much. */
.terms-dialog { padding: 14px 16px; max-height: min(86vh, 30rem); }
.terms-dialog h2 { font-size: 1rem; margin: 0 0 8px; }
.terms-scroll { font-size: 13px; line-height: 1.45; padding: 10px 12px; max-height: 46vh; }
.terms-scroll p { margin: 0 0 .55rem; }
.terms-scroll ul { margin: 0 0 .55rem; padding-left: 1.1rem; }
.terms-scroll li { margin-bottom: .3rem; }
.terms-links { color: var(--muted); }
.terms-actions .btn { padding: 8px 14px; }

/* Terms dialog type: same friendly face as the page headings, inherited controls. */
.terms-dialog, .terms-dialog * { font-family: Aptos, Calibri, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
.terms-dialog h2 { font-weight: 600; letter-spacing: -0.005em; }
.terms-scroll { font-size: 14px; line-height: 1.5; color: var(--text); }
.terms-scroll li::marker { color: var(--muted); }
.terms-actions .btn { font: inherit; font-weight: 600; }

/* One line on what the chosen option gives you. */
.pick-line { margin: -4px 0 12px; font-size: 13px; line-height: 1.45; color: var(--muted); text-align: center; }

.gate-locked { display: none !important; }

/* One folded "Have a code?" box takes discount and access codes. The old
   access-code block stays in the page as the control it drives; it is shown
   only for the code a buyer is handed after paying for Write. */
.legacy-code { display: none; }
#writeBuyBox:has(#writeCodeShown:not([hidden])) .legacy-code { display: block; }
.code-fold { margin: 10px 0 4px; font-size: 14px; }
.code-fold summary { cursor: pointer; color: var(--muted); }

/* Option cards: content starts at the same height in every card, so the radio
   dots, names and prices line up whatever the subtitle length. */
.ptab { justify-content: flex-start; }
.ptab .pwho { min-height: 2.5em; line-height: 1.25; }
.ptab .pname { line-height: 1.2; }

.code-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* Privacy tile + scorecard preview on the Pro tabs */
.privacy-tile { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--s); border-radius: 8px; background: var(--panel-2); font-size: 13px; color: var(--text); }
.privacy-tile svg { width: 18px; height: 18px; flex: none; color: var(--s); margin-top: 1px; }
.sc-preview { margin: 14px 0; }
.sc-preview svg { width: 100%; height: auto; max-width: 560px; display: block; font-family: inherit; }

/* Free reference check */
.refcheck-result { margin-top: 12px; }
.refcheck-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.refcheck-list li { padding: 6px 8px; border-left: 3px solid var(--border); background: var(--panel-2); border-radius: 6px; }
.rc-tag { font-weight: 700; font-size: 11px; text-transform: uppercase; margin-right: 4px; }
.rc-verified { border-left-color: var(--s); } .rc-verified .rc-tag { color: var(--s); }
.rc-mismatch { border-left-color: var(--a); } .rc-mismatch .rc-tag { color: var(--a); }
.rc-not_found { border-left-color: var(--rt); } .rc-not_found .rc-tag { color: var(--rt); }
.rc-unverified .rc-tag, .rc-unchecked .rc-tag { color: var(--muted); }

/* Free tab: explore and reference check side by side */
.wrap:has(> #explorer.active) { max-width: 1080px; }
.free-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.free-grid > .composer { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.free-grid > .composer .composer-row { margin-top: auto; padding-top: 12px; }
@media (max-width: 820px) { .free-grid { grid-template-columns: 1fr; } }

/* Scorecard demo (illustrative) */
.sc-demo { margin: 14px 0; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); max-width: 560px; }
.scd-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.scd-file { font-weight: 700; }
.scd-badge { padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--a); background: color-mix(in srgb, var(--a) 14%, transparent); }
.scd-tag { margin-left: auto; font-size: 10.5px; letter-spacing: .06em; color: var(--muted); border: 1px solid var(--muted); border-radius: 999px; padding: 1px 8px; }
.scd-top { display: flex; gap: 18px; align-items: center; margin: 14px 0; flex-wrap: wrap; }
.scd-ring { width: 92px; height: 92px; border-radius: 50%; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: conic-gradient(var(--m) 0 62%, color-mix(in srgb, var(--m) 18%, transparent) 62% 100%); position: relative; }
.scd-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--panel-2); }
.scd-letter, .scd-cap { position: relative; z-index: 1; }
.scd-letter { font-size: 30px; font-weight: 800; line-height: 1; color: var(--m); }
.scd-cap { font-size: 10.5px; color: var(--muted); }
.scd-bars { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.scd-bar { display: grid; grid-template-columns: 96px 1fr 22px; gap: 8px; align-items: center; font-size: 12.5px; }
.scd-bar i { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 22%, transparent); position: relative; overflow: hidden; }
.scd-bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--c); border-radius: 999px; }
.scd-bar b { font-size: 12px; color: var(--muted); }
.scd-cards { display: flex; flex-direction: column; gap: 6px; }
.scd-card { padding: 8px 10px; border-radius: 8px; border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 8%, var(--panel)); font-size: 13px; }
.scd-card b { margin-right: 6px; }
.scd-card em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); }

/* Dismissible privacy pop-out */
.privacy-pop { position: fixed; left: 16px; bottom: 16px; z-index: 40; width: min(340px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 12px;
  background: #0f1424; color: #e8ecf8; border: 1px solid #2a3350; box-shadow: 0 10px 30px rgba(0,0,0,.35); text-align: center; font-size: 13.5px; }
.privacy-pop p { margin: 6px 0 12px; line-height: 1.45; }
.privacy-pop[hidden] { display: none; }
#freeDemo { margin: 18px auto 0; }
#freeDemo[hidden] { display: none; }
#freeDemo .scd-ring { background: conic-gradient(var(--m) 0 75%, color-mix(in srgb, var(--m) 18%, transparent) 75% 100%); }
#freeDemo .scd-bar { grid-template-columns: 96px 1fr 76px; }
#freeDemo .scd-bar b { font-size: 11px; white-space: nowrap; }


/* Three headline tiles: merit, citations, improvement potential */
.sc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 6px; }
.sc-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); border-top: 4px solid var(--c); background: color-mix(in srgb, var(--c) 8%, var(--panel)); }
.sc-tile-t { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sc-tile strong { font-size: 18px; color: var(--c); }
@media (max-width: 560px) { .sc-tiles { grid-template-columns: 1fr; } }
.sc-key { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px; margin: 8px 0; }
.sc-key-row { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; }
.sc-key-chip { flex: none; min-width: 26px; text-align: center; font-weight: 800; font-size: 11px; padding: 2px 6px; border-radius: 6px; background: var(--c); color: #fff; }
.sc-key-row strong { display: block; color: var(--c); }
@media (max-width: 560px) { .sc-key { grid-template-columns: 1fr; } }

/* Each rung keeps its own state color: faint when not reached, solid when reached */
.rung.r-s { --rc: var(--s); } .rung.r-m { --rc: var(--m); } .rung.r-a { --rc: var(--a); } .rung.r-rt { --rc: var(--rt); }
.rung .dot { background: var(--rc, var(--muted)); border-color: var(--rc, var(--muted)); opacity: .3; }
.scale .rung.fill .dot { opacity: 1; }
.rung.current .rung-label { color: var(--rc, var(--text)); }
#freeDemo .scd-bar i { background: color-mix(in srgb, var(--c) 22%, transparent); }