/*
 * Decision pages (V31 pass 2, WP4): /get-started and /pricing. Loaded after site.css on those
 * two pages only. White grounds; navy only for text, small nodes and the primary button; the
 * wave only as a 2px top edge and as the record line. Inter only. Reduced motion safe.
 */
:root {
  /* Form controls and radio nodes: navy at 52% keeps 3:1 against white (WCAG 1.4.11). */
  --dc-control: color-mix(in oklab, var(--social) 52%, #fff);
  --dc-check: var(--bio);
}

/* ---------- Shared ---------- */
.dc-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* A small teal check, drawn in CSS so it never enters the text or the accessibility tree. */
.dc-checks > li {
  position: relative;
  padding-left: 1.625rem;
}
.dc-checks > li::before {
  content: "";
  position: absolute;
  left: 0.1875rem;
  top: 0.42em;
  width: 0.625rem;
  height: 0.3125rem;
  border-left: 2px solid var(--dc-check);
  border-bottom: 2px solid var(--dc-check);
  transform: rotate(-45deg);
}
/* A text link with an arrow (the tertiary call to action). */
.dc-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.375rem;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.dc-link svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  transition: transform 0.2s ease;
}
.dc-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dc-link:hover svg {
  transform: translateX(2px);
}
.dc-cta-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.dc-cta-pair .btn {
  min-height: 48px;
  padding: 0.75rem 1.375rem;
}
.btn:disabled {
  cursor: progress;
  opacity: 0.6;
  transform: none;
}

/* ==========================================================================
   /get-started: one decision, one visible form
   ========================================================================== */
.gs {
  padding-block: clamp(2rem, 0.75rem + 3.2vw, 4rem) clamp(4.5rem, 3rem + 5vw, 8rem);
}
.gs-grid {
  display: grid;
  gap: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 64rem) {
  .gs-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "intro decide"
      "rail decide";
    column-gap: clamp(3rem, 0.5rem + 4.5vw, 6rem);
    row-gap: 3.25rem;
  }
  .gs-intro {
    grid-area: intro;
  }
  .gs-decide {
    grid-area: decide;
  }
  .gs-rail {
    grid-area: rail;
  }
}

/* Intro */
.gs-intro .rail-label {
  margin: 0 0 1rem;
  padding: 0;
}
.gs-intro h1 {
  max-width: 13ch;
  margin: 0;
  color: var(--ink);
  font: 620 var(--fs-display-2) / 1.05 var(--sans);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.gs-intro .lede {
  max-width: 34rem;
  margin: 1.25rem 0 0;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem);
  line-height: 1.55;
}
/* V6 (Erez, 2026-09-30): no rule above a note or between rail blocks; spacing separates them. */
.gs-fit {
  max-width: 34rem;
  margin: 1.5rem 0 0;
  color: var(--ink-mute);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* The intent chooser: a radio group of three cards; a segmented control on phones. */
.gs-choose {
  margin: 0 0 0.625rem;
  color: var(--ink);
  font: 600 0.9375rem/1.4 var(--sans);
  letter-spacing: -0.005em;
}
html:not(.js) .gs-choose,
html:not(.js) .gs-chooser {
  display: none;
}
.gs-chooser {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 0.875rem;
}
.gs-opt {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 44px;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3125rem;
  margin: 0;
  padding: 0.875rem 1rem 0.9375rem;
  overflow: hidden;
  border: 1px solid var(--border-med);
  border-radius: var(--r-card);
  color: var(--ink-2);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
/* The chosen card's 2px wave top edge. */
.gs-opt::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--wave);
  opacity: 0;
  transition: opacity 0.2s ease;
}
/* The radio node: hollow until chosen, then filled (the record grammar). */
.gs-opt::after {
  content: "";
  position: absolute;
  top: 0.875rem;
  right: 1rem;
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid var(--dc-control);
  border-radius: 50%;
  background: #fff;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.gs-opt:hover {
  border-color: var(--dc-control);
}
.gs-opt-title {
  padding-right: 1.75rem;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}
.gs-opt-text {
  color: var(--ink-mute);
  font-size: 0.8125rem;
  line-height: 1.45;
}
/* The chosen card follows html[data-intent], which the head script sets before first paint and
   site.js keeps in step with aria-checked, so a deep link never shows the wrong card first. */
html[data-intent="start"] .gs-opt[data-intent="start"],
html[data-intent="see"] .gs-opt[data-intent="see"],
html[data-intent="ask"] .gs-opt[data-intent="ask"] {
  border-color: var(--ink);
  box-shadow: var(--shadow-xs);
}
html[data-intent="start"] .gs-opt[data-intent="start"]::before,
html[data-intent="see"] .gs-opt[data-intent="see"]::before,
html[data-intent="ask"] .gs-opt[data-intent="ask"]::before {
  opacity: 1;
}
html[data-intent="start"] .gs-opt[data-intent="start"]::after,
html[data-intent="see"] .gs-opt[data-intent="see"]::after,
html[data-intent="ask"] .gs-opt[data-intent="ask"]::after {
  border-color: var(--ink);
  background: var(--ink);
  box-shadow: inset 0 0 0 3px #fff;
}

/* The card that holds the active panel. */
.gs-card {
  --gs-pad: clamp(1.125rem, 0.5rem + 1.9vw, 2rem);
  position: relative;
  overflow: hidden;
  padding: var(--gs-pad);
  border-radius: var(--r-frame);
  background: #fff;
  box-shadow: var(--shadow-frame);
}
.gs-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--wave);
}

/* Panels. Before site.js runs, html[data-intent] (from the head script) picks the panel; site.js
   then keeps [hidden] in step. Without JavaScript: the scheduler and the (disabled) form. */
[data-intent-panel][hidden],
[data-form-panel][hidden],
[data-topic-field][hidden],
[data-plan-chip][hidden] {
  display: none !important;
}
html.js [data-intent-panel] {
  display: none;
}
html.js[data-intent="start"] #start,
html.js[data-intent="see"] #see,
html.js[data-intent="ask"] #ask {
  display: block;
}
html:not(.js) #see,
html:not(.js) #ask {
  display: none;
}
html.js[data-intent="see"] body[data-founders-embed="on"] [data-form-panel] {
  display: none;
}
html.js:not([data-intent="ask"]) [data-topic-field] {
  display: none;
}
html.js:not([data-intent="ask"]) .gs-select-row {
  grid-template-columns: minmax(0, 1fr);
}
/* A #start, #see or #ask link opens the panel without scrolling past the intro and chooser. */
.gs-panel,
[data-founders-slot] {
  scroll-margin-top: 100vh;
}
.gs-panel .rail-label {
  margin: 0 0 0.5rem;
  padding: 0;
}
.gs-panel h3 {
  margin: 0;
  color: var(--ink);
  font: 620 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.25 var(--sans);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* The question on its own line, so the answer never splits "20 / minutes". */
.gs-h3-lead {
  display: block;
}
.gs-panel-intro {
  max-width: 38rem;
  margin: 0.375rem 0 0;
  color: var(--ink-2);
  font-size: 0.96875rem;
  line-height: 1.6;
}
.gs-phi {
  margin: 0.625rem 0 0;
}
.gs-fallback {
  margin: 0.75rem 0 0;
}
.gs-fallback a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The Base44 intake: no fake chrome, tall enough that its submit is never hidden. */
.gs-card .scheduler {
  position: relative;
  margin: 1rem 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}
.gs-card .scheduler-skeleton {
  inset: 0;
  padding: 2rem;
  border-radius: 0;
}
#bookFrame {
  display: block;
  width: 100%;
  height: auto;
  min-height: 940px;
  border: 0;
  border-radius: 0;
  background: #fff;
}
#foundersFrame {
  display: block;
  width: 100%;
  min-height: 900px;
  margin-top: 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: #fff;
}

/* The native form (founders request or question). */
.gs-form {
  margin-top: 2rem;
}
.gs-form .form-status {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.gs-form noscript p {
  margin: 0 0 0.75rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.gs-form .gs-phi {
  margin: 0 0 1rem;
}
.gs-form .contact-form fieldset {
  gap: 1rem;
}
.gs-form .form-two {
  gap: 1rem;
}
.gs-form .field {
  gap: 0.375rem;
}
.gs-form .field label {
  color: var(--ink);
  font: 600 0.8125rem/1.3 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
.gs-form .field input,
.gs-form .field select,
.gs-form .field textarea {
  min-height: 48px;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--dc-control);
  border-radius: var(--r-btn);
  color: var(--ink);
  background-color: #fff;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.2s ease;
}
.gs-form .field select {
  padding-right: 2.5rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23003562' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 0.9375rem center;
  background-repeat: no-repeat;
  background-size: 0.75rem;
}
.gs-form .field textarea {
  min-height: 7.5rem;
}
.gs-form .field input::placeholder,
.gs-form .field textarea::placeholder {
  color: var(--ink-mute);
  opacity: 1;
}
.gs-form .field input:hover,
.gs-form .field select:hover,
.gs-form .field textarea:hover,
.gs-form .field input:focus,
.gs-form .field select:focus,
.gs-form .field textarea:focus {
  border-color: var(--ink);
}
.gs-form .field :disabled {
  cursor: not-allowed;
  background-color: var(--wash);
}
.gs-form .contact-form .btn {
  justify-self: start;
  min-width: 15rem;
  min-height: 48px;
  margin-top: 0.25rem;
  padding: 0.75rem 1.5rem;
}

/* The rail: the decision, what happens next, trust, fit and patients. */
.gs-rail {
  display: grid;
  gap: 2rem;
  align-content: start;
}
.gs-rail h2 {
  margin: 0;
  color: var(--ink);
  font: 620 1.125rem/1.3 var(--sans);
  letter-spacing: -0.015em;
}
.gs-box {
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-card);
  background: #fff;
}
/* The plan picked on /pricing: a small status block with the filled node the chooser uses. */
.gs-chip {
  position: relative;
  margin: 0.875rem 0 0;
  padding: 0.625rem 0.875rem 0.625rem 2rem;
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
}
.gs-chip::before {
  content: "";
  position: absolute;
  top: 0.9375rem;
  left: 0.875rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ink);
}
.gs-chip a {
  margin: -0.6875rem -0.25rem;
  padding: 0.6875rem 0.25rem;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gs-terms {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.gs-terms li {
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.gs-terms .gs-terms-lead {
  margin-bottom: 0.25rem;
  padding-left: 0;
  color: var(--ink);
  font-size: 1rem;
}
.gs-terms .gs-terms-lead::before {
  content: none;
}
/* A plan part with no words for the picked plan (data-plan-<plan>="", emptied by site.js) takes
   no room: a dropped bullet leaves no empty check behind (Premium drops the first-10 line). */
[data-plan-part]:empty {
  display: none;
}
.gs-terms-lead b {
  font-weight: 620;
}
.gs-price {
  font-variant-numeric: tabular-nums lining-nums;
}
.gs-plan-lede {
  margin: 0.875rem 0 0;
  color: var(--ink-mute);
  font-size: 0.875rem;
  line-height: 1.55;
}
.gs-bridge-title {
  margin: 1.75rem 0 0;
  color: var(--ink-mute);
  font: 600 0.75rem/1.3 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.gs-bridge {
  display: grid;
  gap: 0.875rem;
  margin: 0.875rem 0 0;
}
.gs-bridge dt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font: 600 0.75rem/1.3 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* A filled node: what Beacon puts on the record (the With Beacon state). */
.gs-bridge dt::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
}
.gs-bridge dd {
  margin: 0.25rem 0 0 0.9375rem;
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.55;
}
.gs-box .dc-link {
  margin-top: 0.625rem;
}

/* What happens next: four steps on one thin record line; the first node is filled. */
.gs-steps {
  position: relative;
  display: grid;
  gap: 1.25rem;
  margin: 1.125rem 0 0;
  padding: 0;
  list-style: none;
}
.gs-steps::before {
  content: "";
  position: absolute;
  left: 0.4375rem;
  top: 0.625rem;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--record-line-v);
}
.gs-steps li {
  position: relative;
  padding-left: 2.25rem;
}
/* The last step covers the line below its node, so the line ends on it. */
.gs-steps li:last-child {
  background: linear-gradient(#fff, #fff) no-repeat 0 0.875rem / 1rem 100%;
}
.gs-steps li::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0.125rem;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--dc-control);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px #fff;
}
.gs-steps .gs-step-now::before {
  border-color: var(--ink);
  background: var(--ink);
}
.gs-steps p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.gs-step-label {
  display: block;
  margin-bottom: 0.1875rem;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}
.gs-step-now .gs-step-label {
  color: var(--accent);
}
.gs-steps .gs-meet {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.875rem 0 0;
  padding: 0.625rem 0.875rem 0.625rem 0.625rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  font-size: 0.875rem;
  line-height: 1.45;
}
.gs-meet img {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--wash);
}
.gs-meet b {
  color: var(--ink);
  font-weight: 600;
}
/* The setup-call content in the rail ([data-intent-only="start"]: "What happens next" and, inside
   it, "Who you'll meet") describes the 30-minute setup call, so it shows with the Start intent only
   (the founders call is 20 minutes with Erez and Sam, GS-10). It follows html[data-intent], which
   the head script sets before first paint, so it never flashes; without JavaScript the page shows
   the setup call (#start), and this content with it. */
html.js:not([data-intent="start"]) [data-intent-only="start"] {
  display: none;
}

.gs-trust {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0.5rem 0 0;
  list-style: none;
}
.gs-trust li {
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.5;
}
.gs-notes {
  display: grid;
  gap: 0.625rem;
  padding-top: 0.25rem;
}
.gs-notes .fine {
  max-width: 68ch;
  margin: 0;
}

/* Tablet: the rail runs in two columns under the card. */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .gs-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
  .gs-rail > .gs-trust,
  .gs-rail > .gs-notes {
    grid-column: 1 / -1;
  }
  /* Without the setup-call steps beside it (See it first, Ask a question), the box takes the row. */
  html.js:not([data-intent="start"]) .gs-rail > .gs-box {
    grid-column: 1 / -1;
  }
}

/* Phone: the chooser becomes a compact three-segment control (titles only). */
@media (max-width: 39.99rem) {
  .gs-choose {
    margin-bottom: 0.625rem;
  }
  .gs-chooser {
    gap: 0.25rem;
    margin-bottom: 0.875rem;
    padding: 0.25rem;
    border: 1px solid var(--border-med);
    border-radius: 14px;
    background: #fff;
  }
  .gs-opt {
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.375rem;
    border-color: transparent;
    border-radius: 10px;
    text-align: center;
  }
  .gs-opt::after,
  .gs-opt-text {
    display: none;
  }
  .gs-opt-title {
    padding-right: 0;
    font-size: 0.8125rem;
    line-height: 1.25;
    text-wrap: balance;
  }
  .gs-fit {
    margin-top: 1.125rem;
    padding-top: 0.875rem;
  }
  .gs-card .scheduler {
    margin-inline: calc(-1 * var(--gs-pad));
    border-inline: 0;
    border-radius: 0;
  }
  #bookFrame {
    min-height: 1000px;
  }
  .gs-form {
    margin-top: 1.75rem;
  }
  .gs-form .contact-form .btn {
    justify-self: stretch;
    min-width: 0;
  }
}

/* ==========================================================================
   /pricing
   ========================================================================== */
.page-pricing .page-hero .lede {
  max-width: 60ch;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
  line-height: 1.6;
}

/* The early clinic price: a quiet white card with a small label (text unchanged, held). */
.page-pricing .banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.25rem;
  margin: 2.5rem 0 0;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: #fff;
}
.page-pricing .banner::before,
.page-pricing .banner::after {
  content: none;
}
.page-pricing .banner .mono {
  color: var(--ink-mute);
  font: 600 0.75rem/1.4 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.page-pricing .banner p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.page-pricing .banner b {
  color: var(--ink);
  font-weight: 600;
}

/* Plan cards: the same names, prices, units, intros and bullets as the home plans. */
.page-pricing .plans {
  gap: 1rem;
  margin-top: 1.5rem;
  align-items: stretch;
}
.page-pricing .plan {
  display: flex;
  min-height: 0;
  flex-direction: column;
  padding: clamp(1.5rem, 1rem + 1.2vw, 2rem);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: none;
}
.page-pricing .plan.featured {
  overflow: hidden;
  border-color: color-mix(in oklab, var(--social) 30%, transparent);
  background: #fff;
  box-shadow:
    0 1px 2px rgb(0 53 98 / 0.04),
    0 24px 48px -28px rgb(0 53 98 / 0.28);
}
/* Light keeps the only wave top edge. */
.page-pricing .plan.featured::before {
  height: 2px;
}
.page-pricing .plan-tag {
  margin: 0;
  color: var(--accent);
  font: 600 0.75rem/1.35 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.page-pricing .plan h2 {
  margin: 0.5rem 0 0;
  color: var(--ink);
  font: 620 1.5rem/1.2 var(--sans);
  letter-spacing: -0.02em;
}
.page-pricing .price {
  display: flex;
  min-height: 5.25rem;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
}
.page-pricing .price b {
  display: block;
  color: var(--ink);
  font: 620 clamp(2.5rem, 2rem + 1.4vw, 3.25rem) / 1 var(--sans);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums lining-nums;
}
.page-pricing .price span {
  color: var(--ink-mute);
  font-size: 0.875rem;
  line-height: 1.4;
  white-space: nowrap;
}
.page-pricing .plan > p:not(.plan-tag) {
  margin: 1rem 0 0;
  color: var(--ink-2);
  font-size: 0.96875rem;
  line-height: 1.55;
}
.page-pricing .plan ul {
  display: grid;
  align-content: start;
  gap: 0.625rem;
  margin: 1.5rem 0 1.75rem;
  padding: 0;
  list-style: none;
}
.page-pricing .plan li {
  padding: 0 0 0 1.625rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.page-pricing .plan li::before {
  left: 0.1875rem;
  top: 0.42em;
  width: 0.625rem;
  height: 0.3125rem;
  border-left: 2px solid var(--dc-check);
  border-bottom: 2px solid var(--dc-check);
  border-radius: 0;
  background: none;
  transform: rotate(-45deg);
}
.page-pricing .plan .btn {
  width: 100%;
  min-height: 48px;
  margin-top: auto;
}
/* Side by side, the three cards share their rows (tag, name, price, intro, list, terms, button), so
   prices, lists and buttons line up even when a tag or an intro wraps. Stacked cards and
   browsers without subgrid keep the flex column above. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 981px) {
    .page-pricing .plans {
      grid-template-rows: repeat(7, auto);
      row-gap: 0;
    }
    .page-pricing .plan {
      display: grid;
      grid-row: span 7;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    .page-pricing .price {
      min-height: 0;
    }
    .page-pricing .plan .btn {
      align-self: end;
      margin-top: 0;
    }
  }
}

/* The trust row under the plans. */
.pr-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem 2rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.pr-trust li {
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* The words-only bridge: what every plan price buys back, on the solid record line. */
.pr-bridge {
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-card);
  background: #fff;
}
.pr-bridge h2 {
  margin: 0;
  color: var(--ink);
  font: 620 clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem) / 1.2 var(--sans);
  letter-spacing: -0.02em;
}
.pr-bridge-rows {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
}
.pr-bridge-rows::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--record-line);
}
.pr-bridge-rows > div {
  position: relative;
}
.pr-bridge-rows > div::before {
  content: "";
  position: absolute;
  top: calc(-1.5rem - 5px);
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 3px #fff;
}
.pr-bridge dt {
  color: var(--ink);
  font: 600 0.75rem/1.3 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pr-bridge dd {
  margin: 0.5rem 0 0;
  color: var(--ink-2);
  font-size: 0.96875rem;
  line-height: 1.55;
}
.pr-bridge .dc-link {
  margin-top: 1.25rem;
}

/* Answers */
.page-pricing .section {
  padding-block: var(--section-y);
}
.page-pricing .faq {
  margin-top: 2.5rem;
}
.page-pricing .faq details {
  padding: 0.875rem 1.5rem;
}
.page-pricing .faq summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink);
  font: 600 clamp(1.0625rem, 1rem + 0.3vw, 1.25rem) / 1.4 var(--sans);
  letter-spacing: -0.01em;
}
.page-pricing .faq p {
  max-width: 70ch;
  margin: 0.5rem 0 0.25rem;
  color: var(--ink-2);
  font-size: 0.96875rem;
  line-height: 1.65;
}
.page-pricing .section > .wrap > .fine {
  margin: 2rem 0 0;
}

/* The closing block before the fine print: one first step, two calls to action. */
.pr-close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-frame);
  background: #fff;
}
.pr-close h2 {
  max-width: 18ch;
  margin: 0;
  color: var(--ink);
  font: 620 var(--fs-display-3) / 1.1 var(--sans);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

@media (max-width: 47.99rem) {
  .pr-bridge-rows {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }
  .pr-bridge-rows::before {
    top: 0.375rem;
    bottom: 0;
    left: 5px;
    right: auto;
    width: 2px;
    height: auto;
    background: var(--record-line-v);
  }
  .pr-bridge-rows > div {
    padding-left: 1.75rem;
  }
  .pr-bridge-rows > div::before {
    top: 0.0625rem;
    left: 0;
  }
  /* The last row covers the line below its node, so the line ends on it. */
  .pr-bridge-rows > div:last-child {
    background: linear-gradient(#fff, #fff) no-repeat 0 0.75rem / 1rem 100%;
  }
}
@media (max-width: 39.99rem) {
  .pr-trust {
    display: grid;
    justify-content: stretch;
    gap: 0.625rem;
  }
  .pr-close .dc-cta-pair {
    width: 100%;
  }
  .pr-close .dc-cta-pair .btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-opt,
  .gs-opt::before,
  .gs-opt::after,
  .dc-link svg,
  .gs-form .field input,
  .gs-form .field select,
  .gs-form .field textarea {
    transition: none;
  }
  .dc-link:hover svg {
    transform: none;
  }
}

/* ==========================================================================
   V31 pass 3: /pricing and /get-started take the wave as material. /pricing:
   the hero field on the top band and the growth rings beside the headline;
   gradient hairlines and a glow on the plans; a halo behind the close.
   /get-started: the field behind the decision column, the chosen option in a
   gradient border with a glow and a conic node, a halo behind the form card.
   The shared pieces (.p3-*) live in site.css. No new words.
   ========================================================================== */

/* ---- /pricing: the hero ---- */
.page-pricing .p3-hero > .p3-field {
  --p3-mask-from: 64%;
  --p3-mask-mid: 74%;
  --p3-mask-to: 88%;
  top: clamp(4rem, 1rem + 4vw, 6.5rem);
  bottom: auto;
  height: clamp(20rem, 14rem + 12vw, 28rem);
}
.page-pricing .p3-grow {
  --p3-w: 18.5rem;
  display: none;
}
@media (min-width: 64rem) {
  .page-pricing .page-hero .rail[data-shell-hero] {
    grid-template-columns: 160px minmax(0, 1fr) minmax(14rem, 18.5rem);
    align-items: start;
  }
  .page-pricing .p3-grow {
    display: block;
    align-self: center;
    margin: -1rem 0 0;
  }
}
/* Below 64rem the plans follow the lede straight away and are the page's visual. */
@media (max-width: 63.99rem) {
  .page-pricing .p3-hero > .p3-field {
    display: none;
  }
}

/* ---- /pricing: the plans ---- */
.page-pricing .plans {
  position: relative;
}
.page-pricing .plan.featured {
  box-shadow:
    0 1px 2px rgb(0 53 98 / 0.04),
    0 24px 48px -28px rgb(0 53 98 / 0.28),
    0 34px 80px -36px color-mix(in oklab, var(--psycho) 60%, transparent);
}
/* V6: the plan list sits on spacing (no rule over it), and the answers section starts on its
   wash ground (no edge line). */
/* The close: a soft halo behind the two calls to action. */
.pr-close {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pr-close::before {
  content: "";
  position: absolute;
  right: -12%;
  top: 50%;
  z-index: -1;
  width: min(40rem, 90%);
  aspect-ratio: 2 / 1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in oklab, var(--psycho) 24%, transparent),
    color-mix(in oklab, var(--accent) 10%, transparent) 50%,
    color-mix(in oklab, var(--bio) 6%, transparent) 72%,
    transparent
  );
  transform: translateY(-50%);
}
.pr-close::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--wave);
}

/* ---- /get-started: the field behind the decision column (64rem and up) ---- */
.gs {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.gs > .wrap {
  position: relative;
  z-index: 1;
}
.gs > .gs-field {
  --p3-mask-from: 44%;
  --p3-mask-mid: 60%;
  --p3-mask-to: 78%;
  top: -2rem;
  bottom: auto;
  height: clamp(18rem, 12rem + 12vw, 27rem);
}
@media (max-width: 63.99rem) {
  .gs > .gs-field {
    display: none;
  }
}
/* A soft halo behind the form card. */
.gs-decide {
  position: relative;
}
.gs-decide::before {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  top: -1.5rem;
  z-index: -1;
  height: min(30rem, 60%);
  border-radius: 50%;
  background: conic-gradient(
    from 200deg,
    color-mix(in oklab, var(--accent) 30%, transparent),
    color-mix(in oklab, var(--psycho) 30%, transparent),
    color-mix(in oklab, var(--bio-tint) 34%, transparent),
    color-mix(in oklab, var(--bio) 26%, transparent),
    color-mix(in oklab, var(--accent) 30%, transparent)
  );
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
}
html.motion:not([data-motion="paused"]) .gs-decide::before {
  animation: p3-in 1.2s ease 0.35s both;
}

/* ---- /get-started: the chooser in the wave ---- */
.gs-opt:hover {
  border-color: color-mix(in oklab, var(--psycho) 55%, var(--border-med));
  box-shadow: 0 12px 28px -20px color-mix(in oklab, var(--psycho) 70%, transparent);
}
html[data-intent="start"] .gs-opt[data-intent="start"],
html[data-intent="see"] .gs-opt[data-intent="see"],
html[data-intent="ask"] .gs-opt[data-intent="ask"] {
  border-color: transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--accent), var(--psycho) 40%, var(--bio) 76%, var(--social)) border-box;
  box-shadow:
    0 2px 6px -2px rgb(0 53 98 / 0.08),
    0 18px 38px -22px color-mix(in oklab, var(--psycho) 75%, transparent);
}
/* The chosen node: a conic ring with a white centre and a glow (3:1 against white). */
html[data-intent="start"] .gs-opt[data-intent="start"]::after,
html[data-intent="see"] .gs-opt[data-intent="see"]::after,
html[data-intent="ask"] .gs-opt[data-intent="ask"]::after {
  border-color: transparent;
  background:
    radial-gradient(circle, #fff 0 32%, transparent 35%),
    conic-gradient(from 210deg, var(--accent), var(--psycho), var(--bio), var(--accent));
  box-shadow: 0 0 14px 2px color-mix(in oklab, var(--psycho) 45%, transparent);
}
/* The rail box takes the wave top edge. */
.gs-box {
  position: relative;
  overflow: hidden;
}
.gs-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--wave);
}
/* Forced colours: the chosen option keeps a visible border and a filled node. */
@media (forced-colors: active) {
  html[data-intent="start"] .gs-opt[data-intent="start"],
  html[data-intent="see"] .gs-opt[data-intent="see"],
  html[data-intent="ask"] .gs-opt[data-intent="ask"] {
    border: 2px solid Highlight;
  }
  html[data-intent="start"] .gs-opt[data-intent="start"]::after,
  html[data-intent="see"] .gs-opt[data-intent="see"]::after,
  html[data-intent="ask"] .gs-opt[data-intent="ask"]::after {
    forced-color-adjust: none;
    border-color: Highlight;
    background: Highlight;
  }
}

/* Native call requests share one accessible form across all three intents. */
.gs-form .contact-form .field { margin-bottom:1rem; }
.gs-form fieldset { min-width:0; }
.practice-details { margin:1rem 0 1.4rem; padding:1rem; border:1px solid var(--line,#dce3ed); border-radius:12px; }
.practice-details summary { font-weight:600; cursor:pointer; padding:.4rem 0; }
.practice-details[open] summary { margin-bottom:1rem; }
.field-error { display:block; margin-top:.35rem; color:#9a3149; font-size:.8125rem; }
.field-error[hidden] { display:none; }
.gs-form [aria-invalid="true"] { border-color:#9a3149; }
#form-validation a { text-decoration:underline; }
#contact-success strong { display:block; margin-bottom:.35rem; }
#contact-form .fine { line-height:1.6; margin:1rem 0; }

/* The direct request has one clear field rhythm and a visible question. */
.gs-form .practice-details { border:0; padding-top:.6rem; }
.gs-form .practice-details summary { min-height:44px; display:flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.875rem; color:var(--ink); }
.gs-form .practice-details summary::before { content:'+'; font-size:1.25rem; font-weight:400; }
.gs-form .practice-details[open] summary::before { content:'−'; }
.gs-form .practice-details .field { margin-top:.875rem; }
.gs-form #preview-form-note { border:1px solid #d8e4eb; border-radius:8px; padding:.7rem .85rem; background:#f5f8fa; font-size:.8125rem; }
.gs-form .contact-form .btn:disabled { color:#526777; background:#e9eff3; border-color:#d5dfe7; box-shadow:none; cursor:default; opacity:1; }
.gs-form .contact-form fieldset > .fine { margin:0; }
@media(min-width:40rem) {
 .gs-form .contact-form fieldset { grid-template-columns:1fr 1fr; column-gap:1rem; }
 .gs-form fieldset > :is(.form-status,details,p,button,[data-topic-field],.field:has(textarea)) { grid-column:1 / -1; }
}
@media(max-width:39.99rem) {
 .gs-card { padding:1.25rem; }
 .gs-form .contact-form .btn { width:100%; min-width:0; }
}

.page-pricing .plan > p.plan-term { margin:0 0 1rem; font-size:.8125rem; line-height:1.55; }