@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
@font-face { font-family: BadScript; src: url('../fonts/BadScript-Regular.ttf') format('truetype'); font-display: swap; }

:root { --paper:#f4f3ec; --ink:#161914; --muted:#64685e; --line:#d7d9cf; --green:#436345; --mint:#dce9d8; --white:#fff; --max:1240px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; line-height:1.6; letter-spacing:-.02em; }
button,input { font:inherit; }
a { color:inherit; text-decoration:none; }
button { color:inherit; cursor:pointer; }
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--green); outline-offset:5px; }
::selection { background:var(--mint); }
.wrap { max-width:var(--max); margin:auto; padding-inline:28px; }
.skip-link { position:fixed; top:-80px; left:16px; z-index:200; padding:10px 18px; background:var(--ink); color:var(--paper); border-radius:8px; }
.skip-link:focus { top:12px; }
.eyebrow,.number,.path-label { font-family:'JetBrains Mono',monospace; font-size:10px; line-height:1.7; text-transform:uppercase; letter-spacing:.12em; }
.eyebrow { color:var(--muted); display:block; }
.number { color:var(--muted); }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-weight:500; line-height:1.06; letter-spacing:-.055em; text-wrap:balance; }
h1 em { font-style:normal; color:var(--green); }
h2 { font-size:clamp(32px,3.5vw,54px); }
h3 { font-size:26px; letter-spacing:-.04em; line-height:1.15; }
p { text-wrap:pretty; }
.green-dot { display:inline-block; width:7px; height:7px; background:var(--green); border-radius:50%; margin-right:8px; flex-shrink:0; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:24px; padding:14px 23px; min-height:48px; background:var(--ink); color:var(--paper); border:1px solid var(--ink); border-radius:999px; font-size:13px; font-weight:500; line-height:1.2; transition:background .2s,transform .2s; }
.button:hover { background:var(--green); border-color:var(--green); transform:translateY(-2px); }
.button.light { background:var(--paper); color:var(--ink); border-color:var(--paper); }
.button.light:hover { background:var(--mint); border-color:var(--mint); }
.text-link { display:inline-flex; align-items:center; gap:12px; font-size:13px; padding:12px 0; border-bottom:1px solid var(--line); }
.text-link:hover { border-color:var(--ink); }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:30px; }

.site-header { position:sticky; top:0; z-index:100; background:rgba(244,243,236,.93); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.nav-inner { max-width:var(--max); margin:auto; padding:0 28px; height:76px; display:flex; align-items:center; gap:40px; }
.brand { display:inline-flex; align-items:center; gap:16px; flex-shrink:0; }
.wordmark { font-family:BadScript,cursive; font-size:38px; line-height:1; letter-spacing:-.03em; }
.brand-label { font-size:8px; text-transform:uppercase; line-height:1.5; letter-spacing:.18em; border-left:1px solid var(--line); padding-left:16px; }
#nav-links { display:flex; align-items:center; gap:30px; margin-left:auto; font-size:12px; }
#nav-links a { padding:9px 0; }
#nav-links a:hover,#nav-links a[aria-current] { color:var(--green); }
.nav-cta { background:var(--ink); color:var(--paper); border-radius:999px; padding:9px 18px; font-size:12px; white-space:nowrap; }
.nav-cta span { margin-left:14px; }
.nav-toggle { display:none; background:none; border:0; font-size:12px; padding:8px 0; }

.hero { padding:85px 0 70px; }
.hero-grid { display:grid; grid-template-columns:1.13fr 1fr; gap:62px; align-items:center; }
.hero h1 { margin:25px 0; font-size:clamp(54px,6.6vw,96px); line-height:1; letter-spacing:-.065em; }
.kicker { display:inline-flex; align-items:center; padding:6px 11px; border:1px solid var(--line); border-radius:999px; font-size:9px; }
.hero-lede { max-width:48ch; font-size:17px; line-height:1.7; color:var(--muted); }
.hero-note { font-size:11px; color:var(--muted); margin-top:25px; }
.principles { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:22px; font:10px 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.07em; }
.principles span { display:flex; align-items:center; gap:9px; }
.principles span::before { content:'↗'; color:var(--green); font-size:14px; }

.workflow-demo { background:#fcfcf7; border:1px solid var(--line); border-radius:22px; box-shadow:0 16px 48px -30px #52654a44; overflow:hidden; }
.demo-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:20px 22px; border-bottom:1px solid var(--line); }
.demo-header .eyebrow { font-size:8px; }
.demo-badge { font-size:8px; color:var(--muted); background:#ecede6; padding:3px 6px; border-radius:4px; white-space:nowrap; }
.demo-tabs { display:flex; padding:16px 22px 0; gap:5px; }
.demo-tabs button { border:1px solid transparent; border-radius:999px; background:transparent; padding:6px 13px; font-size:10px; line-height:1.5; color:var(--muted); }
.demo-tabs button[aria-selected=true] { background:var(--ink); color:var(--paper); }
.demo-tabs button:hover { border-color:var(--line); }
#workflow-panel { padding:24px 22px; }
#workflow-title { font-size:27px; margin-bottom:25px; line-height:1.13; }
.workflow-path { border:1px solid var(--line); border-radius:10px; padding:15px 17px; margin-top:12px; }
.workflow-path.assisted { border-color:#b8cbb2; background:var(--mint); }
.path-label { font-size:8px; color:var(--muted); }
.workflow-path ol { list-style:none; margin:12px 0 0; padding:0; counter-reset:steps; }
.workflow-path li { font-size:11px; padding:5px 0; counter-increment:steps; display:flex; gap:11px; align-items:baseline; }
.workflow-path li::before { content:counter(steps,decimal-leading-zero); font:8px 'JetBrains Mono',monospace; color:var(--muted); }
.demo-outcome { font-size:11px; line-height:1.65; margin-top:18px; color:var(--muted); }
.demo-footer { display:flex; align-items:center; gap:8px; padding:15px 22px; background:var(--ink); color:#e0e7d9; font-size:9px; letter-spacing:0; }
.review-dot { border:1px solid #a5c095; border-radius:50%; width:9px; height:9px; position:relative; }
.review-dot::after { content:''; position:absolute; width:3px; height:3px; border-radius:50%; background:#a5c095; top:2px; left:2px; }

.section { padding:105px 0; }
.section.compact { padding-top:65px; }
.section-heading { display:grid; grid-template-columns:1.2fr 1fr; align-items:end; gap:70px; margin-bottom:45px; }
.section-heading .eyebrow { margin-bottom:20px; }
.section-heading p { color:var(--muted); max-width:46ch; font-size:15px; }
.service-list { border-top:1px solid var(--line); }
.service-row { display:grid; grid-template-columns:100px 1fr 40px; gap:30px; align-items:center; padding-block:31px; border-bottom:1px solid var(--line); }
.service-row h3 { font-size:29px; }
.service-row p { color:var(--muted); font-size:14px; margin-top:10px; max-width:72ch; }
.row-arrow { font-size:25px; text-align:right; color:var(--green); transition:transform .2s; }
.service-row:hover .row-arrow { transform:translate(3px,-3px); }
.process-section { background:#e9ebe1; border-block:1px solid var(--line); }
.process-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; }
.process-grid article { border-top:1px solid #c4c9ba; padding-top:20px; }
.process-grid h3 { margin:22px 0 15px; font-size:24px; }
.process-grid p { font-size:13px; color:var(--muted); }
.contact-band { background:var(--ink); color:var(--paper); padding:95px 0; }
.contact-band-inner { display:grid; grid-template-columns:1.3fr 1fr; align-items:end; gap:80px; }
.contact-band .eyebrow { color:#a1ad98; margin-bottom:24px; }
.contact-band h2 { font-size:clamp(40px,4.3vw,65px); }
.contact-band p { font-size:15px; color:#b8c1b1; margin-bottom:26px; max-width:42ch; }

.footer { padding:65px 0 25px; }
.footer-top { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:60px; padding-bottom:55px; }
.footer-top .wordmark { font-size:45px; }
.footer-top p { font-size:12px; color:var(--muted); margin-top:23px; }
.footer-top .eyebrow { margin-bottom:18px; }
.footer-top>div>a:not(.brand) { display:block; font-size:12px; margin:8px 0; overflow-wrap:anywhere; }
.footer-top>div>a:not(.brand):hover { color:var(--green); }
.footer-bottom { border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; font-size:10px; color:var(--muted); }
.footer-bottom>div { display:flex; flex-wrap:wrap; gap:25px; }

.page-intro { padding-top:90px; padding-bottom:65px; border-bottom:1px solid var(--line); }
.page-intro h1 { font-size:clamp(52px,6.4vw,92px); margin:25px 0; max-width:16ch; }
.page-intro .hero-lede { max-width:55ch; }
.detail-row { display:grid; grid-template-columns:200px 1fr; gap:65px; padding:45px 0; border-bottom:1px solid var(--line); scroll-margin-top:100px; }
.detail-row:first-child { padding-top:0; }
.detail-row h2 { font-size:38px; max-width:26ch; margin-bottom:20px; }
.detail-row p { color:var(--muted); max-width:62ch; font-size:15px; }
.detail-row ul { padding-left:19px; margin:22px 0 0; font-size:13px; color:var(--muted); }
.detail-row li { padding-block:5px; }
.faq-layout { display:grid; grid-template-columns:1fr 1.3fr; gap:80px; }
.faq-layout h2 { margin-top:20px; max-width:12ch; }
.faq details { padding:22px 0; border-bottom:1px solid #c4c9ba; }
.faq summary { cursor:pointer; font-size:16px; font-weight:500; }
.faq p { margin-top:15px; color:var(--muted); font-size:14px; }
.example-section { border-bottom:1px solid var(--line); }
.example-heading { display:grid; grid-template-columns:160px 1fr; gap:22px 40px; margin-bottom:35px; }
.example-heading p { grid-column:2; max-width:65ch; color:var(--muted); font-size:15px; }
.comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.comparison article { border:1px solid var(--line); border-radius:15px; padding:30px; }
.comparison .assisted { background:var(--mint); border-color:#b8cbb2; }
.comparison ol { margin:20px 0 0; padding-left:19px; }
.comparison li { font-size:14px; padding:9px 0 9px 7px; }
.opportunity { font-size:13px; color:var(--green); margin-top:24px; }
.about-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:70px; align-items:start; }
.about-mark { border:1px solid #b8cbb2; background:var(--mint); border-radius:20px; padding:30px; }
.initials { font-size:130px; line-height:1.3; letter-spacing:-.1em; font-weight:500; margin:55px 0; position:relative; }
.initials span { font-size:55px; color:var(--green); position:absolute; right:10px; top:0; }
.about-mark h2 { font-size:28px; }
.about-mark p { font-size:11px; color:var(--green); margin-top:10px; }
.about-copy h2 { font-size:40px; margin-bottom:28px; }
.about-copy p { font-size:15px; margin-bottom:22px; color:var(--muted); }
.related-sites { margin-top:35px; border-top:1px solid var(--line); padding-top:25px; }
.related-sites>a { display:flex; justify-content:space-between; padding-top:17px; font-size:14px; }
.related-sites>a:hover { color:var(--green); }
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:95px; align-items:start; }
.contact-layout>div h2 { margin-bottom:35px; }
.contact-prompt { display:flex; gap:20px; padding:17px 0; border-top:1px solid var(--line); align-items:baseline; }
.contact-prompt p { font-size:14px; color:var(--muted); }
.email-card { background:var(--mint); border:1px solid #b8cbb2; border-radius:20px; padding:40px; }
.email-card h2 { font-size:55px; margin:30px 0 24px; }
.email-card p { font-size:14px; color:var(--muted); margin-bottom:30px; }
.email-address { display:block; margin-top:18px; font-size:12px; overflow-wrap:anywhere; }

@media (max-width:1000px) { .nav-inner { gap:25px; } #nav-links { gap:22px; } .hero-grid { gap:35px; } .hero h1 { font-size:68px; } .hero-lede { font-size:15px; } .brand-label { display:none; } .service-row { grid-template-columns:70px 1fr 35px; } }
@media (max-width:760px) {
  .wrap { padding-inline:22px; }
  .nav-inner { height:64px; gap:16px; padding-inline:22px; }
  .wordmark { font-size:32px; }
  .nav-toggle { display:flex; align-items:center; gap:7px; margin-left:auto; }
  .nav-cta { padding:8px 14px; font-size:11px; }
  .nav-cta span { margin-left:6px; }
  #nav-links { display:none; }
  .menu-open #nav-links { position:absolute; top:64px; left:0; right:0; padding:16px 22px; display:flex; flex-direction:column; align-items:stretch; gap:5px; background:var(--paper); border-bottom:1px solid var(--line); }
  .hero { padding:55px 0 45px; }
  .hero-grid,.section-heading,.contact-band-inner,.about-grid,.contact-layout,.faq-layout { grid-template-columns:1fr; gap:35px; }
  .hero h1 { font-size:clamp(44px,11vw,72px); margin-block:24px; }
  .hero-lede { font-size:15px; }
  .hero-note { margin-top:20px; }
  .actions { gap:20px; }
  .workflow-demo { max-width:520px; width:100%; margin-top:10px; }
  .principles { flex-wrap:wrap; justify-content:flex-start; gap:14px 30px; font-size:8px; }
  .section { padding:65px 0; }
  .section.compact { padding-top:45px; }
  .section-heading { margin-bottom:30px; }
  .service-row { grid-template-columns:45px minmax(0,1fr) 20px; gap:15px; padding-block:26px; }
  .service-row h3 { font-size:24px; }
  .service-row p { font-size:13px; }
  .process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 24px; }
  .process-grid h3 { font-size:22px; }
  .contact-band { padding:65px 0; }
  .contact-band h2 { font-size:43px; }
  .footer-top { grid-template-columns:1fr 1fr; gap:35px; padding-bottom:40px; }
  .footer-top>div:first-child { grid-column:1/-1; }
  .footer-bottom>div { gap:18px; }
  .page-intro { padding-top:55px; padding-bottom:45px; }
  .page-intro h1 { font-size:clamp(44px,10vw,72px); }
  .detail-row { grid-template-columns:1fr; gap:20px; padding-block:35px; }
  .detail-row h2 { font-size:32px; }
  .comparison { grid-template-columns:1fr; }
  .example-heading { grid-template-columns:1fr; gap:20px; }
  .example-heading p { grid-column:1; }
  .comparison article { padding:25px; }
  .about-mark { max-width:450px; }
  .initials { font-size:100px; margin:35px 0; }
  .about-copy h2 { font-size:33px; }
  .email-card { padding:30px; }
  .email-card h2 { font-size:48px; }
}
@media (max-width:360px) { .nav-inner { padding-inline:18px; gap:12px; } .wrap { padding-inline:20px; } .wordmark { font-size:29px; } .nav-cta { padding:8px 11px; } .hero h1 { font-size:43px; } .demo-header { flex-wrap:wrap; padding:18px; } .demo-tabs { padding-inline:18px; } .demo-tabs button { padding-inline:10px; } #workflow-panel { padding:22px 18px; } .footer-top { grid-template-columns:1fr; } .footer-top>div:first-child { grid-column:auto; } .process-grid { grid-template-columns:1fr; } .contact-band h2 { font-size:38px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }