holding "The fee schedule." and "Getting started.". As a block container it had no gap, so the two cards met at exactly 0px and read as one seamed mega-card. The wrapper is a grid ITEM, so the grid's own 26px never reached inside it. 26px here is the grid's own gap — the same distance that separates the two columns — so the stack sits in the page's existing rhythm rather than a number invented for it. */ .brim .bxo-grid > *:not(.bxo-card){display:flex !important;flex-direction:column !important;gap:26px !important} .brim .bxo-card{border:1px solid var(--ln) !important;border-radius:var(--rad) !important;background:#fff !important;overflow:hidden !important} .brim .bxo-head{padding:26px 28px !important;border-bottom:1px solid var(--ln) !important} .brim .bxo-head .brim-h3{margin:0 0 6px !important} .brim .bxo-list{padding:0 28px !important} .brim .bxo-item{padding:18px 0 !important;border-bottom:1px solid #F3EFE4 !important;display:grid !important;grid-template-columns:26px 1fr;gap:14px} .brim .bxo-item:last-child{border-bottom:0 !important} .brim .bxo-ck{width:22px !important;height:22px !important;border-radius:50% !important;background:rgba(63,122,95,.1) !important;color:#3F7A5F !important;display:flex !important;align-items:center;justify-content:center;font-size:11px !important;font-weight:700 !important;flex:0 0 22px} .brim .bxo-item b{font-size:13px !important;font-weight:600 !important;display:block !important} .brim .bxo-item p{font-size:12px !important;color:#6E757B !important;margin-top:4px !important;line-height:1.6 !important} .brim .bxo-fees{padding:0 28px 24px !important} .brim .bxo-fr{display:grid !important;grid-template-columns:1fr 92px;padding:12px 0 !important;border-bottom:1px solid #F3EFE4 !important;font-size:12.5px !important} .brim .bxo-fr:last-child{border-bottom:0 !important} .brim .bxo-fr b{text-align:right !important;font-variant-numeric:tabular-nums;font-weight:600 !important} .brim .bxo-q{margin-top:24px !important;border:1px solid var(--ln) !important;border-radius:var(--rad) !important;background:#fff !important;overflow:hidden !important} .brim .bxo-qh{padding:22px 26px 6px !important} .brim .bxo-qi{border-top:1px solid #F3EFE4 !important} .brim .bxo-qb{display:flex !important;width:100% !important;justify-content:space-between;align-items:center;gap:16px;padding:18px 26px !important;background:transparent !important;border:0 !important;text-align:left !important;font-size:15px !important;font-weight:600 !important;color:var(--ink) !important} .brim .bxo-qb i{font-style:normal !important;font-size:18px !important;color:var(--gdd) !important;flex:0 0 auto} .brim .bxo-qa{display:none !important;padding:0 26px 20px !important} .brim .bxo-qa.on{display:block !important} .brim .bxo-band{margin-top:24px !important;padding:28px 32px !important;border-radius:var(--rad) !important;background:#E6E0D5 !important;display:grid !important;grid-template-columns:1fr auto;gap:32px;align-items:center} .brim .bxo-band .brim-h3{margin:0 0 8px !important} .brim .bxo-band p{font-size:12.5px !important;color:#5F676E !important;line-height:1.7 !important;max-width:740px !important} @media(max-width:1000px){ .brim .bxo-grid{grid-template-columns:1fr !important} .brim .bxo-q{margin-top:24px !important;border:1px solid var(--ln) !important;border-radius:var(--rad) !important;background:#fff !important;overflow:hidden !important} .brim .bxo-qh{padding:22px 26px 6px !important} .brim .bxo-qi{border-top:1px solid #F3EFE4 !important} .brim .bxo-qb{display:flex !important;width:100% !important;justify-content:space-between;align-items:center;gap:16px;padding:18px 26px !important;background:transparent !important;border:0 !important;text-align:left !important;font-size:15px !important;font-weight:600 !important;color:var(--ink) !important} .brim .bxo-qb i{font-style:normal !important;font-size:18px !important;color:var(--gdd) !important;flex:0 0 auto} .brim .bxo-qa{display:none !important;padding:0 26px 20px !important} .brim .bxo-qa.on{display:block !important} .brim .bxo-band{grid-template-columns:1fr !important;gap:18px} } /* ---- BINX block 47 (line 16261) ---- */ .brim.brim-docs{background:#FFFDF9 !important} .brim .bi-doc-grid{display:grid !important;grid-template-columns:repeat(3,1fr);gap:14px} .brim .bi-doc-c{padding:26px !important;border:1px solid var(--ln) !important;border-radius:var(--rad-s) !important;min-height:206px !important;display:flex !important;flex-direction:column;justify-content:space-between;transition:transform .18s,box-shadow .18s;background:#fff !important} .brim .bi-doc-c:hover{transform:translateY(-2px);box-shadow:0 15px 35px rgba(2,19,31,.07) !important} .brim .bi-doc-t{display:block !important;font-size:9px !important;font-weight:700 !important;letter-spacing:1.5px !important;text-transform:uppercase !important;color:var(--gdd) !important} .brim .bi-doc-c .brim-h4{margin:22px 0 8px !important} .brim .bi-doc-c p{font-size:11.5px !important;color:#70777C !important;line-height:1.65 !important} .brim .bi-doc-a{font-size:11.5px !important;font-weight:700 !important;color:var(--gdd) !important;margin-top:16px !important;display:block !important} .brim .bi-doc-ban{margin-top:20px !important;border-radius:var(--rad) !important;background:linear-gradient(165deg,#041A29,#02131F 70%) !important;color:#E8EDF3 !important;padding:34px !important;display:grid !important;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center} .brim .bi-doc-ban .brim-h3{color:#fff !important;margin:8px 0 10px !important} .brim .bi-doc-ban p{font-size:12.5px !important;color:#B3BCC2 !important;line-height:1.7 !important} .brim .bi-doc-acts{display:flex !important;justify-content:flex-end;flex-wrap:wrap;gap:9px} .brim.brim-next{background:var(--cr2) !important} .brim .bxn-head{text-align:center !important;max-width:760px !important;margin:0 auto 30px !important} .brim .bxn-head .brim-eyebrow{justify-content:center} .brim .bxn-head .brim-lede{margin:0 auto !important;text-align:center !important} .brim .bxn-grid{display:grid !important;grid-template-columns:repeat(4,1fr);gap:12px} .brim .bxn-c{padding:24px !important;border:1px solid var(--ln) !important;border-radius:var(--rad-s) !important;background:rgba(255,255,255,.55) !important;border-top:3px solid var(--sc,#C9A84C) !important} .brim .bxn-c .tg{font-size:20px !important;font-weight:500 !important;color:var(--sc,#C9A84C) !important;font-variant-numeric:tabular-nums;letter-spacing:-.02em !important} .brim .bxn-c .brim-h4{margin:12px 0 8px !important;font-size:17px !important} .brim .bxn-c p{font-size:11.5px !important;color:#6B7379 !important;line-height:1.65 !important} .brim .bxn-c a{font-size:11px !important;font-weight:700 !important;color:var(--gdd) !important;display:block !important;margin-top:14px !important} .brim .bxn-c.is-here{background:#fff !important;box-shadow:0 10px 26px rgba(2,19,31,.07) !important} .brim .bxn-c.is-here .tag{font-size:9px !important;font-weight:700 !important;letter-spacing:1.2px !important;text-transform:uppercase !important;color:var(--mut) !important;display:block !important;margin-top:14px !important} .brim.brim-cta{background:linear-gradient(168deg,#041A29,#02131F 60%,#041A29) !important;color:#fff !important;text-align:center !important} .brim .bxc-in{max-width:820px !important;margin:0 auto !important;text-align:center !important} .brim .bxc-in .brim-eyebrow{justify-content:center} .brim .bxc-in .brim-h2{color:#fff !important;margin:0 0 16px !important} .brim .bxc-in p{color:#ACB6BD !important;font-size:15px !important;line-height:1.72 !important;font-weight:300 !important;margin:0 auto 26px !important;max-width:660px !important} .brim .bxc-acts{display:flex !important;justify-content:center;gap:10px;flex-wrap:wrap} .brim.brim-disc{background:#090E13 !important;color:#89939B !important;padding:44px 0 40px !important} .brim .bxz-grid{display:grid !important;grid-template-columns:repeat(3,1fr);gap:28px} .brim .bxz-grid h3{font-family:'DM Sans',Arial,sans-serif !important;font-size:9px !important;font-weight:700 !important;letter-spacing:1.5px !important;text-transform:uppercase !important;color:#C7CED3 !important;margin:0 0 9px !important} .brim .bxz-grid p{font-size:10.5px !important;line-height:1.75 !important;margin:0 0 11px !important;color:#89939B !important} .brim .bxz-foot{margin-top:24px !important;padding-top:20px !important;border-top:1px solid rgba(255,255,255,.1) !important;display:flex !important;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:10.5px !important;color:#77818A !important} @media(max-width:1000px){ .brim .bi-doc-grid{grid-template-columns:1fr 1fr} .brim .bi-doc-ban{grid-template-columns:1fr !important} .brim .bi-doc-acts{justify-content:flex-start} .brim .bxn-grid{grid-template-columns:1fr 1fr} } @media(max-width:640px){ .brim .bi-doc-grid,.brim .bxn-grid,.brim .bxz-grid{grid-template-columns:1fr} } /* ============================================================================ STRATEGY SWITCHER — added in the rebuild, not present in BINX 00. The current live page carries one and it is content floor: someone comparing the four strategies must be able to move between them from the section rail rather than climbing back to the navbar. Accent dots are the fixed strategy colours and are never tinted. ============================================================================ */ .brim .bi-switch{display:flex !important;align-items:center;gap:6px;flex-wrap:wrap; padding:7px 20px 9px !important;border-top:1px solid rgba(2,19,31,.07) !important} .brim .bi-switch-lbl{font-size:9.5px !important;font-weight:700 !important;letter-spacing:1.1px !important; text-transform:uppercase !important;color:var(--mut) !important;margin-right:4px !important} .brim .bi-switch-b{display:inline-flex !important;align-items:center;gap:6px; padding:5px 11px !important;border-radius:100px !important; border:1px solid rgba(2,19,31,.12) !important;background:rgba(255,255,255,.55) !important; color:#48505A !important;font-size:11.5px !important;font-weight:500 !important;white-space:nowrap} .brim .bi-switch-b i{width:7px !important;height:7px !important;border-radius:50% !important;flex:0 0 7px} .brim .bi-switch-b:hover{border-color:rgba(2,19,31,.3) !important;color:var(--ink) !important} .brim .bi-switch-b.is-on{background:var(--nv) !important;border-color:var(--nv) !important;color:#F1EEE7 !important} @media(max-width:900px){ .brim .bi-switch{padding-left:24px !important;padding-right:24px !important} } /* ============================================================================ PERFORMANCE STAT TILES Written for the rebuild. BINX's equivalents lived in the style block that also held its chart, and that block was dropped wholesale when BRG replaced the chart — so these are rebuilt rather than inherited, keeping BINX's proportions (one row of four, hairline dividers, tabular figures). ============================================================================ */ .brim .bi-perf-metrics{display:grid !important;grid-template-columns:repeat(4,1fr); border:1px solid var(--ln) !important;border-radius:var(--rad) !important; overflow:hidden !important;background:#fff !important;margin:0 0 22px !important} .brim .bi-perf-m{padding:20px 22px !important;border-right:1px solid var(--ln) !important} .brim .bi-perf-m:last-child{border-right:0 !important} .brim .bi-perf-m b{display:block !important;font-size:clamp(26px,3vw,38px) !important; font-weight:500 !important;line-height:1.05 !important;margin:0 0 6px !important; font-variant-numeric:tabular-nums;letter-spacing:-.025em !important;color:var(--ink) !important} .brim .bi-perf-m span{display:block !important;font-size:11.5px !important; color:#666F76 !important;line-height:1.5 !important} @media(max-width:1000px){ .brim .bi-perf-metrics{grid-template-columns:repeat(2,1fr)} .brim .bi-perf-m:nth-child(2){border-right:0 !important} .brim .bi-perf-m:nth-child(1),.brim .bi-perf-m:nth-child(2){border-bottom:1px solid var(--ln) !important} } @media(max-width:560px){ .brim .bi-perf-metrics{grid-template-columns:1fr} .brim .bi-perf-m{border-right:0 !important;border-bottom:1px solid var(--ln) !important} .brim .bi-perf-m:last-child{border-bottom:0 !important} } /* Benchmark line in the hero — added in the rebuild. The live page names its benchmarks in the standfirst and the primary/secondary distinction is a standing rule, so it is stated rather than left for the chart to imply. */ .brim .bi-hero-bench{font-size:13px !important;line-height:1.65 !important; color:rgba(203,213,225,.72) !important;max-width:600px !important;margin:14px 0 0 !important} .brim .bi-hero-bench b{color:#E2C47A !important;font-weight:600 !important} /* The hero's decorative orb is 520px wide and positioned to bleed off the left edge. At 430 that put it 17px past the viewport and gave the whole page a horizontal scroll. Clip at the section boundary rather than shrinking the orb: it is background texture, and the bleed is the intended effect at every width where there is room for it. */ .brim.brim-hero{overflow:hidden !important} /* ══════════════════════════════════════════════════════════════════════════════ FULL FIELD — more room to inspect (visual QA, 2026-08-30) The ranking card was the densest thing on the page: a 195-380px plot carrying 3,479 funds, with the readout, the two comparison cards and the universe note all pressed against it. Roughly 30% more vertical size, taken as geometry rather than as padding under the card — the plot itself grows, the header and footer rows get room to breathe, and the comparison cards stop looking like a caption. ============================================================================ */ .brim .bi-rank-card{padding:26px 24px 24px !important} .brim .bi-rank-plot{height:clamp(254px,36vh,494px) !important;margin:0 0 15px !important} .brim .bi-rank-top{margin:0 0 20px !important;gap:22px} .brim .bi-rank-ctl{gap:18px} .brim .bi-rank-cards{gap:14px;margin-top:20px !important} .brim .bi-rank-c{padding:16px 18px !important} .brim .bi-rank-tbl.on{max-height:clamp(320px,46vh,620px) !important} @media (max-width:767px){ .brim .bi-rank-card{padding:20px 16px 18px !important} .brim .bi-rank-plot{height:clamp(230px,42vh,340px) !important} } /* ══════════════════════════════════════════════════════════════════════════════ DISCLOSURES — presentation only (visual QA, 2026-08-30) Every word of the disclosure language is unchanged. What changes is that it stops looking like compliance copy pasted after the designed page and starts looking like the footer of an annual report: a titled block, a hairline above it, three disciplined columns on a measured width, and real line-height. No cards, no gradients, no glow. ============================================================================ */ .brim.brim-disc{padding:56px 0 48px !important;border-top:1px solid rgba(255,255,255,.09) !important} .brim .bxz-head{display:flex !important;align-items:baseline;gap:16px;margin:0 0 26px !important} .brim .bxz-eyebrow{font-family:'DM Sans',Arial,sans-serif !important;font-size:10px !important; font-weight:700 !important;letter-spacing:2.2px !important;text-transform:uppercase !important; color:#8A6626 !important;white-space:nowrap} .brim.brim-disc .bxz-eyebrow{color:var(--gdl) !important} .brim .bxz-rule{flex:1 1 auto;height:1px;background:rgba(255,255,255,.12);display:block !important} /* Three columns on a measured width. 34ch keeps a disclosure line readable instead of letting it run the full third of a 1520px container. */ .brim .bxz-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:44px !important} .brim .bxz-grid > div{max-width:46ch} .brim .bxz-grid h3{font-size:10px !important;letter-spacing:1.8px !important; color:#C7D2DC !important;padding-bottom:9px !important;margin:0 0 13px !important; border-bottom:1px solid rgba(255,255,255,.10) !important} .brim .bxz-grid p{font-size:11.5px !important;line-height:1.85 !important;margin:0 0 13px !important} .brim .bxz-grid p:last-child{margin-bottom:0 !important} .brim .bxz-foot{margin-top:34px !important;padding-top:18px !important;font-size:11px !important; border-top:1px solid rgba(255,255,255,.10) !important;gap:18px;flex-wrap:wrap} /* Mobile: one column, each group separated by the same hairline rather than by guesswork. */ @media (max-width:900px){ .brim .bxz-grid{grid-template-columns:1fr !important;gap:0 !important} .brim .bxz-grid > div{max-width:none;padding:22px 0 !important; border-top:1px solid rgba(255,255,255,.08) !important} .brim .bxz-grid > div:first-child{padding-top:0 !important;border-top:0 !important} .brim .bxz-grid > div:last-child{padding-bottom:0 !important} .brim.brim-disc{padding:44px 0 40px !important} } /* Ranking window toggle on narrow screens. Nine windows do not fit on a 430px viewport — the row measured 453px, so the older years sat outside the card with no way to reach them. The row scrolls horizontally instead, the same way the page's jump bar already does, with the scrollbar hidden and each button held at its natural width so nothing squashes. */ @media (max-width:900px){ .brim .bi-rank-ctl{width:100% !important;align-items:stretch} .brim .bi-rank-ctl .brim-ctlgrp{min-width:0 !important;max-width:100% !important} .brim #bxrWin{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; scrollbar-width:none; max-width:100% !important; scroll-snap-type:x proximity; } .brim #bxrWin::-webkit-scrollbar{display:none} .brim #bxrWin button{flex:0 0 auto !important;scroll-snap-align:start} } /* ══════════════════════════════════════════════════════════════════════════════ SMA SECTION — recomposed onto three rows (visual QA, 2026-08-30) Everything except the flow diagram lived in the right-hand column: tabs, the dark comparison card, the white comparison table, the ETF card and the fee card all stacked down 652px while the 492px left column ended after the diagram, leaving a tall empty band beside four boxes. Adding a gap between two of them did not touch that. The wrapper around the right column becomes display:contents, so its children become grid items of .bi-story-grid directly and can be placed on an explicit three-row plan without any markup change: row 1-2 flow diagram | tabs + dark comparison card row 3 comparison table, full width row 4 ETF card | fee card row 5 footnote, full width The two dark blocks stretch to the same height so row 1 reads as a deliberate pair. Content, tabs, interactions, colours and card styling are untouched — only placement. ============================================================================ */ @media (min-width:901px){ .brim .bi-story-grid{ grid-template-columns:1fr 1fr !important; align-items:stretch !important; row-gap:22px !important; column-gap:40px !important; } /* the unnamed right-column wrapper stops being a box so its children join the grid */ .brim .bi-story-grid > div:not(.bi-story-map){display:contents !important} .brim .bi-story-map {grid-column:1 !important;grid-row:1 / span 2 !important} .brim .bi-story-tabs {grid-column:2 !important;grid-row:1 !important;margin-bottom:0 !important;align-self:start} .brim .bi-story-stage{grid-column:2 !important;grid-row:2 !important;margin-top:0 !important} .brim .bi-story-tbl {grid-column:1 / -1 !important;grid-row:3 !important;margin-top:0 !important} .brim .bi-story-truth{grid-column:1 !important;grid-row:4 !important;margin-top:0 !important} .brim .bi-story-demo {grid-column:2 !important;grid-row:4 !important;margin-top:0 !important} .brim .bi-story-more {grid-column:1 / -1 !important;grid-row:5 !important;margin-top:0 !important} } /* Mobile keeps the natural single-column flow: the wrapper stays a normal box and the cards keep the 22px rhythm they already had. */ @media (max-width:900px){ .brim .bi-story-tbl{margin-top:22px !important} } /* ══════════════════════════════════════════════════════════════════════════════ CHART HOVER READOUT (visual QA, 2026-08-30) Every chart paints to a canvas and used to throw its geometry away, so five of the seven could not be interrogated at all. The shared layer registers geometry on each draw and overlays a 1px guide plus a small panel — both plain DOM, so nothing repaints on mouse move and the readout can never lag the cursor. ============================================================================ */ .brim .brim-hvline{ position:absolute !important;top:10px;bottom:16px;width:1px; background:rgba(226,196,122,.55);pointer-events:none;opacity:0; transition:opacity .12s linear;z-index:4; } .brim .brim-hvread{ position:absolute !important;top:10px;pointer-events:none;opacity:0; transition:opacity .12s linear;z-index:5; background:rgba(6,32,51,.96);border:1px solid rgba(255,255,255,.14); border-radius:9px;padding:9px 11px;min-width:96px; box-shadow:0 8px 22px rgba(2,19,31,.45); font-family:'DM Sans',Arial,sans-serif;white-space:nowrap; } .brim .brim-hvread b{ display:block !important;font-size:15px !important;font-weight:600 !important; color:#E2C47A !important;line-height:1.15 !important;font-variant-numeric:tabular-nums; } .brim .brim-hvread b.alt {color:#C77FB8 !important} .brim .brim-hvread b.alt2{color:#6FA8E0 !important} .brim .brim-hvread i{ display:block !important;font-style:normal !important;font-size:10px !important; color:#8FA3B4 !important;letter-spacing:.02em;margin-bottom:6px !important;line-height:1.3 !important; } .brim .brim-hvread i:last-child{margin-bottom:0 !important} .brim .brim-hvread i.w{ color:#C7D2DC !important;margin-top:4px !important;padding-top:6px !important; border-top:1px solid rgba(255,255,255,.10) !important; } /* the charts need a positioning context and a visible cursor affordance */ .brim #bxjPlot,.brim #bxtMacBox,.brim #bxtArkBox,.brim #bxtNRBox,.brim #bxtRWBox{ position:relative !important;cursor:crosshair; } /* Ownership card: the CTA row was flush against the card edge. .bxo-head and .bxo-list both pad 28px, so every block in the card sits 29px in — except the button row, whose wrapper carries no padding at all and started 1px from the border. That is the overhang in the intake card: the gold button touching the rounded edge. Same 28px, plus the matching bottom inset so the row is not flush with the card floor. */ .brim .bxo-card > div:not([class]){padding:0 28px 28px !important} /* No mobile reduction: .bxo-head and .bxo-list keep 28px at every width, so shrinking this one would reintroduce the mismatch it exists to remove. */ /* ---- components/story-player/story.css ---- */ /* ============================================================================ BRIM · STORY PLAYER — styles Candidate component. Page-specific until a second page needs it. Assembled from the BINX 00 reference by sync/assemble-innovation.js. Namespace renamed .binx -> .brim: this is the BRIM page system, not a one-page preview prefix. ============================================================================ */ /* ---- block 27 ---- */ /* BRIM Story Player — core styles (embed 1) */ .bstory{background:#F0ECE1;color:#02131F;font-family:'DM Sans',sans-serif;overflow-x:hidden;position:relative;border-top:1px solid rgba(2,19,31,.07);border-bottom:1px solid rgba(2,19,31,.07)} .bstory *{box-sizing:border-box;margin:0;padding:0} .bstory-in{max-width:1280px;margin:0 auto;padding:56px 48px 64px;position:relative} .bstory-noise{position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")} .bstory-ghostL{position:absolute;right:-90px;top:-60px;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:580px;line-height:1;color:#C9A84C;opacity:.06;pointer-events:none;user-select:none} /* ---------- lobby ---------- */ .bs-kicker{font-size:13px;letter-spacing:.18em;font-weight:700;opacity:.62;text-transform:uppercase} .bs-h{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(42px,5.4vw,72px);line-height:1.04;margin:18px 0 14px;max-width:22ch} .bs-h em,.bs-goldword{font-style:italic;color:#A07830} .bs-sub{font-size:18px;opacity:.82;max-width:62ch;line-height:1.55} .bs-openerbtn{display:inline-flex;align-items:center;gap:12px;margin:26px 0 8px;border:1.5px solid #02131F;background:transparent;border-radius:999px;padding:12px 24px 12px 16px;font-family:'DM Sans',sans-serif;font-weight:700;font-size:15px;color:#02131F;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease} .bs-openerbtn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(2,19,31,.12)} .bs-openerbtn .bs-pplay{width:34px;height:34px;border-radius:50%;background:#C9A84C;display:inline-flex;align-items:center;justify-content:center} .bs-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px} .bs-card{background:#fff;border:1px solid rgba(2,19,31,.1);border-radius:14px;padding:26px 24px 22px;position:relative;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;text-align:left} .bs-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(2,19,31,.12)} .bs-card::before{content:"";position:absolute;top:0;left:24px;right:24px;height:3px;border-radius:0 0 3px 3px;background:var(--acc,#C9A84C)} .bs-cardname{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:31px;margin:6px 0 8px} .bs-cardtag{font-size:14.5px;line-height:1.5;opacity:.78;min-height:66px} .bs-cardstats{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 16px} .bs-cardstats span{font-size:12.5px;font-weight:700;border:1px solid rgba(2,19,31,.22);border-radius:999px;padding:4px 11px} .bs-cardstats span:first-child{border-color:var(--acc);color:#02131F;background:color-mix(in srgb,var(--acc) 14%,transparent)} .bs-cardcta{font-weight:700;font-size:14.5px;color:#02131F;display:inline-flex;align-items:center;gap:8px} .bs-cardcta::after{content:"→";transition:transform .18s ease} .bs-card:hover .bs-cardcta::after{transform:translateX(4px)} @keyframes bsCardPulse{0%{box-shadow:0 0 0 0 rgba(201,168,76,.5)}100%{box-shadow:0 0 0 16px rgba(201,168,76,0)}} .bs-cards.bs-nudge .bs-card{animation:bsCardPulse 1.1s ease-out 2} /* ---------- player ---------- */ .bs-player{display:none} .bstory.bs-mode-player .bs-player{display:block} .bstory.bs-mode-player .bs-lobby{display:none} .bs-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px} .bs-back{border:none;background:transparent;font:inherit;font-weight:700;font-size:14px;opacity:.66;cursor:pointer;display:inline-flex;gap:8px;align-items:center;color:#02131F} .bs-back:hover{opacity:1} .bs-stratname{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:26px} .bs-stratdot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--acc,#C9A84C);margin-right:9px;vertical-align:1px} .bs-stagewrap{background:#fff;border:1px solid rgba(2,19,31,.1);border-radius:16px;overflow:hidden;box-shadow:0 18px 44px rgba(2,19,31,.07)} .bs-caphead{padding:26px 34px 4px;display:flex;flex-direction:column;gap:8px} .bs-capkicker{font-size:12px;letter-spacing:.17em;font-weight:700;opacity:.6} .bs-caph{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(28px,3.4vw,44px);line-height:1.06} .bs-stage{padding:6px 26px 0;min-height:280px} .bs-capbody{padding:14px 34px 30px;font-size:16.5px;line-height:1.62;max-width:78ch;opacity:.92} .bs-fallback{padding:70px 30px;text-align:center} .bs-fallback .bs-fbnum{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:120px;color:#C9A84C;opacity:.5;line-height:1} /* transport */ .bs-transport{margin-top:18px;background:#02131F;border-radius:14px;padding:14px 18px 16px;color:#FAF8F3} .bs-prog{height:3px;border-radius:2px;background:rgba(250,248,243,.16);margin:0 4px 14px;overflow:hidden} .bs-progfill{height:100%;width:0%;background:var(--acc,#C9A84C);border-radius:2px;transition:width .25s linear} .bs-trow{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .bs-tbtn{border:none;background:transparent;color:#FAF8F3;cursor:pointer;font-size:19px;padding:6px;opacity:.85;line-height:1} .bs-tbtn:hover{opacity:1} .bs-play{width:52px;height:52px;border-radius:50%;background:#C9A84C;color:#02131F;border:none;cursor:pointer;font-size:20px;display:inline-flex;align-items:center;justify-content:center;transition:transform .15s ease;flex:0 0 auto} .bs-play:hover{transform:scale(1.06)} .bs-dots{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .bs-dot{width:9px;height:9px;border-radius:50%;background:rgba(250,248,243,.28);border:none;cursor:pointer;padding:0;transition:transform .15s ease,background .2s ease} .bs-dot:hover{transform:scale(1.5)} .bs-dot.bs-on{background:var(--acc,#C9A84C);transform:scale(1.45)} .bs-dot.bs-done{background:rgba(250,248,243,.62)} .bs-time{font-size:13px;font-variant-numeric:tabular-nums;opacity:.8;white-space:nowrap} .bs-spacer{flex:1} .bs-pill{display:inline-flex;border:1px solid rgba(250,248,243,.32);border-radius:999px;overflow:hidden} .bs-pill button{border:none;background:transparent;color:#FAF8F3;font:inherit;font-size:12.5px;font-weight:700;padding:7px 13px;cursor:pointer;opacity:.62} .bs-pill button.bs-on{background:#FAF8F3;color:#02131F;opacity:1} .bs-strats{display:flex;gap:7px} .bs-sdot{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;background:var(--c);opacity:.55;transition:opacity .15s,transform .15s} .bs-sdot:hover{opacity:.9;transform:scale(1.12)} .bs-sdot.bs-on{opacity:1;border-color:#FAF8F3;transform:scale(1.12)} .bs-hide{display:none!important} @media (max-width:1000px){.bs-cards{grid-template-columns:repeat(2,1fr)}} @media (max-width:760px){ .bstory-in{padding:40px 24px 48px} .bs-cards{grid-template-columns:1fr} .bs-caphead,.bs-capbody{padding-left:20px;padding-right:20px} .bs-stage{padding:4px 10px 0} .bs-trow{gap:10px} .bs-time{order:5}.bs-strats{order:6} } @media (prefers-reduced-motion: reduce){.bstory *{animation-duration:.01s!important;transition-duration:.01s!important}} /* ---- block 29 ---- */ /* BRIM Story — scenes styles (embed 2, self-contained) */ .bsty-svg{width:100%;height:auto;display:block} .bsty-ghost{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;fill:#C9A84C;opacity:.07;pointer-events:none} .bsty-kicker{font-family:'DM Sans',sans-serif;font-size:13px;letter-spacing:.16em;font-weight:600;fill:#02131F;opacity:.66} .bsty-h0{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:132px} .bsty-h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:74px;fill:#02131F} .bsty-h2{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:30px;fill:#02131F} .bsty-vs{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:40px;fill:#A07830} .bsty-lede{font-family:'DM Sans',sans-serif;font-size:19px;fill:#02131F;opacity:.85} .bsty-big{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:120px;fill:#02131F} .bsty-big2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:54px;fill:#02131F} .bsty-sub{font-family:'DM Sans',sans-serif;font-size:15px;fill:#02131F;opacity:.72} .bsty-lbl{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;fill:#02131F} .bsty-foot{font-family:'DM Sans',sans-serif;font-size:13.5px;fill:#02131F;opacity:.6} .bsty-chiplbl{font-family:'DM Sans',sans-serif;font-size:13.5px;font-weight:600} .bsty-ctabar{display:flex;gap:14px;flex-wrap:wrap;padding:6px 0 2px} .bsty-cta{font-family:'DM Sans',sans-serif;font-weight:700;font-size:15px;text-decoration:none;border-radius:999px;padding:13px 26px;color:#02131F;border:1.5px solid #02131F;background:transparent;transition:transform .18s ease,box-shadow .18s ease} .bsty-cta-p{color:#02131F;border-color:transparent;box-shadow:0 6px 18px rgba(2,19,31,.14)} .bsty-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(2,19,31,.16)} /* motion */ @keyframes bstyPop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}} .bsty-pop{transform-box:fill-box;transform-origin:center;animation:bstyPop .5s cubic-bezier(.34,1.56,.64,1) both} @keyframes bstyRise{0%{transform:translateY(26px);opacity:0}100%{transform:translateY(0);opacity:1}} .bsty-rise{animation:bstyRise .7s cubic-bezier(.22,1,.36,1) both} @keyframes bstyFade{0%{opacity:0}100%{opacity:1}} .bsty-fade{animation:bstyFade .8s ease both} @keyframes bstyRule{0%{stroke-dashoffset:var(--rl,600)}100%{stroke-dashoffset:0}} .bsty-rule{stroke-dasharray:600;stroke-dashoffset:600;animation:bstyRule 1s ease-out both} @keyframes bstyDraw{to{stroke-dashoffset:0}} .bsty-draw{animation:bstyDraw 2.1s cubic-bezier(.4,0,.2,1) .35s both} @keyframes bstyPulse{0%{transform:scale(.9);opacity:.9}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}} .bsty-pulse{transform-box:fill-box;transform-origin:center;animation:bstyPulse 2.2s ease-out infinite} @keyframes bstySlide{0%{transform:translateX(-46px);opacity:0}100%{transform:translateX(0);opacity:1}} .bsty-slide{animation:bstySlide .8s cubic-bezier(.22,1,.36,1) both} @keyframes bstyStamp{0%{transform:scale(.7);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}} .bsty-stamp{transform-box:fill-box;transform-origin:center;animation:bstyStamp .45s cubic-bezier(.34,1.56,.64,1) both} @keyframes bstyJostle{0%,100%{transform:translate(0,0)}25%{transform:translate(2.5px,-2px)}55%{transform:translate(-2px,2.5px)}80%{transform:translate(1.5px,1.5px)}} .bsty-jostle{transform-box:fill-box;transform-origin:center;animation:bstyJostle 2.6s ease-in-out infinite} @keyframes bstyRadiate{0%{transform:scale(.55);opacity:0}35%{opacity:.8}100%{transform:scale(1.28);opacity:0}} .bsty-radiate{transform-box:fill-box;transform-origin:center;animation:bstyRadiate 3.2s ease-out infinite} @keyframes bstyRide{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}} .bsty-ride{transform-box:fill-box;transform-origin:center;animation:bstyRide 3.2s ease-out infinite} @keyframes bstySweep{0%{transform:translateX(0)}100%{transform:translateX(980px)}} .bsty-sweep{animation:bstySweep 2.6s linear both} @keyframes bstyCull{0%{fill-opacity:.82}100%{fill-opacity:.06;r:1.6}} .bsty-cull{animation:bstyCull .5s ease both} @keyframes bstyKeep{0%{}50%{r:6.4}100%{fill:var(--acc);fill-opacity:1;r:4.4}} .bsty-keep{animation:bstyKeep .55s ease both} .bsty-travel{transform-box:fill-box;transition:transform 1.35s cubic-bezier(.22,1,.36,1)} @keyframes bstyRing{0%{stroke-dasharray:0 200;opacity:0}20%{opacity:1}100%{stroke-dasharray:200 0;opacity:1}} .bsty-ringdraw{animation:bstyRing 1s ease-out both} @keyframes bstyGrow{0%{transform:scaleY(0)}100%{transform:scaleY(1)}} .bsty-grow{animation:bstyGrow .7s cubic-bezier(.22,1,.36,1) both} @keyframes bstyExit{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}} .bsty-exit{transform-box:fill-box;animation:bstyExit 2.6s cubic-bezier(.45,0,.35,1) infinite} @media (prefers-reduced-motion: reduce){ .bsty-pop,.bsty-rise,.bsty-fade,.bsty-rule,.bsty-draw,.bsty-slide,.bsty-stamp,.bsty-grow,.bsty-ringdraw,.bsty-keep,.bsty-cull,.bsty-sweep{animation-duration:.01s!important;animation-delay:0s!important} .bsty-pulse,.bsty-jostle,.bsty-radiate,.bsty-ride,.bsty-exit{animation:none!important;opacity:1} .bsty-travel{transition:none!important} }