/* Concept 03: a practical, video-led How to use page. */
.site-nav{gap:24px}
.how-hero{background:#edf1f4;overflow:hidden;padding:60px 0 65px}
.how-hero-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:50px;align-items:center}
.how-hero h1{font-size:clamp(48px,5.3vw,74px);line-height:.97;letter-spacing:-.05em;margin:25px 0 28px}
.how-muted{color:#7e8c98}
.how-hero-copy>p{font-size:15px;line-height:1.8;max-width:405px}
.how-hero .hero-ctas{gap:24px;align-items:center}
.how-hero .btn{font-size:12px;gap:20px}
.how-start-link{border:0;border-bottom:1px solid #a6b2bc;background:none;padding:8px 0;font-size:12px;gap:10px}
.how-hero-image{position:relative;align-self:stretch;min-height:400px;margin:16px 0 0}
.how-hero-image>img{width:100%;height:100%;position:absolute;object-fit:cover;object-position:51% 50%}
.how-image-label{position:absolute;bottom:0;left:0;right:0;padding:17px 23px;background:#111116;color:#c7d3dd;letter-spacing:.14em;font-size:9px}
.how-hero-stamp{position:absolute;right:-20px;top:-24px;width:100px;height:100px;border-radius:50%;background:#cbd6df;border:7px solid #edf1f4;color:#111116;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(12deg)}
.how-hero-stamp b{font-family:'Archivo Black',sans-serif;font-size:23px;line-height:1.2;font-weight:400;letter-spacing:-.05em}
.how-hero-stamp span{font-size:8px;letter-spacing:.04em}
.how-facts{border-bottom:1px solid #dce3e8;background:#fff}
.how-facts .wrap{display:grid;grid-template-columns:repeat(3,1fr);padding-top:27px;padding-bottom:27px}
.how-facts .wrap>div{display:flex;gap:22px;align-items:center;padding:0 28px;border-left:1px solid #d9e0e5}
.how-facts .wrap>div:first-child{border:0;padding-left:0}
.how-facts b{font-family:'Archivo Black',sans-serif;font-size:37px;font-weight:400;line-height:1;letter-spacing:-.06em;white-space:nowrap}
.how-facts b span{font-family:'DM Sans',sans-serif;font-size:18px;letter-spacing:-.02em;font-weight:500}
.how-facts div>span{font-size:9px;letter-spacing:.06em;line-height:1.6;color:#5c6974}
.tutorial-section{padding-bottom:83px;scroll-margin-top:24px!important}
.tutorial-section .section-heading p{max-width:340px}
.technique-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:32px}
.technique-tabs button{text-align:left;border:1px solid #d6dfe6;background:#f6f8f9;padding:15px 16px 18px;min-width:0;min-height:84px;transition:background .2s,color .2s}
.technique-tabs button[aria-selected="true"]{background:#111116;border-color:#111116;color:#fff}
.technique-tabs button:hover{background:#e5ebef}
.technique-tabs button[aria-selected="true"]:hover{background:#262b31}
.technique-tab-meta{display:flex;justify-content:space-between;gap:8px;font-size:8px;color:#7a8995;letter-spacing:.05em;margin-bottom:13px}
.technique-tabs button[aria-selected="true"] .technique-tab-meta{color:#aebfcd}
.technique-tabs b{font-size:13px;font-weight:600;line-height:1.4;display:block}
.technique-panel{display:grid;grid-template-columns:1.65fr 1fr;gap:25px 40px;align-items:start;outline-offset:8px}
.tutorial-media{min-width:0}
.tutorial-player{position:relative;background:#111116;aspect-ratio:16/9;overflow:hidden}
.tutorial-player video{display:block;width:100%;height:100%;object-fit:contain}
.tutorial-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fffffff2;color:#111116;border:0;border-radius:50%;height:108px;width:108px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;box-shadow:0 8px 28px #0003;transition:background .2s,box-shadow .2s}
.tutorial-play>span{font-size:26px;line-height:1;margin-left:5px}
.tutorial-play b{font-size:8px;letter-spacing:.08em}
.tutorial-play:hover{background:#d7e3eb;box-shadow:0 8px 36px #0005}
.tutorial-player.has-played .tutorial-play{display:none}
.tutorial-caption{display:flex;justify-content:space-between;gap:15px;font-size:8px;letter-spacing:.08em;color:#7c8b97;margin-top:13px}
.tutorial-caption a{letter-spacing:0;font-size:10px;color:#546778;text-decoration:underline;text-underline-offset:3px}
.tutorial-error{font-size:12px;line-height:1.7;background:#edf1f4;padding:14px;margin-top:14px;color:#3a4d5d}
.tutorial-error a{text-decoration:underline}
.technique-copy .eyebrow{font-size:9px}
.technique-copy h3{font-size:32px;line-height:1.1;margin:14px 0 16px}
.technique-copy>p{font-size:13px;line-height:1.8;color:#52616d}
.technique-gear{border-top:1px solid #d8e1e8;border-bottom:1px solid #d8e1e8;padding:15px 0;margin-top:22px}
.technique-gear>span,.technique-method>span{font-size:8px;letter-spacing:.13em;color:#718291;font-weight:600;display:block;margin-bottom:5px}
.technique-gear p{font-size:12px;color:#202b35;line-height:1.7}
.technique-method{margin-top:16px}
.technique-method p{font-size:12px;line-height:1.8;color:#596b79}
.technique-copy .text-link{font-size:11px;margin-top:22px}
.technique-extra{grid-column:1/-1;padding:22px 26px;background:#f1f5f7;border:1px solid #e2e8ec;margin-top:4px;display:flex;gap:30px;align-items:center}
.technique-extra>.eyebrow{font-size:9px;min-width:190px;flex-shrink:0}
.technique-extra>p{font-size:12px;line-height:1.8;color:#5d6d7a}
.technique-extra.has-variants{display:block}
.shake-variants{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:20px}
.shake-variants article{display:flex;gap:14px;border-left:1px solid #cad5de;padding-left:25px}
.shake-variants article:first-child{border:0;padding-left:0}
.shake-variants article>span{font-size:10px;color:#8b9ba8;padding-top:3px}
.shake-variants h4{font-size:13px;font-weight:600;margin-bottom:5px}
.shake-variants p{font-size:12px;line-height:1.7;color:#657582}
.emulsion-preview{background:radial-gradient(ellipse at center,#f8fafb,#d4dfe6);min-height:360px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;padding:25px;position:relative;overflow:hidden}
.emulsion-preview>img{height:240px;width:100%;object-fit:contain;filter:drop-shadow(10px 14px 8px #63768a25)}
.emulsion-preview>span{font-size:8px;letter-spacing:.13em;color:#738696}
.emulsion-preview .btn{font-size:11px}
.how-prepare{background:#e9eff3;scroll-margin-top:24px!important}
.how-prepare .section-heading p{max-width:350px}
.format-prep-tabs{display:flex;border:1px solid #c5d1da;padding:5px;width:fit-content;gap:5px;margin-bottom:23px;background:#f3f6f8}
.format-prep-tabs button{display:flex;flex-direction:column;text-align:left;gap:4px;border:0;padding:16px 26px;background:transparent;min-width:190px}
.format-prep-tabs b{font-size:16px}
.format-prep-tabs span{font-size:11px;color:#657b8c}
.format-prep-tabs button[aria-selected="true"]{background:#111116;color:white}
.format-prep-tabs button[aria-selected="true"] span{color:#bdcbd6}
.format-prep-panel{display:grid;grid-template-columns:.75fr 1.5fr;background:#fff;min-height:415px}
.format-prep-visual{background:#dce5eb;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;padding:30px;overflow:hidden}
.format-prep-visual img{height:310px;object-fit:contain;max-width:90%;filter:drop-shadow(12px 14px 10px #4b687822);transform:rotate(-6deg)}
.format-prep-visual.is-powder img{height:245px;transform:rotate(5deg)}
.format-prep-visual>span{font-size:10px;font-weight:600;letter-spacing:.1em;color:#566c7f}
.format-prep-copy{padding:40px 48px}
.format-prep-copy h3{font-size:29px;margin-bottom:23px}
.format-prep-copy ol{list-style:none;counter-reset:format-step;padding:0;margin:0}
.format-prep-copy li{position:relative;counter-increment:format-step;padding-left:36px;margin-top:20px}
.format-prep-copy li:before{content:counter(format-step,decimal-leading-zero);position:absolute;left:0;top:2px;font-size:11px;color:#8097a9}
.format-prep-copy li>b{font-size:15px;display:block;margin-bottom:4px}
.format-prep-copy li>p{font-size:13px;line-height:1.75;color:#617586}
.format-prep-note{font-size:11px;line-height:1.8;color:#788995;border-top:1px solid #dde5eb;margin-top:26px;padding-top:16px}
.how-guide-section{background:#111116;color:#fff;overflow:hidden}
.how-guide-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:110px;align-items:center}
.guide-cover{position:relative;padding:0 15px 0 38px;max-width:410px}
.guide-cover>a{display:block;transform:rotate(-5deg);transition:transform .5s;box-shadow:15px 24px 0 #ffffff0a}
.guide-cover>a:hover{transform:rotate(-1deg)}
.guide-cover img{width:100%;height:auto}
.guide-cover>span{font-size:8px;letter-spacing:.15em;color:#7f93a3;display:block;margin:30px 0 0;text-align:center}
.guide-copy .eyebrow{color:#9eb2c3}
.guide-copy h2{font-size:58px;margin:24px 0}
.guide-copy>p{font-size:14px;line-height:1.85;color:#b5c1cd;max-width:430px}
.guide-numbers{display:flex;gap:40px;margin:30px 0 34px}
.guide-numbers>span{font-size:8px;color:#9aaebf;letter-spacing:.13em}
.guide-numbers b{display:block;font-family:'Archivo Black',sans-serif;font-size:40px;font-weight:400;line-height:1.2;color:#d8e4ee;letter-spacing:-.05em;margin-bottom:5px}
.guide-copy .btn{font-size:12px;gap:23px}
.guide-open{display:block;font-size:10px;color:#9fb0bf;margin-top:15px;text-decoration:underline;text-underline-offset:4px;width:fit-content}
.how-next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.how-next-grid>a{display:block;padding:28px;border:1px solid #d7e1e8;background:#f5f8fa;transition:background .2s,transform .2s}
.how-next-grid>a:hover{background:#e5edf3;transform:translateY(-4px)}
.how-next-grid>a>span:first-child{font-size:9px;letter-spacing:.08em;color:#738b9d}
.how-next-grid h3{font-size:24px;margin:23px 0 12px}
.how-next-grid p{font-size:13px;line-height:1.8;color:#5d7587;max-width:260px}
.how-next-grid .arrow{display:block;text-align:right;margin-top:23px}
.home-tutorial-link{margin-top:28px;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:26px 30px;border:1px solid #bbcbd7;background:#dce6ee}
.home-tutorial-link h3{font-size:22px;margin-bottom:5px}
.home-tutorial-link p{font-size:13px;color:#566e81}
.recipe-how-link{margin-top:20px;font-size:12px;line-height:1.7;color:#718495}
.recipe-how-link a{font-weight:600;color:#283f51;text-decoration:underline;text-underline-offset:4px}
@media(max-width:1100px){.site-nav{gap:18px}.header-inner{gap:20px}.header-cta .btn{font-size:11px;padding:12px;gap:12px}.how-hero-grid{gap:35px}.how-hero h1{font-size:58px}.how-hero-image{min-height:370px}.how-hero .hero-ctas{gap:15px}.how-facts .wrap>div{gap:15px;padding:0 20px}.how-facts b{font-size:31px}.how-facts div>span{font-size:8px}.technique-tabs button{padding:13px 11px 15px}.technique-tabs b{font-size:11px}.technique-panel{grid-template-columns:1.5fr 1fr;gap:25px}.technique-copy h3{font-size:28px}.how-guide-grid{gap:60px}.guide-copy h2{font-size:49px}.format-prep-copy{padding:35px}}
@media(min-width:641px) and (max-width:950px){.header-cta>.btn{display:none}.header-inner{gap:20px}.site-nav{gap:17px;font-size:11px}.how-hero h1{font-size:46px}.how-hero-grid{gap:28px}.how-hero-copy>p{font-size:13px}.how-hero-image{min-height:340px}.how-hero .hero-ctas{display:block}.how-start-link{margin-top:15px}.how-facts .wrap>div{display:block}.how-facts div>span{display:block;margin-top:10px}.how-guide-grid{gap:45px}.guide-copy h2{font-size:42px}.guide-numbers{gap:25px}.guide-copy .btn{font-size:11px;padding:14px 16px;gap:15px}}
@media(max-width:850px){.technique-tabs{grid-template-columns:repeat(3,1fr)}.technique-tabs button{min-height:75px}.technique-tabs b{font-size:13px}.technique-tab-meta{margin-bottom:8px}.technique-panel{grid-template-columns:1fr}.technique-copy{display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.technique-copy>.eyebrow,.technique-copy>h3,.technique-copy>p{grid-column:1}.technique-copy>.eyebrow{grid-row:1}.technique-copy>h3{grid-row:2}.technique-copy>p{grid-row:3/5}.technique-copy .text-link{grid-column:1;grid-row:5;justify-self:start;align-self:start}.technique-gear{grid-column:2;grid-row:1/3;margin-top:0;padding-top:12px}.technique-method{grid-column:2;grid-row:3/6;margin-top:12px}.technique-extra{grid-column:1}.shake-variants{gap:18px}.shake-variants article{gap:10px;padding-left:18px}.format-prep-panel{grid-template-columns:.8fr 1.5fr}.format-prep-copy{padding:30px}.format-prep-copy h3{font-size:25px}.format-prep-visual{padding:22px}.format-prep-visual img{height:280px}.how-next-grid{gap:15px}.how-next-grid>a{padding:22px}.how-next-grid h3{font-size:21px}.how-next-grid p{font-size:12px}.home-tutorial-link{padding:24px}.home-tutorial-link h3{font-size:20px}.home-tutorial-link .btn{font-size:11px;padding:13px 16px;gap:15px}}
@media(min-width:641px) and (max-width:800px){.site-header{height:72px}.site-nav{display:none;position:absolute;left:0;right:0;top:72px;background:#fff;padding:22px;border-bottom:1px solid #dce2e7;flex-direction:column;align-items:flex-start;gap:10px;box-shadow:0 15px 25px #1111160a}.site-nav.mobile-open{display:flex}.site-nav a{font-size:15px;width:100%;padding:10px 5px}.site-nav a.active:after{width:25px;left:5px}.mobile-toggle{display:block}.header-cta>.btn{display:none}}
@media(max-width:640px){.how-hero{padding:37px 0 31px}.how-hero-grid{grid-template-columns:1fr;gap:32px}.how-hero h1{font-size:clamp(40px,11.9vw,67px);line-height:.98;margin:22px 0 23px}.how-hero-copy>p{font-size:14px;max-width:100%}.how-hero .hero-ctas{gap:15px;margin-top:24px}.how-hero .btn{font-size:10px;padding:13px 14px;min-height:47px;gap:15px}.how-start-link{font-size:10px;gap:8px;padding:7px 0}.how-hero-image{min-height:245px;margin-top:7px;margin-right:0}.how-hero-image>img{object-position:50% 47%}.how-image-label{padding:13px 16px;font-size:8px;letter-spacing:.1em}.how-hero-stamp{width:82px;height:82px;right:-10px;top:-25px;border-width:5px}.how-hero-stamp b{font-size:21px}.how-hero-stamp span{font-size:7px}.how-facts .wrap{padding-top:24px;padding-bottom:24px;gap:0}.how-facts .wrap>div{display:block;padding:0 13px}.how-facts .wrap>div:last-child{padding-right:0}.how-facts b{font-size:27px;letter-spacing:-.05em;display:block}.how-facts b span{font-size:11px}.how-facts div>span{font-size:7px;letter-spacing:.015em;margin-top:9px;line-height:1.6;display:block}.tutorial-section{padding-top:48px;padding-bottom:48px}.tutorial-section .section-heading h2{font-size:34px}.tutorial-section .section-heading p{font-size:13px;max-width:none}.technique-tabs{gap:7px;margin-bottom:23px}.technique-tabs button{padding:12px 10px;min-height:79px}.technique-tabs b{font-size:11px;line-height:1.35}.technique-tab-meta{font-size:7px;margin-bottom:10px}.technique-panel{gap:25px}.tutorial-play{width:82px;height:82px;gap:7px}.tutorial-play>span{font-size:23px}.tutorial-play b{font-size:6px}.tutorial-caption{font-size:7px;letter-spacing:.05em;margin-top:10px;gap:10px}.tutorial-caption a{font-size:8px}.technique-copy{display:block}.technique-copy h3{font-size:30px;margin:14px 0}.technique-copy>p{font-size:14px;line-height:1.8}.technique-gear{margin-top:20px;padding:15px 0}.technique-gear p,.technique-method p{font-size:13px}.technique-method{margin-top:18px}.technique-copy .text-link{font-size:12px}.technique-extra{padding:23px;display:block;margin-top:2px}.technique-extra>.eyebrow{min-width:0;font-size:8px}.technique-extra>p{margin-top:14px;font-size:13px}.shake-variants{grid-template-columns:1fr;gap:17px;margin-top:23px}.shake-variants article{border-left:0;border-top:1px solid #cbd7df;padding:17px 0 0;gap:17px}.shake-variants article:first-child{border:0;padding:0}.shake-variants h4{font-size:14px}.shake-variants p{font-size:13px}.emulsion-preview{min-height:330px;padding:23px;gap:18px}.emulsion-preview>img{height:200px}.emulsion-preview .btn{font-size:10px;padding:12px 14px;gap:15px}.how-prepare .section-heading p{max-width:none}.format-prep-tabs{width:100%;margin-bottom:19px}.format-prep-tabs button{min-width:0;width:50%;padding:14px 17px}.format-prep-tabs b{font-size:15px}.format-prep-tabs span{font-size:10px}.format-prep-panel{grid-template-columns:1fr}.format-prep-visual{padding:25px;min-height:245px;position:relative;gap:15px}.format-prep-visual img{height:220px}.format-prep-visual.is-powder img{height:200px}.format-prep-visual>span{font-size:9px;position:absolute;bottom:25px;right:22px}.format-prep-copy{padding:27px 24px}.format-prep-copy h3{font-size:24px;line-height:1.2}.format-prep-copy li{padding-left:32px;margin-top:22px}.format-prep-copy li>b{font-size:14px}.format-prep-copy li>p{font-size:13px}.how-guide-grid{grid-template-columns:1fr;gap:38px}.guide-cover{max-width:275px;margin:auto;padding:0 10px}.guide-cover>span{font-size:7px;margin-top:26px}.guide-copy h2{font-size:42px;margin:20px 0}.guide-copy>p{font-size:14px;max-width:none}.guide-numbers{gap:38px;margin:26px 0 30px}.guide-numbers b{font-size:37px}.guide-copy .btn{font-size:11px;padding:15px 19px;gap:17px}.guide-open{margin-top:20px}.how-next-grid{grid-template-columns:1fr;gap:16px}.how-next-grid>a{padding:26px;position:relative}.how-next-grid h3{font-size:24px;margin:19px 0 12px}.how-next-grid p{font-size:13px;max-width:240px;padding-right:15px}.how-next-grid .arrow{position:absolute;right:25px;bottom:27px;margin:0}.home-tutorial-link{display:block;padding:25px}.home-tutorial-link h3{font-size:21px;line-height:1.2;margin-bottom:10px}.home-tutorial-link p{font-size:13px;line-height:1.8}.home-tutorial-link .btn{margin-top:22px;font-size:12px}.recipe-how-link{font-size:11px}}
@media print{.how-hero .hero-ctas,.technique-tabs,.tutorial-play,.tutorial-player video,.format-prep-tabs{display:none}.how-guide-section{background:white;color:#111}.guide-copy p,.guide-copy .eyebrow{color:#333}.technique-panel,.how-guide-grid{display:block}.tutorial-media{display:none}.how-facts b{font-size:22px}}