/* LocalLoop retro landing page. Accent: #F5C242, ink: #0F3B33, ground: #FBF1DC */
body{margin:0;background:#FBF1DC}
a{color:#0F3B33}a:hover{color:#072822}
.rf{font-family:Fraunces,Georgia,serif;font-variation-settings:"SOFT" 100;font-weight:900}
@keyframes rt-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rt-track{display:flex;width:max-content;animation:rt-marquee 30s linear infinite}
.rt-strip:hover .rt-track{animation-play-state:paused}
@keyframes rt-spin{to{transform:rotate(360deg)}}
.rt-burst{animation:rt-spin 40s linear infinite}
@media (prefers-reduced-motion: reduce){.rt-track,.rt-burst{animation:none}}
details summary{list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}
details[open] .rt-plus{transform:rotate(45deg)}
.nav-links{display:flex}
.nav-burger{display:none}
@media (max-width: 900px){.nav-links{display:none}.nav-burger{display:flex}}
@media (min-width: 901px){.nav-panel{display:none}}
.mobile-only{display:none}
@media (max-width: 600px){
h1{font-size:40px!important;line-height:1.2!important}
h1 br{display:none}
h2{font-size:32px!important;line-height:1.05!important}
h3.rf{font-size:26px!important}
[style*="padding: 112px 24px"],[style*="padding: 104px 24px"],[style*="padding: 120px 24px 104px"]{padding:52px 20px!important}
[style*="padding: 0 24px 112px"]{padding-bottom:52px!important}
[style*="padding: 32px 24px 96px"],[style*="padding: 40px 24px 96px"]{padding-top:8px!important;padding-bottom:48px!important}
[style*="gap: 56px"]{gap:28px!important}
[style*="gap: 48px"]{gap:24px!important}
[style*="gap: 32px"]{gap:16px!important}
[style*="padding: 40px;"]{padding:24px!important}
[style*="padding: 32px;"]{padding:22px!important}
[style*="font-size: 18px"],[style*="font-size: 19px"]{font-size:16px!important}
[style*="min-height: 300px"]{min-height:0!important;flex-direction:row!important;align-items:center!important}
[style*="width: 92px"]{width:64px!important;height:64px!important}
[style*="width: 92px"] svg{width:34px;height:34px}
[style*="margin-top: auto"]{margin-top:0!important}
[style*="flex: 0 1 200px"]{display:none!important}
li[style*="padding: 13px 18px"],li[style*="padding: 14px 18px"]{padding:10px 14px!important;font-size:15px!important}
img[alt^="A neighbor"]{aspect-ratio:4/3!important}
.mobile-only{display:flex!important}
}

/* Conditional blocks (were template conditionals) */
.if{display:contents}
.if[hidden]{display:none!important}
.chip[aria-pressed="true"]{background:#F5C242!important;box-shadow:2px 2px 0 #0F3B33}
.chip[disabled]{opacity:.4;cursor:not-allowed}
.form-error{color:#B3261E;font-size:14px;font-weight:700;margin:0}

/* ---------- Sticky header (v2) ---------- */
.site-header-wrap{position:sticky;top:0;z-index:50;background:#FBF1DC;transition:box-shadow .2s ease}
.site-header-wrap.is-scrolled{box-shadow:0 2px 0 #0F3B33}
.site-header-wrap > header{padding:16px 24px!important}
.nav-cta-mobile{display:none;margin-left:auto}
@media (max-width: 900px){
  .nav-cta-mobile{display:inline-flex}
  .site-header-wrap > header{padding:12px 16px!important;gap:12px!important;flex-wrap:nowrap!important}
  .site-header-wrap > header > a:first-child{font-size:24px!important}
  .site-header-wrap > header > a:first-child svg{width:32px;height:18px}
  .nav-burger{width:44px!important;height:44px!important}
  .nav-panel{max-height:calc(100vh - 90px);overflow:auto}
}
/* hide the mobile header CTA while the sign-up card is on screen */
.site-header-wrap.form-visible .nav-cta-mobile{visibility:hidden}
/* anchors and the sign-up card land below the sticky header */
[id]{scroll-margin-top:84px}
#waitlist-form{scroll-margin-top:96px}
@media (max-width: 600px){
  /* roomier sign-up card on phones */
  [style*="padding: clamp(32px, 5vw, 72px)"]{padding:20px!important}
  #waitlist-form{padding:22px!important}
  #waitlist-form h3.rf{font-size:28px!important}
}

.measurement{position:fixed;bottom:16px;left:16px;right:16px;max-width:620px;margin:auto;background:white;border:1px solid #abbcaf;box-shadow:0 4px 24px #173e3825;border-radius:10px;padding:16px;z-index:20;font-size:13px}.measurement p{margin:0 0 12px;line-height:1.5}.measurement div{display:flex;gap:12px}.measurement button{flex:1;background:#173e38;color:white;border:0;padding:12px;border-radius:6px;font:inherit;cursor:pointer}


/* Keep the sticker in its own line box so its border never overlaps the headline. */
#top .hero-title{line-height:1.16!important}
#top .hero-sticker{display:block;width:fit-content;max-width:100%;box-sizing:border-box;margin-top:.18em;line-height:1.15;padding:0 .16em .08em!important}
@media(max-width:600px){
 #top .hero-title{font-size:clamp(32px,9.6vw,40px)!important}
 #founder{display:grid!important;grid-template-columns:100px minmax(0,1fr);column-gap:20px!important;row-gap:12px!important;align-items:center}
 #founder>div:first-child{grid-column:1;grid-row:1 / 3;min-width:0!important;width:100px}
 #founder>div:first-child img{box-sizing:border-box;box-shadow:5px 5px 0 #F5C242!important}
 #founder>div:nth-child(2){display:contents!important}
 #founder>div:nth-child(2)>span{grid-column:2;grid-row:1;font-size:10px!important;align-self:end}
 #founder h2{grid-column:2;grid-row:2;font-size:clamp(23px,6.4vw,28px)!important;line-height:1.12!important;align-self:start}
 #founder p{grid-column:1 / -1}
 #founder p:first-of-type{margin-top:12px!important}
}

/* Show only the handoff half of the comparison photograph. */
.handoff-crop{position:relative;aspect-ratio:4/5;max-width:400px;margin:auto;overflow:hidden;border-radius:32px;border:3px solid #FBF1DC;box-sizing:border-box}
.handoff-crop img{position:absolute;right:0;top:0;width:200%;height:100%;object-fit:cover;max-width:none}
@media(max-width:600px){
 #how{gap:24px!important}
 #how>div:nth-child(2){display:flex!important;flex-direction:column;gap:14px!important}
 #how>div:nth-child(2)>div{display:grid!important;grid-template-columns:36px minmax(0,1fr);column-gap:12px!important;row-gap:7px!important;padding:16px!important;border-radius:18px!important;box-shadow:4px 4px 0 #F5C242!important}
 #how>div:nth-child(2)>div>span{grid-column:1;grid-row:1 / 3;width:36px!important;height:36px!important;font-size:23px!important}
 #how h3{grid-column:2;font-size:18px!important;line-height:1.25!important}
 #how p{grid-column:2;font-size:14px!important;line-height:1.45!important}
 .handoff-crop{max-width:280px}
}

#familiar-face>div>div:first-child{max-width:422px;margin-inline:auto}
/* Fit the desktop sticker wording on one line within the hero column. */
@media(min-width:601px){
 #top .hero-title{container-type:inline-size}
 #top .hero-sticker{white-space:nowrap;font-size:min(1em,12cqw)}
}