/* ============================================================================
   CTAurl PREMIUM LAYER — Slack.com pattern bar
   Measured from slack.com 2026: oversized type, uppercase tracked CTAs,
   soft wash plates, dark story chapters, multi-accent storytelling.
   Brand green #1ED760 = convert CTAs only. Accents: iris tide amber coral plum.
   ============================================================================ */

/* —— Type scale (Slack-calibrated) —— */
h1 {
  font-size: clamp(2.875rem, 5.8vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.048em;
  font-weight: 800;
}

h2 {
  font-size: clamp(2rem, 3.8vw, 3.125rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
  font-weight: 750;
}

.hero-lead {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.65;
}

.section-lead {
  font-size: 1.125rem;
  line-height: 1.65;
  max-width: 36rem;
}

/* —— CTA craft: uppercase + tracking like Slack GET STARTED —— */
.btn-primary,
.btn-create,
.site-header .btn-primary {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
  font-weight: 750;
  border-radius: 4px;
  min-height: 44px;
  padding-inline: 1.25rem;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0.75rem 1.15rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: border-color var(--motion-hover) var(--ease-standard),
    color var(--motion-hover) var(--ease-standard),
    background var(--motion-hover) var(--ease-standard);
}
.btn-ghost:hover {
  border-color: var(--creative-tide);
  color: var(--creative-tide);
  background: var(--surface-tide-wash);
}
.btn-ghost--on-dark {
  border-color: color-mix(in srgb, #fff 35%, transparent);
  color: var(--on-story);
}
.btn-ghost--on-dark:hover {
  border-color: #fff;
  color: #fff;
  background: color-mix(in srgb, #fff 8%, transparent);
}

/* Keep CreateTool primary green (already .btn-primary) */
.btn-create {
  background: var(--brand);
  color: var(--on-brand);
}

/* —— Section surfaces & rhythm —— */
.section-space {
  margin-top: clamp(5rem, 10vw, 8.5rem);
}

.pain-band {
  background:
    radial-gradient(ellipse 50% 60% at 0% 0%, color-mix(in srgb, var(--creative-coral) 10%, transparent), transparent 55%),
    radial-gradient(ellipse 45% 50% at 100% 100%, color-mix(in srgb, var(--creative-tide) 10%, transparent), transparent 55%),
    var(--surface-coral-wash);
}

.how-section {
  background:
    linear-gradient(180deg, transparent 0%, var(--surface-tide-wash) 18%, var(--surface-plum-wash) 82%, transparent 100%);
}

.use-section {
  position: relative;
  border-radius: 48px;
  overflow: hidden;
  /* Uniform FULL-BLOCK soft mint — solid wash, no ::before blob/inset/skew */
  background: var(--surface-mint-wash);
  padding-block: clamp(2rem, 4vw, 3.25rem);
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
  box-sizing: border-box;
}
/* Match homepage band rhythm — section-space major gap was oversized above use */
.use-section.section-space {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.use-section::before,
.use-section::after {
  content: none !important;
  display: none !important;
}
.use-section > * { position: relative; z-index: 1; }
.use-section .section-heading {
  padding-top: 0.35rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* QR = Slack dark chapter (plum/iris, NOT green ink) */
.qr-band {
  background:
    radial-gradient(ellipse 60% 70% at 90% 10%, color-mix(in srgb, var(--creative-plum) 38%, transparent), transparent 55%),
    radial-gradient(ellipse 50% 60% at 8% 90%, color-mix(in srgb, var(--creative-iris) 32%, transparent), transparent 58%),
    radial-gradient(ellipse 40% 40% at 50% 40%, color-mix(in srgb, var(--brand) 6%, transparent), transparent 70%),
    var(--story-dark) !important;
  color: var(--on-story);
  padding-block: clamp(4.5rem, 9vw, 7rem);
}
.qr-band h2 { color: var(--on-story); }
.qr-band .qr-copy > p:not(.eyebrow) { color: var(--on-story-muted); }
.qr-band .eyebrow--iris,
.qr-band .eyebrow {
  color: color-mix(in srgb, var(--creative-iris) 65%, #fff);
}
.qr-band .accent-iris {
  color: color-mix(in srgb, var(--creative-iris) 55%, #fff);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--creative-iris) 70%, #fff),
    color-mix(in srgb, var(--creative-plum) 70%, #fff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.trust-rail {
  background: linear-gradient(180deg, var(--surface-mint-wash), var(--bg-raised));
}

.comparison {
  position: relative;
}

/* —— Media plates (Slack lilac wash behind frames) —— */
.media-plate {
  position: relative;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  border-radius: 28px;
  isolation: isolate;
}
.media-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  transform: skewY(-1.5deg) scale(1.02);
  pointer-events: none;
  opacity: 0.95;
}
.media-plate > * { position: relative; z-index: 1; }

.media-plate--tide::before {
  background: linear-gradient(145deg, var(--surface-tide-wash) 0%, color-mix(in srgb, var(--creative-tide) 12%, #fff) 45%, #fff 100%);
}
.media-plate--amber::before {
  background: linear-gradient(145deg, var(--surface-amber-wash) 0%, color-mix(in srgb, var(--creative-amber) 14%, #fff) 45%, #fff 100%);
}
.media-plate--plum::before {
  background: linear-gradient(145deg, var(--surface-plum-wash) 0%, color-mix(in srgb, var(--creative-plum) 14%, #fff) 45%, #fff 100%);
}
.media-plate--iris::before {
  background: linear-gradient(145deg, var(--surface-lilac) 0%, color-mix(in srgb, var(--creative-iris) 22%, #fff) 50%, #fff 100%);
}
.media-plate--coral::before {
  background: linear-gradient(145deg, var(--surface-coral-wash) 0%, color-mix(in srgb, var(--creative-coral) 12%, #fff) 45%, #fff 100%);
}
.media-plate--mint::before {
  background: linear-gradient(145deg, var(--surface-mint-wash) 0%, color-mix(in srgb, var(--brand) 10%, #fff) 45%, #fff 100%);
}
.media-plate--dark::before {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--creative-plum) 35%, var(--story-dark)) 0%,
    var(--story-dark-elevated) 55%,
    var(--story-dark) 100%);
  transform: skewY(-1deg) scale(1.01);
  opacity: 1;
}

/* Product frame: thicker craft + accent bezel option */
.product-frame {
  border-radius: 20px;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--text-primary) 4%, transparent),
    0 14px 36px color-mix(in srgb, var(--text-primary) 8%, transparent),
    0 40px 90px color-mix(in srgb, var(--text-primary) 10%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 55%, transparent) inset;
}
.how-row[data-accent="tide"] .product-frame {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--creative-tide) 22%, transparent),
    0 14px 36px color-mix(in srgb, var(--text-primary) 8%, transparent),
    0 40px 90px color-mix(in srgb, var(--creative-tide) 10%, transparent);
}
.how-row[data-accent="amber"] .product-frame {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--creative-amber) 28%, transparent),
    0 14px 36px color-mix(in srgb, var(--text-primary) 8%, transparent),
    0 40px 90px color-mix(in srgb, var(--creative-amber) 12%, transparent);
}
.how-row[data-accent="plum"] .product-frame {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--creative-plum) 28%, transparent),
    0 14px 36px color-mix(in srgb, var(--text-primary) 8%, transparent),
    0 40px 90px color-mix(in srgb, var(--creative-plum) 12%, transparent);
}

/* —— How indexes: bold Slack-scale color —— */
.how-index {
  font-size: clamp(3.75rem, 8vw, 5.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.07em !important;
  line-height: 0.82 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}
.how-row[data-accent="tide"] .how-index,
.how-row:nth-child(1) .how-index {
  color: color-mix(in srgb, var(--creative-tide) 88%, #fff) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--creative-tide) 88%, #fff) !important;
}
.how-row[data-accent="amber"] .how-index,
.how-row:nth-child(2) .how-index {
  color: color-mix(in srgb, var(--creative-amber) 92%, #fff) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--creative-amber) 92%, #fff) !important;
}
.how-row[data-accent="plum"] .how-index,
.how-row:nth-child(3) .how-index {
  color: color-mix(in srgb, var(--creative-plum) 90%, #fff) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--creative-plum) 90%, #fff) !important;
}

.how-copy {
  border-left-width: 4px !important;
}
.how-row[data-accent="tide"] .how-copy { border-left-color: var(--creative-tide) !important; --how-line: var(--creative-tide); }
.how-row[data-accent="amber"] .how-copy { border-left-color: var(--creative-amber) !important; --how-line: var(--creative-amber); }
.how-row[data-accent="plum"] .how-copy { border-left-color: var(--creative-plum) !important; --how-line: var(--creative-plum); }

.how-row--soft::before {
  background: linear-gradient(160deg, var(--surface-amber-wash), var(--surface-plum-wash)) !important;
  border-radius: 24px;
}

/* —— Pain cards: colored top wash + strong accent —— */
.pain-card {
  background: var(--bg-surface);
  border-radius: 16px;
  padding: 1.75rem 1.5rem 1.5rem !important;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-top: none !important;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--text-primary) 4%, transparent);
  overflow: hidden;
}
.pain-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--pain-accent-color, var(--creative-coral));
}
.pain-card[data-accent="coral"] { --pain-accent-color: var(--creative-coral); background: linear-gradient(180deg, var(--mkt-coral-soft), var(--bg-surface) 28%); }
.pain-card[data-accent="amber"] { --pain-accent-color: var(--creative-amber); background: linear-gradient(180deg, var(--mkt-amber-soft), var(--bg-surface) 28%); }
.pain-card[data-accent="tide"] { --pain-accent-color: var(--creative-tide); background: linear-gradient(180deg, var(--mkt-tide-soft), var(--bg-surface) 28%); }

.pain-accent {
  width: 64px !important;
  height: 4px !important;
  top: 18px !important;
  left: 1.5rem !important;
  border-radius: 4px !important;
}

.pain-card .story-number {
  margin-top: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.1em;
}

/* —— Use-case pills (Slack outline chips) —— */
.use-tabs {
  background: transparent !important;
  border: 0 !important;
  gap: 0.5rem !important;
  padding: 0 !important;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.use-tabs .tab {
  border: 1px solid var(--border-strong) !important;
  border-radius: 999px !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  padding: 0.65rem 1.15rem !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}
.use-tabs .tab[aria-selected="true"] {
  background: var(--text-primary) !important;
  color: var(--bg-surface) !important;
  border-color: var(--text-primary) !important;
}
.use-tabs .tab[data-tab="sell"][aria-selected="true"] {
  background: color-mix(in srgb, var(--brand) 85%, #0D9D3F) !important;
  border-color: transparent !important;
  color: var(--on-brand) !important;
}
.use-tabs .tab[data-tab="book"][aria-selected="true"] {
  background: var(--creative-tide) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.use-tabs .tab[data-tab="try"][aria-selected="true"] {
  background: var(--creative-amber) !important;
  border-color: transparent !important;
  color: var(--on-creative-amber) !important;
}
.use-tabs .tab[data-tab="read"][aria-selected="true"] {
  background: var(--creative-plum) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.use-tabs .tab .tab-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.45rem;
  vertical-align: 1px;
  background: var(--brand);
}
.use-tabs .tab[data-tab="book"] .tab-dot { background: var(--creative-tide); }
.use-tabs .tab[data-tab="try"] .tab-dot { background: var(--creative-amber); }
.use-tabs .tab[data-tab="read"] .tab-dot { background: var(--creative-plum); }

/* —— Hero: soft lilac plate behind tool —— */
.tool-stage {
  position: relative;
}
.tool-stage::before {
  content: "";
  position: absolute;
  inset: 6% -4% -4% -6%;
  z-index: 0;
  border-radius: 36px;
  background: linear-gradient(150deg, var(--surface-lilac) 0%, var(--surface-mint-wash) 40%, var(--surface-amber-wash) 100%);
  transform: skewY(-1.25deg);
  opacity: 0.85;
  pointer-events: none;
}
.tool-stage > * { position: relative; z-index: 1; }

.hero-blobs .blob--mint { opacity: 0.72; }
.hero-blobs .blob--iris { opacity: 0.62; }
.hero-blobs .blob--amber { opacity: 0.58; }

/* Eyebrows: stronger marketing inks */
.eyebrow {
  letter-spacing: 0.14em !important;
  font-weight: 750 !important;
}
.eyebrow--tide { color: var(--creative-tide) !important; }
.eyebrow--coral { color: var(--creative-coral) !important; }
.eyebrow--amber { color: color-mix(in srgb, var(--creative-amber) 85%, #2A1700) !important; }
.eyebrow--plum { color: var(--creative-plum) !important; }
.eyebrow--iris { color: color-mix(in srgb, var(--creative-plum) 55%, var(--creative-iris)) !important; }

/* Trust strip denser color */
.trust-strip {
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  padding-block: 1.75rem !important;
}
.trust-strip > span::before {
  width: 8px !important;
  height: 8px !important;
  opacity: 1 !important;
}

/* Closing stays iris; elevate CTA contrast */
.closing .btn-primary {
  box-shadow: 0 8px 28px color-mix(in srgb, var(--on-creative-iris) 25%, transparent);
}

/* Comparison winner: keep green as convert signal */
.compare-winner {
  background: linear-gradient(135deg, var(--brand-subtle), color-mix(in srgb, var(--brand-subtle) 50%, #fff)) !important;
}

/* QR timeline connector multi */
.qr-timeline li:not(:last-child)::after {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--creative-iris) 55%, transparent),
    color-mix(in srgb, var(--creative-plum) 50%, transparent)
  ) !important;
}

/* Play-style secondary under media */
.media-caption {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
}
.media-caption .play-ring {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--creative-plum) 45%, var(--border-strong));
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  color: var(--creative-plum);
}

@media (max-width: 900px) {
  .use-section { border-radius: 24px; }
  .tool-stage::before { transform: none; inset: 0; border-radius: 24px; }
  .media-plate::before { transform: none; }
}


/* —— Premium pass 2: stronger washes & timeline —— */
.how-section {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-tide-wash) 0%, transparent) 0%,
      var(--surface-tide-wash) 12%,
      var(--surface-plum-wash) 78%,
      transparent 100%) !important;
}

.media-plate::before {
  opacity: 1 !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 35%, transparent);
}

.media-plate--tide::before {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--creative-tide) 16%, #fff) 0%,
    var(--surface-tide-wash) 42%,
    #fff 100%) !important;
}
.media-plate--amber::before {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--creative-amber) 18%, #fff) 0%,
    var(--surface-amber-wash) 42%,
    #fff 100%) !important;
}
.media-plate--plum::before {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--creative-plum) 18%, #fff) 0%,
    var(--surface-plum-wash) 42%,
    #fff 100%) !important;
}

.qr-timeline li[data-accent="iris"] span {
  border-color: color-mix(in srgb, var(--creative-iris) 80%, #fff) !important;
  color: color-mix(in srgb, var(--creative-iris) 85%, #fff) !important;
  background: color-mix(in srgb, var(--creative-iris) 28%, transparent) !important;
}
.qr-timeline li[data-accent="plum"] span {
  border-color: color-mix(in srgb, var(--creative-plum) 85%, #fff) !important;
  color: color-mix(in srgb, var(--creative-plum) 90%, #fff) !important;
  background: color-mix(in srgb, var(--creative-plum) 30%, transparent) !important;
}
.qr-timeline li[data-accent="amber"] span {
  border-color: color-mix(in srgb, var(--creative-amber) 85%, #fff) !important;
  color: color-mix(in srgb, var(--creative-amber) 95%, #fff) !important;
  background: color-mix(in srgb, var(--creative-amber) 28%, transparent) !important;
}

/* Sticky header soft edge on dark chapters */
.qr-band .wrap { position: relative; z-index: 1; }

/* Chrome dots pick up section accent lightly */
.how-row[data-accent="tide"] .chrome-dot:nth-child(1) { background: var(--creative-tide); }
.how-row[data-accent="amber"] .chrome-dot:nth-child(1) { background: var(--creative-amber); }
.how-row[data-accent="plum"] .chrome-dot:nth-child(1) { background: var(--creative-plum); }

.chrome-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  display: inline-block;
}
.chrome-dot + .chrome-dot { margin-left: 5px; }

/* Use visual plate stronger */
.use-visual[data-plate="sell"]::before { opacity: 0.7; }
.use-visual[data-plate="book"]::before { opacity: 0.7; }
.use-visual[data-plate="try"]::before { opacity: 0.7; }
.use-visual[data-plate="read"]::before { opacity: 0.7; }

/* ============================================================================
   PREMIUM PASS 3 — Slack chapter rhythm
   capability cards · proof dark band · story closing · media bleed
   ============================================================================ */

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.btn-ghost.btn-sm {
  min-height: 40px;
  padding: 0.5rem 0.9rem;
  font-size: 0.75rem;
}

/* Capability cards — multi-palette resource grid */
.capability-band {
  padding-block: clamp(2rem, 4vw, 3rem);
}
.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: var(--space-10);
}
.capability-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 32px color-mix(in srgb, var(--text-primary) 5%, transparent);
  transition: transform 280ms var(--ease-standard), box-shadow 280ms var(--ease-standard);
  min-height: 100%;
}
.capability-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.capability-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-muted);
}
.capability-media::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
}
.capability-card[data-accent="coral"] .capability-media {
  background: linear-gradient(145deg, var(--mkt-coral-soft), color-mix(in srgb, var(--creative-coral) 28%, #fff));
}
.capability-card[data-accent="coral"] .capability-media::after {
  background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--creative-coral) 35%, transparent));
}
.capability-card[data-accent="tide"] .capability-media {
  background: linear-gradient(145deg, var(--mkt-tide-soft), color-mix(in srgb, var(--creative-tide) 28%, #fff));
}
.capability-card[data-accent="tide"] .capability-media::after {
  background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--creative-tide) 35%, transparent));
}
.capability-card[data-accent="amber"] .capability-media {
  background: linear-gradient(145deg, var(--mkt-amber-soft), color-mix(in srgb, var(--creative-amber) 30%, #fff));
}
.capability-card[data-accent="amber"] .capability-media::after {
  background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--creative-amber) 35%, transparent));
}
.capability-card[data-accent="plum"] .capability-media {
  background: linear-gradient(145deg, var(--mkt-plum-soft), color-mix(in srgb, var(--creative-plum) 30%, #fff));
}
.capability-card[data-accent="plum"] .capability-media::after {
  background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--creative-plum) 35%, transparent));
}
.capability-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: none;
  transform-origin: center top;
  opacity: 0.92;
}
.capability-card > *:not(.capability-media) {
  padding-inline: 1.15rem;
}
.capability-label {
  margin-top: 1rem;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.capability-card[data-accent="coral"] .capability-label { color: var(--creative-coral); }
.capability-card[data-accent="tide"] .capability-label { color: var(--creative-tide); }
.capability-card[data-accent="amber"] .capability-label { color: color-mix(in srgb, var(--creative-amber) 80%, #2A1700); }
.capability-card[data-accent="plum"] .capability-label { color: var(--creative-plum); }
.capability-card h3 {
  margin-top: 0.55rem;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.03em;
  font-weight: 750;
  flex: 1;
}
.capability-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 1.1rem 0 1.25rem;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--creative-tide);
}
.capability-card[data-accent="coral"] .capability-link { color: var(--creative-coral); }
.capability-card[data-accent="amber"] .capability-link { color: color-mix(in srgb, var(--creative-amber) 75%, #2A1700); }
.capability-card[data-accent="plum"] .capability-link { color: var(--creative-plum); }

/* Proof dark band */
.proof-band {
  background:
    radial-gradient(ellipse 50% 60% at 15% 20%, color-mix(in srgb, var(--creative-iris) 22%, transparent), transparent 55%),
    radial-gradient(ellipse 45% 55% at 90% 80%, color-mix(in srgb, var(--creative-plum) 28%, transparent), transparent 58%),
    var(--story-dark);
  color: var(--on-story);
  margin-top: clamp(4rem, 8vw, 7rem);
}
.proof-band h2 {
  text-align: center;
  color: var(--on-story);
  max-width: 18ch;
  margin-inline: auto;
  font-size: clamp(2rem, 3.6vw, 2.875rem);
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.proof-figure {
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.95;
  margin-bottom: 0.85rem;
}
.proof-stat[data-accent="iris"] .proof-figure {
  color: color-mix(in srgb, var(--creative-iris) 70%, #fff);
}
.proof-stat[data-accent="amber"] .proof-figure {
  color: color-mix(in srgb, var(--creative-amber) 75%, #fff);
}
.proof-stat[data-accent="plum"] .proof-figure {
  color: color-mix(in srgb, var(--creative-plum) 70%, #fff);
}
.proof-label {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--on-story-muted);
  max-width: 22ch;
  margin-inline: auto;
}

/* Closing as dark story chapter (Slack footer CTA pattern) */
.closing.closing--story {
  background:
    radial-gradient(ellipse 55% 70% at 20% 0%, color-mix(in srgb, var(--creative-plum) 30%, transparent), transparent 60%),
    radial-gradient(ellipse 45% 55% at 90% 100%, color-mix(in srgb, var(--creative-iris) 22%, transparent), transparent 55%),
    var(--story-dark) !important;
  color: var(--on-story);
  text-align: center;
}
.closing.closing--story::before { display: none !important; } /* kill rotating iris mesh if present */
.closing.closing--story .eyebrow {
  color: color-mix(in srgb, var(--creative-iris) 60%, #fff) !important;
}
.closing.closing--story h2 {
  color: var(--on-story);
  max-width: 18ch;
  margin-inline: auto;
}
.closing.closing--story .closing-lead,
.closing.closing--story .section-lead {
  color: color-mix(in srgb, #fff 72%, transparent) !important;
  max-width: 40ch;
  margin-inline: auto;
}
.closing.closing--story .closing-actions {
  justify-content: center;
}
.closing.closing--story .btn-ghost {
  border-color: color-mix(in srgb, #fff 42%, transparent) !important;
  color: #f5f7f6 !important;
  background: transparent !important;
}
.closing.closing--story .btn-ghost:hover {
  border-color: #fff !important;
  color: #fff !important;
  background: color-mix(in srgb, #fff 10%, transparent) !important;
}

/* Product bleed off-edge (Slack crop energy) */
@media (min-width: 1100px) {
  .how-row:not(.how-row--reverse) .product-frame--bleed {
    margin-inline-end: calc(var(--gutter, 0px) * -0.35 - 1.5rem);
  }
  .how-row--reverse .product-frame--bleed {
    margin-inline-start: calc(var(--gutter, 0px) * -0.35 - 1.5rem);
  }
}

@media (max-width: 1100px) {
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .capability-grid,
  .proof-grid { grid-template-columns: 1fr; }
  .nav-actions .btn-ghost.btn-sm { display: none; }
}

/* ============================================================================
   PREMIUM PASS 4 — kill template SaaS tells
   Asymmetric composition · chapter weight · chart-forward s06 ·
   restraint on green · structural accents (not rainbow dots)
   ============================================================================ */

/* —— Type: more editorial scale & intentional wraps —— */
h1 {
  font-size: clamp(3.125rem, 6.4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.052em;
}
h2 {
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.042em;
}
.how-copy h3,
.use-copy h3,
.pain-card h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
  font-weight: 750;
}
/* Homepage-only large intro gaps — do not bleed onto body.page-inner */
body:not(.page-inner) .section-intro,
.how-intro,
.section-heading {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-intro h2,
.how-intro h2 {
  max-width: min(28ch, 100%);
  line-height: 1.05;
}
.section-lead {
  max-width: 34rem;
  color: var(--text-secondary);
}

/* —— Chapter turns: white / wash / dark, not mint everywhere —— */
.hero {
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--surface-lilac) 55%, #fff) 100%);
}
.pain-band {
  background:
    radial-gradient(ellipse 55% 70% at 0% 10%, color-mix(in srgb, var(--creative-coral) 14%, transparent), transparent 58%),
    radial-gradient(ellipse 40% 50% at 100% 90%, color-mix(in srgb, var(--creative-amber) 12%, transparent), transparent 55%),
    #FBF6F3 !important;
}
.how-section {
  background: #fff !important;
  /* Inner top/bottom air so intro isn't flush to the white band edge */
  padding-block: clamp(4rem, 8vw, 6.5rem) !important;
}
.capability-band {
  background:
    linear-gradient(180deg, #fff 0%, var(--surface-lilac) 48%, #fff 100%);
  padding-block: clamp(3rem, 7vw, 5.5rem) !important;
}
.comparison {
  background: #fff;
  padding-block: clamp(1rem, 2vw, 2rem);
}
.faq {
  background: linear-gradient(180deg, #fff, var(--surface-plum-wash));
  padding-block: clamp(2rem, 4vw, 3rem);
  border-radius: 0;
}

/* —— Trust strip: kill rainbow dots — structural hairlines —— */
.trust-strip > span::before {
  width: 1px !important;
  height: 1.1em !important;
  border-radius: 0 !important;
  background: var(--border-strong) !important;
  opacity: 0.7 !important;
  margin-inline-end: 0.85rem !important;
}
.trust-strip > span:first-child::before {
  display: none !important;
}
.trust-strip > span[data-accent]::before {
  background: var(--border-strong) !important;
}

/* —— Use tabs: no decorative rainbow dots —— */
.use-tabs .tab .tab-dot {
  display: none !important;
}
.use-tabs .tab[aria-selected="true"] {
  box-shadow: 0 6px 18px color-mix(in srgb, var(--text-primary) 12%, transparent);
}

/* —— Pain: asymmetric editorial weight (not equal flat cards) —— */
.pain-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr !important;
  gap: 1.35rem !important;
  align-items: stretch;
}
.pain-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 20px !important;
  padding: 2rem 1.65rem 1.65rem !important;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 80%, transparent) inset,
    0 18px 48px color-mix(in srgb, var(--text-primary) 5%, transparent) !important;
}
.pain-card:first-child {
  padding: 2.35rem 1.9rem 1.9rem !important;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 80%, transparent) inset,
    0 24px 60px color-mix(in srgb, var(--creative-coral) 10%, transparent),
    0 10px 28px color-mix(in srgb, var(--text-primary) 5%, transparent) !important;
}
.pain-card:first-child h3 {
  font-size: clamp(1.75rem, 2.8vw, 2.35rem);
}
.pain-card::after {
  height: 5px !important;
}
.pain-card .story-number {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}
.pain-card .story-pill {
  margin-top: auto;
  align-self: flex-start;
  margin-top: 1.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
  background: color-mix(in srgb, var(--pain-accent-color, var(--creative-coral)) 12%, #fff);
  color: color-mix(in srgb, var(--pain-accent-color, var(--creative-coral)) 85%, #10221B);
}
.pain-accent { display: none !important; } /* top bar via ::after is enough */

@media (max-width: 900px) {
  .pain-grid { grid-template-columns: 1fr !important; }
  .pain-card:first-child h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
}

/* —— Capabilities: bento / asymmetric, varied media ratios —— */
.capability-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
  margin-top: clamp(2.5rem, 5vw, 3.5rem) !important;
}
.capability-card:nth-child(1) { grid-column: span 7; }
.capability-card:nth-child(2) { grid-column: span 5; }
.capability-card:nth-child(3) { grid-column: span 5; }
.capability-card:nth-child(4) { grid-column: span 7; }

.capability-card {
  border-radius: 18px !important;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent) !important;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 70%, transparent) inset,
    0 14px 40px color-mix(in srgb, var(--text-primary) 6%, transparent) !important;
}
.capability-card:nth-child(1),
.capability-card:nth-child(4) {
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 70%, transparent) inset,
    0 22px 56px color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
}
.capability-card:nth-child(1) .capability-media { aspect-ratio: 16 / 9.2; }
.capability-card:nth-child(2) .capability-media { aspect-ratio: 16 / 11.5; }
.capability-card:nth-child(3) .capability-media { aspect-ratio: 16 / 11.5; }
.capability-card:nth-child(4) .capability-media { aspect-ratio: 16 / 9; }

.capability-media {
  margin: 0.85rem 0.85rem 0;
  border-radius: 12px;
  overflow: hidden;
}
.capability-media::after {
  opacity: 0.28 !important;
  mix-blend-mode: soft-light !important;
}
.capability-media img {
  object-position: center center !important;
  opacity: 1 !important;
  transform: scale(1.02);
  transition: transform 700ms var(--ease-standard);
}
.capability-card:hover .capability-media img {
  transform: scale(1.05);
}
/* Analytics card: charts already in crop — keep center */
.capability-card[data-accent="plum"] .capability-media img {
  object-position: center 35% !important;
}
.capability-card h3 {
  font-size: clamp(1.2rem, 1.6vw, 1.45rem) !important;
  max-width: 18ch;
}
.capability-card:nth-child(1) h3,
.capability-card:nth-child(4) h3 {
  font-size: clamp(1.35rem, 1.9vw, 1.7rem) !important;
}

@media (max-width: 1100px) {
  .capability-card:nth-child(n) { grid-column: span 6; }
}
@media (max-width: 700px) {
  .capability-card:nth-child(n) { grid-column: span 12; }
  .capability-media { margin: 0.65rem 0.65rem 0; }
}

/* —— How product stages: richer frames, varied ratios, s06 charts —— */
.product-frame {
  border-radius: 22px !important;
  box-shadow:
    0 2px 4px color-mix(in srgb, var(--text-primary) 4%, transparent),
    0 18px 44px color-mix(in srgb, var(--text-primary) 9%, transparent),
    0 48px 100px color-mix(in srgb, var(--text-primary) 12%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 60%, transparent) inset !important;
}
.how-row[data-accent="tide"] .product-frame,
.how-row[data-accent="amber"] .product-frame,
.how-row[data-accent="plum"] .product-frame {
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--how-line, var(--creative-tide)) 28%, transparent),
    0 18px 44px color-mix(in srgb, var(--text-primary) 9%, transparent),
    0 48px 100px color-mix(in srgb, var(--how-line, var(--creative-tide)) 14%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 55%, transparent) inset !important;
}

/* s06 chart-forward crop: fill frame, slight center bias */
.product-frame--s06,
.product-shot--s06 {
  --shot-scale: 1.02 !important;
  --shot-pos-x: center !important;
  --shot-pos-y: center !important;
  --shot-origin-x: center !important;
  --shot-origin-y: center !important;
}
.product-frame--s06 .product-shot {
  aspect-ratio: 16 / 10.4 !important;
}
.product-frame--s01 .product-shot { aspect-ratio: 16 / 10.6 !important; }
.product-frame--s08 .product-shot,
.product-frame--s08-dark .product-shot { aspect-ratio: 15 / 10 !important; }

.media-plate {
  padding: clamp(1.15rem, 2.8vw, 2rem) !important;
  border-radius: 32px !important;
}
.media-plate::before {
  transform: skewY(-1.1deg) scale(1.015) !important;
}

/* How copy rail: stronger editorial */
.how-copy {
  max-width: 28rem;
}
.how-row {
  gap: clamp(2rem, 5vw, 4rem) !important;
  padding-block: clamp(2rem, 4vw, 3.25rem) !important;
}
.how-index {
  font-size: clamp(4.25rem, 9vw, 6.25rem) !important;
  opacity: 0.92;
}

/* —— Use section: stronger asymmetric stage —— */
.use-panel {
  align-items: center;
}
.use-visual .product-frame {
  transform: none;
}
@media (min-width: 1100px) {
  .use-visual .product-frame--bleed,
  .use-visual .product-frame {
    margin-inline-end: -2.5rem;
  }
  .how-row:not(.how-row--reverse) .product-frame--bleed {
    margin-inline-end: calc(var(--gutter, 0px) * -0.45 - 2.25rem) !important;
  }
  .how-row--reverse .product-frame--bleed {
    margin-inline-start: calc(var(--gutter, 0px) * -0.45 - 2.25rem) !important;
  }
}

/* —— Proof: Slack-scale oversized metrics —— */
.proof-band {
  padding-block: clamp(4.5rem, 9vw, 7rem) !important;
}
.proof-band h2 {
  font-size: clamp(2.25rem, 4vw, 3.25rem) !important;
  max-width: 16ch !important;
  letter-spacing: -0.04em;
}
.proof-figure {
  font-size: clamp(4.25rem, 10vw, 6.75rem) !important;
  letter-spacing: -0.07em !important;
}
.proof-label {
  font-size: 1.0625rem !important;
  max-width: 20ch !important;
}

/* —— Closing chapter: bigger type, green CTA only —— */
.closing.closing--story {
  padding-block: clamp(5rem, 10vw, 8rem) !important;
}
.closing.closing--story h2 {
  font-size: clamp(2.5rem, 5vw, 3.75rem) !important;
  max-width: 14ch !important;
  letter-spacing: -0.045em;
}

/* —— Comparison: editorial weight on winner —— */
.compare-row {
  border-radius: 14px;
  padding: 1.15rem 1.35rem;
}
.compare-winner {
  border: 1.5px solid color-mix(in srgb, var(--brand) 45%, transparent) !important;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--brand) 12%, transparent);
}
.compare-winner code {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 750;
}

/* —— QR dark chapter: more drama, less mint —— */
.qr-band {
  margin-top: clamp(4rem, 8vw, 6.5rem);
  border-radius: 0;
}
.qr-band h2 {
  font-size: clamp(2.35rem, 4.4vw, 3.4rem);
  max-width: 14ch;
}

/* —— Tool card: premium depth, green only on convert —— */
.tool-card {
  border-radius: 20px !important;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 80%, transparent) inset,
    0 20px 50px color-mix(in srgb, var(--text-primary) 10%, transparent),
    0 60px 120px color-mix(in srgb, var(--creative-plum) 8%, transparent) !important;
}
.tool-stage::before {
  background: linear-gradient(150deg,
    var(--surface-lilac) 0%,
    color-mix(in srgb, var(--surface-tide-wash) 70%, #fff) 45%,
    var(--surface-amber-wash) 100%) !important;
  opacity: 0.92 !important;
}

/* —— Motion craft: calmer reveals feel premium —— */
@media (prefers-reduced-motion: no-preference) {
  .capability-card,
  .pain-card,
  .product-frame {
    transition:
      transform 320ms var(--ease-standard),
      box-shadow 320ms var(--ease-standard);
  }
}

/* Reduce over-safe mint on trust rail */
.trust-rail {
  background: linear-gradient(180deg, #fff, var(--surface-lilac)) !important;
}

/* ============================================================================
   PREMIUM PASS 4b — editorial alignment, stage dominance, less template center
   ============================================================================ */

/* Left-align story intros (Slack Knowledge pattern); keep proof/closing centered */
.pain-band .section-intro,
.how-section .section-intro,
.how-intro,
.capability-band .section-intro,
.comparison > [data-reveal-group],
.faq .section-intro {
  text-align: left !important;
  margin-inline: 0 !important;
  max-width: 40rem;
}
.pain-band .section-intro .section-lead,
.capability-band .section-intro .section-lead,
.comparison .section-lead {
  margin-inline: 0 !important;
}
.pain-band .section-intro h2,
.how-intro h2,
.capability-band .section-intro h2 {
  max-width: min(28ch, 100%);
  line-height: 1.05;
}

/* How: give media even more of the stage */
@media (min-width: 1000px) {
  .how-row {
    grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.42fr) !important;
  }
  .how-row--reverse,
  .how-row--soft.how-row--reverse {
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.68fr) !important;
  }
}

/* Pain: stronger first-card dominance */
@media (min-width: 901px) {
  .pain-grid {
    grid-template-columns: 1.55fr 1fr 1fr !important;
    gap: 1.5rem !important;
  }
}

/* Capability media: editorial inset plate, colored wash owns the frame */
.capability-media {
  margin: 1rem 1rem 0 !important;
  border-radius: 14px !important;
  box-shadow:
    0 8px 24px color-mix(in srgb, var(--text-primary) 8%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 40%, transparent) inset;
}
.capability-card[data-accent="coral"] .capability-media {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--creative-coral) 22%, #fff), var(--mkt-coral-soft)) !important;
}
.capability-card[data-accent="tide"] .capability-media {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--creative-tide) 20%, #fff), var(--mkt-tide-soft)) !important;
}
.capability-card[data-accent="amber"] .capability-media {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--creative-amber) 24%, #fff), var(--mkt-amber-soft)) !important;
}
.capability-card[data-accent="plum"] .capability-media {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--creative-plum) 24%, #fff), var(--mkt-plum-soft)) !important;
}

/* Hero: bigger stage presence, less mint-blob wallpaper */
.hero-blobs .blob--mint { opacity: 0.35 !important; }
.hero-blobs .blob--iris { opacity: 0.7 !important; }
.hero-blobs .blob--amber { opacity: 0.55 !important; }
.hero h1 {
  max-width: min(22ch, 100%);
  line-height: 1.02;
}
html[lang="zh-Hant"] .hero h1,
html[lang="ja"] .hero h1,
html[lang="ko"] .hero h1,
html[lang="th"] .hero h1 {
  max-width: min(28ch, 100%);
}
.hero-lead--domains {
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.tool-card {
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

/* Use section heading left + tabs right already; strengthen copy rail */
.use-copy h3 {
  max-width: 12ch;
}
.use-copy .text-action {
  color: var(--creative-tide);
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
}

/* Proof figures: hairline separators between stats */
@media (min-width: 900px) {
  .proof-stat {
    position: relative;
    padding-inline: 1rem;
  }
  .proof-stat:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 12%;
    bottom: 18%;
    width: 1px;
    background: color-mix(in srgb, #fff 16%, transparent);
  }
}

/* Comparison rows: more editorial rhythm */
.comparison-links {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 40rem;
}
.compare-row code {
  font-size: 1.05rem;
}
.compare-winner code {
  color: var(--on-brand);
}

/* QR copy max measure for intentional wraps */
.qr-copy h2 {
  max-width: 12ch !important;
}
.qr-copy > p:not(.eyebrow) {
  max-width: 36ch;
}

/* Soften equal FAQ weight */
.faq-list details {
  border-radius: 12px;
  padding: 0.35rem 0.25rem;
}
.faq-list details[open] {
  background: color-mix(in srgb, var(--surface-plum-wash) 70%, #fff);
}

/* ============================================================================
   PREMIUM PASS 4c — stage dominance + chrome craft
   ============================================================================ */

@media (min-width: 1000px) {
  .how-row {
    grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.52fr) !important;
    column-gap: clamp(1.5rem, 3vw, 2.75rem) !important;
  }
  .how-row--reverse,
  .how-row--soft.how-row--reverse {
    grid-template-columns: minmax(0, 1.52fr) minmax(0, 0.58fr) !important;
  }
}

/* Product chrome: denser, accent-aware (Slack app chrome energy) */
.product-chrome {
  display: flex !important;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 0.85rem 0.45rem !important;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--text-primary) 4%, #fff),
    transparent) !important;
}
.product-chrome .chrome-label {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.product-chrome--dark {
  background: linear-gradient(180deg,
    color-mix(in srgb, #fff 6%, transparent),
    transparent) !important;
}
.product-chrome--dark .chrome-label { color: color-mix(in srgb, #fff 55%, transparent); }

/* Stronger bleed aura behind frames */
.product-bleed {
  filter: blur(28px);
  opacity: 0.85;
}

/* Capability analytics: bias crop to chart band */
.capability-card[data-accent="plum"] .capability-media img {
  object-position: 30% 55% !important;
  transform: scale(1.08) !important;
}
.capability-card[data-accent="plum"]:hover .capability-media img {
  transform: scale(1.12) !important;
}

/* How s06: slight plate skew only (sparing) */
.how-row[data-accent="plum"] .media-plate::before {
  transform: skewY(-1.75deg) scale(1.02) rotate(-0.4deg) !important;
}

/* Trust strip: quieter, editorial */
.trust-strip {
  justify-content: flex-start !important;
  gap: 1.5rem !important;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Hero note quieter */
.hero-note {
  max-width: 36ch;
}

/* Closing CTA: brand green only — ensure ghost doesn't compete */
.closing.closing--story .btn-primary {
  box-shadow:
    0 10px 32px color-mix(in srgb, var(--brand) 35%, transparent),
    0 2px 0 color-mix(in srgb, #fff 25%, transparent) inset !important;
}


/* —— TYPO CRAFT — tight headline stacks, fewer forced wraps —— */
.section-intro h2,
.how-intro h2,
.pain-band .section-intro h2,
.capability-band .section-intro h2 {
  line-height: 1.05 !important;
  max-width: min(28ch, 100%) !important;
}
.how-copy h3,
.use-copy h3 {
  line-height: 1.08;
}
/* Short punch lines: no forced desk breaks (natural wrap OK) */
#use-title .br-desk,
#stories-title .br-desk {
  display: none !important;
}
/* Raise/columns owned by styles.css --how-* + wrap grid (do not reintroduce overlap) */
@media (min-width: 1000px) {
  .how-section .how-intro {
    margin-bottom: 0 !important;
    max-width: 100% !important;
    width: auto !important;
  }
  .how-stack > .how-row:first-child {
    align-items: start;
  }
}
html[lang="zh-Hant"] .br-desk {
  /* Prefer CSS wrap over hard breaks for short ZH display lines */
}

/* CJK display heads: no mid-word wraps */
html[lang="zh-Hant"] h1,
html[lang="zh-Hant"] h2,
html[lang="zh-Hant"] h3,
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3 {
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: normal;
}

/* —— CJK / body sentence UI (durable) ——
   Keep words intact (廣告 not 廣|告。). Prefer keep-all + strict line-break
   on body/lead so single-character orphans like 「告。」 do not sit alone.
   Heads already use keep-all; extend to section leads and paragraphs. */
html[lang="zh-Hant"] body,
html[lang="ja"] body,
html[lang="ko"] body,
html[lang="th"] body {
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: anywhere; /* long URLs/latin still wrap */
}
html[lang="zh-Hant"] .section-lead,
html[lang="zh-Hant"] .how-copy p,
html[lang="zh-Hant"] .feat-body p,
html[lang="zh-Hant"] .pain-card p,
html[lang="zh-Hant"] .promise-list li,
html[lang="zh-Hant"] p,
html[lang="ja"] .section-lead,
html[lang="ja"] .how-copy p,
html[lang="ja"] p,
html[lang="ko"] .section-lead,
html[lang="ko"] .how-copy p,
html[lang="ko"] p {
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.section-lead,
.how-copy p,
.feat-body > p,
.pain-card > p {
  text-wrap: pretty;
}



/* —— Batch E: explicit intro alignment modifiers —— */
.intro--left,
.section-intro.intro--left {
  text-align: left !important;
  margin-inline: 0 !important;
  max-width: 40rem;
}
.intro--left h2,
.section-intro.intro--left h2,
.intro--left .section-lead,
.section-intro.intro--left .section-lead {
  margin-inline: 0 !important;
  text-align: left !important;
}
.intro--center,
.section-intro.intro--center {
  text-align: center !important;
  margin-inline: auto !important;
  max-width: 36rem;
}
.intro--center h2,
.section-intro.intro--center h2,
.intro--center .section-lead,
.section-intro.intro--center .section-lead {
  margin-inline: auto !important;
  text-align: center !important;
}
/* Ban center-text-on-left-maxwidth box */
.section-intro:not(.intro--center):not(.intro--left) {
  /* default stays as prior section rules; prefer explicit modifiers in markup */
}
/* Industry band → left */
.industry-band .section-intro {
  text-align: left !important;
  margin-inline: 0 !important;
  max-width: 40rem;
}
.industry-band .section-intro h2,
.industry-band .section-intro .section-lead {
  text-align: left !important;
  margin-inline: 0 !important;
}


/* —— Batch F: one how-section media-plate wash (no per-step rainbow) —— */
.how-section {
  --how-plate: linear-gradient(145deg, var(--surface-mint-wash) 0%, color-mix(in srgb, var(--brand) 10%, #fff) 45%, #fff 100%);
}
.how-section .media-plate::before,
.how-section .media-plate--tide::before,
.how-section .media-plate--amber::before,
.how-section .media-plate--plum::before,
.how-section .media-plate--mint::before {
  background: var(--how-plate) !important;
}

/* Locked how-intro CJK width — do not reintroduce 28ch orphan wraps */
html[lang="zh-Hant"] .section-intro h2,
html[lang="zh-Hant"] .how-intro h2,
html[lang="ja"] .section-intro h2,
html[lang="ja"] .how-intro h2,
html[lang="ko"] .section-intro h2,
html[lang="ko"] .how-intro h2 {
  max-width: 100% !important;
}