/* Tally art-direction layer (Claude): loaded after tally.css. Owns the hero, the type scale and the ledger signature. */

h1 { font-size: clamp(3.4rem, 7.2vw, 6.6rem); line-height: 0.95; letter-spacing: -0.03em; }
h2 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1; letter-spacing: -0.02em; }

/* Hero: bottle-green ground, paper type, a lime-lit ledger sheet */
[data-section="hero"] { background: var(--bottle); color: var(--paper); padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); position: relative; overflow: hidden; }
[data-section="hero"]::before { /* faint ledger rules across the whole hero */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.08;
  background: repeating-linear-gradient(to bottom, transparent 0 47px, var(--paper) 47px 48px);
}
[data-section="hero"] > * { position: relative; z-index: 1; }
[data-section="hero"] .hero-grid { position: relative; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
[data-section="hero"] .eyebrow { color: var(--lime); letter-spacing: 0.14em; }
[data-section="hero"] h1 { color: var(--paper); }
[data-section="hero"] h1 em { color: var(--lime); font-style: italic; }
[data-section="hero"] .hero-copy > p:not(.eyebrow) { color: rgba(251, 251, 248, 0.78); font-size: clamp(1.05rem, 1.3vw, 1.25rem); max-width: 36ch; }
[data-section="hero"] .btn--primary { background: var(--lime); color: var(--bottle); border-color: var(--lime); }
[data-section="hero"] .btn--primary:hover { background: var(--paper); border-color: var(--paper); }
[data-section="hero"] .btn--ghost { color: var(--paper); border-color: rgba(251, 251, 248, 0.45); background: transparent; }

/* The ledger sheet */
[data-section="hero"] .ledger-card {
  position: relative; background: var(--paper); color: var(--ink); border-radius: 16px; padding: 1.6rem 1.6rem 1.3rem;
  transform: rotate(1.5deg); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}
[data-section="hero"] .ledger-card::before { /* the sheet underneath */
  content: ""; position: absolute; inset: 10px -8px -10px 8px; background: #e9efe9; border-radius: 16px; z-index: -1; transform: rotate(-3deg);
}
[data-section="hero"] .ledger-title { font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
[data-section="hero"] .ledger-row { font-size: 1.02rem; padding: 0.9rem 0; }
[data-section="hero"] .ledger-row strong { font-family: "Geist Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; font-weight: 500; }
[data-section="hero"] .ledger-row:nth-of-type(3) { background: var(--lime); margin: 0 -0.7rem; padding-left: 0.7rem; padding-right: 0.7rem; border-radius: 8px; border-bottom-color: transparent; }
[data-section="hero"] .ledger-row:nth-of-type(3) strong { font-size: 1.5rem; color: var(--bottle); }
[data-section="hero"] .ledger-total { border-bottom: 4px double var(--bottle); font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }

/* Trust strip on the dark hero: big serif numbers, ledger-rule separators */
[data-section="hero"] .trust-strip { margin-top: clamp(2.5rem, 5vw, 4rem); position: relative; }
[data-section="hero"] .trust-item { background: transparent; border: 0; border-top: 1px solid rgba(251, 251, 248, 0.25); border-radius: 0; padding: 0.9rem 0 0; box-shadow: none; }
[data-section="hero"] .trust-item strong { font-family: "Instrument Serif", serif; font-weight: 400; font-size: clamp(2rem, 3.4vw, 3rem); color: var(--paper); border: 0; }
[data-section="hero"] .trust-item p { color: rgba(251, 251, 248, 0.7); }

/* Double-rule accent on key numbers elsewhere */
.price-chip, .trust-item strong { font-variant-numeric: tabular-nums; }

@media (max-width: 810px) {
  [data-section="hero"] .ledger-card { transform: none; margin-top: 0.5rem; }
  [data-section="hero"] .ledger-card::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { [data-section="hero"] .ledger-card { transform: none; } }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1rem; line-height: 1; }
