/* ==================================================================
   Instagram Carousel Slide Engine — stylesheet
   Every color/font/radius value below is a CSS custom property set
   inline per-slide from brand tokens. Nothing here hardcodes brand.
   ================================================================== */

*, *::before, *::after { box-sizing: border-box; }

.slide {
  width: 1080px;
  height: 1350px;
  overflow: hidden;
  position: relative;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.slide-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------ */
/* Shared chrome: handle + page counter                          */
/* ------------------------------------------------------------ */

.cc-chrome {
  position: absolute;
  top: 56px;
  left: 64px;
  right: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
}

.cc-chrome-brand { display: flex; align-items: center; gap: 14px; }

.cc-handle {
  font-size: 22px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--text-muted);
}

.cc-counter {
  font-size: 20px; font-variant-numeric: tabular-nums;
  color: var(--text-muted); letter-spacing: 0.04em;
}

.cc-chrome--onphoto .cc-handle { color: var(--text-muted-on-photo); text-shadow: 0 2px 12px rgba(0,0,0,0.45); }
.cc-chrome--onphoto .cc-counter { color: var(--text-on-photo); text-shadow: 0 2px 12px rgba(0,0,0,0.45); }

/* ------------------------------------------------------------ */
/* Kicker                                                         */
/* ------------------------------------------------------------ */

.cc-kicker {
  display: flex; align-items: center; gap: 16px;
  font-size: 26px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--primary-on-bg);
  margin-bottom: 28px;
}

.cc-kicker-line { display: inline-block; width: 44px; height: 3px; background: var(--primary); border-radius: 2px; }

/* ------------------------------------------------------------ */
/* Headline / body base sizes (overridden by fitAll at runtime)   */
/* ------------------------------------------------------------ */

.cc-headline {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.06;
  margin: 0;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.cc-mark { color: var(--accent-on-bg); }
.slide--cover .cc-mark { color: var(--primary-on-photo); }
.slide--poster .cc-mark { color: var(--primary-on-bg); }
.slide--linen .cc-mark { color: var(--primary-on-bg); text-transform: uppercase; }
.slide--twittex .cc-mark { color: var(--accent-on-bg); font-weight: 650; }
.cc-body,.cc-check-text,.cc-step-text,.cc-quote,.cc-compare-text,.cc-minicard-text,.cc-story-body,.cc-story-list b,.cc-tx-text,.cc-tx-list,.cc-tx-compare{overflow-wrap:anywhere}

.cc-body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 20px 0 0;
}

.cc-body--full { font-size: 34px; }
.cc-body--onphoto { color: var(--text-muted-on-photo); text-shadow: 0 2px 16px rgba(0,0,0,0.55); }
.cc-stat-value { padding-block: .12em; }

/* ================================================================
   STYLE: editorial — clean, typographic, kicker line
   ================================================================ */

.slide--editorial { padding: 0; }
.slide--editorial .slide-inner { padding: 200px 96px 120px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.slide--editorial .cc-headline--editorial { font-size: 92px; }
.slide--editorial .cc-headline--hero { font-size: 112px; }
.slide--editorial .cc-headline--split { font-size: 60px; }
.slide--editorial .cc-headline--text { font-size: 56px; margin-bottom: 8px; }
.slide--editorial .cc-headline--cta { font-size: 76px; text-align: center; }
.slide--editorial .cc-headline--caption { font-size: 44px; }
.slide--editorial .cc-body { font-size: 32px; }
.slide--editorial .cc-kicker-line { background: var(--accent-on-bg); }

.slide--editorial .cc-editorial-hook,
.slide--editorial .cc-editorial-hero { max-width: 880px; }

.slide--editorial .cc-fulltext { max-width: 860px; }

.slide--editorial .cc-stat { margin-top: 40px; display: flex; flex-direction: column; }
.slide--editorial .cc-stat-value { font-family: var(--font-head); font-size: 140px; font-weight: 700; color: var(--primary-on-bg); line-height: 1; }
.slide--editorial .cc-stat-label { font-size: 26px; color: var(--text-muted); margin-top: 10px; }

/* Split 50/50 */
.cc-split { display: flex; height: 100%; align-items: stretch; }
.cc-split-text { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 80px 0 96px; }
.cc-split-media { flex: 1; background-size: cover; background-position: center; }
.slide--editorial .cc-split { padding: 0; }
.slide--editorial .cc-split-text { padding-top: 0; }

/* Checklist / Steps */
.cc-checklist-wrap, .cc-steps-wrap, .cc-quote-wrap, .cc-compare-wrap, .cc-cardsgrid-wrap {
  height: 100%; display: flex; flex-direction: column; justify-content: center;
  padding: 200px 96px 140px;
}
.cc-checklist, .cc-steps { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 30px; }
.cc-check-item, .cc-step-item { display: flex; align-items: flex-start; gap: 24px; font-size: 34px; line-height: 1.3; }
.cc-check-mark { color: var(--accent-contrast); background: var(--accent); border-radius: 50%; width: 44px; height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; }
.cc-step-num { font-family: var(--font-head); font-weight: 700; color: var(--primary-on-bg); font-size: 34px; min-width: 60px; }

/* Quote */
.cc-quote-wrap { align-items: flex-start; }
.cc-quote-mark { font-family: var(--font-head); font-size: 140px; color: var(--primary-on-bg); line-height: 0.6; margin-bottom: 20px; }
.cc-quote { font-family: var(--font-head); font-size: 56px; font-weight: 600; line-height: 1.25; margin: 0; }
.cc-quote-author { margin-top: 32px; font-size: 26px; color: var(--text-muted); font-weight: 600; }
.cc-quote--onphoto { color: var(--text-on-photo); text-shadow: 0 2px 20px rgba(0,0,0,0.55); }
.cc-quote-author--onphoto { color: var(--text-muted-on-photo); text-shadow: 0 2px 12px rgba(0,0,0,0.5); }

/* Comparison */
.cc-compare { display: flex; align-items: stretch; gap: 24px; margin-top: 40px; }
.cc-compare-col { flex: 1; background: color-mix(in oklab, var(--text) 6%, var(--bg)); border-radius: var(--radius); padding: 40px 36px; }
.cc-compare-col--b { background: color-mix(in oklab, var(--accent) 12%, var(--bg)); }
.cc-compare-label { font-size: 22px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text); font-weight: 700; margin-bottom: 16px; }
.cc-compare-text { font-size: 30px; line-height: 1.35; font-weight: 500; }
.cc-compare-vs { align-self: center; font-family: var(--font-head); font-size: 28px; font-weight: 700; color: var(--text-muted); }

/* Cards grid (11-type "cards" layout, not to be confused w/ "cards" style) */
.cc-cardsgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.cc-minicard { background: color-mix(in oklab, var(--text) 5%, var(--bg)); border-radius: var(--radius); padding: 32px; }
.cc-minicard-num { font-family: var(--font-head); font-size: 28px; font-weight: 700; color: var(--primary-on-bg); margin-bottom: 12px; }
.cc-minicard-text { font-size: 27px; line-height: 1.35; }

/* CTA */
.cc-cta-wrap { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 100px; }
.cc-cta-layout { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: inherit; }
.cc-cta-copy { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: inherit; }
.cc-cta-layout--with-image {
  /* Copy stays dominant: a real automation CTA can be substantially longer
     than the gallery demo sentence. The former near-50/50 split broke normal
     Serbian words across characters even though the box technically fit. */
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(250px, .7fr);
  align-items: center; gap: 40px; text-align: left;
}
.cc-cta-wrap--with-image { width: 100%; }
.cc-cta-layout--with-image .cc-cta-copy { align-items: flex-start; text-align: left; }
.slide--editorial .cc-cta-layout--with-image .cc-headline--cta,
.slide--cover .cc-cta-layout--with-image .cc-headline--cta {
  font-size: 64px; line-height: 1.08; text-wrap: balance;
}
.cc-cta-media {
  width: 100%; height: 500px; min-width: 0;
  background-size: cover; background-position: center;
  border: 1px solid var(--surface-line); border-radius: var(--radius);
  box-shadow: 0 26px 58px -34px rgba(0,0,0,.34);
}
.cc-cta-button { margin-top: 44px; background: var(--accent); color: var(--accent-contrast); padding: 22px 48px; border-radius: 999px; font-size: 28px; font-weight: 700; }

/* Cover-style content wrapper reused across type builders */
.cc-cover-frame, .cc-imagefocus-frame { position: relative; width: 100%; height: 100%; }
.cc-cover-media, .cc-imagefocus-media, .cc-split-media {
  position: absolute; inset: 0; background-size: cover; background-position: center;
}
.cc-split-media { position: relative; }
.cc-cover-media--fallback, .cc-imagefocus-media--fallback, .cc-split-media--fallback, .cc-tx-media--fallback {
  background: linear-gradient(160deg, color-mix(in oklab, var(--primary) 24%, var(--bg)), color-mix(in oklab, var(--accent) 12%, var(--bg)), var(--bg));
  display: flex; align-items: center; justify-content: center;
}
.cc-fallback-mark {
  font-family: var(--font-head); font-size: 220px; font-weight: 700;
  color: color-mix(in oklab, var(--primary) 40%, var(--bg));
}
.cc-cover-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.18) 32%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.88) 100%);
}
.cc-cover-scrim--bottom {
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.92) 100%);
}
.cc-cover-content {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0 80px 120px; z-index: 4;
}
.cc-cover-content--bottom { bottom: 0; }
.cc-cover-content .cc-headline { color: var(--text-on-photo); text-shadow: 0 4px 30px rgba(0,0,0,0.55); }
.cc-cover-content .cc-kicker { color: var(--primary-on-photo); text-shadow: 0 2px 14px rgba(0,0,0,0.5); }
.cc-cover-content .cc-kicker-line { background: var(--primary-on-photo); }
.cc-headline--xl { font-size: 96px; }

.cc-imagefocus-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 80px 90px; z-index: 4; }
.cc-imagefocus-caption--cover .cc-headline, .cc-imagefocus-caption--poster .cc-headline { color: var(--text-on-photo); text-shadow: 0 4px 24px rgba(0,0,0,0.55); }
.cc-imagefocus-caption--cover .cc-body, .cc-imagefocus-caption--poster .cc-body { color: var(--text-muted-on-photo); text-shadow: 0 2px 14px rgba(0,0,0,0.5); }
.cc-imagefocus-caption:not(.cc-imagefocus-caption--cover):not(.cc-imagefocus-caption--poster) {
  left: 64px; right: 64px; bottom: 120px; padding: 32px 38px;
  border-radius: var(--radius); background: color-mix(in oklab, var(--bg) 98%, transparent);
  border: 1px solid var(--surface-line); box-shadow: 0 18px 44px rgba(0,0,0,.16);
  backdrop-filter: blur(12px);
}
.cc-headline--caption { font-size: 46px; }

.cc-center-stack { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 96px; }

.cc-pill {
  margin-top: 36px; background: var(--accent); color: var(--accent-contrast);
  padding: 14px 30px; border-radius: 999px; font-size: 24px; font-weight: 700;
}

/* ================================================================
   STYLE: cover — full-bleed photo, scrim, text over image
   ================================================================ */

.slide--cover .slide-inner { height: 100%; }
.slide--cover .cc-editorial-hook,
.slide--cover .cc-editorial-hero,
.slide--cover .cc-split-text,
.slide--cover .cc-checklist-wrap,
.slide--cover .cc-steps-wrap,
.slide--cover .cc-quote-wrap,
.slide--cover .cc-compare-wrap,
.slide--cover .cc-cardsgrid-wrap,
.slide--cover .cc-fulltext,
.slide--cover .cc-cta-wrap { padding-left: 88px; padding-right: 88px; }

.slide--cover .cc-headline { font-size: 82px; }
.slide--cover .cc-headline--hero, .slide--cover .cc-headline--xl { font-size: 100px; }
.slide--cover .cc-body { font-size: 30px; }
.slide--cover .cc-stat { margin-top: 28px; display: flex; flex-direction: column; }
.slide--cover .cc-stat-value {
  font-family: var(--font-head); font-size: 112px; font-weight: 700; line-height: 1;
  color: var(--primary-on-photo); text-shadow: 0 3px 22px rgba(0,0,0,.58);
}
.slide--cover .cc-stat-label {
  margin-top: 10px; font-family: var(--font-body); font-size: 26px; font-weight: 500;
  color: var(--text-muted-on-photo); text-shadow: 0 2px 14px rgba(0,0,0,.55);
}

/* Non-hook/quote/image types on the "cover" style still get a warm
   photographic backdrop feel via a duller bg + strong accent line   */
.slide--cover:not(.slide--type-hook):not(.slide--type-quote):not(.slide--type-image) {
  background: var(--bg);
}
.slide--cover .cc-checklist-wrap, .slide--cover .cc-steps-wrap { padding-top: 190px; }

/* ================================================================
   STYLE: poster — brutalist, huge uppercase type, hard edges, index
   ================================================================ */

.slide--poster { background: var(--bg); }
.slide--poster .slide-inner {
  height: 100%; position: relative; padding: 64px;
  border: 14px solid var(--text);
}
.slide--poster .cc-chrome { top: 40px; left: 48px; right: 48px; }
.slide--poster .cc-headline {
  text-transform: uppercase; letter-spacing: -0.01em;
  font-weight: 700; line-height: .98;
  /* Compact display type needs real ascent/descent room. Without this line-box
     inset Chromium reports normal glyph paint as overflow and auto-fit drives
     every supported brand font down to its minimum size. */
  padding-block: .07em;
}
.slide--poster .cc-headline--poster { font-size: 128px; line-height: .98; }
.slide--poster .cc-headline--hero { font-size: 150px; }
.slide--poster .cc-headline--text { font-size: 68px; line-height: 1; }
.slide--poster .cc-headline--split { font-size: 68px; line-height: 1; }
.slide--poster .cc-headline--cta { font-size: 90px; text-align: left; line-height: .98; }
.slide--poster .cc-headline--caption { font-size: 54px; text-transform: uppercase; }
.slide--poster .cc-kicker {
  flex: none; font-weight: 800; color: var(--primary-on-bg);
  margin-bottom: 30px; letter-spacing: .12em;
}
.slide--poster .cc-kicker-line { display: none; }
.slide--poster .cc-body { font-size: 32px; }

.slide--poster .cc-poster-index {
  position: absolute; top: 140px; right: 48px;
  font-family: var(--font-head); font-size: 260px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, color-mix(in oklab, var(--primary-on-bg) 72%, var(--accent-on-bg)) 30%, var(--bg));
  line-height: 1; z-index: 1; pointer-events: none;
}

/* Source design: one centred statement inside the hard print frame. */
.slide--poster .cc-poster-hook {
  position: relative; z-index: 2; height: 100%; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 110px 32px; overflow: hidden;
}
.slide--poster .cc-poster-hook .cc-headline {
  flex: 0 1 auto; max-height: 680px; overflow: hidden;
}
.slide--poster .cc-poster-body {
  position: relative; z-index: 2; max-width: 780px; max-height: 180px;
  overflow: hidden; margin-top: 24px; padding: 0;
}
.slide--poster .cc-poster-hook--hero .cc-stat {
  flex: none; min-height: 0; margin-top: 34px;
  display: flex; flex-direction: column; overflow: hidden;
}
.slide--poster .cc-poster-hook--hero .cc-stat-value {
  max-height: 220px; overflow: hidden; padding-block: .12em;
  font-size: 150px; line-height: .94; color: var(--primary-on-bg);
}
.slide--poster .cc-poster-hook--hero .cc-stat-label {
  max-width: 620px; max-height: 80px; overflow: hidden;
  font-size: 28px; font-weight: 700; text-transform: uppercase;
}

/* All semantic layouts keep the source design's generous inner gutter. */
.slide--poster .cc-checklist-wrap, .slide--poster .cc-steps-wrap,
.slide--poster .cc-quote-wrap, .slide--poster .cc-compare-wrap,
.slide--poster .cc-cardsgrid-wrap, .slide--poster .cc-fulltext,
.slide--poster .cc-cta-wrap {
  position: relative; z-index: 2; width: 100%; height: 100%; min-height: 0;
  overflow: hidden; padding: 220px 32px 40px; justify-content: center;
}
.slide--poster .cc-fulltext { display: flex; flex-direction: column; }
.slide--poster .cc-fulltext .cc-body { max-height: 470px; overflow: hidden; }
.slide--poster .cc-checklist, .slide--poster .cc-steps {
  max-height: 600px; overflow: hidden; gap: 24px; font-size: 36px;
}
.slide--poster .cc-check-item, .slide--poster .cc-step-item {
  font-size: 1em;
}
.slide--poster .cc-check-mark {
  border-radius: 0; background: var(--accent); color: var(--accent-contrast);
}
.slide--poster .cc-step-num { font-size: 1.28em; color: var(--primary-on-bg); }
.slide--poster .cc-compare, .slide--poster .cc-cardsgrid { max-height: 500px; overflow: hidden; }
.slide--poster .cc-compare { font-size: 30px; }
.slide--poster .cc-compare-label { font-size: .74em; }
.slide--poster .cc-compare-text { font-size: 1em; }
.slide--poster .cc-compare-col {
  border-radius: 0; border: 4px solid var(--text); background: transparent;
}
.slide--poster .cc-compare-col--b { border-color: var(--accent-on-bg); }
.slide--poster .cc-minicard {
  border-radius: 0; border: 4px solid var(--text); background: transparent;
}
.slide--poster .cc-cardsgrid { font-size: 27px; }
.slide--poster .cc-minicard-num { font-size: 1.04em; color: var(--primary-on-bg); }
.slide--poster .cc-minicard-text { font-size: 1em; }
.slide--poster .cc-cta-wrap,
.slide--poster .cc-cta-layout,
.slide--poster .cc-cta-copy { align-items: flex-start; text-align: left; }
.slide--poster .cc-cta-layout--with-image { grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr); gap: 42px; }
.slide--poster .cc-cta-layout--with-image .cc-headline--cta {
  font-size: 60px; line-height: 1.02; text-wrap: balance;
}
.slide--poster .cc-cta-media { height: 460px; border: 6px solid var(--text); border-radius: 0; box-shadow: none; }
.slide--poster .cc-cta-button {
  border-radius: 0;
}
.slide--poster .cc-pill { border-radius: 0; }
.slide--poster .cc-quote-wrap { justify-content: center; }
.slide--poster .cc-quote { max-height: 560px; overflow: hidden; padding-block: .07em; font-size: 64px; font-weight: 800; text-transform: uppercase; line-height: 1.08; }
.slide--poster .cc-quote-mark { color: var(--accent-on-bg); }
.slide--poster .cc-quote-author { font-size: 28px; text-transform: uppercase; letter-spacing: .08em; }

.slide--poster .cc-split {
  position: relative; z-index: 2; width: 100%; height: 100%; min-height: 0;
  overflow: hidden; padding-top: 220px;
  /* Keep the semantic copy first in the DOM, while the Poster composition
     presents the requested 50/50 order: media left, copy right. */
  direction: ltr; flex-direction: row-reverse;
}
.slide--poster .cc-split-text {
  flex: 0 0 50%; width: 50%;
  padding: 0 32px; min-width: 0; overflow: hidden;
}
.slide--poster .cc-split-media {
  position: relative; inset: auto; flex: 0 0 50%; width: 50%;
}

/* Photo-led source layout: full-bleed photo, dark scrim and type over image. */
.slide--poster.slide--type-hookimage .slide-inner { padding: 0; }
.slide--poster.slide--type-hookimage .cc-cover-scrim {
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 36%, rgba(0,0,0,.28) 62%, rgba(0,0,0,.72) 100%);
}
.slide--poster.slide--type-hookimage .cc-cover-content,
.slide--poster .cc-poster-photo-content {
  top: 50%; bottom: auto; left: 0; right: 0;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center;
  padding: 80px; max-height: 980px; overflow: hidden;
  text-align: center;
  /* Keep the source's full-bleed photography, but protect display copy on
     arbitrary user images without bringing back the old opaque card. */
  background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.68) 50%, rgba(0,0,0,.82) 100%);
}
.slide--poster.slide--type-hookimage .cc-poster-photo-content .cc-headline {
  color: #fff;
}
.slide--poster.slide--type-hookimage .cc-poster-photo-content .cc-kicker {
  justify-content: center; color: #fff;
}
.slide--poster.slide--type-hookimage .cc-poster-photo-content .cc-mark {
  color: inherit; -webkit-text-fill-color: currentColor;
}
.slide--poster.slide--type-hookimage .cc-poster-photo-content .cc-body {
  max-width: 780px; margin-left: auto; margin-right: auto; color: #fff;
}
.slide--poster.slide--type-hookimage .cc-headline--poster { font-size: 104px; max-height: 520px; overflow: hidden; }
.slide--poster.slide--type-hookimage .cc-poster-index--onphoto {
  top: auto; bottom: 40px; right: 48px; color: rgba(255,255,255,.4);
}
.slide--poster .cc-imagefocus-caption--poster {
  left: 0; right: 0; bottom: 0; padding: 0 80px 90px;
  background: none;
}

/* ================================================================
   STYLE: cards — soft, whitespace-forward, product/SaaS tone
   ================================================================ */

.slide--cards { background: var(--bg); }
.slide--cards .slide-inner { padding: 0; }
.slide--cards .cc-headline--card { font-size: 72px; }
.slide--cards .cc-headline--hero { font-size: 88px; }
.slide--cards .cc-headline--split { font-size: 52px; }
.slide--cards .cc-headline--text { font-size: 52px; }
.slide--cards .cc-headline--cta { font-size: 66px; }
.slide--cards .cc-body { font-size: 30px; }
.slide--cards .cc-kicker-line { background: var(--accent-on-bg); }
.slide--cards .cc-stat { margin-top: 28px; display: flex; flex-direction: column; }
.slide--cards .cc-stat-value {
  font-family: var(--font-head); font-size: 112px; font-weight: 800; line-height: 1;
  color: var(--accent-on-bg);
}
.slide--cards .cc-stat-label {
  margin-top: 10px; font-family: var(--font-body); font-size: 24px; font-weight: 600;
  color: var(--text-muted);
}

.slide--cards .cc-card {
  background: color-mix(in oklab, var(--text) 4%, var(--bg));
  border-radius: var(--radius); padding: 56px; margin-top: 24px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.18);
}
.slide--cards .cc-pill { box-shadow: 0 14px 30px -12px color-mix(in oklab, var(--accent) 60%, transparent); }
.slide--cards .cc-checklist-wrap, .slide--cards .cc-steps-wrap,
.slide--cards .cc-quote-wrap, .slide--cards .cc-compare-wrap,
.slide--cards .cc-cardsgrid-wrap, .slide--cards .cc-fulltext,
.slide--cards .cc-cta-wrap { padding: 190px 88px 130px; }
.slide--cards .cc-check-item, .slide--cards .cc-step-item {
  background: color-mix(in oklab, var(--text) 4%, var(--bg));
  border-radius: var(--radius); padding: 26px 30px;
}
.slide--cards .cc-quote-wrap { align-items: center; text-align: center; }
.slide--cards .cc-quote { background: color-mix(in oklab, var(--text) 4%, var(--bg)); border-radius: var(--radius); padding: 56px; }
.slide--cards .cc-minicard { box-shadow: 0 24px 50px -28px rgba(0,0,0,0.16); }
.slide--cards .cc-compare-col { box-shadow: 0 24px 50px -28px rgba(0,0,0,0.14); }
.slide--cards .cc-split-media { border-radius: 0 var(--radius) var(--radius) 0; margin: 40px 40px 40px 0; }
.slide--cards .cc-split-text { padding-left: 88px; }
.slide--cards .cc-cta-button, .slide--cards .cc-pill { box-shadow: 0 20px 40px -18px color-mix(in oklab, var(--accent) 55%, transparent); }
.slide--cards .cc-cta-media { box-shadow: 0 24px 50px -28px rgba(0,0,0,.28); }

/* ---- fixes & editorial folio (turn 2) ---- */
.slide--cover .cc-fulltext { height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 200px; padding-bottom: 140px; }
/* cards je jedini stil koji je text slajd lepio za vrh — isti tretman kao cover */
.slide--cards .cc-fulltext { height: 100%; display: flex; flex-direction: column; justify-content: center; }

.cc-editorial-index {
  position: absolute; bottom: 48px; right: 80px; z-index: 0;
  font-family: var(--font-head); font-weight: 700; line-height: 0.72;
  font-size: 360px; letter-spacing: -0.05em; pointer-events: none;
  color: color-mix(in oklab, var(--primary) 13%, var(--bg));
  font-variant-numeric: tabular-nums;
}
.slide--editorial .slide-inner > *:not(.cc-editorial-index):not(.cc-chrome) { position: relative; z-index: 1; }

/* ================================================================
   STYLE: linen — Linen & Stone editorial (home-decor carousels)
   Warm-neutral, light tracked serif, script accents, soft texture.
   Brand still drives --bg/--text/--accent; neutrals derive via mix.
   ================================================================ */
.slide--linen {
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(90deg,#0000 0 3px,#6b5f4d0a 3px 4px),
    repeating-linear-gradient(0deg,#0000 0 3px,#6b5f4d08 3px 4px);
}
.slide--linen .cc-chrome { display: none; }
.slide--linen .slide-inner { padding: 0; }
.slide--linen .slide-inner > *:not(.cc-linen-blob):not(.cc-linen-tag):not(.cc-linen-hand):not(.cc-linen-arrow) { position: relative; z-index: 1; }

.slide--linen .cc-editorial-hook,
.slide--linen .cc-editorial-hero,
.slide--linen .cc-fulltext,
.slide--linen .cc-checklist-wrap,
.slide--linen .cc-steps-wrap,
.slide--linen .cc-quote-wrap,
.slide--linen .cc-compare-wrap,
.slide--linen .cc-cardsgrid-wrap,
.slide--linen .cc-cta-wrap,
.slide--linen .cc-center-stack {
  height: 100%; display: flex; flex-direction: column; justify-content: center;
  padding: 300px 96px 200px; max-width: none; align-items: flex-start;
}

.slide--linen .cc-headline {
  font-family: var(--font-head); font-weight: 300; text-transform: lowercase;
  letter-spacing: 0.08em; line-height: 1.14; color: var(--text);
}
.slide--linen .cc-headline--editorial,
.slide--linen .cc-headline--hero,
.slide--linen .cc-headline--card { font-size: 96px; }
.slide--linen .cc-headline--split,
.slide--linen .cc-headline--text,
.slide--linen .cc-headline--caption { font-size: 68px; }
.slide--linen .cc-headline--cta { font-size: 80px; }
.slide--linen .cc-headline::after {
  content: ""; display: block; width: 58%; height: 1px;
  background: var(--text-muted); margin-top: 34px; opacity: 0.85;
}

.slide--linen .cc-kicker {
  font-family: var(--font-body); font-weight: 300; font-size: 22px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-muted);
}
.slide--linen .cc-kicker-line { display: none; }

.slide--linen .cc-body {
  font-family: var(--font-body); font-weight: 300; line-height: 1.7;
  letter-spacing: 0.02em; color: var(--text-muted); max-width: 34ch; font-size: 32px;
}
.slide--linen .cc-stat { margin-top: 32px; display: flex; flex-direction: column; }
.slide--linen .cc-stat-value {
  font-family: var(--font-head); font-size: 112px; font-weight: 300; line-height: 1;
  letter-spacing: .02em; color: var(--primary-on-bg);
}
.slide--linen .cc-stat-label {
  margin-top: 10px; font-family: var(--font-body); font-size: 20px; font-weight: 300;
  line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted);
}

/* injected linen chrome (deco) */
.cc-linen-blob {
  position: absolute; top: -110px; right: -110px; width: 460px; height: 460px;
  background: color-mix(in oklab, var(--text) 16%, var(--bg)); opacity: 0.55; z-index: 0;
  border-radius: 47% 53% 44% 56% / 55% 48% 52% 45%; pointer-events: none;
}
.cc-linen-tag { position: absolute; top: 56px; left: 64px; z-index: 3; line-height: 1; }
.cc-linen-eyebrow { display: block; font-family: 'Parisienne', cursive; font-size: 42px; color: var(--text-muted); }
.cc-linen-num { display: block; font-family: var(--font-head); font-weight: 300; font-size: 90px; letter-spacing: 0.02em; color: var(--text); margin-top: 2px; }
.cc-linen-hand { position: absolute; left: 64px; bottom: 54px; z-index: 3; font-family: 'Parisienne', cursive; font-size: 38px; line-height: 1; color: var(--text-muted); }
.cc-linen-arrow { position: absolute; right: 64px; bottom: 68px; z-index: 3; }
.cc-linen-num { color: var(--primary-on-bg); }
.cc-linen-line { display: block; width: 96px; height: 1px; background: var(--accent-on-bg); position: relative; }
.cc-linen-line::after { content: ""; position: absolute; right: 0; top: -4px; width: 10px; height: 10px; border-top: 1px solid var(--accent-on-bg); border-right: 1px solid var(--accent-on-bg); transform: rotate(45deg); }
.slide--linen.slide--fmt-single .cc-headline::after {
  /* Single hides the carousel next-arrow; reuse its accent role on the
     editorial divider so changing Secondary still has a visible result. */
  background: var(--accent-on-bg);
}

/* lists / cards reskin */
.slide--linen .cc-check-item, .slide--linen .cc-step-item {
  background: transparent; border-radius: 0; padding: 0; font-family: var(--font-body);
  font-weight: 300; font-size: 30px; color: var(--text);
}
.slide--linen .cc-checklist, .slide--linen .cc-steps { gap: 26px; }
.slide--linen .cc-check-mark { background: transparent; color: var(--accent-on-bg); border: 1px solid var(--text-muted); width: 40px; height: 40px; min-width: 40px; font-size: 20px; }
.slide--linen .cc-step-num { font-family: var(--font-head); font-weight: 300; color: var(--text-muted); }
.slide--linen .cc-minicard { background: color-mix(in oklab, var(--text) 6%, var(--bg)); border-radius: var(--radius); border: 1px solid #0000000d; box-shadow: none; }
.slide--linen .cc-minicard-num { font-family: var(--font-head); font-weight: 300; color: var(--text-muted); }
.slide--linen .cc-minicard-text { font-family: var(--font-body); font-weight: 300; }
.slide--linen .cc-compare-col { background: color-mix(in oklab, var(--text) 6%, var(--bg)); border: 1px solid #0000000d; box-shadow: none; }
.slide--linen .cc-compare-col--b { background: color-mix(in oklab, var(--accent) 16%, var(--bg)); }
.slide--linen .cc-compare-label { color: var(--text); font-weight: 400; }
.slide--linen .cc-compare-text { font-family: var(--font-body); font-weight: 300; }
.slide--linen .cc-compare-vs { font-family: var(--font-head); font-weight: 300; }

/* quote */
.slide--linen .cc-quote-wrap { align-items: flex-start; text-align: left; }
.slide--linen .cc-quote { font-family: var(--font-head); font-weight: 300; text-transform: lowercase; letter-spacing: 0.05em; background: transparent; padding: 0; font-size: 66px; line-height: 1.22; }
.slide--linen .cc-quote-mark { font-family: 'Parisienne', cursive; color: var(--text-muted); font-size: 120px; }
.slide--linen .cc-quote-author { font-family: 'Parisienne', cursive; color: var(--text-muted); font-size: 42px; }

/* cta — centered, ink pill */
.slide--linen .cc-cta-wrap { align-items: center; text-align: center; }
.slide--linen .cc-headline--cta { text-align: center; }
.slide--linen .cc-headline--cta::after { margin-left: auto; margin-right: auto; }
.slide--linen .cc-cta-button, .slide--linen .cc-pill {
  background: var(--accent); color: var(--accent-contrast); border-radius: 999px; box-shadow: none;
  font-family: var(--font-body); font-weight: 300; letter-spacing: 0.24em; text-transform: uppercase; font-size: 22px;
}
.slide--linen .cc-cta-layout--with-image .cc-headline--cta {
  font-size: 72px; font-weight: 400; letter-spacing: .045em; text-align: left; text-wrap: balance;
}
.slide--linen .cc-cta-layout--with-image .cc-headline--cta::after { margin-left: 0; margin-right: 0; }
.slide--linen .cc-cta-layout--with-image .cc-cta-button { font-size: 24px; letter-spacing: .16em; }
.slide--linen .cc-cta-media { height: 470px; border: 8px solid var(--bg); box-shadow: 0 8px 30px #0000001a; }

/* photo treatments: soft wells + paper border, gentle radius */
.slide--linen .cc-cover-media, .slide--linen .cc-imagefocus-media, .slide--linen .cc-hookimage-media { border-radius: var(--radius); }
.slide--linen .cc-hookimage-mediaband { flex: 0 0 620px; margin: 56px 64px 0; border: 8px solid var(--bg); box-shadow: 0 8px 30px #0000001a; overflow: hidden; }
.slide--linen .cc-hookimage-mediaband::after { display: none; }
.slide--linen .cc-hookimage-editorial .cc-hookimage-text { padding: 40px 96px 200px; justify-content: flex-start; }
.slide--linen .cc-hookimage-text .cc-kicker { margin-bottom: 20px; }
.slide--linen .cc-hookimage-text .cc-headline { font-size: 76px; letter-spacing: 0.045em; line-height: 1.1; }
.slide--linen .cc-hookimage-text .cc-headline::after { margin-top: 24px; }
.slide--linen .cc-hookimage-text .cc-body { margin-top: 18px; font-size: 29px; line-height: 1.55; }
.slide--linen .cc-imagefocus-caption { padding: 0 96px 180px; }
.slide--linen .cc-split-media { margin: 40px 40px 40px 0; border: 8px solid var(--bg); }
.slide--linen .cc-fallback-mark { font-family: var(--font-head); font-weight: 300; color: color-mix(in oklab, var(--text-muted) 55%, var(--bg)); }
.slide--linen .cc-cover-media--fallback, .slide--linen .cc-hookimage-media--fallback, .slide--linen .cc-imagefocus-media--fallback {
  background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 20%, var(--bg)), var(--bg));
}



/* ================================================================
   TYPE: hookimage — hook + guaranteed image (12th type)
   ================================================================ */

.cc-hookimage-editorial, .cc-hookimage-cards { height: 100%; display: flex; flex-direction: column; }
.cc-hookimage-media { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cc-hookimage-media--fallback {
  background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 22%, var(--bg)), var(--bg));
  display: flex; align-items: center; justify-content: center;
}
.cc-hookimage-mediaband, .cc-hookimage-mediacard { position: relative; overflow: hidden; }

/* editorial: top image band + text block below */
.slide--editorial.slide--type-hookimage .slide-inner { padding: 0; }
.slide--editorial .cc-hookimage-mediaband { flex: 0 0 640px; }
.slide--editorial .cc-hookimage-mediaband::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0) 38%);
}
.slide--editorial .cc-hookimage-text { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px 96px 130px; }

/* cards: rounded media card + text below */
.slide--cards .cc-hookimage-cards { padding: 170px 72px 110px; gap: 40px; }
.slide--cards .cc-hookimage-mediacard { flex: 0 0 560px; border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.25); }
.slide--cards .cc-hookimage-text { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 16px; }

/* poster: full-bleed photo inside the brutalist border */
.slide--poster.slide--type-hookimage .slide-inner { padding: 0; }
.slide--poster .cc-poster-index--onphoto { z-index: 4; }
/* hookimage text block: bounded + group auto-fit (single-post safe) */
.slide--type-hookimage .cc-hookimage-text { min-height: 0; overflow: hidden; font-size: 40px; }
.slide--type-hookimage .cc-hookimage-text .cc-headline { font-size: 2.2em; }
.slide--type-hookimage .cc-hookimage-text .cc-body { font-size: 0.8em; margin-top: 0.5em; }


/* ================================================================
   STYLE: twittex — social-post ("tweet") card
   White surface floating on a soft, faintly accent-tinted wash.
   One accent does links / verified / action; all else Ink or Muted.
   Every surface derives from brand tokens (see normalizeTokens).
   ================================================================ */
.slide--twittex {
  background:
    radial-gradient(120% 90% at 85% -12%, color-mix(in oklab, var(--surface) 80%, transparent) 0%, transparent 46%),
    linear-gradient(158deg, var(--wash) 0%, var(--bg) 62%, var(--bg) 100%);
}
.slide--twittex .cc-chrome { display: none; }
.slide--twittex .slide-inner {
  padding: 72px; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.slide--twittex, .slide--twittex * { font-family: var(--font-body); }

.cc-tx-card {
  width: 100%; max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: 40px;
  box-shadow: 0 2px 4px rgba(15,20,25,0.06), 0 34px 80px -20px rgba(15,20,25,0.22);
  padding: 60px;
  overflow: hidden;
}

/* author row */
.cc-tx-head { display: flex; align-items: center; gap: 24px; flex: none; margin-bottom: 34px; }
.cc-tx-avatar {
  width: 96px; height: 96px; border-radius: 999px; flex: none; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 34%, var(--surface)), color-mix(in oklab, var(--accent) 12%, var(--surface)));
  display: flex; align-items: center; justify-content: center;
}
.cc-tx-avatar-fallback { font-size: 42px; font-weight: 800; color: var(--primary-on-bg); }
.cc-tx-id { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.cc-tx-name {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 42px; letter-spacing: -0.01em; color: var(--text);
  min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere;
}
.cc-tx-verified { width: 44px; height: 44px; flex: none; color: var(--primary-on-bg); }
.cc-tx-handle { font-size: 32px; color: var(--text-muted); margin-top: 4px; }
.cc-tx-more { margin-left: auto; align-self: flex-start; color: var(--text-muted); font-size: 44px; letter-spacing: 2px; line-height: 0.5; }

/* post body — the largest type on the card */
.cc-tx-body {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 22px; margin-bottom: 30px;
  font-size: 40px;
}
.cc-tx-kicker { color: var(--primary-on-bg); font-weight: 600; font-size: 30px; letter-spacing: 0.01em; }
.cc-tx-text { margin: 0; font-size: 1.4em; font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); }
.cc-tx-text--sub { font-size: 1em; color: var(--text); }
.cc-tx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5em; font-size: 1em; color: var(--text); }
.cc-tx-list li { display: flex; align-items: flex-start; gap: 20px; line-height: 1.3; }
.cc-tx-bullet { flex: none; color: var(--accent-on-bg); font-weight: 700; min-width: 1.2em; }
.cc-tx-bullet--num {
  background: color-mix(in oklab, var(--accent) 16%, var(--surface)); color: var(--accent-on-bg);
  width: 1.5em; height: 1.5em; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 0.82em; min-width: 0; font-weight: 800;
}
.cc-tx-compare { display: flex; flex-direction: column; gap: 0.45em; font-size: 1em; color: var(--text); }
.cc-tx-compare-row { display: flex; align-items: flex-start; gap: 18px; line-height: 1.3; }
.cc-tx-compare-tag { flex: none; font-size: 0.6em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-on-bg); background: color-mix(in oklab, var(--accent) 14%, var(--surface)); border-radius: 999px; padding: 0.25em 0.6em; margin-top: 0.35em; }
.cc-tx-stat { display: flex; align-items: baseline; gap: 20px; margin-top: 0; }
.cc-tx-stat-v { font-size: 2.4em; font-weight: 800; letter-spacing: -0.03em; line-height: 1.18; color: var(--text); }
.cc-tx-stat-l { font-size: 0.85em; color: var(--text-muted); }
.cc-tx-attr { font-size: 34px; color: var(--text-muted); margin-top: 4px; }
.cc-tx-action-btn {
  align-self: flex-start; background: var(--accent); color: var(--accent-contrast);
  border-radius: 999px; padding: 0.6em 1.25em; font-weight: 700; font-size: 0.85em; margin-top: 0.3em;
}

/* media */
.cc-tx-media {
  flex: 0 1 auto; width: 100%; aspect-ratio: 16 / 10; max-height: 30%; border-radius: 28px;
  background-size: cover; background-position: center;
  background-color: var(--surface-muted); border: 1px solid var(--surface-line);
  margin-bottom: 30px;
}
.cc-tx-card--dense .cc-tx-media { max-height: 18%; }

/* meta + actions */
.cc-tx-meta {
  flex: none; color: var(--text-muted); font-size: 30px; font-variant-numeric: tabular-nums;
  padding-bottom: 28px; border-bottom: 1px solid var(--surface-line); margin-bottom: 26px;
}
.cc-tx-actions { flex: none; display: flex; align-items: center; gap: 72px; color: var(--text-muted); }
.cc-tx-ic { width: 46px; height: 46px; flex: none; }
.cc-tx-actions-sp { flex: 1 1 auto; }

/* ================================================================
   STYLE: prism — gradient type, technical mono details and hairlines.
   ================================================================ */
.slide--prism {
  --px-line: color-mix(in oklab, var(--text) 12%, transparent);
  --px-mono: 'Space Mono', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', ui-monospace, monospace;
  --px-grad: linear-gradient(118deg, var(--text) 0%, var(--text) 34%, var(--accent-on-bg) 100%);
  background: var(--bg);
}
.slide--prism .slide-inner {
  padding: 168px 92px 176px;
  display: flex; flex-direction: column; justify-content: center;
}
.slide--prism .slide-inner > *:not(.px-glow):not(.px-foot):not(.cc-chrome) { position: relative; z-index: 1; }
.slide--prism .cc-chrome { top: 74px; left: 92px; right: 92px; }
.slide--prism .cc-handle, .slide--prism .cc-counter {
  font-family: var(--px-mono); font-size: 22px; font-weight: 400;
  letter-spacing: .05em; color: var(--text-muted);
}
.px-glow {
  position: absolute; width: 1120px; height: 1120px; bottom: -300px; right: -280px;
  border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in oklab, var(--accent) 34%, transparent) 0%,
    color-mix(in oklab, var(--accent) 20%, transparent) 34%,
    color-mix(in oklab, var(--accent) 9%, transparent) 56%, transparent 74%);
}
.px-foot { position: absolute; left: 92px; right: 92px; bottom: 74px; z-index: 3; }
.px-bar { height: 4px; border-radius: 3px; background: var(--px-line); overflow: hidden; }
.px-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--text), var(--accent-on-bg)); }
.slide--prism .cc-kicker {
  font-family: var(--px-mono); font-size: 23px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted);
  gap: 18px; margin-bottom: 30px;
}
.slide--prism .cc-kicker-line { width: 60px; height: 2px; background: var(--px-line); border-radius: 0; }
.slide--prism .cc-headline {
  font-family: var(--font-head); font-weight: 700; letter-spacing: -.03em; line-height: 1.04;
  padding-block: .12em;
  background-image: var(--px-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.slide--prism .cc-mark { background: none; color: var(--accent-on-bg); -webkit-text-fill-color: var(--accent-on-bg); }
.slide--prism .cc-headline--editorial, .slide--prism .cc-headline--xl { font-size: 108px; line-height: 1; }
.slide--prism .cc-headline--hero { font-size: 132px; line-height: .98; }
.slide--prism .cc-headline--card, .slide--prism .cc-headline--text { font-size: 66px; }
.slide--prism .cc-headline--split, .slide--prism .cc-headline--caption { font-size: 48px; line-height: 1.08; }
.slide--prism .cc-headline--cta { font-size: 108px; text-align: center; }
.slide--prism .cc-body { font-family: var(--font-body); font-weight: 400; color: var(--text-muted); line-height: 1.55; font-size: 33px; margin-top: 30px; }
.slide--prism .cc-editorial-hook,
.slide--prism .cc-editorial-hero,
.slide--prism .cc-fulltext,
.slide--prism .cc-checklist-wrap,
.slide--prism .cc-steps-wrap,
.slide--prism .cc-quote-wrap,
.slide--prism .cc-compare-wrap,
.slide--prism .cc-cardsgrid-wrap,
.slide--prism .cc-cta-wrap,
.slide--prism .cc-center-stack { height: auto; padding: 0; max-width: none; display: block; }
.slide--prism.slide--type-hero .slide-inner,
.slide--prism.slide--type-cta .slide-inner { align-items: center; text-align: center; }
.slide--prism .cc-cta-wrap { align-items: center; text-align: center; }
.slide--prism .cc-stat { margin-top: 30px; display: flex; flex-direction: column; }
.slide--prism .cc-stat-value {
  font-family: var(--font-head); font-weight: 700; font-size: 132px; line-height: 1;
  padding-block: .12em;
  background-image: var(--px-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.slide--prism .cc-stat-label { font-family: var(--px-mono); font-size: 23px; color: var(--text-muted); margin-top: 12px; }
.slide--prism .cc-checklist, .slide--prism .cc-steps { margin-top: 30px; gap: 0; }
.slide--prism .cc-check-item, .slide--prism .cc-step-item {
  gap: 26px; font-size: 35px; color: var(--text); line-height: 1.3;
  padding: 28px 0; border-bottom: 2px solid var(--px-line);
}
.slide--prism .cc-check-item:first-child, .slide--prism .cc-step-item:first-child { border-top: 2px solid var(--px-line); }
.slide--prism .cc-check-item { align-items: center; font-weight: 500; }
.slide--prism .cc-check-mark { width: 46px; height: 46px; min-width: 46px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); font-size: 24px; }
.slide--prism .cc-step-item { gap: 30px; align-items: baseline; font-size: 32px; padding: 30px 0; }
.slide--prism .cc-step-num { font-family: var(--px-mono); font-weight: 700; font-size: 30px; color: var(--accent-on-bg); min-width: auto; }
.slide--prism .cc-step-text { color: var(--text); }
.slide--prism .cc-quote-wrap { align-items: flex-start; }
.slide--prism .cc-quote-mark {
  font-family: var(--font-head); font-weight: 700; font-size: 200px; line-height: .7; height: 110px; margin-bottom: 0;
  background-image: var(--px-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.slide--prism .cc-quote { font-family: var(--font-head); font-weight: 600; font-size: 72px; line-height: 1.14; letter-spacing: -.025em; color: var(--text); background: none; padding-block: .12em; }
.slide--prism .cc-quote-author { font-family: var(--px-mono); font-size: 26px; color: var(--text-muted); font-weight: 400; margin-top: 40px; }
.slide--prism .cc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 40px; border-top: 2px solid var(--px-line); align-items: stretch; }
.slide--prism .cc-compare-vs { display: none; }
.slide--prism .cc-compare-col { background: none; border: 0; border-radius: 0; padding: 46px 44px; }
.slide--prism .cc-compare-col--b { border-left: 2px solid var(--px-line); }
.slide--prism .cc-compare-label { font-family: var(--px-mono); font-size: 24px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 400; margin-bottom: 28px; }
.slide--prism .cc-compare-col--b .cc-compare-label { color: var(--accent-on-bg); }
.slide--prism .cc-compare-text { font-size: 29px; font-weight: 500; color: var(--text); line-height: 1.3; }
.slide--prism .cc-compare-col--a .cc-compare-text { color: var(--text-muted); }
.slide--prism .cc-cardsgrid { grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 40px; }
.slide--prism .cc-minicard { background: var(--surface); border: 2px solid var(--px-line); border-radius: var(--radius); padding: 40px 36px; box-shadow: none; }
.slide--prism .cc-minicard-num { font-family: var(--px-mono); font-size: 24px; font-weight: 700; color: var(--accent-on-bg); margin-bottom: 8px; }
.slide--prism .cc-minicard-text { font-family: var(--font-head); font-weight: 600; font-size: 34px; color: var(--text); }
.slide--prism .cc-cta-button { background: none; color: var(--accent-on-bg); font-family: var(--px-mono); font-size: 28px; font-weight: 700; padding: 0; margin-top: 20px; border-radius: 0; }
.slide--prism .cc-cta-layout--with-image .cc-headline--cta { font-size: 76px; text-align: left; }
.slide--prism .cc-cta-media { height: 470px; border: 2px solid var(--px-line); box-shadow: none; }
.slide--prism.slide--type-image .slide-inner { padding: 0; display: block; }
.slide--prism .cc-imagefocus-media { inset: 168px 92px 300px; border: 2px solid var(--px-line); border-radius: var(--radius); }
.slide--prism .cc-imagefocus-caption { padding: 0 92px 176px; }
.slide--prism .cc-split { height: auto; align-items: center; gap: 48px; padding: 0; }
.slide--prism .cc-split-text { padding: 0 48px 0 0; }
.slide--prism .cc-split-media { position: relative; flex: 1; height: 560px; border: 2px solid var(--px-line); border-radius: var(--radius); }
.slide--prism.slide--type-hookimage .slide-inner { padding: 0; display: block; }
.slide--prism .cc-hookimage-mediaband { flex: 0 0 620px; }
.slide--prism .cc-hookimage-text { padding: 60px 92px 176px; }
.slide--prism .cc-imagefocus-media--fallback,
.slide--prism .cc-split-media--fallback,
.slide--prism .cc-cover-media--fallback,
.slide--prism .cc-hookimage-media--fallback {
  background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--text) 6%, transparent) 0 14px, color-mix(in oklab, var(--text) 2%, transparent) 14px 28px), var(--surface-muted);
}
.slide--prism .cc-fallback-mark { font-family: var(--px-mono); font-size: 30px; font-weight: 400; color: var(--text-muted); }

/* ================================================================
   STYLE: popcard — rounded creator cards and compact pill navigation.
   ================================================================ */
.slide--popcard {
  --pc-surface: var(--surface);
  --pc-mono: 'JetBrains Mono', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', ui-monospace, monospace;
  --pc-dot-a: #e8563f; --pc-dot-b: #4b6fe8; --pc-dot-c: #f2c14e;
  background: var(--bg);
}
.slide--popcard .slide-inner {
  padding: 150px 88px 190px;
  display: flex; flex-direction: column; justify-content: center;
}
.slide--popcard .cc-chrome { top: 76px; left: 0; right: 0; justify-content: center; }
.slide--popcard .cc-chrome-brand { justify-content: center; }
.slide--popcard .cc-counter { display: none; }
.slide--popcard .cc-handle { font-family: var(--font-body); font-weight: 700; font-size: 26px; color: var(--text-muted); }
.pc-nav {
  position: absolute; bottom: 84px; right: 88px; z-index: 4;
  display: grid; place-items: center; min-width: 74px; min-height: 68px;
  background: var(--text); color: var(--bg);
  font-family: var(--font-head); font-weight: 800; font-size: 34px;
  padding: 12px 24px; border-radius: 999px;
  box-shadow: 5px 6px 0 color-mix(in oklab, var(--text) 20%, transparent);
}
.slide--popcard .cc-kicker { font-family: var(--font-body); font-weight: 700; font-size: 24px; text-transform: uppercase; letter-spacing: .16em; color: var(--text-muted); gap: 0; margin-bottom: 24px; }
.slide--popcard .cc-kicker-line { display: none; }
.slide--popcard .cc-headline { font-family: var(--font-head); font-weight: 900; color: var(--text); line-height: 1.05; letter-spacing: -.025em; padding-block: .12em; }
.slide--popcard .cc-headline--editorial, .slide--popcard .cc-headline--xl { font-size: 104px; line-height: 1.08; }
.slide--popcard .cc-headline--hero { font-size: 128px; line-height: 1.08; }
.slide--popcard .cc-headline--card, .slide--popcard .cc-headline--text { font-size: 68px; }
.slide--popcard .cc-headline--split, .slide--popcard .cc-headline--caption { font-size: 52px; }
.slide--popcard .cc-headline--cta { font-size: 96px; text-align: center; }
.slide--popcard .cc-mark {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: center;
  background-size: 100% .9em; color: var(--accent-contrast); padding: 0 .12em; border-radius: 8px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.slide--popcard .cc-body { font-family: var(--font-body); font-weight: 400; color: var(--text-muted); line-height: 1.5; font-size: 34px; margin-top: 30px; }
.slide--popcard .cc-editorial-hook,
.slide--popcard .cc-editorial-hero,
.slide--popcard .cc-fulltext,
.slide--popcard .cc-checklist-wrap,
.slide--popcard .cc-steps-wrap,
.slide--popcard .cc-quote-wrap,
.slide--popcard .cc-compare-wrap,
.slide--popcard .cc-cardsgrid-wrap,
.slide--popcard .cc-cta-wrap,
.slide--popcard .cc-center-stack { height: auto; padding: 0; max-width: none; display: block; }
.slide--popcard.slide--type-hero .slide-inner,
.slide--popcard.slide--type-cta .slide-inner { align-items: center; text-align: center; }
.slide--popcard .cc-cta-wrap { align-items: center; text-align: center; }
.slide--popcard .cc-stat { margin-top: 30px; display: flex; flex-direction: column; }
.slide--popcard .cc-stat-value { font-family: var(--font-head); font-weight: 900; font-size: 132px; line-height: 1; color: var(--text); padding-block: .12em; }
.slide--popcard .cc-stat-label { font-size: 26px; font-weight: 700; color: var(--text-muted); margin-top: 12px; }
.slide--popcard .cc-fulltext {
  position: relative; background: var(--pc-surface); border: 1px solid var(--surface-line); border-radius: var(--radius);
  box-shadow: 10px 12px 0 color-mix(in oklab, var(--text) 9%, transparent), 0 30px 48px color-mix(in oklab, var(--text) 16%, transparent);
  padding: 82px 60px 66px;
}
.slide--popcard .cc-fulltext::before {
  content: ""; position: absolute; top: 34px; right: 40px;
  width: 24px; height: 24px; border-radius: 7px; background: var(--pc-dot-c);
  box-shadow: -36px 0 0 var(--pc-dot-b), -72px 0 0 var(--pc-dot-a);
}
.slide--popcard .cc-fulltext .cc-headline--text { color: var(--text); }
.slide--popcard .cc-checklist { margin-top: 40px; gap: 30px; }
.slide--popcard .cc-check-item { align-items: flex-start; gap: 26px; font-size: 38px; font-weight: 600; color: var(--text); line-height: 1.25; }
.slide--popcard .cc-check-mark { width: 52px; height: 52px; min-width: 52px; border-radius: 14px; background: var(--accent); color: var(--accent-contrast); font-weight: 900; font-size: 32px; margin-top: 2px; }
.slide--popcard .cc-steps { margin-top: 40px; gap: 34px; }
.slide--popcard .cc-step-item { gap: 30px; align-items: flex-start; font-size: 30px; }
.slide--popcard .cc-step-num { width: 84px; height: 84px; min-width: 84px; border-radius: 18px; background: var(--text); color: var(--bg); font-family: var(--font-head); font-weight: 900; font-size: 40px; display: flex; align-items: center; justify-content: center; }
.slide--popcard .cc-step-text { color: var(--text); font-weight: 600; padding-top: 8px; }
.slide--popcard .cc-quote-wrap { align-items: flex-start; }
.slide--popcard .cc-quote-mark { font-family: var(--font-head); font-weight: 900; font-size: 200px; line-height: .7; height: 120px; color: var(--accent-on-bg); margin-bottom: 0; }
.slide--popcard .cc-quote { font-family: var(--font-head); font-weight: 800; font-size: 76px; line-height: 1.12; letter-spacing: -.02em; color: var(--text); background: none; padding-block: .12em; }
.slide--popcard .cc-quote-author { font-size: 30px; font-weight: 700; color: var(--text-muted); margin-top: 40px; }
.slide--popcard .cc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; }
.slide--popcard .cc-compare-vs { display: none; }
.slide--popcard .cc-compare-col { border-radius: 26px; padding: 46px 40px; }
.slide--popcard .cc-compare-col--a { background: var(--pc-surface); border: 1px solid var(--surface-line); box-shadow: 8px 10px 0 color-mix(in oklab, var(--text) 8%, transparent); }
.slide--popcard .cc-compare-col--b { background: var(--accent); }
.slide--popcard .cc-compare-label { font-family: var(--font-head); font-weight: 900; font-size: 34px; color: var(--text); margin-bottom: 26px; text-transform: none; letter-spacing: 0; }
.slide--popcard .cc-compare-text { font-size: 30px; font-weight: 600; color: var(--text); line-height: 1.3; }
.slide--popcard .cc-compare-col--a .cc-compare-text { color: var(--text-muted); }
.slide--popcard .cc-compare-col--b .cc-compare-label,
.slide--popcard .cc-compare-col--b .cc-compare-text { color: var(--accent-contrast); }
.slide--popcard .cc-cardsgrid { grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 40px; }
.slide--popcard .cc-minicard { background: var(--pc-surface); border: 1px solid var(--surface-line); border-radius: 24px; padding: 40px 36px; box-shadow: 6px 8px 0 color-mix(in oklab, var(--text) 7%, transparent); }
.slide--popcard .cc-minicard-num { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 16px; background: var(--accent); color: var(--accent-contrast); font-family: var(--font-head); font-weight: 900; font-size: 30px; margin-bottom: 16px; }
.slide--popcard .cc-minicard-text { font-family: var(--font-head); font-weight: 800; font-size: 36px; color: var(--text); }
.slide--popcard .cc-cta-button { background: var(--text); color: var(--bg); font-family: var(--font-head); font-weight: 800; font-size: 27px; padding: 20px 40px; border-radius: 999px; box-shadow: 5px 6px 0 color-mix(in oklab, var(--text) 20%, transparent); margin-top: 40px; }
.slide--popcard .cc-cta-layout--with-image .cc-headline--cta { font-size: 72px; text-align: left; }
.slide--popcard .cc-cta-media { height: 500px; border: 1px solid var(--surface-line); box-shadow: 10px 12px 0 color-mix(in oklab, var(--text) 9%, transparent), 0 30px 48px color-mix(in oklab, var(--text) 16%, transparent); }
.slide--popcard.slide--type-image .slide-inner { padding: 0; display: block; }
.slide--popcard .cc-imagefocus-media { inset: 150px 88px 320px; border-radius: var(--radius); box-shadow: 10px 12px 0 color-mix(in oklab, var(--text) 9%, transparent), 0 30px 48px color-mix(in oklab, var(--text) 16%, transparent); }
.slide--popcard .cc-imagefocus-caption { padding: 0 88px 190px; }
.slide--popcard .cc-split { height: auto; align-items: center; gap: 50px; padding: 0; }
.slide--popcard .cc-split-text { padding: 0; }
.slide--popcard .cc-split-media { position: relative; flex: 1; height: 540px; border-radius: var(--radius); box-shadow: 10px 12px 0 color-mix(in oklab, var(--text) 9%, transparent), 0 30px 48px color-mix(in oklab, var(--text) 16%, transparent); }
.slide--popcard.slide--type-hookimage .slide-inner { padding: 0; display: block; }
.slide--popcard .cc-hookimage-mediaband { flex: 0 0 620px; }
.slide--popcard .cc-hookimage-text { padding: 60px 88px 150px; }
.slide--popcard .cc-imagefocus-media--fallback,
.slide--popcard .cc-split-media--fallback,
.slide--popcard .cc-cover-media--fallback,
.slide--popcard .cc-hookimage-media--fallback {
  background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--text) 7%, transparent) 0 14px, color-mix(in oklab, var(--text) 2.5%, transparent) 14px 28px), var(--surface-muted);
}
.slide--popcard .cc-fallback-mark { font-family: var(--pc-mono); font-size: 26px; font-weight: 500; color: var(--text-muted); }
.slide--fmt-single .px-foot, .slide--fmt-single .pc-nav { display: none; }

/* ================================================================
   OUTPUT FORMATS — single post (1080×1350, same as carousel) and
   story (1440×2560). Every style/type works in each; only the frame
   size changes. Sequence affordances (page counter, "next" arrow)
   are hidden on single/story since they aren't part of a swipe set.
   ================================================================ */
.slide--fmt-story { width: 1440px; height: 2560px; }
.slide--fmt-single .cc-counter, .slide--fmt-story .cc-counter { display: none; }
.slide--fmt-single .cc-linen-arrow, .slide--fmt-story .cc-linen-arrow { display: none; }
.slide--fmt-single .cc-tx-meta { display: none; }

/* ================================================================
   STORY layout (1440×2560, 9:16) — redesigned for the vertical frame.
   Safe zone: top 340px, bottom 360px, sides 110px kept clear of the
   Instagram UI (profile/progress top, reply bar bottom). Two
   archetypes: immersive (full-bleed photo + scrim) and framed
   (brand ground + image panel + copy). Auto-fit still guarantees fit.
   ================================================================ */
.cc-story { position: absolute; inset: 0; overflow: hidden; }
.slide--fmt-story .slide-inner { padding: 0 !important; border: 0 !important; }
.slide--fmt-story .cc-story { position: absolute !important; inset: 0 !important; z-index: 1; }

.cc-story-safe { position: absolute; inset: 0; padding: 340px 110px 360px; display: flex; flex-direction: column; }

/* shared type */
.cc-story-handle { font-family: var(--font-body); font-size: 36px; color: var(--text-muted); }
.cc-story-kicker { display: inline-block; font-family: var(--font-body); font-weight: 600; font-size: 30px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary-on-bg); }
.cc-story-copy { display: flex; flex-direction: column; gap: 0.34em; font-size: 46px; }
.cc-story-headline { font-family: var(--font-head); font-weight: 700; font-size: 2.55em; line-height: 1.06; letter-spacing: -0.025em; margin: 0.08em 0 0.14em; color: var(--text); text-wrap: balance; overflow-wrap: anywhere; }
.cc-story-body { font-family: var(--font-body); font-weight: 400; font-size: 1em; line-height: 1.42; color: var(--text-muted); margin: 0; max-width: 24ch; }
.cc-story-list{list-style:none;margin:1em 0 0;padding:0;display:grid;gap:.5em}
.cc-story-list li{display:grid;grid-template-columns:1.8em 1fr;gap:.6em;align-items:start;font-family:var(--font-body);font-size:.78em;line-height:1.25}
.cc-story-list li>span{width:1.8em;height:1.8em;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-contrast);font-size:.65em}
.cc-story-list--checklist li>span{background:transparent;color:var(--accent-on-bg);border:2px solid var(--accent-on-bg)}
.cc-story-list--cards{grid-template-columns:1fr 1fr;gap:.55em}.cc-story-list--cards li{display:block;padding:.72em;border:1px solid var(--surface-line);border-radius:var(--radius);background:var(--surface)}.cc-story-list--cards li>span{margin-bottom:.45em}.cc-story-list--cards li>b{font-size:.68em;line-height:1.3}
.cc-story-stat{display:flex;flex-direction:column;margin-top:1em}.cc-story-stat strong{font-family:var(--font-head);font-size:3em;line-height:.9;color:var(--primary-on-bg)}.cc-story-stat span{font:600 .75em/1.3 var(--font-body);margin-top:.45em}
.cc-story-attribution{font:600 .72em/1.4 var(--font-body);margin:.9em 0 0;opacity:.78}
.cc-story-comparison{display:grid;grid-template-columns:1fr 1fr;gap:.55em;margin-top:1em}.cc-story-comparison>div{border:1px solid var(--surface-line);border-radius:var(--radius);padding:.7em;background:var(--surface)}.cc-story-comparison span{display:block;font:700 .5em/1.2 var(--font-body);text-transform:uppercase;letter-spacing:.08em;color:var(--primary-on-bg);margin-bottom:.3em}.cc-story-comparison b{font:600 .72em/1.3 var(--font-body)}
.cc-story-action{display:inline-flex;margin-top:1em;padding:.65em .9em;border-radius:999px;background:var(--accent);color:var(--accent-contrast);font:700 .72em/1 var(--font-body)}

/* immersive — cover & poster */
.cc-story--immersive .cc-story-bgmedia { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cc-story--immersive .cc-story-bgmedia--fallback {
  isolation: isolate; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, color-mix(in oklab, var(--accent) 42%, transparent) 0 11%, transparent 11.4%),
    radial-gradient(circle at 20% 70%, color-mix(in oklab, var(--primary) 28%, transparent) 0 19%, transparent 19.5%),
    linear-gradient(145deg, color-mix(in oklab, var(--primary) 24%, var(--bg)) 0%, color-mix(in oklab, var(--accent) 12%, var(--bg)) 46%, var(--bg) 70%, color-mix(in oklab, var(--text) 13%, var(--bg)) 100%);
}
.cc-story--immersive .cc-story-bgmedia--fallback::before,
.cc-story--immersive .cc-story-bgmedia--fallback::after { content:""; position:absolute; z-index:-1; border:1px solid color-mix(in oklab, var(--primary) 55%, transparent); transform:rotate(-12deg); }
.cc-story--immersive .cc-story-bgmedia--fallback::before { width:930px; height:930px; border-radius:50%; right:-280px; top:250px; }
.cc-story--immersive .cc-story-bgmedia--fallback::after { width:680px; height:1080px; left:-260px; bottom:260px; border-radius:999px; }
.cc-story--immersive .cc-story-bgmedia--fallback .cc-fallback-mark { font-size:360px; opacity:.09; transform:translateY(-170px); }
.cc-story-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.08) 34%, rgba(0,0,0,0.5) 62%, rgba(0,0,0,0.9) 100%); }
.cc-story--immersive .cc-story-top { flex: none; }
.cc-story--immersive .cc-story-top { align-self: flex-start; padding: 12px 16px; margin: -12px -16px; border-radius: calc(var(--radius) + 6px); background: rgba(0,0,0,.3); backdrop-filter: brightness(.35); }
.cc-story--immersive .cc-story-copy { margin-top: auto; max-height: 72%; overflow: hidden; position: relative; isolation: isolate; border-radius: calc(var(--radius) + 8px); padding: .42em .48em; background: rgba(0,0,0,.3); backdrop-filter: brightness(.35); }
.cc-story--immersive .cc-story-handle { color: var(--text-muted-on-photo); }
.cc-story--immersive .cc-story-kicker { color: var(--primary-on-photo); }
.cc-story--immersive .cc-story-headline { color: var(--text-on-photo); text-shadow: 0 2px 28px rgba(0,0,0,0.55); }
.cc-story--immersive .cc-story-body { color: var(--text-muted-on-photo); text-shadow: 0 2px 18px rgba(0,0,0,0.5); }
.cc-story--immersive .cc-story-list,
.cc-story--immersive .cc-story-stat,
.cc-story--immersive .cc-story-attribution { color: var(--text-on-photo); text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.cc-story--immersive .cc-story-stat strong { color: var(--primary-on-photo); }
.cc-story--immersive .cc-story-list--checklist li>span { color: var(--primary-on-photo); border-color: var(--primary-on-photo); }
.cc-story--immersive .cc-story-list--cards li { background: rgba(0,0,0,.72); border-color: rgba(255,255,255,.28); }
.cc-story-index { position: absolute; top: 300px; right: 90px; font-family: var(--font-head); font-weight: 800; font-size: 360px; line-height: 1; color: rgba(255,255,255,0.16); z-index: 1; }

/* framed — editorial, cards, linen, twittex */
.cc-story--framed { background: var(--bg); }
.cc-story--framed .cc-story-top { flex: none; display: flex; flex-direction: column; gap: 20px; margin-bottom: 52px; }
.cc-story--framed .cc-story-panel { flex: 0 0 auto; height: 46%; border-radius: var(--radius); overflow: hidden; margin-bottom: 52px; }
.cc-story-media { width: 100%; height: 100%; min-height: 0; background-size: cover; background-position: center; }
.cc-story-media--fallback { background: linear-gradient(160deg, color-mix(in oklab, var(--primary) 22%, var(--bg)), color-mix(in oklab, var(--accent) 10%, var(--bg)), var(--bg)); display: flex; align-items: center; justify-content: center; }
.cc-story--framed .cc-story-copy { flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* per-style flavor */
.slide--linen .cc-story-headline { font-weight: 300; text-transform: lowercase; letter-spacing: 0.04em; }
.slide--linen .cc-story-handle { font-family: 'Parisienne', cursive; font-size: 48px; }
.slide--prism .cc-story--framed {
  background:
    radial-gradient(circle at 88% 82%, color-mix(in oklab, var(--accent) 25%, transparent), transparent 34%),
    var(--bg);
}
.slide--prism .cc-story-panel { border: 2px solid var(--px-line); }
.slide--prism .cc-story-kicker, .slide--prism .cc-story-handle { font-family: var(--px-mono); }
.slide--prism .cc-story-headline {
  background-image: var(--px-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  letter-spacing: -.03em;
}
.slide--popcard .cc-story-panel,
.slide--popcard .cc-story-copy {
  border: 1px solid var(--surface-line); border-radius: var(--radius); background: var(--pc-surface);
  box-shadow: 10px 12px 0 color-mix(in oklab, var(--text) 9%, transparent), 0 30px 48px color-mix(in oklab, var(--text) 16%, transparent);
}
.slide--popcard .cc-story-copy { padding: 48px; }

.slide--poster .cc-story-list li > span,
.slide--poster .cc-story-action,
.slide--poster .cc-story-list--cards li,
.slide--poster .cc-story-comparison > div { border-radius: 0; }
.slide--poster .cc-story--immersive .cc-story-top,
.slide--poster .cc-story--immersive .cc-story-copy {
  border-radius: 0; background: none; backdrop-filter: none;
}
.slide--poster .cc-story--immersive .cc-story-top { padding: 0; margin: 0; }
.slide--poster .cc-story--immersive .cc-story-copy { padding: 0; }
.slide--poster .cc-story--immersive .cc-mark {
  color: inherit; -webkit-text-fill-color: currentColor;
}
.slide--poster .cc-story-comparison {
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: stretch;
}
.slide--poster .cc-story-compare-divider {
  display: grid; place-items: center; padding: 0 .2em; margin: 0;
  color: var(--primary-on-photo); background: transparent;
  font: 800 .52em/1 var(--font-head); letter-spacing: 0; text-transform: uppercase;
}

/* Let each text block establish its own bidi base direction without reversing
   structural layout (split/media/chrome stay deterministic). */
.cc-kicker,.cc-headline,.cc-body,.cc-check-text,.cc-step-text,.cc-quote,.cc-quote-author,
.cc-compare-label,.cc-compare-text,.cc-minicard-text,.cc-cta-button,.cc-handle,
.cc-story-kicker,.cc-story-headline,.cc-story-body,.cc-story-list b,.cc-story-attribution,
.cc-tx-name,.cc-tx-handle,.cc-tx-kicker,.cc-tx-text,.cc-tx-list,.cc-tx-compare,.cc-tx-attr,.cc-tx-action-btn { unicode-bidi: plaintext; }
.slide--cover .cc-story-headline { font-size:2.42em; max-width:10.5ch; }
.slide--poster .cc-story-headline { font-size:2.24em; line-height:1.01; text-transform: uppercase; font-weight: 800; letter-spacing: -0.025em; max-width:11ch; }
.slide--twittex .cc-story-copy { background: var(--surface); border: 1px solid var(--surface-line); border-radius: 36px; padding: 52px; }
.slide--twittex .cc-story-body { color: var(--text); }
.slide--twittex .cc-story-panel { border: 1px solid var(--surface-line); }
.slide--cards .cc-story-panel { border:1px solid var(--surface-line); box-shadow: 0 30px 70px -30px rgba(0,0,0,0.28), 0 0 0 14px color-mix(in oklab, var(--surface) 82%, transparent); }
.slide--cards .cc-story-copy { padding:44px 48px 48px; border:1px solid var(--surface-line); border-radius:var(--radius); background:var(--surface); box-shadow:0 28px 64px -40px rgba(0,0,0,.35); }
.slide--cards .cc-story-headline { font-size:2.18em; line-height:1.06; }