/* ===========================================================
     Slash: Dark Editorial Fintech design system
     Tokens copied from the slash-dark-fintech skill's
     references/DESIGN.md "Quick Start" block. Layout below follows
     that same file's "Layout" section: fixed top nav (logo + pill
     CTA), a split hero (left copy/form, right product/data card),
     centered section headlines above 3-column grids, and a dense
     footer grid.
     =========================================================== */
  :root{
    /* Colors */
    --color-obsidian:#08080a;
    --color-onyx:#040406;
    --color-carbon:#121317;
    --color-graphite:#1c1d22;
    --color-slate:#2e3038;
    --color-smoke:#464853;
    --color-ash:#5e616e;
    --color-steel:#777a88;
    --color-fog:#9194a1;
    --color-mist:#acafb9;
    --color-silver:#c7c9d1;
    --color-bone:#e2e3e9;
    --color-paper-white:#ffffff;
    --color-copper:#cc9166;
    --gradient-gilded:linear-gradient(103deg, rgb(174,147,87), rgb(255,240,204) 40%, rgb(174,147,87) 70%, rgba(189,157,79,0));

    /* Typography */
    --font-serif:'Playfair Display', 'Ivy Presto', Georgia, serif; /* Ivy Presto substitute per DESIGN.md */
    --font-sans:'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --text-eyebrow:13px;
    --text-body-xs:16px;
    --text-body-sm:18px;
    --text-body:20px;
    --text-subheading:24px;
    --text-heading-sm:44px;
    --text-heading:52px;
    --text-heading-lg:64px;
    --text-display:88px;

    /* Spacing scale */
    --space-4:4px; --space-6:6px; --space-8:8px; --space-9:9px; --space-10:10px;
    --space-12:12px; --space-14:14px; --space-16:16px; --space-20:20px; --space-22:22px;
    --space-24:24px; --space-32:32px; --space-40:40px; --space-48:48px;
    --page-max-width:1216px;
    --section-gap:160px;

    /* Radius */
    --radius-nav:2px;
    --radius-cards:10px;
    --radius-full:9999px;

    /* Page-local variables (not part of the design system tokens):
       these three drive the hero canvas animation's colors, so the
       visualization stays in sync with the palette above without
       touching the animation script itself. */
    --signal:#cc9166;   /* accent pulses / glowing nodes → copper */
    --fog-dot:#e2e3e9;  /* dot-cloud sphere color → bone */
    --ring:#777a88;     /* graticule ring lines → steel */

    /* Functional state colors, used only for form success/error
       messaging and the live status dot, not as brand accents
       (kept desaturated so they don't compete with copper). */
    --state-positive:#7fb89a;
    --state-negative:#e08a90;
  }

  *{box-sizing:border-box;margin:0;padding:0;}
  html{background:var(--color-obsidian); scroll-behavior:smooth;}
  body{
    background:var(--color-obsidian);
    color:var(--color-bone);
    font-family:var(--font-sans);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit; text-decoration:none;}
  #hear, #how, #faq, #join{scroll-margin-top:96px;}

  /* ---------- fixed top nav ---------- */
  .nav{
    position:sticky;
    top:0;
    z-index:20;
    border-bottom:1px solid var(--color-graphite);
    background:rgba(4,4,6,0.7);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }
  .nav-inner{
    max-width:var(--page-max-width);
    margin:0 auto;
    padding:16px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
  }
  .nav-logo{
    font-family:var(--font-sans);
    font-weight:700;
    font-size:14px;
    letter-spacing:0.06em;
    color:var(--color-paper-white);
  }
  .nav-links{
    display:flex;
    gap:28px;
    font-size:14px;
    color:var(--color-fog);
  }
  .nav-links a{ padding:6px 2px; border-radius:var(--radius-nav); transition:color 0.15s ease; }
  .nav-links a:hover{ color:var(--color-paper-white); }
  .nav-actions{ display:flex; align-items:center; gap:10px; }
  .btn-ghost{
    display:inline-flex;
    align-items:center;
    border:1px solid var(--color-paper-white);
    border-radius:var(--radius-full);
    padding:8px 18px;
    font-size:13px;
    font-weight:500;
    color:var(--color-paper-white);
    background:transparent;
    white-space:nowrap;
  }
  .btn-primary{
    display:inline-flex;
    align-items:center;
    background:var(--color-paper-white);
    color:#000000;
    border:none;
    border-radius:var(--radius-full);
    padding:9px 18px;
    font-family:var(--font-sans);
    font-weight:500;
    font-size:13px;
    letter-spacing:0.01em;
    cursor:pointer;
    white-space:nowrap;
    transition:filter 0.15s ease, transform 0.15s ease;
  }
  .btn-primary:hover{filter:brightness(0.92);}
  .btn-primary:active{transform:scale(0.98);}

  /* ---------- hero: split composition per DESIGN.md ---------- */
  .hero{
    max-width:var(--page-max-width);
    margin:0 auto;
    padding:96px 32px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center;
    position:relative; /* keeps hero content above the soft background band */
    z-index:1;
  }

  /* ---------- soft chart backdrop between hero and stats ---------- */
  /* Zero-height marker; its ::before reaches up into the hero and down into the
     stats section, sits behind both, and fades out at the edges. */
  .atmos{ position:relative; height:0; z-index:0; pointer-events:none; }
  .atmos::before{
    content:""; position:absolute; left:0; right:0; top:-400px; height:640px;
    background:url(images/bg-chart.svg) center/cover no-repeat;
    opacity:.4;
    -webkit-mask-image:linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent);
    mask-image:linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent);
  }
  .hero-left{ text-align:left; }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-sans);
    font-weight:700;
    font-size:18px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--color-copper);
    margin-bottom:22px;
  }
  h1{
    font-family:var(--font-serif);
    font-weight:500;
    font-size:clamp(36px, 4.4vw, var(--text-heading-lg));
    line-height:1.08;
    letter-spacing:0.01em;
    color:var(--color-paper-white);
  }
  h1 .line2{
    display:block;
    color:var(--color-mist);
  }
  .lead{
    font-family:var(--font-sans);
    font-size:var(--text-body);
    line-height:1.38;
    color:var(--color-fog);
    max-width:480px;
    margin:28px 0 0;
  }

  /* ---------- waitlist form ---------- */
  .hero-cta-block{
    margin-top:var(--space-40);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--space-14);
  }
  .wl-badge{
    display:inline-block;
    border:1px solid rgba(204,145,102,0.4);
    border-radius:var(--radius-full);
    padding:6px 14px;
    font-size:13px;
    font-weight:500;
    color:var(--color-copper);
  }
  .wl-form{ width:100%; max-width:480px; }
  .wl-row{ display:flex; gap:10px; }
  .wl-input{
    flex:1 1 auto;
    min-width:0;
    height:50px;
    padding:0 18px;
    background:var(--color-carbon);
    border:1px solid var(--color-slate);
    border-radius:var(--radius-full);
    color:var(--color-paper-white);
    font-family:var(--font-sans);
    font-size:16px; /* 16px stops iOS Safari zooming in on focus */
  }
  .wl-input::placeholder{ color:var(--color-ash); }
  .wl-input:focus{ outline:2px solid var(--color-copper); outline-offset:2px; border-color:transparent; }
  .wl-submit{ height:50px; padding:0 26px; font-size:15px; flex:none; }
  .wl-submit[disabled]{ opacity:0.6; cursor:default; }
  .wl-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* honeypot: bots fill it, people never see it */
  .wl-msg{ min-height:20px; margin-top:12px; font-size:14px; color:var(--color-fog); }
  .wl-msg.ok{ color:var(--state-positive); }
  .wl-msg.err{ color:var(--state-negative); }
  .hero-cta-note{
    font-family:var(--font-sans);
    font-size:12px;
    color:var(--color-ash);
    letter-spacing:0.01em;
    line-height:1.5;
  }
  .hero-cta-note a{ text-decoration:underline; }

  /* ---------- hero right: Hero Chart Card ---------- */
  .signal-card{
    background:transparent; /* no box behind the globe, so the backdrop shows through */
  }
  .signal-card-header{
    display:none; /* the window-style dots bar is hidden along with the box */
    align-items:center;
    justify-content:space-between;
    padding:16px 20px;
    border-bottom:1px solid var(--color-graphite);
  }
  .chrome-dots{display:flex;gap:6px;}
  .chrome-dots span{width:7px;height:7px;border-radius:var(--radius-full);background:var(--color-graphite);border:1px solid var(--color-slate);}
  .signal-card-canvas-wrap{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
  }
  #signalScan{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }

  /* ---------- page sections below the hero ---------- */
  .mr-wrap{
    position:relative;
    z-index:2;
    border-top:1px solid var(--color-graphite);
  }

  .section-head{
    max-width:640px;
    margin:0 auto;
    text-align:center;
    padding:0 32px;
  }
  .section-head h2{
    font-family:var(--font-serif);
    font-weight:500;
    font-size:clamp(28px, 3.4vw, var(--text-heading-sm));
    color:var(--color-paper-white);
    margin:0 0 12px;
  }
  .section-head p{
    font-family:var(--font-sans);
    font-size:var(--text-body-sm);
    color:var(--color-mist);
    margin:0;
  }

  .mr-stats-outer{ max-width:var(--page-max-width); margin:0 auto; padding:var(--section-gap) 32px 0; }
  .mr-stats-panel{
    max-width:960px;
    margin:48px auto 0;
    border:1px solid rgba(204,145,102,0.22);
    border-radius:var(--radius-cards);
    padding:var(--space-48);
    background:var(--color-carbon);
    box-shadow:0 0 0 1px rgba(204,145,102,0.05), 0 0 32px -6px rgba(204,145,102,0.16), inset 0 1px 0 rgba(204,145,102,0.05);
  }
  .mr-stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-32); margin-bottom:32px; }
  .mr-stat-label{ font-family:var(--font-sans); font-size:13px; color:var(--color-fog); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px; }
  .mr-stat-value{ font-family:var(--font-serif); font-weight:500; font-size:var(--text-heading-sm); color:var(--color-paper-white); line-height:1.1; }
  .mr-stat-value--gain{ color:#3ddc84; }
  .mr-stat-sub{ font-family:var(--font-sans); font-size:13px; color:var(--color-fog); margin-top:6px; }
  .mr-stats-note{ font-family:var(--font-sans); font-size:var(--text-body-xs); color:var(--color-fog); margin:0; line-height:1.6; }
  .mr-stats-disclaimer{ font-family:var(--font-sans); font-size:12px; color:var(--color-ash); margin:10px 0 0; line-height:1.6; }

  /* ---------- vs. buy & hold comparison ---------- */
  .mr-compare{ max-width:var(--page-max-width); margin:0 auto; padding:0 32px var(--section-gap); }
  .mr-compare-half-stat{ text-align:center; margin:0 0 24px; }
  .mr-compare-half-stat-val{ display:block; font-family:var(--font-serif); font-weight:500; font-size:40px; color:var(--color-copper); line-height:1.1; }
  .mr-compare-half-stat-name{ display:block; margin-top:6px; font-family:var(--font-sans); font-size:12.5px; color:var(--color-fog); }


  .mr-compare-split{ max-width:1020px; margin:56px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-40); }
  .mr-compare-half-title{ font-family:var(--font-serif); font-weight:500; font-size:22px; line-height:1.35; color:var(--color-paper-white); text-align:center; margin:0 0 22px; }
  .mr-compare-half-cards{ display:flex; flex-direction:column; gap:var(--space-16); }
  .mr-compare-example{ border:1px solid var(--color-graphite); border-radius:var(--radius-cards); padding:var(--space-24); background:var(--color-carbon); text-align:center; }
  .mr-compare-example-name{ display:block; font-family:var(--font-sans); font-size:18px; font-weight:700; color:var(--color-paper-white); margin-bottom:14px; }
  .mr-compare-example-val{ display:block; font-family:var(--font-serif); font-weight:500; font-size:34px; color:var(--color-bone); line-height:1.1; }
  .mr-compare-example-metric{ font-family:var(--font-sans); font-size:12px; color:var(--color-steel); text-transform:uppercase; letter-spacing:0.05em; margin-top:10px; }




  /* ---------- bear-market shutdown callout ---------- */
  /* ---------- position sizing ---------- */

  .mr-survive{ max-width:var(--page-max-width); margin:0 auto; padding:0 32px; }
  .mr-survive-panel{
    max-width:760px; margin:0 auto; text-align:center;
    border:1px solid rgba(204,145,102,0.22); border-radius:var(--radius-cards); padding:var(--space-48);
    background:var(--color-carbon); box-shadow:0 0 0 1px rgba(204,145,102,0.05), 0 0 32px -6px rgba(204,145,102,0.16), inset 0 1px 0 rgba(204,145,102,0.05);
  }
  .mr-survive-label{ font-family:var(--font-sans); font-size:13px; color:var(--color-copper); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:16px; }
  .mr-survive-title{ font-family:var(--font-serif); font-weight:500; font-size:clamp(22px, 2.6vw, 30px); color:var(--color-paper-white); line-height:1.3; margin:0 0 16px; }
  .mr-survive-body{ font-family:var(--font-sans); font-size:var(--text-body-xs); color:var(--color-mist); line-height:1.6; margin:0; }

  /* ---------- bottom waitlist section ---------- */
  .mr-join{ max-width:var(--page-max-width); margin:0 auto; padding:var(--section-gap) 32px; }
  .mr-join-panel{
    max-width:640px; margin:48px auto 0; text-align:center;
    border:1px solid rgba(204,145,102,0.4); border-radius:var(--radius-cards); padding:var(--space-48) var(--space-32);
    background:var(--color-carbon); box-shadow:0 0 0 1px rgba(204,145,102,0.18), 0 0 44px -6px rgba(204,145,102,0.3), inset 0 1px 0 rgba(204,145,102,0.1);
    display:flex; flex-direction:column; align-items:center; gap:var(--space-14);
  }
  .mr-join-panel .wl-form{ max-width:460px; }
  .mr-join-panel .hero-cta-note{ max-width:460px; }

  .mr-hear{ max-width:1164px; margin:0 auto; padding:var(--section-gap) 32px 20px; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-48); align-items:center; }
  .mr-hear-title{ font-family:var(--font-serif); font-weight:500; font-size:clamp(28px, 3.4vw, var(--text-heading-sm)); color:var(--color-paper-white); line-height:1.15; margin:0; }
  .mr-hear-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--color-graphite); }
  .mr-hear-item{ display:flex; gap:var(--space-20); align-items:flex-start; padding:var(--space-24) 0; border-bottom:1px solid var(--color-graphite); }
  .mr-hear-mark{ flex:none; width:8px; height:8px; margin-top:12px; border-radius:var(--radius-full); background:var(--color-copper); box-shadow:0 0 12px rgba(204,145,102,0.6); }
  .mr-hear-item h3{ font-family:var(--font-serif); font-size:clamp(20px, 2.2vw, 26px); font-weight:500; color:var(--color-paper-white); margin:0 0 6px; }
  .mr-hear-item p{ font-family:var(--font-sans); font-size:var(--text-body-xs); color:var(--color-fog); margin:0; line-height:1.55; }

  .mr-how{ max-width:var(--page-max-width); margin:0 auto; padding:var(--section-gap) 32px; }
  .mr-how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-24); margin-top:48px; }
  .mr-how-num{ font-family:var(--font-sans); font-weight:600; color:var(--color-fog); font-size:13px; margin-bottom:14px; text-align:center; }
  .mr-how-grid > div{ container-type:inline-size; display:flex; flex-direction:column; }
  .mr-how-grid > div p{ flex-grow:1; }
  .mr-how h3{ font-family:var(--font-serif); font-size:min(24px, 5.7cqw); font-weight:500; color:var(--color-paper-white); margin:0 0 10px; text-align:center; }
  .mr-how p{ font-family:var(--font-sans); font-size:var(--text-body-xs); color:var(--color-fog); margin:0; line-height:1.55; text-align:center; }

  /* ---------- how-it-works step visuals (illustrative mockups) ---------- */
  .mr-how-visual{
    margin-top:22px; width:100%;
    border:1px solid rgba(204,145,102,0.18);
    border-radius:var(--radius-cards);
    background:var(--color-onyx);
    padding:14px;
    box-shadow:0 0 0 1px rgba(204,145,102,0.04), 0 0 24px -8px rgba(204,145,102,0.14);
  }
  .mr-how-visual svg{ width:100%; height:auto; display:block; }
  .mr-how-visual--photo{ padding:0; overflow:hidden; aspect-ratio:1/1; }
  .mr-how-visual--photo img{ width:100%; height:100%; display:block; object-fit:contain; object-position:center; image-rendering:auto; }
  .mrv-card{ fill:var(--color-carbon); stroke:var(--color-graphite); stroke-width:1; }
  .mrv-sub-faint{ font-family:'Inter',sans-serif; font-size:9.5px; fill:var(--color-smoke); }
  .mrv-tag-pos{ font-family:'Inter',sans-serif; font-size:11px; font-weight:600; fill:var(--state-positive); }
  .mrv-line{ fill:none; stroke:var(--color-copper); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
  .mrv-line-glow{ fill:none; stroke:var(--color-copper); stroke-width:6; stroke-linejoin:round; stroke-linecap:round; opacity:0.16; }
  .mrv-dot{ fill:var(--color-copper); }
  .mrv-dot-glow{ fill:var(--color-copper); opacity:0.22; }

  .mr-faq{ max-width:800px; margin:0 auto; padding:var(--section-gap) 32px; }
  .mr-faq-list{ margin-top:48px; }
  .mr-faq-item{ border-top:1px solid var(--color-graphite); }
  .mr-faq-item.last{ border-bottom:1px solid var(--color-graphite); }
  .mr-faq-q{
    all:unset; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
    width:100%; padding:22px 0; box-sizing:border-box; font-family:inherit;
  }
  .mr-faq-title{ font-family:var(--font-sans); font-size:16px; font-weight:600; color:var(--color-bone); }
  .mr-faq-icon{ color:var(--color-steel); font-size:20px; }
  .mr-faq-a{ margin:0 0 22px; font-family:var(--font-sans); font-size:var(--text-body-xs); color:var(--color-fog); max-width:760px; line-height:1.6; display:none; }
  .mr-faq-item.open .mr-faq-a{ display:block; }

  /* ---------- footer: dense multi-column grid ---------- */
  .mr-footer{ border-top:1px solid var(--color-graphite); margin-top:20px; }
  .mr-footer-inner{
    max-width:var(--page-max-width);
    margin:0 auto;
    padding:64px 32px 44px;
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1.6fr;
    gap:40px;
  }
  .mr-footer-brand strong{ display:block; font-family:var(--font-sans); font-weight:700; font-size:16px; color:var(--color-bone); letter-spacing:0.02em; margin-bottom:6px; }
  .mr-footer-brand span{ font-family:var(--font-sans); font-size:13px; color:var(--color-fog); }
  .mr-footer-heading{ font-family:var(--font-sans); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--color-steel); margin-bottom:14px; }
  .mr-footer-links{ display:flex; flex-direction:column; gap:10px; }
  .mr-footer-links a{ font-family:var(--font-sans); font-size:13.5px; color:var(--color-fog); }
  .mr-footer-links a:hover{ color:var(--color-paper-white); }
  .mr-footer-disclaimer{ font-family:var(--font-sans); font-size:12px; color:var(--color-ash); line-height:1.6; margin:0; }
  .mr-footer-bottom{
    max-width:var(--page-max-width);
    margin:0 auto;
    padding:20px 32px 32px;
    border-top:1px solid var(--color-graphite);
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
  }
  .mr-footer-copy{ font-family:var(--font-sans); font-size:12.5px; color:var(--color-ash); }

  @media (max-width:900px){
    .hero{ grid-template-columns:1fr; padding-top:56px; }
    .hero-left{ text-align:left; }
    .signal-card{ max-width:440px; }
    .mr-footer-inner{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:720px){
    .nav-links{ display:none; }
    .nav-inner{ padding:14px 20px; gap:10px; }
    .btn-ghost{ display:none; }
    .mr-stats-panel{ padding:28px 22px; }
    .mr-stats-grid{ grid-template-columns:1fr; gap:22px; }
    .mr-hear{ grid-template-columns:1fr; gap:var(--space-24); }
    .mr-how-grid{ grid-template-columns:1fr; gap:30px; }
    .mr-compare-split{ grid-template-columns:1fr; gap:40px; }
    .mr-join-panel{ padding:32px 20px; }
    .wl-row{ flex-direction:column; }
    .wl-submit{ width:100%; justify-content:center; }
    .hero{ padding-left:20px; padding-right:20px; gap:40px; }
    .lead{ font-size:var(--text-body-sm); }
    .mr-stats-outer, .mr-hear, .mr-how, .mr-faq, .mr-compare, .mr-join{ padding-left:20px; padding-right:20px; }
    .mr-stats-outer, .mr-hear, .mr-how, .mr-faq, .mr-compare, .mr-join{ padding-top:64px; padding-bottom:64px; }
    .mr-footer-inner{ grid-template-columns:1fr; padding-top:48px; }
  }
  @media (max-width:380px){
    .nav-logo{ font-size:12.5px; }
  }

.mr-compare-disclaimer{ max-width:1100px; margin:32px auto 0; }

.mr-footer-disclaimer + .mr-footer-disclaimer{ margin-top:8px; }
.mr-how-credit{ margin-top:8px; font-family:var(--font-sans); font-size:13px; color:var(--color-steel); text-align:center; }

/* Turnstile bot check (shown only if Cloudflare needs interaction) */
.cf-turnstile{ margin-top:12px; }