/* Layout: a working rate-schedule. Sticky section bar, calculator first, then the
   reference tables an adviser flips through, then each fund's full profile. */
:root {
  --paper: #fff7ee;
  --surface: #ffffff;
  --surface-2: #fbeadb;
  --ink: #3b1f4a;
  --ink-2: #5d4569;
  --ink-3: #6f5a7a;
  --rule: #ecd9c6;
  --accent: #a63d23;
  --accent-ink: #ffffff;
  --accent-soft: #ffe3cf;
  --brand: #ff8a3d;
  --brand-ink: #3b1f4a;
  --plum: #3b1f4a;
  --peach: #ffd3b0;
  --mark: #9a3f14;
  --mark-soft: #ffe8d2;
  --good: #1f7a4a;
  --warn: #9a5a00;
  --bad: #b3261e;
  --heat: 232, 110, 40;
  --f-display: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-data: "Outfit", "Segoe UI", system-ui, sans-serif;
  --r: 8px;
  --shadow: 0 1px 2px rgba(59, 31, 74, .07), 0 4px 16px rgba(59, 31, 74, .06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1f1027; --surface: #2a1735; --surface-2: #35203f; --ink: #fff1e4; --ink-2: #dcc6d6;
    --ink-3: #b098ad; --rule: #4b3158; --accent: #ff9a55; --accent-ink: #2a1230; --accent-soft: #4a2a3a;
    --plum: #2a1230; --mark: #ffb27a; --mark-soft: #4a2e26; --good: #6fd39b; --warn: #f6bb55; --bad: #ff8f86;
    --heat: 255, 150, 80; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1f1027; --surface: #2a1735; --surface-2: #35203f; --ink: #fff1e4; --ink-2: #dcc6d6;
  --ink-3: #b098ad; --rule: #4b3158; --accent: #ff9a55; --accent-ink: #2a1230; --accent-soft: #4a2a3a;
  --plum: #2a1230; --mark: #ffb27a; --mark-soft: #4a2e26; --good: #6fd39b; --warn: #f6bb55; --bad: #ff8f86;
  --heat: 255, 150, 80; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 15.5px;
  line-height: 1.55; -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.05; }
h2 { font-size: clamp(1.55rem, 2.6vw, 2rem); line-height: 1.15; }
h3 { font-size: 1.15rem; line-height: 1.25; }
p { margin: 0; }
.eyebrow { font-family: var(--f-data); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.muted { color: var(--ink-2); }
.small { font-size: .85rem; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Masthead */
.masthead { background: var(--surface); border-bottom: 1px solid var(--rule); }
.masthead .wrap { padding-block: 28px 22px; display: grid; gap: 14px; }
.masthead .lede { max-width: 68ch; color: var(--ink-2); font-size: 1.02rem; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--f-data); font-size: .78rem; color: var(--ink-2); }
.facts b { color: var(--ink); font-weight: 500; }

/* Section bar */
.secbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--surface); border-bottom: 1px solid var(--rule); }
.secbar nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding-block: 6px; }
.secbar nav::-webkit-scrollbar { display: none; }
.secbar a { flex: none; padding: 7px 12px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .9rem; }
.secbar a:hover { background: var(--surface-2); color: var(--ink); }
.secbar a.on { background: var(--accent-soft); color: var(--accent); }

section.block { padding-block: 44px 8px; scroll-margin-top: 60px; }
.block-head { display: grid; gap: 6px; margin-bottom: 18px; max-width: 80ch; }
.block-head p { color: var(--ink-2); }

/* Panels */
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); }

/* Calculator */
.calc { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }
.calc-form { padding: 18px; display: grid; gap: 16px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 62px); }
@media (max-width: 860px) { .calc-form { position: static; } }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); border-radius: 8px; padding: 3px; gap: 3px; }
.seg.three { grid-template-columns: repeat(3, 1fr); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { text-align: center; padding: 7px 6px; border-radius: 6px; cursor: pointer; font-size: .86rem; font-weight: 500; color: var(--ink-2); line-height: 1.25; }
.seg input:checked + label { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }
.field { display: grid; gap: 5px; }
.field > label, .field > .lbl { font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
input[type=number], input[type=text], select {
  width: 100%; font: inherit; font-size: .95rem; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--surface); color: var(--ink); font-variant-numeric: tabular-nums;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.money { position: relative; }
.money::before { content: "$"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: .95rem; }
.money input { padding-left: 22px; }
.cover-group { border-top: 1px solid var(--rule); padding-top: 14px; display: grid; gap: 10px; }
.cover-group .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cover-group .head h3 { font-family: var(--f-body); font-size: .95rem; font-weight: 700; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-2); cursor: pointer; }
.switch input { width: 16px; height: 16px; accent-color: var(--accent); }
.hint { font-size: .78rem; color: var(--ink-3); }
.hint.warn { color: var(--warn); }
[data-mode="default"] .only-custom, [data-mode="aal"] .only-custom { display: none; }
[data-mode="custom"] .only-default, [data-mode="aal"] .only-default { display: none; }
[data-mode="custom"] .only-aal, [data-mode="default"] .only-aal { display: none; }
[data-mode="default"] .not-default { display: none; }
[data-mode="custom"] .not-custom { display: none; }
#qform:not(.net-on) .net-fields { display: none; }
.aal-profile { margin: -6px 0 12px; color: var(--ink-2); font-size: .9rem; }
.ref.aal td { vertical-align: top; }
.ref.aal tr.fsum { cursor: pointer; }
.ref.aal tr.fsum:hover td { background: var(--surface-2); }
.ref.aal tr.fsum.open td { border-bottom-color: transparent; }
.ref.aal tr.tier td { background: var(--surface-2); border-bottom: 1px dashed var(--rule); font-size: .82rem; }
.ref.aal tr.tier td.route-cell { padding-left: 28px; }
.ref.aal tr.blocked td { opacity: .55; }
ul.qs { margin: 4px 0 0; padding-left: 16px; font-size: .78rem; color: var(--ink-2); display: grid; gap: 2px; }
.tog { font-size: .78rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
.tog::after { content: " ▾"; }
tr.open .tog::after { content: " ▴"; }
.tchips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.tchip { font-family: var(--f-data); font-size: .68rem; font-weight: 600; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink-2); cursor: help; white-space: nowrap; }
.tchip.warn { border-color: color-mix(in srgb, var(--warn) 55%, var(--rule)); color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.tchip.good { border-color: color-mix(in srgb, var(--good) 55%, var(--rule)); color: var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); }
.tipx { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
#tipbox { position: fixed; z-index: 9999; max-width: min(340px, calc(100vw - 16px)); background: var(--ink); color: var(--paper); font-size: .8rem; line-height: 1.4; padding: 8px 11px; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.3); pointer-events: none; }
#tipbox[hidden] { display: none; }
.tag { display: inline-block; font-family: var(--f-data); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; background: var(--surface-2); color: var(--ink-2); vertical-align: 2px; margin-left: 6px; font-weight: 500; }
.viewsel { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ink-2); flex: none; padding-left: 12px; }
.viewsel select { width: auto; padding: 5px 8px; font-size: .84rem; }
.secbar .wrap { display: flex; align-items: center; gap: 8px; }
.secbar nav { min-width: 0; }
.ref.aal td.r { white-space: nowrap; }
small.formula { display: block; color: var(--ink-3); font-size: .72rem; white-space: normal; max-width: 160px; margin-left: auto; }
.route { display: block; font-size: .74rem; color: var(--ink-2); margin-top: 2px; }
.route b { font-weight: 600; color: var(--accent); }
.nowrap, small.formula.nowrap { white-space: nowrap; }
.route a { font-weight: 600; }
.uwtag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .02em; padding: 0 6px; border-radius: 999px; margin-top: 2px; background: var(--surface-2); color: var(--ink-2); }
.uwtag.uw-none { color: var(--good); }
.uwtag.uw-eligibility { color: var(--good); }
.uwtag.uw-short_form, .uwtag.uw-full_above_limit { color: var(--warn); }
.flag { display: block; font-size: .74rem; color: var(--warn); margin-top: 2px; }
.flag.uw { color: var(--bad); }
.fname .hint { display: block; margin-top: 2px; }
.calc-link { display: inline-block; font-size: .74rem; font-weight: 600; margin-top: 3px; }
.assess { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .assess { grid-template-columns: 1fr; } }
.uw-form { padding: 18px; display: grid; gap: 4px; }
.uwq { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 6px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule); }
.uwl { font-size: .88rem; color: var(--ink); }
.uwq .fu { grid-column: 1 / -1; }
.uwq .fu.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; }
.uwq .fu.checks[hidden] { display: none; }
@media (max-width: 480px) { .uwq { grid-template-columns: 1fr; } }
textarea { width: 100%; font: inherit; font-size: .9rem; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--ink); resize: vertical; }
button.reset { justify-self: start; margin-top: 8px; font: inherit; font-size: .84rem; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 0; border-radius: 6px; padding: 7px 12px; cursor: pointer; }
.uw-out { padding: 18px; display: grid; gap: 14px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 62px); }
@media (max-width: 900px) { .uw-out { position: static; } }
.uw-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.uw-tile { border: 1px solid var(--rule); border-radius: 8px; padding: 10px; display: grid; gap: 4px; align-content: start; }
.uw-tile .cv { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.uw-tile .oc { font-weight: 700; font-size: .95rem; }
.uw-tile .ld { font-size: .8rem; color: var(--ink-2); }
.uw-tile.s-std { border-color: color-mix(in srgb, var(--good) 45%, var(--rule)); }
.uw-tile.s-std .oc { color: var(--good); }
.uw-tile.s-load .oc, .uw-tile.s-excl .oc { color: var(--warn); }
.uw-tile.s-post .oc, .uw-tile.s-decl .oc { color: var(--bad); }
.uw-tile.s-decl { border-color: color-mix(in srgb, var(--bad) 45%, var(--rule)); }
.uw-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: .88rem; color: var(--ink-2); }
.uw-list b { color: var(--ink); }
.uw-caveat { font-size: .78rem; color: var(--ink-3); }
.confirm-note { font-size: .8rem; color: var(--ink-2); border-left: 3px solid var(--mark); padding: 4px 10px; background: var(--mark-soft); border-radius: 0 4px 4px 0; }
.sortrow { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-2); margin-top: 4px; }
.sortrow select { width: auto; padding: 4px 8px; font-size: .84rem; }

.results { padding: 0; overflow: hidden; }
.results-head { padding: 16px 18px; border-bottom: 1px solid var(--rule); display: grid; gap: 4px; }
.results-head .summary { font-size: 1rem; }
.results-head .summary b { font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.chip.mark { background: var(--mark-soft); color: var(--mark); }
.chip.good { color: var(--good); }
.chip.warn { color: var(--warn); }
.chip.bad { color: var(--bad); }
.qtable-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; background: var(--surface); position: sticky; top: 0; z-index: 1; white-space: nowrap; }
td.r, th.r { text-align: right; }
.qtable td { vertical-align: middle; }
.qtable tr.q { cursor: pointer; }
.qtable tr.q:hover td { background: var(--surface-2); }
.qtable tr.best td { background: var(--mark-soft); }
.qtable tr.best:hover td { background: var(--mark-soft); }
.qtable th.sortable { padding: 0; white-space: normal; vertical-align: bottom; }
.thsort { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 4px; width: 100%; padding: 9px 10px; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; white-space: normal; line-height: 1.25; }
th.r .thsort { justify-content: flex-end; }
.thsort:hover { color: var(--ink); }
.thsort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }
.thsort .arrow { font-size: .7em; opacity: .45; flex: none; }
th[aria-sort] .thsort { color: var(--ink); }
th[aria-sort] .thsort .arrow { opacity: 1; color: var(--accent); }
.qtable td.ten { font-weight: 600; }
.qtable td.fname { min-width: 220px; }
.ten-note { display: block; font-size: .72rem; font-weight: 400; white-space: nowrap; }
.ten-tbl { width: auto; min-width: 300px; }
.ten-tbl th, .ten-tbl td { padding: 5px 14px 5px 0; }
.rank { font-family: var(--f-data); color: var(--ink-3); font-size: .8rem; width: 2.2em; }
.fname { font-weight: 600; }
.fname small { display: block; font-weight: 400; color: var(--ink-3); font-size: .78rem; }
.total { font-weight: 700; font-size: .98rem; }
.bar { height: 6px; border-radius: 3px; background: var(--accent); opacity: .75; min-width: 2px; }
.barcell { width: 10%; min-width: 48px; }
.detail td { background: var(--surface-2); font-size: .84rem; color: var(--ink-2); }
.detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.detail dt { font-weight: 600; color: var(--ink); }
.detail dd { margin: 0; }
.na-head td { background: var(--surface); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; padding-top: 16px; }
.dash { color: var(--ink-3); }

/* Tabs */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.tabs button { font: inherit; font-size: .86rem; font-weight: 600; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.tabs button:hover { color: var(--ink); border-color: var(--ink-3); }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tbl-wrap { overflow-x: auto; }
.ref td { font-size: .86rem; }
.ref td.fund { font-weight: 600; white-space: nowrap; min-width: 150px; }
.ref td.fund small { display: block; font-weight: 400; color: var(--ink-3); font-size: .76rem; white-space: normal; }
.ref td.txt { min-width: 220px; max-width: 420px; color: var(--ink-2); }
.heat td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ref tbody tr:last-child td { border-bottom: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 10px; font-size: .78rem; color: var(--ink-3); }
.swatch { display: inline-block; width: 46px; height: 8px; border-radius: 2px; background: linear-gradient(90deg, rgba(var(--heat), .04), rgba(var(--heat), .42)); vertical-align: middle; margin-right: 6px; }
.tick { color: var(--good); font-weight: 700; }
.lo { color: var(--warn); font-weight: 600; }
.ref .cl { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ref tr.open .cl { display: block; -webkit-line-clamp: unset; }
.ref tbody tr.clampable { cursor: pointer; }
.ref tbody tr.clampable:hover td { background: var(--surface-2); }
.expand-hint { font-size: .78rem; color: var(--ink-3); margin: -4px 0 8px; }
.hi { color: var(--ink); }
small.gap { display: block; font-size: .7rem; }
small.gap.up { color: var(--good); font-weight: 600; }
tr.total-row td { background: var(--surface-2); font-weight: 600; }
.fname small.ins { color: var(--ink-3); font-size: .74rem; margin-top: 1px; }
.fname small.ins b { font-weight: 600; color: var(--ink-2); }
.cross { color: var(--ink-3); }

/* Fund cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.card { padding: 16px; display: grid; gap: 10px; align-content: start; }
.card .top { display: grid; gap: 2px; }
.card .meta { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; font-size: .82rem; margin: 0; }
.card .meta dt { color: var(--ink-3); }
.card .meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.card .meta dd.pending { color: var(--warn); }
.card .links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .84rem; font-weight: 600; }
.card button.more { justify-self: start; font: inherit; font-size: .84rem; font-weight: 600; color: var(--accent); background: none; border: 1px solid var(--rule); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.card button.more:hover { border-color: var(--accent); }

dialog { border: 1px solid var(--rule); border-radius: 10px; padding: 0; width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(10, 14, 26, .55); }
.dlg-head { position: sticky; top: 0; background: var(--surface); padding: 16px 20px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 12px; align-items: start; z-index: 2; }
.dlg-head button { font: inherit; background: var(--surface-2); color: var(--ink); border: 0; border-radius: 6px; padding: 6px 12px; cursor: pointer; font-weight: 600; }
.dlg-body { padding: 4px 20px 20px; display: grid; gap: 4px; }
.prof { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0 18px; }
@media (max-width: 640px) { .prof { grid-template-columns: 1fr; } }
.prof dt { font-weight: 600; font-size: .84rem; padding: 10px 0 0; color: var(--ink); }
.prof dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: .9rem; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 641px) { .prof dt { border-bottom: 1px solid var(--rule); padding-bottom: 10px; } }
.mini { font-size: .8rem; }
.mini th, .mini td { padding: 5px 8px; }

/* Method */
.method { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.method .col { display: grid; gap: 10px; align-content: start; max-width: 70ch; }
.method ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--ink-2); }
.gaw { border-left: 3px solid var(--mark); padding: 12px 16px; background: var(--surface); border-radius: 0 var(--r) var(--r) 0; color: var(--ink-2); font-size: .9rem; }
footer { margin-top: 48px; border-top: 1px solid var(--rule); background: var(--surface); }
footer .wrap { padding-block: 22px 28px; display: grid; gap: 10px; font-size: .82rem; color: var(--ink-2); }
footer .lic { font-family: var(--f-data); font-size: .76rem; color: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Needs analysis */
.needs { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 960px) { .needs { grid-template-columns: 1fr; } }
.needs-form { padding: 6px 18px 18px; display: grid; gap: 0; }
.needs-form details { border-top: 1px solid var(--rule); padding: 12px 0; display: grid; gap: 10px; }
.needs-form details:first-child { border-top: 0; }
.needs-form summary { cursor: pointer; font-weight: 700; font-size: .95rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.needs-form summary::-webkit-details-marker { display: none; }
.needs-form summary::after { content: "▾"; color: var(--ink-3); font-size: .8rem; }
.needs-form details[open] > summary { margin-bottom: 10px; }
.needs-form details[open] > summary::after { content: "▴"; }
.needs-form details > * + * { margin-top: 10px; }
.ngrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
@media (max-width: 420px) { .ngrid { grid-template-columns: 1fr; } }
.ngrid[hidden], .field[hidden] { display: none; }
.seg.four { grid-template-columns: repeat(4, 1fr); }
.kids { display: grid; gap: 8px; }
.kid { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.kid input[type=number] { padding: 6px 8px; }
.kid select { padding: 6px 8px; font-size: .86rem; }
.kid .switch { font-size: .78rem; }
.kid button { font: inherit; font-size: .78rem; color: var(--ink-3); background: none; border: 0; cursor: pointer; padding: 4px; }
.kid button:hover { color: var(--bad); }
.kids .hint { margin: 0; }
.needs-out { display: grid; gap: 20px; min-width: 0; }
.nres { padding: 18px; display: grid; gap: 16px; min-width: 0; }
.ntiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .ntiles { grid-template-columns: 1fr; } }
.ntile { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; display: grid; gap: 4px; align-content: start; }
.ntile .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.ntile .v { font-family: var(--f-display, inherit); font-size: 1.7rem; font-weight: 700; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ntile .s { font-size: .78rem; color: var(--ink-2); }
.ntile .opts { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .74rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ntile .opts b { color: var(--ink-2); font-weight: 600; }
.nmsgs { display: grid; gap: 8px; }
.nmsg { font-size: .86rem; color: var(--ink-2); border-left: 3px solid var(--accent); padding: 6px 10px; background: var(--accent-soft); border-radius: 0 6px 6px 0; }
.nmsg.good { border-left-color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--surface)); }
.nmsg.warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.nmsg b { color: var(--ink); }
.nmsg button { font: inherit; font-size: .8rem; font-weight: 600; color: var(--accent); background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 3px 9px; cursor: pointer; margin-left: 6px; }
.nbreak { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .nbreak { grid-template-columns: 1fr; } }
.rcpt { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; font-size: .84rem; display: grid; gap: 2px; align-content: start; }
.rcpt h4 { margin: 0 0 6px; font-size: .9rem; }
.rcpt .ln { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 3px 0; color: var(--ink-2); }
.rcpt .ln span:last-child { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.rcpt .ln.neg span:last-child { color: var(--good); }
.rcpt .grp { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; margin-top: 8px; }
.rcpt .ln.tot { border-top: 1px solid var(--rule); margin-top: 6px; padding-top: 6px; font-weight: 700; color: var(--ink); }
.rcpt .ln.sub { border-top: 1px dashed var(--rule); margin-top: 4px; padding-top: 5px; }
.rcpt .note { font-size: .74rem; color: var(--ink-3); }
.nchart { display: grid; gap: 8px; min-width: 0; position: relative; }
.nchart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.nchart-head h3 { font-size: .95rem; margin: 0; }
.nchart-head .seg { min-width: 240px; }
.nlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .76rem; color: var(--ink-2); }
.nlegend span { display: inline-flex; align-items: center; gap: 6px; }
.nlegend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.nlegend i.line { height: 2px; width: 14px; border-radius: 0; background: var(--ink); }
.nsvg svg { width: 100%; height: auto; display: block; }
.nsvg .ax { font-size: 10px; fill: var(--ink-3); font-family: var(--f-data, inherit); }
.nsvg .grid { stroke: var(--rule); stroke-width: 1; }
.nsvg .hit { fill: transparent; cursor: crosshair; }
.nsvg .hit:hover + .hl, .nsvg .hl.on { opacity: 1; }
.nsvg .hl { fill: var(--ink); opacity: 0; pointer-events: none; }
.ntip { position: absolute; z-index: 3; pointer-events: none; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow); padding: 8px 10px; font-size: .76rem; color: var(--ink-2); min-width: 190px; }
.ntip b { color: var(--ink); }
.ntip .r { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.ntip .r span:last-child { font-variant-numeric: tabular-nums; color: var(--ink); }
.ntip i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.ntable summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--accent); }
.ntable table { font-size: .76rem; }
.nquote { padding: 0; overflow: hidden; min-width: 0; }
.nquote-head { padding: 16px 18px 8px; display: grid; gap: 4px; }
.nquote-head h3 { margin: 0; font-size: 1rem; }
.nquote > .hint, .nquote > .confirm-note { margin: 10px 18px 14px; }
table.nq td, table.nq th { vertical-align: top; }
table.nq td.c { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.nq td.c.best { background: color-mix(in srgb, var(--good) 14%, var(--surface)); font-weight: 700; }
table.nq td.c.top { box-shadow: inset 0 0 0 2px var(--good); }
table.nq td.c small { display: block; font-weight: 400; color: var(--ink-3); font-size: .68rem; white-space: normal; max-width: 130px; margin-left: auto; }
table.nq th small { display: block; font-weight: 400; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
table.nq td.fund small { display: block; }
table.nq button.use { font: inherit; font-size: .72rem; font-weight: 600; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; margin-top: 3px; }
:root { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; } }
:root[data-theme="dark"] { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; }

.nmethod { margin-top: 20px; padding: 0; }
.nmethod > summary { cursor: pointer; padding: 14px 18px; font-weight: 700; }
.nmethod-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; padding: 0 18px 18px; font-size: .86rem; color: var(--ink-2); }
@media (max-width: 860px) { .nmethod-body { grid-template-columns: 1fr; } }
.nmethod-body h3 { font-size: .92rem; margin: 6px 0 8px; color: var(--ink); }
.nmethod-body ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; }
.nmethod-body b { color: var(--ink); }
ul.refs li { font-size: .8rem; }

.nmatrix { padding: 0; overflow: hidden; min-width: 0; }
.mx-ctl { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 6px; font-size: .82rem; color: var(--ink-2); }
.mx-ctl label { display: inline-flex; align-items: center; gap: 6px; }
.mx-ctl select { width: auto; padding: 4px 8px; font-size: .84rem; }
table.mx th, table.mx td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; vertical-align: top; }
table.mx th:first-child, table.mx td:first-child { text-align: left; }
table.mx td.cell { min-width: 110px; }
table.mx td.cell small { display: block; color: var(--ink-3); font-size: .68rem; font-weight: 400; }
table.mx td.short { color: var(--ink-3); background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--rule) 55%, transparent) 6px 7px); }
table.mx td.best { box-shadow: inset 0 0 0 2px var(--good); font-weight: 700; }
table.mx td.best.overall::after { content: " ★"; color: var(--good); }
table.mx tr.needrow td:first-child b { color: var(--accent); }
table.mx td:first-child small { display: block; color: var(--ink-3); font-size: .68rem; }

.kid { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) auto auto; }
.kid .klbl { display: none; }
@media (max-width: 420px) { .kid { grid-template-columns: 56px 1fr 1fr; } }
.kids-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: 8px; font-size: .72rem; color: var(--ink-3); font-weight: 600; }
@media (max-width: 420px) { .kids-head { display: none; } }

table.mx th { white-space: normal; }
table.mx th small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-3); font-size: .7rem; }
table.mx td.cell { min-width: 96px; }
table.mx td.cell small { white-space: normal; max-width: 150px; margin-left: auto; }
.kid select { min-width: 0; }

button.linkish { justify-self: start; font: inherit; font-size: .74rem; font-weight: 600; color: var(--accent); background: none; border: 0; padding: 2px 0; cursor: pointer; text-align: left; }
.hint.warnbox { border-left: 3px solid var(--warn); padding: 4px 8px; background: color-mix(in srgb, var(--warn) 8%, var(--surface)); border-radius: 0 4px 4px 0; }

/* Buy me a coffee */
.coffee { margin-top: 40px; }
.coffee .card-c { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 20px 22px; display: grid; grid-template-columns: 1fr auto; gap: 14px 28px; align-items: center; }
.coffee h2 { font-size: 1.25rem; margin: 0 0 6px; }
.coffee p { margin: 0; color: var(--ink-2); max-width: 66ch; }
.coffee .fine { font-size: .8rem; color: var(--ink-3); margin-top: 8px; }
.btn-coffee { display: inline-flex; align-items: center; gap: 8px; background: var(--coffee); color: #1b1606; font-weight: 700; text-decoration: none; padding: 11px 18px; border-radius: 999px; white-space: nowrap; border: 1px solid rgba(0,0,0,.08); }
.btn-coffee:hover { filter: brightness(.96); }
.btn-coffee:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.coffee-line { margin: 0; padding: 12px 18px 16px; border-top: 1px solid var(--rule); }
.coffee-line a { white-space: nowrap; }
:root { --coffee: #ffd84d; }
@media (max-width: 640px) { .coffee .card-c { grid-template-columns: 1fr; } }
/* Save my results */
.savebtn { flex: none; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .86rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid transparent; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.savebtn:hover { border-color: var(--accent); }
.savebtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.viewsel { margin-left: 0; }
.secbar nav { flex: 1 1 auto; }
@media (max-width: 640px) { .sv-long { display: none; } .viewsel label { display: none; } }
.save-banner { background: var(--accent-soft); color: var(--ink); border-bottom: 1px solid var(--rule); padding: 9px 16px; font-size: .88rem; display: flex; gap: 12px; align-items: baseline; justify-content: center; flex-wrap: wrap; text-align: center; }
.save-banner[hidden], #savedlg [hidden] { display: none !important; }
#savedlg, #unlockdlg { width: min(560px, calc(100vw - 24px)); }
.save-who { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; display: grid; gap: 8px; margin: 0; } .save-who legend { font-size: .84rem; font-weight: 600; padding: 0 6px; }
.save-body { display: grid; gap: 12px; }
.save-row { display: flex; gap: 8px; align-items: stretch; }
.save-row input { flex: 1 1 auto; min-width: 0; }
.save-out { display: grid; gap: 6px; }
.save-list h3 { font-family: var(--f-body); font-size: .9rem; font-weight: 700; margin: 4px 0 6px; }
.save-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.save-list li { display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; }
.sv-t { display: grid; gap: 1px; min-width: 0; } .sv-n { font-weight: 600; overflow-wrap: anywhere; } .sv-t small { color: var(--ink-3); }
.sv-b { display: flex; gap: 12px; font-size: .86rem; }
.save-open summary { cursor: pointer; font-size: .88rem; color: var(--accent); }
.save-open .save-row { margin-top: 8px; }
/* Broker referrals */
.secbar a[hidden], #crm[hidden], .ref-state[hidden], .ref-done[hidden], .reff[hidden], .crm-settings[hidden], .crm-msg[hidden], #rf-health-wrap[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button.refbtn:not(.linkish), .refsend {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .88rem; font-weight: 600; line-height: 1.2;
  color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 6px; padding: 9px 14px; cursor: pointer; text-decoration: none;
}
button.refbtn:not(.linkish):hover, .refsend:hover { filter: brightness(1.08); }
.refsend:disabled { opacity: .45; cursor: not-allowed; filter: none; }
button.refbtn:focus-visible, .refsend:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.refline { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.refline button.linkish { font-size: .78rem; }
.refcta { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r); background: var(--accent-soft); }
.refcta > div { display: grid; gap: 3px; max-width: 62ch; font-size: .86rem; color: var(--ink); }
.refcta > div span { color: var(--ink-2); font-size: .82rem; }
.nquote .refcta { margin: 0 18px 18px; }
.ref-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .ref-cards { grid-template-columns: 1fr; } }
.ref-card { padding: 18px; display: grid; gap: 10px; align-content: start; }
.ref-card h3 { font-family: var(--f-body); font-size: 1rem; font-weight: 700; }
.ref-card p { font-size: .9rem; color: var(--ink-2); }
.ref-how-src { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin-top: 20px; }
@media (max-width: 760px) { .ref-how-src { grid-template-columns: 1fr; } }
.ref-how-src h3, #ref-how-body h3 { font-family: var(--f-body); font-size: .9rem; font-weight: 700; margin-bottom: 6px; }
.ref-how-src ul, #ref-how-body ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: .86rem; color: var(--ink-2); }
#ref-how-body { display: grid; gap: 12px; padding-top: 8px; }

/* Referral dialog */
#refdlg { width: min(720px, calc(100vw - 24px)); }
.ref-body { gap: 12px; }
.ref-intro { color: var(--ink-2); font-size: .92rem; }
.ref-state { padding: 10px 12px; border-left: 3px solid var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--surface)); border-radius: 0 6px 6px 0; font-size: .86rem; color: var(--ink); margin-top: 10px; }
.reff { display: grid; gap: 16px; padding-top: 10px; }
.reff fieldset { border: 0; border-top: 1px solid var(--rule); padding: 12px 0 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.reff legend { font-weight: 700; font-size: .92rem; padding: 0 6px 0 0; }
.reff[data-type="assess"] .only-quote, .reff[data-type="adviser"] .only-quote { display: none; }
.reff .only-adviser { display: none; }
.reff[data-type="adviser"] .only-adviser { display: block; }
.row3 { display: grid; grid-template-columns: 1.2fr .8fr 1.2fr; gap: 10px; }
@media (max-width: 560px) { .row2, .row3 { grid-template-columns: 1fr; } }
input[type=email], input[type=tel], input[type=date], input[type=search] {
  width: 100%; font: inherit; font-size: .95rem; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--ink);
}
textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.reff .bad, .reff .chk.bad { border-color: var(--bad); }
.reff input.bad, .reff select.bad { outline: 2px solid var(--bad); outline-offset: -1px; }
.reff .chk.bad { outline: 2px solid var(--bad); outline-offset: 2px; border-radius: 4px; }
.ref-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ref-consent { gap: 9px; }
.chk { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; font-size: .86rem; color: var(--ink); cursor: pointer; }
.chk input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); }
.chk.req span::after { content: " Needed to include your health answers."; color: var(--ink-3); font-size: .8rem; }
.ref-how summary, .lead-sum summary { cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--accent); }
.ref-preview { display: grid; gap: 10px; max-height: 300px; overflow: auto; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface-2); }
.rp-sec h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 4px; font-weight: 700; }
.rp-sec dl { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 3px 12px; margin: 0; font-size: .84rem; }
.rp-sec dt { color: var(--ink-2); }
.rp-sec dd { margin: 0; color: var(--ink); }
.rp-sec dd.full { grid-column: 1 / -1; }
.ref-err { color: var(--bad); font-size: .86rem; font-weight: 600; }
.ref-err:empty { display: none; }
.ref-actions, .lead-act { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ref-actions button.reset, .lead-act button.reset { margin-top: 0; }
.ref-done { display: grid; gap: 10px; padding: 14px 0 6px; }
.ref-done h3 { font-family: var(--f-body); font-size: 1.05rem; }
textarea.copybox { font-family: var(--f-data); font-size: .76rem; margin-top: 8px; }
.num { font-variant-numeric: tabular-nums; }

/* Referral CRM (owner only) */
#crm .crm-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 860px) { #crm .crm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#crm .ntile { background: var(--surface); }
#crm .ntile .v { font-size: 1.4rem; }
.crm-panel { padding: 0 0 6px; }
.crm-ctl { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.crm-ctl input[type=search] { flex: 1 1 240px; width: auto; }
.crm-ctl select { width: auto; }
.crm-ctl .sp, .lead-act .sp { flex: 1; }
.crm-ctl button.reset { margin-top: 0; }
.crm-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--rule); background: var(--surface-2); }
.crm-settings-act { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) { .crm-settings { grid-template-columns: 1fr; } }
.crm-msg { padding: 8px 16px; font-size: .84rem; color: var(--ink); background: var(--mark-soft); }
.crm-msg:empty { display: none; }
table.crm td { vertical-align: top; }
table.crm td small { display: block; color: var(--ink-3); font-size: .74rem; }
table.crm td.nowrap, table.crm td.ty { white-space: nowrap; }
table.crm .crm-contact { white-space: nowrap; }
table.crm select, table.crm input[type=date] { font-size: .82rem; padding: 5px 6px; width: auto; }
table.crm input.late { border-color: var(--bad); color: var(--bad); font-weight: 600; }
table.crm button.reset { margin-top: 0; padding: 5px 10px; }
#crm-note { padding: 8px 16px 6px; }
.lead-body { gap: 14px; }
.lead-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding-top: 12px; }
@media (max-width: 720px) { .lead-grid { grid-template-columns: 1fr; } }
.lead-col { display: grid; gap: 10px; align-content: start; }
.lead-col h3 { font-family: var(--f-body); font-size: .9rem; font-weight: 700; }
.lead-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: .86rem; }
.lead-dl dt { color: var(--ink-3); }
.lead-dl dd { margin: 0; overflow-wrap: anywhere; }
.lead-dl dd.pre { white-space: pre-wrap; }
.lead-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .86rem; max-height: 220px; overflow: auto; }
.lead-notes li { display: grid; gap: 1px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); white-space: pre-wrap; }
.lead-notes li:last-child { border-bottom: 0; }
button.reset.danger { color: var(--bad); }
.lead-sum pre { white-space: pre-wrap; font-family: var(--f-data); font-size: .76rem; background: var(--surface-2); padding: 12px; border-radius: 6px; margin-top: 8px; max-height: 360px; overflow: auto; }

/* ---- save and compare several quotes ---- */
:root { --sc-a: #a63d23; --sc-b: #e07a1f; --sc-c: #3b1f4a; --sc-d: #1f7a8c; --sci-a: #fff; --sci-b: #fff; --sci-c: #fff; --sci-d: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sc-a: #ff9a55; --sc-b: #f0a6d2; --sc-c: #cdb8e8; --sc-d: #62c6d4; --sci-a: #2a1230; --sci-b: #2a1230; --sci-c: #2a1230; --sci-d: #2a1230; } }
:root[data-theme="dark"] { --sc-a: #ff9a55; --sc-b: #f0a6d2; --sc-c: #cdb8e8; --sc-d: #62c6d4; --sci-a: #2a1230; --sci-b: #2a1230; --sci-c: #2a1230; --sci-d: #2a1230; }
.sc0 { --sc: var(--sc-a); --sci: var(--sci-a); } .sc1 { --sc: var(--sc-b); --sci: var(--sci-b); }
.sc2 { --sc: var(--sc-c); --sci: var(--sci-c); } .sc3 { --sc: var(--sc-d); --sci: var(--sci-d); }
.qt-badge { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none; font: 700 .8rem var(--f-display); background: var(--sc); color: var(--sci); }

.qtray { margin-top: 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); padding: 12px 14px; display: grid; gap: 8px; }
.qtray [hidden] { display: none !important; }
.qt-top { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-end; justify-content: space-between; }
.qt-title { display: block; font-family: var(--f-display); font-size: 1rem; }
.qt-intro { display: block; margin: 2px 0 0; max-width: 46ch; }
.qt-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qt-add input { width: 190px; max-width: 100%; }
.qt-msg { margin: 0; min-height: 0; }
.qt-msg:empty { display: none; }
.qt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qt-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); }
.qt-list .qt-n { font-weight: 700; }
.qt-list small { color: var(--ink-2); flex: 1 1 200px; }
.qt-list .qt-b { display: flex; gap: 10px; margin-left: auto; }
.qt-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.qt-actions .refsend:disabled { opacity: .5; }

#cmpdlg { width: min(980px, calc(100vw - 24px)); }
.cmp-body { gap: 18px; padding-top: 14px; }
.cmp-ctl { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: .9rem; }
.cmp-ctl label { margin-right: 6px; font-weight: 600; }
.cmp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.cmp-card { border: 1px solid var(--rule); border-top: 4px solid var(--sc); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 4px; align-content: start; background: var(--surface); }
.cmp-card h3 { margin: 0; font: 700 1rem var(--f-display); display: flex; gap: 8px; align-items: center; }
.cmp-card p { margin: 0; font-size: .84rem; color: var(--ink-2); }
.cmp-card .qt-b { display: flex; gap: 12px; margin-top: 4px; }
.cmp-card .basetag { font-size: .78rem; color: var(--ink-2); font-style: italic; }
.cmp-sum { background: var(--accent-soft); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 8px; }
.cmp-sum p { margin: 0; }
.cmp-sum ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.cmp-sec { display: grid; gap: 6px; }
.cmp-sec h3 { margin: 0; font: 700 1.05rem var(--f-display); }
.cmp-sec > .hint { margin: 0; }
.cmp-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--ink-2); align-items: center; }
.cmp-legend i { display: inline-block; width: 22px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 5px; background: var(--ink-2); }
.cmp-legend i.ptn { background: repeating-linear-gradient(45deg, var(--ink-2) 0 3px, transparent 3px 6px); border: 1px solid var(--ink-2); }
.cbar { display: grid; grid-template-columns: 28px minmax(120px, 230px) minmax(60px, 1fr) auto; gap: 2px 10px; align-items: center; padding: 5px 0; }
.cb-l { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-track { height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--rule) 60%, transparent); overflow: hidden; display: flex; }
.cb-seg { height: 100%; background: var(--sc); min-width: 0; }
.cb-seg.ptn { background: repeating-linear-gradient(45deg, var(--sc) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1px var(--sc); }
.cb-v { font: 700 .95rem var(--f-data); text-align: right; white-space: nowrap; }
.cb-d { grid-column: 2 / -1; font-size: .8rem; color: var(--ink-2); }
.cb-na { color: var(--ink-3); font-style: italic; }
.d-up { color: var(--bad); font-weight: 600; } .d-dn { color: var(--good); font-weight: 600; } .d-eq { color: var(--ink-3); }
.cmp-fund { border-top: 1px solid var(--rule); padding-top: 6px; }
.cmp-fund h4 { margin: 0; font: 700 .95rem var(--f-display); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.cmp-fund .low { font-size: .72rem; font-weight: 700; color: var(--good); letter-spacing: .04em; text-transform: uppercase; }
.cmp-diffs { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: .88rem; }
.cmp-diffs b { font-weight: 700; }
.cmp-foot { font-size: .8rem; color: var(--ink-2); margin: 0; }
@media (max-width: 640px) {
  .cbar { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .cb-track { grid-column: 1 / -1; order: 5; }
  .cb-d { grid-column: 1 / -1; order: 6; }
  .cmp-cards { grid-template-columns: 1fr; gap: 8px; }
  .cmp-card { padding: 8px 10px; } .cmp-card h3 { font-size: .92rem; } .cmp-card p { font-size: .78rem; }
  .qt-add { width: 100%; } .qt-add input { flex: 1 1 140px; width: auto; }
  .qt-list .qt-b { margin-left: 0; }
}

.qt-list button.linkish[data-rm], .cmp-card button[data-act=rm], .qt-list .qt-b button:last-child { color: var(--ink-2); font-weight: 500; }

.qt-share { display: flex; flex-wrap: wrap; gap: 10px; }
#qtray .qt-share button.refbtn:not(.linkish) { background: var(--surface-2); color: var(--ink); border: 1px solid var(--rule); }
#maildlg { width: min(720px, calc(100vw - 24px)); }
#ml-text { width: 100%; font: .82rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; resize: vertical; }
.contact-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px 32px; align-items: start; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 20px; }
.ct-side { display: grid; gap: 10px; justify-items: start; }
.ct-addr { font: 700 1.15rem var(--f-display); color: var(--accent); word-break: break-all; }
.ct-form { display: grid; gap: 10px; }
@media (max-width: 760px) { .contact-box { grid-template-columns: 1fr; padding: 14px; } }

.life { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .life { grid-template-columns: 1fr; } }
.life-form { padding: 18px; display: grid; gap: 14px; }
.life-form .lbl { display: block; font-size: .84rem; font-weight: 600; margin-bottom: 6px; }
.le-health { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.le-health legend { font-size: .84rem; font-weight: 600; padding: 0; margin-bottom: 6px; }
.le-own[hidden] { display: none; }
.le-actions { display: flex; justify-content: flex-end; }
.life-out { display: grid; gap: 12px; }
.le-sum { padding: 14px 16px; border-radius: var(--r); background: var(--accent-soft, var(--surface-2)); border: 1px solid var(--rule); font-size: .95rem; }
.le-sum b { font-weight: 700; }
.le-card { padding: 14px 16px; display: grid; gap: 10px; }
.le-card.no { opacity: .92; }
.le-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.le-head h3 { font-size: 1.02rem; margin: 0; }
.le-st { font-size: .76rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); white-space: nowrap; }
.le-st.good { color: var(--good); } .le-st.warn { color: var(--warn); } .le-st.bad { color: var(--bad); }
.le-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 8px 12px; }
.le-grid .k { display: block; font-size: .74rem; color: var(--ink-2); }
.le-grid .v { display: block; font-size: 1.02rem; font-weight: 700; }
.le-grid .v small { font-weight: 500; color: var(--ink-2); font-size: .78rem; }
.le-why { margin: 0; padding-left: 18px; font-size: .86rem; color: var(--ink-2); display: grid; gap: 3px; }
.le-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.le-card details { font-size: .86rem; }
.le-card details summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.le-card details ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); display: grid; gap: 3px; }
.le-card .le-lim { margin: 0; font-size: .84rem; color: var(--ink-2); }
.le-card a.le-link { font-size: .86rem; font-weight: 600; }
.le-group-h { font-size: .9rem; font-weight: 700; margin: 6px 0 -4px; color: var(--ink-2); }

.news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 20px; align-items: start; }
@media (max-width: 900px) { .news { grid-template-columns: 1fr; } }
.news-form, .news-unsub { padding: 18px; display: grid; gap: 14px; }
.news-unsub summary { cursor: pointer; font-weight: 600; }
.news-unsub[open] summary { margin-bottom: 10px; }
.nw-topics { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.nw-topics legend { font-size: .84rem; font-weight: 600; padding: 0; margin-bottom: 6px; }
.nw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nw-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.opt { font-weight: 400; color: var(--ink-3); }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.4; }
.chk input { margin-top: 3px; }
.nl-tabs { display: flex; gap: 6px; margin: 4px 0 12px; flex-wrap: wrap; }
.nl-tabs button { border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 7px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.nl-tabs button[aria-selected=true] { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.nl-pane { padding: 16px; display: grid; gap: 14px; }
.nl-pane[hidden] { display: none; }
.nl-add summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.nl-add .field, .nl-add .chk, .nl-add .nw-act { margin-top: 10px; }
.nl-compose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 960px) { .nl-compose { grid-template-columns: 1fr; } }
.nl-edit { display: grid; gap: 12px; }
.nl-edit textarea { width: 100%; font: inherit; }
.nl-guides { border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
.nl-guides legend { font-size: .84rem; font-weight: 600; padding: 0 4px; }
#nl-guide-list { display: grid; gap: 6px; max-height: 220px; overflow: auto; }
#nl-guide-list label { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; }
.nl-links { display: flex; gap: 8px; flex-wrap: wrap; }
.nl-prev-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 600; font-size: .88rem; }
.nl-prev-bar .seg { width: 170px; }
.nl-frame { width: 100%; height: 620px; border: 1px solid var(--rule); border-radius: 10px; background: #fff; transition: width .15s; }
.nl-frame.phone { width: 375px; max-width: 100%; display: block; margin: 0 auto; }
.nl-send { border-top: 1px solid var(--rule); padding-top: 14px; display: grid; gap: 12px; }
.nl-send h3 { margin: 0; }
.nl-btnrow { align-self: end; }
.nl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-summary { font-size: .92rem; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.nl-progress { display: grid; gap: 6px; }
.nl-progress .bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.nl-progress .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.nl-st { font-size: .76rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); white-space: nowrap; }
.nl-st.on { color: var(--good); } .nl-st.off { color: var(--bad); }
#nl-dlg { max-width: 520px; width: calc(100% - 32px); }
.dlg-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px 18px; }
#newsletter .crm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 760px) { #newsletter .crm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#newsletter .crm-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#newsletter .crm-ctl .sp { flex: 1; }

/* Start-here hero */
.masthead .hero { display: grid; gap: 14px; max-width: 78ch; }
.masthead h1 { max-width: 30ch; }
.masthead .lede { max-width: 62ch; }
.start { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
@media (max-width: 960px) { .start { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .start { grid-template-columns: 1fr; } }
.start a { display: grid; gap: 4px; align-content: start; padding: 14px 15px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
.start a:hover { border-color: var(--accent); }
.start a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.start b { font-size: 1rem; line-height: 1.3; }
.start span { font-size: .84rem; color: var(--ink-2); }
.start i { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--accent); margin-top: 4px; }
.gloss { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 22px; margin: 14px 0 0; font-size: .86rem; color: var(--ink-2); }
@media (max-width: 760px) { .gloss { grid-template-columns: 1fr; } }
.gloss dt { font-weight: 700; color: var(--ink); }
.gloss dd { margin: 0; }
details.adv { border-top: 1px solid var(--rule); padding-top: 10px; display: grid; gap: 12px; }
details.adv > summary { cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--accent); }
details.adv[open] > summary { margin-bottom: 4px; }
/* ---- two people ---- */
.who .seg { grid-template-columns: 1fr 1fr; }
.partner-only { display: none; }
[data-who="two"] .partner-only { display: grid; }
.pcover { display: grid; gap: 10px; }
.pcover-fields { display: grid; gap: 10px; }
.pcover-fields[hidden] { display: none; }
.duo-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: .8rem; color: var(--ink-2); }
.duo-legend[hidden] { display: none; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sw.you, .bar2 i.you { background: var(--accent); }
.sw.partner, .bar2 i.partner { background: var(--brand); }
.bar2 { display: flex; height: 8px; border-radius: 4px; overflow: hidden; min-width: 4px; gap: 1px; }
.bar2 i { display: block; min-width: 1px; }
.split { display: block; font-weight: 400; font-size: .72rem; line-height: 1.3; margin-top: 2px; white-space: nowrap; }
.mixline { display: block; margin-top: 8px; padding: 8px 12px; border-radius: 6px; background: var(--surface-2); font-size: .88rem; color: var(--ink-2); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.duo h4 { margin: 0 0 6px; font-family: var(--f-display); font-size: .95rem; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }

/* ---- Sunburnt brand ---- */
.masthead { background: var(--plum); color: #fff1e4; border-bottom: 0; position: relative; overflow: hidden; }
.masthead .wrap { position: relative; z-index: 1; }
.masthead h1 { color: #fff1e4; font-weight: 800; }
.masthead .lede { color: #e8d4df; }
.masthead .eyebrow { color: var(--peach); }
.masthead .facts { color: #d8c0d2; }
.masthead .facts b { color: #fff1e4; }
.masthead .start a { background: rgba(255, 241, 228, .08); border-color: rgba(255, 241, 228, .3); color: #fff1e4; }
.masthead .start a:hover { border-color: var(--peach); color: #fff; }
.masthead .start a.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.masthead :focus-visible { outline-color: var(--peach); }
.brandbar { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; justify-self: start; color: #fff1e4; }
.brandbar svg { flex: none; }
.brandname { font-family: var(--f-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; }
.brandname b { color: var(--brand); font-weight: 800; }
.sunart { position: absolute; right: 5%; bottom: 0; width: min(340px, 34vw); height: auto; z-index: 0; display: none; }
@media (min-width: 900px) { .sunart { display: block; } }
.secbar a.on { color: var(--accent); }
.savebtn { background: var(--accent-soft); }

/* ---- UI tidy: lead with the cost comparison, steps in order, phone-first table ---- */
.masthead .wrap { padding-block: 22px 14px; gap: 10px; }
.masthead .hero { gap: 10px; }
.masthead .lede { font-size: 1rem; }
.start { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; grid-template-columns: none; }
.start a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 999px; font-size: .9rem; font-weight: 600; background: var(--surface); border: 1px solid var(--rule); box-shadow: none; color: var(--ink-2); text-decoration: none; }
.start a:hover { border-color: var(--accent); color: var(--ink); }
.start a.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.start a.primary:hover { filter: brightness(1.08); color: var(--accent-ink); }
.facts { font-size: .74rem; gap: 4px 18px; }
@media (max-width: 640px) { .masthead .wrap { padding-block: 18px 12px; } }

.secbar .wrap { gap: 10px; }
.secbar nav { align-items: center; }
.secbar a i { font-style: normal; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 7px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: .72rem; font-weight: 700; }
.secbar a.on i { background: var(--accent); color: var(--accent-ink); }
.secbar .sep { flex: none; width: 1px; height: 20px; background: var(--rule); margin: 0 8px; }
@media (max-width: 640px) {
  .secbar nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
  .secbar a { padding: 7px 10px; font-size: .86rem; }
}

main > section.block { padding-block: 40px 12px; }
main > section.block ~ section.block { border-top: 1px solid var(--rule); margin-top: 28px; padding-top: 40px; }
.block-head { margin-bottom: 16px; }
.block-head .eyebrow { color: var(--accent); font-weight: 500; }
.gloss-d { margin-top: 2px; }
.gloss-d summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--accent); }
.gloss-d .gloss { margin-top: 8px; }
.next { display: flex; justify-content: flex-end; margin: 22px 0 6px; }
.next a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font-weight: 600; text-decoration: none; background: var(--surface); }
.next a:hover { background: var(--accent-soft); }
.refdiv { margin-top: 56px; padding-block: 34px 6px; background: var(--surface-2); border-top: 1px solid var(--rule); }
.refdiv .wrap { display: grid; gap: 6px; max-width: 1240px; }
.refdiv p { color: var(--ink-2); max-width: 70ch; }
.refdiv { padding-bottom: 30px; border-bottom: 1px solid var(--rule); }
.refdiv + section.block { border-top: 0 !important; margin-top: 0 !important; }

/* Step 1 form */
.fgroup { display: grid; gap: 12px; }
.fgroup + .fgroup { border-top: 1px solid var(--rule); padding-top: 14px; }
.fgroup > .cover-group:first-of-type, .fgroup > .gh + .cover-group { border-top: 0; padding-top: 0; }
.gh { font-family: var(--f-body); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sexsmk { align-items: start; }
@media (max-width: 560px) { .calc-form .row2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .start a:not(.primary):not([href="blog/index.html"]) { display: none; } .facts span:nth-child(n+2) { display: none; } }
.sexsmk .seg label { padding-inline: 4px; font-size: .82rem; }
details.adv > summary span { display: block; font-weight: 400; font-size: .76rem; color: var(--ink-3); }
.calc-form > .seg.three label { font-size: .82rem; }

/* Results */
.results-head { gap: 8px; }
.results-head .summary { font-size: 1.05rem; }
.results-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 2px; }
.results-tools .sortrow { margin-top: 0; }
.results-tools .viewsel { margin-left: auto; padding-left: 0; }
.results-tools .viewsel label { display: inline; }
.phone-sort { display: none; }
.results-foot { padding: 14px 18px 4px; display: grid; gap: 10px; border-top: 1px solid var(--rule); }
.results-foot .refline { margin: 0; }
@media (min-width: 861px) { .calc-form { max-height: calc(100vh - 78px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } }
details.basis > summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--accent); }
details.basis[open] > summary { margin-bottom: 6px; }
details.basis .hint { margin-top: 4px; }

@media (max-width: 720px) {
  .desk-sort { display: none !important; }
  .phone-sort { display: flex; }
  .results-tools .viewsel { margin-left: 0; }
  .results-tools .sortrow select { max-width: 60vw; }
  .qtable-wrap { overflow: visible; }
  .qtable, .qtable > tbody { display: block; width: 100%; }
  .qtable > thead { display: none; }
  .qtable tr.q { display: flex; flex-wrap: wrap; gap: 10px 8px; position: relative; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
  .qtable tr.q > td { display: block; padding: 0; border: 0; text-align: left; background: transparent !important; min-width: 0; }
  .qtable tr.q > td:empty { display: none; }
  .qtable tr.q > td.rank { position: absolute; left: 16px; top: 15px; width: auto; }
  .qtable tr.q > td.fname { flex: 1 1 100%; min-width: 0; padding-left: 26px; }
  .qtable tr.q > td.barcell { display: none; }
  .qtable tr.q > td[data-l] { flex: 1 1 26%; }
  .qtable tr.q > td[data-l]::before { content: attr(data-l); display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; margin-bottom: 1px; }
  .qtable tr.q > td[data-k="total"], .qtable tr.q > td[data-k="ten"] { flex: 1 1 44%; padding: 8px 10px; background: var(--surface-2) !important; border-radius: 6px; }
  .qtable tr.q > td[data-k="total"] { font-size: 1.02rem; }
  .qtable tr.q.best { background: var(--mark-soft); }
  .qtable tr.q.best > td[data-k="total"], .qtable tr.q.best > td[data-k="ten"] { background: var(--surface) !important; }
  .qtable tr.q:hover td { background: transparent; }
  .qtable tr.na-head { display: block; }
  .qtable tr.na-head > td { display: block; }
  .qtable tr.detail:not([hidden]) { display: block; }
  .qtable tr.detail > td { display: block; padding: 12px 16px; }
  .qtable tr.detail > td:first-child:empty { display: none; }
  .detail dl { grid-template-columns: 1fr; gap: 2px 0; }
  .detail dt { margin-top: 8px; }
  .results-foot { padding-inline: 16px; }
}

/* ---- multi-page additions ---- */
.off { display: none !important; }
.block-head h1 { font-size: clamp(1.55rem, 2.6vw, 2rem); line-height: 1.15; }
.masthead.mini { background: var(--plum); }
.masthead.mini .wrap { padding-block: 10px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.masthead.mini .sunart { display: none; }
.crumbs { font-size: .88rem; color: #d8c0d2; }
.crumbs a { color: #fff1e4; text-decoration: none; border-bottom: 1px solid rgba(255,241,228,.35); }
.crumbs a:hover { border-bottom-color: var(--peach); }
.crumbs span[aria-hidden] { margin-inline: 6px; opacity: .7; }
.secbar a.home { font-weight: 600; }
.pgnav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); }
.pgnav a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; }
.pgnav a:hover { border-color: var(--accent); }
.pgnav a.fwd { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); margin-left: auto; }
.pgnav a.fwd:hover { filter: brightness(1.08); color: var(--accent-ink); }
.home-block { padding-block: 34px 8px; }
.home-block + .home-block { padding-top: 22px; }
.home-block h2 { margin-bottom: 6px; }
.home-block .sub { color: var(--ink-2); max-width: 66ch; margin: 0 0 16px; }
.feat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); gap: 14px; }
.feat a { display: grid; gap: 6px; align-content: start; height: 100%; padding: 16px 17px 15px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); color: var(--ink); text-decoration: none; position: relative; }
.feat a:hover { border-color: var(--accent); box-shadow: 0 2px 0 var(--accent); }
.feat a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.feat b { font-family: var(--f-display); font-size: 1.12rem; line-height: 1.25; display: flex; align-items: center; gap: 9px; }
.feat b i { font-style: normal; flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: .8rem; font-family: var(--f-body, inherit); }
.feat span { color: var(--ink-2); font-size: .92rem; line-height: 1.45; }
.feat em { font-style: normal; font-weight: 600; color: var(--accent); font-size: .88rem; margin-top: 2px; }
.feat.ref a { background: var(--surface-2); }
.band { margin-block: 30px 6px; padding: 18px 20px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.band p { margin: 0; max-width: 60ch; color: var(--ink-2); }
.band p b { color: var(--ink); }
.band .pgbtn { display: inline-block; padding: 9px 18px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; }
@media (max-width: 520px) { .masthead.mini .wrap { padding-block: 8px; } .crumbs { font-size: .82rem; } }
.facts[hidden], #h-n[hidden] { display: none !important; }

/* ---------- cover-by-cover split, mix and match, % vs #1 ---------- */
.pc { display: block; font-size: .72rem; line-height: 1.3; margin-top: 2px; white-space: nowrap; }
.qtable th.pcth { font-size: .78rem; vertical-align: bottom; white-space: nowrap; }
.qtable th.pcth small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-3); font-size: .7rem; max-width: 9em; white-space: normal; margin-left: auto; }
.pctc { white-space: nowrap; }
.pctc b { font-family: var(--f-data); font-weight: 600; }
.pctc small { display: block; font-size: .7rem; line-height: 1.3; margin-top: 2px; }
.pct-up { color: var(--warn); }
.pct-down { color: var(--good); }
.pct-top { font: 600 .74rem/1 var(--f-data); color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); padding: 3px 7px; border-radius: 999px; }
.qtable tr.mix td { background: color-mix(in srgb, var(--good) 9%, var(--surface)); border-top: 2px solid color-mix(in srgb, var(--good) 45%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--good) 45%, transparent); }
.qtable tr.mix:hover td { background: color-mix(in srgb, var(--good) 14%, var(--surface)); }
.qtable tr.mix td.rank { font-weight: 700; color: var(--good); }
.mixname { display: block; font-family: var(--f-display); font-weight: 700; color: var(--ink); }
.mixsrc { display: block; font-size: .7rem; line-height: 1.3; margin-top: 2px; white-space: normal; max-width: 12em; margin-left: auto; }
.bar.mixbar { background: var(--good); }
.mixdetail ul { margin: 0 0 8px; padding-left: 1.1em; display: grid; gap: 6px; font-size: .86rem; }
.mixdetail p { margin: 6px 0 0; }
.mixpanel { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.mixpanel[hidden] { display: none; }
.mix-head h3 { font-size: 1.05rem; margin: 0 0 2px; }
.mix-head .hint { margin: 0 0 12px; }
.mix-note { margin: 0; }
.mixgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
@media (min-width: 721px) { .mixgrid.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mixcol { border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; background: var(--paper); min-width: 0; }
.mixcol h4 { margin: 0 0 6px; font: 700 .92rem/1.25 var(--f-display); }
.mixcol h4 small { display: block; font: 400 .74rem/1.3 var(--f-body); color: var(--ink-3); margin-top: 1px; }
.mixcol > .hint { font-size: .74rem; margin: 0 0 6px; }
.mixcol ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: none; }
.mixcol li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: baseline; font-size: .82rem; padding: 3px 6px; border-radius: 5px; }
.mixcol li.picked { background: color-mix(in srgb, var(--good) 14%, transparent); font-weight: 600; }
.mx-f { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.mx-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mx-uw { flex: none; }
.mx-v { font-family: var(--f-data); white-space: nowrap; }
.mx-p { min-width: 3.4em; text-align: right; font-family: var(--f-data); font-size: .76rem; color: var(--warn); white-space: nowrap; }
.mx-best { color: var(--good); font-weight: 600; }
.mx-uw { font-style: normal; font: 600 .62rem/1 var(--f-data); color: var(--bad); border: 1px solid currentColor; border-radius: 3px; padding: 1px 3px; vertical-align: 1px; }
.mixcol details { margin-top: 4px; }
.mixcol summary { cursor: pointer; font-size: .78rem; color: var(--accent); font-weight: 600; padding: 2px 6px; }
.mixsum { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--good) 9%, var(--surface)); font-size: .9rem; }
.mixsum p { margin: 0 0 6px; }
.mixsum p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .qtable tr.q.mix { background: color-mix(in srgb, var(--good) 9%, var(--surface)); border-top: 2px solid color-mix(in srgb, var(--good) 45%, transparent); }
  .qtable tr.q.mix > td { border: 0; }
  .qtable tr.q > td.pctc { flex: 1 1 26%; }
  .mixsrc { margin-left: 0; }
  .qtable tr.q > td.pctc small { white-space: normal; }
}