/* Etiuda, the waitlist site. Second design of 2026-09-22.

   THE DIRECTION is the storefront of 2026-09-14 (site/archive/2026-09-14-storefront),
   ruled 2026-09-22: built in the spirit of a large infrastructure company's site measured
   that morning (site/reference/cloudflare-2026-09-14.md), taking its LOGIC and none of its
   assets: a near-black ground with a faint dot field in the margins, content wells edged by
   dashed rails, panels told apart by a 1px rule rather than a fill, one accent used as a
   surface, pills for controls, two weights, -0.025em above 16px, 0.2s colour transitions
   and no other motion. The accent is the SaaS violet #7c3aed, Studio's own. The training
   deck is one inspiration among several: its invented chat, set here as a specimen panel.

   THE MARK is the bare glyph in currentColor, never on a tile, anywhere (ruled 2026-09-17
   23:02). No web fonts: every face named below is already on the machine or falls back to
   the system, so the page loads nothing from anywhere, which is the cheapest proof of the
   product's own offline claim.

   Dark by default, as the storefront was; a light edition for a visitor whose system asks
   for one, the same structure on a pale ground. MOBILE FIRST: every grid is inside a
   min-width query, so a mistake in a wide rule cannot break the narrow page. */

/* ---------- tokens ---------------------------------------------------- */
:root{
  /* Ratios against --ground, computed: ink 15.8, dim 6.6, max 18.4, accent-text 6.9.
     White on the accent surface 5.70. The surface violet is never a letter on the
     ground (3.3:1); letters in violet use --accent-text. */
  --ground:#111017;
  --raised:#1a1922;
  --rule:rgba(232,235,240,.14);
  --rule-hi:rgba(232,235,240,.30);
  --dots:rgba(232,235,240,.075);
  --ink:#e8ebf0;
  --ink-dim:#9a97a6;
  --ink-max:#fbfcfe;
  --accent:#7c3aed;
  --accent-hover:#6d28d9;
  --on-accent:#ffffff;
  --on-accent-2:#ede9fe;
  --accent-text:#a78bfa;
  --accent-wash:rgba(167,139,250,.12);
  --accent-line:rgba(167,139,250,.55);
  --paper:#ede9fe;
  --on-paper:#1a1922;
  --on-paper-dim:#4b4658;
  --paper-accent:#5b21b6;
  --bad-on-ground:#fca5a5;

  --face-display:"Segoe UI Variable Display","Segoe UI","SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --face-text:"Segoe UI Variable Text","Segoe UI","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --face-label:"Bahnschrift","DIN Alternate","Avenir Next Condensed","Roboto Condensed",sans-serif;
  --face-mono:"Cascadia Mono","SF Mono",Menlo,Consolas,ui-monospace,monospace;

  --fs-fine:.76rem; --fs-cap:.86rem; --fs-body:1rem; --fs-title:1.18rem; --fs-lead:1.18rem;
  --fs-h1:2.25rem; --fs-h2:1.9rem; --fs-num:2rem;
  --read:34rem;
  --gap:72px;
  --pad:20px;
  --frame:calc(100% - 16px);
  --well:calc(100% - 16px);
  --r-pill:9999px; --r-card:18px; --r-panel:8px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root{
    /* Against #fbfafd: ink 13.9, dim 6.3, max 17.9, accent-text 7.0. */
    --ground:#fbfafd;
    --raised:#f2f0f7;
    --rule:rgba(26,25,34,.13);
    --rule-hi:rgba(26,25,34,.30);
    --dots:rgba(26,25,34,.10);
    --ink:#2a2833;
    --ink-dim:#5c5868;
    --ink-max:#121118;
    --accent-text:#6d28d9;
    --accent-wash:rgba(124,58,237,.08);
    --accent-line:rgba(109,40,217,.55);
    --paper:#ede9fe;
    --bad-on-ground:#b91c1c;
    color-scheme:light;
  }
}
@media (min-width:700px){
  :root{ --fs-h1:3rem; --fs-h2:2.3rem; --pad:32px; --frame:calc(100% - 24px); --well:calc(100% - 64px); --gap:88px; }
}
@media (min-width:1100px){
  :root{ --fs-h1:3.7rem; --fs-h2:2.7rem; --fs-lead:1.3rem; --pad:40px;
         --frame:min(1680px, 100% - 32px); --well:min(1520px, 100% - 112px); --gap:104px; }
}
/* Maxim's standing preference, 2026-09-12: use the whole screen. At 2000 and above the
   wells take another step and the display type answers the width, so a wide screen shows
   a composed page rather than more margin. */
@media (min-width:1700px){
  :root{ --fs-h1:4.3rem; --fs-h2:3.1rem; --fs-lead:1.4rem; --pad:56px;
         --frame:min(1960px, 100% - 48px); --well:min(1800px, 100% - 160px); --gap:120px; }
  html{ font-size:112.5%; }
}

/* ---------- ground ---------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:106.25%; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ground);
  background-image:radial-gradient(circle at 1px 1px, var(--dots) 1px, transparent 0);
  background-size:22px 22px;
  color:var(--ink);
  font-family:var(--face-text);
  font-size:var(--fs-body);
  line-height:1.55;
}
h1,h2,h3{ font-family:var(--face-display); font-weight:600; margin:0; text-wrap:balance; color:var(--ink-max); }
h1{ font-size:var(--fs-h1); line-height:1.04; letter-spacing:-.03em; }
h2{ font-size:var(--fs-h2); line-height:1.08; letter-spacing:-.025em; }
h3{ font-size:var(--fs-title); line-height:1.25; letter-spacing:-.015em; }
p{ margin:0 0 .85em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; text-underline-offset:4px; text-decoration-thickness:1px; }
a:hover{ text-decoration-thickness:2px; }
strong{ font-weight:600; color:var(--ink-max); }
kbd{
  font-family:var(--face-mono); font-size:.86em; padding:.08em .42em;
  border:1px solid var(--rule-hi); border-radius:5px; background:var(--raised); color:var(--ink-max);
}
::selection{ background:var(--accent); color:var(--on-accent); }
:focus-visible{ outline:2px solid var(--accent-text); outline-offset:3px; border-radius:3px; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--accent); color:var(--on-accent); padding:.6em 1em; font-weight:600;
}
.skip:focus{ left:8px; top:8px; }
.dim{ color:var(--ink-dim); }

/* ---------- the mark: the bare glyph, never on a tile ------------------ */
svg.mark{ display:block; flex:none; width:1.45em; height:auto; aspect-ratio:156 / 151.52; color:var(--accent-text); }

/* ---------- masthead -------------------------------------------------- */
.mast{
  position:sticky; top:0; z-index:40;
  background:var(--ground);
  border-bottom:1px solid var(--rule);
}
.frame{ width:var(--frame); margin-inline:auto; }
.mast-in{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; min-height:64px; padding:10px 0; }
.brand{
  display:inline-flex; align-items:center; gap:.4em; margin-right:auto;
  font-family:var(--face-display); font-weight:600; font-size:1.3rem; letter-spacing:-.02em;
  color:var(--ink-max); text-decoration:none;
}
.mast-nav{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.pill{
  display:inline-flex; align-items:center; min-height:40px;
  text-decoration:none; font-family:var(--face-label); font-size:var(--fs-cap);
  font-weight:600; letter-spacing:.02em;
  padding:8px 16px; border-radius:var(--r-pill); color:var(--ink);
  border:1px solid var(--ink-dim);
  transition:color .2s, background-color .2s, border-color .2s;
}
.pill:hover{ border-color:var(--ink); background:var(--raised); }
.pill.quiet{ border-color:transparent; }
.pill.quiet:hover{ border-color:var(--rule); }
.pill.solid{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.pill.solid:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
@media (max-width:520px){ .pill.quiet{ display:none; } }

/* ---------- bands ------------------------------------------------------ */
main{ display:flex; flex-direction:column; gap:var(--gap); padding:12px 0 var(--gap); }
.band{ position:relative; }
.band::before{ content:""; position:absolute; left:0; right:0; top:calc(var(--gap) / -2); border-top:1px dashed var(--rule); }
.inner{
  width:var(--well); margin-inline:auto;
  background:var(--ground);
  border-left:1px dashed var(--rule); border-right:1px dashed var(--rule);
  padding:0 var(--pad);
}
.marking{
  display:flex; align-items:baseline; gap:.8em;
  font-family:var(--face-label); font-size:var(--fs-cap); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text);
  margin:0 0 1rem;
}
.marking .num{ color:var(--ink-dim); letter-spacing:.06em; }
.band h2{ max-width:22em; }

/* ---------- the hero card: the accent, used as a surface, once ---------- */
.hero-wrap{ width:var(--frame); margin-inline:auto; }
.hero,.closing{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--accent); color:var(--on-accent);
  border-radius:var(--r-card);
}
.hero{ padding:36px 22px 32px; }
.hero::after,.closing::after{
  content:""; position:absolute; z-index:-1; left:50%; translate:-50% 0;
  bottom:-330px; width:140%; height:560px; pointer-events:none;
  /* Measured: at .60 the glow lifted the ground under the lead's last line to 2.9:1 for its
     ink. At this strength and depth white stays at or above 4.5:1 wherever text can sit. */
  background:radial-gradient(ellipse at 50% 50%, rgba(196,181,253,.34), rgba(196,181,253,0) 62%);
}
/* The card's one ornament is our own mark, bare, white at a tenth: a texture, never a
   message. Sized from the card's height so it cannot climb into the text. */
.hero .ornament{
  position:absolute; z-index:-1; pointer-events:none; color:#ffffff; opacity:.09;
  right:-4%; bottom:-18%; height:78%; width:auto; aspect-ratio:156 / 151.52;
}
.hero h1{ color:var(--on-accent); max-width:13em; }
.flag{
  display:inline-block; font-family:var(--face-label); font-size:var(--fs-cap);
  font-weight:600; letter-spacing:.03em;
  border:1px solid rgba(255,255,255,.55); border-radius:var(--r-pill); padding:6px 16px;
  margin:0 0 1.5rem;
}
.lead{ font-size:var(--fs-lead); line-height:1.5; letter-spacing:-.012em; max-width:var(--read); }
.hero .lead{ margin-top:1.3rem; color:var(--on-accent); }
.hero-grid{ display:grid; gap:36px; }
.formbox .form-h{ font-size:var(--fs-title); letter-spacing:-.015em; }
.hero .formbox{
  border-top:1px solid rgba(255,255,255,.32); padding-top:26px;
}
.hero .form-h{ color:var(--on-accent); font-size:1.35rem; }
.hero .form-p{ color:var(--on-accent); margin-top:.5rem; max-width:var(--read); }
@media (min-width:700px){ .hero{ padding:52px 44px 48px; } }
@media (min-width:1100px){
  .hero{ padding:72px 64px 64px; }
  .hero-grid{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:72px; align-items:end; }
  .hero .formbox{
    border-top:0; padding:30px 30px 28px;
    background:rgba(17,16,23,.22); border:1px solid rgba(255,255,255,.28); border-radius:14px;
  }
}
@media (min-width:1700px){ .hero{ padding:96px 88px 84px; } .hero-grid{ gap:120px; } }

/* ---------- the form: address, the tick box, then the button ------------ */
.join{ margin-top:18px; display:flex; flex-direction:column; align-items:stretch; max-width:34rem; }
.lbl{ display:block; font-family:var(--face-label); font-weight:600; font-size:var(--fs-cap); letter-spacing:.04em; margin-bottom:8px; }
.join input[type=email]{
  font:inherit; font-size:1.05rem; min-height:50px; padding:10px 18px;
  border-radius:var(--r-pill); border:1px solid var(--rule-hi);
  background:var(--raised); color:var(--ink-max);
}
.join input[type=email]::placeholder{ color:var(--ink-dim); }
.consent{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; margin-top:16px; }
.consent input{ width:22px; height:22px; margin:1px 0 0; accent-color:var(--accent); cursor:pointer; }
.consent label{ font-size:var(--fs-cap); line-height:1.5; color:var(--ink-dim); cursor:pointer; }
.btn{
  align-self:flex-start; margin-top:18px; cursor:pointer;
  font-family:var(--face-label); font-size:1.02rem; font-weight:600; letter-spacing:.02em;
  min-height:50px; padding:12px 28px; border-radius:var(--r-pill);
  border:1px solid var(--accent); background:var(--accent); color:var(--on-accent);
  transition:background-color .2s, color .2s, border-color .2s;
}
.btn:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
.btn[disabled]{ opacity:.7; cursor:progress; }
@media (max-width:519px){ .btn{ align-self:stretch; } }
.status{ margin:14px 0 0; font-weight:600; }
.status:empty{ display:none; }
.status.ok{ color:var(--accent-text); }
.status.bad{ color:var(--bad-on-ground); }
.hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.join.done input[type=email], .join.done .lbl, .join.done .consent, .join.done .btn{ display:none; }
/* on the violet card: white field, white button, violet letters */
.on-accent{ color-scheme:light; }
.on-accent .lbl{ color:var(--on-accent); }
.on-accent input[type=email]{ background:#ffffff; border-color:#ffffff; color:#1a1922; }
.on-accent .consent label{ color:var(--on-accent); }
.on-accent .consent input{ accent-color:#1a1922; }
.on-accent .btn{ background:#ffffff; border-color:#ffffff; color:#5b21b6; }
.on-accent .btn:hover{ background:transparent; color:#ffffff; }
.on-accent .status.ok, .on-accent .status.bad{ color:#ffffff; }
.on-accent :focus-visible{ outline-color:#ffffff; }

/* ---------- 01, the invented chat, as a specimen panel ------------------ */
.chat-band{ display:grid; gap:28px; }
.chat-note{ color:var(--ink-dim); max-width:var(--read); font-size:var(--fs-lead); line-height:1.5; }
.chat-side .marking{ text-transform:none; letter-spacing:.02em; font-size:var(--fs-body); }
.chat{
  margin:0; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule);
  border-radius:var(--r-panel); overflow:hidden;
}
.msg{ background:var(--ground); padding:22px 22px 24px; }
.who{
  font-family:var(--face-label); font-size:var(--fs-fine); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); margin:0 0 .8rem;
}
.who span{ letter-spacing:.06em; }
.said{
  font-family:var(--face-mono); font-size:var(--fs-cap); line-height:1.65; color:var(--ink-dim);
  border:1px dashed var(--rule-hi); border-radius:var(--r-panel); padding:16px 18px;
}
.sent{
  font-family:var(--face-mono); font-size:var(--fs-cap); line-height:1.75; color:var(--ink);
  background:var(--raised); border:1px solid var(--rule); border-radius:var(--r-panel); padding:16px 18px;
}
.sent u{
  text-decoration:none; color:var(--accent-text);
  background:var(--accent-wash); border-bottom:1px solid var(--accent-line); padding:0 .22em;
}
@media (min-width:700px){ .chat{ grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); } }
@media (min-width:1100px){
  .chat-band{ grid-template-columns:minmax(0,1fr) minmax(0,1.55fr); gap:64px; align-items:start; }
  .msg{ padding:28px 28px 30px; }
}

/* ---------- 02, four moves ----------------------------------------------- */
.seq{
  list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:1px;
  background:var(--rule); border:1px solid var(--rule);
}
.seq li{ background:var(--ground); padding:22px 22px 26px; }
.seq .n{
  display:block; font-family:var(--face-label); font-size:var(--fs-num); font-weight:600;
  color:var(--accent-text); line-height:1; margin-bottom:1.1rem;
}
.seq h3{ margin-bottom:.45rem; }
.seq p{ color:var(--ink-dim); }
@media (min-width:700px){ .seq{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .seq{ grid-template-columns:repeat(4, 1fr); } .seq li{ padding:28px 28px 34px; } }

/* ---------- 03, two programs -------------------------------------------- */
.two{ margin-top:2rem; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.prog{ background:var(--ground); padding:24px 22px 28px; }
.prog h3{ font-size:1.6rem; letter-spacing:-.025em; }
.prog.studio h3{ color:var(--accent-text); }
.prog .sub{
  font-family:var(--face-label); font-size:var(--fs-cap); font-weight:600; letter-spacing:.03em;
  color:var(--ink-dim); margin:.35rem 0 1.3rem;
}
.prog ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.prog li{ padding:12px 0 12px 1.5em; border-bottom:1px solid var(--rule); position:relative; max-width:40rem; }
.prog li::before{ content:""; position:absolute; left:0; top:1.25em; width:.8em; border-top:2px solid var(--accent-text); }
@media (min-width:900px){ .two{ grid-template-columns:1fr 1fr; } .prog{ padding:32px 32px 36px; } }

/* ---------- 04, buying it: the paper band, the page's one light surface ---- */
.paper{
  width:var(--frame); margin-inline:auto;
  background:var(--paper); color:var(--on-paper);
  border-radius:var(--r-card); padding:36px 22px;
}
.paper h2{ color:var(--on-paper); }
.paper .marking{ color:var(--paper-accent); }
.paper .marking .num{ color:var(--on-paper-dim); }
.paper .note{ margin-top:1.2rem; color:var(--on-paper-dim); }
.paper-grid{ display:grid; gap:28px; }
.facts{ margin:0; border-top:1px solid rgba(26,25,34,.2); }
.facts > div{ display:grid; gap:4px; padding:16px 0; border-bottom:1px solid rgba(26,25,34,.2); }
.facts dt{ font-family:var(--face-display); font-weight:600; font-size:var(--fs-title); letter-spacing:-.015em; color:var(--on-paper); }
.facts dd{ margin:0; color:var(--on-paper-dim); }
.paper a{ color:var(--paper-accent); }
@media (min-width:700px){ .paper{ padding:52px 44px; } .facts > div{ grid-template-columns:14em 1fr; gap:24px; } }
@media (min-width:1100px){
  .paper{ padding:72px 64px; }
  .paper-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:72px; align-items:start; }
}
@media (min-width:1700px){ .paper{ padding:88px 88px; } }
@media (prefers-color-scheme:light){ .paper{ box-shadow:inset 0 0 0 1px rgba(91,33,182,.14); } }

/* ---------- 05, who makes it ------------------------------------------- */
.maker{ display:grid; gap:24px; }
.maker-text p{ max-width:var(--read); color:var(--ink); }
@media (min-width:1100px){
  .maker{ grid-template-columns:minmax(0,1fr) minmax(0,1.55fr); gap:64px; align-items:start; }
  .maker-text{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
  .maker-text p{ margin:0; }
}

/* ---------- the closing card ------------------------------------------ */
.closing{ padding:48px 22px 44px; text-align:center; }
.closing h2{ color:var(--on-accent); max-width:18em; margin-inline:auto; }
.close-p{ color:var(--on-accent); font-size:var(--fs-lead); margin:.9rem auto 0; }
.closing .join{ margin:26px auto 0; text-align:left; }
.closing .ask{ margin-top:26px; color:var(--on-accent); font-size:var(--fs-cap); }
.closing .ask a, .hero a{ color:#ffffff; }
@media (min-width:700px){ .closing{ padding:72px 44px 64px; } }
@media (min-width:1100px){ .closing{ padding:96px 64px 80px; } }

/* ---------- footer ----------------------------------------------------- */
.foot{ border-top:1px solid var(--rule); background:var(--ground); }
.foot-in{ display:grid; gap:12px; padding:28px 0 36px; font-size:var(--fs-cap); }
.foot p{ margin:0; }
.foot .brand{ font-size:1.1rem; margin-right:.6em; vertical-align:middle; }
.foot-links{ display:flex; flex-wrap:wrap; gap:6px 20px; }
.langs{ display:flex; gap:14px; }
.langs span[aria-current]{ font-weight:600; color:var(--ink-max); }
@media (min-width:1100px){
  .foot-in{ grid-template-columns:auto auto 1fr auto; align-items:center; gap:32px; }
  .foot-quiet{ justify-self:end; }
}

/* ---------- the small pages: the notice and where the form lands --------- */
.page{ padding-top:clamp(40px, 7vw, 96px); }
.page h1{ max-width:16em; }
.page .lead{ margin-top:1.2rem; color:var(--ink-dim); }
.page .lead a{ color:var(--ink-max); }
.page .formbox.page-form{ margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--rule); max-width:40rem; }
.page .back{ margin-top:2.6rem; font-family:var(--face-label); font-weight:600; letter-spacing:.02em; }
.page .back a{ color:var(--accent-text); }
.meta{ margin-top:1.2rem; color:var(--ink-dim); font-size:var(--fs-cap); max-width:var(--read); }
.clauses{ margin-top:2.4rem; border-top:1px solid var(--rule); }
.clause{ display:grid; gap:10px; padding:26px 0; border-bottom:1px solid var(--rule); }
.clause h2{ font-size:var(--fs-title); letter-spacing:-.015em; color:var(--accent-text); }
.clause p{ max-width:var(--read); }
.clause a{ color:var(--ink-max); }
@media (min-width:1100px){
  .clause{ grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); gap:64px; padding:30px 0; }
}
.two-lang{ display:grid; gap:48px; }
@media (min-width:1100px){ .two-lang{ grid-template-columns:1fr 1fr; gap:64px; } }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }