/* drop-page.css · /drop only. (/reel and /review still use drop.css.)
   treehouse. palette: forest #2D4A1E, cream #E8E6DF. Type: Bebas Neue, Playfair Display, Inter. */
:root {
  --green: #2D4A1E;
  --green-deep: #14290f;
  --green-ink: #0d1c0a;
  --green-2: #3A5E28;
  --cream: #E8E6DF;
  --cream-80: rgba(232,230,223,.82);
  --cream-60: rgba(232,230,223,.62);
  --cream-30: rgba(232,230,223,.3);
  --cream-14: rgba(232,230,223,.14);
  --cream-06: rgba(232,230,223,.06);
  --lime: #9fd04a;
  --aperol: #e05b1a;
  --paper: #EDEAE2;
  --card: #fbfaf6;
  --ff-d: 'Bebas Neue', Impact, sans-serif;
  --ff-e: 'Playfair Display', Georgia, serif;
  --ff-b: 'Inter', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
  --gut: clamp(1.25rem, 5vw, 3rem);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--green-ink); color: var(--cream); font: 400 16px/1.55 var(--ff-b); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.logo { height: 34px; width: auto; flex-shrink: 0; filter: brightness(0) invert(1); }
.logo-sm { height: 26px; opacity: .8; }

/* film grain, very light */
body.dp::after { content: ""; position: fixed; inset: -50%; z-index: 80; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } }

/* ============ hero ============ */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; padding: max(1.1rem, env(safe-area-inset-top)) var(--gut) 3.5rem; isolation: isolate; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden;
  background: radial-gradient(80% 70% at 75% 45%, #3A5E28 0%, #1d3415 45%, #0d1c0a 100%); }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
  filter: saturate(.55) brightness(.62) contrast(1.05); transform: scale(1.08); animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.08) translate(0,0); } to { transform: scale(1.16) translate(-1.5%,-1.2%); } }
.hero-shade { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(13,28,10,.78) 0%, rgba(13,28,10,.35) 22%, rgba(13,28,10,.5) 52%, rgba(13,28,10,.94) 82%, var(--green-ink) 100%),
    radial-gradient(90% 60% at 20% 70%, rgba(13,28,10,.55), transparent 70%); }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tag-pill { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .9rem; border-radius: 999px; white-space: nowrap;
  font: 500 .7rem/1 var(--ff-b); letter-spacing: .14em; text-transform: uppercase;
  background: rgba(13,28,10,.42); border: 1px solid var(--cream-14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tag-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(159,208,74,.6); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(159,208,74,0); } 100% { box-shadow: 0 0 0 0 rgba(159,208,74,0); } }

.hero-grid { flex: 1; display: grid; align-items: end; padding-top: 2rem; }
.hero-copy { max-width: 640px; }
.kicker { font: italic 400 clamp(1.15rem, 4.4vw, 1.5rem)/1.2 var(--ff-e); margin: 0 0 1rem; color: var(--cream); }
.hero-h { margin: 0; line-height: .9; font-weight: 400; }
.hh-a { display: block; font: 400 clamp(3.6rem, 17vw, 8.2rem)/.86 var(--ff-d); letter-spacing: .01em; text-transform: uppercase; color: var(--cream); }
.hh-b { display: block; font: italic 400 clamp(2.9rem, 13.5vw, 6.6rem)/.98 var(--ff-e); letter-spacing: -.025em; color: var(--lime); margin-top: .08em; }
.lede { font-size: clamp(1rem, 3.8vw, 1.15rem); color: var(--cream-80); max-width: 36ch; margin: 1.3rem 0 1.8rem; }

/* the two doors */
.doors { display: grid; gap: .7rem; max-width: 560px; }
.door { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: .9rem; padding: .85rem 1.1rem .85rem .85rem; border-radius: 20px; text-decoration: none;
  transition: transform .35s var(--ease), background .3s, border-color .3s, box-shadow .35s var(--ease); }
.door::after { content: ""; width: 9px; height: 9px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); margin-right: .35rem; opacity: .7; transition: transform .35s var(--ease); }
.door:hover { transform: translateY(-2px); }
.door:hover::after { transform: translateX(3px) rotate(45deg); }
.door:active { transform: scale(.98); }
.door-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; }
.door-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.door-txt b { display: block; font-weight: 600; font-size: 1.02rem; line-height: 1.2; }
.door-txt small { display: block; font-size: .8rem; line-height: 1.3; margin-top: .2rem; opacity: .72; }
.door-main { background: var(--cream); color: var(--green-ink); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.door-main .door-ic { background: var(--green-deep); color: var(--lime); }
.door-main:hover { background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.door-alt { color: var(--cream); background: rgba(13,28,10,.42); border: 1px solid var(--cream-30); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.door-alt .door-ic { background: rgba(224,91,26,.16); color: #ff9a66; }
.door-alt b { font: italic 400 1.18rem/1.15 var(--ff-e); }
.door-alt:hover { border-color: var(--cream); background: rgba(13,28,10,.6); }

.hero-print { display: none; }
.scroll-cue { position: absolute; left: 50%; bottom: 1rem; width: 22px; height: 36px; margin-left: -11px; border: 1.5px solid var(--cream-30); border-radius: 12px; display: none; }
.scroll-cue span { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--cream); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(-2px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }

.rise { animation: rise 1.1s var(--ease) both; }
.hero-copy .rise:nth-child(2) { animation-delay: .08s; }
.hero-copy .rise:nth-child(3) { animation-delay: .18s; }
.hero-copy .rise:nth-child(4) { animation-delay: .28s; }
.hero-print.rise { animation: print 1.4s .2s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes print { from { opacity: 0; transform: translateY(40px) rotate(0deg) scale(.96); } to { opacity: 1; transform: rotate(3deg); } }

/* ============ shared section heads ============ */
.sec { padding: 3rem 1rem 2.5rem; max-width: 680px; margin: 0 auto; }
.sec-head { padding: 0 .25rem; margin-bottom: 1.6rem; }
.sec-n { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; font: 500 .7rem/1 var(--ff-b); letter-spacing: .22em; text-transform: uppercase; color: var(--cream-60); }
.sec-n span { font: 400 1.05rem/1 var(--ff-d); letter-spacing: .06em; color: var(--lime); padding: .35rem .55rem .25rem; border: 1px solid rgba(159,208,74,.4); border-radius: 999px; }
.sec-n::after { content: ""; flex: 1; height: 1px; background: var(--cream-14); }
.sec-h { margin: 0; font: 400 clamp(2rem, 8vw, 3rem)/1.05 var(--ff-e); letter-spacing: -.02em; }
.sec-h em { color: var(--lime); }

/* ============ upload card ============ */
.card { position: relative; padding: 1rem; border-radius: 26px;
  background: linear-gradient(165deg, rgba(58,94,40,.5), rgba(20,41,15,.85) 60%);
  border: 1px solid rgba(159,208,74,.2);
  box-shadow: 0 40px 90px rgba(0,0,0,.5), inset 0 1px 0 rgba(232,230,223,.08); }
.picker { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .25rem;
  min-height: 240px; padding: 1.8rem 1rem; border-radius: 20px; cursor: pointer; isolation: isolate; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, rgba(159,208,74,.2), transparent 62%), var(--green-ink);
  transition: transform .3s var(--ease); }
.picker::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), rgba(159,208,74,.95), rgba(159,208,74,.08) 28%, rgba(232,230,223,.45) 52%, rgba(159,208,74,.08) 76%, rgba(159,208,74,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 7s linear infinite; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --a: 360deg; } }
.picker:hover, .picker.over { transform: translateY(-2px); }
.picker.over { background: radial-gradient(120% 100% at 50% 0%, rgba(159,208,74,.35), transparent 62%), var(--green-ink); }
.picker:active { transform: scale(.985); }
.picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.picker:has(input:focus-visible) { outline: 2px solid var(--lime); outline-offset: 3px; }
.picker-ic { width: 72px; height: 72px; border-radius: 50%; background: var(--lime); color: var(--green-ink); display: grid; place-items: center; margin-bottom: .9rem; animation: pulse 2.6s ease-in-out infinite; }
.picker-ic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 10px rgba(159,208,74,.12); } 50% { box-shadow: 0 0 0 20px rgba(159,208,74,.04); } }
.picker-t { font: 400 2.5rem/1 var(--ff-d); letter-spacing: .03em; text-transform: uppercase; }
.picker-s { color: var(--cream-60); font-size: .95rem; }
.picker-d { display: none; color: var(--cream-60); font-size: .9rem; }
@media (hover: hover) and (pointer: fine) { .picker-s { display: none; } .picker-d { display: block; } }

.ig-field { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .55rem; margin-top: .8rem; padding: .35rem 1rem .35rem 1.1rem; min-height: 58px;
  border-radius: 16px; background: rgba(13,28,10,.6); border: 1px solid var(--cream-14); transition: border-color .2s, background .2s; cursor: text; }
.ig-field:focus-within { border-color: var(--lime); background: rgba(13,28,10,.85); }
.ig-at { font: italic 400 1.35rem/1 var(--ff-e); color: var(--lime); }
.ig-field input { width: 100%; min-height: 44px; background: transparent; border: 0; outline: none; color: var(--cream); font: 400 16px/1 var(--ff-b); padding: 0; }
.ig-field input::placeholder { color: var(--cream-60); }
.ig-why { grid-column: 2; font-size: .8rem; color: var(--cream-80); margin: -.35rem 0 .3rem; }
.field-err { margin: .7rem 0 0; color: #ffb38f; font-size: .9rem; }

/* queue */
.queue { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; }
.queue:empty { display: none; }
.qi { display: grid; grid-template-columns: 52px 1fr auto; gap: .8rem; align-items: center; padding: .55rem .75rem .55rem .55rem; border-radius: 14px; background: rgba(13,28,10,.7); border: 1px solid var(--cream-06); animation: rise .5s var(--ease) both; }
.qi-thumb { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: #0b1708; position: relative; }
.qi-thumb img, .qi-thumb video { width: 100%; height: 100%; object-fit: cover; }
.qi-thumb .tag { position: absolute; left: 4px; bottom: 4px; font: 600 .55rem/1 var(--ff-b); letter-spacing: .08em; padding: .2rem .3rem; border-radius: 4px; background: rgba(0,0,0,.6); }
.qi-main { min-width: 0; }
.qi-name { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi-meta { font-size: .75rem; color: var(--cream-60); margin-top: .1rem; }
.qi-bar { height: 4px; border-radius: 4px; background: var(--cream-14); margin-top: .45rem; overflow: hidden; }
.qi-bar span { display: block; height: 100%; width: 0; background: var(--lime); border-radius: 4px; transition: width .25s linear; }
.qi-state { font: 600 .72rem/1 var(--ff-b); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-60); }
.qi.ok .qi-state { color: var(--lime); }
.qi.err .qi-state { color: #ffb38f; }
.qi.err .qi-bar span { background: var(--aperol); }
.qi-retry { background: none; border: 1px solid var(--cream-30); color: var(--cream); border-radius: 999px; padding: .4rem .7rem; font-size: .75rem; }
.check { width: 22px; height: 22px; fill: none; stroke: var(--lime); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* status + done */
.status { margin-top: .9rem; padding: 1rem; border-radius: 16px; background: rgba(159,208,74,.1); border: 1px solid rgba(159,208,74,.3); }
.status-row { display: flex; justify-content: space-between; font-size: .95rem; }
.bar { height: 8px; border-radius: 8px; background: var(--cream-14); margin: .7rem 0 .6rem; overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; border-radius: 8px; transition: width .3s linear;
  background: linear-gradient(90deg, var(--lime), #c9ec8a, var(--lime)); background-size: 200% 100%; animation: sheen 1.6s linear infinite; }
@keyframes sheen { to { background-position: -200% 0; } }
.status-note { margin: 0; font-size: .82rem; color: var(--cream-60); }
.done { text-align: center; padding: 2rem .5rem .8rem; }
.done-k { font: 500 .7rem/1 var(--ff-b); letter-spacing: .22em; text-transform: uppercase; color: var(--cream-60); margin: 0 0 .6rem; }
.done-h { margin: 0; font: italic 400 clamp(3rem, 13vw, 4.6rem)/1 var(--ff-e); letter-spacing: -.02em; color: var(--lime); animation: rise .8s var(--ease) both; }
.done-p { color: var(--cream-80); max-width: 34ch; margin: .9rem auto 1.4rem; }
.done-acts { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.4rem; border-radius: 999px; border: 0; font: 600 .95rem/1 var(--ff-b); text-decoration: none; transition: transform .2s var(--ease), background .2s; }
.btn:active { transform: scale(.97); }
.btn-cream { background: var(--cream); color: var(--green-ink); }
.btn-cream:hover { background: #fff; }
.btn-ghost { background: transparent; color: var(--cream); border: 1.5px solid var(--cream-30); }
.btn-ghost:hover { border-color: var(--cream); }

.promise { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .8rem; }
.promise li { position: relative; padding-left: 1.5rem; font-size: .92rem; color: var(--cream-60); }
.promise li::before { content: ""; position: absolute; left: 0; top: .62rem; width: .8rem; height: 1px; background: var(--lime); }
.promise b { color: var(--cream); font-weight: 600; }

/* ============ from the night ============ */
.night { padding: 1rem 0 4rem; overflow: hidden; }
.night-head { max-width: 680px; margin: 0 auto 1.2rem; padding: 0 1.25rem; display: flex; justify-content: space-between; align-items: baseline; }
.night-k { margin: 0; font: italic 400 1.5rem/1 var(--ff-e); }
.night-link { font-size: .88rem; color: var(--cream-80); text-decoration: none; border-bottom: 1px solid var(--lime); padding-bottom: 2px; }
.strip { -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.strip-track { display: flex; gap: .9rem; width: max-content; animation: marq 70s linear infinite; padding: .8rem 0 1.4rem; }
.strip:hover .strip-track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.strip figure { margin: 0; width: 170px; aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; flex: none; box-shadow: 0 20px 44px rgba(0,0,0,.45); }
.strip figure:nth-child(odd) { transform: rotate(-2deg); }
.strip figure:nth-child(even) { transform: rotate(1.6deg) translateY(10px); }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.strip figure:hover img { transform: scale(1.05); }

/* ============ missed connections ============ */
.connect { --ink: #14290f; --ink-70: rgba(20,41,15,.72); --ink-20: rgba(20,41,15,.18); --blush: #c9500f;
  position: relative; color: var(--ink); background: var(--paper); padding: 3.2rem var(--gut) 4rem; border-radius: 32px 32px 0 0;
  background-image: radial-gradient(rgba(20,41,15,.045) 1px, transparent 1px); background-size: 3px 3px; scroll-margin-top: 0; }
.connect-in { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; }
/* phones: headline, then the form, then how it works */
.connect-copy { display: contents; }
.connect-copy > .sec-n { order: 1; } .connect-h { order: 2; } .connect-lede { order: 3; }
.slip { order: 4; margin-top: 4.5rem; } .steps { order: 5; } .wall { order: 6; } .connect-trust { order: 7; }
.sec-n-ink { color: var(--ink-70); }
.sec-n-ink span { color: var(--ink); border-color: var(--ink-20); }
.sec-n-ink::after { background: var(--ink-20); }
.connect-h { margin: 0; font: 400 clamp(2.7rem, 12vw, 4.6rem)/.98 var(--ff-e); letter-spacing: -.03em; }
.connect-h em { display: block; color: var(--green-2); }
.connect-lede { font-size: 1.05rem; line-height: 1.55; color: var(--ink-70); max-width: 40ch; margin: 1.2rem 0 0; }
.steps { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: .6rem; align-items: baseline; padding: .95rem 0; border-top: 1px solid var(--ink-20); }
.steps li:last-child { border-bottom: 1px solid var(--ink-20); }
.steps b { font: italic 400 1.4rem/1 var(--ff-e); color: var(--green-2); }
.steps span { font-size: .98rem; line-height: 1.45; text-wrap: pretty; }
.wall { position: relative; margin: 2.2rem .4rem .4rem; padding: 10px 10px 34px; background: var(--card); box-shadow: 0 22px 50px rgba(20,41,15,.2); transform: rotate(-1.6deg); }
.wall img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.wall::before, .wall::after { content: ""; position: absolute; top: -11px; width: 74px; height: 22px; background: rgba(224,91,26,.26); }
.wall::before { left: 8%; transform: rotate(-6deg); }
.wall::after { right: 8%; transform: rotate(5deg); background: rgba(159,208,74,.38); }
.connect-trust { margin: 1.6rem 0 0; font: 600 .78rem/1.6 var(--ff-b); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-70); }

.slip { position: relative; background: var(--card); border-radius: 10px; padding: 2.6rem 1.25rem 1.6rem; align-self: start;
  box-shadow: 0 34px 80px rgba(20,41,15,.18), 0 2px 0 rgba(20,41,15,.05); }
.slip::before { content: ""; position: absolute; left: 14px; right: 14px; top: 12px; height: 2px; background-image: radial-gradient(circle, rgba(20,41,15,.28) 1px, transparent 1.5px); background-size: 8px 2px; }
.slip-k { margin: 0 0 1.2rem; font: italic 400 1.6rem/1 var(--ff-e); }
.slip-stamp { position: absolute; top: -52px; right: 10px; width: 128px; height: 128px; border-radius: 50%; border: 2px solid var(--blush); color: var(--blush); display: grid; place-items: center; align-content: center; gap: 4px;
  transform: rotate(12deg); background: rgba(251,250,246,.96); font: 600 .66rem/1 var(--ff-b); letter-spacing: .16em; box-shadow: 0 10px 24px rgba(20,41,15,.12); text-transform: uppercase; }
.slip-stamp b { font: italic 400 1.65rem/1 var(--ff-e); letter-spacing: 0; text-transform: none; }

.connect-form { display: grid; gap: 1.5rem; }
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); border-radius: 999px; padding: 4px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 0 .6rem; border-radius: 999px; font-size: .88rem; line-height: 1.15; cursor: pointer; transition: background .3s var(--ease), color .3s; }
.seg input:checked + span { background: var(--ink); color: var(--paper); }
.seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.connect .fields { display: grid; gap: 1.3rem; }
.pfield { display: block; }
.pfield > span, .pfield legend { display: block; font: 600 .66rem/1 var(--ff-b); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-70); margin-bottom: .2rem; padding: 0; }
.pfield em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .9; font-size: .8rem; margin-left: .3rem; }
.pfield input, .pfield textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--ink-20); border-radius: 0; color: var(--ink); font: 400 17px/1.4 var(--ff-b); padding: .7rem 0 .55rem; outline: none; transition: border-color .2s; resize: none; -webkit-appearance: none; }
.pfield textarea { min-height: 64px; font: italic 400 18px/1.4 var(--ff-e); }
.pfield input::placeholder, .pfield textarea::placeholder { color: rgba(20,41,15,.38); font-style: italic; }
.pfield input:focus, .pfield textarea:focus { border-bottom-color: var(--ink); }
.pfield input.bad, .pfield textarea.bad { border-bottom: 2px solid #b23a0e; }
.pchips.bad span { border-color: #b23a0e; }
.pchips { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pchips legend { width: 100%; margin-bottom: .6rem; }
.pchips label { position: relative; }
.pchips input { position: absolute; opacity: 0; pointer-events: none; }
.pchips span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 1.05rem; border: 1px solid var(--ink-20); border-radius: 999px; font-size: .9rem; cursor: pointer; transition: all .2s; }
.pchips input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.pchips input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.pconsent { display: grid; grid-template-columns: 22px 1fr; gap: .7rem; align-items: center; font-size: .92rem; cursor: pointer; min-height: 44px; }
.pconsent input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.pconsent.bad span { color: #b23a0e; }
.connect .field-err { color: #b23a0e; margin: -.6rem 0 0; }
.pbtn { width: 100%; min-height: 60px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: italic 400 1.4rem/1 var(--ff-e); cursor: pointer; transition: transform .2s var(--ease), background .2s, box-shadow .3s; }
.pbtn:hover { background: #0b1708; box-shadow: 0 14px 34px rgba(20,41,15,.28); }
.pbtn:active { transform: scale(.98); }
.pbtn:disabled { opacity: .6; }
.connect-done { text-align: center; padding: 1rem 0 .4rem; }
.connect-done-h { font: italic 400 3.4rem/1 var(--ff-e); margin: .4rem 0 .6rem; animation: stamp .6s var(--ease) both; }
@keyframes stamp { from { opacity: 0; transform: scale(1.3) rotate(-6deg); } to { opacity: 1; transform: none; } }
.connect-done p:last-child { margin: 0; opacity: .8; }

/* ============ footer ============ */
.foot { text-align: center; padding: 2.6rem 1rem calc(3rem + env(safe-area-inset-bottom)); color: var(--cream-60); font-size: .82rem; background: var(--green-ink); }
.foot .logo { margin: 0 auto .6rem; }
.foot a { text-decoration: none; border-bottom: 1px solid var(--cream-30); }

/* ============ mobile dock ============ */
.dock { position: fixed; z-index: 70; left: 50%; bottom: calc(.9rem + env(safe-area-inset-bottom)); display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: rgba(13,28,10,.72); border: 1px solid var(--cream-14); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 18px 40px rgba(0,0,0,.45); transform: translate(-50%, 140%); opacity: 0; transition: transform .5s var(--ease), opacity .4s; }
.dock.show { transform: translate(-50%, 0); opacity: 1; }
.dock a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.2rem; border-radius: 999px; font: 600 .9rem/1 var(--ff-b); text-decoration: none; color: var(--cream); white-space: nowrap; transition: background .25s, color .25s; }
.dock a.on { background: var(--cream); color: var(--green-ink); }
.dock .dock-alt { font: italic 400 1.02rem/1 var(--ff-e); }

/* ============ reveal ============ */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ============ desktop ============ */
@media (min-width: 900px) {
  .hero { padding: 1.8rem var(--gut) 4rem; }
  .hero-shade { background:
    linear-gradient(90deg, rgba(13,28,10,.92) 0%, rgba(13,28,10,.7) 45%, rgba(13,28,10,.35) 100%),
    linear-gradient(180deg, rgba(13,28,10,.5) 0%, transparent 25%, transparent 70%, var(--green-ink) 100%); }
  .hero-bg img { filter: saturate(.5) brightness(.62) blur(10px); transform: scale(1.15); animation: none; }
  .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); max-width: 1240px; width: 100%; margin: 0 auto; padding-top: 0; }
  .hh-a { font-size: clamp(5rem, 9.5vw, 9rem); }
  .hh-b { font-size: clamp(4rem, 7.4vw, 7rem); }
  .doors { grid-template-columns: 1fr 1fr; max-width: 640px; }
  .door { padding: 1rem 1.1rem 1rem 1rem; }
  .hero-print { display: block; position: relative; margin: 0; justify-self: center; width: min(400px, 100%); padding: 14px 14px 52px; background: var(--card); color: var(--green-ink);
    box-shadow: 0 50px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.04); transform: rotate(3deg); }
  .hero-print img { background: #2D4A1E; width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 60%; filter: saturate(.92) contrast(1.02); }
  .hero-print figcaption { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font: italic 400 1.1rem/1 var(--ff-e); }
  .hero-print::before { content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; margin-left: -55px; background: rgba(159,208,74,.42); transform: rotate(-3deg); }
  .scroll-cue { display: block; }

  .sec { padding: 4rem 2rem 2.5rem; }
  .card { padding: 1.25rem; }
  .picker { min-height: 280px; }
  .promise { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
  .strip figure { width: 230px; }

  .connect { padding: 4.5rem var(--gut) 5rem; border-radius: 48px 48px 0 0; }
  .connect-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 5rem; align-items: start; }
  .connect-copy { display: block; }
  .slip { margin-top: 0; }
  .connect .fields { grid-template-columns: 1fr 1fr; }
  .pfield-wide { grid-column: 1 / -1; }
  .slip { padding: 3rem 2.2rem 2.2rem; position: sticky; top: 2rem; }
  .slip-stamp { width: 156px; height: 156px; top: -64px; right: -18px; }
  .slip-stamp b { font-size: 2rem; }
  .slip-stamp span { font-size: .72rem; }
  .dock { display: none; }
  .foot { padding-bottom: 2.6rem; }
}

/* scroll-driven parallax where supported */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-copy { animation: heroOut linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    @keyframes heroOut { to { opacity: .15; transform: translateY(-6vh); } }
  }
}

@media (max-width: 380px) { .seg span { font-size: .8rem; padding: 0 .35rem; } }
@media (max-width: 359px) { .tag-pill { font-size: .6rem; letter-spacing: .08em; padding: .5rem .65rem; } .logo { height: 30px; } .door-txt small { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .rv { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}