/* Product-only application of design/reference/ref.css; landing/legacy unchanged. */
:root {
  --navy: var(--pair-color-brand-navy); --navy-2: var(--pair-color-brand-navy);
  --blue: var(--pair-color-male); --blue-dark: var(--pair-color-male);
  --sky: var(--pair-color-brand-sky); --sky-soft: var(--pair-color-layer-spheres-container);
  --pink: var(--md-sys-color-primary-container); --pink-dark: var(--md-sys-color-primary);
  --pink-soft: var(--md-sys-color-inverse-primary); --blush: var(--md-sys-color-surface-container-low);
  --violet: var(--pair-color-self); --paper: var(--md-sys-color-surface);
  --paper-2: var(--md-sys-color-surface-container-low); --surface: var(--md-sys-color-surface-container-lowest);
  --ink: var(--md-sys-color-on-surface); --muted: var(--md-sys-color-on-surface-variant);
  --soft: var(--md-sys-color-outline); --line: var(--md-sys-color-outline-variant); --line-strong: var(--md-sys-color-outline);
  --good: var(--pair-color-good); --good-soft: var(--pair-color-good-container);
  --warning: var(--pair-color-caution); --warning-soft: var(--pair-color-caution-container);
  --danger: var(--md-sys-color-error); --danger-soft: var(--md-sys-color-error-container);
  --font: var(--md-sys-typescale-font);
}
body { background: var(--paper-2); font: 400 var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--font); }
#app :is(h1,h2) { font-size: var(--md-sys-typescale-headline-medium-size); line-height: var(--md-sys-typescale-headline-medium-line-height); letter-spacing: 0; }
#app h3 { font-size: var(--md-sys-typescale-title-medium-size); line-height: var(--md-sys-typescale-title-medium-line-height); }
#app p { line-height: 1.5; }
#app .panel { border-radius: var(--md-sys-shape-corner-large); box-shadow: none; }
#app :is(.button,.text-button), .product-header button { min-height: 48px; font-size: var(--md-sys-typescale-label-large-size); line-height: var(--md-sys-typescale-label-large-line-height); }
#app .button { border-radius: var(--md-sys-shape-corner-full); padding: 12px 24px; font-weight: 600; }
#app .button.primary { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); box-shadow: none; }
#app .button.secondary { background: var(--surface); border: 1px solid var(--line); color: var(--navy); }
#app .button:disabled { background: var(--md-sys-color-surface-container-high); color: var(--soft); box-shadow: none; }
.product-header { background: var(--surface); border-bottom: 1px solid var(--line); backdrop-filter: none; }
.header-shell { min-height: 64px; padding-block: 0; }
.product-header .safety-trigger { color: var(--danger); }
.ref-mobile-heading,.ref-mobile-back,.ref-mobile-menu { display: none; }
.reference-screen #product-app { padding: 32px 0; }
.reference-screen #app { max-width: 1200px; width: calc(100% - 96px); }
.ref-frame { display: grid; grid-template-columns: 264px minmax(0,1fr); gap: 40px; align-items: start; }
.ref-rail { display: grid; gap: 4px; position: sticky; top: 96px; }
.ref-rail > p { font-size: 12px; line-height: 16px; color: var(--muted); margin: 0 12px 8px; }
.ref-rail-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 12px; font-size: 14px; border-radius: 12px; }
.ref-rail-item.active { background: var(--surface); box-shadow: inset 3px 0 0 var(--pink); font-weight: 600; }
.ref-rail-item small { white-space: nowrap; color: var(--muted); font-size: 12px; }
#app .ref-sheet { padding: 40px 48px 32px; display: grid; gap: 16px; margin: 0; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
#app .ref-sheet > * { min-width: 0; margin-block: 0; }
#app .v6-question-panel h1 { font-size: var(--md-sys-typescale-headline-small-size); line-height: var(--md-sys-typescale-headline-small-line-height); }
.ref-chip { display: inline-flex; justify-self: start; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 16px; background: var(--md-sys-color-surface-container); color: var(--muted); }
.ref-chip.roles { color: var(--pair-color-layer-roles-accent); background: var(--pair-color-layer-roles-container); }
.ref-chip.spheres { color: var(--pair-color-layer-spheres-accent); background: var(--pair-color-layer-spheres-container); }
.ref-chip.quality { color: var(--pair-color-layer-quality-accent); background: var(--pair-color-layer-quality-container); }
.ref-sheet .v6-answer-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.ref-sheet .v6-answer-options { display: flex; gap: 0; padding: 0; margin: 0; }
.ref-sheet .v6-answer-options button { margin: 0; box-shadow: none; transform: none; font-weight: 500; }
.ref-sheet .v6-answer-options button[aria-checked=true] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: var(--md-sys-color-secondary); }
.ref-scale .v6-answer-options,.ref-words .v6-answer-options { justify-content: space-between; position: relative; isolation: isolate; }
.ref-scale .v6-answer-options::before { content: ""; position: absolute; height: 2px; left: 24px; right: 24px; top: 23px; background: var(--line); z-index: -1; }
.ref-sheet :is(.ref-scale,.ref-words) .v6-answer-options button { width: 48px; height: 48px; min-width: 48px; min-height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; }
.ref-scale .ref-answer i { width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--pair-color-axis); border-radius: 50%; font: 600 12px/16px var(--font); background: var(--surface); color: var(--muted); }
.ref-scale .ref-answer[aria-checked=true] i { background: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary); border-color: var(--md-sys-color-secondary); box-shadow: 0 0 0 5px var(--md-sys-color-secondary-container); }
.ref-scale-ends { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--muted); }
.ref-scale-ends span:nth-child(2) { text-align: center; }
.ref-scale-ends span:last-child { text-align: right; }
#app .ref-live { display: grid; place-items: center; text-align: center; padding: 10px 16px; min-height: 44px; margin: 16px 0 0; background: var(--md-sys-color-surface-container); color: var(--muted); border-radius: 12px; font-size: 14px; }
#app .ref-live.selected { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-weight: 600; }
.ref-na { display: block; background: transparent; color: var(--md-sys-color-primary); min-height: 48px; margin: 12px auto 0; padding: 8px; border-radius: 12px; font-size: 14px; }
.ref-na[aria-checked=true] { color: var(--md-sys-color-on-secondary-container); background: var(--md-sys-color-secondary-container); }
.ref-sheet .ref-list .v6-answer-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.ref-sheet .ref-list .ref-answer { min-height: 48px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; background: var(--surface); text-align: left; font-size: 15px; line-height: 20px; }
.ref-radio { border: 2px solid var(--soft); border-radius: 50%; width: 20px; height: 20px; flex: none; }
[aria-checked=true] > .ref-radio { border: 6px solid var(--md-sys-color-secondary); }
.ref-list-divider { grid-column: 1/-1; height: 1px; background: var(--line); margin-block: 4px; }
.ref-sheet .ref-segments .v6-answer-options { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--soft); border-radius: 24px; overflow: hidden; }
.ref-sheet .ref-segments .ref-answer { min-height: 48px; border: 0; border-right: 1px solid var(--soft); border-radius: 0; font-size: 13px; line-height: 20px; padding: 6px; color: var(--ink); background: var(--surface); }
.ref-sheet .ref-segments .ref-answer:last-child { border-right: 0; }
.ref-words { border-bottom: 1px solid var(--line) !important; padding: 8px 0 12px !important; }
.ref-words .v6-word-poles { font-size: 14px; line-height: 20px; font-weight: 500; margin: 0 0 4px; display: flex; justify-content: space-between; gap: 8px; }
.ref-words .v6-word-poles span { max-width: 50%; overflow-wrap: anywhere; }
.ref-words .ref-answer i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--pair-color-axis); background: var(--surface); }
.ref-words .ref-answer[aria-checked=true] i { border: 8px solid var(--md-sys-color-secondary); }
.ref-bottom { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 8px; }
.ref-bottom-meta { flex: 1; text-align: center; color: var(--muted); font-size: 12px; line-height: 16px; }
.ref-keys { color: var(--muted); font-size: 12px; }
.ref-sheet #detailed-save-status { font-size: 12px; padding: 0; min-height: 16px; background: transparent; border: 0; }
.ref-sheet #v6-pause { display: none; }
.ref-section-progress { height: 4px; background: var(--md-sys-color-surface-container-high); }
.ref-section-progress > span { background: var(--pink); display: block; height: 4px; }
.ref-choices { display: grid; gap: 12px; }
.ref-choice { display: grid; gap: 4px; padding: 14px 16px; min-height: 48px; border: 1px solid var(--line); border-radius: 16px; text-align: left; background: var(--surface); }
.ref-choice strong { color: var(--navy); font-size: 15px; line-height: 20px; }
.ref-choice span { color: var(--muted); font-size: 13px; line-height: 18px; }
.ref-choice.danger { border-color: var(--danger-soft); background: color-mix(in srgb,var(--danger-soft) 35%,var(--surface)); }
.ref-choice.danger strong { color: var(--danger); }
.ref-single { max-width: 760px; margin-inline: auto; }
#app .ref-single { margin-inline: auto; }
.ref-sheet .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#app .ref-sheet h1 { max-width: none; }
.reference-screen #product-app { min-height: calc(100dvh - 64px); }
.ref-sheet .v6-answer-options button[aria-checked=true] { outline: none; }
.ref-sheet .v6-answer-options button:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
.reference-screen .pair-feedback-trigger { bottom: 96px; }
@media (min-width:600px) {
  /* Keep the feedback launcher outside the question/answer column. */
  .reference-screen:has(.ref-frame) .pair-feedback-trigger { left: 16px; right: auto; }
}
@media (min-width:600px) and (max-width:760px) {
  .reference-screen:has(.ref-frame) .pair-feedback-trigger > span:last-child { display: none; }
}
.ref-sheet .consent-policy-note { font-size: 12px; line-height: 16px; margin-top: -8px; }
.ref-sheet .check-row { font-size: 14px; line-height: 20px; margin: 0; }
.ref-sheet .notice { border: 0; border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 20px; }
.ref-intro-steps { display: grid; gap: 8px; }
.ref-intro-steps > div { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.ref-intro-steps p { margin: 0; }
.ref-intro-steps strong,.ref-intro-steps small { display: block; }
.ref-intro-steps strong { font-size: 15px; }
.ref-intro-steps small { color: var(--muted); font-size: 12px; }
#app .ref-offer { display: grid; gap: 12px; padding: 20px; background: var(--md-sys-color-surface-container); border-radius: 20px; margin-block: 8px; }
#app .ref-offer h2 { font-size: 22px; line-height: 28px; }
.ref-offer ul { display: grid; gap: 8px; padding-left: 20px; }
#app .plan-price,#app .checkout-price strong { font-size: 36px; line-height: 44px; }
.ref-offer .plan-price s { color: var(--muted); font-size: 16px; }
.ref-offer .plan-promo { font-size: 12px; line-height: 16px; }
.ref-offer p { margin: 0; font-size: 14px; }
.ref-offer ul { margin: 0; }
.ref-offer .button { width: 100%; }
.ref-offer .plan-price { margin: 0; }
.ref-map > p:not(.notice) { font-size: 14px; }
#app .direct-map-invite { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 12px; color: var(--ink); }
.ref-invite-code { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ref-invite-code strong { letter-spacing: 3px; color: var(--navy); font-size: 20px; }
.ref-map-layout { display: grid; grid-template-columns: 264px minmax(0,1fr); gap: 32px; align-items: start; }
.ref-map-layout .v6-map-contents { display: grid; grid-row: 1; grid-column: 1; gap: 4px; padding: 0; border: 0; background: transparent; position: sticky; top: 96px; }
.ref-map-overview,.ref-map-content { grid-column: 2; grid-row: 1; min-width: 0; }
.ref-map-heading { margin-bottom: 16px; }
.ref-map-heading h1 { margin: 4px 0; }
.ref-map-heading p { font-size: 14px; }
.ref-summary-bars { margin: 16px 0 8px; }
.ref-summary-caption { font-size: 12px; color: var(--muted); }
.ref-paid-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.ref-paid-status { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
#app .ref-paid-status h2 { font-size: 16px; line-height: 24px; }
.ref-free-nav { display: grid; align-content: start; gap: 4px; grid-column: 1; grid-row: 1/4; position: sticky; top: 96px; }
.ref-free-nav > a { padding: 12px; border-radius: 12px; min-height: 48px; font-size: 14px; text-decoration: none; color: var(--navy); }
.ref-free-nav > a:first-child { background: var(--surface); box-shadow: inset 3px 0 var(--pink); }
.ref-free-heading { grid-column: 2/-1; }
.ref-free-heading h1 { margin: 0; }
.ref-free-heading p { font-size: 14px; }
.ref-free-body { grid-column: 2; min-width: 0; }
.ref-free-body > .v6-map-axis { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px; margin-bottom: 16px; }
#app .ref-free-body h2 { font-size: 18px; line-height: 24px; }
#app .ref-free-layout { display: grid; grid-template-columns: 264px minmax(0,1fr) minmax(280px,400px); align-items: start; gap: 16px; padding: 0; border: 0; background: transparent; }
#app .ref-free-layout > .ref-offer { grid-column: 3; grid-row: 2; position: sticky; top: 96px; margin: 0; padding: 16px; }
.ref-free-layout .v6-map-axis { scroll-margin-top: 90px; }
#app .ref-map { padding: 0; border: 0; background: transparent; }
.ref-map > :not(.ref-map-layout) { margin-left: 296px; }
.ref-map .v6-map-contents .product-nav { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
@media (min-width:1000px) {
  .ref-map-index { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .ref-map-index > h2 { grid-column: 1/-1; }
  .ref-map-index .ref-index-row { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
  #app .ref-map-content .v6-map-row { padding: 20px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
}
.ref-map-layout [hidden] { display: none !important; }
.ref-map-layout .v6-map-contents a { min-height: 48px; padding: 12px; border: 0; border-radius: 12px; color: var(--muted); font-size: 14px; text-decoration: none; }
.ref-map-layout .v6-map-contents a[aria-current=page] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-weight: 600; }
#app .ref-map .v6-map-summary { padding: 20px; background: var(--md-sys-color-surface-container); border: 0; border-radius: 20px; margin: 0 0 16px; }
#app .ref-map .v6-map-summary h2 { font-size: 14px; line-height: 20px; color: var(--pair-color-layer-quality-accent); }
#app .ref-map .v6-map-summary > .v6-interpretation dd { font-size: 22px; line-height: 28px; font-weight: 600; }
.ref-index-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; background: transparent; border-bottom: 1px solid var(--line); text-align: left; padding: 12px 0; }
.ref-index-row > span:first-child { flex: 1; color: var(--navy); font-size: 16px; line-height: 24px; font-weight: 600; }
.ref-tag { background: var(--md-sys-color-surface-container); color: var(--muted); padding: 4px 8px; border-radius: 6px; font-size: 12px; }
.ref-tag.caution { background: var(--warning-soft); color: var(--warning); }
.ref-tag.good { background: var(--good-soft); color: var(--good); }
#app .v6-map-row { padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: transparent; }
#app .v6-map-row h3 { font-size: 15px; line-height: 20px; font-weight: 600; }
.v6-map-bars .v6-map-bar { grid-template-columns: 56px minmax(0,1fr) 28px; gap: 10px; min-width: 0; }
.v6-map-bar > span { overflow-wrap: anywhere; font-size: 12px; line-height: 16px; }
.v6-map-bar > strong { font-size: 12px; }
.v6-map-bar .v6-map-track { height: 8px; background: var(--md-sys-color-surface-container-high); }
.v6-map-fill { background: var(--pair-color-male); }
.v6-map-fill.partner { background: var(--pair-color-female); }
.v6-map-free .v6-map-fill,.ref-personal-map .v6-map-fill { background: var(--pair-color-self); }
.ref-same-gender .v6-map-bar:first-child .v6-map-fill { background: var(--pair-color-self); }
.ref-same-gender .v6-map-bar:nth-child(2) .v6-map-fill { background: var(--pair-color-partner); }
.ref-same-gender[data-self-member=b] .v6-map-bar:first-child .v6-map-fill { background: var(--pair-color-partner); }
.ref-same-gender[data-self-member=b] .v6-map-bar:nth-child(2) .v6-map-fill { background: var(--pair-color-self); }
.reference-screen .v6-map-bar > :is(span,strong,.v6-map-track) { grid-row: auto; grid-column: auto; }
#app .v6-map-row h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v6-map-row h3 .ref-tag { flex: none; font-weight: 500; }
#app .checkout-card.ref-sheet { gap: 10px; padding: 24px 32px; }
#app .checkout-card h1 { font-size: 22px; line-height: 28px; }
.checkout-card .checkout-price { background: transparent; padding: 0; display: flex; align-items: center; gap: 16px; }
.checkout-card .checkout-price span { font-size: 12px; }
.checkout-card .checkout-price strong { flex: none; white-space: nowrap; }
.checkout-card .checkout-facts { display: grid; gap: 4px; padding-left: 20px; font-size: 13px; line-height: 18px; }
.checkout-card .ref-checkout-terms { display: grid; gap: 4px; font-size: 12px; line-height: 16px; }
.checkout-card .ref-checkout-terms p { margin: 0; }
#app .checkout-card .ref-refund { font-size: 12px; line-height: 17px; padding: 10px 12px; }
.checkout-card form { display: grid; gap: 10px; }
.checkout-card .field { margin: 0; gap: 6px; }
.checkout-card .field input { min-height: 48px; padding: 10px 12px; }
.checkout-card .field > span { font-size: 12px; }
.checkout-card .checkout-documents { font-size: 11px; line-height: 16px; margin: 0; }
#app .checkout-card .check-row { font-size: 12px; line-height: 17px; }
.checkout-card .ref-bottom { padding-top: 12px; }
.checkout-card #checkout-submit { width: 100%; white-space: nowrap; }
.checkout-card #checkout-error:empty { display: none; }
.ref-checkout-details { font-size: 12px; line-height: 18px; color: var(--muted); }
.ref-checkout-details summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; }
.ref-map-content .v6-map-axis { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 0; }
.ref-map-content .v6-map-axis > :not(article) { grid-column: 1/-1; }
.ref-map .v6-more { background: var(--paper-2); border-radius: 12px; padding: 12px 14px; }
.ref-map .v6-more summary { min-height: 48px; display: flex; align-items: center; color: var(--md-sys-color-primary); font-size: 13px; }
.ref-stepper { display: flex; gap: 6px; }
.ref-stepper i { height: 4px; flex: 1; border-radius: 2px; background: var(--md-sys-color-surface-container-high); }
.ref-stepper i.active { background: var(--pink); }
.ref-quote { margin: 0; padding: 4px 0 4px 12px; border-left: 3px solid var(--pair-color-layer-roles-accent); font-size: 15px; line-height: 22px; font-style: italic; }
@media (min-width:600px) and (max-width:1100px) {
  .reference-screen #app { width: calc(100% - 32px); }
  .ref-frame { grid-template-columns: 200px minmax(0,1fr); gap: 16px; }
  .ref-map-layout { grid-template-columns: 180px minmax(0,1fr); gap: 16px; }
  .ref-map-content .v6-map-axis { grid-template-columns: 1fr; }
  #app .ref-sheet { padding: 24px 16px; }
  .ref-sheet .ref-list .v6-answer-options { grid-template-columns: 1fr; }
  #app .ref-free-layout { grid-template-columns: 180px minmax(0,1fr); }
  #app .ref-free-layout > .ref-offer { grid-column: 2; grid-row: 2; position: static; }
  .ref-free-body { grid-row: 3; }
  .ref-map > :not(.ref-map-layout) { margin-left: 196px; }
  .ref-paid-grid { grid-template-columns: 1fr; }
}
@media (min-width:600px) and (max-width:760px) {
  .ref-frame { grid-template-columns: 148px minmax(0,1fr); gap: 8px; }
  .ref-rail-item { padding-inline: 8px; font-size: 12px; }
}
@media (max-width:599px) {
  body { background: var(--surface); }
  #app :is(h1,h2) { font-size: var(--md-sys-typescale-headline-small-size); line-height: var(--md-sys-typescale-headline-small-line-height); }
  #app .v6-question-panel h1 { font-size: var(--md-sys-typescale-title-large-size); line-height: var(--md-sys-typescale-title-large-line-height); }
  .reference-screen .header-shell { height: 56px; min-height: 56px; width: 100%; padding: 0 4px; gap: 4px; display: flex; flex-wrap: nowrap; }
  .reference-screen .brand { display: none; }
  .ref-mobile-heading { display: block; flex: 1; min-width: 0; }
  .ref-mobile-heading strong { display: block; font-size: 16px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--navy); }
  .ref-mobile-heading span { display: block; font-size: 12px; line-height: 16px; color: var(--muted); }
  .ref-mobile-back,.ref-mobile-menu { display: grid; place-items: center; background: transparent; color: var(--navy); width: 48px; height: 48px; padding: 0; flex: none; font-size: 32px !important; }
  .reference-screen .header-actions { width: 48px; flex: none; display: block; }
  .reference-screen .header-actions .safety-trigger { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; font-size: 0; }
  .reference-screen .safety-trigger::before { content: "!"; font: 700 18px/24px var(--font); width: 24px; height: 28px; border: 2px solid var(--danger); border-radius: 5px 5px 12px 12px; text-align: center; }
  .reference-screen .header-actions > :not(.safety-trigger) { display: none; }
  .reference-screen .ref-menu-open .header-actions > :not(.safety-trigger):not([hidden]) { display: block; position: absolute; right: 8px; top: 56px; width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; z-index: 5; }
  .reference-screen .ref-menu-open #delete-device:not([hidden]) { display: block; top: 106px; }
  .reference-screen #product-app { padding: 16px 0 100px; }
  .reference-screen #product-app { min-height: calc(100dvh - 56px); }
  .reference-screen #app { width: 100%; max-width: none; padding: 0 16px; }
  .ref-frame { display: block; }
  .ref-rail { display: none; }
  #app .ref-map { padding: 0; border: 0; }
  .ref-map-layout { display: block; }
  .ref-map > :not(.ref-map-layout) { margin-left: 0; }
  .ref-map-heading { display: none; }
  .ref-paid-grid { display: block; }
  .ref-paid-status { border: 0; padding: 0; }
  .ref-paid-status > h2 { display: none; }
  #app .ref-free-layout { display: flex; flex-direction: column; gap: 12px; }
  .ref-free-nav { display: contents; }
  .ref-free-nav > a { display: none; }
  .ref-free-heading { order: 0; }
  #app .ref-free-layout > .ref-offer { position: static; order: 1; width: 100%; }
  .ref-free-body { order: 2; width: 100%; }
  .ref-free-body > .v6-map-axis { border: 0; padding: 12px 0; }
  .ref-map-layout .v6-map-contents { display: flex; flex-wrap: nowrap; overflow-x: auto; position: static; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
  .ref-map-layout .v6-map-contents a { flex: none; }
  .ref-map-content .v6-map-axis { grid-template-columns: 1fr; }
  .ref-map-overview .v6-map-summary { margin-top: 0; }
  .reference-screen .product-nav { display: none; }
  .reference-screen:has(.ref-menu-open) .product-nav { display: flex; flex-wrap: wrap; position: fixed; right: 8px; top: 158px; width: 220px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); z-index: 100; }
  .reference-screen .pair-feedback-trigger { display: none; }
  .reference-screen:has(.ref-menu-open) .pair-feedback-trigger { display: flex; bottom: auto; top: 300px; right: 8px; }
  .ref-map[data-map-section=overview] .v6-map-contents { display: contents; }
  .ref-map[data-map-section=overview] .v6-map-contents > a { display: none; }
  .ref-map > p:not(.notice), .ref-desktop-title { display: none; }
  .ref-map > h1,.ref-map > .eyebrow { display: none; }
  .ref-map .v6-interpretation { margin: 0; }
  #app .ref-sheet { padding: 0; border: 0; border-radius: 0; gap: 12px; }
  #app .checkout-card.ref-sheet { padding: 0; gap: 10px; }
  .checkout-card #checkout-cancel { display: none; }
  .ref-section-progress { position: fixed; left: 0; right: 0; top: 56px; z-index: 10; border-radius: 0; }
  .ref-sheet .ref-list .v6-answer-options { grid-template-columns: 1fr; }
  .ref-bottom { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px max(12px,env(safe-area-inset-bottom)); background: var(--surface); z-index: 25; margin: 0; }
  .ref-bottom .button.primary { flex: 1; }
  .ref-bottom.ref-auto #v6-next { display: none; }
  .ref-bottom.ref-auto #v6-pause { display: block; }
  .ref-bottom:not(.ref-auto) .ref-bottom-meta { display: none; }
  .ref-keys { display: none; }
  .ref-sheet #detailed-save-status { margin-bottom: 8px; }
  .reference-screen .product-footer { padding-bottom: 100px; }
}
/* Owner-approved exception: 7 × 40px + 32px page margins fits at 320px. */
@media (max-width:367px) {
  .ref-sheet :is(.ref-scale,.ref-words) .v6-answer-options button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
  .ref-scale .ref-answer i { width: 32px; height: 32px; }
  .ref-scale .v6-answer-options::before { top: 19px; left: 20px; right: 20px; }
}
@media (prefers-reduced-motion:reduce) { .reference-screen *, .reference-screen *::before { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* One life sphere: one screen, unchanged answer values and visibility rules. */
.ref-sphere-head > p { margin: 0; font-size: 12px; line-height: 16px; color: var(--pair-color-layer-spheres-accent); }
#app .ref-sphere-head h1 { margin: 6px 0 0; font-size: 24px; line-height: 32px; }
.ref-sphere-dots { display: flex; gap: 6px; margin-top: 10px; }
.ref-sphere-dots i { width: 8px; height: 8px; border-radius: 6px; background: var(--line); }
.ref-sphere-dots i.done { background: var(--pair-color-layer-spheres-container); }
.ref-sphere-dots i.current { width: 22px; background: var(--pair-color-layer-spheres-accent); }
.ref-sphere-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.ref-sphere-question { padding: 12px 0; display: grid; gap: 8px; }
#app .ref-sphere-question h2 { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.ref-sphere .v6-answer-group { margin: 0; }
.ref-sphere .ref-list .v6-answer-options { display: grid; grid-template-columns: 1fr; gap: 6px; }
.ref-sphere .ref-list .ref-answer { min-height: 46px; padding: 8px 12px; gap: 8px; font-size: 14px; line-height: 18px; border-radius: 10px; }
.ref-sphere .ref-list-divider { margin: 2px 0; }
.ref-sphere .ref-segments .ref-answer { min-height: 48px; padding: 6px; font-size: 13px; line-height: 16px; }
.ref-sphere-desired { background: var(--pair-color-layer-spheres-container); border-radius: 12px; padding: 12px; margin-top: 6px; }
.ref-sphere-fold { display: none; }
.ref-sphere .ref-keys { display: none; }
@media (max-width:599px) {
  #app .ref-sphere-head h1 { font-size: 20px; line-height: 28px; }
  .ref-sphere-layout { display: block; }
  .ref-sphere .ref-list .v6-answer-options { grid-template-columns: 1fr 1fr; }
  .ref-sphere .ref-list .ref-answer { min-height: 44px; padding: 8px 10px; font-size: 13px; line-height: 16px; }
  .ref-sphere .ref-wide,.ref-sphere .ref-list-divider { grid-column: 1 / -1; }
  .ref-sphere .is-folded .ref-sphere-decision { display: none; }
  .ref-sphere .is-folded .ref-sphere-fold { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 4px 8px 12px; border-radius: 12px; background: var(--md-sys-color-secondary-container); font-size: 13px; line-height: 18px; }
  .ref-sphere-fold button { flex: none; padding: 8px; min-height: 44px; font-size: 13px; }
  .ref-sphere #detailed-save-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* Save access after payment (owner 2026-10-08: pay first, then save access). */
#app .save-access { display: grid; gap: 8px; margin: 12px 0 16px; padding: 16px; border-radius: 16px; border: 1px solid var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container-lowest); }
#app .save-access h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--pair-color-brand-navy); }
#app .save-access p { margin: 0; font-size: 14px; line-height: 20px; color: var(--md-sys-color-on-surface-variant); }
#app .save-access .button { justify-self: start; }
#app .save-access-reminder { font-size: 13px; line-height: 18px; }
#app .save-access-reminder .text-button { padding: 0; font-weight: 600; color: var(--md-sys-color-primary); }
#app .paid-confirmation { display: grid; gap: 12px; order: -1; }
#app .paid-confirmation .save-access { margin: 0; }
/* One save-access call at a time: the older bottom block hides while the new card is shown. */
#app:has([data-save-access]) .notice:has(#v6-save-cabinet) { display: none; }