/* Ledjer's public site. Colours and type follow the app (ui/theme): Deep Green and Lime on a cool base. */

/* The app's own Manrope, copied in by scripts/site.py, so no visitor is sent to a font service. */
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("fonts/manrope_regular.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("fonts/manrope_semibold.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("fonts/manrope_bold.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-weight: 800; font-display: swap; src: url("fonts/manrope_extrabold.ttf") format("truetype"); }

:root {
  --bg: #F5F7FA;
  --surface: #FFFFFF;
  --ink: #18222B;
  --muted: #5B6572;
  --line: #E3E8EE;
  --green: #1A5A39;
  --green-deep: #124A2E;
  --on-green: #EAF5EE;
  --lime: #C5F26B;
  --lime-deep: #B4E85A;
  --lime-ink: #12351F;
  --money-in: #1E7A4A;
  --ochre: #8A5A12;
  --ochre-bg: #F6E9CF;
  --premium: linear-gradient(120deg, #B5E655 0%, #45C08C 55%, #149A92 100%);
  --screen: #F5F7FA;
  --screen-ink: #18222B;
  --hero: radial-gradient(120% 90% at 85% 10%, #2B7A4F 0%, #1A5A39 45%, #124A2E 100%);
  --radius: 18px;
  --page: 20px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1513; --surface: #17201C; --ink: #E7EEE9; --muted: #9AA7A1; --line: #26322C;
    --money-in: #77C39A; --ochre: #E2B565; --ochre-bg: #3A2E17;
    --premium: linear-gradient(120deg, #C5F26B 0%, #63D9A0 55%, #2BB5AA 100%);
    --screen: #12151A; --screen-ink: #E7EEE9;
    --hero: radial-gradient(120% 90% at 85% 10%, #22603F 0%, #144A2F 45%, #0C2A1B 100%);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink); overflow-x: hidden;
  font: 400 17px/1.6 "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--page); }

/* ---------- Header: the app's green, in both themes ---------- */
.hero, .band { background: var(--hero); color: #FFFFFF; }
.hero { position: relative; overflow: hidden; }
/* Top and bottom only, so .wrap's side padding stays. */
.top { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; position: relative; z-index: 5; }
.top nav { display: flex; gap: 26px; font-weight: 700; font-size: 15px; }
.top nav a { color: #FFFFFF; text-decoration: none; opacity: 0.88; }
.top nav a:hover { opacity: 1; text-decoration: underline; }

/* The book about as tall as the name, its middle level with the middle of the letters ("l" top to the
   baseline), not with the name's box, which runs down to the j. --h is the name's height. */
.lockup { --h: 36px; display: flex; align-items: flex-start; gap: calc(var(--h) * 0.3); text-decoration: none; }
.lockup .mark { width: calc(var(--h) * 1.1); height: auto; }
.lockup .word { height: var(--h); width: auto; margin-top: calc(var(--h) * 0.06); }

/* ---------- Hero ---------- */
/* On a wide screen the green fills the window, so the phones run off its bottom edge and nothing of
   the page shows under them until you scroll. */
@media (min-width: 981px) {
  .hero { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
  .hero > .wrap { width: 100%; }
  .hero > .hero-grid { flex: 1; }
}
.hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; column-gap: 24px; padding-top: 12px; }
.copy { position: relative; z-index: 3; padding-bottom: 96px; }
.headline { margin: 0 0 24px; font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; font-size: clamp(46px, 6.3vw, 86px); }
.headline span { display: block; white-space: nowrap; }
.accent { color: var(--lime); }
.lead { font-size: 20px; color: var(--on-green); margin: 0 0 30px; max-width: 46ch; }
/* The app's own Save button: lime, rounded corners, not a pill. */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: 14px;
  background: var(--lime); color: var(--lime-ink); font-weight: 800; font-size: 18px; text-decoration: none;
  box-shadow: 0 2px 0 rgba(18, 53, 31, 0.25);
}
.btn:hover { background: var(--lime-deep); }
.btn svg { width: 20px; height: 20px; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding: 0; margin: 28px 0 0; color: var(--on-green); font-size: 15px; font-weight: 600; }
.trust li { display: flex; align-items: center; gap: 8px; opacity: 0.85; }
.trust svg { width: 18px; height: 18px; }

/* Real phones, cut off by the band's bottom edge, with the retired book lying faint behind them. */
.stage { position: relative; height: 640px; width: 560px; max-width: 100%; justify-self: end; align-self: end; }
.stage .pixel { position: absolute; left: 50%; bottom: -130px; --w: 250px; transform: translateX(-62%) rotate(-6deg); }
.stage .iphone { position: absolute; left: 50%; bottom: -90px; --w: 290px; transform: translateX(-4%); z-index: 2; }
.ghost-book {
  position: absolute; left: 4%; top: 40px; width: 340px; height: 450px; border-radius: 6px 20px 20px 6px; rotate: -9deg;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 16px, transparent 16px),
    linear-gradient(90deg, transparent 0 54px, rgba(255, 140, 120, 0.25) 54px 56px, transparent 56px),
    repeating-linear-gradient(to bottom, transparent 0 29px, rgba(255, 255, 255, 0.09) 29px 30px),
    rgba(255, 255, 255, 0.035);
  animation: retire 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
}
.float {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px;
  background: var(--surface); color: var(--ink); border-radius: 16px; font-size: 14px; line-height: 1.3; text-align: left;
  box-shadow: 0 18px 40px -16px rgba(5, 25, 15, 0.45);
}
.float b { display: block; font-size: 15px; }
.float .meta { color: var(--muted); }
.float .amt { margin-left: 10px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.float .amt.in { color: var(--money-in); }
.float .tile { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: #E7F3EC; color: #1E7A4A; }
.float .tile.late { background: var(--ochre-bg); color: var(--ochre); font-weight: 700; font-size: 13px; border-radius: 50%; }
.float .late-note { color: var(--ochre); font-weight: 600; }
.stage .float.one { right: 0; top: 150px; }
.stage .float.two { left: 30px; top: 420px; }

/* ---------- Phones ---------- */
.iphone {
  --w: 290px; position: relative; width: var(--w); aspect-ratio: 393 / 852;
  border-radius: calc(var(--w) * 0.19); padding: calc(var(--w) * 0.034); background: #0B0C0D;
  box-shadow: 0 0 0 calc(var(--w) * 0.01) #3A3D41, 0 0 0 calc(var(--w) * 0.02) #A9AEB4, 0 0 0 calc(var(--w) * 0.024) #6E737A,
    0 40px 80px -30px rgba(0, 0, 0, 0.55), 0 20px 40px -20px rgba(0, 0, 0, 0.35);
}
.iphone::before, .iphone::after, .pixel::before { content: ""; position: absolute; width: calc(var(--w) * 0.014); background: #8E949B; border-radius: 3px; }
.iphone::before { left: calc(var(--w) * -0.036); top: 18%; height: 5%; box-shadow: 0 calc(var(--w) * 0.11) 0 #8E949B, 0 calc(var(--w) * 0.22) 0 #8E949B; }
.iphone::after { right: calc(var(--w) * -0.036); top: 27%; height: 11%; }
.iphone .screen { border-radius: calc(var(--w) * 0.158); }
.iphone .status { height: calc(var(--w) * 0.135); padding: calc(var(--w) * 0.025) calc(var(--w) * 0.08) 0 calc(var(--w) * 0.1); }
.iphone .status svg { height: calc(var(--w) * 0.034); }
.iphone .island { position: absolute; z-index: 2; top: calc(var(--w) * 0.03); left: 50%; transform: translateX(-50%); width: calc(var(--w) * 0.3); height: calc(var(--w) * 0.088); background: #000; border-radius: 999px; }
.pixel {
  --w: 270px; position: relative; width: var(--w); aspect-ratio: 412 / 915;
  border-radius: calc(var(--w) * 0.14); padding: calc(var(--w) * 0.032); background: #0B0C0D;
  box-shadow: 0 0 0 calc(var(--w) * 0.014) #C9CDD2, 0 0 0 calc(var(--w) * 0.019) #8F949A,
    0 40px 80px -30px rgba(0, 0, 0, 0.55), 0 20px 40px -20px rgba(0, 0, 0, 0.35);
}
.pixel::before { right: calc(var(--w) * -0.033); top: 20%; height: 8%; box-shadow: 0 calc(var(--w) * 0.2) 0 0 #8E949B; }
.pixel .screen { border-radius: calc(var(--w) * 0.11); }
.pixel .status { height: calc(var(--w) * 0.11); padding: calc(var(--w) * 0.012) calc(var(--w) * 0.08) 0; }
.pixel .status svg { height: calc(var(--w) * 0.04); }
.pixel .punch { position: absolute; z-index: 2; top: calc(var(--w) * 0.035); left: 50%; transform: translateX(-50%); width: calc(var(--w) * 0.045); aspect-ratio: 1; background: #000; border-radius: 50%; }
.screen { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; background: var(--screen); }
.screen picture { display: block; flex: 1; min-height: 0; }
.screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.status { flex: none; display: flex; align-items: center; justify-content: space-between; font: 700 calc(var(--w) * 0.05)/1 "Manrope", sans-serif; color: var(--screen-ink); }
.status svg { width: auto; }
.status.green { background: linear-gradient(90deg, #1E633F, #1B5F3B 50%, #25663C); color: #FFFFFF; }

/* ---------- Sections ---------- */
section { padding: 104px 0 0; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.row.flip .text { order: 2; }
.row .shot { display: flex; justify-content: center; position: relative; }
.eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 16px; }
.row p { color: var(--muted); margin: 0 0 14px; max-width: 44ch; font-size: 18px; }
.ticks { list-style: none; padding: 0; margin: 20px 0 0; }
.ticks li { position: relative; padding-left: 32px; margin: 10px 0; font-weight: 600; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--lime); }
.ticks li::after { content: ""; position: absolute; left: 7px; top: 8px; width: 5px; height: 9px; border: solid var(--lime-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Two phones side by side, the second a step lower, so neither screen hides the other. */
.pair { display: flex; gap: 22px; align-items: flex-start; justify-content: center; width: 100%; }
.pair .iphone { --w: 232px; }
.pair .pixel { --w: 222px; margin-top: 56px; }
.paper { width: min(340px, 90%); border-radius: 6px; background: #FFFFFF; rotate: 3deg; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.35), 0 10px 20px -10px rgba(0, 0, 0, 0.2); }
.paper img { border-radius: 6px; }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 36px; }
.card { background: var(--surface); border-radius: var(--radius); padding: 28px; }
.card .icon { width: 44px; height: 44px; border-radius: 14px; background: var(--bg); display: grid; place-items: center; margin-bottom: 16px; }
.card .icon svg { width: 22px; height: 22px; color: var(--ink); }
.card h3 { font-size: 19px; font-weight: 700; margin: 0 0 6px; }
.card p { color: var(--muted); margin: 0; font-size: 16px; }

.alerts { background: var(--premium); color: #0E2A1C; border-radius: 28px; padding: 56px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.alerts .eyebrow { color: #0E2A1C; opacity: 0.7; }
.alerts p { margin: 0 0 12px; font-size: 18px; max-width: 42ch; }
.bubbles { display: grid; gap: 12px; }
.bubble { background: rgba(255, 255, 255, 0.85); border-radius: 18px; padding: 14px 16px; font-size: 14px; line-height: 1.4; color: #18222B; }
.bubble .from { font-weight: 700; font-size: 13px; color: #5B6572; margin-bottom: 4px; }
.bubble.entry { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #FFFFFF; }
.bubble.entry .meta { color: #5B6572; }
.bubble.entry .amt { color: #1E7A4A; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.bubbles .arrow { justify-self: center; width: 22px; height: 22px; color: #0E2A1C; }

.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.plan { border-radius: var(--radius); padding: 32px; background: var(--surface); }
.plan h3 { font-size: 24px; font-weight: 800; margin: 0 0 4px; }
.plan .sub { margin: 0 0 18px; color: var(--muted); font-weight: 600; }
.plan ul { margin: 0; padding-left: 20px; }
.plan li { margin: 6px 0; }
.plan.premium { background: var(--premium); color: #0E2A1C; }
.plan.premium .sub { color: #0E2A1C; opacity: 0.75; }

.closing { margin-top: 104px; }
.closing .inner { border-radius: 28px; background: var(--hero); color: #FFFFFF; padding: 72px 40px; text-align: center; }
.closing h2 { margin-bottom: 10px; }
.closing p { color: var(--on-green); margin: 0 auto 28px; max-width: 46ch; font-size: 18px; }

footer { margin-top: 72px; border-top: 1px solid var(--line); padding: 28px 0 40px; font-size: 15px; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ---------- Support and the legal pages ---------- */
.page { max-width: 760px; margin: 0 auto; padding: 48px var(--page) 24px; }
.page h1 { font-size: clamp(32px, 4.4vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; }
.page .lead { color: var(--muted); font-size: 18px; margin: 0 0 28px; max-width: none; }
.page h2 { font-size: 24px; margin: 40px 0 10px; }
.page p, .page li { color: var(--ink); }
.page code { font-size: 15px; }
.write { background: var(--surface); border-radius: var(--radius); padding: 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.write p { margin: 0; }
.write .addr { font-weight: 700; font-size: 19px; }
.write .note { color: var(--muted); font-size: 15px; }
details { background: var(--surface); border-radius: var(--radius); margin: 10px 0; }
summary { cursor: pointer; padding: 18px 22px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
/* A plus that turns half way round as its upright folds away, leaving a minus. questions.js marks a
   question "shutting" while it slides shut, so the minus turns back as it goes. */
summary::after {
  content: ""; flex: none; width: 14px; height: 14px; margin-top: 7px; color: var(--muted);
  background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transition: rotate 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), background-size 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
details[open]:not(.shutting) summary::after { rotate: 180deg; background-size: 14px 2px, 2px 0; }
details.moving { overflow: hidden; }
details .answer { padding: 0 22px 18px; color: var(--muted); }
details .answer p { margin: 0 0 10px; color: var(--muted); }
details .answer p:last-child { margin: 0; }

/* ---------- The waitlist in the hero ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.waitlist { max-width: 520px; }
.waitlist [hidden] { display: none; }
.waitlist-row { display: flex; gap: 10px; padding: 6px; border-radius: 18px; background: rgba(255, 255, 255, 0.12); }
.waitlist input {
  flex: 1; min-width: 0; min-height: 56px; border: 0; border-radius: 14px; padding: 0 18px; font: 600 17px/1 "Manrope", sans-serif;
  background: #FFFFFF; color: #18222B;
}
.waitlist input::placeholder { color: #8A939D; }
.waitlist input:focus { outline: 3px solid var(--lime); outline-offset: 1px; }
.waitlist .btn:disabled { opacity: 0.6; }
.waitlist-note { margin: 10px 4px 0; color: var(--on-green); opacity: 0.8; font-size: 14px; }
.waitlist-error { margin: 10px 4px 0; color: #FFD9CF; font-weight: 700; font-size: 15px; }
.waitlist-done { margin: 0; padding: 18px 20px; border-radius: 16px; background: rgba(197, 242, 107, 0.16); color: #FFFFFF; font-weight: 700; }

/* ---------- Four days, when you grow, home money, who it's for, prices, questions ---------- */
.intro { padding-top: 88px; }
.intro h2 { margin: 0; }
.intro + section { padding-top: 48px; }
.eyebrow .num { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 8px; background: var(--lime); color: var(--lime-ink); letter-spacing: 0.02em; }
.tag { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 999px; background: var(--premium); color: #0E2A1C; letter-spacing: 0.04em; }
.fan { position: relative; width: min(480px, 100%); height: 520px; }
.fan .doc { position: absolute; width: 62%; border-radius: 6px; background: #FFFFFF; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.4), 0 8px 18px -10px rgba(0, 0, 0, 0.2); }
.fan .quote { left: 0; top: 40px; rotate: -8deg; }
.fan .invoice { left: 22%; top: 0; rotate: 2deg; z-index: 1; }
.fan .receipt { right: 0; top: 150px; width: 44%; rotate: 8deg; z-index: 2; }
/* The proof of income page whole, beside its words. */
.loan { margin-top: 64px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; background: var(--surface); border-radius: 28px; padding: 44px 48px; }
.loan h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 12px; }
.loan p { color: var(--muted); font-size: 18px; margin: 0; max-width: 48ch; }
.loan .eyebrow { color: var(--muted); }
.paper.proof { width: min(330px, 100%); justify-self: center; rotate: -2deg; }
.fine { color: var(--muted); font-size: 15px; margin-top: 18px; }
.card.wide { grid-column: span 2; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.note-card {
  width: 300px; border-radius: 20px; padding: 14px 16px; background: var(--bg); display: grid; gap: 2px; font-size: 14px; line-height: 1.4;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.35);
}
.note-card .note-app { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.note-card .note-app img { width: 16px; height: 16px; }
.note-card b { font-size: 15px; }
.who .chips { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.who .chips li { padding: 10px 18px; border-radius: 999px; background: var(--surface); font-weight: 700; font-size: 16px; }
.who-note { color: var(--muted); margin: 18px 0 0; font-size: 17px; max-width: 60ch; }
.pricing-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 104px; }
.pricing-head h2 { margin: 0; }
.period { position: relative; display: inline-flex; padding: 5px; border-radius: 999px; background: var(--surface); gap: 4px; }
.period button {
  position: relative; z-index: 1; font: 700 15px/1 "Manrope", sans-serif; border: 0; border-radius: 999px; padding: 12px 18px;
  background: transparent; color: var(--muted); cursor: pointer; transition: color 0.3s ease;
}
.period button[aria-pressed="true"] { background: var(--lime); color: var(--lime-ink); }
/* With the script, one lime pill slides under the pick; it places the pill by --pill-x and --pill-w,
   and turns the slide on with "live" after the first placing, so the page does not open with it. */
.js .period button[aria-pressed="true"] { background: transparent; }
.js .period::before {
  content: ""; position: absolute; top: 5px; bottom: 5px; left: 0; width: var(--pill-w, 0); translate: var(--pill-x, 0) 0;
  border-radius: 999px; background: var(--lime);
}
.js .period.live::before { transition: translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.price { margin: 4px 0 6px; }
.price b { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price span { font-weight: 600; opacity: 0.75; }
.price-note { color: var(--muted); font-size: 15px; margin: 14px 0 0; }
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.faq-more { color: var(--muted); font-size: 17px; }
.faq details { margin: 0 0 10px; }
@media (max-width: 980px) {
  .waitlist { margin: 0 auto; }
  .waitlist-row { flex-direction: column; }
  .waitlist .btn { justify-content: center; }
  .intro { padding-top: 72px; }
  .fan { height: 440px; max-width: 380px; }
  .loan { grid-template-columns: 1fr; padding: 32px 24px; }
  .card.wide { grid-column: auto; grid-template-columns: 1fr; }
  .note-card { width: 100%; }
  .faq-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 420px) {
  .pair { gap: 12px; }
  .pair .iphone { --w: 168px; }
  .pair .pixel { --w: 160px; margin-top: 40px; }
  .period button { padding: 12px 14px; }
}

/* ---------- Motion: once on load, and each section as it scrolls in ---------- */
@keyframes rise { from { opacity: 0; translate: 0 26px; } }
/* The phones rise out of the hero's bottom edge, solid all the way: a fade let the book and the
   phone behind show through them. */
@keyframes phone-in { from { translate: 0 110%; } }
@keyframes pop { 0% { opacity: 0; scale: 0.7; } 70% { opacity: 1; scale: 1.04; } 100% { opacity: 1; scale: 1; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes retire { from { translate: 150px 30px; rotate: 0deg; } }
.a-rise { animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: var(--d, 0s); }
.a-phone { animation: phone-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: var(--d, 0.3s); }
.a-pop { animation: pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both, bob 5s ease-in-out infinite; animation-delay: var(--d, 1s), calc(var(--d, 1s) + 0.6s); }
.js .reveal { opacity: 0; translate: 0 34px; transition: opacity 0.8s ease, translate 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.js .reveal.in { opacity: 1; translate: 0 0; }

/* Going from page to page: the old one fades out and the new one rises in. Browsers without
   cross-page view transitions just load the page, and a page opened as a file never animates. */
@view-transition { navigation: auto; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; translate: 0 16px; } }
::view-transition-old(root) { animation: page-out 0.18s ease-in both; }
::view-transition-new(root) { animation: page-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; translate: 0 0; }
  @view-transition { navigation: none; }
}

/* ---------- Smaller screens: one phone, everything in one column ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .copy { padding-bottom: 20px; }
  .lead { margin-left: auto; margin-right: auto; }
  .trust { justify-content: center; }
  .headline { font-size: clamp(44px, 12.4vw, 100px); }
  .stage { width: 100%; height: 470px; justify-self: center; }
  .stage .pixel { display: none; }
  .stage .iphone { --w: 250px; transform: translateX(-50%); bottom: -170px; }
  .ghost-book { left: 50%; margin-left: -230px; width: 260px; height: 360px; }
  .stage .float.one { right: 0; top: 60px; }
  .stage .float.two { left: 0; top: 290px; }
  .row, .alerts { grid-template-columns: 1fr; }
  .row { gap: 40px; }
  .row.flip .text { order: 0; }
  .grid, .plans { grid-template-columns: 1fr; }
  .alerts { padding: 32px 24px; border-radius: 22px; }
  section { padding-top: 72px; }
}
@media (max-width: 420px) {
  .lockup { --h: 28px; }
  .top nav { gap: 16px; }
  .top nav .wide { display: none; }
  .lead { font-size: 18px; }
  .stage .iphone { --w: 230px; }
  .float { font-size: 13px; padding: 10px 12px 10px 10px; }
  .float .tile { width: 32px; height: 32px; }
  .float .amt { margin-left: 4px; }
  .closing .inner { padding: 48px 22px; }
}