:root {
    --ink:#123d2c;
    --cream:#f6f5df;
    --lime:#d3ed55
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:80px
}

body {
    margin:0;
    color:var(--ink);
    background:var(--cream);
    font-family:Arial,Helvetica,sans-serif
}

a {
    color:inherit;
    text-decoration:none
}

button {
    font:inherit;
    cursor:pointer
}

button:focus-visible,a:focus-visible,summary:focus-visible {
    outline:3px solid #db492e;
    outline-offset:5px
}

.wrap {
    max-width:1360px;
    margin:auto;
    padding:0 6%
}

nav {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:90px;
    border-bottom:1px solid #123d2c33
}

.logo {
    font-size:25px;
    line-height:.85;
    font-weight:950;
    letter-spacing:-1.5px;
    transform:rotate(-4deg)
}

.logo span {
    display:block;
    font-size:14px;
    letter-spacing:0
}

.links {
    display:flex;
    align-items:center;
    gap:32px;
    font-size:14px;
    font-weight:bold
}

.pill {
    display:inline-block;
    border-radius:40px;
    padding:16px 24px;
    background:var(--ink);
    color:var(--cream);
    font-weight:bold;
    font-size:14px
}

.hero {
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:690px;
    align-items:center;
    gap:3%
}

.eyebrow {
    text-transform:uppercase;
    font-size:13px;
    font-weight:bold;
    letter-spacing:2px
}

.hero h1 {
    font-size:clamp(64px,7.8vw,112px);
    line-height:.88;
    letter-spacing:-7px;
    margin:26px 0
}

.hero h1 em {
    font-style:normal;
    color:#55750b
}

.intro {
    font-size:18px;
    line-height:1.6;
    max-width:385px;
    margin:30px 0
}

.hero-art {
    background:#dde79e;
    border-radius:50% 50% 4px 4px;
    position:relative;
    height:540px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .3s
}

.hero-art img {
    width:100%;
    height:100%;
    object-fit:contain;
    mix-blend-mode:multiply;
    transform:rotate(9deg);
    transition:transform .3s
}

.stamp {
    position:absolute;
    right:-15px;
    top:45px;
    border-radius:50%;
    background:var(--lime);
    width:115px;
    height:115px;
    display:grid;
    place-content:center;
    text-align:center;
    transform:rotate(14deg);
    font-size:14px;
    font-weight:bold;
    line-height:1.3;
    border:1px solid var(--ink)
}

.selector {
    position:absolute;
    bottom:18px;
    display:flex;
    gap:8px
}

.selector button {
    width:35px;
    height:35px;
    border:2px solid transparent;
    border-radius:50%;
    padding:4px;
    background:transparent
}

.selector button[aria-pressed=true] {
    border-color:var(--ink)
}

.selector i {
    display:block;
    width:23px;
    height:23px;
    border-radius:50%;
    background:var(--color)
}

.hero-note {
    font-size:12px;
    margin-top:18px
}

.ribbon {
    background:var(--ink);
    color:var(--cream);
    padding:23px 6%;
    display:flex;
    justify-content:space-around;
    gap:20px;
    text-align:center;
    font-size:14px;
    font-weight:bold
}

.collection {
    padding-top:95px;
    padding-bottom:90px
}

.section-head {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:25px;
    margin-bottom:35px
}

h2 {
    font-size:clamp(38px,5vw,62px);
    letter-spacing:-3px;
    line-height:1;
    margin:14px 0
}

.section-head p {
    max-width:270px;
    line-height:1.6;
    font-size:16px
}

.products {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px
}

.product .photo {
    height:360px;
    background:var(--bg);
    overflow:hidden;
    border-radius:8px;
    position:relative
}

.photo img {
    width:100%;
    height:100%;
    object-fit:contain;
    mix-blend-mode:multiply;
    transition:transform .3s
}

.product:hover img {
    transform:rotate(-5deg) scale(1.04)
}

.tag {
    position:absolute;
    top:16px;
    left:16px;
    font-size:12px;
    font-weight:bold;
    border:1px solid #123d2c55;
    border-radius:20px;
    padding:7px 11px
}

.product h3 {
    font-size:24px;
    letter-spacing:-1px;
    margin:23px 0 10px
}

.product p {
    line-height:1.5;
    margin:0 0 18px;
    font-size:16px
}

.meta {
    font-size:12px;
    font-weight:bold;
    letter-spacing:1px;
    text-transform:uppercase;
    border-top:1px solid #123d2c33;
    padding-top:15px
}

.manifesto {
    background:var(--lime);
    padding:75px 6%;
    text-align:center
}

.manifesto h2 {
    max-width:750px;
    margin:15px auto 25px;
    font-size:clamp(40px,6vw,78px)
}

.manifesto p {
    max-width:570px;
    margin:auto;
    line-height:1.7;
    font-size:18px
}

.faq {
    padding-top:85px;
    padding-bottom:85px;
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:8%
}

details {
    border-bottom:1px solid #123d2c44;
    padding:22px 0
}

summary {
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    list-style:none;
    display:flex;
    justify-content:space-between;
    gap:20px
}

summary:after {
    content:'+'
}

details[open] summary:after {
    content:'−'
}

details p {
    font-size:16px;
    line-height:1.7;
    max-width:540px
}

footer {
    border-top:1px solid #123d2c33;
    padding:30px 0
}

.footer-inner {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px
}

.legal {
    font-size:12px;
    line-height:1.6;
    max-width:620px;
    margin-top:30px;
    opacity:.7
}

@media(max-width:760px) {
    .wrap {
    padding:0 6%
}

nav {
    min-height:76px
}

.links {
    gap:18px
}

.links .pill {
    display:none
}

.hero {
    grid-template-columns:1fr;
    padding:50px 0 35px;
    gap:36px
}

.hero h1 {
    letter-spacing:-4px;
    margin:20px 0
}

.intro {
    margin:24px 0
}

.hero-art {
    height:430px;
    max-width:450px;
    width:100%;
    margin:auto
}

.stamp {
    right:-4px;
    top:30px;
    width:95px;
    height:95px;
    font-size:12px
}

.ribbon {
    flex-wrap:wrap;
    font-size:12px;
    gap:18px
}

.collection {
    padding-top:60px;
    padding-bottom:60px
}

.section-head {
    display:block
}

.products {
    grid-template-columns:1fr;
    gap:40px
}

.product .photo {
    height:390px
}

.faq {
    grid-template-columns:1fr;
    padding-top:60px;
    padding-bottom:60px;
    gap:25px
}

.manifesto {
    padding:55px 6%
}

.footer-inner {
    font-size:14px
}

.hero-note {
    max-width:300px;
    line-height:1.5
}


}

@media(prefers-reduced-motion:reduce) {
    html {
    scroll-behavior:auto
}

* {
    transition:none!important
}


}



body>.wrap:first-child {
    max-width:none;
    padding:0;
    background:#ddea95;
    transition:background .3s
}

nav {
    position:relative;
    border:0;
    padding:0 5%;
    min-height:95px
}

nav .logo {
    position:absolute;
    left:50%;
    transform:translateX(-50%) rotate(-4deg);
    font-size:38px
}

nav .logo span {
    font-size:20px
}

.links {
    width:100%;
    justify-content:space-between
}

.links>a:nth-child(2) {
    margin-right:auto;
    margin-left:32px
}

.hero {
    display:block;
    position:relative;
    min-height:720px;
    text-align:center;
    padding:20px 4% 100px;
    overflow:hidden;
    background:#ddea95;
    transition:background .3s
}

.hero-heading {
    position:relative;
    z-index:1
}

.hero h1 {
    font-size:clamp(48px,5.5vw,82px);
    line-height:1.03;
    letter-spacing:-4px;
    margin:14px 0
}

.hero-art {
    height:430px;
    width:440px;
    margin:-10px auto 0;
    background:transparent!important;
    border-radius:0;
    position:relative
}

.hero-art img {
    transform:rotate(-10deg);
    width:100%;
    height:100%
}

.stamp {
    left:-160px;
    right:auto;
    top:120px;
    background:transparent;
    width:135px;
    height:135px;
    border:2px solid var(--ink);
    font-size:15px;
    transform:rotate(-15deg)
}

.hero-caption {
    position:absolute;
    top:400px;
    left:calc(50% + 190px);
    text-align:left;
    max-width:200px
}

.hero-caption p {
    font-size:24px;
    font-weight:bold;
    line-height:1.1
}

.selector {
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    gap:12px
}

.selector button {
    display:flex;
    align-items:center;
    gap:9px;
    width:auto;
    height:auto;
    padding:12px 17px;
    border:1px solid #123d2c44;
    background:#ffffff33;
    border-radius:30px;
    white-space:nowrap;
    font-size:14px;
    font-weight:bold
}

.selector button[aria-pressed=true] {
    background:var(--ink);
    color:var(--cream);
    border-color:var(--ink)
}

.selector i {
    width:18px;
    height:18px;
    flex-shrink:0
}

.side-word {
    position:absolute;
    right:-210px;
    top:350px;
    transform:rotate(-90deg);
    font-size:85px;
    font-weight:950;
    opacity:.09;
    white-space:nowrap;
    letter-spacing:-4px
}

.pill {
    border-radius:3px;
    text-transform:uppercase;
    letter-spacing:1px
}

.photo {
    border-radius:24px!important
}

.manifesto {
    background:#ee9baf
}

.manifesto h2 {
    font-size:clamp(40px,6vw,75px)
}

@media(max-width:760px) {
    nav {
    min-height:85px
}

nav .logo {
    font-size:28px
}

nav .logo span {
    font-size:15px
}

.links {
    font-size:12px
}

.links>a:nth-child(2) {
    margin:0 0 0 auto
}

.hero {
    padding:20px 5% 90px;
    min-height:730px
}

.hero h1 {
    font-size:49px;
    letter-spacing:-2px;
    margin-top:20px
}

.hero .eyebrow {
    font-size:11px;
    letter-spacing:1px
}

.hero-art {
    width:100%;
    max-width:370px;
    height:390px;
    margin:0 auto
}

.stamp {
    left:0;
    top:80px;
    width:85px;
    height:85px;
    font-size:10px
}

.hero-caption {
    position:static;
    text-align:center;
    max-width:none;
    margin-top:-5px
}

.hero-caption p {
    font-size:18px;
    margin:0 0 12px
}

.selector {
    bottom:20px;
    gap:5px;
    width:100%;
    justify-content:center
}

.selector button {
    font-size:11px;
    padding:9px 8px;
    gap:5px
}

.selector i {
    width:14px;
    height:14px
}

.side-word {
    display:none
}

.hero-caption .pill {
    padding:13px 20px
}


}


.products {
    gap:32px
}


.product .photo {
    height:400px;
    padding:48px 30px 30px
}


.photo .tag {
    top:22px;
    left:22px
}


.photo img {
    display:block
}


@media(max-width:760px) {
    .products {
    gap:44px
}

.product .photo {
    height:430px;
    padding:58px 36px 36px
}

.photo .tag {
    top:24px;
    left:24px
}


}



.detail {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:8%;
    padding:55px 0 75px;
    align-items:center
}

.detail-image {
    height:610px;
    padding:55px 35px;
    background:var(--bg);
    border-radius:24px
}

.detail-image img {
    height:100%;
    width:100%;
    object-fit:contain;
    mix-blend-mode:multiply
}

.detail h1 {
    font-size:clamp(42px,5vw,68px);
    letter-spacing:-3px;
    line-height:1.05;
    margin:18px 0
}

.detail p {
    font-size:18px;
    line-height:1.6
}

.facts {
    display:grid;
    grid-template-columns:1fr 1fr;
    margin:30px 0;
    border-top:1px solid #123d2c33
}

.facts div {
    padding:18px 0;
    border-bottom:1px solid #123d2c33
}

.facts dt {
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:7px
}

.facts dd {
    margin:0;
    font-weight:bold;
    font-size:16px
}

.flavor-links {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:18px 0 30px
}

.flavor-links a {
    font-size:14px;
    padding:12px 15px;
    border:1px solid #123d2c55;
    border-radius:25px
}

.flavor-links a[aria-current=page] {
    background:var(--ink);
    color:var(--cream)
}

.back {
    font-size:14px;
    display:inline-block;
    margin-top:30px;
    text-decoration:underline;
    text-underline-offset:4px
}

.detail-note {
    font-size:14px!important
}

.detail-page nav .logo {
    position:static;
    transform:rotate(-4deg)
}

.detail-page .links {
    width:auto;
    gap:25px
}

.detail-page .links>a:nth-child(2) {
    margin:0
}

.detail-page>.wrap:first-child {
    max-width:1360px;
    padding:0 6%;
    background:transparent
}

.detail-page nav {
    padding:0;
    border-bottom:1px solid #123d2c33
}

.detail-info {
    padding-bottom:65px
}

.detail-info h2 {
    font-size:38px
}

.detail-info details {
    max-width:800px
}

.product-link {
    display:block
}

.detail-link {
    display:inline-block;
    margin-top:18px;
    font-size:14px;
    font-weight:bold;
    text-decoration:underline;
    text-underline-offset:5px
}

@media(max-width:760px) {
    .detail {
    grid-template-columns:1fr;
    gap:28px;
    padding:25px 0 45px
}

.detail-image {
    height:440px;
    padding:45px 25px
}

.detail h1 {
    letter-spacing:-2px
}

.detail-page nav .logo {
    font-size:25px
}

.detail-page .links {
    font-size:13px
}

.facts {
    gap:12px
}

.detail-info {
    padding-bottom:45px
}


}

/* Preserve the brand layout alongside Bootstrap's components and reset. */
a:hover { color: inherit; }
.products.row { margin: 0; }
.products > .col { padding: 0; min-width: 0; }
.selector button { line-height: normal; }
.logo { display: inline-block; }
summary { color: var(--ink); }
@media (max-width: 760px) {
    .products.row { display: grid; grid-template-columns: 1fr; }
}

.nutrition-section {
    display: grid;
    grid-template-columns: minmax(0, 480px) 1fr;
    gap: 8%;
    align-items: start;
    padding: 0 0 70px;
}
.nutrition-panel {
    padding: 26px;
    background: white;
    color: #18251c;
    border: 2px solid #123d2c;
    border-radius: 24px;
}
.nutrition-panel h2 { font-size: 38px; letter-spacing: -1.5px; margin: 0 0 16px; }
.nutrition-panel > p { font-size: 16px; line-height: 1.6; }
.nutrition-calories { display: flex; justify-content: space-between; align-items: end; padding: 12px 0; border-top: 8px solid #123d2c; border-bottom: 4px solid #123d2c; }
.nutrition-calories > strong { font-size: 48px; line-height: 1; }
.nutrition-calories span strong { font-size: 28px; }
.nutrition-table { margin-top: 12px; --bs-table-color: #18251c; }
.nutrition-table th, .nutrition-table td { padding: 9px 3px; font-size: 14px; }
.nutrition-table td, .nutrition-table thead th:not(:first-child) { text-align: right; }
.nutrition-panel .nutrition-footnote { font-size: 12px; margin: 12px 0 0; }
.nutrition-ingredients { padding: 24px 0; }
.nutrition-ingredients h2 { font-size: 38px; }
.nutrition-ingredients p { font-size: 18px; line-height: 1.7; }
@media (max-width: 760px) {
    .nutrition-section { grid-template-columns: 1fr; gap: 20px; padding-bottom: 40px; }
    .nutrition-panel { padding: 20px; }
}

.footer-navigation {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 32px;
    font-size: 14px;
}
.footer-navigation a { text-decoration: underline; text-underline-offset: 4px; }
.content-page { max-width: 800px; padding: 65px 0 85px; }
.content-page h1 { font-size: clamp(42px, 6vw, 68px); letter-spacing: -2px; margin: 18px 0 32px; }
.content-page h2 { font-size: 28px; letter-spacing: -1px; line-height: 1.2; margin-top: 36px; }
.content-page p { font-size: 18px; line-height: 1.7; }
.policy-notice { padding: 16px 20px; background: #e3edba; border-radius: 12px; }

/* Lifestyle photography: supplied images are retained in the images directory. */
.lifestyle-block {
    position: relative;
    min-height: 560px;
    margin: 0 auto 70px;
    padding: 60px 6%;
    display: flex;
    align-items: flex-start;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 24px;
    overflow: hidden;
    color: var(--cream);
}
.home-page .lifestyle-block { max-width: 1200px; margin-left: 6%; margin-right: 6%; }
.lifestyle-copy {
    position: relative;
    max-width: 380px;
    background: rgba(18, 61, 44, 0.93);
    border-radius: 20px;
    padding: 30px;
}
.lifestyle-copy h2 { font-size: clamp(30px, 3.5vw, 46px); letter-spacing: -1.5px; line-height: 1.08; margin: 18px 0; }
.lifestyle-copy p { font-size: 16px; line-height: 1.6; }
.lifestyle-copy .eyebrow { font-size: 12px; letter-spacing: 1.2px; }
.lifestyle-copy .pill { background: var(--lime); color: var(--ink); margin-top: 12px; }
.lifestyle-1 { background-image: url('../images/green-1.png'); }
.lifestyle-2 { background-image: url('../images/green-2.png'); }
.lifestyle-3 { background-image: url('../images/green-3.png'); justify-content: flex-end; }
.lifestyle-4 { background-image: url('../images/green-4.png'); justify-content: flex-end; }
.lifestyle-5 { background-image: url('../images/green-5.png'); }
.lifestyle-6 { background-image: url('../images/green-6.png'); }
.content-page:has(.lifestyle-block) { max-width: none; }
.content-page > p { max-width: 800px; }
.content-page .lifestyle-block { margin-top: 45px; margin-bottom: 0; }
@media (min-width: 1360px) {
    .home-page .lifestyle-block { margin-left: auto; margin-right: auto; }
}
@media (max-width: 760px) {
    .lifestyle-block {
        min-height: 650px;
        padding: 24px;
        align-items: flex-start;
        margin-bottom: 45px;
        background-position: 58% bottom;
    }
    .lifestyle-copy { max-width: 100%; padding: 22px; }
    .lifestyle-copy h2 { font-size: 32px; }
    .lifestyle-copy .pill { padding: 13px 16px; }
    .lifestyle-5 { background-position: 65% bottom; }
}

/* Full-width lifestyle sections, including those inside page containers. */
.lifestyle-block,
.home-page .lifestyle-block,
.content-page .lifestyle-block {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    padding-left: max(6vw, calc((100vw - 1200px) / 2));
    padding-right: max(6vw, calc((100vw - 1200px) / 2));
}
/* Clip viewport-width overflow from desktop scrollbar space. */
body { overflow-x: clip; }
@media (max-width: 760px) {
    .lifestyle-block,
    .home-page .lifestyle-block,
    .content-page .lifestyle-block {
        padding-left: 6vw;
        padding-right: 6vw;
    }
}

/* Match each lifestyle section to its photograph's full proportions. */
.lifestyle-block {
    min-height: 0;
    aspect-ratio: var(--lifestyle-ratio);
    background-position: center bottom;
}
.lifestyle-1,
.lifestyle-4,
.lifestyle-6 { --lifestyle-ratio: 5 / 3; --lifestyle-photo-height: 60vw; }
.lifestyle-2 { --lifestyle-ratio: 4000 / 2667; --lifestyle-photo-height: 66.675vw; }
.lifestyle-3 { --lifestyle-ratio: 4 / 3; --lifestyle-photo-height: 75vw; }
.lifestyle-5 { --lifestyle-ratio: 6182 / 4121; --lifestyle-photo-height: 66.6613vw; }
/* On smaller screens, place copy above the complete photo instead of
   forcing a wide image into a tall, cropped background. */
@media (max-width: 1000px) {
    .lifestyle-block {
        aspect-ratio: auto;
        min-height: 0;
        padding-top: 28px;
        padding-bottom: calc(var(--lifestyle-photo-height) + 28px);
        background-color: var(--ink);
        background-size: 100% auto;
        background-position: center bottom;
        justify-content: flex-start;
    }
    .lifestyle-copy {
        max-width: 600px;
        background: transparent;
        padding: 0;
    }
}

/* Keep the expanded navigation comfortably spaced on small screens. */
@media (max-width: 760px) {
    .site-navigation { flex-wrap: wrap; justify-content: center; padding-top: 18px; padding-bottom: 18px; gap: 20px; }
    .home-page .site-navigation .logo { position: static; transform: rotate(-4deg); }
    .site-navigation .links,
    .detail-page .site-navigation .links { width: 100%; justify-content: center; flex-wrap: wrap; gap: 12px 20px; }
    .site-navigation .links > a:nth-child(2) { margin: 0; }
}

/* Show the entire three-flavor photograph at every screen size. */
.flavor-showcase {
    width: 100%;
    margin-bottom: 70px;
    background: var(--ink);
    color: var(--cream);
}
.flavor-showcase-copy {
    max-width: 850px;
    margin: 0 auto;
    padding: 55px 6%;
    text-align: center;
}
.flavor-showcase-copy h2 { margin: 20px 0; }
.flavor-showcase-copy p { font-size: 18px; line-height: 1.6; margin-bottom: 24px; }
.flavor-showcase-copy .pill { background: var(--lime); color: var(--ink); }
.flavor-showcase img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
    .flavor-showcase { margin-bottom: 45px; }
    .flavor-showcase-copy { padding-top: 38px; padding-bottom: 38px; }
}

/* Join the homepage photo blocks directly to their following sections. */
.home-page .lifestyle-block,
.home-page .flavor-showcase {
    margin-bottom: 0;
}

.retailer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 40px;
}
.retailer-card { text-align: center; padding: 20px; border: 1px solid #123d2c33; border-radius: 24px; }
.retailer-card img { width: 100%; height: auto; display: block; border-radius: 16px; }
.content-page .retailer-card h2 { font-size: 22px; margin: 24px 0 20px; }
.retailer-card button { border: 0; }
.retailer-card button:disabled { opacity: 0.6; cursor: default; }
.content-page:has(.retailer-grid) { max-width: none; }
@media (max-width: 760px) {
    .retailer-grid { grid-template-columns: 1fr; }
}

/* Supplied brand logo in the shared header and footer. */
.logo img { display: block; width: 130px; height: auto; }
.site-navigation .logo,
.home-page .site-navigation .logo,
.detail-page .site-navigation .logo,
.footer-inner .logo { transform: none; }
.home-page .site-navigation .logo { transform: translateX(-50%); }
@media (max-width: 760px) {
    .logo img { width: 110px; }
    .home-page .site-navigation .logo { transform: none; }
}

/* Shared preparation instructions on all product detail pages. */
.how-to {
    background: var(--ink);
    color: var(--cream);
    border-radius: 24px;
    padding: 50px 40px;
    margin-bottom: 70px;
}
.how-to > h2 { font-size: clamp(34px, 4vw, 52px); margin: 18px 0 40px; }
.how-to-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.step-number { display: inline-block; font-size: 42px; font-weight: bold; color: var(--lime); margin-bottom: 20px; }
.how-to-steps h3 { font-size: 21px; line-height: 1.3; margin: 0 0 16px; }
.how-to-steps p { font-size: 16px; line-height: 1.7; margin-bottom: 16px; }
@media (max-width: 1000px) {
    .how-to-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .how-to { padding: 32px 24px; margin-bottom: 45px; }
    .how-to-steps { grid-template-columns: 1fr; gap: 24px; }
    .step-number { font-size: 32px; margin-bottom: 12px; }
}