/* Heyno — Apple/SF design language on the OpenAI.com skeleton.
   Every core value mirrors measured tokens from the live site (see ../SKELETON.md). */

:root {
  --ink: #000;
  --paper: #fff;
  --meta: rgba(0, 0, 0, 0.56);
  --faint: rgba(0, 0, 0, 0.44);
  --fill: rgba(0, 0, 0, 0.04);
  --fill-hover: rgba(0, 0, 0, 0.08);
  --fill-solid: #f1f1f1;
  --hairline: rgba(13, 13, 13, 0.05);
  --border: rgba(13, 13, 13, 0.12);
  --chip-line: rgba(13, 13, 13, 0.12);
  --radius-card: 8px;
  --radius-prompt: 24px;
  --header-h: 64px;
  --pad: 32px;
  --gap-section: 80px;

  /* fluid type — measured formulas, 375px → 1440px */
  --type-xl-size: clamp(4rem, calc(4rem + 3 * ((100vw - 23.4375rem) / 66.5625)), 7rem);
  --type-h1-size: clamp(2rem, calc(2rem + 2 * ((100vw - 23.4375rem) / 66.5625)), 4rem);
  --type-h2-size: clamp(2rem, calc(2rem + 1 * ((100vw - 23.4375rem) / 66.5625)), 3rem);
  --type-h2-line: clamp(2.28rem, calc(2.28rem + 1.2 * ((100vw - 23.4375rem) / 66.5625)), 3.48rem);
  --type-h25-size: clamp(1.5rem, calc(1.5rem + 0.88 * ((100vw - 23.4375rem) / 66.5625)), 2.38rem);
  --type-h25-line: clamp(1.725rem, calc(1.725rem + 1.012 * ((100vw - 23.4375rem) / 66.5625)), 2.737rem);
  --type-h3-size: clamp(1.5rem, calc(1.5rem + 0.375 * ((100vw - 23.4375rem) / 66.5625)), 1.875rem);
  --type-h4-size: clamp(1.25rem, calc(1.25rem + 0.125 * ((100vw - 23.4375rem) / 66.5625)), 1.375rem);
  --type-h5-size: clamp(1rem, calc(1rem + 0.125 * ((100vw - 23.4375rem) / 66.5625)), 1.125rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.647;             /* 28px */
  letter-spacing: -0.01em;        /* −0.17px */
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
figure { margin: 0; }
h1, h2, h3, h4, h5 { font-weight: 500; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.container { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* a tap must never paint a box over what it touched — the browser default is a
   translucent blue plate on every link and button */
html { -webkit-tap-highlight-color: transparent; }
a, button, [role="button"], summary, input, select, textarea { -webkit-tap-highlight-color: transparent; }

/* ---------- pills ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 20px;
  border-radius: 40px;
  font-size: 14px; font-weight: 500; line-height: 1;
  white-space: nowrap;
  transition: background-color 0.18s ease, opacity 0.18s ease;
}
.pill-gray { background: var(--fill); }
.pill-gray:hover { background: var(--fill-hover); }
.pill-black { background: var(--ink); color: var(--paper); }
.pill-black:hover { opacity: 0.82; }
.pill-cta { height: 40px; background: var(--paper); box-shadow: 0 0 0 1px var(--hairline), 0 2px 8px rgba(0, 0, 0, 0.05); }
.pill-cta:hover { background: #fafafa; }
.pill-lang { height: 40px; background: var(--fill-solid); gap: 9px; }
.pill-lang svg { width: 16px; height: 16px; }
.pill-lang span { color: var(--meta); }
.pill-lang:hover { background: #e8e8e8; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  transition: background-color 0.18s ease;
}
.icon-btn:hover { background: var(--fill); }
.icon-btn svg { width: 16px; height: 16px; }

.ext { width: 7px; height: 7px; margin-left: 4px; opacity: 0.7; flex: none; }
.ext-big { width: 14px; height: 14px; margin-left: 10px; }

.skip { position: fixed; top: 12px; left: 12px; z-index: 200; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--hairline); opacity: 0; transition: opacity 0.25s ease;
}
.site-header.scrolled::after { opacity: 1; }

.header-inner {
  display: flex; align-items: center; gap: 28px;
  height: var(--header-h); padding: 0 32px;
  max-width: 1440px; margin: 0 auto;
}

.logo { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }

.primary-nav ul { display: flex; align-items: center; gap: 4px; }
.primary-nav li { display: flex; align-items: center; }
.primary-nav li > a {
  font-size: 13px; font-weight: 500; line-height: 1;
  padding: 8px 10px; border-radius: 8px;
  display: inline-flex; align-items: center;
  transition: opacity 0.15s ease;
}
.primary-nav li > a:hover { opacity: 0.55; }
.primary-nav .menu-toggle { display: none; }
.menu-toggle {
  width: 18px; height: 28px; margin-left: -8px; margin-right: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--faint); border-radius: 6px;
}
.menu-toggle svg { width: 9px; height: 6px; transition: transform 0.2s ease; }
.menu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hamburger { display: none; }

/* megamenu sheets */
.menu-sheet {
  position: absolute; top: var(--header-h); left: 0; right: 0;
  background: var(--paper);
  padding: 32px 0;
  animation: sheet-in 0.22s ease both;
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.site-header.menu-open::after { opacity: 0; }

.menu-grid { display: grid; grid-template-columns: 344px 300px; gap: 0 48px; }
.menu-grid.cols-3 { grid-template-columns: 344px 240px 300px; }
.menu-label { font-size: 13px; font-weight: 500; line-height: 1.514; color: var(--meta); margin-bottom: 12px; }
.menu-col a { display: flex; align-items: center; transition: opacity 0.15s ease; }
.menu-col a:hover { opacity: 0.55; }
.menu-col-big a {
  font-size: 30px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.32;
  margin-bottom: 12px;
}
.menu-col-big a:last-child { margin-bottom: 0; }
.menu-col-small a { font-size: 13px; font-weight: 600; line-height: 1.3; margin-bottom: 11px; }
.menu-col-small a:last-child { margin-bottom: 0; }

/* the mobile sheet reads like openai's: full height, opaque, big type, sections fold */
/* the header's backdrop-filter makes it the containing block, so "fixed" would pin
   to the header box; size the sheet to the viewport by hand instead */
.menu-sheet-mobile { height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); overflow-y: auto; padding: 34px 0 56px; }
.menu-sheet-mobile nav { display: flex; flex-direction: column; align-items: flex-start; }
.menu-sheet-mobile nav > a, .menu-sheet-mobile .m-sec {
  font-size: 38px; font-weight: 500; letter-spacing: -0.022em; line-height: 1.12;
  padding: 11px 0; display: inline-flex; align-items: center;
}
.menu-sheet-mobile .m-sec { background: none; border: 0; color: var(--ink); cursor: pointer; gap: 14px; text-align: left; }
/* no chevron on a nav word — the word itself is the control */
.menu-sheet-mobile .m-sec > svg { display: none; }
.menu-sheet-mobile .m-sub { display: flex; flex-direction: column; align-items: flex-start; padding: 2px 0 16px; }
.menu-sheet-mobile .m-sub a { font-size: 20px; font-weight: 400; letter-spacing: -0.01em; padding: 8px 0; display: inline-flex; align-items: center; }
.menu-sheet-mobile a .ext { width: 15px; height: 15px; margin-left: 12px; }
.menu-sheet-mobile .m-sub a .ext { width: 10px; height: 10px; margin-left: 8px; }
.menu-divider { width: 100%; border: 0; border-top: 1px solid var(--hairline); margin: 22px 0; }
.menu-login { color: var(--faint); }

/* A phone gets no door into the web app: no Log in, no Sign up, no account
   link, nothing offered in their place. .is-phone is set in <head> from the
   same user-agent list the app's middleware gates on, so these are hidden
   before the first paint rather than removed afterwards.
   Matched on href AND on class: the session script can rewrite an href, but
   the class survives it, so a rewritten link cannot reappear. */
:root.is-phone a[href^="https://heyno.net/login"],
:root.is-phone a[href^="https://heyno.net/signup"],
:root.is-phone a[href^="https://heyno.net/chat"],
:root.is-phone a[href^="https://heyno.net/dashboard"],
:root.is-phone a[href^="https://heyno.net/account"],
:root.is-phone a[href^="https://heyno.net/subscribe"],
:root.is-phone a[href^="/login"],
:root.is-phone a[href^="/signup"],
:root.is-phone a.login,
:root.is-phone a.menu-login,
:root.is-phone a.side-login { display: none !important; }

/* Sign-up and subscribe CTAs carry two targets: the web destination on a
   desktop, the App Store on a phone, where the web app is shut. The web
   anchor is already hidden on a phone by the rule above; this hides its App
   Store twin everywhere else, so exactly one of the pair is ever visible and
   the choice is made from the same pre-paint flag, never after load.
   Sign-in links -- Log in, My account -- get no twin and stay hidden. */
:root:not(.is-phone) .cta-app { display: none !important; }
/* Where the desktop half is not a heyno.net URL the href rule above cannot
   see it, so it is marked explicitly instead. Same pairing, stated rather
   than inferred. */
:root.is-phone .cta-web { display: none !important; }

.page-veil {
  position: fixed; inset: 0; top: var(--header-h); z-index: 90;
  background: rgba(13, 13, 13, 0.06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---------- main stack ---------- */

.stack {
  display: flex; flex-direction: column;
  gap: var(--gap-section);
  padding-bottom: var(--gap-section);
}

.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 32px;
}
.sec-head h2 { font-size: var(--type-h4-size); letter-spacing: -0.01em; line-height: 1.26; }
.view { font-size: 14px; font-weight: 500; line-height: 1; transition: opacity 0.15s ease; }
.view:hover { opacity: 0.55; }

.meta { display: flex; align-items: baseline; gap: 12px; font-size: 14px; line-height: 1.4; letter-spacing: 0; }
.meta b { font-weight: 500; color: var(--ink); }
.meta span { color: var(--meta); font-weight: 400; }

/* ---------- hero prompt ---------- */

.hero {
  min-height: calc(568px - 0px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px;
  padding: 48px var(--pad) 0;
}
.hero-title {
  font-size: clamp(1.75rem, calc(1.75rem + 0.25 * ((100vw - 23.4375rem) / 66.5625)), 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
}

.prompt { position: relative; width: min(768px, 100%); }
.prompt textarea {
  display: block; width: 100%; height: 104px;
  border: 0; border-radius: var(--radius-prompt);
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--hairline), 0 10px 28px rgba(0, 0, 0, 0.05);
  padding: 18px 60px 18px 20px;
  font: inherit; letter-spacing: inherit; color: var(--ink);
  resize: none; outline: none;
  transition: box-shadow 0.2s ease;
}
.prompt textarea::placeholder { color: var(--faint); }
.prompt textarea:focus { box-shadow: 0 0 0 1px rgba(13, 13, 13, 0.14), 0 10px 28px rgba(0, 0, 0, 0.06); }

.send {
  position: absolute; right: 14px; bottom: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--fill); color: var(--faint);
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.send svg { width: 15px; height: 15px; }
.send:active { transform: scale(0.94); }
.send.ready { background: var(--ink); color: var(--paper); }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chips button {
  height: 36px; padding: 0 18px;
  border-radius: 40px;
  border: 1px solid var(--chip-line);
  background: var(--paper);
  font-size: 14px; font-weight: 500; line-height: 1;
  transition: background-color 0.15s ease;
}
.chips button:hover { background: var(--fill); }

/* ---------- shared card art ---------- */

.art {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* art that carries a real image: fill the tile edge to edge, crop to the
   figure's aspect ratio, and keep the giant words above it */
.art > img, .art > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.caption { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.card-title { font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
.card-title-lg { font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }

a.feature-hero, a.rail-card, a.tile { display: block; }
a.feature-hero:hover .card-title-lg,
a.rail-card:hover .card-title,
a.tile:hover h3,
a.news-item:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a.feature-hero .art::after, a.rail-card .art::after, a.tile .art::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0); transition: background-color 0.2s ease;
}
a.feature-hero:hover .art::after, a.rail-card:hover .art::after, a.tile:hover .art::after {
  background: rgba(0, 0, 0, 0.04);
}

/* ---------- feature grid ---------- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 412px;
  gap: 24px;
  align-items: start;
}

.feature-hero .art-heyno3 {
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(96, 140, 255, 0.55), transparent 55%),
    radial-gradient(90% 70% at 12% 88%, rgba(255, 138, 92, 0.42), transparent 58%),
    radial-gradient(70% 60% at 50% 55%, rgba(126, 84, 255, 0.28), transparent 65%),
    linear-gradient(178deg, #05070f 8%, #0b1026 52%, #241638 100%);
  align-items: stretch; justify-content: stretch;
}
.art-heyno3::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.14; mix-blend-mode: soft-light; pointer-events: none;
}
.giant {
  position: absolute; color: #fff;
  font-weight: 600; letter-spacing: -0.045em; line-height: 0.86;
  font-size: clamp(56px, 11.2vw, 158px);
}
.giant-word { top: 5%; left: 4.5%; }
.giant-num { bottom: 3%; right: 6%; }

.feature-rail { display: flex; flex-direction: column; gap: 24px; }
.rail-card .art { aspect-ratio: 1 / 1; }

.art-recap { background: linear-gradient(140deg, #ffd9c4 0%, #f6c9dd 46%, #cfc3f4 100%); }
.tile-icon {
  width: 88px; height: 88px; border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 30px rgba(120, 60, 40, 0.18);
  display: flex; align-items: center; justify-content: center;
}
.tile-icon svg { width: 40px; height: 40px; }

.art-calls { background: radial-gradient(130% 120% at 50% -10%, #2b2b2e 0%, #0a0a0b 60%); }
.toggle-demo { display: flex; gap: 8px; }
.toggle-demo i {
  font-style: normal; font-size: 15px; font-weight: 500; line-height: 1;
  padding: 12px 24px; border-radius: 40px;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.toggle-demo i.on { background: #fff; color: #000; border-color: #fff; }

.art-live { background: #05060c; }
.phone {
  position: relative; width: 132px; height: 216px; border-radius: 30px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(30, 40, 70, 0.16), 0 0 0 1px rgba(13, 13, 13, 0.05);
  display: flex; align-items: center; justify-content: center;
}
.orb {
  width: 72px; height: 72px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #b9d4ff 0%, #6f8dff 46%, #4e57d8 100%);
  filter: blur(1px);
}

/* ---------- news grid ---------- */

.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px; row-gap: 56px;
}
.news-item { display: grid; grid-template-columns: 128px 1fr; gap: 24px; align-items: center; }
.thumb {
  width: 128px; height: 128px; border-radius: var(--radius-card);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.thumb i {
  font-style: normal; color: #fff; font-weight: 500; font-size: 15px;
  letter-spacing: -0.01em; text-align: center; line-height: 1.25; padding: 0 10px;
}
.th-1 { background: radial-gradient(120% 110% at 20% 15%, #ffc891 0%, #ff9d6d 55%, #f27a5f 100%); }
.th-2 { background: linear-gradient(150deg, #bfeef2 0%, #7fd4e8 55%, #cfe9a9 100%); }
.th-3 { background: linear-gradient(160deg, #aebef7 0%, #93a5ec 60%, #b9d0f5 100%); }
.th-4 { background: radial-gradient(140% 130% at 50% 20%, #23252d 0%, #0b0c12 70%); }
.th-4 i { font-size: 14px; opacity: 0.92; }
.th-5 { background: linear-gradient(145deg, #cfe6fb 0%, #8fbdf2 60%, #5f9ae4 100%); }
.th-6 { background: radial-gradient(130% 120% at 30% 25%, #d9f3c0 0%, #a4dd8e 55%, #74bf6b 100%); }
/* violet — the research slot. Deep enough that the white label reads (4.7:1);
   the interior .fm-* pastels live in interior.css and the home page never loads it. */
.th-7 { background: linear-gradient(155deg, #b9a6f2 0%, #7d5ce0 55%, #4c31a8 100%); }

.news-body h3 { font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; margin-bottom: 10px; }

/* ---------- carousels ---------- */

.rail-section { overflow: hidden; }
.rail {
  display: flex; gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0 max(var(--pad), calc((100vw - 1440px) / 2 + var(--pad)));
  scroll-padding-inline: max(var(--pad), calc((100vw - 1440px) / 2 + var(--pad)));
  scrollbar-width: none;
  cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.tile {
  flex: 0 0 clamp(280px, calc((min(100vw, 1440px) - 2 * var(--pad) - 48px) / 3), 442px);
  scroll-snap-align: start;
}
.tile .art { aspect-ratio: 1 / 1; }
.tile h3 { font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }

/* stories art */
.st-1 { background: linear-gradient(170deg, #2c2320 0%, #59372a 48%, #c88a54 100%); }
.st-2 { background: linear-gradient(165deg, #dff0f2 0%, #9fcfd6 45%, #26606c 100%); }
.st-3 { background: linear-gradient(155deg, #3c2a63 0%, #7b3f8f 55%, #d96a6a 100%); }
.st-4 { background: linear-gradient(170deg, #b9c7cf 0%, #6f8794 55%, #2f4652 100%); }
.st-mark {
  color: #fff; font-weight: 600; font-size: 64px; letter-spacing: -0.03em; line-height: 1;
  display: flex; align-items: baseline; gap: 6px;
}
.st-mark small { font-size: 22px; font-weight: 500; opacity: 0.85; }
.st-arcs { position: absolute; inset: 0; }
.st-arcs::before, .st-arcs::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
}
.st-arcs::before { width: 78%; height: 78%; left: -26%; bottom: -30%; }
.st-arcs::after { width: 54%; height: 54%; right: -14%; top: -18%; border-color: rgba(255, 255, 255, 0.4); }
.st-arcs-tall::before { left: 32%; bottom: -42%; }

/* updates art */
.up-1 { background: linear-gradient(150deg, #fdf3ba 0%, #f7dd6b 60%, #ecc94d 100%); }
.up-2 { background: linear-gradient(150deg, #bff0e4 0%, #6fd8cd 55%, #35b5b0 100%); }
.up-3 { background: linear-gradient(150deg, #e2efc9 0%, #cbe3a4 60%, #b5d488 100%); }
.up-4 { background: linear-gradient(150deg, #f3e2ce 0%, #e6c3a5 60%, #d5a37f 100%); }
.up-title {
  color: #17181c; font-size: 34px; font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.08; text-align: center;
}
.up-glyph svg { width: 120px; height: 120px; }

/* business art */
.bz-1 { background: linear-gradient(160deg, #33455e 0%, #1e2c40 55%, #101a29 100%); }
.bz-2 { background: linear-gradient(160deg, #16351f 0%, #235c31 55%, #3d8c47 100%); }
.bz-3 { background: linear-gradient(160deg, #f3b25c 0%, #e2704a 55%, #b8323c 100%); }
.bz-4 { background: linear-gradient(160deg, #1c3f4d 0%, #14606f 55%, #3aa3a8 100%); }
.brand {
  color: #fff; font-size: 52px; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.02; text-align: center;
}
.brand-boxed {
  font-size: 34px; padding: 14px 26px;
  border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 10px;
}

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--fill-solid);
  border-radius: 16px;
  min-height: 368px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 30px;
  text-align: center;
  padding: 48px 24px;
}
.cta-band h2 {
  font-size: clamp(2rem, calc(2rem + 0.5 * ((100vw - 23.4375rem) / 66.5625)), 2.5rem);
  letter-spacing: -0.02em; line-height: 1.16;
}

/* ---------- footer ---------- */

.site-footer { padding-top: 16px; }
/* openai's footer: equal flex columns, generous vertical rhythm inside each
   group, and every link the same weight as its heading -- the heading is told
   apart by colour, not by size or boldness. */
.foot-grid {
  display: flex;
  gap: 24px;
  padding-top: 48px; padding-bottom: 64px;
}
.foot-col { display: flex; flex-direction: column; gap: 40px; flex: 1 1 0; min-width: 0; }
.foot-col nav { display: flex; flex-direction: column; }
.foot-label { font-size: 14px; font-weight: 400; color: var(--meta); margin-bottom: 12px; }
.foot-col nav a {
  display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 400; line-height: 1.45;
  padding: 6px 0;
  transition: opacity 0.15s ease;
}
.foot-col nav a:hover { opacity: 0.55; }

.foot-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-top: 8px; padding-bottom: 56px;
}
.socials { display: flex; align-items: center; gap: 26px; }
.socials a { display: inline-flex; opacity: 0.9; transition: opacity 0.15s ease; }
.socials a:hover { opacity: 0.5; }
.socials svg { width: 17px; height: 17px; }
.foot-note { font-size: 13px; color: var(--ink); }
.foot-note a { text-decoration: underline; text-underline-offset: 3px; margin-left: 10px; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .feature { grid-template-columns: 1fr; }
  .feature-rail { display: grid; grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: repeat(3, 1fr); }
}

/* six nav items no longer fit under ~940px — hand over to the hamburger there
   rather than at 840, where the sixth item pushed the header into overflow. */
@media (max-width: 940px) {
  .primary-nav, .login { display: none; }
  .hamburger { display: inline-flex; }
}

@media (max-width: 840px) {
  :root { --pad: 20px; --gap-section: 64px; }

  /* a stray layout box a few px wide must never let the page wiggle sideways */
  body { overflow-x: clip; }

  .primary-nav, .login { display: none; }
  /* openai's phone bar carries logo, search and the menu button only */
  .header-actions .pill-black { display: none; }
  .hamburger { display: inline-flex; }
  .header-inner { gap: 12px; }

  .menu-grid { grid-template-columns: 1fr; gap: 40px; }
  .menu-col-big a { font-size: 26px; }

  .hero { min-height: 480px; }
  .prompt textarea { height: 112px; }

  .feature-rail { grid-template-columns: 1fr; }

  .news-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .news-item { grid-template-columns: 96px 1fr; gap: 18px; }
  .thumb { width: 96px; height: 96px; }

  .tile { flex-basis: 78vw; }

  .giant { font-size: clamp(64px, 24vw, 120px); }

  /* one column on a phone, and the links stay the SAME size as desktop --
     openai does not inflate them to 18px, which is what made ours read as a
     giant stack of buttons rather than a footer. */
  .foot-grid { flex-direction: column; gap: 40px; padding-top: 40px; padding-bottom: 48px; }
  .foot-col { gap: 40px; }
  .foot-label { font-size: 14px; margin-bottom: 12px; }
  .foot-col nav a { font-size: 14px; font-weight: 400; padding: 6px 0; }
  /* the bottom bar centres on a phone, the way openai's does */
  .foot-bar { flex-direction: column; align-items: center; text-align: center; gap: 30px; padding-bottom: 48px; }
  .socials { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* the hidden attribute must always win, everywhere */
[hidden] { display: none !important; }

/* featured hero sticks while the right rail scrolls (mirrors openai.com home) */
@media (min-width: 1000px) {
  .feature-hero { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
}
/* long bottom word (Horizon) sized to fit the card */
.giant-num { font-size: clamp(52px, 10.6vw, 150px); }

/* ============================================================
   Dark mode — token overrides. Follows the OS by default and
   can be forced with data-theme="dark" / "light" on <html>.
   ============================================================ */
:root[data-theme="dark"] {
  --ink: #f2f2f4;
  --paper: #0d0d0f;
  --meta: rgba(255, 255, 255, 0.60);
  --faint: rgba(255, 255, 255, 0.44);
  --fill: rgba(255, 255, 255, 0.07);
  --fill-hover: rgba(255, 255, 255, 0.13);
  --fill-solid: #1b1b1e;
  --hairline: rgba(255, 255, 255, 0.09);
  --border: rgba(255, 255, 255, 0.17);
  --chip-line: rgba(255, 255, 255, 0.17);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f2f2f4;
    --paper: #0d0d0f;
    --meta: rgba(255, 255, 255, 0.60);
    --faint: rgba(255, 255, 255, 0.44);
    --fill: rgba(255, 255, 255, 0.07);
    --fill-hover: rgba(255, 255, 255, 0.13);
    --fill-solid: #1b1b1e;
    --hairline: rgba(255, 255, 255, 0.09);
    --border: rgba(255, 255, 255, 0.17);
    --chip-line: rgba(255, 255, 255, 0.17);
  }
}
/* surfaces that had hardcoded light values */
:root[data-theme="dark"] .site-header { background: rgba(13, 13, 15, 0.82); }
:root[data-theme="dark"] .page-veil { background: rgba(255, 255, 255, 0.10); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header { background: rgba(13, 13, 15, 0.82); }
  :root:not([data-theme="light"]) .page-veil { background: rgba(255, 255, 255, 0.10); }
}



/* ---------- site search overlay ---------- */
.sx-wrap { position: fixed; inset: 0; z-index: 200; display: none; }
.sx-wrap.on { display: block; }
.sx-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.34); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sx-panel {
  position: relative; margin: 12vh auto 0; width: min(620px, calc(100vw - 32px));
  background: var(--paper); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28); overflow: hidden;
}
.sx-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
.sx-ic { width: 17px; height: 17px; color: var(--meta); flex: 0 0 auto; }
.sx-input { flex: 1; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.sx-close { border: 1px solid var(--border); background: none; color: var(--meta); border-radius: 7px; font: inherit; font-size: 11px; padding: 3px 7px; cursor: pointer; }
.sx-body { max-height: min(58vh, 460px); overflow-y: auto; padding: 8px; }
.sx-lab { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--meta); margin: 8px 10px 6px; font-weight: 600; }
.sx-lab-2 { margin-top: 14px; }
.sx-empty { color: var(--meta); font-size: 14px; margin: 18px 10px; }
.sx-hit, .sx-ask { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.sx-hit-t { display: block; font-size: 15px; font-weight: 500; }
.sx-hit-d { display: block; font-size: 13px; color: var(--meta); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-hit.on, .sx-ask.on, .sx-hit:hover, .sx-ask:hover { background: var(--fill); }
.sx-ask { display: flex; gap: 10px; align-items: flex-start; }
.sx-ask-ic { flex: 0 0 auto; font-size: 14px; line-height: 1.5; opacity: .8; }
.sx-ask-t { display: block; font-size: 15px; font-weight: 500; }
.sx-ask-q { display: block; font-size: 13px; color: var(--meta); margin-top: 2px; }
@media (max-width: 700px) {
  .sx-panel { margin-top: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .sx-body { max-height: calc(100dvh - 60px); }
}