/* ============================================================
   Trading Insight — shared stylesheet
   Palette, type and components. Edit here, every page follows.
   ============================================================ */

:root{
  --paper:#f6f7f9; --surface:#ffffff; --surface-2:#eceff4;
  --ink:#141a22; --ink-2:#4a5666; --ink-3:#7d8899;
  --rule:#d8dee7; --rule-strong:#b9c3d0;
  --accent:#2d6ba3; --accent-soft:#e6eef7; --accent-deep:#1d4c78;
  --up:#146b46; --down:#a93629; --warn:#8f5f07;
  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --body:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0d1117; --surface:#151b24; --surface-2:#1b232e;
    --ink:#e6ebf2; --ink-2:#9aa7b8; --ink-3:#6d7c90;
    --rule:#252f3b; --rule-strong:#3a4755;
    --accent:#72acdf; --accent-soft:#152636; --accent-deep:#9cc8ee;
    --up:#48c48d; --down:#ea7a6c; --warn:#d9a842;
  }
}
:root[data-theme="dark"]{
  --paper:#0d1117; --surface:#151b24; --surface-2:#1b232e;
  --ink:#e6ebf2; --ink-2:#9aa7b8; --ink-3:#6d7c90;
  --rule:#252f3b; --rule-strong:#3a4755;
  --accent:#72acdf; --accent-soft:#152636; --accent-deep:#9cc8ee;
  --up:#48c48d; --down:#ea7a6c; --warn:#d9a842;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
a{color:var(--accent);}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important;}}

.wrap{max-width:900px; margin:0 auto; padding-inline:20px;}
.wrap-narrow{max-width:720px; margin:0 auto; padding-inline:20px;}

/* ---------- site nav ---------- */
.sitenav{
  position:sticky; top:0; z-index:20; background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.sitenav .inner{
  max-width:900px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.brand{
  font-family:var(--display); font-weight:800; font-size:16px;
  letter-spacing:-.01em; color:var(--ink); text-decoration:none;
  display:flex; align-items:center; gap:8px; margin-right:auto;
}
.brand .dot{width:9px; height:9px; background:var(--accent); border-radius:1px; flex:none;}
.sitenav a.nl{
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); text-decoration:none; padding:4px 0;
  border-bottom:2px solid transparent;
}
.sitenav a.nl:hover{color:var(--ink);}
.sitenav a.nl[aria-current="page"]{color:var(--accent); border-bottom-color:var(--accent);}

/* ---------- type ---------- */
h1{
  font-family:var(--display); font-weight:800; font-size:clamp(36px,7.5vw,60px);
  line-height:.98; letter-spacing:-.028em; margin:0 0 16px; text-wrap:balance;
}
h2{
  font-family:var(--display); font-weight:700; font-size:clamp(24px,4.2vw,32px);
  line-height:1.12; letter-spacing:-.018em; margin:0 0 16px; text-wrap:balance;
}
h3{font-family:var(--display); font-weight:600; font-size:18px; letter-spacing:-.008em; margin:26px 0 8px;}
h4{font-family:var(--display); font-weight:600; font-size:15px; margin:0 0 8px; line-height:1.3;}
p{margin:0 0 15px; max-width:68ch;}
p:last-child{margin-bottom:0;}
strong{font-weight:600; color:var(--ink);}
em{font-style:italic; color:var(--ink-2);}
.lede{font-size:clamp(17px,2.6vw,20px); line-height:1.5; color:var(--ink-2); font-weight:500; max-width:44ch;}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:500;}
.up{color:var(--up);} .down{color:var(--down);}
.fine{font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--ink-3); margin:-6px 0 16px; line-height:1.55;}

section{padding-block:40px; border-bottom:1px solid var(--rule);}
section:last-of-type{border-bottom:none;}
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 8px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:18px; height:2px; background:var(--accent); flex:none;}

/* ---------- hero ---------- */
.hero{padding-block:56px 44px; border-bottom:2px solid var(--ink);}
.kicker{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); display:flex; gap:14px;
  flex-wrap:wrap; margin-bottom:16px;
}
.kicker span:not(:first-child){color:var(--ink-3);}

/* ---------- buttons ---------- */
.btns{display:flex; flex-wrap:wrap; gap:11px; margin-top:24px;}
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-size:15px; font-weight:600;
  padding:12px 20px; border-radius:3px; text-decoration:none;
  border:1.5px solid var(--accent); transition:transform .12s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent);}
:root[data-theme="dark"] .btn-primary,
:root:not([data-theme="light"]) .btn-primary{color:#0d1117;}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .btn-primary{color:#fff;}}
.btn-ghost{background:transparent; color:var(--accent);}
.btn-quiet{background:transparent; color:var(--ink-2); border-color:var(--rule-strong);}
.btn .sub{font-family:var(--mono); font-size:11px; font-weight:500; opacity:.8;}

/* ---------- cards / grids ---------- */
.grid-3{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin:0 0 20px;}
.grid-2{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin:0 0 20px;}
.tile{background:var(--surface); padding:20px 18px;}
.tile .n{
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:9px;
}
.tile p{font-size:15px; line-height:1.5; margin:0;}

.panel{border:1px solid var(--rule); background:var(--surface); padding:22px 22px;}
.panel.accent{border-top:3px solid var(--accent);}

/* ---------- tape (numbers row) ---------- */
.tape{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin:0 0 20px;}
.cell{background:var(--surface); padding:13px 15px;}
.cell .lbl{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px;}
.cell .val{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:21px; font-weight:600; line-height:1.15; letter-spacing:-.01em;}
.cell .chg{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:500; margin-top:3px;}
.cell.flag{background:var(--accent-soft);}
.cell .note{font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-top:4px; font-weight:600;}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto; margin:0 0 18px;}
table{border-collapse:collapse; width:100%; min-width:400px; font-family:var(--mono); font-size:13.5px; font-variant-numeric:tabular-nums;}
th{text-align:right; font-weight:600; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); padding:0 0 8px; border-bottom:1px solid var(--rule-strong);}
th:first-child,td:first-child{text-align:left;}
td{text-align:right; padding:8px 0; border-bottom:1px solid var(--rule); font-weight:500;}
td:first-child{font-weight:600; padding-right:18px;}
tr:last-child td{border-bottom:none;}

/* ---------- callout ---------- */
.callout{border-left:3px solid var(--accent); background:var(--surface); padding:15px 18px; margin:0 0 18px;}
.callout p{margin:0; font-size:16px;}
.callout .tag{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:5px;}
.callout.warn{border-left-color:var(--warn);}
.callout.warn .tag{color:var(--warn);}
.callout.risk{border-left-color:var(--down); background:var(--surface-2);}
.callout.risk .tag{color:var(--down);}

/* ---------- price card ---------- */
.price{display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:start; border:1px solid var(--rule-strong); background:var(--surface); padding:26px 24px; margin:0 0 20px;}
.price .amt{font-family:var(--display); font-weight:800; font-size:52px; line-height:1; letter-spacing:-.03em;}
.price .per{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:6px;}
.price ul{margin:0 0 16px; padding-left:20px;}
.price li{font-size:15.5px; line-height:1.5; margin-bottom:7px;}
@media (max-width:540px){.price{grid-template-columns:1fr; gap:16px;} .price .amt{font-size:42px;}}

/* ---------- newsletter form ---------- */
.signup{border:1px solid var(--rule); background:var(--surface); padding:24px 22px; margin:0 0 18px;}
.signup form{display:flex; gap:9px; flex-wrap:wrap; margin-top:14px;}
.signup input[type=email]{
  flex:1 1 230px; min-width:0; font-family:var(--mono); font-size:14px;
  padding:11px 13px; border:1.5px solid var(--rule-strong); border-radius:3px;
  background:var(--paper); color:var(--ink);
}
.signup input[type=email]::placeholder{color:var(--ink-3);}
.signup button{
  font-family:var(--display); font-size:15px; font-weight:600; padding:11px 22px;
  border-radius:3px; border:1.5px solid var(--accent); background:var(--accent);
  color:#fff; cursor:pointer;
}
.signup button:hover{background:var(--accent-deep); border-color:var(--accent-deep);}
.hp{position:absolute; left:-9999px;}

/* ---------- archive list ---------- */
.arch{border-top:1px solid var(--rule); margin:0 0 20px;}
.arch a{
  display:grid; grid-template-columns:92px 1fr auto; gap:18px; align-items:baseline;
  padding:16px 0; border-bottom:1px solid var(--rule); text-decoration:none; color:inherit;
}
.arch a:hover{background:var(--surface);}
.arch .d{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);}
.arch .t{font-family:var(--display); font-weight:600; font-size:17px; line-height:1.3;}
.arch .t small{display:block; font-family:var(--body); font-weight:400; font-size:14.5px; color:var(--ink-2); margin-top:3px; line-height:1.45;}
.arch .go{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.08em;}
@media (max-width:600px){.arch a{grid-template-columns:1fr; gap:5px;} .arch .go{display:none;}}

/* ---------- disclosure / footer ---------- */
.disclosure{
  font-family:var(--mono); font-size:11.5px; line-height:1.65; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--rule); padding:13px 16px; margin:0 0 18px;
}
.disclosure b{color:var(--ink); font-weight:600;}
.sitefoot{border-top:2px solid var(--ink); margin-top:14px; padding-block:26px 46px;}
.sitefoot .cols{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin-bottom:22px;}
.sitefoot h5{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 9px;}
.sitefoot a{display:block; color:var(--ink-2); text-decoration:none; font-size:15px; padding:3px 0;}
.sitefoot a:hover{color:var(--accent);}
.sitefoot .legal{font-size:13.5px; line-height:1.6; color:var(--ink-3); max-width:76ch;}
.sitefoot .legal strong{color:var(--ink-2);}

/* ---------- ladder (brief) ---------- */
.ladder{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:14px; background:var(--surface); border:1px solid var(--rule); padding:16px 0; margin:0 0 18px;}
.rung{display:grid; grid-template-columns:84px 1fr; gap:16px; align-items:baseline; padding:5px 18px;}
.rung .lv{text-align:right; font-weight:600;}
.rung .why{font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);}
.rung.zone{background:var(--accent-soft);}
.rung.zone .why{color:var(--accent); font-weight:600;}
.rung.last{background:var(--ink); color:var(--paper); padding-block:8px; margin:6px 0;}
.rung.last .lv{font-size:16px; font-weight:600;}
.rung.last .why{color:var(--paper); opacity:.72; font-weight:600;}
.rung.floor .why{color:var(--down); font-weight:600;}
.rung.ceil .why{color:var(--ink-2); font-weight:600;}
@media (max-width:520px){.rung{grid-template-columns:76px 1fr; gap:10px; padding-inline:12px;}}

/* ---------- scenarios ---------- */
.scenarios{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin:0 0 18px;}
.sc{border:1px solid var(--rule); border-top:3px solid var(--rule-strong); background:var(--surface); padding:16px 17px;}
.sc.a{border-top-color:var(--up);} .sc.b{border-top-color:var(--warn);} .sc.c{border-top-color:var(--down);}
.sc .w{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); display:flex; justify-content:space-between; margin-bottom:7px;}
.sc p{font-size:14.5px; line-height:1.5; margin:0 0 10px;}
.sc .conf{font-family:var(--mono); font-size:11.5px; line-height:1.45; color:var(--ink-2); border-top:1px solid var(--rule); padding-top:9px; margin:0;}
.meter{height:3px; background:var(--surface-2); margin-bottom:10px;}
.meter i{display:block; height:100%;}
.sc.a .meter i{background:var(--up);} .sc.b .meter i{background:var(--warn);} .sc.c .meter i{background:var(--down);}

/* ---------- clock rail ---------- */
.rail{border-left:2px solid var(--rule); margin:0 0 6px;}
.tick{display:grid; grid-template-columns:78px 1fr; gap:16px; padding:9px 0 9px 18px; position:relative;}
.tick::before{content:""; position:absolute; left:-5px; top:17px; width:8px; height:8px; border-radius:50%; background:var(--rule-strong);}
.tick.key::before{background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);}
.tick .t{font-family:var(--mono); font-weight:600; font-size:12.5px; color:var(--ink-2);}
.tick.key .t{color:var(--accent);}
.tick .d{font-size:15px; line-height:1.45;}
.tick.key .d{font-weight:600;}
@media (max-width:520px){.tick{grid-template-columns:62px 1fr; gap:11px;}}

/* ---------- scorecard ---------- */
.cards{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); margin:0 0 16px;}
.card{background:var(--surface); padding:13px 16px; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;}
.badge{font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; border-radius:2px; white-space:nowrap; margin-top:2px;}
.badge.open{background:var(--accent-soft); color:var(--accent);}
.badge.hit{background:var(--surface-2); color:var(--up);}
.badge.miss{background:var(--surface-2); color:var(--down);}
.badge.part{background:var(--surface-2); color:var(--warn);}
.card .claim{font-size:15px; line-height:1.5;}
.card .claim .meta{font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.05em; display:block; margin-top:4px;}
@media (max-width:520px){.card{grid-template-columns:1fr; gap:8px;}}

/* ---------- chart ---------- */
.viz{background:var(--surface); border:1px solid var(--rule); padding:18px 14px 12px; margin:0 0 16px;}
.viz svg{display:block; width:100%; height:auto; overflow:visible;}
.viz text{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.ax{font-size:11px; fill:var(--ink-3);}
.rt-give{stroke:var(--down); stroke-width:7;}
.rt-zero{stroke:var(--rule-strong); stroke-width:1.5;}
.rt-tick{stroke:var(--rule); stroke-width:1;}
.rt-dot{stroke:var(--surface); stroke-width:2.5;}
.rt-tkr{font-size:14px; font-weight:600; fill:var(--ink);}
.rt-note{font-size:11px; fill:var(--ink-3); letter-spacing:.04em;}

/* ---------- week grid ---------- */
.week{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.day{background:var(--surface); padding:14px 15px;}
.day .dn{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px;}
.day .ev{font-size:14.5px; line-height:1.45; margin-bottom:3px;}
.day.hot{background:var(--accent-soft);}
.day.hot .dn{color:var(--accent);}
.day .tk{font-family:var(--mono); font-size:13px; font-weight:600;}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0;}
.chip{font-family:var(--mono); font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; border:1px solid var(--rule-strong); padding:6px 11px; color:var(--ink-2); border-radius:2px;}

/* ---------- print ---------- */
@media print{
  :root{--paper:#fff; --surface:#fff; --surface-2:#f2f4f7; --ink:#000; --ink-2:#333; --ink-3:#555;
        --rule:#c8ced6; --rule-strong:#8d97a3; --accent:#1d4f7c; --accent-soft:#eef3f8;}
  @page{margin:14mm 12mm;}
  body{background:#fff; font-size:10.5pt;}
  .sitenav,.signup,.btns,.sitefoot .cols{display:none!important;}
  section{break-inside:avoid; padding-block:16px;}
  .tape,.week,.cards,.ladder,.viz,.callout,.sc,.price,.grid-3{break-inside:avoid;}
  .tbl-wrap{overflow:visible;} table{min-width:0; font-size:9pt;}
}