/* Fluint — component styles. Loaded after tokens.css. Every value is a token. */
:root {
  --tex-contours: url("../assets/Textures/signal-contours.svg");
  --tex-contours-dark: url("../assets/Textures/signal-contours-on-dark.svg");
  --tex-events: url("../assets/Textures/event-field.svg");
  --tex-grain: url("../assets/Textures/grain.svg");
  --tex-flow: url("../assets/Textures/signal-flow.svg");
  --slant: 6vw;
}
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.fl-pad { padding: var(--space-5); }
.fl-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.fl-stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* ---------- Button ---------- */
.fl-btn { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2);
  font: 500 16px/1 var(--font-sans); letter-spacing: -0.005em; padding: 18px 28px; border-radius: var(--radius-pill);
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.fl-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fl-btn--primary { background: var(--blue); color: var(--on-blue); box-shadow: var(--shadow-cta); }
.fl-btn--primary:hover { transform: translateY(-1px); }
.fl-btn--dark { background: var(--ink); color: var(--surface); }
.fl-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.fl-btn--ghost:hover { background: var(--surface-sunk); }
.fl-btn--paper { background: var(--on-deep); color: var(--deep); }
.fl-btn--outline-light { background: transparent; color: var(--on-deep); box-shadow: inset 0 0 0 1px var(--on-harbor-muted); }
.fl-btn--sm { padding: 12px 18px; font-size: 15px; }
.fl-btn .fl-arrow { font-family: var(--font-mono); }

/* ---------- Eyebrow ---------- */
.fl-eyebrow { font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.fl-eyebrow--blue { color: var(--blue); }
.fl-eyebrow--ember { color: var(--ember-ink); }
.fl-eyebrow--pill { display: inline-block; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--mist); color: var(--blue); box-shadow: inset 0 0 0 1px var(--line); }
.fl-eyebrow--pill.fl-eyebrow--ember { background: var(--apricot); color: var(--ember-ink); }

/* ---------- Highlight (the mark behind a key phrase) ---------- */
.fl-mark { --mk: var(--mist); color: var(--blue); padding: 0 .14em; margin: 0 -.02em; border-radius: var(--radius-sm);
  background: linear-gradient(to bottom, transparent 0.14em, var(--mk) 0.14em, var(--mk) calc(100% - 0.1em), transparent calc(100% - 0.1em));
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fl-mark--ember { --mk: var(--apricot); color: var(--ember-ink); }
.fl-mark--quiet { color: inherit; }

/* ---------- Signal chip ---------- */
.fl-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 9px 16px; border-radius: var(--radius-pill);
  background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line); font: 500 15px/1.2 var(--font-sans); color: var(--ink); }
.fl-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-bright); flex: none; }
.fl-chip--ember::before { background: var(--ember); }
.fl-chip--ink::before { background: var(--ink); }
.fl-chip--plain::before { display: none; }
.fl-chip--positive { background: var(--mint); color: var(--mint-ink); box-shadow: none; }
.fl-chip--positive::before { background: var(--mint-ink); }

/* ---------- Step marker ---------- */
.fl-step { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: 500 15px/1 var(--font-sans);
  background: var(--ink); color: var(--surface); flex: none; }
.fl-step--prove { background: var(--blue); color: var(--on-blue); }
.fl-step--do { background: var(--ember); color: var(--on-ember); }
.fl-step--letter { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); width: 28px; height: 28px; font-size: 13px; }
.fl-step--lg { width: 56px; height: 56px; font-size: 20px; }
.fl-stephead { display: flex; align-items: center; gap: var(--space-4); }

/* ---------- Product frame ---------- */
.fl-frame { color: var(--ink); background: var(--surface-raised); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-frame); overflow: hidden; }
.fl-frame__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.fl-frame__body { padding: var(--space-5); }
.fl-live { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.fl-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-bright); }
.fl-live--ember { color: var(--ember-ink); }
.fl-live--ember::before { background: var(--ember); }

/* ---------- Predictor row ---------- */
.fl-pred { display: grid; grid-template-columns: 32px 1fr auto 36px; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5);
  background: var(--surface-raised); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line); }
.fl-pred__rank { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 500 13px/1 var(--font-sans); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line); }
.fl-pred__title { font: 500 16px/1.3 var(--font-sans); color: var(--ink); }
.fl-pred__sub { font: 400 13px/1.4 var(--font-sans); color: var(--ink-muted); margin-top: 2px; }
.fl-pred__lift { font: 400 28px/1 var(--font-mono); letter-spacing: -.02em; color: var(--ink); }
.fl-pred__ring { width: 36px; height: 36px; }
.fl-pred__ring circle { fill: none; stroke-width: 4; }
.fl-pred__ring .track { stroke: var(--line); }
.fl-pred__ring .val { stroke: var(--blue-bright); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.fl-pred--top { background: var(--apricot); box-shadow: inset 0 0 0 1px var(--ember); }
.fl-pred--top .fl-pred__rank { background: var(--ember); color: var(--on-ember); box-shadow: none; }
.fl-pred--top .fl-pred__lift { color: var(--ember-ink); }
.fl-pred--top .val { stroke: var(--ember); }
.fl-pred--neg .fl-pred__sub, .fl-pred--neg .fl-pred__lift { color: var(--ember-ink); }

/* ---------- Play card ---------- */
.fl-play__title { font: 500 20px/1.3 var(--font-sans); letter-spacing: -.01em; margin: var(--space-2) 0 var(--space-4); color: var(--ink); }
.fl-play__dl { display: grid; grid-template-columns: 120px 1fr; margin: 0; font-size: 15px; line-height: 1.4; }
.fl-play__dl dt, .fl-play__dl dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); }
.fl-play__dl dt { color: var(--ink-muted); }
.fl-play__dl dd { color: var(--ink); }
.fl-play__lift { font-family: var(--font-mono); color: var(--blue); }
.fl-bar { height: 6px; border-radius: var(--radius-pill); background: var(--surface-sunk); overflow: hidden; }
.fl-bar > i { display: block; height: 100%; background: var(--blue-bright); border-radius: inherit; }
.fl-bar--ember > i { background: var(--ember); }
.fl-foot { font: 400 12px/1.5 var(--font-mono); color: var(--ink-faint); }

/* ---------- Band (colour field + data texture) ---------- */
.fl-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: var(--space-8); isolation: isolate; }
.fl-band::before, .fl-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.fl-band--mist { background: var(--mist); color: var(--ink); }
.fl-band--mist::before { background: var(--tex-contours) center / cover no-repeat; opacity: 1; }
.fl-band--harbor { background: var(--harbor); color: var(--on-harbor); }
.fl-band--harbor::before { background: var(--tex-contours-dark) center / cover no-repeat; opacity: 1; }
.fl-band--harbor::after, .fl-band--deep::after, .fl-band--ember::after { background: var(--tex-grain); opacity: var(--grain); mix-blend-mode: overlay; }
.fl-band--deep { background: var(--deep); color: var(--on-deep); }
.fl-band--deep::before { background: var(--tex-events) right center / auto 100% no-repeat; opacity: var(--texture-soft); }
.fl-band--ember { background: var(--ember); color: var(--on-ember); }
.fl-band--ember::before { background: var(--tex-events) right center / auto 100% no-repeat; opacity: .22; mix-blend-mode: multiply; filter: grayscale(1); }
.fl-band--bleed { border-radius: 0; }
.fl-band .fl-muted { color: var(--ink-muted); }
.fl-band--harbor .fl-muted, .fl-band--deep .fl-muted { color: var(--on-harbor-muted); }

/* ---------- Stat ---------- */
.fl-stat__n { font: 400 72px/1 var(--font-mono); letter-spacing: -.04em; }
.fl-stat__l { font: 400 15px/1.45 var(--font-sans); margin-top: var(--space-3); max-width: 24ch; }

/* ---------- Console block (GTM Engineers register) ---------- */
.fl-console { background: var(--deep); color: var(--on-deep); border-radius: var(--radius-md); font: 400 13px/1.7 var(--font-mono); overflow: hidden; }
.fl-console__bar { display: flex; justify-content: space-between; padding: 10px var(--space-4); border-bottom: 1px solid rgba(224,228,233,.12); color: var(--on-harbor-muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.fl-console pre { margin: 0; padding: var(--space-4); white-space: pre-wrap; }
.fl-console .k { color: #7CC6EA; }
.fl-console .s { color: #F09A6B; }
.fl-console .c { color: #8FA2AB; }

/* ---------- Signature flow, slant, layering, guides (Stripe-informed) ---------- */
.fl-band--flow { background: var(--harbor); color: var(--on-harbor); }
.fl-band--flow::before { background: none; }
.fl-band--flow::after { background: var(--tex-grain); opacity: var(--grain); mix-blend-mode: overlay; }
.fl-band--slant { clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); padding-top: calc(var(--space-8) + var(--slant)); border-radius: 0; }
.fl-layer { position: relative; }
.fl-layer > .fl-frame + .fl-frame { position: absolute; }
/* ---------- Grid: faint dashed construction lines ----------
   Lines sit on the real layout columns: content snaps to them. */
.fl-grid, .fl-guides { --cols: 4; --grid-inset: 0px; --gc: var(--grid-line); --dash: 4px; position: relative; isolation: isolate; }
.fl-grid::before, .fl-guides::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--grid-inset); right: var(--grid-inset); pointer-events: none; z-index: -1;
  background:
    linear-gradient(to left, var(--gc) 0 1px, transparent 1px) right / 100% 100% no-repeat,
    linear-gradient(to right, var(--gc) 0 1px, transparent 1px) 0 0 / calc(100% / var(--cols)) 100% repeat-x;
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 var(--dash), transparent var(--dash) calc(var(--dash) * 2));
          mask-image: repeating-linear-gradient(to bottom, #000 0 var(--dash), transparent var(--dash) calc(var(--dash) * 2)); }
.fl-grid--6 { --cols: 6; }
.fl-grid--12 { --cols: 12; --dash: 3px; }
.fl-grid--dark { --gc: var(--grid-line-on-dark); }
.fl-grid--fade::before {
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 var(--dash), transparent var(--dash) calc(var(--dash) * 2)), linear-gradient(to bottom, transparent, #000 60%);
  -webkit-mask-composite: source-in;
          mask-image: repeating-linear-gradient(to bottom, #000 0 var(--dash), transparent var(--dash) calc(var(--dash) * 2)), linear-gradient(to bottom, transparent, #000 60%);
          mask-composite: intersect; }
/* horizontal dashed rule, spanning the same inset as the grid */
.fl-grid-rule { --gc: var(--grid-line); --dash: 4px; height: 1px; border: 0; margin: 0; position: relative; overflow: visible;
  background: repeating-linear-gradient(to right, var(--gc) 0 var(--dash), transparent var(--dash) calc(var(--dash) * 2)); }
.fl-grid--dark .fl-grid-rule, .fl-grid-rule--dark { --gc: var(--grid-line-on-dark); }
/* plus marks where a rule meets the outer columns */
.fl-grid-rule--marks::after { content: ""; position: absolute; left: -5px; right: -5px; top: -5px; height: 11px;
  background:
    linear-gradient(var(--grid-mark), var(--grid-mark)) 0 5px / 11px 1px no-repeat,
    linear-gradient(var(--grid-mark), var(--grid-mark)) 5px 0 / 1px 11px no-repeat,
    linear-gradient(var(--grid-mark), var(--grid-mark)) 100% 5px / 11px 1px no-repeat,
    linear-gradient(var(--grid-mark), var(--grid-mark)) calc(100% - 5px) 0 / 1px 11px no-repeat; }
.fl-grid--dark .fl-grid-rule--marks::after { --grid-mark: var(--on-harbor-muted); }
/* a framed cell: dashed box with plus marks on all four corners */
.fl-grid-cell { position: relative; padding: var(--space-6); }
.fl-grid-cell::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to right, var(--grid-line) 0 4px, transparent 4px 8px) top / 100% 1px no-repeat,
    repeating-linear-gradient(to right, var(--grid-line) 0 4px, transparent 4px 8px) bottom / 100% 1px no-repeat,
    repeating-linear-gradient(to bottom, var(--grid-line) 0 4px, transparent 4px 8px) left / 1px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--grid-line) 0 4px, transparent 4px 8px) right / 1px 100% no-repeat; }
.fl-grid-cell::after { content: ""; position: absolute; inset: -5px; pointer-events: none;
  background:
    linear-gradient(var(--grid-mark), var(--grid-mark)) 0 5px / 11px 1px no-repeat,
    linear-gradient(var(--grid-mark), var(--grid-mark)) 5px 0 / 1px 11px no-repeat,
    linear-gradient(var(--grid-mark), var(--grid-mark)) 100% 5px / 11px 1px no-repeat,
    linear-gradient(var(--grid-mark), var(--grid-mark)) calc(100% - 5px) 0 / 1px 11px no-repeat,
    linear-gradient(var(--grid-mark), var(--grid-mark)) 0 calc(100% - 5px) / 11px 1px no-repeat,
    linear-gradient(var(--grid-mark), var(--grid-mark)) 5px 100% / 1px 11px no-repeat,
    linear-gradient(var(--grid-mark), var(--grid-mark)) 100% calc(100% - 5px) / 11px 1px no-repeat,
    linear-gradient(var(--grid-mark), var(--grid-mark)) calc(100% - 5px) 100% / 1px 11px no-repeat; }

/* ---------- Logo swap by theme ---------- */
.fl-logo--dark { display: none; }
[data-theme="console"] .fl-logo--light { display: none; }
[data-theme="console"] .fl-logo--dark { display: block; }

/* ---------- Gradients — the blue → ember axis from the logo ring ----------
   Direction carries meaning: blue (proof) always comes first, ember (action) last. */
:root {
  --g-flow: linear-gradient(90deg, var(--blue-bright) 0%, var(--ember) 100%);
  --g-ink: linear-gradient(90deg, var(--blue) 0%, var(--blue) 25%, var(--ember-ink) 100%);
  --g-glow: radial-gradient(60% 80% at 88% 8%, rgba(37,139,190,.55) 0%, rgba(37,139,190,0) 70%),
            radial-gradient(45% 60% at 96% 100%, rgba(232,128,76,.42) 0%, rgba(232,128,76,0) 70%),
            linear-gradient(180deg, var(--harbor) 0%, #0B2F42 100%);
  --g-dawn: radial-gradient(50% 70% at 100% 0%, rgba(232,128,76,.16) 0%, rgba(232,128,76,0) 70%),
            linear-gradient(180deg, var(--surface) 0%, var(--mist) 100%);
  --g-ember: radial-gradient(70% 90% at 0% 0%, rgba(251,230,214,.55) 0%, rgba(251,230,214,0) 70%),
             linear-gradient(135deg, #F09A6B 0%, var(--ember) 55%, #DC6F3B 100%);
}
[data-theme="console"] {
  --g-dawn: radial-gradient(50% 70% at 100% 0%, rgba(240,154,107,.14) 0%, rgba(240,154,107,0) 70%),
            linear-gradient(180deg, var(--surface) 0%, var(--mist) 100%);
}
.fl-band--glow { background: var(--g-glow); color: var(--on-harbor); }
.fl-band--glow::after { background: var(--tex-grain); opacity: var(--grain); mix-blend-mode: overlay; }
.fl-band--flow { background: linear-gradient(180deg, #0A2A3B 0%, #071F2C 100%); }
.fl-band--dawn { background: var(--g-dawn); color: var(--ink); }
.fl-band--ember { background: var(--g-ember); }
.fl-text-flow { background: var(--g-ink); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fl-frame--flow { border: 1.5px solid transparent; background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, var(--g-flow) border-box; box-shadow: var(--shadow-frame); }
.fl-rule-flow { height: 2px; border: 0; border-radius: var(--radius-pill); background: var(--g-flow); }
.fl-bar--flow > i { background: var(--g-flow); }

/* ---------- CTA band: vibrant blurred blue/orange field, grain, floating particles ---------- */
.fl-band--cta { color: #FAFCFE; border: 1.5px solid transparent; background: linear-gradient(#071F2C, #071F2C) padding-box, linear-gradient(135deg, #1C6E98 0%, #258BBE 30%, #E8804C 75%, #F09A6B 100%) border-box; box-shadow: 0 30px 80px -40px rgba(232,128,76,.35), 0 30px 80px -40px rgba(28,110,152,.45); }
.fl-band--cta::before { background: none; }
.fl-band--cta::after { background: var(--tex-grain); opacity: .5; mix-blend-mode: overlay; }
@media (prefers-reduced-motion: reduce) { .fl-band--cta, .fl-band--cta::before, .fl-band--cta::after { animation: none; } }

/* ---------- Playful button interactions (applies to every pill CTA) ---------- */
:is(a,button)[style*="border-radius: 999px"]:not([aria-hidden]) { position: relative; overflow: hidden; isolation: isolate; transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background-color .2s ease, color .2s ease, border-color .2s ease !important; will-change: transform; }
:is(a,button)[style*="border-radius: 999px"]:not([aria-hidden]):hover { transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 14px 30px -14px rgba(15,59,82,.55) !important; }
:is(a,button)[style*="border-radius: 999px"]:not([aria-hidden]):active { transform: translateY(0) scale(.96) !important; box-shadow: 0 4px 10px -6px rgba(15,59,82,.5) !important; transition-duration: .08s !important; }
:is(a,button)[style*="border-radius: 999px"]:not([aria-hidden]) > span:last-child:not(:first-child) { display: inline-block; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
:is(a,button)[style*="border-radius: 999px"]:not([aria-hidden]):hover > span:last-child:not(:first-child) { transform: translateX(4px); }
:is(a,button)[style*="border-radius: 999px"]:not([aria-hidden]):focus-visible { outline: 2px solid #258BBE; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { :is(a,button)[style*="border-radius: 999px"]:hover, :is(a,button)[style*="border-radius: 999px"]:active { transform: none !important; } :is(a,button)[style*="border-radius: 999px"]::after { display: none; } }

/* ---------- Responsive (data-r) ---------- */
@media (max-width: 980px){
  [data-r~="navlinks"]{display:none!important}
  [data-r~="navmenu"]{display:block!important}
  [data-r~="navmenu"] summary::-webkit-details-marker{display:none}
  [data-r~="quad"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [data-r~="src7"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media (max-width: 800px){
  [data-r~="stack"]{grid-template-columns:minmax(0,1fr)!important}
  [data-r~="foot"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [data-r~="foot"] > :first-child{grid-column:1 / -1;padding:48px 0 8px!important}
  [data-r~="foot"] > :not(:first-child){padding:32px 16px 48px!important}
  [data-r~="cmp"]{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  [data-r~="cmp"] > *{min-width:680px}
  [data-r~="stamp"]{width:120px!important;height:120px!important;right:12px!important;top:16px!important}
  [style*="braid-v.svg"]{display:none!important}
}
@media (max-width: 640px){
  [data-r~="wrap"],[data-r~="nav"]{padding-left:20px!important;padding-right:20px!important}
  [data-r~="nav"]{gap:12px!important}
  [data-r~="login"]{display:none!important}
  [data-r~="ctaband"]{padding:56px 24px!important}
  [data-r~="src7"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width: 560px){
  [data-r~="quad"]{grid-template-columns:minmax(0,1fr)!important}
  [data-r~="foot"] > :not(:first-child){padding:24px 12px 32px!important}
  a[style*="border-radius: 999px"]{white-space:normal!important;text-align:center}
}