/* ============================================================
 * MentiSec base.css
 * Phase 02: reset + tokens consumption + typography + layout +
 *           components (buttons, section-head)
 * Phase 03: hero, audience, pains, services, deliverables,
 *           packages, tender
 * Phase 04: process, cases, logos+metrics, why, founder, faq,
 *           final CTA, footer
 * Phase 05: ct-hero, ct-grid, ct-aside, form fields, radios,
 *           legal-hero, legal-body
 * ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-16);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; padding: 0; }

/* Display type — IBM Plex Sans (single family, weight + size differentiate) */
.display, h1, h2, h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 6.4vw, 80px); letter-spacing: -0.02em; }
h2 { font-size: clamp(30px, 4.2vw, 52px); letter-spacing: -0.015em; }
h3 { font-size: clamp(20px, 2.2vw, 28px); }

p { margin: 0; text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--t-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.lede {
  font-family: var(--font-ui);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  color: var(--ink-2);
  font-weight: 400;
  font-style: normal;
  max-width: 60ch;
}

/* Long-form reading passages (case studies, methodology, blog content) */
.longform { font-family: var(--font-longform); font-weight: 400; }
.longform p { margin-top: 0.9em; }

/* Tabular numerics — stats, prices, aligned numeric columns */
.tnum, .meta-row .k, .metric-strip .k, .pkg .price, .deliverables li,
.hero .meta-row .k { font-variant-numeric: tabular-nums; }

/* Inline technical strings (CVE, IP, hash, version, file path, command) */
code, kbd, samp, pre, .mono { font-family: var(--font-mono); font-weight: 400; }

.muted { color: var(--muted); }
.small { font-size: var(--t-14); }

/* Layout */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}

section { padding-block: var(--section-y); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 800px;
  margin-bottom: 56px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gold);
}
.section-head .eyebrow {
  position: relative;
  padding-left: 18px;
}
.section-head .eyebrow::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 600;
}
.section-head .eyebrow + h2 { margin-top: 4px; }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* Navy sections */
.is-navy {
  background: var(--bg-navy);
  color: var(--on-navy);
}
.is-navy h1, .is-navy h2, .is-navy h3 { color: var(--on-navy); }
.is-navy .eyebrow { color: var(--on-navy-muted); }
.is-navy .muted, .is-navy .lede { color: var(--on-navy-muted); }
.is-navy .rule { background: var(--on-navy-rule); }

.is-alt {
  background: var(--bg-alt);
}
[data-theme="dark"] .is-alt { background: var(--bg-alt); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  font-family: var(--font-ui);
  font-size: var(--t-15);
  font-weight: 500;
  letter-spacing: 0;
  border-radius: 999px;
  background: var(--gold);
  color: #1A1106;
  border: 1px solid var(--gold);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--gold-2); border-color: var(--gold-2); }
.btn:hover { transform: translateY(-1px); }
.btn .arr { transition: transform var(--dur) var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}
.btn-ghost:hover { border-color: var(--ink); }

.is-navy .btn {
  background: var(--gold);
  color: #1A1106;
  border-color: var(--gold);
}
.is-navy .btn:hover { background: var(--gold-2); border-color: var(--gold-2); }
.is-navy .btn-ghost {
  background: transparent;
  color: var(--on-navy);
  border-color: var(--on-navy-rule);
}
.is-navy .btn-ghost:hover { border-color: var(--on-navy); }

/* ============================================================
 * Phase 02 a11y / motion additions (spec §9.25, §10.10, §14.4, §14.6)
 * ============================================================ */

/* --focus, not --gold: gold measures 1.6:1 against the cream background, so
   a gold ring on the light theme fails the 3:1 non-text minimum. --focus
   resolves to --gold in dark (unchanged) and --ink in light. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  html { scroll-behavior: auto; }
}

.skip {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 8px 14px;
  z-index: 1000;
}
.skip:focus { top: 12px; left: 12px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}
.site-header .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
/* Brand mark — SVG lockup from /assets/. Do not re-typeset "MentiSec." in CSS. */
.brand {
  display: inline-flex;
  align-items: center;
  height: 40px;
}
.brand img, .brand svg { display: block; height: 40px; width: auto; }
.brand .lockup-light { display: block; }
.brand .lockup-dark  { display: none; }
[data-theme="dark"] .brand .lockup-light { display: none; }
[data-theme="dark"] .brand .lockup-dark  { display: block; }

.nav-main {
  display: flex;
  align-items: center;
  /* 24px, not 32. Sized when the band still carried six items, where the
     logo was being crushed; the Analüüsid round cut it to four and the
     pressure with it, but the gap stays — it is what the 880px collapse was
     measured against, and widening it would move that number for no gain. */
  gap: 24px;
}
.nav-main a {
  font-size: 17px;
  color: var(--ink-2);
  letter-spacing: 0.005em;
  /* 400, not 500: the current item is what weight distinguishes now. */
  font-weight: 400;
  transition: color var(--dur) var(--ease);
}
[data-theme="dark"] .nav-main a { color: var(--ink); }
.nav-main a:hover { color: var(--gold-2); }
[data-theme="dark"] .nav-main a:hover { color: var(--gold); }

/* Current item, in both the row and the panel. The underline is --focus, not
   --gold: gold on cream measures 1.6:1 and fails the 3:1 non-text minimum, so
   light theme underlines in ink and dark theme in gold. */
.nav-main a[aria-current],
.m-nav a[aria-current] {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--focus);
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--bg-navy);
  border-radius: 999px;
  background: var(--bg-navy);
}
[data-theme="dark"] .lang-toggle {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
}
/* The two language buttons keep the group and its "Vaheta keelt" label to
   themselves; the ADMIN segment and the theme button sit outside it. */
.lang-pair { display: inline-flex; align-items: center; gap: 4px; }
/* One segment vocabulary for the pill's contents. ADMIN is staff-only (§9.32),
   so it never widens the header for a reader, and it never takes the gold
   .active fill — ET or EN is always the current one, and a second gold segment
   would read as a third language. That guarantee comes from .lang-btn.active
   below simply not matching .admin-btn. */
.lang-btn, .admin-btn {
  font-size: var(--t-12);
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--on-navy-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lang-btn.active { background: var(--gold); color: #1A1106; }
.lang-btn:not(.active):hover, .admin-btn:hover { color: var(--on-navy); }
/* The two app pictograms. Same 30px round hit area and the same muted/hover
   colours as .theme-toggle, so the pill reads as one row of segments rather
   than icons bolted onto a language switch. The hairline is what separates
   "go somewhere else" from "change this page". */
.app-links { display: inline-flex; align-items: center; gap: 2px; }
.app-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--on-navy-muted);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.app-btn:hover { color: var(--on-navy); background: rgba(255,255,255,0.08); }
.pill-sep {
  width: 1px;
  height: 16px;
  margin: 0 3px;
  background: rgba(255,255,255,0.18);
  flex: none;
}
/* The page-level --focus is --ink, which is 1.35:1 against the navy pill: a
   focus ring nobody can see, on four controls in a row. Gold measures 5.90:1
   there and is already the dark theme's focus colour, so the pill overrides the
   token for everything inside it rather than each control restating an outline. */
.lang-toggle { --focus: var(--gold); }

.theme-toggle {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-left: 4px;
  font-size: 16px;
  color: var(--on-navy-muted);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.theme-toggle:hover { color: var(--on-navy); background: rgba(255,255,255,0.08); }
.theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-dark { display: inline; }

.header-cta {
  display: none;
  font-size: var(--t-14);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 8px 14px;
  border-radius: 999px;
}
@media (min-width: 980px) {
  .header-cta { display: inline-flex; }
}

/* Header nav collapse — 880px, not 760px.
   Measured with all six items, both locales: the logo is only at its full
   196px from 906px (ET) / 883px (EN) at the old 32px gap, and from 863px (ET)
   with the 24px gap above. No amount of gap tightening reaches 760px: even
   gap 16 with 16px text only gets to 797px. So the band has to collapse
   instead, and 880 is the lowest round number that clears the ET worst case
   with margin (8px clearance at 880, and the swap-period fallback font is
   narrower still, 858px).

   Below the breakpoint there is now a menu rather than nothing: the previous
   build hid the nav at 880 and offered no replacement, so from 879px down the
   site had no navigation at all beyond the logo.

   NB: this is the header only. The other 760px queries in this file are
   content grids and must not move with it. */
.menu-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 2px;
  font-size: var(--t-13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
}
@media (max-width: 879.98px) {
  .nav-main { display: none; }
  .site-header .utility { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (min-width: 880px) {
  .nav-main { display: flex; }
  .menu-btn { display: none; }
  /* Belt and braces: a viewport dragged past the breakpoint with the menu
     open must not leave a panel or a scrim behind. site.js closes it too. */
  .m-panel, .m-scrim { display: none !important; }
}

/* Mobile panel — drops from under the sticky 76px header, absolutely
   positioned so the page below is covered rather than pushed down. */
.m-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 32px 56px -28px rgba(10, 16, 32, 0.45);
}
.site-header.menu-open .m-panel { display: block; }
.m-nav { display: grid; padding-top: 4px; }
.m-nav a {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  padding: 15px 0;
  border-top: 1px solid var(--rule-soft);
}
.m-nav a:first-child { border-top: 0; }
.m-controls {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--rule);
  padding: 16px 0 20px;
  margin-top: 2px;
}
.m-scrim {
  display: none;
  position: fixed;
  inset: 76px 0 0 0;
  background: color-mix(in oklab, var(--bg-navy-2) 46%, transparent);
  z-index: 40;
}
.m-scrim.show { display: block; }
body.menu-lock { overflow: hidden; }

/* Hero */
.hero { padding-top: clamp(56px, 8vw, 96px); padding-bottom: 0; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
@media (min-width: 980px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 64px;
  }
}
.hero { background: var(--bg-navy); color: var(--on-navy); padding-block: clamp(48px, 6vw, 80px) clamp(72px, 9vw, 120px); }
.hero .eyebrow { color: var(--on-navy-muted); }
.hero h1 { color: var(--on-navy); font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; }
.hero h1 em { font-style: italic; color: var(--gold); font-weight: 400; font-family: var(--font-display); letter-spacing: -0.01em; line-height: 1; }
.hero h1 .ink-line { color: var(--on-navy); font-family: var(--font-display); font-weight: 400; }
.hero .lede { color: var(--on-navy-muted); }
.hero .meta-row { border-top-color: var(--on-navy-rule); }
.hero .meta-row .item .k { color: var(--gold); font-family: var(--font-ui); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero .meta-row .item .k.k--langs { letter-spacing: 0; }
.hero .meta-row .item .v { color: var(--on-navy-muted); }
.hero .btn-ghost { color: var(--on-navy); border-color: var(--on-navy-rule); }
.hero .btn-ghost:hover { border-color: var(--on-navy); }
.hero .tagline {
  margin-top: 44px;
  font-family: var(--font-ui);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--on-navy-muted);
  font-weight: 400;
  max-width: 36ch;
  line-height: 1.4;
}
.hero .cta-row {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.hero .meta-row {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
}
@media (min-width: 760px) { .hero .meta-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero .meta-row .item .k {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(20px, 1.9vw, 24px);
  display: block;
  color: var(--gold);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.hero .meta-row .item .v {
  font-size: var(--t-13);
  color: var(--on-navy-muted);
  margin-top: 2px;
  display: block;
}

/* Photo placeholder */
.photo-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--on-navy-rule);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 18px,
      color-mix(in oklab, var(--on-navy-muted) 25%, transparent) 18px 19px
    ),
    color-mix(in oklab, var(--bg-navy-2) 80%, var(--bg-navy));
  border-radius: 2px;
  overflow: hidden;
}
.photo-frame .label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 16px;
  background: color-mix(in oklab, var(--bg-navy) 88%, transparent);
  border-top: 1px solid var(--on-navy-rule);
  font-family: var(--font-ui);
  font-size: var(--t-12);
  font-weight: 500;
  color: var(--on-navy-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.photo-frame .corner {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
  color: var(--on-navy-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.photo-frame--filled { background: var(--bg-navy-2); }
/* <picture> is display:inline by default, so an img inside it resolving
   height:100% would resolve against an auto-height box and the cover crop
   would collapse. The wrapper has to carry the frame's box itself. */
.photo-frame picture,
.person-photo picture {
  display: block;
  width: 100%;
  height: 100%;
}
.photo-frame--filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-frame--filled .label {
  background: linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--bg-navy) 90%, transparent) 100%);
  border-top: 0;
  color: var(--on-navy);
  padding: 28px 16px 14px;
}
.photo-frame--filled .corner { color: rgba(255,255,255,0.85); text-shadow: 0 1px 2px rgba(0,0,0,0.25); }

/* On a light section, photo-frame uses paper tones */
section:not(.is-navy):not(.hero) .photo-frame {
  border-color: var(--rule);
  background:
    repeating-linear-gradient(135deg, transparent 0 18px, color-mix(in oklab, var(--muted) 25%, transparent) 18px 19px),
    color-mix(in oklab, var(--bg-alt) 80%, var(--bg));
}
section:not(.is-navy):not(.hero) .photo-frame .label {
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  border-top-color: var(--rule);
  color: var(--muted);
}
section:not(.is-navy):not(.hero) .photo-frame .corner { color: var(--muted); }

/* Cards */
.card {
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 28px;
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { border-color: var(--ink); }
[data-theme="dark"] .card { background: var(--bg-alt); }
.is-navy .card {
  background: var(--bg-navy-2);
  border-color: var(--on-navy-rule);
  color: var(--on-navy);
}

.card .num {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 22px;
  color: var(--muted);
  display: block;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.card h3 { font-size: 22px; line-height: 1.2; }
.card p { margin-top: 12px; color: var(--muted); font-size: var(--t-15); }

.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 760px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.grid-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 760px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.grid-4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 600px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Audience self-id (section 2) */
.audience-card {
  border: 1px solid var(--rule);
  padding: 28px;
  border-radius: var(--r-md);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.audience-card:hover { border-color: var(--ink); }
[data-theme="dark"] .audience-card { background: var(--bg-alt); }
.audience-card .tag {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--t-12);
  letter-spacing: 0.08em;
  color: var(--gold-2);
  text-transform: uppercase;
}
[data-theme="dark"] .audience-card .tag { color: var(--gold); }
.audience-card h3 { font-size: 22px; line-height: 1.2; }
.audience-card p { color: var(--muted); font-size: var(--t-15); }

/* Pains — buyer's voice quote style */
.pain-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 28px;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
[data-theme="dark"] .pain-card { background: var(--bg-alt); }
.pain-card .quote {
  font-family: var(--font-longform);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.pain-card .quote::before { content: "\201C"; color: var(--muted); margin-right: 2px; }
.pain-card .quote::after { content: "\201D"; color: var(--muted); }
.pain-card .resp {
  font-size: var(--t-14);
  color: var(--muted);
  line-height: 1.5;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}
.pain-card .resp b {
  color: var(--ink);
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
  font-size: var(--t-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Services — Editorial spread (Option B) */
.services-spread .chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding-block: 56px;
  border-top: 1px solid var(--rule);
}
.services-spread .chapter:last-of-type { border-bottom: 1px solid var(--rule); }
@media (min-width: 860px) {
  .services-spread .chapter {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
}
.services-spread .ch-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  font-size: clamp(72px, 11vw, 144px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  margin-top: -8px;
}
.services-spread .ch-num sup {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 500;
}
.services-spread .ch-body h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 18ch;
}
.services-spread .ch-body .lede {
  margin-top: 20px;
  font-family: var(--font-longform);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 56ch;
  font-weight: 400;
}
.services-spread .ch-body .body-p {
  margin-top: 14px;
  font-size: var(--t-15);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 56ch;
}
.services-spread .output {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 10px 14px;
  max-width: 64ch;
}
.services-spread .output .label {
  font-family: var(--font-ui);
  font-size: var(--t-12);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  flex-basis: 100%;
  margin-bottom: 4px;
}
.services-spread .output .chip {
  font-family: var(--font-ui);
  font-size: var(--t-14);
  color: var(--ink-2);
  line-height: 1.3;
}
.services-spread .output .chip + .chip::before {
  content: "·";
  margin-right: 14px;
  color: var(--gold);
  font-weight: 600;
}

/* Section 04 — Deliverables */
.tagline-3 {
  margin-top: 18px;
  display: flex; flex-wrap: wrap;
  gap: 12px 18px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
}
.tagline-3 span { display: inline-block; }
.tagline-3 span + span { color: var(--ink-2); }
.tagline-3 span:nth-child(1) { color: var(--gold-2); }
[data-theme="dark"] .tagline-3 span:nth-child(1) { color: var(--gold); }

.deliverables {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  border: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 720px) {
  .deliverables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .deliverables { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.deliverables li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 26px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-md, 6px);
  list-style: none;
  transition: border-color 240ms ease, transform 240ms ease;
}
[data-theme="dark"] .deliverables li { background: var(--bg-navy); border-color: var(--rule); }
.deliverables li:hover { border-color: var(--ink-2); }
.deliverables li.is-featured {
  border-left: 2px solid var(--gold);
}
.deliverables li.is-featured:hover { border-color: var(--gold); border-left-color: var(--gold); }

.deliverables .d-head {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-soft);
}
.deliverables .d-head .n {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--t-12);
  color: var(--gold-2);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
[data-theme="dark"] .deliverables .d-head .n { color: var(--gold); }
.deliverables .d-head h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.deliverables .d-body {
  font-size: var(--t-14);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  flex-grow: 1;
}
.deliverables .d-fmt {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
}
.deliverables .d-fmt-label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-right: 4px;
}
.deliverables .d-fmt .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  background: var(--bg-alt);
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
}
[data-theme="dark"] .deliverables .d-fmt .tag { background: var(--bg-navy-2); color: var(--ink-2); }

/* Packages */
.pkg {
  border: 1px solid var(--rule);
  padding: 32px;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--bg);
}
.pkg h3 { font-size: 24px; }
.pkg .price {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 16px;
  color: var(--gold-2);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .pkg .price { color: var(--gold); }
.pkg ul { padding: 0; margin: 0; list-style: none; display: grid; gap: 10px; }
.pkg ul li {
  font-size: var(--t-15);
  padding-left: 18px;
  position: relative;
  color: var(--ink-2);
}
.pkg ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--muted);
}
.pkg .pkg-cta {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-14);
  color: var(--muted);
}

/* The two links under a package card share one flex child, so the row stays
   the two-column "P.01 ————— action" it was with a single link. */
.pkg-links { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* The reserved third package slot (D-033). Dashed, because it is a place
   held open rather than something on offer. */
.pkg--pending {
  border-style: dashed;
  gap: 14px;
  margin-top: 24px;
}
.pkg--pending p { font-size: var(--t-15); color: var(--ink-2); }

/* Teenuste pages ------------------------------------------------------ */
/* A lede in the navy band needs the on-navy muted ink; .is-navy sets that
   for the sections that carry the class, and .legal-hero is its own band. */
.legal-hero .lede { color: var(--on-navy-muted); max-width: 62ch; margin-top: 24px; }
.legal-hero .lede + .lede { margin-top: 16px; }

/* A column of running prose outside the article template. */
.prose-col { max-width: 68ch; display: grid; gap: 18px; }
.prose-col p { color: var(--ink-2); font-size: var(--t-16); line-height: 1.65; }
.prose-col .lede { color: var(--ink); }

/* Same list voice as the package cards, usable outside them. */
.ticks { padding: 0; margin: 0; list-style: none; display: grid; gap: 10px; }
.ticks li {
  padding-left: 18px;
  position: relative;
  font-size: var(--t-15);
  color: var(--ink-2);
}
.ticks li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--muted);
}
.ticks li b { color: var(--ink); font-weight: 600; }

/* Onward links — the "→" that sends a reader from a summary to the page
   that carries it. `a { color: inherit }` is global, so anywhere a link sits
   inside muted body copy it has to be told to look like one. Same treatment
   as .art-body a and .legal-body a: ink, a rule underneath, accent on hover. */
.prose-col a,
.ticks a,
.audience-card a,
.pkg-links a,
.pain-card .resp a,
.services-spread .ch-body a,
.section-head .lede a {
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.prose-col a:hover,
.ticks a:hover,
.audience-card a:hover,
.pkg-links a:hover,
.pain-card .resp a:hover,
.services-spread .ch-body a:hover,
.section-head .lede a:hover { color: var(--gold-2); border-color: var(--gold-2); }
.is-navy .prose-col a,
.is-navy .ticks a,
.legal-hero .lede a { color: var(--on-navy); }

/* Process steps */
/* Source: design/styles.css L684-712 */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  counter-reset: step;
}
@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step {
  padding: 28px 28px 28px 0;
  border-top: 1px solid var(--on-navy-rule);
  position: relative;
}
@media (min-width: 760px) {
  .step + .step { border-left: 1px solid var(--on-navy-rule); padding-left: 28px; }
}
.step .n {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--t-12);
  color: var(--gold);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 12px;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 22px; color: var(--on-navy); }
.step p { color: var(--on-navy-muted); margin-top: 10px; font-size: var(--t-15); line-height: 1.5; }

/* Cases */
/* Source: design/styles.css L714-751 */
.case {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: 36px 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .case { grid-template-columns: 200px minmax(0, 1fr); gap: 56px; }
}
.case:last-of-type { border-bottom: 1px solid var(--rule); }
.case .label .eyebrow { display: block; }
.case .label .seg {
  margin-top: 6px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
}
.case-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
@media (min-width: 980px) {
  .case-body { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}
.case-body h3 {
  font-family: var(--font-ui);
  font-size: var(--t-12);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0 0 8px;
  font-weight: 500;
}
.case-body p { font-size: var(--t-15); color: var(--ink-2); line-height: 1.55; }

/* Logos / experience */
/* Source: design/styles.css L753-807 */
.logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (min-width: 600px) { .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .logos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.logo-cell {
  background: var(--bg);
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  filter: grayscale(1);
  opacity: 0.78;
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.logo-cell:hover { opacity: 1; filter: grayscale(0); }
.logo-cell[data-brand="telia"]:hover { color: #990AE3; }
.logo-cell[data-brand="swedbank"]:hover { color: #F65A1E; }
.logo-cell[data-brand="nortal"]:hover { color: #00A859; }
.logo-cell[data-brand="riverty"]:hover { color: #527A42; }
.logo-cell[data-brand="dpd"]:hover { color: #DC0032; }
.logo-cell[data-brand="erply"]:hover { color: #FF6B00; }
.logo-cell svg { width: 72%; height: 60%; max-height: 56px; }
[data-theme="dark"] .logo-cell { background: var(--bg-alt); }

.metric-strip {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.metric-strip .item .k {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--gold-2);
  display: block;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .metric-strip .item .k { color: var(--gold); }
.metric-strip .item .v {
  font-size: var(--t-13);
  color: var(--muted);
  margin-top: 2px;
  display: block;
}

/* Meist §01 — the same three-up strip carrying three statements instead of
   three numbers. There is no .k/.v split to make here: "Vastame ühe tööpäeva
   jooksul" has no numeral to set at display size, and splitting it at a space
   to manufacture one would be emphasis the sentence does not have. One column
   below 760px, where three sentences side by side stop being readable. */
.metric-strip--facts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 760px) {
  .metric-strip--facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
.metric-strip--facts .fact {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--t-16);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

/* Meist §05 — an article card, where the whole title is the link. It is the
   shape the Analüüsid hub's own rows use, so it takes the hub's treatment
   rather than the onward-link rule above: a gold rule running under a
   two-line heading reads as a divider, not as a link. The card's border and
   the accent on the title are the hover affordance, as on every other card. */
.piece-card h3 a { border-bottom: 0; }
.piece-card:hover h3 a { color: var(--gold-2); }
[data-theme="dark"] .piece-card:hover h3 a { color: var(--gold); }

/* Why MentiSec */
/* Source: design/styles.css L809-837 */
.why {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
@media (min-width: 760px) { .why { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.why .item {
  padding: 36px 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .why .item { padding: 36px; }
  .why .item + .item { border-left: 1px solid var(--rule); }
}
.why .item .num {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  color: var(--gold-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .why .item .num { color: var(--gold); }
.why .item h3 { font-size: 26px; }
.why .item p { margin-top: 12px; color: var(--ink-2); font-size: var(--t-16); line-height: 1.55; }

/* Founder */
/* Source: design/styles.css L839-867 */
.founder {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
@media (min-width: 760px) {
  .founder { grid-template-columns: 320px minmax(0, 1fr); gap: 56px; align-items: start; }
}
.founder .photo-frame { aspect-ratio: 1 / 1; border-radius: 8px; }
.founder h3 { font-size: 28px; margin-bottom: 4px; }
.founder .role { color: var(--muted); font-size: var(--t-14); margin-bottom: 18px; display: block; }
.founder p + p { margin-top: 14px; }
.founder p { color: var(--ink-2); font-size: var(--t-16); line-height: 1.6; max-width: 60ch; }
.founder .links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 22px;
  font-size: var(--t-14);
}
.founder .links a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: border-color var(--dur) var(--ease);
}
.founder .links a:hover { border-color: var(--ink); }

/* FAQ */
/* Source: design/styles.css L869-902 */
.faq { border-top: 1px solid var(--rule); }
.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
}
.faq summary {
  display: grid;
  grid-template-columns: 1fr 24px;
  gap: 24px;
  align-items: center;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-ui);
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--ink);
  letter-spacing: -0.005em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .toggle {
  font-family: var(--font-ui);
  font-size: 18px;
  color: var(--muted);
  font-weight: 300;
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary .toggle { transform: rotate(45deg); color: var(--ink); }
.faq .answer {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: var(--t-15);
  line-height: 1.6;
  max-width: 70ch;
}

/* Final CTA */
/* Source: design/styles.css L944-975 */
.final {
  padding-block: clamp(80px, 10vw, 140px);
}
.final h2 {
  font-size: clamp(36px, 5vw, 64px);
  max-width: 18ch;
}
.final .row {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: end;
}
@media (min-width: 760px) {
  .final .row { grid-template-columns: 1fr 1fr; gap: 64px; }
}
.final .contacts {
  display: grid;
  gap: 14px;
  font-size: var(--t-15);
}
.final .contacts a { display: block; }
.final .contacts .k {
  font-size: var(--t-12);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 4px;
}

/* Footer v2 — full sitemap.
   Source: docs/design_handoff_analyysid §2. Replaces the one-line footer:
   four sections left the header this round and land here. */
.site-footer {
  padding-block: 56px 28px;
  border-top: 1px solid var(--rule);
  font-size: var(--t-13);
  color: var(--muted);
}
.foot-grid {
  display: grid;
  gap: 36px 40px;
  grid-template-columns: 1fr;
  padding-bottom: 44px;
}
@media (min-width: 560px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (min-width: 880px) {
  .foot-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .foot-brand { grid-column: auto; }
}
/* 32px, not the header's 40 — the footer lockup is the subordinate one. */
.foot-brand .brand,
.foot-brand .brand img { height: 32px; }
.foot-k {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kicker);
  font-weight: 500;
  margin-bottom: 14px;
}
.foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.foot-col a {
  color: var(--ink-2);
  font-size: var(--t-14);
  width: fit-content;
  transition: color var(--dur) var(--ease);
}
.foot-col a:hover { color: var(--ink); }
[data-theme="dark"] .foot-col a:hover { color: var(--gold); }
.foot-bottom {
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  font-size: var(--t-13);
  color: var(--muted);
}

/* Legal pages (privacy, terms) */
/* Source: design/privaatsus.html L18-83 (= design/tingimused.html L18-83) */
.legal-hero {
  background: var(--bg-navy);
  color: var(--on-navy);
  padding-block: clamp(56px, 8vw, 96px);
}
.legal-hero .eyebrow { color: var(--on-navy-muted); }
.legal-hero h1 {
  color: var(--on-navy);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  max-width: 22ch;
  margin-top: 20px;
}
.legal-hero .meta {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--on-navy-muted);
  text-transform: uppercase;
}
.legal-hero .meta .sep { color: var(--gold); margin: 0 10px; }

.legal-body { padding-block: clamp(56px, 8vw, 96px); }
.legal-body .wrap { max-width: 760px; }
.legal-body h2 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.01em;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.legal-body h2:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.legal-body h2 .ix {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--gold-2);
  font-weight: 500;
  flex-shrink: 0;
}
[data-theme="dark"] .legal-body h2 .ix { color: var(--gold); }
.legal-body h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--t-16);
  letter-spacing: 0;
  margin-top: 24px;
  color: var(--ink);
}
.legal-body p,
.legal-body li {
  font-family: var(--font-longform);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  margin-top: 14px;
}
.legal-body ul {
  margin-top: 14px;
  padding-left: 20px;
}
.legal-body li { margin-top: 6px; }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body a { color: var(--ink); border-bottom: 1px solid var(--gold); }
.legal-body a:hover { color: var(--gold-2); }

/* Shared back-link (also used by contact page) */
/* Source: design/privaatsus.html L75-83 */
.back-link {
  display: inline-block;
  margin-top: 56px;
  font-size: var(--t-14);
  font-family: var(--font-ui);
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.back-link:hover { color: var(--ink); border-color: var(--ink); }

/* ============================================================
   Kontakt — task page
   Source: docs/design_handoff_kontakt (README + notes + prototype).

   This page deliberately breaks the site's story-page scale: no navy hero
   band, no eyebrow, H1 at 26-30px instead of 40-80px display serif, intro
   at 16px instead of the 20-26px .lede. The page has one job — a visitor
   sends a message — and the form has to start inside the first viewport.
   ============================================================ */

main.ct { padding-block: 36px 56px; }

.ct h1 {
  font-family: var(--font-ui);
  font-size: clamp(26px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  max-width: 24ch;
}
.ct .intro {
  margin-top: 10px;
  font-size: var(--t-16);
  color: var(--muted);
  max-width: 52ch;
  line-height: 1.5;
}

.ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: 28px;
}
/* Load-bearing: the site-wide `section { padding-block: var(--section-y) }`
   would otherwise add up to 128px above the form and push it out of the
   first viewport. */
.ct-grid section { padding-block: 0; }
@media (min-width: 980px) {
  .ct-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 72px; }
}

/* ---------- form ---------- */
form.enquiry { display: grid; gap: 18px; }

.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 559px) { .f2 { grid-template-columns: 1fr; } }

.field { display: grid; gap: 6px; align-content: start; }
.field label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
/* Qualifier keeps the label's colour: --muted-2 is 3.4:1 on cream and fails
   AA at this size. */
.field label .opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.field .req { color: var(--kicker); margin-left: 1px; }

.field input,
.field textarea {
  font: inherit;
  padding: 11px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--t-15);
  min-height: 44px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
[data-theme="dark"] .field input,
[data-theme="dark"] .field textarea { background: var(--bg-alt); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 1px var(--focus);
}
.field textarea { resize: vertical; min-height: 120px; }

/* transition:none is load-bearing, not a tidy-up. Chrome does not re-resolve
   a transitioned property when only the custom property feeding it changes,
   so toggling the theme with errors on screen left the border painted in the
   other theme's red. An error border should snap anyway. */
.field.invalid input,
.field.invalid textarea { border-color: var(--err); transition: none; }
/* Server-rendered: the element only exists when there is an error, so it
   needs no display toggle. */
.err-msg { font-size: var(--t-13); color: var(--err); line-height: 1.45; }

.form-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  margin-top: 2px;
}
/* flex:1 keeps the note beside the button; it wraps under only on narrow
   phones. */
.form-foot .small {
  flex: 1;
  min-width: 220px;
  font-size: var(--t-13);
  color: var(--muted);
  line-height: 1.45;
}
.form-foot .small a {
  color: inherit;
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.form-foot .small a:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- submit-failure banner ---------- */
.ct .banner {
  border: 1px solid color-mix(in oklab, var(--err) 45%, transparent);
  background: color-mix(in oklab, var(--err) 7%, var(--bg));
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-size: var(--t-14);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 18px;
}
.ct .banner a { color: inherit; border-bottom: 1px solid currentColor; white-space: nowrap; }

/* ---------- success ---------- */
.success { max-width: 520px; }
.success h2 {
  font-size: var(--t-22);
  font-weight: 600;
  letter-spacing: -0.01em;
  width: fit-content;
}
.success h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: var(--gold);
  margin-top: 14px;
}
/* Mirrors the person card's box so the two columns stay balanced. */
@media (min-width: 980px) {
  .success {
    margin-top: 23px;
    min-height: 296.5px;
    display: grid;
    align-content: center;
    max-width: none;
  }
}

/* ---------- person card ---------- */
.person {
  border: 1px solid var(--rule);
  background: var(--bg-alt);
  border-radius: var(--r-lg);
  padding: 20px;
}
[data-theme="dark"] .person { background: var(--bg-navy-2); }
/* Top edge aligns with the E-post input, bottom edge with the Sonum
   textarea. Both values assume this type scale and rows="4" — re-measure if
   either changes.
   Scoped to .ct: the article tail reuses this card with no form beside it,
   and a fixed 296.5px there would be an arbitrary hole under the contacts. */
@media (min-width: 980px) {
  .ct .person {
    margin-top: 23px;
    height: 296.5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
.ct .person { max-width: none; }
/* The article's card is a block in a 700px reading column, not a sidebar. */
.art .person { max-width: 480px; }
.person-head { display: flex; gap: 16px; align-items: center; }
.person-photo {
  width: 104px;
  height: 104px;
  flex: none;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--gold) 35%, transparent);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--gold) 18%, transparent) inset,
              0 12px 32px -12px rgba(0, 0, 0, 0.35);
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* .p-name is the article's form of the same line: the tail already has an
   "Autor" heading above the card, so the name is a <p><b> there and the
   document outline keeps one heading per idea. */
.person h2,
.person .p-name { font-size: var(--t-18); font-weight: 600; letter-spacing: -0.01em; }
.person .p-name { line-height: 1.2; }
.person .role { font-size: var(--t-14); color: var(--muted); margin-top: 2px; }

.person .contacts {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.person .k {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kicker);
  display: block;
  margin-bottom: 3px;
  font-weight: 500;
}
.person .contacts a {
  color: var(--ink);
  font-size: var(--t-15);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  width: fit-content;
  transition: border-color var(--dur) var(--ease);
}
.person .contacts a:hover { border-color: var(--gold-2); }
[data-theme="dark"] .person .contacts a:hover { border-color: var(--gold); }

.email-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
/* D-031 contrast fix: was --muted text in a --rule box, which put the outline
   at 1.35:1 against the page — under the 3:1 non-text minimum, so it read as
   a label rather than a control. --ink-2 measures 13.4:1 light / 9.1:1 dark,
   --edge 3.4:1 / 3.2:1. */
.copy-btn {
  font-family: var(--font-mono);
  font-size: var(--t-12);
  color: var(--ink-2);
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.copy-btn:hover { color: var(--ink); border-color: var(--ink); }

/* Entity sentence — on the page for crawlers, lowest visual priority. */
.entity {
  font-size: var(--t-13);
  color: var(--muted);
  line-height: 1.5;
  margin-top: 16px;
  padding-inline: 4px;
}

/* The shared .back-link sits at 56px for the legal pages; the task page
   pulls it in. */
.ct .back-link { margin-top: 36px; }

/* Honeypot — off-screen but focusable-by-bot. Per spec 11.2. */
.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 559px) {
  main.ct { padding-block: 24px 48px; }
  .ct-grid { margin-top: 22px; gap: 32px; }
  form.enquiry { gap: 16px; }
}

/* ---------- Packages comparison table ("Võrdlus ühe pilguga") ---------- */
.pkg-compare { margin-top: 48px; }
.pkg-compare h3 { font-size: 20px; margin-bottom: 16px; }
.pkg-compare-scroll { overflow-x: auto; }
.pkg-compare table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--t-15);
}
.pkg-compare th,
.pkg-compare td {
  border: 1px solid var(--rule);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}
.pkg-compare thead th {
  font-family: var(--font-ui);
  font-weight: 500;
  background: var(--bg-alt);
}
.pkg-compare tbody th {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ============================================================
   Analüüsid — content hub + article template
   Source: docs/design_handoff_analyysid (README + notes + prototypes).
   The prototype shipped this as a second stylesheet loaded after the site's
   own; merged here instead, with the rules it superseded deleted rather
   than overridden (the 880px header band above).
   ============================================================ */

/* ---------- shared vocabulary: type badge, date, topic chips ---------- */
.badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--bg-alt);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  width: fit-content;
  white-space: nowrap;
}
[data-theme="dark"] .badge { background: var(--bg-navy-2); }

.p-date {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Same vocabulary as the homepage .output .chip: gold dot separators, no
   gold text. z-index lifts chips above the row's stretched link so they stay
   independently clickable. */
.chips { display: flex; flex-wrap: wrap; gap: 6px 0; align-items: baseline; }
.chip {
  font-size: var(--t-13);
  color: var(--ink-2);
  position: relative;
  z-index: 1;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip + .chip::before {
  content: "·";
  color: var(--gold);
  font-weight: 600;
  margin-inline: 12px;
}
a.chip:hover { color: var(--ink); border-bottom-color: var(--ink); }
[data-theme="dark"] a.chip:hover { color: var(--gold); border-bottom-color: transparent; }

/* The language marker on an Estonian row shown in the English hub. */
.lang-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 2px 7px;
  width: fit-content;
  white-space: nowrap;
}

/* ---------- hub ---------- */
main.hub { padding-block: 36px 72px; }
.hub h1 {
  font-size: clamp(28px, 2.9vw, 34px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.hub .intro {
  margin-top: 10px;
  font-size: var(--t-16);
  color: var(--muted);
  max-width: 60ch;
  line-height: 1.5;
}
.hub .intro + .intro { margin-top: 6px; }

.filters {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.fdiv { width: 1px; height: 22px; background: var(--rule); margin-inline: 8px; }
.fbtn {
  font-size: var(--t-13);
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-2);
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.fbtn:hover { border-color: var(--ink); }
/* Ink fill, not gold: the active pill is a filled surface carrying text, and
   #1a1106 on cream is the only pairing that clears AA in both themes. */
.fbtn.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* Ruled editorial rows, not cards. Deliberate at three pieces and unchanged
   at thirty: this is an archive, and a date-led rule reads as one. */
.pieces { margin-top: 30px; border-bottom: 1px solid var(--rule); }
.piece {
  position: relative;
  display: grid;
  gap: 10px 48px;
  padding-block: 26px;
  border-top: 1px solid var(--rule);
}
@media (min-width: 880px) { .piece { grid-template-columns: 168px minmax(0, 1fr); } }
.p-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (min-width: 880px) {
  .p-meta { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 3px; }
}
.piece h2 {
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  max-width: 36ch;
}
.piece h2 a { color: var(--ink); }
/* Stretched link: the whole row is the target, chips excepted. */
.piece h2 a::after { content: ""; position: absolute; inset: 0; }
.piece:hover h2 a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--focus);
}
.piece .ex {
  margin-top: 8px;
  font-size: var(--t-15);
  color: var(--muted);
  line-height: 1.55;
  max-width: 64ch;
}
.piece .chips { margin-top: 14px; }
.empty { padding: 36px 0 8px; color: var(--muted); font-size: var(--t-15); }
.empty a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.empty a:hover { border-color: var(--ink); }

/* ---------- article ---------- */
main.art { padding-block: 40px 72px; }
/* Centred, against the site's left-aligned grid everywhere else: a page that
   is nothing but text is read, not scanned, and 700px is the measure. */
.art-col { max-width: 700px; margin-inline: auto; }
.art-head h1 {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
}
.art-head .lead {
  margin-top: 16px;
  font-family: var(--font-longform);
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
}
/* The gold rule under the meta line is the site's section-head signature. */
.art-meta {
  margin-top: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gold);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: var(--t-13);
  color: var(--muted);
}
.art-meta .sep { color: var(--muted); }
/* Staff's edit link, pushed to the right edge of whatever line it lands on —
   its own, once the meta wraps on a phone. margin-left, not space-between on
   .art-meta: the PDF template reuses this class and has no link, and
   space-between would spread its badge, date and reading time edge to edge. */
.art-meta .edit-link {
  margin-left: auto;
  color: var(--ink-2);
  /* A resting rule, not transparent-until-hover. --ink-2 against the --muted
     text beside it is 2.53:1 light / 1.95:1 dark, so colour alone does not say
     "link" here — and a hover-only cue says nothing at all to a keyboard or a
     touch user. .chip gets away with transparent because chips sit among chips;
     this sits in a line of prose, so it follows .back-link and .art-body a. */
  border-bottom: 1px solid var(--rule);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.art-meta .edit-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

.art-body {
  margin-top: 34px;
  font-family: var(--font-longform);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}
.art-body > *:first-child { margin-top: 0; }
.art-body p { margin-top: 1em; }
.art-body h2 {
  font-family: var(--font-ui);
  font-size: clamp(21px, 2vw, 25px);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 46px;
}
.art-body h3 {
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  margin-top: 34px;
}
.art-body h2 + p, .art-body h3 + p { margin-top: 12px; }
.art-body a { border-bottom: 1px solid var(--rule); transition: border-color var(--dur) var(--ease); }
.art-body a:hover { border-color: var(--focus); }
.art-body ul, .art-body ol { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.art-body ul li { padding-left: 22px; position: relative; }
.art-body ul li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }
.art-body ol { counter-reset: li; }
.art-body ol li { padding-left: 30px; position: relative; counter-increment: li; }
.art-body ol li::before {
  content: counter(li) ".";
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  color: var(--kicker);
  font-variant-numeric: tabular-nums;
}
.art-body blockquote {
  margin: 28px 0 0;
  padding: 2px 0 2px 22px;
  border-left: 2px solid var(--gold);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
}
.tbl { margin-top: 28px; overflow-x: auto; }
.art-body table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--t-14);
  line-height: 1.45;
}
.art-body th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--rule);
}
.art-body td {
  padding: 11px 16px 11px 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-2);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.art-body pre {
  margin: 28px 0 0;
  padding: 16px 18px;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}
[data-theme="dark"] .art-body pre { background: var(--bg-navy-2); }
.art-body code {
  font-size: 0.82em;
  background: var(--bg-alt);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
}
[data-theme="dark"] .art-body code { background: var(--bg-navy-2); }
.art-body pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.art-body figure { margin: 32px 0 0; }
/* Striped placeholder frame — stands in until real diagrams exist. */
.ph {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, transparent 0 18px,
      color-mix(in oklab, var(--muted) 22%, transparent) 18px 19px),
    color-mix(in oklab, var(--bg-alt) 80%, var(--bg));
}
.ph-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 10px 14px;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.art-body figcaption {
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--muted);
  line-height: 1.5;
}

/* Drawn diagrams: the same frame as the placeholder, minus the stripes and
   the 16:9 lock — a diagram is as tall as it needs to be. Each file holds two
   drawings and this swaps them, because one scaling SVG cannot keep its
   labels legible across a 700px column and a 300px one: shrinking the wide
   timeline to a phone would take its 15px labels down to 7px. */
/* The panel is paper in BOTH themes (D-031). A diagram is a printed object —
   it keeps its own light ground the way a figure in a book does, and it is the
   one thing on the page that also has to survive being exported to PDF, where
   there is no dark theme at all.

   Re-declaring the ordinary tokens from the --paper-* set is what makes that
   free: the drawings ask for var(--ink), var(--rule) and the rest exactly as
   before, and inherit these instead. Not one line of SVG changes, and the two
   themes cannot drift apart. */
.fig-frame {
  --bg: var(--paper-bg);
  --bg-alt: var(--paper-bg-alt);
  --ink: var(--paper-ink);
  --ink-2: var(--paper-ink-2);
  --muted: var(--paper-muted);
  --rule: var(--paper-rule);
  --rule-soft: var(--paper-rule-soft);
  --kicker: var(--paper-muted);
  --gold: var(--paper-gold);

  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--bg);
  padding: 20px 18px;
}
.fig-frame svg { display: block; width: 100%; height: auto; }
.fig-frame .fig-narrow { display: none; max-width: 360px; margin-inline: auto; }
/* 760px, not the site's 880/560: this is where the reading column stops being
   700px wide and the wide drawing starts being scaled down. */
@media (max-width: 759.98px) {
  .fig-frame { padding: 14px 12px; }
  .fig-frame .fig-wide { display: none; }
  .fig-frame .fig-narrow { display: block; }
}

/* The drawings ship no colours of their own — every fill and stroke is one of
   these, so both themes come out of one file.

   Colour and nothing else. Type lives in the drawings as presentation
   attributes, because that is the only description WeasyPrint reads: it applies
   presentation attributes to SVG but never class selectors, so a font-size in
   here would take effect in the browser and nowhere else. That is exactly how
   the printable copy came to set every figure label in the default face at
   16px, which overflowed the EELNÕU chip and flattened the hierarchy. One
   description, in the file, and both renderers agree. */

/* text */
.fg-ink { fill: var(--ink); }
.fg-ink2 { fill: var(--ink-2); }
.fg-muted { fill: var(--muted); }
/* --kicker, never --gold: the brand gold is 1.6:1 on cream and even the paper
   gold is 3.57:1, which is a line's allowance, not a 10px label's. */
.fg-kick { fill: var(--kicker); }

/* hairlines. --rule divides sections, --rule-soft divides rows inside one. */
.fg-rule { stroke: var(--rule); }
.fg-rule-soft { stroke: var(--rule-soft); }
.fg-axis { stroke: var(--rule); stroke-width: 1.5; }
.fg-now { stroke: var(--ink); stroke-width: 1.5; }
.fg-plan { stroke-dasharray: 5 5; }
.fg-hand { stroke-dasharray: 4 4; }
/* The one place gold is allowed: a bracket, or the border of an aside. */
.fg-mark { fill: none; stroke: var(--gold); stroke-width: 1.4; }

/* Arrows, drawn rather than typed. U+2192 is in none of the vendored Plex
   subsets, so a text arrow silently falls back to a system face — Arial in the
   PDF, whatever the reader has in the browser. */
.fg-arrow { fill: none; stroke: var(--ink-2); stroke-width: 1.4; }
.fg-arrow-h { fill: var(--ink-2); stroke: none; }

/* Boxes. In kts-kohustus-vs-leping the line weight carries the meaning: a
   framed box is a duty the act imposes, a filled one a duty a contract
   imposes. Evening the two out would cost half the drawing. */
.fg-box, .fg-tag-a { fill: var(--bg); stroke: var(--rule); }
.fg-box-soft, .fg-tag-b { fill: var(--bg-alt); stroke: var(--rule); }
.fg-box-firm { fill: var(--bg); stroke: var(--ink-2); stroke-width: 1.4; }
.fg-box-mark { fill: var(--bg); stroke: var(--gold); stroke-width: 1.4; }
.fg-chip { fill: none; stroke: var(--rule); }
.fg-dot { fill: var(--ink); }
.fg-dot-o { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; }

/* Workload-class chips: they differ by fill, not by hue, so they still read
   as three things in greyscale and to a reader who cannot separate colours. */
.fg-tag-c { fill: var(--ink); stroke: var(--ink); }
.fg-tag-t { fill: var(--ink); }
.fg-tag-t-on { fill: var(--bg); }

/* ---------- article tail ---------- */
.art-tail { margin-top: 52px; }
/* Two lines since D-032: topics, then the buttons. It was chips-left /
   actions-right under one rule, which stopped working the moment the three
   networks took labels — the labelled row is 644px in Estonian and 681px in
   English including gaps, in a column that caps at 700, so there was no width
   left to put the topics beside them. */
.tail-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}
/* Label + chips. Baseline here, unlike the button row below: this line is all
   text. .chips is one flex item, so chips wrap inside it and hang under their
   own left edge while the label stays put — the 4px row gap is only reachable
   if the label and the widest chip together outgrow the column, which they do
   not even at 320px. */
.tail-topics { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.topics-k {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--muted);
}

/* ---------- article action row (D-031) ----------
   Five affordances, one family, no brand colour anywhere: a share button that
   turns blue is an advertisement for the network, not a control on this page.
   The pictograms take currentColor, so hover and both themes come for free.

   Declared after .copy-btn on purpose — the action-row copy button carries
   both classes (the class is site.js's hook) and these win on source order. */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: var(--t-13);
  line-height: 1;
  color: var(--ink-2);
  background: none;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  padding: 8px 11px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.act svg { width: 15px; height: 15px; flex: none; display: block; }
.act:hover { color: var(--ink); border-color: var(--ink); background: var(--bg-alt); }
.act:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The three networks carry their labels only where the whole row still fits on
   one line, and give them back below that as square icon buttons (D-032).

   760px, not the 560px this shipped with. The labelled row is 642px in Estonian
   and 680px in English including gaps, and the column it sits in is the viewport
   minus two --gut gutters until it caps at 700. At 560 the labels turned on 200px
   too early and wrapped Facebook onto a row of its own, which is the exact mess
   the query exists to prevent. 740 was the next wrong answer: it is where English
   first fits, by 1.0px, which is not a margin. 760 is where the column reaches
   699 and English gets its full structural 20px — the most it can ever have,
   since the column caps at 700 — and it is a breakpoint this design already
   uses. One number for both locales, taken from the wider.

   That 20px is thin, so the English row is the one thing here a longer
   translation could break silently: test_the_labelled_row_fits_its_column
   measures both locales from the vendored font metrics and fails if it does.

   The two verbs keep their words at every width: the networks have their own
   marks to fall back on and "Lae alla PDF" does not. aria-label carries the name
   whether the span is drawn or not, and title puts it back under the cursor. */
@media (max-width: 759px) {
  .act-net { padding: 8px; }
  .act-net-t { display: none; }
}
.tail-k {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kicker);
  font-weight: 500;
  margin: 44px 0 14px;
}
.art-cta { margin-top: 40px; font-size: var(--t-18); line-height: 1.5; }
.art-cta a {
  font-weight: 500;
  color: var(--ink);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 1px;
  transition: border-color var(--dur) var(--ease);
}
.art-cta a:hover { border-color: var(--gold-2); }
.related { margin-top: 8px; }
.rel-row {
  position: relative;
  display: grid;
  gap: 4px 48px;
  padding-block: 18px;
  border-top: 1px solid var(--rule);
}
.rel-row:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 560px) { .rel-row { grid-template-columns: 168px minmax(0, 1fr); } }
.rel-row h3 {
  font-family: var(--font-ui);
  font-size: var(--t-18);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.rel-row h3 a { color: var(--ink); }
.rel-row h3 a::after { content: ""; position: absolute; inset: 0; }
.rel-row:hover h3 a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--focus);
}
/* The shared .back-link sits at 56px for the legal pages. */
.art .back-link { margin-top: 44px; }

@media (max-width: 559px) {
  main.hub { padding-block: 24px 56px; }
  main.art { padding-block: 28px 56px; }
  .piece { padding-block: 22px; }
}