/* Plan generator (/plan/). Tokens and base styles live in site.css. */
.wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
/* Header */
.top { border-bottom: 1px solid var(--line); background: var(--panel); }
.top .wrap { padding-block: 18px; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; max-width: 1440px; margin: 0 auto; }
.brand { display: flex; flex-direction: column; gap: 4px; }
.eyebrow { font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.brand h1 { font-size: 40px; }
.brand h1 span { background: linear-gradient(transparent 62%, var(--marker) 62%, var(--marker) 92%, transparent 92%); padding-inline: 2px; }
.brand p { margin: 0; color: var(--muted); max-width: 62ch; }
.top-actions { display: flex; flex-wrap: wrap; gap: 8px; }

button, .btn { font: 600 13px/1 var(--body); border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 9px 13px; cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--panel); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--marker); outline-offset: 2px; }
button.link { border: 0; background: none; padding: 4px 0; color: var(--accent); }

/* Workbench */
.bench { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: 28px; padding-block: 24px 64px; }
@media (max-width: 960px) { .bench { grid-template-columns: minmax(0, 1fr); } }

/* Intake */
.intake { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 78px); align-self: start; max-height: calc(100vh - 94px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
@media (max-width: 960px) { .intake { position: static; max-height: none; overflow: visible; } }
.intake-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.intake-head h2 { font-size: 24px; }
.example-note { font-size: 13px; background: var(--marker-soft); border-radius: 6px; padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.example-note[hidden] { display: none !important; }
fieldset { border: 0; border-bottom: 1px solid var(--line); margin: 0; padding: 14px 18px 16px; display: grid; gap: 10px; min-width: 0; }
fieldset:last-of-type { border-bottom: 0; }
legend { float: left; width: 100%; font: 700 17px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; margin-bottom: 2px; color: var(--accent); }
legend + * { clear: both; }
label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--muted); min-width: 0; }
input, select, textarea { font: 14px/1.3 var(--body); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 8px 9px; width: 100%; min-width: 0; }
textarea { resize: vertical; min-height: 54px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1.4fr .8fr 1fr; gap: 8px; }
.hint { font-size: 12px; color: var(--muted); margin: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.checks label { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink); font-weight: 400; }
.checks input { width: auto; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.seg label { display: block; text-align: center; cursor: pointer; padding: 8px 4px; color: var(--ink); font-size: 13px; font-weight: 600; border-left: 1px solid var(--line); }
.seg label:first-child { border-left: 0; }
.seg label small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label:has(input:checked) { background: var(--accent-soft); box-shadow: inset 0 -3px 0 var(--accent); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--marker); outline-offset: -2px; }
.member { display: grid; gap: 6px; padding: 10px; border: 1px dashed var(--line); border-radius: 7px; position: relative; }
.member .rm { position: absolute; top: 4px; right: 6px; border: 0; background: none; color: var(--muted); font-size: 18px; padding: 2px 6px; }
.member .rm:hover { color: var(--warn); }
.list { display: grid; gap: 8px; }

/* Plan output */
.plan { min-width: 0; display: grid; gap: 22px; align-content: start; }
.plan-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px; }
.plan-head h2 { font-size: 36px; }
.plan-head p { margin: 4px 0 0; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: grid; gap: 2px; align-content: start; }
.tile .k { font: 600 11px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tile .v { font: 700 40px/1 var(--display); }
.tile .v small { font: 500 15px var(--body); color: var(--muted); margin-left: 4px; }
.tile .s { font-size: 12.5px; color: var(--muted); }
.flags { display: grid; gap: 8px; }
.flag { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; background: var(--warn-soft); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.flag b.tag { font: 700 11px/1.6 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--warn); white-space: nowrap; }
.flag.info { background: var(--accent-soft); }
.flag.info b.tag { color: var(--accent); }

.sec { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px 22px; display: grid; gap: 14px; min-width: 0; }
.sec-head { display: grid; gap: 6px; }
.sec-head .eyebrow { color: var(--accent); }
.sec-head p { margin: 0; max-width: 68ch; }
.sec p { margin: 0; max-width: 72ch; }
.sub { display: grid; gap: 8px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 600 11.5px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--paper); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; white-space: nowrap; }
tr.total td { font-weight: 600; background: var(--paper); }
.calc { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
mark { background: var(--marker-soft); color: inherit; padding: 0 3px; border-radius: 3px; }
.blank { color: var(--warn); font-family: var(--mono); }
.tierpill { display: inline-block; font: 700 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px; border-radius: 4px; background: var(--accent); color: var(--panel); vertical-align: middle; }
.tierpill.next { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 720px) { .cols2 { grid-template-columns: minmax(0, 1fr); } }
.card { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.card h3 { font-size: 19px; }
.card ul, .sec ul, .sec ol { margin: 0; padding-left: 20px; display: grid; gap: 3px; }
.who { font-size: 12px; color: var(--muted); font-weight: 500; }
.ticks { list-style: none; padding-left: 0 !important; }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.ticks li::before { content: ""; width: 13px; height: 13px; border: 1.5px solid var(--accent); border-radius: 3px; margin-top: 4px; }
.phase { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.phase:first-of-type { border-top: 0; padding-top: 0; }
@media (max-width: 620px) { .phase { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.phase .when { display: grid; gap: 2px; align-content: start; }
.phase .when b { font: 700 18px/1.1 var(--display); }
.phase .when span { font-size: 12.5px; color: var(--muted); }
.contact-card { border: 1.5px dashed var(--ink); border-radius: 8px; padding: 12px 14px; max-width: 340px; font-size: 13.5px; display: grid; gap: 4px; background: var(--paper); }
.contact-card b { font: 700 16px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
#plan .sources { font-size: 13px; color: var(--muted); display: block; }
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 8px; font-size: 13.5px; z-index: 20; }
#procure table { min-width: 600px; }
.copyfallback { width: 100%; min-height: 160px; font: 12px/1.4 var(--mono); }
@media (prefers-reduced-motion: no-preference) {
  .sec, .tile { animation: rise .35s ease both; }
  @keyframes rise { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .sec, .tile { animation: fade .3s ease both; }
  @keyframes fade { from { opacity: .5; } to { opacity: 1; } }
}

/* Reminder signup */
.reminders { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: end; }
@media (max-width: 820px) { .reminders { grid-template-columns: minmax(0, 1fr); } }
.reminders-copy { display: grid; gap: 8px; }
.reminders-copy p { color: var(--muted); max-width: 60ch; }
.reminders-fields { display: grid; gap: 10px; }
.reminders-fields .btn { justify-self: start; }

.top.field { background: var(--field); border-bottom: 0; }
.top.field .brand p { color: var(--field-muted); }
.top.field .brand h1 span { background: linear-gradient(transparent 62%, rgba(242, 194, 48, .55) 62%, rgba(242, 194, 48, .55) 92%, transparent 92%); }
.top.field button { background: transparent; color: var(--field-ink); border-color: var(--field-line); }
.top.field button.primary { background: var(--marker); border-color: var(--marker); color: #17242a; }

.checks.stack { flex-direction: column; gap: 8px; }
.havegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
@media (max-width: 420px) { .havegrid { grid-template-columns: 1fr; } }
.checks label { align-items: flex-start; line-height: 1.35; }
.checks input { margin-top: 2px; flex: none; }

/* Readiness score */
.ready { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, .9fr); gap: 22px; align-items: center; }
@media (max-width: 900px) { .ready { grid-template-columns: 110px minmax(0, 1fr); } .ready-next { grid-column: 1 / -1; } }
@media (max-width: 460px) { .ready { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
.ready-ring { position: relative; width: 116px; height: 116px; }
.ready-ring svg { width: 100%; height: 100%; }
.ready-ring .track { fill: none; stroke: var(--line); stroke-width: 10; }
.ready-ring .fill { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray .5s ease; }
.ready-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px; font: 800 38px/1 var(--stencil); color: var(--ink); }
.ready-ring b small { font: 600 14px var(--body); color: var(--muted); }
.ready-body { display: grid; gap: 10px; min-width: 0; }
.ready-bar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 13.5px; }
@media (max-width: 460px) { .ready-bar { grid-template-columns: minmax(0, 1fr) 44px; } .ready-bar i { grid-column: 1 / -1; grid-row: 2; } }
.ready-bar i { height: 10px; border-radius: 5px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.ready-bar em { display: block; height: 100%; background: var(--marker); transition: width .5s ease; }
.ready-bar b { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.ready-next { border-left: 1px solid var(--line); padding-left: 20px; display: grid; gap: 8px; }
@media (max-width: 900px) { .ready-next { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; } }
.ready-next ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .ready-ring .fill, .ready-bar em { transition: opacity .3s ease; } }

.guide-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.guide-links .eyebrow { margin-right: 4px; }
.guide-links a { font-size: 13.5px; font-weight: 600; text-decoration: none; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); }
.guide-links a:hover { border-color: var(--accent); }

/* ===== View modes: quiz -> results -> full plan / details ===== */
body:not([data-mode]) .bench, body[data-mode="quiz"] .bench,
body:not([data-mode]) #results, body[data-mode="quiz"] #results,
body:not([data-mode]) .reminders-wrap, body[data-mode="quiz"] .reminders-wrap,
body:not([data-mode]) .top-actions, body[data-mode="quiz"] .top-actions, body[data-mode="results"] .top-actions,
body[data-mode="results"] .bench, body[data-mode="results"] #quiz,
body[data-mode="full"] #quiz, body[data-mode="full"] #results, body[data-mode="full"] .intake,
body[data-mode="detail"] #quiz, body[data-mode="detail"] #results { display: none !important; }
.viewbar { display: none; max-width: 1440px; margin: 16px auto 0; }
body[data-mode="full"] .viewbar, body[data-mode="detail"] .viewbar { display: flex; flex-wrap: wrap; gap: 10px; }
#viewFull { display: none; }
body[data-mode="detail"] #viewFull { display: inline-flex; }
body[data-mode="full"] .bench { grid-template-columns: minmax(0, 1fr); max-width: 1100px; }

/* ===== Quick start ===== */
.quiz { max-width: 760px; margin: 0 auto; padding-block: 28px 56px; }
.quiz-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px 26px 20px; display: grid; gap: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
@media (max-width: 520px) { .quiz-card { padding: 20px 16px 16px; } }
.quiz-progress { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; font: 800 12px/1 var(--stencil); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.quiz-progress i { height: 6px; border-radius: 3px; background: var(--paper); overflow: hidden; }
.quiz-progress em { display: block; height: 100%; width: 16%; background: var(--marker); transition: width .35s ease; }
.q { display: grid; gap: 14px; }
.q h2 { font-size: clamp(28px, 4vw, 38px); }
.q h3 { font-size: 19px; margin-top: 6px; }
.q-hint { color: var(--muted); margin: -6px 0 0; }
.counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .counters { grid-template-columns: minmax(0, 1fr); } }
.counter { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.counter b { display: block; font-size: 15px; }
.counter small { display: block; font-size: 12.5px; color: var(--muted); }
.counter-ctl { display: flex; align-items: center; gap: 8px; }
.counter-ctl button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: 600 20px/1 var(--body); padding: 0; }
.counter-ctl button:hover { border-color: var(--accent); }
.counter-ctl output { min-width: 2ch; text-align: center; font: 800 24px/1 var(--stencil); }
.q-inline { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); }
.q-inline select { width: auto; }
.choices { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choices.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choices.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.choices.icons { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
@media (max-width: 560px) { .choices, .choices.three, .choices.four, .choices.icons { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .choices.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choice { position: relative; display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 10px; padding: 14px; min-height: 58px; cursor: pointer; color: var(--ink); font-size: 15px; background: var(--panel); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice b { display: block; font-weight: 600; line-height: 1.25; }
.choice small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.choice .icon { width: 28px; height: 28px; color: var(--accent); flex: none; }
.choices.icons .choice { flex-direction: column; align-items: flex-start; }
.choices.five .choice, .choices.four .choice { justify-content: center; text-align: center; font-family: var(--mono); }
.choice:hover { border-color: var(--accent); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.choice:has(input:checked)::after { content: ""; position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.choice:has(input:focus-visible) { outline: 2px solid var(--marker); outline-offset: 2px; }
.quiz-nav { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.quiz-nav .btn { min-width: 120px; justify-content: center; }
.quiz-alt { text-align: center; margin: -6px 0 0; }

/* ===== Results ===== */
.results { max-width: 1100px; margin: 0 auto; padding-block: 28px 8px; display: grid; gap: 18px; }
.res-head { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; align-items: center; }
@media (max-width: 560px) { .res-head { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
.res-head .ready-ring { width: 136px; height: 136px; }
.res-head h2 { font-size: clamp(30px, 4vw, 42px); }
.res-head p { color: var(--muted); margin: 6px 0 0; max-width: 60ch; }
.res-head .ready-bar { margin-top: 12px; max-width: 520px; }
.res-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 820px) { .res-cols { grid-template-columns: minmax(0, 1fr); } }
.res-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: grid; gap: 12px; align-content: start; }
.res-card h3 { font-size: 24px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.res-card h3 small { font: 600 13px var(--mono); color: var(--muted); }
.res-list { list-style: none; margin: 0; padding: 0; display: grid; }
.res-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.res-list li:first-child { border-top: 0; }
.res-list input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.res-list .what b { display: block; font-weight: 600; }
.res-list .what small { color: var(--muted); font-size: 13px; }
.res-list .amt { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; }
.res-list li.done .what b { text-decoration: line-through; color: var(--muted); }
.res-empty { color: var(--muted); }
.res-next { display: grid; gap: 6px; font-size: 14.5px; }
.res-next div { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 10px; color: var(--muted); }
.res-next b { color: var(--ink); font-weight: 600; }
.res-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.res-flags { display: grid; gap: 8px; }

body[data-mode="results"] .plan-hero .lede, body[data-mode="full"] .plan-hero .lede, body[data-mode="detail"] .plan-hero .lede { display: none; }

/* ===== Plan tool on the cinematic system ===== */
.cine .page-head.plan-hero { min-height: clamp(380px, 48svh, 520px); padding-bottom: 48px; }
.cine .plan-hero .photo img { object-position: 85% 45%; }
.cine .plan-hero h1 { max-width: 16ch; }
.cine .plan-hero .top-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cine .plan-hero .top-actions button { border-radius: 999px; padding: 11px 18px; background: transparent; color: var(--ink); border: 1px solid rgba(238, 241, 236, .3); font-weight: 600; }
.cine .plan-hero .top-actions button.primary { background: var(--lamp); border-color: var(--lamp); color: #14100a; }
.cine .quiz, .cine .results { padding-top: 0; margin-top: -24px; position: relative; z-index: 2; }
.cine .quiz-card, .cine .res-head, .cine .res-card, .cine .intake, .cine .sec, .cine .tile, .cine .ready, .cine .reminders { background: var(--night-2); border-color: var(--faint); border-radius: 18px; box-shadow: none; }
.cine .quiz-card { padding: 34px 34px 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.cine .q h2, .cine .res-head h2, .cine .plan-hero h1, .cine .sec h2, .cine .plan-head h2 { font-family: var(--poster); text-transform: uppercase; }
.cine .q h2 { font-size: clamp(34px, 3.6vw, 52px); }
.cine .quiz-progress { color: var(--lamp); }
.cine .quiz-progress em, .cine .ready-bar em { background: var(--lamp); }
.cine .choice { background: transparent; border-color: var(--faint); color: var(--ink); }
.cine .choice:hover { border-color: rgba(255, 210, 122, .6); }
.cine .choice:has(input:checked) { border-color: var(--lamp); background: rgba(255, 210, 122, .08); box-shadow: inset 0 0 0 1px var(--lamp); }
.cine .choice:has(input:checked)::after { background-color: var(--lamp); }
.cine .choice .icon { color: var(--lamp); }
.cine .counter { border-color: var(--faint); }
.cine .counter-ctl button { background: transparent; border-color: rgba(238, 241, 236, .25); color: var(--ink); }
.cine .counter-ctl button:hover { border-color: var(--lamp); color: var(--lamp); }
.cine .quiz-nav { border-color: var(--faint); }
.cine .quiz-nav .btn { border-radius: 999px; }
.cine .ready-ring .fill { stroke: var(--lamp); filter: drop-shadow(0 0 8px rgba(255, 190, 90, .5)); }
.cine .ready-ring svg { overflow: visible; }
.cine .ready-ring b { font-family: var(--poster); }
.cine .res-head h2 { font-size: clamp(40px, 4.4vw, 64px); }
.cine .res-card h3 { font-family: var(--poster); text-transform: uppercase; font-size: 28px; }
.cine .res-list li { border-color: var(--faint); }
.cine .res-list input, .cine input[type=checkbox] { accent-color: var(--lamp); }
.cine .flag { background: rgba(240, 167, 60, .1); border: 1px solid rgba(240, 167, 60, .25); }
.cine .flag b.tag { color: var(--ember); }
.cine .flag.info { background: rgba(102, 184, 176, .08); border-color: rgba(102, 184, 176, .25); }
.cine .flag.info b.tag { color: var(--accent); }
.cine .intake input, .cine .intake select, .cine .intake textarea, .cine .reminders input { background: var(--night); border-color: var(--faint); color: var(--ink); }
.cine .intake legend { color: var(--lamp); font-family: var(--stencil); letter-spacing: .16em; font-size: 14px; }
.cine .intake fieldset { border-color: var(--faint); }
.cine .sec .eyebrow { color: var(--lamp); }
.cine .sec h2 { font-size: clamp(30px, 3vw, 44px); }
.cine .tile .v { font-family: var(--poster); }
.cine th { white-space: nowrap; }
.cine mark { background: rgba(255, 210, 122, .12); color: var(--lamp); }
.cine .tierpill { background: var(--lamp); color: #14100a; }
.cine .tierpill.next { background: transparent; color: var(--lamp); border-color: var(--lamp); }
.cine .guide-links a { background: transparent; border-color: var(--faint); color: var(--ink); }
.cine .viewbar .btn { border-radius: 999px; }
.cine .reminders { padding: 30px; }
.cine .reminders-copy h2 { font-family: var(--poster); text-transform: uppercase; font-size: clamp(30px, 3vw, 44px); }
.cine .reminders-wrap { padding-bottom: 100px; }

/* Per-pillar scores under the readiness number */
.pillar-scores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 14px; max-width: 640px; }
.pillar-scores div { display: grid; gap: 6px; font-size: 12.5px; }
.pillar-scores span { color: var(--muted); }
.pillar-scores i { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; display: block; }
.pillar-scores em { display: block; height: 100%; background: var(--lamp, var(--marker)); }
.pillar-scores b { font: 800 18px/1 var(--poster, var(--display)); }
@media (max-width: 560px) { .pillar-scores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* spreadsheet email gate */
.sheet-gate { width: min(480px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--faint, var(--line)); border-radius: 18px; background: var(--night-2, var(--panel)); color: var(--ink); }
.sheet-gate::backdrop { background: rgba(6, 10, 9, .72); backdrop-filter: blur(3px); }
.sheet-gate form { display: grid; gap: 12px; padding: 30px; }
.sheet-gate h2 { font-family: var(--poster, inherit); text-transform: uppercase; font-size: clamp(28px, 4vw, 38px); line-height: .95; margin: 0; }
.sheet-gate p { margin: 0; color: var(--muted); }
.sheet-gate label { display: grid; gap: 6px; font-weight: 600; }
.sheet-gate input[type=email] { background: var(--night, #0b1210); border: 1px solid var(--faint, var(--line)); color: var(--ink); border-radius: 10px; padding: 12px 14px; font: inherit; }
.sheet-gate .gate-fine { font-size: 13px; }
.sheet-gate .hint:empty { display: none; }
.sheet-gate .gate-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* the Binder: results card and locked previews in the full plan */
.binder-card { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 32px; align-items: center; margin: 18px 0; padding: 28px; border-radius: 18px;
  border: 1px solid rgba(255, 210, 122, .5); background: radial-gradient(90% 140% at 0% 0%, rgba(255, 190, 90, .12), transparent 60%), var(--night-2, var(--panel)); }
.binder-card.owned { grid-template-columns: minmax(0, 1fr); }
.binder-pages { position: relative; height: 290px; }
.binder-pages img { position: absolute; width: 74%; height: auto; border-radius: 3px; box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
.binder-pages .b1 { left: 0; top: 6px; transform: rotate(-4deg); z-index: 2; }
.binder-pages .b2 { right: 0; top: 26px; transform: rotate(5deg); filter: brightness(.75); }
.binder-copy { display: grid; gap: 12px; }
.binder-copy h3 { font-family: var(--poster, inherit); text-transform: uppercase; font-size: clamp(26px, 2.6vw, 36px); line-height: .98; margin: 0; }
.binder-copy p { margin: 0; color: var(--muted); max-width: 46em; }
.binder-list { list-style: none; margin: 2px 0; padding: 0; display: grid; gap: 8px; }
.binder-list li { position: relative; padding-left: 26px; }
.binder-list li::before { content: ""; position: absolute; left: 2px; top: .4em; width: 11px; height: 6px; border-left: 2px solid var(--lamp, var(--accent)); border-bottom: 2px solid var(--lamp, var(--accent)); transform: rotate(-45deg); }
.binder-fine { font-size: 13.5px; }
.lock-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.locked { position: relative; }
.locked .peek { max-height: 300px; overflow: hidden; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(#000 35%, transparent 92%); mask-image: linear-gradient(#000 35%, transparent 92%); }
.lock-panel { position: relative; margin-top: -90px; display: grid; gap: 10px; justify-items: start; padding: 26px 28px; border-radius: 16px;
  border: 1px solid rgba(255, 210, 122, .5); background: radial-gradient(80% 140% at 100% 0%, rgba(255, 190, 90, .12), transparent 60%), var(--night-2, var(--panel)); }
.lock-panel h3 { font-family: var(--poster, inherit); text-transform: uppercase; font-size: clamp(24px, 2.4vw, 32px); line-height: 1; margin: 0; }
.lock-panel p { margin: 0; color: var(--muted); max-width: 52em; }
.lock-mini { border-style: dashed; border-color: rgba(255, 210, 122, .45); display: grid; gap: 8px; align-content: start; }
.lock-mini h3 { margin: 0; }
.lock-mini p { margin: 0; color: var(--muted); }
.lock-link { color: var(--lamp, var(--accent)); font-weight: 600; }
@media (max-width: 720px) {
  .binder-card { grid-template-columns: minmax(0, 1fr); padding: 22px; gap: 18px; }
  .binder-pages { width: 200px; height: 232px; }
  .lock-panel { padding: 22px; }
}
@media print {
  .binder-card, .lock-actions, .locked .peek { display: none !important; }
  .lock-panel { margin: 0; border: 1px dashed #999; background: none; }
  .lock-mini { border: 1px dashed #999; }
}
@media print {
  #backToSummary, .plan-hero .top-actions { display: none !important; }
  .plan-hero h1 { font-size: 22pt !important; }
}
@media print {
  .ready-bar, .ready-bar em, .ready-bar i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cine .ready-ring .fill { filter: none; }
}
@media print {
  /* A clipped, rounded table box breaks badly across pages: let it flow, rows stay whole */
  .tablewrap { overflow: visible !important; border-radius: 0 !important; }
  .tablewrap table { border-collapse: collapse; }
}
@media print {
  /* Chrome fragments grid containers poorly (overlaps, half-empty pages): stack sections as plain blocks */
  .sec, .plan, .res-head { display: block !important; }
  .sec > * + * { margin-top: 12px; }
}

@media print { .viewbar { display: none !important; } }

/* Free plan vs the binder, side by side on the results page */
.two-plans { margin: 28px 0 8px; display: grid; gap: 16px; }
.tp-head h2 { margin: 4px 0 0; }
.tp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.tp-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 18px; border: 1px solid var(--faint, var(--line)); background: var(--night-2, var(--panel)); position: relative; }
.tp-binder { border-color: var(--lamp, var(--accent)); box-shadow: 0 0 0 1px var(--lamp, var(--accent)) inset; }
.tp-card h3 { margin: 0; font: 900 clamp(28px, 3vw, 36px)/1 var(--poster, inherit); text-transform: uppercase; }
.tp-what { margin: 0; font-weight: 600; color: var(--ink); }
.tp-tag { align-self: flex-start; font: 800 12px/1 var(--stencil); letter-spacing: .14em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--faint, var(--line)); color: var(--ink); }
.tp-tag-paid { background: var(--lamp, var(--accent)); border-color: var(--lamp, var(--accent)); color: #14100a; }
.tp-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--soft, var(--muted)); }
.tp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
.tp-card .binder-pages { width: 150px; height: 170px; position: absolute; right: 22px; top: 22px; }
.tp-binder .tp-tag, .tp-binder h3, .tp-binder .tp-what { max-width: calc(100% - 160px); }
.tp-more { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 18px 22px; border-radius: 14px; border: 1px dashed var(--faint, var(--line)); }
.tp-more .tp-actions { margin: 0; padding: 0; }
@media (max-width: 760px) {
  .tp-grid { grid-template-columns: minmax(0, 1fr); }
  .tp-card { padding: 22px; }
  .tp-card .binder-pages { width: 96px; height: 110px; right: 16px; top: 16px; }
  .tp-binder .tp-tag, .tp-binder h3, .tp-binder .tp-what { max-width: calc(100% - 104px); }
}

/* The full plan labels itself as the free plan, and ends with the binder */
.free-mark { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 14px; font: 800 13px/1.3 var(--stencil); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.free-mark b { color: var(--lamp, var(--accent)); font-weight: 800; }
.safety-top { margin: 0 0 18px; padding: 12px 16px; border-left: 3px solid var(--marker, #f2c230); border-radius: 0 10px 10px 0; font-size: 14.5px; color: var(--ink); background: rgba(242, 194, 48, .08); }
.safety-top a, .safety-notes a { color: inherit; }
.safety-notes ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
@media print { .safety-top { border-left: 3px solid #8a5a00; background: none; } .safety-top a { text-decoration: none; } .safety-notes { break-inside: avoid; } }
.free-end { margin: 28px 0 8px; padding: 26px; border-radius: 18px; border: 1px solid var(--lamp, var(--accent)); display: grid; gap: 8px; }
.free-end h3 { margin: 0; font: 900 clamp(24px, 2.6vw, 32px)/1.05 var(--poster, inherit); text-transform: uppercase; }
.free-end p { margin: 0; }
.free-end-url { display: none; }
.free-end .btn { justify-self: start; margin-top: 6px; }
@media print {
  .two-plans { display: none !important; }
  .free-mark b { color: #111; }
  .free-end { break-inside: avoid; border: 1px solid #999; }
  .free-end-url { display: block; font-weight: 700; }
}
@media print {
  /* Whatever view is on screen (summary, details, free plan), the printout is the free plan */
  body[data-mode] .bench { display: block !important; }
  body[data-mode] #results, body[data-mode] #quiz, body[data-mode] .intake { display: none !important; }
}