/* A product's journey, from a loose sketch to a box at the door. */
.how-section {position:relative; padding:88px 0 35px; color:#fffaf1; background:radial-gradient(ellipse at 95% 0%, #27635e 0%, transparent 53%), #153d3c; overflow:hidden;}
.how-layout {display:block; position:relative;}
.how-intro {display:flex; justify-content:space-between; align-items:flex-end; gap:65px; margin-bottom:48px;}
.how-intro .eyebrow {color:#b7d5c8; font-size:10px; margin-bottom:22px;}
.journey-dot {width:7px; height:7px; border-radius:50%; background:#c4f1a7; box-shadow:0 0 0 5px #c4f1a712; flex-shrink:0;}
.how-intro h2 {font-family:'Bricolage Grotesque',var(--sans); font-size:clamp(42px,4.2vw,60px); font-weight:550; line-height:1.08; letter-spacing:-2px;}
.how-intro h2 em {font:inherit; color:#c4f1a7;}
.how-intro-copy {max-width:365px; padding-bottom:6px;}
.how-intro-copy > p {font-size:15px; line-height:1.8; color:#c4d5ce;}
.how-section .text-link {font-size:14px; border-color:#bce4c24d; padding-bottom:9px; color:#e0f7cd; gap:28px; margin-top:21px;}
.how-section .text-link:focus-visible {outline-color:#c4f1a7;}
.how-section .text-link:hover {color:#fff; border-color:#fff;}
.how-section .text-link svg {width:23px; height:23px; --wand-tip:#c4f1a7;}
.steps {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px;}
.steps li, .steps li:first-child, .steps li:last-child {display:block; min-width:0; padding:0; border:0; position:relative;}
.journey-scene {height:260px; position:relative; border-radius:15px; isolation:isolate; color:#244846;}
.steps li:not(:last-child)::after {content:'→'; position:absolute; top:114px; right:-27px; z-index:5; width:32px; height:32px; border:5px solid #153d3c; background:#c4f1a7; color:#234e47; border-radius:50%; display:grid; place-items:center; font-size:15px; line-height:1;}
.scene-kicker {position:absolute; top:18px; left:19px; right:12px; font-size:8px; font-weight:650; letter-spacing:1.05px; z-index:2;}
.scene-dream {background:#f3dfbc; background-image:linear-gradient(#9d7b4310 1px,transparent 1px),linear-gradient(90deg,#9d7b4310 1px,transparent 1px); background-size:18px 18px;}
.concept-note {position:absolute; left:14%; top:49px; width:73%; height:186px; padding:13px 12px 8px; transform:rotate(-6deg); background:#fffdf3; box-shadow:0 6px 9px #79613e20;}
.concept-note::before {content:''; position:absolute; top:-8px; width:60px; height:17px; left:calc(50% - 30px); background:#e6af8070; transform:rotate(2deg);}
.concept-note > span {display:block; font-family:var(--serif); font-style:italic; font-size:20px; line-height:1.05;}
.concept-note svg {width:100%; height:105px; stroke-width:1.4;}
.concept-note small {display:block; font-family:monospace; font-size:7px; transform:rotate(2deg);}
.sketch-pencil {position:absolute; width:7px; height:125px; background:linear-gradient(90deg,#b97b24 0 30%,#e8b958 30% 70%,#d69d3a 70%); bottom:14px; right:18px; transform:rotate(17deg); border-radius:2px 2px 0 0; box-shadow:2px 3px 4px #79613e20;}
.sketch-pencil::after {content:''; position:absolute; top:100%; border-left:3.5px solid transparent; border-right:3.5px solid transparent; border-top:11px solid #62533e;}
.scene-source {background:radial-gradient(ellipse at 20% 100%,#bdc8d9,transparent),#e1dceb;}
.material-ring {position:absolute; left:24px; bottom:25px; width:78px; height:163px; transform:rotate(-13deg);}
.material-swatch {position:absolute; inset:0; transform-origin:50% 12px; border-radius:7px; border:1px solid #ffffff55; box-shadow:1px 6px 7px #1c423424;}
.swatch-mint {background:linear-gradient(120deg,#88b7a5,#b2dac2); transform:rotate(-16deg);}
.swatch-peach {background:linear-gradient(120deg,#e4a38a,#f6c6ad); transform:rotate(10deg);}
.swatch-purple {background:linear-gradient(120deg,#a49abf,#ccc4db); transform:rotate(33deg);}
.swatch-pin {position:absolute; width:7px; height:7px; background:#475a57; border:2px solid #f4f4ec; border-radius:50%; top:9px; left:35px;}
.source-paper {position:absolute; width:143px; padding:16px 14px 13px; right:15px; top:77px; transform:rotate(7deg); background:#fffdf3; box-shadow:1px 6px 13px #50486b20; border-radius:2px;}
.source-paper > svg {width:25px; height:25px; margin-bottom:7px;}
.source-paper strong {display:block; font-size:11px; margin-bottom:10px; line-height:1.3;}
.source-paper > span {display:flex; justify-content:space-between; border-top:1px solid #22493615; padding:5px 0; font-size:8px;}
.source-paper i {font-style:normal; color:#268664;}
.scene-sample {background:radial-gradient(ellipse at 45% 45%,#eff7c6,#c1daa5); overflow:hidden;}
.scene-sample img {position:absolute; top:42px; left:calc(50% - 97px); width:194px; height:194px; object-fit:contain; transform:rotate(-7deg); filter:drop-shadow(0 12px 9px #28594d20); z-index:1;}
.sample-orbit {position:absolute; width:220px; height:95px; border:1px solid #52795229; border-radius:50%; left:calc(50% - 110px); top:108px; transform:rotate(-30deg);}
.sample-orbit::after {content:''; position:absolute; inset:-28px 28px; border:1px solid #52795220; border-radius:50%;}
.sample-note {position:absolute; bottom:14px; right:13px; z-index:2; font-family:var(--serif); font-style:italic; font-size:22px; color:#2e5344; transform:rotate(-5deg);}
.scene-deliver {background:radial-gradient(ellipse at 80% 0%,#ffe3c8,transparent),#efba9e; overflow:hidden;}
.parcel {position:absolute; width:174px; height:146px; top:64px; left:calc(50% - 87px); background:linear-gradient(115deg,#bf8d59,#dab27b 62%,#d6ab73); transform:rotate(-9deg); border:1px solid #af7c425e; box-shadow:7px 14px 12px #66412825,inset 0 0 0 2px #f2d5aa30;}
.parcel-tape {position:absolute; height:100%; width:35px; background:#edd8ad89; left:26px; border-inline:1px solid #a37c4430;}
.parcel-wordmark {position:absolute; top:14px; right:14px; color:#694c32; font-size:27px; line-height:1; font-weight:800; letter-spacing:-2px; transform:rotate(1deg);}
.parcel-label {position:absolute; bottom:14px; right:14px; font-family:monospace; font-size:7px; padding:7px 9px; background:#fff9e9; width:94px; color:#3a4c43;}
.parcel-label svg {display:block; width:14px; height:14px; margin-bottom:3px;}
.parcel-label i {display:block; width:100%; height:11px; margin-top:5px; background:repeating-linear-gradient(90deg,#344d42 0 1px,transparent 1px 3px,#344d42 3px 5px,transparent 5px 7px);}
.delivery-stamp {position:absolute; bottom:17px; left:18px; display:flex; align-items:center; gap:12px; color:#754931; font-size:8px; font-weight:650; letter-spacing:1px; transform:rotate(-5deg); line-height:1.5;}
.delivery-stamp svg {width:26px; height:26px;}
.journey-caption {display:flex; gap:12px; padding-top:25px;}
.steps .step-number {font-family:monospace; font-size:11px; font-style:normal; color:#a7cab8; line-height:28px;}
.steps h3 {font-size:20px; line-height:1.3; font-weight:550; margin-bottom:11px; letter-spacing:-.45px;}
.steps p {font-size:12px; line-height:1.8; color:#bfd3ca; max-width:none;}
.steps .step-tag {color:#b9d7a4; font-size:9px; margin-top:16px; letter-spacing:.1px;}
.how-section .approval-note {display:flex; align-items:center; gap:12px; border-top:1px solid #c4e5ce26; margin-top:40px; padding-top:25px; color:#bfd3ca; font-size:13px;}
.how-section .approval-note .icon {color:#c4f1a7; width:25px; height:25px;}
.how-section .approval-note strong {color:#ecf6e7; font-weight:550;}
.how-section .approval-note > span {margin-left:auto; font-size:11px; color:#b5cabf;}

/* A warmer landing after the product journey. Native details stay keyboard accessible. */
.faq-section {display:block; width:100%; border:0; padding:90px 0 80px; background:radial-gradient(ellipse at 3% 75%,#f5cfb98a,transparent 45%),radial-gradient(ellipse at 100% 20%,#d6e8d488,transparent 47%),#f8f1e3;}
.faq-layout {display:grid; grid-template-columns:.86fr 1.14fr; gap:90px;}
.faq-intro .eyebrow {font-size:9px; line-height:1.6; color:#536b5e; margin-bottom:23px;}
.faq-section h2 {font-family:'Bricolage Grotesque',var(--sans); font-size:67px; letter-spacing:-2.7px; line-height:1.03; font-weight:550; color:#1a403d;}
.faq-section h2 em {font:inherit; color:#3d866b;}
.faq-intro > p:not(.eyebrow) {font-size:13px; line-height:1.8; color:#576b62; margin-top:22px;}
.curiosity-art {position:relative; height:190px; width:280px; margin-top:20px; color:#235d4d;}
.curiosity-question {position:absolute; font-family:'Bricolage Grotesque',var(--sans); font-size:166px; font-weight:650; line-height:1; left:83px; top:-2px; transform:rotate(-13deg); color:#387d64; text-shadow:2px 2px 0 #d0e6b1,4px 4px 0 #b2d28e,8px 11px 0 #1e584711;}
.curiosity-orbit {position:absolute; width:188px; height:91px; border:1px solid #a9895780; border-radius:50%; left:31px; top:55px; transform:rotate(-25deg);}
.curiosity-orbit::before {content:''; position:absolute; inset:-30px 38px; border:1px solid #a9895740; border-radius:50%; transform:rotate(-18deg);}
.curiosity-dot {position:absolute; width:33px; height:33px; border-radius:50%; left:36px; top:103px; background:radial-gradient(circle at 30% 24%,#ffe9b0,#e7aa69); box-shadow:3px 4px 7px #b0844220;}
.curiosity-label {position:absolute; left:14px; bottom:2px; font-family:monospace; font-size:8px; letter-spacing:1px; transform:rotate(-4deg); color:#64745b;}
.faq-list {counter-reset:questions; display:flex; flex-direction:column; gap:12px; padding-top:5px;}
.faq-list details {counter-increment:questions; border:1px solid #e1e6d9; border-radius:14px; background:#ffffffa8; box-shadow:0 3px 6px #36584003; transition:background .2s,border-color .2s;}
.faq-list details:hover {border-color:#a7c6ae; background:#ffffffe8;}
.faq-list details[open] {background:#e2eedb; border-color:#b5cdb0;}
.faq-list summary {padding:22px 21px; color:#244a42; font-size:15px; line-height:1.4; gap:18px;}
.faq-list summary::before {content:counter(questions,decimal-leading-zero); font-family:monospace; font-size:10px; color:#688574;}
.faq-list summary span {display:grid; place-items:center; height:29px; width:29px; flex-shrink:0; margin-left:auto; background:#ebeee2; border-radius:50%; font-size:21px; color:#456d58;}
.faq-list details[open] summary span {background:#c8dfbd;}
.faq-list details > p {color:#466353; font-size:13px; line-height:1.85; max-width:none; padding:0 62px 25px 56px;}
.faq-list summary:focus-visible {outline:2px solid #28765e; outline-offset:3px; border-radius:12px;}
@media (min-width:901px) and (max-width:1150px) {
  .how-intro {gap:35px;}
  .how-intro-copy {max-width:310px;}
  .how-intro-copy > p {font-size:13px;}
  .steps {gap:16px;}
  .journey-scene {height:235px;}
  .steps li:not(:last-child)::after {right:-24px; top:101px;}
  .scene-kicker {font-size:7px; left:12px;}
  .concept-note {left:10%; width:78%; top:45px; height:173px; padding:11px 9px;}
  .concept-note > span {font-size:18px;}
  .concept-note svg {height:100px;}
  .concept-note small {font-size:6px;}
  .sketch-pencil {right:9px;}
  .source-paper {width:123px; right:9px; top:61px; padding:12px;}
  .material-ring {left:16px; width:65px; height:140px;}
  .scene-sample img {width:175px; height:175px; left:calc(50% - 87.5px);}
  .parcel {width:151px; height:135px; left:calc(50% - 75.5px); top:58px;}
  .sample-note {font-size:20px;}
  .journey-caption {gap:8px;}
  .steps h3 {font-size:18px;}
  .steps p {font-size:11px;}
  .steps .step-tag {font-size:8px;}
  .faq-layout {gap:55px; grid-template-columns:.8fr 1.2fr;}
  .faq-list summary {font-size:14px; padding:21px 17px; gap:13px;}
}
@media (max-width:900px) {
  .how-section {padding:60px 0 30px;}
  .how-intro {align-items:flex-start; gap:30px;}
  .how-intro-copy {max-width:280px;}
  .how-intro-copy > p {font-size:12px;}
  .how-intro h2, .how-intro h2 em {font-size:40px;}
  .steps {grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 22px; margin-top:0;}
  .steps li:nth-child(2)::after {display:none;}
  .faq-section {padding:60px 0;}
  .faq-layout {gap:35px; grid-template-columns:.75fr 1.25fr;}
  .faq-section h2, .faq-section h2 em {font-size:52px;}
  .faq-list summary {font-size:13px; padding:18px 15px; gap:10px;}
  .faq-list details > p {padding:0 25px 20px 39px; font-size:12px;}
  .curiosity-art {transform:scale(.85); transform-origin:left top; width:240px;}
}
@media (max-width:650px) {
  .how-intro {display:block; margin-bottom:30px;}
  .how-intro-copy {margin-top:22px; max-width:100%;}
  .how-intro h2, .how-intro h2 em {font-size:39px;}
  .steps {grid-template-columns:1fr; gap:30px;}
  .steps li::after {display:none!important;}
  .journey-scene {height:255px;}
  .concept-note {width:200px; left:calc(50% - 100px);}
  .material-ring {left:calc(50% - 92px);}
  .source-paper {right:calc(50% - 107px);}
  .how-section .approval-note {align-items:flex-start; flex-wrap:wrap; font-size:12px; margin-top:30px;}
  .how-section .approval-note > span {width:100%; margin-left:37px; margin-top:-9px; font-size:10px;}
  .faq-layout {display:block;}
  .faq-section h2 {margin-bottom:0;}
  .faq-section h2 em {margin-left:5px;}
  .faq-intro > p:not(.eyebrow) {margin-top:15px;}
  .curiosity-art {display:none;}
  .faq-list {margin-top:25px;}
}