/* ============================================================================
   PD V2 — PREVIEW PAGE CHROME  (prototype only)
   Page-level atmosphere + device mockups for the home/shop/product demos.
   The component system lives in shared.v2.css; this only adds hero glow,
   CSS device mockups, and a few layout helpers. NOT part of the design system.
   ========================================================================= */

body{ background:var(--surface); }
main{ padding-top:56px; }   /* clear the fixed nav */

/* flat monochrome backdrop — no teal glow, near-solid surface */
body::before{ content:''; position:fixed; inset:0; z-index:-2;
  background:var(--surface); }
[data-theme="light"] body::before{ background:var(--surface); }

/* ── HERO ─────────────────────────────────────────────────────────────── */
.hero{ position:relative; text-align:center; padding-block:clamp(64px,10vw,140px) var(--section-y); }
.hero h1{ font-size:var(--fs-3xl); max-width:16ch; margin-inline:auto; }
.hero p.sub{ max-width:54ch; margin:var(--space-3) auto 0; font-size:var(--fs-md); color:var(--text-muted); }
.hero .pd-cluster{ justify-content:center; margin-top:var(--space-4); }

/* section heading block */
.sec-head{ text-align:center; max-width:60ch; margin:0 auto var(--space-4); }
.sec-head h2{ margin-top:var(--space-1); }
.sec-head p{ color:var(--text-muted); margin-top:var(--space-2); }

/* ── CSS DEVICE MOCKUP (stand-in for product photography) ──────────────── */
.demo-phone{ position:relative; width:128px; aspect-ratio:9/19; border-radius:22px;
  background:var(--finish-c,#141416);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 40px 90px rgba(0,0,0,.7), inset 0 0 0 3px rgba(0,0,0,.35);
  display:grid; place-items:center; overflow:hidden;
  transition:background .6s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); }
.demo-phone::before{ content:''; position:absolute; top:9px; width:42px; height:5px; border-radius:99px; background:rgba(0,0,0,.4); z-index:2; }
/* depth + sheen overlay, finish-independent */
.demo-phone::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.10),transparent 38%,rgba(0,0,0,.45)); }
.demo-phone .scr{ position:relative; z-index:2; font-family:var(--fm); font-size:.62rem; letter-spacing:.18em; color:rgba(140,140,144,.85); }

/* device finishes (variant system) — canonical Pixel 10 Pro/10/9 Pro/9 colourways */
[data-finish="obsidian"]{ --finish-c:#15151a; }
[data-finish="porcelain"]{ --finish-c:#e9e7df; }
[data-finish="moonstone"]{ --finish-c:#b9c2cc; }
[data-finish="jade"]{ --finish-c:#5e7a63; }
[data-finish="frost"]{ --finish-c:#dfe7ea; }
[data-finish="indigo"]{ --finish-c:#4a4e7a; }
[data-finish="limoncello"]{ --finish-c:#ecd97e; }
[data-finish="hazel"]{ --finish-c:#6f5a43; }
[data-finish="rose-quartz"]{ --finish-c:#f1d4d2; }
[data-finish="peony"]{ --finish-c:#f0c2cd; }
[data-finish="wintergreen"]{ --finish-c:#cfe0cf; }
[data-finish="bay"]{ --finish-c:#4f6678; }
/* light finishes need a dark on-device screen tint */
[data-finish="porcelain"] .scr,[data-finish="frost"] .scr,[data-finish="limoncello"] .scr,
[data-finish="rose-quartz"] .scr,[data-finish="peony"] .scr,[data-finish="wintergreen"] .scr{ color:rgba(60,58,52,.8); }

/* finish swatches — 26px disc rendered via ::before inside a 44px tap target (iOS min) */
.finish{ display:flex; align-items:center; gap:.1rem; flex-wrap:wrap; }
.finish__sw{ width:44px; height:44px; min-width:44px; min-height:44px; padding:0; border:0; background:none;
  cursor:pointer; position:relative; display:inline-flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; }
.finish__sw::before{ content:''; width:26px; height:26px; border-radius:50%; border:1px solid var(--border-strong);
  background:var(--sw); transition:transform .25s ease; }
.finish__sw[aria-selected="true"]::before{ box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--text); }
.finish__sw:hover::before{ transform:scale(1.12); }
.finish__sw[data-f="obsidian"]{ --sw:#15151a; }
.finish__sw[data-f="porcelain"]{ --sw:#e9e7df; }
.finish__sw[data-f="hazel"]{ --sw:#6f5a43; }
.finish__sw[data-f="bay"]{ --sw:#4f6678; }
.finish__sw[data-f="moonstone"]{ --sw:#b9c2cc; }
.finish__sw[data-f="jade"]{ --sw:#5e7a63; }
.finish__sw[data-f="frost"]{ --sw:#dfe7ea; }
.finish__sw[data-f="indigo"]{ --sw:#4a4e7a; }
.finish__sw[data-f="limoncello"]{ --sw:#ecd97e; }
.finish__sw[data-f="rose-quartz"]{ --sw:#f1d4d2; }
.finish__sw[data-f="peony"]{ --sw:#f0c2cd; }
.finish__sw[data-f="wintergreen"]{ --sw:#cfe0cf; }
.finish__sw[data-f="iris"]{ --sw:#7c6fa0; }
.finish__name{ font-family:var(--fh); font-weight:600; font-size:var(--fs-sm); color:var(--text); min-width:8ch; margin-left:.55rem; }
.pd-pcard:hover .demo-phone{ transform:translateY(-4px); transition:transform .35s ease; }
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero .demo-phone{ width:170px; animation:floaty 6s ease-in-out infinite; margin:var(--space-5) auto 0; }

/* included strip */
.incl{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-3); }
.incl span{ display:inline-flex; align-items:center; gap:.5rem; color:var(--text-muted); font-size:var(--fs-sm); }
.incl span::before{ content:'✓'; color:var(--text-faint); font-weight:700; }

/* CTA band — solid panel, no glass */
.cta-band{ text-align:center; background:var(--surface-2); border:1px solid var(--border-c);
  border-radius:var(--r); padding:var(--section-y) var(--gutter); }

/* shop filter chips (decorative) */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:var(--space-4); }
.chip{ height:32px; padding:0 14px; display:inline-flex; align-items:center; border-radius:var(--r-pill);
  border:1px solid var(--border-c); color:var(--text-muted); font-size:var(--fs-xs); font-weight:600; cursor:pointer; }
.chip.is-on,.chip:hover{ border-color:var(--accent); color:var(--accent); }

/* nav toggle button shown on mobile only (handled in shared mobile-menu css) */
.pd-nav__logo-mark{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:var(--r-sm); background:var(--text); color:var(--surface); font-family:var(--fh); font-size:.72rem; font-weight:var(--fw-black); letter-spacing:.02em; }

/* ============================================================================
   PD V2 — EDITORIAL COMPOSITION LAYER
   Cinematic / Apple·Tesla pacing. Asymmetric hero, hierarchy over grids,
   full-bleed alternating tone bands, editorial footer. Composition only —
   colour/tokens stay in shared.v2.css.
   ========================================================================= */

/* display + editorial type (bigger than the system scale, campaign moments) */
.ed-kicker{ font-family:var(--f); font-size:var(--fs-xs); letter-spacing:.34em; text-transform:uppercase; color:var(--text-faint); font-weight:600; }
.ed-display{ font-family:var(--fh); font-weight:800; line-height:.96; letter-spacing:-.03em; font-size:clamp(2.7rem,8.5vw,6.2rem); color:var(--text); margin:0; }
.ed-display--xl{ font-size:clamp(3rem,11vw,8.5rem); line-height:.92; }
.ed-lede{ font-size:clamp(1.05rem,1.4vw,1.35rem); line-height:1.5; color:var(--text-muted); max-width:44ch; font-weight:300; margin:0; }
.ed-textlink{ font-family:var(--fh); font-weight:600; font-size:var(--fs-sm); color:var(--text); display:inline-flex; align-items:center; gap:.5rem; transition:gap .2s ease,color .2s ease; }
.ed-textlink::after{ content:'→'; transition:transform .2s ease; }
.ed-textlink:hover{ gap:.7rem; color:var(--accent); }
.ed-textlink:hover::after{ transform:translateX(3px); }

/* full-bleed bands: span the viewport while inner content keeps the container */
.ed-band{ width:100%; }
.ed-band--contrast{ background:var(--surface-2); }
.ed-band--light{ background:var(--surface); }     /* paired with data-theme="light" */

/* HERO — asymmetric; device reads as a luxury object */
.ed-hero{ min-height:90vh; display:grid; align-items:center; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); padding-block:clamp(3rem,9vh,7rem) clamp(2.5rem,6vh,5rem); }
.ed-hero__copy{ display:flex; flex-direction:column; gap:clamp(1.3rem,2.4vw,2.1rem); max-width:17ch; }
.ed-hero__copy .ed-lede{ max-width:40ch; }
.ed-hero__actions{ display:flex; align-items:center; gap:1.8rem; margin-top:.4rem; flex-wrap:wrap; }
.ed-hero__stage{ position:relative; display:grid; place-items:center; min-height:58vh; }
.ed-hero__stage .demo-phone{ width:clamp(220px,26vw,360px); animation:floaty 7s ease-in-out infinite; }
.ed-hero__stage::after{ content:''; position:absolute; bottom:9%; left:50%; transform:translateX(-50%); width:58%; height:46px; border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.6),transparent 70%); filter:blur(10px); z-index:-1; }
@media(max-width:860px){
  .ed-hero{ grid-template-columns:1fr; min-height:auto; gap:2.5rem; padding-block:2.5rem 1rem; }
  .ed-hero__copy{ max-width:none; }
  .ed-hero__stage{ min-height:auto; }
}

/* FEATURED device — full editorial band, alternating side */
.ed-feature{ display:grid; grid-template-columns:1.12fr .88fr; align-items:center; gap:clamp(2rem,6vw,6rem); padding-block:clamp(3.5rem,8vw,7rem); } /* hardware-presence pass: give the flagship media more of the row (Apple hero-product scale) */
.ed-feature__media{ position:relative; display:grid; place-items:center; min-height:clamp(360px,46vw,560px); }
.ed-feature__media .demo-phone{ width:clamp(200px,22vw,310px); }
.ed-feature__media::after{ content:''; position:absolute; bottom:10%; left:50%; transform:translateX(-50%); width:52%; height:38px; border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%); filter:blur(9px); z-index:-1; }
.ed-feature--rev .ed-feature__media{ order:2; }
.ed-feature__copy{ display:flex; flex-direction:column; gap:1.15rem; max-width:40ch; }
.ed-feature__name{ font-family:var(--fh); font-weight:800; letter-spacing:-.02em; font-size:clamp(1.9rem,3.6vw,3.1rem); line-height:1.02; color:var(--text); margin:0; }
.ed-feature__price{ display:flex; align-items:baseline; gap:.6rem; font-family:var(--fh); }
.ed-feature__price b{ font-size:clamp(1.3rem,2vw,1.7rem); font-weight:700; color:var(--text); }
.ed-feature__price s{ color:var(--text-faint); font-size:var(--fs-base); }
.ed-feature__price span{ color:var(--text-muted); font-size:var(--fs-xs); letter-spacing:.06em; }
.ed-feature__spec{ display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:.4rem; }
.ed-feature__spec div{ display:flex; flex-direction:column; gap:.15rem; }
.ed-feature__spec dt{ font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); }
.ed-feature__spec dd{ font-family:var(--fh); font-weight:600; color:var(--text); margin:0; }
@media(max-width:860px){ .ed-feature{ grid-template-columns:1fr; gap:2rem; } .ed-feature--rev .ed-feature__media{ order:0; } }

/* LINEUP — borderless, large media, negative space (not a card grid) */
.ed-lineup{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.25rem,2.5vw,2.4rem); padding-block:clamp(1rem,3vw,2.5rem) clamp(3rem,7vw,5rem); } /* tighter gap → wider cards (owner markup 2026-06-02) */
.ed-tile{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3rem; text-decoration:none; }
.ed-tile__media{ display:grid; place-items:center; padding:clamp(1rem,3vw,2.2rem) 0; margin-bottom:.5rem; }
.ed-tile__media .demo-phone{ width:clamp(120px,11vw,165px); transition:transform .4s ease; }
.ed-tile:hover .demo-phone{ transform:translateY(-8px); }
.ed-tile__meta{ display:flex; flex-direction:column; align-items:center; gap:.22rem; }
.ed-tile[style*="left"] .ed-tile__meta{ align-items:flex-start; }
.ed-tile__name{ font-family:var(--fh); font-weight:700; font-size:var(--fs-md); color:var(--text); }
.ed-tile__price{ color:var(--text-muted); font-size:var(--fs-sm); }
.ed-tile__tag{ font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-top:.3rem; }
@media(max-width:680px){ .ed-lineup{ grid-template-columns:1fr; gap:1rem; } .ed-tile{ flex-direction:row; justify-content:flex-start; gap:1.4rem; text-align:left; border-top:1px solid var(--border-c); padding-top:1.6rem; } .ed-tile__media{ padding:0; } .ed-tile__media .demo-phone{ width:78px; } .ed-tile__meta{ display:flex; flex-direction:column; gap:.2rem; } }

/* STATEMENT interstitial */
.ed-statement{ padding-block:clamp(3.5rem,8vh,7rem); }
.ed-statement__inner{ max-width:28ch; }
.ed-statement--center .ed-statement__inner{ max-width:20ch; margin-inline:auto; text-align:center; }
.ed-statement .sub{ margin:1.6rem 0 0; max-width:54ch; color:var(--text-muted); font-size:var(--fs-md); font-weight:300; line-height:1.55; }
.ed-statement--center .sub{ margin-inline:auto; }
.ed-statement__cta{ margin-top:2.2rem; }
.ed-statement--center .ed-statement__cta{ display:flex; justify-content:center; }

/* spec strip — dense counterpoint to the sparse statement */
.ed-specs{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,3rem); padding-block:clamp(3rem,6vw,5rem); border-top:1px solid var(--border-c); }
.ed-specs div{ display:flex; flex-direction:column; gap:.5rem; }
.ed-specs dt{ font-size:var(--fs-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); }
.ed-specs dd{ font-family:var(--fh); font-weight:700; font-size:clamp(1.5rem,2.4vw,2.1rem); color:var(--text); margin:0; letter-spacing:-.01em; }
.ed-specs .ed-specs__note{ font-size:var(--fs-sm); color:var(--text-muted); font-weight:400; }
@media(max-width:680px){ .ed-specs{ grid-template-columns:1fr 1fr; gap:2rem; } }

/* editorial FOOTER */
.ed-footer{ border-top:1px solid var(--border-c); padding-block:clamp(3.5rem,8vw,6rem) 2.2rem; margin-top:clamp(3rem,9vw,7rem); }
.ed-footer__top{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.ed-footer__word{ font-family:var(--fh); font-weight:800; letter-spacing:-.03em; font-size:clamp(2rem,5vw,3.4rem); line-height:1; color:var(--text); }
.ed-footer__manifesto{ margin-top:1.3rem; max-width:32ch; color:var(--text-muted); font-weight:300; font-size:var(--fs-md); line-height:1.5; }
.ed-footer__chan{ margin-top:1.8rem; display:flex; gap:1.4rem; }
.ed-footer__chan a{ font-size:var(--fs-sm); color:var(--text-muted); }
.ed-footer__chan a:hover{ color:var(--accent); }
.ed-footer__col h4{ font-family:var(--f); font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint); font-weight:600; margin:0 0 1.1rem; }
.ed-footer__col a{ display:block; padding:.35rem 0; color:var(--text-muted); font-size:var(--fs-base); transition:color .2s; }
.ed-footer__col a:hover{ color:var(--text); }
.ed-footer__legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; margin-top:clamp(2.5rem,6vw,4rem); padding-top:1.6rem; border-top:1px solid var(--border-c); color:var(--text-faint); font-size:var(--fs-xs); }
.ed-footer__legal .links{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.ed-footer__legal a:hover{ color:var(--text-muted); }
@media(max-width:760px){ .ed-footer__top{ grid-template-columns:1fr; gap:2.6rem; } }

/* scroll reveal — subtle cinematic entrance */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } .ed-hero__stage .demo-phone{ animation:none; } }

/* PDP — cinematic stage */
.pdp-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,5rem); align-items:center; padding-block:clamp(2rem,5vw,4rem) clamp(.5rem,1.5vw,1.5rem); }
.pdp-hero__stage{ position:relative; min-height:clamp(360px,46vw,560px); display:grid; place-items:center; }
.pdp-hero__stage .demo-phone{ width:clamp(220px,24vw,330px); }
.pdp-hero__stage::after{ content:''; position:absolute; bottom:8%; left:50%; transform:translateX(-50%); width:54%; height:42px; border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%); filter:blur(10px); z-index:-1; }
@media(max-width:860px){ .pdp-hero{ grid-template-columns:1fr; gap:2rem; } }

/* ── RANGE SECTIONS (Apple-style lineup selection) ──────────────────────── */
.ed-range__head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.6rem 1.5rem; padding-bottom:clamp(1.5rem,3vw,2.5rem); }
.ed-range__title{ font-family:var(--fh); font-weight:800; letter-spacing:-.02em; font-size:clamp(1.7rem,3.4vw,2.8rem); color:var(--text); margin:0; }
.ed-range__note{ color:var(--text-muted); font-size:var(--fs-sm); }
.ed-lineup--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:900px){ .ed-lineup--4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .ed-lineup--4{ grid-template-columns:1fr; } }

/* lead device in a range — larger, sits first */
.ed-tile--lead .ed-tile__media .demo-phone{ width:clamp(140px,13vw,195px); }
.ed-tile--lead .ed-tile__name{ font-size:var(--fs-md); } /* owner markup 2026-06-02: match regular tiles so the lead's price/tag/sub rows line up — "Most chosen" pill is the differentiator */

/* ── STAGGERED REVEAL ───────────────────────────────────────────────────── */
.reveal--stagger > *{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal--stagger.in > *{ opacity:1; transform:none; }
.reveal--stagger.in > *:nth-child(1){ transition-delay:.04s; }
.reveal--stagger.in > *:nth-child(2){ transition-delay:.12s; }
.reveal--stagger.in > *:nth-child(3){ transition-delay:.20s; }
.reveal--stagger.in > *:nth-child(4){ transition-delay:.28s; }
.reveal--stagger.in > *:nth-child(5){ transition-delay:.36s; }
.reveal--stagger.in > *:nth-child(6){ transition-delay:.44s; }
@media(prefers-reduced-motion:reduce){ .reveal--stagger > *{ opacity:1; transform:none; transition:none; } }

/* device parallax wrapper (cursor response, JS-driven) */
.tilt{ transition:transform .35s cubic-bezier(.16,1,.3,1); transform-style:preserve-3d; will-change:transform; }

/* asset slot placeholder marker + image fill */
.asset-slot{ position:relative; }
.asset-slot > img,.asset-slot > video{ width:100%; height:100%; object-fit:cover; display:block; }
.ed-tile__media.asset-slot > img,.ed-tile__media.asset-slot > video{ border-radius:var(--r); }

/* ── CINEMATIC MACRO SEQUENCE (operational detail storytelling) ─────────── */
.ed-macro{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:clamp(320px,42vw,560px); }
.ed-macro + .ed-macro{ border-top:1px solid var(--border-c); }
.ed-macro__media{ position:relative; overflow:hidden; background:#0e0e13; }
.ed-macro__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.4s cubic-bezier(.16,1,.3,1); transform:scale(1.04); }
.ed-macro.in .ed-macro__media img{ transform:scale(1); }
.ed-macro__cap{ display:flex; flex-direction:column; justify-content:center; gap:1rem; padding:clamp(2rem,5vw,4.5rem); }
.ed-macro__step{ font-family:var(--fm); font-size:var(--fs-xs); letter-spacing:.2em; color:var(--text-faint); }
.ed-macro__title{ font-family:var(--fh); font-weight:700; letter-spacing:-.01em; font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1.08; color:var(--text); margin:0; }
.ed-macro__body{ color:var(--text-muted); font-weight:300; font-size:var(--fs-md); line-height:1.55; max-width:42ch; margin:0; }
.ed-macro--rev .ed-macro__media{ order:2; }
@media(max-width:760px){ .ed-macro,.ed-macro--rev{ grid-template-columns:1fr; } .ed-macro--rev .ed-macro__media{ order:0; } .ed-macro__media{ min-height:clamp(240px,60vw,360px); } }

/* ── FULL-BLEED PROVISIONING BAND (image + overlaid statement) ──────────── */
.ed-cover{ position:relative; min-height:clamp(440px,70vh,760px); display:grid; align-items:end; overflow:hidden; }
.ed-cover__media{ position:absolute; inset:0; }
.ed-cover__media img{ width:100%; height:100%; object-fit:cover; }
.ed-cover::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.05) 35%,rgba(0,0,0,.85) 100%); }
.ed-cover__inner{ position:relative; z-index:1; padding:clamp(2.5rem,7vw,6rem) var(--gutter); max-width:var(--max); margin-inline:auto; width:100%; }
.ed-cover__inner .ed-display{ max-width:20ch; }
.ed-cover__inner .sub{ margin:1.4rem 0 0; max-width:50ch; color:rgba(255,255,255,.78); font-weight:300; font-size:var(--fs-md); }

/* ── CLOSING FINALE (crescendo → decompress) ────────────────────────────── */
.ed-finale{ text-align:center; padding-block:clamp(6rem,18vh,14rem); }
.ed-finale__mark{ font-family:var(--fm); font-size:var(--fs-xs); letter-spacing:.4em; text-transform:uppercase; color:var(--text-faint); margin-bottom:clamp(1.5rem,4vw,2.5rem); }
.ed-finale__line{ font-family:var(--fh); font-weight:800; letter-spacing:-.03em; line-height:1.0; font-size:clamp(2.4rem,7vw,5.5rem); color:var(--text); max-width:16ch; margin-inline:auto; }
.ed-finale__sub{ margin:clamp(1.5rem,3vw,2.2rem) auto 0; max-width:46ch; color:var(--text-muted); font-weight:300; font-size:var(--fs-md); }
.ed-finale__cta{ margin-top:clamp(2rem,4vw,3rem); display:flex; gap:1.6rem; justify-content:center; align-items:center; flex-wrap:wrap; }

/* slow ambient drift for cover/hero media (restrained) */
@keyframes drift{ 0%,100%{ transform:scale(1.06) translate3d(0,0,0);} 50%{ transform:scale(1.06) translate3d(0,-1.4%,0);} }
.ed-cover__media img{ animation:drift 22s ease-in-out infinite; }
@media(prefers-reduced-motion:reduce){ .ed-cover__media img,.ed-macro__media img{ animation:none; transform:none; } }

/* ── PHASE 3 — OPERATIONAL READINESS NARRATIVE ──────────────────────────── */

/* "Prepared before arrival" — image + operational manifest (not a checklist UI) */
.ed-prep{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; padding-block:clamp(3.5rem,8vw,6rem); }
.ed-prep__media{ position:relative; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; background:#0e0e13; }
.ed-prep__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s cubic-bezier(.16,1,.3,1); transform:scale(1.05); }
.ed-prep.in .ed-prep__media img{ transform:scale(1); }
.ed-prep__copy .ed-display{ font-size:clamp(1.9rem,3.6vw,3rem); }
.ed-manifest{ list-style:none; margin:clamp(1.6rem,3vw,2.4rem) 0 0; padding:0; }
.ed-manifest li{ display:grid; grid-template-columns:auto 1fr auto; gap:1.1rem; align-items:baseline; padding:.9rem 0; border-top:1px solid var(--border-c); }
.ed-manifest li:last-child{ border-bottom:1px solid var(--border-c); }
.ed-manifest .ix{ font-family:var(--fm); font-size:var(--fs-xs); color:var(--text-faint); }
.ed-manifest .st{ font-family:var(--fh); font-weight:600; font-size:var(--fs-base); color:var(--text); }
.ed-manifest .vf{ font-family:var(--fm); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); white-space:nowrap; }
.ed-manifest .vf::before{ content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--text-muted); margin-right:.5rem; vertical-align:middle; }
@media(max-width:860px){ .ed-prep{ grid-template-columns:1fr; } .ed-prep__media{ aspect-ratio:16/10; } }
@media(max-width:520px){ .ed-manifest li{ grid-template-columns:auto 1fr; } .ed-manifest .vf{ grid-column:2; padding-top:.2rem; } }

/* Software + enablement — editorial modules (not a features table) */
.ed-modules{ border-top:1px solid var(--border-c); margin-top:clamp(2rem,4vw,3rem); }
.ed-module{ display:grid; grid-template-columns:.42fr .58fr; gap:clamp(1rem,4vw,4rem); padding-block:clamp(2rem,4vw,3rem); border-bottom:1px solid var(--border-c); align-items:start; }
.ed-module__k{ font-family:var(--fm); font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint); }
.ed-module__t{ font-family:var(--fh); font-weight:700; font-size:clamp(1.35rem,2.3vw,2rem); color:var(--text); margin:0 0 .55rem; letter-spacing:-.01em; line-height:1.05; }
.ed-module__b{ color:var(--text-muted); font-weight:300; font-size:var(--fs-md); line-height:1.55; max-width:52ch; margin:0; }
@media(max-width:760px){ .ed-module{ grid-template-columns:1fr; gap:.5rem; } }

/* quiet decompression status line before footer */
.ed-status{ text-align:center; padding-block:clamp(4rem,11vh,8rem) clamp(2rem,5vw,3rem); }
.ed-status__dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--text); margin-bottom:clamp(1rem,2vw,1.4rem); box-shadow:0 0 0 4px rgba(255,255,255,.05); }
[data-theme="light"] .ed-status__dot{ box-shadow:0 0 0 4px rgba(0,0,0,.05); }
.ed-status__line{ font-family:var(--fh); font-weight:600; font-size:clamp(1.05rem,2vw,1.5rem); color:var(--text-muted); letter-spacing:-.01em; }

/* slower decompression reveal near the end (cinematic fade) */
.reveal--slow{ transition-duration:1.25s; }
.reveal--slow.in > *{ transition-duration:1.1s; }

/* extend stagger to longer lists (manifest) */
.reveal--stagger.in > *:nth-child(7){ transition-delay:.52s; }
.reveal--stagger.in > *:nth-child(8){ transition-delay:.60s; }
.reveal--stagger.in > *:nth-child(9){ transition-delay:.68s; }
.reveal--stagger.in > *:nth-child(10){ transition-delay:.76s; }

/* ── REAL DEVICE RENDERS (contained, integrated on black) ───────────────── */
/* Strict shared frame: every tile — lead or regular — uses the same fixed height.
   object-fit:contain keeps the full phone visible without cropping or stretching. */
.ed-tile__media{
  height:clamp(250px,30vw,380px);            /* owner markup 2026-06-02: enlarge renders ("too small") */
  min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(.4rem,1.2vw,.75rem);         /* tighter padding → bigger phone in-frame */
  box-sizing:border-box;
}
.ed-tile--lead .ed-tile__media{ height:clamp(250px,30vw,380px); } /* match — uniform frame */
.ed-tile__media .tilt{ display:flex; justify-content:center; align-items:center; width:100%; height:100%; }
.ed-tile__media .tilt img{
  display:block;
  width:auto;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center center;
}
.ed-tile--lead .ed-tile__media .tilt img{ max-height:100%; } /* inherit frame — no override */
@media(max-width:680px){
  .ed-tile__media,.ed-tile--lead .ed-tile__media{ height:180px; padding:.5rem; }
}
.ed-feature__media .tilt img{
  display:block; width:auto; max-width:100%;
  max-height:clamp(360px,52vw,660px); /* hardware-presence pass: larger flagship device imagery */
  object-fit:contain; object-position:center center;
  margin-inline:auto;
}
.pdp-hero__stage .tilt{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:clamp(360px,46vw,560px);
}
.pdp-hero__stage .tilt img{
  display:block; width:auto; height:100%; max-width:100%;
  object-fit:contain; object-position:center center;
}
/* hero compositing — fade the render's studio edge into the page black */
.ed-hero__stage .tilt img{ -webkit-mask-image:linear-gradient(100deg, transparent 0%, #000 20%, #000 100%); mask-image:linear-gradient(100deg, transparent 0%, #000 20%, #000 100%); }
@media(max-width:860px){ .ed-hero__stage .tilt img{ -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 80%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 80%, transparent 100%); } }

/* ── PRODUCTION PHASE — TRUST / COMPARISON / FAQ ────────────────────────── */

/* trust — editorial quotes + quiet proof markers (placeholder copy, swap for real) */
.ed-quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2rem,4vw,4rem); padding-block:clamp(2.5rem,4vw,3.5rem); }
.ed-quote{ display:flex; flex-direction:column; gap:.9rem; padding:clamp(1.4rem,2.5vw,2rem); background:var(--surface-2); border:1px solid var(--border-c); border-radius:var(--r); }
.ed-quote__q{ font-family:var(--fh); font-weight:500; font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.5; color:var(--text); letter-spacing:-.01em; margin:0; }
.ed-quote__a{ font-family:var(--f); font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); font-weight:600; }
@media(max-width:760px){ .ed-quotes{ grid-template-columns:1fr; gap:1.2rem; } }
.ed-trustrow{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem,3vw,2.4rem); padding-block:clamp(1.8rem,3.5vw,2.4rem); border-top:1px solid var(--border-c); margin-top:clamp(1rem,2vw,1.5rem); }
.ed-trustrow span{ font-family:var(--f); font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); font-weight:500; display:inline-flex; align-items:center; gap:.6rem; }
.ed-trustrow span::before{ content:''; width:4px; height:4px; border-radius:50%; background:var(--accent); flex:0 0 auto; }

/* comparison — editorial hairline table, PD column quietly emphasised */
.ed-compare{ width:100%; border-collapse:collapse; margin-top:clamp(1.5rem,3vw,2.5rem); }
.ed-compare th,.ed-compare td{ text-align:left; padding:clamp(.85rem,1.6vw,1.15rem) 1rem; border-bottom:1px solid var(--border-c); vertical-align:top; }
.ed-compare thead th{ font-family:var(--fm); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); font-weight:500; }
.ed-compare thead th.col-pd{ color:var(--text); }
.ed-compare th:first-child,.ed-compare td:first-child{ color:var(--text-muted); font-size:var(--fs-sm); width:30%; }
.ed-compare td{ color:var(--text-muted); font-size:var(--fs-sm); }
.ed-compare td.col-pd{ color:var(--text); font-weight:500; background:color-mix(in srgb, var(--text) 4%, transparent); }
.ed-compare tr td.col-pd:first-of-type{ border-top-left-radius:var(--rs); }
@media(max-width:680px){ .ed-compare th:nth-child(3),.ed-compare td:nth-child(3){ display:none; } }

/* FAQ — native accessible disclosure (works without JS) */
.ed-faq{ border-top:1px solid var(--border-c); margin-top:clamp(1.5rem,3vw,2.5rem); }
.ed-faq details{ border-bottom:1px solid var(--border-c); }
.ed-faq summary{ list-style:none; cursor:pointer; padding:clamp(1.05rem,2vw,1.45rem) 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-family:var(--fh); font-weight:600; font-size:clamp(1.02rem,1.6vw,1.28rem); color:var(--text); }
.ed-faq summary::-webkit-details-marker{ display:none; }
.ed-faq summary::after{ content:'+'; color:var(--text-faint); font-weight:400; font-size:1.4rem; line-height:1; transition:transform .3s ease; flex:0 0 auto; }
.ed-faq details[open] summary::after{ transform:rotate(45deg); }
.ed-faq summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.ed-faq__a{ padding:0 0 clamp(1.05rem,2vw,1.45rem); color:var(--text-muted); font-weight:300; font-size:var(--fs-md); line-height:1.6; max-width:72ch; margin:0; }

/* ── REVEAL FALLBACK — never leave content hidden if JS/IO fails ────────── */
html:not(.js) .reveal,html:not(.js) .reveal--slow{ opacity:1; transform:none; }
html:not(.js) .reveal--stagger > *{ opacity:1; transform:none; }

/* ── A11Y — visible focus on interactive elements ───────────────────────── */
a:focus-visible,button:focus-visible,summary:focus-visible,.finish__sw:focus-visible,.chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }

/* ── PDP STICKY MOBILE BUY BAR (mobile-only conversion affordance) ──────── */
.pdp-stickybar{ position:fixed; left:0; right:0; bottom:0; z-index:900; display:none; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border-strong); transform:translateY(110%); transition:transform .35s cubic-bezier(.16,1,.3,1); }
.pdp-stickybar.show{ transform:none; }
.pdp-stickybar__info{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.pdp-stickybar__name{ font-family:var(--fh); font-weight:600; font-size:var(--fs-sm); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pdp-stickybar__price{ font-family:var(--fh); font-weight:700; color:var(--text); font-size:var(--fs-base); }
.pdp-stickybar .btn{ flex:0 0 auto; height:46px; }
@media(max-width:768px){ .pdp-stickybar{ display:flex; } }
@media(prefers-reduced-motion:reduce){ .pdp-stickybar{ transition:none; } }

/* PDP buy-confidence microline */
.pdp-reassure{ font-size:var(--fs-xs); color:var(--text-faint); letter-spacing:.03em; margin-top:.1rem; }

/* ── REALITY PASS — PROOF / DOCUMENTATION BAND (real-asset-ready) ────────── */
.ed-proofgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.2vw,1.8rem); margin-top:clamp(1.5rem,3vw,2.5rem); }
.ed-proofcard{ margin:0; display:flex; flex-direction:column; }
.ed-proofcard__media{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r); background:#0e0e13; border:1px solid var(--border-c); }
.ed-proofcard__media img{ width:100%; height:100%; object-fit:cover; }
.ed-proofcard figcaption{ display:flex; align-items:baseline; gap:.55rem; margin-top:.75rem; font-family:var(--fh); font-weight:600; font-size:var(--fs-sm); color:var(--text); }
.ed-proofcard figcaption .ix{ font-family:var(--fm); font-weight:400; font-size:var(--fs-xs); color:var(--text-faint); }
.ed-proof__note{ margin-top:clamp(1.4rem,3vw,2.2rem); font-size:var(--fs-xs); color:var(--text-faint); letter-spacing:.04em; }
@media(max-width:860px){ .ed-proofgrid{ grid-template-columns:1fr 1fr; gap:1.2rem; } }
@media(max-width:520px){ .ed-proofgrid{ grid-template-columns:1fr; } }

/* ── REALITY PASS — restrained film grain on operational scenes (not tiles) ─ */
.ed-macro__media::after,.ed-prep__media::after,.ed-cover__media::after,.ed-proofcard__media::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px; }
/* keep the cover's gradient scrim above the grain */
.ed-cover::after{ z-index:1; }
.ed-cover__inner{ z-index:2; }
/* mobile: frame is now fixed height (180px above) — image fills it via height:100% */

/* finish swap crossfade (variant toggle on real renders) */
.finish-img{ transition:opacity .45s cubic-bezier(.16,1,.3,1); }
.finish-img.swapping{ opacity:0; }

/* lazy-load fade (no hard pop-in) — applied via small loader script */
img.is-pending{ opacity:0; }
img.is-loaded{ opacity:1; transition:opacity .8s cubic-bezier(.16,1,.3,1); }

/* ═══ A11Y FIX (M3 2026-05-29; upgraded 2026-06-01 P2 → 44px Apple HIG) touch targets ═══ */
.ed-footer__col a{ display:flex; align-items:center; min-height:44px; padding-block:.3rem; }
.ed-footer__chan a,.ed-footer__legal a{ display:inline-flex; align-items:center; min-height:44px; }
.ed-footer__legal .links{ align-items:center; }
.bc a{ display:inline-block; padding:.4rem 0; }
.pd-nav__links a{ display:inline-flex; align-items:center; min-height:30px; }
.ed-textlink{ display:inline-flex; align-items:center; min-height:44px; padding-block:.25rem; }

/* ═══════════════════════════════════════════════════════════════════════
   CONVERSION POLISH SPRINT — 2026-05-30  (additive · revert = delete to EOF)
   1 hero trust strip · 2 legality line · 4 card decision scaffolding
   6 mobile comparison cards (keep DIY) · 7 animation fallback · 10 type/space
   ═══════════════════════════════════════════════════════════════════════ */

/* 7 — Animation fallback: never leave a blank section when JS is disabled */
html:not(.js) .reveal,
html:not(.js) .reveal--stagger,
html:not(.js) .reveal--slow,
html:not(.js) .reveal--stagger > *,
html:not(.js) .reveal--slow > *{ opacity:1 !important; transform:none !important; }

/* 1 — Hero trust strip */
.ed-trustline{ list-style:none; margin:1.5rem 0 0; padding:0; display:flex;
  flex-wrap:wrap; gap:.45rem 1.05rem; align-items:center; }
.ed-trustline li{ font-family:var(--fh); font-weight:500; font-size:var(--fs-xs);
  letter-spacing:.01em; color:var(--text-muted); display:inline-flex; align-items:center; }
.ed-trustline li::before{ content:""; width:5px; height:5px; border-radius:50%;
  background:var(--accent); opacity:.65; margin-right:.5rem; flex:0 0 auto; }

/* 2 — Legality reassurance */
.ed-legalnote{ margin:.85rem 0 0; max-width:54ch; font-family:var(--f);
  font-size:var(--fs-sm); line-height:1.6; color:var(--text-faint); }

/* 4 — Card decision scaffolding: "who it's for" + default emphasis */
.ed-tile__who{ font-family:var(--f); font-weight:400; font-size:var(--fs-xs);
  line-height:1.5; color:var(--text-muted); margin-top:.25rem; max-width:24ch; }
.ed-tile__pick{ align-self:flex-start; font-family:var(--fm); font-weight:500;
  font-size:calc(var(--fs-xs) * .92); letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-contrast); background:var(--accent); border-radius:var(--r-pill);
  padding:.16rem .55rem; margin-bottom:.35rem; line-height:1.4; }
.ed-tile--default{ border-radius:var(--r);
  background:color-mix(in srgb,var(--text) 4%,transparent);
  box-shadow:0 0 0 1px var(--border-c); padding:1.1rem 1rem 1.3rem; }
.ed-tile--default .ed-tile__name{ color:var(--text); }
@media(max-width:680px){
  .ed-tile--default{ padding:1.4rem 1rem; }
  .ed-tile__meta{ align-items:flex-start; }
}

/* 6 — Mobile comparison: stacked cards, DIY column kept (overrides demo.css:385 hide) */
@media(max-width:680px){
  .ed-compare thead{ display:none; }
  .ed-compare, .ed-compare tbody{ display:block; width:100%; }
  .ed-compare tr{ display:block; border:1px solid var(--border-c); border-radius:var(--rs);
    margin-bottom:1rem; padding:.3rem .25rem .5rem; }
  .ed-compare td{ display:flex; justify-content:space-between; align-items:baseline;
    gap:1.2rem; width:100% !important; border:0; padding:.55rem .85rem; text-align:right; }
  .ed-compare td:first-child{ display:block; text-align:left; font-family:var(--fh);
    font-weight:700; color:var(--text); font-size:var(--fs-sm); width:100% !important;
    border-bottom:1px solid var(--border-c); margin-bottom:.2rem; }
  .ed-compare td:nth-child(3){ display:flex !important; }
  .ed-compare td:not(:first-child)::before{ content:attr(data-label); text-align:left;
    font-family:var(--fm); font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase;
    color:var(--text-faint); flex:1 1 auto; font-weight:500; }
  .ed-compare td.col-pd{ background:color-mix(in srgb,var(--text) 6%,transparent);
    border-radius:var(--r-sm); }
}

/* 10 — Typography & spacing: tame widows / mobile wrapping, lift thin small text */
.ed-display,.ed-range__title,.ed-feature__name,.ed-finale__line,.ed-quote__q{ text-wrap:balance; }
.ed-lede,.sub{ text-wrap:pretty; }
.ed-range__note,.ed-tile__price,.ed-kicker{ font-weight:500; }
@media(max-width:560px){ .ed-trustline{ gap:.4rem .8rem; } }

/* 9 — Footer upgrade: payments/assurance row + labelled contact channels */
.ed-footer__chan-label{ display:block; font-family:var(--fm); font-size:var(--fs-xs);
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:.45rem; }
.ed-footer__pay{ display:flex; flex-wrap:wrap; gap:.45rem 1rem; align-items:center;
  margin-top:clamp(1.6rem,3vw,2.4rem); padding-top:1.2rem; border-top:1px solid var(--border-c); }
.ed-footer__pay span{ font-family:var(--fh); font-weight:500; font-size:var(--fs-xs);
  color:var(--text-muted); display:inline-flex; align-items:center; }
.ed-footer__pay span::before{ content:""; width:5px; height:5px; border-radius:50%;
  background:var(--accent); opacity:.55; margin-right:.5rem; flex:0 0 auto; }

/* ── V2 POLISH — TONAL DEPTH SYSTEM (2026-06-01, recalibrated) ──────────────
   Restores material hierarchy on the deep-graphite base. Bands read as
   distinct charcoal/graphite panels (strictly neutral — no colour), each
   delineated by a hairline + faint top sheen so section transitions feel
   like an intentional material change, not a flat black wall. */

/* Graphite band — first tonal lift above the base */
.pd-band-graphite{
  background:linear-gradient(180deg,#15151b 0%,#101015 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
/* Charcoal band — stronger tonal separation */
.pd-band-charcoal{
  background:linear-gradient(180deg,#21212a 0%,#1a1a21 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
/* Contrast band (editorial detail / module sequences) */
.ed-band--contrast{
  background:#121217;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
/* Hairline section separator */
.pd-sep{ border-top:1px solid rgba(255,255,255,.07); }
/* Section header underline */
.pd-range-sep{ border-bottom:1px solid rgba(255,255,255,.07); padding-bottom:clamp(1.5rem,3vw,2.5rem); margin-bottom:clamp(1.5rem,3vw,2.5rem); }
/* Atmospheric depth on full-width hero regions */
.pd-hero-depth::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 72% 56% at 70% 0%,rgba(255,255,255,.03) 0%,transparent 64%);
  pointer-events:none; z-index:0;
}
/* Lifted neutral card — testimonials / trust blocks */
.pd-card-warm{ background:rgba(255,255,255,.04); }

/* ── UNIFORM PRODUCT LINEUP PEDESTAL (curated, not assembled) ───────────────
   Every device tile — lead or regular, cut-out render or studio shot — sits
   on an identical graphite stage with one soft contact shadow, so footprints
   read uniform and the phones feel placed on a surface, not floating in a void. */
.ed-tile__media{
  position:relative;
  border-radius:var(--r);
  background:radial-gradient(ellipse 66% 54% at 50% 42%,rgba(255,255,255,.055) 0%,transparent 70%);
}
.ed-tile__media::after{
  content:''; position:absolute; left:50%; bottom:11%; transform:translateX(-50%);
  width:54%; height:24px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.62) 0%,transparent 70%);
  filter:blur(8px); z-index:0; pointer-events:none;
}
.ed-tile__media .tilt{ position:relative; z-index:1; }

/* Uniform tile treatment — the lead is marked by its pill + slightly larger
   name, NOT by a heavier bordered box. Keeps the row visually curated. */
.ed-tile--default{ background:transparent; box-shadow:none; padding:0; }

/* Footer support-channel label on its own line (was wrapping to T/O/US) */
.ed-footer__chan{ flex-wrap:wrap; }
.ed-footer__chan-label{ flex:0 0 100%; }

/* ── RANGE TILES — bordered card + soft interior spotlight (grid widths only;
   mobile keeps its row list. Layers over the existing pedestal glow/contact shadow) ── */
@media(min-width:681px){
  /* owner 2026-06-02 hardware-showcase pass ("phones float in oversized containers"):
     wider cards (+~10%) — pull the lineup out to the container's padding edge. Cancelling
     0.6× of the gutter is provably overflow-proof (always leaves 40% of the gutter as
     breathing room at every width, incl. the ~27px gutter at 681px) + tighten inter-card gap. */
  .ed-lineup{ gap:clamp(.7rem,1vw,1rem); margin-inline:calc(var(--gutter) * -0.6); }
  .ed-lineup .ed-tile{
    box-sizing:border-box;
    border-radius:16px;
    padding:.5rem .8rem .8rem; /* owner 2026-06-02 hardware-showcase: trimmed side padding widens the media (phone fills more); vertical trim cuts the dead space above/below the device */
    background:radial-gradient(96% 80% at 50% 73%, rgba(255,255,255,.05), transparent 82%); /* owner 2026-06-02: border removed; glow KEPT. Hardware-presence pass: glow enlarged+softened → ambient floor-light so the device floats (less "box"); NOT stripped */
    transition:transform .35s cubic-bezier(.16,1,.3,1), background .3s ease;
  }
  .ed-lineup .ed-tile:hover{ transform:translateY(-6px); background:radial-gradient(96% 84% at 50% 66%, rgba(255,255,255,.085), transparent 84%); }
  /* baseline-align the 4 cards: reserve a fixed badge slot on every tile so the
     "Most chosen" pill never offsets the lead card's name/price/tag rows
     (owner markup 2026-06-02 "doesn't align with"). */
  .ed-lineup .ed-tile__meta{ position:relative; width:100%; padding-top:1.6rem; gap:.32rem; } /* badge slot + more media→name breathing (hardware-presence pass) */
  .ed-lineup .ed-tile__pick{ position:absolute; top:0; left:50%; transform:translateX(-50%); margin:0; }
  /* owner markup 2026-06-02 "looks shit / make cards 15% bigger sitewide": the live WC
     renders are SQUARE images with a portrait phone floating in transparent margin, so a
     tall frame just floated a tiny phone in dead space. Square the frame (kills the void)
     + scale the render to eat the margin → phones fill the card and read ~15% larger.
     Applies to EVERY .ed-lineup tile = all device ranges on home + shop. */
  .ed-lineup .ed-tile__media{ width:100%; aspect-ratio:4/5; height:auto; min-height:0; overflow:hidden; padding:0; }
  .ed-lineup .ed-tile__media .tilt{ width:100%; height:100%; }
  /* owner 2026-06-02 hardware-showcase pass: the live WC renders are SQUARE cut-outs where
     the phone occupies only ~78% of the height (≈11% transparent margin top+bottom) and ~38%
     of the width, so object-fit:cover alone leaves a dead band above/below the device — the
     "phone floating in an oversized container" the owner flagged. scale() zooms PAST cover
     (frame is overflow:hidden) to eat that margin so the phone fills the frame and reads as
     the hero (~+27% larger vs the prior cover-crop). 1.18 stays just inside the tallest render
     (Pixel 10 Fold Pro, phone = 83% of its square) so the chin never clips; transform-origin
     centre keeps every device framed. Per-image, no phone clipping. */
  .ed-lineup .ed-tile__media .tilt img{ width:100%; height:100%; object-fit:cover; object-position:center 58%; transform:scale(1.18); transform-origin:center; }
  /* eye flow device → name → price: bump name + price slightly. Lead name kept EQUAL to
     regular (the fixed badge slot above does the baseline-alignment) so all 4 cards still line up. */
  .ed-lineup .ed-tile__name,
  .ed-lineup .ed-tile--lead .ed-tile__name{ font-size:clamp(1.18rem,1.02rem + .48vw,1.46rem); letter-spacing:-.012em; }
  .ed-lineup .ed-tile__price{ font-size:var(--fs-base); }
}

/* ════ WS1 (Agent-2 presentation brief) — 2026-06-03 ═══════════════════════════
   Grounding & shadow treatment for the device lineup (home + shop). Apple/Tesla feel:
   keep the ambient radial glow (owner-approved 06-02), ADD a soft cast/contact shadow so
   each device sits on a surface instead of floating in the void. The ≥681px frame is
   aspect-4/5 + overflow:hidden + object-fit:cover, so the shadow lives inside the frame,
   behind the device near its base. Revert: delete this whole WS1 block. */
@media(min-width:681px){
  /* On a near-black cell a DARK cast shadow has no contrast and the owner's fill-the-frame
     crop leaves no room below the device for one. Apple/Tesla ground products on black with a
     LIGHT floor pool — the surface catching rim-light at the device base. Painted as a frame
     background layer (below the render) so it shows through the render's transparent lower
     margin regardless of the exact phone-base position; composes with the tile ambient glow. */
  .ed-lineup .ed-tile__media{
    position:relative;
    background:radial-gradient(58% 26% at 50% 82%, rgba(255,255,255,.14), rgba(255,255,255,.04) 46%, transparent 72%);
    transition:background .35s cubic-bezier(.16,1,.3,1);
  }
  .ed-lineup .ed-tile:hover .ed-tile__media{
    background:radial-gradient(66% 30% at 50% 80%, rgba(255,255,255,.18), rgba(255,255,255,.05) 46%, transparent 74%);
  }
}

/* ════ WS2 (Agent-2 brief) — 2026-06-03: product cards ═════════════════════════
   (a) price as a confident commerce tier; (b) premium image-only hover (device zooms on
   top of the WS1 cover-scale, no layout shift); (c) "View →" affordance revealed on hover
   (desktop) / always on the mobile row-list; (d) mobile pick-pill clip clearance.
   Revert: delete this WS2 block + the AUD-span / ed-tile__cta in inc/devices-feed.php. */
.ed-lineup .ed-tile__price{ color:var(--text); font-weight:700; letter-spacing:-.005em; }
.ed-tile__cur{ color:var(--text-faint); font-weight:500; font-size:.78em; letter-spacing:.05em; }
.ed-tile__media .ed-tile__cta{
  position:absolute; z-index:3; left:50%; bottom:7%; transform:translateX(-50%) translateY(8px);
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--fm); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--text); background:rgba(18,18,22,.82); border:1px solid var(--border-c);
  padding:.32rem .8rem; border-radius:var(--r-pill); pointer-events:none;
  opacity:0; transition:opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.ed-tile__media .ed-tile__cta i{ font-style:normal; transition:transform .25s ease; }
@media(min-width:681px){
  .ed-lineup .ed-tile__media .tilt img{ transition:transform .5s cubic-bezier(.16,1,.3,1); will-change:transform; }
  .ed-lineup .ed-tile:hover .ed-tile__media .tilt img{ transform:scale(1.25); }
  .ed-lineup .ed-tile:hover .ed-tile__cta{ opacity:1; transform:translateX(-50%) translateY(0); }
  .ed-lineup .ed-tile:hover .ed-tile__cta i{ transform:translateX(3px); }
}
@media(max-width:680px){
  .ed-tile__media{ position:relative; }
  .ed-tile__media .ed-tile__cta{ opacity:1; transform:translateX(-50%); bottom:6px; background:rgba(18,18,22,.7); }
  .ed-lineup .ed-tile__pick{ position:static; transform:none; align-self:flex-start; }
  .ed-lineup{ padding-top:1.4rem; }
}
@media(prefers-reduced-motion:reduce){
  .ed-lineup .ed-tile__media .tilt img{ transition:none; }
  .ed-lineup .ed-tile:hover .ed-tile__media .tilt img{ transform:scale(1.18); }
  .ed-tile__media .ed-tile__cta{ transition:opacity .2s ease; }
}

/* ════ WS3 (Agent-2 brief) — 2026-06-03: typography — unify price treatment ═════
   One price treatment across lineup / flagship / PDP: amount near --text @700 (lineup via
   WS2; flagship .ed-feature__price b already 700; PDP b 800→700 in product-v2.php), currency
   a quiet --text-faint suffix (was --text-muted on .ed-feature__price → now matches the
   lineup's .ed-tile__cur). Section-H2 step-down (brief §6) intentionally NOT done: the big
   .ed-statement displays are deliberate "one idea per screen" editorial moments (brief's own
   north-star) + owner-tuned; not a §10 acceptance item. Revert: delete this block. */
.ed-feature__price span{ color:var(--text-faint); }

/* ════ WS4 (Agent-2 brief) — 2026-06-03: trust presentation ════════════════════
   (a) PDP mobile sticky buy bar → SOLID (brief §9 "solid, not glass") — drop the blur.
   (b) Comparison table: the winning Privacy Devices column wins by CLARITY (restrained ✓ +
       weight), the DIY column recedes — no colour, no glow. Revert: delete this WS4 block.
   (Teal strip lives in js/shared.js + product-v2.php; --accent is already white in dark.) */
.pdp-stickybar{ background:var(--card-solid); backdrop-filter:none; -webkit-backdrop-filter:none; }
.ed-compare td:nth-child(2){ color:var(--text-faint); }
@media(min-width:681px){
  .ed-compare td.col-pd{ position:relative; padding-left:2.4rem; font-weight:600; }
  .ed-compare td.col-pd::before{ content:'✓'; position:absolute; left:1rem; top:clamp(.85rem,1.6vw,1.15rem); color:var(--text); font-weight:700; font-size:.95em; }
  .ed-compare thead th.col-pd{ font-weight:700; }
}