/* Grubby AI site — "Margin": cream paper, one vermilion accent, serif
   headlines, mono figures. A few tokens on top of Bootstrap 5.3's grid,
   navbar and accordion. */

:root {
  --paper: #f7f4ee;
  --surface: #ffffff;
  --sunken: #efeae1;
  --ink: #1c1917;
  --muted: #6e6760;
  --accent: #c4432a;
  --on-accent: #ffffff;
  --wash: rgba(196, 67, 42, 0.08);
  --wash-strong: rgba(196, 67, 42, 0.14);
  --hairline: rgba(59, 42, 30, 0.12);
  --shadow: 0 18px 40px rgba(59, 42, 30, 0.08);
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--hairline);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: #a33520;
}

[data-bs-theme="dark"] {
  --paper: #131210;
  --surface: #1e1c1a;
  --sunken: #2a2724;
  --ink: #f3efe9;
  --muted: #a69f97;
  --accent: #f0785a;
  --on-accent: #1e0e09;
  --wash: rgba(240, 120, 90, 0.14);
  --wash-strong: rgba(240, 120, 90, 0.22);
  --hairline: rgba(255, 244, 234, 0.12);
  --shadow: none;
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--hairline);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: #ff9a80;
}

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

h1, h2, h3, .serif { font-family: var(--serif); letter-spacing: -0.01em; }
.mono { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.accent { color: var(--accent); }

/* Buttons */
.btn-accent {
  --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-color: var(--on-accent);
  --bs-btn-hover-bg: #a33520; --bs-btn-hover-border-color: #a33520; --bs-btn-hover-color: var(--on-accent);
  --bs-btn-active-bg: #a33520; --bs-btn-active-border-color: #a33520; --bs-btn-active-color: var(--on-accent);
  border-radius: 999px; padding: 0.8rem 1.6rem; font-weight: 600;
  box-shadow: 0 10px 24px rgba(196, 67, 42, 0.28);
}
[data-bs-theme="dark"] .btn-accent { --bs-btn-hover-bg: #ff9a80; --bs-btn-hover-border-color: #ff9a80; --bs-btn-active-bg: #ff9a80; --bs-btn-active-border-color: #ff9a80; box-shadow: none; }
.btn-quiet {
  --bs-btn-bg: var(--sunken); --bs-btn-border-color: transparent; --bs-btn-color: var(--ink);
  --bs-btn-hover-bg: var(--wash-strong); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: var(--wash-strong); --bs-btn-active-border-color: transparent; --bs-btn-active-color: var(--ink);
  border-radius: 999px; padding: 0.8rem 1.6rem; font-weight: 600;
}
.btn-accent.btn-sm, .btn-quiet.btn-sm { padding: 0.45rem 1rem; }

/* Nav */
.navbar { background: var(--paper); border-bottom: 1px solid var(--hairline); }
.navbar .nav-link { color: var(--muted); font-weight: 500; }
.navbar .nav-link:hover { color: var(--ink); }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.brand-icon { width: 28px; height: 28px; border-radius: 8px; }

/* Surfaces */
.stage { background: var(--sunken); border-radius: 30px; overflow: hidden; }
.card-paper { background: var(--surface); border-radius: 24px; box-shadow: var(--shadow); border: 0; }
.margin-rule { position: relative; padding-left: 1.25rem; }
.margin-rule::before {
  content: ""; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem; width: 3px; border-radius: 3px; background: var(--accent);
}
.hairline-top { border-top: 1px solid var(--hairline); }
.hairline-bottom { border-bottom: 1px solid var(--hairline); }

/* Phones */
.phone { width: 100%; max-width: 300px; height: auto; border-radius: 34px; box-shadow: var(--shadow); }
.hero-stage { position: relative; padding: 2.5rem 1.5rem; }
.hero-stage::before {
  content: ""; position: absolute; inset: 20% 15%; border-radius: 50%;
  background: var(--accent); opacity: 0.14; filter: blur(60px);
}
.hero-phone { position: relative; max-width: 320px; transform: rotate(-4deg); }
@media (prefers-reduced-motion: no-preference) {
  .hero-phone { transition: transform 0.6s ease; }
  .hero-stage:hover .hero-phone { transform: rotate(0deg) translateY(-6px); }
}
.look-stage { padding: 2rem 1.25rem 0; }
.look-stage .phone { max-width: 250px; border-radius: 28px 28px 0 0; box-shadow: 0 -14px 34px rgba(59, 42, 30, 0.12); }
.night-stage { background: #131210; }
.night-stage .phone { box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.5); }

/* Hero type */
.hero-title { font-size: clamp(2.4rem, 5.4vw, 4rem); line-height: 1.05; font-weight: 600; }
.lead { color: var(--muted); }

/* Proof ledger */
.ledger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 1.5rem 0; }
.ledger .figure { font-family: var(--serif); font-size: 2.6rem; font-weight: 600; line-height: 1; }
.ledger .figure::after { content: ""; display: block; width: 40px; height: 3px; border-radius: 3px; background: var(--accent); margin-top: 0.6rem; }
.ledger p { color: var(--muted); margin: 0.75rem 0 0; }
@media (max-width: 575.98px) { .ledger { grid-template-columns: 1fr; } }

/* Steps */
.step .num { font-family: var(--mono); color: var(--accent); font-weight: 600; letter-spacing: 0.08em; }
.step h3 { font-size: 1.35rem; }

/* Check list */
.check-list li { display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: 0.7rem; }
.check-list svg { flex: none; width: 18px; height: 18px; margin-top: 0.25rem; color: var(--accent); }

/* Pricing */
.price { font-family: var(--serif); font-size: 2.4rem; font-weight: 600; }
.price small { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); letter-spacing: 0.06em; margin-left: 0.3rem; }
.plan-featured { outline: 1.5px solid var(--accent); }
.plan-tag { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); background: var(--wash); border-radius: 999px; padding: 0.25rem 0.7rem; }

/* FAQ */
.accordion { --bs-accordion-bg: var(--surface); --bs-accordion-border-color: var(--hairline); --bs-accordion-btn-bg: var(--surface); --bs-accordion-active-bg: var(--surface); --bs-accordion-active-color: var(--ink); --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-border-radius: 18px; --bs-accordion-inner-border-radius: 17px; }
.accordion-button { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.accordion-body { color: var(--muted); }

/* Footer */
footer { border-top: 1px solid var(--hairline); }
footer .nav-link { color: var(--muted); }
footer .nav-link:hover { color: var(--ink); }

/* Legal pages */
.legal-body p, .legal-body li { font-size: 1.05rem; }
.app-icon { width: 72px; height: 72px; border-radius: 16px; }