/* ORA — W1 funnel styles (28-Sep-2026): shared by index.html and web.html. Sections: nav install pill, live-on strip, install→live unit, case card, integrations, install timeline, faq, install form, closing beat. */

/* ===== 28-Sep: W1 funnel — nav install, live-on, install→live, case, integrations, timeline, faq, install form, closing beat ===== */
.bag{ width:1em; height:1em; flex:0 0 auto; }
.nav-install{ display:inline-flex!important; align-items:center; gap:.45em; background:var(--ink); color:#fff!important; border-radius:100px; margin-left:.35em;
  /* 29-Sep (Kv): sits inside the 48px pill, hugging its right edge, instead of overhanging it */
  height:36px; padding:0 1em!important; line-height:1; box-sizing:border-box; margin-right:-20px!important; white-space:nowrap; opacity:1!important; }
.nav-pill a.nav-install:hover{ opacity:1!important; }
.nav.is-dark .nav-install, .nav.inv .nav-install{ background:#fff; color:var(--ink)!important; }
.nav-install:hover{ background:var(--accent); color:#fff!important; }
@media(max-width:860px){ .nav-install{ display:none!important; } }
.btn-install .bag{ margin-right:.1em; }
.inst-done[hidden], .inst-err[hidden], .case-stat[hidden], .inst-form[hidden]{ display:none!important; }
@media(min-width:861px) and (max-width:1180px){ .nav-install span{ font-size:0; } .nav-install span::after{ content:'Install'; font-size:.9rem; } .nav-install{ padding:0 .85em!important; } }

.liveon{ padding-block:clamp(28px,4vh,44px) 0; }
.lo-row{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 34px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:18px; }
.lo-item{ display:flex; align-items:baseline; gap:10px; font-size:.95rem; }
.lo-dot{ width:8px; height:8px; border-radius:50%; background:var(--mute-2); transform:translateY(-1px); }
.lo-item.is-live .lo-dot{ background:var(--green); box-shadow:0 0 0 4px rgba(0,185,130,.15); }
.lo-item.is-next .lo-dot{ background:var(--yellow); }
.lo-name{ color:var(--ink); }
.lo-meta{ color:var(--mute); font-size:.85rem; }
.lo-meta a{ color:var(--accent); text-decoration:none; }
.lo-item.is-demo{ margin-left:auto; }
@media(max-width:860px){ .lo-item.is-demo{ margin-left:0; } }

.il{ padding-block:clamp(72px,11vh,150px); }
.il-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,5vw,80px); align-items:center; }
.il-lede{ margin-top:22px; max-width:48ch; font-size:var(--fs-body); line-height:1.5; color:var(--mute); }
.il-meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:30px 0 0; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.il-meta dt{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.il-meta dd{ margin:6px 0 0; font-size:.92rem; line-height:1.4; color:var(--ink); }
.il-bul{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:8px; }
.il-bul li{ position:relative; padding-left:18px; font-size:.95rem; color:var(--ink-2); }
.il-bul li::before{ content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.il-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.il-panel{ position:relative; aspect-ratio:4/5; max-height:620px; border-radius:22px; background:var(--surface); overflow:hidden; }
.il-frame{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:8%; opacity:0; transform:translateY(12px); animation:ilcycle 7.5s var(--ease) infinite; }
.il-frame.f2{ animation-delay:2.5s; } .il-frame.f3{ animation-delay:5s; }
@keyframes ilcycle{ 0%{opacity:0;transform:translateY(12px)} 6%{opacity:1;transform:none} 30%{opacity:1;transform:none} 36%{opacity:0;transform:translateY(-8px)} 100%{opacity:0} }
@media(prefers-reduced-motion:reduce){ .il-frame{ animation:none; } .il-frame.f3{ opacity:1; transform:none; } }
.il-cap{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.il-win{ width:100%; background:#fff; border-radius:14px; box-shadow:0 20px 50px rgba(15,16,18,.12); overflow:hidden; }
.il-bar{ display:flex; align-items:center; gap:6px; padding:10px 12px; border-bottom:1px solid var(--line); font-size:.66rem; color:var(--mute); }
.il-bar i{ width:8px; height:8px; border-radius:50%; background:var(--line); } .il-bar span{ margin-left:8px; }
.il-body{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:22px 18px; }
.il-app{ display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--ink); } .il-app img{ width:26px; height:26px; }
.il-btn{ display:inline-flex; align-items:center; gap:.4em; background:var(--ink); color:#fff; border-radius:100px; padding:.5em 1em; font-size:.8rem; }
.il-try{ background:var(--accent); } .il-try .bag{ width:.95em; height:.95em; }
.il-pdp{ align-items:stretch; }
.il-pimg{ flex:0 0 42%; border-radius:10px; overflow:hidden; background:var(--surface-2); } .il-pimg img{ width:100%; height:100%; object-fit:cover; display:block; }
.il-pcol{ display:flex; flex-direction:column; gap:8px; justify-content:center; font-size:.85rem; color:var(--mute); } .il-pcol b{ font-weight:400; color:var(--ink); }
.il-phone{ position:relative; width:min(62%,240px); aspect-ratio:9/19; border-radius:28px; overflow:hidden; background:#000; box-shadow:0 30px 60px rgba(15,16,18,.22); border:6px solid #111; }
.il-phone img{ width:100%; height:100%; object-fit:cover; display:block; }
.il-live{ position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:6px; font-size:.62rem; letter-spacing:.1em; color:#fff; background:rgba(0,0,0,.5); border-radius:100px; padding:.35em .7em; }
.il-live i{ width:6px; height:6px; border-radius:50%; background:var(--accent); animation:ilpulse 1.2s ease-in-out infinite; }
@keyframes ilpulse{ 50%{ opacity:.35; } }
@media(max-width:960px){ .il-grid{ grid-template-columns:1fr; } .il-panel{ aspect-ratio:4/4.4; max-height:520px; } .il-meta{ grid-template-columns:1fr; gap:12px; } }

.case{ padding-bottom:clamp(40px,7vh,90px); }
.case-card{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-areas:"head media" "meta media" "result media"; gap:0 clamp(24px,4vw,60px); background:var(--ink); color:#fff; border-radius:24px; padding:clamp(24px,3.5vw,48px); }
.case-head{ grid-area:head; } .case-head .label{ color:rgba(253,253,253,.55); } .case-head .label .n{ color:var(--accent); }
.case-head h3{ margin-top:14px; font-size:var(--fs-display); font-weight:300; letter-spacing:-.02em; line-height:1.04; }
.case-meta{ grid-area:meta; display:grid; grid-template-columns:repeat(4,auto); gap:18px 28px; margin:28px 0 0; padding:20px 0; border-top:1px solid rgba(253,253,253,.14); border-bottom:1px solid rgba(253,253,253,.14); }
.case-meta dt{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(253,253,253,.5); }
.case-meta dd{ margin:6px 0 0; font-size:.95rem; }
.case-stat{ grid-column:1/-1; } .case-stat dd{ display:flex; align-items:baseline; gap:12px; }
.cs-num{ font-size:clamp(2rem,4vw,3.4rem); font-weight:300; letter-spacing:-.03em; line-height:1; } .cs-since{ font-size:.78rem; color:rgba(253,253,253,.5); }
.case-result{ grid-area:result; margin:22px 0 0; max-width:48ch; font-size:.98rem; line-height:1.5; color:rgba(253,253,253,.78); }
.cr-k{ display:block; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.case-media{ grid-area:media; align-self:stretch; border-radius:16px; overflow:hidden; background:#000; min-height:280px; }
.case-media video{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:960px){ .case-card{ grid-template-columns:1fr; grid-template-areas:"head" "media" "meta" "result"; } .case-meta{ grid-template-columns:repeat(2,1fr); } .case-media{ margin-top:22px; aspect-ratio:4/3; min-height:0; } }

.int-list{ list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.int{ display:flex; flex-direction:column; gap:12px; padding:22px; border:1px solid var(--line); border-radius:18px; background:var(--surface-2); }
.int h4{ display:flex; align-items:center; gap:.4em; margin:0; font-size:1.2rem; font-weight:400; letter-spacing:-.01em; }
.int p{ margin:0; font-size:.92rem; line-height:1.5; color:var(--mute); } .int p code{ font-size:.85em; background:var(--surface); padding:.1em .4em; border-radius:6px; color:var(--ink); }
.int p a{ color:var(--ink); }
.int-badge{ align-self:flex-start; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; padding:.35em .7em; border-radius:100px; border:1px solid var(--line); color:var(--mute); }
.int-badge.is-live{ border-color:transparent; background:rgba(0,185,130,.14); color:#067a57; }
.int-go{ margin-top:auto; color:var(--accent); text-decoration:none; font-size:.9rem; }
@media(max-width:860px){ .int-list{ grid-template-columns:1fr; } }

.tml{ list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;  }
.tml li{ padding:22px 0 0; border-top:1px solid var(--ink); }
.tml-n{ display:block; font-size:.7rem; letter-spacing:.1em; color:var(--accent); } .tml-t{ display:block; margin-top:14px; font-size:clamp(1.4rem,2.4vw,2rem); font-weight:300; letter-spacing:-.02em; line-height:1.05; }
.tml h4{ margin:14px 0 6px; font-size:1rem; font-weight:400; } .tml p{ margin:0; font-size:.92rem; line-height:1.5; color:var(--mute); }
@media(max-width:860px){ .tml{ grid-template-columns:1fr; } }

.faq{ margin-top:26px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:18px 40px 18px 0; position:relative; font-size:1.08rem; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); color:var(--accent); font-size:1.3rem; font-weight:300; transition:transform .35s var(--ease); }
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq p{ margin:0 0 20px; max-width:60ch; font-size:.95rem; line-height:1.55; color:var(--mute); }

.install{ background:var(--surface-2); border-radius:24px; border-top:0; margin-top:clamp(24px,4vh,48px); }
.inst-form{ margin-top:26px; max-width:640px; }
.inst-form .row{ display:flex; gap:12px; flex-wrap:wrap; } .inst-form .row > *{ flex:1 1 220px; min-width:0; }
.inst-form .fld{ display:block; margin-bottom:12px; } .inst-form .fld span{ display:block; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--mute); margin-bottom:6px; }
.inst-form input,.inst-form select{ width:100%; font:inherit; font-size:.95rem; color:var(--ink); padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; outline:none; appearance:none; -webkit-appearance:none; }
.inst-form input:focus,.inst-form select:focus{ border-color:var(--ink); }
.inst-form input.is-bad{ border-color:var(--accent); }
.inst-foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:8px; }
.inst-err{ font-size:.85rem; color:var(--ink); } .inst-err a{ color:var(--accent); }
.inst-done{ display:flex; gap:14px; align-items:flex-start; margin-top:26px; max-width:52ch; font-size:1.02rem; line-height:1.5; }
.inst-done .n{ color:var(--green); font-size:1.3rem; line-height:1.2; } .inst-done p{ margin:0; } .inst-done a{ color:var(--accent); }

.closebeat{ background:var(--ink); color:#fff; margin-top:clamp(56px,9vh,120px); padding-block:clamp(90px,16vh,200px); }
.cb-in{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(18px,3vh,30px); }
.cb-line{ margin:0; font-size:clamp(1.9rem,4vw,3.8rem); font-weight:300; letter-spacing:-.025em; line-height:1.08; max-width:20ch; }
.cb-sub{ margin:0; font-size:clamp(1rem,1.25vw,1.25rem); color:rgba(255,255,255,.6); max-width:46ch; line-height:1.45; }
.cb-ctas{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.cb-ghost{ color:#fff; border-color:rgba(255,255,255,.4); }
.cb-lockup{ height:clamp(28px,3.2vw,44px); width:auto; opacity:.92; margin-top:clamp(20px,4vh,40px); }

/* ===== dark register (product pages, body.dark) ===== */
body.dark .lo-row{ border-color:rgba(255,255,255,.14); } body.dark .lo-name{ color:#fff; } body.dark .lo-meta{ color:rgba(255,255,255,.55); }
body.dark .il-lede, body.dark .il-bul li, body.dark .il-meta dd{ color:rgba(255,255,255,.72); } body.dark .il-bul li{ color:rgba(255,255,255,.85); }
body.dark .il-meta{ border-color:rgba(255,255,255,.14); } body.dark .il-panel{ background:#1a1b1e; }
body.dark .case-card{ background:#141517; border:1px solid rgba(255,255,255,.1); }
body.dark .int{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12); } body.dark .int h4{ color:#fff; } body.dark .int p{ color:rgba(255,255,255,.6); }
body.dark .int p code{ background:rgba(255,255,255,.08); color:#fff; } body.dark .int p a{ color:#fff; } body.dark .int-badge{ border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.6); }
body.dark .int-badge.is-live{ background:rgba(0,185,130,.18); color:#3ddc9d; }
body.dark .tml li{ border-top-color:rgba(255,255,255,.7); } body.dark .tml h4{ color:#fff; } body.dark .tml p{ color:rgba(255,255,255,.6); } body.dark .tml-t{ color:#fff; }
body.dark .faq, body.dark .faq details{ border-color:rgba(255,255,255,.14); } body.dark .faq summary{ color:#fff; } body.dark .faq p{ color:rgba(255,255,255,.6); }
body.dark .install{ background:#141517; } body.dark .inst-form input, body.dark .inst-form select{ background:#1d1e21; border-color:rgba(255,255,255,.16); color:#fff; }
body.dark .inst-form input:focus, body.dark .inst-form select:focus{ border-color:#fff; } body.dark .inst-form .fld span{ color:rgba(255,255,255,.5); }
body.dark .inst-err, body.dark .inst-done{ color:#fff; } body.dark .closer .main h3, body.dark .closer .idx{ color:#fff; }
body.dark .mg{ color:#fff; }
/* merchants-get 2x2 (W1 page) */
.mg{ list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.mg li{ padding:24px; border:1px solid var(--line); border-radius:18px; } body.dark .mg li{ border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.03); }
.mg .n{ display:block; font-size:.7rem; letter-spacing:.1em; color:var(--accent); } .mg h4{ margin:12px 0 8px; font-size:1.25rem; font-weight:400; letter-spacing:-.01em; }
.mg p{ margin:0; font-size:.93rem; line-height:1.5; color:var(--mute); } body.dark .mg p{ color:rgba(255,255,255,.6); }
@media(max-width:760px){ .mg{ grid-template-columns:1fr; } }

/* ===== 29-Sep: ORA Digital System placements =====
   Closing beats carry the Reflective / Runway plates (photographic, right third), always under a
   black scrim so the line stays legible; the Case card carries the Signal grid. */
.closebeat.plate{ position:relative; overflow:hidden; background:#000; }
.closebeat.plate::before{ content:""; position:absolute; inset:0; background-repeat:no-repeat; background-size:cover; background-position:right center; opacity:.95; }
.closebeat.plate::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.86) 38%,rgba(0,0,0,.35) 70%,rgba(0,0,0,.15) 100%); }
.closebeat.plate .cb-in{ position:relative; z-index:1; }
.closebeat.plate-reflective::before{ background-image:url(ds/plate-reflective.webp); }
.closebeat.plate-runway::before{ background-image:url(ds/plate-runway.webp); }
@media(max-width:760px){
  .closebeat.plate-reflective::before{ background-image:url(ds/plate-reflective-900.webp); background-position:78% center; }
  .closebeat.plate-runway::before{ background-image:url(ds/plate-runway-900.webp); background-position:78% center; }
  .closebeat.plate::after{ background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.82) 45%,rgba(0,0,0,.9) 100%); }
}
.case-card{ position:relative; overflow:hidden; }
.case-card::before{ content:""; position:absolute; inset:0; background:url(ds/signal-grid.webp) repeat; background-size:300px; opacity:.35; pointer-events:none; }
.case-card > *{ position:relative; }

/* ===== 29-Sep: live proof chip — the honest 1954 counter beside Install buttons (ORAKIT.live → [data-live]).
   Hidden until the stats route answers with a real number; ?live=off hides it. ===== */
.live-proof{ display:flex; align-items:flex-start; gap:8px; margin:14px 0 0; font-size:.78rem; line-height:1.35; color:var(--mute); }
.live-proof[hidden]{ display:none!important; }
.live-proof b{ font-weight:400; color:var(--ink); }
.live-proof .dot{ width:7px; height:7px; margin-top:.36em; border-radius:50%; background:var(--accent); flex:none; animation:lpping 2.4s var(--ease) infinite; }
.live-proof.on-dark{ color:rgba(255,255,255,.62); } .live-proof.on-dark b{ color:#fff; }
.cb-in .live-proof, .ppd-hero .live-proof{ justify-content:center; }
.ibar .live-proof .dot{ margin-top:0; }
@keyframes lpping{ 0%{ box-shadow:0 0 0 0 rgba(255,94,31,.55); } 70%,100%{ box-shadow:0 0 0 9px rgba(255,94,31,0); } }

/* ===== 29-Sep: phone-only Install bar (funnel.js injects it on every page). position:fixed UI, not a pinned section.
   Shows once the page has scrolled, while no Install button, the demo or the form is on screen. ===== */
.ibar{ position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); z-index:40; display:none; align-items:center; gap:10px;
  background:var(--ink); color:#fff; border-radius:100px; padding:7px 7px 7px 16px; box-shadow:0 18px 40px -18px rgba(0,0,0,.55);
  transform:translateY(160%); opacity:0; transition:transform .45s var(--ease), opacity .45s var(--ease); }
.ibar.in{ transform:none; opacity:1; }
.ibar .live-proof{ flex:1; min-width:0; margin:0; align-items:center; white-space:nowrap; overflow:hidden; }
.ibar .live-proof > span:last-child{ overflow:hidden; text-overflow:ellipsis; }
.ibar-fb{ flex:1; min-width:0; font-size:.78rem; color:rgba(255,255,255,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ibar-fb[hidden]{ display:none; }
.ibar .btn{ flex:none; padding:.7em 1.1em; font-size:.86rem; }
@media(max-width:900px){ .ibar{ display:flex; } }

/* ===== 29-Sep: store preview — #install-live's panel is the visitor's own product page with the Try it on button.
   Motion: transform + opacity only, short, on interaction. ===== */
.pv-grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); grid-template-areas:"head stage" "rest stage"; align-items:start; row-gap:0; }
.pv-head{ grid-area:head; min-width:0; } .pv-rest{ grid-area:rest; min-width:0; } .pv-stage{ grid-area:stage; min-width:0; position:relative; }
.pv-steps{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 16px; margin:26px 0 0; padding:0; font-size:.78rem; color:var(--mute-2); }
.pv-steps li{ display:flex; gap:.5em; align-items:center; transition:color .4s var(--ease); }
.pv-steps li i{ width:18px; height:1px; background:currentColor; display:inline-block; }
.pv-steps li.on{ color:var(--ink); } .pv-steps b{ font-weight:400; } .pv-steps li.on b{ color:var(--accent); }
.pv-probe{ display:flex; gap:10px; align-items:flex-end; margin-top:22px; max-width:560px; }
.pv-probe .fld{ flex:1; min-width:0; display:block; }
.pv-probe .fld span{ display:block; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--mute); margin-bottom:6px; }
.pv-probe input{ width:100%; font:inherit; font-size:.95rem; color:var(--ink); padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; outline:none; appearance:none; -webkit-appearance:none; }
.pv-probe input:focus{ border-color:var(--ink); } .pv-probe input.is-bad{ border-color:var(--accent); }
.pv-probe .btn{ flex:none; }
.pv-probe .btn[disabled]{ opacity:.55; cursor:progress; transform:none; }
.pv-note{ margin:10px 0 0; max-width:56ch; min-height:1.4em; font-size:.8rem; line-height:1.45; color:var(--mute); }
.pv-note b{ font-weight:400; color:var(--ink); }
.pv-facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:24px 0 0; max-width:560px; }
.pv-facts[hidden]{ display:none; }
.pv-facts div{ background:var(--paper,#fdfdfd); padding:14px 14px 12px; min-width:0; }
.pv-facts dt{ font-size:.7rem; color:var(--mute); }
.pv-facts dd{ margin:4px 0 0; font-size:clamp(1.15rem,1.8vw,1.5rem); font-weight:300; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv-rest .il-meta{ margin-top:28px; }

.pv-wrap{ position:relative; transition:opacity .5s var(--ease), transform .5s var(--ease); }
.pv-stage.busy .pv-wrap{ opacity:.45; transform:translateY(6px); }
.pv-win{ position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 40px 80px -48px rgba(15,16,18,.35); }
.pv-bar{ display:flex; align-items:center; gap:6px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface); }
.pv-bar i{ width:9px; height:9px; border-radius:50%; background:#d9d9dd; flex:none; }
.pv-url{ margin-left:10px; flex:1; min-width:0; background:#fff; border-radius:8px; padding:5px 10px; font-size:.74rem; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pv-url b{ font-weight:400; color:var(--ink); }
.pv-pdp{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(16px,2.4vw,32px); padding:clamp(16px,2.4vw,32px); }
.pv-img{ position:relative; aspect-ratio:4/5; background:var(--surface); border-radius:10px; overflow:hidden; }
.pv-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .45s var(--ease), transform .7s var(--ease); }
.pv-img img.swap{ opacity:0; transform:scale(1.02); }
.pv-col{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.pv-shop{ font-size:.72rem; color:var(--mute); letter-spacing:.04em; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv-title{ font-size:clamp(1.05rem,1.6vw,1.45rem); font-weight:400; letter-spacing:-.02em; line-height:1.15; overflow-wrap:anywhere; }
.pv-price{ font-size:.95rem; }
.pv-opt{ font-size:.72rem; color:var(--mute); margin-top:4px; } .pv-opt:empty{ display:none; }
.pv-chips{ display:flex; flex-wrap:wrap; gap:6px; } .pv-chips:empty{ display:none; }
.pv-chips span{ border:1px solid var(--line); border-radius:8px; padding:5px 9px; font-size:.78rem; min-width:36px; text-align:center; }
.pv-chips span:first-child{ border-color:var(--ink); }
.pv-atc{ margin-top:6px; background:var(--ink); color:#fff; border-radius:10px; padding:.85em; text-align:center; font-size:.86rem; }
.pv-try{ position:relative; display:flex; align-items:center; justify-content:center; gap:.5em; border:1px solid var(--accent); color:var(--accent); background:#fff; border-radius:10px; padding:.85em; font:inherit; font-size:.86rem; cursor:pointer;
  opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease), background .3s, color .3s; }
.pv-try.in{ opacity:1; transform:none; }
.pv-try:hover, .pv-try:focus-visible{ background:var(--accent); color:#fff; }
.pv-try:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.pv-try .tag{ position:absolute; right:-8px; top:-10px; background:var(--ink); color:#fff; font-size:.6rem; letter-spacing:.06em; border-radius:100px; padding:3px 7px; text-transform:uppercase; }
.pv-strip{ display:flex; gap:8px; padding:0 clamp(16px,2.4vw,32px) clamp(16px,2.4vw,24px); overflow-x:auto; scrollbar-width:none; }
.pv-strip::-webkit-scrollbar{ display:none; } .pv-strip[hidden]{ display:none; }
.pv-strip button{ flex:0 0 auto; width:52px; aspect-ratio:4/5; border-radius:6px; overflow:hidden; border:1px solid var(--line); padding:0; background:var(--surface); cursor:pointer; opacity:.6; transition:opacity .3s, border-color .3s; }
.pv-strip button img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-strip button[aria-pressed="true"]{ opacity:1; border-color:var(--ink); }
.pv-strip button:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.pv-cap{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:12px; font-size:.74rem; color:var(--mute); }

/* the recorded session, labelled as such */
.pv-phone{ position:absolute; right:-6px; bottom:-26px; width:clamp(150px,32%,228px); z-index:3; opacity:0; transform:translateY(24px) scale(.97); pointer-events:none; transition:opacity .55s var(--ease), transform .55s var(--ease); }
.pv-phone.in{ opacity:1; transform:none; pointer-events:auto; }
.pv-phone .ora-device{ filter:drop-shadow(0 30px 40px rgba(15,16,18,.28)); }
.pv-phone .ora-device video{ background:#f4f4f5; }
.pv-pcap{ margin:10px 0 0; font-size:.72rem; color:var(--mute); line-height:1.35; background:var(--paper,#fdfdfd); padding:8px 10px; border-radius:10px; border:1px solid var(--line); }
.pv-pcap a{ color:var(--accent); }
.pv-x{ position:absolute; top:-10px; left:-10px; z-index:4; width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; font:inherit; font-size:.95rem; line-height:1; }
.pv-x:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* step 3 handoff + share */
.pv-acts{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px; }
.pv-acts[hidden], .pv-next[hidden], .pv-share[hidden], .pv-sharebtn[hidden]{ display:none!important; }
.pv-quiet{ display:inline-flex; align-items:center; gap:.5em; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:100px; padding:.7em 1.15em; font:inherit; font-size:.86rem; cursor:pointer; text-decoration:none; transition:border-color .3s var(--ease); }
.pv-quiet:hover, .pv-quiet:focus-visible{ border-color:var(--ink); }
.pv-quiet:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.pv-quiet[disabled]{ opacity:.5; cursor:not-allowed; }
.pv-next{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; margin-top:40px; padding-top:18px; border-top:1px solid var(--line); }
.pv-next .label .n{ color:var(--accent); }
.pv-next .btn{ max-width:100%; } .pv-next .btn span{ overflow:hidden; text-overflow:ellipsis; }
.pv-share{ margin-top:18px; padding:16px; border:1px solid var(--line); border-radius:18px; background:var(--surface-2,#f8f8f8); }
.pv-card{ position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#fff; }
.pv-card canvas{ display:block; width:100%; height:auto; aspect-ratio:1200/630; }
.pv-card .wait{ position:absolute; inset:0; display:grid; place-items:center; color:var(--mute); font-size:.84rem; background:var(--surface); }
.pv-card .wait[hidden]{ display:none; }
.pv-link{ margin-top:12px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; color:var(--mute); background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px; word-break:break-all; }
.pv-toast{ margin:8px 0 0; min-height:1.3em; font-size:.78rem; color:var(--accent); }
.pv-share .note{ margin:10px 0 0; font-size:.74rem; color:var(--mute); max-width:62ch; }

@media(max-width:960px){
  .pv-grid{ grid-template-columns:minmax(0,1fr); grid-template-areas:"head" "stage" "rest"; row-gap:22px; }
  .pv-stage{ margin-bottom:24px; }
}
@media(max-width:560px){
  .pv-probe{ flex-direction:column; align-items:stretch; }
  .pv-pdp{ gap:12px; padding:12px; }
  .pv-title{ font-size:1rem; }
  .pv-chips span{ padding:4px 6px; font-size:.7rem; min-width:28px; }
  .pv-atc, .pv-try{ padding:.7em; font-size:.78rem; }
  .pv-phone{ width:46%; left:12px; right:auto; bottom:-36px; }
  .pv-facts dd{ font-size:1.1rem; }
  .pv-acts .pv-quiet, .pv-acts .btn{ flex:1 1 calc(50% - 10px); justify-content:center; }
}

/* install form: store locked by the preview, dry-run payload */
.inst-lock{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; padding:11px 14px; background:var(--surface); min-width:0; }
.inst-lock[hidden], .inst-form input[hidden]{ display:none!important; }
.inst-lock b{ font-weight:400; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.95rem; }
.inst-lock .ok{ color:var(--accent); font-size:.74rem; white-space:nowrap; }
.inst-lock button{ background:none; border:0; padding:0; font:inherit; font-size:.78rem; color:var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.inst-dry{ margin:18px 0 0; max-width:640px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; line-height:1.5; color:var(--mute); background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; white-space:pre-wrap; word-break:break-word; }
.inst-dry[hidden]{ display:none; }

@media(prefers-reduced-motion:reduce){
  .live-proof .dot{ animation:none; }
  .ibar, .pv-wrap, .pv-try, .pv-phone, .pv-img img, .pv-steps li{ transition:none!important; }
  .pv-try{ opacity:1; transform:none; }
}

/* ===== 29-Sep (Kv): Case 001 wears B Label's own identity — their terracotta, honey bee, cream wordmark, sage labels.
   Palette from the B Label site tokens (B Label/site): terra-deep #9E521D, honey #DFBA5B, cream #FFFBCE, sage #CFDDCE.
   ORA's orange stays only on the ORA side of the slider. */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Kv 29-Sep: back to the site's black beat (and its signal grid); B Label shows through the emblem, wordmark and accents only */
.case-card.brand-blabel{ color:#FFFBCE; }
.case-card.brand-blabel .case-head .label{ color:#DFBA5B; } .case-card.brand-blabel .case-head .label .n{ color:#DFBA5B; }
.case-card.brand-blabel .bl-lockup{ display:flex; align-items:center; gap:clamp(12px,1.6vw,20px); margin-top:18px; line-height:1; }
.case-card.brand-blabel .bl-bee{ width:clamp(54px,6vw,78px); height:auto; color:#DFBA5B; flex:0 0 auto; }
.case-card.brand-blabel .bl-wm{ height:clamp(30px,3.6vw,46px); width:auto; color:#FFFBCE; }
.case-card.brand-blabel .case-meta dt{ color:#CFDDCE; }
.case-card.brand-blabel .case-meta dd, .case-card.brand-blabel .cs-num{ color:#FFFBCE; }
.case-card.brand-blabel .cs-since{ color:rgba(255,251,206,.7); }
.case-card.brand-blabel .case-result{ color:rgba(255,251,206,.88); }
.case-card.brand-blabel .cr-k{ color:#DFBA5B; }