/* Local, fictional interactive prototypes. Keep flows client-side; no form submits to a server. */
.demo-bar { background:#0E1A2B; color:#F3F5F8; padding:12px 0; font-size:.84rem; }
.demo-bar .wrap { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.demo-tag { display:inline-flex; align-items:center; gap:8px; color:#FFB27E; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; }
.demo-tag::before { content:""; width:7px; height:7px; border-radius:50%; background:#F0661A; }
.demo-brand { font-family:var(--display); font-weight:800; font-size:1.3rem; letter-spacing:-.03em; text-decoration:none; }
.demo-nav { display:flex; gap:16px; flex-wrap:wrap; font-size:.92rem; }
.demo-nav a { text-decoration:none; text-underline-offset:4px; }
.demo-nav a:hover { text-decoration:underline; }
.demo-container { max-width:1120px; margin:auto; padding:0 22px; }
.demo-hero { padding:70px 0; background:linear-gradient(130deg,#f4ede6,#e9f1ef); }
.demo-hero h1 { max-width:17ch; margin:12px 0 18px; font-size:clamp(2.6rem,7vw,5rem); }
.demo-hero p { max-width:58ch; color:#566275; }
.demo-kicker { color:#A9440A!important; font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; }
.demo-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.demo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:16px; }
.demo-card { display:grid; align-content:start; gap:12px; padding:24px; border:1px solid var(--line); border-radius:20px; background:var(--surface); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.demo-card:hover,.demo-card:focus-within { border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); box-shadow:0 18px 38px -30px rgba(14,26,43,.5); }
@media (hover:hover) { .demo-card:hover { transform:translateY(-2px); } }
.demo-card h2,.demo-card h3 { margin:0; }
.demo-card p { color:var(--muted); }
.demo-price { color:var(--accent-ink); font-weight:700; }
.demo-section { padding:58px 0; border-bottom:1px solid var(--line); }
.demo-section h2 { margin-bottom:22px; }
.demo-footer { padding:24px 0; color:var(--muted); font-size:.85rem; }
.demo-control { display:grid; gap:8px; margin:14px 0; }
.demo-control label,.demo-label { font-weight:600; font-size:.92rem; }
.demo-control input,.demo-control select,.demo-control textarea { color:var(--ink); background:var(--surface); border-color:var(--line); }
.demo-control input::placeholder,.demo-control textarea::placeholder { color:var(--muted); }
.demo-options { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.demo-options button { padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); cursor:pointer; font:600 .92rem var(--body); transition:background .16s ease,border-color .16s ease,transform .16s ease; }
@media (hover:hover) { .demo-options button:hover { transform:translateY(-1px); border-color:var(--accent); } }
.demo-options button[aria-pressed="true"] { border-color:var(--accent); background:var(--sea-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.demo-status { min-height:1.6em; color:var(--muted); }
.demo-notice { border-left:3px solid var(--accent); padding:12px 16px; background:var(--sea-soft); border-radius:0 12px 12px 0; }
.demo-summary { display:grid; gap:8px; padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.demo-summary:not([hidden]) { animation:demo-appear .2s ease-out both; }
.demo-summary[hidden] { display:none; }
@keyframes demo-appear { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.demo-summary strong { font-family:var(--display); font-size:1.3rem; }
.demo-hours { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; }
.demo-hours dt { color:var(--muted); }
.demo-hours dd { margin:0; font-weight:600; }
@media(max-width:640px) { .demo-hero { padding:48px 0; } .demo-section { padding:42px 0; } .demo-bar .wrap { align-items:flex-start; } }
@media(prefers-reduced-motion:reduce) { .demo-summary:not([hidden]) { animation:none; } .demo-card,.demo-options button { transition:none; } .demo-card:hover,.demo-options button:hover { transform:none; } }

@media (max-width: 520px) {
  .demo-container { padding-inline: 16px; }
  .demo-bar { padding-block: 10px; }
  .demo-nav { gap: 8px 12px; font-size: .86rem; }
  .demo-hero h1 { font-size: clamp(2.15rem, 10vw, 3.2rem); }
  .demo-card { padding: 18px; }
  .demo-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .demo-actions .btn { width: 100%; justify-content: center; }
  .demo-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-options button { min-height: 48px; padding-inline: 10px; }
  .demo-summary { padding: 16px; }
  .demo-hours { grid-template-columns: 1fr; gap: 2px; }
  .demo-hours dd { margin-bottom: 8px; }
}