/* ==========================================================================
   linefeed.be — the site.

   "Cream Studio" is the design: warm cream paper lit from the top-left corner,
   a floating pill dock, an oversized tight headline with a profile card beside
   it, product cards resting on soft shadows, and a near-black block at the end.

   Its distinguishing marks:
     · one soft steel blue accent, and neutrals with any green cast taken out
       of them;
     · the photographed portrait in the profile card;
     · an abstract steel-blue showpiece as the backdrop of the first screen;
     · product cards carrying each product's own colour and own logo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The typefaces, shipped with the site.

   Both are variable fonts under the SIL Open Font License; the licence text
   travels with them in assets/fonts/. Two subsets each — latin and latin-ext —
   which together cover every character this page and any western-European name
   can need. Only the upright cuts are shipped; the page uses no italic.

   `swap` keeps the text readable while the file arrives, exactly as the CDN
   stylesheet did before, so the first paint looks the same as it always has.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Both palettes in one place. `light-dark()` resolves them from the used
   color-scheme, so the operating system decides by default and nothing is
   repainted after load — no flash of the wrong theme. */
:root {
  color-scheme: light dark;

  --paper: light-dark(#f7f0e2, #0f1114);
  --paper-2: light-dark(#fffdf6, #171a1e);
  --ink: light-dark(#1b1c1e, #eef1f4);
  --ink-2: light-dark(#5c6068, #a4abb4);
  --ink-3: light-dark(#8b9099, #737a83);

  /* The accent. Soft steel blue — muted, close to grey, deliberately quiet. */
  --accent: light-dark(#3f5f7e, #8fb0cf);
  /* The signal: the one saturated blue in the showpiece. The dot carries it,
     and so do the bars the dot reaches. Lifted in the dark, where the drawing
     has near-black paper under it instead of cream. */
  --signal: light-dark(#2d72d9, #6aa1ff);
  --accent-soft: light-dark(rgba(63, 95, 126, 0.10), rgba(143, 176, 207, 0.14));
  --glow: light-dark(rgba(63, 95, 126, 0.16), rgba(143, 176, 207, 0.14));
  --on-accent: light-dark(#f7f0e2, #0d0f12);

  --edge: light-dark(#e8dfcb, #242830);
  /* `light-dark()` resolves colours, never whole shadow values — so the colour
     is the part that switches and the geometry stays fixed. */
  --shade: light-dark(rgba(56, 48, 20, 0.38), rgba(0, 0, 0, 0.85));
  --shade-deep: light-dark(rgba(56, 48, 20, 0.46), rgba(0, 0, 0, 0.95));
  --shadow: 0 18px 40px -22px var(--shade);
  --shadow-lift: 0 30px 60px -26px var(--shade-deep);

  --slab: light-dark(#14161a, #050609);
  --slab-ink: #f4f1e6;
  --slab-ink-2: #a6acb6;
  --slab-accent: #a8c4dd;

  --dock-h: 58px;
  --r: 20px;
}

/* An explicit choice from the switch overrides the operating system. */
:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark'] { color-scheme: dark; }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--dock-h) + 28px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
}

a { color: inherit; }

h1, h2 {
  font-family: 'Plus Jakarta Sans', 'Segoe UI Semibold', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0;
}

img { max-width: 100%; }

/* --- The corner glow ------------------------------------------------------ */

/* Soft daylight falling in from the top-left. Atmosphere only — never clickable. */
.glow {
  position: fixed;
  top: -18vmax;
  left: -14vmax;
  width: 62vmax;
  height: 62vmax;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--glow), transparent 68%);
  filter: blur(28px);
}

/* --- Floating dock -------------------------------------------------------- */

.dock {
  position: fixed;
  z-index: 20;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: clamp(10px, 3vw, 26px);
  width: calc(100% - 24px);
  max-width: 720px;
  height: var(--dock-h);
  padding: 0 8px 0 18px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: light-dark(rgba(255, 253, 246, 0.82), rgba(23, 26, 30, 0.82));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.dock__mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

/* One word, not three: the dock's gap must not fall inside the wordmark. */
.dock__word { white-space: nowrap; }

.dock__sep { color: var(--accent); }

.dock__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.dock__links {
  display: flex;
  gap: 20px;
  margin-left: auto;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.dock__links a {
  position: relative;
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.dock__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1.5px;
  background: var(--accent);
  transition: right 0.25s ease;
}

.dock__links a:hover,
.dock__links a:focus-visible { color: var(--ink); }
.dock__links a:hover::after,
.dock__links a:focus-visible::after { right: 0; }

/* The switch only works with scripting, so it is only shown when scripting runs. */
#theme-toggle { display: none; }
.js #theme-toggle { display: inline-flex; }

.dock__switch {
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 9px 16px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.js .dock__links { margin-left: auto; }
.js .dock__switch { margin-left: 0; }

.dock__switch:hover,
.dock__switch:focus-visible {
  color: var(--ink);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.dock__orb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* --- Layout --------------------------------------------------------------- */

main {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: calc(var(--dock-h) + clamp(28px, 5vw, 48px)) clamp(20px, 5vw, 44px) 0;
}

.tag,
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.tag__mark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.kicker__bar {
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* --- The showpiece -------------------------------------------------------- */

/* The abstract visual, carried as the backdrop of the first screen. It spans
   the full width behind the headline and fades into the paper before the text
   below needs the contrast. Atmosphere only — never clickable. */
.showpiece {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  width: 100%;
  height: clamp(220px, 23vw, 360px);
  pointer-events: none;
}

/* The drawing itself. `slice` on its own viewBox crops it the way
   `object-fit: cover` cropped it when it was an <img>. */
.showpiece__art {
  display: block;
  width: 100%;
  height: 100%;
  /* Ignored by the drawing itself, which crops on its own viewBox. It frames
     the still twin — assets/hero.svg as a picture, which is what the design
     system's Showpiece puts in this slot. */
  object-fit: cover;
  /* Quiet enough to sit under the headline, stronger in the dark mode where
     the same tints have less paper to fight. */
  opacity: light-dark(0.55, 0.7);
  /* The bottom edge dissolves instead of cutting. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 100%);

  /* Where the dot stands, how wide the lens around it opens, and how much of
     the blue copy of the bars is let through. showpiece.js writes all four
     every frame while the pointer is near; these are the resting values, and
     they are what a page without scripting keeps. */
  --dot-x: 0px;
  --dot-y: 0px;
  --lens-k: 1;
  --lens-a: 0;
}

/* The dot and its rings travel together. */
.showpiece__lock {
  transform: translate(var(--dot-x), var(--dot-y));
}

/* Every bar stands on its own middle, so a taller bar grows both ways off the
   axis instead of sliding down it. */
.showpiece__bars rect {
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleY(var(--k, 1));
}

/* The blue copy is invisible until the pointer opens the lens. */
.showpiece__bars--signal {
  opacity: var(--lens-a);
}

.showpiece__lens {
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(var(--dot-x), var(--dot-y)) scale(var(--lens-k));
}

/* Only the two parts that move, and only while they are moving. */
.showpiece__art.is-live .showpiece__lock,
.showpiece__art.is-live .showpiece__lens {
  will-change: transform;
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
  /* Room at the top so the backdrop reads before the headline starts. */
  padding-top: clamp(30px, 7vw, 96px);
  padding-bottom: clamp(64px, 10vw, 120px);
}

.hero__title {
  font-size: clamp(3rem, 10.5vw, 6.6rem);
  line-height: 0.9;
  margin: 0 0 24px;
}

.hero__title-accent { color: var(--accent); }

.hero__lede {
  margin: 0 0 30px;
  max-width: 46ch;
  font-size: clamp(1.02rem, 2.1vw, 1.2rem);
  color: var(--ink-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.btn--solid {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow);
}

.btn--ghost {
  border-color: var(--edge);
  background: var(--paper-2);
  color: var(--ink);
}

.btn:hover,
.btn:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn--ghost:hover,
.btn--ghost:focus-visible { border-color: var(--accent); }

.btn__arrow { transition: transform 0.2s ease; }
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow { transform: translateX(4px); }

/* --- Profile card --------------------------------------------------------- */

.profile {
  padding: 26px 26px 24px;
  border: 1px solid var(--edge);
  border-radius: 26px;
  background: var(--paper-2);
  box-shadow: var(--shadow);
}

/* The photograph, cropped to a square that sits inside the profile card. */
.profile__avatar {
  display: block;
  width: 88px;
  height: 88px;
  margin-bottom: 18px;
  border-radius: 24px;
  object-fit: cover;
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--edge);
}

.profile__name {
  margin: 0 0 4px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.profile__role {
  margin: 0 0 16px;
  font-size: 0.94rem;
  color: var(--ink-2);
}

.profile__status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}

.pulse {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}

.pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.2s ease-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(3.2); opacity: 0; }
}

.profile__motto {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--edge);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* --- Bands ---------------------------------------------------------------- */

.band { padding-bottom: clamp(64px, 10vw, 118px); }

.band__title {
  max-width: 20ch;
  font-size: clamp(1.75rem, 4.6vw, 2.9rem);
  line-height: 1.06;
  margin-bottom: 28px;
}

.band__title--sm { max-width: 24ch; }

/* One plain sentence about what is sold, and where. */
.band__note {
  max-width: 62ch;
  margin: -12px 0 28px;
  color: var(--ink-2);
}

.prose {
  display: grid;
  gap: 14px;
  max-width: 62ch;
  color: var(--ink-2);
}

.prose p { margin: 0; }

.prose__pull {
  margin-top: 8px;
  padding-left: 20px;
  border-left: 3px solid var(--accent);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* --- Product cards -------------------------------------------------------- */

/* Each card carries its own product's colour, read off that product's own
   site. The shape is shared, so the three still read as one page. */
.card--brainhurricane {
  --brand: #4a90e2;
  --brand-soft: rgba(74, 144, 226, 0.14);
  --brand-wash: rgba(74, 144, 226, 0.07);
}

.card--signallock {
  --brand: light-dark(#1857b8, #6aa1ff);
  --brand-soft: light-dark(rgba(24, 87, 184, 0.12), rgba(106, 161, 255, 0.16));
  --brand-wash: light-dark(rgba(24, 87, 184, 0.06), rgba(106, 161, 255, 0.08));
}

.card--kaisa {
  --brand: #d4952a;
  --brand-soft: rgba(212, 149, 42, 0.16);
  --brand-wash: rgba(212, 149, 42, 0.08);
}

/* Home Lab 21 has no brand of its own yet: a cyan, the colour its plan paints
   moving air with, deepened in light mode so it holds on the cream paper. */
.card--homelab21 {
  --brand: light-dark(#0e7c9b, #4cc3e0);
  --brand-soft: light-dark(rgba(14, 124, 155, 0.12), rgba(76, 195, 224, 0.16));
  --brand-wash: light-dark(rgba(14, 124, 155, 0.06), rgba(76, 195, 224, 0.08));
}

/* specflow has no brand either, and is private today: a plum, well away from
   the blues, the amber and the cyan beside it, lifted in dark mode so it holds
   on the near-black tile. */
.card--specflow {
  --brand: light-dark(#6f4bb3, #a78bfa);
  --brand-soft: light-dark(rgba(111, 75, 179, 0.12), rgba(167, 139, 250, 0.16));
  --brand-wash: light-dark(rgba(111, 75, 179, 0.06), rgba(167, 139, 250, 0.08));
}

/* A card that is not a link does not lift or invite a click. */
.card.card--specflow,
.card.card--specflow:hover,
.card.card--specflow:focus-visible {
  transform: none;
  box-shadow: var(--shadow);
  border-color: var(--edge);
  cursor: default;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.4vw, 22px);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding: 30px 24px 20px;
  border: 1px solid var(--edge);
  border-radius: var(--r);
  background:
    linear-gradient(to bottom, var(--brand-wash), transparent 190px),
    var(--paper-2);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* The product's colour, stated plainly across the top of its card. */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--brand);
}

.card:hover,
.card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: var(--brand);
  outline: none;
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: var(--brand-soft);
  color: var(--brand);
}

.card__logo {
  display: block;
  width: 34px;
  height: 34px;
}

/* Kaisa's mark, coloured the way kaisa.one colours it: the disc is always the
   amber gold, the ring takes the ink of whichever theme is showing so both
   shapes stay visible on the tile. */
.card__logo-disc { fill: #d4952a; }
.card__logo-ring { stroke: light-dark(#2b2118, #f5f1ea); }

/* SignalLock's mark closes on hover, the way it does on its own site. */
.card__logo-fill {
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.3s ease;
}

.card:hover .card__logo-fill,
.card:focus-visible .card__logo-fill { transform: scale(1); }

/* The small flag that tells a visitor a product is early. Only the Home Lab 21
   card carries it. */
.card__flag {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 10px;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card__name {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.card__line {
  color: var(--ink-2);
  font-size: 0.96rem;
  line-height: 1.5;
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
}

.card__host {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.card__arrow {
  color: var(--brand);
  font-size: 1.05rem;
  transition: transform 0.25s ease;
}

.card:hover .card__arrow,
.card:focus-visible .card__arrow { transform: translateX(5px); }

/* --- The dark block ------------------------------------------------------- */

.slab {
  margin-bottom: clamp(40px, 7vw, 80px);
  padding: clamp(34px, 6vw, 62px) clamp(24px, 5vw, 56px);
  border-radius: 30px;
  /* In dark mode the paper is nearly as dark as the block, so a hairline keeps
     the block reading as a block. */
  border: 1px solid light-dark(transparent, rgba(244, 241, 230, 0.12));
  background: var(--slab);
  color: var(--slab-ink);
  box-shadow: var(--shadow);
}

.kicker--onslab { color: var(--slab-accent); }
.kicker--onslab .kicker__bar { background: var(--slab-accent); }

.slab__title {
  max-width: 22ch;
  margin-bottom: 30px;
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  line-height: 1.08;
}

.socials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.social {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border: 1px solid rgba(244, 241, 230, 0.16);
  border-radius: var(--r);
  background: rgba(244, 241, 230, 0.05);
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.social:hover,
.social:focus-visible {
  background: rgba(244, 241, 230, 0.1);
  border-color: var(--slab-accent);
  transform: translateY(-3px);
  outline: none;
}

.social__net {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.social__handle {
  color: var(--slab-ink-2);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.social__arrow {
  margin-left: auto;
  color: var(--slab-accent);
  transition: transform 0.25s ease;
}

.social:hover .social__arrow,
.social:focus-visible .social__arrow { transform: translateX(5px); }

/* --- Foot ----------------------------------------------------------------- */

.foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px clamp(20px, 5vw, 44px) 44px;
  border-top: 1px solid var(--edge);
  font-size: 0.85rem;
  color: var(--ink-3);
}

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

.foot__links a {
  text-decoration: none;
  border-bottom: 1px solid var(--edge);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.foot__links a:hover,
.foot__links a:focus-visible {
  color: var(--ink);
  border-color: var(--accent);
}

/* The support address only exists once mail.js has assembled it, so the link
   is not shown at all when scripting is off — a dead link is worse than none.
   The contact route without scripting is the postal address, printed in full in
   the imprint at the foot of the terms. */
[data-mail] { display: none; }
.js [data-mail] { display: inline; }
[data-mail-row] { display: none; }
/* Back to the row grid the imprint lays its facts out on — or to a plain line
   where the mail route stands on its own in prose. */
.js [data-mail-row] { display: grid; }
.js p[data-mail-row] { display: block; }

/* --- Legal pages ---------------------------------------------------------- */

/* The privacy, terms and refund pages. Same paper, same typefaces, same dock
   and same footer as the main page — only the body is a column of text. */

.legal {
  max-width: 74ch;
  padding-bottom: clamp(56px, 8vw, 96px);
  /* Legal text carries long addresses and long URLs. On a phone they break
     rather than push the page sideways. */
  overflow-wrap: anywhere;
}

.legal code {
  font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--ink);
}

.legal__title {
  max-width: 20ch;
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.06;
  margin: 0 0 14px;
}

.legal__meta {
  margin: 0 0 36px;
  font-size: 0.86rem;
  color: var(--ink-3);
}

.legal h2 {
  margin: 40px 0 12px;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.legal h3 {
  margin: 26px 0 8px;
  font-family: 'Plus Jakarta Sans', 'Segoe UI Semibold', system-ui, sans-serif;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.legal p,
.legal li {
  color: var(--ink-2);
}

.legal p { margin: 0 0 12px; }

.legal ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.legal li { margin-bottom: 6px; }

.legal a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The mail route, where a legal page has to point at it in prose. */
.legal__mail {
  margin: 0 0 12px;
  font-weight: 600;
}

/* The imprint: the statutory business details, stated in full but kept quiet —
   small print under a rule at the foot of the terms, the one page that carries
   them. It is not a card and it does not compete with the clauses above it. */
.imprint {
  margin: 56px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--edge);
  font-size: 0.82rem;
}

.legal .imprint__title {
  margin: 0 0 12px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.imprint__facts {
  display: grid;
  gap: 6px;
  margin: 0;
}

.imprint__row {
  display: grid;
  grid-template-columns: 14ch minmax(0, 1fr);
  gap: 2px 18px;
}

.imprint__facts dt {
  color: var(--ink-3);
}

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

.legal .imprint__note {
  margin: 14px 0 0;
  color: var(--ink-3);
}

@media (max-width: 640px) {
  .imprint__row { grid-template-columns: minmax(0, 1fr); }
}

/* --- Arrival -------------------------------------------------------------- */

/* Sections settle in as they come into view. Only with scripting: without it
   every section is simply there from the start. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .pulse::after { animation: none; }
  .card__logo-fill { transform: scale(1); }
  * { transition-duration: 0.01ms !important; }
}

/* --- Narrow screens ------------------------------------------------------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .profile { max-width: 420px; }
}

@media (max-width: 640px) {
  .dock { gap: 8px; padding: 0 6px 0 14px; }
  .dock__links { display: none; }
  .dock__switch, .js .dock__switch { margin-left: auto; padding: 8px 13px; }
  /* A narrow screen crops the wide drawing hard, so it is kept shallow and
     pushed off-centre to hold the blue dot inside the frame. The drawing slides
     inside its own frame, which is what `object-position` did for the <img>. */
  .showpiece { height: clamp(190px, 60vw, 280px); }
  .showpiece__stage { transform: translateX(-144px); }
  .hero { padding-top: clamp(46px, 22vw, 110px); }
  .hero__title { font-size: clamp(2.6rem, 13vw, 4rem); }
  .slab { border-radius: 24px; }
}