/* SubFinito website — the app's memorial park, at desktop width. Tokens mirror src/styles/tokens.css. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --sky: #dcebff;
  --sky-deep: #c3dbfb;
  --lawn: #5fd37f;
  --lawn-deep: #2fa85a;
  --lawn-ink: #0b3d1f;
  --lawn-ink-2: #17502d;
  --soil: #6e4a2c;
  --soil-deep: #55371f;
  --soil-ink: #fff1e2;
  --soil-ink-2: #e8c9a8;
  --stone: #e9e6dd;
  --stone-2: #d9d4c8;
  --stone-3: #c2bcae;
  --ink: #12203a;
  --ink-2: #4a5570;
  --marigold: #ffb547;
  --marigold-ink: #4a2e00;
  --finito: #d63030;
  --finito-ink: #ffffff;
  --edge: var(--lawn-deep);
  --shadow-stone: 0 8px 18px -10px rgba(18, 32, 58, 0.45);
  --shadow-float: 0 12px 28px -10px rgba(18, 32, 58, 0.55);
  --display: 'Bricolage Grotesque', ui-rounded, system-ui, sans-serif;
  --text: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --r: 14px;
  --r-stone: 24px 24px 6px 6px;
  --r-band: 28px;
  --wrap: 1100px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --sky: #0d1730; --sky-deep: #172548;
    --lawn: #1e6a3a; --lawn-deep: #2e9b55; --lawn-ink: #e6fbec; --lawn-ink-2: #b8e6c6;
    --soil: #2a1a0f; --soil-deep: #1e1209; --soil-ink: #f6e4cf; --soil-ink-2: #c9ab8a;
    --stone: #2a3040; --stone-2: #343b4e; --stone-3: #46506a;
    --ink: #f2f5fa; --ink-2: #b7c0d1;
    --marigold-ink: #3a2300; --finito: #ff5c5c; --finito-ink: #2a0000;
    --shadow-stone: 0 8px 18px -10px rgba(0, 0, 0, 0.7);
    --shadow-float: 0 12px 28px -10px rgba(0, 0, 0, 0.8);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --sky: #0d1730; --sky-deep: #172548;
  --lawn: #1e6a3a; --lawn-deep: #2e9b55; --lawn-ink: #e6fbec; --lawn-ink-2: #b8e6c6;
  --soil: #2a1a0f; --soil-deep: #1e1209; --soil-ink: #f6e4cf; --soil-ink-2: #c9ab8a;
  --stone: #2a3040; --stone-2: #343b4e; --stone-3: #46506a;
  --ink: #f2f5fa; --ink-2: #b7c0d1;
  --marigold-ink: #3a2300; --finito: #ff5c5c; --finito-ink: #2a0000;
  --shadow-stone: 0 8px 18px -10px rgba(0, 0, 0, 0.7);
  --shadow-float: 0 12px 28px -10px rgba(0, 0, 0, 0.8);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--lawn);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: var(--stone); }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--edge); outline-offset: 2px; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.num { font-variant-numeric: tabular-nums; }
.caption { font-size: 15px; color: var(--ink-2); }
.band-lawn .caption { color: var(--lawn-ink-2); }
.stone .caption { color: var(--ink-2); }
.band-soil .caption { color: var(--soil-ink-2); }

/* ---------- type ---------- */
.display, .money, h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
h1 { font-size: clamp(38px, 6vw, 68px); letter-spacing: -0.035em; margin: 0 0 18px; text-wrap: balance; }
h2 { font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 10px; text-wrap: balance; }
h3, .h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 6px; line-height: 1.25; }
.lede { font-size: 19px; margin: 0; max-width: 46ch; text-wrap: pretty; }
.money { font-variant-numeric: tabular-nums; }
.money--hero { font-size: clamp(56px, 17vw, 76px); letter-spacing: -0.035em; line-height: 1; }
.money--lg { font-size: 30px; }
.money--md { font-size: 26px; }
.money--sm { font-size: 17px; font-weight: 700; }

/* ---------- bands ---------- */
.band { padding: 56px 0; }
.band-sky { position: relative; background: var(--sky); padding: 24px 0 96px; overflow: hidden; }
.band-lawn { background: var(--lawn); color: var(--lawn-ink); border-radius: var(--r-band) var(--r-band) 0 0; margin-top: -28px; padding-bottom: 72px; }
.band-soil { background: var(--soil); color: var(--soil-ink); border-radius: var(--r-band) var(--r-band) 0 0; margin-top: -28px; padding: 56px 0 128px; }
.sun, .moon { translate: 0 var(--py, 0px); will-change: translate; }
.sun {
  position: absolute; left: var(--x); top: var(--y); width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border-radius: 50%; background: var(--marigold); pointer-events: none;
  box-shadow: 0 0 48px 14px color-mix(in srgb, var(--marigold) 50%, transparent);
}
.moon {
  position: absolute; left: var(--x); top: var(--y); width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border-radius: 50%; background: var(--soil-ink); pointer-events: none;
  box-shadow: inset -22px -8px 0 0 var(--sky), 0 0 36px 8px color-mix(in srgb, var(--soil-ink) 25%, transparent);
}

/* ---------- header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; position: relative; z-index: 2; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.brand img { width: 40px; height: 40px; }
.nav { display: flex; gap: 8px; align-items: center; }
.nav a { text-decoration: none; font-weight: 600; padding: 10px 14px; border-radius: 999px; color: var(--ink-2); }
.nav a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: start; margin-top: 40px; }
.hero-copy { padding-top: 24px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 14px 22px; border-radius: var(--r); font-weight: 700; font-size: 17px; text-decoration: none;
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn-ink { background: var(--ink); color: var(--stone); }
.btn-primary { background: var(--lawn); color: var(--lawn-ink); }
.btn-ghost { background: var(--stone-2); color: var(--ink); }
.btn-danger { background: var(--finito); color: var(--finito-ink); min-height: 44px; padding: 8px 16px; font-size: 15px; }
.btn[aria-disabled='true'] { opacity: 0.55; cursor: default; }
.small-print { margin: 14px 0 0; font-size: 15px; color: var(--ink-2); }

/* ---------- stones ---------- */
.stone { background: var(--stone); color: var(--ink); border-radius: var(--r-stone); padding: 20px 22px; box-shadow: var(--shadow-stone); }
.stones { display: grid; gap: 14px; }
.row { display: flex; align-items: center; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.flower { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 999px;
  background: var(--stone-2); color: var(--ink-2); font-weight: 600; font-size: 15px;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.chip:active { transform: scale(0.96); }
.chip[aria-pressed='true'] { background: var(--ink); color: var(--stone); }
.chip[aria-pressed='true'] .flower { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35); }

/* receipt */
.receipt { display: grid; gap: 14px; }
.receipt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.receipt-rows { display: grid; gap: 2px; min-height: 44px; }
.receipt-row { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 16px; }
.receipt-row .name { flex: 1; }
.receipt-row .caption { font-size: 15px; }
.receipt-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; box-shadow: 0 -1px 0 var(--stone-2); }
.ledger { background: var(--soil); color: var(--soil-ink); border-radius: var(--r); padding: 16px 18px; display: grid; gap: 6px; }
.ledger .caption { color: var(--soil-ink-2); }
.ledger-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ledger-row--big { padding-top: 8px; box-shadow: 0 -1px 0 var(--soil-deep); }
.instead { margin: 0; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; text-wrap: balance; }
.instead-swap { display: inline-block; }
.empty { color: var(--ink-2); font-size: 15px; padding: 8px 0; }

/* ---------- marigold strip ---------- */
.strip { position: relative; z-index: 2; background: var(--marigold); color: var(--marigold-ink); font-weight: 600; text-align: center; padding: 12px 24px; margin: -48px 0 -20px; }

/* ---------- lawn sections ---------- */
.section { padding: 64px 0 16px; }
.section-head { max-width: 62ch; margin-bottom: 24px; }
.section-head p { margin: 8px 0 0; color: var(--lawn-ink-2); text-wrap: pretty; }

/* burial demo */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.demo-list { display: grid; gap: 12px; }
.demo-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.demo-item .price { text-align: right; white-space: nowrap; }
.demo-item .price .caption { font-size: 12px; }
.demo-item.sinking { animation: sink 600ms var(--ease-out) forwards; pointer-events: none; }
.graves { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; align-items: end; min-height: 160px; }
.grave { position: relative; display: grid; align-items: end; padding-bottom: 14px; box-shadow: inset 0 -14px 0 0 var(--lawn-deep); border-radius: 0 0 6px 6px; }
.tombstone {
  display: grid; gap: 4px; min-height: 124px; padding: 24px 12px 12px; background: var(--stone); color: var(--ink);
  border-radius: 46% 46% 6px 6px / 30% 30% 6px 6px; box-shadow: var(--shadow-stone); text-align: center; align-content: end;
  animation: rise 520ms var(--ease-out) both;
}
.tombstone-epitaph { font-size: 12px; letter-spacing: 0.02em; color: var(--ink-2); }
.tombstone-name { font-family: var(--display); font-weight: 800; font-size: 19px; overflow-wrap: anywhere; }
.tombstone-line { font-size: 15px; color: var(--ink-2); }
.grave-flower { position: absolute; left: 14px; bottom: 6px; width: 12px; height: 22px; }
.grave-flower::before { content: ''; position: absolute; left: 5px; bottom: 0; width: 2px; height: 14px; background: var(--lawn-ink-2); }
.grave-flower::after { content: ''; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55); }
.buried { display: grid; gap: 4px; margin-bottom: 16px; }
.demo-note { min-height: 24px; margin: 12px 0 0; color: var(--lawn-ink-2); }
.graves-empty { grid-column: 1 / -1; align-self: center; text-align: center; color: var(--lawn-ink-2); padding: 40px 0; text-wrap: balance; }

/* features */
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.feature { display: grid; gap: 10px; align-content: start; }
.feature svg { width: 32px; height: 32px; color: var(--lawn-deep); }
.feature p { margin: 0; color: var(--ink-2); font-size: 15px; text-wrap: pretty; }

/* screenshots */
.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
@media (min-width: 900px) { .phones .phone:nth-child(2) { margin-top: 40px; } }
.phone { display: grid; gap: 10px; justify-items: center; }
.phone-frame { width: 100%; max-width: 300px; border-radius: var(--r-band); padding: 10px; background: var(--ink); box-shadow: var(--shadow-float); }
.phone-frame img { border-radius: var(--r); width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; }
.phone .caption { color: var(--lawn-ink-2); text-align: center; }

/* pro */
.pro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 32px; align-items: center; padding: 28px; }
.perks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.perks li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; }
.perk-tick { width: 22px; height: 22px; border-radius: 50%; background: var(--lawn); color: var(--lawn-ink); display: grid; place-items: center; margin-top: 1px; }
.perk-tick svg { width: 14px; height: 14px; }
.perks .caption { display: block; }
.price-block { display: grid; gap: 10px; justify-items: start; }
.price { font-family: var(--display); font-weight: 800; font-size: 56px; letter-spacing: -0.03em; line-height: 1; }
.price small { font-family: var(--text); font-weight: 400; font-size: 16px; letter-spacing: 0; color: var(--ink-2); display: block; margin-top: 6px; }

/* soil footer */
.foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
.foot-links .num { font-variant-numeric: normal; }
.foot-links a { color: var(--soil-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.foot h2 { color: var(--soil-ink); }
.foot p { margin: 6px 0 0; color: var(--soil-ink-2); max-width: 52ch; text-wrap: pretty; }

/* privacy page */
.prose { max-width: 66ch; }
.prose h2 { font-size: 28px; margin: 32px 0 8px; }
.prose p, .prose li { color: var(--lawn-ink); }
.prose .stone p, .prose .stone li { color: var(--ink); }

/* ---------- clouds: two soft shapes crossing the sky, sky-deep on sky ---------- */
.cloud { --cloud: color-mix(in srgb, var(--sky-deep) 62%, var(--sky)); position: absolute; top: var(--t); left: calc(-1 * var(--w)); width: var(--w); height: calc(var(--w) * 0.34); border-radius: 999px; background: var(--cloud); pointer-events: none; z-index: 0; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: var(--cloud); border-radius: 50%; }
.cloud::before { width: 42%; height: 130%; left: 16%; top: -70%; }
.cloud::after { width: 34%; height: 100%; left: 50%; top: -45%; }
.band-sky > .wrap { position: relative; z-index: 1; }

/* ---------- meadow: flowers in the lawn margins on wide screens ---------- */
.band-lawn { position: relative; }
.meadow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; display: none; }
@media (min-width: 1260px) { .meadow { display: block; } }
.bloom { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 26px; transform-origin: 50% 100%; }
.bloom::before { content: ''; position: absolute; left: 6px; bottom: 0; width: 2px; height: 16px; background: var(--lawn-ink-2); }
.bloom::after { content: ''; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55); }

/* ---------- reveal: stones settle into place as they enter (transform only; always visible) ---------- */
.reveal { transform: translateY(18px); }
.reveal.in { transform: none; transition: transform 720ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }

/* ---------- press ripple, as in the app ---------- */
.btn, .chip { position: relative; overflow: hidden; }
.btn::after, .chip::after {
  content: ''; position: absolute; left: var(--px, 50%); top: var(--py, 50%); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: currentColor; opacity: 0; pointer-events: none;
}
.is-pressed::after { animation: ripple 560ms var(--ease-out) both; }

/* receipt rows come and go like stones */
.receipt-row.is-new { animation: rise 360ms var(--ease-out) both; }
.receipt-row.leaving { animation: sink 320ms var(--ease-out) forwards; pointer-events: none; }
.grave .grave-flower { animation: bloom 480ms var(--ease-out) 260ms both; transform-origin: 50% 100%; }

/* ---------- motion ---------- */
@keyframes rise { from { transform: translateY(28px) scale(0.92); opacity: 0; } }
@keyframes sink { to { transform: translateY(26px); clip-path: inset(0 0 100% 0 round 18px); opacity: 0.6; } }
@keyframes settle { from { transform: translateY(16px); } }
@keyframes swap-in { from { transform: translateY(8px); opacity: 0.4; } }
@media (prefers-reduced-motion: no-preference) {
  .band-lawn { animation: settle 480ms var(--ease-out) both; }
  .hero-copy > * { animation: rise 520ms var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: 60ms; }
  .hero-copy > :nth-child(3) { animation-delay: 120ms; }
  .hero .stone { animation: rise 560ms var(--ease-out) both; animation-delay: 160ms; }
  .sun, .moon { animation: drift 9s ease-in-out infinite alternate; }
  .instead-swap.is-new { animation: swap-in 320ms var(--ease-out) both; }
}
@keyframes drift { to { transform: translateY(6px); } }
@keyframes cloud { to { transform: translateX(calc(100vw + var(--w))); } }
@keyframes bloom { from { transform: scale(0); } }
@keyframes ripple { from { opacity: 0.22; transform: scale(1); } to { opacity: 0; transform: scale(18); } }
@media (prefers-reduced-motion: no-preference) {
  .cloud { animation: cloud var(--d) linear infinite; animation-delay: var(--delay); }
  .bloom { animation: bloom 640ms var(--ease-out) both; animation-delay: var(--delay); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-item.sinking { animation: none; display: none; }
  .tombstone, .receipt-row.is-new, .grave .grave-flower, .is-pressed::after { animation: none; }
  .receipt-row.leaving { animation: none; display: none; }
  .reveal { transform: none; }
  .sun, .moon { translate: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 899.98px) {
  .sun, .moon { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .moon { box-shadow: inset -15px -5px 0 0 var(--sky), 0 0 24px 6px color-mix(in srgb, var(--soil-ink) 25%, transparent); }
  h1 { padding-right: 56px; }
  .hero { grid-template-columns: 1fr; gap: 28px; margin-top: 20px; }
  .hero-copy { padding-top: 0; }
  .demo, .pro { grid-template-columns: 1fr; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phones { grid-template-columns: 1fr; }
  .phone-frame { max-width: 320px; }
  .foot { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 520px) {
  .features { grid-template-columns: 1fr; }
  .band-sky { padding-bottom: 80px; }
  .strip { margin-top: -40px; }
  .nav a { padding: 8px 10px; }
}