/* ═══════════════════════════════════════════════════════════════════════════
   Gloodoh Budget page (/apps/budget) — the feature tour

   Loaded after apps.css and only by budget.html. It adds, never overrides, the
   site's design system: same tokens, type, buttons and cards, plus Gloodoh
   Budget's "aurora glass" glows and the screenshot rows.

   One idea per section, a short headline, one or two plain sentences and one
   big visual; rows alternate image-left / image-right. Screens show sample data
   for a fictional household (Kuria Jones), never a customer's.
   ═══════════════════════════════════════════════════════════════════════════ */
body.app-budget{
  --gb-grad:linear-gradient(90deg,#0a8466 0%,#2a5fd6 100%);
  --gb-mint:#0b9673; --gb-blue:#2a5fd6; --gb-warm:#ff925c;
  --gb-needs:#4560e0; --gb-save:#0b9673; --gb-wants:#e2622f; --gb-gold:#a86a06;
}
html[data-theme="dark"] body.app-budget{
  --gb-grad:linear-gradient(90deg,#3ddbb0 0%,#5aa9ff 100%);
  --gb-needs:#6b7ff0; --gb-save:#10ab7e; --gb-wants:#e86a3a; --gb-gold:#ffc56b;
}

/* ── aurora: two or three soft glows, never loud ── */
.aurora{position:relative;isolation:isolate;overflow:hidden}
.aurora::before,.aurora::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(8px)}
.aurora::before{width:min(70vw,680px);aspect-ratio:1;left:-14%;top:-22%;
  background:radial-gradient(circle,color-mix(in srgb,var(--gb-mint) 16%,transparent) 0%,transparent 64%)}
.aurora::after{width:min(64vw,620px);aspect-ratio:1;right:-12%;bottom:-26%;
  background:radial-gradient(circle,color-mix(in srgb,var(--gb-blue) 15%,transparent) 0%,transparent 62%),
             radial-gradient(circle at 20% 80%,color-mix(in srgb,var(--gb-warm) 13%,transparent) 0%,transparent 48%)}

/* ── hero: the copy and the three phones ── */
.app-budget .app-hero::before{display:none}
.app-budget .hero-grid{grid-template-columns:1fr 1.05fr}
.app-budget .app-hero h1 .hl{background:var(--gb-grad);-webkit-background-clip:text;background-clip:text}
.hero-visual{margin:0;justify-self:center;width:100%;max-width:640px}
.hero-visual img{display:block;width:100%;height:auto}
.slogan{font-size:13px;color:var(--muted);font-weight:600}
.slogan b{background:var(--gb-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
@media (prefers-reduced-motion:no-preference){
  .hero-visual{animation:gb-rise .9s var(--ease) .1s both}
  @keyframes gb-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

/* ── four strengths ── */
.strengths{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.strength{background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--divider);border-radius:24px;padding:var(--s5);display:flex;flex-direction:column;gap:10px}
.strength .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--gb-grad)}
.strength .ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.strength h3{font-size:17px;font-weight:800;letter-spacing:-.01em}
.strength p{font-size:14.5px;color:var(--on-soft)}

/* ── feature rows ── */
.tour{padding:var(--s9) 0}
.tour.alt + .tour.alt{padding-top:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center}
.row.flip .row-copy{order:2}
.row-copy{display:flex;flex-direction:column;gap:16px;max-width:46ch}
.row-copy h2{font-weight:900;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.025em;line-height:1.1}
.row-copy p{font-size:17px;color:var(--on-soft)}
.mini-steps{list-style:none;counter-reset:ms;display:flex;flex-direction:column;gap:10px;margin-top:4px}
.mini-steps li{counter-increment:ms;display:flex;align-items:center;gap:12px;font-weight:700;font-size:15px}
.mini-steps li::before{content:counter(ms);flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:800;color:#fff;background:var(--gb-grad)}
.shot{margin:0;display:flex;justify-content:center;gap:var(--s4);position:relative}
.shot img{display:block;height:auto;width:min(100%,320px)}
.shot.pair img{width:min(48%,300px)}
.shot.pair img:last-child{margin-top:var(--s7)}
.shot.wide img{width:min(100%,560px)}
.shot.card img{border-radius:24px;box-shadow:0 24px 48px -32px rgba(13,20,36,.35)}
.bucket-key{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;font-weight:700;color:var(--on-soft)}
.bucket-key span{display:inline-flex;align-items:center;gap:7px}
.bucket-key i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* light/dark screenshots: only the one for the current theme loads (lazy + display:none) */
html[data-theme="dark"] .shot .lt,html:not([data-theme="dark"]) .shot .dk{display:none}

/* ── two-up: reminders + the whole year ── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.duo-card{background:var(--surface);border:1px solid var(--divider);border-radius:28px;padding:var(--s6) var(--s6) 0;
  display:flex;flex-direction:column;gap:12px;overflow:hidden}
.duo-card h2{font-size:clamp(22px,2.6vw,28px);font-weight:900;letter-spacing:-.02em;line-height:1.15}
.duo-card p{font-size:15.5px;color:var(--on-soft);max-width:40ch}
.duo-card .shot{margin-top:var(--s4)}
.duo-card .shot img{width:min(78%,280px);margin-bottom:-30%}

/* ── privacy: full width, real weight ── */
.privacy-big{padding:var(--s9) 0}
.privacy-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s8);align-items:center}
.privacy-big h2{font-weight:900;font-size:clamp(30px,4.4vw,52px);letter-spacing:-.03em;line-height:1.05;margin-bottom:var(--s5)}
.privacy-big h2 .hl{background:var(--gb-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.fact{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--divider);border-radius:22px;padding:var(--s5);display:flex;flex-direction:column;gap:8px}
.fact h3{font-size:16px;font-weight:800;display:flex;align-items:center;gap:10px}
.fact h3 svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fact p{font-size:14.5px;color:var(--on-soft)}
.privacy-foot{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;margin-top:var(--s5)}
.privacy-foot .note{font-size:13.5px;color:var(--muted);max-width:52ch}

/* ── Connect: the hand-off graphic ── */
.soon-tag{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 10px;border-radius:var(--r-pill);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.flow{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2.4vw,26px);padding:var(--s6) var(--s4);
  background:var(--surface);border:1px solid var(--divider);border-radius:28px}
.flow-src{display:flex;flex-direction:column;gap:14px}
.flow-app{display:flex;align-items:center;gap:12px;font-weight:800;font-size:15px}
.flow-app img{width:52px;height:52px;border-radius:14px}
.flow-app .chip{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-weight:900;font-size:13px;
  color:var(--on-soft);background:var(--surface-2);border:1.5px dashed var(--field-border)}
.flow-app small{display:block;font-size:11.5px;font-weight:600;color:var(--muted)}
.flow-arrow{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--accent);flex:0 1 140px}
.flow-arrow svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flow-arrow .h{width:100%;max-width:140px;height:40px}
.flow-arrow .v{display:none;width:40px;height:64px}
.flow-arrow span{font-size:11.5px;font-weight:700;color:var(--muted);text-align:center}
.flow-dst{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:800;font-size:14px;text-align:center}
.flow-dst img{width:76px;height:76px;border-radius:20px;box-shadow:0 16px 36px -18px rgba(10,132,102,.7)}

/* ── final call ── */
.final{text-align:center;padding:var(--s9) 0}
.final h2{font-weight:900;font-size:clamp(30px,4.6vw,52px);letter-spacing:-.03em;line-height:1.05;margin-bottom:var(--s5)}
.final .stores{justify-content:center}
.final .slogan{margin-top:var(--s4)}

/* ── questions: native <details>, so they open with JavaScript off ── */
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:860px}
.faq-item{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--divider);border-radius:20px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.faq-item[open]{border-color:color-mix(in srgb,var(--accent) 40%,var(--divider));box-shadow:0 18px 40px -32px rgba(13,20,36,.35)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px var(--s5);border-radius:20px;font-weight:800;font-size:16.5px;letter-spacing:-.01em;line-height:1.35;transition:color .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent)}
.faq-item summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.faq-ico{width:22px;height:22px;flex:none;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.faq-item[open] .faq-ico{transform:rotate(180deg)}
.faq-a{padding:0 var(--s5) var(--s5)}
.faq-a p{font-size:15.5px;color:var(--on-soft);max-width:70ch}
.faq-a a,.faq-mail a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.faq-mail{margin-top:var(--s5);font-size:15px;font-weight:600;color:var(--on-soft)}
@media (prefers-reduced-motion:no-preference){
  .faq-item[open] .faq-a{animation:gb-faq .45s var(--ease)}
  @keyframes gb-faq{from{opacity:0;transform:translateY(-6px)}}
}
.foot-col .foot-mail small{display:block;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--muted)}

/* ── reveal on scroll (budget.js) ──
   Only once the script has run (html.js-reveal) and only on what it marked .rv,
   which is never what was on screen at load: with JavaScript off, or before it
   runs, everything is simply there. Opacity and transform only, rising (never
   sliding sideways), and the same distance and easing as the hero's gb-rise.
   budget.js drops .rv once an element has arrived, so its own hover styles
   take over without the reveal's delay. */
@media (prefers-reduced-motion:no-preference){
  html.js-reveal .rv{transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--rv-d,0ms)}
  html.js-reveal .rv:not(.in){opacity:0;transform:translateY(20px)}
  html.js-reveal .shot.rv:not(.in){transform:translateY(28px) scale(.97)}
}
@media print{ html.js-reveal .rv{opacity:1!important;transform:none!important} }

/* ── hover: only for a mouse or trackpad, never under reduced motion ──
   The screenshots are transparent PNG-style frames, so their shadow is a
   drop-shadow that follows the phone, not a box. Phones also tilt toward the
   pointer (--rx/--ry from budget.js); the wide composites only lift. Transforms
   exist on :hover alone, so twenty idle screenshots never become layers. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero-visual img,.shot img{transition:transform .6s var(--ease),filter .6s var(--ease),box-shadow .6s var(--ease)}
  .hero-visual img:hover,.shot img:hover{
    transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px) scale(1.02);
    filter:drop-shadow(0 22px 24px rgba(13,20,36,.22))}
  html[data-theme="dark"] .hero-visual img:hover,html[data-theme="dark"] .shot img:hover{filter:drop-shadow(0 22px 26px rgba(0,0,0,.55))}
  .shot.card img:hover{filter:none;box-shadow:0 40px 64px -34px rgba(13,20,36,.5)}
  html[data-theme="dark"] .shot.card img:hover{filter:none;box-shadow:0 40px 64px -30px rgba(0,0,0,.8)}
  .hero-visual img.is-tilting,.shot img.is-tilting{will-change:transform;transition-duration:.3s,.6s,.6s}   /* follows the pointer more closely */

  /* the Connect graphic's app tiles */
  .flow-app img,.flow-app .chip,.flow-dst img{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
  .flow-app:hover img,.flow-app:hover .chip,.flow-dst:hover img{transform:translateY(-3px) scale(1.06)}
  .flow-app:hover img{box-shadow:0 14px 26px -14px rgba(13,20,36,.45)}
  .flow-dst:hover img{box-shadow:0 22px 40px -16px rgba(10,132,102,.85)}

  /* cards: a light lift */
  .strength,.fact,.duo-card{transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
  .strength:hover,.fact:hover,.duo-card:hover{transform:translateY(-4px);
    border-color:color-mix(in srgb,var(--accent) 35%,var(--divider));box-shadow:0 24px 44px -30px rgba(13,20,36,.38)}
  html[data-theme="dark"] .strength:hover,html[data-theme="dark"] .fact:hover,html[data-theme="dark"] .duo-card:hover{box-shadow:0 24px 44px -26px rgba(0,0,0,.7)}
}

/* ── focus: always visible ── */
.app-budget a:focus-visible,.app-budget button:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:10px}

/* ── responsive: image first, nothing overflows ── */
@media(max-width:980px){
  .strengths{grid-template-columns:repeat(2,1fr)}
  .privacy-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .app-budget .hero-grid{grid-template-columns:1fr}
  .row,.duo{grid-template-columns:1fr;gap:var(--s6)}
  .row .shot,.row.flip .shot{order:-1}
  .row.flip .row-copy{order:0}
  .tour{padding:var(--s8) 0}
}
@media(max-width:560px){
  .strengths,.facts{grid-template-columns:1fr}
  .shot img{width:min(100%,280px)}
  .shot.pair img{width:min(48%,220px)}
  .duo-card{padding:var(--s5) var(--s5) 0}
  .faq-item summary{padding:16px var(--s4);font-size:15.5px}
  .faq-a{padding:0 var(--s4) var(--s4)}
  .flow{flex-direction:column}
  .flow-arrow{flex-basis:auto}
  .flow-arrow .h{display:none}
  .flow-arrow .v{display:block}
}