@font-face { font-family: "Libre Caslon Text"; font-weight: 400; font-display: swap; src: url("https://beargrassai.com/assets/fonts/libre-caslon-text-latin-400.woff2") format("woff2"); }
  @font-face { font-family: "Libre Caslon Text"; font-weight: 700; font-display: swap; src: url("https://beargrassai.com/assets/fonts/libre-caslon-text-latin-700.woff2") format("woff2"); }
  @font-face { font-family: "Public Sans"; font-weight: 300 700; font-display: swap; src: url("https://beargrassai.com/assets/fonts/public-sans-latin.woff2") format("woff2"); }
  :root {
    --canvas:#0a1024; --night:#16212e; --night-2:#1d2a3a; --paper:#f4ebd7; --cream:#f0e6cf; --ink:#231f1a; --ink-2:#4d453c;
    --gold:#d4a25a; --gold-bright:#f4c45a; --barn:#a64b3b; --olive:#859160;
    --rule:rgba(240,230,207,.16); --rule-ink:rgba(35,31,26,.14);
    --disp:"Libre Caslon Text", Georgia, serif; --ui:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --r-lg:18px; --r-md:12px; --r-pill:999px; --w:min(100%, 1140px); --pad:clamp(1.1rem, .6rem + 2vw, 2.2rem);
  }
  * { box-sizing:border-box }
  html { scroll-behavior:smooth }
  body { margin:0; background:var(--canvas); color:var(--cream); font:17px/1.6 var(--ui); }
  a { color:var(--gold-bright) }
  .wrap { width:var(--w); margin:0 auto; padding:0 var(--pad); }
  .narrow { max-width:70ch; }
  h1, h2, h3 { font-family:var(--disp); font-weight:700; color:var(--cream); margin:0; line-height:1.15; }
  h2 { font-size:clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem); margin-bottom:.7rem; }
  h3 { font-size:1.15rem; margin-bottom:.35rem; }
  p { margin:.55rem 0 }
  code { font:.93em ui-monospace, Menlo, monospace; color:var(--gold-bright); }
  .eyebrow { font-family:var(--ui); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 .8rem; }
  .small { font-size:.92rem; opacity:.78 }

  .site-head { position:sticky; top:0; z-index:20; background:rgba(10,16,36,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(240,230,207,.08); }
  .head-bar { display:flex; align-items:center; justify-content:space-between; padding-top:1.1rem; padding-bottom:1.1rem; }
  .brand img { display:block; width:180px; height:34px; }
  .brand-text { font-family:var(--disp); font-weight:700; font-size:1.55rem; letter-spacing:-.01em; text-decoration:none; color:var(--cream); line-height:1; white-space:nowrap; }
  .brand-text .at, .brand-text .ai { color:var(--gold-bright); }
  .brand-text .at { margin:0 .04em; }
  .nav { display:flex; gap:1.4rem; font-size:.95rem; }
  .nav a { color:var(--cream); text-decoration:none; opacity:.85 } .nav a:hover { opacity:1; color:var(--gold-bright) }

  .hero { position:relative; min-height:clamp(560px, 72vh, 800px); display:flex; align-items:center; overflow:hidden; margin-top:-4.2rem; padding-top:5rem; }
  .hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% center; }
  .hero-wash { position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,16,36,.9) 0%, rgba(10,16,36,.7) 45%, rgba(10,16,36,.15) 100%), linear-gradient(0deg, rgba(10,16,36,1) 0%, rgba(10,16,36,0) 30%); }
  .hero .wrap { position:relative; padding-top:3rem; padding-bottom:3.5rem; }
  .hero h1 { font-size:clamp(2.2rem, 1.3rem + 3.6vw, 3.8rem); max-width:15ch; text-shadow:0 2px 24px rgba(10,16,36,.8); }
  .hero-sub { font-family:var(--disp); font-weight:700; font-size:clamp(1.25rem, 1rem + 1.3vw, 1.8rem); color:var(--gold-bright); margin:.7rem 0 .7rem; max-width:28ch; text-shadow:0 2px 24px rgba(10,16,36,.8); }
  .lede { font-size:1.1rem; max-width:58ch; opacity:.92; }
  .btn-row { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
  .btn { display:inline-block; font:600 .98rem/1 var(--ui); padding:.9rem 1.35rem; border-radius:var(--r-pill); text-decoration:none; border:1px solid transparent; cursor:pointer; }
  .btn-primary { background:var(--barn); color:#fff; border-color:var(--barn); } .btn-primary:hover { filter:brightness(1.08) }
  .btn-ghost { background:transparent; color:var(--cream); border-color:rgba(240,230,207,.45); } .btn-ghost:hover { border-color:var(--gold-bright); color:var(--gold-bright) }

  section { padding:4rem 0; }
  section + section { border-top:1px solid var(--rule); }
  .split { display:grid; grid-template-columns:1fr 1fr; gap:2.6rem; align-items:center; }
  .split img { width:100%; height:auto; border-radius:var(--r-lg); border:1px solid var(--rule); display:block; }
  .rail { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6rem; margin-top:1.6rem; }
  .rail .num { font-family:var(--disp); font-size:2.4rem; color:var(--gold-bright); line-height:1; margin-bottom:.5rem; }
  .cream-card { background:var(--paper); color:var(--ink); border-radius:var(--r-lg); padding:2.2rem var(--pad); }
  .cream-card h2, .cream-card h3 { color:var(--ink) } .cream-card a { color:var(--barn) } .cream-card .small { color:var(--ink-2); opacity:1 }
  .cream-card code { color:var(--barn) } .cream-card .eyebrow { color:var(--barn) }

  .free-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; margin-top:1.4rem; }
  .free-row div { background:rgba(255,255,255,.55); border:1px solid var(--rule-ink); border-radius:var(--r-md); padding:1rem 1.1rem; }
  .free-row b { display:block; font-family:var(--disp); font-size:1.15rem; color:var(--ink); margin-bottom:.25rem; }
  .free-row span { font-size:.95rem; color:var(--ink-2); }
  .hero-note { margin-top:1rem; opacity:.8 }
  .tiers { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem; margin-top:1.6rem; }
  .tier { background:var(--night); border:1px solid var(--rule); border-radius:var(--r-lg); padding:1.6rem 1.5rem; display:flex; flex-direction:column; }
  .tier p:not(.eyebrow) { flex:1 }
  .tier .btn { align-self:flex-start; margin-top:.6rem }
  .tier-note { display:block; font-size:.88rem; opacity:.7; margin-top:.8rem }
  .tier-paid { border-color:var(--gold); }
  .price { color:var(--gold-bright); font-family:var(--disp); font-size:1.15em; }
  .close { text-align:center; padding:1rem 0 .5rem; }
  .close .lede { margin:.4rem auto 0; }
  .close .btn-row { justify-content:center }
  .never { list-style:none; padding:0; margin:1.2rem 0 0; max-width:60ch; }
  .never li { position:relative; padding:.55rem 0 .55rem 2.2rem; font-size:1.1rem; border-top:1px solid var(--rule); }
  .never li:last-child { border-bottom:1px solid var(--rule); }
  .never li::before { content:"✓"; position:absolute; left:.2rem; top:.5rem; color:var(--gold-bright); font-family:var(--disp); font-size:1.2rem; }
  .never b { color:var(--cream) }

  .capture { text-align:center; }
  .capture .eyebrow { color:var(--barn) }
  .sentence { font-family:var(--disp); font-size:clamp(1.15rem, 1rem + .9vw, 1.5rem); line-height:2.3; color:var(--ink); max-width:46ch; margin:.6rem auto 0; }
  .sentence input, .sentence select { font:inherit; font-family:var(--ui); font-size:.8em; padding:.15rem .5rem; margin:0 .15rem; background:#fff; color:var(--ink); border:1px solid var(--rule-ink); border-bottom:2px solid var(--barn); border-radius:8px; }
  .sentence input[type=text] { width:12ch }
  .capture .micro a { color:var(--barn) }
  .btn-ink { color:var(--ink); border-color:rgba(35,31,26,.35); } .btn-ink:hover { color:var(--barn); border-color:var(--barn) }
  .capture pre { text-align:left; display:inline-block; min-width:26ch; background:#fff; color:var(--ink); border:1px solid var(--rule-ink); border-radius:var(--r-md); padding:.9rem 1.1rem; font:15px/1.5 ui-monospace, Menlo, monospace; margin:1.2rem auto .4rem; white-space:pre-wrap; }
  .capture .btn-row { justify-content:center; margin-top:1rem }
  .capture .micro { color:var(--ink-2); font-size:.92rem; margin-top:.9rem }

  .three { display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem; margin-top:1.4rem; }
  .three h3 { color:var(--gold-bright) }
  .three pre { background:var(--night); border:1px solid var(--rule); border-radius:var(--r-md); padding:.8rem 1rem; font:14px/1.5 ui-monospace, Menlo, monospace; color:var(--paper); margin:.6rem 0; white-space:pre-wrap; }

  details { border-top:1px solid var(--rule); padding:.9rem 0; }
  details:last-of-type { border-bottom:1px solid var(--rule); }
  summary { cursor:pointer; font-family:var(--disp); font-size:1.15rem; color:var(--cream); list-style:none; display:flex; justify-content:space-between; gap:1rem; }
  summary::-webkit-details-marker { display:none }
  summary::after { content:"+"; color:var(--gold-bright); font-family:var(--ui); font-weight:300; font-size:1.4rem; line-height:1; }
  details[open] summary::after { content:"–" }
  details p { margin:.6rem 0 .2rem; max-width:62ch; opacity:.92 }
  .proof { display:grid; grid-template-columns:repeat(4, 1fr); gap:1.2rem; margin:1.6rem 0 1.2rem; }
  .proof div { background:var(--night); border:1px solid var(--rule); border-radius:var(--r-lg); padding:1.4rem 1rem; text-align:center; }
  .proof b { display:block; font-family:var(--disp); font-size:3rem; color:var(--gold-bright); line-height:1; margin-bottom:.4rem; }
  .proof span { font-size:.95rem; opacity:.85 }
  .site-foot { border-top:1px solid var(--rule); padding:2rem 0 2.5rem; font-size:.92rem; }
  .foot-grid { display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 2rem; }
  .foot-motto { font-family:var(--disp); color:var(--gold); }
  .foot-nav { display:flex; flex-wrap:wrap; gap:1.1rem; } .foot-nav a { color:var(--cream); opacity:.8; text-decoration:none } .foot-nav a:hover { opacity:1; color:var(--gold-bright) }
  .foot-bar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--rule); opacity:.75; }

  @media (max-width:820px) {
    .split, .rail, .three { grid-template-columns:1fr; }
    .proof { grid-template-columns:repeat(2, 1fr); }
    .free-row, .tiers { grid-template-columns:1fr; }
    .head-bar { flex-wrap:wrap; gap:.4rem .8rem; padding-top:.8rem; padding-bottom:.7rem; }
    .nav { width:100%; gap:.9rem 1.1rem; font-size:.88rem; flex-wrap:wrap; }
    .hero { min-height:auto }
    .sentence { line-height:2.6 }
  }

/* subpages */
.page { padding:2.5rem 0 4rem; }
.page h1 { font-size:clamp(2rem, 1.3rem + 2.6vw, 3rem); margin-bottom:.6rem; max-width:22ch; }
.page h2 { font-size:1.4rem; margin:2.4rem 0 .5rem; color:var(--gold-bright); }
.page .lede { margin-bottom:1.2rem; }
.page pre { background:var(--night); border:1px solid var(--rule); border-radius:var(--r-md); padding:1rem 1.1rem; font:15px/1.5 ui-monospace, Menlo, monospace; color:var(--paper); margin:.9rem 0; white-space:pre-wrap; }
.page ul { padding-left:1.2rem } .page li { margin:.45rem 0 }
.page .never li { padding-left:2.2rem }
.facts { border-collapse:collapse; width:100%; font-size:.95rem; margin:1rem 0; }
.facts th, .facts td { text-align:left; vertical-align:top; padding:.55rem .6rem; border-top:1px solid var(--rule); }
.facts th { color:var(--gold); font-weight:600; border-top:none; }
.yaml { font-size:15px; }
.yaml .k { color:var(--gold-bright) } .yaml .v { color:var(--cream) } .yaml .c { color:#a9b87a; opacity:.85 } .yaml .d { color:#d97b6b }
.never li.no::before { content:"✗"; color:#d97b6b; }

/* visuals between the sections */
.brand-row { display:flex; align-items:baseline; gap:.8rem; }
.by { font:500 .8rem/1 var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--gold); text-decoration:none; opacity:.85 } .by:hover { opacity:1 }
.ribbon { background:linear-gradient(90deg, #a64b3b, #883c2f); color:var(--cream); font:500 .9rem/1.4 var(--ui); }
.ribbon .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1.5rem; padding-top:.7rem; padding-bottom:.7rem; }
.ribbon a { color:var(--cream); text-decoration:underline; text-underline-offset:3px }
.ribbon-tail { background:linear-gradient(90deg, #2b4563, #213750); }
.scene { position:relative; height:clamp(220px, 30vw, 400px); overflow:hidden; background:var(--canvas); border-top:1px solid var(--rule); }
.scene img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.scene-line { position:absolute; inset:auto 0 12% 0; display:flex; justify-content:center; padding:0 var(--pad); }
.scene-line span { font-family:var(--disp); font-size:clamp(1.1rem, .9rem + 1.2vw, 1.7rem); color:var(--cream); background:rgba(10,16,36,.55); border:1px solid var(--rule); border-radius:var(--r-pill); padding:.5rem 1.2rem; }
.band-photo { position:relative; background-size:cover; background-position:center; }
.band-photo .wash { position:absolute; inset:0; }
.wash-navy { background:linear-gradient(180deg, rgba(10,16,36,.86), rgba(10,16,36,.72)); }
.wash-soft { background:linear-gradient(180deg, rgba(10,16,36,.45), rgba(10,16,36,.7)); }
.band-photo .over { position:relative; }
.band-photo .proof div { background:rgba(10,16,36,.6); }
.tier img { width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; border-radius:var(--r-md); margin:-.2rem 0 1rem; display:block; }

/* page heroes and page components */
.page-hero { position:relative; min-height:clamp(380px, 46vh, 560px); display:flex; align-items:flex-end; overflow:hidden; margin-top:-4.2rem; padding-top:5rem; background-size:cover; background-position:center; background-color:var(--canvas); }
.page-hero .scene-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-hero .wash { position:absolute; inset:0; }
.page-hero .over { position:relative; padding-top:2.5rem; padding-bottom:2.8rem; }
.page-hero h1 { font-size:clamp(2rem, 1.3rem + 2.8vw, 3.2rem); max-width:20ch; text-shadow:0 2px 24px rgba(10,16,36,.8); }
.page-hero .lede { max-width:60ch; text-shadow:0 1px 12px rgba(10,16,36,.8); }
.page section { padding:3.5rem 0; }
.page section + section { border-top:1px solid var(--rule); }
.page h2 { font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); margin-bottom:.6rem; color:var(--cream); }
.page .cream-card h2 { color:var(--ink) }
.page .rail p { margin:.4rem 0 }
.page .rail pre { font-size:14px; }
.cells { display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem; margin-top:1.2rem; }
.cells.four { grid-template-columns:repeat(4, 1fr); }
.cells.three-up { grid-template-columns:repeat(3, 1fr); }
.cell { background:var(--night-2); border:1px solid var(--rule); border-radius:var(--r-md); padding:1rem 1.1rem; font-size:.97rem; }
.cell b { display:block; color:var(--gold-bright); font-weight:600; margin-bottom:.25rem; font-family:var(--disp); font-size:1.08rem; }
.cream-card .cell { background:rgba(255,255,255,.55); border-color:var(--rule-ink); color:var(--ink); }
.cream-card .cell b { color:var(--ink) }
.cream-card .cell.yes b::before { content:"✓ "; color:var(--olive) }
.cream-card .cell.no b::before { content:"✗ "; color:var(--barn) }
.cream-card .never li { border-color:var(--rule-ink) } .cream-card .never li::before { color:var(--barn) } .cream-card .never b { color:var(--ink) }
.page .split pre { margin:0 }
@media (max-width:820px) { .cells, .cells.four, .cells.three-up { grid-template-columns:1fr; } .page-hero { min-height:auto } }