/* home-v2-1 phone + tablet layer (below 992px). Ports the desktop Figma alignment (fg-align) to the phone layout:
   same chips, colours, type cut and card styling, at phone sizes taken from the Figma Mobile frame's proportions.
   Card sections become a horizontal swipe row so each section fits one screen (heading + one full card + a peek). */
@media (max-width:991px){
html body .pf,html body .pf *{font-variation-settings:"opsz" 32!important}
html body .pf{letter-spacing:-.02em}

/* chips: Geist Mono caps on #ebebeb, as on desktop */
html body .pf .pf-head>.ha-chip,html body .pf .pf-story__chip .ha-chip,html body .pf .pf-news__kicker{height:28px;padding:0 12px;border-radius:6px;background:#ebebeb;border:0;font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;line-height:14px;letter-spacing:.33px;font-weight:400;text-transform:uppercase;color:#27272a;display:inline-flex;align-items:center;width:auto;margin:0 0 8px}

/* section headings */
html body .pf-ben .pf-head,html body .pf-offer .pf-head,html body .pf-news__head{align-items:center;text-align:center;gap:0;max-width:none}
html body .pf-ben .pf-head h2,html body .pf-offer .pf-head h2,html body .pf-news__h2,html body .pf-cast .pf-head h2{font-size:26px;line-height:31px;letter-spacing:-.02em;color:#27272a;margin:0}
html body .pf-ben .pf-head h2 br{display:none}
html body .pf-ben .pf-head>.ha-p,html body .pf-news__sub,html body .pf-cast .pf-head .ha-p{width:auto;max-width:340px;margin:12px auto 0;font-size:15px;line-height:21px;letter-spacing:-.02em;color:#686868}
/* the gallery copy stays left-aligned, as on desktop */
html body .pf-cast .pf-head{align-items:flex-start;text-align:left}
html body .pf-cast .pf-head .ha-p{margin:12px 0 0}

/* buttons: one size, no arrows (the nav keeps its own) */
html body .pf .ha-btn.ha-btn{height:40px;min-height:0;padding:0 16px;font-size:16px;line-height:21px;border-radius:999px;width:auto;justify-content:center}
html body .pf .ha-btn__ar{display:none}
html body .pf .ha-btn--ghost{background:#fff;box-shadow:inset 0 0 0 1px #c5c5cb}
html body .pf .ha-btn--dark{color:#f5f3f1}

/* hero */
html body .pf-hero .ha-mono{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;line-height:14px;letter-spacing:.33px;text-transform:uppercase;color:#27272a}
html body .pf-hero__copy h1{font-size:38px;line-height:42px;letter-spacing:-.02em;color:#27272a}
html body .pf-hero__sub{font-size:15px;line-height:21px;color:#686868}
/* logo strip */
html body .pf .ha-logos__cap{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;line-height:14px;letter-spacing:.33px;text-transform:uppercase;color:#27272a}

/* story (stacked chapters) */
html body .pf-statement{font-size:30px;line-height:34px;letter-spacing:-.02em;color:#27272a}
html body .pf-name .ha-mono,html body .pf-name br{display:none}
html body .pf-story--stack .pf-name{font-size:24px;line-height:29px;letter-spacing:-.02em;color:#27272a}
html body .pf-story--stack .pf-line{font-size:15px;line-height:21px;color:#686868}

/* model gallery */
html body .pf-cast__num{display:none}

/* Why Botika cards (desktop card language: flat, grey visual, centred copy) */
html body .pf-ben__in,html body .pf-offer__in,html body .pf-news__in{padding:56px 20px}
html body .pf-bc{height:auto;border:0;border-radius:0;background:transparent;overflow:visible}
html body .pf-bc__vis{height:auto;aspect-ratio:433/300;border:0;border-radius:4px;background:#f5f3f1;position:relative;overflow:hidden;--fu:calc(min(78vw,420px)/433)}
html body .pf-bc__txt{padding:20px 12px 0;gap:12px;align-items:center;text-align:center;flex:none}
html body .pf-bc__head{display:block;min-height:0;text-align:center}
html body .pf-bc__head br{display:none}
html body .pf-bc__head h3{font-size:20px;line-height:24px;letter-spacing:-.02em;color:#27272a;margin:0}
html body .pf-bc__txt .ha-p{margin:0;font-size:15px;line-height:20px;letter-spacing:-.02em;color:#686868}

/* How to start cards */
html body .pf-offer{background:#f5f3f1}
html body .pf-oc{padding:0;gap:0;border:0;border-radius:0;background:#fff;overflow:hidden;min-height:0}
html body .pf-offer .pf-oc .pf-oc__vis.pf-oc__vis{margin:0!important;border-radius:4px 4px 0 0}
html body .pf-oc__copy{padding:20px 16px 28px;gap:12px;align-items:center;text-align:center;flex:none}
html body .pf-oc__copy .ha-mono{display:none}
html body .pf-oc__copy h3{width:auto;font-size:20px;line-height:24px;letter-spacing:-.02em;color:#27272a;margin:0}
html body .pf-oc__copy .ha-p{font-size:15px;line-height:20px;letter-spacing:-.02em;color:#686868;margin:0}
html body .pf-oc__copy .ha-btn.ha-btn{margin:8px 0 0}

/* swipe rows: one card per screen with the next one peeking */
html body .pf-ben__grid,html body .pf-offer__grid,html body .pf-news__grid{display:flex;flex-direction:row;grid-template-columns:none;gap:10px;margin:32px -20px 0;padding:0 20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
html body .pf-ben__grid::-webkit-scrollbar,html body .pf-offer__grid::-webkit-scrollbar,html body .pf-news__grid::-webkit-scrollbar{display:none}
html body .pf-ben__grid>.pf-bc,html body .pf-offer__grid>.pf-oc,html body .pf-news__card{flex:0 0 min(78vw,420px);width:min(78vw,420px);scroll-snap-align:start;order:0}

/* results band + testimonial */
html body .ha-proof .ha-proof__canvas,html body .ha-proof .ha-proof__trails,html body .ha-proof .pf-proof__trails,html body .ha-proof .ha-proof__fade{display:none}
html body .pf .ha-proof__stat{font-size:32px;line-height:36px;letter-spacing:-.02em;color:#27272a}
html body .ha-proof__ask{border-top:1px solid #e1dfdd;border-bottom:1px solid #e1dfdd}
html body .pf .ha-proof__askcap{font-size:11px;line-height:12px;letter-spacing:0;color:#27272a}
html body .pf .ha-quote__q,html body .pf .ha-quote__q *{font-variation-settings:"opsz" 14!important}
html body .pf .ha-quote__q{font-size:20px;line-height:24.2px;letter-spacing:-.012em;color:#27272a;max-width:320px;margin-left:auto;margin-right:auto}
html body .pf .ha-quote__name,html body .pf .ha-quote__role{font-variation-settings:"opsz" 14!important;letter-spacing:0;font-size:12px;line-height:13.8px}
html body .pf .ha-quote__name{color:#27272a}
html body .pf .ha-quote__role{color:rgba(0,0,0,.56)}

/* Latest: three desktop cards in the swipe row */
html body .pf-news{background:#f5f3f1}
html body .pf-news__col,html body .pf-news__items{display:contents}
html body .pf-news__col:nth-child(2) .w-dyn-item:nth-child(2){display:none}
html body .pf-news__card{position:relative;display:flex;flex-direction:column;gap:0;background:#fff;border:0;border-radius:0;padding:0}
html body .pf-news__media,html body .pf-news__grid>.pf-news__col:last-child .pf-news__media{flex:none;width:100%;height:auto;aspect-ratio:433/324;border-radius:4px}
html body .pf-news__tags{position:absolute;left:0;right:0;top:16px;justify-content:center;z-index:2}
html body .pf-news__ep{display:none}
html body .pf-news__body{padding:20px 16px 28px;gap:0;align-items:center;text-align:center}
html body .pf-news__title,html body .pf-news__grid>.pf-news__col:last-child .pf-news__title{display:block;font-size:20px;line-height:24px;letter-spacing:-.02em;color:#27272a;text-wrap:balance;overflow:visible;margin:0 0 12px;-webkit-line-clamp:unset}
html body .pf-news__sum{display:block;font-size:15px;line-height:20px;letter-spacing:-.02em;color:#686868;overflow:visible;margin:0 0 20px;-webkit-line-clamp:unset}
html body .pf-news__more{display:inline-flex;align-items:center;gap:8px;margin:0;padding:0;background:none;font-size:16px;line-height:17.6px;letter-spacing:-.005em;font-variation-settings:"opsz" 14!important;color:#0c0c0c}
html body .pf-news__cta{display:none}

/* final CTA */
html body .ha-cta .ha-cta__canvas,html body .ha-cta .ha-cta__trails,html body .ha-cta .ha-cta__fade{display:none}
html body .pf .ha-cta__copy h2{font-size:32px;line-height:36px;letter-spacing:-.02em;color:#27272a}
html body .pf .ha-cta .ha-btn--ghost{box-shadow:inset 0 0 0 1px #e1dfdd}

/* Why Botika card visuals (product page, cost strip) and the read-more arrow, copied from the desktop layer; --fu is set on .pf-bc__vis above so they scale to the phone card */
html body .fg-pdp{position:absolute;inset:0;overflow:hidden;font-family:Inter,system-ui,sans-serif;letter-spacing:0}
html body .fg-pdp__stack{position:absolute;inset:0}
html body .fg-pdp__win{position:absolute;left:calc(55*var(--fu));top:calc(42*var(--fu));width:calc(416*var(--fu));height:calc(258*var(--fu));background:#fff;border:1px solid #f5f3f1;box-sizing:border-box}
html body .fg-pdp__bar{position:absolute;left:calc(25*var(--fu));top:calc(17*var(--fu));width:calc(391*var(--fu));height:calc(15*var(--fu))}
html body .fg-pdp__search{position:absolute;left:calc(60*var(--fu));top:0;width:calc(230*var(--fu));height:calc(15*var(--fu));border-radius:999px;background:#f0f0f0}
html body .fg-pdp__search svg{position:absolute;left:calc(6*var(--fu));top:calc(4*var(--fu));width:calc(7*var(--fu));height:calc(7*var(--fu))}
html body .fg-pdp__ico{position:absolute;top:calc(2*var(--fu));width:calc(11*var(--fu));height:calc(11*var(--fu));color:#666}
html body .fg-pdp__thumbs{position:absolute;left:calc(25*var(--fu));top:calc(40*var(--fu));width:calc(55*var(--fu));height:calc(191*var(--fu));display:block}
html body .fg-pdp__main{position:absolute;left:calc(85*var(--fu));top:calc(40*var(--fu));width:calc(160*var(--fu));height:calc(191*var(--fu));border-radius:calc(2.4*var(--fu));object-fit:cover;display:block}
html body .fg-pdp__side{position:absolute;left:calc(259*var(--fu));top:calc(40*var(--fu));width:calc(156*var(--fu));height:calc(191*var(--fu));font-size:calc(5.77*var(--fu));line-height:1.2;color:#000}
html body .fg-pdp__sale{position:absolute;left:0;top:0;width:calc(25*var(--fu));height:calc(11*var(--fu));border-radius:999px;background:#edf3f3;display:flex;align-items:center;justify-content:center;font-weight:500;color:#0d0d0d}
html body .fg-pdp__ln{position:absolute;left:0;width:100%;height:1px;background:rgba(0,0,0,.1)}
html body .fg-pdp__size{position:absolute;left:0;top:calc(128*var(--fu));font-weight:400}
html body .fg-pdp__pill{position:absolute;top:calc(138*var(--fu));height:calc(16*var(--fu));border-radius:999px;background:#f0f0f0;display:flex;align-items:center;justify-content:center}
html body .fg-pdp__pill.is-on{background:#666;color:#fff}
html body .fg-pdp__qty{position:absolute;left:0;top:calc(173*var(--fu));width:calc(61*var(--fu));height:calc(19*var(--fu));border-radius:999px;background:#f0f0f0;font-weight:500}
html body .fg-pdp__qty i{position:absolute;top:calc(5*var(--fu));width:calc(9*var(--fu));height:calc(9*var(--fu))}
html body .fg-pdp__qty b{position:absolute;left:0;right:0;top:calc(6*var(--fu));text-align:center;font-weight:500}
html body .fg-pdp__add{position:absolute;left:calc(73*var(--fu));top:calc(173*var(--fu));width:calc(88*var(--fu));height:calc(18*var(--fu));border-radius:999px;background:#666;color:#fff;font-weight:500;display:flex;align-items:center;justify-content:center;white-space:nowrap}
html body .fg-cost{position:absolute;left:calc(-28*var(--fu));top:calc(78*var(--fu));width:calc(488*var(--fu));height:calc(144*var(--fu))}
html body .fg-cost__chip{position:absolute;left:50%;top:0;transform:translateX(-50%);height:calc(16*var(--fu));padding:0 calc(6*var(--fu));border-radius:calc(6*var(--fu));background:#6b6b6b;color:#fff;font-family:"Geist Mono",ui-monospace,monospace;font-size:calc(8*var(--fu));line-height:calc(16*var(--fu));text-transform:uppercase;white-space:nowrap;box-sizing:border-box}
html body .fg-cost__strip{position:absolute;left:0;top:calc(32*var(--fu));width:100%;height:calc(112*var(--fu));display:flex;gap:calc(8*var(--fu))}
html body .fg-cost__strip img{flex:none;width:calc(116*var(--fu));height:calc(112*var(--fu));object-fit:cover;display:block}
html body .pf-news__more:after{content:"";width:calc(13*var(--fu));height:calc(13*var(--fu));background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .4s cubic-bezier(.22,1,.36,1)}
html body .pf-news__card:hover .pf-news__more:after{transform:translateX(calc(3*var(--fu)))}
html body .pf-news{--fu:1px}
/* results band: without the grid lines the stat needs no tall canvas, so the band hugs it and stat, logos and testimonial share one screen */
html body .pf .ha-proof__grid{height:auto;min-height:0;padding:64px 20px}
html body .pf .ha-proof__stat{position:relative;top:auto;left:auto;margin:0 auto;width:auto;max-width:340px}
/* Figma mobile frame 1975:3608 (450 wide): hero, logo band and story, measured off the frame */
html body .pf-hero{height:632px!important;min-height:0!important}
html body .pf-hero__copy{top:98px;left:0;right:0;width:auto;margin:0 auto;padding:0 15px;gap:0}
html body .pf-hero .ha-mono{font-size:12px;line-height:15.6px;letter-spacing:.36px;margin:0 0 21px}
html body .pf-hero__copy h1{font-size:min(40px,8.89vw);line-height:1.1;letter-spacing:-.02em;color:#27272a;margin:0 auto 24px;max-width:420px}
html body .pf-hero__sub{font-size:min(18px,4vw);line-height:1.333;letter-spacing:-.02em;color:#686868;margin:0 auto 34px;max-width:none;width:auto}
html body .pf-hero__sub .fg-mbr,html body .pf-hero__sub br.ha-bd{display:inline}
html body .pf-hero__cta{gap:12px;margin:0;justify-content:center}
html body .pf-hero .ha-btn.ha-btn{height:44px;font-size:18px;line-height:24px;padding:0 16px}
html body .pf-hero .ha-btn--dark .ha-btn__ar{display:inline-flex;width:16px;height:16px;margin-left:8px}
html body .pf-hero__mtiles>.pf-mtile{display:none}
html body .pf-hero__mtiles>.fg-mt{position:absolute;display:block;object-fit:cover;object-position:50% 20%}
/* logo band */
html body .ha-logos{height:176px;padding:31px 0 0;box-sizing:border-box;border-top:1px solid #ecebe9}
html body .pf .ha-logos__cap{font-size:12px;line-height:15.6px;letter-spacing:.36px}
html body .ha-logos__row{margin-top:44px}
/* story: statement on a white band, then each chapter = card on top of its copy in an #f5f3f1 block, 64px white gaps */
html body .pf-story--stack .pf-story__chip{display:none}
html body .pf-story--stack .pf-statement{padding:64px 30px;margin:0;font-size:32px;line-height:35px;letter-spacing:-.03em;color:#0c0c0c;text-align:center}
html body .pf-story--stack .pf-statement br{display:inline}
html body .pf-story--stack .pf-story__in{padding:0;gap:0;row-gap:0}
html body .pf-story--stack .pf-cards>.pf-card{width:100%;height:auto;margin:64px 0 0;padding:30px 30px 0;background:#f5f3f1;border-radius:0;box-shadow:none}
html body .pf-story--stack .pf-cards>.pf-card:first-child{margin-top:0}
html body .pf-story--stack .pf-card__in{height:auto;border:0;border-radius:4px;background:#fff;box-shadow:0 8px 28px -6px rgba(20,20,20,.12)}
html body .pf-story--stack .pf-card__in:after{display:none}
html body .pf-story--stack .pf-chap{background:#f5f3f1;padding:36px 30px 32px;margin:0;position:relative;z-index:1}
html body .pf-story--stack .pf-chap:before{content:"What you get";display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:6px;background:#ebebeb;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;line-height:15.6px;letter-spacing:.36px;text-transform:uppercase;color:#27272a;font-variation-settings:normal!important}
html body .pf-story--stack .pf-name{margin:8px 0 0;font-size:24px;line-height:29px;letter-spacing:-.03em;color:#0c0c0c}
html body .pf-story--stack .pf-line{margin:20px 0 0;font-size:18px;line-height:24px;letter-spacing:-.02em;color:#686868}
html body .pf-story--stack .pf-story__chip{order:0}
html body .pf-story--stack .pf-statement{order:1}
html body .pf-story--stack .pf-story__cta{order:20;margin:48px auto 0}
html body .pf-story--stack .pf-cards>.pf-card:nth-child(1){order:2}
html body .pf-story--stack .pf-chap[data-chap="0"]{order:3}
html body .pf-story--stack .pf-cards>.pf-card:nth-child(2){order:4}
html body .pf-story--stack .pf-chap[data-chap="1"]{order:5}
html body .pf-story--stack .pf-cards>.pf-card:nth-child(3){order:6}
html body .pf-story--stack .pf-chap[data-chap="2"]{order:7}
html body .pf-story--stack .pf-cards>.pf-card:nth-child(4){order:8}
html body .pf-story--stack .pf-chap[data-chap="3"]{order:9}
}
/* the mobile-only subtitle breaks never show on desktop */
@media (min-width:992px){html body .pf-hero__sub .fg-mbr{display:none}}
@media (max-width:991px){
/* ===== Figma "mobile" section (landing page, frame column 450 wide), full page, 2026-10-27 ===== */
/* story: one continuous grey block; each chapter = card, then chip, title and copy; 118px from one chapter's copy to the next card */
html body .pf-story--stack .pf-story__in{background:#f3f3f3}
html body .pf-story--stack .pf-statement{background:#fff}
html body .pf-story--stack .pf-cards>.pf-card{margin:0;padding:118px 30px 0;background:transparent}
html body .pf-story--stack .pf-cards>.pf-card:first-child{margin:0;padding-top:30px}
html body .pf-story--stack .pf-chap{background:transparent;padding:36px 30px 0}
html body .pf-story--stack .pf-chap[data-chap="3"]{padding-bottom:26px}
html body .pf-story--stack .pf-name{margin:6px 0 0;font-size:24px;line-height:29px}
html body .pf-story--stack .pf-line{margin:23px 0 0;font-size:16px;line-height:19.2px}
html body .pf-story--stack .pf-story__cta{display:none}
html body .pf-story--stack{margin-bottom:64px}

/* model gallery: the face wall first (4 drifting columns), then chip, title, copy and button */
html body .pf-cast--stack{background:#f3f3f3}
html body .pf-cast--stack .pf-cast__in{display:flex;flex-direction:column;padding:30px 28px 29px;width:auto;max-width:none;gap:0}
html body .pf-cast--stack .pf-cast__stage{order:0;position:relative;width:100%;height:var(--fg-wall,870px);overflow:hidden;margin:0}
html body .pf-cast--stack .pf-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;height:auto;width:100%}
html body .pf-cast--stack .pf-col:nth-child(n+5){display:none}
html body .pf-cast--stack .pf-col{display:flex;flex-direction:column;gap:5px;will-change:transform;animation:fgcol 46s linear infinite}
html body .pf-cast--stack .pf-col:nth-child(2n){animation-name:fgcolr;animation-duration:52s}
html body .pf-cast--stack .pf-col:nth-child(3){animation-duration:40s}
html body .pf-cast--stack .pf-face{display:block!important;width:100%;aspect-ratio:94/140;height:auto;margin:0;border-radius:4px;overflow:hidden;opacity:1!important;transform:none!important}
html body .pf-cast--stack .pf-face img{width:100%;height:100%;object-fit:cover;display:block}
html body .pf-cast--stack .pf-sel{display:none}
html body .pf-cast--stack .pf-cast__copy{order:1;margin:38px 0 0;padding:0;width:auto}
html body .pf-cast--stack .pf-head h2{font-size:30px;line-height:39px;margin:7px 0 0;white-space:normal}
html body .pf-cast--stack .pf-head .ha-p{font-size:16px;line-height:19px;margin:19px 0 0;max-width:340px}
html body .pf-cast--stack .ha-btn.ha-btn{margin-top:42px;height:44px;font-size:18px;line-height:24px}
@keyframes fgcol{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes fgcolr{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){html body .pf-cast--stack .pf-col{animation:none}}

/* Why Botika + Latest: left-aligned head, one full-width card at a time (next one peeking), prev/next buttons */
html body .pf-ben{background:#fff}
html body .pf-news{background:#f3f3f3}
html body .pf-ben__in,html body .pf-news__in{padding:30px 28px 26px}
html body .pf-ben .pf-head,html body .pf-news__head{align-items:flex-start;text-align:left}
html body .pf-ben .pf-head h2,html body .pf-news__h2{font-size:30px;line-height:39px;margin:10px 0 0;text-align:left}
html body .pf-ben .pf-head h2 br{display:inline}
html body .pf-ben .pf-head>.ha-p,html body .pf-news__sub{font-size:16px;line-height:21px;margin:23px 0 0;max-width:394px;text-align:left}
html body .pf-ben__grid,html body .pf-news__grid{margin:42px -28px 0;padding:0 28px;gap:18px;scroll-padding:0 28px}
html body .pf-ben__grid>.pf-bc,html body .pf-news__card{flex:0 0 calc(100vw - 56px);width:calc(100vw - 56px);max-width:none;scroll-snap-align:start}
html body .pf-bc{border:1px solid #eeedeb;border-radius:6px;background:#fff;overflow:hidden}
html body .pf-bc__vis{aspect-ratio:auto;height:300px;border-radius:0;--fu:calc((100vw - 56px)/433)}
html body .pf-bc__txt{padding:40px 24px 0;min-height:200px;gap:22px;box-sizing:border-box}
html body .pf-bc__head h3{font-size:20px;line-height:24px}
html body .pf-bc__txt .ha-p{font-size:16px;line-height:24px}
html body .pf-news__card{border-radius:6px;overflow:hidden;background:#fff}
html body .pf-news__media,html body .pf-news__grid>.pf-news__col:last-child .pf-news__media{aspect-ratio:auto;height:300px;border-radius:0}
html body .pf-news .pf-news__img{border-radius:0;outline:0}
html body .pf-news__body{padding:40px 24px 0;min-height:200px;box-sizing:border-box}
html body .pf-news__title,html body .pf-news__grid>.pf-news__col:last-child .pf-news__title{font-size:20px;line-height:24px;margin:0 0 22px}
html body .pf-news__sum{font-size:16px;line-height:24px;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html body .pf-news__more{display:none}
html body .fg-arrows{display:flex;gap:8px;margin-top:40px}
html body .fg-arrows button{width:44px;height:44px;border:0;border-radius:6px;display:grid;place-items:center;padding:0;cursor:pointer;background:#0c0c0c;color:#fff;transition:background .2s,color .2s}
html body .fg-arrows button[disabled]{background:#ebebeb;color:#686868;cursor:default}
html body .fg-arrows svg{width:16px;height:16px}

/* How to start: the two cards stacked, as in Figma */
html body .pf-offer{background:#f3f3f3}
html body .pf-offer__in{padding:30px 28px 30px}
html body .pf-offer .pf-head h2{font-size:30px;line-height:40px;margin:8px 0 0}
html body .pf-offer .pf-offer__grid{display:flex;flex-direction:column;overflow:visible;scroll-snap-type:none;margin:40px 0 0;padding:0;gap:27px}
html body .pf-offer__grid>.pf-oc{flex:none;width:100%;border-radius:6px}
html body .pf-offer .pf-oc .pf-oc__vis.pf-oc__vis{height:300px!important;aspect-ratio:auto!important;border-radius:6px 6px 0 0}
html body .pf-oc__copy{padding:54px 24px 40px;gap:22px}
html body .pf-oc__copy h3{font-size:22px;line-height:28px}
html body .pf-oc__copy .ha-p{font-size:16px;line-height:24px}
html body .pf-oc__copy .ha-btn.ha-btn{margin:4px 0 0;height:44px;font-size:18px;line-height:24px}

/* results band, logos, testimonial */
html body .pf .ha-proof__grid{padding:64px 20px 63px}
html body .pf .ha-proof__stat{font-size:32px;line-height:35px;letter-spacing:-.03em;color:#0c0c0c;max-width:410px}
html body .ha-proof__ask{height:auto;padding:26px 0 35px}
html body .pf .ha-proof__askcap{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;line-height:14px;letter-spacing:.33px;text-transform:uppercase}
html body .ha-proof__logos{margin-top:41px}
html body .ha-quote{padding:64px 0 62px}
html body .ha-quote__mark{margin-bottom:29px}

/* final CTA */
html body .pf .ha-cta{height:auto;min-height:0}
html body .pf .ha-cta__copy{position:relative;top:auto;left:auto;margin:0 auto;width:auto;padding:64px 20px 62px;transform:none}
html body .pf .ha-cta__copy h2{font-size:32px;line-height:35px;letter-spacing:-.03em;color:#0c0c0c;max-width:400px;margin:0 auto}
html body .pf .ha-cta__copy .ha-actions{margin-top:48px;height:auto;gap:12px;justify-content:center}
html body .pf .ha-cta .ha-btn.ha-btn{height:44px;font-size:18px;line-height:24px}
}

/* v7: results stat wraps freely (Figma mobile: three lines), Latest tag as a mono caps pill */
@media (max-width:991px){
html body .pf .ha-proof__stat br{display:none}
html body .pf-news .pf-news__tag{font-family:"Geist Mono",ui-monospace,monospace;font-size:10px;line-height:13px;letter-spacing:.3px;text-transform:uppercase}
}
/* v8: under 420px the Figma subtitle breaks make ragged lines, so the subtitle wraps freely there */
@media (max-width:419px){html body .pf-hero .pf-hero__sub br{display:none}html body .pf-hero .pf-hero__sub{max-width:330px;text-wrap:balance}}

/* v10: Figma "mobile" section, measured off the 450-wide frame */
@media (max-width:991px){
/* nav: transparent over the hero (no white band), Figma logo 79x16 at 28/24 and a 25px burger centred at 407/32 */
html body .pf .ha-nav__logo{position:absolute;left:28px;top:24px;margin:0}
html body .pf .ha-nav__logo .ha-mask{width:79px;height:16.3px}
html body .pf .ha-burger.ha-burger{right:21px;top:10px;width:44px;height:44px}
html body .pf .ha-burger.ha-burger i{left:9.5px;right:9.5px;width:auto}
html body .pf .ha-burger.ha-burger i:nth-child(1){top:15px}
html body .pf .ha-burger.ha-burger i:nth-child(2){top:21px}
html body .pf .ha-burger.ha-burger i:nth-child(3){top:27px}
html body .pf .ha-burger.ha-burger[aria-expanded=true] i:nth-child(1),html body .pf .ha-burger.ha-burger[aria-expanded=true] i:nth-child(3){top:21px}

/* hero: starts at the top of the page under the nav, 701 tall; chip 190, h1 40/44, subtitle 16/20 wrapping freely, 44px buttons with 16px labels and no arrow */
html body .pf .pf-hero{margin-top:0!important;height:701px!important}
html body .pf-hero .pf-hero__copy{top:187px}
html body .pf-hero .pf-hero__copy .ha-mono{margin:0 0 19px}
html body .pf-hero .pf-hero__copy h1{margin:0 auto 25px}
html body .pf-hero .pf-hero__copy .pf-hero__sub{font-size:16px;line-height:20px;max-width:322px;margin:0 auto 32px;text-wrap:wrap}
html body .pf-hero .pf-hero__sub br{display:none!important}
html body .pf-hero .pf-hero__cta{gap:13px}
html body .pf .ha-btn.ha-btn{height:44px!important;font-size:16px!important;line-height:20px!important;padding:0 18px!important}
html body .pf .pf-hero .ha-btn .ha-btn__ar{display:none!important}
html body .pf .ha-logos{height:175px}

/* story: one pinned screen, the desktop card (scaled to 390 wide) over its copy; scrolling swaps chapter by chapter */
html body .pf-story--stack .fg-spin{position:relative;width:100%;height:var(--fg-av,772px);background:#f3f3f3;display:flex;flex-direction:column;justify-content:center;overflow:hidden;order:2}
html body .pf-story--stack .fg-spin .pf-cardsmask{display:block!important;position:relative!important;left:0!important;top:0!important;width:100%!important;height:auto!important;overflow:visible;margin:0;padding:0;transform:none!important;clip-path:none!important;-webkit-mask-image:none!important;mask-image:none!important}
html body .pf-story--stack .fg-spin .pf-cards{display:grid!important;justify-items:center;align-items:start;position:relative!important;left:0!important;top:0!important;right:auto!important;width:100%!important;height:auto!important;margin:0;padding:0;gap:0;transform:none}
html body .pf-story--stack .fg-spin .pf-cards>.pf-card{grid-area:1/1;margin:0!important}
html body .pf-story--stack .fg-scopy{display:grid;width:100%;margin:44px 0 0}
html body .pf-story--stack .fg-scopy>.pf-chap{grid-area:1/1;padding:0 28px!important;margin:0;background:transparent}
html body .pf-story--stack.fg-still .fg-spin{height:auto;padding:30px 0}
html body .pf-story--stack .fg-spin{background:#fff}
html body .pf-story--stack .fg-sbloom{position:absolute;inset:0;background:#f5f3f1;clip-path:circle(0px at 50% 50%);z-index:0;pointer-events:none}
html body .pf-story--stack .fg-spin>.pf-cardsmask,html body .pf-story--stack .fg-spin>.fg-scopy{position:relative;z-index:1}
html body .pf-story--stack .fg-spin>.pf-statement{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0;padding:0 30px;background:transparent;z-index:3;pointer-events:none}
html body .pf-story--stack .fg-spin>.pf-statement .pf-w{display:block}
html body .pf-story--stack .fg-sdot{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:#f5f3f1;z-index:2;opacity:0;visibility:hidden;pointer-events:none}
html body .pf-story--stack .fg-sdot i{position:absolute;inset:0;border-radius:50%;background:#e9e6e3}
html body .pf-story--stack.fg-still .fg-spin{background:#f5f3f1}
html body .pf-story--stack.fg-still .fg-spin>.pf-statement{position:relative;top:auto;transform:none;padding:34px 30px 30px}
html body .pf-story--stack.fg-still .fg-sdot{display:none}

/* model gallery: Figma's 4-column wall of the desktop gallery photos (94x140, 5px gaps), pinned while the columns travel like the desktop wall */
html body .pf-cast--stack .pf-cast__in{padding:31px 28px 29px}
html body .pf-cast--stack .pf-wall{display:none!important}
html body .pf-cast--stack .fg-mwall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:5px;align-items:start;width:100%}
html body .pf-cast--stack .fg-mcol{display:flex;flex-direction:column;gap:5px;will-change:transform}
html body .pf-cast--stack .fg-mcol img{display:block;width:100%;height:auto;aspect-ratio:94/140;object-fit:cover;border-radius:4px;background:#e9e7e5}
html body .pf-cast--stack .pf-cast__copy{margin:30px 0 0}
html body .pf-cast--stack .pf-cast__copy,html body .pf-cast--stack .pf-head{gap:0}
html body .pf-cast--stack .pf-head>.ha-chip{margin:0}
html body .pf-cast--stack .pf-head h2{margin:10px 0 0}

/* How to start: Figma card = 390 wide, image 298 tall, a 2px #ddd rule under the image, copy 41/24/41 */
html body .pf-offer .pf-offer__in{padding:30px 30px 30px}
html body .pf-offer .pf-head h2{font-size:30px;line-height:40px;margin:10px auto 0;max-width:352px}
html body .pf-offer .pf-offer__grid{margin:40px 0 0;gap:17px}
html body .pf-offer .pf-offer__grid>.pf-oc{border:1px solid #e6e6e6;border-radius:6px;overflow:hidden;background:#fff;padding:0}
html body .pf-offer .pf-oc .pf-oc__vis.pf-oc__vis{height:auto!important;aspect-ratio:390/298!important;border-radius:0;border-bottom:2px solid #dddddd;box-sizing:border-box}
html body .pf-offer .pf-oc .pf-oc__copy{padding:41px 24px 41px;gap:0}
html body .pf-offer .pf-oc .pf-oc__copy h3{font-size:22px;line-height:28px;margin:0}
html body .pf-offer .pf-oc .pf-oc__copy .ha-p{font-size:16px;line-height:24px;margin:16px auto 0;max-width:310px;text-wrap:wrap}
html body .pf-offer .pf-oc .pf-oc__copy .ha-btn.ha-btn{margin:26px 0 0}
}

/* v16 (Figma mobile, CTA + footer frame 1985:6326): CTA 320 tall, three-line heading, buttons 65 above the footer */
@media (max-width:991px){
html body .pf .ha-cta{height:auto!important;min-height:0!important}
html body .pf .ha-cta .ha-cta__copy{padding:64px 30px 65px;top:0!important}
html body .pf .ha-cta .ha-cta__copy h2{font-size:30px;line-height:35px;max-width:360px;margin:0 auto}
html body .pf .ha-cta .ha-cta__copy h2 br.ha-bd{display:inline!important}
html body .pf .ha-cta .ha-cta__copy .ha-actions{margin-top:42px}
/* footer */
html body footer.footer-s:has(.fg-mfoot){padding:0!important;background:#252525}
html body footer.footer-s:has(.fg-mfoot)>.container{display:none!important}
html body .fg-mfoot{padding:64px 29px 60px;color:#fff;font-family:"Helvetica Roman",Helvetica,Arial,sans-serif;letter-spacing:0}
html body .fg-mfoot a{color:#fff;text-decoration:none}
html body .fg-mf-logo{display:block;width:92px;height:19px}
html body .fg-mf-logo svg{display:block;width:92px;height:19px}
html body .fg-mf-desc{margin:23px 0 0;font-size:16px;line-height:18px;color:#fff;max-width:392px}
html body .fg-mf-soc{display:flex;gap:22px;margin-top:46px}
html body .fg-mf-soc a{display:block;width:21px;height:21px}
html body .fg-mf-soc svg{display:block;width:21px;height:21px}
html body .fg-mf-links{display:flex;flex-direction:column;align-items:flex-start;gap:21px;margin-top:44px}
html body .fg-mf-links a{font-size:15px;line-height:18px}
html body .fg-mf-links a:last-child{margin-top:4px}
html body .fg-mf-rule{border:0;border-top:2px solid #e2e2e2;margin:40px 0 0;height:0}
html body .fg-mf-copy{margin:42px 0 0;font-size:15px;line-height:15px;color:#fff}
html body .fg-mf-copy a{color:#fff}
/* model gallery: the picked face, as on desktop */
html body .pf-cast--stack .fg-mface{position:relative;border-radius:4px;transition:opacity .6s cubic-bezier(.22,.8,.2,1)}
html body .pf-cast--stack .fg-mwall.fg-picked .fg-mface:not(.is-sel){opacity:.34}
html body .pf-cast--stack .fg-msel{position:absolute;inset:0;opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:2}
html body .pf-cast--stack .fg-mface.is-sel .fg-msel{opacity:1}
html body .pf-cast--stack .fg-msel i{position:absolute;width:12px;height:12px;border:0 solid #27272a}
html body .pf-cast--stack .fg-msel i:nth-child(1){top:-4.5px;left:-4.5px;border-top-width:2px;border-left-width:2px;border-top-left-radius:4.5px}
html body .pf-cast--stack .fg-msel i:nth-child(2){top:-4.5px;right:-4.5px;border-top-width:2px;border-right-width:2px;border-top-right-radius:4.5px}
html body .pf-cast--stack .fg-msel i:nth-child(3){bottom:-4.5px;left:-4.5px;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:4.5px}
html body .pf-cast--stack .fg-msel i:nth-child(4){bottom:-4.5px;right:-4.5px;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:4.5px}
html body .pf-cast--stack .fg-msel b{position:absolute;top:-26px;left:50%;transform:translateX(-50%);padding:4px 8px;border-radius:6px;background:#27272a;color:#fff;font:400 10.5px/12px "Geist Mono",ui-monospace,monospace;white-space:nowrap}
}

/* v18: tags on the Latest images and the Why Botika card 3 caption, re-measured at 100% in Figma.
   Desktop (1440 frame, card image 433x324): tag 26 tall, 25 from the image top, 14px, solid #6b6b6b, white; THE THREAD in Geist Mono caps, PODCAST in the sans.
   Phone (Figma mobile, card 390 wide): tag 17 tall, 25 from the top, 8px, 6px side padding.
   Card 3 (433x300): caption 254x26 (14px mono) centred 73 from the top, the 116x112 strip 43 below it; the pair stays centred in the visual. */
html body .pf .fg-cost{top:calc(50% - 77.5*var(--fu));height:calc(155*var(--fu))}
html body .pf .fg-cost .fg-cost__chip{height:calc(26*var(--fu));padding:0 calc(9.5*var(--fu));border-radius:calc(6*var(--fu));font-size:calc(14*var(--fu));line-height:calc(26*var(--fu));letter-spacing:0;background:#6b6b6b;color:#fff}
html body .pf .fg-cost .fg-cost__strip{top:calc(43*var(--fu))}
@media (min-width:992px){
html body .pf .pf-news .pf-news__tags{top:calc(25*var(--fu))}
html body .pf .pf-news .pf-news__tag{height:calc(26*var(--fu));padding:0 calc(8*var(--fu));border:0;border-radius:calc(6*var(--fu));box-shadow:none;background:#6b6b6b;color:#fff;font-family:"Geist Mono",ui-monospace,monospace;font-size:calc(14*var(--fu));line-height:calc(26*var(--fu));letter-spacing:0;text-transform:uppercase;display:inline-flex;align-items:center}
}
@media (max-width:991px){
html body .pf .pf-news .pf-news__tags{top:25px}
html body .pf .pf-news .pf-news__tag{height:17px;padding:0 6px;border:0;border-radius:5px;box-shadow:none;background:#6b6b6b;color:#fff;font-family:"Geist Mono",ui-monospace,monospace;font-size:8px;line-height:17px;letter-spacing:.2px;text-transform:uppercase;display:inline-flex;align-items:center}
}
html body .pf .pf-news .pf-news__tag.fg-tag-sans{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:0}
@media (min-width:992px){html body .pf .pf-news .pf-news__tag.fg-tag-sans{padding:0 calc(5*var(--fu))}}
@media (max-width:991px){html body .pf .pf-news .pf-news__tag.fg-tag-sans{padding:0 4px}}

/* v20: the page uses two backgrounds only, white and #f5f3f1 (sections, card visuals and every image placeholder) */
@media (max-width:991px){
html body .pf .pf-story--stack .pf-story__in,html body .pf .pf-cast--stack,html body .pf .pf-offer,html body .pf .pf-news,html body .pf .pf-story--stack .fg-spin .fg-sbloom{background-color:#f5f3f1!important}
}
html body .pf .pf-s1__in,html body .pf .pf-s1__out,html body .pf .pf-s3__frame,html body .pf .pf-s4__model,html body .pf .pf-face,html body .pf .pf-news__media,html body .pf .pf-wp,html body .pf .fg-mcol img,html body .pf .pf-dot__core,html body .pf .pf-bc__vis,html body .pf .pf-oc__vis{background-color:#f5f3f1!important}
html body .pf .pf-dot__halo{background-color:#f5f3f1!important}
html body .pf .pf-cell{background-color:#fff!important}
/* phone menu: white sheet (was black, and its buttons were white on white) */
@media (max-width:991px){html body .ha-mmenu.ha-mmenu{background:#fff!important}
html body .ha-mmenu nav a{color:#0c0c0c!important;border-bottom-color:#ecebe9!important}
html body .ha-mmenu .ha-btn--dark.ha-btn--dark{background:#27272a!important;color:#fff!important}
html body .ha-mmenu .ha-btn--ghost.ha-btn--ghost{background:#fff!important;color:#0c0c0c!important;box-shadow:inset 0 0 0 1px #c5c5cb!important}
html body .ha-nav.is-menu .ha-nav__logo .ha-mask{background-color:#27272a!important}
html body .ha-nav.is-menu .ha-burger i{background-color:#27272a!important}}