:root {
  --bg: #FAF8F3;
  --surface: #FFFEFB;
  --surface-2: #F1EFE9;
  --cream: #F5EFE4;
  --emerald: #1F7A5A;
  --ink: #2b2420;
  --muted: #5E564E;
  --line: #E2DDD2;
  --green: #0E4D3A;
  --green-d: #0A3A2C;
  --green-tint: #E4F0EA;
  --rust: #9e4527;
  --rust-tint: #f6e3d7;
  --brass: #B48A3E;
  --font-display: "Zodiak", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Satoshi", "Segoe UI", system-ui, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  --text-hero: clamp(2.35rem, 1.5rem + 3.6vw, 4.1rem);
  --r: 14px;
  --r-lg: 22px;
  --shadow: 0 1px 2px rgba(60, 40, 20, .06), 0 10px 30px -12px rgba(60, 40, 20, .18);
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--green); }
a:hover { color: var(--green-d); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: var(--text-lg); font-weight: 700; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.center { text-align: center; }
.muted { color: var(--muted); }
.eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--rust); margin-bottom: .75em; }
.lead { font-size: var(--text-lg); color: var(--muted); max-width: 40em; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 46px; padding: .7em 1.25em; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 700; font-size: var(--text-sm); text-decoration: none; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-d); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--green); color: var(--green); }
.btn-ghost:hover { background: var(--green-tint); color: var(--green-d); }
.text-link { font-weight: 700; text-underline-offset: 3px; }

/* header */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(245, 239, 228, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 14px; min-height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark, .avatar {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--green); color: var(--bg); font-family: var(--font-display); font-weight: 700; font-size: 15px; flex: none;
}
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: 0; }
.concept-tag {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--rust);
  border: 1px solid #d9b6a3; background: var(--rust-tint); padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.site-nav { margin-left: auto; display: flex; gap: 4px; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: var(--text-sm); padding: 8px 12px; border-radius: 999px; }
.site-nav a:hover { background: var(--surface-2); }
.site-nav a[aria-current="page"] { background: var(--green-tint); color: var(--green-d); font-weight: 700; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: var(--text-sm); cursor: pointer; }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 2px; padding: 10px 16px 16px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 14px; font-size: var(--text-base); }
}
@media (max-width: 440px) {
  .brand-mark { display: none; }
  .brand-name { font-size: 1.02rem; white-space: nowrap; }
  .header-inner { gap: 8px; min-height: 58px; }
  .concept-tag { font-size: 11px; padding: 2px 8px; }
  .nav-toggle { padding: 6px 12px; }
}
@media (max-width: 350px) { .brand-name { font-size: .92rem; } .concept-tag { font-size: 10.5px; padding: 2px 6px; } .nav-toggle { padding: 5px 10px; } }

/* hero + chat: the chat is the hero */
.hero-chat { padding: clamp(18px, 3vw, 36px) 0 clamp(36px, 5vw, 64px); }
.hero-inner { display: flex; flex-direction: column; align-items: center; }
.hero-head { text-align: center; max-width: 760px; margin-bottom: 18px; }
.hero-head .eyebrow { margin-bottom: .5em; }
.hero h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); margin-bottom: .25em; }
.hero-head .lead { margin: 0 auto; max-width: 64ch; }
.chat-slot { width: 100%; max-width: 760px; }
.hero-after { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-bottom: clamp(40px, 6vw, 80px); }
.promises { list-style: none; padding: 0; margin: 0; display: grid; gap: .9em; font-size: var(--text-lg); }
.promises li { padding-left: 1.6em; position: relative; color: var(--muted); }
.promises li::before { content: ""; position: absolute; left: 0; top: .5em; width: .65em; height: .65em; border-radius: 50%; background: var(--brass); }
.promises strong { color: var(--ink); }
.hero-photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 16 / 10; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) { .hero-after { grid-template-columns: 1fr; } .promises { font-size: var(--text-base); } }

.chat {
  position: relative;
  display: flex; flex-direction: column; height: clamp(440px, calc(100vh - 372px), 720px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden;
}
.chat.is-done:not(.is-expanded) { height: auto; }
.chat.is-done:not(.is-expanded) .chat-log { overflow: visible; flex: none; }
.chat.is-expanded {
  position: fixed; z-index: 60; margin: 0; max-width: none;
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease, border-radius .25s ease;
  box-shadow: 0 30px 80px -20px rgba(30, 20, 10, .45);
}
.chat-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(35, 28, 22, .42); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.chat-scrim.is-on { opacity: 1; pointer-events: auto; }
body.chat-open { overflow: hidden; }
.chat-close { display: none; white-space: nowrap; flex: none; background: var(--ink); color: #fff; border: 0; border-radius: 999px; padding: 7px 14px; font-size: var(--text-xs); font-weight: 700; cursor: pointer; }
.chat-close:hover { background: #000; }
.chat.is-expanded .chat-close { display: inline-flex; align-items: center; gap: 6px; }
.chat-input { font-size: 17px !important; padding: 13px 18px !important; }
.send { width: 52px !important; height: 52px !important; }
@media (prefers-reduced-motion: reduce) { .chat.is-expanded, .chat-scrim { transition: none; } }
@media (max-width: 640px) {
  .chat.is-expanded { border-radius: 0; border: 0; }
  .chat:not(.is-expanded) .chat-chips { flex-wrap: nowrap; overflow-x: auto; max-height: none; padding-bottom: 8px; scrollbar-width: thin; }
  .chat:not(.is-expanded) .chat-chips .chip { flex: none; white-space: nowrap; }
  .chat { height: max(420px, calc(100svh - 300px)); }
  .hero-head { margin-bottom: 14px; }
  .hero-head .lead { font-size: var(--text-sm); }
}
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.chat-title { margin: 0; font-weight: 700; }
.chat-sub { margin: 0; font-size: var(--text-xs); color: var(--muted); }
.chat-restart { margin-left: auto; white-space: nowrap; flex: none; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: var(--text-xs); font-weight: 700; color: var(--muted); cursor: pointer; }
.chat-restart:hover { background: var(--surface); color: var(--ink); }
.chat-log { position: relative; flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; overscroll-behavior: contain; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 18px; animation: pop .22s ease-out; }
.msg p { margin: 0; }
.msg p + p { margin-top: .6em; }
.msg.bot { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 6px; }
.msg.user { align-self: flex-end; background: var(--green); color: #fff; border-bottom-right-radius: 6px; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.typing { padding: 12px 16px; }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .45; animation: blink 1.1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: .9; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .msg, .dots i { animation: none; } .chat-log { scroll-behavior: auto; } }

.diagnosis, .legal-note, .results { max-width: 100%; width: 100%; }
.msg.bot.diagnosis { background: var(--green-tint); border: 1px solid #c8d8c9; }
.msg.bot.legal-note { background: var(--rust-tint); border: 1px solid #e6c6b3; }
.diag-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green-d); margin-bottom: .4em !important; }
.legal-note .diag-label { color: var(--rust); }
.diag-also { font-size: var(--text-sm); }
.msg.bot.results { background: transparent; padding: 4px 0; border-radius: 0; }
.results > .diag-label { padding: 0 4px; color: var(--muted); }
.rcards { display: grid; gap: 10px; margin-top: 6px; }
.rcard { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px 16px; }
.rcard h3 { font-size: 1.05rem; margin: 0 0 .3em; }
.rcard p { font-size: var(--text-sm); color: var(--muted); }
.rcard .btn { margin-top: 12px; width: 100%; }
.rcard-price { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem !important; color: var(--ink) !important; margin-bottom: .1em !important; }
.rcard-price span, .price span { font-family: var(--font-body); font-size: var(--text-sm); color: var(--muted); font-weight: 500; }
.rcard-article { margin-top: .6em !important; color: var(--ink) !important; font-weight: 700; }
.rcard.is-rec { border: 2px solid var(--green); box-shadow: 0 8px 22px -12px rgba(47, 86, 65, .55); }
.rec-tag { display: inline-block; font-size: 12px; font-weight: 700; color: #fff; background: var(--green); border-radius: 999px; padding: 2px 10px; margin-bottom: 8px; }
.results-foot { font-size: var(--text-xs); color: var(--muted); margin-top: 10px !important; padding: 0 4px; }

.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 4px; max-height: 42%; overflow-y: auto; }
.chat-chips[hidden] { display: none; }
.chip {
  background: var(--surface); border: 1.5px solid var(--green); color: var(--green-d); font-weight: 600; font-size: var(--text-sm);
  border-radius: 999px; padding: 8px 14px; cursor: pointer; text-align: left; line-height: 1.3; min-height: 40px;
  transition: background .15s, color .15s;
}
.chip:hover { background: var(--green); color: #fff; }
.chip-restart { border-style: dashed; }
.chat-form { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); margin-top: 8px; }
.chat-input { flex: 1; min-width: 0; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 16px; font-size: 16px; }
.chat-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }
.send { flex: none; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--green); color: #fff; display: grid; place-items: center; cursor: pointer; }
.send:hover { background: var(--green-d); }

@media (max-width: 420px) {
  .chat-log { padding: 14px 12px 6px; }
  .msg { max-width: 92%; }
  .chat-chips { padding: 8px 12px 2px; }
  .chip { font-size: 14px; padding: 7px 12px; }
}

/* sections */
.band { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(48px, 7vw, 88px) 0; }
.section-head { text-align: center; margin-bottom: 32px; }
.section-head h2 { font-size: var(--text-2xl); }
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 24px; }
.level { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
.level-n { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--green-tint); color: var(--green-d); margin-bottom: 14px; }
.level-price { font-weight: 700; color: var(--rust); margin-bottom: .6em; }
.level p:last-child { color: var(--muted); margin: 0; }
@media (max-width: 820px) { .levels { grid-template-columns: 1fr; } }

.feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding-top: clamp(56px, 8vw, 100px); padding-bottom: clamp(56px, 8vw, 100px); }
.feature-photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; }
.feature h2 { font-size: var(--text-2xl); }
.feature-copy p:not(.eyebrow) { color: var(--muted); margin-bottom: 1.5em; }
@media (max-width: 820px) { .feature { grid-template-columns: 1fr; } }

.library-teaser { padding-bottom: clamp(56px, 8vw, 100px); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-bottom: 28px; }
.card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 22px 18px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #cdbca3; color: var(--ink); }
.card h3 { font-family: var(--font-display); font-size: 1.3rem; }
.card p { color: var(--muted); font-size: var(--text-sm); }
.card-cats { font-size: var(--text-xs) !important; font-weight: 700; color: var(--rust) !important; margin-bottom: .6em; }
.card-meta { margin: auto 0 0 !important; font-size: var(--text-xs) !important; font-weight: 600; }

/* pages */
.page { padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(56px, 8vw, 96px); }
.narrow { max-width: 820px; }
.page-head { margin-bottom: 32px; }
.page-head h1 { font-size: var(--text-2xl); }
.lib-tools { display: grid; gap: 14px; margin-bottom: 10px; }
.search { width: 100%; max-width: 560px; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 12px 20px; font-size: 16px; }
.search:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: var(--text-sm); font-weight: 600; cursor: pointer; min-height: 38px; }
.filter:hover { border-color: var(--green); }
.filter[aria-pressed="true"] { background: var(--green); color: #fff; border-color: var(--green); }
.lib-count { font-size: var(--text-sm); color: var(--muted); margin: 8px 0 16px; }
.empty { text-align: center; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-lg); padding: 36px 20px; margin-bottom: 28px; }
.empty[hidden] { display: none; }
.contribute-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--green); color: #fff; border-radius: var(--r-lg); padding: 28px 32px; margin-top: 20px; }
.contribute-cta h2 { font-size: var(--text-xl); }
.contribute-cta p { margin: 0; color: #e4ece5; }
.contribute-cta .btn-primary { background: var(--bg); color: var(--green-d); }
.contribute-cta .btn-primary:hover { background: #fff; }

/* article */
.article-wrap { max-width: 780px; }
.back { display: inline-block; font-weight: 700; margin-bottom: 24px; text-underline-offset: 3px; }
.back::before { content: "\2190\00a0"; }
.article h1 { font-size: var(--text-2xl); }
.article-meta { color: var(--muted); font-size: var(--text-sm); border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 28px; }
.prose { font-size: 1.1rem; line-height: 1.72; }
.prose h3 { font-family: var(--font-body); font-size: 1.2rem; margin-top: 1.8em; }
.prose h2 { font-size: var(--text-xl); margin-top: 1.4em; }
.prose ul { padding-left: 1.2em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--brass); }
.article-disclaimer { margin-top: 2em; font-size: var(--text-sm); color: var(--muted); font-style: normal; border-top: 1px solid var(--line); padding-top: 16px; }
.article-cta { background: var(--surface-2); border-radius: var(--r-lg); padding: 26px 28px; margin: 36px 0 48px; }
.article-cta h2 { font-size: var(--text-xl); }
.related-h { font-size: var(--text-xl); margin-bottom: 18px; }
.sign { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; margin-top: 1.5em; }

/* how */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 40px; display: grid; gap: 14px; }
.steps li { counter-increment: s; position: relative; padding: 4px 0 4px 56px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; }
.steps h3 { margin-bottom: .2em; }
.steps p { color: var(--muted); margin: 0; }
.levels-detail { grid-template-columns: 1fr; }
.note { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 30px; margin-top: 28px; }
.note h2 { font-size: var(--text-xl); }
.note ul { margin: 0; padding-left: 1.2em; color: var(--muted); }

/* pricing */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.price-card h2 { font-family: var(--font-body); font-size: var(--text-lg); }
.price { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; margin-bottom: .3em; line-height: 1.1; }
.price-note { font-size: var(--text-sm); color: var(--rust); font-weight: 600; }
.price-card ul { padding-left: 1.2em; color: var(--muted); margin: 0 0 24px; flex: 1; }
.price-card li { margin-bottom: .35em; }
.price-card.featured { border: 2px solid var(--green); box-shadow: var(--shadow); }
.price-card .rec-tag { align-self: flex-start; }
.fine { margin-top: 24px; font-size: var(--text-sm); color: var(--muted); text-align: center; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; max-width: 520px; } }

/* dealers */
.dealer-hero { position: relative; min-height: clamp(420px, 56vw, 560px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.dealer-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dealer-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25, 20, 15, .15) 0%, rgba(25, 20, 15, .55) 45%, rgba(20, 16, 12, .9) 100%); }
.dealer-hero-copy { position: relative; z-index: 1; padding-top: 80px; padding-bottom: clamp(32px, 5vw, 56px); width: 100%; }
.dealer-hero h1 { font-size: var(--text-hero); max-width: 12em; }
.dealer-hero .eyebrow { color: #f1c9a4; }
.dealer-hero .lead { color: #efe7dc; }
.dealer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; }
.tile p { color: var(--muted); flex: 1; }
.dealer-ask { text-align: center; margin-top: 48px; background: var(--surface-2); border-radius: var(--r-lg); padding: 36px 24px; }
.dealer-ask h2 { font-size: var(--text-xl); }
.dealer-ask p { color: var(--muted); }

/* contribute */
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 36px; }
.rules > div { background: var(--surface-2); border-radius: var(--r); padding: 18px 20px; }
.rules h3 { font-size: 1.05rem; }
.rules p { font-size: var(--text-sm); color: var(--muted); margin: 0; }
@media (max-width: 720px) { .rules { grid-template-columns: 1fr; } }
.submit-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 4vw, 34px); display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; font-size: var(--text-sm); }
.field input[type="text"], .field select, .field textarea { width: 100%; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 11px 14px; font-size: 16px; }
.field textarea { resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }
[aria-invalid="true"] { border-color: var(--rust) !important; }
.field.check { grid-template-columns: auto 1fr; align-items: start; gap: 10px; }
.field.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--green); }
.field.check label { font-weight: 500; }
.hint { font-size: var(--text-xs); color: var(--muted); margin: 0; }
.form-error { color: var(--rust); font-weight: 700; margin: 0; }
.submit-form .btn { justify-self: start; }

/* footer */
.site-footer { border-top: 1px solid var(--line); background: var(--surface-2); padding: 36px 0 28px; }
.footer-inner { display: grid; grid-template-columns: auto 1fr; gap: 16px 32px; align-items: start; }
.footer-inner nav { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: flex-end; }
.footer-inner nav a { color: var(--ink); font-size: var(--text-sm); text-underline-offset: 3px; }
.footer-inner .muted { font-size: var(--text-sm); margin: 0; }
.disclaimer { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; margin: 0; }
@media (max-width: 640px) { .footer-inner { grid-template-columns: 1fr; } .footer-inner nav { justify-content: flex-start; } }

/* dialog */
.preview-dialog { border: none; border-radius: var(--r-lg); padding: 0; max-width: min(460px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(30, 20, 10, .5); }
.preview-dialog::backdrop { background: rgba(35, 28, 20, .5); }
.preview-dialog form { padding: 28px 28px 24px; }
.preview-dialog h2 { font-size: var(--text-xl); }
.preview-dialog p { color: var(--muted); }
.preview-dialog .pd-safe { color: var(--green-d); font-weight: 700; background: var(--green-tint); border-radius: 10px; padding: 10px 14px; }
.preview-dialog .btn { width: 100%; }
@media (max-width: 480px) { .hide-sm { display: none; } }

.ours-tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--rust); background: var(--rust-tint); border: 1px solid #e6c6b3; border-radius: 999px; padding: 2px 10px; margin: 0 6px 8px 0; }
.rcard-ours .rec-tag { margin-right: 6px; }
.rcard-note { font-size: var(--text-xs) !important; font-style: normal; color: var(--rust) !important; font-weight: 600; margin-top: .5em !important; }
.rcard-guarantee { margin-top: .6em !important; background: var(--surface); border-left: 3px solid var(--brass); padding: 8px 10px; border-radius: 6px; }
.rcard-guarantee strong { color: var(--ink); }

/* Partner-shop chips: each handoff uses that brand's own color (Lyle amber, Floor General red). Studio palette stays green/rust/brass. */
.brand-chip { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; padding: 2px 9px; margin: 0 6px 8px 0; vertical-align: top; }
.brand-chip--lyle { background: #E8A33D; color: #0A0E14; border-radius: 14px; }
.brand-chip--hero { background: #D7261E; color: #fff; border-radius: 4px; }
.rcard.rcard-lyle { border-top: 3px solid #E8A33D; }
.rcard.rcard-hero { border-top: 3px solid #D7261E; }

/* ---------- Tools we built: each shop in its own brand ---------- */
.shops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 28px); }
.shop { padding: clamp(24px, 3.5vw, 40px); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.shop h2 { margin: 0; }
.shop-facts { margin: 0; display: grid; gap: 14px; }
.shop-facts dt { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }
.shop-facts dd { margin: 0; line-height: 1.55; }
.shop-offer { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 8px; }

/* Lyle: near-black, amber, Space Grotesk, mono labels inside this panel only */
.shop-lyle { background: #0A0E14; color: #E6E8EB; border-radius: 14px; border: 1px solid #1F2630; font-family: 'Space Grotesk', 'Satoshi', system-ui, sans-serif; }
.shop-lyle-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid #222B36; padding-bottom: 14px; }
.shop-lyle h2 span { color: #E8A33D; }
.lyle-label, .shop-lyle dt { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; color: #E8A33D; font-size: .78rem; letter-spacing: .02em; text-transform: none; margin: 0; }
.shop-lyle h2 { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; letter-spacing: -.03em; font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); color: #fff; line-height: 1; }
.shop-lyle dd { color: #C9CED6; }
.lyle-founder { margin: 0; padding-left: 14px; border-left: 3px solid #E8A33D; color: #fff; font-size: 1.05rem; }
.lyle-offer { margin: 0; font-weight: 700; color: #fff; font-size: 1.1rem; }
.lyle-btn { font: inherit; font-weight: 700; background: #E8A33D; color: #0A0E14; border: 0; border-radius: 10px; padding: 13px 20px; cursor: pointer; }
.lyle-btn:hover { background: #F2B65A; }
.lyle-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Floor General: concrete white, hero red, navy, Barlow Condensed caps */
.shop-hero { background: #F4F4F1; color: #14213D; border-radius: 4px; border: 3px solid #14213D; border-top: 10px solid #D7261E; font-family: 'Archivo', system-ui, sans-serif; }
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 3px solid #14213D; padding-bottom: 14px; }
.shop-hero h2 span { background: #D7261E; color: #fff; padding: 0 8px; border-radius: 4px; display: inline-block; }
.hero-stamp { margin: 0; font-weight: 700; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; border: 2px solid #B21E17; color: #B21E17; padding: 4px 9px; border-radius: 4px; }
.shop-hero h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.2rem); line-height: .95; letter-spacing: .01em; color: #14213D; }
.shop-hero dt { color: #B21E17; }
.shop-hero dd { color: #2A3550; }
.hero-vow { margin: 0; background: #fff; border: 2px solid #D9DCDF; border-top: 5px solid #D7261E; border-radius: 4px; padding: 14px 16px; line-height: 1.55; color: #14213D; }
.hero-btn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; background: #D7261E; color: #fff; border: 0; border-radius: 4px; padding: 12px 20px; cursor: pointer; box-shadow: 0 3px 0 #14213D; }
.hero-btn:hover { background: #B21E17; }
.hero-btn:focus-visible { outline: 3px solid #14213D; outline-offset: 3px; }

/* closing card in Studio style */
.shop-studio { grid-column: 1 / -1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); align-items: flex-start; }
.shop-studio p { margin: 0; color: var(--muted); max-width: 60ch; }
@media (max-width: 860px) { .shops { grid-template-columns: 1fr; } }

/* ================= Green concept overrides ================= */
a { color: var(--emerald); }
a:hover { color: var(--green-d); }
.eyebrow { color: var(--emerald); }
/* rust only on primary action buttons */
.btn-primary { background: var(--rust); color: #fff; }
.btn-primary:hover { background: #84391F; color: #fff; }
.contribute-cta .btn-primary { background: var(--rust); color: #fff; }
.contribute-cta .btn-primary:hover { background: #84391F; }
.btn-ghost { border-color: var(--green); color: var(--green); }
.btn-ghost:hover { background: var(--green-tint); color: var(--green-d); }
.tag, .concept-tag, .site-header [class*="tag"] { color: var(--green-d); background: var(--green-tint); border-color: #BCD8CA; }
.site-header { background: rgba(250, 248, 243, .94); border-bottom: 1px solid var(--line); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--brass) 20%, var(--brass) 80%, transparent); opacity: .55; }
.site-nav a:hover { background: var(--green-tint); color: var(--green-d); }
.site-nav a[aria-current="page"] { background: var(--green); color: #fff; }
.level-price, .card-cats, .price-note, .rcard-note { color: var(--green-d) !important; }
.legal-note .diag-label { color: #7A3B1F; }
.msg.bot.legal-note { background: var(--cream); border-color: #E5D8C3; }
.ours-tag { color: var(--green-d); background: var(--green-tint); border-color: #BCD8CA; }
.form-error { color: #A12A1B; }
[aria-invalid="true"] { border-color: #A12A1B !important; }
.card:hover { border-color: var(--emerald); }
.rcard.is-rec { box-shadow: 0 8px 22px -12px rgba(14, 77, 58, .55); }
.chip:hover { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.send:hover { background: var(--emerald); }
.msg.bot.diagnosis { border-color: #BCD8CA; }
.rules > div, .article-cta, .dealer-ask { background: var(--cream); }
.band { background: var(--surface-2); border-color: var(--line); }
.prose blockquote { background: var(--cream); }
/* brass as thin rules */
.band { border-top: 1px solid var(--brass); }
.site-footer { background: var(--green-d); color: #E7EFEA; border-top: 2px solid var(--brass); }
.site-footer .brand-name { color: #fff; }
.site-footer .muted, .site-footer .disclaimer { color: #C3D6CC !important; }
.site-footer a, .site-footer .footer-inner nav a { color: #fff; }
.site-footer a:hover, .site-footer .footer-inner nav a:hover { color: #E4C88F; }
.site-footer .disclaimer { border-top-color: rgba(255,255,255,.18) !important; }
.contribute-cta { background: var(--green); }

/* deep green hero band behind the chat */
.hero-chat { background:
  radial-gradient(ellipse 70% 60% at 50% 0%, rgba(31, 122, 90, .55), transparent 70%),
  linear-gradient(180deg, var(--green) 0%, var(--green-d) 100%);
  border-bottom: 2px solid var(--brass); margin-bottom: clamp(36px, 5vw, 64px); }
.hero-chat h1 { color: #FAF8F3; }
.hero-chat .lead { color: #DCEAE2; }
.hero-chat .eyebrow { color: #E4C88F; }
.hero-chat .chat { border-color: rgba(255,255,255,.12); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55); }
.chat-scrim { background: rgba(6, 30, 22, .55); }
.chat-close { background: var(--green-d); }
.chat-close:hover { background: var(--emerald); }
/* Plainroot monogram */
.brand-mark, .avatar { background: none; overflow: hidden; }
.brand-mark svg, .avatar svg { display: block; width: 100%; height: 100%; }
.brand-name { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }
.site-header .brand-name { font-size: 1.35rem; }
.footer-tagline { margin: 2px 0 4px; color: #E7EFEA; font-size: var(--text-sm); }
@media (max-width: 440px) {
  .site-header .brand-mark { display: grid; width: 30px; height: 30px; border-radius: 8px; }
  .site-header .brand-name { font-size: 1.2rem; }
  .brand { gap: 8px; }
}

/* ================= Plainroot: the chat is the first screen ================= */
.header-inner { min-height: 56px; }
.nav-toggle { display: inline-flex; margin-left: 0; }
.site-nav {
  display: none; position: absolute; right: max(16px, calc((100vw - var(--wrap)) / 2)); top: calc(100% + 6px); left: auto;
  min-width: 240px; flex-direction: column; gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); margin: 0;
}
.site-nav.open { display: flex; }
.site-nav a { padding: 11px 14px; font-size: var(--text-base); border-radius: 10px; }
.site-nav a[aria-current="page"] { background: var(--green-tint); color: var(--green-d); }
.header-ask { margin-left: auto; padding: 8px 16px; font-size: var(--text-sm); min-height: 0; }
body.on-home .header-ask { display: none; }
body.on-home .nav-toggle { margin-left: auto; }
@media (max-width: 960px) { .site-nav { left: auto; right: 12px; } }

.hero-chat { padding: 14px 0 20px; margin-bottom: 0; min-height: calc(100svh - 57px); }
.hero-inner { align-items: center; }
.ask-line { font-family: var(--font-display); font-weight: 700; color: #FAF8F3; text-align: center; font-size: clamp(1.4rem, 1rem + 1.2vw, 1.95rem); line-height: 1.2; margin: 0 0 12px; }
.chat-slot { max-width: 880px; }
.chat { height: max(440px, calc(100svh - 57px - 14px - 20px - 2.4rem - 12px)); }
.more { max-width: 880px; padding: clamp(36px, 5vw, 56px) 20px clamp(40px, 6vw, 72px); }
.more-line { text-align: center; color: var(--muted); font-size: var(--text-sm); margin: 0 0 16px; letter-spacing: .02em; }
.more-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.more-links a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border: 1px solid var(--line); border-top: 2px solid var(--brass); border-radius: 12px; text-decoration: none; color: var(--ink); background: var(--surface); }
.more-links a:hover { border-color: var(--emerald); border-top-color: var(--emerald); color: var(--ink); }
.more-links strong { font-size: var(--text-sm); }
.more-links span { font-size: var(--text-xs); color: var(--muted); line-height: 1.45; }
.page-ask { margin: 36px 0 0; }

@media (max-width: 860px) { .more-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .hero-chat { padding: 10px 0 0; }
  .hero-chat .wrap { padding-left: 10px; padding-right: 10px; }
  .ask-line { font-size: 1.3rem; margin-bottom: 10px; }
  .chat { height: max(440px, calc(100svh - 57px - 10px - 1.6rem - 10px - 12px)); }
  .chat:not(.is-expanded) .chat-chips { flex-wrap: wrap; overflow-x: visible; }
  .chat:not(.is-expanded) .chat-chips .chip { white-space: normal; }
  .header-ask { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; margin: 0; padding: 12px 18px; box-shadow: 0 10px 24px -8px rgba(0,0,0,.35); }
  .site-footer { padding-bottom: 84px; }
}
@media (max-width: 440px) { .site-header .brand-mark { display: grid; } }

/* ================= Plainroot polish: photo-free first screen ================= */
:root { --grain-l: url("assets/grain-1.svg"); --grain-d: url("assets/grain-2.svg"); }
body { background: var(--grain-d), var(--bg); }
.hero-chat {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: calc(100svh - 57px); padding: 18px 0 22px; display: flex; border-bottom: 1px solid var(--brass);
  background:
    var(--grain-l),
    radial-gradient(ellipse 60% 45% at 50% -5%, rgba(64, 160, 120, .38), transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(31, 122, 90, .35), transparent 70%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(10, 40, 30, .6), transparent 70%),
    linear-gradient(180deg, #0F5440 0%, #0B4131 55%, #08352A 100%);
}
.hero-chat::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(228, 200, 143, .22); border-radius: 22px; pointer-events: none; z-index: -1; }
.roots { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72%; color: #E4C88F; opacity: .16; z-index: -1; stroke-width: 1.4; }
.hero-chat .hero-inner { flex: 1; display: flex; flex-direction: column; align-items: center; width: 100%; }
.ask-head { text-align: center; margin: 4px 0 16px; max-width: 760px; }
.ask-line { font-family: var(--font-display); font-weight: 700; color: #FAF8F3; font-size: clamp(2.1rem, 1.4rem + 2vw, 3.1rem); line-height: 1.05; letter-spacing: -.02em; margin: 0; }
.ask-sub { margin: 10px auto 0; color: #DCEAE2; font-size: clamp(1rem, .92rem + .3vw, 1.15rem); line-height: 1.45; max-width: 70ch; display: flex; align-items: center; justify-content: center; gap: 14px; }
.ask-sub::before, .ask-sub::after { content: ""; flex: 1 1 40px; max-width: 56px; height: 1px; background: linear-gradient(90deg, transparent, #E4C88F); }
.ask-sub::after { background: linear-gradient(90deg, #E4C88F, transparent); }
.hero-chat .chat-slot { flex: 1 1 auto; display: flex; min-height: 420px; max-width: 880px; }
.hero-chat .chat-slot:has(.chat.is-done:not(.is-expanded)) { flex: none; }
.hero-chat .chat:not(.is-expanded) { flex: 1; height: auto; }
.hero-chat .chat {
  border: 1px solid rgba(228, 200, 143, .35);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 2px 4px rgba(0,0,0,.08), 0 18px 40px -12px rgba(0,0,0,.35), 0 50px 90px -30px rgba(0,0,0,.45);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.hero-chat .chat:focus-within { border-color: rgba(228, 200, 143, .7); box-shadow: 0 0 0 4px rgba(228, 200, 143, .22), 0 18px 40px -12px rgba(0,0,0,.35), 0 50px 90px -30px rgba(0,0,0,.45); }
.chat-head { background: linear-gradient(180deg, #F6F4EE, #EFECE4); border-bottom: 1px solid var(--line); }
.chat-form { background: var(--surface); }
.chat-input:focus { border-color: var(--emerald) !important; box-shadow: 0 0 0 4px rgba(31, 122, 90, .16) !important; }
.chat.is-expanded { border-color: rgba(228, 200, 143, .5); }

/* quiet below-the-fold */
.more { position: relative; }
.more-line { font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink); }
.more-line::after { content: ""; display: block; width: 48px; height: 1px; background: var(--brass); margin: 12px auto 0; }

/* dealer page header: green field, no photo */
.dealer-hero { min-height: 0; background: var(--grain-l), radial-gradient(ellipse 60% 70% at 85% 0%, rgba(64,160,120,.35), transparent 70%), linear-gradient(180deg, #0F5440, #0A3A2C); border-bottom: 1px solid var(--brass); }
.dealer-hero::after { display: none; }
.dealer-hero-copy { padding-top: clamp(40px, 6vw, 72px); }
.dealer-hero .eyebrow { color: #E4C88F; }
.dealer-hero .lead { color: #DCEAE2; }

/* way back to the chat, everywhere */
.float-ask { display: none; }
@media (max-width: 640px) {
  .header-ask { display: none !important; }
  body:not(.on-home) .float-ask { display: inline-flex; position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; padding: 12px 18px; box-shadow: 0 10px 24px -8px rgba(0,0,0,.35); }
  .hero-chat { padding: 10px 0 12px; }
  .hero-chat::before { inset: 6px; border-radius: 16px; }
  .ask-head { margin: 6px 0 12px; }
  .ask-line { font-size: 2rem; }
  .ask-sub { font-size: .95rem; gap: 10px; }
  .ask-sub::before, .ask-sub::after { display: none; }
  .hero-chat .chat-slot { min-height: 400px; }
  .roots { height: 50%; opacity: .14; }
}
.cornerstone > p:first-child { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; color: var(--green-d); }
.hero-chat { height: calc(100svh - 57px); min-height: 560px; }
.hero-chat:has(.chat.is-done:not(.is-expanded)) { height: auto; }
.hero-chat .hero-inner, .hero-chat .chat-slot { min-height: 0; }
.hero-chat .chat:not(.is-expanded) { min-height: 0; }
@media (max-width: 640px) {
  .hero-chat { min-height: 600px; }
  .chat:not(.is-expanded) .chat-chips { max-height: 46%; overflow-y: auto; gap: 7px; }
  .chat .chat-chips .chip { font-size: 14px; padding: 7px 12px; }
}

/* ---------- Log in (solid, top right, every page) ---------- */
.btn-login { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 7px 16px; border-radius: 999px; border: 1.5px solid var(--green-d); background: var(--green-d); color: #FAF8F3; font: inherit; font-weight: 700; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; }
.btn-login:hover { background: var(--green); border-color: var(--green); }
.btn-login:focus-visible, .btn-learn:focus-visible, .nav-login:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
body.on-home .btn-login { margin-left: auto; }
body.on-home .nav-toggle { margin-left: 0; }
.nav-login { margin: 6px 0 0; padding: 10px 14px; border: 0; border-radius: 999px; background: var(--green-d); color: #FAF8F3; font: inherit; font-weight: 700; cursor: pointer; text-align: center; }
@media (max-width: 640px) { .btn-login { margin-left: auto; } .nav-toggle { margin-left: 0; } }
@media (max-width: 440px) {
  .header-inner { gap: 6px; }
  .btn-login { min-height: 34px; padding: 5px 11px; font-size: 13px; }
  .nav-toggle { padding: 5px 10px; font-size: 13px; }
  .concept-tag { font-size: 10.5px; padding: 2px 7px; }
}
/* ---------- Learn more under the chat ---------- */
.learn-more { margin: 14px 0 0; text-align: center; flex: none; }
.btn-learn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 20px; border-radius: 999px; background: #FAF8F3; color: var(--green-d); font-weight: 700; font-size: var(--text-sm); text-decoration: none; border: 1px solid var(--brass-l, #E4C88F); box-shadow: 0 8px 20px -10px rgba(0,0,0,.4); }
.btn-learn::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.btn-learn:hover { background: #fff; }
@media (max-width: 640px) { .learn-more { margin-top: 10px; } .btn-learn { min-height: 40px; padding: 8px 18px; } }
/* ---------- Learn page ---------- */
.learn-steps { list-style: none; margin: 8px 0 32px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.learn-steps li { display: flex; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.learn-steps h2 { font-family: var(--font-body); font-size: var(--text-base); margin: 2px 0 4px; }
.learn-steps p { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.step-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #FAF8F3; font-family: var(--font-display); font-weight: 700; }
.learn-links { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 860px) { .learn-steps { grid-template-columns: 1fr; } .learn-links { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 440px) { .learn-links { grid-template-columns: 1fr; } }
/* ---------- Launch ---------- */
.price-soon { font-size: 1.7rem; color: var(--green-d); }
.launch-honest { font-size: var(--text-sm); color: var(--ink); background: var(--cream, #F5EFE4); border-left: 3px solid var(--brass); padding: 10px 14px; border-radius: 0 10px 10px 0; margin: 0 0 12px; }
.launch-goal { font-family: var(--font-display); font-size: var(--text-lg); color: var(--green-d); margin: 0 0 16px; }
.launch-card { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; border-top: 2px solid var(--brass); }
.launch-card-side { display: flex; flex-direction: column; }
.launch-card-side .btn { align-self: flex-start; }
@media (max-width: 900px) { .launch-card { grid-template-columns: 1fr; gap: 8px; max-width: 520px; } }
.launch-price { margin: 28px 0 8px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--brass); border-radius: var(--r-lg); }
.launch-price .eyebrow { margin-bottom: 4px; }
.learn-more { position: relative; z-index: 3; }
.ask-head { max-width: 920px; }
@media (max-width: 440px) {
  .header-inner.wrap, .site-header .wrap { padding-left: 12px; padding-right: 10px; }
  .brand { gap: 7px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-mark svg { width: 30px; height: 30px; }
}
@media (min-width: 900px) { .ask-sub { max-width: none; white-space: nowrap; } }
a.btn-login, a.nav-login { text-decoration: none; }
.site-nav a.nav-login { background: var(--green-d); color: #FAF8F3; font-weight: 700; }
.site-nav a.nav-login:hover { background: var(--green); }

/* ================= Light / dark theme ================= */
/* toggle in the header */
.theme-toggle { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 6px; margin: 0; background: none; border: 0; border-radius: 999px; cursor: pointer; color: var(--ink); font: inherit; font-weight: 700; font-size: var(--text-sm); white-space: nowrap; }
.tt-track { position: relative; flex: none; width: 50px; height: 28px; border-radius: 999px; background: #EDE5D4; border: 1.5px solid #8C6A2E; transition: background-color .3s ease, border-color .3s ease; }
.tt-knob { position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: #FFFEFB; color: var(--rust); box-shadow: 0 1px 3px rgba(40, 30, 20, .35); display: grid; place-items: center; transition: transform .32s cubic-bezier(.4, 1.3, .5, 1), background-color .3s ease, color .3s ease; }
.tt-knob svg, .tm-ico svg { grid-area: 1 / 1; transition: opacity .25s ease, transform .35s ease; }
.tt-moon, .tm-moon { opacity: 0; transform: rotate(-70deg) scale(.6); }
.theme-toggle:hover .tt-track { border-color: var(--green); }
.theme-toggle:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.theme-toggle[aria-checked="true"] .tt-track { background: #145E47; border-color: #E4C88F; }
.theme-toggle[aria-checked="true"] .tt-knob { transform: translateX(22px); background: #F5EFE4; color: #0A3A2C; }
.theme-toggle[aria-checked="true"] .tt-sun, html[data-theme="dark"] .tm-sun { opacity: 0; transform: rotate(70deg) scale(.6); }
.theme-toggle[aria-checked="true"] .tt-moon, html[data-theme="dark"] .tm-moon { opacity: 1; transform: none; }
.header-ask + .theme-toggle, .theme-toggle { margin-left: 4px; }
body.on-home .theme-toggle { margin-left: auto; }
body.on-home .theme-toggle + .btn-login { margin-left: 0; }
@media (max-width: 640px) { .theme-toggle { margin-left: auto; } .theme-toggle + .btn-login { margin-left: 0 !important; } }
@media (max-width: 520px) { .tt-long { display: none; } }
@media (max-width: 440px) { .theme-toggle { gap: 5px; padding: 2px; font-size: 13px; } .tt-track { width: 42px; height: 24px; } .tt-knob { width: 18px; height: 18px; } .theme-toggle[aria-checked="true"] .tt-knob { transform: translateX(18px); } }
@media (max-width: 370px) { .tt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* small switch next to the chat */
.learn-more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; }
.theme-mini { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 16px; border-radius: 999px; background: transparent; border: 1px solid rgba(228, 200, 143, .55); color: #F5EFE4; font: inherit; font-weight: 700; font-size: var(--text-sm); cursor: pointer; }
.theme-mini:hover { background: rgba(255, 255, 255, .08); }
.theme-mini:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.tm-ico { display: grid; place-items: center; width: 16px; height: 16px; }
@media (max-width: 640px) { .theme-mini { min-height: 40px; padding: 7px 14px; } }

/* smooth swap, only while switching */
html.theme-anim body, html.theme-anim body *, html.theme-anim body *::before { transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; }
@media (prefers-reduced-motion: reduce) {
  .tt-knob, .tt-track, .tt-knob svg, .tm-ico svg { transition: none; }
  html.theme-anim body, html.theme-anim body *, html.theme-anim body *::before { transition: none !important; }
}

/* ---------- light mode: beige first screen ---------- */
html[data-theme="light"] .hero-chat {
  background:
    var(--grain-d),
    radial-gradient(ellipse 60% 45% at 50% -5%, rgba(228, 200, 143, .45), transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(31, 122, 90, .10), transparent 70%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(180, 138, 62, .16), transparent 70%),
    linear-gradient(180deg, #F7F2E8 0%, #F1E9DA 60%, #ECE2CF 100%);
}
html[data-theme="light"] .hero-chat::before { border-color: rgba(140, 106, 46, .30); }
html[data-theme="light"] .roots { color: #1F7A5A; opacity: .16; }
html[data-theme="light"] .ask-line, html[data-theme="light"] .hero-chat h1 { color: var(--green-d); }
html[data-theme="light"] .ask-sub { color: #3D4A42; }
html[data-theme="light"] .ask-sub::before { background: linear-gradient(90deg, transparent, #B48A3E); }
html[data-theme="light"] .ask-sub::after { background: linear-gradient(90deg, #B48A3E, transparent); }
html[data-theme="light"] .hero-chat .chat { border-color: rgba(140, 106, 46, .35); box-shadow: 0 1px 2px rgba(60, 40, 20, .06), 0 18px 40px -16px rgba(60, 40, 20, .25), 0 40px 80px -30px rgba(60, 40, 20, .22); }
html[data-theme="light"] .hero-chat .chat:focus-within { border-color: rgba(31, 122, 90, .6); box-shadow: 0 0 0 4px rgba(31, 122, 90, .14), 0 18px 40px -16px rgba(60, 40, 20, .25); }
html[data-theme="light"] .btn-learn { background: var(--green-d); color: #FAF8F3; border-color: var(--green-d); box-shadow: 0 8px 20px -12px rgba(10, 58, 44, .6); }
html[data-theme="light"] .btn-learn:hover { background: var(--green); color: #fff; }
html[data-theme="light"] .theme-mini { color: var(--green-d); border-color: rgba(14, 77, 58, .4); background: rgba(255, 254, 251, .6); }
html[data-theme="light"] .theme-mini:hover { background: #FFFEFB; }
html[data-theme="light"] .tm-ico { color: var(--rust); }

/* ---------- dark mode: green primary ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A3A2C; --surface: #0E4D3A; --surface-2: #125740; --cream: #11513D;
  --ink: #F5EFE4; --muted: #CBD8CF; --line: rgba(228, 200, 143, .24);
  --green: #1F7A5A; --green-d: #D6EBDF; --green-tint: #155E47; --emerald: #9FDCBF;
  --rust-tint: #4A2A1C; --brass: #C9A15A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 14px 34px -14px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] body { background: var(--grain-l), var(--bg); }
html[data-theme="dark"] a:hover { color: #E4C88F; }
html[data-theme="dark"] .eyebrow { color: #E4C88F; }
html[data-theme="dark"] .site-header { background: rgba(10, 58, 44, .94); }
html[data-theme="dark"] .brand-mark svg rect, html[data-theme="dark"] .avatar svg rect { stroke: rgba(228, 200, 143, .55); stroke-width: 1.5; }
html[data-theme="dark"] .concept-tag, html[data-theme="dark"] .tag, html[data-theme="dark"] .ours-tag { border-color: rgba(228, 200, 143, .4); }
html[data-theme="dark"] .nav-toggle { color: var(--ink); border-color: var(--line); background: transparent; }
html[data-theme="dark"] .btn-login, html[data-theme="dark"] .site-nav a.nav-login, html[data-theme="dark"] .nav-login { background: #F5EFE4; border-color: #F5EFE4; color: #0A3A2C; }
html[data-theme="dark"] .btn-login:hover, html[data-theme="dark"] .site-nav a.nav-login:hover { background: #E4C88F; border-color: #E4C88F; color: #0A3A2C; }
html[data-theme="dark"] .btn-ghost { border-color: #9FDCBF; color: #D6EBDF; }
html[data-theme="dark"] .btn-primary, html[data-theme="dark"] .contribute-cta .btn-primary { background: #A84A29; color: #fff; }
html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .contribute-cta .btn-primary:hover { background: #8E3D20; }
html[data-theme="dark"] .site-nav a[aria-current="page"] { background: var(--green-tint); color: #fff; }
html[data-theme="dark"] .site-footer { background: #072E23; }
html[data-theme="dark"] .chat-close { background: #072E23; }
html[data-theme="dark"] .chat-head { background: linear-gradient(180deg, #125740, #0F5440); }
html[data-theme="dark"] .chat-form { background: var(--surface); }
html[data-theme="dark"] .rcard, html[data-theme="dark"] .chat-input, html[data-theme="dark"] .search,
html[data-theme="dark"] .field input[type="text"], html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea { background: #0A3A2C; color: var(--ink); }
html[data-theme="dark"] .chat-input::placeholder, html[data-theme="dark"] .search::placeholder, html[data-theme="dark"] .field textarea::placeholder { color: #A9BDB2; }
html[data-theme="dark"] .msg.bot.diagnosis { border-color: rgba(159, 220, 191, .35); }
html[data-theme="dark"] .msg.bot.legal-note { background: #4A2A1C; border-color: rgba(228, 200, 143, .3); }
html[data-theme="dark"] .legal-note .diag-label { color: #F2B595; }
html[data-theme="dark"] .form-error { color: #F4A08A; }
html[data-theme="dark"] [aria-invalid="true"] { border-color: #F4A08A !important; }
html[data-theme="dark"] .contribute-cta { background: #125740; border: 1px solid var(--line); }
html[data-theme="dark"] .preview-dialog::backdrop { background: rgba(3, 18, 13, .65); }
html[data-theme="dark"] .btn-learn { background: #F5EFE4; color: #0A3A2C; }
html[data-theme="dark"] .btn-learn:hover { background: #fff; }
html[data-theme="dark"] .hero-chat { border-bottom-color: var(--brass); }
html[data-theme="dark"] .skip { color: #0A3A2C; }
/* phone header: brand, tag, switch, Log in, menu all on one row */
@media (max-width: 440px) {
  .header-inner { gap: 5px; }
  .header-inner.wrap, .site-header .wrap { padding-left: 10px; padding-right: 8px; }
  .site-header .concept-tag { white-space: normal; max-width: 58px; line-height: 1.05; text-align: center; padding: 2px 6px; font-size: 10px; }
  .tt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .theme-toggle { padding: 0 2px; min-height: 36px; }
  .nav-toggle { width: 36px; height: 34px; padding: 0; font-size: 0; justify-content: center; align-items: center; position: relative; }
  .nav-toggle::before { content: ""; width: 16px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
  .theme-mini { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; }
  .theme-mini-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .learn-more { flex-wrap: nowrap; gap: 8px; }
}
@media (max-width: 345px) { .site-header .brand-name { font-size: 1rem; } .site-header .brand-mark, .site-header .brand-mark svg { width: 24px; height: 24px; } .brand { gap: 5px; } .btn-login { padding: 5px 9px; } }
html[data-theme="dark"] .chip { border-color: rgba(159, 220, 191, .55); }
body.chat-open .hero-chat { isolation: auto; }

/* ================= Early access (V1 go-live) ================= */
.btn-member { flex: none; color: var(--green-d); font-weight: 700; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; padding: 6px 4px; border-radius: 6px; white-space: nowrap; }
.btn-member:hover { color: var(--rust); }
.btn-member:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
body.on-home .btn-member { margin-left: auto; }
body.on-home .btn-member + .btn-login { margin-left: 0; }
@media (max-width: 900px) { .btn-member { display: none; } }
.soon-pill { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; vertical-align: middle; background: rgba(255, 255, 255, .9); color: #6B3418; border: 1px solid rgba(158, 69, 39, .35); white-space: nowrap; }
.btn-ghost .soon-pill { background: var(--rust-tint); }
html[data-theme="dark"] .soon-pill { background: #F5EFE4; color: #6B3418; border-color: transparent; }
.ext-note { margin: 8px 0 0; font-size: var(--text-xs); color: var(--muted); }
.cta-dlg { border: none; border-radius: var(--r-lg); padding: 0; max-width: min(460px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(30, 20, 10, .5); }
.cta-dlg::backdrop { background: rgba(20, 30, 25, .55); }
.cta-dlg__in { padding: 26px 26px 24px; }
.cta-dlg__eye { margin: 0 0 6px; font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--emerald); }
.cta-dlg h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: 1.55rem; line-height: 1.15; color: var(--ink); }
.cta-dlg__body { margin: 0 0 10px; color: var(--ink); }
.cta-dlg__safe { margin: 0 0 18px; font-size: var(--text-sm); color: var(--muted); }
.cta-dlg__ok { font: inherit; font-weight: 700; border: 0; border-radius: 999px; padding: 11px 22px; background: var(--rust); color: #fff; cursor: pointer; }
.cta-dlg__ok:hover { background: #84391F; }
.cta-dlg__ok:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.soon-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow); }
.soon-box h1, .soon-box h2 { margin-top: 0; }
.soon-box .lead { margin-bottom: 18px; }
.login-box { margin-top: 24px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.legal-body { max-width: 680px; }
.legal-updated { color: var(--muted); font-size: var(--text-sm); }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 24px; }
.legal-links a { color: var(--green-d); font-weight: 700; text-underline-offset: 3px; }
.footer-inner nav.footer-legal { grid-column: 1 / -1; justify-content: flex-start; border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 12px; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
@media (max-width:520px){a:has(> .soon-pill),button:has(> .soon-pill){flex-direction:column;flex-wrap:nowrap;gap:.3rem}a:has(> .soon-pill) .soon-pill,button:has(> .soon-pill) .soon-pill{margin-left:0}}