:root {
  --paper: var(--color-ground);
  --white: var(--color-cream);
  --ink: var(--color-ink);
  --ink-70: color-mix(in srgb, var(--color-ink) 70%, transparent);
  --ink-55: color-mix(in srgb, var(--color-ink) 55%, transparent);
  --ink-40: color-mix(in srgb, var(--color-ink) 40%, transparent);
  --rule: color-mix(in srgb, var(--color-ink) 14%, transparent);
  --red: var(--color-accent);
  --red-hover: color-mix(in srgb, var(--color-accent) 86%, var(--color-ink));
  --red-08: color-mix(in srgb, var(--color-accent) 8%, transparent);
  --red-30: color-mix(in srgb, var(--color-accent) 30%, transparent);
  --blush: var(--color-blue-soft);
}

body {
  min-height: 100svh;
  isolation: isolate;
  background: var(--color-ground);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -36px;
  pointer-events: none;
}

/*
 * No photograph behind the pages, and no wash over it.
 *
 * A blurred picture under translucent panels was the dashboard's look, and the
 * dashboard is gone. What is left is the landing page, which is flat: one
 * ground, hairlines, and type. These pages are that now, so a person moving
 * from attesko.com into any of them sees one site rather than two eras of it.
 *
 * The pseudo-elements stay declared and empty rather than being deleted: the
 * mobile rule at the bottom of this file still adjusts `body::before`, and a
 * pseudo-element with no background paints nothing.
 */
.nav {
  position: fixed;
  inset: 0 0 auto;
  border: 0;
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-ground);
}

.nav .brand::after { background: var(--color-ink); }
.iconbtn { background: var(--transparent); }

/*
 * The column, and the blocks inside it.
 *
 * These were two levels of glass panel copied from the product dashboard: a
 * shell with a 30px blur and blocks floating inside it at 24px. Both are gone.
 * A page is a column of prose on the ground, and a block that needs to stand
 * apart gets a hairline — which is what the marketing pages do and what the
 * documentation pages were changed to.
 *
 * The width stays a prose measure rather than going full-bleed: the docs pages
 * earned the full width because a route table and a code block are scanned, and
 * a privacy policy is read.
 */
.start,
.legal,
.detail,
.waitlist { min-height: 100svh; background: var(--color-ground); }

/* Privacy and Terms are read start to finish, not scanned. They get the ink
   ground so they read as documents rather than as more marketing. */
.legal--ink { background: var(--color-ink); color: var(--pure-white); }
.legal--ink .legal__lead,
.legal--ink p,
.legal--ink li { color: var(--white-85); }
.legal--ink h1,
.legal--ink h2,
.legal--ink h3,
.legal--ink strong { color: var(--pure-white); }
.legal--ink .legal__num { color: var(--color-blue-soft); }
.legal--ink a { color: var(--color-blue-soft); }
.legal--ink .legal__card,
.legal--ink .legal__never,
.legal--ink .legal__contact { border-color: var(--overlay-white-25); }

.start__in,
.legal__in,
.detail__in,
.waitlist__in {
  width: min(calc(100% - 2 * var(--gutter)), 940px);
  max-width: none;
  margin-inline: auto;
  padding: clamp(34px, 5vw, 74px) 0;
  border: 0;
  border-radius: 0;
  background: var(--transparent);
  box-shadow: none;
}

.start h1,
.legal h1,
.detail h1,
.waitlist h1 { font-size: clamp(48px, 6vw, 84px); font-weight: 420; letter-spacing: -.055em; }
.start__lead,
.legal__lead,
.detail__lead,
.waitlist__lead { max-width: 62ch; font-size: clamp(17px, 1.5vw, 21px); }

/* The section number is a marginal marker, not part of the sentence: it had no rule
   at all, so every legal heading rendered as "01What may reach Attesko". */
.legal__num { display: inline-block; min-width: 2.6em; color: var(--color-accent); font-family: var(--font-technical); font-size: var(--t-label); font-weight: 700; vertical-align: baseline; }

/* A block that needs to stand apart gets a rule, not a pane of glass. */
.step,
.legal__card,
.legal__never,
.note,
.promise {
  border: 0;
  border-left: 2px solid var(--color-rule-strong);
  border-radius: 0;
  background: var(--transparent);
  box-shadow: none;
}
.detail figure,
.detail__next {
  border: 0;
  border-radius: 0;
  background: var(--transparent);
  box-shadow: none;
}

.step { margin-top: 12px; padding: 4px 0 4px 24px; }
.detail figure { padding: 0; }
/* The image inside a glass panel gets no second frame of its own. */
.detail figure img { border: 0; background: transparent; border-radius: 12px; }
/* A white hairline was an edge catching the light on glass. On the ground it is nothing. */
.detail__next { margin-top: var(--s-16); padding: var(--s-6) 0 0; border-top: 1px solid var(--color-rule); }

/*
 * The one dark panel, for the passage on a page that carries the weight.
 * The dashboard uses exactly one of these too — "What I can and cannot see" —
 * and it works because it is the only one.
 */
.glass-dark {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--overlay-white-18);
  border-radius: 18px;
  background: var(--color-navy);
  color: var(--color-cream);
}
.glass-dark h2, .glass-dark h3 { color: var(--color-cream); }
.glass-dark p { color: color-mix(in srgb, var(--color-cream) 78%, transparent); }
.glass-dark a { color: var(--color-accent); }

.btn { border-radius: 7px; }

/* ── Detail pages ──────────────────────────────────────────────────────────
   trust.html, how-it-works.html and see-it-work.html carried a byte-identical
   1.5KB <style> block each. It lives here now, once, so the three cannot drift
   apart — and so the glass above actually reaches them: the inline copy set
   `background: var(--paper)` on `.detail`, which painted over the backdrop, and
   being inline it won on document order no matter what this file said. */
.detail { padding: calc(var(--nav-h) + var(--s-16)) 0 var(--s-24); }
.detail__eyebrow { margin: 0 0 var(--s-4); font-family: var(--font-technical); font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--accent-text); }
.detail h1 { margin: 0 0 var(--s-5); line-height: var(--lh-display); color: var(--ink); }
.detail__lead { margin: 0 0 var(--s-12); line-height: var(--lh-body); color: var(--ink-70); }
.detail h2 { margin: var(--s-12) 0 var(--s-4); font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.detail p { margin: 0 0 var(--s-4); line-height: var(--lh-body); color: var(--ink-70); }
.detail figure { margin: var(--s-8) 0; }
.detail figure img { display: block; width: 100%; }
.detail figcaption { margin-top: var(--s-3); font-family: var(--font-technical); font-size: var(--t-label); color: var(--ink-55); }
.detail__back { display: inline-block; margin-bottom: var(--s-8); font-family: var(--font-technical); font-size: var(--t-label); text-underline-offset: 5px; }
.detail__next { display: flex; gap: var(--s-6); flex-wrap: wrap; }

@media (max-width: 640px) {
  .detail { padding-top: calc(var(--nav-h) + var(--s-10)); }
}


@media (max-width: 640px) {
  body::before { inset: -22px; }
  .start__in,
  .legal__in,
  .detail__in,
  .waitlist__in { width: calc(100% - 40px); padding: 28px 0; }
  .start h1,
  .legal h1,
  .detail h1,
  .waitlist h1 { font-size: clamp(42px, 14vw, 60px); }
}

/* ── The waitlist page ─────────────────────────────────────────────────────
   The same form as the homepage dialog, on its own URL so it can be shared.

   The dialog's `.ea__*` rules live in `src/story.css`, which only the homepage
   loads, so these are a second set rather than a shared one. They are kept
   deliberately identical in behaviour — if the two ever need to diverge, that
   is a decision to make on purpose, not a drift to discover. */
.waitlist { padding: calc(var(--nav-h) + var(--s-16)) 0 var(--s-24); }
/*
 * A narrower shell than its siblings.
 *
 * The others hold prose, which fills 940px. This holds a form, and a form has a
 * comfortable maximum width well below that — at 940 the fields ran to about
 * 540px and left the right half of the panel empty, which read as a layout
 * mistake rather than as space.
 */
.waitlist__in { width: min(calc(100% - 2 * var(--gutter)), 720px); }
/* The heading rule above sets size and tracking but not leading, and without
   this the two lines of "Join the waitlist" fell apart on a phone. */
.waitlist h1 { margin: 0 0 var(--s-5); line-height: var(--lh-display); }
.waitlist__lead { margin: 0 0 var(--s-10); color: var(--ink-70); line-height: var(--lh-body); }
.wl { display: grid; gap: 14px; }
.wl__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wl__field { display: grid; gap: 6px; }
/* --ink-70, not --ink-55. Measured on the glass panel, 55% gives 3.56:1 and
   these are 11px uppercase — the size with the least margin for error. */
.wl__field > span { font-family: var(--font-technical); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-70); }
.wl__field input, .wl__field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--color-rule-strong); border-radius: 8px; background: var(--color-cream); color: var(--ink); font: inherit; font-size: 15px; }
.wl__field textarea { resize: vertical; min-height: 76px; }
.wl__field input:focus-visible, .wl__field textarea:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; border-color: var(--accent-text); }
.wl__submit { margin-top: 6px; padding: 14px 20px; border: 0; border-radius: 11px; background: var(--color-accent); color: var(--color-cream); font: inherit; font-size: 15px; font-weight: 560; cursor: pointer; transition: background-color 180ms ease; }
.wl__submit:hover { background: color-mix(in srgb, var(--color-accent) 88%, var(--color-ink)); }
.wl__submit:disabled { opacity: .55; cursor: default; }
.wl__note { margin: 0; min-height: 20px; font-size: 14px; line-height: 1.45; }
.wl__note[data-state="error"] { color: var(--ink); font-weight: 540; }
.wl__fine { margin: 0; color: var(--ink-70); font-size: 12px; }
.wl__pot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.waitlist__alt { margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--rule); color: var(--ink-70); font-size: 15px; }

@media (max-width: 640px) {
  .waitlist { padding-top: calc(var(--nav-h) + var(--s-10)); }
  .wl__row { grid-template-columns: 1fr; }
}

/* ── documentation ────────────────────────────────────────────────────────
   A reference page rather than a narrative one, so it needs three things the
   detail pages never did: a way to jump to a section, tables that hold a
   comparison, and steps that read as an ordered path. Everything below is
   built from the existing tokens — this adds a layout, not a second palette.
*/
/*
 * The reference reads as a document with a map beside it, not a page with a
 * list of jump links stacked on top of the thing they jump to.
 *
 * The contents were a wrapped row above the body: it pushed the first section
 * below the fold, and once you were reading you had scrolled past the only way
 * to move. A rail stays visible, which is what makes a long page navigable
 * rather than merely long.
 *
 * Below 900px it collapses back to the row it was. A 220px rail beside a
 * measure of text does not fit on a phone, and the row is the right answer
 * there rather than a compromise.
 */
.docs__layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: var(--s-10);
  align-items: start;
}
.docs__toc {
  position: sticky;
  top: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 0 0 var(--s-6);
}
.docs__toc a { padding: var(--s-1) 0; }
@media (max-width: 900px) {
  .docs__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .docs__toc {
    position: static;
    margin: var(--s-8) 0 var(--s-12);
    padding: var(--s-5) 0;
    border-block: 1px solid var(--color-rule);
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-6);
    align-items: baseline;
  }
}
.docs__toc p {
  margin: 0;
  width: 100%;
  font-family: var(--font-technical);
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.docs__toc a { font-size: 15px; text-underline-offset: 4px; }

/* Anchored headings land under the fixed header rather than behind it. */
.docs h2[id], .docs h3[id] { scroll-margin-top: calc(var(--nav-h) + var(--s-6)); }

.docs__table { overflow-x: auto; margin: var(--s-6) 0 var(--s-8); }
.docs__table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.docs__table th, .docs__table td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--color-rule);
  line-height: var(--lh-body);
  color: var(--ink-70);
}
.docs__table th {
  font-family: var(--font-technical);
  font-size: var(--t-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-55);
  border-bottom-color: var(--color-rule-strong);
}
.docs__table td:first-child { color: var(--ink); }
.docs__table tr:last-child td { border-bottom: 0; }

/* Numbered because setup genuinely is a sequence: each step depends on the
   one above it. Nothing else on this page is numbered. */
.docs__steps { margin: var(--s-6) 0 var(--s-12); padding: 0; list-style: none; counter-reset: docs-step; }
.docs__steps > li {
  position: relative;
  padding-left: calc(var(--s-12) + var(--s-1));
  margin-bottom: var(--s-8);
}
.docs__steps > li::before {
  counter-increment: docs-step;
  content: counter(docs-step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-cream);
  font-family: var(--font-technical);
  font-size: 13px;
}
.docs__steps h3, .docs h3 { margin: 0 0 var(--s-3); font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.docs h3 { margin-top: var(--s-8); }
.docs__steps h3 { margin-top: 0; }

.docs__note { padding: var(--s-5) var(--s-6); margin: var(--s-5) 0 0; }
.docs__note p { margin: 0; }

.docs__list { margin: var(--s-4) 0 var(--s-8); padding-left: var(--s-6); }
.docs__list li { margin-bottom: var(--s-4); line-height: var(--lh-body); color: var(--ink-70); }

/* ── documentation as a field, not a column ───────────────────────────────
   The older reference pages were a 940px column on an empty ground, which is the
   shape every other page here uses for prose and the wrong one for a reference:
   a route table and a vocabulary list are scanned, not read, and they were
   wrapping at half the width a person had available.

   The section fields elsewhere on this site — a hairline grid, one circle, a
   mono label — already say "this is a technical surface". Reusing them is what
   makes the reference look like part of the site rather than a page bolted on,
   and it costs two pseudo-elements. Prose keeps its measure inside the wider
   field: text does not get more readable by getting wider.

   Both verticals sit right of that measure, which is what decides the widths
   this grid appears at. Measured rather than reasoned: painted prose runs to
   773px and barely moves with the viewport, because 72ch is a fixed measure. At
   64% that is cleared from 1210px up, so the grid is hidden below 1280 — under
   that there is no field beside the column, only the column. The tile is 1px
   wide so a percentage means the position it looks like; at 26% it did not, and
   the line I placed at 58% painted at 43% of the width, through the text.

   A hairline drawn through running text is a scratch, not a field; drawn
   through the empty half it is the mark the marketing sections use.
*/
.docs { background: var(--color-ground); }
/*
 * No card. The marketing sections are full-bleed surfaces with a gutter and a
 * hairline or two, and a reference wrapped in translucent cream with a 40px
 * radius reads as a different site — which is what it looked like, because
 * widening this rule left the card it was widening in place.
 *
 * `isolation` is load-bearing rather than decoration: the field grid below is a
 * `z-index: -1` pseudo-element, and once this section paints a ground of its
 * own the grid would fall behind it. Isolating makes this element the stacking
 * context, so the grid sits above its background and below its text.
 */
.docs .detail__in {
  width: 100%;
  max-width: none;
  padding: clamp(28px, 3.4vw, 52px) var(--gutter) clamp(64px, 8vw, 116px);
  position: relative;
  isolation: isolate;
}
.docs .detail__in::before {
  content: ""; position: absolute; inset: -24px 0 0; z-index: -1; pointer-events: none;
  /*
   * The verticals fade in below the header rather than running its full height.
   *
   * On the cream card they were a texture; on a near-white ground they read as
   * a scratch drawn through the display headline. 470px clears the tallest
   * header these two pages produce at any width where the grid is shown — the
   * The older product lead ended at 418px at 1440 and its reference page at 336 — measured
   * rather than guessed, because a headline is one copy edit away from wrapping.
   */
  mask-image: linear-gradient(to bottom, transparent 0 390px, var(--color-ink) 470px);
  background:
    linear-gradient(to right, var(--color-rule) 1px, transparent 1px) 64% 0 / 1px 100% no-repeat,
    linear-gradient(to right, var(--color-rule) 1px, transparent 1px) 85% 0 / 1px 100% no-repeat,
    linear-gradient(to bottom, var(--color-rule) 1px, transparent 1px) 0 16% / 100% 1px no-repeat;
}
.docs .detail__in > p,
.docs .detail__in > ul,
.docs .detail__in > ol,
.docs .detail__in > h2,
.docs .detail__in > h3 { max-width: 72ch; }
.docs .detail__lead { max-width: 60ch; }
/* The two dots the marketing pages put before a section label, on the eyebrow
   these pages already had. Defined against the existing class rather than by
   borrowing `mono-tag` from story.css, which these pages do not load — a class
   that is only styled on some pages is the kind of thing that looks fine until
   somebody moves a stylesheet. */
.docs .detail__eyebrow { display: flex; align-items: center; }
.docs .detail__eyebrow::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-text); box-shadow: 8px 0 0 var(--accent-text); margin-right: 16px;
}
/* The tables and code blocks are what earn the extra width. */
.docs .docs__table,
.docs .code { max-width: none; }

/*
 * Structure by rule rather than by panel.
 *
 * These four were glass cards — a translucent fill, a radius, a shadow and a
 * 24px backdrop blur each. Stacked down a reference page that is mostly panels,
 * the blur is doing no work: there is nothing behind it but the ground. A
 * hairline says the same thing about where a block starts and costs no paint.
 */
.docs .docs__note,
.docs .note { padding: var(--s-2) 0 var(--s-2) var(--s-5); }
.docs .detail__next { padding: var(--s-6) 0 0; border-top: 1px solid var(--color-rule); }

/*
 * Code blocks, which had no styling whatsoever.
 *
 * `.code` was matched by exactly one declaration on this page — `max-width` —
 * so a `<div>` holding a two-line curl command and a JSON body rendered as
 * collapsed prose in the body face: HTML folds the newlines, and there was
 * nothing to preserve them. On the one page whose readers are a developer with
 * a terminal and a coding agent, the snippets were the part that did not work.
 */
.docs .code {
  margin: var(--s-4) 0 var(--s-6);
  padding: var(--s-5) var(--s-6);
  overflow-x: auto;
  border: 1px solid var(--color-rule);
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-ink) 3%, var(--color-ground));
  font-family: var(--font-technical);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink);
  /* The whole point: the newlines the author wrote are the ones shown. */
  white-space: pre;
  tab-size: 2;
}
.docs .hint { font-size: 15px; color: var(--color-muted); }
/* Inline code fell back to the browser's generic monospace while the blocks
   beside it were Geist Mono — two different faces for the same kind of thing on
   the same page. Route names in the table are inline code too. */
.docs code {
  font-family: var(--font-technical);
  font-size: .92em;
  color: var(--ink);
  word-break: break-word;
}
@media (max-width: 1280px) {
  /* Below this the prose column fills the width and there is no field to draw in. */
  .docs .detail__in::before { display: none; }
}