/* /demo — the public demo-request landing page shared from social media.
   See "Demo landing page" in CLAUDE.md. Ported from
   docs/design/afterset-demo-landing-v3/src/globals.css — Tailwind import
   removed (this app has no build step; see "Generated, not hand-authored"
   in CLAUDE.md), the package's own hero image path and logo <img> markup
   replaced with this app's real assets/conventions (a text brand mark,
   same "A"+AFTERSET treatment every other page on this site already
   uses — the package referenced /brand/afterset-logo-reverse.svg, which
   doesn't exist anywhere in this codebase; a text mark is the honest
   substitution, not an invented asset). Everything else — the layout,
   spacing, type scale, copy structure — is unchanged from the package. */

:root {
  --demo-ink: #0d0d0f;
  --demo-cream: #f1eadf;
  --demo-paper: #fbf7f0;
  --demo-red: #b72a3f;
  --demo-red-deep: #7d1627;
  --demo-muted: #736b64;
  --demo-line: #d8ccbd;
}

.demo-page * { box-sizing: border-box; }
/* The same [hidden]-outranked-by-a-classed-display-rule bug this
   codebase has already found and fixed twice elsewhere (see "Any
   re-render of a container..." in CLAUDE.md, and the admin portal's own
   [hidden] fix) — .demo-form's own `display: grid` below would otherwise
   silently outrank the `hidden` attribute's UA-stylesheet `display: none`
   the moment JS sets `form.hidden = true` on a real success. Found by
   this page's own Playwright verification, not assumed safe. */
.demo-page [hidden] { display: none !important; }
.demo-page { color: var(--demo-ink); background: var(--demo-paper); font-family: Arial, Helvetica, sans-serif; }
.demo-page a { color: inherit; text-decoration: none; }
.demo-page button, .demo-page input, .demo-page select, .demo-page textarea { font: inherit; }
.demo-page .shell { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.demo-page .eyebrow { margin: 0 0 16px; color: var(--demo-red); font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; }
.demo-page .eyebrow.light { color: #e66c7d; }

.demo-page .demo-brand { display: inline-flex; align-items: center; gap: 10px; font: 700 15px/1 Arial, sans-serif; letter-spacing: .14em; color: #fff; }
.demo-page .demo-brand .mark { width: 28px; height: 28px; border: 1px solid currentColor; display: grid; place-items: center; font-family: Georgia, serif; font-size: 1.05rem; }
.demo-page .legal-header .demo-brand { color: var(--demo-ink); }

.demo-page .hero { position: relative; min-height: 920px; color: white; overflow: hidden; background: #100d0e; }
.demo-page .hero-image { position: absolute; inset: 0; background: url('/img/demo-nightclub-hero.webp') center/cover no-repeat; transform: scale(1.02); }
.demo-page .hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,7,8,.96) 0%, rgba(8,7,8,.84) 43%, rgba(8,7,8,.48) 70%, rgba(8,7,8,.72) 100%), linear-gradient(0deg, #100d0e 0%, transparent 34%); }
.demo-page .site-header { position: relative; z-index: 2; height: 108px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.16); }
.demo-page .header-cta { display: inline-flex; gap: 10px; align-items: center; font: 700 12px/1 ui-monospace, monospace; letter-spacing: .14em; border-bottom: 1px solid rgba(255,255,255,.55); padding: 12px 0; color: #fff; }
.demo-page .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(420px,.72fr); gap: clamp(48px, 7vw, 100px); align-items: start; padding-top: 92px; padding-bottom: 92px; }
.demo-page .hero-copy { padding-top: 76px; max-width: 710px; }
.demo-page .hero-copy h1 { margin: 0; font: 400 clamp(62px, 7vw, 104px)/.89 Georgia, 'Times New Roman', serif; letter-spacing: -.065em; }
.demo-page .hero-sub { max-width: 640px; margin: 36px 0 30px; color: rgba(255,255,255,.75); font-size: 20px; line-height: 1.55; }
.demo-page .hero-proof { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.78); font: 700 11px/1 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.demo-page .hero-proof span { display: flex; align-items: center; gap: 8px; }

.demo-page .form-card { scroll-margin-top: 24px; background: rgba(251,247,240,.97); color: var(--demo-ink); border-top: 5px solid var(--demo-red); box-shadow: 0 30px 80px rgba(0,0,0,.34); padding: 34px; backdrop-filter: blur(14px); }
.demo-page .form-intro { border-bottom: 1px solid var(--demo-line); margin-bottom: 24px; padding-bottom: 22px; }
.demo-page .form-intro h2 { margin: 0; font: 400 34px/1.05 Georgia, serif; letter-spacing: -.035em; }
.demo-page .form-intro > p:last-child { color: var(--demo-muted); margin: 12px 0 0; line-height: 1.5; }
.demo-page .demo-form { display: grid; gap: 15px; }
.demo-page .demo-form label, .demo-page .demo-form legend { display: grid; gap: 7px; color: #564e47; font: 700 10px/1.1 ui-monospace, monospace; letter-spacing: .12em; }
.demo-page .demo-form em { color: #9a9187; font-style: normal; font-weight: 500; float: right; }
.demo-page .demo-form small { color: #82786f; font: 400 11px/1.35 Arial, Helvetica, sans-serif; letter-spacing: 0; }
.demo-page .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.demo-page .demo-form input, .demo-page .demo-form select, .demo-page .demo-form textarea { width: 100%; color: var(--demo-ink); background: #fffefa; border: 1px solid #cfc3b5; border-radius: 0; padding: 12px 13px; outline: 0; font-size: 15px; line-height: 1.25; transition: border-color .15s, box-shadow .15s; }
.demo-page .demo-form textarea { resize: vertical; min-height: 78px; }
.demo-page .demo-form input:focus, .demo-page .demo-form select:focus, .demo-page .demo-form textarea:focus { border-color: var(--demo-red); box-shadow: 0 0 0 3px rgba(183,42,63,.12); }
.demo-page .demo-form fieldset { border: 0; padding: 2px 0 0; margin: 0; }
.demo-page .interest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.demo-page .interest-grid label { display: block; position: relative; }
.demo-page .interest-grid input { position: absolute; opacity: 0; pointer-events: none; }
.demo-page .interest-grid span { display: block; padding: 10px 8px; text-align: center; border: 1px solid #d7cbbc; color: #5a5149; background: transparent; cursor: pointer; font: 600 11px/1.15 Arial, sans-serif; letter-spacing: 0; }
.demo-page .interest-grid input:checked + span { color: var(--demo-red-deep); border-color: var(--demo-red); background: #f4dfe1; }
.demo-page .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.demo-page .submit-button { display: flex; justify-content: space-between; align-items: center; border: 0; background: var(--demo-red); color: white; padding: 17px 18px; cursor: pointer; font: 700 12px/1 ui-monospace, monospace; letter-spacing: .13em; transition: background .18s, transform .18s; width: 100%; }
.demo-page .submit-button:hover { background: var(--demo-red-deep); transform: translateY(-1px); }
.demo-page .submit-button:disabled { opacity: .7; cursor: wait; }
.demo-page .privacy-note { margin: 0; color: #8a8178; font-size: 11px; line-height: 1.45; }
.demo-page .privacy-note a { color: var(--demo-red-deep); text-decoration: underline; text-underline-offset: 2px; }
.demo-page .form-error { margin: 0; color: var(--demo-red-deep); background: #f7e2e4; padding: 10px; font-size: 13px; display: none; }
.demo-page .spin { display: inline-block; animation: demo-spin 1s linear infinite; }
@keyframes demo-spin { to { transform: rotate(360deg); } }
.demo-page .success-state { min-height: 430px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.demo-page .success-state h3 { font: 400 42px/1 Georgia, serif; margin: 14px 0 14px; }
.demo-page .success-state > p:not(.eyebrow) { color: var(--demo-muted); line-height: 1.6; }
.demo-page .success-state button { border: 0; border-bottom: 1px solid var(--demo-ink); background: none; padding: 12px 0 7px; margin-top: 20px; font: 700 11px/1 ui-monospace, monospace; letter-spacing: .12em; cursor: pointer; }

.demo-page .proof-strip { background: var(--demo-cream); border-bottom: 1px solid var(--demo-line); }
.demo-page .proof-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.demo-page .proof-grid article { position: relative; padding: 42px 38px; border-left: 1px solid var(--demo-line); }
.demo-page .proof-grid article:last-child { border-right: 1px solid var(--demo-line); }
.demo-page .proof-grid article > span { position: absolute; right: 22px; top: 20px; color: #a89d90; font: 500 11px ui-monospace, monospace; }
.demo-page .proof-grid h3 { margin: 0 0 12px; font: 700 12px ui-monospace, monospace; letter-spacing: .12em; }
.demo-page .proof-grid p { margin: 0; max-width: 280px; color: var(--demo-muted); line-height: 1.5; }

.demo-page .conversation-section { display: grid; grid-template-columns: minmax(0,1fr) minmax(330px,.68fr); gap: clamp(64px,10vw,150px); align-items: center; padding-top: 130px; padding-bottom: 130px; }
.demo-page .section-copy h2, .demo-page .demo-agenda h2, .demo-page .faq-section h2 { margin: 0; font: 400 clamp(42px,5vw,68px)/.98 Georgia, serif; letter-spacing: -.045em; }
.demo-page .section-copy > p:not(.eyebrow) { max-width: 610px; margin: 28px 0; color: var(--demo-muted); font-size: 19px; line-height: 1.65; }
.demo-page .text-link { display: inline-flex; align-items: center; gap: 12px; padding: 13px 0 8px; color: var(--demo-red); border-bottom: 1px solid var(--demo-red); font: 700 11px/1 ui-monospace, monospace; letter-spacing: .12em; }
.demo-page .phone-demo { max-width: 430px; justify-self: center; border-radius: 28px; padding: 16px; background: #111113; box-shadow: 0 28px 70px rgba(40,24,25,.22); }
.demo-page .phone-top { display: flex; justify-content: space-between; align-items: center; padding: 13px 9px 18px; color: #b9afb0; font: 700 10px ui-monospace, monospace; letter-spacing: .12em; }
.demo-page .live-dot { color: #80d19d; }
.demo-page .messages { min-height: 430px; border-radius: 17px; background: #f4eee6; padding: 28px 20px; display: flex; flex-direction: column; gap: 14px; }
.demo-page .message { max-width: 83%; border-radius: 15px; padding: 13px 15px; line-height: 1.4; font-size: 14px; }
.demo-page .message.guest { align-self: flex-end; background: var(--demo-red); color: white; border-bottom-right-radius: 3px; }
.demo-page .message.host { align-self: flex-start; color: #2e2928; background: white; border: 1px solid #ded3c7; border-bottom-left-radius: 3px; }
.demo-page .typing { display: flex; gap: 4px; width: max-content; padding: 13px; background: white; border-radius: 13px; }
.demo-page .typing i { width: 5px; height: 5px; background: #8a8179; border-radius: 50%; }
.demo-page .composer { margin-top: 12px; padding: 15px 12px 5px; display: flex; justify-content: space-between; color: #999093; font-size: 13px; }

.demo-page .questions-section { background: #111012; color: white; padding: 120px 0; }
.demo-page .questions-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 100px; }
.demo-page .questions-grid h2 { max-width: 500px; margin: 0; font: 400 clamp(46px,5vw,74px)/.96 Georgia, serif; letter-spacing: -.045em; }
.demo-page .question-list { border-top: 1px solid rgba(255,255,255,.2); }
.demo-page .question-list > div { display: grid; grid-template-columns: 58px 1fr; align-items: center; border-bottom: 1px solid rgba(255,255,255,.2); padding: 27px 0; }
.demo-page .question-list span { color: #de5a6d; font: 600 11px ui-monospace, monospace; }
.demo-page .question-list p { margin: 0; font: 400 25px/1.25 Georgia, serif; }

.demo-page .demo-agenda { padding-top: 120px; padding-bottom: 120px; }
.demo-page .demo-agenda h2 { max-width: 700px; }
.demo-page .agenda-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--demo-line); border-left: 1px solid var(--demo-line); margin-top: 60px; }
.demo-page .agenda-grid article { min-height: 270px; padding: 32px 26px; border-right: 1px solid var(--demo-line); border-bottom: 1px solid var(--demo-line); }
.demo-page .agenda-grid svg { color: var(--demo-red); width: 25px; height: 25px; margin-bottom: 48px; }
.demo-page .agenda-grid h3 { margin: 0 0 14px; font: 400 25px/1.1 Georgia, serif; }
.demo-page .agenda-grid p { margin: 0; color: var(--demo-muted); line-height: 1.55; }

.demo-page .install-section { padding: 120px 0; color: white; background: var(--demo-red-deep); }
.demo-page .install-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 110px; }
.demo-page .install-grid h2 { max-width: 520px; margin: 0; font: 400 clamp(48px,5vw,72px)/.96 Georgia, serif; letter-spacing: -.045em; }
.demo-page .install-grid ol { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(255,255,255,.28); }
.demo-page .install-grid li { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 27px 0; border-bottom: 1px solid rgba(255,255,255,.28); }
.demo-page .install-grid li > span { color: #f09cab; font: 600 11px ui-monospace, monospace; }
.demo-page .install-grid h3 { margin: 0 0 7px; font-size: 19px; }
.demo-page .install-grid li p { margin: 0; color: rgba(255,255,255,.68); line-height: 1.55; }

.demo-page .faq-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 100px; padding-top: 120px; padding-bottom: 120px; }
.demo-page .faq-list { border-top: 1px solid var(--demo-line); }
.demo-page .faq-list details { border-bottom: 1px solid var(--demo-line); padding: 26px 0; }
.demo-page .faq-list summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; font-size: 19px; font-weight: 600; }
.demo-page .faq-list summary::-webkit-details-marker { display: none; }
.demo-page .faq-list summary span { color: var(--demo-red); font: 300 28px/1 Arial; }
.demo-page .faq-list details[open] summary span { transform: rotate(45deg); }
.demo-page .faq-list details p { max-width: 660px; margin: 17px 40px 0 0; color: var(--demo-muted); line-height: 1.6; }

.demo-page .final-cta { padding: 92px 0; color: white; background: #151315; border-top: 1px solid #2a2629; }
.demo-page .final-grid { display: flex; justify-content: space-between; align-items: flex-end; gap: 50px; }
.demo-page .final-grid h2 { max-width: 810px; margin: 0; font: 400 clamp(44px,5vw,70px)/.98 Georgia, serif; letter-spacing: -.045em; }
.demo-page .final-grid > a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 30px; padding: 20px 22px; background: var(--demo-red); font: 700 11px ui-monospace, monospace; letter-spacing: .12em; }
.demo-page .site-footer { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; min-height: 110px; color: #a69da0; background: #151315; font-size: 12px; }
.demo-page .site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; border-top: 1px solid #2a2629; }
.demo-page .site-footer p { margin: 0; }
.demo-page .site-footer p:last-child { text-align: right; }

@media (max-width: 900px) {
  .demo-page .shell { width: min(100% - 32px, 720px); }
  .demo-page .hero { min-height: auto; }
  .demo-page .site-header { height: 88px; }
  .demo-page .hero-grid { grid-template-columns: 1fr; padding-top: 54px; gap: 56px; }
  .demo-page .hero-copy { padding-top: 20px; }
  .demo-page .hero-copy h1 { font-size: clamp(58px,12vw,84px); }
  .demo-page .form-card { width: min(100%, 600px); }
  .demo-page .proof-grid { grid-template-columns: 1fr; }
  .demo-page .proof-grid article { border-right: 1px solid var(--demo-line); border-bottom: 1px solid var(--demo-line); }
  .demo-page .conversation-section, .demo-page .questions-grid, .demo-page .install-grid, .demo-page .faq-section { grid-template-columns: 1fr; gap: 64px; }
  .demo-page .phone-demo { justify-self: start; width: min(100%, 430px); }
  .demo-page .agenda-grid { grid-template-columns: 1fr 1fr; }
  .demo-page .final-grid { align-items: flex-start; flex-direction: column; }
  .demo-page .site-footer { grid-template-columns: 1fr; padding-top: 32px; padding-bottom: 32px; text-align: center; }
  .demo-page .site-footer p:last-child { text-align: center; }
}

@media (max-width: 540px) {
  .demo-page .shell { width: calc(100% - 24px); }
  .demo-page .site-header { height: 74px; }
  .demo-page .header-cta { font-size: 10px; }
  .demo-page .hero-grid { padding-top: 38px; padding-bottom: 50px; }
  .demo-page .hero-copy { padding-top: 6px; }
  .demo-page .hero-copy h1 { font-size: 54px; }
  .demo-page .hero-sub { font-size: 17px; margin-top: 25px; }
  .demo-page .hero-proof { gap: 14px; }
  .demo-page .form-card { padding: 26px 20px; }
  .demo-page .form-intro h2 { font-size: 30px; }
  .demo-page .field-row, .demo-page .interest-grid { grid-template-columns: 1fr; }
  .demo-page .conversation-section, .demo-page .questions-section, .demo-page .demo-agenda, .demo-page .install-section, .demo-page .faq-section { padding-top: 80px; padding-bottom: 80px; }
  .demo-page .conversation-section { gap: 52px; }
  .demo-page .phone-demo { border-radius: 22px; padding: 11px; }
  .demo-page .messages { min-height: 390px; }
  .demo-page .questions-grid { gap: 46px; }
  .demo-page .question-list p { font-size: 21px; }
  .demo-page .agenda-grid { grid-template-columns: 1fr; }
  .demo-page .agenda-grid article { min-height: 230px; }
  .demo-page .final-grid h2 { font-size: 44px; }
  .demo-page .final-grid > a { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-page { scroll-behavior: auto; }
  .demo-page * { animation: none !important; transition: none !important; }
}