/* =====================================================================
   Man Patel — Discretionary Trader
   Editorial "paper" aesthetic, light + dark. Classy, restrained motion.

   Every colour is a token. Text tokens are checked at >= 4.5:1 against
   paper, band and card in both themes. The heatmap gain/loss poles are
   validated colour-blind-safe (dataviz validator) in both themes.
   ===================================================================== */
/* Self-hosted fonts (SIL Open Font License): Fraunces, Inter, IBM Plex Mono, Latin and Latin Extended.
   Served from this site, so pages don't wait on, or report visits to, a third party. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 500;font-display:swap;src:url("/assets/fonts/fraunces-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 500;font-display:swap;src:url("/assets/fonts/fraunces-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 500;font-display:swap;src:url("/assets/fonts/inter-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 500;font-display:swap;src:url("/assets/fonts/inter-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  color-scheme:light;
  --paper:#F4F1E9; --paper2:#EDE8DC; --surface:#FBF9F4;
  --ink:#23201B; --ink-soft:#5F584C; --ink-faint:#6E665A;
  --line:rgba(35,32,27,0.13); --line-strong:rgba(35,32,27,0.24);
  --sage:#3F5648; --gold:#9C7B3F; --gold-text:#7A5E2B;
  --pos:#3F5648; --neg:#94503D;
  --sage-tint:rgba(63,86,72,0.10); --sage-line:rgba(63,86,72,0.35);
  --neg-tint:rgba(148,80,61,0.10); --gold-tint:rgba(156,123,63,0.08);
  --header-bg:rgba(244,241,233,0.86); --card-inset:rgba(255,255,255,0.5);
  --shadow:35,32,27; --grain:.5;
  --chart-fill:rgba(63,86,72,0.10); --spark:#8A8274;
  --gain-rgb:0,138,124; --loss-rgb:216,106,44;   /* #008A7C / #D86A2C */
  --glow-rgb:63,86,72; --glare:rgba(255,255,255,.55);
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --mono:"IBM Plex Mono",monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
/* dark: OS setting, unless the visitor picked light */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#161411; --paper2:#1C1916; --surface:#221F1A;
    --ink:#EEE8DC; --ink-soft:#BDB5A6; --ink-faint:#9C9486;
    --line:rgba(238,232,220,0.11); --line-strong:rgba(238,232,220,0.22);
    --sage:#93B8A0; --gold:#C9A466; --gold-text:#C9A466;
    --pos:#93B8A0; --neg:#E0937D;
    --sage-tint:rgba(147,184,160,0.12); --sage-line:rgba(147,184,160,0.40);
    --neg-tint:rgba(224,147,125,0.12); --gold-tint:rgba(201,164,102,0.08);
    --header-bg:rgba(22,20,17,0.82); --card-inset:rgba(255,255,255,0.03);
    --shadow:0,0,0; --grain:.22;
    --chart-fill:rgba(147,184,160,0.10); --spark:#8F887B;
    --gain-rgb:47,156,138; --loss-rgb:212,108,58;   /* #2F9C8A / #D46C3A */
    --glow-rgb:147,184,160; --glare:rgba(255,255,255,.10);
  }
}
/* dark: chosen with the toggle (wins over the OS setting) */
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#161411; --paper2:#1C1916; --surface:#221F1A;
  --ink:#EEE8DC; --ink-soft:#BDB5A6; --ink-faint:#9C9486;
  --line:rgba(238,232,220,0.11); --line-strong:rgba(238,232,220,0.22);
  --sage:#93B8A0; --gold:#C9A466; --gold-text:#C9A466;
  --pos:#93B8A0; --neg:#E0937D;
  --sage-tint:rgba(147,184,160,0.12); --sage-line:rgba(147,184,160,0.40);
  --neg-tint:rgba(224,147,125,0.12); --gold-tint:rgba(201,164,102,0.08);
  --header-bg:rgba(22,20,17,0.82); --card-inset:rgba(255,255,255,0.03);
  --shadow:0,0,0; --grain:.22;
  --chart-fill:rgba(147,184,160,0.10); --spark:#8F887B;
  --gain-rgb:47,156,138; --loss-rgb:212,108,58;
  --glow-rgb:147,184,160; --glare:rgba(255,255,255,.10);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 0;overflow-x:hidden;transition:background-color .35s var(--ease),color .35s var(--ease)}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-0.01em;margin:0}
a{color:inherit;text-decoration:none}
.tnum{font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--sage);font-weight:400}
.wrap{max-width:1060px;margin:0 auto;padding-left:28px;padding-right:28px}
.muted{color:var(--ink-soft)}
.faint{color:var(--ink-faint)}
:focus-visible{outline:2px solid var(--sage);outline-offset:2px}

/* subtle paper grain — fixed, behind everything */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
main,header,footer{position:relative;z-index:1}

/* scroll progress bar */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--sage),var(--gold));z-index:60;transition:width .08s linear}

header{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
header.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{font-family:var(--serif);font-size:19px;letter-spacing:-0.01em;display:flex;align-items:baseline;gap:9px}
.brand .dot{width:6px;height:6px;border-radius:50%;background:var(--sage);display:inline-block;transform:translateY(-2px)}
.nav-right{display:flex;align-items:center;gap:26px}
.navlinks{display:flex;gap:30px}
.navlinks a{font-size:13.5px;color:var(--ink-soft);position:relative;padding:4px 0;transition:color .2s}
.navlinks a:hover,.navlinks a.active{color:var(--ink)}
.navlinks{position:relative}
.nav-ind{position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--gold);opacity:0;pointer-events:none;transition:transform .55s cubic-bezier(.16,1,.3,1),width .55s cubic-bezier(.16,1,.3,1),opacity .3s}
.nav-actions{display:flex;align-items:center;gap:6px}
.menubtn{display:none;background:none;border:0;cursor:pointer;color:var(--ink);font-size:22px;padding:6px}

/* theme toggle: moon in light (go dark), sun in dark (go light) */
.theme-btn{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;background:transparent;color:var(--ink-soft);cursor:pointer;transition:color .2s,border-color .2s,transform .4s var(--ease)}
.theme-btn:hover{color:var(--ink);border-color:var(--ink)}
.theme-btn:active{transform:rotate(-20deg) scale(.94)}
.theme-btn svg{width:16px;height:16px;display:block}
.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .i-sun{display:block}
  :root:not([data-theme="light"]) .theme-btn .i-moon{display:none}
}

section{padding:90px 0}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:34px}
.sec-head h2{font-size:30px}
.sec-num{font-family:var(--mono);font-size:12px;color:var(--ink-faint);letter-spacing:0.1em}

/* hero: copy on the left, live card on the right (desktop) */
.hero{padding-top:84px;padding-bottom:70px;position:relative}
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:center}
.hero .eyebrow{display:block;margin-bottom:22px}
.hero h1{font-size:clamp(38px,6.2vw,68px);line-height:1.04;font-weight:300;max-width:14ch}
.hero h1 em{font-style:italic;color:var(--sage)}
.hero .lede{font-size:18px;max-width:54ch;margin:26px 0 0;color:var(--ink-soft)}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.btn{font-family:var(--sans);font-size:14px;padding:12px 22px;border-radius:2px;cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:var(--paper);transition:opacity .2s,transform .15s var(--ease),box-shadow .2s,background-color .35s,color .35s;display:inline-flex;align-items:center;gap:8px;position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;top:0;bottom:0;left:-160%;width:75%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-18deg);transition:left .6s var(--ease);pointer-events:none}
.btn:hover::before{left:170%}
.btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 18px rgba(var(--shadow),0.16)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);box-shadow:none}
.btn.ghost:hover{border-color:var(--ink);opacity:1;box-shadow:none}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hstat{padding:20px 0}
.hstat+.hstat{padding-left:26px;border-left:1px solid var(--line)}
.hstat .k{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-faint)}
.hstat .v{font-family:var(--serif);font-size:30px;margin-top:6px;line-height:1}
.disc-micro{font-size:12px;color:var(--ink-faint);margin-top:18px}

/* hero live card (stat tile: label · value · delta · sparkline) */
.hc-wrap{perspective:1000px}
.hero-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:22px 22px 18px;box-shadow:0 1px 0 var(--card-inset) inset,0 18px 40px rgba(var(--shadow),0.07);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s cubic-bezier(.16,1,.3,1),box-shadow .5s var(--ease)}
.hero-card.tilting{transition:transform .14s linear,box-shadow .5s var(--ease);box-shadow:0 1px 0 var(--card-inset) inset,0 30px 60px rgba(var(--shadow),0.13)}
.hero-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(380px circle at var(--gx,50%) var(--gy,0%),var(--glare),transparent 55%);opacity:0;transition:opacity .5s}
.hero-card.tilting::after{opacity:1}
.hc-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}
.hc-ticker{font-family:var(--serif);font-size:18px}
.hc-label{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint)}
.hc-quote{font-family:var(--serif);font-size:46px;line-height:1;margin-top:6px}
.hc-delta{font-size:14px;font-weight:500;margin-top:8px;min-height:21px}
.hc-delta .when{font-family:var(--mono);font-size:11.5px;font-weight:400;color:var(--ink-faint);margin-left:6px}
.hc-spark{display:block;width:100%;height:70px;margin:16px 0 12px;cursor:crosshair;overflow:visible;touch-action:pan-y}
.hc-foot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--ink-faint)}
.hc-foot a{color:var(--sage);border-bottom:1px solid var(--sage-line)}
.hc-foot a:hover{border-color:var(--sage)}
#hcGrad .g0{stop-color:var(--sage);stop-opacity:.22}
#hcGrad .g1{stop-color:var(--sage);stop-opacity:0}
#hcArea{fill:url(#hcGrad)}
#hcLine{fill:none;stroke:var(--sage);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
#hcCross{stroke:var(--ink-faint);stroke-width:1;stroke-dasharray:2 3;opacity:0;transition:opacity .15s}
#hcDot{fill:var(--sage);stroke:var(--surface);stroke-width:2;transition:opacity .3s}

.tr-card{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:30px;box-shadow:0 1px 0 var(--card-inset) inset,0 1px 2px rgba(var(--shadow),.04),0 18px 40px -22px rgba(var(--shadow),.16)}
.tr-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:14px;margin-bottom:22px}
.tr-strat{font-size:13px;color:var(--ink-soft);margin-top:4px}
.tr-strat a{color:var(--sage);border-bottom:1px solid var(--sage-line);transition:border-color .2s}
.tr-strat a:hover{border-color:var(--sage)}
.live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--sage);letter-spacing:0.08em}
.live .pulse{width:7px;height:7px;border-radius:50%;background:var(--sage);position:relative;flex:none}
.live .pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--sage);opacity:.6;animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(.7);opacity:.7}70%,100%{transform:scale(1.9);opacity:0}}
.badge{font-family:var(--mono);font-size:11px;color:var(--ink-faint);border:1px solid var(--line);border-radius:2px;padding:4px 9px}
.controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:20px}
.seg{display:flex;gap:24px}
.seg button{border:0;background:none;cursor:pointer;font-family:var(--serif);font-size:16px;color:var(--ink-faint);padding:4px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.seg button.on{color:var(--ink);border-bottom-color:var(--gold)}
.seg button:hover{color:var(--ink-soft)}
.seg.single button{cursor:default;border-bottom-color:transparent;color:var(--ink);font-size:18px}
.seg button.soon{color:var(--ink-faint);position:relative}
.seg button.soon::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);display:inline-block;vertical-align:middle;margin-right:6px;opacity:.7}
.seg button.soon::after{content:attr(data-soon);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;padding:5px 9px;border-radius:3px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease);z-index:6}
.seg button.soon:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}

.soonview{min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;border:1px dashed var(--line-strong);border-radius:4px;padding:40px 24px;margin-bottom:4px;background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(var(--shadow),0.015) 10px,rgba(var(--shadow),0.015) 20px)}
.soonview .soon-key{font-family:var(--mono);font-size:12px;letter-spacing:0.22em;color:var(--gold-text)}
.soonview .soon-title{font-family:var(--serif);font-size:30px;color:var(--ink)}
.soonview .soon-text{font-size:14px;color:var(--ink-soft);max-width:46ch}
.tf{display:flex;gap:6px}
.tf button{border:0;background:none;cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--ink-faint);padding:5px 10px;border-radius:2px;transition:color .2s,background .2s}
.tf button.on{color:var(--sage);background:var(--sage-tint)}
.bignum{display:flex;align-items:baseline;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.bignum .val{font-family:var(--serif);font-size:38px;line-height:1}
.bignum .ret{font-size:15px;font-weight:500}
.bignum .ctx{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint)}
.tr-meta{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 18px;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
.tr-meta span{display:inline-flex;gap:6px;align-items:baseline}
.tr-meta .mk{color:var(--ink-faint);text-transform:uppercase;letter-spacing:0.08em;font-size:10.5px}
.tr-meta .mv{color:var(--ink);font-size:12.5px}
/* equity chart: draw-in, morphing ranges, scrub with axis readouts, drag to measure */
.chartbox{position:relative;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.chartbox svg{width:100%;height:240px;display:block;cursor:crosshair;overflow:visible;touch-action:pan-y;outline:none}
.chartbox svg:focus-visible{outline:2px solid var(--sage-line);outline-offset:6px;border-radius:2px}
#grid line{stroke:var(--line);stroke-width:1}
#grid,.ylab,.xaxis{transition:opacity .3s var(--ease)}
#grid.swap,.ylab.swap,.xaxis.swap{opacity:0}
#eqGrad .g0{stop-color:var(--sage);stop-opacity:.20}
#eqGrad .g1{stop-color:var(--sage);stop-opacity:0}
#area{fill:url(#eqGrad)}
#line{fill:none;stroke:var(--sage);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
#ghost{fill:none;stroke:var(--ink-faint);stroke-width:1.5;stroke-linejoin:round;opacity:.32}
#cross,#crossH{stroke:var(--ink-faint);stroke-width:1;stroke-dasharray:2 3;opacity:0;transition:opacity .15s}
#dot{fill:var(--sage);stroke:var(--surface);stroke-width:2;opacity:0;transition:opacity .15s}
#endpt{fill:var(--sage);stroke:var(--surface);stroke-width:2;transition:opacity .5s}
#endring{fill:none;stroke:var(--sage);stroke-width:1.4}
.chartbox svg:not(.done) #endpt,.chartbox svg:not(.done) #endring{opacity:0}
#head{fill:var(--sage);opacity:0}
#halo{fill:var(--sage);fill-opacity:.18;opacity:0}
.hband{fill:rgba(var(--glow-rgb),.08);opacity:0;transition:opacity .2s}
.mband{opacity:0;transition:opacity .15s}
.mband.up{fill:rgba(var(--gain-rgb),.10)}
.mband.down{fill:rgba(var(--loss-rgb),.10)}
#mA,#mB{fill:var(--surface);stroke:var(--ink);stroke-width:1.8;opacity:0}
#mLink{stroke:var(--ink-soft);stroke-width:1;stroke-dasharray:3 3;opacity:0}
.ylab span{position:absolute;left:0;transform:translateY(-50%);text-align:right;font-family:var(--mono);font-size:10.5px;line-height:1;color:var(--ink-faint);pointer-events:none}
.xaxis{position:relative;height:16px;margin-top:6px}
.xaxis span{position:absolute;top:0;transform:translateX(-50%);font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);white-space:nowrap}
.ypill,.xpill{position:absolute;pointer-events:none;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:10.5px;line-height:1;padding:4px 6px;border-radius:2px;white-space:nowrap;opacity:0;transition:opacity .15s;z-index:4;font-variant-numeric:tabular-nums}
.ypill{left:0;top:0}
.xpill{left:0;transform:translateX(-50%)}
.axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin-top:6px}
.tip,.mtip{position:absolute;left:0;top:0;pointer-events:none;background:var(--surface);border:1px solid var(--line-strong);border-radius:4px;font-family:var(--mono);font-size:11px;line-height:1.3;color:var(--ink);white-space:nowrap;box-shadow:0 10px 28px rgba(var(--shadow),.13);opacity:0;z-index:5;font-variant-numeric:tabular-nums}
.tip{display:grid;grid-template-columns:auto auto;gap:3px 14px;padding:8px 10px;transition:opacity .15s,transform .09s linear}
.tip .tk{color:var(--ink-faint)}
.tip span:nth-child(even){text-align:right}
.mtip{display:flex;gap:9px;align-items:baseline;padding:6px 10px;color:var(--ink-soft);transition:opacity .15s}
.mtip b{font-family:var(--sans);font-size:13.5px;font-weight:500}
.chart-hint{text-align:right;font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);margin-top:4px;min-height:15px;transition:opacity .6s}
.chart-hint.gone{opacity:0}
.tf .tf-chip{display:inline-flex;align-items:center;gap:6px;color:var(--gold-text);background:var(--gold-tint);box-shadow:inset 0 0 0 1px rgba(156,123,63,.35);animation:chipIn .45s cubic-bezier(.16,1,.3,1)}
.tf .tf-chip span{font-size:14px;line-height:1}
@keyframes chipIn{from{opacity:0;transform:translateX(-6px) scale(.92)}to{opacity:1;transform:none}}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.stat .k{font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint)}
.stat .v{font-family:var(--serif);font-size:22px;margin-top:5px;line-height:1}
.pos{color:var(--pos)}.neg{color:var(--neg)}
.tr-disc{font-size:12px;color:var(--ink-faint);margin-top:22px;line-height:1.55}

/* monthly returns heatmap — diverging: teal gain / orange loss, neutral = surface */
.monthly{margin-top:28px;border-top:1px solid var(--line);padding-top:22px}
.mo-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.mo-title{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint)}
.mo-row{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:center}
.mo-row+.mo-row{margin-top:10px}
.mo-y{font-family:var(--serif);font-size:18px;display:block;line-height:1.1}
.mo-tot{font-size:12.5px;font-weight:500}
.mo-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px}
.mo-cell{border-radius:3px;padding:8px 4px 7px;text-align:center;background:var(--paper2);transition:box-shadow .15s}
.mo-cell.up{background:rgba(var(--gain-rgb),var(--a))}
.mo-cell.down{background:rgba(var(--loss-rgb),var(--a))}
.mo-cell.empty{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.mo-cell:not(.empty):hover,.mo-cell:focus-visible{box-shadow:inset 0 0 0 2px var(--ink);outline:none}
.mo-m{display:block;font-family:var(--mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-soft)}
.mo-v{display:block;font-size:12px;font-weight:500;color:var(--ink);margin-top:2px;font-variant-numeric:tabular-nums}
.mo-cell.empty .mo-v{color:var(--ink-faint);font-weight:400}
.monthly{position:relative}
.mo-cell{transition:box-shadow .15s,transform .3s cubic-bezier(.16,1,.3,1),opacity .25s}
.monthly .mo-cell{opacity:0}
.monthly.in .mo-cell{animation:moIn .75s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k,0) * 45ms + 120ms)}
.monthly.in.settled .mo-cell{animation:none;opacity:1}
@keyframes moIn{from{opacity:0;transform:translateY(10px) scale(.8)}to{opacity:1;transform:none}}
@media (hover:hover){
  .monthly.settled .mo-cell:not(.empty):hover{transform:translateY(-3px)}
  .monthly.settled .mo-grid:has(.mo-cell:not(.empty):hover) .mo-cell:not(:hover){opacity:.5}
}
.monthly.zoomable .mo-cell:not(.empty){cursor:pointer}
.mo-cell.sel{box-shadow:inset 0 0 0 2px var(--gold)}
.mo-pop{position:absolute;left:0;top:0;z-index:7;width:236px;background:var(--surface);border:1px solid var(--line-strong);border-radius:6px;padding:12px 14px 10px;box-shadow:0 18px 44px rgba(var(--shadow),.16);pointer-events:none;opacity:0;transform:translateY(6px) scale(.97);transform-origin:50% 100%;transition:opacity .18s,transform .3s cubic-bezier(.16,1,.3,1)}
.mo-pop.show{opacity:1;transform:none}
.mp-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.mp-h b{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none}
.mp-s{display:block;width:100%;height:46px;margin:8px 0 6px;overflow:visible}
.mp-s line{stroke:var(--line-strong);stroke-dasharray:2 3}
.mp-s path{fill:none;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.mp-s path.up{stroke:rgb(var(--gain-rgb))}.mp-s path.down{stroke:rgb(var(--loss-rgb))}
.mp-r{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink-soft);padding:3px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.mp-r span:last-child{color:var(--ink)}

/* trading activity + asset mix, below the track card */
.tr-extra{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:24px;margin-top:24px}
.xcard{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:24px 26px;box-shadow:0 1px 0 var(--card-inset) inset,0 1px 2px rgba(var(--shadow),.04),0 18px 40px -22px rgba(var(--shadow),.16)}
.x-title{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:18px}
.x-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.x-stat .k{font-size:12.5px;color:var(--ink-soft)}
.x-stat .v{font-family:var(--serif);font-size:26px;line-height:1.1;margin-top:4px}
.x-note{margin:18px 0 0;font-size:12px;color:var(--ink-faint);line-height:1.5}
.x-sub{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.mix{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.mix-row{display:grid;grid-template-columns:minmax(96px,9.5em) minmax(0,1fr) 3.4em;gap:12px;align-items:center}
.mix-name{font-size:13.5px;color:var(--ink);line-height:1.25}
.mix-name small{display:block;font-size:11px;color:var(--ink-faint)}
.mix-track{height:8px;display:block}
.mix-bar{display:block;height:8px;background:var(--sage);border-radius:0 4px 4px 0;min-width:2px;transform-origin:left;transition:transform 1.2s cubic-bezier(.16,1,.3,1),opacity .25s;transition-delay:calc(var(--i,0) * 90ms + 150ms)}
.mix-row{transition:opacity .25s}
.mix:hover .mix-row:not(:hover){opacity:.42}
.mix-row.other .mix-bar{background:var(--ink-faint)}
.mix-val{font-size:12.5px;color:var(--ink-soft);text-align:right;font-variant-numeric:tabular-nums}
.tr-extra.reveal:not(.in) .mix-bar{transform:scaleX(0)}

/* Darwinex's own capital in KBAD — third-party endorsement, under the hero stats */
.endorse{margin:24px 0 0;padding:14px 18px;border-left:2px solid var(--gold);background:var(--gold-tint);border-radius:0 3px 3px 0;font-size:15px;line-height:1.55;color:var(--ink-soft)}
.endorse strong{color:var(--ink);font-weight:500}
.endorse a{color:var(--sage);border-bottom:1px solid var(--sage-line);white-space:nowrap;transition:border-color .2s}
.endorse a:hover{border-color:var(--sage)}

/* drawdowns: underwater curve (single series, loss hue) + deepest periods */
.tr-extra .dd-card{grid-column:1/-1}
.dd-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.dd-head .x-title{margin-bottom:0}
.dd-read{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.dd-plot{position:relative;padding-left:46px}
.dd-yax{position:absolute;left:0;top:0;bottom:0;width:40px;display:flex;flex-direction:column;justify-content:space-between;text-align:right;font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);line-height:1;padding:4px 0 2px}
.dd-svg{display:block;width:100%;height:150px;cursor:crosshair;overflow:visible;touch-action:pan-y}
.dd-axis{padding-left:46px}
#ddGrad .g0{stop-color:rgb(var(--loss-rgb));stop-opacity:.04}
#ddGrad .g1{stop-color:rgb(var(--loss-rgb));stop-opacity:.34}
#ddArea{fill:url(#ddGrad)}
#ddBand{fill:rgba(var(--loss-rgb),.08);opacity:0;transition:opacity .2s}
.dd-mark{fill:var(--surface);stroke:rgb(var(--loss-rgb));stroke-width:1.6;opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center;transition:opacity .4s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.dd-svg.done .dd-mark{opacity:1;transform:none;transition-delay:calc(var(--k,0) * 90ms)}
.dd-svg.done .dd-mark.on{transform:scale(1.6);fill:rgb(var(--loss-rgb));transition-delay:0s}
.dd-table tbody tr{cursor:default;outline:none}
.dd-table tbody td{transition:background-color .2s,color .2s}
.dd-table tbody tr.hl td{background:rgba(var(--loss-rgb),.07);color:var(--ink)}
.dd-table tbody tr:focus-visible td{box-shadow:inset 0 -2px 0 rgb(var(--loss-rgb))}
#ddLine{fill:none;stroke:rgb(var(--loss-rgb));stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
#ddZero{stroke:var(--line-strong);stroke-width:1}
#ddCross{stroke:var(--line-strong);stroke-width:1;opacity:0}
#ddDot{fill:rgb(var(--loss-rgb));stroke:var(--surface);stroke-width:2;opacity:0}
.dd-body{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:28px;margin-top:22px;align-items:start}
.dd-stats{display:grid;gap:18px}
.dd-table{width:100%;border-collapse:collapse;font-size:13.5px}
.dd-table th{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);text-align:left;padding:0 12px 8px 0;border-bottom:1px solid var(--line)}
.dd-table td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.dd-table td:first-child{color:var(--neg);font-weight:500}
.dd-table .dd-num{text-align:right;padding-right:0}

.approach{background:var(--paper2)}
.appr-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:start}
.appr-lede{font-family:var(--serif);font-size:23px;font-weight:300;line-height:1.45}
.appr-body p{color:var(--ink-soft);margin:0 0 16px}
.principles{margin-top:14px;border-top:1px solid var(--line)}
.principle{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);transition:padding-left .25s var(--ease)}
.principle:hover{padding-left:6px}
.principle .pn{font-family:var(--mono);font-size:12px;color:var(--sage);padding-top:3px;flex:none;width:22px}
.principle h3{font-size:17px;margin-bottom:4px}
.principle p{margin:0;font-size:14px;color:var(--ink-soft)}
.vision{position:relative;overflow:hidden;margin-top:24px;padding:14px 16px;border-left:2px solid var(--gold);background:var(--gold-tint);border-radius:0 3px 3px 0}
.vision::after{content:"";position:absolute;left:0;bottom:0;width:38%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:shimmer 3.6s ease-in-out infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(270%)}}
.vision .vision-k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-text);margin-bottom:6px}
.vision p{margin:0;font-size:14px;color:var(--ink-soft)}

.risk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.risk{padding:26px;border:1px solid var(--line);border-radius:4px;background:var(--surface);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.risk:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(var(--shadow),0.08);border-color:var(--line-strong)}
.risk .ic{font-family:var(--mono);font-size:13px;color:var(--sage);letter-spacing:0.1em}
.risk h3{font-size:19px;margin:14px 0 8px}
.risk p{margin:0;font-size:14px;color:var(--ink-soft)}

.notes-filter{display:flex;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.notes-filter button{border:1px solid var(--line);background:none;cursor:pointer;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);padding:6px 13px;border-radius:2px;letter-spacing:0.04em;transition:all .2s}
.notes-filter button.on{border-color:var(--ink);color:var(--ink);background:var(--surface)}
.note{display:flex;align-items:baseline;gap:20px;padding:18px 0;border-top:1px solid var(--line);transition:padding-left .2s var(--ease)}
.note:last-child{border-bottom:1px solid var(--line)}
.note:hover{padding-left:8px}
.note .nn{font-family:var(--mono);font-size:12px;color:var(--ink-faint);width:36px;flex:none}
.note .nd{font-family:var(--mono);font-size:12px;color:var(--ink-faint);width:64px;flex:none}
.note .nt{font-size:16px}
.note .ntag{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.1em;color:var(--sage);margin-left:auto;flex:none}
/* FAQ: native <details> accordion, hairline rows */
.faq{border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:20px 0;font-family:var(--serif);font-size:19px;color:var(--ink);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:var(--mono);font-size:18px;line-height:1;color:var(--ink-faint);transition:transform .3s var(--ease),color .2s}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--sage)}
.faq summary:hover{color:var(--sage)}
.faq .faq-a{padding:0 0 22px;max-width:68ch;overflow:hidden}
.faq .faq-a p{margin:0;font-size:15.5px;color:var(--ink-soft)}
.faq .faq-a a{color:var(--sage);border-bottom:1px solid var(--sage-line);white-space:nowrap}
.faq .faq-a a:hover{border-color:var(--sage)}
@media(max-width:640px){.faq summary{font-size:17px;padding:17px 0}.faq .faq-a p{font-size:15px}}
.notes-empty{margin:0;padding:20px 0;font-size:15px;color:var(--ink-soft);border-top:1px solid var(--line)}

.subscribe{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:26px 0 0;padding:24px 26px;border:1px solid var(--line);border-radius:4px;background:var(--surface)}
.subscribe .sub-h{font-family:var(--serif);font-size:20px;margin-bottom:3px}
.subscribe .sub-p{font-size:13.5px;color:var(--ink-soft);max-width:42ch}
.sub-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sub-form input[type=email]{font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);border-radius:2px;padding:11px 13px;min-width:230px;transition:border-color .2s,box-shadow .2s}
.sub-form input[type=email]:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-tint)}
.sub-form input.invalid{border-color:var(--neg);box-shadow:0 0 0 3px var(--neg-tint)}
.sub-wrap{flex:1;min-width:260px}
.subscribe .form-status:empty{display:none}

/* post modal + comments */
.note-link{cursor:pointer}
.note-link .nt{transition:color .2s}
.note-link:hover .nt{color:var(--sage)}
.note-link::after{content:"\2192";font-family:var(--mono);font-size:13px;color:var(--sage);flex:none;opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .4s cubic-bezier(.16,1,.3,1)}
.note-link:hover::after{opacity:1;transform:none}
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.modal-backdrop{position:fixed;inset:0;background:rgba(var(--shadow),.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.modal-card{position:relative;z-index:1;background:var(--paper);border:1px solid var(--line);border-radius:6px;max-width:680px;width:100%;padding:42px 44px;box-shadow:0 30px 80px rgba(var(--shadow),.25);animation:modalIn .55s cubic-bezier(.16,1,.3,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(22px) scale(.98);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.modal-backdrop{animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-x{position:absolute;top:12px;right:16px;background:none;border:0;font-size:26px;line-height:1;color:var(--ink-faint);cursor:pointer;padding:4px 8px}
.modal-x:hover{color:var(--ink)}
.pm-meta{display:flex;gap:14px;font-family:var(--mono);font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.pm-meta span:last-child{color:var(--sage)}
.modal-card h2{font-family:var(--serif);font-size:30px;line-height:1.18;margin-bottom:22px}
.pm-body{font-size:16px;line-height:1.75;color:var(--ink)}
.pm-body p{margin:0 0 16px}
.pm-body h3{font-family:var(--serif);font-size:20px;margin:26px 0 10px}
.pm-body strong{font-weight:600}
.pm-comments{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.pm-ch{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:400;margin-bottom:16px}
.pm-cnote{font-size:13px}
@media(max-width:640px){.modal-card{padding:34px 24px}.modal{padding:0}.modal-card{border-radius:0;min-height:100%}}

.enq{background:var(--paper2)}
.enq-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.enq h2{font-size:30px;margin-bottom:14px}
.enq p{color:var(--ink-soft);max-width:46ch}
.enq p a{color:var(--sage);border-bottom:1px solid var(--sage-line);transition:border-color .2s}
.enq p a:hover{border-color:var(--sage)}
.enq .note-box{margin-top:18px;font-family:var(--mono);font-size:12px;color:var(--sage);border-left:2px solid var(--sage);padding-left:14px}
.form label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 6px}
.form .field{margin-bottom:16px}
.form input,.form textarea{width:100%;font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:2px;padding:11px 13px;transition:border-color .2s,box-shadow .2s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-tint)}
.form input.invalid,.form textarea.invalid{border-color:var(--neg);box-shadow:0 0 0 3px var(--neg-tint)}
.form textarea{resize:vertical;min-height:96px}
.form-legal{margin:12px 0 0;font-size:12px;color:var(--ink-faint)}
.form-legal a,.sub-p a,.copy a,.legal a{color:var(--sage);border-bottom:1px solid var(--sage-line);transition:border-color .2s}
.form-legal a:hover,.sub-p a:hover,.copy a:hover,.legal a:hover{border-color:var(--sage)}
/* mandatory CFD risk warning: set apart from the general disclosure */
.cfd-note{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-soft);border-left:2px solid var(--gold);padding-left:14px;max-width:46ch}
.disclosure.cfd-warn{color:var(--ink-soft);border-left:2px solid var(--gold);padding-left:12px;margin-bottom:14px}

/* legal pages (privacy, terms) */
.legal{max-width:720px;margin:0 auto;padding:40px 28px 80px}
.legal-top{display:flex;justify-content:space-between;align-items:center;height:66px;max-width:720px;margin:0 auto;padding:0 28px}
.legal-top a{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
.legal-top a.brand{font-family:var(--serif);font-size:19px;color:var(--ink)}
.legal h1{font-size:clamp(32px,5vw,44px);font-weight:300;line-height:1.1;margin-bottom:8px}
.legal .updated{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);margin:0 0 34px}
.legal h2{font-size:21px;margin:38px 0 10px}
.legal p,.legal li{color:var(--ink-soft);font-size:15.5px}
.legal ul{padding-left:20px;margin:0 0 16px}
.legal li{margin-bottom:6px}
.legal strong{color:var(--ink);font-weight:500}
.legal .lead{font-size:17px;color:var(--ink)}
.legal .warn{border-left:2px solid var(--gold);padding:2px 0 2px 16px;color:var(--ink)}
@media(max-width:640px){.legal,.legal-top{padding-left:20px;padding-right:20px}.legal p,.legal li{font-size:15px}}
::placeholder{color:var(--ink-faint);opacity:1}
.hp{position:absolute!important;left:-9999px!important;top:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.form-status{font-family:var(--mono);font-size:12px;margin-top:14px;min-height:18px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.form-status.show{opacity:1;transform:none}
.form-status.ok{color:var(--sage)}
.form-status.err{color:var(--neg)}
.spinner{width:13px;height:13px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

footer{border-top:1px solid var(--line);padding:54px 0 60px}
.foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:36px}
.foot-brand{font-family:var(--serif);font-size:18px}
.foot-links{display:flex;gap:22px;font-size:13px;color:var(--ink-soft);flex-wrap:wrap}
.foot-links a:hover{color:var(--ink)}
.disclosure{font-size:12.5px;color:var(--ink-faint);line-height:1.65;max-width:78ch}
.copy{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);margin-top:22px}

/* back to top */
.totop{position:fixed;right:24px;bottom:24px;z-index:55;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:16px;opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;transition:opacity .3s,transform .3s var(--ease),box-shadow .2s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{box-shadow:0 8px 22px rgba(var(--shadow),.14)}

/* reveal-on-scroll with optional stagger — fade up + sharpen from soft blur */
.reveal{opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:none}
.stagger>*{opacity:0;transform:translateY(16px);filter:blur(5px);transition:opacity .65s var(--ease),transform .65s var(--ease),filter .65s var(--ease)}
.stagger.in>*{opacity:1;transform:none;filter:none}

/* cinematic hero entrance — cascade on load */
.hero .eyebrow{transition-delay:.05s}
.hero h1{transition-delay:.14s}
.hero .lede{transition-delay:.26s}
.hero .hero-cta{transition-delay:.38s}
.hero .hc-wrap{transition-delay:.3s}
.hero .hero-stats{transition-delay:.48s}
.hero .endorse{transition-delay:.52s}
.hero .disc-micro{transition-delay:.58s}

/* live pulse marking the latest point on the equity curve */
#endring{fill:none;transform-box:fill-box;transform-origin:center;animation:endpulse 2.6s ease-out infinite}
@keyframes endpulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3.2);opacity:0}}

/* ===================== motion layer (see motion.js) ===================== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* odometer: the transparent copy sets the layout; digits roll on top of it */
.odo{position:relative;display:inline-block;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-kerning:none}
.odo-g{color:transparent}
.odo-o{position:absolute;left:0;top:-.2em;height:1.4em;display:flex;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
.odo-c,.odo-d{display:block;height:1.4em;line-height:1.4em}
.odo-d{display:flex;justify-content:center;transition:width var(--odo-dur,1.1s) cubic-bezier(.16,1,.3,1)}
.odo-probe{position:absolute;left:0;top:0;visibility:hidden;white-space:nowrap}
.odo-probe span{display:inline-block}
.odo-s{display:flex;flex-direction:column;transition:transform var(--odo-dur,1.1s) cubic-bezier(.16,1,.3,1)}
.odo-s>span{display:block;height:1.4em;line-height:1.4em;text-align:center}
@media (forced-colors:active){.odo-g{color:inherit}.odo-o{display:none}}

/* hero background: guilloché line field, faded into the paper */
.hero-bg{position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;overflow:hidden;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 55%,transparent 96%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 55%,transparent 96%)}
.hero-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block;will-change:transform}
.hero>*:not(.hero-bg){position:relative;z-index:1}

/* hero headline: lines rise out of a mask, then a gold stroke underlines it */
.reveal.lines{opacity:1;transform:none;filter:none}
.hero-h .ln{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.hero-h .li{display:inline-block;transform:translate3d(0,112%,0) rotate(2.5deg);transform-origin:0 100%;transition:transform 1.25s cubic-bezier(.16,1,.3,1)}
.hero-h .ln:nth-child(1) .li{transition-delay:.1s}
.hero-h .ln:nth-child(2) .li{transition-delay:.24s}
.hero-h.in .li{transform:none}
.hero-h em{position:relative;display:inline-block}
.scribble{position:absolute;left:-1%;bottom:-.1em;width:102%;height:.2em;overflow:visible}
.scribble path{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1) 1.15s}
.hero-h.in .scribble path{stroke-dashoffset:0}

/* section headings: words rise out of a mask; a hairline runs out to the edge */
.sec-head.reveal{filter:none;transform:none}
.sec-head .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.sec-head .wi{display:inline-block;transform:translate3d(0,108%,0);transition:transform 1.05s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 80ms + 60ms)}
.sec-head.in .wi{transform:none}
.sec-head::after{content:"";flex:1;align-self:center;height:1px;margin-left:12px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.5s cubic-bezier(.16,1,.3,1) .25s}
.sec-head.in::after{transform:none}

/* approach lede: words light up as it scrolls through the viewport */
.scrub .sw{opacity:clamp(.24, calc((var(--p,0) * (var(--n,1) + 4) - var(--i,0)) / 4), 1);transition:opacity .25s linear}

/* spotlight: a soft glow follows the pointer across a card and lights its border */
.spot{position:relative;isolation:isolate}
.spot::before,.spot::after{content:"";position:absolute;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s var(--ease)}
.spot::before{inset:0;z-index:-1;background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(var(--glow-rgb),.07),transparent 70%)}
.spot::after{inset:-1px;padding:1px;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(var(--glow-rgb),.55),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.spot:hover::before,.spot:hover::after{opacity:1}

/* magnetic buttons settle back with a soft spring */
[data-magnetic]{transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .2s,box-shadow .2s,background-color .35s,color .35s,border-color .2s}

/* the two kinds of trade, drawn as schematics */
.setups{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:4px 0 20px}
.setup{margin:0;border:1px solid var(--line);border-radius:4px;background:var(--surface);padding:14px 14px 11px}
.setup svg{display:block;width:100%;height:auto;aspect-ratio:220/80;overflow:visible}
.setup figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-top:9px}
.setup .s-path{fill:none;stroke:var(--sage);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.setup .s-guide{fill:none;stroke:var(--ink-faint);stroke-width:1;stroke-dasharray:3 4;opacity:0;vector-effect:non-scaling-stroke}
.setup .s-band{fill:var(--sage-tint);opacity:0}
.setup .s-dot{fill:var(--gold);opacity:0;transform-box:fill-box;transform-origin:center}
.setups.in .s-path{animation:drawPath 1.9s cubic-bezier(.65,0,.35,1) .2s forwards}
.setups.in .s-guide{animation:fadeIn .7s 1.1s forwards}
.setups.in .s-band{animation:fadeIn .9s .7s forwards}
.setups.in .s-dot{animation:dotIn .5s cubic-bezier(.34,1.56,.64,1) 1.7s forwards,dotPulse 2.6s ease-out 2.4s infinite}
.setups.in .setup:nth-child(2) .s-path{animation-delay:.45s}
@keyframes drawPath{to{stroke-dashoffset:0}}
@keyframes dotIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
@keyframes dotPulse{0%{opacity:1;transform:none}40%{opacity:.55;transform:scale(1.5)}100%{opacity:1;transform:none}}

/* correlation on a -1 … +1 scale */
.corr-scale{margin-top:18px}
.cs-track{position:relative;height:4px;border-radius:2px;background:var(--line)}
.cs-zero{position:absolute;left:50%;top:-4px;width:1px;height:12px;background:var(--line-strong)}
.cs-fill{position:absolute;top:0;bottom:0;left:50%;width:0;border-radius:2px;background:var(--sage-line);transition:left 1.4s cubic-bezier(.16,1,.3,1) .3s,width 1.4s cubic-bezier(.16,1,.3,1) .3s}
.cs-mark{position:absolute;top:50%;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--sage-line);transition:left 1.4s cubic-bezier(.16,1,.3,1) .3s}
.tr-extra.in .cs-fill{left:var(--fl,50%);width:var(--fw,0)}
.tr-extra.in .cs-mark{left:var(--c,50%)}
.cs-lab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);margin-top:9px}

/* risk cards: a rule draws under each number */
.risk .ic::after{content:"";display:block;height:1px;margin-top:14px;background:var(--sage-line);transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.risk-grid.in .risk .ic::after{transform:none}
.risk-grid.in .risk:nth-child(2) .ic::after{transition-delay:.12s}
.risk-grid.in .risk:nth-child(3) .ic::after{transition-delay:.24s}

/* theme switch: the new theme spreads from the button (View Transitions) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
.vt *,.vt *::before,.vt *::after,.vt body{transition:none!important}

@media(max-width:960px){
  .hero-top{grid-template-columns:1fr}
  .hc-wrap{display:none}
}
@media(max-width:860px){
  .appr-grid,.enq-grid{grid-template-columns:1fr;gap:34px}
  .risk-grid{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr 1fr}
  .hstat:nth-child(3){border-left:0;padding-left:0}
  .statgrid{grid-template-columns:1fr 1fr;gap:20px}
  .tr-extra{grid-template-columns:1fr}
  /* monthly: two rows of six, year on its own line ("+10.64%" needs ~54px; twelve across can't give it below ~900px) */
  .mo-row{grid-template-columns:1fr;gap:8px}
  .mo-year{display:flex;align-items:baseline;gap:10px}
  .mo-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media(max-width:640px){
  .wrap{padding-left:20px;padding-right:20px}
  .nav-right{gap:0}
  .navlinks{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 20px 16px}
  .navlinks.open{display:flex}
  .navlinks a{padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
  .navlinks a::after{display:none}
  .menubtn{display:block}
  section{padding:58px 0}
  .sec-head{margin-bottom:26px}
  .sec-head h2{font-size:25px}
  .hero{padding-top:46px;padding-bottom:44px}
  .hero .lede{font-size:16px}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1 1 auto;white-space:nowrap;justify-content:center;text-align:center;padding:13px 14px}
  .hero-stats{margin-top:40px}
  .hstat{padding:16px 0}
  .hstat+.hstat{padding-left:18px}
  .hstat:nth-child(3){padding-left:0} /* starts the second row */
  .hstat .v{font-size:25px}
  /* track card */
  .tr-card{padding:18px 16px}
  .tr-top{gap:10px}
  .controls{gap:12px}
  .seg{gap:20px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;padding-bottom:3px;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex:0 0 auto;padding:7px 0;font-size:15px}
  .tf{width:100%;justify-content:space-between;gap:4px}
  .tf button{padding:8px 12px;font-size:12.5px}
  .bignum .val{font-size:28px}
  .chartbox svg{height:200px}
  .ylab span,.xaxis span{font-size:10px}
  .chart-hint{text-align:left}
  .mo-pop{display:none}
  .setups{gap:10px}
  .setup{padding:12px 12px 9px}
  .nav-ind{display:none}
  .tr-meta{gap:14px}
  .statgrid{gap:18px}
  .stat .v{font-size:20px}
  .mo-v{font-size:11.5px}
  /* activity + mix */
  .xcard{padding:20px 18px}
  .x-stat .v{font-size:22px}
  .mix-row{grid-template-columns:minmax(84px,7.5em) minmax(0,1fr) 3.2em;gap:10px}
  .dd-body{grid-template-columns:1fr;gap:18px}
  .dd-stats{grid-template-columns:1fr 1fr}
  .dd-low{display:none}
  .dd-svg{height:120px}
  .endorse{font-size:14px;padding:12px 14px}
  /* approach / risk */
  .appr-lede{font-size:20px}
  /* subscribe stacks */
  .subscribe{flex-direction:column;align-items:stretch;gap:16px;padding:20px}
  .sub-form{width:100%;gap:10px}
  .sub-form input[type=email]{flex:1 1 auto;min-width:0}
  .sub-form .btn{flex:0 0 auto;padding:12px 18px}
  /* post modal */
  .modal-card h2{font-size:24px}
  .pm-body{font-size:15.5px}
}
@media(max-width:400px){
  .hero h1{font-size:34px}
  .seg{gap:16px}
  .seg button{font-size:14px}
  .tf button{padding:7px 8px}
  .sub-form{flex-direction:column;align-items:stretch}
  .sub-form .btn{width:100%}
  .x-stats{grid-template-columns:1fr 1fr}
  .mo-grid{grid-template-columns:repeat(4,minmax(0,1fr))} /* "+10.64%" needs ~46px; 6 columns can't give it on small phones */
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  .reveal,.stagger>*{opacity:1;transform:none;filter:none;transition:none}
  .tr-extra.reveal:not(.in) .mix-bar{transform:none}
  .btn::before{display:none}
  body{transition:none}
  html{scroll-behavior:auto}
  .progress{display:none}
  .monthly .mo-cell{opacity:1;transform:none}
  .hero-h .li,.sec-head .wi{transform:none;transition:none}
  .sec-head::after,.risk .ic::after{transform:none;transition:none}
  .scribble path,.setup .s-path{stroke-dashoffset:0;transition:none}
  .setup .s-guide,.setup .s-band,.setup .s-dot{opacity:1}
  .cs-fill,.cs-mark,.mix-bar{transition:none}
  .dd-mark{transition:none}
  .hero-card{transform:none;transition:none}
}