.examples-page { background: #fbfcfc; }
.examples-page :focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 5px; }
.skip-link { position: fixed; top: -80px; inset-inline-start: 1rem; z-index: 1100; padding: .75rem 1rem; background: white; color: var(--ink); }
.skip-link:focus { top: .5rem; }
.nav-menu a[aria-current="page"] { color: var(--accent-dark); }
.nav-menu a[aria-current="page"]::after { width: 100%; }
.examples-intro { padding-top: 8.5rem; padding-bottom: 3rem; }
.examples-eyebrow { color: var(--accent-dark); font-weight: 600; font-size: .9rem; margin-bottom: .85rem; }
.examples-intro h1 { font-size: clamp(2.2rem, 4.4vw, 3.65rem); line-height: 1.2; letter-spacing: -.04em; max-width: 850px; margin-bottom: 1.25rem; }
.examples-lead { max-width: 650px; color: var(--ink-soft); font-size: 1.15rem; line-height: 1.8; }
.examples-note { display: flex; align-items: center; gap: .6rem; color: var(--ink-soft); margin-top: 1.4rem; font-size: .88rem; }
.note-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.examples-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; padding-block: 0; }
.example-card { min-width: 0; display: flex; flex-direction: column; border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: white; box-shadow: 5px 5px 0 #dbe7e5; }
.example-card.is-active { box-shadow: 5px 5px 0 var(--accent); }
.example-scene { position: relative; height: 172px; display: grid; place-items: center; border-bottom: 2px solid var(--ink); background: #e3f3ef; color: #1e665d; }
.example-card[data-theme="cafe"] .example-scene { background: #f4e9d9; color: #79523c; }
.example-number { position: absolute; top: 1rem; inset-inline-start: 1.35rem; font-family: 'Outfit', sans-serif; font-size: .9rem; font-weight: 600; }
.example-scene-label { position: absolute; bottom: .85rem; inset-inline-end: 1.35rem; font-size: .75rem; letter-spacing: .13em; font-family: 'Outfit', sans-serif; }
.example-illustration { width: 180px; height: 125px; }
.example-body { display: flex; flex-direction: column; flex: 1; padding: 1.75rem 1.75rem .75rem; }
.example-category { font-size: .85rem; color: var(--accent-dark); font-weight: 600; margin-bottom: .25rem; }
.example-body h2 { font-size: 2rem; line-height: 1.4; letter-spacing: -.025em; margin-bottom: .6rem; }
.example-description { color: var(--ink-soft); line-height: 1.85; }
.example-prompt { margin-block: 1.25rem; background: #f7f9f9; padding: .85rem 1rem; border-inline-start: 3px solid #a4c9c3; }
.example-prompt-label { display: block; font-size: .78rem; color: var(--ink-soft); margin-bottom: .3rem; }
.example-prompt blockquote { font-size: 1rem; line-height: 1.7; }
.example-details { color: var(--ink-soft); font-size: .8rem; margin-bottom: 1.5rem; }
.example-controls { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: auto; }
.example-start { min-width: 176px; gap: .6rem; }
.example-start svg { width: 19px; height: 19px; flex-shrink: 0; }
.example-card.is-active .example-start { color: #9b2929; background: #fff1ef; box-shadow: 3px 3px 0 var(--ink); }
.example-status { min-height: 3rem; color: var(--ink-soft); font-size: .8rem; padding-top: .9rem; }
.example-status[data-state="live"] { color: var(--accent-dark); font-weight: 600; }
.examples-help { display: flex; align-items: flex-start; gap: .8rem; padding-block: 2rem 3.5rem; color: var(--ink-soft); }
.examples-help svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: .2rem; }
.examples-help p { font-size: .9rem; max-width: 750px; }
.examples-contact { background: #edf5f3; border-block: 1px solid #c9dcd7; padding-block: 3rem; }
.examples-contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.examples-contact h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .6rem; line-height: 1.4; }
.examples-contact p:not(.examples-eyebrow) { color: var(--ink-soft); }
.examples-contact .btn { flex-shrink: 0; }
.examples-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 2rem; }
.examples-footer p { color: var(--ink-soft); font-size: .8rem; }
@media (max-width: 700px) {
  .examples-intro { padding-top: 7rem; padding-bottom: 2rem; }
  .examples-gallery { grid-template-columns: 1fr; gap: 1.5rem; }
  .example-body { padding: 1.4rem 1.25rem .6rem; }
  .example-scene { height: 150px; }
  .examples-contact-inner { align-items: flex-start; flex-direction: column; }
  .examples-help { padding-bottom: 2.5rem; }
  .examples-footer { flex-direction: column; align-items: flex-start; }
}