/* /hero-wow-preview/ only, loaded last: phones show everything within the screen (Bryan, October 17).
   Sideways-scrolling rows become grids that fit, and chip rows wrap instead of running off the edge. */
@media(max-width:899px){
 /* hero: the four service boxes as a 2 x 2 block */
 .tx-preview .tx-simple .ms-need-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 0;padding:0;overflow:visible}
 .tx-preview .tx-simple .ms-need-card{flex:none;min-width:0;min-height:168px;padding:13px;gap:6px}
 .tx-preview .tx-simple .ms-need-card strong{font-size:18px;line-height:1.08}
 .tx-preview .tx-simple .ms-need-description{font-size:12.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
 .tx-preview .tx-simple .ms-need-card>svg{width:16px;height:16px}

 /* strategy shelf: genre chips wrap; each row is a 3-column grid (first six; "Explore all" opens the rest) */
 .wow-flix .flix-genres{flex-wrap:wrap;overflow:visible;width:auto;margin:0;padding:0}
 .wow-flix .flix-rail{overflow:visible}
 .wow-flix .flix-arrow,.wow-flix .flix-pages{display:none!important}
 .wow-flix .flix-track{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:auto!important;margin:0;padding:0 16px;overflow:visible!important;transform:none!important;scroll-snap-type:none}
 .wow-flix .flix-item{width:auto!important;min-width:0;flex:none!important;margin:0!important}
 /* the one visible row shows all of its strategies */
 .wow-flix .flix-item.flix-rank{position:relative;display:block}
 .wow-flix .flix-rank .flix-num{position:absolute;left:5px;top:3px;z-index:3;margin:0;font:800 30px/1 Barlow,Arial,sans-serif;color:#d5ff83;-webkit-text-stroke:0;text-shadow:0 2px 10px #0009;pointer-events:none}
 .wow-flix .flix-tile{width:100%!important}

 /* reviews: three cards stacked instead of a sideways marquee */
 .mf-reviews .ms-review-window{overflow:visible;-webkit-mask:none;mask:none}
 .mf-reviews .ms-review-track{display:block!important;width:auto!important;transform:none!important;animation:none!important}
 .mf-reviews .ms-review-set{display:grid!important;grid-template-columns:1fr;gap:12px;width:auto!important;padding:0!important;animation:none!important}
 .mf-reviews .ms-review-set:not(:first-child){display:none!important}
 .mf-reviews .ms-review-set .mf-review{width:auto!important;max-width:none!important;transform:none!important;margin:0!important}
 .mf-reviews .ms-review-set .mf-review:nth-child(n+4){display:none}
 .mf-reviews .ms-review-controls{display:none}

 /* worked examples: the five cards as a two-column grid (the fifth spans the row) */
 .wow-ex .ex-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0 0;padding:0;overflow:visible}
 .wow-ex .ex-card{flex:none;min-width:0}
 .wow-ex .ex-card:last-child{grid-column:1/-1}
 .wow-ex .ex-card-photo{height:96px}
 .wow-ex .ex-card-body{padding:10px 11px 12px;gap:6px}
 .wow-ex .ex-card-title{font-size:12.5px;min-height:3.9em}
 .wow-ex .ex-card-num{font-size:20px}
 .wow-ex .ex-card-spark{width:44px;height:20px}
 .wow-ex .ex-card-cap{font-size:11px;min-height:0}
 .wow-ex .ex-card-persona{font-size:9px;padding:5px 7px;left:6px;top:6px}

 /* chip rows wrap */
 .sm-chips{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
 #questions.wow-chat .faq-chips{flex-wrap:wrap;overflow:visible;margin:14px 0 18px;padding:0}
}
/* founder note: the heading wraps before Bryan's portrait instead of running into it */
@media(max-width:899px){#meet-bryan h2{max-width:56%}}

@media(max-width:899px){
 /* White Coat Investor cards: Safari sized the column to the episode image's native 960px width, pushing the image and
    the article title off screen. The column now always fits the card and the image scales to it. */
 .modernist .ms-wci-features{grid-template-columns:minmax(0,1fr)}
 .modernist .ms-wci-features>article,.modernist .ms-wci-article{min-width:0;max-width:100%}
 .modernist .ms-wci-features .mf-video{width:100%;max-width:100%;overflow:hidden}
 .modernist .ms-wci-features .mf-video button{width:100%;max-width:100%}
 .modernist .ms-wci-features .mf-video img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover}
 .modernist .ms-wci-article h4{overflow-wrap:break-word}
 /* same safeguard everywhere on phones: no image, video or embed wider than its box */
 #main img,#main video,#main iframe{max-width:100%}
 /* booking calendar: sized to Calendly's phone date view (about 590px); the times screen scrolls inside the frame */
 .wow-book-frame-wrap{height:590px}
}
@media(max-width:899px){.wow-ex .ex-card-photo{min-width:0}}
/* the hero's service buttons on phones (overrides the older 2 x 2 box rules above) */
@media(max-width:899px){.tx-preview .tx-simple .ms-need-card{min-height:64px;padding:12px 14px}}
/* hero service buttons on phones: compact 2 x 2 buttons (an older picture-card rule forced 280px boxes) */
@media(max-width:899px){
 .tx-preview .mf-hero .tx-simple .ms-need-grid .ms-need-card{min-height:58px!important;height:auto!important;aspect-ratio:auto!important;flex-direction:row!important;align-items:center!important;
  justify-content:space-between!important;text-align:left!important;padding:12px 14px!important;gap:10px!important}
 .tx-preview .mf-hero .tx-simple .ms-need-grid .ms-need-card strong{font-size:15px!important;line-height:1.15!important}
 .tx-simple .tx-built>span{text-align:center!important;display:block}
}
/* and on desktop the same rule must not stretch them */
.tx-preview .mf-hero .tx-simple .ms-need-grid .ms-need-card{min-height:76px!important;height:auto!important;justify-content:space-between!important;align-items:center!important;flex-direction:row!important}
@media(max-width:899px){.tx-preview .mf-hero .tx-simple .ms-need-grid .ms-need-card{min-height:58px!important}}

/* hero service buttons keep their living art (documents, coins, storefront, globe) as a moving tile on the left */
.tx-preview .mf-hero .tx-simple .ms-need-grid .ms-need-card .tx-art{display:block!important;position:relative!important;inset:auto!important;order:-1;flex:none;
 width:64px;height:64px;border-radius:14px;overflow:hidden;background:rgba(var(--tint),.92);box-shadow:inset 0 0 0 1px #ffffff73,0 8px 18px -10px #0b1640}
.tx-preview .mf-hero .tx-simple .ms-need-grid .ms-need-card .tx-art::after{display:none}
.tx-preview .mf-hero .tx-simple .ms-need-grid .ms-need-card{min-height:88px!important;justify-content:flex-start!important;gap:14px!important;padding:12px 18px 12px 12px!important}
.tx-preview .mf-hero .tx-simple .ms-need-grid .ms-need-card strong{flex:1;min-width:0;text-align:left}
.tx-preview .mf-hero .tx-simple .ms-need-grid .ms-need-card:hover{transform:translateY(-3px)}
@media(max-width:899px){
 .tx-preview .mf-hero .tx-simple .ms-need-grid .ms-need-card{min-height:64px!important;gap:10px!important;padding:8px 12px 8px 8px!important}
 .tx-preview .mf-hero .tx-simple .ms-need-grid .ms-need-card .tx-art{width:46px;height:46px;border-radius:11px}
 .tx-preview .mf-hero .tx-simple .ms-need-grid .ms-need-card strong{font-size:14px!important}
 .tx-preview .mf-hero .tx-simple .ms-need-grid .ms-need-card>svg{width:15px!important;height:15px!important}
}
@media(min-width:900px){.tx-preview .mf-hero .tx-simple .ms-need-grid .ms-need-card .tx-art{width:76px;height:76px;border-radius:16px}.tx-preview .mf-hero .tx-simple .ms-need-grid .ms-need-card{min-height:100px!important}}