/* =========================================================================
   METHOD — the marketing page.
   The hero sets the system for everything below it: paper and black, the visualizer is the only loud thing.
   TYPE   three roles, three faces —
          headline: Geist 500, tight, sentence case (one treatment, one size per level);
          reading:  Instrument Sans (METHOD's own) for body copy and navigation;
          technical: IBM Plex Mono for labels, formats and the section index — small, sparing.
   COLOUR paper, black stages, hairline rules; red only for recording; one orange accent for what is live.
   MOTION the hero's laptop opening, the visualizers themselves, nothing decorative. Every section reads at rest.
   ========================================================================= */
html{scroll-behavior:smooth;scroll-padding-top:56px}
body.landing{overflow-x:clip}
.wrap{width:100%;max-width:1680px;margin:0 auto;padding:0 var(--gut)}
section{position:relative}
/* ---------------- type ---------------- */
.display{font-family:var(--disp);font-weight:800;font-stretch:64%;font-size:clamp(54px,9.2vw,172px);line-height:.84;letter-spacing:-.006em;
  text-transform:uppercase;color:var(--ink);font-kerning:normal;font-feature-settings:"kern","case"}
.display.xl{font-size:clamp(60px,12vw,232px);line-height:.83}
.display.md{font-size:clamp(44px,6vw,112px)}
.display .ln{display:block}
.lede{font-size:clamp(17px,1.32vw,21px);line-height:1.38;letter-spacing:-.008em;color:var(--ink-2);max-width:32ch;text-wrap:pretty}
.ctas{display:flex;gap:10px;flex-wrap:wrap}
/* header over black sections, or with Negative on */
.top.dark{--paper:#101011;--surface:#161617;--well:#1E1E20;--line:#27272A;--line-2:#37373A;--ink:#EEEEEB;--ink-2:#A9AAA6;--ink-3:#707170;color-scheme:dark}
.top .brand{transition:opacity .2s}
/* METHOD's Negative flips the picture with the interface: the renders and the screens on the page turn over too
   (never the hardware). The full-bleed stages (audio, the close) keep their picture: copy sits on them. */
.scr-ui,.post{transition:filter var(--t) var(--ease)}
:root[data-neg] :is(.scr-ui,.post,.con-v,.cd,.fr){filter:invert(1) hue-rotate(180deg)}
/* ---------------- devices: rendered hardware, live screens ---------------- */
.device{position:relative;user-select:none}
.dev-img{display:block;width:100%;height:auto;pointer-events:none}
.dev-seq{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.seq-on .dev-seq{display:block}
.seq-on .dev-img{visibility:hidden}
/* the laptop's display: the render leaves it black; METHOD runs in it at the panel's own resolution */
/* the laptop's panel (3024 x 1964, here at half size), mapped onto its four rendered corners */
.dev-quad.lap{width:1512px;height:982px;border-radius:12px;container-type:inline-size}
.scr-ui{position:absolute;left:0;right:0;bottom:0;top:3.77%;background:#F1F1EE}
/* 74 of 1964 px: the band beside the camera, black in full screen */
.scr-ui .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage-live{position:absolute;left:var(--lx,20%);top:var(--ly,10%);width:var(--lw,60%);height:var(--lh,60%);overflow:hidden;background:#000;border-radius:.55cqw}
.stage-live video{width:100%;height:100%;object-fit:cover}
.dev-glass{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:var(--glass,.16)}
/* the phone's display sits in perspective: an element at the panel's proportions, mapped onto its four corners */
.dev-quad{position:absolute;left:0;top:0;width:675px;height:1455px;transform-origin:0 0;border-radius:101px/101px;overflow:hidden;background:#000}
/* ---------------- 01 hero ---------------- */
/* phones only: the four specs come up under the open machine at the end of the scene (on desktop they lie on the floor) */
.hero-specs{display:none;position:absolute;left:var(--gut);right:var(--gut);bottom:max(22px,env(safe-area-inset-bottom));z-index:2;list-style:none;margin:0;padding:14px 0 0;
  grid-template-columns:1fr 1fr;gap:10px 16px;border-top:1px solid var(--rule);opacity:0;color:var(--ink-2);font-size:10px;pointer-events:none}
.hero-specs li{display:flex;align-items:center;gap:8px;white-space:nowrap} .hero-specs li:last-child{grid-column:1/-1}
@media (max-width:359px){ .hero-specs{grid-template-columns:1fr;gap:8px} }
.hero-specs i{width:5px;height:5px;border-radius:50%;background:var(--acc);flex:none}
.hero{height:260vh}
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-copy{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:calc(58px + 4.2vh) var(--gut) 0;will-change:transform,opacity}
.hero-mark{font-weight:600;font-size:13px;letter-spacing:.36em;margin-right:-.36em;color:var(--ink)}
.hero-pos{margin-top:6px;font-size:clamp(15px,1.12vw,18px);color:var(--ink-2);letter-spacing:-.005em}
.hero .xray{margin-top:clamp(12px,2vh,24px)}
.hero .display{font-size:clamp(56px,min(8.7vw,15vh),180px)}
.hero .ctas{margin-top:clamp(18px,3vh,30px);justify-content:center}
.hero-stage{position:absolute;inset:0;pointer-events:none}
.hero .device{position:absolute;left:50%;top:0;width:var(--dw,min(92vw,1325px));transform:translate3d(calc(-50% + var(--dx,0px)),var(--dy,58vh),0) scale(var(--ds,.78));transform-origin:50% 0;will-change:transform}
.xray{position:relative;width:fit-content;max-width:100%}
.xray-mask{position:absolute;inset:-28px;padding:28px;background:var(--ink);color:var(--paper);pointer-events:none;
  clip-path:circle(0px at var(--x,50%) var(--y,50%));transition:clip-path .45s var(--ease)}
.xray-mask .display{color:var(--paper)}
.xray.on .xray-mask{clip-path:circle(clamp(70px,7vw,118px) at var(--x,50%) var(--y,50%));transition:clip-path .12s linear}
  padding-top:clamp(110px,16vh,170px);padding-bottom:clamp(28px,5vh,52px)}
  opacity:0;pointer-events:none;transition:opacity .2s}
.roll{display:block;width:100%}
/* ---------------- producers: two rows of cards drifting in opposite directions (pause on hover) ---------------- */
.proof{padding:clamp(100px,15vh,170px) 0 clamp(90px,13vh,150px);overflow:hidden}
.proof-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(40px,7vh,72px)}
.proof-head .lede{max-width:24ch;padding-bottom:.35em}
/* two rows of cards drifting in opposite directions (moved by Proof in landing.js), faded at the edges; the cards are the
   site's plates: r28, an inner hairline, a soft shadow; a thin orange quote mark, the handle in Geist, mono labels */
.pq{display:flex;flex-direction:column;gap:clamp(14px,1.4vw,20px);padding:18px 0 40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.pq-row{overflow:visible}
.pq-track{display:flex;gap:clamp(14px,1.4vw,20px);width:max-content;will-change:transform}
.pq-card{position:relative;flex:none;width:clamp(300px,26vw,430px);min-height:clamp(220px,16vw,250px);display:flex;flex-direction:column;gap:18px;padding:24px 26px 20px;margin:0;
  border-radius:28px;background:var(--surface);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.05),0 14px 30px -18px rgba(0,0,0,.2),0 40px 70px -50px rgba(0,0,0,.22)}
.pq-card::before{content:"";position:absolute;inset:6px;border-radius:22px;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.pq-card::after{content:"\201C";position:absolute;right:24px;top:10px;font:200 72px/1 var(--disp);color:var(--ink);opacity:.14}
.pq-who{display:flex;align-items:center;gap:12px;padding-right:44px}
.pq-ava{width:42px;height:42px;flex:none;border-radius:14px;display:grid;place-items:center;background:var(--well);box-shadow:inset 0 0 0 1px var(--line);font:500 15px var(--f);color:var(--ink-3);object-fit:cover}
.pq-who b{display:block;font:500 16px var(--disp);letter-spacing:-.02em}
.pq-who small{display:block;margin-top:3px;font:400 13px var(--f);letter-spacing:0;color:var(--ink-3)}
.pq-lines{display:flex;flex-direction:column;gap:10px;flex:1;padding-top:4px}
.pq-lines i{display:block;height:10px;border-radius:999px;background:var(--well)}
.pq-card blockquote{flex:1;font:400 clamp(16px,1.2vw,18px)/1.45 var(--f);letter-spacing:-.005em;color:var(--ink);text-wrap:pretty}
.pq-foot{display:flex;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--rule-2);font:400 13px var(--f);letter-spacing:0;color:var(--ink-3)}
.pq-foot a{color:inherit}
.proof-k{display:flex;gap:12px;color:var(--ink-3);margin-bottom:16px} .proof-k span{color:var(--acc)}
@media (max-width:760px){
  .proof-head{flex-direction:column;align-items:flex-start;gap:16px}
  .pq-card{width:78vw}
}
@media (prefers-reduced-motion:reduce){
  .pq-row{overflow-x:auto;scrollbar-width:none}
}
.proof{padding-top:0}
.proof .proof-head{padding-top:clamp(56px,9vh,104px)}
/* ---------------- the offer ---------------- */
.final{background:#0b0b0c;color:#EEEEEB;overflow:hidden;position:relative}
/* one soft light behind the cards, nothing else behind them */
.final::before{content:"";position:absolute;left:50%;top:58%;width:min(1400px,120vw);height:900px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(238,238,235,.09),rgba(238,238,235,.03) 55%,transparent)}
.final-in{position:relative;z-index:2;padding-top:clamp(110px,16vh,180px);padding-bottom:clamp(80px,12vh,140px);display:flex;flex-direction:column;align-items:center;gap:clamp(40px,7vh,72px)}
.fin-head{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.fin-h{font-size:clamp(34px,5vw,96px)}
.final .display{color:#EEEEEB}
.final .display .ln{display:block}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);width:100%;max-width:1120px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:20px;padding:clamp(24px,2.6vw,40px);border-radius:22px;background:#141416;color:#EEEEEB;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  --ink:#EEEEEB;--ink-2:#A9AAA6;--ink-3:#8B8C8F;--line:rgba(255,255,255,.12);--line-2:#56575B;--paper:#101011}
.plan.life{background:#EEEEEB;color:#121213;box-shadow:0 0 0 1px rgba(255,255,255,.5),0 50px 140px -40px rgba(238,238,235,.28),0 60px 120px -50px rgba(0,0,0,.9);
  --ink:#121213;--ink-2:#55565A;--ink-3:#8B8C8F;--line:#DDDDD8;--line-2:#C9C9C3;--paper:#F1F1EE;--surface:#F8F8F6;--well:#E7E7E3}
.plan-v{position:relative;margin:calc(clamp(24px,2.6vw,40px) * -1 + 8px) calc(clamp(24px,2.6vw,40px) * -1 + 8px) 0;aspect-ratio:16/7;border-radius:15px;overflow:hidden;background:#000}
.plan-v video{width:100%;height:100%;object-fit:cover}
.plan-v span{position:absolute;left:12px;bottom:10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.plan.free .plan-v{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.plan header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.plan h3{font-family:var(--disp);font-weight:800;font-stretch:64%;text-transform:uppercase;font-size:clamp(44px,4.6vw,84px);line-height:.84}
.price{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.price span{font-family:var(--disp);font-weight:700;font-stretch:72%;font-size:clamp(44px,4.6vw,84px);line-height:.84}
.price small{font-size:12px;color:var(--ink-2);white-space:nowrap}
.plan-tag{font-size:clamp(17px,1.3vw,20px);letter-spacing:-.01em;color:var(--ink)}
.incl{list-style:none;display:flex;flex-direction:column;gap:9px;flex:1}
.incl li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:14px;color:var(--ink-2);align-items:start}
.incl li svg{width:16px;height:16px;margin-top:3px;color:var(--ink)}
.incl li.dim{color:var(--ink-3)}
.incl li.dim svg{color:var(--ink-3)}
.plan .cta{width:100%}
.plan.free .cta{--ink:#EEEEEB;--paper:#101011;--line-2:#56575B}
.plan-fine{font-size:12px;color:var(--ink-3);text-align:center;line-height:1.5}
.plan-fine .link{color:var(--ink-2)}
/* ---------------- footer ---------------- */
.foot{border-top:1px solid var(--line);padding:26px 0 calc(26px + env(safe-area-inset-bottom))}
.foot-in{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.foot-nav{display:flex;gap:18px;flex-wrap:wrap;font-size:13px}
.foot .note{margin-left:auto}
/* ================================================================ responsive */
@media (max-width:1100px){
    .plans{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--gut:16px}
  .display{font-size:clamp(46px,14.6vw,72px)}
  .display.xl{font-size:clamp(50px,15.6vw,80px)}
  .display.md{font-size:clamp(40px,12vw,64px)}
  /* phones: the same scroll scene with its own composition (Hero.measureM) — a shorter run, a tighter crop */
  .hero{height:205vh;height:205svh}
  .hero-copy{padding:78px var(--gut) 0}
  .hero-pos{font-size:15px}
  .hero .xray{margin-top:14px}
  .hero .display{font-size:clamp(38px,11.2vw,60px);line-height:.98}
  .hero .ctas{width:100%;max-width:440px;margin-top:22px;flex-wrap:nowrap}
  .hero .ctas .cta{flex:1 1 0;min-width:0;padding:0 12px}
  .hero-specs{display:grid}
  .reduced .hero{height:auto}
  .reduced .hero-pin{position:relative;height:auto;overflow:visible;padding-bottom:28px}
  .reduced .hero-copy{position:relative;padding-top:92px}
  .reduced .hero-stage{position:relative;margin-top:20px;overflow:hidden}
  .reduced .hero .device{position:relative;left:auto;transform:none!important}
  .reduced .hero-specs{position:static;opacity:1!important;transform:none!important;margin:8px var(--gut) 0}
  .plans{grid-template-columns:minmax(0,1fr)}
  .plan.life{order:-1}
  .price small{white-space:normal;max-width:16ch}
  .foot .note{margin-left:0;width:100%}
  .landing .crumb{display:none}
}
/* tablets held upright: the phone scene, scaled up (Hero.measureM) — the specs come up under the machine instead of lying on the floor */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .hero{height:220vh;height:220svh}
  .hero-specs{display:grid;left:max(var(--gut),calc(50% - 300px));right:max(var(--gut),calc(50% - 300px));font-size:11px;gap:12px 20px}
  .hero-specs li:last-child{grid-column:auto}
  .reduced .hero-specs{display:none}
}
@media (max-width:420px){
  .cta{height:50px;padding:0 18px;font-size:13.5px}
}
@media (max-width:760px), (hover:none){
  .xray-mask{display:none}
}
@media (prefers-reduced-motion:reduce) and (min-width:761px){
  .hero{height:auto}
  .hero-pin{position:relative;height:auto;overflow:visible;padding-bottom:48px}
  .hero-copy{position:relative}
  .hero-stage{position:relative;margin-top:44px}
  .hero .device{position:relative;left:auto;transform:none}
  .hero-stage{overflow:hidden}
}
/* =====================================================================================================================
   THE SYSTEM — one line weight, one label, one headline. Quiet environment, loud visualizer.
   ===================================================================================================================== */
:root{--rule:rgba(18,18,19,.16);--rule-2:rgba(18,18,19,.08);--node:#121213}
.neg,:root[data-neg]{--rule:rgba(238,238,235,.18);--rule-2:rgba(238,238,235,.08);--node:#EEEEEB}
:root[data-neg] .neg:not(.stay){--rule:rgba(18,18,19,.16);--rule-2:rgba(18,18,19,.08);--node:#121213}
/* the label: every annotation, index and caption on the page */
.tx{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;line-height:1.35;color:var(--ink-2)}
/* the headline */
.display{font-family:var(--disp);font-weight:500;font-stretch:100%;text-transform:none;letter-spacing:-.055em;line-height:.92;font-size:clamp(40px,5.4vw,100px)}
.display.xl{font-size:clamp(44px,min(6.6vw,11vh),128px);line-height:.92}
.display.md{font-size:clamp(34px,4.2vw,78px)}
.fin-h{font-size:clamp(34px,4.2vw,80px)}
.plan h3{font-family:var(--disp);font-weight:500;font-stretch:100%;text-transform:none;letter-spacing:-.05em;font-size:clamp(30px,2.8vw,48px)}
.price span{font-family:var(--disp);font-weight:500;font-stretch:100%;letter-spacing:-.05em;font-size:clamp(30px,2.8vw,48px);line-height:1;font-variant-numeric:tabular-nums}
.lede{font-size:clamp(16px,1.2vw,19px);line-height:1.4;color:var(--ink-2);max-width:34ch}
.cta{height:46px;padding:0 20px;border-radius:999px;font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.1em}
.cta:hover{opacity:.85}
/* section index: (02) name ———————— 02 / 07 */
.sx{position:absolute;left:var(--gut);right:var(--gut);top:calc(56px + 14px);z-index:6;display:flex;align-items:center;gap:14px;pointer-events:none}
.sx::after{content:"";order:2;flex:1;height:1px;background:var(--rule)}
.sx b{order:1;font-weight:400;color:var(--ink)}
.sx span{order:3}
@media (max-width:760px){
  .display{font-size:clamp(36px,10.4vw,56px)}
  .display.xl{font-size:clamp(38px,11vw,60px)}
  .display.md{font-size:clamp(32px,9.4vw,50px)}
  .sx{top:calc(56px + 10px)}
}
.sx b{white-space:pre}
@media (max-width:760px){
  .sx{position:relative;top:auto;left:auto;right:auto;margin:0 var(--gut) 22px}
}
/* ---------- accent: one orange, used only where something is live ---------- */
.sx b i{font-style:normal;color:var(--acc)}
/* ---------- hero floor: the drawn plane the laptop stands on ---------- */
.hero-floor{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
/* ---------- pricing: Free plays Retro; Lifetime goes through every visualizer but MIDI ---------- */
.plan-v video{position:absolute;inset:0}
.plan-v.cyc video{opacity:0;transition:opacity .7s var(--ease)}
.plan-v.cyc video.on{opacity:1}
.pv-name{position:absolute;right:12px;top:10px;z-index:2;font-size:10px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.pv-name::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--acc);vertical-align:1px}
/* =====================================================================================================================
   THE SECTIONS BELOW THE HERO — static grids; nothing needs a scroll position to be read.
   ===================================================================================================================== */
.display{font-size:clamp(38px,4.4vw,76px);line-height:.96}
.sx{position:relative;top:auto;left:auto;right:auto;margin:0 var(--gut);padding-top:clamp(20px,3vh,28px)}
.final > .sx{position:absolute;left:var(--gut);right:var(--gut);top:calc(56px + 14px);margin:0;padding:0;z-index:6}
.sec{padding-bottom:clamp(96px,14vh,168px)}
.sec .wrap{padding-top:clamp(56px,9vh,104px)}
.sec-head .lede{margin-top:16px}
.sec-head.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,36ch);gap:24px 48px;align-items:end}
.sec-head.split .lede{margin:0 0 .3em}
/* the label above a picture: a hairline with a node, the name, its value */
.var-k,.step-k{position:relative;display:flex;align-items:baseline;gap:10px;padding-top:14px;border-top:1px solid var(--rule);font-size:15px;color:var(--ink);letter-spacing:-.005em}
.var-k::before,.step-k::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--node)}
.var-k b{font-weight:500}
.var-k .tx,.step-k .tx{color:var(--ink-3)}
/* 03 · make it yours: METHOD's own renderer in the middle, four of its controls around it, on one grid.
   The picture spans two rows; the cards fill them, so the top pair starts at the picture's top edge and the bottom pair
   ends at its bottom edge. Each card is wired to the picture by a straight horizontal line at its own centre.
   Rounded like the visualizer folders: cards r28, pills and toggles fully round, the picture r34 in a r44 bezel. */
.con{--sh:0 1px 2px rgba(0,0,0,.06),0 10px 24px -10px rgba(0,0,0,.16),0 34px 60px -38px rgba(0,0,0,.3);--fw:clamp(336px,23vw,380px);--cw:min(400px,100%);--wire:clamp(64px,6.5vw,120px);
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--fw) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));column-gap:var(--wire);row-gap:20px;
  margin-top:clamp(40px,6vh,64px);padding-bottom:64px}
.con-ctls{display:contents}
.con-scr{grid-column:2;grid-row:1/3;position:relative;z-index:2;margin:0;align-self:center}
.ctl{position:relative;z-index:2;width:var(--cw);display:flex;flex-direction:column;padding:18px 22px 16px;border-radius:28px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--sh)}
.ctl[data-k=look]{grid-column:1;grid-row:1;justify-self:end} .ctl[data-k=col]{grid-column:1;grid-row:2;justify-self:end}
.ctl[data-k=fx]{grid-column:3;grid-row:1;justify-self:start} .ctl[data-k=br]{grid-column:3;grid-row:2;justify-self:start}
.ctl-h{display:flex;align-items:center;gap:10px;min-height:26px;margin-bottom:16px}
.ctl-h h3{font:500 16px var(--f);letter-spacing:-.01em;flex:1}
.ctl-i{font-size:10px;color:var(--ink-3);transition:color .3s} .ctl.hot .ctl-i{color:var(--acc)}
.ctl-m{font-size:10px;color:var(--ink-3)}
.ctl-f{display:flex;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--rule-2);font-size:9.5px;color:var(--ink-3)}
.ctl-f span{white-space:nowrap} .ctl-f span:last-child{text-align:right;overflow:hidden;text-overflow:ellipsis}
.ctl > :nth-last-child(2){margin-bottom:16px}
.ctl-k{display:flex;justify-content:space-between;margin:18px 0 9px;font-size:9.5px;color:var(--ink-3)}
.lk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lk span{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:7px 10px 7px 7px;border-radius:14px;background:var(--well)}
.lk i{grid-row:1/3;width:24px;height:24px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:background .3s}
.lk b{font-size:9.5px;font-weight:400;color:var(--ink)} .lk small{font-size:9px;color:var(--ink-3)}
.ctl-n{display:flex;justify-content:space-between;margin:9px 0 14px;font-size:9.5px;color:var(--ink-3)}
.ctl button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ctl :focus-visible{outline:2px solid var(--acc);outline-offset:3px} .ctl input:focus-visible{outline:0}
/* look: two-tone discs, each named */
.sws{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.sw{display:flex;flex-direction:column;align-items:center;gap:8px}
.sw i{width:100%;max-width:48px;aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:box-shadow .25s}
.sw span{font:400 9.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);transition:color .25s}
.sw[aria-checked=true] i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 3px var(--surface),0 0 0 4.5px var(--ink)}
.sw[aria-checked=true] span{color:var(--ink)}
/* colour: the gradient with its stops (each a colour picker, drag to move), then METHOD's palettes */
.gbar{position:relative;height:30px;border-radius:999px;background:var(--g,linear-gradient(90deg,#e8412c,#050505,#3d7bff));box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);margin:0 13px;touch-action:none}
.gbar::before,.gbar::after{content:"";position:absolute;top:0;bottom:0;width:13px}
.gbar::before{right:100%;border-radius:999px 0 0 999px;background:var(--cl)} .gbar::after{left:100%;border-radius:0 999px 999px 0;background:var(--cr)}
.stop{position:absolute;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--c);cursor:grab;
  box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.35);transition:transform .2s var(--ease)}
.stop:hover{transform:scale(1.08)} .stop.drag{cursor:grabbing;transform:scale(1.14)}
.stop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:inherit;border:0;padding:0}
.stop:focus-within{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--acc)}
.pals{display:flex;flex-wrap:wrap;gap:6px}
.pal{width:24px;height:24px;border-radius:50%;background:var(--g)!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:box-shadow .25s}
.pal.on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 2.5px var(--surface),0 0 0 4px var(--ink)}
/* effects: switches, each with METHOD's default amount */
.tgs{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.tgs .tg{justify-content:space-between;font-size:14px;color:var(--ink-2);text-align:left;gap:10px}
.tgs .tg span{display:flex;flex-direction:column;gap:1px} .tgs .tg small{font:400 9.5px var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.tg{display:flex;align-items:center}
.tg i{position:relative;flex:none;width:44px;height:26px;border-radius:999px;background:var(--line-2);transition:background .3s}
.tg i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .3s var(--ease)}
.tg[aria-pressed=true]{color:var(--ink)} .tg[aria-pressed=true] i{background:var(--ink)} .tg[aria-pressed=true] i::after{transform:translateX(18px)}
/* branding: your words, one of METHOD's Contour layouts */
.br-f{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
.br-f label{display:flex;flex-direction:column;gap:4px;padding:8px 14px 9px;border-radius:16px;background:var(--well);cursor:text}
.br-f .tx{font-size:9.5px;color:var(--ink-3)}
.br-f input{width:100%;min-width:0;border:0;background:none;font:500 15px var(--f);color:var(--ink);outline:0;padding:0}
.br-f label:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.ctl .chip{padding:6px 13px;border-radius:999px;font-size:13px;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2);transition:background .25s,color .25s}
.ctl .chip[aria-checked=true]{background:var(--ink);color:var(--paper);box-shadow:none}
/* the picture: a black bezel, the live canvas inside; its format above, its state below */
.con-v{position:relative;width:100%;aspect-ratio:9/16;border-radius:44px;padding:10px;background:#000;
  box-shadow:0 2px 3px rgba(0,0,0,.1),0 16px 30px -10px rgba(0,0,0,.28),0 50px 90px -40px rgba(0,0,0,.5)}
.con-v img,.con-v canvas{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);border-radius:34px;display:block;object-fit:cover}
.con-v canvas{opacity:0;transition:opacity .5s var(--ease)} .con-v.live canvas{opacity:1}
.con-v video{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}
.con-cap{position:absolute;left:50%;top:calc(100% + 16px);transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line),0 6px 16px -10px rgba(0,0,0,.35);font-size:14px;white-space:nowrap;max-width:calc(100vw - 32px)}
.con-cap b{font-weight:500} .con-cap span{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
.con-cap i{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none}
/* the wires: straight, from the card's inner edge to the bezel, a node at each end and the control's value on top */
.con-w{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
.con-w line{stroke:var(--rule);stroke-width:1;transition:stroke .3s} .con-w circle{fill:var(--paper);stroke:var(--ink-3);stroke-width:1;transition:stroke .3s,fill .3s}
.con-w text{font:400 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;fill:var(--ink-3)}
.con-w .hot line{stroke:var(--acc)} .con-w .hot circle{stroke:var(--acc);fill:var(--acc)} .con-w .hot text{fill:var(--acc)}
@media (max-width:1180px){
    .con{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:clamp(28px,5vh,48px);padding-bottom:0}
  .con-scr{margin-bottom:56px;width:min(52vw,280px)}   .con-v{border-radius:34px;padding:8px} .con-v img,.con-v canvas{inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);border-radius:26px}
  .con-w{display:none}
  /* the four cards side by side under the picture, swiped: the picture stays in view while you change it */
  .con-ctls{display:flex;align-items:stretch;gap:12px;width:calc(100% + var(--gut) * 2);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px var(--gut) 28px;scroll-padding:0 var(--gut)}
  .con-ctls::-webkit-scrollbar{display:none}
  .ctl{flex:none;width:min(84vw,380px);scroll-snap-align:start}
  .tgs{gap:12px 16px}
}
/* ================= 03 · make it yours: a 3D phone on the left, four dark control plates on the right ================= */
/* the plate across the top of the console: thin, a big thin numeral cut off near its foot, the step, the title, one line */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.plate{grid-column:1/-1;--r:999px;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(28px,3.4vw,56px);
  margin-bottom:clamp(48px,7vh,80px);padding:clamp(14px,1.4vw,20px) clamp(40px,4vw,64px);border-radius:var(--r);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.05),0 14px 30px -18px rgba(0,0,0,.2),0 40px 70px -50px rgba(0,0,0,.25)}
.plate::after{content:"";position:absolute;inset:8px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
.plate-n{display:block;height:calc(var(--nf) * .5);overflow:hidden;--nf:clamp(96px,8vw,136px)}
.plate-n span{display:block;font-family:var(--disp);font-weight:200;font-size:var(--nf);line-height:.74;letter-spacing:-.02em;color:var(--ink);margin-left:-.04em}
.plate-k{display:flex;gap:18px;margin-bottom:8px;font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.plate-k span:first-child{color:var(--acc)}
.plate-h{font-family:var(--disp);font-weight:500;text-transform:uppercase;font-size:clamp(26px,2.2vw,36px);line-height:1;letter-spacing:-.035em;color:var(--ink)}
.plate-p{margin-top:8px;font:400 15px/1.45 var(--f);color:var(--ink-2)}
.plate-a{width:clamp(36px,2.8vw,46px);color:var(--line-2);transition:color .3s,transform .4s var(--ease)}
.plate-a svg{display:block;width:100%;height:auto}
.plate-a:hover{color:var(--acc);transform:translate(4px,-4px)}
.con.cz{display:grid;grid-template-columns:auto minmax(0,620px);grid-template-rows:auto auto;justify-content:center;align-items:center;
  column-gap:clamp(64px,8vw,150px);row-gap:0;margin-top:0;padding-bottom:40px}
.cz .con-w{display:none}

/* ---------- the phone: a Blender render (tools/render/devices.py phone-seq — black titanium band, frosted back glass, the camera
   plateau), turned by the scroll from its back to three-quarters front (Turn in landing.js); METHOD's live picture is mapped
   onto the display's four rendered corners, and the display glass's own reflection is screen-blended over it ---------- */
.phone{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.ph9{--pw:clamp(360px,30vw,440px);position:relative;width:var(--pw);aspect-ratio:1/var(--a,1.775);margin:calc(var(--pw) * var(--mt,.04) * -1) 0 calc(var(--pw) * var(--mb,.12) * -1)}
.ph9-still,.ph9-seq{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}
.ph9-seq{visibility:hidden} .ph9.seq-on .ph9-seq{visibility:visible} .ph9.seq-on .ph9-still{visibility:hidden}
.ph9-q{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;border-radius:var(--qr,40px);background:#000;will-change:transform,opacity}
.cz .con-v.ph-scr{position:absolute;inset:0;width:auto;aspect-ratio:auto;padding:0;border-radius:inherit;overflow:hidden;
  background:linear-gradient(var(--gt,#0b0b0d) 0 50%,var(--gb,#0b0b0d) 50% 100%);box-shadow:none}
.cz .con-v img,.cz .con-v canvas{position:absolute;inset:auto;left:0;right:0;top:50%;width:100%;height:auto;aspect-ratio:9/16;transform:translateY(-50%);border-radius:0;object-fit:cover}
.cz .con-v img{transition:opacity .5s} .cz .con-v.live img{opacity:0}
.cz .con-v canvas{clip-path:inset(2px 0)}
.ph9-q{--w:var(--qw,300px)}
.ph-isl{position:absolute;left:50%;top:calc(var(--w) * .028);width:33%;height:calc(var(--w) * .094);transform:translateX(-50%);border-radius:999px;background:#000;z-index:4}
.ph-st{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;height:calc(var(--w) * .15);padding:0 calc(var(--w) * .075);color:#fff;z-index:3;transition:color .4s}
.ph-st b{font:600 calc(var(--w) * .05) var(--f);letter-spacing:-.01em;width:22%;text-align:center}
.ph-st svg{width:21%;height:auto}
.ph9-q.light .ph-st{color:#121213}
.phone .con-cap{position:relative;left:auto;top:auto;z-index:2;transform:none;margin-top:0;max-width:calc(100vw - 2 * var(--gut))}

/* ---------- the plates: dark, rounded, an inner hairline; a big thin number, the name, what it's set to; the controls ---------- */
.pls{--pb:var(--surface);--pi:var(--ink);--pd:var(--ink-3);--pl:var(--line);--pw:var(--well);
  display:flex;flex-direction:column;gap:12px}
.cz .ctl{position:relative;display:grid;grid-template-columns:132px minmax(0,1fr);gap:26px;width:auto;padding:22px 26px 22px 28px;border-radius:30px;background:var(--pb);color:var(--pi);
  box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.05),0 14px 30px -18px rgba(0,0,0,.2),0 40px 70px -50px rgba(0,0,0,.25);border:0}
.cz .ctl > *{margin-bottom:0}
.cz .ctl::before{content:"";position:absolute;inset:6px;border-radius:24px;box-shadow:inset 0 0 0 1px var(--pl);pointer-events:none}
.pl-l{display:flex;flex-direction:column;align-items:flex-start;gap:3px;position:relative}
.pl-n{font:200 44px/1 var(--disp);letter-spacing:-.04em;color:#B9B9B3;margin:-4px 0 10px;transition:color .3s}
.cz .ctl.hot .pl-n{color:var(--acc)}
.pl-l h3{font:500 17px var(--f);letter-spacing:-.01em;color:var(--pi)}
.pl-m{font:400 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--pd)}
.pl-l .tg{margin-top:14px}
.pl-r{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0}
.cz .ctl button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cz .ctl :focus-visible{outline:2px solid var(--acc);outline-offset:3px} .cz .ctl input:focus-visible{outline:0}
/* switches */
.cz .tg i{position:relative;display:block;flex:none;width:44px;height:26px;border-radius:999px;background:var(--line-2);transition:background .3s}
.cz .tg i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .3s var(--ease)}
.cz .tg[aria-pressed=true] i{background:var(--acc)} .cz .tg[aria-pressed=true] i::after{transform:translateX(18px)}
/* look */
.cz .sws{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.cz .sw{display:flex;flex-direction:column;align-items:center;gap:10px}
.cz .sw i{width:100%;max-width:52px;aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:box-shadow .25s,transform .25s}
.cz .sw:hover i{transform:scale(1.05)}
.cz .sw span{font:400 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--pd);transition:color .25s}
.cz .sw[aria-checked=true] i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 3px var(--pb),0 0 0 4.5px var(--acc)}
.cz .sw[aria-checked=true] span{color:var(--pi)}
/* colour */
.cz .gbar{position:relative;height:28px;border-radius:999px;margin:0 14px;background:var(--g);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);touch-action:none}
.cz .gbar::before,.cz .gbar::after{content:"";position:absolute;top:0;bottom:0;width:14px}
.cz .gbar::before{right:100%;border-radius:999px 0 0 999px;background:var(--cl)} .cz .gbar::after{left:100%;border-radius:0 999px 999px 0;background:var(--cr)}
.cz .stop{position:absolute;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--c);cursor:grab;box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.35)}
.cz .stop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:inherit;border:0;padding:0}
.cz .stop:focus-within{box-shadow:0 0 0 2.5px #fff,0 0 0 5px var(--acc)}
.cz .ctl-n{display:flex;justify-content:space-between;margin:10px 0 14px;font:400 10px var(--mono);letter-spacing:.08em;color:var(--pd)}
.cz .pals{display:flex;flex-wrap:wrap;gap:7px}
.cz .pal{width:24px;height:24px;border-radius:50%;background:var(--g)!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:box-shadow .25s}
.cz .pal.on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 2px var(--pb),0 0 0 3.5px var(--acc)}
/* effects: pills that light up */
.cz .tgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cz .tgs .tg{display:flex;align-items:center;justify-content:space-between;gap:8px;height:48px;padding:0 14px 0 16px;border-radius:16px;background:var(--pw);
  box-shadow:inset 0 0 0 1px var(--pl);text-align:left;transition:background .25s,box-shadow .25s}
.cz .tgs .tg span{display:flex;flex-direction:column;gap:2px;font:500 13.5px var(--f);color:var(--pi)}
.cz .tgs .tg small{font:400 9.5px var(--mono);letter-spacing:.06em;color:var(--pd)}
.cz .tgs .tg i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.cz .tgs .tg i::after{display:none}
.cz .tgs .tg:hover{background:#E0E0DB}
.cz .tgs .tg[aria-pressed=true]{background:rgba(240,100,30,.09);box-shadow:inset 0 0 0 1px var(--acc)}
.cz .tgs .tg[aria-pressed=true] small{color:var(--acc)}
.cz .tgs .tg[aria-pressed=true] i{background:var(--acc);box-shadow:0 0 10px var(--acc)}
/* branding */
.cz .br-f{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
.cz .br-f label{display:flex;flex-direction:column;gap:4px;padding:9px 14px 10px;border-radius:16px;background:var(--pw);box-shadow:inset 0 0 0 1px var(--pl);cursor:text}
.cz .br-f label > span{font:400 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pd)}
.cz .br-f input{width:100%;min-width:0;border:0;background:none;font:500 15px var(--f);color:var(--pi);outline:0;padding:0}
.cz .br-f label:focus-within{box-shadow:inset 0 0 0 1.5px var(--acc)}
.cz .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cz .ctl .chip{padding:7px 14px;border-radius:999px;font:500 13px var(--f);color:var(--pd);box-shadow:inset 0 0 0 1px var(--pl);transition:background .25s,color .25s}
.cz .ctl .chip:hover{color:var(--pi)}
.cz .ctl .chip[aria-checked=true]{background:var(--ink);color:var(--paper);box-shadow:none}
/* footer under the plates */
.pls-f{display:flex;justify-content:space-between;align-items:center;padding:6px 6px 0 10px}
.pls-f span{font:400 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rst{font:500 13px var(--f);color:var(--ink-2);background:none;border:0;padding:8px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer;transition:background .2s,color .2s}
.rst:hover{background:var(--ink);color:var(--paper);box-shadow:none}
/* phones: the four controls as tabs under the phone, one plate at a time (desktop shows all four) */
.cz-tabs{display:none}
@media (max-width:760px){
  .con.cz{gap:22px}
  .cz-tabs{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:100%;max-width:520px;padding:4px;border-radius:999px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line)}
  .cz-tabs button{display:flex;align-items:center;justify-content:center;gap:5px;height:44px;border:0;border-radius:999px;background:none;font:500 14px var(--f);color:var(--ink-3);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s;-webkit-tap-highlight-color:transparent}
  .cz-tabs button span{font:400 9.5px var(--mono);color:#B0B0AA}
  .cz-tabs button[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 12px -6px rgba(0,0,0,.25)}
  .cz-tabs button[aria-selected=true] span{color:var(--acc)}
  .cz-tabs button.hot:not([aria-selected=true])::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--acc);align-self:center}
  .pls{max-width:520px}
  .pls[data-tab] .ctl{display:none} .pls[data-tab=look] .ctl[data-k=look],.pls[data-tab=col] .ctl[data-k=col],.pls[data-tab=fx] .ctl[data-k=fx],.pls[data-tab=br] .ctl[data-k=br]{display:grid}
  .cz .ctl .pl-n{display:none}
  .cz .ctl{min-height:212px;align-content:start}
}

@media (max-width:1180px){
  .con.cz{display:flex;flex-direction:column;align-items:center;gap:48px}
  .plate{width:100%;margin-bottom:0}
  .pls{width:100%;max-width:620px}
  .ph9{--pw:min(86vw,420px)}
}
@media (max-width:620px){
  .plate{--r:36px;grid-template-columns:1fr;gap:10px;padding:26px 24px 24px} .plate::after{border-radius:28px}
  .plate-n{--nf:96px} .plate-a{position:absolute;right:24px;top:24px;width:34px}
  .cz .ctl{grid-template-columns:1fr;gap:16px;padding:20px 20px 22px}
  .pl-l{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:12px}
  .pl-n{font-size:28px;margin:0} .pl-l .tg{margin:0;align-self:center}
  .pl-l .pl-m{grid-column:2;grid-row:2}
  .cz .tgs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cz .sw i{max-width:44px}
}
/* 04 · MIDI: the visualizers' folder, opened and light. Its tabs are the four views; inside, the demo's piano roll and the views
   as a deck (the chosen one in front); a liquid-glass slab over the lower part carries the title. */
.rl-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px rgba(240,100,30,.15)}
/* the folder, light; its tabs are the four views */
.fd2{--pn:var(--surface);--tab:var(--well);max-width:1320px;margin:0 auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.06)) drop-shadow(0 26px 44px rgba(0,0,0,.16))}
.fd2-tabs{display:flex;gap:6px;padding-left:18px}
.fd2-tabs button{display:flex;align-items:baseline;gap:10px;padding:15px 28px 17px;border:0;border-radius:22px 22px 0 0;background:var(--tab);font:500 15px var(--f);color:var(--ink-3);cursor:pointer;transition:background .25s,color .25s}
.fd2-tabs button span{font:400 10px var(--mono);letter-spacing:.1em;color:#B0B0AA;transition:color .25s}
.fd2-tabs button:hover{color:var(--ink)}
.fd2-tabs button[aria-selected=true]{background:var(--pn);color:var(--ink)} .fd2-tabs button[aria-selected=true] span{color:var(--acc)}
.fd2-body{position:relative;height:clamp(600px,72vh,720px);border-radius:0 44px 44px 44px;background:var(--pn);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,26vw,380px);column-gap:clamp(40px,5vw,80px);padding:30px 48px 14px}
/* the roll runs the full height: its lower lanes go under the glass */
.fd2-roll{position:relative;display:flex;flex-direction:column;min-width:0}
.fd2-h{display:flex;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--rule-2)} .fd2-h .tx{color:var(--ink-3);display:inline-flex;align-items:center;gap:8px}
.fd2-roll .roll2{flex:1;width:100%;margin-top:10px;display:block}
/* the four views, as a deck: the chosen one in front, the rest fanned behind it */
.stack{position:relative;height:100%}
.cd{--x:0px;--y:0px;--r:0deg;--s:1;position:absolute;right:0;top:18px;width:clamp(240px,20vw,300px);aspect-ratio:9/16;border-radius:30px;overflow:hidden;background:var(--bg);
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 2px 3px rgba(0,0,0,.08),0 20px 40px -18px rgba(0,0,0,.35);
  transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--s));transform-origin:50% 100%;transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s,opacity .5s;cursor:pointer}
.cd img,.cd video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cd video{opacity:0;transition:opacity .4s} .cd video.on{opacity:1}
.cd-n{position:absolute;left:16px;top:14px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ink);font-size:9.5px;opacity:0;transition:opacity .3s}
.cd:not(.front) .cd-n{opacity:1}
.cd:not(.front){filter:saturate(.8) brightness(.97)}
/* liquid glass over the lower part of the folder: a frosted slab, a bright rim, a soft inner light */
.glass{position:absolute;left:12px;right:12px;bottom:12px;height:clamp(170px,22vh,200px);z-index:20;border-radius:34px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding:26px 36px 28px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(248,248,246,.42) 55%,rgba(248,248,246,.6));
  -webkit-backdrop-filter:blur(16px) saturate(1.7);backdrop-filter:blur(16px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -14px 30px -18px rgba(255,255,255,.9),
    inset 0 18px 30px -24px rgba(0,0,0,.10),0 -1px 0 rgba(0,0,0,.04),0 12px 30px -16px rgba(0,0,0,.18)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 60% at 20% -10%,rgba(255,255,255,.7),transparent 55%),radial-gradient(80% 50% at 90% 120%,rgba(255,255,255,.5),transparent 60%);mix-blend-mode:soft-light}
.glass::after{content:"";position:absolute;left:30px;right:30px;top:0;height:1px;border-radius:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 80%,transparent)}
.gl-l,.gl-r{position:relative;z-index:1}
.gl-k{display:flex;align-items:center;gap:12px;color:var(--ink-2);margin-bottom:10px} .gl-k span{color:var(--acc)}
.glass h2{font:500 clamp(30px,2.8vw,44px)/1 var(--disp);letter-spacing:-.04em;color:var(--ink)}
.gl-p{margin-top:10px;font:400 15px/1.45 var(--f);color:var(--ink-2)}
.gl-r{display:flex;align-items:flex-end;gap:36px;text-align:right}
.gl-v{display:flex;flex-direction:column;gap:4px;max-width:30ch} .gl-v b{font:500 15px var(--f)} .gl-v span{font-size:13px;line-height:1.4;color:var(--ink-3)}
.gl-n{font:500 34px/1 var(--disp);letter-spacing:-.03em;color:var(--ink);white-space:nowrap;text-decoration:none;transition:color .2s} .gl-n:hover{color:var(--acc)} .gl-n small{font:400 15px var(--f);color:var(--ink-3);margin-left:5px}
@media (max-width:1000px){
  .fd2-body{grid-template-columns:1fr;height:auto;padding:24px 22px 230px;row-gap:28px}
  .fd2-roll .roll2{height:300px;flex:none} .stack{height:520px} .cd{left:50%;right:auto;margin-left:calc(clamp(240px,20vw,300px) / -2)}
  .glass{flex-direction:column;align-items:flex-start;height:auto} .gl-r{text-align:left}
}
@media (max-width:620px){ .fd2-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding-left:0} .fd2-tabs button{justify-content:center;gap:6px;min-height:46px;padding:12px 4px 14px;font-size:14px;border-radius:16px 16px 0 0} .fd2-tabs button span{display:none} .gl-v{display:none} .glass{padding:22px 22px 24px} }

/* 05 · how it works: one button. METHOD's own Record button as a big tactile object; what an editor would ask of you
   floats around it (and the two editors themselves); press it — the track's waveform fills the button while it records —
   and everything else flies off, the finished video rises above it. */
.howto{overflow:hidden}
.ob{display:flex;flex-direction:column;align-items:center;text-align:center}
.ob-k{display:flex;gap:12px;color:var(--ink-3);margin-bottom:16px} .ob-k span{color:var(--acc)}
.ob-h{font:500 clamp(56px,7vw,124px)/.92 var(--disp);letter-spacing:-.055em;color:var(--ink)}
.ob-p{margin-top:22px;max-width:44ch;font-size:clamp(16px,1.3vw,19px);line-height:1.45;color:var(--ink-2)}
.ob-a{position:relative;width:100%;max-width:1180px;height:clamp(560px,70vh,680px);margin-top:clamp(20px,3vh,36px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:6px}
.ob-fl{position:absolute;inset:0;pointer-events:none}
.ob-c,.ob-ic{position:absolute;transition:transform 1.1s cubic-bezier(.3,.7,.2,1),opacity .8s,filter .9s}
.ob-c{padding:9px 16px;border-radius:999px;font:500 14px var(--f);color:var(--ink-3);background:rgba(255,255,255,.66);
  box-shadow:inset 0 0 0 1px var(--line),0 10px 24px -16px rgba(0,0,0,.3);
  filter:blur(calc(var(--k) * .09px));animation:ob-dr 7s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -.9s)}
.ob-c::after{content:"";position:absolute;left:12px;right:12px;top:50%;height:1.5px;border-radius:1px;background:var(--acc);opacity:.75}
.ob-ic{width:clamp(84px,8vw,124px);height:auto;filter:drop-shadow(0 18px 22px rgba(0,0,0,.22));animation:ob-dr 8s ease-in-out infinite alternate}
.ob-ic1{left:26%;top:2%;rotate:-12deg} .ob-ic2{right:26%;top:6%;rotate:10deg;animation-delay:-3s}
@keyframes ob-dr{to{translate:0 -14px}}
.ob.done .ob-c,.ob.done .ob-ic{opacity:0;filter:blur(8px);transform:translate(var(--dx),var(--dy)) scale(.85)}
.ob-card{position:relative;width:clamp(220px,17vw,260px);aspect-ratio:9/16;border-radius:30px;margin-bottom:26px;overflow:hidden;z-index:2;transform:translateY(24px) scale(.9);
  transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s}
.ob-ph{position:absolute;inset:0;display:grid;place-items:center;border-radius:30px;transition:opacity .5s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='1' y='1' width='calc(100%25 - 2px)' height='calc(100%25 - 2px)' rx='29' fill='none' stroke='%23C3C3BD' stroke-width='1.5' stroke-dasharray='6 7'/%3E%3C/svg%3E")}
.ob-ph .tx{color:var(--ink-3)}
.ob-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s}
.ob-done{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px;border-radius:999px;color:#fff;
  background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);opacity:0;transform:translateY(6px);transition:opacity .6s .5s,transform .6s .5s}
.ob-done i{width:7px;height:7px;border-radius:50%;background:#3ac06b}
.ob.done .ob-card{transform:none;box-shadow:0 2px 3px rgba(0,0,0,.08),0 30px 50px -20px rgba(0,0,0,.45)}
.ob.done .ob-ph{opacity:0} .ob.done .ob-card video{opacity:1} .ob.done .ob-done{opacity:1;transform:none}
.ob-b{position:relative;z-index:3;width:min(460px,92%);height:64px;border:0;border-radius:999px;cursor:pointer;overflow:hidden;color:#F1F1EE;font:inherit;
  background:#121213;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 1px 2px rgba(0,0,0,.12),0 14px 30px -16px rgba(0,0,0,.45);
  transition:transform .15s,box-shadow .2s,background .2s}
.ob-b:hover{background:#1b1b1d}
.ob-b:active,.ob-b.press{transform:translateY(1px) scale(.995);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.12),0 6px 14px -10px rgba(0,0,0,.4)}
.ob-b:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.ob-w{position:absolute;left:28px;right:28px;top:22%;bottom:22%;width:calc(100% - 56px);height:56%;color:rgba(255,255,255,.07)}
.ob-lit{color:rgba(240,100,30,.45);clip-path:inset(0 calc(100% - var(--p,0%)) 0 0)}
.ob-l{position:relative;display:inline-flex;align-items:center;gap:12px;font:400 17px var(--f);letter-spacing:-.005em}
.ob-l b{font-weight:400}
.ob-l i{width:9px;height:9px;border-radius:50%;background:var(--rec);box-shadow:0 0 0 4px rgba(224,53,43,.16)}
.ob-t{position:absolute;right:26px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.38);font-size:9.5px}
.ob.rec .ob-l i{animation:ob-bl 1s steps(2) infinite} @keyframes ob-bl{50%{opacity:.3}}
.ob-n{margin-top:16px;color:var(--ink-3)}
.ob-cur{position:absolute;left:50%;top:100%;width:30px;height:30px;z-index:5;pointer-events:none;opacity:0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.ob-cur.go{animation:ob-cur 1.5s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes ob-cur{0%{opacity:0;transform:translate(260px,40px)}20%{opacity:1}70%{transform:translate(40px,-80px)}80%{transform:translate(40px,-80px) scale(.85)}90%{transform:translate(40px,-80px) scale(1);opacity:1}100%{transform:translate(60px,-60px);opacity:0}}
.reduced .ob-c,.reduced .ob-ic{animation:none}
.ob:not(.in) .ob-c,.ob:not(.in) .ob-ic{animation-play-state:paused}   /* off screen: nothing to drift */
@media (max-width:760px){
  .ob-a{height:auto;padding-top:40px}
  .ob-c{display:none} .ob-ic{width:clamp(52px,15vw,68px)} .ob-ic1{left:0;top:22%} .ob-ic2{right:0;top:46%}
  .ob-t{display:none}
  .ob-done{font-size:9px;letter-spacing:.06em;white-space:nowrap;padding:8px 6px}
  .ob-n{max-width:32ch;line-height:1.6}
}
/* 05 · from beat to content (black) */
.wflow{background:#060607;color:#EEEEEB}
@media (max-width:860px){
  .mid-views{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .sx{padding-top:18px;margin-bottom:0}
  .sec .wrap{padding-top:36px}
  .sec{padding-bottom:72px}
  .sec-head.split{grid-template-columns:minmax(0,1fr);gap:14px}
  .mid-f figcaption,.var-k,.step-k{font-size:14px}
  .roll{height:130px}
}
.plan-mark{position:absolute;right:12px;bottom:9px;font:700 11px var(--f);letter-spacing:.24em;color:rgba(255,255,255,.55)}
/* 05 · from the file to the posts: one hairline, three stops, the pictures on one baseline */
.path{--h:clamp(300px,50vh,480px);list-style:none;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,.7fr) minmax(0,1.75fr);gap:clamp(20px,3vw,48px);margin-top:clamp(40px,6vh,64px)}
.pt{display:flex;flex-direction:column}
.pt-v{height:var(--h);margin-top:18px;display:flex;align-items:flex-end;gap:clamp(10px,1.2vw,16px)}
.fr{position:relative;margin:0;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.fr video{display:block;width:100%;height:100%;object-fit:cover}
.fr-916{height:100%;aspect-ratio:9/16}
.fr-169{height:calc(var(--h) * .42);aspect-ratio:16/9}
.fr figcaption{position:absolute;left:10px;bottom:9px;color:rgba(255,255,255,.8)}
.pt-out .pt-v{flex-wrap:nowrap}
.pt-v .fr{flex:none}
.file{width:100%;max-width:340px;margin-bottom:calc(var(--h) * .38);padding:14px 16px 12px;border-radius:14px;background:#F8F8F6;color:#121213;box-shadow:0 30px 60px -24px rgba(0,0,0,.9)}
.file-n{display:flex;align-items:center;gap:10px;font-size:14.5px}
.file-n i{width:26px;height:26px;border-radius:6px;flex:none;background:#121213 linear-gradient(90deg,transparent 7px,#F8F8F6 7px 8.5px,transparent 8.5px 11px,#F8F8F6 11px 12.5px,transparent 12.5px 15px,#F8F8F6 15px 16.5px,transparent 16.5px) center/24px 11px no-repeat}
.file-n b{font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-n .tx{color:#8B8C8F}
.file-w{display:block;width:100%;height:44px;margin-top:12px}
.step-c .tx{display:inline-block;margin-top:8px;color:var(--ink-3)}
@media (max-width:1100px){
  .path{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pt-out{grid-column:1 / -1}
}
@media (max-width:760px){
  .path{--h:min(96vw,440px);grid-template-columns:minmax(0,1fr);gap:44px;margin-top:28px}
  .pt-in .pt-v{height:auto}
  .file{margin-bottom:0}
  .pt-vis .fr-916{height:var(--h)}
  .pt-out .pt-v{height:auto;align-items:flex-end}
  .pt-out .pt-v{gap:10px}
  .pt-out .fr-916{height:auto;width:38%;flex:none}
  .pt-out .fr-169{height:auto;width:calc(62% - 10px);flex:none}
}
.fr figcaption{white-space:nowrap}
@media (max-width:760px){ .fr figcaption{left:7px;bottom:6px;font-size:8.5px;letter-spacing:.06em} }
/* 02 · eight visualizers: folders on one wheel; the one on top stands upright and is named; drag, swipe or the arrows turn it */
.gallery{padding-bottom:clamp(80px,12vh,140px)}
.dial-head{padding-top:clamp(48px,8vh,96px);text-align:center}
.dial-head .lede{margin:14px auto 0}
/* the dial: every folder sits on one big wheel; the one at the top stands upright, the rest lean away and fade */
.dial{--panel:#1E1E1F;--w:clamp(230px,21vw,320px);position:relative;height:calc(var(--w) * 1.04 + clamp(150px,20vh,210px));margin-top:clamp(8px,2vh,24px);overflow:hidden;touch-action:pan-y;user-select:none;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.dial.drag{cursor:grabbing}
.it{position:absolute;left:50%;top:0;width:var(--w);margin-left:calc(var(--w) / -2);padding-top:56px;transform-origin:50% var(--R,1600px);will-change:transform,opacity}
.lab{position:absolute;left:0;right:0;top:6px;display:flex;justify-content:center}
.lab span{padding:7px 14px;border-radius:999px;font-size:15px;letter-spacing:-.005em;color:var(--ink-3);transition:color .3s,box-shadow .3s,background .3s}
.it.on .lab span{color:var(--ink);background:#fff;box-shadow:0 0 0 1px var(--line-2),0 6px 16px -8px rgba(0,0,0,.25)}
.fold{transform-origin:50% 50%;--b:clamp(9px,.8vw,12px);--tabh:clamp(40px,3.4vw,52px);--top:44%;position:relative;display:block;width:100%;aspect-ratio:1/1.04;border-radius:clamp(28px,2.4vw,40px);background:#000;padding:var(--b);overflow:hidden;
  box-shadow:0 2px 3px rgba(0,0,0,.10),0 14px 26px -10px rgba(0,0,0,.25),0 40px 70px -34px rgba(0,0,0,.45);-webkit-user-drag:none}
.fold-img{overflow:hidden;position:absolute;left:var(--b);right:var(--b);top:var(--b);height:calc(var(--top) + var(--tabh) + 24px - var(--b));border-radius:clamp(20px,1.7vw,30px) clamp(20px,1.7vw,30px) 0 0;background-size:cover;background-color:#111;transition:transform .7s cubic-bezier(.22,.8,.2,1)}
.fold-tab,.fold-step,.fold-body{position:absolute;fill:var(--panel);background:var(--panel)}
.fold-tab{left:var(--b);top:var(--top);width:44%;height:calc(var(--tabh) + 30px);border-radius:clamp(18px,1.4vw,22px) 0 0 0}
.fold-step{left:calc(var(--b) + 44% - 1px);top:var(--top);width:60px;height:var(--tabh);background:none}
.fold-body{left:var(--b);right:var(--b);top:calc(var(--top) + var(--tabh));bottom:var(--b);border-radius:0 clamp(18px,1.4vw,22px) clamp(20px,1.7vw,30px) clamp(20px,1.7vw,30px)}
.fold-t{position:absolute;left:calc(var(--b) + clamp(16px,1.6vw,24px));top:calc(var(--top) + clamp(14px,1.3vw,20px));display:flex;flex-direction:column;gap:3px;color:#fff}
.fold-t b{font-weight:600;font-size:clamp(16px,1.4vw,21px);letter-spacing:-.01em}
.fold-t span{font-size:clamp(15px,1.3vw,19px);color:#8F8F93}
.fold-f{position:absolute;left:calc(var(--b) + clamp(16px,1.6vw,24px));right:calc(var(--b) + clamp(16px,1.6vw,24px));bottom:calc(var(--b) + clamp(14px,1.4vw,22px));color:#fff}
.fold-n{font-family:"Geist",sans-serif;font-weight:500;letter-spacing:-.03em;font-size:clamp(24px,2vw,32px);line-height:1}
.fold-n small{font-family:"Instrument Sans",sans-serif;font-weight:400;letter-spacing:0;font-size:clamp(13px,1.05vw,16px);margin-left:5px;color:#8F8F93}
/* the rim under the folders, a tick for each, and the thumb that marks the one on top */
.rim{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.rim path{fill:none;stroke:rgba(18,18,19,.16);stroke-width:1.2}
.rim .tk{stroke:rgba(18,18,19,.28)}
.thumb{position:absolute;left:50%;width:12px;height:44px;margin-left:-6px;border-radius:8px;background:#3a3a3d;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.dial-foot .rn{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);display:grid;place-items:center;transition:background .2s}
.dial-foot .rn:hover{background:var(--well)} .dial-foot .rn svg{width:15px;height:15px}
.dial-cnt{min-width:64px;text-align:center;font:400 11px "IBM Plex Mono",monospace;letter-spacing:.1em;color:var(--ink-3)} .dial-cnt b{font-weight:400;color:var(--ink)}

.fold-img img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.it.on .fold:hover .fold-img img{transform:scale(1.06);transition:transform .7s cubic-bezier(.22,.8,.2,1)}
.fold-img img{transition:transform .7s cubic-bezier(.22,.8,.2,1)}
.dial-foot{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:6px}
.dial:focus-visible{outline:none}
.dial:focus-visible .it.on .lab span{box-shadow:0 0 0 2px var(--acc)}
@media (max-width:760px){ .dial{--w:clamp(196px,54vw,300px)} .lab span{font-size:13px} }
:root[data-neg] .fold-img :is(img,video){filter:invert(1) hue-rotate(180deg)}
/* hover: the visualizer's looks, one per beat; a dot per look under the number */
.fold-img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .7s cubic-bezier(.22,.8,.2,1)}
.fold.flip .fold-img video{opacity:1}
.it.on .fold:hover .fold-img video{transform:scale(1.06)}
.fold-f{display:flex;align-items:flex-end;justify-content:space-between}
.fold-dots{display:flex;gap:5px;padding-bottom:4px;opacity:0;transition:opacity .3s}
.fold.flip .fold-dots{opacity:1}
.fold-dots i{width:5px;height:5px;border-radius:50%;background:#4a4a4e}
.fold-dots i.on{background:#fff;transform:scale(1.25)}

/* touch: 44px hit areas without changing the visuals */
@media (pointer:coarse){
  :where(.top .btn,.top .brand,.rst,.gl-n,.plate-a,.foot .link,.plan-fine .link){position:relative}
  .top .btn::after,.top .brand::after,.rst::after,.gl-n::after,.plate-a::after,.foot .link::after,.plan-fine .link::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
  .foot-nav{row-gap:10px}
}

/* safety: nothing may widen the layout viewport on phones (a wider layout makes mobile browsers zoom the whole page out) */
main{overflow-x:clip}
@media (max-width:440px){ .plan-v{aspect-ratio:16/8} .plan-v span{right:12px;font-size:9px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} }

/* phones: section 03 is a studio — the phone, the four tabs and the control that is open fit on one screen together,
   so every change shows on the phone while the thumb is on the control. The phone takes the height left over. */
@media (max-width:760px){
  .cz{--dock:224px}
  .cz .ph9{--pw:min(86vw,420px,calc((100svh - 64px - var(--dock)) / (var(--a,1.775) - var(--mt,.04) - var(--mb,.12))))}
  .phone .con-cap{display:none}
  .con.cz{gap:14px}
  .cz .phone + .cz-tabs{margin-top:2px}
  .cz .ctl .pl-l{display:none}
  .cz .ctl{min-height:150px;align-content:center;padding:18px 18px 18px}
}
@media (min-width:375px) and (max-width:760px){
  .cz .tgs{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .cz .tgs .tg{padding:0 10px 0 12px;gap:6px}
  .cz .tgs .tg span{min-width:0} .cz .tgs .tg small{font-size:9px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}