/*
 * perren.ai — one stylesheet, two kinds of page.
 *
 * ⚠️ IT LIVES IN A FILE BECAUSE THE PAGES DO NOT ALL COME FROM THE SAME PLACE.
 * The homepage and the legal pages are static assets; /pricing is rendered by
 * the worker from the catalogue, because a price list typed into HTML drifts
 * from the price list that charges the card. Two sources of markup, one source
 * of palette — otherwise the site is two sites that resemble each other.
 */

:root{
  --ink:#16181d; --ink-2:#3f444e; --ink-3:#6b7280;
  --ground:#faf9f7; --raised:#fff; --rule:#e4e2dd; --accent:#1c4e3f;
  --accent-ink:#fff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#eceef2; --ink-2:#b9bec8; --ink-3:#868d99;
    --ground:#14161a; --raised:#1b1e24; --rule:#2a2e36; --accent:#7fc9ae;
    --accent-ink:#0f1512;
  }
}
:root[data-theme="dark"]{
  --ink:#eceef2; --ink-2:#b9bec8; --ink-3:#868d99;
  --ground:#14161a; --raised:#1b1e24; --rule:#2a2e36; --accent:#7fc9ae;
  --accent-ink:#0f1512;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:400 17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
main{max-width:34rem; margin:auto; padding:5rem 1.5rem; width:100%}
main.wide{max-width:60rem}

.brand{
  font:600 13px/1 ui-monospace,"IBM Plex Mono",Menlo,monospace;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  text-decoration:none; display:inline-block;
}
h1{font-size:1.75rem; line-height:1.25; letter-spacing:-.02em; margin:1rem 0 .75rem; font-weight:600; text-wrap:balance}
h2{font-size:1.15rem; line-height:1.3; letter-spacing:-.01em; margin:2.5rem 0 .5rem; font-weight:600}
p{color:var(--ink-2); margin:.9rem 0}
a{color:var(--accent)}
em{font-style:normal; color:var(--ink)}

.note{
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--rule);
  font-size:14.5px; color:var(--ink-3);
}
footer{padding:1.5rem; text-align:center; font-size:13px; color:var(--ink-3)}

/* ── Controls ───────────────────────────────────────────────────────────── */

.btn{
  display:inline-block; padding:.7rem 1.4rem; border-radius:.55rem;
  background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent);
  font:500 15px/1.2 inherit; text-decoration:none; cursor:pointer;
}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--ink)}
.btn:disabled{opacity:.5; cursor:default}

/* ── The interest form ──────────────────────────────────────────────────── */

.capture{margin-top:2rem; padding:1.4rem; background:var(--raised); border:1px solid var(--rule); border-radius:.8rem}
.capture h2{margin:0 0 .35rem; font-size:1rem}
.capture p{margin:0 0 .9rem; font-size:14.5px}
.capture form{display:flex; gap:.5rem; flex-wrap:wrap}
/* ⛔ LOAD-BEARING. `display:flex` above beats the browser's own
   `[hidden]{display:none}`, so without this the form stays on screen after a
   successful submit and the person sees "thank you" above a box still asking
   for their address. Exactly the bug the desktop app hit four times; caught
   here by actually submitting the form. */
.capture form[hidden]{display:none}
.capture input{
  flex:1 1 15rem; min-width:0; padding:.7rem .85rem; border-radius:.55rem;
  border:1px solid var(--rule); background:var(--ground); color:var(--ink);
  font:400 15px/1.2 inherit;
}
.capture input:focus{outline:none; border-color:var(--accent)}
.said{margin:.9rem 0 0; font-size:14.5px; color:var(--ink-3)}
.said[hidden]{display:none}

/* ── Pricing ────────────────────────────────────────────────────────────── */

.termswitch{display:flex; gap:.4rem; margin:1.5rem 0 .5rem; align-items:center; font-size:14.5px; color:var(--ink-3)}
.termswitch button{
  padding:.4rem .8rem; border-radius:.45rem; border:1px solid var(--rule);
  background:transparent; color:var(--ink-2); font:400 14px/1.2 inherit; cursor:pointer;
}
.termswitch button[aria-pressed="true"]{border-color:var(--accent); color:var(--ink); background:var(--raised)}

.tiers{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); margin-top:1rem}
.tier{
  background:var(--raised); border:1px solid var(--rule); border-radius:.8rem;
  padding:1.3rem; display:flex; flex-direction:column;
}
.tier.pick{border-color:var(--accent)}
.tier h3{margin:0; font-size:1.05rem; font-weight:600}
.seats{margin:.15rem 0 1rem; font-size:13.5px; color:var(--ink-3)}
.price{display:flex; align-items:baseline; gap:.35rem; margin:0}
.price b{font-size:1.6rem; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.price span{font-size:13.5px; color:var(--ink-3)}
.alt{margin:.3rem 0 0; font-size:13.5px; color:var(--ink-3)}
.tier .btn{margin-top:1.1rem; text-align:center}
.tier ul{margin:1.1rem 0 0; padding:0; list-style:none; font-size:14.5px; color:var(--ink-2)}
.tier li{padding:.28rem 0 .28rem 1.1rem; position:relative}
.tier li::before{content:"·"; position:absolute; left:.3rem; color:var(--accent)}

/* The quote-only band. A bar, not a fourth card — see pricing.ts. */
.enterprise{
  margin-top:1rem; padding:1.1rem 1.3rem; background:var(--raised);
  border:1px solid var(--rule); border-radius:.8rem;
  display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
/* ── the estimator ──────────────────────────────────────────────────────────
   ⚠️ THE RANGE INPUTS ARE DELIBERATELY NOT RESTYLED THUMB-AND-TRACK. A hand
   rolled slider is the control people most often break for keyboards and touch,
   and this one carries a buying decision. The native widget is accessible,
   draggable and arrow-key-steppable on every platform for free; it only gets an
   accent colour and room to breathe. */
.estimate{
  margin-top:1.4rem; padding:1.3rem 1.4rem; background:var(--raised);
  border:1px solid var(--rule); border-radius:.8rem;
}
.estimate h2{margin:0; font-size:1.05rem; font-weight:600}
.estimate input[type="range"]{
  width:100%; margin:0 0 1rem; accent-color:var(--accent); cursor:pointer;
}
.estimate input[type="range"]:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.slab{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  margin:.9rem 0 .35rem; font-size:14.5px; color:var(--ink-2);
}
.slab output{
  font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;
  font-size:1.05rem;
}
.hint{margin:-.4rem 0 .2rem; font-size:13.5px; color:var(--ink-3); line-height:1.45}
.verdict{
  margin:.4rem 0 0; padding-top:.9rem; border-top:1px solid var(--rule);
  font-size:15px; line-height:1.5;
}
.verdict b{font-variant-numeric:tabular-nums}
.estimate .btn{display:inline-block; margin-top:.9rem; text-decoration:none}

/* The founding deadline, above the headline. Accent-tinted rather than loud:
   it is a date somebody needs, not an interstitial. */
.urgent{
  margin:1rem 0 0; padding:.6rem .85rem; font-size:14.5px; line-height:1.45;
  border:1px solid var(--accent); border-radius:.6rem;
  background:color-mix(in srgb, var(--accent) 8%, var(--raised));
}
.urgent b{color:var(--accent)}

.enterprise h3{margin:0; font-size:1.05rem; font-weight:600}
.enterprise p{margin:.15rem 0 0; font-size:14.5px}

table.grid{width:100%; border-collapse:collapse; margin-top:1rem; font-size:15px}
table.grid th, table.grid td{padding:.6rem .5rem; border-bottom:1px solid var(--rule); text-align:left}
table.grid td.num{text-align:right; font-variant-numeric:tabular-nums}
table.grid th{font-weight:600; font-size:13.5px; color:var(--ink-3)}

/* ── the affiliates page's audience box ──────────────────────────────────────
   ⛔ EVERY CLASS HERE THAT SETS A NON-NONE `display` CARRIES ITS OWN
   `[hidden]` RULE. A class-level display overrules the browser's
   `[hidden]{display:none}`, which has now shipped visible four times in this
   project — on .acctRow, the welcome card, and the capture form itself. */
.afLabel{display:block; margin:.9rem 0 .35rem; font-size:14.5px; color:var(--ink-3)}
.afLabel[hidden]{display:none}
.afNote{
  display:block; width:100%; box-sizing:border-box; padding:.6rem .7rem;
  border-radius:.45rem; border:1px solid var(--rule);
  background:var(--ground); color:var(--ink);
  font:400 15px/1.45 inherit; resize:vertical;
}
.afNote[hidden]{display:none}
.afNote:focus{outline:none; border-color:var(--accent)}
main ul{color:var(--ink-2); padding-left:1.15rem; margin:.9rem 0}
main ul li{margin:.5rem 0}
main ul li strong{color:var(--ink)}