/* Dozzi Help Center — shared styles.
   Self-contained (no external fonts/CDNs) to stay CSP-safe like the other hosted pages.
   Visual language mirrors the in-app DozziTheme + the orientation tour. */

:root {
  --bg: #1A1A2E;
  --bg-2: #14142a;
  --card: #16213E;
  --card-2: #1E2A4A;
  --text: #F5F5F5;
  --text-2: #B0B0C0;
  --text-3: #6E7191;
  --seafoam: #7FDFD4;
  --blue: #64B5F6;
  --red: #FF3B30;
  --green: #34C759;
  --yellow: #FFCC00;
  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 760px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: var(--seafoam); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 18px 72px;
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 2px 18px;
}
.topbar .brand {
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--blue);
  font-size: 18px;
}
.topbar .back {
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
}
.topbar .back::before { content: "‹ "; color: var(--seafoam); }
.topbar .spacer { flex: 1; }

/* Hero */
.hero { padding: 6px 2px 20px; }
.hero .eyebrow {
  color: var(--seafoam);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.hero h1 {
  font-size: 30px;
  line-height: 1.15;
  margin: 0 0 10px;
  font-weight: 800;
}
.hero p {
  color: var(--text-2);
  font-size: 17px;
  margin: 0;
  max-width: 60ch;
}

/* Section cards */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px 20px 22px;
  margin: 16px 0;
  box-shadow: var(--shadow);
}
.card h2 {
  font-size: 20px;
  margin: 0 0 12px;
  font-weight: 700;
}
.card h2 .k { color: var(--seafoam); }
.card p { color: var(--text-2); margin: 0 0 12px; }
.card p:last-child { margin-bottom: 0; }
.lead { color: var(--text) !important; font-size: 16px; }

/* Path chip: "Settings › Proximity Detection" */
.path {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  background: var(--card-2);
  border: 1px solid rgba(127,223,212,.25);
  color: var(--text);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}
.path .sep { color: var(--seafoam); }

/* Numbered steps */
ol.steps { list-style: none; counter-reset: s; margin: 4px 0 0; padding: 0; }
ol.steps > li {
  counter-increment: s;
  position: relative;
  padding: 6px 0 14px 44px;
  color: var(--text-2);
}
ol.steps > li::before {
  content: counter(s);
  position: absolute;
  left: 0; top: 2px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(255,59,48,.4);
}
ol.steps > li strong { color: var(--text); }

/* Screenshot with numbered hotspots overlaid */
figure.shot {
  margin: 16px 0 6px;
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--red);
  box-shadow: 0 0 0 4px rgba(255,59,48,.12), var(--shadow);
  background: #000;
}
figure.shot img { display: block; width: 100%; height: auto; }
figure.shot figcaption {
  color: var(--text-3);
  font-size: 13px;
  padding: 8px 12px 10px;
  background: var(--bg-2);
}

/* A hotspot = red numbered pin positioned by % over the screenshot */
.pin {
  position: absolute;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px; /* center on the point */
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 0 3px rgba(255,59,48,.35);
  z-index: 2;
}
/* Optional arrow that points from a pin toward its target */
.arrow {
  position: absolute;
  color: var(--red);
  z-index: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

/* Watch proximity-ring replica (uses the real app bear artwork) */
.ring-demo {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px 0 4px;
}
.ring-demo .watch { text-align: center; flex: 0 1 220px; }
.ring-demo .watch img { width: 100%; max-width: 190px; height: auto; display: block; margin: 0 auto; }
.ring-demo .watch .lbl { margin-top: 12px; font-weight: 700; font-size: 15px; }
.ring-demo .watch .sub { color: var(--text-2); font-size: 13.5px; }

.dot { display:inline-block; width:11px; height:11px; border-radius:50%; vertical-align:middle; margin-right:6px; }
.dot.g { background: var(--green); }
.dot.y { background: var(--yellow); }

/* ---- Control mockups (faithful dark-theme reproductions of app controls) ---- */
.mock {
  background: #12203c;
  border: 1px solid rgba(127,223,212,.14);
  border-radius: 16px;
  padding: 8px 16px;
  margin: 16px 0 6px;
  position: relative;
}
.mock .sect { color: var(--seafoam); font-weight: 700; font-size: 13px; letter-spacing: .04em; padding: 12px 0 8px; }
.mrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; }
.mrow + .mrow { border-top: 1px solid rgba(255,255,255,.06); }
.mrow .mtitle { font-weight: 600; color: var(--text); }
.mrow .msub { color: var(--text-3); font-size: 13px; margin-top: 2px; }
.mrow .mval { color: var(--blue); font-weight: 600; white-space: nowrap; }

/* iOS-style toggle */
.tgl { width: 50px; height: 30px; border-radius: 15px; background: var(--seafoam); position: relative; flex: none; }
.tgl::after { content:""; position:absolute; top:3px; right:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4); }
.tgl.off { background: #39394a; }
.tgl.off::after { right: auto; left: 3px; }

/* segmented control */
.seg { display:flex; background: rgba(255,255,255,.06); border-radius:10px; padding:3px; margin:6px 0; }
.seg span { flex:1; text-align:center; padding:8px 4px; font-size:13px; color:var(--text-2); border-radius:8px; }
.seg span.on { background:#4a4a5c; color:#fff; font-weight:600; }

/* slider */
.sld { height:6px; border-radius:3px; background:#33334a; position:relative; margin:20px 6px 8px; }
.sld i { position:absolute; left:0; top:0; height:100%; border-radius:3px; background:var(--seafoam); }
.sld b { position:absolute; top:-9px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.5); transform:translateX(-50%); }
.sld-ends { display:flex; justify-content:space-between; color:var(--text-3); font-size:12px; margin:0 6px; }

/* +/- stepper */
.step { display:flex; align-items:center; gap:6px; flex:none; }
.step u { font-style:normal; text-decoration:none; width:34px; height:32px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.09); border-radius:8px; font-size:18px; color:var(--text); }

/* menu-picker row value with chevron */
.pick::after { content:"⌄"; margin-left:8px; color:var(--text-3); }

/* Status-color chips (e.g. complication states) */
.states { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0 4px; }
.states .st { flex: 1 1 130px; background: var(--card-2); border-radius: 14px; padding: 16px 12px; text-align: center; }
.states .st .dot { width: 22px; height: 22px; border-radius: 50%; margin: 0 auto 10px; box-shadow: 0 0 12px currentColor; }
.states .st .nm { font-weight: 700; font-size: 15px; color: var(--text); }
.states .st .ds { color: var(--text-3); font-size: 12.5px; margin-top: 2px; }

/* Centered watch figure (tour-style illustration) */
.watch-fig { text-align: center; margin: 18px 0 6px; }
.watch-fig img { width: 62%; max-width: 180px; height: auto; }
.watch-fig .cap { color: var(--text-3); font-size: 13px; margin-top: 6px; }

/* App tab-bar mockup (the four tabs, tour-style) */
.tabbar {
  display: flex;
  justify-content: space-around;
  background: var(--bg-2);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 12px 6px;
  margin: 14px 0;
}
.tabbar .tab { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--text-3); }
.tabbar .tab .ic { display: flex; }
.tabbar .tab .ic svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabbar .tab.on { color: var(--seafoam); }

/* Note / gotcha callout */
.note {
  border-left: 3px solid var(--seafoam);
  background: var(--card-2);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 14px 0 0;
  color: var(--text-2);
  font-size: 15px;
}
.note.warn { border-left-color: var(--yellow); }
.note strong { color: var(--text); }

/* Index grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.tile {
  display: block;
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.04);
  transition: transform .12s ease, border-color .12s ease;
}
.tile:hover { transform: translateY(-2px); border-color: rgba(127,223,212,.35); text-decoration: none; }
.tile .ico {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, rgba(127,223,212,.20), rgba(100,181,246,.12));
  border: 1px solid rgba(127,223,212,.22);
}
.tile .ico svg { width: 25px; height: 25px; fill: none; stroke: var(--seafoam); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tile h3 { margin: 12px 0 4px; font-size: 17px; color: var(--text); }
.tile p { margin: 0; color: var(--text-2); font-size: 14px; }

/* Footer */
.foot {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: var(--text-3);
  font-size: 13.5px;
}
.foot a { color: var(--text-2); }

@media (max-width: 480px) {
  .hero h1 { font-size: 25px; }
  .card { padding: 16px; }
}

/* ============================================================
   Animated walkthrough demos.
   Self-contained; no external deps. help.js gates play to
   in-view + adds a pause control. Motion honors
   prefers-reduced-motion (see block at the very bottom).

   Model: the RESTING markup is the END state. Each keyframe
   dips to the START at 0%, plays its action, and holds the
   END state through 100%. So with animation disabled the
   mockup simply shows its finished state — correct + legible.

   Shared 8s loop, timing baked into keyframe % so every
   element stays phase-locked. Time slots:
     A ~10%   B ~34%   C ~58%   end-hold 64–100%
   ============================================================ */

.demo-wrap { position: relative; }
.demo .mrow { position: relative; }          /* tap-dot anchor */
.demo-wrap.paused *,
.demo-wrap.paused .savebar { animation-play-state: paused !important; }

/* --- Play / pause control (added by help.js) --- */
.demo-toggle {
  position: absolute; top: 6px; right: 6px; z-index: 6;
  width: 22px; height: 22px; border-radius: 50%;
  border: none; background: transparent; color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 10px; padding: 0; line-height: 1;
  opacity: .35; transition: opacity .15s ease;
}
.demo-wrap:hover .demo-toggle, .demo-toggle:focus-visible { opacity: .85; }

/* --- Tap indicator (ripple) --- */
.tap {
  position: absolute; width: 34px; height: 34px;
  margin: -17px 0 0 -17px; border-radius: 50%;
  background: rgba(255,59,48,.26); border: 2px solid var(--red);
  pointer-events: none; opacity: 0; z-index: 4;
}
.tap.a { animation: tapA 6.5s infinite; }
.tap.b { animation: tapB 6.5s infinite; }
.tap.c { animation: tapC 6.5s infinite; }
@keyframes tapA { 0%,5%{opacity:0;transform:scale(.4)} 9%{opacity:.85;transform:scale(1)} 15%{opacity:0;transform:scale(1.7)} 100%{opacity:0} }
@keyframes tapB { 0%,29%{opacity:0;transform:scale(.4)} 33%{opacity:.85;transform:scale(1)} 39%{opacity:0;transform:scale(1.7)} 100%{opacity:0} }
@keyframes tapC { 0%,53%{opacity:0;transform:scale(.4)} 57%{opacity:.85;transform:scale(1)} 63%{opacity:0;transform:scale(1.7)} 100%{opacity:0} }

/* --- Traveling fingertip cursor: glides control→control and taps each.
   Lives in .demo-wrap so it can reach the mock AND the save bar.
   Per page, set stop coords as CSS vars on the .cursor:
     --x1/--y1 … (left % + top px), one pair per stop. --- */
.demo-wrap .cursor {
  position: absolute; z-index: 5; width: 32px; height: 36px;
  margin: -2px 0 0 -14px; pointer-events: none;      /* anchor the fingertip on the target */
  background: url("img/tap-hand.svg") center/contain no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.5));
  transform-origin: 44% 8%;                           /* press pivots at the fingertip */
}
.demo-wrap .cursor::after { display: none; }
.demo-wrap .cursor.c2 { animation: cur2 6.5s infinite; }
.demo-wrap .cursor.c2::after { animation: rip2 6.5s infinite; }
@keyframes cur2 {
  0%,6%    { left:var(--x1); top:var(--y1); transform:scale(1); }
  9%       { left:var(--x1); top:var(--y1); transform:scale(.78); }
  13%,32%  { left:var(--x1); top:var(--y1); transform:scale(1); }
  44%      { left:var(--x2); top:var(--y2); transform:scale(1); }
  48%      { left:var(--x2); top:var(--y2); transform:scale(.78); }
  52%,100% { left:var(--x2); top:var(--y2); transform:scale(1); }
}
@keyframes rip2 {
  0%,6%{opacity:0;transform:scale(.5)} 9%{opacity:.85;transform:scale(1)} 15%{opacity:0;transform:scale(1.8)}
  44%{opacity:0;transform:scale(.5)} 48%{opacity:.85;transform:scale(1)} 54%{opacity:0;transform:scale(1.8)}
  55%,100%{opacity:0}
}
.demo-wrap .cursor.c3 { animation: cur3 6.5s infinite; }
.demo-wrap .cursor.c3::after { animation: rip3 6.5s infinite; }
@keyframes cur3 {
  0%,5%    { left:var(--x1); top:var(--y1); transform:scale(1); }
  8%       { left:var(--x1); top:var(--y1); transform:scale(.78); }
  12%,20%  { left:var(--x1); top:var(--y1); transform:scale(1); }
  30%      { left:var(--x2); top:var(--y2); transform:scale(1); }
  33%      { left:var(--x2); top:var(--y2); transform:scale(.78); }
  37%,46%  { left:var(--x2); top:var(--y2); transform:scale(1); }
  56%      { left:var(--x3); top:var(--y3); transform:scale(1); }
  59%      { left:var(--x3); top:var(--y3); transform:scale(.78); }
  63%,100% { left:var(--x3); top:var(--y3); transform:scale(1); }
}
@keyframes rip3 {
  0%,5%{opacity:0;transform:scale(.5)} 8%{opacity:.85;transform:scale(1)} 14%{opacity:0;transform:scale(1.8)}
  30%{opacity:0;transform:scale(.5)} 33%{opacity:.85;transform:scale(1)} 39%{opacity:0;transform:scale(1.8)}
  56%{opacity:0;transform:scale(.5)} 59%{opacity:.85;transform:scale(1)} 65%{opacity:0;transform:scale(1.8)}
  66%,100%{opacity:0}
}

/* Single tap (one control) */
.demo-wrap .cursor.c1 { animation: cur1 6.5s infinite; }
.demo-wrap .cursor.c1::after { animation: rip1 6.5s infinite; }
@keyframes cur1 {
  0%,8%    { left:var(--x1); top:var(--y1); transform:scale(1); }
  12%      { left:var(--x1); top:var(--y1); transform:scale(.78); }
  16%,100% { left:var(--x1); top:var(--y1); transform:scale(1); }
}
@keyframes rip1 {
  0%,9%{opacity:0;transform:scale(.5)} 12%{opacity:.85;transform:scale(1)} 18%{opacity:0;transform:scale(1.8)} 19%,100%{opacity:0}
}

/* Four taps (tab bar) */
.demo-wrap .cursor.c4 { animation: cur4 6.5s infinite; }
.demo-wrap .cursor.c4::after { animation: rip4 6.5s infinite; }
@keyframes cur4 {
  0%,4%    { left:var(--x1); top:var(--y1); transform:scale(1); }
  8%       { left:var(--x1); top:var(--y1); transform:scale(.78); }
  12%,18%  { left:var(--x1); top:var(--y1); transform:scale(1); }
  26%      { left:var(--x2); top:var(--y2); transform:scale(1); }
  30%      { left:var(--x2); top:var(--y2); transform:scale(.78); }
  34%,42%  { left:var(--x2); top:var(--y2); transform:scale(1); }
  50%      { left:var(--x3); top:var(--y3); transform:scale(1); }
  54%      { left:var(--x3); top:var(--y3); transform:scale(.78); }
  58%,66%  { left:var(--x3); top:var(--y3); transform:scale(1); }
  74%      { left:var(--x4); top:var(--y4); transform:scale(1); }
  78%      { left:var(--x4); top:var(--y4); transform:scale(.78); }
  82%,100% { left:var(--x4); top:var(--y4); transform:scale(1); }
}
@keyframes rip4 {
  0%,5%{opacity:0;transform:scale(.5)} 8%{opacity:.8;transform:scale(1)} 13%{opacity:0;transform:scale(1.7)}
  27%{opacity:0;transform:scale(.5)} 30%{opacity:.8;transform:scale(1)} 35%{opacity:0;transform:scale(1.7)}
  51%{opacity:0;transform:scale(.5)} 54%{opacity:.8;transform:scale(1)} 59%{opacity:0;transform:scale(1.7)}
  75%{opacity:0;transform:scale(.5)} 78%{opacity:.8;transform:scale(1)} 83%{opacity:0;transform:scale(1.7)}
  84%,100%{opacity:0}
}

/* Status dots glow in sequence (complication) */
.demo .st1 .dot { animation: glowA 6.5s infinite; }
.demo .st2 .dot { animation: glowB 6.5s infinite; }
.demo .st3 .dot { animation: glowC 6.5s infinite; }
@keyframes glowA { 0%,12%{box-shadow:0 0 22px currentColor;transform:scale(1.14)} 26%,100%{box-shadow:0 0 8px currentColor;transform:scale(1)} }
@keyframes glowB { 0%,30%{box-shadow:0 0 8px currentColor;transform:scale(1)} 38%,50%{box-shadow:0 0 22px currentColor;transform:scale(1.14)} 58%,100%{box-shadow:0 0 8px currentColor;transform:scale(1)} }
@keyframes glowC { 0%,62%{box-shadow:0 0 8px currentColor;transform:scale(1)} 72%,84%{box-shadow:0 0 22px currentColor;transform:scale(1.14)} 92%,100%{box-shadow:0 0 8px currentColor;transform:scale(1)} }

/* Drag path: tap a toggle (x1,y1), then grab a slider at x2 and drag to x3 (shared y2) */
.demo-wrap .cursor.cdrag { animation: curDrag 6.5s infinite; }
.demo-wrap .cursor.cdrag::after { animation: ripDrag 6.5s infinite; }
@keyframes curDrag {
  0%,6%    { left:var(--x1); top:var(--y1); transform:scale(1); }
  10%      { left:var(--x1); top:var(--y1); transform:scale(.78); }
  14%,20%  { left:var(--x1); top:var(--y1); transform:scale(1); }
  28%      { left:var(--x2); top:var(--y2); transform:scale(.88); }
  44%      { left:var(--x3); top:var(--y2); transform:scale(.88); }
  48%,100% { left:var(--x3); top:var(--y2); transform:scale(1); }
}
@keyframes ripDrag {
  0%,7%{opacity:0;transform:scale(.5)} 10%{opacity:.85;transform:scale(1)} 16%{opacity:0;transform:scale(1.8)}
  17%,100%{opacity:0}
}

/* Nest a .tap inside its control (.tgl / .step u) for reliable centering */
.demo .step u { position: relative; }
.demo .step u.press { animation: keyPress 6.5s infinite; }
@keyframes keyPress {
  0%,30%{ background:rgba(255,255,255,.09); color:var(--text); }
  34%   { background:var(--red); color:#fff; }
  40%,100%{ background:rgba(255,255,255,.09); color:var(--text); }
}

/* --- Toggle OFF→ON at slot A (rest = ON) --- */
.demo .tgl.anim { animation: trackToOnA 6.5s infinite; }
.demo .tgl.anim::after { left: 23px; right: auto; animation: knobToOnA 6.5s infinite; }
@keyframes trackToOnA { 0%,8%{background:#39394a} 16%,100%{background:var(--seafoam)} }
@keyframes knobToOnA { 0%,8%{left:3px} 16%,100%{left:23px} }

/* --- Toggle ON→OFF at slot A (rest = OFF) e.g. No-Audio Mode --- */
.demo .tgl.anim-off { background:#39394a; animation: trackToOffA 6.5s infinite; }
.demo .tgl.anim-off::after { left: 3px; right: auto; animation: knobToOffA 6.5s infinite; }
@keyframes trackToOffA { 0%,8%{background:var(--seafoam)} 16%,100%{background:#39394a} }
@keyframes knobToOffA { 0%,8%{left:23px} 16%,100%{left:3px} }

/* --- Value cross-fade (rest = new value shown) --- */
.demo .swap { position: relative; display: inline-block; text-align: right; }
.demo .swap .v1 { animation: v1out 6.5s infinite; }
.demo .swap .v2 { position: absolute; right: 0; top: 0; opacity: 1; animation: v2in 6.5s infinite; }
@keyframes v1out { 0%,30%{opacity:1} 40%,100%{opacity:0} }
@keyframes v2in { 0%,30%{opacity:0} 40%,100%{opacity:1} }
/* value bump at slot B to sell the change */
.demo .swap.bump { animation: valBump 6.5s infinite; }
@keyframes valBump { 0%,31%{transform:scale(1)} 36%{transform:scale(1.14)} 42%,100%{transform:scale(1)} }

/* --- Save bar slides in at slot C (rest = visible) --- */
.savebar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 12px 0 4px; padding: 12px 14px;
  background: var(--card-2); border: 1px solid rgba(255,204,0,.35);
  border-radius: 12px; color: var(--text-2); font-size: 14px; font-weight: 600;
}
.savebar .btn { background: var(--seafoam); color: #08222b; padding: 7px 16px; border-radius: 9px; font-weight: 800; }
.demo-wrap .savebar { animation: barC 6.5s infinite; }
@keyframes barC { 0%,52%{opacity:0;transform:translateY(12px)} 62%,100%{opacity:1;transform:translateY(0)} }

/* --- Segmented highlight walk s1→s2→s3 (rest = s3 on) --- */
.demo .seg span.s1 { animation: segS1 6.5s infinite; }
.demo .seg span.s2 { animation: segS2 6.5s infinite; }
.demo .seg span.s3 { animation: segS3 6.5s infinite; }
@keyframes segS1 { 0%,6%{background:transparent;color:var(--text-2)} 10%,20%{background:#4a4a5c;color:#fff} 24%,100%{background:transparent;color:var(--text-2)} }
@keyframes segS2 { 0%,24%{background:transparent;color:var(--text-2)} 28%,38%{background:#4a4a5c;color:#fff} 42%,100%{background:transparent;color:var(--text-2)} }
@keyframes segS3 { 0%,7%{background:transparent;color:var(--text-2)} 11%,100%{background:#4a4a5c;color:#fff} }

/* --- Slider fill + thumb slide (rest = end position).
   Set --end (e.g. 55%) on the .sld element; start is 32%. --- */
.demo .sld.anim { --end: 55%; }
.demo .sld.anim i { width: var(--end); animation: sldFill 6.5s infinite; }
.demo .sld.anim b { left: var(--end); animation: sldThumb 6.5s infinite; }
@keyframes sldFill { 0%,28%{width:32%} 44%,100%{width:var(--end)} }
@keyframes sldThumb {
  0%,28%{left:32%; transform:translateX(-50%) scale(1)}
  36%{transform:translateX(-50%) scale(1.25)}
  44%,100%{left:var(--end); transform:translateX(-50%) scale(1)}
}

/* --- Buzz / vibration jitter at slot C --- */
.buzz { display: inline-block; animation: buzz 6.5s infinite; }
@keyframes buzz {
  0%,44%,54%,100%{transform:translateX(0)}
  45%{transform:translateX(-2.5px)} 47%{transform:translateX(2.5px)}
  49%{transform:translateX(-2.5px)} 51%{transform:translateX(2px)} 53%{transform:translateX(-1px)}
}

/* --- Fade-in + settle pulse (rest = visible) e.g. camera Live --- */
.demo .pop { animation: pop 6.5s infinite; }
@keyframes pop { 0%,22%{opacity:.15;transform:scale(.9)} 32%{opacity:1;transform:scale(1.08)} 42%,100%{opacity:1;transform:scale(1)} }

/* --- Tab-bar highlight walk (4 tabs; rest = tab 1 active) --- */
.demo .tab.t1 { animation: tabOn1 6.5s infinite; }
.demo .tab.t2 { animation: tabOn2 6.5s infinite; }
.demo .tab.t3 { animation: tabOn3 6.5s infinite; }
.demo .tab.t4 { animation: tabOn4 6.5s infinite; }
@keyframes tabOn1 { 0%,16%{color:var(--seafoam)} 22%,94%{color:var(--text-3)} 100%{color:var(--seafoam)} }
@keyframes tabOn2 { 0%,22%{color:var(--text-3)} 28%,42%{color:var(--seafoam)} 48%,100%{color:var(--text-3)} }
@keyframes tabOn3 { 0%,48%{color:var(--text-3)} 52%,66%{color:var(--seafoam)} 72%,100%{color:var(--text-3)} }
@keyframes tabOn4 { 0%,72%{color:var(--text-3)} 76%,90%{color:var(--seafoam)} 96%,100%{color:var(--text-3)} }

/* --- Live-tab camera: tap the camera icon, a nursery frame opens --- */
.livecam .cambtn { width: 36px; height: 36px; border-radius: 9px; background: rgba(127,223,212,.14); border: 1px solid rgba(127,223,212,.32); display: flex; align-items: center; justify-content: center; color: var(--seafoam); flex: none; }
.livecam .cambtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.livecam .camframe { position: relative; margin: 4px 0 6px; height: 132px; border-radius: 12px; background: linear-gradient(135deg, #13243c, #0a1220); border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; overflow: hidden; opacity: 0; transform: translateY(8px); animation: camIn 6.5s infinite; }
.livecam .camframe .moon { width: 52px; height: 52px; border-radius: 50%; background: #2b3a52; box-shadow: 12px 0 0 -2px #13243c inset; }
.livecam .camframe .live { position: absolute; top: 9px; left: 11px; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #fff; }
.livecam .camframe .live .dot { width: 8px; height: 8px; background: var(--red); box-shadow: 0 0 7px var(--red); margin: 0; }
.livecam .camframe .camlabel { position: absolute; bottom: 8px; left: 11px; color: var(--text-2); font-size: 12px; }
@keyframes camIn { 0%,34%{opacity:0;transform:translateY(8px)} 46%,100%{opacity:1;transform:translateY(0)} }

/* --- Watch snapshot: tap the status circle → snapshot → Crown zoom --- */
.watchsnap { width: 132px; height: 158px; margin: 14px auto 6px; border-radius: 36px; background: #05060b; border: 6px solid #24242e; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.watchsnap .snap { width: 96px; height: 118px; border-radius: 22px; background: #0a1220; position: relative; overflow: hidden; }
.watchsnap .statuscircle { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 3px solid var(--seafoam); box-shadow: 0 0 12px rgba(127,223,212,.55); animation: wsStatus 6.5s infinite; }
.watchsnap .snapimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #13243c, #0a1220); opacity: 0; animation: wsSnap 6.5s infinite; }
.watchsnap .snapimg .moon { width: 34px; height: 34px; border-radius: 50%; background: #2b3a52; box-shadow: 8px 0 0 -1px #13243c inset; }
.watchsnap .tag { position: absolute; bottom: 7px; left: 0; right: 0; text-align: center; color: var(--text-2); font-size: 10px; z-index: 2; opacity: 0; animation: wsTag 6.5s infinite; }
@keyframes wsStatus { 0%,12%{opacity:1;transform:scale(1)} 17%{opacity:0;transform:scale(1.25)} 100%{opacity:0} }
@keyframes wsSnap { 0%,14%{opacity:0;transform:scale(1)} 22%,44%{opacity:1;transform:scale(1)} 64%,90%{opacity:1;transform:scale(1.6)} 100%{opacity:1;transform:scale(1)} }
@keyframes wsTag { 0%,20%{opacity:0} 26%,100%{opacity:1} }
.watch-cap { text-align: center; color: var(--text-3); font-size: 12.5px; margin: 2px 0 4px; }

/* --- Watch-face mock: an empty complication slot fills with Dozzi --- */
.watchface { position: relative; width: 178px; height: 212px; margin: 16px auto 36px; border-radius: 46px; background: #05060b; border: 7px solid #24242e; box-shadow: var(--shadow); }
.watchface .wf-time { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 46px; font-weight: 700; color: var(--seafoam); letter-spacing: .01em; }
.watchface .wf-slot { position: absolute; top: 18px; left: 20px; width: 36px; height: 36px; }
.watchface .wf-empty { position: absolute; inset: 0; border: 2px dashed #55556a; border-radius: 50%; color: #6E7191; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; animation: wfEmpty 6.5s infinite; }
.watchface .wf-dozzi { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #8fe9de, #2a9d90); box-shadow: 0 0 12px rgba(127,223,212,.65); opacity: 0; animation: wfDozzi 6.5s infinite; }
.watchface .wf-dozzi::after { content: ""; position: absolute; top: 8px; left: 12px; width: 16px; height: 16px; border-radius: 50%; box-shadow: 5px 4px 0 0 #05060b; }
.watchface .wf-cap { position: absolute; left: 0; right: 0; bottom: -26px; text-align: center; color: var(--text-3); font-size: 12.5px; }
@keyframes wfEmpty { 0%,30%{opacity:1} 40%,100%{opacity:0} }
@keyframes wfDozzi { 0%,32%{opacity:0;transform:scale(.4)} 44%{opacity:1;transform:scale(1.12)} 52%,100%{opacity:1;transform:scale(1)} }

/* --- Transient copy→copied flash (caregivers), returns to label --- */
.demo .copyswap { position: relative; display: inline-block; }
.demo .copyswap .v1 { animation: copyV1 6.5s infinite; }
.demo .copyswap .v2 { position: absolute; left: 0; top: 0; opacity: 0; color: var(--green); animation: copyV2 6.5s infinite; }
@keyframes copyV1 { 0%,10%{opacity:1} 15%,32%{opacity:0} 37%,100%{opacity:1} }
@keyframes copyV2 { 0%,10%{opacity:0} 15%,32%{opacity:1} 37%,100%{opacity:0} }

/* --- Transient row-remove fade (caregivers manage) --- */
.demo .removerow { animation: removeRow 6.5s infinite; }
@keyframes removeRow { 0%,16%{opacity:1} 26%,46%{opacity:.12} 56%,100%{opacity:1} }

/* --- Reveal rows after a toggle flips (background audio) --- */
.demo .reveal { animation: revealRow 6.5s infinite; }
@keyframes revealRow { 0%,14%{opacity:0} 24%,100%{opacity:1} }

/* --- Proximity: one watch that cross-fades green→yellow as you move --- */
.ring-live { text-align: center; margin: 4px 0 10px; }
.ring-live .watch-stack { position: relative; display: inline-block; width: 150px; }
.ring-live .watch-stack img { width: 150px; display: block; }
.ring-live .watch-stack .ry { position: absolute; inset: 0; opacity: 0; animation: crossGY 5s infinite; }
@keyframes crossGY { 0%,38%{opacity:0} 52%,90%{opacity:1} 100%{opacity:0} }
.ring-live .cap { color: var(--text-2); font-size: 13.5px; margin-top: 10px; }
.ring-live .cap .dot { margin: 0 3px 0 8px; }

/* --- Watch cry-alert mock: the red alert + its two response buttons --- */
.watchcry { position: relative; width: 194px; height: 236px; margin: 16px auto 8px; border-radius: 48px; background: #05060b; border: 7px solid #24242e; box-shadow: var(--shadow); overflow: hidden; }
.watchcry .wc-scr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 18px 14px 12px; }
.watchcry .wc-bear { width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #ff6b6b, #b71c1c); animation: wcPulse 1.4s infinite; }
.watchcry .wc-title { color: #FF5252; font-weight: 800; font-size: 13.5px; letter-spacing: .04em; margin-top: 7px; }
.watchcry .wc-sub { color: var(--text-2); font-size: 11px; margin: 1px 0 auto; }
.watchcry .wc-btn { width: 100%; text-align: center; border-radius: 12px; padding: 9px 6px; font-size: 12px; font-weight: 700; margin-top: 7px; }
.watchcry .wc-awake { background: #FF3B30; color: #fff; }
.watchcry .wc-soothe { background: #3E7BB6; color: #fff; }
@keyframes wcPulse { 0%,100%{ box-shadow: 0 0 14px rgba(255,59,48,.55); } 50%{ box-shadow: 0 0 28px rgba(255,59,48,.95); } }

/* --- Click-to-load video embed (privacy-first: no YouTube until played) --- */
.video-embed {
  position: relative; max-width: 280px; margin: 18px auto 8px;
  aspect-ratio: 603 / 1311; border-radius: 22px; overflow: hidden; cursor: pointer;
  background: linear-gradient(160deg, #16213E, #0c1424);
  border: 1px solid rgba(127,223,212,.22); box-shadow: var(--shadow);
}
.video-embed .ve-inner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 20px;
}
.video-embed .ve-play {
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(127,223,212,.16); border: 2px solid var(--seafoam);
  display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.video-embed .ve-play::after {
  content: ""; border-style: solid; border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent var(--seafoam); margin-left: 5px;
}
.video-embed:hover .ve-play { background: rgba(127,223,212,.3); }
.video-embed .ve-label { color: var(--text); font-weight: 700; font-size: 15px; }
.video-embed .ve-sub { color: var(--text-3); font-size: 12.5px; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Reduced motion: freeze on the resting/end state --- */
@media (prefers-reduced-motion: reduce) {
  .demo *, .demo-wrap .savebar, .demo-wrap .cursor, .tap, .buzz { animation: none !important; }
  .tap, .demo-wrap .cursor { display: none; }
  .demo .swap .v1 { opacity: 0; }
  .demo .swap .v2 { opacity: 1; }
}

/* ---- Desktop ----
   Guide articles stay a readable ~760px column (var --maxw).
   The index landing (.wrap.wide) widens so the guide grid breathes. */
.wrap.wide { max-width: 1120px; }
@media (min-width: 820px) {
  .wrap.wide { padding-left: 28px; padding-right: 28px; }
  .wrap.wide .hero { padding-top: 18px; }
  .wrap.wide .hero h1 { font-size: 40px; }
  .wrap.wide .hero p { font-size: 19px; }
  .wrap.wide .grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
  }
  .wrap.wide .tile { padding: 24px; }
  .wrap.wide .tile .ico { width: 50px; height: 50px; }
  .wrap.wide .tile .ico svg { width: 27px; height: 27px; }
  .wrap.wide .tile h3 { font-size: 18px; }
  /* Guide pages: a touch more comfortable on big screens, still a reading column */
  .wrap:not(.wide) .hero h1 { font-size: 33px; }
}