/* bona — brand stylesheet (round 15 · Software + Green + Rose). Authored from docs/brand/design-system.md. Do not hand-edit values without updating that doc. */

/* ============================================================
 * @font-face — self-hosted Source Serif 4 italic + Geist Mono
 * Files live under /static/fonts/.
 * ============================================================ */

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/SourceSerif4-Italic-400.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/SourceSerif4-Italic-600.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/SourceSerif4-Italic-700.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/GeistMono-400.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/GeistMono-500.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/GeistMono-600.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/GeistMono-700.woff2") format("woff2");
}

/* ============================================================
 * Brand tokens — six brand colours + spacing + riso intensity.
 *
 * Semantic-colour mapping (non-marketing surfaces):
 *   - body text     → var(--bona-ink)
 *   - surface       → var(--bona-paper)
 *   - link          → var(--bona-rare-accent)
 *   - success       → var(--bona-rare-accent)
 *   - warning       → var(--bona-primary)
 *   - danger        → var(--bona-tertiary)
 *   - info          → var(--bona-secondary)
 *   - muted text    → var(--bona-ink) at 65% opacity
 *   - soft fill     → var(--bona-ink) at 6% opacity
 *
 * The per-kit accent slot --bona-accent is intentionally NOT
 * declared on :root. Each kit page sets it inline on its root
 * element. Every reference in this file uses
 * `var(--bona-accent, var(--bona-rare-accent))` so the
 * forest-green default falls through when no kit sets the slot.
 * ============================================================ */

:root {
  --bona-paper: #ede5cc;
  --bona-ink: #1a1612;
  --bona-primary: #a87a26;
  --bona-secondary: #2a3a5e;
  --bona-tertiary: #a04634;
  --bona-extra-spot: #9c4e60;
  --bona-rare-accent: #2f4a35;

  --bona-space-1: 4px;
  --bona-space-2: 8px;
  --bona-space-3: 12px;
  --bona-space-4: 16px;
  --bona-space-5: 24px;
  --bona-space-6: 32px;

  --bona-riso-intensity: 0.75;
  --bona-radius: 0;

  color-scheme: light;
}

/* ============================================================
 * Base typography & reset
 * ============================================================ */

* {
  box-sizing: border-box;
}

html,
body {
  background: var(--bona-paper);
  color: var(--bona-ink);
}

body {
  font:
    400 13px/1.55 "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.04em;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  margin: 0 0 var(--bona-space-3);
}

a {
  color: var(--bona-rare-accent);
}

/* ============================================================
 * Hero — mono-blend headline.
 * The mix-blend-mode is load-bearing: it lets the bouquet
 * watercolour show through the type.
 * ============================================================ */

.bona-hero__headline {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 100px;
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-weight: 500;
  font-style: normal;
  mix-blend-mode: multiply;
}

.bona-hero__headline-line-1 {
  color: var(--bona-primary);
  text-shadow:
    4px 4px 0 #2a3a5e33,
    8px 8px 0 #2a3a5e1c;
}

.bona-hero__headline-line-2 {
  color: var(--bona-secondary);
  text-shadow:
    4px 4px 0 #a87a2633,
    8px 8px 0 #a87a261c;
}

.bona-hero__eyebrow {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--bona-secondary);
}

/* ============================================================
 * Riso layer 1 — fixed full-viewport fractalNoise grain.
 * Applied via <body class="bona-grain"> or <div class="bona-grain">.
 * Opt-in: only landing-page templates carry this class.
 * ============================================================ */

.bona-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  mix-blend-mode: multiply;
  opacity: calc(0.55 * var(--bona-riso-intensity, 0.75));
  background-size: 160px 160px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200.4%200%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E");
}

/* ============================================================
 * Riso layer 2 — per-panel halftone wash.
 * Child <div class="bona-halftone"> inside a relatively-
 * positioned container. Tone via --bona-halftone-tone (defaults
 * to primary). Modifier classes adjust density.
 * ============================================================ */

.bona-halftone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    var(--bona-halftone-tone, var(--bona-primary)) 1.8px,
    transparent 2px
  );
  background-size: 8px 8px;
  opacity: 0.18;
}

.bona-halftone--card {
  opacity: 0.14;
}

.bona-halftone--callout {
  opacity: 0.45;
  background-size: 10px 10px;
}

/* Overprint offset text-shadow reference:
 *   text-shadow: 2.5px 2.5px 0 <bg-colour>;
 * Hero headline doubles up at 4px and 8px to imply CMYK
 * misregistration. See .bona-hero__headline-line-* above. */

/* ============================================================
 * Components — see docs/brand/design-system.md §6.
 * ============================================================ */

/* .bona-panel — bordered rectangle with optional title-bar */
.bona-panel {
  border: 1.5px solid var(--bona-ink);
  background: var(--bona-paper);
  position: relative;
  overflow: hidden;
  border-radius: 0;
}

.bona-panel__title-bar {
  background: var(--bona-ink);
  color: var(--bona-paper);
  padding: 8px 14px;
  display: block;
  font:
    400 11px/1 "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .bona-panel__title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.bona-panel__body {
  position: relative;
  z-index: 1;
  padding: 18px 22px;
}

.bona-panel__halftone {
  /* same shape as .bona-halftone; alias so panels can compose without
   * the bare class name. Keep both for legibility. */
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    var(--bona-halftone-tone, var(--bona-primary)) 1.8px,
    transparent 2px
  );
  background-size: 8px 8px;
  opacity: 0.18;
}

/* .bona-problem-card — three-card grid; modifiers set tone */
.bona-problem-card {
  position: relative;
  border: 1px solid var(--bona-ink);
  padding: 20px 22px 24px;
  overflow: hidden;
  background: var(--bona-paper);
  border-radius: 0;
}

.bona-problem-card--primary {
  --bona-halftone-tone: var(--bona-primary);
  --bona-leaf-tint: var(--bona-primary);
}

.bona-problem-card--extra-spot {
  --bona-halftone-tone: var(--bona-extra-spot);
  --bona-leaf-tint: var(--bona-extra-spot);
}

.bona-problem-card--tertiary {
  --bona-halftone-tone: var(--bona-tertiary);
  --bona-leaf-tint: var(--bona-tertiary);
}

.bona-problem-card__heading {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 var(--bona-space-3);
  position: relative;
  z-index: 1;
}

.bona-problem-card__body {
  font:
    400 13px/1.55 "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}

.bona-problem-card__leaf {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 120px;
  pointer-events: none;
}

/* .bona-how-step — inside .bona-panel, grid of 3 steps */
.bona-how-step {
  position: relative;
}

.bona-how-step__num {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 30px;
  color: var(--bona-primary);
  line-height: 1;
  margin: 0 0 var(--bona-space-2);
  position: relative;
  z-index: 1;
}

.bona-how-step__heading {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 var(--bona-space-3);
  position: relative;
  z-index: 1;
}

.bona-how-step__body {
  font:
    400 13px/1.55 "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}

.bona-how-step__leaf {
  position: absolute;
  top: -12px;
  left: -14px;
  width: 56px;
  pointer-events: none;
}

/* .bona-pricing-tier — 4-column grid via .bona-pricing-tier-row */
.bona-pricing-tier-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  z-index: 1;
}

.bona-pricing-tier {
  padding: 22px 18px;
  border-left: 1px solid var(--bona-ink);
  position: relative;
}

.bona-pricing-tier:first-child {
  border-left: 0;
}

.bona-pricing-tier__name {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  margin: 0 0 var(--bona-space-2);
}

.bona-pricing-tier__price {
  font:
    600 14px/1 "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.04em;
  margin: 0 0 var(--bona-space-3);
}

.bona-pricing-tier__body {
  font:
    400 12px/1.55 "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.04em;
}

.bona-pricing-tier--pro {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bona-rare-accent) 15%, transparent),
    transparent
  );
}

/* .bona-callout-block — full-width navy band */
.bona-callout-block {
  background: var(--bona-secondary);
  color: var(--bona-paper);
  border: 1.5px solid var(--bona-ink);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  overflow: hidden;
  position: relative;
  border-radius: 0;
}

.bona-callout-block__headline {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 34px;
  line-height: 1.2;
  margin: 0;
  position: relative;
  z-index: 1;
}

.bona-callout-block__body {
  position: relative;
  z-index: 1;
}

/* .bona-cta — primary action; ink bg, paper fg, primary trailing shadow */
.bona-cta {
  display: inline-block;
  background: var(--bona-ink);
  color: var(--bona-paper);
  padding: 14px 22px;
  font:
    700 12px/1 "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.08em;
  border: 1.5px solid var(--bona-ink);
  box-shadow: 3px 3px 0 var(--bona-primary);
  text-decoration: none;
  border-radius: 0;
  cursor: pointer;
}

.bona-cta:hover {
  box-shadow: 5px 5px 0 var(--bona-primary);
}

.bona-cta--paper {
  background: var(--bona-paper);
  color: var(--bona-ink);
  box-shadow: 3px 3px 0 var(--bona-extra-spot);
}

.bona-cta--paper:hover {
  box-shadow: 5px 5px 0 var(--bona-extra-spot);
}

/* .bona-link — rare-accent link */
.bona-link {
  color: var(--bona-rare-accent);
  text-decoration: underline;
  font:
    400 12px/1.4 "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.04em;
}

/* .bona-table — kit numbers panel */
.bona-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

.bona-table th,
.bona-table td {
  border: 1px solid var(--bona-ink);
  padding: 12px 16px;
  text-align: left;
}

.bona-table thead th,
.bona-table__header {
  background: var(--bona-ink);
  color: var(--bona-paper);
  font:
    400 11px/1 "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.04em;
}

.bona-table__metric {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.bona-table__note {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

/* .bona-delta-bar — kit mobile metric bar */
.bona-delta-bar {
  height: 3px;
  background: rgba(26, 22, 18, 0.1);
  position: relative;
  width: 100%;
}

.bona-delta-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--bona-delta-pct, 0%);
  background: var(--bona-accent, var(--bona-rare-accent));
}

/* .bona-sparkline — kit growth */
.bona-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 130px;
}

.bona-sparkline__bar {
  flex: 1;
  height: var(--bona-bar-height, 30%);
  background: var(--bona-ink);
  opacity: 0.6;
}

.bona-sparkline__bar--accent {
  background: var(--bona-accent, var(--bona-rare-accent));
  opacity: 1;
}

/* .bona-top-nav — kit creator-first ink bar */
.bona-top-nav {
  background: var(--bona-ink);
  color: var(--bona-paper);
  font:
    400 11px/1 "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.04em;
}

.bona-top-nav__live {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.bona-top-nav__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ec98a;
}

.bona-top-nav__mark {
  opacity: 0.55;
}

/* .kit-top-nav__logo — Pro-tier operator wordmark in the top-nav.
 * Replaces the display-name span when both `branding.pro_theme` and
 * `theme.logo_url` are present (see `apps/web/src/views/kit-public.tsx`).
 * Bound to the existing 11px line-height of `.bona-top-nav` so a tall
 * operator logo doesn't expand the bar. Operators with portrait wordmarks
 * should pre-trim to a horizontal silhouette. */
.kit-top-nav__logo {
  height: 24px;
  width: auto;
  vertical-align: middle;
  display: inline-block;
}

/* ============================================================
 * Page-level layout helpers
 * ============================================================ */

.bona-page {
  padding: 32px 56px;
}

.bona-footer {
  padding: 32px 56px;
}

/* .faq-item — lighter FAQ Q&A wrapper; 1px hairline instead of
 * the 1.5px structural border used by .bona-panel. Preferred for
 * dense FAQ surfaces where .bona-panel's title-bar weight would
 * overshadow the content. */
.faq-item {
  border-top: 1px solid color-mix(in srgb, var(--bona-ink) 18%, transparent);
  padding: 1.5rem 0 2rem;
}

.faq-item:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.faq-item dt {
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}

.faq-item dd {
  margin: 0;
  max-width: 36rem;
}

/* .legal-page — prose container for legal pages; wraps the body
 * content in a max-width column, no structural border (the page
 * is the container). Replaces the legacy inline STYLES block. */
.legal-page {
  max-width: 56rem;
  margin: 3rem auto;
  padding: 0 1.25rem 4rem;
}

.legal-page h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}

.legal-page h2 {
  font-size: 1.15rem;
  margin: 2rem 0 0.5rem;
  letter-spacing: -0.005em;
}

.legal-page h3 {
  font-size: 1rem;
  margin: 1.5rem 0 0.5rem;
}

.legal-page p {
  margin: 0 0 1rem;
  max-width: 40rem;
}

.legal-page ul,
.legal-page ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
  max-width: 40rem;
}

.legal-page li {
  margin: 0 0 0.4rem;
}

.legal-page .meta {
  color: color-mix(in srgb, var(--bona-ink) 65%, transparent);
  font-size: 0.9rem;
  margin: 0 0 2.5rem;
}

.legal-page .footer-back {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--bona-ink) 18%, transparent);
  color: color-mix(in srgb, var(--bona-ink) 65%, transparent);
  font-size: 0.9rem;
}

/* FAQ page layout — reuses the same prose column width */
.faq-page {
  max-width: 56rem;
  margin: 3rem auto;
  padding: 0 1.25rem 4rem;
}

.faq-page h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}

.faq-page .meta {
  color: color-mix(in srgb, var(--bona-ink) 65%, transparent);
  font-size: 0.9rem;
  margin: 0 0 2.5rem;
}

.faq-page .footer-back {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--bona-ink) 18%, transparent);
  color: color-mix(in srgb, var(--bona-ink) 65%, transparent);
  font-size: 0.9rem;
}

/* .bona-onboarding — page-level wrapper for onboarding steps.
 * Centres the panel in a modest column; no riso, no flora. */
.bona-onboarding {
  max-width: 36rem;
  margin: 4rem auto;
  padding: 0 1.25rem 4rem;
}

.bona-onboarding h1 {
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}

.bona-onboarding p {
  margin: 0 0 0.75rem;
}

.bona-onboarding label {
  display: block;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--bona-ink) 65%, transparent);
  margin-bottom: 0.25rem;
}

.bona-onboarding input[type="text"],
.bona-onboarding input[type="url"],
.bona-onboarding input[type="password"] {
  display: block;
  width: 100%;
  font: inherit;
  color: var(--bona-ink);
  background: color-mix(in srgb, var(--bona-ink) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--bona-ink) 18%, transparent);
  padding: 0.4rem 0.55rem;
  margin-bottom: 0.75rem;
  border-radius: 0;
  box-sizing: border-box;
}

.bona-onboarding__platform-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.bona-onboarding__form {
  margin-top: 1rem;
}

/* .bona-utility-page — prose column for verify, 404, waitlist-thanks.
 * Replaces the legacy inline STYLES blocks on each page.
 * No riso, no overprint — semantic tokens only. */
.bona-utility-page {
  max-width: 36rem;
  margin: 6rem auto;
  padding: 0 1.25rem 4rem;
}

.bona-utility-page h1 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
}

.bona-utility-page p {
  margin: 0 0 1rem;
}

.bona-utility-page .muted {
  color: color-mix(in srgb, var(--bona-ink) 65%, transparent);
}

.bona-wordmark {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--bona-primary);
  text-shadow: 2.5px 2.5px 0 var(--bona-secondary);
}

/* ============================================================
 * === LANDING — desktop ===
 * Landing-only layout: top-nav extensions, hero positioning +
 * flora bleed, problem-grid, how-grid, callout extensions,
 * footer extensions. design-system §10 + r6-chassis layout.
 * ============================================================ */

.landing {
  position: relative;
  /* contain horizontal bleed from hero flora that overflow: visible exposes */
  overflow-x: hidden;
  /* track the current horizontal page padding so the footer top border
   * (and any other content-width-anchored decoration) can mirror it. */
  --bona-h-pad: 56px;
}

.landing-page {
  padding: 32px 56px;
  max-width: 1136px;
  margin: 0 auto;
  position: relative;
}

.bona-top-nav__inner {
  padding: 10px 56px;
  max-width: 1136px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.bona-top-nav__wordmark {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--bona-primary);
  text-shadow: 1.5px 1.5px 0 var(--bona-tertiary);
  margin-right: 12px;
}

.bona-top-nav__tag {
  opacity: 0.9;
}
.bona-top-nav__platforms {
  opacity: 0.8;
}

.bona-top-nav__waitlist {
  color: var(--bona-tertiary);
  text-decoration: underline;
}

.bona-hero {
  position: relative;
  margin-bottom: 36px;
  min-height: 380px;
  /* overflow visible so flora bleeds out of the hero card —
   * .landing has overflow-x: hidden so the page itself won't scroll. */
}

.bona-hero__flora {
  position: absolute;
  pointer-events: none;
}

.bona-hero__bouquet {
  top: -40px;
  right: -60px;
  width: 520px;
  opacity: 0.95;
  transform: rotate(6deg);
  z-index: 0;
}

.bona-hero__leaf {
  top: 60px;
  right: 360px;
  width: 180px;
  opacity: 0.78;
  transform: rotate(-22deg);
  z-index: 0;
}

.bona-hero__violets {
  bottom: -30px;
  left: 480px;
  width: 120px;
  opacity: 0.95;
  z-index: 0;
}

.bona-hero__content {
  position: relative;
  z-index: 1;
  max-width: 660px;
}

.bona-hero__eyebrow {
  margin-bottom: 18px;
  display: block;
}

.bona-hero__headline {
  margin: 0 0 20px;
}

.bona-hero__lede {
  margin: 0 0 28px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 22px;
  line-height: 1.45;
  max-width: 540px;
  font-style: normal;
  font-weight: 400;
}

.bona-hero__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  margin-bottom: 14px;
}

.bona-hero__form-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  align-items: baseline;
}

.bona-hero__form label {
  font:
    400 11px/1 "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bona-secondary);
}

.bona-hero__form input[type="email"],
.bona-hero__form input[type="url"] {
  font:
    400 13px/1.4 "Geist Mono",
    ui-monospace,
    monospace;
  padding: 8px 10px;
  border: 1px solid var(--bona-ink);
  background: var(--bona-paper);
  color: var(--bona-ink);
  border-radius: 0;
  min-width: 0;
  width: 100%;
}

.bona-hero__form small {
  grid-column: 2 / -1;
  font:
    400 10px/1.5 "Geist Mono",
    ui-monospace,
    monospace;
  opacity: 0.65;
}

.bona-hero__cta-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.bona-section {
  margin-bottom: 28px;
  position: relative;
}

.bona-section__label {
  font:
    400 11px/1 "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.1em;
  color: var(--bona-secondary);
  margin-bottom: 16px;
  display: block;
}

.bona-problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.bona-problem-card__eyebrow {
  font:
    400 10px/1 "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.1em;
  color: var(--bona-secondary);
  margin: 0 0 10px;
  position: relative;
  z-index: 1;
}

.bona-how__grid {
  padding: 22px 26px 26px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}

.bona-how-step {
  padding-left: 8px;
}

.bona-how-step__leaf--1 {
  transform: rotate(-7deg);
}
.bona-how-step__leaf--2 {
  transform: rotate(6deg);
}
.bona-how-step__leaf--3 {
  transform: rotate(19deg);
}

.bona-how-step__num {
  margin-left: 44px;
}
.bona-how-step__heading {
  margin: 6px 0 0 4px;
}
.bona-how-step__body {
  margin: 8px 0 0 4px;
  max-width: 240px;
}

.bona-pricing-tier--pro .bona-pricing-tier__price {
  color: var(--bona-primary);
  text-shadow: 1.5px 1.5px 0 var(--bona-secondary);
}

.bona-callout-block {
  margin-bottom: 22px;
}

.bona-callout-block__bouquet {
  position: absolute;
  right: -70px;
  top: -50px;
  width: 300px;
  opacity: 1;
  pointer-events: none;
}

.bona-callout-block__eyebrow {
  font:
    400 11px/1 "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.1em;
  color: var(--bona-paper);
  opacity: 0.78;
  margin: 0 0 12px;
}

.bona-callout-block__headline {
  text-shadow: 2px 2px 0 var(--bona-primary);
  max-width: 540px;
}

.bona-callout-block__cta {
  position: relative;
  z-index: 1;
  background: var(--bona-paper);
  color: var(--bona-ink);
  text-decoration: none;
  padding: 16px 22px;
  font:
    700 12px/1 "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.08em;
  border: 1.5px solid var(--bona-ink);
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--bona-extra-spot);
}

.bona-callout-block__cta:hover {
  box-shadow: 5px 5px 0 var(--bona-extra-spot);
}

.bona-callout-form {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 280px;
}

.bona-callout-form label {
  font:
    400 10px/1 "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bona-paper);
  opacity: 0.78;
}

.bona-callout-form input[type="email"],
.bona-callout-form input[type="url"] {
  font:
    400 12px/1.4 "Geist Mono",
    ui-monospace,
    monospace;
  padding: 8px 10px;
  border: 1.5px solid var(--bona-ink);
  background: var(--bona-paper);
  color: var(--bona-ink);
  border-radius: 0;
  width: 100%;
}

.bona-callout-form small {
  font:
    400 10px/1.5 "Geist Mono",
    ui-monospace,
    monospace;
  opacity: 0.78;
  color: var(--bona-paper);
}

.landing .bona-footer {
  padding: 22px 56px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  max-width: 1136px;
  margin: 0 auto;
  position: relative;
}

/* Top rule mirrors the content (cards) width by inset, not the full
 * footer-box width. Tracks --bona-h-pad set on .landing per breakpoint. */
.landing .bona-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--bona-h-pad);
  right: var(--bona-h-pad);
  height: 1.5px;
  background: var(--bona-ink);
  pointer-events: none;
}

.bona-footer__violets {
  width: 50px;
  pointer-events: none;
}

.bona-footer__center {
  font:
    400 10px/1.6 "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.04em;
  opacity: 0.78;
}

.bona-footer__wordmark {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--bona-primary);
  text-shadow: 1.5px 1.5px 0 var(--bona-secondary);
  margin-right: 6px;
}

.bona-footer__faq-link {
  color: var(--bona-rare-accent);
  text-decoration: underline;
}

.bona-footer__sha {
  font:
    400 10px/1 "Geist Mono",
    ui-monospace,
    monospace;
  letter-spacing: 0.04em;
  color: var(--bona-secondary);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 6px;
}

.footer-legal a {
  color: inherit;
  text-decoration: underline;
}

.footer-faq {
  margin: 0;
}

/* ============================================================
 * === LANDING — responsive breakpoints ===
 * Padding alternates with layout:
 *   <480  mobile H pad   mobile layout
 *   480–639  desktop H   mobile layout
 *   640–895  mobile H    desktop layout
 *   ≥896  desktop H      desktop layout (full desktop)
 * Plus a 1024px content cap centered on .landing-page +
 * .landing .bona-footer for ultra-wide viewports.
 * ============================================================ */

/* 640–895: desktop layout, reclaim horizontal padding to mobile (18px). */
@media (min-width: 640px) and (max-width: 895px) {
  .landing {
    --bona-h-pad: 18px;
  }

  .landing-page {
    padding: 32px 18px;
  }

  .bona-top-nav__inner {
    padding: 10px 18px;
  }

  .landing .bona-footer {
    padding: 22px 18px 32px;
  }
}

/* <640: switch to mobile layout. Horizontal padding stays desktop (56px)
 * in this band — the 480–639 strip; the <480 block below reclaims it. */
@media (max-width: 639px) {
  .landing {
    --bona-h-pad: 56px;
  }

  .landing-page {
    padding: 20px 56px;
  }

  .bona-top-nav__inner {
    padding: 10px 56px;
  }

  .landing .bona-footer {
    padding: 22px 56px 32px;
  }

  .bona-hero__headline {
    font-size: 56px;
    line-height: 0.94;
  }

  .bona-hero__headline-line-1 {
    text-shadow:
      3px 3px 0 #2a3a5e33,
      6px 6px 0 #2a3a5e1c;
  }

  .bona-hero__headline-line-2 {
    text-shadow:
      3px 3px 0 #a87a2633,
      6px 6px 0 #a87a261c;
  }

  .bona-hero p {
    font-size: 16px;
    max-width: 290px;
  }

  .bona-cta {
    display: block;
    max-width: 240px;
  }

  .bona-problem-card {
    /* parent grid stacks; gap from container */
  }

  .bona-problem-card__heading {
    font-size: 17px;
  }

  .bona-problem-card__leaf {
    width: 88px;
  }

  .bona-pricing-tier-row {
    grid-template-columns: 1fr;
  }

  .bona-pricing-tier {
    border-left: 0;
    border-top: 1px solid var(--bona-ink);
  }

  .bona-pricing-tier:first-child {
    border-top: 0;
  }

  .bona-callout-block {
    padding: 20px 18px 22px;
    grid-template-columns: 1fr;
  }

  .bona-callout-block__headline {
    font-size: 22px;
  }

  .bona-callout-block .bona-cta {
    max-width: none;
    width: 100%;
  }

  .bona-top-nav__inner {
    flex-wrap: wrap;
    gap: 8px;
  }

  .bona-top-nav__platforms {
    display: none;
  }

  .bona-hero {
    min-height: 480px;
  }

  .bona-hero__bouquet {
    top: 40px;
    right: -160px;
    width: 420px;
    transform: rotate(8deg);
  }

  .bona-hero__leaf {
    top: -30px;
    left: -50px;
    right: auto;
    width: 140px;
    transform: rotate(-32deg);
  }

  .bona-hero__violets {
    bottom: -16px;
    left: 20px;
    width: 90px;
  }

  .bona-hero__content {
    max-width: none;
  }

  .bona-hero__form {
    max-width: 290px;
  }

  .bona-hero__form-row {
    grid-template-columns: 1fr;
  }

  .bona-hero__form small {
    grid-column: 1 / -1;
  }

  .bona-hero__cta-row {
    flex-direction: column;
    align-items: stretch;
    max-width: 240px;
    gap: 10px;
  }

  .bona-hero__cta-row .bona-link {
    text-align: center;
  }

  .bona-problem-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .bona-how__grid {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 16px 16px 18px;
  }

  .bona-how-step:nth-child(2) {
    padding-left: 0;
    padding-right: 50px;
  }

  .bona-how-step:nth-child(2) .bona-how-step__leaf {
    left: auto;
    right: 0;
  }

  .bona-callout-block__bouquet {
    width: 170px;
    right: -50px;
    top: -20px;
  }

  .bona-callout-form {
    min-width: 0;
  }

  .landing .bona-footer {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .bona-footer__violets {
    width: 42px;
  }
}

/* <480: reclaim horizontal padding to mobile, dim the grain. */
@media (max-width: 479px) {
  :root {
    --bona-riso-intensity: 0.45;
  }

  .landing {
    --bona-h-pad: 18px;
  }

  .bona-page,
  .bona-footer {
    padding: 20px 18px;
  }

  .landing-page {
    padding: 20px 18px;
  }

  .bona-top-nav__inner {
    padding: 10px 18px;
  }

  .landing .bona-footer {
    padding: 22px 18px 32px;
    margin: 0 16px 22px;
  }

  .bona-callout-block {
    margin: 0 16px 20px;
  }
}

/* ============================================================
 * === KIT — mobile (390w) ===
 * design-system §7
 * ============================================================ */

@media (max-width: 480px) {
  .bona-table__metric {
    font-size: 22px;
  }

  .bona-table thead th,
  .bona-table__header {
    font-size: 9px;
  }

  .bona-sparkline {
    height: 80px;
  }

  .bona-top-nav__dot {
    width: 6px;
    height: 6px;
  }

  .bona-top-nav {
    font-size: 10px;
  }
}