/* ═══════════════════════════════════════════════════════════
   ATTIC STANDARD SITE STYLES  v1.0.0
   The single source for every style on atticstandard.com.
   1. Design tokens
   2. Masthead, ticker band, dropdown and footer
   3. Page sections (the as- classes used by every page block)
   Change it here, publish a new version, update the version in
   the Webflow head code, and every page follows.
   ═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
     ATTIC STANDARD DESIGN TOKENS
     Declared once here, read by every embed on every page.
     Change a value here and the whole site follows.
     ═══════════════════════════════════════════════════════ */
  :root {
    /* Type families. Mono carries identifiers only (index codes,
       SKU keys, axis month letters). Everything else is Roboto. */
    --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Nine steps. Nothing on the site sits between them. */
    --fs-display: 30px;
    --fs-metric: 22px;
    --fs-title: 20px;
    --fs-subhead: 18px;
    --fs-metric-sm: 16px;
    --fs-body: 13px;
    --fs-ui: 12px;
    --fs-label: 11px;
    --fs-axis: 10px;

    /* Five text levels, loudest to quietest.
       L5 is chart furniture only and never carries a value. */
    --l1: #FFFFFF;
    --l2: #E3E3E3;
    --l3: #A0A0A0;
    --l4: #8B93A0;
    --l5: #6B727C;

    /* Surfaces and rules.
       Every pop-out sits one step above the page: nav menu,
       index selector, coverage panel, mobile contents panel.
       --surface-panel and --surface-raised hold the same value
       and both stay declared so existing embeds keep working. */
    --bg: #181A1F;
    --surface-raised: #1E2028;
    --surface-panel: #1E2028;
    --surface-chip: #252830;
    --border: #2A2D33;
    --border-soft: #24272D;

    /* Accents. Blue means you can click it, or it names an index.
       Gold is methodology and pricing. Green is movement and
       liveness, and nothing else. Categories are never coloured.

       --error is a form or feed that failed. It holds the same
       value as --down under its own name, because a rejected
       field and a fallen price are different claims and either
       may move without the other. */
    --accent: #3278FF;
    --accent-hover: #5B9EF5;
    --accent-soft: rgba(50,120,255,.08);
    --gold: #D4AF37;
    --up: #35D07F;
    --down: #E5484D;
    --flat: #E5A33D;
    --live: #00FF00;
    --error: #E5484D;

    /* Data marks. Not drawn from the text ladder, because a bar
       or a stroke is a shape and not a reading.

       --series is the plotted line, and any figure that reports
       that same series, so the number and its line pair by colour.
       --series-up and --series-dn are the area between the line
       and its baseline, washes of --series so they can never
       drift from the line they belong to.
       --bar is every single-value bar, on a --border-soft track.
       --bar-1..4 segment a whole into parts, ordered largest to
       smallest so the ramp reinforces the ordering.
       --grid is every chart grid line, --axis every axis line,
       tick and dashed baseline. Both are chart furniture and
       neither ever carries a value. */
    --series: #C6CBD3;
    --series-up: rgba(198,203,211,.06);
    --series-dn: rgba(198,203,211,.10);
    /* The earlier part of a line when one series is split into history
       and the current stretch, and secondary lines beside a lead line. */
    --series-history: #71767E;
    --bar: #E3E3E3;
    --bar-1: #E3E3E3;
    --bar-2: #A8ADB5;
    --bar-3: #71767E;
    --bar-4: #454A52;
    --grid: #24272D;
    --axis: #3A4048;

    /* Spacing. Six steps plus a section break. */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;
    --gutter: 40px;

    /* Rhythm */
    --lh-prose: 1.7;
    --lh-ui: 1.4;
    --lh-tight: 1;
    --ls-label: 1.2px;
    --ls-eyebrow: 1.8px;
    --radius: 6px;
    --radius-lg: 8px;

    /* Chrome. Two rows: a 58px masthead carrying the name and the
       navigation, and a 44px ticker band beneath it. Past the first
       screen the masthead folds and only the band remains, but this
       token holds the RESTING height, because body padding and the
       coverage panel are positioned against it and neither moves
       when the masthead folds. */
    --header-h: 102px;
  }

/* ═══════════════════════════════════════════════════════
   2. MASTHEAD, TICKER BAND, DROPDOWN AND FOOTER
   One place for all site chrome. The first block is the
   original base layer; the second refines it and wins where
   a selector repeats.
   ═══════════════════════════════════════════════════════ */
.atom-header *, .nav-dropdown * { margin: 0; padding: 0; box-sizing: border-box; }
.atom-header { align-items: center; background: var(--bg); border-bottom: none; position: fixed; top: 0; left: 0; right: 0; z-index: 9999; font-family: var(--font-sans); }
body { padding-top: var(--header-h) !important; background: var(--bg) !important; }
.w-embed { padding-left: var(--gutter); padding-right: var(--gutter); margin-bottom: var(--s7); }
.w-embed:last-child { margin-bottom: 0; }
.ticker-container { display: flex; align-items: center; flex: 1; overflow: hidden; height: 100%; font-family: var(--font-sans); background: transparent; }
.ticker-label { display: flex; align-items: center; gap: var(--s2); color: var(--l4); font-size: var(--fs-label); font-weight: 600; line-height: var(--lh-ui); padding: 0 var(--s5) 0 var(--s1); white-space: nowrap; text-transform: uppercase; letter-spacing: var(--ls-label); flex-shrink: 0; }
.live-dot { background: var(--live); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7); }
    50% { opacity: 0.5; box-shadow: 0 0 0 6px rgba(0, 255, 0, 0); }
  }
.ticker-wrap { flex: 1; overflow: hidden; padding: var(--s3) 0; }
.ticker { display: flex; will-change: transform; }
.ticker-item { display: flex; align-items: center; white-space: nowrap; padding: 0 var(--s6); color: var(--l4); font-size: var(--fs-body); line-height: var(--lh-ui); flex-shrink: 0; }
.ticker a, .ticker a:link, .ticker a:visited { color: var(--l2); text-decoration: none; }
.ticker .change-up { color: var(--up); }
.ticker .change-down { color: var(--down); }
.ticker .change-neutral { color: var(--flat); }
.menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; cursor: pointer; flex-shrink: 0; margin-left: var(--s6); border-radius: var(--radius); transition: background 0.2s ease; position: relative; z-index: 10001; }
.menu-toggle:hover { background: rgba(255, 255, 255, 0.08); }
.menu-toggle .bar { width: 20px; height: 2px; background: var(--l2); border-radius: 2px; transition: all 0.3s ease; }
.menu-toggle.active .bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.menu-toggle.active .bar:nth-child(2) { opacity: 0; }
.menu-toggle.active .bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
#navDropdown { display: block !important; text-align: left !important; }
.nav-dropdown { position: fixed; top: var(--header-h); right: 20px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s2) 0; min-width: 220px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.25s ease; z-index: 10000; font-family: var(--font-sans); }
.nav-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); }
#navDropdown a { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: var(--s3); padding: var(--s3) 20px; color: var(--l3); text-decoration: none; font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-ui); transition: all 0.15s ease; letter-spacing: 0.2px; text-align: left !important; }
#navDropdown a:hover { color: var(--l1); background: var(--accent-soft); padding-left: var(--s5); }
#navDropdown a .nav-icon { font-size: var(--fs-metric-sm); width: var(--s5); min-width: var(--s5); text-align: center; color: var(--l5); flex-shrink: 0; display: inline-block; transition: color 0.15s ease; }
#navDropdown a .nav-text { flex: 1; text-align: left; }
#navDropdown a:hover .nav-icon { color: var(--accent); }
.nav-divider { height: 1px; background: var(--border); margin: var(--s1) 0; }
.atom-footer { background: var(--bg); border-top: none; padding: var(--s6) var(--gutter) var(--s5) var(--gutter); font-family: var(--font-sans); margin-top: 0; }
.atom-footer-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--s5); }
.atom-footer-brand { display: flex; }
.atom-footer-socials { display: flex; gap: var(--s4); align-items: center; }
.atom-footer-socials a { color: var(--l4); text-decoration: none; transition: color 0.2s ease; display: flex; align-items: center; }
.atom-footer-socials a:hover { color: var(--l2); }
.atom-footer-divider { height: 1px; background: var(--border); margin-bottom: var(--s4); }
.atom-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s4); }
.atom-footer-copyright { font-size: var(--fs-ui); color: var(--l5); font-weight: 400; line-height: var(--lh-ui); }
.atom-footer-nav { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; }
.atom-footer-nav a { font-size: var(--fs-body); color: var(--l4); text-decoration: none; font-weight: 400; line-height: var(--lh-ui); transition: color 0.2s ease; white-space: nowrap; }
.atom-footer-nav a:hover { color: var(--l2); }
@media (max-width: 991px) {
  :root { --gutter: 28px; }
}
@media (max-width: 767px) {
  :root { --fs-display: 24px; --fs-metric: 20px; --fs-title: 18px; --fs-subhead: 16px; --gutter: 20px; --header-h: 94px; }
  .ticker-label { padding-right: 18px; }
  .nav-dropdown { right: var(--s4); }
  #navDropdown a { padding: var(--s3) 20px !important; gap: var(--s2) !important; }
  #navDropdown a .nav-icon { width: 26px !important; min-width: 26px !important; }
  #navDropdown a:hover { padding-left: 20px !important; }
  .atom-footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .atom-footer-nav { gap: var(--s4); }
}
@media (max-width: 478px) {
  .ticker-label { display: none; }
}
/* ═══════════════════════════════════════════════════════
     ATTIC STANDARD — MASTHEAD, TICKER BAND, FOOTER
     Two rows. The masthead carries the name and the navigation,
     the band carries the ticker at full width. Past the first
     screen the masthead collapses and only the band stays, so
     the extra height is paid on landing and nowhere else.
     Everything is declared here, after the head, so where a
     selector repeats it wins. The head needs no editing.
     ═══════════════════════════════════════════════════════ */

  /* --header-h is declared in the head block at 102 resting, 94 below
     767. It is a token and the head is the single source of truth for
     tokens; this block only reads it. */

  /* The band height is a token because three things measure against it:
     the band itself, the dropdown when the masthead has folded, and the
     index card's scroll offset when a ticker reading is clicked. */
  :root { --band-h: 44px; }

  .atom-header { display: block; height: auto; padding: 0; }

  /* ===== MASTHEAD ===== */
  .as-mast {
    height: 58px; display: flex; align-items: center;
    padding: 0 calc(var(--gutter) - 10px) 0 var(--gutter);
    gap: var(--s5);
  }

  .atom-logo { flex-shrink: 0; display: flex; align-items: center; cursor: pointer; margin-right: 0; line-height: 0; }
  .atom-logo svg { display: block; width: 254px; height: 18px; color: var(--l2); transition: color .2s ease; }
  .atom-logo:hover svg { color: var(--l1); }

  .as-nav { display: flex; align-items: center; gap: var(--s5); margin-left: auto; }
  /* Rule 6: mono carries identifiers only, and the type scale lists
     nav links at --fs-body. So these are sans, sentence case, and
     they match the dropdown rows rather than inventing a register.
     Nav hover is interaction, which is blue. */
  .as-nav a {
    font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 400;
    line-height: var(--lh-ui); color: var(--l4);
    text-decoration: none; white-space: nowrap; transition: color .18s ease;
  }
  .as-nav a:hover { color: var(--accent); }
  .as-nav a.as-login { color: var(--accent); }
  .as-nav a.as-login:hover { color: var(--accent-hover); }

  /* A hairline separates navigation from the account action. Same
     device that separates the wordmark from the ticker. */
  .as-rule { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; }

  /* Products heads MCP and Terminal in the dropdown rather than sitting
     among the pages. Group headings are --fs-label uppercase in --l5,
     the same treatment table headers use. */
  .nav-dropdown .nav-group {
    font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600;
    letter-spacing: var(--ls-label); text-transform: uppercase;
    color: var(--l5); line-height: var(--lh-ui);
    padding: var(--s3) 20px var(--s1) 20px;
  }

  /* The head gives .menu-toggle a 32px left margin, which was sized
     for a row that had no navigation in it. Inside the masthead the
     gap already spaces it, so the margin comes off. */
  .as-mast .menu-toggle { margin-left: 0; }

  /* ===== ACCOUNT ===== Replaces Log in when signed in. Pop-out on --surface-raised (Rule 8). */
  .as-acct { position: relative; flex-shrink: 0; line-height: 0; }
  .as-avatar {
    width: 28px; height: 28px; border-radius: 50%; padding: 0;
    background: transparent; border: 1px solid var(--border); cursor: pointer;
    font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600;
    line-height: 1; color: var(--l2); text-transform: uppercase;
    display: flex; align-items: center; justify-content: center;
    transition: color .15s ease, border-color .15s ease;
  }
  .as-avatar:hover, .as-avatar[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
  .as-avatar:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
  .as-acct-menu {
    position: absolute; top: calc(100% + var(--s3)); right: 0; width: 260px; z-index: 10002;
    background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 16px 42px rgba(0,0,0,.7); padding: var(--s2) 0; line-height: var(--lh-ui);
  }
  .as-acct-menu[hidden] { display: none; }
  .as-acct-who { padding: var(--s2) var(--s4) var(--s3) var(--s4); border-bottom: 1px solid var(--border); margin-bottom: var(--s2); }
  .as-acct-who span { display: block; font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--l5); }
  .as-acct-who b { display: block; margin-top: var(--s1); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 400; color: var(--l2); overflow-wrap: anywhere; }
  .as-acct-menu a, .as-acct-menu button {
    display: block; width: 100%; text-align: left; background: transparent; border: 0;
    padding: var(--s2) var(--s4); font-family: var(--font-sans); font-size: var(--fs-body);
    font-weight: 400; color: var(--l2); text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease;
  }
  .as-acct-menu a:hover, .as-acct-menu button:hover { background: var(--accent-soft); color: var(--accent); }
  .as-acct-menu a:focus-visible, .as-acct-menu button:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
  .as-acct-menu button:disabled { color: var(--l4); cursor: default; background: transparent; }

  /* ===== TICKER BAND ===== */
  /* --border-soft is the table row weight. This is a section divider
     between two structural bands, which the spec assigns to --border.
     It stays full bleed on purpose: it separates two layers of chrome
     rather than breaking a column of content, so insetting it would
     leave gaps where the two bars meet and make the header read as
     two blocks instead of one object. */
  .as-band {
    height: var(--band-h); display: flex; align-items: center;
    padding: 0 calc(var(--gutter) - 10px) 0 var(--gutter);
    border-top: 1px solid var(--border);
  }
  .as-band-logo { display: none; flex-shrink: 0; line-height: 0; }
  .as-band-logo svg { display: block; color: var(--l2); }
  /* The single line runs 184px. On a phone that leaves the ticker about
     70px, less than one reading group. The stacked lockup is 94px at 24
     tall, which hands ninety pixels back to the readings without
     dropping the name, which is what the band used to do below 478. */
  .as-band-logo .as-mark-sm { width: 184px; height: 13px; }
  .as-band-logo .as-mark-st { width: 94px; height: 24px; display: none; }
  .as-band-rule { display: none; width: 1px; height: 18px; background: var(--border); flex-shrink: 0; margin: 0 var(--s4) 0 var(--s5); }

  .atom-header .ticker-container { height: 100%; }
  .atom-header .ticker-label { padding-left: var(--s2); padding-right: var(--s5); }

  /* The wrap carried 12px top and bottom, sized for the old 68px
     header. In a 44px band that squeezes the chips into a 20px
     channel and drags the readings below true centre, which is why
     the wordmark looked high. Flex centring does the job instead. */
  .atom-header .ticker-wrap { padding: 0; display: flex; align-items: center; }

  /* The ticker is a moving strip, so it has to end in a fade
     rather than a hard cut. Without this it crops mid-value and
     reads as broken rather than as continuing. */
  .atom-header .ticker-wrap {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 40px), transparent 100%);
  }

  /* Cap height at 11px Roboto is about 7.8px, so an 8px dot has
     to break the cap line and the baseline wherever it sits.
     7px fits inside the band. Colour stays --live, which the
     system reserves for the dot and the map supply markers. */
  .live-dot { width: 7px; height: 7px; position: relative; top: -0.5px; }

  /* ===== COMPACT STATE =====
     Set by script past the first screen. The masthead folds away
     and the wordmark reappears small inside the band, so the
     identity and the readings survive at 44px. */
  .atom-header.as-compact .as-mast { height: 0; overflow: hidden; border: 0; }
  .atom-header.as-compact .as-band { border-top: 0; }
  .atom-header.as-compact .as-band-logo,
  .atom-header.as-compact .as-band-rule { display: block; }

  /* When the masthead folds it takes the menu with it, so the band
     carries its own toggle. Without this the only way back to
     navigation is scrolling to the top of the page. */
  .as-band .menu-toggle { display: none; margin-left: var(--s4); }
  .atom-header.as-compact .as-band .menu-toggle { display: flex; }

  /* The dropdown opens at top: var(--header-h), which is the resting
     height. Once the masthead folds the bar is 44px and the menu would
     hang 58px below the control that opened it, which on a phone is most
     of the header. It follows the fold instead. */
  .atom-header.as-compact ~ .nav-dropdown { top: var(--band-h); }
  .as-mast, .as-band { transition: height .18s ease; }

  /* ===== TICKER ITEMS ===== */
  .tk-code{font-family:var(--font-mono);font-size:var(--fs-ui);font-weight:600;color:var(--l2);letter-spacing:.6px;margin-right:var(--s1);transition:color .15s}
  .tk-dir{font-family:var(--font-sans);font-size:var(--fs-label);font-weight:400;color:var(--l4);line-height:var(--lh-ui);margin-right:var(--s2)}
  .tk-lvl{font-family:var(--font-sans);font-size:var(--fs-body);font-weight:600;color:var(--l1);font-variant-numeric:tabular-nums;line-height:var(--lh-ui)}
  .tk-chg{font-family:var(--font-sans);font-size:var(--fs-ui);font-weight:500;margin-left:var(--s2);font-variant-numeric:tabular-nums;line-height:var(--lh-ui)}.tk-1w{color:var(--l5);font-weight:400;font-size:var(--fs-label);margin-left:3px}
  .tk-grp{display:flex;align-items:center;flex-shrink:0;margin:0 var(--s2);padding:var(--s1) var(--s4);text-decoration:none;border-radius:var(--radius);background:rgba(255,255,255,.03);transition:background .15s}
  .tk-item{display:flex;align-items:center;white-space:nowrap;padding:0 var(--s3)}
  .tk-grp:hover{background:var(--accent-soft)}
  .tk-grp:hover .tk-code{color:var(--accent)}
  .tk-grp:hover .tk-go{opacity:1}
  .tk-go{font-family:var(--font-mono);font-size:var(--fs-ui);color:var(--accent);opacity:0;transition:opacity .15s;margin-left:var(--s1)}
  .ticker:hover{animation-play-state:paused!important}

  /* ===== FOOTER ===== */
  /* A step below the masthead. The two were both at 18px, so the
     footer read as a repeat of the header rather than as a signature
     closing the page. Width already makes it the senior element in
     this block at 226px against roughly 80px of social icons, so it
     does not need height as well. */
  .atom-footer-brand { gap: var(--s4); }
  .atom-footer-logo svg { display: block; height: 16px; width: 226px; color: var(--l2); transition: color .2s ease; }
  .atom-footer-logo:hover svg { color: var(--l1); }

  /* IOSCO line. It sits in the brand block under the socials rather
     than in the bottom row, so it belongs to the signature and never
     competes with the footer links when they wrap on narrow screens.
     Capped in width so it breaks into two even lines, not one long one. */
  .atom-footer-brand { flex-direction: column; align-items: flex-start; }
  .as-foot-std {
    margin: 0; max-width: 460px;
    font-family: var(--font-sans); font-size: var(--fs-label); line-height: 1.6;
    color: var(--l5); text-wrap: pretty;
  }
  .as-foot-std a { color: var(--accent); text-decoration: none; white-space: nowrap; transition: color .18s ease; }
  .as-foot-std a:hover { color: var(--accent-hover); }

  /* Footer links in three labelled groups beside the signature, so they never
     wrap into a ragged line: Benchmark, Products (the header's own grouping)
     and Company. Group headings take the dropdown's group-heading style
     (--fs-label uppercase in --l5); links are nav links (--fs-body, --l4,
     hovering to --accent). Legal links join the copyright line. Home is
     dropped: the wordmark above is the link home. */
  .atom-footer .atom-footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s7); }
  .atom-footer-groups { display: grid; grid-template-columns: repeat(3, minmax(110px, auto)); column-gap: 64px; }
  .atom-footer-group { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .atom-footer-gh { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--l5); line-height: var(--lh-ui); margin-bottom: 2px; }
  .atom-footer-group a { font-family: var(--font-sans); font-size: var(--fs-body); color: var(--l4); text-decoration: none; line-height: var(--lh-ui); transition: color .18s ease; }
  .atom-footer-group a:hover { color: var(--accent); }
  .atom-footer .atom-footer-legal { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
  .atom-footer .atom-footer-legal a { font-size: var(--fs-ui); color: var(--l5); text-decoration: none; transition: color .18s ease; }
  .atom-footer .atom-footer-legal a:hover { color: var(--accent); }
  @media (max-width: 991px) {
    .atom-footer .atom-footer-top { flex-direction: column; gap: var(--s6); }
  }
  @media (max-width: 478px) {
    .atom-footer-groups { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s4); }
    .atom-footer .atom-footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  }
  @media (prefers-reduced-motion: reduce) {
    .atom-footer-group a, .atom-footer .atom-footer-legal a { transition: none; }
  }

  /* ═══ RESPONSIVE ═══
     Breakpoints match Webflow's own, so a block and the container
     around it never disagree by a pixel. The visible navigation is
     the first thing to go, and it survives to 767 rather than 900
     because a tablet has room for it; everything in it also lives
     in the dropdown, so nothing is lost. */
  @media (max-width: 767px) {
    .as-nav { display: none; }
    .as-mast .menu-toggle { margin-left: auto; }
    .as-mast { height: 50px; }
    .atom-logo svg { width: 226px; height: 16px; }
    .atom-footer-logo svg { height: 15px; width: 212px; }
  }
  @media (max-width: 478px) {
    .atom-logo svg { width: 212px; height: 15px; }
    .atom-footer-logo svg { height: 14px; width: 198px; }
    /* The head block has already dropped the ticker label here. The rule
       goes too, and the mark switches to the stacked lockup, so the name
       stays and the readings still get most of the row. */
    .as-band-rule { display: none !important; }
    .as-band-logo { margin-right: var(--s4); }
    .as-band-logo .as-mark-sm { display: none; }
    .as-band-logo .as-mark-st { display: block; }
  }
.as-foot-status{display:inline-flex;align-items:center;gap:var(--s2);padding:5px var(--s3);border:1px solid var(--border);border-radius:999px;font-family:var(--font-sans);font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--l3);text-decoration:none;transition:color .18s ease,border-color .18s ease}
  .as-foot-status:hover{color:var(--accent);border-color:var(--accent)}
  .as-foot-status .as-st-dot{width:7px;height:7px;border-radius:50%;background:var(--l5);flex-shrink:0}
  .as-foot-status .as-st-go{color:var(--l5)}

/* ═══════════════════════════════════════════════════════════
   3. PAGE SECTIONS
   Rules for every page (set November 10, 2026):
   - A block is one embed whose root is .as-hero or .as-sec.
   - Section shape: title, one-line subtitle, content, footnote
     where it carries data, then one link bottom left.
   - Story tabs (.as-ds) for separate topics read in sequence;
     toggle buttons (.as-vt) for views of the same chart or table.
   - A legend sits with its chart or table, never with the toggles.
   - Every chart is drawn with AS.chart in as-site.js.
   ═══════════════════════════════════════════════════════════ */
/* Base for every new-system block. The base rules use :where() so they carry
   no extra weight and every component class below always wins over them. A block is one Webflow embed whose root is
   .as-hero or .as-sec; the embed supplies the side gutter, the block supplies
   its own vertical rhythm, so the embed's default bottom margin is switched off. */
.w-embed:has(> .as-sec),.w-embed:has(> .as-hero){margin-bottom:0}
.as-hero,.as-sec{box-sizing:border-box;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-prose);color:var(--l3);-webkit-font-smoothing:antialiased}
:where(.as-hero,.as-sec) *{box-sizing:border-box}
:where(.as-hero,.as-sec) a{color:var(--accent);text-decoration:none}
:where(.as-hero,.as-sec) a:hover{color:var(--accent-hover)}
:where(.as-hero,.as-sec) a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
:where(.as-hero,.as-sec) svg{display:block}
.as-vx *{vector-effect:non-scaling-stroke}
.as-sec{margin:0;border-top:1px solid var(--border);padding:var(--s7) 0 calc(var(--s7) + var(--s6));display:flex;flex-direction:column;gap:var(--s6)}
.as-sh{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s5);flex-wrap:wrap}
.as-st{margin:0;font-size:var(--fs-title);font-weight:600;color:var(--l1);line-height:var(--lh-ui);max-width:760px;text-wrap:balance}
.as-ss{margin:var(--s1) 0 0;font-size:var(--fs-ui);color:var(--l4);line-height:var(--lh-ui)}
.as-prose{margin:0;font-size:var(--fs-body);line-height:var(--lh-prose);color:var(--l3);max-width:640px}
.as-lbl{font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--l4);line-height:var(--lh-ui)}
.as-metric{font-size:var(--fs-metric);font-weight:600;color:var(--l1);line-height:var(--lh-tight);font-variant-numeric:tabular-nums}
.as-sub{font-size:var(--fs-subhead);font-weight:600;color:var(--l2);line-height:var(--lh-ui)}
.as-callout{border-left:2px solid var(--gold);padding-left:var(--s3);color:var(--l2);font-size:var(--fs-body);line-height:var(--lh-prose)}
.as-note{font-size:var(--fs-ui);color:var(--l4);line-height:var(--lh-ui)}
.as-btn{display:inline-block;font-size:var(--fs-body);font-weight:600;padding:var(--s3) var(--s6);border-radius:var(--radius);line-height:1;border:1px solid var(--accent)}
.as-btn-p{background:var(--accent);color:var(--l1)}.as-btn-p:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--l1)}
.as-btn-s{color:var(--accent)}.as-btn-s:hover{background:var(--accent-soft);color:var(--accent-hover);border-color:var(--accent-hover)}
.as-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7)}
.as-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7)}
.as-g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6)}
.as-g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s5)}
.as-item{display:flex;flex-direction:column;gap:var(--s3);padding-top:var(--s5);border-top:1px solid var(--border-soft);min-width:0}
.as-f-l1{fill:var(--l1)}.as-f-l2{fill:var(--l2)}.as-f-l4{fill:var(--l4)}.as-f-l5{fill:var(--l5)}.as-f-series{fill:var(--series)}.as-f-bar1{fill:var(--bar-1)}.as-f-bar3{fill:var(--bar-3)}.as-f-bar4{fill:var(--bar-4)}.as-f-track{fill:var(--border-soft)}.as-f-bg{fill:var(--bg)}
.as-s-series{stroke:var(--series)}.as-s-hist{stroke:var(--series-history)}.as-s-bar4{stroke:var(--bar-4)}.as-s-bar3{stroke:var(--bar-3)}.as-s-axis{stroke:var(--axis)}.as-s-grid{stroke:var(--grid)}.as-s-border{stroke:var(--border)}
.as-th{font-size:var(--fs-label);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--l5);line-height:var(--lh-ui)}
@media (max-width:991px){.as-g5{grid-template-columns:repeat(2,minmax(0,1fr))}.as-g4{grid-template-columns:repeat(2,minmax(0,1fr))}.as-g3,.as-g2{grid-template-columns:minmax(0,1fr)}.as-hero{grid-template-columns:minmax(0,1fr) !important}}
@media (max-width:480px){.as-g5,.as-g4{grid-template-columns:minmax(0,1fr)}}
.as-lgr{display:none;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s3)}
.as-lg{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--l4);white-space:nowrap}
.as-lg-k{width:16px;height:2px;flex-shrink:0}
.as-lg-m{display:none}
@media (max-width:991px){.as-lgr{display:flex}.as-dl{display:none}}
@media (max-width:768px){.as-cf{display:none}.as-lg-m{display:flex}}
.as-ds{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s5)}
.as-ds-t{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:var(--s2);padding-bottom:var(--s2);min-width:0}
.as-ds-t:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.as-ds-bar{display:block;height:2px;background:var(--border);margin-bottom:var(--s3);overflow:hidden}
.as-ds-fill{display:block;height:2px;width:0;background:var(--accent)}
.as-dsw{display:flex;flex-direction:column;gap:var(--s6)}
.as-dsw:hover .as-ds-fill,.as-dsw:focus-within .as-ds-fill{animation-play-state:paused}
@keyframes as-dsfill{from{width:0}to{width:100%}}
.as-ds-n{font-size:var(--fs-subhead);font-weight:600;line-height:var(--lh-ui);color:var(--l3);transition:color .15s}
.as-ds-t:hover .as-ds-n{color:var(--l1)}
.as-ds-s{font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--l4)}
.as-ds-c{margin:0;font-size:var(--fs-body);font-weight:400;line-height:var(--lh-prose);color:var(--l2)}
.as-ds-c strong{font-weight:600;color:var(--l1)}
.as-ds-p{display:flex;flex-direction:column;gap:var(--s5);min-width:0}
.as-ds-p svg{width:100%;height:auto}
@media (max-width:991px){.as-ds{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s2)}.as-ds-t{scroll-snap-align:start}}
.as-sf{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);margin-top:calc(var(--s7) - var(--s6))}
.as-sf .as-note{margin:0}
.as-sf-a{font-size:var(--fs-body);line-height:var(--lh-ui)}
.as-cv-num{font-size:var(--fs-metric);font-weight:600;line-height:var(--lh-tight);color:var(--l1);font-variant-numeric:tabular-nums}
.as-cv-lab{font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--l4)}
.as-cv-key{position:absolute;left:0;bottom:6%;display:flex;flex-direction:column;gap:var(--s4)}
.as-cv-kg{display:grid;grid-template-columns:repeat(2,auto);gap:var(--s4) var(--s6)}
.as-cv-ki{display:flex;flex-direction:column;gap:var(--s1)}
.as-cv-ki .as-cv-num{font-size:var(--fs-display);font-weight:600;line-height:1}
.as-cv-leg{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-label);color:var(--l4)}
.as-cv-map .as-cv-leg svg{width:44px;height:16px;flex-shrink:0}
@media (max-width:991px){.as-cv-key{position:static;margin-top:var(--s5)}.as-cv-kg{grid-template-columns:repeat(4,auto)}}
.as-cv-map{position:relative;width:100%}
.as-cv-map svg{width:100%;height:auto}
.as-cv-co{fill:#1E2028;stroke:#1E2028;stroke-width:.4}
.as-cv-lit{fill:#2A55A9;stroke:#2A55A9}
.as-cv-lead{stroke:rgba(0,255,0,.3);stroke-width:.9;vector-effect:non-scaling-stroke}
.as-cv-halo{fill:rgba(0,255,0,.1)}
.as-cv-ring{fill:none;stroke:rgba(0,255,0,.45);stroke-width:1;vector-effect:non-scaling-stroke}
.as-cv-core{fill:var(--live)}
.as-cv-pulse{fill:rgba(0,255,0,.32);transform-box:fill-box;transform-origin:center;animation:as-cvPulse 2.6s ease-out infinite}
@keyframes as-cvPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(5);opacity:0}}
.as-cv-lbls{position:absolute;inset:0;pointer-events:none}
.as-cv-lbl{position:absolute;display:flex;align-items:baseline;gap:5px;background:rgba(24,26,31,.88);padding:3px 7px;border-radius:4px;white-space:nowrap;line-height:14px}
.as-cv-l{transform:translate(-100%,-50%)}.as-cv-r{transform:translate(0,-50%)}.as-cv-c{transform:translate(-50%,-50%)}
.as-cv-n{font-size:var(--fs-label);font-weight:600;letter-spacing:.4px;color:var(--l2)}
.as-cv-v{font-size:var(--fs-label);font-weight:600;color:var(--l1);font-variant-numeric:tabular-nums}
.as-cv-u{font-size:var(--fs-label);color:var(--l4)}
@media (max-width:991px){.as-cv-lbls{display:none}}
.as-mb{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s7);align-items:center}
.as-mb-seal{width:220px;height:220px}
.as-mb-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
.as-mb-i{display:flex;flex-direction:column;gap:var(--s2);padding-left:var(--s4);border-left:1px solid var(--border)}
@media (max-width:991px){.as-mb{grid-template-columns:minmax(0,1fr);justify-items:start}.as-mb-l{grid-template-columns:minmax(0,1fr)}}
.as-mk-live{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--l2)}
.as-ib-live{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--l4)}
.as-code{font-family:var(--font-mono);font-size:var(--fs-ui);font-weight:600;letter-spacing:.6px;white-space:nowrap;color:var(--accent)}
.as-hm-g{display:flex;justify-content:space-between;gap:var(--s7);flex-wrap:wrap}
.as-hm{display:flex;flex-direction:column;gap:4px}
.as-hm-r{display:grid;grid-template-columns:60px 134px repeat(3,142px);gap:4px var(--s2);align-items:center;font-variant-numeric:tabular-nums}
.as-hm-h{margin-bottom:2px}
.as-hm-f{padding:var(--s3) 0 2px}
.as-hm-n{display:flex;flex-direction:column;font-size:var(--fs-body);line-height:1.2;color:var(--l3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-hm-u{font-size:var(--fs-axis);color:var(--l5)}
.as-vt{display:inline-flex;gap:var(--s1);padding:3px;border:1px solid var(--border);border-radius:var(--radius);margin-right:var(--s2)}
.as-vt-b{all:unset;cursor:pointer;font-size:var(--fs-ui);font-weight:600;line-height:1;padding:7px var(--s3);border-radius:4px;color:var(--l4);transition:color .15s,background .15s}
.as-vt-b:hover{color:var(--l1)}
.as-vt-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.as-hm-c{height:36px;box-sizing:border-box;border-radius:4px;display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:0 6px}
.as-hm-c > span{line-height:36px}
.as-hm-l{font-size:var(--fs-body);font-weight:600;color:var(--l1)}
.as-hm-p{font-size:var(--fs-label);color:var(--l2);white-space:nowrap;font-variant-numeric:tabular-nums}
.as-hm-e{background:transparent;border:1px dashed var(--border)}
.as-hm-k{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;font-size:var(--fs-label);color:var(--l4);margin-left:auto}
.as-hm-k span:first-child{margin-right:var(--s2)}
.as-hm-sw{display:inline-block;width:22px;height:12px;border-radius:2px;margin-left:var(--s3)}
@media (max-width:768px){.as-hm-g{display:grid;grid-template-columns:minmax(0,1fr)}.as-hm{overflow-x:auto;min-width:0}.as-hm-k{margin-left:0}}
.as-card{display:flex;flex-direction:column;gap:var(--s4);background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--s6);min-width:0}
.as-pl{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s2)}
.as-pl li{font-size:var(--fs-body);line-height:var(--lh-ui);color:var(--l2);padding-left:var(--s4);position:relative}
.as-pl li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:1px;background:var(--l4)}
.as-pb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7);align-items:stretch}
.as-pb-p{display:flex;gap:var(--s5);align-items:flex-start;color:inherit;min-width:0}
.as-pb-cv{flex:0 0 207px;height:293px;box-sizing:border-box;border:1px solid var(--axis);border-radius:2px;padding:18px 16px 15px;display:flex;flex-direction:column;transition:border-color .15s}
.as-pb-cv .as-wm{color:var(--l2);line-height:0}.as-pb-cv .as-wm svg{height:9px;width:auto}
.as-pb-cv .as-crule{height:1px;background:var(--border);margin:13px 0 18px}
.as-pb-cv .as-ck{font-size:9px;font-weight:600;letter-spacing:1px;line-height:1.2;color:var(--gold);text-transform:uppercase}
.as-pb-cv .as-ct{font-size:20px;font-weight:600;color:var(--l1);line-height:1.2;margin-top:11px}
.as-pb-cv .as-cs{font-size:10px;color:var(--l4);line-height:1.45;margin-top:11px}
.as-pb-cv .as-cf{margin-top:auto;border-top:1px solid var(--border-soft);padding-top:7px;font-size:8.5px;line-height:1.2;color:var(--l5);display:flex;justify-content:space-between}
.as-pb-x{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.as-pb-hd{display:flex;flex-direction:column;gap:var(--s4)}
.as-pb-p .as-sub{transition:color .15s}
.as-pb-p:hover .as-sub{color:var(--accent-hover) !important}.as-pb-p:hover .as-pb-cv{border-color:var(--l5)}
.as-pb-go{font-size:var(--fs-body);line-height:var(--lh-ui);color:var(--accent)}
.as-pb-p:hover .as-pb-go,.as-pb-r:hover .as-pb-go{color:var(--accent-hover)}
.as-pb-l{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.as-pb-rs{flex:1;display:grid;grid-auto-rows:1fr;border-bottom:1px solid var(--border-soft)}
.as-pb-r{display:grid;grid-template-columns:128px minmax(0,1fr) 16px;gap:var(--s4);align-items:baseline;padding:var(--s3) 0;border-top:1px solid var(--border-soft);color:var(--l2)}
.as-pb-r:hover{color:var(--l1)}
.as-pb-d{font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--l4);font-variant-numeric:tabular-nums;white-space:nowrap}
.as-pb-h{font-size:var(--fs-body);line-height:var(--lh-ui)}
.as-pb-r .as-pb-go{text-align:right}
@media (max-width:991px){.as-pb{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.as-pb-p{flex-direction:column}.as-pb-rs{grid-auto-rows:auto}.as-pb-r{grid-template-columns:minmax(0,1fr) 16px;row-gap:2px}.as-pb-d{grid-column:1;grid-row:1}.as-pb-h{grid-column:1;grid-row:2}.as-pb-r .as-pb-go{grid-column:2;grid-row:1/span 2;align-self:center}}
.as-cl{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--s7);align-items:start}
.as-cl-k{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.as-cl-n{font-size:var(--fs-display);font-weight:600;line-height:1;color:var(--l1);font-variant-numeric:tabular-nums}
.as-cl-c{min-width:0}.as-cl-c svg{width:100%;height:auto}
.as-cl-d{text-wrap:balance}
.as-cl-lg{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.as-cl-c{display:flex;flex-direction:column;gap:var(--s3)}
@media (max-width:991px){.as-cl-lg{justify-content:flex-start}}
.as-cl-t .as-vt-b{white-space:nowrap;flex-shrink:0}
@media (max-width:768px){.as-cl-t{max-width:100%;box-sizing:border-box;overflow-x:auto;margin-right:0}}
.as-hm-k .as-lg{gap:var(--s2)}
@media (max-width:991px){.as-cl{grid-template-columns:minmax(0,1fr)}}
.as-hm-w{display:flex;flex-direction:column;gap:var(--s3)}
.as-hm-lg{display:flex;justify-content:flex-end}
.as-hm-lg .as-hm-k{margin-left:0}
@media (max-width:768px){.as-hm-lg{justify-content:flex-start}}
@media (prefers-reduced-motion:reduce){.as-hero *,.as-sec *{transition:none !important;animation:none !important}}