/* Why Not Ads — editorial redesign v1 (wna-29). Business sense, with a point of view.
   Tokens follow the implementation brief §4. Inter Tight is the full variable font (100–900);
   Cormorant Garamond 500 is used only for the serif "turn" in headlines and a few pull quotes. */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-tight-normal-latin-ext.woff2) format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-tight-normal-latin.woff2) format("woff2");unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-ext-500-italic.woff2) format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");unicode-range:U+0-FF,U+131,U+152-153,U+2000-206F,U+20AC}

:root{
  --cream:#F4F0E8; --ink:#000; --pink:#EE2A7B; --white:#FFF; --muted:#514D49; --line:#B8B1A7;
  --paper:#FBF8F2; --err:#A3001F; --ok:#0B6B3A;
  --sans:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --gut:20px; --gap:16px; --cols:4; --sec:64px; --hdr:72px; --max:1280px;
  --e-in:cubic-bezier(.22,1,.36,1); --e-ui:cubic-bezier(.2,0,0,1); --e-out:cubic-bezier(.4,0,1,1);
  --r-ui:12px; --r-ed:2px; --shadow:8px 8px 0 var(--ink);
  --ck:0px;
}
@media (min-width:768px){:root{--gut:32px;--gap:20px;--cols:8;--sec:80px}}
@media (min-width:1024px){:root{--gut:48px;--gap:24px;--cols:12;--sec:112px;--hdr:88px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 24px);background:var(--cream)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:clamp(16.5px,.25vw + 15.6px,18px);line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11";overflow-x:clip}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
[hidden]{display:none !important}
:focus{outline:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}
.on-ink :focus-visible,.s--ink :focus-visible,.foot :focus-visible,.d90 :focus-visible{outline-color:var(--cream)}
::selection{background:var(--pink);color:var(--ink)}
.vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--cream);padding:12px 16px;border-radius:8px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
[id]{scroll-margin-top:calc(var(--hdr) + 24px)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap)}
.grid > *{grid-column:1/-1;min-width:0}
.s{padding:var(--sec) 0}
.s--tight{padding:calc(var(--sec) * .6) 0}
.s--white{background:var(--white)}
.s--paper{background:var(--paper)}
.s--ink,.s--black{background:var(--ink);color:var(--cream)}
.s--pink{background:var(--cream)}
main{display:block}

/* ---------- type ---------- */
.h1,.ph h1,.hero__h{font-weight:700;letter-spacing:-.035em;line-height:.98;font-size:clamp(46px,7.4vw,112px)}
.h1 .sf,.ph h1 .sf,.hero__h .sf,.h2 .sf,.sf{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.01em;line-height:.95}
.hero__h .sf{font-size:1.07em}
.h2,h2.h2{font-weight:700;letter-spacing:-.03em;line-height:1.06;font-size:clamp(34px,4.2vw + 8px,64px);text-wrap:balance}
.h3{font-weight:650;letter-spacing:-.02em;line-height:1.15;font-size:clamp(22px,1.2vw + 16px,32px)}
.lede{font-size:clamp(18px,.4vw + 16.5px,22px);line-height:1.45;max-width:36em}
.label{font-size:13px;line-height:1.4;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.s--ink .label,.s--black .label,.on-ink .label,.d90 .label{color:#CFC8BC}
.micro,.small{font-size:15px;line-height:1.5;color:var(--muted)}
.s--ink .micro,.s--black .micro{color:#CFC8BC}
.help{font-size:15px;color:var(--muted);margin:2px 0 10px}
p + p{margin-top:.75em}
.pk{color:var(--pink)}
.prose{max-width:38em}
.prose p + p{margin-top:1em}

/* brand question mark: decorative, pink, beside an accessible "?" */
.q{width:.56em;height:auto;fill:var(--pink);display:inline-block;vertical-align:baseline}
.qm{display:inline-block;width:.5em;margin-left:.04em;vertical-align:-.02em}
.qm svg{width:100%;height:auto;fill:var(--pink)}

/* ---------- buttons and links ---------- */
.btn{--bg:var(--pink);--fg:var(--ink);--bd:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:14px 22px;border:1.5px solid var(--bd);border-radius:999px;background:var(--bg);color:var(--fg);font-weight:650;font-size:17px;line-height:1.1;text-decoration:none;cursor:pointer;transition:background-color .16s var(--e-ui),color .16s var(--e-ui),transform .16s var(--e-ui),box-shadow .16s var(--e-ui);-webkit-tap-highlight-color:transparent;text-align:center}
.btn:hover{--bg:var(--ink);--fg:var(--cream)}
.btn:active{transform:translateY(1px)}
.btn .arw{display:inline-flex;transition:transform .16s var(--e-ui)}
.btn:hover .arw{transform:translateX(4px)}
.btn--o,.btn--ghost{--bg:transparent}
.btn--o:hover{--bg:var(--ink);--fg:var(--cream)}
.btn--ink{--bg:var(--ink);--fg:var(--cream)}
.btn--ink:hover{--bg:var(--pink);--fg:var(--ink)}
.btn--l{min-height:56px;padding:16px 26px;font-size:18px}
.btn--s{min-height:44px;padding:10px 18px;font-size:15.5px}
.btn[disabled]{opacity:.62;cursor:progress}
.s--ink .btn--o,.s--black .btn--o,.on-ink .btn--o{--fg:var(--cream);--bd:var(--cream)}
.s--ink .btn--o:hover,.s--black .btn--o:hover,.on-ink .btn--o:hover{--bg:var(--cream);--fg:var(--ink)}
.ar{width:.82em;height:.82em;fill:currentColor}
.ar--r{transform:rotate(45deg)}
.ar--d{transform:rotate(135deg)}
.ar--l{transform:rotate(-135deg)}
.arw{display:inline-flex;align-items:center}
.tlink{display:inline-flex;align-items:center;gap:.45em;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em;transition:text-decoration-thickness .16s var(--e-ui),text-underline-offset .16s var(--e-ui);min-height:44px}
.tlink:hover{text-decoration-thickness:3px;text-underline-offset:.28em}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
@media (max-width:767px){.cta .btn{width:100%}}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:40;height:var(--hdr);background:var(--cream);border-bottom:1px solid transparent;transition:border-color .2s var(--e-ui)}
.top.is-small{border-bottom-color:var(--line)}
.top__in{height:100%;display:flex;align-items:center;gap:24px}
.top__logo{display:flex;align-items:center;min-height:44px;flex:none}
.top__logo .logo{width:clamp(150px,13vw,188px);fill:var(--ink)}
.logo .lq{fill:var(--pink)}
.top__nav{display:none;margin-left:auto;gap:28px}
.top__nav a{font-size:16px;font-weight:550;text-decoration:none;padding:10px 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 4px)/0 1.5px no-repeat;transition:background-size .16s var(--e-ui)}
.top__nav a:hover,.top__nav a[aria-current="page"]{background-size:100% 1.5px}
.top__act{display:flex;align-items:center;gap:20px;margin-left:auto}
.top__ap{display:none;font-weight:600;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1.5px;padding:10px 0}
.top__menu{min-height:44px;min-width:44px;padding:8px 16px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;font-weight:650;cursor:pointer}
@media (min-width:1024px){
  .top__nav{display:flex}
  .top__act{margin-left:32px}
  .top__ap{display:inline-flex}
  .top__menu{display:none}
}
@media (max-width:399px){.top__cta{display:none}}
@media (max-width:1279px){.top__cl{display:none}}
@media (max-width:1023px){.top__act{gap:10px}.top__cta{min-height:44px;padding:9px 14px;font-size:15px}}

/* mobile menu (modal dialog, opened by script) */
.mnav{position:fixed;inset:var(--hdr) 0 0 0;z-index:39;background:var(--cream);overflow-y:auto;padding:24px var(--gut) 40px;display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line)}
.mnav > a{display:flex;align-items:baseline;gap:14px;padding:12px 0;font-size:clamp(28px,7vw,40px);font-weight:700;letter-spacing:-.03em;text-decoration:none;border-bottom:1px solid var(--line)}
.mnav__tools{margin-top:24px;display:grid;gap:4px}
.mnav__tk{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.mnav__t{display:block;padding:12px 0;text-decoration:none;border-bottom:1px solid var(--line)}
.mnav__t b{display:block;font-size:19px}
.mnav__t span{font-size:15px;color:var(--muted)}
.mnav__a{display:grid;gap:12px;margin-top:28px}
@media (prefers-reduced-motion:no-preference){.mnav:not([hidden]){animation:mnavIn .22s var(--e-in)}}
@keyframes mnavIn{from{opacity:0;transform:translateY(12px)}}
html.menu-open{overflow:hidden}

/* ---------- section heads ---------- */
.head{margin-bottom:clamp(32px,4vw,56px)}
.head .label{margin-bottom:16px}
.head .h2{max-width:14em}
.head .lede{margin-top:20px}
@media (min-width:1024px){.head--split{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}.head--split > .h2{grid-column:1/8}.head--split > .lede{grid-column:8/-1;margin:0}}

/* ---------- 07 founder ---------- */

/* ---------- 08 pricing ---------- */
@media (min-width:768px){.rates{grid-template-columns:1fr 1fr}.rate:last-child{grid-column:1/-1}}
@media (min-width:1024px){.rates{grid-template-columns:repeat(3,1fr)}.rate:last-child{grid-column:auto}}
.terms{margin-top:clamp(28px,3vw,40px);display:grid;gap:12px 24px;border-top:1.5px solid var(--ink);padding-top:22px}
@media (min-width:768px){.terms{grid-template-columns:1fr 1fr}}
.terms li{position:relative;padding-left:22px;font-size:16px}
.terms li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--ink);border-radius:50%}
.terms__d{margin-top:20px;border:1px solid var(--line);border-radius:var(--r-ui);background:var(--white)}
.terms__d summary{cursor:pointer;padding:16px 18px;font-weight:650;min-height:48px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.terms__d summary::-webkit-details-marker{display:none}
.terms__d summary::after{content:"+";font-size:22px;line-height:1}
.terms__d[open] summary::after{content:"–"}
.terms__b{padding:0 18px 18px;display:grid;gap:16px}
@media (min-width:768px){.terms__b{grid-template-columns:1fr 1fr}}
.terms__b h4{font-size:16.5px;margin-bottom:4px}
.terms__b p{font-size:15.5px;color:var(--muted)}
.terms__vat{grid-column:1/-1;font-size:15.5px}
@media (min-width:768px){.next3__l{grid-template-columns:2fr 1fr 1fr}}
.tool{display:flex;flex-direction:column;gap:6px;padding:20px;border:1.5px solid var(--ink);border-radius:var(--r-ui);text-decoration:none;background:var(--white);transition:background-color .16s var(--e-ui)}
.tool b{font-size:19px}
.tool span{font-size:15px;color:var(--muted)}
.tool:hover{background:var(--cream)}
.tool--main{background:var(--pink)}
.tool--main span{color:var(--ink)}
.tool--main:hover{background:var(--ink);color:var(--cream)}
.tool--main:hover span{color:var(--cream)}

/* ---------- 09 questions (also used on Pilates) ---------- */
@media (min-width:1024px){.faq__k{grid-column:1/5}.acc{grid-column:5/-1}}
.faq__k{margin-bottom:24px}
.acc{border-top:1.5px solid var(--ink)}
.acc__i{border-bottom:1px solid var(--line)}
.acc__i summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;min-height:56px}
.acc__i summary::-webkit-details-marker{display:none}
.acc__i summary h3{font-size:clamp(19px,.6vw + 16px,23px);font-weight:650;letter-spacing:-.015em}
.acc__i summary h3 b{color:inherit;font-weight:inherit}
.acc__i summary i{flex:none;position:relative;width:28px;height:28px;border:1.5px solid var(--ink);border-radius:50%}
.acc__i summary i::before,.acc__i summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.acc__i summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .18s var(--e-ui)}
.acc__i[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.acc__a{padding:0 0 22px;max-width:40em}
.qa__no{font-weight:700}

/* ---------- 10 final invitation ---------- */
.fin{position:relative;overflow:hidden}
.fin__h{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(48px,7vw,112px);line-height:.95;letter-spacing:-.015em;max-width:10em}
.fin__h .qm{width:.42em}
.fin__b{margin-top:clamp(28px,3vw,44px);display:grid;gap:28px}
@media (min-width:1024px){.fin__b{grid-template-columns:7fr 5fr;gap:48px;align-items:end}}
.fin__sig{display:block;margin-top:12px;font-family:var(--serif);font-style:italic;font-size:24px}
.fin__a{display:grid;gap:14px;justify-items:start}
.fin__dot{position:absolute;right:calc(var(--gut) + 2%);top:clamp(40px,6vw,96px);width:clamp(54px,7vw,110px);aspect-ratio:1;border-radius:50%;background:var(--pink)}
@media (max-width:767px){.fin__dot{display:none}.fin__a{justify-items:stretch}}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--cream);padding:clamp(56px,6vw,88px) 0 calc(28px + var(--ck))}
.foot__g{row-gap:40px}
.foot__tag{font-family:var(--serif);font-style:italic;font-size:clamp(28px,2.4vw + 14px,44px);line-height:1.05;max-width:12em}
.foot__nav{display:grid;gap:28px}
@media (min-width:768px){.foot__nav{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.foot__tag{grid-column:1/6}.foot__nav{grid-column:7/-1}}
.foot__col{display:flex;flex-direction:column;align-items:flex-start}
.foot__gk{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#CFC8BC;margin-bottom:8px}
.foot__col a,.foot__col button{display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;cursor:pointer;text-decoration:none;font-size:16.5px;color:var(--cream)}
.foot__col a:hover,.foot__col button:hover{text-decoration:underline;text-underline-offset:.22em}
.foot__big{margin-top:clamp(48px,6vw,96px)}
.foot__big .logo{width:100%;fill:var(--cream)}
.foot__end{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:28px;padding-top:20px;border-top:1px solid #4A4642;font-size:15px}
.foot__end a{min-height:44px;display:inline-flex;align-items:center}
.foot__soc{display:flex;gap:20px}

/* ---------- cookie consent ---------- */
.ck{position:fixed;left:var(--gut);right:var(--gut);bottom:16px;z-index:50;max-width:760px;margin:0 auto;background:var(--white);border:1.5px solid var(--ink);border-radius:var(--r-ui);box-shadow:var(--shadow);padding:16px 18px;display:grid;gap:12px}
.ck__h{font-weight:700;font-size:17px}
.ck__p{font-size:15px;line-height:1.45;color:var(--muted)}
.ck__p a{color:var(--ink)}
.ck__a{display:grid;gap:8px}
.ck__a .btn{min-height:46px;padding:10px 16px;font-size:15.5px;--bg:var(--white)}
.ck__a .btn:hover{--bg:var(--ink)}
@media (min-width:768px){.ck{grid-template-columns:1fr auto;align-items:center;column-gap:24px}.ck__a{grid-template-columns:auto auto auto;grid-column:1/-1}}
@media (min-width:1024px){.ck__a{grid-column:auto;grid-row:1/3;grid-column:2}.ck{max-width:980px}.ck__a{grid-template-columns:1fr}}
.ckd{border:1.5px solid var(--ink);border-radius:var(--r-ui);padding:0;max-width:560px;width:calc(100% - 32px);background:var(--white);color:var(--ink)}
.ckd::backdrop{background:rgba(0,0,0,.45)}
.ckd__in{padding:22px;display:grid;gap:14px}
.ckd__top{display:flex;justify-content:space-between;align-items:center}
.ckd__x{min-height:44px;padding:8px 14px;border:1.5px solid var(--ink);border-radius:999px;background:none;cursor:pointer;font-weight:600}
.ckd__h{font-size:22px;font-weight:700}
.ckd__p,.ckd__d{font-size:15px;color:var(--muted)}
.ckd__r{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.ckd__n{font-weight:650}
.ckd__on{font-size:14px;font-weight:600;white-space:nowrap}
.ckd__sw{position:relative;flex:none;width:52px;height:30px}
.ckd__sw input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer;z-index:1}
.ckd__sw i{position:absolute;inset:0;border:1.5px solid var(--ink);border-radius:999px;background:var(--white)}
.ckd__sw i::after{content:"";position:absolute;left:3px;top:3px;width:21px;height:21px;border-radius:50%;background:var(--ink);transition:transform .16s var(--e-ui)}
.ckd__sw input:checked + i{background:var(--pink)}
.ckd__sw input:checked + i::after{transform:translateX(21px)}
.ckd__sw input:focus-visible + i{outline:3px solid var(--ink);outline-offset:3px}
.ckd__a{display:grid;gap:8px}
@media (min-width:560px){.ckd__a{grid-template-columns:1fr 1fr 1fr}.ckd__a .btn{padding:10px 12px;font-size:15px}}

/* ---------- page heads (inner pages) ---------- */
.ph{padding:clamp(32px,5vw,72px) 0 clamp(40px,5vw,64px)}
.ph .label{margin-bottom:20px}
.ph h1{font-size:clamp(42px,5.6vw + 8px,96px);margin-bottom:28px}
.ph h1 > span{display:block}
.ph__b{max-width:38em}
.ph__b > * + *{margin-top:14px}
.ph__b .cta{margin-top:28px}
.note-box{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1.5px solid var(--ink);border-radius:var(--r-ui);background:var(--white);font-weight:550}
.note-box::before{content:"";flex:none;width:10px;height:10px;margin-top:.5em;border-radius:50%;background:var(--pink);border:1.5px solid var(--ink)}

/* ---------- forms ---------- */
.sheet{background:var(--white);border:1.5px solid var(--ink);border-radius:var(--r-ui);padding:clamp(20px,2.6vw,36px)}
.f{display:grid;gap:6px;margin-bottom:22px}
.f > label,.f__l{font-weight:650;font-size:16.5px}
.f em,.f__l em,label em{font-style:normal;font-weight:500;color:var(--muted);font-size:14.5px;margin-left:6px}
.req{font-weight:500;color:var(--muted);font-size:14.5px;margin-left:6px}
.f input[type=text],.f input[type=email],.f input[type=url],.f textarea,.money input{width:100%;min-height:52px;padding:12px 14px;border:1.5px solid var(--ink);border-radius:8px;background:var(--white);font-size:17px;line-height:1.35}
.f textarea{min-height:110px;resize:vertical}
.f input::placeholder,.f textarea::placeholder{color:#8C857B}
.f input:focus-visible,.f textarea:focus-visible,.money input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.f.is-bad input,.f.is-bad textarea{border-color:var(--err);border-width:2px}
.err{color:var(--err);font-size:15px;font-weight:600;min-height:0}
.err:not(:empty)::before{content:"! ";font-weight:800}
.opts{display:flex;flex-wrap:wrap;gap:12px}
.opts label{position:relative;cursor:pointer}
.opts input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opts span{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:10px 16px;border:1.5px solid var(--ink);border-radius:999px;background:var(--white);font-weight:550;font-size:16px}
.opts span::before{content:"";flex:none;width:16px;height:16px;border:1.5px solid var(--ink);border-radius:50%;background:var(--white)}
.opts input:checked + span{background:var(--pink)}
.opts input:checked + span::before{background:var(--ink);box-shadow:inset 0 0 0 3px var(--white)}
.opts input:focus-visible + span{outline:3px solid var(--ink);outline-offset:3px}
.hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__msg{margin-top:12px}
.more{margin:8px 0 22px;border-top:1.5px solid var(--ink)}
.more > summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:700;font-size:18px;display:flex;justify-content:space-between;gap:12px;min-height:56px}
.more > summary::-webkit-details-marker{display:none}
.more > summary::after{content:"+";font-size:24px;line-height:1}
.more[open] > summary::after{content:"–"}
.sheet__end{display:grid;gap:14px;margin-top:8px;justify-items:start}
@media (max-width:767px){.sheet__end{justify-items:stretch}.sheet__end .btn{width:100%}}
.spin{display:none;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%}
[aria-busy="true"] .spin{display:inline-block}
@media (prefers-reduced-motion:no-preference){[aria-busy="true"] .spin{animation:spin .8s linear infinite}}
@keyframes spin{to{transform:rotate(360deg)}}
.rvc{margin-bottom:22px;padding:16px;border:1px dashed var(--ink);border-radius:var(--r-ui);background:var(--cream)}
.rvc__l{display:grid;gap:4px;margin:8px 0}
.rvc__l div{display:flex;gap:8px;font-size:15px}
.rvc__l dt{color:var(--muted)}
.rvc__l dd{font-weight:600}
.legal__btn{background:none;border:0;padding:0;text-decoration:underline;font-weight:600;cursor:pointer;min-height:44px}
.done{background:var(--white);border:1.5px solid var(--ink);border-radius:var(--r-ui);padding:clamp(24px,3vw,40px);box-shadow:var(--shadow)}
.done .h2{margin-bottom:16px}
.done > * + *{margin-top:12px}
.done__sig{font-family:var(--serif);font-style:italic;font-size:24px}

/* ---------- Free Review page ---------- */
.rv-ph__g{row-gap:40px;align-items:start}
@media (min-width:1024px){.rv-ph__tx{grid-column:1/8}.rv-doc{grid-column:8/-1}}
.rv-doc{position:relative}
.rv-doc__paper{background:var(--white);border:1.5px solid var(--ink);box-shadow:var(--shadow);padding:24px 22px 26px;transform:rotate(1.5deg)}
.rv-doc__top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1.5px solid var(--ink);padding-bottom:10px;margin-bottom:12px}
.rv-doc__top b{font-size:16px}
.rv-doc__top span{font-size:13px;color:var(--muted)}
.rv-doc__for{font-size:14px;color:var(--muted);margin-bottom:12px}
.rv-doc__s{padding:12px 0;border-bottom:1px solid var(--line)}
.rv-doc__s h3{font-size:17px;font-weight:700;display:flex;gap:10px}
.rv-doc__s h3 span{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.rv-doc__s p{font-size:14.5px;color:var(--muted);margin-top:2px}
.rv-doc__sig{font-family:var(--serif);font-style:italic;font-size:22px;margin-top:14px}
.rv-doc figcaption{margin-top:22px;font-size:14px;color:var(--muted)}
.rv-doc__lab{display:inline-block;margin-top:6px;font-weight:700;color:var(--ink)}
@media (max-width:1023px){.rv-doc{max-width:460px}}
@media (max-width:767px){.rv-doc__s p{display:none}.rv-doc__paper{padding:18px}}
.rv-form__g{row-gap:32px;align-items:start}
@media (min-width:1024px){.rv-form__main{grid-column:1/8}.rv-side{grid-column:9/-1;position:sticky;top:calc(var(--hdr) + 24px)}}
@media (min-width:1024px) and (max-height:760px){.rv-side{position:static}}
.rv-head{margin-bottom:24px}
.rv-head h2{font-size:clamp(26px,1.6vw + 18px,36px);font-weight:700;letter-spacing:-.025em;margin-top:8px}
.rv-side{display:grid;gap:20px}
.rv-side__card{border:1.5px solid var(--ink);border-radius:var(--r-ui);padding:22px;background:var(--paper)}
.rv-side__card h2,.rv-side__card h3{font-size:19px;font-weight:700;margin-bottom:10px}
.steps-l{counter-reset:s;display:grid;gap:12px}
.steps-l li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:15.5px}
.steps-l li::before{content:counter(s);width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.rv-side__who{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.1}
.rvx{padding:var(--sec) 0;background:var(--ink);color:var(--cream)}
.rvx__h{font-size:clamp(32px,3.4vw + 10px,56px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.rvx__h .sf{color:var(--cream)}
@media (min-width:1024px){.rvx__h{grid-column:1/7}.rvx__b{grid-column:8/-1}}
.rvx__b{margin-top:24px;color:#E2DCD1}
.rvx__say{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--cream)}

/* ---------- Apply ---------- */
.ap-hero__g{row-gap:40px;align-items:start}
@media (min-width:1024px){.ap-hero__tx{grid-column:1/7}.ap-sum{grid-column:8/-1}}
.ap-sum{background:var(--ink);color:var(--cream);border-radius:var(--r-ui);padding:clamp(22px,2.4vw,32px)}
.ap-sum h2{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#CFC8BC;margin-bottom:14px}
.ap-sum dl > div{display:grid;gap:2px;padding:12px 0;border-top:1px solid #4A4642}
.ap-sum dt{font-weight:700}
.ap-sum dd{color:#E2DCD1;font-size:15.5px}
.ap-sum a{color:var(--cream);font-weight:600}
.ap-pre{margin-top:16px;padding:12px 14px;border-radius:8px;background:var(--pink);color:var(--ink);font-weight:600;font-size:15.5px}
.ap-app__g{row-gap:32px;align-items:start}
@media (min-width:1024px){.ap-rail{grid-column:1/4;position:sticky;top:calc(var(--hdr) + 24px)}.ap-main{grid-column:5/-1}}
.ap-prog{display:grid;gap:8px;margin:14px 0 20px}
.ap-prog li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;color:var(--muted);font-weight:600}
.ap-prog li span{width:28px;height:28px;flex:none;border-radius:50%;border:1.5px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.ap-prog li.is-on{border-color:var(--ink);color:var(--ink);background:var(--white)}
.ap-prog li.is-on span{background:var(--pink);border-color:var(--ink)}
.ap-prog li.is-done{color:var(--ink)}
.ap-prog li.is-done span{background:var(--ink);color:var(--cream);border-color:var(--ink)}
@media (max-width:1023px){.ap-prog{grid-template-columns:repeat(3,1fr)}.ap-prog li{flex-direction:column;align-items:flex-start;gap:6px;font-size:13.5px;padding:8px}}
.ap-rail__n{font-size:15px;color:var(--muted)}
.ap-step{border:0;margin:0;padding:0;min-width:0}
.ap-step__k{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ap-step__h{font-size:clamp(28px,2vw + 18px,42px);font-weight:700;letter-spacing:-.03em;margin:6px 0 24px}
@media (prefers-reduced-motion:no-preference){.ap-step.is-in{animation:scIn .18s var(--e-ui)}}
.ap-f{display:grid;gap:6px;margin-bottom:22px}
.ap-f > label,.ap-f__l{font-weight:650;font-size:16.5px}
.ap-f input[type=text],.ap-f input[type=email],.ap-f textarea{width:100%;min-height:52px;padding:12px 14px;border:1.5px solid var(--ink);border-radius:8px;background:var(--white);font-size:17px}
.ap-f textarea{min-height:96px;resize:vertical}
.ap-f.is-bad input,.ap-f.is-bad textarea{border-color:var(--err);border-width:2px}
.ap-help{font-size:15px;color:var(--muted)}
.ap-e{color:var(--err);font-weight:600;font-size:15px}
.ap-e:not(:empty)::before{content:"! ";font-weight:800}
.ap-opts{display:flex;flex-wrap:wrap;gap:12px}
.ap-opts label{position:relative;cursor:pointer}
.ap-opts input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ap-opts span{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:10px 16px;border:1.5px solid var(--ink);border-radius:999px;background:var(--white);font-weight:550}
.ap-opts span::before{content:"";flex:none;width:16px;height:16px;border:1.5px solid var(--ink);border-radius:50%;background:var(--white)}
.ap-opts input:checked + span{background:var(--pink)}
.ap-opts input:checked + span::before{background:var(--ink);box-shadow:inset 0 0 0 3px var(--white)}
.ap-opts input:focus-visible + span{outline:3px solid var(--ink);outline-offset:3px}
.ap-next{margin-top:8px;padding:18px;border-radius:var(--r-ui);background:var(--cream);border:1px solid var(--line)}
.ap-next__h{font-weight:700}
.ap-nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:8px}
.ap-back{min-height:52px;padding:12px 18px;border:1.5px solid var(--ink);border-radius:999px;background:transparent;font-weight:650;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.ap-back:hover{background:var(--ink);color:var(--cream)}
.ap-count{font-weight:600;color:var(--muted);margin-left:auto}
@media (max-width:767px){.ap-nav .btn{flex:1}.ap-count{width:100%;margin:0}}
.ap-msg{color:var(--err);font-weight:600;margin-top:12px}
.ap-legal{margin-top:16px;font-size:15px;color:var(--muted)}
.ap-chk{margin-bottom:22px;padding:16px;border:1px dashed var(--ink);border-radius:var(--r-ui);background:var(--cream)}
.ap-x{background:none;border:0;padding:0;text-decoration:underline;font-weight:600;cursor:pointer;min-height:44px}

/* ---------- inner-page building blocks (About, Pilates) ---------- */
.spread{display:grid;gap:24px}
.spread + .spread{margin-top:clamp(56px,7vw,112px)}
@media (min-width:1024px){.spread{grid-template-columns:repeat(12,1fr);gap:24px}.spread__h{grid-column:1/6}.spread__b{grid-column:7/-1}}
.spread__h .label{margin-bottom:14px}
.spread__h .h2{font-size:clamp(32px,2.8vw + 14px,52px)}
.spread__h .h2 > span{display:block}
.spread__b > * + *{margin-top:14px}
.spread__b{max-width:38em}
.who__sig{font-family:var(--serif);font-style:italic;font-size:clamp(24px,1.2vw + 16px,32px);line-height:1.15}
.who__list{display:grid;gap:6px;padding-left:0}
.who__list li{position:relative;padding-left:22px}
.who__list li::before{content:"";position:absolute;left:0;top:.65em;width:10px;height:1.5px;background:var(--ink)}
.s--black .who__list li::before{background:var(--cream)}
.me{display:flex;align-items:center;gap:12px;font-weight:600}
.me img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1.5px solid var(--ink)}
.said{display:grid;gap:4px;margin-top:28px}
.said span{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(30px,3vw + 12px,54px);line-height:1.05}
.sec__head{margin-bottom:clamp(28px,4vw,48px)}
.sec__head .label{margin-bottom:14px}
.sec__head .h2 > span{display:block}
.sec__cta{margin-top:32px}
.sec__link{margin-top:20px}
.svc{display:grid;gap:var(--gap)}
@media (min-width:768px){.svc{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.svc{grid-template-columns:repeat(3,1fr)}.svc--4{grid-template-columns:repeat(4,1fr)}}
.svc li{border:1.5px solid var(--ink);border-radius:var(--r-ui);padding:22px;background:var(--white)}
.s--white .svc li{background:var(--cream)}
.svc h3{font-size:21px;font-weight:700;letter-spacing:-.015em;margin:10px 0 8px}
.svc p{font-size:16px;color:var(--muted)}
.svc p + p{margin-top:8px}
.svc__n{font-weight:700;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.end{text-align:left}
.end .h2{max-width:14em;margin:14px 0 22px}
.end__b{max-width:40em}
.end__b > * + *{margin-top:14px}
.end__b .btn{margin-top:24px}
.crop{margin-top:clamp(40px,5vw,72px)}
.crop img{width:100%;height:auto;border:1.5px solid var(--ink)}

/* Pilates */
.pl-hero__g{row-gap:40px;align-items:center}
@media (min-width:1024px){.pl-hero__tx{grid-column:1/8}.pl-hero__art{grid-column:8/-1}}
.pl-hero__y{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.01em}
.pl-art{position:relative;max-width:520px;margin-left:auto;padding:18px 0 0 18px}
.pl-art::before{content:"";position:absolute;left:0;top:0;width:62%;height:76%;background:var(--paper);border:1.5px solid var(--ink);transform:rotate(-2.5deg)}
.pl-art picture,.pl-art img{position:relative;width:100%;aspect-ratio:3/2;object-fit:cover;border:1.5px solid var(--ink);transform:rotate(1.2deg)}
.pl-art figcaption{position:relative;font-size:13px;color:var(--muted);margin-top:14px}
.pl-qs{display:grid;gap:8px;margin:6px 0 10px}
.pl-qs li span{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--ink);border-radius:999px;padding:8px 16px;background:var(--white);font-weight:550}
.pl-qs li span::before{content:"";width:11px;height:11px;border:2px solid var(--ink);border-radius:50%}
.pl-sig{margin-top:18px}
.pl-lang{margin-top:24px;font-weight:600}
.jr__l{display:grid;gap:var(--gap)}
@media (min-width:768px){.jr__l{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.jr__l{grid-template-columns:repeat(4,1fr)}}
.jr__s{border:1.5px solid var(--ink);border-radius:var(--r-ui);padding:18px;background:var(--cream)}
.jr__v{min-height:150px;display:flex;align-items:center;margin-bottom:14px}
.jr__k{font-weight:700;margin-bottom:4px}
.jr__k span{color:var(--muted);margin-right:6px}
.jr-search{display:flex;align-items:center;gap:8px;width:100%;border:1.5px solid var(--ink);border-radius:999px;padding:9px 14px;background:var(--white);font-size:15px}
.jr-ad{width:100%;background:var(--white);border:1px solid var(--line);border-left:3px solid var(--pink);border-radius:6px;padding:10px 12px;font-size:13.5px}
.jr-ad__tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--ink);color:var(--cream);padding:2px 6px;border-radius:3px;margin-bottom:6px}
.jr-ad__sp{font-weight:700;font-size:12px}
.jr-ad__url{color:var(--muted);font-size:12.5px}
.jr-ad__h{font-weight:700;font-size:15px;line-height:1.25;margin:2px 0}
.jr-ad__d{color:var(--muted)}
.jr-web{width:100%;display:grid;gap:6px;background:var(--white);border:1.5px solid var(--ink);border-radius:8px;padding:12px}
.jr-web b{font-size:15px}
.jr-web__r{height:22px;border-radius:4px;background:var(--cream);font-size:13px;padding:2px 8px}
.jr-book{width:100%;display:grid;gap:6px;font-size:13.5px}
.jr-book span{border:1px solid var(--line);border-radius:6px;padding:7px 10px;background:var(--white)}
.jr-book .is-on{border:1.5px solid var(--ink);background:var(--pink);font-weight:600}
.jr-book .is-on b{float:right}
.jr__foot{margin-top:28px;display:grid;gap:10px}
.jr__line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:650}
.jr__note{font-size:14.5px;color:var(--muted)}
.pfs__intro{max-width:38em;margin-bottom:28px}
.pfs__end{margin-top:32px;max-width:40em}
.pfs__say{font-family:var(--serif);font-style:italic;font-size:28px;margin-top:14px}
.pfs__a{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:24px}
.pl-rows{border-top:1.5px solid var(--cream)}
.pl-rows > div{display:grid;gap:6px;padding:18px 0;border-bottom:1px solid #4A4642}
@media (min-width:768px){.pl-rows > div{grid-template-columns:4fr 8fr;gap:24px}}
.pl-rows dt{font-weight:650}
.pl-rows dd b{display:block;font-size:22px}
.pl-rows dd span{color:#E2DCD1;font-size:15.5px}
.pl-big{font-size:clamp(36px,3vw + 14px,56px) !important;letter-spacing:-.03em;line-height:1}
.pl-big small{font-size:16px;font-weight:600;margin-left:6px;letter-spacing:0}
.pl-rows__tot dd b{color:var(--pink)}
.pl-terms{margin-top:28px;display:grid;gap:10px;max-width:44em;color:#E2DCD1}
.pl-fit__img img{aspect-ratio:2/1;object-fit:cover}

/* ---------- Budget Calculator (/fit-check/) ---------- */
.fc-g{row-gap:32px;align-items:start}
@media (min-width:1024px){.fc__form{grid-column:1/7}.fc__out{grid-column:7/-1;position:sticky;top:calc(var(--hdr) + 24px)}}
.fc__form{background:var(--white);border:1.5px solid var(--ink);border-radius:var(--r-ui);padding:clamp(20px,2.6vw,32px)}
.f--fc{border:0;padding:0 0 22px;margin:0 0 22px;border-bottom:1px solid var(--line)}
.fc__q{display:flex;gap:12px;align-items:baseline;font-size:clamp(19px,.6vw + 16px,22px);font-weight:700;letter-spacing:-.015em;margin-bottom:12px}
.fc__qn{flex:none;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.money{display:flex;align-items:center;gap:0;border:1.5px solid var(--ink);border-radius:8px;background:var(--white);overflow:hidden;max-width:300px}
.money b{padding:0 0 0 14px;font-size:18px}
.money input{border:0 !important;min-height:52px;font-variant-numeric:tabular-nums}
.f.is-bad .money{border-color:var(--err);border-width:2px}
.sub{font-weight:600;margin-bottom:6px}
.fc__go{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.fc-reset{min-height:48px;padding:10px 18px;border:1.5px solid var(--ink);border-radius:999px;background:none;font-weight:650;cursor:pointer}
.fc__out{background:var(--ink);color:var(--cream);border-radius:var(--r-ui);padding:clamp(22px,2.6vw,36px);min-height:340px;display:flex;flex-direction:column}
.fc__wait{margin:auto;opacity:.9}
.fc__wait p{font-family:var(--serif);font-style:italic;font-size:28px;line-height:1.1;max-width:12em}
.fc__out .h2{font-size:clamp(24px,1.6vw + 16px,34px)}
.fc__n{font-size:clamp(88px,10vw,160px);font-weight:750;letter-spacing:-.05em;line-height:.9;color:var(--pink);margin:16px 0 4px;font-variant-numeric:tabular-nums}
.fc__nl{color:#E2DCD1;max-width:22em}
.fc__rows{margin:20px 0;border-top:1px solid #4A4642}
.fc__rows > div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid #4A4642;font-size:15.5px}
.fc__rows dd{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.fc__rows .tot{font-size:17.5px}
.fc__rows .tot dd{color:var(--pink)}
.fc__mh{font-weight:700;margin-top:6px}
.fc__state{margin-top:8px;color:#E2DCD1}
.fc__exp{margin-top:16px;font-size:14.5px;color:#CFC8BC}
.fc__out .cta{margin-top:20px}
.fc__out .btn--o{--fg:var(--cream);--bd:var(--cream)}
.fc__out .btn--o:hover{--bg:var(--cream);--fg:var(--ink)}
.fc__out :focus-visible{outline-color:var(--cream)}
.fc__out .lede{color:var(--cream)}

/* ---------- Privacy ---------- */
.legal__top .label{margin-bottom:20px}
.legal__intro{max-width:44em}
.legal__date{margin-bottom:12px}
.legal__lead{font-size:clamp(19px,.6vw + 16px,22px);font-weight:600}
.legal__g{row-gap:32px;align-items:start}
@media (min-width:1024px){.toc{grid-column:1/4;position:sticky;top:calc(var(--hdr) + 24px);max-height:calc(100vh - var(--hdr) - 48px);overflow:auto}.legal__col{grid-column:5/-1}}
.toc h2{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.toc ol{display:grid;gap:0;border-top:1px solid var(--line)}
.toc a{display:flex;gap:10px;min-height:40px;align-items:center;padding:4px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:15px}
.toc a span{color:var(--muted);font-variant-numeric:tabular-nums}
.toc a:hover{text-decoration:underline}
@media (max-width:1023px){.toc details summary{cursor:pointer;font-weight:650;min-height:48px;display:flex;align-items:center}}
.legal__col{min-width:0}
.legal__s{max-width:72ch;padding:28px 0;border-top:1px solid var(--line)}
.legal__s:first-child{border-top:1.5px solid var(--ink)}
.legal__h{display:flex;gap:14px;align-items:baseline;font-size:clamp(22px,1vw + 17px,28px);font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.legal__n{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.legal__b > * + *{margin-top:12px}
.legal__b ul{list-style:disc;padding-left:1.3em;display:grid;gap:6px}
.legal__b ol{list-style:decimal;padding-left:1.3em;display:grid;gap:6px}
.legal__b h3{font-size:18px;margin-top:18px}
.legal__addr{font-weight:600}
.legal__b a{font-weight:600}
.legal__b table{border-collapse:collapse;width:100%;font-size:15px}
.legal__b th,.legal__b td{border:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}

/* ---------- 404 ---------- */
.nf{padding:clamp(56px,8vw,120px) 0;min-height:60vh}
.nf h1{font-size:clamp(46px,7vw,112px);font-weight:700;letter-spacing:-.035em;line-height:.98;margin-bottom:20px}
.nf .q{width:.45em;margin-left:.06em}

/* ---------- section reveal (enhancement only) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{transition:opacity .42s var(--e-in),transform .42s var(--e-in);transition-delay:calc(var(--i,0) * 60ms)}
  .js [data-reveal].pre{opacity:0;transform:translateY(16px)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}}
@media print{.top,.ck,.ckd,.mnav,.foot__big{display:none !important}body{background:#fff}}

/* =====================================================================================
   wna-30 — Premium v2 layer. Creative editorial × premium tech.
   Sections: hx hero · sv services · gx what you get · hw how it works · wy why · pr pricing
   fq faq · fd founder · fx final CTA · ap-pkg apply package. Motion: CSS for the first screen
   (no script wait), GSAP + ScrollTrigger for scroll and pointer (wna-30.js), all optional.
   ===================================================================================== */
:root{
  --sand:#EAE3D6; --r-card:20px; --r-ui:12px;
  --sh-1:0 1px 2px rgba(20,14,8,.06),0 2px 6px rgba(20,14,8,.05);
  --sh-2:0 1px 2px rgba(20,14,8,.06),0 12px 28px -10px rgba(20,14,8,.22);
  --sh-3:0 2px 4px rgba(20,14,8,.08),0 28px 60px -20px rgba(20,14,8,.35);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.btn--cream{--bg:var(--cream);--fg:var(--ink);--bd:var(--cream)}
.btn--cream:hover{--bg:var(--pink);--fg:var(--ink);--bd:var(--pink)}
.head .h2{max-width:13em}
.h2{font-size:clamp(36px,4.6vw + 6px,76px);line-height:1.02}
.h2 .sf{font-size:1.06em}
.s{padding:clamp(72px,9vw,144px) 0}
.pico{width:40px;height:40px;flex:none}
.pico-pair{display:inline-flex}
.pico-pair .pico + .pico{margin-left:-8px}
.pico-pair .pico{border-radius:50%;box-shadow:0 0 0 3px var(--bg-card,var(--white))}
.top__nav a[aria-current="true"]{background-size:100% 1.5px}

/* ---------- 01 hero ---------- */
.hx{position:relative;padding:clamp(24px,3.5vw,48px) 0 clamp(56px,7vw,104px);overflow:clip}
.hx__g{display:grid;gap:clamp(40px,5vw,64px);align-items:center}
@media (min-width:1024px){.hx__g{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);min-height:min(760px,calc(100svh - var(--hdr) - 24px))}}
.hx__lab{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:clamp(20px,2.4vw,32px)}
.hx__lab::before{content:"";width:28px;height:2px;background:var(--pink)}
.hx__h{font-weight:750;letter-spacing:-.045em;line-height:.92;font-size:clamp(52px,6.5vw,124px);margin-bottom:clamp(24px,2.6vw,36px)}
.hx__h .ln{display:block;overflow:clip;padding:.02em .06em .1em 0;margin-bottom:-.08em}
.hx__h .ln > span{display:inline-block}
.hx__h .sf{font-size:1.1em;letter-spacing:-.025em;line-height:.9}
.hx__lede{font-size:clamp(19px,.6vw + 16px,24px);line-height:1.42;max-width:24em;margin-bottom:clamp(28px,3vw,40px)}
.hx__micro{margin-top:16px;font-size:15px;color:var(--muted)}
@media (max-width:767px){.hx__h{font-size:clamp(46px,13.6vw,64px)}}

/* hero entrance: CSS only, starts at first paint, never waits for script; total < 1s */
@media (prefers-reduced-motion:no-preference){
  .js .hx [data-in]{animation:inFade .7s var(--e-in) both}
  .js .hx .ln > [data-in]{animation:inLine .9s var(--e-in) both}
  .js .hx .ln:nth-child(1) > [data-in]{animation-delay:.08s}
  .js .hx .ln:nth-child(2) > [data-in]{animation-delay:.18s}
  .js .hx__lede{animation-delay:.34s !important}
  .js .hx__cta{animation-delay:.42s !important}
  .js .hx__micro{animation-delay:.5s !important}
  .js .hx .cl{animation:inLayer 1.1s var(--e-in) both}
  .js .hx .cl--sun{animation-delay:.2s}.js .hx .cl--photo{animation-delay:.3s}.js .hx .cl--q{animation-delay:.48s}
  .js .hx .cl--search{animation-delay:.58s}.js .hx .cl--feed{animation-delay:.68s}.js .hx .cl--tag{animation-delay:.78s}
  .js .hx .cl--scrib{animation:none}
  .js .hx .cl--scrib path{stroke-dasharray:640;animation:draw 1.2s var(--e-in) .9s both}
  .js .hx__img{animation:inLayer 1.1s var(--e-in) .25s both}
}
@keyframes inFade{from{opacity:0;translate:0 14px}}
@keyframes inLine{from{translate:0 108%}}
@keyframes inLayer{from{opacity:0;translate:0 28px;scale:.96}}
@keyframes draw{from{stroke-dashoffset:640}}

/* collage — layered mode (separate HTML layers) */
.hx__art{position:relative;width:100%;max-width:640px;margin-inline:auto;aspect-ratio:1/1.04}
.cl{position:absolute;margin:0}
.cl--sun{right:4%;top:2%;width:62%;aspect-ratio:1;border-radius:50%;background:var(--pink)}
.cl--photo{left:16%;top:9%;width:50%;aspect-ratio:4/5;padding:10px 10px 34px;background:#FFFDF8 var(--grain);box-shadow:var(--sh-3);rotate:-3deg}
.cl--photo picture,.cl--photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.cl--photo::after{content:"";position:absolute;left:50%;top:-14px;width:96px;height:28px;translate:-50% 0;rotate:2deg;background:rgba(244,240,232,.78);box-shadow:var(--sh-1)}
.cl--q{right:-1%;top:40%;width:27%;fill:var(--pink);filter:drop-shadow(6px 8px 0 var(--ink))}
.cl--search{left:0;top:62%;width:60%;background:var(--white);border-radius:16px;padding:14px;box-shadow:var(--sh-3);rotate:-1.5deg}
.cl--feed{right:3%;bottom:1%;width:38%;background:var(--ink);color:var(--cream);border-radius:16px;padding:14px;box-shadow:var(--sh-3);rotate:3deg}
.cl--scrib{left:-6%;top:-3%;width:40%;color:var(--pink);pointer-events:none}
.cl--tag{left:2%;top:3%;font-family:var(--serif);font-style:italic;font-size:clamp(22px,2vw,30px);line-height:1;background:var(--ink);color:var(--cream);padding:10px 18px 12px;border-radius:999px;rotate:-7deg;box-shadow:var(--sh-2)}
.cl--tag span{color:var(--pink)}
.hx__img{display:block}
.hx__img img{width:100%;height:auto}
[data-collage="image"] .cl{display:none}
[data-collage="image"]{aspect-ratio:auto}
@media (max-width:1023px){.hx__art{max-width:520px}}
@media (max-width:767px){
  .hx__art{aspect-ratio:1/1;max-width:420px}
  .cl--photo{left:10%;width:52%;padding:7px 7px 22px}
  .cl--search{width:74%;top:64%;padding:11px}
  .cl--feed{width:42%;bottom:auto;top:32%;right:0;padding:11px}
  .cl--scrib{display:none}
  .cl--q{width:24%;top:auto;bottom:0;right:4%}
}

/* interface fragments (UI quotes, no invented data) */
.ui-bar{display:flex;align-items:center;gap:10px;border-radius:999px;background:var(--cream);padding:10px 14px;font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden}
.ui-bar__g{flex:none;width:14px;height:14px;border:2px solid var(--ink);border-radius:50%;position:relative}
.ui-bar__g::after{content:"";position:absolute;right:-5px;bottom:-4px;width:6px;height:2px;background:var(--ink);rotate:45deg}
.ui-ad{padding:12px 4px 2px}
.ui-ad small{display:block;font-size:12px;font-weight:700}
.ui-ad b{display:block;color:#1A3FB0;font-size:16px;font-weight:600;line-height:1.25;margin:2px 0}
.ui-ad span{font-size:13.5px;color:var(--muted)}
.ui-ad--ghost{display:grid;gap:7px;padding-top:14px}
.ui-ad--ghost i{display:block;height:9px;border-radius:9px;background:var(--cream);width:72%}
.ui-ad--ghost i + i{width:48%}
.ui-who{display:flex;align-items:center;gap:9px;font-size:13px;line-height:1.15}
.ui-who i{width:26px;height:26px;border-radius:50%;background:var(--pink);flex:none}
.ui-who b{display:block;font-weight:700}
.ui-who small{font-size:11.5px;opacity:.75}
.ui-cta{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:9px 12px;border-radius:10px;background:var(--pink);color:var(--ink);font-size:14px;font-weight:700}
.ui-type::after{content:"";display:inline-block;width:2px;height:1.05em;background:var(--ink);vertical-align:-.15em;margin-left:2px}
@media (prefers-reduced-motion:no-preference){.ui-type::after{animation:caret 1.1s steps(1) infinite}}
@keyframes caret{50%{opacity:0}}

/* ---------- 02 services ---------- */
.sv{background:var(--white)}
.sv__g{display:grid;gap:var(--gap)}
@media (min-width:1024px){.sv__g{grid-template-columns:1fr 1fr}}
.srv{--bg-card:var(--cream);position:relative;display:flex;flex-direction:column;background:var(--cream) var(--grain);border-radius:var(--r-card);padding:clamp(26px,3vw,44px);overflow:hidden;transition:translate .35s var(--e-in),box-shadow .35s var(--e-in)}
.srv--m{--bg-card:var(--ink);background:var(--ink);color:var(--cream)}
.srv--m :focus-visible{outline-color:var(--cream)}
.srv__top{display:flex;align-items:center;gap:14px;margin-bottom:clamp(28px,3vw,44px)}
.srv__k{font-weight:650;font-size:16px}
.srv__h{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(38px,3.6vw + 8px,64px);line-height:.98;letter-spacing:-.015em;margin-bottom:18px;max-width:11em}
.srv__p{font-size:18px;max-width:30em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 28px}
.chips li{font-size:14px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--white)}
.srv--m .chips li{background:#24211F;color:var(--cream)}
.srv__ui{position:relative;margin:4px 0 32px;padding:16px;border-radius:16px;background:var(--white);box-shadow:var(--sh-2);max-width:460px;transition:translate .45s var(--e-in),rotate .45s var(--e-in);rotate:-1deg}
.srv__ui--feed{background:transparent;box-shadow:none;padding:0;rotate:1.5deg;max-width:300px}
.ui-post{background:#24211F;border-radius:18px;padding:12px;box-shadow:var(--sh-3)}
.ui-post picture{display:block;margin:10px -12px 0;aspect-ratio:4/3.4;overflow:hidden}
.ui-post img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.srv__end{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
@media (hover:hover) and (pointer:fine){
  .srv:hover{translate:0 -4px;box-shadow:var(--sh-3)}
  .srv:hover .srv__ui{translate:0 -6px;rotate:0deg}
}
.srv .btn:active,.plan .btn:active,.hx .btn:active,.fx .btn:active{transform:scale(.98)}
.sv__foot{margin-top:clamp(36px,4vw,56px);font-family:var(--serif);font-style:italic;font-size:clamp(24px,1.6vw + 14px,34px);line-height:1.3}
.sv__foot .tlink{margin-left:10px}
.sv__foot .tlink{font-family:var(--sans);font-style:normal;font-size:17px}
.sv__or{font-size:.7em;color:var(--muted);margin-left:10px}

/* ---------- 03 what you actually get ---------- */
.gx__g{display:grid;gap:var(--gap)}
@media (min-width:768px){.gx__g{grid-template-columns:repeat(12,1fr)}
  .gx__m--a{grid-column:span 7}.gx__m--b{grid-column:span 5}
  .gx__m--c{grid-column:span 5}.gx__m--d{grid-column:span 7}
  .gx__m--e{grid-column:span 7}.gx__m--f{grid-column:span 5}}
.gx__m{position:relative;border-radius:var(--r-card);padding:clamp(24px,2.6vw,36px);background:var(--white);display:flex;flex-direction:column;gap:10px;min-height:250px;overflow:hidden}
.gx__m h3{font-size:clamp(24px,1.2vw + 16px,34px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.gx__m p{max-width:26em}
.gx__m > :last-child{margin-top:auto}
.gx__m--a{background:var(--ink);color:var(--cream)}
.gx__m--b{background:var(--pink)}
.gx__m--c,.gx__m--f{background:var(--sand) var(--grain)}
.gx__sieve{width:100%;max-width:420px;padding-top:18px}
.gx__sieve .dots circle{fill:#6E6862}
.gx__sieve .funnel{stroke:var(--cream);stroke-width:2.5}
.gx__sieve .keep circle{fill:var(--pink)}
.gx__split{display:flex;gap:6px;padding-top:18px;font-size:14px;font-weight:700}
.gx__split li{flex:0 1 var(--w);min-width:52px;padding:28px 12px 10px;border-radius:10px;background:var(--ink);color:var(--cream)}
.gx__split li:nth-child(2){background:rgba(0,0,0,.22);color:var(--ink)}
.gx__split li:last-child{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);text-decoration:line-through}
.gx__path{display:flex;flex-wrap:wrap;gap:8px;padding-top:18px;font-weight:650;font-size:15px}
.gx__path li{display:flex;align-items:center;gap:8px;background:var(--white);padding:7px 13px;border-radius:999px}
.gx__path li:not(:last-child)::after{content:"→";color:var(--pink)}
.gx__ab{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:22px;max-width:420px}
.gx__ab span{border-radius:12px;padding:14px;background:var(--cream);font-weight:650;font-size:15px;position:relative}
.gx__ab span::after{content:"";display:block;height:7px;border-radius:7px;background:rgba(0,0,0,.1);margin-top:10px;width:70%}
.gx__ab .is-on{background:var(--white);box-shadow:inset 0 0 0 2px var(--ink)}
.gx__ab .is-on::before{content:"Keep";position:absolute;top:-10px;right:10px;background:var(--pink);font-size:12px;padding:2px 8px;border-radius:999px}
.gx__doc{margin-top:20px;max-width:360px;display:grid;gap:8px;padding:18px;border-radius:12px;background:var(--cream) var(--grain);rotate:-1deg;box-shadow:var(--sh-1)}
.gx__doc b{font-family:var(--serif);font-style:italic;font-weight:500;font-size:24px}
.gx__doc span{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600}
.gx__doc span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pink)}
.gx__msg{margin-top:20px;align-self:flex-start;max-width:320px;background:var(--white);border-radius:18px 18px 18px 4px;padding:14px 16px;font-size:15px;box-shadow:var(--sh-1)}
.gx__msg small{display:block;margin-top:6px;font-size:12.5px;color:var(--muted);font-weight:600}
.gx__foot{margin-top:clamp(32px,4vw,52px);display:grid;gap:14px}
@media (min-width:1024px){.gx__foot{grid-template-columns:7fr 5fr;align-items:end;gap:24px}}
.gx__own{font-size:clamp(26px,1.8vw + 14px,38px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.gx__not{font-size:15.5px;color:var(--muted)}
.gx__not b{color:var(--ink)}

/* ---------- 04 how it works ---------- */
.hw{background:var(--ink);color:var(--cream)}
.hw .lede{color:#E2DCD1}
.hw :focus-visible{outline-color:var(--cream)}
.hw__l{position:relative}
.hw__line{display:none}
.hw__l ol{display:grid;gap:40px}
.hw__l li{position:relative}
.hw__n{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(64px,6vw,104px);line-height:.8;color:var(--pink);margin-bottom:18px}
.hw__l h3{font-size:clamp(24px,1.4vw + 16px,34px);font-weight:700;letter-spacing:-.03em;line-height:1.08;margin-bottom:12px;max-width:12em}
.hw__l p{color:#E2DCD1;max-width:24em}
@media (min-width:1024px){
  .hw__l{padding-top:64px}
  .hw__line{display:block;position:absolute;left:0;top:0;width:100%;height:40px;overflow:visible}
  .hw__line path{stroke:var(--pink);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round}
  .hw__l ol{grid-template-columns:repeat(3,1fr);gap:var(--gap)}
}
@media (max-width:1023px){.hw__l ol{padding-left:24px;border-left:3px solid var(--pink)}}
.hw__end{margin-top:clamp(48px,5vw,72px);padding-top:28px;border-top:1px solid #3A3733;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.hw__end p{font-size:17px;color:#E2DCD1;max-width:32em}

/* ---------- 05 why not ads ---------- */
.wy{background:var(--white)}
.wy__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(36px,4vw,64px)}
.wy__head .h2{max-width:11em}
.wy__q{flex:none;width:clamp(64px,10vw,150px);fill:var(--pink)}
.wy__l{border-top:1.5px solid var(--ink)}
.wy__l li{display:grid;gap:10px 24px;padding:clamp(22px,2.4vw,34px) 0;border-bottom:1px solid var(--line)}
@media (min-width:1024px){.wy__l li{grid-template-columns:7fr 5fr;align-items:baseline}}
.wy__ask{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(28px,2.4vw + 12px,48px);line-height:1.02;letter-spacing:-.01em;transition:translate .35s var(--e-in)}
.wy__ask .pk{display:inline-block;transition:scale .35s var(--e-in),rotate .35s var(--e-in);transform-origin:50% 80%}
.wy__l h3{font-size:18px;font-weight:700;margin-bottom:4px}
.wy__l li p:not(.wy__ask){max-width:30em}
@media (hover:hover) and (pointer:fine){.wy__l li:hover .wy__ask{translate:8px 0}.wy__l li:hover .wy__ask .pk{scale:1.25;rotate:10deg}}
.wy__close{margin-top:clamp(40px,4vw,64px);font-size:clamp(28px,2.4vw + 14px,52px);font-weight:750;letter-spacing:-.035em;line-height:1.05}

/* ---------- 06 pricing ---------- */
.pr{background:var(--cream)}
.pr__g{display:grid;gap:var(--gap);align-items:stretch}
@media (min-width:1024px){.pr__g{grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto auto 1fr auto}
  .plan{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}}
.plan{--bg-card:var(--white);position:relative;display:flex;flex-direction:column;background:var(--white);border-radius:var(--r-card);padding:clamp(26px,2.6vw,36px);box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .3s var(--e-ui)}
.plan__top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.plan__top .pico{width:36px;height:36px}
.plan__t{font-size:clamp(24px,1vw + 18px,30px);font-weight:750;letter-spacing:-.03em}
.plan__sub{font-family:var(--serif);font-style:italic;font-size:clamp(22px,.8vw + 17px,27px);line-height:1.15;margin-bottom:22px}
.plan__fee{display:flex;align-items:baseline;gap:6px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:22px;font-variant-numeric:tabular-nums}
.plan__fee b{font-size:clamp(48px,3.6vw + 10px,68px);font-weight:750;letter-spacing:-.045em;line-height:1}
.plan__fee span{font-weight:600;color:var(--muted)}
.plan__l{display:grid;gap:10px;align-content:start;margin-bottom:30px}
.plan__l li{position:relative;padding-left:28px;font-size:16.5px;line-height:1.4}
.plan__l li::before{content:"";position:absolute;left:2px;top:.32em;width:11px;height:6px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);rotate:-45deg}
.plan__cta{width:100%;justify-content:space-between}
.plan--both{--bg-card:var(--ink);background:var(--ink);color:var(--cream)}
.plan--both .plan__fee{border-color:#3A3733}
.plan--both .plan__fee span{color:#CFC8BC}
.plan--both .plan__l li::before{border-color:var(--pink)}
.plan__flag{position:absolute;top:-13px;left:clamp(26px,2.6vw,36px);background:var(--pink);color:var(--ink);font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px}
.plan--both :focus-visible{outline-color:var(--cream)}
@media (hover:hover) and (pointer:fine){
  .plan:hover{box-shadow:inset 0 0 0 1.5px var(--ink),var(--sh-2)}
  .plan--both:hover{box-shadow:inset 0 0 0 1.5px var(--pink),var(--sh-3)}
}
@media (max-width:1023px){.plan--both{margin-top:14px}}
.pr__disc{margin-top:24px;font-weight:600;font-size:16px;display:flex;align-items:baseline;gap:10px}
.pr__disc::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--pink);translate:0 -1px}

/* faq (pricing and how we work) */
.fq{margin-top:clamp(64px,7vw,104px);display:grid;gap:24px}
@media (min-width:1024px){.fq{grid-template-columns:4fr 8fr;gap:24px}}
.fq__h{font-size:clamp(28px,1.8vw + 16px,44px);font-weight:750;letter-spacing:-.035em;line-height:1.05;max-width:9em}
.fq .acc{grid-column:auto}
.acc__i summary h4{font-size:clamp(18px,.5vw + 15.5px,21px);font-weight:650;letter-spacing:-.015em}
.acc__i summary h4 b{font-weight:inherit;color:var(--pink)}
.acc__i summary:hover h4,.acc__i summary:hover h3{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1.5px}
.acc__i summary i{transition:background-color .2s var(--e-ui),color .2s var(--e-ui),rotate .3s var(--e-in)}
.acc__i[open] summary i{background:var(--ink);color:var(--cream);rotate:180deg}
@supports (interpolate-size:allow-keywords){
  .acc{interpolate-size:allow-keywords}
  .acc__i::details-content{height:0;overflow:clip;transition:height .35s var(--e-in),content-visibility .35s allow-discrete}
  .acc__i[open]::details-content{height:auto}
}
@media (prefers-reduced-motion:reduce){.acc__i::details-content{transition:none !important}}

.tools{margin-top:clamp(48px,5vw,72px);display:grid;gap:var(--gap);align-items:center}
@media (min-width:768px){.tools{grid-template-columns:1.2fr 1fr 1fr}}
.tools__h{font-family:var(--serif);font-style:italic;font-size:clamp(24px,1.4vw + 14px,34px);line-height:1.1}
.tool{border:0;background:var(--white);border-radius:16px;transition:background-color .2s var(--e-ui),translate .3s var(--e-in)}
.tool:hover{background:var(--sand);translate:0 -2px}

/* ---------- 07 founder ---------- */
.fd{background:var(--white)}
.fd__g{display:grid;gap:clamp(36px,5vw,72px);align-items:center}
@media (min-width:1024px){.fd__g{grid-template-columns:5fr 7fr}}
.fd__tx .h2{margin:0 0 24px}
.fd__tx .lede{margin-bottom:16px}
.fd__tx p:not(.lede){max-width:34em;margin-bottom:20px}
.portrait{position:relative;max-width:400px;aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;background:var(--sand) var(--grain);rotate:-2deg;box-shadow:var(--sh-3)}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait--empty{display:flex;flex-direction:column;justify-content:space-between;padding:28px}
.portrait--empty svg{width:34%;fill:var(--pink)}
.portrait--empty span{font-family:var(--serif);font-style:italic;font-size:clamp(30px,2.6vw,42px);line-height:1}
.portrait--empty small{display:block;font-family:var(--sans);font-style:normal;font-size:14px;color:var(--muted);margin-top:8px}
@media (max-width:1023px){.portrait{max-width:300px}.portrait--empty{aspect-ratio:auto;max-width:440px;flex-direction:row;align-items:center;gap:20px;rotate:0deg;padding:20px;box-shadow:none}.portrait--empty svg{width:40px}}

/* ---------- 08 final CTA ---------- */
.fx{position:relative;background:var(--pink);padding:clamp(72px,9vw,140px) 0;overflow:clip}
.fx__g{display:grid;gap:clamp(32px,4vw,56px);align-items:center}
@media (min-width:1024px){.fx__g{grid-template-columns:5fr 7fr}}
.fx__h{font-weight:750;letter-spacing:-.045em;line-height:.9;font-size:clamp(60px,9vw,156px);margin-bottom:clamp(20px,2vw,32px)}
.fx__h .ln{display:block;overflow:clip;padding:0 .06em .12em 0;margin-bottom:-.1em}
.fx__h .ln > span{display:inline-block}
.fx__h .sf{font-size:1.08em}
.fx__h .pk{color:var(--cream)}
.fx .lede{max-width:22em;margin-bottom:32px;font-size:clamp(20px,.6vw + 17px,26px)}
.fx .btn{--bg:var(--ink);--fg:var(--cream)}
.fx .btn:hover{--bg:var(--cream);--fg:var(--ink)}
.fx .micro{margin-top:18px;color:var(--ink)}
.fx .micro a{font-weight:600}
.fx__art{position:relative;width:100%;max-width:520px;aspect-ratio:1/1.05;margin-inline:auto}
.fl{position:absolute;margin:0}
.fl--paper{left:4%;top:8%;width:78%;height:80%;background:var(--cream) var(--grain);rotate:-5deg;box-shadow:var(--sh-3);clip-path:polygon(0 2%,8% 0,22% 1.5%,40% 0,58% 2%,76% .5%,100% 1%,99% 30%,100% 60%,98.5% 100%,70% 98%,45% 100%,20% 98.5%,1% 100%,0 70%,1.5% 40%)}
.fl--paper2{right:2%;bottom:4%;width:46%;height:34%;background:var(--ink);rotate:6deg;box-shadow:var(--sh-3)}
.fl--q{left:20%;top:12%;width:44%;fill:var(--pink);filter:drop-shadow(8px 10px 0 var(--ink))}
.fl--scrib{left:-2%;bottom:6%;width:60%;color:var(--ink)}
.fl--note{right:6%;bottom:10%;width:38%;color:var(--cream);font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.4vw,24px);line-height:1.1;rotate:6deg;padding:0 8px}
.fl--note span{color:var(--pink)}
.fx__img{display:block}
[data-collage="image"] .fl{display:none}
@media (max-width:1023px){.fx__art{max-width:340px}.fx__tx{order:-1}}
@media (max-width:767px){.fx__art{max-width:280px}.fx .btn{width:100%}}

/* ---------- Apply v2: contextual package summary ---------- */
.ap-hero__g{display:grid;gap:clamp(32px,4vw,56px);align-items:center}
@media (min-width:1024px){.ap-hero__g{grid-template-columns:7fr 5fr}.ap-hero__g > .ap-hero__tx,.ap-hero__g > .ap-pkg{grid-column:auto}}
.ap-hero h1{font-size:clamp(44px,5.6vw + 6px,96px)}
.ap-pkg{position:relative;background:var(--white);border-radius:var(--r-card);padding:clamp(24px,2.6vw,36px);box-shadow:var(--sh-2);overflow:hidden}
.ap-pkg::before{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:var(--pink);opacity:.12;transition:opacity .4s var(--e-ui)}
.ap-pkg[data-svc="both"]{background:var(--ink);color:var(--cream)}
.ap-pkg[data-svc="both"]::before{opacity:.9}
.ap-pkg[data-svc="both"] :focus-visible{outline-color:var(--cream)}
.ap-pkg__live{position:relative}
.ap-pkg__ic{display:flex;margin-bottom:18px;min-height:36px}
.ap-pkg__ic .pico{width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 3px var(--white)}
.ap-pkg__ic .pico + .pico{margin-left:-8px}
.ap-pkg[data-svc="both"] .ap-pkg__ic .pico{box-shadow:0 0 0 3px var(--ink)}
.ap-pkg__h{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(30px,1.6vw + 20px,42px);line-height:1.02;letter-spacing:-.01em;margin-bottom:16px;max-width:12em}
.ap-pkg__plan{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:14px;font-weight:650}
.ap-pkg__plan b{font-size:clamp(24px,1vw + 18px,30px);font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ap-pkg[data-svc="both"] .ap-pkg__plan{border-color:#3A3733}
.ap-pkg__sum{font-size:17px;margin-bottom:14px}
.ap-pkg__l{display:grid;gap:6px;margin-bottom:16px}
.ap-pkg__l li{position:relative;padding-left:24px;font-size:15.5px}
.ap-pkg__l li::before{content:"";position:absolute;left:2px;top:.38em;width:10px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;rotate:-45deg}
.ap-pkg[data-svc="both"] .ap-pkg__l li::before{border-color:var(--pink)}
.ap-pkg__fine{font-size:14px;color:var(--muted)}
.ap-pkg[data-svc="both"] .ap-pkg__fine{color:#CFC8BC}
.ap-pkg__fine a{color:inherit;font-weight:600}
.ap-pkg__pick{border:0;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--line);min-width:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ap-pkg[data-svc="both"] .ap-pkg__pick{border-color:#3A3733}
@media (min-width:480px){.ap-pkg__pick{grid-template-columns:repeat(4,auto);justify-content:start}}
.ap-pkg__pick legend{float:left;width:100%;grid-column:1/-1;font-size:14px;font-weight:600;margin-bottom:2px;padding:0}
.ap-pkg__pick label{position:relative;cursor:pointer}
.ap-pkg__pick input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ap-pkg__pick span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border-radius:999px;background:var(--cream);font-weight:600;font-size:15px;white-space:nowrap;transition:background-color .2s var(--e-ui),color .2s var(--e-ui),transform .12s var(--e-ui)}
.ap-pkg[data-svc="both"] .ap-pkg__pick span{background:#24211F;color:var(--cream)}
.ap-pkg__pick label:hover span{background:var(--sand)}
.ap-pkg[data-svc="both"] .ap-pkg__pick label:hover span{background:#3A3733}
.ap-pkg__pick input:checked + span,.ap-pkg[data-svc] .ap-pkg__pick input:checked + span{background:var(--pink);color:var(--ink)}
.ap-pkg__pick label:active span{transform:scale(.97)}
.ap-pkg__pick input:focus-visible + span{outline:3px solid currentColor;outline-offset:2px}
.ap-sel{margin:0 0 18px;padding:12px 14px;border-radius:12px;background:var(--pink);font-size:15.5px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.ap-sel a{margin-left:auto;font-weight:600;min-height:24px}
.ap-f input:focus,.ap-f textarea:focus{outline:none;box-shadow:0 0 0 3px var(--pink)}
.ap-f input[type=text],.ap-f input[type=email],.ap-f textarea{transition:box-shadow .15s var(--e-ui),border-color .15s var(--e-ui)}
@media (prefers-reduced-motion:no-preference){.ap-step.is-in{animation:stepIn .4s var(--e-in)}}
@keyframes stepIn{from{opacity:0;translate:0 12px}}

/* ---------- Free Review v2 ---------- */
.rv-facts{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 4px}
.rv-facts li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--white);font-weight:600;font-size:15.5px}
.rv-facts li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pink)}
.rv-doc__paper{background-image:var(--grain);box-shadow:var(--sh-3)}

/* ---------- mobile menu: drawer with a short staggered entrance ---------- */
@media (prefers-reduced-motion:no-preference){
  .mnav:not([hidden]){animation:mnavIn .32s var(--e-in)}
  .mnav:not([hidden]) > a,.mnav:not([hidden]) > .mnav__tools,.mnav:not([hidden]) > .mnav__a{animation:mnavItem .45s var(--e-in) both}
  .mnav > :nth-child(2){animation-delay:.03s !important}.mnav > :nth-child(3){animation-delay:.06s !important}
  .mnav > :nth-child(4){animation-delay:.09s !important}.mnav > :nth-child(5){animation-delay:.12s !important}
  .mnav > :nth-child(6){animation-delay:.15s !important}.mnav > :nth-child(7){animation-delay:.18s !important}
  .mnav > :nth-child(8){animation-delay:.21s !important}
}
@keyframes mnavItem{from{opacity:0;translate:0 10px}}
.mnav > a{transition:color .15s var(--e-ui),padding-left .25s var(--e-in)}
.mnav > a:hover,.mnav > a:focus-visible{color:var(--pink);padding-left:6px}
.top__menu{transition:background-color .15s var(--e-ui),color .15s var(--e-ui)}
.top__menu[aria-expanded="true"]{background:var(--ink);color:var(--cream)}
.top__menu:active{transform:scale(.96)}
.rv-ph__tx h1{font-size:clamp(40px,4.2vw + 8px,80px)}


/* =====================================================================================
   v3 — interaction & motion system.
   Motion tokens (shared by CSS and wna-30.js):
     editorial  0.5–0.85s  --ease-out         headlines, imagery, section entrances
     product    0.22–0.3s  --ease-out         tabs, panels, state changes (transitions: interruptible)
     functional 0.14–0.22s --ease-out/ease    press, hover, focus, accordions, menu
   Press = scale(.97). Hover motion only on fine pointers. Reduced motion: no travel, short fades.
   ===================================================================================== */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); --e-in:var(--ease-out);
  --d-press:.14s; --d-ui:.22s; --d-ui-l:.3s; --d-ed:.75s;
}
.btn{transition:background-color var(--d-ui) ease,color var(--d-ui) ease,border-color var(--d-ui) ease,transform var(--d-press) var(--ease-out)}
.btn:active,.tool:active,.sx__tab:active,.dec__bar button:active,.ab__bar button:active,.rvp__bar button:active,.ap-pkg__pick label:active span{transform:scale(.97)}
.btn .arw{transition:transform var(--d-ui) var(--ease-out)}

/* ---------- hero: composition + entrance ---------- */
@media (min-width:1024px){
  .hx__g{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,3vw,48px)}
  .hx__art[data-collage="image"]{max-width:none;width:calc(100% + var(--gut) * .6);margin-right:calc(var(--gut) * -.6)}
  .hx__h{font-size:clamp(52px,6vw,116px)}
}
.hx__img{display:block}
.hx__img img{width:100%;height:auto}
@media (max-width:1023px){.hx__art[data-collage="image"]{max-width:620px}}
@media (prefers-reduced-motion:no-preference){
  .js .hx__lab{animation:inFade .5s var(--ease-out) both !important}
  .js .hx .ln > [data-in]{animation:inLine .8s var(--ease-out) both}
  .js .hx .ln:nth-child(1) > [data-in]{animation-delay:.07s}
  .js .hx .ln:nth-child(2) > [data-in]{animation-delay:.17s}
  .js .hx__lede{animation:inFade .6s var(--ease-out) .3s both !important}
  .js .hx__cta{animation:inFade .5s var(--ease-out) .38s both !important}
  .js .hx__micro{animation:inFade .5s var(--ease-out) .46s both !important}
  .js .hx__img{animation:inArt .85s var(--ease-out) .42s both}
}
@keyframes inArt{from{opacity:0;translate:0 24px;scale:.97;filter:blur(6px)}}

/* ---------- shared tab pattern: stacked panels, cross-fade, interruptible ---------- */
[data-tabs].is-js [role="tabpanel"]{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity var(--d-ui-l) var(--ease-out),translate var(--d-ui-l) var(--ease-out),filter var(--d-ui-l) ease,visibility 0s linear var(--d-ui-l)}
[data-tabs].is-js [role="tabpanel"].is-on{opacity:1;visibility:visible;transition-delay:0s}

/* ---------- 02 services showcase ---------- */
.sx__bar{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:5px;margin:0 0 20px;border-radius:999px;background:var(--cream);max-width:560px}
.sx__ind{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--ink);transition:transform var(--d-ui-l) var(--ease-out)}
.sx[data-active="1"] .sx__ind{transform:translateX(100%)}
.sx__tab{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:8px 14px;border:0;border-radius:999px;background:transparent;color:var(--ink);font-weight:650;font-size:16px;line-height:1.1;text-align:left;cursor:pointer;transition:color var(--d-ui) ease,transform var(--d-press) var(--ease-out)}
.sx__tab small{display:block;font-size:12.5px;font-weight:500;opacity:.7;margin-top:2px}
.sx__tab .pico{width:28px;height:28px}
.sx__tab .pico-pair .pico{box-shadow:0 0 0 2px var(--cream)}
.sx__tab[aria-selected="true"]{color:var(--cream)}
.sx__tab[aria-selected="true"] .pico-pair .pico{box-shadow:0 0 0 2px var(--ink)}
.sx__tab:focus-visible{outline-offset:-3px}
@media (hover:hover) and (pointer:fine){.sx__tab[aria-selected="false"]:hover{background:rgba(0,0,0,.05)}}
.sx__stage{display:grid;gap:var(--gap)}
.sx__p{--bg-card:var(--cream);display:grid;gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(26px,3.6vw,56px);border-radius:var(--r-card);background:var(--cream) var(--grain);overflow:hidden;outline-offset:4px}
.sx__p--m{--bg-card:var(--ink);background:var(--ink);color:var(--cream)}
.sx__p--m :focus-visible{outline-color:var(--cream)}
@media (min-width:1024px){.sx__p{grid-template-columns:5fr 6fr;min-height:560px}}
.sx__k{font-size:15px;font-weight:600;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.sx__k::before{content:"";width:22px;height:2px;background:var(--pink)}
.sx__p--m .sx__k{color:#CFC8BC}
.sx__h{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(40px,3.8vw + 8px,72px);line-height:.96;letter-spacing:-.015em;margin-bottom:18px;max-width:10em}
.sx__p1{font-size:18px;max-width:28em}
.sx__p--m .chips li{background:#24211F;color:var(--cream)}
.sx__end{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.sx__p--m .btn{--bg:var(--cream);--fg:var(--ink);--bd:var(--cream)}
.sx__p--m .btn:hover{--bg:var(--pink);--bd:var(--pink)}
.sx__vis{position:relative;display:grid;justify-items:center;gap:22px}
/* Google: a search that leads to a booking */
.gs{width:100%;max-width:470px;background:var(--white);color:var(--ink);border-radius:18px;padding:16px 18px 18px;box-shadow:var(--sh-3)}
.gs__bar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px #DAD5CC;font-size:15.5px}
.gs__ad{margin:14px -8px 6px;padding:12px 10px;border-radius:12px;transition:box-shadow .5s var(--ease-out),background-color .5s ease}
.gs__sp{font-size:12.5px;font-weight:700}
.gs__site{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:14px;line-height:1.15}
.gs__site i{width:26px;height:26px;border-radius:50%;background:var(--cream);box-shadow:inset 0 0 0 1px #DAD5CC;flex:none}
.gs__site small{display:block;color:var(--muted);font-size:12.5px}
.gs__h{color:#1A0DAB;font-size:19px;line-height:1.25;font-weight:500}
.gs__d{font-size:14.5px;color:#4D5156;margin-top:4px}
.gs__links{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:14px;color:#1A0DAB}
.gs__org{display:grid;gap:7px;padding:12px 2px 2px}
.gs__org i{height:9px;border-radius:9px;background:#EEE9E0;width:62%}
.gs__org i:first-child{width:38%;background:#E4DED3}
.gs__org i:last-child{width:84%}
.gs__land{position:absolute;right:-4%;bottom:56px;width:190px;padding:14px;border-radius:14px;background:var(--ink);color:var(--cream);box-shadow:var(--sh-3);rotate:3deg;display:grid;gap:2px;font-size:13px}
.gs__land b{font-size:15px}
.gs__land em{font-style:normal;margin-top:8px;padding:7px 10px;border-radius:9px;background:var(--pink);color:var(--ink);font-weight:700}
.sx__path{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;font-size:14px;font-weight:600}
.sx__path li{display:flex;align-items:center;gap:10px}
.sx__path li:not(:last-child)::after{content:"→";color:var(--pink)}
.sx__p--m .sx__path{color:var(--cream)}
/* Meta: a post that stops the scroll */
.ph-frame{position:relative;width:min(300px,78vw);padding:10px;border-radius:34px;background:#1C1A18;box-shadow:var(--sh-3),inset 0 0 0 1px #34312D}
.ph-post{position:relative;z-index:1;background:var(--white);color:var(--ink);border-radius:26px;overflow:hidden;padding-bottom:12px}
.ph-post .ui-who{padding:12px 14px}
.ph-post picture{display:block;aspect-ratio:4/4.2;overflow:hidden}
.ph-post img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.ph-cta{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px;padding:11px 14px;background:var(--pink);font-weight:700;font-size:14.5px}
.ph-cap{padding:0 14px;font-size:13px;line-height:1.4;color:#3B3834}
.ph-post--ghost{position:absolute;inset:44px -46px auto auto;width:78%;height:70%;z-index:0;background:#2A2724;rotate:7deg;padding:14px;display:grid;align-content:start;gap:8px}
.ph-post--ghost i{height:9px;border-radius:9px;background:#3B3834;width:60%}
/* state choreography: copy rises in order, the visual settles in behind it */
@media (prefers-reduced-motion:no-preference){
  .sx.is-js .sx__copy > *,.sx.is-js .sx__vis > *{transition:opacity .45s var(--ease-out),translate .55s var(--ease-out),filter .45s ease}
  .sx.is-js .sx__p:not(.is-on) .sx__copy > *{opacity:0;translate:0 14px}
  .sx.is-js .sx__p:not(.is-on) .sx__vis > *{opacity:0;translate:0 28px;filter:blur(4px)}
  .sx.is-js .sx__p.is-on .sx__copy > :nth-child(2){transition-delay:.04s}.sx.is-js .sx__p.is-on .sx__copy > :nth-child(3){transition-delay:.08s}
  .sx.is-js .sx__p.is-on .sx__copy > :nth-child(4){transition-delay:.12s}.sx.is-js .sx__p.is-on .sx__copy > :nth-child(5){transition-delay:.16s}
  .sx.is-js .sx__p.is-on .sx__vis > :nth-child(1){transition-delay:.08s}.sx.is-js .sx__p.is-on .sx__vis > :nth-child(2){transition-delay:.3s}
  .sx.is-js .sx__p.is-on .sx__vis > :nth-child(3){transition-delay:.4s}
  .sx.is-js .sx__p.is-on .gs__ad{box-shadow:0 0 0 2px var(--pink);background:#FFF7FA;transition-delay:.55s}
}
.sx:not(.is-js) .gs__ad{box-shadow:0 0 0 2px var(--pink)}
@media (max-width:1023px){
  .sx__bar{max-width:none}
  .sx__tab{min-height:52px;font-size:15px;gap:8px;padding:6px 10px}
  .sx__tab small{display:none}
  .gs__land{position:relative;right:auto;bottom:auto;justify-self:end;margin-top:-34px;margin-right:4px}
  .ph-post--ghost{display:none}
}
@media (max-width:379px){.sx__tab .pico,.sx__tab .pico-pair{display:none}}

/* ---------- 03 what you get: bento ---------- */
.bx{display:grid;gap:var(--gap)}
@media (min-width:768px){.bx{grid-template-columns:repeat(12,1fr)}.bx__m--dec,.bx__m--rep{grid-column:span 12}.bx__m--ab,.bx__m--sup{grid-column:span 6}}
@media (min-width:1024px){.bx__m--dec{grid-column:span 7}.bx__m--ab{grid-column:span 5}.bx__m--rep{grid-column:span 7}.bx__m--sup{grid-column:span 5}}
.bx__m{position:relative;border-radius:var(--r-card);padding:clamp(24px,2.8vw,40px);background:var(--white);overflow:hidden}
.bx__k{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.bx__k::before{content:"";width:18px;height:2px;background:var(--pink)}
.bx__m h3{font-size:clamp(26px,1.4vw + 16px,38px);font-weight:750;letter-spacing:-.035em;line-height:1.03;margin-bottom:10px}
.bx__m--dec{background:var(--ink);color:var(--cream)}
.bx__m--dec .bx__k{color:#CFC8BC}
.bx__m--dec :focus-visible{outline-color:var(--cream)}
.dec{margin-top:24px}
.dec__bar{display:flex;gap:6px}
.dec__bar button{flex:0 1 56%;min-width:70px;min-height:76px;display:flex;align-items:flex-end;padding:10px 14px;border:0;border-radius:12px;background:#24211F;color:var(--cream);font-weight:700;font-size:16px;cursor:pointer;transition:background-color var(--d-ui) ease,color var(--d-ui) ease,transform var(--d-press) var(--ease-out)}
.dec__bar button:nth-child(2){flex-basis:28%}.dec__bar button:nth-child(3){flex-basis:16%;text-decoration:line-through;text-decoration-thickness:2px}
.dec__bar button[aria-selected="true"]{background:var(--pink);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.dec__bar button[aria-selected="false"]:hover{background:#34312D}}
.dec__stage{display:grid;margin-top:20px;min-height:3.6em}
.dec__p{font-family:var(--serif);font-style:italic;font-size:clamp(22px,1vw + 16px,30px);line-height:1.15;max-width:22em}
.dec__p b{font-family:var(--sans);font-style:normal;font-size:13px;font-weight:700;vertical-align:.35em;margin-right:8px;padding:3px 9px;border-radius:999px;background:var(--cream);color:var(--ink)}
.dec:not(.is-js) .dec__p + .dec__p{margin-top:10px}
.bx__m--ab{background:var(--white)}
.ab__bar{display:inline-grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:var(--cream);margin:14px 0 16px}
.ab__bar button{min-height:44px;padding:8px 16px;border:0;border-radius:999px;background:transparent;font-weight:650;font-size:15px;cursor:pointer;transition:background-color var(--d-ui) ease,color var(--d-ui) ease,transform var(--d-press) var(--ease-out)}
.ab__bar button[aria-selected="true"]{background:var(--ink);color:var(--cream)}
.ab__stage{display:grid}
.ab__p{display:grid;gap:4px;padding:18px;border-radius:14px;background:var(--cream) var(--grain);box-shadow:var(--sh-1)}
.ab__p small{font-size:12.5px;font-weight:700}
.ab__p b{color:#1A0DAB;font-size:19px;font-weight:500;line-height:1.25}
.ab__p span{font-size:15px;color:#4D5156}
.ab__p em{justify-self:start;font-style:normal;margin-top:10px;padding:7px 12px;border-radius:9px;background:var(--ink);color:var(--cream);font-weight:700;font-size:14px}
.ab:not(.is-js) .ab__p + .ab__p{margin-top:10px}
.bx__note{margin-top:14px;font-size:15px;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .ab.is-js .ab__p:not(.is-on){translate:0 8px;filter:blur(2px)}
  .dec.is-js .dec__p:not(.is-on){translate:0 8px}
}
.bx__m--rep{background:var(--sand) var(--grain);display:grid;gap:24px;align-items:center}
@media (min-width:1024px){.bx__m--rep{grid-template-columns:5fr 6fr}}
.rep{background:var(--white);border-radius:14px;padding:20px 22px;box-shadow:var(--sh-3);rotate:-1deg;transition:rotate .5s var(--ease-out),translate .5s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.bx__m--rep:hover .rep{rotate:0deg;translate:0 -4px}}
.rep__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;margin-bottom:4px;border-bottom:1.5px solid var(--ink)}
.rep__top b{font-family:var(--serif);font-style:italic;font-weight:500;font-size:26px}
.rep__top span{font-size:13px;color:var(--muted)}
.rep__s{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid #ECE6DC}
.rep__s:last-child{border-bottom:0;padding-bottom:0}
.rep__s span{font-size:13px;font-weight:700;color:var(--pink)}
.rep__s p{font-size:15.5px}
.bx__m--sup{display:grid;align-content:center;gap:0;padding-block:clamp(14px,1.6vw,24px)}
.bx__m--sup li{padding:16px 0;border-bottom:1px solid var(--line)}
.bx__m--sup li:last-child{border-bottom:0}
.bx__m--sup h3{font-size:19px;letter-spacing:-.02em;margin-bottom:2px}
.bx__m--sup p{font-size:15.5px;color:var(--muted)}

/* ---------- 04 process: progressive ---------- */
.hw__k{font-size:15px;font-weight:600;color:#CFC8BC;margin-bottom:6px}
.hw.is-prog .hw__l li{transition:opacity .6s var(--ease-out)}
.hw.is-prog .hw__l li:not(.is-on){opacity:.3}
.hw.is-prog .hw__l li .hw__n{transition:translate .6s var(--ease-out)}
.hw.is-prog .hw__l li:not(.is-on) .hw__n{translate:0 10px}

/* ---------- 05 why: the question mark as a cropped motif ---------- */
.wy{position:relative;overflow:clip}
.wy > .wrap{position:relative}
.wy__bgq{position:absolute;right:calc(var(--gut) * -1 - 4%);top:-4%;height:min(110%,900px);width:auto;fill:var(--cream);z-index:0;pointer-events:none}
.wy__head,.wy__l,.wy__close{position:relative;z-index:1}
@media (max-width:767px){.wy__bgq{height:60%;top:auto;bottom:4%;right:-30%}}

/* ---------- 06 pricing polish ---------- */
.plan{transition:box-shadow var(--d-ui-l) var(--ease-out),translate var(--d-ui-l) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.plan:hover{translate:0 -3px}}
.plan__top .pico{width:32px;height:32px}
.plan__top .pico-pair .pico + .pico{margin-left:-7px}
.plan__fee b{display:inline-block}
.plan__fee b::first-letter{font-size:.5em;font-weight:650;vertical-align:.78em;margin-right:.06em;letter-spacing:0}
.plan__fee span{font-size:16px}
.pr__disc{font-size:16.5px}
.fq__more{border-bottom:1px solid var(--line)}
.fq__more > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 0;cursor:pointer;font-weight:650;color:var(--muted);transition:color var(--d-ui) ease}
.fq__more > summary::-webkit-details-marker{display:none}
.fq__more > summary:hover{color:var(--ink)}
.fq__more > summary i{position:relative;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;flex:none}
.fq__more > summary i::before,.fq__more > summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:currentColor;translate:-50% -50%}
.fq__more > summary i::after{rotate:90deg;transition:rotate var(--d-ui) var(--ease-out)}
.fq__more[open] > summary i::after{rotate:0deg}
.fq__more[open] > summary{color:var(--ink)}
.acc--more{border-top:0}
@supports (interpolate-size:allow-keywords){
  .fq__more{interpolate-size:allow-keywords}
  .fq__more::details-content{height:0;overflow:clip;transition:height .35s var(--ease-out),content-visibility .35s allow-discrete}
  .fq__more[open]::details-content{height:auto}
}

/* ---------- Free Review: topic preview ---------- */
.rvp__bar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.rvp__bar button{min-height:44px;padding:8px 14px;border:0;border-radius:999px;background:var(--white);font-weight:600;font-size:15px;cursor:pointer;box-shadow:var(--sh-1);transition:background-color var(--d-ui) ease,color var(--d-ui) ease,transform var(--d-press) var(--ease-out)}
.rvp__bar button[aria-selected="true"]{background:var(--ink);color:var(--cream)}
@media (hover:hover) and (pointer:fine){.rvp__bar button[aria-selected="false"]:hover{background:var(--sand)}}
.rvp .rv-doc__paper{transform:none;rotate:1deg;border:0;border-radius:6px}
.rvp__stage{display:grid}
.rvp__p{padding:6px 0 4px}
.rvp__p h3{display:flex;align-items:baseline;gap:12px;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(28px,1.4vw + 18px,38px);line-height:1.05;margin-bottom:10px}
.rvp__p h3 span{font-family:var(--sans);font-style:normal;font-size:14px;font-weight:700;color:var(--pink)}
.rvp__p p{font-size:17px}
.rvp__note{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--cream);font-size:15.5px !important;color:#3B3834}
[data-tabs="review"]:not(.is-js) .rvp__p + .rvp__p{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
@media (prefers-reduced-motion:no-preference){[data-tabs="review"].is-js .rvp__p:not(.is-on){translate:0 8px}}
@media (max-width:767px){.rvp__bar{display:grid;grid-template-columns:1fr 1fr}.rvp__bar button{padding:8px 10px}}
@media (prefers-reduced-motion:reduce){[data-tabs].is-js [role="tabpanel"]{translate:none !important;filter:none !important}}

/* =====================================================================================
   wna-32 — Bright system. Warm-white canvas, white surfaces, the brand cream kept as an
   editorial accent, neutral shadows, no grain on UI. Realistic device components:
   .bw (browser window) and .phone (handset with real HTML screen content).
   ===================================================================================== */
:root{
  --canvas:#FCFBF9; --white:#FFFFFF; --brand-cream:#F4F0E8; --cream:#F5F3F0; --sand:#F5F3F0; --paper:#FFFFFF;
  --ink:#141414; --muted:#57534E; --line:#E9E7E4; --field:#8A8580; --grain:none;
  --sh-1:0 1px 2px rgba(20,20,20,.05),0 2px 8px rgba(20,20,20,.04);
  --sh-2:0 1px 2px rgba(20,20,20,.05),0 14px 32px -14px rgba(20,20,20,.16);
  --sh-3:0 2px 6px rgba(20,20,20,.06),0 32px 64px -28px rgba(20,20,20,.3);
  --shadow:var(--sh-2); --r-card:24px; --on-ink:#CFCFCB; --on-ink-2:#A3A39E;
}
html,body,.mnav,.pr{background:var(--canvas)}
/* one sticky-header offset: scroll-padding on the root only (it used to add up with scroll-margin) */
html{scroll-padding-top:calc(var(--hdr) + 12px)}
[id]{scroll-margin-top:0}
.top{background:rgba(252,251,249,.88);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px)}
@media (max-width:767px){.s{padding:60px 0}}

/* surfaces: hairlines instead of heavy ink outlines */
.sheet,.fc__form{border:1px solid var(--line);box-shadow:var(--sh-2)}
.f input[type=text],.f input[type=email],.f input[type=url],.f textarea,.money input{border:1px solid var(--field)}
.f input::placeholder,.f textarea::placeholder{color:#8A8580}
.rvc,.ap-chk{border:1px solid var(--line);background:var(--cream)}
.rv-side__card,.jr__s{border:1px solid var(--line);background:var(--white)}
.rv-doc__paper{border:1px solid var(--line);box-shadow:var(--sh-3)}
.rv-doc__top{border-bottom-width:1px}
.pl-art::before{border:1px solid var(--line)}
.tool,.tool--main{border:0;box-shadow:0 0 0 1px var(--line)}
.tool:hover{background:var(--cream)}
.acc{border-top-width:1px}
.hw .lede,.hw__l p,.hw__end p{color:var(--on-ink)}
.hw__k,.bx__m--dec .bx__k{color:var(--on-ink-2)}
.hw__end{border-top-color:#2E2E2C}
.wy__bgq{fill:var(--brand-cream)}

/* ---------- hero: brighter, calmer, one dominant action ---------- */
.hx__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.hx__more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:17px;color:var(--ink);text-decoration:none}
.hx__more svg{width:15px;height:15px;color:var(--pink);transition:translate var(--d-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.hx__more:hover{text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1.5px}.hx__more:hover svg{translate:0 3px}}
@media (max-width:767px){
  .hx{padding:8px 0 44px}
  .hx__g{gap:20px}
  .hx__lab{font-size:13.5px;margin-bottom:14px}
  .hx__h{font-size:clamp(44px,12.6vw,60px);margin-bottom:16px}
  .hx__lede{font-size:17.5px;margin-bottom:22px}
  .hx__cta{gap:6px}
  .hx__cta .btn{width:100%}
  .hx__more{justify-content:center;width:100%;font-size:16px}
  .hx__micro{font-size:14px;margin-top:8px;text-align:center}
}

/* ---------- 02 services: product presentation, no card shells ---------- */
.sx__p,.sx__p--m{background:none;color:var(--ink);padding:0;border-radius:0;overflow:visible;min-height:0}
.sx__p--m .sx__k{color:var(--muted)}
.sx__p--m .chips li{background:var(--cream);color:var(--ink)}
.sx__p--m .btn{--bg:var(--pink);--fg:var(--ink);--bd:var(--ink)}
.sx__p--m .btn:hover{--bg:var(--ink);--fg:var(--cream);--bd:var(--ink)}
.sx__p--m :focus-visible{outline-color:var(--ink)}
.sx__p--m .sx__path{color:var(--ink)}
.sx__side{display:grid;gap:16px;min-width:0}
.sx__vis{display:block;position:relative;overflow:hidden;border-radius:var(--r-card)}
@media (min-width:1024px){
  .sx__p{grid-template-columns:5fr 7fr;gap:clamp(40px,5vw,88px)}
  .sx__p--m{grid-template-columns:7fr 5fr}
  .sx__p--m .sx__side{order:-1}
}
.demo-tag{position:absolute;z-index:4;left:14px;bottom:14px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:650;letter-spacing:.02em;color:var(--muted);background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px var(--line)}
.sx__vis--m .demo-tag{bottom:auto;top:14px;color:#BDBDB8;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}

/* browser window */
.sx__vis--g{background:#F1EFEC;padding:clamp(22px,4vw,56px) 0 clamp(96px,9vw,120px) clamp(18px,4vw,56px)}
.bw{position:relative;width:calc(100% + 24px);background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(20,20,20,.07),var(--sh-3)}
.bw__chrome,.rep__chrome{display:flex;align-items:center;gap:14px;height:42px;padding:0 14px;background:#F7F6F4;border-bottom:1px solid var(--line)}
.bw__dots{display:flex;gap:6px;flex:none}
.bw__dots i{width:10px;height:10px;border-radius:50%;background:#DEDBD7}
.bw__url{flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:26px;padding:0 12px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:12.5px;color:#6B6863;white-space:nowrap;overflow:hidden}
.bw__url svg{width:11px;height:11px;flex:none}
.bw__page{padding:18px 22px 20px;max-width:520px}
.gs__bar{justify-content:space-between;padding:11px 18px;box-shadow:0 1px 6px rgba(32,33,36,.16);font-size:15px}
.gs__bar svg{width:17px;height:17px;flex:none;color:#5F6368}
.gs__tabs{display:flex;gap:18px;margin:12px 0 2px;padding:0 6px 9px;border-bottom:1px solid #EEEDEB;font-size:13px;color:#5F6368}
.gs__tabs b{position:relative;color:var(--ink);font-weight:600}
.gs__tabs b::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2.5px;border-radius:2px;background:var(--ink)}
.gs__site i{display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;background:var(--ink);color:#fff;box-shadow:none}
.gs__org i{background:#F0EFED}
.gs__org i:first-child{background:#E8E6E3}
.bk{position:absolute;z-index:3;right:clamp(14px,3vw,36px);bottom:clamp(14px,2.4vw,30px);width:214px;display:grid;gap:3px;padding:14px;border-radius:18px;background:#fff;font-size:13px;box-shadow:0 0 0 1px rgba(20,20,20,.05),var(--sh-3)}
.bk__url{font-size:11.5px;color:var(--muted)}
.bk__h{font-size:16px;letter-spacing:-.015em}
.bk__day{margin-top:6px;font-size:12px;font-weight:600;color:var(--muted)}
.bk__slots{display:flex;gap:6px;margin:2px 0 8px}
.bk__slots span{flex:1;text-align:center;padding:7px 0;border-radius:9px;box-shadow:inset 0 0 0 1px var(--line);font-weight:600;font-variant-numeric:tabular-nums}
.bk__slots .is-on{background:var(--ink);color:#fff;box-shadow:none}
.bk__btn{display:block;text-align:center;padding:9px;border-radius:10px;background:var(--pink);color:var(--ink);font-weight:700}

/* handset: titanium rim, black bezel, island, real screen content */
.sx__vis--m{display:grid;justify-items:center;align-content:start;height:clamp(500px,46vw,610px);padding-top:clamp(40px,4.4vw,60px);background:radial-gradient(70% 55% at 50% 30%,#2B2B2A 0%,#141414 72%)}
.phone{--pw:min(288px,70vw);position:relative;width:var(--pw);aspect-ratio:71.5/147;padding:3px;border-radius:calc(var(--pw) * .165);background:linear-gradient(150deg,#9A9DA2 0%,#45474C 13%,#232428 40%,#2C2E32 72%,#85888E 100%);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 60px 90px -50px rgba(0,0,0,.8)}
.phone::before,.phone::after{content:"";position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#5E6166,#2A2C30)}
.phone::before{left:-3px;top:21%;height:6.5%;box-shadow:0 calc(var(--pw) * .16) 0 #44464B}
.phone::after{right:-3px;top:27%;height:10%}
.phone__bz{height:100%;padding:calc(var(--pw) * .03);border-radius:calc(var(--pw) * .155);background:#050505;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.phone__scr{position:relative;height:100%;overflow:hidden;border-radius:calc(var(--pw) * .128);background:#fff;color:var(--ink);font-size:13px;line-height:1.35;isolation:isolate}
.phone__scr::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 26%)}
.phone__sb{position:relative;display:flex;align-items:center;justify-content:space-between;height:calc(var(--pw) * .135);padding:0 calc(var(--pw) * .08) 0 calc(var(--pw) * .09);font-size:13px;font-weight:650;font-variant-numeric:tabular-nums}
.phone__isl{position:absolute;left:50%;top:calc(var(--pw) * .036);translate:-50% 0;width:31%;height:calc(var(--pw) * .088);border-radius:999px;background:#050505}
.phone__ind{display:flex;align-items:center;gap:6px}
.phone__ind .sig{width:17px;height:10px;background:linear-gradient(currentColor 0 0) 0 100%/3px 40% no-repeat,linear-gradient(currentColor 0 0) 4.6px 100%/3px 60% no-repeat,linear-gradient(currentColor 0 0) 9.2px 100%/3px 80% no-repeat,linear-gradient(currentColor 0 0) 13.8px 100%/3px 100% no-repeat}
.phone__ind .bat{position:relative;width:22px;height:11px;padding:1.5px;border-radius:3.5px;box-shadow:inset 0 0 0 1.2px rgba(20,20,20,.4);background:linear-gradient(currentColor 0 0) content-box}
.phone__ind .bat::after{content:"";position:absolute;right:-3px;top:3.5px;width:1.5px;height:4px;border-radius:0 1px 1px 0;background:rgba(20,20,20,.4)}
.feed__top{display:flex;align-items:center;justify-content:space-between;padding:2px 14px 8px;font-size:18px;font-weight:750;letter-spacing:-.03em}
.feed__top span{display:flex;gap:14px}
.feed__top svg{width:21px;height:21px}
.post{border-top:1px solid #F0EFED}
.post__who{display:flex;align-items:center;gap:9px;padding:9px 12px}
.post__who i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-style:normal;font-size:10.5px;font-weight:700;background:var(--brand-cream);color:var(--ink);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--pink)}
.post__who b{display:block;font-size:13px}
.post__who small{display:block;font-size:11.5px;color:#737069}
.post__who em{margin-left:auto;font-style:normal;color:#737069;letter-spacing:1px}
.post picture{display:block;aspect-ratio:4/5;overflow:hidden;background:#EEE}
.post img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.post__cta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-bottom:1px solid #F0EFED}
.post__cta span{font-size:13px;font-weight:650;line-height:1.2}
.post__cta small{display:block;font-size:11px;font-weight:500;color:#737069}
.post__cta b{flex:none;padding:7px 12px;border-radius:8px;background:var(--pink);font-size:12.5px}
.post__act{display:flex;gap:14px;padding:9px 12px 4px}
.post__act svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}
.post__act .r{margin-left:auto}
.post__cap{padding:2px 12px;font-size:12.5px}
@media (max-width:1023px){
  .sx__vis--g{padding:18px 18px 0}
  .bw{width:100%}
  .bk{position:relative;right:auto;bottom:auto;width:208px;margin:-64px 4px 18px auto}
  .sx__vis--g .demo-tag{bottom:18px}
  .sx__vis--m{height:500px;padding-top:36px}
  .post picture{aspect-ratio:1/1}
}
@media (max-width:379px){.bw__url{font-size:11.5px}.bk{width:190px}}
@media (prefers-reduced-motion:no-preference){
  .sx.is-js .sx__p.is-on .sx__vis > .bw,.sx.is-js .sx__p.is-on .sx__vis > .phone{transition-delay:.06s}
  .sx.is-js .sx__p.is-on .sx__vis > .bk{transition-delay:.26s}
  .sx.is-js .sx__p.is-on .gs__ad{transition-delay:.45s}
  .sx.is-js .sx__path{transition:opacity .4s var(--ease-out) .3s}
  .sx.is-js .sx__p:not(.is-on) .sx__path{opacity:0;transition-delay:0s}
}

/* ---------- 03 what you get: product modules ---------- */
.gx{background:var(--canvas)}
.bx__m{background:var(--white);box-shadow:0 0 0 1px var(--line)}
.bx__m--dec{background:var(--ink);box-shadow:none}
.dec__p b{background:var(--white)}
.ab__win{border-radius:16px;background:var(--cream);padding:6px;box-shadow:inset 0 0 0 1px var(--line)}
.ab__top{display:flex;justify-content:space-between;gap:10px;padding:6px 10px 10px;font-size:12.5px;color:var(--muted)}
.ab__st{display:inline-flex;align-items:center;gap:7px;font-weight:650;color:var(--ink)}
.ab__st i{width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 3px rgba(238,42,123,.16)}
.ab__p{gap:3px;padding:16px 18px;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(20,20,20,.06),0 0 0 1px rgba(20,20,20,.04)}
.ab__who{display:flex;align-items:center;gap:9px;margin-bottom:6px;font-size:13.5px;font-weight:600}
.ab__who i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;font-size:11px;font-weight:700;background:var(--ink);color:#fff}
.ab__who span{font-size:13.5px;color:var(--ink)}
.ab__who small{display:block;font-size:12px;font-weight:500;color:var(--muted)}
.ab__p > b{font-size:18px}
.ab__p > span{font-size:14.5px}
.ab__p > em{margin-top:2px;padding:0;background:none;color:#1A0DAB;font-weight:500;font-size:14px}
.ab__idea{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:12.5px;font-weight:650;color:var(--muted)}
.bx__m--rep{background:var(--cream);box-shadow:none}
.rep{padding:0;overflow:hidden;rotate:0deg;border-radius:16px;box-shadow:0 0 0 1px rgba(20,20,20,.06),var(--sh-2);transition:translate var(--d-ui-l) var(--ease-out)}
.rep__chrome{height:38px;gap:12px;font-size:12px;color:var(--muted)}
.rep__body{padding:18px 22px 20px}
.rep__top{border-bottom:1px solid var(--line)}
.rep__s{border-bottom-color:var(--line)}
.rep__s span{display:flex;gap:10px;align-items:baseline}
.rep__s i{font-style:normal;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){.bx__m--rep:hover .rep{rotate:0deg;translate:0 -3px}}

/* ---------- 06 pricing: management fee and ad spend named on every plan ---------- */
.plan{box-shadow:0 0 0 1px var(--line)}
.plan--both{box-shadow:none}
.plan__fee{align-items:flex-end;border-color:var(--line)}
.plan__fee span{display:flex;flex-direction:column;line-height:1.15;padding-bottom:.3em}
.plan__fee small{font-size:13px;font-weight:600;color:var(--muted)}
.plan__spend{display:flex;gap:9px;align-items:baseline;margin:-8px 0 22px;font-size:14.5px;color:var(--muted)}
.plan__spend::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--pink);translate:0 -2px}
.plan--both .plan__fee{border-color:#2E2E2C}
.plan--both .plan__fee small,.plan--both .plan__spend,.plan--both .plan__fee span{color:var(--on-ink)}

/* ---------- apply: compact package summary on small screens ---------- */
.ap-pkg__more > summary{display:none}
@media (max-width:1023px){
  .ap-pkg{padding:18px 18px 16px;border-radius:18px;box-shadow:0 0 0 1px var(--line),var(--sh-1)}
  .ap-pkg::before,.ap-pkg__ic{display:none}
  .ap-pkg__h{font-family:var(--sans);font-style:normal;font-weight:700;font-size:20px;line-height:1.2;letter-spacing:-.02em;margin-bottom:8px}
  .ap-pkg__sum{font-size:15.5px;margin-bottom:6px}
  .ap-pkg:not([data-svc=""]) .ap-pkg__sum{display:none}
  .ap-pkg__plan{padding:10px 0;margin-bottom:4px}
  .ap-pkg__more > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-size:15px;font-weight:650;cursor:pointer;list-style:none}
  .ap-pkg__more > summary::-webkit-details-marker{display:none}
  .ap-pkg__more > summary i{position:relative;width:22px;height:22px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor}
  .ap-pkg__more > summary i::before,.ap-pkg__more > summary i::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.5px;background:currentColor;translate:-50% -50%}
  .ap-pkg__more > summary i::after{rotate:90deg;transition:rotate var(--d-ui) var(--ease-out)}
  .ap-pkg__more[open] > summary i::after{rotate:0deg}
  .ap-pkg__more[open] > summary{margin-bottom:6px}
  .ap-pkg__pick{margin-top:10px;padding-top:12px}
  .ap-hero{padding-bottom:28px}
}

/* ---------- free review: the preview stays light so the form comes sooner ---------- */
@media (max-width:1023px){
  .rvp .rv-doc__top,.rvp .rv-doc__for,.rvp .rv-doc__sig{display:none}
  .rvp .rv-doc__paper{rotate:0deg;padding:16px 16px 18px;box-shadow:var(--sh-1)}
  .rv-doc figcaption{margin-top:10px}
}
.sx__p .chips li{background:var(--cream);color:var(--ink)}
@media (max-width:1023px){.sx__p{align-content:start}}
.dec__bar button{min-height:56px;background:#262626}
@media (max-width:767px){.dec__bar button{min-height:46px;align-items:center}}
@media (hover:hover) and (pointer:fine){.dec__bar button[aria-selected="false"]:hover{background:#333}}

/* ---------- wna-33 refinement: hero rhythm, photographic Google stage, quieter chrome ---------- */
.top{background:var(--canvas);-webkit-backdrop-filter:none;backdrop-filter:none}
.hx{padding-top:clamp(8px,2vw,24px)}
@media (min-width:1024px){.hx__g{min-height:min(700px,calc(100svh - var(--hdr) - 32px))}}
.hx__h .ln + .ln{margin-top:.07em}
.hx__lede{max-width:23em}

.sx__h{font-size:clamp(44px,3.9vw + 10px,80px)}
.sx__vis--g{background:#E7E0D6;isolation:isolate}
.sx__bg{position:absolute;inset:0;z-index:-1}
.sx__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.sx.is-js .sx__p .sx__vis > .sx__bg{opacity:1;translate:none;filter:none}
.bw{box-shadow:0 0 0 1px rgba(0,0,0,.06),0 44px 90px -36px rgba(0,0,0,.5),0 14px 28px -16px rgba(0,0,0,.22)}
.bk{box-shadow:0 0 0 1px rgba(0,0,0,.05),0 30px 60px -24px rgba(0,0,0,.45)}
.bw__nav{display:flex;gap:4px;color:#A6A29D;flex:none}
.bw__nav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sx__vis--g .demo-tag{background:rgba(255,255,255,.88);box-shadow:none}
.sx__vis--m{background:#161616}

.gx,.pr{background:var(--cream)}
.bx__m,.plan{box-shadow:none}
.bx__m--rep{background:var(--white)}
.bx__m--sup li{border-bottom:0;padding:12px 0}

.ck{max-width:900px;border:0;border-radius:18px;padding:16px 18px 16px 22px;display:grid;grid-template-columns:1fr auto;gap:2px 28px;align-items:center;box-shadow:0 0 0 1px rgba(20,20,20,.06),0 28px 60px -24px rgba(20,20,20,.38)}
.ck[hidden]{display:none}
.ck__h{grid-column:1;font-size:16px}
.ck__p{grid-column:1;font-size:14px}
.ck__a{grid-column:2;grid-row:1 / 3;display:flex;flex-wrap:wrap;gap:8px}
.ck__a .btn{min-height:44px;padding:8px 16px;font-size:14.5px;border-width:1px}
@media (max-width:767px){
  .ck{grid-template-columns:1fr;padding:16px}
  .ck__a{grid-column:1;grid-row:auto;display:grid;grid-template-columns:1fr 1fr;margin-top:10px}
  .ck__a .btn:last-child{grid-column:1 / -1}
}
.ckd{border:0;border-radius:18px;box-shadow:0 30px 80px -30px rgba(0,0,0,.5)}
.tool,.tool--main{box-shadow:none}
@media (max-width:767px){
  .ck{left:12px;right:12px;bottom:12px;padding:14px 14px 10px;gap:2px}
  .ck__h{display:none}
  .ck__p{font-size:13.5px;line-height:1.4}
  .ck__a{gap:6px;margin-top:8px}
  .ck__a .btn{min-height:44px;font-size:14px;padding:6px 10px}
  .ck__a .btn--o{min-height:40px;border:0;background:none;text-decoration:underline;text-underline-offset:.2em}
  .ck__a .btn--o:hover{--fg:var(--ink);background:none}
  .sx__vis--g{padding-top:30px}
}

/* =====================================================================
   wna-34: overflow at the source, open-stage service visuals,
   campaign performance product UI
   ===================================================================== */

/* ---------- horizontal overflow: fix the sources, and back up overflow:clip where Safari < 16 ignores it ---------- */
@media (max-width:767px){.wy__bgq{right:0;height:46%;bottom:2%;opacity:.9}}
@supports not (overflow:clip){.hx,.fx,.wy{overflow:hidden}}

/* ---------- 02 services: devices on the open page, no stage boxes ---------- */
.sx__vis,.sx__vis--g,.sx__vis--m{display:block;margin:0;overflow:visible;border-radius:0;background:none;height:auto;padding:0}
.sx__cap{font-size:13.5px;line-height:1.45;color:var(--muted)}
@media (min-width:1024px){
  .sx__p{grid-template-columns:5fr 7fr;gap:clamp(40px,5vw,96px)}
  .sx__p--m{grid-template-columns:6fr 5fr}
}

/* Google: a Chrome window on a search results page, the booking that follows */
.sx__vis--g{position:relative;padding-bottom:clamp(64px,6vw,84px)}
.sx__vis--g .bw{width:calc(100% - clamp(28px,4vw,56px))}
.bw{container-type:inline-size;border-radius:14px;background:#fff;overflow:hidden;
  box-shadow:0 0 0 1px rgba(20,20,20,.08),0 1px 2px rgba(20,20,20,.05),0 22px 44px -22px rgba(20,20,20,.28),0 64px 120px -48px rgba(20,20,20,.3)}
.bw__tabs{display:flex;align-items:flex-end;gap:6px;height:40px;padding:0 10px 0 16px;background:#EDEBE8}
.bw__tabs .bw__dots{align-self:center;margin-right:12px}
.bw__dots i{width:11px;height:11px}
.bw__dots i:nth-child(1){background:#FF5F57}.bw__dots i:nth-child(2){background:#FEBC2E}.bw__dots i:nth-child(3){background:#28C840}
.bw__tab{position:relative;display:flex;align-items:center;gap:8px;width:min(250px,54%);height:32px;padding:0 10px 0 12px;border-radius:10px 10px 0 0;background:#fff;font:12px/1 Arial,Helvetica,sans-serif;color:#3C4043}
.bw__tab::before,.bw__tab::after{content:"";position:absolute;bottom:0;width:10px;height:10px;background:radial-gradient(circle at 0 0,transparent 9.5px,#fff 10px)}
.bw__tab::before{left:-10px;background:radial-gradient(circle at 0 0,transparent 9.5px,#fff 10px)}
.bw__tab::after{right:-10px;background:radial-gradient(circle at 100% 0,transparent 9.5px,#fff 10px)}
.bw__tt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bw__tab svg,.bw__plus svg{width:10px;height:10px;flex:none;fill:none;stroke:#5F6368;stroke-width:1.5;stroke-linecap:round}
.bw__plus{align-self:center;display:grid;place-items:center;width:24px;height:24px;margin-left:8px}
.gg{flex:none;width:14px;height:14px;border-radius:50%;background:conic-gradient(from -40deg,#EA4335 0 22%,#FBBC05 0 34%,#34A853 0 62%,#4285F4 0 100%);-webkit-mask:radial-gradient(circle,transparent 3.6px,#000 3.8px);mask:radial-gradient(circle,transparent 3.6px,#000 3.8px)}
.bw__chrome{gap:12px;height:44px;padding:0 12px;background:#fff;border-bottom:1px solid #ECEAE7}
.bw__nav{gap:12px;color:#5F6368}
.bw__nav svg{width:16px;height:16px;stroke-width:1.6}
.bw__nav .off{opacity:.35}
.bw__url{height:30px;padding:0 14px;border-radius:999px;background:#F1F0EE;box-shadow:none;font:13px/1 Arial,Helvetica,sans-serif;color:#5F6368}
.bw__url > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.bw__url b{font-weight:400;color:#202124}
.bw__url svg{width:12px;height:12px;color:#5F6368}
.bw__me{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--pink);color:var(--ink);font:700 11px/1 var(--sans)}
.bw__page{max-width:none;padding:20px 24px 24px;font-family:Arial,Helvetica,sans-serif;color:#202124}
.gs__head{display:flex;align-items:center;gap:22px}
.gs__logo{flex:none;font:500 25px/1 var(--sans);letter-spacing:-.045em}
.gs__logo b{font-weight:600}
.gs__logo b:nth-child(1),.gs__logo b:nth-child(4){color:#4285F4}
.gs__logo b:nth-child(2),.gs__logo b:nth-child(6){color:#EA4335}
.gs__logo b:nth-child(3){color:#FBBC05}
.gs__logo b:nth-child(5){color:#34A853}
.gs__bar{flex:1;min-width:0;display:flex;align-items:center;gap:12px;height:44px;padding:0 16px 0 20px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px #DFE1E5,0 1px 6px rgba(32,33,36,.2);font-size:15px}
.gs__q{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs__bar svg{width:18px;height:18px;flex:none;fill:none;stroke-width:2;stroke-linecap:round}
.gs__bar .x{stroke:#70757A;width:16px;height:16px;stroke-width:1.6}
.gs__bar .gs__mag{stroke:#4285F4}
.gs__bar i{width:1px;height:24px;background:#DADCE0}
.gs__tabs{display:flex;gap:22px;margin:16px 0 0;padding:0 0 10px;border-bottom:1px solid #EBEBEB;font-size:13.5px;color:#5F6368;white-space:nowrap;overflow:hidden}
.gs__tabs b{font-weight:400;color:#202124}
.gs__tabs b::after{bottom:-11px;height:3px;border-radius:3px 3px 0 0;background:#1F1F1F}
.gs__ad{position:relative;margin:14px -12px 4px;padding:12px;border-radius:14px;box-shadow:none;background:none}
.gs__sp{font:700 13.5px/1.2 Arial,Helvetica,sans-serif;color:#202124}
.gs__site{gap:12px;margin:8px 0 6px;font-size:14px;color:#202124}
.gs__site i{width:28px;height:28px;font-size:12px;font-family:var(--sans);background:var(--ink);color:#fff}
.gs__site small{font-size:12.5px;color:#4D5156}
.gs__site em{margin-left:auto;align-self:flex-start;font-style:normal;color:#70757A;font-weight:700}
.gs__h{font:400 20px/1.3 Arial,Helvetica,sans-serif;color:#1A0DAB}
.gs__d{font-size:14px;line-height:1.55;color:#4D5156}
.gs__links{gap:6px 18px;font-size:14px}
.gs__cur{position:absolute;left:clamp(200px,58%,420px);top:96px;width:24px;height:24px;fill:#fff;stroke:#111;stroke-width:1.3;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));pointer-events:none}
.gs__org{display:grid;gap:8px;padding:18px 0 0}
.gs__org p{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.gs__org p i:first-child{width:26px;height:26px;border-radius:50%;background:#F1F0EE}
.gs__org p i:last-child{width:32%;height:9px;background:#ECEBE8}
.gs__org > i{height:9px;border-radius:9px;background:#F1F0EE;width:88%}
.gs__org > i:nth-of-type(1){height:12px;width:56%;background:#E3E7F8}
.gs__org > i:last-child{width:70%}
@container (min-width:560px){.gs__tabs,.gs__org{margin-left:98px}.gs__ad{margin-left:86px}}
@container (max-width:439px){.gs__logo{display:none}.bw__page{padding:16px 16px 20px}.gs__h{font-size:18px}.bw__tab{width:62%}}
.sx__vis--g .bk{right:0;bottom:0;width:240px;padding:16px;border-radius:18px;gap:4px;
  box-shadow:0 0 0 1px rgba(20,20,20,.07),0 2px 4px rgba(20,20,20,.05),0 34px 70px -28px rgba(20,20,20,.45)}
.bk__url{display:flex;align-items:center;gap:6px;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.bk__url svg{width:11px;height:11px;fill:currentColor}
.sx__vis--g .sx__cap{position:absolute;left:0;bottom:0;max-width:calc(100% - 276px)}

/* Meta: the handset on the page itself, larger, with a soft floor shadow */
.sx__vis.sx__vis--m{display:grid;justify-items:center;gap:26px;padding:8px 0 0}
.sx__vis--m .phone{--pw:min(330px,74vw);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 3px rgba(20,20,20,.12),0 40px 70px -30px rgba(20,20,20,.45),0 90px 120px -70px rgba(20,20,20,.4)}
.sx__vis--m .sx__cap{text-align:center}

/* entrance: device first, booking card second, then the click on the ad */
@media (prefers-reduced-motion:no-preference){
  .sx.is-js .sx__p .sx__vis > *{transition:opacity .5s var(--ease-out),translate .7s var(--ease-out),filter .5s ease}
  .sx.is-js .sx__p:not(.is-on) .sx__vis > .phone{translate:0 40px}
  .sx.is-js .sx__p:not(.is-on) .sx__vis > .bk{translate:0 24px}
  .sx.is-js .sx__p.is-on .sx__vis > .bw,.sx.is-js .sx__p.is-on .sx__vis > .phone{transition-delay:.05s}
  .sx.is-js .sx__p.is-on .sx__vis > .bk{transition-delay:.42s}
  .sx.is-js .sx__p.is-on .sx__vis > .sx__cap{transition-delay:.5s}
  .gs__cur{transition:opacity .3s ease,translate .5s var(--ease-out)}
  .sx.is-js .sx__p:not(.is-on) .gs__cur{opacity:0;translate:14px 18px}
  .sx.is-js .sx__p.is-on .gs__cur{transition-delay:.3s}
  .sx.is-js .sx__p.is-on .gs__ad{box-shadow:0 0 0 1.5px rgba(238,42,123,.55);background:#FFF8FB;transition-delay:.3s}
}
.sx:not(.is-js) .gs__ad{box-shadow:0 0 0 1.5px rgba(238,42,123,.55)}

@media (max-width:1023px){
  .sx__p--m .sx__side{order:-1}
}
@media (max-width:767px){
  .sx__vis--g{padding:0}
  .sx__vis--g .bw{width:100%}
  .sx__vis--g .bk{position:relative;right:auto;bottom:auto;width:220px;margin:-58px 8px 0 auto}
  .sx__vis--g .sx__cap{position:static;max-width:none;margin-top:16px}
  .bw__tabs{height:34px;padding-left:12px}
  .bw__tabs .bw__dots{margin-right:6px}
  .bw__dots i{width:9px;height:9px}
  .bw__tab{height:27px;font-size:11px}
  .bw__plus{display:none}
  .bw__chrome{height:40px;gap:10px;padding:0 10px}
  .bw__nav svg:nth-child(2){display:none}
  .bw__url{font-size:12px;padding:0 10px}
  .gs__bar{height:40px;font-size:14px;padding:0 12px 0 16px}
  .gs__tabs{gap:18px;font-size:13px}
  .gs__cur{left:58%;top:70px}
  .gs__org:last-child{display:none}
  .sx__vis--m .phone{--pw:min(300px,76vw)}
}

/* ---------- campaign performance: product UI ---------- */
.pf{background:var(--canvas)}
.pfa{position:relative;background:#fff;border-radius:22px;overflow:hidden;font-family:var(--sans);
  box-shadow:0 0 0 1px rgba(20,20,20,.07),0 2px 4px rgba(20,20,20,.03),0 40px 90px -50px rgba(20,20,20,.4)}
.pfa__top{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px;padding:0 22px;border-bottom:1px solid var(--line)}
.pfa__app{display:flex;align-items:center;gap:12px;min-width:0;font-size:14.5px}
.pfa__mk{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff;font:italic 500 19px/1 var(--serif)}
.pfa__app b{font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.pfa__crumb{color:var(--muted);white-space:nowrap}
.pfa__crumb::before{content:"/";margin-right:12px;color:#CFCBC5}
.pfa__meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap}
.pfa__meta i{width:7px;height:7px;border-radius:50%;background:var(--pink)}
.pfa__body{display:grid;grid-template-columns:240px minmax(0,1fr)}
.pfa__rail{display:grid;align-content:start;gap:4px;padding:16px 14px;border-right:1px solid var(--line);background:#FCFBF9}
.pfa__rail[hidden]{display:none}
.pfa__rh{padding:6px 12px 10px;font-size:12.5px;font-weight:600;color:var(--muted)}
.pfa__rail button{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:12px 14px;border:0;border-radius:12px;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;
  transition:background-color var(--d-ui) ease,color var(--d-ui) ease,transform var(--d-press) var(--ease-out)}
.pfa__rail button b{font-size:15px;font-weight:600;letter-spacing:-.01em}
.pfa__rail button small{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color var(--d-ui) ease}
.pfa__rail button[aria-selected="true"]{background:var(--ink);color:#fff}
.pfa__rail button[aria-selected="true"] small{color:#BFBBB5}
.pfa__rail button:active{transform:scale(.98)}
.pfa__rail button:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.pfa__rail button[aria-selected="false"]:hover{background:#F2F0EC}}
.pfa__stage{display:grid;min-width:0}
.pfp{grid-area:1/1;display:grid;align-content:start;gap:clamp(22px,2.6vw,32px);min-width:0;padding:clamp(22px,3vw,40px)}
.pfp:focus-visible{outline:2px solid var(--pink);outline-offset:-6px;border-radius:16px}
.pfa.is-js .pfp{transition:opacity var(--d-ui-l) var(--ease-out),translate var(--d-ui-l) var(--ease-out),visibility 0s linear var(--d-ui-l)}
.pfa.is-js .pfp:not(.is-on){opacity:0;translate:0 8px;visibility:hidden}
.pfa.is-js .pfp.is-on{transition-delay:.04s,.04s,0s}
.pfp__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.pfp__plat{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:999px;background:var(--cream);font-size:13px;font-weight:600}
.pfp__plat img{width:22px;height:22px}
.pfp__per{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.pfp__per svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.pfp__main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.pfp__lab{font-size:14px;font-weight:600;color:var(--muted)}
.pfp__v{margin:6px 0 18px;font-size:clamp(76px,7.4vw,124px);line-height:.9;font-weight:600;letter-spacing:-.06em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pfp__v small{font-size:.52em;letter-spacing:-.03em;vertical-align:.38em;margin:0 .04em}
.pfp__v small.pc{vertical-align:baseline;font-size:.5em}
.pfp__h{margin:0 0 8px;font-size:clamp(20px,1.5vw + 4px,24px);line-height:1.25;font-weight:650;letter-spacing:-.02em}
.pfp__note{max-width:32em;font-size:16px;line-height:1.55;color:var(--muted)}
.pfp__m{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));margin:0;border-top:1px solid var(--line)}
.pfp__m div{min-width:0;padding:18px 16px 2px 20px;border-left:1px solid var(--line)}
.pfp__m div:first-child{border-left:0;padding-left:0}
.pfp__m dt{font-size:13px;color:var(--muted)}
.pfp__m dd{margin:6px 0 0;font-size:clamp(20px,1.4vw + 4px,26px);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* visualisations: only what the reported figures support */
.pv{display:grid;gap:22px;padding:clamp(18px,2.4vw,28px);border-radius:18px;background:#FAF9F7}
.pv__k{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted)}
.pv__leg{display:flex;gap:14px}
.pv__leg span{display:inline-flex;align-items:center;gap:6px}
.pv__leg span::before{content:"";width:9px;height:9px;border-radius:3px;background:#D8D3CC}
.pv__leg span:last-child::before{background:var(--ink)}
.pv__row{display:grid;gap:9px}
.pv__rh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:14.5px;font-weight:600}
.pv__chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;background:#FDE7F0;color:#A3104E;font-size:13px;font-weight:650;font-variant-numeric:tabular-nums}
.pv__chip svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pv__bar{display:grid;grid-template-columns:62px minmax(0,1fr) 52px;align-items:center;gap:12px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.pv__bar b{justify-self:end;font-size:15px;color:var(--ink);font-weight:650}
.pv__tr{position:relative;height:14px;border-radius:7px;background:#EFECE8;overflow:hidden}
.pv__tr i{position:absolute;inset:0;border-radius:7px;background:#D8D3CC;transform-origin:left center;transform:scaleX(var(--s,1))}
.pv__bar.is-cur .pv__tr i{background:var(--ink)}
.pv__bar.is-hl .pv__tr i{background:var(--pink)}
.pv__bar.is-hl b{color:var(--ink)}
/* equation: spend ÷ count = unit cost */
.pv--eq{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.1fr);align-items:center;gap:12px}
.pv__t{display:grid;gap:6px;padding:16px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(20,20,20,.05),0 8px 20px -14px rgba(20,20,20,.25);min-width:0}
.pv__t span{font-size:12.5px;color:var(--muted);line-height:1.25}
.pv__t b{font-size:clamp(24px,2vw + 6px,34px);font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pv__t.is-res{background:var(--ink);color:#fff;box-shadow:0 18px 36px -20px rgba(20,20,20,.6)}
.pv__t.is-res span{color:#C9C5BF}
.pv__op{font-size:22px;color:#B5B0A9;font-weight:500}
/* columns: counts side by side, same scale, no funnel */
.pv--col{grid-template-columns:repeat(var(--n,2),minmax(0,1fr));align-items:end;gap:clamp(14px,2vw,24px);min-height:250px}
.pv__c{display:grid;gap:10px;justify-items:start;min-width:0}
.pv__c b{font-size:clamp(28px,2vw + 10px,40px);font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.pv__c span{font-size:13px;color:var(--muted)}
.pv__cb{width:100%;height:170px;display:flex;align-items:flex-end}
.pv__cb i{display:block;width:100%;height:100%;border-radius:12px 12px 4px 4px;background:#D8D3CC;transform-origin:bottom;transform:scaleY(var(--s,1))}
.pv__c.is-hl .pv__cb i{background:var(--pink)}
.pv__c.is-cur .pv__cb i{background:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .pfa.is-js .pv__tr i,.pfa.is-js .pv__cb i{transition:transform .7s var(--ease-out) .12s}
  .pfa.is-js .pfp:not(.is-on) .pv__tr i{transform:scaleX(0)}
  .pfa.is-js .pfp:not(.is-on) .pv__cb i{transform:scaleY(.02)}
  .pfa.is-js .pv__t{transition:opacity .4s var(--ease-out),translate .5s var(--ease-out)}
  .pfa.is-js .pfp:not(.is-on) .pv__t{opacity:0;translate:0 10px}
  .pfa.is-js .pfp.is-on .pv__t:nth-child(3){transition-delay:.06s}
  .pfa.is-js .pfp.is-on .pv__t:nth-child(5){transition-delay:.12s}
}
@media (max-width:1023px){
  .pfa__body{grid-template-columns:minmax(0,1fr)}
  .pfa__rail{display:flex;gap:6px;padding:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;border-right:0;border-bottom:1px solid var(--line)}
  .pfa__rail::-webkit-scrollbar{display:none}
  .pfa__rh{display:none}
  .pfa__rail button{flex:none;width:auto;min-height:44px;padding:10px 14px;scroll-snap-align:start;flex-direction:column;gap:2px;align-items:flex-start}
  .pfa__rail button b{font-size:14.5px}
  .pfa__rail button small{font-size:12px}
  .pfp__main{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .pfa{border-radius:18px}
  .pfa__top{height:54px;padding:0 16px}
  .pfa__crumb,.pfa__meta{display:none}
  .pfp{padding:20px 16px 22px}
  .pfp__v{font-size:clamp(64px,19vw,92px);margin-bottom:14px}
  .pfp__m{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pfp__m div,.pfp__m div:first-child{padding:14px 12px 4px 0;border-left:0}
  .pfp__m div:nth-child(n+3){border-top:1px solid var(--line)}
  .pv{padding:16px}
  .pv--eq{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);row-gap:10px}
  .pv--eq .pv__op:nth-child(4){display:none}
  .pv--eq .pv__t.is-res{grid-column:1 / -1;grid-template-columns:1fr auto;align-items:center}
  .pv--col{min-height:0}
  .pv__cb{height:130px}
  .pv__bar{grid-template-columns:54px minmax(0,1fr) 44px;gap:10px}
}
@media (max-width:1023px){.pfa__rail{position:relative;scroll-padding-inline:10px}}
@media (max-width:767px){.pv__k > span:first-child{display:none}.pv__k{justify-content:flex-end}}
.pv__cb{flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:10px;height:230px}
.pv__cb i{width:min(100%,148px);height:calc((100% - 50px) * var(--s,1));transform:none}
.pv__c{justify-items:start}
.pfp__v{font-variant-numeric:lining-nums proportional-nums}
@media (prefers-reduced-motion:no-preference){.pfa.is-js .pv__cb i{transform-origin:bottom}.pfa.is-js .pfp:not(.is-on) .pv__cb i{transform:scaleY(.02)}}
@media (max-width:767px){.pv__cb{height:170px}}

/* =====================================================================
   wna-35: motion and interaction refinement
   ===================================================================== */

/* ---------- hero: one coordinated entrance, done by ~900ms ----------
   lines rise through their mask, the artwork opens from the bottom edge after the headline,
   then the lede, actions and note follow on a short stagger */
@media (prefers-reduced-motion:no-preference){
  .js .hx .ln > [data-in]{animation:inLine .62s var(--ease-out) both}
  .js .hx .ln:nth-child(1) > [data-in]{animation-delay:.04s}
  .js .hx .ln:nth-child(2) > [data-in]{animation-delay:.12s}
  .js .hx__lede{animation:inFade .46s var(--ease-out) .26s both !important}
  .js .hx__cta{animation:inFade .46s var(--ease-out) .33s both !important}
  .js .hx__micro{animation:inFade .42s var(--ease-out) .4s both !important}
  .js .hx__img{animation:inArt35 .62s var(--ease-out) .24s both}
}
@keyframes inArt35{from{opacity:0;clip-path:inset(14% 0 0 0 round 0);translate:0 18px;scale:.985}to{clip-path:inset(0 0 0 0 round 0)}}

/* ---------- buttons: the arrow leaves and returns on hover (fine pointers only) ---------- */
.btn .arw{overflow:hidden}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .btn:hover .arw{transform:none}
  .btn:hover .arw svg{animation:arwLoop .42s var(--ease-out)}
}
@keyframes arwLoop{0%{transform:none}45%{transform:translateX(130%)}46%{transform:translateX(-130%);opacity:0}55%{opacity:1}100%{transform:none}}

/* ---------- sliding selection indicator (A/B bar, reports rail) ---------- */
.ab__bar,.pfa__rail{position:relative}
.tind{position:absolute;left:0;top:0;z-index:0;pointer-events:none;border-radius:inherit}
.ab__bar > button,.pfa__rail > button{position:relative;z-index:1}
.ab__bar .tind{border-radius:999px;background:var(--ink);box-shadow:0 6px 14px -8px rgba(20,20,20,.6)}
.pfa__rail .tind{border-radius:12px;background:var(--ink);box-shadow:0 10px 22px -12px rgba(20,20,20,.7)}
.has-ind > button[aria-selected="true"]{background:transparent}
.has-ind .tind{transition:transform .34s var(--ease-out),width .34s var(--ease-out),height .34s var(--ease-out)}
@media (prefers-reduced-motion:reduce){.has-ind .tind{transition:none}}

/* ---------- Keep / Test / Cut: the decision reads like a state change ---------- */
.dec__bar button{transition:background-color .2s ease,color .2s ease,transform var(--d-press) var(--ease-out)}
.dec__bar button[aria-selected="true"]{box-shadow:0 10px 22px -12px rgba(238,42,123,.8)}
@media (prefers-reduced-motion:no-preference){
  .dec.is-js .dec__p{transition:opacity .26s var(--ease-out),translate .32s var(--ease-out),clip-path .38s var(--ease-out)}
  .dec.is-js .dec__p:not(.is-on){opacity:0;translate:0 10px;clip-path:inset(0 0 60% 0)}
  .dec.is-js .dec__p.is-on{clip-path:inset(0 0 0 0)}
  .dec.is-js .dec__p b{transition:scale .3s var(--ease-out) .06s,opacity .2s ease .06s}
  .dec.is-js .dec__p:not(.is-on) b{scale:.85;opacity:0}
  /* A/B: the ad card swaps like a preview pane, the idea line follows */
  .ab.is-js .ab__p{transition:opacity .24s var(--ease-out),translate .3s var(--ease-out),filter .24s ease}
  .ab.is-js .ab__p:not(.is-on){opacity:0;translate:0 10px;filter:blur(3px)}
  .ab.is-js .ab__p .ab__idea{transition:opacity .25s ease .12s}
  .ab.is-js .ab__p:not(.is-on) .ab__idea{opacity:0}
}

/* ---------- Google: search → sponsored result → booking ---------- */
.gstory{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.gstory[hidden]{display:none}
.gstory button{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 12px 6px 10px;border:0;border-radius:999px;background:var(--cream);color:var(--ink);font:600 13px/1 var(--sans);cursor:pointer;overflow:hidden;transition:background-color .2s ease,color .2s ease,transform var(--d-press) var(--ease-out)}
.gstory button:active{transform:scale(.97)}
.gstory button i{position:relative;width:18px;height:3px;border-radius:3px;background:#DAD5CE;overflow:hidden}
.gstory button i::after{content:"";position:absolute;inset:0;background:var(--pink);transform-origin:left;transform:scaleX(0)}
.gstory button.is-done i::after{transform:none}
.gstory button[aria-pressed="true"]{background:var(--ink);color:#fff}
.gstory button[aria-pressed="true"] i{background:#4A4744}
.gstory button[aria-pressed="true"] i::after{transform:none;animation:stepFill var(--sd,1.4s) linear both}
@keyframes stepFill{from{transform:scaleX(0)}}
@media (hover:hover) and (pointer:fine){.gstory button[aria-pressed="false"]:hover{background:#ECE8E2}}
.sx__capt{display:block}
@media (min-width:768px){.sx__vis--g{padding-bottom:clamp(104px,8vw,124px)}}

.gs__q::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:#202124;opacity:0}
.gs__h{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .15s ease}
@media (prefers-reduced-motion:no-preference){
  .is-story .gs__tabs,.is-story .gs__ad,.is-story .gs__org,.is-story .gs__cur,.is-story > .bk{transition:opacity .38s var(--ease-out),translate .5s var(--ease-out),box-shadow .4s ease,background-color .4s ease}
  .is-story[data-step="1"] .gs__q::after{opacity:1;animation:caret .9s steps(1) infinite}
  .is-story[data-step="1"] .gs__tabs,.is-story[data-step="1"] .gs__ad,.is-story[data-step="1"] .gs__org{opacity:0;translate:0 10px}
  .is-story[data-step="1"] .gs__ad{box-shadow:none;background:none}
  .is-story[data-step="1"] .gs__cur,.is-story[data-step="1"] .gs__cur{opacity:0;translate:26px 34px}
  .is-story[data-step="2"] .gs__ad{transition-delay:.08s}
  .is-story[data-step="2"] .gs__org{transition-delay:.16s}
  .is-story[data-step="2"] .gs__cur{transition:opacity .3s ease .5s,translate .7s var(--ease-io) .5s;animation:curClick .26s ease 1.3s}
  .is-story[data-step="2"] .gs__h{text-decoration-color:#1A0DAB;transition-delay:1.3s}
  .is-story[data-step="3"] .gs__h{text-decoration-color:#1A0DAB}
  .sx .is-story[data-step="1"] > .bk,.sx .is-story[data-step="2"] > .bk{opacity:0;translate:0 18px}
  .sx .sx__p.is-on .is-story[data-step="3"] > .bk{transition-delay:.05s}
  .is-story[data-step="3"] .bk__slots .is-on{animation:slotPick .34s var(--ease-out) .45s both}
  .is-story[data-step="3"] .bk__btn{animation:btnPress .3s var(--ease-out) 1s}
  .is-story[data-step="3"] .bw{transition:filter .5s ease .1s;filter:saturate(.85) brightness(.98)}
}
@keyframes curClick{50%{scale:.82}}
@keyframes slotPick{from{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}}
@keyframes btnPress{50%{transform:scale(.96)}}

/* ---------- campaign performance: product-grade transitions ---------- */
.pfa__rail button[aria-selected="true"]{transition:color .2s ease .05s}
@media (prefers-reduced-motion:no-preference){
  .pfa.is-js .pfp{transition:opacity .28s var(--ease-out),translate .34s var(--ease-out),filter .28s ease,visibility 0s linear .34s}
  .pfa.is-js .pfp:not(.is-on){opacity:0;translate:0 10px;filter:blur(2px);transition-duration:.14s,.14s,.14s,0s;transition-delay:0s,0s,0s,.14s}
  .pfa.is-js .pfp.is-on{transition-delay:.06s,.06s,.06s,0s}
  .pfa.is-js .pfp__m div{transition:opacity .35s var(--ease-out),translate .4s var(--ease-out)}
  .pfa.is-js .pfp:not(.is-on) .pfp__m div{opacity:0;translate:0 8px}
  .pfa.is-js .pfp.is-on .pfp__m div:nth-child(1){transition-delay:.14s}
  .pfa.is-js .pfp.is-on .pfp__m div:nth-child(2){transition-delay:.19s}
  .pfa.is-js .pfp.is-on .pfp__m div:nth-child(3){transition-delay:.24s}
  .pfa.is-js .pfp.is-on .pfp__m div:nth-child(4){transition-delay:.29s}
  .pfa.is-js .pv__chip{transition:opacity .3s ease .35s,scale .35s var(--ease-out) .35s}
  .pfa.is-js .pfp:not(.is-on) .pv__chip{opacity:0;scale:.9}
}
.pfp__v .n{display:inline-block}
.pfa{box-shadow:0 0 0 1px rgba(20,20,20,.07),0 1px 2px rgba(20,20,20,.04),0 24px 48px -32px rgba(20,20,20,.28),0 70px 140px -70px rgba(20,20,20,.35)}
.pfp__head{padding-bottom:18px;border-bottom:1px solid #F1EFEC}
.pfp__lab{display:flex;align-items:center;gap:8px}
.pfp__lab::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 4px rgba(238,42,123,.14)}

/* ---------- editorial reveals: headings open through a mask, question marks land last ---------- */
.rv-mask{clip-path:inset(0 0 0 0)}
.q-pop{display:inline-block;transform-origin:50% 85%}

/* ---------- hero headline (wna-37), in the style of the October 2025 site: MORE / CLIENTS? / why not.
   The rotating word slides inside a clip; the pink question mark follows its width with a transform,
   so nothing reflows. No JS or reduced motion: "clients?" stays. ---------- */
.hx .hx__h{text-transform:uppercase;line-height:.84;letter-spacing:-.05em;font-size:clamp(50px,8.6vw,88px);display:inline-block;margin-bottom:clamp(28px,3vw,44px)}
.hx .h-a,.hx .h-b{display:block;white-space:nowrap}
.hx .h-b{margin-top:.02em}
.rot{display:inline-block;position:relative;vertical-align:bottom;clip-path:inset(-.12em -4em -.05em -.1em)}
.rot__w:not(:first-child){display:none}
.js .rot__w{display:inline-block;transform:translateY(112%);transition:transform .6s var(--e-in)}
.js .rot__w:not(:first-child){position:absolute;left:0;bottom:0}
.js .rot__w.is-on{transform:none}
.js .rot__w.is-out{transform:translateY(-125%)}
.js .rot__w:not(.is-on):not(.is-out){visibility:hidden}
.qshift{display:inline-block;transition:transform .6s var(--e-in)}
.hx__h .q{height:1.02em;width:auto;vertical-align:-.17em;margin-left:-.01em;overflow:visible}
.hx .h-c{display:block;text-align:right;font:italic 500 .92em/.8 var(--serif);text-transform:none;letter-spacing:-.02em;transform:rotate(-4deg);transform-origin:right center;margin-top:.02em;padding-bottom:.08em}
@media (min-width:1024px){.hx .hx__h{font-size:clamp(50px,5.8vw,82px)}}
@media (max-width:767px){.hx .hx__h{font-size:min(13.2vw,64px)}.hx .h-c{transform:rotate(-3deg)}}
@media (prefers-reduced-motion:no-preference){
  .js .hx .h-a{animation-delay:.06s}.js .hx .h-b{animation-delay:.14s}.js .hx .h-c{animation-delay:.3s}
  .js .hx__h .q{animation:qPop .6s cubic-bezier(.3,1.5,.5,1) .45s both}
  @keyframes qPop{from{opacity:0;scale:.9;rotate:-10deg}}
}
@media (prefers-reduced-motion:reduce){.rot__w,.qshift{transition:none !important}}
.fx__h--long{font-size:clamp(44px,5.2vw,92px);line-height:.95}

/* ---------- discovery call page (/book-a-call/, noindex, linked only from review emails) ---------- */
.dc__tx{max-width:46em}
.dc__cal{margin-top:clamp(28px,4vw,48px)}
.dc__frame{background:var(--white);border:1.5px solid var(--ink);border-radius:var(--r-ui);box-shadow:var(--shadow);overflow:hidden}
.dc__frame iframe{display:block;width:100%;height:880px;border:0}
@media (min-width:768px){.dc__frame iframe{height:720px}}
@media (min-width:1024px){.dc__frame iframe{height:640px}}
.dc__alt{margin-top:16px;font-size:15px;color:var(--muted)}
.dc__alt.is-warn{color:var(--ink);font-weight:600}

/* =====================================================================
   wna-38: layout and spacing refinement (no visual-identity changes)
   ===================================================================== */

/* ---------- tabbed stages: height of the open panel, not the tallest one ----------
   Panels used to share one grid cell, so every stage was as tall as its longest panel
   (Meta under Google, the shortest report under the longest). Inactive panels now leave
   the flow; wna-38.js eases the stage height on a switch. */
[data-tabs].is-js .tabs-stage{position:relative}
[data-tabs].is-js .tabs-stage > [role="tabpanel"]:not(.is-on){position:absolute;top:0;left:0;right:0}
.tabs-stage.is-sizing{overflow:clip;transition:height .34s var(--ease-out)}
@media (prefers-reduced-motion:reduce){.tabs-stage.is-sizing{transition:none}}

/* ---------- hero: the collage box follows the artwork (it was forced square on phones) ---------- */
.hx__art[data-collage="image"]{aspect-ratio:auto}

/* ---------- services: on one column both platforms read copy first ---------- */
@media (max-width:1023px){.sx__p--m .sx__side{order:0}}
.sv__foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.sv__foot .tlink,.sv__foot .sv__or{margin-left:0}
.sv__foot .tlink{min-height:44px}
@media (max-width:767px){.sv__foot{flex-direction:column;align-items:flex-start;gap:0}.sv__foot > span:first-child{margin-bottom:4px}.sv__or{display:none}}
@media (pointer:coarse){.gstory button{min-height:44px}}

/* ---------- what you get: modules fit together instead of stretching to the tallest neighbour ---------- */
@media (min-width:768px) and (max-width:1023px){
  .bx{grid-auto-flow:row dense}
  .bx__m--ab{grid-column:span 7}
  .bx__m--sup{grid-column:span 5;align-content:center}
}
@media (min-width:1024px){
  .bx{grid-template-rows:auto auto auto}
  .bx__m--dec{grid-column:1 / 8;grid-row:1}
  .bx__m--ab{grid-column:8 / -1;grid-row:1 / 3}
  .bx__m--rep{grid-column:1 / 8;grid-row:2 / 4}
  .bx__m--sup{grid-column:8 / -1;grid-row:3;align-content:center}
}
@media (max-width:479px){.rep__top{flex-direction:column;align-items:flex-start;gap:2px}}

/* ---------- campaign performance: three figures sit on one row on phones ---------- */
@media (max-width:767px){
  .pfp__m[style*="--n:3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pfp__m[style*="--n:3"] div:nth-child(n+3){border-top:0}
  .pfp__m div,.pfp__m div:first-child{padding-right:8px}
  .pfp__m dt{font-size:12.5px;line-height:1.3}
  .pfp__m dd{font-size:clamp(17px,4.8vw,21px)}
}

/* ---------- pricing: the subgrid has a row for every part of a plan (the ad-spend line was missing),
   so fee, notes, lists and buttons line up across the three cards ---------- */
@media (min-width:1024px){
  .pr__g{grid-template-rows:auto auto auto auto 1fr auto}
  .plan{display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:0}
}

/* ---------- Pilates: journey visuals size to their content on phones; no inline gap under the hero photo ---------- */
.pl-art picture{display:block}
@media (max-width:767px){.jr__v{min-height:0}}

/* ---------- Budget Calculator: the empty result panel no longer reserves 340px on one column ---------- */
@media (max-width:1023px){.fc__out{min-height:0}.fc__wait{margin:0}}

/* ---------- dark section straight into the dark footer (Free Review): one clear seam ---------- */
main:has(> .rvx:last-child) + .foot,main:has(> .s--ink:last-child) + .foot,main:has(> #fc-result:not([hidden]):last-child) + .foot{border-top:1px solid #34312E}
.rvx:last-child,#fc-result .fc-cta:last-child{padding-bottom:clamp(56px,6vw,96px)}

/* ---------- footer: copyright and social links on one baseline ---------- */
.foot__end{align-items:center}
.foot__end > p:first-child{min-height:44px;display:flex;align-items:center}
.foot__end > p{margin:0}
.pfp__m div{display:flex;flex-direction:column}
.pfp__m dd{margin-top:auto;padding-top:6px}
.rep__top{flex-wrap:wrap;row-gap:2px}
.rep__top b{white-space:nowrap}
@media (min-width:1024px) and (max-width:1279px){.bx__m--rep{grid-template-columns:minmax(0,1fr)}}

/* ---------- form headings had no leading of their own and inherited body leading (1.55) ---------- */
.ap-step__h,.rv-head h2{line-height:1.08;text-wrap:balance}
.legal__h{line-height:1.2}