/* ==========================================================================
   Index v4 (team feedback, 2026-10-14): the live site, plus two pieces kept
   from the redesign: the section rail (left) and the Contribute section with
   its four-step loop. Ported from the redesign branch and loaded last.
   ========================================================================== */
:root {
  /* no new colour: the redesign's blue maps onto the live site's own accent (style.css --accent*) */
  --blue: var(--accent-deep); --blue-deep: var(--accent-deep); --blue-soft: var(--accent-soft); --blue-line: rgba(37, 96, 204, 0.22); --blue-glow: var(--accent-bright);
  --ink: #191917; --paper: #faf9f5; --bone: #ecebe6; --night: #07080a;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
.section-rail { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); z-index: 20; display: none; flex-direction: column; gap: 2px; padding: 10px 12px 10px 10px; background: rgba(250, 249, 245, 0.86); border: 1px solid rgba(0, 0, 0, 0.08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--font-sans); font-size: 12.5px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.section-rail.is-visible { opacity: 1; pointer-events: auto; }
.section-rail a { position: relative; padding: 3px 0 3px 16px; color: #6b6a64; text-decoration: none; white-space: nowrap; }
.section-rail a:hover { color: #191917; }
.section-rail a[aria-current] { color: #191917; }
.section-rail a[aria-current]::before { content: "∇"; position: absolute; left: 0; top: 3px; font-family: var(--font-mono); font-size: 11px; }
@media (min-width: 1680px) {
  .section-rail { display: flex; }
}
#contribute .fl-spine { stroke-dasharray: 0 7 !important; stroke-dashoffset: 0 !important; stroke-linecap: round; stroke-width: 2.2; stroke-opacity: 0.6; animation: none !important; }
#contribute .fl-return { fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 7; marker-end: url(#cfc-arrow); }
#contribute .fl-tag-return { fill: var(--text-3); }
body .section-rail { z-index: 60 !important; position: fixed !important; left: 24px !important; right: auto !important; top: 50% !important; width: auto !important; transform: translateY(-50%) !important; margin: 0 !important; }
#contribute .cfc-ring { max-width: 470px; }
#contribute .fl-arc { fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 7.5; marker-end: url(#cfc-arrow); }
#contribute .fl-arc-return { stroke: #2f7a5e; }
#contribute .fl-centre path { fill: var(--text); }
#contribute .fl-step-label { font-size: 10px; letter-spacing: 0.16em; fill: var(--text); }
#contribute .fl-row-dot { fill: #fff; stroke: var(--text); stroke-width: 1; }
#contribute .fl-n-row { font-size: 13px; }
#contribute .cfc-ring .fl-node, #contribute .cfc-ring .fl-pill { opacity: 1; transform: none; }
@media (min-width: 1200px) and (max-width: 1679px) {
  .section-rail { display: flex; }
  body .section-rail { left: 16px !important; }
}
#contribute .cfc-ring .fl-s { font-size: 12.5px; }
.cfc-title { font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.025em; }
.cfc-flow-desc, .cfc-flow-slogan { font-family: var(--font-sans); }
.cfc-flow-slogan { font-weight: 500; letter-spacing: -0.015em; }
#contribute .cfc-btn { display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: var(--btn-pad);
  border-radius: 999px;
  font: var(--btn-font);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out); }
#contribute .cfc-btn:active { transform: translateY(1px); }
#contribute .cfc-btn-primary { background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink); }
#contribute .cfc-btn-primary:hover, #contribute .cfc-btn-primary:focus-visible { color: var(--paper); background: #2e2e2b; border-color: #2e2e2b; }
#contribute .cfc-btn-primary span { font-family: var(--font-sans); }
@media (prefers-reduced-motion: reduce) {
  #contribute .cfc-btn { transition: none; }
}
#contribute .fl-joint rect { fill: var(--bone); stroke: var(--ink); }
#contribute .fl-joint text { fill: var(--ink); }
#contribute .fl-agent rect { fill: transparent; stroke: rgba(25, 25, 23, 0.35); }
#contribute .fl-agent text { fill: #4a4944; }
#contribute .fl-key circle { fill: var(--bone); }
#contribute .fl-step-label, #contribute .fl-tag { fill: #6a685f; }
.section-rail a[aria-current] { color: var(--blue); }
.section-rail a[aria-current]::before { color: var(--blue); }
#contribute .fl-arc-return { stroke: var(--blue); }
#contribute .fl-key circle { fill: var(--blue-soft); stroke: var(--blue); }
#contribute .fl-joint rect { fill: var(--blue-soft); stroke: var(--blue); }
#contribute .fl-joint text { fill: var(--blue-deep); }
#contribute .cfc-flow { background: #ffffff; }
body .section-rail { top: 38% !important; }
#contribute .cfc-ring { --step: 0.95s; --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); }
#contribute .cfc-ring .fl-node, #contribute .cfc-ring .fl-step-label, #contribute .cfc-ring .fl-tag, #contribute .cfc-ring .fl-loop, #contribute .cfc-ring .fl-pill, #contribute .cfc-ring .fl-centre { opacity: 0; transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft); }
#contribute .cfc-ring .fl-node { transform: translateY(8px); }
#contribute .cfc-ring .fl-arc-mask { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.6s cubic-bezier(0.45, 0, 0.25, 1); }
#contribute .cfc-flow.in .cfc-ring .fl-centre { opacity: 1; transition-delay: 0.05s; }
#contribute .cfc-flow.in .cfc-ring .fl-node, #contribute .cfc-flow.in .cfc-ring .fl-step-label { opacity: 1; transform: none; transition-delay: calc(0.15s + var(--i, 0) * var(--step)); }
#contribute .cfc-flow.in .cfc-ring .fl-arc-mask { stroke-dashoffset: 0; transition-delay: calc(0.5s + var(--i, 0) * var(--step)); }
#contribute .cfc-flow.in .cfc-ring .fl-tag, #contribute .cfc-flow.in .cfc-ring .fl-loop { opacity: 1; transition-delay: calc(0.85s + var(--i, 0) * var(--step)); }
#contribute .cfc-flow.in .cfc-ring .fl-pill { opacity: 1; transition-delay: calc(1.3s + 3 * var(--step)); }
#contribute .cfc-ring .fl-key > circle:first-of-type { fill: var(--blue-soft); stroke: var(--blue); }
@media (prefers-reduced-motion: reduce) {
  #contribute .cfc-ring .fl-node, #contribute .cfc-ring .fl-step-label, #contribute .cfc-ring .fl-tag, #contribute .cfc-ring .fl-loop, #contribute .cfc-ring .fl-pill, #contribute .cfc-ring .fl-centre { opacity: 1; transform: none; transition: none; }
  #contribute .cfc-ring .fl-arc-mask { stroke-dashoffset: 0; transition: none; }
}
#contribute .cfc-flow.in .cfc-ring .fl-node, #contribute .cfc-flow.in .cfc-ring .fl-pill, #contribute .cfc-flow.in .cfc-ring .fl-loop, #contribute .cfc-flow.in .cfc-ring .fl-tag { animation: none; }
#contribute .cfc-btn { border-radius: 0 !important; }
#contribute .cfc-btn { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; }
#contribute .cfc-btn { font-family: var(--font-mono) !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.04em !important; text-transform: none; }
.section-rail { background: none !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
#contribute .cfc-ring text { fill: #5e5d59; }
@media (min-width: 1200px) and (max-width: 1679px) {
  .section-rail a { font-size: 12px; }
  .section-rail { padding-right: 4px !important; }
  body.home .fold .fold-list { max-width: min(76ch, calc(100vw - 2 * 170px)); margin-left: auto; margin-right: auto; }
}

/* ---------- hero: the actions and the summary in one style (Ethan) ----------
   The buttons were two styles of filled box over the sky and the summary a
   wide dark panel, so the three read as separate pieces. Now: one control
   height and outline, the two calls to action share one fill, and the
   summary sits directly on the sky at a reading width that matches the
   button row, with a soft scrim behind the whole group for legibility. */
.hero .jump { gap: 12px; }
.hero .jump a {
  display: inline-flex; align-items: center; height: 50px; padding: 0 22px;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.38);
  font-size: 16px; font-weight: 500; letter-spacing: 0.01em; color: #fff;
}
.hero .jump a:hover, .hero .jump a:focus-visible { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }
.hero .jump a.hot { background: #f2cc70; border-color: #f2cc70; color: #06090f; font-weight: 600; }
.hero .jump a.hot:hover, .hero .jump a.hot:focus-visible { background: #fff; border-color: #fff; color: #06090f; }
.hero .home-summary {
  max-width: 46em; padding: 0; background: none; border: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 18px; line-height: 1.65; color: rgba(244, 245, 248, 0.86);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.6);
}
.hero-labels .hero-foot { position: relative; }
.hero-labels .hero-foot::before {
  content: ""; position: absolute; inset: -40px 0; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(6, 9, 15, 0.55), rgba(6, 9, 15, 0));
}
@media (max-width: 720px) {
  .hero .jump a { height: 40px; padding: 0 14px; font-size: 14px; }
  body.home .hero .home-summary { padding: 0 4px; border: 0; }
}

/* the rail keeps its names visible on laptop widths; the home content column
   narrows there (still centred) so the rail never sits over it */
@media (min-width: 1200px) and (max-width: 1679px) {
  .section-rail a { font-size: 12px; }
  body.home.skypage { --max: min(1240px, calc(100vw - 2 * 156px)); --maxw: var(--max); --col: var(--max); --wide: min(1120px, calc(100vw - 2 * 156px)); }
  body.home .advisors { max-width: min(1120px, calc(100vw - 2 * 180px)); }
}

/* ---------- one button across the site ----------
   Every button takes the hero's shape: square corners, 50px tall, 22px side
   padding, the site sans at 16px (the live hero's size). Colour follows the ground: on the night
   hero the calls to action are the live yellow and the rest are outlines;
   on paper the primary is ink and the secondary an ink outline. */
.hero .jump a, #contribute .cfc-btn, .btn, body.skypage .btn-paper, body.skypage .btn-paper-ghost, body.skypage .btn-solid, body.skypage .btn-ghost {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; height: auto; padding: 0 22px !important; border-radius: 0 !important; border: 1px solid transparent;
  font-family: var(--font-sans) !important; font-size: 16px !important; font-weight: 500 !important; letter-spacing: 0.01em !important;
  text-transform: none !important; line-height: 1.2; box-shadow: none !important; transform: none !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover, .btn:active, #contribute .cfc-btn:active { transform: none !important; }
#contribute .cfc-btn-primary span, .btn span { font-family: inherit !important; }
/* on paper */
#contribute .cfc-btn-primary, body.skypage .btn-paper, body.skypage .btn-solid { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
#contribute .cfc-btn-primary:hover, body.skypage .btn-paper:hover, body.skypage .btn-solid:hover { background: #000 !important; border-color: #000 !important; }
body.skypage .btn-paper-ghost, body.skypage .btn-ghost { background: transparent !important; border-color: var(--ink) !important; color: var(--ink) !important; }
body.skypage .btn-paper-ghost:hover, body.skypage .btn-ghost:hover { background: rgba(20, 20, 19, 0.06) !important; }
/* the nav's active link and the phone menu button lose their pills too */
.nav-links a, .nav .nav-links a { border-radius: 0 !important; }
.nav-toggle { border-radius: 0 !important; }
@media (max-width: 720px) {
  .hero .jump a, #contribute .cfc-btn, .btn { min-height: 40px; padding: 0 14px !important; font-size: 14px !important; }
}

/* ---------- seams: no greige strips between sections ----------
   The long page's top padding let the page's greige under-layer show
   between the dark opening and Partnership; the sections now meet. */
body.home.skypage main.longform { padding-top: 0 !important; }

/* ---------- footer: the night of the opening closes the page ----------
   Full width on the hero's night colour (no new colour), one inner column
   so the brand, the link columns and the base row share one left edge. */
body.skypage footer.site {
  width: 100% !important; max-width: none !important; margin: 0 !important;
  padding: 72px var(--gutter) 36px !important; border-top: 0 !important;
  background: #06090f !important; color: rgba(236, 235, 230, 0.78);
}
body.skypage footer.site .footer-inner { width: min(var(--max, 1240px), 100%); max-width: none; margin: 0 auto; }
body.skypage footer.site .footer-base {
  width: min(var(--max, 1240px), 100%); max-width: none; margin: 56px auto 0; padding-top: 20px;
  border-top: 1px solid rgba(236, 235, 230, 0.14); justify-content: space-between; color: rgba(236, 235, 230, 0.5);
}
body.skypage footer.site .wm, body.skypage footer.site .wm .dex { color: #ecebe6 !important; }
body.skypage footer.site .footer-line { color: rgba(236, 235, 230, 0.66) !important; }
body.skypage footer.site h4, body.skypage footer.site h3 { color: rgba(236, 235, 230, 0.5) !important; }
body.skypage footer.site a { color: rgba(236, 235, 230, 0.86) !important; }
body.skypage footer.site a:hover { color: #fff !important; }
/* the page ends on its last section, not on a greige margin */
body.skypage main.longform > section:last-of-type { margin-bottom: 0; }
body.skypage footer.site .footer-inner { padding-left: 0 !important; padding-right: 0 !important; }
body.skypage footer.site .footer-base { display: flex !important; justify-content: space-between !important; padding-left: 0 !important; padding-right: 0 !important; }
body.skypage footer.site .footer-base > * { margin: 0 !important; flex: 0 1 auto !important; width: auto !important; }
/* the rail steps aside once the footer comes up */
.section-rail.is-past-footer { opacity: 0 !important; pointer-events: none !important; }
body.skypage footer.site .footer-base span { padding: 0 !important; max-width: none !important; }
body.skypage footer.site .footer-base { gap: 6px 24px; }
@media (max-width: 720px) { body.skypage footer.site { padding-top: 56px !important; } body.skypage footer.site .footer-base { flex-direction: column; margin-top: 40px; } }

/* Partnership and Advisors: as much room under the content as above the heading */
body.home.skypage #partners.sec, body.home.skypage #advisors.sec { padding-bottom: clamp(56px, 8vw, 112px) !important; }

/* hero summary: 18px on desktop, 16px on phones */
@media (max-width: 720px) { .hero .home-summary { font-size: 16px !important; } }
/* the hero's secondary buttons keep their outline (the site-wide button rule above sets a transparent border) */
.hero .jump a:not(.hot) { border-color: rgba(255, 255, 255, 0.38) !important; }
.hero .jump a:not(.hot):hover, .hero .jump a:not(.hot):focus-visible { border-color: #fff !important; }