/* ==========================================================================
   Hbeich Legal, design system
   One typeface, one accent, a lot of white space.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  --canvas:      #ffffff;
  --surface:     #f6f6f7;
  --panel:       #f1f1f3;
  --panel-hi:    #fafafb;
  --divider:     rgba(255, 255, 255, 0.85);
  --lift:        0 1px 2px rgba(17, 17, 19, 0.04), 0 10px 28px -14px rgba(17, 17, 19, 0.16);
  --lift-hi:     0 2px 4px rgba(17, 17, 19, 0.05), 0 18px 40px -16px rgba(17, 17, 19, 0.22);
  --surface-2:   #101010;
  --ink:         #111113;
  --ink-soft:    #1d1d1f;
  --muted:       #6e6e73;
  --muted-2:     #8a8a8f;
  --line:        rgba(0, 0, 0, 0.09);
  --line-strong: rgba(0, 0, 0, 0.16);
  --accent:      #1d6b57;
  --accent-ink:  #ffffff;
  --on-dark:     #f5f5f7;
  --on-dark-mut: #8e8e93;

  --shell: 1120px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(80px, 11vw, 168px);
  --radius: 16px;
  --radius-lg: 26px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
    Arial, sans-serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas:      #000000;
    --surface:     #0c0c0d;
    --panel:       #141417;
    --panel-hi:    #1e1e23;
    --divider:     rgba(255, 255, 255, 0.07);
    --lift:        0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px -14px rgba(0, 0, 0, 0.7);
    --lift-hi:     0 2px 4px rgba(0, 0, 0, 0.5), 0 18px 40px -16px rgba(0, 0, 0, 0.8);
    --surface-2:   #101012;
    --ink:         #f5f5f7;
    --ink-soft:    #ededf0;
    --muted:       #8e8e93;
    --muted-2:     #6e6e73;
    --line:        rgba(255, 255, 255, 0.12);
    --line-strong: rgba(255, 255, 255, 0.22);
    --accent:      #4fb094;
    --accent-ink:  #0a1726;
    color-scheme: dark;
  }
}

/* --- Reset -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05" 1, "cv11" 1, "ss01" 1;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

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

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

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

.display {
  font-size: clamp(2.7rem, 7.1vw, 5.25rem);
  line-height: 1.03;
  font-weight: 600;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

h2.title {
  font-size: clamp(1.95rem, 4.4vw, 3.15rem);
  line-height: 1.07;
  font-weight: 600;
  letter-spacing: -0.038em;
  text-wrap: balance;
}

h3 {
  font-size: 1.1875rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.022em;
}

.lead {
  font-size: clamp(1.125rem, 1.75vw, 1.4375rem);
  line-height: 1.5;
  letter-spacing: -0.016em;
  color: var(--muted);
  font-weight: 400;
  text-wrap: pretty;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

.muted { color: var(--muted); }
.small { font-size: 0.9375rem; line-height: 1.6; }
.tiny  { font-size: 0.8125rem; line-height: 1.55; color: var(--muted-2); letter-spacing: -0.005em; }

a { color: inherit; text-decoration: none; }

.link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding-bottom: 1px;
  transition: border-color 0.25s var(--ease);
}
.link:hover { border-bottom-color: var(--accent); }

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

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

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(60px, 8vw, 110px); }
/* Tone now comes from the panels, so sections stay on one canvas. */
.section--surface { background: var(--canvas); }
.section--rule { border-top: 1px solid var(--line); }

.measure { max-width: 46ch; }
.measure-wide { max-width: 62ch; }

.head { margin-bottom: clamp(48px, 6vw, 80px); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding-inline: 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.014em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
    border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}

.btn:active { transform: scale(0.975); }
/* Overridden by --ms once the magnetic binding is applied. */

.btn--primary {
  background: var(--ink);
  color: var(--canvas);
}
.btn--primary:hover { opacity: 0.84; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--sm { height: 40px; padding-inline: 20px; font-size: 0.9375rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

.arrow { transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* --- Nav ---------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 60px;
  display: flex;
  align-items: center;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
    backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}

.nav[data-stuck="true"] {
  background: color-mix(in srgb, var(--canvas) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  gap: 24px;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.wordmark::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateY(-1px) rotate(45deg);
  flex: none;
}

.wordmark span { font-weight: 400; color: var(--muted); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.875rem;
  letter-spacing: -0.008em;
  color: var(--muted);
}

/* Padding rather than margin: it grows the hit box the cursor can hold onto
   without shifting anything on screen. The gap above absorbs it. */
.nav__links a { padding: 11px 8px; }

.nav__links a { transition: color 0.2s var(--ease); }
.nav__links a:hover { color: var(--ink); }

/* Guides sits on the right with the CTA because it leaves the page, while
   Services and About are jumps within it. */
.nav__end {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
}

.nav__out {
  font-size: 0.875rem;
  letter-spacing: -0.008em;
  color: var(--muted);
  white-space: nowrap;
  padding: 11px 8px;
  transition: color 0.2s var(--ease);
}

.nav__out:hover { color: var(--ink); }

@media (max-width: 860px) {
  .nav__links { display: none; }
}

/* Guides was hidden below 520px, which took the only route into the reference
   section off every phone. There is room for it: at 520px the bar was mostly
   empty between the wordmark and the CTA. It stays now, and the padding that
   widens its hit box is what gives way first when the bar gets tight. */
@media (max-width: 460px) {
  .nav__out { padding-inline: 0; }
  .nav__end { gap: 14px; }
}

/* --- Sub navigation ------------------------------------------------------
   In-page anchors belong to the page, not to the site, so they get their own
   bar. It sits under the fixed header and sticks there.
   ------------------------------------------------------------------------ */

.subnav {
  position: sticky;
  top: 60px;
  z-index: 90;
  margin-top: 60px;
  background: color-mix(in srgb, var(--canvas) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}

.subnav__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 50px;
}

.subnav__title {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex: none;
}

.subnav__links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  font-size: 0.875rem;
  letter-spacing: -0.008em;
  color: var(--muted);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-left: auto;
}

.subnav__links::-webkit-scrollbar { display: none; }
.subnav__links a { white-space: nowrap; padding: 14px 0; transition: color 0.2s var(--ease); }
.subnav__links a:hover { color: var(--accent); }

/* The bar already provides the gap the hero was reserving for the header. */
.has-subnav .hero { padding-top: clamp(56px, 7vw, 96px); }

@media (max-width: 620px) {
  .subnav__title { display: none; }
  .subnav__links { margin-left: 0; }
}

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

.hero {
  padding-top: clamp(130px, 19vw, 210px);
  padding-bottom: clamp(70px, 10vw, 120px);
}

.hero .lead { margin-top: 28px; max-width: 34ch; }

.hero__note {
  margin-top: 30px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--muted-2);
  font-size: 0.8125rem;
  letter-spacing: -0.004em;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* Keeps the dot on the first line when the note wraps on narrow screens. */
.hero__note .dot { margin-top: 7px; }

/* --- Ledger (hero figure / tax comparison) ------------------------------ */

.ledger {
  margin-top: clamp(64px, 9vw, 104px);
  border: 0;
  box-shadow: var(--lift);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--panel);
}

.ledger__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 26px clamp(22px, 3.4vw, 40px);
  border-bottom: 1px solid var(--divider);
}

.ledger__row:last-child { border-bottom: 0; }

.ledger__row--head {
  background: transparent;
  padding-block: 16px;
}

.ledger__label { font-size: 1.0625rem; letter-spacing: -0.014em; }
.ledger__label b { font-weight: 600; }
.ledger__sub { display: block; color: var(--muted); font-size: 0.875rem; margin-top: 3px; }

.ledger__val {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* The USD estimate rides alongside the LBP figure, never below it. */
.ledger__val i {
  font-style: normal;
  font-weight: 500;
  font-size: 0.62em;
  letter-spacing: -0.02em;
  color: var(--muted);
  margin-left: 2px;
}

.ledger__val--zero { color: var(--accent); }
.ledger__val--strike { color: var(--muted-2); text-decoration: line-through; text-decoration-thickness: 1.5px; }

.ledger__foot {
  padding: 20px clamp(22px, 3.4vw, 40px);
  border-top: 1px solid var(--divider);
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* --- Stat strip --------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(32px, 4vw, 56px) 32px;
}

.stat__n {
  font-size: clamp(2.2rem, 4.4vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat__t { margin-top: 12px; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; max-width: 26ch; }

/* --- Cards / grids ------------------------------------------------------ */

.grid {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Four partner services. auto-fit leaves the fourth stranded on its own row at
   desktop, so this set gets explicit tracks: two by two, then four across. */
@media (min-width: 700px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  border: 0;
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 34px);
  background: var(--panel);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }

.card .card__num {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--accent);
  margin-bottom: 18px;
}

/* --- Linked cards -------------------------------------------------------- */

.card--link {
  display: flex;
  flex-direction: column;
  color: inherit;
}

/* Lifted off the page: lighter, with the shadow doing the work a border used
   to do. No colour change beyond the lift itself. */
.card--link:hover {
  background: var(--panel-hi);
  box-shadow: var(--lift-hi);
}

.card--link:hover p { color: var(--ink-soft); }

/* Same swell the buttons get. */
.card--link[data-magnetic]:hover { --ms: 1.02; }
.card--link[data-magnetic]:active { --ms: 0.99; }

.card__go {
  margin-top: auto;
  padding-top: 22px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--accent) !important;
}

.card--link:hover .arrow { transform: translateX(3px); }

/* --- Comparison ----------------------------------------------------------
   Four columns is more than a phone can hold legibly, so below the breakpoint
   the table scrolls sideways rather than shrinking into unreadability.
   ------------------------------------------------------------------------ */

.compare {
  border: 0;
  box-shadow: var(--lift);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--panel);
}

.compare__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  min-width: 660px;
  gap: 20px;
  align-items: start;
  padding: 18px clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--divider);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.compare__row:last-child { border-bottom: 0; }

.compare__row--head {
  background: transparent;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1rem;
  position: sticky;
  top: 0;
}

.compare__row--head a { border-bottom: 1px solid transparent; transition: border-color 0.25s var(--ease); }
.compare__row--head a:hover { border-bottom-color: var(--accent); color: var(--accent); }

.compare__k { color: var(--muted); }
.compare__row b { font-weight: 600; color: var(--accent); }
.compare .tiny { display: block; margin-top: 2px; }

/* --- Checklist ---------------------------------------------------------- */

.checklist { display: grid; gap: 2px; }

.checklist li {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: start;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  letter-spacing: -0.012em;
}

.checklist li:last-child { border-bottom: 0; }
.checklist li span { color: var(--muted); display: block; font-size: 0.875rem; margin-top: 3px; }

.tick,
.cross {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.65;
}
.tick { color: var(--accent); }
.cross { color: var(--muted-2); font-weight: 500; font-size: 1.05rem; }

/* --- Two-column split --------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(40px, 6vw, 80px);
  grid-template-columns: 1fr;
}

@media (min-width: 880px) {
  .split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: start; }
  .split--sticky > :first-child { position: sticky; top: 112px; }
  /* Pricing leads with the card, so it takes the larger column. */
  .split--lead { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}

/* --- Steps -------------------------------------------------------------- */

.steps { counter-reset: step; border-top: 1px solid var(--line); }

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
  padding: clamp(28px, 3.4vw, 42px) 0;
  border-bottom: 1px solid var(--line);
}

.step::before {
  content: "0" counter(step);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  padding-top: 5px;
}

.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.9375rem; max-width: 56ch; }

.step__when {
  font-size: 0.8125rem;
  color: var(--muted-2);
  white-space: nowrap;
  padding-top: 5px;
  text-align: right;
}

@media (max-width: 700px) {
  .step { grid-template-columns: 40px minmax(0, 1fr); }
  .step__when { grid-column: 2; text-align: left; padding-top: 10px; }
}

/* --- Pricing ------------------------------------------------------------ */

.price {
  border: 0;
  box-shadow: var(--lift);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--panel);
}

.price__top { padding: clamp(32px, 4vw, 48px); }

.price__amount {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.price__amount b {
  font-size: clamp(3rem, 7.5vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.price__amount i {
  font-style: normal;
  color: var(--muted);
  font-size: 1.0625rem;
  letter-spacing: -0.014em;
}

.price__breakdown { border-top: 1px solid var(--divider); }

.price__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 16px clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--divider);
  font-size: 0.9375rem;
}

.price__line:last-child { border-bottom: 0; }
.price__line span:first-child { color: var(--muted); }
.price__line span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }

.price__foot {
  padding: clamp(24px, 3vw, 32px) clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--divider);
}

.price__foot .price__line {
  padding: 11px 0;
  border: 0;
  gap: 24px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding-inline: 13px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: 22px;
}

/* --- FAQ ---------------------------------------------------------------- */

/* Separate tiles rather than rows divided by hairlines, so each one is a
   target the cursor can land on and visibly take. */
.faq { display: grid; gap: 8px; }

.faq__item {
  background: var(--panel);
  border-radius: var(--radius);
  padding-inline: clamp(18px, 2.6vw, 26px);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.faq__item:hover,
.faq__item[data-open="true"] {
  background: var(--panel-hi);
  box-shadow: var(--lift-hi);
}

.faq__item[data-magnetic]:hover { --ms: 1.008; }

.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  background: none;
  border: 0;
  padding: 26px 0;
  text-align: left;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.45;
  transition: color 0.2s var(--ease);
}

.faq__q:hover { color: var(--accent); }

.faq__icon {
  flex: none;
  width: 14px;
  height: 14px;
  position: relative;
  margin-top: 6px;
  color: var(--muted);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  inset: 50% 0 auto 0;
  height: 1.5px;
  transform: translateY(-50%);
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}

.faq__icon::after { transform: translateY(-50%) rotate(90deg); }

.faq__item[data-open="true"] .faq__icon::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq__item[data-open="true"] .faq__q { color: var(--accent); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease);
}

.faq__item[data-open="true"] .faq__a { grid-template-rows: 1fr; }

.faq__a > div { overflow: hidden; }

.faq__a p {
  color: var(--muted);
  font-size: 0.9875rem;
  line-height: 1.65;
  max-width: 68ch;
  padding-bottom: 28px;
}

.faq__a p + p { padding-top: 14px; }

/* --- Reference contents --------------------------------------------------- */

/* --- Bio ---------------------------------------------------------------- */

.bio__name {
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1.1;
}

.bio__role {
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-top: 14px;
}

.bio__body { margin-top: 26px; display: grid; gap: 16px; color: var(--muted); max-width: 58ch; }

/* --- CTA band ----------------------------------------------------------- */

.band {
  background: var(--surface-2);
  color: var(--on-dark);
  border-radius: var(--radius-lg);
  padding: clamp(48px, 7vw, 92px) clamp(28px, 5vw, 76px);
  text-align: center;
}

.band .title { color: var(--on-dark); }
.band .lead { color: var(--on-dark-mut); margin-inline: auto; margin-top: 22px; max-width: 44ch; }
.band .btn-row { justify-content: center; }
.band .btn--primary { background: var(--on-dark); color: #000; }
.band .btn--ghost { color: var(--on-dark); border-color: rgba(255, 255, 255, 0.25); }
.band .btn--ghost:hover { border-color: var(--on-dark); }
.band .tiny { color: rgba(255, 255, 255, 0.45); margin-top: 26px; }

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

.footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 72px) 44px;
}

.footer__top {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  padding-bottom: 44px;
}

@media (min-width: 620px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
  /* The service pages carry a Contact column that the guide pages do not, so
     the track count follows the markup rather than being stated twice. */
  .footer__top:has(> :nth-child(4)) { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.footer h4 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 16px;
}

.footer ul { display: grid; gap: 2px; font-size: 0.9375rem; }
.footer ul a {
  display: inline-block;
  padding: 5px 8px;
  margin-left: -8px;
  color: var(--muted);
  transition: color 0.2s var(--ease);
}
.footer ul a:hover { color: var(--ink); }

.footer__legal {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  display: grid;
  gap: 16px;
}

.footer__legal p { max-width: 90ch; }

/* --- Reveal ------------------------------------------------------------- */

/* Hidden only once JS has confirmed it can animate. Without JS the class is
   never added and every section renders normally.

   The entrance offset travels in --ry rather than in `transform` directly, so
   it can be composed with the cursor field's translate further down. Setting
   `transform` here outright is what previously stopped magnetic cards moving:
   this rule outranks [data-magnetic], so its `transform: none` won. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--d, 0ms);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }

/* A magnetic element cannot also have its transform driven by the reveal, so
   it fades in without the slide and leaves transform to the cursor field.
   Declared at equal specificity after the rules above, and repeated for .is-in
   so neither state hands the transform back. */
.js [data-reveal][data-magnetic],
.js [data-reveal][data-magnetic].is-in {
  transform: translate(var(--mx, 0px), var(--my, 0px)) scale(var(--ms, 1));
  transition: opacity 0.85s var(--ease), transform 0.22s var(--ease),
    background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal][data-magnetic] { opacity: 1; transform: none; transition: none; }
  .btn, .card, .arrow { transition: none !important; }
}

/* --- Cursor -------------------------------------------------------------
   After robbietilton.com. A glass disc tracks the pointer with no easing, and
   over anything clickable it dissolves: blurred out, shrunk to nothing, shadow
   and border dropped. The element itself picks up the slack by pulling toward
   the pointer, so the target becomes the cursor. Fine pointers only.
   ------------------------------------------------------------------------ */

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10001;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  pointer-events: none;
  display: none;
  overflow: hidden;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(17, 17, 19, 0.45);
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 3px 6px 3px rgba(9, 9, 2, 0.1);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  filter: blur(0px);
  /* No transition on left/top: tracking has to be lag-free. */
  transition: width 0.15s ease, height 0.15s ease, opacity 0.15s ease,
    filter 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  will-change: left, top;
}

/* Press tint, always present and faded in rather than swapped. */
.cursor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 19, 0.12);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.cursor.is-pressing {
  width: 21px;
  height: 21px;
  box-shadow: 0 2px 6px 2px rgba(9, 9, 2, 0.1);
}

.cursor.is-pressing::before { opacity: 1; }

.cursor.is-dissolved {
  opacity: 0;
  filter: blur(6px);
  width: 1px;
  height: 1px;
  box-shadow: none;
  border: none;
}

@media (prefers-color-scheme: dark) {
  .cursor {
    border-color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.2);
  }
  .cursor::before { background: rgba(255, 255, 255, 0.25); }
}

@media (pointer: fine) {
  html.has-cursor,
  html.has-cursor * { cursor: none !important; }
}

/* --- Magnetic targets ---------------------------------------------------
   Set from script: --mx/--my are the pull toward the pointer, --ms the hover
   swell. Declared last so this transform composes over the component rules.
   ------------------------------------------------------------------------ */

[data-magnetic] {
  transform: translate(var(--mx, 0px), var(--my, 0px)) scale(var(--ms, 1));
  transition: transform 0.22s var(--ease), color 0.2s var(--ease),
    background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  will-change: transform;
}

.btn[data-magnetic]:hover { --ms: 1.03; }
.btn[data-magnetic]:active { --ms: 0.97; }

@media (prefers-reduced-motion: reduce) {
  .cursor { transition: none; }
  [data-magnetic] { transform: none; transition: none; }
}

/* --- Prose (terms page) ------------------------------------------------- */

.prose { max-width: 70ch; }
.prose h2 {
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-top: 48px;
  margin-bottom: 14px;
}
.prose h2:first-of-type { margin-top: 0; }
.prose p, .prose li { color: var(--muted); font-size: 1rem; line-height: 1.7; }
.prose p + p { margin-top: 14px; }
.prose ul { margin-top: 12px; display: grid; gap: 8px; }
.prose ul li { padding-left: 20px; position: relative; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-strong);
}


/* --- Small screens -------------------------------------------------------
   The layout already reflows through its own clamps and auto-fit grids; what
   follows fixes the things that reflow alone does not.
   ------------------------------------------------------------------------ */

@media (max-width: 560px) {
  /* Ragged part-width buttons read as a mistake stacked on top of each other,
     and full width doubles the tap area at the same time. */
  .btn-row { gap: 10px; }
  .btn-row .btn { width: 100%; }

  /* Priced rows put a nowrap figure beside a label. In one column that
     squeezes the label into a four-line sliver, so stack them instead. */
  .price__line {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding-block: 14px;
  }
  .price__line span:last-child { font-size: 1rem; }

  /* Apple and WCAG both want 44px of touchable height. */
  .btn--sm { height: 44px; }
  .footer ul { gap: 0; }
  .footer ul a { padding: 11px 8px; }
  .nav__inner { gap: 12px; }
  .wordmark { padding-block: 9px; }

  /* The caption alongside the ledger heading squeezes it to a sliver in one
     column, so it drops underneath instead. */
  .ledger__row--head {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

@media (max-width: 420px) {
  /* A nowrap figure beside a label leaves the label four words wide at this
     size, so the ledger drops to one column and the figure sits underneath. */
  .ledger__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .ledger__val {
    text-align: left;
    font-size: 1.6rem;
  }
}

@media (max-width: 380px) {
  /* Below this the nav wordmark and the CTA start competing for the same
     row. Dropping the lighter half of the wordmark buys back the space. */
  .nav .wordmark span { display: none; }
}

/* --- Reference pages -----------------------------------------------------
   Long-form guide layout. Optimised to be read by a person and parsed by a
   machine: strict heading order, real tables, a stated answer before the
   detail, and visible sources.
   ------------------------------------------------------------------------ */

.doc { max-width: 74ch; }

.doc h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-top: 64px;
  margin-bottom: 16px;
  scroll-margin-top: 90px;
}

.doc h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 36px;
  margin-bottom: 10px;
}

.doc p { color: var(--muted); line-height: 1.7; }
.doc p + p { margin-top: 14px; }
.doc h2 + p, .doc h3 + p { margin-top: 0; }

/* Lists need space under them too, or the next paragraph butts against
   the final bullet. */
.doc ul, .doc ol { margin-block: 14px 20px; display: grid; gap: 9px; }
.doc li { color: var(--muted); line-height: 1.65; padding-left: 20px; position: relative; }
.doc ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-strong);
}
.doc ol { counter-reset: n; }
.doc ol li { counter-increment: n; }
.doc ol li::before {
  content: counter(n) ".";
  position: absolute;
  left: 0;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
}
.doc strong, .doc b { color: var(--ink); font-weight: 600; }

/* The stated answer, first thing on the page and first thing a model reads. */
.answer {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 22px;
  margin: 32px 0 8px;
}
.answer p {
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: -0.012em;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding-top: 20px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted-2);
}

/* --- Reference tables ---------------------------------------------------- */

.tablewrap {
  margin-top: 22px;
  border: 0;
  box-shadow: var(--lift);
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--panel);
}

table.ref {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

table.ref th,
table.ref td {
  text-align: left;
  vertical-align: top;
  padding: 13px clamp(14px, 2vw, 20px);
  border-bottom: 1px solid var(--divider);
  line-height: 1.5;
}

table.ref thead th {
  background: transparent;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  white-space: nowrap;
}

table.ref tbody th {
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}

table.ref td { color: var(--ink); }
table.ref tr:last-child th,
table.ref tr:last-child td { border-bottom: 0; }
table.ref .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.ref .ar {
  font-size: 1.05rem;
  direction: rtl;
  unicode-bidi: isolate;
  white-space: nowrap;
}

/* --- Contents ------------------------------------------------------------ */

.toc {
  border: 0;
  border-radius: var(--radius);
  padding: 22px clamp(20px, 3vw, 28px);
  margin-top: 40px;
  background: var(--panel);
}
.toc h2 {
  font-size: 0.75rem !important;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 14px !important;
}
.toc ol { display: grid; gap: 8px; margin: 0; counter-reset: t; }
/* .doc ol li::before outranks a bare .toc li::before, so its number was being
   drawn at left:0 on top of text with no indent. Match the specificity and
   give the number somewhere to sit. */
.toc ol li { padding-left: 26px; counter-increment: t; }
.toc ol li::before {
  content: counter(t) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  line-height: 1.7;
}
.toc a { color: var(--muted); font-size: 0.9375rem; }
.toc a:hover { color: var(--accent); }

/* --- Sources ------------------------------------------------------------- */

.sources { margin-top: 20px; }
.sources li { font-size: 0.875rem; color: var(--muted-2); }


/* --- Co-brand lockup -----------------------------------------------------
   This site sells legal work it does not itself perform. Which firm does the
   work has to be impossible to miss, so it is the wordmark rather than a line
   in the footer: the firm on top, Taktek underneath, on every screen.
   ------------------------------------------------------------------------ */

.lockup { display: inline-grid; gap: 3px; line-height: 1.08; padding-block: 8px; }

.lockup__firm {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.lockup__firm span { font-weight: 400; color: var(--muted); }

.lockup__by {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Lower case, set as written. The wide tracking that made the uppercase form
   read is wrong for it, so it goes. */
.lockup__by b { color: var(--accent); font-weight: 600; }

/* Boxed, this read as a checkbox at 13px. Plain and in the accent it reads as
   what it is: two names joined. */
.lockup__x {
  font-style: normal;
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--accent);
}

.footer .lockup__firm { color: var(--ink); }

/* --- Who does the work ---------------------------------------------------
   A band, not a footnote. It runs directly under the hero on the way in and
   again above the price, because those are the two moments someone wonders
   who they are actually dealing with.
   ------------------------------------------------------------------------ */

.whois {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(24px, 3vw, 34px) clamp(24px, 3.5vw, 40px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel-hi);
  box-shadow: var(--lift);
}
@media (min-width: 820px) { .whois { grid-template-columns: auto 1fr; } }

.whois__mark { display: grid; gap: 10px; }
.whois__mark .lockup__firm { font-size: 1.375rem; }
.whois p { color: var(--muted); font-size: 0.9375rem; line-height: 1.62; margin: 0; }
.whois p + p { margin-top: 10px; }
.whois a.link { color: var(--accent); border-bottom: 1px solid currentColor; }


/* Out of the way until it is tabbed to, which is the only moment it helps. */
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; }
.skip:focus {
  left: 12px;
  top: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--canvas);
  font-size: 0.875rem;
  font-weight: 500;
}