/* 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}
}
/* Story card interiors follow Figma's geometry (px at 1440, relative to the 655x501 card). --g is one Figma px inside the story pin. The animations are untouched: only sizes, radii, shadows, fonts and a few hidden extras change. */
@media (min-width:992px){
/* scene 1: three lanes, 136x182 tiles, 34px connector, translucent mono chips */
html body .pf-s1 .ha-chip{height:calc(16*var(--g));padding:0 calc(6*var(--g));border:1px solid rgba(107,107,107,.74);border-radius:calc(6*var(--g));background:rgba(107,107,107,.9);font-family:"Geist Mono",ui-monospace,monospace;font-size:calc(8*var(--g));line-height:calc(10.4*var(--g));letter-spacing:0;font-weight:400;text-transform:uppercase;color:#fff}
html body .pf-s1{gap:0;justify-content:space-between;padding:0 calc(25*var(--g))}
html body .pf-s1__lane{width:calc(136*var(--g))}
html body .pf-s1__in,html body .pf-s1__out{width:calc(136*var(--g));height:calc(182*var(--g));border-radius:calc(10.4*var(--g));background:#ecebe9;border:1px solid #e1dfdd;box-shadow:0 calc(13.3*var(--g)) calc(32.6*var(--g)) rgba(39,39,42,.1)}
html body .pf-s1__in{background:#f7f7f7}
html body .pf-s1__in img{padding:0;object-fit:cover}
html body .pf-s1__in figcaption,html body .pf-s1__out figcaption{left:50%;bottom:calc(11*var(--g));transform:translateX(-50%)}
html body .pf-s1__link,html body .pf-s1__link svg{height:calc(34*var(--g))}
html body .pf-s1__link:after{width:calc(7*var(--g));height:calc(7*var(--g));margin:calc(-3.5*var(--g)) 0 0 calc(-3.5*var(--g));border:1px solid #c3c3c8;box-shadow:0 0 0 calc(3*var(--g)) #fff}
/* scene 2: 3 x 2 grid of 127x199 tiles and a six-row list; the other six cells and rows keep animating off screen so the "of 12" count stays true. Count and progress move under the list. */
html body .pf-s2{position:absolute;inset:0;padding:0;display:block}
html body .pf-s2__main{position:absolute;left:calc(25*var(--g));top:calc(53*var(--g));width:calc(603*var(--g));height:calc(402*var(--g));display:block}
html body .pf-s2__grid{position:absolute;left:0;top:0;width:calc(389*var(--g));height:calc(402*var(--g));grid-template-columns:repeat(3,calc(127*var(--g)));grid-template-rows:repeat(2,calc(199*var(--g)));gap:calc(5*var(--g)) calc(4*var(--g))}
html body .pf-cell{aspect-ratio:auto;border-radius:calc(16*var(--g))}
html body .pf-cell:nth-child(n+7){display:none}
html body .pf-list{position:absolute;left:calc(412*var(--g));top:0;width:calc(191*var(--g));border-top:0}
html body .pf-row{grid-template-columns:calc(21*var(--g)) minmax(0,1fr) auto;column-gap:calc(8*var(--g));height:calc(33*var(--g));border-bottom:1px solid #ebebeb}
html body .pf-row:nth-child(n+7){display:none}
html body .pf-row img{width:calc(21*var(--g));height:calc(29*var(--g));border:1px solid #ebebeb;border-radius:calc(3.85*var(--g))}
html body .pf-row span{font-size:calc(12*var(--g));line-height:calc(14.4*var(--g))}
html body .pf-row b{font-family:inherit;font-size:calc(10.1*var(--g));color:rgba(39,39,42,.68)}
html body .pf-s2__bar{position:absolute;left:calc(437*var(--g));top:calc(422*var(--g));width:calc(191*var(--g));height:calc(16*var(--g))}
html body .pf-s2__bar>.ha-mono:first-child{display:none}
html body .pf-s2__bar .ha-mono{font-family:inherit;font-size:calc(12*var(--g));line-height:calc(16*var(--g));color:#686868}
html body .pf-s2__count{position:static;transform:none}
html body .pf-s2__ready{position:absolute;right:0;top:calc(-2*var(--g))}
html body .pf-s2__prog{position:absolute;left:calc(437*var(--g));top:calc(454*var(--g));width:calc(191*var(--g));height:calc(2*var(--g));background:#e1dfdd}
/* scene 3: 342px photo, caption pill, and the Figma control stack (Scene tiles, Pose, Framing, Text). The product/model row and the lock line are not in Figma and are hidden. */
html body .pf-s3{display:block}
html body .pf-s3__frame{position:absolute;left:0;top:0;bottom:0;width:calc(342*var(--g))}
html body .pf-s3__cap{left:calc(25*var(--g));bottom:auto;top:calc(443*var(--g));height:calc(28*var(--g));padding:0 calc(9*var(--g));display:inline-flex;align-items:center;border-radius:calc(7.7*var(--g));background:rgba(255,255,255,.88);font-family:inherit;font-size:calc(10.1*var(--g));color:#27272a}
html body .pf-s3__panel{position:absolute;left:calc(367*var(--g));top:calc(40*var(--g));width:calc(261*var(--g));padding:0;gap:0}
html body .pf-s3__top,html body .pf-s3__lock{display:none}
html body .pf-ctl{gap:calc(4*var(--g))}
html body .pf-ctl>.ha-mono{font-family:inherit;font-size:calc(10.1*var(--g));line-height:calc(15*var(--g));color:#27272a}
html body .pf-ctl:not(.pf-ctl--chips) ul{gap:calc(7*var(--g));flex-wrap:nowrap}
html body .pf-ctl:not(.pf-ctl--chips) li{flex:none;width:calc(59.5*var(--g));max-width:none;height:calc(88*var(--g));border-radius:calc(8*var(--g));border-color:#e1dfdd;opacity:1}
html body .pf-ctl:not(.pf-ctl--chips) li img{height:calc(63*var(--g))}
html body .pf-ctl:not(.pf-ctl--chips) li b{height:calc(25*var(--g));padding:0;display:flex;align-items:center;justify-content:center;background:#ebebeb;font-size:calc(10.1*var(--g));line-height:calc(12.2*var(--g));color:#27272a}
html body .pf-ctl:not(.pf-ctl--chips) li.is-on{box-shadow:0 0 0 1px #6b6b6b}
html body .pf-ctl:not(.pf-ctl--chips) li.is-on b{background:#6b6b6b;color:#fff}
html body .pf-ctl[data-ctl="pose"]{margin-top:calc(24*var(--g));padding-top:calc(24*var(--g));border-top:1px solid #eae8e6}
html body .pf-ctl[data-ctl="frame"]{margin-top:calc(15*var(--g))}
html body .pf-ctl--chips ul{gap:calc(9*var(--g))}
html body .pf-ctl--chips .ha-chip,html body .pf-s4__tabs .ha-chip{height:calc(21*var(--g));padding:0 calc(8*var(--g));border:1px solid #e1dfdd;border-radius:calc(7.7*var(--g));background:#ebebeb;font-family:inherit;font-size:calc(10.1*var(--g));line-height:calc(12.5*var(--g));letter-spacing:0;font-weight:400;text-transform:none;color:#27272a;opacity:1}
html body .pf-ctl--chips .ha-chip.is-on,html body .pf-s4__tabs .ha-chip.is-on{background:#6b6b6b;border-color:#6b6b6b;color:#fff}
html body .pf-ctl--text{position:relative;margin-top:calc(48*var(--g));height:calc(124*var(--g));padding:calc(17*var(--g));border:1px solid #e1dfdd;border-radius:calc(16*var(--g));align-items:flex-start;gap:calc(10*var(--g))}
html body .pf-ctl--text:before{content:"";position:absolute;left:calc(-1*var(--g));right:calc(-1*var(--g));top:calc(-25*var(--g));height:1px;background:#eae8e6}
html body .pf-ctl--text p{font-size:calc(13*var(--g));line-height:calc(15.6*var(--g));white-space:normal}
html body .pf-ctl--text>.ha-mono{color:rgba(39,39,42,.68)}
/* scene 4: 304x449 photo, tabs, two 275x189 crops */
html body .pf-s4{padding:calc(25*var(--g));grid-template-columns:calc(304*var(--g)) 1fr;gap:calc(24*var(--g));align-items:start}
html body .pf-s4__model{width:calc(304*var(--g));height:calc(449*var(--g));border-radius:calc(13.5*var(--g));border-color:#e1dfdd}
html body .pf-s4__panel{gap:calc(24*var(--g))}
html body .pf-s4__tabs{gap:calc(7*var(--g));margin-bottom:calc(2*var(--g))}
html body .pf-s4__crop{height:calc(189*var(--g));border-radius:calc(13.5*var(--g));border-color:#e1dfdd}
html body .pf-s4__crop figcaption{left:calc(11*var(--g));top:calc(11*var(--g));padding:0 calc(8*var(--g));height:calc(26*var(--g));display:inline-flex;align-items:center;border-radius:calc(6.7*var(--g));background:rgba(255,255,255,.9);font-family:inherit;font-size:calc(10.1*var(--g));color:#27272a}
}
/* "Generating" reads as progress, not as an error: amber dot with a soft pulse instead of the flame red */
html body .pf-row.is-run b i{background:#e0a21b;animation:fgpulse 1s ease-in-out infinite}
@keyframes fgpulse{0%,100%{opacity:1}50%{opacity:.35}}
/* 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}
}
/* the "150+" counter and its filter chips are not in Figma */
@media (min-width:992px){
html body .pf-cast__num{display:none}
html body .pf-face img.fg-tile{transform:none;object-position:50% 50%}
}
/* 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}
}
/* Why Botika card visuals rebuilt from the Figma frame (1958:4876): px at 1440 inside a 434x300 visual, via --fu */
@media (min-width:992px){
html body .pf-ben .pf-bc__vis{position:relative;overflow:hidden;border-radius:calc(4*var(--fu));background:#f5f3f1}
/* card 2: product page */
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}
/* card 3: strip of four looks under a caption chip */
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}
}
/* 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}
}