:root {
  color-scheme: dark;
  --bg: #090f1d;
  --bg-soft: #0f1728;
  --panel: #182235;
  --panel-strong: #202c41;
  --text: #f8fbff;
  --muted: #aeb8c8;
  --quiet: #7e8aa0;
  --line: rgba(255, 255, 255, 0.11);
  --blue: #3f7df6;
  --cyan: #4ed3df;
  --red: #ff494f;
  --green: #7bd9a3;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
  --radius: 24px;
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  /* Decorative blurred glows intentionally bleed past their boxes; clip so they
     never produce a horizontal scrollbar. `clip` (not `hidden`) keeps the
     viewport as the scrollport so the sticky header still works. */
  overflow-x: clip;
  background:
    radial-gradient(circle at 78% 0%, rgba(63, 125, 246, 0.24), transparent 36rem),
    radial-gradient(circle at 8% 30%, rgba(78, 211, 223, 0.13), transparent 24rem),
    linear-gradient(180deg, #0a1120 0%, var(--bg) 42%, #070b14 100%);
  color: var(--text);
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.11;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  transform: translateY(-160%);
  background: var(--text);
  color: var(--bg);
  padding: .7rem 1rem;
  border-radius: 8px;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(9, 15, 29, 0.78);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.nav {
  width: min(1180px, calc(100% - 40px));
  min-height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.brand img {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 700;
}

.nav-links a:hover {
  color: var(--text);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 850;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0) scale(.99);
}

.button.primary {
  background: var(--blue);
  color: white;
  box-shadow: 0 18px 42px rgba(63, 125, 246, .28);
}

.button.secondary {
  border-color: var(--line);
  background: rgba(255, 255, 255, .05);
}

.store-button {
  gap: 10px;
}

.play-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 5px;
  background:
    linear-gradient(145deg, #41e1a5 0 35%, transparent 35%),
    linear-gradient(35deg, #34a4ff 0 48%, transparent 48%),
    linear-gradient(325deg, #ffd34d 0 48%, transparent 48%),
    linear-gradient(215deg, #ff5f58 0 54%, transparent 54%);
  clip-path: polygon(14% 5%, 92% 50%, 14% 95%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.hero {
  min-height: calc(100dvh - 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  padding: clamp(54px, 8vw, 100px) 0 48px;
}

.hero > :first-child {
  min-width: 0;
  align-self: center;
}

.eyebrow {
  color: var(--cyan);
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: 0;
  text-wrap: balance;
}

h1 {
  max-width: 850px;
  margin-top: 18px;
  font-size: clamp(3.2rem, 7vw, 6.2rem);
  line-height: .88;
  font-weight: 950;
  overflow-wrap: break-word;
}

h2 {
  font-size: clamp(2.1rem, 4.6vw, 4.7rem);
  line-height: .95;
  font-weight: 950;
  /* Section titles set their own breathing room. `em` here resolves against
     the heading's own font-size, so the gap scales with the display type
     instead of each section inventing its own margin. The floor keeps small
     mobile headings from crowding the cards. Sibling margins collapse, so
     this is the single source of truth for the gap. */
  margin-bottom: max(28px, .62em);
}

/* No trailing gap when the heading ends its box (e.g. the CTA panel). */
h2:last-child {
  margin-bottom: 0;
}

h3 {
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.12;
  font-weight: 900;
}

.lead {
  max-width: 670px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(1.1rem, 1.8vw, 1.34rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-column: 1 / -1;
  gap: 16px;
  margin-top: clamp(4px, 1vw, 14px);
}

.proof div {
  position: relative;
  min-height: 210px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.035)),
    rgba(255, 255, 255, .045);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.proof div::after {
  content: "";
  position: absolute;
  inset: auto -18% -46% 34%;
  height: 170px;
  border-radius: 50%;
  background: rgba(78, 211, 223, .1);
  filter: blur(4px);
}

.proof strong {
  display: block;
  position: relative;
  z-index: 1;
  margin-top: auto;
  font-size: clamp(1.45rem, 2.4vw, 2.05rem);
  line-height: 1.08;
}

.proof span {
  position: relative;
  z-index: 1;
  color: var(--quiet);
  font-size: .95rem;
  font-weight: 700;
}

.proof-icon {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.065);
}

.ai-icon::before,
.ai-icon::after {
  content: "";
  position: absolute;
  border-radius: 999px;
}

.ai-icon::before {
  inset: 16px;
  border: 2px solid var(--cyan);
}

.ai-icon::after {
  width: 8px;
  height: 8px;
  left: 28px;
  top: 28px;
  background: var(--cyan);
  box-shadow:
    0 -22px 0 -2px var(--blue),
    22px 0 0 -2px var(--green),
    0 22px 0 -2px var(--blue),
    -22px 0 0 -2px var(--green);
}

.alert-icon::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 13px;
  width: 22px;
  height: 28px;
  border: 2px solid var(--green);
  border-radius: 16px 16px 10px 10px;
  background: rgba(123,217,163,.1);
}

.alert-icon::after {
  content: "";
  position: absolute;
  left: 27px;
  bottom: 14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 -29px 0 -3px var(--green);
}

.analytics-icon {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 5px;
  padding: 15px;
}

.analytics-icon::before,
.analytics-icon::after {
  content: "";
}

.analytics-icon,
.analytics-icon::before,
.analytics-icon::after {
  background-repeat: no-repeat;
}

.analytics-icon::before,
.analytics-icon::after,
.analytics-icon {
  --bar: linear-gradient(var(--blue), var(--blue));
}

.analytics-icon::before {
  height: 18px;
  border-radius: 5px 5px 3px 3px;
  background: var(--cyan);
}

.analytics-icon::after {
  height: 34px;
  border-radius: 5px 5px 3px 3px;
  background: var(--green);
}

.phone-stage {
  position: relative;
  justify-self: center;
  width: min(100%, 480px);
}

.phone-stage::before {
  content: "";
  position: absolute;
  /* Stay inside the stage box: a negative right inset overflowed the grid
     column and pushed a horizontal scrollbar onto the page around 1265px. */
  inset: 8% 0 8% 8%;
  border-radius: 42px;
  background: linear-gradient(135deg, rgba(63, 125, 246, .38), rgba(78, 211, 223, .1));
  filter: blur(44px);
}

.phone-stage img {
  position: relative;
  width: min(100%, 420px);
  margin-left: auto;
  border-radius: 40px;
  box-shadow: var(--shadow);
}

section {
  padding: clamp(70px, 9vw, 130px) 0;
}

.section-kicker {
  margin-bottom: 16px;
}

.split {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(28px, 6vw, 82px);
  align-items: start;
}

.section-copy {
  position: sticky;
  top: 116px;
}

.section-copy p,
.card p,
.article-card p,
.legal p,
.legal li {
  color: var(--muted);
  line-height: 1.7;
  text-wrap: pretty;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.card,
.article-card,
.legal-block {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .035));
  border-radius: var(--radius);
}

.card {
  padding: clamp(22px, 3vw, 34px);
}

.card.wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr .85fr;
  gap: 24px;
  align-items: center;
}

.card img {
  max-height: 560px;
  margin: 0 auto;
  border-radius: 34px;
  box-shadow: var(--shadow);
}

.tag {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.step {
  min-height: 410px;
  padding: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .035));
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.step-visual {
  position: relative;
  min-height: 176px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(63,125,246,.22), rgba(78,211,223,.08)),
    rgba(255,255,255,.05);
}

.step-number {
  display: block;
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  color: var(--cyan);
  font-weight: 950;
  font-size: .82rem;
}

.mail-stack {
  position: absolute;
  inset: 42px 26px 22px;
}

.mail-stack i {
  position: absolute;
  width: 78%;
  height: 54px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  background:
    linear-gradient(145deg, transparent 48%, rgba(78,211,223,.32) 49% 51%, transparent 52%),
    linear-gradient(215deg, transparent 48%, rgba(63,125,246,.38) 49% 51%, transparent 52%),
    rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.2);
}

.mail-stack i:nth-child(2) {
  top: 42px;
  transform: translateX(-50%) rotate(3deg);
}

.mail-stack i:nth-child(3) {
  top: 84px;
  transform: translateX(-50%) rotate(-1deg);
}

.calendar-visual img {
  position: absolute;
  width: 70%;
  max-width: 210px;
  right: -8px;
  bottom: -38px;
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.alert-card {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 30px;
  padding: 18px;
  border: 1px solid rgba(123,217,163,.35);
  border-radius: 16px;
  background: rgba(123,217,163,.13);
}

.alert-card::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 72%, var(--green) 0 3px, transparent 4px),
    linear-gradient(var(--green), var(--green)) 50% 28% / 3px 22px no-repeat,
    rgba(123,217,163,.16);
  border: 1px solid rgba(123,217,163,.42);
}

.alert-card strong,
.alert-card small {
  display: block;
}

.alert-card small {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.article-card {
  padding: 26px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-logo-row {
  min-height: 58px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
}

.service-logo {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 950;
}

.anthropic-logo {
  background: #d9c8b0;
  color: #17120e;
}

.openai-logo {
  background: #0f1716;
  color: #f4fff9;
  font-size: 1.8rem;
}

.github-logo {
  background: #f6f8fa;
  color: #111820;
  letter-spacing: 0;
}

.article-card a {
  color: var(--cyan);
  font-weight: 900;
}

.cta {
  padding: clamp(38px, 6vw, 70px);
  border: 1px solid rgba(78, 211, 223, .3);
  background:
    linear-gradient(135deg, rgba(63, 125, 246, .34), rgba(78, 211, 223, .08)),
    rgba(255, 255, 255, .05);
  border-radius: 34px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 38px 0;
  color: var(--quiet);
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.legal {
  max-width: 860px;
  padding: 64px 0 100px;
}

.legal h1 {
  font-size: clamp(2.8rem, 7vw, 5.5rem);
}

.legal h2 {
  margin-top: 42px;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.1;
}

.legal-block {
  padding: 24px;
  margin: 24px 0;
  overflow-x: auto;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
}

.legal th,
.legal td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal th {
  color: var(--text);
}

.article-body {
  max-width: 760px;
  padding: 64px 0 100px;
}

.article-body h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
}

.article-body h2 {
  margin-top: 42px;
  font-size: clamp(1.45rem, 3vw, 2.05rem);
}

.article-body p,
.article-body li {
  color: var(--muted);
  line-height: 1.75;
  font-size: 1.04rem;
}

.article-body ol,
.article-body ul {
  padding-left: 1.25rem;
}

.note {
  padding: 18px 20px;
  border-left: 3px solid var(--cyan);
  background: rgba(78, 211, 223, .08);
  color: var(--muted);
}

@media (max-width: 880px) {
  .nav {
    min-height: 66px;
  }

  .nav-links a:not(.button) {
    display: none;
  }

  .hero,
  .split,
  .card.wide,
  .cta {
    grid-template-columns: 1fr;
  }

  .section-copy {
    position: static;
  }

  .feature-grid,
  .steps,
  .blog-grid,
  .proof {
    grid-template-columns: 1fr;
  }

  .phone-stage img {
    margin: 0 auto;
  }
}

@media (max-width: 520px) {
  .container,
  .nav {
    width: min(100% - 28px, 1180px);
  }

  .brand span {
    font-size: .98rem;
  }

  .button {
    width: 100%;
  }

  .nav .button {
    width: auto;
    min-height: 40px;
    padding: 0 12px;
  }

  /* "Subscription" is the longest word and measures ~6.38x the font-size.
     The container here is 100vw - 28px, so anything above ~15.6vw overflows.
     14vw keeps the longest word inside the container from 320px up. */
  h1 {
    font-size: clamp(2.2rem, 14vw, 4rem);
  }
}

/* Smallest phones: the brand lockup and the nav CTA compete for a ~292px row,
   which pushed the "Spendloop" wordmark out of its own link. Tighten the mark
   so both fit instead of letting the text overflow. */
@media (max-width: 360px) {
  .nav {
    gap: 10px;
  }

  .brand {
    gap: 8px;
    min-width: 0;
  }

  .brand img {
    width: 32px;
    height: 32px;
  }

  .brand span {
    font-size: .9rem;
  }

  .nav .button {
    flex: none;
  }
}

/* Touch targets: inline text links sit at ~22px tall, below the ~44px
   comfortable minimum. Pad them out on touch-sized screens only, so the
   desktop layout keeps its tighter rhythm. */
@media (max-width: 640px) {
  /* Standalone links only. Links inside running prose are deliberately left
     alone — forcing a 44px box on them inflates the line height of the
     paragraph they sit in, and WCAG exempts inline links in sentences. */
  .article-card a,
  .footer-links a,
  .legal > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer-links {
    gap: 8px 18px;
  }
}