/* ==========================================================================
   Foxhole Analytics - shared site stylesheet
   Restyled onto the Foxhole Analytics brand design system:
   "night, earth, and a single warm eye of light."

     - Near-black dug-earth greens are the base for everything.
     - Fox rust (#C2571E) is the one true brand colour - primary actions.
     - Ember amber (#E8A33D) is the eye of light - eyebrows, highlights, focus.
     - Signal teal (#3BD4C0) is reserved for live data / up-states;
       clay (#D5533E) is its down-state counterpart.
     - Type is a three-way split: Spectral (serif headlines),
       Manrope (UI/body), IBM Plex Mono (numeric/eyebrows).

   Class names and markup are unchanged from the pre-rebrand site; only the
   visual language is remapped. Legacy --fin-* / .up / .down aliases are kept
   so existing templates and JS keep working.

   Sections:
     1. Design tokens & base reset
     2. Shared helpers
     3. Home page  (.fin-*, ticker, candlestick, custom picks)
     4. Marketing / legal pages (.site-*, .doc-*, forms, values)
     5. Pricing page (.topbar, .plan-*, billing toggle)
   ========================================================================== */

/* == 1. Design tokens ======================================================= */
:root {
    color-scheme: dark;

    /* ---- Foxhole ground: near-black greenish charcoals (the earth) ---- */
    --ground-900: #0E110A; /* deepest pit - app backdrop behind everything */
    --ground-800: #12160D; /* recessed wells, code blocks */
    --ground-700: #16190F; /* foxhole ground - primary base surface */
    --ground-600: #1B1F16; /* raised surface / panel */
    --ground-500: #1F2416; /* card surface */
    --ground-400: #26301C; /* hover on dark surfaces */
    --ground-300: #2E3A22; /* hairline borders, dividers */
    --ground-200: #3A472C; /* strong border / focus ring on dark */

    /* ---- Field greens: muted foliage tones for text + quiet UI ---- */
    --moss-500: #6E7C5E;
    --moss-400: #7C8A6B;
    --moss-300: #8FA06E;
    --moss-200: #B9C29E;

    /* ---- Field snow: warm off-whites (headings on dark) ---- */
    --snow-100: #EDE8DF;
    --snow-200: #D9D3C6;
    --snow-300: #C7C0B1;

    /* ---- Fox rust: the one true brand colour. Rationed. ---- */
    --rust-700: #7C330F;
    --rust-600: #9A4416;
    --rust-500: #C2571E;
    --rust-400: #D8692B;
    --rust-300: #E67C42;
    --rust-tint: rgba(194, 87, 30, 0.14);

    /* ---- Ember signal: the eye of light. Highlights + warmth. ---- */
    --ember-600: #C9862B;
    --ember-500: #E8A33D;
    --ember-400: #F0B65E;
    --ember-glow: rgba(232, 163, 61, 0.20);

    /* ---- Signal teal: LIVE DATA ONLY. ---- */
    --teal-600: #1E3A34;
    --teal-500: #3BD4C0;
    --teal-400: #63E0CF;
    --teal-tint: rgba(59, 212, 192, 0.12);

    /* ---- Down / negative (data family only; desaturated clay) ---- */
    --down-500: #D5533E;
    --down-tint: rgba(213, 83, 62, 0.12);

    /* ---- Type ---- */
    --font-voice: 'Spectral', Georgia, 'Times New Roman', serif;
    --font-sans:  'Manrope', system-ui, -apple-system, sans-serif;
    --font-mono:  'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;

    /* ---- Radii, borders, shadows, motion ---- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 6px 20px -6px rgba(0,0,0,0.55);
    --shadow-lg: 0 18px 48px -12px rgba(0,0,0,0.65);
    --shadow-inset: inset 0 1px 0 rgba(237,232,223,0.04);
    --glow-ember: 0 0 0 4px var(--ember-glow);

    --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
    --dur-fast: 120ms;
    --dur-med: 200ms;

    /* ================= SEMANTIC / LEGACY ALIASES =================
       Existing templates + JS reference these names; keep them mapped
       onto the brand palette so nothing else has to change. */
    --fin-bg:      var(--ground-900);
    --fin-bg2:     var(--ground-600);
    --fin-bg3:     var(--ground-500);
    --fin-border:  var(--ground-300);
    --fin-blue:    var(--rust-500);   /* brand accent (was blue) */
    --fin-blue-lt: var(--ember-500);  /* highlight / eyebrow accent */
    --fin-text:    var(--snow-200);
    --fin-muted:   var(--moss-200);
    --fin-dimmed:  var(--moss-400);
    --up:          var(--teal-500);   /* live / positive data */
    --down:        var(--down-500);   /* negative data (clay) */
    --mono:        var(--font-mono);
}

/* -- Base reset & document -- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { min-height: 100%; }

body {
    font-family: var(--font-sans);
    background: var(--ground-900);
    color: var(--snow-200);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
main { flex: 1; }
::selection { background: var(--rust-500); color: var(--snow-100); }

/* -- Shared status colours (data family) -- */
.up      { color: var(--teal-500)  !important; }
.down    { color: var(--down-500)  !important; }
.neutral { color: var(--moss-400)  !important; }

/* -- Shared animations -- */
@keyframes ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: .45; transform: scale(.72); }
}
@keyframes floatStick {
    0%,100% { opacity: .05; transform: translateY(0); }
    50%     { opacity: .12; transform: translateY(-6px); }
}

/* == 2. Shared helpers ===================================================== */
.u-muted    { color: var(--moss-200); }
.u-text     { color: var(--snow-200); }
.u-blue     { color: var(--rust-500); }
.u-blue-lt  { color: var(--ember-500); }
.u-dimmed   { color: var(--moss-400); }
.mw-680     { max-width: 680px; }
.mw-700     { max-width: 700px; }
.mt-075     { margin-top: .75rem; }
.mt-1       { margin-top: 1rem; }

/* == 3. Home page ========================================================== */

/* -- Live badge (live data -> teal) -- */
.live-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--mono); font-size: .65rem; font-weight: 600;
    letter-spacing: .1em; color: var(--teal-500);
    padding: 2px 8px;
    border: 1px solid rgba(59,212,192,.25); border-radius: var(--radius-sm);
    background: var(--teal-tint);
    text-transform: uppercase;
}
.live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ember-500); flex-shrink: 0;
    box-shadow: 0 0 0 3px var(--ember-glow);
    animation: pulse 1.6s ease-in-out infinite;
}

/* -- Ticker bar (all numeric -> mono, live -> teal) -- */
.ticker-bar {
    background: var(--ground-900); border-bottom: 1px solid var(--ground-300);
    overflow: hidden; white-space: nowrap; height: 32px;
    display: flex; align-items: center;
}
.ticker-track {
    display: inline-flex;
    /* Placeholder pace only. Once prices arrive, foxhole.js overrides the
       duration with one derived from the width of the run it just built, so
       the ticker travels at the same speed whatever the number of instruments.
       Retune the speed there (TICKER_PX_PER_SECOND), not here. */
    animation: ticker 140s linear infinite;
    will-change: transform;
}
.ticker-bar:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 20px; font-family: var(--mono); font-size: .72rem;
    letter-spacing: .02em;
    border-right: 1px solid var(--ground-300); white-space: nowrap;
}
.ticker-sym      { color: var(--moss-400); }
.ticker-val      { color: var(--snow-200); font-weight: 500; }
.ticker-chg.up   { color: var(--teal-500); }
.ticker-chg.down { color: var(--down-500); }

/* -- Utility bar -- */
.util-bar {
    background: var(--ground-800); border-bottom: 1px solid var(--ground-300);
    font-size: .76rem; padding: 5px 0;
}
.util-link {
    color: var(--moss-200); text-decoration: none;
    padding: 4px 10px; white-space: nowrap; transition: color var(--dur-fast);
}
.util-link:hover        { color: var(--snow-100); }
.util-link-caret::after { content: ' \25BE'; font-size: .6rem; opacity: .6; }
.util-link-emphasis     { color: var(--ember-500); font-weight: 600; letter-spacing: .02em; }
.util-divider {
    display: inline-block; width: 1px; height: 14px;
    background: var(--ground-300); margin: 0 6px; vertical-align: middle;
}

/* -- Navbar -- */
.fin-navbar {
    background: rgba(14,17,10,.92) !important;
    border-bottom: 1px solid var(--ground-300);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 0;
}
.fin-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 10px 0; }
.fin-brand-inline { display: inline-flex; }
.fin-brand-logo { height: 30px; width: auto; display: block; flex-shrink: 0; }
.fin-brand-text { display: flex; flex-direction: column; line-height: 1; }
/* Canonical lockup: prominent serif "Foxhole" over small mono "ANALYTICS" */
.fin-brand-top  { font-family: var(--font-voice); font-size: 1.35rem; font-weight: 700; color: var(--snow-100); letter-spacing: -.01em; }
.fin-brand-bot  { font-family: var(--mono); font-size: .5rem; font-weight: 500; color: var(--rust-500); letter-spacing: .24em; text-transform: uppercase; margin-top: 2px; }
.fin-nav-link {
    font-size: .875rem !important; font-weight: 500 !important;
    color: var(--moss-200) !important; padding: 18px 14px !important;
    border-bottom: 2px solid transparent;
    transition: color var(--dur-fast), border-color var(--dur-fast);
}
.fin-nav-link:hover { color: var(--snow-100) !important; border-bottom-color: var(--rust-500); }
.fin-nav-link.active { color: var(--snow-100) !important; border-bottom-color: var(--rust-500); }

/* -- Buttons -- */
.fin-btn-primary {
    background: var(--rust-500); border: 1px solid var(--rust-500); color: var(--snow-100);
    font-size: .875rem; font-weight: 600; border-radius: var(--radius-md);
    transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.fin-btn-primary:hover  { background: var(--rust-400); border-color: var(--rust-400); color: var(--snow-100); }
.fin-btn-primary:active { transform: scale(.97); }
.fin-btn-ghost {
    background: transparent; border: 1px solid var(--ground-200);
    color: var(--snow-200); font-size: .875rem; font-weight: 500;
    border-radius: var(--radius-md); transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.fin-btn-ghost:hover  { border-color: var(--moss-300); color: var(--snow-100); background: var(--ground-400); }
.fin-btn-ghost:active { transform: scale(.97); }
.fin-btn-outline {
    background: transparent; border: 1px solid var(--rust-500);
    color: var(--rust-300); font-size: .875rem; font-weight: 600;
    border-radius: var(--radius-md); transition: background var(--dur-fast), color var(--dur-fast);
}
.fin-btn-outline:hover { background: var(--rust-500); color: var(--snow-100); }

/* -- Hero -- */
.fin-hero {
    background: var(--ground-900); position: relative; overflow: hidden; padding: 4rem 0 2rem;
}
.fin-hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(194,87,30,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(194,87,30,.035) 1px, transparent 1px);
    background-size: 40px 40px; pointer-events: none;
    -webkit-mask-image: radial-gradient(120% 90% at 30% 0%, #000 40%, transparent 100%);
            mask-image: radial-gradient(120% 90% at 30% 0%, #000 40%, transparent 100%);
}
.fin-hero-inner { position: relative; }
.fin-hero-tag {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ember-500); background: var(--ember-glow);
    border: 1px solid rgba(232,163,61,.28); border-radius: var(--radius-pill); padding: 4px 12px;
}
.fin-hero-h1 {
    font-family: var(--font-voice);
    font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 600;
    line-height: 1.06; letter-spacing: -.01em; color: var(--snow-100);
}
.fin-hero-body { font-size: 1.0625rem; line-height: 1.7; color: var(--moss-200); }
/* Hero primary CTA — larger, more prominent, with caption underneath */
.fin-hero-cta-wrap { text-align: center; }
.fin-hero-cta { font-size: 1.25rem; font-weight: 700; padding-top: .7rem; padding-bottom: .7rem; }
.fin-hero-cta-note { margin-top: .65rem; font-size: .8125rem; color: var(--moss-400); letter-spacing: .01em; }
.fin-section-logo { display: block; width: auto; height: 192px; margin-inline: auto; }
.fin-hero-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .9rem; aspect-ratio: 16 / 10; width: 100%;
    background:
        radial-gradient(120% 90% at 50% 0%, var(--ground-500) 0%, var(--ground-700) 70%);
    border: 1px solid var(--ground-300); border-radius: var(--radius-lg);
}
.fin-hero-placeholder-logo { width: auto; height: 42%; max-height: 180px; opacity: .9; }
.fin-hero-placeholder-label {
    font-family: var(--mono); font-size: .72rem; letter-spacing: .22em;
    text-transform: uppercase; color: var(--moss-400);
}

/* Carousel indicators
   These are the hero's only control now that the arrows are gone, so what a
   visitor has to hit matters more than it did. The dot stays 5px because that
   is the mark the design wants; the button behind it is a 25x40 area centred on
   it, which is what a finger or a hurried cursor actually lands on.

   The gap is what sizes that area: each button claims half the space on either
   side of it, so the areas tile the row edge to edge without ever overlapping -
   no dot can swallow a press meant for its neighbour. Widening the gap widens
   the targets; narrowing it past about 20px starts pushing them under the
   24x24 that is comfortable to hit. */
.fin-indicators { padding: 1.5rem 0 1rem; gap: 20px; }
.fin-ind {
    position: relative;
    height: 5px; width: 5px; border-radius: 100px; border: none; padding: 0;
    background: var(--ground-200); cursor: pointer; transition: background var(--dur-fast), width var(--dur-med);
}
.fin-ind::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 20px); /* the dot plus half the gap on each side */
    height: 40px;
}
.fin-ind-active { background: var(--rust-500); width: 20px; }
.fin-ind:hover:not(.fin-ind-active) { background: var(--moss-400); }
/* Offset well clear of the dot: a ring drawn tight around 5px reads as a
   slightly larger dot rather than as focus. */
.fin-ind:focus-visible { outline: 2px solid var(--ember-500); outline-offset: 7px; }

/* -- Section common -- */
.fin-section-tag {
    font-family: var(--mono); font-size: .68rem; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase; color: var(--rust-400);
}
.fin-section-h2 {
    font-family: var(--font-voice);
    font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 600;
    letter-spacing: -.01em; line-height: 1.1; color: var(--snow-100);
}

/* -- Value pillars -- */
.fin-pillars { padding: 3rem 0; background: var(--ground-900); }
.fin-pillar-card {
    background: var(--ground-500); border: 1px solid var(--ground-300);
    border-left: 3px solid var(--rust-500); border-radius: var(--radius-lg);
    padding: 24px; height: 100%;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-med), border-left-color var(--dur-med), transform var(--dur-fast), box-shadow var(--dur-med);
}
.fin-pillar-card:hover   { border-color: var(--ground-200); border-left-color: var(--teal-500); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.fin-pillar-icon  { margin-bottom: 14px; color: var(--ember-500); }
.fin-pillar-icon i { font-size: 1.85rem; }
.fin-pillar-tag   { font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .16em; color: var(--moss-400); margin-bottom: 8px; text-transform: uppercase; }
.fin-pillar-title { font-family: var(--font-voice); font-size: 1.2rem; font-weight: 600; color: var(--snow-100); margin-bottom: 8px; }
.fin-pillar-body  { font-size: .9rem; line-height: 1.65; color: var(--moss-200); margin-bottom: 12px; }
.fin-icon-blue    { color: var(--ember-500); }

/* Why-choose intro copy */
.why-intro { color: var(--moss-200); max-width: 700px; margin: 1rem auto 0; font-size: 1.0625rem; line-height: 1.7; }

/* -- 3-Step CTA -- */
.fin-cta { padding: 5rem 0; background: var(--ground-700); border-top: 1px solid var(--ground-300); border-bottom: 1px solid var(--ground-300); }
.fin-cta .fin-section-h2 { color: var(--snow-100); }
.fin-steps { display: flex; justify-content: center; }
.fin-step {
    flex: 1; max-width: 260px; display: flex; flex-direction: column;
    align-items: center; text-align: center; position: relative; padding: 0 20px;
}
.fin-step-num {
    font-family: var(--mono); font-size: 2rem; font-weight: 500;
    color: var(--rust-500); line-height: 1; margin-bottom: 16px;
}
.fin-step-connector {
    position: absolute; top: 1rem; right: -16%; width: 32%; height: 1px;
    background: linear-gradient(90deg, var(--ground-300), rgba(194,87,30,.4));
}
.fin-step-title { font-family: var(--font-voice); font-size: 1.1rem; font-weight: 600; color: var(--snow-100); margin-bottom: 6px; }
.fin-step-sub   { font-size: .875rem; line-height: 1.5; color: var(--moss-200); }
@media (max-width: 767px) {
    .fin-steps { flex-direction: column; align-items: center; gap: 2rem; }
    .fin-step-connector { display: none; }
    .fin-step { max-width: 100%; }
}

/* -- Footer -- */
.fin-footer { background: var(--ground-900); border-top: 1px solid var(--ground-300); }
/* Enlarged brand lockup in the footer (~2x the navbar size).
   All three sizes scale with the viewport: the mark is flex-shrink: 0 and
   "Foxhole" is a single unbreakable word, so at fixed sizes the row has a
   hard 419px minimum and pushes horizontal overflow onto every page below
   a 431px viewport. Current desktop ratios are held constant (mark 1.5x the
   wordmark, ANALYTICS 0.35x); all three reach full size from ~470px up, so
   tablet and desktop render exactly as before. flex-wrap is a backstop so a
   future type-scale bump stacks the lockup instead of overflowing again. */
.fin-footer .fin-brand      { flex-wrap: wrap; }
.fin-footer .fin-brand-logo { height: clamp(4.125rem, 25.5vw, 7.5rem); }
.fin-footer .fin-brand-top  { font-size: clamp(2.75rem, 17vw, 5rem); }
.fin-footer .fin-brand-bot  { font-size: clamp(.9625rem, 5.95vw, 1.75rem); letter-spacing: .24em; margin-top: 6px; }
.fin-footer-heading {
    font-family: var(--mono); font-size: .65rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: .18em;
    color: var(--moss-300); margin-bottom: .875rem;
}
.fin-footer-link { font-size: .8375rem; color: var(--moss-200); text-decoration: none; transition: color var(--dur-fast); }
.fin-footer-link:hover { color: var(--rust-300); }
/* Horizontal, pipe-delimited footer link row */
.fin-footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; margin-top: 1rem; }
.fin-footer-nav .fin-footer-link { position: relative; }
.fin-footer-nav .fin-footer-link:not(:last-child)::after {
    content: "|";
    color: var(--ground-300);
    margin-left: .75rem;
}
.fin-footer-legal { border-top: 1px solid var(--ground-300); padding: 1.5rem 0 2.5rem; }
.fin-reg-text { font-size: .82rem; line-height: 1.7; color: var(--moss-400); margin: 0; }

/* -- Bootstrap card dark overrides -- */
.card {
    background: var(--ground-500);
    border: 1px solid var(--ground-300);
    color: var(--snow-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-med), transform var(--dur-fast), box-shadow var(--dur-med);
}
.card:hover { border-color: var(--ground-200); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--ground-300);
    padding: 0 0 10px 0;
}
.card-body { color: var(--moss-200); }

/* -- Custom picks card internals (numeric -> mono, live -> teal) -- */
.ticker { font-size: 1.15rem; font-weight: 500; color: var(--snow-100); font-family: var(--mono); letter-spacing: .02em; }
.stars  { color: var(--ember-500); font-size: 1rem; }
.company { color: var(--moss-200); font-size: .85rem; margin-bottom: 14px; }
.description { color: var(--moss-200); font-size: .85rem; line-height: 1.5; margin-bottom: 18px; height: 80px; overflow: hidden; }
.price-section { display: flex; justify-content: space-between; align-items: center; }
.price { font-family: var(--mono); font-size: 1.4rem; font-weight: 500; color: var(--snow-100); }
.change { font-size: .9rem; font-weight: 500; color: var(--teal-500); font-family: var(--mono); }
.analyze-btn {
    background: var(--rust-tint);
    border: 1px solid rgba(194,87,30,.35);
    color: var(--rust-300);
    padding: 6px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.analyze-btn:hover { background: var(--rust-500); border-color: var(--rust-500); color: var(--snow-100); }

/* Picks state / layout helpers */
/* "No verified picks" and the failure notice replace the whole grid rather
   than sitting in it, so the message spans every column instead of being
   dealt one card's worth of it. */
.picks-loading { color: var(--moss-200); text-align: center; padding: 32px; grid-column: 1 / -1; }
.pick-card-header { display: flex; justify-content: space-between; align-items: center; }

/* -- Diff colours (data family) -- */
.red_diff   { color: var(--down-500) !important; }
.green_diff { color: var(--teal-500) !important; }

/* -- Stock cards grid --
   A grid rather than a wrapping flex row, because the number of cards is
   whatever the API returned and rarely divides evenly by the number of
   columns. Flex shares out free space one line at a time, so a last line
   holding a single card handed it the whole width; a grid's tracks are
   settled once for the container, and a card in the last row is as wide as a
   card in the first.

   auto-fill, not auto-fit: auto-fit collapses the tracks it has no card for,
   which would stretch a short run of picks across the full width and lose the
   same consistency in the other direction. min() keeps the track from
   demanding 280px on a screen narrower than that.

   Three columns is the ceiling. Left to itself auto-fill takes a fourth track
   once the container passes 1192px, which it does at the xxl container width,
   so the widest screens are pinned to three explicit tracks instead. */
.stock-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 24px;
}
@media (min-width: 1200px) {
    .stock-cards { grid-template-columns: repeat(3, 1fr); }
}
.stock-cards .card { padding: 20px 24px; }

/* -- Feature section background -- */
.portfolio-section { background: var(--ground-700) !important; padding-top: 5rem; padding-bottom: 5rem; }

/* -- Feature card text -- */
.feature-card .card-title { color: var(--snow-100); font-family: var(--font-voice); }
.feature-card .card-text  { color: var(--moss-200); }

/* -- Hero carousel -- */
/* Direct child only: the placeholder panels nest their own logo <img>, which
   must not pick up the screenshot sizing below. Slide images ship at 16:10
   (1280x800 or 1600x1000) so panel height stays fixed between slides. */
.fin-hero .carousel-item > img {
    width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
    border-radius: var(--radius-lg); border: 1px solid var(--ground-300);
}

/* -- Candlestick background (data family) -- */
.candlestick-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.candlestick {
    position: absolute;
    width: 4px;
    opacity: 0.08;
    animation: floatStick 10s ease-in-out infinite;
}
.candlestick.bullish { background: var(--teal-500); }
.candlestick.bearish { background: var(--down-500); }
.candlestick::before, .candlestick::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: inherit;
    opacity: .8;
}

/* -- Monthly picks header -- */
.picks-header { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; }
.picks-header h2 { margin: 0; }
.picks-trophy { font-size: 1.4rem; color: var(--ember-500); display: inline-flex; }

/* -- Claude picks entry/exit card --
   The entry and exit rows share one set of columns rather than each laying
   itself out. Left to themselves the rows size their own date column, and
   "Jun 8, 2026" is narrower than "Jun 25, 2026" - so the amounts beside them
   start and end at different places, and two prices meant to be compared read
   as though they were written on different scales.

   The card owns the tracks and each row takes them with subgrid, which is what
   makes the alignment a property of the card instead of a coincidence of the
   two dates having the same length. A browser without subgrid keeps the
   declaration above it and lays each row out on its own, as before.

   Prices are right-aligned in a mono face, so with two decimals guaranteed
   (see formatPrice in js/foxhole.js) the decimal points line up as well. */
.profit-badge { font-family: var(--mono); font-size: .95rem; font-weight: 500; }
.pick-card { display: grid; grid-template-columns: 44px 1fr auto; align-content: start; column-gap: 12px; }
.pick-card > .card-header { grid-column: 1 / -1; }
.pick-row { grid-column: 1 / -1; display: grid; grid-template-columns: 44px 1fr auto; grid-template-columns: subgrid; align-items: center; column-gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ground-300); }
.pick-row:last-child { border-bottom: none; padding-bottom: 0; }
.pick-label { font-family: var(--mono); font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--moss-400); white-space: nowrap; }
.pick-price { font-family: var(--mono); font-size: .92rem; color: var(--snow-100); text-align: right; }
.pick-date  { font-size: .76rem; color: var(--moss-400); text-align: right; font-family: var(--mono); white-space: nowrap; }

/* Below a 360px screen the three tracks want more room than the card has, and
   the date is what ends up pushed into the card's padding. The gaps and the
   date give the width back; the label column does not, because 40px is where
   "ENTRY" starts wrapping onto a second line. */
@media (max-width: 359.98px) {
    .pick-card { column-gap: 8px; }
    .pick-row  { column-gap: 8px; }
    .pick-date { font-size: .70rem; }
}

/* -- Picks loading skeleton --------------------------------------------------
   Three placeholder cards mirroring the real pick card's anatomy (ticker +
   profit badge, entry row, exit row) so the section doesn't reflow when the
   AJAX response paints. A single slow "eye of light" sweeps each card, offset
   card to card. Replaced wholesale by js/foxhole.js on load. */
.pick-skeleton { position: relative; overflow: hidden; }
.pick-skeleton:hover { border-color: var(--ground-300); transform: none; box-shadow: var(--shadow-sm); }
.pick-skeleton .card-header { padding-bottom: 20px; }
.pick-skeleton .pick-row { padding: 12px 0; }

.pick-skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    left: -45%;
    width: 45%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(237,232,223,.035) 42%,
        rgba(232,163,61,.07)   52%,
        rgba(237,232,223,.035) 62%,
        transparent 100%);
    animation: picksSweep 2.4s var(--ease-standard) infinite;
}
.pick-skeleton:nth-child(3)::after { animation-delay: .2s; }
.pick-skeleton:nth-child(4)::after { animation-delay: .4s; }

.sk-line {
    display: block;
    background: var(--ground-400);
    border-radius: var(--radius-sm);
}
.sk-ticker { width: 74px; height: 18px; }
.sk-badge  { width: 58px; height: 15px; background: var(--teal-600); }
/* The placeholders sit in the same tracks the real values will, and the two
   that stand in for a price and a date are pushed to the end of theirs the way
   those are - otherwise the cards visibly shuffle sideways when the response
   paints over them.

   The date bar's width is load-bearing, unlike the other two: its column is
   sized to whatever is in it, so a bar much shorter than a real date would
   place the price column somewhere the real card never puts it. It is set to
   about what "Jun 25, 2026" measures. */
.sk-label  { width: 44px; height: 12px; }
.sk-price  { width: 62px; height: 14px; justify-self: end; }
.sk-date   { width: 88px; height: 12px; justify-self: end; }
.pick-skeleton .pick-row:last-child .sk-price { width: 68px; }
.pick-skeleton .pick-row:last-child .sk-date  { width: 82px; }

/* Matching the smaller date the narrow layout renders (see the pick-row media
   query above); declared here so it lands after the widths it revises. */
@media (max-width: 359.98px) {
    .sk-date { width: 81px; }
    .pick-skeleton .pick-row:last-child .sk-date { width: 74px; }
}

@keyframes picksSweep {
    from { transform: translateX(0); }
    to   { transform: translateX(322%); }
}
@media (prefers-reduced-motion: reduce) {
    .pick-skeleton::after { animation: none; }
}

/* == 4. Marketing / legal pages ============================================ */

/* -- Topbar -- */
.site-topbar {
    position: sticky;
    top: 0;
    z-index: 200;
    height: 52px;
    background: rgba(14,17,10,.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ground-300);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1.5rem;
}
.site-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    flex-shrink: 0;
}
.site-logo-icon {
    width: 30px;
    height: 30px;
    background: var(--rust-500);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: .72rem;
    font-weight: 600;
    color: var(--snow-100);
    letter-spacing: -.02em;
}
.site-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.site-logo-top {
    font-family: var(--mono);
    font-size: .58rem;
    font-weight: 500;
    color: var(--moss-400);
    letter-spacing: .16em;
    text-transform: uppercase;
}
.site-logo-bot {
    font-family: var(--font-voice);
    font-size: .95rem;
    font-weight: 600;
    color: var(--snow-100);
    letter-spacing: -.01em;
}
.site-nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.site-nav a {
    font-size: .82rem;
    font-weight: 500;
    color: var(--moss-200);
    text-decoration: none;
    padding: .3rem .75rem;
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast), background var(--dur-fast);
}
.site-nav a:hover { color: var(--snow-100); background: var(--ground-400); }
.site-nav a.active { color: var(--snow-100); }
.site-nav .nav-login {
    margin-left: .5rem;
    background: var(--rust-500);
    color: var(--snow-100);
    padding: .3rem .85rem;
}
.site-nav .nav-login:hover { background: var(--rust-400); color: var(--snow-100); }

/* -- Page hero -- */
.page-hero {
    padding: 80px 0 64px;
    text-align: center;
    background: radial-gradient(120% 140% at 50% 0%, rgba(232,163,61,.07) 0%, transparent 60%);
    border-bottom: 1px solid var(--ground-300);
}
.hero-eyebrow {
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ember-500);
    margin-bottom: 1rem;
}
.page-hero h1 {
    font-family: var(--font-voice);
    font-size: clamp(2.2rem, 5vw, 3.25rem);
    font-weight: 600;
    color: var(--snow-100);
    letter-spacing: -.01em;
    margin-bottom: 1.25rem;
    line-height: 1.08;
}
.page-hero .lead {
    font-size: 1.0625rem;
    color: var(--moss-200);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}
.effective-date {
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--moss-400);
    letter-spacing: .04em;
}

/* -- Section utilities -- */
.section { padding: 72px 0; }
.section + .section { border-top: 1px solid var(--ground-300); }
.section-alt { background: var(--ground-700); }
.section-label {
    font-family: var(--mono);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--rust-400);
    margin-bottom: .75rem;
    display: block;
}
.section-label-center { text-align: center; display: block; margin-bottom: 1rem; }
.section-title {
    font-family: var(--font-voice);
    font-size: 1.9rem;
    font-weight: 600;
    color: var(--snow-100);
    letter-spacing: -.01em;
    margin-bottom: 1rem;
}
.section-body {
    font-size: 1rem;
    color: var(--moss-200);
    line-height: 1.75;
}

/* -- Mission band --
   The band carries two background layers behind the quote: the hero's
   dug-earth grid for texture, and a slow-drifting ember glow for life.
   isolation:isolate gives the band its own stacking context so both layers
   can sit at negative z-index - painted over the band's flat fill but under
   the quote - without the pseudo-elements escaping behind the page. */
.mission-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--ground-700);
    border-top: 1px solid var(--ground-300);
    border-bottom: 1px solid var(--ground-300);
    padding: 60px 0;
    text-align: center;
}

/* Texture: the same 40px rust grid the hero uses, at roughly three quarters
   its strength, masked to a soft oval so the band's edges stay flat colour
   and the borders read as clean hairlines. Static - a moving grid would pull
   the eye straight off the mission statement. */
.mission-band::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(194,87,30,.034) 1px, transparent 1px),
        linear-gradient(90deg, rgba(194,87,30,.034) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(78% 130% at 50% 50%, #000 18%, transparent 76%);
            mask-image: radial-gradient(78% 130% at 50% 50%, #000 18%, transparent 76%);
}

/* The eye of light: one ember pool and one rust pool, offset from each other
   so the field is asymmetric, drifting on a 34s cycle. Deliberately slower
   and fainter than .fx-panel__glow - this sits behind body copy, not a
   diagram. transform and opacity only, so it composites without repainting. */
.mission-band::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 130%;
    height: 240%;
    z-index: -1;
    pointer-events: none;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(38% 44% at 36% 40%, rgba(232,163,61,.10), transparent 64%),
        radial-gradient(32% 40% at 70% 62%, rgba(194,87,30,.08), transparent 66%);
    animation: mission-drift 34s var(--ease-standard, cubic-bezier(0.4,0,0.2,1)) infinite;
}

@keyframes mission-drift {
    0%   { transform: translate(-50%, -50%) scale(1);    opacity: .72; }
    30%  { transform: translate(-53%, -47%) scale(1.07); opacity: 1;   }
    62%  { transform: translate(-47%, -53%) scale(1.03); opacity: .85; }
    100% { transform: translate(-50%, -50%) scale(1);    opacity: .72; }
}

@media (prefers-reduced-motion: reduce) {
    .mission-band::after { animation: none; opacity: .85; }
}
.mission-band blockquote {
    font-family: var(--font-voice);
    font-size: clamp(1.3rem, 2.6vw, 1.75rem);
    font-weight: 500;
    font-style: italic;
    color: var(--snow-100);
    line-height: 1.4;
    max-width: 760px;
    margin: 0 auto;
    letter-spacing: -.005em;
}
.mission-band blockquote::before {
    content: '\201C';
    color: var(--rust-500);
    font-size: 2rem;
    line-height: 0;
    vertical-align: -.4em;
    margin-right: .2rem;
}
.mission-band blockquote::after {
    content: '\201D';
    color: var(--rust-500);
    font-size: 2rem;
    line-height: 0;
    vertical-align: -.4em;
    margin-left: .2rem;
}

/* -- Feature grid (about) -- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
}
.feature-item {
    background: var(--ground-500);
    border: 1px solid var(--ground-300);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-med), transform var(--dur-fast), box-shadow var(--dur-med);
}
.feature-item:hover { border-color: var(--ground-200); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.feature-item-icon {
    width: 40px;
    height: 40px;
    background: var(--ember-glow);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ember-500);
    font-size: 1.15rem;
    margin-bottom: 1rem;
}
.feature-item h5 {
    font-family: var(--font-voice);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--snow-100);
    margin-bottom: .4rem;
}
.feature-item p {
    font-size: .875rem;
    color: var(--moss-200);
    line-height: 1.6;
    margin: 0;
}

/* -- Values cards -- */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 2.5rem;
}
.value-card {
    background: var(--ground-500);
    border: 1px solid var(--ground-300);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-med), transform var(--dur-med), box-shadow var(--dur-med);
}
.value-card:hover {
    border-color: var(--ground-200);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.value-card-icon {
    width: 48px;
    height: 48px;
    background: var(--ember-glow);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ember-500);
    font-size: 1.3rem;
    margin: 0 auto 1.1rem;
}
.value-card h5 {
    font-family: var(--font-voice);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--snow-100);
    margin-bottom: .5rem;
}
.value-card p {
    font-size: .875rem;
    color: var(--moss-200);
    line-height: 1.6;
    margin: 0;
}

/* -- Disclaimer (about / footer) - ember warning tone -- */
.disclaimer-box {
    background: var(--ember-glow);
    border: 1px solid rgba(232,163,61,.28);
    border-left: 3px solid var(--ember-500);
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
    margin-top: 2.5rem;
}
.disclaimer-box .dis-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--mono);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ember-500);
    margin-bottom: .75rem;
}
.disclaimer-box p {
    font-size: .875rem;
    color: var(--moss-200);
    line-height: 1.7;
    margin: 0;
}
.disclaimer-box a { color: var(--ember-400); }
.disclaimer-box a:hover { color: var(--snow-100); }

/* -- Contact form card -- */
.form-card {
    background: var(--ground-500);
    border: 1px solid var(--ground-300);
    border-radius: var(--radius-lg);
    padding: 2rem 2.25rem;
    box-shadow: var(--shadow-sm);
}
.form-card h3 {
    font-family: var(--font-voice);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--snow-100);
    margin-bottom: 1.5rem;
}
.form-card-icon { color: var(--ember-500); font-size: .95rem; }

/* Dark form controls */
.form-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--moss-200);
    letter-spacing: .02em;
    margin-bottom: .4rem;
}
.form-control, .form-select {
    background: var(--ground-800) !important;
    border: 1px solid var(--ground-300) !important;
    color: var(--snow-200) !important;
    border-radius: var(--radius-md) !important;
    font-size: .9rem !important;
    padding: .6rem .85rem !important;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-control::placeholder { color: var(--moss-500) !important; }
.form-control:focus, .form-select:focus {
    border-color: var(--ember-500) !important;
    box-shadow: var(--glow-ember) !important;
    outline: none;
}
textarea.form-control { resize: vertical; min-height: 130px; }

.btn-send {
    background: var(--rust-500);
    border: none;
    color: var(--snow-100);
    font-size: .9rem;
    font-weight: 600;
    padding: .7rem 1.5rem;
    border-radius: var(--radius-md);
    width: 100%;
    cursor: pointer;
    transition: background var(--dur-fast), transform var(--dur-fast);
}
.btn-send:hover  { background: var(--rust-400); }
.btn-send:active { transform: scale(.98); }
.btn-send:disabled {
    background: var(--ground-400);
    color: var(--moss-400);
    cursor: not-allowed;
    transform: none;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. Kept
   out of the tab order and the accessibility tree via markup attributes. */
.form-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Turnstile renders in an iframe; reserve its height so the Send button does
   not jump down once the widget paints. */
.cf-turnstile { min-height: 65px; }

/* -- Inline feedback (contact form) --
   Follows the design system Alert component: wash background, hairline
   border, 3px accent rule on the leading edge. */
.fox-alert {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .875rem 1rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-md);
    font-size: .875rem;
    line-height: 1.6;
}
.fox-alert i { font-size: 1.15rem; flex-shrink: 0; margin-top: 1px; }
.fox-alert-success {
    background: var(--teal-tint);
    border: 1px solid var(--teal-600);
    border-left: 3px solid var(--teal-500);
    color: var(--moss-200);
}
.fox-alert-success i { color: var(--teal-500); }
.fox-alert-danger {
    background: var(--down-tint);
    border: 1px solid var(--down-500);
    border-left: 3px solid var(--down-500);
    color: var(--moss-200);
}
.fox-alert-danger i { color: var(--down-500); }

/* -- Confirm dialog --
   Bootstrap modal restyled onto the design system Dialog: night backdrop
   with a blur, raised card surface, serif title, right-aligned actions. */
.fox-modal .modal-content {
    background: var(--ground-500);
    border: 1px solid var(--ground-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.fox-modal .modal-body { padding: 2rem; }
.fox-modal-eyebrow {
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--rust-500);
    margin-bottom: .5rem;
}
.fox-modal-title {
    font-family: var(--font-voice);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--snow-100);
    margin-bottom: .75rem;
}
.fox-modal-body {
    font-size: .9rem;
    line-height: 1.7;
    color: var(--moss-200);
    margin: 0;
}
.fox-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: .625rem;
    margin-top: 1.75rem;
}
.modal-backdrop.show {
    background: rgba(8, 10, 6, .72);
    opacity: 1;
    backdrop-filter: blur(3px);
}
.fox-btn-ghost, .fox-btn-primary {
    font-size: .875rem;
    font-weight: 600;
    padding: .55rem 1.15rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.fox-btn-ghost {
    background: transparent;
    border: 1px solid var(--ground-200);
    color: var(--moss-200);
}
.fox-btn-ghost:hover  { border-color: var(--moss-300); color: var(--snow-100); background: var(--ground-400); }
.fox-btn-ghost:active { transform: scale(.97); }
.fox-btn-primary {
    background: var(--rust-500);
    border: 1px solid var(--rust-500);
    color: var(--snow-100);
}
.fox-btn-primary:hover  { background: var(--rust-400); border-color: var(--rust-400); }
.fox-btn-primary:active { transform: scale(.97); }

/* -- Info cards (contact) -- */
.info-card {
    background: var(--ground-500);
    border: 1px solid var(--ground-300);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .75rem;
    transition: border-color var(--dur-med);
}
.info-card:hover { border-color: var(--ground-200); }
.info-card-icon {
    width: 38px;
    height: 38px;
    background: var(--ember-glow);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ember-500);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.info-card-body h6 {
    font-size: .9rem;
    font-weight: 700;
    color: var(--snow-100);
    margin-bottom: .3rem;
}
.info-card-body p {
    font-size: .875rem;
    color: var(--moss-200);
    margin: 0;
    line-height: 1.6;
}
.info-card-body a { color: var(--ember-400); text-decoration: none; }
.info-card-body a:hover { color: var(--snow-100); }
.info-note { margin-top: .3rem; font-size: .78rem; color: var(--moss-400); }

/* -- Notice box (contact) -- */
.notice-box {
    background: var(--rust-tint);
    border: 1px solid rgba(194,87,30,.28);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-top: .75rem;
}
.notice-box-title {
    font-family: var(--mono);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rust-300);
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.notice-box p {
    font-size: .875rem;
    color: var(--moss-200);
    line-height: 1.65;
    margin: 0;
}

/* -- Document layout (privacy / terms) -- */
.doc-layout { padding: 56px 0 72px; }
.doc-sidebar {
    position: sticky;
    top: 68px;
    padding-right: 1.5rem;
}
.doc-toc-title {
    font-family: var(--mono);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--moss-400);
    margin-bottom: .75rem;
}
.doc-toc-list { list-style: none; padding: 0; margin: 0; }
.doc-toc-list li { margin-bottom: .1rem; }
.doc-toc-list a {
    font-size: .8rem;
    color: var(--moss-200);
    text-decoration: none;
    padding: .28rem .6rem;
    border-radius: var(--radius-sm);
    display: block;
    transition: color var(--dur-fast), background var(--dur-fast);
    border-left: 2px solid transparent;
}
.doc-toc-list a:hover {
    color: var(--snow-100);
    background: var(--ground-400);
    border-left-color: var(--rust-500);
}
.doc-body { max-width: 720px; }
.doc-intro { font-size: .95rem; color: var(--moss-200); line-height: 1.78; margin-bottom: 2rem; }
.doc-section {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--ground-300);
}
.doc-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.doc-section-num {
    font-family: var(--mono);
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ember-500);
    margin-bottom: .4rem;
    display: block;
}
.doc-section h2 {
    font-family: var(--font-voice);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--snow-100);
    letter-spacing: -.01em;
    margin-bottom: 1rem;
}
.doc-section p {
    font-size: .9375rem;
    color: var(--moss-200);
    line-height: 1.78;
    margin-bottom: .85rem;
}
.doc-section p:last-child { margin-bottom: 0; }
.doc-section ul { padding-left: 1.25rem; margin-bottom: .85rem; }
.doc-section ul li {
    font-size: .9375rem;
    color: var(--moss-200);
    line-height: 1.75;
    margin-bottom: .35rem;
}
.doc-section a { color: var(--ember-400); text-decoration: none; }
.doc-section a:hover { color: var(--snow-100); text-decoration: underline; }
.doc-section strong { color: var(--snow-200); font-weight: 600; }

/* -- Prominent disclaimer banner (terms) - ember warning -- */
.disclaimer-banner {
    background: var(--ember-glow);
    border: 1px solid rgba(232,163,61,.3);
    border-left: 4px solid var(--ember-500);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2.5rem;
}
.disclaimer-banner-title {
    font-family: var(--mono);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ember-500);
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.disclaimer-banner p {
    font-size: .9rem;
    color: var(--moss-200);
    line-height: 1.72;
    margin: 0;
}
.disclaimer-banner strong { color: var(--snow-200); }

/* No-advice highlight box (terms) - clay/danger accent */
.nfa-box {
    background: var(--down-tint);
    border: 1px solid rgba(213,83,62,.3);
    border-left: 4px solid var(--down-500);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.4rem;
    margin-top: 1rem;
}
.nfa-box p {
    font-size: .9rem;
    color: var(--moss-200);
    margin: 0;
    line-height: 1.72;
}
.nfa-box strong { color: var(--down-500); }

/* -- Shared marketing footer -- */
.site-footer {
    background: var(--ground-700);
    border-top: 1px solid var(--ground-300);
    padding: 2.5rem 0 1.5rem;
    margin-top: auto;
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem .1rem;
    margin-bottom: 1.25rem;
}
.footer-links a {
    font-size: .8rem;
    color: var(--moss-200);
    text-decoration: none;
    padding: .2rem .7rem;
    transition: color var(--dur-fast);
}
.footer-links a:hover { color: var(--rust-300); }
.footer-links .footer-sep { color: var(--moss-500); font-size: .7rem; }
.footer-copy { text-align: center; font-size: .75rem; color: var(--moss-400); }

@media (max-width: 767px) {
    .doc-sidebar { position: static; padding-right: 0; margin-bottom: 2rem; }
}

/* == 5. Pricing page ======================================================= */

/* -- Topbar -- */
.topbar {
    height: 52px;
    background: rgba(14,17,10,.92);
    border-bottom: 1px solid var(--ground-300);
    display: flex; align-items: center;
    padding: 0 1.5rem; gap: 1rem;
    position: sticky; top: 0; z-index: 100;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.topbar-logo { display: flex; align-items: center; gap: 8px; }
.logo-icon {
    width: 30px; height: 30px;
    background: linear-gradient(135deg, var(--rust-600), var(--rust-400));
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 600; color: var(--snow-100); font-family: var(--mono);
    flex-shrink: 0;
}
.logo-words { display: flex; flex-direction: column; line-height: 1.1; }
.logo-top { font-family: var(--mono); font-size: .58rem; font-weight: 500; color: var(--moss-400); letter-spacing: .16em; text-transform: uppercase; }
.logo-bot { font-family: var(--font-voice); font-size: .95rem; font-weight: 600; color: var(--snow-100); letter-spacing: -.01em; }
.topbar-nav { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.topbar-nav a { font-size: .82rem; color: var(--moss-200); transition: color var(--dur-med); }
.topbar-nav a:hover, .topbar-nav a.active { color: var(--snow-100); }
.topbar-nav .btn-login {
    background: var(--rust-500); color: var(--snow-100);
    padding: 5px 14px; border-radius: var(--radius-sm);
    font-size: .8rem; font-weight: 600;
    transition: background var(--dur-med);
}
.topbar-nav .btn-login:hover { background: var(--rust-400); color: var(--snow-100); }

/* -- Page wrap -- */
.page-wrap { max-width: 900px; margin: 0 auto; padding: 70px 24px 90px; }

/* -- Hero -- */
.hero { text-align: center; margin-bottom: 52px; }
.hero-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
    color: var(--ember-500); margin-bottom: 14px;
}
.hero h1 {
    font-family: var(--font-voice);
    font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 600; letter-spacing: -.01em;
    color: var(--snow-100); margin-bottom: 14px;
}
.hero p { font-size: 1.0625rem; color: var(--moss-200); max-width: 520px; margin: 0 auto 32px; line-height: 1.7; }

/* -- Billing toggle -- */
.billing-toggle {
    display: inline-flex;
    background: var(--ground-600);
    border: 1px solid var(--ground-300);
    border-radius: var(--radius-pill);
    padding: 4px;
    gap: 2px;
}
.toggle-btn {
    padding: 7px 20px;
    border-radius: var(--radius-pill);
    font-size: .82rem; font-weight: 600;
    cursor: pointer; border: none;
    background: transparent; color: var(--moss-200);
    transition: background var(--dur-med), color var(--dur-med);
}
.toggle-btn.active { background: var(--rust-500); color: var(--snow-100); }
.save-badge {
    display: inline-block;
    background: var(--ground-900);
    color: var(--ember-400);
    font-family: var(--mono);
    font-size: .68rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 8px; border-radius: var(--radius-pill);
    margin-left: 6px; vertical-align: middle;
}

/* -- Pricing card -- */
.plan-card {
    background: var(--ground-500);
    border: 1px solid var(--ground-300);
    border-radius: var(--radius-xl);
    padding: 40px 44px;
    position: relative;
    margin-top: 36px;
    box-shadow: var(--shadow-md);
    transition: border-color var(--dur-med);
}
.plan-card:hover { border-color: var(--ground-200); }
.plan-glow {
    position: absolute; inset: -1px; border-radius: var(--radius-xl);
    background: radial-gradient(120% 120% at 100% 0%, var(--rust-tint), transparent 60%);
    z-index: 0; pointer-events: none;
    opacity: 0; transition: opacity var(--dur-slow, 320ms);
}
.plan-card:hover .plan-glow { opacity: 1; }
.plan-inner { position: relative; z-index: 1; }
.plan-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--rust-tint);
    border: 1px solid rgba(194,87,30,.35);
    color: var(--rust-300);
    font-family: var(--mono);
    font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 12px; border-radius: var(--radius-pill);
    margin-bottom: 20px;
}
.plan-name { font-family: var(--font-voice); font-size: 1.75rem; font-weight: 600; color: var(--snow-100); margin-bottom: 6px; }
.plan-desc { font-size: .9375rem; color: var(--moss-200); margin-bottom: 28px; }

.price-block { margin-bottom: 8px; }
.price-amount {
    font-size: 3.2rem; font-weight: 500; color: var(--snow-100); letter-spacing: -.02em;
    font-family: var(--mono); line-height: 1;
}
.price-amount .currency { font-size: 1.6rem; vertical-align: top; margin-top: 6px; display: inline-block; color: var(--moss-300); }
.price-period { font-family: var(--mono); font-size: .9rem; color: var(--moss-300); margin-left: 4px; }
/* Matches the monthly default rendered in pricing.php. foxhole.js sets this
   colour inline on every toggle, so this only governs the first paint. */
.price-annual-note { font-size: .8rem; color: var(--fin-muted); margin-top: 4px; min-height: 18px; }

.plan-divider { border: none; border-top: 1px solid var(--ground-300); margin: 28px 0; }

.features-title { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--moss-400); margin-bottom: 16px; }
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px 24px;
    margin-bottom: 32px;
}
.plan-feature { display: flex; align-items: flex-start; gap: 10px; font-size: .875rem; color: var(--moss-200); }
.plan-feature .fi-check { color: var(--teal-500); font-size: .95rem; flex-shrink: 0; margin-top: 2px; }

.plan-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 14px 24px;
    background: var(--rust-500);
    color: var(--snow-100); font-weight: 600; font-size: .95rem;
    border-radius: var(--radius-md); border: none; cursor: pointer;
    transition: background var(--dur-med), transform var(--dur-fast);
}
.plan-cta:hover  { background: var(--rust-400); color: var(--snow-100); }
.plan-cta:active { transform: scale(.98); }

/* -- FAQ strip -- */
.faq-strip { margin-top: 64px; text-align: center; }
.faq-strip h2 { font-family: var(--font-voice); font-size: 1.5rem; font-weight: 600; color: var(--snow-100); margin-bottom: 8px; }
.faq-strip p { font-size: .9375rem; color: var(--moss-200); margin-bottom: 20px; }
.faq-strip a {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ground-500); border: 1px solid var(--ground-300);
    color: var(--snow-200); font-size: .875rem; font-weight: 600;
    padding: 10px 22px; border-radius: var(--radius-md);
    transition: border-color var(--dur-med), color var(--dur-med);
}
.faq-strip a:hover { border-color: var(--rust-500); color: var(--rust-300); }

/* -- Pricing footer -- */
.pricing-footer {
    border-top: 1px solid var(--ground-300);
    padding: 28px 24px;
    text-align: center;
    font-size: .78rem; color: var(--moss-400);
}
.pricing-footer a { color: var(--moss-400); margin: 0 8px; transition: color var(--dur-med); }
.pricing-footer a:hover { color: var(--moss-200); }
.pricing-footer .footer-nav { margin-bottom: 10px; }

@media (max-width: 600px) {
    .hero h1 { font-size: 1.9rem; }
    .plan-card { padding: 28px 20px; }
    .price-amount { font-size: 2.4rem; }
    .features-grid { grid-template-columns: 1fr; }
    .topbar-nav .nav-hide { display: none; }
}

/* ==========================================================================
   HERO CAROUSEL PANELS - shared base
   Every colour falls back to a literal so the block also works outside the
   token sheet. All inner sizing is container-query based, so a panel scales
   with its column instead of needing breakpoints.
   The base must stay above the individual panel blocks that follow it.
   ========================================================================== */

.fx-panel {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;                       /* same box as .fin-hero-placeholder */
    background: var(--ground-700, #16190F);
    border: 1px solid var(--ground-300, #2E3A22);
    border-radius: var(--radius-xl, 20px);
    overflow: hidden;
    container-type: inline-size;                 /* enables the cqw sizing below */
    box-sizing: border-box;
}

.fx-panel__glow {
    position: absolute;
    left: 50%; top: 60%;
    width: 105cqw; height: 75cqw;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 50% 50%,
                rgba(232,163,61,0.085), rgba(232,163,61,0.03) 36%, transparent 64%);
    animation: fx-breathe 11s var(--ease-standard, cubic-bezier(0.4,0,0.2,1)) infinite;
    pointer-events: none;
}

.fx-panel__body {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.9cqw;
    padding: 3.6cqw 4cqw;
    box-sizing: border-box;
}
.fx-panel__body--centered { justify-content: center; }

/* The eyebrow pill sits below a panel's well. .fin-hero-tag is inline-flex,
   so align-self stops the column's stretch from pulling it full width.
   The type scales down on narrow panels and is capped at the pill's normal
   .7rem: the longest captions wrap to two lines otherwise, and a taller pill
   steals height from the well, which both breaks the framing the three
   slides share and clips panel 07's diagram. */
.fx-panel .fin-hero-tag {
    align-self: flex-start;
    font-size: clamp(7px, 2.5cqw, .7rem);
    white-space: nowrap;
}

/* The quiet caption - sans, never serif, so it cannot compete with the hero
   H1 beside it. The cqw factor is tuned for the panel's real width in the
   hero column (roughly 620px at container-xl), which lands the caption on
   the same 17px as .fin-hero-body. The floor keeps it readable once the
   panel drops to full-bleed mobile width.
   Currently unused - both live panels use the eyebrow pill instead - but
   kept as part of the shared base for panels still to be installed. */
.fx-caption {
    margin: 0;
    font-family: var(--font-sans, 'Manrope', system-ui, -apple-system, sans-serif);
    font-weight: 600;
    font-size: clamp(13px, 2.75cqw, 37px);
    line-height: 1.18;
    letter-spacing: -0.005em;
    color: var(--ember-500, #E8A33D);
    text-wrap: pretty;
}

/* Shared keyframes - used by more than one panel */
@keyframes fx-breathe {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.97); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.03); }
}
@keyframes fx-flow  { to { stroke-dashoffset: -320; } }
@keyframes fx-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* Don't burn CPU animating slides nobody is looking at. Bootstrap keeps
   .active on the visible .carousel-item only. */
.carousel-item:not(.active) .fx-panel *,
.carousel-item:not(.active) .fx-panel { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .fx-panel *, .fx-panel { animation: none !important; }
}


/* ==========================================================================
   Hero panel 01 - "Read the signal under the noise."
   ========================================================================== */

/* -- chart well -- */
.fx-chart {
    position: relative;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--ground-300, #2E3A22);
    border-radius: var(--radius-lg, 14px);
    background: var(--ground-800, #12160D);
    overflow: hidden;
}
.fx-chart > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.fx-grid line { stroke: var(--ground-300, #2E3A22); stroke-width: 1; }

/* Market noise - drift amplitude is deliberately small; it should register
   as movement without ever pulling the eye off the thesis line. */
.fx-noise { opacity: 0.30; }
.fx-noise path {
    fill: none;
    stroke: var(--moss-300, #8FA06E);
    stroke-width: 1.6;
    stroke-linejoin: round;
    animation-name: fx-drift;
    animation-timing-function: var(--ease-standard, cubic-bezier(0.4,0,0.2,1));
    animation-iteration-count: infinite;
}

/* The one rust element in the panel */
.fx-thesis,
.fx-thesis-shadow { fill: none; stroke: var(--rust-500, #C2571E); stroke-linecap: round; }
.fx-thesis        { stroke-width: 5; }
.fx-thesis-shadow { stroke-width: 1; opacity: 0.35; }

/* Travelling ember dot. The circle is squashed vertically because the svg is
   stretched non-uniformly (preserveAspectRatio="none"); 0.64 makes it render
   as a true circle. Adjust only if the well's proportions change.
   It rides the thesis line on a CSS motion path rather than SVG
   <animateMotion>: Blink drops SMIL inside a display:none subtree and does
   not restart it, so the dot died the first time Bootstrap cycled back to
   this slide. A CSS animation also honours the pause rule at the foot of
   the base block, which never applied to SMIL. Keep this path identical to
   the .fx-thesis d attribute in the markup. */
.fx-dot {
    fill: var(--ember-400, #F0B65E);
    offset-path: path("M0,358 C88,350 148,336 220,326 C300,315 342,294 420,278 C500,262 542,246 620,224 C700,202 758,202 830,176 C902,150 950,130 1030,106 C1092,88 1142,78 1200,64");
    offset-rotate: 0deg;                         /* no spin - the 0.64 squash must stay upright */
    animation: fx-travel 8s linear infinite;
}
@keyframes fx-travel { to { offset-distance: 100%; } }

/* Ember scan beam - runs faster than the dot so it overtakes each pass */
.fx-sweep {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 12%;
    background: linear-gradient(90deg, transparent,
                rgba(232,163,61,0.05) 38%, rgba(232,163,61,0.14) 50%,
                rgba(232,163,61,0.05) 62%, transparent);
    animation: fx-sweep 5s linear infinite;
    pointer-events: none;
}
.fx-sweep i {
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(240,182,94,0.75), transparent);
}

@keyframes fx-drift {
    0%   { transform: translate(-0.5%, -3.4%); }
    50%  { transform: translate(0.6%, 2.2%); }
    100% { transform: translate(-0.5%, -3.4%); }
}
@keyframes fx-sweep {
    0%   { transform: translateX(-130%); opacity: 0; }
    6%   { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateX(760%); opacity: 0; }
}


/* ==========================================================================
   Hero panel 07 - the Foxhole pipeline
   The diagram is laid out at exact coordinates against a locked well ratio
   (43.75cqw tall against the 92cqw content width) and the svg viewBox maps
   to it 1:1, so nothing distorts. Changing the panel's padding or the well
   height will pull the connector lines off the chip pins.
   ========================================================================== */

/* The well itself flexes, so it lands on the same rectangle as panel 01's
   .fx-chart and the two slides frame identically as the carousel advances. */
.fx-pipe {
    position: relative;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--ground-300, #2E3A22);
    border-radius: var(--radius-lg, 14px);
    background: var(--ground-800, #12160D);
    overflow: hidden;
}

/* The diagram keeps its locked ratio inside that flexible well. This box is
   the exact geometry the svg viewBox and every cqw offset below are drawn
   against - it is also the positioning context for them - so centring it
   gains the height without moving a connector off its chip pin. */
.fx-pipe__stage {
    position: absolute;
    left: 0; right: 0; top: 50%;
    aspect-ratio: 1472 / 700;   /* the svg viewBox - keep the two in step */
    transform: translateY(-50%);
}
.fx-pipe__stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.fx-pipe__glow {
    position: absolute;
    left: 50%; top: 50%;
    width: 32.5cqw; height: 26.25cqw;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 50% 50%, rgba(232,163,61,0.10), transparent 66%);
    animation: fx-breathe 9s var(--ease-standard, cubic-bezier(0.4,0,0.2,1)) infinite;
    pointer-events: none;
}

/* -- flow lines -- */
.fx-pipe__rail path { fill: none; stroke: var(--moss-300, #8FA06E); stroke-width: 2; }
.fx-pipe__rail      { opacity: 0.24; }

.fx-pipe__packets path {
    fill: none; stroke-linecap: round;
    animation-name: fx-flow;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.fx-pipe__packets--in path  { stroke: var(--ember-500, #E8A33D); stroke-width: 2.6; stroke-dasharray: 26 300; animation-duration: 3.6s; }
.fx-pipe__packets--out path { stroke: var(--teal-500, #3BD4C0); stroke-width: 3;   stroke-dasharray: 30 240; animation-duration: 2.8s; }

.fx-pipe__arrow--in  { fill: var(--moss-300, #8FA06E); opacity: 0.75; }
.fx-pipe__arrow--out { fill: var(--teal-500, #3BD4C0); opacity: 0.85; }

/* chip pins */
.fx-pipe__pins rect { fill: var(--ground-400, #26301C); stroke: var(--ember-600, #C9862B); stroke-width: 1.5; }

/* -- source tiles -- */
.fx-pipe__sources {
    position: absolute;
    left: 1.75cqw; top: 3.375cqw;
    width: 15.625cqw;
    display: flex; flex-direction: column; gap: 2.5cqw;
}
.fx-pipe__node {
    height: 7.375cqw;
    box-sizing: border-box;
    display: flex; align-items: center; gap: 1cqw;
    padding: 0 1.125cqw;
    border: 1.5px solid var(--ground-300, #2E3A22);
    border-radius: 0.875cqw;
    background: var(--ground-700, #16190F);
}
.fx-pipe__glyph {
    width: 3.625cqw; height: 3.625cqw; flex: none;
    display: grid; place-items: center;
    border: 1.5px solid var(--ground-300, #2E3A22);
    border-radius: 0.625cqw;
    background: var(--ground-800, #12160D);
    font-size: clamp(9px, 1.875cqw, 30px);
}
.fx-pipe__label {
    font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
    font-size: clamp(6px, 0.94cqw, 15px);
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--moss-200, #B9C29E);
}
.fx-pipe__label--tight { letter-spacing: 0.07em; }

/* -- the chip -- */
.fx-pipe__chip {
    position: absolute;
    left: 32.5cqw; top: 13.125cqw;
    width: 23.75cqw; height: 17.5cqw;
    box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.875cqw;
    border: 0.125cqw solid var(--ember-600, #C9862B);
    border-radius: 1.125cqw;
    background: linear-gradient(180deg, var(--ground-600, #1B1F16), var(--ground-800, #12160D));
    box-shadow: 0 0 0 0.375cqw rgba(232,163,61,0.05), 0 1.6cqw 3.75cqw -1.4cqw rgba(0,0,0,0.9);
}
.fx-pipe__chip::before {         /* dashed inner rule */
    content: '';
    position: absolute; inset: 0.625cqw;
    border: 1px dashed rgba(201,134,43,0.35);
    border-radius: 0.75cqw;
    pointer-events: none;
}
.fx-pipe__screw {
    position: absolute;
    width: 0.6875cqw; height: 0.6875cqw;
    border-radius: var(--radius-pill, 999px);
    background: var(--ground-600, #1B1F16);
    border: 1px solid var(--ground-300, #2E3A22);
}
.fx-pipe__screw--tl { left: 1.25cqw; top: 1.25cqw; }
.fx-pipe__screw--tr { right: 1.25cqw; top: 1.25cqw; }
.fx-pipe__screw--bl { left: 1.25cqw; bottom: 1.25cqw; }
.fx-pipe__screw--br { right: 1.25cqw; bottom: 1.25cqw; }

.fx-pipe__chip-title {
    font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
    font-weight: 500;
    font-size: clamp(10px, 1.625cqw, 26px);
    line-height: 1.22;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ember-400, #F0B65E);
    text-align: center;
}
.fx-pipe__chip-mark {
    font-size: clamp(18px, 3.5cqw, 56px);
    color: var(--ember-500, #E8A33D);
    animation: fx-pulse 5s var(--ease-standard, cubic-bezier(0.4,0,0.2,1)) infinite;
}
.fx-pipe__chip-sub {
    width: 18.75cqw;
    text-align: center;
    font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
    font-size: clamp(5px, 0.75cqw, 12px);
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--moss-400, #7C8A6B);
}

/* -- outputs -- */
.fx-pipe__outputs {
    position: absolute;
    left: 72cqw; top: 11.5625cqw;
    width: 18.25cqw;
    display: flex; flex-direction: column; gap: 4.375cqw;
}
.fx-pipe__out {
    height: 8.125cqw;
    box-sizing: border-box;
    display: flex; align-items: center; gap: 1cqw;
    padding: 0 1.25cqw;
    border: 1.5px solid var(--ground-200, #3A472C);
    border-radius: 0.875cqw;
    background: var(--ground-500, #1F2416);
}
.fx-pipe__out .fx-pipe__glyph { width: 3.375cqw; height: 3.375cqw; font-size: clamp(9px, 1.75cqw, 28px); }
.fx-pipe__out-text { display: flex; flex-direction: column; gap: 0.375cqw; }
.fx-pipe__out-title {
    font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
    font-size: clamp(7px, 1.125cqw, 18px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--snow-300, #C7C0B1);
}
.fx-pipe__out-sub {
    font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
    font-size: clamp(5px, 0.8125cqw, 13px);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.fx-pipe__out-sub--portal { color: var(--teal-500, #3BD4C0); }
.fx-pipe__out-sub--mail   { color: var(--ember-500, #E8A33D); }


/* ==========================================================================
   Hero panel 04 - news sentiment
   THE DIAL IS ONE ANIMATION. The needle angle, the printed score and the tint
   are registered custom properties animated together on .fx-dial, so they run
   off a single clock and cannot drift out of phase. Never give the needle or
   the readout an animation of its own - two animations with the same duration
   still desync the moment one of them restarts.
   Type is sized for the panel's real width in the hero column (about 620px),
   not the wider standalone preview; at the delivered factors every label sat
   on its clamp floor at 7-8px.
   ========================================================================== */
@property --fxAngle { syntax: "<angle>";   inherits: true; initial-value: 74.5deg; }
@property --fxScore { syntax: "<integer>"; inherits: true; initial-value: 82; }
@property --fxTint  { syntax: "<color>";   inherits: true; initial-value: #3BD4C0; }

.fx-sent {
    position: relative;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 34cqw;
    gap: 1.6cqw;
}

/* -- headline rows -- */
.fx-sent__feed { display: flex; flex-direction: column; gap: 1.2cqw; }
.fx-sent__item {
    flex: 1;
    display: flex; align-items: center; gap: 1.4cqw;
    padding: 0 1.6cqw;
    border: 1px solid var(--ground-300, #2E3A22);
    border-radius: var(--radius-md, 10px);
    background: var(--ground-800, #12160D);
}
.fx-sent__text { flex: 1; display: flex; flex-direction: column; gap: 0.4cqw; }
.fx-sent__src {
    font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
    font-size: clamp(7px, 1.5cqw, 15px);
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--moss-500, #6E7C5E);
}
.fx-sent__head {
    font-family: var(--font-sans, 'Manrope', system-ui, sans-serif);
    font-size: clamp(9px, 2.35cqw, 24px);
    line-height: 1.4;
    color: var(--moss-200, #B9C29E);
}
.fx-sent__tag {
    font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
    font-size: clamp(7px, 1.65cqw, 17px);
    letter-spacing: 0.12em;
    border-radius: var(--radius-pill, 999px);
    padding: 0.55cqw 1.2cqw;
    border: 1px solid var(--ground-300, #2E3A22);
    color: var(--moss-300, #8FA06E);
    white-space: nowrap;
}
.fx-sent__tag--pos { color: var(--teal-400, #63E0CF); border-color: var(--teal-600, #1E3A34); background: rgba(59,212,192,0.12); }
.fx-sent__tag--neg { color: var(--down-500, #D5533E); border-color: var(--down-500, #D5533E); background: rgba(213,83,62,0.12); }

/* -- the gauge -- */
.fx-dial {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1cqw;
    border: 1px solid var(--ground-300, #2E3A22);
    border-radius: var(--radius-md, 10px);
    background: var(--ground-800, #12160D);
    animation: fx-dial 12.15s var(--ease-standard, cubic-bezier(0.4,0,0.2,1)) infinite;
}
.fx-dial svg { width: 76%; height: auto; }

/* The needle simply reads the shared angle - no animation of its own */
.fx-dial__needle {
    transform-origin: 100px 100px;
    transform: rotate(var(--fxAngle, 74.5deg));
    stroke: var(--ember-500, #E8A33D);
    stroke-width: 3.4;
    stroke-linecap: round;
}
.fx-dial__hub  { fill: var(--ember-500, #E8A33D); }
.fx-dial__ring {
    fill: none; stroke: var(--ember-500, #E8A33D); stroke-width: 1.4; opacity: 0.35;
    transform-box: fill-box; transform-origin: center;
    animation: fx-ring 3.6s var(--ease-standard, cubic-bezier(0.4,0,0.2,1)) infinite;
}

.fx-dial__label {
    font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
    font-size: clamp(7px, 1.45cqw, 15px);
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--moss-500, #6E7C5E);
}
.fx-dial__readout {
    display: inline-flex; align-items: baseline; justify-content: center;
    min-width: 4.4ch;
    font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
    font-weight: 500;
    font-size: clamp(13px, 3.6cqw, 56px);
    font-variant-numeric: tabular-nums;
    color: var(--fxTint);
    counter-reset: fxs var(--fxScore);
}
.fx-dial__readout::after { content: counter(fxs); }
/* The counter prints its own minus sign, so the "+" is switched off whenever
   the score is negative - derived from the same value, so it cannot fall out
   of step either. */
.fx-dial__sign { opacity: clamp(0, calc(var(--fxScore, 82) * 100), 1); }

.fx-dial__stack { display: flex; flex-direction: column; align-items: center; gap: 0.3cqw; }

/* Stops are (score / 99) * 90deg on a -99...+99 semicircle: hold 15% of the
   cycle, travel 5%. Edit a score and its angle together. */
@keyframes fx-dial {
    0%,  15% { --fxAngle: 74.5deg;  --fxScore: 82;  --fxTint: #3BD4C0; }
    20%, 35% { --fxAngle: 19.1deg;  --fxScore: 21;  --fxTint: #8FA06E; }
    40%, 55% { --fxAngle: -41.8deg; --fxScore: -46; --fxTint: #D5533E; }
    60%, 75% { --fxAngle: 52.7deg;  --fxScore: 58;  --fxTint: #3BD4C0; }
    80%, 95% { --fxAngle: 10.9deg;  --fxScore: 12;  --fxTint: #8FA06E; }
    100%     { --fxAngle: 74.5deg;  --fxScore: 82;  --fxTint: #3BD4C0; }
}
@keyframes fx-ring {
    0%   { transform: scale(0.5); opacity: 0.9; }
    100% { transform: scale(2.6); opacity: 0; }
}