/* Drafta — component vocabulary, v2 (warm paper).
   §4 of the build contract: only the class names listed there exist here, and
   every value comes from the design tokens — no raw colour, no px font size. Warmth is
   in the paper and the type (§2), not in mascots: no character illustration, no
   gradient wash, motion limited to transform/opacity.

   The typefaces are self-hosted from assets/fonts/ as woff2, one face per subset
   with its own unicode-range. Every family carries Latin AND Cyrillic, so a
   Russian page never falls back to the system serif. */

/* ---------- self-hosted typefaces (SIL Open Font License, see assets/fonts/) ---------- */

/* Lora — display. Variable 400–700. */
@font-face{
  font-family:'Lora'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/lora-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Lora'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/lora-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Lora'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/lora-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Lora'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/lora-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Golos Text — body and UI. Variable 400–900. */
@font-face{
  font-family:'Golos Text'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url('/assets/fonts/golos-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Golos Text'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url('/assets/fonts/golos-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Golos Text'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url('/assets/fonts/golos-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Golos Text'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url('/assets/fonts/golos-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* JetBrains Mono — code. Variable 400–700. */
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/jetbrains-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/jetbrains-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/jetbrains-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/jetbrains-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Metric-matched fallbacks. While a woff2 is still loading, text is set in a
   local face scaled to the web font's average advance and vertical metrics, so
   the swap moves nothing (it was the whole of the page's layout shift). Ratios
   measured from the shipped subsets against Arial and Georgia, Latin and
   Cyrillic averaged. */
@font-face{
  font-family:'Golos Fallback';
  src:local('Arial'), local('ArialMT'), local('Liberation Sans');
  size-adjust:108.5%; ascent-override:90.3%; descent-override:20.3%; line-gap-override:0%;
}
@font-face{
  font-family:'Lora Fallback';
  src:local('Georgia');
  size-adjust:104.5%; ascent-override:96.3%; descent-override:26.2%; line-gap-override:0%;
}

/* ---------- reset + base ---------- */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--space-9);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--step-0);
  font-weight:400;
  line-height:var(--leading-body);
  text-wrap:pretty;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg,video{display:block;max-width:100%;height:auto}

a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}

/* Drop the 300ms double-tap zoom delay on controls. */
a,button,input,select,textarea,summary,label,[role="button"]{touch-action:manipulation}

p{margin:0 0 var(--space-4)}
p:last-child{margin-bottom:0}
strong,b{font-weight:600;color:var(--text)}
hr{border:0;border-top:1px solid var(--border);margin:var(--space-8) 0}

/* Every interactive element shows where the keyboard is. */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius);
}
::selection{background:var(--accent-dim);color:var(--text)}

pre{
  margin:0;
  padding:var(--space-5);
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow-x:auto;
  font-family:var(--font-mono);
  font-size:var(--step--1);
  line-height:1.6;
  color:var(--text-soft);
}
code{
  font-family:var(--font-mono);
  font-size:.94em;
  color:var(--text);
}
pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
:not(pre) > code{
  padding:0 var(--space-1);
  background:var(--accent-bg);
  border-radius:var(--radius);
}

/* ---------- layout ---------- */

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--space-6);
}
.wrap--narrow{max-width:var(--maxw-narrow)}

/* §2: whitespace is the material — the rhythm comes from --space-9/--space-10. */
.section{padding-block:var(--space-9)}
.section--tight{padding-block:var(--space-7)}

.grid{display:grid;gap:var(--space-7)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.divider{
  height:0;
  max-width:var(--maxw);
  margin:var(--space-9) auto;
  border:0;
  border-top:1px solid var(--border);
}

/* ---------- colour bands ----------
   §2: a section that changes colour. `.band` IS the section wrapper and carries
   the background; the ink band re-points the text and line tokens so everything
   inside it — headings, cards, rules, buttons — adapts without new classes. */

.band{
  background:var(--bg);
  padding-block:var(--space-10);
}
.band--soft{background:var(--bg-soft)}
.band--ink{
  background:var(--bg-band);
  color:var(--ink-text);
  --text:var(--ink-text);
  --text-soft:var(--ink-muted);
  --muted:var(--ink-muted);
  --muted-2:var(--ink-muted);
  --border:var(--ink-border);
  --border-strong:var(--ink-border);
  --surface:color-mix(in srgb, var(--ink-text) 6%, transparent);
  --surface-2:color-mix(in srgb, var(--ink-text) 9%, transparent);
  --accent:color-mix(in srgb, var(--accent) 60%, var(--ink-text));
  --accent-hover:color-mix(in srgb, var(--accent) 40%, var(--ink-text));
  --accent-bg:color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-dim:color-mix(in srgb, var(--accent) 34%, transparent);
  --shadow-sm:none;
  --shadow:none;
  --shadow-lg:none;
}
.band--ink .btn--primary{background:var(--ink-text);color:var(--bg-band)}
.band--ink .btn--ghost{border-color:var(--ink-border);color:var(--ink-text)}

/* ---------- editorial pieces ----------
   §2: asymmetry and editorial rhythm instead of a row of equal cards. */

.split{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  align-items:start;
  gap:var(--space-9);
}
.split--reverse{grid-template-columns:0.85fr 1.15fr}
.split--reverse .split__text{order:2}
.split--reverse .split__media{order:1}
.split__text{max-width:38rem}
.split__media{min-width:0}

/* Every product shot is an object: 1px border, --radius-lg, --shadow-lg, and a
   --muted caption at --step--1. */
.figure{margin:0}
.figure__frame{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.figure__caption{
  margin-top:var(--space-4);
  font-size:var(--step--1);
  color:var(--muted);
}

.pullquote{
  max-width:34rem;
  text-wrap:balance;
  margin:0;
  padding-top:var(--space-6);
  border-top:1px solid var(--border);
  font-family:var(--font-display);
  font-size:var(--step-3);
  font-weight:400;
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
  color:var(--text);
}
.pullquote__source{
  display:block;
  margin-top:var(--space-5);
  font-family:var(--font-sans);
  font-size:var(--step--1);
  letter-spacing:0;
  color:var(--muted);
}

.stat{display:flex;flex-direction:column;gap:var(--space-1)}
.stat__value{
  font-family:var(--font-display);
  font-size:var(--step-4);
  font-weight:500;
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
  color:var(--text);
}
.stat__label{font-size:var(--step--1);color:var(--muted)}

/* A soft decorative accent — allowed to be absent, never a character. */
.mark{
  position:absolute;
  z-index:0;
  pointer-events:none;
  opacity:.55;
  color:var(--accent-dim);
}

/* ---------- nav ---------- */

.nav{
  position:sticky;
  top:0;
  z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:blur(var(--space-4));
  backdrop-filter:blur(var(--space-4));
  border-bottom:1px solid var(--border);
}
.nav__inner{
  display:flex;
  align-items:center;
  gap:var(--space-7);
  padding-block:var(--space-4);
}
.nav__logo{
  font-family:var(--font-display);
  font-size:var(--step-1);
  font-weight:600;
  letter-spacing:var(--tracking-display);
  color:var(--text);
}
.nav__logo:hover{color:var(--text)}
.nav__links{display:flex;align-items:center;gap:var(--space-6)}
.nav__link{font-size:var(--step-0);color:var(--text-soft)}
.nav__link:hover{color:var(--text)}
.nav__actions{
  display:flex;
  align-items:center;
  gap:var(--space-5);
  margin-inline-start:auto;
}

/* The section-menu toggle exists only below the breakpoint, and only once
   nav.js has wired it (the button ships `hidden`). Its label is for screen
   readers; the three bars are drawn from the current text colour. */
.nav__toggle{
  display:none;
  order:3;
  align-items:center;
  justify-content:center;
  inline-size:calc(var(--space-7) - var(--space-1));
  block-size:calc(var(--space-7) - var(--space-1));
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--text);
  cursor:pointer;
}
.nav__toggle:hover{border-color:var(--border-strong)}
.nav__toggle-icon,
.nav__toggle-icon::before,
.nav__toggle-icon::after{
  display:block;
  inline-size:calc(var(--space-4) + var(--space-1) / 2);
  block-size:2px;
  border-radius:var(--radius-pill);
  background:currentColor;
  transition:transform .15s ease, opacity .15s ease;
}
.nav__toggle-icon{position:relative}
.nav__toggle-icon::before,
.nav__toggle-icon::after{content:"";position:absolute;inset-inline-start:0}
.nav__toggle-icon::before{transform:translateY(calc(var(--space-1) * -1.5))}
.nav__toggle-icon::after{transform:translateY(calc(var(--space-1) * 1.5))}
.nav.is-open .nav__toggle-icon{background:transparent}
.nav.is-open .nav__toggle-icon::before{background:var(--text);transform:rotate(45deg)}
.nav.is-open .nav__toggle-icon::after{background:var(--text);transform:rotate(-45deg)}
.nav__toggle-label{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ---------- language switcher ---------- */

.lang{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  padding:var(--space-1);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
}
.lang__btn{
  position:relative;
  padding:var(--space-1) var(--space-4);
  border-radius:var(--radius-pill);
  font-family:var(--font-mono);
  font-size:var(--step--1);
  font-weight:500;
  letter-spacing:.04em;
  line-height:1.6;
  color:var(--muted);
}
.lang__btn:hover{color:var(--text)}
.lang__btn--active{background:var(--text);color:var(--bg)}
/* The pill keeps its designed size; a transparent ::after grows the tap target to
   44px. The horizontal expansion only reaches outward (first/last child) so the
   two buttons never steal each other's clicks. */
.lang__btn::after{
  content:"";
  position:absolute;
  inset-block:calc(var(--space-2) * -1);
  inset-inline:0;
}
.lang__btn:first-child::after{inset-inline-start:calc(var(--space-3) * -1)}
.lang__btn:last-child::after{inset-inline-end:calc(var(--space-3) * -1)}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  padding:var(--space-3) var(--space-6);
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-pill);
  font-family:inherit;
  font-size:var(--step-0);
  font-weight:500;
  line-height:1.5;
  color:var(--text);
  cursor:pointer;
  text-align:center;
  transition-property:transform,opacity;
  transition-duration:.15s;
  transition-timing-function:ease;
}
.btn:hover{transform:translateY(calc(var(--space-1) / -4))}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.btn--primary{
  background:var(--accent);
  border-color:transparent;
  color:var(--surface);
}
.btn--ghost{background:transparent;border-color:var(--border-strong);color:var(--text)}
.btn--lg{padding:var(--space-4) var(--space-7);font-size:var(--step-1)}
.btn--block{display:flex;width:100%}

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

.eyebrow{
  text-wrap:balance;
  display:flex;
  align-items:center;
  gap:var(--space-3);
  margin:0 0 var(--space-5);
  font-family:var(--font-mono);
  font-size:var(--step--1);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.eyebrow::before{
  content:"";
  width:var(--space-6);
  height:1px;
  background:var(--accent);
}
.h1{
  text-wrap:balance;
  margin:0 0 var(--space-6);
  font-family:var(--font-display);
  font-size:var(--step-5);
  font-weight:500;
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
  color:var(--text);
}
.h2{
  text-wrap:balance;
  margin:0 0 var(--space-5);
  font-family:var(--font-display);
  font-size:var(--step-4);
  font-weight:500;
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
  color:var(--text);
}
.h3{
  text-wrap:balance;
  margin:0 0 var(--space-3);
  font-family:var(--font-display);
  font-size:var(--step-1);
  font-weight:600;
  line-height:1.3;
  color:var(--text);
}
.lede{
  margin:0 0 var(--space-6);
  max-width:38rem;
  font-size:var(--step-1);
  line-height:1.55;
  color:var(--text-soft);
}
.muted{color:var(--muted)}
.mono{
  font-family:var(--font-mono);
  font-size:.94em;
  letter-spacing:-.01em;
}

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

.hero{padding-block:var(--space-9) var(--space-10)}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4);
  margin:var(--space-7) 0 var(--space-5);
}
.hero__meta{margin:0 0 var(--space-8);font-size:var(--step--1);color:var(--muted)}
/* §2: the product shot may sit across a section boundary instead of inside a box. */
.hero__shot{margin-block-end:calc(var(--space-8) * -1)}

/* ---------- product shot ---------- */

.shot{margin:0}
.shot__frame{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.shot__img{width:100%;height:auto}
.shot__caption{
  margin-top:var(--space-4);
  font-size:var(--step--1);
  color:var(--muted);
}
.shot__ph{
  display:none;
  place-items:center;
  aspect-ratio:16 / 10;
  background:var(--bg-soft);
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:var(--step--1);
}
.shot--missing .shot__frame{border-style:dashed}
.shot--missing .shot__ph{display:grid}

/* ---------- feature rows ---------- */

.feature-row{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  align-items:center;
  gap:var(--space-9);
  padding-block:var(--space-8);
}
.feature-row--reverse{grid-template-columns:0.9fr 1.1fr}
.feature-row--reverse .feature-row__text{order:2}
.feature-row--reverse .feature-row__media{order:1}
.feature-row__text{min-width:0;max-width:34rem}
.feature-row__media{min-width:0}
.feature-row__media .shot{margin:0}
.feature-row__list{
  display:grid;
  gap:var(--space-3);
  margin:var(--space-6) 0 0;
  padding:0;
  list-style:none;
  color:var(--text-soft);
  font-size:var(--step-0);
}
.feature-row__list li{position:relative;padding-inline-start:var(--space-6)}
.feature-row__list li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.6em;
  width:var(--space-2);
  height:var(--space-2);
  border-radius:var(--radius-pill);
  background:var(--accent);
}

/* ---------- feature grid ----------
   §2: stop the uniform card row. Two editorial columns, hairline rules, no boxes. */

.features{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-7) var(--space-8);
}
.feature{
  padding-top:var(--space-5);
  border-top:1px solid var(--border);
}
.feature__icon{
  display:grid;
  place-items:center;
  width:var(--space-7);
  height:var(--space-7);
  margin-bottom:var(--space-4);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:var(--step-0);
  line-height:1;
}
.feature__title{
  text-wrap:balance;
  margin:0 0 var(--space-2);
  font-family:var(--font-display);
  font-size:var(--step-1);
  font-weight:600;
  color:var(--text);
}
.feature__body{margin:0;font-size:var(--step-0);color:var(--text-soft)}

/* ---------- plans ---------- */

.plans{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:var(--space-7);
  max-width:calc(var(--maxw) * 0.70);
}
.plan{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  padding:var(--space-6);
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.plan--featured{
  background:var(--surface);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-lg);
}
.plan--selected{
  border-color:var(--accent);
  box-shadow:0 0 0 var(--space-1) var(--accent-dim), var(--shadow-lg);
}
.plan__name{
  text-wrap:balance;
  margin:0;
  font-family:var(--font-display);
  font-size:var(--step-2);
  font-weight:600;
  color:var(--text);
}
.plan__period-label{
  margin:calc(var(--space-3) * -1) 0 0;
  font-size:var(--step--1);
  color:var(--muted);
}
.plan__price{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--step-4);
  font-weight:600;
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
  color:var(--text);
}
.plan__price .plan__period{
  font-family:var(--font-sans);
  font-size:var(--step-0);
  font-weight:400;
  letter-spacing:0;
  white-space:nowrap;
  color:var(--muted);
}
.plan__equiv{
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.plan__note{margin:0;font-size:var(--step--1);color:var(--muted)}
.plan__cta{
  width:100%;
  margin-top:auto;
}
.plan__cta--featured{
  background:var(--accent);
  border-color:transparent;
  color:var(--surface);
}
/* The shared checklist, below both cards — never inside one. */
.plan__list{
  grid-column:1 / -1;
  display:grid;
  gap:var(--space-3);
  margin:var(--space-6) 0 0;
  padding:0;
  list-style:none;
  font-size:var(--step-0);
  color:var(--text-soft);
}
.plan__item{
  position:relative;
  padding-inline-start:var(--space-7);
  padding-block:var(--space-2);
  border-bottom:1px solid var(--border);
}
.plan__item:first-child{border-top:1px solid var(--border)}
.plan__tick{
  position:absolute;
  inset-inline-start:0;
  top:var(--space-2);
  color:var(--ok);
  font-size:var(--step-0);
  line-height:inherit;
}
.plan__tick::before{content:"\2713"}
.plan__trial{
  grid-column:1 / -1;
  margin:0;
  font-size:var(--step--1);
  color:var(--muted);
}

/* ---------- trial callout ---------- */

.callout{
  padding:var(--space-6) var(--space-7);
  background:var(--surface-2);
  border:1px solid var(--border);
  border-inline-start:var(--space-1) solid var(--accent);
  border-radius:var(--radius);
  color:var(--text-soft);
  font-size:var(--step-0);
}
.callout p{margin:0}
.callout--accent{
  background:var(--accent-bg);
  border-color:var(--accent-dim);
  border-inline-start-color:var(--accent);
  color:var(--text);
}

/* The trial callout and the pricing block are siblings inside one .wrap on both
   landings, and neither carries a margin of its own, so the cards' top edge and
   their shadow used to butt straight into the callout's box. Checkout keeps the
   two in separate bands, so this neighbour rule bites on the landings only. */
.callout + .plans{margin-top:var(--space-7)}

/* ---------- flush sibling blocks ----------

   Spacing in this file is bottom-margin driven: h2, .lede and p each carry a bottom
   margin, and p deliberately carries no top margin, so any block that carries none
   of its own — the plans grid, a grid of features, an editorial split — leaves
   whatever follows it flush against its last line. The three rules below cover
   every such pair on the landings and the checkout pages. Each restores the rhythm
   of the grid it precedes instead of a house number: the ink band's feature mosaic
   sets its own row gap (var(--space-5), page-local), a plain .grid rows at
   var(--space-7). Pairs whose 0 gap is deliberate are listed where they are made:
   .band padding-block, .faq__item / .roadmap__item hairlines, .footer__col a
   padding-block. */

/* the pricing block -> the note under it (on checkout, the quota line) */
.plans + p{margin-top:var(--space-5)}
/* the ink band's one-wide-feature grid -> the 2x2 feature grid below it */
.grid--2 + .grid--2{margin-top:var(--space-5)}
/* a security/local-first split -> the feature grid that continues the band */
.split + .grid--2{margin-top:var(--space-7)}

/* ---------- faq ---------- */

.faq{display:grid}
.faq__item{padding-block:var(--space-5);border-bottom:1px solid var(--border)}
.faq__item:first-child{border-top:1px solid var(--border)}
.faq__q{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--step-1);
  font-weight:600;
  color:var(--text);
}
summary.faq__q{cursor:pointer;list-style:none}
summary.faq__q::-webkit-details-marker{display:none}
summary.faq__q:hover{color:var(--accent)}
details[open] > .faq__q{margin-bottom:var(--space-3)}
.faq__a{
  margin:var(--space-3) 0 0;
  max-width:44rem;
  color:var(--text-soft);
  font-size:var(--step-0);
}

/* ---------- roadmap ---------- */

.roadmap{display:grid;margin:0;padding:0;list-style:none}
.roadmap__item{
  display:flex;
  align-items:center;
  gap:var(--space-5);
  padding-block:var(--space-4);
  border-bottom:1px solid var(--border);
  color:var(--text);
  font-size:var(--step-0);
}
.roadmap__item:first-child{border-top:1px solid var(--border)}
.roadmap__status{
  margin-inline-start:auto;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:var(--step--1);
  white-space:nowrap;
}
.dot{
  flex:0 0 auto;
  width:var(--space-2);
  height:var(--space-2);
  border-radius:var(--radius-pill);
  background:var(--muted-2);
}
.dot--done{background:var(--ok)}
.dot--progress{background:var(--warn)}
.dot--planned{background:var(--muted-2)}

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

.footer{
  padding-block:var(--space-9);
  border-top:1px solid var(--border);
  color:var(--muted);
}
.footer__inner{display:grid;gap:var(--space-8)}
.footer__brand{
  font-family:var(--font-display);
  font-size:var(--step-1);
  font-weight:600;
  letter-spacing:var(--tracking-display);
  color:var(--text);
}
.footer__cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-7);
}
.footer__col{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  font-size:var(--step-0);
}
/* 44px tall targets: the glyphs keep their size, the padding around them grows. */
.footer__col a{display:inline-block;padding-block:var(--space-2);color:var(--text-soft)}
.footer__col a:hover{color:var(--accent)}
.footer__col-title{
  margin-bottom:var(--space-2);
  font-family:var(--font-mono);
  font-size:var(--step--1);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.footer__legal{
  padding-top:var(--space-6);
  border-top:1px solid var(--border);
  font-size:var(--step--1);
  color:var(--muted);
}
.footer__legal a{position:relative;color:var(--text-soft)}
/* 44px target on the legal line's language links, the same technique the language
   switcher uses: the text keeps its size, a transparent overlay supplies the target.
   It lives here because .footer__legal is the shared footer — every page gets it.
   The overlay runs --space-4 above and below the link's own box, which measures 49px
   on every page: --space-2 each way only reached 33px, short of the 44px goal. */
.footer__legal a::after{
  content:"";
  position:absolute;
  inset-block:calc(var(--space-4) * -1);
  inset-inline:0;
}
.footer__legal a:hover{color:var(--accent)}

/* ---------- forms ---------- */

.form{display:grid;gap:var(--space-6);max-width:30rem}
.form__field{display:grid;gap:var(--space-2)}
.form__label{
  font-family:var(--font-mono);
  font-size:var(--step--1);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.form__input{
  width:100%;
  padding:var(--space-4) var(--space-5);
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  font-family:inherit;
  font-size:var(--step-0);
  line-height:1.5;
  color:var(--text);
}
/* --muted passes AA on white (5.74:1); --muted-2 was 2.66:1 and failed. */
.form__input::placeholder{color:var(--muted)}
.form__input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 var(--space-1) var(--accent-dim);
}
.form__input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.form__input:disabled{opacity:.6;cursor:not-allowed}
.form__hint{margin:0;font-size:var(--step--1);color:var(--muted)}
.form__error{
  margin:0;
  padding:var(--space-4) var(--space-5);
  background:color-mix(in srgb, var(--danger) 8%, var(--surface));
  border:1px solid var(--danger);
  border-radius:var(--radius);
  font-size:var(--step-0);
  color:var(--text);
}
.form__ok{
  margin:0;
  padding:var(--space-4) var(--space-5);
  background:color-mix(in srgb, var(--ok) 8%, var(--surface));
  border:1px solid var(--ok);
  border-radius:var(--radius);
  font-size:var(--step-0);
  color:var(--text);
}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5)}
.form__alt{margin:0;font-size:var(--step-0);color:var(--muted)}

/* ---------- state ---------- */

[hidden],.is-hidden{display:none !important}

.is-busy{pointer-events:none;cursor:progress;opacity:.7}
.is-busy::after{
  content:"";
  display:inline-block;
  width:1em;
  height:1em;
  margin-inline-start:var(--space-2);
  border:1px solid currentColor;
  border-top-color:transparent;
  border-radius:var(--radius-pill);
  vertical-align:-.15em;
  animation:drafta-spin .7s linear infinite;
}

@keyframes drafta-spin{to{transform:rotate(360deg)}}

/* ---------- accessibility ---------- */

/* Skip to content: parked off screen until it takes focus, then pinned under the top
   edge so a keyboard user can see and read it. Grown from the landing's page-local
   block, which had to describe it there while this file was in another writer's hands. */
.skip-link{
  position:absolute;
  inset-inline-start:var(--space-4);
  inset-block-start:var(--space-3);
  z-index:30;
  transform:translateY(-200%);
  transition-property:transform,opacity;
  transition-duration:.15s;
  transition-timing-function:ease;
}
.skip-link:focus{transform:translateY(0)}

/* ---------- responsive: the single breakpoint ---------- */

@media (max-width:820px){
  .wrap{padding-inline:var(--space-5)}

  .grid--2,.grid--3,.features,.plans,.footer__cols,.split,.split--reverse,
  .feature-row,.feature-row--reverse{
    grid-template-columns:minmax(0,1fr);
  }
  .split,.feature-row{gap:var(--space-7)}
  .split--reverse .split__text{order:0}
  .split--reverse .split__media{order:0}
  .feature-row--reverse .feature-row__text{order:0}
  .feature-row--reverse .feature-row__media{order:0}

  /* Nav links hide; the language switcher and the primary CTA stay, so the row
     has to be tightened to fit a 375px viewport (logo + switcher + CTA). */
  /* Without nav.js the section links wrap onto a second row; with it they fold
     behind the toggle and open as a panel under the header row. */
  .nav__inner{gap:var(--space-2);flex-wrap:wrap}
  .nav__links{order:4;flex-basis:100%;gap:var(--space-5)}
  .nav--menu .nav__toggle:not([hidden]){display:inline-flex}
  .nav--menu .nav__links{display:none}
  .nav--menu.is-open .nav__links{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding-block-start:var(--space-2);
  }
  .nav--menu .nav__link{
    display:flex;
    align-items:center;
    min-block-size:calc(var(--space-7) - var(--space-1));
    border-block-start:1px solid var(--border);
    font-size:var(--step-1);
    color:var(--text);
  }
  .nav__actions{gap:var(--space-2)}
  .nav .lang__btn{padding:var(--space-1) var(--space-2)}
  .nav .btn{padding:var(--space-2) var(--space-4)}

  .band,.section{padding-block:var(--space-8)}
  .band--ink{padding-block:var(--space-9)}
  .hero{padding-block:var(--space-8)}
  .hero__shot{margin-block-end:0}
  .hero__actions{margin-block:var(--space-6)}
  /* Stacked, the 48px that separates two side-by-side cards becomes a vertical
     gap of its own, so it drops back to the section rhythm. */
  .plans{max-width:none;gap:var(--space-6)}
  /* The status label would not fit beside a long line on a phone: it drops
     under the text, aligned with it rather than with the dot. */
  .roadmap__item{flex-wrap:wrap;row-gap:var(--space-1)}
  .roadmap__item > span:nth-child(2){flex:1 1 0;min-inline-size:0}
  .roadmap__status{flex-basis:100%;padding-inline-start:calc(var(--space-2) + var(--space-5))}
  .mark{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transform:none !important;
  }
  /* The blanket transform:none above would otherwise park the skip link permanently
     on screen: keep it hidden, and reveal it on focus, without any motion. */
  .skip-link{transition:none;transform:translateY(-200%) !important}
  .skip-link:focus{transform:translateY(0) !important}
}