/* Below-the-fold section styles (problem, services, examples, how it works, who we work with,
   security, how we work, FAQ, contact, footer, cards). Split from styles.css so the first screen
   renders without waiting for them: the home page links this file right after the hero; the other
   pages link it in <head> after styles.css. Tokens live in styles.css. */

/* =========================================================
   PROBLEM — scattered files that sort themselves
   ========================================================= */
.problem-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .problem-grid { grid-template-columns: 1fr 1fr; gap: 80px; } }
.chaos-wrap { display: grid; gap: 10px; }
.chaos { position: relative; height: 340px; border: 1px solid var(--line); background: var(--bg-2); overflow: hidden; }
.chaos-cols { position: absolute; inset: 16px; display: grid; gap: 12px; opacity: 0; transition: opacity .5s; pointer-events: none; }
@media (min-width: 560px) { .chaos-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chaos-cols > div { border-top: 1px solid var(--line-strong); padding-top: 28px; color: var(--accent-ink); position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; min-width: 0; }
.chaos-cols > div::before { content: attr(data-label); position: absolute; left: 0; top: 6px; }
.chaos.sorted .chaos-cols { pointer-events: auto; }
@media (max-width: 559px) { .chaos { height: 440px; } .chaos-cols { gap: 8px; } .chaos-cols > div { padding-top: 24px; } }
.chaos.sorted .chaos-cols { opacity: 1; }
.chip { position: absolute; left: var(--x); top: var(--y); padding: 6px 10px; border: 1px solid var(--line-strong); background: var(--bg); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .04em; color: var(--muted); white-space: nowrap; transform: rotate(var(--r)); animation: drift var(--t, 9s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); transform-origin: center; }
.chip:nth-child(3n) { border-color: var(--accent); color: var(--accent-ink); }
@keyframes drift { from { transform: translate(0, 0) rotate(var(--r)); } to { transform: translate(var(--dx, 14px), var(--dy, -10px)) rotate(calc(var(--r) * -0.6)); } }
.chaos.sorted .chip { position: static; animation: none; transform: none; white-space: normal; overflow-wrap: break-word; max-width: 100%; border-color: var(--line-strong); color: var(--ink); font-size: var(--fs-mono); text-transform: none; letter-spacing: .02em; }
@media (max-width: 559px) { .chaos.sorted .chip { padding: 5px 8px; } }
.chaos.sorted .chip:nth-child(3n) { border-color: var(--line-strong); color: var(--ink); }
.chaos.flip .chip { transition: transform .7s var(--ease); transition-delay: var(--fd, 0s); }
.chaos-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.chaos-bar .modes button { font-size: var(--fs-mono); }
.problem-list { list-style: none; margin: 28px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.problem-list li { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; gap: 16px; color: var(--muted); }
.problem-list .label { color: var(--accent-ink); flex: none; padding-top: 4px; }

/* =========================================================
   SERVICES — the three offers
   ========================================================= */
.offer-grid { grid-template-columns: 1fr; }
@media (min-width: 900px) { .offer-grid { grid-template-columns: repeat(3, 1fr); } }
.offer { padding: var(--card-pad); display: flex; flex-direction: column; gap: 14px; position: relative; transition: background .3s; }
.offer:hover { background: var(--bg-2); }
.offer::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.offer:hover::before, .offer:target::before { transform: scaleX(1); }
.offer .big-n { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 4vw, 3.6rem); letter-spacing: -0.05em; line-height: .9; color: transparent; -webkit-text-stroke: 1px var(--accent); }
.offer h3 { font-size: clamp(1.4rem, 2.2vw, 1.7rem); }
.offer p { color: var(--muted); margin: 0; }
.offer ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.offer li { display: flex; gap: 10px; font-size: .95rem; color: var(--muted); }
.offer li::before { content: ""; width: 6px; height: 6px; margin-top: 9px; flex: none; background: var(--accent); }
.offer li b { color: var(--ink); font-weight: 600; }
.offer .ex { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--faint); }
.offer .ex a { display: inline-flex; align-items: flex-end; min-height: 44px; padding-bottom: 4px; color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid var(--accent); }
.deliver { margin-top: 1px; border: 1px solid var(--line); border-top: 0; padding: 22px var(--card-pad); display: grid; gap: 10px 32px; align-items: center; background: var(--bg-2); }
@media (min-width: 900px) { .deliver { grid-template-columns: auto 1fr auto; } }
.deliver .label { color: var(--accent-ink); }
.deliver p { margin: 0; color: var(--muted); max-width: 70ch; }
.deliver p b { color: var(--ink); font-weight: 600; }

/* generic cards (kept for industry pages and shared parts) */
.cards-3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
.card { padding: var(--card-pad); display: flex; flex-direction: column; gap: 14px; position: relative; transition: background .3s; min-height: 100%; }
.card:hover { background: var(--bg-2); }
.card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.card:hover::before { transform: scaleX(1); }
.card .top { display: flex; justify-content: space-between; gap: 8px; }
.card .top .num { color: var(--accent-ink); }
.card p { color: var(--muted); font-size: .98rem; margin: 0; }
.card .price { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.card .price b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--ink-strong); margin-top: 4px; }
.card .price small { display: block; color: var(--faint); font-size: .82rem; margin-top: 2px; }
.fine { color: var(--faint); font-size: .88rem; margin-top: 20px; max-width: 70ch; }

/* =========================================================
   EXAMPLES
   ========================================================= */
.banner { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px dashed var(--accent); color: var(--accent-ink); margin-bottom: 20px; }
.banner::before { content: ""; width: 8px; height: 8px; background: var(--accent); flex: none; }
.tabs-wrap { position: relative; border: 1px solid var(--line); border-bottom: 0; }
.tabs { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tabs-wrap.scrolls .tabs { padding-right: 90px; }
.tabs-wrap::before, .tabs-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 48px; pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 1; }
.tabs-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.tabs-wrap::after { right: 0; background: linear-gradient(90deg, transparent, var(--bg)); }
.tabs-wrap.can-left::before { opacity: 1; }
.tabs-wrap.can-right::after { opacity: 1; right: 88px; }
.tabs-nav { display: none; position: absolute; right: 0; top: 0; bottom: 0; z-index: 2; border-left: 1px solid var(--line); background: var(--bg); }
.tabs-wrap.scrolls .tabs-nav { display: flex; }
.tabs-nav button { width: 44px; min-height: 44px; height: 100%; background: var(--bg); border: 0; color: var(--muted); border-radius: 0; display: grid; place-items: center; transition: color .2s, background .2s; }
.tabs-nav button + button { border-left: 1px solid var(--line); }
.tabs-nav button:hover { color: var(--ink-strong); background: var(--bg-2); }
.tabs-nav button[disabled] { opacity: .35; cursor: default; }
.tabs-nav svg { width: 14px; height: 14px; }
.tab { flex: 1 0 auto; scroll-snap-align: start; background: var(--bg); border: 0; border-right: 1px solid var(--line); padding: 14px 18px; min-height: 44px; color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--mono-tracking); text-transform: uppercase; white-space: nowrap; position: relative; border-radius: 0; transition: background .2s, color .2s; text-align: left; display: grid; gap: 3px; }
.tab small { font-size: inherit; letter-spacing: .1em; color: var(--faint); }
.tab:last-child { border-right: 0; }
.tab:hover { background: var(--bg-2); color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink-strong); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--accent-line); }
.tab[aria-selected="true"] small { color: var(--accent-ink); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); }
/* phones: the six home examples become a 2×3 grid of tabs, all visible at once */
@media (max-width: 639px) {
  #exTabs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); overflow: visible; }
  #exTabs .tab { border-right: 0; white-space: normal; padding: 12px 14px; }
  #exTabsWrap .tabs-nav, #exTabsWrap::before, #exTabsWrap::after { display: none; }
  #exTabsWrap.scrolls .tabs { padding-right: 0; }
}
.demo { border: 1px solid var(--line); padding: clamp(20px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-content: start; background: var(--bg); min-height: 420px; }
@media (min-width: 900px) { .demo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; min-height: 480px; } }
.demo > * { min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 28px; list-style: none; padding: 0; }
.chips li { border: 1px solid var(--line-strong); padding: 6px 10px; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .08em; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; position: relative; overflow: hidden; }
.chips li::before { content: ""; width: 6px; height: 6px; background: var(--data); flex: none; }
.chips.search li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--data) 28%, transparent), transparent); transform: translateX(-100%); animation: shimmer .5s var(--ease) 1; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes shimmer { to { transform: translateX(100%); } }
.ask { border: 1px solid var(--line-strong); background: var(--bg-2); padding: 16px; min-height: 108px; font-size: 1.02rem; color: var(--ink-strong); line-height: 1.5; overflow-wrap: anywhere; }
.ask .rest { visibility: hidden; }
.ask .typed::after { content: ""; border-left: 8px solid var(--accent); margin-right: -8px; animation: blink 1s steps(2) infinite; }   /* inline bar, zero net width: no re-wrap */
.who-note { margin-top: 18px; color: var(--faint); font-size: .86rem; max-width: 52ch; }
.demo-tools { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tool-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; border-radius: 0; transition: color .2s, border-color .2s; }
.tool-btn:hover { color: var(--ink); border-color: var(--ink); }
.tool-btn::before { content: "↻"; font-size: 13px; line-height: 1; }
/* The answer card is never empty: while a question is asked the current answer dims (by colour,
   so contrast holds), then the new lines swap in place one at a time. */
.answer { border: 1px solid var(--line-strong); background: var(--panel); padding: 22px; align-self: start; }
.answer .a-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.answer .a-head .mode { color: var(--accent-ink); }
.answer h3, .answer h4, .answer .a-title { font-size: 1.3rem; margin-bottom: 14px; letter-spacing: -0.02em; transition: color .3s; }
/* industry answer titles are paragraphs (no heading under the use-case h3), styled like the home example's */
.answer .a-title { font-family: var(--font-display); font-weight: var(--display-weight); line-height: var(--display-leading); color: var(--ink-strong); margin-top: 0; text-wrap: balance; }
.answer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.answer li { color: var(--muted); font-size: .94rem; line-height: 1.5; text-wrap: pretty; transition: color .3s; }
.answer li strong { color: var(--ink-strong); font-weight: 600; transition: color .3s; }
.answer.dim h3, .answer.dim .a-title { color: var(--muted); }
.answer.dim li, .answer.dim li strong, .answer.dim .srcs div { color: var(--faint); }
.answer li.swap, .answer .srcs div.swap { animation: swapLine .32s var(--ease) both; animation-delay: calc(var(--n, 0) * 90ms); }
@keyframes swapLine { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.answer .srcs { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.answer .srcs div { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .06em; color: var(--muted); overflow-wrap: anywhere; padding: 2px 4px; margin: 0 -4px; transition: background .25s, color .25s; }
.answer .srcs div.hl { background: var(--bg-2); color: var(--ink-strong); box-shadow: inset 2px 0 0 var(--accent); }
.answer .srcs b { color: var(--accent-ink); font-weight: 500; margin-right: 6px; }
.answer span.cite { color: var(--accent-ink); border-color: var(--accent); cursor: default; }
.answer button.cite { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -12px 0; padding: 0; border: 0; background: none; vertical-align: middle; }
.answer button.cite > span { display: inline-block; padding: 0 4px; border: 1px solid var(--accent); color: var(--accent-ink); line-height: 1.5; transition: none; }
.answer button.cite.hl > span, .answer button.cite:hover > span { color: #130a05; background: var(--accent-hot); border-color: var(--accent-hot); animation: citeGlow .5s var(--ease); }
.answer span.cite.hl, .answer span.cite:hover { color: #130a05; background: var(--accent-hot); border-color: var(--accent-hot); }

/* =========================================================
   HOW IT WORKS — pipeline
   ========================================================= */
.pipeline { border: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); position: relative; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(6, 1fr); } }
.steps-rail { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(var(--p, .1667)); transform-origin: left; transition: transform .45s var(--ease); z-index: 2; pointer-events: none; }
.step { text-align: left; background: var(--bg); border: 0; padding: 18px 16px 20px; min-height: 44px; position: relative; display: grid; gap: 10px; align-content: start; color: var(--muted); transition: background .25s, color .25s, box-shadow .25s; border-radius: 0; }
.step:hover { background: var(--bg-2); color: var(--ink); }
.step .n { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--mono-tracking); color: var(--muted); }
.step .t { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; color: inherit; }
.step[aria-selected="true"] { background: var(--bg-2); color: var(--ink-strong); box-shadow: inset 0 0 0 1px var(--accent-line); }
.step[aria-selected="true"] .n { color: var(--accent-ink); }
.step.done .n::after { content: " ·"; color: var(--accent-ink); }
.step-panel { padding: clamp(24px, 4vw, 40px); display: grid; gap: 32px; background: var(--bg); border-top: 1px solid var(--line); }
.step-panel[hidden] { display: none; }
.step-panel { min-height: var(--panel-h, 0px); align-content: start; }
@media (max-width: 639px) { .step-panel .detail-list, .step-panel .tech { display: none; } }
@media (min-width: 900px) { .step-panel { grid-template-columns: 1.2fr 1fr; } }
.step-panel h3 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 10px 0 14px; }
.step-panel p { color: var(--muted); max-width: 52ch; }
.step-panel .tech { font-size: .9rem; color: var(--faint); border-left: 2px solid var(--line-strong); padding-left: 12px; margin-top: 14px; }
.step-side { display: grid; gap: 18px; align-self: start; }
.detail-list { list-style: none; margin: 0; display: grid; gap: 0; border: 1px solid var(--line); align-self: start; }
.detail-list li { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: .93rem; color: var(--muted); display: flex; gap: 12px; }
.detail-list li:last-child { border-bottom: 0; }
.detail-list li::before { content: ""; width: 6px; height: 6px; margin-top: 9px; flex: none; background: var(--accent); }
.step-panel.swap > * { animation: swapIn .45s var(--ease); }
@keyframes swapIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* mini diagrams inside the pipeline panels (hero vocabulary) */
.mini { border: 1px solid var(--line); background: var(--bg-2); padding: 16px; min-height: 120px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 10px; position: relative; overflow: hidden; }
.mini .mlabel { font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mt { height: 32px; border: 1px solid var(--line); background: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mini-connect .row { display: grid; grid-template-columns: repeat(4, 1fr) 28px 40px; gap: 8px; align-items: center; }
.mini-connect .mt { animation: miniLight 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes miniLight { 0%, 60%, 100% { border-color: var(--line); color: var(--muted); } 15%, 35% { border-color: var(--accent); color: var(--ink-strong); box-shadow: inset 0 0 0 1px var(--accent-line); } }
.mini-connect .arrow { height: 1px; background: repeating-linear-gradient(to right, var(--data) 0 4px, transparent 4px 8px); position: relative; }
.mini-connect .arrow::after { content: ""; position: absolute; top: -2px; left: 0; width: 5px; height: 5px; background: var(--data); animation: miniPacket 1.4s linear infinite; }
@keyframes miniPacket { to { transform: translateX(24px); } }
@media (max-width: 479px) {
  .mini-connect .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24px 40px; }
  .mini-connect .arrow { grid-column: 3; grid-row: 1 / span 2; }
  .mini-connect .mhex { grid-column: 4; grid-row: 1 / span 2; }
}
.mini-connect .mhex { width: 40px; height: 44px; }
.mini-connect .mhex polygon { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.mini-clean .pair { display: grid; grid-template-columns: 1fr 18px 1fr; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: 0; }
.mini-clean .b { color: var(--accent-ink); background: transparent; box-shadow: inset 2px 0 0 var(--accent); padding: 4px 6px; text-decoration: line-through; text-decoration-color: var(--line-strong); overflow-wrap: anywhere; }
.mini-clean .a { color: var(--ink); padding: 4px 6px; border: 1px solid var(--line); animation: miniFix 1.1s var(--ease) both; animation-delay: calc(.4s + var(--i) * .35s); overflow-wrap: anywhere; }
.mini-clean .arr { color: var(--faint); text-align: center; }
@keyframes miniFix { from { background: var(--accent); color: #130a05; } to { background: transparent; } }
.mini-sort .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mini-sort .mt { animation: miniSort .9s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes miniSort { from { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: .5; } to { transform: none; opacity: 1; } }
.mini-act ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mini-act li { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink); animation: lineIn .4s var(--ease) both; animation-delay: calc(.2s + var(--i) * .4s); }
.mini-act svg { width: 14px; height: 14px; flex: none; }
.mini-act svg { fill: none; stroke: var(--accent-hot); stroke-width: 1.8; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tickDraw .4s var(--ease) forwards; animation-delay: calc(.5s + var(--i) * .4s); }
.mini-act .cite { margin-left: auto; }
.mini-safe .box { position: relative; border: 1.5px solid var(--accent); padding: 14px 12px 12px; background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px); background-size: 12px 12px; display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr; gap: 0; align-items: center; }
.mini-safe .box .mt { height: 30px; }
.mini-safe .box .wire { height: 1px; background: repeating-linear-gradient(to right, var(--data) 0 3px, transparent 3px 6px); position: relative; }
.mini-safe .box .wire::after { content: ""; position: absolute; top: -2px; left: 0; width: 5px; height: 5px; background: var(--data); animation: miniPacket 1.3s linear infinite; }
.mini-safe .btag { position: absolute; top: -8px; left: 10px; padding: 0 6px; background: var(--bg-2); color: var(--accent-ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; }
.mini-safe .out { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-top: 14px; position: relative; }
.mini-safe .out .mt { border-style: dashed; }
.mini-safe .out .pkt { position: relative; height: 10px; }
.mini-safe .out .pkt::before { content: ""; position: absolute; top: 2px; left: 0; width: 6px; height: 6px; background: var(--accent); animation: accessStop 3s var(--ease) infinite; }
@keyframes accessStop { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 55%, 85% { transform: translateX(calc(100% + 60px)); opacity: 1; } 100% { transform: translateX(calc(100% + 60px)); opacity: 0; } }

/* token bars, now inside the "Find" step */
.token-bars { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 8px; }
.bar-row { min-width: 0; }
.mini-tokens .badge { align-self: start; }
@media (max-width: 479px) { .bar-row .label span:last-child { display: none; } }
.bar-row .label { display: flex; justify-content: space-between; gap: 12px; height: 20px; margin-bottom: 8px; color: var(--ink); white-space: nowrap; overflow: hidden; }
.bar-row .label span:last-child { color: var(--muted); }
.bar-track { position: relative; container-type: inline-size; height: 28px; border: 1px solid var(--line); background: repeating-linear-gradient(to right, transparent 0 11px, var(--line) 11px 12px); }
.bar-fill { height: 100%; width: 100%; transform-origin: left; }
.bar-fill.all { background: var(--data); opacity: .85; transform: scaleX(0); animation: barFill 1.1s var(--ease) forwards; }
.bar-fill.few { background: var(--accent); transform: scaleX(0); animation: barFew .6s var(--ease) 2.35s forwards; }
@keyframes barFill { to { transform: scaleX(1); } }
@keyframes barFew { to { transform: scaleX(.14); } }
.bar-seg { position: absolute; top: 0; left: var(--at); width: 4%; height: 100%; background: var(--accent); opacity: 0; animation: segLift 1.3s var(--ease) forwards; animation-delay: calc(1.1s + var(--i) * .25s); z-index: 1; }
@keyframes segLift { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; transform: translate(0, -10px); } 100% { opacity: 1; transform: translate(calc(var(--to) - var(--at)), 78px); } }
.tokens-note { margin: 0; color: var(--faint); font-size: .85rem; }

/* =========================================================
   WHO WE HELP — compact list of industries
   ========================================================= */
.who-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); display: grid; }
@media (min-width: 760px) { .who-list { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.who-list li { border-bottom: 1px solid var(--line); }
.who-list a, .who-list .plain { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 14px; align-items: start; padding: 16px 0; text-decoration: none; color: inherit; }
.who-list .ind-icon { width: 24px; height: 24px; margin-top: 2px; fill: none; stroke: var(--accent-ink); stroke-width: 1.2; transition: stroke .2s; }
.who-list h3 { font-size: 1.15rem; transition: color .2s; }
.who-list p { margin: 4px 0 0; color: var(--muted); font-size: .95rem; }
.who-list .go { color: var(--faint); align-self: center; width: 14px; height: 14px; transition: color .2s, transform .2s var(--ease); }
.who-list a:hover h3, .who-list a:focus-visible h3 { color: var(--accent-ink); }
.who-list a:hover .go { color: var(--accent-ink); transform: translateX(3px); }
.who-list a:hover .ind-icon { stroke: var(--accent-hot); }
.who-list .tag { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; color: var(--accent-ink); margin-left: 8px; vertical-align: 2px; }

/* =========================================================
   SECURITY
   ========================================================= */
.sec-grid { display: grid; gap: 48px; }
@media (min-width: 900px) { .checks { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.boundary { border: 1.5px solid var(--accent); position: relative; padding: 44px 20px 24px; background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px); background-size: 14px 14px; }
.boundary > .tag { position: absolute; top: 0; left: 0; transform: translateY(-50%); margin-left: 16px; background: var(--bg); padding: 2px 10px; color: var(--accent-ink); }
.flow { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.node { background: var(--bg); border: 1px solid var(--line-strong); padding: 14px 16px; position: relative; }
.node .label { color: var(--accent-ink); }
.node b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink-strong); }
.node small { color: var(--muted); font-size: .84rem; display: block; line-height: 1.4; margin-top: 2px; }
.flow li { position: relative; padding-bottom: 28px; }
.flow li:last-child { padding-bottom: 0; }
.flow li:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 28px; background: repeating-linear-gradient(to bottom, var(--data) 0 4px, transparent 4px 8px); }
.flow li:not(:last-child)::before { content: ""; position: absolute; left: calc(50% - 2px); bottom: 24px; width: 5px; height: 5px; background: var(--data); z-index: 1; animation: packetDown 1.4s linear infinite; }
@keyframes packetDown { from { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { transform: translateY(24px); opacity: 0; } }
@media (min-width: 900px) {
  .flow { grid-template-columns: repeat(4, 1fr); }
  .flow li { padding-bottom: 0; padding-right: 28px; }
  .flow li:last-child { padding-right: 0; }
  .flow li:not(:last-child)::after { left: auto; right: 0; top: 50%; bottom: auto; width: 28px; height: 1px; background: repeating-linear-gradient(to right, var(--data) 0 4px, transparent 4px 8px); }
  .flow li:not(:last-child)::before { left: auto; right: 24px; top: calc(50% - 2px); bottom: auto; animation: packetRight 1.4s linear infinite; }
  @keyframes packetRight { from { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { transform: translateX(24px); opacity: 0; } }
}
.outside { margin-top: 28px; display: grid; gap: 0; }
.outside .node { border-style: dashed; }
.outside .gap { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.outside .gap::before, .outside .gap::after { content: ""; flex: 1; height: 1px; background: repeating-linear-gradient(to right, var(--line-strong) 0 4px, transparent 4px 8px); }
.access { position: relative; height: 44px; margin: 0 auto; width: 1px; background: repeating-linear-gradient(to bottom, var(--line-strong) 0 4px, transparent 4px 8px); }
.access .pkt { position: absolute; left: -3px; top: 0; width: 7px; height: 7px; background: var(--accent); animation: accessUp 3.2s var(--ease) infinite; }
.access .atag { position: absolute; left: 14px; top: -2px; white-space: nowrap; color: var(--accent-ink); font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: .12em; opacity: 0; animation: tagIn 3.2s var(--ease) infinite; }
@keyframes accessUp { 0% { transform: translateY(37px); opacity: 0; } 12% { opacity: 1; } 55% { transform: translateY(0); opacity: 1; } 88% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes tagIn { 0%, 50% { opacity: 0; } 62%, 88% { opacity: 1; } 100% { opacity: 0; } }
.checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.checks li { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 34px 1fr; gap: 6px; }
.checks .label { color: var(--accent-ink); padding-top: 4px; }
.checks b { color: var(--ink-strong); font-weight: 600; display: block; }
.checks span.d { color: var(--muted); font-size: .95rem; }
.support { margin-top: 28px; border: 1px solid var(--line); padding: 18px 20px; background: var(--bg-2); }
.support p { margin: 8px 0 0; color: var(--muted); font-size: .94rem; }

/* =========================================================
   HOW WE WORK — timeline (keeps id="pricing" for old links)
   ========================================================= */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); counter-reset: tl; }
@media (min-width: 800px) { .timeline { grid-template-columns: repeat(4, 1fr); } }
.timeline li { background: var(--bg); padding: 28px var(--card-pad) 32px; position: relative; display: flex; flex-direction: column; gap: 12px; transition: background .3s; }
.timeline li:hover { background: var(--bg-2); }
.timeline li::before { content: ""; position: absolute; left: var(--card-pad); top: 0; height: 14px; width: 2px; background: var(--accent); }
.timeline li::after { content: ""; position: absolute; left: var(--card-pad); right: 0; top: 0; height: 1px; background-image: repeating-linear-gradient(to right, var(--line-strong) 0 1px, transparent 1px 10px); background-size: 100% 5px; background-repeat: repeat-x; }
.timeline .top { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; }
.timeline .when { color: var(--accent-ink); }
.timeline .big { font-family: var(--font-display); font-weight: 620; font-size: clamp(1.45rem, 2.4vw, 1.8rem); letter-spacing: -0.035em; color: var(--ink-strong); line-height: 1; }
.timeline p { color: var(--muted); font-size: .98rem; margin: 0; }
.path { grid-template-columns: 1fr; }
@media (min-width: 800px) { .path { grid-template-columns: repeat(4, 1fr); } }
.path .card { padding-bottom: 36px; }
.path .big { font-family: var(--font-display); font-weight: 620; font-size: clamp(1.45rem, 2.4vw, 1.8rem); letter-spacing: -0.035em; color: var(--ink-strong); line-height: 1; }
.path .when { color: var(--accent-ink); }
.callout { margin-top: 24px; border-left: 2px solid var(--accent); padding: 4px 0 4px 18px; color: var(--muted); max-width: 72ch; }
.callout b { color: var(--ink-strong); font-weight: 600; }

/* =========================================================
   WHO (legacy card grid, still used by industry pages)
   ========================================================= */
.who { grid-template-columns: 1fr; }
@media (min-width: 700px) { .who { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .who { grid-template-columns: repeat(3, 1fr); } }
.who .card h3 { font-size: 1.3rem; }

/* =========================================================
   FAQ — native <details>, same look as before
   ========================================================= */
.faq { border-top: 1px solid var(--line); max-width: 920px; }
.faq-grid { display: grid; gap: 32px; margin-top: 40px; }
@media (min-width: 1280px) { .faq-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; } }
.faq-ask { border: 1px solid var(--line); background: var(--bg-2); padding: 22px; display: grid; gap: 10px; position: relative; }
.faq-ask::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: var(--accent); }
.faq-ask p { margin: 0; color: var(--muted); }
.faq-ask .big { font-family: var(--font-display); font-weight: 620; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--ink-strong); line-height: 1.2; }
@media (min-width: 1280px) { .faq-ask { position: sticky; top: calc(var(--nav-h) + 24px); } }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; text-align: left; padding: 22px 0; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 2.4vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.2; color: var(--ink-strong); transition: color .2s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:hover { color: var(--accent-ink); }
.faq-item summary:focus-visible { outline-offset: -2px; }
.faq-item .pm { width: 18px; height: 18px; position: relative; flex: none; }
.faq-item .pm::before, .faq-item .pm::after { content: ""; position: absolute; background: currentColor; left: 0; right: 0; top: 8px; height: 1.5px; transition: transform .3s var(--ease); }
.faq-item .pm::after { transform: rotate(90deg); }
.faq-item[open] .pm::after { transform: rotate(0); }
.faq-a { padding-bottom: 22px; }
.faq-a p { color: var(--muted); max-width: 66ch; margin: 0 0 .8em; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--ink); text-decoration-color: var(--accent); }
.faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
.faq-item[open]::details-content { block-size: auto; }
.faq-item.instant::details-content { transition: none; }   /* opened by a #link on arrival */

/* =========================================================
   CONTACT / FOOTER
   ========================================================= */
.contact-grid { display: grid; gap: 48px; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 80px; } }
.about { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 18px; color: var(--muted); max-width: 52ch; font-size: .98rem; }
.about b { color: var(--ink); font-weight: 600; }
.form { display: grid; gap: 20px; border: 1px solid var(--line-strong); padding: clamp(20px, 4vw, 36px); background: var(--bg-2); }
.field { display: grid; gap: 8px; }
.field label { color: var(--muted); }
.field label .opt { color: var(--faint); letter-spacing: .08em; }
.field input, .field textarea { width: 100%; background: var(--bg); color: var(--ink-strong); border: 1px solid var(--line-strong); border-radius: 0; padding: 13px 14px; font: inherit; font-size: 1rem; transition: border-color .2s; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 1px; border-color: var(--accent); }
:root[data-theme="light"] .field input:focus-visible, :root[data-theme="light"] .field textarea:focus-visible { outline-color: var(--accent-ink); }
.field.invalid input, .field.invalid textarea { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.field .err { display: none; margin: 0; color: var(--accent-ink); font-size: .88rem; }
.field.invalid .err { display: flex; gap: 8px; align-items: baseline; }
.field .err::before { content: "!"; font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--accent); padding: 0 5px; line-height: 1.4; flex: none; }
.form[aria-busy="true"] input, .form[aria-busy="true"] textarea { opacity: .7; }
.form-note { min-height: 1.6em; color: var(--muted); font-size: .95rem; margin: 0; display: flex; gap: 10px; align-items: baseline; }
.form-note:empty { display: block; }
.form-note.ok { color: var(--ink); border-left: 2px solid var(--data); padding-left: 12px; }
.form-note.ok::before { content: "✓"; color: var(--data); font-family: var(--font-mono); font-weight: 500; flex: none; }
.form-note.bad { color: var(--accent-ink); border-left: 2px solid var(--accent); padding-left: 12px; }
.form-note.bad::before { content: "!"; font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--accent); padding: 0 5px; line-height: 1.4; flex: none; }
.form-note.busy::before { content: "…"; color: var(--muted); font-family: var(--font-mono); flex: none; }
.form-note:focus { outline: none; }
.form .todo { color: var(--faint); font-size: .8rem; margin: 0; }
.footer { border-top: 1px solid var(--line-strong); padding-block: 40px max(56px, env(safe-area-inset-bottom)); }
.footer .wrap { display: grid; gap: 28px; }
@media (min-width: 800px) { .footer .wrap { grid-template-columns: 1.2fr 1fr 1fr; } }
.footer ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 0; }
.footer a { text-decoration: none; color: var(--muted); }
.footer ul a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.contact-grid .email, .faq-ask .email { display: inline-flex; align-items: center; min-height: 44px; }
.footer .logo { display: inline-flex; color: var(--ink-strong); }
.footer-simple .wrap { display: grid; gap: 16px 40px; }
@media (min-width: 800px) { .footer-simple .wrap { grid-template-columns: 1fr auto; align-items: start; } }
.footer .footer-links { display: flex; flex-wrap: wrap; column-gap: 22px; margin: 0; }
.footer a:hover { color: var(--ink-strong); }
.footer .fine { margin: 10px 0 0; }
.footer .motion-btn { margin-top: 14px; }

/* =========================================================
   INDUSTRIES (cards on the main page; linked "Who we help" cards)
   ========================================================= */
.ind-card { text-decoration: none; color: inherit; }
.ind-card .top { align-items: center; }
.ind-icon { width: 26px; height: 26px; fill: none; stroke: var(--accent-ink); stroke-width: 1.2; flex: none; }
.ind-card h3 { font-size: 1.3rem; }
.ind-card .go { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); color: var(--accent-ink); }
.ind-card:hover .go { color: var(--ink-strong); }
.who .stretch { color: inherit; text-decoration: none; }
.who .stretch::after { content: ""; position: absolute; inset: 0; }
.who .stretch:hover { color: var(--accent-ink); }
.who .stretch:focus-visible { outline: none; }
.who .stretch:focus-visible::after { outline: 2px solid var(--accent-hot); outline-offset: -3px; }
.who .card .more { position: relative; z-index: 1; margin: auto 0 0; padding-top: 14px; color: var(--accent-ink); font-size: var(--fs-mono); }
.who .card .more a { text-decoration-color: var(--accent); }
.badge { display: inline-block; border: 1px solid var(--accent); color: var(--ink); padding: 3px 8px; }

/* =========================================================
   REDUCED MOTION for these sections (equal-specificity overrides must follow the rules above;
   the universal !important rules and html.motion-off variants live in styles.css)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .chip { animation: none; }
  .access .pkt { transform: translateY(18px); opacity: 1; animation: none; }
  .access .atag { opacity: 1; animation: none; }
  .flow li:not(:last-child)::before { animation: none; opacity: 1; transform: translate(12px, 0); }
  .mini-safe .out .pkt::before { animation: none; opacity: 1; transform: translateX(calc(100% + 60px)); }
  .mini-connect .arrow::after, .mini-safe .box .wire::after { animation: none; transform: translateX(12px); }
}

/* answer sources as a disclosure (closed on phones, open on wide screens) */
.answer .srcs-d { margin-top: 16px; border-top: 1px solid var(--line); }
.answer .srcs-d summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 10px; color: var(--accent-ink); }
.answer .srcs-d summary::-webkit-details-marker { display: none; }
.answer .srcs-d summary span { color: var(--muted); }
.answer .srcs-d summary::after { content: "+"; margin-left: auto; font-size: 1.1rem; line-height: 1; color: var(--muted); }
.answer .srcs-d[open] summary::after { content: "−"; }
.answer .srcs-d > .srcs { margin-top: 0; padding-top: 0; border-top: 0; padding-bottom: 4px; }

/* "Find" mini on phones: the label takes the row, the Illustrative badge sits under it */
@media (max-width: 479px) { .mini-tokens .offers-head { flex-wrap: wrap; row-gap: 6px; } .mini-tokens .badge { order: 2; } }
/* shorter pipeline steps sit centred in the reserved height instead of leaving a gap below */
.step-panel { align-content: start; }   /* the heading keeps its place when switching steps */

/* infinite loops below the hero pause while their section is off screen or the tab is hidden
   (nav.js sets the classes); finite fades are not listed, so they always finish */
:is(.is-offscreen, html.doc-hidden) :is(.chip, .mini-connect .mt, .access .pkt, .access .atag),
:is(.is-offscreen, html.doc-hidden) :is(.mini-connect .arrow, .mini-safe .box .wire, .ask .typed)::after,
:is(.is-offscreen, html.doc-hidden) :is(.mini-safe .out .pkt, .flow li)::before { animation-play-state: paused; }

/* phones: the connected-source chips repeat the answer's Sources list, so they give way to a shorter panel */
@media (max-width: 639px) { .demo .chips, .uc .chips, .uc .chips-label { display: none; } }   /* classes, not ids: the measuring copies strip ids */