/* C usecase pages. Existing words, controls, examples, data and launch runtime
   are retained. The established public C bridge remains the last stylesheet. */
@font-face {
  font-family: Newsreader; src: url("homepage-voices/fonts/newsreader.woff2") format("woff2");
  font-style: normal; font-weight: 200 800; font-display: swap;
}
@font-face {
  font-family: "Newsreader Fallback"; src: local("Georgia");
  size-adjust: 88.483570%; ascent-override: 83.066269%; descent-override: 29.949063%; line-gap-override: 0%;
}
body[data-public-c-pages="usecase"] {
  --public-c-prose: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --public-c-voice-a: #FF5B3A; --public-c-voice-b: #4EA3FF;
  --public-c-pad: clamp(20px, 4.4vw, 64px);
}
body[data-public-c-pages="usecase"] .hero {
  --ink: #FFF7F0; --prose: #FFF7F0; --muted: #BFB2A9;
  --accent-ink: #FFF7F0; --btn-bg: #FFF7F0; --btn-fg: #16110F;
  width: 100%; max-width: none; margin: 0;
  padding: clamp(52px, 7vw, 100px) max(var(--public-c-pad), calc((100% - 1152px) / 2)) 64px;
  background: #16110F; color: #FFF7F0;
}
body[data-public-c-pages="usecase"] .hero h1 {
  max-width: 1020px; font-size: clamp(42px, 6vw, 86px); line-height: 1.04;
  font-weight: 850; letter-spacing: -.025em; text-wrap: balance;
}
body[data-public-c-pages="usecase"] .hero .lead { max-width: 66ch; margin-top: 24px; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.55; }
body[data-public-c-pages="usecase"] .hero .breadcrumbs { color: #BFB2A9; margin-bottom: 28px; font-size: 14px; }
body[data-public-c-pages="usecase"] .hero .hero-actions { flex-wrap: wrap; gap: 14px 24px; margin-top: 30px; }
body[data-public-c-pages="usecase"] .hero .text-action { color: #FFF7F0; font-size: 16px; text-decoration-thickness: 1px; }
body[data-public-c-pages="usecase"] .hero .hero-free { margin-top: 18px; color: #BFB2A9; font-size: 14px; }
body[data-public-c-pages="usecase"] .hero :focus-visible { outline-color: #FFF7F0; }
body[data-public-c-pages="usecase"] :is(.review-section, .home-content, .content-section) { margin-top: clamp(64px, 8vw, 112px); }
body[data-public-c-pages="usecase"] :is(.section-intro, .home-content, .content-section, .next-version, .product-footer).column {
  width: min(1152px, calc(100% - 2 * var(--public-c-pad)));
}
body[data-public-c-pages="usecase"] :is(.section-intro h2, .home-content > h2, .content-section > h2) {
  max-width: 900px; font-size: clamp(30px, 3.4vw, 46px); font-weight: 820; line-height: 1.12;
}
body[data-public-c-pages="usecase"] .example-brief { max-width: 66ch; margin-top: 14px; font-size: 18px; }
body[data-public-c-pages="usecase"] .disclosure { font-size: 13px; }
body[data-public-c-pages="usecase"] .review-workspace {
  width: min(1200px, calc(100% - 2 * var(--public-c-pad)));
  display: grid; grid-template-columns: minmax(240px, 310px) minmax(0, 1fr);
  gap: 24px; margin-top: 32px; border: 0; align-items: start;
}
body[data-public-c-pages="usecase"] .inputs-pane { padding: 0; border: 0; min-width: 0; }
body[data-public-c-pages="usecase"] .panel-title { font: 760 17px/1.4 var(--display); color: var(--ink); margin-bottom: 16px; }
body[data-public-c-pages="usecase"] .input-card { --public-c-voice: var(--public-c-voice-a); background: var(--canvas); border: 1px solid var(--line); border-left: 4px solid var(--public-c-voice); border-radius: 8px; margin-bottom: 14px; }
body[data-public-c-pages="usecase"] .input-card[data-input="2"] { --public-c-voice: var(--public-c-voice-b); }
body[data-public-c-pages="usecase"] .input-card.is-preview { border-color: var(--public-c-voice); }
body[data-public-c-pages="usecase"] .input-card.is-selected { background: color-mix(in srgb, var(--public-c-voice) 9%, var(--canvas)); box-shadow: inset 0 0 0 1px var(--public-c-voice); }
body[data-public-c-pages="usecase"] .input-select { padding: 18px 16px; color: var(--ink); }
body[data-public-c-pages="usecase"] .input-select:hover:not(:disabled) { color: var(--ink); }
body[data-public-c-pages="usecase"] .input-header { gap: 10px; font-size: 15px; }
body[data-public-c-pages="usecase"] .input-header b { font-weight: 760; }
body[data-public-c-pages="usecase"] .card-text { font-size: 17px; line-height: 1.45; }
body[data-public-c-pages="usecase"] :is(.card-kind, .card-note) { font-size: 13px; }
body[data-public-c-pages="usecase"] .is-selected .input-check { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
body[data-public-c-pages="usecase"] .result-pane { border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); overflow: clip; box-shadow: 0 14px 40px color-mix(in srgb, var(--ink) 7%, transparent); }
body[data-public-c-pages="usecase"] .result-head { background: var(--panel); padding: 16px 24px; gap: 12px; flex-wrap: wrap; }
body[data-public-c-pages="usecase"] .result-label { color: var(--ink); font-weight: 650; }
body[data-public-c-pages="usecase"] .review-tabs { border-radius: 6px; overflow: hidden; }
body[data-public-c-pages="usecase"] .review-tabs button { min-height: 44px; font-size: 14px; }
body[data-public-c-pages="usecase"] .result-scroll { padding: 30px 48px 24px 30px; }
body[data-public-c-pages="usecase"] :is(.result-page, .draft-paragraph, .next-page, .original-comparison > div) {
  font-family: var(--public-c-prose); font-optical-sizing: auto; font-variation-settings: "opsz" 24;
  font-size: clamp(18px, 1.8vw, 21px); line-height: 1.65;
}
/* launch.js measures cloned paragraphs and a direct-body aria-hidden title.
   Give those unchanged measurement nodes the actual page typography as well. */
body[data-public-c-pages="usecase"] .result-page h3,
body[data-public-c-pages="usecase"] > h3[aria-hidden="true"] {
  font: 760 clamp(24px, 2.5vw, 30px)/1.25 var(--display); letter-spacing: -.015em;
}
body[data-public-c-pages="usecase"] #example[data-preview="1"] { --public-c-preview: var(--public-c-voice-a); }
body[data-public-c-pages="usecase"] #example[data-preview="2"] { --public-c-preview: var(--public-c-voice-b); }
body[data-public-c-pages="usecase"] .preview-bars i { background: var(--public-c-preview, var(--ink)); }
body[data-public-c-pages="usecase"] .preview-dot::after { background: var(--public-c-preview, var(--ink)); }
body[data-public-c-pages="usecase"] .result-page ins { color: var(--ink); background: color-mix(in srgb, var(--public-c-preview, var(--ink)) 15%, transparent); border-color: var(--public-c-preview, var(--ink)); }
body[data-public-c-pages="usecase"] :is(.changes-panel, .conflict) { border-color: var(--line); border-radius: 6px; background: var(--panel); }
body[data-public-c-pages="usecase"] :is(.choice, .text-button) { font-size: 14px; border-radius: 6px; }
body[data-public-c-pages="usecase"] .choice[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); background: var(--raise); }
body[data-public-c-pages="usecase"] .result-foot { padding: 18px 24px; background: var(--panel); border-color: var(--line); flex-wrap: wrap; gap: 12px; }
body[data-public-c-pages="usecase"] .result-foot .quiet { max-width: 34ch; font-size: 13px; }
body[data-public-c-pages="usecase"] .decision-actions { flex-wrap: wrap; gap: 8px; }
body[data-public-c-pages="usecase"] .original-comparison { padding: 18px 24px; }
body[data-public-c-pages="usecase"] .original-comparison summary { font-size: 14px; }
body[data-public-c-pages="usecase"] .next-version { padding: 28px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
body[data-public-c-pages="usecase"] .next-version > h3 { font: 760 22px/1.3 var(--display); margin-bottom: 18px; }
body[data-public-c-pages="usecase"] .next-version > p { margin-top: 20px; font-size: 16px; }
body[data-public-c-pages="usecase"] .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
body[data-public-c-pages="usecase"] .steps li { padding: 44px 0 0; border-top: 4px solid var(--public-c-voice-a); }
body[data-public-c-pages="usecase"] .steps li:nth-child(2) { border-color: #FFC21A; }
body[data-public-c-pages="usecase"] .steps li:nth-child(3) { border-color: #2FD38A; }
body[data-public-c-pages="usecase"] .steps li::before { top: 14px; font: 800 20px/1 var(--display); color: var(--ink); }
body[data-public-c-pages="usecase"] .steps h3 { font: 760 21px/1.25 var(--display); margin-bottom: 14px; }
body[data-public-c-pages="usecase"] .steps p { font-size: 16px; line-height: 1.65; }
body[data-public-c-pages="usecase"] .values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
body[data-public-c-pages="usecase"] .values article { margin: 0; padding: 28px; border: 1px solid var(--line); border-top: 4px solid var(--public-c-voice-a); border-radius: 8px; background: var(--panel); }
body[data-public-c-pages="usecase"] .values article:nth-child(5n + 2) { border-top-color: #FFC21A; }
body[data-public-c-pages="usecase"] .values article:nth-child(5n + 3) { border-top-color: #2FD38A; }
body[data-public-c-pages="usecase"] .values article:nth-child(5n + 4) { border-top-color: #4EA3FF; }
body[data-public-c-pages="usecase"] .values article:nth-child(5n) { border-top-color: #FF77C8; }
body[data-public-c-pages="usecase"] .values article h3 { font: 760 23px/1.25 var(--display); margin-bottom: 14px; }
body[data-public-c-pages="usecase"] .values article p { font-size: 16px; line-height: 1.65; }
body[data-public-c-pages="usecase"] .closing.column { width: 100%; max-width: none; padding: 64px var(--public-c-pad); background: #16110F; --ink: #FFF7F0; --btn-bg: #FFF7F0; --btn-fg: #16110F; }
body[data-public-c-pages="usecase"] .closing h2 { max-width: 900px; margin-inline: auto; font-size: clamp(32px, 4.5vw, 56px); }
body[data-public-c-pages="usecase"] .closing .primary { margin-top: 24px; }
body[data-public-c-pages="usecase"] .product-footer { padding-block: 40px; }
/* Motion owner contract: static and fully visible until root adds motion.
   No transition, observer, loop or hidden first frame is introduced here. */
body[data-public-c-pages="usecase"] [data-public-c-motion] {
  transform: var(--public-c-motion-transform, none);
  opacity: var(--public-c-motion-opacity, 1);
}
@media (max-width: 900px) {
  body[data-public-c-pages="usecase"] .review-workspace { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  body[data-public-c-pages="usecase"] .inputs-pane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body[data-public-c-pages="usecase"] :is(.inputs-pane .panel-title, .inputs-pane .pane-hint) { grid-column: 1 / -1; }
  body[data-public-c-pages="usecase"] .input-card { margin: 0; }
}
@media (max-width: 600px) {
  body[data-public-c-pages="usecase"] .hero { padding-top: 44px; padding-bottom: 48px; }
  body[data-public-c-pages="usecase"] .hero h1 { font-size: clamp(38px, 9.8vw, 54px); overflow-wrap: break-word; }
  body[data-public-c-pages="usecase"] :is(.inputs-pane, .steps, .values) { grid-template-columns: minmax(0, 1fr); }
  body[data-public-c-pages="usecase"] .result-scroll { padding: 24px 48px 20px 20px; }
  body[data-public-c-pages="usecase"] :is(.result-head, .result-foot, .original-comparison) { padding-inline: 20px; }
  body[data-public-c-pages="usecase"] :is(.values article, .next-version) { padding: 22px; }
  body[data-public-c-pages="usecase"] .result-foot .quiet { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-public-c-pages="usecase"] [data-public-c-motion] { transform: none; opacity: 1; animation: none; transition: none; }
}