/* x1-demo - /demo, FineShield conversation (2026-10-01). Every rule scoped under .x1-demo. */
.x1-demo [hidden] {display: none !important;}

/* hero */
.x1-demo .hero-media .photo {object-position: 52% 40%;}

/* start with 1 concrete question */
.x1-demo .dm-q {align-items: start; row-gap: var(--stack-m);}
.x1-demo .dm-q-t {grid-column: 1 / span 5;}
.x1-demo .dm-q-b {grid-column: 7 / span 6;}
.x1-demo .dm-asks {display: grid; gap: 0; border-top: 1px solid var(--rule);}
.x1-demo .dm-asks li {position: relative; padding: 1.35rem 0 1.35rem 2.25rem; border-bottom: 1px solid var(--rule);
  font: italic 400 clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem)/1.22 var(--serif); color: var(--ink); text-wrap: balance;}
.x1-demo .dm-asks li::before {content: ""; position: absolute; left: .2rem; top: 1.95rem; width: .8rem; height: .8rem;
  border: 1.5px solid var(--accent); border-radius: 50%;}
.x1-demo .dm-q-p {margin-top: var(--stack-m); font-size: var(--fs-lede); line-height: 1.55; max-width: var(--measure); text-wrap: pretty;}

/* see the words the product flags */
.x1-demo .dm-film {margin: 0; padding: clamp(.75rem, .4rem + 1.4vw, 1.75rem);}
.x1-demo .dm-film video {aspect-ratio: 16 / 9; height: auto;}

/* scope: two blocks + the first-scope sheet */
.x1-demo .dm-scope {align-items: start; row-gap: var(--stack-l);}
.x1-demo .dm-scope-t {grid-column: 1 / span 6; display: grid; gap: var(--stack-l);}
.x1-demo .dm-scope-t .h2 {margin-bottom: var(--stack-m);}
.x1-demo .dm-scope-t .d29-lede {max-width: var(--measure);}
.x1-demo .dm-scope-m {grid-column: 8 / span 5; align-self: stretch;}
.x1-demo .dm-sheet {position: sticky; top: 104px; background: var(--surface); border: 1px solid var(--rule); border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow); padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); border-top: 3px solid var(--accent);}
.x1-demo .dm-sheet-h {font: 400 clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem)/1.1 var(--serif); color: var(--ink); letter-spacing: -.01em;
  padding-bottom: 1rem; border-bottom: 1px solid var(--rule);}
.x1-demo .dm-sheet-g {padding-block: 1.25rem; border-bottom: 1px solid var(--rule);}
.x1-demo .dm-sheet-g:last-child {border-bottom: 0; padding-bottom: 0;}
.x1-demo .dm-sheet-k {font: 600 var(--fs-eyebrow)/1.4 var(--sans); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); margin-bottom: .75rem;}
.x1-demo .dm-ticks {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.25rem;}
.x1-demo .dm-ticks li {position: relative; padding-left: 1.6rem; font-size: var(--fs-small); line-height: 1.4; color: var(--ink);}
.x1-demo .dm-ticks li::before {content: ""; position: absolute; left: 0; top: .12em; width: 1rem; height: 1rem; border: 1.5px solid rgba(20,20,20,.35); border-radius: 4px; background: var(--bg);}
.x1-demo .dm-ticks-row {grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));}
.x1-demo .dm-sheet-prove .dm-ticks {grid-template-columns: 1fr;}
.x1-demo .dm-sheet-prove .dm-ticks li::before {border-color: var(--accent); background: rgba(245, 158, 11, .12);}

/* AHA pull line */
.x1-demo .dm-aha {background: var(--tint);}
.x1-demo .dm-aha + .sec {border-top: 0;}
.x1-demo .dm-aha .quote-big {margin: 0 auto; max-width: 26ch;}

/* request form */
.x1-demo .dm-reqg {align-items: stretch; row-gap: var(--stack-l);}
.x1-demo .dm-req-media {grid-column: 1 / span 5; margin: 0;}
.x1-demo .dm-req-media .photo {height: 100%; min-height: 24rem; object-position: 50% 45%;}
.x1-demo .dm-card {grid-column: 6 / span 7;}
.x1-demo .dm-card .eyebrow {margin-bottom: var(--stack-m);}
.x1-demo .dm-fgrid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem var(--col-gap);}
.x1-demo .dm-full {grid-column: 1 / -1;}
.x1-demo .dm-field label .dm-req, .x1-demo .dm-field .dm-req {color: var(--accent); margin-left: .15rem;}
.x1-demo .dm-form input:not([type=checkbox]):not([type=radio]), .x1-demo .dm-form textarea {background: var(--bg); border: 1px solid rgba(20,20,20,.18); border-radius: 10px;}
.x1-demo .dm-form textarea {min-height: 8rem;}
.x1-demo .dm-actions {display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem;}
.x1-demo .dm-actions .d29-btn {border: 0; cursor: pointer; font: inherit;}
.x1-demo .dm-fine {font-size: .875rem; color: var(--muted);}
.x1-demo .dm-fine a, .x1-demo .dm-msg a {color: var(--ink); text-underline-offset: 3px;}
.x1-demo .dm-msg {font-weight: 600; color: var(--ink);}
.x1-demo .dm-err {color: #A12622;}

/* FAQ */
.x1-demo .dm-faq {max-width: 52rem; margin-inline: auto;}
.x1-demo .dm-faq-s + .close {padding-top: 0;}

@media (max-width: 960px) {
  .x1-demo .dm-q-t, .x1-demo .dm-q-b, .x1-demo .dm-scope-t, .x1-demo .dm-scope-m,
  .x1-demo .dm-req-media, .x1-demo .dm-card {grid-column: 1 / -1;}
  .x1-demo .dm-sheet {position: static;}
  .x1-demo .dm-req-media .photo {height: auto; min-height: 0; aspect-ratio: 4 / 3;}
}
@media (max-width: 640px) {
  .x1-demo .dm-fgrid {grid-template-columns: 1fr;}
  .x1-demo .dm-ticks {grid-template-columns: 1fr;}
  .x1-demo .dm-actions .d29-btn {width: 100%; justify-content: center;}
  .x1-demo .dm-asks li {padding-left: 1.75rem;}
  .x1-demo .dm-asks li::before {top: 1.85rem; left: 0;}
}