@import url("fonts.css");

:root {
  --dp-color-ground: #fcfcfd;
  --dp-color-ink: #16191f;
  --dp-color-ink-secondary: #454c58;
  --dp-color-ground-muted: #f3f4f6;
  --dp-color-rule: #dde0e6;
  --dp-color-accent: #074ce0;
  --dp-color-field: #16191f;
  --dp-color-on-field: #fcfcfd;
  --dp-color-on-field-secondary: #d0d4dd;
  --dp-color-panel: #ffffff;
  --dp-color-on-accent: #ffffff;
  --dp-typography-fallback: sans-serif;
  --dp-typography-body: 16px;
  --dp-typography-interface: 15px;
  --dp-typography-small: 14px;
  --dp-typography-metadata: 13px;
  --dp-typography-label: 12px;
  --dp-typography-body-leading: 1.6;
  --dp-spacing-grid-gap: 24px;
  --dp-radius-panel: 12px;
  --dp-border-hairline: 1px;
  --dp-motion-interaction: 160ms;
  --dp-motion-easing: ease-out;

  --font-display: "Host Grotesk", var(--dp-typography-fallback);
  --font-body: "Instrument Sans", var(--dp-typography-fallback);
  --max: 1160px;
  --shadow: 0 1px 2px rgba(22,25,31,.04), 0 8px 24px -12px rgba(22,25,31,.14);
  --field-rule: rgba(252,252,253,.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--dp-color-ground); color: var(--dp-color-ink);
  font: 400 var(--dp-typography-body)/var(--dp-typography-body-leading) var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); line-height: 1.04; letter-spacing: -.035em; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); line-height: 1.08; }
h3 { font-size: 1.2rem; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
a { color: inherit; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 760px) { .wrap { padding: 0 32px; } }
section { padding: 96px 0; }
.muted { background: var(--dp-color-ground-muted); }
.field { background: var(--dp-color-field); color: var(--dp-color-on-field); }
.eyebrow { font-size: var(--dp-typography-label); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--dp-color-accent); margin-bottom: 14px; }
.field .eyebrow { color: #8fb0ff; }
.lead { font-size: 1.13rem; color: var(--dp-color-ink-secondary); max-width: 680px; }
.field .lead, .field p { color: var(--dp-color-on-field-secondary); }
.fine { font-size: var(--dp-typography-metadata); color: var(--dp-color-ink-secondary); }

/* Placeholder that must be filled in before launch; deliberately loud. */
mark.todo { background: #fff1a8; color: #16191f; padding: 0 4px; border-radius: 3px; }

:focus-visible { outline: 2px solid var(--dp-color-accent); outline-offset: 3px; border-radius: 4px; }
.field :focus-visible { outline-color: #8fb0ff; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--dp-color-accent); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 20; }
.skip:focus { top: 12px; }

/* nav */
header.nav { position: sticky; top: 0; z-index: 10; background: rgba(252,252,253,.9); backdrop-filter: blur(10px); border-bottom: var(--dp-border-hairline) solid var(--dp-color-rule); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { width: 34px; height: 34px; flex: none; display: block; }
.logo-word, .foot-brand { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; letter-spacing: -.02em; white-space: nowrap; }
.logo-word { color: #6b7280; }
.logo-word b, .foot-brand b { font-weight: 700; letter-spacing: -.04em; color: var(--dp-color-ink); }
.foot-brand b { color: var(--dp-color-on-field); }
.nav ul { display: none; list-style: none; gap: 28px; margin: 0; padding: 0; font-size: var(--dp-typography-interface); }
.nav ul a { text-decoration: none; color: var(--dp-color-ink-secondary); transition: color var(--dp-motion-interaction) var(--dp-motion-easing); }
.nav ul a:hover, .nav ul a[aria-current="page"] { color: var(--dp-color-ink); }
.nav ul a[aria-current="page"] { font-weight: 600; }
@media (min-width: 860px) { .nav ul { display: flex; } }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 22px;
  border-radius: 8px; font: 600 var(--dp-typography-interface)/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  border: var(--dp-border-hairline) solid transparent;
  transition: transform var(--dp-motion-interaction) var(--dp-motion-easing), background-color var(--dp-motion-interaction) var(--dp-motion-easing), border-color var(--dp-motion-interaction) var(--dp-motion-easing);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--dp-color-accent); color: var(--dp-color-on-accent); box-shadow: 0 6px 16px -8px rgba(7,76,224,.6); }
.btn-primary:hover { background: #0640bd; }
.btn-ghost { background: var(--dp-color-panel); border-color: var(--dp-color-rule); color: var(--dp-color-ink); }
.btn-ghost:hover { background: var(--dp-color-ground-muted); border-color: #c5c9d2; }
.btn-sm { min-height: 40px; padding: 9px 16px; font-size: var(--dp-typography-small); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* hero */
.hero { padding: 88px 0 0; }
.hero-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 56px; align-items: center; }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 80px; border-top: var(--dp-border-hairline) solid var(--dp-color-rule); border-bottom: var(--dp-border-hairline) solid var(--dp-color-rule); }
.fact { padding: 24px 24px 24px 0; }
.fact + .fact { padding-left: 24px; border-left: var(--dp-border-hairline) solid var(--dp-color-rule); }
.fact b { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; }
.fact span { font-size: var(--dp-typography-small); color: var(--dp-color-ink-secondary); }

/* page header (inner pages) */
.page-head { padding: 80px 0 64px; border-bottom: var(--dp-border-hairline) solid var(--dp-color-rule); }
.page-head h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); max-width: 820px; }

/* cards & grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dp-spacing-grid-gap); margin-top: 44px; }
.card { background: var(--dp-color-panel); border: var(--dp-border-hairline) solid var(--dp-color-rule); border-radius: var(--dp-radius-panel); padding: 28px; box-shadow: var(--shadow); }
.card p { color: var(--dp-color-ink-secondary); margin: 0; font-size: var(--dp-typography-interface); }
.icon { width: 40px; height: 40px; border-radius: 10px; background: #e8efff; color: var(--dp-color-accent); display: grid; place-items: center; margin-bottom: 20px; }
.icon svg { width: 20px; height: 20px; }

.split { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; }

/* heading beside a two-column list */
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.pair { padding: 22px 0; border-top: var(--dp-border-hairline) solid var(--dp-color-rule); }
.pair h3 { font-size: 1.08rem; margin-bottom: 6px; }
.pair p { color: var(--dp-color-ink-secondary); font-size: var(--dp-typography-interface); margin: 0; }
.field .pair { border-color: var(--field-rule); }

/* checklist */
.checks { margin: 12px 0 0; padding: 0; list-style: none; }
.checks li { padding: 12px 0 12px 30px; position: relative; border-top: var(--dp-border-hairline) solid var(--dp-color-rule); color: var(--dp-color-ink-secondary); font-size: var(--dp-typography-interface); }
.checks li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 14px; height: 8px; border-left: 2px solid var(--dp-color-accent); border-bottom: 2px solid var(--dp-color-accent); transform: rotate(-45deg); }

/* comparison */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dp-spacing-grid-gap); margin-top: 44px; }
.compare .card { padding: 32px; position: relative; }
.compare .card.featured { border-color: var(--dp-color-accent); box-shadow: 0 0 0 1px var(--dp-color-accent), var(--shadow); }
.badge { position: absolute; top: -12px; left: 32px; background: var(--dp-color-accent); color: var(--dp-color-on-accent); font-size: var(--dp-typography-label); font-weight: 600; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; }
.compare dl { margin: 16px 0 0; }
.compare dt { font-size: var(--dp-typography-label); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--dp-color-ink-secondary); padding-top: 14px; border-top: var(--dp-border-hairline) solid var(--dp-color-rule); }
.compare dd { margin: 4px 0 14px; font-size: var(--dp-typography-interface); }

/* process (dark field) */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dp-spacing-grid-gap); margin-top: 52px; list-style: none; padding: 0; position: relative; }
.steps::before { content: ""; position: absolute; top: 20px; left: 20px; right: 12%; height: 1px; background: var(--field-rule); }
.step { position: relative; }
.step .num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--dp-color-field); border: 1px solid rgba(252,252,253,.3); font-family: var(--font-display); font-weight: 700; font-size: var(--dp-typography-small); margin-bottom: 22px; position: relative; }
.step:first-child .num { background: var(--dp-color-accent); border-color: var(--dp-color-accent); }
.step p { font-size: var(--dp-typography-interface); }

.tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--field-rule); border: 1px solid var(--field-rule); border-radius: var(--dp-radius-panel); overflow: hidden; }
.track { background: var(--dp-color-field); padding: 24px 20px; }
.track b { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--dp-color-on-field); margin-bottom: 6px; }
.track span { font-size: var(--dp-typography-small); color: var(--dp-color-on-field-secondary); }
.note { font-size: var(--dp-typography-metadata); margin-top: 14px; }

/* faq */
.faq details { border-bottom: var(--dp-border-hairline) solid var(--dp-color-rule); }
.faq details:first-child { border-top: var(--dp-border-hairline) solid var(--dp-color-rule); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--dp-color-rule); color: var(--dp-color-accent); font: 400 1.25rem/1 var(--font-body); transition: transform var(--dp-motion-interaction) var(--dp-motion-easing); }
.faq details[open]:not(.closing) summary::after { transform: rotate(45deg); }
.faq details p { color: var(--dp-color-ink-secondary); margin: -4px 0 20px; max-width: 600px; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
form { background: var(--dp-color-panel); color: var(--dp-color-ink); border-radius: var(--dp-radius-panel); padding: 28px; display: grid; gap: 16px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { display: grid; gap: 6px; font-size: var(--dp-typography-small); font-weight: 500; }
input, select, textarea { font: 400 var(--dp-typography-body) var(--font-body); padding: 11px 13px; border-radius: 8px; border: var(--dp-border-hairline) solid var(--dp-color-rule); background: var(--dp-color-ground); color: var(--dp-color-ink); width: 100%; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--dp-color-accent); outline-offset: 0; border-color: var(--dp-color-accent); }
textarea { min-height: 110px; resize: vertical; }
.field form .fine { margin: 0; color: var(--dp-color-ink-secondary); }
form .fine a { color: var(--dp-color-accent); }
.field form .form-msg, .form-msg { font-size: var(--dp-typography-small); color: var(--dp-color-accent); display: none; margin: 0; }
.form-msg.show { display: block; animation: fade-in 300ms var(--ease-out, ease); }
.form-msg.err { color: #b42318; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form { position: relative; }
.btn.loading { color: transparent !important; pointer-events: none; }
.btn.loading::after, .btn-primary.loading::after { content: ""; position: absolute; inset: 0; margin: auto; transform: none !important; transition: none; background: none; display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin 700ms linear infinite; }
.form-done { background: var(--dp-color-panel); color: var(--dp-color-ink); border-radius: var(--dp-radius-panel); padding: 40px 28px; display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px; animation: pop-in 420ms var(--ease-spring, ease) both; outline: none; }
.form-done svg { width: 64px; height: 64px; margin-bottom: 6px; }
.form-done circle { fill: none; stroke: #0a7a4b; stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw 600ms var(--ease-out, ease) 120ms forwards; transform: rotate(-90deg); transform-origin: center; }
.form-done path { fill: none; stroke: #0a7a4b; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 420ms var(--ease-out, ease) 560ms forwards; }
.form-done h3 { margin: 0; font-size: 1.5rem; }
.form-done p { margin: 0 0 8px; max-width: 34ch; color: var(--dp-color-ink-secondary); }
@keyframes spin { to { rotate: 360deg; } }

/* legal documents */
.doc { display: grid; grid-template-columns: 220px 1fr; gap: 56px; padding: 64px 0 96px; align-items: start; }
.toc { position: sticky; top: 96px; font-size: var(--dp-typography-small); }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.toc li { counter-increment: t; }
.toc a { display: block; padding: 6px 0; color: var(--dp-color-ink-secondary); text-decoration: none; }
.toc a::before { content: counter(t) ". "; color: var(--dp-color-accent); }
.toc a:hover { color: var(--dp-color-ink); }
.prose { max-width: 720px; }
.prose h2 { font-size: 1.45rem; line-height: 1.2; margin: 48px 0 14px; scroll-margin-top: 96px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.08rem; margin: 28px 0 8px; }
.prose p, .prose li { color: var(--dp-color-ink-secondary); }
.prose strong { color: var(--dp-color-ink); }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1em; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--dp-color-accent); }
.prose table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: var(--dp-typography-small); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-top: var(--dp-border-hairline) solid var(--dp-color-rule); color: var(--dp-color-ink-secondary); }
.prose th { color: var(--dp-color-ink); font-weight: 600; }
.callout { background: var(--dp-color-ground-muted); border: var(--dp-border-hairline) solid var(--dp-color-rule); border-radius: var(--dp-radius-panel); padding: 18px 20px; margin: 0 0 24px; font-size: var(--dp-typography-interface); }
.callout p:last-child { margin: 0; }

/* footer */
footer { background: var(--dp-color-field); color: var(--dp-color-on-field-secondary); font-size: var(--dp-typography-small); }
footer .wrap { padding-top: 56px; padding-bottom: 40px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--field-rule); }
.foot-grid h4 { margin: 0 0 12px; font: 600 var(--dp-typography-label)/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .1em; color: var(--dp-color-on-field); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 8px; }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { color: var(--dp-color-on-field); text-decoration: underline; }
.foot-brand { color: #8b93a1; margin-bottom: 8px; }
.foot-base { padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: var(--dp-typography-metadata); }
footer mark.todo { font-size: inherit; }

/* responsive */
@media (max-width: 1050px) {
  .hero-grid, .split, .contact-grid, .doc { gap: 36px; }
  .grid-3, .compare, .steps { gap: 18px; }
  .doc { grid-template-columns: 180px 1fr; }
}
@media (max-width: 760px) {
  section { padding: 72px 0; }
  .hero { padding-top: 56px; }
  .page-head { padding: 56px 0 44px; }
  .hero-grid, .compare, .split, .contact-grid, .doc { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; margin-top: 56px; }
  .fact, .fact + .fact { padding: 20px 16px 20px 0; border-left: 0; }
  .fact:nth-child(even) { padding-left: 16px; border-left: var(--dp-border-hairline) solid var(--dp-color-rule); }
  .fact:nth-child(n+3) { border-top: var(--dp-border-hairline) solid var(--dp-color-rule); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; gap: 8px; }
  .steps::before { top: 20px; bottom: 20px; left: 20px; right: auto; width: 1px; height: auto; }
  .step { display: grid; grid-template-columns: 40px 1fr; column-gap: 18px; }
  .step .num { grid-row: span 2; margin: 0; }
  .toc { position: static; border-bottom: var(--dp-border-hairline) solid var(--dp-color-rule); padding-bottom: 16px; }
  .doc { padding-top: 40px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .grid-3, .tracks, .row, .pairs { grid-template-columns: 1fr; }
  .card, form, .compare .card { padding: 22px; }
}
/* ---------- Micro-animations ---------- */
:root { --ease-out: cubic-bezier(.2,.7,.2,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); interpolate-size: allow-keywords; }

/* Sticky header gains a shadow once the page scrolls */
header.nav { transition: box-shadow 240ms var(--ease-out), background-color 240ms var(--ease-out); }
header.nav.scrolled { box-shadow: 0 6px 20px -14px rgba(22,25,31,.35); }

/* Logo: bars bounce on hover */
/* Lodestar mark: on hover the star swings like a compass needle and settles on north */
.logo-mark .needle { transform-box: view-box; transform-origin: 16px 16px; }
.logo:hover .logo-mark .needle { animation: compass 1100ms cubic-bezier(.3,.6,.3,1); }
@keyframes compass { 0% { rotate: 0deg; } 22% { rotate: -38deg; } 48% { rotate: 22deg; } 70% { rotate: -9deg; } 86% { rotate: 3deg; } 100% { rotate: 0deg; } }

/* Underlines that grow from the left */
.nav ul a, .foot-grid a, .prose a, form .fine a {
  text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 220ms var(--ease-out), color var(--dp-motion-interaction) var(--dp-motion-easing);
}
.prose a, form .fine a { background-size: 100% 1px; }
.nav ul a:hover, .nav ul a[aria-current="page"], .foot-grid a:hover { background-size: 100% 1px; text-decoration: none; }
.prose a:hover, form .fine a:hover { background-size: 0 1px; }

/* Buttons: lift, press, and a light sheen on the primary */
.btn { position: relative; overflow: hidden; }
.btn:active { transform: translateY(0) scale(.97); transition-duration: 80ms; }
.btn-primary:hover { box-shadow: 0 10px 22px -10px rgba(7,76,224,.7); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transition: transform 600ms var(--ease-out);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn.sent { background: #0a7a4b; }

/* Cards lift; icon tiles flip to blue */
.card { transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out); }
.grid-3 .card:hover, .compare .card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(22,25,31,.04), 0 18px 36px -16px rgba(22,25,31,.22); }
.icon { transition: transform 320ms var(--ease-spring), background-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.card:hover .icon { transform: rotate(-8deg) scale(1.1); background: var(--dp-color-accent); color: #fff; }
.compare .card.featured .badge { transition: transform 320ms var(--ease-spring); }
.compare .card.featured:hover .badge { transform: translateY(-3px); }

/* Ruled items: accent line sweeps across the top rule */
.pair, .fact { position: relative; }
.pair::before, .fact::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--dp-color-accent);
  transform: scaleX(0); transform-origin: left; transition: transform 360ms var(--ease-out);
}
.fact + .fact::before { left: 24px; width: calc(100% - 24px); }
.pair:hover::before, .fact:hover::before { transform: scaleX(1); }
.pair h3 { transition: color 200ms var(--ease-out); }
.pair:hover h3 { color: var(--dp-color-accent); }

/* Dark tiles brighten */
.track { transition: background-color 220ms var(--ease-out); }
.track b { display: inline-block; transition: transform 320ms var(--ease-spring); }
.track:hover { background: #20242d; }
.track:hover b { transform: translateY(-3px) scale(1.12); }

/* FAQ: smooth open/close where supported */
.faq summary { transition: color 180ms var(--ease-out); }
.faq summary:hover { color: var(--dp-color-accent); }
.faq summary::after { transition: transform 260ms var(--ease-spring), background-color 200ms, color 200ms, border-color 200ms; }
.faq summary:hover::after, .faq details[open]:not(.closing) summary::after { background: var(--dp-color-accent); color: #fff; border-color: var(--dp-color-accent); }

/* Form fields */
label { transition: color 180ms var(--ease-out); }
label:focus-within { color: var(--dp-color-accent); }
input, select, textarea { transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background-color 180ms var(--ease-out); }
input:hover, select:hover, textarea:hover { border-color: #c5c9d2; }
input:focus-visible, select:focus-visible, textarea:focus-visible { background: #fff; box-shadow: 0 0 0 4px rgba(7,76,224,.12); }
.field form .form-msg.show, .form-msg.show { display: block; animation: pop-in 320ms var(--ease-spring); }

/* Legal contents: highlight the section being read */
.toc a { transition: color 180ms var(--ease-out), transform 220ms var(--ease-out); }
.toc a:hover { transform: translateX(3px); }
.toc a.active { color: var(--dp-color-ink); font-weight: 600; transform: translateX(4px); }

/* Process: rule draws across, numbers light up in turn */
.motion .steps::before { transform: scaleX(0); transform-origin: left; transition: transform 1100ms var(--ease-out) 150ms; }
.motion .steps.in::before { transform: none; }
.step .num { transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out), transform 360ms var(--ease-spring); }
.motion .steps.in .step .num { background: var(--dp-color-accent); border-color: var(--dp-color-accent); }
.motion .steps.in .step:nth-child(2) .num { transition-delay: 400ms; }
.motion .steps.in .step:nth-child(3) .num { transition-delay: 700ms; }
.motion .steps.in .step:nth-child(4) .num { transition-delay: 1000ms; }
.step:hover .num { transform: scale(1.12); }
@media (max-width: 760px) {
  .motion .steps::before { transform: scaleY(0); transform-origin: top; }
}


/* Scroll reveal (only when JS is on and motion is allowed) */
.motion .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: var(--d, 0ms); }
.motion .reveal.in { opacity: 1; transform: none; }
/* revealed cards keep their own hover transitions */
.motion .card.reveal.in { transition: opacity 600ms var(--ease-out) var(--d, 0ms), transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out); }

.motion .grid-3 .card.reveal.in:hover, .motion .compare .card.reveal.in:hover { transform: translateY(-4px); }

@keyframes pop-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes flow { to { stroke-dashoffset: -20; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .86; } }
@keyframes blip { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .7; } }

/* ---------- Mobile menu ---------- */
.nav-end { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; width: 42px; height: 42px; border-radius: 8px; border: 1px solid var(--dp-color-rule); background: var(--dp-color-panel); cursor: pointer; place-items: center; padding: 0; transition: background-color 180ms var(--ease-out); }
.menu-toggle:hover { background: var(--dp-color-ground-muted); }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--dp-color-ink); transition: transform 320ms var(--ease-spring), background-color 200ms; }
.menu-toggle span { position: relative; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { transform: translateY(-6px); }
.menu-toggle span::after { transform: translateY(6px); }
.nav.open .menu-toggle span { background: transparent; }
.nav.open .menu-toggle span::before { transform: rotate(45deg); }
.nav.open .menu-toggle span::after { transform: rotate(-45deg); }
.nav .menu-cta { display: none; }
@media (max-width: 859px) {
  .menu-toggle { display: inline-grid; }
  .nav ul {
    display: grid; position: absolute; left: 0; right: 0; top: 100%; gap: 0; padding: 4px 16px 20px;
    background: var(--dp-color-ground); border-bottom: 1px solid var(--dp-color-rule);
    box-shadow: 0 18px 30px -20px rgba(22,25,31,.35);
    clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden;
    transition: clip-path 340ms var(--ease-out), opacity 220ms var(--ease-out), visibility 0s linear 340ms;
  }
  .nav.open ul { clip-path: inset(0 0 -40px 0); opacity: 1; visibility: visible; transition: clip-path 420ms var(--ease-out), opacity 220ms var(--ease-out), visibility 0s; }
  .nav ul li { border-top: 1px solid var(--dp-color-rule); opacity: 0; transform: translateY(-8px); transition: opacity 260ms var(--ease-out), transform 360ms var(--ease-out); }
  .nav ul li:first-child { border-top: 0; }
  .nav.open ul li { opacity: 1; transform: none; }
  .nav.open ul li:nth-child(2) { transition-delay: 40ms; }
  .nav.open ul li:nth-child(3) { transition-delay: 80ms; }
  .nav.open ul li:nth-child(4) { transition-delay: 120ms; }
  .nav.open ul li:nth-child(5) { transition-delay: 160ms; }
  .nav ul a { display: block; padding: 14px 0; font-size: 17px; color: var(--dp-color-ink); background: none; transition: transform 200ms var(--ease-out); }
  .nav ul a:hover { transform: translateX(4px); }
  .nav .menu-cta { display: block; border-top: 0; padding-top: 12px; }
  .nav .menu-cta a.btn { display: flex; padding: 12px 22px; color: var(--dp-color-on-accent); background: var(--dp-color-accent); }
  .nav .menu-cta a.btn:hover { transform: translateY(-1px); }
}
@media (max-width: 480px) {
  .nav-end > .btn { display: none; }
}

/* ---------- Animated dropdown for the business-type picker (where the browser supports it) ---------- */
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
  select::picker-icon { color: var(--dp-color-ink-secondary); transition: rotate 260ms var(--ease-out); }
  select:open::picker-icon { rotate: 180deg; }
  ::picker(select) {
    border: 1px solid var(--dp-color-rule); border-radius: 10px; padding: 6px; margin-top: 6px; background: var(--dp-color-panel);
    box-shadow: 0 18px 40px -18px rgba(22,25,31,.35);
    opacity: 0; translate: 0 -8px;
    transition: opacity 200ms var(--ease-out), translate 280ms var(--ease-out), overlay 280ms allow-discrete, display 280ms allow-discrete;
  }
  ::picker(select):popover-open { opacity: 1; translate: 0 0; }
  @starting-style { ::picker(select):popover-open { opacity: 0; translate: 0 -8px; } }
  option { padding: 10px 12px; border-radius: 6px; font: inherit; color: var(--dp-color-ink); transition: background-color 150ms var(--ease-out); }
  option:hover, option:focus-visible { background: var(--dp-color-ground-muted); outline: none; }
  option:checked { background: #e8efff; color: var(--dp-color-accent); font-weight: 600; }
  option::checkmark { color: var(--dp-color-accent); }
}

/* ---------- Atmosphere ---------- */
/* Dark sections: a soft light follows the pointer */
.field { background-image: radial-gradient(640px circle at var(--gx, -999px) var(--gy, -999px), rgba(61,123,255,.14), transparent 45%); }
/* Inner page headers: dot grid */
.page-head { position: relative; isolation: isolate; overflow: hidden; }
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(22,25,31,.10) 1px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 50% 90% at 85% 50%, #000 15%, transparent 70%);
          mask-image: radial-gradient(ellipse 50% 90% at 85% 50%, #000 15%, transparent 70%);
}
/* Footer: oversized wordmark */
footer { overflow: hidden; }
footer::after {
  content: "Lodestar"; display: block; text-align: center; pointer-events: none; user-select: none;
  font: 700 clamp(84px, 20vw, 300px)/.8 var(--font-display); letter-spacing: -.06em; margin: 8px 0 -.06em;
  background: linear-gradient(180deg, rgba(61,123,255,.38), rgba(61,123,255,0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .nav ul, .nav ul li, .nav ul a { transition: none !important; }
  .btn:hover, .btn:active, .card:hover, .card:hover .icon, .track:hover b, .step:hover .num, .toc a:hover, .toc a.active { transform: none !important; }
  .btn-primary::after { display: none; }
  .btn.loading::after { display: block !important; }
  .form-done circle, .form-done path { stroke-dashoffset: 0; }
}

/* instagram link */
a.ig { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
a.ig svg { flex: none; }
.ig-line { margin-top: 16px; color: var(--dp-color-on-field-secondary); }
.ig-line a.ig { color: var(--dp-color-on-field); font-weight: 600; text-decoration: none; }
.ig-line a.ig:hover { text-decoration: underline; }

/* Team "Read more" expander */
.person .more { margin-top: 12px; }
.person .more > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font: 600 var(--dp-typography-metadata) var(--font-body); color: var(--dp-color-accent); user-select: none; }
.person .more > summary::-webkit-details-marker { display: none; }
.person .more > summary::after { content: "›"; font-size: 1.2em; line-height: 0; transition: transform .2s ease; }
.person .more[open] > summary::after { transform: rotate(90deg); }
.person .more > summary:hover { text-decoration: underline; }
.person .more-body { margin-top: 12px; display: grid; gap: 10px; }
.person .more-body p { font-size: var(--dp-typography-metadata); line-height: 1.6; color: var(--dp-color-ink-secondary); margin: 0; }
.person .more-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.person .more-links a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: #e8efff; color: var(--dp-color-accent); text-decoration: none; font-weight: 600; }
.person .more-links a::after { content: "↗"; font-size: .85em; }
.person .more-links a:hover { background: #d6e3ff; }
@media (prefers-reduced-motion: reduce) { .person .more > summary::after { transition: none; } }