:root {
  --coastline-ocean: #0b2530;
  --coastline-salt: #f7f4ee;
  --coastline-sand: #ded1c0;
  --coastline-seafoam: #8fbdaa;
  --coastline-coral: #e5745f;
  --coastline-ink: #151918;
  --coastline-font: "Instrument Sans", Arial, Helvetica, sans-serif;
}

html.lang-pending body { visibility: hidden; }

.demo-banner { display:flex; min-height:48px; padding:7px clamp(12px,3vw,36px); align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 18px; background:var(--coastline-ocean); color:var(--coastline-salt); font:600 10px/1.2 var(--coastline-font); letter-spacing:.12em; text-align:center; }
.demo-banner--coastline { position:relative; z-index:20; justify-content:flex-start; border-bottom:1px solid rgba(255,255,255,.16); }
.demo-banner--coastline { min-height:48px; }
.demo-banner__brand { display:inline-flex; min-height:40px; align-items:center; gap:9px; margin-right:auto; color:inherit; text-decoration:none; }
.demo-banner__brand img { width:30px; height:30px; object-fit:contain; }
.demo-banner__brand span { font-size:10px; white-space:nowrap; }
.demo-banner__guide { min-height:36px; padding:0 13px; border:0; border-radius:999px; background:var(--coastline-seafoam); color:var(--coastline-ink); cursor:pointer; font:700 11px/1 var(--coastline-font); }

.demo-guide-dialog { width:min(620px,calc(100% - 28px)); padding:clamp(26px,5vw,48px); border:0; border-radius:26px; background:var(--coastline-salt); color:var(--coastline-ink); box-shadow:0 30px 100px rgba(0,0,0,.36); }
.demo-guide-dialog::backdrop { background:rgba(4,20,26,.72); backdrop-filter:blur(7px); }
.demo-guide-dialog__close { position:absolute; top:16px; right:16px; width:44px; height:44px; border:1px solid rgba(21,25,24,.24); border-radius:50%; background:transparent; cursor:pointer; font-size:24px; }
.demo-guide-dialog__eyebrow { margin:0 0 28px; font:700 10px/1 var(--coastline-font); letter-spacing:.14em; }
.demo-guide-dialog h2 { max-width:480px; margin:0; font:500 clamp(38px,7vw,64px)/.94 var(--coastline-font); letter-spacing:-.05em; }
.demo-guide-dialog__intro { max-width:520px; margin:22px 0 30px; color:#4b514e; line-height:1.55; }
.demo-guide-dialog ol { display:grid; gap:0; margin:0; padding:0; border-top:1px solid rgba(21,25,24,.22); list-style:none; }
.demo-guide-dialog li { display:grid; grid-template-columns:40px 1fr; gap:14px; padding:18px 0; border-bottom:1px solid rgba(21,25,24,.22); align-items:start; }
.demo-guide-dialog li span { font:700 10px/1.4 var(--coastline-font); letter-spacing:.08em; }
.demo-guide-dialog li strong { font:600 16px/1.4 var(--coastline-font); }
.demo-guide-dialog__boundary { margin:26px 0 0; padding:14px; border-radius:12px; background:var(--coastline-ocean); color:var(--coastline-salt); font:600 10px/1.45 var(--coastline-font); letter-spacing:.07em; text-transform:uppercase; }
.dish-card__action { min-height:44px; margin-top:14px; padding:0; border:0; border-bottom:1px solid currentColor; background:transparent; color:inherit; cursor:pointer; font:700 10px/1 var(--coastline-font); letter-spacing:.08em; text-transform:uppercase; }
.dish-dialog { width:min(900px,calc(100% - 28px)); padding:0; border:0; border-radius:24px; background:var(--coastline-salt); color:var(--coastline-ink); overflow:hidden; box-shadow:0 30px 100px rgba(0,0,0,.4); }
.dish-dialog::backdrop { background:rgba(4,20,26,.76); backdrop-filter:blur(7px); }
.dish-dialog { grid-template-columns:minmax(260px,1fr) minmax(280px,.8fr); }
.dish-dialog[open] { display:grid; }
.dish-dialog > img { width:100%; height:100%; min-height:520px; object-fit:cover; }
.dish-dialog > div { align-self:center; padding:clamp(28px,5vw,52px); }
.dish-dialog h2 { margin:0 0 14px; color:var(--coastline-ink); font:500 clamp(42px,6vw,70px)/.95 Georgia,serif; }
.dish-dialog__copy { color:#4b514e; font-size:18px; }
.dish-dialog__note { margin-top:30px; padding-top:20px; border-top:1px solid rgba(21,25,24,.22); color:#555b58; font-size:13px; line-height:1.55; }
.dish-dialog__close { position:absolute; z-index:2; top:14px; right:14px; width:44px; height:44px; border:0; border-radius:50%; background:var(--coastline-ocean); color:var(--coastline-salt); cursor:pointer; font-size:24px; }
.selected-stay,.booking-summary { margin:4px 0 10px; padding:12px 14px; border:1px solid currentColor; border-radius:12px; font:700 12px/1.4 var(--coastline-font); }
.plan.is-selected { outline:4px solid var(--coastline-seafoam); outline-offset:4px; }
.workspace-tasks { display:grid; gap:8px; margin:22px 0; padding:18px 0; border-block:1px solid rgba(21,25,24,.2); list-style:none; }
.workspace-tasks label { display:flex; min-height:36px; align-items:center; gap:12px; cursor:pointer; font-size:13px; }
.workspace-tasks input { width:18px; height:18px; accent-color:var(--coastline-coral); }

.demo-coastline-symbol { width:43px; height:43px; flex:0 0 auto; object-fit:contain; border-radius:0; background:transparent; }
.wordmark .demo-coastline-symbol { grid-row:1 / span 3; margin-right:8px; }

.coastline-demo-signature { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(220px,1.2fr); gap:28px 48px; align-items:center; padding:40px clamp(20px,5vw,72px); background:var(--coastline-ocean); color:var(--coastline-salt); border-top:1px solid rgba(255,255,255,.18); }
.coastline-demo-brand { display:flex; align-items:center; gap:18px; color:inherit; text-decoration:none; }
.coastline-demo-brand img { width:200px; height:auto; }
.coastline-demo-brand span { max-width:110px; font:600 11px/1.35 var(--coastline-font); letter-spacing:.12em; }
.coastline-demo-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.coastline-demo-cta { display:inline-flex; min-height:50px; align-items:center; justify-content:center; padding:0 20px; border:1px solid rgba(255,255,255,.5); border-radius:999px; color:inherit; text-decoration:none; font:600 13px/1 var(--coastline-font); transition:transform .2s,background .2s,color .2s; }
.coastline-demo-cta--primary { background:var(--coastline-coral); border-color:var(--coastline-coral); color:var(--coastline-ink); }
.coastline-demo-cta:hover { transform:translateY(-2px); background:var(--coastline-salt); color:var(--coastline-ink); }
.coastline-demo-legal { display:flex; grid-column:1 / -1; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.18); color:rgba(247,244,238,.74); font:500 11px/1.45 var(--coastline-font); }
.coastline-demo-legal a { color:inherit; text-decoration:underline; text-underline-offset:3px; }

footer img[alt*="Coastline"] {
  width: 150px;
  height: auto;
}

:focus-visible {
  outline: 3px solid var(--coastline-coral);
  outline-offset: 3px;
}

@media (max-width: 620px) {
  .demo-banner { gap:7px 10px; padding:8px 10px; }
  .demo-banner--coastline > span:not(.demo-banner__stage) { display:none; }
  .demo-banner__brand { margin-right:0; }
  .demo-banner__brand span { display:none; }
  .demo-banner__guide { margin-left:auto; }
  .demo-banner__guide { padding-inline:11px; }
  .dish-dialog[open] { display:block; }
  .dish-dialog > img { height:280px; min-height:0; }
  .coastline-demo-signature { grid-template-columns:1fr; padding:30px 20px; }
  .coastline-demo-actions { justify-content:stretch; }
  .coastline-demo-cta { width:100%; }
  .coastline-demo-legal { display:block; }
  .coastline-demo-legal a { display:inline-block; margin-top:8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Shared demo finish: return and guided controls remain equally clear. */
.demo-banner--coastline { background:linear-gradient(110deg,#0b2530,#123c45 60%,#1a5157); }
.demo-banner__brand:focus-visible,.demo-banner__guide:focus-visible { outline:3px solid var(--coastline-salt); outline-offset:3px; }
.demo-guide-dialog { border:1px solid rgba(21,25,24,.16); }
@media (max-width:620px) { .demo-banner--coastline { min-height:52px; } .demo-banner__guide { min-height:40px; } .demo-guide-dialog { border-radius:20px; } }