/* Reusable UI components: buttons, the wordmark, badges, cards, the product
   "mock" UIs (reused across home + features), checklists, pricing tiers, FAQ,
   and the animated assistant panel. */

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: none;
}
/* The one warm accent: coral seats the action. Deep teal label, 5.3:1. */
.btn--primary {
  background: var(--coral);
  color: var(--accent-deep);
}
.btn--primary:hover {
  background: #f5a487;
}
/* On the deep band the accent fill IS the band's own family: --accent-strong on
   --accent-deep is 1.51:1, so the site's main conversion button would read as a
   faint plaque rather than a control (WCAG 1.4.11 wants >=3:1 for the boundary
   that identifies it). Invert it there — the same move .btn--soon already makes
   on this band — for a 10.65:1 edge and 10.65:1 label. */
.band--teal .btn--primary {
  background: var(--coral);
  color: var(--accent-deep);
}
.band--teal .btn--primary:hover {
  background: #f5a487;
}
.btn--ghost {
  background: transparent;
  color: var(--accent-deep);
  border-color: var(--accent-deep);
}
.btn--ghost:hover {
  background: var(--accent-deep);
  color: var(--bone);
}
.btn--lg {
  padding: 0.9rem 1.75rem;
  font-size: 1.0625rem;
}
/* Pre-launch stand-in for the Start-free button (lib/launch-stage.js). It is a
   <span>, not a disabled <a>: there is no destination yet, so it should not look
   or behave like something that can be activated — muted, no hover, no pointer. */
.btn--soon {
  background: transparent;
  color: var(--accent-strong);
  border-color: var(--border-2);
  cursor: default;
}
.btn--soon:hover {
  transform: none;
}
.site-header .btn--soon,
.band--teal .btn--soon,
.page-header .btn--soon {
  color: var(--bone);
  border-color: var(--on-dark-mute);
}

/* A launch-status line under a page header — the sentence that keeps a
   present-tense feature list honest before sign-ups open. */
.status-note {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--accent-strong);
  background: var(--white);
  border-radius: var(--radius-sm);
  color: var(--teal-body);
  font-size: 0.9375rem;
}
/* On a white band the note needs its own ground to read as a callout. */
.band--white .status-note {
  background: var(--bone);
}

/* A bold, underlined text link. */
.link-arrow {
  color: var(--accent-strong);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.link-arrow:hover {
  color: var(--accent-deep);
  text-decoration-color: var(--coral);
}
.band--teal .link-arrow,
.page-header .link-arrow {
  color: var(--white);
}

/* ---------- Wordmark (the brand kit's lockup, as an image) ---------- */
/* The kit's usage rules: the lockup is never under 120px wide, and it keeps clear
   space equal to the height of its "l" (13% of its width, so ~18px at 140px) on
   every side. The header's vertical padding and .nav's gap provide that space. The
   footer tagline sits just under the lockup as its descriptor, and the footer's own
   padding gives the pair its clear space. */
.wordmark {
  display: inline-flex;
  flex-shrink: 0;
  align-self: center;
  line-height: 0;
}
.wordmark img {
  display: block;
  width: 140px;
  height: auto;
}
/* Block-level in the footer, so no text line (and its descender space) sits under it
   and the tagline stays tucked beneath the lockup. */
.wordmark--footer {
  display: flex;
  width: max-content;
}
.wordmark--footer img {
  width: 128px;
}

/* ---------- Badges / pills ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--coral-bg);
  color: var(--coral-ink);
  white-space: nowrap;
}
.badge--mint {
  background: var(--mint-bg);
  color: var(--mint-ink);
}
.badge--teal {
  background: color-mix(in srgb, var(--accent-strong) 12%, var(--white));
  color: var(--accent-strong);
}
.badge--accent {
  background: var(--accent-strong);
  color: var(--bone);
}

/* ---------- Cards & product mocks ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  color: var(--teal-ink);
}
.mock-row {
  display: flex;
  gap: 0.875rem;
}
.mock-row > .card {
  flex: 1;
  min-width: 0;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.card-title {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--accent-strong);
}
.card-meta {
  font-size: 0.9375rem;
  color: var(--teal-muted);
  margin-bottom: 0.85rem;
}
.card-kicker {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--teal-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}
.card-figure {
  font-family: var(--body);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent-strong);
  margin-bottom: 0.4rem;
}
.card-figure small {
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--teal-muted);
}

/* progress bar */
.progress {
  background: var(--track);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}
.progress > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--sage-mid);
  width: 100%;
}
.progress .w-85 {
  width: 85%;
}
.card-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--teal-muted);
  margin-top: 0.75rem;
}

/* roster / list rows with avatars */
.list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.list-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  color: var(--teal-ink);
}
.list-item:first-child {
  border-top: 0;
}
.list-item .badge {
  margin-left: auto;
}
.avatar {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bone);
  background: var(--accent-strong);
}
.avatar--sage {
  background: var(--sage);
}

/* events list (date chip + text) */
.event {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--border);
}
.event:first-child {
  border-top: 0;
}
.event-date {
  flex: none;
  text-align: center;
  line-height: 1.05;
}
.event-date b {
  display: block;
  font-family: var(--body);
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  color: var(--accent-strong);
}
.event-date span {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.event-body {
  min-width: 0;
}
.event-body b {
  color: var(--teal-ink);
  font-weight: 600;
}
.event-body span {
  display: block;
  font-size: 0.8125rem;
  color: var(--teal-muted);
}
.event .badge {
  margin-left: auto;
}

/* browser / website preview */
.browser {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(23, 90, 97, 0.08);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: var(--linen);
  border-bottom: 1px solid var(--border);
}
.browser-dots {
  display: flex;
  gap: 0.3rem;
}
.browser-dots i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--border-2);
}
.browser-url {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--teal-muted);
}
.browser-site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--accent-strong);
  color: var(--bone);
  padding: 0.75rem 1rem;
}
.browser-site-nav {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.8125rem;
}
.browser-site-body {
  padding: 1rem;
}
.browser-site-body h3 {
  font-size: 1.35rem;
  margin-bottom: 0.35rem;
}
.browser-site-body p {
  font-size: 0.875rem;
  color: var(--teal-muted);
  margin-bottom: 0.85rem;
}

/* ---------- Checklists (feature bullets) ---------- */
.checklist {
  list-style: none;
  display: grid;
  gap: 0.75rem 2rem;
}
@media (min-width: 34rem) {
  .checklist--2col {
    grid-template-columns: 1fr 1fr;
  }
}
/* The check sits in the item's padding, not a grid column, so a link or .tag inside the
   item stays in the text's flow instead of dropping into the check's column. */
.checklist li {
  position: relative;
  padding-left: 1.85rem;
  color: var(--teal-body);
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.5em;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--coral);
}
.checklist .tag {
  color: var(--teal-muted);
  font-style: italic;
}

/* Quote / pull-line used on feature rows. */
.pullquote {
  border-left: 3px solid var(--accent-strong);
  padding-left: 1rem;
  margin-bottom: 1.25rem;
  font-family: var(--display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--accent-strong);
}

/* Small meta line under section copy. */
.meta-line {
  font-size: 0.875rem;
  color: var(--teal-muted);
  margin-top: 0.85rem;
}
/* The same detail when it is several separate facts: one per line, two columns
   where they fit, each on its own short rule. */
.meta-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.45rem 1.25rem;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--teal-muted);
  margin-top: 0.85rem;
}
.meta-list li {
  padding-left: 0.7rem;
  border-left: 2px solid var(--border-2);
}
/* Each item was a clause mid-sentence; set on its own line it starts a line. */
.meta-list li::first-letter {
  text-transform: uppercase;
}

/* ---------- "Pain" strip (3 columns on dark) ---------- */
.pain-grid {
  display: grid;
  gap: 1.5rem 2.5rem;
  margin-top: 2rem;
}
@media (min-width: 48rem) {
  .pain-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.pain-grid h3 {
  /* Coral only reads inside the deep band (4.83:1); it fails on --accent-strong (3.19:1). */
  color: var(--coral);
  font-family: var(--body);
  font-size: 1rem;
  margin-bottom: 0.4rem;
}
.pain-grid p {
  font-size: 0.9375rem;
  color: var(--on-dark-dim);
}

/* ---------- Numbered steps (home "How it works", the handoff guide) ---------- */
.steps {
  list-style: none;
  display: grid;
  gap: 1.5rem 2rem;
  margin-top: 2rem;
}
@media (min-width: 40rem) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64rem) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Single column at every width: the guide reads top to bottom. */
.steps--stack,
.steps--stack.steps {
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.steps li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
}
.steps .step-num {
  grid-row: 1 / span 2;
  font-family: var(--body);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent);
  padding-top: 0.25rem;
}
.steps h3 {
  font-family: var(--body);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--accent-strong);
}
.steps p {
  font-size: 0.9375rem;
  color: var(--teal-body);
  margin-top: 0.3rem;
}

/* Plain guide page (the handoff guide): a reading column of headed sections. */
.guide > h2 {
  font-size: 1.375rem;
  margin-top: 2.5rem;
  margin-bottom: 0.85rem;
}
/* A section that opens on its heading already has the band's padding above it. */
.guide > h2:first-child {
  margin-top: 0;
}
.guide > p {
  color: var(--teal-body);
}
.guide > p + p {
  margin-top: 1rem;
}
.guide > .lede {
  margin-bottom: 0;
}

/* ---------- About page: the team at the long table ---------- */
/* The long table of the wordmark: seats on a tabletop with two legs. One column per
   seat, so the table fits however many people sit at it. */
.table-scene {
  position: relative;
  max-width: 34rem;
  margin-inline: auto;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-bottom: clamp(2rem, 5vw, 3rem); /* room for the legs */
}
.table-seats {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: clamp(0.5rem, 3vw, 2rem);
  padding-inline: clamp(0.25rem, 4vw, 2.5rem);
}
.seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  border-radius: var(--radius);
}
.seat-photo {
  width: clamp(5.25rem, 28vw, 10rem);
  height: auto;
  aspect-ratio: 1;
  border-radius: 999px;
  object-fit: cover;
  background: var(--warm-2);
  border: 4px solid var(--bone);
  box-shadow: 0 0 0 4px var(--coral);
  transition: transform 0.2s ease;
}
.seat:hover .seat-photo,
.seat:focus-visible .seat-photo {
  transform: translateY(-6px);
}
/* A folded place card standing on the table, in front of the person. */
.place-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.6em;
  margin-top: -1rem;
  padding: 0.35rem 0.5rem;
  background: var(--white);
  border: 1px solid var(--border-2);
  border-bottom: 3px solid var(--coral);
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(23, 90, 97, 0.12);
  font-family: var(--display);
  font-size: clamp(0.8125rem, 2.6vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--accent-strong);
}
.seat:hover .place-card {
  color: var(--accent);
}
.tabletop {
  display: block;
  height: clamp(0.75rem, 2vw, 1rem);
  background: var(--walnut);
  color: var(--walnut);
  border-radius: 999px;
}
.tabletop::before,
.tabletop::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: clamp(0.5rem, 1.5vw, 0.75rem);
  height: clamp(2rem, 5vw, 3rem);
  background: currentColor;
  border-radius: 0 0 4px 4px;
}
.tabletop::before {
  left: 8%;
}
.tabletop::after {
  right: 8%;
}
@media (prefers-reduced-motion: reduce) {
  .seat-photo {
    transition: none;
  }
  .seat:hover .seat-photo,
  .seat:focus-visible .seat-photo {
    transform: none;
  }
}

/* The bios: one row each, a small photo beside the name. */
.bios {
  list-style: none;
  margin-top: 0.5rem;
}
.bio {
  padding-block: 2rem;
}
.bio + .bio {
  border-top: 2px dashed var(--border-2);
}
.bio:last-child {
  padding-bottom: 0;
}
.bio-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 0.25rem;
}
.bio-photo {
  flex: none;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 999px;
  object-fit: cover;
  background: var(--linen);
  border: 3px solid var(--warm-2);
  box-shadow: 0 0 0 3px var(--coral);
}
.bio h3 {
  font-size: 1.5rem;
}
.bio-role {
  font-weight: 600;
  color: var(--teal-muted);
  margin-top: 0.15rem;
}
.bio > p {
  color: var(--teal-body);
  margin-top: 0.85rem;
}

/* ---------- Pricing ---------- */
.plans {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (min-width: 40rem) {
  .plans {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64rem) {
  .plans {
    grid-template-columns: repeat(4, 1fr);
  }
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 2px solid var(--linen);
  border-radius: 0;
  padding: 1.5rem 1.4rem 1.75rem;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}
/* The featured plan (and, on pricing, the plan that fits the seated club) is the
   one lit seat: a deep panel with a coral price. */
.plan--featured,
.plan.is-fit {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--on-dark-dim);
  --focus: var(--coral);
}
.plan--featured .plan-name,
.plan--featured .plan-features .plan-features-head,
.plan.is-fit .plan-name,
.plan.is-fit .plan-features .plan-features-head {
  color: var(--white);
}
.plan--featured .plan-price,
.plan.is-fit .plan-price {
  color: var(--coral);
}
.plan--featured .plan-price small,
.plan--featured .plan-note,
.plan--featured .plan-features,
.plan--featured .plan-feature-note,
.plan--featured .plan-blurb,
.plan.is-fit .plan-price small,
.plan.is-fit .plan-note,
.plan.is-fit .plan-features,
.plan.is-fit .plan-feature-note,
.plan.is-fit .plan-blurb {
  color: var(--on-dark-dim);
}
.plan--featured .btn--ghost,
.plan.is-fit .btn--ghost {
  color: var(--bone);
  border-color: var(--bone);
}
.plan-flag {
  align-self: flex-start;
  margin-bottom: 0.6rem;
  border-radius: 0;
  font-size: 0.875rem;
  font-weight: 700;
  background: var(--coral);
  color: var(--accent-deep);
}
.plan-name {
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--accent-deep);
}
.plan-price {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--accent-strong);
  margin-top: 0.35rem;
}
.plan-price small {
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--teal-muted);
}
.plan-note {
  font-size: 0.875rem;
  color: var(--teal-body);
  margin-top: 0.35rem;
}
.plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 1.1rem 0 1.5rem;
  font-size: 0.875rem;
  color: var(--teal-body);
}
/* Each line describing the plan (the member cap, each allowance, the dues fee, and
   each feature) sits on a small coral dot, at one size and the feature list's
   spacing. The yearly price, the list's head, and the link into the comparison
   restate or point elsewhere, so they get none. */
.plan-note:not(.plan-annual),
.plan-features li:not(.plan-features-head, .plan-more) {
  position: relative;
  padding-left: 0.85rem;
}
.plan-note:not(.plan-annual) {
  margin-top: 0.55rem;
}
.plan-note:not(.plan-annual)::before,
.plan-features li:not(.plan-features-head, .plan-more)::before {
  content: '';
  position: absolute;
  left: 0.05rem;
  top: calc(0.5lh - 2.5px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--coral);
}
.plan-features .plan-features-head {
  font-weight: 700;
  color: var(--teal-ink);
}
/* Plain-language line under a gated feature ("A roster you can print…"). */
.plan-feature-note {
  display: block;
  font-size: 0.8125rem;
  color: var(--teal-muted);
  margin-top: 0.1rem;
}
/* Yearly price and each allowance line: one limit per line under the member cap. */
.plan-limits {
  margin-top: 0.15rem;
}
.plan .btn {
  margin-top: auto;
  width: 100%;
}

/* Three-up plan summary (home pricing strip). */
@media (min-width: 40rem) {
  .plans--tri {
    grid-template-columns: repeat(3, 1fr);
  }
}
.plan-blurb {
  font-size: 0.9375rem;
  color: var(--teal-body);
  margin-top: 0.6rem;
}

/* Timeline / activity log card (home handover mock). */
.timeline {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.timeline li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  color: var(--teal-ink);
}
.timeline li:first-child {
  border-top: 0;
}
.timeline time {
  font-family: var(--body);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--teal-muted);
}

/* highlight callout ("every plan, every tier" + its figure) */
.callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--accent-deep);
  color: var(--on-dark-dim);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.callout h2 {
  color: var(--white);
}
.callout-body {
  max-width: 46ch;
}
.callout-figure {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 500;
  color: var(--coral);
  line-height: 1;
}
.callout-figure small {
  color: var(--on-dark-mute);
}
.callout-figure small {
  display: block;
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--teal-muted);
  margin-top: 0.35rem;
}

/* ---------- FAQ ---------- */
.faq {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.faq h3 {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--accent-deep);
  margin-bottom: 0.35rem;
}
.faq > * {
  border-top: 2px solid var(--linen);
  padding-top: 1.25rem;
}
.faq p {
  color: var(--teal-body);
}

/* ---------- Feature-page chip nav ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.75rem;
}
.chips a {
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-strong);
  background: transparent;
  border: 2px solid var(--linen);
  border-radius: 0;
  padding: 0.4rem 0.9rem;
}
.chips a:hover {
  border-color: var(--accent-strong);
}
.page-header .chips a {
  color: var(--white);
  border-color: color-mix(in srgb, var(--on-dark-mute) 45%, transparent);
}
.page-header .chips a:hover {
  border-color: var(--coral);
}
.chips a.is-active {
  background: var(--accent-strong);
  color: var(--bone);
  border-color: var(--accent-strong);
}

/* Misc one-off mock helpers (features: message composer, newsletter, handoff). */
.checklist li.is-todo::before {
  content: '○';
  color: var(--teal-muted);
}
.chip-set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--teal-muted);
  margin-bottom: 0.4rem;
}
.msg-box {
  background: var(--linen);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  font-size: 0.9375rem;
  color: var(--teal-ink);
  margin: 0.7rem 0;
}
.mini-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.9rem;
  color: var(--teal-body);
}
.mini-list li {
  display: flex;
  gap: 0.4rem;
}
.mini-list .ai-check {
  color: var(--sage);
}
.handoff-people {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.3rem 0 0.7rem;
  font-size: 0.9rem;
  color: var(--teal-ink);
}
.handoff-people .arrow {
  color: var(--teal-muted);
}
.note-box {
  background: var(--warm-2);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.7rem;
}
.note-box b {
  display: block;
  font-size: 0.8125rem;
  color: var(--teal-muted);
  margin-bottom: 0.2rem;
}
.note-box p {
  font-size: 0.9rem;
  color: var(--teal-body);
  font-style: italic;
}

/* Numbered section index (features 01..07). */
.section-num {
  font-family: var(--display);
  font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
  line-height: 0.9;
  color: var(--accent-strong);
  opacity: 0.35;
  margin-bottom: 0.5rem;
}

/* ---------- Legal-page data table ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.table-wrap table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.table-wrap th,
.table-wrap td {
  text-align: left;
  vertical-align: top;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.table-wrap thead th {
  background: var(--linen);
  color: var(--accent-strong);
  font-family: var(--display);
}
.table-wrap tbody th {
  color: var(--accent-strong);
}
.table-wrap th small {
  display: block;
  font-weight: 400;
  color: var(--teal-muted);
  margin-top: 0.25rem;
}
.table-wrap tbody tr:last-child th,
.table-wrap tbody tr:last-child td {
  border-bottom: none;
}

/* ---------- 404 ---------- */
/* 404: the photo of someone already looking under the table, with "404" painted
   on the orange tabletop, beside the copy. */
.notfound {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 7vw, 6rem);
  background: var(--accent-deep);
  box-shadow: 0 0 0 100vmax var(--accent-deep);
  clip-path: inset(0 -100vmax);
  color: var(--on-dark-dim);
  --focus: var(--coral);
}
@media (min-width: 55rem) {
  .notfound {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    min-height: calc(100svh - var(--nav-h) - 8rem);
  }
}
.notfound-photo {
  position: relative;
  margin: 0;
  border: 8px solid var(--bone);
  transform: rotate(-1.5deg);
  box-shadow: 0 24px 50px rgb(0 0 0 / 0.3);
}
.notfound-photo img {
  display: block;
  width: 100%;
  height: auto;
}
/* Painted on the tabletop: the orange band across the top quarter of the photo. */
.notfound-code {
  position: absolute;
  left: 8%;
  top: 3%;
  font-family: var(--display);
  font-size: clamp(3.5rem, 2rem + 8vw, 9rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bone);
  opacity: 0.92;
  transform: rotate(-3deg);
  mix-blend-mode: soft-light;
  text-shadow: 0 0 1px rgb(255 255 255 / 0.4);
}
.notfound-copy {
  display: grid;
  gap: 1rem;
  justify-items: start;
}
.notfound h1 {
  font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4rem);
  max-width: 14ch;
  color: var(--white);
}
.notfound .lede {
  color: var(--on-dark-dim);
  max-width: 36ch;
}
.notfound .link-arrow {
  color: var(--white);
}
.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.75rem;
}

/* ---------- Legal / long-form content (terms, privacy) ---------- */
.legal-summary {
  margin-bottom: 2rem;
}
.legal-summary h2 {
  font-size: 1.25rem;
  margin-bottom: 0.85rem;
}
.legal-note {
  font-size: 0.875rem;
  color: var(--teal-muted);
  font-style: italic;
  margin-top: 1rem;
}
.legal-toc {
  margin-bottom: 2.5rem;
}
.legal-body h2 {
  font-size: 1.375rem;
  margin-top: 2.5rem;
  margin-bottom: 0.85rem;
}
.legal-body > h2:first-child {
  margin-top: 0;
}
.legal-body p {
  color: var(--teal-body);
}
.legal-body p + p,
.legal-body ul + p,
.legal-body p + ul {
  margin-top: 1rem;
}
.legal-body ul {
  padding-left: 1.25rem;
  color: var(--teal-body);
  margin-top: 0.5rem;
}
.legal-body li + li {
  margin-top: 0.5rem;
}
.legal-body address {
  font-style: normal;
}

/* ---------- Language switcher (header) ----------
   HTML/CSS only, no JS, present in both the desktop
   nav and the mobile header. The marker is a globe + language subtag, never a
   country flag.

   The open/closed state is a checkbox, not <details>/<summary>: a checkbox can
   have MULTIPLE <label>s that all toggle the same state, which is what lets
   .lang-switch-backdrop (a label covering the viewport while open) close the menu
   on a click anywhere else on the page — <details> only ever closes from its own
   <summary>, with no CSS-only way to react to an outside click. */
.lang-switch {
  position: relative;
  display: none; /* mobile: offered inside the drawer instead (see .lang-list) */
}
@media (min-width: 64rem) {
  .lang-switch {
    display: block;
  }
}
.lang-toggle {
  position: relative; /* stacks above .lang-switch-backdrop once open */
  z-index: 56;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.6rem;
  padding: 0 0.65rem;
  border: 1px solid color-mix(in srgb, var(--on-dark-mute) 60%, transparent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--on-dark-dim);
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.lang-switch-input:focus-visible ~ .lang-toggle {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.lang-toggle:hover {
  border-color: var(--bone);
  color: var(--white);
}
.lang-globe {
  flex: none;
  color: var(--on-dark-mute);
}
.lang-toggle .lang-code {
  background: color-mix(in srgb, var(--bone) 14%, transparent);
  color: var(--on-dark-dim);
}
.lang-name {
  font-weight: 600;
}
/* Until the bar is wide enough for every language's labels on one line, the
   toggle shows the globe and code only. The name stays for screen readers: it is
   the toggle's accessible name, and the code beside it is aria-hidden. */
@media (max-width: 79.99rem) {
  .lang-toggle .lang-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
.lang-code {
  font-family: var(--body);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--teal-muted);
  background: var(--warm-2);
  border-radius: 4px;
  padding: 0.1rem 0.3rem;
}
/* Down caret; rotates while the menu is open. */
.lang-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--on-dark-mute);
  transition: transform 0.15s ease;
}
.lang-switch-input:checked ~ .lang-toggle .lang-caret {
  transform: rotate(180deg);
}
/* Full-viewport click target, invisible, shown only while open — sits behind the
   menu (lower z-index) so menu links stay clickable, but in front of the rest of
   the page, so a click anywhere else lands here and (being a label for the same
   checkbox) closes the menu. */
.lang-switch-backdrop {
  display: none;
  position: fixed;
  /* `top`/`left` are relative to the nearest ancestor that establishes a
     containing block for fixed-position descendants — here that is
     `.site-header` itself, because its `backdrop-filter` does exactly that (same
     rule as `transform`/`filter`). `.site-header` is pinned to the viewport's top
     edge via `position: sticky; top: 0`, so `top: 0; left: 0` still lands in the
     viewport's corner — but `inset: 0` would size this to `.site-header`'s own
     (short) box instead of the viewport, since insets are percentages of the
     containing block. `100vw`/`100vh` are absolute viewport units, so they size
     this to the full viewport regardless of which element is the containing
     block. */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 55;
  cursor: default;
}
.lang-switch-input:checked ~ .lang-switch-backdrop {
  display: block;
}
/* The language list — absolutely positioned so it never reflows the header;
   hidden until the checkbox is checked. */
.lang-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  min-width: 11rem;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
  padding: 0.5rem;
  background: var(--bone);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(23, 90, 97, 0.14);
  z-index: 60;
}
.lang-switch-input:checked ~ .lang-menu {
  display: flex;
}
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--accent-strong);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
}
.lang-menu a:hover {
  background: var(--warm-2);
}
.lang-menu a[aria-current='true'] {
  color: var(--accent);
}
.lang-menu a .lang-code {
  margin-left: auto;
}

/* Language options inside the mobile drawer (the switcher's mobile home, so the
   narrow top bar stays uncrowded). Reuses the drawer link look; just labels the
   group and pins the subtag pill to the right. */
.nav-drawer-group {
  list-style: none;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border);
}
.nav-drawer-label {
  display: block;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--teal-muted);
}
.lang-list {
  list-style: none;
}
.lang-list a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--accent-strong);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
}
.lang-list a:hover {
  background: var(--warm-2);
}
.lang-list a[aria-current='true'] {
  color: var(--accent);
}
.lang-list a .lang-code {
  margin-left: auto;
}

/* Final CTA content. */
.cta-block {
  text-align: center;
}
.cta-block h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.5rem);
  margin-bottom: 0.75rem;
}
.cta-block p {
  color: var(--bone);
  margin-bottom: 1.75rem;
}

/* ---------- Plan comparison (/pricing/compare/) ----------
   One real <table>, readable with no script: sticky plan header, section heading
   rows, a check or dash per plan, and an ⓘ tooltip per feature that opens on hover
   and keyboard focus from CSS alone. src/js/compare.js adds `.compare--enhanced`
   and, with it, the search/filter controls, collapsible sections, tap-to-open
   tooltips, and the one-plan-at-a-time picker on phones. */

/* The `comparePromo` card (src/_includes/macros.njk) pointing at the table from
   /pricing/ and /features/. */
.plans-compare {
  margin-top: 2rem;
}
.compare-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-strong);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 6px 20px rgba(23, 90, 97, 0.08);
}
.compare-promo-body {
  flex: 1 1 22rem;
  max-width: 40rem;
}
.compare-promo-body h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.75rem);
  margin-bottom: 0.35rem;
}
.compare-promo-body p {
  color: var(--teal-body);
}

.compare-lede {
  max-width: 52ch;
}
.compare {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
/* `hidden` wins over every display rule below until the script lifts it. */
.compare [hidden] {
  display: none !important;
}

/* Controls — hidden until the script runs. */
.compare-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1rem;
}
/* The search box: a clear field with a magnifier, a firm teal edge and room to
   type, so it reads as the way into the table. */
.compare-search-box {
  position: relative;
  flex: 1 1 16rem;
  min-width: 0;
  display: flex;
  align-items: center;
}
.compare-search-icon {
  position: absolute;
  left: 1.1rem;
  color: var(--accent-strong);
  pointer-events: none;
}
.compare-search {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--teal-ink);
  background: var(--white);
  border: 2px solid var(--accent-strong);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.1rem 0.85rem 3.1rem;
  box-shadow: 0 4px 14px rgb(14 61 66 / 0.08);
}
.compare-search:focus {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
}
.compare-search::placeholder {
  color: var(--teal-muted);
}
.compare-button {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent-strong);
  background: transparent;
  border: 2px solid var(--accent-strong);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.2rem;
  cursor: pointer;
}
.compare-button:hover {
  background: var(--accent-strong);
  color: var(--bone);
}
.compare-status {
  font-size: 0.9375rem;
  color: var(--teal-muted);
  margin-bottom: 0.75rem;
}

/* One-plan picker: phones only, and only once the script can drive it. */
.compare-picker {
  display: none;
}
.compare-picker-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-strong);
  margin-bottom: 0.4rem;
}
/* The plan dropdown, dressed like the search box: firm teal edge, room to tap. */
.compare-select-box {
  position: relative;
  display: flex;
  align-items: center;
}
.compare-select {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--teal-ink);
  background: var(--white);
  border: 2px solid var(--accent-strong);
  border-radius: var(--radius-sm);
  padding: 0.85rem 3rem 0.85rem 1.1rem;
  box-shadow: 0 4px 14px rgb(14 61 66 / 0.08);
  cursor: pointer;
}
.compare-select:focus {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
}
.compare-select-caret {
  position: absolute;
  right: 1rem;
  color: var(--accent-strong);
  pointer-events: none;
}

/* The table. Separate borders so the sticky header keeps its rules; `overflow:
   clip` rounds the corners without making the table a scroll container, which
   would stop the header sticking. */
.compare-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: clip;
}
.compare-table th,
.compare-table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.compare-table td {
  text-align: center;
  color: var(--teal-ink);
}
.compare-table td small {
  font-size: 0.8125rem;
  color: var(--teal-muted);
}
.compare-corner {
  width: 38%;
}

/* Sticky plan header: clears the sticky site header, stays above tooltips. It sits
   on the table's own white, not deep teal, so it doesn't stack a second dark band
   under the site header; a firm rule marks where the rows slide under it. */
.compare-table thead {
  position: sticky;
  top: var(--nav-h);
  z-index: 6;
}
.compare-table thead th,
.compare-table thead td {
  background: var(--white);
  color: var(--teal-body);
}
.compare-table .compare-plans > * {
  border-bottom: 0;
  padding-bottom: 0.1rem;
}
.compare-plan {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--accent-deep);
  text-align: center;
  padding-top: 1rem;
}
.compare-plan--featured {
  box-shadow: inset 0 4px 0 var(--coral);
}
.compare-offers > * {
  border-bottom: 2px solid var(--border-2);
  padding-top: 0.1rem;
  padding-bottom: 0.9rem;
}
.compare-offer--featured {
  font-weight: 600;
}
.compare-price {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--accent-strong);
}
/* The plan heading's own copy of the price: phones only (the one-row phone header). */
.compare-plan-price {
  display: none;
}
.compare-price small {
  font-family: var(--body);
  font-weight: 400;
  color: var(--teal-muted);
}
.compare-cta {
  width: 100%;
  margin-top: 0.55rem;
  padding: 0.5rem 0.6rem;
  font-size: 0.875rem;
}

/* Section heading rows: one warm band across every column. */
.compare-section {
  /* Deep links (#events) land below the site header AND the sticky plan header.
     src/js/compare.js measures that header into --compare-head; the fallback is its
     typical height. */
  scroll-margin-top: var(--compare-head, 9.5rem);
}
/* The row carries the band colour as well as its cells: cells sit on sub-pixel
   boundaries, and with only cell backgrounds the white table showed through as
   hairline seams between columns. */
.compare-heading,
.compare-heading > * {
  background: var(--linen);
}
.compare-heading > * {
  padding-block: 0.6rem;
}
.compare-heading-title {
  text-align: left;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent-strong);
}
/* The collapse control the script wraps each heading in. */
.compare-collapse {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.compare-collapse::before {
  content: '';
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-0.15rem) rotate(45deg);
  transition: transform 0.15s ease;
}
.compare-collapse[aria-expanded='false']::before {
  transform: rotate(-45deg);
}

/* Feature rows. */
.compare-feature {
  position: relative;
  text-align: left;
  font-weight: 600;
  color: var(--teal-ink);
}
.compare-row:hover,
.compare-row:hover > * {
  background: var(--linen);
}
.compare-section:last-child .compare-row:last-child > * {
  border-bottom: 0;
}

/* Included / not included. The words are visually hidden inside each mark. */
.compare-yes {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--mint-bg);
  vertical-align: middle;
}
.compare-yes::before {
  content: '';
  width: 0.4rem;
  height: 0.7rem;
  border: solid var(--sage);
  border-width: 0 0.15rem 0.15rem 0;
  transform: translateY(-0.08rem) rotate(45deg);
}
.compare-no {
  display: inline-block;
  width: 0.8rem;
  height: 2px;
  border-radius: 1px;
  background: var(--teal-muted);
  vertical-align: middle;
}

/* ⓘ button and its tooltip. The tooltip anchors to the feature cell's left edge
   so it fits a phone screen with no script; it opens on hover (pointer devices),
   on keyboard focus, or when the script sets `.is-open` after a tap. The short
   hide delay lets the pointer travel from the button onto the tooltip. */
.tip-wrap {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.2rem;
}
.tip-trigger {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--accent);
  cursor: help;
}
.tip-trigger span {
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-family: var(--display);
  font-size: 0.75rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
}
.tip-trigger:hover {
  color: var(--accent-strong);
}
.tip {
  position: absolute;
  left: 0.6rem;
  top: calc(100% - 0.3rem);
  z-index: 5;
  width: max-content;
  max-width: min(19rem, calc(100vw - 2.5rem));
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  background: var(--teal-ink);
  color: var(--bone);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 8px 24px rgba(37, 52, 50, 0.22);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.12s ease,
    visibility 0s linear 0.2s;
}
.tip::before {
  content: '';
  position: absolute;
  top: -0.3rem;
  left: 1rem;
  width: 0.6rem;
  height: 0.6rem;
  background: inherit;
  transform: rotate(45deg);
}
.tip--above {
  top: auto;
  bottom: calc(100% - 0.3rem);
}
.tip--above::before {
  top: auto;
  bottom: -0.3rem;
}
@media (hover: hover) {
  .tip-wrap:hover .tip {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
  .compare-feature:hover {
    z-index: 4;
  }
}
.tip-trigger:focus-visible + .tip,
.compare-feature.is-open .tip {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.compare-feature:focus-within,
.compare-feature.is-open {
  z-index: 4;
}
/* Escape dismisses a tooltip without moving the pointer or focus (WCAG 1.4.13). */
.compare-table .compare-feature.is-dismissed .tip {
  visibility: hidden;
  opacity: 0;
}

/* Tablet widths: four plan columns are narrow, so tighten the cells and the
   header buttons enough that "Choose Basic" stays on one line. Deliberately NO
   `white-space: nowrap` here: the column is a fixed share of a `table-layout:
   fixed` table and `.btn` is an inline-flex whose text will not shrink below its
   own width, so a label too wide for the column is printed straight through the
   pill and into the next column rather than wrapping. The labels are translated
   tokens, and the margin is already gone — at 768px the es free-plan CTA
   ("Comenzar gratis") clears the pill edge by ~1px, and a label one word longer
   escapes the cell entirely. Wrapping to a second line is the safe overflow. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .compare-table th,
  .compare-table td {
    padding-inline: 0.5rem;
  }
  .compare-cta {
    padding-inline: 0.35rem;
    font-size: 0.8125rem;
  }
}

@media (max-width: 47.99rem) {
  /* No script: scroll the whole table sideways, feature names pinned left. */
  .compare:not(.compare--enhanced) .compare-scroll {
    overflow-x: auto;
  }
  .compare:not(.compare--enhanced) .compare-table {
    min-width: 44rem;
  }
  .compare:not(.compare--enhanced) .compare-table thead {
    position: static;
  }
  .compare:not(.compare--enhanced) .compare-feature,
  .compare:not(.compare--enhanced) .compare-heading-title,
  .compare:not(.compare--enhanced) .compare-corner {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--white);
  }
  .compare:not(.compare--enhanced) .compare-heading-title {
    background: var(--warm-2);
  }

  /* Script: one plan column at a time, chosen with the dropdown in the header's
     first cell, over the feature names. The plan's heading shows its price there,
     so the header is one row: the price row and its sign-up button are hidden (the
     site header's Start free and the closing call to action carry the sign-up).
     The plan's name stays in its heading for screen readers, as the column's name;
     the dropdown shows it on screen. */
  .compare--enhanced .compare-picker {
    display: block;
  }
  .compare--enhanced .compare-plan-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .compare--enhanced .compare-plan-price {
    display: block;
  }
  .compare--enhanced .compare-offers {
    display: none;
  }
  .compare--enhanced .compare-plans > * {
    padding-block: 0.6rem;
    border-bottom: 2px solid var(--border-2);
  }
  .compare-corner .compare-picker-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .compare-corner .compare-select {
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--accent-deep);
    background: var(--bone);
    border: 2px solid var(--border-2);
    box-shadow: none;
    text-align: left;
    text-align-last: left;
    padding: 0.5rem 2.4rem 0.5rem 0.9rem;
  }
  .compare-corner .compare-select option {
    color: var(--teal-ink);
    font-family: var(--body);
  }
  .compare-corner .compare-select-caret {
    right: 0.75rem;
    color: var(--accent-strong);
  }
  .compare--enhanced .is-other-plan {
    display: none;
  }
  .compare--enhanced .compare-corner {
    width: 52%;
  }
  .compare-table th,
  .compare-table td {
    padding-inline: 0.7rem;
  }

  .compare-price {
    font-size: 1.25rem;
  }
}

/* ---------- Analytics consent banner (src/js/analytics.js) ---------- */
/* A bar fixed to the bottom of the viewport, shown only to prod visitors in the
   EEA, the UK and Switzerland until they choose. Below the header's menu layers. */
.consent {
  position: fixed;
  inset: auto 0 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  padding: 0.9rem var(--gutter);
  background: var(--white);
  border-top: 1px solid var(--border-2);
  box-shadow: 0 -4px 16px rgb(37 52 50 / 0.08);
}
/* An author `display` beats the browser's own [hidden] rule, so restate it here.
   Without this line the banner shows on every page for every visitor. */
.consent[hidden] {
  display: none;
}
.consent-text {
  margin: 0;
  max-width: 42rem;
  color: var(--teal-body);
}
.consent-actions {
  display: flex;
  gap: 0.75rem;
}
/* While the bar is open, keep the page clear of it: the last lines can scroll
   above it, and a focused link scrolls into view above it (WCAG 2.4.11). The bar
   wraps to about 11rem on a phone and is about 5.5rem on a wide screen. */
.consent-open {
  scroll-padding-bottom: 12rem;
}
.consent-open body {
  padding-bottom: 12rem;
}
@media (min-width: 64rem) {
  .consent-open {
    scroll-padding-bottom: 6.5rem;
  }
  .consent-open body {
    padding-bottom: 6.5rem;
  }
}

/* ---------- Pricing: plans and the comparison as one area ---------- */
.pricing-plans .seat-picker {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.pricing-compare {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 2px solid var(--linen);
}
.pricing-compare-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 1rem 3rem;
  margin-bottom: 1.5rem;
}
.pricing-compare-head .section-title {
  margin-bottom: 0;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);
}
.pricing-more {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 60rem) {
  .pricing-more {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
  }
  .pricing-more .callout {
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
    flex-direction: column;
    align-items: flex-start;
  }
}
.pricing-more .section-title {
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
}

/* ---------- Features: numbered chapters, each product view on a deep stage ---------- */
.band .split-media {
  background: var(--accent-deep);
  padding: clamp(1.25rem, 3.5vw, 2.75rem);
  min-width: 0;
}
.band--white .split-media {
  background: var(--accent-strong);
}
.pullquote {
  border-left: 0;
  padding-left: 0;
  position: relative;
  padding-top: 0.9rem;
  font-weight: 400;
  color: var(--accent-deep);
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem);
}
.pullquote::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 4px;
  border-radius: 2px;
  background: var(--coral);
}
.split-body h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  margin-bottom: 1rem;
}
.status-note {
  border-radius: 0;
  border-left-color: var(--coral);
}
.page-header .status-note {
  background: color-mix(in srgb, var(--bone) 10%, transparent);
  color: var(--on-dark-dim);
}

/* ---------- About: the founders seated at a light table on the deep header ---------- */
.page-header .tabletop {
  background: var(--bone);
  color: var(--bone);
}
.page-header .seat-photo {
  border-color: var(--accent-deep);
}
.page-header .place-card {
  color: var(--accent-deep);
  border-radius: 0;
}
/* The about header carries its own table, so it skips the generic tabletop rule. */
.page-header:has(.table-scene)::after {
  display: none;
}
.page-header:has(.table-scene) {
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
}
.guide > h2 {
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem);
}
.bio + .bio {
  border-top: 2px solid var(--linen);
}
.band--warm .bio + .bio {
  border-top-color: var(--border);
}

/* ---------- Handoff: the steps as a passed-along record, rings down the year ---------- */
.steps--stack {
  position: relative;
  gap: 0;
}
.steps--stack li {
  grid-template-columns: 3.5rem 1fr;
  padding-bottom: 1.75rem;
  position: relative;
}
.steps--stack li::before {
  content: '';
  position: absolute;
  left: 1.2rem;
  top: 2.6rem;
  bottom: 0;
  width: 2px;
  background: var(--linen);
}
.steps--stack li:last-child::before {
  display: none;
}
.steps--stack .step-num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--accent-deep);
  color: var(--coral);
  font-family: var(--display);
  font-size: 1rem;
  padding: 0;
}
.steps--stack h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--accent-deep);
  padding-top: 0.35rem;
}
.legal-summary {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--on-dark-dim);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.legal-summary h2 {
  color: var(--white);
}
.legal-summary .checklist li {
  color: var(--on-dark-dim);
}
.legal-summary a {
  color: var(--white);
}
/* `hidden` beats the badge's inline-flex: seats.js swaps the recommended flag for
   the "fits" flag by toggling it. */
.plan-flag[hidden] {
  display: none;
}

/* The features header's jump links: ten jobs in two rows of five equal cells
   across the header on wide screens; rows of three on phones, with a lone last
   link spanning its row. */
.page-header .chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.page-header .chips a:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
}
@media (min-width: 48rem) {
  .page-header .chips {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .page-header .chips a:last-child:nth-child(3n + 1) {
    grid-column: auto;
  }
}
.page-header .chips a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 3rem;
  padding: 0.55rem 0.75rem;
  line-height: 1.25;
}
@media (max-width: 30rem) {
  .page-header .chips {
    gap: 0.5rem;
  }
  .page-header .chips a {
    font-size: 0.85rem;
    padding: 0.5rem 0.4rem;
  }
}
/* The "Fits your club" flag seats.js shows in place of "Recommended". */
.plan-flag--fit {
  background: var(--coral);
}

/* Small text on the deep panels keeps the light muted tone (the base rules for these
   are written for the light ground, and teal-muted on deep teal is 2.1:1). */
.callout .callout-figure small,
.legal-summary .legal-note {
  color: var(--on-dark-mute);
}