/* ============================================================
   Atlas-MPS Public Site · Editorial Refresh (2026-05-27)
   ------------------------------------------------------------
   Loaded AFTER style.css; overrides the visible surface layer
   without touching the 2k-line base. Single rollback point:
   remove the <link> from includes/header.php.

   System:
     · Light gray "paper" base (warm, not sterile)
     · ONE distinctive moss accent used SPARINGLY
     · Editorial type stack — Newsreader + Inter sans + JetBrains Mono
     · Hairlines instead of cards wherever possible
     · Asymmetric, left-aligned hero with oversized display
   ============================================================ */

:root {
	/* ── Warm cream / tan / bronze palette ─────────────────
	   Pulled deliberately toward brown undertones, NOT cool slate.
	   Hierarchy reads as layered paper: paper → whisper → sand → tan.
	   Charcoal text + bronze metallic accents = private-bank gravitas
	   that still feels like healthcare-management software, not a hotel. */
	--paper:     #fbf8f3;   /* cream — main background, warmer than #fafaf9 */
	--whisper:   #f3ede2;   /* warm sand — subtle section bands */
	--sand:      #ebe2d2;   /* deeper sand for layered cards */
	--soft:      #ddd2bd;   /* tan hairlines, dividers */
	--hush:      #c5b9a3;   /* taupe — quiet accents */
	--mute:      #8c8275;   /* warm mute — mono captions / meta text */
	--graphite:  #4d453d;   /* warm body text (brown undertone, not blue) */
	--ink:       #1e1812;   /* charcoal — headlines */
	--obsidian:  #0e0a07;   /* deepest dark, warm undertone */

	/* ── Metallic / accent register ─────────────────────────
	   Two warm tones used in concert:
	   --accent (umber) for buttons + word underlines + section accents
	   --bronze for hairline focus rings + subtle metallic touches
	   --gilt   for the rare "expensive detail" — drop-cap, badge, key icon */
	--accent:        #463C37;   /* umber — primary action brown */
	--accent-rich:   #5a3d2a;   /* deeper chocolate — hover end-state */
	--accent-soft:   #e8ddc8;   /* warm wash for accent backgrounds */
	--accent-line:   #5a4e47;
	--bronze:        #8a6f4d;   /* metallic bronze */
	--gilt:          #b58e5f;   /* lighter brass / gilt */
	--btn-warm:      var(--accent);

	/* ── Premium surface effects ────────────────────────────
	   Warm-tinted shadows (NEVER pure black — kills the warmth).
	   These four are the building blocks of layered paper depth. */
	--shadow-paper:   0 1px 0 rgba(70, 60, 55, 0.04);
	--shadow-card:    0 1px 1px rgba(70, 60, 55, 0.05),
	                  0 4px 12px rgba(70, 60, 55, 0.06);
	--shadow-lift:    0 2px 4px rgba(70, 60, 55, 0.06),
	                  0 12px 32px rgba(70, 60, 55, 0.10);
	--shadow-deep:    0 4px 8px rgba(30, 24, 18, 0.10),
	                  0 24px 48px rgba(30, 24, 18, 0.14);
	--ring-bronze:    0 0 0 3px rgba(138, 111, 77, 0.18);

	/* Remap legacy style.css tokens so the existing 2k-line base inherits
	   the new warm palette without per-selector overrides. */
	--linen:        var(--paper);
	--tan:          var(--hush);
	--tan-light:    var(--sand);
	--umber:        var(--accent);          /* keep umber as the action brown */
	--umber-dark:   var(--accent-rich);
	--bark:         var(--ink);
	--bark-deep:    var(--obsidian);
	--bark-light:   var(--graphite);
	--espresso:     var(--obsidian);
	--navy:         var(--obsidian);
	--navy-mid:     var(--ink);
	--navy-light:   var(--graphite);
	--blue:         var(--accent);
	--blue-dark:    var(--accent-rich);
	--blue-light:   var(--accent-soft);
	--teal:         var(--bronze);
	--green:        var(--accent);
	--slate-50:     var(--paper);
	--slate-100:    var(--whisper);
	--slate-200:    var(--soft);
	--slate-300:    var(--hush);
	--slate-400:    var(--mute);
	--slate-500:    var(--graphite);
	--slate-600:    var(--ink);
	--slate-700:    var(--ink);
	--slate-800:    var(--ink);
	--slate-900:    var(--ink);

	/* Legacy shadow tokens point at the new warm-tinted scale. */
	--shadow-sm:    var(--shadow-paper);
	--shadow-md:    var(--shadow-card);
	--shadow-lg:    var(--shadow-lift);
	--shadow-xl:    var(--shadow-deep);
}

/* ── Base ────────────────────────────────────────────────── */
body {
	background: var(--paper);
	color: var(--ink);
	font-feature-settings: 'ss01' 1, 'cv11' 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--accent); color: var(--paper); }

/* ── Editorial type stack ────────────────────────────────── */
/* Newsreader — Production Type's serif designed for digital news +
   journal reading. Variable optical-size axis from 6pt to 72pt, plus
   weights 200–800. Reads as serious / clinical at display sizes and
   stays clean at smaller sizes (section titles, module names). */
h1, h2, h3, h4 {
	font-family: 'Newsreader', 'Cormorant Garamond', Georgia, serif;
	font-weight: 400;
	color: var(--ink);
	letter-spacing: -0.015em;
	font-variation-settings: 'opsz' 48;
}
h5, h6 { font-family: 'Inter', sans-serif; }
p     { color: var(--graphite); }

.mono, .eyebrow, .nav-num {
	font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
	font-feature-settings: 'zero' 1;
}

/* ── Buttons — refined, with subtle premium lift ──────────
   Primary buttons gain a warm umber-tinted shadow on rest, and the
   shadow softens + lifts on hover. The hover color goes umber → bark.
   Focus rings use bronze. No box-shadow black ever appears here. */
.btn {
	border-radius: 0;
	padding: 0.95rem 1.85rem;
	font-weight: 500;
	font-size: 0.88rem;
	letter-spacing: 0.02em;
	transition:
		transform .25s cubic-bezier(.2,.7,.3,1),
		background-color .25s ease,
		color .2s ease,
		border-color .2s ease,
		box-shadow .25s ease;
	border: 1px solid transparent;
}
.btn:focus-visible { outline: none; box-shadow: var(--ring-bronze); }
.btn--primary {
	background: var(--ink);
	color: var(--paper);
	box-shadow: 0 1px 1px rgba(30, 24, 18, 0.12),
	            0 6px 18px rgba(30, 24, 18, 0.16);
}
.btn--primary:hover {
	background: var(--accent);
	color: var(--paper);
	transform: translateY(-1px);
	box-shadow: 0 2px 2px rgba(70, 60, 55, 0.14),
	            0 12px 28px rgba(70, 60, 55, 0.22);
}
.btn--outline,
.btn--outline-dark {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--graphite);
}
.btn--outline:hover,
.btn--outline-dark:hover {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(30, 24, 18, 0.14);
}
.btn--white {
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--paper);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}
.btn--white:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--paper);
	transform: translateY(-1px);
	box-shadow: 0 2px 2px rgba(70, 60, 55, 0.18),
	            0 12px 28px rgba(70, 60, 55, 0.28);
}
.btn--large { padding: 1.1rem 2.4rem; font-size: 0.95rem; }
.btn--small { padding: 0.55rem 1.1rem; font-size: 0.8rem; }

/* Disabled "Coming Soon" treatment for modules not yet publicly available.
   Visually muted, never clickable, no hover lift. Cleanly signals "later".
   Use on a <span> or on an <a> — the pointer-events kill any href anyway. */
.btn--disabled,
.btn--disabled:hover,
.btn--disabled:focus,
.btn--disabled:active {
	background: var(--whisper) !important;
	color: var(--mute) !important;
	border: 1px solid var(--soft) !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
	pointer-events: none;
	transform: none !important;
	opacity: 1;
}
/* On the dark CTA-banner background, the disabled state needs a darker
   surface — whisper-on-obsidian would be too high contrast. */
.cta-banner .btn--disabled,
.cta-banner .btn--disabled:hover {
	background: rgba(251, 248, 243, 0.08) !important;
	color: rgba(251, 248, 243, 0.45) !important;
	border-color: rgba(251, 248, 243, 0.18) !important;
}

/* Arrow that slides on hover — apply to any .btn via existing svg or
   .btn[data-arrow] markup. Subtle, premium. */
.btn svg { transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.btn:hover svg { transform: translateX(3px); }

/* ── Navbar — warm glass on scroll, bronze active accent ─── */
.navbar {
	background: transparent;
	padding: 1.5rem 0;
	border-bottom: 1px solid transparent;
}
.navbar.scrolled,
.navbar--solid {
	background: rgba(251, 248, 243, 0.78);    /* warm cream glass, not cool white */
	backdrop-filter: saturate(180%) blur(18px);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	border-bottom-color: var(--soft);
	box-shadow: 0 1px 0 rgba(70, 60, 55, 0.04);
	padding: 0.85rem 0;
}
.navbar__logo { color: var(--ink); }
.navbar__logo-img {
	filter: invert(1) grayscale(1) brightness(0.1);  /* white wordmark → near-black */
	height: 36px;
}
.navbar__links a,
.nav-dropdown__trigger {
	color: var(--graphite);
	font-weight: 500;
	font-size: 0.83rem;
	letter-spacing: 0.015em;
}
.navbar__links a:hover,
.nav-dropdown__trigger:hover { color: var(--ink); }
.navbar__links a.active,
.nav-dropdown__trigger.active { color: var(--ink); }
/* Bronze underline on active nav — a tiny moment of metallic accent. */
.navbar__links a.active::after,
.nav-dropdown__trigger.active::after {
	background: var(--bronze);
	height: 1px;
	bottom: -8px;
	right: auto;
	width: 100%;
}
.navbar__toggle { color: var(--ink); }

/* Dropdown — warm paper card with refined hover state */
.nav-dropdown__menu {
	background: var(--paper);
	border: 1px solid var(--soft);
	box-shadow: var(--shadow-deep);
	border-radius: 0;
	color: var(--ink);
	padding: 0.65rem;
	min-width: 340px;
}
.nav-dropdown__item {
	color: var(--graphite);
	transition: background .2s ease, color .15s ease, padding-left .2s ease;
	border-radius: 0;
	padding: 0.85rem 0.95rem;
}
.nav-dropdown__item:hover {
	background: var(--whisper);
	color: var(--ink);
	padding-left: 1.15rem;
}
.nav-dropdown__item.is-current {
	background: var(--accent-soft);
	color: var(--ink);
	border-left: 2px solid var(--gilt);
	padding-left: 0.75rem;
}
.nav-dropdown__item-logo {
	background: var(--whisper);
	border: 1px solid var(--soft);
	border-radius: 0;
}
.nav-dropdown__item-logo img { filter: none; }
.nav-dropdown__item-title {
	color: var(--ink);
	font-weight: 600;
	letter-spacing: -0.005em;
}
.nav-dropdown__item-sub {
	color: var(--bronze);
	font-family: 'Newsreader', Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 0.85rem;
	letter-spacing: 0;
	text-transform: none;
}
.nav-dropdown__item--overview { border-bottom-color: var(--soft); }

/* ── Hero — layered warm paper with gradient orbs ──────────
   The base is a soft cream → sand vertical gradient. Two large blurred
   gradient orbs (warm tan + bronze) sit behind the content, giving the
   hero real depth without ever looking busy. Same move as the auth
   pages — they're the visual reference. */
.hero,
.hero--xl,
.hero--inner {
	position: relative;
	color: var(--ink);
	min-height: auto;
	padding: 11rem 0 5rem;
	text-align: left;
	display: block;
	overflow: hidden;
	background:
		radial-gradient(60% 80% at 100% 0%, rgba(181, 142, 95, 0.10) 0%, transparent 60%),
		radial-gradient(50% 60% at 0% 100%, rgba(197, 185, 163, 0.20) 0%, transparent 55%),
		linear-gradient(180deg, var(--paper) 0%, var(--whisper) 100%);
}
.hero--xl     { padding: 11rem 0 7rem; }
.hero--xl .hero__content { max-width: 1150px; }
.hero--inner  { padding: 10rem 0 4.5rem; }
.hero--compact{ padding: 9rem 0 3.5rem; }

/* Decorative gradient orbs — pure CSS, no DOM cost. The ::before and
   ::after are blurred radial gradients positioned for asymmetric balance. */
.hero::before {
	content: '';
	position: absolute;
	top: -15%;
	right: -10%;
	width: 60vw;
	max-width: 720px;
	aspect-ratio: 1;
	background: radial-gradient(circle at center, rgba(138, 111, 77, 0.22) 0%, transparent 65%);
	filter: blur(40px);
	pointer-events: none;
	z-index: 0;
}
.hero::after {
	content: '';
	position: absolute;
	bottom: -20%;
	left: -8%;
	width: 50vw;
	max-width: 640px;
	aspect-ratio: 1;
	background: radial-gradient(circle at center, rgba(221, 210, 189, 0.55) 0%, transparent 70%);
	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
}

.hero__canvas {
	z-index: 1;
	opacity: 0.45;          /* particles read as a haze over the warm backdrop */
}

.hero__content {
	position: relative;
	z-index: 3;            /* above ::before, ::after, and particle canvas */
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 1.5rem;
	text-align: left;
	width: 100%;
}

/* Mono caption — replaces the pill-shaped hero badge */
.hero__badge {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--mute);
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: none;
	margin-bottom: 2.5rem;
}
.hero__badge::before {
	content: '';
	display: inline-block;
	width: 36px;
	height: 1px;
	background: currentColor;
	margin-right: 0.85rem;
}

/* Display headlines tuned for a clinical / medical feel:
   - Newsreader — clean, confident, journal-feel at display sizes
   - smaller upper clamp values → confident, not theatrical
   - tighter line-height (0.94) → headline reads as one block
   - subtle negative tracking (-0.015em) → letters breathe naturally */
.hero__title {
	color: var(--ink);
	font-family: 'Newsreader', Georgia, serif;
	font-weight: 400;
	font-variation-settings: 'opsz' 72;
	font-size: clamp(2.25rem, 5.5vw, 4.25rem);
	line-height: 0.96;
	letter-spacing: -0.015em;
	margin-bottom: 1.75rem;
	max-width: 900px;
}
.hero--xl .hero__title {
	font-size: clamp(2.5rem, 6.2vw, 4.75rem);
}
.hero--inner .hero__title { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }

/* The .highlight word(s) — single accent underline as the only emphasis.
   Uses text-decoration (not an absolute ::after) so it wraps cleanly on
   mobile: every line of the highlighted phrase gets the underline, never
   forces overflow. Slight fade-in keeps a hint of the original animation. */
.hero__title .highlight {
	font-style: normal;
	font-weight: inherit;
	background: none !important;
	-webkit-text-fill-color: var(--ink);
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 0.055em;
	text-underline-offset: 0.16em;
	text-decoration-skip-ink: none;
	animation: heroUnderlineFade 1.2s cubic-bezier(.2,.7,.3,1) 0.4s both;
}
@keyframes heroUnderlineFade {
	from { text-decoration-color: transparent; }
	to   { text-decoration-color: var(--accent); }
}

.hero__sub {
	color: var(--graphite);
	font-size: clamp(1.05rem, 1.8vw, 1.2rem);
	line-height: 1.55;
	max-width: 52ch;
	margin: 0 0 2.75rem;
}

.btn-group { gap: 0.6rem; }
.hero .btn-group { justify-content: flex-start !important; }

/* Compact platform pills — sit on a fading bronze hairline */
.hero__platform-pills {
	margin-top: 5rem;
	padding-top: 2rem;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 2.5rem;
	row-gap: 0;
	align-items: center;
	justify-content: flex-start;
	position: relative;
}
.hero__platform-pills::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 240px;
	height: 1px;
	background: linear-gradient(90deg, var(--bronze) 0%, transparent 100%);
	opacity: 0.5;
}
.hero__platform-pills__label {
	width: auto;
	text-align: left;
	color: var(--bronze);
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	font-weight: 500;
	text-transform: uppercase;
	margin: 0;
	white-space: nowrap;
}
.hero__platform-pills > .platform-pill { margin: 0; }
.hero__platform-pills__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.platform-pill {
	background: var(--paper);
	border: 1px solid var(--soft);
	color: var(--ink);
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 500;
	padding: 0.45rem 0.95rem 0.45rem 0.5rem;
	box-shadow: var(--shadow-paper);
	transition: transform .2s ease, background-color .2s, color .2s, border-color .2s, box-shadow .25s ease;
}
.platform-pill:hover {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
	transform: translateY(-1px);
	box-shadow: var(--shadow-card);
}
.platform-pill__logo {
	background: var(--whisper);
	border: 1px solid var(--soft);
	width: 22px;
	height: 22px;
}
.platform-pill:hover .platform-pill__logo {
	background: var(--paper);
	border-color: var(--paper);
}

/* ── Sections — paper layers, no hard hairlines ────────────
   The page reads as a stack of paper plates: cream (paper) →
   warm sand (whisper) → cream. The transitions are tonal, not
   ruled lines, so the rhythm feels like editorial print, not a
   SaaS marketing template. */
.section {
	padding: 7rem 0;
	background: var(--paper);
	color: var(--ink);
	border-top: 0;
	position: relative;
}
.section--gray,
.section--together {
	background: var(--whisper) !important;
}
/* Soft top edge on warm-sand sections: a 1px tan hairline that fades. */
.section--gray::before,
.section--together::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--soft) 30%, var(--soft) 70%, transparent 100%);
}
.section--dark {
	background: var(--obsidian);
	color: var(--paper);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark p   { color: var(--mute); }

/* Section header — numbered, left-aligned by default */
.section__header {
	text-align: left;
	max-width: var(--max-w);
	margin: 0 auto 4rem;
	padding: 0 1.5rem;
}
.section__label {
	display: block;
	color: var(--bronze);             /* bronze caption — premium touch */
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	font-weight: 500;
	text-transform: uppercase;
	margin-bottom: 1.5rem;
}
.section__label::before {
	content: '';
	display: inline-block;
	width: 32px;
	height: 1px;
	background: var(--bronze);
	vertical-align: middle;
	margin-right: 0.9rem;
}
.section__title {
	font-family: 'Newsreader', Georgia, serif;
	font-weight: 400;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--ink);
	margin-bottom: 1.25rem;
	max-width: 100%;
}
.section--dark .section__title { color: var(--paper); }
.section__desc {
	color: var(--graphite);
	font-size: 1.05rem;
	line-height: 1.65;
	max-width: 52ch;
}
.section--dark .section__desc { color: var(--mute); }

/* Optional centered header variant (keep for pages that want it) */
.section__header--center { text-align: center; }
.section__header--center .section__title,
.section__header--center .section__desc { margin-left: auto; margin-right: auto; }
.section__header--center .section__label::before { display: none; }

/* ── Integrations grid — full-width 6-up row, warm paper cards ── */
.integrations-grid {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1rem;
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 1.5rem;
}
@media (max-width: 960px) {
	.integrations-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.integrations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.integration-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	padding: 1.75rem 1rem;
	background: var(--paper);
	border: 1px solid var(--sand);
	border-radius: 4px;
	box-shadow: var(--shadow-paper);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	text-align: center;
}
.integration-item:hover {
	transform: translateY(-3px);
	border-color: var(--hush);
	box-shadow: var(--shadow-card);
}
.integration-item__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
}
.integration-item__icon svg {
	width: 28px;
	height: 28px;
}
.integration-item__name {
	font-family: 'Inter', sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--graphite);
	line-height: 1.35;
}

/* ── Module cards → editorial list pattern ───────────────── */
/* IMPORTANT: style.css declares .module-cards as `display: grid`
   with `repeat(4, minmax(0, 1fr))`. We're flipping the whole pattern
   to a vertical list, so an explicit `display: block` is required to
   defeat the grid — otherwise each row collapses into a ~270px column
   and the inner 4-col grid words-wrap one letter per line. */
.module-cards {
	display: flex !important;
	flex-direction: column;
	gap: 1rem;
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 1.5rem;
}
@media (max-width: 1024px) {
	.module-cards { grid-template-columns: none; }
}

/* Older markup variant on /modules/ included a separate ATLAS-XX code
   chip (.module-card__code). It's redundant with our data-num eyebrow,
   so hide it to keep the row layout clean. */
.module-card__code { display: none !important; }
/* Premium card treatment: paper sitting on paper, with a soft warm
   shadow and a tan hairline. On hover the card lifts gently and a
   bronze gradient line traces the left edge. Reads as a piece of
   premium stationery, not a SaaS list-row. */
.module-card {
	display: grid;
	grid-template-columns: 160px minmax(0, 1.3fr) minmax(0, 1.5fr) auto;
	column-gap: 2rem;
	align-items: center;
	padding: 2rem 2.25rem;
	background: var(--paper) !important;
	border: 1px solid var(--soft) !important;
	border-radius: 0 !important;
	box-shadow: var(--shadow-paper) !important;
	color: var(--ink);
	transition:
		transform .3s cubic-bezier(.2,.7,.3,1),
		box-shadow .3s cubic-bezier(.2,.7,.3,1),
		border-color .25s ease;
	position: relative;
	overflow: hidden;
}
/* Subtle paper-on-paper texture — a faint warm wash that only shows on hover. */
.module-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent 0%, rgba(232, 221, 200, 0.35) 100%);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}
.module-card:hover {
	transform: translateY(-2px) !important;
	border-color: var(--hush) !important;
	box-shadow: var(--shadow-lift) !important;
}
.module-card:hover::after  { opacity: 1; }

/* Logo cell: flex container with explicit vertical centering, no fixed
   height. align-self: center belt-and-suspenders the grid's align-items
   so the wordmark NEVER drifts vertically even if a descendant CSS rule
   in style.css later tries to set align-self on the row. */
.module-card__logo {
	width: 140px;
	background: transparent !important;
	border: none !important;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	align-self: center;
}
.module-card__logo img {
	width: 100%;
	height: auto;
	max-height: 56px;
	object-fit: contain;
	object-position: left center;
	filter: none;
	display: block;
	margin: 0;
}

/* Defensive: explicitly center every direct child of the card grid.
   align-items: center on the grid SHOULD handle this, but style.css has
   older `.module-card > *` rules that could theoretically override. */
.module-card > * {
	align-self: center;
	margin-top: 0;
	margin-bottom: 0;
}
/* Logo carries brand identity ("ATLAS | CD" etc.); the heading carries
   the function ("Clinic Distribution"). No redundant "AtlasCD" label,
   no chapter-number eyebrow — both were extra weight beside the logo. */
.module-card__name {
	font-family: 'Newsreader', Georgia, serif;
	font-weight: 400;
	font-size: 1.55rem;
	line-height: 1.15;
	color: var(--ink);
	letter-spacing: -0.015em;
	margin: 0;
	position: relative;
	z-index: 1;
}
.module-card__desc {
	color: var(--graphite);
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0;
	max-width: 50ch;
	position: relative;
	z-index: 1;
}
.module-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--ink);
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	padding-bottom: 0.15rem;
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease, color .25s ease;
	position: relative;
	z-index: 1;
}
.module-card__cta svg { transition: transform .25s cubic-bezier(.2,.7,.3,1); }
.module-card:hover .module-card__cta {
	color: var(--accent);
	border-bottom-color: var(--gilt);
}
.module-card:hover .module-card__cta svg { transform: translateX(5px); }

/* Logo container gets a subtle warm wash on hover — adds dimension. */
.module-card__logo {
	transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.module-card:hover .module-card__logo { transform: scale(1.04); }

@media (max-width: 768px) {
	.module-card {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
		row-gap: 1rem;
		padding: 1.75rem 1.5rem;
	}
	.module-card__logo {
		width: 140px;
		height: 60px;
		grid-column: 1;
		grid-row: 1;
	}
	.module-card__name { grid-column: 1; }
	.module-card__desc { grid-column: 1; }
	.module-card__cta  { grid-column: 1; }
}

/* ── Feature cards (Features page) — premium paper blocks ── */
.feature-card {
	background: var(--paper) !important;
	border: 1px solid var(--soft) !important;
	border-radius: 0 !important;
	padding: 2.5rem 2rem;
	box-shadow: var(--shadow-paper) !important;
	transition:
		background .25s ease,
		transform .3s cubic-bezier(.2,.7,.3,1),
		box-shadow .3s ease,
		border-color .2s ease;
	position: relative;
	overflow: hidden;
}
.feature-card::before {
	background: linear-gradient(90deg, var(--gilt) 0%, var(--accent) 100%) !important;
	height: 2px;
}
.feature-card:hover {
	background: var(--paper) !important;
	border-color: var(--hush) !important;
	transform: translateY(-2px) !important;
	box-shadow: var(--shadow-lift) !important;
}
/* Icon — a quiet bronze-tinted well, not the harsh ink underline. */
.feature-card__icon {
	background: var(--accent-soft) !important;
	color: var(--bronze) !important;
	width: 44px !important;
	height: 44px !important;
	border-bottom: none;
	border: 1px solid var(--soft);
	border-radius: 0;
	padding: 0;
	margin-bottom: 1.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.feature-card__title {
	font-family: 'Newsreader', Georgia, serif;
	font-weight: 400;
	font-size: 1.35rem;
	letter-spacing: -0.012em;
	color: var(--ink);
}
.feature-card__desc { color: var(--graphite); font-size: 0.92rem; line-height: 1.6; }

/* ── "Better Together" cards → premium paper blocks ──────── */
.together-grid {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 1.5rem;
}
.together-card {
	background: var(--paper) !important;
	border: 1px solid var(--soft) !important;
	border-radius: 0 !important;
	padding: 2.5rem 2rem !important;
	box-shadow: var(--shadow-paper) !important;
	transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .25s ease;
	position: relative;
	overflow: hidden;
}
.together-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lift) !important;
	border-color: var(--hush) !important;
}
/* Icon — a 44px well with a tan tint behind a bronze stroke. */
.together-card__icon {
	background: var(--accent-soft) !important;
	color: var(--bronze) !important;
	border: 1px solid var(--soft);
	width: 44px !important;
	height: 44px !important;
	padding: 0;
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.together-card__title {
	font-family: 'Newsreader', Georgia, serif;
	font-weight: 400;
	font-size: 1.4rem;
	letter-spacing: -0.012em;
	color: var(--ink) !important;
	margin-bottom: 0.6rem !important;
}
.together-card__desc { color: var(--graphite) !important; line-height: 1.6; }

/* Section variant lives in the warm-sand band so cards pop visually. */
.section--together {
	background: var(--whisper) !important;
	color: var(--ink) !important;
}
.section--together h1, .section--together h2, .section--together h3 { color: var(--ink) !important; }
.section--together p, .section--together .together-card__desc { color: var(--graphite) !important; }
.section--together .section__label { color: var(--bronze) !important; }

/* ── CTA Banner — warm obsidian band with gilt detail ─────
   The deep band is no longer pure black — it's a subtle warm
   gradient from obsidian to ink, with a faint bronze radial
   glow in the upper right. A 1px gilt line at the very top
   reads as a high-end print finish. */
.cta-banner {
	background:
		radial-gradient(50% 100% at 100% 0%, rgba(181, 142, 95, 0.14) 0%, transparent 60%),
		linear-gradient(180deg, var(--obsidian) 0%, #14100c 100%) !important;
	color: var(--paper);
	padding: 7rem 0;
	border-top: 0;
	position: relative;
	overflow: hidden;
}
/* Gilt hairline at the top edge — the "expensive detail" moment. */
.cta-banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--gilt) 30%, var(--gilt) 70%, transparent 100%);
	opacity: 0.55;
}
.cta-banner .container {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	column-gap: 4rem;
	align-items: end;
	text-align: left !important;
	max-width: var(--max-w);
	position: relative;
	z-index: 1;
}
.cta-banner__title {
	font-family: 'Newsreader', Georgia, serif;
	font-weight: 400;
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--paper);
	max-width: 18ch;
	margin: 0;
}
.cta-banner__desc {
	color: var(--mute);
	font-size: 1rem;
	max-width: 38ch;
	margin: 0 0 1.5rem;
}
.cta-banner .btn-group {
	justify-content: flex-start !important;
	gap: 0.6rem;
}
.cta-banner .btn--white {
	background: var(--paper);
	color: var(--obsidian);
	border-color: var(--paper);
}
.cta-banner .btn--white:hover {
	background: var(--btn-warm);
	color: var(--paper);
	border-color: var(--btn-warm);
}
.cta-banner .btn--outline {
	color: var(--paper);
	border-color: rgba(250,250,249,0.35);
}
.cta-banner .btn--outline:hover {
	background: var(--paper);
	color: var(--obsidian);
	border-color: var(--paper);
}
@media (max-width: 768px) {
	.cta-banner .container {
		grid-template-columns: 1fr;
		row-gap: 1.5rem;
	}
}

/* ── Hide gradient text everywhere ──────────────────────── */
.text-gradient {
	background: none !important;
	-webkit-text-fill-color: var(--ink) !important;
	color: var(--ink) !important;
}

/* ── Footer ──────────────────────────────────────────────── */
.footer {
	background: var(--paper) !important;
	color: var(--graphite);
	border-top: 1px solid var(--soft);
}
.footer h4, .footer h3 { color: var(--ink) !important; font-family: 'Newsreader', serif; }
.footer a { color: var(--graphite) !important; }
.footer a:hover { color: var(--ink) !important; }
.footer__bottom, .footer__copy {
	color: var(--mute) !important;
	border-top-color: var(--soft) !important;
}
/* Footer wordmark — the asset ships as white-on-transparent for the
   old dark-navy footer, so we flip it near-black for the new light
   paper footer. Both possible class names covered. */
.footer__brand-img,
.footer__logo-img,
.footer .navbar__logo-img {
	filter: invert(1) grayscale(1) brightness(0.1);
	max-height: 40px;
	width: auto;
}
.footer__social-link {
	color: var(--mute);
	transition: color 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.footer__social-link:hover { color: var(--ink); }

/* ── Highlight class fallbacks elsewhere ─────────────────── */
.highlight {
	background: none !important;
	-webkit-text-fill-color: inherit !important;
	color: var(--ink);
}

/* Map any leftover "section colored title" patterns to the accent */
.problem-solution__block--solution {
	background: var(--accent-soft) !important;
	border: 1px solid var(--soft) !important;
}
.problem-solution__block--problem {
	background: var(--whisper) !important;
	border: 1px solid var(--soft) !important;
}

/* ── Module-detail hero (subpages) ───────────────────────── */
.module-detail-hero__logo {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}
/* Force the module wordmark to render pure black on the cream hero.
   `brightness(0)` flattens any non-transparent pixel to #000 — bulletproof
   regardless of whether the source WebP is shipped as black-on-transparent
   or white-on-transparent. Trumps the style.css `invert + hue-rotate`
   filter that was meant for the old dark navy hero. */
.module-detail-hero__logo img,
.module-detail-hero img {
	filter: brightness(0) !important;
}
.module-detail-hero__accent { display: none !important; }
.module-detail-badge {
	background: transparent !important;
	color: var(--mute) !important;
	border: 0 !important;
	padding: 0 !important;
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 0.7rem !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	font-weight: 400 !important;
	margin-bottom: 1.25rem !important;
}
.module-detail-badge::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 1px;
	background: currentColor;
	margin-right: 0.65rem;
	vertical-align: middle;
}

/* ── Subtle scroll reveal — refine the existing .fade-up ─── */
.fade-up {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.fade-up.is-visible { opacity: 1; transform: none; }

/* Reduced motion — turn off the underline animation + reveals */
@media (prefers-reduced-motion: reduce) {
	.hero__title .highlight {
		animation: none;
		text-decoration-color: var(--accent);
	}
	.fade-up { transition: none; opacity: 1; transform: none; }
}

/* ── Mobile hero padding ─────────────────────────────────── */
@media (max-width: 640px) {
	.hero,
	.hero--xl { padding: 8rem 0 4rem; }
	.hero--inner { padding: 7rem 0 3rem; }
	.hero__platform-pills {
		grid-template-columns: 1fr;
		row-gap: 1rem;
	}
}

/* ════════════════════════════════════════════════════════════
   Contact page — match the homepage module-card system
   ────────────────────────────────────────────────────────────
   The original /contact/ markup used rounded-12px cards, pure
   white surfaces, terracotta hover borders, and a blue focus ring
   on form fields — all leftover from the pre-refresh SaaS look.
   This block rewrites every visible surface to the new warm paper
   + bronze accent system. No HTML changes needed.
   ════════════════════════════════════════════════════════════ */

.section--contact {
	background: var(--whisper);  /* sand band so the cards pop */
	padding: 5rem 0 7rem;
}

/* Wider container — narrow (720px) was cramping the cards */
.section--contact .container--narrow {
	max-width: 920px;
	padding: 0 1.5rem;
}

/* ── Quick channels: 3 paper cards matching module-card pattern ── */
.contact-channels {
	gap: 1rem;
	margin-block-end: 2.5rem;
}
.contact-channel {
	background: var(--paper);
	border: 1px solid var(--soft);
	border-radius: 0;
	padding: 1.5rem 1.5rem 1.4rem;
	box-shadow: var(--shadow-paper);
	transition:
		transform .3s cubic-bezier(.2,.7,.3,1),
		box-shadow .3s ease,
		border-color .25s ease;
	position: relative;
	overflow: hidden;
	gap: 0;
}
.contact-channel::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: linear-gradient(180deg, var(--gilt) 0%, var(--accent) 100%);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.contact-channel:hover {
	transform: translateY(-2px);
	border-color: var(--hush);
	box-shadow: var(--shadow-lift);
}
.contact-channel:hover::before { transform: scaleY(1); }

/* Icon well — bronze stroke on accent-soft background */
.contact-channel__icon {
	width: 40px;
	height: 40px;
	border-radius: 0;
	background: var(--accent-soft);
	color: var(--bronze);
	border: 1px solid var(--soft);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-block-end: 1rem;
	transition: background .25s ease, color .25s ease;
}
.contact-channel:hover .contact-channel__icon {
	background: var(--paper);
	color: var(--accent);
}

/* Label — bronze mono caps, matching section eyebrows */
.contact-channel__label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	color: var(--bronze);
	text-transform: uppercase;
	margin-block-end: 0.4rem;
}
.contact-channel__value {
	font-family: 'Newsreader', Georgia, serif;
	font-size: 1.15rem;
	font-weight: 400;
	color: var(--ink);
	letter-spacing: -0.012em;
	line-height: 1.3;
}

/* ── Form card: same paper-on-paper treatment ─────────────── */
.contact-form-wrap {
	background: var(--paper);
	border: 1px solid var(--soft);
	border-radius: 0;
	padding: 2.75rem 2.5rem;
	box-shadow: var(--shadow-card);
	position: relative;
}
/* Gilt top edge — premium letterpress detail */
.contact-form-wrap::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--gilt) 0%, var(--accent) 100%);
}
@media (max-width: 480px) {
	.contact-form-wrap { padding: 1.75rem 1.5rem; }
}

.contact-form-wrap__header {
	margin-block-end: 2rem;
	padding-block-end: 1.5rem;
	border-bottom: 1px solid var(--soft);
}
.contact-form-wrap__title {
	font-family: 'Newsreader', Georgia, serif;
	font-weight: 400;
	font-size: 1.65rem;
	letter-spacing: -0.018em;
	color: var(--ink);
	margin: 0 0 0.45rem;
}
.contact-form-wrap__desc {
	font-size: 0.9rem;
	color: var(--graphite);
	margin: 0;
}

/* ── Form fields — warm tan borders, bronze focus ────────── */
.contact-form .form-group { margin-block-end: 1.25rem; }
.contact-form .form-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--graphite);
	margin-block-end: 0.55rem;
}
.contact-form .form-label__req {
	color: var(--accent);
	font-weight: 500;
	margin-inline-start: 0.15rem;
}
.contact-form .form-label__opt {
	color: var(--mute);
	font-size: 0.65rem;
}

.contact-form .form-input,
.contact-form .form-select,
.contact-form .form-textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--soft);
	border-radius: 0;
	background: var(--paper);
	font-family: 'Inter', sans-serif;
	font-size: 0.95rem;
	color: var(--ink);
	transition: border-color .2s ease, background-color .2s ease, box-shadow .25s ease;
	box-shadow: var(--shadow-paper);
}
.contact-form .form-input:hover,
.contact-form .form-select:hover,
.contact-form .form-textarea:hover {
	border-color: var(--hush);
}
.contact-form .form-input:focus,
.contact-form .form-select:focus,
.contact-form .form-textarea:focus {
	outline: none;
	border-color: var(--accent);
	background: var(--paper);
	box-shadow: var(--ring-bronze);
}
.contact-form .form-input::placeholder,
.contact-form .form-textarea::placeholder {
	color: var(--mute);
}
.contact-form .form-textarea {
	min-height: 140px;
	resize: vertical;
	line-height: 1.55;
}

/* Custom dropdown chevron in bronze for the inquiry-type <select> */
.contact-form .form-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a6f4d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px;
	padding-right: 2.5rem;
}

/* Submit button — full width, sits beneath the field grid with a
   little extra breathing room. Uses the existing btn--primary shadow. */
.btn--full {
	width: 100%;
	justify-content: center;
	padding: 1rem 1.5rem;
	font-size: 0.92rem;
	margin-top: 0.5rem;
}

.contact-form__legal {
	font-family: 'Inter', sans-serif;
	font-size: 0.78rem;
	color: var(--mute);
	text-align: center;
	margin-block: 1.25rem 0;
}
.contact-form__legal a {
	color: var(--graphite);
	text-decoration: underline;
	text-decoration-color: var(--soft);
	text-underline-offset: 3px;
	transition: color .15s ease, text-decoration-color .15s ease;
}
.contact-form__legal a:hover {
	color: var(--accent);
	text-decoration-color: var(--gilt);
}

/* Mobile: stack the 3 channels, slight padding reduction */
@media (max-width: 720px) {
	.section--contact { padding: 4rem 0 5rem; }
	.contact-channels { grid-template-columns: 1fr; }
}