@import url('./tokens.css');
  
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.65
}
button,input,select {
  font:inherit;
  color:inherit
}
button,a,input,select,summary {
  -webkit-tap-highlight-color:var(--transparent)
}
button {
  cursor:pointer
}
button {
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  min-height:44px;
  padding:var(--space-sm) var(--space-lg)
}
button:hover {
  border-color:var(--foreground)
}
button:active {
  transform:translateY(1px)
}
button:disabled {
  cursor:not-allowed;
  opacity:.55;
  transform:none
}
a {
  color:inherit
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-family:var(--font-heading);
  line-height:1.35
}
h1 {
  font-size:var(--text-4xl);
  font-weight:800;
  letter-spacing:-.04em
}
h2 {
  font-size:var(--text-2xl);
  letter-spacing:-.03em
}
h3 {
  font-size:var(--text-lg)
}
:focus-visible {
  outline:3px solid var(--ring);
  outline-offset:3px
}
img {
  display:block;
  max-width:100%;
  image-rendering:pixelated
}
.site-header {
  max-width:1120px;
  margin:0 auto;
  padding:var(--space-xl) var(--space-2xl);
  display:flex;
  align-items:center;
  gap:var(--space-xl);
  border-bottom:1px dashed var(--border)
}
.brand-group {
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
  min-width:0
}
.brand {
  font-size:var(--text-lg);
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:var(--space-sm);
  min-height:44px;
  align-self:flex-start
}
.brand-symbol { display:inline-flex; flex-shrink:0 }
.brand-mark { width:var(--space-2xl); height:var(--space-2xl); object-fit:contain }
.header-caption {
  font-size:var(--text-xs);
  line-height:1.4;
  color:var(--muted)
}
.site-header > .link { margin-left:auto; flex-shrink:0 }
.link {
  background:var(--transparent);
  border-color:var(--transparent);
  padding:var(--space-sm);
  text-decoration:underline;
  text-underline-offset:4px
}
.link:hover {
  border-color:var(--transparent);
  color:var(--ring)
}
main {
  max-width:1056px;
  margin:0 auto;
  padding:var(--space-3xl) var(--space-2xl);
  outline:none!important;
  min-height:70vh
}
footer {
  max-width:1056px;
  margin:0 auto;
  padding:var(--space-xl) var(--space-2xl);
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:var(--space-lg);
  border-top:1px dashed var(--border);
  font-size:var(--text-sm);
  color:var(--muted)
}
.footer-links { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:var(--space-sm); }
.footer-links a { display:inline-flex; align-items:center; gap:var(--space-xs); min-height:44px; }
.kicker {
  display:flex;
  align-items:center;
  gap:var(--space-md);
  color:var(--muted);
  font-size:var(--text-xs);
  letter-spacing:.05em;
  margin-bottom:var(--space-lg)
}
.serial {
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.08em;
  color:var(--muted)
}
.primary {
  background:var(--primary);
  border-color:var(--primary);
  font-weight:750;
  min-height:52px
}
.primary:hover {
  background:var(--cta);
  border-color:var(--ring)
}
.wide {
  width:100%
}
.muted {
  color:var(--muted)
}
.tiny {
  font-size:var(--text-sm)
}
.dash {
  border-top:1px dashed var(--border)
}
.home-mode main,.home-mode footer {
  max-width:1120px
}
.home-layout {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:start;
  column-gap:var(--space-4xl);
  row-gap:var(--space-xl)
}
.home-intro {
  min-width:0;
  grid-column:1;
  grid-row:1
}
.home-intro .kicker {
  flex-wrap:wrap;
  gap:var(--space-xs) var(--space-md);
  margin-bottom:var(--space-2xl)
}
.home-intro h1 {
  font-size:var(--text-3xl);
  text-wrap:balance
}
.home-intro p {
  margin-top:var(--space-2xl);
  color:var(--muted);
  font-size:var(--text-lg);
  text-wrap:pretty
}
.home-selection {
  display:flex;
  flex-direction:column;
  gap:var(--space-xl);
  min-width:0;
  grid-column:2;
  grid-row:1 / span 2;
  margin-top:var(--space-xl)
}
.selection-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--space-xl)
}
.selection-grid .label-row {
  flex-wrap:wrap;
  gap:var(--space-xs) var(--space-md)
}
.label-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--space-md)
}
.old-selection,.target-selection {
  display:grid;
  grid-template-rows:auto 1fr;
  min-width:0
}
.old-select {
  width:100%;
  display:flex;
  align-items:center;
  gap:var(--space-lg);
  min-height:var(--space-6xl);
  text-align:left;
  padding:var(--space-lg) var(--space-xl);
  background:var(--paper);
  border-radius:var(--radius-md)
}
.old-select .phone-svg,.phone-placeholder {
  flex-shrink:0;
  width:var(--space-3xl);
  height:var(--space-4xl)
}
.old-select-copy { min-width:0 }
.old-select strong {
  display:block;
  font-size:var(--text-lg);
  font-weight:650;
  line-height:1.4
}
.old-select-description {
  display:block;
  margin-top:var(--space-xs);
  font-size:var(--text-xs);
  line-height:1.5;
  color:var(--muted)
}
.old-select .chevron {
  margin-left:auto;
  flex-shrink:0;
  width:var(--space-lg);
  height:var(--space-lg)
}
.target-options {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-md)
}
.target-card {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-sm);
  min-height:200px;
  background:var(--paper);
  padding:var(--space-lg) var(--space-sm);
  border-radius:var(--radius-md);
  font-weight:650
}
.target-card[aria-pressed=true] {
  background:var(--secondary);
  border-color:var(--ring)
}
.check {
  position:absolute;
  top:var(--space-sm);
  right:var(--space-sm);
  font-size:var(--text-sm);
  color:var(--foreground);
  background:var(--primary);
  width:24px;
  height:24px;
  text-align:center
}
.phone-svg {
  display:block;
  width:70px;
  height:132px;
  overflow:visible
}
.phone-fallback {
  width:70px;
  min-height:115px;
  display:grid;
  place-content:center;
  border:1px dashed var(--border);
  font-size:var(--text-xs);
  text-align:center
}
.home-action {
  text-align:center
}
.home-action p {
  margin-top:var(--space-sm)
}
.error {
  color:var(--destructive);
  font-size:var(--text-sm)
}
.examples {
  grid-column:1;
  grid-row:2;
  min-width:0;
  padding-top:var(--space-xl);
  border-top:1px dashed var(--border)
}
.examples h2 {
  font-size:var(--text-lg)
}
.examples > .label-row {
  flex-wrap:wrap;
  gap:var(--space-sm) var(--space-lg);
  margin-bottom:var(--space-xl)
}
.example-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-lg)
}
.example {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-md);
  min-width:0;
  text-align:center
}
.example + .example {
  border-left:1px solid var(--border);
  padding-left:var(--space-lg)
}
.example .mascot {
  width:64px;
  height:64px
}
.example strong {
  display:block;
  font-size:var(--text-sm)
}
.example p {
  margin-top:var(--space-xs);
  font-size:var(--text-xs);
  color:var(--muted);
  text-wrap:pretty
}
.mascot {
  object-fit:contain;
  display:block
}
.test {
  max-width:650px;
  margin:auto
}
.device-strip {
  display:flex;
  gap:var(--space-md);
  align-items:center;
  justify-content:center;
  font-size:var(--text-sm)
}
.device-strip-item { display:flex; align-items:center; gap:var(--space-sm); min-width:0 }
.header-device-pair { margin-left:auto; min-width:0 }
.header-device-pair[hidden] { display:none }
.device-strip .phone-svg {
  flex-shrink:0;
  width:var(--space-xl);
  height:var(--space-3xl)
}
.device-strip .phone-fallback {
  min-height:44px;
  width:36px
}
.progress-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--space-md)
}
.progress {
  display:flex;
  gap:var(--space-sm)
}
.progress span {
  width:20px;
  height:20px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--paper)
}
.progress .done {
  background:var(--primary);
  border-color:var(--ring)
}
.question {
  padding:var(--space-2xl);
  background:var(--paper);
  border-radius:var(--radius-md)
}
.question h1 {
  font-size:var(--text-xl);
  text-wrap:balance
}
.question .choices {
  border:0;
  padding:0;
  margin:var(--space-lg) 0;
  display:grid;
  gap:var(--space-sm)
}
.choices legend {
  padding:0;
  margin-bottom:var(--space-sm);
  color:var(--muted)
}
.choice {
  display:flex;
  align-items:center;
  gap:var(--space-md);
  min-height:56px;
  padding:var(--space-md) var(--space-lg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  cursor:pointer;
  line-height:1.5
}
.choice:has(input:checked) {
  background:var(--secondary);
  border-color:var(--ring)
}
.choice input {
  accent-color:var(--ring);
  min-width:20px;
  min-height:20px;
  margin:0
}
.question-actions {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-sm)
}
.back-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-xs);
  margin-top:var(--space-xs)
}
.test-mode { display:grid; grid-template-rows:auto 1fr auto; min-height:100dvh }
.test-mode .site-header { width:100%; padding:var(--space-sm) var(--space-2xl) }
.test-mode .header-caption { display:none }
.test-mode main { width:100%; display:grid; align-content:center; padding:var(--space-2xl); min-height:0 }
.test-mode .test { width:100%; max-width:calc(var(--space-6xl) * 8) }
.test-mode > footer { width:100%; max-width:1120px }
.test-mode .back-row .link { font-size:var(--text-sm) }
@media(min-width:768px) {
  .question .choices { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .test-mode .question .choices { gap:var(--space-md); margin:var(--space-xl) 0 }
  .test-mode .choice { min-height:calc(var(--space-4xl) + var(--space-sm)); padding:var(--space-lg) }
  .test-mode .back-row { margin-top:var(--space-sm) }
}
.report-hero {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  align-items:center;
  gap:var(--space-xl)
}
.report-hero h1 {
  font-size:var(--text-4xl);
  margin-bottom:var(--space-lg)
}
.report-line {
  font-size:var(--text-lg);
  max-width:480px
}
.hero-mascot {
  width:100%;
  height:260px
}
.report-phones {
  display:flex;
  align-items:end;
  justify-content:center;
  gap:var(--space-2xl);
  padding-top:var(--space-xl);
  margin-top:var(--space-xl);
  border-top:1px dashed var(--border)
}
.phone-unit {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-sm);
  text-align:center;
  max-width:42%;
  font-size:var(--text-sm)
}
.arrow {
  align-self:center;
  color:var(--muted);
  font-size:var(--text-xl)
}
.asset-note {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:var(--space-sm);
  color:var(--muted);
  font-size:var(--text-sm);
  margin:var(--space-md) 0;
  padding:var(--space-sm);
  border-bottom:1px dashed var(--border)
}
.asset-placeholder { display:none; pointer-events:none }
[data-asset-failed] > .asset-placeholder { display:block }
[data-asset-failed] > image,[data-asset-failed] > img { visibility:hidden }
.section {
  margin-top:var(--space-3xl);
  scroll-margin-top:var(--space-xl)
}
.segments {
  display:flex;
  gap:var(--space-xs);
  padding:var(--space-xs);
  background:var(--shade);
  border-radius:var(--radius-sm)
}
.segments button {
  background:var(--transparent);
  border-color:var(--transparent);
  font-size:var(--text-sm);
  padding:var(--space-sm) var(--space-md)
}
.segments [aria-pressed=true] {
  background:var(--paper);
  border-color:var(--border);
  font-weight:700
}
.source-link {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  color:var(--muted);
  font-size:var(--text-xs)
}
details {
  font-size:var(--text-sm);
  padding:var(--space-lg);
  border-bottom:1px dashed var(--border)
}
summary {
  cursor:pointer;
  min-height:44px;
  display:flex;
  align-items:center;
  font-weight:650
}
.ledger {
  padding:var(--space-2xl);
  background:var(--paper);
  border-radius:var(--radius-md)
}
.field {
  display:flex;
  flex-direction:column;
  gap:var(--space-sm)
}
.field label {
  font-size:var(--text-sm)
}
.field input {
  width:100%;
  font-size:var(--text-xl);
  font-variant-numeric:tabular-nums
}
.field input[aria-invalid=true] {
  border-color:var(--destructive)
}
.checkbox-row {
  display:flex;
  gap:var(--space-md);
  align-items:center;
  min-height:44px;
  margin-top:var(--space-md);
  cursor:pointer
}
.checkbox-row input {
  width:20px;
  height:20px;
  accent-color:var(--ring)
}
.total {
  padding-top:var(--space-xl);
  margin-top:var(--space-xl);
  border-top:1px dashed var(--border)
}
.total strong {
  display:block;
  font-size:var(--text-2xl);
  font-variant-numeric:tabular-nums
}
.tradeoffs {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-xl);
  margin-top:var(--space-xl)
}
.tradeoffs h3 {
  font-size:var(--text-base);
  margin-bottom:var(--space-sm)
}
.tradeoffs p {
  font-size:var(--text-sm);
  color:var(--muted)
}
dialog {
  border:0;
  border-radius:var(--radius-lg);
  padding:0;
  background:var(--paper);
  color:var(--foreground);
  max-height:92dvh;
  width:min(600px,calc(100% - 32px));
  max-width:none
}
dialog::backdrop {
  background:var(--overlay)
}
body:has(dialog[open]) {
  overflow:hidden
}
.modal-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--space-lg) var(--space-xl);
  border-bottom:1px dashed var(--border);
  position:sticky;
  top:0;
  background:var(--paper);
  z-index:5
}
.modal-header h2 {
  font-size:var(--text-xl)
}
.close {
  font-size:var(--text-xl);
  border-color:var(--transparent);
  padding:var(--space-sm);
  width:44px
}
.modal-body {
  padding:var(--space-xl);
  max-height:72dvh;
  overflow:auto
}
.modal-body h3 {
  margin:var(--space-xl) 0 var(--space-sm)
}
.modal-body h3:first-child {
  margin-top:0
}
.modal-body p {
  margin-bottom:var(--space-md)
}
.modal-body a {
  overflow-wrap:anywhere
}
.search-results {
  display:grid;
  gap:var(--space-sm);
  margin-top:var(--space-lg)
}
.search-results button {
  display:flex;
  align-items:center;
  gap:var(--space-xl);
  text-align:left
}
.search-results .phone-svg {
  width:35px;
  height:66px
}
.print-window {
  overflow:hidden;
  max-width:360px;
  margin:0 auto
}
.receipt-frame {
  display:block;
  width:100%;
  aspect-ratio:2/3
}
/* Only the paper fills the frame; nested SVG crops and fallbacks keep their own layout. */
.receipt-frame > svg {
  display:block;
  width:100%;
  height:100%
}
.printing .receipt-frame {
  animation:feed 750ms linear both
}
.print-tools {
  display:flex;
  justify-content:space-between;
  max-width:360px;
  margin:var(--space-sm) auto 0
}
.print-tools button {
  font-size:var(--text-sm)
}
@keyframes feed {
  0%,10% {
  transform:translateY(-100%)
}
87% {
  transform:translateY(-4%)
}
100% {
  transform:translateY(0)
}

}
.receipt-controls {
  padding:var(--space-md) var(--space-xl) var(--space-lg);
  border-top:1px dashed var(--border);
  background:var(--paper)
}
.switch-line {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-lg);
  min-height:48px;
  font-size:var(--text-sm)
}
.switch-line input {
  appearance:none;
  width:44px;
  height:26px;
  border-radius:var(--radius-lg);
  background:var(--shade);
  position:relative;
  flex-shrink:0;
  cursor:pointer
}
.switch-line input:before {
  content:'';
  position:absolute;
  width:20px;
  height:20px;
  background:var(--paper);
  border-radius:var(--radius-lg);
  top:calc(var(--space-xs) * .75);
  left:calc(var(--space-xs) * .75)
}
.switch-line input:checked {
  background:var(--primary)
}
.switch-line input:checked:before {
  left:calc(var(--space-lg) + var(--space-xs) * 1.25)
}
.switch-line input:disabled {
  cursor:not-allowed
}
.switch-line:has(input:disabled) {
  color:var(--muted)
}
.receipt-button-row {
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:var(--space-sm);
  margin-top:var(--space-md)
}
.receipt-button-row button {
  padding:var(--space-sm);
  font-size:var(--text-sm)
}
.receipt-footnote {
  font-size:var(--text-xs);
  color:var(--muted);
  margin-top:var(--space-sm)
}
.invalid {
  text-align:center;
  max-width:600px;
  margin:var(--space-4xl) auto
}
.invalid p {
  margin:var(--space-xl) 0
}
.phone-zoom .phone-svg {
  width:200px;
  height:360px;
  margin:auto
}
.skip {
  position:fixed;
  top:var(--space-sm);
  left:var(--space-sm);
  background:var(--paper);
  padding:var(--space-md);
  z-index:20;
  transform:translateY(-150%);
  visibility:hidden
}
.skip:focus {
  visibility:visible;
  transform:none
}
#toast {
  position:fixed;
  bottom:var(--space-xl);
  left:50%;
  transform:translateX(-50%);
  max-width:90vw;
  background:var(--foreground);
  color:var(--paper);
  padding:var(--space-md) var(--space-xl);
  border-radius:var(--radius-sm);
  z-index:30;
  pointer-events:none;
  opacity:0;
  transition:opacity 120ms
}
#toast.visible {
  opacity:1
}
.none-mark {
  display:grid;
  place-content:center;
  height:220px;
  color:var(--foreground)
}
.none-record { width:var(--space-4xl); height:var(--space-5xl) }

@media(min-width:1200px) {
  .home-intro h1 { font-size:var(--text-4xl) }
}
@media(max-width:900px) {
  .home-layout { grid-template-columns:minmax(0,1fr); gap:var(--space-2xl) }
  .home-intro,.home-selection,.examples { grid-column:auto; grid-row:auto }
  .home-selection { margin-top:0 }
  .home-intro .kicker { margin-bottom:var(--space-lg) }
  .home-intro p { margin-top:var(--space-lg) }
}
@media(max-width:767px) {
  .site-header {
  padding:var(--space-md) var(--space-lg);
  gap:var(--space-sm)
}
.header-caption {
  font-size:var(--text-xs)
}
.site-header .link {
  margin-left:auto
}
main {
  padding:var(--space-xl) var(--space-lg)
}
h1 {
  font-size:var(--text-2xl)
}
h2 {
  font-size:var(--text-xl)
}
.home-intro p {
  font-size:var(--text-base)
}
.home-intro h1 { font-size:var(--text-2xl) }
.old-select {
  min-height:var(--space-6xl);
  padding:var(--space-lg)
}
.old-select .phone-svg,.phone-placeholder {
  width:var(--space-2xl);
  height:var(--space-3xl)
}
.old-select strong {
  font-size:var(--text-base)
}
.target-card {
  min-height:calc(var(--space-6xl) + var(--space-6xl) + var(--space-sm))
}
.target-card .phone-svg { height:var(--space-6xl) }
.example-grid {
  grid-template-columns:1fr;
  gap:0
}
.example {
  flex-direction:row;
  text-align:left;
  padding:var(--space-md) 0
}
.example + .example {
  border-left:0;
  padding-left:0
}
.example .mascot {
  width:48px;
  height:48px
}
.question {
  padding:var(--space-lg)
}
.question h1 {
  font-size:var(--text-xl)
}
.choice {
  padding:var(--space-sm) var(--space-md);
  font-size:var(--text-base)
}
.device-strip {
  gap:var(--space-sm);
  font-size:var(--text-xs)
}
.test-mode .site-header { padding:var(--space-sm) var(--space-lg); gap:var(--space-md) }
.test-mode main { padding:var(--space-md) var(--space-lg) }
.test-mode .brand { font-size:var(--text-base); gap:var(--space-xs); white-space:nowrap }
.test-mode .brand-mark { width:var(--space-xl); height:var(--space-xl) }
.test-mode .device-strip { gap:var(--space-xs) }
.test-mode .device-strip-item { flex-direction:column; gap:0; text-align:center; line-height:1.3 }
.test-mode .device-strip .phone-svg { width:var(--space-lg); height:var(--space-xl) }
.test-mode .device-strip .phone-fallback { min-height:var(--space-xl); width:var(--space-lg) }
.report-hero {
  grid-template-columns:1fr;
  gap:var(--space-sm)
}
.report-hero h1 {
  font-size:var(--text-3xl)
}
.hero-mascot {
  height:220px
}
.report-line {
  font-size:var(--text-base)
}
.report-phones {
  gap:var(--space-xl)
}
.ledger {
  padding:var(--space-xl)
}
.tradeoffs {
  grid-template-columns:1fr;
  gap:var(--space-lg)
}

footer {
  padding:var(--space-lg);
  font-size:var(--text-xs);
  gap:var(--space-sm)
}
footer .link {
  white-space:nowrap
}
dialog {
  width:calc(100% - 24px)
}
.receipt-controls {
  padding:var(--space-md) var(--space-lg)
}
.receipt-button-row {
  grid-template-columns:1.2fr 1fr 1fr
}
.print-window {
  max-width:340px
}
.receipt-footnote {
  line-height:1.5
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
button:active {
  transform:none
}
.printing .receipt-frame {
  animation:none
}
#toast {
  transition:none
}

}.receipt-controls {
  flex-shrink:0
}


.target-card,.choice { transition:background-color 120ms,border-color 120ms }
@media(prefers-reduced-motion:reduce) { .target-card,.choice { transition:none } }

.phone-svg { animation:image-in 150ms ease-out }
@keyframes image-in { from { opacity:0 } to { opacity:1 } }
@media(prefers-reduced-motion:reduce) { .phone-svg { animation:none } }

/* Model discovery keeps model names readable and groups the expanded catalog. */
.model-picker { width:min(760px,calc(100% - 32px)) }
#model-search {
  appearance:none;
  min-height:44px;
  padding:var(--space-sm) var(--space-md);
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  caret-color:var(--foreground)
}
#model-search::placeholder { color:var(--muted); opacity:1 }
#model-search:focus {
  border-color:var(--muted);
  outline:none
}
#model-search:focus-visible {
  outline:2px solid var(--muted);
  outline-offset:-2px
}
.model-help { margin-top:var(--space-md) }
.model-series { display:flex; flex-wrap:wrap; gap:var(--space-xs); margin-top:var(--space-lg) }
.model-series button { font-size:var(--text-xs); padding:var(--space-xs) var(--space-md); background:var(--transparent); border-color:var(--transparent) }
.model-series button[aria-pressed=true] { background:var(--secondary); border-color:var(--primary) }
.model-group h3 { color:var(--muted); font-size:var(--text-sm); margin:var(--space-xl) 0 var(--space-md) }
.model-group:first-child h3 { margin-top:var(--space-sm) }
.model-group-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-sm) }
.model-group-grid .model-choice { min-width:0; gap:var(--space-lg); background:var(--paper); padding:var(--space-md); position:relative }
.model-choice strong { display:block; font-size:var(--text-sm) }
.model-choice .tiny { display:block; margin-top:var(--space-xs) }
.model-choice[aria-pressed=true] { border-color:var(--primary); background:var(--secondary) }
.model-choice .check { margin-left:auto; flex-shrink:0 }
.model-empty { padding:var(--space-xl) 0 }
.comparison-source { display:flex; align-items:center; justify-content:flex-end; min-width:44px; min-height:44px; width:max-content; margin-left:auto; padding:0 var(--space-xs); border:0; border-radius:var(--radius-sm); background:var(--transparent); color:var(--muted); font-size:var(--text-xs); text-decoration:underline; text-underline-offset:3px }
.comparison-source:hover { color:var(--foreground); background:var(--secondary) }
.comparison-source:active { background:var(--shade) }
.source-list { display:grid; gap:var(--space-sm); margin:var(--space-lg) 0 }
.source-list a { display:flex; align-items:center; min-height:44px; font-size:var(--text-sm) }
.source-facts { margin:var(--space-lg) 0 }
.source-facts dt { font-weight:650; margin-top:var(--space-lg) }
.source-facts dd { margin:var(--space-sm) 0 0; font-size:var(--text-sm) }
@media(max-width:767px) {
 .model-group-grid { grid-template-columns:1fr }
 .model-group-grid .model-choice { gap:var(--space-lg) }
 .model-picker { width:calc(100% - 24px) }
}
.price-options { border:0; padding:0; margin:0 0 var(--space-lg); min-width:0 }
.price-options legend { font-weight:650; font-size:var(--text-sm); margin-bottom:var(--space-sm); padding:0 }
.option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm) }
.price-option { display:flex; align-items:center; justify-content:center; gap:var(--space-xs); padding:var(--space-sm); font-size:var(--text-sm); line-height:1.45; min-width:0; overflow-wrap:anywhere; min-height:44px }
.price-option span { min-width:0 }
.price-option[aria-pressed=true] { background:var(--secondary); border-color:var(--ring); font-weight:650 }
.option-tick { width:16px; height:16px; flex-shrink:0; color:var(--ring) }
.option-help { margin:0 0 var(--space-sm); line-height:1.6 }
.battery-options { grid-template-columns:repeat(3,minmax(0,1fr)) }
.estimate-result { display:flex; align-items:center; justify-content:space-between; gap:var(--space-xl); margin-top:var(--space-xl); border-top:1px dashed var(--border); padding-top:var(--space-lg) }
.estimate-result > div:first-child { flex:1; min-width:0 }
.estimate-result strong { display:block; font-size:var(--text-xl); font-variant-numeric:tabular-nums; margin:var(--space-xs) 0 }
.price-links { display:flex; flex-wrap:wrap; gap:var(--space-sm) }
.price-links .link { font-size:var(--text-xs) }
.keep-note { font-size:var(--text-sm); color:var(--muted); padding:var(--space-lg) 0 }
.ledger .total { border:0; padding:var(--space-xl); margin:0; background:var(--background); border-radius:var(--radius-sm) }
.total.has-value { background:var(--secondary); padding:var(--space-xl); border:0; border-radius:var(--radius-sm) }
.ledger .total.has-value { background:var(--secondary) }
.total-label { font-size:var(--text-base) }
.total strong { font-size:var(--text-4xl); font-weight:800; line-height:1.35; overflow-wrap:anywhere; margin:var(--space-sm) 0 var(--space-md) }
.relay-amount { font-size:var(--text-sm); margin-bottom:var(--space-md) }
.relay-bar { width:100%; height:20px; background:var(--shade); border-radius:var(--radius-sm); overflow:hidden }
.relay-bar span { height:100%; display:block; background:var(--primary) }
.relay-labels { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-xs); font-size:var(--text-xs); margin:var(--space-sm) 0 }
.total .muted { color:var(--foreground) }
.price-assumptions { margin-top:var(--space-md); color:var(--foreground) }
.feelings { margin:0; border:0; padding:var(--space-sm) 0 0 }
.feelings legend { float:left; width:100%; font-size:var(--text-lg); margin-bottom:var(--space-md) }
.feelings > .option-grid { clear:both; max-width:560px }
.feelings .option-help { clear:both }
.feeling-line { font-size:var(--text-sm); margin-top:var(--space-lg); min-height:1.6em; }
.feeling-line.has-feeling { font-weight:600; }
.feelings .mood-help { font-size:var(--text-sm); margin-bottom:var(--space-lg); }
.feelings .mood-option { position:relative; min-width:0; min-height:124px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-sm); padding:var(--space-md); border:1px solid var(--border); border-radius:var(--radius-md); background:var(--paper); font-size:var(--text-sm); font-weight:600; line-height:1.4; }
.feelings .mood-option:hover { background:var(--receipt-paper); border-color:var(--primary); }
.feelings .mood-option[aria-pressed="true"] { background:var(--secondary); border-color:var(--ring); }
.mood-sticker { display:block; width:64px; height:64px; flex-shrink:0; image-rendering:pixelated; }
.mood-label { overflow-wrap:anywhere; text-align:center; }
.mood-check { position:absolute; top:var(--space-sm); right:var(--space-sm); color:var(--ring); visibility:hidden; line-height:0; }
.mood-option[aria-pressed="true"] .mood-check { visibility:visible; }
@media(max-width:767px) {
 .estimate-result { flex-direction:column; align-items:stretch; gap:var(--space-sm) }
 .ledger .total strong { font-size:var(--text-3xl) }
}
.capacity-options { grid-template-columns:repeat(var(--option-count,4),minmax(0,1fr)) }
.capacity-options .price-option { position:relative; padding:var(--space-sm) var(--space-xs) }
.capacity-options .option-tick { position:absolute; width:12px; height:12px; right:var(--space-xs); top:var(--space-xs) }

/* Result modules share a paper, while home/test retain their own layout. */
body.result-mode { display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-height:100dvh; height:100dvh; }
.result-mode .site-header { width:100%; padding:var(--space-sm) var(--space-xl); }
.result-mode > footer { width:100%; max-width:1120px; padding:var(--space-xs) var(--space-xl); }
.result-mode main { width:100%; max-width:1120px; padding:var(--space-lg) var(--space-xl) max(var(--space-lg),env(safe-area-inset-bottom)); min-height:0; height:100%; }
.result-shell { height:100%; min-height:0; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; background:var(--paper); border:1px solid var(--border); padding:var(--space-lg) var(--space-xl); gap:var(--space-md); }
.step-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-xs); border-bottom:1px dashed var(--border); padding-bottom:var(--space-sm); }
.step-nav button { display:flex; align-items:center; justify-content:center; gap:var(--space-sm); background:var(--transparent); border-color:var(--transparent); padding:var(--space-xs) var(--space-sm); }
.step-nav button[aria-current] { background:var(--secondary); border-color:var(--primary); font-weight:750; }
.mobile-label { display:none; }
.stage-heading { display:flex; justify-content:space-between; align-items:center; gap:var(--space-lg); }
.stage-heading h1 { font-size:var(--text-xl); letter-spacing:-.03em; }
.pair-summary { font-size:var(--text-sm); color:var(--muted); }
.stage-body { min-height:0; overflow:visible; position:relative; }
.stage-footer { display:flex; justify-content:space-between; align-items:center; gap:var(--space-sm); border-top:1px dashed var(--border); padding-top:var(--space-sm); }
.footer-back { display:flex; gap:var(--space-xs); }
.stage-footer button { font-size:var(--text-sm); }
.report-cover { height:100%; display:flex; flex-direction:column; justify-content:center; gap:var(--space-xl); }
.report-cover .report-hero { padding:0; border:0; display:grid; grid-template-columns:1.5fr 1fr; align-items:center; gap:var(--space-xl); }
.report-cover h2 { font-size:var(--text-3xl); margin-top:var(--space-sm); }
.report-cover .hero-mascot { width:100%; height:min(30dvh,260px); }
.report-cover .report-line { font-size:var(--text-lg); margin-top:var(--space-md); }
.report-cover blockquote { font-size:var(--text-xl); margin:var(--space-lg) 0 0; font-weight:700; }
.report-cover-links { display:flex; gap:var(--space-md); }
.compare-page { height:100%; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:var(--space-sm); }
.compare-row { padding:var(--space-sm) 0; border-bottom:1px dashed var(--border); }
.compare-row h2 { font-size:var(--text-lg); margin-bottom:var(--space-sm); }
.compare-row .comparison-source { min-height:44px; padding:var(--space-xs); }
.price-stage { height:100%; display:flex; flex-direction:column; gap:var(--space-sm); }
.price-stage > :last-child { flex:1; min-height:0; }
.stage-error { font-size:var(--text-sm); }
.config-page { display:flex; flex-direction:column; justify-content:center; gap:var(--space-sm); }
.config-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--space-xl); row-gap:var(--space-md); }
.config-column { display:grid; grid-row:span 3; grid-template-rows:subgrid; min-width:0; }
.config-name h2 { font-size:var(--text-lg); }
.config-column .price-options { margin:0; }
.price-stage .price-options legend { font-size:var(--text-sm); margin-bottom:var(--space-sm); }
.price-stage .feelings legend { font-size:var(--text-lg); font-weight:650; }
.price-stage .option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm); }
.price-stage .capacity-options { grid-template-columns:repeat(var(--option-count),minmax(0,1fr)); }
.price-stage .price-option { position:relative; min-height:44px; display:flex; align-items:center; justify-content:center; padding:var(--space-xs) var(--space-sm); font-size:var(--text-sm); line-height:1.4; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; }
.price-stage .price-option.selected { background:var(--secondary); border-color:var(--ring); font-weight:700; }
.price-stage .price-option input { position:absolute; width:100%; height:100%; opacity:0; inset:0; margin:0; cursor:pointer; }
.price-stage .price-option:has(input:focus-visible) { outline:3px solid var(--ring); outline-offset:2px; }
.price-stage .option-tick { flex-shrink:0; }
.price-paper { display:flex; flex-direction:column; gap:var(--space-xs); align-items:start; }
.price-number { font-family:var(--font-mono); font-size:var(--text-3xl); font-variant-numeric:tabular-nums; line-height:1.3; letter-spacing:-.04em; }
.price-number small { font-size:var(--text-lg); margin-right:var(--space-xs); }
.price-number.pending { font-size:var(--text-xl); }
.quote-modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
.quote-modes button { font-size:var(--text-sm); padding:var(--space-xs); }
.price-secondary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-xs); flex-wrap:wrap; }
.condition-page { display:flex; flex-direction:column; justify-content:center; gap:var(--space-md); }
.condition-caption { display:flex; justify-content:space-between; align-items:center; gap:var(--space-sm); }
.condition-caption h2 { font-size:var(--text-lg); }
.condition-caption .link { font-size:var(--text-sm); }
.condition-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-md) var(--space-xl); }
.condition-grid .price-options { display:grid; grid-row:span 2; grid-template-rows:subgrid; margin:0; }
.condition-grid .option-grid { align-content:start; }
.result-page { height:100%; display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:var(--space-xl); }
.result-page .total { padding:0; background:var(--transparent); border:0; }
.result-page .total > strong { font-family:var(--font-mono); font-size:var(--text-3xl); font-variant-numeric:tabular-nums; }
.result-extras .feelings { margin:0; }
.result-basis,.result-failure,.mood-page { display:flex; flex-direction:column; justify-content:center; gap:var(--space-md); height:100%; }
.result-basis h2,.result-failure h2 { font-size:var(--text-xl); }
.result-basis .estimate-result { padding:0; margin:0; }
.recovery-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-md); }
.recovery-actions a { display:inline-flex; align-items:center; min-height:44px; }
.edit-tools { display:flex; flex-wrap:wrap; gap:var(--space-sm); margin-top:var(--space-lg); }
.price-editor input { width:100%; }
.print-page { width:100%; max-width:960px; margin:0 auto; display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); align-items:start; gap:var(--space-4xl); padding:var(--space-lg) 0 var(--space-xl); }
.printer-scene { position:relative; isolation:isolate; width:100%; }
.printer-scene::before { content:''; display:block; width:100%; aspect-ratio:100/19; }
.printer-art,.printer-lip { position:absolute; top:0; left:0; width:100%; height:auto; pointer-events:none; }
.printer-art { z-index:0; }
.printer-lip { z-index:2; clip-path:inset(92% 0 0); }
.print-page .print-window { position:relative; z-index:1; display:block; width:76%; max-width:none; height:auto; margin:0 auto; padding:0; overflow:hidden; background:var(--transparent); border:0; filter:drop-shadow(0 2px 3px var(--receipt-shadow)); }
.print-page .receipt-frame { display:block; width:100%; height:auto; aspect-ratio:2/3; }
.print-page .receipt-frame > svg { display:block; width:100%; height:auto; max-width:none; max-height:none; aspect-ratio:2/3; }
.print-settings { display:flex; flex-direction:column; gap:var(--space-md); padding-top:var(--space-6xl); }
.print-page .receipt-controls { display:flex; flex-direction:column; gap:var(--space-lg); padding:0; border:0; background:var(--transparent); }
.print-page .switch-line { gap:var(--space-sm); font-size:var(--text-sm); }
.print-page .receipt-button-row { display:flex; flex-wrap:wrap; gap:var(--space-sm); }
.print-page .print-tools { display:flex; justify-content:start; margin:0; }
@media(max-width:767px) {
 .result-mode .site-header { padding:var(--space-xs) var(--space-md); }
 .result-mode main { padding:var(--space-sm); padding-bottom:max(var(--space-sm),env(safe-area-inset-bottom)); }
 .result-shell { padding:var(--space-sm) var(--space-md); gap:var(--space-sm); }
 .desktop-label,.step-nav .serial { display:none; }
 .mobile-label { display:inline; }
 .step-nav button { font-size:var(--text-sm); }
 .stage-heading { display:block; }
 .stage-heading h1 { font-size:var(--text-lg); }
 .pair-summary { font-size:var(--text-xs); margin-top:var(--space-xs); }
 .stage-footer button { padding:var(--space-xs) var(--space-sm); }
 .footer-back { display:flex; flex-wrap:wrap; }
 .report-cover { gap:var(--space-sm); }
 .report-cover .report-hero { grid-template-columns:1fr; gap:var(--space-sm); }
 .report-cover h2 { font-size:var(--text-2xl); }
 .report-cover .hero-mascot { height:min(19dvh,150px); order:-1; }
 .report-cover .report-line { font-size:var(--text-base); margin-top:var(--space-sm); }
 .report-cover blockquote { font-size:var(--text-lg); margin-top:var(--space-sm); }
 .report-cover-links { justify-content:space-between; gap:var(--space-xs); }
 .report-cover-links button { font-size:var(--text-sm); }
 .compare-row { padding:0; }
 .config-grid { grid-template-columns:minmax(0,1fr); }
 .config-column { grid-row:auto; grid-template-rows:auto; gap:var(--space-sm); }
 .config-name .tiny { display:none; }
 .price-number { font-size:var(--text-2xl); }
 .condition-grid { grid-template-columns:minmax(0,1fr); }
 .condition-grid .price-options { grid-row:auto; grid-template-rows:auto; }
 .result-page { grid-template-columns:minmax(0,1fr); align-content:center; gap:var(--space-sm); }
 .result-page .total > strong { font-size:var(--text-2xl); }
 .result-page .total .relay-amount { margin-top:var(--space-sm); }
 .price-stage .capacity-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-height:700px) {
 .result-mode .site-header { padding-top:var(--space-xs); padding-bottom:var(--space-xs); }
 .result-shell { gap:var(--space-xs); }
 .report-cover .hero-mascot { height:80px; }
 .price-stage .price-secondary button { font-size:var(--text-sm); }
}
/* Accessible overflow is opt-in only after reducing content, never clipped. */
.result-mode.accessible-overflow { height:auto; min-height:100dvh; }
.accessible-overflow main { height:auto; }
.accessible-overflow .result-shell { height:auto; min-height:calc(100dvh - 80px); grid-template-rows:auto auto auto auto; }
.accessible-overflow .stage-body { min-height:240px; }
@media(prefers-reduced-motion:reduce) { .result-shell,.print-window { animation:none; transition:none; } }
.result-mode .site-header::after { content:none; }
.result-mode .stage-heading h1 { flex-shrink:0; }
.result-mode .stage-body h2 { overflow-wrap:anywhere; }
.compare-row .comparison-source,.compare-row > .link { display:inline-flex; align-items:center; font-size:var(--text-xs); }
@media(max-width:767px) {
 .stage-footer .footer-back { flex-wrap:nowrap; }
 .stage-footer .primary { max-width:52%; white-space:normal; }
 .price-stage .config-name h2 { margin:0; }
 .config-page { justify-content:start; padding-top:var(--space-sm); }
 .price-stage .price-paper .tiny { font-size:var(--text-xs); }
 .result-mode .price-stage .option-grid { margin:0; }
}
@media(max-width:360px) {
 .result-shell { padding-left:var(--space-sm); padding-right:var(--space-sm); }
 .report-cover .hero-mascot { height:64px; }
 .report-cover h2 { margin-top:0; }
 .report-cover blockquote { margin-top:var(--space-xs); }
 .price-stage .price-options legend { margin-bottom:var(--space-xs); }
 .config-column { gap:var(--space-xs); }
 .config-page { padding-top:0; }
 .price-stage .price-paper { gap:0; }
 .price-paper .link { padding-top:var(--space-xs); padding-bottom:var(--space-xs); }
 .condition-caption { flex-wrap:wrap; }
 .condition-caption h2 { font-size:var(--text-sm); }
}
@media(max-width:767px) {
 .price-stage .capacity-options { grid-template-columns:repeat(var(--option-count),minmax(0,1fr)); gap:var(--space-xs); }
 .price-stage .capacity-options .price-option { padding-left:var(--space-xs); padding-right:var(--space-xs); }
}
.result-page .total { margin:0; }
@media(max-width:767px) {
 .result-page .total > strong { margin:var(--space-xs) 0 var(--space-sm); }
 .result-page .relay-amount { margin-bottom:var(--space-sm); }
}
@media(max-height:700px) { .appearance .phone-svg { height:min(18dvh,100px); } }
.price-paper a { display:inline-flex; min-height:44px; min-width:44px; align-items:center; }

/* Static six-axis figure sits in the existing hero's central whitespace. */
.question-hint { margin-top:var(--space-sm); }
.long-result .report-cover { height:auto; padding:var(--space-xl) 0; }
.report-cover.has-traits .report-hero { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); }
.report-persona-copy { min-width:0; }
.report-persona-copy .report-line { text-wrap:balance; }
.report-radar { margin:0; width:100%; min-width:0; justify-self:center; }
.report-radar figcaption { text-align:center; margin-top:var(--space-xs); }
.radar-chart { position:relative; width:100%; max-width:calc(var(--space-6xl) * 4); aspect-ratio:8/7; margin:0 auto; }
.radar-svg { display:block; width:100%; height:100%; overflow:visible; }
.radar-label { position:absolute; width:calc(var(--space-6xl) - var(--space-lg)); transform:translate(-50%,-50%); text-align:center; font-size:var(--text-sm); line-height:1.4; }
.radar-label span { display:block; }
.radar-label .tiny { color:var(--muted); font-variant-numeric:tabular-nums; }
.traits-large-text .radar-chart { aspect-ratio:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm); }
.traits-large-text .radar-svg { grid-column:1/-1; height:auto; aspect-ratio:8/7; }
.traits-large-text .radar-label { position:static; width:100%; transform:none; }
@media(max-width:900px) and (min-width:768px) {
 .report-cover.has-traits .report-hero { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
 .report-radar { grid-column:1/-1; grid-row:2; }
}
@media(max-width:767px) {
 .report-cover.has-traits .report-hero { grid-template-columns:minmax(0,1fr); }
 .report-radar { order:1; }
}



/* Comparison, pricing and the printer scene use natural document scrolling. */
body.result-mode.long-result { display:block; height:auto; min-height:100dvh; }
.long-result main { height:auto; }
.long-result .result-shell { height:auto; grid-template-rows:auto auto auto auto; gap:var(--space-xl); padding:0 var(--space-2xl); }
.long-result .step-nav { position:sticky; top:0; z-index:5; background:var(--paper); padding:var(--space-md) 0; }
.long-result .stage-heading { align-items:start; }
.long-result .stage-heading h1 { font-size:var(--text-2xl); }
.long-result .pair-summary { padding-top:var(--space-sm); }
.long-result .stage-footer { position:sticky; bottom:0; z-index:6; background:var(--paper); padding:var(--space-md) 0 max(var(--space-md),env(safe-area-inset-bottom)); }
.long-result .stage-footer .primary { min-height:52px; }
.long-result .compare-page { display:block; height:auto; }
.comparison-overview { padding:var(--space-md) 0 var(--space-lg); border-bottom:1px dashed var(--border); }
.overview-heading { display:flex; justify-content:space-between; align-items:center; gap:var(--space-lg); }
.overview-heading h2 { font-size:var(--text-lg); }
.overview-heading .segments button { font-size:var(--text-sm); min-width:44px; }
.appearance-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2xl); margin-top:var(--space-md); }
.appearance-device { min-width:0; text-align:center; }
.appearance-device h2 { font-size:var(--text-lg); margin:var(--space-xs) 0 var(--space-sm); }
.phone-views { display:flex; justify-content:center; gap:var(--space-xl); }
.phone-views > div { display:flex; flex-direction:column; align-items:center; gap:var(--space-xs); min-width:0; }
.phone-preview { display:flex; justify-content:center; align-items:center; padding:var(--space-sm); border-color:var(--transparent); background:var(--transparent); }
.phone-preview:hover { background:var(--background); border-color:var(--border); }
.phone-preview .phone-svg { height:100px; width:auto; max-width:100%; }
.appearance-caption { text-align:center; margin-top:var(--space-sm); }
.comparison-highlights { padding:var(--space-xl) 0 var(--space-lg); border-bottom:1px dashed var(--border); }
.highlights-heading { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-md); margin-bottom:var(--space-md); flex-wrap:wrap; }
.comparison-highlights h2 { font-size:var(--text-lg); }
.highlight-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-xl); }
.comparison-highlight { display:flex; flex-direction:column; align-items:start; min-width:0; min-height:44px; padding:var(--space-xs) 0; text-decoration:none; }
.highlight-label { font-size:var(--text-sm); }
.comparison-highlight strong { font-size:var(--text-xl); line-height:1.4; margin:var(--space-xs) 0; font-variant-numeric:tabular-nums; }
.highlight-detail { color:var(--muted); font-size:var(--text-xs); }
.comparison-highlight:hover strong { text-decoration:underline; text-underline-offset:4px; }
.comparison-highlight:active { opacity:.75; }
.comparison-jumps { display:flex; flex-wrap:wrap; gap:var(--space-sm) var(--space-xl); padding:var(--space-lg) 0; border-bottom:1px dashed var(--border); }
.comparison-jumps a { display:inline-flex; align-items:center; justify-content:space-between; gap:var(--space-md); min-height:44px; min-width:44px; font-size:var(--text-sm); text-decoration:none; }
.comparison-jumps a:hover { color:var(--ring); text-decoration:underline; text-underline-offset:4px; }
.comparison-jumps a span { color:var(--ring); }
.comparison-group { scroll-margin-top:var(--space-6xl); padding-top:var(--space-2xl); }
.comparison-group-heading { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-md); margin-bottom:var(--space-sm); }
.comparison-group-heading h2 { font-size:var(--text-xl); }
.long-result .compare-row { display:block; padding:var(--space-xl) 0; border-bottom:1px dashed var(--border); scroll-margin-top:var(--space-6xl); }
.comparison-row-title { display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); }
.comparison-row-title h3 { font-size:var(--text-lg); font-weight:700; }
.comparison-row-title .comparison-source { margin:0; padding:0; }
.comparison-lead { font-size:var(--text-xl); line-height:1.5; font-weight:600; margin:var(--space-xs) 0 var(--space-lg); text-wrap:pretty; }
.comparison-field,.field-head { display:grid; grid-template-columns:minmax(120px,.75fr) repeat(2,minmax(0,1fr)) minmax(96px,.5fr); align-items:baseline; gap:var(--space-xl); }
.field-head { font-size:var(--text-xs); color:var(--muted); padding:var(--space-sm) 0; border-bottom:1px solid var(--border); }
.comparison-field { padding:var(--space-md) 0; border-bottom:1px dashed var(--border); font-size:var(--text-base); }
.comparison-field:last-child { border-bottom:0; }
.field-label { font-size:var(--text-sm); font-weight:500; margin:0; }
.field-value { min-width:0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.field-phone { display:none; }
.value-changed { font-weight:700; }
.field-delta { font-size:var(--text-sm); font-variant-numeric:tabular-nums; color:var(--muted); }
.field-changed .field-delta { color:var(--foreground); font-weight:650; }
.comparison-note { color:var(--muted); font-size:var(--text-sm); line-height:1.65; margin-top:var(--space-md); max-width:75ch; }
.battery-comparison { display:grid; gap:var(--space-md); margin-bottom:var(--space-lg); }
.battery-line { display:grid; grid-template-columns:minmax(120px,.75fr) minmax(120px,.6fr) minmax(0,1.8fr); align-items:center; gap:var(--space-xl); }
.battery-line strong { font-size:var(--text-2xl); font-variant-numeric:tabular-nums; line-height:1.2; }
.battery-line strong > span { font-size:var(--text-base); font-weight:500; }
.battery-track { display:block; height:8px; background:var(--shade); border-radius:var(--radius-sm); overflow:hidden; }
.battery-track > span { display:block; height:100%; background:var(--muted); }
.battery-new > span { background:var(--primary); }
.compare-footnote { margin-top:var(--space-xl); }
.long-result .price-stage { height:auto; gap:var(--space-lg); }
.long-result .config-page { padding:0; display:flex; flex-direction:column; gap:var(--space-2xl); }
.form-intro { font-size:var(--text-sm); color:var(--muted); }
.long-result .config-grid { column-gap:var(--space-3xl); row-gap:var(--space-lg); }
.long-result .config-column { grid-template-rows:subgrid; }
.long-result .config-name h2 { font-size:var(--text-xl); margin-top:var(--space-xs); }
.long-result .config-name .tiny { display:block; }
.long-result .config-column + .config-column { border-left:1px dashed var(--border); padding-left:var(--space-2xl); }
.long-result .price-paper { gap:var(--space-sm); }
.long-result .price-paper .price-secondary { width:100%; }
.long-result .price-number { font-size:var(--text-3xl); overflow-wrap:anywhere; }
.long-result .price-number.pending { font-size:var(--text-xl); }
.long-result .condition-page { padding-top:var(--space-xl); border-top:1px dashed var(--border); gap:var(--space-xl); }
.long-result .condition-caption { align-items:start; }
.long-result .condition-caption h2 { font-size:var(--text-xl); margin-bottom:var(--space-sm); }
.long-result .condition-grid { gap:var(--space-xl) var(--space-3xl); }
.long-result .condition-grid .price-options { grid-row:auto; grid-template-rows:auto; align-content:start; }
.long-result .condition-grid .price-options:first-child .option-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.form-footnote { text-align:right; }
.long-result .result-page { height:auto; min-height:0; align-items:start; padding:var(--space-xl) 0; gap:var(--space-3xl); }
.long-result .result-page .total { margin:0; }
.long-result .result-extras { padding-top:var(--space-xs); }
.long-result .result-extras .price-secondary { margin-top:var(--space-lg); }
.long-result .result-page .total > strong { font-size:var(--text-3xl); }
.long-result .result-basis,.long-result .result-failure,.long-result .mood-page { height:auto; min-height:0; }
@media(max-width:767px) {
 .long-result .result-shell { padding:0 var(--space-lg); gap:var(--space-lg); }
 .long-result .step-nav { padding:var(--space-sm) 0; }
 .long-result .stage-heading h1 { font-size:var(--text-xl); }
 .long-result .pair-summary { padding-top:0; }
 .long-result .stage-footer { gap:var(--space-xs); }
 .long-result .stage-footer .primary { max-width:52%; }
 .comparison-overview { padding:0 0 var(--space-md); }
 .overview-heading { align-items:start; gap:var(--space-sm); }
 .overview-heading h2 { font-size:var(--text-base); max-width:10em; }
 .overview-heading .segments button { padding:var(--space-xs) var(--space-sm); font-size:var(--text-xs); }
 .appearance-pair { gap:var(--space-md); margin-top:var(--space-md); }
 .appearance-device h2 { font-size:var(--text-sm); margin-bottom:var(--space-sm); }
 .phone-views { gap:var(--space-xs); }
 .phone-preview { padding:var(--space-xs); min-width:44px; }
 .phone-preview .phone-svg { height:76px; }
 .appearance-caption { font-size:var(--text-xs); margin-top:var(--space-sm); }
 .comparison-highlights { padding:var(--space-lg) 0; }
 .comparison-highlights h2 { font-size:var(--text-base); }
 .highlight-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-md) var(--space-lg); }
 .comparison-highlight strong { font-size:var(--text-xl); }
 .comparison-jumps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-xs); padding:var(--space-sm) 0; }
 .comparison-jumps a { gap:var(--space-xs); font-size:var(--text-xs); }
 .comparison-group { padding-top:var(--space-xl); }
 .comparison-group-heading { margin-bottom:var(--space-sm); }
 .comparison-group-heading h2 { font-size:var(--text-lg); }
 .comparison-group-heading > span { font-size:var(--text-xs); }
 .long-result .compare-row { display:block; padding:var(--space-lg) 0; }
 .comparison-row-title { gap:var(--space-sm); margin-bottom:0; }
 .comparison-row-title h3 { font-size:var(--text-lg); }
 .comparison-lead { font-size:var(--text-lg); margin-bottom:var(--space-md); }
 .field-head { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-lg); }
 .field-head > :first-child,.field-head > :last-child { display:none; }
 .comparison-field { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm) var(--space-lg); font-size:var(--text-sm); }
 .field-label { grid-column:1 / -1; grid-row:1; padding-right:var(--space-6xl); font-weight:600; }
 .field-value { grid-row:2; display:flex; flex-direction:column; gap:var(--space-xs); }
 .field-phone { display:block; font-weight:400; }
 .field-delta { grid-row:1; grid-column:1 / -1; justify-self:end; max-width:var(--space-6xl); font-size:var(--text-xs); text-align:right; }
 .comparison-note { font-size:var(--text-xs); }
 .battery-line { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-sm) var(--space-lg); }
 .battery-line strong { font-size:var(--text-xl); }
 .battery-line strong > span { font-size:var(--text-sm); }
 .battery-track { grid-column:1 / -1; }
 .long-result .config-grid { grid-template-columns:minmax(0,1fr); gap:var(--space-xl); }
 .long-result .config-column { grid-row:auto; grid-template-rows:auto; gap:var(--space-md); }
 .long-result .config-column + .config-column { border-left:0; border-top:1px dashed var(--border); padding:var(--space-xl) 0 0; }
 .long-result .price-number { font-size:var(--text-2xl); }
 .long-result .condition-caption { flex-direction:column; gap:var(--space-xs); }
 .long-result .condition-caption h2 { font-size:var(--text-lg); }
 .long-result .condition-grid { grid-template-columns:minmax(0,1fr); gap:var(--space-xl); }
 .long-result .condition-grid .price-options legend { margin-bottom:var(--space-sm); }
 .long-result .price-stage .option-grid { gap:var(--space-sm); }
 .form-footnote { text-align:left; }
 .long-result .result-page { grid-template-columns:minmax(0,1fr); min-height:0; gap:var(--space-2xl); }
 .long-result .result-page .total > strong { font-size:var(--text-2xl); }
 .long-result .result-basis,.long-result .result-failure,.long-result .mood-page { min-height:0; padding:var(--space-xl) 0; }
}

.field-error { font-size:var(--text-sm); margin-bottom:var(--space-sm); }

/* The printer and warm paper sit directly on the page's neutral ground. */
.print-result .result-shell { background:var(--transparent); border:0; }
.print-result .step-nav,.print-result .stage-footer { background:var(--background); }
/* The paper is the interaction surface; the machine remains decorative. */
.print-page .receipt-paper { padding:0; border:0; border-radius:0; background:var(--transparent); text-align:initial; line-height:0; transform-origin:50% 0; }
.print-page .receipt-paper:active { transform:none; }
.print-page .receipt-paper:disabled { opacity:1; cursor:progress; }
.print-page .print-window:has(.receipt-paper:focus-visible) { outline:3px solid var(--ring); outline-offset:3px; }
.receipt-paper:focus-visible { outline:none; }
.receipt-hint { text-align:center; margin-top:var(--space-md); line-height:1.5; }
.print-page .print-window.receipt-detached { margin-top:var(--space-sm); }
.receipt-detached .receipt-paper > svg,.receipt-zoom > svg,.receipt-flight > svg { clip-path:polygon(0 0,3% .5%,6% 0,9% .5%,12% 0,15% .5%,18% 0,21% .5%,24% 0,27% .5%,30% 0,33% .5%,36% 0,39% .5%,42% 0,45% .5%,48% 0,51% .5%,54% 0,57% .5%,60% 0,63% .5%,66% 0,69% .5%,72% 0,75% .5%,78% 0,81% .5%,84% 0,87% .5%,90% 0,93% .5%,96% 0,100% .5%,100% 100%,0 100%); }
.print-page .print-window.receipt-tearing { overflow:visible; }
.receipt-lifted > svg,.receipt-arriving { visibility:hidden; }
.receipt-flight { position:fixed; inset:auto; margin:0; padding:0; border:0; background:var(--transparent); pointer-events:none; overflow:visible; transform-origin:0 0; filter:drop-shadow(0 2px 3px var(--receipt-shadow)); }
.receipt-flight > svg { display:block; width:100%; height:auto; }

/* The whole viewport outside the paper is the return target on every screen size. */
#modal.receipt-zoom-modal { width:min(540px,calc(100vw - 2 * var(--space-lg)),calc((100dvh - 2 * var(--space-lg)) * 2 / 3)); max-width:none; max-height:calc(100dvh - 2 * var(--space-lg)); height:fit-content; padding:0; border-radius:var(--radius-none); background:var(--transparent); overflow:visible; }
.receipt-dismiss { position:absolute; inset:0 auto auto 0; width:44px; height:44px; padding:0; border:0; background:var(--transparent); opacity:0; pointer-events:none; }
.receipt-dismiss:active { transform:none; }
.receipt-zoom { position:relative; z-index:1; width:100%; line-height:0; outline:none; filter:drop-shadow(0 2px 3px var(--receipt-shadow)); }
.receipt-zoom > svg { display:block; width:100%; height:auto; max-width:none; aspect-ratio:2/3; }
@media(max-width:900px) {
 .print-page { grid-template-columns:minmax(0,1fr); max-width:420px; gap:var(--space-xl); padding-top:var(--space-sm); }
 .print-settings { padding-top:0; }
 .print-page .receipt-controls { gap:var(--space-lg); }
}
@media(max-width:767px) {
 .print-result .result-shell { padding:0; }
}

/* Keep the six answers and their continuation within ordinary short phone viewports. */
@media(max-width:767px) and (max-height:740px) {
  .test-mode main { padding:var(--space-sm) var(--space-lg) }
  .test-mode .question { padding:var(--space-md) }
  .test-mode .question h1 { font-size:var(--text-lg) }
  .test-mode .progress-row { margin-bottom:var(--space-sm) }
  .test-mode .progress span { width:var(--space-md); height:var(--space-md) }
  .test-mode .question .choices { margin:var(--space-sm) 0 var(--space-md); gap:var(--space-xs) }
  .test-mode .choices legend { font-size:var(--text-sm); margin-bottom:var(--space-xs) }
  .test-mode .choice { min-height:44px; padding:var(--space-xs) var(--space-sm); gap:var(--space-sm); line-height:1.4 }
}
@media(max-width:767px) and (max-height:600px) {
  .test-mode .choice { font-size:var(--text-sm) }
  .test-mode .choices legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); margin:0 }
}