/* ============================================================
   Duo · components — cards, buttons, nav, modal, charts
   ============================================================ */

/* ---- cards ---- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:22px;
  margin-bottom:14px;
  box-shadow:var(--shadow-sm);
}
.card.hero{
  position:relative; overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow-md);
}
.card.glow{
  border-color:var(--mint-line);
  background:var(--mint-dim);
  box-shadow:var(--shadow-md);
}
@media (hover:hover) and (min-width:960px){
  .card{transition:box-shadow .28s var(--spring), transform .28s var(--spring);}
  .card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
}

/* ---- buttons ---- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:15px 18px; border-radius:var(--r-md);
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  font-size:15px; font-weight:600; cursor:pointer; font-family:inherit; letter-spacing:-0.01em;
  transition:transform .12s, background .16s, border-color .16s, box-shadow .16s;
  box-shadow:var(--shadow-sm);
}
.btn:hover{background:var(--surface-2); border-color:var(--ink-3);}
.btn:active{transform:scale(0.98);}
.btn.primary{
  background:var(--mint); color:var(--mint-ink); border:none;
  box-shadow:var(--shadow-accent);
  transition:transform .12s, background .16s;
}
.btn.primary:hover{background:var(--mint-deep);}
.btn.ghost{background:transparent; border:none; color:var(--ink-2); font-weight:500; box-shadow:none;}
.btn.ghost:hover{background:var(--surface-2); color:var(--ink);}
.btn.danger{background:var(--red-dim); color:var(--red); border-color:transparent; box-shadow:none;}
.btn.danger:hover{background:#f2ddd9;}
.btn:disabled{opacity:0.4; pointer-events:none;}
.btn .ic{width:18px; height:18px; display:inline-flex;}

/* ---- avatars ---- */
.avatar{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; flex-shrink:0; font-family:var(--font-ui); letter-spacing:0;
}
.av-a{background:var(--blue-dim); color:var(--blue); border:1px solid rgba(53,96,143,0.18);}
.av-b{background:var(--pink-dim); color:var(--pink); border:1px solid rgba(176,86,47,0.18);}

/* ---- progress track ---- */
.track{height:8px; background:var(--surface-3); border-radius:99px; overflow:hidden;}
.track > div{height:100%; border-radius:99px; background:var(--mint); transition:width 1s var(--spring);}

/* ---- chips ---- */
.chip{
  display:inline-flex; align-items:center; padding:9px 15px; border-radius:99px;
  border:1px solid var(--line-2); background:var(--surface);
  font-size:13.5px; font-weight:500; cursor:pointer; margin:0 7px 9px 0; color:var(--ink-2);
  transition:all .15s;
}
.chip:hover{border-color:var(--ink-3);}
.chip.on{background:var(--mint); color:var(--mint-ink); border-color:var(--mint); font-weight:600;}

/* ---- bottom nav ---- */
.nav{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:452px;
  background:rgba(246,241,230,0.86); backdrop-filter:blur(26px) saturate(1.4); -webkit-backdrop-filter:blur(26px) saturate(1.4);
  border-top:1px solid var(--line); display:flex; z-index:10;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
}
.nav-indicator{
  position:absolute; top:8px; height:48px; border-radius:15px; background:var(--mint-dim);
  opacity:0; z-index:0; transition:left .42s var(--spring), width .42s var(--spring), opacity .3s;
}
.nav button{
  position:relative; z-index:1; flex:1; padding:6px 0;
  border:none; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-family:inherit; color:var(--ink-3); transition:color .22s;
}
.nav button.on{color:var(--mint-deep);}
.nav .ni{display:inline-flex; transition:transform .32s var(--spring);}
.nav .ni svg{width:23px; height:23px;}
.nav button.on .ni{transform:translateY(-1px) scale(1.1);}
.nav .nl{font-size:10.5px; font-weight:600; letter-spacing:0.02em;}
.nav button:active .ni{transform:scale(0.9);}
@media (min-width:960px){
  .nav{
    bottom:24px; max-width:none; width:auto; border:1px solid var(--line);
    border-radius:99px; padding:6px; box-shadow:var(--shadow-lg); background:rgba(246,241,230,0.92);
  }
  .nav-indicator{top:6px; height:calc(100% - 12px); border-radius:99px;}
  .nav button{flex-direction:row; gap:9px; padding:11px 26px; border-radius:99px;}
  .nav .nl{font-size:13px;}
  .nav button.on .ni{transform:scale(1.05);}
}

/* ---- confetti (celebration) ---- */
.confetti-layer{position:fixed; inset:0; pointer-events:none; z-index:40; overflow:hidden;}
.confetti-layer i{position:absolute; top:-20px; border-radius:2px; opacity:0;
  animation-name:confetti; animation-timing-function:cubic-bezier(.35,.55,.4,1); animation-fill-mode:forwards;}
@keyframes confetti{
  0%{opacity:0; transform:translateY(-10px) rotate(0);}
  10%{opacity:1;}
  100%{opacity:0; transform:translateY(104vh) translateX(var(--drift)) rotate(var(--spin));}
}

/* ---- fab ---- */
.fab{
  position:fixed; bottom:90px; right:calc(50% - 226px + 22px);
  width:58px; height:58px; border-radius:18px;
  background:var(--mint); color:var(--mint-ink);
  border:none; cursor:pointer; z-index:11;
  box-shadow:var(--shadow-accent), var(--shadow-md);
  display:flex; align-items:center; justify-content:center; transition:transform .16s var(--spring), background .16s;
}
.fab:hover{transform:scale(1.04); background:var(--mint-deep);}
.fab:active{transform:scale(0.93);}
.fab svg{width:25px; height:25px;}
@media (max-width:452px){ .fab{right:22px;} }
@media (min-width:960px){ .fab{right:calc(50% - 540px + 40px); bottom:112px;} }

/* ---- banners ---- */
.banner{
  border-radius:var(--r-md); padding:14px 16px; font-size:13.5px; line-height:1.55;
  margin-bottom:14px; display:flex; gap:11px; animation:fadein .5s; border:1px solid transparent;
}
.banner .bi{flex-shrink:0; width:18px; margin-top:1px;}
.banner.mint{background:var(--mint-dim); color:var(--mint-deep); border-color:var(--mint-line);}
.banner.amber{background:var(--amber-dim); color:var(--amber); border-color:rgba(169,120,31,0.2);}
.banner.red{background:var(--red-dim); color:var(--red); border-color:rgba(176,67,58,0.2);}
.banner.blue{background:var(--blue-dim); color:var(--blue); border-color:rgba(53,96,143,0.2);}

/* ---- stat / kpi tiles ---- */
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:15px 16px; transition:border-color .2s, box-shadow .2s; box-shadow:var(--shadow-sm);
}
.stat:hover{border-color:var(--line-2);}
.stat .lab{font-size:11.5px; color:var(--ink-2); margin-bottom:6px; letter-spacing:0.01em; font-weight:500;}
.stat .val{font-family:var(--font-ui); font-size:19px; font-weight:600; letter-spacing:-0.02em; font-variant-numeric:tabular-nums;}
.stat .sub{font-size:11px; color:var(--ink-3); margin-top:4px;}
.delta{font-size:11px; font-weight:700; padding:2.5px 7px; border-radius:99px; font-variant-numeric:tabular-nums;}
.delta.down{background:var(--mint-dim); color:var(--mint-deep);}
.delta.up{background:var(--red-dim); color:var(--red);}

/* ---- list rows ---- */
.listrow{display:flex; gap:13px; align-items:center; padding:13px 0; border-bottom:1px solid var(--line); animation:fadein .4s;}
.listrow:last-child{border-bottom:none; padding-bottom:2px;}
.listrow:first-child{padding-top:2px;}
.amount{font-family:var(--font-ui); font-weight:600; font-size:15px; white-space:nowrap; font-variant-numeric:tabular-nums; letter-spacing:-0.01em;}

/* ---- modal sheet ---- */
.modal-bg{
  position:fixed; inset:0; background:rgba(28,25,19,0.32);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  z-index:20; display:flex; align-items:flex-end; justify-content:center; animation:fadein .2s;
}
.modal{
  background:var(--surface); border:1px solid var(--line); border-bottom:none;
  border-radius:26px 26px 0 0; width:100%; max-width:452px;
  padding:14px 22px calc(28px + env(safe-area-inset-bottom));
  max-height:90vh; overflow-y:auto; animation:slideup .4s var(--spring); box-shadow:var(--shadow-lg);
}
@media (min-width:960px){
  .modal-bg{align-items:center;}
  .modal{border-radius:26px; border-bottom:1px solid var(--line); max-width:480px;}
}
@keyframes slideup{from{transform:translateY(50%); opacity:0.5;} to{transform:none; opacity:1;}}
.grabber{width:38px; height:4px; border-radius:99px; background:var(--line-2); margin:0 auto 18px;}

/* ---- segmented control ---- */
.seg{display:flex; background:var(--surface-3); border-radius:var(--r-md); padding:4px;}
.seg button{
  flex:1; padding:11px; border:none; border-radius:9px; background:none;
  font-size:14px; font-weight:600; color:var(--ink-2); cursor:pointer; font-family:inherit; transition:all .15s;
}
.seg button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm);}

/* ---- budget cockpit hero ---- */
.hero-panel{
  position:relative; overflow:hidden; border-radius:24px; padding:20px 20px 20px;
  margin-bottom:14px; color:#fff;
  background:#3a2d1e;
  box-shadow:var(--shadow-lg);
  animation:heroin .6s var(--spring);
}
@keyframes heroin{from{opacity:0; transform:translateY(14px) scale(.98);} to{opacity:1; transform:none;}}
/* a single, static soft highlight for depth — no floating glow */
.hero-panel .glow-orb{
  position:absolute; inset:0 0 auto 0; height:60%; pointer-events:none;
  background:radial-gradient(120% 90% at 70% -10%, rgba(255,255,255,0.10), transparent 60%);
}
.hero-top{display:flex; justify-content:space-between; align-items:center; position:relative; z-index:1;}
.mark-white .duo-mark{width:40px; height:30px;}
.mark-white .duo-ring{stroke:#fff !important;}
.hero-av{border:2px solid rgba(255,255,255,0.55) !important;}
.hero-ring-wrap{position:relative; width:230px; height:230px; margin:8px auto 4px;}
.hero-ring-wrap svg{transform:rotate(-90deg); display:block;}
.hero-ring-wrap .ring-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.hero-bottom{display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; z-index:1; margin-top:4px;}
.hero-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.24);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:9px 15px; border-radius:99px; color:#fff; font-size:13px; font-weight:600;
}
.hero-seg{position:relative; display:inline-flex; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.18); border-radius:99px; padding:3px;}
.hero-seg-ind{position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); background:#f3ece0; border-radius:99px; box-shadow:0 2px 8px rgba(0,0,0,0.22); transition:transform .42s var(--spring); z-index:0;}
.hero-seg[data-scope="month"] .hero-seg-ind{transform:translateX(100%);}
.hero-seg button{position:relative; z-index:1; border:none; background:none; color:rgba(255,255,255,0.72); font-weight:700; font-size:13px; padding:8px 18px; border-radius:99px; cursor:pointer; font-family:inherit; transition:color .28s;}
.hero-seg button.on{color:var(--mint-deep);}
/* directional slide for the morphing hero number */
@keyframes sinR{from{opacity:0; transform:translateX(15px);} to{opacity:1; transform:none;}}
@keyframes sinL{from{opacity:0; transform:translateX(-15px);} to{opacity:1; transform:none;}}
.slide-in-r{animation:sinR .45s var(--spring);}
.slide-in-l{animation:sinL .45s var(--spring);}
.hero-delta{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:5px 12px; border-radius:99px;}
.hero-delta.down{background:rgba(255,255,255,0.16); color:#c9f7e2;}
.hero-delta.up{background:rgba(255,255,255,0.16); color:#fde9a8;}

/* ---- hero ring ---- */
.ring-wrap{position:relative; width:244px; height:244px; margin:0 auto;}
.ring-wrap svg{transform:rotate(-90deg); display:block;}
.ring-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
circle.arc{transition:stroke-dashoffset 1.2s var(--spring);}

/* ---- donut entrance ---- */
.donut-in{animation:spinin .75s var(--spring);}

/* ---- area chart draw ---- */
.area-line{stroke-dasharray:900; stroke-dashoffset:900; animation:draw 1.6s var(--spring) .15s forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.area-fill{opacity:0; animation:fadein 1s ease .55s forwards;}

/* ---- weekday bars ---- */
.daybars{display:flex; align-items:flex-end; gap:9px; height:96px;}
.daybars .db{flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; height:100%; justify-content:flex-end; cursor:pointer;}
.daybars .db .bar{width:100%; max-width:30px; border-radius:99px; background:var(--surface-3); transition:height .85s var(--spring), background .2s, transform .16s var(--spring); min-height:4px;}
.daybars .db:hover .bar{background:var(--line-2);}
.daybars .db:active .bar{transform:scaleY(0.94);}
.daybars .db.today .bar{background:var(--mint);}
.daybars .db.sel .bar{background:var(--mint-deep); box-shadow:0 3px 10px rgba(138,78,56,0.28);}
.daybars .db .dl{font-size:10.5px; color:var(--ink-3); font-weight:600; transition:color .2s;}
.daybars .db.today .dl{color:var(--mint); font-weight:700;}
.daybars .db.sel .dl{color:var(--mint-deep); font-weight:700;}

/* getting-started steps */
.gs-step{display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line);}
.gs-step:last-of-type{border-bottom:none;}
.gs-n{width:26px; height:26px; border-radius:50%; background:var(--mint-dim); color:var(--mint-deep); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; font-family:var(--font-display);}
.gs-t{font-weight:600; font-size:14px; margin-bottom:2px;}

/* month category ribbon */
.ribbon{display:flex; height:14px; border-radius:99px; overflow:hidden; background:var(--surface-3);}
.ribbon-seg{height:100%; cursor:pointer; transition:width .9s var(--spring), filter .15s, opacity .15s;}
.ribbon-seg:hover{filter:brightness(1.06) saturate(1.05);}
.ribbon-legend{display:flex; flex-wrap:wrap; gap:12px 16px; margin-top:14px;}
.ribbon-key{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-2);}

/* ---- toast (dark pill on light UI) ---- */
.toast{
  position:fixed; bottom:calc(92px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
  background:#221f19; border-radius:99px;
  padding:13px 18px; display:flex; align-items:center; gap:16px; z-index:30;
  box-shadow:var(--shadow-lg); animation:rise .3s var(--spring);
  font-size:13.5px; color:#f3f0e9; white-space:nowrap; max-width:calc(100vw - 40px);
}
.toast button{
  border:none; background:none; color:#6fdcaa; font-weight:700; font-size:13.5px;
  cursor:pointer; font-family:inherit; padding:4px 2px;
}
.toast.leaving{opacity:0; transition:opacity .3s;}

/* ---- stepper (household) ---- */
.stepper{display:flex; align-items:center; justify-content:space-between; background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-md); padding:4px;}
.stepper button{width:38px; height:38px; border:none; background:var(--surface); border-radius:10px; font-size:20px; font-weight:600; color:var(--ink); cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .12s;}
.stepper button:active{transform:scale(0.92);}
.stepper .num{font-size:19px; font-weight:600;}

/* ---- reframe card ---- */
.reframe-card{background:var(--surface); border-color:var(--mint-line);}
.reframe-row{display:flex; justify-content:space-between; align-items:flex-start; gap:16px;}

/* ---- reactions + notes ---- */
.react-block{margin-top:16px; background:var(--surface-2); border-radius:var(--r-md); padding:10px 12px; display:flex; flex-direction:column; gap:8px;}
.react-row{display:flex; align-items:center; gap:10px;}
.react-strip{display:flex; gap:4px; flex:1; flex-wrap:wrap;}
.react{border:none; background:transparent; border-radius:10px; padding:6px 8px; cursor:pointer; color:var(--ink-3); transition:transform .14s var(--spring), color .14s, background .14s;}
.react svg{display:block;}
.react:hover{color:var(--ink); transform:scale(1.1);}
.react.on{color:var(--mint); background:var(--surface); box-shadow:var(--shadow-sm);}
.rx-badge{display:inline-flex; gap:3px; align-items:center; background:var(--surface-2); border-radius:99px; padding:4px 7px;}

/* ---- scan review ---- */
.scan-list{margin-top:10px; border-top:1px solid var(--line); padding-top:4px;}
.scan-item{
  display:flex; gap:9px; align-items:center; padding:6px 0;
  opacity:0; animation:scanin .4s var(--spring) forwards;
}
@keyframes scanin{from{opacity:0; transform:translateX(-6px);} to{opacity:1; transform:none;}}
.scan-item .cat-name{flex:1; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.scan-recon{display:flex; justify-content:space-between; align-items:center; padding:6px 0 0; font-size:13px;}
.scan-recon .num{font-weight:600;}

/* ---- entrance helpers ---- */
.stagger > *{opacity:0; animation:rise .5s var(--spring) forwards;}
.stagger > *:nth-child(1){animation-delay:.02s}
.stagger > *:nth-child(2){animation-delay:.08s}
.stagger > *:nth-child(3){animation-delay:.14s}
.stagger > *:nth-child(4){animation-delay:.20s}
.stagger > *:nth-child(5){animation-delay:.26s}
.stagger > *:nth-child(6){animation-delay:.32s}
.press{transition:transform .12s var(--spring);}
.press:active{transform:scale(0.985);}

/* ---- negotiation number line (the "meeting in the middle" reveal) ---- */
.numline{position:relative; height:78px; margin:6px 8px 4px;}
.nl-track{position:absolute; top:52px; left:0; right:0; height:4px; border-radius:2px; background:var(--surface-3);}
.nl-band{position:absolute; top:52px; height:4px; border-radius:2px; background:var(--mint-line);
  transition:left .6s var(--spring), width .6s var(--spring);}
.nl-dot{position:absolute; top:46px; width:16px; height:16px; border-radius:50%; margin-left:-8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.18); z-index:2; transition:left .75s var(--spring);}
.nl-dot.a{background:var(--blue);} .nl-dot.b{background:var(--pink);}
.nl-lab{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-size:12px; font-weight:600; font-variant-numeric:tabular-nums;}
.nl-dot.b .nl-lab{bottom:auto; top:22px;}
.nl-mid{position:absolute; top:40px; width:28px; height:28px; border-radius:50%; margin-left:-14px;
  background:var(--grad-brand); border:3px solid var(--surface); box-shadow:var(--shadow-accent);
  z-index:3; opacity:0; transform:scale(0); transition:left .75s var(--spring);}
.nl-mid.show{opacity:1; transform:scale(1);
  transition:left .75s var(--spring), opacity .45s var(--spring), transform .55s var(--spring);}

/* ---- AI digest card ---- */
.ai-card{background:var(--surface); border-color:var(--mint-line);}
.tips{display:flex; flex-direction:column; gap:9px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
.tip{display:flex; align-items:flex-start; gap:11px; opacity:0; animation:rise .5s var(--spring) both;}
.tip-ic{flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; margin-top:1px;}
.tip-ic svg{width:17px; height:17px;}
.tip-body{display:flex; flex-direction:column; gap:2px; min-width:0;}
.tip-tag{font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.04em; text-transform:uppercase;}
.tip-text{font-size:14px; line-height:1.5; color:var(--ink);}

/* ---- product rows (intelligence) ---- */
.prod-row{display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line); cursor:pointer;}
.prod-row:last-child{border-bottom:none;}
.prod-name{font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.prod-count{color:var(--ink-3); font-weight:500; font-size:12px;}
.prod-sub{font-size:12px; color:var(--ink-3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.prod-chev{color:var(--ink-3); font-size:18px; flex-shrink:0;}

/* ---- empty states ---- */
.empty{text-align:center; padding:26px 14px 20px;}
.empty .ei{width:46px; height:46px; margin:0 auto 12px; color:var(--mint); opacity:0.85;
  display:flex; align-items:center; justify-content:center; background:var(--mint-dim); border-radius:16px;}
.empty .ei svg{width:24px; height:24px;}
.empty h3{font-size:15px; font-weight:600; color:var(--ink); margin-bottom:5px;}
.empty p{font-size:13px; color:var(--ink-3); line-height:1.5; max-width:280px; margin:0 auto;}

/* ---- privacy pill (blind pick / private answer) ---- */
.privacy-pill{
  display:inline-flex; align-items:center; gap:7px; margin:0 auto;
  background:var(--amber-dim); border:1px solid rgba(169,120,31,0.22); color:var(--amber);
  border-radius:99px; padding:8px 15px; font-size:12.5px; font-weight:600;
}
.privacy-pill .ic{width:15px; height:15px; display:inline-flex;}

/* ---- handoff (pass the phone) ---- */
.handoff-mark{
  width:76px; height:76px; border-radius:24px; margin:0 auto 4px;
  background:var(--grad-brand); display:flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:var(--shadow-accent), inset 0 1px 0 rgba(255,255,255,0.3);
  animation:pop .5s var(--spring);
}
.handoff-mark .ic-lock{width:34px; height:34px; display:inline-flex;}
.handoff-next{
  display:inline-flex; align-items:center; gap:14px; margin:0 auto 26px;
  background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:12px 20px;
  box-shadow:var(--shadow-sm); animation:rise .5s var(--spring) .1s both;
}
.handoff-arrow{width:20px; height:20px; display:inline-flex; color:var(--ink-3); animation:nudge 1.4s ease-in-out infinite;}
@keyframes nudge{0%,100%{transform:translateX(0);} 50%{transform:translateX(4px);}}

/* ---- feeling scale (month-review reveal) ---- */
.feelscale{position:relative; height:74px; margin:4px 4px 0;}
.fs-zones{display:flex; gap:5px; height:12px; margin-top:44px;}
.fs-zone{flex:1; border-radius:6px;}
.fs-labels{display:flex; justify-content:space-between; margin-top:9px; font-size:11px; color:var(--ink-3); font-weight:600;}
.fs-labels span{flex:1; text-align:center;}
.fs-dot{position:absolute; top:38px; width:18px; height:18px; border-radius:50%; margin-left:-9px;
  border:3px solid var(--surface); box-shadow:0 2px 8px rgba(0,0,0,0.18); z-index:2;
  transition:left .8s var(--spring);}
.fs-dot.a{background:var(--blue);} .fs-dot.b{background:var(--pink);}
.fs-lab{position:absolute; bottom:24px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:12px; font-weight:600;}
.fs-dot.b .fs-lab{bottom:auto; top:24px;}

/* ---- onboarding hero ---- */
.onboard-hero{
  position:relative; overflow:hidden; border-radius:26px; padding:34px 22px 26px;
  text-align:center; color:#fff; margin-bottom:16px;
  background:#3a2d1e;
  box-shadow:0 22px 48px rgba(6,60,44,0.42), inset 0 1px 0 rgba(255,255,255,0.16);
  animation:heroin .6s var(--spring);
}
.onboard-hero .glow-orb{
  position:absolute; width:300px; height:300px; border-radius:50%; top:-150px; left:50%; margin-left:-150px;
  background:radial-gradient(circle, rgba(120,255,205,0.5), transparent 70%);
  filter:blur(26px); pointer-events:none; animation:floaty 7s ease-in-out infinite alternate;
}
.onboard-hero > *{position:relative; z-index:1;}
.onboard-hero .duo-mark{width:84px; height:63px;}
.onboard-hero .duo-ring{stroke:#fff !important;}
.vprops{display:flex; justify-content:center; gap:8px; margin-top:22px; flex-wrap:wrap;}
.vprop{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.22);
  border-radius:99px; padding:8px 13px; font-size:12.5px; font-weight:600; color:#fff;
  opacity:0; animation:rise .5s var(--spring) forwards;
}
.vprop:nth-child(1){animation-delay:.15s} .vprop:nth-child(2){animation-delay:.28s} .vprop:nth-child(3){animation-delay:.41s}
.vprop svg{width:15px; height:15px;}

/* ---- staged onboarding ---- */
.onb{max-width:520px; margin:0 auto;}
.onb-welcome{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:80vh; text-align:center;}
.onb-hero-mark{margin-bottom:18px;}
.onb-mark{width:180px; height:90px; overflow:visible;}
.onb-ring{transform-box:fill-box; transform-origin:center;}
.onb-l{animation:onbDriftL 1.15s var(--spring) both, duoBreatheL 5.4s ease-in-out 1.3s infinite;}
.onb-r{animation:onbDriftR 1.15s var(--spring) both, duoBreatheR 5.4s ease-in-out 1.45s infinite;}
@keyframes onbDriftL{0%{transform:translateX(-42px); opacity:0;} 55%{opacity:1;} 100%{transform:none; opacity:1;}}
@keyframes onbDriftR{0%{transform:translateX(42px); opacity:0;} 55%{opacity:1;} 100%{transform:none; opacity:0.9;}}
.onb-fade{opacity:0; animation:onbUp .6s var(--spring) both;}
@keyframes onbUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.onb-steps{display:flex; gap:6px; justify-content:center; margin-bottom:20px;}
.onb-steps span{width:26px; height:4px; border-radius:2px; background:var(--line-2); transition:background .3s;}
.onb-steps span.on{background:var(--mint);}
.onb-preview{display:flex; justify-content:center; margin-bottom:18px; animation:onbUp .5s var(--spring);}
.onb-preview svg{width:184px; height:92px;}

/* ---- brand logo ---- */
.logo-mark{
  width:96px; height:72px; display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px; filter:drop-shadow(0 8px 20px rgba(16,185,129,0.28));
  animation:spinin .8s var(--spring);
}
.logo-mark .duo-mark{width:96px; height:72px;}
/* icon-in-tile fallback used by flow screens that pass a plain icon */
.logo-tile{
  width:64px; height:64px; border-radius:20px; background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
  box-shadow:var(--shadow-accent), inset 0 1px 0 rgba(255,255,255,0.3);
  color:var(--mint-ink); animation:spinin .7s var(--spring);
}
.logo-tile svg{width:32px; height:32px;}

/* animated brand mark: the two rings draw in, then breathe — gently
   drifting apart and back together, like two people in step */
.duo-ring{stroke-linecap:round; stroke-dasharray:95; stroke-dashoffset:95; transform-box:fill-box; transform-origin:center;}
.duo-ring-a{animation:ringdraw 1.1s var(--spring) forwards, duoBreatheL 5.4s ease-in-out 1.25s infinite;}
.duo-ring-b{animation:ringdraw 1.1s var(--spring) .18s forwards, duoBreatheR 5.4s ease-in-out 1.4s infinite;}
@keyframes ringdraw{to{stroke-dashoffset:0;}}
@keyframes duoBreatheL{0%,100%{transform:translateX(0)} 50%{transform:translateX(-1.5px)}}
@keyframes duoBreatheR{0%,100%{transform:translateX(0)} 50%{transform:translateX(1.5px)}}
/* small inline brand lockup (headers) */
.brand-lockup{display:flex; align-items:center; gap:10px;}
.brand-lockup .duo-mark{width:42px; height:31px;}
.brand-lockup .wm{font-family:var(--font-display); font-size:20px; font-weight:600; letter-spacing:-0.02em;}