/* AI offer examples use the existing paper, ink, orange and Figtree system. */
.example-kind { font-size:11px; line-height:1.5; margin-bottom:8px; }
.example-proof { font-size:22px; line-height:1.05; letter-spacing:-.03em; }
.example-context { font-size:12px; line-height:1.5; margin-top:10px; }
.example-source { margin-top:12px; }
.example-scope { font-size:10px; line-height:1.5; margin-top:8px; }
.content-formats { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,400px); gap:clamp(32px,7vw,108px); align-items:center; padding:80px 0 32px; }
.eyebrow { font-size:var(--type-meta); font-weight:600; color:#ad3819; margin-bottom:18px; }
.formats-copy h2 { font-size:var(--type-heading); font-weight:800; line-height:1.08; letter-spacing:-.035em; }
.formats-intro > p:not(.eyebrow), .formats-copy > .format-note { font-size:var(--type-body); line-height:1.6; color:var(--muted); margin-top:22px; max-width:45ch; }
.format-explanation { margin-top:30px; padding-left:18px; border-left:2px solid var(--orange); }
.format-explanation h3 { font-size:var(--type-lead); font-weight:800; line-height:1.35; }
.format-explanation p { font-size:var(--type-label); line-height:1.6; margin-top:8px; color:var(--muted); max-width:44ch; }
.formats-copy > .format-note { font-size:var(--type-meta)!important; }
.carousel-demo { min-width:0; max-width:400px; width:100%; justify-self:center; outline-offset:8px; }
.demo-heading { display:flex; justify-content:space-between; gap:12px; font-size:11px; color:var(--muted); margin-bottom:12px; }
.demo-heading span:first-child { color:var(--ink); font-weight:600; }
.demo-slide { display:flex; flex-direction:column; align-items:flex-start; min-height:495px; padding:32px; border-radius:18px; background:#e7ebc7; color:var(--ink); touch-action:pan-y; overflow:hidden; }
.slide-kicker { font-size:12px; font-weight:600; }
.demo-slide h3 { font-size:34px; font-weight:800; line-height:1.12; letter-spacing:-.035em; margin-top:auto; padding-top:32px; white-space:pre-line; }
.demo-slide p { font-size:17px; line-height:1.55; margin-top:20px; white-space:pre-line; }
.slide-footer { font-size:12px; margin-top:auto; padding-top:30px; }
.demo-slide[data-kind="prompt"] { background:#ebe7df; }
.demo-slide[data-kind="prompt"] h3 { margin-top:32px; padding:0; font-size:29px; }
.demo-slide[data-kind="prompt"] p { font-size:18px; }
.demo-slide[data-kind="product"] { background:var(--orange); }
.demo-slide[data-kind="product"] h3 { margin-top:32px; padding:0; font-size:42px; }
.demo-controls { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.demo-controls button { width:48px; height:44px; border-radius:10px; background:var(--ink); color:white; font-size:24px; }
.demo-controls button:disabled { background:#dedbd5; color:#716e66; cursor:default; }
.demo-controls button:not(:disabled):hover { background:#36372f; }
#slide-counter { font-size:var(--type-meta); font-variant-numeric:tabular-nums; }
.demo-disclosure { font-size:11px; line-height:1.5; color:var(--muted); margin-top:14px; }
@media(max-width:900px) { .content-formats { gap:32px; grid-template-columns:minmax(0,1fr) minmax(280px,340px); } .demo-slide { padding:26px; } .formats-copy h2 { font-size:36px; } }
@media(max-width:760px) {
 .content-formats { grid-template-columns:1fr; padding:54px 0 8px; gap:30px; }
 .formats-copy h2 { font-size:clamp(32px,8vw,42px); }
 .formats-intro > p:not(.eyebrow) { margin-top:16px; }
 .formats-copy { display:contents; }
 .formats-intro { order:0; }
 .carousel-demo { order:1; }
 .format-explanation { order:2; }
 .formats-copy > .format-note { order:3; margin-top:0; }
 .format-explanation { margin-top:0; }
 .demo-slide { min-height:470px; padding:28px; }
 .example-proof { font-size:20px; }
 .example-context { font-size:11px; }
}
@media(max-width:360px) { .demo-slide { padding:24px; min-height:455px; } .demo-slide h3 { font-size:29px; } .demo-slide[data-kind="prompt"] h3 { font-size:26px; } .demo-slide[data-kind="prompt"] p { font-size:16px; } .demo-slide[data-kind="product"] h3 { font-size:34px; } .example-proof { font-size:18px; } }