/* home-fix.css: landing-page overhaul (24 Oct 2026). Loads after home-v2.css and home-m.css and only on the home page.
   One charcoal call to action, readable type, left-aligned text, white sections, a solid compact cookie bar, a sticky
   Reserve on phones, 44px tap targets. */
:root{--body:#3a3a3c;--muted:#6e6e73;--cta:#111}
em,i,cite,address{font-style:normal}

/* left-aligned text everywhere (never mixed with centred) */
.head{text-align:left;max-width:calc(var(--max) + var(--gut)*2);margin-left:auto;margin-right:auto}
.head .lede,.lede{margin-left:0;margin-right:0}
.center,.demo-note,.tile-t,.wx-head{text-align:left}
.btns{justify-content:flex-start}
.hero .hero-alt,#camera-compatibility .h2,#camera-compatibility .lead,#camera-compatibility .fine{text-align:left;margin-left:0;margin-right:0}

/* grey section backgrounds become white; a hairline keeps the rhythm */
.sec.grey{background:#fff;border-top:1px solid var(--line)}

/* buttons: charcoal is the brand's call to action; yellow is retired */
.btn-y,.btn-y:hover,.btn-primary{background:var(--cta);color:#fff;border:1px solid var(--cta);font-weight:500}
.btn-y:hover,.btn-primary:hover{background:#2a2a2c}
.btn{min-height:44px}
.hdr .btn-y{height:40px;min-height:40px;padding:0 16px;font-size:14px;border-radius:999px}
.hdr .btn-y::after{content:"";position:absolute;inset:-4px -2px}  /* 48px touch area around the compact header button */
.hdr .btn-y{position:relative}
.burger{min-width:44px;min-height:44px}
:focus-visible{outline-color:#111}

/* ---------------- hero ---------------- */
.hero-ov{display:none!important}
.hero .hero-txt .h1{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal}
.hero .h1{color:#111;font-weight:500;font-size:clamp(32px,8.5vw,64px);line-height:1.04;letter-spacing:-.03em}
.hero .h1 span{color:#6e6e73}
.hero-txt{text-align:left}
.hero .lede{color:#333;font-size:17px;line-height:1.5;max-width:34em;margin:14px 0 0}
.hero .btns{display:flex!important;flex-direction:column;align-items:stretch;max-width:420px;margin:22px 0 0}
.hero .btn-primary{width:100%;min-height:52px;height:52px;border-radius:999px;font-size:16px}
.hero .hero-price{margin:10px 0 0;font-size:14px;line-height:1.45;color:#444}
.hero .notify{margin-top:14px}
.hero .notify>summary{list-style:none;display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:#111;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hero .notify>summary::-webkit-details-marker{display:none}
.hero .su.su-hero{margin:6px 0 0;max-width:480px}
.su-hero .su-row{grid-template-columns:1fr auto;gap:10px}
.su-hero .su-row input{min-height:48px}
.su-hero .su-row .btn{height:48px;background:#111;color:#fff;border:1px solid #111}
.hero .hero-alt::after{content:none}
.hero-more{margin:26px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:4px 22px;font-size:15px}
.hero-more a{display:inline-flex;align-items:center;min-height:44px;color:#111;text-decoration:underline;text-underline-offset:3px}
.hero-more .fine{flex-basis:100%;margin:6px 0 0}
.vctl,.hero .vctl,.hero-film .vctl{width:48px;height:48px}  /* 48px: the film may be scaled slightly by the scroll effect */
.hdr .logo{display:inline-flex;align-items:center;min-height:44px}
.hero-film .poster{background:#15161a}

@media (max-width:380px){.su-hero .su-row{grid-template-columns:1fr}.su-hero .su-row .btn{width:100%}}

@media (max-width:700px){
  .hero{display:flex;flex-direction:column;padding-top:calc(60px + env(safe-area-inset-top,0px))}
  .hero-film{order:-1;width:calc(100% - 16px);margin:6px 8px 0;height:clamp(150px,24svh,300px);aspect-ratio:auto;border-radius:18px}
  .hero-txt{padding:14px 20px 8px}
  .hero .lede{font-size:16.5px;line-height:1.45;margin-top:12px}
  .hero .h1{font-size:clamp(32px,8.5vw,44px)}
  .hero .btns{max-width:none;margin-top:18px}
  .hero-film .vctl{bottom:10px;right:10px}
}
@media (min-width:701px){
  .hero-film{aspect-ratio:16/9}
  .hero-txt{max-width:calc(1200px + var(--gut)*2);margin:0 auto;padding:clamp(28px,4vw,48px) var(--gut) clamp(40px,5vw,72px)}
}
@media (min-width:1024px){
  .hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(32px,4vw,64px);max-width:calc(1200px + var(--gut)*2);margin:0 auto;padding:calc(64px + 32px) var(--gut) clamp(48px,6vw,88px)}
  .hero-txt{order:0;padding:0;margin:0}
  .hero-film{order:1;width:100%;margin:0;transform:none!important}
  .hero .h1{font-size:clamp(40px,3.5vw,54px)}
  .hero .lede{margin-top:20px}
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ---------------- cookie bar: solid, compact, above the safe area, never translucent ---------------- */
.cookie{left:12px;right:12px;width:auto;max-width:560px;bottom:max(12px,env(safe-area-inset-bottom));background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 0 1px #e5e5e5,0 8px 28px rgba(0,0,0,.12);border-radius:14px;padding:10px 12px;max-height:40vh;overflow:auto;font-size:13px;line-height:1.45;color:#333}
.cookie b{display:none}
.cookie .row2{margin-top:8px;gap:8px}
.cookie .row2 .btn{height:44px;min-height:44px;font-size:14px;border-radius:999px}
.cookie .row2 .btn-o{border-color:#bbb;color:#111;background:#fff}
@media (max-width:380px){.cookie{font-size:12px;line-height:1.4;padding:8px 12px}.cookie .row2{margin-top:6px}}
@media (min-width:701px){.cookie{left:24px;right:auto;bottom:24px;width:420px}}

/* ---------------- one sticky Reserve: phones get a full-width bar after one screen ---------------- */
.ctxp,.ctxp[data-mode]{background:var(--cta);color:#fff;font-weight:500}
@media (max-width:700px){
  .ctxp{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));height:52px;min-width:0;justify-content:center;border-radius:999px;font-size:16px}
  .ctxp small{font-weight:400;opacity:.75;margin-left:8px;font-size:14px}
}
@media (min-width:701px){.ctxp small{display:none}}
.ctxp.pre{opacity:0;pointer-events:none;transform:translateY(12px)}

/* the page never scrolls sideways */
html,body{overflow-x:clip}

/* ---------------- QA pass (24 Oct) ---------------- */
/* D1: the cookie bar is hidden until it is shown, and gone (not just transparent) once a choice is made */
.cookie:not(.show){visibility:hidden;opacity:0;pointer-events:none}
.cookie.show{visibility:visible;opacity:1}
/* D2: while the launch-updates form is open on a phone, the cookie bar steps aside (it returns when the form closes) */
@media (max-width:700px){html.notify-open .cookie{visibility:hidden;opacity:0;pointer-events:none}}
/* D5: the closed menu is out of the tab order */
.menu:not(.open){visibility:hidden}
/* D4: 44px+ pause buttons (the hero film can be scaled to ~0.9 by the scroll effect) */
.hero .vctl,.hero-film .vctl{width:50px;height:50px}
.cmp .cmp-ctl,#cmpCtl{width:44px!important;height:44px!important}
/* tap targets */
.tab,.tabs.seg .tab{min-height:44px;height:44px}
sup.fn a{position:relative}
sup.fn a::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.srcs-d>summary{display:inline-flex;align-items:center;min-height:44px}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px}
/* contrast (AA) */
.tabs.seg .tab{color:#555}
.tabs.seg .tab[aria-selected="true"]{color:#fff}
.eyebrow{color:#5f5f64}
.wx-head .eyebrow{color:rgba(255,255,255,.75)}
.cite,#how .cite{color:rgba(255,255,255,.75)}
.rev[data-light] .cite{color:#5f5f64}
.ft .ft-fine{color:rgba(255,255,255,.72)}
.ft h3.ft-h{margin:0 0 14px;font-size:13px;font-weight:600;color:#fff}
/* hero: a little more air between the headline and the lede */
.hero .h1+.lede{margin-top:18px}
@media (min-width:1024px){.hero .h1+.lede{margin-top:24px}}
.dark .eyebrow,.sec.dark .eyebrow{color:rgba(255,255,255,.72)}
.hdr .btn-y{height:44px;min-height:44px}
@media (max-width:380px){.hero-film{height:clamp(140px,21svh,300px)}}  /* 360px: keeps "Not ready?" clear of the cookie bar */
/* The answer reel, phones: the picture takes whatever height is left, so the Specs button always floats with a clear gap above the Reserve bar */
@media (max-width:700px){
  .reel-pin .rp{grid-template-rows:minmax(0,1fr) auto!important;padding-bottom:132px!important;align-items:stretch!important}
  .reel-pin .rpm{height:100%!important;min-height:140px;max-height:none!important;align-self:stretch}
  .reel-pin .rt{align-self:end}
}
/* the Watch overlay is closed on load: skip its 600+ elements in every layout until it opens */
.wx:not(.open){content-visibility:hidden}
html.wx-boot .wx{content-visibility:visible}
.wx{transition:opacity .35s ease,content-visibility .35s allow-discrete}

/* 28 Oct (owner): the hero film is as wide as the "One billion" card (1440 column, same 28px corners) and fills the
   screen height; the copy follows below it. Phones: a tall card filling most of the screen. object-fit:cover crops, never stretches. */
@media (min-width:1024px){
  .hero{display:flex!important;flex-direction:column!important;align-items:center!important;max-width:none!important;padding-top:calc(64px + 16px)!important}
  .hero .hero-film{order:-1;width:min(100% - 2*var(--gut),1440px)!important;max-width:none!important;aspect-ratio:auto!important;height:calc(100svh - 96px)!important;margin:0 auto!important;border-radius:var(--r)!important}
  .hero .hero-txt{width:min(100% - 2*var(--gut),1440px);padding-left:0!important;padding-right:0!important}
}
@media (max-width:700px){
  .hero .hero-film{width:calc(100% - 16px)!important;margin:12px 8px 0!important;aspect-ratio:auto!important;height:calc(100svh - 150px)!important;min-height:360px!important;border-radius:20px!important}
}