/* Cover-led demo homes. Each template retains its own palette and layout. */
.demo-space-page {
    --demo-bg:#101113; --demo-panel:#191b1e; --demo-text:#f7f7f4;
    --demo-muted:#b5b9bc; --demo-line:#ffffff26; --demo-highlight:var(--space-accent);
    background:var(--demo-bg); color:var(--demo-text);
}
.demo-theme-paper { --demo-bg:#f5f2eb; --demo-panel:#fffcf7; --demo-text:#272923; --demo-muted:#65665e; --demo-line:#2729232b; --demo-highlight:#705033; }
.demo-theme-cobalt { --demo-bg:#102b83; --demo-panel:#193790; --demo-text:#fff; --demo-muted:#d0d9f4; --demo-line:#ffffff30; }
.demo-space-page .directory-shell { width:min(100% - 112px,1280px); padding-inline:0; }
.demo-space-page .directory-nav { position:absolute; inset:0 0 auto; z-index:10; min-height:88px; padding:18px max(56px,calc((100% - 1280px)/2)); color:#fff; background:linear-gradient(#090d12b8,#090d1280); border-bottom:1px solid #ffffff30; }
.demo-space-page .directory-nav nav > a:first-child { color:#fff; }
.demo-space-page .directory-nav .button { min-height:44px; border-radius:100px; background:#fff; color:#151719; }
.demo-space-page :focus-visible { outline-color:var(--demo-highlight); }
.demo-space-page .directory-nav :focus-visible { outline-color:#fff; }
.demo-space-page .demo-hero { display:block; padding:0 0 44px; }
.demo-cover-stage { position:relative; isolation:isolate; min-height:540px; min-height:clamp(540px,76svh,820px); display:flex; align-items:flex-end; padding:170px 0 64px; }
.demo-space-page .demo-hero-image { position:absolute; inset:0; z-index:-1; width:100%; height:100%; aspect-ratio:auto; border-radius:0; }
.demo-hero-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#080b1020 15%,#080b1010 30%,#080b10cc 100%); }
.demo-hero-image img { display:block; object-position:center 40%; }
.demo-hero-image figcaption { z-index:1; inset:auto max(56px,calc((100% - 1280px)/2)) 18px auto; padding:0; background:none; font-size:.68rem; color:#ffffffb8; }
.demo-cover-title { position:relative; color:#fff; }
.demo-cover-title .eyebrow { color:#fff; margin-bottom:24px; text-shadow:0 1px 12px #0008; }
.demo-cover-title .eyebrow span { padding-inline:12px; opacity:.65; }
.demo-space-page .demo-hero h1 { max-width:1000px; margin:0; font:500 clamp(3.4rem,7.3vw,7.2rem)/1.02 var(--display); letter-spacing:-.055em; text-wrap:balance; overflow-wrap:anywhere; text-shadow:0 2px 28px #0003; }
.demo-breadcrumb { padding:25px 0; margin-bottom:32px; border-bottom:1px solid var(--demo-line); font-size:.75rem; }
.demo-breadcrumb, .demo-breadcrumb span { color:var(--demo-muted); }
.demo-breadcrumb a:hover { color:var(--demo-text); }
.demo-hero-copy { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:8%; align-items:start; }
.demo-hero-copy .eyebrow, .demo-section .eyebrow, .demo-offer-number, .demo-offers strong, .demo-faq details a, .demo-notice > span { color:var(--demo-highlight); }
.demo-hero h2 { margin:0 0 24px; font:500 clamp(2rem,3.3vw,3.2rem)/1.15 var(--display); letter-spacing:-.045em; color:var(--demo-text); text-wrap:balance; }
.demo-description { max-width:600px; margin:0 0 28px; color:var(--demo-muted); font-size:1.05rem; line-height:1.85; }
.demo-actions { margin:0; gap:12px; }
.demo-actions .button { min-height:48px; border-radius:100px; font-size:.85rem; }
.demo-hero-copy .button-ghost { border-color:var(--demo-line); color:var(--demo-text); }
.demo-hero-copy .button-ghost:hover { background:var(--demo-panel); }
.demo-hero-copy .directory-tags { margin:0; }
.demo-hero-copy .directory-tags span { color:var(--demo-muted); border-color:var(--demo-line); background:transparent; font-size:.75rem; padding:6px 12px; }
.demo-notice { background:var(--demo-panel); border-color:var(--demo-line); padding:18px 24px; border-radius:12px; }
.demo-notice p, .demo-section-nav button, .demo-section > header > p, .demo-section > header > a, .demo-offers p, .demo-offer-label, .demo-sample-tag, .demo-faq details p { color:var(--demo-muted); }
.demo-notice p { font-size:.8rem; }
.demo-section-nav { gap:32px; padding:18px 0; border-color:var(--demo-line); }
.demo-section-nav a { display:flex; align-items:center; min-height:44px; border-bottom:2px solid transparent; }
.demo-section-nav a:hover { border-color:var(--demo-highlight); }
.demo-section-nav button { min-height:44px; }
.demo-section { padding:80px 0 0; }
.demo-section > header { margin-bottom:32px; }
.demo-section h2 { font-weight:500; text-wrap:balance; }
.demo-offers { gap:20px; }
.demo-offers article { background:var(--demo-panel); border-color:var(--demo-line); padding:32px; border-radius:18px; }
.demo-offer-number { font-size:.75rem; letter-spacing:.12em; margin-bottom:40px; }
.demo-offers h3 { font-size:1.4rem; font-weight:500; }
.demo-offers p { font-size:.95rem; line-height:1.75; }
.demo-offers strong { font-size:1.2rem; }
.demo-updates { gap:24px; }
.demo-updates article { padding:38px; min-height:270px; border-radius:18px; }
.demo-updates article:nth-child(2) { background:var(--demo-panel); color:var(--demo-text); border-color:var(--demo-line); }
.demo-updates h3 { line-height:1.5; }
.demo-sample-tag, .demo-faq details { border-color:var(--demo-line); }
.demo-faq { padding-block:88px 0; gap:80px; }
.demo-faq summary { padding:12px 0; line-height:1.6; }
.demo-faq details p { line-height:1.8; }
.demo-space-page .related-grid { color:#f7f7f4; margin-bottom:80px; }
.demo-space-page > .directory-footer { margin:0; background:var(--demo-panel); border-color:var(--demo-line); color:var(--demo-muted); font-size:.8rem; }
.demo-theme-paper .demo-hero h1, .demo-theme-paper .demo-hero h2, .demo-theme-paper .demo-section h2 { font-family:Georgia,'Times New Roman',serif; font-weight:400; letter-spacing:-.04em; }

/* Editorial: a service list and asymmetric journal. */
.demo-layout-editorial .demo-offers { display:block; border-top:1px solid var(--demo-line); }
.demo-layout-editorial .demo-offers article { display:grid; grid-template-columns:40px minmax(0,1fr) minmax(0,1.3fr) minmax(130px,.65fr); gap:6px 28px; border:0; border-bottom:1px solid var(--demo-line); border-radius:0; padding:32px 0; background:transparent; align-items:start; }
.demo-layout-editorial .demo-offer-number { grid-column:1; grid-row:1 / 3; margin:4px 0 0; }
.demo-layout-editorial .demo-offers h3 { grid-column:2; grid-row:1 / 3; }
.demo-layout-editorial .demo-offers p { grid-column:3; grid-row:1 / 3; margin:0; }
.demo-layout-editorial .demo-offers strong { grid-column:4; margin:0; }
.demo-layout-editorial .demo-offer-label { grid-column:4; }
/* Keep the asymmetric journal only above the mobile breakpoint. */
@media(min-width:701px) { .demo-layout-editorial .demo-updates { grid-template-columns:1.3fr 1fr; } }

/* Spotlight: centred identity and soft cards. */
.demo-layout-spotlight .demo-cover-title { text-align:center; }
.demo-layout-spotlight .demo-hero h1 { margin-inline:auto; }
.demo-layout-spotlight .demo-offer-number { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--demo-line); border-radius:50%; }
.demo-layout-spotlight .demo-offers article, .demo-layout-spotlight .demo-updates article { border-radius:24px; }

/* Grid: a compact cover and connected service cards. */
.demo-layout-grid .demo-cover-stage { min-height:clamp(480px,66svh,700px); }
.demo-layout-grid .demo-offers { gap:0; border:1px solid var(--demo-line); border-radius:16px; overflow:hidden; }
.demo-layout-grid .demo-offers article { border:0; border-right:1px solid var(--demo-line); border-radius:0; }
.demo-layout-grid .demo-offers article:last-child { border-right:0; }

@media(max-width:1000px) {
    .demo-space-page .directory-shell { width:calc(100% - 64px); }
    .demo-space-page .directory-nav { padding-inline:32px; }
    .demo-hero-copy { gap:40px; }
    .demo-offers article { padding:24px; }
    .demo-layout-editorial .demo-offers article { grid-template-columns:28px minmax(0,1fr) minmax(0,1.2fr); gap:8px 20px; }
    .demo-layout-editorial .demo-offers h3 { grid-row:1; }
    .demo-layout-editorial .demo-offers p { grid-row:1 / 4; }
    .demo-layout-editorial .demo-offers strong, .demo-layout-editorial .demo-offer-label { grid-column:2; }
}
@media(max-width:700px) {
    .demo-space-page .directory-shell { width:calc(100% - 40px); }
    .demo-space-page .directory-nav { min-height:76px; padding:14px 20px; align-items:center; gap:12px; flex-wrap:nowrap; }
    .demo-space-page .directory-nav .brand > span:last-child { display:none; }
    .demo-space-page .directory-nav nav { width:auto; gap:16px; }
    .demo-space-page .directory-nav .button { padding:10px 14px; font-size:.75rem; }
    .demo-space-page .directory-nav .button svg { display:none; }
    .demo-space-page .demo-cover-stage { min-height:520px; min-height:clamp(480px,70svh,620px); padding:150px 0 56px; }
    .demo-space-page .demo-hero h1 { font-size:clamp(3rem,11.5vw,4.8rem); }
    .demo-cover-title .eyebrow { font-size:.65rem; margin-bottom:20px; }
    .demo-cover-title .eyebrow span { padding-inline:5px; }
    .demo-hero-image figcaption { right:20px; bottom:16px; font-size:.6rem; }
    .demo-breadcrumb { margin-bottom:28px; padding-block:20px; font-size:.7rem; gap:12px; flex-wrap:wrap; }
    .demo-hero-copy { grid-template-columns:1fr; gap:28px; }
    .demo-hero h2 { font-size:2.2rem; }
    .demo-description { font-size:1rem; }
    .demo-space-page .demo-hero { padding-bottom:32px; }
    .demo-actions { align-items:stretch; }
    .demo-actions .button { justify-content:center; }
    .demo-actions .demo-primary { flex:1 1 100%; }
    .demo-notice { padding:18px; }
    .demo-section-nav { gap:4px 22px; flex-wrap:wrap; font-size:.8rem; }
    .demo-section-nav button { margin-left:0; }
    .demo-section { padding-top:52px; }
    .demo-section > header { gap:16px; margin-bottom:24px; }
    .demo-space-page .demo-offers, .demo-space-page .demo-updates { grid-template-columns:1fr; }
    .demo-offer-number { margin-bottom:24px; }
    .demo-layout-editorial .demo-offers article { grid-template-columns:28px minmax(0,1fr); gap:8px 16px; }
    .demo-layout-editorial .demo-offers h3 { grid-column:2; grid-row:1; }
    .demo-layout-editorial .demo-offers p { grid-column:2; grid-row:2; margin-bottom:12px; }
    .demo-layout-grid .demo-offers article { border-right:0; border-bottom:1px solid var(--demo-line); }
    .demo-layout-grid .demo-offers article:last-child { border-bottom:0; }
    .demo-updates article { min-height:240px; padding:26px; }
    .demo-space-page .demo-faq { grid-template-columns:1fr; gap:28px; }
    .demo-space-page .related-grid { margin-bottom:48px; }
}