*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--page);color:var(--text);font-family:'Open Sans',Arial,sans-serif;font-size:1rem;line-height:1.6;overflow-x:clip}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
sup{font-size:.55em;line-height:0;vertical-align:baseline;position:relative;top:-.55em;margin-right:.14em}
.sr-only{position:absolute;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:#fff;padding:10px 16px;border-radius:8px}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.hp{position:absolute;left:-9999px}
#mobile-nav[hidden]{display:none}
#nav-toggle{cursor:pointer}
details summary{list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}
details[open] .plus{transform:rotate(45deg)}
.plus{display:inline-block;transition:transform .18s ease}
.a-date,.a-title,.a-sum,.a-by{display:block}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
:root{--teal:#037E8C;--deep:#0B5563;--ink:#212D3A;--lime:#91C702;--soft:#F5F8FA;--page:#fff;--text:#212D3A;--focus:#552062;
--logo-blue:#19aaba;--logo-gray:#54575b;--logo-green:#8cb80f;--logo-lightgreen:#62a342;--logo-orange:#dc500a;
--d:'Parkinsans','Arial',sans-serif;--k:1;--ls:-.03em;--dw:700;--panel:#037E8C;--on:#fff;--cta:#91C702;--cta-text:#212D3A;--pad:clamp(20px,4vw,64px);--r:clamp(24px,3vw,44px);--inset:clamp(8px,1vw,14px);
--blob:58% 42% 46% 54%/52% 48% 54% 46%}
h1,h2,h3,.btn,.btn-head,.btn-signin,.nav-main,.brand-mbti,.price,.num,.letters,.a-title,.hiring-title,.plan-badge,summary,.news button,.foot-col h2,figcaption{font-family:var(--d)}
h2{font-size:clamp(1.95rem,4.2vw,3.9rem);font-weight:700;line-height:1.08;letter-spacing:-.03em}
h3{font-size:clamp(1.08rem,1.5vw,1.35rem);font-weight:700;line-height:1.2;letter-spacing:-.02em}
main>section{margin:var(--inset)}
.sec-in{padding:clamp(52px,7vw,104px) var(--pad);max-width:1480px;margin:0 auto}
.eyebrow{font-weight:700;margin-bottom:12px}
.text-link{font-weight:700;text-underline-offset:4px;text-decoration-thickness:2px;display:inline-flex;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:12px 26px;border-radius:999px;font-size:.92rem;font-weight:600;text-decoration:none;border:2px solid transparent;transition:background-color .15s,color .15s;text-align:center;line-height:1.25;letter-spacing:-.01em}
.btn-primary,.btn-secondary{background:var(--ink);color:#fff}.btn-primary:hover,.btn-secondary:hover{background:var(--deep)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}.btn-ghost:hover{background:var(--ink);color:#fff}

/* header: floating pill */
.site-head{position:sticky;top:0;z-index:50;padding:calc(var(--inset) + 8px) calc(var(--inset) + 10px) 0;margin-bottom:calc(-1*(var(--inset) + 8px) - 64px);pointer-events:none}
.head-row{pointer-events:auto;display:flex;align-items:center;gap:18px;height:64px;padding:0 10px 0 22px;background:#fff;border-radius:999px;max-width:1480px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand-mbti{font-size:1.2rem;font-weight:800;letter-spacing:-.03em}
.co-logo{height:22px;width:auto;display:none}
.nav-main{display:none}
.nav-main ul{display:flex;gap:2px}
.nav-main a{font-size:.8rem;font-weight:500;text-decoration:none;padding:9px 12px;border-radius:999px;letter-spacing:-.01em}
.nav-main a:hover{background:var(--soft)}
.head-actions{display:flex;align-items:center;gap:6px}
.btn-signin{display:none;font-size:.8rem;font-weight:500;text-decoration:none;padding:9px 12px;border-radius:999px}
.btn-signin:hover{background:var(--soft)}
.btn-head{background:var(--ink);color:#fff;font-size:.8rem;font-weight:600;text-decoration:none;border-radius:999px;padding:13px 18px;white-space:nowrap}
.btn-head:hover{background:var(--deep)}
#nav-toggle{width:44px;height:44px;display:grid;place-items:center;background:var(--soft);border:0;border-radius:50%;color:var(--ink);font-size:1.3rem}
#mobile-nav{pointer-events:auto;background:#fff;border-radius:28px;margin-top:8px;padding:16px 24px}
#mobile-nav a{display:block;padding:10px 0;font-family:var(--d);font-size:1.1rem;font-weight:600;text-decoration:none}
@media(min-width:640px){.co-logo{display:block}.btn-signin{display:block}}
@media(min-width:1240px){.nav-main{display:block}#nav-toggle{display:none}}

/* hero */
.hero{background:var(--panel);color:var(--on);border-radius:var(--r);overflow:hidden}
.hero-in{display:grid;grid-template-columns:1fr;max-width:1480px;margin:0 auto;padding:108px var(--pad) 32px}
h1{font-size:clamp(2.45rem,4.7vw,5.6rem);font-weight:800;line-height:1.02;letter-spacing:-.045em}
h1 span{display:block}
.hero-eyebrow{font-weight:700;margin-bottom:14px}
.hero-lede{font-size:clamp(1.06rem,1.4vw,1.2rem);line-height:1.5;margin-top:20px;max-width:32em;font-weight:600}
.offer{margin-top:24px}
.offer-btns{display:flex;flex-wrap:wrap;gap:10px}
.offer-btns .btn{width:100%}
.offer-note{font-size:.92rem;font-weight:600;margin-top:14px;max-width:34em}
.proof{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.proof li{background:#fff;border-radius:999px;padding:7px 16px;font-size:.84rem;font-weight:600;line-height:1.3}
.hero-photo{position:relative;margin:32px auto 0;width:min(100%,560px);aspect-ratio:1/1.08}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 40%;border-radius:var(--blob)}
@media(min-width:1000px){
 .hero-in{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:40px;grid-template-rows:auto auto auto 1fr;padding-top:132px;padding-bottom:48px}
 .hero-eyebrow,h1,.hero-lede,.offer{grid-column:1}
 .hero-photo{grid-column:2;grid-row:1/5;margin:0;width:100%;align-self:center}
 .offer-btns .btn{width:auto}
}

/* choose */
.choose-head{display:grid;gap:12px;margin-bottom:36px;max-width:40em}
.choose-head p{font-size:1.1rem}
.plans{display:grid;gap:12px}
.plan{position:relative;background:var(--soft);border-radius:var(--r);padding:12px;display:flex;flex-direction:column}
.plan img{width:100%;aspect-ratio:4/3.4;object-fit:cover;border-radius:calc(var(--r) - 10px)}
.plan-body{padding:20px 12px 12px;display:flex;flex-direction:column;gap:10px;flex:1}
.plan-for{font-weight:700;font-size:.94rem}
.plan h3 a{text-decoration:none}.plan h3 a:hover{text-decoration:underline}
.plan h3{font-size:1.45rem}
.price{font-size:1.7rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.unit{font-family:'Open Sans',sans-serif;font-size:.92rem;font-weight:600;letter-spacing:0}
.ticks li{padding:5px 0 5px 30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23037E8C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat 2px .6em/18px}
.plan-cta{display:grid;gap:12px;justify-items:center;margin-top:auto;padding-top:14px}
.plan-cta .btn{width:100%}
.plan-badge{position:absolute;top:24px;right:24px;z-index:2;width:104px;height:104px;display:grid;place-items:center;text-align:center;background:var(--lime);color:var(--ink);font-weight:700;font-size:.82rem;line-height:1.15;border-radius:var(--blob);transform:rotate(-8deg);padding:10px}
.plan-you{background:var(--panel);color:var(--on)}
.plan-you .ticks li{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
html[data-hero="light"] .plan-you .ticks li{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23037E8C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.plan-you .btn-primary{background:var(--cta);color:var(--cta-text)}.plan-you .btn-primary:hover{background:#fff;color:var(--ink)}
html[data-hero="light"] .plan-you .btn-primary:hover{background:var(--deep);color:#fff}
@media(min-width:900px){.choose-head{grid-template-columns:1fr auto;max-width:none;align-items:end}.choose-head h2{grid-column:1/-1}
 .plans{grid-template-columns:1.14fr 1fr 1fr}}
.hiring{display:grid;gap:12px;margin-top:12px;padding:clamp(24px,3vw,40px);background:var(--soft);border-radius:var(--r)}
.hiring-title{font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.hiring-body{display:grid;gap:12px}
@media(min-width:900px){.hiring{grid-template-columns:1fr 2fr;gap:40px}}

/* stories */
.sec-head{display:grid;margin-bottom:36px}
.sec-head .text-link{margin-top:14px;justify-self:start}
.quotes{display:grid;gap:12px}
.quote{background:var(--soft);border-radius:var(--r);padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:18px}
.avatar{width:92px;height:92px;background:var(--teal);color:#fff;border-radius:var(--blob);display:grid;place-items:center}
.quote:nth-child(1) .avatar{background:var(--deep);color:#fff}
.quote:nth-child(3) .avatar{background:var(--lime);color:var(--ink)}
.qmark{font-family:var(--d);font-size:3.6rem;font-weight:700;line-height:1;transform:translateY(.2em)}
.quote blockquote{font-size:1.1rem;line-height:1.55;flex:1}
.quote figcaption{font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
@media(min-width:900px){.sec-head{grid-template-columns:1fr auto;align-items:end}.sec-head .eyebrow{grid-column:1/-1}.sec-head .text-link{margin:0}.quotes{grid-template-columns:repeat(3,1fr)}}

/* how */
.how{background:var(--deep);color:#fff;border-radius:var(--r)}
.steps{display:grid;gap:32px;margin-bottom:32px}
.num{width:84px;height:84px;display:grid;place-items:center;background:var(--lime);color:var(--ink);font-size:2.2rem;font-weight:800;border-radius:var(--blob)}
.steps h3{margin:16px 0 8px;font-size:clamp(1.2rem,1.7vw,1.5rem)}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:36px}}

/* why */
.why-in{padding-bottom:28px}
.reasons{display:grid;gap:12px}
.reasons>div{background:var(--soft);border-radius:var(--r);padding:clamp(22px,2.6vw,36px)}
.reasons h3{margin-bottom:8px}
@media(min-width:900px){.reasons{grid-template-columns:repeat(3,1fr)}}
.band{margin:0 var(--pad);max-width:1352px}
@media(min-width:1500px){.band{margin-inline:auto}}
.band img{width:100%;height:clamp(240px,44vw,620px);object-fit:cover;object-position:50% 40%;border-radius:var(--r)}

/* what if */
.whatif-grid{display:grid;gap:var(--inset)}
.whatif-grid>div{padding:clamp(26px,3.4vw,52px);min-height:clamp(240px,26vw,380px);display:flex;flex-direction:column;justify-content:space-between;gap:20px;border-radius:var(--r)}
.whatif-grid>div:nth-child(1){background:var(--panel);color:var(--on)}
.whatif-grid>div:nth-child(2){background:var(--ink);color:#fff}
.whatif-grid>div:nth-child(3){background:var(--teal);color:#fff}
.whatif-grid>div:nth-child(4){background:var(--deep);color:#fff}
.whatif-grid h3{font-size:clamp(1.55rem,2.9vw,2.75rem);line-height:1.1;letter-spacing:-.035em;font-weight:700}
.whatif-grid p{font-size:1.1rem;font-weight:600;max-width:26em}
@media(min-width:760px){.whatif-grid{grid-template-columns:1fr 1fr}}

/* gift */
.gift{background:var(--soft);border-radius:var(--r);overflow:hidden}
.gift-in{display:grid;padding:12px}
.gift img{width:100%;height:100%;min-height:260px;object-fit:cover;border-radius:calc(var(--r) - 10px)}
.gift-copy{padding:clamp(28px,5vw,72px) clamp(12px,4vw,60px);display:grid;gap:14px;align-content:center}
.gift-copy .eyebrow{margin:0}.gift-copy>p:not(.eyebrow){font-size:1.1rem;max-width:32em}
.gift-btns{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:8px}
@media(min-width:900px){.gift-in{grid-template-columns:1fr 1fr}}

/* types */
.type-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.type-grid a{display:flex;flex-direction:column;gap:6px;min-height:118px;padding:16px;background:var(--soft);border-radius:22px;text-decoration:none;transition:background-color .15s,color .15s}
.type-grid a:hover{background:var(--panel);color:var(--on)}
.letters{display:flex;font-size:clamp(1.5rem,3vw,2.7rem);font-weight:800;letter-spacing:-.05em;line-height:1.1}
.tname{text-transform:capitalize;font-weight:600;font-size:.92rem;line-height:1.3}
@media(min-width:760px){.type-grid{grid-template-columns:repeat(4,1fr)}.type-grid a{min-height:150px;padding:22px}}

/* faq */
.faq-in{display:grid;gap:28px;max-width:1040px}
.faq details{background:var(--soft);border-radius:26px;margin-bottom:8px}
summary{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 24px;font-size:clamp(.98rem,1.3vw,1.15rem);font-weight:600;line-height:1.3;letter-spacing:-.015em}
.plus{font-size:1.2rem;flex:none;width:36px;height:36px;display:grid;place-items:center;background:var(--ink);color:#fff;border-radius:50%}
.answer{padding:0 24px 22px;display:grid;gap:12px}

/* articles */
.article-grid{display:grid;gap:28px}
.article{text-decoration:none;display:flex;flex-direction:column;gap:8px}
.article img{width:100%;aspect-ratio:1/.86;object-fit:cover;border-radius:var(--r);margin-bottom:8px}
.a-date,.a-by{font-size:.9rem;font-weight:600}
.a-title{font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:700;line-height:1.25;letter-spacing:-.02em}
.article:hover .a-title{text-decoration:underline}
@media(min-width:900px){.article-grid{grid-template-columns:repeat(3,1fr);gap:16px}}

/* final */
.final{background:var(--panel);color:var(--on);border-radius:var(--r)}
.final-in{text-align:center;display:grid;justify-items:center}
.final h2{font-size:clamp(2.2rem,6.2vw,5.8rem);font-weight:800;line-height:1.04;letter-spacing:-.045em}
.final-sub{font-size:1.14rem;font-weight:600;margin:18px 0 26px}
.final-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* footer */
.site-foot{background:var(--ink);color:#fff;margin:var(--inset);border-radius:var(--r);--logo-blue:#fff;--logo-gray:#fff;--logo-green:#fff;--logo-lightgreen:#fff;--logo-orange:#fff}
.site-foot .sec-in{padding-block:clamp(48px,5vw,72px) 28px}
.news{display:grid;gap:22px;margin-bottom:52px}
.news h2{font-size:clamp(1.55rem,3vw,2.7rem);margin-bottom:12px}
.news-row{display:flex;gap:8px;flex-wrap:wrap}
.news-row input{flex:1 1 200px;min-width:0;height:56px;padding:0 22px;border:0;border-radius:999px;background:#fff;color:var(--ink);font:inherit}
.news-row input::placeholder{color:#54575b}
.news button{height:56px;padding:0 26px;border:0;border-radius:999px;background:var(--lime);color:var(--ink);font-size:.92rem;font-weight:600;cursor:pointer}
.news-notice{font-size:.8rem;line-height:1.5;margin-top:14px}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px 24px}
.foot-brand{grid-column:1/-1}.foot-logo{display:block;height:38px;margin-bottom:12px}
.social{display:flex;gap:8px;margin-top:14px}
.social a{width:44px;height:44px;display:grid;place-items:center;font-size:1.1rem;background:#fff;color:var(--ink);border-radius:var(--blob)}
.social a:hover{background:var(--lime)}
.foot-col h2{font-size:.92rem;font-weight:700;letter-spacing:-.01em;line-height:1.2;margin-bottom:10px}
.foot-col a{display:inline-block;padding:4px 0;text-decoration:none}.foot-col a:hover{text-decoration:underline}
.foot-legal{margin-top:36px;font-size:.84rem;display:grid;gap:10px}
.foot-legal ul{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-legal a{display:inline-flex;align-items:center;gap:6px}
@media(min-width:900px){.news{grid-template-columns:1fr 1fr;gap:64px}.foot-grid{grid-template-columns:2fr repeat(4,1fr)}.foot-brand{grid-column:auto}}

/* --- C overrides: type scale tuned for narrower faces --- */
html[data-hero="deep"]{--panel:#0B5563}
html[data-hero="light"]{--panel:#DDF3F5;--on:#212D3A;--cta:#212D3A;--cta-text:#fff}
h1,h2,h3,.whatif-grid h3,.final h2,.news h2,.hiring-title,.a-title,.letters,.price,summary,.foot-col h2,.brand-mbti{letter-spacing:var(--ls)}
h2{font-size:calc(clamp(2.2rem,4.7vw,4.3rem)*var(--k));line-height:1.04}
h3{font-size:calc(clamp(1.25rem,1.7vw,1.55rem)*var(--k))}
.btn,.btn-head,.btn-signin,.news button{letter-spacing:0;font-weight:600}
.btn{font-size:1.05rem}
.nav-main a,.btn-signin,.btn-head{font-size:1rem}
.brand-mbti{font-size:1.5rem}
.plan h3{font-size:calc(1.7rem*var(--k))}
.price{font-size:calc(2rem*var(--k))}
.steps h3{font-size:calc(clamp(1.35rem,1.9vw,1.7rem)*var(--k))}
.whatif-grid h3{font-size:calc(clamp(1.8rem,3.3vw,3.1rem)*var(--k));line-height:1.06}
.letters{font-size:calc(clamp(1.8rem,3.4vw,3.1rem)*var(--k));font-weight:700}
.a-title{font-size:calc(clamp(1.2rem,1.6vw,1.45rem)*var(--k))}
.hiring-title{font-size:calc(clamp(1.3rem,1.9vw,1.7rem)*var(--k))}
summary{font-size:calc(clamp(1.1rem,1.4vw,1.28rem)*var(--k))}
.final h2{font-size:calc(clamp(2.55rem,6.6vw,6.2rem)*var(--k));font-weight:700;line-height:1.02}
.news h2{font-size:calc(clamp(1.8rem,3.3vw,3rem)*var(--k))}
.foot-col h2{font-size:1.1rem}
.quote figcaption{font-size:1.2rem}
.plan-badge{font-size:.95rem}
.num{font-weight:700}
.news button{font-size:1.05rem}
.final .btn-primary{background:var(--cta);color:var(--cta-text)}
.final .btn-primary:hover{background:#fff;color:var(--ink)}
.final .btn-ghost{border-color:var(--on);color:var(--on)}
.final .btn-ghost:hover{background:var(--on);color:var(--panel)}
html[data-hero="light"] .final .btn-primary:hover{background:var(--deep);color:#fff}

/* --- C hero: one idea, one button, proof demoted to a quiet strip --- */
.hero-in{padding-top:112px;padding-bottom:0}
h1{font-size:calc(clamp(2.55rem,6.1vw,6rem)*var(--k));font-weight:var(--dw);line-height:1.03;letter-spacing:var(--ls)}
.hero-eyebrow{font-weight:600;font-size:1rem;margin-bottom:12px}
.hero-lede{font-weight:400;font-size:clamp(1.08rem,1.35vw,1.22rem);margin-top:18px;max-width:30em}
.offer{margin-top:26px}
.offer-btns{display:grid;gap:12px;justify-items:center}
.offer-btns .btn{width:100%}
.offer-btns .btn-primary{background:var(--cta);color:var(--cta-text)}
.offer-btns .btn-primary:hover{background:#fff;color:var(--ink)}
html[data-hero="light"] .offer-btns .btn-primary:hover{background:var(--deep);color:#fff}
.offer-btns .btn-ghost{min-height:44px;width:auto;padding:6px 4px;border:0;border-radius:0;background:none;color:var(--on);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.offer-btns .btn-ghost:hover{background:none;color:var(--on);text-decoration-thickness:4px}
.offer-note{font-size:.88rem;font-weight:400;margin-top:10px;text-align:center;max-width:none}
.proof{display:grid;gap:4px;margin-top:20px}
.proof li{background:none;border-radius:0;padding:0;font-size:.9rem;font-weight:600}
.hero-photo{width:min(100%,520px);margin-top:32px;margin-bottom:32px}
.hero-photo img{object-position:50% 30%}
@media(min-width:1000px){
 .hero-in{grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);column-gap:32px;grid-template-rows:auto auto auto auto auto auto;padding-top:128px}
 .hero-eyebrow,h1,.hero-lede,.offer-btns,.offer-note{grid-column:1}
 .offer{display:contents}
 .offer-btns{display:flex;align-items:center;gap:24px;margin-top:28px}
 .offer-btns .btn{width:auto}
 .offer-note{text-align:left;margin-top:12px}
 .hero-photo{grid-column:2;grid-row:1/6;align-self:center;margin:0 0 0 auto;width:min(100%,470px)}
 .proof{grid-column:1/-1;grid-row:6;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:24px;margin-top:32px;padding-bottom:28px}
}

html[data-font="rubik"]{--d:'Rubik','Arial',sans-serif;--k:1.03;--ls:-.022em;--dw:700}
h2,h3,.final h2,.whatif-grid h3,.price,.letters,.a-title,.hiring-title,summary,.news h2,.brand-mbti{font-weight:var(--dw)}

.choose .sec-in{padding-block:clamp(44px,5vw,72px)}
.choose-head{gap:6px;margin-bottom:22px}
.choose-head p{font-size:1rem}
.plans{gap:10px}
.plan{padding:8px;border-radius:26px}
.plan img{aspect-ratio:16/8;border-radius:20px}
.plan-body{padding:14px 10px 8px;gap:5px}
.plan-for{font-size:.84rem}
.plan h3{font-size:calc(1.32rem*var(--k))}
.price{font-size:calc(1.5rem*var(--k))}
.unit{font-size:.84rem}
.ticks{font-size:.9rem;line-height:1.35;margin-top:2px}
.ticks li{padding:3px 0 3px 24px;background-size:15px;background-position:1px .42em}
.plan-cta{gap:4px;padding-top:10px}
.plan-cta .btn{min-height:46px;padding:8px 10px;font-size:.94rem;white-space:nowrap}
.plan-cta .text-link{min-height:30px;font-size:.9rem}
.plan-badge{top:15px;right:15px;width:76px;height:76px;font-size:.74rem;padding:6px}
.hiring{margin-top:10px;padding:18px 22px;border-radius:26px;gap:8px}
.hiring-title{font-size:calc(clamp(1.05rem,1.4vw,1.25rem)*var(--k))}
.hiring-body{font-size:.92rem;gap:6px}
@media(min-width:640px) and (max-width:1039px){
 .plans{grid-template-columns:1fr}
 .plan{flex-direction:row;align-items:stretch}
 .plan img{width:36%;aspect-ratio:auto;object-fit:cover;flex:none}
 .plan-body{padding:10px 14px 8px;flex:1;min-width:0}
}
@media(min-width:1040px){.plans{grid-template-columns:repeat(3,minmax(0,1fr))}
 .plan-cta .btn{font-size:clamp(.82rem,1.02vw,.96rem)}
}
@media(min-width:1040px){.choose-head{max-width:none}}
@media(max-width:379px){.plan-cta .btn{font-size:.8rem;padding-inline:6px}}
@media(max-width:339px){.plan-cta .btn{white-space:normal}}
@media(min-width:900px){.hiring{grid-template-columns:1fr 2.6fr;gap:28px}}

.hero-in{padding-bottom:0}
.proof-strip{margin-block:0}
.proof-strip .proof{display:grid;grid-template-columns:1fr;gap:14px;grid-column:auto;grid-row:auto;justify-content:stretch;max-width:1480px;margin:0 auto;padding:26px var(--pad) 10px}
.proof-strip .proof li{display:flex;align-items:center;gap:12px;font-family:var(--d);font-weight:600;font-size:calc(1.02rem*var(--k));letter-spacing:-.01em;line-height:1.25}
.proof-strip .proof li::before{content:"";flex:none;width:32px;height:32px;border-radius:var(--blob);background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center/17px}
@media(min-width:1000px){
 .hero-in{padding-bottom:44px}
 .proof-strip .proof{grid-template-columns:repeat(3,auto);justify-content:space-between;gap:0;padding-block:30px 12px}
 .proof-strip .proof li+li{border-left:2px solid #DDF3F5;padding-left:clamp(28px,4vw,64px);margin-left:clamp(28px,4vw,64px)}
}
.choose .sec-in{padding-top:clamp(36px,3.6vw,52px)}

.whatif,.gift{width:min(calc(100% - 2*(var(--inset) + var(--pad))),calc(1480px - 2*var(--pad)));margin-inline:auto}

.whatif-grid h3{text-wrap:balance}

.plan-body{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:3px;align-content:start;grid-template-rows:auto auto auto 1fr}
.plan-for{grid-column:1;grid-row:1}
.plan h3{grid-column:1;grid-row:2;align-self:start}
.price{grid-column:2;grid-row:1/3;align-self:start;text-align:right;color:var(--teal)}
.price>span:first-child{display:block;font-size:calc(1.7rem*var(--k));line-height:1.05}
.price .unit{display:block;margin-top:2px;color:var(--ink);font-size:.8rem;line-height:1.2;white-space:nowrap}
.ticks{grid-column:1/-1;grid-row:3;margin-top:10px}
.plan-cta{grid-column:1/-1;grid-row:4;align-self:end}

.plan-you{box-shadow:0 0 0 3px var(--teal)}
.plan-badge{top:-14px;right:-8px;width:96px;height:96px;background:#C2410C;color:#fff;font-size:.88rem;font-weight:700;line-height:1.1;transform:rotate(-8deg)}
.plans{padding-top:14px}

.proof-strip .proof li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.proof-strip .proof li:nth-child(1)::before{background-color:var(--logo-green)}
.proof-strip .proof li:nth-child(2)::before{background-color:var(--logo-orange)}
.proof-strip .proof li:nth-child(3)::before{background-color:var(--logo-blue)}

@media(max-width:1239px){.plan h3{font-size:calc(1.1rem*var(--k))}.price>span:first-child{font-size:calc(1.5rem*var(--k))}.plan-body{column-gap:10px}}
@media(max-width:379px){.plan h3{font-size:calc(1.02rem*var(--k))}}

:root{--muted:#4F5A66;--dw:600;--hair:#DCE3E8}
html[data-font="rubik"]{--dw:600}
h1{font-weight:700}
.brand-mbti{font-weight:700}
h2{font-size:calc(clamp(1.9rem,3.5vw,3.05rem)*var(--k));line-height:1.1;letter-spacing:-.025em}
.sec-in{padding-block:clamp(64px,8vw,112px)}
.sec-head{margin-bottom:clamp(28px,3vw,44px)}
.eyebrow{font-weight:600;color:var(--muted);margin-bottom:8px}
.choose-head p,.ticks,.hiring-body p,.quote blockquote,.steps p:not(.num),.reasons p,.whatif-grid p,.gift-copy>p:not(.eyebrow),.a-sum,.answer,.tname,.final-sub{color:var(--muted)}
.final-sub{font-weight:400}

/* stats: logo green, teal, logo blue (hero and strip otherwise unchanged) */
.proof-strip .proof li:nth-child(2)::before{background-color:var(--teal)}

/* choose: cards sit on white, only Most Popular gets the hero colour */
.choose .sec-in{padding-top:clamp(44px,5vw,64px);padding-bottom:clamp(56px,7vw,96px)}
.choose-head{margin-bottom:30px}
.plans{gap:14px}
.plan{background:none;padding:10px;border-radius:30px}
.plan-you{background:var(--panel);box-shadow:none;color:var(--ink)}
.plan img{border-radius:22px;aspect-ratio:16/9}
.plan-body{padding:16px 8px 8px}
.plan h3{font-size:calc(1.2rem*var(--k))}
.price>span:first-child{font-size:calc(1.3rem*var(--k));font-weight:600}
.plan-for{font-weight:600;color:var(--muted)}
.price .unit{font-size:.78rem;font-weight:400;color:var(--muted)}
.ticks{font-size:.92rem;line-height:1.4;margin-top:12px}
.plans .plan .ticks li{padding:3px 0;background-image:none!important}
.plan-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px 18px;padding-top:16px}
.plan-cta .btn{width:auto;min-height:44px;padding:8px 22px;font-size:.95rem}
.plan .btn-secondary{background:none;border-color:var(--ink);color:var(--ink)}
.plan .btn-secondary:hover{background:var(--ink);color:#fff}
.plan-cta .text-link{min-height:0;font-size:.92rem;font-weight:600}
.plan-badge{background:var(--teal);color:#fff;top:-10px;right:-6px;width:88px;height:88px;font-size:.84rem;font-weight:600}
.plans{padding-top:10px}

/* hiring: its own quiet line, well clear of the cards */
.hiring{background:none;padding:0;border-radius:0;margin-top:clamp(56px,6vw,84px);gap:10px}
.hiring-title{font-size:calc(1.08rem*var(--k));font-weight:600;letter-spacing:-.01em}
.hiring-body{font-size:.95rem;max-width:46em}
.hiring-body .text-link{font-weight:600}
@media(min-width:900px){.hiring{grid-template-columns:1fr 2.4fr;gap:40px}}

/* stories: no boxes */
.quotes{gap:clamp(32px,4vw,56px)}
.quote{background:none;padding:0;border-radius:0;gap:12px}
.avatar{width:50px;height:50px}
.qmark{font-size:2rem;font-weight:600}
.quote blockquote{font-size:1rem;line-height:1.6}
.quote figcaption{font-size:1rem;font-weight:600;letter-spacing:-.01em}

/* contained panels */
.how,.whatif,.gift,.final{width:min(calc(100% - 2*(var(--inset) + var(--pad))),calc(1480px - 2*var(--pad)));margin-inline:auto}
.how{background:var(--panel);color:var(--ink)}
.how .sec-in{padding:clamp(40px,5vw,72px) clamp(24px,4vw,64px)}
.num,.steps li:nth-child(n) .num{width:48px;height:48px;background:var(--teal);color:#fff;font-size:1.2rem;font-weight:600}
.steps{gap:clamp(24px,3vw,40px)}
.steps h3{font-size:calc(1.15rem*var(--k));margin:14px 0 6px}
.how .text-link{font-weight:600}

/* why: layout unchanged */
.why-in{padding-bottom:24px}

/* what if: photo + stacked list (default) or a slim row */
.whatif{margin-block:clamp(56px,7vw,96px)}
.wi-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:28px;aspect-ratio:4/3}
.whatif-grid{display:block;margin-top:20px;gap:0}
.whatif-grid>div:nth-child(n){display:flex;align-items:flex-start;gap:16px;min-height:0;padding:20px 0;border-radius:0;background:none;color:var(--ink);justify-content:flex-start;border-top:1px solid var(--hair)}
.whatif-grid>div:first-child{border-top:0}
.wi-icon{flex:none;width:44px;height:44px;display:grid;place-items:center;font-size:1.25rem;color:var(--teal);background:var(--panel);border-radius:var(--blob)}
.whatif-grid h3,.whatif-grid h3:nth-child(n){font-size:calc(1.12rem*var(--k));line-height:1.25;letter-spacing:-.015em;font-weight:600;text-wrap:pretty}
.whatif-grid p{font-size:.96rem;font-weight:400;margin-top:4px}
@media(min-width:900px){
 html[data-wi="stack"] .whatif{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,88px);align-items:center}
 html[data-wi="stack"] .wi-photo img{aspect-ratio:4/4.6}
 html[data-wi="stack"] .whatif-grid{margin-top:0}
}
html[data-wi="row"] .wi-photo{display:none}
html[data-wi="row"] .whatif-grid{margin-top:0}
@media(min-width:760px){
 html[data-wi="row"] .whatif-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
 html[data-wi="row"] .whatif-grid>div:nth-child(n){display:block;padding:0;border-top:0}
 html[data-wi="row"] .wi-icon{margin-bottom:14px}
}
@media(min-width:1100px){html[data-wi="row"] .whatif-grid{grid-template-columns:repeat(4,1fr)}}

/* what if, option 3: the four brand colours, in compact tiles */
html[data-wi="tiles"] .wi-photo,html[data-wi="tiles"] .wi-icon{display:none}
html[data-wi="tiles"] .whatif-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:0}
html[data-wi="tiles"] .whatif-grid>div:nth-child(n){display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:190px;padding:clamp(18px,2vw,26px);border-top:0;border-radius:24px}
html[data-wi="tiles"] .whatif-grid>div:nth-child(1){background:var(--panel);color:var(--on)}
html[data-wi="tiles"] .whatif-grid>div:nth-child(2){background:var(--ink);color:#fff}
html[data-wi="tiles"] .whatif-grid>div:nth-child(3){background:var(--teal);color:#fff}
html[data-wi="tiles"] .whatif-grid>div:nth-child(4){background:var(--deep);color:#fff}
html[data-wi="tiles"] .whatif-grid>div>div{display:flex;flex-direction:column;justify-content:space-between;gap:18px;flex:1}
html[data-wi="tiles"] .whatif-grid h3{font-size:calc(clamp(1.08rem,1.5vw,1.3rem)*var(--k));line-height:1.2}
html[data-wi="tiles"] .whatif-grid p{font-size:.9rem;line-height:1.4;margin:0;color:inherit}
@media(max-width:560px){html[data-wi="tiles"] .whatif-grid{grid-template-columns:1fr}html[data-wi="tiles"] .whatif-grid>div:nth-child(n){min-height:150px}}
@media(min-width:1000px){html[data-wi="tiles"] .whatif-grid{grid-template-columns:repeat(4,1fr)}}

/* gift */
.gift{border-radius:30px}
.gift-in{padding:10px}
.gift img{min-height:220px;max-height:400px;border-radius:22px}
.gift-copy{padding:clamp(24px,4vw,56px)}
.gift-copy h2{max-width:13em}

/* types: plain list, no tiles */
.type-grid{gap:22px 20px}
.types .type-grid a{background:none;padding:0;min-height:0;gap:2px;border-radius:0}
.types .type-grid a:hover{background:none;color:inherit}
.types .type-grid a:hover .letters{color:var(--teal)}
.letters{font-size:calc(1.4rem*var(--k));font-weight:600;letter-spacing:-.01em}

/* faq: simple ruled rows */
.faq-in{max-width:none;gap:24px}
.faq details{background:none;border-radius:0;margin:0;border-top:1px solid var(--hair)}
.faq details:last-child{border-bottom:1px solid var(--hair)}
summary{padding:18px 0;font-size:calc(1.02rem*var(--k));font-weight:600;letter-spacing:-.01em}
.plus{background:none;color:var(--ink);width:24px;height:24px}
.answer{padding:0 0 18px;font-size:.96rem}
@media(min-width:900px){.faq-in{grid-template-columns:1fr 1.7fr;gap:48px}.faq-in h2{position:sticky;top:104px;align-self:start}}

/* articles */
.article-grid{gap:clamp(28px,3vw,40px)}
.article img{aspect-ratio:3/2;border-radius:22px}
.a-title{font-size:calc(1.08rem*var(--k));font-weight:600;letter-spacing:-.01em}
.a-sum{font-size:.92rem;line-height:1.5}
.a-date,.a-by{font-size:.82rem;font-weight:400;color:var(--muted)}

/* closing */
.final .sec-in{padding-block:clamp(56px,7vw,96px)}
.final h2{font-size:calc(clamp(2rem,4.4vw,3.8rem)*var(--k));font-weight:600;letter-spacing:-.025em;line-height:1.08}
.news h2{font-size:calc(clamp(1.5rem,2.4vw,2.1rem)*var(--k))}

/* ===== F: more human ===== */
/* closing panel matches the footer width */
.final{width:auto;margin-inline:var(--inset)}

/* stories: photo + boxed quotes */
.st-wrap{display:grid;gap:14px}
.st-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;border-radius:28px;aspect-ratio:4/3}
.quotes{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:12px}
.quote{display:grid;grid-template-columns:50px 1fr;grid-template-rows:auto auto;column-gap:16px;row-gap:0;background:var(--soft);padding:clamp(20px,2.4vw,28px);border-radius:24px;align-items:start;align-content:center}
.quote:nth-child(1) .avatar,.quote:nth-child(2) .avatar{color:#fff}
.quote .avatar{grid-row:1/3}
.quote blockquote{color:var(--ink);font-size:1.02rem}
.quote figcaption{grid-column:2;margin-top:8px;color:var(--muted)}
@media(min-width:900px){.st-wrap{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(20px,3vw,40px);align-items:stretch}.st-photo img{aspect-ratio:auto}}

/* steps: tall photo cards, Bumble style */
.how{background:none;color:var(--ink);border-radius:0}
.how .sec-in{padding:0;padding-block:clamp(16px,3vw,32px)}
.steps{gap:clamp(14px,1.6vw,20px)}
.steps li{position:relative}
.step-img{width:100%;aspect-ratio:4/4.3;object-fit:cover;object-position:50% 25%;border-radius:28px}
.num,.steps li:nth-child(n) .num{position:absolute;left:18px;top:18px;width:56px;height:56px;margin:0;font-size:1.35rem}
.steps li:nth-child(1) .num{background:var(--panel);color:var(--ink)}
.steps li:nth-child(2) .num{background:var(--teal);color:#fff}
.steps li:nth-child(3) .num{background:var(--ink);color:#fff}
.steps h3{margin:16px 0 4px;font-size:calc(1.25rem*var(--k))}

/* what if: photo cards in the four brand colours, staggered */
.whatif-grid{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:12px;margin:0;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.whatif .whatif-grid>div:nth-child(n){display:block;padding:0;border:0;border-radius:26px;overflow:hidden;scroll-snap-align:start;min-height:0}
.whatif .whatif-grid>div:nth-child(1){background:var(--panel);color:var(--on)}
.whatif .whatif-grid>div:nth-child(2){background:var(--ink);color:#fff}
.whatif .whatif-grid>div:nth-child(3){background:var(--teal);color:#fff}
.whatif .whatif-grid>div:nth-child(4){background:var(--deep);color:#fff}
.wi-img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%}
.whatif-grid>div:nth-child(4) .wi-img{object-position:50% 92%}
.wi-text{padding:18px 20px 22px;display:flex;flex-direction:column;gap:12px;min-height:178px;justify-content:space-between}
.whatif .whatif-grid h3{font-size:calc(1.14rem*var(--k));line-height:1.22}
.whatif .whatif-grid p{font-size:.92rem;line-height:1.4;margin:0;color:inherit}
@media(min-width:1000px){.whatif-grid{overflow:visible;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;padding-bottom:28px}
 .whatif .whatif-grid>div:nth-child(even){transform:translateY(28px)}}

/* types: a four-letter lock with the 16 as a map */
.types{background:var(--ink);color:#fff;border-radius:var(--r)}
.types .eyebrow{color:#C9D3DB}
.types .sec-in{padding-block:clamp(48px,6vw,88px)}
.types-in{display:grid;gap:clamp(28px,4vw,56px)}
.lock-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,.8vw,12px);perspective:800px}
.slot{appearance:none;border:0;cursor:pointer;font-family:var(--d);border-radius:clamp(18px,2vw,28px);padding:clamp(10px,1.4vw,18px) 0 clamp(8px,1vw,14px);display:grid;justify-items:center;gap:0;color:var(--ink);background:#fff;transition:transform .12s ease}
.slot:hover{transform:translateY(-3px)}
.slot:nth-child(1){background:var(--panel)}
.slot:nth-child(2){background:#fff}
.slot:nth-child(3){background:var(--teal);color:#fff}
.slot:nth-child(4){background:var(--lime)}
.slot-l{--step:1.12em;display:block;width:100%;height:var(--step);overflow:hidden;font-size:clamp(3.6rem,8.4vw,7.6rem);font-weight:700;line-height:var(--step);text-align:center}
.reel{--at:0;display:block;transform:translateY(calc(var(--at)*var(--step)*-1));transition:transform .5s cubic-bezier(.2,.9,.25,1);will-change:transform}
.reel>span{display:block;height:var(--step)}
.slot-o{font-size:clamp(.95rem,1.3vw,1.15rem);font-weight:600;display:inline-flex;align-items:center;gap:5px}
.slot-o svg{font-size:.85em}
.lock-name{display:inline-flex;align-items:center;gap:12px;margin-top:20px;font-family:var(--d);font-weight:600;font-size:calc(clamp(1.4rem,2.5vw,2.2rem)*var(--k));letter-spacing:-.02em;line-height:1.15;text-decoration:none;text-transform:capitalize}
.lock-name svg{color:var(--lime);flex:none}
.lock-name:hover{text-decoration:underline;text-underline-offset:6px}
.types .type-grid{grid-template-columns:repeat(4,1fr);gap:6px;align-content:start}
.types .type-grid a{background:#2F3D4B;color:#fff;border-radius:14px;padding:12px 4px;display:grid;place-items:center;transition:background-color .12s,color .12s}
.types .type-grid a:hover,.types .type-grid a.on{background:var(--lime);color:var(--ink)}
.types .type-grid a:hover .letters{color:inherit}
.types .letters{font-size:calc(clamp(.98rem,1.5vw,1.3rem)*var(--k));letter-spacing:0}
.types .tname{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(min-width:900px){.types-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}.types .type-grid a{padding:clamp(14px,1.6vw,22px) 4px}}

/* Most Popular: teal border only, no fill. Drawn with a shadow so the card contents stay aligned with the other two */
.plan-you{background:none;box-shadow:0 0 0 2px var(--teal)}

/* types panel: same container as the sections around it on desktop; keeps the wider inset on phones and tablets for room */
.slot-l{font-size:clamp(3.6rem,7vw,6.2rem)}

/* gifting: a slim banner */
.gift{border-radius:24px}
.gift-in{padding:10px;gap:0;align-items:center}
.gift figure{height:120px}
.gift img{height:100%;min-height:0;max-height:none;border-radius:18px;object-position:50% 45%}
.gift-copy{padding:16px 10px 12px;gap:4px}
.gift-copy .eyebrow{font-size:.84rem}
.gift-copy h2{font-size:calc(1.3rem*var(--k));line-height:1.15;letter-spacing:-.018em;max-width:none}
.gift-copy>p:not(.eyebrow){font-size:.92rem;line-height:1.45;max-width:38em}
.gift-btns{margin-top:10px;gap:8px 18px}
.gift-btns .btn{min-height:44px;padding:8px 22px;font-size:.95rem}
.gift-btns .text-link{font-size:.92rem;font-weight:600}
@media(min-width:900px){
 .gift-in{grid-template-columns:190px minmax(0,1fr)}
 .gift-copy{grid-template-columns:minmax(0,1fr) auto;column-gap:32px;padding:8px 22px 8px 26px;align-content:center;align-items:center}
 .gift-copy .eyebrow,.gift-copy h2,.gift-copy>p:not(.eyebrow){grid-column:1}
 .gift-btns{grid-column:2;grid-row:1/4;margin:0;flex-wrap:nowrap}
}

@media(min-width:640px) and (max-width:899px){.gift-in{grid-template-columns:170px minmax(0,1fr);align-items:stretch}.gift figure{height:auto}.gift-copy{padding:8px 14px 8px 20px;align-content:center}}

/* card gap */
.plans{gap:clamp(14px,2.5vw,44px)}

/* hiring: now its own quiet section under the types lock */
.hiring-sec .sec-in{padding-block:clamp(44px,5vw,64px) 0}
.hiring-sec .hiring{margin-top:0}

/* hero: rotating portraits with a floating type pill */
.hs{position:absolute;inset:0;border-radius:var(--blob);overflow:hidden;isolation:isolate;background:var(--panel)}
/* Outgoing photo drifts forward and dissolves; incoming settles back from slightly enlarged */
.hero-photo .hs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;border-radius:0;opacity:0;transform:scale(1.07);will-change:transform,opacity;backface-visibility:hidden}
.hero-photo .hs img.on{opacity:1;transform:scale(1);z-index:1;transition:opacity 1.1s cubic-bezier(.33,0,.2,1),transform 1.8s cubic-bezier(.16,1,.3,1)}
.hero-photo .hs img.leaving{opacity:0;transform:scale(1.12);z-index:2;transition:opacity .95s cubic-bezier(.4,0,.2,1),transform 1.3s cubic-bezier(.3,0,.1,1)}
.htag{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:12px;background:#fff;border-radius:999px;padding:8px 26px 8px 8px;white-space:nowrap}
.ht-link{display:grid;text-decoration:none;color:var(--ink);min-width:172px}
.ht-code{display:flex;font-family:var(--d);font-weight:700;font-size:1.28rem;--step:1.34em;height:var(--step);line-height:var(--step);letter-spacing:0}
.cell{display:block;width:.66em;height:var(--step);overflow:hidden;text-align:center;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%)}
.cell .reel>span{display:block;height:var(--step)}
.ht-name{font-size:.88rem;font-weight:600;color:var(--muted);text-transform:capitalize;line-height:1.2;transition:opacity .32s cubic-bezier(.4,0,.2,1),transform .42s cubic-bezier(.16,1,.3,1)}
.ht-name.out{opacity:0;transform:translateY(-5px)}
.cell .reel{transition-timing-function:cubic-bezier(.16,1,.3,1)}
.ht-link:hover .ht-name{color:var(--ink);text-decoration:underline}
@media(min-width:1000px){.htag{left:-34px;transform:none;bottom:8%}}
@media(max-width:999px){.hero-photo{margin-bottom:44px}}

/* hero pill: frosted glass. Text stays navy so it holds contrast over the darkest photos */
.htag{background:rgb(255 255 255 / 79%);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);border:1.5px solid rgba(255,255,255,.9);box-shadow:0 12px 32px -10px rgba(33,45,58,.32),0 3px 8px -2px rgba(33,45,58,.12)}
.ht-name{color:var(--ink)}

/* hero button: colours inverted, deep teal at rest, navy on hover */
html[data-hero="light"] .offer-btns .btn-primary{background:var(--deep);color:#fff}
html[data-hero="light"] .offer-btns .btn-primary:hover{background:var(--ink);color:#fff}

/* hero pill pause button */

/* header sits above the hero instead of over it; still sticky */
.site-head{margin-bottom:0;padding:0;pointer-events:auto;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
.head-row{background:none;border-radius:0;height:72px;padding:0 calc(var(--inset) + var(--pad));max-width:none}
#mobile-nav{margin:0 var(--inset) 8px}

/* hero spacing */
.hero-in{padding-top:36px}
@media(min-width:1000px){.hero-in{padding-top:100px;padding-bottom:100px}}

/* hero: a contained rounded panel on the same width as the sections below; menu lines up with it */
:root{--gutter:max(calc(var(--inset) + var(--pad)),calc((100% - 1480px)/2 + var(--pad)))}
.head-row{padding-inline:var(--gutter)}
.hero-in{max-width:none;padding-inline:var(--pad)}
@media(min-width:1000px){
 h1{font-size:calc(clamp(2.55rem,5.2vw,5.2rem)*var(--k))}
}

/* big panels: 10px from the window edge as it narrows, capped at 1480px on large screens.
   At that cap their inner content lands on the same column as the cards and the logo. */
:root{--inset:10px;--pad:clamp(16px,2.2vw,32px)}
.band{max-width:calc(1480px - 2*var(--pad))}
main>section.hero,.types,.final,.site-foot{width:min(calc(100% - 20px),1480px);margin-inline:auto}

/* ===== Spacing system: outer panel gap, inner panel padding and page margin are now separate ===== */
:root{--pg:clamp(20px,3.4vw,48px);--pout:var(--pg);--pin:clamp(26px,5.4vw,80px);--col:1400px;--cap:var(--col)}
main>section.hero,.types,.final,.site-foot{width:min(calc(100% - 2*var(--pout)),var(--cap));margin-inline:auto}
.hero-in,.types .sec-in,.final .sec-in,.site-foot .sec-in{max-width:none;padding-inline:var(--pin)}
main>.choose,main>.stories,main>.how,main>.why,main>.questions,main>.articles,main>.hiring-sec,main>.proof-strip{margin-inline:0;width:auto}
.choose .sec-in,.stories .sec-in,.how .sec-in,.why .sec-in,.questions .sec-in,.articles .sec-in,.hiring-sec .sec-in,.proof-strip .proof,.head-row{width:min(calc(100% - 2*var(--pg)),var(--col));max-width:none;margin-inline:auto;padding-inline:0}
.band,.whatif,.gift{width:min(calc(100% - 2*var(--pg)),var(--col));max-width:none;margin-inline:auto}
#mobile-nav{margin-inline:var(--pg)}

/* roomier inside the smaller boxes too */
.quote{padding:clamp(24px,3vw,36px) clamp(24px,3.2vw,40px)}
.reasons>div{padding:clamp(26px,3.2vw,40px)}
.gift-copy{padding-inline:clamp(14px,2vw,30px)}
@media(min-width:900px){.gift-copy{padding:10px 26px 10px 32px}}
@media(max-width:999px){h1{font-size:calc(clamp(1.85rem,8.9vw,3.6rem)*var(--k))}}

/* keep the pill clear of the buttons on smaller desktops */
@media(min-width:1000px) and (max-width:1339px){.htag{left:4px}}

/* pricing card lists: smaller text with dark green checks */
.plans .ticks{font-size:.8rem;line-height:1.4}
.plans .plan .ticks li{padding:3px 0 3px 22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23506B09' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat 1px .38em/14px!important}

/* stats list under the hero */
.proof-strip .proof li{font-size:14px}

/* hero chip: notification-style stack. Everything travels up: old glides up and dissolves, new rises from below and fades in.
   Movement and fade run on separate timing so nothing pops. */
.htag{--tx:translateX(-50%)}
@media(min-width:1000px){.htag{--tx:translateX(0)}}
.htag.ghost{z-index:2;pointer-events:none;animation:chip-lift 1s cubic-bezier(.4,0,.3,1) both,chip-dissolve .78s cubic-bezier(.3,0,.7,1) both}
.htag.roll-in{animation:chip-rise 1.2s cubic-bezier(.33,0,.15,1) both,chip-appear .8s cubic-bezier(.3,0,.5,1) .1s both}
@keyframes chip-lift{from{transform:var(--tx) translateY(0) scale(1)}to{transform:var(--tx) translateY(-72px) scale(.9)}}
@keyframes chip-dissolve{from{opacity:1}to{opacity:0}}
@keyframes chip-rise{from{transform:var(--tx) translateY(78px) scale(.92)}to{transform:var(--tx) translateY(0) scale(1)}}
@keyframes chip-appear{from{opacity:0}to{opacity:1}}

/* top of page: hero sits straight under the header; the header carries the breathing room */
main>section.hero{margin-top:0}
.site-head{padding-block:10px}
html{scroll-padding-top:112px}

/* stats row: evenly spaced, four equal gaps with each divider centred in its gap */
@media(min-width:1000px){
 .proof-strip .proof{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;justify-content:stretch;align-items:center}
 .proof-strip .proof li{grid-row:1}
 .proof-strip .proof li:nth-child(1){grid-column:2}
 .proof-strip .proof li:nth-child(2){grid-column:4}
 .proof-strip .proof li:nth-child(3){grid-column:6}
 .proof-strip .proof li+li{border-left:0;padding-left:0;margin-left:0}
 .proof-strip .proof::before,.proof-strip .proof::after{content:"";grid-row:1;justify-self:center;width:2px;height:32px;background:#DDF3F5}
 .proof-strip .proof::before{grid-column:3}
 .proof-strip .proof::after{grid-column:5}
}

@media(min-width:1000px) and (max-width:1099px){.proof-strip .proof::before,.proof-strip .proof::after{display:none}}

/* hero chip: no button, rounded-card corners */
.htag{padding:12px 24px;border-radius:20px}

/* choose: centered head, cards capped at 1200px, light border, Most popular as a flat tab on the teal border */
.choose-head{grid-template-columns:1fr;justify-items:center;text-align:center;max-width:none}
.plans{max-width:1200px;margin-inline:auto;padding-top:30px}
.plan,.plan-you{box-shadow:0 0 0 1px #EDEDED}
/* card hover: the line darkens, no fill or shadow */
.plan{transition:box-shadow .2s ease}
@media(hover:hover){
 .plan:hover{box-shadow:0 0 0 1.5px var(--ink)}
 .plan-you:hover{box-shadow:0 0 0 1.5px var(--teal)}
}
@media(prefers-reduced-motion:reduce){.plan{transition:none}}
.plan h3{font-size:calc(clamp(1.1rem,5.4vw,1.35rem)*var(--k))}
@media(min-width:1100px){.plan h3{font-size:calc(clamp(1.2rem,1.75vw,1.42rem)*var(--k))}}
/* three across needs 1100px once the titles grow; stay on the row layout until then */
@media(min-width:1040px) and (max-width:1099px){
 .plans{grid-template-columns:1fr}
 .plan{flex-direction:row;align-items:stretch}
 .plan img{width:36%;aspect-ratio:auto;object-fit:cover;flex:none}
 .plan-body{padding:10px 14px 8px;flex:1;min-width:0}
}
.plan-badge{top:auto;right:auto;bottom:calc(100% + 1px);left:50%;width:auto;height:auto;padding:5px 16px 4px;background:var(--teal);color:#fff;font-size:.8rem;font-weight:600;line-height:1.3;white-space:nowrap;border-radius:12px 12px 0 0;transform:translateX(-50%)}

/* proof strip: one check colour */
.proof-strip .proof li:nth-child(n)::before{background-color:var(--logo-green)}

/* types: one centered column like Choose your path, one focal point, one tile colour, lime only for the selected type */
.types .sec-head{grid-template-columns:1fr;justify-items:center;text-align:center;margin-bottom:clamp(24px,3vw,36px)}
.types-in{grid-template-columns:minmax(0,1fr);justify-items:center;align-items:start;gap:clamp(24px,3vw,36px)}
.lock{display:grid;justify-items:center;width:min(100%,600px)}
.lock-slots{width:100%}
.slot:nth-child(n){color:var(--ink)}
.slot:nth-child(1){background:#DDF3F5}
.slot:nth-child(2){background:#A9DCE1}
.slot:nth-child(3){background:#5CB6C0}
.slot:nth-child(4){background:var(--teal);color:#fff}
.slot-l{font-size:clamp(3.6rem,7vw,5.6rem)}
.lock-name{margin-top:18px}
.types .type-grid{width:100%;max-width:960px;gap:8px}
.types .type-grid a{padding:12px 4px;border-radius:14px}
.types .letters{font-size:calc(1rem*var(--k))}
.types .sec-in>.text-link{display:block;width:fit-content;margin:clamp(24px,3vw,36px) auto 0}
@media(min-width:900px){
 .types-in{grid-template-columns:minmax(0,1fr)}
 .types .type-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
 .types .type-grid a{padding:14px 4px}
}

/* type name crossfade: name and arrow fade as one layer, centered, so nothing slides */
.lock-name>span{display:inline-grid;justify-items:center}
.lock-name .nm{grid-area:1/1;display:inline-flex;align-items:center;gap:12px;white-space:nowrap;transition:opacity .5s ease}
.lock-name:hover{text-decoration:none}
.lock-name:hover .nt{text-decoration:underline;text-underline-offset:6px}
@media(prefers-reduced-motion:reduce){.lock-name .nm{transition:none}}
/* small phones: long names wrap to two lines, so hold two lines of height and the page doesn't jump as types change */
@media(max-width:460px){
 .lock-name{display:flex;justify-content:center;width:100%;min-height:2.3em}
 .lock-name>span{width:100%;grid-template-columns:minmax(0,1fr);align-items:center}
 .lock-name .nm{white-space:normal;text-align:center}
}

/* hiring: blob photo left, note right, the same blob as the hero */
.hiring-sec .hiring{grid-template-columns:1fr;gap:24px;align-items:center;max-width:1040px;margin-inline:auto}
.hiring-blob{width:min(64vw,220px);aspect-ratio:1;margin:0}
.hiring-blob img{width:100%;height:100%;object-fit:cover;border-radius:var(--blob)}
.hiring-copy,.hiring-sec .hiring-body{display:grid;gap:15px}
.hiring-sec .hiring-title{font-size:calc(clamp(1.35rem,2.2vw,1.75rem)*var(--k));font-weight:var(--dw);letter-spacing:var(--ls);line-height:1.2}
.hiring-sec .hiring-body{max-width:none;font-size:1rem}
@media(min-width:760px){
 .hiring-sec .hiring{grid-template-columns:clamp(200px,24vw,300px) minmax(0,1fr);gap:clamp(32px,5vw,72px)}
 .hiring-blob{width:100%}
}

/* every underlined link: same weight at rest, only the underline thickens on hover */
.text-link,.offer-btns .btn-ghost{font-weight:600;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:5px;transition:text-decoration-thickness .15s ease}
.text-link:hover,.offer-btns .btn-ghost:hover{font-weight:600;text-decoration-thickness:4px}
@media(prefers-reduced-motion:reduce){.text-link,.offer-btns .btn-ghost{transition:none}}

/* stories: three short quotes in a row, same card line as Choose your path, one quote colour */
.quotes{grid-template-columns:1fr;grid-auto-rows:auto;gap:14px;max-width:1200px;margin-inline:auto}
.stories .sec-head{max-width:1200px;margin-inline:auto}
.quote{display:flex;flex-direction:column;gap:12px;background:none;box-shadow:0 0 0 1px #EDEDED;border-radius:30px;padding:24px}
.quote .avatar,.quote:nth-child(n) .avatar{width:36px;height:36px;background:#DDF3F5;color:var(--ink)}
.quote .avatar .qmark{font-size:1.5rem}
.quote blockquote{flex:1;font-size:.95rem;line-height:1.55}
.quote figcaption{margin-top:0;font-size:.95rem}
@media(min-width:900px){.quotes{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.5vw,44px)}}

/* page rhythm: one gap between every section, one gap under every section heading; panels keep their own inner padding */
:root{--gap:clamp(64px,7vw,96px);--head-gap:clamp(24px,3vw,36px)}
main>section:not(.hero){margin-block:var(--gap) 0}
main>section.proof-strip{margin-block:0}
main>section.final{margin-bottom:10px}
.choose .sec-in,.stories .sec-in,.hiring-sec .sec-in,.how .sec-in,.why .sec-in,.questions .sec-in,.articles .sec-in{padding-block:0}
.proof-strip .proof{padding-bottom:0}
.sec-head,.choose-head,.stories .sec-head,.types .sec-head{margin-bottom:var(--head-gap)}
.how .sec-head{margin-bottom:clamp(36px,4.6vw,64px)}

/* how it works: hero-aqua panel; blob photos climb left to right, each with a big numeral tucked behind it */
main>section.how{width:min(calc(100% - 2*var(--pout)),var(--cap));margin-inline:auto;background:#DDF3F5;color:var(--ink);border-radius:var(--r)}
main>section.how .sec-in{width:auto;max-width:none;padding:clamp(48px,6vw,88px) var(--pin)}
.how .sec-head{grid-template-columns:1fr;justify-items:center;text-align:center}
.steps{gap:28px;margin:0;max-width:1100px;margin-inline:auto}
.steps li{position:relative;display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:18px;align-items:start}
.step-img{position:relative;z-index:1;grid-row:1/3;width:100%;aspect-ratio:1;object-position:50% 50%;border-radius:var(--blob)}
.num,.steps li:nth-child(n) .num{position:absolute;left:-10px;top:-14px;width:auto;height:auto;display:block;background:none;color:var(--teal);font-size:3rem;font-weight:700;line-height:1;border-radius:0}
.steps h3{margin:6px 0 4px}
.steps p:not(.num){color:#3F4A56}
.how .sec-in>.text-link{display:block;width:fit-content;margin:clamp(28px,3vw,40px) auto 0}
@media(min-width:900px){
 .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,48px);align-items:start}
 .steps li{display:flex;flex-direction:column;align-items:center;text-align:center}
 .step-img{order:0;display:block;width:min(76%,240px)}
 .num,.steps li:nth-child(n) .num{position:static;order:1;margin-top:14px;font-size:clamp(3rem,4.4vw,4rem);line-height:1}
 .steps li h3{order:2;margin:4px 0 6px}
 .steps li p:not(.num){order:3}
}

/* why: centered head like the sections around it */
.why .sec-head{grid-template-columns:1fr;justify-items:center;text-align:center}
.why-in{padding-bottom:0}

/* what if: four quiet lines of text, no photos, no colour tiles, no stagger */
.whatif-grid{grid-template-columns:1fr;gap:24px;overflow:visible;padding-bottom:0;scroll-snap-type:none}
.whatif .whatif-grid>div:nth-child(1),.whatif .whatif-grid>div:nth-child(2),.whatif .whatif-grid>div:nth-child(3),.whatif .whatif-grid>div:nth-child(4){background:none;color:var(--ink);border-radius:0;overflow:visible;transform:none}
.wi-text{padding:0;min-height:0;gap:6px;justify-content:flex-start}
.whatif .whatif-grid h3{font-size:calc(1.05rem*var(--k));line-height:1.25}
.whatif .whatif-grid p{font-size:.92rem;line-height:1.45;color:var(--muted)}
@media(min-width:640px){.whatif-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px clamp(24px,4vw,44px)}}
@media(min-width:1000px){.whatif-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;padding-bottom:0}}

/* common questions: centered heading, accordion centered below it */
.faq-in,.questions .faq-in{grid-template-columns:minmax(0,1fr);justify-items:center;gap:var(--head-gap)}
.faq-in h2{position:static;align-self:auto;text-align:center}
.faq{width:100%;max-width:820px}

/* gifting: narrower banner, link stacked under the button */
.gift{width:min(calc(100% - 2*var(--pg)),1040px)}
.gift-btns{flex-direction:column;align-items:center;gap:10px}
.gift-btns .btn{width:auto}
@media(max-width:899px){.gift-btns{align-items:flex-start}}

/* footer: plain white, full-colour logo, quiet type; everything stays, it just stops shouting */
.site-foot{background:none;color:var(--ink);border-radius:0;margin:clamp(40px,5vw,64px) auto 0;width:min(calc(100% - 2*var(--pg)),var(--col));--logo-blue:#19aaba;--logo-gray:#54575b;--logo-green:#8cb80f;--logo-lightgreen:#62a342;--logo-orange:#dc500a}
.site-foot .sec-in{max-width:none;padding:0 0 28px}
.news{gap:18px;margin-bottom:clamp(36px,4vw,52px);align-items:start}
.news h2{font-size:calc(clamp(1.2rem,1.7vw,1.45rem)*var(--k));margin-bottom:6px}
.news-copy p{font-size:.92rem;color:var(--muted)}
.news-copy p strong{font-weight:600}
.news-row input{height:46px;padding:0 18px;background:var(--soft);font-size:.95rem}
.news button{height:46px;padding:0 22px;background:var(--ink);color:#fff;font-size:.92rem}
.news button:hover{background:var(--deep)}
.news-notice{margin-top:10px;font-size:.72rem;line-height:1.5;color:var(--muted)}
.news-notice a{color:inherit}
.foot-logo{height:30px;margin-bottom:10px}
.foot-brand p{font-size:.88rem;color:var(--muted);max-width:22em}
.social{gap:14px;margin-top:10px}
.social a{width:auto;height:auto;min-width:24px;min-height:24px;background:none;color:var(--muted);border-radius:0;font-size:1.1rem}
.social a:hover{background:none;color:var(--ink)}
.foot-col h2{font-size:.88rem;font-weight:600;letter-spacing:-.005em;margin-bottom:6px}
.foot-col a{padding:3px 0;font-size:.88rem;color:var(--muted)}
.foot-col a:hover{color:var(--ink)}
.foot-legal{margin-top:clamp(28px,3.4vw,40px);gap:8px;font-size:.76rem;color:var(--muted)}
.foot-legal a{color:inherit}
.foot-legal ul{gap:4px 16px}
.foot-legal .tm{font-size:.72rem;line-height:1.5}
@media(min-width:900px){
 .news{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
 .foot-legal{grid-template-columns:auto minmax(0,1fr);column-gap:24px;align-items:center}
 .foot-legal ul{justify-content:flex-end}
 .foot-legal .tm{grid-column:1/-1}
}

/* gifting photo: whole box in frame; taller on phones so the bow isn't cropped */
.gift img{object-position:20% 50%}
@media(max-width:639px){.gift figure{height:180px}}

/* final panel: row of blob faces above the eyebrow */
.final .faces{display:flex;justify-content:center;align-items:flex-end;margin-bottom:clamp(18px,2.4vw,28px)}
.final .faces img{width:clamp(58px,6.4vw,92px);aspect-ratio:1;height:auto;object-fit:cover;border-radius:var(--blob);border:4px solid var(--panel);margin-inline:clamp(-9px,-.6vw,-6px)}
.final .faces img:nth-child(2),.final .faces img:nth-child(4){width:clamp(66px,7.2vw,104px)}
.final .faces img:nth-child(3){width:clamp(78px,8.2vw,118px)}

/* why: photo split with a floating result card */
.why-in{display:grid;gap:0}
.why-vis{position:relative;margin:0 0 clamp(56px,8vw,72px);width:min(100%,520px);justify-self:center}
.why-vis .ph{aspect-ratio:4/5;border-radius:clamp(24px,3vw,36px);overflow:hidden}
.why-vis .ph img{width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.why-vis .chip{position:absolute;left:clamp(14px,2vw,24px);top:clamp(14px,2vw,24px);display:flex;gap:10px;align-items:center;background:#fff;color:var(--ink);font:600 clamp(.82rem,1vw,.95rem)/1 var(--d);padding:12px 16px;border-radius:99px;box-shadow:0 14px 30px -14px rgba(0,0,0,.35)}
.why-vis .chip b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#91C702;color:var(--ink);font-size:.8rem}
.why-vis .rc{position:absolute;right:-8px;bottom:-40px;width:min(78%,330px);background:#fff;border-radius:22px;padding:clamp(16px,2vw,22px) clamp(18px,2vw,24px) clamp(18px,2vw,24px);box-shadow:0 30px 60px -28px rgba(11,40,50,.45);color:var(--ink)}
.why-vis .rc small{display:block;font-size:.78rem;color:var(--muted);font-weight:600}
.why-vis .code{font:700 clamp(2.1rem,3.4vw,2.8rem)/1 var(--d);letter-spacing:-.03em;margin:6px 0 2px}
.why-vis .nm{font:600 clamp(.95rem,1.2vw,1.1rem)/1.3 var(--d);color:var(--teal);margin-bottom:14px}
.why-vis .row{display:grid;grid-template-columns:7.2em 1fr;align-items:center;gap:10px;font-size:.82rem;margin-top:10px}
.why-vis .bar{height:10px;border-radius:99px;background:#F0F4F6;overflow:hidden}
.why-vis .bar i{display:block;height:100%;border-radius:99px;background:var(--teal)}
.why .sec-head{justify-items:start;text-align:left;margin:0 0 32px}
.why .sec-head h2{font-size:clamp(2rem,3.4vw,3.2rem)}
.reasons{grid-template-columns:1fr!important;gap:26px!important;margin:0}
.reasons>div{background:none!important;padding:0!important;border-radius:0}
@media(min-width:900px){
 .why-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto;column-gap:clamp(110px,11vw,170px);align-items:center}
 .why-vis{grid-row:1/3;grid-column:1;margin:0;width:100%;justify-self:stretch}
 .why-vis .rc{right:-60px;bottom:-30px}
 .why .sec-head{grid-column:2;align-self:end}
 .reasons{grid-column:2;align-self:start}
}

/* why: narrower photo column (about a third), text column wider */
@media(min-width:900px){
 .why-in{grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:clamp(90px,9vw,140px)}
 .why-vis .rc{width:min(88%,300px);right:-56px;bottom:-28px}
 .why .sec-head h2{max-width:14em}
 .reasons p{max-width:40em}
}

@media(min-width:900px) and (max-width:1199px){.why-in{grid-template-columns:minmax(0,2fr) minmax(0,3fr);column-gap:90px}.why-vis .rc{width:min(78%,280px);bottom:-36px}}

/* why: centered heading on top, photo + reasons in a 1200px container below (like the testimonials) */
.why .sec-head{grid-template-columns:1fr!important;justify-items:center;text-align:center;margin:0 0 clamp(40px,4.6vw,64px)}
.why .sec-head h2{max-width:none}
@media(min-width:900px){
 .why-in{max-width:1200px;grid-template-columns:minmax(0,5fr) minmax(0,7fr)!important;grid-template-rows:auto auto;column-gap:clamp(90px,9vw,130px)!important}
 .why .sec-head{grid-column:1/-1;grid-row:1;align-self:auto}
 .why-vis{grid-column:1;grid-row:2}
 .reasons{grid-column:2;grid-row:2;align-self:center}
 .why-vis .rc{width:min(86%,300px);right:-56px;bottom:-28px}
}
@media(min-width:900px) and (max-width:1199px){.why-in{column-gap:90px!important}.why-vis .rc{width:min(78%,280px);bottom:-36px}}

.why .sec-in.why-in{width:min(calc(100% - 2*var(--pg)),1200px)}
.why .sec-head{order:-1}

/* why card: smaller and lower so it clears her phone */
.why-vis{margin-bottom:clamp(76px,9vw,96px)}
.why-vis .rc{width:min(68%,250px);bottom:-64px;padding:16px 18px 18px;border-radius:18px}
.why-vis .rc small{font-size:.7rem}
.why-vis .code{font-size:clamp(1.7rem,2.4vw,2.1rem)}
.why-vis .nm{font-size:.88rem;margin-bottom:8px}
.why-vis .row{grid-template-columns:6.4em 1fr;font-size:.74rem;margin-top:7px;gap:8px}
.why-vis .bar{height:8px}
@media(min-width:900px){.why-vis{margin-bottom:0}.why-vis .rc{width:250px;right:-56px;bottom:-64px}}
@media(min-width:900px) and (max-width:1199px){.why-vis .rc{width:230px;right:-40px;bottom:-60px}}

/* what if: small blob photo above each question, text centered under it */
.whatif{width:min(calc(100% - 2*var(--pg)),1200px)}
.whatif .whatif-grid>div{text-align:center;display:grid;justify-items:center;align-content:start}
.whatif .wi-blob{margin:0 0 18px;width:clamp(120px,12vw,150px);aspect-ratio:1;border-radius:var(--blob);overflow:hidden}
.whatif .wi-blob img{width:100%;height:100%;object-fit:cover}
.whatif .wi-text{max-width:17em}
.whatif .whatif-grid h3{margin-bottom:6px}
@media(min-width:640px){.whatif-grid{row-gap:44px!important}}

@media(max-width:639px){.whatif .whatif-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:32px 16px!important}.whatif .wi-blob{width:96px;margin-bottom:12px}.whatif .whatif-grid h3{font-size:.98rem}.whatif .whatif-grid p{font-size:.86rem}}

/* why card hangs 64px below the photo; keep the usual section gap below it */
@media(min-width:900px){main>section.why{padding-bottom:64px}}

/* articles: condensed 1200px container like testimonials and Why */
.articles .sec-in{width:min(calc(100% - 2*var(--pg)),1200px)}

/* footer: full-width dark navy; newsletter in a slightly lighter rounded panel (option A) */
.site-foot{width:100%;margin:var(--gap) 0 0;border-radius:0;background:var(--ink);color:#fff;--logo-blue:#fff;--logo-gray:#fff;--logo-green:#fff;--logo-lightgreen:#fff;--logo-orange:#fff;--fm:#C3CBD3}
.site-foot .sec-in{width:min(calc(100% - 2*var(--pg)),var(--col));margin-inline:auto;padding:clamp(40px,5vw,64px) 0 28px}
.site-foot .news{background:#2B3846;border-radius:clamp(22px,2.6vw,32px);padding:clamp(24px,3.4vw,44px) clamp(22px,3.6vw,48px);align-items:center;margin-bottom:clamp(40px,4.6vw,60px)}
.site-foot .news h2{font-size:calc(clamp(1.35rem,2vw,1.7rem)*var(--k));color:#fff}
.site-foot .news-copy p{color:var(--fm)}
.site-foot .news-copy p strong{color:#fff}
.site-foot .news-row input{background:#fff;color:var(--ink)}
.site-foot .news button{background:var(--teal);color:#fff}
.site-foot .news button:hover{background:#fff;color:var(--ink)}
.site-foot .news-notice,.site-foot .foot-brand p,.site-foot .social a,.site-foot .foot-col a,.site-foot .foot-legal{color:var(--fm)}
.site-foot .foot-col h2{color:#fff}
.site-foot .social a:hover,.site-foot .foot-col a:hover,.site-foot .foot-legal a:hover{color:#fff}
.site-foot :focus-visible{outline-color:#fff}

/* newsletter: its own soft grey panel between the final CTA and the footer */
main>section.news-sec{margin:clamp(16px,2vw,24px) 0 0;width:auto}
.news-sec .sec-in{width:min(calc(100% - 2*var(--pg)),1200px);max-width:none;margin-inline:auto;padding:0}
.news-sec .news{background:var(--soft);border-radius:clamp(22px,2.6vw,32px);padding:clamp(24px,3.4vw,44px) clamp(22px,3.6vw,48px);align-items:center;margin:0}
.news-sec .news h2{font-size:calc(clamp(1.35rem,2vw,1.7rem)*var(--k))}
.news-sec .news-row input{background:#fff}
.site-foot{margin-top:var(--gap)}

/* closing spacing: same section gap between final CTA, newsletter and footer */
main>section.final{margin-bottom:0}
main>section.news-sec{margin:var(--gap) 0 0}
.site-foot{margin-top:var(--gap)}

/* newsletter: no panel; small ebook cover + one-piece pill form */
.news-sec .news{background:none;padding:0;border-radius:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:28px;row-gap:24px;align-items:center}
.news-sec .news-form{grid-column:1/-1}
.ebook{width:84px;aspect-ratio:3/4;position:relative;transform:rotate(-6deg);margin:6px 6px 6px 0}
.ebook .pg{position:absolute;inset:0;border-radius:4px 10px 10px 4px;background:#fff;box-shadow:0 14px 26px -14px rgba(11,40,50,.5);transform:translate(6px,4px) rotate(4deg)}
.ebook .cv{position:absolute;inset:0;border-radius:4px 10px 10px 4px;background:var(--teal);color:#fff;padding:11px 10px;display:flex;flex-direction:column;gap:6px;overflow:hidden;box-shadow:0 14px 26px -12px rgba(11,40,50,.55),inset 4px 0 0 rgba(0,0,0,.12)}
.ebook .cv b{font:700 .62rem/1.15 var(--d);letter-spacing:-.01em}
.ebook .cv b sup{font-size:.6em}
.ebook .cv span{font:600 .48rem/1.2 'Open Sans',sans-serif;opacity:.85}
.ebook .cv i{position:absolute;right:-14px;bottom:-12px;width:46px;height:42px;border-radius:var(--blob);background:#DDF3F5}
.news-sec .news-row{flex-wrap:nowrap;background:#fff;border-radius:999px;box-shadow:0 0 0 1.5px #D6DEE3;padding:5px;gap:0}
.news-sec .news-row input{background:none;height:48px;font-size:1rem;padding:0 18px}
.news-sec .news-row button{height:48px;padding:0 24px;border-radius:999px;flex:none}
.news-sec .news-row:focus-within{box-shadow:0 0 0 2px var(--ink)}
@media(min-width:900px){
 .news-sec .news{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);column-gap:48px}
 .news-sec .news-form{grid-column:3}
 .ebook{width:112px}
 .ebook .cv{padding:14px 13px;gap:8px}
 .ebook .cv b{font-size:.78rem}
 .ebook .cv span{font-size:.56rem}
 .ebook .cv i{width:58px;height:52px}
}

.review{position:fixed;left:12px;bottom:12px;z-index:90;display:grid;gap:6px;padding:10px 12px;background:#fff;color:#212D3A;border:2px solid #212D3A;border-radius:14px;font:600 12px/1.2 'Open Sans',Arial,sans-serif}
.review div{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.review b{width:42px}
.review button{font:inherit;min-height:30px;padding:4px 9px;border:1px solid #212D3A;border-radius:8px;background:#fff;color:#212D3A;cursor:pointer}
.review button[aria-pressed="true"]{background:#212D3A;color:#fff}
@media print{.review{display:none}}