/* Scribeam landing — styles.css
   Static, no JavaScript. Desktop-first (min-width 1100px, content max-width 1280px).
   Dark, cool, premium: near-black surfaces, thin rules, one violet accent.
   Tokens, type and spacing follow the design handoff (dark version) 1:1. */

/* ------------------------------------------------------------------ */
/* Fonts (self-hosted WOFF2, latin subset)                              */
/* ------------------------------------------------------------------ */
@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("fonts/familjen-grotesk-latin-wght.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: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-wght.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400.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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500.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;
}

/* ------------------------------------------------------------------ */
/* Tokens                                                               */
/* ------------------------------------------------------------------ */
:root {
  --accent: #9D7BFF;      /* brand violet #7A3BE0, lightened for dark backgrounds */
  --pulse: #E6DEFF;       /* the travelling current, brighter than the accent */
  --on-accent: #0B0D11;   /* text on accent-filled buttons, never white */

  --bg: #0B0D11;
  --band: #0F1217;        /* method section, product sidebar */
  --surface: #12151B;     /* cards, mockups */
  --surface-2: #1A1E26;   /* in-product modal, browser chrome */

  --ink: #EEF0F4;         /* text, wordmark, primary button, emphasis rules */
  --on-ink: #0B0D11;
  --text-2: #A5ADB8;
  --muted: #7C8592;
  --muted-product: #8A93A0;

  --rule: #232830;        /* hairlines */
  --rule-2: #2A3038;      /* mockup borders, contact footer rule */
  --field-border: #2F3540;
  --dot: #3A414B;
  --bar-1: #2A3038;
  --bar-2: #1F242C;

  --font-head: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------------ */
/* Base                                                                 */
/* ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  margin: 0;
  min-width: 1100px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

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

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

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 500;
  font-size: 15px;
  padding: 10px 16px;
  border-radius: 2px;
}

.skip-link:focus {
  top: 16px;
  color: var(--on-ink);
}

.container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 56px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Type helpers ------------------------------------------------------ */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.mono--sm {
  font-size: 11px;
}

.caption {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
}

.h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* Buttons & links --------------------------------------------------- */
.btn-primary {
  display: inline-block;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 500;
  font-size: 16px;
  padding: 14px 24px;
  border-radius: 2px;
  white-space: nowrap;
  flex: none;
}

.btn-primary:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-outline {
  font-weight: 500;
  font-size: 15px;
  border: 1px solid currentColor;
  padding: 8px 16px;
  border-radius: 2px;
  white-space: nowrap;
  flex: none;
}

.link-underline {
  font-weight: 500;
  font-size: 16px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  white-space: nowrap;
  flex: none;
}

/* ------------------------------------------------------------------ */
/* Nav                                                                  */
/* ------------------------------------------------------------------ */
.site-header {
  border-bottom: 1px solid var(--rule);
}

.nav {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                 */
/* ------------------------------------------------------------------ */
.hero {
  border-bottom: 1px solid var(--rule);
}

.hero__inner {
  padding-block: 96px 88px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 72px;
  align-items: center;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 68px;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.hero__sub {
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 560px;
}

.hero__ctas {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
}

.hero__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero__caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.hero__caption span:last-child {
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Generic section (label column + content)                            */
/* ------------------------------------------------------------------ */
.section {
  border-bottom: 1px solid var(--rule);
}

.section-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 48px;
}

.section__inner {
  padding-block: 88px;
}

.section__label {
  padding-top: 6px;
}

.section__body {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.section__body--tight {
  gap: 40px;
}

.section__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 760px;
}

/* Column items (problem, measure) ----------------------------------- */
.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.item {
  border-top: 1px solid var(--ink);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item__index {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.item__text {
  color: var(--text-2);
}

.item__text--sm {
  font-size: 15px;
}

/* ------------------------------------------------------------------ */
/* 02 — Method                                                          */
/* ------------------------------------------------------------------ */
.method {
  background: var(--band);
  border-bottom: 1px solid var(--rule);
}

.method__inner {
  padding-block: 96px 104px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.method__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: start;
}

.method__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 56px;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.method__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 6px;
}

.method__intro p:first-child {
  color: var(--text-2);
}

/* Two independent columns rather than a row grid: the mockups differ in
   height, and rows would leave a hole under every shorter card. */
.mockups {
  columns: 2;
  column-gap: 48px;
  orphans: 1;
  widows: 1;
}

.mockups > .mockup {
  break-inside: avoid;
  margin-bottom: 56px;
}

.mockups > .mockup:last-child {
  margin-bottom: 0;
}

.mockup {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mockup__caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.mockup__caption span:first-child {
  color: var(--ink);
  font-weight: 500;
}

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.55;
}

/* LinkedIn post */
.li {
  padding: 24px 24px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.li__head {
  display: flex;
  gap: 12px;
  align-items: center;
}

.li__avatar {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
}

.li__meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.li__name {
  font-weight: 600;
}

.li__sub {
  color: var(--muted);
  font-size: 12px;
}

.li__actions {
  display: flex;
  gap: 28px;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

/* Announcement email */
.email {
  overflow: hidden;
}

.email__meta {
  margin: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.email__meta dd {
  margin: 0;
  color: var(--ink);
}

.email__body {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.email__brand {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.email__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.email__copy {
  color: var(--text-2);
}

.btn-accent {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 2px;
}

.btn-accent--sm {
  padding: 7px 12px;
  font-size: 12px;
}

.email__footer {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding-top: 12px;
}

/* In-app widget */
.widget {
  position: relative;
  height: 508px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
}

.widget__bar {
  position: absolute;
  left: 16px;
  border-radius: 2px;
  background: var(--bar-2);
}

.widget__bar:nth-child(1) {
  top: 16px;
  width: 120px;
  height: 10px;
  background: var(--bar-1);
}

.widget__bar:nth-child(2) {
  top: 38px;
  width: 80px;
  height: 8px;
}

.widget__bar:nth-child(3) {
  top: 56px;
  width: 100px;
  height: 8px;
}

.widget__modal {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 66%;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 15px;
  line-height: 1.55;
}

.widget__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tag-new {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}

.widget__close {
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
}

.widget__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.widget__copy {
  color: var(--text-2);
}

.widget__actions {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 2px;
}

.widget__later {
  color: var(--muted);
  font-size: 12px;
}

/* Changelog entry */
.changelog {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.changelog__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

.tag-outline {
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 1px 6px;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.changelog__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.changelog__copy {
  color: var(--text-2);
}

.changelog__link {
  font-weight: 500;
  color: var(--accent);
}

/* The previous release, kept quieter: a changelog is a list, not one entry. */
.changelog__prev {
  margin-top: 12px;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.changelog__title--sm {
  font-size: 17px;
  color: var(--text-2);
}

.tag-outline--muted {
  border-color: var(--rule-2);
  color: var(--muted);
}

/* ------------------------------------------------------------------ */
/* 03 — What we deliver                                                 */
/* ------------------------------------------------------------------ */
.deliver {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: start;
}

.assets {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-top: 1px solid var(--ink);
  font-size: 15px;
}

.assets__col-name {
  width: 150px;
}

.assets th,
.assets td {
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}

.assets thead th {
  padding: 10px 0;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.assets tbody th,
.assets tbody td {
  padding: 16px 0;
}

.assets tbody th {
  font-weight: 500;
  color: var(--ink);
}

.assets tbody td {
  color: var(--text-2);
}

.assets tbody td:first-of-type {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.samples {
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-top: 1px solid var(--ink);
  padding-top: 20px;
}

.sample {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sample + .sample {
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}

.sample__line {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.sample__text {
  font-size: 15px;
  color: var(--text-2);
}

/* ------------------------------------------------------------------ */
/* 04 — How it works: inputs → Scribeam → outputs diagram               */
/* ------------------------------------------------------------------ */
.hiw {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}

.hiw__diag {
  display: grid;
  grid-template-columns: minmax(0, 5fr) 64px auto 64px minmax(0, 5fr);
  align-items: center;
}

.hiw__inputs,
.hiw__outputs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hiw__card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

.hiw__icard {
  height: 96px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hiw__card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hiw__card-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
}

.hiw__card-text {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-2);
}

/* Glyphs: abstract CSS marks, no vendor logos */
.hiw__glyph {
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--field-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.hiw__glyph--crm > span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--ink);
}

.hiw__glyph--crm > span + span {
  margin-left: -5px;
  background: var(--surface);
}

.hiw__glyph--support > span {
  width: 16px;
  height: 12px;
  border: 1px solid var(--ink);
  border-radius: 6px 6px 6px 1px;
}

.hiw__bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hiw__bars > span {
  width: 16px;
  height: 1.5px;
  background: var(--ink);
}

.hiw__bars > span:nth-child(2) {
  width: 12px;
}

.hiw__grid4 {
  display: grid;
  grid-template-columns: 6px 6px;
  gap: 3px;
}

.hiw__grid4 > span {
  width: 6px;
  height: 6px;
  border: 1px solid var(--ink);
}

.hiw__grid4 > span:last-child {
  background: var(--ink);
}

.hiw__glyph--code {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Connectors: 1px lines drawn in a 64px × 432px box */
.hiw__conn {
  position: relative;
  height: 544px;
}

.hiw__conn > span {
  position: absolute;
  background: var(--dot);
}

.hiw__bus {
  left: 50%;
  width: 1px;
}

.hiw__conn--in .hiw__bus--a { top: 48px; height: 224px; }
.hiw__conn--in .hiw__bus--b { top: 272px; height: 224px; }
.hiw__conn--out .hiw__bus--a { top: 160px; height: 112px; }
.hiw__conn--out .hiw__bus--b { top: 272px; height: 112px; }

.hiw__stub {
  width: 50%;
  height: 1px;
}

.hiw__conn--in .hiw__stub {
  left: 0;
}

.hiw__conn--out .hiw__stub {
  left: 50%;
}

.hiw__stub--i1 { top: 48px; }
.hiw__stub--i2 { top: 160px; }
.hiw__stub--i3 { top: 272px; }
.hiw__stub--i4 { top: 384px; }
.hiw__stub--i5 { top: 496px; }
.hiw__stub--o1 { top: 160px; }
.hiw__stub--o2 { top: 384px; }

.hiw__link {
  top: 272px;
  height: 1px;
  width: 50%;
}

.hiw__conn--in .hiw__link {
  left: 50%;
}

.hiw__conn--out .hiw__link {
  left: 0;
}

.hiw__dot {
  left: calc(50% - 3px);
  top: 269px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dot);
}

/* Stacked-layout connectors (mobile/tablet only) */
.hiw__stack {
  display: none;
  position: relative;
  height: 40px;
}

.hiw__stack > span {
  position: absolute;
  background: var(--dot);
}

.hiw__stack .hiw__rail {
  top: 20px;
  width: 40%;
  height: 1px;
}

.hiw__stack .hiw__rail--l { left: 10%; }
.hiw__stack .hiw__rail--r { left: 50%; }

.hiw__stack .hiw__tick {
  top: 0;
  width: 1px;
  height: 20px;
}

.hiw__stack .hiw__tick:nth-child(1) { left: 10%; }
.hiw__stack .hiw__tick:nth-child(2) { left: 30%; }
.hiw__stack .hiw__tick:nth-child(3) { left: 50%; }
.hiw__stack .hiw__tick:nth-child(4) { left: 70%; }
.hiw__stack .hiw__tick:nth-child(5) { left: 90%; }

.hiw__stack .hiw__drop {
  left: 50%;
  width: 1px;
}

.hiw__stack--in .hiw__drop {
  top: 20px;
  height: 20px;
}

.hiw__stack--out .hiw__drop {
  top: 0;
  height: 40px;
}

.hiw__stack .hiw__dot {
  top: auto;
}

.hiw__stack--in .hiw__dot {
  top: 17px;
}

.hiw__stack--out .hiw__dot {
  top: 37px;
}

/* Centre node */
.hiw__node {
  width: 264px;
  background: var(--band);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.hiw__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* The two half-discs of the favicon */
.hiw__mark {
  position: relative;
  width: 24px;
  height: 46px;
  flex: none;
}

.hiw__mark::before,
.hiw__mark::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 30px;
}

.hiw__mark::before {
  left: 9px;
  top: 16px;
  border-radius: 0 15px 15px 0;
  background: #7A3BE0;
}

.hiw__mark::after {
  left: 0;
  top: 0;
  border-radius: 15px 0 0 15px;
  background: var(--accent);
}

.hiw__brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1;
}

.hiw__node-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}

.hiw__node-tags {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Outputs */
.hiw__ocard {
  height: 208px;
  padding: 20px;
}

.hiw__ocard--gif {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px;
  gap: 20px;
  align-items: center;
}

.hiw__ocard .hiw__card-body,
.hiw__ocard--text {
  gap: 6px;
}

.hiw__ocard--text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hiw__ocard .hiw__card-text {
  line-height: 1.45;
}

.hiw__frame {
  width: 148px;
}

.hiw__chips {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}

.hiw__chip {
  border: 1px solid var(--field-border);
  padding: 3px 8px;
}

/* Closing line */
.hiw__then {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}

.hiw__then-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

.hiw__then p:last-child {
  font-size: 15px;
  color: var(--text-2);
}


/* ---- Current: a signal travels inputs → node → outputs -------------------
   Segments are overlay elements injected by js/pulse.js on top of the grey
   traces; the traces themselves never change colour. Only transform and
   opacity animate. Two identical keyframe sets (-a / -b) alternate from one
   cycle to the next, otherwise the browser reuses the finished animation
   and the replay never starts. */

.hiw__conn > .hiw__seg,
.hiw__stack > .hiw__seg,
.hiw__seg {
  position: absolute;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

/* Horizontal run: 2px tall, sitting on the 1px trace (top = lineY - 1). */
.hiw__seg--h {
  height: 2px;
}

/* Vertical run: 2px wide, centred on the trace (left = calc(50% - 1px)). */
.hiw__seg--v {
  width: 2px;
}

.hiw__seg--l { transform-origin: left center; }
.hiw__seg--r { transform-origin: right center; }
.hiw__seg--t { transform-origin: center top; }
.hiw__seg--b { transform-origin: center bottom; }

@keyframes hiw-grow-x-a {
  0%   { opacity: 0; box-shadow: 0 0 0 var(--accent); transform: scaleX(0); }
  35%  { opacity: 1; box-shadow: 0 0 8px var(--accent); transform: scaleX(0.35); }
  100% { opacity: 1; box-shadow: 0 0 8px var(--accent); transform: scaleX(1); }
}
@keyframes hiw-grow-x-b {
  0%   { opacity: 0; box-shadow: 0 0 0 var(--accent); transform: scaleX(0); }
  35%  { opacity: 1; box-shadow: 0 0 8px var(--accent); transform: scaleX(0.35); }
  100% { opacity: 1; box-shadow: 0 0 8px var(--accent); transform: scaleX(1); }
}
@keyframes hiw-grow-y-a {
  0%   { opacity: 0; box-shadow: 0 0 0 var(--accent); transform: scaleY(0); }
  35%  { opacity: 1; box-shadow: 0 0 8px var(--accent); transform: scaleY(0.35); }
  100% { opacity: 1; box-shadow: 0 0 8px var(--accent); transform: scaleY(1); }
}
@keyframes hiw-grow-y-b {
  0%   { opacity: 0; box-shadow: 0 0 0 var(--accent); transform: scaleY(0); }
  35%  { opacity: 1; box-shadow: 0 0 8px var(--accent); transform: scaleY(0.35); }
  100% { opacity: 1; box-shadow: 0 0 8px var(--accent); transform: scaleY(1); }
}

/* The whole trail leaves together. */
@keyframes hiw-fade-a {
  0%   { opacity: 1; box-shadow: 0 0 8px var(--accent); transform: none; }
  60%  { opacity: 0.35; box-shadow: 0 0 4px var(--accent); transform: none; }
  100% { opacity: 0; box-shadow: 0 0 0 var(--accent); transform: none; }
}
@keyframes hiw-fade-b {
  0%   { opacity: 1; box-shadow: 0 0 8px var(--accent); transform: none; }
  60%  { opacity: 0.35; box-shadow: 0 0 4px var(--accent); transform: none; }
  100% { opacity: 0; box-shadow: 0 0 0 var(--accent); transform: none; }
}

/* Card borders flash accent, then ease back to the neutral rule colour. */
@keyframes hiw-flash-a {
  0%   { border-color: var(--rule); }
  30%  { border-color: var(--accent); }
  55%  { border-color: var(--accent); }
  100% { border-color: var(--rule); }
}
@keyframes hiw-flash-b {
  0%   { border-color: var(--rule); }
  30%  { border-color: var(--accent); }
  55%  { border-color: var(--accent); }
  100% { border-color: var(--rule); }
}

.hiw__card.is-lit {
  animation: hiw-flash-a 1.2s ease-in-out both;
}

.hiw__card.is-lit.is-lit--b {
  animation-name: hiw-flash-b;
}

/* Node glow: soft violet bloom as the signal passes through. */
@keyframes hiw-glow-a {
  0%   { box-shadow: 0 0 0 rgba(157, 123, 255, 0); }
  50%  { box-shadow: 0 0 28px rgba(157, 123, 255, 0.45); }
  100% { box-shadow: 0 0 0 rgba(157, 123, 255, 0); }
}
@keyframes hiw-glow-b {
  0%   { box-shadow: 0 0 0 rgba(157, 123, 255, 0); }
  50%  { box-shadow: 0 0 28px rgba(157, 123, 255, 0.45); }
  100% { box-shadow: 0 0 0 rgba(157, 123, 255, 0); }
}

.hiw__node.is-lit {
  animation: hiw-glow-a 1.1s ease-in-out both;
}

.hiw__node.is-lit.is-lit--b {
  animation-name: hiw-glow-b;
}

/* Motion is decoration here: the diagram reads without it. */
@media (prefers-reduced-motion: reduce) {
  .hiw__seg,
  .hiw__card.is-lit,
  .hiw__node.is-lit {
    animation: none;
  }

  .hiw__seg { display: none; }
}

/* Diagram stacks well before the rest of the page goes mobile:
   inputs in one row of compact tiles → node → one output box, all linked. */
@media (max-width: 1000px) {
  .hiw__diag {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    justify-items: stretch;
  }

  .hiw__conn {
    display: none;
  }

  .hiw__stack {
    display: block;
  }

  .hiw__inputs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }

  .hiw__icard {
    height: auto;
    padding: 14px 6px 12px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .hiw__icard .hiw__glyph {
    width: 32px;
    height: 32px;
  }

  .hiw__icard .hiw__card-title {
    font-size: 12px;
    line-height: 1.25;
  }

  .hiw__icard .hiw__card-text,
  .hiw__card-title-long {
    display: none;
  }

  .hiw__node {
    width: auto;
  }

  /* The two outputs read as one box with an inner rule */
  .hiw__outputs {
    display: block;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
  }

  .hiw__ocard {
    height: auto;
    padding: 20px;
    background: transparent;
    border: 0;
    border-radius: 0;
    animation: none;
  }

  .hiw__outputs.is-lit {
    animation: hiw-flash-a 1.2s ease-in-out both;
  }

  .hiw__outputs.is-lit.is-lit--b {
    animation-name: hiw-flash-b;
  }

  /* One box, two titled blocks: no inner rule, "Output" said once. */
  .hiw__ocard + .hiw__ocard {
    padding-top: 4px;
  }

  .hiw__ocard + .hiw__ocard > .mono {
    display: none;
  }
}

@media (max-width: 720px) {
  .hiw__ocard--gif {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* ------------------------------------------------------------------ */
/* 06 — Fit                                                             */
/* ------------------------------------------------------------------ */
.fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
}

.fit__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}

.fit__title--muted {
  color: var(--muted);
}

.fit__list li {
  padding: 14px 0;
  color: var(--text-2);
  border-bottom: 1px solid var(--rule);
}

.fit__list li:first-child {
  border-top: 1px solid var(--ink);
}

/* ------------------------------------------------------------------ */
/* 07 — Contact                                                         */
/* ------------------------------------------------------------------ */
.contact {
  border-top: 1px solid var(--rule);
}

.contact__inner {
  padding-block: 104px 96px;
}

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: end;
}

.contact__copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.contact__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 56px;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.contact__text {
  font-size: 18px;
  color: var(--text-2);
  max-width: 520px;
}

.contact__cta {
  align-self: flex-start;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
}

.contact__cta:hover {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.contact__alt {
  font-size: 15px;
  color: var(--muted);
}

.contact__alt a {
  color: var(--text-2);
  border-bottom: 1px solid currentColor;
}

.contact__footer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
  border-top: 1px solid var(--rule-2);
  padding-top: 20px;
}

.contact__links {
  display: flex;
  gap: 10px 18px;
  flex-wrap: wrap;
}

.contact__links a {
  color: var(--ink);
  letter-spacing: 0;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 2px;
}

.contact__links a:hover {
  color: var(--accent);
  border-bottom-color: currentColor;
}

/* ------------------------------------------------------------------ */
/* FeatureFrame — simulated 8 s recording, pure CSS (all sizes in cqw)  */
/* Loop: zoom in → click "Schedule export" → modal → toggle → save →    */
/* toast → zoom out. `.ff--still` freezes it on the modal frame.       */
/* In production this is the slot for the real GIF/video per feature.  */
/* ------------------------------------------------------------------ */
@keyframes sb-zoom {
  0%, 27% { transform: scale(1); }
  35%, 64% { transform: scale(1.4); }
  74%, 100% { transform: scale(1); }
}

@keyframes sb-cursor {
  0%, 9% { left: 58%; top: 62%; }
  20% { left: 86%; top: 22%; }
  22% { left: 86%; top: 22%; transform: scale(.8); }
  24%, 36% { left: 86%; top: 22%; transform: scale(1); }
  46% { left: 56.5%; top: 78%; }
  48% { left: 56.5%; top: 78%; transform: scale(.8); }
  50%, 53% { left: 56.5%; top: 78%; transform: scale(1); }
  61% { left: 87%; top: 78%; }
  63% { left: 87%; top: 78%; transform: scale(.8); }
  65%, 72% { left: 87%; top: 78%; transform: scale(1); }
  88%, 100% { left: 58%; top: 62%; }
}

@keyframes sb-btn {
  0%, 21%, 24%, 100% { transform: scale(1); filter: brightness(1); }
  22.5% { transform: scale(.96); filter: brightness(.85); }
}

@keyframes sb-modal {
  0%, 22% { opacity: 0; transform: translateY(1.5cqw) scale(.98); }
  25%, 63% { opacity: 1; transform: none; }
  66%, 100% { opacity: 0; transform: none; }
}

@keyframes sb-toggle {
  0%, 48% { background: var(--dot); }
  50%, 100% { background: var(--accent); }
}

@keyframes sb-knob {
  0%, 48% { left: .3cqw; }
  50%, 100% { left: 2.3cqw; }
}

@keyframes sb-save {
  0%, 62%, 66%, 100% { transform: scale(1); filter: brightness(1); }
  64% { transform: scale(.96); filter: brightness(.85); }
}

@keyframes sb-toast {
  0%, 68% { opacity: 0; transform: translateY(1.5cqw); }
  72%, 88% { opacity: 1; transform: none; }
  93%, 100% { opacity: 0; transform: none; }
}

@keyframes sb-row {
  0%, 66% { color: var(--muted-product); }
  70%, 100% { color: var(--accent); }
}

@keyframes sb-progress {
  0% { width: 0; }
  100% { width: 100%; }
}

.ff {
  --sb-state: running;
  --sb-delay: 0s;
  container-type: inline-size;
  width: 100%;
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.3;
}

/* Still image: frozen 2.6 s in, modal open. Also what reduced-motion users get. */
.ff--still {
  --sb-state: paused;
  --sb-delay: -2.6s;
}

@media (prefers-reduced-motion: reduce) {
  .ff {
    --sb-state: paused;
    --sb-delay: -2.6s;
  }
}

.ff__scene,
.ff__btn,
.ff__meta--live,
.ff__modal,
.ff__toggle,
.ff__toggle::after,
.ff__save,
.ff__toast,
.ff__cursor,
.ff__track::after {
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-play-state: var(--sb-state);
  animation-delay: var(--sb-delay);
}

.ff__window {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  overflow: hidden;
}

.ff__scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transform-origin: 92% 72%;
  animation-name: sb-zoom;
  animation-timing-function: cubic-bezier(.65, 0, .35, 1);
}

.ff__chrome {
  height: 6.5cqw;
  flex: none;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule-2);
  display: flex;
  align-items: center;
  padding: 0 2cqw;
  gap: 1cqw;
}

.ff__dot {
  width: 1.4cqw;
  height: 1.4cqw;
  border-radius: 50%;
  background: var(--dot);
}

.ff__url {
  flex: 1;
  margin: 0 8cqw 0 5cqw;
  height: 3.8cqw;
  background: var(--surface);
  border-radius: 2cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 1.9cqw;
  color: var(--muted-product);
}

.ff__body {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}

.ff__side {
  width: 21%;
  flex: none;
  background: var(--band);
  border-right: 1px solid var(--rule);
  padding: 2.6cqw 2cqw;
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
}

.ff__brand {
  font-weight: 600;
  font-size: 2.6cqw;
  margin-bottom: 1.6cqw;
  letter-spacing: -0.01em;
}

.ff__nav {
  font-size: 2.1cqw;
  color: var(--muted-product);
  padding: .9cqw 1.2cqw;
}

.ff__nav--active {
  color: var(--ink);
  background: var(--rule);
  border-radius: .6cqw;
  font-weight: 500;
}

.ff__main {
  flex: 1;
  min-width: 0;
  padding: 3cqw 3.2cqw;
}

.ff__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.6cqw;
}

.ff__title {
  font-size: 3.2cqw;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ff__btn {
  font-size: 2cqw;
  font-weight: 500;
  color: var(--on-accent);
  background: var(--accent);
  padding: 1cqw 1.8cqw;
  border-radius: .6cqw;
  white-space: nowrap;
  animation-name: sb-btn;
  animation-timing-function: linear;
}

.ff__table {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 3cqw;
  font-size: 2.1cqw;
  border-top: 1px solid var(--rule);
}

.ff__table > * {
  padding: 1.6cqw 0;
  border-bottom: 1px solid var(--rule);
}

.ff__meta {
  color: var(--muted-product);
  font-family: var(--font-mono);
  font-size: 1.9cqw;
  white-space: nowrap;
}

.ff__meta--live {
  animation-name: sb-row;
  animation-timing-function: linear;
}

.ff__modal {
  position: absolute;
  right: 3.2cqw;
  top: 7.5cqw;
  width: 44%;
  background: var(--surface-2);
  border: 1px solid var(--field-border);
  border-radius: 1cqw;
  box-shadow: 0 1.2cqw 4cqw rgba(0, 0, 0, .55);
  padding: 2cqw 2.4cqw;
  display: flex;
  flex-direction: column;
  gap: 1.4cqw;
  animation-name: sb-modal;
  animation-timing-function: cubic-bezier(.2, .7, .2, 1);
}

.ff__modal-title {
  font-size: 2.4cqw;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ff__fields {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8cqw 2cqw;
  font-size: 1.9cqw;
  align-items: center;
}

.ff__label {
  color: var(--muted-product);
  white-space: nowrap;
}

.ff__field {
  border: 1px solid var(--field-border);
  border-radius: .5cqw;
  padding: .6cqw 1cqw;
}

.ff__modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .2cqw;
}

.ff__toggle-row {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  font-size: 2cqw;
}

.ff__toggle {
  position: relative;
  display: inline-block;
  width: 4.4cqw;
  height: 2.4cqw;
  border-radius: 1.2cqw;
  background: var(--dot);
  animation-name: sb-toggle;
  animation-timing-function: linear;
}

.ff__toggle::after {
  content: "";
  position: absolute;
  left: .3cqw;
  top: .3cqw;
  width: 1.8cqw;
  height: 1.8cqw;
  border-radius: 50%;
  background: #FFFFFF;
  animation-name: sb-knob;
  animation-timing-function: cubic-bezier(.2, .7, .2, 1);
}

.ff__save {
  font-size: 2cqw;
  font-weight: 500;
  color: var(--on-ink);
  background: var(--ink);
  padding: .9cqw 1.6cqw;
  border-radius: .6cqw;
  white-space: nowrap;
  animation-name: sb-save;
  animation-timing-function: linear;
}

.ff__toast {
  position: absolute;
  left: 24%;
  bottom: 8.5cqw;
  background: var(--surface-2);
  border: 1px solid var(--field-border);
  border-radius: .6cqw;
  padding: 1cqw 1.6cqw;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  font-size: 1.9cqw;
  white-space: nowrap;
  opacity: 0;
  animation-name: sb-toast;
  animation-timing-function: cubic-bezier(.2, .7, .2, 1);
}

.ff__toast-dot {
  width: 1.2cqw;
  height: 1.2cqw;
  border-radius: 50%;
  background: var(--accent);
}

.ff__cursor {
  position: absolute;
  left: 58%;
  top: 62%;
  width: 3.2cqw;
  height: 3.2cqw;
  transform-origin: 15% 10%;
  filter: drop-shadow(0 .3cqw .6cqw rgba(0, 0, 0, .6));
  animation-name: sb-cursor;
  animation-timing-function: cubic-bezier(.45, 0, .2, 1);
}

.ff__playbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6.2cqw;
  background: rgba(4, 5, 8, .86);
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  padding: 0 2.6cqw;
  color: var(--ink);
}

.ff__play {
  width: 0;
  height: 0;
  border-left: 2.2cqw solid var(--ink);
  border-top: 1.3cqw solid transparent;
  border-bottom: 1.3cqw solid transparent;
}

.ff__track {
  position: relative;
  flex: 1;
  height: .5cqw;
  background: rgba(255, 255, 255, .3);
}

.ff__track::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--accent);
  animation-name: sb-progress;
  animation-timing-function: linear;
}

.ff__time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.9cqw;
}

.ff__badge {
  font-family: var(--font-mono);
  font-size: 1.7cqw;
  border: 1px solid rgba(255, 255, 255, .5);
  padding: .2cqw .8cqw;
  letter-spacing: .06em;
}

/* ------------------------------------------------------------------ */
/* Legal pages (legal notice, privacy policy, terms of service)        */
/* ------------------------------------------------------------------ */
.legal {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 640px;
}

.legal__block {
  border-top: 1px solid var(--ink);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legal__block p,
.legal__block li {
  color: var(--text-2);
}

.legal__block strong {
  color: var(--ink);
  font-weight: 500;
}

.legal__block a {
  border-bottom: 1px solid currentColor;
}

.legal__facts,
.legal__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legal__list {
  padding-left: 18px;
  list-style: disc;
}

.legal__nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
}

.legal__nav a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 2px;
}

.legal__nav a[aria-current="page"] {
  color: var(--muted);
  border-bottom-color: transparent;
}

.site-footer {
  border-top: 1px solid var(--rule);
}

.site-footer__inner {
  padding-block: 32px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
}

/* ------------------------------------------------------------------ */
/* Mobile — one column under 500px                                     */
/* ------------------------------------------------------------------ */
@media (max-width: 500px) {
  body {
    min-width: 0;
  }

  .container {
    padding-inline: 20px;
  }

  /* Nav: wordmark and Contact only */
  .nav {
    height: 60px;
  }

  .nav__right .mono {
    display: none;
  }

  /* Hero */
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-block: 48px 56px;
  }

  .hero__copy {
    gap: 24px;
  }

  .hero__title {
    font-size: 40px;
  }

  .hero__sub {
    font-size: 17px;
  }

  .hero__ctas {
    flex-wrap: wrap;
    gap: 16px;
  }

  .btn-primary {
    padding: 14px 20px;
  }

  .hero__caption {
    flex-wrap: wrap;
    gap: 4px 16px;
  }

  .hero__caption span:last-child {
    white-space: normal;
  }

  /* Sections: label above the title */
  .section-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .section__inner {
    padding-block: 56px;
  }

  .section__label {
    padding-top: 0;
  }

  .section__body {
    gap: 32px;
  }

  .section__title {
    font-size: 32px;
  }

  .h3 {
    font-size: 20px;
  }

  .cols-3 {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  /* Method */
  .method__inner {
    padding-block: 56px 64px;
    gap: 40px;
  }

  .method__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .method__title {
    font-size: 36px;
  }

  .method__intro {
    padding-top: 0;
  }

  .mockups {
    columns: 1;
  }

  .mockups > .mockup {
    margin-bottom: 40px;
  }

  .li {
    padding: 16px 16px 12px;
  }

  .email__meta {
    padding: 14px 16px;
  }

  .email__body {
    padding: 20px 16px;
    gap: 16px;
  }

  .email__title {
    font-size: 22px;
  }

  .widget {
    height: auto;
    padding: 84px 12px 12px;
  }

  .widget__modal {
    position: static;
    width: 100%;
    padding: 16px;
  }

  .changelog {
    padding: 16px;
  }

  /* What we deliver */
  .deliver {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .assets {
    font-size: 14px;
  }

  .assets__col-name {
    width: 30%;
  }

  .assets tbody th,
  .assets tbody td {
    padding: 12px 8px 12px 0;
  }

  .assets tbody td:first-of-type {
    font-size: 12px;
  }

  /* How it works: closing line stacks */
  .hiw__then {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  /* Fit */
  .fit {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .fit__title {
    font-size: 28px;
    margin-bottom: 16px;
  }

  /* Contact */
  .contact__inner {
    padding-block: 64px 56px;
  }

  .contact__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .contact__title {
    font-size: 36px;
  }

  .contact__text {
    font-size: 17px;
  }

  .contact__cta {
    font-size: 24px;
  }

  /* Legal pages */
  .legal__nav {
    gap: 12px 20px;
  }

  .site-footer__inner {
    flex-wrap: wrap;
    gap: 12px 24px;
  }
}