:root{
    --ink:#FFFFFF;
    --surface:#F1F3E9;
    --surface-2:#E9ECDC;
    --text:#14151A;
    --dim:#5B6273;
    --dim-2:#7A8194;
    --line:rgba(10,14,22,.10);
    --long:#CC785C;
    --long-glow:#F0B08E;
    --short:#3C5A1A;
    --accent:var(--long);
    --accent-dim:rgba(204,120,92,.12);
    --warn:#92400E;
    --bg-dots: radial-gradient(circle, rgba(26,51,2,.14) 1px, transparent 1.6px);
    --bg-gradient: linear-gradient(180deg, #F0EDE5 0%, #EFE5E0 100%);
    --font-body:'MazzardH-Regular', 'Century Gothic', sans-serif;
    --font-heading: 'MazzardH-SemiBold', 'Century Gothic', sans-serif;
  }
  @font-face {
    font-family:'MazzardH-Bold';
    src: 
        local("MazzardH-Bold"),
        url(areas/proshares/assets/fonts/MazzardH-Bold.otf) format("opentype");
}
  @font-face {
        font-family:'MazzardH-Regular';
        src: 
            local("MazzardH-Regular"),
            url(/areas/proshares/assets/fonts/MazzardH-Regular.ttf) format("opentype");
    }
    @font-face {
        font-family:'MazzardH-SemiBold';
        src: 
            local("MazzardH-SemiBold"),
            url(/areas/proshares/assets/fonts/MazzardH-SemiBold.ttf) format("opentype");
    }

  * {box-sizing:border-box; margin:0; padding:0;}
  html {
    scroll-behavior:smooth;
    color-scheme:light;
    background:#FFFFFF;
  }
  body {
    background:var(--bg-dots), var(--bg-gradient);
    background-size:22px 22px, 100% 100%;
    color:var(--text); font-family:var(--font-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    transition:background .3s;
  }
  body[data-mode="short"]{
    --accent:var(--short);
    --accent-dim:rgba(60,90,26,.12);
  }
  a{color:inherit; text-decoration:none;}
  .wrap{max-width:1100px; margin:0 auto; padding:0 1.5rem;}
  ::selection{background: var(--warn); color:#fff;}
  h1 {
    font-family: 'MazzardH-Bold', 'Century Gothic', sans-serif;
  }
  h2 {
    font-family: var(--font-heading);
  }
  h3 {
    font-family: var(--font-heading);
  }
  p,div,span{
    font-family: var(--font-body);
  }
  p{
    font-size:14pt;
  }
  /* ---- reveal on scroll ---- */
  .reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{
    opacity:1;
    transform:none;
  }
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none;} }

  /* ---- top compliance bar (red herring) ---- */
  /* ---------- Ticker tape scroll speed ----------
     Change --ticker-speed below to speed up/slow down the tape.
     Higher number = slower scroll. Lower number = faster scroll. */
  :root{ --ticker-speed: 35s; }

  /* ---- header ---- */
  header{
    padding:18px 0;
    border-bottom:1px solid rgba(255,255,255,.12); position:sticky;
    top:0;
    z-index:100;
    background:#1A3302;}
  header .wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    row-gap:10px;
  }
  .logo-tag{display:flex; align-items:center; gap:10px;}
  .return-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.16);
    padding:7px 14px;
    text-decoration:none;
    transition:background .15s, border-color .15s;
    border-radius:20px;
  }
  .return-pill:hover{background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.28);}
  .return-arrow{color:#fff; font-size:14pt; line-height:1;}
  .return-text{
    font-family:var(--font-body);
    font-size:11pt;
    color:rgba(255,255,255,.55);
    letter-spacing:.2px;
  }
  .logo-divider{
    width:1px;
    height:16px;
    background:rgba(255,255,255,.25);
  }
  .header-link{
    font-family:var(--font-body);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:#fff;
    white-space:nowrap;
    text-decoration:none;
    transition:color .15s;
  }
  .header-link:hover{color:var(--long);}
  .nav-dropdown{position:relative;}
  .dropdown-trigger{
    display:flex;
    align-items:center;
    gap:5px;
    font-family:var(--font-body);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:#fff;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    white-space:nowrap;
    transition:color .15s;
  }
  .dropdown-trigger:hover{color:#fff;}
  .dropdown-trigger svg{width:9px; height:9px; transition:transform .15s;}
  .dropdown-trigger.open{color:#fff;}
  .dropdown-trigger.open svg{transform:rotate(180deg);}
  .dropdown-menu {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    margin-top:14px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    box-shadow:0 14px 28px rgba(10,14,22,.14);
    min-width:210px;
    overflow:hidden;
    z-index:50;
  }
  .dropdown-menu.open{display:block;}
  .dropdown-menu a{
    display:block;
    padding:12px 16px;
    font-size:13px;
    font-weight:600; 
    color:var(--text);
    text-decoration:none;
    white-space:nowrap;
  }
  .dropdown-menu a:hover{background:var(--surface); color:#CC785C;}
  .header-right{display:flex; align-items:center; gap:22px;}
  .social-links{display:flex; align-items:center; gap:10px;}
    .social-links a {
      width:2rem;
      height:2rem;
      border-radius:50%;
      background:var(--dim-2);
      display:flex;
      align-items:center;
      justify-content:center;
      transition:background .15s, transform .15s;
    }
      .social-links a:hover{background:#D97757; transform:translateY(-1px);}
      .social-links img{width: 1rem; height: auto;}

  /* ---- mobile menu: hidden on desktop, shown only under the 760px breakpoint ---- */
  .menu-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    width:30px;
    height:30px;
    border:none;
    background:none;
    cursor:pointer;
    padding:0;
  }
  .menu-toggle span{
    display:block;
    width:20px;
    height:2px;
    background:#fff;
    border-radius:2px;
    transition:transform .2s, opacity .2s;
  }
  .menu-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .menu-toggle.open span:nth-child(2){opacity:0;}
  .menu-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  .mobile-nav{
    display:none;
    flex-direction:column;
    background:#1A3302;
    border-bottom:1px solid rgba(255,255,255,.12); box-shadow:0 12px 24px rgba(10,14,22,.2);}
  .mobile-nav.open{display:flex;}
  .mobile-nav a{
    padding:16px 24px;
    font-size:15px;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.12); text-decoration:none;
  }
  .mobile-nav a:last-child{border-bottom:none;}
  .mobile-nav a:active{background:rgba(255,255,255,.08); color:#fff;}
  .logo{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-body);
    font-weight:800;
    font-size:16px;
    letter-spacing:.1px;
    color:var(--text);
  }
  .logo-mark{color:var(--text); flex-shrink:0;}
  nav{
    display:flex;
    gap:26px;
    font-size:13.5px;
    color:#fff;
    flex-wrap:wrap;
  }
  nav a{
    white-space:nowrap;
    color:inherit;
    transition:color .15s;
    text-decoration: none;
  }
  nav a:hover{color:#fff;}
  nav a:hover{color:#D97757;}
  .buy-link{
    font-family:var(--font-body);
    font-size:12.5px;
    font-weight:700;
    border:1px solid var(--line);
    padding:8px 16px;
    border-radius:20px;
  }
  .buy-link:hover{border-color:#CC785C; color:#CC785C;}

  /* ---- hero ---- */
  .hero{
    padding:80px 0 0;
    position:relative;
    overflow:hidden;
    background:var(--bg-dots),
    var(--bg-gradient);
    background-size:22px 22px, 100% 100%;
  }
  .hero::before{
    content:''; position:absolute; top:-200px; left:50%; transform:translateX(-50%);
    width:900px; height:500px; border-radius:50%; background:#CC785C; opacity:.08; filter:blur(120px); transition:background .3s; pointer-events:none;
  }
  .hero-blob{
    position: absolute;
    top: 5%;
    right: 5%;
    max-width: 500px;
    max-height: 500px;
    aspect-ratio: 1/1;
    opacity: .5;
    pointer-events: none;
    z-index: 0;
  }

  .hero .wrap{
    position:relative;
    z-index:1;
    padding-bottom:40px;
  }

  .status-badge{
    display:flex;
    align-items:center;
    gap:8px;
    justify-content:center;
    width:fit-content;
    margin:0 0 20px;
    font-family:var(--font-body);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.6px;
    color:#F0EDE5;
    text-transform:uppercase;
    background:#1A3302;
    border:1.5px solid #E8C877;
    padding:7px 16px;
    border-radius:20px;
  }
  .status-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#CC785C;
    flex-shrink:0;
  }

  .status-dot.pulse{animation:status-pulse 2.6s ease-in-out infinite;}
  @keyframes status-pulse{
    0%, 100%{opacity:1; transform:scale(1);}
    50%{opacity:.35; transform:scale(1.3);}
  }
  @media (prefers-reduced-motion:reduce){ .status-dot.pulse{animation:none;} }
  .kicker-dot{opacity:.6; margin:0 2px;}
  .eyebrow-link{
    color:var(--dim-2);
    text-decoration:none;
    border-bottom:1px dotted var(--dim-2);
    padding-bottom:1px;
    cursor:pointer;
  }
  .eyebrow-link:hover{
    color:var(--text);
    border-bottom-color:var(--text);
  }

  h1.headline{
    font-size:clamp(40px,7vw,84px);
    font-weight:800;
    text-align:left;
    line-height: 1.05;
    letter-spacing:-.02em;
    margin-bottom:36px;
    color:var(--text);
  }
  h1.headline .tick{
    font-family:'MazzardH-Bold', 'Century Gothic', sans-serif;
    display:inline-block;
    transition:background .3s, color .3s, border-color .3s;
  }
  h1.headline .tick.mode-long{
    color:#CC785C;
    text-shadow:0 0 8px #fff, 0 0 8px #fff, 0 0 12px #fff;
  }
  h1.headline .tick.mode-short{
    color:#fff;
    text-shadow:0 0 8px #CC785C, 0 0 8px #CC785C, 0 0 12px #CC785C;
  }

  .choose-label{
    text-align:left;
    font-family:var(--font-body);
    font-size:14pt;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--dim);
    margin-bottom:12px;
  }

  /* ---- ticker toggle: segmented control, ticker symbol is the dominant text ---- */
  .ticker-toggle{
    display:flex;
    max-width:500px;
    margin:0;
    gap:1rem;
    /*background:var(--surface-2);*/
    border-radius:18px;
    /*box-shadow:inset 0 1px 3px rgba(10,14,22,.08);*/
  }
  .ticker-seg-wrap{
    flex:1;
    overflow:hidden;
    border-radius:13px;
    transition:box-shadow .2s, background .2s;
    background: var(--surface);
  }
  .ticker-seg-wrap.active{box-shadow:0 6px 16px rgba(10,14,22,.14);}
  .ticker-seg-wrap.long.active{background:#CC785C;}
  .ticker-seg-wrap.short.active{background:#fff; box-shadow:0 6px 16px rgba(10,14,22,.14), inset 0 0 0 2px #CC785C;}
  .ticker-seg{
    width:100%;
    height:100%;
    border:none;
    background:none;
    cursor:pointer;
    text-align:center;
    font-family:var(--font-body);
    padding:0.5rem 0;
    transition:transform .12s;
  }
  .ticker-seg-wrap:hover .ticker-seg{transform:translateY(-1px);}
  .ticker-seg .seg-ticker{
    display:block;
    font-size:clamp(22px,6vw,28px);
    font-weight:800;
    color:var(--dim-2);
    letter-spacing:.2px;
    margin-bottom:4px;
    transition:color .2s;
  }
  .ticker-seg .seg-tag{
    display:block;
    font-size:11px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:var(--dim-2);
    opacity:.75;
  }
  .ticker-seg .seg-name{
    display:block;
    font-size:10pt;
    font-weight:500;
    letter-spacing:.2px;
    text-transform:none;
    color:var(--dim-2);
    opacity:.6;
    margin-top:3px;
    font-family:var(--font-body);
  }
  .ticker-seg-wrap.long.active .seg-name{color:#fff; opacity:.7;}
  .ticker-seg-wrap.short.active .seg-name{color:#CC785C; opacity:.7;}
  .ticker-seg-wrap.long.active .seg-ticker{color:#fff;}
  .ticker-seg-wrap.long.active .seg-tag{color:#fff; opacity:.85;}
  .ticker-seg-wrap.short.active .seg-ticker{color:#CC785C;}
  .ticker-seg-wrap.short.active .seg-tag{color:#CC785C; opacity:.85;}

  /* ---- product-page link: only shows on the active side, and only once
     PRODUCT_PAGES_LIVE is switched on in the script below ---- */
  .seg-link{
    display:none; text-align:center; font-family:var(--font-body); font-size:10.5px; font-weight:700;
    letter-spacing:.2px; text-decoration:none; padding:6px 0 12px; animation:seg-link-in .25s ease;
  }
  @keyframes seg-link-in{ from{opacity:0; transform:translateY(-3px);} to{opacity:1; transform:none;} }
  .ticker-seg-wrap.long .seg-link{color:rgba(255,255,255,.9);}
  .ticker-seg-wrap.short .seg-link{color:#CC785C;}
  .ticker-toggle.product-pages-live .ticker-seg-wrap.active .seg-link{display:block;}
  .seg-link:hover{text-decoration:underline;}

  .reg-caption{
    margin:20px 0 0;
    background:var(--surface);
    color: var(--dim-2);
    border:1.5px solid #E0E0E0;
    font-size: 11pt;
    padding:14px 18px;
    border-radius:10px;
  }

  #heroDisclosure, #regCaption {
    font-size: 11pt;
  }
  /* ---- ticker tape ---- */
  .ticker-tape{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:#1A3302;
    overflow:hidden;
    white-space:nowrap;
    padding:14px 0;
    z-index:10;
    position: relative;
  }
  .ticker-track{
    display:inline-block;
    animation:scroll-left var(--ticker-speed) linear infinite;
  }
  .ticker-track:hover{animation-play-state:paused;}
  .ticker-track span{font-family:var(--font-body); font-size:11pt; color: #fff; margin-right:48px;}
  .ticker-track span a{color:#fff; font-weight:700; text-decoration:underline; cursor:pointer;}
  .ticker-track span a:hover{color:#CC785C;}
  @keyframes scroll-left{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  @media (prefers-reduced-motion:reduce){ .ticker-track{animation:none;} }

  /* ---- section shell ---- */
  section{padding:60px 0;}
  .sec-head{margin-bottom:40px;}
  .sec-eyebrow{
    font-family:var(--font-body);
    font-size:13px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#CC785C;
    margin-bottom:12px;
  }
  .sec-title{
    font-size:clamp(28px,4vw,40px);
    font-weight:800;
    letter-spacing:-.01em;
    color:var(--text);
  }
  .sec-rule{
    height:4px;
    width:88px;
    background:#CC785C;
    margin-top:16px;
  }
  .sec-sub{
    color:var(--dim);
    font-size:14pt;
    margin-top:12px;
  }

  /* ---- simulator ---- */
  .sim-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:20px;
    padding:40px;
  }
  .sim-slider-row{margin-bottom:36px;}
  .sim-slider-label{
    display:flex;
    justify-content:space-between;
    font-family:var(--font-body);
    font-size:14pt;
    color:var(--dim);
    margin-bottom:14px;
  }
  .sim-slider-label b{color:var(--text); font-size:14pt;}
  input[type="range"]{
    -webkit-appearance:none; width:100%; height:6px; border-radius:3px;
    background:linear-gradient(90deg, var(--short) 0%, var(--dim-2) 50%, var(--long) 100%);
    outline:none;
  }
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:#fff;
    border:4px solid var(--ink); box-shadow:0 0 0 2px var(--text); cursor:pointer;
  }
  input[type="range"]::-moz-range-thumb{
    width:24px; height:24px; border-radius:50%; background:#fff; border:4px solid var(--ink); box-shadow:0 0 0 2px var(--text); cursor:pointer;
  }
  .sim-results{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  .sim-result{border-radius:14px; padding:26px; border:1px solid var(--line);}
  .sim-result.antu{background:rgba(204,120,92,.05);}
  .sim-result.anty{background:rgba(60,90,26,.05);}
  .sim-result .tk{font-family:var(--font-body); font-size:13px; color:var(--dim); margin-bottom:10px; display:flex; justify-content:space-between;}
  .sim-result .val{font-family:var(--font-body); font-size:44px; font-weight:800;}
  .sim-result.antu .val{color:var(--long);}
  .sim-result.anty .val{color:var(--short);}
  .sim-note{font-size:14pt; color:var(--dim-2); margin-top:24px; line-height:1.6;}
  @media (max-width:640px){ .sim-results{grid-template-columns:1fr;} }

  /* ---- valuation timeline ---- */
  .vtimeline-label{font-family:var(--font-body); font-size:14pt; letter-spacing:.6px; text-transform:uppercase; color:var(--dim); font-weight:700; margin-top:1.5rem;}
  .chart-toggle-label{font-family:var(--font-body); font-size:14pt; letter-spacing:1.2px; text-transform:uppercase; color:var(--dim); margin-bottom:10px;}
  .chart-toggle{display:inline-flex; gap:4px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:4px; margin-bottom:4px; box-shadow:0 1px 3px rgba(10,14,22,.06);}
  .chart-toggle-btn{font-family:var(--font-body); font-size:14pt; font-weight:700; letter-spacing:.2px; color:var(--dim); background:none; border:none; padding:10px 20px; border-radius:9px; cursor:pointer; transition:background .15s, color .15s, box-shadow .15s;}
  .chart-toggle-btn:hover{color:var(--text); background:rgba(10,14,22,.04);}
  .chart-toggle-btn.active{background:#CC785C; color:#fff; box-shadow:0 2px 6px rgba(204,120,92,.4);}
  .chart-toggle-btn.active:hover{background:#CC785C; color:#fff;}
  .vtimeline{display:flex; gap:0; margin:14px 0 8px; overflow-x:auto; padding-bottom:8px;}
  .vpoint{flex:1; min-width:150px; position:relative; padding-top:26px;}
  .vline{position:absolute; top:9px; left:0; right:0; height:2px; background:var(--line);}
  .vpoint:last-child .vline{display:none;}
  .vpoint.dashed-next .vline{background:none; border-top:2px dashed var(--dim-2); height:0;}
  .vdot{position:absolute; top:5px; left:0; width:10px; height:10px; border-radius:50%; background:#CC785C; z-index:1;}
  .vdate{font-family:var(--font-body); font-size:11pt; color:var(--dim-2); margin-bottom:4px;}
  .vpoint-future .vdate{color:var(--dim-2);}
  .vamt{font-family:var(--font-body); font-size:18pt; font-weight:800; color:var(--text);}
  .vpoint-future .vamt{color:var(--dim-2);}

  /* ---- stat grid ---- */
  .stat-grid{display:grid; grid-template-columns:repeat(var(--stat-cols, 4), 1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-top:16px;}
  .stat-cell{background:var(--surface); padding:28px;}
  .stat-cell .lbl{font-family:var(--font-body); font-size:11pt; letter-spacing:.4px; text-transform:uppercase; color:var(--dim-2); margin-bottom:10px;}
  .stat-cell .big{font-family:var(--font-body); font-size:16pt; font-weight:800; color:#CC785C; margin-bottom:8px;}
  .stat-cell p{font-size:11pt; color:var(--dim); line-height:1.55;}
  @media (max-width:900px){ .stat-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .stat-grid{grid-template-columns:1fr;} }
  .src-note{font-size:11pt; color:var(--dim-2); margin-top:18px;}
  .src-note + .src-note{margin-top:4px;}

  /* ---- mechanics accordion ---- */
  /* ---- insights / content grid: adapts to 1, 2, or 3 items ---- */
  .insights-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:28px; margin: 2rem auto;}
  .insights-grid-compact .insight-media{aspect-ratio: 5/3;}
  .insights-grid-compact .insight-media svg{width:24px; height:24px;}
  .insights-grid-compact .insight-body{padding:14px 16px 16px; gap:5px;}
  .insights-grid-compact .insight-title{font-size:14pt;}
  .insights-grid-compact .insight-desc{font-size:12pt; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;}
  .insights-grid-compact .insight-cta{font-size:11pt;}
  .insights-grid-compact.insights-grid > .insight-card:only-child .insight-title{font-size:19pt;}
  .insights-grid-compact.insights-grid > .insight-card:only-child .insight-body{padding:20px 24px;}

  /* ---- Fund Details section: split-screen, toggles with LONG/SHORT ---- */
  #fundDetails{
    padding-top:36px;
    padding-bottom:36px;
    background:var(--bg-dots), var(--bg-gradient);
    background-size:22px 22px, 100% 100%;
  }
  #faq{background:var(--bg-dots), var(--bg-gradient); background-size:22px 22px, 100% 100%;}
  .fd-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
  }
  .fd-column{
    padding:24px 26px;
    transition:opacity .35s ease, filter .35s ease, background .35s ease;
    cursor:pointer;
  }
  .fd-column.long{border-right:1px solid var(--line);}
  @media (max-width:900px){
    .fd-columns{grid-template-columns:1fr;}
    .fd-column.long{
      border-right:none;
      border-bottom:1px solid var(--line);
    }
  }

  .fd-selected-tag {
    display:inline-flex;
    align-items:center; gap:6px;
    font-family:var(--font-body);
    font-size:11px;
    font-weight:800;
    letter-spacing:.4px;
    color:#fff;
    background:#CC785C;
    padding:4px 11px;
    border-radius:14px;
    margin-bottom:10px;
    width:fit-content;
  }
  .fd-column.short .fd-selected-tag {
    background:#fff;
    color:#CC785C;
    border:1.5px solid #CC785C;
  }

  .fd-heading{font-size:18px; font-weight:800; color:var(--text); margin-bottom:14px;}
  .fd-block{margin-bottom:16px;}
  .fd-label{display:block; font-family:var(--font-body); font-size:10px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--dim); margin-bottom:4px;}
  .fd-block p{font-size:13px; color:#333; line-height:1.5;}
  .fd-pillars{display:grid; grid-template-columns:1fr; gap:8px; margin-bottom:16px;}
  .fd-pillar{background:var(--surface); border-radius:10px;padding:12px 14px;}
  .fd-pillar h4{font-size:12.5px; font-weight:800; color: var(--text); margin-bottom:3px;}
  .fd-pillar p{font-size:11.5px; color:var(--text); line-height:1.4;}

  .fd-snapshot{background:var(--surface); border:1px solid var(--line); padding:14px 16px; border-radius:14px;}
  .fd-snapshot-title{font-size:10.5px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:var(--text); margin-bottom:6px; font-family:var(--font-body);}
  .fd-snap-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0;}
  .fd-snap-row{padding:6px 10px 6px 0; border-bottom:1px solid var(--line);}
  .fd-snap-row .k{display:block; font-size:10px; color:var(--text); margin-bottom:1px;}
  .fd-snap-row .v{display:block; font-size:12px; font-weight:700; color:var(--text); font-family:var(--font-body);}
  @media (max-width:460px){ .fd-snap-grid{grid-template-columns:1fr;} }

  .disclosure{
    font-size: 11pt; 
    color:var(--dim-2); 
    line-height:1.5; 
    margin-top:16px;
  }

  /* ---- Active / inactive split-screen treatment ----
     Purely CSS, keyed off the same body[data-mode] the rest of the page
     already uses — no extra JS. The selected side gets its fund's color
     treatment (solid orange for ANTU, orange-outlined white for ANTY,
     matching the hero toggle buttons) and the "Selected" tag; the other
     side fades and desaturates rather than disappearing, so it's always
     obvious both funds exist and exactly which one is currently active. */
  body[data-mode="long"] .fd-column.long,
  body[data-mode="short"] .fd-column.short{
    background:#fff;
  }
  body[data-mode="long"] .fd-column.short,
  body[data-mode="short"] .fd-column.long{
    opacity:.45;
    filter:grayscale(70%);
    background:var(--surface);
  }
  body[data-mode="long"] .fd-column.short:hover,
  body[data-mode="short"] .fd-column.long:hover{
    opacity:.7;
    filter:grayscale(30%);
  }
  body[data-mode="long"] .fd-column.long{
    box-shadow:inset 0 0 0 2px #CC785C; border-radius:16px;}
  body[data-mode="short"] .fd-column.short{
    box-shadow:inset 0 0 0 2px #CC785C; border-radius:16px;}

  .insight-card{display:flex; flex-direction:column; border:1px solid var(--line); overflow:hidden; background:var(--ink); text-decoration:none; color:inherit; transition:transform .18s ease, box-shadow .18s ease;}
  .insight-card:hover{transform:translateY(-3px); box-shadow:0 16px 32px rgba(20,21,26,.08);}
  .insight-media{aspect-ratio:16/10; background:linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); display:flex; align-items:center; justify-content:center; position:relative;}
  .insight-media svg{width:34px; height:34px; opacity:.35;}
  .insight-body{padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1;}
  .insight-tag{font-family:var(--font-body); font-size:8pt; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#CC785C;}
  .insight-title{font-size:18pt; font-weight:800; line-height:1.3; color:var(--text);}
  .insight-desc{font-size:14pt; color:var(--dim); line-height:1.55; flex:1;}
  .insight-cta{font-family:var(--font-body); font-size:11pt; font-weight:700; color:#CC785C; margin-top:4px;}

  /* when there's exactly one piece of content, feature it large */
  .insights-grid > .insight-card:only-child{
    flex-direction:row; grid-column:1/-1;
  }
  .insights-grid > .insight-card:only-child .insight-media{flex:1 1 52%; aspect-ratio:5/3;}
  .insights-grid > .insight-card:only-child .insight-body{flex:1 1 48%; padding:32px 36px; justify-content:center;}
  .insights-grid > .insight-card:only-child .insight-title{font-size:26px;}
  .insights-grid > .insight-card:only-child .insight-desc{font-size:14.5px;}
  @media (max-width:700px){
    .insights-grid > .insight-card:only-child{flex-direction:column;}
    .insights-grid > .insight-card:only-child .insight-media{aspect-ratio:5/3;}
  }

  .accordion-button {
    background-color: rgba(0,0,0,0) !important;
    font-size: 14pt !important;
  }
  .accordion-item {
    background:none !important;
    font-size: 14pt !important;
  }
    .accordion-button:not(.collapsed) {
      background: var(--long) !important;
      color: var(--ink) !important;
  
    }
    .accordion-button:not(.collapsed)::after {
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
  
    }
    .accordion-button::after {
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
  }
  .faq-collapse-all{
    margin-top: 1rem;
    padding:8px 14px;
    border:1px solid var(--short);
    border-radius:4px;
    background:transparent;
    color:var(--short);
    font-family:var(--font-body);
    font-size:12px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    cursor:pointer;
    transition:background .15s, color .15s;
  }
  .faq-collapse-all:hover,
  .faq-collapse-all:focus-visible{
    background:var(--short);
    color:#fff;
  }
  .acc-item{border-bottom:1px solid var(--line);}
  .acc-q{
    width:100%;
    text-align:left;
    background:none;
    border:none;
    padding:16px 8px 16px 0;
    font-size:16px;
    font-weight:700;
    color:var(--text);
    display:flex; 
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    font-family:var(--font-body);
  }
  /*.acc-q .plus{font-family:var(--font-body); color:#CC785C; font-size:20px; transition:transform .2s;}
  .acc-item.open .plus{transform:rotate(45deg);}
  .acc-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
  .acc-a p{padding-bottom:22px; font-size:14.5px; color:var(--dim); max-width:70ch;}*/

  /* ---- signup: bold orange banner, the #1 thing we want visitors to do ---- */
  /* ---- thin signup banner: always visible, opens the popup on click ---- */

  .signup-band-thin{background:#CC785C;}
  .signup-inner-thin{display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; padding: 1rem 0;}
  .signup-text-thin{font-size:14pt; color:#fff; white-space:nowrap;}
  .signup-tick-thin{display:inline-block; font-family:var(--font-body); font-size:14pt;}
  .signup-thin-btn{background:#fff; color:#1A3302; border:none; padding:6px 16px; border-radius:5px;font-weight:800; font-size:14pt; letter-spacing:.2px; cursor:pointer; transition:transform .15s, box-shadow .15s; box-shadow:0 2px 8px rgba(0,0,0,.15);}
  .signup-thin-inline-form{display:flex; align-items:center; gap:8px;}
  .signup-thin-inline-form input[type="email"]{background:rgba(255,255,255,.18); border:1.5px solid rgba(255,255,255,.5); color:#fff; padding:6px 12px; border-radius:14px; font-size:14pt; width:170px; font-family:var(--font-body);}
  .signup-thin-inline-form input[type="email"]::placeholder{color:rgba(255,255,255,.75);}
  .signup-thin-inline-confirmed{color:#fff; font-size:14pt; font-weight:700;}
  @media (max-width:500px){ .signup-thin-inline-form input[type="email"]{width:130px;} }
  .signup-thin-btn:hover{transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.2);color:#fff; background:#1A3302;}
  @media (max-width:500px){
    .signup-inner-thin{gap:10px; padding:9px 0;}
    .signup-text-thin{font-size:14pt; white-space:normal; text-align:center;}
  }

  /* ---- shared form pieces (used inside the signup popup) ---- */
  .signup-text{flex-shrink:0;}
  .signup-text .big{font-size:18pt; color:#fff; white-space:nowrap;}
  .signup-text .small{font-size:12pt; color:#E5CBC1; margin-top:6px;}
  .signup-tick{display:inline-block; font-family:var(--font-body);}
  .signup-form{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center;}
  .seg{display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:center;}
  .seg label{display:flex; align-items:center; gap:7px; font-size:14pt; font-weight:600; color:#fff; cursor:pointer; font-family:var(--font-body);}
  .seg input{
    appearance:none; -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
    border:2px solid rgba(255,255,255,.7); background:transparent; flex-shrink:0; margin:0; position:relative; cursor:pointer;
  }
  .seg input:checked{border-color:#fff;}
  .seg input:checked::after{content:''; position:absolute; top:50%; left:50%; width:8px; height:8px; border-radius:50%; background:#c6d9b4; transform:translate(-50%,-50%);}
  .signup-form input[type="email"]{background:rgba(255,255,255,.16); border:1.5px solid var(--surface); color: var(--surface); padding:12px 16px; border-radius:16px; font-size:14pt; min-width:220px; font-family:var(--font-body);}
  .signup-form input[type="email"]::placeholder{color:rgba(255,255,255,.75);}
  .signup-form input[type="text"]{background:rgba(255,255,255,.16); border:1.5px solid var(--surface); color: var(--surface); padding:12px 16px; border-radius:16px; font-size:14pt; min-width:220px; font-family:var(--font-body);}
  .signup-form button[type="submit"]{
    font-family:var(--font-body);
    color:#1A3302;
    background:#fff;
    border:none;
    padding:13px 30px;
    border-radius:16px;
    font-size:14pt;
    letter-spacing:.2px;
    cursor:pointer;
    transition:transform .15s, box-shadow .15s;
    box-shadow:0 4px 14px rgba(0,0,0,.2);}
  .signup-form button:hover{ background:#1A3302 !important; transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.2);}
  .hsfc-Row {
    font-family:var(--font-body) !important; font-size:14pt !important;
  }
  .hsfc-Row p{
    color: var(--ink) !important;
  }
  .hsfc-ErrorAlert{
    font-family:var(--font-body) !important;
    font-size:11pt !important;
    font-style: italic !important;
    color: #E5CBC1 !important; 
  }
  .hsfc-FieldLabel__RequiredIndicator{
    font-family:var(--font-body) !important;
    color: #E5CBC1 !important; 
  }
  .hsfc-Step__Content{
    padding:0 !important;
  }
  .hsfc-DropdownOptions{
    background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:14px !important;
  }
  .hsfc-DropdownOptions ul{
    font-family:var(--font-body) !important; font-size:14pt !important; color:var(--text) !important;
  }
  .hsfc-RichText, .hsfc-FieldLabel  {
    color:#E5CBC1 !important;
    font-family:var(--font-body) !important;
    font-size:11pt !important;
  }
.hsfc-DropdownInput__Caret span {
  border-top: 6px solid var(--ink, var(--ink)) !important;
}
.hsfc-NavigationRow {
  margin-top: 0 !important;
}
  /* ---- signup confirmation popup — this is the conversion moment ---- */
  .confirm-overlay{
    display:none; position:fixed; inset:0; z-index:200; background:rgba(20,21,26,.55);
    align-items:center; justify-content:center; padding:20px;
  }
  .confirm-overlay.open{display:flex;}
  .confirm-card{
    background:#fff; border-radius:18px; padding:38px 36px; max-width:400px; width:100%;
    text-align:center; position:relative; box-shadow:0 30px 70px rgba(0,0,0,.3);
    animation:confirm-in .25s ease;
  }
  @keyframes confirm-in{ from{opacity:0; transform:scale(.94);} to{opacity:1; transform:none;} }
  .confirm-icon{
    width:52px; height:52px; border-radius:50%; background:#CC785C; color:#fff;
    display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:26px; font-weight:800;
  }
  .confirm-card h3{font-size:20px; font-weight:800; color:var(--text); margin-bottom:10px;}
  .confirm-card p{font-size:14px; color:var(--dim); line-height:1.55;}
  .confirm-close{
    position:absolute; top:14px; right:16px; background:none; border:none; font-size:20px;
    color:var(--dim-2); cursor:pointer; line-height:1;
  }
  .confirm-close:hover{color:var(--text);}

  /* ---- signup popup (alternative to the inline banner) ---- */
  .signup-popup-overlay{
    display:none;
    position:fixed;
    inset:0;
    z-index:200;
    background:rgba(20,21,26,.55);
    align-items:center;
    justify-content:center;
    padding:20px;
  }
  .signup-popup-overlay.open{display:flex;}
  .signup-popup-card{
    background:var(--long);
    border-radius:18px;
    padding:40px 36px;
    max-width:500px;
    width:100%;
    position:relative;
    box-shadow:0 30px 70px rgba(0,0,0,.35);
    animation:confirm-in .25s ease;
  }
  .signup-popup-card .signup-text{margin-bottom:24px;}
  .signup-popup-card .signup-text .big{white-space:normal;}
  .signup-popup-card .signup-form{flex-direction:column; align-items:stretch; gap:16px;}
  .signup-popup-card .seg{justify-content:center; margin:0 auto;}
  .signup-popup-card input[type="email"]{width:100%;}
  .signup-popup-card button[type="submit"]{width:100%;}
  .signup-popup-close{
    position:absolute; top:14px; right:16px; background:none; border:none; font-size:22px;
    color:rgba(255,255,255,.8); cursor:pointer; line-height:1;
  }
  .signup-popup-close:hover{color:#fff;}
  @media (max-width:600px){ .signup-popup-card{padding:28px 22px;} }
  
  .external-link-overlay {
    display:none;
    position:fixed;
    inset:0;
    z-index:200;
    background:rgba(20,21,26,.55);
    align-items:center;
    justify-content:center;
    padding:20px;
  }
  .external-link-overlay.open{display:flex;}
  .external-link-popup {
    max-width: 500px;
    width:100%;
    position: relative;
    background: var(--surface);
  }

  /* ---- footer ---- */
  footer{padding:56px 0 40px; background: linear-gradient(0deg, #F0EDE5 0%, #EFE5E0 100%);;}
  .footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-bottom:36px;}
  .footer-links{display:flex; gap:22px; font-size:11pt; color:var(--dim); flex-wrap:wrap;}
  .footer-links a{color:var(--dim); text-decoration:none; transition:color .15s;}
  .footer-links a:hover{color:var(--long);}
  .legal{color:var(--dim-2); line-height:1.75;}
  .legal p{font-size:11pt; margin-bottom:12px;}
  .legal strong{color:var(--dim);}
  .legal a{color:#CC785C; text-decoration:underline;}
  .legal a:hover{color:var(--text);}

  /* ============================================================
     HEADER RESPONSIVE STRATEGY — graduated, not all-or-nothing:
       > 1180px : full desktop spacing
       1180-980 : same items, tighter gaps/font sizes (buys room)
       980-820  : "How They Work" drops first (least essential item)
                  — dropdown + main nav stay, still tightened
       < 820px  : hamburger menu takes over entirely
     Each step only removes what it has to, so real nav links stay
     visible as long as there's genuinely room for them.
  ============================================================= */
  @media (max-width:1180px){
    .logo-tag{gap:6px;}
    .header-right{gap:14px;}
    nav{gap:16px; font-size:12.5px;}
    .dropdown-trigger, .header-link{font-size:9.5px; gap:4px;}
    .social-links{gap:6px;}
    .social-links a{width:27px; height:27px;}
    .social-links svg{width:13px; height:13px;}
    header .wrap{padding:0 16px;}
  }

  @media (max-width:980px){
    .header-link, .link-divider{display:none;}
  }

  @media (max-width:820px){
    .logo-divider, .nav-dropdown, nav{display:none;}
    .menu-toggle{display:flex;}
  }

  @media (max-width:760px){
    .wrap{padding:0 16px;}
    header{padding:16px 0;}
    .hero{padding:48px 0 0;}
    h1.headline{margin-bottom:24px;}
    .ticker-seg{padding:14px 8px 12px;}
    .ticker-seg .seg-tag{font-size:10px;}
    section{padding:44px 0;}
    .signup-text{flex-shrink:1;}
    .signup-text .big{font-size:19px; white-space:normal;}
    .signup-form{flex-direction:column; align-items:stretch; width:100%;}
    .seg{gap:12px; order:1;}
    .seg label{font-size:12px;}
    .signup-form input[type="email"]{order:2; width:100%;}
    .signup-form button{order:3; width:100%;}
    .footer-top{flex-direction:column; align-items:flex-start; gap:16px;}
  }

  @media (max-width:480px){
    h1.headline{font-size:clamp(32px,11vw,40px);}
    .ticker-toggle{padding:4px; gap:3px;}
    .ticker-seg .seg-tag{font-size:9.5px; letter-spacing:.2px;}
    .social-links{gap:8px;}
    .social-links a{width:26px; height:26px;}
    .social-links svg{width:13px; height:13px;}
    .status-badge{font-size:10.5px;}
    .stat-cell{padding:22px;}
  }