/* The AI Course sales page v3 — base: fonts, reset, layout primitives, CTA */
@font-face { font-family: 'PP Neue Bit'; src: url('../assets/fonts/ppneuebit-bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('../assets/fonts/space-mono-400-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('../assets/fonts/space-mono-700-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Bit Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'); font-weight: 400 700; size-adjust: 63.6%; ascent-override: 84.1%; descent-override: 22.8%; line-gap-override: 0%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
/* Desktop scale: the whole page renders at 75% of the Paper sizes (Remy, 16 Sept 2026: match Chrome at 75% zoom).
   Tablet (601-900px) stays 1:1; phones (<=600px) render at 90% (see the phone block at the end). Any vw/vh length
   inside the page must be divided by --page-zoom. */
@media (min-width: 901px) {
  :root { --page-zoom: 0.75; }
  body { zoom: var(--page-zoom); }
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Layout */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }
.section { padding-block: var(--section-y); }
.section--stone { background: var(--bg-stone); }
.section--stone-2 { background: var(--bg-stone-2); }
.section--stone-3 { background: var(--bg-stone-3); }
.section--white { background: var(--bg-white); }
.section--rule { border-top: 1px solid var(--line); }

/* Type */
.h1 { font-weight: 500; font-size: 68px; line-height: 74px; letter-spacing: -0.03em; }
.h2 { font-weight: 500; font-size: 56px; line-height: 62px; letter-spacing: -0.03em; }
.h2--md { font-size: 48px; line-height: 54px; }
.h2--sm { font-size: 42px; line-height: 50px; }
.h3 { font-weight: 500; font-size: 36px; line-height: 43px; letter-spacing: -0.03em; }
.h4 { font-weight: 500; font-size: 24px; line-height: 30px; letter-spacing: -0.02em; }
.lede { font-size: 19px; line-height: 30px; color: var(--ink-3); }
.body { font-size: 17px; line-height: 28px; color: var(--ink-3); }
.body--lg { font-size: 18px; line-height: 29px; }
.accent { color: var(--blue); }
.mono { font-family: var(--font-mono); font-weight: 400; text-transform: uppercase; }
.label { font-family: var(--font-mono); font-size: 12px; line-height: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.label--xs { font-size: 10px; line-height: 12px; letter-spacing: 0.08em; }
.label--sm { font-size: 11px; line-height: 14px; letter-spacing: 0.03em; color: var(--ink-4); }
.hand { font-family: var(--font-hand); font-weight: 400; }

/* Eyebrow: square dot + mono label */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; line-height: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--blue); flex: 0 0 auto; }
.eyebrow--yellow::before { background: var(--yellow); }
.eyebrow--plain::before { display: none; }

/* CTA — bevelled blue pill. One label site-wide: "Build my AI Operating System →" */
.cta {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 60px; padding: 0 34px;
  font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 22px; letter-spacing: -0.03em;
  color: var(--blue-deep);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  border: 1px solid var(--blue-border);
  border-radius: 999px;
  background: linear-gradient(in oklab 180deg,
    oklab(96.9% 0.002 -0.015) 0%,
    oklab(91.5% 0.006 -0.041) 18%,
    oklab(82.5% 0.014 -0.088) 50%,
    oklab(67% 0.021 -0.175) 80%,
    oklab(57.8% 0.018 -0.214) 100%);
  box-shadow: inset 0 -15px 2px -12px rgba(255, 255, 255, 0.55),
              inset 0 -9px 0 4px rgba(64, 64, 255, 0.28),
              0 10px 24px rgba(26, 24, 22, 0.16);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.cta::before {
  content: ''; position: absolute; top: 3px; left: 14px; right: 14px; height: 15px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.10));
  pointer-events: none;
}
.cta:hover { transform: translateY(-1px); box-shadow: inset 0 -15px 2px -12px rgba(255, 255, 255, 0.55), inset 0 -9px 0 4px rgba(64, 64, 255, 0.28), 0 14px 28px rgba(26, 24, 22, 0.2); }
.cta:active { transform: translateY(1px); }
.cta--sm {
  height: 34px; padding: 0 18px; font-size: 14px; line-height: 18px; letter-spacing: -0.01em;
  box-shadow: inset 0 -10px 2px -8px rgba(255, 255, 255, 0.55), inset 0 -6px 0 3px rgba(64, 64, 255, 0.28), 0 6px 16px rgba(26, 24, 22, 0.16);
}
.cta--sm::before { top: 3px; left: 10px; right: 10px; height: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.06)); }
.cta--block { width: 100%; }

/* Secondary text link with underline */
.link-under { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 17px; line-height: 22px; letter-spacing: -0.01em; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }

/* Trust line under CTAs */
.trust { font-family: var(--font-mono); font-size: 11px; line-height: 14px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-4); text-align: center; }

/* Offer state switch (set on <html data-offer="launch|evergreen"> by js/launch.js) */
[data-offer="evergreen"] [data-offer-only="launch"] { display: none !important; }
[data-offer="launch"] [data-offer-only="evergreen"] { display: none !important; }

/* Section CTA (Paper "Section CTA · Build my AI Operating System"): button + avatar stack + social line.
   Markup:
   <div class="section-cta">
     <a class="cta" href="/checkout">Build my AI Operating System <span aria-hidden="true">→</span></a>
     <p class="section-cta-proof"><span class="avatar-stack" aria-hidden="true"><img src="/assets/img/avatars/greg.jpg" alt="" width="34" height="34" loading="lazy"><img src="/assets/img/avatars/dano-estermann.jpg" alt="" width="34" height="34" loading="lazy"><img src="/assets/img/avatars/shane-levario.jpg" alt="" width="34" height="34" loading="lazy"></span>Join 100+ other founders</p>
   </div> */
.section-cta { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 540px; margin-inline: auto; padding-top: 80px; }
.section-cta--tight { padding-top: 16px; }
.section-cta .cta { padding-inline: 48px; height: 62px; text-shadow: 0 2px 2px rgba(255, 255, 255, 0.75); }
.section-cta-proof { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; line-height: 22px; color: #706C67; }
.avatar-stack { display: inline-flex; position: relative; height: 34px; width: 72px; flex: 0 0 auto; }
.avatar-stack img { position: absolute; top: 0; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); background: var(--bg-avatar); }
.avatar-stack img:nth-child(1) { left: 0; z-index: 3; }
.avatar-stack img:nth-child(2) { left: 19px; z-index: 2; }
.avatar-stack img:nth-child(3) { left: 38px; z-index: 1; }
@media (max-width: 600px) { .section-cta { padding-top: 56px; } .section-cta .cta { width: 100%; padding-inline: 20px; } }

/* ---------------------------------------------------------------------------------------------
   Phone foundation (Paper artboard JFE-0 "25M · Sales page v4 · Mobile redesign", 390 wide, 24px gutters,
   342px content column, 64px section padding). Section files add their own ≤600px rules on top;
   these only set the shared scale so every section starts from the same type and spacing. */
@media (max-width: 600px) {
  /* Phone scale: render at 90% (Remy, 17 Sept 2026: like Chrome at 90%). Same mechanism as the desktop 75% zoom above. */
  :root { --page-zoom: 0.9; }
  body { zoom: var(--page-zoom); }
  :root { --gutter: 24px; --section-y: 64px; }
  body { font-size: 17px; line-height: 26px; }
  .h1 { font-size: 34px; line-height: 38px; letter-spacing: -0.04em; }
  .h2, .h2--md, .h2--sm { font-size: 32px; line-height: 37px; letter-spacing: -0.03em; }
  .h3 { font-size: 24px; line-height: 31px; letter-spacing: -0.02em; }
  .h4 { font-size: 22px; line-height: 28px; }
  .lede, .body, .body--lg { font-size: 17px; line-height: 26px; color: #3D3935; }
  .label { font-size: 12px; line-height: 20px; }
  .cta {
    height: 56px; padding: 0 20px; font-size: 16px; line-height: 20px;
    box-shadow: inset 0 -15px 2px -12px rgba(255, 255, 255, 0.55), inset 0 -9px 0 4px rgba(64, 64, 255, 0.28), 0 6px 14px rgba(26, 24, 22, 0.08);
  }
  .cta--sm { height: 40px; padding: 0 16px; font-size: 14px; line-height: 18px; }
  .section-cta { gap: 20px; padding-top: 48px; }
  .section-cta .cta { height: 56px; padding-inline: 20px; text-shadow: 0 2px 2px rgba(255, 255, 255, 0.75); }
  .link-under { font-size: 16px; }
}