/* /hero-browse-preview/ only: the browser (#people.wow-browse), its extra tile kinds, and the section sheets.
   Loaded after wow-phone.css so these rules win on this page only. */

/* the chapter rail points at sections that now live in sheets */
.wow-rail{display:none!important}

/* ---------- Featured card: genres without wide photography show the portrait on the right ---------- */
@media (min-width:900px){
 .wow-browse .flix-slide.is-portrait .flix-bb-media{left:auto;right:4vw;top:5%;bottom:auto;width:auto;height:70%;aspect-ratio:3/4;border-radius:22px;
  box-shadow:0 40px 80px -40px #000,0 0 0 1px #ffffff1f}
 .wow-browse .flix-slide.is-portrait .flix-bb-media::after{background:linear-gradient(180deg,#07123800 60%,#07123866 100%)}
 .wow-browse .flix-slide.is-portrait .flix-bb-media .flix-bb-pic{object-position:50% 30%;transform-origin:50% 30%}
 .wow-browse .flix-billboard::after{height:22%}
}

/* ---------- Genres: one line on desktop (the heading sits above them) ---------- */
@media (min-width:900px){
 .wow-browse .flix-top{flex-direction:column;align-items:flex-start}
 .wow-browse .flix-genres{flex-wrap:nowrap;gap:8px;max-width:100%;overflow-x:auto;scrollbar-width:none}
 .wow-browse .flix-genres::-webkit-scrollbar{display:none}
 .wow-browse .flix-chip{flex:none;padding:11px 15px;font-size:14px;white-space:nowrap}
}
@media (min-width:900px) and (max-width:1279px){.wow-browse .flix-chip{padding:10px 12px;font-size:13px;gap:6px}}

/* ---------- Genres: on phones the seven chips scroll as one strip (icon over a short label) ---------- */
@media (max-width:899px){
 .wow-browse .flix-genres{display:flex!important;flex-wrap:nowrap!important;gap:6px;overflow-x:auto!important;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  margin:0 -16px!important;padding:2px 16px 4px!important;scrollbar-width:none;
  -webkit-mask:linear-gradient(90deg,#000 88%,#0000);mask:linear-gradient(90deg,#000 88%,#0000)}
 .wow-browse .flix-genres::-webkit-scrollbar{display:none}
 .wow-browse .flix-chip{flex:0 0 74px!important;scroll-snap-align:start;white-space:normal}
 .wow-browse .flix-top{gap:14px}
}

/* ---------- Service tiles: the animated art from the old hero buttons, or a photo ---------- */
.wow-browse .flix-tile.is-service,.wow-browse .flix-tile.is-feature{text-decoration:none;color:#fff;background:linear-gradient(160deg,#16307f,#0b1a4f)}
.wow-browse .flix-tile.is-service .tx-art::after{background:linear-gradient(180deg,#07123800 30%,#071238b3 74%,#071238ee 100%)}
.wow-browse .flix-tile.is-service .flix-art img{object-position:50% 30%}
.wow-browse .flix-tile.is-service .flix-art::after,.wow-browse .flix-tile.is-feature .flix-art::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,#07123800 34%,#071238cc 80%,#071238f2 100%)}
.wow-browse .flix-tile:is(.is-service,.is-feature) .flix-name{z-index:2}
.wow-browse .flix-tile:is(.is-service,.is-feature) .flix-tag{z-index:2}
@media (hover:hover) and (pointer:fine){
 .wow-browse .flix-tile:is(.is-service,.is-feature):hover{transform:translateY(-4px);box-shadow:0 22px 40px -20px #000}
 .wow-browse .flix-tile:is(.is-service,.is-feature):hover .flix-tag{opacity:1;translate:0 0}
}
/* phones never hover: title and tag line stack at the bottom of the tile, icon art sits at the top */
@media (hover:none),(max-width:899px){
 .wow-browse .flix-tile:is(.is-service,.is-feature){display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:0 10px 10px}
 .wow-browse .flix-tile:is(.is-service,.is-feature) .flix-name{position:relative;left:auto;right:auto;bottom:auto;top:auto;font-size:15px;line-height:1}
 .wow-browse .flix-tile:is(.is-service,.is-feature) .flix-tag{position:relative;left:auto;right:auto;bottom:auto;top:auto;opacity:1;translate:0 0;background:none;color:#ffffffc7;
  padding:0;font:600 11px/1.25 Manrope,Arial,sans-serif;letter-spacing:0;text-transform:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
}
@media (max-width:899px){
 .wow-browse .flix-h{font-size:clamp(30px,9.4vw,44px)}
 .wow-browse .flix-tile .bx-art{place-items:start center;padding-top:18%}
 .wow-browse .flix-tile .bx-art svg{width:38%;margin:0}
 .wow-browse .flix-tile .bx-days{margin:0;font-size:44px}
 .wow-browse .flix-tile .bx-photo{height:62%;object-position:6% 40%}
 .wow-browse .flix-tile .bx-photo-cut{top:4%;height:60%;object-position:50% 100%}
}

/* ---------- Feature tiles (Meet Bryan, How it works, Guides): icon art in brand colors ---------- */
.wow-browse .bx-art{display:grid;place-items:center}
.wow-browse .bx-art svg{width:34%;max-width:96px;height:auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:#d5ff83;margin-bottom:12%;
 filter:drop-shadow(0 8px 20px #0006)}
.wow-browse .flix-tile.bx-t-ink{background:radial-gradient(90% 80% at 80% 0%,#2a3b7a,#0b1233)}
.wow-browse .flix-tile.bx-t-cobalt{background:radial-gradient(90% 80% at 80% 0%,#3d6bff,#123ab8)}
.wow-browse .flix-tile.bx-t-navy{background:radial-gradient(90% 80% at 80% 0%,#1f3a8f,#071238)}
.wow-browse .flix-tile.bx-t-violet{background:radial-gradient(90% 80% at 80% 0%,#6a55ff,#2a1d8f)}
.wow-browse .flix-tile.bx-t-teal{background:radial-gradient(90% 80% at 80% 0%,#1fb5a3,#0b4f6b)}
.wow-browse .flix-tile.bx-t-lime{background:radial-gradient(90% 80% at 80% 0%,#e6ffb5,#9fd34a)}
.wow-browse .flix-tile.bx-t-lime .bx-art svg{color:#0b1a4f;filter:none}
.wow-browse .flix-tile.bx-t-lime .flix-art::after{background:linear-gradient(180deg,#0b1a4f00 40%,#0b1a4fcc 82%,#0b1a4ff2 100%)}
.wow-browse .bx-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.wow-browse .bx-photo-cut{object-fit:contain;object-position:50% 100%;top:8%;height:92%}
.wow-browse .bx-days{font:800 clamp(46px,5vw,84px)/1 Barlow,Arial,sans-serif;color:#d5ff83;margin-bottom:16%;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- Always-visible rows under the genre row ---------- */
.wow-browse .bx-rows{margin-top:clamp(8px,1.4vw,22px)}
.wow-browse .bx-rows .flix-row{margin-top:clamp(10px,1.2vw,18px)}

/* ---------- Sheets ---------- */
dialog.bx-sheet{position:fixed;inset:0;margin:auto;width:min(1240px,calc(100vw - 48px));height:min(92vh,1100px);max-width:none;max-height:none;padding:0;border:0;border-radius:26px;
 background:#fff;color:#151815;overflow:hidden;box-shadow:0 50px 120px -30px #000c;display:flex;flex-direction:column}
/* a closed sheet keeps its layout (charts and motion measure real sizes) but is invisible, unfocusable and out of the way */
dialog.bx-sheet:not([open]){visibility:hidden;pointer-events:none;z-index:-1;contain:layout paint}
dialog.bx-sheet[open]{animation:bxUp .42s cubic-bezier(.16,1,.3,1)}
dialog.bx-sheet::backdrop{background:#050d2ecc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:bxFade .3s ease}
@keyframes bxUp{from{opacity:0;transform:translateY(40px) scale(.985)}to{opacity:1;transform:none}}
@keyframes bxFade{from{opacity:0}to{opacity:1}}
.bx-sheet-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px 24px;background:#071238;color:#fff}
.bx-sheet-title{margin:0;font:700 clamp(18px,1.6vw,24px)/1 Barlow,Arial,sans-serif;text-transform:uppercase;letter-spacing:.02em}
.bx-close{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#ffffff1f;color:#fff;cursor:pointer;transition:background-color .2s ease}
.bx-close:hover{background:#ffffff38}
.bx-close:focus-visible{outline:3px solid #d5ff83;outline-offset:2px}
.bx-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.bx-sheet-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.bx-sheet-body>*{margin-top:0!important;margin-bottom:0!important}
.bx-sheet-body section{scroll-margin-top:12px}
html.bx-lock{overflow:hidden}
@media (max-width:899px){
 dialog.bx-sheet{width:100vw;height:calc(100dvh - 28px);margin:28px 0 0;inset:auto 0 0 0;border-radius:22px 22px 0 0}
 .bx-sheet-bar{padding:8px 10px 8px 18px}
}
@media (prefers-reduced-motion:reduce){dialog.bx-sheet[open],dialog.bx-sheet::backdrop{animation:none}}

/* the founder note in a sheet is narrower than the page: keep its text clear of the cutout photo */
@media (min-width:900px){.bx-sheet #meet-bryan .ms-founder-message>p:first-child{max-width:min(620px,52vw)}}

/* ---------- How to use the browser: a one-line hint under the heading, and a swipe cue on phone rows ---------- */
.wow-browse .bx-head{display:flex;flex-direction:column;gap:10px}
.wow-browse .bx-hint{display:flex;align-items:center;gap:8px;margin:0;font:600 15px/1.3 Manrope,Arial,sans-serif;color:#ffffffd9}
.wow-browse .bx-hint svg{flex:none;width:20px;height:20px;fill:none;stroke:#d5ff83;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wow-browse .bx-hint-short{display:none}
.wow-browse .bx-swipe{display:none}

/* ---------- Phone first screen (Bryan, October 18): headline, then the browser, then Featured In, all on the first screen.
   The hero and the browser release their pieces into one column (display:contents keeps every selector matching),
   and the pieces are ordered: headline, genres, the genre's row, proof band, booking call, featured card, more rows. ---------- */
@media (max-width:899px){
 .tx-preview #main{display:flex;flex-direction:column}
 .tx-preview #main>*{order:30}
 .tx-preview #main>.mf-hero,.tx-preview #main>.mf-hero>.tx-hero,.tx-preview #main>.mf-hero .tx-bold,.tx-preview #main>#people.wow-browse{display:contents!important}
 .tx-preview #main>.mf-hero::before,.tx-preview #main>.mf-hero::after,.tx-preview #main .tx-hero::before,.tx-preview #main .tx-hero::after,
 .tx-preview #main>#people::before,.tx-preview #main>#people::after{content:none!important;display:none!important}

 /* card one: the brand blue */
 .tx-preview #main .mf-hero .tx-bold-h1,.tx-preview #main #people .flix-top,.tx-preview #main #people .flix-rows,
 .tx-preview #main .mf-hero .tx-proof,.tx-preview #main .mf-hero .tx-bold-row,.tx-preview #main .mf-hero .mf-hero-meta{
  margin-left:8px!important;margin-right:8px!important;background:#174cf2;box-sizing:border-box;width:auto!important;max-width:none!important}
 .tx-preview #main .mf-hero .tx-bold-brand,.tx-preview #main .mf-hero .tx-bold-line{display:none!important}
 .tx-preview #main .mf-hero .tx-bold-h1{order:1!important;margin-top:8px!important;margin-bottom:0!important;padding:18px 18px 2px!important;border-radius:24px 24px 0 0;
  font-size:min(38px,9.7vw)!important;line-height:.95!important;white-space:nowrap}
 .tx-preview #main .mf-hero .tx-bold-h1 span{display:inline!important}
 .tx-preview #main #people .flix-top{order:2!important;padding:12px 18px 2px!important;gap:10px}
 .tx-preview #main #people .bx-head{gap:6px}
 .tx-preview #main #people .flix-h{font-size:19px!important;line-height:1.05}
 .tx-preview #main #people .flix-h span{display:inline!important}
 .tx-preview #main #people .bx-hint{font-size:13px}
 .tx-preview #main #people .bx-hint svg{width:18px;height:18px}
 .tx-preview #main #people .bx-hint-long{display:none}
 .tx-preview #main #people .bx-hint-short{display:inline}
 .tx-preview #main #people .flix-top{display:block!important}
 .tx-preview #main #people .flix-genres{scroll-padding-inline:18px;margin:10px -18px 0!important;padding:2px 18px 4px!important;width:auto!important;min-width:0!important;max-width:none!important}
 .tx-preview #main #people .flix-chip{flex-basis:70px!important;padding:8px 2px 7px!important;gap:4px!important}
 .tx-preview #main #people .flix-chip .fc-ico svg{width:18px;height:18px}
 .tx-preview #main #people .flix-chip:not(.is-on){background:#ffffff1f;border-color:#ffffff4d}
 .tx-preview #main #people .flix-rows{order:3!important;padding:4px 0 8px!important;margin-top:0!important}
 .tx-preview #main #people .flix-rows .flix-row{margin:0!important;padding:0!important}
 .tx-preview #main .mf-hero .tx-proof{order:4!important;margin-top:0!important;margin-bottom:0!important}
 .tx-preview #main .mf-hero .tx-bold-row{order:5!important;margin-top:0!important;padding:16px 18px 20px!important}
 .tx-preview #main .mf-hero .mf-hero-meta{display:none!important}


 /* card two: the featured card and the always-on rows, on the browser navy */
 .tx-preview #main #people .flix-billboard{order:7!important;margin:8px 8px 0!important}
 .tx-preview #main #people .bx-rows{order:8!important;margin:8px 8px 0!important;padding:14px 0 4px;border-radius:24px 24px 0 0;background:#071238}
 .tx-preview #main #people .flix-fine{order:9!important;margin:0 8px 8px!important;padding:6px 18px 18px;border-radius:0 0 24px 24px;background:#071238}
 .tx-preview #main #people .flix-pop{order:10!important}

 /* every browse row is one swipeable line; the cut-off tile at the edge says "there's more" */
 .wow-browse .flix-rail{overflow:visible}
 .wow-browse :is(.flix-rows,.bx-rows,.flix-row,.flix-rail,.flix-track){min-width:0!important;max-width:100%}
 .tx-preview #main #people :is(.flix-rows,.bx-rows){display:block!important}
 .wow-browse .flix-track{display:flex!important;grid-template-columns:none!important;gap:8px!important;padding:6px 18px 6px!important;margin:0!important;
  overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;scroll-padding-inline:18px;overscroll-behavior-x:contain;scrollbar-width:none}
 .wow-browse .flix-track::-webkit-scrollbar{display:none}
 .wow-browse .flix-item{flex:0 0 31vw!important;width:31vw!important;max-width:150px;scroll-snap-align:start}
 .wow-browse .flix-tile{aspect-ratio:4/5!important}
 .wow-browse .flix-row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 18px!important;margin:0!important}
 .wow-browse .flix-row-title{font-size:15px!important;margin:0!important}
 .wow-browse .flix-row-head .flix-all{display:none!important}
 .wow-browse .bx-swipe{display:inline-flex;align-items:center;gap:2px;font:800 11px/1 Manrope,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#d5ff83}
 .wow-browse .bx-swipe svg{width:14px;height:14px;animation:bxNudge 1.4s ease-in-out 1.2s 3}
 @keyframes bxNudge{0%,100%{transform:none}50%{transform:translateX(5px)}}
}
@media (max-width:899px) and (prefers-reduced-motion:reduce){.wow-browse .bx-swipe svg{animation:none}}


/* ---------- Round two (Bryan, October 18): Featured In stays on the first phone screen, the two stats move below it,
   and the browser gets the cinematic treatment: deep navy, big photo cards, light from the pictures, a pull-up sheet. ---------- */
.wow-browse .flix-rows{position:relative;isolation:isolate}
.wow-browse .flix-rows::before{content:"";position:absolute;inset:-12% -8% -4%;z-index:-1;pointer-events:none;background:var(--bx-amb,none) 50% 30%/cover no-repeat;
 filter:blur(42px) saturate(1.7) brightness(1.1);opacity:0;transform:scale(1.15);transition:opacity .9s ease,background-image .7s ease}
.wow-browse .flix-rows.bx-lit::before{opacity:.5}
.wow-browse .flix-rows::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 70% at 50% 0%,#0000 40%,#05103a99 100%)}

/* service cards are photo cards now */
.wow-browse .flix-tile.is-svc .flix-art img{object-position:50% var(--oy,25%)}

/* sheets: the copy rises in under the picture that just grew from the card */
.tx-preview .mf-strategy-dialog[open] .mf-dialog-copy{animation:bxCopy .55s .3s cubic-bezier(.16,1,.3,1) both}
@keyframes bxCopy{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.tx-preview .bx-svc-dialog .bx-svc-kicker{position:relative;margin:0 0 10px;color:#d5ff83;font:800 13px/1 Manrope,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 2px 12px #000a}
::view-transition-group(bx-pull){animation-duration:.62s;animation-timing-function:cubic-bezier(.2,.9,.22,1);z-index:10}
::view-transition-old(bx-pull),::view-transition-new(bx-pull){width:100%;height:100%;object-fit:cover;overflow:clip}
::view-transition-old(bx-pull){animation-duration:.3s}
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s}
@media (prefers-reduced-motion:reduce){.tx-preview .mf-strategy-dialog[open] .mf-dialog-copy{animation:none}}

@media (max-width:899px){
 /* the stats leave the first screen: the band's pieces join the column on their own */
 .tx-preview #main{flex-flow:row wrap!important;align-items:flex-start}
 .tx-preview #main>*{flex:1 1 100%;min-width:0}
 .tx-preview #main .mf-hero .tx-proof,.tx-preview #main .mf-hero .tx-proof-row{display:contents!important}
 .tx-preview #main .mf-hero :is(.tx-bold-h1,.tx-bold-row),.tx-preview #main #people :is(.flix-top,.flix-rows,.flix-billboard,.bx-rows,.flix-fine,.flix-pop){flex:1 1 100%;min-width:0}
 .tx-preview #main .mf-hero .tx-proof-row>.ms-featured{order:4!important;flex:1 1 100%;min-width:0;margin:0 8px!important;padding:12px 18px 18px!important;
  background:linear-gradient(180deg,#081650,#071444);border:0!important;box-sizing:border-box;width:auto!important;max-width:none!important}
 .tx-preview #main .mf-hero .tx-proof-row>.tx-stat{order:6!important;align-self:stretch;flex:1 1 40%;min-width:0;margin:0!important;padding:16px 10px 22px!important;background:#071340;
  box-sizing:border-box;justify-content:center;text-align:center;border-top:1px solid #ffffff1f!important}
 .tx-preview #main .mf-hero .tx-proof-row>.tx-stat:first-child{margin-left:8px!important;border-radius:0 0 0 24px;border-right:1px solid #ffffff1f!important}
 .tx-preview #main .mf-hero .tx-proof-row>.tx-stat:nth-child(2){margin-right:8px!important;border-radius:0 0 24px 0}
 .tx-preview #main .mf-hero .tx-bold-row{background:#071444!important;margin-bottom:0!important}

 /* cinematic card: bright brand blue at the top, deep navy where the pictures play */
 .tx-preview #main #people .flix-top{background:linear-gradient(180deg,#174cf2 0%,#1238c2 45%,#0b2072 100%)!important}
 .tx-preview #main #people .flix-rows{background:linear-gradient(180deg,#0b2072 0%,#081650 100%)!important;overflow:hidden}
 .tx-preview #main #people .flix-genres{-webkit-mask:linear-gradient(90deg,#000 86%,#0000);mask:linear-gradient(90deg,#000 86%,#0000)}

 /* bigger cards: two and a bit on screen, so the row clearly keeps going */
 .wow-browse .flix-item{flex:0 0 38vw!important;width:38vw!important;max-width:180px}
 .wow-browse .flix-tile{border-radius:14px!important;box-shadow:0 18px 34px -16px #000e,inset 0 0 0 1px #ffffff24!important}
 .wow-browse .flix-tile .flix-name{font-size:18px!important;text-shadow:0 2px 14px #000c}
 .wow-browse .flix-tile:is(.is-service,.is-feature) .flix-name{font-size:17px!important}
 .wow-browse .flix-tile.mf-strategy .flix-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 45%,#050d2ed9 100%);pointer-events:none}
 .wow-browse .flix-tile.mf-strategy .flix-tag{display:none!important}
}


/* ---------- Focus group fixes (Bryan, October 18) ---------- */
/* the sheet's close button sat half above the sheet: its toolbar is zero-height, so pin the button to the top instead of centering it */
.tx-preview .mf-strategy-dialog .mf-dialog-toolbar{align-items:flex-start}

/* 13 posters have a torn-paper frame that read as broken: zoom past the frame everywhere they appear */
.wow-browse .flix-art img[src*="poster-amt-planning.webp"],.wow-browse .flix-art img[src*="poster-augusta-rule.webp"],.wow-browse .flix-art img[src*="poster-bunching-deductions.webp"],.wow-browse .flix-art img[src*="poster-cost-segregation.webp"],.wow-browse .flix-art img[src*="poster-exchange-1031.webp"],.wow-browse .flix-art img[src*="poster-locums-s-corp.webp"],.wow-browse .flix-art img[src*="poster-mega-backdoor-roth.webp"],.wow-browse .flix-art img[src*="poster-moonlighting-structure.webp"],.wow-browse .flix-art img[src*="poster-multi-state-nexus.webp"],.wow-browse .flix-art img[src*="poster-reps.webp"],.wow-browse .flix-art img[src*="poster-roth-conversions.webp"],.wow-browse .flix-art img[src*="poster-side-gig-1099.webp"],.wow-browse .flix-art img[src*="poster-tax-loss-harvesting.webp"],
.tx-preview .mf-dialog-photo img[src*="poster-amt-planning.webp"],.tx-preview .mf-dialog-photo img[src*="poster-augusta-rule.webp"],.tx-preview .mf-dialog-photo img[src*="poster-bunching-deductions.webp"],.tx-preview .mf-dialog-photo img[src*="poster-cost-segregation.webp"],.tx-preview .mf-dialog-photo img[src*="poster-exchange-1031.webp"],.tx-preview .mf-dialog-photo img[src*="poster-locums-s-corp.webp"],.tx-preview .mf-dialog-photo img[src*="poster-mega-backdoor-roth.webp"],.tx-preview .mf-dialog-photo img[src*="poster-moonlighting-structure.webp"],.tx-preview .mf-dialog-photo img[src*="poster-multi-state-nexus.webp"],.tx-preview .mf-dialog-photo img[src*="poster-reps.webp"],.tx-preview .mf-dialog-photo img[src*="poster-roth-conversions.webp"],.tx-preview .mf-dialog-photo img[src*="poster-side-gig-1099.webp"],.tx-preview .mf-dialog-photo img[src*="poster-tax-loss-harvesting.webp"],
.wow-browse .flix-bb-media img[src*="poster-amt-planning.webp"],.wow-browse .flix-bb-media img[src*="poster-augusta-rule.webp"],.wow-browse .flix-bb-media img[src*="poster-bunching-deductions.webp"],.wow-browse .flix-bb-media img[src*="poster-cost-segregation.webp"],.wow-browse .flix-bb-media img[src*="poster-exchange-1031.webp"],.wow-browse .flix-bb-media img[src*="poster-locums-s-corp.webp"],.wow-browse .flix-bb-media img[src*="poster-mega-backdoor-roth.webp"],.wow-browse .flix-bb-media img[src*="poster-moonlighting-structure.webp"],.wow-browse .flix-bb-media img[src*="poster-multi-state-nexus.webp"],.wow-browse .flix-bb-media img[src*="poster-reps.webp"],.wow-browse .flix-bb-media img[src*="poster-roth-conversions.webp"],.wow-browse .flix-bb-media img[src*="poster-side-gig-1099.webp"],.wow-browse .flix-bb-media img[src*="poster-tax-loss-harvesting.webp"],
.wow-browse .flix-pop .pop-media img[src*="poster-amt-planning.webp"],.wow-browse .flix-pop .pop-media img[src*="poster-augusta-rule.webp"],.wow-browse .flix-pop .pop-media img[src*="poster-bunching-deductions.webp"],.wow-browse .flix-pop .pop-media img[src*="poster-cost-segregation.webp"],.wow-browse .flix-pop .pop-media img[src*="poster-exchange-1031.webp"],.wow-browse .flix-pop .pop-media img[src*="poster-locums-s-corp.webp"],.wow-browse .flix-pop .pop-media img[src*="poster-mega-backdoor-roth.webp"],.wow-browse .flix-pop .pop-media img[src*="poster-moonlighting-structure.webp"],.wow-browse .flix-pop .pop-media img[src*="poster-multi-state-nexus.webp"],.wow-browse .flix-pop .pop-media img[src*="poster-reps.webp"],.wow-browse .flix-pop .pop-media img[src*="poster-roth-conversions.webp"],.wow-browse .flix-pop .pop-media img[src*="poster-side-gig-1099.webp"],.wow-browse .flix-pop .pop-media img[src*="poster-tax-loss-harvesting.webp"]{transform-origin:50% 45%!important;scale:1.3!important}

/* the photo glow made the desktop rows look hazy: phones only */
@media (min-width:900px){.wow-browse .flix-rows::before,.wow-browse .flix-rows::after{display:none!important}}

/* photo tiles never look blank while the picture loads */
.wow-browse .bx-art:has(.bx-photo){background:radial-gradient(70% 60% at 50% 35%,#ffffff2e,#ffffff00) no-repeat,
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff66' stroke-width='1.4'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E") 50% 30%/34% auto no-repeat}

/* Bryan's face and "CPA" right under the headline; it opens his note */
.tx-preview .bx-byline{display:inline-flex;align-items:center;gap:10px;margin:18px 0 0;padding:6px 14px 6px 6px;border:1px solid #ffffff40;border-radius:999px;
 background:#ffffff14;color:#fff;font:inherit;text-align:left;cursor:pointer;transition:background-color .2s ease}
.tx-preview .bx-byline:hover{background:#ffffff26}
.tx-preview .bx-byline:focus-visible{outline:3px solid #d5ff83;outline-offset:3px}
.tx-preview .bx-byline-pic{flex:none;width:42px;height:42px;border-radius:50%;overflow:hidden;background:#d5ff83;box-shadow:0 0 0 2px #fff}
.tx-preview .bx-byline-pic img{display:block;width:100%;height:auto;margin-top:3px}
.tx-preview .bx-byline-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.tx-preview .bx-byline-text strong{font:800 15px/1.1 Manrope,Arial,sans-serif}
.tx-preview .bx-byline-text span{font:600 12.5px/1.25 Manrope,Arial,sans-serif;color:#ffffffcc}
.tx-preview .bx-byline>svg{flex:none;width:16px;height:16px;color:#d5ff83}
@media (max-width:899px){
 .tx-preview #main .mf-hero .bx-byline{order:1!important;flex:1 1 100%;min-width:0;display:flex;margin:0 8px!important;padding:8px 18px 10px;border:0;border-radius:0;background:#174cf2}
 .tx-preview #main .mf-hero .bx-byline-pic{width:36px;height:36px}
 .tx-preview #main .mf-hero .bx-byline-text strong{font-size:14px}
 .tx-preview #main .mf-hero .bx-byline-text span{font-size:12px}
}

/* ---------- Tall cards with one sentence each (Bryan, October 18): portrait cards, the title and its sentence stacked
   at the bottom of the picture on a deep shade. The picture fills the card; the card stays one tap target. ---------- */
.wow-browse .flix-row .flix-item{width:clamp(200px,15vw,260px)!important}
.wow-browse .flix-row .flix-tile{display:flex!important;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:5px;position:relative;
 aspect-ratio:3/4!important;height:auto!important;padding:0 14px 14px!important;border-radius:12px!important;overflow:hidden!important;text-align:left}
.wow-browse .flix-row .flix-tile::after{content:none!important}
.wow-browse .flix-row .flix-tile .flix-art{position:absolute!important;inset:0!important;z-index:0}
.wow-browse .flix-row .flix-tile .flix-art img{object-position:50% 30%}
.wow-browse .flix-row .flix-tile .flix-art::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,#050d2e00 30%,#050d2e8c 55%,#050d2ef2 100%)}
.wow-browse .flix-row .flix-tile .flix-name{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;transform:none!important;
 margin:0!important;z-index:2;font-size:clamp(18px,1.35vw,22px)!important;line-height:.98!important;pointer-events:none}
.wow-browse .flix-row .flix-tile .flix-tag{display:none!important}
.wow-browse .flix-row .flix-tile .bx-sub{position:relative;z-index:2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
 font:500 13.5px/1.35 Manrope,Arial,sans-serif;color:#ffffffd9;text-shadow:0 1px 8px #000a;white-space:normal;pointer-events:none}
/* icon cards: the icon sits in the top half, clear of the words */
.wow-browse .flix-row .flix-tile .flix-art.bx-art{display:grid;place-items:start center;padding-top:22%}
.wow-browse .flix-row .flix-tile .bx-art svg{width:34%;margin:0}
.wow-browse .flix-row .flix-tile .bx-days{margin:0;font-size:clamp(46px,4vw,64px)}
.wow-browse .flix-row .flix-tile .bx-photo-cut{top:6%;height:58%;object-position:50% 100%}
.wow-browse .flix-row .flix-tile .bx-photo:not(.bx-photo-cut){height:60%;object-position:8% 40%}
@media (max-width:899px){
 .wow-browse .flix-row .flix-item{flex:0 0 37vw!important;width:37vw!important;max-width:170px}
 .wow-browse .flix-row .flix-tile{padding:0 9px 10px!important;gap:4px}
 .wow-browse .flix-row .flix-tile .flix-name{font-size:15px!important}
 .wow-browse .flix-row .flix-tile .bx-sub{font-size:11.5px;line-height:1.3}
 .wow-browse .flix-row .flix-tile .bx-days{font-size:38px}
}
@media (hover:hover) and (pointer:fine){
 .wow-browse .flix-row .flix-tile:hover{transform:translateY(-4px);box-shadow:0 22px 40px -20px #000}
 .wow-browse .flix-row .flix-tile:hover .bx-sub{color:#fff}
}

/* stopgap until the clean card photos arrive: the wide sheet crop can still catch a sliver of a torn frame at the top, so fade it into the sheet */
.tx-preview .mf-dialog-photo:has(img[src*="poster-amt-planning.webp"])::before,.tx-preview .mf-dialog-photo:has(img[src*="poster-augusta-rule.webp"])::before,.tx-preview .mf-dialog-photo:has(img[src*="poster-bunching-deductions.webp"])::before,.tx-preview .mf-dialog-photo:has(img[src*="poster-cost-segregation.webp"])::before,.tx-preview .mf-dialog-photo:has(img[src*="poster-exchange-1031.webp"])::before,.tx-preview .mf-dialog-photo:has(img[src*="poster-locums-s-corp.webp"])::before,.tx-preview .mf-dialog-photo:has(img[src*="poster-mega-backdoor-roth.webp"])::before,.tx-preview .mf-dialog-photo:has(img[src*="poster-moonlighting-structure.webp"])::before,.tx-preview .mf-dialog-photo:has(img[src*="poster-multi-state-nexus.webp"])::before,.tx-preview .mf-dialog-photo:has(img[src*="poster-reps.webp"])::before,.tx-preview .mf-dialog-photo:has(img[src*="poster-roth-conversions.webp"])::before,.tx-preview .mf-dialog-photo:has(img[src*="poster-side-gig-1099.webp"])::before,.tx-preview .mf-dialog-photo:has(img[src*="poster-tax-loss-harvesting.webp"])::before{content:"";position:absolute;inset:0 0 auto;height:22%;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0b163f 0%,#0b163fcc 40%,#0b163f00 100%)}

/* ---------- Motion cards: animated scenes for "Working with Taxstra" and "Guides and tools" (browse.js adds the SVG).
   Ids in the selectors keep these above the cinema card styles; scenes play only while on screen (.is-live). ---------- */
.tx-preview #people .flix-tile.bxm-card .flix-art img{display:none!important}
.tx-preview #people .flix-tile.bxm-card .flix-art{--glow:#1f46c8;background:radial-gradient(120% 85% at 50% 8%,var(--glow) 0%,#0b1a4f 46%,#07121f 100%)!important}
.tx-preview #people .flix-tile.bxm-k-pieces .flix-art,.tx-preview #people .flix-tile.bxm-k-tiles .flix-art{--glow:#0f6f86}
.tx-preview #people .flix-tile.bxm-k-plan .flix-art,.tx-preview #people .flix-tile.bxm-k-nodes .flix-art{--glow:#4a3bc9}
.tx-preview #people .flix-tile.bxm-k-year .flix-art,.tx-preview #people .flix-tile.bxm-k-bars .flix-art{--glow:#1d5bd6}
.tx-preview #people .flix-tile.bxm-card .bxm{position:absolute;left:50%;top:6%;z-index:1;width:68%;max-width:250px;height:auto;transform:translateX(-50%);overflow:visible;pointer-events:none;
 transition:transform .5s cubic-bezier(.16,1,.3,1),filter .5s ease}
@media (hover:hover) and (pointer:fine){.tx-preview #people .flix-tile.bxm-card:hover .bxm{transform:translateX(-50%) scale(1.05);filter:drop-shadow(0 10px 24px #d5ff8333)}}
.bxm *{transform-box:fill-box;transform-origin:center}
.bxm .m-ln{fill:#ffffffc4}.bxm .m-dim{fill:#ffffff33}.bxm .m-fill{fill:#ffffff1f;stroke:#ffffff6b;stroke-width:1.5}
.bxm .m-lime{fill:#d5ff83}.bxm .m-cobalt{fill:#5b86ff}.bxm .m-dark{fill:#0b1a4f}.bxm .m-darkS{fill:none;stroke:#0b1a4f;stroke-width:2;stroke-linecap:round}
.bxm .m-stroke{fill:#ffffff0d;stroke:#ffffff8c;stroke-width:2}.bxm .m-strokeS{fill:none;stroke:#ffffffa6;stroke-width:1.8;stroke-linecap:round}
.bxm .m-check{fill:none;stroke:#d5ff83;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.bxm .m-dots circle,.bxm .m-reply rect{fill:#0b1a4f}

/* every scene loops; paused until it scrolls into view, so nothing runs off screen (this beats the page's off-screen pause) */
.bxm,.bxm *{animation-duration:var(--t,8s);animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both}
.tx-preview #people .bxm:not(.is-live) *{animation-play-state:paused!important}
.tx-preview #people .bxm.is-live *{animation-play-state:running!important}

/* 01 Start with a conversation: you speak, we answer, the call is booked */
.bxm-talk .m-a{animation-name:bxmA}
.bxm-talk .m-b{animation-name:bxmB}
.bxm-talk .m-dots{animation-name:bxmDots}
.bxm-talk .m-dots circle{animation:bxmBounce .9s ease-in-out infinite}
.bxm-talk .m-dots circle:nth-child(2){animation-delay:.15s}.bxm-talk .m-dots circle:nth-child(3){animation-delay:.3s}
.bxm-talk .m-reply{transform-origin:left center;animation-name:bxmReply}
.bxm-talk .m-cal{animation-name:bxmCal}
.bxm-talk .m-check{animation-name:bxmCheckTalk}
@keyframes bxmA{0%{opacity:0;transform:translateY(10px) scale(.92)}8%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
@keyframes bxmB{0%,14%{opacity:0;transform:translateY(10px) scale(.92)}22%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
@keyframes bxmDots{0%,20%{opacity:0}24%,44%{opacity:1}48%,100%{opacity:0}}
@keyframes bxmBounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}
@keyframes bxmReply{0%,46%{opacity:0;transform:scaleX(.2)}54%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bxmCal{0%,56%{opacity:0;transform:translateY(12px) scale(.9)}64%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes bxmCheckTalk{0%,64%{stroke-dashoffset:1}74%,100%{stroke-dashoffset:0}}

/* 02 Understand your full picture: the scattered pieces come together, then get looked at as one */
.bxm-pieces{--t:9s}
.bxm-pieces .m-pc{animation-name:bxmGather}
.bxm-pieces .m-pc:nth-of-type(2){animation-delay:.08s}.bxm-pieces .m-pc:nth-of-type(3){animation-delay:.16s}.bxm-pieces .m-pc:nth-of-type(4){animation-delay:.24s}
.bxm-pieces .m-pc:nth-of-type(5){animation-delay:.32s}.bxm-pieces .m-pc:nth-of-type(6){animation-delay:.4s}.bxm-pieces .m-pc:nth-of-type(7){animation-delay:.48s}
.bxm-pieces .m-frame{fill:#ffffff08;stroke:#d5ff83;stroke-width:2;stroke-dasharray:1;animation-name:bxmFrame}
.bxm-pieces .m-scan{fill:#d5ff83;opacity:0;animation-name:bxmScan;animation-timing-function:ease-in-out}
@keyframes bxmGather{0%,6%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:.55}34%,88%{transform:none;opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:.55}}
@keyframes bxmFrame{0%,30%{stroke-dashoffset:1;opacity:.4}44%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes bxmScan{0%,44%{opacity:0;transform:translateX(0)}48%{opacity:.9}66%{opacity:.9;transform:translateX(134px)}70%,100%{opacity:0;transform:translateX(134px)}}

/* 03 Build your tax plan: the plan writes itself, line by line, each step checked */
.bxm-plan{--t:8s}
.bxm-plan .m-doc{fill:#ffffff0f;stroke:#ffffffa6;stroke-width:2;stroke-dasharray:1;animation-name:bxmDoc}
.bxm-plan .m-head{transform-origin:left center;animation-name:bxmHead}
.bxm-plan .m-line{transform-origin:left center;animation-name:bxmLine;animation-delay:calc(var(--i)*.55s)}
.bxm-plan .m-check{animation-name:bxmTick;animation-delay:calc(var(--i)*.55s)}
@keyframes bxmDoc{0%{stroke-dashoffset:1}18%,92%{stroke-dashoffset:0;opacity:1}100%{opacity:.4}}
@keyframes bxmHead{0%,14%{transform:scaleX(0)}22%,92%{transform:none}100%{transform:scaleX(0)}}
@keyframes bxmLine{0%,20%{transform:scaleX(0)}32%,90%{transform:none}100%{transform:scaleX(0)}}
@keyframes bxmTick{0%,30%{stroke-dashoffset:1}38%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}

/* 04 Put the plan to work: the year moves forward and each quarterly check-in lights up */
.bxm-year{--t:8s}
.bxm-year .m-track{stroke:#ffffff40;stroke-width:4;stroke-linecap:round}
.bxm-year .m-tick{stroke:#ffffff4d;stroke-width:2;stroke-linecap:round}
.bxm-year .m-prog{transform-origin:left center;animation-name:bxmProg;animation-timing-function:linear}
.bxm-year .m-rider{animation-name:bxmRider;animation-timing-function:linear}
.bxm-year .m-node{fill:#0b1a4f;stroke:#ffffff8c;stroke-width:2;animation-name:bxmNode;animation-delay:calc(var(--i)*1.6s - 1.6s)}
.bxm-year .m-ring{fill:none;stroke:#d5ff83;stroke-width:2;opacity:0;animation-name:bxmRing;animation-delay:calc(var(--i)*1.6s - 1.6s)}
.bxm-year .m-cal2{animation:bxmFloat 4s ease-in-out infinite}
@keyframes bxmProg{0%{transform:scaleX(0)}80%,94%{transform:none}100%{transform:none;opacity:0}}
@keyframes bxmRider{0%{transform:translateX(0)}80%,94%{transform:translateX(184px)}100%{transform:translateX(184px);opacity:0}}
@keyframes bxmNode{0%,18%{fill:#0b1a4f}20%,94%{fill:#d5ff83;stroke:#d5ff83}100%{fill:#0b1a4f}}
@keyframes bxmRing{0%,18%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(.6)}34%,100%{opacity:0;transform:scale(1.5)}}
@keyframes bxmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* State guides: a wave of light crosses the map; a few states glow as if just compared */
.bxm-tiles .m-t{fill:#ffffff40;animation-name:bxmTile;animation-duration:6s;animation-delay:var(--d);animation-timing-function:ease-in-out}
.bxm-tiles .m-hot{animation-name:bxmHot;animation-duration:6s;animation-delay:calc(var(--h)*1.2s)}
@keyframes bxmTile{0%,100%{fill:#ffffff38}10%{fill:#9fb8ff}22%{fill:#ffffff38}}
@keyframes bxmHot{0%,100%{fill:#ffffff38}8%,26%{fill:#d5ff83}36%{fill:#ffffff38}}

/* Calculator: keys tap, the answer fills in, a check */
.bxm-calc{--t:7s}
.bxm-calc .m-k{fill:#ffffff24;animation-name:bxmKey;animation-delay:calc(var(--d)*.14s)}
.bxm-calc .m-disp{transform-origin:left center;animation-name:bxmDisp}
.bxm-calc .m-ok{fill:#d5ff83;animation-name:bxmOk}
@keyframes bxmKey{0%,100%{fill:#ffffff24;transform:none}4%{fill:#d5ff83;transform:scale(.88)}10%{fill:#ffffff24;transform:none}}
@keyframes bxmDisp{0%,30%{transform:scaleX(.08)}62%,90%{transform:none}100%{transform:scaleX(.08)}}
@keyframes bxmOk{0%,62%{opacity:0;transform:scale(.3)}68%,90%{opacity:1;transform:none}100%{opacity:0}}

/* Stay connected: documents arrive in the portal, one uploads, the lock holds, a call rings */
.bxm-portal{--t:8s}
.bxm-portal .m-card{animation-name:bxmCard;animation-delay:calc(var(--i)*.45s)}
.bxm-portal .m-up{transform-origin:left center;animation-name:bxmUp}
.bxm-portal .m-lock{animation:bxmLock 2.8s ease-in-out infinite}
.bxm-portal .m-wave{fill:none;stroke:#d5ff83;stroke-width:2.5;stroke-linecap:round;animation:bxmWave 2.4s ease-out infinite}
.bxm-portal .m-wave2{animation-delay:.4s}
@keyframes bxmCard{0%{opacity:0;transform:translateY(14px)}10%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
@keyframes bxmUp{0%,24%{transform:scaleX(0)}56%,88%{transform:none}100%{transform:none}}
@keyframes bxmLock{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes bxmWave{0%{opacity:0;transform:translateX(6px)}30%{opacity:1}100%{opacity:0;transform:translateX(-8px)}}

/* The numbers: change an input and the bars rebalance; the trend line redraws */
.bxm-bars{--t:9s}
.bxm-bars .m-bar{fill:#ffffff38;transform-origin:50% 100%;animation-name:bxmBar;animation-timing-function:cubic-bezier(.45,0,.2,1)}
.bxm-bars .m-bar.m-lime{fill:#d5ff83}
.bxm-bars .m-spark{fill:none;stroke:#ffffffd9;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;animation-name:bxmSpark}
.bxm-bars .m-dot{fill:#d5ff83;animation-name:bxmDot;animation-timing-function:linear}
@keyframes bxmBar{0%,100%{transform:scaleY(var(--a))}33%{transform:scaleY(var(--b))}66%{transform:scaleY(var(--c))}}
@keyframes bxmSpark{0%{stroke-dashoffset:1}40%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@keyframes bxmDot{0%{transform:translate(0,0)}8%{transform:translate(32px,-24px)}16%{transform:translate(60px,-12px)}24%{transform:translate(88px,-50px)}32%{transform:translate(116px,-36px)}40%,86%{transform:translate(156px,-80px)}100%{transform:translate(156px,-80px);opacity:0}}

/* Your planning map: strategies connect to your situation at the center, one by one */
.bxm-nodes{--t:8s}
.bxm-nodes .m-link{fill:none;stroke:#ffffff8c;stroke-width:2;stroke-dasharray:1;animation-name:bxmLink;animation-delay:calc(var(--i)*.35s)}
.bxm-nodes .m-pt{fill:#ffffff40;stroke:#ffffffb3;stroke-width:1.5;animation-name:bxmPt;animation-delay:calc(var(--i)*.35s)}
.bxm-nodes .m-pt.m-lime{fill:#d5ff83;stroke:#d5ff83}
.bxm-nodes .m-pulse{fill:none;stroke:#d5ff83;stroke-width:2;animation:bxmPulse 2.6s ease-out infinite}
@keyframes bxmLink{0%,4%{stroke-dashoffset:1}18%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes bxmPt{0%,12%{transform:scale(0);opacity:0}20%{transform:scale(1.25);opacity:1}26%,88%{transform:none;opacity:1}100%{transform:scale(0);opacity:0}}
@keyframes bxmPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(4.5)}}

/* reduced motion: every scene stands still, fully drawn */
@media (prefers-reduced-motion:reduce){
 .bxm,.bxm *{animation:none!important}
 .bxm-talk .m-dots{opacity:0}
 .bxm-pieces .m-scan,.bxm-year .m-ring,.bxm-nodes .m-pulse{opacity:0}
 .bxm-year .m-node{fill:#d5ff83;stroke:#d5ff83}
 .bxm-bars .m-bar{transform:scaleY(var(--c))}
 .bxm-bars .m-dot{transform:translate(156px,-80px)}
 .bxm-tiles .m-hot{fill:#d5ff83}
}

/* WCI article card: a framed screenshot of Bryan's article sits in the top of the card; keep it anchored to the top */
.tx-preview #people .flix-art img.bx-wci-article{object-fit:cover!important;object-position:50% 0!important}

/* ---------- Featured photo runs down behind Featured In and the topic chips (Bryan, October 18): a taller photo box means
   heads stop getting cropped. browse.js sets --bx-bd-h to the distance from the top of the feature to the first card row.
   The shading moves from the feature box onto the photo, so there's no dark seam where the feature used to end. ---------- */
.tx-preview #people.browse-cinema.has-selection .cinema-backdrop{bottom:auto!important;height:var(--bx-bd-h,100%)!important}
.tx-preview #people.browse-cinema.has-selection .cinema-feature::before,
.tx-preview #people.browse-cinema.has-selection .cinema-feature::after{content:none!important}
.tx-preview #people.browse-cinema.has-selection .cinema-backdrop::before,
.tx-preview #people.browse-cinema.has-selection .cinema-backdrop::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.tx-preview #people.browse-cinema.has-selection .cinema-backdrop::before{background:linear-gradient(90deg,#07121ffb 0%,#07121fe6 24%,#07121f99 46%,#07121f00 74%)}
.tx-preview #people.browse-cinema.has-selection .cinema-backdrop::after{background:linear-gradient(180deg,#07121f00 0%,#07121f00 48%,#07121fa6 72%,#07121fe6 90%,#07121f 100%)}
@media (max-width:899px){
 .tx-preview #people.browse-cinema.has-selection .cinema-backdrop::before{background:linear-gradient(90deg,#07121ff2 4%,#07121fb8 65%,#07121f55)}
}
/* the feature is a positioned layer, so its taller photo painted over the later blocks; lift Featured In and the topic chips above it */
.tx-preview #people.browse-cinema>.cinema-press,.tx-preview #people.browse-cinema>.flix-top,.tx-preview #people.browse-cinema>.flix-rows{position:relative!important;z-index:1}

/* Bryan, October 18: the strip under the cards (a lone "Free, 30 minutes" line and the row's scrollbar) was wasted space.
   Remove it and give the space to taller cards (2:3 instead of 3:4). The row's arrows still scroll it. */
.tx-preview #main #people.browse-cinema .browse-cinema-proof{display:none!important}
.tx-preview #main #people.browse-cinema .flix-rows .flix-track{scrollbar-width:none!important;padding-bottom:6px!important}
.tx-preview #main #people.browse-cinema .flix-rows .flix-track::-webkit-scrollbar{display:none}
.tx-preview #main #people.browse-cinema .flix-rows .flix-tile{aspect-ratio:2/3!important;height:auto!important;min-height:0!important}
/* header crops come from each photo's face position (data-cinema-position, set from the v5 manifest) */

/* ---------- Cards fully on the first screen (Bryan, October 19): the white header stays as is (the photo sits below it).
   The feature box no longer reserves extra height, and the bands under it are a little tighter. ---------- */
.tx-preview #main #people.browse-cinema .cinema-feature{min-height:0!important;padding-top:22px!important;padding-bottom:14px!important}
.tx-preview #main #people.browse-cinema>.cinema-press{padding-top:10px!important;padding-bottom:10px!important}
.tx-preview #main #people.browse-cinema>.flix-top{padding-top:8px!important}
@media (max-width:899px){
 .tx-preview #main #people.browse-cinema .cinema-feature{padding-top:14px!important;padding-bottom:12px!important}
}

/* auto-rotating feature: the card on screen says "Now showing", and the swap crossfades */
.tx-preview #people.bx-auto .flix-tile[aria-pressed=true]:before{content:'Now showing'!important}
.tx-preview #people .cinema-backdrop img,.tx-preview #people .cinema-copy{transition:opacity .45s ease}
.tx-preview #people.bx-swap .cinema-backdrop img,.tx-preview #people.bx-swap .cinema-copy{opacity:0!important}
/* short laptop screens (768px tall): the feature headline scales with the screen height so the full cards still fit */
@media (min-width:900px) and (max-height:820px){
 .tx-preview #main #people.browse-cinema h1.cinema-title{font-size:min(4.6vw,6.4vh)!important;margin-bottom:14px!important}
}

/* ---------- Bryan, October 19: a shorter header, a featured photo that fills the rest of the first screen, and less
   empty space under the cards. browse.js sets the feature's height so the card row ends at the bottom of the screen. ---------- */
@media (min-width:1024px){
 body.tx-preview #modernist-header header{padding-top:6px!important;padding-bottom:6px!important}
 body.tx-preview #modernist-header header img{height:40px!important}
 body.tx-preview #modernist-header header nav .nav-disclosure-trigger,body.tx-preview #modernist-header header nav>a.py-4{padding-top:10px!important;padding-bottom:10px!important}
 body.tx-preview #modernist-header header :is(a,button)[class*="py-2.5"]{padding-top:8px!important;padding-bottom:8px!important}
 body.tx-preview{padding-top:var(--bx-hdr,81px)!important}
}
.tx-preview #main #people.browse-cinema .editorial-rows{margin-top:18px!important}