/* Australian Retirement Trust. Every value here is sampled from
   australianretirementtrust.com.au: navy #1c355e for headings and chrome,
   the brand blue #0051ff (hover #0045d9) for calls to action, body ink
   #333333, hairline #dadada, surfaces #f2f2f2/#f5f5f5, and the pale blue
   tints #ddf5ff/#abeeff the site uses behind illustrations. Type is
   Merriweather for headings over Noto Sans for everything else, both loaded
   in index.html. Swap these and the app follows. */
:root {
  --font: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head: Merriweather, Georgia, "Times New Roman", serif;

  --page: #1c355e;
  --navy: #1c355e;
  --brand: #0051ff;
  --brand-deep: #0045d9;
  --brand-line: rgba(0, 81, 255, 0.18);
  --tint: #ddf5ff;
  --tint-bright: #abeeff;
  --bubble: #ffffff;
  --ink: #333333;
  --white-soft: rgba(255, 255, 255, 0.82);
  --live: #0051ff;
  --error: #dc3545;
  --green: #198754;
  /* Back arrow, send and call all render at this size. */
  --icon: 22px;

  /* App surfaces */
  --shop-bg: #f5f5f5;
  --card: #ffffff;
  --muted: #767678;
  --accent: #0051ff;
  --accent-bright: #0045d9;
  --heart: #0051ff;
  --hairline: #dadada;
}

* { box-sizing: border-box; }

/* Screens set display, so `hidden` needs to outrank it. */
[hidden] { display: none !important; }

html, body { height: 100%; }

/* Phone sits dead centre of the page, both axes. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Two columns: the copy on the left, the phone on the right. Both are
   centred against each other on the cross axis, and the pair is centred in
   the page by the flex rules on body. */
.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 6vw, 96px);
  width: 100%;
  max-width: 1180px;
}

.intro {
  flex: 1 1 0;
  max-width: 560px;
  min-height: min(900px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

.intro h1 {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.intro p {
  margin: 0 0 12px;
  color: var(--white-soft);
  font-size: 17px;
}

.intro ol,
.intro ul {
  margin: 0 0 22px;
  padding-left: 22px;
  color: var(--white-soft);
  font-size: 16px;
}

.intro li { margin-bottom: 10px; }
.intro li:last-child { margin-bottom: 0; }
.intro strong { color: #fff; }
.intro .fine { margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, 0.6); }

/* Below this the columns can't both breathe, so stack them and let the
   page scroll instead of squeezing the phone. */
@media (max-width: 900px) {
  body { align-items: flex-start; }

  .stage {
    flex-direction: column;
    gap: 40px;
  }

  .intro {
    min-height: 0;
    max-width: min(430px, 100%);
    align-items: flex-start;
  }
}

.phone {
  flex: none;
  width: min(430px, 100%);
  height: min(900px, calc(100vh - 40px));
  padding: 12px;
  border-radius: 52px;
  background: #0b1a33;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 40px 80px rgba(0, 0, 0, 0.45);
}

.app {
  position: relative;
  height: 100%;
  display: grid;
  /* statusbar / header / screen / footer (tabbar, composer or cta bar) */
  grid-template-rows: auto auto 1fr auto;
  border-radius: 42px;
  overflow: hidden;
  background: #fff;
}

/* Every screen fills the middle row and scrolls independently. */
.screen {
  overflow-y: auto;
  background: var(--shop-bg);
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }
#screen-chat { background: var(--shop-bg); }

/* ---------------------------------------------------------------- statusbar --- */

.statusbar {
  height: 50px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 26px;
  color: var(--navy);
}
.time { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; }

.island {
  width: 106px;
  height: 30px;
  border-radius: 16px;
  background: #000;
}

.indicators {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}
.indicators svg { fill: currentColor; height: 12px; }
.indicators .signal { width: 18px; }
.indicators .wifi { width: 16px; }
.indicators .battery { width: 26px; }

/* ------------------------------------------------------------------ header --- */

header {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
  padding: 6px 18px 12px;
}

/* Logo slot: public/logo.svg replaces the wordmark when present. */
.brand {
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
  /* Tapping the wordmark returns to home from anywhere. */
  cursor: pointer;
}
/* Whole artwork, letterboxed rather than cropped. --logo-ratio is the
   width/height of the two-line logo; `contain` keeps it honest. */
.brand-logo {
  --logo-h: 32px;
  --logo-ratio: 4.326;
  height: var(--logo-h);
  width: calc(var(--logo-h) * var(--logo-ratio));
  max-width: 100%;
  background-image: var(--logo-src, url("/logo.svg"));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.brand-logo[hidden] { display: none; }

.icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}
.icon-btn svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------- transcript --- */

#screen-chat { display: flex; flex-direction: column; overflow: hidden; }

#transcript {
  flex: 1;
  overflow-y: auto;
  padding: 6px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
#transcript::-webkit-scrollbar { width: 6px; }
#transcript::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 3px; }

.row {
  display: flex;
  align-items: flex-end;
}
.row.user { justify-content: flex-end; }

.bubble {
  max-width: 88%;
  line-height: 1.3;
  padding: 13px 16px;
  border-radius: 18px;
  background: var(--bubble);
  color: var(--ink);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.bubble p { margin: 0; }

/* The member's own turns are the blue ones. */
.row.user .bubble {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.row.system {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  padding: 2px 20px;
}

/* --------------------------------------------------------------------- card --- */

.card {
  /* Fixed width, not max-width: while the image is still generating the card
     has little content and would otherwise shrink to a narrow column, then
     jump wider when the picture and the strip arrive. */
  width: 92%;
  max-width: 92%;
  padding: 16px;
  border-radius: 20px;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 2px 10px rgba(28, 53, 94, 0.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tint-bright);
}

/* Direct children only: the offering cards in the strip live inside .card
   too, and must not inherit the picture's crop. */
.card > img,
.card > .holder {
  width: 100%;
  aspect-ratio: 5 / 3;
  border-radius: 14px;
  border: 3px solid rgba(255, 255, 255, 0.9);
}
.card > img { display: block; object-fit: cover; }

.card-text { display: flex; flex-direction: column; gap: 3px; }

.card-name {
  margin: 0 0 2px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.card-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tint-bright);
}
/* Breathing room above a second title, but not above the first. */
.card-title + * { margin-bottom: 4px; }
.card-desc + .card-title,
.details + .card-title,
.costs + .card-title,
.chart-key + .card-title,
.method + .card-title { margin-top: 8px; }

.card-desc { margin: 0; font-size: 14px; line-height: 1.3; color: rgba(255, 255, 255, 0.92); }

.details,
.method {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
}
.details { padding: 0; list-style: none; }
.method { padding-left: 18px; }
.method li { padding-left: 2px; }
.method li + li { margin-top: 3px; }

.card-footnote {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.6);
}

/* Offering strip inside a card. Sits within the card's own padding so it
   insets equally on both sides, matching the text above it. */
.card-shop {
  display: flex;
  gap: 10px;
  margin: 6px 0 0;
  padding: 0 0 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.card-shop::-webkit-scrollbar { display: none; }
.card-shop .card-offering {
  flex: none;
  width: 156px;
  scroll-snap-align: start;
  color: var(--ink);
}
.card-shop .card-body { padding: 10px; }
.card-shop .card-body strong { font-size: 14px; }
.card-shop .sub { font-size: 11.5px; }
.card-shop .kpi strong { font-size: 15px; }
.card-shop .thumb { aspect-ratio: 16 / 9; }

.holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 81, 255, 0.35);
}
.holder small { color: rgba(255, 255, 255, 0.82); max-width: 85%; text-align: center; line-height: 1.4; }
.holder.error { color: rgba(255, 255, 255, 0.82); }

/* While the image generates, the clip fills the same box the finished photo
   will occupy, so nothing shifts when it swaps in. */
.holder.loading {
  position: relative;
  overflow: hidden;
  justify-content: flex-end;
  padding-bottom: 12px;
}

.holder.loading video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Caption sits over the footage, with a scrim so it stays legible against
   whatever frame is showing. */
.holder.loading span {
  position: relative;
  z-index: 1;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
}

/* No holding footage: centre the caption on the panel, with a soft pulse so
   the wait reads as work rather than a stall. */
.holder.loading.no-clip {
  justify-content: center;
  padding-bottom: 0;
  background: linear-gradient(135deg, rgba(0, 81, 255, 0.55), rgba(171, 238, 255, 0.35));
  animation: holder-pulse 2.4s ease-in-out infinite;
}
.holder.loading.no-clip span { background: none; backdrop-filter: none; }
@keyframes holder-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* The finished image rises over the still-playing video rather than snapping
   in. Duration is mirrored by FADE_MS in chat.js. */
.holder.swap {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: var(--navy);
}

.holder.swap video,
.holder.swap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1300ms ease;
}

.holder.swap img { opacity: 0; }
.holder.swap img.shown { opacity: 1; }
.holder.swap video.gone { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .holder.swap video,
  .holder.swap img { transition: none; }
  .holder.loading.no-clip { animation: none; }
}

/* ------------------------------------------------------------------ chart --- */

.chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 8px;
  overflow: visible;
}
.chart-area { fill: rgba(171, 238, 255, 0.14); }
.chart-line { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-line.boosted { stroke: var(--tint-bright); stroke-width: 2.5; }
.chart-label { fill: rgba(255, 255, 255, 0.75); font-size: 10.5px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart-label.end { text-anchor: end; }
.chart-label.dim { fill: rgba(255, 255, 255, 0.5); }
.chart-key { display: flex; gap: 14px; font-size: 11.5px; color: rgba(255, 255, 255, 0.75); margin-top: 2px; }
.chart-key span { display: inline-flex; align-items: center; gap: 6px; }
.chart-key .line { display: inline-block; width: 16px; height: 2px; background: rgba(255, 255, 255, 0.85); border-radius: 1px; }
.chart-key .line.boosted { background: var(--tint-bright); height: 3px; }

/* ----------------------------------------------------------------- composer --- */

#composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 20px;
}

.pill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 14px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.pill svg { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.attach {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--icon);
  height: var(--icon);
  color: var(--navy);
  cursor: pointer;
}
.attach svg {
  width: var(--icon);
  height: var(--icon);
  stroke: currentColor;
  stroke-width: 1.9;
}

#text-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: transparent;
}
#text-input::placeholder { color: #9a9b9b; }

.send {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--icon);
  height: var(--icon);
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
}
.send svg { width: var(--icon); height: var(--icon); stroke: currentColor; }

.call {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 81, 255, 0.3);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.call svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.call:hover { transform: scale(1.04); background: var(--brand-deep); }
/* Live call turns the button into a hang-up. */
.call[data-on="true"] { background: var(--error); box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3); }
.call[data-on="true"] svg { transform: rotate(135deg); }

/* ============================================================== app screens === */

.section-title {
  margin: 20px 0 12px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
}

.screen { padding: 0 16px 20px; }
.screen-detail { padding: 0; }

.empty { margin: 24px 4px; color: var(--muted); font-size: 14px; text-align: center; }

/* ------------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  text-align: left;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #0051ff 0%, #1c355e 100%);
}
/* The gradient above shows until the first frame of the clip arrives. */
.hero video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(28, 53, 94, 0) 40%, rgba(28, 53, 94, 0.55) 100%);
}
.hero-copy { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; }
.hero-copy h2 { margin: 0 0 4px; font-family: var(--font-head); font-size: 22px; font-weight: 700; line-height: 1.2; }
.hero-copy p { margin: 0; font-size: 14px; line-height: 1.3; color: rgba(255, 255, 255, 0.9); }

/* --------------------------------------------------------------- snapshot --- */

.snapshot {
  margin-top: 14px;
  padding: 18px 18px 14px;
  background: var(--card);
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}
.snap-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.snap-balance {
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 4px 0 2px;
}
.snap-sub { font-size: 14px; color: var(--muted); }
.snap-rows { margin-top: 12px; border-top: 1px solid var(--hairline); }
.snap-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 13.5px;
  border-bottom: 1px solid var(--hairline);
}
.snap-row:last-child { border-bottom: 0; }
.snap-row span:first-child { color: var(--muted); }
.snap-row span:last-child { font-weight: 600; color: var(--navy); text-align: right; }

/* ---------------------------------------------------------------- costs --- */

/* Two columns so the amounts form a straight right edge however long the
   labels are. The note column absorbs the slack. */
.costs { list-style: none; margin: 0 0 4px; padding: 0; }
.costs li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label amount" "note amount";
  align-items: baseline;
  column-gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.cost-label  { grid-area: label; font-size: 14px; }
.cost-note   { grid-area: note; font-size: 12px; color: rgba(255, 255, 255, 0.62); }
.cost-amount {
  grid-area: amount;
  align-self: center;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.costs .cost-total {
  border-bottom: 0;
  border-top: 2px solid rgba(255, 255, 255, 0.6);
  margin-top: 2px;
  padding-top: 8px;
}
.cost-total .cost-label { font-weight: 700; }
.cost-total .cost-amount { font-size: 17px; color: var(--tint-bright); }

/* -------------------------------------------------------------- offerings --- */

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.card-offering {
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.card-media { position: relative; }
.card-body { padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.card-body strong { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--navy); }
.sub { color: var(--muted); font-size: 12.5px; line-height: 1.25; }

.thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  padding: 14px;
}
.thumb img { max-width: 100%; max-height: 100%; object-fit: cover; }
/* Real artwork replaces the tint and the glyph. */
.thumb.has-photo { background: #fff !important; padding: 0; }
.thumb img + .glyph { display: none; }
.glyph { width: 38%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.thumb.big { aspect-ratio: 16 / 9; border-radius: 18px; }
.thumb.big .glyph { width: 24%; }

.tile-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.kpi-row { display: flex; gap: 14px; margin-top: 6px; }
.kpi { display: flex; flex-direction: column; min-width: 0; }
.kpi strong { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.1; }
.kpi small { font-size: 11px; color: var(--muted); margin-top: 2px; }
.kpi.small strong { font-family: var(--font); font-size: 13px; line-height: 1.25; }
.kpi-row.big { margin: 14px 0 4px; gap: 24px; }
.kpi-row.big .kpi strong { font-size: 30px; }
.kpi-row.big .kpi small { font-size: 12.5px; }
.kpi-row.big .kpi.small strong { font-size: 16px; }

.heart {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--heart);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
/* Outline by default, solid once saved — same glyph as the tab bar. */
.heart svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.heart.on svg { fill: currentColor; }
.heart.inline { position: static; box-shadow: none; background: transparent; width: 26px; height: 26px; flex: none; }
.heart.inline svg { width: 24px; height: 24px; }
.heart.floating { top: 16px; right: 16px; }

/* ----------------------------------------------------------- explore rows --- */

.search-field {
  width: 100%;
  margin-top: 14px;
  padding: 16px 18px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  outline: none;
}
.search-field:focus { border-color: var(--brand); }
.search-field::placeholder { color: #9a9b9b; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.chip {
  padding: 9px 14px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
}
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }

.rows { display: flex; flex-direction: column; gap: 10px; }

.row-offering {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 10px;
  background: var(--card);
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.row-offering .thumb { width: 64px; aspect-ratio: 1; padding: 0; border-radius: 10px; flex: none; }
.row-offering .glyph { width: 46%; }
.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.row-body strong { font-size: 15.5px; font-weight: 700; color: var(--navy); line-height: 1.25; }
.row-kpi { font-size: 14px; font-weight: 700; color: var(--navy); margin-top: 2px; }
.row-kpi small { font-weight: 400; color: var(--muted); font-size: 12px; }

/* --------------------------------------------------------------- activity --- */

.month {
  margin: 14px 2px 4px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.month:first-child { margin-top: 0; }
.txn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.txn-icon {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
}
.txn-icon.in { background: var(--tint); color: var(--brand); }
.txn-icon.out { background: #f2f2f2; color: var(--muted); }
.txn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.txn-body strong { font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.25; }
.txn-body span { font-size: 12.5px; color: var(--muted); }
.txn-amount { flex: none; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--navy); }
.txn-amount.in { color: var(--brand); }

/* ---------------------------------------------------------------- account --- */

.account-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--card);
  border-radius: 16px;
}
.account-card strong { display: block; font-size: 17px; color: var(--navy); }
.account-card span { color: var(--muted); font-size: 14px; }
.avatar-lg {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--tint);
}
.avatar-lg svg { width: 26px; height: 26px; fill: none; stroke: var(--brand); stroke-width: 1.7; stroke-linecap: round; }

.card-block {
  margin-top: 12px;
  padding: 4px 16px;
  background: var(--card);
  border-radius: 16px;
}

/* Label/value rows, on the account screen and the detail screen. */
.facts { display: flex; flex-direction: column; }
.fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.fact:last-child { border-bottom: 0; }
.fact span { font-size: 12.5px; color: var(--muted); }
.fact strong { font-size: 14.5px; font-weight: 600; color: var(--navy); line-height: 1.3; }

/* ------------------------------------------------------------------ detail --- */

.screen-detail { padding: 14px 16px 20px; }
.detail-hero { position: relative; }
.detail-info { padding: 18px 2px 0; }
.tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.detail-info h2 { margin: 14px 0 2px; font-family: var(--font-head); font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--navy); }
.detail-info .sub { font-size: 15px; }
.detail-info .summary { margin: 12px 0 8px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.detail-info .facts { margin-top: 8px; padding: 2px 16px; background: var(--card); border-radius: 16px; }
.fine { margin: 12px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); }

.cta-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 20px;
  background: var(--shop-bg);
  border-top: 1px solid var(--hairline);
}
.cta {
  flex: 1;
  height: 54px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.cta:hover { background: var(--brand-deep); }

/* ------------------------------------------------------------------- toast --- */

.toast {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 104px;
  z-index: 7;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--navy);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ----------------------------------------------------------------- tabbar --- */

#tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 14px 20px;
  background: #fff;
  border-top: 1px solid var(--hairline);
}
#tabbar button {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--shop-bg);
  color: var(--navy);
  cursor: pointer;
}
#tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#tabbar button.active { background: var(--brand); color: #fff; }

/* ----------------------------------------------------------------- drawer --- */

.drawer-scrim { position: absolute; inset: 0; background: rgba(28, 53, 94, 0.45); z-index: 5; }

.drawer {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 6;
  width: 78%;
  display: flex;
  flex-direction: column;
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
}
.drawer.open { transform: translateX(0); }

.drawer-head { padding: 46px 22px 18px; background: var(--tint); color: var(--navy); }
.drawer-head strong { display: block; font-family: var(--font-head); font-size: 17px; font-weight: 700; line-height: 1.2; }
.drawer-head span { font-size: 13.5px; color: var(--muted); }
.drawer-logo { --logo-h: 40px; margin-bottom: 6px; }

.drawer-links { flex: 1; display: flex; flex-direction: column; padding: 12px 0; }
.drawer-links button {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 14px 22px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 17px;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}
.drawer-links svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--brand);
}
.drawer-links button:hover { background: var(--shop-bg); }

.drawer-foot { padding: 18px 22px 26px; border-top: 1px solid var(--hairline); }
.drawer-foot strong { display: block; color: var(--brand); font-size: 16px; font-weight: 700; }
.drawer-foot span { font-size: 13.5px; color: var(--muted); }

/* Home rails: horizontal scrollers that bleed to the screen edges, so a
   partially visible card signals there is more to swipe. Saved keeps the
   two-column .grid. */
.rail {
  display: flex;
  gap: 12px;
  margin: 0 -16px;
  padding: 0 16px 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: 16px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail .card-offering {
  flex: none;
  width: 176px;
  scroll-snap-align: start;
}