/* New product stories use local, illustrative UI, never private campaign data. */
.studio-showcase { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: clamp(28px, 5vw, 76px); }
.studio-showcase > *, .legal-preview > * { min-width: 0; }
.studio-copy h3 { font-size: clamp(27px, 3vw, 38px); font-weight: 500; line-height: 1.15; letter-spacing: -1.4px; margin: 20px 0; }
.studio-copy > p, .studio-benefits p, .legal-intro, .legal-notice { color: var(--brand-muted); font-size: 14px; line-height: 1.8; }
.studio-benefits { list-style: none; margin: 28px 0; padding: 0; }
.studio-benefits li { display: flex; gap: 16px; padding: 17px 0; border-top: 1px solid var(--brand-line); }
.studio-benefits li > span { color: var(--brand-primary); font-size: 11px; padding-top: 3px; }
.studio-benefits strong { font-size: 15px; font-weight: 600; }
.studio-benefits p { margin: 7px 0 0; font-size: 13px; }
.studio-demo { --demo-ink: #163f30; --demo-paper: #edf5e9; --demo-accent: #c6e8b1; border: 1px solid var(--brand-line); background: #f5f9f6; padding: 12px; border-radius: 26px; box-shadow: 0 30px 65px #073f2614, 0 4px 12px #073f2608; }
.studio-demo[data-demo-theme="ocean"] { --demo-ink: #213c5b; --demo-paper: #eef2f8; --demo-accent: #c0d6f2; }
.studio-demo[data-demo-theme="clay"] { --demo-ink: #683126; --demo-paper: #faf1e8; --demo-accent: #f1c4a5; }
.demo-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px 18px; color: var(--brand-muted); font-size: 11px; }
.demo-window-dots { color: #7a9b86; font-size: 9px; letter-spacing: 3px; }
.demo-page { overflow: hidden; border-radius: 16px; background: var(--demo-paper); color: var(--demo-ink); border: 1px solid #0000000d; transition: background .4s, color .4s; }
.demo-brand { text-align: center; padding: 25px 12px; font-size: 30px; font-weight: 750; letter-spacing: -1.8px; border-bottom: 1px solid #0000000d; }
.demo-brand span { display: block; font-size: 8px; letter-spacing: 2px; margin-top: 8px; font-weight: 500; }
.demo-editorial { padding: clamp(22px, 3vw, 40px); position: relative; }
.demo-editorial > span:first-child { font-size: 8px; letter-spacing: 1.2px; }
.demo-editorial h3 { position: relative; z-index: 1; font-size: clamp(32px, 3.8vw, 54px); letter-spacing: -2px; font-weight: 550; line-height: 1.05; margin: 22px 0 16px; }
.demo-editorial h3 em { font-family: Georgia, serif; font-weight: 400; }
.demo-editorial p { font-size: 12px; line-height: 1.7; max-width: 220px; margin-bottom: 0; }
.demo-sticker { position: absolute; right: 20px; top: 30px; width: 80px; height: 80px; display: grid; place-items: center; background: var(--demo-accent); border-radius: 50%; font-size: 60px; animation: showcase-turn 30s linear infinite; }
.demo-projects { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 20px 20px; }
.demo-projects article { background: #ffffff96; border: 1px solid #ffffffde; border-radius: 14px; padding: 20px; min-width: 0; }
.demo-projects article > span:first-child { display: block; font-size: 8px; letter-spacing: 1px; }
.demo-projects strong { display: block; font-size: 18px; font-weight: 550; line-height: 1.3; letter-spacing: -.5px; margin: 16px 0; }
.demo-tag { display: inline-block; background: var(--demo-accent); padding: 6px 8px; border-radius: 20px; font-size: 9px; }
.demo-arrow { display: block; font-size: 25px; }
.demo-page-footer { display: flex; justify-content: space-between; padding: 18px 24px; background: var(--demo-ink); color: var(--demo-paper); font-size: 10px; }
.demo-controls { padding: 20px 8px 8px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.demo-controls[hidden] { display: none; }
.demo-controls > span { font-size: 11px; color: var(--brand-muted); }
.demo-controls > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.demo-controls button { min-height: 44px; padding: 10px 15px; border: 1px solid var(--brand-line); background: #fff; color: var(--brand-primary); font-size: 12px; border-radius: 24px; }
.demo-controls button[aria-pressed="true"] { background: var(--brand-deep); color: #fff; border-color: var(--brand-deep); }
.demo-caption { font-size: 10px; line-height: 1.6; text-align: center; color: var(--brand-muted); margin: 12px 8px 6px; }
.studio-demo[data-demo-theme="ocean"] .demo-editorial h3 { font-family: Georgia, serif; }
.studio-demo[data-demo-theme="clay"] .demo-editorial h3 { font-family: "Trebuchet MS", sans-serif; }
.continuity-showcase { background: radial-gradient(ellipse at 80% 0%, #42b04a25, transparent 70%), var(--brand-deep); color: #fff; }
.continuity-showcase .section-intro p, .continuity-note { color: var(--brand-on-dark); }
.continuity-showcase h2 em { color: #a6e7ad; }
.continuity-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.continuity-cards article { display: flex; flex-direction: column; border: 1px solid #ffffff2b; border-radius: 22px; padding: 28px; background: linear-gradient(145deg, #ffffff12, #ffffff04); }
.continuity-index { font-size: 10px; letter-spacing: 1.1px; color: #a6e7ad; }
.continuity-cards h3 { font-size: 25px; line-height: 1.2; letter-spacing: -.8px; font-weight: 500; margin: 28px 0 14px; }
.continuity-cards p { color: var(--brand-on-dark); font-size: 13px; line-height: 1.85; margin: 0 0 24px; }
.continuity-cards a { display: inline-flex; gap: 10px; font-size: 12px; line-height: 1.6; margin-top: auto; text-decoration: underline; text-underline-offset: 5px; }
.continuity-showcase :focus-visible { outline-color: var(--brand-on-dark); }
.continuity-note { font-size: 11px; line-height: 1.7; margin: 24px 0 0; }
.development-badge { display: inline-flex; border: 1px solid #d4bd8f; background: #fff5df; color: #6a4910; padding: 8px 12px; border-radius: 30px; font-size: 11px; font-weight: 600; }
.legal-intro { margin: 12px 0 0; }
.legal-preview { display: grid; grid-template-columns: 1fr 1.1fr; border: 1px solid var(--brand-line); border-radius: 24px; overflow: hidden; }
.legal-question { background: #edf6ef; padding: clamp(26px, 4vw, 50px); display: flex; flex-direction: column; justify-content: center; }
.legal-question > p { font-size: clamp(23px, 2.4vw, 32px); line-height: 1.35; letter-spacing: -.8px; margin: 24px 0; }
.legal-question small { color: var(--brand-muted); font-size: 11px; line-height: 1.7; }
.legal-evidence { padding: clamp(26px, 4vw, 50px); }
.legal-evidence h3 { font-size: 20px; font-weight: 550; line-height: 1.4; margin: 0 0 22px; }
.legal-evidence ol { list-style: decimal-leading-zero; padding-left: 24px; margin: 0 0 22px; }
.legal-evidence li { padding: 0 0 17px 8px; font-size: 13px; color: var(--brand-primary); }
.legal-evidence li strong, .legal-evidence li span { display: block; line-height: 1.7; }
.legal-evidence li span { color: var(--brand-muted); }
.legal-notice { font-size: 12px; margin-top: 20px; }
@keyframes showcase-turn { to { transform: rotate(360deg); } }
@media (max-width: 1000px) { .continuity-cards article { padding: 22px; } .continuity-cards h3 { font-size: 22px; } .product-header nav { gap: 14px; } }
@media (max-width: 850px) { .studio-showcase { grid-template-columns: 1fr; } .studio-demo { width: min(100%, 580px); justify-self: center; } .continuity-cards { grid-template-columns: 1fr; } .continuity-cards h3 br { display: none; } .legal-preview { grid-template-columns: 1fr; } .demo-editorial h3 { font-size: 48px; } }
@media (max-width: 480px) { .studio-demo { padding: 8px; border-radius: 20px; } .demo-editorial h3 { font-size: 36px; } .demo-sticker { width: 60px; height: 60px; font-size: 44px; right: 12px; top: 35px; } .demo-projects { padding: 0 12px 12px; gap: 8px; } .demo-projects article { padding: 15px 12px; } .demo-projects strong { font-size: 16px; } .demo-projects article > span:first-child { font-size: 7px; } .demo-controls button { padding: 10px 12px; } }
@media (prefers-reduced-motion: reduce) { .demo-sticker { animation: none; } .demo-page { transition: none; } }
@media (forced-colors: active) { .studio-demo, .demo-page, .demo-projects article, .continuity-cards article, .legal-preview { border-color: CanvasText; } .demo-controls button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -5px; } }