/* Mobile-first refinement of the approved full-width layout. */
:root { --chrome-height:67px; }
html { scroll-padding-top:calc(var(--chrome-height) + 16px); }
.site-chrome { position:sticky; top:0; z-index:100; background:white; box-shadow:0 3px 18px #12201e0c; }
.site-chrome .header { background:#fffffff7; }
.header nav { gap:20px; }
.header nav a { display:flex; align-items:center; min-height:44px; white-space:nowrap; }
.header nav a:first-child { display:flex; }
.offer-ribbon { min-height:44px; padding:0 18px; }
.offer-ribbon button { min-height:44px; border-radius:0; padding:0 14px; background:transparent; color:var(--forest); text-decoration:underline; text-underline-offset:3px; }
.menu-toggle { display:none; }
.prototype-toolbar { display:none; }
.review-mode .prototype-toolbar { display:flex; }
.comparison-footer { display:flex; justify-content:space-between; gap:10px; padding:12px 5px 4px; font-size:11px; }
.comparison-footer span { font-size:10px; }
.close-button { min-width:44px; min-height:44px; }
.chapters button { min-height:44px; font-size:12px; }
.preview-toggle { min-width:44px; min-height:44px; }
.comparison-tabs button { min-height:44px; }
.text-button { min-height:44px; }
.existing-site { overflow:visible; scroll-padding-top:0; }
.existing-site section[id],.existing-site [id] { scroll-margin-top:0!important; }
@media(max-width:1050px) {
  .header { height:64px; }
  .header-inner { gap:12px; }
  .header-actions { margin-left:auto; }
  .download-link { display:none; }
  .menu-toggle { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:0 10px; border:1px solid #dce3df; border-radius:8px; background:#fff; font-size:12px; }
  .header #main-nav { display:none; position:absolute; top:100%; left:0; right:0; margin:0; padding:12px 20px 20px; background:white; border-top:1px solid #dce3df; box-shadow:0 12px 24px #12201e18; max-height:calc(100dvh - var(--chrome-height)); overflow:auto; gap:0; }
  .menu-open .header #main-nav { display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; }
  .header #main-nav a { padding:10px 12px; min-height:48px; border-radius:8px; font-size:14px; background:#f4f7f3; }
}
@media(max-width:540px) {
  .header-inner { padding:0 16px; gap:8px; }
  .header .button { min-height:44px; font-size:12px; padding:9px 12px; }
  .offer-ribbon { gap:6px; padding:0 12px; font-size:10px; letter-spacing:.035em; justify-content:space-between; }
  .offer-ribbon button { padding:0 3px; font-size:11px; }
  .offer-ribbon button span { padding-left:2px; }
  body[data-variant=B] .hero { padding:22px 16px 28px; }
  body[data-variant=B] .hero-shell { gap:18px; }
  body[data-variant=B] .badge { font-size:10px; margin-bottom:14px; }
  body[data-variant=B] .hero h1 { font-size:clamp(32px,8.9vw,40px); }
  body[data-variant=B] .hero-lead { margin:12px 0 9px; font-size:16px; }
  body[data-variant=B] .hero-description { font-size:14px; line-height:1.55; }
  body[data-variant=B] .hero-actions { margin-top:16px; grid-template-columns:1fr; gap:8px; }
  .hero .button { min-height:48px; font-size:13px; }
  .hero-actions .ghost { min-height:44px; padding:9px 14px; background:transparent; border-color:#bdcdc4; }
  body[data-variant=B] .trial-details { margin-top:10px; font-size:10px; gap:4px; }
  .trial-details em { font-size:11px; }
  .frame-bar { font-size:9px; }
  .frame-bar > span:last-child { font-size:8px; }
  .film-controls .film-caption strong,body[data-variant=B] .film-caption strong { font-size:12px; }
  .film-controls .film-caption small { font-size:10px; line-height:1.4; }
  .film-caption { min-height:60px; }
  .preview-toggle { font-size:11px; padding:6px 10px; }
  .preview-toggle span { max-width:36px; }
  .film-footnote { font-size:10px; flex-wrap:wrap; line-height:1.5; }
  .film-footnote-line { display:none; }
  .software-strip p { font-size:12px; }
  .software-strip > div { font-size:13px; }
  .eyebrow { font-size:10px; }
  .section-copy > p:not(.eyebrow),.studio-heading > p { font-size:15px; }
  .section-copy .secondary-copy { font-size:13px!important; }
  .text-button { font-size:13px; }
  .comparison-tabs button { font-size:12px; }
  .compare-label { font-size:9px; padding:5px 7px; }
  .compare-divider span { width:44px; height:44px; }
  .comparison-footer { flex-direction:column; gap:2px; font-size:11px; }
  .studio-card small { font-size:12px; }
  .chapters { flex-wrap:nowrap; overflow-x:auto; padding:3px 2px 8px; }
  .chapters button { flex-shrink:0; font-size:11px; padding:8px 12px; }
  .dialog-top h2 { font-size:16px; }
  .dialog-top .eyebrow { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }