/* ------------------------------------------------------------------ *
 * finance.demolabs.com — shell styles
 *
 * The Buffered ETFs page keeps its own inline stylesheet (it was migrated
 * intact so its layout and calculators are untouched). The token block
 * below is the same one that page uses, so both halves of the site share
 * one palette, one type scale, and one theme toggle.
 * ------------------------------------------------------------------ */
:root{
  --bg:#f7f8fa; --bg-elev:#ffffff; --bg-sunk:#eef0f4;
  --fg:#16181d; --fg-mut:#5b6472; --fg-faint:#8a93a1;
  --line:#dfe3ea; --line-strong:#c6ccd8;
  --accent:#1f5fd0; --accent-soft:#e8f0fe; --accent-fg:#fff;
  --good:#1a7f4b; --good-soft:#e4f4ec;
  --warn:#9a6400; --warn-soft:#fdf3dd;
  --orange:#b8500b; --orange-soft:#fdeade;
  --bad:#b3261e;  --bad-soft:#fdeceb;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.05);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  --nav-h:52px;
}
:root[data-theme="dark"]{
  --bg:#0f1216; --bg-elev:#171b21; --bg-sunk:#1e232b;
  --fg:#e8ecf2; --fg-mut:#a3adbb; --fg-faint:#7b8695;
  --line:#2a303a; --line-strong:#3b434f;
  --accent:#6ea3ff; --accent-soft:#17253f; --accent-fg:#0f1216;
  --good:#4cc38a; --good-soft:#12291f;
  --warn:#e0a33c; --warn-soft:#2b2313;
  --orange:#ff8f4d; --orange-soft:#331a0c;
  --bad:#f2685e;  --bad-soft:#2e1715;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 14px)}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.65 var(--sans);
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:1.25; margin:0 0 .5em; font-weight:650; letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,5vw,2.9rem); letter-spacing:-.03em}
h2{font-size:clamp(1.3rem,3vw,1.7rem); letter-spacing:-.02em}
h3{font-size:1.08rem}
p{margin:0 0 1em}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--mono); font-size:.88em; background:var(--bg-sunk); padding:.12em .38em; border-radius:5px}
hr{border:0; border-top:1px solid var(--line); margin:2.5rem 0}
ul,ol{margin:0 0 1em; padding-left:1.25em}
li{margin:.35em 0}
small{font-size:.83rem}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
[hidden]{display:none!important}

.wrap{max-width:1080px; margin:0 auto; padding:0 20px}
/* Shell pages are text-first, so they read at a narrower measure than the
   Buffered ETFs page, which needs the width for tables and charts. */
.wrap.narrow{max-width:860px}
.prose{max-width:66ch}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:8px; z-index:60; background:var(--accent); color:var(--accent-fg); padding:8px 12px; border-radius:8px}

/* ---- top bar ---- */
.nav{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:1080px; margin:0 auto; padding:0 20px; height:var(--nav-h);
  display:flex; align-items:center; gap:1.1rem;
}
.brand{font-weight:700; font-size:.92rem; white-space:nowrap; color:var(--fg); letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand span{color:var(--accent)}
.nav-links{display:flex; gap:1.1rem; margin-left:auto; align-items:center; font-size:.88rem}
.nav-links a{color:var(--fg-mut)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--fg); text-decoration:none}
.nav-links a[aria-current="page"]{font-weight:650}
.icon-btn{
  appearance:none; border:1px solid var(--line-strong); background:var(--bg-elev); color:var(--fg);
  height:32px; width:32px; border-radius:8px; cursor:pointer; font-size:.9rem; line-height:1;
  display:grid; place-items:center; flex:none;
}
.icon-btn:hover{background:var(--bg-sunk)}
@media (max-width:620px){
  .nav-links{gap:.85rem; font-size:.82rem}
  .nav-links .hide-sm{display:none}
}

/* ---- hero ---- */
.hero{padding:clamp(3rem,9vw,5.5rem) 0 2.5rem; max-width:70ch}
.hero .lede{font-size:clamp(1.05rem,2.1vw,1.2rem); color:var(--fg-mut); margin-bottom:1em}
.kicker{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-faint); margin-bottom:1rem;
}
.hero p strong{color:var(--fg)}

/* ---- subject card ---- */
.subject{
  display:block; background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:clamp(1.4rem,3.5vw,2.2rem); margin:1rem 0 2rem; color:inherit;
}
.subject:hover{text-decoration:none; border-color:var(--line-strong)}
.subject-num{
  font-family:var(--mono); font-size:.78rem; color:var(--fg-faint); letter-spacing:.08em;
}
.subject h2{margin:.3rem 0 .2rem; font-size:clamp(1.5rem,3.4vw,2rem); letter-spacing:-.025em}
.subject .q{color:var(--fg-mut); font-size:1.02rem; margin:0 0 1.1rem; max-width:56ch}
.subject .qs{
  margin:0 0 1.3rem; padding:0; list-style:none; display:grid; gap:.35rem;
  font-size:.93rem; color:var(--fg-mut); max-width:60ch;
}
.subject .qs li{padding-left:1.1em; position:relative}
.subject .qs li::before{content:"?"; position:absolute; left:0; color:var(--fg-faint); font-family:var(--mono)}
.cta{display:inline-flex; align-items:center; gap:.4em; font-weight:650; color:var(--accent)}
.subject:hover .cta{text-decoration:underline}
.tag{
  display:inline-block; font-size:.72rem; font-weight:650; letter-spacing:.03em;
  background:var(--bg-sunk); color:var(--fg-mut); border-radius:999px; padding:.2em .7em; margin-left:.5rem;
}

/* ---- generic blocks ---- */
.card{
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem 1.2rem; box-shadow:var(--shadow);
}
.grid{display:grid; gap:1rem}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.note{
  border-left:3px solid var(--line-strong); padding:.2rem 0 .2rem 1rem;
  color:var(--fg-mut); font-size:.95rem; margin:1.5rem 0;
}
.section{padding:2.5rem 0; border-top:1px solid var(--line)}
.section:first-of-type{border-top:0}

/* ---- forms ---- */
.tabs{display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 1.6rem}
.tabs button{
  appearance:none; cursor:pointer; font:inherit; font-size:.9rem; font-weight:600;
  background:var(--bg-elev); color:var(--fg-mut); border:1px solid var(--line-strong);
  padding:.5rem .95rem; border-radius:999px;
}
.tabs button[aria-selected="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-fg)}
.field{margin:0 0 1.1rem}
.field label{display:block; font-size:.88rem; font-weight:650; margin-bottom:.35rem}
.field .hint{font-size:.82rem; color:var(--fg-mut); margin-top:.3rem}
input[type=text],input[type=email],input[type=url],textarea,select{
  width:100%; font:inherit; font-size:.95rem; color:var(--fg); background:var(--bg-elev);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:.6rem .7rem;
}
textarea{min-height:120px; resize:vertical; line-height:1.55}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.btn{
  appearance:none; cursor:pointer; font:inherit; font-size:.92rem; font-weight:650;
  background:var(--bg-elev); color:var(--fg); border:1px solid var(--line-strong);
  padding:.6rem 1.1rem; border-radius:var(--radius-sm);
}
.btn:hover{background:var(--bg-sunk); text-decoration:none}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-fg)}
.btn.primary:hover{filter:brightness(1.06); background:var(--accent)}
.btn[disabled]{opacity:.55; cursor:default}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.formmsg{margin-top:1rem; padding:.8rem 1rem; border-radius:var(--radius-sm); font-size:.92rem}
.formmsg.ok{background:var(--good-soft); color:var(--good)}
.formmsg.err{background:var(--bad-soft); color:var(--bad)}

/* ---- footer ---- */
footer{border-top:1px solid var(--line); margin-top:3.5rem; padding:2rem 0 3rem; background:var(--bg-sunk)}
.foot-nav{display:flex; flex-wrap:wrap; gap:.4rem 1.3rem; font-size:.9rem; margin-bottom:1.4rem}
.foot-nav a{color:var(--fg-mut)}
.disclaimer{font-size:.8rem; line-height:1.6; color:var(--fg-mut); max-width:80ch; margin:0 0 .8rem}