/* GrütteCloud design system
   Soft mist panels, deep forest-green type in a tight, heavy grotesque with a
   single Gambetta italic accent per headline, lime gradient pills, Lucide line
   icons and a grainy ridge as the one decorative element. Light only. */

:root {
  --page: #EEF1F7;
  --mist: #DEE6EC;
  --mist-deep: #C9D3DE;
  --screen-top: #E2E7EF;
  --white: #FFFFFF;

  --ink: #11351D;
  --ink-2: #2D452F;
  --moss: #4F805F;
  --muted: #6E7C74;
  --faint: #A3AEA8;
  --line: rgba(17, 53, 29, 0.12);
  --line-soft: rgba(17, 53, 29, 0.07);

  --lime-a: #D6FD62;
  --lime-b: #E7FF7A;
  --lime-c: #F7FFC3;
  --sage-a: #9AB8A7;
  --sage-b: #CFE8C9;
  --sage-c: #FDFFF3;
  --slate: #546C8D;
  --coral: #EAA99F;
  --coral-ink: #8A2F22;

  /* Fills are lit from above: a light top edge falling to a deeper base, never fading to cream */
  --lime-grad: linear-gradient(180deg, #E4FF76 0%, #CFF546 100%);
  --sage-grad: linear-gradient(180deg, #D7E7DC 0%, #BCD4C4 100%);
  --coral-grad: linear-gradient(180deg, #F8CFC7 0%, #ECA79A 100%);
  --screen-grad: linear-gradient(180deg, var(--screen-top) 0%, #EDF1F4 38%, var(--white) 100%);

  /* Bricolage Grotesque carries everything: headings and figures (heavy, tight),
     UI and body copy. Gambetta italic appears only as the one .accent word in a headline. */
  --sans: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--sans);
  --serif: "Gambetta", "Iowan Old Style", Georgia, serif;

  --r-panel: 40px;
  --r-card: 28px;
  --r-row: 20px;
  --r-pill: 999px;

  --gutter: clamp(16px, 2.4vw, 24px);
  --pad: clamp(24px, 4vw, 56px);

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .17  0 0 0 0 .22  0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; scrollbar-width: none; -ms-overflow-style: none; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--moss);
}

main { flex: 1 0 auto; }

/* Type roles: display (h1, figure) and headings (h2–h4) at 650, UI (buttons, rows, inputs: 500), body (400), meta (muted 13–14px) */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-wrap: balance;
}

h1 { font-size: clamp(44px, 6.4vw, 82px); letter-spacing: -0.035em; line-height: 0.96; }
h2 { font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.035em; line-height: 1.04; }
h3 { font-size: clamp(22px, 2vw, 25px); letter-spacing: -0.015em; }
h4 { font-size: 17px; letter-spacing: -0.01em; }

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

a { color: var(--ink); text-decoration-color: rgba(17, 53, 29, 0.3); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--ink); }

img { max-width: 100%; display: block; }

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

::selection { background: #DDF77A; color: var(--ink); }

::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Lucide icon font: <span class="li icon-NAME" aria-hidden="true"></span> */
.li {
  display: inline-block;
  flex: none;
  font-size: 20px;
  line-height: 1;
  user-select: none;
}

/* Inline SVG icons from the icon() macro */
.icon { flex: none; display: block; }
.btn .icon--apple { margin-top: -2px; }

/* The one serif moment in a headline */
.accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em; /* Gambetta's smaller x-height reads small next to the grotesque */
  letter-spacing: -0.02em;
}
.nowrap { white-space: nowrap; }

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

[hidden] { display: none !important; }

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

/* Every tile spans the full window, minus the gutter */
.shell {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.stack { display: flex; flex-direction: column; gap: var(--gutter); }

.grid { display: grid; gap: var(--gutter); }
.grid--hero { grid-template-columns: 1.35fr 1fr; }
.grid--halves { grid-template-columns: 1fr 1fr; }
.grid--thirds { grid-template-columns: repeat(3, 1fr); }
.grid--wide-narrow { grid-template-columns: 2fr 1fr; }

@media (max-width: 920px) {
  .grid--hero, .grid--halves, .grid--wide-narrow { grid-template-columns: 1fr; }
  .grid--thirds { grid-template-columns: 1fr; }
}

.page { padding-block: var(--gutter) 16px; }
.topbar + main .page { padding-top: 8px; }

.reading { max-width: 68ch; }
.center { text-align: center; margin-inline: auto; }

/* ---------- Panels ---------- */

.panel {
  position: relative;
  overflow: hidden;
  background: var(--mist);
  border-radius: var(--r-panel);
  padding: var(--pad);
  isolation: isolate;
}

.panel--screen { background: var(--screen-grad); }
.panel--white { background: var(--white); }
.panel--deep { background: var(--mist-deep); }
.panel--tight { padding: clamp(20px, 3vw, 32px); }
.panel--hill { min-height: 420px; display: flex; flex-direction: column; }
/* Leave a clear band at the bottom for the hill so it never sits behind text or buttons */
.panel--hill > :first-child { padding-bottom: clamp(96px, 12vw, 170px); }

.card {
  background: rgba(255, 255, 255, 0.72);
  border-radius: var(--r-card);
  padding: clamp(20px, 3vw, 32px);
}

.panel > .hill,
.card > .hill {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.hill { display: block; }
.hill--corner { right: -6%; bottom: -2px; width: min(56%, 520px); height: auto; }
.hill--floor { left: 0; right: 0; bottom: -2px; width: 100%; height: 62%; }
.hill--center { left: 50%; bottom: -2px; transform: translateX(-50%); width: min(110%, 760px); height: auto; }

/* ---------- Lead tile ---------- */
/* The first tile on every page: on desktop it is tall enough to fill the first
   screen so everything after it starts below the fold. Copy on the left, an
   optional card or visual resting on the ridge at the right. */

.lead {
  --lead-top: var(--gutter); /* space between the viewport top and the tile */
  /* On very wide screens, pull copy and card into a centred column of at most 1600px */
  padding-inline: max(var(--pad), calc((100vw - 2 * var(--gutter) - 1600px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: clamp(24px, 4vw, 64px);
  /* Copy and card sit side by side, centred vertically as one row */
  align-content: center;
  align-items: center;
}
.topbar + main .lead { --lead-top: calc(84px + 8px); }
.lead--solo { grid-template-columns: minmax(0, 1fr); }
.lead--center { justify-items: center; text-align: center; }

@media (min-width: 921px) {
  .lead {
    min-height: max(600px, calc(100vh - var(--lead-top) - var(--gutter)));
    min-height: max(600px, calc(100svh - var(--lead-top) - var(--gutter)));
  }
}

.lead__copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.lead__copy h1 { font-size: clamp(48px, 7vw, 96px); letter-spacing: -0.04em; line-height: 0.92; }
.lead__copy .lede { max-width: 40ch; }

.lead__card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(17, 53, 29, 0.05), 0 40px 70px -36px rgba(30, 60, 70, 0.45);
  text-align: left;
  scroll-margin: 24px;
}
.lead__card h2 { font-size: clamp(30px, 3vw, 40px); }

.ridge {
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: -2px;
  width: 100%;
  /* Height follows width, so the full silhouette shows at any tile width */
  aspect-ratio: 1600 / 420;
  max-height: 60%;
  pointer-events: none;
  animation: ridge-rise 1.1s cubic-bezier(.2, .7, .2, 1) both;
}
/* For leads whose copy runs tall: keep the peaks clear of buttons and small print */
@media (min-width: 921px) {
  .ridge--low { scale: 1 0.7; transform-origin: 50% 100%; }
}
@keyframes ridge-rise {
  from { transform: translateY(28px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (max-width: 920px) {
  .lead { grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(170px, 34vw, 220px); }
  .lead__copy { padding-right: 56px; }
  .lead__card { max-width: 460px; }
  /* Widen and shift so the main peak sits left of centre, below the card */
  .ridge { width: 160%; left: -15%; height: clamp(290px, 62vw, 400px); aspect-ratio: auto; max-height: none; }
}
@media (max-width: 600px) {
  .lead__copy { padding-right: 52px; }
}

/* ---------- Type helpers ---------- */

.lede { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--ink-2); max-width: 56ch; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.tiny { font-size: 12.5px; color: var(--muted); }
.ink { color: var(--ink); }

.figure {
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(72px, 11vw, 132px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  font-variant-numeric: lining-nums proportional-nums;
}

.kicker + .figure { margin-top: 10px; }

.figure__unit {
  font-size: 0.42em;
  vertical-align: 0.95em;
  margin-right: 0.06em;
  color: var(--moss);
  letter-spacing: 0;
}

.mark {
  display: inline-block;
  padding: 0.06em 0.5em 0.1em;
  border-radius: var(--r-pill);
  background: #E2FA6C;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 500;
}

.kicker { font-size: 15px; color: var(--ink-2); }

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

.btn {
  --h: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--h);
  padding: 0 24px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.65);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  /* Tactile glass lighting: crisp bright top rim, subtle lower occlusion */
  --edge: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(17, 53, 29, 0.1);
  box-shadow: var(--edge), 0 2px 4px -1px rgba(17, 53, 29, 0.08);
  transition: background 0.15s ease, color 0.15s ease;
}

.btn:hover {
  color: var(--ink);
}
.btn:active {
  color: var(--ink);
}
.btn .li {
  font-size: 19px;
  line-height: 1;
  flex: none;
}

.btn--lime {
  background: var(--lime-grad);
  color: var(--ink);
  box-shadow: var(--edge), 0 2px 4px -1px rgba(17, 53, 29, 0.12), 0 6px 16px -6px rgba(118, 168, 16, 0.45);
}
.btn--lime:hover {
  background: linear-gradient(180deg, #EAFF85 0%, #D5F94F 100%);
}
.btn--lime:active {
  background: linear-gradient(180deg, #D5F649 0%, #C3EA3A 100%);
}

.btn--sage {
  background: var(--sage-grad);
  color: var(--ink);
  box-shadow: var(--edge), 0 2px 4px -1px rgba(17, 53, 29, 0.08);
}
.btn--sage:hover {
  background: linear-gradient(180deg, #DFEDE4 0%, #C5DDD0 100%);
}
.btn--sage:active {
  background: linear-gradient(180deg, #CADCCF 0%, #B8CEBD 100%);
}

.btn--coral {
  background: var(--coral-grad);
  color: #6E1F14;
  box-shadow: var(--edge), 0 2px 4px -1px rgba(110, 31, 20, 0.12);
}
.btn--coral:hover {
  background: linear-gradient(180deg, #FBD3CB 0%, #EEA79A 100%);
}
.btn--coral:active {
  background: linear-gradient(180deg, #E69A8E 0%, #DA8C80 100%);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.65);
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(17, 53, 29, 0.04);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.95);
}
.btn--ghost:active {
  background: rgba(255, 255, 255, 0.5);
}

.btn--sm {
  --h: 40px;
  padding: 0 18px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.btn--sm .li { font-size: 17px; }

.btn--xs {
  --h: 32px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.btn--xs .li { font-size: 15px; }

.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease;
}
.icon-btn:hover { background: var(--white); }
.icon-btn--sm { width: 38px; height: 38px; border-radius: 14px; }
.icon-btn--sm .li { font-size: 19px; }

.link-plain { text-decoration: none; }

/* ---------- Orbs (grainy gradient dots) ---------- */

.orb {
  --a: #E8F1EC;
  --b: #6E9C84;
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFFFFF 0%, var(--a) 34%, var(--b) 100%);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  overflow: hidden;
}
.orb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grain);
  mix-blend-mode: multiply;
  opacity: 0.55;
}
.orb > * { position: relative; z-index: 1; }
.orb--sage  { --a: #DCEBE3; --b: #6E9C84; }
.orb--lime  { --a: #F5FFCB; --b: #B9E34A; }
.orb--coral { --a: #FBE4DF; --b: #E07F70; }
.orb--slate { --a: #E1E8F1; --b: #6F86A6; }
.orb--sm { width: 34px; height: 34px; font-size: 14px; }
.orb--xs { width: 30px; height: 30px; font-size: 13px; }
.orb .li { font-size: 20px; color: var(--ink); }

/* ---------- Rows (transaction-style lists) ---------- */

.rows { display: flex; flex-direction: column; }

.row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 6px;
  border-top: 1px solid var(--line-soft);
  color: inherit;
  text-decoration: none;
  background: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  width: 100%;
  text-align: left;
  font: inherit;
}
.rows > .row:first-child { border-top: 0; }
button.row, a.row, .row--action { cursor: pointer; border-radius: 16px; transition: background 0.15s ease; }
button.row:hover, a.row:hover, .row--action:hover { background: rgba(255, 255, 255, 0.55); }

.row__title { font-family: var(--display); font-size: 18.5px; font-weight: 500; color: var(--ink); line-height: 1.25; letter-spacing: -0.01em; }
.row__sub { font-size: 13px; color: var(--muted); }
.row__end { text-align: right; }
.row__amount { font-family: var(--display); font-size: 19px; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.row__main { min-width: 0; }
.row__main > * { overflow: hidden; text-overflow: ellipsis; }

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}
.badge--lime { background: var(--lime-grad); }
.badge--sage { background: var(--sage-grad); }
.badge--coral { background: var(--coral-grad); color: var(--coral-ink); }
.badge--slate { background: #DCE4EE; color: #2E4560; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  color: var(--ink-2);
}

/* ---------- Forms ---------- */

.form { display: flex; flex-direction: column; gap: 18px; }

.field {
  display: block;
  border-bottom: 1px solid var(--line);
  padding: 6px 0 4px;
  transition: border-color 0.15s ease;
}
.field:focus-within { border-color: var(--moss); }

.field__label {
  display: block;
  font-size: 13.5px;
  color: var(--muted);
}

.field input,
.field textarea,
.field select {
  display: block;
  width: 100%;
  margin: 0;
  padding: 4px 0 6px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 110px; font-family: var(--sans); font-size: 17px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.field select { cursor: pointer; font-size: 18px; }
.field input::placeholder,
.field textarea::placeholder { color: #8E9A93; font-weight: 400; }

.field--select { position: relative; }
.field--select::after {
  content: "\e071"; /* Lucide chevron-down */
  font-family: "lucide";
  position: absolute;
  right: 0;
  bottom: 12px;
  font-size: 20px;
  color: var(--muted);
  pointer-events: none;
}

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: 14px;
  color: var(--muted);
}
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--moss); }

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.search:focus-within { border-color: var(--moss); }
.search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 6px 0;
  min-width: 0;
}
.search input::placeholder { color: #8E9A93; font-weight: 400; }
.search .li { color: var(--muted); }

.note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 18px;
  border-radius: var(--r-row);
  background: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  color: var(--ink-2);
}
.note--coral { background: #FBE5E1; color: var(--coral-ink); }
.note--lime { background: #F1FBC9; }
.note .li { font-size: 20px; margin-top: 1px; }

/* ---------- Header ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 84px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.brand__name {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.brand__mark { width: 40px; height: 40px; flex: none; }

.topbar__links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.topbar__links a {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 15px;
  color: var(--ink-2);
  text-decoration: none;
  transition: background 0.15s ease;
}
.topbar__links a:hover { background: rgba(255, 255, 255, 0.7); }
.topbar__links a[aria-current="page"] { background: var(--white); color: var(--ink); }

.topbar__end { display: flex; align-items: center; gap: 10px; }

.burger-bar {
  position: relative;
  z-index: 100;
  height: 0;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.burger-bar > .menu__trigger {
  margin-top: calc(var(--gutter) + 20px);
  margin-right: 20px;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  flex-direction: column; /* lets the panel grow past the window so the overlay scrolls */
  padding-block: var(--gutter);
  background: rgba(238, 241, 247, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-overlay__shell {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto; /* never shrink below the panel's content, or the footer gets clipped */
}
.nav-overlay__panel {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 100%;
}
.nav-overlay__panel > :first-child { padding-bottom: 0; }
.nav-overlay__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  border: 0;
  cursor: pointer;
}
.nav-overlay__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 56px;
}
.nav-overlay__links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 560px;
  position: relative;
  z-index: 1;
}
.nav-overlay__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  margin-inline: -20px;
  border-radius: var(--r-row);
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.16s ease, transform 0.16s ease;
}
.nav-overlay__links a .li {
  font-size: clamp(20px, 2vw, 24px);
  color: var(--moss);
  transition: transform 0.16s ease, color 0.16s ease;
}
.nav-overlay__links a:hover,
.nav-overlay__links a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.65);
}
.nav-overlay__links a:hover .li {
  transform: translate(2px, -2px);
  color: var(--ink);
}
.nav-overlay__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  position: relative;
  z-index: 1;
}
.nav-overlay__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.nav-overlay__meta a {
  font-size: 14.5px;
  color: var(--ink-2);
  text-decoration: none;
}
.nav-overlay__meta a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 8px 0 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.6);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
}
.menu__trigger:hover { background: var(--white); }
.menu__trigger--icon { padding: 0; width: 46px; justify-content: center; border-radius: 17px; }

.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 50;
  min-width: 250px;
  padding: 10px;
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: 0 30px 60px -30px rgba(17, 53, 29, 0.35), 0 0 0 1px var(--line-soft);
}
.menu__panel a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 15px;
  color: var(--ink-2);
  text-decoration: none;
}
.menu__panel a:hover,
.menu__panel a[aria-current="page"] { background: var(--page); color: var(--ink); }
.menu__panel .li { font-size: 20px; color: var(--moss); }
.menu__panel hr { border: 0; border-top: 1px solid var(--line-soft); margin: 6px 8px; }
.menu__nav { display: none; }

@media (max-width: 860px) {
  .topbar { height: 72px; }
  .topbar__links { display: none; }
  .menu__nav { display: block; }
  .menu__trigger .menu__name { display: none; }
  .menu__trigger { padding: 0 8px 0 14px; }
}
@media (min-width: 861px) {
  .menu--mobile { display: none; }
}

/* ---------- Footer ---------- */

.site-footer { padding-block: 24px var(--gutter); margin-top: auto; }
.site-footer__panel {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-panel);
  background: var(--mist);
}
.site-footer__brand p { max-width: 34ch; margin-top: 12px; font-size: 14px; color: var(--muted); }
.site-footer h4 { font-size: 18px; margin-bottom: 12px; }
.site-footer__links { display: flex; flex-direction: column; gap: 8px; }
.site-footer__links a { font-size: 14.5px; color: var(--ink-2); text-decoration: none; width: fit-content; }
.site-footer__links a:hover { color: var(--ink); text-decoration: underline; }
.site-footer__bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.site-footer__copy { font-size: 13px; color: var(--muted); }

/* Profile and contact icon buttons (About page, footer) */
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.socials img { width: 20px; height: 20px; }
.icon-btn--sm img { width: 17px; height: 17px; }
.icon-btn--sm svg { width: 16px; height: 16px; }
/* In the footer the icons sit bare on the panel; the button surface only appears on hover */
.site-footer .socials { gap: 2px; }
.site-footer .socials .icon-btn { width: 32px; height: 32px; border-radius: 10px; background: transparent; }
.site-footer .socials .icon-btn:hover { background: rgba(255, 255, 255, 0.6); }

@media (max-width: 720px) {
  .site-footer__panel { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* ---------- Long-form legal text ---------- */

.legal { max-width: 70ch; margin-inline: auto; padding-block: 12px 24px; }
.legal__head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.legal h2 { font-size: clamp(24px, 2.6vw, 30px); margin: 44px 0 12px; }
.legal h3 { font-size: 20px; margin: 24px 0 8px; }
.legal p, .legal li { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 10px 0; padding-left: 22px; }
.legal li + li { margin-top: 6px; }
.legal li::marker { color: var(--moss); }
.legal .intro { font-family: var(--display); font-size: clamp(20px, 2vw, 23px); font-weight: 400; line-height: 1.45; color: var(--ink); }

/* ---------- Disclosure (settings actions) ---------- */

.disclosure { border-top: 1px solid var(--line-soft); }
.disclosure:first-child { border-top: 0; }
.disclosure > summary {
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 6px;
  cursor: pointer;
  border-radius: 16px;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary:hover { background: rgba(255, 255, 255, 0.55); }
.disclosure > summary .chev { transition: transform 0.2s ease; color: var(--muted); }
.disclosure[open] > summary .chev { transform: rotate(180deg); }
.disclosure__body { padding: 4px 6px 24px 64px; color: var(--ink-2); }
.disclosure__body p + p { margin-top: 8px; }

@media (max-width: 600px) {
  .disclosure__body { padding-left: 6px; }
}

/* ---------- Segmented control ---------- */

.segmented {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.55);
}
.segmented button {
  position: relative;
  z-index: 1;
  height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 0.2s ease;
}
.segmented button[aria-pressed="true"] { color: var(--ink); }
.segmented__glider {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  border-radius: var(--r-pill);
  background: var(--lime-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 4px -1px rgba(17, 53, 29, 0.16);
  transition: transform 0.3s cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  top: 20px;
  z-index: 200;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 12px 20px 12px 14px;
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: 0 20px 50px -24px rgba(17, 53, 29, 0.5);
  font-size: 15px;
  color: var(--ink);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.toast.is-hiding { opacity: 0; transform: translate(-50%, -10px); }

/* ---------- Cookie consent ---------- */

.consent {
  position: fixed;
  left: 50%;
  bottom: var(--gutter);
  z-index: 300;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  padding: 26px;
  border-radius: var(--r-card);
  background: var(--screen-grad);
  box-shadow: 0 40px 80px -30px rgba(17, 53, 29, 0.45), 0 0 0 1px var(--line-soft);
}
.consent h2 { font-size: 28px; }
.consent p { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.consent .btn-row { margin-top: 18px; }
.consent .btn { flex: 1; }

.blurred { filter: blur(6px); pointer-events: none; user-select: none; }

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

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

/* ---------- Small screens ---------- */

@media (max-width: 600px) {
  :root { --r-panel: 30px; --r-card: 22px; }
  .btn { --h: 52px; padding: 0 24px; font-size: 18px; }
  .btn--sm { --h: 42px; padding: 0 18px; font-size: 16px; }
  .row__title { font-size: 17px; }
  .row__amount { font-size: 18px; }
  .segmented button { font-size: 13.5px; padding: 0 4px; letter-spacing: -0.01em; }
}