/* S6 · Examples by industry (SITE-24). Styles for [data-section="examples"] only; use the v2 tokens and surfaces.
   The deck itself is SITE-29's kit (carousel.css, linked from the section's own markup; SITE-25 can move it to the
   page's css list when several sections use it). */

/* Only the playing carousel is in the layout: the other 23 stack in the same cell, and while they were merely
   invisible their lazy images all counted as in view and loaded (5.3 MB, Lighthouse r1). examples.js warms the
   next one before the deck deals it. The deck crossfades with both fronts marked .is-on, so nothing changes there. */
[data-section="examples"] .ck-deck__front:not(.is-on) { display: none; }

/* No numeral (founder, 2026-10-31 ~01:43): a pixel eyebrow over the title instead, so the head is one column. */
[data-section="examples"] .ex__head { display: block; max-width: 860px; }
[data-section="examples"] .ex__eyebrow { margin: 0 0 var(--s-4); }
/* At 390 the title breaks where it reads best: "Made for apps / like yours". */
[data-section="examples"] .ex__nw { white-space: nowrap; }
[data-section="examples"] .ex__deck { margin-top: var(--s-12); }
/* Read top-down at every width: pick an app (the tabs), watch its carousel, see its three stages. */
[data-section="examples"] .ck-deck__tabs { order: -1; }
/* The examples line sits directly under the deck it labels, centred like the deck, never near a rail. */
[data-section="examples"] .ex__note { max-width: 560px; margin: var(--s-6) auto 0; text-align: center; text-wrap: balance; }
[data-section="examples"] .ex__cta { display: flex; justify-content: center; margin-top: var(--s-6); }

/* ≤ 1023 px (tablet and phone, founder mobile rule): the kit's floating side cards need ~1000 px, so below that the
   deck becomes one column in reading order: pick an app (the tabs), its carousel, its three stages, and the playbook
   template it uses. The leaders and the Story / Stage / Niche photo cards go: the slide progress and the stages row
   already say the beat and the stage. One mover (the front carousel); everything else is still. */
@media (max-width: 1023px) {
  [data-section="examples"] .ex__deck { margin-top: var(--s-8); }
  [data-section="examples"] .ck-deck { gap: var(--s-5); }
  [data-section="examples"] .ck-deck__stage { display: contents; }
  [data-section="examples"] .ck-deck__leaders,
  [data-section="examples"] .ck-side--tr,
  [data-section="examples"] .ck-side--br,
  [data-section="examples"] .ck-side--bl { display: none; }
  /* The strip scrolls; its labels stay ≥ 20 px from the rails even half-scrolled, and every tab is a 44 px target. */
  [data-section="examples"] .ck-deck__tabs { justify-content: flex-start; width: calc(100% - 40px); }
  [data-section="examples"] .ck-deck__tab { height: 44px; }
  /* The back cards peek 36 px above the front one. */
  [data-section="examples"] .ck-deck__pile { order: 2; position: relative; left: auto; top: auto; translate: none; width: 300px; margin-top: 40px; }
  [data-section="examples"] .ck-deck__rows { order: 3; width: min(100% - 40px, 640px); }
  [data-section="examples"] .ck-side--tl { order: 4; position: relative; inset: auto; width: min(100% - 40px, 640px); padding: 14px 16px 12px; }
}
@media (max-width: 720px) {
  [data-section="examples"] .ck-deck__pile { width: 260px; }
  /* The row scrolls when it must; a 1 px inset keeps the buttons' hairline ring from being clipped by the scroller. */
  [data-section="examples"] .ck-deck__stages { padding: 1px; }
}
/* 721–1023: the stages row names each carousel's template, so the separate Hook card would repeat it. */
@media (min-width: 721px) and (max-width: 1023px) {
  [data-section="examples"] .ck-side--tl { display: none; }
  /* R1 at ≥ 768: labels ≥ 24 px from the rails, even half-scrolled. */
  [data-section="examples"] .ck-deck__tabs { width: calc(100% - 48px); }
}

/* Touch: no grey/blue tap flash on the tabs and stage buttons; their pressed state is the design's own. */
[data-section="examples"] button { -webkit-tap-highlight-color: transparent; }
/* No 01/02/03 (founder, 2026-10-31 ~01:43): the stage names already give the order. */
[data-section="examples"] .ck-deck__st-n { display: none; }

/* ── The intro row: three of the system's textured cards (founder-liked, "written for them"), one persona each. ── */
[data-section="examples"] .ex-intro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-12); }
[data-section="examples"] .ex-intro__card { --card-pad: 24px; height: 460px; display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; transition: translate 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
[data-section="examples"] .ex-intro__card:hover { translate: 0 -4px; box-shadow: var(--shadow-md); }
[data-section="examples"] .ex-intro__card:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
[data-section="examples"] .ex-intro__title { margin-top: var(--s-5); color: #fff; max-width: 13em; text-wrap: balance; }
[data-section="examples"] .ex-intro__prompt { height: 150px; }
[data-section="examples"] .ex-intro__brief { display: block; color: var(--ink-58); padding-right: var(--card-pad); }
/* The whole brief is laid out from the start (the rest is transparent), so typing never reflows anything. */
/* Only once examples.js arms the typing (not with reduced motion or without JS: then the brief simply shows). */
[data-section="examples"] .ex-intro.is-armed .ex-intro__rest { color: transparent; }
[data-section="examples"] .ex-intro__brief:not(.is-typing) .ex-intro__caret { display: none; }
[data-section="examples"] .ex-intro__caret { display: inline-block; width: 1.5px; height: 1.05em; margin: 0 1px -.18em; background: var(--orange); animation: ex-caret 1s steps(1) infinite; }
@keyframes ex-caret { 50% { opacity: 0; } }
[data-section="examples"] .ex-intro__foot { margin-top: auto; color: var(--ink-80); }
@media (max-width: 1023px) {
  /* A snap row, inset from the rails so even a half-shown card's text stays off them. */
  [data-section="examples"] .ex-intro { display: flex; gap: var(--s-3); width: calc(100% - 40px); margin-inline: auto; margin-top: var(--s-8); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  [data-section="examples"] .ex-intro::-webkit-scrollbar { display: none; }
  [data-section="examples"] .ex-intro__card { flex: 0 0 min(300px, 84%); height: 420px; scroll-snap-align: start; }
  [data-section="examples"] .ex-intro__card:hover { translate: none; box-shadow: none; }
}
@media (min-width: 721px) and (max-width: 1023px) { [data-section="examples"] .ex-intro { width: calc(100% - 48px); } }
@media (prefers-reduced-motion: reduce) {
  [data-section="examples"] .ex-intro__card { transition: none; }
  [data-section="examples"] .ex-intro__card:hover { translate: none; }
}
/* An intro card scrolls the deck into view: clear of the sticky nav bar. */
[data-section="examples"] #ex-deck { scroll-margin-top: 88px; }

/* SITE-26 verdict 1 */
/* 3) The caption names the app as an example, in SITE-29's unfold style: a pixel "Example" before the name. */
[data-section="examples"] .ex__example { margin-right: 6px; color: var(--ink-58); vertical-align: 2px; }
/* 1) Below 1024 the industry tabs scroll with the 390 treatment: snap, a 28 px fade at the open edge, the active
   tab kept in view (the kit scrolls to it on every switch). */
@media (max-width: 1023px) {
  [data-section="examples"] .ck-deck__tabs { scroll-snap-type: x mandatory; scroll-padding-inline: 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  [data-section="examples"] .ck-deck__tabs.is-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
  [data-section="examples"] .ck-deck__tab { scroll-snap-align: start; }
  /* 6) Template captions under the stage buttons: 14 px. */
  [data-section="examples"] .ck-deck__st-m { font-size: 14px; }
}