/* mcp.einar.partners — single stylesheet.
   Tokens and shared components below are trimmed from Einar & Partners'
   main-site style guide (brand colors, type scale, spacing/radius scale,
   eyebrow/pill mechanics); everything after that is this site's
   own page layout, re-themed on top of those tokens. */

@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/inter-300.ttf) format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/inter-400.ttf) format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/inter-500.ttf) format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/inter-600.ttf) format('truetype')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/inter-tight-500.ttf) format('truetype')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/inter-tight-600.ttf) format('truetype')}

/* ============================= TOKENS ============================= */
:root {
  /* Brand navy */
  --bg:            #121f36;
  --ink-900:       #121f36;

  /* White / off-white */
  --white:         #ffffff;
  --body-bg:       #ffffff;
  --off-white:     #fdfeff;

  /* Slate / muted text */
  --slate:         #94a3b8;
  --muted:         #64748b;
  --slate-600:     #475569;
  --slate-700:     #334155;

  /* Violet (brand accent) */
  --violet:        #857ada;
  --violet-lt:     #c9c7de;
  --violet-shimmer:#a78bfa;
  --accent-rgb:    124 58 237;
  --gradient-accent: linear-gradient(135deg, var(--violet-shimmer) 0%, var(--violet-lt) 100%);
  --gradient-accent-rgb: 124 58 237, 167 139 250;

  /* Borders / overlays */
  --border:        rgba(255, 255, 255, .1);  /* hairlines on dark sections */
  --border3:       rgba(0, 0, 0, .05);       /* hairlines on light sections */

  /* Form field state */
  --field-border:  #d7dbe3;
  --error:         #c0392b;

  /* Light lavender page background + white "block" cards (used by the
     custom-page sections, instead of the dark homepage-style sections) */
  --page-bg-custom: #fbf8ff;
  --block-bg:       #ffffff;
  --block-border:   #f0edf7;

  /* Nav (always a light bar, regardless of section theme) */
  --nav-ink:       #121f36;
  --nav-surface:   #ffffff;
  --nav-hover-bg:  #f6f6f6;

  /* Fonts */
  --font-head: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, "Segoe UI", Arial, sans-serif;

  --fw-heading: 500;
  --fw-body:    300;
  --lh-heading: 1.25;
  --lh-body:    1.6;

  /* Spacing scale */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 2.5rem;  --space-8: 3rem;    --space-9: 4rem;

  /* Radius scale */
  --radius-default: 0;
  --radius-sm: 4px;

  /* Letter-spacing (tracking) scale */
  --tracking-tight:   -0.02em;
  --tracking-eyebrow:  0.14em;

  /* Layout */
  --container-max: 76rem;

  /* Site-specific: labelled-statement tags (REG / E&P / PLATFORM) —
     not part of the brand-wide style guide, kept alongside it. */
  --reg: #006eff; --reg-bg: #e3ebf7;
  --ep: #c7037f;  --ep-bg: #f8e3ef;
  --plat: #089f24; --plat-bg: #e2f0e4;

  color-scheme: light;
}

/* ======================= RESET + BASE TYPOGRAPHY ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[hidden]:not([hidden=until-found i]) { display: none !important; }
img { max-width: 100%; }

body {
  background: var(--body-bg); color: var(--ink-900);
  font-family: var(--font-body); font-weight: var(--fw-body); font-size: 1rem; line-height: var(--lh-body);
}
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--font-head); font-weight: var(--fw-heading); line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight); margin: 0; text-wrap: balance;
}
p { margin: 0; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: 3px; }

.inner { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--space-4); }
@media (min-width: 700px) { .inner { padding-inline: var(--space-6); } }

/* ===================== EYEBROW ================= */
.eyebrow {
  font-family: var(--font-head); font-weight: 500; font-size: .8rem;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--violet);
}

/* ===================== ACCENT GRADIENT TEXT:  .accent ================= */
.accent {
  background: var(--gradient-accent);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===================== SHARED PILL/TAG COMPONENT ===================== */
.pill, .tag {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem;
  border-radius: var(--radius-default); font-size: 11px; font-weight: 600; line-height: 1;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); white-space: nowrap;
}


/* ============================================================
   PAGE LAYOUT
   topbar (navy) → white sticky header → dark violet-glow hero
   (form card + case copy) → dark pillars band → light sourcing →
   light-lavender steps/use → white data grid → navy footer.
   ============================================================ */

.topbar { background: var(--bg); color: var(--white); font-size: .82rem; font-weight: 400; }
.topbar .inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: .55rem; }
.topbar span, .topbar a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.topbar span::before, .topbar a::before { content: ""; width: .4rem; height: .4rem; border-radius: var(--radius-default); background: var(--violet-lt); }
@media (max-width: 520px) { .topbar .tagline { display: none; } .topbar .inner { justify-content: flex-end; } }

header.site { background: var(--nav-surface); border-bottom: 1px solid var(--border3); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; }
header.site .inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 0; }
.mark { display: inline-flex; align-items: center; }
.mark img { display: block; height: 60px; width: auto; }
nav.main { display: flex; align-items: center; gap: 0; }
nav.main a {
  position: relative;
  display: flex;
  align-items: center;
  height: 70px;
  font-size: 14px;
  color: var(--nav-ink) !important;
  font-weight: 400 !important;
  padding: 0 17px;
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font-body);
}
nav.main a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  right: 3px;
  height: calc(1em + 28px);
  transform: translate(0, -50%) scale(0);
  z-index: -1;
  background: var(--nav-hover-bg);
  border-radius: 6px;
  transition: transform .25s;
}
nav.main a:hover::before { transform: translate(0, -50%) scale(1); }
@media (max-width: 1000px) { nav.main a { display: none; } }

/* Hero: case copy left, form right; dark violet-glow background */
.hero {
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgb(var(--accent-rgb) / .18) 0%, rgb(var(--accent-rgb) / 0) 70%), var(--bg);
  color: var(--white);
  position: relative; isolation: isolate; overflow: hidden;
}
/* Faint grid behind the hero, faded out towards the sides and corners */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / .025) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .025) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 40%, #000 25%, transparent 80%);
          mask-image: radial-gradient(ellipse 75% 85% at 50% 40%, #000 25%, transparent 80%);
}
.hero .inner { padding-block: 4rem 5rem; }
@media (max-width: 700px) { .hero .inner { padding-block: 2.5rem 3.5rem; } }

.hero-top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4rem; align-items: start; }
@media (max-width: 900px) { .hero-top { grid-template-columns: minmax(0, 1fr); gap: 3rem; } }

.lede { display: grid; gap: 1.1rem; min-width: 0; }
.lede h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.04; letter-spacing: -.02em; color: var(--white); }
.lede p { color: var(--slate); max-width: 34rem; }

.form-slot { min-width: 0; scroll-margin-top: 6rem; }

/* Card wrapper for the embedded Mautic request-access form. */
.formbox {
  background: var(--block-bg); color: var(--ink-900); border: 1px solid var(--block-border);
  border-radius: var(--radius-default);
  padding: 2rem; display: grid; gap: 1.5rem; scroll-margin-top: 6rem;
}
@media (max-width: 480px) { .formbox { padding: 1.4rem; } }
.formbox header { display: grid; gap: .6rem; }
.formbox h2 { font-size: 1.6rem; line-height: 1.15; }

/* Embedded Mautic request-access form (assets generated remotely by
   generate.js — classes below are Mautic's own, styled to match the
   site instead of its default theme). */
.formbox .mauticform-innerform { display: grid; }
.formbox .mauticform-row { display: grid; gap: .3rem; margin-bottom: 1rem; }
.formbox .mauticform-label { font-size: .78rem; font-weight: 300; letter-spacing: .01em; color: var(--muted); }
.formbox .mauticform-input,
.formbox select.mauticform-selectbox:not([multiple]) {
  width: 100%; font: inherit; font-family: var(--font-body); font-size: .85rem; line-height: 1.3; color: var(--ink-900);
  background: var(--block-bg); border: 1px solid var(--field-border); border-radius: var(--radius-sm); padding: .5rem .75rem;
  transition: border-color .2s ease;
}
.formbox .mauticform-input::placeholder { color: #98a4b5; font-size: .8rem; }
.formbox .mauticform-input:focus,
.formbox select.mauticform-selectbox:not([multiple]):focus { outline: none; border: 1px solid var(--violet); }
.formbox .mauticform-errormsg { color: var(--error); font-size: .82rem; margin-top: .3rem; }
.formbox .mauticform-checkboxgrp { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.formbox .mauticform-checkboxgrp-row { order: 1; display: flex; align-items: center; margin: 0; }
.formbox .mauticform-checkboxgrp-checkbox { width: 1rem; height: 1rem; margin: 0; accent-color: var(--violet); }
.formbox .mauticform-checkboxgrp label.mauticform-label { order: 2; flex: 1 1 auto; min-width: 0; margin: 0; font-size: .88rem; color: var(--slate-600); font-weight: 400; }
.formbox .mauticform-checkboxgrp label.mauticform-label a { color: var(--violet); }
.formbox .mauticform-checkboxgrp .mauticform-errormsg { flex-basis: 100%; }
/* Multi-select fields rendered as toggle chips by assets/js/form-chips.js */
.formbox .chips-native { display: none; }
.formbox .chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.formbox .chip {
  display: inline-flex; align-items: center; gap: 0; cursor: pointer;
  font: inherit; font-size: .85rem; line-height: 1; color: var(--slate-600);
  background: var(--block-bg); border: 1px solid var(--field-border); border-radius: 999px;
  padding: .5rem .9rem;
  transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, gap .2s, padding .2s;
}
.formbox .chip:hover { border-color: var(--violet); color: var(--ink-900); }
.formbox .chip:focus-visible { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: 2px; }
.formbox .chip-check {
  display: inline-grid; place-items: center; width: 0; height: 1rem; overflow: hidden;
  opacity: 0; transform: scale(.4);
  transition: width .2s, opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.formbox .chip-check svg { width: 1rem; height: 1rem; flex: none; }
.formbox .chip.is-on {
  color: var(--white); background: var(--ink-900); border-color: var(--ink-900);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .18);
  gap: .4rem; padding-left: .8rem;
  animation: chip-pop .3s cubic-bezier(.3, 1.6, .5, 1);
}
.formbox .chip.is-on .chip-check { width: 1rem; opacity: 1; transform: scale(1); color: var(--violet-lt); }
@keyframes chip-pop { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .formbox .chip, .formbox .chip-check { transition: none; }
  .formbox .chip.is-on { animation: none; }
}
.formbox .mauticform-button-wrapper { margin-top: .5rem; }
.formbox .mauticform-button-wrapper .mauticform-button {
  width: 100%; display: block; font: inherit; font-family: var(--font-head); font-weight: 500; font-size: 1rem;
  color: var(--white); background: var(--ink-900); border: 0; border-radius: var(--radius-sm); padding: .85rem 1.4rem; cursor: pointer;
  transition: background-color .2s ease;
}
.formbox .mauticform-button-wrapper .mauticform-button:hover { background: var(--violet); }
.formbox .mauticform-message { color: var(--violet); font-weight: 500; }
/* Success panel shown by assets/js/form-submit.js in place of the form */
.formbox.is-sent form { display: none; }
.form-success { display: grid; gap: .75rem; justify-items: start; padding-top: .5rem; outline: none; animation: form-success-in .5s cubic-bezier(.2, .7, .2, 1); }
.form-success-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--white); background: var(--ink-900); box-shadow: 0 0 0 5px rgb(var(--accent-rgb) / .15); }
.form-success-icon svg { width: 1.4rem; height: 1.4rem; }
.form-success h3 { font-size: 1.3rem; }
.form-success p { color: var(--muted); }
@keyframes form-success-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .form-success { animation: none; } }
.formbox .mauticform-error { color: var(--error); font-size: .9rem; }
.formbox .mauticform-message:empty, .formbox .mauticform-error:empty { display: none; }

/* Row of 4 cards below the lede/form, same hero background */
.benefits { margin-top: 3rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0; }
.benefit { border: 1px solid var(--border); background: rgba(255,255,255,.04); border-radius: var(--radius-default); padding: 2rem; display: grid; gap: .5rem; align-content: start; }
.benefit h3 { font-size: 1.1rem; color: var(--white); }
.benefit p { color: var(--slate); }
.benefit a { color: var(--violet-lt); text-underline-offset: 2px; }

/* Sections */
section.block { padding-block: 5rem; scroll-margin-top: 5rem; }
@media (max-width: 700px) { section.block { padding-block: 3.5rem; } }
.block-head { display: grid; gap: .8rem; margin-bottom: 2.5rem; max-width: 46rem; }
.block-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.02em; }
.block-head p { color: var(--muted); }

/* Pillars band — dark, violet glow */
.band {
  background: radial-gradient(120% 140% at 85% 0%, rgb(var(--accent-rgb) / .32) 0%, rgb(var(--accent-rgb) / 0) 60%), var(--bg);
  color: var(--white);
}
.band .eyebrow { color: var(--violet-lt); }
.band .block-head p { color: var(--slate); }
.pillars {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  background: rgba(255,255,255,.04); border-radius: var(--radius-default); overflow: hidden;
}
@media (max-width: 1000px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pillars { grid-template-columns: minmax(0, 1fr); } }
/* Hairline dividers between cells; the container clips the ones on its outer edges */
.pillar { padding: 2.25rem 1.5rem; display: grid; gap: .6rem; align-content: start; box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border); }
.pillar .no { font-family: var(--font-head); font-size: .72rem; color: var(--violet-lt); letter-spacing: .3px; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: 1.75rem; }
.pillar .no span:last-child {
  font-variant-numeric: tabular-nums; color: var(--white); text-transform: none; white-space: nowrap;
  padding: .15rem .55rem; border-radius: 999px; line-height: 1.2;
  background: rgb(var(--accent-rgb) / .22); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .45);
}
.pillar h3 { font-size: 1.2rem; line-height: 1.2; color: var(--white); }
.pillar p { color: var(--slate); }
.notcovered { margin-top: 1.5rem; color: var(--slate); display: flex; gap: .6rem; align-items: baseline; }

/* Sourcing — light lavender backdrop, white card */
.sourcing { background: var(--page-bg-custom); }
/* Faint grid behind a light section, faded out towards its edges */
.bg-grid { position: relative; isolation: isolate; overflow: hidden; }
.bg-grid::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgb(18 31 54 / .04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(18 31 54 / .04) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 50%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 70% 75% at 50% 50%, #000 30%, transparent 85%);
}
.sourcing .inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; align-items: center; }
@media (max-width: 900px) { .sourcing .inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
.sourcing .block-head { margin-bottom: 0; }
.sample { background: var(--block-bg); border: 1px solid var(--block-border); border-radius: var(--radius-default); display: grid; overflow: hidden; }
.sample p { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: 2.0rem 1.5rem; border-bottom: 1px solid var(--border3); }
.sample p:last-of-type { border-bottom: 0; }
@media (max-width: 480px) { .sample p { grid-template-columns: minmax(0, 1fr); gap: .5rem; padding: 1.25rem; } }
/* Tags share one fixed left column, so they line up down the box */
.sample .tag { justify-self: start; align-self: start; }
.tag.reg { color: var(--reg); background: var(--reg-bg); }
.tag.ep { color: var(--ep); background: var(--ep-bg); }
.tag.plat { color: var(--plat); background: var(--plat-bg); }
.tag {
  border-radius: 999px; padding: .4rem .8rem; letter-spacing: .06em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
}
.tag::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; flex: none; }
.sample .caption { padding: .75rem 1.5rem; background: var(--block-bg); color: var(--muted); font-size: .82rem; border-top: 1px solid var(--block-border); }

.steps-wrap { background: var(--page-bg-custom); }
.steps {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: step;
  background: var(--block-bg); border: 1px solid var(--block-border); border-radius: var(--radius-default); overflow: hidden;
}
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .steps { grid-template-columns: minmax(0, 1fr); } }
/* Hairline dividers between cells; the container clips the ones on its outer edges */
.steps li { box-shadow: 1px 0 0 var(--block-border), 0 1px 0 var(--block-border); padding: 1.75rem; display: grid; gap: .6rem; align-content: start; counter-increment: step; }
.steps li::before { content: "0" counter(step); font-family: var(--font-head); font-weight: 500; font-size: 2.4rem; line-height: 1; color: var(--violet); }
.steps h3 { font-size: 1.2rem; }
.steps p { color: var(--muted); }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .86em; background: var(--page-bg-custom); border: 1px solid var(--block-border); border-radius: var(--radius-default); padding: .05rem .3rem; overflow-wrap: anywhere; }
.steps code { background: var(--white); }

.evidence { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; background: transparent; }
.evidence div { padding: 0 1.75rem; display: grid; gap: .25rem; align-content: start; }
.evidence b { font-family: var(--font-head); font-weight: 500; }
.evidence span { color: var(--muted); font-size: .92rem; }
@media (max-width: 800px) { .evidence { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } }

/* Data — plain white, violet top border */
.datagrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--block-border); border-radius: var(--radius-default); overflow: hidden;
}
@media (max-width: 900px) { .datagrid { grid-template-columns: minmax(0, 1fr); } }
/* Hairline dividers between cells; the container clips the ones on its outer edges */
.datacol { padding: 2rem 1.75rem; display: grid; gap: .7rem; align-content: start; box-shadow: 1px 0 0 var(--block-border), 0 1px 0 var(--block-border); }
.datacol .who { font-family: var(--font-head); font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--muted); }
.datacol:last-child .who { color: var(--violet); }
.datacol h3 { font-size: 1.3rem; }
.datacol p { color: var(--ink-900); font-weight: 300; }

.use .block-head { margin-bottom: 2rem; }
.uses {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  background: var(--block-bg); border: 1px solid var(--block-border); border-radius: var(--radius-default); overflow: hidden;
}
@media (max-width: 800px) { .uses { grid-template-columns: minmax(0, 1fr); } }
/* Hairline dividers between cells; the container clips the ones on its outer edges */
.uses li { box-shadow: 1px 0 0 var(--block-border), 0 1px 0 var(--block-border); padding: 2.5rem 1.75rem; display: grid; gap: .4rem; align-content: start; }
.uses b { font-family: var(--font-head); font-weight: 500; font-size: 1.1rem; }
.uses span { color: var(--muted); font-size: .95rem; }
.caveat { margin-top: 1.5rem; color: var(--muted); max-width: 52rem; }

footer.site { background: var(--bg); color: var(--slate); font-size: .9rem; }
footer.site .inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; padding-block: 3rem; align-items: end; }
footer.site .mark img { height: 50px; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
footer.site a { text-decoration: none; color: var(--slate); }

/* Standard link button (einar.partners .btn-base): text + arrow icon, faint
   underline at rest that fills in on hover. */
.btn-base {
  display: inline-flex; align-items: center; gap: .5rem; position: relative; cursor: pointer;
  font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1.2;
  color: var(--white); text-decoration: none;
  transition: color .3s;
}
.btn-base::before, .btn-base::after {
  content: ""; position: absolute; bottom: -4px; left: 0; right: 0; height: 1px; display: block;
  background: currentColor;
}
.btn-base::before { opacity: .1; }
.btn-base::after { transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.btn-base:hover::after, .btn-base:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.btn-base .btn-icon {
  width: .75em; height: .75em; flex: none; background: currentColor;
  -webkit-mask: url(assets/images/arrow-btn.svg) center / contain no-repeat;
          mask: url(assets/images/arrow-btn.svg) center / contain no-repeat;
  transition: transform .3s;
}
.btn-base:hover .btn-icon, .btn-base:focus-visible .btn-icon { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .btn-base, .btn-base::after, .btn-base .btn-icon { transition: none; } }
/* Footer: muted at rest, white on hover */
footer.site a.btn-base { color: var(--slate); }
footer.site a.btn-base:hover, footer.site a.btn-base:focus-visible { color: var(--white); }
footer.site .legal { flex-basis: 100%; border-top: 1px solid var(--border); padding-top: 1.25rem; color: var(--muted); }

.legal-page { max-width: 46rem; margin: 0 auto; padding: 3rem var(--space-4) 5rem; }
.legal-page h1 { font-size: 2.2rem; margin-bottom: 1rem; }
.legal-page h2 { font-size: 1.3rem; margin: 2rem 0 .5rem; }
.legal-page p, .legal-page li { margin-bottom: .6rem; }
.legal-page a { color: var(--violet); }
.legal-page .note { background: var(--page-bg-custom); border: 1px solid var(--block-border); border-radius: var(--radius-default); padding: 1rem; margin-bottom: 2rem; }

/* Scroll reveal. Only active when assets/js/reveal.js has run (html.js),
   so content stays visible without JavaScript. */
/* Hero items are pre-hidden: the form embed blocks parsing, so the hero can
   paint before reveal.js tags them. */
.js .reveal,
.js .hero .lede > *:not(.is-visible),
.js .hero .formbox:not(.is-visible) {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .hero .lede > *:not(.is-visible),
  .js .hero .formbox:not(.is-visible) { opacity: 1; transform: none; transition: none; }
}