:root { --ink: #121923; --paper: #f6f7f8; --muted: #5e6772; --line: #d8dce0; --accent: #4a8b90; --dark: #121923; --shell: 1120px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
.shell { width: min(calc(100% - 48px), var(--shell)); margin-inline: auto; }.skip-link { position: absolute; top: -5rem; left: 1rem; z-index: 30; padding: .7rem 1rem; background: var(--dark); color: #fff; }.skip-link:focus { top: 1rem; }
.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid #1219231c; background: #f6f7f8f0; backdrop-filter: blur(9px); }.nav { display: flex; min-height: 90px; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: #0e1320; font-size: 1.18rem; font-weight: 800; letter-spacing: -.035em; text-decoration: none; }.brand-mark { width: 2rem; height: 2rem; flex: 0 0 auto; }.brand-wordmark { white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 2rem; }.nav-links a { color: #121923b3; font: 700 .72rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }.nav-links .button { color: #fff; font-family: inherit; letter-spacing: 0; text-transform: none; }.nav-toggle { display: none; border: 1px solid var(--line); padding: .7rem; background: transparent; color: var(--ink); font: 700 .72rem/1 ui-monospace, monospace; letter-spacing: .07em; }
.grid-bg { background-image: linear-gradient(#1219230d 1px, transparent 1px), linear-gradient(90deg, #1219230d 1px, transparent 1px); background-size: 48px 48px; }.hero { padding: 7rem 0 5.5rem; }.eyebrow { margin: 0 0 1.2rem; font: 700 .73rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }.accent { color: var(--accent); }.muted { color: #12192385; }
#top, #product, #how-it-works, #behaviorlab, #conversation { scroll-margin-top: 7rem; }
h1, h2, h3, p { margin-top: 0; }h1, h2 { font-weight: 800; letter-spacing: -.055em; line-height: 1.08; }h1 { max-width: 980px; margin-bottom: 1.2rem; font-size: clamp(3.2rem, 7.3vw, 6rem); }h2 { max-width: 800px; margin-bottom: 1.5rem; font-size: clamp(2.1rem, 4.2vw, 3.5rem); }h3 { font-size: 1.32rem; letter-spacing: -.025em; line-height: 1.25; }.hero-lead { margin-bottom: 2rem; color: #12192394; font-size: clamp(1.5rem, 2.8vw, 2.25rem); font-weight: 500; }.intro { max-width: 650px; color: #121923ad; font-size: 1.1rem; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2.2rem 0 0; }.button { display: inline-block; border: 1px solid transparent; padding: 1rem 1.55rem; color: inherit; font-weight: 700; text-align: center; text-decoration: none; }.button-accent { background: var(--accent); color: #fff; }.button-dark { background: var(--dark); color: #fff; }.button-outline { border-color: #12192347; }.button-small { padding: .78rem 1.1rem; font-size: .86rem; }.section { padding: 7rem 0; }
.problem-grid, .comparison { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }.problem-grid article { padding: 2.5rem; background: var(--paper); }.problem-grid p { color: var(--muted); font-size: .96rem; }.dark-section { background: var(--dark); color: var(--paper); }.dark-section p, .dark-section .intro { color: #d6dce1b3; }.narrow { max-width: 840px; }.dark-section blockquote { max-width: 680px; margin: 2.5rem 0 0; border-left: 3px solid var(--accent); padding-left: 1.5rem; font-size: 1.45rem; font-weight: 650; line-height: 1.5; }
.product-showcase { margin-top: 3.5rem; }.product-tabs { display: flex; gap: .3rem; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; }.product-tabs button { flex: 0 0 auto; border: 0; border-bottom: 3px solid transparent; padding: .9rem 1rem; background: transparent; color: var(--muted); cursor: pointer; font: 700 .78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; }.product-tabs button[aria-selected="true"] { border-color: var(--accent); color: var(--ink); }.product-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }.product-panel { margin: 2rem 0 0; }.product-panel img { display: block; width: 100%; height: auto; aspect-ratio: 1.74; border: 1px solid var(--line); border-radius: .45rem; background: #fff; box-shadow: 0 16px 42px #19243112; object-fit: contain; }.product-panel p { max-width: 700px; margin: 1.35rem 0 0; color: var(--muted); }.product-panel strong { color: var(--ink); }.prototype-note { max-width: 700px; margin: 1.5rem 0 0; color: var(--muted); font-size: .82rem; }
.workflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 3rem 0 0; border: 1px solid var(--line); padding: 0; background: var(--line); list-style: none; }.workflow li { padding: 1.7rem 1.4rem 2rem; background: var(--paper); }.workflow b { display: grid; width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; border: 2px solid var(--ink); border-radius: 50%; place-items: center; font: .8rem ui-monospace, monospace; }.workflow li:last-child b { border-color: var(--accent); background: var(--accent); color: #fff; }.workflow strong { display: block; margin-bottom: .8rem; }.workflow p { margin: 0; color: var(--muted); font-size: .9rem; }
.comparison-section { background: #eef0f2; }.comparison { grid-template-columns: 1fr 1fr; }.comparison article { padding: 2.7rem; background: #eef0f2; }.comparison .after { background: var(--dark); color: #fff; }.comparison ul { margin: 1.5rem 0 0; padding: 0; list-style: none; }.comparison li { margin: .8rem 0; }.comparison li::before { margin-right: .7rem; color: var(--accent); content: '•'; }.question-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; }.question-grid p { margin: 0; border-left: 3px solid var(--accent); padding: 1.35rem 1.5rem; background: #eef0f2; font-weight: 550; }
.capitalization { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 3.5rem; font: 700 .86rem ui-monospace, monospace; }.capitalization span, .capitalization strong { border: 1px solid #fff5; padding: .7rem 1rem; }.capitalization i { color: #fff8; font-style: normal; }.capitalization strong { border-color: var(--accent); background: var(--accent); }.learning-loop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 4rem 0 0; padding: 0; list-style: none; text-align: center; font-size: .9rem; font-weight: 700; }.learning-loop li { display: grid; flex: 1; place-items: center; gap: .5rem; }.learning-loop li::before { width: .8rem; height: .8rem; border-radius: 50%; background: var(--ink); box-shadow: 3.1rem 0 0 -6px var(--line); content: ''; }.learning-loop li:nth-child(4) { color: var(--accent); }.learning-loop li:nth-child(4)::before { background: var(--accent); }.final-cta { text-align: center; }.final-cta h2 { margin-inline: auto; }.final-lead { color: var(--accent); font-size: 1.8rem; font-weight: 700; }.final-cta .button { margin-top: 1.5rem; }.cta-note { margin: 1rem 0 0; color: var(--muted); font-size: .82rem; }.footer { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding: 2rem 0; color: var(--muted); font-size: .82rem; }.footer-brand { color: var(--ink); font-weight: 700; }.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); margin: -1px; border: 0; padding: 0; white-space: nowrap; }
.contact-email { display: block; width: fit-content; margin: .85rem auto 0; color: var(--ink); font-size: .9rem; font-weight: 700; text-decoration-color: var(--accent); text-underline-offset: .2em; }
@media (max-width: 760px) { .shell { width: min(calc(100% - 32px), var(--shell)); }.nav { min-height: 72px; gap: 1rem; }.nav-toggle { display: block; }.nav-links { display: none; position: absolute; top: 100%; right: 0; left: 0; align-items: stretch; gap: 0; border-bottom: 1px solid var(--line); padding: .5rem 1rem 1rem; background: var(--paper); }.nav-links.is-open { display: flex; flex-direction: column; }.nav-links a { padding: 1rem; }.nav-links .button { margin-top: .4rem; }.hero { padding: 5.5rem 0 4rem; }.section { padding: 4.5rem 0; }.problem-grid, .workflow, .comparison, .question-grid { grid-template-columns: 1fr; }.problem-grid article { padding: 2rem; }.product-showcase { margin-top: 2.5rem; }.product-tabs { margin-inline: -.2rem; }.product-tabs button { padding: .85rem .9rem; }.product-panel { margin-top: 1.2rem; }.product-panel p { font-size: .96rem; }.learning-loop { display: grid; grid-template-columns: 1fr 1fr; margin-top: 2.5rem; }.learning-loop li::before { box-shadow: none; }.capitalization { align-items: stretch; flex-direction: column; }.capitalization i { height: 1.2rem; }.footer { padding: 1.5rem 0; }.dark-section blockquote { font-size: 1.2rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }