/* A Stern Talk page — responsive layout scaffolding only.
   All colour, type weight and decoration lives inline on the elements. */

/* html/body have no background-color anywhere in the shared styles, so
   mobile Safari's rubber-band overscroll past the end of the page reveals
   the browser's default white canvas against this page's dark footer
   (bg-ink2). Matching it here makes the overscroll blend into the footer
   instead of flashing white. */
html, body { background-color: rgb(28, 25, 23); }

/* home-styles.html reserves extra bottom padding on the shared footer
   below 1024px so the homepage's fixed mobile "Apply Now" bar doesn't
   cover the copyright row - this page has no such bar, so it's just dead
   space here. Halved three times from the original 5rem, per request. */
@media (max-width: 1023px) {
  [data-site-footer] { padding-bottom: 0.625rem !important; }
}

.astt-wrap { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.astt-sec { padding: 64px 0; }
.astt-hero-pad { padding-top: 112px; padding-bottom: 56px; }
.astt-hero-grid { display: grid; gap: 32px; align-items: center; }
.astt-split { display: grid; gap: 40px; }
.astt-sticky { position: static; }
.astt-3col { display: grid; gap: 20px; }
.astt-2col { display: grid; gap: 28px; }
.astt-4col { display: grid; gap: 28px; }
.astt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.astt-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; justify-items: center; gap: 28px 24px; }
.astt-plat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.astt-h1 { font-size: clamp(34px, 8.6vw, 54px); line-height: 0.98; letter-spacing: -0.045em; }
.astt-h2 { font-size: clamp(28px, 7.4vw, 40px); line-height: 1; letter-spacing: -0.04em; }
.astt-quote { font-size: clamp(25px, 6.6vw, 34px); line-height: 1.12; letter-spacing: -0.03em; }
.astt-lede { font-size: 18px; line-height: 1.5; }
.astt-portrait { height: 272px; }
.astt-form { height: 540px; width: 100%; }
.astt-logo { height: 34px; }
.astt-logo-sm { height: 24px; }
.astt-desk { display: none; }
.astt-mob  { display: block; }

@media (min-width: 768px) {
  .astt-plat { display: flex; flex-wrap: wrap; }
  .astt-3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .astt-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .astt-4col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; }
  .astt-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .astt-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
}

@media (min-width: 1024px) {
  .astt-wrap { padding: 0 48px; }
  .astt-sec { padding: 112px 0; }
  .astt-hero-pad { padding-top: 172px; padding-bottom: 100px; }
  .astt-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; }
  .astt-4col { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .astt-logos { grid-template-columns: repeat(6, auto); justify-content: space-between; gap: 24px; zoom: 1.2; }
  .astt-split { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 64px; align-items: start; }
  .astt-sticky { position: sticky; top: 112px; }
  .astt-h1 { font-size: clamp(52px, 4.6vw, 72px); line-height: 0.94; }
  .astt-h2 { font-size: 52px; }
  .astt-quote { font-size: 44px; }
  .astt-lede { font-size: 22px; line-height: 1.45; }
  .astt-portrait { height: 560px; }
  .astt-form { height: 620px; }
  .astt-logo { height: 52px; }
  .astt-logo-sm { height: 34px; }
  .astt-desk { display: block; }
  .astt-mob  { display: none !important; }
}

.astt-play { display: grid; gap: 20px; }
.astt-rail { max-height: 460px; }
@media (min-width: 1024px) {
  .astt-play { grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: stretch; }
  .astt-rail { max-height: calc((min(100vw, 1400px) - 520px) * 0.5625); }
}

/* Nav CTA relabelled "Be a guest" — uppercase + spacing to match hero button. */
#navbar-apply { text-transform: uppercase; letter-spacing: 0.08em; }
#navbar-apply:hover { color: #FFFFFF; }

/* This page's hero is white, not the dark/video hero home.html expects, so
   enhance.b9187d00.js's transparent+white-text "unscrolled" nav state is
   unreadable here. Force the same look it uses once scrolled, always -
   values copied from the "on" state in enhance.b9187d00.js's initNav() so
   this matches the real scrolled nav exactly instead of approximating it. */
[data-nav] { background-color: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(12px) !important; border-bottom: 1px solid rgb(231 229 228) !important; }
[data-nav-logo] { filter: none !important; }
[data-nav-menu] { color: rgba(10, 10, 10, 0.8) !important; }
[data-nav-burger] { color: rgb(10 10 10) !important; }