/* DIRECTION E — "PRESS + ALPHABETS"
   D's headline device on B's twelve-column grid: the memorable part of one,
   the credible part of the other.

   Was DIRECTION B — "PRESS"
   Swiss, structural, printed. A hard 12-column grid, rules that mean something,
   and a red used once. Reads as an instrument rather than an app: the register
   that makes a teacher, a lawyer and an entrepreneur all take it seriously.
   Cool paper, NOT the warm cream Wispr Flow uses. */
:root{
  --paper:#F2F2F0; --card:#FFFFFF; --ink:#111214; --dim:#6A6C70;
  --rule:#111214; --hair:#D6D6D2; --accent:#D6301F;
  --c1:#E4572E; --c2:#2A9D8F; --c3:#3D5A80; --c4:#B8860B; --c5:#7B2D8E;
  --sans:"Helvetica Neue",Inter,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:70rem;margin:0 auto;padding:0 2.5rem}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}

.masthead{border-bottom:4px solid transparent;
  border-image:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c5)) 1;padding:1.25rem 0;display:flex;justify-content:space-between;align-items:baseline}
.wordmark{font:700 1.1rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.masthead nav{font:11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);display:flex;gap:1.5rem}

header.hero{padding:5.5rem 0 3rem;border-bottom:1px solid var(--hair)}
h1{grid-column:1/11;font-size:clamp(3rem,8.6vw,6rem);line-height:.93;letter-spacing:-.032em;font-weight:800;word-spacing:.06em;margin:0}
h1 span{display:block;color:var(--ink)}
/* The alphabet device from D, on this grid. Each substituted glyph is a real
   letter from a language Holos transcribes, labelled above in its own colour. */
h1 i{font-style:normal;position:relative;display:inline-block}
h1 i::after{content:attr(data-lang);position:absolute;left:50%;transform:translateX(-50%);
  top:-1.05em;font:700 9px/1 var(--mono);letter-spacing:.16em;opacity:.85;white-space:nowrap}
.g1{color:var(--c1)} .g1::after{color:var(--c1)}
.g2{color:var(--c2)} .g2::after{color:var(--c2)}
.g3{color:var(--c3)} .g3::after{color:var(--c3)}
.g4{color:var(--c4)} .g4::after{color:var(--c4)}
.g5{color:var(--c5)} .g5::after{color:var(--c5)}
.standfirst{grid-column:1/7;color:var(--dim);font-size:1.15rem;margin:1.5rem 0 0}
.hero aside{grid-column:9/13;border-left:1px solid var(--hair);padding-left:1.5rem}
.hero aside dl{margin:0;font:11px/1.9 var(--mono);text-transform:uppercase;letter-spacing:.09em}
.hero aside dt{color:var(--dim)}
.hero aside dd{margin:0 0 .8rem;color:var(--ink);font-weight:600}

.actions{grid-column:1/13;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:2.5rem}
.btn{background:var(--ink);color:var(--paper);font:600 15px/1 var(--sans);padding:1rem 1.75rem;text-decoration:none}
.btn:hover{background:var(--accent)}
.fine{font:11px/1.6 var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.08em}

section{padding:3.5rem 0;border-bottom:1px solid var(--hair)}
.num{font:700 3.2rem/1 var(--sans);letter-spacing:-.04em;margin:0 0 .3rem}
.n1{color:var(--c1)} .n2{color:var(--c2)} .n3{color:var(--c3)}
h2{grid-column:1/5;font-size:1.5rem;letter-spacing:-.02em;margin:.6rem 0 0;font-weight:700}
.body{grid-column:5/13}
.body p{margin:0 0 1rem;max-width:56ch}
.body p strong{font-weight:600}

.specimen{background:var(--card);border:1px solid var(--hair);padding:2rem;margin-top:1.5rem}
.specimen p{font-size:1.35rem;line-height:1.5;margin:0 0 .5rem;max-width:none}
.specimen p:nth-of-type(1){color:var(--ink)}
.specimen p:nth-of-type(2){color:var(--c2)}
.specimen p:nth-of-type(3){color:var(--c3)}
.specimen .caption{font:11px/1.6 var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.09em;margin-top:1.2rem}

.langtable{grid-column:1/13;margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.4rem .5rem;
  font:13px/1 var(--mono);color:var(--dim)}
.langtable span{padding:.42rem .6rem;border:1px solid var(--hair);border-radius:5px;background:var(--card)}
.langtable span:nth-child(5n+1){color:var(--c1);border-color:var(--c1)}
.langtable span:nth-child(5n+2){color:var(--c2);border-color:var(--c2)}
.langtable span:nth-child(5n+3){color:var(--c3);border-color:var(--c3)}
.langtable span:nth-child(5n+4){color:var(--c4);border-color:var(--c4)}
.langtable span:nth-child(5n+5){color:var(--c5);border-color:var(--c5)}
footer{padding:2.5rem 0;font:11px/1.9 var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.09em}

/* ── legal documents ──────────────────────────────────────────
   The same grid and palette, narrower measure. These get read closely
   by exactly the person who buys a privacy-first tool. */
.doc{max-width:44rem;margin:0 auto;padding:0 2.5rem 4rem}
.doc h1{font-size:2.4rem;letter-spacing:-.04em;margin:3rem 0 .4rem;font-weight:800}
.doc .standfirst{font:11px/1.6 var(--mono);color:var(--dim);text-transform:uppercase;
  letter-spacing:.1em;margin:0 0 2.5rem}
.doc h2{font-size:1.3rem;margin:2.75rem 0 .9rem;padding-top:1.5rem;
  border-top:1px solid var(--hair);font-weight:700;letter-spacing:-.02em;grid-column:auto}
.doc h2:first-of-type{border-top:0;padding-top:0}
.doc h3{font-size:1.02rem;margin:1.75rem 0 .4rem;font-weight:700}
.doc p{margin:0 0 1.1rem;color:var(--ink);max-width:none}
.doc ul{margin:0 0 1.1rem;padding-left:1.2rem}
.doc li{margin-bottom:.5rem}
.doc a{color:var(--accent)}
.back{font:11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.1em;margin:2rem 0 0}
.back a{color:var(--dim);text-decoration:none}
.check{background:var(--card);border:1px solid var(--hair);padding:1.4rem 1.6rem;margin:1.5rem 0}
.check p:last-child{margin-bottom:0}
.check pre{margin:.5rem 0 0;padding:.8rem 1rem;background:var(--paper);overflow-x:auto;
  font:12px/1.6 var(--mono)}
.mono{font:12px/1.6 var(--mono);color:var(--dim)}
.scroller{overflow-x:auto}

/* ── links ────────────────────────────────────────────────────
   Anchors were left to the browser's defaults — blue and underlined —
   the moment nav items became real links. Nothing on this site should
   look like an unstyled link. */
a{color:inherit;text-decoration:none}
.masthead nav a,footer nav a{color:var(--dim);transition:color .12s}
.masthead nav a:hover,footer nav a:hover{color:var(--accent)}
.body a,.doc a,.check a,p a{color:var(--accent);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.body a:hover,.doc a:hover,.check a:hover,p a:hover{text-decoration-color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.btn,.back a{text-decoration:none}

/* The buy button inside a .check box was inheriting the document link colour —
   accent text on a near-black fill, which read as broken rather than deliberate.
   Buttons are not links here; they win. */
.check .btn,.doc .btn{background:var(--ink);color:var(--paper);text-decoration:none;
  display:inline-block;padding:1rem 1.75rem;font:600 15px/1 var(--sans)}
.check .btn:hover,.doc .btn:hover{background:var(--accent);color:#fff}
.doc .check{background:var(--card);border:1px solid var(--hair);padding:1.6rem 1.8rem}

/* ── the licence key on /thanks ───────────────────────────────
   A key is the one string on this site that people have to move by hand into
   another application. It gets a real target: monospace, wrapping on any
   character so nothing runs off the edge, selectable in a single click, and a
   button for the people who would rather not select anything at all. */
.key{margin:.6rem 0 0;padding:1rem 1.1rem;background:var(--paper);border:1px solid var(--hair);
  font:12px/1.7 var(--mono);word-break:break-all;user-select:all;-webkit-user-select:all}
.key-actions{display:flex;align-items:center;gap:1rem;margin-top:.9rem;flex-wrap:wrap}
.copy{background:var(--ink);color:var(--paper);border:0;font:600 13px/1 var(--sans);
  padding:.75rem 1.2rem;cursor:pointer;transition:background .12s}
.copy:hover{background:var(--accent)}
.copy:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none !important}