/* ==========================================================================
   Pillar Forward Consulting — public site
   ========================================================================== */

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

html {
  /* ------------------------------------------------------------------------
     THE ZOOM KNOB.

     Every size in this project is expressed in rem, so this one percentage
     scales the whole site the way the browser zoom control does. 100% is the
     original sizing; 78% is roughly "22% smaller"; drop it further to zoom out
     more, raise it to back off. Nothing else needs changing.

     Note this is a percentage of the visitor's own default font size, so
     anyone who has set a larger default for readability still gets one.
     ------------------------------------------------------------------------ */
  font-size: 78%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 700;
  color: #fff;
}
p {
  margin: 0;
}

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

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

/* --- layout ------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.section {
  padding-block: var(--section);
  position: relative;
}

.section--tight {
  padding-block: calc(var(--section) * 0.6);
}

.section--line {
  border-top: 1px solid var(--line);
}

.stack > * + * {
  margin-top: var(--gap);
}

/* --- ambient background ------------------------------------------------- */

.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 3.7rem 3.7rem;
  opacity: 0.32;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
}

.bg-glow {
  position: fixed;
  top: -28vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 130vw);
  height: 70vh;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--accent-rgb), 0.14) 0%,
    rgba(var(--accent-rgb), 0.04) 38%,
    transparent 70%
  );
  filter: blur(12px);
}

/* --- nav ---------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(8, 20, 38, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color var(--mid) var(--ease), background var(--mid) var(--ease);
}
.nav.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(8, 20, 38, 0.94);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: var(--nav-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.logo:hover {
  text-decoration: none;
}

/* The supplied logo is gold artwork plus a black wordmark on white. The asset
   used here is the same file with the background removed and the wordmark
   recoloured white, so it sits on the dark page without a plate behind it.
   width/height are set on the tag to reserve the space and avoid a reflow. */
.logo__img {
  height: var(--logo-h);
  width: auto;
  display: block;
}

/* Which practice you're in, hung off the logo. Only the section pages use it. */
.logo__division {
  align-self: center;
  padding-left: 0.7rem;
  margin-left: 0.15rem;
  border-left: 1px solid var(--line-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

@media (max-width: 420px) {
  .logo__img {
    height: 1.76rem;
  }
  .logo__division {
    display: none;
  }
}

.logo__mark {
  display: grid;
  place-items: center;
  width: var(--logo-h);
  height: var(--logo-h);
  border-radius: 0.56rem;
  background: var(--gold-sheen);
  color: var(--on-accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.34);
}

.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo__name {
  font-size: 0.98rem;
}
.logo__sub {
  font-size: 0.63rem;
  color: var(--dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.nav__link {
  color: var(--text-2);
  font-size: 0.93rem;
  font-weight: 500;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  transition: color var(--fast), background var(--fast);
}
.nav__link:hover,
.nav__link[aria-current="page"] {
  color: #fff;
  background: var(--surface-2);
  text-decoration: none;
}

/* The phone number in the header. Monospaced so the digits read at a glance,
   and a real tel: link so it is tappable on a phone. */
.nav__phone {
  font-family: var(--mono);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent);
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  white-space: nowrap;
  transition: color var(--fast), background var(--fast);
}
.nav__phone:hover {
  color: var(--accent-light);
  background: var(--surface-2);
  text-decoration: none;
}

.nav__toggle {
  display: none;
  margin-left: auto;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--text);
  width: 3.05rem;
  height: 2.72rem;
  border-radius: 9px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* Raised from 880px: the nav gained a Restoration link, About, Contact and a
   phone number, so the inline row needs more room before it crowds the logo.
   Below this everything collapses into the drawer instead. */
@media (max-width: 999.98px) {
  .nav__toggle {
    display: inline-flex;
  }
  /* Anchored to the header rather than pinned to a hard-coded 68px from the
     top of the viewport, so the panel still meets the bar if the header ever
     grows — bumped text size, a longer brand name, a wrapped logo. */
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-1);
    border-bottom: 1px solid var(--line);
    padding: 0.6rem clamp(1.15rem, 4vw, 2.5rem) 1.4rem;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--fast), transform var(--fast);
  }
  .nav__links.is-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .nav__link {
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: 1rem;
  }
  .nav__links .btn {
    margin-top: 0.9rem;
    justify-content: center;
  }

  /* In the drawer the phone is a row like the others, not a small inline
     label. Its default padding gave a 30px tap target next to 42px links,
     which is under the 44px both Apple and Google ask for. */
  .nav__phone {
    margin-top: 0.5rem;
    padding: 0.9rem 0.5rem;
    text-align: center;
    font-size: 1rem;
  }

  /* A nav short enough to fit on one line opts out of the drawer entirely.
     The drawer is only reachable through the toggle button, so a header that
     doesn't render one would otherwise hide its links with no way to open
     them. */
  .nav__links--inline {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    padding: 0;
    background: none;
    border-bottom: none;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .nav__links--inline .nav__link {
    padding: 0.5rem 0.8rem;
    border-bottom: none;
    border-radius: 8px;
    font-size: 0.93rem;
  }
}

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.82rem 1.5rem;
  border-radius: 10px;
  font-size: 0.96rem;
  font-weight: 650;
  font-family: inherit;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--fast) var(--ease-sharp), box-shadow var(--fast),
    background var(--fast), border-color var(--fast), color var(--fast);
}
.btn:hover {
  text-decoration: none;
}
.btn:active {
  transform: translateY(1px);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  background: var(--gold-sheen);
  color: var(--on-accent);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.4), 0 10px 34px rgba(var(--accent-rgb), 0.22);
}
.btn--primary:hover:not(:disabled) {
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.6), 0 14px 44px rgba(var(--accent-rgb), 0.34);
  transform: translateY(-2px);
}

.btn--ghost {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--line-2);
}
.btn--ghost:hover:not(:disabled) {
  border-color: var(--line-bright);
  background: var(--surface-3);
  transform: translateY(-2px);
}

.btn--lg {
  padding: 1rem 1.9rem;
  font-size: 1.03rem;
}
.btn--block {
  width: 100%;
}

/* --- eyebrow / headings ------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

.h-display {
  font-size: var(--step-4);
  letter-spacing: -0.04em;
}
.h-section {
  font-size: var(--step-3);
}
.h-card {
  font-size: var(--step-1);
}

.lede {
  font-size: var(--step-1);
  color: var(--text-2);
  line-height: 1.55;
  max-width: 62ch;
  font-weight: 400;
}

.muted {
  color: var(--muted);
}
.small {
  font-size: var(--step--1);
}

.accent-text {
  color: var(--accent);
}

/* --- hero --------------------------------------------------------------- */

.hero {
  padding-block: clamp(4rem, 3rem + 7vw, 8.5rem) var(--section);
  position: relative;
}

.hero__headline {
  font-size: var(--step-5);
  letter-spacing: -0.045em;
  max-width: 16ch;
  margin-bottom: 1.5rem;
}

.hero__headline .accent-text {
  background: linear-gradient(120deg, var(--accent-light) 0%, var(--accent) 50%, var(--accent-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__sub {
  max-width: 58ch;
  margin-bottom: 2.4rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

.hero__note {
  margin-top: 1.4rem;
  font-size: var(--step--1);
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hero__note::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 10px var(--good);
  flex-shrink: 0;
}

/* --- stat strip --------------------------------------------------------- */

.stats {
  display: grid;
  /* Four figures: 1 -> 2 -> 4. Three columns would drop the last stat onto a
     row of its own, which makes a tidy row of numbers look like a mistake. */
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15, 21, 29, 0.5), transparent);
}

/* Breaks at exactly 700px to match the border rule below, which swaps each
   stat's divider from right to bottom when they stack. Previously the grid was
   `auto-fit` and still had four columns at 700px, so the dividers flipped to
   horizontal while the stats were still sitting in a row. */
@media (min-width: 701px) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat {
  padding: 2.1rem clamp(1.15rem, 3vw, 2rem);
  border-right: 1px solid var(--line);
}
.stat:last-child {
  border-right: none;
}

.stat__value {
  font-size: clamp(2.1rem, 1.6rem + 2.2vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 0.55rem;
}
/* The stat strip is the proof: rates, turnaround, years. Money-green. */
.stat__value span {
  color: var(--revenue);
}

.stat__label {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width: 700px) {
  .stat {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-block: 1.5rem;
  }
  .stat:last-child {
    border-bottom: none;
  }
}

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

.grid {
  display: grid;
  gap: var(--gap);
}
/* Explicit column counts, not `repeat(auto-fit, ...)`.
   auto-fit chooses a column count from the available width alone — it has no
   idea how many items are in the grid — so it regularly lands a count that
   strands the last item on a row by itself. A census of the real pages found
   that happening in six places at ordinary laptop widths.
   Each utility below steps through counts that divide its actual content. */

.grid--2 {
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* An odd number of items would leave the last one alone in the second
     column; letting it run full width reads as deliberate instead. */
  .grid--2 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
/* Three-up grids step 1 -> 3 with NO two-column stage, because three items in
   two columns always strands the third on its own row. `auto-fit` did exactly
   that between roughly 470px and 740px.
   --three-up is the shared breakpoint for every 3-item row on the homepage
   (pillars, practice cards, build/train/own) so sibling sections never disagree
   about how many columns they are in. Change it in one place. */
.grid--3 {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Four items: 1 -> 2 -> 4. Never three, which would strand the fourth. */
.grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.card {
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg-1) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--card-pad);
  position: relative;
  overflow: hidden;
  transition: border-color var(--mid) var(--ease), transform var(--mid) var(--ease);
}

.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
  opacity: 0;
  transition: opacity var(--mid) var(--ease);
}

.card:hover {
  border-color: var(--line-bright);
  transform: translateY(-3px);
}
.card:hover::before {
  opacity: 1;
}

.card__num {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--accent);
  letter-spacing: 0.12em;
  margin-bottom: 0.9rem;
  opacity: 0.85;
}

.card__title {
  font-size: var(--step-1);
  margin-bottom: 0.7rem;
}

.card__body {
  color: var(--text-2);
  font-size: 0.97rem;
  line-height: 1.65;
}

/* --- pricing cards ------------------------------------------------------ */

.price-card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.price-card--feature {
  border-color: var(--revenue-line);
  box-shadow: var(--glow-revenue);
}

.price-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}

/* Without a flex-basis the title claims its full max-content width and shoves
   the price onto a second line — so two cards sitting side by side in the same
   row could disagree about whether the price is beside the title or under it.
   Giving the title a basis makes it wrap internally instead, which is the same
   layout in every card. */
.price-card__head > :first-child {
  flex: 1 1 12rem;
  min-width: 0;
}
.price-card__head > :last-child:not(:only-child) {
  flex: 0 1 auto;
  text-align: right;
}

/* Once the head does stack, right-aligned numbers under a left-aligned title
   read as a mistake. Below this width everything goes left. */
@media (max-width: 460px) {
  .price-card__head {
    flex-direction: column;
    align-items: stretch;
  }
  .price-card__head > :last-child:not(:only-child),
  .price-card__note {
    text-align: left;
  }
}

/* Every price on the site is money-green. This is the rule that makes the
   palette mean something instead of just looking like a palette. */
.price-card__price {
  font-size: clamp(2rem, 1.6rem + 1.8vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--revenue);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-card__note {
  display: block;
  font-size: 0.78rem;
  color: var(--dim);
  font-weight: 500;
  letter-spacing: 0;
  margin-top: 0.35rem;
  text-align: right;
}

.check-list {
  list-style: none;
  margin: 0;
  /* Kills the UA's list indent only. A blanket `padding: 0` here would also
     wipe out .card's padding on <ul class="check-list card">, since the two
     selectors have equal specificity and this one wins on order — which put
     the tick marks directly on top of the card border. */
  padding-inline-start: 0;
  display: grid;
  gap: 0.65rem;
}
/* A check-list that is also a card keeps the card's inset. */
.check-list.card {
  padding: var(--card-pad);
}

.check-list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  color: var(--text-2);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* A real tick, drawn as a mask. The previous version stacked two full-width
   diagonal gradients, which can only ever produce an X — the wrong symbol
   entirely next to a list of things we do. */
.check-list li::before {
  content: "";
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 0.24rem;
  border-radius: 5px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.3L4.8 8.6L9.5 3.6' stroke='%23dcaf5f' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 11px 11px;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- contact addresses --------------------------------------------------- */

.emails {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Each entry is a person: a tappable number with their email underneath, so the
   two anchors have to stack rather than run together on one line. */
.emails li {
  display: grid;
  gap: 0.05rem;
}
.footer .emails li + li {
  margin-top: 0.6rem;
}
.footer .emails li > a:first-child {
  color: var(--text);
  font-weight: 600;
}

.emails a {
  font-weight: 600;
  word-break: break-word;
}

/* The footer column version sits under a footer__title like the link lists. */
.footer .emails a {
  color: var(--text-2);
  font-size: 0.93rem;
  font-weight: 400;
}
.footer .emails a:hover {
  color: var(--accent);
}

/* --- practice cards (company landing page) ------------------------------
   The two routes into the business. Whole card is the link, so the target is
   the card rather than a small anchor at the bottom of it. */

.divisions {
  display: grid;
  /* Column count is tied to the number of practice cards — currently THREE.
     If you add or remove a card, change the count below to match.

     Not `repeat(auto-fit, minmax(...))`: auto-fit picks a column count from the
     available width with no idea how many cards there are, so it regularly
     lands one short and leaves the last card stranded alone on its own row.
     Three cards in a two-column grid is exactly that failure.

     One column on phones, three above 1000px. There is deliberately no
     two-column step: with an odd number of cards it always orphans one. */
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: stretch;
}

@media (min-width: 900px) {
  .divisions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- practice grouping labels --------------------------------------------
   Bookkeeping serves any industry; estimating and AI tools are restoration
   only. Two labels say so without splitting the row into two separate grids.

   DOM order is label, card, label, card, card — so the single-column layout
   needs no reordering and each label stays attached to what it introduces.
   Above the breakpoint they are placed explicitly instead: one over column 1,
   one spanning columns 2-3, with every card pinned to row 2. */

.divisions__group {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/* Hairline trailing off to the right, so it reads as a heading over the cards
   rather than a stray line of text floating above them. */
/* One of the two group labels links to /restoration; the other has no hub page
   behind it. Inheriting the label colour keeps the pair looking like a matched
   set, and the arrow in the markup is what signals it is clickable. */
.divisions__group-link {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.divisions__group-link:hover {
  color: var(--accent-light);
  text-decoration: underline;
}

.divisions__group::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

@media (min-width: 900px) {
  .divisions--grouped {
    grid-template-rows: auto auto;
    row-gap: 0.9rem;
  }
  .divisions__group--a {
    grid-column: 1;
    grid-row: 1;
  }
  .divisions__group--b {
    grid-column: 2 / span 2;
    grid-row: 1;
  }
  /* Every card pinned to row 2. Without this they auto-place into the label
     row and the whole arrangement collapses. */
  .divisions--grouped > .division {
    grid-row: 2;
  }
}

/* --- build -> train -> own ------------------------------------------------
   Three steps with a connector between them. The connector is a pseudo-element
   sitting in the grid gap, and it changes direction with the layout: a down
   arrow while the steps are stacked, a right arrow once they are in a row. */

.bto {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.bto__step {
  position: relative;
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg-1) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
}

.bto__label {
  display: block;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.bto__body {
  margin: 0;
  color: var(--text-2);
  font-size: 0.95rem;
}

.bto__step:not(:last-child)::after {
  content: "↓";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, calc(50% + var(--gap) / 2));
  font-size: 1.1rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.75;
}

@media (min-width: 900px) {
  .bto {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bto__step:not(:last-child)::after {
    content: "→";
    left: auto;
    right: 0;
    bottom: auto;
    top: 50%;
    transform: translate(calc(50% + var(--gap) / 2), -50%);
  }
}

/* --- before / after workflow ---------------------------------------------
   Two numbered columns. The steps a build removes are struck through in the
   "today" column, which is the whole argument made without a paragraph. */

.flows {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  /* Stretch, not start: the "today" column has one more step than the "after"
     column, so left to content the two panels end at different heights and the
     comparison looks accidental rather than deliberate. */
  align-items: stretch;
}

@media (min-width: 780px) {
  .flows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.flow {
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg-1) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
}

.flow--after {
  border-color: var(--revenue-line, var(--line-bright));
}

.flow__label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.1rem;
}

.flow--after .flow__label {
  color: var(--revenue);
}

.flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: flow;
}

.flow__list li {
  counter-increment: flow;
  position: relative;
  padding-left: 2.2rem;
  padding-bottom: 1.1rem;
  color: var(--text-2);
  font-size: 0.93rem;
  line-height: 1.5;
}

.flow__list li:last-child {
  padding-bottom: 0;
}

/* The numbered pip, and the rule joining it to the next one. */
.flow__list li::before {
  content: counter(flow);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow__list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 1.5rem;
  bottom: 0.35rem;
  width: 1px;
  background: var(--line);
}

.flow--after .flow__list li::before {
  border-color: var(--revenue);
  color: var(--revenue);
}

/* The steps that stop existing. */
.flow__cut {
  text-decoration: line-through;
  text-decoration-color: var(--danger);
  text-decoration-thickness: 1px;
  opacity: 0.62;
}

/* --- estimating calculator -----------------------------------------------
   Inputs on the left, the arithmetic on the right. Single column until there is
   room for both — a two-column form on a phone is worse than a long one. */

.calc {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  /* Both panels end level. The inputs side is naturally shorter than the
     results side, and two boxes finishing at different heights reads as a
     layout bug rather than a choice. */
  align-items: stretch;
}

@media (min-width: 860px) {
  .calc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
}

.calc__inputs {
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg-1) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
}

.calc__out {
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
}

.calc__hint {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
}

.calc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}

.calc__row:first-child {
  padding-top: 0;
}

.calc__row-label {
  color: var(--text-2);
  font-size: 0.92rem;
  flex: 1 1 11rem;
  min-width: 0;
}

.calc__row-figure {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--revenue);
  font-size: 1.15rem;
  white-space: nowrap;
}

/* The 3% line is the answer they came for, so it gets the size. */
.calc__row-figure--big {
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem);
}

.calc__row--lead {
  border-bottom: none;
  padding-bottom: 0.35rem;
}

.calc__perjob {
  margin: 0 0 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 0.9rem;
}

/* Was amber, which read as a warning. The line is now mostly a plain statement
   of our own turnaround rather than a flag about theirs, so it sits in normal
   body colour with a rule above to separate it from the figures. */
.calc__turnaround {
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.5;
}

.calc__note {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

/* Spinner arrows are noise at this size and invite nudging the value by
   accident when scrolling. */
.calc input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.calc input[type="number"]::-webkit-outer-spin-button,
.calc input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.division {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg-1) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
  color: inherit;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: border-color var(--mid) var(--ease), transform var(--mid) var(--ease),
    box-shadow var(--mid) var(--ease);
}
.division:hover {
  text-decoration: none;
  transform: translateY(-4px);
  border-color: var(--line-bright);
}

/* The open practice carries the accent; the one that hasn't launched stays
   deliberately quieter so the choice is obvious at a glance. */
.division--live {
  border-color: var(--accent-line);
}
.division--live:hover {
  border-color: var(--accent);
  box-shadow: var(--glow);
}

.division__status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  border: 1px solid var(--line-2);
  color: var(--muted);
  background: var(--surface-2);
}
.division__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.division--live .division__status {
  color: var(--revenue);
  border-color: var(--revenue-line);
  background: var(--revenue-dim);
}
.division--live .division__status::before {
  background: var(--revenue);
  box-shadow: 0 0 10px var(--revenue);
}

.division__name {
  font-size: var(--step-2);
  letter-spacing: -0.035em;
}

.division__blurb {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.65;
}

.division__list {
  list-style: none;
  margin: 0;
  padding-inline-start: 0;
  display: grid;
  gap: 0.5rem;
}
.division__list li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.93rem;
  color: var(--text-2);
  line-height: 1.5;
}
.division__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--line-bright);
}
.division--live .division__list li::before {
  background: var(--accent);
}

/* Pushed to the bottom so both cards' actions line up regardless of how much
   copy sits above them. */
.division__cta {
  margin-top: auto;
  padding-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 650;
  font-size: 0.97rem;
  color: var(--muted);
}
.division--live .division__cta {
  color: var(--accent);
}
.division__cta::after {
  content: "\2192";
  transition: transform var(--fast) var(--ease-sharp);
}
.division:hover .division__cta::after {
  transform: translateX(4px);
}

/* --- own it, don't rent it ---------------------------------------------- */

.ownit {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1.25rem, 1rem + 2vw, 3rem);
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg-1) 100%);
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.6rem);
}

.ownit__side {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ownit__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.ownit__side--own .ownit__label {
  color: var(--revenue);
}

.ownit__figure {
  font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.ownit__side--own .ownit__figure {
  color: var(--revenue);
}

.ownit__detail {
  font-size: 0.94rem;
  color: var(--text-2);
  line-height: 1.6;
}

.ownit__strike {
  text-decoration: line-through;
  text-decoration-color: var(--danger);
  text-decoration-thickness: 2px;
  opacity: 0.75;
}

.ownit__divider {
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line-bright), transparent);
}

.ownit__list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.ownit__list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.93rem;
  color: var(--text-2);
  line-height: 1.5;
}
.ownit__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--revenue);
}

@media (max-width: 780px) {
  .ownit {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .ownit__divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-bright), transparent);
  }
}

.disclaimer {
  font-size: 0.8rem;
  color: var(--dim);
  line-height: 1.55;
  max-width: 70ch;
}

/* --- the builds grid -----------------------------------------------------
   Narrow screens: cards size to their own content. Stretching them to match
   the tallest in the row puts all the slack into one gap in the middle,
   because the supporting block is pinned to the card's bottom edge. */
[data-builds-grid] {
  align-items: start;
}

/* The head always stacks inside the builds grid — title above figure, never
   beside it.
   `.price-card__head` is a wrapping flex row, and in a ~315px card two cards in
   the same row genuinely disagreed about whether the figure fitted next to the
   title: "Mitigation Estimate Writer" kept it inline while "Missed Revenue &
   Supplement Finder" pushed it onto its own line. No amount of reserving rows
   fixes that, because the two cards are running different layouts. Stacking
   unconditionally removes the choice.
   Scoped to the builds grid: the two-up cards on the estimating page are wide
   enough for the side-by-side head and should keep it. */
[data-builds-grid] .price-card__head {
  flex-direction: column;
  align-items: stretch;
}

/* The head's first child carries flex: 1 1 12rem, written to control WIDTH
   back when this head was a row. It is a column now, so that basis applies
   down the page instead: the title block reserved a 12rem (~150px) minimum
   HEIGHT for content needing about 59px, leaving roughly 100px of dead space
   between the build name and its price on every card. Size it to content.
   Cross-card alignment does not depend on this — that comes from the
   reserved tag line and the two-line minimum on the title. */
[data-builds-grid] .price-card__head > :first-child {
  flex: 0 0 auto;
}
[data-builds-grid] .price-card__head > :last-child:not(:only-child),
[data-builds-grid] .price-card__note {
  text-align: left;
}

/* Cards sitting side by side should agree on where each line starts — the tag,
   the name, the price, the body. Left to content they do not, for two reasons:

     1. The flagship card carries a "Flagship" tag the others lack, so its name
        starts one line lower than everything beside it.
     2. "Missed Revenue & Supplement Finder" wraps to two lines where "Rebuttal
        Agent" takes one, so its price sits a line lower again.

   Reserving both rows in every card fixes it. Only applied once the cards are
   actually side by side — stacked on a phone the reserved space is just a gap. */
@media (min-width: 700px) {
  [data-builds-grid] .price-card__tag {
    display: block;
    /* Must be a LINE BOX, not 1em. An empty element given `min-height: 1em`
       comes out 9px tall while "Flagship" renders a 15px line box — which left
       the flagship card sitting 6px lower than everything beside it. `1lh` is
       exactly one line of this element's own text, so empty and filled match. */
    min-height: 1.65em; /* fallback where `lh` is unsupported */
    min-height: 1lh;
    margin-bottom: 0.6rem;
  }
  [data-builds-grid] .price-card__head .h-card {
    /* Measured: .h-card's line-height is 1.08x its font-size, so two lines is
       2.16em. Keep the fallback in step if that ratio ever changes. */
    min-height: 2.16em; /* fallback where `lh` is unsupported */
    min-height: 2lh; /* the longest build names run to two lines */
  }
}

/* Below the alignment breakpoint the cards are stacked, so there is nothing to
   line up and an empty tag is pure dead space — it still inherits .eyebrow's
   1.15rem bottom margin, which would sit above every non-flagship title for no
   reason. Remove it entirely down here. */
/* 699.98px, not 43.7em — media-query em resolves against the browser's initial
   16px, NOT the 78% root size set on <html>, so an em value here would not line
   up with the 700px min-width above and would leave a dead band between them. */
@media (max-width: 699.98px) {
  .price-card__tag:empty {
    display: none;
  }
}

/* "Starting at" rides above the figure rather than inline with it, so the
   number stays the thing you actually read and every card's number sits at the
   same size regardless of prefix length. */
.price-card__prefix {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-2);
  margin-bottom: 0.1rem;
}

/* Wide screens: six matched cards in a 3 x 2 block, with the full-height card
   running down the side of it. That card is the one carrying add-ons, so it is
   naturally much taller than the rest — giving it its own column stops it
   dictating the height of everything beside it, which is what forced the
   content-sized layout above in the first place.

   grid-auto-rows: 1fr is what makes the six genuinely identical rather than
   just equal within their own row. */
@media (min-width: 1080px) {
  [data-builds-grid] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
  }
  /* Both coordinates have to be explicit. Pinning only the column leaves the
     row to auto-placement, which fills r1c4 with the next card in the list and
     shunts this one down into a third row. */
  [data-builds-grid] .price-card--tall {
    grid-column: 4;
    grid-row: 1 / span 2;
  }
  /* This grid inherits .grid--2, whose odd-count rule runs the final card full
     width so it never sits alone. Correct in a two-column grid, wrong here —
     with seven builds the last one is odd-numbered and would stretch across all
     four columns. The explicit placement above already prevents any orphan. */
  [data-builds-grid] > :last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* --- bookkeeping plans ---------------------------------------------------
   A three-tier rack. Unlike the two service lines, these ARE a ranking, so the
   middle one is allowed to carry the accent — it is the one most clients pick
   and saying so is useful, not manipulative. */

.plans {
  display: grid;
  /* Three tiers: 1 -> 3, never 2. Two columns would put Full Service on a row
     of its own, which reads as an afterthought rather than the top tier. */
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: stretch;
}

@media (min-width: 900px) {
  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.plan__name {
  font-size: var(--step-1);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.plan__figure {
  font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--revenue);
  font-variant-numeric: tabular-nums;
}
.plan__period {
  font-size: 0.86rem;
  color: var(--muted);
}

/* Who the tier is for, sitting directly under the price so the reader can
   self-select before reading a single feature. */
.plan__for {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.55;
}

.plan .check-list {
  margin-top: 0.1rem;
}

.plan__tag {
  position: absolute;
  top: 0;
  right: var(--card-pad);
  transform: translateY(-50%);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  white-space: nowrap;
}
/* The card clips its own corners, so the tag has to be allowed out. */
.plan--featured {
  overflow: visible;
  border-color: var(--accent-line);
}

/* --- one-time work ------------------------------------------------------- */

.oneoff {
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.oneoff__price {
  flex-shrink: 0;
  min-width: 7rem;
}
.oneoff__figure {
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--revenue);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  display: block;
}
.oneoff__prefix {
  font-size: 0.78rem;
  color: var(--dim);
  display: block;
  margin-bottom: 0.1rem;
}
.oneoff__note {
  font-size: 0.82rem;
  color: var(--dim);
  margin-top: 0.35rem;
}
.oneoff__body {
  flex: 1 1 16rem;
  min-width: 0;
}

/* --- the two service lines, side by side --------------------------------
   These two cards are a choice, not a ranking, so they are deliberately
   identical in weight: same border, same button style, same running order of
   tag / title / description / rates / list / who-it-suits. Giving one of them
   an accent border and the only solid button read as "this is the recommended
   one", which is not the message. */

.line-card {
  gap: 0.9rem;
}

.line-card__tag {
  margin-bottom: 0;
}

.line-card__rates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.rate {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.rate__figure {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--revenue);
  font-variant-numeric: tabular-nums;
}

.rate__of {
  font-size: 0.86rem;
  color: var(--muted);
}

.rate__for {
  font-size: 0.8rem;
  color: var(--dim);
}

.line-card__list {
  margin-top: 0.15rem;
}

/* Pushed to the bottom so the two "Best if" lines sit on the same baseline and
   can be read against each other without hunting. */
.line-card__fit {
  margin-top: auto;
  padding-top: 0.3rem;
  font-size: 0.91rem;
  color: var(--text-2);
  line-height: 1.55;
}
.line-card__fit strong {
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 420px) {
  .line-card__rates {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* --- supporting note inside a price card -------------------------------- */

.support-note {
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--revenue);
  background: var(--bg-1);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-2);
  margin-top: auto;
}

.support-note__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--revenue);
  margin-bottom: 0.35rem;
}

/* --- build add-ons ------------------------------------------------------ */

.addons {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.addons__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.7rem;
}

.addons__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.addons__list li {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.55rem;
  border-bottom: 1px dashed var(--line);
}
.addons__list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.addons__name {
  color: var(--text);
  font-size: 0.91rem;
  line-height: 1.45;
}

.addons__desc {
  display: block;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.5;
  margin-top: 0.15rem;
}

.addons__price {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--revenue);
  font-variant-numeric: tabular-nums;
}

.addons__note {
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 420px) {
  .addons__list li {
    flex-direction: column;
    gap: 0.2rem;
  }
}

/* --- setup fee strip ---------------------------------------------------- */

.setup-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.35rem 1.6rem;
}

.setup-strip__name {
  font-size: var(--step-1);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.setup-strip__price {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  white-space: nowrap;
}

.setup-strip__body {
  flex-basis: 100%;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.6;
}

.setup-strip__note {
  flex-basis: 100%;
  font-size: 0.83rem;
  color: var(--dim);
}

@media (max-width: 560px) {
  .setup-strip__price {
    margin-left: 0;
  }
}

/* --- pricing basis ------------------------------------------------------ */

/* The one-line reminder directly under a price, so "3% of what?" is answered
   before the reader has to go looking for it. */
.basis-line {
  margin: -0.35rem 0 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.87rem;
  color: var(--accent);
  font-weight: 600;
}

.basis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--gap);
}

.basis-card {
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg-1) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
}

.basis-card__pct {
  flex-shrink: 0;
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--revenue);
  font-variant-numeric: tabular-nums;
  min-width: 2.5ch;
}

.basis-card__term {
  font-size: var(--step-1);
  margin-bottom: 0.5rem;
}

.basis-card__body {
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.65;
}

@media (max-width: 460px) {
  .basis-card {
    flex-direction: column;
    gap: 0.6rem;
  }
}

/* --- callout ------------------------------------------------------------ */

.callout {
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.5rem;
  color: var(--text-2);
  font-size: 0.96rem;
}
.callout strong {
  color: #fff;
}
.callout--amber {
  border-left-color: var(--amber);
}

/* --- split -------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
/* The wide gap is right when a .split is the only thing in its section. It is
   wrong directly beneath a .grid--2: the two end up with different column
   widths, so the boxes below come out about 21px narrower and shifted right,
   which reads as a misalignment rather than a choice. This modifier matches
   the grid gap so the columns line up exactly. */
.split--flush {
  gap: var(--gap);
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }
}

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

.cta-band {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.05), transparent 60%), var(--bg-1);
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute;
  bottom: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(var(--accent-rgb), 0.16), transparent 70%);
  pointer-events: none;
}
.cta-band .container {
  position: relative;
  z-index: 1;
  text-align: center;
}
.cta-band .lede {
  margin-inline: auto;
}

/* --- forms -------------------------------------------------------------- */

.form {
  display: grid;
  gap: 1.15rem;
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
}
@media (max-width: 620px) {
  .field__row {
    grid-template-columns: 1fr;
  }
}

.label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.01em;
}
.label span {
  color: var(--dim);
  font-weight: 400;
}

.input,
.select,
.textarea {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  padding: 0.8rem 0.95rem;
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
.textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.6;
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23949aa6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--dim);
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.field__error {
  font-size: 0.83rem;
  color: var(--danger);
  min-height: 1.1em;
}

/* Honeypot — visually gone but still fillable by dumb bots. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font-size: 0.93rem;
  display: none;
}
.form__status.is-error {
  display: block;
  background: rgba(255, 95, 86, 0.1);
  border: 1px solid rgba(255, 95, 86, 0.35);
  color: #ffb4ae;
}
.form__status.is-success {
  display: block;
  background: rgba(var(--revenue-rgb), 0.1);
  border: 1px solid rgba(var(--revenue-rgb), 0.35);
  color: #8ff0cf;
}

/* --- booking ------------------------------------------------------------ */

.type-picker {
  display: grid;
  /* Three meeting types: 1 -> 3, never 2, which would strand the third on its
     own row. NOTE: meeting types are editable from the dashboard — if a fourth
     is ever added, revisit this, because three columns would then leave one
     alone. */
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

@media (min-width: 560px) {
  .type-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.type-option {
  position: relative;
  display: block;
  cursor: pointer;
}
.type-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* This is a <span>, so without an explicit display it stays inline: height:100%
   is ignored (ragged card heights), the horizontal padding does nothing for the
   block children inside (text sat on the left border), and the box grows past
   its own grid cell into whatever is underneath. */
.type-option__box {
  display: block;
  border: 1px solid var(--line-2);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 1.05rem 1.15rem;
  height: 100%;
  transition: border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.type-option input:checked + .type-option__box {
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.type-option:hover .type-option__box {
  border-color: var(--line-bright);
}

.type-option__label {
  font-weight: 650;
  color: #fff;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}
.type-option__mins {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--accent);
}
.type-option__desc {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.5;
}

.day-block + .day-block {
  margin-top: 1.5rem;
}

.day-block__label {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.55rem;
}

.slot {
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--text-2);
  border-radius: 9px;
  padding: 0.65rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.86rem;
  cursor: pointer;
  transition: all var(--fast);
}
.slot:hover {
  border-color: var(--accent-line);
  color: #fff;
  background: var(--surface-2);
}
.slot.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.3);
}

.booking-steps {
  display: grid;
  gap: 2rem;
}

.step__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.05rem;
}
.step__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 700;
  flex-shrink: 0;
}
.step__title {
  font-size: 1.06rem;
  font-weight: 650;
  color: #fff;
}

.selected-slot {
  display: none;
  align-items: center;
  gap: 0.7rem;
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.1rem;
  color: #fff;
  font-weight: 600;
  margin-bottom: 1.2rem;
}
.selected-slot.is-visible {
  display: flex;
}

.loading {
  color: var(--muted);
  font-size: 0.93rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid var(--line-bright);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- footer ------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  padding-block: 3rem 2.2rem;
  background: var(--bg-1);
}

/* The brand block takes the wide column; the link and contact lists share what
   is left. auto-fit rather than a fixed count, so adding or removing a column
   doesn't need this rule edited again. */
.footer__grid {
  display: grid;
  /* INVALID BEFORE: `1.6fr repeat(auto-fit, minmax(9rem, 1fr))`.
     `repeat(auto-fit, …)` may not be combined with an `fr` track — the browser
     rejects the whole declaration rather than part of it, so the footer silently
     fell back to a single stacked column on every page at every desktop width.
     It only looked right below 900px, where the media queries below took over.
     An explicit count is valid; if a fifth footer column is ever added, change
     the 3 here to match. */
  grid-template-columns: 1.6fr repeat(3, minmax(9rem, 1fr));
  gap: var(--gap-lg);
  margin-bottom: 2.4rem;
}
@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--gap);
  }
}

.footer__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.9rem;
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.footer__links a {
  color: var(--text-2);
  font-size: 0.93rem;
}
.footer__links a:hover {
  color: var(--accent);
}

.footer__bottom {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--dim);
}

/* --- scroll reveal ------------------------------------------------------ */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Never hide content from a visitor with JS disabled. */
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}

/* --- utilities ---------------------------------------------------------- */

.center {
  text-align: center;
}
.mt-0 {
  margin-top: 0;
}
.mt-sm {
  margin-top: var(--gap-sm);
}
.mt {
  margin-top: var(--gap);
}
.mt-lg {
  margin-top: var(--gap-lg);
}
.mt-xl {
  margin-top: var(--gap-xl);
}
.mb {
  margin-bottom: var(--gap);
}
.mb-lg {
  margin-bottom: var(--gap-lg);
}
.max-60 {
  max-width: 60ch;
}
.mx-auto {
  margin-inline: auto;
}

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

.skip-link {
  position: absolute;
  top: -60px;
  left: 1rem;
  z-index: 100;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 8px 8px;
  font-weight: 650;
  transition: top var(--fast);
}
.skip-link:focus {
  top: 0;
}

/* --- build demos -------------------------------------------------------- */
/* A demo is a poster-framed <video> plus a short "what you're looking at"
   column beside it. The grid collapses to a single column on narrow screens so
   the player always keeps its full width rather than shrinking into a strip. */

.demo {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}
@media (max-width: 900px) {
  .demo {
    grid-template-columns: 1fr;
  }
}

.demo__player {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #05070c;
  box-shadow: var(--glow), 0 26px 70px -24px rgba(0, 0, 0, 0.85);
}
/* aspect-ratio keeps the poster area reserved before the file loads, so the
   page does not jump when the video finally paints. */
.demo__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #05070c;
}

.demo__meta {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.demo__runtime {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.demo__chapters {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.demo__chapters li {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0.7rem;
  align-items: baseline;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}
.demo__chapters li:last-child {
  border-bottom: 0;
}
.demo__time {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 650;
  font-size: 0.9rem;
}

/* Placeholder tiles for builds whose demo has not been filmed yet. Muted and
   non-interactive so they read as "coming", not as a broken link. */
.demo-soon {
  opacity: 0.62;
}
.demo-soon__badge {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  margin-top: 0.6rem;
}