/* Eagle XR launch page: styles.
   Layered on purpose: later rules refine earlier ones, so keep the order when editing. */
:root {--ground:#E3E0DA; --ground-2:#D5D1C9; --panel:#F1EFEB; --ink:#1E1D1B; --ink-2:#4A4741; --ink-3:#6A665F;
  --line:#BDB8AE; --accent:#D2530C; --on-accent:#14110E;
  --scan-bg:#1B2530; --rebar:#F07A2A; --cable:#F2C230; --pipe:#5AA7F0;
  --display:"Barlow Condensed","Arial Narrow","Helvetica Neue",sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {--ground:#1F1E1C; --ground-2:#282624; --panel:#2E2C29; --ink:#EEEBE5; --ink-2:#C9C4BB; --ink-3:#A39E95;
    --line:#46423D; --accent:#F07A2A; --on-accent:#14110E;}
}
*, *::before, *::after {box-sizing:inherit}
html {scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce) and (max-width:0px) {
  html {scroll-behavior:auto}
}
body {margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
img {max-width:100%;display:block}
a {color:inherit}
:focus-visible {outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap {width:min(1240px,100% - 40px);margin-inline:auto}
h1, h2, h3 {font-family:var(--display);font-weight:700;line-height:.95;letter-spacing:-.005em;margin:0}
h2 {font-size:clamp(44px,6.4vw,84px)}
h3 {font-size:clamp(28px,3vw,36px);line-height:1.05}
p {margin:0}
.lede {font-size:clamp(18px,1.6vw,21px);color:var(--ink-2);max-width:60ch}
.btn {display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:17px;text-decoration:none;border:0;cursor:pointer}
.btn:hover {filter:brightness(1.07)}
.btn-quiet {background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
section {padding:clamp(64px,10vw,128px) 0}

/* header */
.top {position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap {display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.brand {font-family:var(--display);font-weight:700;font-size:28px;text-decoration:none;line-height:1}
.brand small {font-family:var(--body);font-weight:400;font-size:13px;color:var(--ink-3);margin-left:8px}
.top nav {display:flex;align-items:center;gap:28px;font-size:15px}
.top nav a:not(.btn) {text-decoration:none;color:var(--ink-2)}
.top nav a:not(.btn):hover {color:var(--ink)}
.top .btn {min-height:44px;padding:0 20px;font-size:15px}
@media (max-width:820px) {
  .top nav a:not(.btn) {display:none}
}

/* hero */
.hero {padding-top:clamp(32px,6vw,72px)}
.hero .wrap {display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,72px);align-items:center}
.hero h1 {font-size:clamp(60px,9vw,128px);text-transform:uppercase}
.hero .lede {margin-top:14px}
.hero .detects {margin:22px 0 0;font-family:var(--display);font-weight:700;font-size:clamp(30px,3.6vw,46px);line-height:1.05;color:var(--accent);text-transform:uppercase}
.hero .detects span {white-space:nowrap}
.hero .ctas {display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero .facts {display:flex;flex-wrap:wrap;gap:28px 44px;margin-top:40px;color:var(--ink-3);font-size:14px}
.hero .facts strong {display:block;font-family:var(--display);font-size:30px;font-weight:600;color:var(--ink);line-height:1.1}
@media (max-width:900px) {
  .hero .wrap {grid-template-columns:1fr}
}

/* slice demo */
.slice {position:relative;aspect-ratio:1/1;border-radius:0;overflow:hidden;background:#0B0B0B;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;display:flex;flex-direction:column}
.surface {position:relative;height:17%;background-color:#B9B4AA;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .33 0 0 0 0 .3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
.surface .tag {position:absolute;left:12px;bottom:8px;font-family:var(--body);font-size:12px;line-height:1.4;color:#2A2723;background:rgba(241,239,235,.85);padding:4px 9px;border-radius:999px}
.dev {position:absolute;bottom:0;left:var(--dx,10%);transform:translateX(-43.9%);height:64.6%;aspect-ratio:200/133;filter:drop-shadow(0 5px 6px rgba(0,0,0,.35))}
.dev svg {display:block;width:100%;height:100%}
.view {position:relative;flex:1;display:flex}
.ruler {position:relative;width:11%;color:#9A958D;font-size:12px;border-right:1px solid #2C2C2C}
.ruler span {position:absolute;right:8px;transform:translateY(-50%)}
.ruler span:first-child {transform:none}
.ruler .rlabel {right:auto;left:4px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:11px;letter-spacing:.04em;white-space:nowrap;color:#7E7A73}
.plot {position:relative;flex:1;overflow:hidden;background:#161616}
.plot svg {position:absolute;inset:0;width:100%;height:100%}
.plot .noise {opacity:.28}
.plot .cover {position:absolute;top:0;bottom:0;background:#0B0B0B}
.plot .cover.l {left:0;width:var(--lo,50%)}
.plot .cover.r {left:var(--hi,50%);right:0}
.plot .back {position:absolute;left:12px;top:calc(41.5 / 60 * 100% + 8px);font-family:var(--body);font-size:12px;line-height:1.4;color:#2A2723;background:rgba(241,239,235,.85);padding:4px 9px;border-radius:999px;pointer-events:none}
.plot .line {position:absolute;top:0;bottom:0;left:var(--x,0%);width:2px;margin-left:-1px;background:#B557E0}
.slice .hint {position:absolute;right:12px;top:10px;font-size:12px;color:#2A2723;background:rgba(241,239,235,.85);padding:4px 9px;border-radius:999px;pointer-events:none}
.slice .illus {position:absolute;right:12px;bottom:10px;font-size:11px;color:#9A958D;pointer-events:none}

/* places */
.places {background:var(--ground-2)}
.places .list {font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(34px,5.4vw,72px);line-height:1.02;color:var(--ink-3)}
.places .list span {display:block}
@media (max-width:700px) {
  .places .list span {display:inline}
}
.places .punch .lead {display:block;font-size:clamp(30px,4.2vw,56px);color:var(--ink)}
.places .punch .hit {display:block;margin-top:.12em;white-space:nowrap;font-size:min(16.5vw,150px);line-height:.9;color:var(--accent)}
.places .punch {margin-top:clamp(28px,4vw,48px);font-size:clamp(46px,7.4vw,104px);text-transform:uppercase}

/* problem */
.problem .wrap {display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.problem .wrap.bill {display:block}
.mistake {background:var(--ink);color:var(--ground);border-radius:0;padding:clamp(28px,4vw,52px)}
@media (max-width:820px) {
  .mistake {margin-inline:-20px;padding:44px 20px}
}
.mistake p {margin-top:18px;font-size:19px;line-height:1.45;color:color-mix(in srgb,var(--ground) 80%,var(--ink))}
.mistake p.last {color:var(--ground);font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,42px);line-height:1.02;text-wrap:balance;margin-top:22px}
@media (max-width:820px) {
  .problem .wrap {grid-template-columns:1fr}
}
.bill {margin-top:clamp(56px,8vw,96px)}
.bill-rows {margin-top:10px;border-top:2px solid var(--ink)}
.bill h2 {line-height:.9}
.bill-row {display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:20px;align-items:baseline;padding:22px 0;border-bottom:1px dashed var(--line)}
.bill-row span {font-size:18px;color:var(--ink-2)}
.bill-row strong {font-family:var(--display);font-size:clamp(30px,3.4vw,44px);font-weight:700;text-align:right;line-height:1.05}
@media (max-width:700px) {
  .bill-row {grid-template-columns:1fr;gap:4px}
  .bill-row strong {text-align:left}
}

/* reveal + recordings */
.reveal {background:var(--ink);color:var(--ground)}
.reveal h2 {font-size:min(16.5vw,150px);line-height:.9;white-space:nowrap;text-transform:uppercase}
.reveal .lede {color:color-mix(in srgb,var(--ground) 78%,var(--ink));margin-top:18px}
.shot.main {margin-top:clamp(36px,5vw,56px)}
.vid {position:relative}
.vid img {border:2px dashed #7C8794}
.steps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(40px,6vw,64px);counter-reset:s}
.steps li {list-style:none;border-top:2px solid color-mix(in srgb,var(--ground) 40%,var(--ink));padding-top:18px;counter-increment:s}
.steps li::before {content:counter(s);display:block;font-family:var(--display);font-weight:700;font-size:40px;line-height:1;color:var(--accent);margin-bottom:8px}
.steps {padding:0}
.steps strong {display:block;font-size:19px}
.steps span {color:color-mix(in srgb,var(--ground) 78%,var(--ink));font-size:16px}
@media (max-width:700px) {
  .steps {grid-template-columns:1fr}
}
.specs {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:clamp(40px,6vw,64px)}
.specs div {font-size:15px;color:color-mix(in srgb,var(--ground) 72%,var(--ink))}
.specs strong {display:block;font-family:var(--display);font-size:clamp(36px,4.4vw,56px);line-height:1;color:var(--ground)}
@media (max-width:700px) {
  .specs {grid-template-columns:1fr 1fr}
}

/* apps */
.stores {display:grid;gap:14px}
.store {display:flex;align-items:center;gap:16px;min-height:72px;padding:14px 22px;border-radius:16px;background:var(--ink);color:var(--ground);text-decoration:none}
.store:hover {filter:brightness(1.12)}
.store svg {width:30px;height:30px;flex:none}
.store span {display:flex;flex-direction:column;font-weight:600;font-size:20px;line-height:1.15}
.store small {font-weight:400;font-size:13px;opacity:.8}

/* roles */

/* different */
.gpr-link {display:inline-flex;align-items:center;gap:8px;margin-top:14px;min-height:44px;padding:0 18px;border:1.5px solid var(--ink);border-radius:999px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none}
.gpr-link svg {width:16px;height:16px;flex:none}
@media (hover:hover) {
  .gpr-link:hover {background:var(--ink);color:var(--ground)}
}

/* stories */
.stories .lede {margin-top:16px}
.vframe.wide {aspect-ratio:16/9}
.stories {background:#141414;color:#EEEBE5}
.stories .lede {color:#C9C4BB}
.vhead {margin:40px 0 0;font-family:var(--display);font-weight:700;font-size:clamp(22px,2.2vw,28px);line-height:1.1;color:#EEEBE5}
.nscroll {display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:14px;padding:6px 2px 16px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tile.wide {width:clamp(280px,34vw,440px);aspect-ratio:16/9}
.tile.tall {width:clamp(170px,17vw,230px);aspect-ratio:9/16}
@media (max-width:820px) {
  .tile.wide {width:78vw}
  .tile.tall {width:44vw}
}
.poster {position:relative;flex:none;scroll-snap-align:start;width:clamp(170px,16vw,230px);aspect-ratio:2/3;border:0;padding:18px 16px;cursor:pointer;color:#fff;text-align:left;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.poster::before {content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.75) 100%)}
.poster>* {position:relative}
.p1 {background:radial-gradient(120% 80% at 70% 15%,#E8671C 0%,#5A2108 55%,#140A05 100%)}
.p2 {background:radial-gradient(120% 80% at 30% 15%,#D8D3C6 0%,#4A4A4E 55%,#111214 100%)}
.p3 {background:radial-gradient(120% 80% at 70% 15%,#E4B52E 0%,#5B4210 55%,#141008 100%)}
.p4 {background:radial-gradient(120% 80% at 30% 15%,#3E7BB8 0%,#16304A 55%,#080D14 100%)}
.p5 {background:radial-gradient(120% 80% at 60% 15%,#C21A26 0%,#4E0A0F 55%,#120405 100%)}
.pbadge {position:absolute!important;top:14px;left:16px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.85)}
.ptitle {font-family:var(--display);font-weight:700;font-size:clamp(28px,2.6vw,36px);line-height:.92;text-transform:uppercase;text-wrap:balance}
.ptag {font-size:13px;line-height:1.3;color:rgba(255,255,255,.85)}
.pkind {align-self:flex-start;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.6);padding:2px 8px;border-radius:3px}
@media (hover:hover) {
  .poster:hover {transform:scale(1.05);box-shadow:0 16px 36px rgba(0,0,0,.6);z-index:2}
}
.poster:focus-visible {outline:3px solid var(--accent);outline-offset:3px}
@media (max-width:820px) {
  .poster {width:46vw}
}
.billboard {position:relative;margin-top:36px;min-height:clamp(340px,42vw,520px);display:flex;align-items:flex-end;overflow:hidden;background:#0E0D0C}
.bb-art {position:absolute;inset:0;background:radial-gradient(70% 90% at 78% 30%,rgba(228,181,46,.55) 0%,rgba(210,83,12,.35) 35%,rgba(14,13,12,0) 70%),radial-gradient(40% 50% at 88% 10%,rgba(255,255,255,.18),rgba(255,255,255,0) 70%),linear-gradient(180deg,#1C1A18,#0E0D0C)}
.bb-art::after {content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,13,12,.95) 0%,rgba(14,13,12,.6) 45%,rgba(14,13,12,0) 75%),linear-gradient(0deg,rgba(14,13,12,.9) 0%,rgba(14,13,12,0) 40%)}
.bb-copy {position:relative;padding:clamp(24px,4vw,48px);max-width:620px}
.bb-badge {font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#E4B52E}
.bb-title {margin-top:10px;font-family:var(--display);font-weight:700;font-size:clamp(48px,7vw,96px);line-height:.88;text-transform:uppercase;color:#fff}
.bb-meta {margin-top:14px;font-size:14px;color:#C9C4BB;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bb-new {font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--accent);color:#14110E;padding:3px 8px;border-radius:3px}
.bb-tag {margin-top:10px;font-size:17px;line-height:1.45;color:#EEEBE5}
.bb-ctas {display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.bb-play {display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 24px;border-radius:6px;font-weight:600;font-size:17px;cursor:pointer;text-decoration:none;border:0}
.bb-play {background:#fff;color:#141414}
.bb-play svg {width:22px;height:22px}
@media (hover:hover) {
  .bb-play:hover {background:#E6E6E6}
}
.rank {position:relative;flex:none;display:flex;align-items:flex-end;scroll-snap-align:start;padding-left:clamp(44px,5vw,64px)}
.rnum {position:absolute;left:0;bottom:-.08em;font-family:var(--display);font-weight:700;font-size:clamp(140px,14vw,200px);line-height:1;color:#141414;-webkit-text-stroke:3px #6F6A63;z-index:0;pointer-events:none}
.rank .poster {z-index:1;scroll-snap-align:none}
.psoon {position:absolute!important;top:12px;right:12px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--accent);color:#14110E;padding:3px 7px;border-radius:3px}
.pbadge {max-width:60%}
@media (max-width:820px) {
  .rank {padding-left:40px}
  .rnum {font-size:130px}
  .bb-copy {padding:24px 20px}
}
.sc-wrap {position:relative}
.sc-btn {position:absolute;top:50%;transform:translateY(-60%);z-index:5;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(20,20,20,.82);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.35);transition:opacity .2s}
.sc-btn svg {width:22px;height:22px}
.sc-btn.prev {left:-6px}
.sc-btn.next {right:-6px}
.sc-btn[hidden] {display:none}
@media (hover:hover) {
  .sc-btn:hover {background:rgba(20,20,20,.95)}
}
.sc-wrap.more-r .nscroll, .sc-wrap.more-r .ggrid {-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.sc-wrap.more-l.more-r .nscroll, .sc-wrap.more-l.more-r .ggrid {-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 85%,transparent)}
.sc-wrap.more-l:not(.more-r) .nscroll, .sc-wrap.more-l:not(.more-r) .ggrid {-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%);mask-image:linear-gradient(90deg,transparent,#000 8%)}
.sc-hint {display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:#A39E95}
.sc-dots {display:flex;gap:6px}
.sc-dots i {width:22px;height:3px;border-radius:2px;background:#4A4744;transition:background .2s}
.sc-dots i.on {background:var(--accent)}
.nscroll, .ggrid {scrollbar-width:none}
.nscroll::-webkit-scrollbar, .ggrid::-webkit-scrollbar {display:none}
.stories .qcard p {color:#EEEBE5}
.stories .qcard footer {color:#A39E95}
.stories .qcard footer strong {color:#EEEBE5}
.vmodal {position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px))}
.vmodal[hidden] {display:none}
.vmodal-bg {position:absolute;inset:0;background:rgba(0,0,0,.85)}
.vmodal-box {position:relative;width:min(960px,100%);display:flex;flex-direction:column;align-items:center}
.vmodal-x {position:absolute;top:-6px;right:0;transform:translateY(-100%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.vmodal-player {background:#000;display:flex;align-items:center;justify-content:center}
.vmodal-player.wide {width:100%;aspect-ratio:16/9}
.vmodal-player.tall {height:min(78vh,720px);aspect-ratio:9/16}
.vmodal-player video {width:100%;height:100%;object-fit:contain}
.vmodal-ph {color:#C9C4BB;font-size:15px;border:1px dashed #5A5A5A;padding:10px 16px;border-radius:999px}
.vmodal-title {margin-top:14px;color:#EEEBE5;font-size:15px;text-align:center}

/* gallery */
.ggrid {display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:32px;padding-bottom:16px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}

/* colors */
.colors .wrap {display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.colors img {border-radius:22px;width:100%;height:auto}
.swatches {display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.sw {width:64px;height:64px;border-radius:50%;padding:5px;border:2px solid transparent;background:transparent;cursor:pointer}
.sw span {display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 -6px 10px rgba(0,0,0,.18)}
.sw[aria-pressed="true"] {border-color:var(--ink)}
.picked {margin-top:22px;font-family:var(--display);font-size:clamp(34px,4vw,48px);font-weight:600;line-height:1}
.picked-note {margin-top:6px;color:var(--ink-2)}
@media (max-width:900px) {
  .colors .wrap {grid-template-columns:1fr}
}

/* price */
.price .wrap {display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.card {background:var(--panel);border:2px solid var(--ink);border-radius:26px;padding:clamp(28px,4vw,52px)}
.card .big {font-family:var(--display);font-weight:700;font-size:clamp(72px,9vw,112px);line-height:.9;margin-top:6px}
.card .alt {margin-top:10px;color:var(--ink-2)}
.card .fine {margin-top:4px;font-size:14px;color:var(--ink-3)}
.card hr {border:0;border-top:1px dashed var(--line);margin:26px 0}
.card .btn {width:100%;margin-top:28px}
.pro {margin-top:24px;padding:16px 18px;border-left:4px solid var(--accent);background:var(--ground)}
.pro strong {display:block;font-family:var(--display);font-size:24px;line-height:1.1}
.pro span {display:block;margin-top:6px;font-size:15px;color:var(--ink-2)}
.lots {display:grid;gap:14px;margin-top:24px}
.lot {background:var(--panel);border-radius:18px;padding:22px 24px}
.lot header {display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.lot header strong {font-size:20px}
.lot header span {font-size:14px;color:var(--ink-2)}
.lot p {margin-top:10px;font-size:15px;color:var(--ink-3)}
@media (max-width:900px) {
  .price .wrap {grid-template-columns:1fr}
}

/* heritage */
.heritage .wrap {display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,72px);align-items:end}
@media (max-width:820px) {
  .heritage .wrap {grid-template-columns:1fr}
}

/* faq */
.faq {background:var(--ground-2)}
.faq .wrap {display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,72px)}
.faq details {border-bottom:1px solid var(--line)}
.faq summary {list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-weight:600;font-size:19px;position:relative}
.faq summary::-webkit-details-marker {display:none}
.faq summary::after {content:"+";position:absolute;right:4px;top:16px;font-family:var(--display);font-size:32px;line-height:1;color:var(--accent)}
.faq details[open] summary::after {content:"–"}
.faq details p {padding:0 0 22px;color:var(--ink-2);max-width:62ch}
@media (max-width:820px) {
  .faq .wrap {grid-template-columns:1fr}
}

/* final */
.final {text-align:center}
.final h2 {font-size:clamp(60px,10vw,140px);text-transform:uppercase}
.final p {margin:20px auto 0;color:var(--ink-2)}
.final .slogan {margin-top:18px;font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,34px);line-height:1.1;color:var(--ink)}
.final .btn {margin-top:32px}
footer.foot {border-top:1px solid var(--line);padding:32px 0 calc(32px + 72px)}
footer.foot .wrap {display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:14px;color:var(--ink-3)}
@media (min-width:821px) {
  footer.foot {padding-bottom:32px}
}

/* sticky mobile CTA */
.dock {position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--ground) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);display:none;align-items:center;justify-content:space-between;gap:14px}
.dock span {font-size:14px;color:var(--ink-2);line-height:1.3}
.dock strong {display:block;color:var(--ink);font-size:16px}
.dock .btn {min-height:48px;padding:0 22px;font-size:16px;flex:none}
@media (max-width:820px) {
  .dock {display:flex}
}

/* fixed dark sections (same in light and dark mode) */
.reveal, .mistake {background:#161514;color:#EEEBE5}
.reveal .lede, .steps span {color:#C9C4BB}
.steps li {border-top-color:#4A4744}
.specs div {color:#A39E95}
.specs strong {color:#EEEBE5}
.mistake p {color:#C9C4BB}
.mistake p.last {color:#EEEBE5}

/* design variants */

/* ---------- STREAM: Netflix-style layout ---------- */

/* ---------- PRODUCT: Apple-style product page ---------- */
:root[data-design="apple"] {--ground:#FFFFFF;--ground-2:#F5F5F7;--panel:#F5F5F7;--ink:#1D1D1F;--ink-2:#424245;--ink-3:#6E6E73;--line:#D2D2D7;--accent:#0071E3;--on-accent:#FFFFFF;--display:"Inter","Helvetica Neue",Arial,sans-serif;--body:"Roboto","Helvetica Neue",Arial,sans-serif;color-scheme:light}
:root[data-design="apple"] body {font-size:19px;line-height:1.5;letter-spacing:-.01em}
:root[data-design="apple"] h1, :root[data-design="apple"] h2, :root[data-design="apple"] h3, :root[data-design="apple"] .places .list, :root[data-design="apple"] .places .punch, :root[data-design="apple"] .hero .detects, :root[data-design="apple"] .problem .toll, :root[data-design="apple"] .ptitle, :root[data-design="apple"] .bb-title, :root[data-design="apple"] .gitem figcaption strong, :root[data-design="apple"] .bill-row strong, :root[data-design="apple"] .mistake p.last {font-family:var(--display);text-transform:none;letter-spacing:-.025em;font-weight:700}
:root[data-design="apple"] main>section {padding:clamp(80px,10vw,140px) 0;text-align:center}
:root[data-design="apple"] main>section:nth-of-type(even):not(.reveal):not(.stories) {background:#F5F5F7}
:root[data-design="apple"] .wrap {width:min(980px,100% - 40px)}
:root[data-design="apple"] .hero .wrap, :root[data-design="apple"] .problem .wrap, :root[data-design="apple"] .colors .wrap, :root[data-design="apple"] .price .wrap, :root[data-design="apple"] .faq .wrap {grid-template-columns:1fr!important;justify-items:center}
:root[data-design="apple"] .hero h1 {font-size:clamp(48px,8vw,96px);line-height:1.02}
:root[data-design="apple"] h2 {font-size:clamp(40px,6vw,72px);line-height:1.05}
:root[data-design="apple"] .lede {margin-left:auto;margin-right:auto;font-size:clamp(19px,2vw,24px);color:var(--ink-3)}
:root[data-design="apple"] .hero .detects {font-size:clamp(22px,2.6vw,30px);color:var(--ink)}
:root[data-design="apple"] .hero .ctas, :root[data-design="apple"] .hero .facts {justify-content:center}
:root[data-design="apple"] .hero .wrap {width:min(1120px,100% - 40px)}
:root[data-design="apple"] .hero .wrap>div {width:100%}
:root[data-design="apple"] .hero .slice {margin:24px auto 0;max-width:720px;width:100%;border-radius:0;box-shadow:0 30px 60px -20px rgba(0,0,0,.35)}
:root[data-design="apple"] .hero .facts {gap:28px 56px}
:root[data-design="apple"] .hero .facts strong {font-family:var(--display);font-weight:700;letter-spacing:-.02em}
:root[data-design="apple"] .top {background:rgba(255,255,255,.8);border-bottom:1px solid rgba(0,0,0,.08)}
:root[data-design="apple"] .dock {background:rgba(255,255,255,.85)}
:root[data-design="apple"] .legend {justify-content:center;align-items:center}
:root[data-design="apple"] .btn {border-radius:999px;background:#0071E3;color:#fff;min-height:44px;padding:0 22px;font-size:17px;font-weight:500}
:root[data-design="apple"] .btn:hover {filter:none;background:#0077ED}
:root[data-design="apple"] .btn-quiet {background:transparent;color:#0066CC;border:0;padding:0 8px}
:root[data-design="apple"] .btn-quiet::after {content:" ›"}
:root[data-design="apple"] .places .list {font-size:clamp(26px,4vw,48px);line-height:1.15;color:#86868B;text-wrap:balance;max-width:20ch;margin-left:auto;margin-right:auto}
:root[data-design="apple"] .places .list span {display:inline}
h1, h2, h3, .lede, .bb-tag, .ptitle, .places .list span, .places .punch .lead, .hero .detects, .final p {text-wrap:balance}
:root[data-design="apple"] .places .punch .lead {font-size:clamp(28px,4vw,48px);color:var(--ink)}
:root[data-design="apple"] .places .punch .hit {font-size:clamp(48px,9vw,110px)!important;white-space:normal!important;background:linear-gradient(90deg,#E8671C,#E4B52E);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-design="apple"] .problem ul {justify-items:center}
:root[data-design="apple"] .mistake {border-radius:28px;text-align:center;width:100%;max-width:880px;margin:24px auto 0;padding:clamp(48px,6vw,80px) clamp(24px,5vw,72px);box-sizing:border-box}
:root[data-design="apple"] .mistake h2 {font-size:clamp(36px,5vw,60px);line-height:1.05;text-wrap:balance}
:root[data-design="apple"] .mistake p {margin:20px auto 0;max-width:34ch;font-size:clamp(19px,2vw,24px);line-height:1.4;color:#A1A1A6;text-wrap:balance}
:root[data-design="apple"] .mistake p.last {margin-top:28px;max-width:none;font-size:clamp(26px,3.2vw,40px);line-height:1.1;color:#F5F5F7}
:root[data-design="apple"] .problem ul {gap:4px;margin-top:28px;font-size:clamp(20px,2.2vw,26px);line-height:1.35;color:#6E6E73}
:root[data-design="apple"] .problem .toll {margin-top:28px;font-size:clamp(30px,3.6vw,44px);line-height:1.1;background:linear-gradient(90deg,#E8671C,#E4B52E);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-design="apple"] .problem h2 {text-wrap:balance}
:root[data-design="apple"] .bill-rows, :root[data-design="apple"] .bill .source {text-align:left}
:root[data-design="apple"] .bill-row strong {font-size:clamp(24px,3vw,36px)}
:root[data-design="apple"] .reveal h2 {white-space:normal;font-size:clamp(48px,8vw,96px)}
:root[data-design="apple"] .reveal, :root[data-design="apple"] .stories {background:#000}
:root[data-design="apple"] .shot, :root[data-design="apple"] .steps, :root[data-design="apple"] .specs {text-align:left}
:root[data-design="apple"] .gitem figcaption, :root[data-design="apple"] .faq details, :root[data-design="apple"] .lots, :root[data-design="apple"] .card, :root[data-design="apple"] .qcard, :root[data-design="apple"] .rank, :root[data-design="apple"] .poster {text-align:left}
:root[data-design="apple"] .card {border:0;border-radius:28px;background:#F5F5F7}
:root[data-design="apple"] .lot {border-radius:18px}
:root[data-design="apple"] .gframe {border-radius:22px;border:0;overflow:hidden}
:root[data-design="apple"] .colors img {border-radius:28px}
:root[data-design="apple"] .swatches {justify-content:center}
:root[data-design="apple"] .store {border-radius:14px;background:#000;color:#fff}
:root[data-design="apple"] .faq details {border-bottom-color:#D2D2D7}
:root[data-design="apple"] .ap-fx {opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s ease}
:root[data-design="apple"] .ap-fx.ap-in {opacity:1;transform:none}
@media (prefers-reduced-motion:reduce) and (max-width:0px) {
  :root[data-design="apple"] .ap-fx {opacity:1;transform:none;transition:none}
}

/* shared elements for endorsed layout */
b.em, b.emw {font-weight:inherit;color:inherit}
.endorse {background:#16171A;color:#fff;padding:clamp(40px,6vw,64px) 0}
.endorse .wrap {display:flex;align-items:center;gap:clamp(18px,3vw,32px);flex-wrap:wrap}
.endorse .eagle {width:56px;height:56px;color:#fff;flex:none}
.en-copy {flex:1;min-width:260px}
.en-title {font-family:"Roboto Condensed",var(--display);font-weight:300;font-size:clamp(24px,2.6vw,32px);line-height:1.15;text-transform:none;letter-spacing:0;color:#fff}
.en-title b {font-weight:700}
.en-copy p {margin-top:8px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.9)}
.en-btn {display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1.5px solid #fff;border-radius:4px;color:#fff;text-decoration:none;font-weight:600;font-size:15px}
@media (hover:hover) {
  .en-btn:hover {background:rgba(255,255,255,.12)}
}
.ft-top .eagle {width:44px;height:44px;color:#F26B1D}
.ptbw {position:relative;padding:14px 0;text-align:center;font-family:"Roboto Condensed",var(--body);font-size:15px;line-height:1.3;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.ptbw::before, .ptbw::after {content:"";position:absolute;left:50%;transform:translateX(-50%);width:44px;height:1.5px;background:#F26B1D}
.ptbw::before {top:0}
.ptbw::after {bottom:0}

/* ---------- SET: Screening Eagle endorsed design ---------- */

/* ---------- SET + PRODUCT (generated) ---------- */
:root[data-design="setp"] {--ground:#000;--ground-2:#0E0F11;--panel:#16171A;--ink:#FFFFFF;--ink-2:#C9CBCE;--ink-3:#8C8F94;--line:#2A2C30;--accent:#F26B1D;--on-accent:#111;--teal:#F26B1D;--display:"Roboto Condensed","Arial Narrow",sans-serif;--body:"Roboto","Helvetica Neue",Arial,sans-serif;color-scheme:dark}
:root[data-design="setp"] body {background:#000}
:root[data-design="setp"] h1, :root[data-design="setp"] h2, :root[data-design="setp"] .places .list, :root[data-design="setp"] .places .punch .hit {font-family:var(--display);font-weight:300;text-transform:uppercase;letter-spacing:.005em}
:root[data-design="setp"] b.em {font-weight:700;color:var(--teal)}
:root[data-design="setp"] b.emw {font-weight:700}
:root[data-design="setp"] .eyebrow {display:block;margin-bottom:16px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#F7A23B}
:root[data-design="setp"] .top {background:#000;border-bottom:1px solid #1E1F22}
:root[data-design="setp"] .brand {font-family:var(--display);font-weight:700}
:root[data-design="setp"] .top nav a:not(.btn) {color:#fff}
:root[data-design="setp"] .btn {border-radius:4px;background:var(--accent);color:#111;font-weight:700;font-size:15px;min-height:46px;padding:0 22px}
:root[data-design="setp"] .btn-quiet {background:transparent;border:1.5px solid var(--teal);color:#F7A23B}
:root[data-design="setp"] .hero h1 {font-size:clamp(54px,6.6vw,92px);line-height:.95}
:root[data-design="setp"] .hero .detects {font-family:var(--display);font-weight:700;color:#fff;font-size:clamp(20px,2vw,26px);letter-spacing:.02em}
:root[data-design="setp"] .hero .facts strong {font-family:var(--display);font-weight:700}
:root[data-design="setp"] .hero .slice {box-shadow:0 0 80px rgba(242,107,29,.22)}
:root[data-design="setp"] .places {background:#0E0F11}
:root[data-design="setp"] .places .list {color:#8C8F94;font-size:clamp(26px,3.2vw,40px);line-height:1.1}
:root[data-design="setp"] .places .punch .lead {font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#fff}
:root[data-design="setp"] .places .punch .hit {color:#fff}
:root[data-design="setp"] .problem {background:#000}
:root[data-design="setp"] .problem .toll {font-family:var(--display);color:var(--teal);text-transform:uppercase}
:root[data-design="setp"] .mistake {background:#16171A!important;border:1px solid #26282C}
:root[data-design="setp"] .bill-row strong {font-family:var(--display)}
:root[data-design="setp"] .reveal {background:#F1F1F4!important;color:#111!important}
:root[data-design="setp"] .reveal h2 {color:#111}
:root[data-design="setp"] .reveal b.em {color:var(--teal)}
:root[data-design="setp"] .reveal .lede, :root[data-design="setp"] .shot figcaption, :root[data-design="setp"] .steps span, :root[data-design="setp"] .specs div {color:#444!important}
:root[data-design="setp"] .specs strong {color:#111!important;font-family:var(--display);font-weight:700}
:root[data-design="setp"] .steps li {border-top:2px solid #D9531A!important}
:root[data-design="setp"] .steps li::before {content:counter(s,decimal-leading-zero)!important;color:#D9531A!important;font-family:var(--display)}
:root[data-design="setp"] .steps strong {color:#111}
:root[data-design="setp"] .stories {background:#0B0C0E}
:root[data-design="setp"] .price {background:#0E0F11}
:root[data-design="setp"] .card {background:#16171A;border:1px solid #26282C;border-radius:6px}
:root[data-design="setp"] .lot {background:#16171A;border-radius:6px}
:root[data-design="setp"] .faq {background:#0E0F11}
:root[data-design="setp"] .store {border-radius:6px;background:#16171A;color:#fff;border:1px solid #26282C}
:root[data-design="setp"] .final {background:#000}
:root[data-design="setp"] .final h2 {font-size:clamp(48px,7vw,96px)}
:root[data-design="setp"] .final .eyebrow {margin:0 auto 18px}
:root[data-design="setp"] .final .slogan {font-family:var(--body);font-weight:400;font-size:17px;color:var(--ink-2)}
:root[data-design="setp"] footer.foot {background:#000}
:root[data-design="setp"] .dock {background:#000;border-top:1px solid #1E1F22}
:root[data-design="setp"] .colors {background:#000}
:root[data-design="setp"] main>section {padding:clamp(80px,10vw,140px) 0;text-align:center}
:root[data-design="setp"] .wrap {width:min(980px,100% - 40px)}
:root[data-design="setp"] .hero .wrap, :root[data-design="setp"] .problem .wrap, :root[data-design="setp"] .colors .wrap, :root[data-design="setp"] .price .wrap, :root[data-design="setp"] .faq .wrap {grid-template-columns:1fr!important;justify-items:center}
:root[data-design="setp"] .hero h1 {font-size:clamp(48px,8vw,96px);line-height:1.02}
:root[data-design="setp"] h2 {font-size:clamp(40px,6vw,72px);line-height:1.05}
:root[data-design="setp"] .lede {margin-left:auto;margin-right:auto;font-size:clamp(19px,2vw,24px);color:var(--ink-3)}
:root[data-design="setp"] .hero .ctas, :root[data-design="setp"] .hero .facts {justify-content:center}
:root[data-design="setp"] .hero .wrap {width:min(1120px,100% - 40px)}
:root[data-design="setp"] .hero .wrap>div {width:100%}
:root[data-design="setp"] .hero .slice {margin:24px auto 0;max-width:720px;width:100%;border-radius:0;box-shadow:0 30px 60px -20px rgba(0,0,0,.35)}
:root[data-design="setp"] .hero .facts {gap:28px 56px}
:root[data-design="setp"] .hero .facts strong {font-family:var(--display);font-weight:700;letter-spacing:-.02em}
:root[data-design="setp"] .legend {justify-content:center;align-items:center}
:root[data-design="setp"] .places .list span {display:inline}
:root[data-design="setp"] .mistake {border-radius:28px;text-align:center;width:100%;max-width:880px;margin:24px auto 0;padding:clamp(48px,6vw,80px) clamp(24px,5vw,72px);box-sizing:border-box}
:root[data-design="setp"] .mistake h2 {font-size:clamp(36px,5vw,60px);line-height:1.05;text-wrap:balance}
:root[data-design="setp"] .problem h2 {text-wrap:balance}
:root[data-design="setp"] .bill-rows, :root[data-design="setp"] .bill .source {text-align:left}
:root[data-design="setp"] .bill-row strong {font-size:clamp(24px,3vw,36px)}
:root[data-design="setp"] .reveal h2 {white-space:normal;font-size:clamp(48px,8vw,96px)}
:root[data-design="setp"] .shot, :root[data-design="setp"] .steps, :root[data-design="setp"] .specs {text-align:left}
:root[data-design="setp"] .gitem figcaption, :root[data-design="setp"] .faq details, :root[data-design="setp"] .lots, :root[data-design="setp"] .card, :root[data-design="setp"] .qcard, :root[data-design="setp"] .rank, :root[data-design="setp"] .poster {text-align:left}
:root[data-design="setp"] .lot {border-radius:18px}
:root[data-design="setp"] .gframe {border-radius:22px;border:0;overflow:hidden}
:root[data-design="setp"] .colors img {border-radius:28px}
:root[data-design="setp"] .swatches {justify-content:center}
:root[data-design="setp"] .faq details {border-bottom-color:#D2D2D7}
:root[data-design="setp"] .ap-fx {opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s ease}
:root[data-design="setp"] .ap-fx.ap-in {opacity:1;transform:none}
@media (prefers-reduced-motion:reduce) and (max-width:0px) {
  :root[data-design="setp"] .ap-fx {opacity:1;transform:none;transition:none}
}

/* ---------- SET + PRODUCT hybrid ---------- */
:root[data-design="setp"] .problem, :root[data-design="setp"] .colors, :root[data-design="setp"] .faq {--ground:#F5F5F7;--ground-2:#FFFFFF;--panel:#FFFFFF;--ink:#111111;--ink-2:#3A3A3C;--ink-3:#6E6E73;--line:#D2D2D7;background:#F5F5F7!important;color:#111}
:root[data-design="setp"] .problem h2, :root[data-design="setp"] .colors h2, :root[data-design="setp"] .faq h2 {color:#111}
:root[data-design="setp"] .problem ul {gap:4px;margin-top:24px;font-size:clamp(20px,2.2vw,26px);line-height:1.35;color:#6E6E73;justify-items:center}
:root[data-design="setp"] .problem .toll {margin-top:24px;font-size:clamp(30px,3.6vw,44px);color:var(--teal)}
:root[data-design="setp"] .mistake {--ink:#fff;--ink-2:#C9CBCE;--line:#2A2C30;color:#fff}
:root[data-design="setp"] .mistake p {margin:20px auto 0;max-width:34ch;font-size:clamp(19px,2vw,24px);line-height:1.4;color:#A1A1A6!important}
:root[data-design="setp"] .mistake p.last {margin-top:28px;max-width:none;font-size:clamp(26px,3.2vw,40px);line-height:1.1;color:#fff!important;font-family:var(--display);font-weight:700;text-transform:none}
:root[data-design="setp"] .bill-row span {color:#3A3A3C}
:root[data-design="setp"] .bill-rows {border-top-color:#111}
:root[data-design="setp"] .faq summary {color:#111}
:root[data-design="setp"] .faq details p {color:#3A3A3C}
:root[data-design="setp"] .store {background:#111;color:#fff;border:0;border-radius:14px}
:root[data-design="setp"] .btn {border-radius:999px}
:root[data-design="setp"] .btn-quiet {border-radius:999px}
:root[data-design="setp"] .top {background:rgba(0,0,0,.72);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
:root[data-design="setp"] .hero .slice {box-shadow:0 0 90px rgba(242,107,29,.25)}
:root[data-design="setp"] .hero .detects {font-size:clamp(20px,2.4vw,28px)}
:root[data-design="setp"] .places .list {max-width:22ch;margin-left:auto;margin-right:auto}
:root[data-design="setp"] .places .list span {display:inline}
:root[data-design="setp"] .card, :root[data-design="setp"] .lot {border-radius:22px}
:root[data-design="setp"] .gframe {border-radius:18px}
:root[data-design="setp"] .colors img {border-radius:28px}
:root[data-design="setp"] .card {background:#16171A}
:root[data-design="setp"] .places .punch .hit {white-space:normal!important;font-size:clamp(44px,9vw,110px)!important;line-height:1}
:root[data-design="setp"] .specs strong {white-space:nowrap;font-size:clamp(30px,3.6vw,48px)!important}

/* ---------- SET + PRODUCT: layout QA fixes ---------- */
:root[data-design="setp"] .mistake h2 {color:#fff!important}
:root[data-design="setp"] .places .list {max-width:30ch}
:root[data-design="setp"] .quotes {display:none}
:root[data-design="setp"] .poster .pbadge {display:none}
:root[data-design="setp"] .card .pro {display:none}
:root[data-design="setp"] .card .big {white-space:nowrap;font-size:clamp(56px,13vw,112px)}
:root[data-design="setp"] .final .lede {display:none}
:root[data-design="setp"] .en-title {text-transform:none;font-weight:300;letter-spacing:0}
:root[data-design="setp"] .en-title b {font-weight:700;color:#fff}
:root[data-design="setp"] .endorse {text-align:left}
@media (max-width:820px) {
  :root[data-design="setp"] .top .wrap {gap:12px}
  :root[data-design="setp"] .brand small {display:none}
  :root[data-design="setp"] .top .btn {white-space:nowrap;min-height:40px;padding:0 16px;font-size:14px}
  :root[data-design="setp"] .endorse .wrap {flex-direction:column;align-items:center;text-align:center}
  :root[data-design="setp"] .en-copy {min-width:0}
  :root[data-design="setp"] .en-title {font-size:26px}
  :root[data-design="setp"] .hero .facts {gap:18px 28px}
}

/* ---------- scan demo: techie upgrade ---------- */
.plot .hud .live {color:#FFD27A;letter-spacing:.14em}
.surface .conc {position:absolute;inset:0;width:100%;height:100%;display:block}
.surface::after {content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.22) 48%,transparent 58%);background-size:260% 100%;animation:concSweep 9s ease-in-out infinite}
@keyframes concSweep{0%{background-position:130% 0}100%{background-position:-130% 0}}
.surface .beam {position:absolute;bottom:0;left:var(--dx,10%);transform:translateX(-50%);width:24%;height:12px;z-index:1;pointer-events:none;background:radial-gradient(50% 100% at 50% 100%,rgba(181,87,224,.85),rgba(181,87,224,0))}
.dev {z-index:2}
.surface .conc circle {opacity:.42}
.surface .conc ellipse {opacity:.5}
.dev .led {position:absolute;left:22%;top:31%;width:3.4%;aspect-ratio:1/1;border-radius:50%;background:#3CE0EA;box-shadow:0 0 6px 2px rgba(60,224,234,.85);transform:translate(-50%,-50%);animation:ledBlink 1.4s ease-in-out infinite}
@keyframes ledBlink{50%{opacity:.3}}
.plot svg.noise {width:100%;animation:none}
.plot .cover {z-index:2}
.plot .grid {position:absolute;inset:0;z-index:3;pointer-events:none;background-image:linear-gradient(rgba(247,162,59,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(247,162,59,.06) 1px,transparent 1px);background-size:100% 25%,10% 100%}
.plot .line {z-index:4;box-shadow:0 0 12px 2px rgba(181,87,224,.75)}
.plot .line::before {content:"";position:absolute;top:2px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#C77BF0;box-shadow:0 0 10px #B557E0}
.plot .line::after {content:"";position:absolute;top:0;bottom:0;left:1px;width:48px;background:linear-gradient(90deg,rgba(181,87,224,.32),rgba(181,87,224,0))}
.plot .hud {position:absolute;left:10px;right:10px;top:8px;z-index:5;display:flex;gap:12px;align-items:center;font:600 10px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;color:#F7A23B;pointer-events:none}
.plot .hud .live i {display:inline-block;width:6px;height:6px;border-radius:50%;background:#FF3B5C;margin-right:6px;vertical-align:1px;animation:ledBlink 1s ease-in-out infinite}
.plot .hud .hud-d {color:#8C8F94}
.plot .hud .hud-x {margin-left:auto;color:#D6D8DA;font-variant-numeric:tabular-nums}
.plot .tag {position:absolute;z-index:5;transform:translate(10px,-50%);font:600 10px/1.2 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.04em;color:#fff;background:rgba(8,10,12,.82);border:1px solid rgba(247,162,59,.6);padding:3px 6px;border-radius:3px;white-space:nowrap;opacity:0;transition:opacity .35s ease;pointer-events:none}
.plot .tag b {color:#F7A23B;font-weight:700;margin-right:5px}
.plot .tag::before {content:"";position:absolute;left:-8px;top:50%;width:8px;height:1px;background:rgba(247,162,59,.9)}
.plot .tag.flip {transform:translate(calc(-100% - 10px),-50%)}
.plot .tag.flip::before {left:auto;right:-8px}
.plot .tag.on {opacity:1}
.ruler {font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:11px}
.ruler::after {content:"";position:absolute;right:0;top:0;bottom:0;width:5px;background:repeating-linear-gradient(180deg,#6A6A6A 0 1px,transparent 1px 5%)}
.slice .hint {font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;z-index:3}
.slice .illus {font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;z-index:6}
@media (max-width:600px) {
  .plot .tag {font-size:8.5px;padding:2px 4px}
  .plot .hud {font-size:8.5px;gap:8px;left:6px;right:6px}
  .plot .hud .hud-d {display:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:0px) {
  .surface::after, .dev .led, .plot svg.noise, .plot .hud .live i {animation:none}
}

/* ---------- reserve sheet ---------- */
.rsv {position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center}
.rsv[hidden] {display:none}
.rsv-bg {position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .25s}
.rsv-sheet {position:relative;width:min(560px,100%);max-height:min(92svh,860px);overflow:auto;background:#FFFFFF;color:#111;border-radius:22px 22px 0 0;padding:28px 22px calc(18px + env(safe-area-inset-bottom,0px));transform:translateY(40px);opacity:0;transition:transform .3s ease,opacity .25s ease;font-family:"Roboto","Helvetica Neue",Arial,sans-serif}
.rsv.in .rsv-bg {opacity:1}
.rsv.in .rsv-sheet {transform:none;opacity:1}
@media (min-width:700px) {
  .rsv {align-items:center}
  .rsv-sheet {border-radius:22px;padding:32px 32px 24px}
}
.rsv-x {position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:0;background:#F0F0F2;color:#111;font-size:22px;line-height:1;cursor:pointer}
#rsv-title {font-family:"Roboto Condensed","Arial Narrow",sans-serif;font-weight:700;font-size:30px;line-height:1.05;text-transform:uppercase;letter-spacing:.01em;padding-right:40px;color:#111}
.rsv-step {margin:24px 0 10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#D9531A}
.rsv-regions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rsv-opt, .rsv-sw {font:inherit;color:#111;text-align:left;cursor:pointer;background:#F5F5F7;border:2px solid transparent;border-radius:14px;transition:border-color .15s,background .15s}
.rsv-opt {display:flex;flex-direction:column;gap:2px;padding:12px 14px;min-height:60px}
.rsv-n {font-weight:600;font-size:15px}
.rsv-m {font-size:14px;color:#555}
.rsv-opt.on, .rsv-lot.on, .rsv-sw.on {border-color:#F26B1D;background:#fff}
.rsv-colors {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.rsv-sw {display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px 10px;font-size:12px;font-weight:600;text-align:center}
.rsv-sw i {width:34px;height:34px;border-radius:50%;box-shadow:inset 0 -6px 10px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.08)}
.rsv-opt:disabled, .rsv-sw:disabled {opacity:.45;cursor:not-allowed}
.chip {font-style:normal;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;letter-spacing:.02em}
.chip.low {background:#FFF1E6;color:#B3470C}
.chip.out {background:#EDEDF0;color:#6E6E73}
.chip.wait {background:#FFF1E6;color:#D9531A}
.rsv-wait {margin-top:18px;font-size:16px;line-height:1.5;color:#333}
.rsv-foot {position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom,0px));margin:22px -22px 0;padding:16px 22px 4px;background:linear-gradient(rgba(255,255,255,.92),#fff);border-top:1px solid #ECECEF}
@media (min-width:700px) {
  .rsv-foot {margin:22px -32px 0;padding:16px 32px 0;bottom:-24px}
}
.rsv-sum {display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 12px}
.rsv-sl {font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6E6E73}
.rsv-sum strong {grid-row:1/3;grid-column:2;font-family:"Roboto Condensed","Arial Narrow",sans-serif;font-size:30px;font-weight:700}
.rsv-sd {font-size:14px;font-weight:600}
.rsv-fine {grid-column:1/-1;font-size:12px;color:#6E6E73}
.rsv-go {display:flex!important;width:100%;justify-content:center;margin-top:14px;border-radius:999px!important;background:#F26B1D!important;color:#111!important;font-weight:700}
.rsv-go.is-off {pointer-events:none;opacity:.4}
.brand {white-space:nowrap}
.rsv-foot {background:#fff}
@media (max-width:699px) {
  #rsv-title {font-size:24px}
  .rsv-step {margin:18px 0 8px}
  .rsv-opt {min-height:0;padding:10px 12px}
  .rsv-n {font-size:14px}
  .rsv-m {font-size:13px}
  .rsv-sw {padding:10px 2px 8px;font-size:11px}
  .rsv-sw i {width:28px;height:28px}
  .rsv-sw .chip {font-size:9.5px;padding:1px 5px}
  .rsv-sl, .rsv-fine {display:none}
  .rsv-sum strong {grid-row:auto;font-size:24px}
  .rsv-sd {font-size:13px}
  .rsv-go {margin-top:10px;min-height:48px}
  .rsv-foot {padding-top:12px}
}

/* ---------- language switcher ---------- */
.langsw {position:relative;display:inline-flex}
.lang-btn {display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:600 13px/1 var(--body);cursor:pointer}
.lang-btn svg {width:16px;height:16px}
.lang-menu {position:absolute;right:0;top:calc(100% + 6px);z-index:80;list-style:none;margin:0;padding:6px;min-width:160px;background:#fff;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.lang-menu[hidden] {display:none}
.lang-menu button {display:block;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:8px;background:none;color:#111;font:500 15px/1.2 var(--body);cursor:pointer}
.lang-menu button[aria-current="true"] {background:#F0F0F2;font-weight:700}
@media (hover:hover) {
  .lang-menu button:hover {background:#F5F5F7}
}

/* ---------- sticky bar behaviour ---------- */
.dock {transition:transform .35s ease,opacity .35s ease}
.dock.dock-hide {transform:translateY(110%);opacity:0;pointer-events:none}

/* ---------- design picker collapsed ---------- */

/* ---------- SET + PRODUCT: Apple-clean hero ---------- */
:root[data-design="setp"] body {overflow-x:clip}
:root[data-design="setp"] .hero .lede, :root[data-design="setp"] .hero .facts {display:none}
:root[data-design="setp"] .hero .detects {color:#A1A1A6;font-weight:500;letter-spacing:.04em}
:root[data-design="setp"] .hero .btn-quiet {border:0;background:none;color:#F7A23B;padding:0 6px}
:root[data-design="setp"] .hero .btn-quiet::after {content:" ›";font-size:1.2em}
:root[data-design="setp"] .hero .ctas {gap:18px;align-items:center}
:root[data-design="setp"] .top .btn {min-height:36px;padding:0 16px;font-size:14px}
@media (max-width:820px) {
  :root[data-design="setp"] .top nav a:not(.btn) {display:none}
  :root[data-design="setp"] .top nav {gap:8px}
  :root[data-design="setp"] .lang-btn {padding:0 8px}
}

/* ---------- SET + PRODUCT: cinematic video entry ---------- */
:root[data-design="setp"] .stories {background:linear-gradient(180deg,#000 0,#07080A 60%,#0B0C0E 100%)!important;padding-top:clamp(72px,10vw,120px)!important}
:root[data-design="setp"] .stories>.wrap>h2 {display:block!important}
:root[data-design="setp"] .stories>.wrap::before {content:"Eagle XR Originals";display:block;text-align:center;margin-bottom:14px;font:700 12px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:#F7A23B}
:root[data-design="setp"] .stories .billboard {margin:clamp(32px,5vw,56px) calc(50% - 50vw) 0;width:100vw;max-width:100vw;min-height:clamp(440px,56vw,680px);border-radius:0}
:root[data-design="setp"] .stories .bb-copy {padding-left:max(20px,calc((100vw - 1120px)/2));text-align:left}
:root[data-design="setp"] .stories .bb-ctas {justify-content:flex-start}
:root[data-design="setp"] .stories .bb-meta {justify-content:flex-start}

/* ---------- SET + PRODUCT: focused message set ---------- */
:root[data-design="setp"] .problem ul, :root[data-design="setp"] .problem .toll, :root[data-design="setp"] .problem .bill {display:none}
:root[data-design="setp"] .reveal .shot.main {display:none}
:root[data-design="setp"] .reveal .specs {margin-top:clamp(32px,5vw,48px)}
@keyframes dbpulse{0%,100%{box-shadow:0 12px 34px rgba(0,0,0,.35),0 0 0 0 rgba(232,103,28,.7)}50%{box-shadow:0 12px 34px rgba(0,0,0,.35),0 0 0 10px rgba(232,103,28,0)}}
.db-label {display:inline-flex;align-items:center;gap:6px;margin-right:6px;font-size:13px;letter-spacing:.02em;color:#FFD27A}
.db-label svg {width:16px;height:16px}
@media (max-width:820px) {
  .db-label span {display:none}
}
@media (max-width:420px) {
  .db-label {font-size:0;margin-right:2px}
  .db-label svg {width:18px;height:18px}
}

/* ---------- SET + PRODUCT: story beats & unveils ---------- */
:root[data-design="setp"] .problem .bill {display:block!important;margin-top:clamp(36px,5vw,56px)}
:root[data-design="setp"] .problem .bill>h2 {display:none}
:root[data-design="setp"] .bill-rows {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;border:0;margin:0}
:root[data-design="setp"] .bill-row {display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:8px;padding:28px 20px;border:0;border-radius:22px;background:#fff;text-align:center}
:root[data-design="setp"] .bill-row strong {font-family:var(--display);font-weight:700;font-size:clamp(28px,3.2vw,40px);line-height:1.05;text-transform:none;color:#111}
:root[data-design="setp"] .bill-row:first-child strong {color:#D9531A}
:root[data-design="setp"] .bill-row span {font-size:15px;color:#6E6E73}
:root[data-design="setp"] .problem .source {max-width:70ch;margin:14px auto 0;text-align:center;font-size:12px}
:root[data-design="setp"] .mistake-wrap {margin-top:clamp(36px,5vw,56px)}
:root[data-design="setp"] .mistake>p:not(.last) {display:none}
:root[data-design="setp"] .mistake p.last {margin-top:18px!important;color:#F26B1D!important}
@media (max-width:820px) {
  :root[data-design="setp"] .bill-rows {grid-template-columns:1fr}
}

/* hero object words unveil */
:root[data-design="setp"] .hero .detects span {display:inline-block;opacity:0;transform:translateY(14px);animation:wordIn .7s cubic-bezier(.2,.7,.2,1) forwards,wordGlow 1.6s ease forwards}
:root[data-design="setp"] .hero .detects span:nth-child(1) {animation-delay:.45s,.45s}
:root[data-design="setp"] .hero .detects span:nth-child(2) {animation-delay:.75s,.75s}
:root[data-design="setp"] .hero .detects span:nth-child(3) {animation-delay:1.05s,1.05s}
:root[data-design="setp"] .hero .detects span:nth-child(4) {animation-delay:1.35s,1.35s}
@keyframes wordIn{to{opacity:1;transform:none}}
@keyframes wordGlow{0%{color:#F7A23B;text-shadow:0 0 18px rgba(242,107,29,.6)}100%{color:#F5F5F7;text-shadow:none}}
:root[data-design="setp"] .hero .detects {font-size:clamp(22px,3vw,34px)!important;font-weight:700!important;letter-spacing:.03em!important;line-height:1.15}
:root[data-design="setp"] .bill-row {align-items:center}
:root[data-design="setp"] .bill-row strong, :root[data-design="setp"] .bill-row span {text-align:center!important}
:root[data-design="setp"] .bill-row strong::first-letter {text-transform:uppercase}

/* scan demo unveil */
:root[data-design="setp"] #slab {opacity:0;transform:translateY(40px) scale(.96);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
:root[data-design="setp"] #slab.demo-in {opacity:1;transform:none}
:root[data-design="setp"] #slab .dev {opacity:0;margin-bottom:24px;transition:opacity .6s ease .7s,margin-bottom .7s cubic-bezier(.3,1.4,.5,1) .7s}
:root[data-design="setp"] #slab.demo-in .dev {opacity:1;margin-bottom:0}
@media (prefers-reduced-motion:reduce) and (max-width:0px) {
  :root[data-design="setp"] .hero .detects span {animation:none;opacity:1;transform:none}
  :root[data-design="setp"] #slab, :root[data-design="setp"] #slab .dev {transition:none;opacity:1;transform:none;margin-bottom:0}
}

/* ruler aligned to depth */
.ruler .r0 {transform:none!important;top:2px!important}
.ruler .r40 {transform:none!important;top:auto!important;bottom:2px}

/* specs + built different */
:root[data-design="setp"] .reveal .specs {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
:root[data-design="setp"] .reveal .specs>div {background:#fff;border-radius:22px;padding:26px 24px;text-align:left;display:flex;flex-direction:column;gap:6px}
:root[data-design="setp"] .reveal .specs .sl {font-size:15px;font-weight:600;color:#111}
:root[data-design="setp"] .reveal .specs .sx {font-size:14px;line-height:1.5;color:#5A5A5F}
@media (max-width:820px) {
  :root[data-design="setp"] .reveal .specs {grid-template-columns:1fr}
}

/* availability bars */
.lots-note {font-size:13px;color:var(--ink-3);margin:4px 0 10px}

/* Eagle XR wordmark */
.wm {display:inline-flex;align-items:baseline;font-family:"Roboto","Helvetica Neue",Arial,sans-serif;font-weight:900;letter-spacing:-.025em;text-transform:none;line-height:1}
.wm-e {color:#fff}
.brand .wm {font-size:26px}
.final-wm {display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:clamp(28px,4vw,44px)}
.wm-lg {font-size:clamp(56px,9vw,110px);filter:drop-shadow(0 18px 40px rgba(0,0,0,.6))}
.wm-url {font-family:"Roboto",Arial,sans-serif;font-weight:700;font-size:clamp(14px,1.4vw,18px);color:#8C8F94;letter-spacing:.01em}

/* ---------- SET + PRODUCT: clean first screen ---------- */
:root[data-design="setp"] .hero {padding-top:0}
:root[data-design="setp"] .hero .eyebrow {display:none}
:root[data-design="setp"] .hero .wrap>div:first-child {position:relative;min-height:calc(100svh - 64px);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px 0 72px}
:root[data-design="setp"] .hero .wrap>div:first-child::after {content:"";position:absolute;left:50%;bottom:26px;width:14px;height:14px;margin-left:-7px;border-right:2px solid rgba(255,255,255,.55);border-bottom:2px solid rgba(255,255,255,.55);transform:rotate(45deg);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0) rotate(45deg);opacity:.35}50%{transform:translateY(8px) rotate(45deg);opacity:1}}
@media (prefers-reduced-motion:reduce) and (max-width:0px) {
  :root[data-design="setp"] .hero .wrap>div:first-child::after {animation:none}
}
:root[data-design="setp"] .hero .wrap>div:nth-child(2) {padding-bottom:clamp(24px,4vw,48px)}
:root[data-design="setp"] .top .btn {transition:opacity .3s ease,transform .3s ease}
:root[data-design="setp"] .top.cta-hidden .btn {opacity:0;transform:translateY(-6px);pointer-events:none}
:root[data-design="setp"] .top .btn {max-width:220px;overflow:hidden;white-space:nowrap;transition:opacity .3s ease,max-width .35s ease,padding .35s ease}
:root[data-design="setp"] .top.cta-hidden .btn {max-width:0;padding-left:0;padding-right:0;opacity:0}
@media (max-width:820px) {
  :root[data-design="setp"] .top .btn {display:none}
}
@media (min-width:821px) {
  :root[data-design="setp"] .dock {display:none}
}

/* ---------- problem: statement -> whose problem -> impact ---------- */
:root[data-design="setp"] .mistake-wrap {margin-top:clamp(28px,4vw,44px)!important}
:root[data-design="setp"] .mistake>p:not(.last) {display:block!important;margin:16px auto 0;max-width:40ch;font-size:clamp(16px,1.6vw,19px)!important;line-height:1.45;color:#A1A1A6!important}
:root[data-design="setp"] .problem .bill {margin-top:clamp(28px,4vw,44px)!important}
:root[data-design="setp"] .bill-rows {grid-template-columns:repeat(4,minmax(0,1fr))!important}
:root[data-design="setp"] .bill-row {padding:24px 18px!important;gap:6px!important}
:root[data-design="setp"] .bill-row .ic {display:flex;justify-content:center;color:#F26B1D;margin-bottom:4px}
:root[data-design="setp"] .bill-row .ic svg {width:30px;height:30px}
:root[data-design="setp"] .bill-row strong, :root[data-design="setp"] .bill-row:first-child strong {color:#111!important;font-size:clamp(24px,2.4vw,30px)!important}
:root[data-design="setp"] .bill-row:last-child strong {color:#F26B1D!important}
:root[data-design="setp"] .bill-row:last-child .ic {color:#F26B1D}
:root[data-design="setp"] .bill-row span {font-size:14px!important;line-height:1.45}
@media (max-width:820px) {
  :root[data-design="setp"] .bill-rows {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  :root[data-design="setp"] .bill-row {padding:20px 12px!important}
}

/* impact tiles: four colours */
@media (max-width:820px) {
  :root[data-design="setp"] .bill-row strong, :root[data-design="setp"] .bill-row:first-child strong {font-size:21px!important;white-space:nowrap}
}
:root[data-design="setp"] .bill-row:nth-child(1) strong, :root[data-design="setp"] .bill-row:nth-child(1) .ic {color:#0E8C98!important}
:root[data-design="setp"] .bill-row:nth-child(2) strong, :root[data-design="setp"] .bill-row:nth-child(2) .ic {color:#C08A12!important}
:root[data-design="setp"] .bill-row:nth-child(3) strong, :root[data-design="setp"] .bill-row:nth-child(3) .ic {color:#C21A26!important}
:root[data-design="setp"] .bill-row:nth-child(4) strong, :root[data-design="setp"] .bill-row:nth-child(4) .ic {color:#E8611A!important}
:root[data-design="setp"] .bill-row {border-top:4px solid transparent}
:root[data-design="setp"] .bill-row:nth-child(1) {border-top-color:#F26B1D}
:root[data-design="setp"] .bill-row:nth-child(2) {border-top-color:#E4B52E}
:root[data-design="setp"] .bill-row:nth-child(3) {border-top-color:#C21A26}
:root[data-design="setp"] .bill-row:nth-child(4) {border-top-color:#F26B1D}

/* hero: object words only, slower unveil */
:root[data-design="setp"] .hero .ctas {display:none}
:root[data-design="setp"] .hero .wrap>div:first-child::after {display:none}
:root[data-design="setp"] .hero .detects span {animation-duration:1.4s,3s!important}
:root[data-design="setp"] .hero .detects span:nth-child(1) {animation-delay:.9s,.9s!important}
:root[data-design="setp"] .hero .detects span:nth-child(2) {animation-delay:1.9s,1.9s!important}
:root[data-design="setp"] .hero .detects span:nth-child(3) {animation-delay:2.9s,2.9s!important}
:root[data-design="setp"] .hero .detects span:nth-child(4) {animation-delay:3.9s,3.9s!important}

/* demo now lives in "Now you can know" */
.demo-wrap {margin:clamp(32px,5vw,48px) auto 0;max-width:720px;width:100%}
:root[data-design="setp"] .reveal .demo-wrap .slice {box-shadow:0 30px 60px -24px rgba(0,0,0,.45)}
:root[data-design="setp"] .reveal .demo-note {color:#6E6E73}
:root[data-design="setp"] .reveal .steps {margin-top:clamp(40px,6vw,64px)}

/* impact tiles: no teal, two-line texts */
:root[data-design="setp"] .bill-row:nth-child(1) strong, :root[data-design="setp"] .bill-row:nth-child(1) .ic {color:#E8611A!important}
:root[data-design="setp"] .bill-row:nth-child(1) {border-top-color:#F26B1D!important}
:root[data-design="setp"] .bill-row:nth-child(4) strong, :root[data-design="setp"] .bill-row:nth-child(4) .ic {color:#3E4AA8!important}
:root[data-design="setp"] .bill-row:nth-child(4) {border-top-color:#3E4AA8!important}
:root[data-design="setp"] .bill-row span {display:block;max-width:18ch;margin:0 auto;min-height:2.9em}
:root[data-design="setp"] .bill-row strong {white-space:nowrap}
@media (min-width:821px) {
  :root[data-design="setp"] .bill-row strong, :root[data-design="setp"] .bill-row:first-child strong {font-size:clamp(22px,2.1vw,28px)!important}
}
.slice .illus-chip {position:absolute;left:12px;top:10px;z-index:6;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:#14110E;background:#FFD27A;padding:4px 9px;border-radius:999px;pointer-events:none}

/* showcase after the intro screen */
.showcase .wrap {width:min(1120px,100% - 40px)}
.show-img {width:100%;border-radius:28px;opacity:0;transform:scale(.86);transition:opacity 1.1s ease,transform 1.4s cubic-bezier(.2,.7,.2,1);box-shadow:0 40px 90px -30px rgba(242,107,29,.35)}
.show-img.in {opacity:1;transform:none}
@media (prefers-reduced-motion:reduce) and (max-width:0px) {
  .show-img {opacity:1;transform:none;transition:none}
}
.dock-scar {display:block;color:#F5B840;font-weight:600}

/* ---------- scroll-driven scan intro ---------- */
.scanintro {position:relative;height:300svh;padding:0!important;background:#000}
:root[data-design="setp"] main>section.scanintro {padding:0!important}
.si-sticky {position:sticky;top:64px;height:calc(100svh - 64px);display:flex;align-items:center;overflow:hidden}
.si-inner {display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2.6vh,28px)}
.scanintro .demo-wrap {width:min(640px,60svh,100%);margin:0}
.scanintro .slice {box-shadow:0 0 90px rgba(242,107,29,.22)}

/* ---------- techie impact layer ---------- */
:root[data-design="setp"] .hero .wrap>div:first-child::after {display:none!important}
.scanintro .demo-wrap {width:min(760px,64svh,100%)!important}
.scanintro .slice {box-shadow:0 0 0 1px rgba(242,107,29,.35),0 0 120px rgba(242,107,29,.30)!important}
.plot svg:not(.noise) {filter:saturate(1.25) brightness(1.08)}
.plot .waves {position:absolute;top:0;left:var(--x,100%);width:0;height:0;z-index:3;pointer-events:none}
.plot .waves i {position:absolute;left:0;top:0;width:150%;aspect-ratio:1/1;border:1.5px solid rgba(199,123,240,.55);border-radius:50%;transform:translate(-50%,-50%) scale(.05);opacity:0;animation:emwave 2.4s cubic-bezier(.2,.6,.3,1) infinite}
.plot .waves i {width:0;height:0}
.plot .waves i {width:clamp(220px,46vw,560px);height:clamp(220px,46vw,560px)}
.plot .waves i:nth-child(2) {animation-delay:.8s}
.plot .waves i:nth-child(3) {animation-delay:1.6s}
@keyframes emwave{0%{transform:translate(-50%,-50%) scale(.04);opacity:.9}80%{opacity:.15}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.plot .hudframe {position:absolute;inset:8px;z-index:4;pointer-events:none;background:
 linear-gradient(#F7A23B,#F7A23B) left top/16px 2px no-repeat,linear-gradient(#F7A23B,#F7A23B) left top/2px 16px no-repeat,
 linear-gradient(#F7A23B,#F7A23B) right top/16px 2px no-repeat,linear-gradient(#F7A23B,#F7A23B) right top/2px 16px no-repeat,
 linear-gradient(#F7A23B,#F7A23B) left bottom/16px 2px no-repeat,linear-gradient(#F7A23B,#F7A23B) left bottom/2px 16px no-repeat,
 linear-gradient(#F7A23B,#F7A23B) right bottom/16px 2px no-repeat,linear-gradient(#F7A23B,#F7A23B) right bottom/2px 16px no-repeat;opacity:.8}
.plot .ping {position:absolute;z-index:4;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;pointer-events:none;opacity:0}
.plot .ping.on {animation:ping 1.3s ease-out 1 forwards}
@keyframes ping{0%{opacity:1;box-shadow:0 0 0 0 rgba(242,107,29,.9);transform:scale(.4)}100%{opacity:0;box-shadow:0 0 0 18px rgba(242,107,29,0);transform:scale(1.6)}}
.plot .hud .ascan {width:90px;height:18px;margin-left:10px;opacity:.9}
.plot .line {width:3px!important;box-shadow:0 0 16px 3px rgba(181,87,224,.85),0 0 40px 8px rgba(181,87,224,.35)!important}
@media (max-width:600px) {
  .plot .hud .ascan {width:60px}
}
@media (prefers-reduced-motion:reduce) and (max-width:0px) {
  .plot .waves {display:none}
  .plot .ping.on {animation:none}
}

/* ---------- calmer scan, stronger unveil ---------- */
.plot .waves, .plot .hudframe, .plot .hud .ascan {display:none!important}
.plot .grid {opacity:.35}
.plot .ping.on {animation-duration:1.6s}
.scanintro {--u:0}
.scanintro .demo-wrap {width:min(860px,70svh,100%)!important;transform:scale(calc(.72 + .28 * var(--u)));opacity:calc(.15 + .85 * var(--u));filter:brightness(calc(.4 + .6 * var(--u)));transition:transform .15s linear}
:root[data-design="setp"] .scanintro #slab {opacity:1!important;transform:none!important}
.scanintro .slice {box-shadow:0 0 0 1px rgba(242,107,29,calc(.35 * var(--u))),0 0 calc(160px * var(--u)) rgba(242,107,29,calc(.35 * var(--u)))!important}
.scanintro .si-chips {opacity:var(--u)}
@media (prefers-reduced-motion:reduce) and (max-width:0px) {
  .scanintro .demo-wrap {transform:none;opacity:1;filter:none}
}

/* ---------- digital build-up before the scan ---------- */
.scanintro {--b1:0;--b2:0;--b3:0;--b4:0}
.scanintro .demo-wrap {transform:none!important;opacity:1!important;filter:none!important}
.scanintro .slice {background:transparent!important;overflow:visible}
.scanintro .slice::after {content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background:
 linear-gradient(#F7A23B,#F7A23B) left top/calc(var(--b1) * 100%) 1.5px no-repeat,
 linear-gradient(#F7A23B,#F7A23B) right top/1.5px calc(var(--b1) * 100%) no-repeat,
 linear-gradient(#F7A23B,#F7A23B) right bottom/calc(var(--b1) * 100%) 1.5px no-repeat,
 linear-gradient(#F7A23B,#F7A23B) left bottom/1.5px calc(var(--b1) * 100%) no-repeat;opacity:calc(1 - .55 * var(--b4))}
.scanintro .slice::before {content:"";position:absolute;left:0;right:0;height:2px;top:calc(var(--b2) * 100%);z-index:9;pointer-events:none;background:#F7A23B;box-shadow:0 0 14px 3px rgba(242,107,29,.8);opacity:calc((var(--b2) - var(--b3)) * 1.4)}
.scanintro .view {background:rgba(11,11,11,var(--b2))}
.scanintro .plot {background:rgba(22,22,22,var(--b2))}
.scanintro .plot .cover {background:#000}
.scanintro .plot>svg {opacity:var(--b2)}
.scanintro .plot>svg.noise {opacity:calc(.28 * var(--b2))}
.scanintro .plot .grid {opacity:calc(.5 * var(--b2))!important}
.scanintro .ruler {opacity:var(--b2)}
.scanintro .surface {clip-path:inset(0 calc((1 - var(--b3)) * 100%) 0 0)}
.scanintro .surface::before {content:"";position:absolute;top:0;bottom:0;width:3px;right:calc((1 - var(--b3)) * 100%);z-index:5;background:#F7A23B;box-shadow:0 0 12px 3px rgba(242,107,29,.8);opacity:calc(1 - var(--b4))}
:root[data-design="setp"] .scanintro #slab .dev, .scanintro #slab .dev {opacity:var(--b4)!important;margin-bottom:calc((1 - var(--b4)) * 26px)!important;transition:none!important}
.scanintro .plot .hud, .scanintro .illus-chip, .scanintro .plot .line {opacity:var(--b4)}
.scanintro .si-chips {opacity:var(--b4)}
@media (prefers-reduced-motion:reduce) and (max-width:0px) {
  .scanintro {--b1:1!important;--b2:1!important;--b3:1!important;--b4:1!important}
}

/* ---------- full-width wall on larger screens ---------- */
@media (min-width:821px) {
  .scanintro .si-inner {width:100%;max-width:none}
  .scanintro .demo-wrap {width:100vw!important;max-width:none}
  .scanintro .slice {aspect-ratio:auto;height:calc(100svh - 64px - 110px)}
  .scanintro .ruler {width:min(11%,72px)}
  .scanintro .surface {height:18%}
}
.scanintro .slice::after {inset:0}

/* product showcase */
.show-cap {margin-top:clamp(18px,3vw,28px);font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,38px);line-height:1.1;color:#fff;text-transform:uppercase;letter-spacing:.01em}

/* "Now you can know" leads into the scan */
.knowhead {background:#000;color:#fff;text-align:center;padding:clamp(96px,14vw,160px) 0 clamp(24px,4vw,48px)!important}
.knowhead h2 {color:#fff!important;font-size:clamp(56px,9vw,120px)!important;line-height:.95}
.knowhead b.emw {color:#fff}
:root[data-design="setp"] .reveal {padding-top:clamp(64px,9vw,112px)!important}

/* ---------- wall face -> top-view scanner -> flip into the cut ---------- */
.scanintro {--w:0;--s:0;--f:0}
.scanintro .slice::after, .scanintro .slice::before, .scanintro .surface::before {display:none!important}
.scanintro .surface {clip-path:none!important}
.scanintro .slice {perspective:1400px}
.slice .face {display:none}
.scanintro .slice .face {display:block;position:absolute;inset:0;z-index:7;overflow:hidden;transform-origin:50% 0;transform:rotateX(calc(var(--f) * 88deg)) scale(calc(1.06 - .06 * var(--w)));opacity:calc(var(--w) - var(--f) * var(--f) * 1.2);box-shadow:inset 0 0 120px rgba(0,0,0,.35)}
.scanintro .face-conc {position:absolute;inset:0;width:100%;height:100%}
.scanintro .topdev {position:absolute;left:var(--dx,87%);top:46%;width:clamp(96px,14vw,190px);aspect-ratio:100/90;transform:translate(-50%,-50%) translateY(calc((1 - var(--s)) * -140%)) scale(calc(1.3 - .3 * var(--s)));opacity:calc(var(--s) - var(--f) * 2.4);filter:drop-shadow(0 calc(22px - 14px * var(--s)) calc(30px - 16px * var(--s)) rgba(0,0,0,.45))}
.scanintro .topdev svg {width:100%;height:100%;display:block}
.scanintro .view {transform-origin:50% 0;transform:rotateX(calc((1 - var(--f)) * -80deg));opacity:var(--f)}
.scanintro .surface {opacity:calc(var(--f) * 1.4 - .3)}
:root[data-design="setp"] .scanintro #slab .dev, .scanintro #slab .dev {opacity:calc(var(--f) * 2.4 - 1.4)!important;margin-bottom:0!important}
.scanintro .plot .hud, .scanintro .plot .line, .scanintro .si-chips {opacity:var(--b4)}
.scanintro .illus-chip {z-index:10;opacity:1}
@media (prefers-reduced-motion:reduce) and (max-width:0px) {
  .scanintro {--w:1!important;--s:1!important;--f:1!important}
}
.scanintro .demo-wrap {width:100vw!important;max-width:none}
.scanintro .si-inner {width:100%;max-width:none}
@media (max-width:820px) {
  .scanintro .slice {aspect-ratio:1/1}
}

/* separator between "Walls, slabs, columns:" and the headline */
:root[data-design="setp"] .places .punch .lead {display:block;position:relative;margin-top:clamp(28px,4vw,44px);padding-bottom:clamp(20px,2.6vw,28px);margin-bottom:clamp(20px,2.6vw,28px)}
:root[data-design="setp"] .places .punch .lead::after {content:"";position:absolute;left:50%;bottom:0;width:44px;height:2px;margin-left:-22px;background:#F26B1D;border-radius:2px}
:root[data-design="setp"] .places .punch .hit {display:block}

/* photoreal concrete */
.scanintro, #slab {--conc:url(../assets/concrete-surface-67fbd8.jpg?v=694c0d3ed6)}
.scanintro .slice .face, .scanintro .surface, #slab .surface, .scanintro .view .cutface {background:#A9A39A var(--conc) center/cover no-repeat}
.scanintro .slice .face .face-conc, #slab .surface .conc {display:none}
.scanintro .surface {background-position:center 40%;background-size:120% auto;box-shadow:inset 0 -10px 18px -8px rgba(0,0,0,.45),inset 0 8px 14px -10px rgba(255,255,255,.35)}

/* ---------- clear cut: top view, cut through the scanner, hinge into the slice ---------- */
.scanintro {--c:0}
.scanintro .surface {height:18%!important;opacity:var(--w)!important}
.scanintro .slice .face {clip-path:inset(18% 0 0 0);transform-origin:50% 18%!important;transform:rotateX(calc(var(--f) * 90deg))!important;opacity:calc(var(--w) - var(--f) * var(--f) * 1.15)!important;box-shadow:none!important}
.scanintro .topdev {top:18%!important;z-index:8;opacity:calc(var(--s) - var(--f) * 2.2)!important}
.slice .cutline {display:none}
.scanintro .slice .cutline {display:block;position:absolute;left:0;top:18%;height:2px;margin-top:-1px;width:calc(var(--c) * 100%);z-index:9;background:#F7A23B;box-shadow:0 0 10px 2px rgba(242,107,29,.9),0 0 30px 6px rgba(242,107,29,.35);opacity:calc(var(--c) * 1.2 - var(--b4) * 1.2);pointer-events:none}
.scanintro .slice .cutline::after {content:"";position:absolute;right:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:#E6FBFD;box-shadow:0 0 12px 4px rgba(242,107,29,.9);opacity:calc(1 - var(--c))}
.scanintro .view {transform-origin:50% 0!important;transform:rotateX(calc((1 - var(--f)) * -90deg))!important;opacity:calc(var(--f) * 1.3)!important}
.view .cutface {display:none}
.scanintro .view .cutface {display:block;position:absolute;inset:0;z-index:6;pointer-events:none;filter:brightness(.62) contrast(1.15);opacity:calc(var(--f) - var(--b4) * 1.15)}
.scanintro .view .cutface::after {content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.25) 22%,rgba(0,0,0,.32) 100%)}

/* hero words: sooner and faster */
:root[data-design="setp"] .hero .detects span {animation-duration:.8s,1.6s!important}
:root[data-design="setp"] .hero .detects span:nth-child(1) {animation-delay:.3s,.3s!important}
:root[data-design="setp"] .hero .detects span:nth-child(2) {animation-delay:.7s,.7s!important}
:root[data-design="setp"] .hero .detects span:nth-child(3) {animation-delay:1.1s,1.1s!important}
:root[data-design="setp"] .hero .detects span:nth-child(4) {animation-delay:1.5s,1.5s!important}

/* fold down toward the viewer; concrete behind the scanner opens up */
.scanintro .slice .face {transform:rotateX(calc(var(--f) * -92deg))!important;opacity:calc(var(--w) - var(--f) * 1.25)!important}
.scanintro .surface {-webkit-mask-image:linear-gradient(#000,#000),radial-gradient(ellipse calc(var(--f) * 13%) calc(var(--f) * 170%) at var(--dx,80%) 100%,transparent 70%,#000 100%);-webkit-mask-size:100% 14%,100% 100%;-webkit-mask-position:bottom,center;-webkit-mask-repeat:no-repeat;-webkit-mask-composite:source-over;
mask-image:linear-gradient(#000,#000),radial-gradient(ellipse calc(var(--f) * 13%) calc(var(--f) * 170%) at var(--dx,80%) 100%,transparent 70%,#000 100%);mask-size:100% 14%,100% 100%;mask-position:bottom,center;mask-repeat:no-repeat;mask-composite:add}
.scanintro .slice {background:#000!important}

/* keep the side-view scanner visible: mask only the concrete layer */
.scanintro .surface {background:none!important;-webkit-mask-image:none!important;mask-image:none!important}
.scanintro .surface::before {display:block!important;content:"";position:absolute;inset:0;right:auto;width:100%;z-index:0;opacity:1!important;box-shadow:inset 0 -10px 18px -8px rgba(0,0,0,.45);background:#A9A39A var(--conc) center 40%/120% auto no-repeat;
-webkit-mask-image:linear-gradient(#000,#000),radial-gradient(ellipse calc(var(--f) * 13%) calc(var(--f) * 170%) at var(--dx,80%) 100%,transparent 70%,#000 100%);-webkit-mask-size:100% 14%,100% 100%;-webkit-mask-position:bottom,center;-webkit-mask-repeat:no-repeat;
mask-image:linear-gradient(#000,#000),radial-gradient(ellipse calc(var(--f) * 13%) calc(var(--f) * 170%) at var(--dx,80%) 100%,transparent 70%,#000 100%);mask-size:100% 14%,100% 100%;mask-position:bottom,center;mask-repeat:no-repeat;mask-composite:add}
.scanintro .surface .dev {z-index:2}
.scanintro .surface .beam {z-index:1}

/* steps -> scanners and phones -> specs */
.show-fig {margin:clamp(40px,6vw,64px) auto 0;max-width:1000px;text-align:center}
.reveal .show-cap {color:#111!important;margin-top:clamp(16px,2.4vw,24px)}
.reveal .show-img {box-shadow:0 30px 70px -30px rgba(0,0,0,.5)}

/* block rotation: nothing above the cut once rotated */
.scanintro .surface::before {opacity:calc(1 - var(--f) * 1.35)!important;-webkit-mask-image:none!important;mask-image:none!important}
.scanintro .surface::after {opacity:calc(1 - var(--f) * 1.5)}
.scanintro .surface {box-shadow:none!important}
.scanintro .surface .beam {opacity:var(--b4)}
.scanintro .view {border-top:3px solid #B7B1A6;box-shadow:0 -1px 0 rgba(255,255,255,.25)}

/* ---------- block sequence: wall, scanner, line from under the scanner, below goes black, upper part tilts back ---------- */
.scanintro {--k:0}
.scanintro .slice {background:#000!important;perspective:1200px}

/* lower wall: just goes black */
.scanintro .slice .face {transform:none!important;opacity:calc(var(--w) * (1 - var(--k)))!important;clip-path:inset(18% 0 0 0)}

/* upper wall: tilts backwards around the line */
.scanintro .surface {perspective:900px;opacity:1!important}
.scanintro .surface::before {opacity:var(--w)!important;transform-origin:50% 100%;transform:rotateX(calc(var(--f) * 88deg));-webkit-mask-image:none!important;mask-image:none!important}
.scanintro .surface::after {opacity:calc(var(--w) * (1 - var(--f)))}

/* top-view scanner sits just above the line and rides the tilt */
.scanintro .topdev {top:18%!important;transform-origin:50% 100%!important;transform:translate(-50%,-100%) translateY(calc((1 - var(--s)) * -60%)) scale(calc(1.25 - .25 * var(--s))) scaleY(calc(1 - var(--f) * .95))!important;opacity:calc(var(--s) - var(--f) * 1.6)!important}
:root[data-design="setp"] .scanintro #slab .dev, .scanintro #slab .dev {opacity:calc(var(--f) * 3 - 2)!important}

/* line grows from under the scanner to both sides */
.scanintro .slice .cutline {left:0!important;width:100%!important;clip-path:inset(-20px calc((100% - var(--dx,80%)) * (1 - var(--c))) -20px calc(var(--dx,80%) * (1 - var(--c))));opacity:calc(min(1, var(--c) * 4) - var(--b4) * 1.2)!important}
.scanintro .slice .cutline::after {display:none}

/* the cut surface rotates up into view below the line */
.scanintro .view {transform-origin:50% 0!important;transform:rotateX(calc((1 - var(--f)) * -90deg))!important;opacity:calc(var(--f) * 1.4)!important;border-top-color:rgba(183,177,166,var(--f))!important}
.scanintro .view .cutface {opacity:calc(var(--f) - var(--b4) * 1.15)!important}

/* line left to right; scanner present with the wall; no labels */
.scanintro .slice .cutline {clip-path:inset(-20px calc((1 - var(--c)) * 100%) -20px 0)!important}
.scanintro .slice .cutline::after {display:block!important;right:auto;left:calc(var(--c) * 100% - 5px);opacity:calc(var(--c) * 4 * (1 - var(--c)))}
.scanintro .topdev {transform:translate(-50%,-100%) scaleY(calc(1 - var(--f) * .95))!important;opacity:calc(var(--w) - var(--f) * 1.6)!important}
.scanintro .plot .tag, .scanintro .plot .ping, .scanintro .illus-chip {display:none!important}
.scanintro .topdev {display:none!important}

/* one seamless wall before the cut; warm XR-orange cut line */
.scanintro .slice .face {background-size:100% 100%!important;background-position:0 0!important}
.scanintro .surface::before {background-size:100% calc(100% / .18)!important;background-position:0 0!important;box-shadow:none!important}
.scanintro .surface::after {display:none!important}
.scanintro .slice .cutline {background:linear-gradient(90deg,#F7A23B,#F26B1D 60%,#FFD27A)!important;box-shadow:0 0 10px 2px rgba(242,107,29,.9),0 0 30px 6px rgba(242,107,29,.35)!important}
.scanintro .slice .cutline::after {background:#FFF1D6!important;box-shadow:0 0 12px 4px rgba(242,107,29,.9)!important}
.scanintro .plot .hud {display:none!important}

/* cut runs right to left, like the scan */
.scanintro .slice .cutline {clip-path:inset(-20px 0 -20px calc((1 - var(--c)) * 100%))!important}
.scanintro .slice .cutline::after {left:calc((1 - var(--c)) * 100% - 5px)!important;right:auto!important}
.reveal .steps span {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(13px,3.6vw,16px)!important}
@media (min-width:821px) {
  .reveal .steps span {font-size:15px!important}
}

/* specs: three cards, then the app downloads */
:root[data-design="setp"] .reveal .specs {grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px) {
  :root[data-design="setp"] .reveal .specs {grid-template-columns:1fr}
}
.reveal-stores {display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(28px,4vw,40px)}
:root[data-design="setp"] .reveal-stores .store {background:#111;color:#fff;border:0;border-radius:14px}
:root[data-design="setp"] .reveal .specs strong {font-size:clamp(30px,3vw,44px)!important}

/* no teal glow around the scan; chips in XR colours */
.scanintro .slice {box-shadow:none!important}

/* real scans as a Netflix row */
.scantile {position:relative;flex:none;scroll-snap-align:start;width:clamp(270px,34vw,440px);aspect-ratio:16/9;border:0;padding:0;border-radius:6px;overflow:hidden;cursor:pointer;color:#fff;text-align:left;background-color:#0B0B0B;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.scantile::before {content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.85) 100%)}
.scantile.r1 {background-image:radial-gradient(7% 14% at 18% 28%,#E0701C 0,rgba(224,112,28,0) 100%),radial-gradient(7% 14% at 40% 28%,#E0701C 0,rgba(224,112,28,0) 100%),radial-gradient(7% 14% at 62% 28%,#E0701C 0,rgba(224,112,28,0) 100%),radial-gradient(7% 14% at 84% 28%,#E0701C 0,rgba(224,112,28,0) 100%),linear-gradient(#141414,#0B0B0B)}
.scantile.r2 {background-image:radial-gradient(5% 10% at 30% 35%,#F2B33A 0,rgba(242,179,58,0) 100%),radial-gradient(5% 10% at 70% 50%,#E0701C 0,rgba(224,112,28,0) 100%),linear-gradient(#141414,#0B0B0B)}
.scantile.r3 {background-image:radial-gradient(11% 20% at 50% 42%,#E0701C 0,rgba(224,112,28,0) 100%),linear-gradient(#141414,#0B0B0B)}
.st-name {position:absolute;left:14px;bottom:12px;z-index:1;font-family:var(--display);font-weight:700;font-size:clamp(22px,2.2vw,30px);line-height:1;text-transform:uppercase}
@media (hover:hover) {
  .scantile:hover {transform:scale(1.04);box-shadow:0 14px 34px rgba(0,0,0,.6);z-index:2}
}
.scantile:focus-visible {outline:3px solid var(--accent);outline-offset:3px}
@media (max-width:820px) {
  .scantile {width:78vw}
}
.reveal h2.easy {color:#111!important;font-size:clamp(40px,6vw,80px)!important;line-height:1;text-align:center}
:root[data-design="setp"] .stories>.wrap::before {display:none!important;content:none!important}

/* minimal in-scan labels, one per object type; chips removed */
.scanintro .plot .tag.lbl {display:block!important;background:none!important;border:0!important;padding:0!important;border-radius:0;transform:translate(16px,-50%);font:600 11px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.14em;color:#F5B840;text-shadow:0 1px 8px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.9);opacity:0;transition:opacity .5s ease}
.scanintro .plot .tag.lbl::before {display:none!important}
.scanintro .plot .tag.lbl.on {opacity:1}
.scanintro .si-chips {display:none!important}
@media (max-width:600px) {
  .scanintro .plot .tag.lbl {font-size:10.5px;font-weight:700;letter-spacing:.1em;transform:translate(12px,-50%)}
}
.scanintro .slice .cutline {clip-path:inset(-20px 0 -20px calc((1 - var(--c)) * 100% - 7px))!important}
.scanintro .plot .tag.lbl.lbl-side {transform:translate(0,-50%)!important}
.scanintro .plot .tag.lbl {transform:translate(-50%,0)!important;white-space:nowrap}
.scanintro .plot .tag.lbl.lbl-bw {transform:translate(-50%,-50%)!important}
:root[data-design="setp"] .stories>.wrap>h2, :root[data-design="setp"] .stories>.wrap>.lede {display:none!important}
:root[data-design="setp"] .stories {padding-top:clamp(40px,6vw,72px)!important}
:root[data-design="setp"] .stories .billboard {margin-top:0!important}

/* ---------- cinematic billboard intro ---------- */
.billboard .bb-art {transform:scale(1.18);filter:blur(10px) brightness(.4);transition:transform 2.6s cubic-bezier(.2,.7,.2,1),filter 1.6s ease}
.billboard.bb-in .bb-art {transform:scale(1);filter:none;animation:kenburns 22s ease-in-out 2.6s infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08) translate(-1.5%,-1%)}}
.bb-flare {position:absolute;inset:0;pointer-events:none;background:radial-gradient(28% 40% at 76% 32%,rgba(255,214,140,.55),rgba(255,214,140,0) 70%),radial-gradient(10% 14% at 84% 22%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%);mix-blend-mode:screen;opacity:0;transition:opacity 1.4s ease .6s}
.billboard.bb-in .bb-flare {opacity:1;animation:flare 7s ease-in-out 2s infinite alternate}
@keyframes flare{from{transform:translate(0,0)}to{transform:translate(-4%,3%)}}
.bb-grain {position:absolute;inset:0;pointer-events:none;opacity:.07;background: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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:overlay}
.billboard::before, .billboard::after {content:"";position:absolute;left:0;right:0;height:0;background:#000;z-index:3;transition:height 1.2s cubic-bezier(.7,0,.3,1)}
.billboard::before {top:0}
.billboard::after {bottom:0}
.billboard:not(.bb-in)::before, .billboard:not(.bb-in)::after {height:50%}
.bb-copy {z-index:4}
.bb-copy>* {opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.billboard.bb-in .bb-copy>* {opacity:1;transform:none}
.billboard.bb-in .bb-badge {transition-delay:1.1s}
.billboard.bb-in .bb-title {transition-delay:1.3s}
.billboard.bb-in .bb-meta {transition-delay:1.6s}
.billboard.bb-in .bb-tag {transition-delay:1.8s}
.billboard.bb-in .bb-ctas {transition-delay:2s}
.bb-badge {display:inline-flex!important;align-items:center;gap:8px;font-size:12px!important;letter-spacing:.3em!important;color:#E9E4DA!important}
.bb-xr {font-family:"Roboto",Arial,sans-serif;font-weight:900;font-size:22px;letter-spacing:-.03em;display:inline-flex}
.bb-title {background:linear-gradient(110deg,#fff 0 42%,#FFE3A8 50%,#fff 58% 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent!important;text-shadow:none;filter:drop-shadow(0 6px 30px rgba(0,0,0,.6))}
.billboard.bb-in .bb-title {animation:shine 1.8s ease 2.1s 1 forwards}
@keyframes shine{from{background-position:100% 0}to{background-position:0 0}}
.bb-pill {font-size:11px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border:1px solid rgba(255,255,255,.55);border-radius:3px;color:#EDEBE6}
@media (prefers-reduced-motion:reduce) and (max-width:0px) {
  .billboard .bb-art, .billboard .bb-copy>* {transform:none;filter:none;opacity:1;transition:none}
  .billboard::before, .billboard::after {display:none}
  .bb-flare {opacity:1}
}

/* ---------- compact "Who's it for?" ---------- */
@media (min-width:821px) {
  .bb-copy {max-width:min(980px,70vw)!important}
  .bb-title {font-size:clamp(64px,7vw,112px)!important}
}

/* plays by itself; no scroll pinning */
.scanintro {height:auto!important}
.si-sticky {position:relative!important;top:auto!important;height:calc(100svh - 64px)}
@media (max-width:820px) {
  .si-sticky {height:auto;min-height:0;padding:clamp(32px,8vw,56px) 0}
}
.slice .si-hint {display:none}
.scanintro .slice .si-hint {display:block;position:absolute;right:12px;top:10px;z-index:10;font:600 10px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#14110E;background:rgba(241,239,235,.9);padding:6px 10px;border-radius:999px;opacity:0;transform:translateY(-4px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.scanintro.si-done .slice .si-hint {opacity:1;transform:none}
.scanintro.si-done .slice {cursor:ew-resize}

/* play button unveil */
.demo-wrap {position:relative}
.scanintro .si-play {display:flex;position:absolute;left:50%;top:50%;z-index:20;width:clamp(76px,9vw,104px);height:clamp(76px,9vw,104px);margin:calc(clamp(76px,9vw,104px) / -2) 0 0 calc(clamp(76px,9vw,104px) / -2);border:0;border-radius:50%;cursor:pointer;align-items:center;justify-content:center;color:#14110E;background:linear-gradient(135deg,#F7A23B,#F26B1D);box-shadow:0 0 0 10px rgba(242,107,29,.18),0 18px 50px rgba(0,0,0,.55);transition:transform .25s ease,opacity .4s ease,box-shadow .25s ease;animation:sipulse 2.2s ease-in-out infinite}
.scanintro .si-play svg {width:42%;height:42%;margin-left:6%}
@keyframes sipulse{0%,100%{box-shadow:0 0 0 10px rgba(242,107,29,.18),0 18px 50px rgba(0,0,0,.55)}50%{box-shadow:0 0 0 22px rgba(242,107,29,.06),0 18px 50px rgba(0,0,0,.55)}}
@media (hover:hover) {
  .scanintro .si-play:hover {transform:scale(1.06)}
}
.scanintro.si-playing .si-play, .scanintro.si-done .si-play {opacity:0;pointer-events:none;transform:scale(.8);animation:none}
.scanintro .si-replay {display:inline-flex;position:absolute;left:12px;top:10px;z-index:20;align-items:center;gap:6px;border:0;cursor:pointer;font:600 10px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#14110E;background:rgba(241,239,235,.9);padding:6px 10px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .5s ease}
.scanintro .si-replay svg {width:12px;height:12px}
.scanintro.si-done .si-replay {opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce) and (max-width:0px) {
  .scanintro .si-play {animation:none}
}

/* play / replay control below the animation */
.si-ctrl {display:none}
.scanintro .si-ctrl {display:flex;justify-content:center;margin-top:clamp(14px,2.4vh,22px)}
.scanintro .si-btn {display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px 0 18px;border:0;border-radius:999px;cursor:pointer;font:700 16px/1 var(--body);color:#14110E;background:linear-gradient(135deg,#F7A23B,#F26B1D);box-shadow:0 10px 30px rgba(242,107,29,.25);transition:opacity .3s ease,transform .2s ease}
.scanintro .si-btn svg {width:18px;height:18px}
.scanintro .si-btn:disabled {opacity:.35;cursor:default}
@media (hover:hover) {
  .scanintro .si-btn:not(:disabled):hover {transform:translateY(-1px)}
}
.scanintro .si-btn .i-replay, .scanintro .si-btn .t-replay {display:none}
.scanintro.si-started .si-btn .i-replay, .scanintro.si-started .si-btn .t-replay {display:inline}
.scanintro.si-started .si-btn .i-play, .scanintro.si-started .si-btn .t-play {display:none}
.scanintro .slice .face, .scanintro .view, .scanintro .surface::before, .scanintro .dev {will-change:transform,opacity}

/* ---------- cleaner separations in the Originals section ---------- */
:root[data-design="setp"] .stories {background:#0B0C0E!important}
:root[data-design="setp"] .stories .billboard {background:#0B0C0E}
:root[data-design="setp"] .stories .billboard .bb-art::after {background:linear-gradient(90deg,rgba(11,12,14,.95) 0%,rgba(11,12,14,.55) 45%,rgba(11,12,14,0) 75%),linear-gradient(0deg,#0B0C0E 0%,rgba(11,12,14,.85) 12%,rgba(11,12,14,0) 45%)!important}
:root[data-design="setp"] .stories .nrow {margin-top:clamp(36px,5vw,56px)}
:root[data-design="setp"] .stories .vhead {text-align:left;font-family:var(--body);font-weight:700;font-size:clamp(18px,1.8vw,22px)!important;letter-spacing:0;text-transform:none;margin:0 0 4px;color:#EDEBE6}
:root[data-design="setp"] .stories .sc-hint {margin-top:10px}
:root[data-design="setp"] .stories .sc-hint>span:not(.sc-dots) {display:none}
:root[data-design="setp"] .stories .quotes {display:none}
:root[data-design="setp"] .stories .vhead {font-size:clamp(22px,2.4vw,30px)!important;margin-bottom:8px}

/* sticky price bar only after the scan has played */
.dock.dock-wait {transform:translateY(110%)!important;opacity:0!important;pointer-events:none!important}

/* ---------- subtle hero entry ---------- */
:root[data-design="setp"] .hero h1 {animation:h1in 1s cubic-bezier(.2,.7,.2,1) .1s both}
@keyframes h1in{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
:root[data-design="setp"] .hero h1 b.em {display:inline;background-image:linear-gradient(90deg,rgba(255,255,255,.92) 0 33.4%,#E7B6FF 34.4%,#B557E0 35.4%,#F26B1D 37% 100%);background-size:300% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:conscan 1.2s cubic-bezier(.45,0,.2,1) .9s forwards}
@keyframes conscan{from{background-position:0 0}to{background-position:100% 0}}
:root[data-design="setp"] .hero .detects span:nth-child(1) {animation-delay:2.1s,2.1s!important}
:root[data-design="setp"] .hero .detects span:nth-child(2) {animation-delay:2.5s,2.5s!important}
:root[data-design="setp"] .hero .detects span:nth-child(3) {animation-delay:2.9s,2.9s!important}
:root[data-design="setp"] .hero .detects span:nth-child(4) {animation-delay:3.3s,3.3s!important}
@media (prefers-reduced-motion:reduce) and (max-width:0px) {
  :root[data-design="setp"] .hero h1, :root[data-design="setp"] .hero h1 b.em {animation:none!important}
  :root[data-design="setp"] .hero h1 b.em {background:none;color:#F26B1D!important}
}

/* audiences named with "Now you can know"; no picture section */
.know-who {margin:18px auto 0;max-width:34ch;font-size:clamp(17px,1.8vw,21px);line-height:1.4;color:#A1A1A6;text-align:center}

/* the section after the scan waits until the scan has played */
.reveal.reveal-wait>.wrap {opacity:0;transform:translateY(24px)}
.reveal>.wrap {transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}

/* the finishes image is not repeated in the colours section */
:root[data-design="setp"] .colors .wrap>img, :root[data-design="setp"] .colors img:not(.show-img) {display:none!important}

/* endorsement band without teal */
:root[data-design="setp"] .endorse {border-top:1px solid #2A2C30;border-bottom:1px solid #2A2C30}
.reveal .know-who {color:#6E6E73;text-wrap:balance;max-width:40ch;margin-top:14px}

/* labels only after the scan is done, one after the other */
.scanintro:not(.si-done) .plot .tag.lbl {opacity:0!important;transition:none!important}
.scanintro.si-done .plot .tag.lbl {transition:opacity .5s ease,margin-top .5s ease}
.scanintro.si-done .plot .tag.lbl:not(.on) {margin-top:6px}
.scanintro.si-done .plot .tag.lbl.on {margin-top:0}
.scanintro.si-done .plot .tag.lbl.l1 {transition-delay:.15s}
.scanintro.si-done .plot .tag.lbl.l2 {transition-delay:.55s}
.scanintro.si-done .plot .tag.lbl.l3 {transition-delay:.95s}
.scanintro.si-done .plot .tag.lbl.l4 {transition-delay:1.35s}
.reveal .know-who b {color:#111;font-weight:700}

/* ---------- one light block: places + nobody knows + the four tiles ---------- */
:root[data-design="setp"] .places {--ground:#F5F5F7;--ink:#111;--ink-2:#3A3A3C;--ink-3:#6E6E73;background:#F5F5F7!important;color:#111;padding-bottom:clamp(20px,3vw,32px)!important}
:root[data-design="setp"] .places .list {color:#8A8A8F!important;font-size:clamp(20px,2.6vw,30px)!important}
:root[data-design="setp"] .places .punch .lead {color:#111!important}
:root[data-design="setp"] .places .punch .hit {color:#111!important}
:root[data-design="setp"] .places .punch .hit b.em {color:#F26B1D}
:root[data-design="setp"] .problem {padding-top:clamp(8px,1.5vw,16px)!important}
:root[data-design="setp"] .problem .bill {margin-top:0!important}
.reveal h2.easy b.em {color:#F26B1D}
:root[data-design="setp"] .places .punch .lead {font-family:var(--display)!important;font-weight:700!important;font-size:clamp(22px,3vw,34px)!important;letter-spacing:.03em!important;line-height:1.15;text-transform:uppercase}
:root[data-design="setp"] .reveal h2.easy {font-family:var(--display)!important;font-weight:300!important;text-transform:uppercase!important;font-size:clamp(56px,9vw,120px)!important;line-height:.95!important;letter-spacing:.005em!important;color:#111!important}
:root[data-design="setp"] .reveal h2.easy b.emw {font-weight:700;color:#111}
.bill-kick {text-align:center;margin:0 0 16px;font:700 13px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#6E6E73}
:root[data-design="setp"] .problem .bill>.bill-kick {display:block}
@media (max-width:820px) {
  :root[data-design="setp"] .bill-row strong, :root[data-design="setp"] .bill-row:first-child strong {font-size:clamp(15px,4.6vw,21px)!important}
}
:root[data-design="setp"] .bill-row span {max-width:20ch!important}

/* ---------- scripts for Chinese, Japanese and Hindi ---------- */
html[lang="zh"]:root[data-design="setp"] {--display:"Roboto Condensed","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;--body:"Roboto","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
html[lang="ja"]:root[data-design="setp"] {--display:"Roboto Condensed","Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;--body:"Roboto","Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif}
html[lang="hi"]:root[data-design="setp"] {--display:"Roboto Condensed","Noto Sans Devanagari",sans-serif;--body:"Roboto","Noto Sans Devanagari",sans-serif}
html[lang="zh"] body, html[lang="ja"] body {line-break:strict;word-break:normal}
html[lang="zh"] h1, html[lang="zh"] h2, html[lang="ja"] h1, html[lang="ja"] h2 {letter-spacing:0!important}
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3 {line-height:1.25!important;letter-spacing:0!important}
.lang-menu {max-height:min(70vh,520px);overflow-y:auto}
:root[data-design="setp"] .reveal {transition:background-color .9s ease}
:root[data-design="setp"] .reveal.reveal-wait {background:#000!important}

/* page gate: nothing below the scan until the scanner has appeared */
html.gate main>.scanintro~section, html.gate body>footer, html.gate footer.ft {display:none!important}
html[lang="th"]:root[data-design="setp"] {--display:"Roboto Condensed","Noto Sans Thai",sans-serif;--body:"Roboto","Noto Sans Thai",sans-serif}
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3 {line-height:1.3!important;letter-spacing:0!important}
html[lang="vi"] h1, html[lang="vi"] h2 {line-height:1.12!important}
.hero h1, .hero .detects, .knowhead h2, .reveal h2.easy, .places .punch .hit {min-width:0;max-width:100%}
.endorse .en-copy p+p {margin-top:10px}
.ft-hq {color:var(--ink-3)}

/* clean, centred footer */
footer.foot {padding:clamp(40px,6vw,64px) 0 calc(clamp(28px,4vw,40px) + 88px)!important;border-top:1px solid #1E1F22}
.ft-clean {display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.ft-legal {margin:0;font-size:12px;line-height:1.5;color:var(--ink-3)}
@media (min-width:821px) {
  footer.foot {padding-bottom:clamp(28px,4vw,40px)!important}
}

/* softer hand-over from the sawn concrete to the scan view: a top-down wipe */
.scanintro .view .cutface {opacity:calc(var(--f) * (1 - var(--b4) * .35))!important;-webkit-mask-image:linear-gradient(180deg,transparent calc(var(--b4) * 130% - 30%),#000 calc(var(--b4) * 130%));mask-image:linear-gradient(180deg,transparent calc(var(--b4) * 130% - 30%),#000 calc(var(--b4) * 130%))}
.scanintro .slice .cutline {opacity:calc(min(1, var(--c) * 12) - var(--b4))!important}
.scanintro .view .ruler, .scanintro .view .grid {opacity:calc(.15 + var(--b4) * .85)}

/* cleaner price slogans */
.worth-block {margin-top:4px;text-align:center}
.worth-block p {margin:0}
.wb-1 {font-size:15px;line-height:1.45;color:var(--ink-3)}
.wb-2 {margin-top:6px!important;font-size:17px;line-height:1.4;font-weight:600;color:#fff}
:root[data-design="setp"] .price .card .worth {display:none}
.wb-2 span {white-space:nowrap}
.wb-2 {font-size:clamp(18px,4.6vw,21px)!important;line-height:1.45!important;margin-top:10px!important}

/* subtle captions for the opening of the scan */
.slice .si-cap {display:none}
.scanintro .slice .si-cap {display:inline-flex;align-items:center;gap:7px;position:absolute;left:12px;z-index:11;padding:5px 10px 5px 8px;border-radius:999px;background:rgba(10,10,10,.42);border:1px solid rgba(255,255,255,.14);font:600 10px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.88);pointer-events:none;white-space:nowrap}
.scanintro .slice .si-cap::before {content:"";width:6px;height:6px;border-radius:50%;flex:none}
.scanintro .slice .cap-surface {top:14px;opacity:calc(var(--w) - var(--c) * 1.7);transform:translateY(calc(var(--c) * -6px))}
.scanintro .slice .cap-surface::before {background:#C9C4BC}
.scanintro .slice .cap-slice {top:calc(18% + 12px);opacity:calc(min(1, var(--c) * 3) - var(--b4) * 1.8);transform:translateY(calc((1 - min(1, var(--c) * 3)) * -6px))}
.scanintro .slice .cap-slice::before {background:#F26B1D;box-shadow:0 0 8px 2px rgba(242,107,29,.7)}
@media (prefers-reduced-motion:reduce) and (max-width:0px) {
  .scanintro .slice .si-cap {display:none}
}

/* no seam before the cut, and lighter rendering for smooth playback */
.slice .face {clip-path:inset(calc(18% - 1px) 0 0 0)!important}
.scanintro .slice .si-cap {background:rgba(10,10,10,.55)}
#slab {contain:layout paint}
#slab .face, #slab .view, #slab .cutface, #slab .cutline, #slab .si-cap {will-change:transform,opacity;backface-visibility:hidden}

/* GPU-friendly scan: covers move with transforms, wipe uses a rectangular clip */
.scanintro .plot .cover.l {width:100%!important;transform-origin:0 0;transform:scaleX(var(--lon,.5));will-change:transform}
.scanintro .plot .cover.r {left:0!important;right:0!important;transform-origin:100% 0;transform:scaleX(calc(1 - var(--hin,.5)));will-change:transform}
.scanintro .plot>svg {will-change:transform;transform:translateZ(0)}
.scanintro .view .cutface {-webkit-mask-image:none!important;mask-image:none!important;clip-path:inset(calc(var(--b4) * 100%) 0 0 0)}
.scanintro .plot .line {left:0!important;transform:translate3d(var(--xpx,0px),0,0);will-change:transform}

/* laser cut drawn with transforms only */
.scanintro .slice .cutline {clip-path:none!important;transform-origin:100% 50%;transform:scaleX(var(--c));will-change:transform,opacity}
.scanintro .slice .cutline::after {display:none!important}
.slice .cutdot {display:none}
.scanintro .slice .cutdot {display:block;position:absolute;left:0;top:18%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;z-index:10;background:#FFF1D6;box-shadow:0 0 12px 4px rgba(242,107,29,.9);pointer-events:none;transform:translate3d(var(--cdx,0px),0,0);opacity:calc(var(--c) * 4 * (1 - var(--c)));will-change:transform,opacity}
.view .wipeedge {display:none}
.scanintro .view .wipeedge {display:block;position:absolute;left:0;right:0;top:0;height:56px;z-index:6;pointer-events:none;background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 45%,rgba(0,0,0,0) 100%);transform:translate3d(0,var(--wy,0px),0);opacity:calc(min(1, var(--b4) * 20) * (1 - var(--b4)) * 1.4);will-change:transform,opacity}

/* ---------- Limited edition teaser ---------- */
.ltd {background:#000;padding:clamp(48px,7vw,96px) 0}
.le-card {position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,4vw,56px);padding:clamp(32px,5vw,64px);border-radius:22px;border:1px solid #26282C;background:radial-gradient(120% 90% at 18% 70%,rgba(242,107,29,.16),rgba(0,0,0,0) 60%),radial-gradient(80% 80% at 90% 10%,rgba(245,184,64,.08),rgba(0,0,0,0) 60%),#0B0B0D}
.le-sweep {position:absolute;top:-20%;bottom:-20%;left:0;width:38%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,236,200,.07) 50%,rgba(255,255,255,0) 100%);transform:translate3d(-120%,0,0) skewX(-12deg);animation:leSweep 7s cubic-bezier(.45,0,.2,1) infinite;pointer-events:none;will-change:transform}
@keyframes leSweep{0%,35%{transform:translate3d(-120%,0,0) skewX(-12deg)}75%,100%{transform:translate3d(330%,0,0) skewX(-12deg)}}
.le-sil {position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:180px}
.le-sil svg {width:min(100%,300px);height:auto;aspect-ratio:200/140;filter:brightness(.17) saturate(.7) contrast(1.15) drop-shadow(0 -1px 0 rgba(245,184,64,.85)) drop-shadow(1px 0 0 rgba(242,107,29,.5)) drop-shadow(0 0 26px rgba(242,107,29,.4));animation:leGlow 5s ease-in-out infinite}
.le-sil::after {content:"";position:absolute;left:12%;right:12%;bottom:-14px;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(242,107,29,.35),rgba(242,107,29,0));filter:blur(4px)}
@keyframes leGlow{0%,100%{opacity:.92}50%{opacity:1}}
.le-copy {position:relative}
.le-kick {margin:0 0 14px;font:700 12px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:#F5B840}
:root[data-design="setp"] .ltd h2 {margin:0;font-family:var(--display);font-weight:300;text-transform:uppercase;font-size:clamp(34px,4.6vw,60px);line-height:1;color:#fff}
:root[data-design="setp"] .ltd h2 b.em {display:block;font-weight:700;color:#F26B1D}
.le-line {margin:16px 0 0;max-width:34ch;font-size:16px;line-height:1.5;color:var(--ink-2)}
@media (max-width:760px) {
  .le-card {grid-template-columns:1fr;text-align:center}
  .le-line {margin-left:auto;margin-right:auto}
  .le-sil {min-height:130px}
  .le-sil svg {width:min(66%,240px)}
}
@media (prefers-reduced-motion:reduce) and (max-width:0px) {
  .le-sweep, .le-sil svg {animation:none}
}
@media (min-width:761px) {
  .le-copy {text-align:left}
  .le-line {margin-left:0}
}

/* smoother playback: bake the cut-face darkening, stop background sheens, promote glowing layers */
.scanintro .view .cutface {filter:none!important}
.scanintro .view .cutface::after {content:"";position:absolute;inset:0;background:rgba(0,0,0,.4)}
.scanintro .surface::after {animation:none!important;display:none!important}
.le-sil svg {will-change:opacity;transform:translateZ(0)}
.scanintro .demo-wrap {will-change:transform}
.le-line span {display:block}

/* cap the scan stage on large screens: fewer pixels to animate, still cinematic */
@media (min-width:1100px) {
  .scanintro .demo-wrap {width:min(1120px,100%)!important;max-width:1120px!important;margin-left:auto!important;margin-right:auto!important}
  .scanintro #slab {border-radius:0;max-height:740px}
}
.pc-safe {margin:10px 0 0;text-align:center;font-size:12.5px;line-height:1.4;color:var(--ink-3)}
.pc-cta {width:100%;justify-content:center}
.scanintro #slab {perspective:1800px;perspective-origin:50% 8%}
.scanintro .surface {transform-style:preserve-3d}
.scanintro .slice .face {opacity:calc(var(--w) - max(0, var(--f) - .97) * 40)!important}
.scanintro .view {z-index:8!important;opacity:min(1, calc(var(--f) * 25))!important;backface-visibility:hidden}
.scanintro .surface::before {transform:rotateX(calc(var(--f) * 89deg))!important}
.top nav a.nav-ltd {display:inline-flex;align-items:center;gap:6px}
.nav-ltd em {font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;padding:3px 6px;border-radius:999px;color:#111;background:#F26B1D}
.scanintro .slice .face {transform-origin:50% 18%!important;transform:rotateX(calc(var(--f) * 90deg))!important;z-index:9!important}
.scanintro .slice .face::after {content:"";position:absolute;inset:0;background:#000;opacity:calc(var(--f) * .45);pointer-events:none}

/* inside the concrete: a sawn cross-section with cut aggregate, not the outer surface */
:root {--cutsec:url("../assets/concrete-cross-section-71e884.webp?v=f2aba49647")}
.scanintro .view .cutface {background:#7A766F var(--cutsec) center/cover no-repeat!important}
.scanintro .view .cutface::after {background:rgba(0,0,0,.18)!important}

/* calmer Originals rows: fewer white labels */
.pkind {border:0!important;background:none!important;padding:0!important;margin-top:8px!important;font-size:11px!important;letter-spacing:.14em!important;color:rgba(255,255,255,.55)!important}
.show-cap b.ei {color:#F26B1D;font-weight:inherit}
.show-cap .nw {white-space:nowrap}
@media (max-width:600px) {
  .show-cap {font-size:clamp(20px,6vw,26px)!important;line-height:1.15!important}
}
.scanintro #slab {perspective:1600px!important;perspective-origin:50% -55%!important}
.scanintro .slice .face {transform-origin:50% 18%!important;transform:rotateX(calc(var(--f) * -90deg))!important;z-index:7!important}
.scanintro .view {transform-origin:50% 0!important;transform:rotateX(calc((1 - var(--f)) * 90deg))!important;z-index:8!important}
.scanintro .surface::before {transform:none!important;opacity:calc(var(--w) * (1 - var(--f) * 3))!important}

/* labels vanish the instant the scanner is moved, and come back after letting go */
.scanintro.si-drag .plot .tag.lbl {opacity:0!important;transition:none!important;transition-delay:0s!important;animation:none!important}
.fold3d {display:none}
.scanintro .fold3d {display:block;position:absolute;left:0;right:0;top:18%;bottom:0;z-index:7;pointer-events:none;transform-style:preserve-3d;transform:translateZ(calc(var(--hc,300px) * -.5)) rotateX(calc(var(--f) * 90deg))}
.scanintro .fold3d .fz {position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;opacity:calc(min(1, var(--f) * 1000) - max(0, var(--f) - .985) * 1000)}
.scanintro .fold3d .fz-front {background:#A9A39A var(--conc) 0 100%/100% calc(100% / .82) no-repeat;transform:translateZ(calc(var(--hc,300px) * .5))}
.scanintro .fold3d .fz-bottom {background:#7A766F var(--cutsec) center/cover no-repeat;transform:rotateX(-90deg) translateZ(calc(var(--hc,300px) * .5))}
.scanintro .fold3d .fz::after {content:"";position:absolute;inset:0;background:#000}
.scanintro .fold3d .fz-front::after {opacity:calc(var(--f) * .5)}
.scanintro .fold3d .fz-bottom::after {opacity:calc(.18 + (1 - var(--f)) * .45)}

/* the flat wall and the flat scan view hand over to the cube and back */
.scanintro .slice .face {transform:none!important;opacity:calc(var(--w) - min(1, var(--f) * 1000))!important}
.scanintro .view {transform:none!important;opacity:calc(max(0, var(--f) - .985) * 1000)!important}
.scanintro #slab {perspective:1500px!important;perspective-origin:50% -20%!important}
.scanintro .slice .cutline {opacity:calc(min(1, var(--c) * 12) - var(--f) * 4 - var(--b4))!important}
.scanintro .slice .cutdot {opacity:calc(var(--c) * 4 * (1 - var(--c)) - var(--f) * 4)}
.scanintro #slab {perspective:560px!important;perspective-origin:50% 18%!important}
.scanintro #slab .fold3d {top:0!important;bottom:auto!important;height:18%!important;left:0!important;right:0!important;z-index:7;transform-origin:50% 100%!important;transform-style:preserve-3d;
  transform:rotateX(calc(var(--f) * 90deg))!important}
.scanintro #slab .fold3d .fz {opacity:calc(min(1, var(--pb,0) * 1000) - max(0, var(--f) - .985) * 1000)!important;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.scanintro #slab .fold3d .fz-front {inset:0!important;background:#A9A39A var(--conc) 0 0/100% calc(100% / .18) no-repeat!important;transform:none!important}
.scanintro #slab .fold3d .fz-bottom {inset:auto!important;left:0!important;right:0!important;top:100%!important;height:var(--hc,300px)!important;transform-origin:50% 0!important;transform:rotateX(-90deg)!important;background:#7A766F var(--cutsec) center/cover no-repeat!important}
.scanintro #slab .fold3d .fz-left, .scanintro #slab .fold3d .fz-right {inset:auto!important;top:0!important;height:100%!important;width:var(--hc,300px)!important;background:#6E6A64 var(--cutsec) 0 0/auto 560% repeat!important}
.scanintro #slab .fold3d .fz-left {right:100%!important;transform-origin:100% 50%!important;transform:rotateY(-90deg)!important}
.scanintro #slab .fold3d .fz-right {left:100%!important;transform-origin:0 50%!important;transform:rotateY(90deg)!important}
.scanintro #slab .fold3d .fz-front::after {opacity:calc(var(--f) * .55)!important}
.scanintro #slab .fold3d .fz-bottom::after {opacity:calc(.18 + (1 - var(--f)) * .5)!important}
.scanintro #slab .fold3d .fz-left::after, .scanintro #slab .fold3d .fz-right::after {opacity:.42!important}

/* the flat upper strip hands over to the block; the lower wall drops back and fades */
.scanintro .surface::before {opacity:calc(var(--w) * (1 - min(1, var(--pb,0) * 1000)))!important;transform:none!important}
.scanintro .slice .face {transform:none!important;opacity:calc(var(--w) * (1 - var(--pb,0)))!important}
.scanintro .slice .face::after {opacity:calc(var(--pb,0) * .85)!important}
.scanintro .slice .cutline {opacity:calc(min(1, var(--c) * 12) - var(--pb,0) * 4 - var(--b4))!important}
.scanintro .slice .cutdot {opacity:calc(var(--c) * 4 * (1 - var(--c)) - var(--pb,0) * 4)}

/* inside images and videos only the main titles are white; everything else is quiet grey */
.poster .ptag {color:rgba(255,255,255,.6)!important}
.poster .pkind {color:rgba(255,255,255,.45)!important}
.billboard .bb-tag {color:rgba(255,255,255,.62)!important}
.billboard .bb-meta {color:rgba(255,255,255,.55)!important}
.billboard .bb-pill {color:rgba(255,255,255,.55)!important;border-color:rgba(255,255,255,.28)!important;background:none!important}
.scanintro #slab .fold3d .fz-front {opacity:min(1, calc(var(--pb,0) * 1000))!important}
.scanintro #slab .fold3d .fz-front::after {opacity:calc(var(--f) * .22)!important}
.scanintro #slab .surface {z-index:9}
:root[data-design="setp"] .scanintro #slab .dev, .scanintro #slab .dev {opacity:calc(var(--b4) * 1.15 - .15)!important}

/* opening question on the wall: small label + big question, centred in the upper third */
.scanintro .slice .cap-surface {left:50%!important;right:auto!important;top:33%!important;bottom:auto!important;flex-direction:column;align-items:center;gap:10px;padding:0!important;background:none!important;border:0!important;
  transform:translate(-50%,calc(-50% + var(--c) * -10px))!important;text-align:center;white-space:normal;width:min(90%,720px)}
.scanintro .slice .cap-surface::before {display:none!important}
.scanintro .slice .cap-surface .cs-k {display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 11px;border-radius:999px;background:rgba(10,10,10,.55);border:1px solid rgba(255,255,255,.14);font:600 clamp(12px,1.5vw,16px)/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.scanintro .slice .cap-surface .cs-k::before {content:"";width:8px;height:8px;border-radius:50%;background:#C9C4BC}
.scanintro .slice .cap-surface .cs-q {font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(30px,6.2vw,64px);line-height:1;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.6)}

/* the question stays, then fades, then a beat of stillness before the laser starts */
.scanintro .slice .cap-surface {opacity:calc(var(--w) * (1 - min(1, max(0, (var(--hq,0) - .56) / .2))))!important}
.scanintro.si-done .plot .tag.lbl.l5 {transition-delay:1.35s}
.scanintro.si-done .plot .tag.lbl.l4 {transition-delay:1.75s}

/* closing beat: "Now you know." appears after the labels, holds, then fades away */
.slice .si-know {display:none}
.scanintro .slice .si-know {display:flex;position:absolute;inset:0;z-index:12;align-items:center;justify-content:center;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 60% 42% at 50% 52%,rgba(0,0,0,.72),rgba(0,0,0,0) 75%)}
.scanintro .slice .si-know .sk-t {font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(34px,7vw,76px);line-height:1;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.6);transform:translateY(10px)}
.scanintro .slice .si-know .sk-t b {color:#F26B1D;font-weight:inherit}
.scanintro.si-done .slice .si-know {animation:siKnow 4.2s ease 2.3s both}
.scanintro.si-done .slice .si-know .sk-t {animation:siKnowT 4.2s ease 2.3s both}
@keyframes siKnow{0%{opacity:0}14%{opacity:1}68%{opacity:1}100%{opacity:0}}
@keyframes siKnowT{0%{transform:translateY(10px)}14%,100%{transform:none}}
.scanintro.si-drag .slice .si-know {animation:none!important;opacity:0!important}
@media (prefers-reduced-motion:reduce) and (max-width:0px) {
  .scanintro .slice .si-know {display:none}
}
.scanintro .plot .tag.lbl.lbl-l {transform:translate(0,0)!important}
.plot .nyk {display:none}
.scanintro .plot .nyk {display:block;position:absolute;left:50%;top:45%;z-index:6;pointer-events:none;white-space:nowrap;opacity:0;transform:translate(-50%,-50%);
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(26px,5.4vw,60px);line-height:1;color:#fff;
  text-shadow:0 2px 22px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.8)}
.scanintro .plot .nyk b {color:#F26B1D;font-weight:inherit}
.scanintro .plot .nyk::before {content:"";position:absolute;left:-14%;right:-14%;top:-55%;bottom:-55%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.72),rgba(0,0,0,0))}
.scanintro.si-done:not(.nyk-seen) .plot .nyk {animation:nykIn 3.8s cubic-bezier(.3,0,.2,1) 2.4s both}
@keyframes nykIn{0%{opacity:0}18%{opacity:1}72%{opacity:1}100%{opacity:0}}
.scanintro.si-drag .plot .nyk {animation:none!important;opacity:0!important}
.scanintro #slab .fold3d .fz-bottom {box-sizing:border-box;border-top:3px solid rgb(183,177,166);background-origin:padding-box!important;background-clip:padding-box!important}

/* only the section headers (Top 5, Scans) stay white; titles inside images are a soft warm grey */
.poster .ptitle {color:rgba(236,232,226,.72)!important}
.scantile .st-name {color:rgba(236,232,226,.62)!important}
.poster .ptag {color:rgba(255,255,255,.48)!important}
.poster .pkind {color:rgba(255,255,255,.36)!important}
.billboard .bb-title {color:rgba(240,236,230,.86)!important}

/* smaller, calmer text inside the video posters and scan tiles */
.poster .ptitle {font-size:clamp(18px,1.9vw,26px)!important;line-height:1.02!important}
.poster .ptag {font-size:clamp(11px,.95vw,13px)!important;margin-top:6px!important}
.poster .pkind {font-size:10px!important}
.scantile .st-name {font-size:clamp(18px,1.9vw,26px)!important}
.scanintro .si-ctrl {padding-bottom:clamp(40px,6vw,80px)!important}
.scanintro .si-btn {margin-bottom:clamp(16px,3vw,40px)!important}
.pc-proof {display:block;margin:14px auto 0;width:max-content;font-size:13px;font-weight:600;color:rgba(255,255,255,.72);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px}
@media (hover:hover) {
  .pc-proof:hover {color:#F26B1D;border-color:#F26B1D}
}

/* small XR ORIGINAL mark on every poster, like a studio badge */
.poster .pbadge {display:block!important;position:absolute;left:14px;top:14px;z-index:3;margin:0!important;padding:0!important;background:none!important;border:0!important;
  font:700 10px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7)!important}
.poster .pbadge b {color:#F26B1D;font-weight:800;letter-spacing:.06em}

/* replay: the finished scan fades out, the concrete wall fades back in */
.scanintro #slab {transition:opacity .48s ease}
.scanintro #slab.si-fade {opacity:0}

/* Replay is always visible and always works */
.scanintro .si-btn, .scanintro .si-btn:disabled {opacity:1!important;cursor:pointer!important;pointer-events:auto!important}
.scanintro .si-btn .i-replay, .scanintro .si-btn .t-replay {display:inline!important}
.scanintro .si-btn .i-play, .scanintro .si-btn .t-play {display:none!important}

/* the experts are excellent – there are just not enough of them */
.problem .experts {display:block!important;max-width:880px;margin:clamp(56px,8vw,104px) auto 0;text-align:center}
.problem .experts h3 {margin:0;font-family:var(--display);font-weight:300;text-transform:uppercase;font-size:clamp(30px,4.4vw,56px);line-height:1.02;letter-spacing:-.005em;color:var(--ink,#111);text-wrap:balance}
.problem .experts h3 b {font-weight:700;color:inherit}
.problem .experts p {max-width:62ch;margin:20px auto 0;font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:#6E6E73;text-wrap:pretty}
.problem .experts .exp-link {display:inline-block;margin-top:18px;font-size:14px;font-weight:600;color:#6E6E73;text-decoration:none;border-bottom:1px solid rgba(110,110,115,.35);padding-bottom:2px}
@media (hover:hover) {
  .problem .experts .exp-link:hover {color:#F26B1D;border-color:#F26B1D}
}

/* the official XR logo, used wherever the XR mark appears */
.xr-logo {display:inline-block;background:url(../assets/xr-logo-6e1e8a.png?v=4fad1bec71) left bottom/contain no-repeat;aspect-ratio:711/369;height:.74em;width:auto;vertical-align:baseline;flex:none}
.wm .xr-logo {margin-left:.24em;height:.72em;align-self:baseline}
.bb-xr .xr-logo {height:.8em}
.pbadge .xr-logo {height:1.15em;margin-right:.45em;vertical-align:-.12em}

/* limited editions: a hint of red, white and blue, nothing unveiled */
.le-card {background:radial-gradient(110% 90% at 14% 78%,rgba(178,34,52,.20),rgba(0,0,0,0) 58%),radial-gradient(90% 85% at 88% 18%,rgba(60,59,110,.42),rgba(0,0,0,0) 62%),#0B0B0D!important}
.le-sweep {background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 50%,rgba(255,255,255,0) 100%)!important}
.le-sil svg {filter:brightness(0) drop-shadow(0 -1px 0 rgba(225,228,240,.32)) drop-shadow(1.5px 0 0 rgba(178,34,52,.85)) drop-shadow(-1.5px 0 0 rgba(90,100,200,.75)) drop-shadow(0 0 28px rgba(70,80,190,.45))!important}
.le-sil::after {background:radial-gradient(closest-side,rgba(178,34,52,.38),rgba(60,59,110,.18) 60%,rgba(0,0,0,0))!important}
.le-kick {color:#E8E8EE!important}

/* hero video: scanning at the highest mountain station */
.billboard .bb-art {background:url(../assets/hero-mountain-home-3fe35b.jpg?v=2f231556d9) 50% 42%/cover no-repeat,#0E0D0C!important}

/* the rescan hint steps aside whenever the scanner comes near it */
.scanintro .slice .si-hint {transition:opacity .2s ease}
.scanintro .slice .si-hint.hint-away {opacity:0!important}

/* the rescan hint lives below the scan, never in the scanner's way */
.scanintro .slice .si-hint {display:none!important}
.scanintro .si-ctrl {display:flex!important;flex-direction:column;align-items:center}
.si-drag-hint {display:none}
.scanintro .si-drag-hint {display:block;margin:0 0 14px;font:600 11px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);opacity:0;transition:opacity .4s ease}
.scanintro.si-done .si-drag-hint {opacity:1}

/* US units, small, under the metric value */
.specs .su {display:block;margin:2px 0 6px;font-size:14px;font-weight:600;letter-spacing:.02em;color:#8E8E93}

/* hero film: bigger line, plus the facts that make it special */
.billboard .bb-tag {font-size:clamp(20px,2.1vw,28px)!important;line-height:1.25!important;font-weight:500;color:rgba(255,255,255,.88)!important;margin-top:14px!important;text-wrap:balance}
.billboard .bb-fact {margin:10px 0 0;max-width:62ch;font-size:clamp(13px,1.05vw,15px);line-height:1.45;color:rgba(255,255,255,.6);opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease}
.billboard.bb-in .bb-fact {opacity:1;transform:none;transition-delay:2s}

/* app stores: not live yet */
.store.store-soon-on {position:relative;cursor:default;pointer-events:none}
.store .store-soon {position:absolute;top:-9px;right:12px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#F26B1D;color:#14110E;padding:3px 7px;border-radius:3px;line-height:1.2}

/* learnings: confidence, proof, prevention, one system */
.endorse .en-system {margin-top:12px;font-weight:600}
.hero .hero-know {margin:18px 0 0;font-size:clamp(18px,1.6vw,22px);line-height:1.4;color:#C9C7C2}
.places .proof-line {margin:26px 0 0;font-family:"Roboto Condensed",Arial,sans-serif;font-weight:400;font-size:clamp(20px,2.2vw,28px);color:#A1A1A6;letter-spacing:.2px}

/* calmer: one colour for the cost cards, quieter context lines */
.bill-row strong {color:#111113!important}
.bill-row .ic, .bill-row .ic svg {color:#F26B1D!important;stroke:#F26B1D!important}
.bill-row {border-top-color:#F26B1D!important}
.bill-row::before, .bill-row::after {background:#F26B1D!important;border-color:#F26B1D!important}
.places .list {display:none!important}
.places .proof-line {font-family:"Roboto",Arial,sans-serif!important;font-size:17px!important;line-height:1.5!important;margin-top:18px!important;color:#6E6E73!important}
.hero h1 {text-wrap:balance}
@media (max-width:600px) {
  .hero h1 {font-size:44px!important;line-height:1.02!important}
  .hero .hero-know {font-size:16px!important;margin-top:14px!important}
}
html body .bill .bill-rows .bill-row strong, html body .bill .bill-rows .bill-row:nth-child(n) strong {color:#111113!important}
html body .bill .bill-rows .bill-row, html body .bill .bill-rows .bill-row:nth-child(n) {border-top-color:#F26B1D!important;--c:#F26B1D!important;--accent:#F26B1D}
html body .bill .bill-rows .bill-row:nth-child(n)::before {background:#F26B1D!important;border-color:#F26B1D!important}

/* designed, calmer problem block */
.places .proof-line {text-wrap:balance}
@media (max-width:600px) {
  .places {padding-top:48px!important;padding-bottom:8px!important}
  .problem .bill {padding-top:24px!important}
  html body .bill .bill-rows {display:flex!important;flex-direction:column!important;gap:0!important;grid-template-columns:none!important;max-width:520px;margin:0 auto}
  html body .bill .bill-rows .bill-row, html body .bill .bill-rows .bill-row:nth-child(n) {display:grid!important;grid-template-columns:44px 1fr!important;grid-template-areas:"ic t" "ic s"!important;column-gap:16px;row-gap:2px;align-items:center;text-align:left!important;background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;border-bottom:1px solid #DEDCD7!important;padding:18px 4px!important;min-height:0!important}
  html body .bill .bill-rows .bill-row:nth-child(n)::before, html body .bill .bill-rows .bill-row:nth-child(n)::after {display:none!important}
  html body .bill .bill-rows .bill-row:last-child {border-bottom:0!important}
  html body .bill .bill-rows .bill-row .ic {grid-area:ic;justify-self:center;margin:0!important;width:30px;height:30px}
  html body .bill .bill-rows .bill-row strong {grid-area:t;font-size:22px!important;line-height:1.15;margin:0!important}
  html body .bill .bill-rows .bill-row span {grid-area:s;font-size:15px!important;line-height:1.4;color:#6E6E73;margin:0!important}
}
@media (max-width:600px) {
  html body .bill .bill-rows {width:100%!important;max-width:520px!important;align-self:center}
  html body .bill .bill-rows .bill-row strong, html body .bill .bill-rows .bill-row span {text-align:left!important;justify-self:start!important}
}
@media (max-width:600px) {
  html body .bill .bill-rows .bill-row span, html body .bill .bill-rows .bill-row strong {max-width:none!important;width:auto!important}
  html body .bill .bill-rows .bill-row {padding:16px 4px!important}
}

/* 3D + AR placeholder in the colours section */
.ar-cta {display:inline-flex;align-items:center;gap:10px;margin:22px auto 0;padding:12px 18px;border:1px solid rgba(17,17,19,.22);border-radius:999px;color:#111113;font-size:15px;font-weight:600;cursor:default;position:relative}
.ar-cta svg {width:20px;height:20px;color:#F26B1D}
.ar-cta .ar-soon {font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#F26B1D;color:#14110E;padding:3px 7px;border-radius:3px}
html body .experts-sec > .wrap.experts {display:block!important}
:root[data-design] .problem.experts-sec > .wrap.experts:first-child {display:block!important}

/* explainer: inside the wall -> on your phone */
.explain {background:#0E0E10;color:#F2F1EE;padding:72px 0 64px;text-align:center}
@media (max-width:700px) {
  .explain {padding:48px 0 44px}
}
.explain .ex-ei {margin:34px auto 0;font-family:"Roboto Condensed",Arial,sans-serif;font-size:clamp(26px,3.4vw,40px);font-weight:300;text-transform:uppercase;letter-spacing:.4px;line-height:1.1}
.explain .ex-ei .em {font-weight:700;color:#F26B1D}

/* experts block: headline as the bridge, details on demand */
.problem .experts .exp-more {margin:18px auto 0;max-width:640px}
.problem .experts .exp-more summary {list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#6E6E73;border-bottom:1px solid rgba(110,110,115,.35);padding-bottom:2px}
.problem .experts .exp-more summary::-webkit-details-marker {display:none}
.problem .experts .exp-more summary::after {content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.problem .experts .exp-more[open] summary::after {transform:rotate(-135deg) translateY(-1px)}
@media (hover:hover) {
  .problem .experts .exp-more summary:hover {color:#F26B1D;border-color:#F26B1D}
}
.problem .experts .exp-more p {margin:16px 0 0}

/* scan tiles: same XR ORIGINAL badge and Coming soon pill as the films */
.scantile {position:relative}
html body .scantile .st-badge {display:inline-flex!important;align-items:center;position:absolute!important;top:12px;left:14px;z-index:2}
html body .scantile .st-soon {position:absolute!important;top:12px;right:12px;z-index:2}

/* explainer, polished */
.explain {padding:88px 0 84px!important;background:#0B0B0D!important}
.explain .ex-rule {width:44px;height:2px;background:#F26B1D;margin:56px auto 22px;border-radius:2px}
.explain .ex-ei {margin:0 auto!important;font-size:clamp(28px,3.6vw,44px)!important}
@media (max-width:700px) {
  .explain {padding:56px 0 52px!important}
}

/* balanced arrangement: captions on one line, visuals centred against each other */

/* audience as chips: connective words hidden, each group a tag; homeowners last, in orange */
html body .reveal .know-who {font-size:0!important;line-height:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:760px;margin:22px auto 0!important}
html body .reveal .know-who b {font-size:15px;line-height:1.2;font-weight:600;display:inline-block;padding:9px 16px;border-radius:999px;border:1px solid rgba(17,17,19,.18);background:#FFFFFF;color:#111113;white-space:nowrap}
html body .reveal .know-who b:last-child {border-color:#F26B1D;color:#F26B1D;background:transparent}
@media (max-width:600px) {
  html body .reveal .know-who {gap:8px;padding:0 12px}
  html body .reveal .know-who b {font-size:14px;padding:8px 13px}
}

/* hero objects: one line, each word gets its colour dot from the 3D block, one after the other */
.hero .detects {white-space:nowrap;font-size:clamp(13px,3.6vw,22px)!important;letter-spacing:.08em}
.hero .detects span {display:inline-flex;align-items:center}
@media (max-width:700px) {
  .hero .detects {white-space:normal;display:flex;flex-wrap:wrap;justify-content:center;column-gap:.55em;row-gap:.35em;font-size:14px!important;letter-spacing:.05em;max-width:94vw;margin-left:auto;margin-right:auto}
}

/* audience tags, polished */
html body .reveal .know-for {margin:30px 0 0;text-align:center;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#8E8E93}
html body .reveal .know-who {margin:14px auto 0!important;gap:8px!important;max-width:720px}
html body .reveal .know-who b {font-size:14px!important;font-weight:500!important;letter-spacing:.01em;padding:8px 15px!important;border:1px solid #E2E0DB!important;background:rgba(255,255,255,.75)!important;color:#2A2A2E!important;box-shadow:0 1px 2px rgba(17,17,19,.05);transition:border-color .2s,color .2s,transform .2s}
@media (hover:hover) {
  html body .reveal .know-who b:hover {border-color:#F26B1D!important;color:#111113!important;transform:translateY(-1px)}
}
html body .reveal .know-who b:last-child {display:inline-flex;align-items:center;gap:7px;border-color:rgba(242,107,29,.55)!important;background:#FFF4EC!important;color:#D8551A!important;font-weight:600!important}
html body .reveal .know-who b:last-child::before {content:"";width:6px;height:6px;border-radius:50%;background:#F26B1D}
@media (max-width:600px) {
  html body .reveal .know-who b {font-size:13px!important;padding:7px 12px!important}
}
.hero .detects .dw {font-style:normal}

/* ease-of-reading tweaks: problem section */
html body .places .proof-line {font-size:20px!important;line-height:1.5!important;color:#4A4A4F!important;margin-top:22px!important}
html body .bill .bill-kick {color:#55555A!important;margin-top:56px!important;margin-bottom:18px!important}
html body .bill .bill-rows .bill-row, html body .bill .bill-rows .bill-row:nth-child(n) {border-top-width:3px!important;padding-top:26px!important;padding-bottom:26px!important}
html body .bill .bill-rows .bill-row .ic {width:30px!important;height:30px!important}
html body .bill .bill-rows .bill-row span {font-size:15.5px!important;line-height:1.5!important;color:#55555A!important}
html body .bill .bill-rows .bill-row strong {margin-bottom:4px!important}
html body .problem .experts .exp-more summary {font-size:16px!important;color:#4A4A4F!important}
html body .problem .experts .exp-more p {font-size:18px!important;line-height:1.6!important;color:#4A4A4F!important}
@media (max-width:600px) {
  html body .places .proof-line {font-size:17px!important}
  html body .bill .bill-rows .bill-row span {font-size:15px!important}
  html body .bill .bill-kick {margin-top:36px!important}
}

/* hero objects: original animation only, all white */
.hero .detects .dw {animation:none!important;color:inherit!important;text-shadow:none!important}
.hero .detects span::before {display:none!important;content:none!important}
html body .reveal .know-who {gap:10px!important;max-width:820px}
html body .reveal .know-who b {font-size:16px!important;padding:10px 18px!important}
@media (max-width:600px) {
  html body .reveal .know-who b {font-size:14.5px!important;padding:8px 14px!important}
}

/* a short orange rule between the problem statement and the cost cards, same as above the headline */
html body .bill .bill-kick::before {content:"";display:block;width:44px;height:2px;margin:0 auto 26px;background:#F26B1D;border-radius:2px}

/* scan animation flows straight into the explainer: one black, less empty space */
html body .scanintro .si-ctrl {padding-bottom:20px!important}
html body .explain {background:#000!important;padding-top:24px!important}

/* audience tags: two even rows of four, equal widths */
html body .reveal .know-who {display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px!important;max-width:780px!important}
html body .reveal .know-who b {display:flex!important;align-items:center;justify-content:center;text-align:center;white-space:normal!important}
@media (max-width:600px) {
  html body .reveal .know-who {grid-template-columns:repeat(2,minmax(0,1fr));max-width:92vw!important}
}
html body .reveal .know-who {max-width:860px!important}
html body .reveal .know-who b {white-space:nowrap!important;padding:10px 12px!important}
@media (max-width:600px) {
  html body .reveal .know-who b {font-size:13.5px!important;padding:8px 8px!important}
}

/* tags always in full rows: 4 + 4 on wide screens, 2 per row below; long words wrap inside the tag, never into an orphan row */
html body .reveal .know-who {display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:stretch}
html body .reveal .know-who b {white-space:normal!important;text-wrap:balance;line-height:1.25!important;min-height:44px;box-sizing:border-box}
@media (max-width:820px) {
  html body .reveal .know-who {grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:520px!important}
}

/* materials pill: bigger, friendlier, with a live dot */
@keyframes mmBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes mmRing{0%{opacity:.6;transform:scale(.5)}100%{opacity:0;transform:scale(1.6)}}

/* scan section: size to its content instead of the full screen height (no empty black on tall screens) */
html body .scanintro .si-sticky {height:auto!important;min-height:0!important;padding:56px 0 8px!important}

/* explainer in daylight: breaks the black run after the scan animation, so it reads as a new beat */
html body .explain {background:#F4F4F6!important;color:#111113!important;padding:96px 0 92px!important}
html body .explain .ex-ei {color:#111113!important}
@media (max-width:700px) {
  html body .explain {padding:60px 0 56px!important}
}

/* explainer: concrete-toned stage of its own */
html body .explain {background: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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.33 0 0 0 0 0.3 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,#E6E2DB 0%,#DCD7CE 100%)!important;border-top:1px solid #CFC9BE;border-bottom:1px solid #CFC9BE}
html body .explain .ex-rule {background:#F26B1D!important}

/* explainer, refined: cool concrete instead of beige, bigger and balanced visuals */
html body .explain {background: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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.3 0 0 0 0 0.3 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(120% 90% at 50% 0%,#EDEDEB 0%,#DCDCD9 70%,#D3D3CF 100%)!important;border-top:0!important;border-bottom:0!important;padding:110px 0 104px!important}
html body .explain .ex-rule {margin-top:64px!important}
@media (max-width:700px) {
  html body .explain {padding:64px 0 60px!important}
}

/* explainer back on black, separated from the animation by a new chapter: a glowing cut line and its own title */
html body .explain {background:radial-gradient(70% 55% at 50% 0%,rgba(242,107,29,.10) 0%,rgba(242,107,29,0) 70%),#050506!important;color:#F2F1EE!important;padding:0 0 100px!important;border:0!important}
html body .explain .ex-ei {color:#F2F1EE!important}

/* Eagle Intelligence as a story: done -> in progress -> next */
html body .explain .ei-track {display:flex;align-items:center;justify-content:center;gap:16px;max-width:860px;margin:34px auto 0;padding:0 20px}
html body .explain .t-step {display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-size:16px;font-weight:600}
html body .explain .t-done {color:#F2F1EE}
html body .explain .t-done .t-dot {width:12px;height:12px;border-radius:50%;background:#F26B1D;box-shadow:0 0 0 4px rgba(242,107,29,.18)}
html body .explain .t-next {color:#F5B840}
html body .explain .t-next .mm-live {position:relative;width:12px;height:12px;border-radius:50%;background:#F5B840;animation:mmBlink 1.4s ease-in-out infinite}
html body .explain .t-next .mm-live::after {content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #F5B840;opacity:0;animation:mmRing 1.4s ease-out infinite}
html body .explain .t-bar {position:relative;flex:1 1 140px;min-width:80px;height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(245,184,64,.45) 0 6px,transparent 6px 12px);overflow:hidden}
html body .explain .t-bar i {position:absolute;inset:0 auto 0 0;width:55%;background:linear-gradient(90deg,#F26B1D,#F5B840);border-radius:2px;animation:tFill 3.2s ease-in-out infinite}
@keyframes tFill{0%{width:35%}60%{width:70%}100%{width:35%}}
@media (prefers-reduced-motion:reduce) and (max-width:0px) {
  html body .explain .t-bar i {animation:none}
  html body .explain .t-next .mm-live, html body .explain .t-next .mm-live::after {animation:none}
}
@media (max-width:700px) {
  html body .explain .ei-track {flex-direction:column;gap:10px}
  html body .explain .t-bar {flex:none;width:2px;height:28px;background:repeating-linear-gradient(180deg,rgba(245,184,64,.45) 0 5px,transparent 5px 10px)}
  html body .explain .t-bar i {width:100%!important;height:55%;animation:none}
  html body .explain .t-step {font-size:15px;white-space:normal;text-align:center}
}
@media (max-width:700px) {
  html body .explain .t-bar {min-width:0!important;width:2px!important;flex:0 0 28px!important}
  html body .explain .t-bar i {inset:0 0 auto 0!important;width:2px!important;height:55%!important}
}

/* fewer elements: no card box, no extra rule, numbers and "illustration" as plain text */
html body .explain .ex-rule {display:none!important}
html body .explain .ex-ei {margin-top:80px!important}
@media (max-width:700px) {
  html body .explain .ex-ei {margin-top:52px!important}
}

/* track: no pulsing line; progress shown as almost complete */
html body .explain .t-bar i {animation:none!important;width:85%!important}
@media (max-width:700px) {
  html body .explain .t-bar i {width:2px!important;height:85%!important}
}

/* more air in "What you're seeing" */
html body .explain {padding-bottom:140px!important}
html body .explain .ex-ei {margin-top:120px!important}
html body .explain .ei-track {margin-top:44px!important;max-width:720px!important}
@media (max-width:700px) {
  html body .explain {padding-bottom:84px!important}
  html body .explain .ex-ei {margin-top:72px!important}
  html body .explain .ei-track {margin-top:30px!important}
}

/* more air between Replay and the cut line */
html body .scanintro .si-ctrl {padding-bottom:120px!important}
@media (max-width:700px) {
  html body .scanintro .si-ctrl {padding-bottom:72px!important}
}

/* 3D wall with live, translatable labels and the orange cut line that ties it to the phone */

/* labels locked to the wall: the picture always fills its frame exactly, at every screen size */

/* slim Eagle Intelligence band right under the scan animation */
html body .explain {padding:0 0 110px!important;background:#000!important}
html body .explain .ex-ei {margin-top:24px!important}
@media (max-width:700px) {
  html body .explain {padding-bottom:72px!important}
  html body .explain .ex-ei {margin-top:16px!important}
}

/* Replay invites a second look: a soft pulse once the scan has finished */
.scanintro.si-done .si-btn {position:relative;animation:replayPulse 2.4s ease-out infinite}
.scanintro.si-done .si-btn:hover, .scanintro.si-done .si-btn:focus-visible {animation:none}
@keyframes replayPulse{0%{box-shadow:0 0 0 0 rgba(242,107,29,.55),0 8px 30px rgba(242,107,29,.35)}70%{box-shadow:0 0 0 16px rgba(242,107,29,0),0 8px 30px rgba(242,107,29,.35)}100%{box-shadow:0 0 0 0 rgba(242,107,29,0),0 8px 30px rgba(242,107,29,.35)}}
@media (prefers-reduced-motion:reduce) and (max-width:0px) {
  .scanintro.si-done .si-btn {animation:none}
}

/* Phone header and menu (the shop's scripts/import_launch.py, 2 Nov 2026). Below 821 px his header showed only the
   logo and the language: now  logo | language | Order yours | menu ; the menu button opens the nav's links (cloned
   in their current language) in a panel under the header. Below 380 px the language shows its globe only. */
.nav-burger{display:none}
@media (max-width:820px){
  :root[data-design="setp"] .top nav{gap:6px}
  .top nav .langsw{order:1}
  :root[data-design="setp"] .top nav > a.btn, :root[data-design="setp"] .top.cta-hidden nav > a.btn{order:2;display:inline-flex!important;align-items:center;max-width:none!important;opacity:1!important;transform:none!important;pointer-events:auto!important;min-height:36px;padding:0 14px!important;font-size:14px;line-height:1;white-space:nowrap}
  .top .nav-burger{order:3;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:transparent;color:#fff;cursor:pointer;-webkit-appearance:none;appearance:none}
  .top .nav-burger svg{width:20px;height:20px;display:block}
  .top .nav-burger .ic-close, .top.is-open .nav-burger .ic-menu{display:none}
  .top.is-open .nav-burger .ic-close{display:block}
  .navm{position:fixed;left:0;right:0;z-index:900;box-sizing:border-box;max-width:100vw;overflow-wrap:anywhere;display:flex;flex-direction:column;padding:6px 20px 22px;background:rgba(0,0,0,.97);border-bottom:1px solid rgba(255,255,255,.12)}
  .navm[hidden]{display:none}
  .navm a{display:flex;align-items:center;gap:10px;padding:15px 2px;font-size:19px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.09)}
  .navm a em{font-style:normal;font-size:11px;letter-spacing:.06em;padding:2px 8px;border-radius:999px;background:#E8671C;color:#111}
  .navm a.btn{justify-content:center;margin-top:18px;border-bottom:0}
}
@media (max-width:379px){
  .top .lang-btn span{display:none}
}

/* Header brand (the shop's scripts/import_launch.py, 5 Nov 2026): "Eagle XR" links to the top, "by Screening Eagle"
   to screeningeagle.com (white and an arrow on hover); below 821 px it stands under the logo, arrow always shown. */
.top .brand{display:inline-flex;align-items:baseline;white-space:nowrap}
.top .brand a{text-decoration:none;color:inherit}
.top .brand .brand-by{display:inline-flex;align-items:center;gap:3px;margin-left:8px;font-family:var(--body);font-weight:400;font-size:13px;line-height:1.2;color:var(--ink-3);transition:color .2s ease}
.top .brand .brand-arrow{width:.85em;height:.85em;flex:none;transition:opacity .2s ease,transform .2s ease}
.top .brand .brand-by:hover, .top .brand .brand-by:focus-visible{color:#fff}
@media (hover:hover){
  .top .brand .brand-arrow{opacity:0;transform:translate(-2px,2px)}
  .top .brand .brand-by:hover .brand-arrow, .top .brand .brand-by:focus-visible .brand-arrow{opacity:1;transform:none}
}
@media (max-width:820px){
  .top .brand{flex-direction:column;align-items:flex-start;gap:4px}
  .top .brand .brand-by{margin-left:1px;font-size:11.5px}
  .top .brand .brand-arrow{opacity:1;transform:none}
}

/* XR Originals poster thumbnails (the shop's scripts/import_launch.py, 2 Nov 2026): a frame of the film behind the
   poster's text, under its own dark gradient (::before). */
.poster{isolation:isolate}
.poster>.pthumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;filter:brightness(.78)}
/* "See it in 3D and AR": the AR placeholder is a real button now (it opens the 3D sheet); without these the phone
   paints its own grey button face behind the outline */
button.ar-cta{-webkit-appearance:none;appearance:none;background:transparent;font-family:inherit;line-height:1.2;
  cursor:pointer;transition:border-color .2s,background-color .2s;-webkit-tap-highlight-color:transparent}
button.ar-cta:hover,button.ar-cta:focus-visible{border-color:#F26B1D;background:rgba(242,107,29,.08)}
button.ar-cta:active{background:rgba(242,107,29,.16)}
button.ar-cta:focus-visible{outline:2px solid #F26B1D;outline-offset:3px}
/* Arabic (ar/, right to left): the wordmark "Eagle XR" stays left to right; no letter spacing (it tears the joined
   Arabic letters apart, e.g. the scan's labels); prices left to right */
html[lang=ar] *{letter-spacing:0!important}
[dir=rtl] .wm{direction:ltr;unicode-bidi:isolate}
[dir=rtl] #reserve .big{direction:ltr;unicode-bidi:isolate}
/* the narrowest phones: the header's order button a little smaller (Turkish "Hemen sipariş ver" was 2 px too wide) */
@media (max-width:380px){:root[data-design="setp"] .top nav > a.btn{padding:0 10px!important;font-size:13px}}
/* the order sheet names its own fonts: the page's script as the fallback (Thai showed empty boxes without it) */
html[lang=th] .rsv-sheet,html[lang=th] .rsv-sheet *{font-family:Roboto,"Noto Sans Thai",system-ui,sans-serif!important}
html[lang=ja] .rsv-sheet,html[lang=ja] .rsv-sheet *{font-family:Roboto,"Noto Sans JP",system-ui,sans-serif!important}
html[lang=zh] .rsv-sheet,html[lang=zh] .rsv-sheet *{font-family:Roboto,"Noto Sans SC",system-ui,sans-serif!important}
html[lang=hi] .rsv-sheet,html[lang=hi] .rsv-sheet *{font-family:Roboto,"Noto Sans Devanagari",system-ui,sans-serif!important}
/* Replay after the scan: no pulsing halo around the button (Michael, 2 Nov: "remove that circle") */
.scanintro.si-done .si-btn,.scanintro .si-btn{animation:none!important}

/* the official store badges (feedback 3 Nov) */
.stores.badges{display:flex;flex-wrap:wrap;align-items:center;gap:20px 14px}
.stores.badges .badge{position:relative;display:inline-flex;line-height:0;border-radius:10px;text-decoration:none}
.stores.badges .badge img{height:52px;width:auto;display:block}
.stores.badges a.badge:hover{filter:brightness(1.15)}
.stores.badges a.badge:focus-visible,.stores.badges a.store:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.stores.badges .badge-soon{cursor:default}
.stores.badges .badge .store-soon,.stores.badges .store .store-soon{display:block;position:absolute;top:-14px;right:10px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#F26B1D;color:#14110E;padding:3px 7px;border-radius:3px;line-height:1.2}
.stores.badges .store{position:relative;min-height:0;height:52px;padding:0 16px;gap:10px;border-radius:9px;background:#000!important;color:#fff!important;border:1px solid #A6A6A6!important}
.stores.badges .store svg{width:22px;height:22px}
.stores.badges .store span{font-size:17px}
.stores.badges .store small{font-size:10px}

/* the real scans in their iPhone frame (feedback 3 Nov) */
.scantile.has-scan{background:radial-gradient(80% 90% at 50% 40%,#1E1E20 0%,#0B0B0B 70%)!important}
.scantile .st-img{position:absolute;left:5%;right:5%;top:15%;bottom:21%;width:90%;height:64%;object-fit:contain;z-index:0;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));transition:transform .3s ease}
.scantile.has-scan:hover .st-img{transform:scale(1.03)}
.vmodal-player img[src*="/assets/scans/"]{object-fit:contain;background:transparent}

/* the films' descriptions on the posters: four lines, the player shows the whole (feedback 3 Nov) */
.poster .ptag{display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
html:is([lang=ar],[lang=el]) :is(.plot .hud,.plot .tag,.ruler,.scanintro .si-drag-hint,.scanintro .si-replay,.scanintro .slice .cap-surface .cs-k,.scanintro .slice .si-cap,.scanintro .slice .si-hint,.slice .hint,.slice .illus,.slice .illus-chip,/* audience tags,/* minimal in-scan labels,one per object type; chips removed */
.scanintro .plot .tag.lbl,polished */
html body .reveal .know-for){font-family:var(--body),system-ui,sans-serif!important}

/* native review: fr */
html[lang=fr] .specs .su{display:none} /* #3: no inches and pounds under 40 cm, 750 g and 100 × 90 mm */
/* native review: pl */
html[lang=pl] .bb-badge > span:last-child{display:none} /* #18: the film banner's badge, the XR logo alone (app.js would put ORIGINAL back for an empty text) */

/* width/height on the finishes picture (SEO pass, scripts/launch_seo.py): its height follows its width */
.show-img{height:auto}
/* the language menu's entries are links (launch_seo.py), styled as the buttons were; the header's own link rules
   (.top nav a: white, hidden below 821 px) must not reach into the menu */
.top nav .lang-menu a,.lang-menu a{display:block!important;width:100%;box-sizing:border-box;text-align:left;padding:10px 12px;border-radius:8px;color:#111!important;font:500 15px/1.2 var(--body);text-decoration:none;cursor:pointer;opacity:1}
.top nav .lang-menu a[aria-current="true"],.lang-menu a[aria-current="true"]{background:#F0F0F2;font-weight:700}
.top nav .lang-menu a:hover,.lang-menu a:hover{background:#F5F5F7}

/* the wordmark's XR in text, visually hidden (launch_copy.py) */
.xr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}