/* The Suite — one stylesheet for every page on /ts */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  color-scheme:dark;
  --bg:#000;--panel:#0b0b0c;--line:#1e1c17;--line2:#2a2620;
  --ink:#f2efe8;--dim:#a49f95;--faint:#6d6961;
  --gold:#d8ae4e;--gold2:#f2d387;--silver:#d9dde2;
  --ok:#7fd18b;
  --shadow:0 24px 60px rgba(0,0,0,.6);
  --r:18px;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);
  font:400 16px/1.65 "Inter",-apple-system,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:
  radial-gradient(900px 520px at 78% -8%,rgba(216,174,78,.13),transparent 65%),
  radial-gradient(700px 420px at 8% 12%,rgba(217,221,226,.05),transparent 60%),#000}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,92vw);margin:0 auto}

/* ── header ─────────────────────────────────────────── */
header.bar{position:sticky;top:0;z-index:40;padding:14px 0;
  backdrop-filter:blur(10px);background:rgba(0,0,0,.62);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand img{width:42px;height:42px;border-radius:12px}
.brand .txt b{display:block;font-size:16px;letter-spacing:.22em;font-weight:600;
  background:linear-gradient(92deg,var(--silver) 30%,var(--gold2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand .txt span{display:block;font-size:8.5px;letter-spacing:.3em;color:var(--faint);text-transform:uppercase;margin-top:2px}
nav.links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;color:var(--dim)}
nav.links a:hover{color:var(--ink)}
/* Liquid gold: the primary is a molten pill that never stops moving, the
   secondary is frosted glass. Both keep the monospace label — the console
   voice stays, the ghost-button invisibility does not. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 34px;border-radius:999px;font-size:14.5px;font-weight:700;
  font-family:ui-monospace,SFMono-Regular,Menlo,"DejaVu Sans Mono",monospace;
  text-transform:lowercase;letter-spacing:.01em;
  border:1px solid rgba(255,255,255,.22);color:var(--ink);
  background:rgba(255,255,255,.06);backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(0,0,0,.4);cursor:pointer;
  transition:.18s transform,.18s box-shadow,.18s border-color,.18s background,.18s color}
.btn:hover{transform:translateY(-3px);background:rgba(255,255,255,.14);
  border-color:#fff;color:var(--ink)}
/* Two layers: a fixed brushed-gold body, and a specular band travelling across
   it. The band is transparent at both ends so the loop has no seam, and the
   body never leaves the frame — the button is gold at every moment. */
.btn.gold,.btn.solid{color:#170f02;border-color:rgba(255,246,220,.55);
  background:
    linear-gradient(100deg,rgba(255,255,255,0) 0 34%,rgba(255,255,255,.45) 44%,
      rgba(255,255,255,.9) 47%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 60% 100%),
    linear-gradient(178deg,#f7e2a8,#e8c877 32%,#d3a745 60%,#b8891f);
  background-size:300% 100%,100% 100%;
  animation:molten 5.5s linear infinite;
  box-shadow:0 12px 34px rgba(216,174,78,.5),inset 0 2px 0 rgba(255,255,255,.5)}
@keyframes molten{to{background-position:-300% 0,0 0}}
/* the arrow is drawn, not typed, so no page markup carries it */
.btn.gold::after,.btn.solid::after{content:"→";font-size:15px;line-height:1;
  transition:transform .18s}
.btn.gold:hover,.btn.solid:hover{transform:translateY(-3px) scale(1.02);color:#170f02;
  border-color:rgba(255,246,220,.8);
  box-shadow:0 18px 48px rgba(216,174,78,.75),inset 0 2px 0 rgba(255,255,255,.6)}
.btn.gold:hover::after,.btn.solid:hover::after{transform:translateX(3px)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;animation:none}
/* which price list the page is printing */
.curpick{display:flex;align-items:center;gap:8px;margin-bottom:16px;
  font-size:12px;color:var(--faint);letter-spacing:.12em;text-transform:uppercase}
.curbtn{font:inherit;font-size:12px;letter-spacing:.06em;text-transform:none;
  padding:6px 13px;border-radius:6px;cursor:pointer;
  border:1px solid var(--line2);background:transparent;color:var(--dim);transition:.18s}
.curbtn:hover{border-color:#4a4133;color:var(--ink)}
.curbtn.on{background:#161206;color:#e8c877;border-color:#5c4a15}
html[data-theme="light"] .curbtn.on{background:#241d0b;color:#f0d894;border-color:#241d0b}

/* the two fields the order cannot go without — marked on the label, ringed on
   the input, and the ring goes quiet as soon as something is typed in */
#order label:has(+ input[required])::after{content:" required";color:#c2262b;
  font-size:9.5px;letter-spacing:.16em;font-weight:700}
#order input[required]{border-color:rgba(194,38,43,.55);
  box-shadow:inset 0 0 0 1px rgba(194,38,43,.16)}
#order input[required]:focus{border-color:rgba(216,174,78,.6);box-shadow:none}
#order input[required]:not(:placeholder-shown){border-color:var(--line2);box-shadow:none}
html[data-theme="light"] #order input[required]{border-color:rgba(139,15,20,.45);
  box-shadow:inset 0 0 0 1px rgba(139,15,20,.10)}
html[data-theme="light"] #order input[required]:not(:placeholder-shown){
  border-color:#cec4ab;box-shadow:none}

/* the one button that takes money reads differently from every other one */
#order-btn,#order-btn.solid{background:#8b0f14;color:#fff;border-color:#8b0f14;
  animation:none;box-shadow:0 10px 28px rgba(139,15,20,.34),inset 0 2px 0 rgba(255,255,255,.14)}
#order-btn::after{color:#fff;opacity:.85}
#order-btn:hover:not([disabled]),#order-btn.solid:hover:not([disabled]){
  background:#a3161b;border-color:#c2262b;color:#fff;box-shadow:0 14px 36px rgba(139,15,20,.5)}
/* the header instance rides smaller so the bar keeps its height */
.bar .btn{margin-left:4px;padding:11px 24px;font-size:13px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line2);
  color:var(--ink);border-radius:10px;padding:8px 11px;font-size:15px;cursor:pointer}

/* ── hero ───────────────────────────────────────────── */
.hero{padding:74px 0 30px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
h1{font-size:clamp(38px,5.6vw,68px);line-height:1.03;letter-spacing:-.025em;font-weight:800;
  text-wrap:balance}

/* on a desktop the headline was wrapping six times in a half-width column —
   the text side takes more of the grid and the type steps down a notch so the
   two sentences land in two lines each */
@media(min-width:961px){
  .hero .wrap{grid-template-columns:1.28fr .72fr;gap:48px}
  h1{font-size:clamp(44px,4.1vw,56px);line-height:1.06;max-width:none}
}
h1 em{font-style:normal;display:block;
  background:linear-gradient(92deg,var(--gold) 10%,var(--gold2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lede{margin-top:20px;font-size:clamp(16px,2vw,19px);color:var(--dim);max-width:34ch}
.cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.chip{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--dim);
  border:0;border-left:3px solid var(--gold);border-radius:0 10px 10px 0;
  padding:7px 14px 7px 12px;background:var(--panel)}
.chip b{color:var(--ink);font-weight:700}
.heroart{position:relative;display:grid;place-items:center}
.heroart img{width:min(430px,84%);height:auto;   /* the 430 height attr would stretch it */
  filter:drop-shadow(0 30px 70px rgba(216,174,78,.28));
  animation:float 7s ease-in-out infinite}
.heroart::after{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(216,174,78,.16),transparent 62%);z-index:-1}
@keyframes float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){.heroart img{animation:none}}

/* ── sections ───────────────────────────────────────── */
section{padding:64px 0}
.eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:600}
h2{font-size:clamp(27px,3.6vw,42px);line-height:1.1;letter-spacing:-.02em;margin-top:12px;font-weight:800}
.sub{color:var(--dim);margin-top:14px;max-width:62ch}

/* ── app grid ───────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
.card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r);background:linear-gradient(180deg,#0c0c0e,#070708);padding:20px;
  transition:.2s border-color,.2s transform,.2s box-shadow}
.card:hover{transform:translateY(-3px);border-color:#3a332a;box-shadow:var(--shadow)}
.card.on{border-color:rgba(216,174,78,.7);box-shadow:0 0 0 1px rgba(216,174,78,.25),0 18px 40px rgba(216,174,78,.12)}
.card .ico{width:74px;height:74px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#000}
.card h3{font-size:17px;margin-top:16px;font-weight:700}
.card p{font-size:13.6px;color:var(--dim);margin-top:7px;min-height:44px}
.feat{list-style:none;margin-top:12px;display:grid;gap:6px}
.feat li{font-size:12.7px;color:var(--dim);padding-left:15px;position:relative;line-height:1.45}
.feat li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;
  background:linear-gradient(180deg,var(--gold2),var(--gold))}
.proof{margin-top:14px;padding:11px 13px;border-radius:12px;font-size:12.8px;line-height:1.5;
  color:#f0e4c6;border:1px solid rgba(216,174,78,.28);
  background:linear-gradient(180deg,rgba(216,174,78,.11),rgba(216,174,78,.03))}
.proof b{color:var(--gold2);font-weight:700}
.meta{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:16px;font-size:11px;color:var(--faint);flex-wrap:wrap}
.meta span{border:1px solid var(--line);border-radius:6px;padding:2px 7px}
.meta .tagp{border:none;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;
  color:#161206;background:linear-gradient(180deg,#e8c877,#c79a35)}
.card .ico{flex:0 0 auto}
.pick{margin-top:16px;width:100%;padding:10px;border-radius:12px;font-size:13.5px;font-weight:600;
  border:1px solid var(--line2);background:#0e0d0b;color:var(--ink);cursor:pointer;transition:.18s}
.pick:hover{border-color:#4a4133}
.card.on .pick{background:linear-gradient(180deg,rgba(216,174,78,.22),rgba(216,174,78,.07));
  border-color:rgba(216,174,78,.6);color:#f6e8c6}
.card.soon{opacity:.72}
.card.soon .pick{opacity:.5;cursor:not-allowed}
.tag{position:absolute;top:16px;right:16px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(216,174,78,.4);border-radius:999px;padding:3px 9px}

/* The line-up reads top-down: the keyboard leads, two apps are featured side
   by side, and the rest are a pick-list — icon, name, one line, price, tick.
   Tapping a row adds or drops the app, so four apps is four taps. */
.grid{grid-template-columns:1fr 1fr}
.card.wide{grid-column:span 1;flex-direction:row;align-items:flex-start;gap:20px}
.card.wide .ico{margin-top:2px}
.card.wide>.body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.card.wide h3{margin-top:0}
.card.wide p{min-height:0}
.card.wide .feat{grid-template-columns:1fr 1fr;gap:6px 18px}
.card.wide .meta{padding-top:14px}

.card.row{grid-column:1/-1;display:grid;
  grid-template-columns:54px minmax(0,1fr) auto 26px;grid-template-rows:auto auto;
  column-gap:16px;row-gap:3px;align-items:center;padding:14px 18px;cursor:pointer}
.card.row:hover{transform:none;border-color:#3a332a}
.card.row .ico{grid-column:1;grid-row:1/3;width:54px;height:54px;border-radius:14px}
.card.row h3{grid-column:2;grid-row:1;margin-top:0;font-size:16px}
.card.row p{grid-column:2;grid-row:2;margin-top:0;min-height:0;font-size:13px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card.row .meta{grid-column:3;grid-row:1/3;margin-top:0;padding-top:0;justify-content:flex-end}
.card.row .feat,.card.row .proof,.card.row .more,.card.row .pick,
.card.row .meta span:not(.tagp){display:none}
/* the tick box is the card's own selected state — no extra markup */
.card.row::after{content:"";grid-column:4;grid-row:1/3;justify-self:end;
  width:25px;height:25px;border-radius:8px;border:1px solid var(--line2);background:#0b0b0d}
.card.row.on::after{content:"✓";display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#161206;border-color:#e8c877;
  background:linear-gradient(180deg,#e8c877,#c79a35)}
html[data-theme="light"] .card.row::after{background:#fffdf7;border-color:#cfc4a9}

/* ── one app's own page ─────────────────────────────── */
.applead{padding:44px 0 8px}
.back{font-size:12.5px;color:var(--dim);text-decoration:none}
.back:hover{color:var(--gold)}
.appid{display:flex;gap:24px;align-items:flex-start;margin-top:22px}
.appid>img{width:96px;height:96px;border-radius:22px;border:1px solid var(--line);background:#000;flex:0 0 auto}
.appid h1{font-size:clamp(30px,4.6vw,50px);line-height:1.05;letter-spacing:-.02em;font-weight:800}
.appid .lede{margin-top:10px;max-width:48ch}
.appmeta{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:11px;color:var(--faint);flex-wrap:wrap}
.appmeta span{border:1px solid var(--line);border-radius:6px;padding:3px 8px}
.appmeta .tagp{border:none;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700;
  color:#161206;background:linear-gradient(180deg,#e8c877,#c79a35)}
.appmeta .pkg{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0}
.appid .cta{margin-top:22px}
.shots{padding:34px 0 10px}
.shotrow{display:flex;gap:16px;margin-top:20px;overflow-x:auto;padding-bottom:14px;
  scroll-snap-type:x mandatory}
.shot{flex:0 0 auto;width:236px;scroll-snap-align:start}
.shot img{width:100%;height:auto;display:block;border-radius:18px;border:1px solid var(--line);background:#000}
.shot figcaption{margin-top:9px;font-size:11.5px;color:var(--faint)}
.appbody .two{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.feat.big li{font-size:14.5px;padding-left:18px;margin-top:2px}
.feat.big li::before{top:8px;width:6px;height:6px}
.appbody .eyebrow+.feat{margin-top:20px}
.sub.small{font-size:13px;margin-top:12px}
.perms{width:100%;border-collapse:collapse;margin-top:16px;font-size:13px}
.perms th,.perms td{text-align:left;vertical-align:top;padding:11px 0;border-top:1px solid var(--line)}
.perms th{width:40%;padding-right:16px;color:var(--ink);font-weight:600}
.perms td{color:var(--dim)}
.others{padding:56px 0 72px}
.orow{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.oapp{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:13.5px;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:7px 15px 7px 7px;transition:.18s}
.oapp:hover{border-color:#4a4133;background:#0c0b09}
.oapp img{width:30px;height:30px;border-radius:9px;background:#000}
.others .cta{margin-top:26px}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{color:var(--gold)}
.more{margin-top:12px;font-size:12.6px}
.more a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(216,174,78,.32)}
.more a:hover{color:var(--gold2)}

/* ── your keys ──────────────────────────────────────── */
/* `form{display:grid}` outranks the UA's [hidden] rule, so a hidden form
   would still draw — the sign-in and sign-up panels sit in the same card. */
[hidden]{display:none !important}
.authcard{max-width:520px;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,#0c0c0e,#070708);padding:24px}
.authcard .tabs{display:flex;gap:10px;border:0;padding:0}
.authcard .mode{flex:1 1 auto;text-align:center;padding:11px 14px;font-size:14px;
  font-weight:600;color:var(--ink);cursor:pointer}
.authcard form{grid-template-columns:1fr}
.authcard .btn{width:100%;margin-top:4px}
.whoami{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13.5px;color:var(--dim)}
.whoami .btn{padding:9px 18px;font-size:13px}
.keylist{display:grid;gap:12px;margin-top:22px}
.keyrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:14px;background:#0a0a0c;padding:15px 18px}
.keyrow.off{opacity:.5}
.kapp{flex:1 1 160px;min-width:0}
.kapp b{display:block;font-size:15px}
.kapp span{display:block;font-size:12px;color:var(--faint);margin-top:2px}
.kkey{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:.06em;
  color:var(--gold2);background:#000;border:1px solid var(--line2);border-radius:10px;padding:9px 13px}
.kcopy{padding:9px 18px;font-size:13px}

/* ── builder ────────────────────────────────────────── */
.builder{border:1px solid var(--line);border-radius:26px;background:
  linear-gradient(180deg,#0b0b0d,#060607);padding:clamp(22px,3vw,38px);margin-top:38px;
  display:grid;grid-template-columns:300px 1fr;gap:38px}
.phone{border:1px solid var(--line2);border-radius:34px;background:#050505;padding:16px 14px 22px;
  box-shadow:inset 0 0 40px rgba(216,174,78,.06)}
.phone .notch{width:70px;height:5px;border-radius:99px;background:#1d1b16;margin:2px auto 16px}
.phone .screen{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px;min-height:242px;align-content:start}
.phone .screen .slot{position:relative;text-align:center;font-size:9.5px;color:var(--faint);line-height:1.3}
.phone .screen .unslot{position:absolute;top:-6px;right:-5px;width:17px;height:17px;padding:0;
  border:1px solid var(--line2);border-radius:50%;background:#1d1b16;color:var(--dim);
  font-size:12px;line-height:15px;text-align:center;cursor:pointer}
.phone .screen .unslot:hover{color:var(--ink)}
.phone .screen img{width:100%;border-radius:13px;border:1px solid var(--line);margin-bottom:5px}
.phone .empty{grid-column:1/-1;color:var(--faint);font-size:12.5px;text-align:center;padding:64px 10px;line-height:1.6}
.modes{display:flex;gap:10px;flex-wrap:wrap}
.mode{flex:1 1 200px;text-align:left;border:1px solid var(--line);border-radius:16px;background:#0a0a0c;
  padding:16px 18px;cursor:pointer;transition:.18s}
.mode:hover{border-color:#3a332a}
.mode.on{border-color:rgba(216,174,78,.7);background:linear-gradient(180deg,rgba(216,174,78,.12),rgba(216,174,78,.03))}
.mode b{display:block;font-size:15.5px}
.mode small{display:block;color:var(--dim);font-size:12.5px;margin-top:4px}
.mode .p{float:right;font-weight:800;color:var(--gold2);font-size:16px}
.tally{display:flex;align-items:baseline;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.tally .n{font-size:38px;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(92deg,var(--gold) 10%,var(--gold2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.tally .l{color:var(--dim);font-size:14px}
.nudge{margin-top:12px;font-size:13.5px;color:var(--gold2);display:none}
.nudge button{background:none;border:none;color:var(--gold2);text-decoration:underline;cursor:pointer;font:inherit}
/* ── paying with a coin ───────────────────────────────────────────────
   The two lanes are the same form in two skins: the card lane keeps its
   name field, the coin lane asks for an address and nothing else. */
.paypick{display:flex;align-items:center;gap:8px;margin-top:22px;
  font-size:12px;color:var(--faint);letter-spacing:.12em;text-transform:uppercase}
.paytab{font:inherit;font-size:12px;letter-spacing:.06em;text-transform:none;
  padding:6px 13px;border-radius:6px;cursor:pointer;
  border:1px solid var(--line2);background:transparent;color:var(--dim);transition:.18s}
.paytab:hover{border-color:#4a4133;color:var(--ink)}
.paytab.on{background:#161206;color:#e8c877;border-color:#5c4a15}
.curpick.locked{opacity:.5;pointer-events:none}
.coinpick{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.coinbtn{flex:1 1 150px;font:inherit;font-size:14px;padding:12px 14px;border-radius:12px;
  cursor:pointer;border:1px solid var(--line2);background:#08080a;color:var(--ink);transition:.18s}
.coinbtn:hover{border-color:#4a4133}
.coinbtn.on{border-color:rgba(216,174,78,.7);color:#f6e8c6;
  background:linear-gradient(180deg,rgba(216,174,78,.18),rgba(216,174,78,.05))}
/* the invoice: the amount is the thing that identifies the order, so it is
   the loudest item on it, and the address sits underneath at full width */
.invoice{display:flex;gap:20px;margin-top:22px;padding:20px;border-radius:var(--r);
  border:1px solid rgba(216,174,78,.35);background:linear-gradient(180deg,#100e08,#0a0a0b);
  flex-wrap:wrap}
.invoice .qr{flex:0 0 auto;background:#fff;padding:9px;border-radius:12px;line-height:0}
.invbody{flex:1 1 260px;min-width:0}
.invamt{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.invamt b{font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--gold2);
  font-family:ui-monospace,SFMono-Regular,Menlo,"DejaVu Sans Mono",monospace}
.invamt span{font-size:13px;color:var(--faint)}
.invaddr{display:flex;align-items:center;gap:8px;margin-top:12px;
  border:1px solid var(--line2);border-radius:12px;background:#08080a;padding:10px 12px}
.invaddr code{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font-size:12.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,"DejaVu Sans Mono",monospace;color:var(--ink)}
.copy{flex:0 0 auto;font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 11px;border-radius:8px;cursor:pointer;border:1px solid var(--line2);
  background:transparent;color:var(--dim);transition:.18s}
.copy:hover{border-color:var(--gold);color:var(--gold2)}
.invoice .btn{margin-top:12px;width:100%}
.invoice .note{margin-top:12px}
.invoice .msg{margin-top:12px}
.linky{background:none;border:0;padding:0;margin-top:12px;color:var(--dim);font:inherit;
  font-size:13px;text-decoration:underline;cursor:pointer}
.linky:hover{color:var(--ink)}
html[data-theme="light"] .paytab.on{background:#241d0b;color:#f0d894;border-color:#241d0b}
html[data-theme="light"] .coinbtn{background:#fffdf7;color:#241d0b;border-color:#d8cfba}
html[data-theme="light"] .coinbtn.on{border-color:#8a6c1e;color:#3b2f0d;
  background:linear-gradient(180deg,rgba(138,108,30,.16),rgba(138,108,30,.05))}
html[data-theme="light"] .invoice{border-color:rgba(138,108,30,.4);
  background:linear-gradient(180deg,#fffdf7,#f2ece0)}
html[data-theme="light"] .invaddr{background:#fff;border-color:#d8cfba}
html[data-theme="light"] .invamt b{color:#6f5615}

form{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{font-size:12px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
input,textarea{width:100%;margin-top:6px;background:#08080a;border:1px solid var(--line2);
  border-radius:12px;padding:12px 14px;color:var(--ink);font:inherit;font-size:15px}
input:focus,textarea:focus{outline:none;border-color:rgba(216,174,78,.6)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form .full{grid-column:1/-1}
.note{font-size:12.5px;color:var(--faint);grid-column:1/-1}
.msg{grid-column:1/-1;font-size:14.5px;padding:12px 14px;border-radius:12px;display:none}
.msg.ok{display:block;color:#d9f2de;border:1px solid rgba(127,209,139,.4);background:rgba(127,209,139,.08)}
.msg.err{display:block;color:#f6d9d9;border:1px solid rgba(224,110,110,.4);background:rgba(224,110,110,.08)}

/* ── principle / faq ────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}
.quote{border-left:2px solid rgba(216,174,78,.6);padding-left:22px;font-size:clamp(17px,2.2vw,21px);line-height:1.6}
/* ── permission ledger ─────────────────────────────── */
.ledger{margin-top:34px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,#0b0b0d,#070708)}
.lrow{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:14px 20px;
  border-top:1px solid var(--line);font-size:14.2px;color:var(--dim);align-items:baseline}
.lrow:first-child{border-top:none}
.lrow span:first-child{color:var(--ink);font-weight:600}
.lrow b{color:var(--gold2);font-weight:600}
.lhead{background:#0e0d0b;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.lhead span:first-child{color:var(--faint);font-weight:600}
@media(max-width:640px){.lrow{grid-template-columns:1fr;gap:4px;padding:13px 16px}
  .lhead{display:none}}
.faq{margin-top:32px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:18px 2px}
.faq summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-weight:400;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--dim);margin-top:10px;font-size:15px;max-width:78ch}

/* ── legal page ─────────────────────────────────────── */
.doc{max-width:78ch}
.doc h1{margin-top:12px;font-size:clamp(30px,4.6vw,44px);line-height:1.05}
.doc h2{margin-top:46px;font-size:clamp(22px,3vw,30px)}
.doc h3{margin-top:26px;font-size:17px;color:var(--gold2)}
.doc p,.doc li{color:var(--dim);margin-top:12px;font-size:15.4px}
.doc ul{margin-top:8px;padding-left:22px}
.doc li{margin-top:8px}
.stamp{font-size:12.5px;color:var(--faint);margin-top:10px}

/* ── footer ─────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:38px 0 54px;margin-top:34px}
footer .wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:var(--faint)}
footer img{width:30px;height:30px;border-radius:9px}
footer nav{margin-left:auto;display:flex;gap:20px}
footer a:hover{color:var(--ink)}

@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr;gap:20px}
  .heroart{order:-1}
  .heroart img{width:min(300px,62%)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .builder{grid-template-columns:1fr;gap:26px}
  .split{grid-template-columns:1fr}
  .appbody .two{grid-template-columns:1fr;gap:34px}
  /* one row: brand, then toggle and burger hard right. The links and the
     CTA live inside the burger menu instead of wrapping onto a second row. */
  nav.links{display:none;width:100%;flex-direction:column;gap:14px;margin:14px 0 2px;order:4}
  nav.links.open{display:flex}
  .burger{display:block;order:3;margin-left:0}
  .bar .wrap{flex-wrap:wrap;gap:10px}
  .brand{margin-right:auto}
  .theme-toggle{order:2}
  .bar>.wrap>.btn{order:5;width:100%;margin-left:0;display:none}
  .bar .wrap:has(nav.links.open)>.btn{display:inline-flex}
}
@media(max-width:640px){
  /* on a phone the mark ate the whole first screen and pushed the headline
     under the fold — the words lead, the logo is already in the header */
  .heroart{display:none}
  .hero{padding:30px 0 10px}

  /* one column, every app a row — the featured two included */
  .grid{grid-template-columns:1fr;gap:8px;margin-top:24px}
  .card.row{grid-template-columns:44px minmax(0,1fr) 24px;
    column-gap:12px;padding:11px 13px}
  .card.row .ico{width:44px;height:44px;border-radius:11px}
  .card.row h3{font-size:15px}
  .card.row p{font-size:12.6px}
  .card.row .meta{grid-column:2;grid-row:3;justify-content:flex-start;padding-top:5px}
  .card.row{grid-template-rows:auto auto auto}
  .card.row .ico,.card.row::after{grid-row:1/4}
}
@media(max-width:520px){
  .grid{grid-template-columns:1fr}
  form{grid-template-columns:1fr}
  .brand .txt span{display:none}
  .appid{flex-direction:column;gap:16px}
  .appid>img{width:76px;height:76px;border-radius:18px}
  .shot{width:200px}
  /* one column: a span-2 card would mint an implicit second column */
  .card.wide{grid-column:auto;flex-direction:column;gap:0}
  .card.wide .feat{grid-template-columns:1fr}
}

/* ── light / dark toggle — the Olive Auction control, same shape ──────
   The button lives beside the logo: sun while the page is dark, moon while
   it is light. The choice is stamped on <html data-theme> before first paint
   by the inline script in the head, so there is no flash on reload. */
.theme-toggle{background:none;border:0;color:var(--gold);width:34px;height:34px;flex:0 0 auto;
  cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;
  transition:color .18s}
.theme-toggle:hover{color:var(--ink)}
.theme-toggle svg{width:16px;height:16px;display:none}
html:not([data-theme="light"]) .theme-toggle .sun{display:block}
html[data-theme="light"] .theme-toggle .moon{display:block}

html[data-theme="light"]{color-scheme:light}
html[data-theme="light"] body{
  --bg:#f6f3ea;--panel:#efe9db;--line:#e2dac7;--line2:#cec4ab;
  --ink:#1b1a15;--dim:#56534a;--faint:#7b776c;
  --gold:#8a6c1e;--gold2:#6f5615;--silver:#4a5560;
  --shadow:0 20px 48px rgba(60,50,20,.16)}
html[data-theme="light"] body::before{background:
  radial-gradient(900px 520px at 78% -8%,rgba(138,108,30,.10),transparent 65%),
  radial-gradient(700px 420px at 8% 12%,rgba(90,80,60,.05),transparent 60%),#f6f3ea}
html[data-theme="light"] header.bar{background:rgba(246,243,234,.82)}
html[data-theme="light"] .card,
html[data-theme="light"] .builder{background:linear-gradient(180deg,#fffdf7,#f2ece0)}
html[data-theme="light"] .btn:not(.gold):not(.solid),
html[data-theme="light"] .pick,
html[data-theme="light"] .chip,
html[data-theme="light"] .mode,
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] .lhead{background:#fffdf7}
html[data-theme="light"] .chip{border-left-color:var(--gold)}
/* the molten fill carries over to parchment — gold reads on both grounds.
   Only the secondary changes: frosted white instead of frosted black. */
html[data-theme="light"] .btn:not(.gold):not(.solid){color:#2b2820;border-color:#c9bc9c;
  background:rgba(255,255,255,.75);box-shadow:0 8px 20px rgba(60,50,20,.10)}
html[data-theme="light"] .btn:not(.gold):not(.solid):hover{border-color:#241d0b;
  color:#1b1a15;background:#fff}
html[data-theme="light"] .btn.gold,
html[data-theme="light"] .btn.solid{color:#1a1305;border-color:rgba(138,108,30,.35);
  box-shadow:0 12px 30px rgba(138,108,30,.42),inset 0 2px 0 rgba(255,255,255,.5)}
html[data-theme="light"] .btn.gold:hover,
html[data-theme="light"] .btn.solid:hover{color:#1a1305;border-color:rgba(138,108,30,.6);
  box-shadow:0 18px 44px rgba(138,108,30,.6),inset 0 2px 0 rgba(255,255,255,.6)}
html[data-theme="light"] #order-btn,
html[data-theme="light"] #order-btn.solid{background:#8b0f14;color:#fff;border-color:#8b0f14;
  box-shadow:0 10px 26px rgba(139,15,20,.3),inset 0 2px 0 rgba(255,255,255,.14)}
html[data-theme="light"] #order-btn:hover:not([disabled]),
html[data-theme="light"] #order-btn.solid:hover:not([disabled]){
  background:#a3161b;border-color:#a3161b;color:#fff;box-shadow:0 8px 26px rgba(139,15,20,.30)}
html[data-theme="light"] .card.on .pick,
html[data-theme="light"] .mode.on{background:linear-gradient(180deg,rgba(138,108,30,.16),rgba(138,108,30,.05));
  color:#3b2f0d}
html[data-theme="light"] .card .ico{background:#0a0a0b}   /* the icons are drawn on black */
html[data-theme="light"] .phone{background:#efe9db;border-color:#d8cdb4;
  box-shadow:inset 0 0 40px rgba(138,108,30,.10)}
html[data-theme="light"] .phone .notch{background:#cfc4a9}
html[data-theme="light"] .phone .screen img{border-color:#d8cdb4}
html[data-theme="light"] .phone .screen .unslot{background:#efe9db;border-color:#d8cdb4;color:#6b6252}
html[data-theme="light"] .phone .screen .unslot:hover{color:#26221a}
html[data-theme="light"] .ledger{background:linear-gradient(180deg,#fffdf7,#f2ece0)}
html[data-theme="light"] .proof{color:#3f3413;border-color:rgba(138,108,30,.35);
  background:linear-gradient(180deg,rgba(138,108,30,.12),rgba(138,108,30,.04))}
html[data-theme="light"] .proof b{color:#6f5615}
html[data-theme="light"] .tabs,
html[data-theme="light"] footer{border-color:var(--line)}
html[data-theme="light"] .meta .tagp{color:#241d0b;background:linear-gradient(180deg,#d8b850,#b8912e)}
/* the keys page: the auth card and the key rows are drawn dark by default */
html[data-theme="light"] .authcard{background:linear-gradient(180deg,#fffdf7,#f2ece0)}
html[data-theme="light"] .authcard .mode{background:#fffdf7;color:#241d0b}
html[data-theme="light"] .authcard .mode.on{color:#3b2f0d;
  background:linear-gradient(180deg,rgba(138,108,30,.16),rgba(138,108,30,.05))}
html[data-theme="light"] .keyrow{background:linear-gradient(180deg,#fffdf7,#f2ece0)}
html[data-theme="light"] .kkey{background:#fffdf7;color:#6f5615;border-color:#cfc4a9}
html[data-theme="light"] input,
html[data-theme="light"] textarea{color:#1b1a15}
html[data-theme="light"] .msg.ok{color:#26461f;background:rgba(63,125,51,.10);border-color:rgba(63,125,51,.35)}
html[data-theme="light"] .msg.err{color:#5e1f1c;background:rgba(163,74,42,.10);border-color:rgba(163,74,42,.35)}
/* the mark carries its own contrast on parchment — no plate behind it */
html[data-theme="light"] .heroart img{filter:drop-shadow(0 22px 46px rgba(40,32,10,.30))}
html[data-theme="light"] .heroart::after{background:radial-gradient(circle,rgba(216,174,78,.22),transparent 62%)}
html[data-theme="light"] .msg.ok{color:#26461f;background:rgba(63,125,51,.10);border-color:rgba(63,125,51,.35)}
html[data-theme="light"] .msg.err{color:#5e1f1c;background:rgba(163,74,42,.10);border-color:rgba(163,74,42,.35)}

/* the anchor line under the three price tiles — sets €30 against a
   subscription the reader already pays, so the number reads cheap */
.anchor{margin:14px 0 0;font-size:13.5px;line-height:1.6}

/* ── the verify line under the hero lede ─────────────────
   The proof instruction sits above the fold because it is the offer:
   the reader is told to go and check us rather than believe us. */
.verify{margin-top:14px;font-size:13.8px;line-height:1.65;color:var(--dim);max-width:46ch;
  border-left:2px solid rgba(216,174,78,.55);padding-left:16px}
.verify b{color:var(--ink);font-weight:600}

/* ── the lead card — the keyboard, sold on its own before the grid ── */
.eyebrow.spaced{margin-top:70px}
.card.lead{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;margin-top:32px;
  padding:30px 32px;border-radius:24px}
.card.lead:hover{transform:none}
.card.lead .ico{width:88px;height:88px;border-radius:20px}
.card.lead h3{font-size:26px;margin-top:18px}
.card.lead>div>p{font-size:15px;min-height:0}
.card.lead .lead-b{display:flex;flex-direction:column}
.card.lead .feat{margin-top:4px}
.card.lead .pick{margin-top:16px}
.card.lead .more{margin-top:12px;font-size:13px}

/* ── the install walkthrough — the objection met before the price ── */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.steps li{border:1px solid var(--line);border-radius:18px;padding:22px 22px 24px;
  background:linear-gradient(180deg,#0b0b0d,#080809)}
.steps b{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold2)}
.steps p{margin-top:11px;font-size:14px;line-height:1.62;color:var(--dim)}
.steps em{color:var(--ink);font-style:italic}

/* ── the guarantee, printed at the weight of the price ───── */
.guar{margin-top:16px;font-size:13.8px;line-height:1.6;color:var(--dim)}
.guar b{color:var(--gold2);font-weight:700}
.anchor.top{margin:0 0 18px}

@media(max-width:960px){
  .card.lead{grid-template-columns:1fr;gap:22px;padding:24px}
  .steps{grid-template-columns:1fr}
}

html[data-theme="light"] .steps li{background:linear-gradient(180deg,#fffdf7,#f2ece0)}
html[data-theme="light"] .verify{border-color:rgba(138,108,30,.5)}

@media(min-width:961px){.lede{max-width:60ch;margin-top:24px}.verify{max-width:76ch}}

/* ── the audit list ─────────────────────────────────────
   The page had one exit: pay, or leave for good. This is the
   second one — an address in exchange for something worth
   having, on the same subject the page is already about. */
.listbox{margin-top:30px;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,#0c0c0e,#070708);padding:26px 26px 24px}
.listbox h3{margin:0 0 8px;font-size:19px}
.listbox p{margin:0;color:var(--dim);font-size:14.5px;line-height:1.62;max-width:64ch}
.listbox form{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.listbox input[type=email],.listbox input[type=text]{flex:1 1 210px;min-width:0;
  padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:#050506;color:var(--ink);font:inherit;font-size:14.5px}
.listbox input:focus{outline:none;border-color:var(--gold2)}
.listbox .btn{flex:0 0 auto;padding:12px 28px;font-size:14px}  /* level with the two inputs */
.listbox .fine{margin-top:12px;font-size:12.5px;color:var(--faint)}
.listbox .msg{margin-top:10px;font-size:13.5px}
html[data-theme="light"] .listbox{background:linear-gradient(180deg,#fffdf7,#f2ece0)}
html[data-theme="light"] .listbox input[type=email],
html[data-theme="light"] .listbox input[type=text]{background:#fff;color:#241d0b;border-color:#d8cfba}