:root{--spot:#33449A;--spot-t:#2B3A85;--a:#BC422D;--b:#33449A}

/* ─── HERO: a wipe across one plate in two inks ─────────────────── */
.cmp{padding:10px 10px 0}
.cmp-view{position:relative;aspect-ratio:992/432;overflow:hidden;background:#E9DFC9;border:1px solid rgba(26,23,20,.5);isolation:isolate;
  touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.cmp-view.hz{cursor:ns-resize;touch-action:pan-x}
.cmp-view video,.cmp-view img.pst{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp-view .vb{filter:var(--gB)}
.cmp-view[data-mode="wipe"] .vb{clip-path:inset(0 0 0 calc(var(--p)*100%))}
.cmp-view[data-mode="wipe"].hz .vb{clip-path:inset(calc(var(--p)*100%) 0 0 0)}
.cmp-view[data-mode="overlay"] .vb{opacity:var(--op)}
.cmp-view[data-mode="diff"] .vb{mix-blend-mode:difference}
.cmp-view[data-mode="flicker"] .vb{opacity:var(--fl,1)}
/* the divider moves with transform (no layout work, no layout shift) */
.cmp-div{position:absolute;inset:0;z-index:3;pointer-events:none;transform:translateX(calc((var(--p) - .5) * 100%));will-change:transform}
.cmp-div i{position:absolute;top:0;bottom:0;left:calc(50% - 2px);width:4px;background:#FFFAEE;box-shadow:0 0 0 1.5px var(--ink)}
.cmp-div b{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#FFFAEE;border:2.5px solid var(--ink);
  box-shadow:3px 4px 0 rgba(26,23,20,.35);display:grid;place-items:center;pointer-events:auto;cursor:grab;touch-action:none}
.cmp-div b svg{width:24px;height:24px;fill:var(--ink)}
.cmp-div b:focus-visible{outline:3px solid var(--verm);outline-offset:3px}
.cmp-view.hz .cmp-div{transform:translateY(calc((var(--p) - .5) * 100%))}
.cmp-view.hz .cmp-div i{left:0;right:0;top:calc(50% - 2px);bottom:auto;width:auto;height:4px}
.cmp-view.hz .cmp-div b svg{transform:rotate(90deg)}
.cmp-view:not([data-mode="wipe"]) .cmp-div{display:none}
.tagab{position:absolute;z-index:2;top:10px;font-family:var(--f-label);font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:#FFFAEE;padding:3px 8px;border:2px solid var(--ink);transition:opacity .15s}
.tagab.a{left:10px;background:var(--b)}.tagab.b{right:10px;top:auto;bottom:9px;background:var(--a)}
.cmp-view[data-mode="flicker"].showA .tagab.b,.cmp-view[data-mode="flicker"].showB .tagab.a{opacity:.25}
.cmp-tc{position:absolute;z-index:2;left:10px;bottom:9px;font-family:var(--f-label);font-size:.66rem;letter-spacing:.06em;color:var(--ink);
  background:rgba(255,250,238,.88);border:1.5px solid var(--ink);padding:2px 7px;display:flex;gap:9px}
.cmp-tc b{font-weight:700}
.cmp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:11px 2px 12px}
.seg{display:flex;border:2px solid var(--ink);background:#FFFAEE}
.seg button{border:0;border-right:2px solid var(--ink);background:none;padding:.42rem .62rem;min-height:38px;font-family:var(--f-label);font-weight:700;font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:6px}
.seg button:last-child{border-right:0}
.seg button[aria-checked="true"],.seg button[aria-pressed="true"]{background:var(--ink);color:#FFFAEE}
.seg kbd{min-width:1.6em;height:1.6em;font-size:.6rem;border-bottom-width:3px}
.seg button[aria-checked="true"] kbd{background:#FFFAEE}
.tr{display:flex;gap:6px;margin-left:auto}
.tr button{width:38px;height:38px;border:2px solid var(--ink);background:#FFFAEE;display:grid;place-items:center;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.tr button:active{transform:translate(2px,2px);box-shadow:none}
.tr svg{width:16px;height:16px;fill:var(--ink)}
.op{display:flex;align-items:center;gap:8px;font-family:var(--f-label);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.op[hidden]{display:none}
.op input{accent-color:var(--a);width:120px}
.fact b{white-space:nowrap}
.hint{font-family:var(--f-label);font-size:.78rem;color:var(--soft);margin-top:16px;line-height:1.9}
.hint b{color:var(--ink)}
.hint kbd{font-size:.64rem}
.cmp-cap{font-family:var(--f-label);font-size:.68rem;letter-spacing:.05em;color:var(--soft);padding:0 2px 12px;border-top:1.5px dashed rgba(26,23,20,.3);padding-top:9px}
.ph-art{position:absolute;right:-22px;top:-58px;width:clamp(96px,10vw,140px);height:auto;z-index:5;transform:rotate(9deg);pointer-events:none;filter:drop-shadow(4px 5px 0 rgba(26,23,20,.28))}

/* coming soon / live download */
html:not(.dl-live) .when-live{display:none!important}
html.dl-live .when-soon{display:none!important}
html:not(.dl-win) .when-win{display:none!important}
.soon{display:inline-flex;align-items:center;gap:14px;max-width:470px;padding:12px 16px 12px 12px;border:2px dashed var(--ink);background:#FFFAEE;transform:rotate(-.6deg)}
.soon b{font-family:var(--f-slab);font-weight:400;font-size:1.15rem;color:#FFFAEE;background:var(--spot);padding:4px 10px 3px;transform:rotate(-3deg);border:2px solid var(--ink);white-space:nowrap}
.soon span{font-family:var(--f-label);font-size:.78rem;color:var(--body);line-height:1.45}
.dl-one{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.dl-one .btn{min-width:250px;justify-content:flex-start}

/* who it's for */
.who-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;list-style:none}
.who-row li{font-family:var(--f-label);font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;border:2px solid var(--ink);background:#FFFAEE;padding:.45rem .75rem;transform:rotate(var(--r,0deg))}
.who-row li:nth-child(3n+1){--r:-1.2deg}.who-row li:nth-child(3n+2){--r:.8deg}.who-row li:nth-child(3n){--r:-.4deg}

/* ─── SYNC GRID ─────────────────────────────────────────────────── */
.sg-print{margin-top:34px;padding:10px 10px 0}
.sg{display:grid;gap:4px;background:var(--ink);border:2px solid var(--ink);grid-template-columns:repeat(var(--c,3),minmax(0,1fr))}
.sg-c{position:relative;aspect-ratio:992/432;overflow:hidden;background:#E9DFC9}
.sg-c[hidden]{display:none}
.sg-c video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sg-l{position:absolute;left:5px;top:5px;z-index:2;font-family:var(--f-label);font-weight:700;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  background:#FFFAEE;border:1.5px solid var(--ink);padding:1px 5px;white-space:nowrap}
.sg-o{position:absolute;right:5px;bottom:5px;z-index:2;font-family:var(--f-label);font-size:.56rem;letter-spacing:.04em;background:var(--ink);color:#FFFAEE;padding:1px 5px;transition:opacity .3s}
.sg.aligned .sg-o{opacity:0}
.sg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:11px 2px 12px}
.cnt{display:flex;align-items:center;border:2px solid var(--ink);background:#FFFAEE;font-family:var(--f-label);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cnt button{width:36px;height:34px;border:0;background:none;font-size:1.1rem;font-weight:700;cursor:pointer}
.cnt button:disabled{opacity:.3;cursor:default}
.cnt output{min-width:70px;text-align:center;border-inline:2px solid var(--ink);padding:.5rem .3rem}
.btn.al{min-height:38px;padding:.42rem .8rem;font-size:.66rem;box-shadow:3px 3px 0 var(--ink)}
.sg-tc{font-family:var(--f-label);font-size:.7rem;letter-spacing:.06em;color:var(--soft)}
.sg-tc b{color:var(--ink)}

/* ─── INSPECT (loupe) ───────────────────────────────────────────── */
.lp-print{padding:10px 10px 0}
.lp{position:relative;cursor:none;touch-action:none;border:1px solid rgba(26,23,20,.5)}
.lp img{width:100%;height:auto;display:block}
.lp-glass{position:absolute;width:184px;height:184px;border-radius:50%;border:3px solid var(--ink);box-shadow:0 0 0 3px #FFFAEE,6px 8px 0 rgba(26,23,20,.3);
  pointer-events:none;transform:translate(-50%,-50%);background:#000;image-rendering:pixelated}
.lp-pt{position:absolute;width:12px;height:12px;border:2px solid #FFFAEE;outline:1.5px solid var(--ink);transform:translate(-50%,-50%);pointer-events:none}
.lp-read{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;align-items:center;padding:12px 2px 6px}
.sw{width:46px;height:46px;border:2px solid var(--ink);box-shadow:3px 3px 0 rgba(26,23,20,.3)}
.lp-read dl{display:grid;grid-template-columns:repeat(4,auto);gap:2px 16px;justify-content:start;font-family:var(--f-label);font-size:.74rem}
.lp-read dt{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.lp-read dd{font-weight:700;white-space:nowrap}
.lp-read dl>div{display:grid}
.lp-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:4px 2px 12px}

/* ─── ANNOTATE ──────────────────────────────────────────────────── */
#mark .spread{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
@media (max-width:860px){#mark .spread{grid-template-columns:1fr}}
.mk-print{padding:10px 10px 0}
.mk{position:relative;border:1px solid rgba(26,23,20,.5);touch-action:none;cursor:crosshair}
.mk canvas{width:100%;height:auto;display:block}
.mk input{position:absolute;z-index:3;font:700 15px var(--f-label);border:2px solid var(--ink);background:#FFFAEE;padding:3px 6px;min-width:150px;transform:translateY(-50%)}
.mk-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:11px 2px 12px}
.inks{display:flex;gap:6px}
.inks button{width:30px;height:30px;border:2px solid var(--ink);cursor:pointer;background:var(--c)}
.inks button[aria-pressed="true"]{box-shadow:0 0 0 3px #FFFAEE,0 0 0 5px var(--ink)}
.mk-bar .btn.sm{min-height:38px}
.hud{position:absolute;left:50%;top:14px;z-index:4;transform:translate(-50%,-8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .3s var(--spring);
  font-family:var(--f-label);font-weight:700;font-size:.72rem;letter-spacing:.05em;background:var(--ink);color:#FFFAEE;padding:7px 12px;border:2px solid #FFFAEE;white-space:nowrap}
.hud.on{opacity:1;transform:translate(-50%,0)}

/* ─── KEYS TABLE ────────────────────────────────────────────────── */
.kt{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 34px;border-top:2px solid var(--ink)}
.kt>div{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center;padding:11px 2px;border-bottom:1.5px solid rgba(26,23,20,.25)}
.kt .k{display:flex;flex-wrap:wrap;gap:4px}
.kt span{font-size:.94rem;color:var(--body)}

/* specs grid (same rhythm as the sister pages) */
.specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 28px;margin-top:28px;border-top:2px solid var(--ink)}
.specs>div{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:18px 2px;border-bottom:1.5px solid rgba(26,23,20,.25)}
.specs b{font-family:var(--f-slab);font-weight:400;font-size:1.3rem;color:var(--spot-t);line-height:1}
.specs h3{font-family:var(--f-head);font-weight:800;font-size:1.25rem;text-transform:uppercase;line-height:1.05;margin-bottom:6px}
html[lang="tr"] .specs h3{font-weight:900;line-height:1.1}
.specs p{font-size:.95rem;color:var(--body)}

/* living plate band */
.plate-band{max-width:var(--max);margin:0 auto;padding:clamp(20px,3vw,40px) var(--gut)}
.plate{padding:10px 10px 12px}
.plate video,.plate img{width:100%;height:auto;aspect-ratio:992/432;object-fit:cover;border:1px solid rgba(26,23,20,.45);background:#E9DFC9}

.fin .soon{background:rgba(255,250,238,.96)}
.fin-art img{max-width:300px}
.slip .notes{white-space:pre-line}
@media (max-width:940px){.ph-art{display:none}}
@media (max-width:640px){
  .tr{margin-left:0}
  .lp-read dl{grid-template-columns:repeat(2,auto)}
  .kt>div{grid-template-columns:96px 1fr}
  .seg button{padding:.42rem .5rem}
  .dl-one .btn{min-width:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.hud{transition:none}}

/* ═══ 2026-10-02 v2: giant name, what-it-does, feature-by-feature animations ═══ */
/* MEGA TITLE: the product name itself is a wipe — A ink | B vermilion, one divider */
.mega{overflow-x:clip;position:relative;max-width:var(--max);margin:0 auto;padding:clamp(18px,3vw,34px) var(--gut) 0;user-select:none;-webkit-user-select:none}
.mega-w{position:relative;cursor:ew-resize;touch-action:pan-y;line-height:.86}
.mega h1,.mega .mB{font-family:var(--f-poster);font-weight:400;font-size:clamp(3.2rem,15.2vw,15rem);letter-spacing:-.01em;line-height:.9;margin:0;white-space:nowrap;
  color:var(--ink);text-shadow:4px 0 0 var(--b)}
.mega .mB{position:absolute;inset:0;pointer-events:none;color:var(--a);text-shadow:-4px 0 0 var(--ink);clip-path:inset(0 0 0 calc(var(--mp,.5)*100%))}
.mega-div{position:absolute;top:-4%;bottom:-6%;left:0;width:100%;pointer-events:none;transform:translateX(calc((var(--mp,.5) - .5)*100%));will-change:transform}
.mega-div i{position:absolute;top:0;bottom:0;left:calc(50% - 3px);width:6px;background:var(--ink)}
.mega-div b{position:absolute;left:50%;top:52%;width:clamp(38px,5vw,64px);height:clamp(38px,5vw,64px);transform:translate(-50%,-50%);border-radius:50%;
  background:#FFFAEE;border:3px solid var(--ink);box-shadow:4px 5px 0 rgba(26,23,20,.32);display:grid;place-items:center}
.mega-div b svg{width:55%;height:55%;fill:var(--ink)}
.mega-sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:clamp(8px,1.2vw,16px);border-top:3px solid var(--ink);padding-top:14px}
.mega-sub .ph-no{margin:0}
.mega-tag{font-family:var(--f-head);font-weight:900;text-transform:uppercase;font-size:clamp(1.5rem,3.2vw,2.7rem);line-height:1;letter-spacing:.005em}
.mega-tag em{font-style:normal;color:var(--verm)}
.free-stamp{display:inline-block;font-family:var(--f-slab);font-size:clamp(1.3rem,2.4vw,2rem);color:#FFFAEE;background:#BC422D;border:3px solid var(--ink);
  padding:6px 16px 4px;transform:rotate(-4deg);box-shadow:4px 4px 0 var(--ink);line-height:1;text-decoration:none}

/* WHAT IT DOES: one big sentence + a five-step strip that lights in turn */
.what{max-width:var(--max);margin:0 auto;padding:clamp(26px,4vw,48px) var(--gut) 0}
.what-p{font-family:var(--f-head);font-weight:800;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.12;max-width:34ch;text-wrap:pretty}
html[lang="tr"] .what-p{font-weight:900;line-height:1.16}
.what-p mark{background:linear-gradient(transparent 58%,rgba(51,68,154,.28) 58%);color:inherit;padding:0 .06em}
.what-p mark.r{background:linear-gradient(transparent 58%,rgba(196,69,47,.3) 58%)}
.flow{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:clamp(20px,3vw,34px);counter-reset:fl}
.flow li{position:relative;border:2px solid var(--ink);background:#FFFAEE;padding:14px 12px 13px;box-shadow:4px 5px 0 var(--shadow);transform:rotate(var(--r,0deg));
  transition:background-color .35s,color .35s,transform .35s var(--spring)}
.flow li:nth-child(odd){--r:-.8deg}.flow li:nth-child(even){--r:.7deg}
.flow li::before{counter-increment:fl;content:counter(fl,decimal-leading-zero);font-family:var(--f-slab);font-size:1.5rem;line-height:1;color:var(--spot)}
.flow li svg{position:absolute;right:10px;top:10px;width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.flow b{display:block;font-family:var(--f-head);font-weight:900;font-size:1.3rem;text-transform:uppercase;line-height:1;margin-top:8px}
.flow span{display:block;font-size:.84rem;color:var(--body);margin-top:5px;line-height:1.4}
.flow li.on{background:var(--ink);color:#FFFAEE;transform:rotate(0) translateY(-5px)}
.flow li.on::before{color:#F3C9B8}.flow li.on span{color:#E6D9BE}
@media (max-width:900px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}.flow li:last-child{grid-column:1/-1}}

/* hero copy now that the name sits above */
.ph{padding-top:clamp(22px,3vw,40px)}
.ph .ph-h{font-family:var(--f-poster);font-weight:400;text-transform:uppercase;font-size:clamp(2.2rem,4.4vw,4rem);line-height:.92;margin:.1em 0 .35em;
  text-shadow:2px 0 0 var(--verm),-2px 0 0 var(--spot)}
.ph .ph-h em{font-style:normal;color:var(--verm);text-shadow:2px 0 0 var(--ink),-2px 0 0 var(--spot)}
html[lang="tr"] .ph .ph-h{font-family:var(--f-head);font-weight:900;line-height:1.02}

/* ═══ FEATURES ═══ */
.feats{max-width:var(--max);margin:0 auto;padding:clamp(40px,6vw,90px) var(--gut) 0}
.ft{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(24px,4.5vw,70px);align-items:center;padding:clamp(34px,5vw,70px) 0;border-top:2px solid var(--ink);position:relative}
.ft.flip>.ft-t{order:2}
.ft-n{display:flex;align-items:baseline;gap:12px;font-family:var(--f-label);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.ft-n b{font-family:var(--f-slab);font-weight:400;font-size:clamp(2.6rem,5vw,4.2rem);line-height:.85;letter-spacing:0;color:var(--spot);text-shadow:3px 3px 0 rgba(26,23,20,.16)}
.ft h3{font-family:var(--f-head);font-weight:900;font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:.95;text-transform:uppercase;margin:.25em 0 .4em;text-wrap:balance}
html[lang="tr"] .ft h3{line-height:1.04}
.ft h3 em{font-style:normal;color:var(--verm)}
.ft p{color:var(--body);font-size:1.03rem;max-width:56ch}
.ft p+p{margin-top:.7em}
.ft p strong{color:var(--ink)}
.ft .keys{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px;font-family:var(--f-label);font-size:.78rem;color:var(--soft)}
.ft .keys span{display:inline-flex;align-items:center;gap:6px}
.ft-a{min-width:0}
.ft-a>.print{padding:10px}
.ft.big{grid-template-columns:1fr}
.ft.big>.ft-t{order:0;max-width:860px}
@media (max-width:900px){.ft{grid-template-columns:1fr}.ft.flip>.ft-t{order:0}}

/* animated stages: paused until on screen (.run); reduced motion = still */
.st{position:relative;aspect-ratio:992/432;overflow:hidden;background:#E9DFC9;border:1px solid rgba(26,23,20,.5);isolation:isolate}
.st>img,.st>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.anim *{animation-play-state:paused}
.run .anim *{animation-play-state:running}
.lab{position:absolute;z-index:4;font-family:var(--f-label);font-weight:700;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;background:#FFFAEE;border:1.5px solid var(--ink);padding:2px 6px;white-space:nowrap}
.lab.dk{background:var(--ink);color:#FFFAEE}
.lab.b{background:var(--a);color:#FFFAEE}.lab.a{background:var(--b);color:#FFFAEE}

/* 02 · auto wipe that turns (W) */
@keyframes aw-clip{0%{clip-path:inset(0 0 0 78%)}22%{clip-path:inset(0 0 0 18%)}44%,49.9%{clip-path:inset(0 0 0 60%)}50%{clip-path:inset(70% 0 0 0)}72%{clip-path:inset(18% 0 0 0)}94%,99.9%{clip-path:inset(62% 0 0 0)}100%{clip-path:inset(0 0 0 78%)}}
@keyframes aw-v{0%{transform:translateX(28%);opacity:1}22%{transform:translateX(-32%);opacity:1}44%,49.9%{transform:translateX(10%);opacity:1}50%,100%{transform:translateX(10%);opacity:0}}
@keyframes aw-h{0%,49.9%{transform:translateY(20%);opacity:0}50%{transform:translateY(20%);opacity:1}72%{transform:translateY(-32%);opacity:1}94%,99.9%{transform:translateY(12%);opacity:1}100%{transform:translateY(12%);opacity:0}}
@keyframes aw-w{0%,46%{background:#FFFAEE;color:var(--ink)}48%,54%{background:var(--ink);color:#FFFAEE}56%,100%{background:#FFFAEE;color:var(--ink)}}
.aw .bi{filter:url(#cmV);animation:aw-clip 9s cubic-bezier(.45,0,.55,1) infinite}
.aw .dv,.aw .dh{position:absolute;inset:0;z-index:3;pointer-events:none}
.aw .dv{animation:aw-v 9s cubic-bezier(.45,0,.55,1) infinite}
.aw .dh{animation:aw-h 9s cubic-bezier(.45,0,.55,1) infinite}
.aw .dv i{position:absolute;top:0;bottom:0;left:calc(50% - 2px);width:4px;background:#FFFAEE;box-shadow:0 0 0 1.5px var(--ink)}
.aw .dh i{position:absolute;left:0;right:0;top:calc(50% - 2px);height:4px;background:#FFFAEE;box-shadow:0 0 0 1.5px var(--ink)}
.knob{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:#FFFAEE;border:2.5px solid var(--ink);display:grid;place-items:center}
.knob svg{width:20px;height:20px;fill:var(--ink)}
.aw .dh .knob svg{transform:rotate(90deg)}
.aw kbd.wk{position:absolute;right:10px;bottom:10px;z-index:5;animation:aw-w 9s linear infinite}
.aw .lab.a{left:8px;top:8px}.aw .lab.b{left:8px;bottom:8px}

/* 03 · three ways to see a small change */
.ov3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ov3 figure{margin:0}
.ov3 .st{aspect-ratio:4/3}
.ov3 .st>img{object-position:46% 50%}
.ov3 figcaption{font-family:var(--f-label);font-weight:700;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;padding-top:8px}
.ov3 figcaption small{display:block;font-weight:500;color:var(--soft);letter-spacing:.02em;text-transform:none;font-size:.74rem;line-height:1.4;margin-top:3px}
@keyframes op-b{0%,10%{opacity:0}45%,55%{opacity:1}90%,100%{opacity:0}}
@keyframes df-b{0%,14%{transform:translate(0,0)}20%,42%{transform:translate(1.6%,-1.2%)}48%,100%{transform:translate(0,0)}}
@keyframes fl-b{0%,49.99%{opacity:1}50%,100%{opacity:0}}
.ov-op .bi{filter:url(#cmV);animation:op-b 5s ease-in-out infinite}
.ov-df .bi{position:absolute;inset:0;mix-blend-mode:difference;animation:df-b 7s cubic-bezier(.6,0,.3,1) infinite}
.ov-df .bi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 50%}
.ov-df .spot{position:absolute;left:40%;top:26%;width:20%;height:26%;border-radius:50%;background:#E4572E;filter:blur(3px);opacity:0;animation:df-s 7s ease-in-out infinite}
@keyframes df-s{0%,58%{opacity:0}66%,90%{opacity:.9}97%,100%{opacity:0}}
.ov-fl .bi{filter:url(#cmV);animation:fl-b 1s steps(1) infinite}
@keyframes fl-la{0%,49.99%{opacity:.3}50%,100%{opacity:1}}@keyframes fl-lb{0%,49.99%{opacity:1}50%,100%{opacity:.3}}
.ov-fl .lab.a{left:6px;top:6px;animation:fl-la 1s steps(1) infinite}.ov-fl .lab.b{right:6px;top:6px;animation:fl-lb 1s steps(1) infinite}
.ov-op .lab{left:6px;bottom:6px}.ov-df .lab{left:6px;bottom:6px}
@media (max-width:640px){.ov3{grid-template-columns:1fr}}

/* 04 · ⌘C → paste into a chat */
.cp-wrap{position:relative}
.cp{position:relative;aspect-ratio:16/9;background:#E9DFC9;display:grid;grid-template-columns:1fr 1fr;gap:6%;padding:6% 6% 9%;align-items:center;border:1px solid rgba(26,23,20,.5);overflow:hidden}
.cp .src{position:relative;border:2px solid var(--ink);background:#FFFAEE;padding:5px;box-shadow:4px 4px 0 var(--shadow)}
.cp .src img{width:100%;height:auto;display:block}
.cp .src svg{position:absolute;left:52%;top:26%;width:34%;height:auto;overflow:visible}
.cp kbd.key{position:absolute;left:50%;bottom:-16px;font-size:.86rem;min-width:3.2em;height:2.2em;transform:translateX(-50%);animation:cp-key 6s infinite}
@keyframes cp-key{0%,14%{transform:translateX(-50%);border-bottom-width:4px;background:#FFFAEE;color:var(--ink)}17%,22%{transform:translateX(-50%) translateY(2px);border-bottom-width:2px;background:var(--ink);color:#FFFAEE}25%,100%{transform:translateX(-50%);border-bottom-width:4px;background:#FFFAEE;color:var(--ink)}}
.cp .fly{position:absolute;left:8%;top:22%;width:38%;border:2px solid var(--ink);background:#FFFAEE;padding:3px;opacity:0;z-index:5;animation:cp-fly 6s cubic-bezier(.5,0,.2,1) infinite}
.cp .fly img{width:100%;height:auto;display:block}
@keyframes cp-fly{0%,20%{opacity:0;transform:translate(0,0) scale(1) rotate(0)}24%{opacity:1;transform:translate(0,-6%) scale(1.03) rotate(-2deg)}46%{opacity:1;transform:translate(122%,32%) scale(.72) rotate(3deg)}50%,100%{opacity:0;transform:translate(122%,32%) scale(.72) rotate(3deg)}}
.chat{display:grid;gap:8px;align-content:center}
.bub{border:2px solid var(--ink);background:#FFFAEE;padding:7px 10px;border-radius:14px 14px 14px 3px;max-width:88%;font-family:var(--f-label);font-size:.7rem;line-height:1.35}
.bub.me{justify-self:end;border-radius:14px 14px 3px 14px;background:#DCE3F2}
.bub.pic{padding:4px;opacity:0;transform:scale(.6);transform-origin:right bottom;animation:cp-pic 6s cubic-bezier(.34,1.56,.64,1) infinite}
.bub.pic img{width:100%;height:auto;display:block;border-radius:10px 10px 2px 10px}
@keyframes cp-pic{0%,47%{opacity:0;transform:scale(.6)}53%,94%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.cp-wrap .hud2{position:absolute;left:50%;top:12px;transform:translateX(-50%);font-family:var(--f-label);font-weight:700;font-size:.7rem;background:var(--ink);color:#FFFAEE;padding:6px 11px;border:2px solid #FFFAEE;white-space:nowrap;opacity:0;animation:cp-hud 6s infinite;z-index:6}
@keyframes cp-hud{0%,20%{opacity:0;transform:translate(-50%,-6px)}24%,44%{opacity:1;transform:translate(-50%,0)}50%,100%{opacity:0;transform:translate(-50%,0)}}
.apps{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;list-style:none}
.apps li{font-family:var(--f-label);font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--ink);padding:2px 7px;background:#FFFAEE}

/* 06 · linked zoom to 1600 % */
.zm{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--ink);border:2px solid var(--ink)}
.zm>div{position:relative;aspect-ratio:4/3;overflow:hidden;background:#E9DFC9}
.zm>div>img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:44% 46%;image-rendering:pixelated;transform-origin:47% 44%;animation:zm 10s steps(1) infinite}
.zm>div+div>img{filter:url(#cmV)}
@keyframes zm{0%{transform:scale(1)}18%{transform:scale(2)}36%{transform:scale(4)}54%{transform:scale(8)}72%{transform:scale(16)}90%{transform:scale(1)}}
.zm .z{position:absolute;right:6px;bottom:6px;z-index:3;width:5.4em;height:1.8em}
.zm .z span{position:absolute;right:0;bottom:0;opacity:0}
.zm .z span:nth-child(1){animation:z1 10s steps(1) infinite}.zm .z span:nth-child(2){animation:z2 10s steps(1) infinite}.zm .z span:nth-child(3){animation:z3 10s steps(1) infinite}.zm .z span:nth-child(4){animation:z4 10s steps(1) infinite}.zm .z span:nth-child(5){animation:z5 10s steps(1) infinite}
@keyframes z1{0%,17.99%{opacity:1}18%,89.99%{opacity:0}90%,100%{opacity:1}}
@keyframes z2{0%,17.99%{opacity:0}18%,35.99%{opacity:1}36%,100%{opacity:0}}
@keyframes z3{0%,35.99%{opacity:0}36%,53.99%{opacity:1}54%,100%{opacity:0}}
@keyframes z4{0%,53.99%{opacity:0}54%,71.99%{opacity:1}72%,100%{opacity:0}}
@keyframes z5{0%,71.99%{opacity:0}72%,89.99%{opacity:1}90%,100%{opacity:0}}
.zm .lab.a,.zm .lab.b{left:6px;top:6px}
.zm-link{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;font-family:var(--f-label);font-weight:700;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.zm-link i{width:30px;height:12px;border:2.5px solid var(--spot);border-radius:8px}

/* 08 · timeline: clips slide into line, playhead runs, In/Out loops */
.tl{background:#FFFAEE;border:2px solid var(--ink);padding:12px 12px 14px}
.tl svg{width:100%;height:auto;display:block;overflow:hidden;font-family:'Space Grotesk',sans-serif}
.tl .clip{animation:tl-al 8s cubic-bezier(.6,0,.2,1) infinite}
.tl .c2{--o:30px}.tl .c3{--o:14px}.tl .c4{--o:46px}
@keyframes tl-al{0%,22%{transform:translateX(var(--o,0))}38%,92%{transform:translateX(0)}100%{transform:translateX(var(--o,0))}}
.tl .phd{animation:tl-ph 8s linear infinite}
@keyframes tl-ph{0%,38%{transform:translateX(0)}65%{transform:translateX(250px)}65.01%{transform:translateX(0)}92%{transform:translateX(250px)}100%{transform:translateX(0)}}
.tl .stamp{animation:tl-st 8s infinite}
@keyframes tl-st{0%,26%{opacity:0}32%,88%{opacity:1}94%,100%{opacity:0}}

/* 09 · export: one frame, many files */
.ex{position:relative;aspect-ratio:16/9;background:#E9DFC9;overflow:hidden;border:1px solid rgba(26,23,20,.5)}
.ex .fr{position:absolute;left:5%;top:14%;width:42%;border:2px solid var(--ink);background:#FFFAEE;padding:4px;box-shadow:4px 4px 0 var(--shadow)}
.ex .fr img{width:100%;height:auto;display:block}
.ex .files{position:absolute;right:5%;top:10%;width:44%;display:grid;gap:8px}
.ex .file{display:flex;align-items:center;gap:9px;border:2px solid var(--ink);background:#FFFAEE;padding:6px 9px;font-family:var(--f-label);font-size:.72rem;font-weight:700;opacity:0;
  transform:translateX(-40%) rotate(-3deg);animation:ex-f 7s cubic-bezier(.34,1.56,.64,1) infinite;box-shadow:3px 3px 0 var(--shadow)}
.ex .file i{font-style:normal;font-family:var(--f-slab);font-weight:400;color:#FFFAEE;background:var(--spot);padding:2px 6px;font-size:.66rem}
.ex .file small{font-weight:500;color:var(--soft);margin-left:auto;font-size:.64rem}
.ex .file:nth-child(2){animation-name:ex-f2}.ex .file:nth-child(3){animation-name:ex-f3}.ex .file:nth-child(4){animation-name:ex-f4}
.ex .file:nth-child(3) i,.ex .file:nth-child(4) i{background:#BC422D}
@keyframes ex-f{0%,6%{opacity:0;transform:translateX(-40%) rotate(-3deg)}12%,86%{opacity:1;transform:translateX(0) rotate(0)}92%,100%{opacity:0;transform:translateX(0)}}
@keyframes ex-f2{0%,11%{opacity:0;transform:translateX(-40%) rotate(-3deg)}17%,86%{opacity:1;transform:translateX(0) rotate(0)}92%,100%{opacity:0;transform:translateX(0)}}
@keyframes ex-f3{0%,16%{opacity:0;transform:translateX(-40%) rotate(-3deg)}22%,86%{opacity:1;transform:translateX(0) rotate(0)}92%,100%{opacity:0;transform:translateX(0)}}
@keyframes ex-f4{0%,21%{opacity:0;transform:translateX(-40%) rotate(-3deg)}27%,86%{opacity:1;transform:translateX(0) rotate(0)}92%,100%{opacity:0;transform:translateX(0)}}
.ex .bar{position:absolute;left:5%;width:42%;bottom:12%;height:14px;border:2px solid var(--ink);background:#FFFAEE}
.ex .bar i{position:absolute;left:0;top:0;bottom:0;background:#BC422D;width:0;animation:ex-b 7s ease-in-out infinite}
@keyframes ex-b{0%,30%{width:0}75%,92%{width:100%}100%{width:0}}
.ex .ok{position:absolute;left:5%;bottom:calc(12% + 20px);font-family:var(--f-label);font-weight:700;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}

/* 10 · overlays & guides */
.gd .safe{position:absolute;z-index:3;border:2px dashed #FFFAEE;outline:1px solid rgba(26,23,20,.45);opacity:0;animation:gd-s 9s infinite}
.gd .s90{inset:5%}.gd .s80{inset:10%;border-color:#FFD9C9}
@keyframes gd-s{0%,6%{opacity:0}12%,40%{opacity:1}46%,100%{opacity:0}}
.gd .bars i,.gd .pill i{position:absolute;z-index:3;background:var(--ink)}
.gd .bars i{left:0;right:0;height:0;animation:gd-b 9s cubic-bezier(.6,0,.2,1) infinite}
.gd .bars i:first-child{top:0}.gd .bars i:last-child{bottom:0}
@keyframes gd-b{0%,44%{height:0}52%,70%{height:9.6%}76%,100%{height:0}}
.gd .pill i{top:0;bottom:0;width:0;animation:gd-p 9s cubic-bezier(.6,0,.2,1) infinite}
.gd .pill i:first-child{left:0}.gd .pill i:last-child{right:0}
@keyframes gd-p{0%,74%{width:0}82%,96%{width:39%}100%{width:0}}
.gd .info{position:absolute;left:8px;top:8px;z-index:4;font-family:var(--f-label);font-size:.6rem;line-height:1.45;background:rgba(26,23,20,.84);color:#FFFAEE;padding:5px 8px}
.gd .tcb{position:absolute;right:8px;bottom:8px;z-index:4;font-family:var(--f-label);font-weight:700;font-size:.74rem;background:rgba(26,23,20,.84);color:#FFFAEE;padding:3px 8px}
.gd .asp{position:absolute;right:8px;top:8px;z-index:4;width:6em;height:1.8em}
.gd .asp span{position:absolute;right:0;top:0;opacity:0}
.gd .asp span:nth-child(1){animation:gd-a1 9s steps(1) infinite}.gd .asp span:nth-child(2){animation:gd-a2 9s steps(1) infinite}.gd .asp span:nth-child(3){animation:gd-a3 9s steps(1) infinite}
@keyframes gd-a1{0%,44%{opacity:1}44.01%,100%{opacity:0}}
@keyframes gd-a2{0%,44%{opacity:0}44.01%,74%{opacity:1}74.01%,100%{opacity:0}}
@keyframes gd-a3{0%,74%{opacity:0}74.01%,100%{opacity:1}}

/* 11 · LUT + sharpen */
.lt .bi{filter:url(#cmM);clip-path:inset(0 100% 0 0);animation:lt-c 8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes lt-c{0%,8%{clip-path:inset(0 100% 0 0)}42%,58%{clip-path:inset(0 0 0 0)}92%,100%{clip-path:inset(0 100% 0 0)}}
.lt .mix{position:absolute;left:10px;right:10px;bottom:10px;z-index:4;display:flex;align-items:center;gap:8px;font-family:var(--f-label);font-weight:700;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;background:#FFFAEE;border:1.5px solid var(--ink);padding:4px 8px}
.lt .mix .tr2{flex:1;height:8px;border:1.5px solid var(--ink);background:#FFFAEE;position:relative}
.lt .mix .tr2 i{position:absolute;left:0;top:0;bottom:0;background:var(--mustard);width:0;animation:lt-m 8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes lt-m{0%,8%{width:0}42%,58%{width:100%}92%,100%{width:0}}
.lt .lab{left:10px;top:10px}
.sh{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.sh figure{margin:0}
.sh .cut{position:relative;aspect-ratio:3/2;overflow:hidden;border:2px solid var(--ink)}
.sh .cut img{position:absolute;width:520%;height:auto;left:-205%;top:-95%;max-width:none;image-rendering:auto}
.sh figure+figure .cut img{filter:url(#cmSharp)}
.sh figcaption{font-family:var(--f-label);font-weight:700;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding-top:5px}

/* 12 · Photo Mode: flip through */
.pm{position:relative;aspect-ratio:992/520}
.pm .card{position:absolute;inset:6% 9%;border:2px solid var(--ink);background:#FFFAEE;box-shadow:5px 6px 0 var(--shadow);animation:pm-c 10s cubic-bezier(.6,0,.2,1) infinite}
.pm .card img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:cover}
.pm .card:nth-child(2){animation-delay:-8s}.pm .card:nth-child(3){animation-delay:-6s}.pm .card:nth-child(4){animation-delay:-4s}.pm .card:nth-child(5){animation-delay:-2s}
@keyframes pm-c{0%,16%{transform:translateX(0) rotate(-1deg);z-index:5;opacity:1}20%{transform:translateX(-112%) rotate(-8deg);z-index:5;opacity:0}20.01%{transform:translateX(4%) rotate(2deg);z-index:1;opacity:0}24%{opacity:1}
  40%{transform:translateX(3%) rotate(1.5deg);z-index:2}60%{transform:translateX(2%) rotate(1deg);z-index:3}80%{transform:translateX(1%) rotate(.5deg);z-index:4}100%{transform:translateX(0) rotate(-1deg);z-index:5;opacity:1}}
.pm-keys{display:flex;gap:8px;align-items:center;margin-top:12px;font-family:var(--f-label);font-size:.74rem;color:var(--soft)}
.pm-keys kbd:last-of-type{animation:pm-k 2s steps(1) infinite}
@keyframes pm-k{0%,79.99%{background:#FFFAEE;color:var(--ink)}80%,100%{background:var(--ink);color:#FFFAEE}}

/* 13 · Presentation Mode: the chrome steps aside (a schematic, not the app's UI) */
.pr{position:relative;aspect-ratio:16/10;background:#2A2724;border:2px solid var(--ink);overflow:hidden}
.pr .tb,.pr .tlb,.pr .insp{position:absolute;background:#3A3632;border:1px solid #57514A;z-index:3}
.pr .tb{left:0;right:0;top:0;height:11%;animation:pr-tb 8s cubic-bezier(.6,0,.2,1) infinite}
.pr .tlb{left:0;right:0;bottom:0;height:20%;animation:pr-tl 8s cubic-bezier(.6,0,.2,1) infinite}
.pr .insp{right:0;top:11%;bottom:20%;width:20%;animation:pr-in 8s cubic-bezier(.6,0,.2,1) infinite}
.pr .tb::after,.pr .tlb::after,.pr .insp::after{content:attr(data-l);position:absolute;left:8px;top:6px;font-family:var(--f-label);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:#B9AE9A}
.pr .img{position:absolute;z-index:1;overflow:hidden;left:2%;top:14%;width:76%;height:63%;animation:pr-im 8s cubic-bezier(.6,0,.2,1) infinite}
.pr .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@keyframes pr-tb{0%,20%{transform:none}32%,80%{transform:translateY(-110%)}92%,100%{transform:none}}
@keyframes pr-tl{0%,20%{transform:none}32%,80%{transform:translateY(110%)}92%,100%{transform:none}}
@keyframes pr-in{0%,20%{transform:none}32%,80%{transform:translateX(110%)}92%,100%{transform:none}}
@keyframes pr-im{0%,20%{left:2%;top:14%;width:76%;height:63%}32%,80%{left:0;top:0;width:100%;height:100%}92%,100%{left:2%;top:14%;width:76%;height:63%}}
.pr .tp{position:absolute;left:50%;bottom:6%;z-index:4;transform:translateX(-50%);display:flex;gap:7px;background:rgba(26,23,20,.86);border:1.5px solid #FFFAEE;padding:6px 11px;opacity:0;animation:pr-tp 8s infinite}
.pr .tp i{width:9px;height:9px;background:#FFFAEE;display:block}
.pr .tp i:nth-child(3){width:0;height:0;background:none;border-left:9px solid #FFFAEE;border-top:5px solid transparent;border-bottom:5px solid transparent}
@keyframes pr-tp{0%,48%{opacity:0;transform:translate(-50%,10px)}54%,72%{opacity:1;transform:translate(-50%,0)}78%,100%{opacity:0;transform:translate(-50%,0)}}
.pr .cur{position:absolute;z-index:5;width:18px;height:18px;left:30%;top:58%;opacity:0;animation:pr-cu 8s infinite}
.pr .cur svg{width:100%;height:100%;fill:#FFFAEE;stroke:var(--ink);stroke-width:1.5}
@keyframes pr-cu{0%,42%{opacity:0;transform:none}46%{opacity:1;transform:none}54%{transform:translate(70px,26px)}72%{opacity:1;transform:translate(70px,26px)}76%,100%{opacity:0;transform:translate(70px,26px)}}
.pr kbd.k{position:absolute;right:8px;top:8px;z-index:6;opacity:0;animation:pr-k 8s infinite}
@keyframes pr-k{0%,14%{opacity:0}18%,30%{opacity:1;background:var(--ink);color:#FFFAEE;border-color:#FFFAEE}36%,100%{opacity:0}}

/* 14 · and also: four small cards */
.also{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
.also>div{border:2px solid var(--ink);background:#FFFAEE;padding:16px 14px;box-shadow:4px 5px 0 var(--shadow);transform:rotate(var(--r,0deg))}
.also>div:nth-child(odd){--r:-.6deg}.also>div:nth-child(even){--r:.6deg}
.also h4{font-family:var(--f-head);font-weight:900;font-size:1.2rem;text-transform:uppercase;line-height:1.05;margin:10px 0 6px}
.also p{font-size:.9rem;color:var(--body);line-height:1.5}
.also .ic{height:58px;display:flex;align-items:center;gap:8px;font-family:var(--f-label);font-weight:700}
.ic-file{position:relative;width:44px;height:54px;border:2px solid var(--ink);background:#E9DFC9;clip-path:polygon(0 0,72% 0,100% 22%,100% 100%,0 100%)}
.ic-file::after{content:".cmk";position:absolute;left:3px;bottom:4px;font-size:.6rem}
.ic-chain{width:26px;height:12px;border:2.5px solid var(--spot);border-radius:8px;animation:ch 2.4s ease-in-out infinite}
@keyframes ch{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.ic-rec kbd:first-child{animation:rk 3s steps(1) infinite}.ic-rec kbd:last-child{animation:rk2 3s steps(1) infinite}
@keyframes rk{0%,49.99%{opacity:1}50%,100%{opacity:.25}}@keyframes rk2{0%,49.99%{opacity:.25}50%,100%{opacity:1;background:var(--ink);color:#FFFAEE}}
.ic-hdr{font-size:.8rem;background:var(--ink);color:#FFE27A;padding:4px 9px;border:2px solid var(--ink);animation:hd 2.2s ease-in-out infinite}
@keyframes hd{0%,100%{box-shadow:0 0 0 0 rgba(242,194,48,0)}50%{box-shadow:0 0 0 7px rgba(242,194,48,.35)}}
.ic-lang span{border:2px solid var(--ink);padding:3px 8px}
.ic-lang span:first-child{animation:lg 3s steps(1) infinite}.ic-lang span:last-child{animation:lg2 3s steps(1) infinite}
@keyframes lg{0%,49.99%{background:var(--ink);color:#FFFAEE}50%,100%{background:#FFFAEE;color:var(--ink)}}@keyframes lg2{0%,49.99%{background:#FFFAEE;color:var(--ink)}50%,100%{background:var(--ink);color:#FFFAEE}}
@media (max-width:900px){.also{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.also{grid-template-columns:1fr}}

/* living plates between the features */
.pl-band{padding:clamp(10px,2vw,24px) 0 clamp(18px,3vw,34px)}

/* real app screenshots (filled in when they exist) */
.shot{margin-top:18px}
.shot img{background:#1d1d1f}

@media (prefers-reduced-motion:reduce){
  .anim *{animation:none!important}
  .cp .fly,.cp-wrap .hud2{display:none}.bub.pic{opacity:1;transform:none}.ex .file{opacity:1;transform:none}.ex .bar i{width:100%}
  .pr .tp{opacity:1}.lt .bi{clip-path:inset(0 0 0 50%)}.gd .safe{opacity:1}
}

.mega .mB{text-shadow:-4px 0 0 var(--ink)}

/* the real app icon beside the one-sentence pitch */
.what{position:relative}
.what-icon{position:absolute;right:var(--gut);top:clamp(10px,2vw,30px);width:clamp(150px,21vw,300px);height:auto;transform:rotate(6deg);filter:drop-shadow(8px 10px 0 rgba(26,23,20,.22));pointer-events:none}
@media (max-width:900px){.what-icon{position:static;display:block;width:120px;margin:0 0 16px auto;transform:rotate(6deg)}}

.ft-t .shot{margin-top:22px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:26px;margin-top:28px}
.shot img{width:100%;height:auto;border:1px solid rgba(26,23,20,.45);background:#1d1d1f}
@media (max-width:640px){.ex .file{font-size:.6rem;padding:4px 6px;gap:6px}.ex .file small{display:none}.ex .files{gap:5px;top:8%}}

/* the real app under the pitch */
.top-shot{margin-top:clamp(26px,4vw,46px)}
.top-shot .shot{margin:0;padding:12px 12px 10px;transform:rotate(-.4deg)}
.top-shot .shot figcaption{font-size:.74rem}

.shots2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;align-items:start}
.shots2 .shot{margin-top:0;padding:7px 7px 8px}
.shots2 .shot figcaption{font-size:.62rem}
@media (max-width:560px){.shots2{grid-template-columns:1fr}}

.ft-shots{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:22px;align-items:start;margin-top:4px}
.ft-shots.one{grid-template-columns:minmax(0,1fr);max-width:920px;width:100%;justify-self:center}
.ft-shots .shot{margin:0}
.lp-glass{visibility:hidden}.lp.ready .lp-glass{visibility:visible}
/* Windows download: second button next to the Mac one, release slip, SmartScreen note */
.dl-one .btn.when-win svg{width:21px;height:21px;flex:none}
.slip.when-win{margin-top:16px}
.win-note{max-width:60ch;margin-top:20px;padding:12px 16px;border:2px dashed var(--ink);background:var(--knock);font-size:.92rem;line-height:1.55;color:var(--body)}
.win-note b{color:var(--ink)}