/* Scroll entrances. reveal.js adds .reveal only below the first screen and only when
   motion is on; the motion tokens are in consistency.css. */
.reveal { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-l) var(--ease-out) var(--reveal-delay, 0ms), transform var(--dur-l) var(--ease-out) var(--reveal-delay, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* Without scripts the video's own controls take over, so its custom play button goes. */
html:not(.js) .intro-play { display: none; }

/* Transcript under the intro video. */
.intro-transcript { margin-top: .9rem; color: var(--c-ink-2); font-size: var(--fs-sm); }
.intro-transcript summary { width: fit-content; cursor: pointer; font-weight: 500; color: #717479; }
.intro-transcript p { max-width: 46rem; margin: .75rem 0 0; line-height: 1.7; }

/* Cookie consent. */
.consent { position: fixed; right: 1rem; bottom: 1rem; left: 1rem; z-index: 60; display: flex; align-items: center; gap: 1.25rem; max-width: 45rem; margin-inline: auto; padding: 1rem 1.25rem; border: 1px solid var(--c-line); border-radius: 1.25rem; background: var(--c-surface); box-shadow: var(--hero-card-shadow); color: var(--c-ink-2); font-size: .875rem; line-height: 1.5; }
.consent p { margin: 0; }
.consent a { color: var(--c-accent); }
.consent__actions { display: flex; flex: none; gap: .5rem; }

/* Contact page. */
.demo { padding-block: clamp(3rem, 6vw, 6rem) var(--space-section); }
.demo__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.demo h1 { margin: 0 0 1.25rem; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); line-height: 1.08; letter-spacing: -.035em; }
.demo__lede { max-width: 32rem; margin: 0 0 2.25rem; color: var(--c-ink-2); font-size: 1.0625rem; line-height: 1.6; }
.demo__steps { display: grid; gap: .75rem; max-width: 32rem; margin: 0 0 2.25rem; padding: 0; list-style: none; }
.demo__steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .85rem; align-items: start; padding: 1rem 1.25rem; border: 1px solid #ebe7e3; border-radius: 1.25rem; background: #f4f2ef; color: var(--c-ink); font-size: .9375rem; line-height: 1.5; }
.demo__steps b { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--c-accent); color: #fff; font-size: .8125rem; font-weight: 600; }
.demo__direct { margin: 0; color: var(--c-ink-2); font-size: .9375rem; line-height: 1.7; }
.demo__direct a { color: var(--c-ink); font-weight: 500; }
.demo-form { display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--c-line); border-radius: 1.25rem; background-color: var(--c-surface); background-image: radial-gradient(var(--c-hero-dot) .65px, transparent .8px); background-size: 5px 5px; box-shadow: var(--hero-card-shadow); }
.demo-form label { display: grid; gap: .4rem; color: var(--c-ink); font-size: .875rem; font-weight: 500; }
.demo-form label span { color: var(--c-ink-3); font-weight: 400; }
.demo-form input, .demo-form textarea { width: 100%; padding: .7rem .85rem; border: 1px solid #c9c9c5; border-radius: .75rem; background: #fff; color: var(--c-ink); font: inherit; font-size: .9375rem; font-weight: 400; }
.demo-form textarea { min-height: 7.5rem; resize: vertical; }
.demo-form input:focus-visible, .demo-form textarea:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: var(--c-accent); }
.demo-form__trap { position: absolute; left: -9999px; }
.demo-form .btn { justify-self: start; }
.demo-form__status { min-height: 1.4em; margin: 0; color: var(--c-ink-2); font-size: .875rem; }
.demo-form__status[data-kind="done"] { color: #0a6a48; font-weight: 500; }
.demo-form__status[data-kind="error"] { color: #a32a1d; font-weight: 500; }
.demo-form__privacy { margin: 0; color: var(--c-ink-3); font-size: .8125rem; line-height: 1.5; }
.demo-form__privacy a { color: inherit; }

@media (max-width: 800px) {
  .demo__grid { grid-template-columns: minmax(0, 1fr); }
  .consent { flex-direction: column; align-items: stretch; gap: .75rem; }
  .consent__actions .btn { flex: 1; }
}

/* Safety net: never leave an entrance hidden under reduce motion or ?motion=0. */
@media (prefers-reduced-motion: reduce) {
  html:not(.cw-motion-on) .reveal { opacity: 1; transform: none; transition: none; }
}
html.cw-motion-off .reveal { opacity: 1; transform: none; transition: none; }

/* Phone fixes (9 Nov 2026, Jordan approved the phone audit in mockups/phone-audit-20261109.md).
   Backup _archive/file-backups/box-pre-phone-fixes-20261109/. */

/* Item 6: a compact cookie banner on phones. Smaller text, the two house buttons
   (ink Accept, soft grey Decline, from consistency.css) side by side at the right,
   and hidden while the phone menu is open. */
@media (max-width: 800px) {
  .consent { right: 12px; bottom: 12px; left: 12px; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; border-radius: 16px; font-size: 13px; line-height: 1.45; }
  .consent__actions { justify-content: flex-end; gap: 8px; }
  .consent__actions .btn { flex: 0 0 auto; min-height: 40px; margin: 0; padding: 0 18px; font-size: 14px; }
}
body.menu-open .consent { display: none; }

/* Item 26: the transcript toggle is a 44px tap target on phones. */
@media (max-width: 980px) {
  .intro-transcript summary { min-height: 44px; padding-block: 11px; box-sizing: border-box; }
}

/* Item 9: 16px form fields under 981px, so iPhones don't zoom into them. */
@media (max-width: 980px) {
  .demo-form input, .demo-form textarea { font-size: 16px; }
}
/* Item 35: the demo form button runs the full width on phones. */
@media (max-width: 640px) {
  .demo-form .btn { justify-self: stretch; width: 100%; }
}

/* Item 35: the sent page is a framed card on the fine dots instead of an empty screen. */
.demo-sent { max-width: 36rem; padding: clamp(1.75rem, 5vw, 3rem); border: 1px solid var(--c-line); border-radius: 24px; background-color: var(--c-surface); background-image: radial-gradient(var(--c-hero-dot) .65px, transparent .8px); background-size: 5px 5px; }
.demo-sent__tick { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 50%; background: #e6f4ea; color: #1f8a4c; }
.demo-sent__tick svg { width: 22px; height: 22px; }
.demo-sent h1 { margin-bottom: .75rem; }
.demo-sent .demo__lede { margin-bottom: 1rem; }
.demo-sent .demo__direct { margin-bottom: 1.75rem; }
.demo-sent .btn { margin-top: 0; }
@media (max-width: 640px) {
  .demo-sent .btn { display: flex; width: 100%; }
}
/* Item 25: less empty space between the demo form (and the sent card) and the footer on phones. */
@media (max-width: 640px) {
  .demo { padding-bottom: 3rem; }
}

/* Cookie banner in one row on phones (Jordan, 9 Nov 2026, phone fixes round 2): the short
   line, then Decline and Accept. The full wording is display:none, so screen readers hear
   only the short line. Same values as the main site banner (index.html). */
.consent__short { display: none; }
@media (max-width: 760px) {
  .consent { flex-direction: row; align-items: center; gap: 10px; right: 12px; bottom: 12px; left: 12px; padding: 12px 12px 12px 14px; border-radius: 16px; font-size: 13px; line-height: 1.4; }
  .consent__full { display: none; }
  .consent__short { display: inline; }
  .consent p { flex: 1 1 auto; min-width: 0; }
  .consent__actions { flex: 0 0 auto; gap: 6px; }
  .consent__actions .btn { flex: 0 0 auto; min-height: 40px; margin: 0; padding: 0 14px; font-size: 14px; }
}