/* ============ Hero Capture — live iOS demo (watch / try) ============ */
.hero-stage{ display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; }

/* mode toggle */
.hs-toggle{
  display:inline-flex; align-items:center; gap:4px;
  padding:4px; border:1px solid var(--hair-2);
  background:rgba(12,26,58,0.55); border-radius:999px;
}
.hs-tab{
  appearance:none; border:none; cursor:pointer; background:none;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--cream-3); font-weight:600;
  padding:9px 17px; border-radius:999px; transition:color .25s, background .25s;
  white-space:nowrap;
}
.hs-tab.is-active{ background:var(--gold); color:var(--ink); font-weight:700; }
.hs-tab:not(.is-active):hover{ color:var(--gold); }

/* phone shell */
.phone{
  position:relative; width:305px; max-width:86vw; aspect-ratio:244/493;
  background:#05080f; border-radius:50px; padding:12px;
  box-shadow:0 46px 100px -34px rgba(0,0,0,0.92), inset 0 0 0 1px rgba(212,175,96,0.14);
}
.phone-notch{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:104px; height:25px; background:#05080f; border-radius:0 0 16px 16px; z-index:6;
}
.phone-screen{
  position:relative; width:100%; height:100%; border-radius:33px; overflow:hidden;
  background:radial-gradient(125% 80% at 50% 16%, #0f1f43 0%, #0a1530 46%, #070f24 100%);
  display:flex; flex-direction:column; color:var(--cream);
}

/* status bar */
.cap-status{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 24px 0; font-family:var(--sans); font-size:13px; font-weight:600;
  color:var(--cream); letter-spacing:.02em;
}
.cap-ind{ display:flex; align-items:center; gap:5px; }
.cap-ind i{ display:block; }
.cap-ind .sig{ width:16px; height:10px; background:
  linear-gradient(90deg,var(--cream) 3px,transparent 0) 0 100%/4px 4px no-repeat,
  linear-gradient(90deg,var(--cream) 3px,transparent 0) 5px 100%/4px 7px no-repeat,
  linear-gradient(90deg,var(--cream) 3px,transparent 0) 10px 100%/4px 10px no-repeat; }
.cap-ind .bat{ width:22px; height:11px; border:1px solid var(--cream); border-radius:3px; position:relative; }
.cap-ind .bat::before{ content:''; position:absolute; inset:1.5px; right:5px; background:var(--cream); border-radius:1px; }
.cap-ind .bat::after{ content:''; position:absolute; right:-3px; top:3px; width:2px; height:5px; background:var(--cream); border-radius:0 1px 1px 0; }

/* header */
.cap-hdr{
  display:flex; align-items:center; justify-content:center;
  height:54px; position:relative;
}
.cap-hdr::after{
  content:''; position:absolute; left:24px; right:24px; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,96,0.4) 50%,transparent);
}
.cap-seal{ position:absolute; left:22px; top:50%; transform:translateY(-50%); display:inline-flex; }
.cap-wm{ font-family:var(--serif); font-weight:600; font-size:15px; letter-spacing:0.34em; text-indent:0.34em; color:var(--cream); }

/* body */
.cap-body{ flex:1; display:flex; flex-direction:column; align-items:center; padding:24px 22px 8px; text-align:center; min-height:0; }
.cap-eyebrow{ font-family:var(--mono); font-size:10px; letter-spacing:0.34em; color:var(--gold); font-weight:700; }
.cap-q{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:25px; line-height:1.12; letter-spacing:-0.01em; color:var(--cream); margin-top:14px; }
.cap-q em{ font-style:italic; color:var(--gold); }

.cap-stage{ flex:1; width:100%; display:flex; flex-direction:column; align-items:center; min-height:0; overflow-y:auto; overflow-x:hidden; padding:8px 2px; }
.cap-stage > *{ margin-top:auto; margin-bottom:auto; flex:0 0 auto; }
.cap-stage::-webkit-scrollbar{ width:4px; }
.cap-stage::-webkit-scrollbar-thumb{ background:rgba(212,175,96,0.3); border-radius:2px; }

/* mic */
.cap-mic{ display:flex; flex-direction:column; align-items:center; gap:18px; cursor:pointer; }
.cap-mic-svg{ width:152px; height:152px; }
.cap-mic .pulse-ring{ transform-origin:center; }
.cap-mic.listening .pulse-ring{ animation:capPulse 1.6s ease-out infinite; }
@keyframes capPulse{ 0%{ opacity:.5; transform:scale(.78);} 70%{opacity:0;transform:scale(1.05);} 100%{opacity:0;} }
.cap-mic.idle .breathe{ animation:capBreathe 3s ease-in-out infinite; }
@keyframes capBreathe{ 0%,100%{opacity:.5;} 50%{opacity:.9;} }

/* typed input (try mode) */
.cap-input{ width:100%; display:flex; flex-direction:column; gap:14px; align-items:center; }
.cap-field{
  width:100%; background:rgba(7,15,36,0.7); border:1px solid rgba(212,175,96,0.3);
  border-radius:14px; padding:14px 14px; color:var(--cream);
  font-family:var(--serif); font-size:15px; font-style:italic; text-align:center;
  outline:none; resize:none; line-height:1.4; min-height:74px;
}
.cap-field::placeholder{ color:var(--cream-4); font-style:italic; }
.cap-field:focus{ border-color:var(--gold); }
.cap-go{
  appearance:none; border:1px solid var(--gold); background:var(--gold); color:var(--ink);
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  font-weight:700; padding:11px 22px; border-radius:999px; cursor:pointer; transition:opacity .2s;
}
.cap-go:hover{ opacity:.88; }
.cap-chips{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.cap-chip{
  font-family:var(--mono); font-size:9px; letter-spacing:0.08em; color:var(--cream-2);
  border:1px solid var(--hair-2); border-radius:999px; padding:6px 10px; cursor:pointer;
  background:none; transition:all .2s;
}
.cap-chip:hover{ border-color:var(--gold-soft); color:var(--gold); }

/* utterance bubble */
.cap-utter{
  width:100%; background:rgba(212,175,96,0.06); border:1px solid rgba(212,175,96,0.22);
  border-radius:14px; padding:14px 16px; color:var(--cream);
  font-family:var(--serif); font-style:italic; font-size:15.5px; line-height:1.4; text-align:left;
}
.cap-utter .caret{ display:inline-block; width:2px; height:1em; background:var(--gold); margin-left:1px; vertical-align:-2px; animation:capCaret 1s steps(1) infinite; }
@keyframes capCaret{ 50%{opacity:0;} }

/* composing steps */
.cap-compose{ width:100%; display:flex; flex-direction:column; gap:11px; }
.cap-step{
  display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px;
  letter-spacing:0.06em; color:var(--cream-3); opacity:0; transform:translateY(4px);
  transition:opacity .4s, color .4s, transform .4s;
}
.cap-step.in{ opacity:1; transform:none; }
.cap-step .tick{ width:15px; height:15px; flex:0 0 auto; border-radius:50%; border:1px solid var(--gold-soft); position:relative; }
.cap-step.done{ color:var(--cream); }
.cap-step.done .tick{ border-color:var(--gold); background:rgba(212,175,96,0.15); }
.cap-step.done .tick::after{ content:''; position:absolute; left:4.5px; top:2px; width:3.5px; height:7px; border:solid var(--gold); border-width:0 1.4px 1.4px 0; transform:rotate(45deg); }
.cap-step.run .tick{ border-color:var(--gold); border-top-color:transparent; animation:capSpin .7s linear infinite; }
@keyframes capSpin{ to{ transform:rotate(360deg);} }

/* composed arc */
.cap-arc{ width:100%; display:flex; flex-direction:column; text-align:left; }
.cap-arc-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.cap-arc-day{ font-family:var(--serif); font-style:italic; font-size:18px; color:var(--cream); }
.cap-arc-tag{ font-family:var(--mono); font-size:8.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); }
.cap-arc-body{ position:relative; }
.cap-arc-body::before{ content:''; position:absolute; left:24px; top:22px; bottom:22px; width:1px; background:linear-gradient(180deg,transparent,rgba(212,175,96,0.35),transparent); }
.cap-node{ display:grid; grid-template-columns:50px 1fr; gap:13px; align-items:center; padding:7px 0; opacity:0; transform:translateY(8px); transition:opacity .45s, transform .45s; position:relative; }
.cap-node.in{ opacity:1; transform:none; }
.nimg{ width:50px; height:50px; border-radius:12px; position:relative; overflow:hidden; border:1px solid rgba(212,175,96,0.22); box-shadow:0 6px 18px -8px rgba(0,0,0,0.7); z-index:1; }
.nimg::after{ content:''; position:absolute; inset:0; background:radial-gradient(70% 60% at 32% 24%, rgba(255,255,255,0.16), transparent 70%); }
.t-warm{ background:linear-gradient(140deg,#5a2f3f,#341d2a); }
.t-amber{ background:linear-gradient(140deg,#5a3f20,#332515); }
.t-violet{ background:linear-gradient(140deg,#3a2a5a,#221a36); }
.t-teal{ background:linear-gradient(140deg,#1a4a52,#102e34); }
.t-slate{ background:linear-gradient(140deg,#2a3a5a,#1a2740); }
.t-green{ background:linear-gradient(140deg,#2a5a3f,#173a2a); }
.ninfo .nt{ font-family:var(--mono); font-size:10.5px; color:var(--gold); font-weight:600; letter-spacing:0.04em; }
.ninfo .nn{ font-family:var(--serif); font-size:16px; color:var(--cream); line-height:1.15; margin-top:1px; }
.ninfo .nd{ font-family:var(--sans); font-size:10.5px; color:var(--cream-3); margin-top:2px; line-height:1.35; }
.cap-trans{ display:flex; align-items:center; gap:8px; padding:2px 0 2px 60px; font-family:var(--mono); font-size:8.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--cream-4); opacity:0; transition:opacity .4s; }
.cap-trans.in{ opacity:1; }
.cap-trans-dot{ width:4px; height:4px; border-radius:50%; background:rgba(212,175,96,0.5); flex:0 0 auto; }
.cap-arc-foot{ margin-top:14px; padding-top:12px; border-top:1px solid var(--hair-2); font-family:var(--mono); font-size:9px; letter-spacing:0.08em; color:var(--cream-3); line-height:1.5; }
.cap-arc-foot b{ color:var(--gold); font-weight:600; }

/* foot / hint / home */
.cap-foot{ padding:0 0 16px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.cap-hint{ font-family:var(--mono); font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--cream-3); transition:color .3s; min-height:14px; }
.cap-replay{ cursor:pointer; color:var(--gold); }
.cap-home{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(212,175,96,0.35);
  display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:15px; }

.cap-stage > *{ animation:capFade .45s ease; }

@keyframes capFade{ from{opacity:0;} to{opacity:1;} }

@media (max-width:880px){ .phone{ width:282px; } }