/* ============================================================
   Aventurine — sections: nav, hero, flow, showcase, privacy,
   pricing, faq, footer, feature-request form, legal pages
   ============================================================ */

/* ---------- nav ---------- */
nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--surface);
  box-shadow: 0 12px 32px -24px rgba(26,26,25,.5);
  border-bottom: 1px solid var(--border);
}
.nav-in { display: flex; align-items: center; gap: 2rem; height: 68px }

.logo {
  font-family: 'Manrope', sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  letter-spacing: -.01em;
}
.logo .logo-mark { height: 1.6em; width: auto; display: inline-block; margin-right: 8px }
.logo .beta-tag {
  margin-left: .22em;
  font-size: .42em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  position: relative;
  top: -1.05em;
}

.nav-links { display: flex; gap: 1.6rem; margin-left: auto; font-size: .92rem; font-weight: 500 }
.nav-links a { text-decoration: none; color: var(--text-muted) }
.nav-links a:hover { color: var(--color-aventurine-950) }

.nav-dl { display: flex; gap: .55rem; margin-left: 1.4rem }
.nav-dl .btn { padding: .5rem 1rem; font-size: .85rem }

@media (max-width:880px) {
  .nav-links { display: none }
  .nav-dl { margin-left: auto }
}
@media (max-width:480px) {
  .nav-dl .btn span.lbl { display: none }
  .nav-dl .btn { padding: .55rem .8rem }
}

/* ---------- hero ----------
   Copy + slideshow over the banner photo; everything inside is
   light-on-dark (rgba(243,242,242,…) = aventurine-50 at various alphas).
   A top-heavy black gradient keeps the copy legible over the image. */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem,8vh,5.5rem) 0 clamp(3rem,7vh,4.5rem);
}
.hero::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: url('../assets/banner.png') center center/cover no-repeat;
  filter: brightness(1.1);
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.1) 100%);
  z-index: 0;
  pointer-events: none;
}
.hero-lines { display: none }

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,2fr) minmax(0,3fr);
  gap: clamp(2.5rem,6vw,5rem);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.7rem,5.4vw,4.3rem);
  max-width: 15ch;
  color: #f3f2f2;
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
.hero p.lead {
  font-size: 1.16rem;
  color: var(--surface);
  max-width: 50ch;
  margin: 1.5rem 0 2.25rem;
  font-weight: bold;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.hero-cta { display: flex; gap: .75rem; flex-wrap: wrap }

/* the outlined button restyled for the photo ground */
.hero .btn-secondary { border-color: rgba(243,242,242,.7); color: #f3f2f2 }
.hero .btn-secondary:hover { background: rgba(243,242,242,.12); border-color: #f3f2f2 }

/* hero visual — the app slideshow in a window frame */
.hero-visual { position: relative }

/* hero stats — a full-width band under the split, ruled off with hairlines */
.hero-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(1.5rem,4vw,3rem);
  margin-top: clamp(3.5rem,9vh,5.5rem);
  padding-top: 2.25rem;
  border-top: 1px solid var(--border);
}
.hero-stat { display: flex; flex-direction: column; gap: .5rem; align-items: center; text-align: center }
.hero-stat + .hero-stat {
  border-left: 1px solid rgba(243,242,242,.18);
  padding-left: clamp(1.5rem,4vw,3rem);
}
.hero-stat-num {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: clamp(2.2rem,4vw,3rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent-soft);
}
.hero-stat-lbl {
  font-size: .92rem;
  line-height: 1.45;
  color: rgba(243,242,242,.75);
  max-width: 30ch;
}

/* gentle entrance — copy, visual, then stats */
@keyframes heroUp {
  from { opacity: 0; transform: translateY(16px) }
  to   { opacity: 1; transform: none }
}
.hero-copy > * { animation: heroUp .65s cubic-bezier(.22,1,.36,1) both }
.hero-copy > *:nth-child(2) { animation-delay: .07s }
.hero-copy > *:nth-child(3) { animation-delay: .14s }
.hero-copy > *:nth-child(4) { animation-delay: .21s }
.hero-copy > *:nth-child(5) { animation-delay: .28s }
.hero-visual { animation: heroUp .75s cubic-bezier(.22,1,.36,1) .2s both }
.hero-stats  { animation: heroUp .65s cubic-bezier(.22,1,.36,1) .4s both }

@media (max-width:880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.75rem }
  .hero-visual { max-width: 560px }
  .hero-stats { grid-template-columns: 1fr; gap: 1.25rem }
  .hero-stat + .hero-stat {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(243,242,242,.18);
    padding-top: 1.25rem;
  }
}

/* ---------- screenshot frame ----------
   .shot gives the rounded, clipped frame; .shot-img keeps it frameless
   (the hero slideshow is the only user — radius + clipping still apply) */
.shot {
  background: var(--app-bg);
  border-radius: var(--radius);
  border: 1px solid rgba(26,26,25,.2);
  box-shadow: 0 30px 80px rgba(26,26,25,.25);
  overflow: hidden;
}
.shot-img { background: transparent; border: none; box-shadow: none }
.shot-img img { display: block; width: 100%; height: auto }

/* hero slideshow — the rounded frame clips the sliding track; the dashes sit
   below it, outside the clip, so their ends stay square */
.slideshow-frame { overflow: hidden }
.slideshow-track { display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1) }
.slideshow-track .slide { flex: 0 0 100%; width: 100%; height: auto; display: block }
.slideshow-dots { display: flex; gap: 8px; margin-top: 12px }
.slideshow-dots .dot {
  flex: 1;
  height: 8px;
  border-radius: 3px;
  background: var(--color-aventurine-50);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity .3s;
  opacity: .35;
}
.slideshow-dots .dot.is-active { opacity: 1 }

/* ---------- marquee strip ---------- */
.strip {
  background: var(--surface-inverse);
  color: var(--surface);
  padding: 1.6rem 0;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
}
.strip-track {
  flex: 0 0 auto;
  min-width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .75;
  animation: slide 30s linear infinite;
}
.strip-track span { padding: 0 .75rem }

@keyframes slide { to { transform: translateX(-100%) } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto }
  .strip-track { animation: none }
  .reveal { opacity: 1 !important; transform: none !important }
  .btn { transition: none }
  /* hero — skip the entrance choreography */
  .hero-copy > *, .hero-visual, .hero-stats { animation: none }
  /* "how it works" — keep stage switching, drop the motion */
  .stage, .flow-step, .flow-step-desc, .flow-num { transition: none }
  .stage { transform: none }
  .stage[data-stage="1"] .app-tx tbody tr { opacity: 1; transform: none; transition: none }
  .stage[data-stage="2"] .g-line { animation: none !important; stroke-dasharray: none; stroke-dashoffset: 0 }
  .stage[data-stage="2"] .g-fill,
  .stage[data-stage="2"] .g-dot { opacity: 1; animation: none !important }
  .stage[data-stage="2"] .g-pulse { animation: none !important }
}

/* ---------- sections & headings ---------- */
section { padding: 6rem 0; scroll-margin-top: 40px }

.sec-head { max-width: 60ch; margin-bottom: 3.2rem }
.sec-head h2 { font-size: clamp(1.9rem,4vw,2.9rem) }
.sec-head p { color: var(--text-muted); margin-top: .9rem; font-size: 1.05rem }

/* statement heading — a bold clause that carries its own muted continuation,
   instead of the eyebrow + title + subtitle stack */
.statement {
  font-size: clamp(1.8rem,3.4vw,2.7rem);
  line-height: 1.24;
  letter-spacing: -.015em;
}
.statement .cont { color: var(--text-muted) }
.dark .statement .cont { color: var(--color-aventurine-400) }

/* arrow link — quiet inline call-to-action */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: .98rem;
  color: var(--accent);
  text-decoration: none;
}
.link-arrow::after { content: "→"; transition: transform .18s ease }
.link-arrow:hover { color: var(--accent-strong) }
.link-arrow:hover::after { transform: translateX(4px) }
.dark .link-arrow { color: var(--accent-soft) }
.dark .link-arrow:hover { color: var(--accent-soft-2) }

/* ============================================================
   features · "how it works" click-through stepper (light)
   Three step cards on the left act as tabs; the screen on the
   right swaps between three stages (data-stage 0/1/2). The
   active card expands to show its description.
   ============================================================ */
.flow .sec-head { max-width: 56ch; margin-bottom: clamp(2.5rem,6vh,3.5rem) }

.flow-grid {
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  gap: clamp(2rem,5vw,4.5rem);
  align-items: center;
}

/* steps column — each step is one big button (tab) */
.flow-steps { display: flex; flex-direction: column; gap: 8px }
.flow-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 16px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.flow-step:hover { background: rgba(26,26,25,.045) }
.flow-step:focus-visible { outline: 3px solid var(--accent-gold); outline-offset: 2px }
.flow-step.is-active {
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 16px 32px -24px rgba(26,26,25,.4);
  cursor: default;
}

.flow-num {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .95rem;
  font-weight: 500;
  color: var(--text-muted);
  border: 2px solid var(--border);
  background: var(--surface);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.flow-step:hover .flow-num { border-color: var(--accent); color: var(--accent) }
.flow-step.is-active .flow-num { background: var(--accent-grad); color: #fff; border-color: var(--accent) }

.flow-step-body { display: block; min-width: 0; padding-top: 8px }
.flow-step-title {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem,2vw,1.35rem);
  line-height: 1.3;
  color: var(--text);
}
.flow-step-desc {
  display: block;
  color: var(--text-muted);
  font-size: .98rem;
  line-height: 1.55;
  max-width: 44ch;
  /* collapsed until the step is active */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s ease, opacity .3s ease, margin-top .3s ease;
}
.flow-step.is-active .flow-step-desc { max-height: 10em; opacity: 1; margin-top: 8px }

/* screen column — just a normal block; stages crossfade inside it */
.flow-stage-wrap { min-width: 0 }
.flow-screen { position: relative; min-height: clamp(420px, 54vh, 560px) }

/* the stages hold a paper file and real app surfaces — no window chrome here */
.stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px) scale(.99);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.stage.is-active { opacity: 1; transform: none; pointer-events: auto }

/* stage 0 — the raw bank export, a plain paper document */
.paper {
  position: relative;
  width: min(460px,94%);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 28px 56px -30px rgba(26,26,25,.45);
  padding: 1.5rem 1.5rem 1.25rem;
}
.paper::after { /* dog-eared corner */
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 34px;
  height: 34px;
  background: linear-gradient(225deg, var(--surface) 0 50%, var(--color-aventurine-200) 50% 100%);
  border-bottom-left-radius: 8px;
}
.paper-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.paper-head svg { width: 20px; height: 20px; color: var(--accent); flex: none }
.paper-name { font-family: 'IBM Plex Mono', monospace; font-size: .82rem; color: var(--text) }
.paper-src {
  margin-left: auto;
  padding-right: 26px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.paper-line {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  line-height: 2;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.paper-line.h { color: var(--text); font-weight: 500 }
.paper-cap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: .78rem;
  color: var(--text-muted);
}

/* stages 1 & 2 — cards drawn to match the app's dark theme */
.app-card {
  background: var(--app-surface);
  border: 1px solid var(--color-aventurine-800);
  border-radius: 10px;
  box-shadow: 0 30px 70px -32px rgba(26,26,25,.5);
  overflow: hidden;
}
.app-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--app-line);
}
.app-card-title { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: .92rem; color: var(--app-text) }
.app-card-src { font-family: 'IBM Plex Mono', monospace; font-size: .62rem; letter-spacing: .06em; color: var(--app-text-3) }

/* stage 1 — the transactions ledger, faithful to the in-app table:
   uppercase letter-spaced headers, hairline row dividers, grey category
   pills, mono tabular amounts (aventurine income / red expense) */
.app-tx { width: 100%; border-collapse: collapse }
.app-tx th {
  font-family: 'Manrope', sans-serif;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--app-text);
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid var(--app-line);
}
.app-tx th.r { text-align: right }
.app-tx td {
  height: 44px;
  padding: 0 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--app-line);
  font-size: .8rem;
  color: var(--app-text);
}
.app-tx td.ds { color: var(--app-text-2) }
.app-tx td.amt {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: .74rem;
  text-align: right;
  white-space: nowrap;
}
.app-tx td.amt.in { color: var(--app-income) }
.app-tx td.amt.out { color: var(--app-red) }
.tx-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--app-surface-2);
  color: var(--app-text);
  font-size: .68rem;
  font-weight: 500;
}
.app-tx-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--app-text-3);
}
.app-tx-foot .ok { color: var(--app-income) }

/* rows settle in one after another as the file becomes a ledger */
.stage[data-stage="1"] .app-tx tbody tr {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}
.stage[data-stage="1"].is-active .app-tx tbody tr { opacity: 1; transform: none }
.stage[data-stage="1"].is-active .app-tx tbody tr:nth-child(1) { transition-delay: .06s }
.stage[data-stage="1"].is-active .app-tx tbody tr:nth-child(2) { transition-delay: .12s }
.stage[data-stage="1"].is-active .app-tx tbody tr:nth-child(3) { transition-delay: .18s }
.stage[data-stage="1"].is-active .app-tx tbody tr:nth-child(4) { transition-delay: .24s }
.stage[data-stage="1"].is-active .app-tx tbody tr:nth-child(5) { transition-delay: .30s }
.stage[data-stage="1"].is-active .app-tx tbody tr:nth-child(6) { transition-delay: .36s }

/* stage 2 — the Home charts, drawn like the real renderer: dashed grid,
   accent line sweeping left→right, area fill + dots fading up behind it,
   and a soft pulse on the latest point */
.graphs { display: flex; flex-direction: column; gap: 1rem }
.g-value {
  font-family: 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.45rem;
  color: var(--app-text);
  padding: 12px 16px 0;
}
.g-value .g-delta { display: inline-block; margin-left: 10px; font-size: .7rem; color: var(--app-income) }
.g-chart { display: block; width: 100%; height: auto; margin-top: 4px }
.g-grid { stroke: rgba(255,255,255,.09); stroke-width: 1; stroke-dasharray: 3 5 }
.g-label {
  fill: var(--app-text-3);
  font-family: 'Manrope', sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .05em;
}
.g-line { fill: none; stroke: var(--app-chart-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.g-dot { fill: var(--app-chart-1) }
.g-pulse { fill: none; stroke: var(--app-chart-1); stroke-width: 2; opacity: 0 }

.stage[data-stage="2"] .g-line { stroke-dasharray: 1; stroke-dashoffset: 1 }
.stage[data-stage="2"].is-active .g-line { animation: chartDraw 1s cubic-bezier(.4,0,.2,1) forwards }
.stage[data-stage="2"] .g-fill,
.stage[data-stage="2"] .g-dot { opacity: 0 }
.stage[data-stage="2"].is-active .g-fill,
.stage[data-stage="2"].is-active .g-dot { animation: chartFade .5s ease .55s forwards }
.stage[data-stage="2"].is-active .g-pulse { animation: chartPulse 3s ease-out 1s infinite }

@keyframes chartDraw { to { stroke-dashoffset: 0 } }
@keyframes chartFade { to { opacity: 1 } }
@keyframes chartPulse {
  0%   { r: 4;  opacity: .5 }
  60%  { r: 13; opacity: 0 }
  100% { r: 13; opacity: 0 }
}

/* small screens — steps stack above the screen */
@media (max-width:880px) {
  .flow-grid { display: flex; flex-direction: column; gap: 1.5rem }
  .flow-screen { min-height: 360px }
  .flow-step { padding: 12px }
  .flow-step-desc { max-width: none }
  /* trim the longest stage so it fits the shorter screen */
  .app-tx tbody tr:nth-child(n+5) { display: none }
  .paper { padding: 1.25rem 1.25rem 1rem }
}

/* ============================================================
   features — full-width screenshot showcases, each led by a
   bold statement; the second row mirrors the first
   ============================================================ */
.feature-show + .feature-show { margin-top: clamp(4rem,10vh,6rem) }
.feature-show .statement { max-width: 56ch; margin-bottom: 2rem }
.feature-show.alt .statement { margin-left: 0 }
.feature-shot img { display: block; width: 100%; height: auto }

/* ============================================================
   dark privacy band + about
   ============================================================ */
.dark { background: var(--surface-inverse); color: var(--surface) }
.dark .sec-head p { color: var(--color-aventurine-300) }

/* about — three principle columns on charcoal */
.about-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem }
@media (max-width:760px) { .about-grid { grid-template-columns: 1fr; gap: 1.4rem } }
.about-point { border-top: 2px solid var(--accent-soft); padding-top: 1.1rem }
.about-point h3 { font-size: 1.18rem; margin-bottom: .5rem; color: var(--accent-soft-2) }
.about-point p { color: var(--color-aventurine-300); font-size: .95rem }

/* privacy — manifesto statement beside the proof panel, spec sheet below */
.priv-grid {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(2.5rem,6vw,5rem);
  align-items: center;
  margin-bottom: clamp(3rem,7vh,4.5rem);
}
.priv-copy > p { color: var(--color-aventurine-300); font-size: 1.02rem; max-width: 50ch; margin: 1.5rem 0 1.8rem }
.priv-specs {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(1.5rem,3vw,2.5rem);
  border-top: 1px solid rgba(240,243,236,.12);
  padding-top: 2.25rem;
}
.priv-spec h3 { font-size: 1rem; margin-bottom: .4rem; color: var(--surface) }
.priv-spec p { font-size: .9rem; line-height: 1.55; color: var(--color-aventurine-300) }
@media (max-width:880px) {
  .priv-grid { grid-template-columns: 1fr; gap: 2.75rem }
  .priv-specs { grid-template-columns: repeat(2,1fr) }
}
@media (max-width:560px) { .priv-specs { grid-template-columns: 1fr } }

/* the proof panel — everything Aventurine knows about you is one local file:
   a paper-like document card on the charcoal ground, SQLite mark centered */
.db-card {
  position: relative;
  width: min(272px,68%);
  aspect-ratio: 3/4;
  margin: 0 auto;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 28px 56px -28px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
}
.db-card::after { /* dog-eared corner — the fold's outside matches the dark band */
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 38px;
  height: 38px;
  background: linear-gradient(225deg, var(--surface-inverse) 0 50%, var(--color-aventurine-200) 50% 100%);
  border-bottom-left-radius: 10px;
}
.db-card img { width: 62%; height: auto }
.db-card .db-name { font-family: 'IBM Plex Mono', monospace; font-size: 1.1rem; color: var(--text-muted) }
.db-card .db-name svg { width: 18px; height: 18px }

/* ============================================================
   pricing
   ============================================================ */
.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; max-width: 1200px; margin: 0 auto }
@media (max-width:960px) { .price-grid { grid-template-columns: 1fr 1fr } }
@media (max-width:600px) { .price-grid { grid-template-columns: 1fr } }

.price {
  border-radius: var(--radius);
  padding: 2.2rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.55);
  display: flex;
  flex-direction: column;
}
.price:not(.hero-card) { color: var(--color-aventurine-500) }

/* the featured card — solid green with two organic paper cut-outs */
.price.hero-card {
  background: linear-gradient(160deg, var(--color-accent-600) 0%, var(--color-accent-700) 48%, var(--color-accent-800) 100%);
  color: var(--surface);
  border: none;
  position: relative;
  overflow: hidden;
}
.price.hero-card::before {
  content: "";
  position: absolute;
  left: -50px;
  bottom: -30px;
  width: 180px;
  height: 160px;
  background: rgba(255,255,255,.13);
  clip-path: polygon(22% 0%,48% 6%,70% 0%,88% 12%,100% 30%,94% 52%,100% 70%,82% 88%,58% 100%,30% 96%,10% 100%,0% 78%,6% 52%,0% 30%,12% 12%);
  pointer-events: none;
}
.price.hero-card::after {
  content: "";
  position: absolute;
  right: -55px;
  top: -45px;
  width: 220px;
  height: 200px;
  background: rgba(0,0,0,.22);
  clip-path: polygon(30% 0%,52% 5%,72% 0%,90% 10%,100% 28%,96% 48%,100% 66%,86% 80%,68% 92%,44% 100%,22% 94%,8% 82%,0% 60%,4% 38%,0% 18%,16% 6%);
  pointer-events: none;
}

/* beta card — flat accent background, no shapes */
.price.beta-card {
  background: var(--color-accent-400);
  color: var(--surface);
  border: none;
}
.price.hero-card .hero-rock-border { position: absolute; pointer-events: none; z-index: 0; }
.price.hero-card .hero-rock-bl { left: -50px; bottom: -30px; }
.price.hero-card .hero-rock-tr { right: -55px; top: -45px; }
.price.hero-card h3,
.price.hero-card .amount { position: relative; z-index: 1; }
.price.hero-card .btn, .price.beta-card .btn { background: var(--surface); color: var(--accent-strong) }
.price.hero-card .btn:hover, .price.beta-card .btn:hover { background: #fff }

.price h3 { font-size: 1.3rem }
.price .amount { font-family: 'Manrope', sans-serif; font-size: 3rem; margin: .9rem 0 .2rem }
.price .amount small { font-size: 1rem; font-family: 'Hanken Grotesk', sans-serif; font-weight: 500 }
.price p.sub { font-size: .92rem; opacity: .85; margin-bottom: 1.3rem }
.price ul { list-style: none; margin-bottom: 1.8rem; flex: 1; position: relative; z-index: 1 }
.price li { padding-left: 1.4rem; position: relative; margin-bottom: .5rem; font-size: .94rem }
.price li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.price.hero-card li::before, .price.beta-card li::before { background: var(--accent-soft-2) }
.price:not(.hero-card):not(.beta-card) li::before { background: var(--danger) }
.price .btn { justify-content: center; position: relative; z-index: 1 }

.badge {
  position: absolute;
  top: 1.3rem;
  right: 1.3rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--surface-inverse);
  color: var(--accent-soft);
  padding: .32rem .7rem;
  border-radius: 999px;
  z-index: 1;
}

/* ---------- faq ---------- */
.faq { max-width: 760px; margin: 0 auto }
details { border-bottom: 1px solid var(--border); padding: 1.1rem 0 }
summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
summary::-webkit-details-marker { display: none }
summary::after {
  content: "+";
  font-family: 'Manrope', sans-serif;
  font-size: 1.4rem;
  color: var(--accent);
  flex: none;
  transition: transform .2s;
}
details[open] summary::after { transform: rotate(45deg) }
details p { margin-top: .7rem; color: var(--text-muted); font-size: .95rem }

/* ---------- footer ---------- */
footer { background: var(--surface-inverse); color: var(--surface); padding: 6rem 0 3rem }
.foot-cta { text-align: center; margin-bottom: 4.5rem }
.foot-cta h2 { font-size: clamp(2rem,5vw,3.4rem); white-space: nowrap; margin: 0 auto 3.5rem }
.foot-cta p { color: var(--color-aventurine-300); margin-bottom: 2.1rem }
.foot-cta .hero-cta { justify-content: center }
.foot-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(240,243,236,.12);
  padding-top: 2rem;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--color-aventurine-400);
}
.foot-base a { text-decoration: none }
.foot-base a:hover { color: var(--accent-soft) }
.foot-links { display: flex; gap: 1.6rem }

/* ============================================================
   secondary-page hero (feature request + legal pages)
   Sits on the light page ground — dark text.
   ============================================================ */
.fr-hero { padding: 5.5rem 0 0 }
.fr-hero h1 { font-size: clamp(2.2rem,5vw,3.6rem); max-width: 16ch }
.fr-hero p.lead { font-size: 1.12rem; color: var(--text-muted); max-width: 56ch; margin: 1.2rem 0 0;}
.fr-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px }
.fr-section { padding: 3rem 0 6rem }

/* ---------- feature request form ---------- */
.fr-form {
  background: rgba(255,255,255,.55);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.6rem,4vw,2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.fr-field { display: flex; flex-direction: column; gap: .5rem }
.fr-field label { font-weight: 600; font-size: .95rem; display: flex; align-items: baseline; gap: .5rem }
.fr-field .req { color: var(--danger); font-size: .8rem }
.fr-field .hint { color: var(--text-muted); font-weight: 400; font-size: .82rem }
.fr-field input,
.fr-field select,
.fr-field textarea {
  font-family: inherit;
  font-size: .96rem;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: .7rem .85rem;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fr-field textarea { resize: vertical; min-height: 120px; line-height: 1.55 }
.fr-field input:focus,
.fr-field select:focus,
.fr-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(73,126,116,.14);  /* accent-600 @ 14% */
}
.fr-field select {
  appearance: none;
  cursor: pointer;
  /* inline chevron, stroke = accent-700 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23365e56' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.4rem;
}
.fr-field .err { color: var(--danger); font-size: .82rem; display: none }
.fr-field.invalid input,
.fr-field.invalid select,
.fr-field.invalid textarea { border-color: var(--danger) }
.fr-field.invalid .err { display: block }

.fr-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .4rem }
.fr-actions .btn { justify-content: center }
.fr-note {
  font-size: .85rem;
  color: var(--text-muted);
  background: rgba(73,126,116,.08);  /* accent-600 @ 8% */
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .9rem 1rem;
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  line-height: 1.5;
}
.fr-note svg { width: 18px; height: 18px; flex: none; color: var(--accent); margin-top: .1rem }
.fr-note a { color: var(--accent); font-weight: 600 }

.fr-fallback { display: none; font-size: .88rem; color: var(--text-muted); margin-top: .3rem }
.fr-fallback a { color: var(--accent); font-weight: 600; word-break: break-all }

/* ---------- legal pages (terms, privacy) ---------- */
.legal-section { padding: 2.6rem 0 6rem }
.legal-updated {
  font-size: .85rem;
  color: var(--text-muted);
  margin-top: 1.2rem;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .02em;
}
.legal {
  background: rgba(255,255,255,.55);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1.6rem,4vw,2.8rem);
}
.legal h2 { font-size: 1.35rem; margin: 2.2rem 0 .8rem }
.legal h2:first-child { margin-top: 0 }
.legal h3 { font-size: 1.05rem; font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; margin: 1.4rem 0 .5rem }
.legal p { color: var(--text-muted); margin: 0 0 1rem; max-width: 68ch }
.legal ul { color: var(--text-muted); margin: 0 0 1rem 1.2rem; max-width: 66ch }
.legal li { margin: .35rem 0; padding-left: .2rem }
.legal a { color: var(--accent); font-weight: 600 }
.legal strong { color: var(--text) }
.legal-toc {
  background: rgba(73,126,116,.08);  /* accent-600 @ 8% */
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin: 0 0 2rem;
}
.legal-toc p { margin: 0 0 .5rem; font-weight: 600; color: var(--text); font-size: .9rem }
.legal-toc ol { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: 2rem; font-size: .92rem }
.legal-toc li { margin: .25rem 0 }
@media (max-width:560px) { .legal-toc ol { columns: 1 } }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease }
.reveal.in { opacity: 1; transform: none }