/* ============================================================
   YPHOS shared core — design tokens? no; the rules byte-identical
   across model-01/02/03b/04. Link this first; page <style> holds
   page-specific + intentionally-different rules (loaded after).
   Generated safely (zero visual change on existing pages).
   ============================================================ */
/* ============================================================
   YPHOS shared core — design tokens? no; the rules byte-identical
   across model-01/02/03b/04. Link this first; page <style> holds
   page-specific + intentionally-different rules (loaded after).
   Generated safely (zero visual change on existing pages).
   ============================================================ */
html{scroll-behavior:smooth}
.ey{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.btn.ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}
/* header — mega menu, adaptive over hero */
.hdr{--fg:#fff;--fg-dim:rgba(255,255,255,.82);position:fixed;top:0;left:0;right:0;z-index:120;background:transparent;border-bottom:1px solid transparent;transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.hdr.on-light{--fg:#111;--fg-dim:#3a3f46}
.hdr.solid,.hdr.nav-open,.hdr.search-open{--fg:#111;--fg-dim:#111;border-bottom-color:var(--line)}
.hdr.nav-open,.hdr.search-open{box-shadow:0 0 30px rgb(70 70 70 / 11%)}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:rgb(255 255 255 / 90%);backdrop-filter:blur(9px);transition:opacity .4s var(--ease)}
.hdr.solid::before,.hdr.nav-open::before,.hdr.search-open::before{opacity:1}
.hdr-in{max-width:1560px;height:72px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;transition:height .4s var(--ease)}
.hdr.solid .hdr-in{height:62px}
/* pages without a hero (contact, support, generic pages): the header is solid from the start — white, dark logo, bottom hairline */
.hdr.always-solid{--fg:#111;--fg-dim:#111;border-bottom-color:var(--line)}
.hdr.always-solid::before{opacity:1}
.hdr.always-solid .brand .logo-light{display:none}
.hdr.always-solid .brand .logo-dark{display:block}
.hdr.always-solid .hdr-in{height:62px}
.nav{display:flex;align-items:center;gap:30px}
.nav.left{justify-self:start}
.nav.right{justify-self:end}
.brand{justify-self:center;display:flex;align-items:center}
.brand img{height:15px;display:block}
.brand .logo-dark{display:none}
.hdr.on-light .brand .logo-light,.hdr.solid .brand .logo-light,.hdr.nav-open .brand .logo-light,.hdr.search-open .brand .logo-light{display:none}
.hdr.on-light .brand .logo-dark,.hdr.solid .brand .logo-dark,.hdr.nav-open .brand .logo-dark,.hdr.search-open .brand .logo-dark{display:block}
.nav a,.nav .drop>button{position:relative;font-family:var(--font);background:none;border:none;cursor:pointer;font-size:14.5px;font-weight:400;color:var(--fg-dim);padding:8px 0;display:inline-flex;align-items:center;gap:6px;transition:color .3s var(--ease)}
.nav a::after,.nav .drop>button::after{content:"";position:absolute;left:50%;bottom:0;height:2px;width:0;background:var(--blue);transform:translateX(-50%);transition:width .35s var(--ease)}
.nav a:hover::after,.nav .drop:hover>button::after,.hdr.nav-open .drop>button::after{width:100%}
.chev{width:11px;height:11px;stroke:currentColor;stroke-width:2.2;fill:none;transition:transform .35s var(--ease)}
.hdr.nav-open .chev{transform:rotate(180deg)}
.iconbtn{background:none;border:none;cursor:pointer;color:var(--fg-dim);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.3s var(--ease)}
.iconbtn:hover{color:var(--fg);background:rgba(127,127,127,.14);transform:scale(1.05)}
.iconbtn svg{width:19px;height:19px;stroke:currentColor;stroke-width:2;fill:none}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;width:26px;height:20px;justify-content:center}
.burger i{height:2px;width:100%;background:var(--fg);border-radius:2px;transition:.35s var(--ease)}
/* ---- header at tablet/mobile: hide the desktop nav, reveal the burger.
   This lived only in each page's <style>, so model-07 (a fresh head) shipped
   with no mobile menu at all. Shared here so a page can't omit it. ---- */
@media(max-width:900px){.nav.left,.nav.right .txt{display:none}.hdr-in{display:flex;align-items:center;justify-content:space-between}.nav.right{gap:4px}.burger{display:flex}.brand{justify-self:auto;padding-left:0}}
.drop{position:static}
.mega{display:grid;grid-template-rows:0fr;visibility:hidden;pointer-events:none;transition:grid-template-rows .45s var(--ease),visibility .45s}
.mega-wrap{overflow:hidden;min-height:0}
.hdr.nav-open .mega{grid-template-rows:1fr;visibility:visible;pointer-events:auto}
.mega-in{max-width:1560px;margin:0 auto;padding:38px 28px 44px;display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.mega h5{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:16px}
.mega a{display:flex;gap:9px;align-items:baseline;padding:8px 0;font-size:14.5px;font-weight:500;color:var(--body);cursor:pointer;transform:translateY(6px);opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.hdr.nav-open .mega a{opacity:1;transform:none}
.mega a::after{display:none}
.mega a:hover{color:var(--blue)}
.mega a b{color:var(--ink);font-weight:700;min-width:26px}
.mega a span.tag{font-size:9px;letter-spacing:.1em;background:var(--blue);color:#fff;border-radius:3px;padding:1px 5px;margin-left:3px}
.mega a span.tag.b{background:var(--bronze)}
.mega .viewall{color:var(--blue);font-weight:700;margin-top:6px}
.mega a:nth-child(2){transition-delay:.04s}
.mega a:nth-child(3){transition-delay:.08s}
.mega a:nth-child(4){transition-delay:.12s}
.mega a:nth-child(5){transition-delay:.16s}
.spanel{display:grid;grid-template-rows:0fr;visibility:hidden;pointer-events:none;transition:grid-template-rows .45s var(--ease),visibility .45s}
.hdr.search-open .spanel{grid-template-rows:1fr;visibility:visible;pointer-events:auto}
.spanel-wrap{overflow:hidden;min-height:0}
.spanel-in{max-width:1560px;margin:0 auto;padding:26px 28px 36px}
.search-in{max-width:760px;margin:0 auto}
.search-row{display:flex;align-items:center;gap:16px;border-bottom:2px solid var(--line);padding:14px 4px;transition:border-color .3s var(--ease)}
.search-row:focus-within{border-bottom-color:var(--blue)}
.search-row svg.s{width:24px;height:24px;stroke:var(--muted);stroke-width:2;fill:none;flex:none}
.search-row input{flex:1;border:none;outline:none;font-family:var(--font);font-size:26px;font-weight:500;color:var(--ink);background:none}
.search-row input::placeholder{color:var(--faint)}
.search-close{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--muted);background:none;border:none;cursor:pointer;flex:none}
.search-close:hover{color:var(--ink);background:rgba(127,127,127,.1)}
.search-sug{margin-top:22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search-sug .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.chip{font-size:13px;font-weight:500;color:var(--body);border:1px solid var(--line);border-radius:18px;padding:7px 15px;cursor:pointer;transition:.25s var(--ease)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.offcanvas{position:fixed;inset:0;width:100%;background:#fff;z-index:125;transform:translateX(100%);transition:transform .45s var(--ease);padding:92px 28px 40px;overflow-y:auto}
body.menu-open .offcanvas{transform:none}
.ocbd{position:fixed;inset:0;background:rgba(6,8,12,.4);z-index:124;opacity:0;visibility:hidden;transition:.4s var(--ease)}
body.menu-open .ocbd{opacity:1;visibility:visible}
.offcanvas a{display:block;padding:15px 0;font-size:21px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.offcanvas .ocsub{padding:6px 0 14px 14px;border-bottom:1px solid var(--line)}
.offcanvas .ocsub a{font-size:16px;font-weight:500;color:var(--body);padding:11px 0;border:none}
.offcanvas .ocsub .lbl{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:8px 0 2px}
body.menu-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.shop-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.buy .ey{margin-bottom:12px}
.buy .lm{margin-top:22px;font-size:20px;color:var(--ink);font-weight:300}
.buy .lm small{font-size:13px;color:var(--muted);margin-left:6px}
.buy .vlbl{margin-top:24px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.vrow{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.vchip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:30px;padding:8px 16px;font-size:13px;color:var(--body);cursor:pointer;transition:.3s var(--ease)}
.vchip .vsw{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.14);flex:none}
.vchip:hover{border-color:var(--faint);color:var(--ink)}
.vchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.vchip.on .vsw{border-color:rgba(255,255,255,.4)}
.sw-w{background:#eef3f7}
.sw-b{background:#1f6fd0}
.sw-rgbw{background:url('../img/rgbw-2.jpg') center/cover}
.sw-rgb{background:url('../img/rgb2.jpg') center/cover}
.reveal.vis{opacity:1;transform:none}
.oc-close{position:absolute;top:18px;right:20px;width:42px;height:42px;border:none;background:none;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;border-radius:50%;transition:background .2s}
.oc-close:hover{background:rgba(127,127,127,.1)}
.mega-models{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-content:start}
.mega-side{display:flex;flex-direction:column;gap:12px}
.mega a.mega-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border:1px solid var(--line);border-radius:12px;font-size:15px;font-weight:500;color:var(--ink);transition:opacity .4s var(--ease),transform .4s var(--ease),border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.mega a.mega-cta:hover{border-color:var(--ink);background:var(--soft);color:var(--ink)}
.mega a.mega-cta.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.mega a.mega-cta.primary:hover{background:var(--blue-d);border-color:var(--blue-d);color:#fff}
.mega a.mega-cta .ar{transition:transform .3s var(--ease)}
.mega a.mega-cta:hover .ar{transform:translateX(4px)}
.offcanvas .ocsub a b{display:inline-block;min-width:30px;color:var(--muted);font-weight:600}
.offcanvas .ocsub a.ocacc{margin-top:12px;color:var(--ink);font-weight:600}
.offcanvas .ocsub a.ocall{color:var(--blue);font-weight:600}

/* ---- accordion (shared component) ---- */
/* accordion (UI rounded markers) */
.acc{padding:100px 0;scroll-margin-top:90px}
.acc h2{font-size:clamp(28px,3.4vw,40px);font-weight:300;text-align:center;margin-bottom:44px}
.acc-list{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.ac{border-bottom:1px solid var(--line)}
.ac-head{width:100%;background:none;border:none;font-family:inherit;cursor:pointer;padding:24px 4px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:18px;color:var(--ink);font-weight:400;text-align:left}
.ac-head .pm{width:20px;height:20px;position:relative;flex:none;opacity:.7;transition:opacity .35s var(--ease),transform .5s var(--ease)}
.ac-head:hover .pm,.ac.open .ac-head .pm{opacity:1}
.ac-head .pm::before,.ac-head .pm::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;transition:transform .5s var(--ease)}
.ac-head .pm::before{width:14px;height:1.6px;transform:translate(-50%,-50%)}
.ac-head .pm::after{width:1.6px;height:14px;transform:translate(-50%,-50%)}
.ac.open .ac-head .pm{transform:rotate(180deg)}
.ac.open .ac-head .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.ac-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.ac.open .ac-wrap{grid-template-rows:1fr}
.ac-inner .r:first-child{border-top:none}
.ac-body{overflow:hidden;min-height:0;opacity:0;transform:translateY(-6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.ac.open .ac-body{opacity:1;transform:none}
.ac-inner{padding:2px 4px 28px}
.ac-inner .r{display:grid;grid-template-columns:1fr 1.5fr;gap:20px;padding:11px 0;border-top:1px solid var(--line)}
.ac-inner dt{font-size:14px;font-weight:400;color:var(--muted)}
.ac-inner dd{font-size:14px;font-weight:400;color:var(--ink)}
.ac-inner p{font-size:14.5px;font-weight:400;max-width:62ch;margin-bottom:12px}
.ac-inner p:last-child{margin-bottom:0}
.ac-inner .note{font-size:13px;color:var(--muted);margin-top:14px}
.ac-inner ul{margin:4px 0 0 18px}
.ac-inner li{font-size:14px;margin:7px 0;font-weight:400}
/* drawing (C1) */
/* Drawings are exported cropped to their artwork (tight viewBox), so plain
   padding is all that's needed — no crop hack. */
.draw{max-width:900px;margin:0 auto 30px;background:rgb(250 250 250);padding:100px 30px}
.draw img{display:block;width:100%;max-width:400px;margin:0 auto}
.acc-cta{text-align:center;margin-top:36px}


/* ---- unified primitives + trust + generic media (canonical) ---- */
*{box-sizing:border-box;margin:0;padding:0}
svg{display:block}
button{font-family:inherit}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
/* brand font for SKUs / --brand. Declared here so a page can't forget it —
   it was previously only inline in some pages, and model-01 silently fell
   back to Arial (heavier + wider than Lexend Deca, which shifted layout). */
@font-face{font-family:'fonttt';src:url('../fonts/font-XBd.woff2') format('woff2');font-weight:800;font-display:swap}
:root{--ink:#0f1115;--ink-2:#454e58;--body:#5a5f66;--muted:rgb(134,136,140);--faint:#c4c9cf;--line:#e6e8eb;--bg:#fff;--soft:#eef0f2;--deep:#06080c;--blue:#0a87d8;--blue-d:#086cb0;--bronze:#b58a5b;--steel:#9bb0c6;--font:'Lexend Deca',-apple-system,Arial,sans-serif;--brand:'fonttt','Lexend Deca',sans-serif;--maxw:1320px;--ease:cubic-bezier(.22,1,.36,1);--wide:1560px}
body{font-family:var(--font);color:var(--body);background:#fff;line-height:1.6;font-weight:300;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
/* ---- primary button. The base rule was missing from this file, so `.btn` and
   `.btn.ghost` rendered as bare text links on every page; only the two override
   rules below survived the extraction. Restored from the reference mockups. ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-size:15px;font-weight:500;border:2px solid var(--blue);border-radius:40px;background:var(--blue);color:#fff;padding:10px 32px;cursor:pointer;transition:all .4s cubic-bezier(.165,.84,.44,1)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.btn:hover{background:transparent;color:var(--blue);border-color:var(--blue)}
/* ---- underlined arrow link. Lived only in page <style> blocks, and model-07
   used the markup without ever defining it. Shared here; pages that want a
   different weight override just that. ---- */
.lnk{position:relative;color:var(--blue);font-weight:500;font-size:15px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.lnk .lt{position:relative}
.lnk .lt::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:currentColor;transition:width .4s var(--ease)}
.lnk:hover .lt::after{width:100%}
.lnk .ar{display:inline-block;transition:transform .4s var(--ease)}
.lnk:hover .ar{transform:translateX(5px)}
.lnk.w{color:#fff}
.buy .acts{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
.buy .lead{font-size:16px;margin-top:16px;max-width:42ch;font-weight:400}
.buy h2{font-size:36px;font-weight:400}
.craft .media{aspect-ratio:1/1}
/* material feature: photo keeps its native 3:4 portrait ratio rather than
   being cropped square by the default .craft .media 1/1. */
.matsec .media{aspect-ratio:3/4}

.craft p{font-size:16px;font-weight:400;margin-top:18px;max-width:46ch}
.techchips{display:flex;flex-wrap:wrap;gap:8px}
.techchip{font-size:12px;border:1.5px solid #4243459e;border-radius:20px;padding:5px 12px;color:#424345;font-weight:400}
/* ---- tech tiles: gradient line-icon + inline copy, on the dark band ----
   Icons are the originals from the live model-03 page (self-contained SVGs
   with their own gradient defs; ids are namespaced so several can coexist). */
.ttiles{background:#141517;color:#fff;padding:104px 0 112px}
.ttiles-wrap{max-width:var(--wide);margin:0 auto;padding:0 28px}
.ttiles-lead{max-width:70ch;margin:0 0 72px}
.ttiles-lead p{font-size:19px;line-height:1.6;font-weight:400;color:#fff;margin:0}
.ttiles-in{display:grid;grid-template-columns:repeat(4,1fr);gap:60px 48px}
.tt{display:block}
/* The four source icons have different viewBox ratios (50x42, 37x53, 40x41,
   46x37). Sizing by width alone made the thermometer ~75% taller than the
   ramp — so fit each into a common square box instead and let the default
   preserveAspectRatio center it. */
.tt-ic{width:66px;height:66px;margin-bottom:30px;display:flex;align-items:center;justify-content:center}
.tt-ic svg{width:100%;height:100%;display:block}
.tt p{font-size:16px;line-height:1.6;font-weight:300;color:rgba(255,255,255,.62);margin:0}
.tt p b{font-weight:600;color:#fff}
@media(max-width:1100px){.ttiles-in{grid-template-columns:1fr 1fr;gap:52px 48px}.ttiles-lead{margin-bottom:56px}}
@media(max-width:600px){.ttiles{padding:76px 0 80px}.ttiles-wrap{padding:0 16px}
  .ttiles-in{grid-template-columns:1fr;gap:44px}.ttiles-lead{margin-bottom:44px}
  .tt-ic{width:56px;height:56px;margin-bottom:22px}.tt p{font-size:15.5px}}

/* ---- video panel: 16:9, constrained to the --wide column (not full-bleed),
   with centered white copy over it. A light scrim keeps the text readable
   whatever frame the video is on. ---- */
/* width + gutters match .gal-wrap exactly; top margin matches the gallery's
   own row rhythm (.gal-row2 margin-top) so it sits in the same cadence. */
.vidpanel{max-width:var(--wide);margin:60px auto;padding:0 40px}
.vidpanel-in{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--deep)}
.vidpanel-in video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;border:0}
.vidpanel-in::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,8,12,.22),rgba(6,8,12,.34))}
.vidpanel-tx{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:0 8%}
.vidpanel-tx p{margin:0;color:#fff;text-align:center;max-width:34ch;
  font-size:clamp(20px,2.1vw,32px);font-weight:300;line-height:1.45;letter-spacing:-.01em}
@media(max-width:600px){.vidpanel{padding:0 16px;margin:44px auto}.vidpanel-tx{padding:0 22px}
  .vidpanel-tx p{font-size:clamp(17px,4.6vw,22px);line-height:1.4}}

/* ---- editorial gallery (full-bleed photo + 2 mosaic rows) ----
   Ported from the model-02 implementation. Uses the `.gal-ed` modifier for its
   padding so it never fights the base `.gal{padding:30px 0 110px}` some pages
   already declare. Background longhands (not the shorthand) so page-level
   `.ph-*` slot images survive. */
/* photo sits LAST here, so no bottom padding (it meets the next section
   flush) and the leading space comes from .gal-row1's own margin-top. */
.gal-ed{padding:0}
.gal-ed .gal-full{margin-top:110px}
.gal-full img{display:block;width:100%;height:auto}
.gal-wrap{max-width:1560px;margin:0 auto;padding:0 40px}
.gal-row1{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:96px}
.gal-row1 .sq{aspect-ratio:1/1;background-color:var(--soft);background-size:cover;background-position:center;background-repeat:no-repeat}
.gal-row1 h3{font-size:26px;font-weight:400;color:var(--ink);margin-bottom:30px}
.gal-row1 p{font-size:16px;font-weight:400;letter-spacing:.2px;color:var(--ink);line-height:1.7;margin-top:14px}
.gal-tx{margin-left:16%;max-width:66%}
.gal-row2{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;margin-top:60px}
.gal-row2 .imL{aspect-ratio:3/4;background-color:var(--soft);background-size:cover;background-position:center;background-repeat:no-repeat}
.gal-row2 .imR{aspect-ratio:4/3;background-color:var(--soft);background-size:cover;background-position:center;background-repeat:no-repeat}
.gal-cap{font-size:16px;font-weight:400;letter-spacing:.2px;color:var(--ink);line-height:1.7;margin-top:14px;width:80%;font-style:normal}
@media(max-width:760px){
  .gal-row1,.gal-row2{grid-template-columns:1fr;gap:32px}
  .gal-tx{margin-left:0;max-width:none}
  .gal-cap{width:100%}
}
@media(max-width:600px){.gal-wrap{padding-left:16px;padding-right:16px}}

/* ---- wide photo carousel: 16:9 shots, caption below, prev/next ----
   Width matches the header/mega-menu (--wide + 28px gutters). Square corners.
   On tablet/mobile it goes full-bleed: one card per screen, edge to edge. */
.gcar{padding:110px 0 120px}
.gcar-in{max-width:var(--wide);margin:0 auto;padding:0 28px}
.gcar .head{text-align:center;max-width:640px;margin:0 auto 44px}
.gcar .head h2{font-size:clamp(28px,3.6vw,46px);font-weight:200;letter-spacing:-.02em}
.gcar-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.gcar-track::-webkit-scrollbar{display:none}
.gcar-item{scroll-snap-align:start;min-width:0}
/* longhands on purpose: the `background` shorthand would reset background-image
   to none and — being more specific than the page's `.ph-*` slot rules — would
   wipe out every photo in the carousel. */
.gcar-item .shot{position:relative;overflow:hidden;aspect-ratio:16/9;background-color:var(--soft);background-position:center;background-size:cover;background-repeat:no-repeat;border-radius:0}
/* background video fills the same 16:9 box; the .ph-* image stays behind it
   as the fallback if the video is blocked (iOS Low Power Mode) or slow. */
.shot-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;border:0}
/* font-style/margin are set explicitly: some pages style bare `figcaption`
   (e.g. italic photo credits) which would otherwise leak in here. */
.gcar-item{margin:0}
.gcar-item figcaption{margin:18px 0 0;font-size:15px;line-height:1.62;color:var(--body);font-weight:400;font-style:normal}
.gcar-item figcaption h3{display:inline;font-size:15px;font-weight:600;color:var(--ink)}
.gcar-item figcaption p{display:inline;font-weight:400}
.gcar-nav{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:36px}
.gcar-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s var(--ease),border-color .3s var(--ease)}
.gcar-btn:hover:not(:disabled){background:var(--soft);border-color:var(--faint)}
.gcar-btn:disabled{opacity:.32;cursor:default}
.gcar-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1100px){.gcar-track{grid-auto-columns:calc((100% - 24px)/2)}}
@media(max-width:820px){
  .gcar{padding:80px 0 90px}
  .gcar-in{padding:0}
  .gcar .head{padding:0 16px;margin-bottom:32px}
  .gcar-track{grid-auto-columns:100%;gap:0}
  .gcar-item figcaption{padding:0 16px}
  .gcar-nav{margin-top:28px}
}

/* ---- available-versions table (model pages) — same rules as the model-02
   implementation so every page renders identically, but scoped under .vtable
   (model-01 reuses .nm for its .lbar comparison bars, and an unscoped .nm
   would flatten their font-weight).
   IMPORTANT: the size/weight lives on `.vtable .nm`, NOT on `.vtable .vtr .nm`
   — `.vtable .vtr.h` (0,3,0) must out-rank it so the header row keeps its
   11px uppercase. Putting font-size on `.vtable .vtr .nm` ties the header and
   blows it up to 15px bold. ---- */
.vtable .nm{font-size:13px;color:var(--ink);font-weight:500}
.vtable .nm small{color:var(--muted);margin-left:10px}
.sw{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.12);flex:none;display:inline-block}
.sw-c{background:#1dd7c7}
.sw-a{background:#f8a72a}
.sw-whp{background:#fff;box-shadow:inset 0 0 0 1px #ddd}
.sw-bhp{background:#0a3f8f}
.sw-dual{background:linear-gradient(90deg,#eef3f7 50%,#1f6fd0 50%)}
.vtable{max-width:860px;margin:0 auto;border-top:1px solid var(--line)}
.vtr{display:grid;grid-template-columns:auto 1fr auto auto;gap:16px;align-items:center;padding:14px 6px;border-bottom:1px solid var(--line);font-size:13.5px;font-weight:400}
.hp{display:inline-block;background:#f6741a;color:#fff;font-size:8px;font-weight:500;letter-spacing:.1em;border-radius:20px;padding:2px 8px;margin-left:6px;vertical-align:middle}
.be{display:inline-block;background:#1a1d21;color:#fff;font-size:8px;font-weight:500;letter-spacing:.1em;border-radius:20px;padding:2px 8px;margin-left:6px;vertical-align:middle}
.vtable .vtr.h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.vtable .vtr .nm{color:var(--ink)}
.vtr .lm{color:var(--body);text-align:right}
.vtr .sku{font-family:var(--brand);font-weight:800;font-size:12px;letter-spacing:.04em;color:var(--ink);text-align:right}
/* padding:0 is deliberate — some pages (e.g. model-01) define a page-level
   layout utility `.wide{padding:0 28px}`, which the table would otherwise
   inherit and sit 28px further in than on every other model page. */
.vtable.wide{max-width:none;padding:0}
.vnote{font-size:12.5px;color:var(--muted);margin-top:14px}
.shop .media{aspect-ratio:1/1}
.media{position:relative;background:var(--soft) center/cover no-repeat;overflow:hidden;border-radius:0}
.foot{background:#06080c;color:rgba(255,255,255,.55);padding:60px 0 40px}
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-in{max-width:var(--maxw);margin:0 auto;padding:54px 40px;display:grid;grid-template-columns:repeat(6,1fr);gap:34px 24px}
.cert{text-align:center}
.cert img{height:38px;width:auto;margin:0 auto 14px;object-fit:contain}
.cert .cert-ic{height:38px;width:auto;display:block;margin:0 auto 14px}
.cert p{font-size:12px;font-weight:400;color:var(--muted);line-height:1.5;max-width:24ch;margin:0 auto}
.warrbadge{display:inline-flex;align-items:center;gap:7px;margin:0 auto 14px}
.warrbadge .cert-ic{margin:0}
.wb-txt{font-size:8px;font-weight:600;letter-spacing:.12em;line-height:1.15;color:#424345;text-align:left}
@media(max-width:880px){.trust-in{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.trust-in{grid-template-columns:repeat(2,1fr)}}

/* ---- CTA (shared full-bleed) ---- */
.cta{position:relative;height:80vh;min-height:520px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden}
.cta .media{position:absolute;inset:0}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(6,8,12,.45),rgba(6,8,12,.65))}
.cta .in{position:relative;z-index:2;max-width:720px;margin:0 auto;padding:0 24px}
.cta h2{color:#fff;font-size:clamp(32px,4.8vw,60px);font-weight:200;letter-spacing:-.03em;line-height:1.06}
.cta p{color:rgba(255,255,255,.82);font-size:18px;margin:18px auto 32px;max-width:48ch}

/* ---- footer (shared) ---- */
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px;max-width:var(--maxw);margin:0 auto;padding:0 40px}
.foot .wm{text-align:left}
.foot .wm b{font-family:var(--brand);font-weight:800;letter-spacing:.34em;font-size:20px;color:#fff;padding-left:.34em}
.foot .wm span{font-size:9px;letter-spacing:.3em;color:rgba(255,255,255,.5);display:block;margin-top:8px}
.foot .wm p{font-size:13px;margin-top:16px;max-width:32ch}
.foot h5{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600;margin-bottom:14px}
.foot a{display:block;font-size:14px;color:rgba(255,255,255,.72);padding:5px 0}
.foot a:hover{color:#fff}
.foot .legal{max-width:var(--maxw);margin:46px auto 0;padding:24px 40px 0;border-top:1px solid rgba(255,255,255,.1);font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}

/* ---- base headings (global typography) ---- */
h1,h2,h3,h4{color:var(--ink);font-weight:300;letter-spacing:-.025em;line-height:1.06}

/* One mobile gutter for every shared container. This lived only in each page's
   <style>, so a page built from a fresh head (model-07, index) silently kept the
   40px desktop gutter while its hero dropped to 16px. Pages must not redeclare it. */
@media(max-width:600px){.wrap,.gal-wrap,.hdr-in,.trust-in,.foot-grid,.mega-in,.spanel-in,
  .foot .legal,.cta .in{padding-left:16px;padding-right:16px}}

/* full-bleed gallery image: fill the screen on phones (crops rather than scales) */
@media(max-width:760px){
  .gal-full{min-height:110vh}
  .gal-full img{height:110vh;object-fit:cover;object-position:center}
}

/* download buttons: the site's pill shape, quiet until hover, then solid ink */
.ac-inner dd small{display:block;margin-top:5px;font-size:12.5px;color:var(--muted)}
/* .ac-inner p in yphos.css is (0,1,1) and outranks a bare class, so this is scoped
   as p.dlnote (0,2,1) to actually win */
.ac-inner p.dlnote{font-size:13.5px;font-weight:400;line-height:1.7;max-width:74ch;margin:0 0 32px}
.dlgrid{display:flex;flex-wrap:wrap;gap:10px}
.dlbtn{display:inline-flex;align-items:center;gap:10px;padding:10px 22px;border:2px solid var(--line);
  border-radius:40px;background:#fff;color:var(--ink);font-size:12px;font-weight:500;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.dlbtn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.dlbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.dlbtn em{font-style:normal;font-weight:400;font-size:11.5px;letter-spacing:.1em;color:var(--muted)}
.dlbtn:hover em{color:rgba(255,255,255,.62)}
@media(max-width:600px){.dlgrid{flex-direction:column;align-items:stretch}
  .dlbtn{justify-content:center}}

/* Version-table swatches mirror the shop swatches exactly: an HP version shares
   its base color rather than a darker one, the photographic swatches carry no
   ring of their own, and the dual gradient paints into ::before under
   overflow:hidden so it cannot bleed past the rounded edge.
   Scoped to .vtable (0,2,0) so it outranks the per-page copies of .sw (0,1,0),
   which sit later in the cascade. */
.vtable .sw{position:relative;overflow:hidden}
.vtable .sw-whp{background:#eef3f7;box-shadow:none}
.vtable .sw-bhp{background:#1f6fd0}
.vtable .sw-rgbw,.vtable .sw-rgb{border:0}
.vtable .sw-dual{background:none}
.vtable .sw-dual::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(90deg,#eef3f7 50%,#1f6fd0 50%)}