/* REK. — Performance Recorder
   Compiled from the "REK Site v5" Claude Design canvas. */

:root{
  --bg:#0a0a09;
  --bg-alt:#0c0c0b;
  --panel:#1b1a18;

  --ink:#f5f4f0;
  --ink-2:#bdbab4;
  --body:#a09d97;
  --muted:#807c76;
  --nav:#8b8781;
  --meta:#77746e;
  --foot:#6d6a64;
  --dim:#57544f;

  --red:oklch(0.66 0.19 22);
  --red-2:oklch(0.62 0.19 22);
  --red-3:oklch(0.6 0.195 22);
  --red-hi:oklch(0.66 0.195 22);
  --red-lo:oklch(0.54 0.195 22);
  --red-edge:oklch(0.4 0.137 22);
  --red-hover:oklch(0.7 0.18 22);
  --teal:#3da3a8;

  --hair:rgba(255,255,255,.08);
  --hair-2:rgba(255,255,255,.12);
  --hair-3:rgba(255,255,255,.15);

  --shell:1180px;
  --pad:26px;
  --header-h:56px;

  --sans:Archivo,Helvetica,Arial,sans-serif;
  --pixel:Silkscreen,ui-monospace,SFMono-Regular,Menlo,monospace;
  --seg:DSEG7,ui-monospace,SFMono-Regular,Menlo,monospace;
}

@font-face{
  font-family:'DSEG7';
  font-weight:700;
  font-display:swap;
  src:url('https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2') format('woff2');
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-tap-highlight-color:rgba(216,72,63,.25);
}

img{max-width:100%;height:auto;display:block}

a{color:var(--ink);text-decoration:none}

:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.shell{
  max-width:var(--shell);margin:0 auto;
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
}

/* Anchor targets must clear the sticky header */
#features,#specs,#faq,#get,section[id]{scroll-margin-top:calc(var(--header-h) + 12px)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:10px 16px;background:var(--red-hi);color:#fff;
  font:700 13px/1 var(--sans);
}
.skip-link:focus{left:0}

/* ---------- Header ---------- */

.site-header{
  position:sticky;top:0;z-index:30;
  background:rgba(10,10,9,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.site-header .shell{
  padding-top:12px;padding-bottom:12px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:11px}
.brand-text{display:flex;flex-direction:column;gap:4px}
.brand-name{font:700 14px/1 var(--sans);letter-spacing:.02em;color:var(--ink)}
.brand-sub{font:400 6.5px/1 var(--pixel);letter-spacing:.14em;color:var(--meta)}

/* The RekMark logo, resolved at 28px from the design component */
.mark{
  width:28px;height:28px;flex:none;border-radius:6.26px;
  background:linear-gradient(180deg,var(--red-hi),var(--red-lo));
  position:relative;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  box-shadow:
    inset 0 .56px 0 rgba(255,255,255,.28),
    inset 0 -2.1px 0 var(--red-edge),
    inset 0 -3.64px 2.8px rgba(0,0,0,.14);
}
.mark span{
  font:700 8.82px/1 var(--sans);
  letter-spacing:-.4px;
  color:#fff;
  transform:translate(.2px,-.9px);
}

.header-right{display:flex;align-items:center;gap:22px}
.nav{display:flex;align-items:center;gap:20px}
.nav a{font:400 8px/1 var(--pixel);letter-spacing:.04em;color:var(--nav)}
.nav a:hover{color:var(--ink)}

.btn-mini{
  padding:9px 15px 8px;border-radius:3px;
  background:linear-gradient(180deg,var(--red-hi),var(--red-lo));
  border:1px solid var(--red-edge);
  font:700 12px/1 var(--sans);color:#fff;
}
.btn-mini:active{transform:translateY(1px)}

/* ---------- Shared pieces ---------- */

.eyebrow{display:flex;align-items:center;gap:9px}
.eyebrow i{width:9px;height:9px;flex:none;background:var(--red);display:block}
.eyebrow span{font:400 8px/1 var(--pixel);letter-spacing:.1em;color:var(--red)}

.fig{display:flex;align-items:center;gap:9px}
.fig i{width:9px;height:9px;flex:none;background:var(--red-2);display:block}
.fig span{font:400 8px/1 var(--pixel);letter-spacing:.09em;color:var(--red-2)}
.fig--teal i{background:var(--teal)}
.fig--teal span{color:var(--teal)}

.muted{color:var(--muted)}

/* Three dashed rules, fading */
.bars{display:flex;flex-direction:column;gap:3px;max-width:320px}
.bars i{
  display:block;height:9px;
  background:repeating-linear-gradient(90deg,var(--red-2) 0 9px,transparent 9px 18px);
}
.bars i:nth-child(2){
  background:repeating-linear-gradient(90deg,transparent 0 9px,var(--red-2) 9px 18px);
  opacity:.5;
}
.bars i:nth-child(3){opacity:.18}


.cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cta-meta{font:400 7.5px/1.9 var(--pixel);color:var(--meta)}

.grid-overlay{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:16px 16px;
}
.grid-overlay--soft{
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
}
.vignette{position:absolute;inset:0;pointer-events:none}

.phone{
  width:100%;max-width:300px;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.75));
}

/* ---------- Hero ---------- */

.hero{
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--hair);
  background:radial-gradient(120% 90% at 78% 25%,#242220 0%,#131211 45%,#0a0a09 100%);
}
.hero .vignette{
  background:radial-gradient(120% 100% at 50% 40%,rgba(10,10,9,0) 20%,rgba(10,10,9,.75) 85%);
}
.hero .shell{
  position:relative;
  display:grid;grid-template-columns:minmax(320px,1fr) minmax(280px,.9fr);
  gap:34px;align-items:center;
}
.hero-copy{padding:86px 0 96px;display:flex;flex-direction:column;gap:26px;min-width:0}
.hero h1{
  margin:0;
  font:700 clamp(28px,4.1vw,52px)/1.3 var(--pixel);
  letter-spacing:.005em;color:var(--ink);
}
.lede{margin:0;max-width:46ch;font:400 17px/1.55 var(--sans);color:var(--body);text-wrap:pretty}
.hero-media{
  position:relative;min-width:0;
  display:flex;justify-content:center;align-items:center;
  padding:56px 0 60px;
}

.hero-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border-top:1px solid var(--hair-2);margin-top:6px;
}
.stat{display:flex;flex-direction:column;gap:9px;padding:18px 22px 0 0}
.stat:last-child{padding-right:0}
.stat b{font:400 7px/1 var(--pixel);letter-spacing:.1em;color:var(--red-2)}
.stat span{font:500 15px/1.4 var(--sans);color:var(--ink-2);text-wrap:pretty}

/* ---------- Feature rows ---------- */

.row{border-bottom:1px solid var(--hair);background:var(--bg)}
.row--alt{background:var(--bg-alt)}
.row .shell{
  padding-top:74px;padding-bottom:74px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:44px;align-items:center;
}
.row-media{display:flex;justify-content:center;min-width:0}
.row-copy{display:flex;flex-direction:column;gap:16px;min-width:0}
.row h2{
  margin:0;
  font:700 clamp(30px,3.7vw,50px)/1.02 var(--sans);
  letter-spacing:-.035em;color:var(--ink);text-wrap:balance;
}
.row p:not(.fig):not(.note){margin:0;max-width:42ch;font:400 16px/1.6 var(--sans);color:var(--body);text-wrap:pretty}
.note{font:400 7.5px/1.8 var(--pixel);color:var(--dim)}

/* Copy-first rows keep the design's alternating rhythm */
.row--flip .row-copy{order:1}
.row--flip .row-media{order:2}

/* LCD detail plate with corner marks */
.lcd{
  position:relative;padding:9px;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 20px 50px rgba(0,0,0,.55);
  max-width:380px;width:100%;
}
.lcd::before,.lcd::after{
  content:"";position:absolute;width:8px;height:8px;background:var(--red-2);
}
.lcd::before{top:-4px;left:-4px}
.lcd::after{bottom:-4px;right:-4px}

/* ---------- Trio ---------- */

.trio .shell{
  padding-top:74px;padding-bottom:74px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:38px;align-items:start;
}
.trio-item{display:flex;flex-direction:column;gap:13px;min-width:0}
.trio-item .fig i{width:8px;height:8px}
.trio-item h3{margin:0;font:700 22px/1.1 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.trio-item p:not(.fig){margin:0;font:400 15px/1.6 var(--sans);color:var(--body);text-wrap:pretty}

/* ---------- Appearance ---------- */

.appearance{position:relative;overflow:hidden;border-bottom:1px solid var(--hair);background:var(--bg-alt)}
.appearance .shell{
  position:relative;
  padding-top:74px;padding-bottom:74px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:44px;align-items:center;
}
.appearance-copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.appearance h2{
  margin:0;
  font:700 clamp(26px,3.2vw,40px)/1.28 var(--pixel);
  letter-spacing:.005em;color:var(--ink);
}
.appearance h2 span{color:var(--teal)}
.appearance p:not(.fig){margin:0;max-width:42ch;font:400 16px/1.6 var(--sans);color:var(--body);text-wrap:pretty}
.swatches{display:flex;gap:5px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.swatches li{width:34px;height:17px}

/* ---------- Manifesto ---------- */

.manifesto{border-bottom:1px solid var(--hair);background:var(--bg-alt)}
.manifesto .shell{
  padding-top:96px;padding-bottom:96px;
  display:flex;flex-direction:column;gap:22px;align-items:flex-start;
}
.manifesto h2{
  margin:0;
  font:700 clamp(24px,3.4vw,44px)/1.3 var(--pixel);
  letter-spacing:.005em;color:var(--ink);
}
.manifesto h2 span{color:var(--red-3)}
.manifesto p:not(.eyebrow){margin:0;max-width:52ch;font:400 17px/1.6 var(--sans);color:var(--body)}

/* ---------- Section headings ---------- */

.section-head{display:flex;align-items:baseline;gap:14px}
.section-head b{font:700 20px/1 var(--seg);color:var(--red-2)}
.section-head h2{
  margin:0;font:700 26px/1 var(--sans);
  letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);
}

/* ---------- Specs ---------- */

.specs{border-bottom:1px solid var(--hair)}
.specs .shell{padding-top:78px;padding-bottom:78px}
.specs .section-head{margin-bottom:38px}
.spec-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px}
.spec-col{display:flex;flex-direction:column;gap:14px}
.spec-col h3{
  margin:0;padding-bottom:11px;border-bottom:1px solid var(--hair-3);
  font:400 8px/1 var(--pixel);letter-spacing:.08em;color:var(--red-2);
}
.spec-col ul{display:flex;flex-direction:column;gap:9px;list-style:none;margin:0;padding:0}
.spec-col li{font:400 14.5px/1.35 var(--sans);color:var(--ink-2)}

/* ---------- FAQ ---------- */

.faq{border-bottom:1px solid var(--hair);background:var(--bg-alt)}
.faq .shell{max-width:860px;padding-top:78px;padding-bottom:78px}
.faq .section-head{margin-bottom:26px}
.faq-list{display:flex;flex-direction:column}

.faq-item{border-top:1px solid var(--hair-2)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 2px;cursor:pointer;list-style:none;
  font:600 17px/1.35 var(--sans);color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--red-hover)}
.faq-item .sign{flex:none;font:400 15px/1 var(--pixel);color:var(--red-2)}
.faq-item .sign::before{content:"+"}
.faq-item[open] .sign::before{content:"\2013"}
.faq-item p{
  margin:0;padding:0 60px 22px 2px;
  font:400 15.5px/1.65 var(--sans);color:var(--body);text-wrap:pretty;
}

/* ---------- Closing CTA ---------- */

.get{
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--hair);
  background:radial-gradient(110% 100% at 22% 30%,#242220 0%,#131211 48%,#0a0a09 100%);
}
.get .vignette{
  background:radial-gradient(120% 100% at 40% 50%,rgba(10,10,9,0) 15%,rgba(10,10,9,.7) 85%);
}
.get .shell{
  position:relative;
  display:grid;grid-template-columns:minmax(260px,.85fr) minmax(300px,1fr);
  gap:34px;align-items:center;
}
.get-media{display:flex;justify-content:center;min-width:0;padding:56px 0}
.get-media .phone{max-width:280px}
.get-copy{padding:92px 0 100px;display:flex;flex-direction:column;gap:24px;min-width:0}
.get h2{
  margin:0;
  font:700 clamp(26px,3.6vw,46px)/1.3 var(--pixel);
  letter-spacing:.005em;color:var(--ink);
}
.get .bars{max-width:300px}
.get p:not(.cta-meta):not(.tier){margin:0;max-width:38ch;font:400 17px/1.55 var(--sans);color:var(--body)}

/* ---------- Footer ---------- */

.site-footer .shell{
  padding-top:26px;padding-bottom:26px;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.colophon{font:400 7.5px/1.7 var(--pixel);color:var(--dim)}
.foot-links{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot-links a{font:400 7.5px/1 var(--pixel);color:var(--foot)}
.foot-links a:hover{color:var(--ink)}

/* ---------- App Store badge + pricing tiers ---------- */

.badge-link{display:inline-block;flex:none}
.badge-link img{width:180px;height:auto;display:block}
.badge-link:active{transform:translateY(1px)}

.tiers{display:flex;flex-direction:column;gap:7px;min-width:0}
.tier{margin:0;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.tier > b{font:700 30px/1 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.tier > span{font:500 15px/1.2 var(--sans);color:var(--ink-2)}
.tier--free > b{font:700 19px/1 var(--sans);letter-spacing:-.02em;color:oklch(0.68 0.19 22)}
.tier--free > span{color:var(--nav)}
.tiers > .cta-meta{margin-top:4px}

/* ---------- Dark / light drag-to-reveal ---------- */

.reveal{margin:0;width:100%;max-width:300px}
.reveal-stage{
  position:relative;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.75));
  /* pan-y keeps vertical page scrolling native while horizontal drags
     are delivered to the pointer handlers */
  touch-action:pan-y;
  cursor:ew-resize;
  -webkit-user-select:none;user-select:none;
}
.reveal-stage img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.reveal-base{display:block;width:100%;height:auto}
.reveal-clip{
  position:absolute;top:0;left:0;width:100%;height:100%;
  clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0);
}
.reveal-clip img{display:block;width:100%;height:100%;object-fit:contain}
.reveal-bar{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);
  width:2px;margin-left:-1px;background:var(--red);
  box-shadow:0 0 0 1px rgba(0,0,0,.55);
  pointer-events:none;
}
.reveal-range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;background:none;
  -webkit-appearance:none;appearance:none;
  /* Keyboard affordance only — pointer dragging is handled on .reveal-stage.
     Left interactive, it intercepts touches and only ever jumps to the tap. */
  pointer-events:none;
}
.reveal-range::-webkit-slider-thumb{-webkit-appearance:none;width:48px;height:100%;cursor:ew-resize}
.reveal-range::-moz-range-thumb{width:48px;height:100%;border:0;border-radius:0;cursor:ew-resize}
.reveal-range:focus-visible{opacity:1;outline:2px solid var(--red);outline-offset:4px}

.reveal-legend{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:16px;
}
.reveal-legend span{font:400 7px/1 var(--pixel);letter-spacing:.1em;color:var(--dim)}
.reveal-legend .hl{color:var(--red-2)}

/* ---------- Gear: device switcher ----------
   Radio inputs drive the whole thing through :has(), so switching devices,
   the active tab and the counter all work with JavaScript disabled. */

.gear{position:relative;overflow:hidden;border-bottom:1px solid var(--hair);background:var(--bg)}
.gear .shell{
  position:relative;
  padding-top:74px;padding-bottom:74px;
  display:flex;flex-direction:column;gap:34px;
}

.gear-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;align-items:end}
.gear-intro{display:flex;flex-direction:column;gap:16px;min-width:0}
.gear-intro > h2{
  margin:0;font:700 clamp(28px,3.4vw,44px)/1.06 var(--sans);
  letter-spacing:-.035em;color:var(--ink);text-wrap:balance;
}
.gear-blurb{display:flex;flex-direction:column;gap:14px;min-width:0}
.gear-blurb > p:not(.note){margin:0;max-width:48ch;font:400 16px/1.6 var(--sans);color:var(--body);text-wrap:pretty}
.gear-blurb > .note{margin:0}

.switch{display:flex;flex-direction:column;gap:22px}

.stage{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px;
  padding:26px;background:#0e0e0d;border:1px solid rgba(255,255,255,.1);
}

/* SOURCE panel */
.source{
  position:relative;flex:1 1 300px;aspect-ratio:4/3;
  border:1px solid rgba(255,255,255,.09);
  background:radial-gradient(70% 70% at 50% 45%,#1a1918 0%,#0e0e0d 100%);
}
.source-label{
  position:absolute;top:8px;left:10px;
  font:400 7px/1 var(--pixel);letter-spacing:.1em;color:var(--dim);
}
.source-stack{position:absolute;top:26px;right:22px;bottom:22px;left:22px}
.source-layer{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .13s linear;
  filter:grayscale(.9) contrast(1.05) brightness(.93) sepia(.2) hue-rotate(-12deg) saturate(1.25)
         drop-shadow(0 16px 26px rgba(0,0,0,.6));
}

/* USB-C cable */
.link{flex:0 0 138px;display:flex;flex-direction:column;align-items:center;gap:10px}
.link-label{font:400 7px/1 var(--pixel);letter-spacing:.1em;color:var(--dim)}
.link-label--in{color:var(--red-2)}
.link-cable{display:flex;align-items:center;width:100%;height:12px}
.link-body{
  flex:0 0 auto;width:20px;height:12px;border-radius:6px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(#4a4744 0%,#2a2825 55%,#161513 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.6);
}
.link-pin{flex:0 0 auto;width:7px;height:8px;border-radius:1px;background:linear-gradient(#2e2c29,#131211)}
.link-wire{
  position:relative;flex:1 1 0;height:5px;border-radius:3px;
  background:linear-gradient(#312f2c,#1a1917);
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.6);
}
.link-flow{
  position:absolute;inset:1px 0;
  background:repeating-linear-gradient(90deg,var(--red-2) 0 6px,transparent 6px 12px);
  background-size:12px 3px;
  animation:rekflow .45s linear infinite;
}
@keyframes rekflow{to{background-position:12px 0}}

/* The phone */
.target{position:relative;flex:0 0 168px;height:354px}
.target-layer{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .13s linear;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.7));
}

/* Controls */
.gear-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.gear-tabs{display:flex;gap:8px;flex-wrap:wrap}
.gear-tab{display:inline-flex}
.gear-tab input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.gear-tab label{
  display:block;cursor:pointer;padding:8px 11px 7px;border-radius:2px;
  border:1px solid rgba(255,255,255,.14);
  font:400 7.5px/1 var(--pixel);letter-spacing:.06em;color:var(--foot);
  transition:background .13s linear,border-color .13s linear,color .13s linear;
}
.gear-tab label:hover{color:var(--ink-2);border-color:rgba(255,255,255,.3)}
.gear-tab input:checked + label{background:var(--red-2);border-color:var(--red-2);color:#fff}
.gear-tab input:focus-visible + label{outline:2px solid var(--red);outline-offset:2px}

.gear-count{margin:0;display:flex;align-items:baseline;gap:10px}
.gear-count b{font:700 22px/1 var(--seg);color:var(--red-2)}
.gear-count span{font:400 7.5px/1 var(--pixel);color:var(--dim)}

.gear-disclaimer{margin:0;max-width:78ch;font:400 11.5px/1.6 var(--sans);color:var(--dim)}

/* Fallback for engines without :has(). Must be gated by @supports — left
   unconditional it stacks device 1 permanently on top of the selected one. */
@supports not selector(:has(*)){
  .source-layer:first-child,.target-layer:first-child{opacity:1}
}

.switch:has(#dev-1:checked) .source-layer:nth-child(1),
.switch:has(#dev-2:checked) .source-layer:nth-child(2),
.switch:has(#dev-3:checked) .source-layer:nth-child(3),
.switch:has(#dev-4:checked) .source-layer:nth-child(4),
.switch:has(#dev-5:checked) .source-layer:nth-child(5){opacity:1}

.switch:has(#dev-1:checked) .target-layer:nth-child(1),
.switch:has(#dev-2:checked) .target-layer:nth-child(2),
.switch:has(#dev-3:checked) .target-layer:nth-child(1),
.switch:has(#dev-4:checked) .target-layer:nth-child(2),
.switch:has(#dev-5:checked) .target-layer:nth-child(1){opacity:1}

.switch:has(#dev-1:checked) .gear-count b::after{content:"01"}
.switch:has(#dev-2:checked) .gear-count b::after{content:"02"}
.switch:has(#dev-3:checked) .gear-count b::after{content:"03"}
.switch:has(#dev-4:checked) .gear-count b::after{content:"04"}
.switch:has(#dev-5:checked) .gear-count b::after{content:"05"}

/* ---------- Document pages (Support, Privacy) ----------
   Prose rules use direct-child selectors on purpose: a bare `.doc p` would
   outrank the single-class utilities (.updated, .faq-item p) the same way
   `.get p` once clobbered `.cta-meta`. */

.doc-hero{
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--hair);
  background:radial-gradient(120% 90% at 78% 25%,#242220 0%,#131211 45%,#0a0a09 100%);
}
.doc-hero .shell{
  position:relative;max-width:860px;
  padding-top:72px;padding-bottom:60px;
  display:flex;flex-direction:column;gap:20px;align-items:flex-start;
}
.doc-hero h1{
  margin:0;
  font:700 clamp(26px,3.6vw,42px)/1.3 var(--pixel);
  letter-spacing:.005em;color:var(--ink);
}
.doc-hero h1 span{color:var(--muted)}
.doc-hero > .shell > .lede{max-width:54ch}

.doc{border-bottom:1px solid var(--hair);background:var(--bg)}
.doc--alt{background:var(--bg-alt)}
.doc .shell{max-width:860px;padding-top:60px;padding-bottom:60px}
.doc .section-head{margin-bottom:26px}

.doc-block > * + *{margin-top:14px}
.doc-block + .doc-block{margin-top:40px}

.doc-block > h3{
  margin:0;font:700 18px/1.3 var(--sans);
  letter-spacing:-.015em;color:var(--ink);
}
.doc-block > h3:not(:first-child){margin-top:30px}
.doc-block > p:not(.updated){margin:0;font:400 16px/1.65 var(--sans);color:var(--body);text-wrap:pretty}
.doc-block > .updated{margin-top:28px}
.doc-block > ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.doc-block > ul > li{font:400 15.5px/1.55 var(--sans);color:var(--ink-2)}
.doc-block > ul > li::marker{color:var(--red-2)}
.doc-block a{color:var(--red-hover);text-decoration:underline;text-underline-offset:3px}
.doc-block a:hover{color:var(--ink)}

.callout{
  padding:22px 24px;
  background:var(--bg-alt);
  border:1px solid var(--hair-2);
  border-left:3px solid var(--red-2);
}
.doc--alt .callout{background:var(--bg)}
.callout > * + *{margin-top:10px}
.callout > p{margin:0;font:500 16px/1.6 var(--sans);color:var(--ink-2)}
.callout > p > a{display:inline-block;padding:2px 0;font-size:17px}
.callout > b{display:block;font:400 8px/1 var(--pixel);letter-spacing:.09em;color:var(--red-2)}

.updated{margin:0;font:400 7.5px/1.8 var(--pixel);color:var(--dim)}

/* ---------- Responsive ----------
   The canvas is a desktop artboard; these are the stacking rules it implies. */

@media (max-width:900px){
  .hero .shell,.get .shell{grid-template-columns:1fr}

  /* Stacked, the hero would push the product shot ~1500px down the page:
     headline, paragraph, button and both stat cells all come first. Dissolve
     .hero-copy into the grid so the screenshot can sit directly under the
     headline, the way it sits beside it on the desktop artboard. */
  .hero .shell{row-gap:26px;padding-top:60px;padding-bottom:68px}
  .hero-copy{display:contents}
  .hero-copy > .eyebrow{order:1}
  .hero-copy > h1{order:2}
  .hero-copy > .bars{order:3}
  .hero-media{order:4;padding:0}
  .hero-copy > .lede{order:5}
  .hero-copy > .cta-row{order:6}
  .hero-copy > .hero-stats{order:7}

  .get-copy{padding:64px 0 12px;order:1}
  .get-media{padding:12px 0 64px;order:2}
}

@media (max-width:720px){
  :root{--pad:20px}
  .gear .shell{padding-top:56px;padding-bottom:56px}
  .stage{padding:16px;gap:16px}
  /* The design's 25px tabs are a cursor target; give thumbs 44px */
  .gear-tab label{display:flex;align-items:center;min-height:44px}
  .source-stack{top:22px;right:14px;bottom:14px;left:14px}
  .target{flex:0 0 132px;height:278px}
  .link{flex:0 0 110px}
  .row .shell,.trio .shell,.appearance .shell{padding-top:56px;padding-bottom:56px}
  .specs .shell,.faq .shell{padding-top:56px;padding-bottom:56px}
  .manifesto .shell{padding-top:68px;padding-bottom:68px}
  .faq-item p{padding-right:24px}
  .stat{padding-right:0}

  /* 8px-tall links are fine with a cursor, not with a thumb */
  .foot-links a{padding:18px 4px}
  .callout > p > a{padding:13px 0}
  .site-footer .shell{gap:4px}
}

/* Below 560px the header becomes two rows: the lockup and Download on top,
   the section links on their own full-width row underneath. Nothing is
   hidden, and no JavaScript drawer is involved. */
@media (max-width:560px){
  :root{--header-h:112px}

  /* Badge and tiers side by side leave the tier text ~135px — stack instead */
  .cta-row{flex-direction:column;align-items:flex-start;gap:18px}

  .site-header .shell{flex-wrap:wrap;row-gap:0;padding-bottom:0}
  .header-right{display:contents}

  .brand{order:1;padding:8px 0}
  .btn-mini{order:2;display:inline-flex;align-items:center;min-height:44px}

  .nav{
    order:3;width:100%;
    justify-content:space-between;gap:0;
    margin-top:10px;
    border-top:1px solid rgba(255,255,255,.09);
  }
  .nav a{flex:1;padding:18px 4px;text-align:center}
}

@media (max-width:380px){
  .brand-sub{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}