/* ============================================================
   initcap.pro — the same console the product is.

   The desktop application has a strong visual identity: a dark
   ground, a cyan instrument glow, corner-bracketed panels, an
   engineering grid, monospaced labels in wide capitals. The site
   and the web application use it too, so that the thing you buy
   and the place you buy it are recognisably one product.

   DARK ONLY, deliberately. This palette is the brand, not a
   preference — a light variant would be a different product's
   skin on the same pages. Long-form text is set in a normal
   weight at high contrast (#d7f2ff on #03080d) so that reading a
   pricing page is not an act of endurance.

   Everything here is drawn with borders, gradients and clip-path.
   No images, no icon font, no web font: the whole identity is
   about 12 KB of CSS and works before anything else has loaded.
   ============================================================ */

:root{
  /* Taken verbatim from Desktop-app/app/index.html. If they drift,
     the site stops looking like the product. */
  --bg:#03080d;
  --panel:rgba(10,26,38,.62);
  --panel-2:rgba(16,40,56,.7);
  --line:rgba(77,216,255,.22);
  --line-hot:rgba(77,216,255,.55);
  --ink:#d7f2ff;
  --dim:#6f97ad;
  --accent:#4dd8ff;
  --ok:#2ee696;
  --warn:#ffb84d;
  --danger:#ff5a5a;
  --glow:0 0 12px rgba(77,216,255,.35);
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--ink);
  font:15px/1.7 var(--sans);-webkit-font-smoothing:antialiased;
}

/* Ground: vignette plus a faint engineering grid — the same two
   gradients the console draws behind its instruments. */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(77,216,255,.07), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(77,216,255,.05), transparent 60%),
    linear-gradient(rgba(77,216,255,.030) 1px, transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg, rgba(77,216,255,.030) 1px, transparent 1px) 0 0/34px 100%;
}
/* Scanlines. Static, and faint enough to read through — the point is
   the impression of a screen, not a distraction from the words on it. */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:repeating-linear-gradient(180deg,
    rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px);
  mix-blend-mode:multiply;opacity:.5;
}
header,main,footer{position:relative;z-index:1}

a{color:var(--accent);text-decoration:none}
a:hover{text-shadow:var(--glow);text-decoration:underline}
code{font-family:var(--mono);font-size:.92em;color:var(--accent)}

/* ── chrome ─────────────────────────────────────────────── */
.top{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:14px 30px;
  background:linear-gradient(180deg, rgba(77,216,255,.07), transparent);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(77,216,255,.10), 0 10px 30px -22px rgba(77,216,255,.6);
}
.brand{
  font-family:var(--mono);letter-spacing:.22em;text-transform:uppercase;
  font-size:13px;color:var(--accent);text-shadow:var(--glow);
}
.brand::before{content:'◈ ';opacity:.8}
.brand:hover{text-decoration:none}
.top nav{margin-left:auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.top nav a{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);
}
.top nav a:hover{color:var(--accent);text-decoration:none;text-shadow:var(--glow)}
main{max-width:900px;margin:0 auto;padding:42px 26px 90px}
main.wide{max-width:1200px}
footer{
  border-top:1px solid var(--line);padding:22px 30px;color:var(--dim);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
}

/* ── type ───────────────────────────────────────────────── */
h1{
  font-family:var(--mono);font-size:20px;line-height:1.35;margin:0 0 16px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  text-shadow:var(--glow);font-weight:600;
}
h1::before{content:'◈ ';opacity:.75}
h2{
  font-family:var(--mono);font-size:12px;margin:42px 0 14px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  text-shadow:0 0 10px rgba(77,216,255,.25);font-weight:600;
}
h2::before{content:'▚ ';opacity:.55}
h3{font-family:var(--mono);font-size:11.5px;margin:0 0 10px;
   letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.lead{font-size:16px;color:var(--dim);margin:0 0 22px;line-height:1.75}
.meta{color:var(--dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em}
.fine{color:var(--dim);font-size:12.5px;line-height:1.7}
.opt{color:var(--dim);font-weight:400;font-size:10px}
.dim{color:var(--dim)}

/* ── panels, with corner brackets ───────────────────────── */
.card,.plan,.summary,.strip,.settings,.keyBox,.form,.tile{
  background:var(--panel);border:1px solid var(--line);border-radius:2px;
  backdrop-filter:blur(2px);position:relative;
  box-shadow:inset 0 0 40px -30px var(--accent);
}
.card::before,.card::after,.plan::before,.plan::after{
  content:'';position:absolute;width:12px;height:12px;pointer-events:none;
  border:1px solid var(--line-hot);
}
.card::before,.plan::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.card::after,.plan::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

.card,.plan,.summary,.strip,.settings{padding:22px 24px}
.hero{padding:8px 0 34px;border-bottom:1px solid var(--line);margin-bottom:34px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.split{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:28px 0}
.toolHead{border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:10px}
.strip{margin-top:38px}

.ticks{list-style:none;padding:0;margin:0}
.ticks li{padding:6px 0 6px 26px;position:relative;font-size:14px}
.ticks li::before{content:'▸';position:absolute;left:2px;color:var(--accent);
  text-shadow:var(--glow);font-size:11px;top:8px}
.ticks.small li{font-size:13px;padding-top:4px;padding-bottom:4px}

/* ── the tools index ────────────────────────────────────── */
.toolRow{
  display:grid;grid-template-columns:56px 1fr auto;gap:20px;align-items:center;
  padding:18px 22px;margin-bottom:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:2px;
  backdrop-filter:blur(2px);position:relative;transition:border-color .15s,transform .15s;
}
.toolRow:hover{border-color:var(--line-hot);transform:translateX(2px)}
.toolRow::before{content:'';position:absolute;top:-1px;left:-1px;width:12px;height:12px;
  border:1px solid var(--line-hot);border-right:0;border-bottom:0}
/* A drawn glyph rather than an image: no request, no broken icon. */
.toolMark{
  width:56px;height:56px;display:grid;place-items:center;
  border:1px solid var(--line-hot);border-radius:2px;
  background:radial-gradient(120% 120% at 30% 20%, rgba(77,216,255,.16), transparent 70%);
  font-family:var(--mono);font-size:17px;letter-spacing:.06em;color:var(--accent);
  text-shadow:var(--glow);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.toolRow h2{margin:0 0 4px;font-size:12px}
.toolRow h2::before{content:none}
.toolRow p{margin:0;font-size:13.5px;color:var(--dim);line-height:1.55}
.toolRow .right{text-align:right;white-space:nowrap}
.toolTags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tag2{
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line);padding:2px 6px;border-radius:2px;
}
.tag2.on{color:var(--ok);border-color:var(--ok)}
.tag2.soon{color:var(--warn);border-color:var(--warn)}
.fromPrice{font-family:var(--mono);font-size:18px;color:var(--accent);text-shadow:var(--glow)}
.fromPrice small{display:block;font-size:9px;letter-spacing:.14em;color:var(--dim);
  text-transform:uppercase;text-shadow:none}

/* ── pricing ────────────────────────────────────────────── */
.plans{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));margin-top:16px}
.plan.trial{border-color:var(--line-hot);box-shadow:inset 0 0 60px -34px var(--accent)}
.blurb{color:var(--dim);font-size:13px;margin:0 0 16px;min-height:38px}
.price{font-family:var(--mono);font-size:26px;font-weight:600;margin:8px 0 14px;
  color:var(--accent);text-shadow:var(--glow);letter-spacing:.02em}
.price span{display:block;font-size:9.5px;font-weight:400;color:var(--dim);
  letter-spacing:.16em;text-transform:uppercase;text-shadow:none;margin-top:4px}
table.prices{width:100%;border-collapse:collapse;font-size:13.5px}
table.prices th{
  text-align:left;font:600 9px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);padding:0 8px 9px 0;border-bottom:1px solid var(--line);
}
table.prices td{padding:11px 8px 11px 0;border-bottom:1px solid var(--line);vertical-align:middle}
table.prices tr:last-child td{border-bottom:none}
.num{text-align:right;font-family:var(--mono)}
.save{
  display:inline-block;margin-left:6px;font:600 9px/1 var(--mono);letter-spacing:.1em;
  color:var(--ok);border:1px solid var(--ok);padding:2px 5px;text-transform:uppercase;
}

/* ── forms ──────────────────────────────────────────────── */
.form{padding:24px}
.form.narrow{max-width:420px}
.form label{display:block;margin-bottom:18px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.form label.placeholder{border-left:2px solid var(--warn);padding-left:12px;margin-left:-14px}
.tag{
  font:600 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--warn);border:1px solid var(--warn);padding:2px 5px;margin-left:6px;
}
.form input[type=text],.form input[type=email],.form input[type=password],
.form select,.form textarea{
  display:block;width:100%;margin-top:8px;padding:10px 12px;
  background:rgba(3,12,18,.75);color:var(--ink);
  border:1px solid var(--line);border-radius:2px;
  font:14px/1.5 var(--sans);letter-spacing:0;text-transform:none;
}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 14px -4px var(--accent)
}
.form input.code{font-family:var(--mono);font-size:22px;letter-spacing:.5em;text-align:center}
.help{display:block;margin-top:6px;font-family:var(--sans);font-size:12px;
  color:var(--dim);line-height:1.6;letter-spacing:0;text-transform:none}
.clear{display:inline-block;margin-top:8px;font-size:10px;color:var(--dim)}
.clear input{width:auto;display:inline;margin-right:5px}

.btn{
  display:inline-block;padding:10px 18px;cursor:pointer;
  background:rgba(16,40,56,.7);border:1px solid var(--line-hot);color:var(--ink);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  border-radius:0;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.btn:hover{color:var(--accent);text-shadow:var(--glow);text-decoration:none;
  box-shadow:0 0 20px -8px var(--accent)}
.btn.primary{background:rgba(77,216,255,.14);border-color:var(--accent);color:var(--accent);
  text-shadow:var(--glow)}
.btn.primary:hover{background:rgba(77,216,255,.24)}
.btn.danger{border-color:var(--danger);color:var(--danger);text-shadow:none}
.btn.danger:hover{background:rgba(255,90,90,.14);color:var(--danger)}
.btn.sm{padding:5px 10px;font-size:9.5px;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.btn[disabled],.btn.off{opacity:.45;pointer-events:none}
.inline{display:inline}
.linkish{
  background:none;border:none;padding:0;cursor:pointer;color:var(--dim);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
}
.linkish:hover{color:var(--accent);text-shadow:var(--glow)}

/* ── notices ────────────────────────────────────────────── */
.note{
  padding:12px 16px;font-size:13.5px;margin:16px 0;
  border:1px solid;border-left-width:2px;border-radius:0;backdrop-filter:blur(2px);
}
.note.ok{border-color:var(--ok);color:var(--ok);background:rgba(46,230,150,.07)}
.note.warn{border-color:var(--warn);color:var(--warn);background:rgba(255,184,77,.07)}
.note.bad{border-color:var(--danger);color:var(--danger);background:rgba(255,90,90,.07)}

.keyBox{margin:26px 0;text-align:center;padding:24px}
.key{
  font-family:var(--mono);font-size:20px;letter-spacing:.18em;font-weight:600;
  color:var(--accent);text-shadow:var(--glow);margin:10px 0 14px;word-break:break-all;
}

/* ── tables ─────────────────────────────────────────────── */
table.data{width:100%;border-collapse:collapse;font-size:13px;margin-top:16px}
table.data th{
  text-align:left;font:600 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);padding:0 10px 10px 0;border-bottom:1px solid var(--line-hot);
}
table.data td{padding:12px 10px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.status{
  display:inline-block;font:600 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  padding:3px 6px;border:1px solid var(--dim);color:var(--dim);
}
.status.fulfilled,.status.sent,.status.verified{color:var(--ok);border-color:var(--ok)}
.status.pending{color:var(--warn);border-color:var(--warn)}
.status.cancelled,.status.refused{color:var(--danger);border-color:var(--danger)}
.warnText{color:var(--warn)}

/* ── admin ──────────────────────────────────────────────── */
.tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:20px 0 10px}
.tile{padding:18px 20px}
.tile.hot{border-color:var(--warn)}
.tile b{display:block;font-family:var(--mono);font-size:26px;color:var(--accent);
  text-shadow:var(--glow);line-height:1.1}
.tile span{color:var(--dim);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase}
.blockers{list-style:none;padding:0;margin:0}
.blockers li{padding:11px 0;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.blockers li:last-child{border-bottom:none}
.settings{margin:22px 0}
.legal{
  white-space:pre-wrap;font:12.5px/1.75 var(--mono);color:var(--dim);
  background:var(--panel);border:1px solid var(--line);padding:22px;overflow-x:auto;
}

/* ── app.initcap.pro ────────────────────────────────────── */
body.app main{max-width:1040px}
.who{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.1em}
.appGate{max-width:440px;margin:7vh auto 0}
.appGate .form{margin-top:22px}

@media (max-width:640px){
  main{padding:28px 16px 64px}
  .top{padding:12px 16px;gap:14px}
  h1{font-size:16px}
  .toolRow{grid-template-columns:44px 1fr;gap:14px}
  .toolRow .right{grid-column:1/-1;text-align:left;margin-top:10px}
  .toolMark{width:44px;height:44px;font-size:14px}
  table.data{font-size:12px}
  body::after{opacity:.3}
}