/* ================================================================
   ENOQI — Homepage Stylesheet
   ================================================================ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --rub:      #970056;
  --rub-deep: #4B002B;
  --rub-mid:  #690040;
  --rub-200:  #C98A9D;
  --rub-100:  #E7C5CB;
  --rub-50:   #F9E9E9;
  --oc:       #167B92;
  --oc-deep:  #1F475B;
  --oc-200:   #79BAC5;
  --oc-100:   #B7E0E4;
  --oc-50:    #DCF0F2;
  --ol:       #789033;
  --ol-deep:  #4F5F26;
  --ol-200:   #B5C77A;
  --ol-100:   #DDE5B5;
  --ol-50:    #F0F5D6;
  --cb:       #928E8B;
  --cb-100:   #C1C0BE;
  --cb-50:    #F3F3F2;
  --bg:       #FFFFFF;
  --bg-soft:  #FAFAF9;
  --bg-tint:  #F7F5F3;
  --alert:    #E8A566;  /* editorial flags, pending-content markers */
  --cream:    #FDFCF9;  /* whitepaper figure ground — must equal the SVGs' own fill */
  --ink:      #1D1D1B;
  --ink-2:    #585855;
  --ink-3:    #8A8884;
  --line:     #E8E8E5;
  --line-2:   #D4D4D0;
  --font-sans: 'Inter', -apple-system, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}

/* ── 2. RESET & BASE ──────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  font-feature-settings: 'kern', 'liga', 'cv11';
}
h1, h2, h3, h4, h5 { margin: 0; font-weight: 500; line-height: 1.18; letter-spacing: -0.01em; color: var(--ink); }
h1 { font-size: 44px; letter-spacing: -0.025em; line-height: 1.1; font-weight: 600; }
h2 { font-size: 36px; letter-spacing: -0.02em; font-weight: 500; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

/* ── 3. LAYOUT ────────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ── 4. SHARED COMPONENTS ─────────────────────────────────────── */

/* Section backgrounds */
.section-soft { background: var(--bg-soft); }
.section-tint  { background: var(--bg-tint); }

/* Eyebrow label */
.eyebrow {
  font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--rub); font-weight: 600;
}

/* Pill badge */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; padding: 5px 11px; border-radius: 999px; font-weight: 500;
}
.pill-rub { background: var(--rub-50); color: var(--rub-deep); }
.pill-dot  { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 20px; border-radius: 8px;
  font-size: 14px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  border: none; transition: all 0.15s;
  line-height: 1; font-family: inherit;
}
.btn-primary            { background: var(--rub); color: #fff; }
.btn-primary:hover      { background: var(--rub-mid); }
.btn-secondary          { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn-secondary:hover    { border-color: var(--ink); background: var(--bg-soft); }
.btn-sm                 { padding: 9px 14px; font-size: 13px; }
.btn-light              { background: #fff; color: var(--rub); }
.btn-light:hover        { background: var(--rub-50); }
.btn-outline-white      { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.btn-outline-white:hover{ border-color: #fff; background: rgba(255,255,255,0.08); }

/* Text link */
.btn-link       { color: var(--rub); font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; transition: color 0.15s; }
.btn-link:hover { color: var(--rub-deep); }
.btn-link svg                 { transition: transform 0.15s; }
.btn-link:hover svg           { transform: translateX(2px); }

/* Mac chrome dots (shared) */
.dot-r { background: #FF5F57; }
.dot-y { background: #FEBC2E; }
.dot-g { background: #28C840; }

/* Photo badge — floating card on images / screenshots */
.photo-badge {
  position: absolute; bottom: 20px; left: 20px;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 12px 16px; border-radius: 10px;
  display: flex; align-items: center; gap: 11px;
  box-shadow: 0 4px 16px rgba(75,0,43,0.12);
}
.photo-badge-icon {
  width: 32px; height: 32px; border-radius: 7px;
  background: var(--rub); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 11px; flex-shrink: 0;
}
.photo-badge-text         { font-size: 11px; color: var(--ink); line-height: 1.35; }
.photo-badge-text strong  { color: var(--rub-deep); }

/* ── 5. NAVIGATION ────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 0.5px solid var(--line);
}
/* Anchor navigation: smooth scroll + offset for the sticky nav.
   Homepage sections first, then subpage sections. */
html { scroll-behavior: smooth; }
#smart, #how-it-works, #pilot,
#channels, #evidence, #request, #bridge,
#survives, #inside, #access { scroll-margin-top: 84px; }
/* /partnerships carries a second sticky bar beneath the menu — the section
   bar (.page-nav, §19) — so its own sections have to clear both. */
#what-we-bring, #project-instances, #roles, #talk { scroll-margin-top: 126px; }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; max-width: 1200px; margin: 0 auto;
}
.logo-link       { display: inline-flex; align-items: center; height: 32px; }
.logo-link svg   { display: block; }
.nav-links {
  display: flex; gap: 32px; list-style: none; padding: 0; margin: 0; align-items: center;
}
.nav-links a            { font-size: 14px; color: var(--ink); font-weight: 500; transition: color 0.15s; }
.nav-links a:hover      { color: var(--rub); }
.nav-links a.highlight  { color: var(--rub); font-weight: 600; position: relative; }
.nav-links a.highlight::after {
  content: ''; position: absolute; bottom: -6px; left: 0; right: 0;
  height: 2px; background: var(--rub); border-radius: 1px;
}
.nav-actions { display: flex; gap: 12px; align-items: center; }
.nav-menu    { display: flex; gap: 32px; align-items: center; }

/* Submenu — one level, opened on hover and on focus. Kept to a plain list
   because the only thing it does is name the materials in the library; a
   mega-menu would promise a breadth the library does not yet have. */
.nav-has-sub { position: relative; }
.nav-has-sub > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-sub-caret   { transition: transform 0.15s; opacity: 0.7; }
.nav-has-sub:hover > a .nav-sub-caret { transform: rotate(180deg); }
.nav-sub {
  position: absolute; top: 100%; left: -14px;
  min-width: 208px; margin: 0; padding: 7px 0;
  list-style: none; background: #fff;
  border: 0.5px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(75,0,43,0.10);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
/* The gap between the link and the panel would drop the hover halfway across
   it, so the trigger's padding is extended upward into the nav's own padding
   rather than the panel being moved flush. */
.nav-sub::before {
  content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.nav-has-sub:hover > .nav-sub,
.nav-has-sub:focus-within > .nav-sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-sub a {
  display: block; padding: 8px 16px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
}
.nav-sub a:hover            { color: var(--rub); background: var(--rub-50); }
.nav-sub a[aria-current]    { color: var(--rub); }
/* Hamburger toggle — hidden on desktop, revealed in the mobile breakpoint */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 10px; margin: -8px -8px -8px 0;
  background: none; border: none; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 100%; height: 2px; border-radius: 2px;
  background: var(--ink); transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 6. HERO ──────────────────────────────────────────────────── */
.hero      { padding: 56px 0 72px; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.hero h1        { margin: 14px 0 16px; color: var(--ink); }
.hero h1 .accent{ color: var(--rub); display: inline; }
.hero-lede      { font-size: 17px; color: var(--ink-2); line-height: 1.5; max-width: 520px; margin-bottom: 24px; }
.hero-cta-row   { display: flex; gap: 12px; }
.hero-meta      {
  display: flex; gap: 20px; align-items: center;
  margin-top: 20px; padding-top: 18px;
  border-top: 0.5px solid var(--line); max-width: 520px;
}
.hero-meta-item { font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 7px; }

.hero-photo {
  position: relative; border-radius: 16px; overflow: hidden;
  aspect-ratio: 4/5; background: var(--cb-50); z-index: 1;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--cb-50) 0%, var(--rub-50) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--rub); position: relative;
}
.hero-photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(75,0,43,0.18) 100%);
  pointer-events: none;
}

/* Hero photo badge is slightly larger than the base */
.hero-photo .photo-badge       { bottom: 24px; left: 24px; padding: 14px 18px; border-radius: 12px; gap: 12px; box-shadow: 0 4px 20px rgba(75,0,43,0.12); }
.hero-photo .photo-badge-icon  { width: 36px; height: 36px; border-radius: 8px; font-size: 14px; }

.hero-okolik {
  position: absolute; bottom: -80px; right: -80px;
  width: 320px; height: 320px; color: var(--rub-100); opacity: 0.6;
  pointer-events: none; z-index: 0; transform: scaleY(-1);
}

/* ── 7. TRUST STRIP ───────────────────────────────────────────── */
.trust      { background: var(--bg); padding: 18px 0 24px; }
.trust-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.trust-cell {
  background: var(--cb-50); border-radius: 10px; padding: 12px 14px;
  text-align: center; color: var(--rub);
  font-size: 12px; font-weight: 600; line-height: 1.35; letter-spacing: 0.01em;
}
.trust-cell .trust-sub {
  display: block; font-size: 10px; font-weight: 500; color: var(--cb);
  letter-spacing: 0.04em; text-transform: uppercase; margin-top: 3px;
}

/* ── 8. GOING FIRST ───────────────────────────────────────────── */
.going-first { position: relative; padding: 48px 0 56px; overflow: hidden; }
.going-first-bg-okolik {
  position: absolute; right: -120px; top: 180px;
  width: 460px; height: 460px; color: var(--rub-100);
  opacity: 0.45; pointer-events: none; transform: scaleX(-1); z-index: 0;
}
.going-first .container { position: relative; z-index: 1; }
.going-first-lead        { max-width: 760px; margin: 0 auto 64px; text-align: left; }
.going-first-setup       { font-size: 16px; color: var(--ink-3); font-weight: 400; line-height: 1.5; margin: 10px 0 12px; }
.going-first-lead h2     { margin: 0; font-size: 34px; line-height: 1.15; }
.going-first-body        { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; }
.going-first-points p           { font-size: 15px; color: var(--ink-2); line-height: 1.55; margin-bottom: 12px; }
.going-first-points p:last-child{ margin-bottom: 0; }
.going-first-points strong      { color: var(--ink); font-weight: 600; }
.going-first-cta-row            { margin-top: 24px; display: flex; gap: 12px; align-items: center; }

/* App screenshot frame */
.app-screenshot {
  position: relative; border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(75,0,43,0.10), 0 2px 6px rgba(75,0,43,0.05);
  background: #fff; border: 0.5px solid var(--line); z-index: 2;
}
.app-screenshot-chrome {
  background: #F3F3F2; border-bottom: 0.5px solid var(--line);
  padding: 10px 16px; display: flex; align-items: center; gap: 8px;
}
.app-screenshot-chrome .dot { width: 11px; height: 11px; border-radius: 999px; }
.app-screenshot-chrome .url { flex: 1; text-align: center; font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); }
.app-screenshot-placeholder {
  width: 100%; aspect-ratio: 16/10;
  background: linear-gradient(135deg, #FAFAF9 0%, var(--cb-50) 100%);
  display: flex; align-items: center; justify-content: center; color: var(--rub);
}
.app-screenshot-placeholder-inner { text-align: center; padding: 40px; }
.app-screenshot-placeholder-icon  { width: 56px; height: 56px; margin: 0 auto 16px; }
.app-screenshot-img { display: block; width: 100%; height: auto; }

/* ── 9. HOW ENOQI ANSWERS IT ──────────────────────────────────── */
.how-enoqi { background: var(--bg); padding: 56px 0 64px; position: relative; overflow: hidden; }
.how-enoqi-bg-okolik {
  position: absolute; left: -120px; top: 60px;
  width: 380px; height: 380px; color: var(--rub-100);
  opacity: 0.35; pointer-events: none; z-index: 0;
}
.how-enoqi .container   { position: relative; z-index: 1; }
.how-enoqi-grid         { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.how-enoqi-text         { max-width: 440px; }
.how-enoqi-text h2      { margin: 10px 0 16px; font-size: 30px; line-height: 1.2; }
.how-enoqi-text h2 .accent { color: var(--rub); }
.how-enoqi-text .lede   { font-size: 15px; color: var(--ink-2); line-height: 1.55; margin-bottom: 20px; }
.how-enoqi-cta          { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 18px; border-top: 0.5px solid var(--line); }

/* Dashboard mockup */
.dashboard {
  position: relative; background: #fff; border-radius: 14px;
  border: 0.5px solid var(--line);
  box-shadow: 0 12px 40px rgba(75,0,43,0.10), 0 2px 6px rgba(75,0,43,0.05);
  overflow: hidden;
}
.dashboard-chrome {
  background: #F3F3F2; border-bottom: 0.5px solid var(--line);
  padding: 10px 16px; display: flex; align-items: center; gap: 8px;
}
.dashboard-chrome .dot { width: 11px; height: 11px; border-radius: 999px; }
.dashboard-chrome .url { flex: 1; text-align: center; font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); }
.dashboard-body         { padding: 22px; }
.dashboard-header       { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 0.5px solid var(--line); }
.dashboard-header-left  { display: flex; align-items: center; gap: 12px; }
.dashboard-org-name     { font-size: 14px; font-weight: 600; color: var(--ink); }
.dashboard-org-meta     { font-size: 11px; color: var(--ink-3); }
.dashboard-period       { font-size: 11px; color: var(--ink-3); font-family: var(--font-mono); }
.dashboard-main         { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; margin-bottom: 16px; }

.smart-ring             { position: relative; width: 100px; height: 100px; flex-shrink: 0; }
.smart-ring svg         { width: 100%; height: 100%; }
.smart-ring-inner       { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }
.smart-ring-grade       { font-size: 30px; font-weight: 600; color: var(--rub-deep); line-height: 1; letter-spacing: -0.02em; }
.smart-ring-label       { font-size: 10px; color: var(--ink-3); margin-top: 4px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }

.kpi-strip              { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kpi-label              { font-size: 10px; color: var(--ink-3); margin-bottom: 4px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }
.kpi-value              { font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.kpi-value sub          { font-size: 11px; font-weight: 500; }
.kpi-delta              { font-size: 11px; margin-top: 2px; display: inline-flex; align-items: center; gap: 3px; }
.kpi-delta-up           { color: var(--ol-deep); }
.kpi-delta-down         { color: var(--rub); }

.dashboard-chart        { background: var(--bg-tint); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; }
.dashboard-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dashboard-chart-title  { font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }
.dashboard-chart-status { font-size: 11px; color: var(--ol-deep); font-weight: 500; }

.dashboard-next         { background: var(--rub-50); border-radius: 8px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dashboard-next-label   { font-size: 9px; color: var(--rub); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 3px; }
.dashboard-next-text    { font-size: 12.5px; color: var(--rub-deep); line-height: 1.4; }
.dashboard-next-cta     { background: var(--rub); color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 500; cursor: pointer; white-space: nowrap; font-family: inherit; }

/* Dashboard photo badge is on the right side with Ocean accent */
.dashboard .photo-badge       { bottom: 20px; left: auto; right: 20px; z-index: 3; }
.dashboard .photo-badge-icon  { background: var(--oc); font-size: 11px; }
.dashboard .photo-badge-text strong { color: var(--oc-deep); }

/* ── 10. WHAT LEADING LOOKS LIKE ──────────────────────────────── */
.leading        { background: var(--bg-soft); padding: 56px 0 64px; position: relative; overflow: hidden; }
.leading-header { max-width: 720px; margin: 0 auto 28px; text-align: center; }
.leading-header h2          { margin: 8px 0 12px; font-size: 30px; line-height: 1.2; }
.leading-header h2 .accent  { color: var(--rub); }
.leading-header .lede       { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.leading-grid               { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; align-items: stretch; }

.lead-card {
  background: #fff; border: 0.5px solid var(--line); border-radius: 14px;
  padding: 18px 20px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  position: relative; transition: border-color 0.15s, box-shadow 0.15s;
}
.lead-card:hover          { border-color: var(--rub-100); box-shadow: 0 4px 16px rgba(75,0,43,0.06); }
.lead-card-featured       { background: var(--rub-50); border: 1px solid var(--rub-100); overflow: hidden; padding-top: 4px; }
.lead-card-featured h3    { color: var(--rub-deep); }
.lead-card-featured .lead-card-text   { color: var(--rub-deep); opacity: 0.88; }
.lead-card-featured .lead-card-icon   { background: #fff; color: var(--rub); position: relative; z-index: 2; box-shadow: 0 0 0 4px var(--rub-50); margin-top: -36px; }
.lead-card-featured .lead-card-number { color: var(--rub); }
.lead-card-featured > *               { position: relative; z-index: 1; }
.lead-card-bg {
  position: absolute; top: -46px; left: 50%;
  width: 180px; height: 180px; transform: translateX(-50%) scaleY(-1);
  color: var(--rub); opacity: 0.40; pointer-events: none; z-index: 0;
}
.lead-card-icon   { width: 52px; height: 52px; border-radius: 12px; background: var(--rub-50); color: var(--rub); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.lead-card-number { font-size: 10px; letter-spacing: 0.08em; color: var(--cb); font-weight: 600; text-transform: uppercase; margin-bottom: 6px; }
.lead-card h3     { font-size: 18px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.01em; line-height: 1.3; }
.lead-card-text   { font-size: 13px; color: var(--ink-2); line-height: 1.5; flex-grow: 1; }

.cta-block          { background: #fff; border: 0.5px solid var(--line); border-radius: 14px; padding: 22px 30px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.cta-block h3       { font-size: 22px; font-weight: 500; margin-bottom: 3px; letter-spacing: -0.01em; }
.cta-block p        { font-size: 14px; color: var(--ink-2); }
.cta-block-buttons  { display: flex; gap: 12px; flex-shrink: 0; }

/* ── 11. SMART SCORE ──────────────────────────────────────────── */
.smart-section { background: var(--oc-50); padding: 56px 0 64px; position: relative; overflow: hidden; }
.smart-section .eyebrow   { color: var(--oc); }
.smart-section .btn-link  { color: var(--oc); }
.smart-section .btn-link:hover { color: var(--oc-deep); }
.smart-bg-okolik {
  position: absolute; top: -80px; right: -100px;
  width: 380px; height: 380px; color: var(--oc-200); opacity: 0.35;
  pointer-events: none; z-index: 0; transform: scaleX(-1);
}
.smart-section .container { position: relative; z-index: 1; }
.smart-grid   { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.smart-text   { max-width: 460px; }
.smart-text h2          { margin: 10px 0 14px; color: var(--oc-deep); font-size: 30px; line-height: 1.2; }
.smart-text h2 .accent  { color: var(--oc); }
.smart-text .lede           { font-size: 15px; color: var(--oc-deep); opacity: 0.88; line-height: 1.55; margin-bottom: 16px; }
.smart-text .lede-secondary { font-size: 14px; color: var(--oc-deep); opacity: 0.75; line-height: 1.55; margin-bottom: 20px; }
.smart-text-cta { padding-top: 16px; border-top: 0.5px solid var(--oc-200); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

.smart-viz {
  background: #fff; border: 0.5px solid var(--oc-100); border-radius: 16px; padding: 24px;
  box-shadow: 0 8px 32px rgba(31,71,91,0.08), 0 2px 6px rgba(31,71,91,0.04);
}
.smart-viz-header         { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; }
.smart-viz-header-label   { font-size: 13px; color: var(--oc-deep); font-weight: 500; }
.smart-viz-header-score   { font-size: 30px; color: var(--oc-deep); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.smart-viz-header-grade   { font-size: 16px; color: var(--oc); font-weight: 500; }
.smart-viz-status         { font-size: 12.5px; color: var(--oc-deep); opacity: 0.78; margin-bottom: 18px; line-height: 1.5; }
.smart-viz-body           { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; margin-bottom: 18px; }
.radar                    { width: 200px; height: 200px; flex-shrink: 0; }

.axis-row      { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 0.5px solid var(--oc-100); font-size: 12.5px; }
.axis-row:last-child { border-bottom: none; }
.axis-letter   { font-weight: 600; color: var(--oc-deep); font-size: 13px; }
.axis-name     { color: var(--oc-deep); opacity: 0.78; }
.axis-value    { color: var(--oc-deep); font-weight: 600; font-variant-numeric: tabular-nums; }

.grade-ladder  { margin-top: 8px; }
.grade-bar     { display: grid; grid-template-columns: repeat(7, 1fr); height: 28px; border-radius: 6px; overflow: hidden; border: 0.5px solid var(--oc-100); }
.grade-cell    { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; }
.grade-current { box-shadow: inset 0 0 0 2px var(--oc-deep); position: relative; z-index: 2; }
.grade-tier-row{ display: grid; grid-template-columns: 2fr 2fr 2fr 1fr; margin-top: 8px; font-size: 9px; color: var(--oc-deep); opacity: 0.65; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }

.smart-unlocks       { margin-top: 14px; background: var(--oc-50); border-radius: 8px; padding: 12px 14px; }
.smart-unlocks-label { font-size: 10px; color: var(--oc); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.smart-unlocks-text  { font-size: 12.5px; color: var(--oc-deep); line-height: 1.5; }

/* ── 12. HOW IT WORKS ─────────────────────────────────────────── */
.how-it-works { background: var(--bg); padding: 56px 0 64px; position: relative; overflow: hidden; }
.how-header   { max-width: 720px; margin: 0 auto 28px; text-align: center; }
.how-header h2          { margin: 8px 0 12px; font-size: 30px; line-height: 1.2; }
.how-header h2 .accent  { color: var(--rub); }
.how-header .lede       { font-size: 15px; color: var(--ink-2); line-height: 1.5; }

.how-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.step-card  {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 20px 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  position: relative; transition: border-color 0.15s, box-shadow 0.15s;
}
.step-01        { border-color: var(--rub-100); }
.step-01:hover  { border-color: var(--rub-200); box-shadow: 0 4px 16px rgba(75,0,43,0.06); }
.step-02        { border-color: var(--oc-100); }
.step-02:hover  { border-color: var(--oc-200); box-shadow: 0 4px 16px rgba(31,71,91,0.06); }
.step-03        { border-color: var(--ol-100); }
.step-03:hover  { border-color: var(--ol-200); box-shadow: 0 4px 16px rgba(79,95,38,0.06); }

.step-icon  { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.step-01 .step-icon { background: var(--rub-50); color: var(--rub); }
.step-02 .step-icon { background: var(--oc-50);  color: var(--oc); }
.step-03 .step-icon { background: var(--ol-50);  color: var(--ol-deep); }

.step-number { font-size: 10px; letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; margin-bottom: 6px; }
.step-01 .step-number { color: var(--rub); }
.step-02 .step-number { color: var(--oc); }
.step-03 .step-number { color: var(--ol-deep); }

.step-card h3   { font-size: 17px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; line-height: 1.3; }
.step-01 h3     { color: var(--rub-deep); }
.step-02 h3     { color: var(--oc-deep); }
.step-03 h3     { color: var(--ol-deep); }
.step-lead      { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.3; margin-bottom: 10px; }
.step-01 .step-lead { color: var(--rub); }
.step-02 .step-lead { color: var(--oc); }
.step-03 .step-lead { color: var(--ol-deep); }
.step-text      { font-size: 13px; color: var(--ink-2); line-height: 1.5; flex-grow: 1; }
.step-time      { margin-top: 12px; font-size: 11px; color: var(--ink-3); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; background: var(--cb-50); border-radius: 999px; }

.how-footer      { margin-top: 24px; text-align: center; }
.how-footer-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--bg-tint); border: 0.5px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--ink-2); }
.how-footer-pill strong { color: var(--ink); }

/* ── 13. BUILT FOR ────────────────────────────────────────────── */
.built-for       { background: var(--bg-soft); padding: 40px 0 44px; position: relative; overflow: hidden; }
.built-for-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; }
.built-for-label { display: flex; flex-direction: column; gap: 4px; }
.built-for-label h3         { font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; }
.built-for-label h3 .accent { color: var(--rub); }
.built-for-chips{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.role-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid; transition: transform 0.15s; text-decoration: none; }
/* The pointer and the hover lift sit on the anchor, not the chip: the chips
   are spans while the per-role pages are unbuilt, and a label that lifts
   under the cursor promises a destination it does not have. Restoring the
   links restores the affordance with them. */
a.role-chip           { cursor: pointer; }
a.role-chip:hover     { transform: translateY(-1px); }
.role-chip-dot        { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.role-chip-buyer      { background: var(--rub-50); color: var(--rub);    border-color: var(--rub-100); }
.role-chip-supplier   { background: var(--oc-50);  color: var(--oc);     border-color: var(--oc-100); }
.role-chip-advisor    { background: var(--ol-50);  color: var(--ol-deep); border-color: var(--ol-100); }
.role-chip-leader     { background: var(--cb-50);  color: var(--ink-2);  border-color: var(--cb-100); }

.built-for-link { color: var(--rub); font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; transition: color 0.15s; }
.built-for-link:hover     { color: var(--rub-deep); }
.built-for-link svg       { transition: transform 0.15s; }
.built-for-link:hover svg { transform: translateX(2px); }

/* ── 14. PILOT PROGRAMME ──────────────────────────────────────── */
.pilot   { background: var(--rub); color: #fff; padding: 56px 0 64px; position: relative; overflow: hidden; }
.pilot h2{ color: #fff; font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; margin-bottom: 14px; }
.pilot .eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; padding: 4px 10px; border-radius: 999px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: rgba(255,255,255,0.18); color: #fff; margin-bottom: 12px;
}
.pilot .eyebrow .dot { width: 5px; height: 5px; border-radius: 999px; background: #fff; }
.pilot .lede         { font-size: 16px; color: rgba(255,255,255,0.9); line-height: 1.5; margin-bottom: 24px; max-width: 520px; }
/* Lift content above the decorative mark, as the other sections do */
.pilot .container    { position: relative; z-index: 1; }

.pilot-grid          { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; position: relative; z-index: 1; }
.pilot-points        { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 24px; }
.pilot-point         { border-left: 0.5px solid rgba(255,255,255,0.2); padding-left: 14px; }
.pilot-point-num     { font-size: 22px; color: rgba(255,255,255,0.7); font-weight: 300; line-height: 1; margin-bottom: 6px; letter-spacing: -0.02em; }
.pilot-point h5      { font-size: 13px; color: #fff; font-weight: 600; margin-bottom: 4px; letter-spacing: -0.01em; }
.pilot-point p       { font-size: 12px; color: rgba(255,255,255,0.78); line-height: 1.45; }
.pilot-criteria      { font-size: 12.5px; color: rgba(255,255,255,0.7); line-height: 1.5; margin-bottom: 18px; }
.pilot-cta-row       { display: flex; gap: 12px; align-items: center; }

.pilot-photo-wrap    { position: relative; aspect-ratio: 4/5; }
.pilot-okolik        { position: absolute; top: -80px; left: -150px; width: 320px; height: 320px; color: var(--rub-200); opacity: 0.5; pointer-events: none; z-index: 0; transform: rotate(-30deg); }
.pilot-photo         { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 32px rgba(75,0,43,0.18); border: 0.5px solid rgba(255,255,255,0.18); }
.pilot-photo img     { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Pilot photo badge has a stronger shadow */
.pilot-photo-wrap .photo-badge       { box-shadow: 0 4px 16px rgba(75,0,43,0.2); z-index: 2; }
.pilot-photo-wrap .photo-badge-icon  { letter-spacing: 0.04em; }

/* ── 15. KELVIN MANIFEST ──────────────────────────────────────── */
.kelvin-section  { background: var(--bg); padding: 40px 0 48px; position: relative; overflow: hidden; }
.kelvin-manifest { text-align: center; max-width: 680px; margin: 0 auto; padding: 0 32px; position: relative; }
.kelvin-manifest-mark   { font-size: 76px; line-height: 0.5; color: var(--rub-100); font-family: Georgia, 'Times New Roman', serif; opacity: 0.85; margin-bottom: -4px; user-select: none; pointer-events: none; }
.kelvin-manifest-text   { font-size: 28px; color: var(--rub-deep); line-height: 1.25; font-style: italic; font-weight: 400; letter-spacing: -0.015em; margin-bottom: 14px; }
.kelvin-manifest-second { color: var(--rub); font-weight: 500; }
.kelvin-manifest-cite   { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 22px; }
.kelvin-line            { flex-shrink: 0; width: 40px; height: 1px; background: var(--rub-200); opacity: 0.7; }
.kelvin-cite-text       { font-size: 12px; color: var(--ink-2); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.kelvin-cite-years      { text-transform: none; letter-spacing: 0.02em; font-weight: 400; color: var(--ink-3); }
.kelvin-methodology-link{
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--rub); font-weight: 500; font-size: 14px; transition: color 0.15s;
  padding: 8px 16px; border: 1px solid var(--rub-100); border-radius: 999px; background: var(--rub-50);
}
.kelvin-methodology-link:hover      { background: var(--rub); color: #fff; border-color: var(--rub); }
.kelvin-methodology-link svg        { transition: transform 0.15s; }
.kelvin-methodology-link:hover svg  { transform: translateX(2px); }

/* ── 16. FINAL CTA ────────────────────────────────────────────── */
.final-cta          { background: var(--rub-deep); color: #fff; padding: 56px 0 64px; position: relative; overflow: hidden; }
.final-cta-okolik   { position: absolute; color: var(--oc); opacity: 0.18; pointer-events: none; z-index: 0; }
.final-cta-okolik-tl{ top: -80px; left: -100px; width: 280px; height: 280px; }
.final-cta-okolik-br{ bottom: -80px; right: -100px; width: 280px; height: 280px; transform: scaleX(-1) scaleY(-1); }
.final-cta .container { position: relative; z-index: 1; }

.final-cta-header   { max-width: 720px; margin: 0 auto 32px; text-align: center; }
.final-cta-eyebrow  { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.65); font-weight: 600; margin-bottom: 10px; display: block; }
.final-cta-header h2          { color: #fff; font-size: 30px; line-height: 1.2; margin-bottom: 12px; font-weight: 500; }
.final-cta-header h2 .accent  { color: var(--rub-200); }
.final-cta-header p           { font-size: 15px; color: rgba(255,255,255,0.78); line-height: 1.5; }

.cta-grid     { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cta-card     {
  background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 14px; padding: 24px 22px 22px; display: flex; flex-direction: column;
  transition: background 0.15s, border-color 0.15s, transform 0.15s; position: relative;
}
.cta-card:hover        { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); transform: translateY(-2px); }
.cta-card-featured     { background: var(--rub); border-color: var(--rub-200); }
.cta-card-featured:hover{ background: var(--rub-mid); border-color: var(--rub-100); }

.cta-meta      { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; padding: 3px 9px; border-radius: 999px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.1); margin-bottom: 16px; align-self: flex-start; }
.cta-meta .dot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; }
.cta-card-featured .cta-meta { background: rgba(255,255,255,0.18); color: #fff; }
.cta-card h3   { font-size: 19px; color: #fff; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; line-height: 1.25; }
.cta-text      { font-size: 13.5px; color: rgba(255,255,255,0.75); line-height: 1.5; margin-bottom: 18px; flex-grow: 1; }

.cta-btn       { background: #fff; color: var(--rub-deep); padding: 10px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; transition: background 0.15s; }
.cta-btn:hover { background: var(--rub-50); }
.cta-btn svg               { transition: transform 0.15s; }
.cta-btn:hover svg         { transform: translateX(2px); }
.cta-card-featured .cta-btn       { background: #fff; color: var(--rub); }
.cta-card-featured .cta-btn:hover { background: var(--rub-50); }

/* ── 17. CONTACT FORM ─────────────────────────────────────────── */
.contact-section { background: var(--bg-soft); padding: 56px 0 64px; position: relative; overflow: hidden; }
.contact-header  { max-width: 720px; margin: 0 auto 32px; text-align: center; }
.contact-header h2          { margin: 8px 0 12px; font-size: 30px; line-height: 1.2; }
.contact-header h2 .accent  { color: var(--rub); }
.contact-header .lede       { font-size: 15px; color: var(--ink-2); line-height: 1.5; }

.contact-grid   { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
.contact-form   { background: #fff; border: 0.5px solid var(--line); border-radius: 14px; padding: 32px 32px 28px; }
.form-row       { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-field     { margin-bottom: 16px; }
.form-field-full{ grid-column: span 2; }
.form-label     { display: block; font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 6px; letter-spacing: 0.02em; }
.form-label .required { color: var(--rub); margin-left: 2px; }

.form-input, .form-select, .form-textarea {
  width: 100%; padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 8px; font-family: inherit; font-size: 14px; color: var(--ink);
  background: #fff; transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--rub); box-shadow: 0 0 0 3px var(--rub-50);
}
.form-textarea  { resize: vertical; min-height: 110px; font-family: inherit; }
.form-honeypot  { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.form-consent   { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 20px; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.form-consent input[type="checkbox"] { margin-top: 2px; cursor: pointer; accent-color: var(--rub); }
.form-consent label { cursor: pointer; }
.form-consent a     { color: var(--rub); text-decoration: underline; }

.form-submit    { background: var(--rub); color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 500; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; transition: background 0.15s; }
.form-submit:hover          { background: var(--rub-mid); }
.form-submit svg            { transition: transform 0.15s; }
.form-submit:hover svg      { transform: translateX(2px); }

.contact-info   { background: #fff; border: 0.5px solid var(--line); border-radius: 14px; padding: 28px 28px 24px; position: sticky; top: 88px; }
.info-block     { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 0.5px solid var(--line); }
.info-block:last-child    { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.info-block-label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rub); font-weight: 600; margin-bottom: 8px; }
.info-block h4  { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 6px; line-height: 1.3; }
.info-block p   { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.info-block a   { color: var(--rub); font-weight: 500; }
.info-block a:hover { color: var(--rub-deep); }

.email-reveal   { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; background: var(--rub-50); color: var(--rub); border: 1px solid var(--rub-100); border-radius: 999px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.email-reveal:hover { background: var(--rub); color: #fff; border-color: var(--rub); }

/* ── 17b. JOIN / CONTACT (consolidated, on dark pilot section) ─── */
.pilot-join .pilot-cta-row { flex-wrap: wrap; }

.join-contact   { position: relative; z-index: 1; margin-top: 52px; padding-top: 40px; border-top: 0.5px solid rgba(255,255,255,0.16); }
.join-contact-head     { max-width: 640px; margin-bottom: 22px; }
.join-contact-head h3  { color: #fff; font-size: 22px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; margin-bottom: 10px; }
.join-contact-head p   { font-size: 14.5px; color: rgba(255,255,255,0.8); line-height: 1.55; }

.join-facts     { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 14px 44px; }
.join-facts li  { font-size: 13.5px; color: rgba(255,255,255,0.85); display: inline-flex; align-items: center; gap: 10px; line-height: 1.4; }
.join-fact-label{ font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rub-200); font-weight: 600; }
.join-facts .email-reveal       { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.32); }
.join-facts .email-reveal:hover { background: #fff; color: var(--rub); border-color: #fff; }

.join-form-summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.4);
  background: transparent; color: #fff; font-size: 13.5px; font-weight: 500; transition: all 0.15s;
}
.join-form-summary::-webkit-details-marker { display: none; }
.join-form-summary::marker      { content: ""; }
.join-form-summary:hover        { background: rgba(255,255,255,0.08); border-color: #fff; }
.join-form-summary svg          { transition: transform 0.2s; }
.join-form[open] .join-form-summary     { border-color: #fff; background: rgba(255,255,255,0.08); }
.join-form[open] .join-form-summary svg { transform: rotate(180deg); }
.join-form-body { margin-top: 22px; max-width: 760px; }
.join-form-body .contact-form { background: #fff; }

/* ── 18. FOOTER ───────────────────────────────────────────────── */
.footer { background: var(--ink); color: rgba(255,255,255,0.78); padding: 56px 0 28px; font-size: 13.5px; }
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px;
  padding-bottom: 36px; border-bottom: 0.5px solid rgba(255,255,255,0.12);
}
.footer-logo        { height: 28px; width: 116px; margin: 0 0 18px 0; display: block; }
.footer-tagline     { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.5; margin-bottom: 20px; max-width: 280px; }
.footer-contact     { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.6; }
.footer-contact-link{ display: inline-flex; align-items: center; gap: 4px; color: #fff; padding: 6px 12px; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; transition: all 0.15s; }
.footer-contact-link:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }

.footer-col h5  { font-size: 11px; color: rgba(255,255,255,0.95); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 14px; }
.footer-col ul  { list-style: none; padding: 0; margin: 0; }
.footer-col li  { margin-bottom: 8px; }
.footer-col a   { font-size: 13px; color: rgba(255,255,255,0.6); transition: color 0.15s; }
.footer-col a:hover { color: #fff; }

.footer-bottom  { padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 12px; color: rgba(255,255,255,0.45); }
.footer-bottom-left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-bottom-left a       { color: rgba(255,255,255,0.6); transition: color 0.15s; }
.footer-bottom-left a:hover { color: #fff; }

.footer-lang    { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.45); }
.footer-lang a  { color: rgba(255,255,255,0.6); padding: 2px 6px; border-radius: 4px; transition: all 0.15s; }
.footer-lang a.active       { color: #fff; background: rgba(255,255,255,0.1); }
.footer-lang a:hover:not(.active) { color: #fff; }

.footer-social  { display: inline-flex; align-items: center; gap: 12px; }
.footer-social a{ color: rgba(255,255,255,0.55); transition: color 0.15s; display: inline-flex; align-items: center; justify-content: center; }
.footer-social a:hover { color: #fff; }

.footer-trust   { margin-top: 18px; padding-top: 18px; border-top: 0.5px solid rgba(255,255,255,0.08); display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 11px; color: rgba(255,255,255,0.4); }
.footer-trust-item     { display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.02em; }
.footer-trust-item svg { flex-shrink: 0; }

/* ── 19. SUBPAGE COMPONENTS ───────────────────────────────────────
   Generic primitives for pages beyond the one-pager (/partnerships
   and its per-call extensions, future persona pages). Nothing here is
   page-specific: subpages are assembled from these plus the section
   components above. Several of those (.trust strip, .leading-grid /
   .lead-card, .smart-section / .smart-viz) are reused directly, with
   only the variants below layered on top.
   ───────────────────────────────────────────────────────────────── */

/* Page section bar — a slim second row under the site menu, listing the
   sections of the page it sits on.

   The menu above it is the site menu and is identical on every page, so a
   long subpage needs somewhere else to put its own anchors. This is it: it
   sticks directly beneath the menu, marks whichever section is in view, and
   stays out of the way otherwise. On narrow screens it collapses to a single
   horizontally scrollable line rather than folding into the hamburger, which
   already holds the site menu. Per-call pages reuse it with their own links.

   `top` must equal the height of .nav — 68px here, 60px once .nav-inner
   loses padding at 560px — and the sections it points at need a matching
   scroll-margin-top (§5). */
.page-nav {
  position: sticky; top: 68px; z-index: 45;
  background: rgba(250,250,249,0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 0.5px solid var(--line);
}
.page-nav-inner {
  display: flex; align-items: center; gap: 26px;
  padding: 0 32px; max-width: 1200px; margin: 0 auto;
}
.page-nav-label {
  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--cb); flex-shrink: 0;
}
.page-nav-links {
  display: flex; align-items: center; gap: 26px;
  list-style: none; margin: 0; padding: 0;
  flex: 1; min-width: 0; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.page-nav-links::-webkit-scrollbar { display: none; }
.page-nav-links a {
  display: inline-block; white-space: nowrap;
  padding: 13px 0 11px; font-size: 13px; font-weight: 500; color: var(--ink-2);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.page-nav-links a:hover        { color: var(--ink); }
.page-nav-links a.is-current   { color: var(--rub); border-bottom-color: var(--rub); }
.page-nav-aside {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--cb);
  flex-shrink: 0; transition: color 0.15s;
}
.page-nav-aside:hover { color: var(--rub); }

/* The label is the first thing to go when the row gets tight, then the PDF
   link; the section links themselves never fold away. */
@media (max-width: 860px) {
  .page-nav-inner { gap: 18px; }
  .page-nav-label { display: none; }
}
@media (max-width: 560px) {
  .page-nav        { top: 60px; }              /* .nav-inner loses padding here */
  .page-nav-inner  { padding: 0 20px; gap: 16px; }
  .page-nav-links  { gap: 20px; }
  .page-nav-links a { font-size: 12.5px; padding: 11px 0 9px; }
  .page-nav-aside  { display: none; }
  #what-we-bring, #project-instances, #roles, #talk { scroll-margin-top: 112px; }
}

/* Section padding + left-aligned section head */
.section-pad             { padding: 56px 0 64px; }
.section-head            { max-width: 760px; margin-bottom: 30px; }
.section-head h2         { margin: 10px 0 14px; font-size: 30px; line-height: 1.2; }
.section-head h2 .accent { color: var(--rub); }
.section-head h3         { font-size: 21px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.01em; }
.section-head .lede      { font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.measure                 { max-width: 640px; }

/* A divided sub-block inside a section */
.subblock { margin-top: 44px; padding-top: 36px; border-top: 0.5px solid var(--line); }

/* Fact band — variant of the trust strip (§7): four columns,
   left-aligned, monospaced values, label above the value.
   Call pages inherit this block unchanged. */
.trust-facts                { background: var(--bg-tint); padding: 26px 0 30px; border-top: 0.5px solid var(--line); border-bottom: 0.5px solid var(--line); }
.trust-facts .trust-grid    { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.trust-facts .trust-cell    {
  background: var(--bg); border: 0.5px solid var(--line); padding: 14px 16px 15px;
  text-align: left; color: var(--ink);
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 400; line-height: 1.5;
}
.trust-facts .trust-cell em { font-style: normal; color: var(--rub); font-weight: 500; }
.trust-facts .trust-sub     { margin: 0 0 6px; font-family: var(--font-sans); }
.trust-cell-wide            { grid-column: span 2; }

/* Left-aligned, text-led variant of the lead card (§10), two per row */
.leading-grid-2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; }
.lead-card-left { text-align: left; align-items: stretch; padding: 22px 24px 24px; }
.lead-card-left .lead-card-number { font-family: var(--font-mono); letter-spacing: 0.06em; }
.lead-card-wide { grid-column: span 2; }
.lead-card-wide .lead-card-text { max-width: 860px; }

/* A card in a hero column clears the decorative mark, the same way
   .hero-photo does (§6) — otherwise .hero-okolik paints over it. */
.hero .smart-viz { position: relative; z-index: 1; }

/* Checked list — summarises an offer inside a card */
.check-list    { list-style: none; margin: 0; padding: 0; }
.check-list li {
  display: grid; grid-template-columns: 16px 1fr; gap: 11px;
  padding: 11px 0; border-bottom: 0.5px solid var(--line);
  font-size: 13.5px; color: var(--ink-2); line-height: 1.45;
}
.check-list li:last-child { border-bottom: none; padding-bottom: 0; }
.check-list strong { color: var(--ink); font-weight: 600; }
.check-list svg    { color: var(--ol-deep); margin-top: 3px; }

/* Definition rows — term on the left, what it means on the right */
.def-list           { border-top: 0.5px solid var(--line-2); }
.def-row            { display: grid; grid-template-columns: 280px 1fr; gap: 32px; padding: 18px 0; border-bottom: 0.5px solid var(--line); align-items: baseline; }
.def-term           { font-size: 15px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.def-term .pill-dot { background: var(--rub); flex-shrink: 0; }
.def-row p          { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.def-note           { margin-top: 20px; font-size: 13px; color: var(--ink-3); line-height: 1.55; max-width: 760px; }

/* Key points — rule-marked short notes, typically under a diagram */
.keypoint-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.keypoint     { border-left: 2px solid var(--line-2); padding-left: 14px; }
.keypoint h4  { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.keypoint p   { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* Diagram figures — the frame comes from .smart-viz (§11); these
   rules are the inline-SVG plumbing and the caption. */
.diagram          { margin: 0; }
.diagram svg      { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.diagram .d-mono  { font-family: var(--font-mono); }
.diagram-cap      { margin-top: 14px; padding-top: 12px; border-top: 0.5px solid var(--line); font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }
.diagram-scroll   { overflow-x: auto; }
.diagram-hint     { display: none; }

/* Ocean context — the SMART section surface (§11) also carries subpage
   diagram sections, so the primitives above follow its palette there. */
.smart-section .section-head h2,
.smart-section .section-head h3    { color: var(--oc-deep); }
.smart-section .section-head h2 .accent { color: var(--oc); }
.smart-section .section-head .lede { color: var(--oc-deep); opacity: 0.9; }
.smart-section .subblock           { border-top-color: var(--oc-100); }
.smart-section .keypoint           { border-left-color: var(--oc-200); }
.smart-section .keypoint h4        { color: var(--oc-deep); }
.smart-section .keypoint p         { color: var(--oc-deep); opacity: 0.8; }
.smart-section .diagram-cap        { border-top-color: var(--oc-100); color: var(--oc-deep); opacity: 0.7; }
.smart-section .diagram-hint       { color: var(--oc); }

/* ── 20. RESPONSIVE ───────────────────────────────────────────────
   Layout is desktop-first above; these queries collapse the
   multi-column grids for tablets and mobile portrait screens.
   Breakpoints: 1024 (tablet) · 860 (nav + stacking) · 560 (phone).
   ───────────────────────────────────────────────────────────────── */

/* Decorative absolute elements are already contained by each section's
   own overflow:hidden, so no global overflow-x clamp is needed here
   (which would also break the sticky nav). */

/* ── Tablet ── */
@media (max-width: 1024px) {
  h1 { font-size: 38px; }
  h2 { font-size: 30px; }

  .hero            { padding: 40px 0 56px; }
  .hero-grid       { gap: 36px; }
  .going-first-body,
  .how-enoqi-grid,
  .smart-grid,
  .pilot-grid,
  .contact-grid    { gap: 32px; }

  /* Fact band halves its columns before it stacks */
  .trust-facts .trust-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Nav collapse + main column stacking ── */
@media (max-width: 860px) {
  /* Navigation → hamburger + dropdown panel */
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 0.5px solid var(--line);
    box-shadow: 0 10px 24px rgba(75,0,43,0.08);
    padding: 8px 0 16px; display: none;
  }
  .nav-menu.open    { display: flex; }
  .nav-links        { flex-direction: column; gap: 0; width: 100%; }
  .nav-links li     { width: 100%; }
  .nav-links a      { display: block; padding: 13px 32px; }
  .nav-links a.highlight::after { display: none; }
  .nav-actions      { padding: 12px 32px 0; }

  /* In the hamburger panel there is no hover to open a submenu with, so it
     becomes an inline group the parent link expands. */
  .nav-sub {
    position: static; display: none;
    min-width: 0; margin: 0; padding: 0 0 6px;
    background: none; border: none; border-radius: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
  }
  .nav-sub::before { display: none; }
  .nav-has-sub.is-open > .nav-sub { display: block; }
  .nav-has-sub:hover > .nav-sub,
  .nav-has-sub:focus-within > .nav-sub { display: none; }
  .nav-has-sub.is-open:hover > .nav-sub,
  .nav-has-sub.is-open:focus-within > .nav-sub { display: block; }
  .nav-sub a { padding: 9px 32px 9px 48px; font-size: 13.5px; }
  .nav-has-sub.is-open > a .nav-sub-caret { transform: rotate(180deg); }
  .nav-actions .btn { width: 100%; justify-content: center; }

  /* Stack every two-column content grid */
  .hero-grid,
  .going-first-body,
  .how-enoqi-grid,
  .smart-grid,
  .pilot-grid,
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Lead with the explanatory copy, follow with the product mockup */
  .how-enoqi-text { order: -1; max-width: none; }
  .going-first-points,
  .smart-text     { max-width: none; }

  /* Centre and cap the tall hero/pilot imagery so it isn't oversized */
  .hero-photo,
  .pilot-photo-wrap { max-width: 440px; margin-left: auto; margin-right: auto; width: 100%; }

  /* Card rows → single column */
  .how-grid { grid-template-columns: 1fr; }

  /* CTA block stacks its copy and buttons */
  .cta-block         { grid-template-columns: 1fr; gap: 18px; }
  .cta-block-buttons { flex-wrap: wrap; }

  /* "Built for" row stacks and centres */
  .built-for-inner { grid-template-columns: 1fr; gap: 18px; justify-items: center; text-align: center; }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 24px 32px; }

  /* Subpage primitives collapse to one column */
  .leading-grid-2 { grid-template-columns: 1fr; }
  .lead-card-wide { grid-column: span 1; }
  .keypoint-row   { grid-template-columns: 1fr; gap: 12px; }
  .def-row        { grid-template-columns: 1fr; gap: 6px; }
}

/* ── Wide diagrams ──
   Below this width a horizontal diagram band is too dense to shrink
   further without losing its labels, so it scrolls inside its frame. */
@media (max-width: 720px) {
  .diagram-scroll svg { min-width: 640px; }
  .diagram-hint {
    display: block; margin-top: 8px; text-align: right;
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  }
}

/* ── Phone portrait ── */
@media (max-width: 560px) {
  body { font-size: 15px; }
  h1 { font-size: 31px; }
  h2 { font-size: 25px; }

  .container { padding: 0 20px; }
  .nav-inner { padding: 14px 20px; }
  .nav-links a, .nav-actions { padding-left: 20px; padding-right: 20px; }

  .hero { padding: 28px 0 44px; }
  .hero h1 { font-size: 31px; }
  .hero-lede { font-size: 16px; }
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn { width: 100%; justify-content: center; }
  .hero-meta { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Section vertical rhythm tightens on small screens */
  .going-first,
  .how-enoqi,
  .smart-section,
  .how-it-works,
  .pilot          { padding: 40px 0 44px; }
  .going-first-lead { margin-bottom: 36px; }
  .going-first-lead h2 { font-size: 27px; }

  /* Multi-column inner grids → single column */
  .pilot-points  { grid-template-columns: 1fr; gap: 14px; }
  .form-row      { grid-template-columns: 1fr; gap: 0; }
  .smart-viz-body,
  .dashboard-main { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
  .axis-list     { width: 100%; max-width: 280px; text-align: left; }
  .kpi-strip     { width: 100%; }

  .smart-viz     { padding: 18px; }
  .radar         { width: 180px; height: 180px; }

  /* Button rows wrap and go full width for comfortable tap targets */
  .going-first-cta-row,
  .smart-text-cta,
  .how-enoqi-cta,
  .pilot-cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .going-first-cta-row .btn,
  .pilot-cta-row .btn { width: 100%; justify-content: center; }

  .contact-form { padding: 22px 20px; }
  .join-facts   { gap: 12px 0; flex-direction: column; align-items: flex-start; }

  .footer { padding: 44px 0 28px; }
  .footer-top { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Subpage rhythm and the fact band tighten to a single column */
  .section-pad             { padding: 40px 0 46px; }
  .section-head h2         { font-size: 25px; }
  .trust-facts .trust-grid { grid-template-columns: 1fr; }
  .trust-cell-wide         { grid-column: span 1; }
}

/* ── 21. WHITEPAPER PAGE (/whitepaper) ────────────────────────────
   Self-contained block for the whitepaper landing page. The register
   is deliberately quieter than the marketing sections above: no cards
   around the figures, no shadows, mono captions, a single accent.

   The five paper figures are drawn on Cream (--cream) and carry that
   fill in their own background rect, so any section hosting one must
   also be Cream — hence .section-cream. Do not put a figure on --bg
   or --bg-soft; the seam shows.
   ───────────────────────────────────────────────────────────────── */

.section-cream { background: var(--cream); }

/* Mono eyebrow — Carbon, not Rubine. Variant of .eyebrow (§4). */
.eyebrow-mono {
  display: block; font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--cb);
}

/* ---- S1 hero ---------------------------------------------------- */
.wp-hero .hero-grid { grid-template-columns: 1.22fr 1fr; align-items: center; }
.wp-hero h1         { margin: 16px 0 18px; }

/* Standfirst: h2 scale at regular weight — a subtitle, not a claim. */
.wp-standfirst {
  font-size: 22px; font-weight: 400; line-height: 1.32;
  letter-spacing: -0.01em; color: var(--ink-2);
  max-width: 22em; margin-bottom: 22px;
}
.wp-hero-body {
  font-size: 16px; line-height: 1.62; color: var(--ink-2);
  max-width: 55ch; margin-bottom: 26px;
}
.wp-hero-note {
  margin-top: 18px; font-family: var(--font-mono);
  font-size: 11.5px; line-height: 1.6; color: var(--cb); letter-spacing: 0.01em;
}

/* Cover render placeholder — A-series aspect ratio, neutral by
   instruction: a figure must never stand in for the cover. Swap the
   inner label for an img once the render is supplied. */
.wp-cover {
  position: relative; z-index: 1;
  aspect-ratio: 1 / 1.414; width: 100%; max-width: 340px;
  margin-left: auto; margin-right: auto;
  background: var(--cream); border: 1px dashed var(--line-2);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.wp-cover-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--cb); line-height: 1.7; padding: 0 24px;
}
.wp-cover img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---- Figures ---------------------------------------------------- */
/* No frame, no shadow, no radius: the figure sits on the page. */
.wp-figure     { margin: 30px 0 0; }
.wp-figure svg { display: block; width: 100%; height: auto; }
.wp-figcap {
  margin-top: 12px; font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 400; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--cb);
}

/* Bounded horizontal scroll — used where shrinking would make the
   figure illegible (Fig. 2 axis; Fig. 1 until its stacked variant is
   supplied). The 2050 end must never be cropped, so no max-width. */
.wp-figure-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wp-scroll-hint   { display: none; }

/* ---- Section prose --------------------------------------------- */
.wp-prose         { max-width: 68ch; }
.wp-prose p       { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.wp-prose p + p   { margin-top: 15px; }
.wp-prose strong  { color: var(--ink); font-weight: 600; }
.wp-after-figure  { margin-top: 32px; }
.section-cream .section-head h2 { color: var(--ink); }

/* ---- S3 classification key ------------------------------------- */
/* The typology is the differentiator of the page: the letter carries
   the same weight as the label, so neither reads as decoration. */
.wp-class-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin: 34px 0 4px; border-top: 1px solid var(--line-2);
}
.wp-class-item {
  padding: 18px 22px 20px 0; border-right: 0.5px solid var(--line);
}
.wp-class-item:last-child { border-right: none; }
.wp-class-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px;
}
.wp-class-letter {
  font-family: var(--font-mono); font-size: 17px; font-weight: 500;
  color: var(--rub); line-height: 1;
}
.wp-class-label {
  font-size: 15px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.005em; line-height: 1;
}
.wp-class-desc { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.wp-class-eg {
  margin-top: 10px; padding-top: 9px; border-top: 0.5px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--cb);
}

/* ---- S3b library band ------------------------------------------- */
/* The point where the page stops being about one paper. Rendered from
   the registry, so it grows by itself as materials are published. */

.wp-libraryband      { padding-top: 8px; }
.wp-libraryband-lede { margin-bottom: 6px; }

.wp-libitems { list-style: none; margin: 30px 0 0; padding: 0; }
.wp-libitem {
  display: grid; grid-template-columns: 190px 1fr; gap: 32px;
  padding: 26px 0; border-top: 0.5px solid var(--line-2);
}
.wp-libitem:last-child { border-bottom: 0.5px solid var(--line-2); }

.wp-libitem-tag { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.wp-libitem-kind {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--rub);
}
.wp-libitem-label { font-size: 14px; font-weight: 600; color: var(--ink); }

/* The question each material settles. With two papers listed, this is what
   tells a visitor which of them they came for. */
.wp-libitem-answers    { font-size: 13px; font-weight: 500; color: var(--rub); margin-bottom: 6px; }
.wp-libitem-planned .wp-libitem-answers { color: var(--cb); }

.wp-libitem-title      { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 6px; }
.wp-libitem-standfirst { font-size: 14.5px; color: var(--ink-2); margin-bottom: 9px; }
.wp-libitem-summary    { font-size: 14px; line-height: 1.6; color: var(--ink-3); max-width: 58ch; }
.wp-libitem-meta {
  margin-top: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--cb);
}

/* Announced but not yet readable — greyed rather than hidden, so the
   value of access reads as a library and not a single download. */
.wp-libitem-planned .wp-libitem-kind  { color: var(--cb); }
.wp-libitem-planned .wp-libitem-label,
.wp-libitem-planned .wp-libitem-title { color: var(--ink-3); }

/* ---- S4 request section ---------------------------------------- */
/* Cream deepened plus a hairline rule: the conversion band is marked
   by surface, not by a coloured panel. */
.wp-request {
  background: var(--bg-tint);
  border-top: 1px solid var(--line-2); border-bottom: 0.5px solid var(--line);
  padding: 72px 0 80px;
}
.wp-request-grid {
  display: grid; grid-template-columns: 0.82fr 1fr; gap: 56px; align-items: start;
}
.wp-request h2 { font-size: 30px; line-height: 1.2; margin: 10px 0 22px; }

/* Contents — mono numerals, no icons */
.wp-toc { list-style: none; margin: 0; padding: 0; counter-reset: wp-toc; }
.wp-toc li {
  counter-increment: wp-toc;
  display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  padding: 11px 0; border-bottom: 0.5px solid var(--line);
  font-size: 14.5px; line-height: 1.45; color: var(--ink-2);
}
.wp-toc li::before {
  content: counter(wp-toc) ".";
  font-family: var(--font-mono); font-size: 12px; color: var(--cb);
  padding-top: 2px;
}
.wp-toc li:first-child { border-top: 0.5px solid var(--line); }
.wp-toc-note {
  margin-top: 16px; font-family: var(--font-mono);
  font-size: 11px; line-height: 1.65; color: var(--cb);
}

/* Form — reuses .contact-form and its fields (§16); only the
   whitepaper-specific states are defined here. */
.wp-form-wrap { position: relative; }
.wp-form-hint {
  margin-top: 7px; font-size: 12px; line-height: 1.45; color: var(--ink-3);
}
.wp-form-hint-warn { color: #8A5A16; }         /* Alert, darkened for text contrast */
.wp-legal {
  margin-top: 16px; font-size: 12px; line-height: 1.6; color: var(--ink-3);
}
.wp-legal a { color: var(--rub); text-decoration: underline; }
.wp-form-error {
  margin-bottom: 16px; padding: 11px 14px;
  background: var(--rub-50); border-left: 2px solid var(--rub);
  font-size: 13px; line-height: 1.5; color: var(--rub-deep);
}
.form-input.is-invalid, .form-select.is-invalid { border-color: var(--rub); }
.form-submit[disabled] { opacity: 0.6; cursor: default; }

/* Inline success state — replaces the form in place. No redirect. */
.wp-success {
  background: #fff; border: 0.5px solid var(--line); border-radius: 14px;
  padding: 32px;
}
/* The success panel is focused by script so screen readers land on it. It is
   not in the tab order, so the default ring is noise rather than guidance. */
.wp-success[tabindex="-1"]:focus { outline: none; }
.wp-success-mark {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--ol-50); color: var(--ol-deep);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.wp-success h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; }
.wp-success p  { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.wp-success-direct {
  margin-top: 22px; padding-top: 20px; border-top: 0.5px solid var(--line);
}
.wp-success-direct p { font-size: 13px; color: var(--ink-3); margin-bottom: 12px; }

/* ---- Gate states on the public page ------------------------------ */
/* Added when the paper moved behind the magic-link gate: a returning
   reader must not be asked to request access they already hold, and a
   strict gate has to leave a visible way out when mail goes missing. */

.wp-notice {
  margin-bottom: 18px; padding: 12px 15px;
  background: rgba(232, 165, 102, 0.12); border-left: 2px solid var(--alert);
  font-size: 13.5px; line-height: 1.55; color: #6E6A67;
}

.wp-haveaccess {
  background: #fff; border: 0.5px solid var(--line); border-radius: 14px;
  padding: 28px 30px; margin-bottom: 22px;
}
.wp-haveaccess h3 { font-size: 19px; font-weight: 600; margin: 4px 0 8px; }
.wp-haveaccess p  { font-size: 14.5px; color: var(--ink-2); margin-bottom: 20px; }

/* The request form demoted to a secondary offer once access exists. */
.wp-form-secondary { background: transparent; border-style: dashed; }
.wp-form-secondary-note {
  margin-bottom: 18px; font-size: 13px; color: var(--ink-3);
}

.wp-resend-note {
  margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3);
}
.wp-resend-note a { color: var(--rub); text-decoration: underline; }

/* ---- S5 bridge -------------------------------------------------- */
.wp-bridge      { padding: 64px 0 72px; }
.wp-bridge h2   { font-size: 27px; line-height: 1.2; margin: 10px 0 18px; max-width: 20em; }
.wp-bridge-body { font-size: 16px; line-height: 1.68; color: var(--ink-2); max-width: 68ch; }
.wp-bridge-link { margin-top: 26px; }

/* ---- Responsive ------------------------------------------------- */
@media (min-width: 861px) {
  /* Hero fills the first viewport; the nav is 69px including its rule. */
  .wp-hero { min-height: calc(100vh - 69px); display: flex; align-items: center; }
  .wp-hero .container { width: 100%; }
}

@media (max-width: 1024px) {
  .wp-hero .hero-grid { grid-template-columns: 1fr 0.8fr; }
  .wp-class-grid      { grid-template-columns: repeat(2, 1fr); }
  .wp-class-item:nth-child(2n)   { border-right: none; }
  .wp-class-item:nth-child(-n+2) { border-bottom: 0.5px solid var(--line); }
  .wp-request-grid    { gap: 40px; }
}

@media (max-width: 860px) {
  .wp-hero .hero-grid,
  .wp-request-grid { grid-template-columns: 1fr; gap: 36px; }
  .wp-libitem      { grid-template-columns: 1fr; gap: 12px; }
  .wp-libitem-tag  { flex-direction: row; align-items: baseline; gap: 12px; padding-top: 0; }
  .wp-cover        { max-width: 260px; }
  .wp-request      { padding: 52px 0 58px; }
}

@media (max-width: 720px) {
  /* Below this width the dense figures are set in a scrolling band
     rather than scaled down. Fig. 1 leaves the band as soon as its
     stacked variant is wired to this breakpoint. */
  .wp-figure-scroll svg { min-width: 860px; }
  .wp-scroll-hint {
    display: block; margin-top: 10px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--cb);
  }
}

@media (max-width: 560px) {
  .wp-standfirst  { font-size: 19px; }
  .wp-hero-body   { font-size: 15.5px; }
  .wp-class-grid  { grid-template-columns: 1fr; }
  .wp-class-item  {
    border-right: none; border-bottom: 0.5px solid var(--line);
    padding: 16px 0 17px;
  }
  .wp-class-item:last-child { border-bottom: none; }
  .wp-request h2  { font-size: 25px; }
  .wp-bridge      { padding: 44px 0 50px; }
  .wp-bridge h2   { font-size: 23px; }
  .wp-success     { padding: 24px 20px; }
}

/* ── 22. DECARBONISATION ROI PAGE (/resources/decarbonisation-roi) ─
   An introduction to carbon cost, not a summary of the whitepaper. The
   register is plainer than the paper's, but the restraint is the same:
   the page's authority rests on refusing to give a single carbon price,
   so no pull-out figure leads, no counters animate, no gauge dials and
   no urgency devices. Every number appears with the qualification that
   makes it true. The one graphic is a four-point timeline with no curve
   — a curve would imply the page forecasts a price, which it does not.
   ───────────────────────────────────────────────────────────────── */

/* ---- Hero ------------------------------------------------------- */
/* Single column. The old two-column hero carried a thesis box for the
   paper's argument; an introduction has no thesis to summarise, and the
   narrow measure is what makes the opening question land. */
.dr-hero      { padding: 60px 0 68px; }
.dr-hero-solo { max-width: 62ch; }
.dr-hero h1   {
  margin: 16px 0 22px; font-size: 54px; line-height: 1.04;
  letter-spacing: -0.03em; max-width: 17ch;
}
.dr-hero-lede {
  font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 54ch;
  margin-bottom: 30px;
}
.dr-hero-cta  { display: flex; gap: 12px; flex-wrap: wrap; }
.dr-hero-note {
  margin-top: 24px; padding-top: 18px; border-top: 0.5px solid var(--line);
  font-size: 13.5px; line-height: 1.65; color: var(--ink-3); max-width: 56ch;
}
/* A reader who already holds a grant is told so plainly, once. */
.dr-hero-note-open {
  display: flex; align-items: flex-start; gap: 8px;
  color: var(--ol-deep); border-top-color: var(--ol-100);
}
.dr-hero-note-open svg { flex-shrink: 0; margin-top: 3px; }

/* ---- Section heads ---------------------------------------------- */
.dr-head        { max-width: 62ch; margin-bottom: 38px; }
.dr-head h2     { margin: 12px 0 14px; font-size: 33px; }
.dr-head-lede   { font-size: 16.5px; line-height: 1.62; color: var(--ink-2); }

/* ---- §2 The four routes ----------------------------------------- */
/* Typographic and icon-free by instruction: the accent rule carries the
   distinction, the "if you…" clause carries the reader. Deliberately no
   calculator widget here — §3 explains why one would mislead. */
.dr-routes {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border-top: 0.5px solid var(--line);
}
.dr-route {
  padding: 26px 30px 28px 0; border-right: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line); border-top: 2px solid transparent;
}
.dr-route:nth-child(2n) { border-right: none; padding-left: 30px; padding-right: 0; }
.dr-route p       { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.dr-route strong  { color: var(--ink); font-weight: 600; }
.dr-route-1 { border-top-color: var(--rub); }
.dr-route-2 { border-top-color: var(--oc);  }
.dr-route-3 { border-top-color: var(--ol);  }
.dr-route-4 { border-top-color: var(--cb);  }

/* ---- Prose columns ---------------------------------------------- */
/* §3, §4 and the closing note of §5. One measure, set once. */
.dr-prose        { max-width: 68ch; }
.dr-prose p      { font-size: 16.5px; line-height: 1.72; color: var(--ink-2); }
.dr-prose p + p  { margin-top: 18px; }
.dr-prose .dr-prose-lead {
  font-size: 19px; line-height: 1.6; color: var(--ink);
}
.dr-prose-after  { margin-top: 40px; }

/* ---- Pull-outs --------------------------------------------------- */
/* The sentence a reader should carry away from the section. A rule and a
   larger size, not a coloured panel: the claim is doing the work. */
.dr-pull {
  margin: 40px 0 0; padding: 0 0 0 26px;
  border-left: 2px solid var(--rub); max-width: 60ch;
}
.dr-pull p {
  font-size: 21px; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink);
}

/* ---- §5 Timeline ------------------------------------------------- */
/* Four points on one rule. No curve, no scale, no forecast — the dates
   are fixed and the prices are not, and the graphic must not blur that. */
.dr-timeline {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line-2);
}
.dr-timeline > li { position: relative; padding: 26px 26px 4px 0; }
.dr-timeline > li::before {
  content: ""; position: absolute; top: -4.5px; left: 0;
  width: 8px; height: 8px; border-radius: 999px; background: var(--rub);
}
.dr-tl-when {
  display: block; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--rub);
}
.dr-timeline p { font-size: 14.5px; line-height: 1.62; color: var(--ink-2); }

/* ---- §6 The two questions ---------------------------------------- */
.dr-questions {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border-top: 0.5px solid var(--line);
}
.dr-question {
  padding: 28px 34px 30px 0; border-right: 0.5px solid var(--line);
}
.dr-question:last-child { border-right: none; padding-left: 34px; padding-right: 0; }
.dr-question-n  { font-family: var(--font-mono); font-size: 11px; color: var(--cb); }
.dr-question h3 { margin: 12px 0; font-size: 21px; font-weight: 600; line-height: 1.28; }
.dr-question p  { font-size: 15px; line-height: 1.66; color: var(--ink-2); }

.dr-close    { margin-top: 44px; max-width: 68ch; }
.dr-close p  { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
/* The only sentence about the product on this page. It earns its weight
   by arriving after the two questions, not before them. */
.dr-close .dr-close-line {
  margin: 20px 0 22px; padding-top: 20px; border-top: 0.5px solid var(--line);
  font-size: 17.5px; line-height: 1.6; color: var(--ink);
}

/* ---- §7 The whitepaper ------------------------------------------- */
/* The band reuses .wp-request from §21 for its ground, grid and form;
   only the left-hand column differs. */
.dr-paper h2       { font-size: 30px; line-height: 1.2; margin: 10px 0 20px; }
.dr-paper-lede     { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.dr-paper-lede em  { font-style: normal; font-weight: 600; color: var(--ink); }
.dr-paper-body     { margin-top: 16px; font-size: 15px; line-height: 1.68; color: var(--ink-2); }
.dr-paper-meta {
  margin-top: 18px; padding-top: 14px; border-top: 0.5px solid var(--line-2);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.65;
  letter-spacing: 0.03em; color: var(--cb);
}

/* Signed-in substitute for the form: nothing to request, two ways in. */
.dr-open-panel {
  background: #fff; border: 0.5px solid var(--line); border-radius: 14px;
  padding: 32px 32px 28px;
}
.dr-open-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ol-deep); margin-bottom: 12px;
}
.dr-open-panel h3 { font-size: 22px; font-weight: 600; margin-bottom: 12px; }
.dr-open-panel p  { font-size: 14.5px; line-height: 1.62; color: var(--ink-2); }
.dr-open-panel .dr-hero-cta { margin-top: 22px; }
.dr-open-panel .dr-open-note {
  margin-top: 20px; padding-top: 16px; border-top: 0.5px solid var(--line);
  font-size: 13px; color: var(--ink-3);
}
.dr-open-note a { color: var(--rub); font-weight: 500; }

@media (max-width: 1000px) {
  .dr-hero h1       { font-size: 44px; }
  .dr-timeline      { grid-template-columns: repeat(2, 1fr); }
  .dr-timeline > li { padding-right: 20px; }
  .dr-questions     { grid-template-columns: 1fr; }
  .dr-question      { border-right: none; border-bottom: 0.5px solid var(--line); padding: 24px 0 26px; }
  .dr-question:last-child { border-bottom: none; padding-left: 0; }
}

@media (max-width: 560px) {
  .dr-hero        { padding: 36px 0 44px; }
  .dr-hero h1     { font-size: 33px; max-width: none; }
  .dr-hero-lede   { font-size: 17px; }
  .dr-hero-cta .btn { width: 100%; justify-content: center; }
  .dr-head h2     { font-size: 25px; }
  .dr-routes      { grid-template-columns: 1fr; }
  .dr-route       { border-right: none; padding: 22px 0 24px; }
  .dr-route:nth-child(2n) { padding-left: 0; }
  .dr-route:last-child    { border-bottom: none; }
  .dr-prose p     { font-size: 16px; }
  .dr-prose .dr-prose-lead { font-size: 17.5px; }
  .dr-pull        { padding-left: 18px; }
  .dr-pull p      { font-size: 18px; }
  .dr-timeline    { grid-template-columns: 1fr; border-top: none; }
  .dr-timeline > li { padding: 0 0 22px 22px; border-left: 1px solid var(--line-2); }
  .dr-timeline > li::before   { top: 4px; left: -4.5px; }
  .dr-timeline > li:last-child { padding-bottom: 0; }
  .dr-close .dr-close-line { font-size: 16.5px; }
  .dr-paper h2    { font-size: 25px; }
  .dr-open-panel  { padding: 24px 20px 22px; }
}

/* ── 23. METHODOLOGY — SHARED COMPONENTS ──────────────────────────
   Two pages carry the methodology: the open /resources/how-enoqi-works/
   and the gated /resources/from-estimation-to-evidence/. Three things
   have to look identical across both, so they live here in the design
   system rather than in either page's own block:

     .lead-list   the label + explanation pattern — three chain
                  properties on both pages, five principles and five
                  axes on the paper. It is the primary skim path: a
                  reader who reads only the labels gets the argument's
                  spine, so it must read as a distinct object from body
                  prose, and a reader moving from the open page to the
                  paper must recognise the three properties instantly.

     .fig-panel   the five methodology figures, on their own Cream
                  ground with a hairline round it. Same treatment as
                  .res-figure in resources.css, defined here because the
                  open page is outside the gated stylesheet.

   The five axes are NOT colour-coded per axis, and that is deliberate.
   The methodology brief proposes S = Rubine, M = Ocean, A = Olive,
   R = Alert, T = Carbon on the condition that it match the site's
   existing SMART section — but the homepage radar, its axis list and
   Figure 3 all set the five axes in Ocean, with no per-axis hue. Giving
   them one here would be the very thing the condition guards against:
   the same axis in two colours in two places. If the product ever
   introduces a per-axis palette, change it in the figure, the homepage
   and this block together — never in one of the three.
   ───────────────────────────────────────────────────────────────── */

/* ---- Lead-in lists ---------------------------------------------- */
/* A rule in the accent and nothing else — no card, no number, no icon.
   The label is doing the work, and a document that reads like a
   standard cannot afford a panel per point. */
.lead-list {
  list-style: none; margin: 30px 0 0; padding: 0;
  max-width: 72ch; display: grid; gap: 4px;
}
.lead-item {
  padding: 16px 0 18px 24px;
  border-left: 2px solid var(--rub);
}
.lead-label {
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); margin-bottom: 6px;
}
.lead-body {
  font-size: 16px; line-height: 1.68; color: var(--ink-2);
}

/* The five axes. The letter sits in its own mono column so the five
   labels align down the page, and the rule takes Ocean — the hue the
   radar, the homepage axis list and Figure 3 already give the axis set
   as a whole. The per-axis classes are kept as the place a future
   palette would attach; today they all resolve to the same rule. */
.lead-list-axes .lead-label {
  display: flex; align-items: baseline; gap: 12px;
}
.lead-axis-letter {
  flex: 0 0 auto; width: 14px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  color: var(--oc-deep);
}
.lead-axis-s,
.lead-axis-m,
.lead-axis-a,
.lead-axis-r,
.lead-axis-t { border-left-color: var(--oc); }

/* On the open page the five axes are one line each, so they sit tighter
   than the paper's fuller descriptions. */
.lead-list-axes:not(.lead-list-axes-full) .lead-item { padding: 13px 0 14px 24px; }
.lead-list-axes:not(.lead-list-axes-full) .lead-body { font-size: 15.5px; }

/* ---- Figures ----------------------------------------------------- */
/* The SVGs are responsive and have no fixed dimensions, but three of
   them are wide diagrams whose labels stop being readable long before
   a phone's width. Below the minimum the panel scrolls rather than
   shrinking — an honest fallback, since the drawing cannot restructure
   itself. The Cream ground belongs to the drawing and stops at the
   scroll box; the caption sits outside it. */
.fig-panel { margin: 34px 0 8px; }
.fig-panel-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--cream); border: 0.5px solid var(--line);
}
.fig-panel-scroll svg { display: block; width: 100%; height: auto; min-width: 620px; }
.fig-cap {
  margin-top: 12px; font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase;
  line-height: 1.5; color: var(--cb);
}
.fig-cap-n { color: var(--ink-2); font-weight: 500; }
/* Figures 3 and 5 draw a posture and a set of grades that are invented.
   Saying so in the caption is the only thing that stops a reader taking
   them for customer data. */
.fig-cap-note {
  display: block; margin-top: 5px;
  text-transform: none; letter-spacing: 0.03em; font-size: 10.5px;
  color: var(--ink-3);
}

/* ── 24. HOW ENOQI WORKS (/resources/how-enoqi-works) ─────────────
   The open methodology page. Same restraint as the paper it fronts:
   no animated statistics, no benefit badges, no trust strip inside the
   body, no urgency devices, and one CTA at the very end. The page may
   address the reader as "you" and may be more direct than the paper —
   it is the same argument, shorter, not a softer one.
   ───────────────────────────────────────────────────────────────── */

.hw-hero      { padding: 60px 0 58px; }
.hw-hero-solo { max-width: 62ch; }
.hw-hero h1   {
  margin: 16px 0 20px; font-size: 54px; line-height: 1.04;
  letter-spacing: -0.03em;
}
.hw-hero-lede {
  font-size: 20px; line-height: 1.5; color: var(--ink-2); max-width: 46ch;
}
.hw-hero-cta  { display: flex; gap: 12px; flex-wrap: wrap; }
.hw-hero-note {
  margin-top: 26px; padding-top: 18px; border-top: 0.5px solid var(--line);
  font-size: 13.5px; line-height: 1.65; color: var(--ink-3); max-width: 56ch;
}
/* A reader who already holds a grant is told so plainly, once. */
.hw-hero-note-open {
  display: flex; align-items: flex-start; gap: 8px;
  color: var(--ol-deep); border-top-color: var(--ol-100);
}
.hw-hero-note-open svg { flex-shrink: 0; margin-top: 3px; }
.hw-hero-note-open a   { color: var(--rub); font-weight: 500; }

.hw-head      { max-width: 62ch; margin-bottom: 28px; }
.hw-head h2   { margin: 12px 0 0; font-size: 33px; }

.hw-prose        { max-width: 68ch; }
.hw-prose p      { font-size: 16.5px; line-height: 1.72; color: var(--ink-2); }
.hw-prose p + p  { margin-top: 18px; }
.hw-prose-after  { margin-top: 30px; }

/* ---- The single CTA ---------------------------------------------- */
.hw-paper h2       { font-size: 30px; line-height: 1.2; margin: 10px 0 20px; }
.hw-paper-lede     { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.hw-paper-quote {
  margin: 22px 0 0; padding: 0 0 0 20px;
  border-left: 2px solid var(--rub); max-width: 56ch;
  font-size: 15px; line-height: 1.65; color: var(--ink-2);
}
.hw-paper-quote em { font-style: normal; font-weight: 600; color: var(--ink); }
.hw-paper-meta {
  margin-top: 20px; padding-top: 14px; border-top: 0.5px solid var(--line-2);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.65;
  letter-spacing: 0.03em; color: var(--cb);
}
.dr-open-panel .hw-hero-cta { margin-top: 22px; }

@media (max-width: 1000px) {
  .hw-hero h1 { font-size: 44px; }
}

@media (max-width: 560px) {
  .hw-hero          { padding: 36px 0 42px; }
  .hw-hero h1       { font-size: 34px; }
  .hw-hero-lede     { font-size: 17.5px; }
  .hw-hero-cta .btn { width: 100%; justify-content: center; }
  .hw-head h2       { font-size: 25px; }
  .hw-prose p       { font-size: 16px; }
  .hw-paper h2      { font-size: 25px; }
  .lead-item        { padding-left: 18px; }
  .lead-label       { font-size: 16px; }
  .lead-body        { font-size: 15.5px; }
}