/* ==========================================================================
   STILLMIND MENTAL HEALTH · BASE LAYER
   Reset, typography, layout primitives, and the shared component grammar
   (bezel cards, island buttons, eyebrows, scroll reveals).
   Depends on tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------- */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  /* Anchor targets clear the floating nav */
  scroll-padding-top: 7rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100dvh;
  background-color: var(--c-paper);
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  /* clip rather than hidden, so position:sticky keeps working */
  overflow-x: clip;
}

/* The browser hides [hidden] with display:none from its own stylesheet, and
   any author rule that sets display beats it. So .btn, which is
   inline-flex, rendered perfectly visibly while carrying hidden, and so
   would any flex or grid child.

   That matters here more than it usually would. This site uses the hidden
   attribute to hold the two versions of every sentence whose truth depends
   on a value in site-config.js: the controlled-substance copy, and the
   booking copy. Both ship with the conservative version visible and the
   other one hidden, and both were relying on an attribute that a single
   display declaration silently cancels. A button reading "Book an
   appointment" would have appeared next to one reading "Request an
   appointment", and worse, the DEA copy is one display rule away from
   showing a claim about prescribing authority the practice does not hold.

   Found by flipping the config in a test rather than by looking, because
   until today neither constant had ever been set. */
[hidden] { display: none !important; }

img, svg, video, canvas, picture {
  display: block;
  max-width: 100%;
}

img, video { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

table { border-collapse: collapse; }

/* --------------------------------------------------------------------
   Focus
   Visible, generous, and never removed. This is an accessibility floor,
   not a style choice.
   -------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
}

.on-dark :focus-visible,
.hero :focus-visible,
.svc-close__panel :focus-visible,
.section-dark :focus-visible {
  outline-color: var(--c-sage-tint);
}

#main:focus { outline: none; }

.skip-link {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  z-index: var(--z-skip);
  padding: var(--s-3) var(--s-5);
  background: var(--c-brand);
  color: var(--c-text-invert);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--d-base) var(--ease-out-expo);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--c-paper-raised);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--c-forest);
}

/* Screen-reader only, but still focusable */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------- */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--c-text);
  text-wrap: balance;
}

h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-body);
  color: var(--c-text);
  text-wrap: balance;
}

.display {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h1 { font-size: var(--t-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }

p { text-wrap: pretty; }

.lead {
  font-size: var(--t-lead);
  line-height: var(--lh-relaxed);
  color: var(--c-text-2);
  max-width: var(--measure);
}

.prose { max-width: var(--measure); color: var(--c-text-2); }
.prose > * + * { margin-top: var(--s-4); }

.text-sm  { font-size: var(--t-sm); }
.text-xs  { font-size: var(--t-xs); }
.muted    { color: var(--c-text-3); }
.italic-display { font-style: italic; }

/* Eyebrow: microscopic pill tag that precedes major headings */
.eyebrow {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: 0.4rem var(--s-3);
  border-radius: var(--r-pill);
  background: var(--c-brand-soft);
  box-shadow: var(--ring-hairline);
  font-family: var(--font-ui);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-brand);
}

.on-dark .eyebrow {
  background: rgba(214, 228, 224, 0.09);
  color: var(--c-sage-tint);
}

.eyebrow::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
  flex-shrink: 0;
  margin-top: 0.42em;
}

/* --------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow { max-width: var(--container-narrow); }
.container-wide   { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); }
.section-tight { padding-block: var(--section-y-tight); }

.stack > * + * { margin-top: var(--s-5); }
.stack-lg > * + * { margin-top: var(--s-7); }

.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  max-width: var(--measure);
  margin-bottom: var(--s-9);
}

/* --------------------------------------------------------------------
   Bezel architecture
   Every card is a shell holding a core, so it reads as machined hardware
   rather than a rectangle on a page. Radii are concentric by calculation.
   -------------------------------------------------------------------- */

.bezel {
  padding: var(--bezel-pad);
  border-radius: var(--r-xl);
  background: var(--c-paper-sunk);
  box-shadow: var(--ring-hairline);
}

.bezel > .core {
  border-radius: var(--r-inner-xl);
  background: var(--c-paper-raised);
  box-shadow: var(--ring-hairline), var(--ring-inner-lit), var(--e-1);
  padding: var(--s-7);
  height: 100%;
}

.bezel-lg { border-radius: var(--r-2xl); }
.bezel-lg > .core { border-radius: var(--r-inner-2xl); }

.bezel-sm { border-radius: var(--r-lg); }
.bezel-sm > .core { border-radius: var(--r-inner-lg); padding: var(--s-5); }

.on-dark .bezel {
  background: rgba(214, 228, 224, 0.05);
  box-shadow: var(--ring-on-dark);
}

.on-dark .bezel > .core {
  background: rgba(15, 35, 31, 0.55);
  box-shadow: var(--ring-on-dark), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Interactive cards lift on hover with real mass */
.bezel-interactive {
  transition:
    transform var(--d-slow) var(--ease-out-expo),
    box-shadow var(--d-slow) var(--ease-out-expo);
  will-change: transform;
}

@media (hover: hover) {
  .bezel-interactive:hover { transform: translateY(-4px); }
  .bezel-interactive:hover > .core { box-shadow: var(--ring-hairline), var(--ring-inner-lit), var(--e-3); }
}

.bezel-interactive:active { transform: translateY(-1px) scale(0.995); }

/* --------------------------------------------------------------------
   Buttons
   Island pills. Trailing icons live inside their own circular wrapper,
   flush with the inner padding, and carry the kinetic tension on hover.
   -------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--c-brand);
  --btn-fg: var(--c-text-invert);
  --btn-icon-bg: rgba(255, 255, 255, 0.16);

  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.875rem 0.875rem 0.875rem var(--s-5);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  /* 44px minimum touch target */
  min-height: 2.75rem;
  transition:
    background-color var(--d-base) var(--ease-out-expo),
    transform var(--d-base) var(--ease-out-quart),
    box-shadow var(--d-base) var(--ease-out-expo);
  will-change: transform;
}

/* A button with no trailing icon keeps symmetrical padding */
.btn:not(:has(.btn-icon)) { padding-right: var(--s-5); }

.btn:hover { background: var(--c-brand-hover); box-shadow: var(--e-2); }
.btn:active { transform: scale(0.975); }

.btn-icon {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--btn-icon-bg);
  font-size: 0.8125rem;
  line-height: 1;
  transition: transform var(--d-base) var(--ease-out-quart);
}

@media (hover: hover) {
  .btn:hover .btn-icon { transform: translate(2px, -1px) scale(1.06); }
}

.btn-secondary {
  --btn-bg: transparent;
  --btn-fg: var(--c-text);
  --btn-icon-bg: rgba(22, 48, 43, 0.07);
  box-shadow: var(--ring-hairline);
}

.btn-secondary:hover {
  --btn-bg: var(--c-paper-raised);
  box-shadow: var(--ring-hairline), var(--e-2);
}

.on-dark .btn-secondary {
  --btn-fg: var(--c-text-invert);
  --btn-icon-bg: rgba(255, 255, 255, 0.12);
}

.on-dark .btn-secondary:hover { --btn-bg: rgba(255, 255, 255, 0.07); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-brand);
  --btn-icon-bg: var(--c-brand-soft);
  padding-inline: var(--s-3);
}

.btn-ghost:hover { --btn-bg: var(--c-brand-soft); box-shadow: none; }

.btn-lg {
  font-size: var(--t-body);
  padding: 1.0625rem 1.0625rem 1.0625rem var(--s-6);
  min-height: 3.25rem;
}

.btn-lg .btn-icon { width: 2rem; height: 2rem; }

.btn-sm {
  font-size: var(--t-xs);
  padding: 0.625rem 0.625rem 0.625rem var(--s-4);
  min-height: 2.75rem;
}

.btn-sm .btn-icon { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }

/* Text link with an animated underline that wipes in from the left */
/* An inline link is underlined at rest, not only on hover.
   It used to animate a 1px rule in from 0% on hover, which looked good
   and meant that at rest the only thing separating a link from the
   sentence around it was being green. That is colour carrying the
   information on its own, which anyone who cannot separate that green
   from this ink does not receive. The hover now thickens an underline
   that was already there, so the motion survives and the link is
   identifiable without it. */
.link {
  color: var(--c-brand);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--d-base) var(--ease-out-expo),
              text-decoration-thickness var(--d-base) var(--ease-out-expo);
}

.link:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------
   Brand lockup
   The mark ships as inline SVG so it inherits currentColor. The wordmark
   is live Manrope text rather than outlines, so it stays crisp at every
   size and can be read by assistive technology.

   Everything scales from a single font-size on .lockup, so one value
   controls the whole lockup. min-width:0 on the text lets it shrink
   inside flex parents instead of pushing the page wide.
   -------------------------------------------------------------------- */

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.68em;
  min-width: 0;
  color: var(--c-brand);
  font-size: 1.5rem;   /* the one knob */
}

.on-dark .lockup { color: var(--c-text-invert); }

.lockup__mark {
  width: 1em;
  height: 1em;
  flex: none;
}

.lockup__text { min-width: 0; }

.lockup__name {
  display: block;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 0.5em;
  line-height: 1;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.lockup__sub {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.33em;
  line-height: 1;
  letter-spacing: 0.26em;
  margin-top: 0.44em;
  white-space: nowrap;
  opacity: 0.78;
}

/* Mark only, wordmark hidden but still announced */
.lockup--mark-only .lockup__text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* The subline is tracked to match the width of the name above it, so it
   never makes the lockup wider than the wordmark already is. It can stay
   at every screen size. */

/* --------------------------------------------------------------------
   Crisis affordance
   Always reachable, never decorative, never the same colour as a CTA.
   -------------------------------------------------------------------- */

.crisis-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.5rem var(--s-4);
  min-height: 2.5rem;
  /* Never shrinks and never wraps. Inside a tight flex row it was being
     squeezed until "Crisis 988" broke onto two lines, which made the
     whole header taller. This is the last thing on the page that should
     give way when space runs short. */
  flex: none;
  white-space: nowrap;
  border-radius: var(--r-pill);
  background: var(--c-crisis-bg);
  color: var(--c-crisis);
  box-shadow: inset 0 0 0 1px var(--c-crisis-border);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background-color var(--d-base) var(--ease-out-expo);
}

.crisis-pill:hover { background: #F5E2DE; }

.crisis-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* The pulse is a slow breath, not an alarm. It stops for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .crisis-dot { animation: breathe 3.2s var(--ease-in-out) infinite; }
}

@keyframes breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.82); }
}

/* --------------------------------------------------------------------
   Scroll reveals
   Driven by IntersectionObserver in motion.js, never by a scroll listener.
   Transform and opacity only.
   -------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: perspective(1000px) translateY(24px) rotateX(3.5deg) scale(0.985);
  transform-origin: 50% 100%;
  transition:
    opacity 0.7s var(--ease-out-expo),
    transform 0.7s var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: perspective(1000px) translateY(0) rotateX(0deg) scale(1);
}

/* If JS never runs, content must still be visible. */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .step-card,
  .faq-item,
  .step-card:hover,
  .faq-item:hover,
  .bezel-interactive:hover,
  .bezel-interactive:active,
  .btn:hover,
  .btn:active,
  .btn .btn-icon,
  .btn:hover .btn-icon {
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------- */

.flow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.divider {
  height: 1px;
  background: var(--c-stone);
  border: none;
}

.hairline-top { box-shadow: inset 0 1px 0 var(--c-stone); }

/* --------------------------------------------------------------------
   Touch targets

   footer.css already established how this site handles the 44px floor:
   give the height only where the pointer is coarse, because a mouse does
   not need it and the extra height would only loosen the layout. These are
   the controls outside that file which were still short on a phone.

   A transparent pseudo-element expanding the hit area was tried first and
   reverted. It works, but it is a second mechanism doing the same job as
   the one already here, and the two stack: a link that is 44px tall under
   coarse pointer AND carries a 12px halo becomes a 68px target, which at
   these gaps starts swallowing the taps meant for its neighbour.

   Measured by hit testing rather than by reading boxes, because a box is
   not a target.
   -------------------------------------------------------------------- */

@media (pointer: coarse) {
  .lockup,
  .crumb a,
  .glance dd a,
  .sidebar-box dd a,
  /* The crisis control, which was the shortest thing in the header at
     40px. This is what someone reaches for with a shaking hand. */
  .crisis-pill {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* .btn-sm sets min-height 2.5rem, which is 40px. Every small button on
     the site used to carry a trailing icon, and a 24px icon plus its
     padding pushed the box past 44 on its own, so this never showed up.
     The inline call-to-action banners introduced the first small buttons
     with no icon, and those sat at 41px. */
  .btn-sm { min-height: 2.75rem; }
}

/* --------------------------------------------------------------------
   FAQ Accordions
   Semantic <details> and <summary> with fluid chevron rotation and
   smooth height transitions.
   -------------------------------------------------------------------- */

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: var(--measure);
  perspective: 1200px;
}

.faq-item {
  position: relative;
  border-radius: var(--r-xl);
  background: var(--c-paper-raised);
  border: 1px solid var(--c-stone);
  box-shadow: 0 2px 8px rgba(15, 35, 31, 0.03);
  transform: perspective(1000px) translateZ(0);
  transform-style: preserve-3d;
  transition:
    box-shadow 0.35s var(--ease-out-expo),
    border-color 0.35s var(--ease-out-expo),
    transform 0.35s var(--ease-out-expo),
    background-color 0.35s var(--ease-out-expo);
  overflow: hidden;
}

@media (hover: hover) {
  .faq-item:hover {
    box-shadow:
      0 0 0 1px rgba(39, 100, 70, 0.12),
      0 10px 24px -4px rgba(15, 35, 31, 0.08);
    transform: perspective(1000px) translateY(-3px) translateZ(8px);
    border-color: rgba(39, 100, 70, 0.25);
  }
}

.faq-item[open] {
  background: #FFFFFF;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 1px var(--c-brand);
}

.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 1.25rem var(--s-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--c-text);
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--d-base) var(--ease-out-expo),
    padding var(--d-base) var(--ease-out-expo);
}

.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::marker { display: none; content: ""; }

.faq-summary:hover {
  color: var(--c-brand);
}

.faq-summary:focus {
  outline: none;
}

.faq-summary:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: -2px;
  border-radius: var(--r-xl);
}

/* Open state: no divider line whatsoever between question and answer */
.faq-item[open] .faq-summary {
  padding: 1.25rem var(--s-5) 0.625rem;
  border-bottom: 0;
  margin-bottom: 0;
}

.faq-question {
  flex: 1;
}

.faq-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 50%;
  background: var(--c-paper-sunk);
  color: var(--c-text-2);
  box-shadow: var(--ring-hairline);
  transition:
    transform var(--d-base) var(--ease-out-expo),
    background-color var(--d-base) var(--ease-out-expo),
    color var(--d-base) var(--ease-out-expo);
}

.faq-icon::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--d-base) var(--ease-out-expo);
}

.faq-item[open] .faq-icon {
  background: var(--c-brand-soft);
  color: var(--c-brand);
}

.faq-item[open] .faq-icon::before {
  transform: translateY(2px) rotate(-135deg);
}

.faq-answer {
  padding: 0.5rem var(--s-5) 1.375rem;
  color: var(--c-text-2);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
}

.faq-answer p {
  margin: 0 0 var(--s-3);
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer a {
  color: var(--c-brand);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--d-base) var(--ease-out-expo);
}

.faq-answer a:hover {
  color: var(--c-brand-hover);
}

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }
  .faq-item::details-content {
    opacity: 0;
    block-size: 0;
    overflow-y: clip;
    transition:
      content-visibility var(--d-base) allow-discrete,
      opacity var(--d-base) var(--ease-out-expo),
      block-size var(--d-base) var(--ease-out-expo);
  }
  .faq-item[open]::details-content {
    opacity: 1;
    block-size: auto;
  }
}

/* Home page FAQ preview block */
.home-faq {
  position: relative;
  z-index: 1;
}

.home-faq .section-head {
  margin-bottom: var(--s-3);
}

.home-faq__more {
  margin-top: var(--s-5);
}

/* Welcoming guide / 3 steps */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-top: var(--s-3);
  perspective: 1200px;
}

@media (min-width: 760px) {
  .steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .steps-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-xl);
  background: var(--c-paper-raised);
  border: 1px solid var(--c-stone);
  box-shadow: 0 2px 8px rgba(15, 35, 31, 0.04);
  transform: perspective(1000px) translateZ(0);
  transform-style: preserve-3d;
  transition:
    transform 0.45s var(--ease-out-expo),
    box-shadow 0.45s var(--ease-out-expo),
    border-color 0.45s var(--ease-out-expo);
  overflow: hidden;
}

@media (max-width: 600px) {
  .step-card {
    padding: 1.25rem 1.25rem;
  }
}

/* Animated accent line on top of step card */
.step-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-brand), #476E64);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition:
    transform var(--d-base) var(--ease-out-expo),
    opacity var(--d-base) var(--ease-out-expo);
}

@media (hover: hover) {
  .step-card:hover {
    transform: perspective(1000px) translateY(-6px) translateZ(12px) rotateX(2deg);
    box-shadow:
      0 0 0 1px rgba(39, 100, 70, 0.16),
      0 16px 36px -6px rgba(15, 35, 31, 0.12),
      0 28px 56px -12px rgba(15, 35, 31, 0.08);
    border-color: rgba(39, 100, 70, 0.28);
  }
  .step-card:hover::before {
    opacity: 1;
    transform: scaleX(1);
  }
  .step-card:hover .step-card__num {
    transform: translateZ(12px) translateX(3px);
  }
  .step-card:hover h3 {
    transform: translateZ(8px);
  }
}

.step-card__num {
  display: inline-block;
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-brand);
  transition: transform var(--d-base) var(--ease-out-expo);
}

.step-card h3 {
  margin: 0;
  font-size: var(--t-h4);
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--c-text);
  transition: transform var(--d-base) var(--ease-out-expo);
}

.step-card p {
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
}

/* Structured plan and checklist inside step cards */
.plan-checklist {
  list-style: none;
  margin: var(--s-1) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

@media (min-width: 520px) {
  .plan-checklist--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.45rem;
  }
}

.plan-checklist li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--t-sm);
  color: var(--c-text);
  line-height: 1.35;
  padding: 0.35rem 0.625rem;
  background: rgba(231, 240, 235, 0.45);
  border-radius: var(--r-md);
  border: 1px solid rgba(39, 100, 70, 0.08);
}

.plan-check-icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--c-brand);
  background: rgba(39, 100, 70, 0.12);
  border-radius: 50%;
  padding: 2.5px;
}

.plan-pending-icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: #92580c;
  background: rgba(180, 83, 9, 0.12);
  border-radius: 50%;
  padding: 2.5px;
}

.plan-checklist--pending li {
  background: rgba(243, 239, 234, 0.7);
  border-color: rgba(146, 88, 12, 0.12);
}

.plan-card__note {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-stone);
  font-size: var(--t-xs);
  color: var(--c-text-3);
  line-height: var(--lh-normal);
}

/* Steps CTA block for new patients */
.steps-cta {
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-2xl);
  background: linear-gradient(135deg, rgba(231, 240, 235, 0.75) 0%, rgba(243, 239, 234, 0.9) 100%);
  box-shadow: inset 0 0 0 1px rgba(39, 100, 70, 0.15), 0 4px 16px rgba(15, 35, 31, 0.04);
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}

@media (hover: hover) {
  .steps-cta:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(39, 100, 70, 0.22), 0 12px 28px rgba(15, 35, 31, 0.07);
  }
}

.steps-cta__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  align-items: flex-start;
}

@media (min-width: 860px) {
  .steps-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-7);
  }
}

.steps-cta__text h3 {
  margin: 0 0 var(--s-2);
  font-size: var(--t-h3);
  color: var(--c-text);
}

.steps-cta__text p {
  margin: 0;
  color: var(--c-text-2);
  font-size: var(--t-body);
  max-width: 52ch;
}

.steps-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  flex: none;
}

@media (max-width: 540px) {
  .steps-cta__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .steps-cta__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Mid-page FAQ CTA */
.faq-inline-cta {
  margin-block: var(--s-9);
  padding: var(--s-7) var(--s-8);
  border-radius: var(--r-2xl);
  background: var(--c-brand-soft);
  box-shadow: inset 0 0 0 1px rgba(39, 100, 70, 0.18), var(--e-1);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

@media (min-width: 860px) {
  .faq-inline-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-7);
  }
}

.faq-inline-cta h2 {
  margin: 0 0 var(--s-2);
  font-size: var(--t-h3);
  color: var(--c-forest);
}

.faq-inline-cta p {
  margin: 0;
  color: var(--c-text);
  font-size: var(--t-body);
  max-width: 54ch;
}

.faq-inline-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  flex: none;
}

/* Portal Callout Banner */
.portal-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  margin: var(--s-8) 0;
  border-radius: var(--r-xl);
  background: var(--c-brand-soft);
  box-shadow: inset 0 0 0 1px rgba(39, 100, 70, 0.18);
}

.portal-banner p {
  margin: 0;
  color: var(--c-forest);
  font-size: var(--t-sm);
  font-weight: 500;
  max-width: 58ch;
}

.portal-banner .btn {
  flex: none;
}

/* --------------------------------------------------------------------
   New Patient Feature Card (High Prominence)
   An elevated, framed surface with accent border, clear hierarchy,
   and direct call to action for first-time visitors.
   -------------------------------------------------------------------- */
.new-patient-feature {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-6) var(--s-6);
  margin: var(--s-8) 0;
  border-radius: var(--r-xl);
  background: var(--c-paper-raised);
  border: 1px solid rgba(39, 100, 70, 0.16);
  border-left: 5px solid var(--c-brand);
  box-shadow: 0 8px 24px rgba(15, 35, 31, 0.05);
}

@media (min-width: 760px) {
  .new-patient-feature {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    padding: var(--s-7) var(--s-8);
  }
}

.new-patient-feature__content {
  max-width: 64ch;
}

.new-patient-feature__content .eyebrow {
  margin-bottom: var(--s-2);
}

.new-patient-feature h2 {
  font-size: var(--t-h3);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--c-ink);
  margin: 0 0 var(--s-3);
  line-height: var(--lh-tight);
}

.new-patient-feature p {
  margin: 0;
  color: var(--c-forest);
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
}

.new-patient-feature__action {
  flex: none;
}

@media (max-width: 540px) {
  .new-patient-feature__action,
  .new-patient-feature__action .btn {
    width: 100%;
    justify-content: center;
  }
}