.living-lens-page {
  --stage-color: #ff8c00;
  --stage-rgb: 255, 140, 0;
  --stage-ink: #111318;
  color: #f8fafc;
  background:
    radial-gradient(circle at 50% -12%, rgba(30, 41, 59, 0.76), transparent 40rem),
    linear-gradient(180deg, #07080b 0%, #0a0d15 48%, #07080b 100%);
  overflow-x: clip;
}

.ambient-field {
  position: fixed;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 44%, rgba(var(--stage-rgb), 0.18), transparent 26rem),
    radial-gradient(circle at 76% 14%, rgba(51, 98, 137, 0.13), transparent 30rem);
  transition: background 800ms ease;
}

.lens-header {
  width: min(1320px, calc(100% - 40px));
  background: rgba(7, 8, 11, 0.64);
}

.lens-hero {
  position: relative;
  width: min(1440px, calc(100% - 36px));
  min-height: calc(100svh - 76px);
  margin: 0 auto;
  padding: 52px 0 88px;
  display: grid;
  align-content: center;
}

.hero-title-group {
  position: relative;
  z-index: 5;
  margin: 0 auto 36px;
  text-align: center;
}

.hero-title-group h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(4.2rem, 8.7vw, 8.5rem);
  line-height: 0.88;
  letter-spacing: -0.085em;
  text-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.hero-title-group h1 span { color: inherit; background: none; }
.title-white { color: #f5f5f2 !important; }
.hero-title-group .title-spectrum {
  color: transparent;
  background: linear-gradient(100deg, #f8fafc 0%, #dce1e7 18%, #ffc56e 42%, #ff6c4a 61%, #66cad6 84%, #f8fafc 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-title-group > p:not(.eyebrow) {
  margin: 14px 0 0;
  color: #cbd0d7;
  font-size: clamp(1.1rem, 2.3vw, 1.55rem);
  letter-spacing: -0.02em;
}

.hero-links { margin-top: 24px; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

.concept-stage {
  position: relative;
  min-height: 600px;
  display: grid;
  grid-template-columns: minmax(230px, 0.78fr) minmax(300px, 0.9fr) minmax(250px, 0.78fr);
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
}

.concept-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 51%;
  width: 620px;
  height: 460px;
  background: radial-gradient(ellipse, rgba(197, 104, 72, 0.32), rgba(61, 119, 136, 0.13) 52%, transparent 72%);
  filter: blur(44px);
  transform: translate(-50%, -50%);
}

.scene-stack { perspective: 900px; }
.scene-stack figure {
  position: relative;
  height: 170px;
  margin: 0 0 -8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  background: #11151d;
  box-shadow: 0 20px 50px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.1);
  transform: rotateY(7deg);
}
.scene-stack figure:first-child { transform: rotateY(7deg) translateX(18px); }
.scene-stack figure:last-child { transform: rotateY(7deg) translateX(10px); }
.scene-stack img { width: 100%; height: 100%; object-fit: cover; }
.scene-stack figcaption {
  position: absolute;
  inset: auto 0 13px;
  margin: auto;
  color: #fff;
  font-size: clamp(1.25rem, 2.6vw, 2.1rem);
  font-weight: 860;
  letter-spacing: -0.05em;
  text-align: center;
  text-shadow: 0 3px 16px #000;
  text-transform: uppercase;
}

.hero-phone-wrap { position: relative; display: grid; place-items: center; }
.phone-shell {
  position: relative;
  width: min(330px, 78vw);
  padding: 8px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 58px;
  background: linear-gradient(145deg, #737983, #171a20 24%, #020304 68%, #656b75);
  box-shadow: 0 48px 110px rgba(0,0,0,.64), inset 0 0 0 2px rgba(255,255,255,.07);
}
.phone-screen { position: relative; aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 49px; background: #111; }
.phone-screen > img { width: 100%; height: 100%; object-fit: cover; }
.phone-island { position: absolute; z-index: 5; top: 14px; left: 50%; width: 92px; height: 26px; border-radius: 99px; background: #040405; transform: translateX(-50%); }
.phone-tools { position: absolute; z-index: 4; top: 55px; left: 17px; right: 17px; display: flex; justify-content: space-between; }
.phone-tools span { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; background: rgba(8,9,11,.65); border: 1px solid rgba(255,255,255,.12); border-radius: 50%; backdrop-filter: blur(12px); }
.mini-readout, .live-readout { position: absolute; z-index: 5; left: 18px; right: 18px; bottom: 93px; padding: 11px 15px; display: flex; align-items: center; justify-content: space-between; background: rgba(7,8,11,.72); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; backdrop-filter: blur(16px); }
.mini-readout small, .live-readout small { color: #c8cbd0; font-size: .66rem; }
.mini-readout strong, .live-readout strong { font-size: 1rem; letter-spacing: .02em; }
.mini-palette { position: absolute; z-index: 4; left: 18px; right: 18px; bottom: 25px; display: flex; justify-content: center; gap: 8px; }
.mini-palette span { width: 34px; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.84); border-radius: 50%; }
.mini-palette span:nth-child(1) { background: #f45791; }
.mini-palette span:nth-child(2) { background: #400b11; }
.mini-palette span:nth-child(3) { background: #efba81; }
.mini-palette span:nth-child(4) { background: #8b755f; }

.hero-phone { width: min(300px, 72vw); }
.hero-chip { position: absolute; z-index: 3; width: 102px; padding: 9px; color: #dce0e5; background: rgba(20,24,31,.8); border: 1px solid rgba(255,255,255,.2); border-radius: 16px; box-shadow: 0 18px 46px rgba(0,0,0,.38); backdrop-filter: blur(18px); font: 700 .73rem ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.hero-chip i { display: block; height: 62px; margin-bottom: 8px; border-radius: 10px; }
.chip-pink { left: -64px; top: 12%; transform: rotate(-4deg); }
.chip-pink i { background: #f45791; }
.chip-bridge { right: -70px; top: 40%; transform: rotate(4deg); }
.chip-bridge i { background: #400b11; }
.chip-sunset { left: -48px; bottom: 4%; transform: rotate(3deg); color: #f0f2f4; }
.chip-sunset i { background: #efba81; }

.hero-panels { display: grid; gap: 14px; perspective: 900px; }
.glass-panel { padding: 18px; display: grid; gap: 10px; background: linear-gradient(145deg, rgba(30,41,59,.78), rgba(12,15,21,.78)); border: 1px solid rgba(255,255,255,.16); border-radius: 18px; box-shadow: 0 24px 54px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.07); backdrop-filter: blur(22px); transform: rotateY(-6deg); }
.panel-label { color: #f4f5f6; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.glass-panel code { padding: 6px 8px; color: #cdd2d8; background: rgba(255,255,255,.035); border-radius: 6px; font-size: .7rem; }
.stacked-swatches { display: flex; padding: 12px 4px; }
.stacked-swatches span { width: 54px; height: 48px; margin-right: -12px; border: 2px solid #202630; border-radius: 10px; }
.stacked-swatches span:nth-child(1) { background:#400b11; }.stacked-swatches span:nth-child(2) { background:#954a33; }.stacked-swatches span:nth-child(3) { background:#f45791; }.stacked-swatches span:nth-child(4) { background:#efba81; }.stacked-swatches span:nth-child(5) { background:#8b755f; }
.compact-panel strong { color: #bfc5cc; font-size: .85rem; font-weight: 580; }

.scroll-cue { position: absolute; z-index: 7; left: 50%; bottom: 18px; display: grid; gap: 0; color: #9ca3ad; font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-align: center; text-decoration: none; text-transform: uppercase; transform: translateX(-50%); }
.scroll-cue i { color: var(--stage-color); font-size: 1.5rem; font-style: normal; animation: lens-bob 1.8s ease-in-out infinite; }
@keyframes lens-bob { 50% { transform: translateY(6px); } }

.lens-experience { position: relative; padding: 150px max(20px, calc((100% - 1180px) / 2)); background: linear-gradient(180deg, rgba(15,23,42,.22), rgba(7,8,11,.08)); }
.experience-intro { max-width: 900px; margin-bottom: 90px; }
.experience-intro h2, .lens-heading h2, .integrity-copy h2, .price-panel h2 { font-size: clamp(2.7rem, 6.6vw, 6rem); }
.experience-intro > p:last-child { max-width: 680px; color: #9da5af; font-size: 1.05rem; }
.experience-grid { display: grid; grid-template-columns: minmax(340px, .86fr) minmax(380px, 1.14fr); gap: clamp(70px, 10vw, 150px); align-items: start; }
.sticky-lens { position: sticky; top: 100px; min-height: calc(100svh - 130px); display: grid; place-items: center; }
.lens-glow { position: absolute; width: 520px; aspect-ratio: 1; background: radial-gradient(circle, rgba(var(--stage-rgb),.38), rgba(var(--stage-rgb),.08) 45%, transparent 70%); filter: blur(28px); transition: background 650ms ease; }
.interactive-phone { z-index: 2; width: min(340px, 80vw); }
.lens-surface { cursor: default; }
.lens-surface > img { transition: opacity 250ms ease, transform 800ms ease; }
.lens-surface.is-changing > img { opacity: .16; transform: scale(1.025); }
.live-readout { bottom: 116px; color: var(--stage-ink); background: var(--stage-color); border-color: rgba(255,255,255,.58); box-shadow: 0 16px 36px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.32); transition: color 420ms ease, background 420ms ease; }
.live-readout small { color: inherit; font-size: .72rem; font-weight: 750; opacity: .78; }
.live-readout strong { font-size: 1.12rem; }
.capture-control { position: absolute; z-index: 5; left: 50%; bottom: 35px; width: 68px; height: 68px; display: grid; place-items: center; background: rgba(0,0,0,.55); border-radius: 50%; transform: translateX(-50%); backdrop-filter: blur(12px); }
.capture-control span { width: 54px; height: 54px; background: var(--stage-color); border: 3px solid #fff; border-radius: 50%; transition: background 500ms ease; }
.lens-palette { position: absolute; z-index: 5; right: 13px; bottom: 44px; display: grid; gap: 7px; }
.lens-palette span { width: 24px; aspect-ratio: 1; background: var(--swatch); border: 2px solid rgba(255,255,255,.85); border-radius: 50%; }
.format-float { position: absolute; z-index: 4; right: -50px; top: 18%; width: 126px; padding: 9px; background: rgba(18,24,34,.84); border: 1px solid rgba(255,255,255,.2); border-radius: 17px; box-shadow: 0 24px 60px rgba(0,0,0,.42); backdrop-filter: blur(20px); transform: rotate(4deg); }
.format-float span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.format-float i { display: block; height: 76px; margin-bottom: 9px; background: var(--stage-color); border: 1px solid rgba(255,255,255,.32); border-radius: 11px; box-shadow: inset 0 1px rgba(255,255,255,.16), 0 0 22px rgba(var(--stage-rgb),.28); transition: background 420ms ease, box-shadow 420ms ease; }
.format-float code { display: block; overflow: hidden; color: #fff; font-size: .72rem; font-weight: 750; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.drag-hint { position: absolute; z-index: 4; bottom: 0; color: #707883; font-size: .73rem; }

.story-steps { padding-bottom: 20vh; }
.story-step { min-height: 78vh; padding: 18vh 0 12vh; border-top: 1px solid rgba(255,255,255,.08); opacity: .36; transition: opacity 420ms ease, transform 420ms ease; }
.story-step.is-active, .story-step:focus { opacity: 1; transform: translateX(-10px); }
.story-number { display: block; margin-bottom: 42px; color: var(--stage-color); font: 750 .74rem ui-monospace, SFMono-Regular, Menlo, monospace; transition: color 500ms ease; }
.story-step h3 { max-width: 600px; font-size: clamp(2.6rem, 5.8vw, 5.3rem); line-height: .98; }
.story-step > p:not(.eyebrow) { max-width: 580px; color: #9ea5ae; font-size: 1.1rem; }
.story-step > code { display: inline-block; max-width: 100%; margin-top: 18px; padding: 11px 14px; overflow: hidden; color: #dce1e7; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); border-radius: 10px; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }

.lens-features { padding: 150px max(20px, calc((100% - 1180px) / 2)); background: linear-gradient(180deg, #0b0f18, #080a10); }
.lens-features,.integrity-section,.lens-pricing { content-visibility:auto; contain-intrinsic-size:auto 1000px; }
.lens-heading { max-width: 980px; }
.lens-bento { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; perspective: 1200px; }
.lens-card { position: relative; min-height: 360px; padding: clamp(28px, 4vw, 46px); overflow: hidden; background: linear-gradient(145deg, rgba(30,41,59,.74), rgba(13,17,24,.82)); border: 1px solid rgba(255,255,255,.1); border-radius: 28px; box-shadow: inset 0 1px rgba(255,255,255,.04); transform-style: preserve-3d; transition: transform 180ms ease, border-color 180ms ease; }
.lens-card:hover { border-color: rgba(255,255,255,.2); }
.lens-card > *:not(.card-shine) { position: relative; z-index: 2; }
.card-shine { position: absolute; z-index: 1; inset: -2px; pointer-events: none; background: radial-gradient(360px circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255,255,255,.12), transparent 45%); opacity: 0; transition: opacity 160ms ease; }
.lens-card:hover .card-shine { opacity: 1; }
.lens-card p:not(.card-kicker) { max-width: 620px; color: #9da5af; }
.formats-card { grid-column: 1 / -1; min-height: 590px; padding-right: 54%; }
.formats-card > p:not(.card-kicker) { max-width: 470px; }
.format-demo { position:absolute !important; z-index:3 !important; right:3%; top:7%; bottom:7%; width:48%; padding:20px; display:grid; grid-template-columns:78px minmax(0,1fr); gap:14px; background:linear-gradient(145deg, rgba(84,49,46,.74), rgba(22,39,50,.86)); border:1px solid rgba(255,255,255,.12); border-radius:24px; box-shadow:0 26px 60px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.06); transform:rotate(1.5deg); }
.format-swatches { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }
.format-swatch { width:40px; height:40px; padding:0; flex:none; background:transparent; border:0; border-radius:14px; cursor:pointer; }
.format-swatch span { display:block; width:100%; height:100%; background:var(--swatch); border:2px solid rgba(255,255,255,.72); border-radius:inherit; box-shadow:0 10px 24px rgba(0,0,0,.25); transition:transform 320ms ease,filter 320ms ease; }
.format-swatch.is-active span { filter:drop-shadow(0 0 10px color-mix(in srgb,var(--swatch) 62%,transparent)); transform:scale(1.55); }
.format-swatch:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.format-values { min-width:0; display:grid; align-content:center; gap:7px; transform:rotate(-1.5deg); }
.format-values > strong { margin:0 4px 2px; color:#fff; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; }
.format-values > div { min-width:0; padding:9px 10px; display:grid; gap:3px; background:rgba(7,8,11,.68); border:1px solid rgba(255,255,255,.08); border-radius:10px; backdrop-filter:blur(14px); }
.format-values span { color:#7cded7; font-size:.57rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.format-values code { overflow-wrap:anywhere; color:#edf0f4; font-size:clamp(.52rem,.76vw,.66rem); line-height:1.35; }
.continuity-card { grid-column:1 / -1; min-height:430px; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:clamp(36px,6vw,80px); background:linear-gradient(135deg,rgba(17,45,58,.88),rgba(22,24,37,.9) 55%,rgba(62,32,51,.78)); }
.continuity-copy small { max-width:570px; display:block; color:#77818d; font-size:.72rem; line-height:1.55; }
.continuity-copy a { color:#8ddfd9; text-underline-offset:3px; }
.continuity-demo { min-height:260px; display:grid; grid-template-columns:100px 90px minmax(180px,1fr); align-items:center; justify-content:center; }
.continuity-phone { position:relative; width:92px; height:190px; padding:11px 8px; display:grid; align-content:end; color:#fff; background:linear-gradient(180deg,#252a33,#050608); border:2px solid #747b85; border-radius:24px; box-shadow:0 24px 45px rgba(0,0,0,.35),inset 0 0 0 4px #090b0f; }
.continuity-phone::before { content:""; position:absolute; top:10px; left:50%; width:34px; height:9px; background:#020203; border-radius:99px; transform:translateX(-50%); }
.continuity-phone span { position:absolute; inset:40px 12px auto; height:72px; background:#f45791; border-radius:14px; box-shadow:0 0 25px rgba(244,87,145,.25); }
.continuity-phone code { position:relative; padding:8px 3px; background:#11151c; border-radius:8px; font-size:.64rem; text-align:center; }
.continuity-transfer { position:relative; z-index:3; display:grid; place-items:center; gap:8px; }
.continuity-transfer code { padding:8px 9px; color:#fff; background:#f45791; border:2px solid rgba(255,255,255,.8); border-radius:9px; box-shadow:0 10px 28px rgba(244,87,145,.35); animation:clipboard-hop 2.4s ease-in-out infinite; }
.continuity-transfer i { width:52px; height:1px; background:linear-gradient(90deg,transparent,#78dcd6,transparent); }
@keyframes clipboard-hop { 50% { transform:translateX(13px) scale(1.06); } }
.continuity-mac { position:relative; padding-bottom:24px; }
.continuity-mac > div { min-height:154px; padding:22px 17px; display:grid; align-content:center; gap:18px; background:#0a0d13; border:5px solid #6d747e; border-bottom-width:11px; border-radius:15px; box-shadow:0 28px 55px rgba(0,0,0,.35); }
.continuity-mac span { color:#89939f; font-size:.61rem; }
.continuity-mac code { color:#d6dbe2; font-size:clamp(.55rem,.8vw,.7rem); }
.continuity-mac b { color:#f57ca9; }
.continuity-mac > i { position:absolute; left:50%; bottom:9px; width:70%; height:12px; background:linear-gradient(90deg,#59606a,#aab0b7,#59606a); border-radius:0 0 50% 50%; transform:translateX(-50%); }
.history-card { background:linear-gradient(145deg, rgba(48,59,74,.75), rgba(18,22,30,.85)); }
.history-ribbon { position:absolute !important; left:38px; right:38px; bottom:42px; display:flex; }
.history-ribbon span { flex:1; height:76px; margin-right:-12px; border:3px solid #1a202b; border-radius:16px; box-shadow:-10px 12px 24px rgba(0,0,0,.18); }
.history-ribbon span:nth-child(1){background:#ff8c00}.history-ribbon span:nth-child(2){background:#400b11}.history-ribbon span:nth-child(3){background:#9a787d}.history-ribbon span:nth-child(4){background:#8b755f}.history-ribbon span:nth-child(5){background:#efba81}.history-ribbon span:nth-child(6){background:#f45791}.history-ribbon span:nth-child(7){background:#954a33}
.feedback-card-lens { background:linear-gradient(145deg, rgba(45,38,58,.8), rgba(17,20,29,.88)); }
.feedback-preview { position:absolute !important; left:40px; bottom:38px; width:calc(100% - 80px); padding:14px; display:grid; grid-template-columns:auto 1fr; column-gap:12px; color:#f6f7f8; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12); border-radius:16px; text-align:left; cursor:pointer; }
.feedback-preview strong,.feedback-preview small { display:block; }
.feedback-preview small { color:#9299a3; }
.feedback-orb { grid-row:1 / 3; width:34px; height:34px; align-self:center; background:var(--stage-color); border:4px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 24px rgba(var(--stage-rgb),.34); }
.feedback-preview.is-playing .feedback-orb { animation:feedback-pulse 480ms ease; }
@keyframes feedback-pulse { 50% { transform:scale(1.34); box-shadow:0 0 0 18px rgba(var(--stage-rgb),0); } }
.privacy-card-lens { grid-column:1 / -1; min-height:340px; display:grid; grid-template-columns:.6fr 1.4fr; align-items:center; gap:70px; background:linear-gradient(135deg, rgba(12,47,53,.82), rgba(14,18,27,.88)); }
.privacy-glyph { position:relative; height:220px; display:grid; place-items:center; }
.privacy-glyph::before { content:""; width:120px; height:135px; border:3px solid #59d7cf; border-radius:58% 58% 46% 46% / 43% 43% 60% 60%; box-shadow:0 0 70px rgba(89,215,207,.24); }
.privacy-glyph::after { content:""; position:absolute; top:26px; width:76px; height:76px; border:3px solid #59d7cf; border-bottom:0; border-radius:60px 60px 0 0; }
.privacy-glyph span { position:absolute; width:9px; height:48px; background:#59d7cf; border-radius:99px; }
.privacy-card-lens a { color:#83e7df; font-weight:750; text-decoration:none; }

.integrity-section { padding:150px max(20px, calc((100% - 1180px) / 2)); display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(60px,9vw,130px); background:#e8e7e2; color:#121419; }
.integrity-visual { position:relative; min-height:620px; overflow:hidden; border-radius:34px; box-shadow:0 34px 80px rgba(19,25,34,.18); }
.integrity-visual > img { width:100%; height:620px; object-fit:cover; }
.digital-swatch { position:absolute; right:24px; bottom:24px; width:170px; padding:12px; color:#fff; background:rgba(10,12,15,.78); border:1px solid rgba(255,255,255,.22); border-radius:20px; backdrop-filter:blur(18px); }
.digital-swatch span { display:block; height:100px; margin-bottom:10px; background:#954a33; border-radius:12px; }
.digital-swatch strong { display:block; text-align:center; }
.integrity-copy .eyebrow { color:#7d4b39; }
.integrity-copy > p:not(.eyebrow) { color:#5f646b; font-size:1.08rem; }
.integrity-list { margin:28px 0 0; padding:0; list-style:none; }
.integrity-list li { position:relative; margin:13px 0; padding-left:26px; color:#40444a; }
.integrity-list li::before { content:""; position:absolute; left:0; top:.53em; width:9px; height:9px; background:#3d7788; border-radius:50%; }

.lens-pricing { position:relative; padding:170px 20px; display:grid; place-items:center; overflow:hidden; }
.price-glow { position:absolute; width:min(850px,110vw); aspect-ratio:1.7; background:conic-gradient(from 80deg,rgba(61,119,136,.38),rgba(197,104,72,.38),rgba(217,177,91,.3),rgba(61,119,136,.38)); border-radius:50%; filter:blur(90px); opacity:.55; }
.price-panel { position:relative; z-index:2; width:min(820px,100%); padding:clamp(34px,7vw,76px); background:linear-gradient(145deg,rgba(29,38,53,.78),rgba(9,12,17,.88)); border:1px solid rgba(255,255,255,.14); border-radius:34px; box-shadow:0 42px 110px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.08); backdrop-filter:blur(24px); text-align:center; }
.price-panel > p:not(.eyebrow) { max-width:620px; margin:24px auto; color:#a2a9b2; }
.price-line { display:flex; align-items:center; justify-content:center; gap:24px; margin:34px 0; }
.price-line strong { font-size:clamp(4rem,9vw,7rem); line-height:.8; letter-spacing:-.08em; }
.price-line span { color:#a5acb5; font-size:.88rem; text-align:left; }
.store-badge { width:218px; min-height:62px; margin:0 auto; padding:8px 17px; display:flex; align-items:center; justify-content:center; gap:12px; color:#060708; background:#fff; border-radius:15px; font-weight:800; line-height:1.05; }
.store-badge i { font-size:1.8rem; font-style:normal; }
.store-badge span,.store-badge small { display:block; }
.store-badge small { font-size:.62rem; font-weight:600; }
.requirements { display:block; margin-top:18px; color:#747d88; }
.lens-footer { width:min(1320px,calc(100% - 40px)); }
.lens-footer { content-visibility:auto; contain-intrinsic-size:auto 260px; }

@media (max-width: 1060px) {
  .concept-stage { grid-template-columns: .75fr 1fr; }
  .hero-panels { display:none; }
  .experience-grid { gap:60px; }
  .format-float { right:-20px; }
}

@media (max-width: 820px) {
  .ambient-field { display:none; }
  .lens-header nav a:not(.nav-cta) { display:none; }
  .lens-hero { padding-top:70px; }
  .hero-title-group h1 { font-size:clamp(4rem,18vw,7rem); }
  .concept-stage { min-height:680px; grid-template-columns:1fr; }
  .scene-stack { display:none; }
  .hero-phone { width:min(310px,76vw); }
  .experience-grid { grid-template-columns:1fr; }
  .sticky-lens { top:82px; z-index:10; min-height:580px; padding:30px 0; background:linear-gradient(180deg,rgba(7,8,11,.97),rgba(7,8,11,.82) 82%,transparent); }
  .interactive-phone { width:min(280px,65vw); }
  .format-float { right:calc(50% - 235px); top:22%; }
  .lens-glow { filter:none; opacity:.52; }
  .lens-header,.phone-tools span,.mini-readout,.live-readout,.hero-chip,.capture-control,.format-float,.format-values > div,.digital-swatch,.price-panel { -webkit-backdrop-filter:none; backdrop-filter:none; }
  .drag-hint { display:none; }
  .story-steps { padding-bottom:0; }
  .story-step { min-height:70vh; padding:18vh 0; }
  .lens-bento { grid-template-columns:1fr; }
  .formats-card,.continuity-card,.privacy-card-lens { grid-column:auto; }
  .formats-card { min-height:auto; padding-right:44px; }
  .format-demo { position:relative !important; inset:auto; width:100%; margin-top:32px; grid-template-columns:1fr; transform:none; }
  .format-swatches { flex-direction:row; gap:10px; }
  .format-swatch { width:34px; height:34px; }
  .format-swatch.is-active span { transform:scale(1.4); }
  .format-values { transform:none; }
  .continuity-card { grid-template-columns:1fr; }
  .continuity-demo { width:min(520px,100%); margin:0 auto; }
  .privacy-card-lens { grid-template-columns:1fr; gap:20px; }
  .integrity-section { grid-template-columns:1fr; }
  .integrity-visual,.integrity-visual > img { min-height:520px; height:520px; }
}

@media (max-width: 560px) {
  .lens-header { width:calc(100% - 28px); }
  .lens-hero { width:calc(100% - 28px); min-height:auto; padding-bottom:110px; }
  .hero-title-group > .eyebrow { font-size:.65rem; }
  .hero-links .button { width:100%; }
  .concept-stage { min-height:610px; }
  .hero-phone { width:260px; }
  .hero-chip { width:78px; padding:7px; font-size:.58rem; }
  .hero-chip i { height:48px; }
  .chip-pink { left:-26px; }.chip-bridge{right:-24px}.chip-sunset{left:-18px}
  .scroll-cue { bottom:22px; }
  .lens-experience,.lens-features,.integrity-section { padding-top:105px; padding-bottom:105px; }
  .experience-intro { margin-bottom:30px; }
  .sticky-lens { min-height:530px; }
  .interactive-phone { width:245px; }
  .format-float { right:3px; width:138px; }
  .story-step h3 { font-size:clamp(2.6rem,12vw,4rem); }
  .format-demo { padding:16px 12px; }
  .format-swatches { gap:7px; }
  .format-swatch { width:30px; height:30px; border-radius:11px; }
  .format-swatch.is-active span { transform:scale(1.38); }
  .continuity-demo { grid-template-columns:75px 55px minmax(140px,1fr); min-height:220px; }
  .continuity-phone { width:68px; height:145px; border-radius:19px; }
  .continuity-phone span { inset:33px 10px auto; height:48px; }
  .continuity-transfer code { padding:6px; font-size:.54rem; }
  .continuity-transfer i { width:35px; }
  .continuity-mac > div { min-height:120px; padding:15px 10px; }
  .lens-card { min-height:390px; border-radius:24px; }
  .history-ribbon { left:22px; right:22px; }
  .feedback-preview { left:24px; width:calc(100% - 48px); }
  .integrity-visual,.integrity-visual > img { min-height:450px; height:450px; }
  .digital-swatch { width:130px; }
  .digital-swatch span { height:72px; }
  .price-line { align-items:flex-start; flex-direction:column; }
  .price-line span { text-align:center; }
}

@media (hover: none), (pointer: coarse) {
  .card-shine { display:none; }
  .drag-hint { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue i { animation:none; }
  .lens-surface > img,.story-step,.ambient-field,.format-swatch span { transition:none; }
  .continuity-transfer code { animation:none; }
}