/* ═══════════════════════════════════════════════════════════════════
   SAGEFUL — shared design system
   ───────────────────────────────────────────────────────────────────
   Every page on this site used to carry its own inline <style> with its
   own copy of the tokens. Nine pages, nine slightly different sages,
   no way to change the brand in one place. This file is the system.

   Concept it serves: the product is about moving from an unformed
   season into a shaped one. So the palette lives in one green family,
   and anything that has NOT happened yet is rendered in a cold dusk
   blue-grey. Sage always means arrival.

   Load this BEFORE any page-specific <style> block.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Text only. Still dark enough to read comfortably at length, but warmed
     out of near-black and into the green family so nothing on the page is
     colder than the brand. */
  --ink:        #1C2E25;
  --ink-2:      #35493D;
  --ink-3:      #61756A;
  --ink-4:      #8FA095;

  --paper:      #F3F6F1;   /* cool green-grey, deliberately not cream */
  --paper-2:    #EAEFE7;
  --paper-3:    #DDE6DB;

  /* THE brand colour. Softer and more herbal than the old near-black green:
     sage the plant is a grey-green, not a forest green. Verified against
     white at ~5.4:1, so it is safe as a button fill and not only as an
     accent. */
  --sage:       #3E7355;
  --sage-lift:  #52906C;   /* hover */
  --sage-deep:  #2C5641;   /* dark surfaces, replaces near-black */
  --sage-soft:  #A9C7B4;
  --sage-mist:  #DCE8DF;
  --sage-wash:  #EAF1EB;   /* tinted panels */

  --dusk:       #6B7A87;   /* the "not yet" colour. no green in it. */
  --dusk-soft:  #AFB9C1;

  --white:      #FCFDFB;

  /* Softness is a token, not a per-component decision. Nothing on this site
     should meet at 90 degrees except a hairline rule. */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* Button elevation. Two shadows, not one: a tight contact shadow that
     sits the button on the page, and a wide diffuse one that gives it
     air. Both are tinted with the ink green rather than black, so a
     button never casts a grey shadow onto a green-grey page. */
  --btn-lift:  0 1px 2px rgba(28,46,37,0.10), 0 8px 20px -10px rgba(28,46,37,0.30);
  --btn-hover: 0 2px 4px rgba(28,46,37,0.10), 0 14px 28px -12px rgba(28,46,37,0.36);
  --btn-press: 0 1px 2px rgba(28,46,37,0.16);
  --btn-ring:  0 0 0 3px rgba(82,144,108,0.30);
  /* The barely-there top edge that reads as light falling on a soft
     surface. Any stronger and it becomes a 2010 gradient button. */
  --btn-sheen: inset 0 1px 0 rgba(255,255,255,0.16);
  /* The fill. A ~6-point lightness ramp, which is the most you can use
     before it stops reading as a lit surface and starts reading as a
     gradient. The stop lands at 58% so the bottom two fifths are flat —
     that flat area is what keeps the label sitting on solid colour. */
  --btn-fill:       linear-gradient(180deg, color-mix(in srgb, var(--sage-lift) 60%, var(--sage)) 0%, var(--sage) 58%);
  --btn-fill-hover: linear-gradient(180deg, var(--sage-lift) 0%, color-mix(in srgb, var(--sage-lift) 72%, var(--sage)) 100%);

  --f-display: 'Axiforma', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --f-body:    'Axiforma', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --measure: 640px;
  --wide:    980px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Header height. The mobile panel is positioned off this, so the two can
     never drift apart the way they did when both carried a literal 62px. */
  --nav-h: 70px;
}
@media (max-width: 899px) { :root { --nav-h: 62px; } }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--sage); color: var(--white); }

a { color: inherit; }

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

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

/* ── LAYOUT ────────────────────────────────────────────────────────── */
.wrap      { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 24px; }
.wrap-wide { width: 100%; max-width: var(--wide);    margin: 0 auto; padding: 0 24px; }

/* ── TYPE ──────────────────────────────────────────────────────────── */
.display {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(38px, 7.4vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(27px, 4.4vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.026em;
}
.h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.018em;
}
.label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dusk);
}
.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 30em;
}
.prose p {
  font-size: 17.5px;
  line-height: 1.68;
  color: var(--ink-2);
  margin-bottom: 17px;
  max-width: 34em;
}
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 500; color: var(--ink); }
.prose em { font-style: italic; }

/* ── HEADER ────────────────────────────────────────────────────────
   Sticky, and deliberately borderless at rest. The hairline and the blur
   appear only once the page has moved, so it reads as part of the page at
   the top and as a bar once you are inside the content. */
.sf-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.sf-nav.stuck {
  border-bottom-color: var(--paper-3);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
}
.sf-nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--nav-h);
}

/* ── LOGO LOCKUP ───────────────────────────────────────────────────
   Mark as SVG, wordmark as live text. The old logo.svg baked the
   wordmark in as SVG <text> in Cormorant, so it could not inherit the
   brand face, could not be selected or read aloud, and broke silently
   the moment the typeface changed. */
.sf-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
  transition: color 0.2s var(--ease);
}
.sf-brand:hover { color: var(--sage); }

/* The mark is the one in the favicons and in bimi-leaf.svg: a sage leaf
   with the sprig knocked out of it. The header used to carry a DIFFERENT
   leaf — narrow, pointed, a single hairline midrib — so the logo in the
   browser tab and the logo at the top of the page were not the same
   drawing. Only the leaf body takes currentColor; the sprig and the seed
   are fixed, because they are lighter tints OF the body and inverting
   them with it would erase them.

   24px rather than the old 21px: the sprig gives this mark interior
   detail, and the silhouette is a wide tile rather than a tall blade, so
   it reads optically smaller at the same nominal size. */
.sf-mark {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--sage-deep);
  transition: color 0.2s var(--ease);
}
.sf-brand:hover .sf-mark { color: var(--sage); }

.sf-wordmark {
  font-family: var(--f-body);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}

/* ── NAV LINKS ─────────────────────────────────────────────────────── */
.sf-links { display: none; align-items: center; gap: 30px; }
@media (min-width: 900px) { .sf-links { display: flex; } }

.sf-link {
  position: relative;
  font-size: 14.5px;
  color: var(--ink-3);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 0;
  transition: color 0.18s var(--ease);
}
.sf-link:hover { color: var(--ink); }
/* Active page gets a rule under the word rather than a colour swap, so it
   still reads on any background. */
.sf-link[aria-current="page"] { color: var(--ink); font-weight: 500; }
.sf-link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: var(--sage);
}

.sf-cta {
  display: none;
  padding: 10px 18px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--white);
  background: var(--sage);
  border: 1px solid var(--sage);
  border-radius: var(--r-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.sf-cta:hover { background: var(--sage-lift); border-color: var(--sage-lift); }
@media (min-width: 900px) { .sf-cta { display: inline-block; } }

/* ── MOBILE ────────────────────────────────────────────────────────── */
.sf-menu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2);
  /* Was 10px 0, which made a ~29px tall target on the one control every
     phone visitor has to hit. The negative right margin keeps the label
     optically flush with the page edge while the target itself overhangs. */
  min-height: 44px; padding: 10px 4px; margin-right: -4px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (min-width: 900px) { .sf-menu-btn { display: none; } }

/* Two rules that fold into an X. No icon font, and it animates. */
.sf-menu-ico { position: relative; width: 17px; height: 9px; }
.sf-menu-ico span {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.28s var(--ease);
}
.sf-menu-ico span:first-child { top: 0; }
.sf-menu-ico span:last-child  { bottom: 0; }
.sf-menu-btn[aria-expanded="true"] .sf-menu-ico span:first-child { transform: translateY(3.75px) rotate(45deg); }
.sf-menu-btn[aria-expanded="true"] .sf-menu-ico span:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

.sf-mobile { display: none; border-top: 1px solid var(--paper-3); padding: 6px 0 20px; }
.sf-mobile.open { display: block; }
@media (min-width: 900px) { .sf-mobile { display: none !important; } }
.sf-mobile a {
  display: block; padding: 14px 0; font-size: 17px;
  color: var(--ink-2); text-decoration: none;
  border-bottom: 1px solid var(--paper-3);
}
/* Declared AFTER .sf-mobile a and with matching specificity, otherwise the
   generic link rule wins on both order and specificity and eats the button. */
.sf-mobile a.sf-mobile-cta {
  margin-top: 18px; padding: 15px 20px;
  background: var(--sage); color: var(--white);
  border: 0; border-radius: 999px;
  text-align: center; font-weight: 500; font-size: 16px;
}
.sf-mobile a:last-child { border-bottom: 0; }

/* ── BUTTONS ───────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 15px 28px;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  color: var(--white);
  background: var(--sage);
  border: 1px solid var(--sage);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:hover { background: var(--sage-lift); border-color: var(--sage-lift); }
.btn:disabled { opacity: 0.5; cursor: default; }

.btn-quiet {
  background: none;
  color: var(--ink);
  border-color: var(--paper-3);
}
.btn-quiet:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink-4); }

/* ── BANDS ─────────────────────────────────────────────────────────── */
.band { padding: 9vh 0; border-top: 1px solid var(--paper-3); }
.band-tight { padding: 6vh 0; }
.band-plain { border-top: 0; }

.band-dark {
  background: var(--sage-deep);
  color: var(--white);
  padding: 11vh 0;
}
.band-dark .h2 { color: var(--white); }
.band-dark .label { color: var(--sage-soft); }
.band-dark .prose p { color: rgba(252,253,251,0.76); }
.band-dark .btn { background: var(--white); color: var(--ink); border-color: var(--white); }
.band-dark .btn:hover { background: var(--sage-soft); border-color: var(--sage-soft); }

/* ── PULL QUOTE ────────────────────────────────────────────────────── */
.pull {
  font-family: var(--f-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(23px, 4vw, 36px);
  line-height: 1.27;
  letter-spacing: -0.022em;
  color: var(--sage);
  max-width: 19em;
}

/* ── SCOPE + CRISIS + FOOTER ───────────────────────────────────────
   Present on every public page: someone can arrive anywhere on this
   site while in a genuinely bad place. */
.sf-scope { padding: 7vh 0 0; }
.sf-scope p {
  font-size: 13px; color: var(--ink-4); line-height: 1.62;
  margin-bottom: 11px; max-width: 46em;
}
.sf-scope a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.sf-scope a:hover { color: var(--sage); }

.sf-foot {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  padding: 32px 0 46px; margin-top: 26px;
  border-top: 1px solid var(--paper-3);
  font-family: var(--f-mono);
  font-size: 11.5px; letter-spacing: 0.05em;
  color: var(--ink-4);
}
.sf-foot a { text-decoration: none; color: var(--ink-3); }
.sf-foot a:hover { color: var(--sage); }

/* ── MOTION ────────────────────────────────────────────────────────── */
.rise { opacity: 0; transform: translateY(14px); }
.ready .rise { opacity: 1; transform: none; transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
.ready .d1 { transition-delay: 0.06s; }
.ready .d2 { transition-delay: 0.20s; }
.ready .d3 { transition-delay: 0.40s; }
.ready .d4 { transition-delay: 0.54s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise { opacity: 1; transform: none; }
}

/* ── STICKY STATE SCRIPT HOOK ──────────────────────────────────────
   Added by every page's inline boot. Kept here so the class is
   documented alongside the header it belongs to. */

/* ── MOBILE PASS ───────────────────────────────────────────────────
   Most of this traffic is phones arriving from a broadcast or a link in a
   group chat. vh values that feel generous on a laptop read as dead space
   on a 390px screen, so the vertical rhythm tightens and the type scale
   steps down rather than merely reflowing. */
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .wrap, .wrap-wide { padding: 0 20px; }

  .display { font-size: clamp(31px, 8.8vw, 44px); letter-spacing: -0.028em; line-height: 1.07; }
  .h2      { font-size: clamp(24px, 6.4vw, 30px); }
  .lede    { font-size: 17.5px; }
  .prose p { font-size: 16.5px; line-height: 1.62; }
  .pull    { font-size: clamp(21px, 6vw, 27px); }

  /* vh-based rhythm collapses on short screens; px is honest here. */
  .band       { padding: 46px 0; }
  .band-tight { padding: 36px 0; }
  .band-dark  { padding: 52px 0; }
  .sf-scope   { padding: 40px 0 0; }

  /* Footer was a tight single row of 11px links: too small to tap reliably. */
  .sf-foot { padding: 26px 0 40px; gap: 10px 18px; }
  .sf-foot a { padding: 6px 0; }

  /* `body` prefix so this still beats the button layer at the foot of this
     file, which sets display:inline-flex at (0,1,1). */
  body .btn,
  body .cta,
  body .ask-submit,
  body .sub-form button {
    display: flex;
    width: 100%;
    min-height: 52px;      /* thumb, not cursor */
    padding: 16px 24px;
  }

  /* A row of quiet buttons wraps rather than scrolling off the edge. */
  .share-buttons, .actions { flex-wrap: wrap; }

  /* Long unbroken strings (URLs, emails in the scope note) are the usual
     cause of a page that scrolls sideways on a 390px screen. */
  .prose a, .sf-scope a, .sf-foot a { overflow-wrap: anywhere; }
}

/* Wide phones and small tablets. */
@media (min-width: 641px) and (max-width: 899px) {
  .band { padding: 62px 0; }
  .band-dark { padding: 72px 0; }
}

/* Landscape phones: vh gets pathological, so cap the big rhythms. */
@media (max-height: 520px) and (orientation: landscape) {
  .band, .band-dark { padding: 40px 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   SOFTNESS PASS
   Nothing meets at 90 degrees except a hairline rule. The subject is
   people in a hard season; sharp corners read as institutional, which
   is exactly the register to avoid.
   ═══════════════════════════════════════════════════════════════════ */

.band-dark {
  border-radius: var(--r-xl);
  margin: 0 auto;
  max-width: calc(var(--wide) + 48px);
  padding-left: 24px;
  padding-right: 24px;
}
@media (max-width: 1040px) {
  /* Edge to edge on small screens, but keep the top corners so the
     transition from paper to sage still reads as soft. */
  .band-dark { border-radius: var(--r-lg) var(--r-lg) 0 0; max-width: none; }
}

.pull {
  background: var(--sage-wash);
  border-radius: var(--r-lg);
  padding: 30px 32px;
  max-width: none;
}
@media (max-width: 640px) { .pull { padding: 24px 22px; border-radius: var(--r-md); } }

.sf-scope { border-top: 0; }

/* Anything that behaves like a surface gets the same softening. */
.card, .panel, .tile, .inc, .lens-card, .note { border-radius: var(--r-md); }
img.rounded, .about-img-soft { border-radius: var(--r-md); }
.btn-quiet { border-radius: var(--r-pill); }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE MENU
   Was an inline disclosure that pushed the page down. Now a proper
   panel: fills the screen below the header, big targets, scroll locked
   behind it so the page underneath cannot drift.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  .sf-mobile {
    position: fixed;
    left: 0; right: 0;
    /* Was a hard-coded 62px in two places. One token, declared next to
       the header height it has to agree with. */
    top: var(--nav-h);
    bottom: 0;
    z-index: 55;
    background: var(--paper);
    border-top: 1px solid var(--paper-3);
    /* env() covers the iPhone home indicator: without it the last item in
       the panel sits under the gesture bar and cannot be tapped. */
    padding: 10px 20px calc(32px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;   /* no rubber-banding the page behind it */
    -webkit-overflow-scrolling: touch;
    /* Slides rather than snapping, so it reads as a surface arriving. */
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s var(--ease), transform 0.28s var(--ease);
  }
  .sf-mobile.open {
    display: block;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .sf-mobile a {
    font-size: 19px;
    padding: 18px 0;          /* comfortably over the 44px target minimum */
    border-bottom: 1px solid var(--paper-3);
  }
  .sf-mobile a.sf-mobile-cta {
    margin-top: 24px;
    padding: 17px 24px;
    font-size: 17px;
    border-radius: var(--r-pill);
  }
  body.sf-menu-open { overflow: hidden; }
}

/* ═══════════════════════════════════════════════════════════════════
   THE BUTTON
   ───────────────────────────────────────────────────────────────────
   A button is the only thing on this site a person is asked to commit
   to, so it is the one element allowed to sit above the page rather
   than in it. Three moves and no more:

     1. Sage fill with a shallow vertical gradient. The delta between
        top and bottom is about 6% lightness — enough to read as a
        curved surface catching light, not enough to read as a gradient.
     2. Two-part shadow tinted with the ink green. A contact shadow
        seats it; a wide diffuse one gives it air.
     3. It moves. 1px up on hover, back down and shadow collapsed on
        press. That press state is what makes a button feel physical on
        a phone, where there is no hover to tell you anything.

   ── Why these selectors carry `body` ──
   Page-local rules live in inline <style> blocks that parse AFTER this
   file, so at equal specificity they win on source order. Prefixing
   with `body` (0,0,1 + the class) outranks a bare `.cta` no matter
   where it is declared, which lets one definition here replace fifteen
   pages' worth of divergent buttons without editing every page. Any
   NEW button should just use .btn and needs none of this.
   ═══════════════════════════════════════════════════════════════════ */

body .btn,
body .sf-cta,
body .sf-mobile a.sf-mobile-cta,
body .cta,                 /* /activate */
body .nav-btn,
body .obj-btn,             /* lens object claim */
body .obj-submit,
body .dbf-btn,             /* lens -> debrief handoff */
body .ask-submit,          /* sage counsel */
body .waitlist-submit,
body .sub-form button,     /* the practice */
body .cal-fallback a {     /* debrief booking fallback */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 14px 28px;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.004em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  /* Deliberately NOT nowrap. A full-width button on a 320px screen with a
     label like "See the team + Debrief option" has to be allowed to break,
     or the text runs straight out through the end of the pill. */
  text-wrap: balance;
  color: var(--white);
  background: var(--btn-fill);
  /* Transparent rather than absent, so swapping to .btn-quiet does not
     change the button's outer dimensions by 2px. */
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  box-shadow: var(--btn-sheen), var(--btn-lift);
  cursor: pointer;
  /* Kills the grey flash on tap and the 300ms delay, both of which make
     a soft button feel cheap on Android. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.2s var(--ease),
              box-shadow 0.24s var(--ease),
              transform 0.16s var(--ease),
              color 0.2s var(--ease);
}

/* ── DISPLAY CORRECTIONS ───────────────────────────────────────────
   The rule above sets display:inline-flex so buttons with an icon can
   centre it. That is right for most of them and wrong for exactly two,
   and because `body .x` outranks `.x` it would silently override the
   rules that were controlling them. Both are restated here at matching
   specificity rather than left to be discovered later. */

/* The header CTA is desktop-only; without this it appears on phones,
   stacked underneath the hamburger. */
body .sf-cta { display: none; white-space: nowrap; }
@media (min-width: 900px) { body .sf-cta { display: inline-flex; } }
/* The header CTA sits in a fixed-height bar, so it stays compact rather
   than taking the 46px the page-level buttons get. */
body .sf-cta { min-height: 40px; padding: 11px 20px; font-size: 14.5px; }

/* The menu CTA is a full-width bar at the foot of the panel, not a chip. */
body .sf-mobile a.sf-mobile-cta { display: flex; width: 100%; }

/* Hover is a pointer affordance. Applying it on touch leaves the button
   stuck in its hover state after a tap, which reads as broken. */
@media (hover: hover) {
  body .btn:hover,
  body .sf-cta:hover,
  body .sf-mobile a.sf-mobile-cta:hover,
  body .cta:hover,
  body .nav-btn:hover,
  body .obj-btn:hover,
  body .obj-submit:hover,
  body .dbf-btn:hover,
  body .ask-submit:hover:not(:disabled),
  body .waitlist-submit:hover,
  body .sub-form button:hover:not(:disabled),
  body .cal-fallback a:hover {
    background: var(--btn-fill-hover);
    box-shadow: var(--btn-sheen), var(--btn-hover);
    transform: translateY(-1px);
    color: var(--white);
  }
}

body .btn:active,
body .sf-cta:active,
body .sf-mobile a.sf-mobile-cta:active,
body .cta:active,
body .nav-btn:active,
body .obj-btn:active,
body .obj-submit:active,
body .dbf-btn:active,
body .ask-submit:active,
body .waitlist-submit:active,
body .sub-form button:active,
body .cal-fallback a:active {
  transform: translateY(0);
  box-shadow: var(--btn-press);
  transition-duration: 0.06s;
}

body .btn:focus-visible,
body .sf-cta:focus-visible,
body .cta:focus-visible,
body .obj-btn:focus-visible,
body .obj-submit:focus-visible,
body .dbf-btn:focus-visible,
body .ask-submit:focus-visible,
body .waitlist-submit:focus-visible,
body .sub-form button:focus-visible {
  /* The ring is the shadow, so it hugs the pill instead of drawing a
     rounded rectangle around it the way outline does. */
  outline: none;
  box-shadow: var(--btn-sheen), var(--btn-lift), var(--btn-ring);
}

body .btn:disabled,
body .ask-submit:disabled,
body .waitlist-submit:disabled,
body .sub-form button:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* ── QUIET ─────────────────────────────────────────────────────────
   The secondary. Same silhouette, no fill, and it only earns a shadow
   on hover — so on a page with two buttons the eye never has to work
   out which one is the ask. */
body .btn-quiet,
body .share-btn,
body button.action,
body .tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--paper-3);
  border-radius: var(--r-pill);
  box-shadow: 0 1px 2px rgba(28,46,37,0.05);
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.2s var(--ease),
              border-color 0.2s var(--ease),
              box-shadow 0.24s var(--ease),
              transform 0.16s var(--ease),
              color 0.2s var(--ease);
}
body .btn-quiet:active,
body .share-btn:active,
body button.action:active,
body .tool-btn:active {
  transform: translateY(0.5px);
  box-shadow: none;
  transition-duration: 0.06s;
}
@media (hover: hover) {
  body .btn-quiet:hover,
  body .share-btn:hover,
  body button.action:hover,
  body .tool-btn:hover {
    background: var(--sage-wash);
    color: var(--sage-deep);
    border-color: var(--sage-soft);
    box-shadow: 0 1px 2px rgba(28,46,37,0.06), 0 8px 18px -12px rgba(28,46,37,0.30);
  }
}
/* Confirmed-copy state on the share buttons stays sage rather than
   reverting to the quiet fill. */
body .share-btn.copied {
  background: var(--sage);
  color: var(--white);
  border-color: var(--sage);
}

/* Small quiet buttons keep their own scale — .tool-btn and .share-btn
   sit in rows of four and would swamp their containers at 46px. */
body .share-btn,
body button.action,
body .tool-btn {
  min-height: 40px;
  padding: 10px 18px;
  font-size: 13.5px;
  gap: 8px;
}
body .tool-btn {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── ON DARK ───────────────────────────────────────────────────────
   Inside a sage-deep band the sage button disappears, so it inverts to
   paper. The shadow has to go black-tinted there: an ink-green shadow
   on a green field is invisible. */
/* .dbf-cta and .obj-cta look like dark panels from their names but are
   #EAEFE7 and #fff. Their buttons stay on the standard sage treatment. */
body .band-dark .btn,
body .close .btn,
body .waitlist .waitlist-submit {
  color: var(--ink);
}
body .band-dark .btn,
body .close .btn,
body .waitlist .waitlist-submit {
  background: linear-gradient(180deg, var(--white) 0%, #EFF4EE 100%);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,0.14), 0 10px 24px -12px rgba(0,0,0,0.44);
}
@media (hover: hover) {
  body .band-dark .btn:hover,
  body .close .btn:hover,
  body .waitlist .waitlist-submit:hover {
    background: linear-gradient(180deg, var(--sage-soft) 0%, var(--sage-soft) 100%);
    color: var(--ink);
    box-shadow: 0 2px 4px rgba(0,0,0,0.14), 0 16px 30px -12px rgba(0,0,0,0.50);
  }
}

/* ── FIELDS ────────────────────────────────────────────────────────
   A pill button next to a 10px-radius input is the detail that makes a
   site look assembled rather than designed. Inputs that sit beside a
   button take the same silhouette. */
body .field,
body .signup-row input,
body .sub-form input,
body .waitlist-form input,
body .obj-form input,
body .dbf-cap input {
  border-radius: var(--r-pill);
  padding-left: 20px;
  padding-right: 20px;
  min-height: 46px;
  /* 16px is the threshold below which iOS zooms the viewport on focus
     and never zooms back out. */
  font-size: 16px;
}
body .obj-form textarea,
body .ask-form textarea {
  border-radius: var(--r-md);
  font-size: 16px;
}

/* ── SURFACES ──────────────────────────────────────────────────────
   Soft is a property of the whole page, not of the buttons alone. Two
   right angles beside a pill make the pill look like a mistake. */
body .booking-card,
body .article-cta,
body .waitlist,
body .obj-cta,
body .dbf-cta,
body .results,
body .block-card,
body .lens-card,
body .pcard,
body .share-card { border-radius: var(--r-lg); }

body .chip,
body .pcard-chip,
body .nav-mobile-badge { border-radius: var(--r-pill); }

/* ── PRINT ─────────────────────────────────────────────────────────
   The shared header is fixed, so in print it stamps itself over the
   top of the first page and reserves space on every one after. Each
   lens page used to try to hide it locally via `.topnav`, a class the
   nav never carried (it was `nav#topnav`), so the rule matched nothing
   and printed results always came out with a nav bar across them.
   Hidden once here, for every page that loads this file. */
@media print {
  .sf-nav, .sf-mobile, .sf-menu-btn { display: none !important; }
  body { padding-top: 0; }
}