/* Theme: editorial gallery behind frosted glass (style reference "Sneak in Peace").
   Monochrome: white, warm off-white, charcoal and black. Red is rationed to status badges and Buddy's own drawn marks;
   navy only outlines links. Everything is 6px-cornered and almost flat, lifted by one soft shadow.
   Deliberate departures, for readability and accessibility: body text is 15-16px (the reference caps UI at 14px),
   the selected-tab fill is a darker gray (the reference gray fails contrast with white text), and primary buttons are
   black, not red (the reference says red is never for primary CTAs). Free fonts stand in for the reference's
   commercial ones: Inter for the grotesque, Fraunces for the editorial serif. */
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 102.4%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
:root {
  --ink-black: #000; --charcoal: #3d3d3d; --concrete: #9e9e9e; --ash: #b5b5b5; --smoke: #5c5c5c; --paper: #fff; --bone: #f0eeed;
  --navy: #142161; --red: #ba2223;
  --base: #fff; --ink: #000; --ink-2: #3d3d3d; --ink-3: #565656; --line: #9e9e9e;
  --accent: var(--red); --accent-ink: var(--charcoal);
  --font-display: Fraunces, "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --font-body: Inter, "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: var(--font-body);
  --r: 6px; --shadow: rgba(0, 0, 0, .08) 1px 1px 6px -1px;
  --spring: cubic-bezier(.22, 1, .36, 1);
}
body { background: #fff; color: var(--charcoal); font: 400 16px/1.6 var(--font-body); letter-spacing: .005em; }
.field, .orb, .blob { display: none !important; }
a { color: var(--charcoal); text-decoration: none; border-bottom: 1px solid var(--navy); }
a:hover { color: #000; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; color: #000; letter-spacing: 0; line-height: 1.25; }
h1 em, h2 em { font-style: normal; }
.sec-head h2, .h2, .cta h2 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.2; }
h3, .step h3 { font-size: 20px; line-height: 1.3; }
.big h3, .persona h3, .tile h3 { font-size: 20px; }
.sec-head p, .lede { color: var(--charcoal); font-size: 16px; }

/* small labels: grotesque, upper-case, wide tracking */
.eyebrow, .mono, .label, .stat, .where h4, .demo-status, .chip, .micro-cap { font: 500 11px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--charcoal); }
.eyebrow::before, .stat::before { display: none; }
.eyebrow.pill, .pill { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.pill { border: 1px solid var(--concrete); padding: 6px 10px; border-radius: var(--r); font: 400 13px/1.2 var(--font-body); color: var(--charcoal); background: #fff; }
.kbd { font: 500 12px/1 var(--font-body); border-radius: var(--r); border: 1px solid var(--charcoal); border-bottom-width: 1px; background: #fff; }
.step h3 span { font-family: var(--font-body); font-size: 11px; letter-spacing: .12em; color: var(--charcoal); }
.badge-red { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin: 0; padding: 5px 7px; background: var(--red); color: #fff; border-radius: var(--r); font: 500 10px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.badge-red i { width: 6px; height: 6px; border-radius: 50%; background: #fff; }

/* surfaces: opaque white tiles, 1px concrete border, one soft shadow, 6px corners */
.glass, .glass--text, .glass--sm, .glass--pill { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid var(--concrete); box-shadow: var(--shadow) !important; border-radius: var(--r); }
.glass::before, .glass::after { display: none !important; }
.step, .big, .tile, .persona, .faq-item, .honest, .where, .cta, .lesson-card, .mode-body { border-radius: var(--r); }
.demo { border-radius: 8px; }
.pill, .btn, .input, .tab, .seg, .tabs, .seg button, .seg-thumb, .check input, .kbd, .linkish { border-radius: var(--r); }

/* nav: plain white bar with a hairline */
.nav-wrap { position: sticky; top: 0; margin: 0; padding: 0; background: #fff; border-bottom: 1px solid var(--concrete); z-index: 60; }
.nav.glass { max-width: 1240px; background: transparent !important; border: 0; box-shadow: none !important; border-radius: 0; padding: 8px clamp(16px, 4vw, 40px); min-height: 56px; }
.brand { font: 400 22px/1 var(--font-display); color: #000; border: 0; }
.brand svg path { fill: #000; stroke: #fff; }
.nav-links a { font: 500 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--charcoal); border: 0; border-radius: var(--r); }
.nav-links a:hover { background: var(--bone); color: #000; }

/* buttons: black fill, white label, 6px */
.btn { background: #000; color: #fff; border: 1px solid #000; border-radius: var(--r); box-shadow: none; font: 500 12.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; min-height: 46px; }
.btn:hover:not(:disabled) { background: var(--charcoal); border-color: var(--charcoal); }
.btn--accent { background: #000; }
.btn--glass { background: #fff; color: #000; border: 1px solid var(--charcoal); box-shadow: none; }
.btn--glass:hover { background: var(--bone); color: #000; }
.btn:disabled { background: var(--ash); border-color: var(--ash); color: #fff; opacity: 1; }
.input { background: #fff; border: 1px solid var(--charcoal); border-radius: var(--r); box-shadow: none; font: 400 16px/1.2 var(--font-body); color: #000; }
.input::placeholder { color: #6b6b6b; }
.input:focus-visible { outline: 2px solid #000; outline-offset: 2px; border-color: #000; }
.linkish { color: var(--charcoal); text-decoration: none; border-bottom: 1px solid var(--navy); border-radius: 0; padding: 4px 0; min-height: 0; font: 400 14px/1.4 var(--font-body); }
.check input { accent-color: #000; }
.check { font-size: 14px; color: var(--charcoal); }
.micro { font-size: 13px; color: var(--ink-3); }
.wl-msg { color: var(--red); font-weight: 500; }

/* segmented controls: selected = dark gray, white label */
.tabs.glass, .seg.glass { background: #fff !important; padding: 4px; }
.tab, .seg button { font: 500 12px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--charcoal); }
.tab[aria-selected="true"] { background: var(--smoke); color: #fff; }
.seg button[aria-checked="true"] { color: #fff; }
.seg-thumb { background: var(--smoke); box-shadow: none; }

/* ---------- hero: full-bleed media, frosted panel on the right ---------- */
.hero2 { position: relative; min-height: max(700px, 47vw); background: #0d0d0d; overflow: hidden; }
.hero2-media { position: absolute; inset: 0; display: grid; align-content: center; }
.hero2 .mac { width: 100%; filter: none; }
.hero2 .mac-lid { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.hero2 .mac-base { display: none; }
.hero2 .mac-screen.demo { border-radius: 0; box-shadow: none; }
.hero2 .demo-stage { aspect-ratio: 1440 / 679; }
.hero2 .demo-note { position: absolute; left: 16px; bottom: 14px; z-index: 6; max-width: min(520px, 56vw); margin: 0; padding: 8px 10px; background: rgba(255, 255, 255, .86); border-radius: var(--r); box-shadow: var(--shadow); font-size: 12px; line-height: 1.45; color: var(--charcoal); text-align: left; }
.hero2-panel { position: absolute; z-index: 5; top: 20px; right: 20px; bottom: 20px; width: clamp(340px, 31vw, 440px); padding: 24px 24px 20px; display: flex; flex-direction: column; justify-content: center; gap: 12px; overflow: auto;
  background: rgba(255, 255, 255, .88) !important; -webkit-backdrop-filter: blur(18px) saturate(120%) !important; backdrop-filter: blur(18px) saturate(120%) !important; }
.hero2-panel h1 { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.18; margin: 0; }
.hero2-panel .lede { font-size: 15px; line-height: 1.55; }
.hero2-panel .label { margin: 0; }
.hero2-panel .wl { max-width: none; width: 100%; padding: 0; border: 0; background: transparent !important; box-shadow: none !important; overflow: visible; }
.hero2-panel .wl-form { gap: 10px; }
.hero2-panel .wl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hero2-panel .wl-row { flex-direction: column; }
.hero2-panel .wl-row .btn { width: 100%; }
.hero2-panel .trust { margin: 0; font: 500 10.5px/1.4 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--charcoal); }
.hero2-panel .trust::before { display: none; }
.hero2-panel .wl-done { padding: 0; }
.hero2-panel .micro { font-size: 12.5px; }
@media (max-width: 900px) {
  .hero2 { min-height: 0; background: #fff; }
  .hero2-media { position: relative; background: #0d0d0d; }
  .hero2 .demo-stage { aspect-ratio: 4 / 3.2; }
  .hero2 .demo-note { position: static; max-width: none; border-radius: 0; box-shadow: none; background: #fff; padding: 10px 16px; }
  .hero2-panel { position: static; width: auto; margin: 16px; padding: 22px 18px; background: #fff !important; overflow: visible; }
  .hero2-panel h1 { font-size: clamp(28px, 8vw, 34px); }
}

/* sections */
.ico { background: var(--bone); border: 1px solid var(--concrete); box-shadow: none; border-radius: var(--r); }
.ico svg [stroke="#4f5bff"], .ico svg [stroke="#ff7a5c"], .ico svg [stroke="#1f9d6b"], .ico svg [stroke="#14142b"] { stroke: #000; }
.ico svg [fill="#4f5bff"], .ico svg [fill="#14142b"] { fill: #000; }
.loop-line { background: var(--concrete); height: 1px; }
.loop-line::after { background: #000; }
.big .art, .persona .art, .mini { background: var(--bone); border: 1px solid var(--concrete); border-radius: var(--r); }
.persona .art i { background: #fff !important; border: 1px solid var(--concrete); box-shadow: none; }
.dots7 i { border-color: var(--concrete); font-family: var(--font-body); }
@keyframes done { 0%, 4% { background: #fff; border-color: var(--concrete); color: transparent; } 8%, 90% { background: #000; border-color: #000; color: #fff; } 100% { background: #fff; border-color: var(--concrete); color: transparent; } }
@keyframes hl { 0%, 30% { border-color: var(--red); box-shadow: 0 0 0 3px rgba(186, 34, 35, .18); } 34%, 100% { border-color: var(--concrete); box-shadow: none; } }
.mails i::after { background: #000; }
.fc i, .mails i, .mini .ln { border-radius: var(--r); border-color: var(--concrete); }
.mini .ring { border-color: var(--red); border-radius: var(--r); }
.mini .tag { background: #000; color: #fff; border-radius: var(--r); font-family: var(--font-body); }
.mini .ck, .mini .yn span:first-child { background: #000; border-color: #000; }
.lesson li { background: #fff; border: 1px solid var(--concrete); border-radius: var(--r); font-weight: 400; color: var(--charcoal); }
.lesson li.on { border-color: #000; color: #000; box-shadow: var(--shadow); }
.lesson li::before { font-family: var(--font-body); background: var(--bone); color: #000; border-radius: var(--r); }
.lesson li.on::before { background: #000; color: #fff; }
.lesson li.done::before { background: #000; color: #fff; }
.where > div + div { border-color: var(--concrete); }
.where li::before { background: #000; color: #fff; border-radius: var(--r); font-family: var(--font-body); }
.where .next li::before { background: var(--charcoal); }
.where .no li::before { background: var(--concrete); color: #000; }
.faq-q { font: 400 19px/1.3 var(--font-display); color: #000; }
.faq-q::after { border-color: #000; }
.stopbtn { background: var(--red); border-radius: var(--r); font-family: var(--font-body); letter-spacing: .08em; box-shadow: none; }
.flow3 li { background: var(--bone); border: 1px solid var(--concrete); border-radius: var(--r); }
.flow3 li::before { background: #000; border-radius: var(--r); font-family: var(--font-body); }
.cta.glass { background: var(--bone) !important; }
.cta .wl { background: #fff !important; }
.demo-note { color: var(--ink-3); font-size: 13px; }
.foot { color: var(--charcoal); }
.foot a { color: var(--charcoal); }
.foot small { color: var(--ink-3); }
.honest h3, .where h3 { font-size: 20px; }

/* demos keep their app screens; Buddy's marks are the one place red is drawn */
.demo-svg path { stroke: var(--red); }
.demo-ripple { border-color: var(--red); }
.demo-status { background: #000; color: #fff; border-radius: var(--r); }
.demo-status.ok, .chip.ok { background: #000; color: #fff; }
.demo-label { border-radius: var(--r); background: #000; font-family: var(--font-body); }
.demo-cap { border-radius: var(--r); }
.mac-lid { box-shadow: inset 0 0 0 1px #3a3a42, inset 0 0 0 2.5px #08080a; }

/* success card */
.pos { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #000; font-family: var(--font-display); font-weight: 400; }
.wl-done h3 { font-size: 28px; }
.ref-row .input { font-size: 14px; }
.confetti i svg path { stroke: #000; }

/* long-form pages */
.prose { background: #fff; }
.prose h1 { font-size: clamp(28px, 4vw, 38px); }
.prose h2 { font-size: 22px; }
.prose code { background: var(--bone); border-radius: 4px; padding: 1px 5px; }
.skip { background: #000; color: #fff; border-radius: var(--r); }
:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
@media (prefers-contrast: more) { :root { --ink-3: #2b2b2b; } .glass { border-color: #000; } }

@media (prefers-reduced-motion: reduce) { .dots7 i { background: #000; border-color: #000; color: #fff; } .mails i::after { background: #000; } }
.demo-status, .demo-status.ok, .chip.ok { background: #000; color: #fff; }