/* Page-owned split composition. Shared field and action recipes remain canonical. */
body.brand-demo {
 --field-font-size:16px;
 --field-min-height:50px;
 --field-padding-block:13px;
 --field-padding-inline:16px;
 --field-radius:6px;
 --field-leading:1.4;
 --field-border:#c9c9cd;
 --field-hover-border:#a6a6ac;
 --field-placeholder:#96969d;
 --field-bg:#fff;
 --field-focus-border:#777780;
 --field-focus-shadow:0 0 0 3px rgb(24 24 27 / .06);
 --field-focus-outline:#777780;
}
.demo-conversion { width: var(--launch-frame); margin: 0 auto; padding: var(--space-12) 0 0; border-inline:var(--launch-divider); }
.demo-conversion__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "intro form" "story form"; column-gap:0; align-items:start; border-block:var(--launch-divider); }
.demo-card { position:relative; grid-area: form; border-left:var(--launch-divider); border-radius:0; min-width:0; height:100%; padding:64px 40px; background:var(--launch-surface, #f6f6f7); }
/* The inset rule belongs to the panel, not the field or focus layers. */
.demo-card__frame { position:absolute; inset:16px; border:var(--launch-divider); pointer-events:none; }
.demo-card__frame i { position:absolute; width:6px; height:6px; border:var(--launch-divider); background:var(--color-surface, #fff); }
.demo-card__frame i:nth-child(1) { top:-3px; left:-3px; }
.demo-card__frame i:nth-child(2) { top:-3px; right:-3px; }
.demo-card__frame i:nth-child(3) { bottom:-3px; left:-3px; }
.demo-card__frame i:nth-child(4) { bottom:-3px; right:-3px; }
.demo-intro { grid-area:intro; margin:0; padding:64px 40px 0 0; }
.demo-kicker { display:inline-flex; align-items:center; gap:var(--space-2); margin:0 0 28px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--category-label-type-size); font-weight:400; letter-spacing:.04em; text-transform:uppercase; color:var(--color-text-supporting); }
.demo-kicker::before { content:""; flex:none; width:6px; height:6px; background:var(--color-accent-solid); }
.demo-title { max-width:19ch; margin: 0; color: var(--launch-ink); font-family: var(--font-display); font-size:var(--type-size-home-hero); font-weight:500; line-height:var(--type-leading-home-display); letter-spacing:var(--type-tracking-home-display); text-wrap: balance; }
.demo-subtitle:empty { display: none; }
.demo-subtitle { margin: var(--space-5) 0 0; max-width: 44ch; color: var(--launch-copy); font-size:20px; line-height:1.5; text-wrap:pretty; }
body.brand-demo .demo-card .form-container, body.brand-demo .demo-card .form-success { width: 100%; max-width: none; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; }
.demo-form__sub { max-width:42ch; margin: 0 auto 32px; text-align:center; color: var(--launch-copy); font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom:24px; }
body.brand-demo .demo-card .form-label { font-size: 14px; font-weight:400; line-height:1.4; color:var(--launch-copy); }
.demo-conversion :is(.form-submit, .demo-booking__action) { font-size: var(--type-size-body); }
.form-input { width: 100%; min-width: 0; }
body.brand-demo .demo-card .form-label span { color:var(--color-text-supporting); }
body.brand-demo .demo-card select.form-input {
 appearance:none; padding-right:40px; text-overflow:ellipsis;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%2377777e' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 background-position:right 14px center; background-repeat:no-repeat;
}
body.brand-demo .demo-card select.form-input:has(option:first-child:checked) { color:var(--field-placeholder); }
body.brand-demo .demo-card select.form-input option { color:var(--launch-ink); }
textarea.form-input { resize: vertical; min-height:104px; }
body.brand-demo .demo-card .form-submit { width:100%; min-height:56px; font-size:18px; }
.demo-form__privacy { max-width:48ch; margin:24px auto 0; color:var(--launch-copy); font-size:13px; line-height:1.6; text-align:center; text-wrap:pretty; }
.demo-form__privacy a { color:inherit; text-underline-offset:3px; }
/* Enhance the native picker while retaining platform selection on older browsers. */
@supports (appearance: base-select) {
 body.brand-demo .demo-card select.form-input,
 body.brand-demo .demo-card select.form-input::picker(select) { appearance:base-select; }
 body.brand-demo .demo-card select.form-input { cursor:pointer; }
 body.brand-demo .demo-card select.form-input::picker-icon { display:none; }
 body.brand-demo .demo-card select.form-input::picker(select) {
  margin-block:8px; padding:6px; border:1px solid var(--field-border); border-radius:10px;
  background:var(--field-bg); color:var(--launch-ink); font:inherit;
  box-shadow:0 8px 24px rgb(24 24 27 / .1); max-height:320px; overflow:auto; overscroll-behavior:contain;
 }
 body.brand-demo .demo-card select.form-input option {
  min-height:44px; padding:10px 12px; border-radius:5px; font-size:15px; line-height:1.4; cursor:pointer;
 }
 body.brand-demo .demo-card select.form-input option:is(:hover,:focus,:checked) { background:var(--launch-surface); }
 body.brand-demo .demo-card select.form-input option::checkmark { margin-left:auto; order:1; }
}
.demo-story { grid-area: story; min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); padding:32px 40px 64px 0; }
.demo-agenda__row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.demo-agenda__row:first-child { margin-top: 0; }
.demo-agenda__row > svg { width:26px; height:26px; padding:5px; margin-top:-1px; border-radius:50%; background:var(--color-action-accent-soft); color:var(--color-accent-text); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.demo-agenda__row p { margin: 0; color: var(--launch-copy); font-size: var(--type-size-body); line-height: 1.5; text-wrap: pretty; }
/* One proof band joins the same rails as the booking frame. */
.demo-conversion > .home-customer-stories { margin-top:64px; padding:0; border-block:var(--launch-divider); }
.demo-conversion > .home-customer-stories > .stack-inner { width:100%; }
.demo-conversion .home-customer-logos { max-width:none; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; align-items:stretch; }
.demo-conversion .home-customer-logos::before { display:none; }
.demo-conversion .home-customer-logos > :is(a,span) { min-height:88px; padding:16px; opacity:1; border-right:var(--launch-divider); border-bottom:var(--launch-divider); }
.demo-conversion .home-customer-logos > :nth-child(6n) { border-right:0; }
.demo-conversion .home-customer-logos > :nth-last-child(-n+6) { border-bottom:0; }
.demo-conversion .home-customer-logos a:focus-visible img { opacity:1; }
@media (hover:hover) { .demo-conversion .home-customer-logos a:hover img { opacity:.56; } }
.demo-conversion .home-customer-logos img { opacity:.34; max-height:34px; object-fit:contain; }
.demo-conversion .home-customer-logos img.demo-logo-bob-mills { width:72px; height:26px; object-fit:cover; object-position:50% 48%; }
.demo-quote { margin:8px 0 0; padding-top:32px; border-top:var(--launch-divider); max-width:44ch; }
.demo-quote blockquote { margin:0 0 16px; font-family:var(--font-display); font-size:24px; font-weight:500; line-height:1.3; letter-spacing:var(--type-tracking-home-display); text-wrap:pretty; color:var(--launch-ink); }
.demo-quote figcaption { font-size:var(--type-size-body); line-height:1.5; color:var(--launch-copy); }
.demo-quote figcaption strong { font-weight:500; color:var(--launch-ink); }
.demo-contact-options { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 12px; padding:40px 40px 88px; border-bottom:var(--launch-divider); font-size:var(--type-size-body); line-height:1.5; text-align:center; }
.demo-contact-options p { margin:0; color:var(--launch-copy); }
.demo-contact-options a { color:var(--launch-ink); font-weight:500; text-decoration:underline; text-decoration-color:var(--field-border); text-underline-offset:4px; transition:text-decoration-color 150ms ease; }
.demo-contact-options a:hover { text-decoration-color:currentColor; }
.demo-card a:not(.btn):focus-visible, .demo-contact-options a:focus-visible { outline:2px solid var(--field-focus-outline); outline-offset:4px; }
.demo-booking { margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--launch-divider); }
.demo-booking h3 { font-family: var(--font-display); font-size: var(--type-size-card); line-height: 1.2; font-weight: 400; letter-spacing: -.02em; color: var(--launch-ink); margin: 0 0 var(--space-3); text-wrap: pretty; }
.demo-booking > p { font-size: var(--type-size-body); line-height: 1.5; color: var(--launch-copy); text-wrap: pretty; margin: 0; }
.demo-booking__action { width: 100%; margin: var(--space-5) 0 var(--space-4); }
.demo-booking > .demo-booking__note { font-size: var(--type-size-body); line-height: 1.5; }
.field-error, .form-error { color: var(--launch-danger-text); font-size: var(--type-size-body); line-height: 1.5; margin: 0; }
.form-error { display: none; margin-top: 12px; }
.form-error.visible { display: block; }
.form-success { display: none; }
.form-success.active { display: block; }
.success-icon { display: none; }
.success-heading { font-size: var(--type-size-card); font-weight: 400; color: var(--launch-ink); margin: 0 0 12px; }
.success-sub { color: var(--launch-copy); font-size: var(--type-size-body); line-height: 1.5; margin: 0; }
#demo-booking[hidden] { display: none; }
@media (max-width: 1000px) {
 .demo-conversion__grid { grid-template-columns:1fr; grid-template-rows:auto; grid-template-areas:"intro" "form" "story"; }
 .demo-intro { padding:32px; }
 .demo-title { max-width:18ch; }
 .demo-card { border-left:0; border-block:var(--launch-divider); padding:32px; }
 .demo-story { padding:32px; }
 .demo-conversion .home-customer-logos { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .demo-conversion .home-customer-logos > :nth-child(3n) { border-right:0; }
 .demo-conversion .home-customer-logos > :nth-last-child(-n+6) { border-bottom:var(--launch-divider); }
 .demo-conversion .home-customer-logos > :nth-last-child(-n+3) { border-bottom:0; }
}
@media (max-width: 720px) {
 .demo-conversion { padding-top:24px; padding-bottom:0; }
 .demo-intro, .demo-card, .demo-story { padding:24px; }
 .demo-card__frame { inset:10px; }
 .demo-title { font-size:40px; }
 .demo-subtitle { font-size:18px; }
 body.brand-demo .demo-card .form-row { grid-template-columns:1fr; gap:0; }
 .demo-conversion > .home-customer-stories { margin-top:40px; }
 .demo-contact-options { padding:32px 24px 64px; }
 .demo-conversion .home-customer-logos { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .demo-conversion .home-customer-logos > :is(a,span) { min-height:72px; padding:12px; }
}