/* x1-examples - /examples (2026-10-01). Design A family; every rule scoped under .x1-examples. */

/* hero: the index of six examples, a contact sheet that links to each section */
.x1-examples .xe-index {align-self: center; gap: .6rem;}
.x1-examples .hero-text {align-self: center;}
.x1-examples .xe-index-k {font: 600 var(--fs-eyebrow)/1.4 var(--sans); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--muted); padding-bottom: .5rem; border-bottom: 1px solid var(--rule);}
.x1-examples .xe-sheet + .xe-index-k {margin-top: .9rem;}
.x1-examples .xe-sheet {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem;}
.x1-examples .xe-sheet a {display: block; text-decoration: none; color: var(--ink);}
.x1-examples .xe-sheet img {width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px;
  box-shadow: 0 0 0 1px var(--rule); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.x1-examples .xe-sheet span {display: flex; align-items: center; gap: .45rem; margin-top: .45rem;
  font: 500 var(--fs-small)/1.3 var(--sans);}
.x1-examples .xe-sheet span::after {content: "↓"; color: var(--accent); font-weight: 600;
  transition: transform var(--dur) var(--ease);}
.x1-examples .xe-sheet a:hover img {transform: translateY(-2px); box-shadow: 0 0 0 1px var(--accent), var(--shadow);}
.x1-examples .xe-sheet a:hover span::after {transform: translateY(2px);}

/* example sections: tighter rhythm between the six, a hairline between them */
.x1-examples .xe-sec {padding-block: clamp(3.5rem, 2rem + 5vw, 7rem);}
.x1-examples .xe-sec + .xe-sec {border-top: 1px solid var(--rule);}
.x1-examples .xe-sec .eyebrow {color: var(--accent); margin-bottom: var(--stack-s);}
.x1-examples .xe-sec .h2 {font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);}
.x1-examples .xe-sec .d29-lede {margin-top: 1.25rem; font-size: var(--fs-lede); color: var(--text); max-width: var(--measure); text-wrap: pretty;}
.x1-examples .xe-sec .d29-cta-row {margin-top: var(--stack-m);}
.x1-examples .xe-shot {margin: 0; padding: clamp(.75rem, .4rem + 1.2vw, 1.5rem); overflow: hidden;}
.x1-examples .xe-shot .d29-shot {width: 100%; border-radius: 10px; box-shadow: var(--shadow);}

/* films: dark screen frame like /fineshield */
.x1-examples .xe-screen {margin: 0; background: #121212; border-radius: var(--radius-img); overflow: hidden;
  box-shadow: var(--shadow);}
.x1-examples .xe-screen video {display: block; width: 100%; height: auto; background: #121212;}
.x1-examples .xe-screen-room {padding: clamp(1rem, .5rem + 2vw, 2.5rem) 0; background: #E3E7E8;}
.x1-examples .xe-screen-room video {width: auto; max-width: 100%; max-height: 640px; margin-inline: auto; background: transparent;}

/* check: the ledger of what to look for */
.x1-examples .xe-check {background: var(--tint);}
.x1-examples .xe-check .d29-lede {margin-top: 1.25rem; max-width: var(--measure); text-wrap: pretty;}
.x1-examples .xe-ledger {list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink);}
.x1-examples .xe-ledger li {display: flex; align-items: center; gap: 1.1rem; padding-block: 1.05rem;
  border-bottom: 1px solid rgba(0,0,0,.14);}
.x1-examples .xe-ledger-t {font: 400 clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem)/1.15 var(--serif); color: var(--ink); letter-spacing: -.01em;}
.x1-examples .xe-tick {flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid var(--accent);
  display: grid; place-items: center; background: var(--surface);}
.x1-examples .xe-tick::after {content: ""; width: .5rem; height: .85rem; margin-top: -.15rem;
  border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg);}
.x1-examples .xe-aha {margin: var(--stack-l) auto 0; padding-top: var(--stack-l); border-top: 1px solid rgba(0,0,0,.14);
  text-align: center; font: italic 400 clamp(2rem, 1.3rem + 2.8vw, 3.75rem)/1.12 var(--serif); color: var(--ink);
  letter-spacing: -.015em; text-wrap: balance;}

/* FAQ: one centred column */
.x1-examples .xe-faq-in {grid-column: 3 / span 8;}

@media (max-width: 960px) {
  .x1-examples .xe-index {margin-top: .5rem;}
  .x1-examples .xe-faq-in {grid-column: 1 / -1;}
}
@media (max-width: 700px) {
  .x1-examples .xe-sheet {gap: .6rem;}
  .x1-examples .xe-sheet span {font-size: .875rem;}
  .x1-examples .xe-screen-room video {max-height: 520px;}
  .x1-examples .xe-ledger li {padding-block: .85rem; gap: .85rem;}
}
@media (prefers-reduced-motion: reduce) {
  .x1-examples .xe-sheet img, .x1-examples .xe-sheet span::after {transition: none;}
  .x1-examples .xe-sheet a:hover img, .x1-examples .xe-sheet a:hover span::after {transform: none;}
}