/* Alder: /pricing (page--pricing.tpl.php). The body is the base plan-kit
   markup (.hs.fp, css/home-scroll.css + css/plans.css) inside .al-pr; this
   sheet sets it in Alder type, colour and rhythm. Loads after plans.css.
   Mobile first; Alder's breakpoint is 921px, the plan kit's own grid steps
   (640 rail, 960 three-up) are kept because the card layout depends on them.
   No gradients, glows, hover lift or horizontal rules; pills are 999px. */

/* ---------- Tokens: the plan kit reads these ---------- */
.al-pr :is(.hs, .hs-sec) {
  --surf-50: var(--al-paper); --surf-100: #D6F0DD; --surf-200: #C6E3C9; --surf-300: var(--al-sage);
  --surf-400: var(--al-brand); --surf-500: var(--al-brand); --surf-600: var(--al-moss);
  --surf-700: var(--al-ink); --surf-800: var(--al-deep); --surf-900: var(--al-deep);
  --slate-100: rgba(14, 42, 27, .10); --slate-200: var(--al-line); --slate-600: var(--al-body); --slate-900: var(--al-ink);
  --page-bg: var(--al-page); --surface-sunken: var(--al-page); --surface-mint: var(--al-paper);
  --text-strong: var(--al-ink); --text-body: var(--al-body); --text-muted: var(--al-muted); --text-subtle: #6B7D75;
  --border-default: var(--al-line);
  --brand: var(--al-brand); --brand-strong: var(--al-ink);
  --ease-brand: var(--al-ease);
  --font-sans: var(--al-sans); --font-serif: var(--al-display);
  --hs-radius: var(--al-r); --hs-rule: 1px solid var(--al-line);
  --hs-sec-y: 56px;
  --wf-lit: var(--al-brand); --wf-ink: rgba(14, 42, 27, .62);
}
@media (min-width: 921px) { .al-pr :is(.hs, .hs-sec) { --hs-sec-y: 88px; } }

/* ---------- Page column: Alder's gutter and max width ---------- */
.al-pr .fp { background: var(--al-page); color: var(--al-body); }
.al-pr .fp-wrap {
  box-sizing: border-box; width: min(100% - 2 * var(--al-gutter), var(--al-max)); max-width: none;
  margin-inline: auto; padding-inline: 0;
}
.al-pr .fp a:focus-visible, .al-pr .fp button:focus-visible { outline: 2px solid var(--al-ink); outline-offset: 3px; border-radius: 999px; }

/* ---------- Head band ---------- */
.al-pr .fp-hero { padding: 36px 0 40px; background: var(--al-paper); }
.al-pr .fp-eyebrow { margin: 0 0 12px; font: italic 400 17px/1.35 var(--al-serif); letter-spacing: 0; color: var(--al-moss); }
.al-pr .fp-h1 {
  max-width: 13em; font: 800 clamp(2.15rem, 8.6vw, 3.6rem)/1.02 var(--al-display);
  letter-spacing: -.034em; color: var(--al-ink); text-wrap: balance;
}
.al-pr .fp-h1 em { font-family: var(--al-serif); font-style: italic; font-weight: 500; letter-spacing: -.01em; color: var(--al-moss); }
.al-pr .fp-sub { margin-top: 16px; max-width: 34em; font-size: 17px; line-height: 1.55; color: var(--al-body); }
.al-pr .fp-hero .fp-actions { gap: 4px 22px; margin-top: 22px; }
@media (max-width: 479px) {
  .al-pr .fp-hero .fp-btn { flex: 1 1 100%; }
}
@media (min-width: 921px) {
  .al-pr .fp-hero { padding: 64px 0 72px; }
  .al-pr .fp-eyebrow { font-size: 19px; }
  .al-pr .fp-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: end; }
  .al-pr .fp-sub { margin-top: 0; font-size: 18px; }
}

/* ---------- Links and buttons ---------- */
.al-pr .fp-link {
  color: var(--al-ink); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: rgba(14, 42, 27, .35);
}
.al-pr .fp-link svg { transition: none; }
.al-pr :is(.fp-table-note, .fp-notice) a:not([class]) { color: var(--al-ink); text-decoration: underline; text-underline-offset: 3px; }
.al-pr :is(.fp-btn, .fp-plan-cta) {
  min-height: 48px; border-radius: 999px; font: 600 15px/1.2 var(--al-sans); letter-spacing: 0;
  box-shadow: none; transform: none;
  transition: background-color .18s var(--al-ease), border-color .18s var(--al-ease), color .18s var(--al-ease);
}
.al-pr .fp-btn { padding: 12px 22px; }
.al-pr :is(.fp-btn--primary, .fp-plan-cta:not(.fp-plan-cta--quiet, .fp-plan-cta--off)) {
  background: var(--al-pill); border-color: var(--al-pill); color: #fff; box-shadow: var(--al-raise);
}
.al-pr :is(.fp-btn--ghost, .fp-plan-cta--quiet) { background: transparent; border: 1px solid var(--al-line); color: var(--al-ink); }
.al-pr .fp-plan-cta--off { background: var(--al-sand); border-color: transparent; color: var(--al-muted); }
.al-pr .fp-btn--danger { background: transparent; }
@media (hover: hover) {
  .al-pr .fp-link:hover { color: var(--al-moss); text-decoration-color: currentColor; }
  .al-pr .fp-link:hover svg { transform: none; }
  .al-pr :is(.fp-btn--primary, .fp-plan-cta:not(.fp-plan-cta--quiet, .fp-plan-cta--off)):hover { background: var(--al-moss); border-color: var(--al-moss); color: #fff; }
  .al-pr :is(.fp-btn--ghost, .fp-plan-cta--quiet):hover { background: rgba(14, 42, 27, .04); border-color: var(--al-ink); color: var(--al-ink); }
}

/* ---------- Section heads ---------- */
.al-pr .hs-sec-head { margin-bottom: 28px; }
.al-pr .hs-sec-eyebrow { margin: 0 0 10px; font: italic 400 17px/1.35 var(--al-serif); letter-spacing: 0; color: var(--al-moss); }
.al-pr .hs-sec-title {
  font: 800 clamp(2rem, 7.4vw, 3rem)/1.04 var(--al-display); letter-spacing: -.03em; color: var(--al-ink);
}
.al-pr .hs-sec-title .it { font-family: var(--al-serif); font-style: italic; font-weight: 500; letter-spacing: -.01em; color: var(--al-moss); }
.al-pr .hs-sec-sub { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--al-body); }
.al-pr :is(.fp-plans-title, .fp-table-title, .fp-manage-title) {
  font-family: var(--al-display); font-weight: 700; letter-spacing: -.02em; color: var(--al-ink);
}
.al-pr .fp-plans-title { font-size: 24px; }
.al-pr .fp-table-title { font-size: 24px; }
@media (min-width: 921px) {
  .al-pr .hs-sec-eyebrow { font-size: 19px; }
  .al-pr .hs-sec-sub { font-size: 18px; }
  .al-pr .fp-plans-title, .al-pr .fp-table-title { font-size: 28px; }
}

/* ---------- Provider plans ---------- */
.al-pr .fp-plans { padding-top: 40px; }
@media (min-width: 921px) { .al-pr .fp-plans { padding-top: 64px; } }
.al-pr .fp-plans-bar { margin-bottom: 18px; }
.al-pr .fp-notice { border: 0; border-radius: var(--al-r); background: var(--al-paper); padding: 14px 18px; color: var(--al-body); }

/* Monthly / annual switch: a sand track with the ink pill on the chosen cycle */
.al-pr .fp .ocd-pricing-toggle { gap: 2px; padding: 4px; border: 0; border-radius: 999px; background: var(--al-sand); }
.al-pr .fp .ocd-pricing-toggle__btn { min-height: 44px; padding: 0 16px; border-radius: 999px; color: var(--al-body); font-family: var(--al-sans); }
.al-pr .fp .ocd-pricing-toggle__btn--active { background: var(--al-pill); color: #fff; box-shadow: none; }
.al-pr .fp .ocd-pricing-toggle__save { color: var(--al-moss); }
.al-pr .fp .ocd-pricing-toggle__btn--active .ocd-pricing-toggle__save { color: var(--al-sage); }
@media (hover: hover) { .al-pr .fp .ocd-pricing-toggle__btn:not(.ocd-pricing-toggle__btn--active):hover { color: var(--al-ink); } }

/* Plan cards: 16px white hairline panels, no shadow */
.al-pr .fp-plan-grid { gap: 12px; }
.al-pr .fp-plan { padding: 22px 20px 20px; border: 1px solid var(--al-line); border-radius: var(--al-r); background: #fff; box-shadow: none; }
.al-pr .fp-plan--free { border-color: var(--al-line); box-shadow: none; }
.al-pr .fp-plan--mine { border-color: var(--al-ink); box-shadow: inset 0 0 0 1px var(--al-ink); }
.al-pr .fp-plan-name { font: 700 19px/1.2 var(--al-display); letter-spacing: -.015em; color: var(--al-ink); }
.al-pr .fp-plan-badge { padding: 6px 11px; border: 0; border-radius: 999px; background: var(--al-sand); color: var(--al-ink); font: 500 12.5px/1 var(--al-sans); }
.al-pr .fp-plan-badge--dark { background: var(--al-pill); color: #fff; }
/* amber stays reserved for the top provider tier, as on the bridge */
.al-pr .fp-plan--pro .fp-plan-badge { background: #F6E3B4; color: #6B4508; }
.al-pr .fp-plan-flag { color: var(--al-moss); }
.al-pr .fp-plan-price { margin-top: 14px; }
.al-pr .fp-plan-amt { font: 800 44px/1 var(--al-display); letter-spacing: -.035em; color: var(--al-ink); }
.al-pr .fp-plan-per { color: var(--al-muted); }
.al-pr .fp-plan-note { color: var(--al-muted); }
.al-pr .fp-plan-feats { gap: 10px; margin-top: 18px; }
.al-pr .fp-plan-feats li { font-size: 15px; color: var(--al-body); }
.al-pr .fp-plan-feats svg { color: var(--al-brand); }
.al-pr .fp-plan-cta { margin-top: 22px; }
.al-pr .fp-new { padding: 1px 8px; background: var(--al-paper); color: var(--al-moss); box-shadow: inset 0 0 0 1px rgba(61, 158, 120, .35); font-family: var(--al-sans); }
/* 640 to 959: the kit's sideways rail (swipe only, never moves on its own) */
@media (min-width: 640px) and (max-width: 959px) {
  .al-pr .fp-plan-grid { scrollbar-width: thin; }
}
@media (min-width: 960px) {
  .al-pr .fp-plan-grid { gap: 16px; }
  .al-pr .fp-plan { padding: 26px 26px 24px; }
}

/* "Every plan includes": a sand panel with brand dots */
.al-pr .fp-every { margin-top: 14px; padding: 16px 18px; border: 0; border-radius: var(--al-r); background: var(--al-sand); }
.al-pr .fp-every-title { font: 600 13px/1.3 var(--al-sans); letter-spacing: 0; color: var(--al-ink); }
.al-pr .fp-every-list li { color: var(--al-body); }
.al-pr .fp-every-list li::before { background: var(--al-brand); }

/* ---------- Comparison tables: zebra paper rows, no ruled lines ---------- */
/* the frame is a real border (an inset shadow would sit under the cells);
   the wrap clips the cells to its 16px corners while it scrolls sideways */
.al-pr .fp-table-wrap { border: 1px solid var(--al-line); border-radius: var(--al-r); background: #fff; box-shadow: none; }
.al-pr .fp-table :is(th, td) { border-top: 0; border-bottom: 0; }
.al-pr .fp-table thead th { background: #fff; color: var(--al-ink); font: 600 13px/1.3 var(--al-sans); }
.al-pr .fp-table th[scope="row"] { background: #fff; color: var(--al-ink); font-weight: 500; }
.al-pr .fp-table tbody tr:nth-child(odd) > :is(th, td) { background: var(--al-sand); }
.al-pr .fp-table td { color: var(--al-body); }
.al-pr .fp-table .fp-col-mine { background: var(--al-paper); }
.al-pr .fp-table tbody tr:nth-child(odd) > .fp-col-mine { background: #D6F0DD; }
.al-pr .fp-yes { color: var(--al-brand); }
.al-pr .fp-no { color: #8A9A93; }
.al-pr .fp-table-note { margin-top: 14px; color: var(--al-muted); }

/* ---------- Practice plans: the paper band ---------- */
.al-pr .fp-sec--tint { border: 0; background: var(--al-paper); }
.al-pr .fp-head-art .hs-sec-sub + .fp-link { margin-top: 10px; }

/* ---------- Subscription panel (signed-in paid providers) ---------- */
.al-pr .fp-manage { border: 1px solid var(--al-line); border-radius: var(--al-r); background: #fff; }
.al-pr .fp-manage-head { border-bottom: 0; padding: 22px 20px 4px; }
.al-pr .fp-manage-title { font-size: 24px; }
.al-pr .fp-manage-body { padding: 16px 20px 22px; }
.al-pr .fp-manage-stats > div { padding: 12px 14px; border-radius: 12px; background: var(--al-page); }
.al-pr .fp-manage-stats dd { color: var(--al-ink); }
.al-pr .fp-manage-stripe { color: var(--al-muted); }
.al-pr .fp-pill { background: var(--al-sand); color: var(--al-ink); }
.al-pr .fp-alert { border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  .al-pr :is(.fp-btn, .fp-plan-cta, .fp .ocd-pricing-toggle__btn) { transition: none; }
}