/* Desktop only. Figma sets everything in SF Pro Display; Inter's optical size 32 is its Display cut (the shared sheet pins opsz 14, the text cut, with !important). SF Pro Display also sets ~4% narrower than Inter at the same size, so -0.02em closes the gap; mono labels keep their own spacing. */
@media (min-width:992px){
html body .pf,html body .pf *{font-variation-settings:"opsz" 32!important}
html body .pf{letter-spacing:-.02em}
}
@media (min-width:992px){
:root{--fu:calc(min(max(100vw,992px),2560px)/1440)}
html body .ha-nav .ha-btn{height:calc(38*var(--fu));min-height:0;font-size:calc(18*var(--fu));line-height:calc(24.1*var(--fu));padding:0 calc(16*var(--fu))}
html body .ha-nav .ha-btn--dark{width:calc(117*var(--fu))}
html body .ha-nav .ha-btn--ghost{width:calc(115*var(--fu))}
html body .ha-nav .ha-btn__ar{display:none}
html body .ha-nav__menu{left:50%;transform:translate(-50%);gap:calc(48*var(--fu));font-size:calc(16*var(--fu));line-height:calc(21.4*var(--fu))}
html body .ha-nav__actions{right:calc(65*var(--fu));gap:calc(11*var(--fu))}
html body .pf-hero{--u:calc(var(--fu)*1.01538);height:calc(700*var(--fu))}
html body .pf-hero__stage{width:calc(1440*var(--fu));height:calc(700*var(--fu));margin-left:calc(-720*var(--fu))}
/* the grid origin is (canvas width - 1440u)/2 + 38u; 67px of extra canvas width moves the lines onto Figma's 61 + 66n columns */
html body .pf-hero__grid{width:calc(100% + 67*var(--fu));right:auto}
html body .pf-hero__veil{display:none}
html body .pf-hero__copy{left:calc(210*var(--fu));top:calc(241*var(--fu));width:calc(1020*var(--fu));gap:0}
html body .pf-hero .ha-mono{font-family:"Geist Mono",ui-monospace,monospace;font-size:calc(12*var(--fu));line-height:calc(15.6*var(--fu));letter-spacing:calc(.36*var(--fu));text-transform:uppercase;color:#27272a;margin:0 0 calc(4*var(--fu))}
html body .pf-hero__copy h1{font-size:calc(64*var(--fu));line-height:calc(67.2*var(--fu));letter-spacing:-.02em;color:#27272a;margin:0 0 calc(24*var(--fu))}
html body .pf-hero__sub{width:calc(640*var(--fu));font-size:calc(18*var(--fu));line-height:calc(24.1*var(--fu));color:#686868;margin:0 0 calc(64*var(--fu))}
html body .pf-hero__cta{margin-top:0;gap:calc(11*var(--fu))}
html body .pf-hero .ha-btn{height:calc(38*var(--fu));min-height:0;font-size:calc(18*var(--fu));line-height:calc(24.1*var(--fu));padding:0 calc(16*var(--fu))}
html body .pf-hero .ha-btn--dark{width:calc(117*var(--fu))}
html body .pf-hero .ha-btn--ghost{width:calc(115*var(--fu))}
html body .pf-hero .ha-btn__ar{display:none}
html body .ha-logos{padding:calc(48*var(--fu)) 0 calc(49*var(--fu));height:calc(190*var(--fu));box-sizing:border-box}
html body .pf .ha-logos__cap{font-family:"Geist Mono",ui-monospace,monospace;font-size:calc(12*var(--fu));line-height:calc(15.6*var(--fu));letter-spacing:calc(.36*var(--fu));text-transform:uppercase;color:#27272a}
html body .ha-logos__row{margin-top:calc(39*var(--fu))}
}
/* Story: 6 Figma states (statement split, 4 chapters, statement + CTA). The pin's unit is rebuilt so Figma's 655x501 cards are 680x520 scaled by .9617 and the JS card travel (530u) lands on Figma's 510 pitch. --g converts Figma px into that unit. */
@media (min-width:992px){
html body .pf-story__pin{--u:min(calc(var(--fu)*.9617),.125svh);--g:calc(1.03981*var(--u))}
html body .pf-story__in{width:100%;height:100%}
html body .pf-rails .r{background:#ebebeb}
html body .pf-rails .r1{left:calc(50% - 660*var(--g))}
html body .pf-rails .r2{left:calc(50% + 660*var(--g))}
html body .pf-bloom{background:#f5f3f1}
html body .pf-statement{top:calc(50% - 31*var(--g));height:calc(67.2*var(--g));font-size:calc(64*var(--g));line-height:calc(67.2*var(--g));letter-spacing:-.02em;color:#27272a}
html body .pf-w--l{right:calc(50% + 3.5*var(--g))}
html body .pf-w--r{left:calc(50% + 3.5*var(--g))}
html body .pf-story:not(.pf-story--stack) .pf-story__chip{left:calc(171*var(--g));top:calc(50% - 152*var(--g));height:calc(32*var(--g))}
html body .pf-story__chip .ha-chip{height:calc(32*var(--g));padding:0 calc(16*var(--g));border-radius:calc(6*var(--g));background:#ebebeb;font-family:"Geist Mono",ui-monospace,monospace;font-size:calc(12*var(--g));line-height:calc(15.6*var(--g));letter-spacing:calc(.36*var(--g));font-weight:400;text-transform:uppercase;color:#27272a;display:inline-flex;align-items:center}
html body .pf-name{left:calc(171*var(--g));top:calc(50% - 112*var(--g));height:calc(39*var(--g));width:calc(470*var(--g));display:block;font-size:calc(32*var(--g));line-height:calc(39*var(--g));letter-spacing:-.02em}
html body .pf-name .ha-mono,html body .pf-name br{display:none}
html body .pf-line{left:calc(171*var(--g));top:calc(50% - 49*var(--g));width:calc(326*var(--g));font-size:calc(18*var(--g));line-height:calc(24.1*var(--g));letter-spacing:-.02em;color:#686868}
html body .pf-cards{left:calc(614*var(--g));top:calc(50% - 310*var(--g))}
html body .pf-story__cta{top:calc(50% + 100*var(--g));gap:calc(11*var(--g))}
html body .pf-story__cta .ha-btn{height:calc(38*var(--g));min-height:0;font-size:calc(18*var(--g));line-height:calc(24.1*var(--g));padding:0 calc(16*var(--g))}
html body .pf-story__cta .ha-btn--dark{width:calc(117*var(--g))}
html body .pf-story__cta .ha-btn--ghost{width:calc(115*var(--g))}
html body .pf-story__cta .ha-btn__ar{display:none}
/* card shell */
html body .pf-card__in{border:1px solid #e1dfdd;border-radius:calc(4*var(--g));background:#fff;box-shadow:0 calc(32.7*var(--g)) calc(77*var(--g)) rgba(98,98,98,.2)}
html body .pf-card__in:after{display:none}
}
/* Model gallery: Figma puts the copy left (x171) and a 6 x 4 grid of 106x141 faces right (x614, 4px gaps). The JS column travel is 183u per step, so --u is chosen as .7923 to make Figma's 145px row pitch equal that step. --gg is a Figma px. */
@media (min-width:992px){
html body .pf-cast{--u:min(calc(var(--fu)*.7923),calc((100svh - 80px)/1035));--gg:calc(var(--u)/.7923)}
html body .pf-cast__in{display:block;width:calc(1440*var(--gg));height:calc(576*var(--gg));padding:0}
html body .pf-cast__stage{position:absolute;left:calc(614*var(--gg));top:0;width:calc(655*var(--gg));height:calc(576*var(--gg))}
html body .pf-wall{grid-template-columns:repeat(6,calc(106*var(--gg)));gap:calc(4*var(--gg));border-radius:0}
html body .pf-col{gap:calc(4*var(--gg))}
html body .pf-face{width:calc(106*var(--gg));height:calc(141*var(--gg));border-radius:calc(4*var(--gg))}
html body .pf-sel{left:calc(3*110*var(--gg));top:calc(145*var(--gg));width:calc(106*var(--gg));height:calc(141*var(--gg))}
html body .pf-cast__copy{position:absolute;left:calc(171*var(--gg));top:calc(172*var(--gg));width:calc(380*var(--gg));gap:calc(30*var(--gg))}
html body .pf-cast__copy .pf-head{display:flex;flex-direction:column;align-items:flex-start;gap:0}
html body .pf-cast__copy .pf-head .ha-chip{height:calc(32*var(--gg));padding:0 calc(16*var(--gg));border-radius:calc(6*var(--gg));background:#ebebeb;border:0;font-family:"Geist Mono",ui-monospace,monospace;font-size:calc(12*var(--gg));line-height:calc(15.6*var(--gg));letter-spacing:calc(.36*var(--gg));font-weight:400;text-transform:uppercase;color:#27272a;display:inline-flex;align-items:center;margin:0 0 calc(8*var(--gg))}
html body .pf-cast .pf-head h2{font-size:calc(32*var(--gg));line-height:calc(39*var(--gg));letter-spacing:-.02em;color:#27272a;margin:0 0 calc(25*var(--gg));white-space:nowrap}
html body .pf-cast__copy .pf-head .ha-p{width:calc(322*var(--gg));font-size:calc(18*var(--gg));line-height:calc(24.1*var(--gg));letter-spacing:-.02em;color:#686868;margin:0 0 calc(41*var(--gg))}
html body .pf-cast__copy .ha-btn{height:calc(38*var(--gg));min-height:0;font-size:calc(18*var(--gg));line-height:calc(24.1*var(--gg));padding:0 calc(16*var(--gg))}
html body .pf-cast__copy .ha-btn__ar{display:none}
}
/* Why Botika + How to start: centred heads with a pill chip, 32px titles, 128px section padding. Card visuals keep their live animations; only the card shell and copy follow Figma. */
@media (min-width:992px){
html body .pf-ben,html body .pf-offer{--u:var(--fu)}
html body .pf-ben .pf-head,html body .pf-offer .pf-head{align-items:center;text-align:center;gap:0}
html body .pf-ben .pf-head>.ha-chip,html body .pf-offer .pf-head>.ha-chip{height:calc(32*var(--fu));padding:0 calc(16*var(--fu));border-radius:calc(6*var(--fu));background:#ebebeb;border:0;font-family:"Geist Mono",ui-monospace,monospace;font-size:calc(12*var(--fu));line-height:calc(15.6*var(--fu));letter-spacing:calc(.36*var(--fu));font-weight:400;text-transform:uppercase;color:#27272a;display:inline-flex;align-items:center;margin:0 0 calc(8*var(--fu))}
html body .pf-ben .pf-head h2,html body .pf-offer .pf-head h2{font-size:calc(32*var(--fu));line-height:calc(39*var(--fu));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{width:calc(585*var(--fu));margin:calc(24*var(--fu)) auto 0;font-size:calc(18*var(--fu));line-height:calc(24.1*var(--fu));letter-spacing:-.02em;color:#686868}
html body .pf-ben__in,html body .pf-offer__in{width:calc(1440*var(--fu));padding:calc(128*var(--fu)) calc(60*var(--fu))}
html body .pf-ben__grid{margin-top:calc(64*var(--fu));gap:calc(10*var(--fu))}
html body .pf-bc{height:auto;border:0;border-radius:0;background:transparent;overflow:visible}
html body .pf-bc__vis{height:calc(300*var(--fu));border:0;border-radius:calc(4*var(--fu));background:#f5f3f1}
html body .pf-bc__txt{padding:calc(24*var(--fu)) calc(42*var(--fu)) 0;gap:calc(24*var(--fu));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:calc(24*var(--fu));line-height:calc(29.3*var(--fu));letter-spacing:-.02em;color:#27272a;margin:0}
html body .pf-bc__txt .ha-p{margin:0;font-size:calc(18*var(--fu));line-height:calc(24.1*var(--fu));letter-spacing:-.02em;color:#686868}
html body .pf-offer{background:#f5f3f1}
html body .pf-offer__grid{margin-top:calc(64*var(--fu));gap:calc(10*var(--fu))}
html body .pf-oc{padding:0;gap:0;border:0;border-radius:0;background:#fff;overflow:hidden}
html body .pf-oc__vis,html body .pf-oc__vis.pf-gp,html body .pf-oc__vis.pf-pr{height:calc(324*var(--fu));margin:0;padding:0;border-radius:calc(4*var(--fu)) calc(4*var(--fu)) 0 0}
html body .pf-gp__tags{display:none}
html body .pf-oc__copy{padding:calc(24*var(--fu)) calc(111*var(--fu)) calc(42*var(--fu));gap:calc(24*var(--fu));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:calc(24*var(--fu));line-height:calc(29.3*var(--fu));letter-spacing:-.02em;color:#27272a;margin:0}
html body .pf-oc__copy .ha-p{font-size:calc(18*var(--fu));line-height:calc(24.1*var(--fu));letter-spacing:-.02em;color:#686868;margin:0}
html body .pf-oc__copy .ha-btn{margin:calc(18*var(--fu)) 0 0;height:calc(38*var(--fu));min-height:0;font-size:calc(18*var(--fu));line-height:calc(24.1*var(--fu));padding:0 calc(16*var(--fu))}
html body .pf-oc__copy .ha-btn__ar{display:none}
}
/* cta_1 (stat + logo list) and testimonial: full-bleed, 64px stat, 198px list band with 133px logo slots, 295px quote block. The grid canvas behind the stat is a live animation and stays. */
@media (min-width:992px){
html body .ha-proof{--u:var(--fu);--ug:var(--fu);padding:0}
html body .ha-proof__box{width:100%;border:0;border-image:none}
html body .pf .ha-proof__grid{height:calc(364*var(--fu))}
html body .pf .ha-proof__stat{top:calc(128*var(--fu));width:calc(983*var(--fu));margin-left:calc(-491.5*var(--fu));font-size:calc(64*var(--fu));line-height:calc(70.4*var(--fu));letter-spacing:-.02em;color:#27272a;white-space:normal}
html body .ha-proof__ask{height:calc(198*var(--fu));padding-top:calc(65*var(--fu));border-top:1px solid #e1dfdd;border-bottom:1px solid #e1dfdd;box-sizing:border-box}
html body .pf .ha-proof__askcap{height:calc(12*var(--fu));font-size:calc(11*var(--fu));line-height:calc(11.8*var(--fu));letter-spacing:0;color:#27272a}
html body .ha-proof__logos{margin:calc(8*var(--fu)) 0 0;height:calc(48*var(--fu))}
html body .ha-qlogo{flex:0 0 calc(133.4*var(--fu));height:calc(48*var(--fu))}
html body .ha-proof__logos .ha-logo--forever{width:calc(63*var(--fu));height:calc(11*var(--fu))}
html body .ha-proof__logos .ha-logo--jordache{width:calc(41*var(--fu));height:calc(19*var(--fu))}
html body .ha-proof__logos .ha-logo--laredoute{width:calc(22*var(--fu));height:calc(22*var(--fu))}
html body .ha-proof__logos .ha-logo--pointzero{width:calc(96*var(--fu));height:calc(11*var(--fu))}
html body .ha-proof__logos .ha-logo--perry{width:calc(95*var(--fu));height:calc(7*var(--fu))}
html body .ha-proof__logos .ha-logo--hiccup{width:calc(44*var(--fu));height:calc(17*var(--fu))}
html body .ha-quotes{width:100%;border:0;border-bottom:1px solid #e1dfdd}
html body .ha-quote{padding:calc(64*var(--fu)) 0 calc(66*var(--fu))}
html body .ha-quote__mark{height:calc(24*var(--fu));margin-bottom:calc(24*var(--fu))}
html body .ha-logo--q-jordache{width:calc(52*var(--fu));height:calc(24*var(--fu))}
html body .pf .ha-quote__q,html body .pf .ha-quote__q *{font-variation-settings:"opsz" 14!important}
html body .pf .ha-quote__q{width:calc(361*var(--fu));min-height:0;font-size:calc(20*var(--fu));line-height:calc(24.2*var(--fu));letter-spacing:-.012em;color:#27272a}
html body .ha-quote__by{margin-top:calc(16*var(--fu))}
html body .pf .ha-quote__name,html body .pf .ha-quote__role{font-variation-settings:"opsz" 14!important;letter-spacing:0;font-size:calc(12*var(--fu));line-height:calc(13.8*var(--fu))}
html body .pf .ha-quote__name{color:#27272a}
html body .pf .ha-quote__role{color:rgba(0,0,0,.56)}
}
/* Latest: three white cards in one row (two guides + the newest podcast), 324px media with a centred translucent tag, centred copy, link with arrow. The second podcast item and the two section buttons are not in Figma and are hidden on this page only. */
@media (min-width:992px){
html body .pf-news{--u:var(--fu);background:#f5f3f1}
html body .pf-news__in{width:calc(1440*var(--fu));padding:calc(128*var(--fu)) calc(60*var(--fu))}
html body .pf-news__head{align-items:center;text-align:center;max-width:none;gap:0}
html body .pf-news__kicker{height:calc(32*var(--fu));padding:0 calc(16*var(--fu));border:0;border-radius:calc(6*var(--fu));background:#ebebeb;font-family:"Geist Mono",ui-monospace,monospace;font-size:calc(12*var(--fu));line-height:calc(15.6*var(--fu));letter-spacing:calc(.36*var(--fu));font-weight:400;text-transform:uppercase;color:#27272a;margin:0 0 calc(8*var(--fu))}
html body .pf-news__h2{font-size:calc(32*var(--fu));line-height:calc(39*var(--fu));letter-spacing:-.02em;color:#27272a}
html body .pf-news__sub{width:calc(610*var(--fu));margin:calc(24*var(--fu)) auto 0;font-size:calc(18*var(--fu));line-height:calc(24.1*var(--fu));letter-spacing:-.02em;color:#686868}
html body .pf-news__grid{margin-top:calc(64*var(--fu));grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(10*var(--fu))}
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;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;height:calc(324*var(--fu));aspect-ratio:auto;border-radius:calc(4*var(--fu))}
html body .pf-news__tags{position:absolute;left:0;right:0;top:calc(25*var(--fu));justify-content:center;z-index:2}
html body .pf-news__tag{height:calc(16*var(--fu));padding:0 calc(6*var(--fu));border:1px solid rgba(107,107,107,.74);border-radius:calc(6*var(--fu));background:rgba(107,107,107,.85);font-family:"Geist Mono",ui-monospace,monospace;font-size:calc(8*var(--fu));line-height:calc(10.4*var(--fu));letter-spacing:0;font-weight:400;text-transform:uppercase;color:#fff}
html body .pf-news__ep{display:none}
html body .pf-news__grid>.pf-news__col:last-child .pf-news__media{background:#191919}
html body .pf-news__grid>.pf-news__col:last-child .pf-news__img{object-fit:contain}
html body .pf-news__body{padding:calc(24*var(--fu)) calc(42*var(--fu)) calc(42*var(--fu));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:calc(24*var(--fu));line-height:calc(29.3*var(--fu));letter-spacing:-.02em;color:#27272a;text-wrap:balance;overflow:visible;margin:0 0 calc(24*var(--fu))}
html body .pf-news__sum{display:block;font-size:calc(18*var(--fu));line-height:calc(24.1*var(--fu));letter-spacing:-.02em;color:#686868;overflow:visible;margin:0 0 calc(42*var(--fu))}
html body .pf-news__more{display:inline-flex;align-items:center;gap:calc(8*var(--fu));margin:0;padding:0;background:none;font-size:calc(16*var(--fu));line-height:calc(17.6*var(--fu));letter-spacing:-.005em;font-variation-settings:"opsz" 14!important;color:#0c0c0c}
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{background:none}
html body .pf-news__card:hover .pf-news__more:after{transform:translateX(calc(3*var(--fu)))}
html body .pf-news__cta{display:none}
}
/* cta_2: 498px band, 64px two-line headline at y128, buttons at y339. The grid canvas behind it is a live animation and stays. */
@media (min-width:992px){
html body .pf .ha-cta{--u:var(--fu);height:calc(498*var(--fu))}
html body .pf .ha-cta__copy{top:calc(128*var(--fu));width:calc(983*var(--fu));margin-left:calc(-491.5*var(--fu))}
html body .pf .ha-cta__copy h2{height:auto;display:block;font-size:calc(64*var(--fu));line-height:calc(70.4*var(--fu));letter-spacing:-.02em;color:#27272a;text-wrap:auto}
html body .pf .ha-cta__copy .ha-actions{margin-top:calc(71*var(--fu));height:calc(38*var(--fu));gap:calc(12*var(--fu))}
html body .pf .ha-cta .ha-btn{height:calc(38*var(--fu));min-height:0;font-size:calc(18*var(--fu));line-height:calc(24.1*var(--fu));padding:0 calc(16*var(--fu))}
html body .pf .ha-cta .ha-btn__ar{display:none}
}