/* Notation4DAW marketing site — "chromatic slab" direction, taken from the logo:
 * an ink shape with a hard green offset up-left and a yellow one down-right,
 * on violet. Buttons, cards and highlights all reuse that triple.
 *
 * Colours come from the app's tokens.css (copied in by build.mjs): --purple,
 * --green, --yellow, --white and the --purple-30 tint. The only site-only hues
 * are the logo ink (from favicon.svg, which the app UI never uses) and two
 * derivations of it. Type and spacing scales are site-only because the app's
 * stop at 18px / 24px; they are built from the app's space tokens.
 *
 * Layout: one 1200px column; full-bleed colour bands alternate violet / ink /
 * yellow so each section reads as its own slab.
 */

@font-face {
  font-family: 'Chakra Petch';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/chakra-petch-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/chakra-petch-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}

/* Animatable offset for the slab layers (falls back to a static offset). */
@property --o { syntax: '<length>'; inherits: true; initial-value: 6px; }

:root {
  /* Logo ink — fill of <g id="brand-dark"> in favicon.svg. */
  --ink: #271E46;
  --ink-deep: #1A1430;               /* recessed panels on ink */
  --ink-70: rgba(39, 30, 70, 0.72);  /* secondary text on violet / yellow */

  /* Display face: Chakra Petch's cut corners echo the logo's chamfers. */
  --font-display: 'Chakra Petch', 'Arial Narrow', var(--font-ui);

  --site-max: 1200px;
  --site-gutter: max(var(--space-xl), 4vw);
  --site-band: calc(var(--space-xxl) * 4.5);
  --site-band-sm: calc(var(--space-xxl) * 2.5);
  /* The ticker is tilted -1.6deg, so each end rises or drops by about half its
     width x tan(1.6deg) = ~1.5vw and eats into the band next to it. Added back
     on both sides so the gap reads the same as between straight bands. */
  --ticker-tilt: 1.6vw;
  --wave-h: 10px;

  --type-h1: clamp(34px, 5.4vw, 74px);
  --type-h2: clamp(30px, 4.6vw, 58px);
  --type-h3: 20px;
  --type-lede: clamp(17px, 1.5vw, 19px);
  --type-body: 16px;
  --type-label: 13px;

  --shift: 4px;                       /* chromatic offset on buttons */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--purple);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--type-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main { overflow-x: clip; }

h1, h2, h3, dt {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}
p, ul, dl, dd, figure { margin: 0; }
code { font-family: var(--font-mono); font-size: 0.9em; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.on-ink :focus-visible { outline-color: var(--green); }

.wrap { width: 100%; max-width: var(--site-max); margin-inline: auto; padding-inline: var(--site-gutter); }

.skip {
  position: absolute; left: var(--space-xl); top: -100px; z-index: 20;
  background: var(--ink); color: var(--white); padding: var(--space-md) var(--space-lg);
}
.skip:focus { top: var(--space-xl); }

/* ---- Colour bands ---- */
.on-ink    { background: var(--ink);    color: var(--white); }
.on-purple { background: var(--purple); color: var(--ink); }
.on-yellow { background: var(--yellow); color: var(--ink); }

/* ---- Highlights: the logo triple applied to a word ---- */
mark { color: var(--ink); padding: 0 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-green  { background: var(--green);  box-shadow: 0.07em 0.07em 0 var(--yellow); }
.hl-yellow { background: var(--yellow); box-shadow: -0.07em -0.07em 0 var(--green); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  color: var(--white); background: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--radius-md);
  box-shadow: calc(var(--shift) * -1) calc(var(--shift) * -1) 0 var(--green), var(--shift) var(--shift) 0 var(--yellow);
  cursor: pointer;
  transition: box-shadow 140ms ease, transform 140ms ease, background 140ms ease, color 140ms ease;
}
.btn:hover { --shift: 7px; }
.btn:active { --shift: 1px; }
.btn-line { background: transparent; color: var(--ink); box-shadow: none; }
.btn-line:hover { background: var(--ink); color: var(--white); }
.btn-small { min-height: 36px; padding: 0 14px; font-size: 13px; --shift: 3px; }
.btn-small:hover { --shift: 5px; }
.btn-on-ink { background: var(--green); color: var(--ink); border-color: var(--green); box-shadow: var(--shift) var(--shift) 0 var(--yellow); }
.btn:disabled { opacity: 0.6; cursor: progress; }

/* ---- Header ---- */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: var(--purple);
}
.top-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); min-height: 64px; }
.brand {
  display: inline-flex; align-items: center; gap: var(--space-md);
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none;
}
.brand img { border-radius: var(--radius-lg); }
.nav { display: flex; align-items: center; gap: var(--space-xxl); }
.nav a:not(.btn) {
  font-family: var(--font-display); font-weight: 500; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none;
  text-underline-offset: 6px; text-decoration-thickness: 3px;
}
.nav a:not(.btn):hover { text-decoration-line: underline; text-decoration-color: var(--green); }
@media (max-width: 760px) { .nav a:not(.btn) { display: none; } }

/* ---- Hero ---- */
.hero { position: relative; isolation: isolate; padding-block: calc(var(--space-xxl) * 2) calc(var(--space-xxl) * 4 + 2 * var(--ticker-tilt)); }
.strings { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
/* Band over the strings (sized by site.js). touch-action: none lets a finger strum
   instead of scrolling; site.js hands the gesture back to scrolling once it
   leaves the band. Transparent and above the wordmark, which isn't interactive. */
.strum-zone { position: absolute; left: 0; right: 0; z-index: 1; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.hero-inner { display: grid; gap: calc(var(--space-xxl) * 2); }

.wordmark { display: block; width: min(100%, 880px); height: auto; overflow: visible;
  /* The viewBox leaves 32 of 752 units left of the ink N for the green layer;
     pull that back so the ink edge, not the box, lines up with the text below. */
  transform: translateX(calc(-32 / 752 * 100%)); }
.wordmark .lm-ink    { fill: var(--ink); }
.wordmark .lm-green  { fill: var(--green);  transform: translate(var(--gx, -11px), var(--gy, -10px)); }
.wordmark .lm-yellow { fill: var(--yellow); transform: translate(var(--yx, 10px), var(--yy, 10px)); }

.hero-copy {
  display: grid; gap: calc(var(--space-xxl) * 1.5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: end;
}
.hero h1 { font-size: var(--type-h1); line-height: 0.98; letter-spacing: -0.01em; }
.hero-side { display: grid; gap: var(--space-xxl); min-width: 0; }
.lede { font-size: var(--type-lede); max-width: 54ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-xl) var(--space-xxl); padding: var(--space-xs); }

.hero-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xxl); }
.specs, .hint, .sound, .marker, .tag {
  font-family: var(--font-display); font-weight: 500; font-size: var(--type-label);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.hint { color: var(--ink-70); }
/* Sound toggle + chord button. The chord button lives in a slot tucked under
 * the toggle's right end; the slot's column grows 0fr → 1fr while the button
 * slides right, so it reads as one control extending, not a second one. */
/* The yellow offset belongs to the whole pill (toggle + chord), so it is on the
   group and grows with it as the chord slides out. */
.sound-group {
  display: inline-flex; align-items: flex-start;
  border-radius: var(--radius-full);
  transition: box-shadow 320ms cubic-bezier(.2, .8, .2, 1);
}
.sound-group.on { box-shadow: 3px 3px 0 var(--yellow); }
.sound-group.on:has(.chord:hover) { box-shadow: 3px 3px 0 var(--green); }
.sound { position: relative; z-index: 1; }
.chord-slot {
  /* Closed, the slot must take no room at all, or the bar's spacing goes uneven:
     minmax(0, …) lets the track drop below the button's padding (a plain 0fr
     can't), and the tuck under the toggle only applies while open. */
  display: grid; grid-template-columns: minmax(0, 0fr);
  margin-left: 0;
  overflow: hidden;                   /* clips the button while it slides */
  transition: grid-template-columns 320ms cubic-bezier(.2, .8, .2, 1), margin-left 320ms cubic-bezier(.2, .8, .2, 1);
}
.chord {
  min-width: 0; overflow: hidden; white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--space-sm);
  min-height: 32px;
  /* Left padding = the 18px tucked under the toggle + a gap 4px smaller than the
     right one: the toggle's round end bulges in at mid-height but leaves the top
     and bottom corners open, so the visible area reads wider on the left and the
     optical centre sits a little left of the geometric one. */
  padding: 0 var(--space-lg) 0 calc(18px + var(--space-md));
  font-family: var(--font-display); font-weight: 500; font-size: var(--type-label);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink); background: var(--green);
  border: 2px solid var(--ink); border-radius: 0 var(--radius-full) var(--radius-full) 0;
  cursor: pointer;
  transform: translateX(-100%);
  transition: transform 320ms cubic-bezier(.2, .8, .2, 1);
}
/* Fixed width (fits the longest name, "Cmaj7") so the pill doesn't jump between chords. */
.chord-name { display: inline-block; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: none; min-width: 3.6em; text-align: center; }
.chord:hover { background: var(--yellow); }
/* The slot clips outside outlines, so focus is drawn inside the pill. */
.chord:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; }
.sound-group.on .chord-slot { grid-template-columns: minmax(0, 1fr); margin-left: -18px; }  /* tuck under the toggle's round end */
.sound-group.on .chord { transform: none; }
@media (prefers-reduced-motion: reduce) { .chord-slot, .chord, .sound-group { transition: none; } }

.sound {
  display: inline-flex; align-items: center; gap: var(--space-md);
  min-height: 32px; padding: 0 var(--space-lg);
  color: var(--ink); background: transparent;
  border: 2px solid var(--ink); border-radius: var(--radius-full);
  cursor: pointer;
}
.sound-dot { width: 10px; height: 10px; border-radius: var(--radius-full); border: 2px solid var(--ink); }
.sound[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.sound[aria-pressed="true"] .sound-dot { background: var(--green); border-color: var(--green); box-shadow: 2px 2px 0 var(--yellow); }

/* ---- Ticker ---- */
.ticker {
  background: var(--green); color: var(--ink);
  width: 106%; margin-left: -3%;
  transform: rotate(-1.6deg);
  overflow: hidden;
  position: relative; z-index: 1;
  /* The -1.6deg tilt lifts the right end by ~1.5vw; the bottom margin pulls the
     next band up under it so no violet shows below that end. */
  margin-top: -14px;
  margin-bottom: calc(-1 * (var(--wave-h) + var(--ticker-tilt) + 10px));
  /* Wavy top and bottom edges: one wave tile repeated along each edge, plus a
     solid band between them. A mask, so the edge takes the band's own colour. */
  --wave-w: 44px;
  --wave-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10V5Q10 0 20 5T40 5V10Z'/%3E%3C/svg%3E");
  --wave-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0V5Q10 10 20 5T40 5V0Z'/%3E%3C/svg%3E");
  -webkit-mask:
    var(--wave-top) top left / var(--wave-w) var(--wave-h) repeat-x,
    var(--wave-bottom) bottom left / var(--wave-w) var(--wave-h) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--wave-h) + 2px) no-repeat;
  mask:
    var(--wave-top) top left / var(--wave-w) var(--wave-h) repeat-x,
    var(--wave-bottom) bottom left / var(--wave-w) var(--wave-h) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--wave-h) + 2px) no-repeat;
}
/* The edges run the opposite way to the text: one wave length per cycle. */
.ticker { animation: ticker-wave 1.1s linear infinite; }
@keyframes ticker-wave {
  from { -webkit-mask-position: 0 0, 0 100%, center; mask-position: 0 0, 0 100%, center; }
  to   { -webkit-mask-position: var(--wave-w) 0, var(--wave-w) 100%, center; mask-position: var(--wave-w) 0, var(--wave-w) 100%, center; }
}
.ticker-track {
  display: flex; width: max-content;
  padding-block: calc(var(--space-lg) + var(--wave-h));
  font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.6vw, 32px);
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
  animation: ticker 40s linear infinite;
}
.ticker-track span { display: inline-flex; align-items: center; }
.ticker-track span::after {
  content: ""; width: 0.38em; height: 0.38em; margin-inline: 0.9em;
  background: var(--ink); transform: rotate(45deg);
}
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker, .ticker-track { animation: none; } }

/* ---- Sections ---- */
.band { padding-block: var(--site-band); }
/* Undo the ticker's pull-up (its negative bottom margin), then add the tilt. */
.ticker + .band { padding-top: calc(var(--site-band) + var(--wave-h) + 10px + 2 * var(--ticker-tilt)); }
@media (max-width: 760px) {
  .band { padding-block: var(--site-band-sm); }
  .ticker + .band { padding-top: calc(var(--site-band-sm) + var(--wave-h) + 10px + 2 * var(--ticker-tilt)); }
  .hero { padding-block: var(--space-xxl) calc(var(--space-xxl) * 2); }
}
.band h2 { font-size: var(--type-h2); line-height: 1; letter-spacing: -0.01em; max-width: 17ch; }
.section-lede { font-size: var(--type-lede); max-width: 58ch; margin-top: var(--space-xxl); }
.on-ink .section-lede { color: var(--purple); }
.band h3 { font-size: var(--type-h3); line-height: 1.2; }

.marker { display: inline-flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-xxl); }
.marker::before { content: ""; width: 10px; height: 10px; background: var(--green); box-shadow: 3px 3px 0 var(--yellow); }
.on-yellow .marker::before { background: var(--ink); box-shadow: 3px 3px 0 var(--green); }

/* Tab figure: the editor's own score tokens on a recessed ink panel. */
.staff-figure { margin-top: calc(var(--space-xxl) * 2); display: grid; gap: var(--space-lg); }
.staff-scroll {
  background: var(--ink-deep);
  border: 1px solid var(--purple-30);
  border-radius: var(--radius-xl);
  overflow-x: auto;
}
.tab { display: block; width: 100%; min-width: 640px; height: auto; }
.staff-figure figcaption { font-size: var(--type-label); color: var(--purple); }

.tab .string     { stroke: var(--score-staff); stroke-width: 1; }
.tab .barline    { stroke: var(--score-staff); stroke-width: 1.5; }
.tab .clef       { fill: var(--purple); font-family: var(--font-serif); font-weight: bold; font-size: 15px; }
.tab .section    { fill: var(--white); font-family: var(--font-serif); font-weight: bold; font-size: 18px; }
.tab .section-box { fill: none; stroke: var(--purple-30); }
.tab .barnum     { fill: var(--purple); font-family: var(--font-mono); font-size: 11px; }
.tab .note-bg    { fill: var(--ink-deep); }
.tab .note       { fill: var(--score-note); font-family: var(--font-ui); font-size: 15px; text-anchor: middle; dominant-baseline: central; transition: fill 160ms ease; }
.tab .note.harm  { fill: var(--score-harmonic); }
.tab .note.hit   { fill: var(--white); }
.tab .tech-line  { fill: none; stroke: var(--score-note); stroke-width: 1.5; }
.tab .tech-label { fill: var(--score-note); font-family: var(--font-ui); font-size: 11px; text-anchor: middle; }
.tab .pm         { fill: var(--score-palm-mute); font-family: var(--font-ui); font-size: 11px; }
.tab .pm-line    { stroke: var(--score-palm-mute); stroke-dasharray: 3 3; }
.tab .ring-wash  { fill: var(--sustain-wash); }
.tab .ring       { fill: var(--score-let-ring); font-family: var(--font-ui); font-size: 11px; }
.tab .playhead   { stroke: var(--score-playhead); stroke-width: 2; }

/* Techniques */
.tech-grid {
  list-style: none; padding: 0;
  margin-top: calc(var(--space-xxl) * 2);
  display: grid; gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  background: var(--purple-30);
  border: 2px solid var(--purple-30);
}
.tech-grid li { background: var(--ink); padding: var(--space-xxl); display: grid; gap: var(--space-md); align-content: start; min-width: 0; transition: background 160ms ease; }
.tech-grid li:hover { background: var(--ink-deep); }
.tech-grid p { color: var(--purple); }
.tech-mark {
  font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1;
  margin-bottom: var(--space-lg); color: var(--white); font-variant-numeric: tabular-nums;
  transition: text-shadow 160ms ease;
}
.tech-grid li:hover .tech-mark { text-shadow: -3px -3px 0 var(--green), 3px 3px 0 var(--yellow); }
.tech-mark.tm-green  { color: var(--green); }
.tech-mark.tm-yellow { color: var(--yellow); }
.tech-grid li:hover .tm-green, .tech-grid li:hover .tm-yellow { color: var(--white); }

/* Slab: ink card with the logo's chamfered top-right corner and offset layers.
 * The chamfer is a gradient (not clip-path) so the layers can sit outside it. */
.slab {
  --c: 28px;
  --o: 6px;
  position: relative; isolation: isolate;
  color: var(--white);
  padding: calc(var(--space-xxl) * 1.25);
  transition: --o 220ms ease;
}
.slab::before, .slab::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-md);
}
.slab::after {
  z-index: -1;
  background: linear-gradient(225deg, transparent var(--c), var(--ink) calc(var(--c) + 0.5px));
}
/* Yellow layer, whose drop-shadow is the green one: two layers, one element. */
.slab::before {
  z-index: -2;
  background: linear-gradient(225deg, transparent var(--c), var(--yellow) calc(var(--c) + 0.5px));
  transform: translate(var(--o), var(--o));
  filter: drop-shadow(calc(var(--o) * -2) calc(var(--o) * -2) 0 var(--green));
}
.slab:hover, .slab:focus-within { --o: 10px; }
@media (prefers-reduced-motion: reduce) { .slab { transition: none; } }

.split {
  margin-top: calc(var(--space-xxl) * 2.5);
  display: grid; gap: calc(var(--space-xxl) * 2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  padding: 10px;                      /* room for the offset layers */
}
.slab header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-xl); margin-bottom: var(--space-xl); border-bottom: 2px solid var(--purple-30); padding-right: var(--space-xxl); }
.tag { color: var(--green); }
.checks { list-style: none; padding: 0; display: grid; gap: var(--space-lg); }
.checks li { position: relative; padding-left: var(--space-xxl); }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; background: var(--green); box-shadow: 2px 2px 0 var(--yellow); }
.slab code { color: var(--green); }

/* Collaboration */
.facts {
  margin-top: calc(var(--space-xxl) * 2.5);
  display: grid; gap: calc(var(--space-xxl) * 1.5) calc(var(--space-xxl) * 2.5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
}
.facts div { border-top: 2px solid var(--green); padding-top: var(--space-xl); display: grid; gap: var(--space-md); min-width: 0; }
.facts dt { font-size: var(--type-h3); }
.facts dd { color: var(--purple); max-width: 52ch; }

/* Import */
.import { display: grid; gap: calc(var(--space-xxl) * 2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); align-items: end; }
.formats { list-style: none; padding: var(--space-xs); display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.formats li {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: var(--green); background: var(--ink);
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-md);
  box-shadow: -3px -3px 0 var(--green);
  transition: transform 140ms ease;
}
.formats li:hover { transform: translate(2px, -3px) rotate(-2deg); }
@media (prefers-reduced-motion: reduce) { .formats li { transition: none; } .formats li:hover { transform: none; } }

/* Invite */
.invite { display: grid; gap: calc(var(--space-xxl) * 2.5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.form { display: grid; gap: var(--space-xl); min-width: 0; margin: 10px; }
.field { display: grid; gap: var(--space-sm); }
.field label { font-family: var(--font-display); font-weight: 500; font-size: var(--type-label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--purple); }
.field input, .field select {
  font: inherit; color: var(--white);
  background: var(--ink-deep);
  border: 2px solid var(--purple-30);
  border-radius: var(--radius-md);
  min-height: 48px; padding: 0 var(--space-lg);
  width: 100%;
  color-scheme: dark;
}
.field input:focus-visible, .field select:focus-visible { outline: none; border-color: var(--green); box-shadow: 3px 3px 0 var(--yellow); }
.form .btn { justify-self: start; }
.form-status { min-height: 1.6em; font-size: 14px; }
.form-status.ok  { color: var(--green); }
.form-status.err { color: var(--yellow); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Footer */
.foot { padding-block: calc(var(--space-xxl) * 1.5); font-size: var(--type-label); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-lg); }
.foot-brand { font-family: var(--font-display); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; }
.foot-note { color: var(--purple); }