/* Warm, light bento cards: one deliberate surface for each step. */
main>section.how-section { background:#fdfcfb; color:#292824; padding:56px max(5%,24px) 100px; scroll-margin-top:80px; }
.how-intro { max-width:680px; margin:0 auto 58px; text-align:center; }
.how-eyebrow { display:block; color:#78746e; font:500 14px/1.5 'Inter',Arial,sans-serif; margin-bottom:20px; }
.how-intro h2 { font:400 clamp(40px,5vw,64px)/1.05 'Instrument Serif',Georgia,serif; letter-spacing:-.035em; margin:0 0 22px; }
.how-intro>p { font:400 18px/1.6 'Inter',Arial,sans-serif; color:#706c66; max-width:500px; margin:auto; }
.how-steps { max-width:1120px; margin:auto; display:grid; gap:20px; }
.how-step { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(30px,4vw,64px); align-items:center; min-height:380px; padding:42px clamp(28px,4vw,56px); border:1px solid #e6e2db; border-radius:30px; background:linear-gradient(135deg,#fffefd 0%,#f5f2ed 100%); box-shadow:0 3px 5px #37302503,0 12px 32px #37302505,inset 0 1px 0 #ffffff; overflow:hidden; }
.how-step:nth-child(even) { background:linear-gradient(135deg,#f8f6f2 0%,#fffefd 100%); }
.how-copy { grid-column:2; grid-row:1; max-width:410px; position:relative; z-index:1; }
.how-visual { grid-column:1; grid-row:1; min-width:0; display:flex; align-items:center; justify-content:center; }
.how-step-first { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.how-step-first .how-copy { grid-column:1; }
.how-step-first .how-visual { grid-column:2; }
.how-number { display:inline-block; color:#77716a; font:500 12px/1.5 'Inter',Arial,sans-serif; margin-bottom:20px; border:1px solid #e3ded6; border-radius:100px; padding:7px 12px; background:#ffffff85; }
.how-copy h3 { font:400 clamp(34px,3.8vw,49px)/1.06 'Instrument Serif',Georgia,serif; letter-spacing:-.035em; margin:0 0 22px; color:#292824; }
.how-copy p { color:#6d6861; font:400 17px/1.65 'Inter',Arial,sans-serif; letter-spacing:-.015em; margin:0; }
.how-copy p+p { margin-top:16px; }
.how-visual img { display:block; width:112%; max-width:none; height:auto; object-fit:contain; mix-blend-mode:multiply; }
/* Actual hero input, sitting on a warm neutral inset instead of a green panel. */
.how-input-preview { width:100%; padding:48px 18px; border-radius:24px; border:1px solid #e7e1d8; background:radial-gradient(ellipse at 50% 0%,#fffefb,#eeebe5); box-shadow:inset 0 1px 0 #fff,0 16px 32px #40362705; }
.how-input-preview .hero-demo-input { width:100%; background:#fffefd; border-color:#e7e2da; box-shadow:0 8px 22px #4036270c,inset 0 1px 0 #fff; }
.how-input-preview .hero-demo-line { font-size:clamp(14px,1.15vw,18px); overflow:hidden; text-overflow:ellipsis; }
.how-demo-mic { display:flex; flex:0 0 20px; color:#7b766f; }
.how-demo-mic svg { width:20px; height:20px; }
@media(max-width:750px) {
 main>section.how-section { padding:40px 20px 64px; }
 .how-intro { margin-bottom:30px; }
 .how-intro>p { font-size:16px; }
 .how-steps { gap:16px; }
 .how-step,.how-step-first { grid-template-columns:minmax(0,1fr); gap:24px; min-height:0; padding:30px 24px 24px; border-radius:24px; }
 .how-step .how-copy,.how-step-first .how-copy { grid-column:1; grid-row:1; max-width:500px; }
 .how-step .how-visual,.how-step-first .how-visual { grid-column:1; grid-row:2; }
 .how-number { margin-bottom:18px; font-size:11px; }
 .how-copy h3 { font-size:38px; margin-bottom:18px; }
 .how-copy p { font-size:16px; line-height:1.6; }
 .how-visual img,.how-visual-phone img { width:112%; max-width:550px; height:auto; object-fit:contain; }
 .how-input-preview { padding:32px 10px; border-radius:18px; }
 .how-input-preview .hero-demo-line { font-size:clamp(11px,3.1vw,16px); }
 .how-input-preview .hero-demo-input { gap:7px; padding:0 9px; }
 .how-input-preview .demo-computer,.how-input-preview .demo-computer svg { width:18px; height:18px; flex-basis:18px; }
 .how-demo-mic,.how-demo-mic svg { width:17px; height:17px; flex-basis:17px; }
}

/* Natural green foliage at 30% opacity behind stationary reeded glass, steps 01 and 04 only. */
.how-step-leafy { position:relative; isolation:isolate; background:#f3f1ec; }
.how-step-leafy:nth-child(even) { background:#f3f1ec; }
.how-atmosphere { --forest-image:url(leaf-wall.png); position:absolute; inset:0; z-index:0; border-radius:inherit; overflow:hidden; pointer-events:none; isolation:isolate; }
.how-atmosphere::before { content:''; position:absolute; inset:-180px -140px; background-image:var(--forest-image); background-size:cover; background-position:40% 50%; opacity:.3; filter:none; transform:translate3d(var(--bento-image-x,0px),var(--bento-image-y,0px),0); }
.how-step-release .how-atmosphere::before { background-position:70% 50%; }
/* Fixed highlights also provide a gracefully degraded glass layer without WebGL. */
.how-atmosphere::after { content:''; position:absolute; inset:0; z-index:1; background:repeating-linear-gradient(90deg,#ffffff20 0px,#ffffff05 7px,#867f7110 15px,#ffffff30 20px,#ffffff08 24px); }
.how-atmosphere .forest-refraction-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; visibility:hidden; pointer-events:none; }
.how-atmosphere.forest-shader-ready::before { visibility:hidden; }
.how-atmosphere.forest-shader-ready .forest-refraction-canvas { visibility:visible; }
.how-atmosphere.forest-shader-ready::after { opacity:.45; }
/* Readability veil stays attached to the card, as do all foreground objects. */
.how-step-leafy::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,#fffdfaee 0%,#fffdfacc 32%,#fffdfa55 62%,#fffdfa18 100%); }
.how-step-release::after { background:linear-gradient(90deg,#fffdfa18 0%,#fffdfa55 38%,#fffdfadb 67%,#fffdfaf0 100%); }
.how-step-leafy .how-copy,.how-step-leafy .how-visual { position:relative; z-index:2; }
.how-step-first .how-input-preview { background:linear-gradient(135deg,#fffefd9c,#f4f1eb80); border-color:#ffffffb3; box-shadow:inset 0 1px 0 #ffffffd9,0 16px 32px #40362708; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
@media(max-width:750px) {
 .how-step-leafy::after,.how-step-release::after { background:linear-gradient(180deg,#fffdfaf2 0%,#fffdfad9 36%,#fffdfa55 66%,#fffdfa22 100%); }
}
@media(max-width:700px) { .how-atmosphere::before { inset:-116px -84px; } }
@media(prefers-reduced-motion:reduce) { .how-atmosphere::before { inset:0; transform:none; } }

/* Opening bento: the existing request input and one shared pool of expertise. */
.request-input-visual { position:absolute; z-index:2; left:12%; right:12%; top:190px; }
.request-input-visual .how-input-preview { max-width:730px; margin:auto; padding:38px 28px; border-color:#ffffff45; background:linear-gradient(135deg,#ffffff26,#e9efdf14); box-shadow:inset 0 1px #ffffff50,0 20px 50px #071e1820; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.request-input-visual .hero-demo-line { font-size:clamp(16px,1.8vw,22px); }
.talent-disciplines { position:absolute; z-index:1; left:30px; right:30px; bottom:28px; display:grid; gap:9px; color:#edf3e7; }
.talent-discipline { display:flex; align-items:center; gap:17px; padding:14px 18px; border:1px solid #ffffff36; border-radius:12px; background:linear-gradient(120deg,#ffffff14,#ffffff07); box-shadow:inset 0 1px #ffffff17; font:400 16px/1.3 'Inter',Arial,sans-serif; }
.talent-discipline>span:first-child { width:29px; flex:0 0 29px; color:#dcefa6; font:500 22px/1 'Inter',Arial,sans-serif; text-align:center; }
.talent-subscription { display:flex; align-items:center; justify-content:center; gap:10px; padding-top:9px; color:#d5e0cd; font:400 12px/1.5 'Inter',Arial,sans-serif; }
.talent-subscription img { width:19px; height:19px; object-fit:contain; filter:brightness(0) invert(1); opacity:.8; }
.how-notification-visual img { width:120%; mix-blend-mode:normal; }
.how-ticket-visual img { width:112%; mix-blend-mode:normal; }
@media(max-width:850px) { .request-input-visual { left:7%; right:7%; top:192px; } .talent-disciplines { left:23px; right:23px; bottom:25px; gap:8px; } .talent-discipline { padding:11px 15px; font-size:15px; } }
@media(max-width:700px) { .request-input-visual { left:5%; right:5%; top:192px; } .request-input-visual .how-input-preview { padding:30px 12px; } .request-input-visual .hero-demo-line { font-size:clamp(12px,3.5vw,18px); } }

/* Shared workspace shown consistently across web and mobile. */
.connected-story .story-copy { right:30px; max-width:430px; }
.connected-product-visual { position:absolute; z-index:1; left:2%; right:2%; top:195px; bottom:12px; pointer-events:none; }
.connected-product-visual img { display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; }
@media(max-width:700px) { .connected-story .story-copy { right:23px; } .connected-product-visual { left:0; right:0; top:177px; bottom:5px; } }

.connected-device-composite { display:block; width:100%; height:100%; }

/* Match the first bento's card typography, retaining light-section contrast. */
.how-copy h3 { font-family:'Inter',Arial,sans-serif; font-size:25px; font-weight:400; line-height:1.2; letter-spacing:-.04em; margin:0 0 11px; }
.how-copy p { font-family:'Inter',Arial,sans-serif; font-size:16px; font-weight:400; line-height:1.45; letter-spacing:-.015em; }
@media(max-width:700px) {
 .how-copy h3 { font-size:22px; }
 .how-copy p { font-size:14px; line-height:1.45; }
 .how-copy p br { display:none; }
}

/* A single full-width column, matching the second bento's row structure. */
#features.feature-story { grid-template-columns:minmax(0,1fr); }
#features > .story-card { grid-column:1 / -1; }
@media(min-width:851px) {
 #features > .connected-story,#features > .progress-story { height:450px; min-height:450px; max-height:450px; }
 #features > .connected-story .story-copy { left:auto; right:36px; top:50%; transform:translateY(-50%); width:32%; max-width:350px; }
 #features > .connected-story .connected-product-visual { left:2%; right:39%; top:30px; bottom:25px; }
 #features > .progress-story .story-copy { left:36px; right:auto; top:50%; transform:translateY(-50%); width:32%; max-width:350px; }
 #features > .progress-story .product-quarter-crop { left:auto; right:2%; top:50%; bottom:auto; transform:translateY(-50%); width:60%; max-width:620px; }
}

@media(min-width:751px) {
 .how-steps > .how-step:nth-child(3) { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
 .how-steps > .how-step:nth-child(3) .how-copy { grid-column:1; }
 .how-steps > .how-step:nth-child(3) .how-visual { grid-column:2; }
}

/* Larger corner-peeking board, with consistent first-bento card heights. */
@media(max-width:1100px) {
 #features > .story-card { height:450px; min-height:450px; max-height:450px; }
 #features > .progress-story .story-copy { left:30px; right:28px; top:30px; width:auto; max-width:none; transform:none; }
 #features > .progress-story .product-quarter-crop { left:auto; right:min(-30px,calc(86% - clamp(540px,90%,650px))); top:auto; bottom:-130px; width:clamp(540px,90%,650px); max-width:none; transform:none; }
}
@media(max-width:700px) {
 #features > .story-card { height:440px; min-height:440px; max-height:440px; }
 #features > .progress-story .story-copy { left:23px; right:23px; top:26px; }
 #features > .progress-story .product-quarter-crop { right:min(-30px,calc(88% - 540px)); bottom:-105px; width:540px; }
}