/* ============================================================================
   AeroCompanion prototype — v2 styles
   Family tokens shared with Flight Service v2 (navy #0b1f3a, accent #1f4e99,
   Inter); a warmer neutral surface for the consumer product.
   ========================================================================== */
:root{
  --navy:#0b1f3a; --navy-2:#13294b;
  --accent:#1f4e99; --accent-2:#173d7a; --accent-soft:#e8eef8; --accent-line:#b8c9e6;
  --ink:#0f1b2d; --text:#1f2a3a; --muted:#3f4d60; --faint:#4b5a6e;
  --line:#d8dde4; --line-2:#e6e9ee;
  --bg:#f4f2ee; --card:#ffffff; --surface-2:#f8f7f4;
  --sun:#f5b400;
  /* status — AA with the text colour each is paired with */
  --ok:#1d6f38;      --ok-bg:#e6f4ea;   --ok-line:#a8d5b5;
  --warn:#7a4d00;    --warn-bg:#fff4d9; --warn-line:#f0c65a;
  --bad:#8a1c16;     --bad-bg:#fdeceb;  --bad-line:#e8a39e;
  --info:#173d7a;    --info-bg:#e8eef8; --info-line:#b8c9e6;
  --teal:#0b5563;    --teal-bg:#e3f1f4; --teal-line:#a9d3dc;
  --low:#1d6f38; --moderate:#8a5a00; --high:#b4410b; --critical:#b42318;
  --shadow:0 1px 2px rgba(11,31,58,.06),0 8px 24px rgba(11,31,58,.07);
  --radius:14px;
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--text); font-size:15px; line-height:1.45;
  background:radial-gradient(1000px 560px at 72% 8%,#1c3a64 0%,#0b1f3a 52%,#071528 100%);
  min-height:100vh;
}
button,input{font-family:var(--font)}
.i{width:1em; height:1em; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:-.125em}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
:focus-visible{outline:3px solid var(--sun); outline-offset:2px; box-shadow:0 0 0 2px var(--navy)}
input:focus-visible{outline:none; box-shadow:none}

/* ---- desktop stage: pitch rail + device --------------------------------- */
.stage{display:flex; gap:64px; align-items:center; justify-content:center;
  min-height:100vh; padding:40px 24px}
.pitch{width:420px; color:#d6deea}
.pitch-logo{display:flex; align-items:center; gap:10px; font-size:22px; font-weight:700; letter-spacing:-.01em; color:#fff}
.pitch-logo .i{width:28px; height:28px; color:#ffd978}
.pitch-eyebrow{display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#ffd978; background:rgba(245,180,0,.12); border:1px solid rgba(245,180,0,.35);
  padding:4px 10px; border-radius:999px}
.pe-dot{width:7px; height:7px; border-radius:50%; background:var(--sun)}
.pitch-photo{display:block; width:100%; height:auto; aspect-ratio:840/375; object-fit:cover;
  margin:18px 0 0; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 32px rgba(0,0,0,.35)}
.pitch-tag{font-size:21px; line-height:1.35; font-weight:600; margin:20px 0 18px; color:#fff; letter-spacing:-.01em}
.pitch-points{list-style:none; padding:0; margin:0 0 20px; display:grid; gap:12px}
.pitch-points li{display:flex; align-items:flex-start; gap:12px; font-size:14.5px; line-height:1.5; color:#c8d3e2}
.pitch-points li .i{width:18px; height:18px; margin-top:2px; color:#9db8e3}
.pitch-points strong{color:#fff; font-weight:600}
.pitch-note{font-size:13px; line-height:1.55; color:#c8d3e2; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:12px 14px}
.pitch-note strong{color:#fff}
.pitch-jump{margin-top:18px}
.pj-label{font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#93a3b8; margin-bottom:8px}
.pj-row{display:flex; flex-wrap:wrap; gap:8px}
.pj-row button{min-height:44px; padding:8px 14px; border-radius:8px; cursor:pointer;
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.28); font-size:13px; font-weight:500;
  transition:background .15s,border-color .15s}
.pj-row button:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5)}
.pitch-foot{margin-top:20px; font-size:12px; color:#93a3b8; letter-spacing:.02em}

/* ---- the phone ---------------------------------------------------------- */
.device{position:relative; flex:0 0 auto}
.device-notch{position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:130px; height:26px; background:#05070f; border-radius:0 0 16px 16px; z-index:20}
.phone{
  width:392px; height:812px; background:var(--bg); border-radius:46px;
  border:11px solid #05070f; box-shadow:0 40px 80px rgba(0,0,0,.5),0 0 0 2px #1c2b44;
  overflow:hidden; position:relative; display:flex; flex-direction:column;
}

/* ---- prototype ribbon --------------------------------------------------- */
.demo-ribbon{flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--warn-bg); color:#4a2f00; border-bottom:1px solid var(--warn-line);
  font-size:11px; font-weight:600; letter-spacing:.02em; text-align:center; padding:40px 10px 6px}
.dr-tag{background:#4a2f00; color:#fff; font-weight:700; font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; padding:2px 7px; border-radius:4px}

/* ---- top app bar -------------------------------------------------------- */
.appbar{flex:0 0 auto; height:56px; display:flex; align-items:center; gap:4px; padding:0 10px;
  background:var(--navy); color:#fff; position:relative}
.appbar-back{background:none; border:none; color:#fff; width:44px; height:44px; border-radius:8px;
  display:grid; place-items:center; cursor:pointer; visibility:hidden; padding:0}
.appbar-back .i{width:24px; height:24px}
.appbar-back:hover{background:rgba(255,255,255,.08)}
.appbar.can-back .appbar-back{visibility:visible}
.appbar-title{margin:0; font-size:17px; font-weight:600; flex:1; text-align:center; letter-spacing:-.005em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.appbar.can-back .appbar-title{text-align:left}
.appbar-badge{min-width:44px; text-align:center; font-size:10.5px; font-weight:700; letter-spacing:.08em; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); padding:3px 8px; border-radius:999px}

/* ---- screens ------------------------------------------------------------ */
.screens{flex:1 1 auto; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; position:relative}
.screen{display:none; padding:16px 16px 28px; animation:fade .2s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.screen{animation:none}}
.screen-intro{font-size:13.5px; color:var(--muted); line-height:1.5; margin:2px 2px 14px}
.screen-intro strong{color:var(--ink)}
.section-label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:22px 2px 10px}

/* ---- home --------------------------------------------------------------- */
.greeting-hi{font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--ink)}
.greeting-loc{display:flex; align-items:center; gap:5px; font-size:13px; color:var(--text); margin-top:2px}
.greeting-loc .i{color:var(--accent)}
.search-hero{display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:5px 5px 5px 14px; margin:14px 0 12px; box-shadow:var(--shadow)}
.search-hero:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,78,153,.2)}
.search-icon{width:18px; height:18px; color:var(--muted)}
.search-hero input{flex:1; min-width:0; min-height:46px; border:none; outline:none; font-size:16px; background:none; color:var(--ink)}
.search-hero input::placeholder{color:#6f7b8c}
.search-go{background:var(--accent); color:#fff; border:none; border-radius:9px; min-height:46px; padding:0 18px;
  font-size:14.5px; font-weight:600; cursor:pointer}
.search-go:hover{background:var(--accent-2)}
.quick-actions{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.qa{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:72px;
  background:var(--card); border:1px solid var(--line-2); border-radius:12px; padding:10px 4px;
  color:var(--text); cursor:pointer; box-shadow:0 1px 2px rgba(11,31,58,.05)}
.qa .i{width:22px; height:22px; color:var(--accent)}
.qa span{font-size:11.5px; font-weight:600; line-height:1.2; text-align:center}
.qa:hover{border-color:var(--accent-line); background:#fbfcfe}
.qa:active,.act:active,.search-go:active{transform:translateY(1px)}

/* ---- generic card ------------------------------------------------------- */
.card{background:var(--card); border:1px solid var(--line-2); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px; margin-bottom:12px}
.card.tap,.hero-card{cursor:pointer; transition:border-color .15s,box-shadow .15s}
.card.tap:hover{border-color:var(--accent-line)}
.row-title{font-weight:650; font-size:14.5px; color:var(--ink)}
.row-ic{flex:0 0 40px; width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent)}
.row-ic .i{width:20px; height:20px}
.chev{color:var(--faint); display:inline-flex}
.chev .i{width:18px; height:18px}

/* flight summary card */
.fcard-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.fcard-route{font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--ink)}
.fcard-sub{font-size:12.5px; color:var(--muted); margin-top:3px}
.fcard-times{display:flex; align-items:center; gap:14px; margin-top:14px}
.fcard-pt{flex:0 0 auto}
.fcard-code{font-size:20px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.fcard-time{font-size:13px; color:var(--text); font-variant-numeric:tabular-nums}
.fcard-time s{color:var(--muted); text-decoration-thickness:1px}
.fcard-mid{flex:1; text-align:center; position:relative}
.fcard-line{height:2px; background:repeating-linear-gradient(90deg,#b9c3d0 0 6px,transparent 6px 12px); position:relative}
.fcard-line::after{content:""; position:absolute; right:-6px; top:-7px; width:16px; height:16px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231f4e99' transform='rotate(90 12 12)' d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E")}
.fcard-dur{font-size:11.5px; color:var(--muted); margin-top:6px}
.fcard-prov{display:flex; align-items:center; gap:6px; margin-top:12px; padding-top:10px;
  border-top:1px dashed var(--line); font-size:11.5px; color:var(--muted)}
.fcard-prov .i{width:13px; height:13px}

/* status chip + risk pill — tinted, labelled, never colour-only */
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:3px 10px; border-radius:999px; border:1px solid; white-space:nowrap}
.chip::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.chip.ontime{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line)}
.chip.delayed{background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line)}
.chip.cancelled{background:var(--bad-bg); color:var(--bad); border-color:var(--bad-line)}
.chip.inair{background:var(--info-bg); color:var(--info); border-color:var(--info-line)}
.chip.landed,.chip.watching{background:var(--teal-bg); color:var(--teal); border-color:var(--teal-line)}
.pill{display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; padding:3px 9px;
  border-radius:999px; color:#fff; white-space:nowrap}
.pill.low{background:var(--low)} .pill.moderate,.pill.delayed{background:var(--moderate)}
.pill.high{background:var(--high)} .pill.critical{background:var(--critical)}
.pill.watching{background:var(--teal)} .pill.current{background:var(--accent)}

/* confidence / source line */
.confidence{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11.5px; color:var(--muted);
  border-top:1px dashed var(--line); margin-top:14px; padding-top:11px}
.confidence b{color:var(--text); font-weight:600}
.confidence .dot{opacity:.5}
.conf-badge{font-weight:700; padding:1px 7px; border-radius:6px; font-size:11px}
.conf-High{background:var(--ok-bg); color:var(--ok)} .conf-Moderate{background:var(--warn-bg); color:var(--warn)}
.conf-Low{background:var(--bad-bg); color:var(--bad)}

/* ---- flight detail ------------------------------------------------------ */
.fd-hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 55%,var(--accent) 130%); color:#fff;
  border-radius:var(--radius); padding:18px; margin-bottom:12px; position:relative; overflow:hidden}
.fd-hero .chip{border-color:transparent}
.watch-hero{background:linear-gradient(135deg,#08303b 0%,#0b5563 100%)}
.fd-air{font-size:12.5px; color:#d6deea; display:flex; justify-content:space-between; gap:8px}
.fd-mode{display:inline-flex; align-items:center; gap:5px}
.fd-route{display:flex; align-items:center; gap:12px; margin:10px 0 4px}
.fd-ap{font-size:30px; font-weight:800; letter-spacing:-.02em}
.fd-arc{flex:1; height:30px; position:relative}
.fd-arc svg{width:100%; height:30px; overflow:visible}
.fd-city{display:flex; justify-content:space-between; font-size:12px; color:#d6deea}
.fd-note{font-size:12.5px; color:#e6ecf4; margin-left:8px}
.fd-cards{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.fd-leg{background:var(--card); border:1px solid var(--line-2); border-radius:12px; padding:13px; box-shadow:var(--shadow); min-width:0}
.fd-leg h4{margin:0 0 8px; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.fd-kv{display:flex; justify-content:space-between; gap:8px; font-size:13px; padding:3px 0}
.fd-kv span:first-child{color:var(--muted)}
.fd-kv span:last-child{font-weight:600; color:var(--ink); text-align:right}
.fd-kv s{color:var(--muted); text-decoration-thickness:1px}
.fd-kv .late{color:var(--high)}
.delay-panel{display:flex; gap:12px; background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:12px;
  padding:13px; margin-top:12px}
.delay-panel .dp-ic{color:var(--warn); padding-top:1px}
.delay-panel .dp-ic .i{width:22px; height:22px}
.delay-panel h4{margin:0 0 3px; font-size:13.5px; color:var(--warn)}
.delay-panel p{margin:0; font-size:12.5px; line-height:1.5; color:#5c3d05}
.action-row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px}
.action-row.four{grid-template-columns:repeat(2,1fr)}
.act{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:64px;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 4px; font-size:12px; font-weight:600;
  cursor:pointer; color:var(--text)}
.act .ic{display:inline-flex; color:var(--accent)}
.act .ic .i{width:20px; height:20px}
.act:hover{border-color:var(--accent-line); background:#fbfcfe}
.act.primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.act.primary .ic{color:#fff}
.act.primary:hover{background:var(--accent-2)}

/* ---- connection risk ---------------------------------------------------- */
.risk-hero{display:flex; gap:16px; align-items:center; background:var(--card); border:1px solid var(--line-2);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); margin-bottom:12px}
.ring{flex:0 0 auto; width:96px; height:96px; border-radius:50%; display:grid; place-items:center; position:relative}
.ring::before{content:""; position:absolute; inset:9px; background:var(--card); border-radius:50%}
.ring-val{position:relative; text-align:center}
.ring-pct{font-size:26px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums}
.ring-lab{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-top:3px}
.risk-hero-txt h3{margin:0 0 4px; font-size:16px; color:var(--ink)}
.risk-hero-txt p{margin:0; font-size:12.5px; color:var(--muted); line-height:1.45}
.risk-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px}
.rstat{background:var(--card); border:1px solid var(--line-2); border-radius:12px; padding:12px 6px; text-align:center; box-shadow:var(--shadow)}
.rstat b{display:block; font-size:21px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums}
.rstat span{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.rstat.bad b{color:var(--high)}
.scenario-row{display:flex; flex-wrap:wrap; gap:8px; padding:2px 0 8px; margin:0 0 4px}
.scn{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; min-height:44px; background:var(--card); border:1px solid #7a8698; border-radius:999px; padding:0 14px;
  font-size:12.5px; font-weight:600; cursor:pointer; color:var(--text); white-space:nowrap}
.scn:hover{border-color:var(--accent-line)}
.scn.active{background:var(--navy); color:#fff; border-color:var(--navy); box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.scn.active::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--sun)}
.reco{display:flex; gap:10px; padding:11px 0; border-bottom:1px solid var(--line-2); font-size:13.5px; line-height:1.45}
.reco:last-child{border-bottom:none}
.reco .rn{flex:0 0 24px; height:24px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  font-size:12px; font-weight:700; display:grid; place-items:center}

/* ---- timeline ----------------------------------------------------------- */
.timeline{position:relative; margin-left:4px}
.tl-item{display:flex; gap:14px; padding-bottom:18px; position:relative}
.tl-item::before{content:""; position:absolute; left:13px; top:28px; bottom:-2px; width:2px; background:var(--line)}
.tl-item:last-child::before{display:none}
.tl-dot{flex:0 0 28px; height:28px; border-radius:50%; background:#fff; border:2px solid var(--line);
  display:grid; place-items:center; color:var(--muted); z-index:1}
.tl-dot .i{width:14px; height:14px}
.tl-item.done .tl-dot{background:var(--ok); border-color:var(--ok); color:#fff}
.tl-item.now .tl-dot{background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 0 0 4px rgba(31,78,153,.18)}
.tl-body{flex:1; padding-top:2px}
.tl-time{font-size:12px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums}
.tl-item.now .tl-time{color:var(--accent)}
.tl-label{font-size:14.5px; font-weight:650; margin:1px 0 2px; color:var(--ink)}
.tl-detail{font-size:12.5px; color:var(--muted); line-height:1.4}
.tl-item.now .tl-label::after{content:"NOW"; font-size:9.5px; font-weight:800; background:var(--accent); color:#fff;
  padding:2px 6px; border-radius:5px; margin-left:8px; vertical-align:middle; letter-spacing:.05em}

/* ---- chat --------------------------------------------------------------- */
#ai.screen{display:none; flex-direction:column; height:100%; padding-bottom:12px}
#ai.screen.active{display:flex}
.chat{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding:4px 2px 12px}
.msg{max-width:88%; font-size:14px; line-height:1.5; padding:11px 13px; border-radius:14px}
.msg.user{align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start; background:var(--card); border:1px solid var(--line-2); border-bottom-left-radius:4px; color:var(--text)}
.msg.bot strong{font-weight:700; color:var(--ink)}
.msg .pill{margin:0 1px}
.msg-meta{display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:11px; color:var(--muted); margin-top:9px;
  border-top:1px dashed var(--line); padding-top:8px}
.mm-t{display:inline-flex; align-items:center; gap:4px}
.msg-actions{display:flex; gap:7px; flex-wrap:wrap; margin-top:10px}
.msg-actions button{min-height:44px; background:var(--accent-soft); color:var(--accent-2); border:1px solid var(--accent-line);
  border-radius:9px; padding:0 12px; font-size:12.5px; font-weight:600; cursor:pointer}
.msg-actions button:hover{background:#dce6f5}
.msg.typing{color:var(--muted); font-style:italic}
.chat-suggested{display:flex; gap:7px; overflow-x:auto; padding:8px 2px 4px}
.chat-suggested button{flex:0 0 auto; min-height:44px; white-space:nowrap; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:0 14px; font-size:12.5px; cursor:pointer; color:var(--text)}
.chat-suggested button:hover{border-color:var(--accent-line)}
.chat-input{display:flex; gap:8px; padding-top:8px}
.chat-input input{flex:1; min-width:0; min-height:46px; border:1px solid var(--line); border-radius:999px; padding:0 16px;
  font-size:16px; outline:none; background:#fff; color:var(--ink)}
.chat-input input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,78,153,.2)}
.chat-input button{flex:0 0 46px; height:46px; border-radius:50%; border:none; background:var(--accent);
  color:#fff; cursor:pointer; display:grid; place-items:center}
.chat-input button .i{width:18px; height:18px}
.chat-input button:hover{background:var(--accent-2)}

/* ---- airport ------------------------------------------------------------ */
.ap-head{font-size:18px; font-weight:700; margin:2px 2px 2px; color:var(--ink)}
.ap-sub{font-size:12.5px; color:var(--muted); margin:0 2px 14px}
.tsa-row,.walk-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-2)}
.tsa-row:last-child,.walk-row:last-child{border-bottom:none}
.tsa-name{font-size:13.5px; font-weight:600; color:var(--ink)}
.tsa-via{font-size:12px; color:var(--muted)}
.tsa-wait{font-size:16px; font-weight:700; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums}
.tsa-wait small{font-size:11px; font-weight:600; color:var(--muted); margin-left:1px}
.trend{font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:6px; margin-left:8px}
.trend.rising{background:var(--bad-bg); color:var(--bad)} .trend.steady{background:var(--ok-bg); color:var(--ok)}
.amen{display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line-2)}
.amen:last-child{border-bottom:none}
.amen .ai-ic{flex:0 0 36px; width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent)}
.amen .ai-ic .i{width:18px; height:18px}
.amen-name{font-size:13.5px; font-weight:600; color:var(--ink)}
.amen-detail{font-size:12px; color:var(--muted)}
.pickup-card{background:linear-gradient(135deg,#08303b 0%,#0b5563 100%); color:#fff; border:none}
.pickup-card .fd-kv span{color:#cde6ec} .pickup-card .fd-kv span:last-child{color:#fff}
.pickup-card h4{margin:0 0 8px; font-size:13px; color:#fff}
.pickup-note{font-size:12.5px; line-height:1.5; margin:10px 0 0; color:#d9f0f4}

/* ---- profile ------------------------------------------------------------ */
.prof-row{display:flex; justify-content:space-between; align-items:center; min-height:48px; padding:10px 0; border-bottom:1px solid var(--line-2); font-size:14px}
.prof-row .pv{color:var(--muted); font-size:13px; display:inline-flex}
.plan-grid{display:grid; gap:10px; margin-top:6px}
.plan{border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--card)}
.plan.cur{border-color:var(--accent); background:var(--accent-soft)}
.plan-name{font-size:14px; font-weight:700; display:flex; justify-content:space-between; align-items:center; color:var(--ink)}
.plan-price{font-size:13px; color:var(--text); margin:4px 0 6px; font-weight:600}
.plan-feat{font-size:12.5px; color:var(--muted); line-height:1.5}
.ghost-btn{width:100%; min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px;
  background:none; border:1.5px dashed #b9c3d0; border-radius:12px; padding:12px;
  color:var(--accent-2); font-size:13.5px; font-weight:600; cursor:pointer; margin-top:8px}
.ghost-btn:hover{background:var(--accent-soft)}

/* ---- tab bar ------------------------------------------------------------ */
.tabbar{flex:0 0 auto; display:flex; background:var(--card); border-top:1px solid var(--line);
  padding:4px 4px 18px}
.tab{flex:1; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:none; border:none; color:#5b6778; cursor:pointer; padding:4px 0; position:relative; border-radius:10px}
.tab .i{width:22px; height:22px}
.tab span{font-size:12px; font-weight:600}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--accent)}
.tab.active::before{content:""; position:absolute; top:-5px; left:28%; right:28%; height:3px; border-radius:0 0 3px 3px; background:var(--accent)}

/* ---- toast -------------------------------------------------------------- */
.toast{position:fixed; left:50%; bottom:40px; transform:translate(-50%,20px); background:var(--navy); color:#fff;
  font-size:13.5px; padding:12px 18px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.3);
  opacity:0; pointer-events:none; transition:opacity .25s,transform .25s; z-index:100; max-width:min(320px,calc(100vw - 32px)); text-align:center}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* ---- home: connection-risk entry, family, group, prediction ------------- */
.hero-card{display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--accent-line);
  border-left:4px solid var(--accent); border-radius:var(--radius); padding:12px 12px 12px 14px; margin:4px 0 0;
  box-shadow:var(--shadow); color:var(--text)}
.hero-card:hover{border-color:var(--accent)}
.hero-ic{flex:0 0 40px; width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent)}
.hero-ic .i{width:22px; height:22px}
.hero-txt{flex:1; min-width:0}
.hero-eyebrow{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}
.hero-title{font-size:15px; font-weight:700; margin:2px 0 2px; color:var(--ink)}
.hero-sub{font-size:12.5px; line-height:1.4; color:var(--muted)}
.hero-cta{color:var(--accent); display:inline-flex}
.hero-cta .i{width:20px; height:20px}

.risk-row{display:flex; align-items:center; gap:12px}
.rr-ic{flex:0 0 40px; width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background:#fdeee4; color:var(--high)}
.rr-ic .i{width:20px; height:20px}
.warn-inline{display:inline-flex; align-items:center; gap:5px; color:var(--high); font-weight:600}
.warn-inline .i{width:13px; height:13px}

.fam-stack{display:flex}
.fam-dot{width:14px; height:14px; border-radius:50%; display:inline-block; border:2px solid var(--card); margin-left:-4px; flex:0 0 auto}
.fam-stack .fam-dot:first-child{margin-left:0}
.fam-dot.green{background:var(--ok)} .fam-dot.amber{background:var(--moderate)}
.fam-dot.red{background:var(--critical)} .fam-dot.blue{background:var(--teal)}
.fam-card{border-left-width:4px; border-left-style:solid}
.fam-card.green{border-left-color:var(--ok)} .fam-card.amber{border-left-color:var(--moderate)}
.fam-card.red{border-left-color:var(--critical)} .fam-card.blue{border-left-color:var(--teal)}
.fam-avatar{flex:0 0 40px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:700; color:#fff; font-size:16px}
.fam-avatar.green{background:var(--ok)} .fam-avatar.amber{background:var(--moderate)}
.fam-avatar.red{background:var(--critical)} .fam-avatar.blue{background:var(--teal)}
.fam-pill{font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; color:#fff; white-space:nowrap}
.fam-pill.green{background:var(--ok)} .fam-pill.amber{background:var(--moderate)}
.fam-pill.red{background:var(--critical)} .fam-pill.blue{background:var(--teal)}

.grp-head{margin:2px 2px 12px}
.grp-counts{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px}
.grp-count{background:var(--card); border:1px solid var(--line-2); border-radius:12px; padding:12px 6px; text-align:center; box-shadow:var(--shadow)}
.grp-count b{display:block; font-size:24px; font-weight:800; line-height:1.1}
.grp-count span{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.grp-count.green b{color:var(--ok)} .grp-count.amber b{color:var(--moderate)} .grp-count.red b{color:var(--critical)}
.grp-row{display:flex; align-items:center; gap:11px; min-height:52px; padding:10px 0; border-bottom:1px solid var(--line-2)}
.grp-row:last-child{border-bottom:none}
.grp-row.tap{cursor:pointer}
.grp-row-name{font-size:14px; font-weight:650; color:var(--ink)}

.predict-panel{background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:12px; padding:13px; margin-top:12px}
.predict-head{font-size:13px; font-weight:700; color:var(--accent-2); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.predict-src{font-size:11px; font-weight:600; color:var(--accent-2); background:#fff; border:1px solid var(--accent-line); padding:1px 7px; border-radius:6px}
.predict-row{display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:13px; color:var(--text)}
.predict-weather{display:flex; align-items:flex-start; gap:7px; font-size:12.5px; color:var(--accent-2); margin-top:9px; line-height:1.4}
.predict-weather .i{margin-top:2px}

/* ---- responsive: full-bleed on real phones ------------------------------ */
@media (max-width:1060px){ .stage{gap:40px} .pitch{width:360px} }
@media (max-width:900px){
  body{background:var(--bg)}
  .pitch{display:none}
  .stage{padding:0; display:block; min-height:0}
  .device{width:100%}
  .device-notch{display:none}
  .phone{width:100%; height:100vh; height:100dvh; border:none; border-radius:0; box-shadow:none}
  .demo-ribbon{padding-top:6px}
  .tabbar{padding-bottom:max(6px,env(safe-area-inset-bottom))}
}

/* ---- review round 2: illustrative labels -------------------------------- */
.illus{display:inline-block; vertical-align:middle; margin-left:6px; font-size:10.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--warn); background:var(--warn-bg); border:1px solid var(--warn-line); padding:1px 6px; border-radius:5px}
.pr-val{display:inline-flex; align-items:center; gap:6px}
.pr-val small{font-size:11px; font-weight:600; color:var(--accent-2); font-style:italic}