/* Shared 707 surfaces: plum canvas, ivory/sage cards, dark readable text. */
:root{--surface-ivory:#eee8dd;--surface-sage:#d6dfc9;--surface-ink:#30252a;--surface-muted:#544c50;--surface-accent:#354630;--surface-rule:#35463040;--surface-radius:3px}
.services-page .starting-grid article,.services-page .pricing-tier,.examples-page .demo-card{background:var(--surface-ivory);color:var(--surface-ink);border:0;border-radius:var(--surface-radius)}
.services-page .starting-grid article:nth-child(even),.services-page .pricing-tier:nth-of-type(even),.examples-page .demo-card:nth-child(even){background:var(--surface-sage)}
.examples-page .demo-card{display:flex;flex-direction:column;box-shadow:0 4px 18px #11000814}
.examples-page .demo-thumbnail{border-radius:var(--surface-radius) var(--surface-radius) 0 0;flex-shrink:0}
.examples-page .demo-card-copy{display:flex;flex-direction:column;flex:1;padding:1.25rem}
.examples-page .demo-card-copy .eyebrow{color:#4a5741;line-height:1.6}
.examples-page .demo-card-copy h3{color:var(--surface-ink)}
.examples-page .concept-note{color:var(--surface-muted);line-height:1.6;min-height:2.4em}
.examples-page .demo-open{color:var(--surface-accent);border-color:var(--surface-rule);margin-top:auto;flex-direction:row;align-items:center}
.examples-page .demo-open span{color:var(--surface-accent);font-size:1rem}
.examples-page .demo-open:hover{color:#672d46}.examples-page .demo-open:hover span{color:inherit}
.examples-page .demo-placeholder{background:#1c2926;border:1px dashed #b8c7b34d;border-radius:var(--surface-radius);color:#e0e6dc}.examples-page .placeholder-number{color:#bad0a5}.examples-page .demo-placeholder>span:last-child{color:#bdcbb8;line-height:1.6}
.examples-page .demo-card a:focus-visible{outline:3px solid #a87545;outline-offset:4px}.examples-page .demo-thumbnail:focus-visible{outline-offset:-5px}
/* The extra Hyperreal example link should not run into its neighbor. */
.services-page .tier-name .text-link{display:flex;width:fit-content;gap:.65rem}.services-page .tier-name .text-link+.text-link{margin-top:.7rem}
@media(max-width:900px) and (min-width:601px){.examples-page .demo-card-copy{padding:1rem}.examples-page .demo-card-copy h3{font-size:1.35rem}.examples-page .demo-card-copy .eyebrow{letter-spacing:.06em}}
@media(max-width:600px){.examples-page .concept-note{min-height:0}.examples-page .demo-card-copy{padding:1.2rem}}
@media(max-width:560px){.console-nav{align-items:stretch}.console-nav a{height:100%}}