/* R01–R04: retain Warm Workbook and native source images. */
.dialog-head { align-items:flex-start; gap:16px; }
.dialog-head > :first-child { min-width:0; overflow-wrap:anywhere; }
.dialog-head button[data-close] { flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; }
.wizard { max-height:calc(100dvh - 32px); overflow-y:auto; overflow-x:hidden; }
.wizard input,.wizard select,.wizard-step { min-width:0; max-width:100%; }
.wizard .dialog-head { position:sticky; top:-20px; z-index:2; background:#fff; padding-block:12px; }
.form-actions { gap:12px; }
.form-actions .fine { flex-shrink:0; }
.form-actions .next { white-space:normal; }

.lightbox { max-height:calc(100dvh - 24px); overflow:hidden; }
.viewer-tools { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; margin:0 0 14px; font-size:14px; }
.viewer-tools button { min-height:44px; background:var(--fog); border-radius:6px; padding:10px 16px; }
.viewer-tools a { text-decoration:underline; text-underline-offset:4px; }
.zoom-viewport { max-height:70dvh; overflow:auto; overscroll-behavior:contain; background:#eee9df; border-radius:6px; }
.zoom-viewport:focus-visible { outline:3px solid var(--green); outline-offset:-3px; }
.lightbox .zoom-viewport #image-large { display:block; max-width:100%; max-height:70dvh; height:auto; width:auto; margin:auto; }
.lightbox .zoom-viewport.is-native #image-large { max-width:none; max-height:none; width:var(--source-width); height:auto; margin:0; }

/* The proof fields get the whole page width instead of two miniature previews. */
#H10 .two-shots,#H12 .two-shots,#H19 .security-grid { grid-template-columns:minmax(0,1fr); }
#H19 .security-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; }
.proof-viewport { max-width:100%; overflow:auto; border-radius:10px; background:#fff; }
.proof-viewport:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.proof-viewport .image-zoom { min-width:1120px; }
.proof-viewport img { width:100%; height:auto!important; max-height:none!important; }
#H19 .proof-viewport img { aspect-ratio:2.5; object-fit:cover; object-position:top; }
.proof-pan-hint { display:none; font-size:13px; margin:10px 0 0; color:var(--muted); }
.offer-scene .scene-copy { background:linear-gradient(90deg,rgba(245,242,233,.98) 0%,rgba(245,242,233,.94) 80%,rgba(245,242,233,0) 100%); padding-right:70px; } /* taste-skill-ignore: permitted neutral readability scrim over an existing photo, R04. */

@media(max-width:1150px) { .proof-pan-hint { display:block; } .proof-viewport .image-zoom { min-width:1400px; } }
@media(max-width:540px) {
  .wizard { width:calc(100% - 24px); padding:20px; }
  .dialog-head h2 { font-size:24px; }
  .form-actions { display:grid; grid-template-columns:auto 1fr; }
  .form-actions .fine { justify-self:end; }
  .form-actions .next { grid-column:1 / -1; width:100%; min-height:48px; }
  .wizard .form-actions { position:sticky; bottom:-20px; z-index:2; background:#fff; padding:12px 0 20px; }
  .lightbox { padding:12px; }
  .viewer-tools { gap:8px 16px; font-size:13px; }
  .zoom-viewport,.lightbox .zoom-viewport #image-large { max-height:65dvh; }
  #H19 .security-cards { grid-template-columns:1fr; }
  .offer-scene .scene-copy { background:rgba(245,242,233,.88); padding:28px 23px; }
  .offer-scene .scene-image { opacity:1; }
}

/* Contrast fix 25.10 (not R05): text green and orange numbers reach 4.5:1, same tones as the secondary pages */
:root{--green:#006e46;--accent:#006e46}
.benefit-number,.step-no{color:#9b4d13}
:root{--muted:#5f5f68}
.kpi-grid small,.calc-result .kicker,.footer-bottom,.footer-bottom .text-link,.addons p,.faq-item p{color:#5f5f68}
.reserved,.reserved p,.reserved span{color:#56615a}
.deferred,.deferred p,.deferred span{color:#56615a}
.design-note{color:#6a5320}
.role-card>p,.finance-caption,.financial-table thead,.cost-parts,.included-card p,.inline-cta p,.security-cards article,.price-card h3,.price small,.price-card>p:not(.price),.wizard .intro,#H24 p,#H24 .fine,#H24 .design-note{color:#5f5f68}

/* R07 · H01 on phones: shorter headline block so the product screen appears sooner; text unchanged */
@media (max-width:540px){
  .hero h1{font-size:34px;line-height:1.08;letter-spacing:-.01em}
  .hero h1 br{display:none}
  .hero .lead{font-size:16px;line-height:1.5;margin-top:14px}
  .hero .actions{margin-top:20px}
  .hero .actions{margin-bottom:16px}
  .assurances{margin-top:12px}
  .hero-visual{padding-top:20px}
  .hand-note{font-size:17px;margin-bottom:10px}
}
/* R08 · H09: the stage follows a desktop screenshot instead of a fixed 900/700 px box */
.role-screen-stage:has(.role-screen-content.desktop){height:auto}
/* R09 · illustration notes: readable and separated from the next heading */
.scene-caption{font-size:13px;line-height:1.5;margin:10px 0 28px;font-style:italic}
/* R10 · counting rule sits right under the overage line */
.price-fine:has(+ .price-fine){margin-bottom:6px}
.price-fine + .price-fine{margin-top:0}

/* H09 phone frames: the stage follows the native screen height (family and student captures are taller than one phone viewport) */
.role-screen-stage:has(.role-screen-content.mobile){height:auto;align-items:flex-start;padding:20px 12px}


/* ===== Stage 6 (26.10): readable small text, 44 px targets, tap-to-zoom frames ===== */
/* Public small text: no 8-11 px outside the mockup service bar */
.kicker{font-size:12px}
.hero .tag{font-size:12px;letter-spacing:.1em}
.fine,.finance-demo .legend span,.cost-parts,.kpi-grid small{font-size:12px}
.finance-demo .legend{gap:8px 18px;flex-wrap:wrap}
.hero .assurances{font-size:13px}
@media(max-width:700px){
  .financial-visuals svg text{font-size:21px}
  .financial-visuals svg{overflow:visible}
}
/* Focus: every interactive control shows a ring for keyboard users */
button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,.chip:focus-visible,[role=tab]:focus-visible,.image-zoom:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.dark button:focus-visible,.dark a:focus-visible,.dark input:focus-visible{outline-color:#fff}
.image-zoom{cursor:zoom-in}

/* Zoom hint: one pill under every frame (not H09, which has its own line) */
.zoom-hint{display:none;align-items:center;gap:8px;min-height:44px;margin:6px 0 0;padding:0 4px;border:0;background:none;font:650 14px/1.3 var(--font,inherit);color:var(--green);text-align:left}
.zoom-hint svg{flex:0 0 auto;width:20px;height:20px}
@media(max-width:700px){.zoom-hint{display:inline-flex}}
@media(max-width:1150px){.zoom-hint.is-proof{display:inline-flex}}
.proof-pan-hint{font-size:13px;margin:10px 0 0}

/* Image viewer on phones: full screen, big controls */
.viewer-hint{display:none;flex-basis:100%;margin:0;font-size:13px;line-height:1.4;color:var(--muted)}
.lightbox .zoom-viewport #image-large{cursor:zoom-in}
.lightbox .zoom-viewport.is-native #image-large{cursor:zoom-out}
@media(max-width:700px){
  .lightbox[open]{display:flex;flex-direction:column;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;padding:10px 12px 12px}
  .lightbox .dialog-head{flex:0 0 auto}
  .lightbox .viewer-tools{flex:0 0 auto;margin:0 0 10px}
  .lightbox .viewer-tools button{flex:1 1 auto;justify-content:center}
  .viewer-hint{display:block}
  .lightbox .zoom-viewport{flex:1 1 auto;min-height:0;max-height:none}
  .lightbox .zoom-viewport #image-large{max-height:none}
  .lightbox .zoom-viewport:not(.is-native) #image-large{max-width:100%;height:auto;margin:0 auto}
  .lightbox .zoom-viewport:not(.is-native){display:flex;align-items:center;justify-content:center}
}

/* 44 px targets on touch widths */
@media(max-width:900px){
  .brand{min-height:44px}
  #nav-menu-toggle{min-width:44px;min-height:44px}
  .hero-link{display:inline-flex;align-items:center;min-height:44px}
  .carousel-controls button{width:44px;height:44px}
  a.text-link,button.text-link{display:inline-flex;align-items:center;min-height:44px}
  .role-gallery-nav button,.chip{min-height:44px}
  .calculator input[type=number]{min-height:44px}
  .calculator input[type=range]{min-height:44px}
  #H22 a{display:inline-flex;align-items:center;min-height:44px}
  #H24 a,#H24 button{display:inline-flex;align-items:center;min-height:44px}
  .warm-menu a{min-height:44px;display:flex;align-items:center}
  .faq-item summary,.faq-item button{min-height:44px}
}
body p.fine,body .design-note{font-size:12.5px}
body .kpi-grid span{font-size:12px}
body .nav-shell .btn,body .cookie-preview .btn{font-size:13px}
@media(max-width:900px){#H24 nav a,#H24 .footer-grid a{min-width:44px}}
.compare-card .fine,.finance-demo > .fine,.footer-grid .design-note,body .footer-grid p.design-note{font-size:12.5px}
@media(max-width:700px){.wizard select,.wizard input:not([type=checkbox]):not([type=radio]),.wizard textarea{min-height:44px}}

/* Приймання 44 (P2-7): компактна шапка preview-форми на телефоні — поля видно без довгої прокрутки */
.wizard .mock-label{font-size:12px}
@media(max-width:540px){
  .wizard{padding:14px 16px 16px}
  .wizard .dialog-head{top:-14px;padding-block:6px;gap:10px;margin-bottom:0}
  .wizard .dialog-head h2{font-size:19px;line-height:1.25;margin:0}
  .wizard .dialog-head button{flex:0 0 44px;width:44px;height:44px}
  .wizard .mock-label{margin:4px 0 6px;line-height:1.35}
  .wizard .intro{font-size:14px;line-height:1.4;margin:0 0 10px}
  .wizard .step-progress{margin:0 0 10px}
  .wizard-step h3{margin:0 0 8px;font-size:18px}
  .wizard .form-actions{bottom:-16px;padding:10px 0 16px}
}
@media(max-width:540px) and (max-height:700px){.wizard .intro{display:none}}

/* Приймання 44 (P2-6): таблиця H03 на телефоні — два рядки на пункт, без горизонтальної прокрутки в картці */
@media(max-width:700px){
  .compare-card .table-scroll{overflow:visible}
  .compare-card table,.compare-card tbody,.compare-card tr{display:block;min-width:0;width:100%}
  .compare-card thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .compare-card tr{border-bottom:1px solid var(--line);padding:10px 0}
  .compare-card tr:last-child{border-bottom:0}
  .compare-card tbody th,.compare-card tbody td{display:block;width:auto;padding:4px 16px;text-align:left}
  .compare-card tbody th{font-size:14px;font-weight:750;color:var(--ink)}
  .compare-card tbody td{font-size:15px}
  .compare-card tbody td:nth-child(2){margin:2px 12px 0;padding:8px 12px;border-radius:8px}
}