/* Balbina homepage. Self-hosted fonts (site/fonts/), not Google Fonts: matches style.css's own
   "no external fonts, scripts or trackers" rule - a marketing page shouldn't phone home either. */
@font-face{
  font-family:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/fonts/instrument-serif-regular.woff2") format("woff2");
}
@font-face{
  font-family:"Instrument Serif"; font-style:italic; font-weight:400; font-display:swap;
  src:url("/fonts/instrument-serif-italic.woff2") format("woff2");
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/fonts/jetbrains-mono.woff2") format("woff2");
}

:root{
  --bg:#faf6f2; --bg-tint:#f2ebe3; --hairline:#e8ddd2; --hairline-strong:#e0d3c6;
  --text:#241209; --text-2:#6b5847; --text-3:#7a695b;
  --accent:#b34f12; --accent-hover:#953f0d; --accent-soft:#e4a173;
  --dark:#0b0402; --dark-surface:#1a0f0a; --dark-hairline:#33221a;
  --dark-text:#f5ece4; --dark-text-2:#b8a89c; --dark-accent:#ff7527;
  --serif:"Instrument Serif", Georgia, serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration-color:var(--accent-soft);text-underline-offset:2px}
a:hover{color:var(--accent-hover)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
p{margin:0}
img{max-width:100%}

.wrap{max-width:1080px;margin:0 auto;padding-inline:24px}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.6vw,48px);line-height:1.08;margin:0;text-wrap:balance}
.lede{font-size:17px;line-height:1.6;color:var(--text-2);max-width:52ch;text-wrap:pretty}
.label{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dark-text-2)}
.btn{display:inline-block;font-family:var(--mono);font-weight:700;font-size:15px;color:var(--bg);background:var(--accent);border-radius:999px;padding:16px 30px;text-decoration:none}
.btn:hover{background:var(--accent-hover);color:var(--bg)}
.note{font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--text-3)}

/* Header */
.masthead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-block:28px}
/* 28px -> 38/36px (2026-10-05, owner's call): both read as too small next to the hero's own giant display type
   directly below - the header is the first brand mark on the page, it should carry more weight than an
   afterthought. */
.wordmark-icon{width:38px;height:38px;border-radius:9px;display:block}
.wordmark{font-family:var(--serif);font-size:36px;line-height:1;color:var(--text)}
.beta{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-soft);border-radius:999px;padding:3px 9px}
.masthead nav{margin-left:auto;display:flex;align-items:center;gap:20px;font-family:var(--mono);font-size:13px}
.masthead nav a{color:var(--text-2);text-decoration:none}
.masthead nav a:hover{color:var(--accent)}
.masthead nav a.primary{color:var(--accent);font-weight:600}

/* Hero */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:56px;align-items:center;padding-block:48px 112px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(48px,7vw,80px);line-height:1;letter-spacing:-.015em;margin:0 0 24px;text-wrap:balance}
.hero h1 em,.accent-em{color:var(--accent);font-style:italic}
.hero .lede{font-size:19px;line-height:1.55;max-width:40ch;margin-bottom:36px}
.cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hero-visual{display:flex;justify-content:center}
.phone{width:300px;max-width:100%;aspect-ratio:9/18.5;background:var(--dark);border-radius:44px;padding:12px;box-shadow:0 40px 80px -30px rgba(36,18,9,.55)}
.phone-screen{width:100%;height:100%;border-radius:34px;overflow:hidden;background:var(--dark)}
.phone-screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}

/* Ingredients */
.section{padding-bottom:112px}
.section-head{max-width:720px}
.ingredients{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:18px;overflow:hidden;margin-top:48px}
.ingredient{background:var(--bg);padding:28px 28px 32px}
.ingredient .name{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.ingredient .desc{font-size:16px;line-height:1.55;color:var(--text-2);text-wrap:pretty}
.ingredients-foot{display:flex;justify-content:space-between;align-items:baseline;gap:16px 40px;flex-wrap:wrap;margin-top:28px}
.ingredients-foot .later{font-size:16px;line-height:1.55;color:var(--text-2);max-width:52ch}
.ingredients-foot .later b{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-right:10px}
.ingredients-foot .aside{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--text)}

/* Voices (dark band) */
.band-dark{background:var(--dark);color:var(--dark-text);padding:112px 24px}
.band-dark .eyebrow{color:var(--dark-accent)}
.voices{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:56px;align-items:center}
.voices .h2{margin-bottom:20px}
.voices .sub{font-size:16px;line-height:1.55;color:var(--dark-text-2);margin-bottom:32px;max-width:40ch}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{font-family:var(--mono);font-size:13px;font-weight:600;padding:10px 18px;border-radius:999px;border:1px solid var(--dark-hairline);background:transparent;color:var(--dark-text-2);cursor:pointer}
.tab:hover{border-color:var(--dark-text-2);color:var(--dark-text)}
.tab[aria-selected="true"]{background:var(--dark-accent);border-color:var(--dark-accent);color:var(--dark)}

/* App card — the product's own UI, always dark */
.app-card{background:var(--dark-surface);border:1px solid var(--dark-hairline);border-radius:22px;padding:34px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.app-card .line{font-family:var(--serif);font-size:32px;line-height:1.15;color:var(--dark-text);text-wrap:balance}
.app-card.glow{min-height:240px;box-shadow:0 0 0 1px rgba(255,117,39,.06),0 30px 80px -30px rgba(255,117,39,.25)}
.app-card.glow .line{font-size:clamp(28px,3.4vw,38px)}
.app-card .label.hot{color:var(--dark-accent)}

/* Bookended */
.bookend{padding-block:112px}
.bookend .h2{margin-bottom:20px}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px;margin-top:48px}

/* Not-this */
.not-row{border-top:1px solid var(--hairline);padding-top:64px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:40px 56px;align-items:start}
.not-label{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:18px}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{font-family:var(--mono);font-size:13px;color:var(--text-3);text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;border:1px dashed #d8c9bb;border-radius:999px;padding:7px 14px}
.pitch{font-family:var(--serif);font-size:clamp(28px,3.4vw,36px);line-height:1.2;text-wrap:pretty}

/* Final CTA */
.final{background:var(--bg-tint);padding:112px 24px;text-align:center}
.final-inner{max-width:760px;margin:0 auto}
.final h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.6vw,64px);line-height:1.05;margin:0 0 36px;text-wrap:balance}
.final .cta-row{justify-content:center}
.final .note{margin:18px auto 0;max-width:46ch}
.install{margin:48px auto 0;max-width:620px;text-align:left;border:1px solid var(--hairline-strong);border-radius:16px;background:var(--bg)}
.install summary{cursor:pointer;padding:18px 22px;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text)}
.install-body{display:grid;gap:14px;padding:0 22px 22px}
.install-body p{font-size:15px;line-height:1.55;color:var(--text-2)}
.install-body b{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-right:8px}

footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:28px 40px;font-family:var(--mono);font-size:12px;color:var(--text-3)}
footer a{color:var(--text-3)}