/* Product stories keep the marketing typography; previews mirror the app's light theme. */
.product-page { --story-accent: #b8421d; --story-soft: #f8e3d4; --story-dark: #43281e; }
.product-ugc { --story-accent: #665084; --story-soft: #e7e0ed; --story-dark: #332a42; }
.product-team { --story-accent: #286c58; --story-soft: #dce9df; --story-dark: #193a30; }
.product-revenue { --story-accent: #856019; --story-soft: #f0e4c5; --story-dark: #3e321e; }
.product-usage { --story-accent: #32665d; --story-soft: #dce9e1; --story-dark: #253d37; }
.product-contract { --story-accent: #465976; --story-soft: #dce3eb; --story-dark: #273449; }
.product-page .guide-kicker { color: var(--story-accent); }
.product-page .product-hero { padding: 54px 0 32px; }
.product-page .product-hero-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 38px; align-items: center; }
.product-page .product-hero-copy { min-width: 0; }
.product-page .product-hero h1 { font-size: clamp(35px, 3.6vw, 49px); max-width: 20ch; }
.product-page .product-hero .guide-intro { font-size: 18px; line-height: 1.6; }
.product-page .product-text-link { display: block; width: fit-content; margin-top: 22px; font-size: 14px; font-weight: 500; color: var(--story-accent); }
.product-page .product-hero-wide { display: block; }
.product-page .product-hero-wide .product-hero-copy { max-width: 760px; margin: 0 auto 38px; text-align: center; }
.product-page .product-hero-wide h1 { margin-inline: auto; font-size: clamp(36px, 4.7vw, 61px); max-width: 23ch; }
.product-page .product-hero-wide .product-text-link { margin-inline: auto; }
.product-page .product-preview { margin: 0; min-width: 0; scroll-margin-top: 20px; }
.product-page .preview-mat { padding: 20px; border-radius: 20px; background: var(--story-soft); position: relative; }
.product-page .product-hero-wide .preview-mat { padding: 30px 38px; }
.product-page .product-preview figcaption { margin-top: 14px; color: #6e5f44; font: 400 11px/1.6 "IBM Plex Mono", monospace; text-align: center; }
.product-page .product-promises { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; list-style: none; padding: 22px 0 32px; margin: 0 0 34px; border-bottom: 1px solid #d0c1a0; font-size: 14px; }
.product-page .product-promises span { display: inline-grid; place-items: center; margin-right: 8px; width: 23px; height: 23px; background: var(--story-soft); color: var(--story-accent); border-radius: 50%; }
.product-page .product-chapter { max-width: 780px; padding-block: 25px 28px; }
.product-page .product-chapter h2 { font-size: clamp(28px, 3.4vw, 42px); margin-top: 14px; }
.product-page .guide-cta { background: var(--story-soft); }
.product-page .walkthrough { background: var(--story-dark); }
.product-page .guide-article .guide-note { border-color: var(--story-accent); background: var(--story-soft); }
.product-team .preview-mat { background: var(--story-dark); }
.product-team .product-chapter { margin-inline: auto; text-align: center; }
.product-team .guide-layout, .product-ugc .guide-layout { display: block; border-top: 0; padding-top: 0; }
.product-team .guide-layout > aside, .product-ugc .guide-layout > aside { position: static; padding: 20px 0; margin-bottom: 32px; border-block: 1px solid #d0c1a0; }
.product-team .guide-toc ol, .product-ugc .guide-toc ol { display: flex; flex-wrap: wrap; gap: 9px 22px; list-style: none; padding: 0; }
.product-team .guide-article { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.product-team .guide-article #questions { grid-column: 1 / -1; }
.product-team .guide-cards { gap: 10px; }
.product-ugc .guide-article { max-width: 820px; margin-inline: auto; }
.product-ugc .preview-mat { padding: 25px 18px; border-radius: 60px 16px 16px 16px; }
.product-ugc .product-preview { transform: rotate(1deg); }
.product-revenue .product-hero-wide .product-hero-copy { margin-left: 0; text-align: left; max-width: 850px; }
.product-revenue .product-hero-wide h1 { margin-left: 0; }
.product-revenue .product-hero-wide .product-text-link { margin-left: 0; }
.product-revenue .preview-mat { background-image: linear-gradient(#85601912 1px, transparent 1px), linear-gradient(90deg, #85601912 1px, transparent 1px); background-size: 24px 24px; }
.product-contract .preview-mat { background: var(--story-dark); }
.product-usage .guide-layout > aside { padding: 22px; background: var(--story-soft); border-radius: 12px; }

/* Read-only app snippets: same color tokens, system font, labels and shapes as the product. */
.product-page .app-frame {
  --app-bg: oklch(0.982 0.007 88);
  --app-fg: oklch(0.205 0.012 72);
  --app-card: oklch(0.998 0.002 88);
  --app-muted: oklch(0.952 0.009 88);
  --app-border: oklch(0.855 0.012 78);
  --app-brand: oklch(0.76 0.17 57);
  --app-soft: oklch(0.93 0.075 76);
  display: flex; min-width: 0; overflow: hidden; border: 1px solid var(--app-border);
  border-radius: 10px; background: var(--app-bg); color: var(--app-fg);
  box-shadow: 0 15px 40px #21190918;
  font: 400 12px/1.5 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left;
}
.product-page .app-frame strong, .product-page .app-frame b { font-family: inherit; }
.product-page .app-sidebar { flex: 0 0 126px; padding: 16px 9px; background: oklch(0.965 0.012 86); border-right: 1px solid var(--app-border); display: flex; flex-direction: column; gap: 5px; }
.product-page .app-wordmark { display: flex; gap: 7px; align-items: center; font-size: 19px; font-weight: 800; line-height: 1; padding: 0 6px 20px; }
.product-page .app-wordmark > .app-logo { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 7px; background: url('/logo.png') center / 450% auto no-repeat; }
.product-page .app-sidebar > small { font-size: 9px; letter-spacing: .06em; color: #706b64; padding: 7px 6px; }
.product-page .app-nav-item { display: block; padding: 7px 6px; border-radius: 5px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.product-page .app-nav-item.selected { background: var(--app-soft); }
.product-page .app-user { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 26px; font-size: 10px; }
.product-page .app-user > span, .product-page .app-profile { display: inline-grid; place-items: center; border-radius: 50%; background: var(--app-soft); width: 24px; height: 24px; font-size: 9px; font-weight: 700; }
.product-page .app-window { min-width: 0; flex: 1; }
.product-page .app-topbar { height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 17px; border-bottom: 1px solid var(--app-border); font-size: 11px; }
.product-page .app-workspace { padding: 22px; }
.product-page .app-heading { margin-bottom: 20px; }
.product-page .app-heading > strong { display: block; font-size: 28px; font-weight: 850; letter-spacing: -.045em; line-height: 1.2; margin-top: 10px; }
.product-page .app-heading > p { color: #706b64; font-size: 12px; margin: 7px 0 0; }
.product-page .app-badge { display: inline-block; width: fit-content; padding: 3px 7px; border: 1px solid var(--app-border); border-radius: 5px; font-size: 10px; font-weight: 600; line-height: 1.3; }
.product-page .app-badge.warm { background: var(--app-soft); border-color: transparent; }
.product-page .app-badge.teal { background: #e6f0e8; border-color: #c1d6c7; color: #28553b; }
.product-page .app-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 20px; }
.product-page .app-stat { padding: 13px; border-radius: 9px; background: var(--app-card); border: 1px solid #29251e18; }
.product-page .app-stat > span, .product-page .app-stat > small { display: block; color: #706b64; font-size: 10px; }
.product-page .app-stat > strong { display: block; font-size: 24px; line-height: 1.3; margin: 7px 0 2px; letter-spacing: -.04em; }
.product-page .app-board { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 5px; }
.product-page .app-lane { flex: 1 0 126px; background: #f0eeea; border: 1px solid #29251e12; border-radius: 8px; padding: 9px; }
.product-page .lane-title { font-size: 10px; font-weight: 700; margin-bottom: 12px; display: flex; gap: 5px; align-items: center; }
.product-page .lane-title > span { margin-left: auto; color: #706b64; }
.product-page .lane-title > i { width: 6px; height: 6px; border-radius: 50%; }
.product-page .lane-title .blue { background: #3b82f6; }
.product-page .lane-title .violet { background: #8b5cf6; }
.product-page .lane-title .teal { background: #06b6d4; }
.product-page .app-deal { padding: 11px; background: var(--app-card); border: 1px solid #29251e18; border-radius: 8px; }
.product-page .app-deal > small { display: block; color: #706b64; font-size: 8px; font-weight: 700; letter-spacing: .06em; }
.product-page .app-deal > strong { display: block; margin-block: 7px 14px; font-size: 12px; }
.product-page .app-deal > b { display: block; margin-block: 18px 10px; font-size: 19px; letter-spacing: -.04em; }
.product-page .app-deal > p { margin: 8px 0 0; font-size: 9px; color: #706b64; }
.product-page .app-progress { height: 5px; border-radius: 5px; background: #e9e5df; overflow: hidden; }
.product-page .app-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--app-brand); }
.product-page .app-deliverable { margin-top: 13px; border-radius: 9px; background: var(--app-card); border: 1px solid #29251e18; padding: 17px; }
.product-page .app-deliverable-head { display: flex; align-items: start; gap: 9px; }
.product-page .app-deliverable-head > div { flex: 1; min-width: 0; }
.product-page .app-deliverable-head strong { display: block; font-size: 13px; margin-top: 4px; }
.product-page .app-deliverable-head small { font-size: 10px; color: #706b64; }
.product-page .app-check { flex: 0 0 15px; width: 15px; height: 15px; border: 1px solid var(--app-border); border-radius: 3px; margin-top: 3px; line-height: 13px; text-align: center; }
.product-page .app-check.checked { background: var(--app-fg); border-color: var(--app-fg); color: white; }
.product-page .app-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.product-page .app-field > span { display: block; font-size: 10px; color: #706b64; }
.product-page .app-field > strong { display: block; font-size: 11px; margin-top: 5px; }
.product-page .app-card-footer { margin-top: 16px; border-top: 1px solid #29251e18; padding-top: 10px; font-size: 10px; font-weight: 600; }
.product-page .app-panel-title { font-size: 14px; font-weight: 600; margin: 16px 0 12px; }
.product-page .app-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.product-page .app-filter-row > span { padding: 6px 10px; border: 1px solid var(--app-border); border-radius: 5px; background: var(--app-card); font-size: 10px; }
.product-page .app-table-list { display: grid; gap: 10px; }
.product-page .app-table-row { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; background: var(--app-card); padding: 16px; border: 1px solid #29251e18; border-radius: 9px; }
.product-page .app-table-row strong { display: block; font-size: 13px; }
.product-page .app-table-row small { display: block; font-size: 11px; margin-top: 5px; color: #706b64; }
.product-page .app-fineprint { color: #706b64; font-size: 10px; margin: 15px 0 0; }
.product-page .app-member-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.product-page .app-member { padding: 16px; background: var(--app-card); border-radius: 9px; border: 1px solid #29251e18; }
.product-page .app-member-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 16px; }
.product-page .app-avatar { display: inline-grid; place-items: center; height: 34px; width: 34px; border-radius: 9px; background: var(--app-soft); font-weight: 700; }
.product-page .app-member > strong { font-size: 14px; }
.product-page .app-member-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--app-muted); border-radius: 6px; padding: 10px; margin: 14px 0; }
.product-page .app-member > small { font-size: 10px; color: #706b64; }
.product-page .app-member > p { margin: 4px 0 0; font-size: 11px; }
.product-page .preview-controls { display: flex; justify-content: center; gap: 5px; padding: 5px; width: fit-content; margin: 0 auto 22px; background: #ffffff14; border: 1px solid #ffffff35; border-radius: 8px; }
.product-page .preview-controls[hidden], .product-page [data-preview-panel][hidden] { display: none; }
.product-page .preview-controls button { appearance: none; border: 0; padding: 10px 22px; border-radius: 5px; color: #f0e8d4; background: transparent; font: 500 13px "IBM Plex Sans", sans-serif; cursor: pointer; }
.product-page .preview-controls button[aria-pressed="true"] { background: #f0e8d4; color: #193a30; }
.product-page [data-preview-panel] + [data-preview-panel] { margin-top: 22px; }
.product-page [data-preview-switcher].preview-ready [data-preview-panel] { margin-top: 0; }
.product-page .revenue-stats .app-stat { padding: 19px; }
.product-page .revenue-stats .app-stat strong { font-size: 34px; }
.product-page .revenue-stats .app-stat:first-child { border-top: 3px solid #53936d; }
.product-page .revenue-stats .app-stat:nth-child(2) { border-top: 3px solid #c99032; }
.product-page .revenue-stats .app-stat:last-child { border-top: 3px solid #7483ba; }
.product-page .app-revenue-lower { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; }
.product-page .app-revenue-brands, .product-page .app-invoice { padding: 18px; background: var(--app-card); border: 1px solid #29251e18; border-radius: 9px; }
.product-page .app-revenue-lower .app-panel-title { margin-top: 0; }
.product-page .app-brand-total { margin-top: 17px; }
.product-page .app-brand-total > div:first-child { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 9px; font-size: 11px; }
.product-page .app-invoice > strong { display: block; margin: 12px 0 8px; }
.product-page .app-invoice > b { display: block; font-size: 24px; }
.product-page .app-invoice > b small { font-size: 11px; color: #706b64; }
.product-page .app-invoice > p { color: #706b64; font-size: 10px; margin-bottom: 0; }
.product-page .app-insight { padding: 17px; background: var(--app-card); border: 1px solid #dbbd79; border-radius: 9px; margin-top: 17px; }
.product-page .app-insight > strong { display: block; font-size: 14px; margin: 10px 0 8px; }
.product-page .app-insight > p { color: #706b64; font-size: 11px; }
.product-page .app-evidence { display: grid; grid-template-columns: auto 1fr; gap: 7px 15px; padding: 12px; background: var(--app-muted); border-radius: 5px; font-size: 10px; }
.product-page .app-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.product-page .app-document { padding: 24px; border: 1px solid var(--app-border); background: white; border-radius: 6px; }
.product-page .app-document > small { color: #706b64; font-size: 9px; }
.product-page .app-document > strong { display: block; font-size: 21px; margin-top: 24px; }
.product-page .app-document > p { font-size: 11px; margin: 7px 0 26px; color: #706b64; }
.product-page .document-line { height: 5px; background: #e8e4dd; margin: 9px 0; width: 100%; }
.product-page .document-line.short { width: 70%; }
.product-page .app-document blockquote { padding: 14px; margin: 22px 0; background: #fff3d7; border-left: 3px solid #c9a446; font-size: 12px; line-height: 1.9; }
.product-page .app-review-fields .app-field { margin-bottom: 13px; }
.product-page .app-review-fields .app-field strong { padding: 10px 12px; background: var(--app-card); border: 1px solid var(--app-border); border-radius: 5px; font-weight: 500; font-size: 12px; }
.product-page .app-evidence-note { padding: 10px; border-radius: 6px; background: #e6f0e8; color: #28553b; font-size: 11px; }
.product-page .app-review-note { padding-top: 15px; font-size: 10px; color: #706b64; }
.product-creator .app-sidebar { display: none; }
.product-creator .app-workspace { padding: 17px; }
@media (max-width: 950px) {
  .product-page .product-hero-split { grid-template-columns: 1fr; }
  .product-page .product-hero-split .product-hero-copy { max-width: 700px; }
  .product-page .product-hero h1 { font-size: clamp(35px, 5vw, 52px); max-width: 24ch; }
  .product-page .product-hero-split .product-preview { max-width: 700px; width: 100%; margin-inline: auto; }
  .product-page .app-member-grid { gap: 9px; }
  .product-page .app-member { padding: 12px; }
}
@media (max-width: 700px) {
  .product-page .product-hero { padding-top: 35px; }
  .product-page .product-hero-wide .preview-mat { padding: 17px; }
  .product-page .app-sidebar { display: none; }
  .product-page .product-promises { justify-content: start; }
  .product-team .guide-article { display: block; }
  .product-page .app-workspace { padding: 16px; }
  .product-page .app-member-grid { grid-template-columns: 1fr; }
  .product-page .app-member-numbers { margin-block: 10px; }
  .product-page .app-revenue-lower { grid-template-columns: 1fr; }
  .product-page .app-review-grid { grid-template-columns: 1fr; }
  .product-page .app-table-row { grid-template-columns: 1fr auto; gap: 10px; padding: 12px; }
  .product-page .app-table-row > .app-badge { grid-column: 1 / -1; }
}
@media (max-width: 450px) {
  .product-page .preview-mat, .product-page .product-hero-wide .preview-mat { padding: 10px; border-radius: 13px; }
  .product-page .app-workspace { padding: 12px; }
  .product-page .app-stats { gap: 5px; }
  .product-page .app-stat, .product-page .revenue-stats .app-stat { padding: 9px; }
  .product-page .app-stat > strong, .product-page .revenue-stats .app-stat > strong { font-size: 20px; }
  .product-page .app-deliverable { padding: 12px; }
  .product-page .app-deliverable-head { flex-wrap: wrap; }
  .product-page .app-fields { grid-template-columns: 1fr 1fr; gap: 12px; }
  .product-page .app-field > strong { font-size: 10px; }
  .product-page .app-deliverable-head > .app-badge { margin-left: 24px; }
  .product-ugc .product-preview { transform: none; }
  .product-page .product-hero h1 { font-size: 35px; }
  .product-page .product-hero .guide-intro { font-size: 17px; }
}