/* ==========================================================================
   felari.org. Light, institutional, one owned colour: cobalt.
   Decisions live in docs/design-decisions.md.
   ========================================================================== */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Inter is only used inside the product illustrations, where it stands in for app UI. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Colour. Contrast: white on cobalt 8.4:1; on white, ink 18:1, ink-2 8.6:1, ink-3 5.1:1. */
  --cobalt: #2130d8;
  --cobalt-deep: #1823a8;
  --cobalt-wash: #e9ebfb;
  --amber: #8a5a00;
  --bg: #ffffff;
  --surface: #f6f7f9;
  --ink: #0b0d10;
  --ink-2: #474c55;
  --ink-3: #676c75;
  --rule: #e3e5e9;
  --on-cobalt: #ffffff;
  --on-cobalt-2: rgb(255 255 255 / 0.86);

  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --max: 80rem;
  --bar-h: 4.5rem;
  --head-h: var(--bar-h);
  --overhang: 6rem; /* how far the hero product hangs into the white page */
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

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

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: calc(0.75rem + env(safe-area-inset-top, 0px)); }

/* ---------- Opening frame (home page only) ----------
   The wordmark appears alone on cobalt, holds, and the frame dissolves into the hero,
   which is the same cobalt, so the page seems to grow out of the mark. */

.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--cobalt);
  pointer-events: none;
  /* Hidden by default and shown only by the animation, so a browser that never runs it
     (or a throttled frame) still gets the page instead of a blue screen. */
  visibility: hidden;
  opacity: 0;
  animation: splash 1.8s linear both;
}
.splash__mark {
  color: #fff;
  font-weight: 700;
  font-size: clamp(3.5rem, 2rem + 8vw, 8rem);
  line-height: 1;
  letter-spacing: -0.045em;
  opacity: 0;
  animation: splash-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both;
}
@keyframes splash-in {
  from { opacity: 0; transform: translateY(0.12em); }
  to { opacity: 1; transform: none; }
}
.no-splash .splash { display: none; }

@keyframes splash {
  0%, 66% { visibility: visible; opacity: 1; }
  100% { visibility: hidden; opacity: 0; }
}

/* ---------- Wordmark (type only until a mark is chosen) ---------- */

.wordmark {
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  line-height: 1;
  text-decoration: none;
}

/* ---------- Header: cobalt over the hero, white once the page scrolls ---------- */

.bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--cobalt);
  color: var(--on-cobalt);
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bar--solid,
.bar.is-scrolled,
.bar.is-open {
  background: var(--bg);
  color: var(--ink);
  border-bottom-color: var(--rule);
}

.bar__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.bar__nav { margin-left: auto; }
.bar__nav ul { display: flex; gap: 2.25rem; }
.bar__nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  padding-block: 0.5rem;
  opacity: 0.88;
}
.bar__nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }

/* Client sign-in: white on the cobalt bar, cobalt once the bar turns white. */
.bar__signin {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0 1rem;
  border-radius: 4px;
  background: #fff;
  color: var(--cobalt);
  font: 600 0.875rem/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.bar__signin svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.bar__signin:hover { background: var(--cobalt-wash); }
.bar--solid .bar__signin,
.bar.is-scrolled .bar__signin,
.bar.is-open .bar__signin { background: var(--cobalt); color: #fff; }
.bar--solid .bar__signin:hover,
.bar.is-scrolled .bar__signin:hover,
.bar.is-open .bar__signin:hover { background: var(--cobalt-deep); }

.bar:not(.is-scrolled):not(.is-open):not(.bar--solid) .bar__inner :focus-visible { outline-color: #fff; }

.bar__toggle { display: none; }

/* ---------- Buttons ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.5rem;
  border-radius: 4px;
  border: 1.5px solid transparent;
  font: 600 0.9375rem/1 var(--sans);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--light { background: #fff; color: var(--cobalt); }
.btn--light:hover { background: var(--cobalt-wash); }

.btn--ghost { border-color: rgb(255 255 255 / 0.6); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgb(255 255 255 / 0.08); }

.hero :focus-visible { outline-color: #fff; }

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

/* The hero keeps its natural height: the headline across the top, the lede at the left,
   the window at the right hanging into the white page. assets/js/main.js keeps the product list below
   the fold by padding the space under the window, never by stretching the hero. */
.hero {
  position: relative;
  background: var(--cobalt);
  color: var(--on-cobalt);
  padding-top: calc(var(--head-h) + env(safe-area-inset-top, 0px));
}

/* The wordmark set at architectural size, sunk into the bottom of the hero:
   a quiet signature, the way a bank prints its crest behind the card. */
.hero__mark {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__mark::before {
  content: "felari";
  position: absolute;
  left: max(calc(var(--gutter) - 0.04em), calc((100% - var(--max)) / 2 + var(--gutter) - 0.04em));
  bottom: -0.5em;
  font-weight: 700;
  font-size: clamp(9rem, 4rem + 22vw, 26rem);
  line-height: 1;
  letter-spacing: -0.055em;
  white-space: nowrap;
  color: rgb(255 255 255 / 0.07);
}

.hero__inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 6rem) var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
}

.hero__copy { padding-bottom: clamp(4rem, 10vh, 7rem); }

.hero__title {
  margin: 0;
  font-weight: 700;
  /* Width sets the size; short screens cap it so the first screen still fits. */
  font-size: clamp(2.5rem, min(1.4rem + 4.6vw, 1rem + 7.5vh), 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero__lede {
  margin: 1.5rem 0 2.25rem;
  max-width: 31rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.5;
  color: var(--on-cobalt-2);
  text-wrap: pretty;
}

/* The product hangs over the cobalt edge into the white page, the way a bank shows its card. */
.hero__product { margin-bottom: calc(-1 * var(--overhang)); position: relative; z-index: 1; }

/* Two columns: the headline runs on one line across the full width, so it fills the
   top of the hero; the lede and buttons sit under it at the left, and the window starts
   level with the lede and hangs into the white page. The size is set by width so the
   line always fits: 6.4vw keeps it inside the gutters down to 901px. */
@media (min-width: 901px) {
  /* One rhythm: the headline sits about one and a half headline-heights under the bar,
     then one copy gap above the lede and the window; the same gap separates lede and
     buttons. The copy gap grows with the screen's height, so the lede and buttons sit
     lower and less empty cobalt is left under the buttons. The window's rows grow with
     the screen too, so its foot stays above the fold. The window hangs 4rem into the
     white; the last row takes its extra height, so the buttons stay under the lede. */
  :root { --overhang: 4rem; --hero-copy-gap: clamp(2.5rem, 6vh, 3.5rem); }
  .hero__inner {
    padding-top: clamp(2.5rem, 13vh, 8rem);
    grid-template-rows: auto auto auto 1fr;
    align-items: start;
    row-gap: 0;
  }
  .hero__copy { display: contents; }
  .hero__title {
    grid-column: 1 / -1;
    /* Sized so "The systems enterprises run on." fills the gutters on one line. */
    font-size: min(4.9rem, 5.7vw);
    white-space: nowrap;
    margin-bottom: var(--hero-copy-gap);
  }
  .hero__lede { grid-column: 1; grid-row: 2; margin: 0 0 var(--hero-copy-gap); }
  .hero .actions { grid-column: 1; grid-row: 3; padding-bottom: 2rem; }
  .hero__product { grid-column: 2; grid-row: 2 / 5; }
  /* Taller screens give the register rows more air, so the window grows with the screen. */
  .hero .case { min-height: clamp(38px, 5.4vh, 50px); }
}

/* ---------- Product window (shared by the demos) ---------- */

.mock {
  background: #fff;
  color: var(--ink);
  border: 1px solid rgb(0 0 0 / 0.08);
  border-radius: 10px;
  overflow: hidden;
  font: 400 12px/1.4 var(--ui);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 30px 70px -24px rgb(0 0 0 / 0.35);
}

.mock__top {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-bottom: 1px solid #eceef1;
  color: #5b616b;
}
.mock__dots { display: flex; gap: 6px; }
.mock__dots i { width: 9px; height: 9px; border-radius: 50%; background: #dfe2e6; }
.mock__tag {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid #dfe2e6;
  border-radius: 3px;
  padding: 2px 6px;
}

.mock__body { display: grid; grid-template-columns: 164px minmax(0, 1fr); }

.mock__side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px 16px;
  border-right: 1px solid #eceef1;
  background: #fafbfc;
  color: #3d434c;
}
.mock__side b { padding: 4px 8px 10px; font-weight: 600; }
.mock__side span { padding: 5px 8px; border-radius: 5px; }
.mock__side span.is-on { background: var(--cobalt-wash); color: var(--cobalt-deep); font-weight: 500; }
.mock__side small { padding: 12px 8px 4px; color: var(--ink-3); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; }

.mock__main { padding: 12px 0 0; min-width: 0; }
.mock__main--solo { padding-bottom: 6px; }
.mock__head { display: flex; align-items: center; gap: 10px; padding: 0 16px 12px; }
.mock__head strong { font-size: 13px; font-weight: 600; }
.mock__head em { font-style: normal; color: var(--ink-3); }

.hero .mock :focus-visible { outline-color: var(--cobalt); }
.mock :focus-visible { outline-offset: 1px; }

/* View switch (Board / Register) */
.seg { margin-left: auto; display: inline-flex; padding: 2px; border-radius: 6px; background: #eef0f3; }
.seg button {
  min-height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  font: 500 11.5px/1 var(--ui);
  color: var(--ink-2);
  cursor: pointer;
}
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }

/* ---------- Docket: a case register, not an issue list ----------
   Case numbers in mono, ruled ledger rows, a square-led status label, and a cobalt
   mark in the margin for urgent matters. Stages: Filed, In work, Playtest, Closed. */

.reg__head,
.case {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 62px 76px 84px;
  align-items: center;
  gap: 12px;
  padding-inline: 16px 14px;
}

.reg__head {
  padding-block: 6px;
  border-block: 1px solid #e6e8ec;
  background: #fafbfc;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.case {
  position: relative;
  min-height: 38px;
  padding-block: 5px;
  border-bottom: 1px solid #eef0f2;
}
/* Ledger ruling: a faint second line under every row, like a register page. */
.case::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  border-bottom: 1px solid #f6f7f9;
}
.case.is-urgent { box-shadow: inset 3px 0 0 var(--cobalt); }

/* The hero window is narrower, so its register drops the Area column. */
.hero .reg__head,
.hero .case { grid-template-columns: 52px minmax(0, 1fr) 76px 84px; }
.hero .reg__head span:nth-child(3),
.hero .case__area { display: none; }

.case__no { font: 500 11px/1 var(--mono); color: var(--ink-2); letter-spacing: 0.01em; }
.case__t { color: #1a1d22; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case__area { color: var(--ink-3); font-size: 11px; }
.case__by { color: var(--ink-3); font: 400 10.5px/1 var(--mono); white-space: nowrap; }
.case[data-status="closed"] .case__t { color: var(--ink-3); }

/* Status: a plain label led by a small square, in the Swiss register of the rest of the site.
   Filed is an empty grey square, In work cobalt, Playtest amber, Closed solid ink. */
.stamp {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 0 8px 0 6px;
  border: 0;
  border-radius: 3px;
  background: none;
  font: 500 11.5px/1 var(--ui);
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.stamp::before { content: ""; width: 8px; height: 8px; flex: none; }
.stamp:hover { background: #eef0f3; }
.stamp--filed::before { box-shadow: inset 0 0 0 1.5px #8a9099; }
.stamp--work::before { background: var(--cobalt); }
.stamp--test::before { background: #c98a0b; }
.stamp--closed { color: var(--ink-3); }
.stamp--closed::before { background: var(--ink); }

/* The case a click just advanced gets a brief cobalt wash. */
.case.is-moved { animation: moved 1.2s ease-out; }
@keyframes moved { from { background: var(--cobalt-wash); } to { background: transparent; } }

/* Board view: the same cases sorted into four stage columns, as cards. */
.reg__cols { display: none; }
.mock.is-board .reg__head,
.mock.is-board .reg__list { display: none; }
.mock.is-board .reg__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  padding: 0 14px 8px;
  overflow-x: auto;
}
.reg__label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 8px;
  padding: 4px 2px 6px;
  border-bottom: 1.5px solid var(--ink);
  font: 600 11px/1.2 var(--ui);
  letter-spacing: 0.02em;
}
.reg__label em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.reg__col ul { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }

.mock.is-board .case {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "no stamp"
    "t t"
    "area by";
  gap: 6px 8px;
  padding: 9px 10px 10px;
  border: 1px solid #e3e5e9;
  border-radius: 4px;
  background: #fff;
}
.mock.is-board .case::after { display: none; }
.mock.is-board .case__no { grid-area: no; }
.mock.is-board .case__t { grid-area: t; white-space: normal; font-weight: 500; }
.mock.is-board .case__area { grid-area: area; }
.mock.is-board .case__by { grid-area: by; justify-self: end; }
.mock.is-board .stamp { grid-area: stamp; justify-self: end; margin: -4px -6px 0 0; }

/* ---------- Products intro, under the hero ---------- */

.intro { padding-block: calc(var(--overhang) + clamp(3rem, 8vh, 5rem)) clamp(4rem, 10vh, 7rem); }

.intro__list {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(2rem, 4vw, 4rem);
}

.intro__list li::before {
  content: "";
  display: block;
  width: 28px;
  height: 4px;
  margin-bottom: 1.25rem;
  background: var(--cobalt);
}

.intro h3 { margin: 0 0 0.4rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.intro h3 a { text-decoration: none; }
.intro h3 a::after { content: " →"; color: var(--cobalt); }
.intro h3 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.intro p { margin: 0; max-width: 24rem; color: var(--ink-2); line-height: 1.55; }

/* ---------- Product showcases: one product per screen ---------- */

.show { padding: clamp(5rem, 12vh, 8rem) 0; }
.show--tint { background: var(--surface); }

.show__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  min-height: min(44rem, 80svh);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.show__inner--flip { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr); }
.show__inner--flip .show__copy { order: 2; }

.show__title {
  margin: 0;
  font-size: clamp(2.75rem, 1.8rem + 3.4vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--cobalt);
}
.show__lede {
  margin: 1rem 0 2.25rem;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  font-weight: 500;
}
.show__points { border-top: 1px solid var(--rule); }
.show__points li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  line-height: 1.55;
}
.show__points strong { color: var(--ink); font-weight: 600; }

.show__demo .mock { box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 24px 60px -28px rgb(0 0 0 / 0.28); }
.show__note { margin-top: 0.875rem; font-size: 0.875rem; color: var(--ink-3); }

/* ---------- Folio demo: page tree and reader ---------- */

.folio { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 340px; }

.folio__tree {
  padding: 10px 8px 16px;
  border-right: 1px solid #eceef1;
  background: #fafbfc;
}
.folio__tree ul ul { padding-left: 14px; }

.folio__fold,
.folio__page {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 26px;
  padding: 3px 8px;
  border: 0;
  border-radius: 5px;
  background: none;
  font: 400 12px/1.3 var(--ui);
  color: #3d434c;
  text-align: left;
  cursor: pointer;
}
.folio__fold { font-weight: 500; color: #1a1d22; }
.folio__fold::before {
  content: "";
  width: 0; height: 0;
  border-left: 4.5px solid var(--ink-3);
  border-block: 3.5px solid transparent;
  transition: transform 0.15s ease;
}
.folio__fold[aria-expanded="true"]::before { transform: rotate(90deg); }
.folio__page::before { content: ""; width: 7px; height: 9px; border: 1.25px solid #9aa0a8; border-radius: 1.5px; }
.folio__fold:hover,
.folio__page:hover { background: #eceef1; }
.folio__page[aria-current="page"] { background: var(--cobalt-wash); color: var(--cobalt-deep); font-weight: 500; }
.folio__page[aria-current="page"]::before { border-color: var(--cobalt); }

.folio__doc { padding: 18px 24px 22px; font-size: 12.5px; line-height: 1.6; color: #2b3038; }
.folio__doc p, .folio__doc ol, .folio__doc ul { margin: 0 0 10px; }
.folio__doc ol, .folio__doc ul { padding-left: 18px; }
.folio__doc ul { list-style: disc; }
.folio__doc ol { list-style: decimal; }
.folio__crumbs { color: var(--ink-3); font-size: 11px; }
.folio__title { margin: 0 0 10px; font: 600 18px/1.25 var(--ui); letter-spacing: -0.01em; color: var(--ink); }
.folio__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px !important;
  padding: 6px 10px;
  border: 1px solid #e1e4e8;
  border-radius: 4px;
  font-size: 11.5px;
  color: #3d434c;
}
.folio__case { font: 500 11px/1 var(--mono); color: var(--cobalt); }

/* ---------- Client access ---------- */

.access { background: var(--cobalt); color: var(--on-cobalt); }
.access__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(5rem, 14vh, 9rem) var(--gutter);
}
.access__title {
  margin: 0;
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}
.access__lede { margin: 1.25rem 0 2.25rem; max-width: 34rem; font-size: 1.1875rem; line-height: 1.5; color: var(--on-cobalt-2); }
.access :focus-visible { outline-color: #fff; }

/* ---------- Contact ---------- */

.contact__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(5rem, 14vh, 9rem) var(--gutter);
}
.contact__title { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.contact__lede { margin: 0.5rem 0 1.5rem; max-width: 34rem; color: var(--ink-2); }
.contact__mail {
  display: inline-block;
  font-size: clamp(2rem, 1rem + 4.6vw, 4.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: var(--cobalt);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact__mail:hover { text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 0.06em; }

/* ---------- Footer: brand, three columns, base line ---------- */

.foot { border-top: 1px solid var(--rule); background: var(--surface); }

.foot__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 4.5rem) var(--gutter) 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 2.5rem clamp(2rem, 5vw, 5rem);
}

.foot__brand p { margin: 0; font-size: 0.875rem; color: var(--ink-3); }
.foot__brand .wordmark { display: inline-block; margin-bottom: 1rem; }

.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.foot__h {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.foot__cols a {
  display: inline-block;
  padding-block: 0.3rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.foot__cols a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot__cols a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.foot__base {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.25rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rule);
}
.foot__base p { margin: 0; font-size: 0.8125rem; color: var(--ink-3); }

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

.doc { padding: calc(var(--head-h) + env(safe-area-inset-top, 0px) + clamp(3rem, 8vh, 5.5rem)) var(--gutter) clamp(4rem, 10vh, 7rem); }
.doc__inner { max-width: 42rem; margin: 0 auto; }

.doc__title {
  margin: 0;
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}
.doc__meta { margin: 1.5rem 0 2.5rem; font-size: 0.9375rem; color: var(--ink-3); }
.doc__lede {
  margin: 0 0 1rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  line-height: 1.5;
}

.doc h2 {
  margin: 2.75rem 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.doc p,
.doc li { color: var(--ink-2); line-height: 1.65; }
.doc p { margin: 0 0 1rem; }
.doc ul { margin: 0 0 1rem; padding-left: 1.25rem; list-style: disc; }
.doc li { margin-bottom: 0.4rem; padding-left: 0.25rem; }
.doc li::marker { color: var(--cobalt); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: var(--cobalt); text-underline-offset: 3px; }
.doc a:hover { color: var(--cobalt-deep); }

/* ---------- 404 ---------- */

.page-missing { background: var(--cobalt); }
.missing {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: calc(var(--head-h) + env(safe-area-inset-top, 0px) + 2rem) calc(4rem + env(safe-area-inset-bottom, 0px));
  background: var(--cobalt);
  color: var(--on-cobalt);
}
.missing__inner { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.missing__code { margin: 0 0 1rem; font-weight: 600; color: var(--on-cobalt-2); }
.missing__title {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(2.75rem, 1.4rem + 4.6vw, 5.5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.missing__lede { margin: 1.5rem 0 2.25rem; font-size: 1.1875rem; color: var(--on-cobalt-2); }
.missing :focus-visible { outline-color: #fff; }

/* ---------- Tablets ---------- */

/* Narrow laptops and landscape tablets: the hero window drops its sidebar so the
   register keeps room for the case titles. */
@media (max-width: 1100px) {
  .hero .mock__body { grid-template-columns: minmax(0, 1fr); }
  .hero .mock__side { display: none; }
}

/* The hero keeps its two columns down to 900px: stacked any wider, the window
   would fall below the first screen on landscape tablets and small laptops. */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero__copy { padding-bottom: 2.5rem; max-width: 40rem; }
  :root { --overhang: 4rem; }
}

@media (max-width: 1024px) {
  .show__inner,
  .show__inner--flip { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .show__inner--flip .show__copy { order: 0; }
  .show__copy { max-width: 40rem; }

  .foot__inner { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Phones ---------- */

@media (max-width: 760px) {
  :root { --bar-h: 4rem; }

  .bar__inner { gap: 0.75rem; }
  .bar__signin { margin-left: auto; min-height: 2.75rem; padding: 0 0.875rem; }

  .bar__toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.25rem;
    margin-right: -0.25rem;
    border: 0;
    background: none;
    color: inherit;
    font: 600 0.9375rem/1 var(--sans);
    cursor: pointer;
  }

  .bar__nav {
    position: fixed;
    inset: calc(var(--head-h) + env(safe-area-inset-top, 0px)) 0 0;
    display: none;
    padding: 0.5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    color: var(--ink);
  }
  .bar.is-open .bar__nav { display: block; }

  .bar__nav ul { flex-direction: column; gap: 0; }
  .bar__nav li { border-bottom: 1px solid var(--rule); }
  .bar__nav a {
    display: flex;
    align-items: center;
    min-height: 3.75rem;
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    opacity: 1;
  }

  :root { --overhang: 2rem; }
  .hero__inner { padding-top: 1.25rem; }
  .hero__copy { padding-bottom: 1.75rem; }
  .hero__lede { margin: 1rem 0 1.5rem; }
  .actions { width: 100%; }
  .actions .btn { flex: 1 1 100%; }
  /* Phones: the hero buttons sit side by side and the register shows four cases,
     so the whole window still fits on the first screen. */
  .hero .actions .btn { flex: 1 1 0; padding-inline: 0.75rem; }
  .hero .case.is-extra { display: none; }
  .hero .case { min-height: 35px; }
  .hero .mock__head em { display: none; }

  .mock__body { grid-template-columns: minmax(0, 1fr); }
  .mock__side { display: none; }
  .mock__head { padding-inline: 12px; flex-wrap: wrap; row-gap: 4px; }

  .reg__head,
  .case { grid-template-columns: 46px minmax(0, 1fr) 84px; gap: 10px; padding-inline: 12px 10px; }
  .hero .reg__head,
  .hero .case { grid-template-columns: 46px minmax(0, 1fr) 84px; }
  .reg__head span:nth-child(3),
  .reg__head span:nth-child(4),
  .case__area,
  .case__by { display: none; }
  .mock.is-board .case__area,
  .mock.is-board .case__by { display: block; }
  .mock.is-board .reg__cols { grid-template-columns: repeat(4, 172px); padding-inline: 12px; }

  .folio { grid-template-columns: minmax(0, 1fr); }
  .folio__tree { border-right: 0; border-bottom: 1px solid #eceef1; }
  .folio__doc { padding: 16px 16px 18px; }
  .intro__list { grid-template-columns: minmax(0, 1fr); }

  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Short windows wider than a phone: the hero register shows four cases. */
@media (min-width: 761px) and (max-width: 900px) and (max-height: 640px) {
  .hero .case.is-extra { display: none; }
}
/* Short laptop screens: tighter hero spacing so the window still ends above the fold.
   Screens 760px and taller keep the original proportions untouched. */
@media (min-width: 901px) and (max-height: 760px) {
  :root { --overhang: 3rem; }
  .hero__inner { padding-top: clamp(2.5rem, 11vh, 5rem); }
  .hero__title { margin-bottom: 1.75rem; }
  .hero .case { min-height: 36px; }
  .hero__copy { padding-bottom: 3rem; }
  .hero__lede { margin: 0 0 1.75rem; }
}

@media (min-width: 761px) and (max-height: 640px) {
  .hero__inner { padding-top: clamp(2.5rem, 8vh, 4rem); }
  .hero__lede { font-size: 1rem; line-height: 1.45; }
  .hero__copy { padding-top: 0; }
}

/* Short phones (SE-size and smaller): one case fewer and tighter spacing. */
@media (max-width: 760px) and (max-height: 640px) {
  .hero .case.is-extra-sm { display: none; }
  .hero .case { min-height: 32px; }
  .hero__inner { padding-top: 0.5rem; }
  .hero__copy { padding-bottom: 1.25rem; }
  .hero__lede { line-height: 1.45; }
}

body.menu-open { overflow: hidden; }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .splash { display: none; }
}