/* Benewise journey prototype — screen styles.
   Inherits every colour and face from assets/v12/tokens.css. Nothing here
   introduces a new colour; each rule references a storyboard colour role. */

.proto-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.proto-side { flex: 1; min-width: 300px; }

/* ---- the device -------------------------------------------------------- */
#proto { flex-shrink: 0; position: sticky; top: 90px; }
.phone {
  width: 320px;
  height: 660px;
  box-sizing: border-box;
  border: 2.5px solid #d5cfeb;
  border-radius: 40px;
  background: var(--s-bg);
  color: var(--s-on-bg-2);
  box-shadow: var(--shadow-phone);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone.big { font-size: 1.06em; }
.phone .watermark {
  position: absolute; top: 54px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 800; font-size: 340px; line-height: 1;
  color: var(--s-watermark, rgba(255,255,255,.045)); pointer-events: none; user-select: none; display: none;
}
.phone.wm .watermark { display: block; }

.phone-chrome { flex-shrink: 0; position: relative; z-index: 2; }
.phone-body { flex: 1; overflow-y: auto; position: relative; z-index: 2; scrollbar-width: thin; }
.phone-body::-webkit-scrollbar { width: 4px; }
.phone-body::-webkit-scrollbar-thumb { background: rgba(107,94,203,.3); border-radius: 4px; }
.phone-tabs { flex-shrink: 0; position: relative; z-index: 3; }

.sb { display: flex; align-items: center; justify-content: space-between; margin: 12px 18px 2px; color: var(--s-on-bg); fill: currentColor; }
.sb.light { color: var(--color-type); }
.sb .t { font-size: 11px; font-weight: 700; width: 56px; font-family: var(--font-display); }
.sb .notch { width: 76px; height: 18px; border-radius: 10px; background: var(--s-inset); }
.sb.light .notch { background: rgba(46,31,77,.08); }
.sb .ic-r { display: flex; gap: 4px; align-items: center; width: 56px; justify-content: flex-end; }
.sb svg rect { fill: currentColor; }
.sb svg rect[fill="none"] { fill: none; }

/* ---- in-phone chrome --------------------------------------------------- */
.tb {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 10px; border-bottom: 1px solid var(--color-line);
  background: transparent; position: sticky; top: 0; z-index: 4;
  backdrop-filter: blur(8px);
}
.tb-t { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--color-type); text-align: center; flex: 1; }
.tb-sp { width: 62px; flex-shrink: 0; }
.tb-back {
  display: inline-flex; align-items: center; gap: 2px; width: 62px; flex-shrink: 0;
  background: none; border: 0; cursor: pointer; padding: 4px 0;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 700; color: var(--color-action);
}
.tb-back:hover { color: var(--color-action-deep); }

.tabs { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; border-top: 1px solid var(--color-line); background: #fff; padding-top: 4px; overflow: visible; }
.phone .tabs { background: var(--s-chrome); border-top-color: var(--s-hairline); }
.tab {
  background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 2px 9px; min-height: 52px;
  font-family: var(--font-display); font-size: 9px; font-weight: 700;
  color: var(--color-muted); letter-spacing: .01em;
}
.phone .tab { color: var(--s-on-bg-3); }
.tab.on { color: var(--color-action); }
.phone .tab.on { color: var(--s-accent); }
.tab:hover { color: var(--color-action-deep); }
.tab.home {
  width: 58px; min-height: 58px; justify-self: center; margin-top: -17px; padding: 8px 3px 7px;
  border-radius: 19px; background: linear-gradient(155deg, var(--color-action), var(--color-action-deep));
  color: #fff; box-shadow: 0 9px 22px rgba(107,94,203,.42); border: 3px solid #fff;
}
.phone .tab.home { color: #fff; border-color: var(--color-ink-deep); }
.tab.home.on, .phone .tab.home.on { color: #fff; transform: translateY(-2px); }
.tab.home:hover { color: #fff; background: var(--color-action-deep); }
.tab:focus-visible, .btn:focus-visible, .linkbtn:focus-visible, .family-review:focus-visible,
.checkup-row:focus-visible, .peer-card button:focus-visible { outline: 3px solid #b3a8e6; outline-offset: 2px; }

/* ---- content ----------------------------------------------------------- */
.pad { padding: 16px 16px 22px; }
.pad.big { font-size: 1.04em; }
.phone h1, .phone h2, .phone h3, .phone p { margin: 0; }
.h1 { font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1.25; color: var(--color-type); margin-bottom: 6px; }
.lead { font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1.45; color: var(--color-type); }
.p { font-size: 12.5px; line-height: 1.6; color: var(--color-body); margin-top: 4px; }
.p.sm { font-size: 11.5px; color: var(--color-muted); }
.fine { font-size: 10.5px; line-height: 1.55; color: var(--color-muted); margin-top: 8px; }
.eyebrow {
  font-family: var(--font-display); font-size: 9.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-action-deep);
  margin: 0 0 6px;
}
.eyebrow.caution { color: var(--color-caution); }
.eyebrow.provenance { color: var(--color-provenance); }
.mt { margin-top: 18px; }
.mt-s { margin-top: 9px; }
.spacer { flex: 1; min-height: 22px; }
.stack { display: flex; flex-direction: column; gap: 7px; }

.card { background: #fff; border-radius: 14px; padding: 13px; box-shadow: 0 3px 14px rgba(46,31,77,.07); }
.card.best { border: 2px solid var(--color-provenance); }
.card.next { background: var(--color-surface); box-shadow: none; }
.card.useit { background: linear-gradient(150deg, var(--color-action) 0%, var(--color-action-deep) 100%); color: #fff; box-shadow: var(--glow-action); }
.card.useit .eyebrow, .card.useit .lead { color: #fff; }
/* v14: .p was never included, so body copy on the purple hero card rendered
   dark ink on action purple - the one place in the app where a real member
   would have squinted at the sentence carrying the deadline. */
.card.useit .p, .card.useit .fine, .card.useit small, .card.useit .deadline { color: rgba(255,255,255,.96); }
.card.useit .deadline { color: #ffd9d0; font-weight: 700; }
.card.useit .badge { background: rgba(255,255,255,.18); color: #fff; }
.card.useit .btn { background: #fff; color: var(--s-action-solid); box-shadow: none; }
.card.balance .big { font-family: var(--font-display); font-weight: 800; font-size: 34px; color: var(--color-type); line-height: 1; margin-bottom: 6px; }

.note { background: var(--color-caution-page); border-radius: 11px; padding: 11px 12px; font-size: 11.5px; line-height: 1.6; color: var(--color-caution-ink); }
.note .eyebrow { margin-bottom: 3px; }
.okbox { background: var(--color-provenance-soft); border-radius: 11px; padding: 11px 12px; font-size: 11.5px; line-height: 1.6; color: #1f4a1f; margin-top: 10px; }
.okbox .eyebrow { margin-bottom: 3px; }
.emergency { border-left: 3px solid var(--color-emergency); background: var(--color-emergency-soft); border-radius: 0 11px 11px 0; padding: 10px 12px; margin-top: 12px; font-size: 11.5px; line-height: 1.55; color: #6b2418; }
.emergency .eyebrow { color: var(--color-emergency); margin-bottom: 2px; }
.verified { background: var(--color-provenance-soft); border-radius: 12px; padding: 12px; }
.verified .p { color: #1f4a1f; }

.src {
  font-size: 10.5px; line-height: 1.5; font-weight: 500; margin-top: 10px;
  padding: 7px 10px; border-radius: 9px;
  color: var(--color-provenance); background: var(--color-provenance-soft);
}
.src.caution { color: var(--color-caution); background: var(--color-caution-soft); }

.badge {
  display: inline-block; font-family: var(--font-display); font-size: 9px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; padding: 4px 8px; border-radius: 8px; line-height: 1.4;
}
.badge.provenance { background: var(--color-provenance-soft); color: var(--color-provenance); }
.badge.caution { background: var(--color-caution-soft); color: var(--color-caution); }
.badge.soft { background: var(--color-lavender); color: var(--color-action-deep); }
.badge.emergency { background: var(--color-emergency-soft); color: #8a3324; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-action); color: #fff; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  padding: 12px 16px; min-height: 46px; border-radius: 13px;
  box-shadow: var(--glow-action); text-align: center; line-height: 1.3;
}
.btn:hover { background: var(--color-action-deep); }
.btn.block { display: flex; width: 100%; }
.btn.quiet { background: #fff; color: var(--color-action-deep); border: 1.5px solid var(--color-line); box-shadow: none; }
.btn.quiet:hover { background: var(--color-surface); }
.btnrow { display: flex; gap: 7px; margin-top: 10px; }
.btnrow .btn { flex: 1; font-size: 12px; padding: 10px 8px; min-height: 42px; }
.linkbtn {
  background: none; border: 0; cursor: pointer; padding: 8px 0;
  font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--color-action-deep);
}
.linkbtn:hover { color: var(--color-action-deep); text-decoration: underline; }
.linkbtn.block { display: block; width: 100%; text-align: center; }
.linkbtn.inline { padding: 0; font-size: 11.5px; }

.listrow {
  display: flex; align-items: center; gap: 9px; justify-content: space-between;
  background: #fff; border-radius: 11px; padding: 10px 12px; font-size: 12px; color: var(--color-body);
}
.listrow.tight { background: none; padding: 7px 0; border-bottom: 1px solid var(--color-line); border-radius: 0; }
.listrow .v { font-family: var(--font-data); font-weight: 600; color: var(--color-type); white-space: nowrap; }
.listrow .lr-b { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.lr-n { font-weight: 700; font-family: var(--font-display); font-size: 12.5px; color: var(--color-type); }
.lr-s { font-size: 10.5px; color: var(--color-muted); }
.listrow.rank .rk {
  width: 19px; height: 19px; border-radius: 50%; background: var(--color-lavender);
  color: var(--color-action-deep); font-family: var(--font-display); font-weight: 800; font-size: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.price { font-family: var(--font-data); font-weight: 600; font-size: 14px; color: var(--color-type); }
.price.good { color: var(--color-provenance); }
.price.muted { color: var(--color-muted); }
.pricerow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 6px; font-size: 12px; }

.bar { height: 7px; border-radius: 5px; background: var(--color-line); overflow: hidden; margin: 9px 0 4px; }
.bar span { display: block; height: 100%; background: var(--color-action); border-radius: 5px; }

.rail { display: flex; gap: 3px; margin: 9px 0 7px; }
.rail span {
  flex: 1; font-family: var(--font-display); font-size: 8px; font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase; text-align: center;
  padding: 5px 2px; border-radius: 6px; background: var(--color-surface); color: var(--color-faint);
}
.rail span.on { background: var(--color-action); color: #fff; }
.rail span.done { background: var(--color-lavender); color: var(--color-action-deep); }

.letter {
  background: var(--color-surface); border-left: 3px solid var(--color-action);
  border-radius: 0 11px 11px 0; padding: 12px; font-size: 11.5px; line-height: 1.65;
  color: var(--color-body); font-style: italic;
}

.searchbox {
  background: #fff; border: 1.5px solid var(--color-line); border-radius: 12px;
  padding: 11px 13px; font-size: 12px; color: var(--color-muted); margin-top: 10px;
}
.searchbox.filled { color: var(--color-type); font-weight: 600; }
.filters { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.chip-sm {
  background: #fff; border: 1px solid var(--color-line); border-radius: 999px;
  padding: 6px 11px; font-family: var(--font-display); font-size: 10.5px; font-weight: 700;
  color: var(--color-body); cursor: pointer;
}
.chip-sm:hover { border-color: var(--color-action); color: var(--color-action-deep); }
.seg { display: flex; gap: 5px; margin-top: 12px; background: var(--color-surface); padding: 4px; border-radius: 12px; }
.seg-b {
  flex: 1; background: none; border: 0; cursor: pointer; border-radius: 9px; padding: 9px 4px;
  font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--color-muted);
}
.seg-b.on { background: #fff; color: var(--color-ink); box-shadow: 0 2px 6px rgba(46,31,77,.1); }

.chipgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.chip-lg {
  background: #fff; border: 1.5px solid var(--color-line); border-radius: 13px;
  padding: 15px 10px; cursor: pointer;
  font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--color-ink);
}
.chip-lg:hover { border-color: var(--color-action); }
.chip-lg.on { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }
.resolved { background: var(--color-surface); border-radius: 13px; padding: 13px; margin-top: 14px; }
.resolved-plan { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--color-type); }

.checkrow {
  display: flex; align-items: center; gap: 9px; background: #fff;
  border-radius: 11px; padding: 11px 12px; font-size: 12.5px; cursor: pointer;
}
.checkrow input { width: 17px; height: 17px; accent-color: var(--color-action); flex-shrink: 0; }
.cr-name { font-family: var(--font-display); font-weight: 700; color: var(--color-type); }
.cr-rel { font-size: 11px; color: var(--color-muted); }

.watchrow {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left;
  background: #fff; border: 1.5px solid var(--color-line); border-radius: 13px;
  padding: 12px 13px; cursor: pointer; width: 100%;
}
.watchrow.on { border-color: var(--color-action); background: var(--color-surface); }
.wr-t { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--color-type); }
.wr-s { font-size: 11px; color: var(--color-muted); grid-column: 1; }
.wr-x {
  grid-row: 1 / span 2; align-self: center;
  font-family: var(--font-display); font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 8px;
  background: var(--color-line); color: var(--color-muted);
}
.watchrow.on .wr-x { background: var(--color-action); color: #fff; }

.toolrow {
  display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%;
  background: #fff; border: 0; border-radius: 13px; padding: 13px; cursor: pointer;
  box-shadow: 0 3px 14px rgba(46,31,77,.07);
}
.toolrow:hover { box-shadow: 0 6px 20px rgba(46,31,77,.13); }
.tr-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tr-t { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--color-type); }
.tr-n { font-family: var(--font-data); font-size: 10px; color: var(--color-faint); }
.tr-s { font-size: 11.5px; color: var(--color-muted); line-height: 1.5; }
.toolrow .badge { align-self: flex-start; margin: 3px 0 1px; }

.advocard { display: flex; align-items: center; gap: 11px; background: var(--color-surface); border-radius: 13px; padding: 12px; margin-top: 14px; }
.adv-n { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--color-type); }
.adv-s { font-size: 11px; color: var(--color-muted); line-height: 1.5; margin-top: 2px; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--color-lavender);
  color: var(--color-action-deep); font-family: var(--font-display); font-weight: 800; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.avatar.big { width: 38px; height: 38px; font-size: 15px; background: var(--color-ink); color: #fff; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.phone .avatar { background: var(--s-inset); color: var(--s-on-bg); }

.mark {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-ink); color: #fff; border-radius: 12px;
  font-family: var(--font-display); font-weight: 700; width: 38px; height: 38px; font-size: 19px;
}
.mark.lg { width: 62px; height: 62px; font-size: 31px; border-radius: 17px; box-shadow: var(--glow-action); }
.mark.sm { width: 32px; height: 32px; font-size: 16px; border-radius: 9px; background: var(--s-inset); }

/* ---- onboarding welcome (dark) ---------------------------------------- */
.hero-ob { display: flex; flex-direction: column; min-height: 540px; padding-top: 46px; }
.screen-enter { animation: screen-in .38s cubic-bezier(.2,.8,.2,1); }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ob-mark { animation: mark-breathe 2.6s ease-in-out infinite; }
@keyframes mark-breathe { 50% { transform: translateY(-4px) scale(1.03); box-shadow: 0 12px 34px rgba(142,127,224,.42); } }
.ob-h { font-family: var(--font-display); font-weight: 800; font-size: 27px; line-height: 1.22; color: var(--s-on-bg); margin-top: 26px; }
.ob-h.compact { margin-top: 7px; font-size: 24px; }
.ob-p { font-size: 13.5px; line-height: 1.6; color: var(--s-on-bg-3); margin-top: 10px; }
/* The back control injected on any screen that does not draw its own. Sits in
   the flow rather than floating over content, so it can never cover the thing
   a member is reading — the mistake the tab bar made with Family and Forecast
   in the sandbox. 44px tall, because it is the most-used control in the app. */
.floatback {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; padding: 0 12px 0 6px; margin: 0 0 2px -6px;
  border: 0; background: none; cursor: pointer;
  color: var(--s-on-bg); font-family: var(--font-display);
  font-weight: 700; font-size: 14px;
}
.floatback:hover { opacity: .8; }
.floatback:active { transform: translateX(-2px); }
.floatback .ic { flex: none; }

/* ---- the first report (v18) -------------------------------------------
   Spending drawn as bars because "what you paid" is a shape before it is a
   number — the June spike is the argument, and a table would bury it. Bars
   grow from the baseline in turn, left to right, so the year reads as a year. */
.spendchart {
  display: flex; align-items: flex-end; gap: 6px;
  height: 108px; margin: 10px 0 4px; padding: 0 2px;
}
.spendbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.spendbar i {
  display: block; width: 100%; height: var(--h); border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #8f7fe8, #6b5ecb);
  transform: scaleY(0); transform-origin: bottom;
  animation: bar-grow 520ms var(--ease-in) forwards;
}
.spendbar small { font-family: var(--font-display); font-weight: 700; font-size: 9.5px; color: var(--s-on-bg-3); }
/* June is the point of the chart, so it is the one that is not lavender. */
.spendbar.b4 i { background: linear-gradient(180deg, #e8a08f, #c05a3e); }
.spendbar.b0 i { animation-delay: 420ms; } .spendbar.b1 i { animation-delay: 520ms; }
.spendbar.b2 i { animation-delay: 620ms; } .spendbar.b3 i { animation-delay: 720ms; }
.spendbar.b4 i { animation-delay: 820ms; } .spendbar.b5 i { animation-delay: 920ms; }
@keyframes bar-grow { to { transform: scaleY(1); } }

.findcard {
  padding: 13px; border-radius: 14px; background: var(--color-card, #fff);
  opacity: 0; animation: answer-up 380ms var(--ease-in) both;
}
.findcard.f0 { animation-delay: 1150ms; }
.findcard.f1 { animation-delay: 1300ms; }
.findcard.f2 { animation-delay: 1450ms; }
.findcard .billtop b { font-family: var(--font-display); font-size: 14px; line-height: 1.3; }
.report .moneycard { animation: answer-up 420ms var(--ease-in) 200ms both; }
/* Second time through, the report is already written. */
.spendchart.settled .spendbar i { animation: none; transform: scaleY(1); }
.findcard.settled, .moneycard.settled { animation: none; opacity: 1; }

/* The live camera fills the well; the mock card underneath is what shows
   whenever the browser will not give us one. */
.scanvideo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity var(--t-standard) var(--ease-in);
  border-radius: inherit;
}
.scanwell.live .scanvideo { opacity: 1; }
.scanwell.live .demo-card { opacity: 0; }

/* The symptom box on Benefits: a real field, not a canned example. */
.symptom { display: flex; gap: 6px; }
.symptom input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--color-line); border-radius: 12px;
  background: var(--color-surface); color: var(--color-type);
  font: inherit; font-size: 14px;
}
.symptom input::placeholder { color: var(--color-muted); }
.symptom .btn { min-width: 48px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; }
.cardrow { display: flex; align-items: center; gap: 8px; }
.cardrow-i { display: inline-flex; color: var(--color-action); flex: none; }
.cardrow .v { margin-left: auto; }

/* A roster row, not a control — there is nothing to press, so it is not a
   button. The old version was a toggle, which implied one adult could grant
   access to another by flipping it. */
.family-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px; border-radius: 12px; background: var(--color-card, #fff);
}

/* ---- the check-up that runs itself (v18) --------------------------------
   Each row lands in turn, so a member watches the app go through their file
   rather than being asked to describe it. Found-something is a bill glyph in
   the caution colour; already-fine is a green tick. The difference has to be
   readable at a glance or the screen is just a list. */
.scanlist { display: flex; flex-direction: column; gap: 7px; margin: 14px 0 4px; }
.scanrow {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px; border-radius: 12px;
  background: var(--color-card, #fff);
  opacity: 0; animation: scanrow-in 320ms var(--ease-in) forwards;
}
.scanrow.r0 { animation-delay: 260ms; } .scanrow.r1 { animation-delay: 620ms; }
.scanrow.r2 { animation-delay: 980ms; } .scanrow.r3 { animation-delay: 1340ms; }
.scanrow.r4 { animation-delay: 1700ms; }
@keyframes scanrow-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.scanrow-mark {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 10px;
}
.scanrow.hit .scanrow-mark { background: rgba(197,110,50,.16); color: #8a5a00; }
.scanrow.clear .scanrow-mark { background: rgba(20,83,45,.12); color: #14532d; }
.scanrow-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scanrow-b b { font-family: var(--font-display); font-size: 13.5px; line-height: 1.3; color: var(--color-type); }
.scanrow-b small { font-size: 11.5px; line-height: 1.4; color: var(--color-body); }
.scanrow-b em {
  font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 11px;
  margin-top: 2px;
}
.scanrow.hit .scanrow-b em { color: #8a5a00; }
.scanrow.clear .scanrow-b em { color: #14532d; }
.checkup-result { animation: answer-up 400ms var(--ease-in) 2100ms both; }
/* Second time through, the work is already done. */
.scanlist.settled .scanrow, .checkup-result.settled { animation: none; opacity: 1; }

/* ---- what we can see (v18) --------------------------------------------
   Live sources and missing ones in one list, because the missing ones are
   the point: naming them is more convincing than implying everything is
   wired, and it is the truthful position before any carrier contract. */
.srcrow {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px; border-radius: 12px;
  background: var(--color-card, #fff);
}
.srcrow-m { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 9px; }
.srcrow.on .srcrow-m { background: rgba(20,83,45,.12); color: #14532d; }
.srcrow.off .srcrow-m { background: rgba(107,94,203,.14); color: #4a3f8f; }
.srcrow-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.srcrow-b b { font-family: var(--font-display); font-size: 13.5px; line-height: 1.3; color: var(--color-type); }
.srcrow-b small { font-size: 11.5px; line-height: 1.4; color: var(--color-body); }
.srcrow-b em { font-style: normal; font-size: 10.5px; color: var(--color-muted); margin-top: 2px; }
.srcrow-s {
  flex: none; align-self: center; padding: 3px 8px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 9.5px; text-transform: uppercase; letter-spacing: .03em;
}
.srcrow.on .srcrow-s { background: rgba(20,83,45,.14); color: #14532d; }
.srcrow.off .srcrow-s { background: rgba(107,94,203,.14); color: #4a3f8f; }

.ob-fine { font-size: 10.5px; line-height: 1.55; color: var(--color-faint); margin-top: 12px; text-align: center; }
/* Ownership and confidentiality, first screen only. Uses the page ink token at
   reduced weight rather than a hard-coded grey, so it follows the theme and
   stays above the contrast floor in both — a legal notice nobody can read is
   not a legal notice. */
.ob-legal {
  font-size: 10px; line-height: 1.6; margin-top: 14px; text-align: center;
  color: var(--s-on-bg-3); padding-top: 12px; border-top: 1px solid var(--s-hairline);
}
.linkbtn.on-dark { color: var(--s-accent); }
.trustline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.trustline span { border: 1px solid var(--s-hairline); background: var(--s-inset); color: var(--s-on-bg-2); border-radius: 999px; padding: 5px 8px; font-size: 9.5px; font-weight: 700; }
.ob-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--color-muted); font-family: var(--font-display); font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ob-progress-bar { flex: 1; height: 5px; border-radius: 9px; overflow: hidden; background: var(--color-line); }
.ob-progress-bar i { display: block; height: 100%; border-radius: inherit; background: var(--color-action); transition: width .45s ease; }
.phone .ob-progress { color: var(--s-on-bg-3); }
.phone .ob-progress-bar { background: var(--s-inset); }
.ob-light { color: var(--color-action-deep); }

/* ---- onboarding overview --------------------------------------------- */
.overview-ob { min-height: 100%; display: flex; flex-direction: column; }
.orbit { position: relative; width: 224px; height: 196px; margin: 10px auto 6px; }
.orbit-core, .orbit-tool { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; }
.orbit-core { left: 82px; top: 66px; width: 62px; height: 62px; border-radius: 20px; background: var(--color-action); color: #fff; box-shadow: 0 0 0 8px rgba(107,94,203,.13), 0 12px 28px rgba(107,94,203,.38); animation: orbit-core 2.4s ease-in-out infinite; }
.orbit-core span { font-size: 9px; margin-top: 1px; }
@keyframes orbit-core { 50% { box-shadow: 0 0 0 14px rgba(107,94,203,.05), 0 16px 34px rgba(107,94,203,.5); } }
.orbit-tool { width: 50px; height: 50px; border-radius: 15px; background: var(--s-inset); border: 1px solid var(--s-hairline); color: var(--s-on-bg); font-size: 7.5px; gap: 1px; animation: float-tool 3s ease-in-out infinite; }
.orbit-tool.o0 { left: 7px; top: 14px; }.orbit-tool.o1 { right: 7px; top: 14px; animation-delay: -.6s; }
.orbit-tool.o2 { left: 7px; bottom: 8px; animation-delay: -1.2s; }.orbit-tool.o3 { right: 7px; bottom: 8px; animation-delay: -1.8s; }
@keyframes float-tool { 50% { transform: translateY(-5px); background: rgba(255,255,255,.14); } }
.orbit-ring { position: absolute; z-index: 1; left: 50%; top: 50%; border: 1px solid rgba(179,168,230,.2); border-radius: 50%; transform: translate(-50%,-50%) rotate(-8deg); }
.orbit-ring.r1 { width: 190px; height: 116px; }.orbit-ring.r2 { width: 142px; height: 168px; transform: translate(-50%,-50%) rotate(58deg); }
.overview-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 2px 0 14px; }
.overview-list > div { display: flex; align-items: center; gap: 7px; background: var(--s-inset); border-radius: 11px; padding: 8px; color: var(--s-on-bg); }
.mini-ic { display: flex; color: #b3a8e6; }
.overview-list p { display: flex; flex-direction: column; font-family: var(--font-display); font-size: 10.5px; }
.overview-list small { color: var(--s-on-bg-3); font-family: var(--font-body); font-size: 8.5px; margin-top: 1px; }

/* ---- smoother family review + check-up ------------------------------- */
.family-summary { display: flex; align-items: center; gap: 9px; background: var(--color-surface); border-radius: 14px; padding: 11px; margin: 13px 0 9px; }
.family-summary > div { display: flex; flex-direction: column; flex: 1; font-family: var(--font-display); font-size: 12px; color: var(--color-type); }
.family-summary small { color: var(--color-muted); font-family: var(--font-body); font-size: 10px; }
.family-review { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 52px; text-align: left; background: #fff; border: 1.5px solid var(--color-line); border-radius: 12px; padding: 10px 12px; cursor: pointer; transition: border-color .2s, transform .2s, opacity .2s; }
.family-review:hover { transform: translateY(-1px); border-color: var(--color-action); }
.family-review:not(.on) { opacity: .55; background: var(--color-surface); }
.family-copy { flex: 1; display: flex; flex-direction: column; font-family: var(--font-display); color: var(--color-type); font-size: 12.5px; }
.family-copy small { font-family: var(--font-body); color: var(--color-muted); font-size: 10.5px; }
.family-toggle { width: 32px; height: 20px; border-radius: 999px; background: var(--color-line); padding: 2px; transition: background .2s; }
.family-toggle i { display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .2s; }
.family-review.on .family-toggle { background: var(--color-action); }
.family-review.on .family-toggle i { transform: translateX(12px); }
.checkup-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; border: 1.5px solid var(--color-line); background: #fff; border-radius: 13px; padding: 12px; cursor: pointer; transition: .2s ease; }
.checkup-row.on { border-color: var(--color-action); background: var(--color-surface); }
.checkup-mark { width: 23px; height: 23px; border-radius: 8px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--color-line); color: #fff; font-weight: 800; }
.checkup-row.on .checkup-mark { background: var(--color-action); animation: check-pop .28s ease; }
@keyframes check-pop { 50% { transform: scale(1.2); } }
.checkup-row > span:last-child { display: flex; flex-direction: column; }
.checkup-row b { font-family: var(--font-display); font-size: 12.5px; color: var(--color-type); }
.checkup-row small { font-size: 10.5px; color: var(--color-muted); margin-top: 2px; }
.checkup-result { opacity: 0; max-height: 0; overflow: hidden; margin-top: 0; background: var(--color-provenance-soft); border-radius: 12px; padding: 0 12px; transition: .3s ease; }
.checkup-result.on { opacity: 1; max-height: 100px; margin-top: 12px; padding: 11px 12px; }
.checkup-result p:last-child { font-size: 11px; color: #1f4a1f; }

/* ---- chat -------------------------------------------------------------- */
.chatwrap { display: flex; flex-direction: column; min-height: 100%; }
.chat-empty { display: flex; flex-direction: column; flex: 1; min-height: 480px; }
.chat-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px 0; }
.greet { padding: 30px 20px 0; }
.greet-h { font-family: var(--font-display); font-weight: 800; font-size: 23px; line-height: 1.3; color: var(--s-on-bg); }
.greet-p { color: var(--s-on-bg-3); font-size: 12.5px; margin-top: 5px; }
.asks { margin-top: auto; padding: 0 18px 8px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.ask {
  background: none; border: 0; cursor: pointer; text-align: right;
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--s-on-bg); padding: 2px 0;
}
.ask.o0 { opacity: .5; } .ask.o1 { opacity: .72; } .ask.o2 { opacity: .92; }
.ask:hover { opacity: 1; }

.chat-log { padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 12px; }
.bub { border-radius: 15px; padding: 12px 13px; font-size: 12.5px; line-height: 1.6; max-width: 94%; }
.bub.me { background: var(--color-action); color: #fff; align-self: flex-end; font-weight: 600; border-bottom-right-radius: 5px; }
.bub.bot { background: #fff; color: var(--color-body); align-self: flex-start; border-bottom-left-radius: 5px; box-shadow: 0 3px 14px rgba(0,0,0,.16); }
.ans-lead { font-size: 13px; line-height: 1.6; color: var(--color-type); }
.srcbox { margin-top: 10px; border-top: 1px solid var(--color-line); padding-top: 8px; }
.srcbox summary {
  cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 9.5px;
  font-weight: 800; letter-spacing: .07em; color: var(--color-provenance);
}
.srcbox summary::-webkit-details-marker { display: none; }
.srcbox summary::after { content: ' +'; }
.srcbox[open] summary::after { content: ' \2212'; }
.srcbox ul { margin: 7px 0 0; padding-left: 15px; font-size: 11px; line-height: 1.6; color: var(--color-muted); }
.srcbox li { margin-bottom: 3px; }
.ctabox { margin-top: 11px; background: var(--color-surface); border-radius: 11px; padding: 10px; }
.ctanote { font-size: 10.5px; line-height: 1.5; color: var(--color-muted); margin-top: 7px; }
.clarify { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }

.composer {
  display: flex; gap: 8px; align-items: center; margin: auto 14px 16px;
  background: var(--s-inset); border: 1px solid var(--s-hairline);
  border-radius: 15px; padding: 8px 8px 8px 13px; position: sticky; bottom: 0;
}
.composer input {
  flex: 1; background: none; border: 0; outline: none; color: var(--s-on-bg);
  font-family: var(--font-body); font-size: 12.5px; min-width: 0;
}
.composer input::placeholder { color: var(--s-on-bg-3); }
.send {
  width: 30px; height: 30px; border-radius: 9px; border: 0; cursor: pointer; flex-shrink: 0;
  background: var(--color-action); color: #fff; font-size: 14px; font-weight: 800; line-height: 1;
}
.send:hover { background: #8e7fe0; }

/* ---- scanner ----------------------------------------------------------- */
.scanwell { background: var(--color-ink); border-radius: 15px; padding: 22px 16px; margin: 14px 0 16px; }
.scanframe { position: relative; height: 140px; border-radius: 11px; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.scanhint { position: absolute; left: 8px; right: 8px; bottom: 8px; text-align: center; font-family: var(--font-display); font-size: 9.5px; font-weight: 700; color: rgba(255,255,255,.62); }
.demo-card { width: 76%; height: 82px; border-radius: 9px; padding: 10px; background: linear-gradient(150deg,#fff,var(--color-surface)); box-shadow: 0 8px 18px rgba(0,0,0,.22); display: flex; flex-direction: column; color: var(--color-ink); transform: rotate(-2deg); }
.demo-card b { font-family: var(--font-display); font-size: 12px; }.demo-card small { font-size: 8px; color: var(--color-muted); margin-top: 7px; }
.scanbeam { position: absolute; display: none; left: 7%; right: 7%; height: 2px; top: 26px; background: #aaf0c1; box-shadow: 0 0 12px #69d793; }
.scanwell.scanning .scanbeam { display: block; animation: scan-beam 1.1s ease-in-out infinite alternate; }
.scanwell.scanning .demo-card { animation: card-focus 1.2s ease-in-out infinite alternate; }
@keyframes scan-beam { to { transform: translateY(86px); } }
@keyframes card-focus { to { filter: brightness(1.08); transform: rotate(0deg) scale(1.02); } }
.scan-status { display: grid; grid-template-columns: 12px 1fr; gap: 7px 8px; align-items: center; background: var(--color-surface); border-radius: 12px; padding: 11px 12px; font-size: 10.5px; color: var(--color-muted); }
.scan-status i { grid-row: 1 / span 3; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-line); border-top-color: var(--color-action); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.scan-success { display: flex; justify-content: center; margin: 12px 0 15px; }
.scan-success span { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 22px; background: var(--color-provenance-soft); color: var(--color-provenance); animation: success-in .55s cubic-bezier(.2,1.4,.5,1); }
@keyframes success-in { from { opacity: 0; transform: scale(.5) rotate(-8deg); } }
.match-card { border: 1.5px solid #b8d9b8; }
.corner { position: absolute; width: 20px; height: 20px; border: 2.5px solid var(--color-action); }
.corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }

/* ---- ID card ----------------------------------------------------------- */
.idcard {
  background: linear-gradient(160deg, #fff 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-line); border-radius: 13px; padding: 13px;
  font-size: 10.5px; line-height: 1.7; margin-top: 12px;
  box-shadow: 0 5px 16px rgba(46,31,77,.08);
}
.idcard.placeholder { border-style: dashed; }
.idcard { --color-type: #1c1c1c; --color-body: #3a3a3a; --color-muted: #666; --color-line: #e3e0f0; color: #3a3a3a; }
.idc-h { color: var(--color-ink) !important; }
.idc-h { font-family: var(--font-display); font-size: 8.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--color-ink); border-bottom: 1px solid var(--color-line); padding-bottom: 6px; margin-bottom: 7px; }
.idc-n { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--color-type); }
.idc-f { font-family: var(--font-data); color: var(--color-body); }
.idc-ph { font-size: 9.5px; color: var(--color-caution); margin-top: 5px; font-style: italic; }
.pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%; background: var(--color-action); color: #fff;
  font-family: var(--font-display); font-size: 8px; font-weight: 800; margin-left: 4px; vertical-align: middle;
}
.fieldrow { background: #fff; border-radius: 11px; padding: 10px 12px; font-size: 11.5px; }
.fieldrow summary { cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--color-type); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fieldrow summary::-webkit-details-marker { display: none; }
.fieldrow .fr-v { font-family: var(--font-data); font-weight: 400; font-size: 10.5px; color: var(--color-muted); width: 100%; }
.fieldrow p { margin: 7px 0 0; line-height: 1.6; color: var(--color-body); }

/* ---- FSA guided upload ------------------------------------------------ */
.fsa-program { margin-bottom: 12px; }
.upload-zone { display: flex; flex-direction: column; align-items: center; text-align: center; border: 2px dashed #c9c2ea; background: #fff; border-radius: 16px; padding: 18px 12px; cursor: pointer; transition: .2s ease; }
.upload-zone:hover, .upload-zone.ready { border-color: var(--color-action); background: var(--color-surface); }
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-zone b { font-family: var(--font-display); color: var(--color-type); font-size: 12.5px; margin-top: 6px; }
.upload-zone small { color: var(--color-muted); font-size: 10px; margin-top: 2px; }
.upload-ic { display: flex; color: var(--color-action); }
.packet-list { display: flex; flex-direction: column; gap: 7px; }
.packet-list > div { display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; background: #fff; border-radius: 11px; }
.packet-state { width: 21px; height: 21px; border-radius: 7px; background: var(--color-lavender); color: var(--color-action-deep); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 10px; }
.packet-list p { display: flex; flex-direction: column; color: var(--color-type); font-size: 11px; }
.packet-list small { color: var(--color-muted); font-size: 9.5px; line-height: 1.45; margin-top: 2px; }
.doc-preview { position: relative; height: 130px; border-radius: 14px; background: var(--color-ink); overflow: hidden; }
.paper-lines { position: absolute; left: 42px; top: 20px; width: 126px; height: 94px; border-radius: 5px; background: repeating-linear-gradient(#fff 0 8px,#e9e6f5 9px 10px); transform: rotate(-3deg); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.receipt-stub { position: absolute; right: 42px; top: 31px; width: 70px; height: 80px; border-radius: 4px; background: repeating-linear-gradient(#fff 0 5px,#f4f3fa 6px 7px); transform: rotate(5deg); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.doc-preview .scanbeam { display: block; top: 18px; animation: doc-scan 1.5s ease-in-out infinite alternate; }
@keyframes doc-scan { to { transform: translateY(96px); } }
.review-grid, .proof-card { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.review-grid > div, .proof-card > div { display: flex; flex-direction: column; background: #fff; border-radius: 10px; padding: 9px; }
.review-grid small, .proof-card small { color: var(--color-muted); font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em; }
.review-grid b, .proof-card b { font-family: var(--font-display); color: var(--color-type); font-size: 11px; margin-top: 2px; }
.handoff-card { background: #fff; border: 1.5px solid var(--color-line); border-radius: 15px; padding: 12px; }
.handoff-brand { display: flex; align-items: center; gap: 9px; color: var(--color-type); font-family: var(--font-display); font-weight: 800; font-size: 11px; }
.handoff-brand span:first-child { width: 27px; height: 27px; border-radius: 9px; background: var(--color-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.handoff-brand i { height: 1px; flex: 1; background: var(--color-line); }
.handoff-card ol { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: handoff; display: flex; flex-direction: column; gap: 9px; }
.handoff-card li { position: relative; padding-left: 29px; display: flex; flex-direction: column; counter-increment: handoff; }
.handoff-card li::before { content: counter(handoff); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 7px; background: var(--color-lavender); color: var(--color-action-deep); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 9px; }
.handoff-card li b { font-family: var(--font-display); font-size: 11.5px; color: var(--color-type); }
.handoff-card li small { font-size: 9.5px; line-height: 1.45; color: var(--color-muted); }
.fsa-success { text-align: center; padding-top: 14px; }
.success-mark { width: 62px; height: 62px; border-radius: 21px; margin: 0 auto 12px; background: var(--color-provenance-soft); color: var(--color-provenance); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; animation: success-in .55s cubic-bezier(.2,1.4,.5,1); }

/* ---- peer support ----------------------------------------------------- */
.peer-card { background: linear-gradient(150deg,#fff,var(--color-surface)); border: 1.5px solid var(--color-line); border-radius: 15px; padding: 12px; }
.peer-head { display: flex; align-items: center; gap: 8px; }
.peer-head > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; }
.peer-head b { font-family: var(--font-display); font-size: 12px; color: var(--color-type); }
.peer-head small { font-size: 9px; color: var(--color-muted); }
.peer-avatars { display: flex; padding-left: 7px; }
.peer-avatars i { width: 24px; height: 24px; margin-left: -7px; border-radius: 50%; border: 2px solid #fff; background: var(--color-lavender); color: var(--color-action-deep); display: flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 8px; }
.peer-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 2px; }
.peer-tags span, .peer-inline span { padding: 3px 7px; border-radius: 999px; background: var(--color-lavender); color: var(--color-action-deep); font-size: 8.5px; font-weight: 700; }
.peer-inline { font-size: 9.5px; color: var(--color-muted); margin-top: 8px; }
.peer-compose { border-top: 1px solid var(--color-line); padding-top: 9px; margin-top: 5px; }
.peer-compose label { display: flex; flex-direction: column; font-size: 9px; color: var(--color-muted); }
.peer-compose input { border: 1px solid var(--color-line); border-radius: 10px; padding: 9px; margin: 4px 0 7px; color: var(--color-type); background: #fff; font-family: var(--font-body); font-size: 11px; }
.peer-rule { border-top: 1px solid var(--color-line); margin-top: 8px; padding-top: 7px; font-size: 8.5px; line-height: 1.45; color: var(--color-muted); }
.peer-saved { margin-top: 8px; padding: 7px 8px; border-radius: 9px; background: var(--color-provenance-soft); color: var(--color-provenance); font-size: 9.5px; font-weight: 700; }

/* ---- first-run spotlight tour ---------------------------------------- */
.tour-layer { display: none; position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.tour-layer.on { display: block; background: rgba(24,16,42,.58); backdrop-filter: blur(1px); animation: tour-fade .25s ease; }
@keyframes tour-fade { from { opacity: 0; } }
.tour-card { position: absolute; z-index: 34; left: 12px; right: 12px; bottom: 76px; border-radius: 17px; background: #fff; padding: 13px; box-shadow: 0 18px 42px rgba(17,11,31,.35); pointer-events: auto; animation: tour-up .35s cubic-bezier(.2,.8,.2,1); }
@keyframes tour-up { from { opacity: 0; transform: translateY(14px); } }
.tour-meta { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 8.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-action); }
.tour-dots { display: flex; gap: 4px; margin: 7px 0 9px; }
.tour-dots i { flex: 1; height: 4px; border-radius: 6px; background: var(--color-line); }.tour-dots i.on { background: var(--color-action); }
.tour-card h2 { font-family: var(--font-display); font-size: 17px; color: var(--color-type); }
.tour-card p { font-size: 11px; line-height: 1.55; color: var(--color-body); margin-top: 4px; }
.tour-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.tour-actions .btn { min-height: 38px; padding: 8px 13px; font-size: 11px; }
.tour-target { position: relative; z-index: 33 !important; animation: tour-pulse 1.25s ease-in-out infinite; pointer-events: none; }
@keyframes tour-pulse { 50% { box-shadow: 0 0 0 9px rgba(179,168,230,.35), 0 10px 28px rgba(0,0,0,.35); transform: translateY(-4px) scale(1.04); } }

/* ---- side rail (outside the phone) ------------------------------------- */
.proto-steps { display: flex; flex-direction: column; gap: 6px; }
.proto-step {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  background: #fff; border: 1.5px solid var(--color-line); border-radius: 12px;
  padding: 11px 13px; cursor: pointer; font-family: var(--font-body);
}
.proto-step:hover { border-color: var(--color-action); }
.proto-step .n { font-family: var(--font-data); font-size: 11px; font-weight: 600; color: var(--color-action); width: 26px; flex-shrink: 0; }
.proto-step .t { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--color-type); }
.proto-step .s { font-size: 11.5px; color: var(--color-muted); display: block; margin-top: 2px; }

@media (max-width: 780px) {
  #proto { position: static; margin: 0 auto; }
  .phone { width: 100%; max-width: 340px; height: 620px; }
  .proto-layout { flex-direction: column-reverse; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}


/* ---- tap-target floor -------------------------------------------------
   The phone mock renders at 320px against a real 390px device, so a real
   44px target scales to ~36px here. Nothing tappable falls below that. */
.chip-sm, .linkbtn, .tb-back, .ask, .seg-b, .fieldrow summary, .srcbox summary {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.linkbtn.block, .fieldrow summary, .srcbox summary { display: flex; }
.fieldrow summary { flex-wrap: wrap; align-items: center; }
.filters { gap: 6px; }
.ask { justify-content: flex-end; }
.seg-b { justify-content: center; }


/* ==========================================================================
   v14 — the storyboard's new components and its motion spec
   Source: Benewise Journey Storyboard v0.2, "HOW IT MOVES" (applies to every
   screen) and the merged screens approved in the workflow review.

   THE ONE RULE behind all of it: motion explains where you are and what just
   changed. It is never decoration. If an animation does not answer "where did
   this come from?" or "what did my tap do?", it is not here.
   ========================================================================== */
:root {
  --t-instant: 120ms;   /* taps, toggles, chips, checkboxes */
  --t-standard: 240ms;  /* pushing to a new page, opening a sheet — the workhorse */
  --t-deliberate: 400ms;/* anything that changes money or state — slow on purpose */
  --ease-in: cubic-bezier(0.2, 0, 0, 1);   /* entering */
  --ease-out: cubic-bezier(0.4, 0, 1, 1);  /* leaving */
}
/* Older eyes: in retiree mode durations go up about 30% — the same motion,
   given time to be followed. */
.phone.big { --t-instant: 156ms; --t-standard: 312ms; --t-deliberate: 520ms; }

/* Going deeper pushes from the right; Home is a landing, not a push, so it
   fades. Tab-to-tab cross-fades with a small lift rather than sliding, because
   sliding would imply the seven buckets sit in a row and can be swiped. */
.screen-enter { animation: screen-in var(--t-standard) var(--ease-in); }
.phone .screen-enter, .chatwrap { animation: home-land 180ms var(--ease-in); }
@keyframes home-land { from { opacity: 0; transform: translateY(4px); } }

/* ---- 7-icon bar and the simplified task bar ---------------------------- */
.tabs { grid-template-columns: repeat(7, 1fr); }
.tab { font-size: 8px; padding: 7px 1px 8px; gap: 3px; }
.tab span { text-align: center; line-height: 1.15; }
.tabs.simple { grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 8px 12px; }
.tabs.simple .tab.home { position: static; width: 42px; min-height: 42px; margin-top: 0; border-radius: 13px; font-size: 8px; }
.taskbar-note { font-size: 9.5px; line-height: 1.4; color: var(--color-muted); text-align: center; }
.phone .taskbar-note { color: var(--s-on-bg-3); }

/* ---- the alert badge ---------------------------------------------------
   New item: the count scales 1 → 1.25 → 1 and the strip slides down.
   Cleared: the badge shrinks out. That collapse is the reward. */
.avatar.badged { position: relative; border: 0; cursor: pointer; min-width: 36px; min-height: 36px; }
.alert {
  position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--color-emergency); color: #fff;
  font-family: var(--font-display); font-style: normal; font-size: 9.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--color-ink);
}
.alert.bump { animation: badge-bump 300ms var(--ease-in); }
@keyframes badge-bump { 45% { transform: scale(1.25); } }
.avatar.badged.sm .alert { box-shadow: 0 0 0 2px #fff; }
.phone .avatar.badged.sm .alert { box-shadow: 0 0 0 2px var(--color-ink); }

/* ---- Home ------------------------------------------------------------- */
.homebrand { display: flex; align-items: center; gap: 8px; color: var(--s-on-bg); font-family: var(--font-display); font-weight: 800; font-size: 12px; }
.home-log { padding-top: 6px; }
.bub.saved { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; background: var(--color-provenance-soft); color: #1f4a1f; font-weight: 700; font-size: 11.5px; box-shadow: none; }
.tick { display: inline-flex; color: var(--color-provenance); }
.scoreboard .tick, .bub.saved .tick { flex: 0 0 auto; }
/* The proactive card fades and rises 12px, 320ms, about 400ms after the
   greeting settles — so it reads as Benewise speaking, not as furniture. */
.bub.proactive { max-width: 100%; animation: proactive-in 320ms var(--ease-in) both; animation-delay: 400ms; }
@keyframes proactive-in { from { opacity: 0; transform: translateY(12px); } }
.deadline { margin-top: 6px; font-size: 11.5px; font-weight: 700; line-height: 1.5; color: var(--color-emergency); }

/* ---- My stuff --------------------------------------------------------- */
.mystuff-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: #fff; border: 0; border-left: 3px solid var(--color-line); border-radius: 4px 13px 13px 4px;
  padding: 12px 13px; cursor: pointer; box-shadow: 0 3px 14px rgba(46,31,77,.07);
  color: var(--color-action); transition: transform var(--t-instant) var(--ease-in), box-shadow var(--t-instant) var(--ease-in);
}
.item:hover { transform: translateX(1px); box-shadow: 0 6px 20px rgba(46,31,77,.13); }
.item.flat { cursor: default; }
.item.flat[data-go] { cursor: pointer; }
.item.action { border-left-color: var(--color-action); }
.item.caution { border-left-color: var(--color-caution); }
.item.provenance { border-left-color: var(--color-provenance); }
.item-b { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.item-act { font-family: var(--font-display); font-weight: 800; font-size: 11px; color: var(--color-action); margin-top: 3px; }
.pill { align-self: flex-start; background: var(--color-caution-soft); color: var(--color-caution); border-radius: 999px; padding: 4px 8px; font-family: var(--font-display); font-size: 8.5px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; }
.pill.ok { background: var(--color-provenance-soft); color: var(--color-provenance); }
.inline-acts { display: flex; gap: 12px; margin-top: 5px; }
/* Come back to a list you changed and the row you finished has moved. Never
   re-render silently — the member needs to see their own effect. */
.cleared-note { margin-top: 8px; font-size: 10.5px; color: var(--color-provenance); animation: home-land var(--t-deliberate) var(--ease-in); }
.scoreboard { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; background: var(--color-provenance-soft); border-radius: 13px; padding: 12px; }
.scoreboard span:last-child { display: flex; flex-direction: column; gap: 2px; }
.scoreboard b { font-family: var(--font-display); font-size: 12.5px; color: #1f4a1f; }
.scoreboard small { font-size: 10.5px; color: #3d6b3d; }
.billtop { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; }
.verdict { align-self: flex-start; font-family: var(--font-display); font-weight: 800; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; }
.verdict.caution { color: var(--color-caution); }
.verdict.provenance { color: var(--color-provenance); }
.verdict.flat { color: var(--color-muted); }

/* ---- the status track --------------------------------------------------
   A segment fills left to right over 400ms and the label underneath swaps
   colour as it lands. If a case has moved since last time, it animates FROM
   the old state so the member sees the progress happen. */
.track { display: flex; gap: 4px; margin: 9px 0 5px; }
.track span { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.track i { display: block; height: 6px; border-radius: 5px; background: var(--color-line); }
.track b { font-family: var(--font-display); font-size: 8.5px; font-weight: 700; color: var(--color-muted); line-height: 1.25; }
.track span.done i { background: var(--color-provenance); }
.track span.done b { color: var(--color-provenance); }
.track span.on.caution i { background: var(--color-caution); }
.track span.on.caution b { color: var(--color-caution); }
.track span.on.provenance i { background: var(--color-provenance); }
.track span.on.provenance b { color: var(--color-provenance); }
.track.advancing span.on i { animation: track-advance var(--t-deliberate) var(--ease-in); transform-origin: left center; }
@keyframes track-advance { from { transform: scaleX(0); } }
.track-cap { font-size: 10.5px; line-height: 1.5; color: var(--color-muted); }

/* ---- money that lands --------------------------------------------------
   Always what you pay. Never the charge, never a bare number we cannot
   stand behind. */
.moneycard { background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 3px 14px rgba(46,31,77,.07); border-left: 3px solid var(--color-line); }
.moneycard.caution { border-left-color: var(--color-caution); }
.moneycard.provenance { border-left-color: var(--color-provenance); }
.money { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; color: var(--color-type); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.twoprice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.twoprice > div { display: flex; flex-direction: column; gap: 3px; background: #fff; border-radius: 12px; padding: 11px; box-shadow: 0 3px 14px rgba(46,31,77,.07); }
.twoprice small { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.price.bad { color: var(--color-emergency); }

/* ---- R2: two button weights -------------------------------------------
   "Book cleaning" (free, undoable) must not look identical to "Send my 2
   receipts" (goes to the City). The heavier weight always carries its
   confirm line, so the line cannot be dropped by a later edit. */
.btn.official { background: var(--color-ink); box-shadow: 0 0 0 3px rgba(107,94,203,.22), 0 8px 20px rgba(46,31,77,.28); }
.btn.official:hover { background: var(--color-ink-deep); }
.confirmline { margin-top: 7px; text-align: center; font-size: 10.5px; line-height: 1.5; font-weight: 700; color: var(--color-caution); }

/* ---- the time picker, as a block --------------------------------------- */
.picker { background: var(--color-surface); border-radius: 14px; padding: 13px; margin-top: 12px; }
.picker-day { font-family: var(--font-display); font-weight: 800; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted); margin-top: 10px; }
.picker-limit { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--color-line); font-size: 10px; line-height: 1.5; color: var(--color-muted); }
.chip-sm.on { background: var(--color-action); border-color: var(--color-action); color: #fff; }

/* ---- the reusable fail pattern ---------------------------------------- */
.fix-soft { border-left: 3px solid var(--color-caution); }
.fix-hard { border-left: 3px solid var(--color-emergency); }
.center { text-align: center; }

/* ---- yes / no rows ----------------------------------------------------- */
.yesrow { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.55; color: var(--color-body); }
.yesrow small { display: block; font-size: 10.5px; color: var(--color-muted); margin-top: 2px; }
.yesrow .yes { flex: 0 0 auto; display: inline-flex; color: var(--color-provenance); margin-top: 2px; }
.yesrow .nope { flex: 0 0 auto; width: 15px; text-align: center; color: var(--color-emergency); font-weight: 800; }
.yesrow .dot { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--color-caution); }
.yesrow.no { color: var(--color-muted); }
.yesrow.open { color: var(--color-caution); }

/* ---- G4: the language picker ------------------------------------------- */
.langlist { display: flex; flex-direction: column; gap: 7px; }
.langrow { display: flex; align-items: center; justify-content: space-between; gap: 9px; width: 100%; min-height: 46px; text-align: left; cursor: pointer; background: var(--s-inset); border: 1.5px solid var(--s-hairline); border-radius: 13px; padding: 10px 13px; color: var(--s-on-bg); transition: border-color var(--t-instant) var(--ease-in), background var(--t-instant) var(--ease-in); }
.langrow:hover { border-color: #b3a8e6; }
.langrow.on { background: rgba(179,168,230,.18); border-color: #b3a8e6; }
.lang-n { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.lang-n small { font-family: var(--font-body); font-weight: 400; font-size: 10.5px; color: var(--s-on-bg-3); margin-top: 2px; }
.lang-tick { display: inline-flex; color: #b3a8e6; }
.lang-tick.empty { width: 15px; }

/* ---- G3: the connectors draw themselves --------------------------------
   Five tiles fade up ~120ms apart. Each dashed line then draws from its tile
   to the hub — stroke-dashoffset to zero, ~500ms each, overlapping, so the
   whole convergence takes about 1.5s. The hub pulses once as the last line
   lands, then the answer card slides up underneath. After it settles a slow
   dash-march keeps running, so the screen reads as STILL WORKING rather than
   finished. This is the one place we spend real time, because it is the
   product explaining itself. */
/* v17, approved Aug 4: the tiles were too small to read and had no icons, the
   hub was an unexplained letter, and the diagram stopped before saying what any
   of it was FOR. Now: five readable tiles each carrying its own icon, lines
   drawing down to the full wordmark, an arrow into the five things a member
   actually comes here to do, and only then the answer card.

   The order is the point. Tiles, then lines, then hub, then asks, then answer —
   the screen builds the argument in the order a person would make it. */
.connect { position: relative; margin: 14px 0 2px; }
.connect-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
/* Six tiles: two clean rows of three. */
.ct {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 5px; min-height: 62px; padding: 9px 6px;
  background: var(--s-inset); border: 1px solid var(--s-hairline); border-radius: 12px;
  color: var(--s-on-bg); text-align: center;
  opacity: 0; animation: tile-in 300ms var(--ease-in) forwards;
}
.ct-ic { display: inline-flex; align-items: center; justify-content: center; gap: 1px; color: #cfc4f5; }
.ct-t { font-family: var(--font-display); font-weight: 700; font-size: 10px; line-height: 1.25; }
/* Four filled of five — the tile shows what the source is, not a decoration. */
.ct .star { display: inline-flex; opacity: .28; }
.ct .star.on { opacity: 1; }
.ct.c0 { animation-delay: 0ms; } .ct.c1 { animation-delay: 110ms; } .ct.c2 { animation-delay: 220ms; }
.ct.c3 { animation-delay: 330ms; } .ct.c4 { animation-delay: 440ms; }
.ct.c5 { animation-delay: 550ms; }
@keyframes tile-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.connect-lines { display: block; width: 100%; height: 44px; margin-top: 2px; }
.cl { fill: none; stroke: #b3a8e6; stroke-width: 1.5; stroke-dasharray: 5 5; stroke-dashoffset: 200; opacity: .55; animation: draw-line 500ms var(--ease-in) forwards, dash-march 3s linear infinite; }
.cl.c0 { animation-delay: 340ms, 900ms; } .cl.c1 { animation-delay: 420ms, 1020ms; }
.cl.c2 { animation-delay: 500ms, 1140ms; } .cl.c3 { animation-delay: 580ms, 1260ms; }
.cl.c4 { animation-delay: 660ms, 1380ms; }
.cl.c5 { animation-delay: 740ms, 1460ms; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes dash-march { to { stroke-dashoffset: -60; } }

/* The hub says the name rather than a lone initial, and carries an outline so
   it reads as a mark rather than as another tile. */
/* The mark alone, in the light purple, with an outline so it reads as a mark
   rather than as another tile. */
.connect-hub {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto; width: 58px; height: 58px; border-radius: 19px;
  background: var(--color-action); color: #fff;
  border: 2px solid rgba(255,255,255,.5); box-shadow: var(--glow-action);
  animation: hub-pulse 600ms var(--ease-in) 1000ms;
}
.connect { display: flex; flex-direction: column; align-items: center; }
.connect-tiles { width: 100%; }
.connect-hub .m {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; width: auto; height: auto;
  font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1;
}
@keyframes hub-pulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 14px rgba(107,94,203,.16), 0 14px 32px rgba(107,94,203,.5); } }

/* What it is all for. */
.asks { display: flex; flex-direction: column; align-items: center; margin-top: 8px; }
.asks-arrow { display: inline-flex; color: #b3a8e6; opacity: 0; animation: fade-in 240ms var(--ease-in) 1180ms forwards; }
.asks-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 6px; }
.ask {
  padding: 4px 9px; border-radius: 999px;
  background: rgba(179,168,230,.16); border: 1px solid rgba(179,168,230,.4);
  color: var(--s-on-bg); font-family: var(--font-display); font-weight: 600; font-size: 9.5px;
  line-height: 1.35;
  opacity: 0; animation: tile-in 240ms var(--ease-in) forwards;
}
.ask.a0 { animation-delay: 1260ms; } .ask.a1 { animation-delay: 1330ms; }
.ask.a2 { animation-delay: 1400ms; } .ask.a3 { animation-delay: 1470ms; }
.ask.a4 { animation-delay: 1540ms; }

.connect-answer { margin-top: 12px; animation: answer-up 400ms var(--ease-in) 1660ms both; }
.connect-answer .lead.sm { font-size: 14.5px; line-height: 1.4; }
.qlist { margin: 8px 0 8px; padding-left: 10px; border-left: 2px solid rgba(107,94,203,.35); }
.q { margin: 3px 0; font-size: 12.5px; line-height: 1.45; color: var(--s-on-card-2, inherit); font-style: italic; }
.builtby {
  margin-top: 10px; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .02em;
  color: var(--s-on-bg-3);
  opacity: 0; animation: fade-in 300ms var(--ease-in) 1900ms forwards;
}

/* Second time through, everything is already where it ended up. */
.connect.settled .ct, .connect.settled .cl { animation-delay: 0ms, 0ms; animation-duration: 1ms, 3s; opacity: 1; }
.connect.settled .cl { stroke-dashoffset: 0; opacity: .55; }
.connect.settled .connect-hub { animation: none; }
.asks.settled .asks-arrow, .asks.settled .ask { animation: none; opacity: 1; }
.connect-answer.settled { animation: none; }

/* ---- the pinned-case chat ---------------------------------------------- */
.pinned { display: flex; flex-direction: column; gap: 2px; background: var(--color-surface); border-bottom: 1px solid var(--color-line); padding: 10px 15px; }
.pin-t { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--color-type); }
.pin-s { font-size: 10.5px; color: var(--color-muted); }
.chat-log.light .bub.bot { background: #fff; box-shadow: 0 3px 14px rgba(46,31,77,.09); }
.chat-log.light .bub.me { background: var(--color-action); }
.caseqs { display: flex; flex-direction: column; gap: 6px; }
.caseq { width: 100%; min-height: 40px; text-align: left; background: #fff; border: 1.5px solid var(--color-line); border-radius: 12px; padding: 10px 12px; font-family: var(--font-body); font-size: 12px; color: var(--color-action-deep); cursor: pointer; }
.caseq:hover { border-color: var(--color-action); }
.composer.light { background: #fff; border-color: var(--color-line); }
.composer.light input { color: var(--color-type); }
.composer.light input::placeholder { color: var(--color-muted); }

/* ---- misc components ---------------------------------------------------- */
.quote { background: var(--color-surface); border-left: 3px solid var(--color-line); border-radius: 0 11px 11px 0; padding: 11px 12px; font-size: 12px; line-height: 1.6; color: var(--color-body); font-style: italic; }
.steps { margin: 8px 0 0; padding-left: 17px; font-size: 11.5px; line-height: 1.6; color: var(--color-body); }
.steps li { margin-bottom: 5px; }
.filtered { margin-top: 8px; font-size: 10.5px; line-height: 1.5; color: var(--color-muted); border-left: 2px solid var(--color-line); padding-left: 9px; }
.block-card { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; border: 0; cursor: pointer; font-family: var(--font-body); }
.card.dark { background: linear-gradient(150deg, var(--color-ink) 0%, var(--color-ink-deep) 100%); color: rgba(255,255,255,.78); }
.card.dark .lead, .card.dark .eyebrow { color: #fff; }
.card.dark .p { color: rgba(255,255,255,.7); }
.otherphone { border-top: 4px solid var(--color-action); }
.pushnote { background: #fff; border-radius: 15px; padding: 12px; box-shadow: 0 6px 20px rgba(46,31,77,.12); border-left: 3px solid var(--color-line); }
.pushnote.provenance { border-left-color: var(--color-provenance); }
.pushnote.caution { border-left-color: var(--color-caution); }
.push-head { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: 800; font-size: 10px; color: var(--color-type); margin-bottom: 7px; }
.push-head small { margin-left: auto; font-weight: 400; font-family: var(--font-body); font-size: 9.5px; color: var(--color-muted); }
.howknow summary { color: var(--color-action-deep); }
.srcbox.howknow { margin-top: 10px; }
button[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- tap-target floor, extended to the v14 controls -------------------- */
.langrow, .caseq, .item, .chip-lg, .picker .chip-sm, .toolrow, .block-card { min-height: 44px; }



/* ---- two structural fixes found by the v14 screenshot pass -------------
   1. A <button> is border-box by default and a <div> is not, so the same
      .item rule laid out correctly as a button and ran 29px off the right
      edge as a div. The overflow sat inside .phone-body, which scrolls, so
      it never reached the document and no document-level check could see it.
   2. `.phone p { margin: 0 }` outranks `.mt` on specificity, so every
      section eyebrow written as <p class="eyebrow mt"> was rendering with no
      top margin at all. Restated at matching specificity rather than
      loosening the reset. */
.item, .moneycard, .picker, .pushnote, .quote, .track, .track span,
.langrow, .caseq, .scoreboard, .pinned, .twoprice > div, .filtered,
.connect, .connect-tiles, .ct, .block-card {
  box-sizing: border-box;
}
.phone p.mt, .phone .mt { margin-top: 18px; }
.phone p.mt-s, .phone .mt-s { margin-top: 9px; }
.phone p.eyebrow.mt { margin-top: 20px; }



/* ==========================================================================
   v15 — ONE SURFACE, TWO THEMES
   Source: Storyboard change log, section D. "Two backgrounds had split the
   deck - deep purple on approved screens, light lavender on everything else.
   That was an artifact of the review process, not a decision. Deep purple is
   now the single app surface, with white cards on top."

   THE ELEVEN TOKENS. Everything else in the app is fixed and does not change
   between themes: the action purple, the six colour roles, type, shape,
   elevation. Only these eleven flip.

   THE RULE THAT CAME OUT OF THE CONTRAST WORK, honoured structurally rather
   than by hand-patching: when recolouring inside a converted box, stop at any
   descendant that declares its own opaque background - that subtree keeps its
   original polarity. Here that is literal. The page-level type tokens are
   declared on .phone; every opaque container re-declares them at their
   light-surface values, and CSS inheritance stops there on its own. No node
   can be stranded in the wrong polarity by a later edit, because polarity is
   a property of the container, not of the node.

   THE CAVEAT, from the same section: dark-on-light reads better for older
   eyes. That is why Light Mode is a real setting and not a nicety, and why
   the retiree track turns it on by itself.
   ========================================================================== */
.phone {
  /*  1 */ --s-bg: linear-gradient(170deg, var(--color-ink) 0%, var(--color-ink-deep) 100%);
  /*  2 */ --s-bg-flat: #2a1d47;
  /*  3 */ --s-chrome: rgba(29,20,51,.94);
  /*  4 */ --s-on-bg: #ffffff;
  /*  5 */ --s-on-bg-2: rgba(255,255,255,.80);
  /*  6 */ --s-on-bg-3: rgba(255,255,255,.70);
  /*  7 */ --s-hairline: rgba(255,255,255,.16);
  /*  8 */ --s-inset: rgba(255,255,255,.07);
  /*  9 */ --s-accent: #b3a8e6;
  /* 10 */ --s-card: #ffffff;
  /* 11 */ --s-card-inset: #f4f3fa;

  /* Not one of the eleven, and deliberately not themed: the action purple is
     a brand colour. What the page needs is a LIGHTER version of it for text
     and links sitting directly on the deep surface - that is --s-accent. The
     solid stays put, so a button is the same purple in both themes. */
  --s-action-solid: #6b5ecb;
  --s-alert-ink: #ffc0b2;

  /* the legacy names every component rule already uses, pointed at the page
     values - so the whole app flips from here rather than rule by rule */
  --color-type: var(--s-on-bg);
  --color-body: var(--s-on-bg-2);
  --color-muted: var(--s-on-bg-3);
  --color-faint: rgba(255,255,255,.62);
  --color-line: var(--s-hairline);
  --color-surface: var(--s-inset);
  --color-lavender: rgba(179,168,230,.20);
  --color-action: var(--s-accent);
  --color-action-deep: #cfc6f2;
  --color-provenance: #86d891;
  --color-caution: #f2d275;
  --color-emergency: #ff9d8a;
}

/* LIGHT MODE. The same eleven tokens, the other way round. Dark-on-light for
   older eyes, and the only thing that changes. */
[data-theme="light"] .phone, .phone[data-theme="light"] {
  --s-bg: var(--color-surface-deep);
  --s-bg-flat: var(--color-surface-deep);
  --s-chrome: rgba(255,255,255,.98);
  --s-on-bg: #1c1c1c;
  --s-on-bg-2: #3a3a3a;
  --s-on-bg-3: #666666;
  --s-hairline: #e3e0f0;
  --s-inset: #f4f3fa;
  /* On a light page the accent has to go DARKER, not lighter, or every link
     and eyebrow lands just under the AA floor at about 4.2:1. */
  --s-accent: #4a3d8f;
  --s-alert-ink: #8a3324;
  --s-card: #ffffff;
  --s-card-inset: #f4f3fa;

  --color-faint: #635c7e;
  --color-lavender: #e3e0f0;
  --color-action: #6b5ecb;
  --color-action-deep: #4a3d8f;
  --color-provenance: #265a26;
  --color-caution: #6b5410;
  --color-emergency: #a8402c;
}

/* WHERE POLARITY STOPS. Every opaque light container restores the light-
   surface values, so its whole subtree renders dark-on-light in both themes.
   White cards on deep purple is the point of the design; this is the list of
   things that are cards. */
.card, .note, .okbox, .emergency, .verified, .listrow:not(.tight), .letter, .searchbox,
.chip-sm, .seg, .chip-lg, .resolved, .checkrow, .watchrow, .toolrow, .advocard,
.family-summary, .family-review, .checkup-row, .checkup-result, .bub.bot,
.ctabox, .scan-status, .idcard, .fieldrow, .upload-zone, .packet-list > div,
.review-grid > div, .proof-card > div, .handoff-card, .peer-card, .tour-card,
.proto-step, .item, .scoreboard, .moneycard, .twoprice > div, .picker, .pinned,
.caseq, .quote, .pushnote, .demo-card, .rail span, .btn.quiet, .composer.light,
.peer-compose input, .src, .badge, .pill, .bub.saved, .peer-saved, .avatar,
.packet-state, .peer-tags span, .peer-inline span,
.scanrow, .srcrow, .family-row, .findcard {
  --color-type: #1c1c1c;
  --color-body: #3a3a3a;
  --color-muted: #666666;
  --color-faint: #8a82a8;
  --color-line: #e3e0f0;
  --color-surface: #f4f3fa;
  --color-lavender: #e3e0f0;
  --color-action: #6b5ecb;
  --color-action-deep: #4a3d8f;
  --color-provenance: #265a26;
  --color-caution: #6b5410;
  --color-emergency: #a8402c;
  color: var(--color-body);
}
/* the purple hero card is its own polarity again - white on action purple */
.card.useit {
  --color-type: #ffffff;
  --color-body: rgba(255,255,255,.96);
  --color-muted: rgba(255,255,255,.92);
  --color-line: rgba(255,255,255,.26);
  --color-action: #ffffff;
  --color-action-deep: #ffffff;
  color: rgba(255,255,255,.96);
}
.card.dark {
  --color-type: #ffffff;
  --color-body: rgba(255,255,255,.78);
  --color-muted: rgba(255,255,255,.6);
  --color-line: rgba(255,255,255,.16);
  --color-action: #b3a8e6;
}

/* CHROME. The bars belong to the page, not to a card. */
.tb { background: transparent; border-bottom: 1px solid var(--s-hairline); }
.tb-t { color: var(--s-on-bg); }
.tabs { background: var(--s-chrome); border-top-color: var(--s-hairline); }
.tab { color: var(--s-on-bg-3); }
.tab.on { color: var(--s-accent); }
[data-theme="light"] .tb { background: rgba(249,248,253,.93); }

/* Action-purple surfaces. These were reading --color-action, which the page
   remaps to the lighter accent for text - so buttons came out pale lavender
   with white type on them, at about 2.2:1. They take the solid instead. */
.btn, .tab.home, .send, .orbit-core, .connect-hub, .mark, .chip-sm.on,
.bar span, .ob-progress-bar i, .rail span.on, .checkup-row.on .checkup-mark,
.family-review.on .family-toggle {
  background: var(--s-action-solid);
}
.btn:hover, .tab.home:hover, .send:hover { background: var(--color-action-deep); }
.btn.quiet { background: var(--s-card); }
.btn.official { background: var(--color-ink); }
.card.useit { background: linear-gradient(150deg, var(--s-action-solid) 0%, var(--color-action-deep) 100%); }
.card.useit .btn { background: #fff; color: var(--s-action-solid); box-shadow: none; }
.track span.on.provenance i { background: #2e6b2e; }
.track span.on.caution i { background: #8a6d1a; }
.track span.done i { background: #2e6b2e; }
.chip-lg.on { background: var(--color-ink); color: #fff; }

/* Surfaces that were written as flat white for the light page and now need to
   read as an inset on the dark one. */
.card { background: var(--s-card); }
.card.next { background: var(--s-card-inset); }
.searchbox, .chip-sm, .chip-lg, .listrow:not(.tight), .toolrow, .item, .moneycard,
.twoprice > div, .caseq, .pushnote, .upload-zone, .handoff-card, .tour-card,
.bub.bot, .fieldrow, .checkrow, .watchrow, .family-review, .checkup-row,
.packet-list > div, .review-grid > div, .proof-card > div, .composer.light,
.peer-compose input, .btn.quiet, .proto-step { background: var(--s-card); }
.seg, .picker, .pinned, .quote, .advocard, .letter, .resolved, .ctabox,
.scan-status, .rail span, .family-summary { background: var(--s-card-inset); }



/* ==========================================================================
   v15 — new components, and the polish pass
   The motion brief changed for this build: feel is allowed to lead. What did
   NOT change is prefers-reduced-motion, which still turns every one of these
   into an end state. That is accessibility, not decoration, and it is
   asserted by the acceptance run.
   ========================================================================== */

/* ---- the first screen's disclosure ------------------------------------- */
.firstrun {
  border: 1px solid var(--s-hairline); background: var(--s-inset);
  border-radius: 14px; padding: 12px 13px; margin-bottom: 14px;
  font-size: 11.5px; line-height: 1.6; color: var(--s-on-bg-2);
  animation: rise-in var(--t-standard) var(--ease-in) 220ms both;
}
.firstrun .eyebrow { color: var(--s-accent); margin-bottom: 4px; }

/* ---- the system map, six around the hub -------------------------------- */
.orbit.six { width: 100%; max-width: 320px; height: auto; aspect-ratio: 1 / 1.25; margin: 18px auto 22px; }
.orbit.six .orbit-core {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 88px; height: 88px; border-radius: 29px; font-size: 11px; gap: 2px;
  animation: orbit-core 3.2s ease-in-out infinite;
}
.orbit.six .orbit-core span { font-size: 11px; margin-top: 2px; }
/* v17: each bucket carries its own short description, so the tiles are wider
   than they are tall. Sized against 320px — the ring sits at 34% of the box
   from centre, so a 92px tile reaches 46px past that and still clears the
   edge on the smallest phone we test. */
.orbit.six .orbit-tool {
  position: absolute; transform: translate(-50%, -50%);
  width: 92px; min-height: 66px; height: auto; padding: 7px 5px;
  border-radius: 16px; font-size: 9px; gap: 2px;
  opacity: 0; animation: tool-pop 520ms var(--ease-in) forwards;
}
.orbit.six .orbit-tool span { font-size: 11px; font-weight: 800; line-height: 1.2; text-align: center; }
/* The descriptions are their own beat: they arrive only once all six buckets
   have landed, which is the order the note asked for. */
.orbit.six .orbit-tool small {
  font-family: var(--font-body); font-weight: 600; font-size: 9.5px; line-height: 1.3;
  text-align: center; color: var(--s-on-bg-2);
  opacity: 0; animation: fade-in 340ms var(--ease-in) forwards;
}
.orbit.six .orbit-tool small.d0 { animation-delay: 2000ms; }
.orbit.six .orbit-tool small.d1 { animation-delay: 2130ms; }
.orbit.six .orbit-tool small.d2 { animation-delay: 2260ms; }
.orbit.six .orbit-tool small.d3 { animation-delay: 2390ms; }
.orbit.six .orbit-tool small.d4 { animation-delay: 2520ms; }
.orbit.six .orbit-tool small.d5 { animation-delay: 2650ms; }
.orbit.six .orbit-tool.t0 { animation-delay: 700ms; } .orbit.six .orbit-tool.t1 { animation-delay: 900ms; }
.orbit.six .orbit-tool.t2 { animation-delay: 1100ms; } .orbit.six .orbit-tool.t3 { animation-delay: 1300ms; }
.orbit.six .orbit-tool.t4 { animation-delay: 1500ms; } .orbit.six .orbit-tool.t5 { animation-delay: 1700ms; }
@keyframes tool-pop { from { opacity: 0; transform: translate(-50%,-50%) scale(.6); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.orbit-spokes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.sp {
  stroke: var(--s-accent); stroke-width: 1.6; stroke-dasharray: 4 5; opacity: .5;
  stroke-dashoffset: 120; animation: draw-line 420ms var(--ease-in) forwards, dash-march 3s linear infinite;
}
.sp.s0 { animation-delay: 360ms, 1100ms; } .sp.s1 { animation-delay: 460ms, 1200ms; }
.sp.s2 { animation-delay: 560ms, 1300ms; } .sp.s3 { animation-delay: 660ms, 1400ms; }
.sp.s4 { animation-delay: 760ms, 1500ms; } .sp.s5 { animation-delay: 860ms, 1600ms; }
.orbit.six .orbit-ring.r1 { width: 190px; height: 190px; border-radius: 50%; transform: translate(-50%,-50%); opacity: .35; }
.overview-list { grid-template-columns: 1fr 1fr; gap: 7px; }
.overview-list p { font-size: 11.5px; }
.overview-list small { font-size: 9.5px; }

/* ---- Home · the strip that points at the profile ----------------------- */
.alertstrip {
  margin: 10px 14px 0; border-radius: 14px; padding: 10px 12px;
  background: rgba(192,83,62,.16); border: 1px solid rgba(192,83,62,.42);
  animation: strip-drop var(--t-standard) var(--ease-in) both;
}
@keyframes strip-drop { from { opacity: 0; transform: translateY(-10px); } }
.alertstrip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.alertstrip-head .lr-n { color: var(--s-alert-ink); font-size: 12.5px; }
.alertstrip-point { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; color: var(--s-alert-ink); white-space: nowrap; }
.alertstrip-point svg { width: 30px; height: 20px; fill: none; stroke: var(--s-alert-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alertstrip-point path:first-child { stroke-dasharray: 46; stroke-dashoffset: 46; animation: draw-line 500ms var(--ease-in) 420ms forwards; }
.alertstrip-point path:last-child { opacity: 0; animation: fade-in 200ms 900ms forwards; }
@keyframes fade-in { to { opacity: 1; } }
.alertstrip-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.alertchip {
  min-height: 30px; border-radius: 999px; padding: 6px 11px; cursor: pointer;
  background: var(--s-inset); border: 1px solid var(--s-hairline);
  color: var(--s-on-bg); font-family: var(--font-display); font-weight: 700; font-size: 10px;
  opacity: 0; animation: rise-in 260ms var(--ease-in) forwards;
  transition: transform var(--t-instant) var(--ease-in), background var(--t-instant) var(--ease-in);
}
.alertstrip-chips .alertchip:nth-child(1) { animation-delay: 520ms; }
.alertstrip-chips .alertchip:nth-child(2) { animation-delay: 610ms; }
.alertstrip-chips .alertchip:nth-child(3) { animation-delay: 700ms; }
/* The strip shows one chip per open item, and My Items can hold more than
   three. Without these the fourth chip has no delay and lands BEFORE the
   first, which reads as a glitch rather than as a list arriving. */
.alertstrip-chips .alertchip:nth-child(4) { animation-delay: 790ms; }
.alertstrip-chips .alertchip:nth-child(n+5) { animation-delay: 880ms; }
.alertchip:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
.goodday { padding: 0 2px; font-size: 12px; line-height: 1.55; color: var(--s-on-bg-3); animation: rise-in var(--t-standard) var(--ease-in) 240ms both; }

/* ---- your medicines ---------------------------------------------------- */
.medsrc { font-size: 9.5px; font-weight: 700; color: var(--color-provenance); margin-top: 3px; }
.medbig {
  background: var(--s-card); border-radius: 13px; padding: 12px 13px;
  display: flex; flex-direction: column; gap: 3px;
  --color-type: #1c1c1c; --color-body: #3a3a3a; --color-muted: #666;
}
.medbig b { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: #1c1c1c; }
.medbig span { font-size: 13.5px; line-height: 1.45; color: #3a3a3a; }
.card.allergy { border-left: 4px solid var(--color-emergency); }
.card.allergy .eyebrow { color: #c0533e; }
.card.allergy .lead { font-size: 17px; }
.h1.big { font-size: 27px; }
.medscard .okbox { margin-top: 16px; }

/* ---- staggered list entry ---------------------------------------------
   Rows arrive in the order you would read them. Cheap, and it makes a list
   feel authored rather than dumped. */
.stagger > * { opacity: 0; animation: rise-in 300ms var(--ease-in) forwards; }
.stagger > *:nth-child(1) { animation-delay: 40ms; }
.stagger > *:nth-child(2) { animation-delay: 100ms; }
.stagger > *:nth-child(3) { animation-delay: 160ms; }
.stagger > *:nth-child(4) { animation-delay: 220ms; }
.stagger > *:nth-child(5) { animation-delay: 280ms; }
.stagger > *:nth-child(6) { animation-delay: 340ms; }
.stagger > *:nth-child(7) { animation-delay: 400ms; }
.stagger > *:nth-child(8) { animation-delay: 460ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* ---- the polish pass ---------------------------------------------------
   Screens push in from the right going deeper and settle rather than snap;
   anything tappable answers the tap; the raised Home lifts when it becomes
   the current tab. */
.screen-enter { animation: push-in var(--t-standard) var(--ease-in); }
@keyframes push-in { from { opacity: 0; transform: translateX(16px); } }
.phone .screen-enter, .chatwrap { animation: home-land 200ms var(--ease-in); }
.pad > .h1:first-child, .pad > .mystuff-head { animation: rise-in 320ms var(--ease-in) both; }

.btn, .chip-sm, .chip-lg, .seg-b, .item, .toolrow, .caseq, .alertchip,
.family-review, .checkup-row, .langrow, .tab {
  transition: transform var(--t-instant) var(--ease-in),
              box-shadow var(--t-instant) var(--ease-in),
              background var(--t-instant) var(--ease-in),
              border-color var(--t-instant) var(--ease-in);
}
.btn:active, .chip-sm:active, .chip-lg:active, .seg-b:active, .item:active,
.toolrow:active, .caseq:active, .alertchip:active, .family-review:active,
.checkup-row:active, .langrow:active { transform: scale(.975); }
.btn:hover { transform: translateY(-1px); }
.toolrow:hover { transform: translateY(-1px); }
.tab.home.on { animation: home-lift 320ms var(--ease-in); }
@keyframes home-lift { 40% { transform: translateY(-7px) scale(1.06); } }
.card { animation: settle 340ms var(--ease-in) both; }
@keyframes settle { from { opacity: 0; transform: translateY(7px) scale(.995); } }
.success-mark, .scan-success span { animation: success-in .6s cubic-bezier(.2,1.5,.45,1); }
.money { animation: money-land 420ms var(--ease-in) both; }
@keyframes money-land { from { opacity: 0; transform: translateY(6px); } }
.bar span, .ob-progress-bar i { transition: width var(--t-deliberate) var(--ease-in); }
.badge, .pill { animation: pop-in 260ms var(--ease-in) both; }
@keyframes pop-in { from { opacity: 0; transform: scale(.86); } }
.srcbox[open] > ul, .srcbox[open] > ol { animation: rise-in 240ms var(--ease-in); }
/* opacity and lift only: pop-in scales, and a scaled tap target is briefly
   under the 44px floor while a member can already be reaching for it. */
.seg-b.on { animation: rise-in 200ms var(--ease-in); }
.avatar.badged:active { transform: scale(.94); }

/* Large type — packaged with light mode as "Easier to read". Durations go up
   with it, per the storyboard's own rule for older eyes. */
.bw-large .phone { font-size: 1.12em; --t-instant: 156ms; --t-standard: 312ms; --t-deliberate: 520ms; }
.bw-large .h1 { font-size: 1.12em; }
.bw-large .fine, .bw-large .p.sm { font-size: 12px; }

/* ---- Home's stack, with the alert strip in it --------------------------
   The strip pushed the thread past the viewport, and a translucent composer
   pinned to the bottom then sat on top of the proactive card. The composer
   takes the same treatment as the tab bar - it is chrome, so content scrolls
   cleanly under it - and the thread reserves room so nothing important ends
   up beneath it. */
.composer { background: var(--s-chrome); backdrop-filter: saturate(150%) blur(12px); }
.chat-empty { min-height: 0; }
.chat-log.home-log { padding-bottom: 2px; }
.asks { margin-top: 18px; padding-bottom: 10px; }
.greet { padding-top: 22px; }

/* ---- tap-target floor, extended again ---------------------------------- */
.alertchip, .medbig, .seg-b { min-height: 36px; }

/* ---- RULES THAT OVERRIDE ALL OF THE ABOVE ------------------------------
   Respect prefers-reduced-motion: slides become cross-fades, count-ups become
   the final number, the connector animation shows its end state. Nothing is
   lost, only the movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
  /* Anything that starts at opacity 0 and is revealed by an animation has to
     be listed here, or reduced motion leaves it invisible rather than still.
     That is content lost, not motion removed — the v17 asks row and the
     built-by line both did exactly that when they were added. */
  .ct, .stagger > *, .alertchip, .orbit.six .orbit-tool, .firstrun, .goodday,
  .ask, .asks-arrow, .builtby, .orbit-tool small,
  .scanrow, .checkup-result, .findcard { opacity: 1 !important; transform: none !important; }
  .spendbar i { transform: scaleY(1) !important; }
  .cl, .sp, .alertstrip-point path { stroke-dashoffset: 0 !important; opacity: .5 !important; }
  .alertstrip-point path:last-child { opacity: 1 !important; }
  .bub.proactive, .connect-answer, .card, .money, .badge, .pill { opacity: 1 !important; transform: none !important; }
}

/* v15 — the language picker's honesty mark. Small, and never in the way of
   the language name itself; a member choosing Bengali should read "বাংলা"
   first and the caveat second. */
.lang-flag {
  flex: 0 0 auto; margin-left: auto; margin-right: 8px;
  font-family: var(--font-display); font-size: 8.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: #6b5410; background: #faf0d0;
  border-radius: 999px; padding: 3px 7px;
}