:root {
  --maroon: #681528;
  --maroon-dark: #3d0b17;
  --maroon-soft: #84233a;
  --gold: #d7ae55;
  --gold-light: #f2d993;
  --cream: #fbf8f1;
  --paper: #fffefa;
  --ink: #261d1f;
  --muted: #716568;
  --line: #e8ded7;
  --success: #1f7250;
  --danger: #b03b3f;
  --shadow: 0 22px 60px rgba(67, 21, 29, .10);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; background: white; color: var(--maroon); padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.site-header { position: sticky; top: 0; z-index: 50; min-height: 76px; padding: 12px clamp(18px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(251,248,241,.94); border-bottom: 1px solid rgba(104,21,40,.10); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--maroon); color: var(--gold-light); font-family: Georgia, serif; font-size: 22px; font-weight: 700; letter-spacing: -.06em; box-shadow: 0 8px 24px rgba(104,21,40,.22); }
.brand-copy { display: grid; line-height: 1.12; }
.brand-copy strong { color: var(--maroon); font-size: 16px; }
.brand-copy small { margin-top: 4px; color: var(--muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.header-progress { width: min(220px, 30vw); display: grid; gap: 6px; color: var(--maroon); font-size: 12px; font-weight: 800; text-align: right; }
.progress-track { height: 5px; overflow: hidden; background: #e4d9d4; border-radius: 999px; }
.progress-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--gold),var(--maroon)); border-radius: inherit; transition: width .4s ease; }

.hero { min-height: 650px; padding: clamp(72px, 9vw, 128px) clamp(22px, 8vw, 120px); position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); align-items: center; gap: clamp(50px, 8vw, 120px); background: radial-gradient(circle at 76% 25%, rgba(215,174,85,.18), transparent 28%), linear-gradient(135deg, #fdfaf4 0%, #f6ede4 100%); }
.hero::before { content: ""; position: absolute; width: 520px; height: 520px; border: 1px solid rgba(104,21,40,.09); border-radius: 50%; right: -220px; top: -180px; box-shadow: 0 0 0 70px rgba(104,21,40,.025), 0 0 0 140px rgba(104,21,40,.018); }
.eyebrow { display: inline-block; color: var(--maroon); font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.hero h1 { max-width: 740px; margin: 18px 0 24px; color: var(--maroon-dark); font-family: Georgia, "Times New Roman", serif; font-size: clamp(48px, 6.5vw, 88px); font-weight: 500; line-height: .99; letter-spacing: -.045em; }
.hero h1 em { color: var(--maroon); font-weight: 500; }
.hero-copy > p { max-width: 610px; margin: 0 0 34px; color: #5f5355; font-size: clamp(17px, 2vw, 21px); }
.primary-button, .secondary-button { min-height: 50px; padding: 0 20px; border-radius: 14px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 24px; cursor: pointer; font-weight: 850; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.primary-button { background: var(--maroon); color: white; box-shadow: 0 14px 32px rgba(104,21,40,.2); }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(104,21,40,.26); }
.secondary-button { background: #f4eadd; color: var(--maroon); border: 1px solid rgba(104,21,40,.14); }
.secondary-button:hover { background: #eadbc9; transform: translateY(-1px); }
.hero-card { min-height: 430px; padding: 38px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; background: var(--maroon); color: white; border: 1px solid rgba(255,255,255,.12); border-radius: 40px; box-shadow: 0 38px 85px rgba(61,11,23,.28); }
.hero-card::after { content:""; position:absolute; inset:0; background: linear-gradient(145deg,rgba(255,255,255,.07),transparent 42%); pointer-events:none; }
.pulse-orbit { align-self: flex-end; width: 175px; height: 175px; display: grid; place-items: center; position: relative; }
.orbit-ring { position: absolute; inset: 5px; border: 1px solid rgba(242,217,147,.36); border-radius: 50%; box-shadow: 0 0 0 22px rgba(242,217,147,.05), 0 0 0 44px rgba(242,217,147,.03); animation: breathe 3s ease-in-out infinite; }
.heart-line { color: var(--gold-light); font-size: 54px; filter: drop-shadow(0 4px 18px rgba(215,174,85,.4)); animation: pulse 1.4s ease-in-out infinite; }
.hero-card-copy { display: grid; gap: 10px; max-width: 350px; }
.hero-card-copy span { color: var(--gold-light); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero-card-copy strong { font-family: Georgia, serif; font-size: 34px; font-weight: 500; line-height: 1.12; }
.mini-steps { display: flex; gap: 10px; flex-wrap: wrap; color: rgba(255,255,255,.72); font-size: 11px; font-weight: 700; }
.mini-steps span { padding-right: 10px; border-right: 1px solid rgba(255,255,255,.2); }
@keyframes pulse { 0%,100%{transform:scale(1)} 12%{transform:scale(1.12)} 22%{transform:scale(1)} 32%{transform:scale(1.07)} }
@keyframes breathe { 0%,100%{transform:scale(.96);opacity:.72} 50%{transform:scale(1.03);opacity:1} }

.learning-section { padding: clamp(74px, 9vw, 120px) clamp(20px, 8vw, 120px); }
.section-heading { margin-bottom: 42px; display: flex; align-items: flex-start; gap: 18px; }
.section-number { min-width: 48px; padding-top: 5px; color: var(--gold); font-family: Georgia,serif; font-size: 17px; border-top: 2px solid var(--gold); }
.section-heading h2 { margin: 7px 0 0; color: var(--maroon-dark); font-family: Georgia,serif; font-size: clamp(36px,4.6vw,60px); font-weight: 500; line-height: 1.02; letter-spacing: -.03em; }
.section-intro { max-width: 660px; margin: -22px 0 38px 66px; color: var(--muted); font-size: 18px; }
.setup-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(340px,.9fr); gap: 28px; }
.patient-card, .check-card, .placement-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.patient-card { padding: 22px; overflow: hidden; }
.patient-visual { min-height: 350px; display: grid; place-items: center; background: linear-gradient(145deg,#f6eadf,#fcf8f1); border-radius: 18px; }
.patient-visual svg { width: 100%; max-height: 370px; }
.svg-floor { fill:#d6c8c0; }.svg-chair{fill:#7e363f}.svg-skin,.svg-arm,.svg-forearm{fill:#b97657}.svg-hair{fill:#3a2527}.svg-scrub{fill:#681528}.svg-table{fill:#d3aa6c}.svg-cuff{fill:#c6a450;stroke:#fff4cf;stroke-width:3}.svg-leg{fill:none;stroke:#442329;stroke-width:23;stroke-linecap:round;stroke-linejoin:round}.hotspot{fill:#f2d993;stroke:#681528;stroke-width:3;animation:ping 2s infinite}.hot-2{animation-delay:.5s}.hot-3{animation-delay:1s}.heart-guide{stroke:#681528;stroke-width:2;stroke-dasharray:5 6}.heart-guide-label{font-size:11px;fill:#681528;font-weight:800;letter-spacing:.08em}.visual-note { padding: 16px 6px 2px; display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}.visual-note span{width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(215,174,85,.16)}
@keyframes ping{0%,100%{r:7;opacity:.8}50%{r:10;opacity:1}}
.check-card { padding: clamp(26px,4vw,42px); display: flex; flex-direction: column; justify-content: center; }
.card-kicker { color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.check-card h3,.gauge-question h3 { margin: 10px 0 24px; color: var(--maroon-dark); font-family: Georgia,serif; font-size: clamp(24px,2.6vw,35px); font-weight:500;line-height:1.12; }
.answer-list { display: grid; gap: 12px; }
.answer-list.two-column { grid-template-columns: 1fr 1fr; }
.answer { width:100%; min-height:62px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:#fcfaf6;color:var(--ink);display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;font-weight:750;transition:.18s ease; }
.answer span { width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;border:1px solid #d9ccc5;border-radius:9px;color:var(--maroon);font-size:12px; }
.answer:hover,.answer:focus-visible { border-color:var(--gold);transform:translateY(-1px);outline:none;box-shadow:0 8px 22px rgba(67,21,29,.08); }
.answer.correct { background:#eaf5ef;border-color:#6daf8e;color:#155b3e; }
.answer.wrong { background:#faebea;border-color:#d99592;color:#852c31; }
.answer.locked:not(.correct):not(.wrong){opacity:.56}
.feedback { min-height:0; margin-top:0; padding:0; border-radius:12px; font-size:14px; opacity:0; transform:translateY(5px); transition:.22s ease; }
.feedback.show { min-height:52px; margin-top:16px; padding:12px 14px; opacity:1; transform:none; }
.feedback.success { background:#eaf5ef;color:#155b3e; }.feedback.error{background:#faebea;color:#852c31}
.placement-panel { margin-top:28px; padding:30px; display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr);gap:42px;align-items:center; }
.arm-demo { min-height:285px;display:grid;place-items:center;background:linear-gradient(145deg,#f8eee4,#fdfaf5);border-radius:18px;overflow:hidden; }
.arm-shape { width:120px;height:290px;position:relative;background:linear-gradient(90deg,#b9795d,#d69a79 55%,#b87559);border-radius:55px 55px 48px 48px;box-shadow:inset -12px 0 26px rgba(82,30,20,.12); }
.arm-shape::after{content:"";position:absolute;left:18px;right:18px;bottom:54px;height:2px;background:rgba(104,21,40,.22);transform:rotate(-7deg);box-shadow:0 8px 0 rgba(104,21,40,.1)}
.cuff-shape { position:absolute;left:-18px;right:-18px;top:74px;height:74px;border-radius:14px;background:linear-gradient(90deg,#51101f,#7d1f35,#51101f);border:3px solid #d7ae55;box-shadow:0 12px 24px rgba(61,11,23,.25);display:grid;place-items:end center; }
.cuff-shape span{margin-bottom:8px;color:#f2d993;font-size:10px;font-weight:900;letter-spacing:.12em}
.distance-line{position:absolute;left:132px;top:151px;height:44px;border-left:2px dashed var(--gold);color:var(--maroon);white-space:nowrap}.distance-line::before,.distance-line::after{content:"";position:absolute;left:-5px;width:8px;height:8px;border-left:2px solid var(--gold);border-top:2px solid var(--gold);transform:rotate(45deg)}.distance-line::before{top:0}.distance-line::after{bottom:0;transform:rotate(225deg)}.distance-line span{position:absolute;left:12px;top:11px;font-size:12px;font-weight:800}.elbow-line{position:absolute;left:-12px;right:-12px;top:196px;border-top:2px dashed rgba(104,21,40,.35)}
.check-card.compact { padding: 10px 10px 10px 0; box-shadow:none;border:0;background:transparent; }

.gauge-section { color:white;background:radial-gradient(circle at 16% 28%,rgba(215,174,85,.14),transparent 28%),linear-gradient(145deg,#57101f,#2f0812); }
.light-heading .section-number{color:var(--gold-light);border-color:var(--gold-light)}.light-heading .eyebrow{color:var(--gold-light)}.light-heading h2{color:white}
.gauge-layout { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.55fr);gap:28px;align-items:start; }
.gauge-card { padding:clamp(20px,3vw,36px);background:#fffdf8;color:var(--ink);border-radius:32px;box-shadow:0 30px 70px rgba(0,0,0,.22); }
.gauge-topline{display:flex;align-items:center;justify-content:space-between;color:var(--maroon);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.round-pill{padding:7px 11px;background:#f1e6dc;border-radius:999px}
.gauge-wrap{width:min(100%,490px);margin:8px auto 0}.gauge-face{fill:#faf7ef;stroke:#d7ae55;stroke-width:7;filter:drop-shadow(0 16px 24px rgba(61,11,23,.13))}.tick-major{stroke:#681528;stroke-width:4;stroke-linecap:round}.tick-minor{stroke:#8f7276;stroke-width:1.7}.tick-label{fill:#3d0b17;font-size:16px;font-weight:850}.gauge-hub-ring{fill:#eee3d7;stroke:#d7ae55;stroke-width:3}.gauge-needle{stroke:#a22138;stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 3px 2px rgba(45,0,10,.25));transform-origin:210px 210px;transition:transform .55s cubic-bezier(.2,.8,.2,1)}.gauge-hub{fill:#681528;stroke:#f2d993;stroke-width:4}.gauge-brand{fill:#681528;font-family:Georgia,serif;font-weight:800;font-size:23px}.gauge-unit{fill:#8b7477;font-size:12px;font-weight:700;letter-spacing:.12em}
.gauge-question { padding:10px 0 0;display:flex;align-items:end;justify-content:space-between;gap:20px;border-top:1px solid var(--line)}.gauge-question h3{margin-bottom:2px;font-size:26px}.gauge-answers{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}.gauge-choice{min-width:80px;height:48px;border:1px solid var(--line);border-radius:12px;background:#fbf7f0;color:var(--maroon);font-weight:900;cursor:pointer}.gauge-choice:hover{border-color:var(--gold);background:#fff3d2}.gauge-choice.correct{background:#eaf5ef;border-color:#6daf8e;color:#155b3e}.gauge-choice.wrong{background:#faebea;border-color:#d99592;color:#852c31}.gauge-card>.secondary-button{margin-top:14px}
.gauge-tip { padding:28px;display:grid;gap:20px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:24px;backdrop-filter:blur(10px); }
.tip-icon{width:48px;height:48px;display:grid;place-items:center;background:var(--gold);color:var(--maroon-dark);border-radius:50%;font-family:Georgia,serif;font-size:25px;font-weight:800;box-shadow:0 0 0 8px rgba(215,174,85,.12)}
.gauge-tip strong{font-family:Georgia,serif;font-size:27px;font-weight:500}.gauge-tip p{margin:8px 0 0;color:rgba(255,255,255,.72)}.gauge-tip b{color:var(--gold-light)}.micro-guide{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;color:var(--gold-light);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.micro-guide i{height:1px;background:rgba(242,217,147,.38)}

.mistake-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.mistake-card{min-height:210px;padding:22px;position:relative;background:var(--paper);border:1px solid var(--line);border-radius:20px;display:grid;justify-items:start;align-content:end;gap:4px;color:var(--ink);text-align:left;cursor:pointer;box-shadow:0 10px 30px rgba(67,21,29,.06);transition:.18s ease}.mistake-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.mistake-card.selected{border:2px solid var(--maroon);background:#fff8f4}.mistake-card.selected::after{content:"✓";position:absolute;right:16px;top:16px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--maroon);color:white;font-weight:900}.mistake-card.reveal-correct{border-color:#6daf8e;background:#edf7f1}.mistake-card.reveal-wrong{border-color:#d99592;background:#faebea}.mistake-card strong{font-size:16px}.mistake-card small{color:var(--muted)}.mistake-art{position:absolute;left:22px;top:22px;width:70px;height:70px;border-radius:18px;background:#f3e7dc}.mistake-art::before,.mistake-art::after{content:"";position:absolute}.sleeve::before{width:46px;height:22px;left:12px;top:24px;background:#681528;border-radius:6px;box-shadow:inset 0 0 0 3px #d7ae55}.sleeve::after{width:30px;height:10px;left:20px;top:4px;background:#c59880;transform:rotate(80deg);border-radius:10px}.back::before{width:12px;height:50px;left:16px;top:10px;background:#681528;border-radius:6px}.back::after{width:28px;height:40px;left:30px;top:16px;border-left:6px solid #c59880;border-bottom:6px solid #c59880;border-radius:0 0 0 18px}.dangle::before{width:11px;height:50px;left:28px;top:10px;background:#c59880;border-radius:10px;transform:rotate(9deg)}.dangle::after{width:22px;height:8px;left:30px;top:53px;background:#c59880;border-radius:10px;transform:rotate(30deg)}.cross::before{width:9px;height:54px;left:24px;top:10px;background:#681528;border-radius:8px;transform:rotate(26deg)}.cross::after{width:9px;height:54px;left:39px;top:10px;background:#c59880;border-radius:8px;transform:rotate(-28deg)}.feet::before{width:10px;height:44px;left:18px;top:8px;background:#681528;border-radius:8px;box-shadow:26px 0 0 #681528}.feet::after{width:25px;height:8px;left:11px;top:50px;background:#681528;border-radius:8px;box-shadow:27px 0 0 #681528}.talk::before{width:30px;height:22px;left:12px;top:11px;border-radius:50%;border:4px solid #681528}.talk::after{width:30px;height:20px;right:9px;bottom:11px;border-radius:50%;border:4px solid #d7ae55;box-shadow:-2px 12px 0 -8px #d7ae55}
.mistake-actions{margin-top:28px;display:flex;align-items:center;gap:20px}.wide-feedback{flex:1;margin:0!important}.wide-feedback.show{min-height:50px}
.completion-card{margin-top:56px;padding:34px;display:none;grid-template-columns:auto 1fr auto;gap:25px;align-items:center;background:linear-gradient(135deg,#f3e1af,#d7ae55);border-radius:24px;color:var(--maroon-dark);box-shadow:var(--shadow)}.completion-card.show{display:grid;animation:rise .45s ease both}.completion-seal{width:66px;height:66px;display:grid;place-items:center;border:2px solid var(--maroon);border-radius:50%;font-size:30px;font-weight:900}.completion-card h2{margin:5px 0 4px;font-family:Georgia,serif;font-size:30px;font-weight:500}.completion-card p{margin:0;max-width:720px}.completion-card .secondary-button{background:var(--maroon);color:white}.takeaway-strip{margin-top:30px;padding:24px 28px;display:flex;align-items:center;gap:20px;background:var(--maroon);color:white;border-radius:18px}.takeaway-strip span{padding:7px 10px;background:var(--gold);color:var(--maroon-dark);border-radius:8px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.takeaway-strip p{margin:0}.takeaway-strip strong{color:var(--gold-light)}
footer{margin-top:80px;padding-top:28px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.6fr auto auto;gap:24px;align-items:center;color:var(--muted);font-size:12px}footer>div:first-child{display:grid;color:var(--maroon)}footer>div:first-child strong{font-family:Georgia,serif;font-size:20px}footer p{margin:0}.source-links{display:flex;gap:12px}.source-links a{color:var(--maroon);font-weight:800}footer small{white-space:nowrap}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr;min-height:auto}.hero-card{min-height:330px}.pulse-orbit{width:130px;height:130px}.setup-grid,.gauge-layout{grid-template-columns:1fr}.placement-panel{grid-template-columns:1fr}.check-card.compact{padding:12px}.arm-demo{min-height:260px}.arm-shape{transform:scale(.82)}.mistake-grid{grid-template-columns:repeat(2,1fr)}.completion-card{grid-template-columns:auto 1fr}.completion-card .secondary-button{grid-column:1/-1}footer{grid-template-columns:1fr 1fr}.gauge-tip{grid-template-columns:auto 1fr}.micro-guide{grid-column:1/-1}
}
@media (max-width: 620px){
  .site-header{min-height:66px;padding:9px 14px}.brand-mark{width:42px;height:42px;border-radius:12px;font-size:18px}.brand-copy small{display:none}.header-progress{width:110px;font-size:10px}.hero{padding:64px 20px 70px;gap:38px}.hero h1{font-size:48px}.hero-card{padding:25px;min-height:300px;border-radius:28px}.hero-card-copy strong{font-size:27px}.learning-section{padding:68px 16px}.section-heading{gap:12px;margin-bottom:30px}.section-number{min-width:38px}.section-heading h2{font-size:38px}.section-intro{margin:-15px 0 26px}.patient-card{padding:12px}.patient-visual{min-height:260px}.check-card{padding:25px}.answer-list.two-column{grid-template-columns:1fr}.placement-panel{padding:12px;gap:20px}.gauge-section{padding-left:12px;padding-right:12px}.gauge-card{padding:16px;border-radius:24px}.gauge-question{display:block}.gauge-answers{margin-top:16px;justify-content:flex-start}.gauge-choice{flex:1;min-width:72px}.gauge-tip{grid-template-columns:1fr}.micro-guide{grid-column:auto}.mistake-grid{grid-template-columns:1fr 1fr;gap:10px}.mistake-card{min-height:185px;padding:16px}.mistake-art{left:16px;top:16px}.mistake-actions{align-items:stretch;flex-direction:column}.completion-card{grid-template-columns:1fr;text-align:left}.takeaway-strip{align-items:flex-start;flex-direction:column}.source-links{flex-direction:column;gap:4px}footer{grid-template-columns:1fr;gap:14px;margin-top:55px}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}