/* =========================================================
   ASSURION LABS (wellness edition) - Static pages
   About / Contact / FAQ / Legal + Accessibility / Track Order  (module B7, prefix st-)

   Loaded only on those pages (see al_static_enqueue() in inc/static-pages.php); plain WordPress pages are styled by shell.css.
   Design language: "Still Water" - dark surfaces, one cyan accent, hairline rules, concentric ripple rings.
   Tokens only (var(--x)). Reuses .btn / .form-* / .page-hero / .breadcrumb / .section-* / .cta-banner from main.css.
   ========================================================= */

/* ─────────────────────────────────────────
   0. LOCAL TOKENS (color-mix() values are added under @supports so old browsers fall back to solid tokens)
   ───────────────────────────────────────── */
.st-page {
  --st-ease: cubic-bezier(.2, 0, 0, 1);
  --st-offset: calc(var(--header-h) + 24px);         /* top offset for sticky rails under the sticky header */
  --st-scroll: 12px;                                 /* scroll-margin only: shell.css already adds scroll-padding-top for the header */
  --st-pad: clamp(56px, 8vw, 96px);
  --st-ring-line: var(--cyan-dim);                   /* ripple ring hairlines */
  --st-veil-1: var(--bg);                            /* photo hero overlay stops */
  --st-veil-2: var(--bg-2);
  --st-veil-3: var(--bg-2);
  --st-edge: none;                                   /* top-edge highlight on cards */
  --st-link-line: currentColor;
  --st-ok-bg: var(--bg-3);
  --st-ok-line: var(--success);
  --st-err-bg: var(--bg-3);
  --st-err-line: var(--danger);
  --st-info-bg: var(--bg-3);
  --st-info-line: var(--border-cyan);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .st-page {
    --st-ring-line: color-mix(in srgb, var(--cyan) 15%, transparent);
    --st-veil-1: color-mix(in srgb, var(--bg) 96%, transparent);
    --st-veil-2: color-mix(in srgb, var(--bg) 78%, transparent);
    --st-veil-3: color-mix(in srgb, var(--bg) 38%, transparent);
    --st-edge: inset 0 1px 0 color-mix(in srgb, var(--white) 5%, transparent);
    --st-link-line: color-mix(in srgb, var(--cyan) 45%, transparent);
    --st-ok-bg: color-mix(in srgb, var(--success) 9%, transparent);
    --st-ok-line: color-mix(in srgb, var(--success) 35%, transparent);
    --st-err-bg: color-mix(in srgb, var(--danger) 9%, transparent);
    --st-err-line: color-mix(in srgb, var(--danger) 45%, transparent);
    --st-info-bg: color-mix(in srgb, var(--cyan) 6%, transparent);
    --st-info-line: color-mix(in srgb, var(--cyan) 28%, transparent);
  }
}

/* ─────────────────────────────────────────
   1. BASE + UTILITIES
   ───────────────────────────────────────── */
.st-page { -webkit-font-smoothing: antialiased; }
.st-page [hidden] { display: none !important; }
.st-page .section-header { margin-bottom: clamp(32px, 5vw, 56px); }
.st-section { padding: var(--st-pad) 0; }
/* two plain sections in a row share one gap; banded sections keep their own top padding */
.st-section:not(.st-section--band) + .st-section:not(.st-section--band) { padding-top: 0; }

/* Visually hidden, still read by screen readers */
.st-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Honeypot: off-screen (not display:none) so bots still fill it; real visitors never reach it */
.st-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.st-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; }
.st-ico:empty { display: none; }
.st-ico svg { width: 100%; height: 100%; }

/* Eyebrow label (Space Mono, cyan) */
.st-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 16px;
}
.st-eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; opacity: .6; }

.st-h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700; line-height: 1.15; letter-spacing: -.01em;
  color: var(--white);
  text-wrap: balance;
}

/* Arrow link */
.st-link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 40px;
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--cyan);
  transition: color .2s var(--st-ease);
}
.st-link-arrow svg { width: 16px; height: 16px; transition: transform .2s var(--st-ease); }
.st-link-arrow:hover { color: var(--white); }
.st-link-arrow:hover svg { transform: translateX(3px); }

/* Buttons on these pages: explicit transition list (main.css uses "all"), tactile press */
.st-page .btn {
  min-height: 40px;
  transition: background-color .2s var(--st-ease), color .2s var(--st-ease), border-color .2s var(--st-ease), box-shadow .2s var(--st-ease), transform .16s var(--st-ease);
}
.st-page .btn:active { transform: scale(.96); }

/* Focus */
.st-page a:focus-visible,
.st-page button:focus-visible,
.st-page summary:focus-visible,
.st-page [tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.st-page [tabindex="-1"]:focus { outline: none; }
.st-page [tabindex="-1"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.st-page .form-input:focus,
.st-page .form-select:focus,
.st-page .form-textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-glow-sm);
}

/* Scroll reveal: only elements below the fold get .st-pending from JS, so nothing flashes and no-JS shows everything */
.st-reveal { transition: opacity .55s var(--st-ease), transform .55s var(--st-ease); transition-delay: calc(var(--st-i, 0) * 70ms); }
.st-reveal.st-pending { opacity: 0; transform: translateY(14px); }

/* ─────────────────────────────────────────
   2. HERO (extends .page-hero)
   ───────────────────────────────────────── */
.st-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(44px, 7vw, 84px) 0 clamp(40px, 6vw, 68px);
  background-color: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.st-hero.page-hero--sm { padding: clamp(36px, 5vw, 56px) 0 clamp(32px, 4.5vw, 48px); }
.st-hero::before {               /* soft cyan bloom (replaces the flat one from main.css) */
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse 60% 90% at 88% 8%, var(--cyan-dim), transparent 70%);
}
.st-hero::after {                /* concentric ripple rings */
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: 50%; right: -200px;
  width: min(640px, 120vw); aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 34px, var(--st-ring-line) 34px 35px);
  -webkit-mask-image: radial-gradient(circle, black 0%, transparent 68%);
          mask-image: radial-gradient(circle, black 0%, transparent 68%);
}
/* ambient drift: desktop only, and never for people who ask for less motion */
@keyframes st-ripple { to { scale: 1.06; } }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .st-hero::after { animation: st-ripple 18s ease-in-out infinite alternate; }
}

.st-hero--photo {
  background-image: linear-gradient(90deg, var(--st-veil-1) 0%, var(--st-veil-2) 48%, var(--st-veil-3) 100%), var(--st-hero-photo, none);
  background-size: cover;
  background-position: center;
}
.st-hero__inner { position: relative; }
.st-hero .page-hero-label { margin-bottom: 14px; }
/* two classes: main.css .page-hero h1 (0,1,1) would otherwise win on font-size and margin */
.st-hero .st-hero__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.6vw, 52px);
  font-weight: 700; line-height: 1.1; letter-spacing: -.01em;
  color: var(--white);
  max-width: 22ch;
  margin-bottom: 16px;
  text-wrap: balance;
}
.st-hero.page-hero--sm .st-hero__title { font-size: clamp(26px, 3.6vw, 40px); max-width: 28ch; }
.st-hero .st-hero__sub {
  max-width: 58ch;
  font-size: 18px; line-height: 1.65;
  color: var(--text-2);
  text-wrap: pretty;
}

/* ─────────────────────────────────────────
   3. PROSE (legal text, About story, opt-in .st-prose for page.php)
   ───────────────────────────────────────── */
.st-prose {
  max-width: 68ch;
  font-size: 18px; line-height: 1.75;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.st-prose > * + * { margin-top: 1.1em; }
.st-prose p { text-wrap: pretty; }
.st-prose h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; line-height: 1.25; letter-spacing: -.005em;
  color: var(--white);
  margin-top: 2.6em;
  padding-top: 1.4em;
  border-top: 1px solid var(--border);
  scroll-margin-top: var(--st-scroll);
  text-wrap: balance;
}
.st-prose > h2:first-child,
.st-prose > p:first-child + h2 { margin-top: 2em; }
.st-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.st-prose h3 {
  font-family: var(--font-body);
  font-size: 21px; font-weight: 700; line-height: 1.3;
  color: var(--white);
  margin-top: 1.8em;
  scroll-margin-top: var(--st-scroll);
}
.st-prose h2 + *, .st-prose h3 + * { margin-top: .8em; }
.st-prose a {
  color: var(--cyan);
  text-decoration: underline; text-decoration-color: var(--st-link-line);
  text-underline-offset: .2em;
  transition: color .2s var(--st-ease), text-decoration-color .2s var(--st-ease);
}
.st-prose a:hover { color: var(--white); text-decoration-color: currentColor; }
.st-prose strong { color: var(--text); font-weight: 700; }
.st-prose ul, .st-prose ol { padding-left: 1.5em; }
.st-prose ul { list-style: disc; }
.st-prose ol { list-style: decimal; }
.st-prose li { padding-left: .25em; }
.st-prose li + li { margin-top: .5em; }
.st-prose li::marker { color: var(--cyan); }
.st-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.st-table-wrap[tabindex]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.st-table-wrap--wide table { min-width: 34rem; }
.st-prose table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.st-prose th, .st-prose td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.st-prose tr:last-child td { border-bottom: 0; }
.st-prose th {
  background: var(--bg-3);
  font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
.st-prose td { color: var(--text-2); }

/* ─────────────────────────────────────────
   4. CARDS (form card, aside cards)
   ───────────────────────────────────────── */
.st-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--st-edge);
  padding: clamp(22px, 4vw, 36px);
}
.st-card__head { margin-bottom: 24px; }
.st-card__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px); font-weight: 600; line-height: 1.25;
  color: var(--white);
  margin-bottom: 6px;
  text-wrap: balance;
}
.st-card__sub { font-size: 16px; color: var(--text-3); text-wrap: pretty; }

.st-aside-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--st-edge);
  padding: 24px;
}
.st-aside-card + .st-aside-card { margin-top: 20px; }
.st-aside-card__eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 14px;
}
.st-aside-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.st-aside-card__icon {
  width: 40px; height: 40px; padding: 10px;
  color: var(--cyan);
  background: var(--cyan-dim);
  border: 1px solid var(--border-cyan);
  border-radius: var(--r-md);
}
.st-aside-card__title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--white); letter-spacing: .02em; }
.st-aside-card__lead { font-size: 18px; color: var(--text); line-height: 1.5; text-wrap: pretty; }
.st-aside-card__cta { margin-top: 16px; }

.st-notes { margin-top: 14px; display: grid; gap: 10px; }
.st-notes li {
  position: relative; padding-left: 18px;
  font-size: 16px; line-height: 1.5; color: var(--text-3);
  text-wrap: pretty;
}
.st-notes li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 1px; background: var(--cyan); opacity: .7; }

/* Link list (icon + label + chevron) */
.st-linklist { margin: 0 -12px; }
.st-linklist a {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 8px 12px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 17px; font-weight: 500;
  transition: background-color .2s var(--st-ease), color .2s var(--st-ease);
}
.st-linklist a:hover { background: var(--bg-3); color: var(--white); }
.st-linklist .st-ico { color: var(--cyan); }
.st-linklist__label { flex: 1; min-width: 0; }
.st-linklist__arrow { width: 16px; height: 16px; color: var(--text-3) !important; transition: transform .2s var(--st-ease), color .2s var(--st-ease); }
.st-linklist a:hover .st-linklist__arrow { transform: translateX(3px); color: var(--cyan) !important; }

/* Contact details (only rendered when the Customizer fields are set) */
.st-details { display: grid; gap: 16px; }
.st-details dt { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.st-details dt .st-ico { width: 16px; height: 16px; color: var(--cyan); }
.st-details dd { font-size: 17px; color: var(--text); overflow-wrap: anywhere; }
.st-details dd a { color: var(--cyan); text-decoration: underline; text-decoration-color: var(--st-link-line); text-underline-offset: .2em; }
.st-details dd a:hover { color: var(--white); }

/* Customer service card (Contact page): email, phone and hours first and larger; "Where we are" and the address below a divider.
   Real mailto: / tel: links, so the tap target is the whole line on a phone. */
.st-aside-card--contact { border-color: var(--border-cyan); }
.st-details--reach { gap: 20px; }
.st-details--reach dd { font-family: var(--font-body); font-size: clamp(20px, 2vw, 23px); font-weight: 600; letter-spacing: .01em; line-height: 1.3; }
.st-details--reach dd a { display: inline-flex; align-items: center; min-height: 40px; }
.st-details--reach .st-details__row--hours dd { font-size: 18px; font-weight: 500; letter-spacing: 0; }
.st-details--more { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.st-aside-card--admin { border-style: dashed; }

/* Status boxes */
.st-status {
  padding: 14px 16px;
  border: 1px solid var(--st-info-line); border-radius: var(--r-md);
  background: var(--st-info-bg);
  font-size: 16px; line-height: 1.5;
  color: var(--text);
}
.st-status a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.st-status--error { background: var(--st-err-bg); border-color: var(--st-err-line); color: var(--text); }
.st-status--success { background: var(--st-ok-bg); border-color: var(--st-ok-line); color: var(--text); }

/* ─────────────────────────────────────────
   5. ABOUT
   ───────────────────────────────────────── */
.st-story__grid { display: grid; gap: 32px; }
.st-story__note { margin: 16px 0 20px; max-width: 34ch; color: var(--text-2); text-wrap: pretty; }
.st-story__body { max-width: 62ch; }
.st-story__body > p:first-of-type { font-size: clamp(19px, 2vw, 22px); line-height: 1.6; color: var(--text); }

.st-values { background: var(--bg-2); border-block: 1px solid var(--border); }
.st-values__list { display: grid; gap: 32px; grid-template-columns: 1fr; }
.st-value { position: relative; padding-top: 24px; border-top: 1px solid var(--border); }
.st-value::before { content: ''; position: absolute; top: -1px; left: 0; width: 32px; height: 1px; background: var(--cyan); }
.st-value__num { display: block; margin-bottom: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--cyan); font-variant-numeric: tabular-nums; }
.st-value__title { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--white); margin-bottom: 10px; text-wrap: balance; }
.st-value__text { color: var(--text-2); font-size: 17px; line-height: 1.6; text-wrap: pretty; }

.st-standards__grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.st-standard {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--st-edge);
  padding: clamp(22px, 3vw, 30px);
  transition: border-color .3s var(--st-ease);
}
.st-standard:hover { border-color: var(--border-cyan); }
.st-standard__icon {
  width: 44px; height: 44px; padding: 11px;
  color: var(--cyan);
  background: var(--cyan-dim);
  border: 1px solid var(--border-cyan);
  border-radius: var(--r-md);
}
.st-standard__body { min-width: 0; }
.st-standard__title { font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--white); margin-bottom: 8px; text-wrap: balance; }
.st-standard__text { color: var(--text-2); font-size: 17px; line-height: 1.6; text-wrap: pretty; }

/* CTA banner (reuses .cta-banner; fixes its rigid row layout on small screens) */
.st-page .cta-banner {
  padding: clamp(28px, 5vw, 60px);
  flex-direction: column; align-items: flex-start; gap: 28px;
}
.st-page .cta-banner h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; text-wrap: balance; }
.st-page .cta-banner p { font-size: 17px; max-width: 52ch; text-wrap: pretty; }
.st-page .cta-banner-actions { flex-wrap: wrap; }

/* ─────────────────────────────────────────
   6. CONTACT
   ───────────────────────────────────────── */
.st-contact__intro { margin-bottom: 40px; }
.st-contact__grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.st-contact__main { min-width: 0; }

.st-form { display: grid; gap: 24px; }
.st-form .st-card__head { margin-bottom: 0; }
.st-form__grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.st-optional { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 14px; line-height: 1; color: var(--text-3); }
.st-page .form-label { display: flex; align-items: baseline; gap: 6px; min-height: 18px; font-size: 12px; line-height: 1.4; }
.st-page .form-input, .st-page .form-select, .st-page .form-textarea { min-height: 48px; font-size: 17px; }
.st-page .form-textarea { min-height: 150px; line-height: 1.55; }
.st-page .form-input[aria-invalid="true"],
.st-page .form-select[aria-invalid="true"],
.st-page .form-textarea[aria-invalid="true"] { border-color: var(--danger); }
.st-field-error { display: flex; gap: 6px; align-items: flex-start; margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--danger); }
.st-field__foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.st-hint { font-size: 14px; color: var(--text-3); line-height: 1.45; }
.st-count { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.st-form__actions { display: grid; gap: 16px; }
.st-form__actions .btn { justify-self: start; }
.st-form__note { font-size: 14px; line-height: 1.55; color: var(--text-3); max-width: 60ch; }
.st-form__note a { color: var(--text-2); text-decoration: underline; text-underline-offset: .2em; }
.st-form__note a:hover { color: var(--cyan); }
.st-form [aria-disabled="true"], .st-form .is-busy { opacity: .7; cursor: progress; }

.st-success { display: grid; justify-items: center; gap: 14px; text-align: center; padding: clamp(8px, 3vw, 32px) 0; }
.st-success__icon {
  display: grid; place-items: center;
  width: 60px; height: 60px; padding: 15px;
  color: var(--success);
  background: var(--st-ok-bg);
  border: 1px solid var(--st-ok-line);
  border-radius: 50%;
}
.st-success__icon svg { width: 100%; height: 100%; }
.st-success__title { font-family: var(--font-display); font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; color: var(--white); text-wrap: balance; }
.st-success__text { max-width: 44ch; color: var(--text-2); text-wrap: pretty; }
.st-success__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

.st-contact__aside { min-width: 0; }
.st-quickfaq .st-faq-list { max-width: 820px; margin-inline: auto; }
.st-quickfaq__more { margin-top: 28px; text-align: center; }

/* ─────────────────────────────────────────
   7. FAQ
   ───────────────────────────────────────── */
/* search (hidden until JS enables it) */
.st-search {
  display: flex; align-items: center; gap: 12px;
  max-width: 640px; min-height: 56px;
  margin-top: 28px; padding: 0 8px 0 18px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color .2s var(--st-ease), box-shadow .2s var(--st-ease);
}
.st-search:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-glow-sm); }
.st-search__icon { color: var(--text-3); }
.st-search__input {
  flex: 1; min-width: 0; min-height: 52px;
  padding: 0; background: none; border: 0; outline: none;
  font-family: var(--font-body); font-size: 18px; color: var(--white);
  appearance: none; -webkit-appearance: none;
}
.st-search__input::placeholder { color: var(--text-3); }
.st-search__input::-webkit-search-cancel-button, .st-search__input::-webkit-search-decoration { display: none; -webkit-appearance: none; }
.st-search__clear {
  width: 40px; height: 40px; padding: 10px;
  color: var(--text-3);
  border-radius: var(--r-sm);
  transition: color .2s var(--st-ease), background-color .2s var(--st-ease);
}
.st-search__clear:hover { color: var(--white); background: var(--bg-4); }
.st-search__count {
  min-height: 1.6em; margin-top: 12px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.st-search__count:empty { display: none; }

.st-faq__intro { margin-bottom: 40px; }
.st-faq__layout { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.st-faq__main { min-width: 0; }

/* topic nav: wrapped chips on small screens, sticky rail on desktop */
.st-faq-nav__title { display: none; }
.st-faq-nav__list { display: flex; flex-wrap: wrap; gap: 8px; }
.st-faq-nav__link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 8px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: 16px; font-weight: 500; line-height: 1.2; color: var(--text-2);
  transition: color .2s var(--st-ease), border-color .2s var(--st-ease), background-color .2s var(--st-ease);
}
.st-faq-nav__link:hover { color: var(--white); border-color: var(--border-cyan); }
.st-faq-nav__link.is-active { color: var(--white); border-color: var(--border-cyan); background: var(--cyan-dim); }
.st-faq-nav__count { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.st-faq-group { scroll-margin-top: var(--st-scroll); }
.st-faq-group + .st-faq-group { margin-top: 48px; }
.st-faq-group__head { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.st-faq-group__title { font-family: var(--font-display); font-size: clamp(18px, 2vw, 22px); font-weight: 600; line-height: 1.25; color: var(--white); text-wrap: balance; }

.st-faq-list { display: grid; gap: 8px; }
.st-faq-item {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  scroll-margin-top: var(--st-scroll);
  transition: border-color .2s var(--st-ease);
}
.st-faq-item:hover { border-color: var(--border-cyan); }
.st-faq-item[open] { border-color: var(--border-cyan); }
.st-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 14px 20px;
  cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--text);
  transition: color .2s var(--st-ease);
}
.st-faq-q::-webkit-details-marker { display: none; }
.st-faq-q::marker { content: ''; }
.st-faq-item[open] > .st-faq-q { color: var(--white); }
.st-faq-q__text { min-width: 0; text-wrap: pretty; }
.st-faq-q__icon {
  position: relative; flex: none;
  width: 28px; height: 28px;
  background: var(--bg-3);
  border: 1px solid var(--border); border-radius: 50%;
  transition: background-color .2s var(--st-ease), border-color .2s var(--st-ease);
}
.st-faq-q__icon::before, .st-faq-q__icon::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 10px; height: 2px; margin: -1px 0 0 -5px;
  background: var(--text-2); border-radius: 2px;
  transition: transform .2s var(--st-ease), opacity .2s var(--st-ease), background-color .2s var(--st-ease);
}
.st-faq-q__icon::after { transform: rotate(90deg); }
.st-faq-item[open] > .st-faq-q .st-faq-q__icon { background: var(--cyan); border-color: var(--cyan); }
.st-faq-item[open] > .st-faq-q .st-faq-q__icon::before,
.st-faq-item[open] > .st-faq-q .st-faq-q__icon::after { background: var(--bg); }
.st-faq-item[open] > .st-faq-q .st-faq-q__icon::after { transform: rotate(0deg); opacity: 0; }
.st-faq-a { padding: 0 20px 20px; max-width: 72ch; font-size: 17px; line-height: 1.7; color: var(--text-2); }
.st-faq-a > * + * { margin-top: .8em; }
.st-faq-a p { text-wrap: pretty; }
.st-faq-item[open] > .st-faq-a { animation: st-fade .28s var(--st-ease) both; }
@keyframes st-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.st-empty { padding: clamp(36px, 6vw, 60px) 24px; text-align: center; border: 1px dashed var(--border-cyan); border-radius: var(--r-lg); }
.st-empty__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--white); margin-bottom: 10px; }
.st-empty__text { max-width: 44ch; margin: 0 auto 20px; color: var(--text-2); text-wrap: pretty; }
.st-empty__text a { color: var(--cyan); text-decoration: underline; text-underline-offset: .2em; }

/* ─────────────────────────────────────────
   8. LEGAL + ACCESSIBILITY
   ───────────────────────────────────────── */
.st-legal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--text-3); }
.st-legal-meta time { color: var(--white); font-variant-numeric: tabular-nums; }

.st-legal { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.st-legal__body { min-width: 0; }
.st-legal__prose { max-width: 70ch; font-size: 18px; }
.st-legal__prose > p:first-of-type { font-size: 20px; line-height: 1.65; color: var(--text); }

/* table of contents: collapsible bar on small screens, sticky rail on desktop */
.st-toc__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 0 16px;
  cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan);
  background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.st-toc__summary::-webkit-details-marker { display: none; }
.st-toc__summary::marker { content: ''; }
.st-toc__summary::after {
  content: ''; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s var(--st-ease);
}
.st-toc__details[open] > .st-toc__summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.st-toc__list { margin-top: 12px; padding-left: 0; border-left: 1px solid var(--border); }
.st-toc__link {
  display: block; margin-left: -1px; padding: 9px 14px 9px 16px;
  border-left: 2px solid transparent;
  font-size: 16px; line-height: 1.35; color: var(--text-3);
  transition: color .2s var(--st-ease), border-color .2s var(--st-ease), background-color .2s var(--st-ease);
}
.st-toc__link:hover { color: var(--text); }
.st-toc__link.is-active { color: var(--white); border-left-color: var(--cyan); }

.st-notice {
  display: flex; gap: 16px; align-items: flex-start;
  max-width: 70ch;
  margin-bottom: 40px; padding: 20px 22px;
  background: var(--st-info-bg);
  border: 1px solid var(--st-info-line); border-radius: var(--r-lg);
}
.st-notice__icon { width: 24px; height: 24px; margin-top: 2px; color: var(--cyan); }
.st-notice__body { min-width: 0; }
.st-notice__title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; }
.st-notice .al-disclaimer { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text); }

.st-legal__foot { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); display: grid; gap: 12px; max-width: 70ch; }
.st-legal__foot-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.st-legal__foot .al-disclaimer { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-3); }
.st-legal__foot-link { font-size: 16px; }
.st-legal__foot-link a { color: var(--cyan); text-decoration: underline; text-decoration-color: var(--st-link-line); text-underline-offset: .2em; }
.st-legal__foot-link a:hover { color: var(--white); }

.st-help {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  margin-top: 48px; padding: 24px 26px; max-width: 70ch;
  background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--st-edge);
}
.st-help__title { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--white); margin-bottom: 4px; text-wrap: balance; }
.st-help__text p { font-size: 17px; color: var(--text-2); text-wrap: pretty; }

.st-policies-wrap { margin-top: clamp(48px, 7vw, 80px); padding-top: 32px; border-top: 1px solid var(--border); }
.st-policies__title { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); margin-bottom: 18px; }
.st-policies { display: grid; gap: 10px; grid-template-columns: 1fr; }
.st-policy {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 14px 18px;
  background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--text);
  transition: border-color .2s var(--st-ease), color .2s var(--st-ease);
}
.st-policy:hover { border-color: var(--border-cyan); color: var(--white); }
.st-policy__arrow { width: 16px; height: 16px; color: var(--text-3); transition: transform .2s var(--st-ease), color .2s var(--st-ease); }
.st-policy:hover .st-policy__arrow { transform: translateX(3px); color: var(--cyan); }

/* ─────────────────────────────────────────
   9. TRACK ORDER (styles the WooCommerce shortcode output; WC core CSS is dequeued)
   ───────────────────────────────────────── */
.st-track__grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.st-track__main, .st-track__aside { min-width: 0; }
.st-track__extra { margin-top: 32px; }
.st-track__signed-in { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 16px; color: var(--text-3); }
.st-track__signed-in a { color: var(--cyan); text-decoration: underline; text-decoration-color: var(--st-link-line); text-underline-offset: .2em; }

.st-track__form form.track_order,
.st-track__form .woocommerce-form-track-order { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.st-track__form .track_order > p:not(.form-row) { display: none; }          /* WC intro line: our card copy says it already */
.st-track__form .form-row { display: flex; flex-direction: column; gap: 6px; float: none; width: auto; margin: 0; padding: 0; }
.st-track__form .clear { display: none; }
.st-track__form label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2);
}
.st-track__form .required { color: var(--danger); text-decoration: none; }
.st-track__form .input-text {
  width: 100%; min-height: 48px; padding: 12px 16px;
  background: var(--bg-3);
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 17px; color: var(--white);
  outline: none;
  transition: border-color .2s var(--st-ease), box-shadow .2s var(--st-ease);
}
.st-track__form .input-text::placeholder { color: var(--text-3); }
.st-track__form .input-text:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-glow-sm); }
.st-track__form button.button,
.st-track__form .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 17px 34px;
  font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  color: var(--bg); background: var(--cyan);
  border: 0; border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color .2s var(--st-ease), box-shadow .2s var(--st-ease), transform .16s var(--st-ease);
}
.st-track__form .form-row button.button { align-self: flex-start; }
.st-track__form button.button:hover, .st-track__form .button:hover { background: var(--white); box-shadow: 0 0 28px var(--cyan-glow); }
.st-track__form button.button:active, .st-track__form .button:active { transform: scale(.96); }

/* notices printed by WooCommerce */
.st-track__form .woocommerce-error,
.st-track__form .woocommerce-message,
.st-track__form .woocommerce-info {
  list-style: none; margin: 0 0 20px; padding: 14px 16px;
  border: 1px solid var(--st-info-line); border-radius: var(--r-md);
  background: var(--st-info-bg);
  font-size: 16px; line-height: 1.5; color: var(--text);
}
.st-track__form .woocommerce-error { background: var(--st-err-bg); border-color: var(--st-err-line); }
.st-track__form .woocommerce-message { background: var(--st-ok-bg); border-color: var(--st-ok-line); }
.st-track__form .woocommerce-error li + li { margin-top: 6px; }

/* order status result */
.st-track__form .order-info { margin-bottom: 24px; font-size: 18px; line-height: 1.6; color: var(--text-2); }
.st-track__form mark { background: none; color: var(--white); font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-track__form mark.order-status {
  display: inline-block; padding: 0 10px; margin-inline: 2px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; line-height: 26px;
  color: var(--cyan);
  background: var(--cyan-dim);
  border: 1px solid var(--border-cyan); border-radius: var(--r-sm);
}
.st-track__form h2,
.st-track__form .woocommerce-order-details__title,
.st-track__form .woocommerce-column__title {
  margin: 32px 0 14px;
  font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--white);
}
.st-track__form .commentlist { display: grid; gap: 12px; }
.st-track__form .commentlist .note { padding: 14px 16px; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-md); }
.st-track__form .commentlist .meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.st-track__form .commentlist .description { font-size: 16px; color: var(--text-2); }
.st-track__form table.shop_table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden;
  font-size: 16px; line-height: 1.5;
}
.st-track__form table.shop_table th,
.st-track__form table.shop_table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); color: var(--text-2); overflow-wrap: anywhere; }
.st-track__form table.shop_table thead th { background: var(--bg-3); font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.st-track__form table.shop_table tfoot th { color: var(--text); font-weight: 600; }
.st-track__form table.shop_table .amount { font-variant-numeric: tabular-nums; color: var(--text); }
.st-track__form table.shop_table a { color: var(--cyan); }
.st-track__form table.shop_table tr:last-child > * { border-bottom: 0; }
.st-track__form address { font-style: normal; padding: 16px; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 16px; line-height: 1.6; color: var(--text-2); }
.st-track__form .woocommerce-columns { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }

/* "after you order" timeline */
.st-steps { display: grid; gap: 0; }
.st-step { position: relative; display: flex; gap: 16px; padding-bottom: 22px; }
.st-step:last-child { padding-bottom: 0; }
.st-step::before { content: ''; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 1px; background: var(--border); }
.st-step:last-child::before { display: none; }
.st-step__num {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px;
  font-family: var(--font-mono); font-size: 12px; color: var(--cyan);
  background: var(--cyan-dim); border: 1px solid var(--border-cyan); border-radius: 50%;
  font-variant-numeric: tabular-nums;
}
.st-step__body { min-width: 0; padding-top: 3px; }
.st-step__title { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--white); margin-bottom: 4px; }
.st-step__text { font-size: 16px; line-height: 1.5; color: var(--text-3); text-wrap: pretty; }

/* ─────────────────────────────────────────
   10. BREAKPOINTS (mobile-first)
   ───────────────────────────────────────── */
@media (min-width: 640px) {
  .st-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-form__wide { grid-column: 1 / -1; }
  .st-values__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .st-standards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .st-policies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-track__form form.track_order,
  .st-track__form .woocommerce-form-track-order { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-track__form .track_order > .form-row:last-of-type,
  .st-track__form .track_order > p:last-of-type { grid-column: 1 / -1; }
  .st-track__form .woocommerce-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-help { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .st-help .btn { flex: none; }
}

@media (min-width: 900px) {
  .st-story__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 104px); align-items: start; }
  .st-story__lead { position: sticky; top: var(--st-offset); }
  .st-contact__grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; }
  .st-track__grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; }
  .st-page .cta-banner { flex-direction: row; align-items: center; justify-content: space-between; }

  /* FAQ: sticky topic rail */
  .st-faq__layout { grid-template-columns: 250px minmax(0, 1fr); gap: 56px; }
  .st-faq-nav { position: sticky; top: var(--st-offset); }
  .st-faq-nav__title { display: block; margin-bottom: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
  .st-faq-nav__list { display: block; padding-left: 0; border-left: 1px solid var(--border); }
  .st-faq-nav__link {
    display: flex; justify-content: space-between;
    margin-left: -1px; padding: 9px 12px 9px 16px;
    background: none; border: 0; border-left: 2px solid transparent; border-radius: 0;
    color: var(--text-3);
  }
  .st-faq-nav__link:hover { color: var(--text); border-color: transparent; }
  .st-faq-nav__link.is-active { color: var(--white); border-left-color: var(--cyan); background: none; }

  /* Legal: sticky table of contents */
  .st-legal { grid-template-columns: 270px minmax(0, 1fr); gap: 72px; }
  .st-legal--single { grid-template-columns: minmax(0, 1fr); }
  .st-legal__aside { position: sticky; top: var(--st-offset); max-height: calc(100vh - var(--st-offset) - 24px); overflow-y: auto; scrollbar-width: thin; }
  .st-toc__summary { min-height: 0; padding: 0; margin-bottom: 4px; background: none; border: 0; border-radius: 0; cursor: default; pointer-events: none; }
  .st-toc__summary::after { display: none; }
  .st-toc__list { margin-top: 10px; }
}

@media (min-width: 1100px) {
  .st-values__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .st-policies { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .st-hero::after { right: -260px; opacity: .8; }
  .st-form__actions .btn { justify-self: stretch; }
  .st-success__actions .btn { flex: 1 1 100%; }
  .st-faq-q { padding: 12px 16px; font-size: 17px; }
  .st-faq-a { padding: 0 16px 16px; }
  .st-page .cta-banner-actions .btn { flex: 1 1 100%; }
  .st-standard { gap: 16px; }
}

/* ─────────────────────────────────────────
   11. MOTION PREFERENCES
   ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .st-hero::after { animation: none; }
  .st-reveal, .st-reveal.st-pending { opacity: 1; transform: none; transition: none; }
  .st-page *, .st-page *::before, .st-page *::after { scroll-behavior: auto !important; }
  .st-faq-item[open] > .st-faq-a { animation: none; }
  .st-page .btn:active { transform: none; }
}

/* ─────────────────────────────────────────
   12. PRINT (legal pages): plain black on white, no chrome, link targets shown
   ───────────────────────────────────────── */
@media print {
  body.al-static--legal {
    background: white; color: black;
    --bg: white; --bg-2: white; --bg-3: white; --white: black; --text: black; --text-2: black; --text-3: black;
    --cyan: black; --border: rgba(0, 0, 0, .3); --border-cyan: rgba(0, 0, 0, .3);
  }
  body.al-static--legal .skip-link,
  body.al-static--legal .al-ann,
  body.al-static--legal .al-hd,
  body.al-static--legal .al-dr,
  body.al-static--legal .al-ft,
  body.al-static--legal .site-footer,
  body.al-static--legal .al-toasts,
  body.al-static--legal [class*="cart-drawer"],
  body.al-static--legal .breadcrumb,
  body.al-static--legal .st-legal__aside,
  body.al-static--legal .st-help,
  body.al-static--legal .st-policies-wrap,
  body.al-static--legal .st-print { display: none !important; }
  .st-page--legal .st-hero { background: none; border-bottom: 1px solid black; padding: 0 0 12pt; }
  .st-page--legal .st-hero::before, .st-page--legal .st-hero::after { display: none; }
  .st-page--legal .st-section { padding: 16pt 0 0; }
  .st-page--legal .st-legal { display: block; }
  .st-page--legal .st-prose, .st-page--legal .st-legal__prose { max-width: none; font-size: 11.5pt; line-height: 1.5; }
  .st-page--legal .st-legal__prose > p:first-of-type { font-size: 12pt; }
  .st-page--legal .st-prose h2 { break-after: avoid; border-top: 0; padding-top: 0; margin-top: 16pt; font-size: 14pt; }
  .st-page--legal .st-prose p, .st-page--legal .st-prose li { orphans: 3; widows: 3; }
  .st-page--legal .st-prose a { color: black; text-decoration: underline; }
  .st-page--legal .st-prose a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; overflow-wrap: anywhere; }
  .st-page--legal .st-table-wrap { overflow: visible; border: 1px solid black; }
  .st-page--legal .st-table-wrap--wide table { min-width: 0; }
  .st-page--legal .st-notice, .st-page--legal .st-legal__foot { break-inside: avoid; }
}