/* PDA landing page. Static, no build. Dark only, like the app.
   One accent: the brand gradient (teal left, lime right). It appears on the
   primary buttons, two headline words and the Recap icon, nowhere else.
   Radius rule: buttons and pills are full-pill, cards 20px, screenshots 12px. */

@font-face {
  font-family: "Google Sans";
  src: url("assets/fonts/google-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000000;
  --surface: #0e0e0e;
  --surface-2: #131313;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);
  --text: #ededed;
  --muted: #8d8d8d;
  --dim: #5e5e5e;
  /* The brand gradient: the logo's (Alexander, 10 Oct 2026, MAIN.svg), green
     on the left, cyan on the right. It was teal #01C2D2 -> lime #A5E44D, from
     the first app icon. The names stayed: --lime is the green end, --teal the
     cyan one. */
  --teal: #1cb9cb;
  --lime: #82e546;
  --grad: linear-gradient(90deg, var(--lime) 0%, var(--teal) 100%);
  --font: "Google Sans", ui-sans-serif, system-ui, sans-serif;
  --wrap: 1180px;
  --gutter: 24px;
  --r-card: 28px;
  /* The app card surface, value for value (app/globals.css, the lit
     surfaces): light falling from the top left, a fine grain over it. */
  --lit-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  --lit-face: linear-gradient(150deg, #161616 0%, #0d0d0d 45%, #060606 100%);
  --lit-face-hover: linear-gradient(150deg, #1b1b1b 0%, #111 45%, #090909 100%);
  --lit-drop: 0 2px 6px rgb(0 0 0 / 0.6), 0 10px 24px -10px rgb(0 0 0 / 0.9);
  /* The app's fall of light, laid over the gradient as a veil. */
  --sheen: linear-gradient(150deg, rgb(255 255 255 / 0.18) 0%, rgb(255 255 255 / 0) 45%, rgb(0 0 0 / 0.16) 100%);
  --sheen-hover: linear-gradient(150deg, rgb(255 255 255 / 0.3) 0%, rgb(255 255 255 / 0.05) 45%, rgb(0 0 0 / 0.08) 100%);
  --r-shot: 12px;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* An anchor stops below the sticky bar (76px on a desktop) with room to spare. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }

/* The page's own scrollbar: a thin rounded thumb, no track, no arrows
   (Alexander, 9 Oct 2026). Chrome, Edge and Safari take the pseudo-elements;
   Firefox, which has none, gets the closest it allows. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / 0.14) padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background-color: rgb(255 255 255 / 0.28); }
::-webkit-scrollbar-button, ::-webkit-scrollbar-corner { display: none; background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.2) transparent; }
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

.ic { width: 1em; height: 1em; flex: none; fill: currentColor; }
.ic--grad { fill: url(#grad-fill); }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* room for the q's descender, which background-clip would cut */
  padding-bottom: 0.1em;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 24px;
  border-radius: 999px;
  font: 600 15px/1 var(--font);
  white-space: nowrap;
  transition: transform 0.15s var(--ease), filter 0.2s, background-color 0.2s, border-color 0.2s;
}
.btn:active { transform: scale(0.98); }
.btn .ic { width: 16px; height: 16px; }
/* The CTA (Alexander, 9 Oct 2026): a white pill, the label and arrow black
   and bold. On hover the gradient runs over the white from the left end to
   the right and the white stays under it; leaving, it runs back. (It was a
   ring with a gradient label, then a white ring, the same day.) A clip that
   opens rather than a scale, so the rounded ends stay round throughout. */
.btn--primary {
  /* One rounding for the button and the fill that runs over it. */
  --btn-round: 999px;
  border-radius: var(--btn-round);
  position: relative;
  isolation: isolate;
  font-weight: 700;
  color: #050505;
  background: var(--text);
}
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--grad);
  pointer-events: none;
  clip-path: inset(0 100% 0 0 round var(--btn-round));
  transition: clip-path 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn--primary:hover::after { clip-path: inset(0 0 0 0 round var(--btn-round)); }
.btn--primary .ic { fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .btn--primary::after { clip-path: none; opacity: 0; transition: opacity 0.2s; }
  .btn--primary:hover::after { opacity: 1; }
}
@media (forced-colors: active) {
  .btn--primary { color: ButtonText; background: none; border: 2px solid ButtonText; }
  .btn--primary::after { display: none; }
}
.btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }

.micro { margin-top: 6px; font-size: 10px; color: var(--muted); }
.cta { display: flex; flex-direction: column; align-items: flex-start; }
.cta--section { margin-top: 48px; align-items: center; }
.cta--center { align-items: center; }

/* Navigation */
.top-sentinel { position: absolute; top: 0; height: 24px; width: 1px; }
.nav {
  position: sticky; top: 0; z-index: 50;
  /* No line under the bar, scrolled or not (Alexander, 9 Oct 2026). */
}
/* Scrolled, the bar darkens and blurs what passes under it, and that ground
   runs 40px past its foot and fades out there instead of ending on an edge
   (Alexander, 9 Oct 2026). A layer of its own, so the fade can mask the blur
   as well as the colour; it takes no clicks. */
.nav::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 0 0 -40px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  -webkit-mask: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
  mask: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
  opacity: 0;
  transition: opacity 0.25s;
}
.nav.is-scrolled::before { opacity: 1; }
/* 20px above and below the logo (Alexander, 9 Oct 2026; a fixed 64px
   before): the bar is as tall as its content makes it, 76px on a desktop
   (the 36px button the tallest thing in it). */
.nav__inner { display: flex; align-items: center; padding-block: 20px; gap: 24px; }
/* The logo: the mark and PDA (Alexander, 10 Oct 2026; his MAIN.svg,
   1055x390, 2.7:1, 34px high. The wordmark alone until then, then for a while with "Live
   conscious" at 55px). It never shrinks: squeezed, it went out of proportion. */
.nav__brand { display: flex; flex: none; }
.nav__brand img { height: 34px; width: auto; }
/* Links to other pages, never to sections of this one (Alexander, 9 Oct 2026). */
.nav__links { margin-left: auto; display: flex; gap: 24px; font-size: 14px; color: var(--muted); }
.nav__links a { transition: color 0.2s; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--text); }
.nav__login { transition: color 0.2s; }
.nav__login:hover { color: var(--text); }
.nav__actions { display: flex; align-items: center; gap: 24px; font-size: 14px; color: var(--muted); }

/* Hero */
/* The hero scales with the window height, so on a short laptop screen the
   whole text block, CTA included, sits in the first view. --hv is the height
   of the phone stage; the phones are sized from it. */
.hero { --hv: clamp(440px, calc(100dvh - 150px), 640px); padding: clamp(24px, 6dvh, 72px) 0 96px; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.hero__title {
  font-size: clamp(44px, min(6.4vw, 11dvh), 84px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 11ch;
  /* Set like the line under it (Alexander, 9 Oct 2026): the lead in the
     description's grey, the point in the text colour, where the gradient
     was. One line for "you won't quit." still. */
  color: #7a7a7a;
}
.hero__title-em { display: inline-block; color: var(--text); }
/* Each word of it lights up in the gradient on its own, under the pointer,
   and goes back to white when the pointer leaves (Alexander, 9 Oct 2026):
   the gradient lies under the letters all the time, clipped to them, and
   only the white over it fades, in 100ms. */
.hero__word {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--text);
  transition: color 0.1s ease-out;
}
.hero__word:hover { color: transparent; }
.hero__sub { margin-top: 28px; max-width: 30ch; font-size: clamp(18px, 1.7vw, 22px); }

/* As wide as its button, so the line under it centres on the button. */
.hero .cta { margin-top: 36px; }
/* The hero's button nearly square on its left, flush with the text column
   above it (Alexander, 9 Oct 2026; 5px corners there, at first 0). The right
   end is half the 48px height, not 999px: radii that add up to more than the
   box are all scaled down together, and 999px took the 5px down to nothing. */
.hero .btn--primary { --btn-round: 5px 24px 24px 5px; }
/* The tilted outer phones reach past the screen edge on a phone; cut there,
   not scrolled to. */
.hero { overflow-x: clip; }

/* The group sits a little left of its column (Alexander, 9 Oct 2026). */
.hero__visual { position: relative; height: var(--hv); left: -56px; }
.hero__glow {
  position: absolute; inset: 12% 4% 8% 16%;
  background: radial-gradient(closest-side, rgba(28, 185, 203, 0.22), rgba(130, 229, 70, 0.1) 55%, transparent);
  filter: blur(30px);
}
.phone {
  position: absolute;
  width: 290px; aspect-ratio: 390 / 844;
  border-radius: 46px;
  padding: 4.5px;
  background: linear-gradient(160deg, #2a2a2a, #121212 40%, #0c0c0c);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -20px rgba(0, 0, 0, 0.9), 0 20px 40px -20px rgba(28, 185, 203, 0.15);
}
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 41.5px; }
/* Three phones: Habits in front in the middle, Finances behind on the left
   tilted left, Health behind on the right tilted right — the left one
   mirrored (Alexander, 9 Oct 2026). */
.phone--front { left: 50%; top: 0; z-index: 2; width: calc(var(--hv) * 0.453); transform: translateX(-50%); }
/* Depth: the front phone casts a shadow onto the two behind it, to both sides
   and below (Alexander, 9 Oct 2026), and a very soft one: four layers each
   wider and fainter than the last, so it fades into the phones behind with no
   edge anywhere. Painted above them (z-index 2), so it darkens their inner
   edges. The frame's hairline stays first. */
.phone--front {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.28),
    0 12px 32px rgba(0, 0, 0, 0.28),
    0 24px 72px rgba(0, 0, 0, 0.32),
    0 40px 140px 10px rgba(0, 0, 0, 0.42);
}
.phone--back { top: calc(var(--hv) * 0.1); width: calc(var(--hv) * 0.39); opacity: 0.55; filter: saturate(0.7); }
.phone--left { left: 4%; transform: rotate(-6deg); }
.phone--right { right: 4%; transform: rotate(6deg); }

/* Sections */
.section { padding: 120px 0; }
/* Text blocks sit centred on the page but read left-aligned. Intro paragraphs
   are semibold in two tones: the lead phrase bright, the rest muted. */
.section__head { max-width: 880px; margin: 0 auto 64px; }
.section__head h1, .section__head h2, .why h2, .closing h2 {
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.section__head p, .why p, .hero__sub {
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: #7a7a7a;
}
.section__head p strong, .why p strong, .hero__sub strong { font-weight: 600; color: var(--text); }
.section__head p { margin-top: 28px; font-size: clamp(19px, 1.9vw, 24px); }

/* Demo */
.demo { display: grid; grid-template-columns: 1fr 1.25fr; gap: 20px; }
.demo__before, .demo__after {
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 32px;
}
.demo__before { background: var(--surface); }
.demo__after {
  background: linear-gradient(180deg, #121212, #0d0d0d);
  border-color: var(--line-strong);
  position: relative;
}
.demo__label { font-size: 13px; color: var(--dim); margin-bottom: 20px; }
.juggle li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.juggle span { color: #9a9a9a; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.25); }
.juggle em { font-style: normal; color: var(--dim); font-size: 13px; text-align: right; }
.demo__verdict { margin-top: 24px; font-size: 15px; color: var(--muted); }
.demo__verdict--after { color: var(--text); }

.prompt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line-strong); border-radius: 16px;
  background: #0a0a0a;
  min-height: 82px;
}
.prompt__spark { width: 20px; height: 20px; margin-top: 3px; fill: url(#grad-fill); }
.prompt__text { font-size: 18px; line-height: 1.5; }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.18em; background: var(--text); animation: blink 1s steps(1) infinite; }
.demo__after.is-done .caret { opacity: 0; animation: none; }
@keyframes blink { 50% { opacity: 0; } }

.results { margin-top: 18px; display: grid; gap: 8px; }
.result {
  display: grid; grid-template-columns: 128px 1fr auto; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2);
  font-size: 15px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.result.is-shown { opacity: 1; transform: none; }
.result__mod { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.result__mod .ic { width: 16px; height: 16px; }
.result__val { font-variant-numeric: tabular-nums; font-weight: 600; }
.result__val--done {
  font-size: 12px; font-weight: 600; color: #050505;
  background: var(--grad); border-radius: 999px; padding: 3px 10px;
}
.demo__after .demo__verdict--after { opacity: 0; transition: opacity 0.5s var(--ease) 0.2s; }
.demo__after.is-done .demo__verdict--after { opacity: 1; }

/* Modules bento: 12 columns */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.tile {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.3s;
}
.tile:hover { border-color: var(--line-strong); }
.tile__copy { padding: 28px 28px 0; }
.tile h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.tile h3 .ic { width: 18px; height: 18px; color: var(--muted); }
.tile__copy p { margin-top: 8px; font-size: 15px; color: var(--muted); max-width: 42ch; }
/* Each screenshot is the app card itself, corners transparent, so it sits in
   the tile without a frame. It hangs at the bottom of the tile. */
.shot { margin: auto 0 0; padding: 24px 28px 28px; }
.shot img { width: 100%; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); }

.tile--recap { grid-column: span 12; background: linear-gradient(180deg, #111, #0c0c0c); border-color: var(--line-strong); }
.tile--recap .tile__copy { padding: 36px 36px 0; }
.tile--recap h3 { font-size: 24px; }
.tile--recap h3 .ic { width: 22px; height: 22px; }
.tile--recap .tile__copy p { font-size: 17px; max-width: 56ch; }
.tile--recap .shot { padding: 28px 36px 36px; }

.tile--a { grid-column: span 7; }
.tile--b { grid-column: span 5; }
.tile--half { grid-column: span 6; }

.tile--text { justify-content: space-between; }
/* A whole tile opens its module on the product page: the heading's link is
   stretched over the tile. The arrow in the corner says so, and only brightens. */
.tile__link { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.tile__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tile__link:focus-visible { outline: none; }
.tile:has(.tile__link:focus-visible) { outline: 2px solid var(--lime); outline-offset: 3px; }
.tile__more { margin-left: auto; width: 16px !important; height: 16px !important; color: var(--dim) !important; transition: color 0.2s; }
.tile:hover .tile__more { color: var(--text) !important; }
.tile__big {
  padding: 28px;
  font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em;
  color: #cfcfcf;
}

/* Privacy */
.promises { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.promise {
  grid-column: span 2;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface);
  padding: 28px;
}
.promise--lead { grid-column: span 6; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: start; padding: 36px; border-color: var(--line-strong); background: linear-gradient(180deg, #111, #0c0c0c); }
.promise--lead .ic { grid-row: span 2; width: 32px; height: 32px; fill: url(#grad-fill); }
.promise--lead h3 { font-size: 24px; }
.promise--lead p { max-width: 60ch; }
.promise:nth-child(2), .promise:nth-child(3) { grid-column: span 3; }
.promise .ic { width: 22px; height: 22px; color: var(--muted); }
.promise h3 { margin-top: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.promise--lead h3 { font-size: 24px; letter-spacing: -0.02em; }
.promise--lead p { font-size: 16px; }
.promise:not(.promise--lead) h3 { margin-top: 18px; }
.promise p { margin-top: 6px; font-size: 15px; color: var(--muted); }
.promises li:nth-child(4), .promises li:nth-child(5) { grid-column: span 3; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 380px)); gap: 16px; justify-content: center; align-items: stretch; }
.plan {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface);
  padding: 32px;
}
.plan--pro { position: relative; }
.plan h3 { font-size: 18px; font-weight: 600; }
.plan__price { margin-top: 12px; color: var(--muted); font-size: 15px; }
.plan__price span { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.plan ul { margin: 24px 0 32px; display: grid; gap: 12px; flex: 1; align-content: start; }
.plan li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: #cfcfcf; }
.plan li .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--muted); }
/* "Most popular": the gradient as a background with black text, sitting on the card edge */
.plan__badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  padding: 4px 12px; border-radius: 999px;
  background: var(--grad); color: #050505;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.plan__soon {
  display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--muted);
  font-size: 11px; font-style: normal; font-weight: 500; vertical-align: 1px; white-space: nowrap;
}
.plan .btn { justify-content: center; }
.plan .micro { text-align: center; }

/* Why */
.why__inner { max-width: calc(880px + var(--gutter) * 2); }
.why p { margin-top: 28px; font-size: clamp(19px, 1.9vw, 24px); }

/* Closing */
/* Closing (Alexander, 9 Oct 2026): two radial glows from the top centre,
   green toward the bottom-left corner and cyan toward the bottom-right (the
   logo's order since 10 Oct; it was cyan left, lime right), with a
   black veil over them from the top down. The glows meet in a line straight
   down the middle; the button sits on that line, at its middle, which is the
   middle of the section. So the button alone is centred, and the heading
   and the line under it are hung above and below it, out of the flow. */
.closing {
  position: relative; overflow: hidden; isolation: isolate;
  /* The footer half as far below the content as it was (Alexander, 9 Oct
     2026), the content where it was. The button is centred, so the room
     under the line below it is half the height less 46px (half the button
     and the line under it, measured); half of that comes off the bottom, and as much padding
     at the top keeps the centre in place. */
  --h: clamp(560px, 82vh, 820px);
  --cut: calc(var(--h) / 4 - 23px);
  min-height: calc(var(--h) - var(--cut));
  padding-top: var(--cut);
  display: grid; place-items: center;
  background: var(--bg);
  /* The glows and their veil together, lower against the heading and the
     button, which stay where they are: the light rises like a horizon under
     the heading rather than a dome from the top (Alexander, 9 Oct 2026). */
  --drop: 255px;
}
.closing::before,
.closing::after {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  /* A square centred --drop below the section's top centre, so the glow
     can fade out on every side; what lies above the section is cut off. (Its
     far end was made 200px longer for a while on 9 Oct 2026; that flattened
     the curve, and the shape went back to this one.) */
  left: 50%; top: var(--drop);
  width: 180vmax; height: 180vmax;
  margin: -90vmax 0 0 -90vmax;
  background: radial-gradient(ellipse 18% 50% at 50% 50%, var(--glow) 0%, transparent 100%);
}
/* Rotated so each long axis runs from the top centre toward its corner. */
.closing::before { --glow: rgb(130 229 70 / 0.34); transform: rotate(38deg); }
.closing::after { --glow: rgb(28 185 203 / 0.42); transform: rotate(-38deg); }
/* The veil over the glows, black at the top fading out downward: moved
   down with them by --drop, black above it. */
.closing__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #000 0, #000 var(--drop), rgb(0 0 0 / 0.55) calc(var(--drop) + 45%), rgb(0 0 0 / 0) calc(var(--drop) + 100%));
}
.closing__inner { position: relative; text-align: center; }
.closing h2 {
  position: absolute; left: 50%; bottom: calc(100% + 32px); transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 2 * var(--gutter));
  font-size: clamp(40px, 6vw, 76px); letter-spacing: -0.04em;
}
.closing .cta { position: relative; margin: 0; }
.closing .micro { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* Cards, styled as the app styles them: no border, the lit face with its
   grain, a hairline of light along the top, 28px corners, a little lighter
   and 1% smaller on hover. The shadow is cast by each group of cards as a
   whole, as in the app: one drop-shadow per card overlaps in the gaps. */
.tile, .demo__before, .demo__after, .promise, .plan {
  background: var(--lit-grain), var(--lit-face);
  border: 0;
  border-radius: var(--r-card);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07);
  transition: scale 300ms var(--ease);
}
.tile:hover, .demo__before:hover, .demo__after:hover, .promise:hover, .plan:hover {
  background: var(--lit-grain), var(--lit-face-hover);
  scale: 0.99;
}
.demo, .bento, .promises, .plans { filter: drop-shadow(0 12px 16px rgb(0 0 0 / 0.75)); }
/* Pro keeps its gradient edge (the "Most popular" card), drawn as a border
   round the same lit face, in the logo's gradient, left to right
   (Alexander, 14 Oct 2026; was 135°). */
.plan--pro, .plan--pro:hover {
  border: 1px solid transparent;
  background:
    var(--lit-grain) padding-box,
    var(--lit-face) padding-box,
    linear-gradient(90deg, rgb(130 229 70 / 0.7), rgb(28 185 203 / 0.7)) border-box;
}
.plan--pro:hover {
  background:
    var(--lit-grain) padding-box,
    var(--lit-face-hover) padding-box,
    linear-gradient(90deg, rgb(130 229 70 / 0.7), rgb(28 185 203 / 0.7)) border-box;
}

/* ── Product page (/product) ── */
.product-head { padding-top: 72px; padding-bottom: 32px; }
.product-head .section__head { margin-bottom: 40px; }
.mod-index { display: flex; flex-wrap: wrap; gap: 8px; max-width: 880px; margin: 0 auto; padding: 0 var(--gutter); }
.mod-index a {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: 999px;
  background: var(--lit-grain), var(--lit-face);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07);
  font-size: 13px; color: #c4c4c4; transition: color 0.2s;
}
.mod-index a:hover { color: var(--text); }
.mod-index .ic { width: 14px; height: 14px; color: var(--muted); }
.mod { padding: 96px 0; }
/* The assistant: copy beside its example. */
.mod__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
/* A module: what it is on the left, what it does on the right, then its
   screens across the full width, each at the same share of its real size. */
.mod__head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: 48px; }
.mod__gallery { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 20px; }
.mod__gallery .mod__shot { flex: 0 1 auto; margin: 0; }
.mod__name { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 15px; color: var(--muted); }
.mod__name .ic { width: 18px; height: 18px; }
.mod h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 600; line-height: 1.08; letter-spacing: -0.035em; }
.mod__lead {
  margin-top: 20px; max-width: 46ch;
  font-size: clamp(18px, 1.6vw, 21px); font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; color: #7a7a7a;
}
.mod__lead strong { font-weight: 600; color: var(--text); }
.mod__facts { display: grid; gap: 12px; }
.mod__grid .mod__facts { margin-top: 28px; }
.mod__facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: #cfcfcf; }
.mod__facts .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--muted); }
.mod__media { display: grid; gap: 16px; }
.mod__shot img { width: 100%; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); }
.mod__demo { padding: 28px; }
.mod__demo .result { opacity: 1; transform: none; }

/* ── Guides (/guides, /guides/finances) ── */
.mod__name a { color: inherit; transition: color 0.2s; }
.mod__name a:hover { color: var(--text); }
.guide-how {
  max-width: 880px; margin: 0 auto; padding: 22px 26px;
  border-radius: var(--r-card);
  background: var(--lit-grain), var(--lit-face);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07);
  font-size: 16px; line-height: 1.5; color: #9a9a9a;
}
.guide-how strong { color: var(--text); font-weight: 600; }
.step { padding: 72px 0; }
.step__head { max-width: 880px; margin: 0 auto 36px; }
.step__head h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 600; line-height: 1.1; letter-spacing: -0.035em; }
.step__text { margin-top: 18px; font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: #7a7a7a; }
.step__text strong { font-weight: 600; color: var(--text); }
.step__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; align-items: start; }
.step__shot { margin: 0; }
.step__shot img { width: 100%; border-radius: 16px; box-shadow: 0 0 0 1px var(--line), 0 24px 60px -20px rgb(0 0 0 / 0.9); }
/* The first, big screen: full width, its list below in columns. */
.step--wide .step__body { grid-template-columns: 1fr; }
.step--wide .step__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.step__list { list-style: none; counter-reset: n; display: grid; gap: 22px; }
.step__list li {
  counter-increment: n; position: relative; padding-left: 46px;
  display: grid; gap: 4px; align-content: start; font-size: 15px; line-height: 1.5; color: var(--muted);
}
/* The same badge as in the screenshots: gradient disc, black number. */
.step__list li::before {
  content: counter(n); position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad); color: #050505; font-size: 15px; font-weight: 700;
}
.step__list strong { color: var(--text); font-size: 16px; font-weight: 600; }
.step__tip {
  margin-top: 28px; display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; border-radius: 16px;
  background: var(--lit-grain), var(--lit-face);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07);
  font-size: 14.5px; line-height: 1.5; color: #a8a8a8;
}
.step__tip .ic { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.step__tip strong { color: var(--text); font-weight: 600; }
.guide-end { padding-top: 48px; }
.guide-list { padding: 0 0 96px; }
.guide-card {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; align-items: center;
  padding: 24px; border-radius: var(--r-card);
  background: var(--lit-grain), var(--lit-face);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07);
  transition: scale 300ms var(--ease);
}
.guide-card:hover { background: var(--lit-grain), var(--lit-face-hover); scale: 0.99; }
.guide-card figure { margin: 0; }
.guide-card img { width: 100%; border-radius: 12px; }
.guide-card h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; line-height: 1.15; letter-spacing: -0.03em; }
.guide-card__copy > p:not(.mod__name) { margin-top: 12px; color: var(--muted); }
.guide-card__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-weight: 600; color: var(--text); }
.guide-card__go .ic { width: 16px; height: 16px; fill: var(--lime); }

/* Footer, Apple-style: grey labels over link columns. The first column is
   the FAQ, its questions set large; an answer opens under its question. */
.footer { padding: 96px 0 40px; background: #0b0b0b; }
.footer__grid { display: grid; grid-template-columns: 1.8fr 0.6fr 0.8fr; gap: 48px; align-items: start; }
.footer__label { font-size: 15px; font-weight: 400; color: #6e6e6e; margin-bottom: 20px; }
.faq details + details { margin-top: 6px; }
.faq summary {
  list-style: none; cursor: pointer;
  font-size: clamp(22px, 2.3vw, 30px); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em;
  color: #d0d0d0;
  padding: 4px 0;
  transition: color 0.2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover, .faq details[open] summary { color: var(--text); }
.faq details p {
  max-width: 46ch; padding: 6px 0 18px;
  font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: #7a7a7a;
}
.faq details p strong { font-weight: 600; color: var(--text); }
.footer__list { display: grid; gap: 14px; }
.footer__list a { font-size: 17px; font-weight: 600; color: #d0d0d0; transition: color 0.2s; }
.footer__list a:hover { color: var(--text); }
.footer__base {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 96px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--dim);
}
.footer__base img { height: 34px; width: auto; }

/* Reveal on scroll (IntersectionObserver in main.js adds .is-in) */
/* The stagger delays the entrance only, not the hover scale that cards share. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease) calc(var(--d, 0) * 90ms), transform 0.7s var(--ease) calc(var(--d, 0) * 90ms), scale 300ms var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .result { opacity: 1; transform: none; transition: none; }
  .caret { animation: none; }
  .tile:hover, .demo__before:hover, .demo__after:hover, .promise:hover, .plan:hover { scale: none; }
}

/* Tablet */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { height: 560px; max-width: 560px; left: 0; }
  .demo { grid-template-columns: 1fr; }
  .tile--a, .tile--b, .tile--half { grid-column: span 12; }
  .plans { grid-template-columns: minmax(0, 460px); gap: 28px; }
  .promise, .promise:nth-child(n) { grid-column: span 6; }
  .mod__grid, .mod__head { grid-template-columns: 1fr; gap: 32px; }
  .step__body, .guide-card { grid-template-columns: 1fr; gap: 28px; }
  .step--wide .step__list { grid-template-columns: 1fr; gap: 22px; }
  .mod__head { margin-bottom: 32px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__col--faq { grid-column: 1 / -1; }
}

/* Phone */
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .nav__inner { gap: 16px; }
  .nav__actions { gap: 16px; }
  .hero { padding: 40px 0 64px; }
  .hero__visual { height: 520px; }
  .phone--front { width: 220px; }
  .phone--back { width: 180px; top: 48px; }
  .section { padding: 88px 0; }
  .section__head { margin-bottom: 40px; }
  .section__head p { font-size: 19px; }
  .demo__before, .demo__after { padding: 24px 20px; }
  .juggle li { flex-direction: column; gap: 2px; }
  .juggle em { text-align: left; }
  .prompt__text { font-size: 16px; }
  .result { grid-template-columns: 1fr auto; }
  .result__mod { grid-column: 1 / -1; }
  .tile--text .tile__big { padding-top: 40px; }
  .tile__copy { padding: 24px 24px 0; }
  .shot, .tile--recap .shot { padding: 20px 20px 24px; }
  .tile--recap .tile__copy { padding: 24px 24px 0; }
  .promise--lead { grid-template-columns: 1fr; padding: 28px; }
  .promise--lead .ic { grid-row: auto; margin-bottom: 18px; }
  .plans { grid-template-columns: 1fr; }
  .closing { padding: 100px 0; }
  .footer { padding-top: 72px; }
  .footer__base { margin-top: 64px; }
}
/* Small phones: logo, two page links, the button and Log in on one line. */
@media (max-width: 480px) {
  .nav__inner { gap: 12px; }
  .nav__brand img { height: 28px; }
  .nav__links { gap: 12px; font-size: 13px; }
  .nav__actions { gap: 12px; font-size: 13px; }
  .nav__login { white-space: nowrap; }
  .nav .btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
}
/* The narrowest phones: the logo (2.7:1) a little smaller and
   the gaps closer, so the line still fits without squeezing it. */
@media (max-width: 380px) {
  .nav__inner, .nav__links, .nav__actions { gap: 10px; }
  .nav__brand img { height: 22px; }
}
@media (max-width: 340px) {
  .nav__inner, .nav__links, .nav__actions { gap: 6px; }
  .nav__brand img { height: 19px; }
  .nav .btn--sm { padding: 0 10px; }
}