/* Landing page (index.html) on top of css/site.css + css/relay.css: the hero with the trade-flow panel,
   the gold spotlight, the four Higgsfield scenes, the session ring, the final CTA and the restyled sections.
   Laptops get pinning, parallax and tilt; phones get swipe carousels and simple slides. */

.over { background: transparent; border-radius: 0; box-shadow: none; }
.section { padding-block: clamp(72px, 52px + 5vw, 140px); }
.over .wtls, .over .wtls-pin { background: transparent; }

/* ---------- a. hero ---------- */
.hero2 { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: clip;
  padding: calc(var(--nav-h) + 50px + clamp(32px, 6vh, 72px) + var(--safe-t)) 0 clamp(120px, 18vh, 200px); }
.h2-glow { position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: var(--glow, 1); }
.h2-glow i { position: absolute; border-radius: 50%; filter: blur(10px); }
.h2-glow i:first-child { width: 70vmax; height: 70vmax; right: -18vmax; top: -16vmax;
  background: radial-gradient(closest-side, rgba(212, 168, 75, .16), rgba(212, 168, 75, .05) 45%, transparent 72%); animation: glowDrift 18s ease-in-out infinite alternate; }
.h2-glow i:last-child { width: 46vmax; height: 46vmax; left: -14vmax; bottom: -22vmax;
  background: radial-gradient(closest-side, rgba(201, 206, 214, .07), transparent 70%); animation: glowDrift 22s ease-in-out infinite alternate-reverse; }
@keyframes glowDrift { to { transform: translate3d(-4vmax, 3vmax, 0) scale(1.08); } }
.h2-grid { position: relative; display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
.h2-copy { position: relative; z-index: 2; transform: translate3d(0, var(--hy, 0px), 0); }
.h2-title { max-width: 11ch; }
.h2-title em { padding-right: .06em; }
.h2-in { animation: h2In 1100ms var(--ease-precise) 350ms both; }   /* transform only: painted from the first frame (fast LCP) */
@keyframes h2In { from { transform: translate3d(0, 22px, 0); } }
.h2-sub { margin-top: 22px; max-width: 34rem; font-size: clamp(1.02rem, .96rem + .35vw, 1.2rem); line-height: 1.6; color: #9AA0AA; }
.h2-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.h2-cta .btn { min-height: 50px; padding-inline: 24px; }
.h2-small { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; font-size: 12px; color: #8E949E; }
.h2-small .socials a { width: 36px; height: 36px; border-color: rgba(255, 255, 255, .08); }
.h2-small .socials svg { width: 15px; height: 15px; }

/* the trade-flow panel: tilted glass window; untilts as you scroll and leans toward the cursor */
.h2-panel { position: relative; z-index: 1; perspective: 1400px; }
.flow { --ry: -8deg; --rx: 4deg; position: relative; width: 100%; max-width: 620px; margin-left: auto; aspect-ratio: 520 / 400; container-type: inline-size;
  border-radius: 20px; border: 1px solid rgba(255, 255, 255, .1);
  background: radial-gradient(120% 90% at 80% 0%, rgba(212, 168, 75, .07), transparent 55%), linear-gradient(180deg, rgba(24, 27, 33, .86), rgba(13, 15, 19, .92));
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .07);
  transform: translate3d(0, var(--fy, 0px), 0) rotateY(var(--ry)) rotateX(var(--rx)); transform-style: preserve-3d; will-change: transform; }
.flow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .7;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.2px); background-size: 3.4cqw 3.4cqw;
  -webkit-mask-image: linear-gradient(180deg, transparent 8%, #000 30%, #000 80%, transparent); mask-image: linear-gradient(180deg, transparent 8%, #000 30%, #000 80%, transparent); }
.flow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .06), transparent 30%); }
.fl-head { position: absolute; left: 0; right: 0; top: 0; height: 10.5%; display: flex; align-items: center; gap: 2.2cqw; padding: 0 4.6%;
  border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 2.7cqw; }
.fl-head b { font-weight: 600; }
.fl-head .mono { font-size: 2.1cqw; color: #9399A3; }
.fl-run { margin-left: auto; display: inline-flex; align-items: center; gap: 1.2cqw; padding: .6cqw 1.6cqw; border-radius: 99px; border: 1px solid rgba(212, 168, 75, .3); color: #E2C58A !important; }
.fl-run i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: var(--gold); animation: pulse 1.6s ease-out infinite; }
.fl-demo { padding: .5cqw 1.4cqw; border-radius: 1cqw; border: 1px solid rgba(255, 255, 255, .1); }
.fl-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fl-lines .ln { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 1.2; }
.fl-lines .ln-hot { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(212, 168, 75, .7)); opacity: .9; }
.fl-lines .lbl { font: 11px var(--font-mono); fill: #8E949E; }
.fl-dot { fill: #FFE3A3; filter: drop-shadow(0 0 6px rgba(255, 210, 120, .95)); }
.fl-node { position: absolute; left: calc(var(--x) / 520 * 100%); top: calc(var(--y) / 400 * 100%); width: calc(var(--w) / 520 * 100%); height: calc(var(--h, 54) / 400 * 100%);
  display: flex; flex-direction: column; justify-content: center; gap: .5cqw; padding: 0 2.1cqw; border-radius: 2cqw;
  border: 1px solid rgba(255, 255, 255, .1); background: #14171C; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color 400ms var(--ease-precise), box-shadow 400ms var(--ease-precise), transform 400ms var(--ease-precise); }
.fl-node b { font-size: 2.35cqw; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-node span { font-size: 1.85cqw; color: #9399A3; }
.fl-node.hot { border-color: rgba(212, 168, 75, .65); box-shadow: 0 0 0 1px rgba(212, 168, 75, .2), 0 0 28px rgba(212, 168, 75, .2); transform: translate3d(0, -1px, 0); }
.fl-node.done { flex-direction: row; align-items: center; gap: 1.2cqw; }
.fl-node.done b::before { content: "✓ "; color: var(--gold); }
.fl-node.dim { opacity: .45; }
.fl-runs { position: absolute; left: 4.6%; top: 81%; width: 36%; font-size: 1.9cqw; color: #9399A3; }
.fl-runs > span { display: block; margin-bottom: .8cqw; color: #868C96; }
.fl-runs ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .6cqw; }
.fl-runs li { display: flex; justify-content: space-between; gap: 2cqw; font-family: var(--font-mono); white-space: nowrap; animation: runIn 600ms var(--ease-precise) both; }
.fl-runs li b { font-weight: 400; color: #C9CDD3; }
.fl-runs li b::before { content: "● "; color: var(--gold); font-size: 1.4cqw; }
.fl-runs li.f b::before { color: #5B616B; }
@keyframes runIn { from { opacity: 0; transform: translate3d(0, -6px, 0); } }

/* panel layouts (generated from the same coordinates js/landing.js animates): wide on laptops, a vertical tree on phones */
.flow .fl-node[data-n="a"] { left: 3.077%; top: 16.500%; width: 28.846%; height: 13.000%; }
.flow .fl-node[data-n="b"] { left: 3.077%; top: 45.500%; width: 28.846%; height: 13.000%; }
.flow .fl-node[data-n="t"] { left: 37.692%; top: 31.000%; width: 30.769%; height: 13.000%; }
.flow .fl-node[data-n="f"] { left: 37.692%; top: 60.000%; width: 30.769%; height: 13.000%; }
.flow .fl-node[data-n="s"] { left: 71.538%; top: 31.000%; width: 25.769%; height: 13.000%; }
.flow .fl-node[data-n="d"] { left: 71.538%; top: 60.000%; width: 25.769%; height: 11.500%; }
.flow .fl-runs { left: 3.077%; top: 77.500%; }
.flow { aspect-ratio: 520 / 400; }
@media (max-width: 599px) {
.flow .fl-node[data-n="a"] { left: 27.778%; top: 10.741%; width: 44.444%; height: 9.259%; }
  .flow .fl-node[data-n="b"] { left: 27.778%; top: 27.037%; width: 44.444%; height: 9.259%; }
  .flow .fl-node[data-n="t"] { left: 3.889%; top: 45.556%; width: 43.889%; height: 9.630%; }
  .flow .fl-node[data-n="f"] { left: 52.222%; top: 45.556%; width: 43.889%; height: 9.630%; }
  .flow .fl-node[data-n="s"] { left: 3.889%; top: 62.222%; width: 43.889%; height: 9.259%; }
  .flow .fl-node[data-n="d"] { left: 3.889%; top: 78.519%; width: 43.889%; height: 8.519%; }
  .flow .fl-runs { left: 52.778%; top: 63.333%; }
  .flow { aspect-ratio: 360 / 540; }
}
.fl-lines.tall { display: none; }
@media (max-width: 599px) { .fl-lines.wide { display: none; } .fl-lines.tall { display: block; } }

/* the candle skyline rises along the bottom edge (6–10% opacity) */
.h2-sky { position: absolute; left: 0; right: 0; bottom: 0; height: 34vh; pointer-events: none; z-index: 0; opacity: .1;
  -webkit-mask-image: linear-gradient(transparent, #000 45%); mask-image: linear-gradient(transparent, #000 45%);
  transform-origin: 50% 100%; transform: scale(1, var(--sky, .82)); }
.h2-sky video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }

@media (min-width: 1024px) {
  .h2-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
}
@media (max-width: 1023px) {
  .flow { --ry: 0deg; --rx: 0deg; margin: 0 auto; }
  .h2-sky { height: 22vh; }
}
@media (max-width: 599px) {
  .hero2 { min-height: auto; padding-bottom: 88px; }
  .h2-cta .btn { flex: 1 1 100%; }
}

/* ---------- b. trust strip: one mono row ---------- */
.trust { border-block: 1px solid rgba(255, 255, 255, .06); background: rgba(13, 15, 18, .6); }
.trust-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; padding-block: 20px; font-size: 12.5px; letter-spacing: .02em; color: #A9AEB6; }
.trust-list li { min-height: 0; font-weight: 400; font-size: 12.5px; color: #A9AEB6; gap: 22px; }
.trust-list li:first-child { color: #E2C58A; }
.trust-list li i { font-style: normal; color: #4A4F57; }

/* ---------- b1. gold spotlight ---------- */
.spot { padding-block: clamp(48px, 36px + 4vw, 96px) 0; }
.spot-card { display: grid; gap: 24px; padding: clamp(20px, 16px + 1.5vw, 32px); overflow: hidden;
  background: radial-gradient(90% 120% at 100% 0%, rgba(212, 168, 75, .1), transparent 55%), var(--card); }
.spot-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.spot-sess { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.spot-sess li { padding: 7px 12px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .09); font-size: 12px; color: #8E949E; transition: all 500ms var(--ease-precise); }
.spot-sess li.on { color: #14110A; background: var(--gold); border-color: var(--gold); box-shadow: 0 0 22px rgba(212, 168, 75, .35); }
.spot-src { margin-top: 18px; font-size: 11px; color: #8E949E; }
.spot-chart { position: relative; min-height: 220px; border-radius: 12px; overflow: hidden; }
.spot-chart iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 700ms var(--ease-precise); }
.spot-chart iframe.on { opacity: 1; }
.spot-wait { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: #8E949E; }
@media (min-width: 900px) { .spot-card { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); align-items: center; } .spot-chart { min-height: 260px; } }

/* ---------- b2. award: dot grid fades into the stage, mono caption, bull/bear accents ---------- */
.wtls-cap { text-transform: none; letter-spacing: .02em; font-size: 13px; color: #C9CDD3; font-weight: 400; }
.wtls-eyebrow { color: #C9CDD3; }
.wtls-chips li { font-size: 12px; }
.wtls-acc { position: absolute; z-index: 0; width: clamp(90px, 9vw, 150px); height: auto; opacity: .55; pointer-events: none; display: none;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5)); animation: accFloat 9s ease-in-out infinite; }
.wtls-acc.bull { left: 2.5%; top: 16%; }
.wtls-acc.bear { right: 2.5%; bottom: 14%; animation-delay: -4.5s; }
@keyframes accFloat { 50% { transform: translate3d(0, -14px, 0) rotate(-3deg); } }
@media (min-width: 1280px) and (hover: hover) { .wtls-acc { display: block; } }

/* ---------- a2. the four scenes ---------- */
.feat2 { position: relative; padding-top: clamp(72px, 52px + 5vw, 140px); }
.f2-pin { position: relative; }
.f2-track { display: flex; gap: 16px; padding: 0 var(--gutter) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; scroll-padding-inline: var(--gutter); }
.f2-track::-webkit-scrollbar { display: none; }
.f2-slide { position: relative; flex: 0 0 min(86vw, 420px); height: min(68vh, 560px); border-radius: 22px; overflow: hidden; scroll-snap-align: center;
  border: 1px solid rgba(255, 255, 255, .08); background: #0A0C0F; isolation: isolate; }
.f2-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.f2-slide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13, 15, 18, 0) 30%, rgba(13, 15, 18, .85) 78%); }
.f2-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; }
.f2-copy h3 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem); line-height: 1.02; letter-spacing: -.03em; font-weight: 600; margin-bottom: 12px; }
.f2-copy p:not(.tagchip) { color: #A9AEB6; max-width: 34ch; margin-bottom: 20px; }
.f2-copy .tagchip { margin-bottom: 14px; }
.f2-ui { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.f2-count { font-size: 13px; color: #8E949E; } .f2-count b { color: var(--fg); font-weight: 500; }
.f2-bar { flex: 1; height: 1px; background: rgba(255, 255, 255, .1); position: relative; overflow: hidden; }
.f2-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold), #FFE3A3); transform-origin: 0 50%; transform: scaleX(.25); }
.f2-nav { display: flex; gap: 8px; }
.f2-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); background: #121519; }
.f2-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.f2-btn:hover { border-color: rgba(212, 168, 75, .5); }
/* laptops: pinned; scrolling slides the scenes sideways */
@media (min-width: 1024px) {
  .feat2.pinned .f2-scroll { height: calc(var(--n, 4) * 100vh); }
  .feat2.pinned .f2-pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .feat2.pinned .f2-track { overflow: visible; scroll-snap-type: none; padding-left: max(var(--gutter), calc((100vw - 1200px) / 2));
    will-change: transform; }
  .feat2.pinned .f2-slide { flex: 0 0 min(1040px, 78vw); height: min(70vh, 600px); transition: opacity 700ms var(--ease-precise), transform 900ms var(--ease-precise); opacity: .4; transform: scale(.94); }
  .feat2.pinned .f2-slide.on { opacity: 1; transform: none; }
  .feat2 .f2-slide::before { background: linear-gradient(90deg, rgba(13, 15, 18, .92) 8%, rgba(13, 15, 18, .55) 42%, rgba(13, 15, 18, 0) 70%); }
  .feat2 .f2-copy { right: auto; top: 0; bottom: 0; width: min(520px, 50%); display: flex; flex-direction: column; justify-content: center; padding: 0 56px; }
}

/* ---------- dividers sit between sections ---------- */
.divider { margin-block: 8px; padding-inline: var(--gutter); }

/* ---------- c. showcase + feature cards ---------- */
.sc-step { background: var(--card); border-color: var(--card-line); border-radius: var(--r-card); }
.sc-step .tagchip { margin-bottom: 10px; }
.feature-grid li.card { padding: 20px; background: var(--card); border-color: var(--card-line); }
.feature-grid svg { stroke: var(--gold-hi); }
.more-title { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); letter-spacing: -.02em; }

/* ---------- d. how it works: line chart in the dot grid + the gold line ---------- */
.how-chart { position: absolute; inset: 10% 0 0; width: 100%; height: 80%; }
.how-chart path { fill: none; stroke: rgba(212, 168, 75, .35); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--hp, 0));
  filter: drop-shadow(0 0 6px rgba(212, 168, 75, .4)); }
.how-video { opacity: .22; }
.how-steps li.card { padding: 22px 22px 22px 80px; }
.how-num { left: 20px; top: 22px; width: 44px; height: 44px; font-size: 13px; border-radius: 50%; background: #0D0F12; border: 1px solid rgba(212, 168, 75, .4); color: var(--gold-hi); font-weight: 500; }
.how-line { left: 41px; }

/* ---------- learn / analysis / tools / faq / community ---------- */
.an-card { border-radius: var(--r-card); }
.an-card .tagchip { margin-bottom: 12px; }
.tools-grid .tool { background: var(--card); }
.faq details { background: var(--card); border-color: var(--card-line); border-radius: 14px; transition: border-color 300ms; }
.faq details[open] { border-color: rgba(212, 168, 75, .3); }
.faq summary { min-height: 60px; }
.join { background: var(--card); }
.speed-stat.card { padding: 20px 24px; }
.speed-stat b { font-family: var(--font-mono); font-weight: 500; }
.nh-head h3 em { font-size: 1.1em; }
.nh-card { background: var(--card); border-color: var(--card-line); }

/* ---------- market sessions: a 24h ring ---------- */
.ring { display: grid; place-items: center; margin: 14px 0 6px; }
.ring svg { width: min(240px, 100%); height: auto; overflow: visible; }
.ring .track { fill: none; stroke: rgba(255, 255, 255, .06); }
.ring .arc { fill: none; stroke-linecap: round; stroke: rgba(201, 206, 214, .32); }
.ring .arc.open { stroke: rgba(201, 206, 214, .75); }
.ring .ov { fill: none; stroke: var(--gold); stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(212, 168, 75, .6)); }
.ring .tick { stroke: rgba(255, 255, 255, .18); stroke-width: 1; }
.ring text { font: 9px var(--font-mono); fill: #8E949E; }
.ring .lab { font-size: 8.5px; fill: #8E949E; }
.ring .now line { stroke: var(--gold); stroke-width: 1.5; }
.ring .now circle { fill: #FFE3A3; filter: drop-shadow(0 0 5px rgba(255, 210, 120, .9)); }
.ring .mid { font: 500 18px var(--font-mono); fill: var(--fg); }
.ring .mid2 { font-size: 9px; fill: #9399A3; }
.clock .tl, .clock .tl-labels { display: none; }

/* ---------- k. final CTA over the rising horizon ---------- */
.final { position: relative; overflow: hidden; isolation: isolate; border-top: 0; background: none; min-height: 86vh; display: flex; align-items: center; }
.final-media { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.final-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; opacity: .95;
  -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 25%, #000 80%, transparent); }
.final-sky { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; opacity: .1; }
.final-sky img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.final h2 { max-width: 14ch; }

/* ---------- l. footer: minimal columns ---------- */
.footer { padding-top: 64px; }
.foot-top { display: grid; gap: 32px; align-items: start; }
.foot-brand { display: grid; gap: 14px; justify-items: start; }
.foot-tag { font-size: 12px; color: #8E949E; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.foot-cols p { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #868C96; margin-bottom: 8px; }
.foot-cols a { display: flex; align-items: center; min-height: 40px; color: #A9AEB6; text-decoration: none; font-size: 14px; }
.foot-cols a:hover { color: var(--fg); }
@media (min-width: 900px) { .foot-top { grid-template-columns: 1fr 1.4fr; } }
@media (max-width: 479px) { .foot-cols { grid-template-columns: 1fr 1fr; } }

/* ---------- sections settle: the one leaving the top steps back (desktop, scroll-driven) ---------- */
@supports (animation-timeline: view()) {
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .over > .section:not(.final) { animation: stepBack linear both; animation-timeline: view(); animation-range: exit 10% exit 100%; transform-origin: 50% 0; }
    @keyframes stepBack { to { transform: scale(.965); opacity: .35; } }
  }
}

@media (prefers-reduced-motion: reduce) {
  .h2-glow i, .wtls-acc, .fl-run i, .h2-in { animation: none !important; }
  .flow { transform: none !important; }
  .h2-copy { transform: none !important; }
  .feat2.pinned .f2-scroll { height: auto; }
  .fl-runs li { animation: none; }
}

/* ---------- flow panel: curved connectors with port dots ---------- */
.fl-lines .ln { stroke: rgba(255, 255, 255, .16); stroke-width: 1.2; }
.fl-lines .port { fill: #0D0F12; stroke: rgba(212, 168, 75, .75); stroke-width: 1.2; }
.fl-lines .lbl { paint-order: stroke; stroke: #111418; stroke-width: 4px; }
.fl-node { justify-content: center; }

/* ---------- phones: centred hero and headings (like the reference), a readable vertical flow ---------- */
@media (max-width: 599px) {
  .h2-copy { text-align: center; }
  .h2-copy .tagchip { display: flex; width: fit-content; margin-inline: auto; justify-content: center; }
  .h2-title { max-width: none; font-size: clamp(2.5rem, 9vw + .6rem, 3.1rem); }
  .h2-sub { margin-inline: auto; }
  .h2-small { justify-content: center; }
  .wrap.head { text-align: center; }
  .wrap.head .tagchip { display: flex; width: fit-content; margin-inline: auto; justify-content: center; }
  .wrap.head .sub { margin-inline: auto; }
  .flow { border-radius: 22px; }
  .fl-head { font-size: 12.5px; height: 9.5%; gap: 8px; padding: 0 16px; }
  .fl-head .mono { font-size: 10px; }
  .fl-head .mono:not(.fl-run):not(.fl-demo) { display: none; }
  .fl-run { padding: 3px 8px; gap: 6px; } .fl-run i { width: 6px; height: 6px; }
  .fl-demo { padding: 2px 7px; border-radius: 5px; }
  .fl-node { padding: 0 12px; border-radius: 12px; gap: 2px; }
  .fl-node b { font-size: 12px; white-space: normal; line-height: 1.15; }
  .fl-node span { font-size: 10px; }
  .fl-lines .lbl { font-size: 10px; }
  .fl-runs { width: 46%; font-size: 10px; }
  .fl-runs > span { margin-bottom: 6px; }
  .fl-runs ol { gap: 5px; }
  .fl-runs li b::before { font-size: 7px; }
}

/* ---------- the opening screen: the TLS logo slide-show (js/hero.js, content/hero-slides.json), restyled ----------
   Simple and calm: tag-chip eyebrow, the second headline line in the italic serif, mono counter, thin gold
   progress, no corner frames. It scrolls away normally (no sticky sheet) so the light ribbon and dot grid run on. */
.hero { position: relative; top: auto; height: 100vh; height: 100svh; }
.hero-ui { padding-top: calc(var(--nav-h) + 50px + var(--safe-t) + 18px); }
.hero-frame::after { display: none; }
.hero-eyebrow.tagchip { width: fit-content; background: rgba(10, 12, 15, .55); color: #E2C58A; }
.hero-eyebrow.tagchip::before { box-shadow: 0 0 10px rgba(212, 168, 75, .8); }
.hero-title { font-weight: 600; letter-spacing: -.03em; font-size: clamp(2.4rem, 1.5rem + 3.8vw, 3.8rem); }
.hero-title .hl + .hl > span { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--gold-hi); padding-right: .08em; }
.hero-count { font-family: var(--font-mono); font-weight: 500; font-size: 12.5px; letter-spacing: .04em; }
.hero-desc { color: #C3C7CE; }
.hero-hint { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; background: rgba(10, 12, 15, .5); border-color: rgba(255, 255, 255, .1); }
.hero-progress { height: 1px; background: rgba(255, 255, 255, .06); }
.hero-progress i { box-shadow: 0 0 8px rgba(212, 168, 75, .7); }
.hero .btn.gold { min-height: 50px; padding-inline: 26px; }
/* the section after it no longer opens the page */
.hero2 { min-height: 0; padding: clamp(80px, 60px + 6vw, 150px) 0 clamp(140px, 20vh, 220px); }
.h2-title { font-size: clamp(2.6rem, 1.2rem + 5.2vw, 5.4rem); line-height: 1.02; }
@media (max-width: 599px) {
  .hero-left { align-items: center; text-align: center; }
  .hero-right { align-items: center; text-align: center; }
  .hero-desc { margin-inline: auto; }
  .hero2 { padding-top: 72px; }
}