/* ============================================================================
   Zeshan Haider — public site, v2 "Console"

   Typeset like a working terminal, printed on paper. Monospace leads; the
   humanist sans is the quiet supporting voice. Components use semantic tokens
   only — never a raw hex or a primitive.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--text-1);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:760px}
/* Vertical page padding. Longhands ONLY — never the `padding` shorthand, and
   never inline. .wrap supplies the horizontal gutter via padding:0 var(--gutter),
   and an inline shorthand like style="padding:28px 0 70px" silently overrides
   it to zero, putting every heading, input and button flush against the edge
   of the phone. That is exactly what happened to the checkout pages. */
.wrap-vpad{padding-top:28px;padding-bottom:70px}
.wrap-vpad-lg{padding-top:44px;padding-bottom:80px}
.mono{font-family:var(--font-mono)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--signal);outline-offset:2px}

/* ---------------------------------------------------------------------------
   Buttons — flat, square, with a printed offset shadow on hover
   ------------------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-mono);font-size:13px;font-weight:500;
  padding:11px 18px;border:1px solid var(--text-1);border-radius:var(--r);
  background:var(--text-1);color:var(--bg);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease),
             background .15s,color .15s,border-color .15s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--text-1)}
.btn-sm{padding:7px 13px;font-size:12.5px}
.btn-out{background:none;color:var(--text-1)}
.btn-sig{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}
.btn-sig:hover{box-shadow:2px 2px 0 var(--text-1)}
.btn-block{width:100%}

/* ---------------------------------------------------------------------------
   Header — a status bar
   ------------------------------------------------------------------------ */
.bar{position:sticky;top:0;z-index:50;background:var(--bg);
  border-bottom:1px solid var(--rule)}
.bar-in{display:flex;align-items:center;gap:20px;height:52px}
.who{font-family:var(--font-mono);font-size:13px;font-weight:700;
  letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.who i{width:7px;height:7px;background:var(--signal);border-radius:50%;
  display:inline-block;animation:beat 2.4s infinite}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.3}}
.bar nav{margin-left:auto;display:flex;gap:2px}
.bar nav a{font-family:var(--font-mono);font-size:12.5px;color:var(--text-2);
  padding:6px 11px;border-radius:var(--r);transition:background .15s,color .15s}
.bar nav a:hover{background:var(--bg-2);color:var(--text-1)}
.bar nav a.on{color:var(--signal)}
.bar-act{display:flex;align-items:center;gap:8px}
.mode{width:30px;height:30px;display:grid;place-items:center;background:none;
  border:1px solid var(--rule);border-radius:var(--r);color:var(--text-2);
  font-family:var(--font-mono);font-size:11px;
  transition:border-color .15s,color .15s}
.mode:hover{border-color:var(--signal);color:var(--signal)}
.burger{display:none;width:32px;height:32px;background:none;
  border:1px solid var(--rule);border-radius:var(--r);
  font-family:var(--font-mono);font-size:13px;color:var(--text-2)}

/* ---------------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------------ */
section{padding:84px 0}
.band{background:var(--bg-2);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.head{margin-bottom:36px;max-width:56ch}
.head .tag{font-family:var(--font-mono);font-size:11.5px;color:var(--text-3);
  display:block;margin-bottom:12px}
.head .tag::before{content:"# "}
.head h2{font-family:var(--font-mono);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(23px,2.9vw,32px);line-height:1.15}
.head p{color:var(--text-2);margin:12px 0 0;font-size:16px}

/* ---------------------------------------------------------------------------
   HERO + the incident log (the signature)
   ------------------------------------------------------------------------ */
.hero{padding:56px 0 84px}
.hero-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:56px;align-items:start}
.kicker{font-family:var(--font-mono);font-size:12px;color:var(--text-3);
  margin-bottom:22px}
.kicker b{color:var(--signal);font-weight:500}
.hero h1{font-family:var(--font-mono);font-weight:700;
  font-size:clamp(29px,4.4vw,50px);line-height:1.08;letter-spacing:-.045em;
  margin-bottom:22px}
.hero h1 s{text-decoration:none;position:relative;color:var(--text-3)}
.hero h1 s::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;
  height:3px;background:var(--alarm);transform:scaleX(0);transform-origin:left;
  animation:strike .5s var(--ease) 1.1s forwards}
@keyframes strike{to{transform:scaleX(1)}}
.hero h1 em{font-style:normal;color:var(--signal)}
.hero-lede{color:var(--text-2);font-size:17px;line-height:1.65;max-width:44ch;
  margin-bottom:28px}
.hero-do{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.creds{border-top:1px solid var(--rule);padding-top:20px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.creds b{display:block;font-family:var(--font-mono);font-size:21px;
  font-weight:700;letter-spacing:-.03em}
.creds span{display:block;font-family:var(--font-mono);font-size:10.5px;
  color:var(--text-3);margin-top:4px}

.term{border:1px solid var(--rule-strong);border-radius:var(--r-2);
  background:var(--surface);overflow:hidden;
  box-shadow:0 1px 0 var(--rule),0 18px 40px -28px var(--shadow-2)}
.term-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;
  border-bottom:1px solid var(--rule);background:var(--bg-2);
  font-family:var(--font-mono);font-size:11.5px;color:var(--text-3)}
.term-bar b{color:var(--text-2);font-weight:500}
.term-bar .sp{margin-left:auto}
.term-body{padding:16px 18px 20px;font-family:var(--font-mono);font-size:12.8px;
  line-height:1.85;min-height:352px}
.ln{display:flex;gap:10px;opacity:0;transform:translateY(3px);
  animation:in .28s var(--ease) forwards}
@keyframes in{to{opacity:1;transform:none}}
.ln .g{color:var(--text-3);user-select:none;flex-shrink:0}
.ln.cmd .t::before{content:"$ ";color:var(--signal);font-weight:700}
.ln.bad .t{color:var(--alarm)}
.ln.good .t{color:var(--signal)}
.ln.warn .t{color:var(--warn)}
.ln.dim .t{color:var(--text-3)}
.cur{display:inline-block;width:7px;height:14px;background:var(--signal);
  vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.term-foot{border-top:1px solid var(--rule);background:var(--signal-wash);
  padding:13px 18px;display:flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:12px}
.term-foot .tick{width:17px;height:17px;border-radius:50%;background:var(--signal);
  color:var(--on-signal);display:grid;place-items:center;font-size:10px;flex-shrink:0}
.term-foot b{color:var(--signal)}

/* ---------------------------------------------------------------------------
   Manifest list — one line per thing
   ------------------------------------------------------------------------ */
.manifest{border-top:1px solid var(--rule)}
.item{display:grid;grid-template-columns:38px 1fr auto;gap:20px;align-items:baseline;
  padding:20px 4px;border-bottom:1px solid var(--rule);
  transition:background .18s,padding-left .18s var(--ease)}
.item:hover{background:var(--bg-2);padding-left:12px}
.item .n{font-family:var(--font-mono);font-size:12px;color:var(--text-3)}
.item h3{font-family:var(--font-mono);font-size:16.5px;font-weight:700;
  letter-spacing:-.02em;margin-bottom:5px}
.item p{color:var(--text-2);font-size:14.5px;max-width:62ch}
.item .go{font-family:var(--font-mono);font-size:12px;color:var(--text-3);
  opacity:0;transition:opacity .18s}
.item:hover .go{opacity:1;color:var(--signal)}

/* ---------------------------------------------------------------------------
   Tiers — receipts
   ------------------------------------------------------------------------ */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.tier{border:1px solid var(--rule-strong);border-radius:var(--r-2);
  background:var(--surface);padding:24px;display:flex;flex-direction:column;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.tier:hover{transform:translateY(-3px);box-shadow:0 14px 34px -22px var(--shadow-2)}
.tier.pick{border-color:var(--signal);border-width:2px;padding:23px}
.tier-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px dashed var(--rule)}
.tier-h h3{font-family:var(--font-mono);font-size:15px;font-weight:700;
  letter-spacing:-.02em}
.pin{font-family:var(--font-mono);font-size:10px;color:var(--signal);
  background:var(--signal-wash);padding:3px 7px;border-radius:var(--r);
  white-space:nowrap}
.amt{font-family:var(--font-mono);font-size:34px;font-weight:700;
  letter-spacing:-.04em;line-height:1}
.amt small{font-size:12px;font-weight:400;color:var(--text-3);letter-spacing:0}
.tier .sum{color:var(--text-2);font-size:14px;margin:12px 0 18px}
.tier ul{flex:1;display:grid;gap:9px;margin-bottom:20px;padding-top:16px;
  border-top:1px dashed var(--rule)}
.tier li{font-family:var(--font-mono);font-size:12.5px;color:var(--text-2);
  display:flex;gap:9px;line-height:1.5}
.tier li::before{content:"+";color:var(--signal);flex-shrink:0}

/* ---------------------------------------------------------------------------
   Changelog list — writing
   ------------------------------------------------------------------------ */
.log a{display:grid;grid-template-columns:96px 1fr auto;gap:20px;align-items:baseline;
  padding:16px 4px;border-bottom:1px solid var(--rule);
  transition:background .18s,padding-left .18s var(--ease)}
.log a:first-child{border-top:1px solid var(--rule)}
.log a:hover{background:var(--bg-2);padding-left:12px}
.log .d{font-family:var(--font-mono);font-size:12px;color:var(--text-3)}
.log h3{font-size:16px;font-weight:600;letter-spacing:-.015em}
.log a:hover h3{color:var(--signal)}
.log .c{font-family:var(--font-mono);font-size:11px;color:var(--text-3);
  border:1px solid var(--rule);padding:2px 7px;border-radius:var(--r);
  white-space:nowrap}
.log p{color:var(--text-2);font-size:14px;margin-top:4px}

/* ---------------------------------------------------------------------------
   Product cards
   ------------------------------------------------------------------------ */
.pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
.pk{border:1px solid var(--rule-strong);border-radius:var(--r-2);
  background:var(--surface);display:flex;flex-direction:column;overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.pk:hover{transform:translateY(-3px);box-shadow:0 16px 36px -24px var(--shadow-2)}
.pk-h{padding:22px 22px 0}
.pk-tag{font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);
  border:1px solid var(--rule);padding:2px 7px;border-radius:var(--r);
  display:inline-block;margin-bottom:11px}
.pk h3{font-family:var(--font-mono);font-size:18px;font-weight:700;
  letter-spacing:-.03em;margin-bottom:8px}
.pk .sum{color:var(--text-2);font-size:14px;line-height:1.6;margin-bottom:18px}
.pk-b{padding:0 22px;flex:1}
.pk ul{display:grid;gap:8px;margin-bottom:18px}
.pk li{font-family:var(--font-mono);font-size:12.5px;color:var(--text-2);
  display:flex;gap:9px;line-height:1.5}
.pk li::before{content:"+";color:var(--signal);flex-shrink:0}
.pk-f{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 22px 20px;border-top:1px dashed var(--rule);margin-top:auto}
.pk-free{font-family:var(--font-mono);font-size:11.5px;color:var(--text-3);
  padding-top:14px;border-top:1px dashed var(--rule);line-height:1.6}
.pk-free a{color:var(--signal)}
.pk-soon{border-style:dashed;background:var(--bg-2);align-items:center;
  justify-content:center;text-align:center;min-height:280px;padding:30px}
.pk-soon:hover{transform:none;box-shadow:none}

/* ---------------------------------------------------------------------------
   Contact + forms
   ------------------------------------------------------------------------ */
.talk{border:1px solid var(--rule-strong);border-radius:var(--r-2);
  background:var(--surface);display:grid;grid-template-columns:1fr 1fr}
.talk-l{padding:34px;border-right:1px solid var(--rule);min-width:0}
.talk-l h2{font-family:var(--font-mono);font-size:24px;font-weight:700;
  letter-spacing:-.035em;margin-bottom:12px}
.talk-l p{color:var(--text-2);font-size:15px;margin-bottom:24px}
.ch{display:flex;align-items:center;gap:12px;padding:12px 0;
  border-top:1px dashed var(--rule);font-family:var(--font-mono);font-size:13px}
.ch span{color:var(--text-3);width:74px;flex-shrink:0}
.ch a{color:var(--signal)}
.talk-r{padding:34px;display:grid;gap:14px;align-content:start;min-width:0}
label{display:grid;gap:6px;font-family:var(--font-mono);font-size:11.5px;
  color:var(--text-3)}
input,textarea,select{font-family:var(--font-body);font-size:15px;
  color:var(--text-1);background:var(--bg);border:1px solid var(--rule-strong);
  border-radius:var(--r);padding:10px 12px;width:100%}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--signal)}
textarea{resize:vertical;min-height:88px}
.fine{font-family:var(--font-mono);font-size:11px;color:var(--text-3)}

/* ---------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------ */
.foot{border-top:1px solid var(--rule);padding:26px 0;
  font-family:var(--font-mono);font-size:12px;color:var(--text-3)}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-in a:hover{color:var(--signal)}

/* ---------------------------------------------------------------------------
   Flash
   ------------------------------------------------------------------------ */
.flash{position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:80;
  background:var(--surface);border:1px solid var(--signal);
  border-left:3px solid var(--signal);border-radius:var(--r);
  padding:12px 18px;font-family:var(--font-mono);font-size:12.5px;
  box-shadow:0 14px 34px -20px var(--shadow-2);max-width:min(92vw,520px)}
.flash-error{border-color:var(--alarm);border-left-color:var(--alarm)}
/* Not everything that goes wrong is a failure. A receipt that would not
   attach still leaves the payment logged, and colouring that red would send
   the buyer chasing a problem that isn't one. */
.flash-warn{border-color:var(--warn);border-left-color:var(--warn)}

/* ---------------------------------------------------------------------------
   Inner page hero
   ------------------------------------------------------------------------ */
.ph{padding:52px 0 34px;border-bottom:1px solid var(--rule)}
.ph .tag{font-family:var(--font-mono);font-size:11.5px;color:var(--text-3);
  display:block;margin-bottom:12px}
.ph .tag::before{content:"# "}
.ph h1{font-family:var(--font-mono);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(26px,3.6vw,40px);line-height:1.1;margin-bottom:14px}
.ph p{color:var(--text-2);font-size:16.5px;max-width:56ch}
.crumbs{font-family:var(--font-mono);font-size:11.5px;color:var(--text-3);
  margin-bottom:20px}
.crumbs a:hover{color:var(--signal)}

/* ---------------------------------------------------------------------------
   Article
   ------------------------------------------------------------------------ */
.art{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:start;
  padding:44px 0 0;max-width:1000px;margin:0 auto}
.art-side{position:sticky;top:74px;display:grid;gap:22px;min-width:0}
/* Grid items default to min-width:auto, which lets wide content (a long line
   in a code block) push the whole column past the viewport. min-width:0 lets
   the track shrink and the pre scroll inside it instead. */
.art > article{min-width:0}
.side-h{font-family:var(--font-mono);font-size:11px;color:var(--text-3);
  padding-bottom:8px;border-bottom:1px solid var(--rule);margin-bottom:10px}
.toc{display:grid;gap:1px}
.toc a{font-family:var(--font-mono);font-size:12px;color:var(--text-2);
  padding:5px 8px;border-radius:var(--r);line-height:1.45;
  transition:background .15s,color .15s}
.toc a:hover{background:var(--bg-2);color:var(--signal)}
.toc .l3 a{padding-left:20px}
.art-meta{font-family:var(--font-mono);font-size:12px;color:var(--text-3);
  display:flex;gap:14px;flex-wrap:wrap;padding-bottom:20px;
  border-bottom:1px solid var(--rule);margin-bottom:28px}
.art h1{font-family:var(--font-mono);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(25px,3.4vw,38px);line-height:1.12;margin-bottom:16px}
.body{font-size:17px;line-height:1.75;color:var(--text-2)}
.body h2{font-family:var(--font-mono);font-weight:700;letter-spacing:-.03em;
  font-size:22px;color:var(--text-1);margin:40px 0 14px}
.body h3{font-family:var(--font-mono);font-weight:700;letter-spacing:-.02em;
  font-size:18px;color:var(--text-1);margin:30px 0 12px}
.body p{margin-bottom:20px}
.body ul,.body ol{margin:0 0 22px 20px;display:grid;gap:8px}
.body li{list-style:disc}
.body ol li{list-style:decimal}
.body li::marker{color:var(--signal)}
.body a{color:var(--signal);border-bottom:1px solid transparent;
  transition:border-color .15s}
.body a:hover{border-bottom-color:var(--signal)}
.body blockquote{border-left:2px solid var(--signal);background:var(--bg-2);
  padding:14px 20px;margin:26px 0;color:var(--text-1);font-size:16px}
.body hr{border:0;border-top:1px solid var(--rule);margin:36px 0}
.body :not(pre) > code{font-family:var(--font-mono);font-size:.87em;
  color:var(--signal);background:var(--bg-2);border:1px solid var(--rule);
  border-radius:var(--r);padding:1px 6px}
.body .code-block{position:relative;background:var(--surface);
  border:1px solid var(--rule-strong);border-radius:var(--r-2);
  padding:38px 18px 18px;margin:26px 0;overflow:hidden}
.body .code-block[data-lang]::before{content:attr(data-lang);position:absolute;
  top:0;left:0;font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);
  background:var(--bg-2);border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);border-radius:var(--r-2) 0 var(--r) 0;
  padding:5px 12px}
.body .code-block code{display:block;font-family:var(--font-mono);font-size:13.5px;
  line-height:1.75;color:var(--text-1);background:none;border:0;padding:0;
  white-space:pre;overflow-x:auto}
.copy{position:absolute;top:6px;right:8px;font-family:var(--font-mono);
  font-size:11px;color:var(--text-3);background:var(--bg-2);
  border:1px solid var(--rule);border-radius:var(--r);padding:4px 9px;
  transition:color .15s,border-color .15s}
.copy:hover{color:var(--signal);border-color:var(--signal)}
.copy.done{color:var(--signal);border-color:var(--signal)}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .talk{grid-template-columns:1fr}
  .talk-l{border-right:0;border-bottom:1px solid var(--rule)}
  .log a{grid-template-columns:1fr auto}
  .log .d{display:none}
  .art{grid-template-columns:1fr;gap:0;max-width:720px}
  .art-side{display:none}
}
@media (max-width:760px){
  section{padding:56px 0}
  /* Header controls need the same 44px comfort as everything else. */
  .mode,.burger{width:44px;height:44px}
  .bar-act .btn-sig{display:none}   /* redundant with the menu; frees the row */
  .bar nav{position:fixed;inset:52px 0 auto;flex-direction:column;gap:0;
    background:var(--bg);border-bottom:1px solid var(--rule);
    padding:8px var(--gutter) 16px;display:none}
  .bar nav.open{display:flex}
  .bar nav a{padding:11px 4px;font-size:14px;border-bottom:1px solid var(--rule);
    border-radius:0}
  .burger{display:grid;place-items:center}
  .creds{grid-template-columns:1fr 1fr}
  .pk-f{flex-direction:column;align-items:stretch}
}

/* ============================================================================
   CLIENT PORTAL
   ========================================================================= */

/* --- sign in / create account ------------------------------------------- */
.auth{display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--rule-strong);border-radius:var(--r-2);
  background:var(--surface);margin:52px 0 80px;overflow:hidden}
.auth-l{padding:38px;border-right:1px solid var(--rule);background:var(--bg-2)}
.auth-l h2{font-family:var(--font-mono);font-size:23px;font-weight:700;
  letter-spacing:-.035em;margin-bottom:12px}
.auth-l > p{color:var(--text-2);font-size:15px;line-height:1.65}
.auth-perks{margin-top:26px;display:grid;gap:10px}
.auth-perks li{font-family:var(--font-mono);font-size:12.5px;color:var(--text-2);
  display:flex;gap:9px}
.auth-perks li::before{content:"+";color:var(--signal)}
.auth-pkg{margin-top:24px;padding:16px;border:1px dashed var(--rule-strong);
  border-radius:var(--r);background:var(--surface)}
.auth-r{padding:38px}
.auth-tabs{display:flex;gap:2px;margin-bottom:22px;padding:3px;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--bg-2);width:fit-content}
.auth-tabs a{font-family:var(--font-mono);font-size:12.5px;color:var(--text-2);
  padding:7px 14px;border-radius:var(--r);transition:background .15s,color .15s}
.auth-tabs a.on{background:var(--surface);color:var(--text-1);font-weight:500}
.auth-err{border:1px solid var(--alarm);border-left-width:3px;
  background:var(--alarm-wash);color:var(--alarm);border-radius:var(--r);
  padding:11px 14px;font-family:var(--font-mono);font-size:12.5px;margin-bottom:18px}

/* --- dashboard ----------------------------------------------------------- */
.pt-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding:38px 0 22px;border-bottom:1px solid var(--rule)}
.pt-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  border:1px solid var(--rule-strong);border-radius:var(--r-2);
  background:var(--surface);margin-top:20px;overflow:hidden}
.pt-nums div{padding:18px 20px;border-right:1px solid var(--rule)}
.pt-nums div:last-child{border-right:0}
.pt-nums b{display:block;font-family:var(--font-mono);font-size:24px;font-weight:700;
  letter-spacing:-.035em;line-height:1}
.pt-nums span{display:block;font-family:var(--font-mono);font-size:10.5px;
  color:var(--text-3);margin-top:6px}
.pt-alert{margin-top:14px;padding:11px 15px;font-size:12.5px;
  border:1px solid var(--signal);border-left-width:3px;
  background:var(--signal-wash);border-radius:var(--r);color:var(--signal)}

.pt-tabs{display:flex;gap:2px;margin:26px 0 22px;padding:3px;width:fit-content;
  max-width:100%;overflow-x:auto;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--bg-2)}
.pt-tabs button{font-family:var(--font-mono);font-size:12.5px;color:var(--text-2);
  background:none;border:0;padding:8px 15px;border-radius:var(--r);white-space:nowrap;
  transition:background .15s,color .15s}
.pt-tabs button:hover{color:var(--text-1)}
.pt-tabs button.on{background:var(--surface);color:var(--text-1);font-weight:500}
.pt-panel{display:none}
.pt-panel.on{display:block}

.pt-empty{border:1px dashed var(--rule-strong);border-radius:var(--r-2);
  padding:44px 30px;text-align:center;background:var(--bg-2)}
.pt-empty h3{font-size:17px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.pt-empty p{color:var(--text-2);font-size:14.5px;margin-bottom:20px}

.pt-form{display:grid;gap:14px;max-width:540px}
.pt-two{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}

/* status pill, shared with the order page */
.st{font-family:var(--font-mono);font-size:10.5px;padding:3px 9px;border-radius:var(--r);
  white-space:nowrap;border:1px solid}
.st-pending{color:var(--warn);background:var(--warn-wash);border-color:var(--warn)}
.st-in-progress{color:var(--signal);background:var(--signal-wash);border-color:var(--signal)}
.st-invoiced{color:var(--text-2);background:var(--bg-2);border-color:var(--rule-strong)}
.st-paid{color:var(--signal);background:var(--signal-wash);border-color:var(--signal)}
.st-cancelled{color:var(--text-3);background:var(--bg-2);border-color:var(--rule)}

/* --- single order -------------------------------------------------------- */
.ord{border:1px solid var(--rule-strong);border-radius:var(--r-2);
  background:var(--surface);padding:26px}
.ord-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding-bottom:18px;border-bottom:1px solid var(--rule)}
.ord-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:16px;padding:18px 0;border-bottom:1px dashed var(--rule)}
.ord-meta .fine{display:block;margin-bottom:4px}
.ord-detail{padding-top:18px;color:var(--text-2);font-size:15px;line-height:1.7;
  white-space:pre-wrap}
.thread{display:grid;gap:10px}
.msg{border:1px solid var(--rule);border-radius:var(--r);padding:14px 16px;
  background:var(--bg-2)}
.msg.mine{background:var(--signal-wash);border-color:color-mix(in srgb,var(--signal) 30%,var(--rule))}
.msg-h{display:flex;align-items:center;gap:10px;font-size:11.5px;margin-bottom:7px}
.msg-h b{font-weight:700}
.msg-h span{color:var(--text-3)}
.msg p{color:var(--text-2);font-size:14.5px;line-height:1.65;white-space:pre-wrap}

@media (max-width:860px){
  .auth{grid-template-columns:1fr}
  .auth-l{border-right:0;border-bottom:1px solid var(--rule)}
  .pt-two{grid-template-columns:1fr;gap:28px}
}

/* ============================================================================
   CHECKOUT
   ========================================================================= */

/* The three steps, stated before you start. A manual confirmation is only
   unsettling when it is unexpected. */
.steps{display:flex;gap:0;margin-bottom:34px;border:1px solid var(--rule-strong);
  border-radius:var(--r-2);overflow:hidden;background:var(--surface)}
.steps li{flex:1;display:flex;align-items:center;gap:10px;padding:13px 16px;
  font-family:var(--font-mono);font-size:12.5px;color:var(--text-3);
  border-right:1px solid var(--rule)}
.steps li:last-child{border-right:0}
.steps li span{width:20px;height:20px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--rule-strong);border-radius:50%;font-size:10.5px}
.steps li.on{color:var(--text-1);background:var(--bg-2)}
.steps li.on span{border-color:var(--signal);color:var(--signal)}
.steps li.done{color:var(--signal)}
.steps li.done span{border-color:var(--signal);background:var(--signal);color:var(--on-signal)}

.co{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start}
.co-l h1,.co-h2{font-size:26px;font-weight:700;letter-spacing:-.035em;margin-bottom:12px}
.co-lede{color:var(--text-2);font-size:16px;line-height:1.65;max-width:50ch}

/* order summary */
.co-sum{border:1px solid var(--rule-strong);border-radius:var(--r-2);
  background:var(--surface);padding:20px;position:sticky;top:70px}
.co-sum-h{font-size:11px;color:var(--text-3);padding-bottom:12px;
  border-bottom:1px solid var(--rule);margin-bottom:14px}
.co-line{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:14px}
/* An email address is one unbreakable token too. Flex items refuse to shrink
   below their content by default, so a long address pushed the price off the
   edge of the summary card. */
.co-line span{min-width:0;overflow-wrap:anywhere}
.co-line b{flex-shrink:0}
.co-total{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--rule)}
.co-total b{font-family:var(--font-mono);font-size:24px;font-weight:700;letter-spacing:-.035em}
.co-inc{margin-top:18px;padding-top:16px;border-top:1px dashed var(--rule);display:grid;gap:8px}
.co-inc li{font-family:var(--font-mono);font-size:12px;color:var(--text-2);display:flex;gap:8px}
.co-inc li::before{content:"+";color:var(--signal)}

/* payment method chooser */
.ways{border:0;padding:0;margin:6px 0 0;display:grid;gap:8px}
.ways legend{font-family:var(--font-mono);font-size:11.5px;color:var(--text-3);
  padding:0;margin-bottom:8px}
.way{display:block;cursor:pointer}
.way input{position:absolute;opacity:0;width:0;height:0}
.way-b{display:block;border:1px solid var(--rule-strong);border-radius:var(--r);
  padding:14px 16px;transition:border-color .15s,background .15s}
.way:hover .way-b{border-color:var(--text-3)}
.way input:checked + .way-b{border-color:var(--signal);border-width:2px;
  padding:13px 15px;background:var(--signal-wash)}
.way input:focus-visible + .way-b{outline:2px solid var(--signal);outline-offset:2px}
.way-b b{display:block;font-family:var(--font-mono);font-size:14px;font-weight:700}
.way-b em{display:block;font-style:normal;color:var(--text-2);font-size:13.5px;margin-top:3px}
.way-meta{display:block;font-family:var(--font-mono);font-size:11px;
  color:var(--text-3);margin-top:6px}

/* the account we just made */
.co-new{border:1px solid var(--signal);border-left-width:3px;background:var(--signal-wash);
  border-radius:var(--r);padding:18px 20px;margin-bottom:22px}
.co-new p{color:var(--text-2);font-size:14px;margin:7px 0}
.co-new a{color:var(--signal)}
.co-pw{display:inline-block;font-family:var(--font-mono);font-size:15px;
  background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r);
  padding:8px 14px;margin:4px 0;letter-spacing:1px}

/* status strip — the heart of it */
.co-state{display:flex;align-items:flex-start;gap:14px;padding:20px 22px;
  border:1px solid var(--rule-strong);border-radius:var(--r-2);
  background:var(--surface);margin-bottom:26px}
.co-state-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:5px;
  background:var(--text-3)}
.co-state p{color:var(--text-2);font-size:14px;margin-top:5px;max-width:56ch}
.co-state--awaiting_payment .co-state-dot{background:var(--warn);
  box-shadow:0 0 0 4px var(--warn-wash)}
.co-state--paid_pending .co-state-dot{background:var(--signal);
  box-shadow:0 0 0 4px var(--signal-wash);animation:beat 2s infinite}
.co-state--confirmed .co-state-dot{background:var(--signal);
  box-shadow:0 0 0 4px var(--signal-wash)}
.co-state--rejected .co-state-dot{background:var(--alarm);
  box-shadow:0 0 0 4px var(--alarm-wash)}
.co-ref{margin-left:auto;text-align:right;flex-shrink:0}
.co-ref b{display:block;font-size:15px;letter-spacing:.5px;margin-top:2px}

/* pay instructions */
.pay-card{border:1px solid var(--rule-strong);border-radius:var(--r-2);
  background:var(--surface);overflow:hidden;margin-bottom:16px}
.pay-card-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--rule);background:var(--bg-2);
  font-family:var(--font-mono);font-size:13.5px}
.pay-detail{margin:0;padding:18px;font-family:var(--font-mono);font-size:13px;
  line-height:1.9;white-space:pre-wrap;color:var(--text-1);
  /* A wallet address is a single 42-44 character token with no space or
     hyphen in it, so pre-wrap alone will not break it. At 13px monospace that
     needs ~343px, and a 390px phone gives this box 312px — and .pay-card
     clips overflow, so the tail of the address was silently invisible AND
     unselectable. Which is the one string on the page that has to be copied
     exactly, on the page where getting it wrong loses the money. */
  word-break:break-word;      /* older WebKit */
  overflow-wrap:anywhere}

/* Copying beats reading. Their own instructions say sending to the wrong
   address loses the funds, and nobody should be retyping base58 off a phone
   screen. */
.pay-actions{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 16px}
.pay-card p{padding:0 18px 16px;margin:0}
.pay-switch{margin-bottom:22px}
.pay-switch summary{font-size:12.5px;color:var(--text-3);cursor:pointer;padding:6px 0}
.pay-switch summary:hover{color:var(--signal)}
.pay-switch-in{display:flex;gap:8px;flex-wrap:wrap;padding-top:10px}

/* "I've paid" */
.claim{border-top:1px solid var(--rule);padding-top:24px;margin-top:8px;
  display:grid;gap:14px}
.claim h3{font-size:16px;font-weight:700;letter-spacing:-.02em}
.claim .btn{justify-self:start}

.co-wait p{color:var(--text-2);font-size:15px;line-height:1.7;margin-bottom:14px;max-width:56ch}
.co-wait .btn{margin-top:8px}

/* the key, once issued */
.co-key{border:2px solid var(--signal);border-radius:var(--r-2);
  background:var(--signal-wash);padding:24px}
.co-key code{display:block;font-family:var(--font-mono);font-size:12.5px;
  word-break:break-all;line-height:1.7;background:var(--surface);
  border:1px solid var(--rule-strong);border-radius:var(--r);
  padding:14px 16px;margin:6px 0 12px}
.co-key-do{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;
  padding-top:18px;border-top:1px dashed color-mix(in srgb,var(--signal) 40%,transparent)}

@media (max-width:820px){
  .co{grid-template-columns:1fr}
  .co-sum{position:static}
  /* .steps rules for this breakpoint live in the consolidated block below —
     they used to be duplicated here and silently overridden. */
  .co-state{flex-wrap:wrap}
  .co-ref{margin-left:0;text-align:left}
}

/* ============================================================================
   HIRE + THE SEALED CREDENTIAL AREA

   This has to look and feel different from the rest of the form furniture,
   because it is asking for something genuinely dangerous to hand over. The
   design job is to earn that, not decorate it.
   ========================================================================= */
.hire-how{display:grid;gap:11px;counter-reset:h}
.hire-how li{position:relative;padding-left:26px;font-size:13px;color:var(--text-2);
  line-height:1.55;counter-increment:h}
.hire-how li::before{content:counter(h);position:absolute;left:0;top:1px;
  width:17px;height:17px;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:10px;color:var(--signal);
  border:1px solid color-mix(in srgb,var(--signal) 40%,transparent);border-radius:50%}
.hire-how b{color:var(--text-1)}

.vault{border:2px solid var(--signal);border-radius:var(--r-2);
  background:var(--surface);overflow:hidden}
.vault-h{display:flex;gap:14px;padding:20px 22px;background:var(--signal-wash);
  border-bottom:1px solid color-mix(in srgb,var(--signal) 30%,transparent)}
.vault-lock{width:34px;height:34px;flex-shrink:0;border-radius:var(--r);
  display:grid;place-items:center;background:var(--signal);color:var(--on-signal)}
.vault-lock svg{width:17px;height:17px}
.vault-h h2{font-size:15px;font-weight:700;letter-spacing:-.02em}
.vault-h p{color:var(--text-2);font-size:13.5px;line-height:1.6;margin-top:4px;max-width:58ch}

.vault-list{border-bottom:1px solid var(--rule)}
.vault-item{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 22px;border-bottom:1px solid var(--rule)}
.vault-item:last-child{border-bottom:0}
.vault-item b{display:block;font-size:13.5px}
.vault-item .fine{display:block;margin-top:3px}
.vault-item.gone{opacity:.5}
.vault-item.gone b::before{content:"✕ ";color:var(--text-3)}

.vault-form-wrap summary{padding:16px 22px;cursor:pointer;font-size:13.5px;
  font-weight:700;color:var(--signal)}
.vault-form-wrap summary:hover{background:var(--bg-2)}
.vault-form{display:grid;gap:14px;padding:6px 22px 24px}
.vault-note{font-size:12.5px;color:var(--text-2);line-height:1.65;
  background:var(--bg-2);border:1px dashed var(--rule-strong);border-radius:var(--r);
  padding:14px 16px;margin-top:4px}
.vault-note b{color:var(--text-1)}

/* ============================================================================
   CHECKOUT ON SMALL SCREENS

   Three real problems on a phone, each fixed deliberately:

     1. The price sat below a long form, so a buyer scrolled through every
        field before learning what they were paying. The summary is moved
        above the form and condensed to one line.
     2. Inputs and buttons were 36–40px tall. Both Apple and Google specify
        44px as the minimum comfortable touch target.
     3. The submit button scrolled out of reach on a long form, so it is
        pinned to the bottom of the viewport.
   ========================================================================= */
@media (max-width:820px){

  /* --- price first ---------------------------------------------------- */
  .co{display:flex;flex-direction:column;gap:20px}
  .co-r{order:-1}                     /* summary above the form */

  .co-sum{padding:14px 16px}
  .co-sum-h{display:none}             /* "order" is obvious in context */
  /* Collapse to a single legible line: product on the left, price on the right */
  .co-sum .co-line:first-of-type{align-items:baseline;font-size:15px}
  .co-sum .co-line:first-of-type b{font-family:var(--font-mono);font-size:22px;
    font-weight:700;letter-spacing:-.035em}
  .co-total{display:none}             /* the line above already says it */
  .co-inc{margin-top:12px;padding-top:12px;
    display:flex;flex-wrap:wrap;gap:6px 14px}
  .co-inc li{font-size:11px}

  /* --- comfortable touch targets -------------------------------------- */
  input,select,textarea{font-size:16px;padding:13px 14px;min-height:48px}
  /* 16px specifically: iOS zooms the whole page in if a focused input is
     smaller than this, which yanks the layout sideways mid-typing. */
  textarea{min-height:110px}
  .btn{min-height:48px;padding:14px 20px;font-size:14px}
  .btn-sm{min-height:40px}
  .way-b{padding:16px}
  .way input:checked + .way-b{padding:15px}
  .vault-form-wrap summary,.pay-switch summary{min-height:48px;
    display:flex;align-items:center}

  /* --- steps: readable, not squeezed ---------------------------------- */
  .steps{flex-wrap:wrap}
  .steps li{flex:1 1 auto;min-width:0;justify-content:center;
    padding:11px 8px;font-size:11px;gap:6px}
  .steps li span{display:grid;width:17px;height:17px;font-size:9.5px}
  /* Four-step flows wrap to two rows rather than shrinking to nothing. */
  .steps li:nth-child(n+4){border-top:1px solid var(--rule)}

  /* --- the submit button sits at the end of the form, in normal flow ----
     It was sticky, which pinned it partway down a tall form and covered the
     payment options underneath. Reachability is not worth hiding the thing
     being chosen. */
  .co-l form > button[type=submit],
  .claim > button[type=submit]{width:100%;margin-top:4px}

  /* --- status strip stacks cleanly ------------------------------------ */
  .co-state{flex-direction:column;gap:12px;padding:18px}
  .co-ref{margin-left:0;text-align:left;display:flex;align-items:baseline;gap:10px;
    padding-top:12px;border-top:1px dashed var(--rule);width:100%}
  .co-ref b{margin-top:0}

  /* --- payment details must not overflow ------------------------------ */
  .pay-detail{font-size:12px;padding:14px;overflow-x:auto}
  .co-key code{font-size:11px;padding:12px}

  /* --- hire page: how-it-works reads better below the form ------------ */
  .hire-how li{font-size:13.5px}

  /* --- sealed area ---------------------------------------------------- */
  .vault-h{padding:16px}
  .vault-form{padding:6px 16px 20px}
  .vault-item{flex-direction:column;align-items:flex-start;gap:10px}
  .vault-item form{width:100%}
  .vault-item .btn{width:100%}
}

/* Very narrow phones (SE and similar) */
@media (max-width:380px){
  /* .steps rules for this breakpoint live in the consolidated block below —
     they used to be duplicated here and silently overridden. */
  .co-sum .co-line:first-of-type b{font-size:20px}
}

/* ============================================================================
   CLIENT PORTAL ON A PHONE

   The portal is the thing a client opens on their phone to check progress, so
   it gets the same one-handed treatment as the admin: nothing under 44px, and
   the tab strip scrolls rather than shrinking.
   ========================================================================= */
@media (max-width:820px){
  .portal{padding:20px 0 40px}

  .pt-top{padding:22px 0 18px;gap:14px}
  .pt-top h1{font-size:19px}

  /* Counters two-up rather than a squeezed single row. */
  .pt-nums{grid-template-columns:1fr 1fr}
  .pt-nums div{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .pt-nums div:nth-child(2n){border-right:0}
  .pt-nums div:nth-last-child(-n+2){border-bottom:0}
  .pt-nums b{font-size:21px}

  /* Tabs scroll horizontally, each one a proper target. */
  .pt-tabs{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .pt-tabs::-webkit-scrollbar{display:none}
  .pt-tabs button{min-height:44px;padding:0 16px;white-space:nowrap}

  /* Order rows restack: title on its own line, meta beneath. */
  .pt-panel .item{grid-template-columns:1fr auto!important;gap:10px!important;
    padding:16px 4px}
  .pt-panel .item .n{display:none}
  .pt-panel .item .go{display:none}

  .pt-form{max-width:none}
  .pt-form .btn{width:100%}
  .pt-two{grid-template-columns:1fr;gap:20px}

  /* Single order */
  .ord{padding:18px}
  .ord-h{flex-direction:column;align-items:flex-start;gap:10px}
  .ord-meta{grid-template-columns:1fr;gap:12px}
  .pt-reply .btn{width:100%}

  /* Everything tappable clears 44px. */
  .pt-out,.pt-back,.pt-jump{min-height:44px;display:inline-flex;align-items:center}
  input,select,textarea{font-size:16px;min-height:48px}
}

@media (max-width:380px){
  .pt-nums b{font-size:19px}
  .pt-tabs button{font-size:12px;padding:0 13px}
}

/* ============================================================================
   CHECKOUT TYPOGRAPHY ON A PHONE

   The earlier pass fixed layout — nothing overflowed, every target cleared
   44px — but the page was still typeset for a desktop and then shrunk. Labels
   at 11.5px, step text at 11px, numbers at 9.5px. Technically fine, actually
   unpleasant to use at arm's length on a bus.

   Mono is the display face here, and mono runs visually smaller than a sans
   at the same px, so these sizes have to be more generous than they would be
   in a conventional design, not less.
   ========================================================================= */
@media (max-width:820px){

  /* --- form labels: the worst offender ---------------------------------- */
  .co label,.talk-r label,.pt-form label,.vault-form label,.pr-form label{
    font-size:13px;letter-spacing:.01em;color:var(--text-2)}
  .co label span,.pt-form label span{font-size:12.5px}
  .fine,.co-sum .co-line.fine,.pk-free{font-size:12.5px;line-height:1.55}

  /* --- steps: one column each, so they cannot collide ------------------ */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch}
  /* the hire flow has four */
  .steps:has(li:nth-child(4)){grid-template-columns:repeat(2,1fr)}
  .steps:has(li:nth-child(4)) li:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .steps li{font-size:12px;padding:12px 8px;gap:7px;min-width:0;
    flex-direction:column;text-align:center;justify-content:flex-start}
  .steps li span{display:grid;width:20px;height:20px;font-size:11px;font-weight:700;
    margin:0 auto}

  /* --- lede: give it a measure rather than the full bleed --------------- */
  .co-lede{font-size:16px;line-height:1.6;max-width:34ch}
  .co-l h1,.co-h2{font-size:24px;line-height:1.15;margin-bottom:10px}

  /* --- consistent rhythm: one gutter, not four ------------------------- */
  .co-sum{padding:18px}
  .way-b{padding:17px 18px}
  .way input:checked + .way-b{padding:16px 17px}
  .pay-card-h,.pay-detail{padding-left:18px;padding-right:18px}
  .co-state{padding:20px 18px}

  /* --- payment options: the thing being chosen should lead ------------- */
  .way-b b{font-size:15.5px}
  .way-b em{font-size:14px;margin-top:4px;line-height:1.5}
  .way-meta{font-size:12px;margin-top:8px}
  .ways legend{font-size:13px;margin-bottom:10px}

  /* --- order summary: price is the point ------------------------------- */
  .co-sum .co-line:first-of-type{font-size:15.5px}
  .co-sum .co-line:first-of-type b{font-size:25px}
  .co-inc li{font-size:12px}

  /* --- status strip ---------------------------------------------------- */
  .co-state b{font-size:14.5px}
  .co-state p{font-size:14px;line-height:1.6}
  .co-ref b{font-size:16px}

  /* --- payment instructions are meant to be copied --------------------- */
  .pay-detail{font-size:13px;line-height:2}
  .pay-card-h{font-size:14px}
  .claim h3{font-size:16.5px}

  /* --- breadcrumb ------------------------------------------------------ */
  .crumbs{font-size:12.5px;margin-bottom:16px}

  /* --- vertical breathing ---------------------------------------------- */
  .co{gap:24px}
  .co-l form{gap:18px!important}
  .steps{margin-bottom:26px}
}

/* Narrow phones: pull back, but not below readable. */
@media (max-width:380px){
  .steps li{font-size:11.5px;padding:12px 7px;gap:6px}
  .steps li span{width:18px;height:18px;font-size:10px}
  .co label{font-size:12.5px}
  .co-lede{font-size:15.5px}
  .co-l h1,.co-h2{font-size:22px}
  .co-sum .co-line:first-of-type b{font-size:22px}
}

/* ============================================================================
   MY PLUGINS — what a buyer sees after paying
   ========================================================================= */
.lic{border:1px solid var(--rule-strong);border-radius:var(--r-2);
  background:var(--surface);overflow:hidden;margin-bottom:16px}
.lic-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:20px 22px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.lic-h h3{font-size:18px;font-weight:700;letter-spacing:-.03em;margin-bottom:4px}

.lic-key{padding:20px 22px;background:var(--signal-wash);
  border-bottom:1px solid var(--rule)}
.lic-key-row{display:flex;align-items:center;gap:10px;margin:7px 0 8px;flex-wrap:wrap}
.lic-key code{flex:1;min-width:0;font-family:var(--font-mono);font-size:12px;
  line-height:1.7;word-break:break-all;background:var(--surface);
  border:1px solid var(--rule-strong);border-radius:var(--r);padding:12px 14px}
.lic-copy{flex-shrink:0}

.lic-dl{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;flex-wrap:wrap}
.lic-dl b{display:block;font-size:15px;margin-bottom:3px}
.lic-notes{padding:0 22px 18px;color:var(--text-2);font-size:14px;line-height:1.6}
.lic-notes b{color:var(--text-1)}

.lic-sites{padding:16px 22px;border-top:1px dashed var(--rule);background:var(--bg-2)}
.lic-sites ul{display:grid;gap:7px;margin-top:9px}
.lic-sites li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:13.5px}

@media (max-width:820px){
  .lic-h,.lic-key,.lic-dl,.lic-sites{padding-left:18px;padding-right:18px}
  .lic-dl{flex-direction:column;align-items:stretch;gap:12px}
  .lic-dl .btn{width:100%}
  .lic-key code{font-size:11.5px;width:100%}
  .lic-copy{width:100%}
}

/* ============================================================================
   CHECKOUT WIZARD — one question per screen

   The three-boxes-in-a-row progress strip was where the mobile layout kept
   failing. A single line and a bar cannot overlap, cannot wrap, and reads the
   same at 320px as at 1280px.

   Steps are only hidden once JavaScript has run (.wz-live). Without it every
   step stays visible and the form still submits — the wizard is an
   enhancement, never a requirement.
   ========================================================================= */
.wz-bar{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.wz-count{font-family:var(--font-mono);font-size:12.5px;color:var(--text-3);
  white-space:nowrap}
.wz-count b{color:var(--signal);font-weight:700}
.wz-track{flex:1;height:3px;background:var(--rule);border-radius:2px;overflow:hidden}
.wz-fill{display:block;height:100%;width:33%;background:var(--signal);
  border-radius:2px;transition:width .3s var(--ease)}

/* what you are buying, pinned above the form */
.wz-item{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;margin-bottom:20px;
  border:1px solid var(--rule-strong);border-radius:var(--r-2);background:var(--surface)}
/* Belt and braces: a flex child will not shrink below its content, so a long
   product name or price note could otherwise push the price past the edge on
   a narrow phone. */
.wz-item{flex-wrap:wrap}
.wz-item > div{min-width:0;flex:1 1 auto}
.wz-item b{display:block;font-size:15.5px;overflow-wrap:anywhere}
.wz-item .fine{display:block;margin-top:3px;overflow-wrap:anywhere}
.wz-price{font-family:var(--font-mono);font-size:24px;font-weight:700;
  letter-spacing:-.035em;white-space:nowrap}

/* A wizard step is a <section>, and the global `section{padding:84px 0}` is
   meant for full-width landing-page bands. Inherited here it put 84px of dead
   space above and below every step — on a phone that pushed the heading down
   the screen and the Continue button towards the fold. */
.wz-step{display:block;padding:0}
.wz-live .wz-step{display:none}
.wz-live .wz-step.on{display:block;animation:wzIn .25s var(--ease)}
@keyframes wzIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.wz-h{font-family:var(--font-mono);font-size:21px;font-weight:700;
  letter-spacing:-.03em;margin-bottom:6px}
.wz-sub{color:var(--text-2);font-size:15px;line-height:1.55;margin-bottom:20px}

.wz label{display:grid;gap:7px;margin-bottom:18px;
  font-family:var(--font-mono);font-size:13px;color:var(--text-2)}
.wz input,.wz textarea,.wz select{font-family:var(--font-body);font-size:16px;
  color:var(--text-1);background:var(--bg);border:1px solid var(--rule-strong);
  border-radius:var(--r);padding:13px 14px;width:100%;min-height:50px}
.wz input:focus,.wz textarea:focus{outline:none;border-color:var(--signal)}
.wz textarea{min-height:120px;resize:vertical}

.wz-ways{display:grid;gap:10px;margin-bottom:22px}
.wz-ways .way{display:block;cursor:pointer;margin:0}
.wz-ways .way input{position:absolute;opacity:0;width:0;height:0;min-height:0}
.wz-ways .way-b{display:block;border:1px solid var(--rule-strong);
  border-radius:var(--r);padding:16px 18px;transition:border-color .15s,background .15s}
.wz-ways .way input:checked + .way-b{border-color:var(--signal);border-width:2px;
  padding:15px 17px;background:var(--signal-wash)}
.wz-ways .way input:focus-visible + .way-b{outline:2px solid var(--signal);outline-offset:2px}
.wz-ways .way-b b{display:block;font-family:var(--font-mono);font-size:15.5px;font-weight:700}
.wz-ways .way-b em{display:block;font-style:normal;color:var(--text-2);
  font-size:14px;margin-top:4px;line-height:1.5}
.wz-ways .way-meta{display:block;font-family:var(--font-mono);font-size:12px;
  color:var(--text-3);margin-top:8px}

.wz-nav{display:flex;gap:10px}
.wz-nav .btn{flex:1;min-height:50px}
.wz .btn-block{min-height:50px}

.wz-inc{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;padding-top:18px;
  border-top:1px dashed var(--rule)}
.wz-inc li{font-family:var(--font-mono);font-size:12px;color:var(--text-3);
  display:flex;gap:7px}
.wz-inc li::before{content:"+";color:var(--signal)}

.wz-how{margin-top:28px;padding:20px;border:1px dashed var(--rule-strong);
  border-radius:var(--r-2);background:var(--bg-2)}
.wz-how b{display:block;font-size:11.5px;color:var(--text-3);margin-bottom:12px}
.wz-how ol{display:grid;gap:9px;counter-reset:h;padding:0}
.wz-how li{position:relative;padding-left:26px;font-size:13.5px;color:var(--text-2);
  line-height:1.55;counter-increment:h;list-style:none}
.wz-how li::before{content:counter(h);position:absolute;left:0;top:1px;
  width:17px;height:17px;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:10px;color:var(--signal);
  border:1px solid color-mix(in srgb,var(--signal) 40%,transparent);border-radius:50%}

@media (min-width:760px){
  .wz{max-width:560px}
  .wz-h{font-size:24px}
}

/* ---------------------------------------------------------------------------
   "Viewing as" bar.

   Deliberately loud, and sticky, and above everything else. The whole risk of
   an impersonation feature is forgetting you are in it — so this does not get
   to be subtle or scroll away.
   ------------------------------------------------------------------------ */
.imp-bar{
  position:sticky; top:0; z-index:9999;
  background:repeating-linear-gradient(135deg,#7a2d00,#7a2d00 12px,#8f3600 12px,#8f3600 24px);
  color:#ffe9d6;
  border-bottom:1px solid #ffb27d;
  font-size:13px;
}
.imp-in{ display:flex; align-items:center; gap:12px; padding:9px 0; flex-wrap:wrap; }
.imp-dot{
  width:9px; height:9px; border-radius:50%; background:#ff9b52; flex:none;
  box-shadow:0 0 0 3px rgba(255,155,82,.25);
  animation:imp-pulse 1.6s ease-in-out infinite;
}
@keyframes imp-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.imp-txt{ flex:1 1 auto; min-width:0; }
.imp-txt b{ color:#fff; }
.imp-form{ margin:0; flex:none; }
.imp-exit{
  font:inherit; cursor:pointer;
  background:#ffe9d6; color:#7a2d00; border:0;
  padding:5px 12px; border-radius:5px; font-weight:600;
}
.imp-exit:hover{ background:#fff; }
@media (prefers-reduced-motion:reduce){ .imp-dot{ animation:none } }

/* ---------------------------------------------------------------------------
   Portal: the plugin catalogue.

   Mobile-first — one column, and the price/button row wraps under the name on
   a narrow screen rather than squeezing the title into two characters.
   ------------------------------------------------------------------------ */
.pt-sec{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);margin:6px 0 12px;font-weight:700}
.pt-sec + .pt-store{margin-top:0}

.pt-store{display:grid;gap:10px;margin-bottom:8px}
.pt-sku{display:flex;align-items:center;justify-content:space-between;
  gap:12px 16px;flex-wrap:wrap;
  border:1px solid var(--rule-strong);border-radius:var(--r-2);
  background:var(--surface);padding:16px 18px}
.pt-sku-t{min-width:0;flex:1 1 200px}
.pt-sku-t b{display:block;font-size:15.5px;overflow-wrap:anywhere}
.pt-sku-t a:hover b{color:var(--signal)}
.pt-sku-t .fine{display:block;margin-top:3px;line-height:1.5;overflow-wrap:anywhere}
.pt-sku-a{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-left:auto}
.pt-sku-btns{display:flex;gap:8px;flex:0 0 auto}
.pt-sku-p{font-size:19px;font-weight:700;letter-spacing:-.03em;white-space:nowrap}

@media (max-width:520px){
  /* Below this the name and the buy row each get a full line of their own. */
  .pt-sku{padding:15px 16px}
  .pt-sku-a{width:100%;margin-left:0;justify-content:space-between}
  /* Two buttons plus a price will not sit on one line at 360px, so the price
     keeps the left and the pair shares the rest. */
  .pt-sku-btns{flex:1 1 auto;justify-content:flex-end}
  .pt-sku-btns .btn{flex:0 1 auto;padding-left:14px;padding-right:14px}
}

/* Narrow single-purpose auth pages (forgot / reset). */
.auth-narrow{max-width:420px}
.auth-alt{margin-top:14px;font-size:13.5px}
.auth-alt a{color:var(--signal)}

/* ---------------------------------------------------------------------------
   Document verification (/verify)

   The result is the page, so it is given the weight of a result rather than a
   card in a list: one wide block, a state mark, and the figures in the mono.
   The three states are colour-coded, but never colour-only — each carries a
   mark and a sentence, because "superseded" and "withdrawn" are different
   facts and a red tint alone cannot say which.
   ------------------------------------------------------------------------ */
.vf-form{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.vf-in{flex:1 1 260px;min-width:0;padding:12px 14px;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--rule-strong);border-radius:var(--r);
  background:var(--surface);color:var(--text-1)}
.vf-in::placeholder{color:var(--text-3);letter-spacing:.06em}
.vf-in:focus{border-color:var(--signal)}
.vf-form .btn{flex:0 0 auto}

.vf-card{border:1px solid var(--rule-strong);border-radius:var(--r-2);
  background:var(--surface);overflow:hidden}
.vf-card::before{content:"";display:block;height:3px;background:var(--rule-strong)}
.vf-good::before{background:var(--signal)}
.vf-warn::before{background:var(--warn)}
.vf-bad::before{background:var(--alarm)}

.vf-top{display:flex;align-items:flex-start;gap:14px;padding:20px 22px 16px;
  border-bottom:1px solid var(--rule)}
.vf-mark{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:700;
  background:var(--bg-2);color:var(--text-2)}
.vf-good .vf-mark{background:var(--signal);color:var(--on-signal)}
.vf-warn .vf-mark{background:var(--warn-wash);color:var(--warn)}
.vf-bad .vf-mark{background:var(--alarm-wash);color:var(--alarm)}
.vf-top b{display:block;font-size:15px;letter-spacing:-.02em}
.vf-state{display:block;margin-top:3px;font-size:13.5px;color:var(--text-2)}

.vf-rows{margin:0;padding:6px 22px 4px}
.vf-rows div{display:flex;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--rule)}
.vf-rows div:last-child{border-bottom:0}
.vf-rows dt{flex:0 0 130px;margin:0;font-family:var(--font-mono);
  font-size:11px;color:var(--text-3)}
.vf-rows dd{margin:0;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;
  font-size:14.5px}
.vf-total{font-size:17px;font-weight:700;letter-spacing:-.02em}

.vf-note{padding:16px 22px 20px;font-size:13.5px;line-height:1.6;
  color:var(--text-2);background:var(--bg-2);
  border-top:1px solid var(--rule)}
.vf-foot{margin-top:20px;font-size:11.5px;color:var(--text-3)}

@media (max-width:520px){
  /* The label column costs more than it earns on a phone: stack it. */
  .vf-rows div{flex-direction:column;gap:3px;padding:10px 0}
  .vf-rows dt{flex:0 0 auto}
}

/* ---------------------------------------------------------------------------
   The human check

   Set as a prompt line, because that is this site's whole vocabulary. It has
   to read as part of the form rather than as a checkpoint bolted onto the end
   of it — the person filling this in usually has a site that is down.
   ------------------------------------------------------------------------ */
.cap{border:1px solid var(--rule);border-radius:var(--r-2);
  background:var(--bg-2);padding:13px 15px 14px;margin:2px 0 4px}
.cap-cmd{display:block;font-size:11px;color:var(--text-3);margin-bottom:9px}
.cap-cmd::before{content:"";}
.cap-row{display:flex;align-items:center;gap:12px}
.cap-q{margin:0;display:flex;align-items:center;flex:0 0 auto}
.cap-sum{font-size:16px;font-weight:700;letter-spacing:.04em;color:var(--text-1)}
.cap-in{width:74px;flex:0 0 auto;padding:9px 10px;text-align:center;
  font-size:16px;/* 16px or iOS zooms the whole page on focus */
  border:1px solid var(--rule-strong);border-radius:var(--r);
  background:var(--surface);color:var(--text-1)}
.cap-in:focus{border-color:var(--signal);outline:2px solid var(--signal);outline-offset:1px}

/* Off-screen rather than display:none — some bots skip anything hidden
   outright, and this one is meant to look fillable. */
.cap-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------------------------------------------------------------------
   Symptom chips

   Six things that are actually wrong when somebody lands on this form. Picking
   one writes a line into the message, so the visitor does not have to describe
   a state they may not have words for.
   ------------------------------------------------------------------------ */
.sym{margin-bottom:6px}
.sym-lbl{display:block;font-size:11.5px;color:var(--text-3);margin-bottom:9px}
.sym-set{display:flex;flex-wrap:wrap;gap:7px}
.sym-chip{font-family:var(--font-mono);font-size:12px;line-height:1;
  padding:9px 12px;border:1px solid var(--rule-strong);border-radius:var(--r);
  background:var(--surface);color:var(--text-2);
  transition:border-color .15s,color .15s,background .15s,box-shadow .15s}
.sym-chip:hover{border-color:var(--text-3);color:var(--text-1)}
.sym-chip.on{border-color:var(--signal);color:var(--signal);
  background:var(--signal-wash);box-shadow:inset 0 0 0 1px var(--signal)}
.sym-chip.on::before{content:"\2713 ";font-weight:700}

/* ---------------------------------------------------------------------------
   Contact page
   ------------------------------------------------------------------------ */
.steps{list-style:none;margin:0 0 28px;padding:0;
  display:grid;gap:20px;counter-reset:none}
.steps li{display:flex;gap:14px;align-items:flex-start}
.steps-n{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--signal);
  padding-top:2px;min-width:22px}
.steps b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em;
  margin-bottom:3px}
.steps p{color:var(--text-2);font-size:14px;line-height:1.6}

.ch-set{border-top:1px solid var(--rule);padding-top:18px;display:grid;gap:11px}
.ch-plain{color:var(--text-2);width:auto}
.talk-more{margin-top:16px;font-size:13.5px}
.talk-more a{color:var(--signal);border-bottom:1px solid transparent}
.talk-more a:hover{border-bottom-color:var(--signal)}

.talk-urgent{margin-top:22px;padding:14px 16px;border-radius:var(--r-2);
  background:var(--warn-wash);border:1px solid var(--rule);
  font-size:13.5px;line-height:1.6;color:var(--text-2)}
.talk-urgent b{display:block;color:var(--warn);font-size:12.5px;margin-bottom:3px}

@media (max-width:640px){
  /* The chips wrap to three lines on a phone and start to dominate the form,
     so they get a little less air than the desktop set. */
  .sym-chip{padding:8px 11px;font-size:11.5px}
  .cap-row{gap:10px}
}

/* An inline form error, for the pages that re-render rather than redirecting
   with a flash. Set as an exit line, in the same voice as the terminal. */
.wz-err{margin:0 0 16px;padding:11px 13px;border-radius:var(--r);
  font-size:13px;line-height:1.5;
  background:var(--alarm-wash);color:var(--alarm);
  border:1px solid var(--alarm);border-left-width:3px}
.wz-err::before{content:"exit 1 \00b7 ";opacity:.7}

/* ---------------------------------------------------------------------------
   Choosing a password after an order

   The page has to read as the last step of something that already went right,
   not as a new obstacle — so it opens with the thing that just succeeded.
   ------------------------------------------------------------------------ */
.setpw-step{display:flex;align-items:center;gap:9px;font-size:12px;
  color:var(--signal);margin-bottom:18px}
.setpw-tick{display:grid;place-items:center;width:18px;height:18px;flex:0 0 auto;
  border-radius:50%;background:var(--signal);color:var(--on-signal);font-size:10px}

.setpw-rules{margin:2px 0 6px;padding:0;display:grid;gap:7px}
.setpw-rules li{position:relative;padding-left:18px;font-size:13px;
  color:var(--text-2);line-height:1.5}
.setpw-rules li::before{content:"\2014";position:absolute;left:0;
  color:var(--text-3)}
.setpw-note{margin-top:18px;line-height:1.6}