/* Homepage. Ported from design/wireframe/Main.dc.html (inline styles moved here). */
.brass{color:var(--brass)}
.stack{display:flex;flex-direction:column;gap:14px}
.more{font-size:12px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--brass)}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}

/* Hero. The scrim is the only gradient on the site (TICKET §1). */
/* Exactly one screen under the 84px header (Jon, 2026-10-26: scrolling showed "a little bit more video"). svh, not vh, so a phone URL bar cannot push it past the fold. It still grows if the copy needs more room. */
.hero{position:relative;background:var(--forest);color:var(--linen);min-height:max(560px,calc(100svh - 84px));display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,42,32,0.45) 0%,rgba(28,42,32,0.50) 50%,rgba(28,42,32,0.78) 100%)}
.hero-copy{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px;padding-top:56px;padding-bottom:56px}
.hero h1{font-size:124px;color:var(--linen)}
.hero-lede{margin:0;font-size:24px;color:var(--linen);max-width:620px;line-height:1.45}
.hero-terms{margin:0;font-size:14px;letter-spacing:0.2em;text-transform:uppercase;font-weight:500;color:var(--linen)}
/* Gunn: the thin type "is not popping off the back of the picture". A soft navy pool behind the
   copy, a heavier lede, and a shadow lift the words without boxing them. */
body.skin .hero-scrim{background:radial-gradient(ellipse 60% 50% at 50% 52%,rgba(22,25,34,0.55) 0%,rgba(22,25,34,0) 100%),linear-gradient(180deg,rgba(22,25,34,0.35) 0%,rgba(22,25,34,0.40) 50%,rgba(22,25,34,0.78) 100%)}
body.skin .hero h1{font-size:92px;max-width:1040px;text-shadow:0 2px 28px rgba(0,0,0,0.35)}
body.skin .hero-lede{font-weight:500;text-shadow:0 1px 14px rgba(0,0,0,0.45)}
body.skin .hero-terms{font-weight:600;text-shadow:0 1px 12px rgba(0,0,0,0.5)}
body.skin .hero-text{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,0.5)}
.hero-ctas{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:8px}
.btn.hero-btn{min-height:58px;padding:0 40px;font-size:13px;background:var(--linen);color:var(--forest)}
.btn.hero-btn:hover{background:var(--brass);color:var(--linen)}
.hero-text{font-size:14px;color:#E9E2D4;letter-spacing:0.04em}
.hero-text b{font-weight:600;color:#fff}
.hero-text:hover{color:var(--brass-dark)}

/* Proof line */
.proof-row{padding-top:44px;padding-bottom:44px;display:flex;justify-content:center;gap:16px 56px;flex-wrap:wrap;text-align:center;align-items:baseline}
.proof-row>.serif{font-size:24px}
.proof-dot{color:var(--hair)}

/* Three doors */
.doors-inner{padding-top:88px;padding-bottom:112px;display:flex;flex-direction:column;gap:32px}
.doors-label{text-align:center}
/* Five across on a wide screen; on a phone they become a sideways swipe, so the tall images stay tall. */
.doors-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.doors-row .door{gap:14px}
.doors-row .door h3{font-size:26px}
.doors-row .door-img{height:420px;border-radius:10px}
.tile{display:flex;flex-direction:column;gap:18px;color:var(--ink)}
.tile[hidden]{display:none}
.door h3{font-size:36px}
.door-img{height:520px;overflow:hidden;background:#D9D1C1}
.door-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.door:hover .door-img img{transform:scale(1.03)}
/* Round 10 (Jon): the camper sits at the photo's left edge, so a centred crop cut it off on narrow cards.
   Anchor that one left so the whole rig shows, below the label, like the cabin. */
.door-img.anchor-left img{object-position:0% 50%;transform-origin:0% 50%}
@media (prefers-reduced-motion:reduce){.door-img img{transition:none}.door:hover .door-img img{transform:none}}
/* Round 5 (Jon): the label under the photo got skipped, so it sits on the photo now, white over
   a soft dark fade at the foot of the image. A second gradient, on his call over TICKET §1. */
.doors-row .door{position:relative}
.doors-row .door-img{position:relative}
/* Round 6 (Jon): centred in the middle of the photo, like "Find your freedom." over the hero,
   so the fade is a soft dark pool behind the middle rather than a band at the foot. */
.doors-row .door-img::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 85% 45% at 50% 50%,rgba(0,0,0,0.50) 0%,rgba(0,0,0,0.18) 70%,rgba(0,0,0,0.10) 100%);pointer-events:none}
.doors-row .door h3{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0;padding:0 16px;text-align:center;color:#fff;line-height:1.1;text-shadow:0 1px 14px rgba(0,0,0,0.55)}


/* Full bleed */
.bleed{position:relative;background:#22312A;color:var(--linen);min-height:720px;display:flex;align-items:flex-end;overflow:hidden}
.bleed-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Jon, 2026-10-26 (twice): any shade over the footage reads as overcast. It is now a short fade along
   the bottom edge only, under the type; everything above it is the original clip at full brightness.
   The text shadow carries legibility where the fade is thin.
   Round 10 (Jon): he could see a line. skin.css was still painting a FLAT shade over that strip, so it
   read as a box; it is a true gradient now. The headline is centred in the same band (--band) the
   fade covers, so it sits evenly inside it rather than low. */
.bleed{--band:300px}
.bleed-scrim{position:absolute;left:0;right:0;bottom:0;height:var(--band);background:linear-gradient(to top,rgba(28,42,32,0.62) 0%,rgba(28,42,32,0.45) 30%,rgba(28,42,32,0.2) 62%,rgba(28,42,32,0.06) 85%,rgba(28,42,32,0) 100%)}
.bleed-copy{position:relative;padding-top:0;padding-bottom:0;height:var(--band);display:flex;align-items:center;width:100%}
.bleed-copy h2{margin:0}
.bleed h2{font-size:72px;color:var(--linen);text-shadow:0 2px 18px rgba(0,0,0,0.45)}

/* How it works */
.how-inner{padding-top:120px;padding-bottom:120px;display:flex;flex-direction:column;gap:64px}
.center-head{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.center-head h2{font-size:60px}
.steps{gap:40px}
.step{padding-top:28px;display:flex;flex-direction:column;gap:12px}
.step-num{font-size:22px;color:var(--brass)}
.step h3{font-size:32px}
.step p{margin:0}

/* This week's land (tiles shared with /land/) */
.available{background:var(--parchment)}
.available-inner{padding-top:112px;padding-bottom:112px;display:flex;flex-direction:column;gap:48px}
.available-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.available-head h2{font-size:60px}
.tiles{gap:32px}
.tiles .tile{gap:14px}
.tiles .tile h3{font-size:30px}
.tile-img{position:relative;height:340px;overflow:hidden;background:#D9D1C1}
.tile-img img{width:100%;height:100%;object-fit:cover}
.tile-img .pill{position:absolute;top:16px;left:16px;background:var(--linen)}
.ph.tile-img{align-items:flex-end}
.tile .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tile .price{font-size:34px}
.tile .meta .muted{font-size:14px;text-align:right}

/* Guarantee */
.guarantee{background:var(--forest);color:var(--linen)}
.guarantee-inner{padding-top:140px;padding-bottom:140px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.guarantee h2{font-size:84px;color:var(--linen);max-width:900px}
.guarantee p{margin:0;font-size:14px;color:#A9B3A9;max-width:520px}
.guarantee p.guarantee-line{font-family:var(--serif);font-size:48px;line-height:1.15;color:var(--linen);max-width:940px}

/* Hero picker: I want to [use] in [state] -> View available land.
   Round 4 (Jon + Gunn: the solid white box "feels inelegant"): frosted glass over the photo,
   lifted on a soft shadow, so it reads as part of the picture rather than pasted on it. */
.finder{display:flex;align-items:stretch;gap:0;margin-top:8px;background:rgba(255,255,255,0.14);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,0.28);border-radius:14px;box-shadow:0 24px 60px -12px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.18);padding:8px;max-width:100%;width:auto}
/* Jon, 2026-10-26: the state picker was too big; the button is the thing to see and click. So the field
   sizes to its words and the button carries the weight. */
.finder{display:inline-flex}
.finder-field{position:relative;flex:0 0 auto;width:200px;display:flex;flex-direction:column;justify-content:center;text-align:left;padding:6px 40px 6px 20px;min-width:0;border-right:1px solid rgba(255,255,255,0.22);border-radius:10px;transition:background .15s ease}
.finder-field:hover{background:rgba(255,255,255,0.10)}
.finder-field::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:translateY(-30%) rotate(45deg);pointer-events:none}
.finder-field:last-of-type{border-right:none}
.finder-k{font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#7FE3D7}
/* Jon, 2026-10-26: All States was the loudest text in the box. Smaller and regular weight, so the button wins. */
.finder-select{appearance:none;-webkit-appearance:none;font:inherit;font-size:16px;font-weight:400;color:#fff;background:transparent;border:none;padding:4px 0;min-height:36px;cursor:pointer;width:100%}
.finder-select option{color:#161922}
.btn.finder-go{border-radius:10px !important}
.finder-select:focus-visible{outline:2px solid #1FB7A6;outline-offset:2px}
.btn.finder-go{flex:0 0 auto;min-height:68px;padding:0 48px;font-size:15px}
.doors-label{font-size:48px}
.signup-h{font-family:var(--serif);font-size:30px;font-weight:400;margin:0}

/* Questions */
.questions-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:80px;padding-top:120px;padding-bottom:120px;align-items:start}
.questions-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:40px}
.questions-side h2{font-size:56px}
.questions-side p{margin:0;font-size:16px;max-width:320px}
.questions-side div{margin-top:8px}

/* About */
.about-inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:80px;align-items:center;padding-top:120px;padding-bottom:120px}
.about-img{position:relative;height:620px;overflow:hidden;background:#D9D1C1}
.about-img img{width:100%;height:100%;object-fit:cover}
.about-tag{position:absolute;left:16px;bottom:16px;right:16px;background:var(--linen);padding:8px 12px;font-size:12px;letter-spacing:0.04em}
.about-copy{display:flex;flex-direction:column;gap:22px}
.about-copy h2{font-size:56px}
.about-copy p{margin:0;font-size:19px;color:#4A4439}

/* One review */
.review{background:var(--parchment)}
.review-inner{padding-top:112px;padding-bottom:112px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.review blockquote{margin:0;font-size:40px;font-style:italic;max-width:900px;line-height:1.25}
.review-by{display:flex;flex-direction:column;gap:6px;align-items:center}
.review-by>span:first-child{font-weight:500}
/* Carousel: native scroll-snap, so it swipes on a phone with no script; the arrows are a convenience. */
.review-track{display:flex;align-items:center;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.review-track::-webkit-scrollbar{display:none}
.review-row{display:flex;align-items:center;width:100%;gap:8px}
.review-row .review-track{flex:1 1 auto;min-width:0}
.review-nav{flex:0 0 auto;width:48px;height:48px;border:0;background:none;color:inherit;font-size:44px;line-height:1;cursor:pointer;opacity:0.45;font-family:inherit}
.review-nav:hover,.review-nav:focus-visible{opacity:1}
.review-slide{flex:0 0 100%;scroll-snap-align:center;margin:0;padding:0 8px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:24px}

/* Email */
.signup-inner{padding-top:56px;padding-bottom:64px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.signup h2{font-size:48px}
.signup-form{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;width:100%;max-width:620px}
.signup-form .field{flex:1 1 280px}
.signup-form .btn{min-height:54px}
.signup-note{font-size:13px}

@media (max-width:860px){
  .cols3,.cols2{grid-template-columns:repeat(1,minmax(0,1fr)) !important}
  .hero h1{font-size:64px}
  .h2,.center-head h2,.available-head h2,.questions-side h2,.about-copy h2,.bleed h2,.guarantee h2{font-size:44px}
  .signup-h{font-size:24px}
  .hero{min-height:max(520px,calc(100svh - 84px))}
  .hero-copy{padding-top:40px;padding-bottom:40px;gap:22px}
  .hero-lede{font-size:20px}
  .hero-terms{font-size:12px;letter-spacing:0.16em}
  .hero-text{display:inline-flex;align-items:center;min-height:52px}
  .proof-row{gap:8px 24px}
  .proof-row>.serif{font-size:20px}
  .proof-dot{display:none}
  .doors-inner{padding-top:64px;padding-bottom:72px}
  .door-img{height:360px}
  body.skin .hero h1{font-size:50px}
  .doors-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -20px;padding:0 20px 8px;scroll-padding:0 20px;scrollbar-width:none}
  .doors-row::-webkit-scrollbar{display:none}
  .doors-row .door{flex:0 0 66%;scroll-snap-align:start}
  .doors-row .door-img{height:340px}
  .doors-row .door h3{font-size:24px;padding:0 14px}
  .bleed{min-height:480px}
  .bleed{--band:220px}
  .how-inner,.questions-inner,.about-inner{padding-top:80px;padding-bottom:80px;gap:40px}
  .available-inner,.review-inner{padding-top:80px;padding-bottom:80px}
  .available-head .more{display:inline-flex;align-items:center;min-height:52px}
  .tile-img{height:280px}
  .guarantee-inner{padding-top:96px;padding-bottom:96px}
  .questions-side{position:static}
  .about-img{height:420px}
  .review blockquote{font-size:30px}
  .review-nav{width:36px;font-size:36px}
  .review-row{gap:0}
  .signup-inner{padding-top:48px;padding-bottom:56px}
  .btn{font-size:13px}
  .finder{flex-direction:column;padding:8px;gap:4px;width:100%}
  /* Jon, 2026-10-26: the button is centred on a phone, so the state text is too. Equal side padding keeps
     the text on the true centre line with the arrow sitting in the right-hand gutter. */
  .finder-field{width:auto;border-right:none;border-bottom:1px solid rgba(255,255,255,0.22);border-radius:8px;padding:8px 40px}
  .finder-select{text-align:center;text-align-last:center}
  .finder-field:last-of-type{border-bottom:none}
  .btn.finder-go{min-height:56px;width:100%}
  .guarantee p.guarantee-line{font-size:30px}
  .doors-label{font-size:34px}
}