/* "Our solution" — clean cream screen with four illustrated panels */
.sp { --cream:#F6F1E6; --ink:#1b1d1c; --teal:#12aaba; --orange:#E9762B; background:var(--cream); color:var(--ink); padding:clamp(72px,9vw,130px) 0 clamp(64px,8vw,110px); }
.sp-head { text-align:center; margin:0 auto clamp(48px,7vw,96px); max-width:820px; padding-inline:20px; }
.sp-head .eyebrow { color:var(--orange); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem; margin:0 0 14px; }
.sp-head h2 { font-size:clamp(2.4rem,5.4vw,4.4rem); font-weight:500; letter-spacing:-.03em; line-height:1.05; margin:0 0 16px; color:var(--ink); }
.sp-head p { font-size:1.15rem; color:#4a4d4b; margin:0; }
.sp-row { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:clamp(28px,6vw,96px); min-height:min(640px,80svh); padding-block:clamp(24px,4vw,56px); }
.sp-row + .sp-row { margin-top:clamp(24px,5vw,72px); }
.sp-row--rev .sp-vis { order:-1; }
.cmp .sp-row { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
.sp-row--rev { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
.sp-copy h3 { font-size:clamp(2rem,4vw,3.4rem); font-weight:500; letter-spacing:-.03em; line-height:1.06; margin:0 0 22px; color:var(--ink); }
.sp-copy h3 .dot { color:var(--teal); }
.sp-copy p { font-size:1.15rem; line-height:1.5; color:#2c2f2e; max-width:30em; margin:0 0 34px; }
.sp-cta { display:flex; align-items:center; flex-wrap:wrap; gap:14px 16px; }
.sp-btn { display:inline-flex; padding:16px 26px; border-radius:14px; background:var(--teal); color:#0B1D35; font-weight:600; text-decoration:none; transition:transform .2s ease, filter .2s ease; }
.sp-btn:hover { transform:translateY(-2px); filter:brightness(1.05); }
.sp-or { color:#2c2f2e; }
.sp-link { color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:4px; }

/* illustrated composition */
.sp-vis { position:relative; aspect-ratio:1.12; width:100%; max-width:620px; margin-inline:auto; }
.sp-photo { position:absolute; border-radius:20px; border:6px solid #fff; background:#cfd8d5 center/cover no-repeat; box-shadow:0 18px 44px rgba(30,30,25,.16); }
.sp-pill { position:absolute; display:inline-flex; align-items:center; gap:12px; padding:14px 28px 14px 20px; background:#fff; color:var(--ink); font:600 1.15rem/1 "Caveat","Kalam","Comic Sans MS",cursive; letter-spacing:.08em; text-transform:uppercase; border:3px solid var(--ink); border-radius:46px 58px 50px 54px / 58px 46px 54px 50px; box-shadow:4px 5px 0 -1px var(--ink); white-space:nowrap; }
.sp-pill svg { width:24px; height:24px; flex:none; }
.sp-card { position:absolute; background:#fff; border-radius:18px; padding:20px 22px; box-shadow:0 14px 36px rgba(30,30,25,.14); font-size:.95rem; }
.sp-card b { display:block; font:600 1.05rem/1 "Caveat","Kalam",cursive; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px; }
.sp-card ul { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.sp-card li { display:flex; align-items:center; justify-content:space-between; gap:22px; color:#2c2f2e; }
.sp-card li::after { content:""; width:20px; height:20px; border-radius:6px; background:#24483a; flex:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E"); background-size:14px; background-position:center; background-repeat:no-repeat; }
.sp-squig { position:absolute; width:104px; height:auto; color:var(--teal); }
.sp-wheel { width:92px; }
.sp-spin { transform-origin:50% 50%; animation:spWheel 6s linear infinite; }
@keyframes spWheel { to { transform:rotate(360deg); } }
.sp-dots { position:absolute; width:104px; height:84px; color:var(--teal); }
.sp-dots i { position:absolute; border-radius:50%; background:var(--teal); animation:spDrift ease-in-out infinite alternate; }
@keyframes spDrift { 0%{transform:translate(0,0)} 33%{transform:translate(var(--dx),calc(var(--dy)*-1))} 66%{transform:translate(calc(var(--dx)*-1),var(--dy))} 100%{transform:translate(calc(var(--dx)*.5),calc(var(--dy)*.5))} }
@media (prefers-reduced-motion:reduce){ .sp-spin,.sp-dots i{animation:none} }
.sp-badge { position:absolute; width:52px; height:52px; border-radius:50%; background:var(--orange); color:#fff; display:grid; place-items:center; font:700 1.6rem/1 "Caveat","Kalam",cursive; }
.sp-bars { display:flex; align-items:flex-end; gap:4px; height:54px; margin-top:4px; }
.sp-bars i { width:8px; border-radius:2px; background:#24483a; }
.sp-bars i.l { background:#e3d9bd; }

/* panel 1 – eye level */
.v1 .sp-photo { left:12%; top:6%; width:62%; height:74%; transform:rotate(-2deg); }
.v1 .sp-pill { right:0; top:2%; transform:rotate(3deg); }
.v1 .sp-badge { right:8%; top:26%; }
.v1 .sp-squig { left:-2%; top:-4%; }
.v1 .sp-card { right:2%; bottom:6%; transform:rotate(3deg); }
/* panel 2 – reach */
.v2 .sp-photo { right:8%; top:8%; width:60%; height:72%; transform:rotate(2deg); }
.v2 .sp-pill { left:0; top:10%; transform:rotate(-4deg); }
.v2 .sp-card { left:2%; bottom:4%; transform:rotate(-3deg); }
.v2 .sp-dots { right:0; top:-2%; }
/* panel 3 – work */
.v3 .sp-photo { left:6%; top:12%; width:64%; height:70%; transform:rotate(-1.5deg); }
.v3 .sp-pill { right:0; top:6%; transform:rotate(3deg); }
.v3 .sp-card { right:0; bottom:8%; transform:rotate(2deg); }
.v3 .sp-squig { left:0; top:0; }
/* panel 4 – healthier */
.v4 .sp-photo { right:10%; top:6%; width:62%; height:74%; transform:rotate(2deg); }
.v4 .sp-pill { left:2%; top:14%; transform:rotate(-3deg); }
.v4 .sp-card { left:0; bottom:6%; transform:rotate(-2deg); }
.v4 .sp-dots { right:2%; top:-4%; }

/* comparison screen */
.cmp { padding-top:clamp(56px,7vw,100px); }
.cmp-head { text-align:center; max-width:760px; margin:0 auto clamp(28px,4vw,52px); }
.cmp-h { font-size:clamp(2.2rem,4.6vw,3.8rem); font-weight:500; letter-spacing:-.03em; line-height:1.06; margin:0 0 14px; color:var(--ink); }
.cmp-acc, .cmp-h .dot { color:var(--teal); }
.cmp-head p { font-size:1.15rem; color:#4a4d4b; margin:0 0 22px; }
.cmp-dots { display:inline-flex; gap:9px; align-items:center; }
.cmp-dots i { width:9px; height:9px; border-radius:50%; background:#c9a86a; opacity:.7; }
.cmp-dots i.on { width:44px; border-radius:6px; background:#8a6a2f; opacity:1; }
.cmp-modes { display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,44px); max-width:1000px; margin:0 auto clamp(32px,4vw,56px); }
.cmp-mode { margin:0; text-align:center; }
.cmp-img { border-radius:22px; overflow:hidden; border:6px solid #fff; box-shadow:0 18px 44px rgba(30,30,25,.16); aspect-ratio:1; background:#dfe3e0; }
.cmp-mode:nth-child(1) .cmp-img { transform:rotate(-1.5deg); }
.cmp-mode:nth-child(2) .cmp-img { transform:rotate(1.5deg); }
.cmp-img img { width:100%; height:100%; object-fit:cover; display:block; }
.cmp-mode figcaption { margin-top:22px; }
.cmp-mode b { display:block; font-size:clamp(1.05rem,1.8vw,1.35rem); letter-spacing:.04em; text-transform:uppercase; color:var(--ink); margin-bottom:8px; }
.cmp-mode span { display:block; color:#4a4d4b; max-width:22em; margin-inline:auto; line-height:1.45; }
.cmp-card { background:#fff; border-radius:20px; padding:22px 26px 10px; box-shadow:0 14px 36px rgba(30,30,25,.10); max-width:720px; margin:0 auto; }
.cmp-card .compare-row { border-top:1px solid #e6e5df; padding:14px 0; }
.cmp-card .clabel { text-align:left; color:var(--ink); font-size:1rem; }
.cmp-card .compare-head .ch.ezer { color:var(--teal); }
.cmp-card .compare-head .ch.other { color:#8a8d8b; }
.cmp-card .radio { border-color:#c9cbc8; }
.cmp-card .radio.on { border-color:var(--teal); background:var(--teal); }
.cmp-card .radio.on::after { background:#fff; }
@media (max-width:640px){ .cmp-modes { grid-template-columns:1fr; } }

/* use case */
.uc { --teal:#12aaba; background:#0B1D35; color:#fff; padding:clamp(64px,8vw,112px) 0; }
.uc-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(28px,5vw,80px); align-items:center; }
.uc-eyebrow { color:#12aaba; font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:.85rem; margin:0 0 14px; }
.uc h2 { font-size:clamp(2rem,4.2vw,3.4rem); font-weight:600; letter-spacing:-.03em; line-height:1.08; margin:0 0 28px; color:#fff; }
.uc h2 span, .uc h2 .dot { color:#12aaba; }
.uc-card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:20px 26px; margin-bottom:14px; }
.uc-card b { display:block; color:#12aaba; font-size:1.15rem; margin-bottom:6px; }
.uc-card p { margin:0; color:rgba(255,255,255,.88); }
.uc-card ul { margin:6px 0 0; padding-left:1.2em; list-style:disc; color:rgba(255,255,255,.88); line-height:1.6; }
.uc-reimb { margin:22px 0 26px; font-style:italic; font-size:1.15rem; color:#12aaba; }
.uc-reimb strong { color:#fff; }
.uc .sp-or { color:rgba(255,255,255,.7); }
.uc .sp-link { color:#fff; }
.uc-photo { margin:0; text-align:center; }
.uc-photo img { width:100%; max-width:420px; border-radius:18px; display:block; margin:0 auto; box-shadow:0 20px 50px rgba(0,0,0,.4); }
.uc-photo figcaption { margin-top:14px; color:#12aaba; font-size:.95rem; }
@media (max-width:900px){ .uc-grid { grid-template-columns:1fr; } .uc-photo { order:-1; } .uc-photo img { max-width:320px; } }
.sp-end { text-align:center; margin-top:clamp(40px,6vw,80px); }

@media (max-width:900px){
  .sp-row, .sp-row--rev { grid-template-columns:1fr; min-height:0; }
  .sp-row .sp-vis, .sp-row--rev .sp-vis { order:-1; max-width:520px; }
  .sp-pill { font-size:1rem; padding:11px 20px 11px 14px; }
  .sp-squig { width:70px; }
  .sp-wheel { width:64px; }
  .sp-dots { width:76px; height:62px; }
}

.uc-lead { font-size:1.15rem; color:rgba(255,255,255,.85); margin:-8px 0 26px; max-width:32em; }
.uc-card b span { color:#12aaba; }
.uc-duo { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.uc-duo img { width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.4); display:block; }
.uc-duo img:nth-child(2) { margin-top:clamp(28px,6vw,80px); }
.uc--rehab .uc-grid { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
@media (max-width:900px){ .uc--rehab .uc-grid { grid-template-columns:1fr; } .uc-duo { order:-1; } }
.uc--rehab .uc-card b { color:#fff; font-size:1.25rem; }

/* Sit. Rise. Go. toggle */
.cmp-claim { color:var(--orange); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.85rem; margin:0 0 14px; }
.cmp-serif { font-family:"Playfair Display",Georgia,serif; font-weight:700; letter-spacing:.01em; font-size:clamp(2.8rem,8vw,6.2rem); line-height:1; color:var(--teal); text-transform:uppercase; margin:0 0 16px; }
.cmp-serif .dot { color:var(--teal); }
.cmp-sub { font-size:1.2rem; color:#2c2f2e; margin:0; }
.cmp-stage { max-width:860px; margin:0 auto clamp(48px,6vw,80px); --H:clamp(360px,52vw,560px); }
.cmp-chart { position:relative; height:calc(var(--H) + 34px); margin-top:14px; }
.cmp-axis { position:absolute; right:0; top:34px; bottom:0; width:1px; background:#a9aba8; }
.cmp-chart::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:#a9aba8; }
.cmp-line { position:absolute; left:0; right:0; height:0; border-top:2px solid #b5b7b4; transition:border-color .5s; }
.cmp-line em { position:absolute; left:0; top:-28px; font-style:normal; font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.95rem; color:#8b8e8b; transition:color .5s; }
.cmp-line i { position:absolute; right:-7px; top:-8px; width:14px; height:14px; border-radius:50%; background:var(--teal); opacity:0; transition:opacity .5s; }
.cmp-line--stand { top:34px; }
.cmp-line--seat { top:calc(34px + var(--H) * .19); }
[data-mode="standing"] .cmp-line--stand, [data-mode="seated"] .cmp-line--seat { border-top:3px dashed var(--teal); }
[data-mode="standing"] .cmp-line--stand em, [data-mode="seated"] .cmp-line--seat em { color:var(--teal); }
[data-mode="standing"] .cmp-line--stand i, [data-mode="seated"] .cmp-line--seat i { opacity:1; }
.cmp-chair { position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:auto; transition:opacity .55s ease, transform .55s ease; pointer-events:none; }
.cmp-chair--standing { height:calc(var(--H) * .982); bottom:calc(var(--H) * .007); }
.cmp-chair--seated { height:calc(var(--H) * .784); bottom:calc(var(--H) * .016); }
[data-mode="seated"] .cmp-chair--standing { opacity:0; transform:translateX(-50%) translateY(26px); }
[data-mode="standing"] .cmp-chair--seated { opacity:0; transform:translateX(-50%) translateY(-26px); }
.cmp-feats { display:grid; margin-top:34px; }
.cmp-feat-set { grid-area:1/1; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,44px); opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s; }
[data-mode="seated"] .cmp-feat-set[data-for="seated"], [data-mode="standing"] .cmp-feat-set[data-for="standing"] { opacity:1; visibility:visible; }
.cmp-feat-set b { display:block; font-size:1.05rem; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); margin-bottom:8px; }
.cmp-feat-set p { margin:0; color:#3a3d3b; line-height:1.45; }
.cmp-toggle { display:flex; width:max-content; margin:38px auto 0; padding:6px; border-radius:999px; background:#ebe9e2; box-shadow:0 10px 26px rgba(30,30,25,.14), inset 0 0 0 1px rgba(0,0,0,.08); }
.cmp-toggle button { appearance:none; border:0; background:transparent; font:600 .95rem/1 inherit; letter-spacing:.06em; text-transform:uppercase; color:#7d807d; padding:16px 34px; border-radius:999px; cursor:pointer; transition:background .3s, color .3s; }
.cmp-toggle button.on { background:var(--teal); color:#fff; }
.cmp-toggle button:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
.cmp-h3 { text-align:center; font-size:clamp(1.6rem,3vw,2.3rem); font-weight:500; letter-spacing:-.02em; margin:0 0 26px; color:var(--ink); }
.cmp-h3 span, .cmp-h3 .dot { color:var(--teal); }
@media (max-width:640px){ .cmp-feat-set { grid-template-columns:1fr; gap:14px; } .cmp-feats { min-height:250px; } .cmp-line em { font-size:.8rem; } }
.cmp-head .cmp-claim { color:var(--orange); margin:0 0 14px; }

/* comparison card (self-contained so it works on pages without site.css) */
.cmp-card .compare-head, .cmp-card .compare-row { display:grid; grid-template-columns:90px 1fr 90px; align-items:center; gap:8px; }
.cmp-card .compare-head { padding-bottom:14px; }
.cmp-card .compare-head .ch { text-align:center; font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; line-height:1.2; }
.cmp-card .clabel { font-weight:600; }
.cmp-card .radio { width:24px; height:24px; border-radius:50%; border:2px solid #c9cbc8; margin:0 auto; position:relative; }
.cmp-card .radio.on { border-color:#12aaba; background:#12aaba; }
.cmp-card .radio.on::after { content:""; position:absolute; inset:5px; border-radius:50%; background:#fff; }
.cmp--product { padding-top:clamp(56px,7vw,96px); }
.cmp--product .cmp-h3 { margin-bottom:26px; }

/* compact Sit.Rise.Go screen */
.cmp:not(.cmp--product) { padding-top:clamp(36px,4.5vw,64px); padding-bottom:clamp(32px,4vw,56px); }
.cmp:not(.cmp--product) .cmp-head { margin-bottom:clamp(14px,2vw,26px); }
.cmp:not(.cmp--product) .cmp-serif { font-size:clamp(2.4rem,6vw,4.6rem); margin-bottom:10px; }
.cmp:not(.cmp--product) .cmp-stage { --H:clamp(280px,32vw,400px); margin-bottom:0; }
.cmp:not(.cmp--product) .cmp-feats { margin-top:22px; }
.cmp:not(.cmp--product) .cmp-toggle { margin-top:24px; }
.cmp:not(.cmp--product) .cmp-title { font-size:clamp(1.7rem,3.4vw,2.9rem); line-height:1.12; max-width:26em; margin:0 auto; }

/* calmer, less cartoonish styling for solution panels */
.sp-pill{font:600 .8rem/1 "Montserrat",sans-serif;letter-spacing:.12em;border:1px solid rgba(11,29,53,.18);box-shadow:0 8px 22px rgba(30,30,25,.12);border-radius:999px;padding:12px 22px 12px 16px}
.sp-card{border-radius:14px;box-shadow:0 12px 32px rgba(30,30,25,.12)}
.sp-card b{font:700 .72rem/1 "Montserrat",sans-serif;letter-spacing:.16em;color:#0B1D35}
.sp-card li{font-family:"Montserrat",sans-serif;font-weight:500}
.sp-photo{border-width:5px}
.v1 .sp-photo,.v2 .sp-photo,.v3 .sp-photo,.v4 .sp-photo{transform:none}
.v1 .sp-card,.v2 .sp-card,.v3 .sp-card,.v4 .sp-card,.v1 .sp-pill,.v2 .sp-pill,.v3 .sp-pill,.v4 .sp-pill{transform:none}

/* mission panel */
.v5 .sp-photo{left:4%;top:6%;width:68%;height:74%}
.v5 .sp-pill{right:2%;top:4%}
.v5 .sp-card{right:0;bottom:6%}
.v5 .sp-dots{right:4%;top:30%;--teal:#12aaba}
.sp-mission{padding-top:0}

.sp-mission h3 .mission-num{font-weight:800;color:#0d8a9a}

/* taller photo frames (+33%) so portrait photos show their subject */
.sp-vis { aspect-ratio: .84; max-width: 600px; }
.sp-photo { background-size: cover; }
.v1 .sp-photo,.v2 .sp-photo,.v3 .sp-photo,.v4 .sp-photo { height: 76%; top: 8%; }
.v5 .sp-photo { height: 74%; top: 6%; }
.sp-mission .sp-vis.v5 { aspect-ratio: 1.12; max-width: 620px; }
