/* ==========================================================================
   Human Feedback Foundation — site stylesheet
   Built on the Nocturne design system, inverted to a light ground.
   Every colour below is a Nocturne token or a step of its tonal ramps;
   the accent is the fixed logo orange (#F06C00).
   No frameworks. No build step.
   ========================================================================== */

:root {
  /* Nocturne neutral ramp (OKLCH-generated, shared lightness scale) */
  --n-100: #f3f5fe;
  --n-200: #e4e7f5;
  --n-300: #cfd3e5;
  --n-400: #b2b6ca;
  --n-500: #9397ab;
  --n-600: #75798c;
  --n-700: #595d6c;
  --n-800: #3f424d;
  --n-900: #292b31;

  /* Nocturne accent ramp — retained for tints and the hero field */
  --a-300: #d2cefd;
  --a-500: #968ae0;
  --a-700: #5d5294;
  --a-800: #423a6a;

  /* Roles, light ground */
  --bg: var(--n-100);
  --surface: #fbfbfe;
  --band: var(--n-200);
  --ink: #161826;
  --ink-body: var(--n-800);
  --ink-muted: var(--n-700);
  --line: var(--n-300);
  --ground-dark: #161826;
  --cream: #f4f1ea;              /* warm ground, paired with the peach strip */
  --ground-purple: #360e5c;      /* main version's hero/header ground */
  --ground-purple-line: rgba(255,255,255,0.22);
  --header-h: 80px;
  --ground-darker: #101119;
  --ground-dark-line: var(--n-800);

  --accent: #f06c00;
  --accent-text: #8f4100;
  /* Brand orange darkened just enough to clear 3:1 for large text on the
     light ground; --accent itself only reaches 2.82:1 there. */
  --accent-display: #d95f00;

  /* Nocturne spacing (density 0.70x) and radii */
  --s1: 2.8px;  --s2: 5.6px;  --s3: 8.4px;
  --s4: 11.2px; --s6: 16.8px; --s8: 22.4px;
  --r-sm: 4px;  --r-md: 8px;  --r-lg: 14px;

  --font: "Inter", system-ui, -apple-system, sans-serif;
  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--ink);
}
p { margin: 0; }
img { display: block; max-width: 100%; }
figure { margin: 0; }

a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }

::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 18px; background: var(--ink); color: var(--n-100);
  text-decoration: none; border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; color: var(--n-100); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: clamp(64px, 9vw, 128px); padding-bottom: clamp(64px, 9vw, 128px); }
.section-sm { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
.band { background: var(--band); border-top: 1px solid var(--line); }

/* Grounds for the lower half of the home page. News, the Playbook and
   Community all sat on near-identical pale blues parted by a hairline, so
   the three read as one continuous field over ~3,400px of scroll. They now
   alternate in temperature as well as lightness — near-white, warm cream,
   cool band — with no rule needed where the colour change is the edge. */
.ground-surface { background: var(--surface); }
.ground-cream { background: var(--cream); }
/* Ground change with no rule: fades from the page ground into the band
   across the section's top padding, so sections separate by tone.
   The pair sits closer together than two independent sections would. */
.band-fade {
  --fade-h: clamp(40px, 5vw, 72px);
  padding-top: var(--fade-h);
  background: linear-gradient(to bottom, var(--bg) 0, var(--band) var(--fade-h));
}
.band-fade-prev { padding-bottom: clamp(40px, 5vw, 72px); }
.rule-top { border-top: 1px solid var(--line); }

/* — type scale — */
.display { font-size: clamp(38px, 3.4vw, 48px); line-height: 1.2; letter-spacing: -0.02em; }
.h1 { font-size: clamp(34px, 4.6vw, 66px); line-height: 1.06; letter-spacing: -0.028em; }
.h2 { font-size: clamp(28px, 3.6vw, 48px); }
.h3 { font-size: clamp(22px, 2.4vw, 30px); }
.h4 { font-size: 21px; line-height: 1.2; }
.lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.65; color: var(--ink-body); }
.body { font-size: 17px; line-height: 1.7; color: var(--ink-body); }
.body-sm { font-size: 16px; line-height: 1.65; color: var(--ink-body); }
.kicker {
  font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted);
}
.measure { max-width: 62ch; }
.measure-sm { max-width: 56ch; }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--r-md);
  font-family: var(--font); font-size: 16px; font-weight: 500; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--ink);
}
.btn-primary { border-color: var(--accent); color: var(--ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); }
.btn-primary:active { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.btn-sm { padding: 9px 16px; font-size: 15px; }
.btn svg { display: block; flex: none; }

/* inline text link with an accent underline */
.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 500; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding-bottom: 2px;
}
.link:hover { border-bottom-color: var(--accent); }

.tag {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-muted);
  font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
}

/* — header —
   White on every page and at every scroll position. The old behaviour — a
   transparent bar over the purple hero that turned white once scrolled — is
   gone, so the logo and the links never have to work against two grounds.
   The current page is marked with a rule under the label rather than a
   tinted pill: an underline in currentColor reads on any ground, which is
   what the pill could not do. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: #fff; color: var(--ink);
  border-bottom: 1px solid #efefef;
}
.site-nav {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--s4) var(--gutter);
  min-height: var(--header-h);
  display: flex; align-items: center; gap: var(--s6);
}
.brand { display: flex; align-items: center; margin-right: auto; }
.brand img { width: 158px; height: 40px; }
.brand .logo-light { display: none; }
.brand .logo-dark { display: block; }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav-links a {
  padding: 6px 0; font-size: 18px; font-weight: 500;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--n-400); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--accent); }
.nav-cta { color: var(--ink); font-size: 17px; padding: 10px 18px; }
.nav-cta:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink); }
/* The CTA is a bordered button, so it takes a tint rather than a rule. */
.nav-cta[aria-current="page"] { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--ink);
}
.mobile-nav { display: none; border-top: 1px solid var(--line); background: #fff; }
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav .wrap { display: flex; flex-direction: column; padding-top: var(--s4); padding-bottom: var(--s8); }
.mobile-nav a {
  padding: 14px 4px; font-size: 18px; font-weight: 500;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--n-200);
}
.mobile-nav a:last-child { border-bottom: 0; }
.mobile-nav a[aria-current="page"] { box-shadow: inset 2px 0 0 0 var(--accent); padding-left: 12px; }

@media (max-width: 819px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* the header is fixed, so in-page anchors stop short of it */
[id] { scroll-margin-top: var(--header-h); }

/* — hero —
   Near-black ground; the hero video (authored on purple #360e5c) sits on the
   right and fades in, so the block reads as a dark-to-purple gradient from
   left to right. The header floats over the hero, so the top padding clears
   the header height. */
.hero { position: relative; overflow: hidden; background: var(--ground-dark); color: var(--n-100); }
.hero h1 { color: #fff; }
.hero .kicker { color: var(--n-500); font-size: 15px; }
.hero .btn-primary { color: #fff; font-size: 17px; padding: 13px 22px; }
.hero .link { font-size: 17px; }
.hero .btn-primary:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.hero .link { color: var(--accent); }
.hero .link:hover { color: #ff8a2a; }
.hero-inner {
  position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto;
  padding: calc(var(--header-h) + clamp(56px, 7vw, 96px)) var(--gutter) clamp(40px, 5vw, 64px);
}
/* 30ch keeps "future for AI." on the second line rather than orphaning
   "for AI." on a third. At 48px the long line runs to ~1048px, which does
   cross the ~922px where the hero artwork reaches full opacity — but the
   artwork is its purple ground there, not the bright circle, so white holds
   15.3:1. Measured, not assumed. Retune if the headline changes again. */
.hero h1 { max-width: 30ch; }
.hero .lede { max-width: 58ch; margin-top: clamp(20px, 2vw, 28px); color: var(--a-300); }
.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s4) var(--s8); margin-top: clamp(36px, 5vw, 56px);
}
.hero-media { position: absolute; inset: 0; pointer-events: none; }
/* fade the artwork into the ground along the bottom, so the hero runs
   seamlessly into the stat band below it */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(180px, 45%, 360px); pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--ground-dark));
}
.hero-media video, .hero-media img {
  position: absolute; right: 0; top: 0; height: 100%; width: 62%;
  object-fit: cover; object-position: left center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 42%, #000 100%);
}
.hero-media img { display: none; }
.hero-still-only .hero-media video { display: none; }
.hero-still-only .hero-media img { display: block; }
@media (max-width: 819px) { .hero-media { opacity: 0.55; } }

/* — page header (interior pages) —
   Purple like the main version, with the transparent header floating over it. */
.page-head { background: var(--ground-purple); color: var(--n-100); }
.page-head .wrap { padding-top: calc(var(--header-h) + clamp(48px, 7vw, 96px)); padding-bottom: clamp(40px, 5vw, 64px); }
.page-head h1 { max-width: 22ch; color: #fff; }
.page-head .lede { margin-top: clamp(24px, 3vw, 36px); max-width: 62ch; color: var(--a-300); }
.page-head .body, .page-head .body-sm { color: #fff; }
.page-head .btn-primary, .page-head .btn-primary:hover { color: #fff; }

/* Full-bleed banner variant: the image runs edge to edge directly under the
   header, with the purple ground continuing above and below it. object-fit
   crops the 4.8:1 source so it keeps a usable height at every width; on narrow
   screens the crop shifts left to hold the RAISE lockup in frame. */
.page-head.has-banner { padding-top: var(--header-h); }
.page-head.has-banner .wrap { padding-top: clamp(40px, 5vw, 64px); }
.page-banner {
  display: block; width: 100%;
  height: clamp(200px, 28vw, 460px); object-fit: cover; object-position: center;
}
@media (max-width: 700px) { .page-banner { object-position: 34% center; } }

/* Soft geometric artwork on the purple head, per the Foundation comp. Reuses
   the theme's banner-background.svg, which is authored on the same #360E5C,
   so it composites seamlessly. Same idiom as the home hero: the art sits on
   the right and is masked so it fades in, leaving the left column flat. */
.page-head.has-art { position: relative; overflow: hidden; }
.page-head.has-art > .wrap { position: relative; z-index: 1; }
/* Held at half strength: at full opacity the pale shapes run behind the nav
   and drop white 18px links to roughly 2:1. */
.head-art { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; }
.head-art img {
  position: absolute; right: 0; top: 0; height: 100%; width: 68%;
  object-fit: cover; object-position: right center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 46%);
  mask-image: linear-gradient(to right, transparent 0%, #000 46%);
}
@media (max-width: 819px) { .head-art { opacity: 0.38; } .head-art img { width: 100%; } }

/* Outline button for the purple ground, beside the accent primary. */
.btn-ghost { border-color: var(--ground-purple-line); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* — dark stat band — */
.stats { position: relative; background: var(--ground-dark); color: var(--n-100); }
/* the hero above is a composited layer with a fractional height; paint its
   last pixel row from here so no hairline shows at the join */
.stats::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 3px;
  background: var(--ground-dark);
}
.stats h2, .stats p { color: var(--n-100); }
/* Numbers sit on the page ground, one soft step down from the marquee
   (#fbfbfe -> #f3f5fe) and one step above the band that follows. */
.numbers { background: var(--bg); }
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(28px, 4vw, 48px); margin-top: clamp(32px, 4vw, 48px);
}
.stat-num {
  font-size: clamp(40px, 5vw, 64px); font-weight: 500;
  letter-spacing: -0.035em; line-height: 1; color: var(--accent-display);
}
.stat-label { margin-top: var(--s4); font-size: 15px; color: var(--ink-muted); }

/* — grids and cards — */
.grid { display: grid; gap: clamp(24px, 3vw, 36px); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.split-top { align-items: start; }

.card {
  display: flex; flex-direction: column; gap: var(--s6);
  padding: var(--s6); border-radius: var(--r-md);
  background: var(--surface); box-shadow: 0 0 0 1px var(--line);
}
.card img { width: 100%; aspect-ratio: 1040 / 734; object-fit: cover; border-radius: var(--r-sm); }
.card .link, .card .push { margin-top: auto; align-self: flex-start; }

/* — news list — */
.news { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0 clamp(28px, 4vw, 48px); }
.news-item {
  display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s8) 0 calc(var(--s8) * 1.3);
  border-top: 1px solid var(--line); text-decoration: none; color: var(--ink);
}
.news-item:hover { border-top-color: var(--accent); color: var(--ink); }
.news-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s6); }
.news-title span { font-size: 19px; font-weight: 500; line-height: 1.28; letter-spacing: -0.015em; }
.news-source { font-size: 14.5px; line-height: 1.5; color: var(--ink-muted); }

/* — article (news page): a press release set as running text — */
.article { max-width: 68ch; }
.article > * + *, .article-about > * + * { margin-top: var(--s8); }
.article p { font-size: 17px; line-height: 1.7; color: var(--ink-body); }
.article .article-sub { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; font-weight: 500; color: var(--ink); }
.article h3 { margin-top: clamp(36px, 4.5vw, 56px); }
.article blockquote { margin: var(--s8) 0 0; padding-left: var(--s8); border-left: 2px solid var(--accent); }
.article blockquote p { font-size: 19px; line-height: 1.5; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); }
.article .article-end { text-align: center; color: var(--ink-muted); }
.article-about { margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(36px, 4.5vw, 56px); border-top: 1px solid var(--line); }
.article-about h3 { margin-top: clamp(28px, 3.5vw, 40px); }

/* — logo grids — */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s4); }
.logo-cell {
  display: flex; align-items: center; justify-content: center;
  height: 104px; padding: var(--s8);
  background: var(--surface); border: 1px solid var(--n-200); border-radius: var(--r-md);
}
.logo-cell img { max-height: 44px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 560px) {
  /* Two columns need 351.2px and a 390pt phone gives 350px, so every logo
     landed in its own row. Pin two columns and tighten the cell. */
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-cell { height: 84px; padding: var(--s4); }
}

/* Warm ground under the industry logos, as on the site this replaces, where
   .logos-section:nth-child(even) is #fce2cc. The logo cells stay on --surface,
   so they read as tiles on the tint exactly as they do there. */
.logos-warm { background: #fce2cc; }
.logos-warm .kicker { color: #7a5330; }

/* — team — */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(28px, 3.5vw, 48px); }
@media (max-width: 560px) {
  /* Below this the 240px floor forces a single column and the page runs to
     ten screens, so drop the floor and pair the cards up. */
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s8); }
  .team-name { font-size: 17px; }
  .team-role { font-size: 14px; }
}
.team-card { display: flex; flex-direction: column; gap: var(--s4); }
.team-card img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--r-md); background: var(--n-200);
}
.team-name { font-size: 19px; font-weight: 500; letter-spacing: -0.015em; }
.team-role { font-size: 15px; color: var(--ink-muted); }
/* The icon is 22px; pad the hit area out to 44x44 (Apple HIG) and pull the
   padding back out with negative margins so nothing moves visually. */
.team-card a {
  display: inline-flex; align-self: start; color: var(--ink-muted);
  padding: 11px; margin: calc(var(--s1) - 11px) 0 -11px -11px;
}
.team-card a:hover { color: var(--accent); }

/* — quotes — */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 3.5vw, 44px); }
.quote {
  display: flex; flex-direction: column; gap: var(--s6);
  padding: var(--s8); border-radius: var(--r-md);
  background: var(--surface); box-shadow: 0 0 0 1px var(--line);
}
.quote-mark { width: 22px; height: auto; }
.quote blockquote { margin: 0; font-size: 19px; line-height: 1.4; font-weight: 500; letter-spacing: -0.015em; }
.quote-by { display: flex; align-items: center; gap: var(--s4); margin-top: auto; }
.quote-by img { max-height: 34px; width: auto; object-fit: contain; }
.quote-by p { font-size: 15px; }
.quote-by span { display: block; color: var(--ink-muted); font-size: 14px; }

/* — marquee (RAISE partner strip) — */
.marquee { overflow: hidden; background: var(--surface); }
/* Spacing is a trailing margin on every logo, not flex gap: the track holds
   the set twice, and -50% only lands exactly on the copy's first logo when
   each half is N × (logo + space). With gap the halves differ by one gap and
   the loop jumps. */
.marquee-track { display: flex; align-items: center; width: max-content; padding: var(--s8) 0; animation: marquee 44s linear infinite; }
.marquee-track img { height: 40px; width: auto; object-fit: contain; margin-right: clamp(40px, 6vw, 84px); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* — forms — */
.field { display: flex; flex-direction: column; }
.field label { font-size: 13px; margin-bottom: var(--s3); color: var(--ink-muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: 11px 14px;
  font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--surface); caret-color: var(--accent);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--n-500); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--accent); outline-offset: 0;
}
.form-stack { display: grid; gap: var(--s8); max-width: 620px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s8); }

/* dark-ground form (footer newsletter, RAISE join) */
.form-dark label { color: var(--n-500); }
.form-dark input:not([type="submit"]), .form-dark select {
  background: #232532; color: var(--n-100); border-color: var(--ground-dark-line);
}
.form-dark input::placeholder { color: var(--n-600); }
/* background-color, not the background shorthand: the shorthand also resets
   repeat/size/position, which tiled the footer button's arrow on hover. */
.form-dark .btn-primary { border-color: var(--accent); background-color: transparent; color: var(--n-100); }
.form-dark .btn-primary:hover { background-color: color-mix(in srgb, var(--accent) 16%, transparent); }

/* Custom dropdown: site.js builds this over a [data-custom-select] <select>,
   which stays in the form (hidden) and carries the value. Safari draws an
   open native select as a system menu that CSS can't reach. */
.cselect { position: relative; }
.cselect-native { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.cselect-button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s6);
  width: 100%; min-height: 46px; padding: 11px 14px;
  font: inherit; font-size: 16px; text-align: left; color: var(--ink); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.cselect-button[data-empty] { color: var(--ink-muted); }
.cselect-button:hover { border-color: var(--n-500); }
.cselect-button:focus-visible, .cselect-button[aria-expanded="true"] { border-color: var(--accent); outline: none; }
.cselect-button[aria-invalid="true"] { border-color: var(--accent-text); }
.cselect-button svg { flex: none; color: var(--accent); transition: transform 160ms; }
.cselect-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.cselect-list {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 14px 34px rgba(22, 24, 38, 0.12);
}
.cselect-list:focus { outline: none; }
.cselect-option {
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: 16px; line-height: 1.35; color: var(--ink); cursor: pointer;
}
.cselect-option[data-active] { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cselect-option[aria-selected="true"] { color: var(--accent-text); font-weight: 500; }
.cselect-error { margin-top: var(--s3); font-size: 14px; color: var(--accent-text); }

/* Newsletter sign-up result, shown in place by site.js. */
/* Every sign-up form sits on a dark ground, so the result is a lighter band
   with a coloured edge and icon: white tick for success, orange ! for errors. */
.signup-msg {
  flex-basis: 100%; display: flex; align-items: flex-start; gap: var(--s4);
  margin-top: var(--s6); padding: 12px 16px;
  font-size: 16px; line-height: 1.45; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, 0.12); border-left: 3px solid #fff;
  animation: signup-msg-in 240ms ease-out;
}
.signup-msg::before {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-size: 13px; font-weight: 700; line-height: 1;
}
.signup-msg[data-state="success"]::before { content: "\2713"; background: #fff; color: var(--ground-purple); }
.signup-msg[data-state="error"] { border-left-color: var(--accent); }
.signup-msg[data-state="error"]::before { content: "!"; background: var(--accent); color: #fff; }
.signup-msg[hidden] { display: none; }
@keyframes signup-msg-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .signup-msg { animation: none; } }

/* ==========================================================================
   Program hero — split panel, after the Dais RAISE page: the copy sits on
   its ground on the left, the supplied RAISE banner runs to the top and
   right edges. The section clears the header so the nav never sits over the
   banner. The news card that follows is pulled up over the join.
   ========================================================================== */
.hero-split { background: var(--ground-purple); color: var(--n-100); padding-top: var(--header-h); }
.hero-split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.hero-split-copy {
  display: flex; align-items: center; justify-content: flex-end;
  padding: clamp(36px, 4.5vw, 72px) var(--gutter);
}
/* Caps the copy so its left edge lands on the same gutter as every .wrap
   below it once the viewport is wider than --wrap. */
.hero-split-copy > div { width: 100%; max-width: calc(var(--wrap) / 2 - var(--gutter) * 2); }
.hero-split .lede { margin-top: var(--s6); }

.hero-split-media { position: relative; overflow: hidden; min-height: clamp(230px, 30vw, 430px); }
/* The supplied banner is authored artwork — lockup, tagline and grid baked
   in — so it carries no overlay, and it anchors left so the lockup survives
   the crop at every width. */
.hero-split-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: left center;
}
/* Feathers only the banner's bottom edge into the ground, so the photograph
   in the band below emerges from purple across the full width instead of
   butting against the banner in a hard line. Clear of the lockup. */
.hero-split-media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(40px, 7vw, 96px);
  background: linear-gradient(to bottom, transparent, var(--ground-purple));
}

.hero-split h1 { color: #fff; }
.hero-split .kicker { color: var(--a-300); }
.hero-split .lede { color: var(--a-300); }
.hero-split .btn-primary { color: #fff; }
.hero-split .btn-ghost { border-color: var(--ground-purple-line); color: #fff; }
.hero-split .btn-ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Wordmark variant of the banner (see hero-wordmark/): a crowd photograph
   carrying an oversized RAISE that bleeds off the right edge, with the copy
   on white to its left. The face is a stand-in — see the note in that page. */
.hero-split.on-light { background: #fff; color: var(--ink); }
.hero-split.on-light h1 { color: var(--ink); }
.hero-split.on-light .kicker { color: var(--ink-muted); }
.hero-split.on-light .lede { color: var(--ink-body); }
.hero-split.on-light .btn-primary { color: var(--ink); }
.hero-split.on-light .btn-ghost { border-color: var(--line); color: var(--ink); }
.hero-split.on-light .btn-ghost:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink); }
.hero-split.on-light .hero-split-media::after { background: none; }

/* With the photograph in the banner there is no second picture below: the
   news card lifts straight over the hero's lower edge instead. */
.news-band.over-hero { padding-top: 0; background: var(--bg); }
/* The card is pulled up over this hero, so the copy needs the lift's worth of
   clearance or the card lands on the buttons. */
.hero-split.has-overlap .hero-split-copy {
  padding-bottom: calc(clamp(36px, 4.5vw, 72px) + clamp(58px, 8vw, 124px));
}
.news-band.over-hero .news-card { box-shadow: 0 0 0 1px var(--line), 0 26px 56px rgba(12, 4, 24, 0.2); }

.hero-split-media.is-wordmark img { object-position: center; }
.hero-split-media.is-wordmark::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(14, 12, 20, 0.62), rgba(14, 12, 20, 0.44));
}
/* The RAISE lockup, cropped from the supplied artwork to the mark itself so
   its size and position are predictable, sat oversized over the photograph
   and bleeding off the left edge. The brand's own mark, not a word set in
   whatever face came closest. */
/* Specificity matters here: `.hero-split-media img` sets inset/width/height
   and object-fit: cover for the banner, and it out-specifies a lone class, so
   the sticker has to be matched at least as specifically and reset those. */
.hero-split-media img.hero-sticker {
  inset: auto; z-index: 2;
  top: 50%; left: clamp(12px, 3%, 48px);
  transform: translateY(-50%);
  height: 88%; width: auto; max-width: none;
  object-fit: contain; object-position: center;
}

/* Band proportions, after the Dais banner: a narrow white title panel against
   a wide, shallow photograph, with the wordmark bleeding off the right edge.
   Everything else that used to crowd the panel now sits in the intro below. */
.hero-split.is-band .hero-split-grid { grid-template-columns: 38fr 62fr; }
.hero-split.is-band .hero-split-copy { padding-block: clamp(18px, 2.4vw, 34px); }
.hero-split.is-band .hero-split-copy > div { max-width: calc(var(--wrap) * 0.38 - var(--gutter) * 2); }
.hero-split.is-band h1 {
  font-size: clamp(19px, 2.2vw, 32px); line-height: 1.2;
  letter-spacing: -0.015em; max-width: 15ch;
}
.hero-split.is-band .hero-split-media { min-height: clamp(215px, 29vw, 460px); }
/* The sticker sits whole on the photograph — never cropped — so it is sized
   by height against the band and anchored left. */
.hero-split.is-band img.hero-sticker {
  top: 50%; left: clamp(12px, 3%, 48px);
  height: 88%; width: auto;
}

@media (max-width: 899px) {
  .hero-split-grid { grid-template-columns: 1fr; }
  .hero-split-copy { justify-content: flex-start; padding-bottom: clamp(28px, 4.5vw, 44px); }
  .hero-split-copy > div { max-width: none; }
  .hero-split-media { min-height: clamp(168px, 44vw, 260px); }
}

/* ==========================================================================
   Program page — Agentic AI Design Exchange
   A purple hero with an announcement card, then alternating white/band
   sections. Components here are generic enough to reuse on a second
   program page; nothing is page-specific.
   ========================================================================== */

/* Hero CTAs sit on the purple ground, so the outline button needs the white
   text treatment the .hero variants already use. */
.page-head .hero-actions { margin-top: clamp(28px, 3.5vw, 40px); }
.page-head .link { color: #fff; border-bottom-color: rgba(255,255,255,0.5); }
.page-head .link:hover { color: #fff; border-bottom-color: #fff; }
.page-head .kicker { color: var(--a-300); }

/* Fact strip: a dot-separated inline list that wraps to as many rows as it
   needs on a phone. The dot rides on the item so it can never orphan onto
   a line of its own. */
.fact-strip {
  margin: clamp(22px, 2.6vw, 32px) 0 0; padding: 0; list-style: none;
  font-size: 15.5px; line-height: 1.5; color: var(--a-300);
}
.fact-strip li { padding: var(--s3) 0; }
.fact-strip li + li { border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent); }

/* News-release card, from the Foundation comp. A photograph sits below the
   hero, fading out of the purple at its top edge and back into it at the
   bottom, and the card is pulled up so it lands over the photograph's lower
   part. The card popping over the picture is what carries the eye across the
   join; the section then gradients into the page ground for the light
   sections that follow. */
.news-band {
  /* about half the card's height, so it crosses the photograph's edge rather
     than sitting wholly on one side of it */
  --lift: clamp(58px, 8vw, 124px);
  padding-bottom: clamp(48px, 6vw, 88px);
  background: var(--bg);
  /* flow-root, so the card's negative margin cannot collapse through and drag
     this band's top edge up with it. When it did, the band's background
     painted over the hero's copy panel but not over the hero's <img> — a
     replaced box paints above an in-flow block background — and the two sides
     of the join ended at different heights. */
  display: flow-root;
}
.news-photo { position: relative; height: clamp(230px, 28vw, 400px); }
.news-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Feathers only the top into the purple above. The bottom edge stays hard:
   that crisp edge is what the card visibly crosses. */
.news-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    var(--ground-purple) 0%,
    rgba(54, 14, 92, 0.32) 30%,
    rgba(54, 14, 92, 0.32) 100%);
}
.news-card {
  position: relative; z-index: 1; display: block;
  margin-top: calc(var(--lift) * -1);
  padding: clamp(22px, 2.8vw, 34px);
  padding-right: clamp(52px, 6vw, 78px);
  border-radius: var(--r-md); background: var(--surface); color: var(--ink);
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 28px 60px rgba(10, 3, 22, 0.42);
}
.news-card-date { font-size: 13.5px; letter-spacing: 0.02em; color: var(--ink-muted); }
.news-card h2 {
  margin-top: var(--s4); max-width: 46ch;
  font-size: clamp(19px, 2.1vw, 27px); line-height: 1.25; letter-spacing: -0.018em;
}
.news-card p { margin-top: var(--s6); max-width: 82ch; }
.news-card-arrow {
  position: absolute; top: clamp(22px, 2.8vw, 34px); right: clamp(22px, 2.8vw, 34px);
  color: var(--accent);
}
a.news-card:hover { box-shadow: 0 0 0 1px var(--accent), 0 28px 60px rgba(10, 3, 22, 0.42); }
.news-band [data-needs-input] { margin-top: var(--s8); }

/* Chips — skills / platform capabilities / outcomes. */
.chips { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-block; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 14.5px; line-height: 1.35; color: var(--ink-body);
}

/* Format / Who should apply / Cost — the Dais comp's dark band: three columns
   ruled apart on desktop, stacked and ruled above on a phone. */
.factband { display: grid; gap: clamp(28px, 4vw, 48px); }
.factband h3 { font-size: 18px; color: var(--n-100); }
.factband .lead-line { margin-top: var(--s6); font-size: 15.5px; font-weight: 500; color: var(--n-100); }
.factband ul { margin: var(--s6) 0 0; padding-left: 18px; }
.factband li { font-size: 15.5px; line-height: 1.6; color: var(--n-400); }
.factband li + li { margin-top: var(--s3); }
@media (min-width: 880px) {
  .factband { grid-template-columns: repeat(3, 1fr); }
  .factband > div + div {
    border-left: 1px solid var(--ground-dark-line);
    padding-left: clamp(28px, 4vw, 48px);
  }
}
@media (max-width: 879px) {
  .factband > div + div { border-top: 1px solid var(--ground-dark-line); padding-top: var(--s8); }
}

/* Status flag on a track: what is live at launch vs. what follows. */
.tag-live { border-color: var(--accent); color: var(--accent-text); }

/* Numbered tracks — a rule-topped column each, like the stat cards. */
.track { display: flex; flex-direction: column; gap: var(--s4); padding-top: var(--s8); }
.track-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.track-num { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }

/* Accordion — native <details>, so it works with no JS and collapsed content
   costs nothing on mobile. */
.acc { border-top: 1px solid var(--line); }
.acc > details { border-bottom: 1px solid var(--line); }
.acc > details > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s6);
  padding: var(--s8) 0; cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 500; line-height: 1.32; letter-spacing: -0.015em;
}
.acc > details > summary::-webkit-details-marker { display: none; }
.acc > details > summary::after {
  content: ""; flex: none; width: 11px; height: 11px; margin-top: 5px;
  border-right: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent);
  transform: rotate(45deg); transition: transform 200ms ease;
}
.acc > details[open] > summary::after { transform: rotate(-135deg); }
.acc > details > summary:hover { color: var(--accent-text); }
.acc-body { padding-bottom: var(--s8); max-width: 72ch; }
.acc-body > * + * { margin-top: var(--s6); }
@media (prefers-reduced-motion: reduce) {
  .acc > details > summary::after { transition: none; }
}

/* Accordion, card variant (the IDEO FAQ treatment): each question is its own
   white card on the band ground, spaced apart, with a plus that becomes a
   minus. Easier to scan than a hairline list, and a much bigger touch target. */
.acc.acc-cards { display: grid; gap: var(--s4); border-top: 0; }
.acc.acc-cards > details {
  border-bottom: 0; border-radius: var(--r-md);
  background: var(--surface); box-shadow: 0 0 0 1px var(--line);
}
.acc.acc-cards > details > summary {
  padding: clamp(18px, 2.2vw, 28px) clamp(20px, 2.4vw, 30px);
  font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; line-height: 1.25;
}
.acc.acc-cards > details > summary::after {
  width: 20px; height: 20px; margin-top: 5px; border: 0; transform: none;
  color: var(--accent);
  background:
    linear-gradient(currentColor, currentColor) center / 20px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 20px no-repeat;
}
.acc.acc-cards > details[open] > summary::after {
  transform: none;
  background: linear-gradient(currentColor, currentColor) center / 20px 2px no-repeat;
}
.acc.acc-cards .acc-body { padding: 0 clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 30px); }

/* Same card family, but nothing is hidden — a title and its one line, always
   visible. Used for the curriculum, where there is no second layer to reveal. */
.step-cards { display: grid; gap: var(--s4); }
.step-card {
  padding: clamp(18px, 2.2vw, 28px) clamp(20px, 2.4vw, 30px);
  border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1px var(--line);
}
.step-card h4 { font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; line-height: 1.25; }
.step-card p { margin-top: var(--s4); }

/* Facilitators — circular crop, built to hold more cards than it has names. */
/* Portrait beside the name, as the Dais comp sets its instructors — at one
   card per column the bio wrapped to eight lines. */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: clamp(28px, 3.5vw, 44px); }
.person { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s6); align-items: start; }
.person img, .person .person-blank {
  width: clamp(88px, 9vw, 112px); aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius-portrait, 50%); background: var(--n-200);
}
/* Empty slot: neutral silhouette, same footprint as a real portrait. */
.person .person-blank {
  display: block;
  background: var(--n-200) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23b2b6ca'%3E%3Ccircle cx='32' cy='24' r='11'/%3E%3Cpath d='M32 39c-11 0-20 7.4-20 16.5V64h40v-8.5C52 46.4 43 39 32 39z'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
}
.person-name { font-size: 18px; font-weight: 500; letter-spacing: -0.015em; }
.person-role { font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--ink); }
.person-org { margin-top: var(--s3); font-size: 14.5px; line-height: 1.5; color: var(--ink-muted); }

/* Paths to get involved — stacked cards, each with its own short form. */
.path { padding-top: var(--s8); }
.path h3 { font-size: 21px; line-height: 1.2; }
.path .form-stack { margin-top: var(--s8); max-width: 680px; }
.checkline { display: flex; align-items: flex-start; gap: var(--s4); font-size: 15px; color: var(--ink-body); }
.checkline input { width: 18px; height: 18px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--accent); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s4); }

/* Partner logos carry their role as a label above the cell, as in the Dais
   comp; the roles list below covers the partners whose logos we don't have. */
.logo-labelled { display: flex; flex-wrap: wrap; gap: var(--s8); }
.logo-labelled > div { flex: 0 1 220px; }
.logo-labelled .kicker { display: block; margin-bottom: var(--s4); font-size: 12.5px; }

/* Partner roles — name over a one-line role, no logo box. */
.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.role-name { font-size: 17px; font-weight: 500; letter-spacing: -0.015em; }
.role-what { margin-top: var(--s3); font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

/* Numbered components list, as "About the initiative" sets it out. */
.numlist { margin: 0; padding-left: 1.4em; }
.numlist li { font-size: 16px; line-height: 1.65; color: var(--ink-body); }
.numlist li + li { margin-top: var(--s6); }
.numlist strong { color: var(--ink); }

/* Course-style card: icon, title, body, bullets, dates, action. */
.course-card { display: flex; flex-direction: column; gap: var(--s6); }
.course-head { display: flex; align-items: center; gap: var(--s4); }
.course-head svg { flex: none; color: var(--accent); }
.course-head h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.course-card ul { margin: 0; padding-left: 1.2em; }
.course-card li { font-size: 16px; line-height: 1.65; color: var(--ink-body); }
.course-card li + li { margin-top: var(--s4); }
.course-dates { font-size: 15px; line-height: 1.6; }
.course-dates b { display: block; color: var(--accent-text); font-weight: 600; }
.course-card .btn { align-self: flex-start; margin-top: auto; }

/* Contact block: circular portrait beside name, role and address. */
.contact-person { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); }
.contact-person img {
  width: clamp(104px, 12vw, 148px); aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius-portrait, 50%); background: var(--n-200); flex: none;
}
.contact-person .person-name { font-size: 21px; }

/* Prototype-only: copy still waiting on a decision. Every one of these is
   listed in REDESIGN.md; delete the element and this rule ships nothing. */
[data-needs-input] {
  display: block; padding: var(--s4) var(--s6); border: 1px dashed var(--accent);
  border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 6%, transparent);
  font-size: 14.5px; line-height: 1.5; color: var(--accent-text);
}

/* — HUMAINE band —
   Brought over from the current site, which gives this block the accent as a
   ground with the overlapping-circles graphic bleeding off the right
   (background-position: 115% center there). The circles read as intersecting
   populations, which is the point of the study.

   This is the one place the accent is used as a flood rather than a line —
   a deliberate exception to the rule at the top of this file, to keep the
   block recognisable from the site it replaces. Body copy is the dark ink,
   not white: #161826 on #f06c00 is 5.8:1, white is only 3.1:1. */
.humaine {
  background: var(--accent)
    url("../wp-content/themes/humanfeedback/inc/assets/img/project-banner-bg.svg")
    no-repeat 115% center / auto 100%;
  color: var(--ink);
}
.humaine h2, .humaine .body, .humaine strong { color: var(--ink); }
/* Keeps the copy clear of the graphic; the original held it to half. */
.humaine .measure { max-width: min(56ch, 52%); }
.humaine .btn-onaccent {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 22px; border: 1px solid var(--ink); border-radius: var(--r-sm);
  font-size: 16px; font-weight: 500; line-height: 1;
  color: var(--ink); text-decoration: none; background: transparent;
}
.humaine .btn-onaccent:hover { background: var(--ink); color: #fff; }
.humaine .btn-onaccent:hover svg path { stroke: #fff; }
/* Between the two, the graphic is still wide enough to reach under the
   second paragraph, so it shrinks and hangs off the right in pixels. */
@media (max-width: 1199px) and (min-width: 900px) {
  .humaine { background-position: right -90px center; background-size: auto 78%; }
}
@media (max-width: 899px) {
  /* Once the graphic is wider than the viewport, a percentage position past
     100% moves it LEFT — the offset is a share of (container - image), which
     has gone negative — and it lands under the copy. Pin it to the corner in
     pixels instead, and leave room below the copy for it. */
  .humaine {
    background-position: right -70px bottom -60px;
    background-size: auto 40%;
    padding-bottom: clamp(150px, 42vw, 260px);
  }
  .humaine .measure { max-width: none; }
}

/* Outline form, the treatment the current site gives the RAISE signup:
   transparent fields with a hairline white border and square corners, not
   the filled .form-dark boxes. Same shape as the footer newsletter. */
.form-outline label { color: #fff; font-size: 15px; }
.form-outline input:not([type="submit"]) {
  height: 52px; padding: 0 16px; border-radius: 0;
  background: transparent; border: 1px solid #fff; color: #fff; caret-color: #fff;
}
.form-outline input::placeholder { color: rgba(255, 255, 255, 0.55); }
.form-outline input:not([type="submit"]):hover,
.form-outline input:not([type="submit"]):focus { border-color: #fff; box-shadow: none; }
.form-outline .btn-primary {
  height: 52px; padding: 0 48px 0 22px; border-radius: 0;
  background: transparent; border: 1px solid #fff; color: #fff; font-size: 17px;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.4697 0.46967C10.7626 0.176777 11.2374 0.176777 11.5303 0.46967L17.5303 6.46967C17.8232 6.76256 17.8232 7.23744 17.5303 7.53033L11.5303 13.5303C11.2374 13.8232 10.7626 13.8232 10.4697 13.5303C10.1768 13.2374 10.1768 12.7626 10.4697 12.4697L15.1893 7.75H1C0.585786 7.75 0.25 7.41421 0.25 7C0.25 6.58579 0.585786 6.25 1 6.25H15.1893L10.4697 1.53033C10.1768 1.23744 10.1768 0.762563 10.4697 0.46967Z' fill='%23f06c00'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 18px 14px;
}
.form-outline .btn-primary:hover, .form-outline .btn-primary:focus {
  background-color: rgba(255, 255, 255, 0.1);
  background-repeat: no-repeat; background-position: right 18px center; background-size: 18px 14px;
}
/* The rule between the copy and the form, as on the current site. */
.signup-col { border-left: 1px solid rgba(255, 255, 255, 0.35); padding-left: clamp(28px, 4vw, 64px); }
@media (max-width: 899px) {
  .signup-col { border-left: 0; padding-left: 0; }
}

/* Warm ground under the partner quotes. The current site's program template
   overrides .background-light-grey to this for exactly this block. */
.quotes-warm { background: var(--cream); }

/* — dark CTA section (RAISE join) — */
.dark-section { background: var(--ground-dark); color: var(--n-100); }
.dark-section h2, .dark-section h3 { color: var(--n-100); }
.dark-section .body, .dark-section p { color: var(--n-400); }
.dark-section a:not(.btn) { color: var(--n-100); }

/* — footer —
   Same as the main version: purple ground with the footer artwork, the
   news sign-up, the copyright row, the large "Foundation" word, then the
   dark Linux Foundation band. Type is Inter at main's sizes. */
.site-footer {
  background: var(--ground-purple) url("../wp-content/themes/humanfeedback/inc/assets/img/footer-background.svg") center bottom / cover no-repeat;
  color: #fff;
}
.site-footer h2 { color: #fff; }
.site-footer .wrap { padding-top: clamp(56px, 7vw, 104px); padding-bottom: 0; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.footer-note { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: #fff; max-width: 48ch; }
.footer-signup { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s6); position: relative; margin-top: var(--s8); }
.footer-signup .field { flex: 1 1 240px; }
.site-footer .field label { color: #fff; font-size: 16px; }
.site-footer .field input {
  height: 48px; padding: 0 14px; border-radius: 0;
  background: transparent; border: 1px solid #fff; color: #fff; caret-color: #fff;
}
.site-footer .field input::placeholder { color: rgba(255,255,255,0.6); }
.site-footer .field input:hover, .site-footer .field input:focus { border-color: #fff; box-shadow: none; }
.site-footer .btn-primary {
  height: 48px; padding: 0 44px 0 20px; border-radius: 0;
  background: transparent; border: 1px solid #fff; color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.4697 0.46967C10.7626 0.176777 11.2374 0.176777 11.5303 0.46967L17.5303 6.46967C17.8232 6.76256 17.8232 7.23744 17.5303 7.53033L11.5303 13.5303C11.2374 13.8232 10.7626 13.8232 10.4697 13.5303C10.1768 13.2374 10.1768 12.7626 10.4697 12.4697L15.1893 7.75H1C0.585786 7.75 0.25 7.41421 0.25 7C0.25 6.58579 0.585786 6.25 1 6.25H15.1893L10.4697 1.53033C10.1768 1.23744 10.1768 0.762563 10.4697 0.46967Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px 14px;
}
.site-footer .btn-primary:hover, .site-footer .btn-primary:focus {
  background-color: #fff; color: var(--ink);
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px 14px;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='14' viewBox='0 0 18 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.4697 0.46967C10.7626 0.176777 11.2374 0.176777 11.5303 0.46967L17.5303 6.46967C17.8232 6.76256 17.8232 7.23744 17.5303 7.53033L11.5303 13.5303C11.2374 13.8232 10.7626 13.8232 10.4697 13.5303C10.1768 13.2374 10.1768 12.7626 10.4697 12.4697L15.1893 7.75H1C0.585786 7.75 0.25 7.41421 0.25 7C0.25 6.58579 0.585786 6.25 1 6.25H15.1893L10.4697 1.53033C10.1768 1.23744 10.1768 0.762563 10.4697 0.46967Z' fill='black'/%3E%3C/svg%3E");
}
.site-footer #mce-responses .response { margin: var(--s6) 0 0; color: #fff; }
.footer-meta {
  display: flex; flex-wrap: wrap; gap: var(--s6) var(--s8);
  align-items: center; justify-content: space-between;
  margin-top: clamp(56px, 7vw, 104px);
}
.footer-meta span { font-size: 18px; color: #fff; }
.footer-meta a { font-size: 18px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-meta a:hover { text-decoration: none; }
.footer-social { display: flex; flex-wrap: wrap; gap: var(--s8); }
.footer-word { display: block; width: 100%; height: auto; margin-top: clamp(24px, 4vw, 56px); }
.footer-lf { background: #12051f; color: #9597a1; }
.footer-lf .wrap {
  padding-top: clamp(48px, 5vw, 80px); padding-bottom: clamp(48px, 5vw, 80px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.footer-lf img { width: 166px; }
.footer-lf p { font-size: 16px; line-height: 1.5; color: #9597a1; max-width: 62ch; }
.footer-lf a { color: #9597a1; text-decoration: underline; text-underline-offset: 3px; }
.footer-lf a:hover { color: #fff; }
@media (max-width: 767px) {
  .footer-top, .footer-lf .wrap { grid-template-columns: 1fr; }
}
.visually-hidden { position: absolute; left: -5000px; }

/* — reveal-on-scroll — */
[data-reveal] { transition: opacity 620ms cubic-bezier(.22,.61,.36,1), transform 620ms cubic-bezier(.22,.61,.36,1); }
[data-reveal][data-hidden="true"] { opacity: 0; transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { transition: none !important; opacity: 1 !important; transform: none !important; }
  /* No animation means a clipped single row hides most logos (7 of 9 on a
     phone), so let the strip wrap and show them all instead. */
  .marquee-track {
    animation: none; width: auto; flex-wrap: wrap; justify-content: center;
    gap: clamp(24px, 4vw, 48px); padding: var(--s8) 20px;
  }
  .marquee-track img { margin-right: 0; }
  .hero-media video { display: none; }
  .hero-media img { display: block; }
}

/* ==========================================================================
   Agentic AI Design Exchange — built frame by frame against the Figma.
   Tokens and metrics below are measured off the supplied frame exports
   (2000px wide), converted to viewport units, so proportions hold.
   The serif is a stand-in until the real face is named.
   ========================================================================== */
:root {
  --fig-ground: #101014;
  --fig-ink: #fefdff;
  --fig-body: #c8c7cc;
  --fig-cream: #f4f1e9;
  --fig-card-ink: #101012;
  --fig-card-body: #55555c;
  --fig-line: rgba(255, 255, 255, 0.16);
  --fig-header-h: clamp(72px, 8vw, 116px);
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* — header: solid on the ground, never the white scrolled bar — */
.site-header.fig-header,
.site-header.fig-header.scrolled,
.site-header.fig-header.nav-open { background: var(--fig-ground); color: var(--fig-ink); border-bottom-color: transparent; }
.site-header.fig-header .brand .logo-light,
.site-header.fig-header.scrolled .brand .logo-light { display: block; }
.site-header.fig-header .brand .logo-dark,
.site-header.fig-header.scrolled .brand .logo-dark { display: none; }
.site-header.fig-header .site-nav { min-height: var(--fig-header-h); gap: clamp(12px, 2vw, 30px); }
.site-header.fig-header .nav-links { gap: clamp(8px, 1.6vw, 26px); }
.site-header.fig-header .nav-links a,
.site-header.fig-header.scrolled .nav-links a {
  padding: 8px 2px; border-radius: 0; background: none;
  font-size: clamp(14px, 1.25vw, 19px); font-weight: 400; color: var(--fig-ink);
}
.site-header.fig-header .nav-links a:hover,
.site-header.fig-header .nav-links a[aria-current="page"] {
  background: none; color: var(--fig-ink);
  box-shadow: inset 0 -1px 0 0 currentColor;
}
.site-header.fig-header .nav-cta,
.site-header.fig-header.scrolled .nav-cta {
  border-color: transparent; background: none; color: var(--fig-ink);
  font-size: clamp(14px, 1.25vw, 19px); font-weight: 400; padding: 8px 2px;
}
.site-header.fig-header .nav-cta:hover { background: none; box-shadow: inset 0 -1px 0 0 currentColor; }
.site-header.fig-header .nav-toggle,
.site-header.fig-header.scrolled .nav-toggle { color: var(--fig-ink); border-color: var(--fig-line); }
.site-header.fig-header .mobile-nav,
.site-header.fig-header.scrolled .mobile-nav { background: var(--fig-ground); border-top-color: var(--fig-line); }
.site-header.fig-header .mobile-nav a,
.site-header.fig-header.scrolled .mobile-nav a { color: var(--fig-ink); border-bottom-color: var(--fig-line); }
/* The nav is eight items; it needs the room sooner than two items did. */
@media (max-width: 1100px) {
  .site-header.fig-header .nav-links, .site-header.fig-header .nav-cta { display: none; }
  .site-header.fig-header .nav-toggle { display: inline-flex; }
}

/* — frame 1 — */
.fig-hero { background: var(--fig-ground); color: var(--fig-ink); padding-top: var(--fig-header-h); }

/* Banner band: 500/2000 of the frame's width in the export. */
.fig-banner { position: relative; height: clamp(190px, 25vw, 420px); overflow: hidden; }
.fig-banner > img { width: 100%; height: 100%; object-fit: cover; }
/* The measuring grid sits over the photograph in the frame, at roughly a
   fifth of the viewport horizontally and a third of the band vertically. */
.fig-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to right, var(--fig-line) 0 1px, transparent 1px 21vw),
    repeating-linear-gradient(to bottom, var(--fig-line) 0 1px, transparent 1px 33%);
  opacity: 0.4;
}
.fig-banner .fig-lockup {
  position: absolute; z-index: 1; top: 17%; left: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  width: clamp(126px, 11vw, 190px); height: auto;
}

.fig-lede { padding: clamp(40px, 5.5vw, 110px) 0 clamp(48px, 6vw, 120px); }
.fig-lede-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 108px); align-items: start; }
.fig-lede h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(30px, 3.6vw, 52px); line-height: 1.16;
  letter-spacing: -0.005em; color: var(--fig-ink);
}
.fig-lede p { font-size: clamp(16px, 1.32vw, 19px); line-height: 1.62; color: var(--fig-body); }
.fig-lede p + p { margin-top: clamp(20px, 2vw, 32px); }
.fig-btn {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: clamp(28px, 3.2vw, 52px);
  padding: clamp(12px, 1.3vw, 19px) clamp(18px, 1.8vw, 26px);
  border: 1px solid var(--fig-ink); border-radius: 2px;
  font-size: clamp(15px, 1.25vw, 19px); color: var(--fig-ink); text-decoration: none;
}
.fig-btn:hover { background: rgba(255,255,255,0.08); color: var(--fig-ink); }
.fig-btn svg { flex: none; }
@media (max-width: 767px) { .fig-lede-grid { grid-template-columns: 1fr; } }

/* — frame 2: the card straddles the step from the ground to white — */
.fig-newsstrip {
  --step: clamp(56px, 7vw, 101px);
  background: linear-gradient(to bottom, var(--fig-ground) 0 var(--step), #fff var(--step));
  padding-bottom: clamp(40px, 5vw, 88px);
}
.fig-newscard {
  position: relative; display: block;
  padding: clamp(28px, 3.6vw, 52px) clamp(32px, 4.2vw, 60px);
  padding-right: clamp(60px, 7vw, 100px);
  background: #fff; color: var(--fig-card-ink); text-decoration: none;
}
.fig-pill {
  display: inline-block; padding: 9px 18px; border-radius: 999px;
  background: var(--fig-cream); color: var(--fig-card-ink);
  font-size: clamp(13px, 1.1vw, 16px); line-height: 1.2;
}
.fig-newscard h2 {
  margin-top: clamp(18px, 2vw, 30px);
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(20px, 2.05vw, 30px); line-height: 1.28; letter-spacing: -0.005em;
}
.fig-newscard p {
  margin-top: clamp(14px, 1.5vw, 22px);
  font-size: clamp(15px, 1.32vw, 19px); line-height: 1.58; color: var(--fig-card-body);
}
.fig-arrow {
  position: absolute; top: clamp(28px, 3.6vw, 52px); right: clamp(28px, 3.8vw, 56px);
  color: var(--fig-card-ink);
}
a.fig-newscard:hover .fig-arrow { color: var(--accent); }