/* ==========================================================================
   Bento marketing site — "the page is a tray" design system
   Brand tokens transcribed verbatim from ../prompt.md — do not invent colors.
   ========================================================================== */

:root {
  --bg: #0D0D1A;
  --card: #1A1B2E;
  --border: #2A2B45;
  --primary: #FF6B4A;
  --secondary: #7C5CFC;
  --success: #3ECFA3;
  --danger: #FF4A6B;
  --amber: #FFB84A;
  --text: #FFFFFF;
  --subtext: #8B8BA0;
  --gradient: linear-gradient(135deg, #1A1B2E 0%, #3D2B6B 100%);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 36px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --max-width: 1180px;
  --tray-gap: 16px;
  --spot-x: 50%;
  --spot-y: 50%;
}

:root[data-theme="light"] {
  --bg: #F6F4FC;
  --card: #FFFFFF;
  --border: #E6E2F3;
  --primary: #E85A3B;
  --secondary: #6A4DD6;
  --text: #3F3D45;
  --subtext: #7A7886;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-weight: 800; line-height: 1.12; }
h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 14px; }
p { color: var(--subtext); line-height: 1.6; }

.eyebrow {
  display: inline-block;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
}

.section-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 10px 26px rgba(255, 107, 74, 0.35); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.2s var(--ease);
}
.icon-btn:hover { transform: rotate(-14deg); }

/* Nav -------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--border);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.nav-actions { display: flex; align-items: center; gap: 12px; }

/* ==========================================================================
   THE TRAY — the whole page lives inside compartments of one asymmetric grid.
   Sections below aren't stacked rows; they're tray cells with visible walls.
   ========================================================================== */

.tray-frame { padding: 40px 24px 0; }
.tray {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--tray-gap);
}

.cell {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  position: relative;
  overflow: hidden;
}

/* Hero occupies the tray's largest compartment ------------------------- */

.hero-cell {
  grid-column: 1 / 13;
  min-height: 560px;
  background: var(--gradient);
  border: none;
  padding: 64px 48px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero-cell { grid-template-columns: 1fr; padding: 48px 28px; text-align: center; min-height: auto; }
}

.hero-cell h1 { font-size: clamp(32px, 5vw, 52px); color: #fff; margin-bottom: 18px; }
.hero-cell .subhead { font-size: 17.5px; color: rgba(255,255,255,0.78); max-width: 460px; margin-bottom: 30px; }
@media (max-width: 900px) { .hero-cell .subhead { margin-left: auto; margin-right: auto; } }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 900px) { .hero-cta { justify-content: center; } }
.hero-cell .btn-ghost { border-color: rgba(255,255,255,0.35); color: #fff; }

.tilt-stage {
  perspective: 1000px;
  display: flex;
  justify-content: center;
}
@media (max-width: 900px) { .tilt-stage { order: -1; } }

.phone {
  width: 250px;
  border-radius: 40px;
  border: 8px solid #0A0A14;
  background: #0A0A14;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
  overflow: hidden;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.25s var(--ease);
  will-change: transform;
}
.phone img { width: 100%; display: block; }
.phone.small { width: 100%; max-width: 210px; border-width: 6px; border-radius: 30px; }

/* Splitter demo cell ------------------------------------------------------*/

.split-cell {
  grid-column: 1 / 13;
  padding: 56px 48px;
}
@media (max-width: 720px) { .split-cell { padding: 40px 24px; } }

.split-wrap { max-width: 720px; margin: 0 auto; }

.split-readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 8px;
}
.split-readout .amount { font-size: clamp(30px, 5vw, 44px); font-weight: 800; }
.split-readout .amount span { color: var(--primary); }

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--border);
  margin-bottom: 32px;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  border: 4px solid var(--bg);
  box-shadow: 0 0 0 2px var(--primary);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  border: 4px solid var(--bg);
  box-shadow: 0 0 0 2px var(--primary);
  cursor: grab;
}

/* Thin allocation bar, styled after the app's own "This period's allocation" bar */
.split-bar {
  display: flex;
  height: 14px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--border);
}
.split-seg {
  height: 100%;
  min-width: 2px;
  transition: width 0.5s var(--ease);
}
.split-seg.essential { background: linear-gradient(90deg, var(--amber), color-mix(in srgb, var(--amber) 75%, black)); }
.split-seg.lifestyle { background: linear-gradient(90deg, var(--secondary), color-mix(in srgb, var(--secondary) 75%, black)); }
.split-seg.free { background: linear-gradient(90deg, var(--success), color-mix(in srgb, var(--success) 75%, black)); }

/* Tinted stat tiles, styled after the app's own Essential/Lifestyle/Free tiles */
.split-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
}
@media (max-width: 480px) { .split-tiles { grid-template-columns: 1fr; } }

.split-tile {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 16px 18px;
  transition: transform 0.3s var(--ease);
}
.split-tile-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.split-tile-amount { font-size: 19px; font-weight: 800; color: var(--text); }
.split-tile-pct { font-size: 12.5px; font-weight: 700; margin-top: 2px; }

.split-tile.essential { background: rgba(255, 184, 74, 0.12); }
.split-tile.essential .split-tile-label, .split-tile.essential .split-tile-pct { color: var(--amber); }
.split-tile.lifestyle { background: rgba(124, 92, 252, 0.12); }
.split-tile.lifestyle .split-tile-label, .split-tile.lifestyle .split-tile-pct { color: var(--secondary); }
.split-tile.free { background: rgba(62, 207, 163, 0.12); }
.split-tile.free .split-tile-label, .split-tile.free .split-tile-pct { color: var(--success); }

.split-caption { margin-top: 20px; font-size: 14px; text-align: center; }

/* Asymmetric feature grid ---------------------------------------------- */

.grid-cell {
  grid-column: span 4;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 200px;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.grid-cell:hover { transform: translateY(-4px); border-color: var(--primary); }

/* Row 1: two even hero-weight tiles (6+6=12) */
.grid-cell.span-6 { grid-column: span 6; min-height: 280px; }
/* Row 3: one full-width banner tile (12) — taller, so its larger peek-shot has room to read as a real mockup, not a thumbnail */
.grid-cell.span-12 { grid-column: span 12; min-height: 360px; }

.grid-cell.has-peek { min-height: 300px; }
.grid-cell.span-12.has-peek { min-height: 360px; }
.grid-cell.has-peek .eyebrow,
.grid-cell.has-peek h3,
.grid-cell.has-peek p { max-width: 56%; position: relative; z-index: 1; }

@media (max-width: 900px) {
  .grid-cell, .grid-cell.span-6, .grid-cell.span-12, .grid-cell.has-peek { grid-column: 1 / 13; min-height: auto; padding: 28px; }
  .grid-cell.has-peek .eyebrow,
  .grid-cell.has-peek h3,
  .grid-cell.has-peek p { max-width: 100%; }
}

.grid-cell .tinted-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 22px;
}

.grid-cell h3 { font-size: 20px; margin-bottom: 8px; }
.grid-cell p { font-size: 14.5px; }

.peek-shot {
  position: absolute;
  right: -30px;
  bottom: -40px;
  width: 170px;
  border-radius: 26px;
  border: 6px solid #0A0A14;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  transform: rotate(9deg);
  opacity: 0.94;
  pointer-events: none;
}
.grid-cell.span-12 .peek-shot { width: 280px; right: -20px; bottom: -30px; }
@media (max-width: 900px) { .peek-shot { display: none; } }

/* Trust / stacked-tier section -------------------------------------------*/

.trust-cell {
  grid-column: 1 / 13;
  background: var(--gradient);
  border: none;
  padding: 72px 48px 96px;
  text-align: center;
  color: #fff;
}
@media (max-width: 720px) { .trust-cell { padding: 56px 24px 72px; } }

.trust-cell h2 { color: #fff; }
.trust-cell > p { color: rgba(255,255,255,0.75); max-width: 560px; margin: 0 auto; }

.tier-stack {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 56px;
  flex-wrap: wrap;
}

.tier-card {
  width: 260px;
  padding: 26px;
  border-radius: var(--radius-md);
  text-align: left;
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(6px);
  transition: transform 0.35s var(--ease), z-index 0s;
  position: relative;
}
.tier-card h4 { font-size: 16px; margin-bottom: 6px; font-weight: 800; color: #fff; }
.tier-card p { font-size: 13.5px; color: rgba(255,255,255,0.72); }

.tier-card:nth-child(1) { background: rgba(255,184,74,0.22); transform: translate(26px, 0) rotate(-6deg); z-index: 1; }
.tier-card:nth-child(2) { background: rgba(124,92,252,0.3); transform: translate(0, -14px) rotate(0deg); z-index: 2; }
.tier-card:nth-child(3) { background: rgba(255,107,74,0.28); transform: translate(-26px, 0) rotate(6deg); z-index: 3; }

.tier-card:hover { transform: translateY(-10px) rotate(0deg) scale(1.03); z-index: 4; }

@media (max-width: 720px) {
  .tier-stack { flex-direction: column; align-items: center; gap: 16px; }
  .tier-card:nth-child(1), .tier-card:nth-child(2), .tier-card:nth-child(3) { transform: none; width: 100%; max-width: 320px; }
  .tier-card:hover { transform: translateY(-6px); }
}

/* Locale marquee ----------------------------------------------------------*/

.locale-cell {
  grid-column: 1 / 13;
  padding: 64px 0;
  text-align: center;
}
.locale-cell .container { max-width: 640px; }

.marquee-group { margin-top: 28px; }

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 14px;
  will-change: transform;
  /* --marquee-distance (exact px, one full repeat's width) and the animation-duration are both set by
     main.js after measuring the real DOM, and main.js also duplicates the chip list as many times as
     needed so there's always enough trailing content to fill the viewport at the far end of the loop —
     see the comment in main.js for why a flat -50%/2-copies approach visibly breaks. */
  animation: marquee-scroll 22s linear infinite;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--marquee-distance, 50%))); }
}

.chip {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

/* Final CTA -----------------------------------------------------------*/

.cta-cell {
  grid-column: 1 / 13;
  padding: 72px 48px;
  text-align: center;
}
.cta-cell .container { max-width: 560px; }
.cta-cell .hero-cta { justify-content: center; margin-top: 26px; }

/* Footer ------------------------------------------------------------------*/

footer { border-top: 1px solid var(--border); padding: 40px 0; margin-top: 40px; }
footer .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
footer .brand img { width: 26px; height: 26px; }
.footer-links { display: flex; gap: 20px; font-size: 14px; color: var(--subtext); flex-wrap: wrap; }
.footer-links a { transition: color 0.2s var(--ease); }
.footer-links a:hover { color: var(--text); }

/* Placeholder pages (still used for genuinely-not-ready content) ----------*/

.placeholder-cell {
  grid-column: 1 / 13;
  min-height: 420px;
  padding: 96px 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.placeholder-cell .container { max-width: 560px; }
.placeholder-cell h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 16px; }
.placeholder-cell p { margin-bottom: 28px; }
@media (max-width: 640px) { .placeholder-cell { padding: 64px 24px; min-height: 320px; } }

/* About page — origin story --------------------------------------------- */

.story-cell { grid-column: 1 / 13; padding: 72px 48px 96px; }
@media (max-width: 640px) { .story-cell { padding: 48px 24px 64px; } }

.story-content { max-width: 700px; margin: 0 auto; }
.story-content h1 { font-size: clamp(32px, 5vw, 46px); margin-bottom: 24px; }

.story-lead {
  color: var(--text);
  font-size: 19px;
  line-height: 1.7;
  margin-bottom: 36px;
}

.story-gripes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 36px;
}
@media (max-width: 720px) { .story-gripes { grid-template-columns: 1fr; } }

.story-gripe {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
  background: var(--card);
}
.story-gripe .tinted-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.story-gripe h3 { font-size: 15.5px; margin-bottom: 8px; }
.story-gripe p { color: var(--subtext); font-size: 13.5px; line-height: 1.6; margin: 0; }

.story-content > p {
  color: var(--text);
  font-size: 16.5px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.story-signoff {
  color: var(--subtext);
  font-size: 14.5px;
  line-height: 1.7;
  margin-bottom: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* Legal documents (Privacy Policy, Terms & Conditions) ---------------------*/

.legal-cell {
  grid-column: 1 / 13;
  padding: 64px 48px 96px;
}
@media (max-width: 640px) { .legal-cell { padding: 40px 20px 64px; } }

.legal-content { max-width: 760px; margin: 0 auto; }

.legal-content h1 {
  font-size: clamp(28px, 4vw, 38px);
  margin-bottom: 10px;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: var(--subtext);
  font-size: 14px;
  margin-bottom: 28px;
}

.legal-intro {
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.7;
  margin-bottom: 32px;
}

.legal-toc {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin-bottom: 40px;
  background: var(--card);
}
.legal-toc p {
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--subtext);
  margin-bottom: 14px;
}
.legal-toc ol {
  columns: 2;
  column-gap: 28px;
  list-style: none;
  font-size: 14px;
}
@media (max-width: 560px) { .legal-toc ol { columns: 1; } }
.legal-toc li { margin-bottom: 8px; break-inside: avoid; }
.legal-toc a { color: var(--text); }
.legal-toc a:hover { color: var(--primary); }

.legal-content h2 {
  font-size: 21px;
  margin-top: 44px;
  margin-bottom: 14px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 84px;
}
.legal-content h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

.legal-content h3 {
  font-size: 16px;
  margin-top: 24px;
  margin-bottom: 10px;
  scroll-margin-top: 84px;
}

.legal-content p {
  color: var(--text);
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 16px;
}

.legal-content ul,
.legal-content ol.legal-list {
  color: var(--text);
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 16px 22px;
}
.legal-content li { margin-bottom: 8px; }

.legal-content strong { font-weight: 800; }
.legal-content em { color: var(--subtext); }

.legal-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

.legal-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--border);
  padding: 2px 6px;
  border-radius: 6px;
}

/* Reveal: slide into slot ------------------------------------------------*/

.reveal {
  opacity: 0;
  transform: translateX(var(--enter-x, -28px)) rotate(var(--enter-r, -2deg));
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in-view { opacity: 1; transform: translateX(0) rotate(0deg); }
.reveal.from-right { --enter-x: 28px; --enter-r: 2deg; }

/* Hero intro assembly (runs once on load) ---------------------------------*/

.assembling .hero-cell,
.assembling .split-cell,
.assembling .grid-cell {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
}
.assembled .hero-cell,
.assembled .split-cell,
.assembled .grid-cell {
  animation: settle-in 0.7s var(--ease) forwards;
}
.assembled .hero-cell { animation-delay: 0.05s; }
.assembled .split-cell { animation-delay: 0.15s; }
.assembled .grid-cell:nth-of-type(1) { animation-delay: 0.2s; }
.assembled .grid-cell:nth-of-type(2) { animation-delay: 0.28s; }
.assembled .grid-cell:nth-of-type(3) { animation-delay: 0.36s; }
.assembled .grid-cell:nth-of-type(4) { animation-delay: 0.44s; }
.assembled .grid-cell:nth-of-type(5) { animation-delay: 0.52s; }
.assembled .grid-cell:nth-of-type(6) { animation-delay: 0.6s; }

@keyframes settle-in {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}