/* =========================================================
   Jackfa — additions on top of site.css
   ========================================================= */

/* Icons from the inline sprite (<use href="#i-…"> / <use href="#g-…">) */
.i { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round }
.glyph { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linejoin: miter; stroke-linecap: square }

/* Lenis smooth scroll (home page) */
html.lenis, html.lenis body { height: auto }
html.lenis { scroll-behavior: auto }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip }
.lenis [data-lenis-prevent] { overscroll-behavior: contain }
.lenis.lenis-smooth iframe { pointer-events: none }

/* Home: stacked sections (driven by home.js) */
[data-block] { position: relative }
.blk-blur, .blk-shade { position: absolute; inset: 0; pointer-events: none; visibility: hidden }
.blk-shade { background: #000; opacity: 0 }
.footer-reveal { position: sticky; bottom: 0; z-index: 0; opacity: 0 }
.footer-shade { position: absolute; inset: 0; pointer-events: none; background: #000; opacity: .45 }

/* Home: image ripple + particle canvases */
.ripple { position: absolute; inset: 0; pointer-events: none; opacity: 0 }
.ripple > canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.mist-canvas { position: absolute; top: -70%; left: -150%; width: 400%; height: 240%; pointer-events: none }

/* =========================================================
   Jackfa identity — accent colour, markers, hero layout
   ========================================================= */
:root { --accent: #ff5a1f; --accent-hover: #ff7440; --accent-ink: #160700; --accent-soft: #ff5a1f1f }
::selection { color: var(--accent-ink); background: var(--accent) }
a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: var(--accent) }

/* primary buttons */
.button.light, .p-nav.dark .button { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
.button.light:hover, .p-nav.dark .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink) }
.button:not(.light):hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
.w-button:not(.secondary) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
.w-button:not(.secondary):hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink) }

/* progress bar + section markers */
.p-scroll-progress { background: var(--accent); opacity: 1 }
.h-section-label > .eyebrow:first-child::before,
.p-section-index > .eyebrow::before,
.p-hero-heading > .eyebrow::before,
.reading-head > .eyebrow::before,
.h-explore-intro > .eyebrow::before,
.h-faq > div:first-child > .eyebrow::before,
.p-footer-top .eyebrow:first-child::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 11px; vertical-align: 1px; background: var(--accent)
}

/* active states across widgets */
.h-phase-tabs button[aria-pressed=true],
.p-chapter-nav a[aria-current] { border-color: var(--accent) }
.p-chapter-nav a[aria-current]:after,
.w-segmented button[aria-pressed=true]:after { background: var(--accent) }
.p-filter-tabs button[aria-pressed=true],
.p-disclosure-tabs button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
.p-record-state-nav button[aria-pressed=true],
.p-service-explorer button[aria-pressed=true] { box-shadow: inset 3px 0 0 var(--accent) }
.proof-event-tabs button[aria-pressed=true] { border-bottom-color: var(--accent) }
.w-filter-group button[aria-pressed=true] { border-color: var(--accent); color: #fff; background: var(--accent-soft) }
.w-step-selector button[aria-pressed=true] { border-color: var(--accent) }
.w-sidebar nav > a[aria-current=page]:before { background: var(--accent) }
.w-tag.solid { color: var(--accent-ink); background: var(--accent); border-color: var(--accent) }
.readiness-ring svg circle:last-child { stroke: var(--accent) }

/* links + small details */
.text-link:hover { border-bottom-color: var(--accent) }
.h-explore-links a:hover h3 { text-decoration-color: var(--accent) }
.h-faq details[open] summary > svg { color: var(--accent) }
.p-footer-links a:hover { color: var(--accent) }

/* home hero: accent line, CA pill, play button */
.h-hero h1 span { color: var(--accent) }
.h-hero-center .h-ca { border-color: #ff5a1f59; background: #0009 }
.h-hero-center .h-ca:hover { border-color: var(--accent) }
.h-ca em { color: var(--accent) }
.h-watch > span { border-color: var(--accent); color: var(--accent) }
.h-watch:hover > span { background: var(--accent-soft) }
.h-film-poster > span { border-color: var(--accent); color: var(--accent); background: #160700aa }
.h-hero-background > img { object-position: 70% center }

/* home hero: left-aligned on wide screens, the chart sits on the right */
@media (min-width: 960px) {
  .home-v2 .h-hero-center { place-items: center start; text-align: left; padding-left: var(--space); padding-right: var(--space) }
  .home-v2 .h-hero-center .h-ca { margin: 0 0 18px }
  .home-v2 .h-hero-actions { justify-content: flex-start }
  .home-v2 .h-hero-actions:after { display: none }
}
@media (min-width: 1700px) {
  .home-v2 .h-hero-center { padding-left: max(var(--space), calc((100vw - 1500px) / 2)) }
}

/* =========================================================
   Home: 06 / $JACKFA section
   ========================================================= */
.h-hero-bottom b a { display: inline; color: inherit }
.h-hero-bottom b a:hover { color: var(--accent) }
.is-tba { color: #8a8a86 !important }

.h-token { background: #f0f0ee; color: #111; padding: 45px var(--space) 65px; overflow: hidden }
.h-token-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; align-items: center }
.h-token h2 { font-size: clamp(48px, 5.1vw, 80px) }
.h-token h2 span { color: #8a8a86 }
.h-token-grid > div:first-child > p { font-size: 15px; color: #6f6f6b; max-width: 420px; margin: 28px 0 0 }
.h-token-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin-top: 30px }

/* scrolling band */
.j-marquee { margin: -10px calc(var(--space) * -1) 55px; background: #111; color: #eee; overflow: hidden; border-block: 1px solid #000 }
.j-marquee > div { display: flex; align-items: center; gap: 26px; width: max-content; padding: 15px 0; animation: j-marquee 38s linear infinite }
.j-marquee span { font: 11px var(--mono, GeistMono, monospace); letter-spacing: .28em; white-space: nowrap }
.j-marquee i { width: 7px; height: 7px; background: var(--accent); flex-shrink: 0 }
@keyframes j-marquee { to { transform: translateX(-50%) } }

/* token card */
.j-token-card { background: #141414; color: #eee; border: 1px solid #2c2c2c; box-shadow: 12px 12px 0 #d6d6d2;
  clip-path: polygon(0 0, calc(100% - 23px) 0, 100% 23px, 100% 100%, 0 100%) }
.j-token-head { display: flex; align-items: center; gap: 14px; padding: 19px 25px; border-bottom: 1px solid #2c2c2c; font: 8px GeistMono, monospace; letter-spacing: .1em }
.j-token-head i { font-style: normal; margin-left: auto; color: var(--accent) }
.j-ca { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 22px 25px; background: #1a1a1a; border-bottom: 1px solid #2c2c2c; text-align: left; transition: background .2s }
.j-ca:hover { background: #222 }
.j-ca code { font: 13px GeistMono, monospace; color: #fff; overflow-wrap: anywhere; letter-spacing: .02em }
.j-ca [data-copy-label] { display: inline-flex; align-items: center; font: 9px GeistMono, monospace; letter-spacing: .12em; color: var(--accent); flex-shrink: 0 }
.j-token-card dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0 }
.j-token-card dl > div { padding: 16px 25px; border-bottom: 1px solid #2c2c2c }
.j-token-card dl > div:nth-child(odd) { border-right: 1px solid #2c2c2c }
.j-token-card dt { font: 8px GeistMono, monospace; letter-spacing: .12em; text-transform: uppercase; color: #8a8a8a }
.j-token-card dd { margin: 7px 0 0; font-size: 15px; letter-spacing: -.02em }
.j-roadmap-mini { padding: 22px 25px 24px }
.j-roadmap-mini > .eyebrow { font-size: 8px; color: #8a8a8a }
.j-roadmap-mini ol { margin: 14px 0 18px; padding: 0; list-style: none }
.j-roadmap-mini li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #2c2c2c }
.j-roadmap-mini li:before { content: ""; width: 7px; height: 7px; border: 1px solid #666; flex-shrink: 0 }
.j-roadmap-mini li.done:before { background: #9a9a9a; border-color: #9a9a9a }
.j-roadmap-mini li.now:before { background: var(--accent); border-color: var(--accent) }
.j-roadmap-mini b { font-weight: 450; font-size: 13px }
.j-roadmap-mini em { margin-left: auto; font: normal 8px GeistMono, monospace; letter-spacing: .12em; text-transform: uppercase; color: #777 }
.j-roadmap-mini li.now em { color: var(--accent) }
.j-roadmap-mini .text-link { font-size: 12px; color: #eee }

@media (max-width: 959px) {
  .h-token-grid { grid-template-columns: 1fr; gap: 40px }
  .h-token h2 { font-size: 48px }
}
@media (max-width: 639px) {
  .h-token { padding: 30px 22px 45px }
  .h-token h2 { font-size: 46px }
  .j-marquee { margin: -6px -22px 34px }
  .j-marquee span { font-size: 9px }
  .j-token-card { box-shadow: 7px 7px 0 #d6d6d2 }
  .j-token-card dl > div { padding: 14px 18px }
  .j-ca, .j-token-head, .j-roadmap-mini { padding-left: 18px; padding-right: 18px }
}
@media (prefers-reduced-motion: reduce) { .j-marquee > div { animation: none } }

/* workspace preview tag */
.j-preview-tag { color: var(--accent) !important; border-color: #ff5a1f66 !important }
@media (max-width: 959px) { .j-preview-tag { display: none !important } }

/* =========================================================
   Token + roadmap pages, status labels
   ========================================================= */
.p-design-label a { color: inherit; border-bottom: 1px solid currentColor }
.p-design-label a:hover { color: var(--accent) }
.j-status { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px }
.j-status:before { content: ""; width: 6px; height: 6px; border: 1px solid currentColor }
.j-status.done { color: #555 }
.j-status.done:before { background: currentColor }
.j-status.now { color: var(--accent) }
.j-status.now:before { background: var(--accent); border-color: var(--accent) }
.token-product .j-token-card { width: 100%; max-width: 540px; justify-self: end }
.token-product .p-hero-heading .h-token-actions { margin: 30px 0 6px }
.p-validation-band a, .p-small a { border-bottom: 1px solid currentColor }
@media (max-width: 959px) { .token-product .j-token-card { justify-self: stretch; max-width: none } }
@media (max-width: 639px) { .j-status { justify-content: flex-start } }
@media (max-width: 959px) { .h-hero-background > img { object-position: 100% center } }