/* ==========================================================================
   458 CAPITAL — THE FINANCIAL LIBERATION MACHINE
   ========================================================================== */

:root{
  --bg-base:#F4F3EE;
  --bg-card:#ECEAE2;
  --bg-dark:#0E1A16;
  --tx-main:#111111;
  --tx-muted:#555555;
  --tx-soft:#8FA89B;
  --tx-on-dark:#FAF9F6;
  --tx-on-dark-muted:#A9C0B5;
  --accent-emerald:#008A7B;
  --accent-emerald-mid:#4FB8A4;
  --accent-citron:#D2F15D;
  --accent-red:#C8102E;
  --emerald-soft:rgba(0,138,123,0.10);
  --border:rgba(0,0,0,0.08);
  --font-body:'Inter', sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
/* scroll-behavior:smooth intentionally omitted -- in-page anchor scrolling is
   now handled entirely by a custom JS animation (see initSmoothScroll in
   js/main.js) so the speed/easing is identical across all browsers, instead
   of relying on each browser engine's own differing native implementation. */
html{ overflow-x:clip; }
html, body{
  background-color:var(--bg-base);
  color:var(--tx-main);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body{ overflow-x:clip; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ---------- Reveal on scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Layout helpers ---------- */
.container{ max-width:1280px; margin:0 auto; padding:0 24px; }
.container--wide{ max-width:1400px; padding:0 48px; }
section{ padding:120px 0; }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background-color:#F4F3EE;
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1400px; margin:0 auto; padding:10px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-brand{ display:flex; align-items:center; }
.nav-logo-crop{ height:64px; overflow:hidden; display:flex; align-items:center; }
.nav-logo{ height:170px; width:auto; object-fit:cover; }
.nav-links{ display:flex; gap:38px; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-muted); }
.nav-links a{ transition:color .15s ease; }
.nav-links a:hover{ color:var(--accent-emerald); }
/* "ETNs" is an acronym + lowercase "s" (not a plural to shout in caps) --
   override the nav's blanket uppercase transform for this one link only. */
.nav-links a.nav-etns{ text-transform:none; }
.nav-cta{
  background-color:var(--accent-emerald); color:#fff;
  padding:11px 22px; border-radius:999px;
  font-size:13px; font-weight:700; letter-spacing:.02em;
  white-space:nowrap;
  transition:background-color .2s ease, transform .2s ease;
}
.nav-cta:hover{ background-color:#00695D; transform:translateY(-1px); }
.nav-toggle{ display:none; background:none; border:none; font-size:20px; color:var(--tx-main); cursor:pointer; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:999px; font-weight:700; font-size:14px;
  letter-spacing:.02em; cursor:pointer; border:none; transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-primary{ background-color:var(--accent-emerald); color:#fff; box-shadow:0 8px 24px rgba(0,138,123,0.28); }
.btn-primary:hover{ background-color:#00A08D; transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--tx-main); border:1px solid rgba(0,0,0,0.18); }
.btn-ghost:hover{ border-color:var(--accent-emerald); color:var(--accent-emerald); transform:translateY(-2px); }
.btn-full{ width:100%; }

/* ---------- Hero ---------- */
.hero{ position:relative; background-color:var(--bg-base); overflow:hidden; padding-bottom:80px; }
.hero-left-accent{ position:absolute; left:0; top:0; width:6px; height:100%; background-color:var(--accent-emerald); }
.hero-inner{
  max-width:1400px; margin:0 auto; padding:96px 48px 0;
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px; align-items:center;
}
.hero-eyebrow{ font-size:13px; font-weight:800; letter-spacing:.28em; text-transform:uppercase; color:var(--accent-emerald); margin-bottom:22px; }
.hero-title{
  font-size:clamp(38px, 5.6vw, 74px); font-weight:900; line-height:1.05;
  letter-spacing:-0.01em; word-spacing:normal; text-transform:uppercase; color:var(--tx-main);
}
.hero-title .em{ color:var(--accent-emerald); }
.hero-sub{
  margin-top:30px; max-width:560px; font-size:18px; font-weight:500; line-height:1.6;
  color:var(--tx-main); border-left:4px solid var(--accent-emerald); padding-left:22px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:36px; }
.hero-foot{ margin-top:48px; display:flex; align-items:center; gap:22px; }
.hf-role{ font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.18em; color:var(--accent-emerald); }
.hf-sub{ font-size:14px; font-weight:600; color:var(--tx-muted); margin-top:4px; }
.hero-divider{ width:1px; height:38px; background-color:var(--tx-main); opacity:.15; }

/* ---------- Hero visual: allocation ring + chips ---------- */
.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:420px; }
.hv-ring-wrap{ position:relative; width:340px; height:340px; }
.hv-ring-wrap canvas{ width:100% !important; height:100% !important; }
.hv-ring-center{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none;
}
.hv-ring-label{ font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-main); }
.hv-ring-sub{ font-size:11.5px; font-weight:600; color:var(--tx-soft); margin-top:4px; letter-spacing:.04em; }

.hv-chip{
  position:absolute;
  background-color:#FFFFFF;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 18px;
  box-shadow:0 10px 26px rgba(14,26,22,0.10);
  animation:hvfloat 6s ease-in-out infinite;
}
.hv-chip--income{
  top:-6px; right:6px;
  display:flex; flex-direction:column; gap:2px;
  border-left:4px solid var(--accent-emerald);
  animation-delay:0s;
}
.hv-chip-label{ font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-soft); }
.hv-chip-value{ font-size:22px; font-weight:900; color:var(--accent-emerald); letter-spacing:-0.02em; }
.hv-chip-note{ font-size:10px; font-weight:600; color:var(--tx-muted); }

.hv-chip--daily{ bottom:32px; left:-18px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-main); animation-delay:1.2s; }
.hv-chip--weekly{ bottom:78px; right:-24px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-main); animation-delay:2.4s; }
.hv-chip--monthly{ top:60px; left:-30px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-main); animation-delay:3.6s; }

@keyframes hvfloat{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

/* ---------- 458 Velocity System (dark separator band) ---------- */
.velocity-band{ background-color:var(--bg-dark); color:var(--tx-on-dark); padding:96px 0; }
.velocity-band .container{ max-width:1400px; padding:0 48px; }
.velocity-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center; }
.sec-eyebrow--velocity{ color:var(--accent-citron); margin-bottom:18px; }
.velocity-title{
  font-size:clamp(28px, 3.6vw, 48px); font-weight:900; line-height:1.14;
  letter-spacing:-0.01em; word-spacing:normal; text-transform:uppercase; color:var(--tx-on-dark);
}
.velocity-title .em{ color:var(--accent-citron); }
.velocity-sub{
  margin-top:26px; max-width:760px; font-size:16px; font-weight:500; line-height:1.6;
  color:var(--tx-on-dark-muted); border-left:4px solid var(--accent-emerald-mid); padding-left:22px;
}
.velocity-sub strong{ color:var(--accent-emerald-mid); font-weight:800; }
.velocity-stats{
  margin-top:56px; display:flex; gap:28px; flex-wrap:wrap; justify-content:space-between;
}
.vstat{
  flex:1 1 200px; max-width:220px; aspect-ratio:1/1; border-radius:50%;
  border:1.5px solid var(--accent-emerald-mid);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  text-align:center; margin:0 auto; padding:20px;
  transition:border-color .25s ease, background-color .25s ease;
}
.vstat:hover{ border-color:var(--accent-citron); background-color:rgba(255,255,255,0.03); }
.vstat-label{ font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-on-dark-muted); line-height:1.4; }
.vstat-num{ font-size:40px; font-weight:900; letter-spacing:-0.02em; color:var(--tx-on-dark); }

/* ---------- Distribution Calendar (velocity-band right side, light-mode card) ---------- */
.velocity-right{ display:flex; justify-content:flex-end; }
.dist-calendar{
  width:100%; max-width:640px;
  margin-right:-24px;
  background-color:#FFFFFF;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:20px;
  padding:32px 32px 26px;
  box-shadow:0 30px 70px rgba(0,0,0,0.45);
}
.dc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:26px; }
.dc-eyebrow{ font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-emerald); }
.dc-month{ font-size:19px; font-weight:900; letter-spacing:-0.01em; color:var(--tx-main); margin-top:6px; text-transform:uppercase; }
.dc-badge{
  flex:0 0 auto; background-color:var(--emerald-soft); border:1.5px solid var(--accent-emerald);
  color:var(--accent-emerald); font-size:16px; font-weight:900; letter-spacing:-0.01em;
  padding:9px 18px; border-radius:999px; white-space:nowrap;
  min-width:168px; text-align:center;
  font-variant-numeric:tabular-nums;
}
.dc-weekdays{
  display:grid; grid-template-columns:repeat(7,1fr); gap:8px;
  font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tx-soft); text-align:center; margin-bottom:10px;
}
.dc-grid{ display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:1fr; gap:8px; }
.dc-day{
  position:relative; aspect-ratio:1/1; border-radius:11px;
  background-color:var(--bg-card);
  border:1px solid var(--border);
  padding:8px 4px 5px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  overflow:hidden;
}
.dc-day.is-off{ background-color:transparent; border-color:rgba(0,0,0,0.04); }
.dc-day.is-off .dc-daynum{ color:var(--tx-soft); opacity:.55; }
.dc-day.is-today{ border-color:var(--accent-emerald); border-width:2px; background-color:var(--emerald-soft); }
.dc-day.is-today .dc-daynum{ color:var(--accent-emerald); opacity:1; }
.dc-day.is-empty{ background-color:transparent; border-color:transparent; }
.dc-daynum{ font-size:12px; font-weight:800; color:var(--tx-muted); }
.dc-day.is-today .dc-daynum{ color:var(--accent-emerald); }
.dc-payout{
  margin-top:auto; margin-bottom:2px; font-size:11.5px; font-weight:900; letter-spacing:-0.01em;
  color:var(--accent-emerald); opacity:0; transform:scale(.5); line-height:1.15; text-align:center;
  transition:opacity .35s cubic-bezier(.34,1.56,.64,1), transform .35s cubic-bezier(.34,1.56,.64,1);
}
.dc-payout.show{ opacity:1; transform:scale(1); }
.dc-caption{ margin-top:20px; font-size:11px; font-weight:600; color:var(--tx-muted); text-align:center; letter-spacing:.01em; }

@media (max-width:1080px){
  .velocity-grid{ grid-template-columns:1fr; }
  .velocity-right{ margin-top:8px; justify-content:center; }
  .dist-calendar{ max-width:560px; margin-right:0; }
}
@media (max-width:560px){
  .dist-calendar{ padding:20px 16px 18px; }
  .dc-payout{ font-size:8.5px; }
  .dc-daynum{ font-size:10px; }
  .dc-month{ font-size:15px; }
  .dc-badge{ font-size:13px; padding:7px 12px; }
}

/* ---------- Section divider (hero -> next section) ---------- */
.section-divide{ position:relative; }
.section-divide::before{
  content:'';
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:min(1232px, calc(100% - 48px));
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,0.10) 15%, rgba(0,0,0,0.10) 85%, transparent);
}

/* ---------- Section heading ---------- */
.sec-eyebrow{ font-size:13px; font-weight:800; letter-spacing:.28em; text-transform:uppercase; color:var(--accent-emerald); margin-bottom:18px; }
.sec-title{ font-size:clamp(28px, 3.6vw, 48px); font-weight:900; line-height:1.14; letter-spacing:-0.01em; word-spacing:normal; color:var(--tx-main); text-transform:uppercase; }
.sec-title .em{ color:var(--accent-emerald); }
.sec-lead{ margin-top:22px; max-width:720px; font-size:17px; font-weight:500; line-height:1.6; color:var(--tx-main); }
.sec-lead--dark{ color:var(--tx-on-dark-muted); }

/* ---------- Paradox cards ---------- */
.paradox{ padding-top:52px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.pcard{ background-color:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:44px 40px; display:flex; flex-direction:column; }
.pcard.fear{ border-top:6px solid var(--accent-red); }
.pcard.solution{ border-top:6px solid var(--accent-emerald); }
.pcard-eyebrow{ font-size:12.5px; font-weight:800; letter-spacing:.28em; text-transform:uppercase; margin-bottom:16px; }
.pcard.fear .pcard-eyebrow{ color:var(--accent-red); }
.pcard.solution .pcard-eyebrow{ color:var(--accent-emerald); }
.pcard-title{ font-size:30px; font-weight:900; letter-spacing:-0.01em; text-transform:uppercase; line-height:1.15; margin-bottom:26px; color:var(--tx-main); }
.pcard-bullets{ list-style:none; }
.pcard-bullets li{ display:flex; align-items:flex-start; gap:14px; font-size:16px; font-weight:600; line-height:1.5; color:var(--tx-main); margin-bottom:14px; }
.xb{ flex:0 0 22px; height:22px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:900; border-radius:50%; color:#fff; margin-top:1px; }
.pcard.fear .xb{ background-color:var(--accent-red); }
.pcard.solution .xb{ background-color:var(--accent-emerald); }
.pcard-stat-row{ margin-top:30px; padding-top:22px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.pcard-stat-row .al{ display:block; font-size:10.5px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:var(--tx-soft); }
.pcard-stat-row .av{ display:block; font-size:32px; font-weight:900; letter-spacing:-0.03em; line-height:1; margin-top:6px; }
.pcard.fear .pcard-stat-row .av{ color:var(--accent-red); }
.pcard.solution .pcard-stat-row .av{ color:var(--accent-emerald); }
.pcard-stat-row .au{ font-size:11.5px; font-weight:700; color:var(--tx-muted); margin-top:4px; letter-spacing:.02em; display:block; }

/* ---------- Paradox flow sequence (dynamic step strip) ---------- */
.pflow{
  margin-top:30px; background-color:#111516; border-radius:12px;
  padding:20px 24px 22px;
  display:flex; flex-direction:column; justify-content:center;
  min-height:150px;
}
.pflow-label{
  display:block; font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx-on-dark-muted); margin-bottom:18px;
}
.pflow-steps{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.pflow-step{
  flex:1 1 0; min-width:0;
  border-radius:9px; padding:12px 10px; text-align:center;
  background-color:transparent; border:1.5px solid;
  opacity:0; transform:translateY(8px) scale(.92);
  transition:opacity .4s cubic-bezier(.34,1.56,.64,1), transform .4s cubic-bezier(.34,1.56,.64,1), background-color .3s ease, border-color .3s ease;
}
.pflow-step.show{ opacity:1; transform:translateY(0) scale(1); }
.pflow-step-text{ font-size:14.5px; font-weight:800; letter-spacing:-0.01em; line-height:1.3; }
.pflow-arrow{ flex:0 0 auto; font-size:22px; font-weight:700; opacity:0; transition:opacity .3s ease; }
.pflow-arrow.show{ opacity:1; }

/* Fear sequence: dark maroon-tinted boxes, crimson outline/text, per source deck */
.pflow--fear .pflow-step{ border-color:#A82424; color:#F0A8A8; }
.pflow--fear .pflow-arrow{ color:#A82424; }
.pflow--fear .pflow-step.show{ background-color:rgba(168,36,36,0.16); }
.pflow--fear .pflow-step--final{ color:#fff; }
.pflow--fear .pflow-step--final.show{ background-color:#A82424; border-color:#A82424; box-shadow:0 0 18px rgba(168,36,36,0.45); }

/* Solution sequence: dark teal-tinted boxes, teal outline/text, final box filled solid, per source deck */
.pflow--solution .pflow-step{ border-color:#00A896; color:#A7F3D0; }
.pflow--solution .pflow-arrow{ color:#00A896; }
.pflow--solution .pflow-step.show{ background-color:rgba(0,168,150,0.16); }
.pflow--solution .pflow-step--final{ color:#fff; }
.pflow--solution .pflow-step--final.show{ background-color:#009B8B; border-color:#009B8B; box-shadow:0 0 18px rgba(0,155,139,0.45); }

/* ---------- Philosophy grid ---------- */
.phil-band{
  position:relative; color:var(--tx-on-dark); overflow:hidden;
  background-color:var(--bg-dark);
  background-image:
    radial-gradient(circle at 8% 10%, rgba(79,184,164,0.26), transparent 45%),
    radial-gradient(circle at 92% 90%, rgba(79,184,164,0.26), transparent 50%);
}
.phil-band .sec-eyebrow{ color:var(--accent-citron); }
.phil-band .sec-title{ color:var(--tx-on-dark); }

.phil-grid-wrap{
  position:relative; margin-top:60px; border-radius:14px;
}
/* Traveling beam: DORMANT (kept in the codebase, not deleted, per founder
   request, in case it's wanted for a different section later) -- since the
   8 Principles cards were recolored to an off-white/light card face, this
   beam's brand-citron glow (tuned for a near-black card) no longer reads
   cleanly at the light-card/dark-backdrop boundary it traces, and no
   recolor attempt (teal, citron+dark-halo) produced a result the founder
   was happy with alongside the new card look. display:none disables it
   with zero runtime cost; the SVG markup, its JS builder (initPhilBeam in
   js/main.js), and all of the CSS below remain intact and reversible. */
.phil-beam-svg{
  display:none;
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none; z-index:1;
}
@property --phil-t{ syntax:'<number>'; initial-value:0; inherits:true; }

/* Every segment in a comet shares this exact same single animation of the
   custom property --phil-t (same duration, same keyframes). Each segment's
   fixed position within the tail (--seg-offset, set inline by JS) is added
   to that one shared moving value via calc(), rather than using a separate
   animation-delay per segment. Because they all move together as one wave
   (just statically shifted along the path), there is no stepping/seaming --
   only a smooth, continuous, crisp-edged fade from tip to tail. */
.phil-comet-seg{
  fill:none; stroke:#D2F15D; stroke-width:1px; stroke-linecap:butt;
  animation:phil-beam-travel 42s linear infinite;
  animation-play-state:paused; /* only runs while .phil-beam-active is toggled on by JS (section in/near view) */
  stroke-dashoffset:calc(var(--phil-t) - var(--seg-offset, 0));
}
.phil-beam-active .phil-comet-seg{ animation-play-state:running; }
/* The two comets (a/b) launch in symmetric mirror-phase: A starts mid-top
   heading right, B starts mid-bottom heading left -- exactly half the loop
   (50 of 100 units) apart, so they stay in permanent mirrored sync forever. */
.phil-comet--a .phil-comet-seg{ animation-delay:-18s; }
.phil-comet--b .phil-comet-seg{ animation-delay:-39s; }
@keyframes phil-beam-travel{ from{ --phil-t:0; } to{ --phil-t:-100; } }
/* Cards are now individually-rounded, off-white tiles floating on real gaps
   over the dark section background (previously: a single hairline-divided
   dark slab, background color #132420, too close to the section's own
   dark-green background to read as an important, separated panel). */
.phil-grid{
  position:relative; margin-top:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  background-color:transparent; border-radius:0; overflow:visible;
}
.phil-cell{
  position:relative; background-color:var(--bg-card); border-radius:14px; overflow:hidden;
  padding:34px 26px; min-height:220px;
  opacity:0; transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease, background-color .3s ease, box-shadow .3s ease;
}
/* Accent bar: HOVER-ONLY (no static bar at rest) -- keeps the grid calm and
   uncluttered by default; the bar is the sole hover cue, no lift/translate. */
.phil-cell::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--accent-emerald-mid);
  transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.4,0,.2,1);
  z-index:1;
}
.phil-cell.show{ opacity:1; transform:translateY(0); }
.phil-cell:hover{ background-color:#E4E2D8; box-shadow:0 14px 28px rgba(0,0,0,0.14); z-index:2; }
.phil-cell:hover::before{ transform:scaleX(1); }
.phil-num{
  display:block; font-size:48px; font-weight:900; letter-spacing:-0.03em; color:var(--accent-emerald);
  line-height:1; margin-bottom:16px;
}
.phil-title{ font-size:16px; font-weight:900; letter-spacing:-0.01em; text-transform:uppercase; color:var(--tx-main); margin-bottom:12px; line-height:1.2; }
/* The ≠ glyph renders visually smaller/lighter than > at the same font-size
   in Inter, so it's bumped up to read with equal visual weight -- but scaled
   via transform, NOT font-size. A font-size increase inflates that glyph's
   own line box height, which was pulling Card 2's whole title ~2-4px lower
   than every other card's (the bug the founder spotted: "card 2 title sits
   lower than the rest"). transform:scale is purely visual/paint-time, so
   layout and line-height stay byte-identical to every other title. */
.phil-sym{ display:inline-block; transform:scale(1.35); font-weight:900; vertical-align:0.08em; margin:0 0.1em; }
.phil-body{ font-size:13.5px; font-weight:500; color:var(--tx-muted); line-height:1.55; }

/* ---------- ETNs product lineup ---------- */
.etns-band{ background-color:var(--bg-base); }
/* This section's container is widened well beyond the standard --wide
   max-width, with tighter side padding, so the 7-column table can sit
   edge-to-edge on desktop without triggering its horizontal scroller
   (which is retained purely as a tablet/mobile safety net -- see
   .etn-table-scroll below). */
#etns .container--wide{ max-width:1720px; padding:0 32px; }
/* "ETNs" eyebrow: acronym + lowercase plural "s", not shouted in caps like
   the rest of the uppercase eyebrow text. */
.etns-s{ text-transform:lowercase; }
.etn-table-wrap{
  margin-top:52px;
  background-color:#FFFFFF;
  border:1px solid var(--border);
  border-radius:18px;
  padding:8px;
  box-shadow:0 24px 60px rgba(14,26,22,0.06);
}
/* Horizontal scroll container: only engages once the viewport is narrower
   than the table's min-width (tablet/phone) -- on any normal desktop/laptop
   width the widened panel above fits the full table with no scroller.
   overflow-y is explicitly clipped (not left to its "visible" default) so
   that each row's translateY() reveal animation -- which briefly displaces
   the row a few pixels outside this box's own box before settling -- never
   registers as vertically-scrollable content and flashes a scrollbar. */
.etn-table-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
}
/* Swipe hint: only relevant once the horizontal scroller is actually
   engaged (tablet/phone widths, see media queries below) -- hidden by
   default on desktop where the table already fits with no scrolling. */
.etn-scroll-hint{ display:none; }
.etn-table{
  width:100%; min-width:0; border-collapse:collapse; table-layout:fixed;
}
.etn-table thead th{
  text-align:left;
  font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tx-soft);
  background-color:rgba(0,138,123,0.055);
  padding:16px 16px;
}
.etn-table thead th:first-child{ border-radius:10px 0 0 0; }
.etn-table thead th:last-child{ border-radius:0 10px 0 0; }
/* Type (5th) and Category (6th) columns display a pill-shaped chip in the
   body, whose own padding + border pushes its inner text inward from the
   cell's left edge -- nudge just these two header labels inward by the
   same amount so "TYPE"/"CATEGORY" line up with the first letter inside
   the chip below them, instead of with the chip's outer edge. */
.etn-table thead th:nth-child(5),
.etn-table thead th:nth-child(6){ padding-left:30px; }
.etn-table tbody td{
  padding:20px 16px;
  font-size:13.5px; font-weight:600; color:var(--tx-main);
  border-top:1px solid var(--border);
  vertical-align:middle;
  line-height:1.4;
  overflow-wrap:break-word;
}
/* Each row's divider is a border-top, so the very last row never gets a
   closing line beneath it -- add one explicitly so the last product is
   visually separated from the card's bottom padding just like every other
   row is separated from the one below it. */
.etn-table tbody tr:last-child td{
  border-bottom:1px solid var(--border);
}
/* Row-by-row cascade reveal: each product row fades/slides in one after
   another (staggered via JS, see initEtnTable in js/main.js) once the table
   scrolls into view -- a one-time reveal, not a looping animation, matching
   the site's other cascade patterns (Philosophy grid cells, Moat pillars)
   rather than the Distribution Calendar's counting/looping mechanic, which
   doesn't fit static product data. */
.etn-table tbody tr{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease, background-color .2s ease;
}
.etn-table tbody tr.show{ opacity:1; transform:translateY(0); }
.etn-table tbody tr:hover{ background-color:rgba(0,138,123,0.04); }
/* Fixed column widths (as %) let the table fill the panel exactly with no
   forced min-width -- long labels wrap onto a second line instead of
   pushing the table wider than its container, which is what removes the
   need for horizontal scrolling on normal desktop widths. */
.etn-table col.c-name{ width:19%; }
.etn-table col.c-freq{ width:11%; }
.etn-table col.c-target{ width:10%; }
.etn-table col.c-date{ width:11%; }
.etn-table col.c-type{ width:15%; }
.etn-table col.c-cat{ width:14%; }
.etn-table col.c-assets{ width:20%; }
/* Higher-specificity selectors (td.etn-name / td.etn-target) needed here so
   these beat the ".etn-table tbody td{ color:var(--tx-main); }" rule above --
   a bare class alone loses that specificity fight and silently renders as
   the default dark text color instead of emerald. Note Name is styled
   identically to Target Distribution (same emerald, same weight/size) per
   founder request. */
.etn-table tbody td.etn-name{ color:var(--accent-emerald); font-weight:900; font-size:16px; letter-spacing:-0.005em; }
.etn-table tbody td.etn-target{ color:var(--accent-emerald); font-weight:900; font-size:16px; font-variant-numeric:tabular-nums; }
.etn-date{ font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--tx-muted); font-weight:700; }
.etn-assets{ color:var(--tx-muted); }
.etn-chip{
  display:inline-flex; align-items:center;
  padding:6px 13px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.01em;
  white-space:normal; line-height:1.3; text-align:left;
}
.etn-chip--type{ background-color:var(--emerald-soft); color:var(--accent-emerald); border:1px solid rgba(0,138,123,0.18); }
.etn-chip--cat{ background-color:rgba(0,0,0,0.045); color:var(--tx-main); border:1px solid var(--border); }
.etn-caption{
  margin-top:18px; padding:0 16px 10px;
  font-size:11px; font-weight:600; color:var(--tx-soft); letter-spacing:.01em;
}

@media (max-width:1080px){
  .etn-table-wrap{ margin-top:40px; }
}
/* On phone/tablet widths the fixed percentage columns above become too
   narrow to hold each header/cell's content without overlapping -- restore
   a real min-width on the table so columns keep breathing room, and let
   .etn-table-scroll's existing overflow-x:auto do its job (horizontal swipe)
   instead of squeezing everything into an unreadable narrow layout. */
@media (max-width:900px){
  /* Wider min-width + a tighter header letter-spacing/font-size than
     desktop's, so long single words like "DISTRIBUTION" fit on one line
     within their own column instead of being forced to break mid-word. */
  .etn-table{ min-width:980px; }
  .etn-table thead th{ font-size:9.5px; letter-spacing:.04em; padding:16px 12px; }
  .etn-scroll-hint{
    display:flex; align-items:center; gap:8px;
    margin:4px 4px 10px; padding:0 12px;
    font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
    color:var(--tx-soft);
  }
}
@media (max-width:560px){
  .etn-table-wrap{ padding:6px; border-radius:14px; }
  .etn-table{ min-width:940px; }
  .etn-table thead th{ padding:13px 12px; font-size:9px; }
  .etn-table tbody td{ padding:16px 16px; font-size:12.5px; }
  .etn-target{ font-size:14px; }
  .etn-caption{ padding:0 12px 8px; }
}

/* ---------- Closing / identity ---------- */
/* Section background: same green "identity" as the Philosophy band
   (--bg-dark base + two soft accent-emerald-mid radial glows near the top),
   then a single continuous linear fade carries that dark green smoothly
   all the way down to the site's off-white by the very bottom of the
   section -- creating a clear seam against the light ETNs section above,
   without altering the white "moat" panel itself in any way. */
.closing{
  padding-bottom:150px;
  background:
    radial-gradient(circle at 8% 0%, rgba(79,184,164,0.26), transparent 42%),
    radial-gradient(circle at 92% 12%, rgba(79,184,164,0.22), transparent 48%),
    linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-base) 100%);
}
.closing-frame{
  position:relative; background-color:var(--bg-card); border-radius:18px; padding:52px 56px;
  overflow:hidden;
}
/* Faint concentric "moat" rings, decorative only -- reinforces the section's
   name/metaphor without being literal or distracting. */
.closing-frame::before{
  content:''; position:absolute; top:50%; right:-120px; width:520px; height:520px;
  transform:translateY(-50%);
  border-radius:50%;
  border:1px solid rgba(0,138,123,0.12);
  box-shadow:0 0 0 44px rgba(0,138,123,0.05), 0 0 0 88px rgba(0,138,123,0.03);
  pointer-events:none;
  transform-origin:center;
  animation:moat-breathe 9s ease-in-out infinite;
}
/* Slow "breathing" pulse: a gentle scale + opacity cycle on the decorative
   background rings, evoking calm, deliberate motion in the closing/trust
   section without being distracting. */
@keyframes moat-breathe{
  0%, 100%{ transform:translateY(-50%) scale(1); opacity:1; }
  50%{ transform:translateY(-50%) scale(1.06); opacity:.78; }
}
.closing-eyebrow{ font-size:13px; font-weight:800; letter-spacing:.28em; text-transform:uppercase; color:var(--accent-emerald); margin-bottom:22px; }
.closing-title{ font-size:clamp(30px, 5vw, 62px); font-weight:900; line-height:1.08; letter-spacing:-0.01em; word-spacing:normal; text-transform:uppercase; color:var(--tx-main); }
.closing-title .em{ color:var(--accent-emerald); }
.closing-l{
  margin-top:24px; font-size:18px; font-weight:500; color:var(--tx-main); line-height:1.6; max-width:none;
  border-left:4px solid var(--accent-emerald); padding-left:22px;
}
.closing-l strong{ color:var(--tx-main); font-weight:900; }

/* Sequential reveal: eyebrow -> title -> paragraph -> pillars, one after
   another rather than all fading in as a single flat block. */
.closing-frame [data-seq]{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
.closing-frame [data-seq].show{ opacity:1; transform:translateY(0); }

/* Moat stat strip: institutional-scale proof points, same visual language as
   the Velocity section's stat row. */
.moat-stats{
  position:relative; margin-top:40px; padding-top:36px; border-top:1px solid var(--border);
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
}
.moat-stat{ display:flex; flex-direction:column; gap:8px; }
.moat-stat-num{
  font-size:clamp(28px, 3.2vw, 40px); font-weight:900; letter-spacing:-0.02em;
  color:var(--accent-emerald); line-height:1;
}
.moat-stat-label{ font-size:13px; font-weight:700; color:var(--tx-main); line-height:1.4; }
.moat-stat-sub{ font-size:12px; font-weight:500; color:var(--tx-muted); line-height:1.4; }

/* Moat audience chips: names every client segment 458 Capital serves. */
.moat-audience{
  position:relative; margin-top:36px; padding-top:32px; border-top:1px solid var(--border);
}
.moat-audience-label{
  font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx-soft); margin-bottom:16px; display:block;
}
.moat-audience-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.moat-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px;
  background-color:var(--emerald-soft); border:1px solid rgba(0,138,123,0.18);
  font-size:13px; font-weight:700; color:var(--tx-main);
  transition:background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.moat-chip:hover{ background-color:var(--accent-emerald); border-color:var(--accent-emerald); color:#fff; transform:translateY(-2px); }

/* ---------- Footer ---------- */
footer{ background-color:var(--bg-dark); padding:36px 0; color:var(--tx-on-dark-muted); }
.foot-inner{
  max-width:1400px; margin:0 auto; padding:0 48px;
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  gap:20px 40px; align-items:center;
}
.foot-mark{ grid-row:1 / 3; display:flex; align-items:center; }
.foot-logo-crop{ height:64px; overflow:hidden; display:flex; align-items:center; }
.foot-logo{ height:170px; width:auto; object-fit:cover; }
.foot-disclosure{ grid-column:2; font-size:12px; font-weight:500; line-height:1.6; max-width:900px; color:var(--tx-on-dark-muted); }
.foot-disclosure-block{ display:block; }
.foot-disclosure-block + .foot-disclosure-block{ margin-top:0.5em; }
.foot-copy{ grid-column:2; font-size:11.5px; color:#5D6B66; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .hero-inner{ grid-template-columns:1fr; padding-top:64px; }
  .hero-visual{ order:-1; min-height:320px; margin-bottom:24px; }
  .hv-ring-wrap{ width:260px; height:260px; }
  .velocity-stats{ gap:20px; }
  .vstat{ flex:1 1 45%; max-width:180px; }
  .paradox{ grid-template-columns:1fr; }
  .phil-grid{ grid-template-columns:repeat(2,1fr); }
  .moat-stats{ grid-template-columns:repeat(2,1fr); gap:28px 20px; }
  .foot-inner{ grid-template-columns:1fr; text-align:center; }
  .foot-mark{ justify-content:center; }
  .foot-disclosure, .foot-copy{ grid-column:1; }
}

@media (max-width:820px){
  .nav-links{
    position:fixed; top:70px; right:0; background-color:var(--bg-dark);
    flex-direction:column; align-items:flex-start; gap:6px; padding:20px 24px;
    width:220px; border-radius:0 0 0 16px; transform:translateX(110%);
    transition:transform .3s ease;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ color:var(--tx-on-dark); padding:10px 4px; width:100%; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:block; }
  section{ padding:80px 0; }
  .hero-title{ font-size:38px; }
}

@media (max-width:560px){
  .phil-grid{ grid-template-columns:1fr; }
  .closing-frame{ padding:30px 24px; }
  .closing-frame::before{ display:none; }
  .moat-stats{ grid-template-columns:1fr; gap:24px; }
  .moat-chip{ font-size:12px; padding:8px 14px; }
  .hv-chip--daily, .hv-chip--weekly, .hv-chip--monthly{ display:none; }
  .vstat{ flex:1 1 100%; max-width:200px; }
  .pflow-steps{ flex-wrap:wrap; gap:10px; }
  .pflow-step{ flex:1 1 calc(50% - 10px); }
  .pflow-arrow{ display:none; }
}