/* Lexo - lexokeyboard.app
   No external requests: no webfonts, no CDN, no analytics. A site for a
   keyboard that doesn't phone home shouldn't phone home either. */

:root {
  --ink:      #12161f;
  --slate:    #1b2130;
  --line:     #2a3242;
  --paper:    #f7f5f0;
  --paper-2:  #ebe7de;
  --amber:    #f2a93b;
  --text:     #e8eaef;
  --muted:    #8a93a5;

  --bg:      var(--ink);
  --surface: var(--slate);
  --fg:      var(--text);
  --dim:     var(--muted);
  --rule:    var(--line);

  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --measure: 68ch;
  --gutter: clamp(20px, 5vw, 48px);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:      var(--paper);
    --surface: #fff;
    --fg:      #171b24;
    --dim:     #5b6474;
    --rule:    #d8d3c8;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

a { color: var(--fg); text-decoration-color: var(--amber); text-underline-offset: 3px; }
a:hover { color: var(--amber); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- type scale ---------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 20px;
}

h1 {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(30px, 6.2vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
}

h2 {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(20px, 3.2vw, 27px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 18px;
}

h3 {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.lede {
  font-size: clamp(18px, 2.3vw, 21px);
  line-height: 1.55;
  color: var(--fg);
  max-width: var(--measure);
  margin: 0 0 32px;
}

/* Says what the product IS, directly under a headline that says how it
   feels. The old eyebrow did this job at 12px in the dimmest colour on the
   page, which is the wrong weight for the only line that orients a stranger. */
.subhead {
  font-size: clamp(19px, 2.5vw, 23px);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  max-width: 34ch;
  margin: 0 0 18px;
}

.hero .lede { font-size: clamp(16.5px, 2vw, 18px); color: var(--dim); max-width: 46ch; margin-bottom: 28px; }

p { max-width: var(--measure); }

.dim { color: var(--dim); }

code, .m { font-family: var(--mono); font-size: 0.9em; }

/* ---- sections ------------------------------------------------------ */

section { padding: clamp(56px, 9vw, 96px) 0; border-top: 1px solid var(--rule); }
section:first-of-type { border-top: 0; }

/* ---- hero ---------------------------------------------------------- */

.hero { padding-top: clamp(48px, 8vw, 88px); padding-bottom: clamp(40px, 6vw, 64px); }

.brand {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
}
.brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); display: inline-block; }

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 26px 0;
  font-family: var(--mono);
  font-size: 13px;
}
.masthead nav { display: flex; gap: 20px; flex-wrap: wrap; }
.masthead nav a { color: var(--dim); text-decoration: none; }
.masthead nav a:hover { color: var(--amber); }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 6px; }

.btn {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 13px 22px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  border: 1px solid transparent;
  transition: transform 120ms ease, background-color 120ms ease;
}
.btn-primary { background: var(--amber); color: #14100a; }
.btn-primary:hover { background: #ffbc55; color: #14100a; transform: translateY(-1px); }
.btn-ghost { border-color: var(--rule); color: var(--fg); }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); transform: translateY(-1px); }

.price-note { font-family: var(--mono); font-size: 13px; color: var(--dim); margin: 18px 0 0; }

/* ---- signature: the transformation panel ---------------------------
   Two things Lexo actually does to your words, shown as a labelled
   before/after. Static markup on purpose: a simulated live instrument
   would be dressing up an example as a measurement. */

.transform {
  margin-top: clamp(40px, 6vw, 64px);
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.transform-head {
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
}

.tstep {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 16px 22px;
}
.tstep:first-of-type { padding-top: 26px; }
.tstep:last-of-type { padding-bottom: 26px; }

.tstep-label, .tstep-val, .transform-foot { max-width: none; margin: 0; }

.tstep-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

/* The output line is the payoff, so it gets the size. The input line stays
   quiet and slightly smaller so the eye lands on the finished sentence. */
.tstep-val { font-size: 16.5px; line-height: 1.55; }
.tstep-val.out { font-size: clamp(19px, 2.4vw, 24px); line-height: 1.4; letter-spacing: -0.01em; }
.tstep-val.raw  { color: var(--dim); }
.tstep-val.out  { color: var(--fg); }
.tstep-val .cut { text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.5; }

/* "not shipped" tag in the Ways in list - deliberately not styled as a
   badge/pill, which reads as a feature highlight rather than a caveat. */
.soon {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-left: 8px;
  white-space: nowrap;
}

/* Sans and 14px, not 12px mono: this is the payoff copy for the signature
   panel and it was the hardest text on the page to read on a phone. */
.transform-foot {
  padding: 15px 18px 17px;
  font-size: 14px;
  color: var(--dim);
  line-height: 1.65;
  border-top: 1px solid var(--rule);
  margin-top: 12px;
}

/* ---- spec sheet ---------------------------------------------------- */

.specs { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid var(--rule); }
.specs li {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 8px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.specs .field {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dim);
}
.specs .value { margin: 0; max-width: none; }
.specs .value .m { color: var(--amber); }

/* ---- tiers --------------------------------------------------------- */

.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.tier { border: 1px solid var(--rule); border-radius: 10px; padding: 24px; background: var(--surface); }
.tier .tag {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim); margin: 0 0 10px;
}
.tier .amount { font-family: var(--mono); font-size: 27px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 12px; }
/* The trial is the strongest thing on the page, so it leads the grid and
   carries the accent. */
.tier.featured { border-color: var(--amber); }
.tier.featured .amount { color: var(--amber); }
.tier ul { margin: 0; padding-left: 18px; }
.tier li { margin-bottom: 7px; }
.tier li::marker { color: var(--amber); }

/* ---- writeups ------------------------------------------------------ */

.pieces { list-style: none; padding: 0; margin: 28px 0 0; }
.pieces li { border-top: 1px solid var(--rule); padding: 22px 0; }
.pieces li:last-child { border-bottom: 1px solid var(--rule); }
.pieces a { font-family: var(--mono); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; display: inline-block; margin-bottom: 5px; }
.pieces p { margin: 0; color: var(--dim); font-size: 15.5px; }

/* ---- limits -------------------------------------------------------- */

.limits { margin: 24px 0 0; padding-left: 20px; }
.limits li { margin-bottom: 13px; max-width: var(--measure); }
.limits li::marker { color: var(--dim); }
.limits strong { font-family: var(--mono); font-size: 0.95em; font-weight: 600; }

/* ---- footer -------------------------------------------------------- */

footer {
  border-top: 1px solid var(--rule);
  padding: 40px 0 56px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--dim);
}
footer a { color: var(--dim); }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 16px; }

/* ---- article pages ------------------------------------------------- */

.article { padding: 8px 0 clamp(56px, 9vw, 88px); }
.article h1 { font-size: clamp(26px, 4.6vw, 40px); margin-bottom: 12px; }
.article h2 { margin-top: 46px; }
.article h3 { margin-top: 30px; font-size: 17px; }
.article p, .article li { max-width: var(--measure); }
.article ul, .article ol { padding-left: 20px; }
.article li { margin-bottom: 11px; }
.article li::marker { color: var(--amber); }
.article code { background: var(--surface); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--rule); }
.article .meta { font-family: var(--mono); font-size: 12.5px; color: var(--dim); margin: 0 0 34px; }
.article .note { border-left: 2px solid var(--amber); padding: 4px 0 4px 18px; margin: 28px 0; color: var(--dim); }
.article table { border-collapse: collapse; width: 100%; margin: 24px 0; font-size: 15px; }
.article th, .article td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.article th { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.article .back { font-family: var(--mono); font-size: 13px; color: var(--dim); text-decoration: none; display: inline-block; margin-bottom: 28px; }
.article .back:hover { color: var(--amber); }

/* ---- hero layout + product shots ------------------------------------
   The site had no images at all, which meant a stranger was asked to pay
   for a keyboard they had never seen. Everything here is self-hosted, so
   the no-external-requests promise still holds. */

.hero-main {
  display: grid;
  grid-template-columns: 1fr minmax(230px, 290px);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.hero-copy { min-width: 0; }

figure.shot { margin: 0; }
figure.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--rule);
  background: var(--surface);
}
figure.shot figcaption {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--dim);
  margin-top: 10px;
  line-height: 1.5;
}

/* Row of supporting shots under a section's prose. */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(18px, 3vw, 30px);
  margin-top: 34px;
  max-width: 720px;
}

/* ---- trust strip ---------------------------------------------------- */

.trust {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--dim);
  margin: 14px 0 0;
  max-width: 52ch;
}

/* ---- mid-page CTA --------------------------------------------------- */

.cta-block {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--amber);
  border-radius: 10px;
  background: var(--surface);
  padding: clamp(20px, 3vw, 28px);
  margin-top: clamp(32px, 5vw, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.cta-block p { margin: 0; max-width: 46ch; }
.cta-block .btn { flex-shrink: 0; }

/* ---- getting started steps ------------------------------------------ */

.steps { list-style: none; counter-reset: step; padding: 0; margin: 28px 0 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 0 42px;
  margin-bottom: 18px;
  max-width: var(--measure);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  color: var(--amber);
  font-family: var(--mono);
  font-size: 12.5px;
  display: grid;
  place-items: center;
}
.steps strong { font-family: var(--mono); font-size: 0.95em; font-weight: 600; }

/* ---- FAQ ------------------------------------------------------------ */

.faq { margin: 28px 0 0; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  padding: 16px 30px 16px 0;
  position: relative;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.45;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 15px;
  color: var(--amber);
  font-family: var(--mono);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--amber); }
.faq .answer { padding: 0 0 18px; margin: 0; color: var(--dim); }
.faq .answer + .answer { padding-top: 0; margin-top: -8px; }

/* ---- sticky install bar (mobile only) --------------------------------
   One install button on a 2,500px page meant the whole persuasive middle
   had no conversion exit. Phone viewports get a persistent one. */

.install-bar { display: none; }

@media (max-width: 720px) {
  .install-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--rule);
  }
  .install-bar .label {
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.35;
    color: var(--dim);
    margin: 0;
  }
  .install-bar .btn { padding: 11px 18px; font-size: 13px; }
  /* Keep the footer clear of the bar. */
  body { padding-bottom: 74px; }
}

/* ---- writeup helpers ------------------------------------------------- */

.table-scroll { overflow-x: auto; margin: 24px 0; }
.table-scroll table { margin: 0; }
.table-scroll.wide table { min-width: 640px; }

.table-hint { display: none; }
@media (max-width: 720px) {
  .table-hint {
    display: block;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--dim);
    margin: 24px 0 -16px;
  }
}

.article-cta {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--dim);
  border-left: 2px solid var(--amber);
  padding: 6px 0 6px 18px;
  margin: 26px 0 34px;
}
.article-cta a { color: var(--fg); }
.article-cta a:hover { color: var(--amber); }

.app-id { font-family: var(--mono); font-size: 0.9em; }

/* ---- responsive ---------------------------------------------------- */

@media (max-width: 720px) {
  body { font-size: 16px; }
  .tstep { grid-template-columns: 1fr; gap: 2px; padding: 9px 16px; }
  .tiers { grid-template-columns: 1fr; }
  .specs li { grid-template-columns: 1fr; gap: 3px; padding: 13px 0; }
  .masthead { padding: 20px 0; }
  .masthead nav { gap: 15px; }
  /* Text first on a phone, product shot after the CTA. */
  .hero-main { grid-template-columns: 1fr; gap: 30px; }
  figure.shot { max-width: 280px; }
  .shots { max-width: none; }
  .cta-block { flex-direction: column; align-items: flex-start; }
}

/* Below ~520px the four nav links wrap to a second line while the brand stays
   vertically centred beside them, which reads as a misalignment. Stack instead. */
@media (max-width: 520px) {
  .masthead { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .btn:hover { transform: none; }
}