/*
 * Site foundation: reset, layout, decorative art layer, header, footer.
 * Components (buttons, cards, forms…) are in components.css; shared page sections in sections.css.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-stuck-h) + 32px); } /* clears the sticky header */
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--green-975);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* clip, not hidden: hidden would stop position: sticky from working */
}
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 400; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }
[hidden] { display: none !important; } /* so the hidden attribute beats display: flex/grid */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-mirrored { scale: -1 1; } /* several Figma photos are flipped horizontally */
.muted { opacity: 0.8; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Line breaks: headings spread their words evenly across lines; paragraphs avoid leaving one word alone
   on the last line (an orphan). Browsers without text-wrap: pretty get the same via site.js. */
h1, h2, h3, h4, summary, .hero__title, .page-title, .section-title, .section-heading__title, .split__title, .join__title,
.subspecialty__name, .help-card h3, .site-footer__tagline { text-wrap: balance; }
p, li, dd, blockquote, figcaption { text-wrap: pretty; }
.nowrap { white-space: nowrap; }

/* Headings in the design trim the space above capitals and below the baseline,
   so spacing is measured from the letters themselves (Figma's "cap height trim"). */
.page-title, .section-title, .btn, .hero__title, .section-heading__title, .split__title, .join__title { text-box: trim-both cap alphabetic; }
.page-title { font-size: 50px; line-height: 1.2; font-weight: 400; color: var(--ink); }
.section-title { font-size: 44px; line-height: 1.2; font-weight: 400; color: var(--ink); }

/* ---------- Decorative art layer ----------
   Sections draw their swirls/glows into an .art layer that is exactly the 1440px Figma frame, centred,
   so the Figma coordinates can be used as-is. The section clips anything that spills out. */
.art {
  position: absolute;
  inset: 0;
  width: 1440px;
  left: 50%;
  translate: -50% 0;
  pointer-events: none;
}
/* Art that leans right (glass panels running off the right edge): pin it to the right of the screen,
   so on screens wider than 1440 the panel still reaches the edge and the extra space opens up on the left. */
.art--right { left: auto; right: 0; translate: none; }
@media (max-width: 1440px) { .art--right { left: 50%; right: auto; translate: -50% 0; } }
/* Wider than the Figma frame: fade the art's edges so glows and swirls dissolve into the section
   instead of stopping in a hard vertical line. Pinned-right art only fades on its left. */
@media (min-width: 1441px) {
  .art { mask-image: linear-gradient(to right, transparent, #000 200px, #000 calc(100% - 200px), transparent); }
  .art--right { mask-image: linear-gradient(to right, transparent, #000 200px); }
}
.swirl { position: absolute; display: flex; align-items: center; justify-content: center; container-type: size; }
.swirl > div { position: relative; flex: none; }
.swirl img { position: absolute; max-width: none; }
.art-img { position: absolute; max-width: none; height: auto; }
/* The pale CTA band's background lives inside the art layer: translate makes the layer its own group,
   and the hue blend (.art__hue) only mixes with what's inside that group. */
.art--pale { background: var(--surface-tint); }
.art__hue { position: absolute; inset: 0; background: var(--green-600); mix-blend-mode: hue; }

/* Every page section: positioned (for the art layer), clipped, content above the art. */
.hero, .split, .subspecialties, .faq, .join, .testimonials, .cta-band, .cta-community, .band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* :where() gives this zero specificity, so components that position themselves (like the overlay header) still win. */
:where(.hero, .split, .subspecialties, .faq, .join, .testimonials, .cta-band, .cta-community, .band) > .container { position: relative; }

/* ---------- Header ---------- */
/* The <header> holds the bar's place in the layout; the bar itself is fixed, so it stays on screen.
   Over a hero the header floats (absolute), so the hero runs up behind it. */
:root { --header-pad: 20px; --header-h: 84px; --header-stuck-h: 64px; } /* Higher than Figma (43px), which sat too low. Other sticky things sit below --header-stuck-h. */
.site-header { position: relative; z-index: 50; height: var(--header-h); }
.site-header--overlay { position: absolute; top: 0; left: 0; right: 0; }
.site-header__bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: background-color var(--dur), box-shadow var(--dur), backdrop-filter var(--dur);
}
.site-header__inner {
  position: relative; /* the mobile menu drops down from here */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: var(--header-h);
  padding-top: var(--header-pad);
  transition: min-height var(--dur) var(--ease-out), padding var(--dur) var(--ease-out);
}
/* Scrolled: a slimmer frosted bar with dark text, on every page. */
.site-header.is-stuck .site-header__bar {
  background: rgb(from var(--green-25) r g b / 0.86);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 var(--card-border), 0 8px 24px rgb(from var(--green-975) r g b / 0.06);
}
.site-header.is-stuck .site-header__inner { min-height: var(--header-stuck-h); padding-block: 0; }

.logo { display: inline-flex; align-items: flex-end; gap: 7px; font-size: 33px; line-height: 1; color: var(--green-975); }
.logo img { width: 15.3px; height: 23.3px; margin-bottom: 3px; }
.logo--light { color: var(--on-dark); }
.logo__mark--light { display: none; }

.site-nav { display: flex; align-items: center; gap: 28px; font-size: 16px; line-height: 1; }
.site-nav > a { color: var(--green-975); transition: color 0.15s; }
.site-nav > a:hover, .site-nav > a[aria-current] { color: var(--green-800); }

/* Log in sits apart from the two sign-up buttons, behind a thin divider. */
.site-nav__actions { display: flex; align-items: center; gap: 10px; margin-left: 20px; }
.site-nav__login { margin-right: 6px; padding-right: 16px; border-right: 1px solid var(--card-border); color: var(--green-975); transition: color 0.15s; }
.site-nav__login:hover { color: var(--green-800); }
.site-nav .nav-cta { padding: 10px 16px; font-size: 15px; }
.site-nav .nav-cta--primary { background: var(--green-800); color: var(--green-50); }
.site-nav .nav-cta--primary:hover { background: var(--green-700); filter: none; }

/* "Join Radian": a link to /get-started that site.js turns into a menu of the two sign-ups. */
.join-menu { position: relative; }
.join-menu__trigger { gap: 6px; }
.join-menu__trigger svg { transition: rotate var(--dur) var(--ease-out); }
.join-menu.is-open .join-menu__trigger svg { rotate: 180deg; }
.join-menu__panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  padding: 8px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card-lg);
  background: var(--page-bg);
  box-shadow: 0 20px 48px rgb(from var(--green-975) r g b / 0.16);
}
.join-menu.is-open .join-menu__panel { display: grid; gap: 4px; animation: join-menu-in var(--dur) var(--ease-out); }
@keyframes join-menu-in { from { opacity: 0; translate: 0 -6px; } }

/* Over a hero, before scrolling: light logo, links and buttons. */
.site-header--overlay:not(.is-stuck) .logo { color: var(--on-dark); }
.site-header--overlay:not(.is-stuck) .logo__mark--dark { display: none; }
.site-header--overlay:not(.is-stuck) .logo__mark--light { display: block; }
.site-header--light:not(.is-stuck) .site-nav > a,
.site-header--light:not(.is-stuck) .site-nav__login { color: var(--on-dark); }
.site-header--light:not(.is-stuck) .site-nav__login { border-color: var(--glass-border); }
.site-header--light:not(.is-stuck) .nav-cta--primary { background: var(--green-100); color: var(--green-800); }
.site-header--light:not(.is-stuck) .nav-cta--primary:hover { background: var(--white); }
.site-header--dark:not(.is-stuck) .site-nav > a { color: var(--green-950); }

/* Hamburger: only shown on phones (see the 760px breakpoint). Three bars that turn into an X when open. */
.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--green-100);
  cursor: pointer;
}
.menu-toggle span {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--green-975);
  transition: translate 0.2s, rotate 0.2s, opacity 0.2s;
}
.menu-toggle span:nth-child(1) { top: 16px; }
.menu-toggle span:nth-child(2) { top: 21.25px; }
.menu-toggle span:nth-child(3) { top: 26.5px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { translate: 0 5.25px; rotate: 45deg; }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { translate: 0 -5.25px; rotate: -45deg; }
.site-header--overlay:not(.is-stuck) .menu-toggle { background: rgba(255, 255, 255, 0.9); }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; color: var(--on-dark); }
.site-footer--teal { background: var(--green-900); }
.site-footer--gradient { background: linear-gradient(-38.55deg, var(--green-975) 7.55%, var(--green-800) 95.27%); }
.site-footer__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; pointer-events: none; }
/* A footer-green wash over the video keeps it a quiet backdrop: the glass still moves, with less contrast.
   Raise or lower the 0.55 to taste. */
.site-footer::before { content: ""; position: absolute; inset: 0; background: rgb(from var(--green-900) r g b / 0.55); pointer-events: none; }
.site-footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 889px) auto;
  grid-template-rows: auto 1fr auto;
  min-height: 502px;
  padding-top: 50px;
  padding-bottom: 23px;
}
.site-footer .logo { margin-left: 6px; }
.site-footer__tagline { grid-row: 2; align-self: start; margin-top: 134px; max-width: 428px; font-size: 36px; line-height: 1.1; text-box: trim-both cap alphabetic; }
.site-footer__links { grid-column: 2; grid-row: 1 / 3; display: flex; padding-top: 21px; }
.site-footer__links ul { display: grid; gap: 36px; min-width: 113px; padding-right: 24px; align-content: start; white-space: nowrap; }
.site-footer__links a, .legal a { color: var(--on-dark-soft); font-size: 14px; line-height: 1.3; }
.site-footer__links a:hover, .legal a:hover { color: var(--on-dark); }
.site-footer__bottom { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin-left: -4px; }
.social { display: flex; gap: 8px; padding: 4px; }
.social a { display: block; padding: 8px; border-radius: var(--radius-pill); background: var(--green-950); }
.legal { display: flex; gap: 32px; }
.legal a { font-size: 13px; }

.not-found { padding-block: 120px 200px; }
.get-started { padding-block: 96px 160px; }
.get-started__lede { max-width: 44ch; margin: 24px 0 48px; font-size: 20px; line-height: 1.4; color: var(--ink-soft); }
.get-started__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.not-found__body { margin: 24px 0 40px; font-size: 20px; color: var(--ink-soft); }

/* ---------- Smaller screens (not in the Figma file; sensible defaults) ---------- */
/* The full nav needs about 1030px; below that it folds into the hamburger menu. */
@media (max-width: 1180px) {
  .site-nav { gap: 22px; }
  .site-nav__actions { margin-left: 8px; }
}
@media (max-width: 1080px) {
  :root { --header-pad: 32px; --header-h: 76px; }
  /* Without JavaScript the nav simply wraps under the logo, so links are never unreachable. */
  .site-header__inner { flex-wrap: wrap; gap: 16px; }
  .site-nav, .site-nav__actions { flex-wrap: wrap; gap: 14px; font-size: 16px; }
  .js .site-header__inner { flex-wrap: nowrap; }
  .js .menu-toggle { display: block; }
  .js .site-nav {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: var(--gutter);
    width: min(400px, calc(100% - 2 * var(--gutter)));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 20px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);
    background: var(--page-bg);
    box-shadow: 0 16px 40px rgb(from var(--green-975) r g b / 0.12);
    font-size: 22px;
  }
  .js .site-nav.is-open { display: flex; }
  .js .site-header .site-nav > a { padding: 16px 0; border-bottom: 1px solid var(--card-border); color: var(--green-975); text-decoration: none; }
  .js .site-header .site-nav > a[aria-current] { color: var(--green-800); }
  .js .site-header .site-nav > a::after { display: none; } /* the row dividers already separate items */
  .js .site-nav__actions { flex-direction: column; align-items: stretch; gap: 10px; margin: 0; padding-top: 4px; font-size: 22px; }
  .js .site-header .site-nav__login { margin: 0 0 10px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--card-border); color: var(--green-975); }
  /* In the phone menu the two sign-ups show straight away: no extra tap. */
  .js .join-menu__trigger { display: none; }
  .js .join-menu__panel { display: grid; gap: 10px; position: static; width: auto; padding: 0; border: 0; background: none; box-shadow: none; animation: none; }
  .js .join-menu__panel .join-choice { border: 1px solid var(--card-border); }
}
@media (max-width: 1100px) {
  :root { --gutter: 32px; --section-space: 96px; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; --section-space: 72px; }
  :root { --header-pad: 24px; --header-h: 68px; --header-stuck-h: 60px; }
  .logo { font-size: 28px; }
  .page-title { font-size: 36px; }
  .section-title { font-size: 32px; }
  .site-footer__inner { grid-template-columns: 1fr; grid-template-rows: auto; gap: 40px; }
  .site-footer__tagline { grid-row: auto; margin-top: 0; font-size: 28px; }
  .site-footer__links { grid-column: 1; grid-row: auto; padding-top: 0; }
  .site-footer__bottom { flex-wrap: wrap; gap: 16px; }
}