.basics-intro{max-width:52rem}
.compare-grid,.boat-grid,.stroke-grid,.parts-grid,.life-grid{display:grid;gap:.75rem}
.compare-grid{grid-template-columns:1fr 1fr}
.boat-grid{grid-template-columns:repeat(4,1fr)}
.stroke-grid{grid-template-columns:repeat(4,1fr)}
.parts-grid{grid-template-columns:repeat(3,1fr)}
.life-grid{grid-template-columns:repeat(5,1fr)}
.basics-panel{background:var(--white);border:1px solid var(--line);padding:clamp(1.2rem,3vw,2rem)}
.basics-panel.dark{background:var(--navy);color:var(--white)}
.basics-panel.dark p{color:#bfd0d4}
.basics-code{font-size:clamp(2rem,5vw,4rem);font-weight:900;letter-spacing:-.05em;color:var(--accent)}
.boat-shape{height:7rem;position:relative;margin-bottom:1rem}
.boat-shape::before{content:"";position:absolute;left:5%;right:5%;top:48%;height:9px;border-radius:60% 60% 55% 55%;background:var(--navy)}
.boat-shape.scull::after{content:"";position:absolute;left:18%;right:18%;top:45%;height:2px;background:var(--accent);transform:rotate(-17deg);box-shadow:0 11px 0 var(--accent)}
.boat-shape.sweep::after{content:"";position:absolute;left:13%;right:13%;top:48%;height:2px;background:var(--accent);transform:rotate(-22deg)}
.eight-line{display:grid;grid-template-columns:repeat(8,minmax(2.3rem,1fr));gap:.35rem;overflow-x:auto;padding:.8rem 0}
.eight-line span{min-width:2.3rem;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:var(--paper-2);font-weight:850}
.stroke-step{position:relative;padding-top:3rem}
.stroke-step::before{content:attr(data-step);position:absolute;top:0;left:0;color:var(--accent);font-weight:900;font-size:1.7rem}
.part-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;padding:0;list-style:none}
.part-list li{padding:.8rem;background:var(--paper);border-left:3px solid var(--water)}
.race-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.race-strip div{padding:1rem;background:var(--white);border-top:4px solid var(--accent)}
.route-banner{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;padding:1.2rem;background:var(--navy);color:var(--white)}
.route-banner p{margin:0;color:#bfd0d4}
@media(max-width:900px){.boat-grid,.stroke-grid{grid-template-columns:repeat(2,1fr)}.parts-grid{grid-template-columns:repeat(2,1fr)}.life-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.compare-grid,.boat-grid,.stroke-grid,.parts-grid,.life-grid,.race-strip{grid-template-columns:1fr}.part-list{grid-template-columns:1fr}.route-banner{grid-template-columns:1fr}}