/* Alex suite home.
   ---------------------------------------------------------------------------
   Ported from the approved reference implementation (Next.js + Tailwind) into
   this app's actual stack, which is static HTML/CSS on Vercel. The reference
   is the visual and content target, not permission to swap the dependency
   stack of a live deployment.

   Two deliberate departures from the reference:

   1. Montserrat and Lora, not DM Sans. The brand fonts are canon; the
      reference's DM Sans is a reference artifact, not an approved change.
   2. Colours come from /styles/tokens.css, which already carries the exact
      IHC palette the reference specifies (#413494, #5EAEE0, #F9C20A, #CE509D)
      and keeps the HCT palette isolated under html[data-brand="hct"]. Local
      values are declared here only for tones tokens.css does not define.
   --------------------------------------------------------------------------- */

:root {
  --sh-ink: #17182b;
  --sh-purple-deep: #2b235e;
  --sh-civic: #2e6f86;
  --sh-paper: #f7f6fb;
  --sh-muted: #666478;
  --sh-line: #dedbea;
  --sh-radius: 18px;
}

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

body {
  margin: 0;
  background: var(--color-surface, #fff);
  color: var(--sh-ink);
  font-family: 'Lora', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .sh-wordmark, .sh-eyebrow, .sh-kicker, .sh-card__label,
.sh-btn, .sh-nav a, .sh-account, .sh-trust dt, .sh-proof dt {
  font-family: 'Montserrat', system-ui, sans-serif;
}

h1, h2, h3 { margin: 0; letter-spacing: -.03em; }

a { color: inherit; }

/* Visible focus everywhere, on the token purple so it reads as brand rather
   than as a browser default. WCAG 2.2 AA, and 2.4.11 wants it unobscured. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--color-purple, #413494);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-purple, #413494); color: #fff;
  /* min-height rather than padding alone: padding put it at 43.5px, half a
     pixel under the 2.5.8 floor, which is the kind of miss that only shows up
     when something measures it. */
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 10px 18px; border-radius: 0 0 10px 0; font-family: 'Montserrat', sans-serif;
}
.skip-link:focus { left: 0; }

/* ---------- header ---------- */
.sh-header {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center;
  gap: 20px; padding: 14px clamp(20px, 5vw, 72px);
  border-bottom: 1px solid var(--sh-line); background: #fff;
}
.sh-lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sh-mark img { display: block; width: 52px; height: 52px; }
.sh-wordmark { font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin-left: -2px; }
/* The divider and the scaled IHC lockup are what balance the pair optically.
   The V6 brand contract wants the endorsement legible beside the mark, not the
   mark enlarged to compete with it. */
.sh-divider { width: 1px; height: 32px; background: var(--sh-line); margin: 0 4px; }
.sh-ihc { display: block; width: 104px; height: auto; }

.sh-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-self: center; }
.sh-nav a, .sh-account {
  font-size: 14px; font-weight: 600; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 2px;
}
.sh-account {
  border: 1px solid var(--sh-line); border-radius: 11px; padding: 0 16px; font-weight: 800;
}
.sh-menu { display: none; }
.sh-menu > summary {
  list-style: none; cursor: pointer; min-height: 44px; display: inline-flex;
  align-items: center; padding: 0 14px; border: 1px solid var(--sh-line);
  border-radius: 11px; font-family: 'Montserrat', sans-serif; font-weight: 700;
}
.sh-menu > summary::-webkit-details-marker { display: none; }
.sh-menu__panel {
  position: absolute; right: clamp(20px, 5vw, 72px); left: clamp(20px, 5vw, 72px);
  margin-top: 10px; padding: 8px; background: #fff; border: 1px solid var(--sh-line);
  border-radius: 14px; display: grid; z-index: 20;
  box-shadow: 0 18px 40px rgba(23, 24, 43, .12);
}
.sh-menu__panel a {
  min-height: 44px; display: flex; align-items: center; padding: 0 12px;
  text-decoration: none; font-family: 'Montserrat', sans-serif; font-weight: 600;
}

/* ---------- hero ---------- */
.sh-hero {
  display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr);
  align-items: center; gap: clamp(24px, 3vw, 52px);
  padding: clamp(56px, 7vw, 104px) clamp(20px, 5vw, 72px) 72px;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 20%, rgba(94, 174, 224, .18), transparent 32%),
    radial-gradient(circle at 26% 75%, rgba(65, 52, 148, .09), transparent 34%),
    var(--sh-paper);
}
.sh-hero__copy { max-width: 640px; position: relative; z-index: 2; }
.sh-eyebrow {
  display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--color-purple, #413494); margin: 0 0 22px;
}
.sh-eyebrow span { width: 26px; height: 4px; background: var(--color-blue, #5eaee0); border-radius: 999px; }
h1 { font-size: clamp(44px, 6vw, 88px); line-height: .96; max-width: 760px; }
h1 em { color: var(--color-purple, #413494); font-style: normal; }
.sh-lede { max-width: 620px; margin: 26px 0 0; font-size: clamp(18px, 1.9vw, 24px); line-height: 1.55; color: #444359; }
.sh-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.sh-btn {
  min-height: 52px; display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px; border-radius: 13px; border: 1px solid var(--sh-line);
  font-weight: 800; text-decoration: none;
}
.sh-btn--primary {
  color: #fff; background: var(--color-purple, #413494);
  border-color: var(--color-purple, #413494);
  box-shadow: 0 14px 36px rgba(65, 52, 148, .22);
}
.sh-btn--primary:hover { background: var(--sh-purple-deep); }
.sh-btn--ghost { background: rgba(255, 255, 255, .72); }

.sh-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 36px 0 0; padding-top: 24px; border-top: 1px solid var(--sh-line); }
.sh-trust div { min-width: 0; }
.sh-trust dt { font-size: 13px; font-weight: 800; }
.sh-trust dd { margin: 5px 0 0; font-size: 13px; line-height: 1.35; color: var(--sh-muted); }

/* The illustration reserves an empty left third for headline space, so the
   frame pulls that dead margin off rather than cropping the subject: all five
   audience moments stay visible at desktop. Explicit width and height on the
   img keep the aspect box reserved, so nothing shifts as it loads. */
.sh-hero__visual { margin: 0; position: relative; min-width: 0; overflow: hidden; }
.sh-hero__visual img {
  width: 138%; max-width: none; height: auto; transform: translateX(-27.5%);
  filter: drop-shadow(0 26px 42px rgba(43, 35, 94, .08));
}
.sh-hero__visual figcaption { text-align: right; font-size: 11px; color: var(--sh-muted); padding-right: 1%; }

/* ---------- shared section furniture ---------- */
.sh-heading { max-width: 760px; }
.sh-kicker { color: var(--color-purple, #413494); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 14px; }
.sh-heading h2 { font-size: clamp(32px, 4.2vw, 58px); line-height: 1.04; }
.sh-heading > p:last-child { font-size: 18px; line-height: 1.55; color: var(--sh-muted); margin: 20px 0 0; }

.sh-audience, .sh-how, .sh-evidence, .sh-closing { padding: clamp(64px, 8vw, 96px) clamp(20px, 5vw, 72px); }
.sh-audience { background: #fff; }

.sh-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 44px; }
.sh-card {
  grid-column: span 2; min-height: 300px; display: flex; flex-direction: column;
  padding: 26px; border: 1px solid var(--sh-line); border-top: 5px solid var(--sh-accent);
  border-radius: var(--sh-radius); background: #fff; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sh-card:nth-child(4) { grid-column: 2 / span 2; }
.sh-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(23, 24, 43, .09); }
.sh-card--blue   { --sh-accent: var(--color-blue, #5eaee0); }
.sh-card--purple { --sh-accent: var(--color-purple, #413494); }
.sh-card--gold   { --sh-accent: var(--color-gold, #f9c20a); }
.sh-card--pink   { --sh-accent: var(--color-pink, #ce509d); }
.sh-card--civic  { --sh-accent: var(--sh-civic); }
.sh-card__label { color: var(--sh-accent); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin: 0; }
/* The gold accent fails contrast as text on white, so the label that carries
   it gets an ink tone instead of the accent. The rule above is overridden
   rather than the token changed: the accent is correct as a 5px border. */
.sh-card--gold .sh-card__label { color: #8a6a02; }
.sh-card h3 { font-size: 26px; line-height: 1.06; margin-top: 20px; }
.sh-card p { color: var(--sh-muted); font-size: 16px; line-height: 1.5; margin: 14px 0 26px; }
.sh-card__go { margin-top: auto; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 800; }

/* ---------- evidence ---------- */
.sh-evidence { background: linear-gradient(135deg, #efedf8, #f8f5fd); }
.sh-proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--sh-line); border: 1px solid var(--sh-line); border-radius: var(--sh-radius); overflow: hidden; margin: 48px 0; }
.sh-proof div { min-height: 168px; padding: 26px; background: rgba(255, 255, 255, .7); }
.sh-proof dt { font-size: clamp(30px, 3.6vw, 50px); font-weight: 800; letter-spacing: -.05em; color: var(--color-purple, #413494); }
.sh-proof dd { margin: 12px 0 0; line-height: 1.45; color: var(--sh-muted); }

.sh-chain { display: grid; grid-template-columns: minmax(240px, .75fr) 2fr; gap: 26px; align-items: stretch; }
.sh-chain__signal { padding: 26px; border-radius: 16px; background: var(--color-purple, #413494); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.sh-chain__signal span, .sh-chain li span { text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 800; font-family: 'Montserrat', sans-serif; }
.sh-chain__signal strong { font-family: 'Montserrat', sans-serif; font-size: 24px; line-height: 1.1; margin-top: 14px; }
.sh-chain ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sh-chain li { min-height: 118px; padding: 18px; border-radius: 14px; background: #fff; display: flex; flex-direction: column; justify-content: space-between; border-bottom: 4px solid var(--color-blue, #5eaee0); }
.sh-chain li:nth-child(2) { border-color: var(--color-purple, #413494); }
.sh-chain li:nth-child(3) { border-color: var(--color-gold, #f9c20a); }
.sh-chain li:nth-child(4) { border-color: var(--color-pink, #ce509d); }
.sh-chain li:nth-child(5) { border-color: var(--sh-civic); }
.sh-chain li span { color: var(--sh-muted); }
.sh-chain li strong { font-family: 'Montserrat', sans-serif; font-size: 16px; }
.sh-source { margin: 24px 0 0; font-size: 12px; color: var(--sh-muted); }

/* ---------- how ---------- */
.sh-how { background: var(--sh-ink); color: #fff; }
.sh-how .sh-kicker { color: #9ed5f4; }
.sh-steps { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.sh-steps li { border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 22px; }
.sh-steps span { font-family: 'Montserrat', sans-serif; color: #9ed5f4; font-size: 12px; font-weight: 800; }
.sh-steps h3 { font-size: 24px; margin-top: 28px; }
.sh-steps p { color: rgba(255, 255, 255, .78); font-size: 17px; line-height: 1.55; }

/* ---------- closing + footer ---------- */
.sh-closing { display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: end; background: #fff; }
.sh-closing h2 { font-size: clamp(32px, 4.2vw, 58px); line-height: 1.04; }
.sh-closing p:last-child { font-size: 18px; line-height: 1.55; color: var(--sh-muted); max-width: 720px; }
.sh-closing__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.sh-footer { display: grid; grid-template-columns: 1fr auto; gap: 30px; padding: 44px clamp(20px, 5vw, 72px); background: var(--sh-purple-deep); color: #fff; font-family: 'Montserrat', sans-serif; }
.sh-footer__brand { display: flex; align-items: center; gap: 20px; }
.sh-footer__brand img { width: 120px; height: auto; }
.sh-footer__brand p { max-width: 440px; color: rgba(255, 255, 255, .78); font-size: 13px; line-height: 1.5; }
.sh-footer nav { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.sh-footer nav a { min-height: 44px; display: flex; align-items: center; }
.sh-footer__note { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 20px; color: rgba(255, 255, 255, .72); font-size: 12px; margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1050px) {
  .sh-header { grid-template-columns: 1fr auto auto; }
  .sh-nav { display: none; }
  .sh-menu { display: block; }
  .sh-grid { grid-template-columns: repeat(2, 1fr); }
  .sh-card, .sh-card:nth-child(4) { grid-column: auto; }
  .sh-card:last-child { grid-column: 1 / -1; }
  .sh-proof { grid-template-columns: repeat(2, 1fr); }
  .sh-chain { grid-template-columns: 1fr; }
  .sh-closing, .sh-footer { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sh-hero { grid-template-columns: 1fr; padding-top: 56px; }
  .sh-hero__visual { width: min(900px, 125%); margin-top: -20px; }
  .sh-steps { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 650px) {
  .sh-header { padding: 12px 18px; grid-template-columns: 1fr auto; }
  .sh-account { display: none; }
  .sh-mark img { width: 44px; height: 44px; }
  .sh-wordmark { font-size: 22px; }
  .sh-ihc { width: 88px; }
  .sh-hero { padding: 52px 20px 44px; gap: 24px; }
  h1 { font-size: clamp(40px, 12vw, 60px); }
  .sh-actions { display: grid; }
  .sh-btn { width: 100%; }
  .sh-trust { grid-template-columns: 1fr; gap: 12px; }
  .sh-trust div { display: grid; grid-template-columns: 82px 1fr; gap: 8px; }
  .sh-trust dd { margin: 0; }
  .sh-grid, .sh-proof, .sh-chain ul { grid-template-columns: 1fr; }
  .sh-card, .sh-card:last-child { grid-column: auto; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sh-card { transition: none; }
  .sh-card:hover { transform: none; }
}