/* A visual guide within the existing DKISS paper, green and mint identity. */
.how-visual { color:var(--ink,#123532); background:var(--paper,#f5f2ec); }
.how-visual figure { margin:0; }
.how-visual img { display:block; width:100%; }
.how-visual h1, .how-visual h2, .how-visual h3 { text-wrap:balance; }
.how-visual .how-kicker { margin:0 0 24px; font-size:.75rem; font-weight:700; letter-spacing:.1em; }
.how-visual .how-intro { display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); min-height:590px; }
.how-visual .how-intro-copy { align-self:center; padding:64px 5vw 54px 6vw; }
.how-visual h1 { margin:0 0 26px; font-size:clamp(3.5rem,6.1vw,5.7rem); line-height:1; letter-spacing:-.035em; font-weight:500; }
.how-visual .how-lead { max-width:31ch; margin:0 0 30px; font-size:1.12rem; line-height:1.6; }
.how-visual .primary { gap:20px; }
.how-visual .how-intro-facts { display:flex; flex-wrap:wrap; gap:10px 20px; padding:0; margin:34px 0 0; list-style:none; font-size:.8rem; color:var(--muted,#526a67); }
.how-visual .how-intro-facts li { padding-right:20px; border-right:1px solid var(--line,#d2d8ce); }
.how-visual .how-intro-facts li:last-child { padding-right:0; border-right:0; }
.how-visual .how-intro-art { min-width:0; position:relative; overflow:hidden; }
.how-visual .how-intro-art img { height:100%; min-height:590px; object-fit:cover; object-position:57% center; }
.how-visual .how-intro-art figcaption { position:absolute; left:24px; bottom:24px; max-width:calc(100% - 48px); padding:10px 14px; background:var(--paper,#f5f2ec); font-size:.75rem; line-height:1.5; }
.how-visual .how-moves { margin:88px 6vw 96px; }
.how-visual .how-demo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); overflow:hidden; background:#e3eee5; border-radius:16px; }
.how-visual .how-demo-stage { position:relative; min-height:650px; padding:30px 34px; background:#cce3d9; overflow:hidden; }
.how-visual .how-demo-product-label { position:relative; z-index:1; margin:0; font-size:.8rem; font-weight:700; }
.how-visual .how-demo-product-label span { margin-left:14px; font-weight:400; }
.how-visual .how-demo-canvas { position:absolute; inset:70px 20px 95px; display:grid; place-items:center; }
.how-visual .how-demo-device { position:relative; height:440px; width:58.43px; flex-shrink:0; transform-origin:50% 68%; }
.how-visual .how-demo-device .how-demo-upper { position:absolute; inset:0; height:100%; width:100%; max-width:none; object-fit:fill; clip-path:inset(0 0 13.3% 0); }
.how-visual .how-demo-base { position:absolute; inset:86.7% 0 0; overflow:hidden; transform-origin:50% 50%; }
.how-visual .how-demo-base img { position:absolute; bottom:0; width:100%; max-width:none; height:751.88%; object-fit:fill; }
.how-visual .how-demo-caption { position:absolute; bottom:49px; left:34px; right:24px; margin:0; font-size:.94rem; line-height:1.5; font-weight:500; }
.how-visual .how-demo-illustration { position:absolute; left:34px; bottom:25px; margin:0; font-size:.69rem; color:#355f52; }
.how-visual .how-demo-turn-cue { position:absolute; top:calc(50% + 162px); left:calc(50% - 90px); width:180px; height:76px; color:#005d59; visibility:hidden; }
.how-visual .how-demo-part-label { position:absolute; font-size:.76rem; font-weight:600; line-height:1.4; color:#244f43; visibility:hidden; }
.how-visual .how-demo-part-base { left:calc(50% + 54px); top:calc(50% + 145px); white-space:nowrap; }
.how-visual .how-demo-part-mouth { left:calc(50% + 55px); top:calc(50% - 205px); }
.how-visual .how-demo-air-cue { position:absolute; top:calc(50% - 235px); left:calc(50% - 65px); height:155px; width:20px; color:#005d59; visibility:hidden; }
.how-visual .how-demo-air-cue span { position:absolute; left:9px; width:2px; height:18px; background:#005d59; border-radius:1px; }
.how-visual .how-demo-air-cue span:nth-child(1) { bottom:0; }
.how-visual .how-demo-air-cue span:nth-child(2) { bottom:32px; }
.how-visual .how-demo-air-cue span:nth-child(3) { bottom:64px; }
.how-visual .how-demo-air-cue svg { position:absolute; top:14px; left:0; width:20px; height:28px; }
.how-visual [data-demo-step="adjust"] .how-demo-turn-cue, .how-visual [data-demo-step="adjust"] .how-demo-part-base, .how-visual [data-demo-step="inhale"] .how-demo-air-cue, .how-visual [data-demo-step="inhale"] .how-demo-part-mouth { visibility:visible; }
.how-visual .how-demo-copy { padding:clamp(30px,4.4vw,68px); align-self:center; min-width:0; }
.how-visual .how-demo-copy h2 { margin:0 0 24px; font-size:clamp(2.5rem,4vw,3.8rem); font-weight:500; line-height:1.08; letter-spacing:-.035em; }
.how-visual .how-demo-intro { max-width:32ch; margin:0 0 30px; font-size:1rem; line-height:1.6; color:#355f52; }
.how-visual .how-demo-tabs { display:grid; grid-template-columns:.8fr 1.2fr .8fr; gap:0; margin-bottom:28px; }
.how-visual .how-demo-tabs button { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:12px 6px 14px 0; min-height:68px; border:0; border-bottom:1px solid #94b6a9; border-radius:0; background:transparent; color:#355f52; font-size:.9rem; font-weight:500; text-align:left; cursor:pointer; }
.how-visual .how-demo-tabs button span { font-size:.7rem; }
.how-visual .how-demo-tabs button[aria-pressed="true"] { color:#123532; border-bottom:3px solid #005d59; font-weight:700; }
.how-visual .how-demo-tabs button:hover { color:#005d59; background:#d4e5db; }
.how-visual .how-demo-panel { margin:0 0 24px; }
.how-visual .how-demo-panel h3 { margin:0 0 12px; font-size:1.35rem; font-weight:600; line-height:1.25; }
.how-visual .how-demo-panel p { max-width:36ch; margin:0; color:#355f52; font-size:.97rem; line-height:1.65; }
.how-visual .how-demo[data-demo-ready="true"] .how-demo-panels { min-height:151px; }
.how-visual .how-demo-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; }
.how-visual .how-demo-play { min-height:50px; padding:14px 20px; gap:12px; font-size:.87rem; cursor:pointer; }
.how-visual .how-demo-play-symbol { width:12px; font-size:.72rem; }
.how-visual .how-demo-restart { min-height:44px; padding:10px 0; border:0; background:transparent; color:#123532; font-size:.83rem; cursor:pointer; }
.how-visual .how-demo-restart span { margin-left:8px; font-size:1.05rem; }
.how-visual .how-demo-status { min-height:1.5em; margin:13px 0 0; color:#355f52; font-size:.76rem; line-height:1.5; }
.how-visual .how-demo-film-link { display:inline-flex; align-items:center; gap:20px; min-height:44px; margin-top:9px; font-size:.85rem; font-weight:600; text-decoration:underline; text-underline-offset:5px; }
.how-visual .how-demo button:focus-visible, .how-visual .how-demo a:focus-visible { outline:3px solid #9b430a; outline-offset:4px; }
.how-visual .how-demo [hidden] { display:none; }
.how-visual .how-draw { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); margin:0 6vw 96px; background:var(--mint,#d5eee8); border-radius:16px; overflow:hidden; }
.how-visual .how-draw-art { min-width:0; }
.how-visual .how-draw-art img { height:100%; min-height:510px; object-fit:cover; object-position:59% center; }
.how-visual .how-draw-copy { padding:clamp(32px,4.8vw,76px); align-self:center; }
.how-visual .how-draw-copy h2 { font-size:clamp(2.5rem,4.2vw,4rem); margin-bottom:24px; }
.how-visual .how-draw-copy > p { margin:0; max-width:36ch; font-size:1rem; line-height:1.65; }
.how-visual .how-draw-copy .how-draw-note { margin-top:14px; font-weight:600; }
.how-visual .how-draw-fact { margin-top:30px; padding-top:24px; border-top:1px solid #99bdb4; }
.how-visual .how-draw-fact span { font-size:.78rem; font-weight:700; }
.how-visual .how-draw-fact p { margin:8px 0 0; max-width:39ch; font-size:.88rem; line-height:1.6; }
.how-visual .how-watch { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:7vw; align-items:center; padding:68px 10vw; background:var(--ink,#123532); color:var(--paper,#f5f2ec); scroll-margin-top:92px; }
.how-visual .how-watch-copy { max-width:540px; }
.how-visual .how-watch h2 { margin-bottom:28px; font-size:clamp(3rem,5.5vw,5.2rem); line-height:1; letter-spacing:-.035em; }
.how-visual .how-watch-copy > p:not(.how-kicker) { max-width:31ch; margin:0 0 32px; font-size:1.1rem; color:#d5eee8; }
.how-visual .how-watch .primary { border-color:var(--paper,#f5f2ec); background:var(--paper,#f5f2ec); color:var(--ink,#123532); }
.how-visual .how-watch .primary:hover { background:#fff; }
.how-visual .how-watch-player { width:100%; max-width:370px; justify-self:center; min-width:0; }
.how-visual .how-watch-player video { display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:contain; background:#123532; border-radius:12px; }
.how-visual .how-watch-player figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 14px; margin-top:13px; font-size:.72rem; line-height:1.5; }
.how-visual .how-video-description { margin-top:30px; max-width:43ch; font-size:.86rem; line-height:1.6; color:#d5eee8; }
.how-visual .how-video-description summary { cursor:pointer; width:fit-content; min-height:44px; padding:11px 0; }
.how-visual .how-video-description p { margin:4px 0 0; }
.how-visual .how-video-status { min-height:0; margin:0; color:#d5eee8; font-size:.8rem; }
.how-visual .how-video-status:not(:empty) { margin-top:12px; }
.how-visual .how-watch :focus-visible { outline-color:#d5eee8; }
.how-visual .how-essentials { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:8vw; padding:88px 6vw 96px; }
.how-visual .how-essentials h2 { margin-bottom:20px; font-size:clamp(2.35rem,3.7vw,3.4rem); }
.how-visual .how-essentials-heading p { margin:0 0 14px; font-size:.95rem; color:var(--muted,#526a67); }
.how-visual .how-essentials .text-button { display:inline-flex; align-items:center; gap:10px; min-height:44px; }
.how-visual .how-questions details { padding:5px 0; border-top:1px solid var(--line,#d2d8ce); }
.how-visual .how-questions details:last-child { border-bottom:1px solid var(--line,#d2d8ce); }
.how-visual .how-questions summary { padding:19px 28px 19px 0; cursor:pointer; font-size:1rem; line-height:1.45; font-weight:600; }
.how-visual .how-questions details p { max-width:56ch; margin:0 0 18px; font-size:.95rem; color:var(--muted,#526a67); }
.how-visual .how-questions .text-button { margin-top:-8px; margin-bottom:10px; }
@media (min-width:1700px) {
  .how-visual .how-intro { min-height:690px; }
  .how-visual .how-intro-art img { min-height:690px; }
}
@media (max-width:1000px) {
  .how-visual .how-intro { grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:520px; }
  .how-visual .how-intro-copy { padding:48px 4vw 44px 5vw; }
  .how-visual h1 { font-size:clamp(3rem,6vw,4.4rem); }
  .how-visual .how-intro-art img { min-height:520px; }
  .how-visual .how-lead { font-size:1rem; }
  .how-visual .how-intro .primary { padding-inline:18px; gap:12px; font-size:.85rem; }
  .how-visual .how-moves { margin:64px 5vw 72px; }
  .how-visual .how-demo-stage { padding:26px; min-height:650px; }
  .how-visual .how-demo-copy { padding:32px; }
  .how-visual .how-demo-copy h2 { font-size:2.65rem; }
  .how-visual .how-demo-caption, .how-visual .how-demo-illustration { left:26px; }
  .how-visual .how-demo-tabs button { font-size:.82rem; }
  .how-visual .how-demo-part-base { left:calc(50% + 44px); }
  .how-visual .how-demo-part-mouth { left:calc(50% + 42px); }
  .how-visual .how-draw { margin:0 5vw 72px; }
  .how-visual .how-draw-copy { padding:32px; }
  .how-visual .how-draw-copy h2 { font-size:2.8rem; }
  .how-visual .how-watch { padding:56px 6vw; gap:6vw; }
  .how-visual .how-watch-player { max-width:330px; }
  .how-visual .how-essentials { padding:64px 5vw 72px; gap:5vw; }
}
@media (max-width:700px) {
  .how-visual .how-intro { grid-template-columns:minmax(0,1fr); }
  .how-visual .how-intro-copy { padding:42px 24px 32px; }
  .how-visual .how-kicker { margin-bottom:20px; font-size:.7rem; }
  .how-visual h1 { margin-bottom:20px; font-size:clamp(3.2rem,12vw,4.8rem); }
  .how-visual .how-lead { max-width:35ch; margin-bottom:24px; }
  .how-visual .how-intro-facts { margin-top:24px; gap:8px 14px; }
  .how-visual .how-intro-facts li { padding-right:14px; }
  .how-visual .how-intro-art { aspect-ratio:auto; }
  .how-visual .how-intro-art img { min-height:0; height:auto; aspect-ratio:3/2; object-fit:contain; }
  .how-visual .how-intro-art figcaption { position:static; max-width:none; padding:12px 24px; font-size:.72rem; }
  .how-visual .how-moves { margin:52px 24px 56px; }
  .how-visual .how-demo { grid-template-columns:minmax(0,1fr); padding:30px 24px; }
  .how-visual .how-demo-stage { order:5; margin:20px -24px 26px; min-height:440px; padding:24px; }
  .how-visual .how-demo-canvas { inset:56px 16px 83px; }
  .how-visual .how-demo-device { height:300px; width:39.84px; }
  .how-visual .how-demo-turn-cue { top:calc(50% + 100px); left:calc(50% - 76px); width:152px; height:65px; }
  .how-visual .how-demo-part-base { left:calc(50% + 38px); top:calc(50% + 76px); font-size:.7rem; }
  .how-visual .how-demo-part-mouth { left:calc(50% + 39px); top:calc(50% - 140px); }
  .how-visual .how-demo-air-cue { top:calc(50% - 165px); left:calc(50% - 50px); height:130px; }
  .how-visual .how-demo-caption { left:24px; bottom:46px; font-size:.85rem; }
  .how-visual .how-demo-illustration { left:24px; bottom:23px; }
  .how-visual .how-demo-copy { display:contents; }
  .how-visual .how-demo-copy h2 { order:0; font-size:clamp(2.35rem,9.5vw,3rem); }
  .how-visual .how-demo-intro { order:1; margin-bottom:20px; font-size:.94rem; }
  .how-visual .how-demo-tabs { order:2; margin-bottom:25px; }
  .how-visual .how-demo-tabs button { font-size:.87rem; }
  .how-visual .how-demo-actions { order:3; }
  .how-visual .how-demo-status { order:4; }
  .how-visual .how-demo-panels { order:6; }
  .how-visual .how-demo-film-link { order:7; margin-top:0; }
  .how-visual .how-demo[data-demo-ready="true"] .how-demo-panels { min-height:0; }
  .how-visual .how-demo-panel { margin-bottom:10px; }
  .how-visual .how-demo-panel p { font-size:.94rem; }
  .how-visual .how-draw { grid-template-columns:minmax(0,1fr); margin:0 24px 56px; }
  .how-visual .how-draw-art { aspect-ratio:4/3; }
  .how-visual .how-draw-art img { min-height:0; height:100%; object-position:55% center; }
  .how-visual .how-draw-copy { padding:30px 24px 32px; }
  .how-visual .how-draw-copy h2 { font-size:2.7rem; }
  .how-visual .how-draw-copy > p { font-size:.95rem; }
  .how-visual .how-draw-fact { margin-top:24px; padding-top:20px; }
  .how-visual .how-watch { grid-template-columns:minmax(0,1fr); gap:34px; padding:46px 24px; }
  .how-visual .how-watch h2 { font-size:clamp(3rem,12vw,4rem); margin-bottom:22px; }
  .how-visual .how-watch-copy > p:not(.how-kicker) { max-width:34ch; margin-bottom:24px; font-size:1rem; }
  .how-visual .how-video-description { margin-top:20px; }
  .how-visual .how-watch-player { max-width:340px; }
  .how-visual .how-essentials { grid-template-columns:minmax(0,1fr); gap:30px; padding:52px 24px 56px; }
  .how-visual .how-essentials h2 { font-size:2.55rem; }
  .how-visual .how-essentials-heading p { max-width:32ch; }
}
@media (max-width:360px) {
  .how-visual .how-intro-copy, .how-visual .how-watch, .how-visual .how-essentials { padding-inline:20px; }
  .how-visual .how-moves { margin-inline:20px; }
  .how-visual .how-demo { padding-inline:20px; }
  .how-visual .how-demo-stage { margin-inline:-20px; }
  .how-visual .how-demo-tabs button { font-size:.8rem; }
  .how-visual .how-draw { margin-inline:20px; }
  .how-visual .how-draw-copy { padding-inline:20px; }
  .how-visual .how-intro-facts { gap:8px 10px; font-size:.72rem; }
  .how-visual .how-intro-facts li { padding-right:10px; }
  .how-visual .how-watch-player figcaption { font-size:.65rem; }
}

/* Approved A: precision imagery introduces the product; movement stays interactive. */
.how-visual .how-intro-precision { color:#f5f2ec; background:#111617; }
.how-visual .how-intro-precision .how-intro-copy { position:relative; z-index:1; }
.how-visual .how-intro-precision .how-kicker { color:#b4ddd1; }
.how-visual .how-intro-precision .how-lead { color:#dce9e3; }
.how-visual .how-intro-precision .primary { background:#f5f2ec; border-color:#f5f2ec; color:#123532; }
.how-visual .how-intro-precision .primary:hover { background:#d5eee8; }
.how-visual .how-intro-precision .how-intro-facts { color:#d5eee8; }
.how-visual .how-intro-precision .how-intro-facts li { border-color:#53635c; }
.how-visual .how-intro-precision .how-intro-art picture { display:block; height:100%; }
.how-visual .how-intro-precision .how-intro-art img { object-position:right center; }
.how-visual .how-intro-precision :focus-visible { outline-color:#9ee8d5; }
@media(max-width:700px) {
 .how-visual .how-intro-precision .how-intro-art picture { height:auto; }
 .how-visual .how-intro-precision .how-intro-art img { aspect-ratio:4/5; object-fit:contain; object-position:center; }
}