/* ===== styles.css ===== */
/* Lume landing page. Standalone; no build step. Type is the system face (SF on Apple devices). */
:root{
  --black:#000; --ink:#F5F5F7; --dim:rgba(245,245,247,.7); --faint:rgba(245,245,247,.5); --line:rgba(245,245,247,.12);
  --amber:#FFC400; --red:#FF453A; --panel:#0C0C0D; --panel2:#151516;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --rnd:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --ly:#FFD60A; --lr:#FF453A; /* the app's chrome type and its system yellow / red */
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.3,1.35,.5,1);
  --pad:clamp(20px,5vw,72px); --pw:clamp(232px,24vw,318px);
}
*{box-sizing:border-box;margin:0}
html{background:var(--black);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-size:18px;line-height:1.5;font-weight:400}
main{overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h2{font-weight:700;letter-spacing:-.04em;line-height:1.02;font-size:clamp(40px,5.4vw,84px);text-wrap:balance}
h2 em{font-style:normal;color:var(--faint)}
h3{font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:20px}
.eyebrow.mode{color:var(--amber)}
.lede{font-size:clamp(17px,1.35vw,20px);color:var(--dim);max-width:33em;margin-top:24px;letter-spacing:-.01em}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;background:var(--amber);color:#000;font-weight:600;font-size:16px;letter-spacing:-.01em;text-decoration:none;transition:transform .25s var(--spring),box-shadow .3s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 40px -8px rgba(255,196,0,.55)}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px}
.btn-sm{height:36px;padding:0 16px;font-size:14px}
.btn-lg{height:58px;padding:0 30px;font-size:17px}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--faint)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px var(--pad);transition:background .4s}
.nav.solid{background:rgba(0,0,0,.62);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;letter-spacing:-.02em}
.brand img{border-radius:7px}
.nav-links{display:flex;gap:28px;font-size:14px}
.nav-links a{text-decoration:none;color:var(--dim);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav .btn{opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .3s,transform .3s var(--ease)}
.nav.solid .btn{opacity:1;pointer-events:auto;transform:none}
.sticky-cta{display:none}

/* ─────────── PHONE: the Lume camera chrome. 1em = 1 iOS point; the screen is 440 x 956 pt.
   Every measure comes from site/UI-SPEC.md (the app source); icons are the inline sprite (assets/lume-ui.svg). ─────────── */
.phone{font-size:calc(var(--pw) / 460.533);width:460.533em;padding:10.267em;border-radius:72.3em;background:linear-gradient(145deg,#4a4a4d,#1b1b1d 30%,#0c0c0d 70%,#3a3a3d);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 44em 103em -29em rgba(0,0,0,.9),0 0 132em -44em rgba(255,196,0,.16);position:relative;user-select:none;-webkit-user-select:none;flex:none;font-family:var(--rnd)}
.ph-screen{position:relative;width:440em;height:956em;border-radius:62em;background:#000;overflow:hidden;color:#fff;font-family:var(--rnd);font-weight:600;line-height:1.2;font-synthesis:none}
.ph-screen::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 7.5em rgba(255,69,58,.75);opacity:0;transition:opacity .3s;pointer-events:none;z-index:40}
.ph-screen.rec::after{opacity:1}
.ph-island{position:absolute;top:11em;left:157.5em;width:125em;height:37em;border-radius:18.5em;background:#000;z-index:45}
/* type: chrome text sits in leaf spans sized in points (s11 = 11 pt) so the box em stays 1 pt */
.s8{font-size:8em}.s9{font-size:9em}.s10{font-size:10em}.s11{font-size:11em}.s12{font-size:12em}.s13{font-size:13em}.s14{font-size:14em}.s15{font-size:15em}
.tn{font-variant-numeric:tabular-nums}
.ic{display:block;flex:none;overflow:visible}
/* viewfinder: full width, 24 pt corners (measured: the app's continuous curve stays within 0.4 pt of a 24 pt arc) */
.vf{position:absolute;left:0;width:440em;border-radius:24em;overflow:hidden;background:#111}
.vf-full{top:53.333em;height:782.2em}
.vf-43{top:142.333em;height:586.667em}
.vf .pic,.vf video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.grid{position:absolute;inset:0;pointer-events:none;z-index:2;background:
  linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)) 33.333% 0/.75em 100% no-repeat,linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)) 66.667% 0/.75em 100% no-repeat,
  linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)) 0 33.333%/100% .75em no-repeat,linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)) 0 66.667%/100% .75em no-repeat,
  linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)) 33.333% 0/2em 100% no-repeat,linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)) 66.667% 0/2em 100% no-repeat,
  linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)) 0 33.333%/100% 2em no-repeat,linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)) 0 66.667%/100% 2em no-repeat}
/* level: a 70 pt ring; phone arcs fixed, level arcs roll, at level they close into one yellow circle */
.level{position:absolute;left:50%;top:50%;width:74em;height:74em;margin:-37em;fill:none;pointer-events:none;z-index:2}
.lv-ph{stroke:rgba(255,255,255,.35);stroke-width:1.5;animation:lvArc 7s infinite}
.lv-lv{stroke:rgba(255,255,255,.9);stroke-width:2;stroke-linecap:round;animation:lvArc 7s infinite}
.lv-roll{animation:lvRoll 7s cubic-bezier(.4,0,.2,1) infinite}
.lv-ok{stroke:var(--ly);stroke-width:2;opacity:0;animation:lvOk 7s infinite}
@keyframes lvRoll{0%{transform:rotate(9deg)}30%{transform:rotate(-5deg)}52%,100%{transform:rotate(0)}}
@keyframes lvArc{0%,52%{opacity:1}55%,93%{opacity:0}97%,100%{opacity:1}}
@keyframes lvOk{0%,52%{opacity:0}55%,93%{opacity:1}97%,100%{opacity:0}}

/* status pills: static frost capsules (not glass), 26 pt tall, 6 pt apart, centred in a 32 pt row */
.pills{position:absolute;left:12em;width:416em;top:65.3em;height:32em;display:flex;justify-content:center;align-items:center;gap:6em;z-index:9;pointer-events:none;transition:opacity .18s,transform .18s,left .8s var(--ease),top .8s var(--ease),width .8s var(--ease)}
.ph-43 .pills{top:86.2em}
.pills.swap{opacity:0;transform:translateY(-6em)}
.pill,.frost{background:linear-gradient(to bottom right,rgba(46,46,46,.78),rgba(26,26,26,.78) 60%,rgba(33,33,33,.78))}
.pill{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;gap:4em;min-height:26em;padding:4em 7em;border-radius:99em;white-space:nowrap;color:#fff;line-height:1.2}
.pill::after,.frost::after{content:"";position:absolute;inset:-.5em;border-radius:inherit;padding:1em;background:linear-gradient(to bottom right,rgba(255,255,255,.2),rgba(255,255,255,.07));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
.pill.sum{padding:6em 7em;gap:5em} /* the status row draws the summary compact: 7 pt sides (ControlsOverlay.swift:128,542), not 11 */
.pill.store{padding:5em 8em;gap:5em}
.pill.chip{color:#C7C7C7;min-width:44em}
.pill.lut{padding:5em 7em;min-width:44em}
.pill.lut.y,.pill.ovr,.pill.crop.y{color:var(--ly)}
.pill.crop{color:#C7C7C7}
.pill.sumB{padding:5em 9em;gap:5em}
.pill.timer{padding:5em 9em;gap:6em}
.pill .sm{font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-weight:600}
.rdot{width:9em;height:9em;border-radius:50%;background:var(--lr);flex:none;animation:rdot .7s ease-in-out infinite alternate}
@keyframes rdot{to{opacity:.25}}
.pill.timer,.pill.audio{display:none}
.rec .pills .pill{display:none}
.rec .pills .pill.timer,.rec .pills .pill.audio,.rec .pills .pill.keep{display:inline-flex}

/* zoom notch: pure black, the sprite's exact outline, 26 pt deep, 38 pt pitch (44 in landscape) */
.notch{position:absolute;right:0;width:26em;z-index:8;transition:opacity .35s}
.notch>svg{position:absolute;left:0;top:0}
.notch b{position:absolute;left:2em;width:26em;height:18em;margin-top:-9em;display:grid;place-items:center;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;transition:color .2s}
.notch b.on{color:var(--ly)}
.notch-l{right:auto;height:26em;transform:rotate(90deg);opacity:0;pointer-events:none}

/* Functions rail: 52 pt band above the record row, equal cells, 18.48 pt glyphs, 44 pt yellow lit disc */
.rail{position:absolute;left:16em;width:408em;top:778em;height:52em;display:flex;z-index:9;transition:opacity .3s}
.rk{flex:1 1 0;position:relative;display:grid;place-items:center;color:#fff;transition:opacity .3s,color .25s}
.rk::before{content:"";position:absolute;left:50%;top:50%;width:44em;height:44em;margin:-22em;border-radius:50%;background:var(--ly);opacity:0;transform:scale(.5);transition:opacity .25s,transform .35s var(--spring)}
.rk.lit{color:#000}
.rk.lit::before{opacity:1;transform:none}
.rk.dim{opacity:.45}
.rk>*{position:relative}
.rk svg,.dk svg,.shutter svg{transition:transform .55s cubic-bezier(.3,1.25,.5,1),opacity .25s}
.rk.num i{width:26em;height:26em;border-radius:50%;box-shadow:inset 0 0 0 1.857em currentColor;display:grid;place-items:center;font-style:normal;font-weight:800}

/* the record row: one Liquid Glass capsule 408 x 50 (no cutout) with the 68 pt shutter centred on it */
.dock{position:absolute;left:16em;top:850em;width:408em;height:50em;border-radius:25em;z-index:10}
.dock::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1)),rgba(255,255,255,.125);-webkit-backdrop-filter:blur(7em) saturate(1.8);backdrop-filter:blur(7em) saturate(1.8);box-shadow:inset 0 0 0 1em rgba(255,255,255,.07),inset 0 1em 1.5em -.5em rgba(255,255,255,.12);transition:opacity .3s}
.dk{position:absolute;top:3em;width:44em;height:44em;margin-left:-22em;display:grid;place-items:center;color:#fff;transition:opacity .3s}
.dk-gal{left:47.3em}.dk-set{left:116.7em}.dk-fn{left:291.3em}.dk-self{left:360.7em}
.dk>*{grid-area:1/1}
.dk .lockc{width:44em;height:44em;border-radius:50%;background:#fff;color:#000;box-shadow:inset 0 0 0 1em rgba(0,0,0,.12);display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s var(--spring)}
.shutter{position:absolute;left:204em;top:25em;width:68em;height:68em;margin:-34em;border-radius:50%;box-shadow:0 0 0 2em #fff,inset 0 0 0 2em #fff;display:grid;place-items:center;cursor:pointer;transition:transform .12s,width .25s,height .25s,margin .25s}
.shutter:active{transform:scale(.94)}
.shutter i{width:calc(100% - 12em);height:calc(100% - 12em);border-radius:28em;background:#fff;color:rgba(0,0,0,.8);display:grid;place-items:center;transition:transform .2s cubic-bezier(.3,1.3,.5,1),border-radius .2s}
.shutter.red i{background:var(--lr);color:#fff}
.rec .shutter{width:56em;height:56em;margin:-28em}
.rec .shutter i{transform:scale(.48);border-radius:11em}
.rec .shutter svg{opacity:0}
.rec .dock::before,.rec .dk>svg,.rec .rail,.rec .pane-b .pb-pills,.rec .pane-b .bgear{opacity:0}
.rec .dk-set .lockc{opacity:1;transform:none}

/* mode strip: 11 pt rounded, 0.7 pt tracking, 32 pt between words, the selected word centred */
.strip{position:absolute;left:0;width:440em;top:915em;height:22em;z-index:9;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 14em,#000 calc(100% - 14em),transparent);mask:linear-gradient(90deg,transparent,#000 14em,#000 calc(100% - 14em),transparent)}
.strip-in{position:absolute;left:50%;top:0;height:100%;display:flex;align-items:center;gap:14em;white-space:nowrap;transition:transform .55s cubic-bezier(.32,1.18,.5,1)}
.strip span{display:block;padding:0 9em}
.strip b{display:flex;flex-direction:column;align-items:center;font-size:11em;letter-spacing:.0636em;font-weight:600;color:rgba(255,255,255,.45);transition:color .3s}
.strip b::after{content:attr(data-t);font-weight:700;height:0;overflow:hidden;visibility:hidden}
.strip span.on b{color:var(--ly);font-weight:700}
/* Chrome has no ui-rounded: it falls back to the installed SF Pro Rounded, a Display cut ~4-7 % narrower than the
   optical Text cut iOS (and Safari's ui-rounded) sets at 8-15 pt. lume.js adds .no-uir; this tracking makes up the width. */
.no-uir :is(.s8,.s9,.s10,.s11,.s12,.s13,.s14,.s15){letter-spacing:.04em}
.no-uir .strip b{letter-spacing:.098em}
.hw{position:absolute;width:7.3em;border-radius:4.4em;background:#3a3a3d;transition:background .3s,box-shadow .3s}
.hw-cc{right:-4.1em;top:572em;height:94em}.hw-action{left:-4.1em;top:205em;height:38em}
.hw-vol1{left:-4.1em;top:286em;height:67.5em}.hw-vol2{left:-4.1em;top:372.5em;height:67.5em}
.hw.on{background:var(--amber);box-shadow:0 0 23em var(--amber)}

/* manual dial (M): a 408 x 50 frost capsule, auto disc left, ruler between the caps, fan toggle right */
.dialbar{position:absolute;left:16em;top:718em;width:408em;height:50em;z-index:11;touch-action:none}
.db-body{position:absolute;inset:0;border-radius:25em;transition:background .25s}
.dialbar.fanned .db-body{background:linear-gradient(to bottom right,#2E2E2E,#1A1A1A 60%,#212121)}
.db-a{position:absolute;left:12em;top:12em;width:26em;height:26em;cursor:pointer;display:grid}
.db-a .ic{grid-area:1/1;transition:opacity .2s}
.db-a .ic+.ic,.db-a:not(.on) .ic:first-child{opacity:0}
.db-a:not(.on) .ic+.ic{opacity:1}
.db-scale{position:absolute;left:50em;width:308em;top:0;height:50em;overflow:hidden;cursor:ew-resize;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.dialbar.nofan .db-scale{width:333em}
.db-scale::before{content:"";position:absolute;left:0;right:0;top:37.25em;height:1.5em;background:rgba(128,128,128,.5)}
.db-track{position:absolute;left:50%;top:0;height:100%;display:flex;transform:translateX(calc((var(--v,0) + .5) * -64em))}
.db-cell{width:64em;flex:none;position:relative;height:100%}
.db-cell::before{content:"";position:absolute;left:31.25em;top:26em;width:1.5em;height:12em;background:rgba(255,255,255,.9)}
.db-cell::after{content:"";position:absolute;left:0;right:0;top:32em;height:6em;background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45)) 10.17em 0/1em 100% no-repeat,linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45)) 52.83em 0/1em 100% no-repeat}
.db-cell b{position:absolute;left:2em;width:60em;top:8em;height:15em;display:grid;place-items:center;font-weight:600;opacity:.6;transition:opacity .2s,transform .2s}
.db-cell.on b{opacity:1;transform:translateY(-2em)}
.db-ind{position:absolute;left:50%;top:23em;width:2em;height:17em;margin-left:-1em;border-radius:1em;background:var(--ly)}
.db-ic{position:absolute;left:370em;top:12em;width:26em;height:26em;border-radius:50%;box-shadow:inset 0 0 0 1.5em rgba(255,255,255,.8);display:grid;place-items:center;cursor:pointer;color:#fff}
.db-ic .ic{grid-area:1/1;transition:opacity .2s}
.db-ic .ic+.ic,.fanned .db-ic .ic:first-child{opacity:0}
.fanned .db-ic .ic+.ic{opacity:1}
.fan{position:absolute;inset:0}
.blade{position:absolute;inset:0;border-radius:25em;transform-origin:25em 25em;opacity:0;pointer-events:none;transition:transform .34s cubic-bezier(.3,1.25,.5,1) calc(var(--n) * 15ms),opacity .18s calc(var(--n) * 15ms)}
.fanned .blade{opacity:1;pointer-events:auto;cursor:pointer;transform:rotate(calc(var(--n) * -13deg)) scale(calc(1 - var(--n) * .04))}
.bl-nm{position:absolute;left:248em;width:120em;top:0;height:50em;display:flex;align-items:center;justify-content:flex-end;font-weight:600}
.bl-ic{position:absolute;left:370em;top:12em;width:26em;height:26em;border-radius:50%;box-shadow:inset 0 0 0 1em rgba(255,255,255,.55);display:grid;place-items:center}
.readout{position:absolute;left:16em;top:684em;width:408em;height:26em;z-index:11;pointer-events:none;transition:opacity .2s}
.dialbar.fanned~.readout{opacity:0}
.ro{height:26em;padding:4em 7em;border-radius:13em;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;gap:7.7em;white-space:nowrap}
.ro .it{display:flex;align-items:baseline;gap:3em;opacity:.7}
.ro .it.act{opacity:1}
.ro .lb{font-variant-caps:all-small-caps;color:rgba(255,255,255,.65);font-weight:600}
.ro .vl{font-variant-numeric:tabular-nums;font-weight:600}
.ro .am{font-variant-caps:all-small-caps;color:var(--ly);font-weight:700}
.readout .cap{position:absolute;left:50%;bottom:29em;transform:translateX(-50%);padding:2em 6em;border-radius:99em;background:rgba(0,0,0,.55);white-space:nowrap;font-weight:600}

/* ─────────── STATEMENT ─────────── */
.statement{padding:clamp(110px,18vh,220px) var(--pad);max-width:1280px;margin:0 auto}
.statement-text{font-weight:700;font-size:clamp(30px,4.5vw,68px);line-height:1.08;letter-spacing:-.04em}
.statement-text span{opacity:.14;transition:opacity .5s}
.statement-text span.on{opacity:1}

/* ─────────── MODES (one pinned phone) ─────────── */
.modes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,80px);padding:0 var(--pad);max-width:1500px;margin:0 auto;position:relative;--pw:clamp(230px,calc((100svh - 150px) / 2.17),318px)}
.modes-stage{grid-column:2;grid-row:1;position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center}
.modes-stage::before{content:"";position:absolute;inset:8% -6%;background:radial-gradient(50% 50% at 42% 50%,var(--glow,rgba(120,170,255,.13)),transparent 70%);pointer-events:none;transition:--glow 1s}
.modes[data-ch=video]{--glow:rgba(255,170,90,.14)} .modes[data-ch=photo]{--glow:rgba(255,80,60,.14)} .modes[data-ch=rangefinder]{--glow:rgba(230,225,60,.12)} .modes[data-ch=custom]{--glow:rgba(120,190,255,.13)} .modes[data-ch=anywhere]{--glow:rgba(150,160,255,.13)}
.stage-inner{position:relative;display:flex;align-items:center;gap:clamp(18px,2.6vw,40px)}
.phone.multi .scr{transition:opacity .45s var(--ease),transform .8s var(--ease),visibility 0s .5s;opacity:0;visibility:hidden}
.scr-clip{position:relative;width:440em;height:956em;border-radius:62em;overflow:hidden;background:#000}
.phone.multi .scr+.scr{position:absolute;left:0;top:0}
.phone.multi .scr.on{opacity:1;visibility:visible;transform:none;transition-delay:0s;z-index:2}
.phone.multi .scr .strip{display:none}
.strip.shared{left:10.267em;top:925.267em;z-index:30;transition:opacity .3s}
.strip.shared span{cursor:pointer}
.phone.locked .strip.shared,.phone.recui .strip.shared{opacity:0}
/* Dual is held in landscape: the phone itself turns 90° to the left; the stage makes room for it */
.stage-phone{position:relative;flex:none;width:var(--pw);height:calc(var(--pw) * 2.12046);transition:width .8s var(--ease),height .8s var(--ease)}
.stage-phone>.phone{position:absolute;left:50%;top:50%;margin:calc(var(--pw) * -1.06023) 0 0 calc(var(--pw) * -.5);transition:transform .8s var(--ease)}
.modes.land .stage-phone{width:calc(var(--pw) * 2.12046 * var(--ls,1));height:calc(var(--pw) * var(--ls,1))}
.modes.land .stage-phone>.phone{transform:rotate(-90deg) scale(var(--ls,1))}
.modes.land .stage-inner{flex-direction:column}
.modes.land .asides{width:min(440px,100%);height:clamp(150px,22svh,200px)}
.asides{position:relative;width:clamp(150px,16vw,232px);height:min(60svh,460px)}
.aside{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;opacity:0;transform:translateX(-18px);pointer-events:none;transition:opacity .45s,transform .7s var(--ease)}
.aside.on{opacity:1;transform:none;pointer-events:auto;transition-delay:.15s}
.modes-copy{grid-column:1;grid-row:1}
.ch{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:80px 0;opacity:.2;transition:opacity .6s}
.ch.on{opacity:1}
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chips li{font-family:var(--mono);font-size:12px;font-weight:500;padding:7px 12px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);color:var(--dim)}
.try{display:flex;align-items:center;gap:12px;margin-top:32px;font-size:14px;color:var(--ink)}
.try-dot{width:9px;height:9px;border-radius:50%;background:var(--amber);flex:none;animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,196,0,.55)}70%,100%{box-shadow:0 0 0 12px rgba(255,196,0,0)}}
.keys{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.keys button{height:42px;padding:0 18px;border-radius:99px;font-size:14px;font-weight:500;box-shadow:inset 0 0 0 1px var(--faint);transition:all .25s var(--ease);display:inline-flex;align-items:center;gap:10px}
.keys button:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.keys button[aria-pressed=true]{background:var(--amber);color:#000;box-shadow:none;font-weight:600}
.keys-num button{padding-left:7px;height:46px}
.keys-num i{font-style:normal;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;box-shadow:inset 0 0 0 1.5px var(--faint)}
.keys-num button[aria-pressed=true] i{background:#000;color:var(--amber);box-shadow:none}

/* spec card + chapter dots */
.spec{width:100%;border-radius:18px;background:var(--panel2);box-shadow:0 0 0 1px var(--line);padding:6px 16px;margin:0}
.spec div{padding:11px 0;border-bottom:1px solid var(--line)}
.spec div:last-child{border:0}
.spec dt{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.spec dd{margin:3px 0 0;font-size:15px;font-weight:600;letter-spacing:-.01em;transition:opacity .2s,transform .3s var(--ease)}
.spec dd.swap{opacity:0;transform:translateY(6px)}
.chdots{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}
.chdots button{width:6px;height:6px;border-radius:3px;background:var(--faint);transition:all .4s var(--ease);padding:0;position:relative}
.chdots button::after{content:"";position:absolute;inset:-6px -10px}
.chdots button.on{height:26px;background:var(--amber)}

/* dual: camera B's pane (268 x 151, 24 pt corners, 1 pt edge, shadow), and the landscape hold */
.vf-turn{position:absolute;left:0;top:0;width:440em;height:782.2em;transition:left .8s var(--ease),top .8s var(--ease),width .8s var(--ease),height .8s var(--ease),transform .8s var(--ease)}
.pane-b{position:absolute;width:268em;height:151em;left:86em;top:50em;border-radius:24em;overflow:hidden;box-shadow:0 6em 14em rgba(0,0,0,.45);cursor:grab;touch-action:none;z-index:6;transition:left .45s var(--spring),top .45s var(--spring)}
.pane-b::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1em rgba(255,255,255,.4),inset 0 0 0 7.5em rgba(255,69,58,0);transition:box-shadow .3s;pointer-events:none;z-index:3}
.rec .pane-b::after{box-shadow:inset 0 0 0 1em rgba(255,255,255,.4),inset 0 0 0 7.5em rgba(255,69,58,.75)}
.pane-b.drag{cursor:grabbing;transition:none}
.pb-turn{position:absolute;left:0;top:0;width:268em;height:151em;transition:left .8s var(--ease),top .8s var(--ease),width .8s var(--ease),height .8s var(--ease),transform .8s var(--ease)}
.pb-turn .pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.pb-pills{position:absolute;left:6em;right:6em;top:6em;display:flex;flex-wrap:wrap;justify-content:center;gap:4em 6em;z-index:2;transition:opacity .3s}
.bgear{position:absolute;right:6em;bottom:6em;width:26em;height:26em;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:2;transition:opacity .3s}
.land .scr-dual .vf-turn{left:-171.1em;top:171.1em;width:782.2em;height:440em;transform:rotate(90deg)}
.land .scr-dual .pb-turn{left:58.5em;top:-58.5em;width:151em;height:268em;transform:rotate(90deg)}
.land .scr-dual .pills{left:92em;top:428.4em;width:640em;transform:rotate(90deg)}
.land .scr-dual .notch-p{opacity:0;pointer-events:none}
.land .scr-dual .notch-l{opacity:1}
.land .scr-dual :is(.rk,.dk,.shutter) svg{transform:rotate(90deg)}
.rec .notch,.land .scr-dual.rec .notch-l{opacity:0}
.snap{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;background:linear-gradient(var(--ly),var(--ly)) 50% 0/1em 100% no-repeat,linear-gradient(var(--ly),var(--ly)) 0 33.33%/100% 1em no-repeat,linear-gradient(var(--ly),var(--ly)) 0 66.66%/100% 1em no-repeat;z-index:3}
.dragging .snap{opacity:.5}
.scr-dual .pills{transition:opacity .18s,left .8s var(--ease),top .8s var(--ease),width .8s var(--ease),transform .8s var(--ease)}
.clip{position:relative;border-radius:14px;overflow:hidden;background:var(--panel2);box-shadow:0 0 0 1px var(--line);transition:transform .5s var(--spring),box-shadow .4s}
.clip-pic{overflow:hidden}
.outputs-dual{flex-direction:row;align-items:center;justify-content:center;gap:14px}
.clip-a{width:62%} .clip-a .clip-pic{aspect-ratio:16/9}
.clip-b{width:21%} .clip-b .clip-pic{aspect-ratio:9/16}
.clip img{width:100%;height:100%;object-fit:cover;object-position:68% 50%;filter:saturate(.35) brightness(.5);transition:filter .6s}
.clip figcaption{display:flex;align-items:center;gap:7px;padding:8px 10px;font-size:10.5px;font-family:var(--mono);color:var(--dim);white-space:nowrap}
.clip figcaption b{width:17px;height:17px;flex:none;border-radius:50%;background:var(--amber);color:#000;display:grid;place-items:center;font-family:var(--sans);font-size:10px;font-weight:800}
.clip-b figcaption span{display:none}
.clip time{margin-left:auto;color:var(--ink)}
.clip .bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--red)}
.recording .clip img,.saved .clip img{filter:none}
.recording .clip{box-shadow:0 0 0 1px var(--red)}
.recording .clip .bar{width:100%;transition:width 30s linear}
.saved .clip{box-shadow:0 0 0 1px var(--amber);transform:translateY(-4px)}
.saved .clip time::after{content:" ✓";color:var(--amber)}

/* video */
.wipe{position:absolute;inset:0;z-index:2;touch-action:none;cursor:ew-resize}
.wipe .log{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--wx,50%)) 0 0)}
.wipe .log img{filter:contrast(.56) saturate(.42) brightness(1.2) sepia(.12)}
.wipe-line{position:absolute;top:0;bottom:0;left:var(--wx,50%);width:2em;margin-left:-1em;background:#fff;box-shadow:0 0 14em rgba(0,0,0,.6)}
.wipe-knob{position:absolute;left:50%;top:56%;width:44em;height:44em;margin:-22em;border-radius:50%;background:rgba(20,20,22,.7);box-shadow:0 0 0 2em #fff inset;display:grid;place-items:center}
.wipe-knob svg{width:22em;height:22em}
.wipe-tag{position:absolute;top:54.6%;padding:5em 9em;border-radius:99em;background:rgba(0,0,0,.5);white-space:nowrap;font-weight:700}
.wipe-tag span{letter-spacing:.18em}
.wipe-tag.l{right:calc(100% - var(--wx,50%) + 34em)} .wipe-tag.r{left:calc(var(--wx,50%) + 34em)}
.assist-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:0;transition:opacity .35s}
.assist-canvas.on{opacity:1}
.wave{position:absolute;left:17.6em;bottom:67.5em;width:190.7em;height:96.8em;border-radius:14.7em;background:rgba(8,8,10,.72);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;z-index:4;opacity:0;transform:translateY(14em) scale(.94);transform-origin:0 100%;transition:all .45s var(--spring);overflow:hidden;pointer-events:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.wave.on{opacity:1;transform:none}
.wave canvas{width:100%;height:100%;display:block}

/* photo */
.scr-photo .vf .pic{transition:filter .2s}
.sidecard{width:100%;border-radius:18px;overflow:hidden;background:var(--panel2);box-shadow:0 0 0 1px var(--line);transform:rotate(2.5deg);transition:transform .6s var(--spring)}
.sidecard:hover{transform:rotate(0) scale(1.03)}
.sidecard img{aspect-ratio:3/4;object-fit:cover;width:100%}
.sidecard figcaption{padding:13px 14px 15px;font-size:12.5px;line-height:1.4;color:var(--dim)}
.sidecard b{display:block;color:var(--ink);font-weight:600;font-size:13px;margin-bottom:3px}

/* rangefinder */
/* rangefinder: 2 pt frame (4 pt and no dim at 24 mm), 14 pt corners, black 55 % outside; focal chips */
.rf-frame{position:absolute;border:2em solid #fff;border-radius:14em;box-shadow:0 0 0 999em rgba(0,0,0,.55);cursor:grab;touch-action:none;z-index:3;transition:width .55s var(--spring),height .55s var(--spring),left .55s var(--spring),top .55s var(--spring),border-width .3s,border-radius .3s,box-shadow .3s}
.rf-frame.open{border-width:4em;border-radius:24em;box-shadow:0 0 0 999em rgba(0,0,0,0)}
.rf-frame.drag{transition:none;cursor:grabbing}
.rf-lab{position:absolute;left:6em;top:6em;padding:4em 8em;border-radius:99em;background:rgba(0,0,0,.55);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.2}
.focals{position:absolute;left:0;right:0;top:738em;height:30em;display:flex;justify-content:center;gap:6em;z-index:9}
.focals b{min-width:44em;height:30em;padding:0 5em;border-radius:15em;display:flex;align-items:center;justify-content:center;gap:1em;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;font-weight:600;transition:background .25s,color .25s}
.focals b.on{background:var(--ly);color:#000}
.focals b i{font-style:normal;font-variant-numeric:tabular-nums}
.focals b small{font-variant-caps:small-caps}
.scr-rangefinder .dk-self{opacity:.4}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:8}
.flash.go{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}
.outputs-rf{gap:22px}
.print{background:#f4efe6;padding:7px 7px 0;border-radius:4px;box-shadow:0 18px 40px -12px rgba(0,0,0,.8);transform:rotate(var(--r,-3deg));transition:transform .5s var(--spring);width:62%}
.print-crop{--r:4deg;margin-left:30%}
.print figcaption{font-family:var(--mono);font-size:10px;color:#222;padding:6px 2px 7px;font-weight:500;white-space:nowrap}
.print-pic{width:100%;aspect-ratio:3/4;background:#222 center/cover no-repeat;position:relative;overflow:hidden}
.print-pic i{position:absolute;border:1.5px solid #fff;border-radius:3px;box-shadow:0 0 0 400px rgba(0,0,0,.4)}
.print.pop{animation:pop .6s var(--spring)}
@keyframes pop{0%{transform:rotate(var(--r)) translateY(26px) scale(.9);opacity:.3}100%{transform:rotate(var(--r));opacity:1}}

/* anywhere */
.ways{list-style:none;padding:0;margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:560px}
.ways button{width:100%;text-align:left;padding:13px 16px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:1px;transition:all .3s var(--ease)}
.ways button b{font-weight:600;font-size:15px;letter-spacing:-.01em}
.ways button span{font-size:13px;color:var(--dim)}
.ways button:hover{box-shadow:inset 0 0 0 1px var(--faint)}
.ways button[aria-pressed=true]{background:rgba(255,196,0,.08);box-shadow:inset 0 0 0 1px rgba(255,196,0,.6)}
.ways button[aria-pressed=true] b{color:var(--amber)}
.lock{position:absolute;inset:0;z-index:20;background:#000;clip-path:circle(150% at var(--ox,84%) var(--oy,92%))}
.lock.open{clip-path:circle(0% at var(--ox,84%) var(--oy,92%));transition:clip-path .75s cubic-bezier(.6,0,.2,1)}
.lock>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(1.1)}
.lock-time{position:absolute;left:0;right:0;top:110em;text-align:center;font-family:var(--sans)}
.lock-time small{display:block;font-size:18.3em;font-weight:500;opacity:.9}
.lock-time b{display:block;font-size:108.5em;font-weight:600;letter-spacing:-.03em;line-height:1}
.lock-btn{position:absolute;bottom:50em;width:52.8em;height:52.8em;border-radius:50%;background:rgba(40,40,44,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center}
.lock-btn svg{width:25em;height:25em}
.lock-btn.l{left:44em}.lock-btn.r{right:44em}
.lock-btn.r img{width:36.7em;height:36.7em;border-radius:8.8em}
.ping{position:absolute;left:var(--ox);top:var(--oy);width:50em;height:50em;margin:-25em;border-radius:50%;box-shadow:0 0 0 2.6em var(--amber);opacity:0;z-index:21;pointer-events:none}
.ping.go{animation:ping .7s ease-out}
@keyframes ping{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.7)}}

/* ─────────── CRAFT ─────────── */
.craft{padding:clamp(90px,14vh,170px) var(--pad);max-width:1300px;margin:0 auto}
.bento{margin-top:50px;display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:14px}
.tile{border-radius:26px;background:var(--panel);box-shadow:0 0 0 1px var(--line);padding:28px;display:flex;flex-direction:column;justify-content:flex-end;min-height:380px;position:relative;overflow:hidden}
.tile p{font-size:15px;color:var(--dim);margin-top:8px}
.tile-warm{background:linear-gradient(135deg,rgba(255,196,0,.14),rgba(255,196,0,.02) 60%),var(--panel)}
.tile-big{font-weight:700;letter-spacing:-.05em;font-size:clamp(72px,8vw,120px)!important;line-height:.9;color:var(--ink)!important;margin:0 0 auto!important}
.tile-warm .tile-big{color:var(--amber)!important}
.touchpad{position:absolute;inset:0 0 130px 0;display:grid;place-items:center;cursor:pointer;touch-action:manipulation}
.touch-ring{width:104px;height:104px;border-radius:50%;box-shadow:inset 0 0 0 5px #fff;background:radial-gradient(circle,#fff 0 56%,transparent 57%);transition:transform .5s var(--spring)}
.touchpad.down .touch-ring{transform:scale(.88);transition:transform .05s}
.touch-label{position:absolute;bottom:10px;left:16px;right:16px;text-align:center;font-family:var(--mono);font-size:12px;color:var(--faint)}
.touchpad .wavefx{position:absolute;width:104px;height:104px;border-radius:50%;box-shadow:0 0 0 2px var(--amber);animation:ripple .8s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(3.4);opacity:0}}

/* ─────────── MAKER ─────────── */
.maker{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,100px);align-items:center;padding:clamp(90px,14vh,170px) var(--pad);max-width:1400px;margin:0 auto}
.maker-pic{border-radius:28px;overflow:hidden;aspect-ratio:4/5}
.maker-pic img{width:100%;height:100%;object-fit:cover}
.maker h2{font-size:clamp(32px,4.2vw,62px)}
.stats{display:flex;gap:clamp(24px,4vw,56px);margin-top:44px;flex-wrap:wrap}
.stats dt{font-weight:700;letter-spacing:-.04em;font-size:clamp(36px,4vw,58px);line-height:1}
.stats dd{margin:6px 0 0;font-size:13px;color:var(--dim)}

/* ─────────── PRICING ─────────── */
.pricing{padding:clamp(90px,14vh,170px) var(--pad);max-width:1200px;margin:0 auto;text-align:center}
.pricing .lede{margin-left:auto;margin-right:auto}
.plans{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left}
.plan{border-radius:30px;background:var(--panel);box-shadow:0 0 0 1px var(--line);padding:clamp(26px,3.4vw,44px);display:flex;flex-direction:column;position:relative}
.plan h3{font-size:14px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--dim)}
.price{margin-top:18px;display:flex;flex-direction:column;gap:6px}
.price b{font-weight:700;font-size:clamp(56px,6.6vw,92px);line-height:.95;letter-spacing:-.05em}
.price span{color:var(--dim);font-size:15px}
.plan ul{list-style:none;padding:0;margin:30px 0 36px;display:grid;gap:12px;font-size:16px}
.plan li{padding-left:26px;position:relative;color:rgba(245,245,247,.86)}
.plan li::before{content:"";position:absolute;left:2px;top:.48em;width:11px;height:6px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}
.plan .btn{margin-top:auto;justify-content:center}
.plan-founders{background:radial-gradient(120% 90% at 100% 0,rgba(255,196,0,.2),transparent 55%),var(--panel);box-shadow:none}
.plan-founders::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--a,0deg),rgba(255,196,0,.25),#FFE68C,rgba(255,196,0,.25) 30%,rgba(255,196,0,.25));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:sweep 6s linear infinite;pointer-events:none}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --glow{syntax:"<color>";inherits:true;initial-value:rgba(120,170,255,.13)}
@keyframes sweep{to{--a:360deg}}
.plan-founders h3{color:var(--amber)}
.plan-flag{position:absolute;top:clamp(22px,3vw,38px);right:clamp(22px,3vw,38px);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#000;background:var(--amber);padding:6px 11px;border-radius:99px}
.fine{margin-top:22px;font-size:13px;color:var(--faint)}

/* ─────────── FAQ ─────────── */
.faq{padding:clamp(80px,12vh,150px) var(--pad);max-width:900px;margin:0 auto}
.faq h2{font-size:clamp(36px,4.6vw,64px);margin-bottom:36px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;font-size:clamp(18px,1.6vw,21px);font-weight:600;position:relative;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(var(--ink),var(--ink)) 50%/100% 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) 50%/1.5px 100% no-repeat;transition:transform .4s var(--spring)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 44px 26px 0;color:var(--dim);font-size:17px;max-width:44em}

/* ─────────── FINAL ─────────── */
.final{position:relative;min-height:92svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:30px;padding:120px var(--pad);overflow:hidden}
.final-bg{position:absolute;inset:0}
.final-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.9)}
.final-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(#000,transparent 30%,transparent 65%,#000)}
.final>*:not(.final-bg){position:relative}
.final-icon{border-radius:22px;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 80px rgba(255,196,0,.25)}
.final h2{font-size:clamp(48px,8.4vw,128px);letter-spacing:-.05em}
.final h2 span{color:var(--amber)}
.final p{font-size:14px;color:var(--dim)}

.foot{padding:36px var(--pad) 60px;max-width:1500px;margin:0 auto;font-size:12.5px;color:var(--faint)}
.foot-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:var(--ink)}
.foot nav{display:flex;gap:24px;font-size:14px}
.foot nav a{text-decoration:none;color:var(--dim)}
.foot nav a:hover{color:var(--ink)}
.foot p{max-width:70em}

/* reveal */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}

/* ─────────── RESPONSIVE ─────────── */
@media (max-width:1100px) and (min-width:820px){.asides{display:none}}
@media (max-width:819px){
  .nav-links{display:none}
  .nav .btn{display:none}
  .sticky-cta{display:inline-flex;position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:45;height:46px;box-shadow:0 10px 30px rgba(0,0,0,.6);opacity:0;transform:translateY(80px);transition:opacity .3s,transform .5s var(--spring)}
  .sticky-cta.show{opacity:1;transform:none}
  .statement{padding-top:90px;padding-bottom:90px}
  .modes{display:block;padding:0;--pw:min(calc((58svh - 84px) / 2.17),230px)}
  .modes-stage{height:58svh;padding-top:60px;z-index:5;background:linear-gradient(#000 88%,transparent)}
  .modes-stage::before{inset:0}
  .asides,.chdots{display:none}
  .modes-copy{padding:0 20px;position:relative}
  .ch{min-height:0;padding:0;margin-bottom:52svh;justify-content:flex-start;opacity:1}
  .ch:first-child{margin-top:8px}
  .ch:last-child{margin-bottom:8svh}
  .ch h2{font-size:34px}
  .ch .lede{font-size:16px;margin-top:14px}
  .ch .chips{display:none}
  .ch .eyebrow{margin-bottom:10px}
  .try{margin-top:16px;font-size:13px}
  .keys{margin-top:16px;gap:8px}
  .keys button{height:38px;padding:0 14px;font-size:13px}
  .keys-num button{height:40px}.keys-num i{width:28px;height:28px}
  .ways{margin-top:16px}
  .ways button{padding:9px 12px}.ways button span{display:none}
  .bento{grid-template-columns:1fr}
  .tile{min-height:260px}.tile-touch{min-height:360px}
  .maker,.plans{grid-template-columns:1fr}
  .maker-pic{max-width:420px}
  .foot{padding-bottom:90px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js [data-reveal]{opacity:1;transform:none}
  .statement-text span{opacity:1}
}

/* ===== hero.css ===== */
/* Lume hero: the browser window is the viewfinder. Loaded after styles.css. */
.hero{position:relative;height:300vh;display:block;padding:0;min-height:0;overflow:visible;--sx:100%;--o:1}
.hero-pin{position:sticky;top:0;height:100svh;overflow:hidden;background:#000}

/* the viewfinder */
.hv{position:absolute;inset:0;overflow:hidden;z-index:2;cursor:none;will-change:clip-path}
.hv-scene{position:absolute;inset:0;will-change:transform}
.hv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 78%;transform:scale(1.1);filter:blur(10px) brightness(.7);transition:transform 2s var(--ease),filter 1.6s var(--ease)}
.ready .hv-img{transform:none;filter:none}
.hv-hold::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--o);background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,.1) 24%,rgba(0,0,0,.1) 44%,rgba(0,0,0,.62) 72%,rgba(0,0,0,.82)),radial-gradient(90% 80% at 50% 45%,transparent 50%,rgba(0,0,0,.35))}
.hv::before{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* pro: the same picture, read by the instruments */
.hv-pro{position:absolute;inset:0;clip-path:inset(0 0 0 var(--sx));opacity:var(--o);background:rgba(6,10,18,.2);backdrop-filter:saturate(.45) contrast(1.08) brightness(.9);-webkit-backdrop-filter:saturate(.45) contrast(1.08) brightness(.9)}
.hv-peak{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen}
.hv-zebra{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.92) 0 3px,transparent 3px 8px);animation:zeb .9s linear infinite;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@keyframes zeb{to{background-position:11.31px 0}}
.hv-grid{position:absolute;inset:0;opacity:.3;background:
  linear-gradient(#fff,#fff) 33.33% 0/1px 100% no-repeat,linear-gradient(#fff,#fff) 66.66% 0/1px 100% no-repeat,
  linear-gradient(#fff,#fff) 0 33.33%/100% 1px no-repeat,linear-gradient(#fff,#fff) 0 66.66%/100% 1px no-repeat}
.hv-level{display:none;position:absolute;left:50%;top:50%;width:min(22vw,300px);height:1px;transform:translateX(-50%);background:var(--amber);box-shadow:0 0 10px rgba(255,196,0,.8)}
.hv-level::before,.hv-level::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--amber)}
.hv-level::before{left:-14px}.hv-level::after{right:-14px}

/* two worlds of type */
.hv-hold::after{z-index:1}
.hv-world,.hv-ui{z-index:2}
.hv-world{position:absolute;top:0;bottom:0;overflow:hidden;pointer-events:none;opacity:var(--o)}
.hv-q{left:0;width:var(--sx)}
.hv-p{left:var(--sx);right:0}
.hv-in{position:absolute;top:0;bottom:0;left:0;width:var(--W,100vw)}
.hv-p .hv-in{left:calc(var(--sxp,0px) * -1)}
.hv-in .pills{font-size:clamp(.6136px,.09273vh,.9545px);top:108.5em;left:0;right:0;width:auto}
.hv-head{position:absolute;top:47%;transform:translateY(-58%);margin:0;font-weight:700;font-size:min(10.6vw,22vh);line-height:.88;letter-spacing:-.06em;white-space:nowrap;}
.hv-q .hv-head{left:var(--pad)}
.hv-p .hv-head{right:var(--pad);text-align:right;color:var(--amber)}
.hv-head span{display:block;overflow:hidden;padding:0 .06em .1em;margin:0 -.06em}
.hv-head i{display:block;font-style:normal;transform:translateY(108%);transition:transform 1.2s var(--ease) .25s}
.hv-head span+span i{transition-delay:.36s}
.ready .hv-head i{transform:none}
.hv-list{position:absolute;top:calc(47% + min(9.6vw,20vh));text-shadow:0 1px 14px rgba(0,0,0,.7);list-style:none;padding:0;margin:0;display:grid;grid-template-columns:auto auto;gap:7px 34px;counter-reset:n;font-size:clamp(13px,1.06vw,15.5px);font-weight:600;letter-spacing:-.01em;color:rgba(255,255,255,.86)}
.hv-q .hv-list{left:calc(var(--pad) + .4vw)}
.hv-p .hv-list{right:calc(var(--pad) + .4vw)}
.hv-list li{counter-increment:n;white-space:nowrap;opacity:0;transform:translateY(8px);transition:opacity .6s,transform .8s var(--ease);transition-delay:calc(.7s + var(--i) * 50ms)}
.ready .hv-list li{opacity:1;transform:none}
.hv-list li::before{content:"0" counter(n);font-family:var(--mono);font-size:.78em;color:rgba(255,255,255,.6);margin-right:10px}
.hv-p .hv-list li::before{color:var(--amber)}
.hv-scope{position:absolute;right:var(--pad);top:13.5vh;width:clamp(190px,17vw,260px);border-radius:16px;overflow:hidden}
.hv-scope canvas{display:block;width:100%;height:auto}
.hv-scope span{position:absolute;left:10px;top:8px;font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}

.hv-head{transition:opacity .6s}
.hero[data-dom=pro] .hv-q .hv-head,.hero[data-dom=quick] .hv-p .hv-head{opacity:.55}
.hv-seam em{position:absolute;top:calc(16vh - 12px);left:-17px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.hv-seam em svg{width:16px;height:16px;color:#fff}
.hv-seam .l{right:30px!important}.hv-seam .r{left:30px!important}

/* camera chrome at window scale: the same parts as the phone (1em = 1 pt, scaled to the window) */
.hv-ui{position:absolute;inset:0;pointer-events:none;font-size:clamp(.6136px,.09273vh,.9545px);font-weight:600;color:#fff;opacity:var(--o);font-family:var(--rnd)}
.hv-ui .notch{top:50%;transform:translateY(-50%)}
.hv-ui .dock{left:50%;top:auto;bottom:111.5em;margin-left:-204em;pointer-events:auto}
.hv-ui .strip{top:auto;bottom:67.5em;width:auto;right:0}
.hv-ui .shutter{cursor:pointer}
.hero .count{display:inline-block;min-width:3.3em;text-align:right;font-variant-numeric:tabular-nums}
.hv-ui .dock .dk-gal svg{transition:transform .5s var(--spring)}
.hv-ui .dock.bump .dk-gal svg{transform:scale(1.35)}
.hv-p .dialbar,.hv-p .readout{left:50%;top:auto;margin-left:-204em;font-size:clamp(.6136px,.09273vh,.9545px);font-family:var(--rnd);color:#fff}
.hv-p .dialbar{bottom:181.9em}
.hv-p .readout{bottom:239.9em}
.hv-p .dialbar .db-scale{cursor:none}
.hv-p .readout .cap{display:none} /* at window scale the caption would touch the Pro list */

/* the seam */
.hv-seam{position:absolute;top:0;bottom:0;left:var(--sx);width:0;opacity:var(--o);pointer-events:none;z-index:4}
.hv-seam i{position:absolute;top:0;bottom:0;left:-.5px;width:1px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.85) 12%,rgba(255,255,255,.85) 88%,transparent)}
.hv-seam span{position:absolute;top:16vh;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;color:rgba(255,255,255,.75)}
.hv-seam .l{right:14px}.hv-seam .r{left:14px;color:var(--amber)}

/* focus reticle follows the pointer */
.hv-reticle{position:absolute;left:0;top:0;width:48px;height:48px;margin:-24px 0 0 -24px;border:1.5px solid var(--amber);border-radius:9px;pointer-events:none;opacity:0;z-index:8;transition:opacity .3s,border-radius .3s,width .3s,height .3s,margin .3s}
.hv-reticle::before{content:"";position:absolute;inset:-1.5px;background:linear-gradient(var(--amber),var(--amber)) 50% 0/1.5px 5px no-repeat,linear-gradient(var(--amber),var(--amber)) 50% 100%/1.5px 5px no-repeat,linear-gradient(var(--amber),var(--amber)) 0 50%/5px 1.5px no-repeat,linear-gradient(var(--amber),var(--amber)) 100% 50%/5px 1.5px no-repeat}
.hv.live .hv-reticle{opacity:.95}
.hv.over-ui .hv-reticle{opacity:0}
.hv-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:10}
.hv-flash.go{animation:flash .45s ease-out}

/* what it collapses into */
.hv-phone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;opacity:0;--pw:min(290px,calc((100svh - 270px) / 2.17))}
.hv-phone .vf{background:#000}
.hv-end{position:absolute;top:50%;margin:0;transform:translateY(-50%);font-weight:700;font-size:clamp(28px,3.6vw,58px);line-height:.96;letter-spacing:-.045em;opacity:0;z-index:3;--half:calc(min(290px,calc((100svh - 270px) / 2.17)) / 2 + clamp(28px,4vw,70px))}
.hv-end-l{right:calc(50% + var(--half));text-align:right}
.hv-end-r{left:calc(50% + var(--half));color:var(--amber)}

.hero-cta{display:flex;position:absolute;left:var(--pad);bottom:30px;z-index:6;margin:0;flex-direction:row;align-items:center;gap:18px;text-align:left}
.hero-cta p{font-size:13px;color:rgba(255,255,255,.8);max-width:13em;line-height:1.35}
.hero-scroll{position:absolute;right:var(--pad);bottom:44px;z-index:6;margin:0;display:flex;align-items:center;gap:12px;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.75);opacity:var(--o)}
.hero-scroll i{width:1px;height:34px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:#fff;animation:drip 1.8s var(--ease) infinite}
@keyframes drip{to{top:110%}}

@media (max-width:819px){
  .hero{height:250vh}
  .hv{cursor:auto}
  .hv-head{font-size:min(16.5vw,13vh);line-height:.9}
  .hv-q .hv-head{top:27%;left:20px}
  .hv-p .hv-head{top:47%;right:20px}
  .hv-list{grid-template-columns:auto;top:61%;font-size:13px;gap:6px}
  .hv-q .hv-list{left:22px}.hv-p .hv-list{right:22px}
  .hv-list li:nth-child(n+5){display:none}
  .hv-in .pills{font-size:min(.0886vh,.1977vw)}
  .hv-p .pills .pill:nth-child(n+5){display:none}
  .hv-scope,.hero-scroll,.hv-reticle,.hv-end{display:none}
  .hv-ui{font-size:min(.0886vh,.2045vw)}
  .hv-ui .dock{bottom:140.8em}.hv-ui .strip{display:none}
  .hv-p .dialbar,.hv-p .readout{font-size:min(.0886vh,.2045vw)}
  .hv-p .dialbar{bottom:211.2em}.hv-p .readout{bottom:269.2em}
  .hv-seam span,.hv-seam em{display:none}
  .hv-list{transition:opacity .4s}
  .hero[data-dom=quick] .hv-p .hv-list,.hero[data-dom=pro] .hv-q .hv-list{opacity:0}
  .hero-cta{left:0;right:0;bottom:18px;justify-content:center}
  .hero-cta p{display:none}
  .hero-cta .btn{height:50px}
  .hv-phone{--pw:min(70vw,calc((100svh - 190px) / 2.17))}
}
@media (prefers-reduced-motion:reduce){
  .hero{height:100svh;--sx:50%}
  .hv-img{transform:none;filter:none}
  .hv-head i,.hv-list li{transform:none;opacity:1}
}

/* the seam handle is a real control */
.hv{touch-action:pan-y}
.hv-seam em{pointer-events:auto;cursor:ew-resize;touch-action:none}
.hv-seam em:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ===== fx.css ===== */
/* Lume page effects: loader, line reveals, stage light, marquee, spotlight, cursor badge, wordmark. */

/* intro loader */
.loader{display:none}
.js .loader{display:block;position:fixed;inset:0;z-index:100;background:#000;clip-path:inset(0 0 0 0);transition:clip-path 1s cubic-bezier(.7,0,.2,1)}
.loader.done{clip-path:inset(0 0 100% 0)}
.loader img{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px;border-radius:18px;box-shadow:0 0 80px rgba(255,196,0,.35);animation:breathe 1.4s ease-in-out infinite alternate;transition:transform .7s var(--ease),opacity .4s}
@keyframes breathe{to{box-shadow:0 0 120px rgba(255,196,0,.6)}}
.loader.done img{transform:scale(.8);opacity:0}
.loader-n{position:absolute;right:var(--pad);bottom:clamp(20px,4vh,44px);font-weight:700;font-size:clamp(64px,13vw,200px);line-height:.8;letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:var(--ink)}
.loader-t{position:absolute;left:var(--pad);bottom:clamp(24px,4.4vh,50px);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.loader-bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--amber);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* headlines rise line by line */
h2.lines .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
h2.lines .ln>span{display:block;transform:translateY(108%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--l) * 90ms)}
h2.lines.shown .ln>span{transform:none}
.final h2 span{color:inherit}
.final h2 .ln:last-child{color:var(--amber)}

/* statement: pictures set into the sentence */
.st-img{display:inline-block;width:1.55em;height:.8em;margin:0 .14em;border-radius:.4em;vertical-align:-.06em;background:center/cover no-repeat;opacity:.14;transform:scale(.86);transition:opacity .6s,transform .8s var(--spring)}
.statement-text span.on+.st-img{opacity:1;transform:none}

/* the stage behind the pinned phone: light from the scene, and the mode set very large */
.modes-stage::before{display:none}
.stage-amb{position:absolute;inset:0;pointer-events:none;z-index:0}
.stage-amb i{position:absolute;left:8%;right:8%;top:12%;bottom:12%;border-radius:50%;background:center/cover no-repeat;filter:blur(90px) saturate(1.6);opacity:0;transition:opacity 1.4s var(--ease);transform:translateZ(0)}
.stage-amb i.on{opacity:.42}
.stage-word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;pointer-events:none;white-space:nowrap;font-weight:800;letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.16);display:grid;place-items:center}
.stage-word b{grid-area:1/1;font-weight:800;font-size:calc(min(24vw,36vh) * var(--k,1));opacity:0;transform:translateY(22%) scale(.96);transition:opacity .6s,transform 1.1s var(--ease)}
.stage-word b.on{opacity:1;transform:none;transition-delay:.12s}
.stage-inner{z-index:2}
.chdots{z-index:3}

/* marquee of formats */
.marq{overflow:hidden;padding:clamp(60px,10vh,130px) 0 clamp(20px,4vh,50px);white-space:nowrap;user-select:none;-webkit-user-select:none}
.marq-in{display:inline-flex;will-change:transform}
.marq span{font-weight:700;font-size:clamp(48px,9vw,150px);letter-spacing:-.05em;line-height:1;padding-right:.5em;display:inline-flex;align-items:center;gap:.5em}
.marq span:nth-child(even){color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.4)}
.marq i{font-style:normal;color:var(--amber);font-size:.5em;-webkit-text-stroke:0}

/* cards light up under the pointer */
.tile::after,.plan::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s;background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.085),transparent 62%)}
.tile:hover::after,.plan:hover::after{opacity:1}
.plan-founders::after{background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(255,196,0,.16),transparent 62%)}
.tile,.plan{transition:transform .6s var(--ease)}

/* picture reveals */
.js .maker-pic[data-reveal]{opacity:1;transform:none;clip-path:inset(14% 14% 14% 14% round 28px);transition:clip-path 1.4s var(--ease)}
.js .maker-pic[data-reveal].in{clip-path:inset(0 0 0 0 round 28px)}
.maker-pic img{transform:scale(1.25);transition:transform 1.8s var(--ease)}
.maker-pic.in img{transform:none}

/* magnetic buttons keep their own transform */
.btn.mag{transition:transform .5s var(--spring),box-shadow .3s}
.btn.mag.pull{transition:box-shadow .3s}

/* a badge that tells you what the pointer can do */
.cur{position:fixed;left:0;top:0;z-index:90;pointer-events:none;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:var(--amber);color:#000;display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transform:translate3d(var(--x,0),var(--y,0),0);transition:opacity .25s;opacity:0}
.cur.on{opacity:1}
.cur.down{opacity:.75}

/* footer wordmark */
.foot{padding-bottom:0;overflow:hidden}
.foot-word{margin:clamp(30px,6vh,70px) 0 -.17em;font-weight:800;font-size:min(34vw,520px);line-height:.8;letter-spacing:-.075em;text-align:center;background:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(255,255,255,0) 82%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;-webkit-user-select:none}

/* features, lit by scroll (phones only; on desktop the hero carries them) */
.feat{display:none}
@media (max-width:819px){
  .hv-list{display:none}
  .feat{display:block;padding:10px 20px 110px}
  .feat-col+.feat-col{margin-top:64px}
  .feat ol{list-style:none;padding:0;margin:0;counter-reset:f}
  .feat li{counter-increment:f;display:flex;gap:14px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line);font-weight:600;font-size:clamp(20px,5.8vw,26px);line-height:1.15;letter-spacing:-.03em;opacity:.16;transition:opacity .5s}
  .feat li:last-child{border-bottom:1px solid var(--line)}
  .feat li::before{content:"0" counter(f);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0;color:var(--faint);flex:none}
  .feat-pro li::before{color:var(--amber)}
  .feat li.on{opacity:1}
}
@media (max-width:819px){
  .stage-word{display:none}
  .stage-amb i{left:6%;right:6%;top:14%;bottom:10%;filter:blur(64px) saturate(1.3)}
  .stage-amb i.on{opacity:.26}
  .cur{display:none}
  .foot{padding-bottom:0}
  .foot-word{margin-top:70px}
  .foot-row{flex-direction:column;align-items:flex-start;gap:16px}
  .foot nav{gap:20px;flex-wrap:wrap}
  .plan-flag{position:static;align-self:flex-start;margin-bottom:16px}
  .marq{padding-top:40px}
}
/* phones held sideways: the phone and the copy sit side by side, and the hero drops what cannot fit */
@media (max-width:819px) and (orientation:landscape) and (max-height:520px){
  .modes{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;padding:0 24px;--pw:calc((100svh - 64px) / 2.17)}
  .modes-stage{grid-column:2;grid-row:1;height:100svh;padding-top:0;background:none}
  .modes-copy{grid-column:1;grid-row:1;padding:0}
  .ch{min-height:100svh;margin:0!important;justify-content:center;padding:54px 0 12px}
  .ch h2{font-size:28px}
  .ch .lede{font-size:14.5px;margin-top:10px}
  .hv-list,.hv-ui .dock,.hv-p .dialbar,.hv-p .readout{display:none}
  .hv-head{font-size:min(9.5vw,24vh)}
  .hv-q .hv-head,.hv-p .hv-head{top:52%}
  .hero-cta{bottom:14px}
  .hero-cta .btn{height:44px}
  .loader-n{font-size:22vh}
}
@media (prefers-reduced-motion:reduce){
  .js .loader{display:none}
  h2.lines .ln>span{transform:none}
  .st-img{opacity:1;transform:none}
  .js .maker-pic[data-reveal]{clip-path:none}
  .maker-pic img{transform:none}
}

/* App Store badge: Apple's artwork, never restyled; keep clear space of a quarter of its height */
.asb{display:inline-block;line-height:0;border-radius:10px;transition:transform .35s var(--spring),filter .3s}
.asb img{display:block;height:56px;width:auto}
.asb:hover{transform:translateY(-2px);filter:drop-shadow(0 12px 28px rgba(0,0,0,.5))}
.asb:active{transform:scale(.97)}
.final .asb img{height:66px}
.asb-text::after{content:"Download on the App Store";display:inline-flex;align-items:center;height:56px;padding:0 26px;border-radius:12px;background:#fff;color:#000;font-size:17px;font-weight:600;line-height:1;letter-spacing:-.01em}
.sticky-cta.asb{display:none;height:auto;padding:0;background:none;box-shadow:none;filter:drop-shadow(0 8px 22px rgba(0,0,0,.6))}
@media (max-width:819px){.sticky-cta.asb{display:inline-block}}
.sticky-cta.asb img{height:46px}
.hero-cta{gap:20px}

/* page progress */
.prog{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;background:var(--amber);transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}

/* the mode word reads a little stronger */
.stage-word{-webkit-text-stroke:1px rgba(255,255,255,.26)}
.tile-big{letter-spacing:-.06em}
@media (max-width:819px){ .asb img{height:50px} .final .asb img{height:56px} .hero-cta .asb img{height:52px} }

.skip{position:fixed;left:16px;top:-80px;z-index:120;background:var(--amber);color:#000;font-weight:600;font-size:14px;padding:10px 16px;border-radius:99px;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.sticky-cta:not(.show){visibility:hidden}

/* ===== glass.css ===== */
/* Lume glass. Loaded last so every glass surface shares one recipe:
   it samples what is behind it (blur, lifted saturation), with a lit top edge and a soft inner rim. */
.hv-scope,.wave{
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.07) 46%,rgba(255,255,255,.11));
  backdrop-filter:blur(22px) saturate(1.8) brightness(.78);-webkit-backdrop-filter:blur(22px) saturate(1.8) brightness(.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.1),inset 0 -10px 18px -12px rgba(255,255,255,.18),0 10px 34px rgba(0,0,0,.3);
}
.lock-btn,.wipe-knob,.wipe-tag,.hv-seam em{
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.05));
  backdrop-filter:blur(16px) saturate(1.7) brightness(.7);-webkit-backdrop-filter:blur(16px) saturate(1.7) brightness(.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36),inset 0 0 0 1px rgba(255,255,255,.12),0 4px 16px rgba(0,0,0,.22);
}
.wipe-knob{box-shadow:0 0 0 2em #fff inset,0 4px 16px rgba(0,0,0,.22)}
/* the phone chrome is the app's, not this page's glass: status pills are static frost; the dock is Liquid Glass (see PHONE) */

/* header call to action: Apple's badge */
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-cta span{font-size:12.5px;color:var(--dim);white-space:nowrap}
.nav .asb img{height:40px}

/* the landing: where the viewfinder comes to rest inside the phone */
.hv-title{position:absolute;left:0;right:0;top:clamp(74px,10.5vh,104px);margin:0;text-align:center;opacity:0;z-index:3;pointer-events:none}
.hv-title b{display:block;font-weight:700;font-size:clamp(36px,4.8vw,66px);line-height:1;letter-spacing:-.05em}
.hv-title span{display:block;margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.hv-phone{top:calc(50% + 52px)}
.hv-end{top:calc(50% + 52px)}
@media (max-width:819px){
  .nav-cta span{display:none}
  .hv-phone{--pw:min(66vw,calc((100svh - 250px) / 2.17));top:calc(50% + 46px)}
  .hv-title{top:70px}
  .hv-title b{font-size:38px}
  .hv-title span{font-size:10.5px;margin-top:8px}
}

/* ===== hero round 3 ===== */
/* seam and grid read more clearly */
.hv-seam i{left:-1px;width:2px}
.hv-grid{opacity:.55}
/* Pro shows the flat Log picture: low contrast, lifted blacks, little colour */
.hv-pro{background:rgba(126,128,130,.2);backdrop-filter:saturate(.26) contrast(.56) brightness(1.2);-webkit-backdrop-filter:saturate(.26) contrast(.56) brightness(1.2)}
/* audio meter */
.hv-audio{position:absolute;top:13.5vh;right:calc(var(--pad) + clamp(190px,17vw,260px) + 12px);width:66px;height:calc(clamp(190px,17vw,260px) * 150 / 360);border-radius:16px;overflow:hidden;display:flex;justify-content:center;align-items:flex-end;gap:8px;padding:24px 0 11px;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.07) 46%,rgba(255,255,255,.11));backdrop-filter:blur(22px) saturate(1.8) brightness(.78);-webkit-backdrop-filter:blur(22px) saturate(1.8) brightness(.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.1),0 10px 34px rgba(0,0,0,.3)}
.hv-audio span{position:absolute;left:0;right:0;top:8px;text-align:center;font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.hv-audio i{position:relative;width:9px;height:100%;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.hv-audio i::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#34D64A 0 62%,#FFD60A 62% 86%,#FF453A 86%);clip-path:inset(calc((1 - var(--l,.55)) * 100%) 0 0 0);transition:clip-path .1s linear;-webkit-mask:repeating-linear-gradient(to top,#000 0 3px,transparent 3px 4.5px);mask:repeating-linear-gradient(to top,#000 0 3px,transparent 3px 4.5px)}
@media (max-width:819px){ .hv-audio{display:none} }

/* ===== hero round 3b ===== */
/* header: name and descriptor, smaller black badge */
.brand em{font-style:normal;font-weight:400;color:var(--dim);letter-spacing:-.01em;white-space:nowrap}
.nav .asb img{height:36px}
.asb-text::after{background:#000;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
/* zoom notch sits up by the waveform, clear of the headlines */
.hv-ui .notch{top:13.5vh;transform:none}
@media (max-width:819px){
  .brand em{display:none}
  .hv-ui .notch{top:11vh}
}
/* phones held upright: the seam gets its handle, on the diagonal's midpoint */
@media (max-width:819px) and (orientation:portrait){
  .hv-seam em{display:grid;top:calc(50% - 20px);left:-20px;width:40px;height:40px;animation:nudge 2.6s var(--ease) 1.6s 3}
  .hv-seam em svg{width:18px;height:18px}
}
@keyframes nudge{0%,100%{translate:0 0}30%{translate:-9px 0}60%{translate:9px 0}}


/* ===== hero copy: sized by the room its side has ===== */
/* The band between the top chrome and the dial. Each side's copy box is as wide as that side currently is, and the type scales to the box. */
.hero{--ct:max(19vh,calc(15vh + clamp(190px,17vw,260px) * .4167 + 14px));--cb:26.5vh}
.hv-copy{position:absolute;top:var(--ct);bottom:var(--cb);container-type:size;display:flex;flex-direction:column;justify-content:center;pointer-events:none}
.hv-q .hv-copy{left:var(--pad);width:calc(var(--sxp,50vw) - var(--pad) - 30px);align-items:flex-start}
.hv-p .hv-copy{right:var(--pad);width:calc(var(--W,100vw) - var(--sxp,50vw) - var(--pad) - 30px);align-items:flex-end;text-align:right}
.hero .hv-copy .hv-head{position:static;transform:none;margin:0;white-space:nowrap;letter-spacing:-.045em;line-height:.9;font-size:clamp(20px,min(24.5cqw,46cqh),200px)}
.hero .hv-copy .hv-list{position:static;display:none;margin:0;visibility:visible;opacity:1;transform:none}
.hero .hv-p .hv-copy .hv-list{justify-content:end;justify-items:end}
@container (min-width:250px) and (min-height:255px){
  .hero .hv-copy .hv-head{font-size:clamp(20px,min(24.5cqw,calc((100cqh - 235px) / 1.8)),200px)}
  .hero .hv-copy .hv-list{display:grid;grid-template-columns:auto;gap:7px;margin-top:18px;font-size:13.5px;animation:hvdrop .55s var(--ease)}
  .hero .hv-copy .hv-list li{display:block;white-space:normal;opacity:1;transform:none}
}
@container (min-width:560px) and (min-height:250px){
  .hero .hv-copy .hv-head{font-size:clamp(20px,min(24.5cqw,calc((100cqh - 150px) / 1.8)),200px)}
  .hero .hv-copy .hv-list{display:grid;grid-template-columns:auto auto;gap:7px 34px;margin-top:22px;font-size:clamp(13px,1.06vw,15.5px);animation:hvdrop .55s var(--ease)}
  .hero .hv-copy .hv-list li{display:block;white-space:nowrap;opacity:1;transform:none}
}
@keyframes hvdrop{from{opacity:0;transform:translateY(-12px)}}
.hv-scope,.hv-audio,.hv-ui .notch{top:15vh}
@media (max-height:640px){
  .hv-scope,.hv-audio{display:none}
  .hero{--ct:19vh}
}
@media (max-width:819px){
  .hero{--ct:19vh;--cb:31vh}
  .hv-p .hv-copy{right:34px;width:calc(var(--W,100vw) - var(--sxp,50vw) - 56px)}
  .hv-q .hv-copy{left:20px;width:calc(var(--sxp,50vw) - 42px)}
  .hv-ui .notch{top:11vh}
}
@media (max-width:819px) and (orientation:landscape) and (max-height:520px){
  .hero{--ct:17vh;--cb:22vh}
}
/* a side too narrow for its headline shows none, not a sliver of one */
@container (max-width:120px){ .hero .hv-copy .hv-head{opacity:0} }

/* header: even spacing round the hyphen, and the menu in the true centre */
.brand span{white-space:pre}
.nav-links{position:absolute;left:50%;transform:translateX(-50%)}
@media (max-width:1180px){ .brand em{display:none} }

/* ===== hero round 4 ===== */
/* the grab handle sits at the centre of the seam at every size */
.hv-seam em{top:calc(50% - 17px)}
@media (max-width:819px){
  /* the record rail sits low on phones, which frees the middle of the picture */
  .hv-ui .dock{bottom:calc(30em + env(safe-area-inset-bottom) * 1.4)}
  .hv-p .dialbar{bottom:calc(98em + env(safe-area-inset-bottom) * 1.4)}
  .hv-p .readout{bottom:calc(156em + env(safe-area-inset-bottom) * 1.4)}
  .hero{--cb:calc(21vh + env(safe-area-inset-bottom))}
  .hv-seam em{top:calc(50% - 20px)}
}
@media (max-width:819px){ .hv-seam em{display:grid} }

/* ===== hero round 5 ===== */
/* Headlines are set once at their fully-open size and scaled with a transform as the seam moves: smooth, no re-layout of the type. */
.hv-q .hv-copy{--k:var(--kq,.57);--hf:clamp(20px,min(calc((var(--W,100vw) * .84 - var(--pad) - 30px) * .245),calc((100svh - var(--ct) - var(--cb) - 150px) / 1.8)),200px)}
.hv-p .hv-copy{--k:var(--kp,.57);--hf:clamp(20px,min(calc((var(--W,100vw) * .84 - var(--pad) - 30px) * .245),calc((100svh - var(--ct) - var(--cb) - 150px) / 1.8)),200px)}
.hero .hv-copy .hv-head{font-size:var(--hf)!important;transform:scale(var(--k));transform-origin:0 0;margin-bottom:calc(var(--hf) * 1.8 * (var(--k) - 1));will-change:transform}
.hero .hv-p .hv-copy .hv-head{transform-origin:100% 0}
/* features belong to the side you chose, and arrive one after another */
.hero:not([data-dom=quick]) .hv-q .hv-list,.hero:not([data-dom=pro]) .hv-p .hv-list{display:none!important}
.hero .hv-copy .hv-list{animation:none!important}
.hero .hv-copy .hv-list li{animation:hvdrop .5s var(--ease) both;animation-delay:calc(var(--i,0) * 60ms + 120ms)}
/* the seam needs no labels now the handle sits in the middle */
.hv-seam span{display:none}
@media (max-width:819px){
  .hv-q .hv-copy{--hf:clamp(20px,min(calc((var(--W,100vw) * .82 - 42px) * .245),calc((100svh - var(--ct) - var(--cb) - 240px) / 1.8)),200px)}
  .hv-p .hv-copy{--hf:clamp(20px,min(calc((var(--W,100vw) * .82 - 56px) * .245),calc((100svh - var(--ct) - var(--cb) - 240px) / 1.8)),200px)}
  /* the mode strip is back under the record rail */
  .hv-ui .strip{display:block;bottom:calc(11em + env(safe-area-inset-bottom) * 1.4)}
  .hv-ui .dock{bottom:calc(46em + env(safe-area-inset-bottom) * 1.4)}
  .hv-p .dialbar{bottom:calc(114em + env(safe-area-inset-bottom) * 1.4)}
  .hv-p .readout{bottom:calc(172em + env(safe-area-inset-bottom) * 1.4)}
  .hero{--cb:calc(23.5vh + env(safe-area-inset-bottom))}
}
/* desktop: the Pro block stays on the right, but its feature lines read from the left */
@media (min-width:820px){
  .hero .hv-p .hv-copy .hv-list{justify-items:start;text-align:left}
}
/* zoom notch back at the vertical middle of the right edge, at every size */
.hero .hv-ui .notch{top:50%;transform:translateY(-50%)}

/* ===== grab handle options (preview with ?handle=needle|bar|label|mark|none; default is the glass disc) ===== */
.hero[data-handle] .hv-seam em{animation:none}
.hero[data-handle=needle] .hv-seam em{left:-3.5px;width:7px;height:72px;top:calc(50% - 36px);border-radius:4px;background:var(--amber);box-shadow:0 0 18px rgba(255,196,0,.75);backdrop-filter:none;-webkit-backdrop-filter:none}
.hero[data-handle=needle] .hv-seam em svg,.hero[data-handle=bar] .hv-seam em svg,.hero[data-handle=mark] .hv-seam em svg{display:none}
.hero[data-handle=needle] .hv-seam em::before{content:"";position:absolute;left:50%;top:50%;width:150px;height:16px;transform:translate(-50%,-50%);background:repeating-linear-gradient(90deg,rgba(255,255,255,.8) 0 1.5px,transparent 1.5px 11px);-webkit-mask:linear-gradient(90deg,transparent,#000 28%,transparent 46%,transparent 54%,#000 72%,transparent);mask:linear-gradient(90deg,transparent,#000 28%,transparent 46%,transparent 54%,#000 72%,transparent)}
.hero[data-handle=bar] .hv-seam em{left:-5px;width:10px;height:52px;top:calc(50% - 26px);border-radius:5px;background:rgba(255,255,255,.95);box-shadow:0 4px 18px rgba(0,0,0,.45);backdrop-filter:none;-webkit-backdrop-filter:none}
.hero[data-handle=label] .hv-seam em{left:0;width:auto;height:36px;top:calc(50% - 18px);transform:translateX(-50%);border-radius:18px;display:flex;align-items:center;gap:12px;padding:0 16px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.hero[data-handle=label] .hv-seam em::before{content:"Quick";color:#fff}
.hero[data-handle=label] .hv-seam em::after{content:"Pro";color:var(--amber)}
.hero[data-handle=mark] .hv-seam em{left:-23px;width:46px;height:46px;top:calc(50% - 23px);border-radius:12px;background:url(assets/icon.png) center/cover;box-shadow:0 6px 22px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.25);backdrop-filter:none;-webkit-backdrop-filter:none}
.hero[data-handle=none] .hv-seam em{opacity:0}
.hero[data-handle=none] .hv-seam i{left:-1.5px;width:3px}

/* short phones: tighter band and list so the features still fit under the headline */
@media (max-width:819px) and (max-height:640px){
  .hero{--ct:17vh;--cb:calc(22vh + env(safe-area-inset-bottom))}
  .hero .hv-copy .hv-list{gap:4px;margin-top:12px;font-size:12.5px}
}

/* ===== the dial needle is the grab handle; it scales with the screen ===== */
.hero[data-handle=needle] .hv-seam em{--nh:clamp(46px,8.6vh,88px);--nw:clamp(5px,.5vw,8px);left:calc(var(--nw) / -2);width:var(--nw);height:var(--nh);top:calc(50% - var(--nh) / 2);border-radius:var(--nw)}
.hero[data-handle=needle] .hv-seam em::before{width:clamp(96px,13vw,180px);height:clamp(11px,1.9vh,18px);background:repeating-linear-gradient(90deg,rgba(255,255,255,.8) 0 1.5px,transparent 1.5px clamp(8px,.85vw,12px))}
/* a generous invisible touch area round the needle */
.hero[data-handle=needle] .hv-seam em::after{content:"";position:absolute;inset:-14px -26px}
@media (max-width:819px){
  .hero[data-handle=needle] .hv-seam em{--nh:clamp(44px,7.4vh,64px);--nw:6px;animation:nudge 2.6s var(--ease) 1.6s 3}
  .hero[data-handle=needle] .hv-seam em::before{width:clamp(84px,26vw,120px)}
}
/* needle: a little thinner everywhere; fewer ticks where the headlines come close to the seam */
.hero[data-handle=needle] .hv-seam em{--nw:clamp(4px,.36vw,6px)}
.hero[data-handle=needle] .hv-seam em::before{width:clamp(64px,calc(22vw - 140px),180px)}
@media (max-width:819px){
  .hero[data-handle=needle] .hv-seam em{--nw:4px}
  .hero[data-handle=needle] .hv-seam em::before{width:clamp(50px,15vw,70px)}
}

/* the nudge hint stops the moment the hero is touched */
.hero.held .hv-seam em{animation:none!important}
/* thinner ticks beside the needle */
.hero[data-handle=needle] .hv-seam em::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.78) 0 1px,transparent 1px clamp(8px,.85vw,12px))}

/* ===== performance: transforms only ===== */
.hv{will-change:auto}
/* the two sides are revealed by sliding a clipped box one way and its contents back the other: no layout, no repaint */
.hv-q{left:0;width:100%;transform:translate3d(calc(var(--sxp,50vw) - 100%),0,0);will-change:transform}
.hv-q .hv-in{transform:translate3d(calc(100% - var(--sxp,50vw)),0,0)}
.hv-p{left:0;right:0;transform:translate3d(var(--sxp,50vw),0,0);will-change:transform}
.hv-p .hv-in{left:0;transform:translate3d(calc(var(--sxp,50vw) * -1),0,0)}
.hv-seam{left:0;transform:translate3d(var(--sxp,50vw),0,0);will-change:transform}
/* the Log picture is a second copy of the photo, filtered once, instead of a live filter over the first */
.hv-pro{clip-path:none;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden;transform:translate3d(var(--sxp,100vw),0,0);will-change:transform}
.hv-pro-in{position:absolute;inset:0;transform:translate3d(calc(var(--sxp,100vw) * -1),0,0);will-change:transform}
.hv-img-log{filter:saturate(.26) contrast(.56) brightness(1.16)!important;transform:none!important}
/* the collapse: four black bars slide in and four corner pieces round the opening */
.cbar,.ccor{position:absolute;z-index:3;pointer-events:none;will-change:transform}
.cbar{background:#000}
.cb-t{left:0;right:0;top:0;transform:translate3d(0,-100%,0)} .cb-b{left:0;right:0;bottom:0;transform:translate3d(0,100%,0)}
.cb-l{left:0;top:0;bottom:0;transform:translate3d(-100%,0,0)} .cb-r{right:0;top:0;bottom:0;transform:translate3d(100%,0,0)}
.ccor{transform:scale(0)}
.cc-tl{left:0;top:0;transform-origin:0 0;background:radial-gradient(farthest-side at 100% 100%,transparent 98%,#000 100%)}
.cc-tr{right:0;top:0;transform-origin:100% 0;background:radial-gradient(farthest-side at 0 100%,transparent 98%,#000 100%)}
.cc-bl{left:0;bottom:0;transform-origin:0 100%;background:radial-gradient(farthest-side at 100% 0,transparent 98%,#000 100%)}
.cc-br{right:0;bottom:0;transform-origin:100% 100%;background:radial-gradient(farthest-side at 0 0,transparent 98%,#000 100%)}
/* the phone sits above the picture with a see-through viewfinder; its bezel is a ring, not a filled box */
.hv-phone{z-index:4;pointer-events:none}
.hv-phone .phone{background:none}
.hv-phone .phone::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:inherit;background:linear-gradient(145deg,#4a4a4d,#1b1b1d 30%,#0c0c0d 70%,#3a3a3d);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.hv-phone .ph-screen,.hv-phone .vf{background:transparent}
.hv-title,.hv-end{z-index:5}
/* while it runs, drop everything that costs and cannot be seen */
.hero.collapsing .hv::before{display:none}
.hero.collapsing .hv-zebra{animation-play-state:paused}
.hero.gone .hv-world,.hero.gone .hv-ui,.hero.gone .hv-pro,.hero.gone .hv-seam{visibility:hidden}

/* ===== performance round 2: nothing that must be re-blended or re-blurred every frame ===== */
.hv-peak{mix-blend-mode:normal}
.hv::before{mix-blend-mode:normal;opacity:.045}
.hv-img-log{filter:none!important}
.hv-zebra{background:none;animation:none;-webkit-mask-image:none!important;mask-image:none!important}
.hv-zebra i{position:absolute;inset:0;background-size:100% 100%;animation:zebA .5s steps(1) infinite}
.hv-zebra i+i{animation-name:zebB}
@keyframes zebA{0%{opacity:1}50%{opacity:0}}
@keyframes zebB{0%{opacity:0}50%{opacity:1}}
.hero.collapsing .hv-zebra i{animation-play-state:paused}
/* touch devices: the hero's glass is flat all the time (steady, and cheap to draw); pointer devices keep real glass all the time. It never switches mid-move. */
@media (hover:none){
  /* the blur comes off every glass layer (the layers themselves, which carry the pill shapes), never a fill on the element's box */
  .hero .hv-ui *,.hero .hv-ui *::before,.hero .hv-ui *::after,.hero .hv-p *,.hero .hv-p *::before,.hero .hv-p *::after,.hero .hv-scope,.hero .hv-audio{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .hero .hv-ui .dock::before{background:rgba(44,44,46,.72)!important}
  .hero .hv-scope,.hero .hv-audio{background:rgba(40,40,42,.72)!important}
}

/* ===== collapse: plain fades, no corner pieces ===== */
.ccor{display:none}
.hv-pro{transition:none}
/* the viewfinder's rounded corners come from a black edge on the phone itself, faded in over the last few percent */
.hv-phone .vf{box-shadow:0 0 0 30px rgba(0,0,0,var(--ring,0))}

/* ===== tiny screens: the headings keep a readable size when the band is short ===== */
@media (max-width:819px) and (orientation:portrait){
  .hv-q .hv-copy{--hf:clamp(min(11.5vw,46px),min(calc((var(--W,100vw) * .82 - 42px) * .245),calc((100svh - var(--ct) - var(--cb) - 240px) / 1.8)),200px)}
  .hv-p .hv-copy{--hf:clamp(min(11.5vw,46px),min(calc((var(--W,100vw) * .82 - 56px) * .245),calc((100svh - var(--ct) - var(--cb) - 240px) / 1.8)),200px)}
}

/* ===== the landing title sits as far above the phone as the side headings sit beside it (desktop) ===== */
@media (min-width:820px){
  .hv-title{--tf:clamp(36px,4.8vw,66px);top:max(62px,calc(50% + 52px - min(629px,calc(100svh - 270px)) / 2 - clamp(28px,4vw,70px) - var(--tf) - 26px))}
}

/* ===== loader: the app's launch splash on a canvas; its iris opens onto the page ===== */
.js .loader{clip-path:none;transition:none;pointer-events:none}
.js .loader.live{background:none}
.loader canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ===== statement: the two pictures are big enough to read, set into the sentence like oversized words ===== */
.statement-text{line-height:1.12}
.st-img{margin:.08em .2em;border-radius:.2em;vertical-align:middle;opacity:.16;transform:scale(.92);box-shadow:0 .12em .5em rgba(0,0,0,.5)}
.st-wide{width:2.5em;height:1.875em}
.st-tall{width:1.65em;height:2.2em}

/* ===== statement, round 2: three lines, four pictures, coloured words ===== */
.statement-text span{transition:opacity .5s,color .5s}
.statement-text .st-p{margin-left:-.12em}
.statement-text span.c-simple.on{color:var(--amber)}
.statement-text span.c-serious{background:linear-gradient(100deg,#4fc3ff,#a98bff 45%,#ff5d8f 80%,#ff8a4c);-webkit-background-clip:text;background-clip:text}
.statement-text span.c-serious.on{color:transparent}
.statement-text span.c-it{font-style:italic;padding-right:.06em}
.st-img{margin:.08em .04em .08em .2em}
.st-sq{width:2em;height:2em}
.st-land{width:2.7em;height:1.8em}
.st-fn{display:inline-grid;place-items:center;width:1.25em;height:1.25em;margin:0 0 0 .2em;border-radius:50%;vertical-align:middle;color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 .03em rgba(255,255,255,.28);opacity:.16;transform:scale(.9);transition:opacity .6s,transform .8s var(--spring)}
.st-fn svg{width:62%;height:62%;display:block;fill:currentColor}
.statement-text span.on+.st-fn{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .st-fn{opacity:1;transform:none} .statement-text span.c-simple{color:var(--amber)} .statement-text span.c-serious{color:transparent} }
.st-fn{background:none;box-shadow:none;width:1.05em;height:1.05em;color:var(--amber)}
.st-fn svg{width:100%;height:100%;fill:none}
.st-k{white-space:nowrap;font-weight:inherit}
.statement-text .st-p{margin-left:0}
.statement-text i+.st-p{margin-left:-.04em}
.statement-text{line-height:1.08}

/* ===== Dual: the two saved-file cards are the same height (B's width follows from A's 16:9 picture) ===== */
.clip-a{width:62%}
.clip-b{width:calc(62% * 81 / 256)}
.clip-b figcaption{padding-left:8px;padding-right:8px;gap:5px}
.clip img{object-position:50% 50%}

/* ===== Dual: a small yellow "Drag" badge on camera B's pane says it moves; it goes once the pane has been dragged ===== */
.pb-drag{position:absolute;right:.75em;bottom:.75em;width:4.1em;height:4.1em;border-radius:50%;background:var(--amber);color:#000;display:grid;place-items:center;font-style:normal;font-family:var(--sans);font-size:9em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;z-index:4;opacity:0;transform:scale(.4);transition:opacity .35s,transform .6s var(--spring);pointer-events:none;box-shadow:0 .3em 1em rgba(0,0,0,.4)}
.pane-b.hint .pb-drag{opacity:1;transform:none;animation:pbdrag 2.4s ease-in-out .8s infinite}
.pane-b.hint .bgear{opacity:0}
@keyframes pbdrag{0%,100%{transform:none}50%{transform:scale(1.1)}}
/* phones keep the two saved-file cards under the turned phone */
@media (max-width:819px) and (orientation:portrait) and (min-height:641px){
  .modes.land .asides{display:block;width:min(250px,70%);height:116px;margin-top:10px}
  .modes.land .outputs-dual{gap:10px}
  .modes.land .clip figcaption{padding:6px 8px;font-size:9.5px}
  .modes.land .clip-a figcaption span{display:none}
}
/* phones keep the big outlined mode word behind the phone */
@media (max-width:819px) and (orientation:portrait){
  .stage-word{display:grid;top:calc(50% + 30px)}
  .stage-word b{font-size:calc(min(34vw,24svh) * var(--k,1))}
}

/* phones: the pinned phone ends above the stage's fade, so it never sits over the text scrolling beneath */
@media (max-width:819px) and (orientation:portrait){
  .modes{--pw:min(calc((55.8svh - 80px) / 2.17),230px)}
  .modes-stage{height:62svh;padding-bottom:calc(6.2svh + 6px);background:linear-gradient(#000 90%,transparent)}
}

/* Dual: the saved-file cards play the takes live (a canvas over the still) */
.clip-pic{position:relative}
.clip-live{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .25s}
.clip-live.on{opacity:1}
@media (max-width:819px) and (orientation:portrait) and (min-height:641px){
  .modes.land .asides{width:min(300px,80%);height:132px}
  .modes.land .clip figcaption{padding:5px 6px;font-size:8.5px;gap:4px}
  .modes.land .clip figcaption b{width:14px;height:14px;font-size:8.5px}
  .modes.land .saved .clip time::after{content:""}
}

/* ===== phones: the two saved-file cards under the turned phone, sized from one width so both keep their shapes (A 16:9, B 9:16, same height) ===== */
@media (max-width:819px) and (orientation:portrait){
  .modes.land .asides{--cardw:min(200px,52vw,24svh);display:block;width:calc(var(--cardw) * 337 / 256 + 10px);height:calc(var(--cardw) * 9 / 16 + 24px);margin-top:10px}
  .modes.land .outputs-dual{gap:10px;align-items:flex-start}
  .modes.land .clip{flex:none;border-radius:10px}
  .modes.land .clip-a{width:var(--cardw)}
  .modes.land .clip-b{width:calc(var(--cardw) * 81 / 256)}
  .modes.land .clip-pic{width:100%;height:calc(var(--cardw) * 9 / 16);aspect-ratio:auto}
  .modes.land .clip figcaption{height:24px;padding:0 6px;font-size:8.5px;gap:4px}
  .modes.land .clip figcaption b{width:14px;height:14px;font-size:8.5px}
  .modes.land .clip-a figcaption span{display:none}
  .modes.land .saved .clip time::after{content:""}
  .modes.land .saved .clip{transform:none}
}

/* mid-width screens (an open Duo, small tablets): the cards stay under the turned phone in Dual */
@media (max-width:1100px) and (min-width:820px){ .modes.land .asides{display:block} }
@media (max-width:819px) and (orientation:portrait){ .modes.land .clip-b time{display:none} .modes.land .clip-b figcaption{justify-content:center} }

/* ===== chapter counter: a drum of ticks locked to the window's right edge ===== */
@media (min-width:820px){
  .chdots{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:40;display:block;width:44px;height:220px;opacity:0;pointer-events:none;transition:opacity .4s;gap:0}
  .chdots.show{opacity:1;pointer-events:auto}
  .drum{position:absolute;inset:0;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
  .drum-strip{--step:48px;position:absolute;right:0;top:50%;width:100%;transform:translate3d(0,calc((var(--f,0) + .5) * var(--step) * -1),0);will-change:transform}
  .chdots .drum-strip button{display:block;width:100%;height:var(--step);border-radius:0;padding:0;position:relative;background:repeating-linear-gradient(rgba(255,255,255,.34) 0 1.5px,transparent 1.5px 12px) right 12px top -.75px / 9px 100% no-repeat;transition:none}
  .chdots .drum-strip button::after{inset:0}
  .chdots .drum-strip button::before{content:"";position:absolute;right:12px;top:calc(50% - 1px);width:20px;height:2px;border-radius:1px;background:rgba(255,255,255,.8);transition:background .3s,width .4s var(--ease)}
  .chdots .drum-strip button.on{height:var(--step);background-color:transparent}
  .chdots .drum-strip button.on::before{background:var(--amber);width:24px}
  .chdots .drum-strip button:hover::before{width:28px}
  .drum-needle{position:absolute;right:0;top:calc(50% - 1.5px);width:8px;height:3px;border-radius:2px 0 0 2px;background:var(--amber);box-shadow:0 0 12px rgba(255,196,0,.8);pointer-events:none}
}

/* short desktop-width windows (an open Duo with the browser bars showing): the pinned phone shrinks to clear the header instead of stopping at 230px */
@media (min-width:820px){ .modes{--pw:clamp(160px,calc((100svh - 150px) / 2.17),318px)} }

/* ===== Video: real Apple Log 2 footage on the Log side (no filter), and the wipe's handle is the hero's dial needle, smaller ===== */
.wipe .log img,.wipe .log video{filter:none}
.wipe-line{width:1.5em;margin-left:-.75em}
.wipe-knob{width:5em;height:58em;margin:-29em -2.5em;top:56%;border-radius:3em;background:var(--amber);box-shadow:0 0 16em rgba(255,196,0,.75);backdrop-filter:none;-webkit-backdrop-filter:none}
.wipe-knob svg{display:none}
.wipe-knob::before{content:"";position:absolute;left:50%;top:50%;width:92em;height:13em;transform:translate(-50%,-50%);background:repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 1.2em,transparent 1.2em 8em);-webkit-mask:linear-gradient(90deg,transparent,#000 26%,transparent 44%,transparent 56%,#000 74%,transparent);mask:linear-gradient(90deg,transparent,#000 26%,transparent 44%,transparent 56%,#000 74%,transparent)}
.wipe-knob::after{content:"";position:absolute;inset:-14em -30em}
.wipe-tag{top:calc(56% - 46em)}
.wipe-tag.l{right:calc(100% - var(--wx,50%) + 12em)} .wipe-tag.r{left:calc(var(--wx,50%) + 12em)}

/* ===== every phone mockup: a quieter frame (less bright at the lit corners) and much darker side buttons ===== */
.phone{background:linear-gradient(145deg,#2b2b2d,#151516 30%,#0a0a0b 70%,#222224)}
.hv-phone .phone{background:none}
.hv-phone .phone::before{background:linear-gradient(145deg,#2b2b2d,#151516 30%,#0a0a0b 70%,#222224)}
.hw{background:#171718}
.hw.on{background:var(--amber)}

/* ===== Video: assist buttons stacked under the spec box; the copy column keeps its row only where the side column is hidden ===== */
.keys-stack{flex-direction:column;flex-wrap:nowrap;width:100%;gap:8px;margin-top:0}
.keys-stack button{width:100%;justify-content:center}
@media (min-width:1101px){ .keys-inline{display:none} }

/* the stacked assist buttons are solid, so the outlined word behind does not show through */
.keys-stack button{background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line)}
.keys-stack button:hover{box-shadow:inset 0 0 0 1px var(--faint)}
.keys-stack button[aria-pressed=true]{background:var(--amber);box-shadow:none}

/* ===== phones (portrait): the feature pills stay under each mode's paragraph ===== */
@media (max-width:819px) and (orientation:portrait){
  .ch .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
  .ch .chips li{font-size:10.5px;padding:5px 10px}
}
/* ===== phones (portrait): every mode keeps what sits beside its phone (spec boxes, assist buttons, prints, the long-exposure card), small ===== */
@media (max-width:819px) and (orientation:portrait){
  .modes:not(.land) .stage-inner{gap:12px}
  .modes:not(.land) .asides{display:block;width:min(150px,38vw);height:calc(var(--pw) * 2.12);margin:0}
  .modes:not(.land) .aside{gap:10px}
  .spec{border-radius:12px;padding:2px 10px}
  .spec div{padding:6px 0}
  .spec dt{font-size:8px}
  .spec dd{font-size:11.5px;margin-top:2px}
  .keys-stack{gap:6px}
  .keys-stack button{height:30px;padding:0 10px;font-size:11.5px}
  .ch .keys-inline{display:none}
  .outputs-rf{gap:10px}
  .print{width:52%;padding:4px 4px 0}
  .print-crop{margin-left:40%}
  .print figcaption{font-size:8px;padding:4px 1px 5px}
  .sidecard{border-radius:12px}
  .sidecard figcaption{font-size:10.5px;line-height:1.35;padding:8px 10px 10px}
  .sidecard figcaption b{font-size:11.5px}
}
@media (max-width:819px) and (orientation:portrait) and (max-height:640px){
  .modes:not(.land) .asides{zoom:.74;width:150px;height:calc(var(--pw) * 2.12 / .74)}
}
/* mid widths (an open Duo): the side column is back for every mode, and the assist buttons live there */
@media (max-width:1100px) and (min-width:820px){ .asides{display:block} .keys-inline{display:none} }
@media (max-width:819px) and (orientation:portrait){ .modes[data-ch=anywhere]:not(.land) .asides{display:none} }

/* phones: the side card is as tall as the phone and its picture gives way, so the caption is never cut off */
@media (max-width:819px) and (orientation:portrait){
  .modes:not(.land) .sidecard{display:flex;flex-direction:column;height:100%}
  .modes:not(.land) .sidecard img{aspect-ratio:auto;flex:1 1 0;min-height:0;height:auto}
  .modes:not(.land) .sidecard figcaption{flex:none}
}

/* ===== grid lines: on small phone mockups a .75pt white line fell under a device pixel and only its dark edge drew. The white line is never thinner than 1px, and the dark edge drops out when it would be as thin as the line. ===== */
.grid{--gw:max(1px,.75em);--gs:clamp(0px,calc((2em - 1.6px) * 999),2em);background:
  linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)) 33.333% 0/var(--gw) 100% no-repeat,linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)) 66.667% 0/var(--gw) 100% no-repeat,
  linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)) 0 33.333%/100% var(--gw) no-repeat,linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)) 0 66.667%/100% var(--gw) no-repeat,
  linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)) 33.333% 0/var(--gs) 100% no-repeat,linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)) 66.667% 0/var(--gs) 100% no-repeat,
  linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)) 0 33.333%/100% var(--gs) no-repeat,linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)) 0 66.667%/100% var(--gs) no-repeat}

/* marquee: every item is solid white (no outlined ones) */
.marq span:nth-child(even){color:inherit;-webkit-text-stroke:0}

/* ───────── Custom settings walkthrough (lume.js `custom`): Fn → "Video Functions" → "Save as custom setting" → Name → Save →
   the new cell on the Functions rail. Inside the phone, 1em = 1 pt. Cards are content in the ONE glass that grows out of the
   record rail (Lume/UI/GlassDock.swift); card words are SF Pro (the system font: .headline / .body / .subheadline / .caption),
   the chrome stays rounded. Presentational: aria-hidden, nothing takes a pointer. ───────── */
.cw{position:absolute;inset:0;pointer-events:none}
.cw *{pointer-events:none}
.cw.cw-snap,.cw.cw-snap *,.rail.cw-snap,.rail.cw-snap *{transition:none!important;animation:none!important}
.cw .f12{font-size:12em;line-height:1.3333}.cw .f15{font-size:15em;line-height:1.3}.cw .f17{font-size:17em;line-height:1.3}
.cw .f20{font-size:20em;line-height:1}.cw .f24{font-size:24em;line-height:1}
/* the glass: at rest exactly the record rail's pill (y 850–900, r 25); open it grows up to the card and down to y 940, corners 46.
   dockAnimation = spring(0.36 s, bounce 0.16); the scrim goes 10 % → 46 % */
.cw-glass{position:absolute;left:16em;width:408em;top:850em;height:50em;border-radius:25em;overflow:hidden;z-index:11;opacity:0;
  transition:top .5s cubic-bezier(.32,1.16,.5,1),height .5s cubic-bezier(.32,1.16,.5,1),border-radius .4s var(--ease),opacity 0s .5s}
.cw-glass.open{opacity:1;border-radius:46em;transition:top .5s cubic-bezier(.32,1.16,.5,1),height .5s cubic-bezier(.32,1.16,.5,1),border-radius .4s var(--ease),opacity 0s}
.cw-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.125);-webkit-backdrop-filter:blur(7em) saturate(1.8);backdrop-filter:blur(7em) saturate(1.8)}
.cw-glass::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1em rgba(255,255,255,.07),inset 0 1em 1.5em -.5em rgba(255,255,255,.12);z-index:3}
.cw-scrim{position:absolute;inset:0;background:#000;opacity:.1;transition:opacity .4s var(--ease)}
.cw-glass.open .cw-scrim{opacity:.46}
.scr-custom .dock::before{transition:opacity 0s .5s}
.scr-custom.cw-on .dock::before{opacity:0;transition:none}
.scr-custom .shutter{transition:transform .12s,width .25s,height .25s,margin .25s,opacity .25s}
.scr-custom.cw-on :is(.dk,.shutter){opacity:0}
.scr-custom.cw-snap .dock::before,.scr-custom.cw-snap :is(.dk,.shutter){transition:none}
.phone.cw-open .strip.shared{opacity:0;pointer-events:none}
/* the Functions rail rides on top of Fn's glass (DockRailLift: spring 0.36 s, bounce 0.25), 10 pt above its edge */
.scr-custom .rail{transition:opacity .3s,transform .5s cubic-bezier(.3,1.3,.5,1)}
.rail .cw-new{flex-grow:0;opacity:0;transition:flex-grow .45s var(--ease),opacity .2s,color .25s}
.rail.cw-has .cw-new{flex-grow:1;opacity:1}
.rail .cw-new svg{transform:scale(0);transition:transform .55s var(--spring) .12s}
.rail.cw-has .cw-new svg{transform:none}
/* "Customize functions row": the Settings pills' frost, 36 tall, text + 36 wide, 8 pt above the riding rail; arrives 0.16 s after the glass */
.cw-pill{position:absolute;left:0;right:0;margin:0 auto;width:max-content;top:106em;height:36em;padding:0 18em;border-radius:18em;display:grid;place-items:center;z-index:12;
  background:linear-gradient(90deg,rgba(56,56,56,.62),rgba(36,36,36,.62) 60%,rgba(43,43,43,.62));box-shadow:inset 0 0 0 .5em rgba(255,255,255,.14);
  font-family:var(--sans);font-weight:600;color:#fff;white-space:nowrap;opacity:0;transform:scale(.9);transition:opacity .2s,transform .2s}
.cw.pill-on .cw-pill{opacity:1;transform:none;transition:opacity .3s .16s,transform .35s var(--spring) .16s}
/* the cards: laid out once at their final size; a swap cross-fades (0.16 s) */
.cw-card{position:absolute;left:0;top:0;width:408em;font-family:var(--sans);font-weight:400;color:#fff;opacity:0;transition:opacity .16s ease-out;z-index:2}
.cw[data-card=fn] .cw-fn,.cw[data-card=save] .cw-save{opacity:1;transition:opacity .24s ease-out .06s}
.cw-fn{height:728em}
.cw-save{height:388em}
.cw.bot .cw-save{top:auto;bottom:0}
.cw-hd{position:relative;height:80em}
.cw-save .cw-hd{height:84em}
.cw-grab{position:absolute;left:186em;top:10.5em;width:36em;height:5em;border-radius:3em;background:#595959}
.cw-title{position:absolute;left:24em;right:24em;top:26em;height:44em;display:grid;place-items:center;white-space:nowrap}
.cw-title span{font-weight:700}
.cw-save .cw-title{left:64em;right:64em}
.cw-back{position:absolute;left:12em;top:26em;width:44em;height:44em;display:grid;place-items:center}
/* Fn's tiles: 44 pt disc over a two-line 12 pt caption, four 80 pt columns, 8 pt apart */
.cw-grid{position:absolute;left:32em;top:82em;width:344em;display:grid;grid-template-columns:repeat(4,80em);gap:8em}
.cw-tile{display:flex;flex-direction:column;align-items:center;height:82em}
.cw-tile b{width:44em;height:44em;border-radius:50%;display:grid;place-items:center;color:#fff}
.cw-tile em{display:block;width:80em;height:32em;margin-top:6em;font-style:normal;text-align:center;overflow:hidden}
.cw-tile.cs b{box-shadow:inset 0 0 0 1em rgba(255,255,255,.35)}
.cw-tile.cs.lit b{background:var(--ly);color:#000;box-shadow:none}
.cw-tile.cs .s15{font-family:var(--rnd);font-weight:800}
.cw-newtile{display:none}
.cw.cw-has .cw-newtile{display:flex}
.cw.cw-has .cw-newtile b{animation:cwPop .55s var(--spring) .15s both}
@keyframes cwPop{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
.cw-row{position:absolute;left:0;width:408em;height:44em;display:flex;align-items:center;justify-content:center;gap:6em}
.cw-saverow{top:622em;color:rgba(255,255,255,.85)}
.cw-more{top:676em;color:rgba(255,255,255,.72)}
/* the Save card: the Settings frost pills (row radius 26), 20 pt in from the glass */
.cw-surf{position:absolute;left:20em;width:368em;border-radius:26em;background:linear-gradient(90deg,rgba(56,56,56,.62),rgba(36,36,36,.62) 60%,rgba(43,43,43,.62));box-shadow:inset 0 0 0 .5em rgba(255,255,255,.14)}
.cw-id{top:84em;height:68em;display:flex;align-items:center;gap:10em;padding:0 16em}
.cw-iconbtn{display:flex;align-items:center;gap:3em;min-width:52em;height:44em;flex:none}
.cw-iconbtn b{width:34em;height:34em;display:grid;place-items:center}
.cw-iconbtn>svg{color:rgba(255,255,255,.6)}
.cw-field{position:relative;flex:1;height:44em;display:flex;align-items:center;white-space:pre}
.cw-ph{position:absolute;left:0;top:50%;transform:translateY(-50%);color:rgba(235,235,245,.3)}
.cw.typed .cw-ph{display:none}
.cw-caret{width:2em;height:22em;margin-left:1em;border-radius:1em;background:#FF9933;opacity:0}
.cw.focus .cw-caret{animation:cwBlink 1s steps(1,end) infinite}
@keyframes cwBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.cw-tog{top:172em;height:52em;display:flex;align-items:center;justify-content:space-between;padding:0 16em}
.cw-switch{position:relative;width:64em;height:28em;border-radius:14em;background:rgba(120,120,128,.36);flex:none}
.cw-switch::after{content:"";position:absolute;left:2em;top:2em;width:38em;height:24em;border-radius:12em;background:#fff}
.cw-disc{top:238em;height:52em;display:flex;align-items:center;justify-content:space-between;padding:0 16em}
.cw-disc svg{color:rgba(235,235,245,.3)}
.cw-savebtn{position:absolute;left:20em;width:368em;top:310em;height:50em;border-radius:25em;background:var(--ly);color:#000;display:grid;place-items:center;font-weight:600}
/* the system keyboard (a stand-in: iOS draws it, not Lume); the camera screen ignores it, nothing else moves */
.cw-kb{position:absolute;left:0;bottom:0;width:440em;height:300em;padding:10em 4em 0;z-index:30;border-radius:28em 28em 0 0;background:rgba(40,40,42,.82);
  -webkit-backdrop-filter:blur(20em) saturate(1.6);backdrop-filter:blur(20em) saturate(1.6);transform:translateY(102%);transition:transform .36s cubic-bezier(.2,.9,.25,1)}
.cw.kb-on .cw-kb{transform:none}
.cw-kr{display:flex;gap:6em;height:45em;margin-bottom:11em}
.cw-kr.r1{padding:0 22em}
.cw-kb .k{flex:1 1 0;border-radius:9em;background:rgba(255,255,255,.3);display:grid;place-items:center;color:#fff;font-family:var(--sans);font-weight:400;transition:background .12s,color .12s}
.cw-kb .k.fn{flex:0 0 46em;background:rgba(255,255,255,.14)}
.cw-kr.r2 .kshift{margin-right:8em}.cw-kr.r2 .k.fn:last-child{margin-left:8em}
.cw-kb .k.k123{flex-basis:92em}
.cw-kb .k.ret{flex:0 0 92em;background:#0A84FF}
.cw-kb .k.kp{background:rgba(255,255,255,.62)}
.cw.sh .cw-kb .kshift{background:#fff;color:#000}
.cw.sh .cw-kb .k[data-k]:not(.sp) span{text-transform:uppercase}
/* the touch: a soft white dot that presses in and fades where the finger lands */
.cw-touch{position:absolute;width:46em;height:46em;margin:-23em 0 0 -23em;border-radius:50%;z-index:35;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0 36%,rgba(255,255,255,.45) 58%,rgba(255,255,255,0) 71%)}
.cw-touch.go{animation:cwTap .62s ease-out}
@keyframes cwTap{0%{opacity:0;transform:scale(1.35)}22%{opacity:.9;transform:scale(.78)}100%{opacity:0;transform:scale(1.04)}}

/* ===== Why Lume: a bento of benefits (12 columns on desktop, 2 on phones) ===== */
.bento{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(212px,auto);gap:14px}
.tile{min-height:0;padding:24px}
.tile h3{font-size:clamp(17px,1.5vw,21px);letter-spacing:-.02em;line-height:1.15}
.tile p{font-size:14px;line-height:1.45}
.b-instant{grid-column:span 5;grid-row:span 2}
.b-pro{grid-column:span 7}
.b-privacy{grid-column:span 3}
.b-price{grid-column:span 4}
.b-dual,.b-rf,.b-yours,.b-fn,.b-lock,.b-custom{grid-column:span 4}
.b-dual,.b-rf{grid-row:span 2}
.b-yours{grid-row:span 2}
.tile-mid{font-size:clamp(40px,4.6vw,68px)!important}
.b-chips{margin:0 0 auto;gap:7px}
.b-chips li{font-size:11.5px;padding:6px 11px;color:var(--ink);box-shadow:inset 0 0 0 1px var(--faint)}
.b-chips li:nth-child(3n+1){color:var(--amber);box-shadow:inset 0 0 0 1px rgba(255,196,0,.45)}
/* picture tiles: the photo fills the tile under a fade, the words sit on it */
.tile-pic{justify-content:flex-end}
.tile-bg{position:absolute;inset:0;z-index:0}
.tile-bg>img{width:100%;height:100%;object-fit:cover;display:block}
.tile-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.88) 82%)}
.tile-pic h3,.tile-pic p{position:relative;z-index:1}
.tile-pic p{color:rgba(255,255,255,.78)}
.b-pane{position:absolute;right:7%;top:9%;width:27%;aspect-ratio:9/16;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.5),0 14px 30px rgba(0,0,0,.5);z-index:1}
.b-pane img{width:100%;height:100%;object-fit:cover;display:block}
.b-frame{position:absolute;left:27%;top:24%;width:46%;aspect-ratio:3/4;border-radius:8px;box-shadow:0 0 0 1.5px #fff,0 0 0 999px rgba(0,0,0,.34);z-index:0}
.b-ico{margin:0 0 auto;width:64px;height:64px;color:var(--amber)}
.b-ico svg{width:100%;height:100%;display:block}
.b-ways{margin:0 0 auto;display:flex;flex-wrap:wrap;gap:6px}
.b-ways span{font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:99px;background:rgba(255,255,255,.07);color:var(--ink)}
.b-ways span:first-child{background:var(--amber);color:#000}
.b-nums{margin:0 0 auto;display:flex;gap:8px}
.b-nums i{font-style:normal;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:17px;box-shadow:inset 0 0 0 1.5px var(--faint)}
.b-nums i:first-child{background:var(--amber);color:#000;box-shadow:none}
@media (max-width:1100px) and (min-width:820px){
  .b-instant{grid-column:span 6}.b-pro{grid-column:span 6}.b-privacy{grid-column:span 6}.b-price{grid-column:span 6}
  .b-dual,.b-rf,.b-yours,.b-fn,.b-lock,.b-custom{grid-column:span 6}
}
@media (max-width:819px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:10px}
  .tile{min-height:190px;padding:18px;border-radius:20px}
  .tile-touch{min-height:340px}
  .b-instant,.b-pro,.b-dual,.b-rf{grid-column:span 2;grid-row:auto}
  .b-privacy,.b-price,.b-yours,.b-fn,.b-lock,.b-custom{grid-column:span 1;grid-row:auto}
  .b-dual,.b-rf{min-height:300px}
  .tile h3{font-size:16px}.tile p{font-size:13px}
  .tile-big{font-size:64px!important}.tile-mid{font-size:34px!important}
  .b-ico{width:48px;height:48px}.b-nums i{width:36px;height:36px;font-size:15px}
}
.tile-mid{line-height:1!important}
.b-chips{margin-bottom:auto;padding-bottom:16px}
.b-ways,.b-nums,.b-ico{padding-bottom:0;margin-bottom:auto}
.tile-big{padding-bottom:14px}

/* Why Lume, rangefinder tile: the frame lines sit higher, clear of the words, with the town still inside them */
.b-rf .tile-bg>img{object-position:50% 100%}
.b-frame{left:29%;top:10%;width:42%}

/* Why Lume, "Yours." tile: a line of supported iPhones, Duo last */
.b-phones{display:flex;align-items:flex-end;gap:clamp(8px,1.1vw,16px);margin:auto 0;padding:18px 0}
.b-phones span{display:flex;flex-direction:column;align-items:center;gap:8px}
.b-phones svg{height:clamp(46px,5vw,66px);width:auto;display:block;fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.6}
.b-phones .isl{fill:rgba(255,255,255,.55);stroke:none}
.b-phones b{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.02em;color:var(--dim);white-space:nowrap}
.b-phones .duo svg{stroke:var(--amber)}
.b-phones .duo .isl{fill:var(--amber)}
.b-phones .duo b{color:var(--amber)}
.b-yours .tile-big{margin-bottom:0!important}
@media (max-width:819px){ .b-yours{grid-column:span 2} .b-phones svg{height:52px} }
@media (max-width:819px){ .b-custom{grid-column:span 2} }

/* maker stats: the follower counts link to the profiles */
.stats dd a{color:inherit;text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.stats dd a:hover{color:var(--ink);text-decoration-color:var(--ink)}

/* final section: the app's name and line under the icon */
.final-name{text-align:center;margin-top:-14px}
.final-name b{display:block;font-weight:700;font-size:clamp(26px,2.6vw,36px);line-height:1;letter-spacing:-.04em;color:var(--ink)}
.final-name span{display:block;margin-top:9px;font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.final .asb{margin-top:clamp(14px,2.4vh,28px)}

/* ===== pre-launch: "Coming soon" in place of every App Store button ===== */
.asb.soon{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 28px;border-radius:12px;background:#000;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);font-size:17px;font-weight:600;line-height:1;letter-spacing:-.01em;white-space:nowrap;cursor:default}
.asb.soon:hover,.asb.soon:active{transform:none;filter:none}
.nav .asb.soon{height:36px;padding:0 16px;border-radius:9px;font-size:13.5px}
.final .asb.soon{height:66px;padding:0 36px;border-radius:14px;font-size:20px}
.btn.soon{cursor:default;opacity:.75;pointer-events:none}
@media (max-width:819px){ .asb.soon{height:50px;font-size:16px} .final .asb.soon{height:56px;font-size:18px} .nav .asb.soon{height:34px;font-size:13px;padding:0 14px} }

/* ===== waiting list popup ===== */
button.asb.soon,button.btn.soon{font-family:inherit;border:0;cursor:pointer;pointer-events:auto;opacity:1;-webkit-appearance:none;appearance:none}
button.asb.soon:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px #fff}
button.asb.soon:active{transform:scale(.97)}
.wl{width:min(440px,calc(100vw - 32px));max-height:calc(100svh - 32px);overflow:auto;padding:34px 28px 26px;border:0;border-radius:28px;background:#131315;color:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 120px rgba(0,0,0,.7);text-align:center}
.wl::backdrop{background:rgba(0,0,0,.66);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.wl[open]{animation:wlIn .45s var(--spring)}
@keyframes wlIn{from{opacity:0;transform:translateY(18px) scale(.97)}}
.wl-x{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.wl-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.wl-icon{border-radius:15px;box-shadow:0 0 50px rgba(255,196,0,.22);margin:0 auto 18px;display:block}
.wl h2{font-size:28px;font-weight:700;letter-spacing:-.04em;line-height:1.05;margin:0}
.wl-lede{margin:10px auto 0;max-width:30ch;font-size:15.5px;line-height:1.45;color:var(--dim)}
.wl-form{margin-top:22px;text-align:left}
.wl-local{font-size:13px;color:var(--faint);text-align:center;padding:14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.wl-note{margin:16px 0 0;font-size:12px;color:var(--faint)}
/* the store's Omnisend form, restyled for the dark popup */
.wl .omnisend-embed,.wl .omnisend-embed div,.wl .omnisend-embed form{background:transparent!important}
.wl .omnisend-embed [class*="section"],.wl .omnisend-embed [class*="step"]{padding-left:0!important;padding-right:0!important}
.wl .omnisend-embed h1,.wl .omnisend-embed h2,.wl .omnisend-embed h3,.wl .omnisend-embed p,.wl .omnisend-embed span,.wl .omnisend-embed label{color:var(--ink)!important}
.wl .omnisend-embed input[type=email],.wl .omnisend-embed input[type=text]{border-radius:12px!important;border:1px solid rgba(255,255,255,.3)!important;background:rgba(255,255,255,.05)!important;font:400 16px/1 var(--sans)!important;color:var(--ink)!important;height:52px!important;padding:0 16px!important;flex:0 0 auto!important}
.wl .omnisend-embed input::placeholder{color:var(--faint)!important;opacity:1}
.wl .omnisend-embed input:focus{outline:none!important;border-color:var(--amber)!important}
.wl .omnisend-embed button{border-radius:12px!important;background:var(--amber)!important;color:#000!important;border:1px solid var(--amber)!important;font:600 16px/1 var(--sans)!important;height:52px!important;cursor:pointer}
.wl{margin:auto;position:fixed;inset:0;height:fit-content}

.wl .omnisend-embed:empty::after{content:"The signup form didn't load. If you use an ad blocker, try pausing it for this page.";display:block;font-size:13px;line-height:1.4;color:var(--faint);text-align:center;padding:14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}

/* Dual: the red bar under each saved-file card follows the take itself, reaching the end exactly when the clip does */
.clip .bar,.recording .clip .bar{left:0;width:100%;transform-origin:0 50%;transform:scaleX(var(--pg,0));transition:transform .28s linear}
.saved .clip .bar{background:var(--amber)}

/* Custom settings: numbered setup buttons stacked under the spec box */
.keys-stack.keys-num button{justify-content:flex-start;padding-left:7px;gap:10px}
@media (max-width:819px) and (orientation:portrait){
  .keys-stack.keys-num button{height:30px;padding-left:5px;gap:8px}
  .keys-stack.keys-num i{width:21px;height:21px;font-size:11px}
  .modes[data-ch=custom]:not(.land) .aside{gap:8px}
  .modes[data-ch=custom]:not(.land) .spec div{padding:5px 0}
}

/* hero: a press-and-hold (phones) or a mouse drag (desktop) never picks up the photo itself */
.hero,.hero *{-webkit-touch-callout:none}
.hero img,.hero canvas,.hero video{pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.hero{user-select:none;-webkit-user-select:none}

/* ===== speed: pictures for the modes section load when it is near, not with the page ===== */
.modes.near .print-pic{background-image:url(assets/scene-rf.webp)}

/* ===== the landing: the hero is one rounded shape that shrinks into the phone (transforms only) ===== */
.hv-clip,.hv-hold{position:absolute;inset:0;transform-origin:0 0}
.hv-clip{overflow:hidden;isolation:isolate;will-change:transform}
.hero:not(.collapsing) .hv-clip{border-radius:0!important}
.hv-hold{will-change:transform}
.cbar,.ccor{display:none!important}
.hv-phone .vf{box-shadow:none}

/* ===== hero seam: the whole line is a handle on screens with a pointer (the needle stays the handle on phones, where a full-height strip would block scrolling) ===== */
.hv-grab{display:none}
@media (hover:hover){
  /* it stops above the manual dial and the record rail, so their controls stay reachable when the seam is over them */
  .hv-grab{display:block;position:absolute;top:0;bottom:26vh;left:-30px;width:60px;pointer-events:auto;touch-action:none;cursor:ew-resize}
}

/* the seam's grab strip: wider, and wider still where the screen can be touched */
@media (hover:hover){ .hv-grab{left:-40px;width:80px} }
@media (hover:hover) and (any-pointer:coarse){ .hv-grab{left:-64px;width:128px} }