/* The Book a demo page. Same world as the shop page: everything shared comes from ../shops.css. */
.demo { min-height: 100svh; display: grid; align-items: center; gap: 28px; width: min(1240px, 100%); margin-inline: auto; padding: 96px var(--gutter) 64px; }
@media (min-width: 980px) { .demo { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 56px; } }

/* The pitch */
.pitch { text-align: center; text-shadow: 0 1px 2px rgba(5, 6, 8, .9), 0 4px 18px rgba(5, 6, 8, .8), 0 12px 50px rgba(5, 6, 8, .85); }
.demo .head { font-size: clamp(3.3rem, 7.6vw, 7.2rem); max-width: 11ch; }
.rev-hint { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
@media (max-width: 979px) { .demo .head { font-size: clamp(3.1rem, 14vw, 5.4rem); } .demo { padding-top: 132px; } }

/* The card */
.card { position: relative; padding: clamp(20px, 3vw, 30px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, .14); background: #0c0d10; box-shadow: 0 40px 90px -40px #000, 0 0 70px -36px var(--hot); transition: box-shadow .6s var(--ease); }
.card:focus-within { box-shadow: 0 40px 90px -40px #000, 0 0 90px -24px var(--ember); }
.field { margin-bottom: 13px; min-width: 0; }
.field label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; color: var(--text-soft); }
.opt { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.field input, .field select { width: 100%; height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid #70767f; background: #07080a; color: var(--text); font-family: var(--body); font-size: 16px; -webkit-appearance: none; appearance: none; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.field input:hover, .field select:hover { border-color: #9ba1aa; }
.field input:focus, .field select:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px rgba(255, 138, 42, .28); }
.field input.filled { border-color: #9ba1aa; }
.field .invalid, .field .invalid:focus { border-color: #ff9b8a; box-shadow: 0 0 0 3px rgba(255, 110, 90, .22); }
.field select { padding-right: 40px; cursor: pointer; }
.field option { background: #0c0d10; color: var(--text); }
.select { position: relative; }
.select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--text-soft); border-bottom: 1.5px solid var(--text-soft); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.row { display: grid; gap: 0; }
@media (min-width: 480px) { .row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .row > .field:only-of-type { grid-column: 1 / -1; } }
.err { margin: 6px 0 0; font-size: .84rem; color: #ffb4a6; }
.hint { margin: 6px 0 0; font-size: .84rem; color: var(--text-soft); }
.hint button { padding: 0; border: 0; background: none; color: var(--ember); text-decoration: underline; text-underline-offset: 3px; font: inherit; cursor: pointer; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.consent { display: flex; align-items: flex-start; gap: 12px; margin: 6px 0 18px; font-size: .92rem; color: var(--text-soft); cursor: pointer; }
.consent input { flex: none; display: grid; place-content: center; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 6px; border: 1.5px solid #70767f; background: #07080a; -webkit-appearance: none; appearance: none; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.consent input::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--btn-text); border-bottom: 2px solid var(--btn-text); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .25s var(--ease); }
.consent input:checked { background: var(--hot); border-color: var(--hot); }
.consent input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.consent:hover input { border-color: var(--ember); }

.mag-block { display: block; }
.btn-full { width: 100%; border: 0; cursor: pointer; }
.btn-full[disabled] { cursor: progress; }
.btn-full.loading > span { opacity: .5; }
.msg { margin: 12px 0 0; font-size: .92rem; color: var(--text-soft); }
.msg:empty { display: none; }
.msg.is-error { color: #ffb4a6; }
.msg.is-note { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 138, 42, .45); background: rgba(255, 138, 42, .08); color: var(--text); }
.msg.ok { color: var(--text); }
.small { margin: 12px 0 0; font-size: .78rem; color: var(--text-dim); text-align: center; }
.small a, .linkish { color: var(--text-soft); }
.linkish { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Thank-you */
.thanks { text-align: center; }
.thanks-head { margin: 10px 0 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.8rem, 8vw, 4.4rem); line-height: .94; }
.thanks-head:focus { outline: none; }
.spot-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 0 14px; padding: 12px 18px; border-radius: 14px; border: 1px solid rgba(255, 138, 42, .4); background: #07080a; }
.spot-label { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); text-align: left; }
.spot-num { font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 10vw, 4.4rem); line-height: 1; color: var(--ember); font-variant-numeric: tabular-nums; }
.thanks-copy { margin: 0; font-size: .95rem; color: var(--text-soft); }
.ref { margin-top: 14px; }
.ref input { width: 100%; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid #70767f; background: #07080a; color: var(--text); font-family: var(--mono); font-size: .8rem; text-align: center; }
.ref input:focus { outline: none; border-color: var(--ember); }
.share { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.share-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: transparent; color: var(--text); font-family: var(--mono); font-size: .78rem; text-decoration: none; cursor: pointer; transition: border-color .25s var(--ease), background-color .25s var(--ease); }
.share-btn:hover { border-color: var(--ember); background: rgba(255, 138, 42, .1); }
@media (min-width: 480px) { .share { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Footer */
.demo-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 18px; padding: 4px 14px; font-family: var(--mono); font-size: .68rem; color: var(--text-dim); text-shadow: 0 1px 3px #000; }
.demo-foot span { width: 100%; text-align: center; }
.demo-foot a { display: inline-flex; align-items: center; min-height: 28px; color: var(--text-soft); }
@media (pointer: coarse) { .demo-foot a { min-height: 44px; } }
.ns-note { position: relative; z-index: 20; text-align: center; }

@media (prefers-reduced-motion: reduce) { .card, .field input, .field select, .consent input, .consent input::after, .share-btn { transition: none; } }

.audit .pitch, .audit .pitch * { color: transparent !important; text-shadow: none !important; } /* used by tests/demo_test.mjs */

/* Phones scroll this page, so corner readouts would float over the form. */
@media (max-width: 979px) { .demo-page .hud { display: none; } }

/* "I'm interested in": tap as many as you like, with All of it across the bottom */
.picks { min-width: 0; margin: 0 0 13px; padding: 0; border: 0; }
.picks legend { display: flex; justify-content: space-between; align-items: baseline; width: 100%; margin-bottom: 6px; padding: 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; color: var(--text-soft); }
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.pick { position: relative; display: grid; cursor: pointer; }
.pick-all { grid-column: 1 / -1; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 10px; border-radius: 12px; border: 1px solid #70767f; background: #07080a; color: var(--text); font-size: .9rem; line-height: 1.2; text-align: center; transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease); }
.pick:hover span { border-color: #9ba1aa; }
.pick input:focus-visible + span { border-color: var(--ember); box-shadow: 0 0 0 3px rgba(255, 138, 42, .28); }
.pick input:checked + span { border-color: var(--ember); background: rgba(255, 138, 42, .18); }
.picks.invalid .pick span { border-color: #ff9b8a; }
@media (prefers-reduced-motion: reduce) { .pick span { transition: none; } }

/* Side by side, the pitch stays in one spot and only the form scrolls. It spans the footer's row too,
   so it never shifts at the very bottom. Windows too short to fit the pitch scroll normally.
   Keep this last: it has to override the footer and panel rules above. */
@media (min-width: 980px) and (min-height: 560px) {
  .pitch { position: sticky; top: 96px; grid-column: 1; grid-row: 1 / span 2; align-self: start; display: grid; align-content: center; justify-items: center; min-height: calc(100svh - 160px); }
  /* The ring keeps passing behind words that no longer move, so the dark pool reaches the corners of the text. */
  .pitch .inner::before { inset: -45% -12%; background: radial-gradient(closest-side, rgba(8, 9, 11, .93) 0%, rgba(8, 9, 11, .9) 85%, rgba(8, 9, 11, 0) 100%); }
  .panel { grid-column: 2; grid-row: 1; }
  .demo-foot { grid-column: 2; grid-row: 2; }
}