/* Ladybug marketing, the Instrument shell (2026-09-28). Tokens, materials (modules, wells, keys,
   lamps, faders), type, the nav and footer, and the responsive rules every marketing page shares.
   Generated from design-mockups/sales-home-2026-09-28/site.mjs from the approved sales home v3; the
   markup it styles is printed by scripts/lib/instrumentShell.mjs. Type is never bold; the red is only
   for the one primary action and live lamps. */

@font-face{font-family:"Archivo";src:url(/fonts/instrument/archivo-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Martian Mono";src:url(/fonts/instrument/martian-mono-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Doto";src:url(/fonts/instrument/doto-800-latin.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Archivo Black";src:url(/fonts/instrument/archivo-black-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}
body{margin:0;background:#0a0a0a}
.pg{position:relative;width:1440px;overflow:hidden;background:#0e0e0e;color:#ece7dd;font:400 16px/1.5 "Archivo",system-ui,sans-serif;-webkit-font-smoothing:antialiased;isolation:isolate}
.pg *,.pg *::before,.pg *::after{box-sizing:border-box}
.pg b,.pg strong{font-weight:400}
.pg a{color:inherit;text-decoration:none}
.pg p,.pg h1,.pg h2,.pg h3,.pg ul,.pg pre{margin:0;padding:0;font-weight:400}
.pg ul{list-style:none}
:where(.pg) button{font:inherit;color:inherit;margin:0;border:0;padding:0;background:none;cursor:pointer}
.ic{flex:none;display:block}
.fill{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block}
.wrap{padding-inline:64px}
.row{display:flex;align-items:center}
.col{display:flex;flex-direction:column}
.grow{flex:1 1 0;min-width:0}
/* type */
.eyebrow{font:400 12px/1.2 "Martian Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#a19d94}
.eyebrow.lit{color:#f6efe3;text-shadow:0 0 7px rgba(246,239,227,.55)}
.h1{font:400 84px/.98 "Archivo",sans-serif;letter-spacing:-.035em;color:#f4f0e8;text-wrap:balance}
.h2{font:400 54px/1.04 "Archivo",sans-serif;letter-spacing:-.028em;color:#f4f0e8;text-wrap:balance}
.h3{font:400 23px/1.25 "Archivo",sans-serif;letter-spacing:-.008em;color:#ece7dd;text-wrap:balance}
.lede{font:400 21px/1.5 "Archivo",sans-serif;color:#bdb6aa;max-width:32em;text-wrap:pretty}
.body{font:400 17px/1.58 "Archivo",sans-serif;color:#aaa49a;max-width:34em;text-wrap:pretty}
.small{font:400 14px/1.5 "Archivo",sans-serif;color:#a19d94;text-wrap:pretty}
.dm{font-family:"Doto",monospace;font-weight:800;letter-spacing:.04em;color:#f6efe3;text-shadow:0 0 7px rgba(246,239,227,.4);text-transform:uppercase;white-space:nowrap}
.dm.dim{color:#bdb6aa;text-shadow:none}
.print{font:400 11px/1.2 "Martian Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:#a19d94;white-space:nowrap}
.print.ink{color:#ece7dd}
.read{font:400 12px/1 "Martian Mono",monospace;font-variant-numeric:tabular-nums;color:#a19d94;white-space:nowrap}
.nm{font:400 14px/20px "Archivo",sans-serif;color:#ece7dd;white-space:nowrap}
/* materials */
.mod{position:relative;background:linear-gradient(180deg,#1c1c1c,#171717);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.5),0 0 0 1px #090909,0 14px 30px rgba(0,0,0,.42);border-radius:16px}
.well{position:relative;background:#070707;box-shadow:inset 0 2px 7px rgba(0,0,0,.86),inset 0 0 0 1px #000,0 1px 0 rgba(255,255,255,.05);border-radius:10px;color:#f6efe3}
.tray{position:relative;border-radius:16px;background:#0a0a0a;box-shadow:inset 0 2px 9px rgba(0,0,0,.85),inset 0 0 0 1px #000,0 1px 0 rgba(255,255,255,.05)}
.groove{height:2px;border-radius:1px;background:#080808;box-shadow:0 1px 0 #262626}
.vgroove{width:2px;align-self:stretch;border-radius:1px;background:linear-gradient(90deg,#080808,#262626)}
.bez{position:relative;overflow:hidden;background:#0b0b0a;border-radius:6px;box-shadow:0 0 0 10px #080808,0 0 0 11px #262626,0 0 0 12px #0a0a0a,0 30px 60px rgba(0,0,0,.6)}
.bez.sm{box-shadow:0 0 0 6px #080808,0 0 0 7px #262626,0 14px 28px rgba(0,0,0,.5)}
/* keys: an action is a key; the one primary action is red; a chosen key latches into its well */
.key{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:36px;padding:0 14px;border-radius:10px;background:linear-gradient(180deg,#313131,#252525);box-shadow:0 2px 0 #080808,0 3px 7px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.08);color:#ece7dd;font:400 11px/1 "Martian Mono",monospace;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;flex:none}
.key.icon{width:36px;padding:0}
.key.lg{height:52px;padding:0 24px;border-radius:12px;font-size:12px;letter-spacing:.1em;gap:11px}
.key.primary{background:linear-gradient(180deg,#f2393d,#c81c21);color:#fff;box-shadow:0 2px 0 #5a0b0d,0 3px 10px rgba(239,40,45,.3),inset 0 1px 0 rgba(255,255,255,.3)}
.key.ink{background:linear-gradient(180deg,#f1ece3,#d7d1c5);color:#151515;box-shadow:0 2px 0 #6c675e,0 4px 10px rgba(0,0,0,.4),inset 0 1px 0 #fff}
.key.ghost{background:transparent;box-shadow:none;color:#a19d94}
.key.lat,.seg .lat{transform:translateY(2px);background:#0f0f0f;box-shadow:inset 0 2px 7px rgba(0,0,0,.86),inset 0 0 0 1px #000,0 1px 0 rgba(255,255,255,.05);color:#fff;text-shadow:0 0 7px rgba(246,239,227,.55)}
.key.lat .ic{filter:drop-shadow(0 0 5px rgba(246,239,227,.5))}
.lamp{position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:#2b1414;box-shadow:0 0 0 1px rgba(255,255,255,.13)}
.lamp.on{background:#ef282d;box-shadow:0 0 8px #ef282d}
.lamp.used{left:5px;right:auto;background:#8c867d;box-shadow:none}
.live{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ef282d;box-shadow:0 0 8px #ef282d;flex:none}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
.seg span{position:relative;height:32px;padding:0 10px;border-radius:9px;background:linear-gradient(180deg,#313131,#252525);box-shadow:0 2px 0 #080808,0 3px 7px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.08);color:#a19d94;display:grid;place-items:center;font:400 11px/1 "Martian Mono",monospace;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
/* the brand: the backlit red home key with the white bug, no glow */
.mark{position:relative;display:block;width:44px;height:44px;border-radius:10px;background:linear-gradient(180deg,#f2383d,#dc2227);box-shadow:0 2px 0 #5a0b0d,0 4px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1px #000;overflow:hidden;flex:none}
.mark img{position:absolute;inset:0;width:100%;height:100%}
.wordmark{font:800 22px/1 "Doto",monospace;letter-spacing:.08em;color:#f6efe3;text-shadow:0 0 8px rgba(246,239,227,.35)}
/* nav */
.nav{margin:20px 24px 0;height:72px;display:flex;align-items:center;gap:14px;padding:0 14px 0 14px}
.nav .links{display:flex;gap:4px;margin-left:18px}
.nav .links a{height:40px;padding:0 14px;display:inline-flex;align-items:center;border-radius:9px;font:400 11px/1 "Martian Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:#a19d94}
.nav .disp{height:44px;padding:0 16px;display:flex;align-items:center;gap:12px}
/* a small sheet head: the verb's name on its display */
.shead{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px}
.shead .dm{font-size:17px}
/* pictures */
.pic{position:relative;overflow:hidden;background:#000;border-radius:6px}
.socket{position:relative;overflow:hidden;border-radius:6px;box-shadow:0 0 0 3px #070707}
.card{position:relative;display:grid;gap:9px}
.card .ph{position:relative;overflow:hidden;border-radius:8px;background:#000;box-shadow:0 0 0 1px #000,0 6px 16px rgba(0,0,0,.4)}
.card .cn{font:400 13px/16px "Archivo",sans-serif;color:#ece7dd;white-space:nowrap}
.card .cf{font:400 11px/1 "Martian Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:#8f8a82;white-space:nowrap}
/* the plans */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.plan{padding:28px 28px 30px;display:flex;flex-direction:column;gap:18px}
.plan .price{display:flex;align-items:baseline;gap:10px}
.plan .price .dm{font-size:56px;line-height:1}
.plan li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:12px;align-items:baseline;font:400 15px/1.45 "Archivo",sans-serif;color:#bdb6aa;padding:3px 0}
.plan li i{width:6px;height:6px;border-radius:50%;background:#8c867d;transform:translateY(-2px)}
.plan.pro li i{background:#f7f4ed}
.plan .foot{margin-top:auto;padding-top:10px;display:flex}
/* the footer */
.footer{margin:0 24px 24px;padding:36px 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.footer h4{margin:0 0 14px;font:400 11px/1.2 "Martian Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#8f8a82;font-weight:400}
.footer a{display:block;font:400 15px/2 "Archivo",sans-serif;color:#bdb6aa}
/* motion: every loop respects reduced motion */
@media (prefers-reduced-motion: reduce){.pg *,.pg *::before,.pg *::after{animation:none !important}}
.seqm{display:flex;align-items:center;gap:12px;padding:12px}
.seqm .play{height:48px}
.tread{height:48px;min-width:128px;padding:0 12px;display:grid;place-items:center}
.tread .dm{font-size:22px}
.pads{flex:1 1 auto;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:5px;padding:8px 10px;height:48px}
.pads i{display:block;border-radius:4px;background:#1e1e1e;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 0 #000;animation:pad 6s steps(1,end) infinite}
.pads.violet i.m{background:#6559b8;box-shadow:0 0 8px -1px #8a7dff,inset 0 1px 0 rgba(255,255,255,.25)}
.pads.green i.m{background:#2a9965;box-shadow:0 0 8px -1px #39d98a,inset 0 1px 0 rgba(255,255,255,.25)}
.pads.rose i.m{background:#a8506a;box-shadow:0 0 8px -1px #ff86a8,inset 0 1px 0 rgba(255,255,255,.25)}
@keyframes pad{0%{background:#ff4a4f;box-shadow:0 0 12px rgba(239,40,45,.85),0 0 3px #fff}4.2%,100%{background:#1e1e1e;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 0 #000}}
.pads i.m{animation-name:padm}
@keyframes padm{0%{background:#ff4a4f;box-shadow:0 0 12px rgba(239,40,45,.85),0 0 3px #fff}4.2%,100%{}}
.wave{position:relative;overflow:hidden}
.wave i{position:absolute;border-radius:2px;background:var(--tone);opacity:.72}
.wave i.bt{opacity:1;animation:btflash var(--dur) linear infinite}
@keyframes btflash{0%{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.7)}6%,100%{background:var(--tone);box-shadow:none}}
.needle{position:absolute;top:0;bottom:0;left:12px;width:2px;margin-left:-1px;border-radius:1px;background:#f7f4ed;box-shadow:0 0 8px rgba(247,244,237,.5);animation:sweep var(--dur) linear infinite}
@keyframes sweep{from{transform:translateX(0)}to{transform:translateX(calc(var(--sw, 336px)))}}
.sheet{display:flex;flex-direction:column;padding-bottom:14px}
.sbody{display:grid;gap:12px;padding:0 14px}
.srow{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;align-items:center;min-height:36px}
.sel{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font:400 13px/1 "Archivo",sans-serif;color:#f6efe3}
.seg.four span{padding:0 6px}
.mvs{display:grid;gap:8px}
.mv{display:grid;grid-template-columns:36px minmax(0,1fr) 120px;gap:12px;align-items:center;padding:6px 8px 6px 6px;border-radius:12px;background:#151515;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 0 1px #080808}
.meter{height:14px;border-radius:7px;overflow:hidden}
.meter i{position:absolute;left:3px;top:4px;bottom:4px;border-radius:4px;background:#ef282d;box-shadow:0 0 8px #ef282d;transform-origin:0 50%}
.meter i.k{width:108px;animation:kick .5s cubic-bezier(.2,.7,.3,1) infinite}
.meter i.b{width:108px;animation:bass 1s ease-in-out infinite}
.meter i.v{width:108px;animation:voice 2.2s ease-in-out infinite}
@keyframes kick{0%{transform:scaleX(1)}60%,100%{transform:scaleX(.12)}}
@keyframes bass{0%,100%{transform:scaleX(.3)}40%{transform:scaleX(.95)}}
@keyframes voice{0%{transform:scaleX(.1)}20%{transform:scaleX(.7)}35%{transform:scaleX(.4)}55%{transform:scaleX(.85)}80%{transform:scaleX(.25)}100%{transform:scaleX(.1)}}
.beat{animation:beat .5s cubic-bezier(.2,.7,.3,1) infinite;transform-origin:50% 50%}
@keyframes beat{0%{transform:scale(1.035);filter:brightness(1.22) contrast(1.05)}55%,100%{transform:scale(1);filter:none}}
.fdr{display:flex;align-items:center;gap:12px;height:36px}
.ftrk{position:relative;height:30px;flex:none}
.ftrk::before{content:"";position:absolute;left:0;right:0;top:10px;height:10px;border-radius:6px;background:#070707;box-shadow:inset 0 2px 7px rgba(0,0,0,.86),inset 0 0 0 1px #000,0 1px 0 rgba(255,255,255,.05)}
.ffil{position:absolute;left:0;top:14px;height:2px;width:calc(var(--v)*100%);border-radius:2px;background:#ef282d;box-shadow:0 0 8px #ef282d;transform-origin:0 50%}
.fcap{position:absolute;top:3px;left:calc(var(--v)*100%);width:14px;height:24px;margin-left:-7px;border-radius:5px;background:linear-gradient(180deg,#444,#282828);box-shadow:0 2px 0 #080808,inset 0 1px 0 rgba(255,255,255,.12)}
.fcap::after{content:"";position:absolute;left:4px;right:4px;top:11px;height:2px;border-radius:1px;background:#161616;box-shadow:0 -4px 0 #161616,0 4px 0 #161616}
.fnum{width:52px;height:30px;display:grid;place-items:center;border-radius:8px}
.drift .ffil,.ffil.drift{animation:ffil 5s ease-in-out infinite}
.fcap.drift{animation:fcap 5s ease-in-out infinite}
@keyframes ffil{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.62)}}
@keyframes fcap{0%,100%{left:calc(var(--v)*100%)}50%{left:calc(var(--v)*62%)}}
.lanesm{display:flex;align-items:center;gap:12px;padding:12px}
.tread.of{min-width:86px}
.lwell{position:relative;overflow:hidden;flex:none}
.lane{position:absolute;height:14px;border-radius:7px}
.lane.violet{background:#5d53b0;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 10px -2px #8a7dff}
.lane.green{background:#248f5e;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 10px -2px #39d98a}
.lane.amber{background:#a8741a;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 10px -2px #ffb020}
.lane.sky{background:#3f7f9c;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 10px -2px #8fd8ff}
.lane.rose{background:#9c4a63;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 10px -2px #ff86a8}
.lpill{position:absolute;top:2px;bottom:2px;border-radius:5px;background:rgba(255,255,255,.3);overflow:hidden}
.lpill span{position:absolute;left:7px;top:0;font:400 9px/10px "Martian Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:#fff;white-space:nowrap;display:none}
.kd{position:absolute;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;transform:rotate(45deg);background:#f7f4ed;border-radius:1px;box-shadow:0 0 0 1.5px #070707}
.lhead{position:absolute;top:0;bottom:0;left:0;width:100%;animation:lsweep var(--dur) linear infinite}
.lhead i{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;border-radius:1px;background:#f7f4ed;box-shadow:0 0 8px rgba(247,244,237,.45)}
.lhead i::before{content:"";position:absolute;top:0;left:-5px;width:12px;height:6px;border-radius:0 0 4px 4px;background:#f7f4ed}
@keyframes lsweep{from{transform:translateX(0)}to{transform:translateX(100%)}}
.scn{position:relative;overflow:hidden;border-radius:6px;background:radial-gradient(ellipse 80% 70% at 50% 30%,#1c1c1e 0%,#0e0e0f 56%,#070707 100%)}
.scn .wd{position:absolute;inset:0;perspective:1200px;perspective-origin:50% 36%}
.scn .world{position:absolute;inset:0;transform-style:preserve-3d;animation:orbit var(--orbit) ease-in-out infinite alternate}
@keyframes orbit{from{transform:rotateY(-16deg) rotateX(2deg)}to{transform:rotateY(16deg) rotateX(-2deg)}}
.scn .floor{position:absolute;left:-60%;width:220%;top:52%;height:60%;transform-origin:50% 0;transform:rotateX(84deg);background-image:linear-gradient(rgba(247,244,237,.2) 1px,rgba(0,0,0,0) 1px),linear-gradient(90deg,rgba(247,244,237,.2) 1px,rgba(0,0,0,0) 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 50% 70% at 50% 0%,#000 30%,rgba(0,0,0,0) 90%);mask-image:radial-gradient(ellipse 50% 70% at 50% 0%,#000 30%,rgba(0,0,0,0) 90%)}
.scn .fcard{position:absolute;overflow:hidden;border-radius:4px;transform:translateZ(-160px) rotateY(18deg);box-shadow:0 40px 60px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08);background:#000}
.scn .word{position:absolute;transform-style:preserve-3d;transform:translateZ(40px) rotateY(-8deg)}
.scn .word .sl{position:absolute;left:0;top:0;font:400 1em/1 "Archivo Black",sans-serif;letter-spacing:.02em;white-space:nowrap}
.scn .word .sl:last-child{text-shadow:0 0 30px rgba(246,239,227,.12)}
.scn .orb{position:absolute;border-radius:50%;transform:translateZ(120px);background:radial-gradient(circle at 36% 32%,#f6efe3 0%,#cfc8bb 24%,#7d776e 62%,#26241f 100%);box-shadow:0 0 60px rgba(246,239,227,.14)}
.scn .sky{position:absolute;inset:0;background:radial-gradient(ellipse 40% 30% at 70% 20%,rgba(239,40,45,.08),rgba(0,0,0,0) 70%)}
.camh{position:absolute;right:18px;top:18px;display:flex;flex-direction:column;gap:8px;z-index:5}
.reccl{position:absolute;right:16px;bottom:16px;display:flex;gap:8px;padding:8px;z-index:5;border-radius:14px}
.rk .lamp{top:7px;right:7px}
.blink{animation:blink 1.2s steps(1,end) infinite}
@keyframes blink{0%{opacity:1}50%,100%{opacity:.25}}
.dep{position:relative;overflow:hidden;border-radius:6px;background:radial-gradient(ellipse 80% 80% at 50% 40%,#18181a,#070707)}
.dwd{position:absolute;inset:0;perspective:900px}
.dgrp{position:absolute;inset:12%;transform-style:preserve-3d;animation:dturn 7s ease-in-out infinite alternate}
@keyframes dturn{from{transform:rotateY(-30deg) rotateX(10deg)}to{transform:rotateY(30deg) rotateX(-4deg)}}
.dl{position:absolute;inset:0;border-radius:4px}
.dl.l0{transform:translateZ(-60px);overflow:hidden;box-shadow:0 30px 50px rgba(0,0,0,.55)}
.dl.ls{transform:translateZ(-58px);filter:brightness(0) blur(7px);opacity:.3}
.dl.l1{transform:translateZ(56px);filter:drop-shadow(0 16px 14px rgba(0,0,0,.35))}
.trk .tring{position:absolute;border-radius:14px;box-shadow:inset 0 0 0 1.5px rgba(247,244,237,.9),0 0 0 1px rgba(0,0,0,.35);animation:tbob 1.5s ease-in-out infinite}
.trk .tring.sm{border-radius:10px;animation-duration:.75s}
@keyframes tbob{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-5px)}}
.tlab{position:absolute;left:10px;top:-28px;height:22px;padding:0 9px;border-radius:6px;background:#f7f4ed;color:#0a0a0a;font:400 11px/22px "Martian Mono",monospace;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.mph path{fill:#f7f4ed;animation:mph 8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes mph{0%,18%{d:path("M100 28L107.5 28.4L115 29.6L122.2 31.5L129.3 34.2L136 37.6L142.3 41.8L148.2 46.5L153.5 51.8L158.2 57.7L162.4 64L165.8 70.7L168.5 77.8L170.4 85L171.6 92.5L172 100L171.6 107.5L170.4 115L168.5 122.2L165.8 129.3L162.4 136L158.2 142.3L153.5 148.2L148.2 153.5L142.3 158.2L136 162.4L129.3 165.8L122.2 168.5L115 170.4L107.5 171.6L100 172L92.5 171.6L85 170.4L77.8 168.5L70.7 165.8L64 162.4L57.7 158.2L51.8 153.5L46.5 148.2L41.8 142.3L37.6 136L34.2 129.3L31.5 122.2L29.6 115L28.4 107.5L28 100L28.4 92.5L29.6 85L31.5 77.8L34.2 70.7L37.6 64L41.8 57.7L46.5 51.8L51.8 46.5L57.7 41.8L64 37.6L70.7 34.2L77.8 31.5L85 29.6L92.5 28.4Z");fill:#f7f4ed}25%,43%{d:path("M100 8L109.1 13.6L115.3 27.8L118 44.5L118.9 57.5L120.5 64.6L123.5 67.6L127.4 69.6L134.6 68.9L147.2 65.7L163.9 63.1L179.4 64.7L187.5 71.6L185 81.9L173.4 92.3L158.4 100L146.2 104.9L140 108.5L138 112.4L137.4 116.6L140.3 123.2L147.2 134.3L154.8 149.4L158.1 164.6L154.1 174.4L143.4 175.2L130 167.4L118 155.5L109.7 145.5L104.3 140.7L100 140L95.7 140.7L90.3 145.5L82 155.5L70 167.4L56.6 175.2L45.9 174.4L41.9 164.6L45.2 149.4L52.8 134.3L59.7 123.3L62.6 116.6L62 112.4L60 108.5L53.8 104.9L41.6 100L26.6 92.3L15 81.9L12.5 71.6L20.6 64.7L36.1 63.1L52.8 65.7L65.4 68.9L72.6 69.6L76.5 67.6L79.5 64.6L81.1 57.5L82 44.5L84.7 27.8L90.9 13.6Z");fill:#ef282d}50%,68%{d:path("M100 60L104.6 56L111.5 46L121.3 34.6L132.5 27.1L142 27.3L146.9 35.4L146 48.9L141 63.1L135.8 74L134.6 80L140.4 82L152.5 82.9L167.3 85.7L179.4 91.7L184 100L179.4 108.3L167.3 114.3L152.5 117.1L140.4 118L134.6 120L135.8 126L141 136.9L146 151.1L146.9 164.6L142 172.7L132.5 172.9L121.3 165.4L111.5 154L104.6 144L100 140L95.4 144L88.5 154L78.7 165.4L67.5 172.9L58 172.7L53.1 164.6L54 151.1L59 136.9L64.2 126L65.4 120L59.6 118L47.5 117.1L32.7 114.3L20.6 108.3L16 100L20.6 91.7L32.7 85.7L47.5 82.9L59.6 82L65.4 80L64.2 74L59 63.1L54 48.9L53.1 35.4L58 27.3L67.5 27.1L78.7 34.6L88.5 46L95.4 56Z");fill:#8fd8ff}75%,93%{d:path("M100 22.4L108.1 22.9L115.8 25.5L122.5 30.7L127.7 37.8L131.1 46.1L133.2 54.3L134.8 61.3L137.2 66.5L141.4 69.9L148.1 72.2L157 74.6L167.3 78.1L177.4 83.6L185.3 91L189.8 100L190 109.5L186.1 118.3L179 125.7L170.2 131.3L161.2 135.3L153 138.5L146.3 141.7L140.8 145.3L135.9 149.5L131.1 153.9L125.8 157.9L119.8 160.9L113.3 162.5L106.6 162.8L100 162.4L93.5 162.1L86.7 162.5L79.3 163.8L70.7 165.7L61.1 167.4L50.9 167.6L41.1 165.4L33.1 160.2L28.1 152.2L26.8 142.2L29.2 131.5L34.2 121.4L40.4 112.7L46.1 105.7L49.8 100L50.7 94.8L49.1 89.2L45.8 82.4L42.3 74.3L39.9 65.3L39.8 56.2L42.2 48L47.1 41.2L53.6 36.2L61.1 32.6L68.8 30L76.5 27.7L84.2 25.5L92 23.6Z");fill:#cdff4d}100%{d:path("M100 28L107.5 28.4L115 29.6L122.2 31.5L129.3 34.2L136 37.6L142.3 41.8L148.2 46.5L153.5 51.8L158.2 57.7L162.4 64L165.8 70.7L168.5 77.8L170.4 85L171.6 92.5L172 100L171.6 107.5L170.4 115L168.5 122.2L165.8 129.3L162.4 136L158.2 142.3L153.5 148.2L148.2 153.5L142.3 158.2L136 162.4L129.3 165.8L122.2 168.5L115 170.4L107.5 171.6L100 172L92.5 171.6L85 170.4L77.8 168.5L70.7 165.8L64 162.4L57.7 158.2L51.8 153.5L46.5 148.2L41.8 142.3L37.6 136L34.2 129.3L31.5 122.2L29.6 115L28.4 107.5L28 100L28.4 92.5L29.6 85L31.5 77.8L34.2 70.7L37.6 64L41.8 57.7L46.5 51.8L51.8 46.5L57.7 41.8L64 37.6L70.7 34.2L77.8 31.5L85 29.6L92.5 28.4Z");fill:#f7f4ed}}
.comp{height:52px;display:flex;align-items:center;gap:4px;padding:0 10px}
.dhome{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 10px 0 4px;border-radius:8px;font:800 14px/1 "Doto",monospace;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-shadow:0 0 9px rgba(246,239,227,.7);white-space:nowrap}
.dhome .hb{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:linear-gradient(180deg,#f7f3ea,#d9d3c7);color:#141414;box-shadow:0 0 0 1px #000,inset 0 1px 0 #fff,0 0 14px rgba(246,239,227,.38)}
.dsep{width:2px;height:26px;border-radius:1px;background:linear-gradient(90deg,#000,#2a2a2a);flex:none;margin:0 4px}
.dtab{position:relative;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:7px;font:800 14px/1 "Doto",monospace;letter-spacing:.06em;text-transform:uppercase;color:#bdb6aa;white-space:nowrap;animation:dtab 4.8s steps(1,end) infinite}
.dtab.g{animation:none}
@keyframes dtab{0%{color:#f6efe3;text-shadow:0 0 7px rgba(246,239,227,.45);background:linear-gradient(180deg,#1d1d1d,#161616);box-shadow:inset 0 0 0 1px rgba(247,244,237,.42),inset 0 1px 0 rgba(255,255,255,.05)}33.3%,100%{color:#bdb6aa;text-shadow:none;background:transparent;box-shadow:none}}
.dkey{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:7px;color:#bdb6aa}
.expm .sbody{gap:14px}
.prog{height:44px;overflow:hidden;border-radius:10px}
.prog i{position:absolute;left:4px;top:4px;bottom:4px;width:calc(100% - 8px);border-radius:7px;background:linear-gradient(90deg,#3a3a3a,#5a5752);transform-origin:0 50%;animation:prog 5s linear infinite;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pct{position:absolute;right:14px;top:0;height:44px;overflow:hidden;display:block;font-size:20px;line-height:44px}
.pct span{display:block;height:44px;animation:pct 5s steps(25,end) infinite}
@keyframes pct{from{transform:translateY(0)}to{transform:translateY(-1100px)}}
.addl{padding:8px;display:grid;gap:2px;position:relative}
.mlab{font:400 11px/1.2 "Martian Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:#8f8a82;padding:10px 10px 4px}
.mi{position:relative;z-index:1;display:flex;align-items:center;gap:12px;height:36px;padding:0 10px;border-radius:9px;font:400 11px/1.2 "Martian Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#ece7dd;white-space:nowrap}
.mi .ic{color:#a19d94}
.mi .s{margin-left:auto;font:400 11px/1 "Martian Mono",monospace;letter-spacing:.04em;color:#8f8a82}
.addl .hov{position:absolute;left:8px;right:8px;height:36px;border-radius:9px;background:linear-gradient(180deg,#313131,#252525);box-shadow:0 2px 0 #080808,0 3px 7px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.08);animation:hov 7s steps(1,end) infinite}
@keyframes hov{0%{transform:translateY(0px)}14.3%{transform:translateY(38px)}28.6%{transform:translateY(105.2px)}42.9%{transform:translateY(181.2px)}57.1%{transform:translateY(286.4px)}71.4%{transform:translateY(353.6px)}85.7%{transform:translateY(391.6px)}100%{transform:translateY(0)}}
.obar{display:inline-flex;align-items:flex-start;gap:6px;padding:10px 12px 8px 12px}
.who{flex:none;width:72px;height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font:400 11px/1.2 "Martian Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#ece7dd}
.vb{display:flex;flex-direction:column;align-items:center;gap:7px;width:58px;font:400 11px/16px "Martian Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:#a19d94;white-space:nowrap}
.vb .vi{position:relative;width:54px;height:44px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(180deg,#313131,#252525);box-shadow:0 2px 0 #080808,0 3px 7px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.08);color:#ece7dd}
.vb.on{color:#fff;text-shadow:0 0 7px rgba(246,239,227,.55)}
.vb.on .vi{transform:translateY(2px);background:#0f0f0f;box-shadow:inset 0 2px 7px rgba(0,0,0,.86),inset 0 0 0 1px #000,0 1px 0 rgba(255,255,255,.05)}
.mcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mcard{display:grid;gap:8px;justify-items:start}
.mstage{width:100%;height:84px;display:grid;place-items:center;overflow:hidden;border-radius:10px}
.mobj{display:block;width:30px;height:30px;border-radius:8px;background:linear-gradient(180deg,#f7f4ed,#cfc9bd);box-shadow:0 0 10px rgba(246,239,227,.25)}
.mobj.float{animation:mfloat 2s ease-in-out infinite}
.mobj.breathe{animation:mbreathe 2s ease-in-out infinite}
.mobj.spin{animation:mspin 3s linear infinite}
.mobj.drift{animation:mdrift 3s ease-in-out infinite alternate}
.mobj.sway{animation:msway 2s ease-in-out infinite alternate;transform-origin:50% 120%}
.mobj.pop{animation:mpop 2s cubic-bezier(.3,1.6,.5,1) infinite}
.mobj.wave{background:none;box-shadow:none;width:auto;height:auto;font:400 22px/1 "Archivo Black",sans-serif;color:#f7f4ed;letter-spacing:.04em;display:flex}
.mobj.wave span{display:inline-block;animation:mwave 1.4s ease-in-out infinite}
.mobj.rise{background:none;box-shadow:none;width:auto;height:auto;font:400 22px/1 "Archivo Black",sans-serif;color:#f7f4ed;letter-spacing:.04em;display:flex}
.mobj.rise span{display:inline-block;animation:mrise 2.4s cubic-bezier(.2,.8,.3,1) infinite}
@keyframes mfloat{0%,100%{transform:translateY(8px)}50%{transform:translateY(-8px)}}
@keyframes mbreathe{0%,100%{transform:scale(.8)}50%{transform:scale(1.2)}}
@keyframes mspin{to{transform:rotate(360deg)}}
@keyframes mdrift{from{transform:translateX(-40px)}to{transform:translateX(40px)}}
@keyframes msway{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
@keyframes mpop{0%{transform:scale(0)}30%,80%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes mwave{0%,100%{transform:translateY(5px)}50%{transform:translateY(-5px)}}
@keyframes mrise{0%{transform:translateY(26px);opacity:0}30%,85%{transform:translateY(0);opacity:1}100%{transform:translateY(0);opacity:0}}
.priv{padding:28px;display:flex;flex-direction:column;gap:16px}
.ftile{padding:18px;display:flex;flex-direction:column;gap:14px}
.tstage{height:180px;overflow:hidden;border-radius:10px;display:grid;place-items:center}
.sec{padding-top:128px}
.shd{display:flex;flex-direction:column;gap:18px}
.ctas{display:flex;gap:14px;flex-wrap:wrap}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.bcard{padding:24px;display:flex;flex-direction:column;gap:12px}
.bcard .h3{font-size:21px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ctab{margin-top:128px;padding:64px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center}
.lab{display:flex;align-items:center;gap:10px}
.tdisp{height:44px;display:flex;align-items:center;gap:12px;padding:0 14px}
.tdisp .dm{font-size:18px}
.stage{position:relative;overflow:hidden;background:#000}
.mirror{transform:scaleX(-1)}
.tstage .bez.sm{border-radius:5px}
.tstage .dep,.tstage .pic{border-radius:6px}
.letterwave{position:absolute;left:0;right:0;bottom:12%;display:flex;justify-content:center;font:400 88px/1 "Archivo Black",sans-serif;letter-spacing:.04em;color:#f7f4ed;text-shadow:0 0 22px rgba(246,239,227,.35)}
.letterwave span{display:inline-block;animation:mwave 1.4s ease-in-out infinite}
.latc{transform:translateY(2px);box-shadow:0 0 0 7px #0f0f0f,0 0 0 8px #000,inset 0 2px 3px rgba(0,0,0,.5)}
.tstage .prog{width:340px}
@keyframes stp6{0%,16.7%{opacity:1}16.7%,100%{opacity:0}}
@keyframes stp7{0%,14.3%{opacity:1}14.3%,100%{opacity:0}}
.stp{opacity:0;animation-timing-function:steps(1,end);animation-iteration-count:infinite}
.stn{position:relative;display:inline-grid}
.stn>span{grid-area:1/1;opacity:0;animation-timing-function:steps(1,end);animation-iteration-count:infinite}
.stp6,.stn6>span{animation-name:stp6}
.stp7,.stn7>span{animation-name:stp7}
.lookp{padding:14px;display:grid;gap:14px;border-radius:14px}
.erow{display:flex;align-items:center;gap:12px}
.pcs{position:relative;display:flex;gap:var(--g)}
.pc{position:relative;width:var(--cw);height:34px;border-radius:5px;overflow:hidden;background:#000;box-shadow:0 0 0 1px #000}
.pc img{width:100%;height:100%;object-fit:cover;display:block}
.ring{position:absolute;left:-3px;top:-3px;width:calc(var(--cw) + 6px);height:40px;border-radius:7px;box-shadow:inset 0 0 0 1.5px rgba(247,244,237,.42),0 0 0 1px rgba(0,0,0,.4);animation-timing-function:steps(1,end);animation-iteration-count:infinite}
.ring7{animation-name:ring7}
@keyframes ring7{0%{transform:translateX(0px)}14.3%{transform:translateX(62px)}28.6%{transform:translateX(124px)}42.9%{transform:translateX(186px)}57.1%{transform:translateX(248px)}71.4%{transform:translateX(310px)}85.7%{transform:translateX(372px)}100%{transform:translateX(0)}}
.pname{display:flex;align-items:center;gap:10px}
.v2{background:#0e0e0e}
.hkey{position:relative;flex:none;display:block;overflow:hidden;background:radial-gradient(ellipse at 50% 46%,#f5343a 0%,#ef282d 50%,#d61d23 100%);box-shadow:0 2.4px 0 #5e0a0d,0 3.6px 9px rgba(0,0,0,.6)}
.hkey img{position:absolute;inset:0;display:block;width:100%;height:100%}
.hsheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0) 40%);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -2.5px 3px rgba(70,0,4,.38)}
.v2 .nav{gap:12px}
.v2 .nav .links{margin-left:10px}
.sec{padding-top:128px}
.shd{display:flex;flex-direction:column;gap:18px}
.ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.row2{display:grid;grid-template-columns:500px minmax(0,1fr);gap:64px;align-items:center}
.row2.flip{grid-template-columns:minmax(0,1fr) 500px}
.row2.flip>.txt{order:2}
.txt{display:flex;flex-direction:column;gap:18px}
.goods{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.gks{display:flex;flex-direction:column;gap:8px}
.gk{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;min-height:36px;padding:6px 14px 6px 10px;border-radius:10px;background:linear-gradient(180deg,#1f1f1f,#191919);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px #090909;font:400 15px/1.3 "Archivo",sans-serif;color:#ece7dd}
.gk .ic{color:#a19d94}
.aname{font:400 44px/1.05 "Archivo",sans-serif;letter-spacing:-.025em;color:#f4f0e8;margin:0}
/* hero: C's layout, text over a full-width studio */
.v2 .hero{padding-top:72px}
.v2 .htext{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:64px;align-items:end;margin-bottom:48px}
.v2 .h1{font-size:92px}
.v2 .hline{font:400 24px/1.35 "Archivo",sans-serif;color:#f4f0e8;margin:0;text-wrap:balance}
.studio{padding:14px;display:flex;flex-direction:column;gap:16px}
.stop{display:flex;align-items:center;gap:12px;height:62px;padding:0 6px}
.stop .disp{flex:1 1 auto;height:46px;display:flex;align-items:center;gap:12px;padding:0 16px}
.stop .disp .dm{font-size:18px}
.smid{display:grid;grid-template-columns:minmax(0,1fr) 392px;gap:20px;align-items:start}
.sleft{display:flex;flex-direction:column;align-items:center;gap:26px}
.lk{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.lk.on{opacity:1}
.lsheet{display:flex;flex-direction:column;gap:14px;padding-bottom:16px}
.lsheet .sbody{display:grid;gap:14px;padding:0 14px}
.erow3{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px}
.erow3 .socket{position:relative}
.erow3 .dm{font-size:20px}
.mixl{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-radius:10px}
.v2 .fdr .ftrk{flex:1 1 auto;width:auto !important}
.madefor{margin-top:28px;display:flex;align-items:center;gap:12px;padding:14px 18px;flex-wrap:wrap}
.madefor .print{margin-right:8px}
/* audiences */
.poster{position:relative}
.ptitle{position:absolute;left:0;right:0;bottom:9%;text-align:center;font:400 86px/1 "Archivo Black",sans-serif;letter-spacing:.04em;color:#fff;text-shadow:0 0 30px rgba(0,0,0,.4)}
.phones{display:flex;gap:22px;justify-content:center}
.phone{position:relative;width:200px;height:356px;border-radius:26px;overflow:hidden;background:#000;box-shadow:0 0 0 8px #080808,0 0 0 9px #262626,0 24px 48px rgba(0,0,0,.55)}
.phone video{position:absolute;left:50%;top:0;height:100%;width:auto;transform:translateX(-50%)}
.phone .tag{position:absolute;left:12px;bottom:12px;height:28px;padding:0 10px;border-radius:7px;background:rgba(7,7,7,.88);display:flex;align-items:center}
.saved{padding:16px;display:flex;flex-direction:column;gap:14px}
.savedh{display:flex;align-items:center;gap:10px}
.scards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.scard{display:grid;gap:8px}
.scard .ph{position:relative;height:84px;border-radius:8px;overflow:hidden;background:#000}
.scard .cn{font:400 13px/16px "Archivo",sans-serif;color:#ece7dd}
.lockchip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:6px;background:#0f0f0f;box-shadow:inset 0 1px 3px rgba(0,0,0,.8);font:400 11px/1 "Martian Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#bdb6aa}
.srcm{padding-bottom:14px}
.srcm .sbody{display:grid;gap:14px;padding:0 14px}
.srcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.prows{display:grid;gap:8px}
.prow{display:flex;align-items:center;gap:12px}
.pbars{flex:1 1 auto;height:34px;display:flex;align-items:flex-end;gap:3px;padding:6px 8px;border-radius:8px}
.pbars i{flex:1 1 0;height:100%;border-radius:2px;background:#9c4a63;box-shadow:0 0 6px -1px #ff86a8;transform-origin:50% 100%}
.pbars.k i{animation:pk .5s cubic-bezier(.2,.7,.3,1) infinite}
.pbars.b i{animation:pbb 1s ease-in-out infinite}
.pbars.v i{animation:pv 1.3s ease-in-out infinite}
@keyframes pk{0%{transform:scaleY(1)}45%,100%{transform:scaleY(.14)}}
@keyframes pbb{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(.85)}}
@keyframes pv{0%{transform:scaleY(.2)}25%{transform:scaleY(.7)}40%{transform:scaleY(.4)}65%{transform:scaleY(.9)}85%{transform:scaleY(.3)}100%{transform:scaleY(.2)}}
.musgrid{display:grid;grid-template-columns:400px minmax(0,1fr);gap:22px;align-items:center}
/* features */
.marquee{position:relative;overflow:hidden;border-radius:14px;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000 8%,#000 92%,rgba(0,0,0,0));mask-image:linear-gradient(90deg,rgba(0,0,0,0),#000 8%,#000 92%,rgba(0,0,0,0))}
.mtrack{display:flex;gap:14px;width:max-content;animation:mq 40s linear infinite}
.mtrack.r{animation-direction:reverse;animation-duration:46s}
.mtile{position:relative;flex:none;width:208px;height:118px;border-radius:9px;overflow:hidden;background:#000;box-shadow:0 0 0 1px #000}
.mtile .tl{position:absolute;left:8px;bottom:8px;height:22px;padding:0 8px;border-radius:6px;background:rgba(7,7,7,.86);display:flex;align-items:center}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ftile2{padding:20px;display:flex;flex-direction:column;gap:12px}
.ftile2 .h3{font-size:19px}
.ftile2 .small{font-size:14.5px;color:#aaa49a}
.ftile2 .pro{margin-top:auto}
/* glow */
.glowst{position:relative;overflow:hidden;background:#000}
.glowst .g0{filter:none}
.glowst .gb{mix-blend-mode:screen;filter:blur(14px) brightness(1.7) saturate(1.2);animation:gbl 5s ease-in-out infinite}
.glowst .gs{mix-blend-mode:screen;transform:scaleX(2.6);filter:blur(5px) brightness(1.4);opacity:.45;animation:gst 5s ease-in-out infinite}
.glowst .gt{mix-blend-mode:screen;opacity:.22;transform:translateX(-18px)}
.glowst .gt2{mix-blend-mode:screen;opacity:.12;transform:translateX(-36px)}
@keyframes gbl{0%,100%{opacity:.85}50%{opacity:.45}}
@keyframes gst{0%,100%{opacity:.45}50%{opacity:.18}}
/* track sheet */
.tlist{display:grid;gap:4px}
.trow{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:10px;font:400 14px/1 "Archivo",sans-serif;color:#bdb6aa}
.trow .ic{color:#8f8a82}
.trow.lat{background:#0f0f0f;box-shadow:inset 0 2px 7px rgba(0,0,0,.86),inset 0 0 0 1px #000,0 1px 0 rgba(255,255,255,.05);color:#fff;text-shadow:0 0 7px rgba(246,239,227,.55)}
.trow.lat .ic{color:#f6efe3}
/* one click */
.ccards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:28px}
.ccard{position:relative;display:grid;gap:9px;padding:0;text-align:left;border-radius:12px}
.ccard .ph{position:relative;height:104px;border-radius:9px;overflow:hidden;background:#000;box-shadow:0 0 0 1px #000,0 6px 16px rgba(0,0,0,.4);transition:transform .12s}
.ccard .cn{font:400 13px/16px "Archivo",sans-serif;color:#a19d94}
.ccard.on .ph{transform:translateY(2px);box-shadow:0 0 0 7px #0f0f0f,0 0 0 8px #000}
.ccard.on .cn{color:#fff;text-shadow:0 0 7px rgba(246,239,227,.55)}
.ccard:focus-visible{outline:2px solid #f7f4ed;outline-offset:10px}
/* makers */
.mkgrid{display:grid;grid-template-columns:420px minmax(0,1fr);gap:64px;align-items:center}
.sig{display:flex;align-items:center;gap:14px}
.sig .nm2{font:400 18px/1.3 "Archivo",sans-serif;color:#f4f0e8}
/* trust band */
.trust{padding:48px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:40px;align-items:center}
.tchips{display:flex;flex-direction:column;gap:8px}
/* pricing */
.plans2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px}
/* faq */
.faq{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.qa{padding:24px;display:flex;flex-direction:column;gap:10px}
.qa .h3{font-size:20px}
/* closing */
.close{margin-top:128px;padding:72px 64px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:center}
.keybay{width:220px;height:220px;border-radius:24px;display:grid;place-items:center;background:#0a0a0a;box-shadow:inset 0 2px 9px rgba(0,0,0,.85),inset 0 0 0 1px #000,0 1px 0 rgba(255,255,255,.05)}
.foot2{margin:0 24px 24px;padding:32px 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot2 h4{margin:0 0 14px;font:400 11px/1.2 "Martian Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#8f8a82;font-weight:400}
.foot2 a{display:block;font:400 15px/2 "Archivo",sans-serif;color:#bdb6aa}
.v3{--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px}
.v3 .wrap{padding-inline:64px}
.v3 .navwrap{padding-top:var(--s3)}
.v3 .nav{margin:0;padding:0 var(--s2)}
.v3 .sec{padding-top:var(--s8)}
.sechead{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:var(--s6);align-items:end}
.sechead .lede{font-size:19px}
.idx{display:flex;flex-wrap:wrap;gap:var(--s1)}
.rowg{display:grid;grid-template-columns:416px 832px;gap:var(--s6);align-items:start}
.rowg>.txt{padding-top:var(--s1)}
.txt{display:flex;flex-direction:column;gap:var(--s2)}
.txt .body{max-width:none}
.v3 .goods{display:flex;flex-direction:column;gap:12px;margin-top:var(--s1)}
.v3 .gks{display:flex;flex-direction:column;gap:var(--s1)}
/* hero: C's layout */
.v3 .hero{padding-top:var(--s6)}
.v3 .htext{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:var(--s6);align-items:start;margin-bottom:var(--s5)}
.v3 .hleft{display:flex;flex-direction:column;gap:var(--s4)}
/* Alan 2026-09-28: the heading's first line starts level with the line on the right (cap tops). */
.v3 .htext{--hcap:4px}
.v3 .htext .hright{margin-top:var(--hcap,0px)}
.v3 .h1{font-size:92px}
/* who: each audience is its own card; the section head is set apart by 64 */
.audlist{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s6)}
.audc{padding:var(--s5);display:grid;grid-template-columns:384px 768px;gap:var(--s6);align-items:start}
.audc .anm{display:flex;align-items:center;gap:var(--s2)}
.audc .anm h3{margin:0;font:400 36px/1.1 "Archivo",sans-serif;letter-spacing:-.02em;color:#f4f0e8}
.vis{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.bx{padding:12px}
.bx>.bez{width:100%}
.phones3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);padding:9px}
.phones3 .phone{width:100%;height:392px}
.mus3{display:grid;grid-template-columns:400px minmax(0,1fr);gap:var(--s3);align-items:stretch}
.mus3 .bx{height:100%}
.mus3 .bez{height:100%}
.v3 .mcards{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.v3 .mstage{height:72px}
/* features: one head, an index, then rows parted by an engraved groove */
.frow{padding-top:var(--s6);margin-top:var(--s6);border-top:0;position:relative}
.frow::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:1px;background:#080808;box-shadow:0 1px 0 #262626}
.flab{display:flex;align-items:center;gap:12px}
.flab .print{color:#ece7dd}
.fh3{margin:0;font:400 40px/1.08 "Archivo",sans-serif;letter-spacing:-.022em;color:#f4f0e8;text-wrap:balance}
.v3 .marquee{border-radius:12px}
.v3 .mtile{width:196px;height:110px}
.cc6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.cc6 .ccard .ph{height:120px}
/* everything: tiles with a small moving picture each */
.egrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);margin-top:var(--s5)}
.etile{padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.etile .est{position:relative;height:150px;border-radius:10px;overflow:hidden;display:grid;place-items:center}
.etile .h3{font-size:19px}
.etile .small{font-size:14.5px;color:#aaa49a}
.mbars{display:grid;gap:6px;width:230px}
.mbars .pbars{height:26px;padding:4px 6px}
.kfw{position:relative;width:230px;height:92px}
.kfw .ktrk{position:absolute;left:0;right:0;bottom:10px;height:14px;border-radius:7px;background:#5d53b0;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 10px -2px #8a7dff}
.kfw .kd{top:auto;bottom:13px;margin:0 0 0 -4px}
.kfw .kobj{position:absolute;left:0;top:8px;width:26px;height:26px;margin-left:-13px;border-radius:7px;background:linear-gradient(180deg,#f7f4ed,#cfc9bd);box-shadow:0 0 10px rgba(246,239,227,.25);animation:kobj 4s cubic-bezier(.6,0,.3,1) infinite}
.kfw .kneedle{position:absolute;top:0;bottom:4px;left:0;width:2px;margin-left:-1px;background:#f7f4ed;box-shadow:0 0 8px rgba(247,244,237,.45);animation:kneed 4s linear infinite}
@keyframes kobj{0%{left:6%;top:40px}30%{left:36%;top:6px}60%{left:64%;top:40px}90%,100%{left:94%;top:14px}}
@keyframes kneed{from{left:0}to{left:100%}}
.twin{display:flex;gap:40px;align-items:center}
.turn3{position:relative;width:160px;height:110px;perspective:600px;display:grid;place-items:center}
.turn3 .spin{position:relative;width:160px;height:80px;transform-style:preserve-3d;animation:turn 6s linear infinite}
.turn3 .sl{position:absolute;left:0;right:0;top:0;text-align:center;font:400 72px/1 "Archivo Black",sans-serif;letter-spacing:.02em}
@keyframes turn{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.svgdraw{width:120px;height:120px}
.svgdraw path{fill:none;stroke:#f7f4ed;stroke-width:3;stroke-linejoin:round;stroke-dasharray:640;stroke-dashoffset:640;animation:draw 3.6s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:640}55%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-640}}
.frames{display:flex;gap:6px}
.frames i{display:block;width:34px;height:48px;border-radius:4px;background-color:#161616;background-image:linear-gradient(45deg,#232323 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 75%,#232323 75%),linear-gradient(45deg,#232323 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 75%,#232323 75%);background-size:8px 8px;background-position:0 0,4px 4px;box-shadow:0 0 0 1px #000;position:relative;overflow:hidden}
.frames i::after{content:"";position:absolute;left:9px;top:14px;width:16px;height:16px;border-radius:50%;background:#ef282d;opacity:.9;animation:fr 1.2s steps(1,end) infinite}
.frames i:nth-child(2)::after{animation-delay:-.3s}
.frames i:nth-child(3)::after{animation-delay:-.6s}
.frames i:nth-child(4)::after{animation-delay:-.9s}
@keyframes fr{0%{transform:translateY(-8px)}25%{transform:translateY(0)}50%{transform:translateY(8px)}75%{transform:translateY(0)}}
.x4k{display:flex;flex-direction:column;gap:12px;width:230px}
.pct.s40 span{animation-name:pct40}
@keyframes pct40{from{transform:translateY(0)}to{transform:translateY(-1000px)}}
.cmini{display:flex;gap:10px}
.cmi{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:6px;border-radius:9px;animation:cmi 4.8s steps(1,end) infinite}
.cms{position:relative;display:block;width:66px;height:40px;border-radius:4px;overflow:hidden;background:#000;box-shadow:0 0 0 1px #000}
@keyframes cmi{0%{background:linear-gradient(180deg,#1d1d1d,#161616);box-shadow:inset 0 0 0 1px rgba(247,244,237,.42)}33.3%,100%{background:transparent;box-shadow:none}}
/* makers, trust, pricing, faq, closing, footer */
.mk3{display:grid;grid-template-columns:416px 832px;gap:var(--s6);align-items:center}
.mk3 .bx .bez{height:392px}
.v3 .trust{padding:var(--s5);display:grid;grid-template-columns:auto minmax(0,1fr) 300px;gap:var(--s5);align-items:center}
.v3 .plans2{margin-top:var(--s5);gap:var(--s3)}
.faql{margin-top:var(--s5);padding:var(--s1) var(--s3)}
.faqr{padding:var(--s3) 0;display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:var(--s2);align-items:start;position:relative}
.faqr+.faqr::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:1px;background:#080808;box-shadow:0 1px 0 #262626}
.faqr .q{margin:0;font:400 21px/1.3 "Archivo",sans-serif;color:#f4f0e8}
.faqr .a{grid-column:1/2;margin:12px 0 0;font:400 16px/1.6 "Archivo",sans-serif;color:#aaa49a;max-width:760px}
.faqr .key{align-self:start}
.faqr.more .q{font-size:17px;color:#bdb6aa}
.v3 .close{margin-top:var(--s8);padding:var(--s6);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5);align-items:center}
.footwrap{padding-top:var(--s7);padding-bottom:var(--s5)}
.v3 .foot2{margin:0;padding:var(--s5);grid-template-columns:416px repeat(3,minmax(0,1fr));gap:var(--s6)}
.tC .h1,.tC .h2,.tC .audc .anm h3,.tC .fh3,.tC .aname{font-family:"Doto",monospace;font-weight:800;font-variation-settings:"ROND" 0;letter-spacing:.03em;text-transform:uppercase;color:#f6efe3;text-shadow:0 0 12px rgba(246,239,227,.28)}
.tC .h1{font-size:64px;line-height:1.04}
.tC .h2{font-size:42px;line-height:1.06}
.tC .audc .anm h3{font-size:28px}
.tC .fh3{font-size:30px;line-height:1.1}
.fsheets{position:relative}
.fsh,.fbar{display:none}
.fsh.on,.fbar.on{display:block}
.fsh .sbody{display:grid;gap:14px;padding:0 14px 16px}
.fbars{display:flex;justify-content:center;min-height:86px}
.fcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px;border-radius:10px;background:linear-gradient(180deg,#313131,#252525);box-shadow:0 2px 0 #080808,0 3px 7px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.08);font:400 11px/1 "Martian Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:#a19d94}
.fcard.lat{transform:translateY(2px);background:#0f0f0f;box-shadow:inset 0 2px 7px rgba(0,0,0,.86),inset 0 0 0 1px #000,0 1px 0 rgba(255,255,255,.05);color:#fff;text-shadow:0 0 7px rgba(246,239,227,.55)}
.ffil.rise,.fcap.rise{animation:rise 3s cubic-bezier(.6,0,.3,1) .5s both}
.ffil.rise{transform-origin:0 50%}
@keyframes rise{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.fcap.rise{animation-name:risecap}
@keyframes risecap{from{left:0}to{left:calc(var(--v)*100%)}}
.press1{animation:press1 .5s steps(1,end) 1 both}
@keyframes press1{0%{transform:translateY(2px);background:#0f0f0f}60%,100%{transform:none}}
.textw{height:52px;display:flex;align-items:center;gap:2px;padding:0 14px;font:400 22px/1 "Archivo",sans-serif;color:#f6efe3;letter-spacing:.04em}
.textw .caret{display:block;width:2px;height:24px;background:#f6efe3;animation:blink 1.2s steps(1,end) infinite}
.mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mc{position:relative;display:grid;gap:6px;justify-items:center;padding:6px 6px 8px;border-radius:10px}
.mc.lat{background:#0f0f0f;box-shadow:inset 0 2px 7px rgba(0,0,0,.86),inset 0 0 0 1px #000,0 1px 0 rgba(255,255,255,.05)}
.mc .ms{width:100%;height:48px;display:grid;place-items:center;overflow:hidden}
.mc .abc{font:400 18px/1 "Archivo",sans-serif;color:#8c867d}
.mc .mobj{font:400 18px/1 "Archivo",sans-serif;color:#fff;text-shadow:0 0 7px rgba(246,239,227,.55)}
.mgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.mc .mn{font:400 11px/1.25 "Martian Mono",monospace;letter-spacing:.04em;text-transform:uppercase;color:#a19d94;text-align:center;min-height:28px;display:grid;place-items:center}
.mc.lat .mn{color:#fff;text-shadow:0 0 7px rgba(246,239,227,.55)}
.mc .lamp{top:9px;right:9px}
.mobj.drop{background:none;box-shadow:none;width:auto;height:auto;letter-spacing:.04em;display:flex}
.mobj.drop span{display:inline-block;animation:mdrop 2.4s cubic-bezier(.5,0,.8,.4) infinite}
@keyframes mdrop{0%,20%{transform:translateY(0);opacity:1}70%,100%{transform:translateY(30px);opacity:0}}
.frow2{display:flex;align-items:flex-start;gap:16px}
.rail{display:flex;flex-direction:column;gap:14px;padding-top:12px;width:64px;flex:none;align-items:center}
.rl.lat{color:#fff;text-shadow:0 0 7px rgba(246,239,227,.55)}
.rl.lat .vi{transform:translateY(2px);background:#0f0f0f;box-shadow:inset 0 2px 7px rgba(0,0,0,.86),inset 0 0 0 1px #000,0 1px 0 rgba(255,255,255,.05)}
.rl .cnt{position:absolute;left:6px;bottom:4px;font:400 11px/1 "Martian Mono",monospace;color:#a19d94}
.rl.flash .lamp{background:#ef282d;box-shadow:0 0 8px #ef282d}
.fstage{position:relative;padding:12px 12px 0}
.fov{display:none;position:absolute;left:24px;top:24px;width:248px;padding:10px 10px 12px;flex-direction:column;gap:4px;z-index:2}
.fov.on{display:flex}
.fovh{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 4px 0 6px;margin-bottom:4px}
.fovh .dm{font-size:17px}
.amore{display:contents}
.key.sm{width:28px;height:28px;border-radius:8px}
.fov .print{padding:8px 6px 2px}
.arow{display:flex;align-items:center;gap:10px;height:30px;padding:0 8px;border-radius:8px;font:400 13px/1 "Archivo",sans-serif;color:#ece7dd}
.arow .ic{color:#a19d94}
.arow.lat{background:#0f0f0f;box-shadow:inset 0 2px 7px rgba(0,0,0,.86),inset 0 0 0 1px #000,0 1px 0 rgba(255,255,255,.05);color:#fff;text-shadow:0 0 7px rgba(246,239,227,.55)}
.arow.lat .ic{color:#fff}
.ftl{position:relative;flex:1 1 auto;height:104px;display:grid;grid-template-columns:104px minmax(0,1fr);overflow:hidden}
.ftlab{position:relative;box-shadow:1px 0 0 #1d1d1d}
.ftlab .print{position:absolute;left:12px;right:6px;height:14px;line-height:14px;overflow:hidden;text-overflow:ellipsis}
.ftlan{position:relative;margin:0 10px}
.ftl .ln{position:absolute;height:11px;border-radius:6px}
.ftl .ln.green{background:#248f5e}
.ftl .ln.rose{background:#9c4a63}
.ftl .ln.violet{background:#5d53b0}
.ftl .ln.sky{background:#3f7f9c}
.ftl .ln.amber{background:#a8741a}
.ftl .off{opacity:0}
.ftl .ln.hot{box-shadow:0 0 0 1px rgba(255,194,96,.6),0 0 12px #ffb020}
.ftl .phd{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#f7f4ed;box-shadow:0 0 8px rgba(247,244,237,.45)}
.ftl .phd::before{content:"";position:absolute;top:0;left:-5px;width:12px;height:6px;border-radius:0 0 4px 4px;background:#f7f4ed}
.fdisp .print.ink{max-width:460px;overflow:hidden;text-overflow:ellipsis}


html{background:#0e0e0e;color-scheme:dark}
body{margin:0;background:#0e0e0e}
.pg.site{width:auto;overflow:clip;--gut:64px;--muted:#a19d94;--text:#f6efe3;--bg:#0e0e0e;--accent:#ef282d}
.site .wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--gut)}
.site [id]{scroll-margin-top:24px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fitb{display:flex;flex-direction:column;gap:var(--s3)}
.audc .fitb{width:768px}
.rowg .fitb{width:832px}
.fitw{width:1312px}
.skip{position:absolute;left:16px;top:-80px;z-index:50}
.skip:focus{top:16px}
.nav .links a[aria-current="page"]{background:#0f0f0f;box-shadow:inset 0 2px 7px rgba(0,0,0,.86),inset 0 0 0 1px #000,0 1px 0 rgba(255,255,255,.05);color:#fff;text-shadow:0 0 7px rgba(246,239,227,.55)}
.film2 .fstage{cursor:pointer}
.idle,.idle *{animation-play-state:paused !important}
.site a:focus-visible,.site button:focus-visible,.site summary:focus-visible{outline:2px solid #f7f4ed;outline-offset:3px}
.site button.ccard{border:0;background:none;color:inherit;font:inherit;cursor:pointer}
/* The FAQ: native disclosures, every answer in the page. */
details.faqr{display:block}
details.faqr>summary{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:var(--s2);align-items:start;list-style:none;cursor:pointer;border-radius:8px}
details.faqr>summary::-webkit-details-marker{display:none}
details.faqr .key .ic{transition:transform .2s ease}
details.faqr[open] .key .ic{transform:rotate(180deg)}
a.faqr.more{display:grid}
/* The nav: links fold into a menu key on narrow screens. */
.nav{position:relative}
.nav .menu,.nav .links .msignin,.nav .cta-tight{display:none}
.nav .links a{white-space:nowrap}
.site .site-changelog-bell{width:36px;height:36px;margin:0;border-radius:10px;background:linear-gradient(180deg,#313131,#252525);box-shadow:0 2px 0 #080808,0 3px 7px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.08);color:#ece7dd}
.site .site-changelog-bell svg{width:16px;height:16px}
.site .site-changelog-bell-dot{right:5px;top:5px;width:5px;height:5px;border:0;background:#ef282d;box-shadow:0 0 8px #ef282d}
.tC .h1{font-size:clamp(34px,7vw,64px)}
.tC .h2{font-size:clamp(28px,5vw,42px)}

@media (max-width:1439px){
  .pg.site{--gut:clamp(16px,4.4vw,64px)}
  .rowg,.audc,.mk3{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .sechead,.v3 .htext{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .v3 .trust{grid-template-columns:auto minmax(0,1fr) minmax(0,300px)}
  .v3 .foot2{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
  .egrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1359px){
  .nav .links{display:none}
  .nav .menu{display:inline-flex}
  .nav.open .links{display:flex;position:absolute;z-index:20;top:calc(100% + 8px);right:0;left:0;flex-direction:column;align-items:stretch;gap:4px;margin:0;padding:10px;border-radius:16px;background:linear-gradient(180deg,#1c1c1c,#171717);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px #090909,0 14px 30px rgba(0,0,0,.6)}
  .nav.open .links a{height:44px}
}
@media (max-width:1199px){
  .egrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  .rowg,.audc,.mk3,.sechead,.v3 .htext,.v3 .trust,.v3 .close{grid-template-columns:minmax(0,1fr)}
  .v3 .htext{--hcap:0px}
  .sechead,.v3 .htext,.rowg,.mk3{gap:var(--s4)}
  .audc{padding:var(--s4);gap:var(--s4)}
  .v3 .sec{padding-top:96px}
  .v3 .foot2{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v3 .foot2>:first-child{grid-column:1/-1}
  .keybay{display:none}
}
@media (max-width:759px){
  .egrid,.v3 .plans2{grid-template-columns:minmax(0,1fr)}
  .v3 .sec{padding-top:64px}
  .v3 .hero{padding-top:var(--s5)}
  .v3 .htext{margin-bottom:var(--s4)}
  .v3 .hline{font-size:20px}
  .lede,.sechead .lede{font-size:18px}
  .fh3{font-size:24px}
  .audc,.v3 .trust,.v3 .close,.v3 .foot2{padding:var(--s3)}
  .v3 .foot2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
  .plan .price .dm{font-size:44px}
  .nav{height:64px;padding:0 10px;gap:8px}
  .nav .signin{display:none}
  .nav.open .links .msignin{display:inline-flex}
  /* The phone studio: the film full width, then the object bar and the sheet, then the timeline. */
  .fitw{width:auto}
  .film2{padding:10px;gap:12px}
  .film2 .stop{height:auto;gap:10px;padding:0}
  .film2 .stop>.key{display:none}
  .film2 .fdisp{min-width:0;height:40px;padding:0 12px}
  .film2 .fdisp>.dm{display:none}
  .film2 .fdisp>.print{margin-left:0 !important;min-width:0;overflow:hidden}
  .film2 .fdisp .print.ink{max-width:none}
  .film2 .smid{display:flex;flex-direction:column;align-items:center;gap:12px}
  .film2 .sleft{width:100%;gap:14px}
  .film2 .frow2{display:block;width:100%}
  .film2 .rail{display:none}
  .film2 .fstage{padding:10px}
  .film2 .fstage .bez{width:100% !important;height:auto !important;aspect-ratio:3/2}
  .film2 .fov{zoom:.72;left:16px;top:16px}
  .film2 .amore{display:none}
  .film2 .fbars{width:600px;min-height:0}
  .film2 .fsheets{width:392px}
  .film2 .fl2{width:auto !important;padding:8px;gap:8px}
  .film2 .fl2>.key,.film2 .fl2 .tread.of{display:none}
  .film2 .fl2 .tread{min-width:0;padding:0 10px}
  .film2 .fl2 .tread .dm{font-size:16px}
  .film2 .ftl{grid-template-columns:72px minmax(0,1fr)}
  .film2 .ftlab .print{left:8px}
}
@media (max-width:479px){
  .nav .disp{display:none}
  .nav .cta-full{display:none}
  .nav .cta-tight{display:inline}
  .v3 .foot2{grid-template-columns:minmax(0,1fr)}
}

/* Pages: the product, help and legal pages share these. */
.phead{padding-top:var(--s6);display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:var(--s6);align-items:end}
.phead>.col{gap:var(--s2)}
.tC .phead .h1{font-size:clamp(34px,5vw,56px);line-height:1.06}
.phead .lede{font-size:19px}
.pbody{padding-top:var(--s6)}
.cards2,.cards3{display:grid;gap:var(--s3)}
.cards2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.card .h3{margin:0}
.card .cardh{display:flex;align-items:center;gap:var(--s2)}
.card .dm{font-size:28px;line-height:1}
.prose{max-width:760px;display:flex;flex-direction:column;gap:var(--s2)}
.prose h2{margin:var(--s5) 0 0;font:800 26px/1.15 "Doto",monospace;letter-spacing:.03em;text-transform:uppercase;color:#f6efe3;text-shadow:0 0 12px rgba(246,239,227,.28);text-wrap:balance}
.prose h2:first-child{margin-top:0}
.prose h3{margin:var(--s3) 0 0;font:400 20px/1.35 "Archivo",sans-serif;color:#f4f0e8}
.prose p,.prose li{font:400 17px/1.65 "Archivo",sans-serif;color:#aaa49a;text-wrap:pretty}
.prose ul{list-style:disc;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.prose ol{list-style:decimal;padding-left:1.4em;display:flex;flex-direction:column;gap:6px}
.prose li::marker{color:#6e6a63}
.prose strong,.prose b,.plan li strong{color:#f4f0e8}
.prose a,.card a:not(.key),.phead a:not(.key),.lede a,.body a{color:#f4f0e8;text-decoration:underline;text-decoration-color:#5d5850;text-underline-offset:3px}
.prose a:hover,.card a:not(.key):hover,.lede a:hover,.body a:hover{text-decoration-color:#f4f0e8}
.mailw{height:64px;padding:0 24px;display:inline-flex;align-items:center;gap:14px;border-radius:14px;max-width:100%}
.mailw .dm{font-size:24px;overflow:hidden;text-overflow:ellipsis}
.copytoast{position:fixed;left:0;top:0;z-index:100;pointer-events:none;opacity:0;transition:opacity .2s ease;padding:10px 14px;border-radius:10px;background:#070707;box-shadow:inset 0 2px 7px rgba(0,0,0,.86),inset 0 0 0 1px #000,0 1px 0 rgba(255,255,255,.05);font:400 11px/1 "Martian Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:#f6efe3;white-space:nowrap}
.copytoast.on{opacity:1}
@media (max-width:1023px){
  .phead{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .cards3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:759px){
  .cards2,.cards3{grid-template-columns:minmax(0,1fr)}
  .card{padding:var(--s3)}
  .phead,.pbody{padding-top:var(--s5)}
  .mailw{height:56px;padding:0 16px}
  .mailw .dm{font-size:18px}
}