/* LAB53 Quick Fit / Precision Fit browser-preview styles */
.modeIntro { display:flex; justify-content:space-between; gap:16px; align-items:center; border-bottom:1px solid #bbb; padding-bottom:20px; margin-bottom:24px }
.modeIntro p { max-width:430px; margin:6px 0; color:#56534e; line-height:1.45 }
.modeTag { background:#151515; color:white; border-radius:999px; padding:9px 13px; font-size:10px; font-weight:900; letter-spacing:.08em }
.modeGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:26px 0 }
.modeCard { border:0; border-radius:26px; min-height:330px; display:flex; flex-direction:column; align-items:flex-start; padding:28px; text-align:left; cursor:pointer; transition:transform .15s; }
.modeCard:focus-visible,.continue:focus-visible,.secondaryBtn:focus-visible { outline:3px solid #ad573b; outline-offset:4px }
.modeCard.dark { background:#111; color:white }
.modeCard.light { background:#dfd9cd; color:#111; border:1px solid #bfb6a6 }
.modeCard .modeNumber { font-size:10px; font-weight:900; letter-spacing:.11em; opacity:.7 }
.modeCard strong { display:block; font-size:clamp(32px,5vw,52px); line-height:.96; letter-spacing:-.055em; margin:52px 0 18px }
.modeCard>span:not(.modeNumber) { font-size:15px; line-height:1.5; max-width:245px; margin-bottom:24px }
.modeCard b { font-size:12px; letter-spacing:.12em; margin-top:auto }
.modeFootnote { line-height:1.5; color:#59544b; font-size:14px }
.homeCleat { width:100%; background:#e1dcd1; border:1px solid #b4aea4; border-radius:22px; margin-top:16px; padding:22px 26px; display:flex; justify-content:space-between; gap:14px; align-items:center; text-align:left; cursor:pointer }
.homeCleat strong { font-size:22px; font-weight:900; display:block; margin-top:6px }
.homeCleat b { font-size:26px }
.flowEyebrow { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; border-bottom:1px solid #c0bcb5; padding-bottom:14px; margin:4px 0 26px }
.flowEyebrow span { font-weight:900; letter-spacing:.09em; font-size:10px }
.flowEyebrow span:first-child { padding:9px 12px; background:#151515; color:white; border-radius:50px }
.flowHint { line-height:1.5; color:#65615a; font-size:13px; max-width:660px; margin:20px 0 }
.formError { color:#9b2b13; font-size:14px; font-weight:700 }
.journeyStrip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:24px 0 10px }
.journeyStrip div { border:1px solid #c9c4b9; border-radius:13px; font-size:11px; font-weight:800; padding:14px 10px; display:flex; align-items:center; gap:7px }
.journeyStrip b { font-weight:900; font-size:11px; opacity:.6 }
.journeyStrip .done { background:#e5e1d9; border-color:#e5e1d9 }
.journeyStrip .active { background:#111; color:#fff; border-color:#111 }
.fitExtras { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:-17px 0 36px }
.fitExtras section { padding:24px; border:1px solid #c4beb5; border-radius:22px; background:#e7e2d8; min-width:0 }
.fitExtras h3 { margin:10px 0; font-size:25px; letter-spacing:-.03em }
.fitExtras p { line-height:1.5; color:#5b5750; margin-bottom:20px; }
.fitExtras .secondaryBtn { display:inline-block; padding:13px 15px; background:#fff; font-size:11px }
.infoPanel { background:#e3ded5; padding:20px; border-radius:20px; margin:18px 0; line-height:1.5; }
.infoPanel strong { font-size:12px; letter-spacing:.06em }
.infoPanel p { margin-bottom:0 }
.instructionGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:30px 0 }
.instructionGrid article { background:white; border-radius:20px; padding:18px; min-width:0 }
.instructionGrid span { background:#111; color:white; display:grid; width:36px; height:36px; place-items:center; border-radius:50%; font-size:12px; font-weight:900 }
.instructionGrid h3 { font-size:17px; margin:22px 0 8px }
.instructionGrid p { font-size:14px; line-height:1.5; color:#56534e }
.cardSample { background:white; border-radius:24px; padding:26px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:25px; align-items:center; margin:20px 0 }
.cardSample img { width:100%; height:auto; border:1px solid #aaa; border-radius:9px }
.cardSample h3 { margin:10px 0; font-size:25px; letter-spacing:-.03em }
.cardSample p { color:#5e5951; line-height:1.5 }
.cardSample .secondaryBtn { display:inline-block; text-decoration:none; padding:13px 17px; font-size:11px }
.cleatForm { background:white; padding:22px; border-radius:22px; max-width:560px; margin-top:20px }
.cleatForm label { display:block; font-size:11px; font-weight:900; letter-spacing:.08em; margin:0 0 18px }
.cleatForm select,.cleatForm input { display:block; margin-top:10px; width:100%; padding:13px; min-height:46px; font-size:16px; border:1px solid #c6bfb5; border-radius:12px; background:#fff }
.photoPreview { background:#e1ded6; border-radius:20px; padding:12px; max-width:620px }
.photoPreview img { display:block; width:100%; max-height:430px; object-fit:contain }
@media(hover:hover) and (pointer:fine) { .modeCard:hover { transform:translateY(-3px) } }
@media(max-width:620px) {
  .modeGrid,.fitExtras,.cardSample { grid-template-columns:1fr }
  .modeCard { min-height:270px }
  .modeCard strong { margin:35px 0 14px }
  .modeIntro { flex-direction:column; align-items:flex-start }
  .journeyStrip { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .instructionGrid { grid-template-columns:1fr }
  .homeCleat { padding:20px }
}
@media(prefers-reduced-motion:reduce) { .modeCard { transition:none } }