/*
 * 1SyncRx new design — foundation sheet (Foundation agent owned).
 *
 * Source of truth: design-import/Home.dc.html (+ siblings) and
 * design-import/WORK-SUMMARY.md. Loaded AFTER every legacy stylesheet so the
 * new tokens, the Hanken Grotesk type scale, the glass-pill header, the dark
 * compact footer and the shared card/tile/icon primitives win everywhere.
 * Page-specific rules live in assets/css/design/{page}.css (owned by that
 * page's agent) — do NOT add page rules here.
 */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* ═══════════════════════════════════════════════════════════════════════
     FOUR COLOURS. Owner rule, 2026-07-28: the site had drifted to 28 distinct
     greens and 49 colours overall, because raw hex values were written straight
     into component rules instead of going through tokens.

     There are now exactly four brand colours plus white. Every other value
     below is DERIVED from those four by mixing them with each other. No new
     hue is ever introduced, which is what keeps the greens consistent.

     If you need a shade that does not exist here, mix it from the four in this
     block and give it a token name. Never write a raw hex into a component.
     ═══════════════════════════════════════════════════════════════════════ */
  --c-deep:  #12291F;   /* 1. deep green  - dark bands, primary ink */
  --c-green: #1E5C4B;   /* 2. brand green - actions, links, emphasis on light */
  --c-sage:  #A8C7AE;   /* 3. light sage  - accents and buttons on dark */
  --c-sand:  #FAF9F5;   /* 4. warm sand   - page background */

  /* ── Semantic layer. Names kept so no component needs rewriting. ─────── */
  --d-green: var(--c-green);
  --d-green-hover: color-mix(in srgb, var(--c-green) 74%, var(--c-deep));
  --d-deep: var(--c-deep);
  --d-bg: var(--c-sand);

  /* Text hierarchy is one ink at different strengths, not different colours.
     That is what stops body copy drifting into its own grey-green. */
  --d-ink: var(--c-deep);
  --d-body: color-mix(in srgb, var(--c-deep) 74%, var(--c-sand));
  --d-body-strong: color-mix(in srgb, var(--c-deep) 86%, var(--c-sand));
  --d-nav: color-mix(in srgb, var(--c-deep) 80%, var(--c-sand));
  --d-muted: color-mix(in srgb, var(--c-deep) 74%, var(--c-sand));   /* 56% gave 3.50:1 on white, under AA */
  --d-muted-alt: color-mix(in srgb, var(--c-deep) 74%, var(--c-sand));

  --d-accent: var(--c-green);
  --d-accent-soft: var(--c-sage);

  /* Surfaces and hairlines: sand and sage thinned toward white. */
  --d-tile: color-mix(in srgb, var(--c-sage) 34%, #fff);
  --d-line: color-mix(in srgb, var(--c-deep) 11%, var(--c-sand));
  --d-line-soft: color-mix(in srgb, var(--c-deep) 7%, var(--c-sand));
  --d-frame-border: color-mix(in srgb, var(--c-deep) 13%, var(--c-sand));
  --d-frame-bg: color-mix(in srgb, var(--c-sand) 60%, #fff);
  --d-frame-dot: color-mix(in srgb, var(--c-deep) 14%, var(--c-sand));
  --d-chip-bg: color-mix(in srgb, var(--c-deep) 6%, var(--c-sand));
  --d-track: color-mix(in srgb, var(--c-deep) 10%, var(--c-sand));
  --d-input-border: color-mix(in srgb, var(--c-deep) 17%, var(--c-sand));
  --d-ghost-border: color-mix(in srgb, var(--c-deep) 19%, var(--c-sand));

  /* On deep green: sage thinned toward white for body and fine print. */
  --d-dark-body: color-mix(in srgb, var(--c-sage) 62%, #fff);
  --d-dark-muted: color-mix(in srgb, var(--c-sage) 82%, var(--c-deep));

  /* Was #CE9B8B, the only warm hue on the site and outside the palette. */
  --d-strike: color-mix(in srgb, var(--c-deep) 45%, var(--c-sand));

  /* Derived hero/section shades. Previously written as raw hex in home.css and
     platform.css (#1D4438, #235143, #174A3C, #C4DBC8, #C2D0C4, #BAD4BF). */
  --d-deep-lift: color-mix(in srgb, var(--c-deep) 82%, var(--c-green));
  --d-deep-glow: color-mix(in srgb, var(--c-deep) 62%, var(--c-green));
  --d-green-press: color-mix(in srgb, var(--c-green) 82%, var(--c-deep));
  --d-sage-lift: color-mix(in srgb, var(--c-sage) 72%, #fff);
  --d-sage-text: color-mix(in srgb, var(--c-sage) 55%, #fff);

  --d-header-glass: rgba(255, 255, 255, .9);
  --d-header-border: color-mix(in srgb, var(--c-deep) 8%, transparent);
  --d-shadow-header: 0 8px 32px color-mix(in srgb, var(--c-deep) 8%, transparent);
  --d-shadow-cta: 0 8px 24px color-mix(in srgb, var(--c-green) 22%, transparent);
  --d-shadow-frame: 0 16px 48px color-mix(in srgb, var(--c-deep) 7%, transparent);
  --d-shadow-frame-lg: 0 24px 70px color-mix(in srgb, var(--c-deep) 10%, transparent);
  --d-shadow-card-hover: 0 14px 32px color-mix(in srgb, var(--c-deep) 9%, transparent);
  /* TWO FONTS, owner rule. Hanken Grotesk is the only webfont loaded
     (functions.php:57). DM Sans and DM Mono were referenced in 26 places but
     never enqueued, so they silently fell back to whatever the OS supplied and
     the site rendered in three different faces. Both now resolve here. */
  --d-font: 'Hanken Grotesk', system-ui, sans-serif;
  --d-font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;

  /* Legacy token remap: old --srx-* names now resolve to the new palette so
     retained legacy components (form shell, lightbox, back-to-top) inherit
     sensibly. */
  --srx-logo-green: var(--c-green);
  --srx-brand: var(--c-green);
  --srx-brand-deep: var(--d-green-hover);
  --srx-ink: var(--c-deep);
  --srx-paper: var(--c-sand);
  --srx-accent-mint: var(--c-sage);
  --srx-chrome: var(--c-deep);
  --srx-chrome-deep: var(--c-deep);
  --header-height: 74px;
}

/* ── 2. Base / typography ──────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
}

body.syncrx-site {
  margin: 0;
  /* Hero blend: white fades into the warm neutral behind the floating
     header + hero (Home.dc.html #top wrapper gradient). */
  background-color: var(--d-bg);
  background-image: linear-gradient(180deg, #FFFFFF 0%, var(--d-bg) 100%);
  background-repeat: no-repeat;
  background-size: 100% 760px;
  color: var(--d-ink);
  font-family: var(--d-font);
  font-size: 16px;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
}

/* Wrapper utility for a page's hero block: reproduces the design's
   white → var(--c-sand) gradient so the glass header visually blends into it. */
.d-hero-blend {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--d-bg) 100%);
}

body.syncrx-site ::selection {
  background: var(--d-green);
  color: #fff;
}

body.syncrx-site a {
  color: var(--d-green);
  text-decoration: none;
}

body.syncrx-site a:hover {
  color: var(--d-green-hover);
}

body.syncrx-site h1,
body.syncrx-site h2,
body.syncrx-site h3,
body.syncrx-site h4 {
  font-family: var(--d-font);
  color: inherit;
}

body.syncrx-site h1 {
  font-size: clamp(30px, 3.8vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0;
}

body.syncrx-site h2 {
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0;
}

body.syncrx-site h3 {
  font-size: 20px;
  letter-spacing: -0.015em;
  font-weight: 800;
}

/* Green word-highlight: headlines mark exactly 1-2 words. */
.d-highlight,
body.syncrx-site h1 em,
body.syncrx-site h2 em,
body.syncrx-site h3 em {
  color: var(--d-green);
  font-style: normal;
}

.d-highlight--dark {
  color: var(--d-accent-soft);
  font-style: normal;
}

/* Section lede under a headline. */
.d-lede {
  color: var(--d-body);
  font-size: 16px;
  margin: 12px 0 0;
}

.d-lede b,
.d-lede strong {
  font-weight: 700;
  color: var(--d-ink);
}

/* Eyebrow kicker. */
.d-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--d-accent);
  text-transform: uppercase;
}

.d-eyebrow--dark {
  color: var(--d-accent-soft);
}

/* Fine print. */
.d-fineprint {
  font-size: 12.5px;
  color: var(--d-muted);
}

/* ── 3. Glass-pill sticky header ───────────────────────────────────────── */
.srx-header {
  position: sticky;
  top: 10px;
  z-index: 50;
  padding: 0 16px;
  background: none;
  border: 0;
}

.srx-header__pill {
  max-width: 1200px;
  margin: 0 auto;
  padding: 9px 12px 9px 18px;
  display: flex;
  align-items: center;
  gap: 30px;
  background: var(--d-header-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--d-header-border);
  border-radius: 18px;
  box-shadow: var(--d-shadow-header);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Owner 2026-07-26: tagline stacks directly beneath the mark. */
.srx-header__brand {
  display: flex;
  min-width: 44px;
  min-height: 44px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  flex: none;
  color: var(--d-ink);
  text-decoration: none;
}

.srx-header__symbol {
  position: relative;
  display: block;
  flex: none;
  width: 64px;
  height: 64px;
  overflow: visible;
  transform-origin: center;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

.srx-header__symbol img {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: contain;
}

.srx-header__brand-copy {
  display: block;
  max-width: none;
  min-width: 0;
}

.srx-header__tagline {
  display: block;
  color: var(--d-nav);
  font-family: var(--d-font);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .012em;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .srx-header__tagline {
    display: none;
  }
}


/* Tagline resolves after the logo finishes assembling. It fades in ONCE per
   page load, not on every loop replay, so a visitor reading it is never
   interrupted. */
@media (prefers-reduced-motion: no-preference) {
  .js .srx-header__tagline {
    animation: srx-tagline-resolve .62s 1.24s cubic-bezier(.22, 1, .36, 1) both;
  }
}

@keyframes srx-tagline-resolve {
  from { opacity: 0; transform: translateY(4px); letter-spacing: .06em; }
  to   { opacity: 1; transform: none; letter-spacing: .015em; }
}

/* Owner decision 2026-07-26: the pill visibly tightens once the page scrolls,
   matching the approved reference. Only compositor-friendly properties and
   padding animate; the pill never changes height enough to shift the page. */
.srx-header.is-scrolled .srx-header__pill {
  max-width: 1120px;
  padding-top: 6px;
  padding-bottom: 6px;
  background: color-mix(in srgb, #fff 92%, transparent);
  border-color: color-mix(in srgb, var(--d-green) 16%, transparent);
  border-radius: 15px;
  box-shadow: 0 12px 34px rgba(23, 37, 31, .11);
}

.srx-header__pill {
  transition:
    max-width .32s cubic-bezier(.22, 1, .36, 1),
    padding .32s cubic-bezier(.22, 1, .36, 1),
    border-radius .32s ease,
    background-color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .srx-header__pill {
    transition: none;
  }
}

.srx-header.is-scrolled .srx-header__symbol {
  transform: scale(.94);
}

@media (prefers-reduced-motion: no-preference) {
  .js .srx-header__brand-copy {
    animation: srx-brand-copy-arrive .64s 1.02s cubic-bezier(.22, 1, .36, 1) backwards;
  }
}

@keyframes srx-brand-copy-arrive {
  from {
    opacity: .68;
    transform: translateX(-5px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

body.syncrx-site .srx-header__brand:hover .srx-header__tagline,
body.syncrx-site .srx-header__brand:focus-visible .srx-header__tagline {
  color: var(--d-green-hover);
}

.srx-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
}

.srx-nav__list {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.syncrx-site .srx-nav a {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--d-nav);
  text-decoration: none;
  transition: color .2s ease;
}

body.syncrx-site .srx-nav a:hover,
body.syncrx-site .srx-nav a:focus-visible {
  color: var(--d-green);
}

body.syncrx-site .srx-nav a.is-current {
  color: var(--d-green);
  font-weight: 700;
}

body.syncrx-site .srx-nav a.is-current::after {
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: var(--d-green);
  content: "";
  transform: translateX(-50%);
}

/* Header CTA (also the shared primary pill button). */
body.syncrx-site .d-btn,
body.syncrx-site .srx-header__cta-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--d-green);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.srx-header__cta {
  margin-left: auto;
  flex: none;
}

body.syncrx-site .srx-header__cta-link {
  min-height: 46px;
  padding-inline: 20px;
  border-radius: 11px;
}

.srx-nav + .srx-header__cta {
  margin-left: 0;
}

body.syncrx-site .d-btn:hover,
body.syncrx-site .d-btn:focus-visible,
body.syncrx-site .srx-header__cta-link:hover,
body.syncrx-site .srx-header__cta-link:focus-visible {
  background: var(--d-green-hover);
  color: #fff;
}

/* Large hero CTAs share one type size, height and alignment. */
body.syncrx-site .d-btn--lg {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 15.5px;
  line-height: 1.35;
  border-radius: 10px;
  box-shadow: var(--d-shadow-cta);
}

body.syncrx-site .d-btn--lg:hover {
  transform: translateY(-1px);
}

.d-btn--ghost {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--d-green);
  border: 1.5px solid var(--d-ghost-border);
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 15.5px;
  line-height: 1.35;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color .2s ease;
}

.d-btn--ghost:hover,
.d-btn--ghost:focus-visible {
  border-color: var(--d-green);
  color: var(--d-green);
}

/* Mobile toggle (kept for accessibility: theme.js drives it). Hidden on
   desktop; appears ≤768px where the design hides the nav. */
.srx-nav-toggle {
  display: none;
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--d-ghost-border);
  border-radius: 10px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--d-ink);
  cursor: pointer;
}

.srx-nav-toggle .nav-toggle__icon {
  position: relative;
  width: 16px;
  height: 12px;
  display: block;
}

.srx-nav-toggle .nav-toggle__icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease, top .25s ease;
}

.srx-nav-toggle .nav-toggle__icon span:first-child { top: 2px; }
.srx-nav-toggle .nav-toggle__icon span:last-child { top: 8px; }
.srx-nav-toggle[aria-expanded="true"] .nav-toggle__icon span:first-child { top: 5px; transform: rotate(45deg); }
.srx-nav-toggle[aria-expanded="true"] .nav-toggle__icon span:last-child { top: 5px; transform: rotate(-45deg); }

.srx-nav__mobile-cta {
  display: none;
}

/* Responsive header: nav hidden ≤768px, logo + Book-a-demo remain
   (WORK-SUMMARY.md). The toggle reveals the nav as a glass dropdown. */
@media (max-width: 1100px) {
  .srx-nav-toggle {
    display: inline-flex;
  }

  .js .srx-nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 16px;
    right: 16px;
    margin-left: 0;
    background: var(--d-header-glass);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--d-header-border);
    border-radius: 16px;
    box-shadow: var(--d-shadow-header);
    padding: 18px 20px;
  }

  .js .srx-nav.is-open {
    display: block;
  }

  .srx-header__pill {
    position: relative;
    gap: 14px;
  }

  .srx-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .srx-nav a {
    font-size: 15px;
  }

  .no-js .srx-nav {
    display: block;
    width: 100%;
    margin-left: 0;
    flex: 1 0 100%;
    order: 4;
  }

  .no-js .srx-nav-toggle {
    display: none;
  }

  .no-js .srx-header__pill {
    flex-wrap: wrap;
  }
}

@media (min-width: 1101px) {
  .srx-nav-toggle {
    display: none !important;
  }
}

/* ── 4. Compact dark footer ────────────────────────────────────────────── */
.srx-footer {
  padding: clamp(40px, 4.5vw, 64px) 24px 0;
  background: var(--d-deep);
  color: #fff;
}

.srx-footer__rail {
  max-width: 1160px;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 24px 0;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.srx-footer__wordmark {
  display: flex;
  min-height: 44px;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #fff;
}

.srx-footer__copy {
  font-size: 12.5px;
  color: var(--d-dark-muted);
}

.srx-footer__nav {
  margin-left: auto;
  display: flex;
  gap: 20px;
  font-size: 13px;
  font-weight: 600;
  flex-wrap: wrap;
}

body.syncrx-site .srx-footer__nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--d-dark-body);
  text-decoration: none;
  transition: color .2s ease;
}

body.syncrx-site .srx-footer__nav a:hover,
body.syncrx-site .srx-footer__nav a:focus-visible {
  color: #fff;
}

@media (max-width: 720px) {
  .srx-footer {
    padding-top: 40px;
  }

  .srx-footer__rail {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .srx-footer__nav {
    margin-left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
  }

  body.syncrx-site .srx-footer__nav a {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.syncrx-site .srx-footer__nav a:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .srx-header {
    padding-inline: 10px;
  }

  .srx-header__pill {
    padding: 8px 10px 8px 14px;
    gap: 8px;
  }

  .srx-nav-toggle {
    padding-inline: 10px;
  }

  .srx-nav-toggle .nav-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .srx-header__brand {
    gap: 8px;
  }

  .srx-header__symbol {
    flex-basis: 44px;
    width: 44px;
    height: 46px;
  }

  .srx-header__brand-copy {
    max-width: 84px;
  }

  .srx-header__tagline {
    font-size: 9.5px;
  }

  body.syncrx-site .srx-header__cta-link {
    padding-inline: 14px;
    font-size: 13.5px;
  }
}

@media (max-width: 360px) {
  .srx-header__pill {
    padding-inline: 12px 9px;
    gap: 7px;
  }

  .srx-header__brand {
    gap: 7px;
  }

  .srx-header__symbol {
    flex-basis: 40px;
    width: 40px;
    height: 42px;
  }

  .srx-header__brand-copy {
    display: none;
  }

  body.syncrx-site .srx-header__cta-link {
    padding-inline: 12px;
    font-size: 13px;
  }
}

/* Reusable cards and steps shrink with their grid/flex track. Long labels,
   addresses and descriptions wrap inside the component instead of expanding
   the page. */
body.syncrx-site :where(
  [class*="__card"],
  [class*="-card"],
  [class*="__step"],
  [class*="-step"],
  [class*="__item"],
  [class*="-item"]
) {
  min-width: 0;
}

body.syncrx-site .form-phi-warning {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--d-body-strong);
  font-size: 13px;
  line-height: 1.5;
  text-wrap: pretty;
}

body.syncrx-site :where(
  [class*="__card"],
  [class*="-card"],
  [class*="__step"],
  [class*="-step"],
  [class*="__item"],
  [class*="-item"]
) :where(h2, h3, h4, p, span, strong, a) {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* ── 5. Back to top (design: fixed green circle, bottom right) ─────────── */
body.syncrx-site .back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--d-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(18, 41, 31, .35);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background-color .25s ease;
}

body.syncrx-site .back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body.syncrx-site .back-to-top:hover,
body.syncrx-site .back-to-top:focus-visible {
  background: var(--d-green-hover);
  color: #fff;
  transform: translateY(-2px);
}

.no-js body.syncrx-site .back-to-top {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ── 6. Shared primitives (cards, tiles, frames, checks) ───────────────── */
/* Soft green icon tile: 44px (default) and 38px (small) with 1.8px-stroke
   20px SVGs in currentColor. */
.d-tile {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--d-tile);
  color: var(--d-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.d-tile--sm {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

/* Light card with hover lift. */
.d-card {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: 14px;
  padding: 26px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.d-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--d-shadow-card-hover);
}

/* Warm card variant (used on white sections). */
.d-card--warm {
  background: var(--d-bg);
}

/* Deep green KPI / stat card. */
.d-card--deep {
  background: var(--d-deep);
  border: 0;
  color: #fff;
  transition: transform .25s ease;
}

.d-card--deep:hover {
  transform: translateY(-3px);
  box-shadow: none;
}

/* Browser frame for product media: rounded, bordered, three dots. */
.d-frame {
  border-radius: 16px;
  border: 1px solid var(--d-frame-border);
  background: var(--d-frame-bg);
  box-shadow: var(--d-shadow-frame);
  overflow: hidden;
  text-align: left;
}

.d-frame--lg {
  background: #fff;
  box-shadow: var(--d-shadow-frame-lg);
}

.d-frame__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--d-line-soft);
  background: #fff;
}

.d-frame--lg .d-frame__bar {
  background: var(--d-frame-bg);
}

.d-frame__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--d-frame-dot);
}

.d-frame__chip {
  margin-left: 10px;
  font-size: 12px;
  color: var(--d-muted-alt);
  background: var(--d-chip-bg);
  border-radius: 6px;
  padding: 3px 14px;
}

.d-frame > img,
.d-frame__body > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Inline check mark. */
.d-check {
  color: var(--d-accent);
  font-weight: 800;
}

/* Numbered step dot (How-it-works). */
.d-stepnum {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--d-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}

/* Content rails: the design keeps content on 1000-1160px max widths. */
.d-rail       { max-width: 1160px; margin-left: auto; margin-right: auto; }
.d-rail--1120 { max-width: 1120px; margin-left: auto; margin-right: auto; }
.d-rail--1040 { max-width: 1040px; margin-left: auto; margin-right: auto; }
.d-rail--1000 { max-width: 1000px; margin-left: auto; margin-right: auto; }
.d-rail--880  { max-width: 880px;  margin-left: auto; margin-right: auto; }
.d-rail--820  { max-width: 820px;  margin-left: auto; margin-right: auto; }
.d-rail--780  { max-width: 780px;  margin-left: auto; margin-right: auto; }
.d-rail--720  { max-width: 720px;  margin-left: auto; margin-right: auto; }
.d-rail--640  { max-width: 640px;  margin-left: auto; margin-right: auto; }

/* Give the floating navigation enough visual presence on 27-inch displays
   without stretching the page content's readable rails. */
@media (min-width: 1600px) {
  .srx-header__pill {
    max-width: 1240px;
  }
}

/* Dark band (credibility strip, vision, final CTA backgrounds). */
.d-band-deep {
  background: var(--d-deep);
  color: var(--d-line);
}

/* ── 7. Responsive + motion safety ─────────────────────────────────────── */
/* Nowrap lines release below 720px (design fallback). */
@media (max-width: 720px) {
  .d-nowrap,
  body.syncrx-site [style*="white-space: nowrap"] {
    white-space: normal !important;
  }
}

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

  .d-card,
  .d-card--deep,
  .d-btn,
  .d-btn--lg,
  .srx-header__pill,
  .srx-header__symbol,
  .srx-header__symbol img,
  .srx-header__brand-copy,
  .back-to-top {
    animation: none;
    transition: none;
  }

  .d-card:hover,
  .d-card--deep:hover,
  .d-btn--lg:hover,
  .back-to-top:hover {
    transform: none;
  }

  .srx-header.is-scrolled .srx-header__symbol {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL SYSTEM (owner request 2026-07-26)
   ───────────────────────────────────────────────────────────────────────
   The [data-fade] hooks were already distributed through the section
   templates but nothing implemented them. This is that implementation.

   Discipline, per the UI/UX rules and the project's motion policy:
   - transform + opacity ONLY, so nothing reflows and CLS stays at zero
   - 420ms enter, ease-out; staggers 45ms apart (within the 30-50ms rule)
   - each element reveals ONCE and then stays put; nothing re-animates or
     loops as the visitor scrolls back and forth
   - the no-JS and reduced-motion paths render everything fully visible,
     because .is-revealed is simply never required in those states
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  .js.motion-ready [data-fade] {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
      opacity .42s cubic-bezier(.22, 1, .36, 1),
      transform .42s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
  }

  .js.motion-ready [data-fade].is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  /* Staggered children: card grids, checklists, step rails. The delay is
     set inline by theme.js from the child's index, capped so a long grid
     never leaves the last card waiting. */
  .js.motion-ready [data-fade-group] > * {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
      opacity .42s cubic-bezier(.22, 1, .36, 1),
      transform .42s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--srx-stagger, 0ms);
  }

  .js.motion-ready [data-fade-group].is-revealed > * {
    opacity: 1;
    transform: none;
  }

  /* Scale-in for product frames: the screen settles forward rather than
     sliding, which reads as the screen "arriving" instead of drifting. */
  .js.motion-ready [data-fade-scale] {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(.985);
    transition:
      opacity .5s cubic-bezier(.22, 1, .36, 1),
      transform .5s cubic-bezier(.22, 1, .36, 1);
  }

  .js.motion-ready [data-fade-scale].is-revealed {
    opacity: 1;
    transform: none;
  }

  /* Word-by-word headline reveal. Used on ONE headline per page (the hero)
     so it stays an accent rather than a tic. Words are wrapped by theme.js;
     the accessible text is unchanged because the wrapper keeps the words as
     real text nodes with normal spacing. */
  .js.motion-ready [data-reveal-words] .srx-word {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, .38em, 0);
    transition:
      opacity .5s cubic-bezier(.22, 1, .36, 1),
      transform .5s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--srx-word-delay, 0ms);
  }

  .js.motion-ready [data-reveal-words].is-revealed .srx-word {
    opacity: 1;
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PARALLAX + FLOATING BACKGROUND (owner request 2026-07-26)
   ───────────────────────────────────────────────────────────────────────
   Both are deliberately understated. Rules honoured:
   - transform only, so nothing reflows and CLS stays zero
   - CSS scroll-driven timelines where supported, so parallax runs on the
     compositor and costs no scroll handler; browsers without support simply
     get a static element (progressive enhancement, never a broken layout)
   - everything is decorative and aria-hidden by construction (pseudo-
     elements), so screen readers never meet it
   - all of it is disabled wholesale under prefers-reduced-motion
   NOTE: "floating background elements" overrides the project's usual
   no-floating-loops rule. Owner-approved 2026-07-26, scoped to these two
   decorative washes only, at very low contrast so text is never disturbed.
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  /* ── Parallax: product frames drift a little slower than the page ────── */
  @supports (animation-timeline: view()) {
    [data-parallax] {
      animation: srx-parallax linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: transform;
    }
  }

  @keyframes srx-parallax {
    from { transform: translate3d(0, 22px, 0); }
    to   { transform: translate3d(0, -22px, 0); }
  }

  /* ── Floating wash: two very soft brand-tinted orbs behind the hero.
        6% and 5% tint means they read as light, not as shapes. ────────── */
  .home-hero::before,
  .home-hero::after {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    content: "";
    pointer-events: none;
    filter: blur(42px);
  }

  .home-hero::before {
    top: 6%;
    left: -6%;
    width: min(38vw, 440px);
    aspect-ratio: 1;
    background: radial-gradient(circle, color-mix(in srgb, var(--d-green) 6%, transparent), transparent 70%);
    animation: srx-float-a 19s ease-in-out infinite;
  }

  .home-hero::after {
    right: -8%;
    bottom: 4%;
    width: min(32vw, 380px);
    aspect-ratio: 1;
    background: radial-gradient(circle, color-mix(in srgb, var(--d-accent) 5%, transparent), transparent 70%);
    animation: srx-float-b 23s ease-in-out infinite;
  }

  /* Offset durations keep the two from ever pulsing in unison, which is what
     makes a floating background read as "breathing" rather than "blinking". */
  @keyframes srx-float-a {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(18px, -22px, 0); }
  }

  @keyframes srx-float-b {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(-20px, 16px, 0); }
  }

  /* Hidden while the tab is backgrounded, like every other loop here. */
  .motion-paused .home-hero::before,
  .motion-paused .home-hero::after {
    animation-play-state: paused;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNIFIED BUTTON SHAPE
   Owner request: every button on the site reads as one component. The site had
   drifted to three different shapes - 10px radius on most CTAs and form
   submits, 11px in the header, 999px on the pricing CTAs - with heights from
   46px to 56px and five different font sizes.
   One pill shape, one height floor, one type size. Colours are deliberately
   left alone here: each button already carries the right colour for the
   surface it sits on, and those pairs are contrast-verified.
   Selectors are prefixed with body.syncrx-site so they outrank the global
   `body.syncrx-site a` colour rule, which is specificity (0,1,2).
   Excluded on purpose: .home-aud__tab and .sec-chip (tab/chip controls, not
   buttons), .back-to-top (circular by design), .skip-link (a11y utility).
   ═══════════════════════════════════════════════════════════════════════════ */
body.syncrx-site .d-btn,
body.syncrx-site .d-btn--ghost,
body.syncrx-site .dbd-form__submit,
body.syncrx-site .home-cta__submit,
body.syncrx-site .phx-demoform__submit,
body.syncrx-site .pre-invite__submit,
body.syncrx-site .sec-cta__primary,
body.syncrx-site .sec-cta__ghost,
body.syncrx-site .srx-header__cta-link,
body.syncrx-site .home-pricing__cta {
  border-radius: 999px;
  min-height: 48px;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The header CTA stays compact so the pill bar does not grow taller. */
body.syncrx-site .srx-header__cta-link {
  min-height: 42px;
  font-size: 14px;
}

/* ── Footer brand lockup ──────────────────────────────────────────────────
   The footer previously showed a bare text wordmark. The mark is decorative
   here because the wordmark beside it already names the brand, so alt="" is
   correct and avoids a screen reader announcing "1SyncRx" twice. */
.srx-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.srx-footer__logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOUCH TARGETS AND MINIMUM TYPE
   Measured on a 390px viewport against the live site: 25 interactive elements
   fell under the 44x44 minimum (Apple HIG / Material 48dp) and 11 text nodes
   rendered below 12px. Both are CRITICAL-priority accessibility rules.

   Interactive elements get a real 44px minimum rather than a visual-only
   change, so the hit area genuinely grows. Type floors at 12px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tabs and the header CTA sat at 42px, two pixels under the minimum. */
body.syncrx-site .plat-switch__tab,
body.syncrx-site .srx-header__cta-link,
body.syncrx-site .home-aud__tab {
  min-height: 44px;
}

/* Form controls: 44px is also the height at which iOS stops zooming on focus. */
body.syncrx-site input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.syncrx-site select,
body.syncrx-site textarea {
  min-height: 44px;
}

/* Inline nav and footer links are text, so they cannot simply grow to 44px
   without breaking the line box. Extend the HIT AREA instead with a
   pseudo-element, which leaves layout untouched. */
body.syncrx-site .srx-footer__nav a,
body.syncrx-site .plat-jump a,
body.syncrx-site .srx-nav a {
  position: relative;
}

/* ::before, NOT ::after. The active-page indicator is `.srx-nav a.is-current
   ::after` (a 16x2px underline). Putting the hit-area extender on ::after
   collided with it: min-height:44px inflated that underline into a 16x44px
   green pill hanging below the current nav item. ::before is unused here, so
   the hit area and the indicator no longer share an element.
   pointer-events stays default so the enlarged area is actually clickable. */
body.syncrx-site .srx-footer__nav a::before,
body.syncrx-site .srx-nav a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}

/* 12px type floor. Below this, text is unreadable for many users and iOS
   treats it as a zoom trigger. */
body.syncrx-site .srx-header__tagline,
body.syncrx-site .product-media__title,
body.syncrx-site .home-tuesday__badge,
body.syncrx-site .home-pricing__badge {
  font-size: 12px;
}