/* =========================================================================
   MLE static demo  -  landing.css
   The one hand-authored page's stylesheet. Self-contained: no external
   requests, no framework, no webfont file (system sans stack only).

   BRAND SOURCE: this page matches nablist.org/healthcare's marketing
   design language, NOT the MLE product's own violet/navy skin.

   DESIGN-ALIGNMENT PASS 2026-08-10 (this pass): read the real site's own
   source directly - STYLE_GUIDE.md, tailwind.config.ts, button.tsx, and
   app/healthcare/page.tsx - instead of re-deriving intent from the
   compiled page alone. That source confirms the real semantics:

     - brand (teal) scale: 50 #ECFEFF / 100 #CFFAFE / 400 #22D3EE /
       500 #0891B2 (PRIMARY) / 600 #0E7490 / 700 #155E75 / 800 #164E63
     - accent (orange) scale: 400 #FB923C / 500 #F97316 (PRIMARY) /
       600 #EA580C / 700 #C2410C / 800 #9A3412 / 900 #7C2D12
     - Real Button component (components/ui/button.tsx) variants:
         default : bg-brand-500  text-white hover:bg-brand-600  active:bg-brand-700
         accent  : bg-accent-500 text-white hover:bg-accent-600 active:bg-accent-700
       both rounded-lg (8px), text-sm/base font-semibold (600), shadow-sm
       hover:shadow-md - no per-variant weight difference in the component.
     - On the healthcare page itself, teal is TEXT-forward (text-brand-600
       on eyebrows/links/card-cta, bg-brand-50/text-brand-600 icon chips)
       while orange is the sparingly-used FBA conversion CTA
       (Button variant="accent"). Teal is IDENTITY/trust, orange is ACTION.
     - The closest structural twin of this page's .hub-grid is their
       "Why Practices Trust Us" 4-up grid: bg-cream-50 section, white
       bg-white/border-slate-200 cards, bg-brand-50/text-brand-600 icon
       chips. That - not a slate/muted band - is what .hub now mirrors.
     - Dark-footer text (Footer.tsx) steps its colored labels UP to the
       *-400 shade (text-brand-400, text-accent-400) rather than 500/600,
       since those are the shades that hold contrast against slate-900.

   OWNER DIRECTION FOR THIS PASS (supersedes the previous pass's orange-
   forward primary CTA): "MLE in 5 Minutes" becomes the site's TEAL
   default/primary button; "Get your free book analysis" (floating pill +
   footer FBA link) stays the ORANGE accent variant - matching the real
   button.tsx variant split, not a page-specific reversal.

   WCAG AA - mirrored fills vs. the real component's white button text
   (verified against 4.5:1, the body-text minimum; none of this page's
   button text reaches the "large text" bold-18.66px exemption):
     - default fill bg-brand-500 + white  = 3.68:1  FAILS
     - default fill bg-brand-600 + white  = 5.35:1  PASSES <- used here
     - accent fill  bg-accent-500 + white = 2.80:1  FAILS
     - accent fill  bg-accent-600 + white = 3.56:1  FAILS (still short)
     - accent fill  bg-accent-700 + white = 5.18:1  PASSES <- used here
   Per pass instructions: nearest darker step of the SAME hue, white text
   kept (matching the real component instead of swapping to dark ink
   text as the previous pass did). Orange needed two steps, not one -
   noted here so it isn't mistaken for an off-by-one. Hover/active carry
   the same step count forward: default 600/700/800, accent 700/800/900.
   Full contrast table for every shipped text-on-color pair lives in the
   PR/task report, not restated line-by-line in this comment.

   The MLE product shell (src/app/*, tour engine, tour JSON) is deliberately
   left on its existing violet (#7c3aed) / navy identity - that is the
   PRODUCT's brand, this file only reskins the MARKETING landing page to
   match the company site it's linked from. The two are meant to look like
   different systems; this is not a bug or an inconsistency to "fix" later.
   ========================================================================= */

:root {
  /* teal (brand) - text/icon/link accent AND button fill share brand-600,
     since brand-500 fails AA as a white-text fill (see header note) */
  --blue: #0e7490;          /* nablist brand-600 - eyebrow/link/icon color + btn-primary fill */
  --blue-dark: #155e75;     /* nablist brand-700 - btn-primary hover */
  --blue-darker: #164e63;   /* nablist brand-800 - btn-primary active */
  --blue-tint: #ecfeff;         /* nablist brand-50, solid - card icon-chip bg */
  --blue-tint-strong: #22d3ee;  /* nablist brand-400, solid - card hover border / tick-resume border */
  /* orange (accent) - button fill steps two shades darker than the site's
     accent-500 to hold white-text AA (see header note); accent-400 is kept
     separate for text-on-dark-footer use, matching the real Footer.tsx
     text-accent-400 convention */
  --orange: #c2410c;        /* nablist accent-700 - btn-accent / pill-cta fill */
  --orange-dark: #9a3412;   /* nablist accent-800 - btn-accent / pill-cta hover */
  --orange-darker: #7c2d12; /* nablist accent-900 - btn-accent / pill-cta active */
  --orange-text: #fb923c;   /* nablist accent-400 - footer FBA link (text-on-dark, not a fill) */
  --ink: #0f172a;           /* nablist secondary-foreground / slate-900, extracted */
  --body: #475569;          /* slate-600, nablist paragraph copy */
  --muted: #64748b;         /* nablist muted-foreground, extracted exactly */
  --surface: #ffffff;       /* nablist --background, extracted exactly */
  --surface-hover: #f8fafc; /* nablist outline-button hover bg (slate-50) */
  --cream: #fffdf7;         /* nablist bg-cream-50, extracted exactly */
  --cream-2: #fff9ed;       /* nablist hero gradient midpoint, extracted */
  --cream-3: #fff7ed;       /* nablist hero gradient end, extracted */
  --border: #e2e8f0;        /* nablist --border, extracted exactly */
  --border-strong: #cbd5e1; /* nablist outline-button border (slate-300) */
  --footer-bg: #0f172a;     /* nablist bg-slate-900, extracted exactly */
  --footer-text: #cbd5e1;   /* nablist text-slate-300, extracted exactly */
  --footer-text-dim: #94a3b8;  /* nablist slate-400 - Footer.tsx's de-emphasized copy
                                   (tagline's 2nd line, each pricing item's description
                                   line); also the exact 94a3b8 the real footer's own
                                   cdn.simpleicons.org icon requests specify, so the
                                   self-hosted Facebook/Instagram/Reddit glyphs below
                                   match this token by construction, not coincidence. */
  --footer-border: #1e293b; /* nablist slate-800 - Footer.tsx's legal-bar top border */
  --footer-icon: #0891b2;   /* nablist brand-500 - exact Lucide Phone/Mail/MapPin icon
                                color (text-brand-500) in the real Footer.tsx. Left at
                                500 rather than stepped to 400 like the *-text tokens
                                below: these are small 16px GRAPHICS, not text, so the
                                relevant WCAG floor is the 3:1 non-text minimum (SC
                                1.4.11), not the 4.5:1 body-text minimum that pushed
                                the other dark-footer accents up a step. */
  --blue-text: #22d3ee;     /* nablist brand-400 - footer "Autopilot:" pricing label
                                (text-brand-400), the teal twin of --orange-text below;
                                same hex as --blue-tint-strong, named separately because
                                that token is a tint/border, this one is dark-footer text. */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);                         /* nablist shadow-sm, extracted */
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); /* nablist shadow-md, extracted */
  --radius-btn: 8px;        /* nablist --radius (.5rem), extracted exactly */
  --radius-card: 16px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Poppins approximation - see header note */
  --ease: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.01em; }
p { margin: 0; }
svg { display: block; width: 100%; height: 100%; }

/* ---------------------------------------------------------- mobile notice */
.mobile-notice {
  display: none;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--body);
  background: var(--cream-2);
  border-bottom: 1px solid var(--border);
  padding: 9px 16px;
  text-align: center;
}
.mobile-notice strong { color: var(--blue); }
@media (max-width: 767px) {
  .mobile-notice { display: block; }
}

/* -------------------------------------------------------------------- hero
   No canvas motif - the constellation background the MLE product uses on
   its own dark login screen has been removed here entirely (not gated,
   not hidden); see landing.js for the corresponding code removal. The
   background below is nablist.org's OWN hero gradient, copied verbatim
   (see header note) rather than an invented blue wash. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cream) 0%, var(--cream-2) 50%, var(--cream-3) 100%);
}
.hero-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 112px 24px 88px;
  text-align: center;
}
.hero-title {
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.08;
  color: var(--ink);
}
.hero-em { color: var(--blue); }
.hero-sub {
  margin: 22px auto 0;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
}
.hero-actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-radius: var(--radius-btn);
  padding: 14px 26px;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
  border: 1px solid transparent;
}
.btn:active { transform: scale(.98); }
/* "MLE in 5 Minutes" - real Button default/primary variant (teal), mirrored
   from button.tsx: bg-brand-500 text-white hover:bg-brand-600 active:bg-brand-700,
   stepped one shade darker throughout to hold AA with white text (header note). */
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--blue-dark); box-shadow: var(--shadow-md); }
.btn-primary:active { background: var(--blue-darker); }
.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-hover); border-color: #94a3b8; }

/* --------------------------------------------------------------------- hub
   Cream band (bg-cream-50), matching the real page's own section rhythm
   (hero gradient -> flat cream-50) rather than an invented slate band.
   This is also the exact section treatment of the healthcare page's own
   closest structural twin to this 4-up icon-card grid ("Why Practices
   Trust Us": bg-cream-50 section, white/slate-200-border cards, brand-50/
   brand-600 icon chips) - white cards still read clearly against cream.
   .hub IS the <section>, so the band color lives right on it; .hub-head
   and .hub-grid each self-center (no extra wrapper div needed). */
.hub {
  background: var(--cream);
  border-top: 1px solid var(--border);
  padding: 72px 24px 64px;
}
.hub-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.eyebrow {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.hub-head h2 { font-size: clamp(24px, 3vw, 32px); color: var(--ink); font-weight: 700; }
.hub-sub { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: var(--body); }

.hub-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1023px) {
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .hub-grid { grid-template-columns: 1fr; }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 22px 20px 20px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--blue-tint-strong);
}
/* Icon chip: bg-brand-50 (#ECFEFF) + text-brand-600 (#0E7490) stroke,
   matching the healthcare page's own icon-chip treatment exactly. */
.card-icon {
  width: 38px; height: 38px;
  color: var(--blue);
  background: var(--blue-tint);
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 16px;
}
.card-time {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 6px;
}
.card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.card-hook { font-size: 13.5px; line-height: 1.55; color: var(--body); flex: 1; }
.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue);
}
.card-tick {
  position: absolute;
  top: 18px; right: 18px;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 3px 8px;
  border-radius: 999px;
  display: none;
}
.card.card-done .card-tick,
.card.card-resume .card-tick { display: inline-block; }
/* Same blue for both states; weight/fill carries the distinction
   (solid = done, outline = in progress) instead of a second hue. */
.card.card-done .card-tick {
  color: #fff;
  background: var(--blue);
}
.card.card-resume .card-tick {
  color: var(--blue);
  background: var(--surface);
  border: 1px solid var(--blue-tint-strong);
}

/* Bonus tile (the Ledger tour). It is deliberately NOT one of the eight day-arc
   moments, and a ninth 1/4-width card would sit alone on a third row and read as a
   layout bug at every breakpoint above 560px. So it spans the whole row and turns
   horizontal: icon, then text, then the CTA on the right. Nothing about the eight-card
   grid above it changes, and below 720px it falls back to the same vertical stack
   every other card uses. */
.card--bonus {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: linear-gradient(90deg, var(--blue-tint) 0%, var(--surface) 42%);
}
.card--bonus .card-icon { margin-bottom: 0; flex: none; }
.card--bonus .card-bonus-text { flex: 1; min-width: 0; }
.card--bonus .card-time { margin-bottom: 4px; }
.card--bonus h3 { margin-bottom: 4px; }
.card--bonus .card-hook { flex: none; }
.card--bonus .card-cta { margin-top: 0; flex: none; white-space: nowrap; }
@media (max-width: 720px) {
  .card--bonus { flex-direction: column; align-items: flex-start; gap: 0; padding: 22px 20px 20px; }
  .card--bonus .card-icon { margin-bottom: 16px; }
  .card--bonus .card-cta { margin-top: 16px; }
}

/* --------------------------------------------------------- persistent CTA
   Real Button accent variant (orange), mirrored from button.tsx:
   bg-accent-500 text-white hover:bg-accent-600 active:bg-accent-700,
   stepped two shades darker throughout to hold AA with white text
   (header note - accent-500 and -600 both fail 4.5:1 with white text). */
/* Ported VERBATIM from components/layout/StickyFBA.tsx (nablist-website repo),
   2026-08-11, owner-directed: the demo uses the SAME floating FBA button the
   real site uses. fixed bottom-6 right-6 z-50; rounded-full accent-500 pill,
   white semibold text + ArrowRight icon; shadow-lg with an accent-500/30
   glow, hover accent-600 + shadow-xl/40; hidden until window.scrollY > 300,
   then 300ms translate/opacity reveal (landing.js toggles .is-visible).
   accent-500 + white is the site's own shipped contrast choice - mirrored
   verbatim here per the owner, superseding the darker accent-700 variant
   this file used before. */
.pill-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  background: #f97316;               /* accent-500 */
  border-radius: 999px;
  padding: 12px 24px;
  box-shadow: 0 10px 15px -3px rgba(249, 115, 22, .3), 0 4px 6px -4px rgba(249, 115, 22, .3);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: all .3s var(--ease);
}
.pill-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pill-cta:hover {
  background: #ea580c;               /* accent-600 */
  box-shadow: 0 20px 25px -5px rgba(249, 115, 22, .4), 0 8px 10px -6px rgba(249, 115, 22, .4);
}
.pill-cta-arrow { width: 16px; height: 16px; flex: none; }
@media (max-width: 560px) {
  .pill-cta { right: 16px; bottom: 14px; font-size: 14px; padding: 12px 20px; }
}

/* -------------------------------------------------------------------- footer
   PORTED VERBATIM FROM components/layout/Footer.tsx (nablist-website repo),
   2026-08-11, for brand consistency between the marketing landing page and
   the real company site it links out to. Structure, copy, columns and
   styling below are a direct read of that file, not a re-derivation - see
   the task's adaptations list for what necessarily changed for a static,
   offline, single-page demo:
     1. every /healthcare/... relative href became an absolute
        https://nablist.org/... URL with target="_blank" rel="noopener" -
        this is a showcase tab, not the real site, so an outbound click
        must not navigate the demo itself away.
     2. the four self-hosted icons (logo, LinkedIn, and the three
        cdn.simpleicons.org brand marks) are copied into
        assets/vendor/<sha1>.<ext> - this page ships zero third-party
        network requests, by the same rule every other asset here follows.
     3. Lucide's Phone/Mail/MapPin are inlined as small stroke SVGs -
        lucide-react is a component import in the source, not a file this
        static page can vendor.
   Dark navy band, matching nablist's real bg-slate-900/text-slate-300
   footer treatment exactly (see file header note) - the deepest band on
   the page, mirroring their own layout order (cream/white bands, then a
   bold color band, then a dark footer). --footer-bg happens to equal
   --ink's hex; kept as a separate token since the two are conceptually
   different things (a background vs. a text color) even though they
   share a value here. */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 48px 24px;
  font-family: var(--font);
}

/* ---- xl:grid-cols-3 (brand : links, ~1/3 : 2/3) --------------------- */
.footer-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 48px;
}
@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
}

.footer-brand-col { display: flex; flex-direction: column; gap: 24px; }
.footer-logo { display: inline-block; align-self: flex-start; }
.footer-logo img { display: block; height: 40px; width: auto; }
.footer-tagline { margin: 0; max-width: 320px; font-size: 14px; line-height: 1.6; }
.footer-tagline-dim { color: var(--footer-text-dim); }

.footer-contact { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.footer-contact a, .footer-address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  transition: color .15s var(--ease);
}
.footer-contact a:hover { color: #fff; }
.footer-contact-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--footer-icon);
}

.footer-socials { display: flex; align-items: center; gap: 16px; }
.footer-socials a { display: block; line-height: 0; opacity: .6; transition: opacity .15s var(--ease); }
.footer-socials a:hover { opacity: 1; }
.footer-socials img { display: block; width: 20px; height: 20px; }

/* ---- link columns: "xl:col-span-2 xl:grid-cols-2" of nested "md:grid-cols-2" pairs */
.footer-links-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 560px) {
  .footer-links-wrap { grid-template-columns: 1fr; }
}
.footer-links-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 767px) {
  .footer-links-pair { grid-template-columns: 1fr; }
}
.footer-links-group h3 {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.footer-links-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-links-group a {
  font-size: 14px;
  color: var(--footer-text);
  text-decoration: none;
  transition: color .15s var(--ease);
}
.footer-links-group a:hover { color: #fff; }

.footer-pricing-item { font-size: 14px; }
.footer-pricing-label { font-weight: 500; }
/* Colored dark-footer labels use the *-400 step (not 500/600), which is
   what holds AA against slate-900 as TEXT rather than as a button fill -
   same reasoning as the pill CTA's orange, mirrored here for teal. */
.footer-pricing-brand { color: var(--blue-text); }
.footer-pricing-accent { color: var(--orange-text); }
.footer-pricing-desc { display: block; margin-top: 2px; color: var(--footer-text-dim); }

/* ---- legal bar: "mt-12 border-t border-slate-800 pt-8" --------------- */
.footer-legal {
  max-width: 1180px;
  margin: 48px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--footer-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-legal-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
@media (max-width: 560px) {
  .footer-legal-left { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.footer-copyright { margin: 0; font-size: 12px; color: var(--muted); }
.footer-legal-links { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.footer-legal-links a { color: var(--muted); text-decoration: none; transition: color .15s var(--ease); }
.footer-legal-links a:hover { color: #fff; }
.footer-legal-sep { color: #334155; }   /* nablist slate-700, the legal bar's own "|" divider */
.footer-compliance { margin: 0; max-width: 32em; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .btn, .pill-cta { transition: none; }
}