/* Homepage showcase sections: one plain headline, one sentence, one large app visual.
   App visuals are rendered captures of the real app (planning_docs/design/rounds/2026-09-26-landing-app-showcase);
   each has a desktop and a phone version, swapped by <picture>. */
.sc{padding-block:104px}
.sc h2{font-size:clamp(34px,3.6vw,52px);letter-spacing:-.03em;line-height:1.08}
.sc-lead{margin-top:18px;font-size:19px;line-height:1.55;color:var(--muted);max-width:470px}
.sc .text-link{margin-top:24px}
.sc picture,.sc picture img{display:block;width:100%;height:auto}

/* Text beside the visual. */
.sc-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center}
.sc-split.sc-flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.sc-split.sc-flip .sc-copy{order:2}
.sc-visual-narrow{max-width:560px;justify-self:center;width:100%}

/* Headline above the visual. */
.sc-center{text-align:center}
.sc-center .sc-lead{margin-inline:auto;max-width:640px}
.sc-wide{margin-top:44px}

/* Dark "plans change" section. */
.sc-dark{background:#262721;color:#f4efe6}
.sc-dark .sc-lead{color:#b9b2a5}
.sc-dark .text-link{border-color:#6f6a60;color:#f4efe6}

/* Card rows (floor plan and guest app). */
.sc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.sc-card{background:var(--white);border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px #29262212,0 20px 40px -28px #29262259}
.sc-card-visual{height:230px;overflow:hidden;background:#efe9e0}
.sc-card-visual img{width:100%;height:100%;object-fit:cover}
.sc-card-phone{display:flex;justify-content:center;padding-top:22px}
.sc-card-phone img{width:200px;height:auto;object-fit:initial;align-self:flex-start;border:6px solid #2b2522;border-bottom:0;border-radius:22px 22px 0 0}
.sc-card-body{padding:18px 22px 22px}
.sc-card h3{font-size:22px;letter-spacing:-.02em}
.sc-card p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--muted)}

/* Floor plan: seating reasons are shown as text on phones (the desktop image carries them as pins). */
.sc-reasons{display:none;list-style:none;padding:0;margin:28px 0 0;text-align:left}
.sc-reasons li{display:grid;grid-template-columns:24px 1fr;gap:12px;margin-top:14px}
.sc-reasons .n{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600}
.sc-reasons b{display:block;font:500 17px/1.3 var(--serif)}
.sc-reasons span:not(.n){font-size:15px;color:var(--muted)}

/* Website: three designs, phone or desktop view. */
.sc-caption{margin-top:40px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.sc-switch{display:inline-flex;margin-top:16px;padding:4px;border-radius:999px;background:#efe7dc}
.sc-switch button{border:0;background:none;padding:9px 22px;border-radius:999px;font:600 14px var(--sans);color:var(--muted);min-height:40px}
.sc-switch button[aria-checked=true]{background:var(--white);color:var(--ink);box-shadow:0 2px 6px #2926221f}
.sc-designs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:28px;text-align:left}
.sc-design{display:flex;flex-direction:column;align-items:center}
.sc-request{width:100%;min-height:88px;padding:16px 20px;border-radius:20px;background:#2a2320;color:#fff;font-size:16px;line-height:1.45;display:flex;align-items:center}
.sc-phone{margin-top:18px;width:min(280px,100%);border-radius:36px;overflow:hidden;border:8px solid #2b2522;box-shadow:0 30px 50px -26px #29262280}
.sc-phone img{display:block;width:100%;aspect-ratio:780/1688;object-fit:cover}
.sc-browser{display:none;margin-top:18px;width:100%;border-radius:14px;overflow:hidden;background:var(--white);box-shadow:0 26px 46px -24px #29262280,0 0 0 1px #2926221a}
.sc-browser-bar{height:24px;background:#ece6dd;display:flex;align-items:center;gap:6px;padding:0 12px}
.sc-browser-bar i{width:9px;height:9px;border-radius:50%;background:#cfc6ba}
.sc-browser img{display:block;width:100%;aspect-ratio:1440/900;object-fit:cover;object-position:top}
.sc-website[data-view=desktop] .sc-phone{display:none}
.sc-website[data-view=desktop] .sc-browser{display:block}
.sc-design h3{margin-top:22px;font-size:24px;letter-spacing:-.02em}
.sc-design .text-link{margin-top:8px}

.sc-guests .guest-feedback{margin-top:72px}

@media (max-width:900px){
  .sc{padding-block:72px}
  .sc-split,.sc-split.sc-flip{grid-template-columns:1fr;gap:32px}
  .sc-split .sc-copy,.sc-split.sc-flip .sc-copy{order:0;text-align:center}
  .sc-split .sc-lead{margin-inline:auto}
  .sc-designs{grid-template-columns:repeat(3,minmax(250px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:12px;margin-inline:-40px;padding-inline:40px}
  .sc-design{scroll-snap-align:center}
  .sc-cards{grid-template-columns:repeat(3,minmax(270px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:12px;margin-inline:-40px;padding-inline:40px}
  .sc-card{scroll-snap-align:center}
}
@media (max-width:700px){
  .sc h2{font-size:32px}
  .sc-lead{font-size:16px}
  .sc-reasons{display:block}
  .sc-designs,.sc-cards{margin-inline:-24px;padding-inline:24px}
  .sc-card-visual{height:190px}
}

/* guest-feedback.css still styles #guests and #guest-management for the old sections; neutralise it here. */
#guests.sc{background:none;border:0;padding-top:104px}
#guest-management.sc{padding-bottom:104px}
@media (max-width:900px){#guests.sc{padding-top:72px}#guest-management.sc{padding-bottom:72px}}

/* Guest app leads the page: a pulled guest quote under the sentence. */
.sc-guests .eyebrow{margin-bottom:14px}
.sc-proof{margin:26px 0 0;padding-left:18px;border-left:2px solid var(--accent);max-width:440px}
.sc-proof blockquote{margin:0;font:400 22px/1.35 var(--serif);letter-spacing:-.01em}
.sc-proof figcaption{margin-top:8px;font-size:14px;color:var(--muted)}
@media (max-width:900px){.sc-proof{margin-inline:auto;text-align:left}}