/* The Examples page is a collection of objects from a small working studio.
   Material and lighting are static; all original demo controls remain usable. */
.campaign-example { padding-block: clamp(3rem, 6vw, 6rem); scroll-margin-top: 6rem; }
.campaign-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.campaign-heading h2 { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 4.8rem); font-weight: 400; letter-spacing: -.055em; line-height: 1; margin: .75rem 0 0; }
.campaign-heading > p { color: var(--ink-soft); line-height: 1.7; max-width: 37rem; margin: 0; }
.campaign-pair { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.campaign-still, .campaign-motion { min-width: 0; margin: 0; }
.campaign-still img { display: block; width: 100%; max-width: 360px; height: auto; border: 1px solid var(--desk-navy-edge); }
.campaign-still figcaption, .campaign-motion > p { color: var(--ink-soft); font-size: .875rem; line-height: 1.65; margin: 1rem 0; }
.campaign-motion video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink); border: 1px solid var(--desk-navy-edge); }
.campaign-motion video:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; }
.campaign-motion h3 { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.1; margin: 1.5rem 0 .75rem; }
.campaign-motion .campaign-disclosure { border-top: 1px solid var(--desk-navy-edge); padding-top: 1rem; font-size: .8rem; }
@media (max-width: 760px) {
    .campaign-heading, .campaign-pair { grid-template-columns: minmax(0, 1fr); }
    .campaign-heading { gap: 1.25rem; }
    .campaign-still img { max-width: 100%; }
    .campaign-pair { gap: 2.5rem; }
}
[data-page="demos"] {
    --workshop-grain: url('../art/workshop-grain.svg');
    --desk-navy-raised: color-mix(in srgb, var(--ink) 80%, var(--paper));
    --desk-navy-edge: color-mix(in srgb, var(--ink) 60%, var(--paper));
    --desk-navy-highlight: color-mix(in srgb, var(--ink) 45%, var(--paper));
    --desk-navy-wash: color-mix(in srgb, var(--ink) 10%, var(--paper));
    --sage: var(--desk-navy-wash);
}
[data-page="demos"] .demo-workbench {
    background-image: var(--workshop-grain), linear-gradient(120deg, #efe4ce, #f7f1e6 55%, #e8dbc3);
    gap: clamp(4rem, 8vw, 8rem);
    padding-block: clamp(4rem, 7vw, 7rem);
}
[data-page="demos"] .demo-module { align-items: center; border-top-color: #b9a789; perspective: 1400px; }
[data-page="demos"] .demo-module-copy .eyebrow { color: #765310; }
[data-page="demos"] .demo-module-copy h2 { max-width: 12ch; }
[data-page="demos"] .demo-screen,
[data-page="demos"] .agent-card {
    position: relative;
    min-width: 0;
    border: 1px solid #b6a384;
    border-radius: 14px;
    padding: clamp(1.25rem, 2.5vw, 2.5rem);
    box-shadow: inset 0 1px 0 #fff7e6, 0 3px 0 #b6a384, 0 6px 0 #958468, 0 18px 22px -12px #42362280, 0 38px 55px -30px #42362280;
    background: var(--workshop-grain), linear-gradient(135deg, #fff7e7, #eee0c5);
    transform: none;
    transition: transform .4s var(--ease-out);
}
[data-page="demos"] .demo-module:hover .demo-screen {
    box-shadow: inset 0 1px 0 #fff7e6, 0 3px 0 #b6a384, 0 6px 0 #958468, 0 18px 22px -12px #42362280, 0 38px 55px -30px #42362280;
    transform: none;
}
.workshop-nameplate { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; padding-bottom: 1rem; margin-bottom: 1.2rem; border-bottom: 1px solid #b19c78; }
.workshop-nameplate > span { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; letter-spacing: -.045em; line-height: 1; }
.workshop-nameplate small { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
/* Cast navy enamel, recessed display, little brass screw heads. */
[data-page="demos"] .intake-screen { background: var(--workshop-grain), linear-gradient(135deg, var(--desk-navy-raised), var(--ink) 45%, var(--ink-deep)); border: 1px solid var(--desk-navy-edge); color: #faf0dc; border-radius: 19px; padding: clamp(1.25rem, 2.5vw, 2.5rem); box-shadow: inset 0 2px 1px var(--desk-navy-highlight), inset 0 -2px 2px var(--ink-deep), 0 4px 0 var(--ink-deep), 0 7px 0 var(--ink-deep), 0 30px 45px -20px color-mix(in srgb, var(--ink) 70%, transparent); }
[data-page="demos"] .intake-screen::before,
[data-page="demos"] .intake-screen::after { content: ''; position: absolute; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(45deg, #6d592f, #d2b67c 46%, #594526 48% 55%, #c8a966 57%, #766039); box-shadow: 0 1px 2px var(--ink-deep); pointer-events: none; }
[data-page="demos"] .intake-screen::before { left: 12px; }
[data-page="demos"] .intake-screen::after { right: 12px; }
[data-page="demos"] .intake-screen .workshop-nameplate { border-color: var(--desk-navy-highlight); color: #f6d998; }
[data-page="demos"] .intake-screen .demo-screen-top { border-color: var(--desk-navy-highlight); }
[data-page="demos"] .intake-screen .demo-screen-top small,
[data-page="demos"] .intake-screen .demo-controls label,
[data-page="demos"] .intake-screen .demo-status,
[data-page="demos"] .intake-screen .demo-scenarios > span,
[data-page="demos"] .intake-screen .demo-reset { color: #ebdfc9; }
[data-page="demos"] .intake-screen .demo-chat { margin-block: 1rem; padding: 1rem; background: var(--ink-deep); border: 1px solid var(--ink-deep); border-radius: 8px; box-shadow: inset 0 3px 8px color-mix(in srgb, var(--ink-deep) 50%, transparent), 0 1px 0 var(--desk-navy-edge); }
[data-page="demos"] .intake-screen .demo-chat-customer { background: #eee2c8; color: var(--ink); border-radius: 6px 6px 6px 0; }
[data-page="demos"] .intake-screen .demo-chat-tool { background: var(--desk-navy-raised); color: #fcf0d9; border: 1px solid var(--desk-navy-edge); border-radius: 6px 6px 0 6px; }
[data-page="demos"] .intake-screen .preview-live-dot { background: #efc777; box-shadow: 0 0 0 4px #efc77720; }
[data-page="demos"] .intake-screen .demo-tags,
[data-page="demos"] .intake-screen .demo-controls { border-color: var(--desk-navy-edge); }
[data-page="demos"] .intake-screen .demo-tags span { color: var(--ink); border-radius: 3px; }
[data-page="demos"] .intake-screen .demo-tags b { color: #f6d998; }
[data-page="demos"] .intake-screen .demo-controls input { background: #f5ecd8; border-radius: 5px; box-shadow: inset 0 2px 4px #44372220; }
[data-page="demos"] .intake-screen .intake-handoff { background: #f1e4c8; color: var(--ink); border-color: #d1b672; }
[data-page="demos"] .intake-screen .intake-handoff > span,
[data-page="demos"] .intake-screen .intake-handoff p { color: var(--ink-soft); }
[data-page="demos"] .intake-screen .demo-controls button:not(.demo-reset),
[data-page="demos"] .intake-screen .demo-scenarios button { background: linear-gradient(#f1d394, #c19b55); color: var(--ink); border: 1px solid #e4c37e; border-radius: 5px; box-shadow: inset 0 1px 0 #fff0c6, 0 3px 0 #8b6d37, 0 5px 7px color-mix(in srgb, var(--ink) 32%, transparent); min-height: 44px; }
/* A clipboard and individual slips, rather than another software window. */
[data-page="demos"] .followup-screen { border-radius: 4px 4px 10px 10px; padding-top: 3.25rem; border: 9px solid #7d5436; background: var(--workshop-grain), repeating-linear-gradient(0deg, transparent 0 31px, #b8a98b22 32px 33px), #f6edda; box-shadow: inset 0 0 0 1px #e6d6b6, 0 4px 0 #503723, 0 25px 35px -16px #44302290; }
.estimate-clip { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); width: 42%; height: 37px; border: 1px solid color-mix(in srgb, var(--sun) 58%, var(--ink)); border-radius: 8px 8px 4px 4px; background: linear-gradient(color-mix(in srgb, var(--sun) 60%, var(--paper)), #ece7cd 35%, color-mix(in srgb, var(--sun) 78%, var(--ink)) 48%, color-mix(in srgb, var(--sun) 60%, var(--paper)) 75%, color-mix(in srgb, var(--sun) 58%, var(--ink))); box-shadow: 0 5px 8px #45392140, inset 0 1px 0 #fff4d9; }
.estimate-clip::before { content: ''; display: block; width: 33%; height: 5px; border-radius: 9px; background: color-mix(in srgb, var(--sun) 58%, var(--ink)); box-shadow: inset 0 1px 2px var(--ink-deep); margin: 7px auto; }
[data-page="demos"] .followup-row { position: relative; margin-block: .8rem; padding: .9rem .6rem; border: 1px solid #d4c4a4; background: var(--workshop-grain), #fff9e9; box-shadow: 1px 3px 4px #735a2d25; border-radius: 2px; }
[data-page="demos"] .followup-row:nth-child(2) { transform: rotate(-.6deg); }
[data-page="demos"] .followup-badge { border: 1px solid currentColor; background: transparent; font-size: .7rem; transform: rotate(-5deg); color: #805b19; }
[data-page="demos"] .followup-badge-new { color: var(--ink); }
[data-page="demos"] .followup-badge-due { color: #8a3e2b; }
[data-page="demos"] .followup-action,
[data-page="demos"] .composer-actions button { border-radius: 4px; background: var(--ink); box-shadow: inset 0 1px 0 var(--desk-navy-edge), 0 3px 0 var(--ink-deep); }
[data-page="demos"] .followup-screen .demo-replay { border: 0; border-bottom: 1px solid #8f7850; background: transparent; padding-inline: 0; }
/* A cream instrument case, with raised readouts and solid chart columns. */
[data-page="demos"] .dashboard-screen { border-radius: 20px; background: var(--workshop-grain), linear-gradient(125deg, #faf0d9, #e2d4b7); border-color: #b8aa8d; }
[data-page="demos"] .dashboard-top > div:first-child { display: grid; gap: .25rem; }
[data-page="demos"] .dashboard-stats { gap: .65rem; padding-block: 1.4rem; }
[data-page="demos"] .dashboard-stats > div { background: linear-gradient(145deg, #fffaea, #e8ddc1); border: 1px solid #c0b08d; border-radius: 7px; box-shadow: inset 0 1px 0 #fffaec, 0 3px 0 #baab8c, 0 5px 7px #77613b20; padding: .7rem; }
[data-page="demos"] .dashboard-stats strong { color: var(--ink); font-variant-numeric: tabular-nums; font-size: clamp(1.8rem, 3vw, 3rem); }
[data-page="demos"] .dashboard-stats span { font-size: .72rem; color: var(--ink-soft); }
[data-page="demos"] .dashboard-controls { padding: 4px; border: 1px solid #b6a783; background: #c6b895; border-radius: 7px; box-shadow: inset 0 2px 4px #6f5c3230; }
[data-page="demos"] .dashboard-controls button { border-radius: 3px; min-height: 44px; }
[data-page="demos"] .dashboard-controls button[aria-pressed="true"] { background: var(--ink); box-shadow: 0 2px 0 var(--ink-deep), inset 0 1px 0 var(--desk-navy-edge); color: #fff4d7; }
[data-page="demos"] .dashboard-bars { padding: 1.5rem 1rem .5rem; border: 1px solid #ac9e7e; border-radius: 8px; background: repeating-linear-gradient(0deg, transparent 0 36px, #b3a58655 37px 38px), linear-gradient(120deg, #dbccb0, #eee3ca); box-shadow: inset 0 3px 7px #6c59352a; gap: 1.25rem; }
[data-page="demos"] .dashboard-source { overflow: visible; background: transparent; border: 0; }
[data-page="demos"] .dashboard-source i { position: relative; background: linear-gradient(90deg, var(--desk-navy-raised), var(--ink)); width: min(70%, 64px); border-radius: 1px; box-shadow: 9px 8px 7px #53492c30; margin-inline: auto; transform-origin: bottom; }
[data-page="demos"] .dashboard-source i::before { content: ''; position: absolute; width: 100%; height: 9px; top: -9px; left: 0; background: var(--desk-navy-highlight); transform: skewX(-40deg); transform-origin: bottom; }
[data-page="demos"] .dashboard-source i::after { content: ''; position: absolute; width: 8px; height: 100%; right: -8px; top: -5px; background: var(--ink-deep); transform: skewY(-50deg); }
[data-page="demos"] .dashboard-source:nth-child(even) i { background: linear-gradient(90deg, #c6a060, #a67e3d); }
[data-page="demos"] .dashboard-source:nth-child(even) i::before { background: #e1c48e; }
[data-page="demos"] .dashboard-source:nth-child(even) i::after { background: #80612f; }
[data-page="demos"] .dashboard-source[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
[data-page="demos"] .dashboard-detail { margin-top: 1.4rem; background: #f7efd9; border: 1px solid #bcad8c; border-radius: 7px; box-shadow: inset 0 2px 3px #64543512; }
/* A warm radio cabinet and a letterpress question desk. */
[data-page="demos"] .voice-feature { background: var(--workshop-grain), linear-gradient(115deg, var(--ink), var(--desk-navy-raised)); }
[data-page="demos"] .agent-card-voice { background: var(--workshop-grain), linear-gradient(135deg, #ead9b1, #f7edd8 40%, #d5bd8e); color: var(--ink); border: 7px solid #a8864c; border-radius: 18px; box-shadow: inset 0 1px 2px #fff8df, 0 5px 0 #73592f, 0 28px 44px -20px color-mix(in srgb, var(--ink) 70%, transparent); }
.voice-instrument { display: flex; gap: clamp(1rem, 2.5vw, 2rem); align-items: center; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid #b39a66; }
.voice-speaker { flex: 0 0 clamp(80px, 10vw, 120px); aspect-ratio: 1; border-radius: 50%; padding: 9px; background: conic-gradient(from 30deg, #d4b778, #806536, #edd196, #927141, #d4b778); box-shadow: 0 4px 9px #78603a55, inset 0 1px 1px #fff0bf; }
.voice-speaker > span { display: block; width: 100%; height: 100%; border-radius: 50%; background: repeating-radial-gradient(circle, var(--ink) 0 1px, #b4a079 2px 3px, var(--ink) 4px 5px); box-shadow: inset 0 4px 8px var(--ink-deep); border: 3px solid #65532f; }
.voice-instrument-label > span { font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.voice-instrument-label > strong { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(1.2rem, 2.2vw, 1.8rem); line-height: 1.1; letter-spacing: -.03em; margin-top: .6rem; }
.voice-levels { display: flex; align-items: center; gap: 4px; height: 25px; margin-top: .8rem; }
.voice-levels i { display: block; width: 4px; height: 8px; border-radius: 2px; background: var(--ink); }
.voice-levels i:nth-child(2n) { height: 15px; }
.voice-levels i:nth-child(3n) { height: 23px; }
[data-page="demos"] .agent-card-voice .agent-card-heading-voice { background: transparent; color: var(--ink); border-color: #b39a66; padding-inline: 0; }
[data-page="demos"] .agent-card-voice .agent-voice-mark { background: var(--ink); color: #f2d99f; border-radius: 50%; box-shadow: inset 0 1px 1px var(--desk-navy-highlight), 0 3px 0 var(--ink-deep); }
[data-page="demos"] .agent-card-voice p,
[data-page="demos"] .agent-card-voice .agent-card-note,
[data-page="demos"] .agent-card-voice .agent-card-heading span,
[data-page="demos"] .agent-card-voice .agent-voice-steps,
[data-page="demos"] .agent-card-voice .agent-voice-example small { color: var(--ink-soft); }
[data-page="demos"] .agent-card-voice .agent-voice-launch { background: linear-gradient(var(--desk-navy-raised), var(--ink)); color: #fff4db; border-radius: 7px; border: 1px solid var(--ink-deep); box-shadow: inset 0 1px 0 var(--desk-navy-edge), 0 4px 0 var(--ink-deep); }
[data-page="demos"] .agent-card-voice .agent-voice-example { background: #f8efd9; border-color: #b8a071; box-shadow: inset 0 2px 4px #69552d15; border-radius: 6px; }
[data-page="demos"] .agent-card-guided { border-radius: 4px; background: var(--workshop-grain), #f9f0dc; border: 1px solid #c7b48c; box-shadow: 3px 4px 0 #ede0c3, 4px 5px 0 #b6a383, 7px 8px 0 #eadabd, 8px 9px 0 #b6a383, 0 24px 35px -15px #45372670; }
[data-page="demos"] .agent-chat-log { background: repeating-linear-gradient(0deg, transparent 0 27px, #b6a48922 28px 29px), #eee3cc; border: 1px solid #c7b48c; border-radius: 4px; box-shadow: inset 0 2px 5px #7c633f20; }
[data-page="demos"] .agent-card-guided .agent-suggestions button { background: var(--workshop-grain), #fff6e0; border-color: #c7b48c; border-radius: 3px; box-shadow: 0 2px 0 #c7b48c; }
[data-page="demos"] .agent-chat-aside { background: var(--workshop-grain), #dcc592; transform: rotate(1deg); box-shadow: 0 15px 30px -15px #66512870; border: 1px solid #b9a16e; }
[data-page="demos"] .retail-ad-screen { background: var(--workshop-grain), var(--ink); color: #f7e7c1; border: 6px solid #b28d4b; border-radius: 3px; box-shadow: inset 0 0 0 1px #e6c686, 0 5px 0 #765a30, 0 26px 36px -18px color-mix(in srgb, var(--ink) 56%, transparent); }
[data-page="demos"] .retail-ad-screen .workshop-nameplate { color: #edcc88; border-color: #b59a66; }
[data-page="demos"] .retail-ad-screen .demo-screen-top { border-color: #b59a66; }
[data-page="demos"] .retail-ad-screen .demo-screen-top small,
[data-page="demos"] .retail-ad-screen .retail-ad-disclosure { color: #e5d5b0; }
[data-page="demos"] .retail-ad-screen .avatar-video-transcript { background: #f7edd8; color: var(--ink); }
[data-page="demos"] :is(.demo-controls button, .followup-action, .composer-actions button, .agent-voice-launch):active { transform: translateY(2px); }
[data-page="demos"] :is(.demo-screen, .agent-card) :focus-visible { outline: 3px solid #a2652b; outline-offset: 4px; }
[data-page="demos"] .intake-screen :focus-visible { outline-color: #ffdfa0; }
[data-page="demos"] .demo-module:hover .intake-screen { box-shadow: inset 0 2px 1px var(--desk-navy-highlight), inset 0 -2px 2px var(--ink-deep), 0 4px 0 var(--ink-deep), 0 7px 0 var(--ink-deep), 0 30px 45px -20px color-mix(in srgb, var(--ink) 70%, transparent); }
[data-page="demos"] .demo-module:hover .followup-screen { box-shadow: inset 0 0 0 1px #e6d6b6, 0 4px 0 #503723, 0 25px 35px -16px #44302290; }
[data-page="demos"] .demo-module:hover .retail-ad-screen { box-shadow: inset 0 0 0 1px #e6c686, 0 5px 0 #765a30, 0 26px 36px -18px color-mix(in srgb, var(--ink) 56%, transparent); }
[data-page="demos"] .followup-row.is-complete { background: var(--workshop-grain), var(--desk-navy-wash); }
[data-page="demos"] .followup-row.is-complete .followup-action { background: var(--ink); }
[data-page="demos"] .composer-actions button:last-child { background: #e6dac0; color: var(--ink-soft); box-shadow: inset 0 1px 0 #fff1d6, 0 3px 0 #bbaa89; }
[data-page="demos"] .dashboard-source i { transition: filter .2s ease; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    [data-page="demos"] .demo-module:hover .demo-screen { transform: translateY(-5px) rotateX(1deg); }
    [data-page="demos"] .dashboard-source:hover i { filter: brightness(1.14); }
}
@media (max-width: 880px) {
    [data-page="demos"] .demo-module { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    [data-page="demos"] .demo-module-copy h2 { max-width: 18ch; }
    [data-page="demos"] .agent-chat-aside { transform: none; }
}
@media (max-width: 620px) {
    [data-page="demos"] .demo-screen { padding: 1.15rem; }
    [data-page="demos"] .followup-screen { padding-top: 2.5rem; border-width: 6px; }
    [data-page="demos"] .followup-row { grid-template-columns: auto minmax(0, 1fr); }
    [data-page="demos"] .followup-action { grid-column: 2; grid-row: auto; justify-self: start; margin-top: .4rem; }
    [data-page="demos"] .followup-row small { grid-column: 2; }
    [data-page="demos"] .dashboard-stats { gap: .45rem; }
    [data-page="demos"] .dashboard-stats > div { padding: .5rem .35rem; }
    [data-page="demos"] .dashboard-stats span { font-size: .68rem; }
    [data-page="demos"] .dashboard-bars { gap: .8rem; padding-inline: .7rem; }
    [data-page="demos"] .dashboard-source b { font-size: .75rem; }
    [data-page="demos"] .agent-card-voice { padding: 1.15rem; border-width: 5px; }
    .voice-instrument { gap: 1rem; }
    .voice-instrument-label > span { font-size: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
    [data-page="demos"] .demo-screen { transition: none; }
    [data-page="demos"] .dashboard-source i { transition: none; }
    [data-page="demos"] :is(.demo-controls button, .followup-action, .composer-actions button, .agent-voice-launch):active { transform: none; }
}