/* heyscooch.com homepage. Builds on style.css: same colors, type, tickets and buttons as the app. */
body.site{font-size:17px}
.site main{max-width:1040px;margin:0 auto;padding:0 16px 40px;display:flex;flex-direction:column;gap:72px}
.site h1{font-size:clamp(42px,8vw,68px);letter-spacing:-.04em;line-height:.98}
.site h2{font-size:clamp(28px,5vw,38px);letter-spacing:-.03em}
.site h3{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.015em;text-transform:none;color:var(--ink)}
.site p{max-width:62ch}
.site a.mark{color:var(--ink);text-decoration:none}

.s-head{max-width:1040px;margin:0 auto;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.s-nav{position:static;background:none;border:0;padding:0;display:flex;align-items:center;gap:18px}   /* style.css pins the app's <nav> to the bottom; not this one */
.s-nav a:not(.btn){color:var(--ink);font-weight:600;font-size:15px;text-decoration:none}
.s-nav a:not(.btn):hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.s-hide-sm{display:none}}

/* hero */
.s-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding-top:28px}
.s-hero-txt{display:flex;flex-direction:column;gap:18px}
.s-lede{font-size:19px;color:var(--muted)}
.btn.big.s-cta{width:auto;padding-inline:26px}
@media (max-width:820px){.s-hero{grid-template-columns:minmax(0,1fr);padding-top:8px}}

/* a phone showing a guest's invite, built from the app's own pieces */
.s-phone{justify-self:center;width:min(340px,100%);border-radius:44px;padding:12px;background:var(--ink);box-shadow:var(--lift);rotate:2deg}
.s-screen{background:var(--bg);border-radius:34px;padding:18px 14px 20px;display:flex;flex-direction:column;gap:12px;font-size:15px;pointer-events:none}
.s-mini-top{display:flex;justify-content:space-between;align-items:center}
.s-mini-top .mark{font-size:22px}
.s-mini-h{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.035em;line-height:1}
.s-screen .ticket .t-title{font-size:21px}
.s-screen .ticket .stub{min-width:64px}
.s-mini-card{padding:12px 14px;font-weight:500}
.s-screen .rsvp button{min-height:70px;font-size:14px;padding:10px 4px}
.s-screen .rsvp button span{font-size:22px}
@media (prefers-reduced-motion:no-preference){.s-phone{animation:rise .5s ease-out both}}

/* sections */
.s-sec{display:flex;flex-direction:column;gap:20px}
.s-sub{font-size:18px;color:var(--muted)}
.s-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.s-steps li,.s-feats .card,.s-two .card{display:flex;flex-direction:column;gap:8px;padding:20px}
.s-num{width:38px;height:38px;border-radius:50%;background:var(--ticket);color:var(--ticket-ink);display:grid;place-items:center;font-family:var(--mono);font-weight:500;margin-bottom:4px}
.s-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.s-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}

.s-dark{background:var(--ink);color:var(--bg);border-radius:32px;padding:clamp(24px,5vw,48px)}
.s-dark .s-sub{color:var(--bg);opacity:.8}
.s-checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 36px}
@media (max-width:640px){.s-checks{grid-template-columns:minmax(0,1fr)}}
.s-checks li{padding-left:34px;position:relative;opacity:.92}
.s-checks li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--ticket)}
.s-checks b{display:block;font-family:var(--display);font-size:19px;letter-spacing:-.01em;opacity:1}

.s-faq{display:flex;flex-direction:column;gap:10px;max-width:760px}
.s-faq details{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:4px 18px}
.s-faq summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary::after{content:"+";font-family:var(--mono);font-size:20px;line-height:1;color:var(--accent)}
.s-faq details[open] summary::after{content:"\2212"}
.s-faq details p{padding:0 0 16px;color:var(--muted)}

.s-end{background:var(--ticket);color:var(--ticket-ink);border-radius:32px;padding:clamp(32px,6vw,64px) 24px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.s-end h2{color:var(--ticket-ink)}
.s-seats{display:flex;gap:14px}
.s-seats i{width:56px;height:56px;border-radius:50%;background:var(--ticket-ink)}
.s-seats i.open{width:48px;height:48px;margin-top:4px;background:none;border:6px dashed var(--ticket-ink)}
.btn.s-cta-ink{background:var(--ticket-ink);color:var(--ticket);box-shadow:none}

.s-foot{max-width:1040px;margin:0 auto;padding:24px 16px calc(28px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:14px}
.s-foot a{color:var(--muted)}