/* ============================================================
   fflo site — the few pieces site-kit has no primitive for.
   Loaded AFTER tokens.css and site.css. EVERY COLOUR IS A TOKEN
   (tests/Feature/StylesheetTest.php): the fflo brand block in
   tokens.css supplies the shipped accent, never the identity hex.
   ============================================================ */

.sk-card__body ul,
.ff-plan__highlights {
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-5);
}

/* ── Trust strip ─────────────────────────────────────────── */
.ff-strip {
  padding-block: var(--sp-4);
  border-block: 1px solid var(--border);
}

.ff-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ff-chips li {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  background: var(--accent-50);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* ── Pricing ─────────────────────────────────────────────── */
.ff-currency {
  margin-top: var(--sp-3);
  color: var(--ink-muted);
}

/* The ONLY way to change currency, so a real tap target, not an 18px inline link. */
.ff-currency a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.ff-plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-8) 0 0;
  padding: 0;
  list-style: none;
}

.ff-plan {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.ff-plan--featured {
  border: 2px solid var(--accent);
  box-shadow: var(--sh-md);
}

.ff-plan__badge {
  align-self: flex-start;
  margin-bottom: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  background: var(--accent-50);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.ff-plan__badge--muted {
  background: var(--surface-2);
  color: var(--ink-muted);
}

.ff-plan__name {
  font-size: var(--fs-lg);
}

.ff-plan__tagline,
.ff-plan__annual,
.ff-plan__outcome,
.ff-plan__highlights,
.ff-plan__footer p {
  color: var(--ink-muted);
}

.ff-plan__tagline {
  margin-top: var(--sp-1);
}

.ff-plan__price {
  margin-top: var(--sp-4);
  color: var(--ink-muted);
}

.ff-plan__price strong {
  color: var(--ink);
  font-size: var(--fs-2xl);
  font-weight: 700;
}

.ff-plan__outcome {
  margin-top: var(--sp-3);
}

.ff-plan__footer {
  margin-top: auto;
  padding-top: var(--sp-5);
  font-size: var(--fs-sm);
}

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

@media (min-width: 1024px) {
  .ff-plans {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }
}

/* ── Footer ──────────────────────────────────────────────── */
.ff-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  margin-top: var(--sp-3);
}

.ff-footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* Height alone left "FAQ" a 25px-wide target. */
  padding-inline: var(--sp-2);
}

/* ── The advisor's page (/{handle}, public-surface #13) ───── */
/* The face the advisor's brand resolves to (Q558 A). Only these three keys exist:
   App\Advisor\AdvisorFont is the allowlist; fflo's own pages keep Fira Sans. */
:root[data-advisor-font="inter"] {
  --sk-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

:root[data-advisor-font="fraunces"] {
  --sk-font: "Fraunces", Georgia, "Times New Roman", serif;
}

:root[data-advisor-font="lora"] {
  --sk-font: "Lora", Georgia, "Times New Roman", serif;
}

.ff-adv-bar__id {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-2);
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}

.ff-adv-bar__name {
  font-weight: 700;
}

.ff-adv-bar__handle {
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

.ff-adv-mark {
  display: inline-block;
  vertical-align: middle;
}

.ff-adv-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: center;
}

@media (min-width: 768px) {
  .ff-adv-hero__inner {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

.ff-adv-hero__photo {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: var(--r-lg);
  justify-self: center;
}

.ff-adv-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

.ff-adv-strip li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.ff-adv-prose .sk-container {
  max-width: 680px;
}

.ff-adv-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .ff-adv-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ff-adv-cards blockquote {
  margin: var(--sp-2) 0;
}

.ff-adv-review__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

.ff-adv-badge {
  display: inline-block;
  margin: 0;
  padding: 0 var(--sp-2);
  border-radius: var(--r-full);
  background: var(--accent-50);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.ff-adv-dist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  margin: var(--sp-2) 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

.ff-adv-stories {
  margin-top: var(--sp-12);
}

.ff-adv-story__photo {
  border-radius: var(--r-full);
  object-fit: cover;
}

.ff-adv-footnote,
.ff-adv-meta,
.ff-adv-compliance {
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

.ff-adv-footnote {
  margin-top: var(--sp-4);
  max-width: 680px;
}

.ff-adv-quote {
  margin: var(--sp-6) 0 0;
  padding-left: var(--sp-4);
  border-left: 3px solid var(--border);
  font-style: italic;
}

/* A link a visitor taps on a phone: a 44px target, not an inline 18px one. */
.ff-adv-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent-text);
}

/* ── Claim handoff (/claim/handoff) ──────────────────────── */
.ff-claim {
  max-width: 560px;
  margin-inline: auto;
}

.ff-claim__profile {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.ff-claim__photo {
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  object-fit: cover;
}

.ff-claim__profile p {
  margin: 0;
}

.ff-claim__cards {
  display: grid;
  gap: var(--sp-3);
  margin-block: var(--sp-4);
}

.ff-claim__card {
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.ff-claim__card h2 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-lg);
}

.ff-claim__card p {
  margin: 0;
}

.ff-claim__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.ff-claim__actions a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

@media (min-width: 720px) {
  .ff-claim__cards {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Testimonial collect page (/t/{token}) ───────────────── */
.ff-collect {
  max-width: 560px;
  margin-inline: auto;
}

.ff-collect__prompts {
  margin-block: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.ff-collect__prompts p {
  margin: 0 0 var(--sp-1);
}

.ff-collect__prompts ul {
  margin: 0;
  padding-left: var(--sp-5);
}

.ff-collect__body {
  min-height: 9rem;
  resize: vertical;
  font: inherit;
}

.ff-collect__hint {
  margin: var(--sp-1) 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

.ff-collect__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-block: var(--sp-3);
}

.ff-collect__consent input {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}

.sk-form .ff-collect__consent label {
  margin: 0;
}

/* The script toggles [hidden]; a display rule on the same element would beat the
   browser's own `hidden`, so say it again here. */
.ff-collect [hidden] {
  display: none !important;
}

/* The chosen photo: a small preview and a way to take it back out. */
.ff-collect__photo-preview {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.ff-collect__photo-preview img {
  max-width: 96px;
  max-height: 96px;
  border-radius: var(--r-lg);
  object-fit: cover;
}

.ff-collect__summary:focus,
.ff-collect [data-error]:focus {
  outline: 2px solid var(--accent-strong, currentColor);
  outline-offset: 2px;
}

/* ── ask ffai: the canned demo, in site-kit's accordion (unit 10) ── */
/* The three promises under the ask ffai hero (2026-07-08 wireframe). */
.ff-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  font-weight: 500;
}

.ff-ticks li::before {
  content: "\2713\00a0" / "";
  color: var(--accent-text);
}

.ff-demo__sample {
  display: inline-block;
  margin-bottom: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  background: var(--accent-50);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.ff-demo__sources {
  margin: var(--sp-3) 0 0;
  padding-left: var(--sp-5);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

/* ── Public booking pages (/{username}/book, /book/manage) ──────────────── */
.ff-book {
  max-width: 720px;
}

.ff-book__about,
.ff-book__muted,
.ff-book__type-meta {
  color: var(--ink-muted);
}

.ff-book__back a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.ff-book__types {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.ff-book__type-link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-height: 44px;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.ff-book__type-link:hover {
  background: var(--accent-50);
}

.ff-book__type-name {
  font-weight: 600;
}

.ff-book__picked {
  padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--accent-text);
  border-radius: var(--r-md);
  background: var(--accent-50);
  color: var(--ink);
  font-weight: 500;
}

/* The week: seven day links that wrap, never a fixed-width row. */
.ff-book__week {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-block: var(--sp-4);
}

.ff-book__week-steps {
  display: flex;
  flex: 1 1 100%;
  justify-content: space-between;
  gap: var(--sp-2);
}

.ff-book__week-step {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-3);
}

.ff-book__days {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ff-book__days li {
  display: flex;
  flex: 1 1 72px;
  min-width: 44px;
}

.ff-book__day {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 56px;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.ff-book__day[aria-current="date"] {
  border-color: var(--accent-text);
  background: var(--accent-50);
  font-weight: 600;
}

.ff-book__day-name {
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

.ff-book__slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.ff-book__slot {
  min-height: 44px;
  min-width: 96px;
}

.ff-book__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.ff-book__notes {
  min-height: 112px;
}

.ff-book__zone {
  margin-block: var(--sp-8) var(--sp-6);
}

.ff-book__zone-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.ff-book__zone-row .sk-input {
  flex: 1 1 220px;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

/* ── Invitation page (/invite/{token}) ───────────────────── */
.ff-invite__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block: var(--sp-4);
}

/* ── Client report (/{username}/report/{token}) ──────────────
   One renderer: this is the screen AND, under @media print, the A4 sheet and
   the PDF. Colour comes from tokens; the note is the one accent rule. */
.ff-report {
  max-width: 720px;
  margin-inline: auto;
}

.ff-report__letterhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.ff-report__lockup {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.ff-report__photo {
  border-radius: 50%;
  object-fit: cover;
}

.ff-report__advisor {
  margin: 0;
  font-weight: 600;
}

.ff-report__asof,
.ff-report__subject,
.ff-report__footer {
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

.ff-report__asof,
.ff-report__footer p {
  margin: 0;
}

.ff-report__figures {
  width: 100%;
  margin-block: var(--sp-5);
  border-collapse: collapse;
}

.ff-report__caption {
  padding-bottom: var(--sp-2);
  text-align: left;
  font-weight: 600;
}

.ff-report__figures th,
.ff-report__figures td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.ff-report__figures td {
  text-align: right;
  text-wrap: nowrap;
}

.ff-report__goals thead th {
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

.ff-report__goals thead th:not(:first-child) {
  text-align: right;
}

.ff-report__note {
  margin-block: var(--sp-5);
  padding-left: var(--sp-4);
  border-left: 3px solid var(--accent-text);
}

.ff-report__footer {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.ff-report__actions {
  margin-top: var(--sp-5);
}

/* .sk-btn sets display, which beats the [hidden] attribute: without this the
   Print button shows (and does nothing) where script is off. */
.ff-report__actions [hidden] {
  display: none;
}

.ff-report__scroll {
  overflow-x: auto;
}

.ff-report__scroll:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

/* Token pages ship no web font (the visitor's address would go to Google). */
.ff-private,
.ff-private :is(button, input, textarea, select) {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

@media (max-width: 719px) {
  .ff-report__letterhead {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 18mm;
  }

  .ff-report__actions,
  .ff-report__screen-only,
  .sk-skip,
  .sk-consent {
    display: none;
  }

  /* Paper is light whatever the screen scheme: pin the tokens the sheet reads. */
  .ff-private {
    color-scheme: light;
    --ink: CanvasText;
    --ink-muted: GrayText;
    --border: GrayText;
    --accent-text: CanvasText;
    background: Canvas;
  }

  .ff-private .sk-section {
    padding: 0;
  }

  .ff-private .sk-container {
    padding-inline: 0;
  }

  .ff-report {
    max-width: none;
  }

  .ff-report__figures tr {
    break-inside: avoid;
  }
}

/* ── A free resource: capture and access pages (public-surface #15) ───────── */

.ff-magnet-about {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: flex-start;
}

.ff-magnet-about__photo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--r-full);
  flex: none;
}

.ff-magnet-list {
  display: grid;
  gap: var(--sp-4);
  padding-inline-start: var(--sp-5);
}

.ff-magnet-list p,
.ff-magnet-list blockquote {
  margin-block: var(--sp-2) 0;
}

.ff-magnet-guide {
  overflow-wrap: anywhere;
}

.ff-magnet-guide table,
.ff-magnet-guide pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.ff-magnet-result {
  margin-block: var(--sp-5);
}

.ff-magnet-press {
  margin-block-start: var(--sp-6);
}

/* The consent sentence is the box's label: the whole of it is a 44px target. */
.sk-form .ff-collect__consent label {
  min-height: 44px;
  padding-block: var(--sp-2);
}

/* ── The client's fact-find (/{handle}/factfind/{token}) ─── */
.ff-factfind__plans {
  margin-block: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.ff-factfind__plans h2,
.ff-factfind__section legend h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
}

.ff-factfind__files {
  margin: 0 0 var(--sp-3);
  padding-left: var(--sp-5);
  overflow-wrap: anywhere;
}

.ff-factfind__section {
  min-width: 0;
  margin: 0 0 var(--sp-5);
  padding: 0;
  border: 0;
}

.ff-factfind__section legend {
  padding: 0;
}

.ff-factfind select.sk-input {
  min-height: 44px;
}

.ff-factfind__key {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 0 var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--ink-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* The fact-find's hidden default button (Enter sends, never attaches): off
   screen, not display:none, which would stop it being the default. */
.ff-factfind__default {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── The home page, BP-1171's landing (public-surface unit 24) ──
   The blocks are site-kit's; these are the pieces only fflo's home
   draws: the hero's stage, the sample advisor page inside the
   browser window, the parts behind the tabs and the sample booking
   card. Every word sits on a solid token (Q42): the sample's avatar,
   button and chosen time wear fflo's solid pair, --accent-fg on
   --accent-strong (5.9:1 light, 11:1 dark, both redefined by the
   dark theme); the dot field behind the window carries no word and
   is what drifts. No min-width query: this file's later rules are
   read as the booking pages' (StylesheetTest). */
.ff-stage {
  position: relative;
  padding: clamp(var(--sp-8), 6vw, var(--sp-12)) clamp(var(--sp-4), 5vw, var(--sp-10));
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface-2);
  box-shadow: var(--sh-md);
}

.ff-stage__field {
  --sk-drift-tile: 24px;
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--accent-100) 1.5px, transparent 2px);
  background-size: var(--sk-drift-tile) var(--sk-drift-tile);
}

.ff-stage__frame {
  position: relative;
  max-width: 420px;
  margin-inline: auto;
}

.ff-sample {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}

.ff-sample__avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  background: var(--accent-strong);
  color: var(--accent-fg);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.ff-sample__name {
  font-size: var(--fs-lg);
  font-weight: 700;
}

.ff-sample__line {
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

.ff-sample__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ff-sample__chips li {
  padding: 2px var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--accent-text);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* Drawn like a button, but a picture of one: not a link, not focusable. */
.ff-sample__cta {
  margin-top: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--accent-strong);
  color: var(--accent-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.ff-part {
  max-width: 680px;
  margin-inline: auto;
}

.ff-part__lead {
  font-size: var(--fs-xl);
  font-weight: 600;
}

.ff-faq {
  margin-inline: auto;
}

.ff-booking-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 450px;
  margin: 0;
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--canvas);
  color: var(--ink);
}

.ff-booking-card__who {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.ff-booking-card__name {
  font-size: var(--fs-lg);
  font-weight: 600;
}

.ff-booking-card__meta,
.ff-booking-card__caption {
  color: var(--ink-muted);
  font-size: var(--fs-sm);
}

/* Verified is ffide's green rung (Q106): --success-text on the card,
   5.5:1 light (#047857 on #fafafa) and 9.3:1 dark (#34d399 on #0e0e10). */
.ff-booking-card__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border: 1px solid var(--success-text);
  border-radius: var(--r-full);
  color: var(--success-text);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ff-booking-card__title {
  font-weight: 600;
}

.ff-booking-card__times {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ff-booking-card__times li {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--ink-muted);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.ff-booking-card__times .ff-booking-card__time--on {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: var(--accent-fg);
}

/* ── The advisor page's ten looks, booking strip and chat line (public-surface #25) ── */
/* Q278 ("make it 10"): V1's ten looks, each a layout and a rhythm, never a palette. The
   colours stay the tokens (the advisor's brand colours on the page are a Library finding,
   S8 "No advisor brand-kit theme"): the page stays --canvas and cards --surface in every
   look, so every look reads body text at 4.5:1 or better in both themes.
   tests/Feature/AdvisorLooksTest.php measures each look's text tokens on those
   backgrounds, light and dark. Heading weights are only the ones AdvisorFont loads
   (400, 600, 700 in every face). Media queries use the range form on purpose. */
.ff-advisor {
  --adv-radius: var(--r-lg);
  --adv-gap: var(--sp-12);
  --adv-title-weight: 700;
  --adv-title-case: none;
  --adv-title-tracking: -0.02em;
  --adv-line: 1.6;
  --adv-rule: 1px;
  --adv-dropcap: 3.4em;
  background: var(--canvas);
  line-height: var(--adv-line);
}

/* A phone never gets the wide looks' generous gaps: the most any look takes there is 48px. */
.ff-advisor .sk-section {
  padding-block: min(var(--adv-gap), var(--sp-12));
}

@media (width >= 600px) {
  .ff-advisor .sk-section {
    padding-block: var(--adv-gap);
  }
}

.ff-advisor .sk-hero__title,
.ff-advisor .sk-section__title {
  font-weight: var(--adv-title-weight);
  letter-spacing: var(--adv-title-tracking);
  text-transform: var(--adv-title-case);
}

.ff-advisor .sk-card,
.ff-advisor .sk-btn,
.ff-advisor .ff-adv-hero__photo,
.ff-advisor .ff-adv-about__photo {
  border-radius: var(--adv-radius);
}

.ff-advisor .sk-card {
  border-width: var(--adv-rule);
}

/* No portrait in the hero (none set, or The Author): one column, never an empty one. */
.ff-adv-hero__inner--single {
  grid-template-columns: minmax(0, 1fr);
}

.ff-adv-about__photo {
  display: block;
  width: 160px;
  height: auto;
  margin-block: var(--sp-4);
  object-fit: cover;
}

/* Techy Minimal, V1's default: tight headings, 8px corners, compact rhythm. */
:root[data-pov="techy_minimal"] .ff-advisor {
  --adv-radius: var(--r-md);
  --adv-title-tracking: -0.03em;
  --adv-line: 1.55;
}

/* Luxury: quiet authority, generous space, near-square corners, a lighter heading. */
:root[data-pov="luxury"] .ff-advisor {
  --adv-radius: var(--r-sm);
  --adv-gap: calc(var(--sp-16) + var(--sp-8));
  --adv-title-weight: 600;
  --adv-title-tracking: 0;
  --adv-line: 1.7;
}

/* Editorial: long-form, a rule over every section title like a masthead. */
:root[data-pov="editorial"] .ff-advisor {
  --adv-radius: var(--r-sm);
  --adv-gap: var(--sp-16);
}

:root[data-pov="editorial"] .ff-advisor .sk-section__title {
  padding-top: var(--sp-3);
  border-top: 2px solid var(--ink);
}

/* Playful: soft and round, pill buttons, a warmer rhythm. */
:root[data-pov="playful"] .ff-advisor {
  --adv-radius: var(--r-xl);
  --adv-title-tracking: 0;
  --adv-line: 1.65;
}

:root[data-pov="playful"] .ff-advisor .sk-btn {
  border-radius: var(--r-full);
}

/* Brutalist: loud and honest. Square corners, capital headings, hard rules. */
:root[data-pov="brutalist"] .ff-advisor {
  --adv-radius: 0;
  --adv-title-case: uppercase;
  --adv-title-tracking: -0.01em;
  --adv-line: 1.45;
  --adv-rule: 2px;
}

:root[data-pov="brutalist"] .ff-advisor .sk-hero__title,
:root[data-pov="brutalist"] .ff-advisor .sk-section__title {
  overflow-wrap: anywhere;
}

:root[data-pov="brutalist"] .ff-advisor .sk-card,
:root[data-pov="brutalist"] .ff-advisor .sk-hero__lead {
  border: 1px solid var(--ink);
  border-width: var(--adv-rule);
}

:root[data-pov="brutalist"] .ff-advisor .sk-hero__lead {
  padding: var(--sp-4);
  color: var(--ink);
}

/* Trusted Veteran: a magazine profile. A larger portrait beside a story-led hero. */
:root[data-pov="trusted_veteran"] .ff-advisor {
  --adv-radius: var(--r-sm);
  --adv-title-tracking: -0.01em;
}

@media (width >= 768px) {
  :root[data-pov="trusted_veteran"] .ff-adv-hero__inner:not(.ff-adv-hero__inner--single) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  :root[data-pov="trusted_veteran"] .ff-adv-hero__photo {
    max-width: 480px;
  }
}

/* Family Office: multi-generational warmth. The most generous spacing, a calm heading. */
:root[data-pov="family_office"] .ff-advisor {
  --adv-radius: var(--r-sm);
  --adv-gap: calc(var(--sp-16) + var(--sp-10));
  --adv-title-weight: 600;
  --adv-title-tracking: 0;
  --adv-line: 1.75;
}

/* Data Forward: numbers up front. A dense rhythm, the review figures in a monospace face.
   The system's own monospace, on purpose: no extra face is downloaded for one look. */
:root[data-pov="data_forward"] .ff-advisor {
  --adv-radius: var(--r-md);
  --adv-gap: var(--sp-10);
  --adv-line: 1.5;
}

:root[data-pov="data_forward"] .ff-advisor .ff-adv-dist,
:root[data-pov="data_forward"] .ff-advisor .ff-adv-reviews__summary {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* The Coach: warm and conversational. Round corners, the portrait large and below the words. */
:root[data-pov="the_coach"] .ff-advisor {
  --adv-radius: var(--r-2xl);
  --adv-title-weight: 600;
  --adv-title-tracking: 0;
  --adv-line: 1.7;
}

@media (width >= 768px) {
  :root[data-pov="the_coach"] .ff-adv-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  :root[data-pov="the_coach"] .ff-adv-hero__photo {
    max-width: 560px;
    justify-self: start;
  }
}

/* The Author: a personal essay. No portrait at the top (it sits in About), a narrow
   measure, a drop cap on the About paragraph only, never on the pull quote. */
:root[data-pov="the_author"] .ff-advisor {
  --adv-radius: 0;
  --adv-gap: calc(var(--sp-16) + var(--sp-8));
  --adv-line: 1.7;
}

:root[data-pov="the_author"] .ff-adv-hero__inner {
  max-width: 680px;
}

:root[data-pov="the_author"] .ff-adv-about__body::first-letter {
  float: left;
  margin: var(--sp-1) var(--sp-2) 0 0;
  font-size: var(--adv-dropcap);
  font-weight: 700;
  line-height: 0.8;
}

/* The booking strip (Q279). Each day is a link to the booking page: a 44px target. */
.ff-adv-days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-2);
  padding: 0;
  list-style: none;
}

.ff-adv-day {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-4);
  border: 1px solid var(--border-strong);
  border-width: var(--adv-rule);
  border-radius: var(--adv-radius);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.ff-adv-day:hover,
.ff-adv-day:focus-visible {
  border-color: var(--accent-text);
  color: var(--accent-text);
}

/* The chat line (Q280): present only when the advisor filled in Viber or Messenger. */
.ff-adv-chat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-2);
  margin: var(--sp-2) 0 0;
  color: var(--ink-muted);
}

/* With the 44px height ff-adv-link already has, a 44x44 target even for a short name. */
.ff-adv-chat .ff-adv-link {
  padding-inline: var(--sp-2);
}