/* STRIDE's shared visual rules. Component-specific layout stays in its own stylesheet. */
:root{
 --font-ui:'DM Sans','Noto Sans KR',sans-serif;
 --font-editorial:Georgia,'Times New Roman',serif;
 --font-label:ui-monospace,'Cascadia Mono','Consolas',monospace;
 --brand-accent:#baff00;
 --page-gutter:clamp(28px,7vw,144px);
 --heading-size:clamp(40px,4.5vw,64px);
 --heading-secondary:clamp(32px,4vw,56px);
 --label-size:12px;
 --label-gap:24px;
 --control-radius:4px;
 --action-height:52px;
 --action-color:var(--brand-accent);
}
.lineup{--action-color:#365127}

/* One starting line for section titles, body copy and closing information. */
.section,.lineup{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.experience-content{left:var(--page-gutter);right:var(--page-gutter)}
.photo-note,.detail-disclaimer{right:var(--page-gutter)}
.detail-heading{left:var(--page-gutter)}
.detail-steps{left:var(--page-gutter);right:var(--page-gutter)}
.collection-motion:before{left:var(--page-gutter);right:var(--page-gutter)}
footer{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.story-stage h1,.story-stage .hero-top,.story-stage .hero-copy{left:calc(var(--page-gutter) - 9px)}

/* Chapter labels share the same typeface, rhythm and case on light/dark surfaces. */
.section-label,.lineup-eyebrow,.lab-eyebrow,.detail-heading>span,.story-stage .hero-top .eyebrow{
 font:400 var(--label-size)/1.6 var(--font-label);
 letter-spacing:1.2px;text-transform:uppercase;
}
.lineup-eyebrow{margin:0 0 var(--label-gap)}
.section-heading{margin-top:var(--label-gap)}
.collection-layout{margin-top:var(--label-gap)}
.detail-heading h2{margin-top:var(--label-gap)}
.lab-intro h3{margin-top:var(--label-gap)}

/* Quiet section headings; the condensed face is reserved for the product wordmark. */
.lineup h2,.technology .section-heading h2,.experience h2,.detail-heading h2{
 font:400 var(--heading-size)/1.1 var(--font-ui);
 letter-spacing:-2px;text-transform:none;
}
.lab-intro h3{font:400 var(--heading-secondary)/1.18 var(--font-ui);letter-spacing:-1.8px}
.story-stage h1 span,.lineup h2 em,.experience h2 em,.detail-heading h2 em{
 font-family:var(--font-editorial);font-weight:400;font-style:normal;
}
.experience h2{margin:var(--label-gap) 0 28px}
.experience-content>p{max-width:440px}

/* Primary actions: same silhouette, touch area and inset arrow everywhere. */
.pill,.story-stage .pill{
 display:inline-flex;align-items:center;justify-content:space-between;gap:24px;
 min-height:var(--action-height);max-width:100%;padding:6px 6px 6px 20px;
 border:1px solid transparent;border-radius:var(--control-radius);
 background:var(--brand-accent);color:#17210f;
 font:600 14px/1.4 var(--font-ui);letter-spacing:0;
 transition:background .2s,transform .2s;
}
.pill span,.story-stage .pill span{
 display:inline-grid;place-items:center;flex:0 0 36px;width:36px;height:36px;padding:0;
 background:#17210f;color:var(--brand-accent);border-radius:2px;font-size:19px;line-height:1;
}
.pill:hover,.story-stage .pill:hover{background:#d0ff5b;transform:translateY(-2px)}
.text-link,.lineup-link{
 min-height:48px;padding:12px 0;gap:30px;border-bottom:1px solid currentColor;
 font:500 14px/1.5 var(--font-ui);
}
.text-link span,.lineup-link span{color:var(--action-color);font-size:18px}

/* Selection controls stay distinct from navigation actions and circular color swatches. */
.lineup-filters button,.lab-activities button,.lab-phase-controls button,.detail-steps button,.detail-steps a{
 border-radius:var(--control-radius);font-family:var(--font-ui);font-size:12px;line-height:1.5;
}
.lineup-filters button,.lab-activities button{min-height:44px;padding:10px 16px}
.lab-activities [aria-pressed=true]{background:var(--brand-accent);border-color:var(--brand-accent);color:#17210f}
.lab-demo-label{border-radius:2px}
.collection-motion:before{background:var(--brand-accent)}

@media(max-width:700px){
 :root{--page-gutter:20px;--heading-size:38px;--heading-secondary:34px}
 .story-stage .hero-top{left:0;width:100%}
 .story-stage h1{left:0;width:100%;padding:0 var(--page-gutter)}
 .story-stage .hero-copy{left:calc(var(--page-gutter) - 6px);right:calc(var(--page-gutter) - 6px)}
 .story-stage .hero-top .eyebrow{max-width:calc(100% - 32px);text-align:center;letter-spacing:.5px}
 .lineup h2,.experience h2{letter-spacing:-1.5px}
 .lab-intro h3{letter-spacing:-1.5px}
 .detail-steps button,.detail-steps a{padding:8px 4px}
 .lineup-filters button{padding:10px 12px}
}
@media(prefers-reduced-motion:reduce){.pill,.story-stage .pill{transition:none}.pill:hover,.story-stage .pill:hover{transform:none}}

.section-heading h2,.lineup-product>p,.section-heading>p,.features p,.lab-phase-copy p,.detail-callouts p,.collection-intro,.muted{word-break:keep-all;overflow-wrap:break-word}