/* v6 asset page (asset.js): laid out like a car maker's model page, in BlackNull's colours and fonts. */
.as { font-family: "Inter", system-ui, sans-serif; font-size: 17px; line-height: 1.6; font-variant-numeric: tabular-nums; overflow-x: clip; }
.as h1, .as h2, .as h3, .as h4 { font-family: var(--hm-fh, "Inter Tight", "Inter", sans-serif); letter-spacing: -0.015em; }
.as .up { color: #0a7a3b; } .as .down { color: #b42318; }
.as-muted { color: var(--muted); }
main#as.as { max-width: none; margin: 0; padding: 0; }
.as-wait { max-width: 720px; margin: 0 auto; padding: 120px 24px; text-align: center; }
.as-center { text-align: center; }
.as svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons: black (main), outline, white pill on dark. */
.as-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 28px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); font: 600 16px "Inter", sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: none; }
.as .as-btn:hover:not(:disabled) { box-shadow: none; }
.as .as-btn.dark { background: #0b0b0b; border-color: #0b0b0b; color: #fff; }
.as .as-btn.dark:hover:not(:disabled) { background: #FF4713; border-color: #FF4713; color: #fff; }
.as .as-btn.line-dark { background: transparent; border-color: #0b0b0b; color: #0b0b0b; }
.as .as-btn.line-dark:hover:not(:disabled) { background: #0b0b0b; color: #fff; border-color: #0b0b0b; }
.as .as-btn.line { background: transparent; border-color: rgba(255,255,255,.9); color: #fff; }
.as .as-btn.line:hover:not(:disabled) { background: #fff; color: #0b0b0b; border-color: #fff; }
.as .as-btn.pill { background: #fff; border-color: #fff; color: #0b0b0b; }
.as .as-btn.pill:hover:not(:disabled) { background: #FF4713; border-color: #FF4713; color: #fff; }
.as-btn:disabled { opacity: .45; cursor: not-allowed; }
.as-btn.small { min-height: 38px; padding: 0 18px; font-size: 14px; }
.as-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.as-cta.center { justify-content: center; }
.as-eyebrow { margin: 0 0 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #FF4713; font-size: 13px; }
.as-h { margin: 0 0 16px; font-size: clamp(30px, 3.8vw, 52px); line-height: 1.05; font-weight: 800; }
.as-subcopy { margin: 0 auto; max-width: 760px; font-size: 19px; line-height: 1.55; color: var(--muted); }
.as-num { color: inherit; text-decoration: underline dotted 1px; text-underline-offset: 3px; }
.as-num sup, .as-fn, .as-stat sup, .as-price sup { font-size: .6em; font-weight: 700; margin-left: 1px; }
.as-num sup { color: #FF4713; }
.as-fn a { color: inherit; }

/* Hero: full-width photo, name and live price bottom-left. */
.as-hero { position: relative; height: clamp(520px, 86vh, 860px); background: #0b0b0b; color: #fff; overflow: hidden; }
.as-hero-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: flex; font-size: clamp(60px, 12vw, 160px); }
.as-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%); pointer-events: none; }
.as-hero-txt { position: absolute; z-index: 1; left: max(40px, calc((100vw - 1320px) / 2 + 40px)); right: 40px; bottom: 112px; }
.as-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.as-tags span { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.as-tags span + span::before { content: "·"; margin-right: 8px; opacity: .7; }
.as-hero h1 { margin: 0; font-size: clamp(44px, 7vw, 96px); line-height: .98; font-weight: 800; letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.as-ticker { font-size: .32em; font-weight: 700; letter-spacing: .06em; border: 1.5px solid rgba(255,255,255,.75); border-radius: 6px; padding: 2px 10px; }
.as-price { margin: 16px 0 0; min-height: 34px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.as-price b { font: 800 30px/1 var(--hm-fh, "Inter Tight", sans-serif); }
.as-price sup a { color: inherit; text-decoration: none; }
.as-price .as-ch { font-weight: 700; font-size: 16px; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.92); }
.as-price small { font-size: 14px; opacity: .85; }

/* Section bar: sits on the hero's bottom edge, pins as a black bar. */
.as-subnav { position: sticky; top: 0; z-index: 60; margin-top: -72px; height: 72px; color: #fff; background: rgba(0,0,0,.38); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .2s; }
.as-subnav.stuck { background: #000; }
.as-subnav-in { max-width: 1320px; height: 100%; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; gap: 20px; }
.as-switch { position: relative; flex: none; }
.as-switch summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; font: 800 18px var(--hm-fh, "Inter Tight", sans-serif); white-space: nowrap; max-width: 230px; }
.as-switch summary span { overflow: hidden; text-overflow: ellipsis; }
.as-switch summary::-webkit-details-marker { display: none; }
.as-caret { width: 16px; height: 16px; flex: none; transition: transform .15s; }
.as-switch[open] .as-caret { transform: rotate(180deg); }
.as-switch-menu { position: absolute; top: calc(100% + 18px); left: 0; min-width: 280px; max-height: 60vh; overflow: auto; background: #fff; color: #0b0b0b; border-radius: 14px; padding: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.as-switch-menu p { margin: 4px 10px 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b6b6b; }
.as-switch-menu a { display: flex; justify-content: space-between; gap: 12px; padding: 10px; border-radius: 8px; color: inherit; text-decoration: none; font-weight: 600; font-size: 15px; }
.as-switch-menu a:hover { background: #f2f2f2; }
.as-switch-menu a[aria-current] { background: #0b0b0b; color: #fff; }
.as-switch-menu small { color: inherit; opacity: .6; font-weight: 700; }
.as-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; flex: 1; min-width: 0; height: 100%; }
.as-links li { position: relative; display: flex; }
.as-links a[data-nav] { display: flex; align-items: center; gap: 4px; padding: 0 12px; font-size: 15px; font-weight: 600; color: rgba(255,255,255,.82); text-decoration: none; border-bottom: 3px solid transparent; border-top: 3px solid transparent; white-space: nowrap; }
.as-links a[data-nav]:hover { color: #fff; }
.as-links a[aria-current="true"] { color: #fff; border-bottom-color: #fff; }
.as-dd-menu { position: absolute; top: 100%; left: 0; min-width: 190px; background: #000; padding: 8px; border-radius: 0 0 12px 12px; display: none; }
.as-dd:hover .as-dd-menu, .as-dd:focus-within .as-dd-menu { display: block; }
.as-dd-menu a { display: block; padding: 10px 12px; color: #fff; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 6px; }
.as-dd-menu a:hover { background: rgba(255,255,255,.12); }
.as-subnav-cta { display: flex; gap: 10px; flex: none; }
.as-subnav-cta .as-btn { min-height: 42px; padding: 0 22px; font-size: 15px; }

/* Sections. */
.as-sec { max-width: 1320px; margin: 0 auto; padding: 88px 40px; scroll-margin-top: 72px; }
.as-feature, .as-stats, .as-riskband, .as-notes { scroll-margin-top: 72px; }
#overview { padding-bottom: 32px; }
.as-slogan { margin: 0 auto 16px; max-width: 900px; font-size: clamp(36px, 5vw, 64px); line-height: 1.03; font-weight: 800; letter-spacing: -0.03em; }

/* Price chart. */
.as-perf { padding-top: 24px; }
.as-chart-card { max-width: 1080px; margin: 0 auto; border: 1px solid var(--line); border-radius: 20px; padding: 24px 28px; background: var(--paper); }
.as-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; font-size: 15px; }
.as-ranges { display: flex; gap: 4px; background: var(--soft); border-radius: 999px; padding: 4px; }
.as .as-ranges button { font: 600 13px "Inter", sans-serif; padding: 7px 16px; border: 0; border-radius: 999px; background: none; color: var(--ink); box-shadow: none; min-height: 0; }
.as .as-ranges button:hover:not(:disabled) { box-shadow: none; background: var(--paper); border: 0; }
.as .as-ranges button[aria-pressed="true"], .as .as-ranges button[aria-pressed="true"]:hover:not(:disabled) { background: #0b0b0b; color: #fff; }
.as-chart { min-height: 240px; }
.as-chart svg { width: 100%; height: auto; display: block; font-size: 22px; fill: var(--muted); stroke-width: initial; }
.as-chart-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.as-returns { display: flex; gap: 32px; margin: 0; flex-wrap: wrap; }
.as-returns dt { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.as-returns dd { margin: 0; font-size: 22px; font-weight: 800; }
.as-score { display: flex; align-items: center; gap: 14px; }
.as-score > div:nth-child(2) { display: flex; flex-direction: column; font-size: 15px; line-height: 1.3; }
.as-score small { color: var(--muted); font-size: 13px; }
.as-gauge { --v: 0; width: 54px; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; background: radial-gradient(closest-side, var(--paper) 74%, transparent 75%), conic-gradient(#FF4713 calc(var(--v) * 1%), var(--soft) 0); }
.as-gauge b { font: 800 17px/1 var(--hm-fh, "Inter Tight", sans-serif); }

/* Dark key-stats strip. */
.as-stats { background: #1c1a19; color: #fff; }
.as-stats-in { max-width: 1320px; margin: 0 auto; padding: 72px 40px 64px; }
.as-stats h2 { margin: 0 0 36px; font-size: clamp(30px, 3.8vw, 52px); line-height: 1.05; font-weight: 800; }
.as-stats dl { margin: 0 0 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.as-stats dl > div { padding: 0 24px 0 0; }
.as-stats dl > div + div { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.18); }
.as-stats dt { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.as-stats dd { margin: 6px 0 4px; font: 800 clamp(26px, 3vw, 40px)/1.1 var(--hm-fh, "Inter Tight", "Inter", sans-serif); }
.as-stats dd.up { color: #4ade80; } .as-stats dd.down { color: #ff8a80; }
.as-stats dd a { color: inherit; text-decoration: none; }
.as-stats dl span { font-size: 13px; color: rgba(255,255,255,.62); }

/* Research mosaic with tabs. */
.as-tabs { display: flex; justify-content: center; gap: 6px; margin: 8px 0 32px; flex-wrap: wrap; }
.as .as-tabs button { font: 600 15px "Inter", sans-serif; padding: 10px 22px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); box-shadow: none; }
.as .as-tabs button:hover:not(:disabled) { border-color: var(--ink); box-shadow: none; }
.as .as-tabs button[aria-selected="true"] { background: #0b0b0b; color: #fff; border-color: #0b0b0b; }
.as-tabpanel { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: 260px 260px; gap: 16px; }
.as-tabpanel[hidden] { display: none; }
.as-mo { position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: var(--soft); }
.as-mo img, .as-mo .bn-tile { width: 100%; height: 100%; object-fit: cover; display: flex; }
.as-mo.big { grid-row: span 2; }
.as-mo.text { grid-column: span 2; padding: 28px 32px; overflow: auto; font-size: 16px; }
.as-mo.text p { margin: 0 0 12px; }
.as-mo.text ol { margin: 0; padding-left: 22px; font: 700 20px/1.4 var(--hm-fh, "Inter Tight", sans-serif); }
.as-mo.text li { margin: 6px 0; } .as-mo.text li a { color: var(--ink); }
.as-mo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; color: #fff; font-size: 15px; line-height: 1.4; font-weight: 600; background: linear-gradient(180deg, transparent, rgba(0,0,0,.78)); }
.as-soon { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.as-soon-img { aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: var(--soft); }
.as-soon-img img, .as-soon-img .bn-tile { width: 100%; height: 100%; object-fit: cover; display: flex; }
.as-soon .as-subcopy { margin: 0; }

/* One feature section per point of the investment case. */
.as-feature { background: var(--soft); padding: 88px 0 0; }
.as-feature.full { background: var(--paper); }
.as-feature-txt { max-width: 860px; margin: 0 auto; padding: 0 40px 40px; }
.as-feature-t { margin: -6px 0 12px; font-weight: 600; color: var(--ink); }
.as-feature .as-subcopy { margin-bottom: 20px; }
.as-more-body { text-align: left; max-width: 760px; margin: 0 auto 18px; font-size: 16px; color: var(--muted); }
.as-more-body p { margin: 0 0 10px; }
.as-collage { max-width: 1320px; margin: 0 auto; padding: 0 40px 88px; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 250px 250px; gap: 16px; }
.as-collage > div { position: relative; border-radius: 18px; overflow: hidden; background: var(--soft); }
.as-collage .c1 { grid-row: span 2; }
.as-collage img, .as-collage .bn-tile, .as-bleed img, .as-bleed .bn-tile { width: 100%; height: 100%; object-fit: cover; display: flex; }
.as-overlay { position: absolute; left: 24px; bottom: 24px; background: rgba(0,0,0,.66); color: #fff; padding: 16px 20px; border-radius: 14px; backdrop-filter: blur(6px); }
.as-stat { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.as-stat b { font: 800 clamp(34px, 4vw, 56px)/1 var(--hm-fh, "Inter Tight", sans-serif); }
.as-stat a { color: inherit; text-decoration: none; }
.as-stat span { font-size: 14px; opacity: .85; }
.as-bleed { position: relative; height: clamp(360px, 62vh, 640px); }
.as-bleed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.66), rgba(0,0,0,0) 60%); }
.as-bleed-txt { position: absolute; z-index: 1; left: max(40px, calc((100vw - 1320px) / 2 + 40px)); bottom: 48px; color: #fff; max-width: 520px; }
.as-bleed-txt .as-stat span { font-size: 17px; }

/* Catalyst cards and the compare scroller. */
.as-row-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 28px; }
.as-row-head .as-h { margin: 0; }
.as-car-btns { display: flex; gap: 8px; }
.as button.as-car { width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1.5px solid #0b0b0b; background: transparent; color: #0b0b0b; display: grid; place-content: center; box-shadow: none; }
.as button.as-car:hover:not(:disabled) { background: #0b0b0b; color: #fff; box-shadow: none; border-color: #0b0b0b; }
.as-car svg { width: 18px; height: 18px; }
.as-car.prev svg { transform: rotate(180deg); }
.as-cat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.as-cat-card h3 { margin: 18px 0 4px; font-size: 21px; line-height: 1.2; font-weight: 800; }
.as-cat-t { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
.as-cat-card > p { margin: 0 0 10px; font-size: 15px; color: var(--muted); line-height: 1.5; }
.as-cat-card .as-more-body { font-size: 15px; }
.as-cat-img { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--soft); }
.as-cat-img img, .as-cat-img .bn-tile { width: 100%; height: 100%; object-fit: cover; display: flex; }
.as-chip { position: absolute; left: 12px; top: 12px; background: #fff; color: #0b0b0b; font-weight: 800; font-size: 14px; padding: 5px 12px; border-radius: 999px; }
.as-chip a { color: #FF4713; }
.as button.as-link { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--ink); font: 700 15px "Inter", sans-serif; text-decoration: underline; text-underline-offset: 4px; box-shadow: none; min-height: 0; }
.as button.as-link:hover:not(:disabled) { color: #FF4713; box-shadow: none; border: 0; }
.as-link svg { width: 15px; height: 15px; }
.as-compare { max-width: none; background: var(--soft); padding-left: max(40px, calc((100vw - 1240px) / 2)); padding-right: 0; }
.as-compare .as-row-head { padding-right: max(40px, calc((100vw - 1240px) / 2)); }
.as-trims { display: grid; grid-auto-flow: column; grid-auto-columns: 300px; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px max(40px, calc((100vw - 1240px) / 2)) 16px 0; scrollbar-width: thin; }
.as-trim { scroll-snap-align: start; background: var(--paper); border-radius: 18px; padding: 16px 16px 20px; display: flex; flex-direction: column; border: 1.5px solid transparent; }
.as-trim.cur { border-color: #0b0b0b; }
.as-trim-img { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--soft); }
.as-trim-img img, .as-trim-img .bn-tile { width: 100%; height: 100%; object-fit: cover; display: flex; }
.as-trim-tag { margin: 14px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.as-trim h3 { margin: 2px 0 6px; font-size: 20px; line-height: 1.2; font-weight: 800; }
.as-trim-fig { margin: 0 0 10px; } .as-trim-fig b { font-size: 22px; font-weight: 800; } .as-trim-fig small { color: var(--muted); } .as-trim-fig span { font-weight: 700; font-size: 14px; }
.as-trim ul { margin: 0 0 16px; padding: 12px 0 0 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); flex: 1; }
.as-trim li { margin: 3px 0; }
.as-trim-cta { display: flex; gap: 8px; } .as-trim-cta .as-btn { flex: 1; }

/* Risk band (light, split) and the specifications accordion. */
.as-riskband { background: #fdeee6; color: #0b0b0b; }
.as-riskband-in { max-width: 1320px; margin: 0 auto; padding: 80px 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.as-riskband-l p { margin: 0 0 18px; font-size: 17px; color: #3a3a3a; }
.as-sevs { display: flex; gap: 8px; flex-wrap: wrap; }
.as-sev { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.sev-high { background: #b42318; color: #fff; } .sev-medium { background: #f5b700; color: #111; } .sev-low { background: #0a7a3b; color: #fff; }
.as-riskband-r { background: #fff; border-radius: 20px; padding: 8px 24px; }
.as-risk { border-bottom: 1px solid #ececec; }
.as-risk:last-child { border-bottom: 0; }
.as-risk summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 18px 0; cursor: pointer; font-size: 17px; }
.as-risk summary::-webkit-details-marker { display: none; }
.as-risk summary b { flex: 1; line-height: 1.3; }
.as-risk p { margin: 0 0 16px; font-size: 15px; color: #555; }
.as-riskband-img { aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; margin: 16px 0; }
.as-riskband-img img, .as-riskband-img .bn-tile { width: 100%; height: 100%; object-fit: cover; display: flex; }
.as-risk summary i, .as-acc-item summary i { position: relative; width: 16px; height: 16px; flex: none; }
.as-risk summary i::before, .as-risk summary i::after, .as-acc-item summary i::before, .as-acc-item summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: currentColor; transition: transform .15s; }
.as-risk summary i::after, .as-acc-item summary i::after { transform: rotate(90deg); }
.as-risk[open] summary i::after, .as-acc-item[open] summary i::after { transform: rotate(0); }
.as-acc { border-top: 2px solid var(--ink); }
.as-acc-item { border-bottom: 1px solid var(--line); }
.as-acc-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; font: 700 20px var(--hm-fh, "Inter Tight", sans-serif); }
.as-acc-item summary::-webkit-details-marker { display: none; }
.as-acc-body { padding: 0 0 22px; font-size: 16px; }
.as-acc-body p { margin: 0 0 10px; max-width: 900px; }
.as-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 8px 0; }
.as-table th, .as-table td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
.as-table th { width: 40%; font-weight: 600; }
.as-table td small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.as-legs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 24px; }
.as-legs li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 8px 0; font-size: 15px; }
.as-compare-wrap { overflow-x: auto; }
.as-cmp { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
.as-cmp th, .as-cmp td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.as-cmp thead th { vertical-align: bottom; font-size: 16px; border-bottom: 2px solid var(--ink); }
.as-cmp thead th small { display: block; font-size: 12px; color: #FF4713; font-weight: 700; }
.as-cmp thead a { color: var(--ink); }
.as-cmp td:nth-child(2), .as-cmp thead th:nth-child(2) { background: var(--soft); }
.as-cmp tbody th { font-weight: 600; color: var(--muted); width: 22%; }
#faq { padding-bottom: 40px; }

/* Next-step tiles, like the offers block. */
.as-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-top: 24px; }
.as .as-tile { display: flex; flex-direction: column; text-align: left; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: var(--soft); color: var(--ink); text-decoration: none; font: inherit; cursor: pointer; box-shadow: none; }
.as .as-tile:hover:not(:disabled) { box-shadow: 0 10px 30px rgba(0,0,0,.12); border: 0; }
.as-tile-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.as-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.as-tile:hover .as-tile-img img { transform: scale(1.04); }
.as-tile-txt { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px 22px; }
.as-tile-txt b { font: 800 21px/1.2 var(--hm-fh, "Inter Tight", sans-serif); }
.as-tile-txt > span:not(.as-more) { color: var(--muted); font-size: 15px; }
.as-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-weight: 700; font-size: 15px; }
.as-more svg { width: 15px; height: 15px; }

/* Numbered sources and disclaimers. */
.as-notes { max-width: 1320px; margin: 0 auto; padding: 36px 40px 56px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.as-notes h2 { font-size: 16px; color: var(--ink); margin: 0 0 10px; }
.as-sources { margin: 0 0 16px; padding-left: 22px; }
.as-sources li { margin: 4px 0; scroll-margin-top: 90px; }
.as-sources li:target { background: #fff1d6; color: #0b0b0b; }
.as-sources a { color: var(--ink); }
.as-notes p { margin: 6px 0; }
.as-disclaimer { color: var(--ink); }
#trade .dialog-body { max-width: 560px; }

@media (max-width: 1180px) {
  .as-links a[data-nav] { padding: 0 8px; font-size: 14px; }
  .as-subnav-cta .as-btn.line { display: none; }
}
@media (max-width: 900px) {
  .as-hero { height: clamp(460px, 74vh, 640px); }
  .as-hero-txt { left: 18px; right: 18px; bottom: 84px; }
  .as-hero h1 { font-size: clamp(40px, 11vw, 60px); gap: 12px; }
  .as-price b { font-size: 26px; }
  .as-subnav { margin-top: -56px; height: 56px; }
  .as-subnav-in { padding: 0 12px; gap: 10px; }
  .as-switch summary { font-size: 16px; max-width: 132px; }
  .as-switch-menu { position: fixed; top: 56px; left: 8px; right: 8px; min-width: 0; }
  .as-links { overflow-x: auto; scrollbar-width: none; }
  .as-links::-webkit-scrollbar { display: none; }
  .as-links .as-caret, .as-dd-menu { display: none !important; }
  .as-links a[data-nav] { font-size: 14px; padding: 0 8px; }
  .as-subnav-cta .as-btn { min-height: 36px; padding: 0 14px; font-size: 14px; }
  .as-sec { padding: 56px 18px; scroll-margin-top: 56px; }
  .as-feature, .as-stats, .as-riskband, .as-notes { scroll-margin-top: 56px; }
  .as-subcopy { font-size: 17px; }
  .as-chart-card { padding: 16px; border-radius: 16px; }
  .as-stats-in { padding: 52px 18px 48px; }
  .as-stats dl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .as-stats dl > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .as-tabpanel { grid-template-columns: 1fr 1fr; grid-template-rows: 220px auto 160px; }
  .as-mo.big { grid-row: auto; grid-column: span 2; }
  .as-mo.text { grid-column: span 2; padding: 20px; }
  .as-soon { grid-template-columns: 1fr; gap: 24px; }
  .as-feature { padding-top: 56px; }
  .as-feature-txt { padding: 0 18px 28px; }
  .as-collage { padding: 0 18px 56px; grid-template-columns: 1fr 1fr; grid-template-rows: 240px 150px; }
  .as-collage .c1 { grid-row: auto; grid-column: span 2; }
  .as-bleed { height: 420px; }
  .as-bleed-txt { left: 18px; right: 18px; bottom: 28px; }
  .as-cat-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .as-cat-card { scroll-snap-align: start; }
  .as-compare { padding-left: 18px; }
  .as-compare .as-row-head { padding-right: 18px; }
  .as-trims { grid-auto-columns: 78%; padding-right: 18px; }
  .as-car-btns { display: none; }
  .as-riskband-in { grid-template-columns: 1fr; gap: 28px; padding: 56px 18px; }
  .as-riskband-r { padding: 4px 16px; }
  .as-tiles { grid-template-columns: 1fr; }
  .as-notes { padding: 24px 18px 40px; }
}
@media (max-width: 520px) {
  .as-subnav-cta .as-btn.pill { padding: 0 12px; }
}

/* Invest and Multi Fund pages: the catalog full page (catalog-page.js, mega.js). */
.cp { font-family: "Inter", system-ui, sans-serif; font-size: 16px; line-height: 1.5; min-height: 70vh; }
.cp-top { max-width: 1320px; margin: 0 auto; padding: 40px 40px 0; }
.cp-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #FF4713; }
.cp-top h1 { margin: 0; font: 800 clamp(32px, 4.4vw, 52px)/1.05 var(--hm-fh, "Inter Tight", "Inter", sans-serif); letter-spacing: -0.02em; }
.cp-top p:last-child { margin: 10px 0 0; color: var(--muted); max-width: 640px; font-size: 17px; }
.cp-cat .mm-inner { padding-top: 28px; }
@media (max-width: 760px) { .cp-top { padding: 24px 16px 0; } .cp-cat .mm-inner { padding: 8px 16px 32px; } }