/* 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; }

/* ---------- 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;
}

/* the App Store CTA is phone-only; the 840px block below swaps it in for the
   web signup CTA. Hidden by default so desktop is untouched. The menu-sheet
   variant needs no toggle - that sheet only ever opens behind the hamburger. */
.cta-app { display: none; }

.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; }
.menu-sheet-mobile .m-sec svg { width: 17px; height: 17px; margin-top: 7px; color: var(--faint); transition: transform 0.18s ease; }
.menu-sheet-mobile .m-sec[aria-expanded="true"] svg { transform: rotate(180deg); }
.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); }

.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 { 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; }
.foot-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 48px 32px;
  padding-top: 64px; padding-bottom: 96px;
}
.foot-col { display: flex; flex-direction: column; gap: 48px; }
.foot-col nav { display: flex; flex-direction: column; }
.foot-label { font-size: 14px; font-weight: 400; color: var(--meta); margin-bottom: 18px; }
.foot-col nav a {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 500; line-height: 1.5;
  padding: 4px 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) {
  /* 24px is openai's phone gutter, measured at 390: every block on their
     about and news pages sits at left 24 / right 24 for a 342px column. --pad
     drives every .container, so this is the one lever that puts the whole
     site on that edge. */
  :root { --pad: 24px; --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; }
  /* on a phone the product is the iOS app, so the web signup CTA hands over to
     the App Store one and "Log in" drops out entirely - there is no mobile web
     login to send anyone to. Desktop keeps /signup and /login untouched. */
  .cta-web { display: none; }
  /* the bar hid every pill at phone width; keep that, but let the App Store
     CTA through as the one action */
  .header-actions .pill-black:not(.cta-app) { display: none; }
  .cta-app { display: inline-flex; }
  .hamburger { display: inline-flex; }
  /* the bar carried a hardcoded 32px inset, so the wordmark hung 12px outside
     the copy beneath it; theirs shares one gutter with the page */
  .header-inner { gap: 12px; padding: 0 var(--pad); }

  .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); }

  .foot-grid { grid-template-columns: 1fr; gap: 44px; padding-bottom: 56px; }
  .foot-col { gap: 44px; }
  .foot-label { font-size: 15px; margin-bottom: 14px; }
  .foot-col nav a { font-size: 18px; font-weight: 500; padding: 8px 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; }
}

/* a section head is a heading plus its "View all" link on one baseline row.
   At phone width the heading eats the row and the link overflows the gutter,
   so the pair stacks and both sit on the same left edge. */
@media (max-width: 640px) {
  .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@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); }
}