:root{
  /* Straight out of scripts/plate.swift, so the site and the App Store
     screenshots are the same object rather than two takes on a theme. */
  --ink:#06080C;
  --ink2:#0C1016;
  --amber:#FF8A3D;
  --bone:#F4F6F8;
  --mute:#7F8A99;
  --rule:rgba(244,246,248,.11);
  --panel:rgba(244,246,248,.035);

  --display:"HelveticaNeue-CondensedBlack","Helvetica Neue Condensed Black",
            "HelveticaNeue-Condensed","Helvetica Neue",
            "Arial Narrow",Haettenschweiler,Impact,sans-serif;
  --body:"Helvetica Neue",Helvetica,-apple-system,BlinkMacSystemFont,
         "Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --gutter:clamp(20px,6.1vw,88px);
  --max:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font:400 17px/1.55 var(--body);
  color:var(--bone);
  background:var(--ink);
  background-image:linear-gradient(var(--ink2),var(--ink) 900px);
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto or the HTML height attribute wins over width:100% and
   every screenshot gets stretched to its intrinsic 795px. */
img{max-width:100%;display:block;height:auto}
a{color:inherit}

.shell{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ---------------------------------------------------------------- type -- */
.eyebrow{
  font:600 12px/1 var(--mono);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--amber);
  display:block;
  margin-bottom:18px;
}
.eyebrow::before{content:"✛\00a0\00a0"}
.display{
  font-family:var(--display);
  font-weight:900;
  font-stretch:condensed;
  text-transform:uppercase;
  letter-spacing:-.005em;
  line-height:.92;
  color:#fff;
}
/* The lower bound is set by "YOUR CROSSHAIR," fitting on one line at 360px,
   so the manual break in the markup stays a break and not a third line. */
h1.display{font-size:clamp(2.5rem,8.4vw,5.5rem)}
h2.display{font-size:clamp(2.1rem,5.6vw,3.5rem)}
.sub{
  color:var(--mute);
  font-size:clamp(1rem,2.1vw,1.2rem);
  margin-top:16px;
  max-width:34em;
}
.telemetry{
  font:600 12px/1.8 var(--mono);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mute);
}

/* ------------------------------------------------------------- topbar -- */
.topbar{
  border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:20;
  background:rgba(6,8,12,.82);
  backdrop-filter:saturate(140%) blur(14px);
}
.topbar .shell{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;height:58px;
}
.wordmark{
  display:flex;align-items:center;gap:10px;
  font:600 13px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;
}
.wordmark img{width:22px;height:22px;border-radius:5px}
.topbar nav{display:flex;align-items:center;gap:22px}
.topbar nav a{
  font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);text-decoration:none;
}
.topbar nav a:hover{color:var(--bone)}
@media (max-width:620px){.topbar nav a.hide-sm{display:none}}

/* --------------------------------------------------------------- hero -- */
/* padding-top, never the shorthand: these classes sit on the same elements as
   .shell and a shorthand here silently wipes out its left/right gutter. */
.hero{padding-top:clamp(56px,10vw,112px)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font:600 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  padding:15px 22px;border-radius:3px;text-decoration:none;
  border:1px solid transparent;transition:transform .12s ease,background .12s ease;
}
.btn-solid{background:var(--amber);color:#120800;font-weight:700}
.btn-solid:hover{background:#FFA05F}
.btn-line{border-color:var(--rule);color:var(--bone)}
.btn-line:hover{border-color:var(--bone)}
.btn:active{transform:translateY(1px)}
/* A channel that has not opened yet reads as "not yet", not as "broken":
   the amber survives, the fill does not. */
.btn[aria-disabled="true"]{
  background:transparent;color:var(--amber);
  border-color:rgba(255,138,61,.42);
  cursor:not-allowed;pointer-events:none;
}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* --------------------------------------------------- the framed shots -- */
/* The bracket corners are the one device carried over from the App Store
   plates. They are drawn, not decorated on: four L-shapes, 3px, amber. */
.frame{position:relative;margin-top:clamp(34px,6vw,58px)}
.frame img{border-radius:6px;width:100%;height:auto}
.frame::before,.frame::after,
.frame>.brk::before,.frame>.brk::after{
  content:"";position:absolute;width:34px;height:34px;
  border:3px solid var(--amber);pointer-events:none;
}
.frame::before{top:-13px;left:-13px;border-right:0;border-bottom:0}
.frame::after{top:-13px;right:-13px;border-left:0;border-bottom:0}
.frame>.brk::before{bottom:-13px;left:-13px;border-right:0;border-top:0}
.frame>.brk::after{bottom:-13px;right:-13px;border-left:0;border-top:0}
@media (max-width:620px){
  /* Tuck the brackets in on narrow screens: at -13px they hang past the
     gutter and give the page 13px of horizontal scroll. */
  .frame::before,.frame::after,
  .frame>.brk::before,.frame>.brk::after{width:20px;height:20px;border-width:2px}
  .frame::before{top:-8px;left:-8px}
  .frame::after{top:-8px;right:-8px}
  .frame>.brk::before{bottom:-8px;left:-8px}
  .frame>.brk::after{bottom:-8px;right:-8px}
}

/* ------------------------------------------------- the live crosshair -- */
/* The page puts a reticle on top of itself. It is the product, running,
   before anyone has paid for it. */
.stage{cursor:crosshair;touch-action:pan-y}
.stage svg{
  position:absolute;width:64px;height:64px;left:0;top:0;
  pointer-events:none;
  transform:translate3d(-100px,-100px,0);
  will-change:transform;
}
.hud{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;
  margin-top:26px;
}
.hud-label{
  font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);background:var(--panel);
  border:1px solid var(--rule);border-radius:3px;
  padding:9px 13px;cursor:pointer;
}
.chip:hover{color:var(--bone)}
.chip[aria-pressed="true"]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.dots{display:flex;flex-wrap:wrap;gap:8px}
.dot{
  width:22px;height:22px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;background-clip:padding-box;
}
.dot[aria-pressed="true"]{border-color:var(--bone)}

/* ------------------------------------------------------------ blocks -- */
.block{padding-top:clamp(80px,13vw,150px)}
.block .telemetry{margin-top:20px;text-align:right}
@media (max-width:620px){.block .telemetry{text-align:left}}

/* ------------------------------------------------------------- claim -- */
/* The rule is a ::before, not a border. A border on .shell would span its
   gutter too and sit wider than every other rule on the page. */
.claim{margin-top:clamp(90px,14vw,160px)}
.claim::before{
  content:"";display:block;height:1px;background:var(--amber);
  margin-bottom:clamp(44px,7vw,72px);
}
.claim p{max-width:36em;color:var(--mute);margin-top:18px}
.claim strong{color:var(--bone);font-weight:400}
.facts{
  display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:44px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.facts div{background:var(--ink);padding:24px 22px}
.facts dt{
  font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);margin-bottom:12px;
}
.facts dd{color:var(--mute);font-size:15px;line-height:1.6}

/* -------------------------------------------------------------- spec -- */
.spec{margin-top:clamp(80px,12vw,140px);border-top:1px solid var(--rule)}
.spec .row{
  display:grid;grid-template-columns:minmax(150px,220px) 1fr;
  gap:10px 32px;padding:20px 0;border-bottom:1px solid var(--rule);
}
.spec dt{
  font:600 11px/1.7 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);
}
.spec dd{color:var(--bone);font-size:15.5px}
.spec dd em{color:var(--mute);font-style:normal}
@media (max-width:620px){.spec .row{grid-template-columns:1fr;padding:16px 0}}
kbd{
  font:600 12px/1 var(--mono);background:var(--panel);
  border:1px solid var(--rule);border-radius:4px;padding:4px 7px;
}

/* --------------------------------------------------------------- buy -- */
.buy{
  margin-top:clamp(80px,12vw,140px);
  border:1px solid var(--rule);padding:clamp(34px,5.5vw,58px);
}
.price{
  font-family:var(--display);font-weight:900;font-stretch:condensed;
  font-size:clamp(2.6rem,7vw,4.2rem);line-height:.9;color:#fff;
}
.price span{
  font:600 13px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);display:block;margin-top:16px;
}
.buy .note{color:var(--mute);font-size:15px;margin-top:26px;max-width:34em}
.status{
  font:600 11px/1.9 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber);margin-top:22px;
}

/* ------------------------------------------------------------ footer -- */
/* footer.shell, not footer: .shell sets `margin:0 auto` and a bare element
   selector loses to it, which pins the footer flush against the buy box. */
footer.shell{
  margin-top:clamp(70px,10vw,120px);
  padding-bottom:70px;
  color:var(--mute);font-size:13.5px;line-height:1.75;
}
footer.shell::before{
  content:"";display:block;height:1px;background:var(--rule);margin-bottom:40px;
}
footer a{color:var(--mute)}
footer a:hover{color:var(--bone)}
footer .legal{margin-top:14px;font-size:12.5px;opacity:.8;max-width:52em}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ------------------------------------------------------- prose pages -- */
/* Privacy and anything else that is mostly words. Narrow measure, hairline
   rules instead of cards: the same furniture as the spec table. */
.prose{max-width:640px;padding-top:clamp(48px,8vw,84px)}
/* Left-aligned, not centred: the wordmark and every heading on the
   home page start at the same rule, and a legal page is no exception. */
.prose h1.display{font-size:clamp(2.4rem,7vw,3.6rem)}
.prose .lead{color:var(--mute);font-size:1.1rem;margin-top:26px}
.prose section{border-top:1px solid var(--rule);padding-top:26px;margin-top:34px}
.prose h2{
  font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);font-weight:600;margin-bottom:14px;
}
.prose p{color:var(--mute);font-size:15.5px;margin-top:12px}
.prose p:first-of-type{margin-top:0}
.prose strong{color:var(--bone);font-weight:400}
.prose code{
  font:12.5px/1 var(--mono);background:var(--panel);
  border:1px solid var(--rule);border-radius:4px;padding:3px 6px;color:var(--bone);
}
.prose a{color:var(--bone)}