/* Group "ahead": Bills and subscriptions, Cash flow, Ways to save, Money waiting for you.
   Values are theme/tokens.ts and each component's StyleSheet (sources in ahead.js). Every rule is
   scoped to .g-ahead. */
.g-ahead {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
}
.g-ahead .pg {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* detail-screen.tsx: 48pt bar, own gutter, a hairline floor */
.g-ahead .nv {
  position: absolute;
  z-index: 4;
  top: 50px;
  left: 0;
  right: 0;
  height: 49px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  background: var(--canvas);
  border-bottom: 1px solid var(--line);
}
.g-ahead .nv .sl {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: none;
}
.g-ahead .nv .sl.act {
  place-items: center end;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.g-ahead .nv .tt {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-ahead .bd {
  position: absolute;
  top: 99px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.g-ahead .sc {
  padding: 0 20px;
}
.g-ahead .endpad {
  height: 120px;
}
.g-ahead svg {
  display: block;
  flex: none;
}

/* the kit's text registers (text.tsx) */
.g-ahead .ey {
  font-weight: 600;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
}
.g-ahead .hd {
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  color: var(--ink);
}
.g-ahead .sec {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
.g-ahead .hz {
  padding-top: 24px;
}
.g-ahead .f46 {
  margin-top: 8px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 46px;
  line-height: 48px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.g-ahead .f46.ai {
  color: var(--ai);
}

/* ---------- Bills and subscriptions ---------- */
.g-ahead .hcv {
  position: relative;
  margin: 0 -20px;
  overflow: hidden;
}
.g-ahead .aur {
  /* AuroraBackdrop refits to a mount under 160 tall (this hero is 124): the glow fills the hero and
     centres, its falloff transparent inside every edge. */
  position: absolute;
  inset: 0;
  background: radial-gradient(
    50% 50% at 50% 46%,
    rgba(244, 241, 234, 0.16),
    rgba(201, 163, 92, 0.14) 44%,
    rgba(201, 163, 92, 0) 70%
  );
  opacity: 0.75;
  animation: g-ahead-breath 3.5s cubic-bezier(0.32, 0.72, 0, 1) infinite alternate;
}
@keyframes g-ahead-breath { from { opacity: 0.5; transform: scale(1); } to { opacity: 0.9; transform: scale(1.07); } }
.g-ahead .hct {
  position: relative;
  padding: 0 20px;
}
.g-ahead .sup {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.g-ahead .sl2 {
  flex: 1;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
.g-ahead .fr {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 11px;
  line-height: 14px;
  color: var(--ink4);
}
.g-ahead .cz {
  margin-top: 32px;
}
.g-ahead .band {
  margin-top: 16px;
  border-bottom: 1px solid var(--line);
}
.g-ahead .brow {
  border-top: 1px solid var(--line);
  padding: 16px 0;
}
.g-ahead .bhd {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.g-ahead .bhd svg {
  align-self: center;
}
.g-ahead .bn {
  flex: 1;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
}
.g-ahead .bam {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.g-ahead .bam b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.g-ahead .bam span {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
.g-ahead .cs {
  width: 16px;
  flex: none;
}
.g-ahead .bbr {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.g-ahead .btk {
  flex: 1;
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--track);
}
.g-ahead .bfl {
  display: block;
  height: 100%;
  transform-origin: 0 50%;
}
.g-ahead .bfl.b1 {
  background: rgba(244, 241, 234, 0.55);
}
.g-ahead .bfl.b2 {
  background: rgba(244, 241, 234, 0.32);
}
.g-ahead .bfl.b3 {
  background: repeating-linear-gradient(
    135deg,
    rgba(244, 241, 234, 0.32) 0 1.5px,
    rgba(244, 241, 234, 0) 1.5px 3.6px
  );
}
.g-ahead .bpc {
  width: 34px;
  text-align: right;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
}
.g-ahead .bmt {
  margin-top: 12px;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
.g-ahead .sh {
  padding: 24px 0 8px;
}
.g-ahead .rr {
  min-height: 68px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.g-ahead .tile {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--raise2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  flex: none;
}
.g-ahead .rm {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.g-ahead .rn {
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
}
.g-ahead .rd {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
.g-ahead .rf {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.g-ahead .rf b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.g-ahead .rf span {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}

/* ---------- Cash flow ---------- */
.g-ahead .cfh {
  padding: 20px 0 8px;
}
.g-ahead .lines {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.g-ahead .lines span {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink2);
}
.g-ahead .notes {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.g-ahead .notes p {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink2);
}
.g-ahead .zone {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.g-ahead .zone > .hd {
  min-height: 24px;
  display: flex;
  align-items: center;
}
.g-ahead .cal {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.g-ahead .chd {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.g-ahead .cn {
  width: 40px;
  height: 44px;
  display: grid;
  place-items: center;
}
.g-ahead .chd b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
}
.g-ahead .mx {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.g-ahead .wk {
  display: flex;
}
.g-ahead .wk span {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.12em;
  color: var(--ink4);
}
.g-ahead .grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.g-ahead .cc {
  position: relative;
  height: 44px;
  display: grid;
  place-items: center;
}
.g-ahead .cc.sel {
  background: var(--ink);
  border-radius: 999px;
}
.g-ahead .dn {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 13px;
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
}
.g-ahead .cc.faint .dn {
  color: var(--ink4);
}
.g-ahead .cc.sel .dn {
  font-weight: 600;
  color: var(--canvas);
}
.g-ahead .mk {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 3px;
}
.g-ahead .mk i {
  width: 4px;
  height: 4px;
  border-radius: 2px;
}
.g-ahead .lg {
  padding-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.g-ahead .lg span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink2);
}
.g-ahead .lg i {
  width: 6px;
  height: 6px;
  border-radius: 3px;
}
.g-ahead .dp {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.g-ahead .dph {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.g-ahead .dph span {
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
}
.g-ahead .dph b,
.g-ahead .ef span {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink3);
  font-variant-numeric: tabular-nums;
}
.g-ahead .dpe {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.g-ahead .dpe span {
  font-weight: 500;
  font-size: 13px;
  color: var(--ink2);
}
.g-ahead .dpe b,
.g-ahead .ef b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.g-ahead .ef b.pay {
  color: var(--ai);
}
.g-ahead .er {
  min-height: 64px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.g-ahead .et {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-ahead .en {
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
}
.g-ahead .em {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
.g-ahead .ef {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* ---------- Ways to save ---------- */
.g-ahead .svh {
  position: relative;
  overflow: hidden;
  padding: 16px 0 20px;
}
.g-ahead .saur {
  position: absolute;
  top: -130px;
  left: 50%;
  width: 480px;
  height: 400px;
  margin-left: -240px;
  background:
    radial-gradient(240px 200px at 46% 40%, rgba(127, 158, 196, 0.24), rgba(127, 158, 196, 0.1) 48%, rgba(127, 158, 196, 0) 72%),
    radial-gradient(202px 168px at 60% 54%, rgba(88, 176, 131, 0.14), rgba(88, 176, 131, 0) 70%);
}
.g-ahead .rd {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.g-ahead .f50 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 50px;
  line-height: 56px;
  letter-spacing: -1px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.g-ahead .un {
  font-size: 15px;
  line-height: 20px;
  color: var(--ink3);
}
.g-ahead .sn {
  position: relative;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 21px;
  color: var(--ink2);
}
.g-ahead .sn b {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--pos);
}
.g-ahead .ideas {
  min-height: 64px;
  padding: 12px 0;
  border-top: 1px solid rgba(127, 158, 196, 0.3);
  border-bottom: 1px solid rgba(127, 158, 196, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
}
.g-ahead .im {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(127, 158, 196, 0.14);
  display: grid;
  place-items: center;
  flex: none;
}
.g-ahead .it {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-ahead .it b {
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
}
.g-ahead .it span {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
.g-ahead .th {
  padding: 24px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.g-ahead .spc {
  flex: 1;
  min-width: 12px;
}
.g-ahead .pl {
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 700;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.3px;
}
.g-ahead .pl.pos {
  background: rgba(88, 176, 131, 0.14);
  color: var(--pos);
}
.g-ahead .pl.ai {
  background: rgba(127, 158, 196, 0.14);
  color: var(--ai);
}
.g-ahead .tnote {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.g-ahead .tnote b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink2);
}
.g-ahead .tnote span {
  font-size: 13px;
  color: var(--ink3);
}
.g-ahead .tr {
  min-height: 76px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.g-ahead .gt {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--raise2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  flex: none;
}
.g-ahead .gd {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  border: 2px solid var(--canvas);
}
.g-ahead .tx {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.g-ahead .ttr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.g-ahead .tn {
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
}
.g-ahead .ts {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
.g-ahead .ta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: none;
}
.g-ahead .ta b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
}
.g-ahead .ta span {
  margin-top: 2px;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
.g-ahead .wt {
  padding-top: 16px;
}
.g-ahead .door {
  min-height: 64px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.g-ahead .dm {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--raise2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  flex: none;
}
.g-ahead .dt {
  flex: 1;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
}
.g-ahead .dc {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink2);
}
.g-ahead .foot {
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.g-ahead .how {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.g-ahead .how span,
.g-ahead .scope {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
.g-ahead .scope {
  text-align: center;
}

/* ---------- Money waiting for you ---------- */
.g-ahead .pr {
  margin: 8px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.g-ahead .prh {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.g-ahead .prh b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 46px;
  line-height: 56px;
  font-variant-numeric: tabular-nums;
}
.g-ahead .prh span {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
.g-ahead .sg {
  display: flex;
  gap: 4px;
}
.g-ahead .sg i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--track);
}
.g-ahead .wr {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.g-ahead .wh {
  display: flex;
  align-items: center;
  gap: 8px;
}
.g-ahead .wb {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.g-ahead .wtile {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--raise2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  flex: none;
}
.g-ahead .wm {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-ahead .wm b {
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
}
.g-ahead .wm span {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}
.g-ahead .wo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: none;
}
.g-ahead .ch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.g-ahead .ch span {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink2);
}
.g-ahead .wf {
  margin: 24px 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.g-ahead .wf span {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink3);
}

@media (prefers-reduced-motion: reduce) {
  .g-ahead .aur {
    animation: none;
  }
}