:root{--ink:#15432B;--green:#18A34A;--mint:#6FDB95;--paper:#FAFAF6;--muted:#3F5247;--soft:#D8F2DA;--amber:#FFE9B8;--grey:#4F5F55;--deep:#0E2E1D}
*{box-sizing:border-box}
html{scroll-snap-type:y proximity;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Figtree',Arial,sans-serif;overflow-x:clip}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
img{max-width:100%}

/* ---------- buttons ---------- */
.btn{font:inherit;font-weight:700;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;transition:background-color .2s,color .2s,transform .12s,box-shadow .12s}
.btn-green{color:var(--paper);background:var(--green);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:10px 22px}
.btn-green:hover{background:#15913F}
.btn-green:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn-ghost{color:var(--paper);background:transparent;border:2px solid var(--paper);padding:10px 22px}
.btn-ghost:hover{background:rgba(250,250,246,.14)}
.btn-lg{font-size:17px;padding:13px 26px}

/* ---------- funding banner ---------- */
.banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:7px 24px;background:var(--ink);color:var(--paper);text-decoration:none;font-size:13px;font-weight:600;text-align:center}
.banner .antler{color:var(--paper)}
.banner-arrow{color:var(--mint);font-weight:800;transition:transform .2s}
.banner:hover .banner-arrow{transform:translateX(3px)}
@media (max-width:759px){.banner-more{display:none}}

/* ---------- the scroll story ---------- */
#story{position:relative;height:1200vh}
#stage{position:sticky;top:0;height:100vh;padding:14px}
#frame{position:relative;width:100%;height:100%;border:2px solid var(--ink);border-radius:32px;box-shadow:8px 8px 0 var(--ink);overflow:hidden;background:#5D869C}
#film{position:absolute;inset:0;width:100%;height:100%;display:block}
#lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#lines .ln{stroke:var(--ink);stroke-width:2;opacity:0}
#lines .lc{fill:var(--mint);stroke:var(--ink);stroke-width:2;opacity:0}
#scrim{position:absolute;left:0;right:0;top:0;height:52%;background:linear-gradient(var(--paper) 48%,rgba(250,250,246,0));opacity:0;pointer-events:none}
.snap{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
/* snappable only once JS has placed them: iOS Safari follows a snapped marker when it moves */
.snap.placed{scroll-snap-align:start}
.ov{position:absolute;opacity:0;visibility:hidden;will-change:opacity,transform}
#hero,#chat{opacity:1;visibility:visible}

/* nav */
#nav{position:absolute;top:0;left:0;right:0;padding:22px clamp(20px,3.5vw,48px);display:flex;align-items:center;gap:20px;z-index:5;transition:color .4s}
#nav .logo{display:flex;align-items:center;gap:10px;text-decoration:none}
#nav .badge{width:48px;height:48px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center}
#nav .badge img{width:40px;height:40px;object-fit:contain}
#nav .word{font-family:'Pacifico',cursive;font-size:28px;line-height:1.3;transition:color .4s}
#nav.light,#nav.light .word{color:var(--paper)}
#nav.dark{color:var(--ink)} #nav.dark .word{color:var(--green)}
#nav .nav-cta{position:relative;margin-left:auto;font-size:15px;padding:9px 18px;min-height:40px;box-shadow:3px 3px 0 var(--ink)}

/* hero */
#hero{left:clamp(24px,5vw,80px);top:21%;max-width:600px;color:var(--paper);display:flex;flex-direction:column;gap:24px}
#hero h1{margin:0;font-size:clamp(44px,5vw,72px);font-weight:800;line-height:.94;letter-spacing:-.045em}
#hero h1 span{color:var(--mint)}
#hero p{margin:0;font-size:20px;line-height:1.5;color:#EEF2EA}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.backed{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#DCE6DE}
.backed .antler{color:var(--paper)}
#cue{left:50%;bottom:26px;display:flex;align-items:center;gap:10px;white-space:nowrap;padding:9px 18px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);font-size:15px;font-weight:800}
.cue-arrow{width:24px;height:24px;border-radius:50%;background:var(--green);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;font-size:14px;animation:cuebob 1.4s ease-in-out infinite}
@keyframes cuebob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}

/* chat */
#chat{left:74%;top:20%;width:min(340px,23vw);height:52%;overflow:hidden}
#chat-track{display:flex;flex-direction:column;gap:10px;transition:transform .5s ease}
.bub{display:none;max-width:92%;font-size:15px;line-height:1.42;border:2px solid var(--ink);padding:10px 14px;transition:opacity .45s ease}
.bub small{display:block;font-size:11px;color:var(--grey);margin-top:2px;text-align:right}
.bub.s{align-self:flex-end;background:#DCF8C6;border-radius:18px 18px 4px 18px}
.bub.l{align-self:flex-start;background:#fff;border-radius:18px 18px 18px 4px}
.typing{display:none;align-self:flex-start;gap:5px;background:#fff;border:2px solid var(--ink);border-radius:18px 18px 18px 4px;padding:12px 16px}
.typing i{width:7px;height:7px;border-radius:50%;background:#8FA597}

/* chapter text */
.chap{display:flex;flex-direction:column;gap:12px}
.chap h2{margin:0;font-size:clamp(30px,2.8vw,42px);font-weight:800;letter-spacing:-.04em;line-height:.98}
.chap h2 span{color:var(--green)}
.chap p{margin:0;font-size:17px;line-height:1.55;color:var(--muted)}
#c-buyer{left:3.5%;top:13%;width:27%}
#c-buyer h2{width:477px}
#c-match{left:3.5%;top:13%;width:min(560px,42%);padding:24px 26px;gap:10px}
#c-match h2{font-size:clamp(26px,2.2vw,34px)}
#c-match p{font-size:16px}
#c-town{left:3.5%;top:13%;width:min(400px,30%);padding:24px 26px;gap:10px}
#c-town h2{font-size:clamp(28px,2.4vw,36px)}
#c-town p{font-size:16px}
.card{background:#fff;border:2px solid var(--ink);border-radius:20px;box-shadow:6px 6px 0 var(--ink)}

/* feature pills */
.pill{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);padding:7px 13px;font-size:14px;font-weight:800;white-space:nowrap}
.pill b{width:18px;height:18px;border-radius:50%;background:var(--green);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:11px}
.pill em{font-style:normal;font-weight:700;color:var(--grey)}

/* applicant record */
#record{left:74%;top:20%;width:min(340px,23vw);padding:20px 22px;display:flex;flex-direction:column;gap:11px}
#record .hd{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
#record .av{width:42px;height:42px;flex:none;border-radius:50%;background:var(--soft);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800}
#record .hd b{display:block;font-size:18px}
#record .hd span{font-size:12px;color:var(--grey)}
.row{display:flex;flex-direction:column;gap:2px;transition:opacity .35s ease,transform .35s ease}
.row .k{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.row .v{font-size:15px;font-weight:700;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tag{font-size:12px;font-weight:700;border-radius:999px;padding:3px 9px}
.tag.a{background:var(--amber);color:#6B4200}
.tag.g{background:var(--soft);color:var(--ink)}
.saved{font-size:13px;font-weight:700;color:var(--green)}

/* match cards pinned above houses */
.mx{display:flex;flex-direction:column;align-items:center}
.mx-card{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink);padding:8px 14px 8px 8px;width:max-content;max-width:280px}
.mx-t{display:flex;flex-direction:column;gap:1px}
.mx-t b{font-size:14px;line-height:1.25}
.mx-t span{font-size:13px;color:var(--grey)}
.mx-t .mx-tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.mx-dot{width:2px;height:16px;background:var(--ink);position:relative}
.mx-dot::after{content:'';position:absolute;left:50%;bottom:-7px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--mint);border:2px solid var(--ink)}
.mx.q .mx-card{padding:8px 14px;background:var(--soft)}
.mx.q .mx-dot::after{background:#fff}
.mx.raised{z-index:1}
.mx.mini .mx-tag,.mx.mini .mx-t b{display:none}
.mx.mini .mx-card{padding:5px 11px;border-radius:999px;box-shadow:2px 2px 0 var(--ink)}
.mx.mini .mx-t span{font-size:12px;font-weight:800;color:var(--ink)}
.mx.q.mini .mx-t b{display:block;font-size:12px}
.mx.q.mini .mx-t span{display:none}
.mx.below{flex-direction:column-reverse}
.mx.below .mx-dot::after{bottom:auto;top:-7px}

/* town pins */
.tpin{display:flex;align-items:center;gap:8px}
.tpin>i{position:relative;flex:none;width:18px;height:18px;border-radius:50%;background:#F2B544;border:2.5px solid var(--paper);box-shadow:0 0 0 2px var(--ink)}
.tpin.hi>i{background:var(--green)}
.tpin.hi>i::after{content:'';position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--green);animation:ring 1.8s ease-out infinite}
@keyframes ring{from{transform:scale(.6);opacity:1}to{transform:scale(1.6);opacity:0}}
.tpin .pl{background:#fff;border:2px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink);padding:6px 11px;font-size:14px;font-weight:800;white-space:nowrap;display:flex;flex-direction:column}
.tpin .pl span{font-size:12px;font-weight:700;color:var(--grey)}
.tpin.hi .pl{background:var(--soft)}

/* end-of-story call to action (portrait only) */
#cta-end{display:none}

/* tablet landscape (760-1279 wide): desktop composition, fixed-width side columns */
#story.m-tablet #record,#story.m-tablet #chat{left:auto;right:3%;width:300px}
#story.m-tablet #c-buyer{width:32%}
#story.m-tablet #c-match{width:46%}
#story.m-tablet #c-town{width:40%}
#story.m-tablet .chap h2{width:auto;max-width:100%}

/* portrait (phones, iPad upright): positions come from js/story.js, these set the look */
@media (max-width:759px),(max-aspect-ratio:100/105){#story{height:800vh}}
#story.m-portrait #stage{padding:8px}
#story.m-portrait #frame{border-radius:22px;box-shadow:4px 4px 0 var(--ink)}
#story.m-portrait #nav{padding:14px 16px}
#story.m-portrait #nav .badge{width:40px;height:40px}
#story.m-portrait #nav .badge img{width:33px;height:33px}
#story.m-portrait #nav .word{font-size:24px}
#story.m-portrait #scrim,#story.m-portrait #cue{display:none}
#story.m-portrait #hero{max-width:none;gap:16px}
#story.m-portrait #hero h1{font-size:clamp(36px,9.4vw,64px)}
#story.m-portrait #hero p{font-size:16px}
#story.m-portrait .hero-cta .btn-ghost,#story.m-portrait .backed{display:none}
#story.m-portrait .hero-cta .btn{font-size:15px;padding:11px 18px}
#story.m-portrait #nav .nav-cta{font-size:14px;padding:8px 16px}#story.m-portrait .chap{gap:8px}
#story.m-portrait .chap h2{font-size:clamp(24px,5.4vw,38px);width:auto;max-width:100%}
#story.m-portrait .chap p{font-size:15px;line-height:1.5}
#story.m-portrait #c-buyer{padding:0 4px}
#story.m-portrait #c-match,#story.m-portrait #c-town{padding:16px 18px}
#story.m-portrait #chat{width:auto;height:auto}
#story.m-portrait .bub{font-size:14px;padding:8px 12px}
#story.m-portrait #record{padding:14px 16px;gap:6px;box-shadow:4px 4px 0 var(--ink)}
#story.m-portrait #record .hd{padding-bottom:8px}
#story.m-portrait #record .hd b{font-size:16px}
#story.m-portrait .row{flex-direction:row;align-items:baseline;gap:10px}
#story.m-portrait .row .k{flex:none;width:88px;font-size:10px}
#story.m-portrait .row .v{font-size:13px}
#story.m-portrait .pill{padding:5px 10px;font-size:12px;box-shadow:2px 2px 0 var(--ink)}
#story.m-portrait .pill em{display:none}
#story.m-portrait .pill b{width:15px;height:15px;font-size:9px}
#story.m-portrait .mx-card{max-width:min(300px,calc(100vw - 56px))}
#story.m-portrait .tpin .pl{font-size:12px;padding:4px 9px}
#story.m-portrait #cta-end{display:flex;flex-direction:column;align-items:center;gap:10px}
#cta-end .cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
#cta-end .btn{font-size:16px;padding:13px 16px}
/* small phones (height < 720) */
#story.short #record .hd span,#story.short #record .saved{display:none}
#story.short #record{gap:4px;padding:10px 14px}
#story.short .row .v{font-size:12px}
/* iPad upright (width >= 600) */
#story.wide #c-buyer,#story.wide #c-match,#story.wide #c-town{max-width:640px}
#story.wide #record,#story.wide #chat{max-width:500px}
#story.wide .row .k{width:104px;font-size:11px}
#story.wide .row .v{font-size:15px}
#story.wide #record .hd b{font-size:18px}
#story.wide .bub{font-size:16px}
#story.wide .pill{font-size:14px;padding:6px 12px}

/* ---------- below the story ---------- */
.section{max-width:1200px;margin:0 auto;padding:clamp(88px,9vw,136px) clamp(20px,4vw,48px) 0}
.label{margin:0;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.section-head{display:flex;flex-direction:column;gap:20px}
.section-head h2{margin:0;font-size:clamp(40px,4.4vw,64px);font-weight:800;letter-spacing:-.04em;line-height:.98}

.trust{display:flex;flex-direction:column;align-items:center;gap:56px;text-align:center}
.trust-logos{display:flex;flex-direction:column;align-items:center;gap:24px}
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
.logo-tile{flex:none;height:72px;border:2px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);overflow:hidden;display:flex;align-items:center;justify-content:center}
.logo-tile.white{background:#fff;padding:10px 18px}
.logo-tile img{height:100%;width:auto;display:block}
.quote{margin:0;display:flex;flex-direction:column;align-items:center;gap:28px}
.quote blockquote{margin:0;max-width:900px;font-size:clamp(28px,3vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.18}
.quote figcaption{display:flex;align-items:center;gap:16px}
.avatar{width:52px;height:52px;border-radius:50%;background:var(--soft);border:2px solid var(--ink);object-fit:cover;flex:none}
.quote figcaption>div:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.quote .who{font-size:17px;font-weight:800}
.quote .org{font-size:15px;color:var(--grey)}

.pricing{background:var(--green);border:2px solid var(--ink);border-radius:32px;box-shadow:8px 8px 0 var(--ink);padding:clamp(40px,6vw,80px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:48px}
.pricing-copy{flex:1 1 520px;display:flex;flex-direction:column;gap:20px;color:var(--deep)}
.pricing-copy .label{color:var(--deep)}
.pricing-copy h2{margin:0;font-size:clamp(44px,5vw,76px);font-weight:800;letter-spacing:-.04em;line-height:.98}
.pricing-copy h2 span{color:var(--paper)}
.pricing-copy p:last-child{margin:0;max-width:560px;font-size:18px;line-height:1.6}
.pricing-cta{display:flex;flex-direction:column;gap:14px;flex:0 1 280px}
.pricing-cta .btn{font-size:17px;padding:15px 28px}
.pricing-cta .btn-paper{padding:14px 28px}
.btn-ink{color:var(--paper);background:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--deep)}
.btn-ink:hover{background:#1C5537}
.btn-ink:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--deep)}
.btn-paper{color:var(--ink);background:var(--paper);border:2px solid var(--ink);padding:14px 28px;min-height:54px}
.btn-paper:hover{background:#fff}

.about{display:flex;flex-direction:column;gap:40px}
.about-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:stretch}
.about-grid img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 40%;display:block;border:2px solid var(--ink);border-radius:24px;box-shadow:6px 6px 0 var(--ink)}
.about-card{display:flex;flex-direction:column;justify-content:center;gap:14px;background:#fff;border:2px solid var(--ink);border-radius:24px;box-shadow:6px 6px 0 var(--ink);padding:clamp(24px,2.6vw,36px)}
.about-card p{margin:0;font-size:16px;line-height:1.6}
.signature{display:flex;flex-direction:column;gap:4px;padding-top:8px}
.signature span:first-child{font-family:'Pacifico',cursive;font-size:28px;color:var(--green);line-height:1.4}
.signature span:last-child{font-size:15px;color:var(--grey)}
@media (max-width:1023px){.about-grid{grid-template-columns:minmax(0,1fr)}}

.faq{display:flex;flex-wrap:wrap;gap:64px;padding-bottom:clamp(112px,12vw,176px)}
.faq .section-head{flex:1 1 320px}
.faq-list{flex:2 1 560px;display:flex;flex-direction:column;border-top:2px solid var(--ink);min-width:0}
.faq-item{border-bottom:2px solid var(--ink)}
.faq-item h3{margin:0;font:inherit}
.faq-item button{width:100%;font:inherit;color:var(--ink);background:transparent;border:none;padding:26px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;text-align:left;cursor:pointer}
.faq-item button span:first-child{font-size:21px;font-weight:800;letter-spacing:-.01em}
.faq-item button:hover span:first-child{color:var(--green)}
.faq-item .sign{font-size:28px;font-weight:600;line-height:1}
.faq-item p{margin:0;padding:0 48px 28px 0;font-size:17px;line-height:1.6;color:var(--muted)}

/* ---------- footer: full-bleed, content in the 1200px container ---------- */
.footer{background:var(--ink);color:var(--paper);overflow:hidden}
.footer-inner{max-width:1200px;margin:0 auto;padding:88px clamp(20px,4vw,48px) 0;display:flex;flex-direction:column;gap:56px}
.footer h2{margin:0;font-size:clamp(44px,7vw,88px);font-weight:800;line-height:.95;letter-spacing:-.045em;text-align:center}
.footer h2 span{color:var(--mint)}
.footer-cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:48px}
.footer-cols>p{flex:1 1 360px;max-width:460px;margin:0;font-size:17px;line-height:1.6;color:#D3E8D8}
.footer-links{display:flex;gap:64px;flex-wrap:wrap;font-size:16px}
.footer-links div{display:flex;flex-direction:column;gap:12px}
.footer-links span{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.footer-links a{color:var(--paper);text-decoration:none}
.footer-links a:hover{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
.footer-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;border-top:1px solid #2F6B47;padding-top:24px;font-size:14px;color:#B9DCC3}
.bigmark{margin:24px 0 0;font-family:'Pacifico',cursive;font-size:clamp(180px,30vw,460px);line-height:.9;text-align:center;color:#1D5C35;white-space:nowrap;transform:translateY(18%)}
@media (max-width:1023px){.bigmark{font-size:25vw;transform:translateY(12%)}}
@media (prefers-reduced-motion:reduce){
  .tpin.hi>i::after,.cue-arrow{animation:none}
  #chat-track,.bub,.row,.btn,.banner-arrow{transition:none}
}