/* Spaces discovery and isolated demo homes. Extends the UNLISPACE brand. */
.directory-page { background:#0b0c0e; color:#f7f7f4; font:1rem/1.55 var(--sans); }
.directory-page *, .directory-page *::before, .directory-page *::after { box-sizing:border-box; }
.directory-page [hidden] { display:none !important; }
.directory-page a { color:inherit; }
.directory-page .button-lime { color:#0a0a0c; }
.directory-page button, .directory-page input, .directory-page select { font:inherit; }
.directory-page button, .directory-page a, .directory-page select, .directory-page summary { -webkit-tap-highlight-color:transparent; }
.directory-page :focus-visible { outline:3px solid var(--space-accent,#d8ff3e); outline-offset:5px; }
.directory-page .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.directory-skip { position:fixed; top:-100px; left:20px; z-index:100; background:#d8ff3e; color:#0b0c0e!important; padding:12px 20px; }
.directory-skip:focus { top:12px; }
.directory-nav { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px max(5vw,24px); border-bottom:1px solid #292b2f; }
.directory-nav .brand { font-size:1rem; letter-spacing:.08em; }
.directory-nav nav { display:flex; align-items:center; gap:30px; }
.directory-nav nav > a:first-child { font-size:.9rem; color:#d8ff3e; }
.directory-shell { max-width:1480px; margin:0 auto; padding:0 max(5vw,24px); }
.directory-intro { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; padding:54px 0 36px; }
.directory-page .eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.14em; line-height:1.6; margin:0 0 18px; }
.directory-intro h1 { font:600 clamp(3.2rem,6.5vw,6.2rem)/.98 var(--display); letter-spacing:-.065em; margin:0; }
.directory-intro h1 span { color:#d8ff3e; }
.directory-intro-note { padding-bottom:4px; }
.directory-intro-note p { font-size:1.25rem; line-height:1.45; margin:0 0 18px; }
.directory-intro-note > span { color:#a8abad; font-size:.875rem; }
.directory-search-row { display:flex; align-items:stretch; gap:12px; }
.directory-search { flex:1; display:flex; align-items:center; gap:14px; border:1px solid #3b3e41; border-radius:12px; background:#17191c; padding:15px 20px; min-width:0; }
.directory-search > span:first-child { color:#d8ff3e; display:flex; }
.directory-search:focus-within { border-color:#d8ff3e; box-shadow:0 0 0 1px #d8ff3e; }
.directory-search input { flex:1; min-width:0; background:transparent; border:0; padding:0; color:white; outline:0!important; }
.directory-search input::placeholder { color:#a9adb0; opacity:1; }
.directory-search-row .button { white-space:nowrap; border-radius:12px; padding:14px 22px; }
.directory-saved-filter { display:flex; align-items:center; justify-content:center; gap:8px; background:none; border:1px solid #3b3e41; border-radius:12px; color:#fff; padding:12px 18px; cursor:pointer; }
.directory-saved-filter > span { font-size:.8rem; color:#a9adb0; }
.directory-saved-filter[aria-pressed=true] { color:#d8ff3e; border-color:#d8ff3e; }
.directory-categories { display:flex; flex-wrap:wrap; gap:9px; border:0; padding:24px 0; margin:0; }
.directory-categories button { display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 14px; min-height:44px; border:1px solid #35373b; border-radius:40px; color:#c9ccce; background:transparent; font-size:.875rem; cursor:pointer; }
.directory-categories button:hover { border-color:#b5b7b9; color:#fff; }
.directory-categories button[aria-pressed=true] { background:#d8ff3e; border-color:#d8ff3e; color:#0b0c0e; }
.directory-categories button > span { font-size:.75rem; padding:1px 6px; border-radius:10px; background:#0002; }
.directory-results-bar { border-top:1px solid #303236; display:flex; align-items:center; justify-content:space-between; padding:20px 0; gap:14px; font-size:.875rem; }
.directory-results-bar p { margin:0; }
.directory-results-bar p > span { color:#a7abae; }
.directory-results-bar label { display:flex; gap:8px; align-items:center; color:#a7abae; }
.directory-results-bar select { color:#f6f6f2; border:0; background:#17191c; border-radius:6px; padding:8px; max-width:160px; }
.directory-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.directory-card { position:relative; min-width:0; background:#17191c; border:1px solid #303236; border-radius:17px; overflow:hidden; transition:transform .2s,border-color .2s; }
.directory-card:hover { transform:translateY(-4px); border-color:var(--card-accent); }
.directory-card-link { display:block; text-decoration:none; }
.directory-card-create { position:absolute; right:22px; bottom:14px; display:flex; justify-content:flex-end; }
.directory-card-create .button { display:inline-flex; justify-content:center; gap:10px; padding:9px 18px; font-size:.85rem; }
.directory-create-tooltip { position:absolute; bottom:calc(100% + 8px); right:0; width:min(260px,calc(100vw - 80px)); padding:12px 14px; border:1px solid #61656b; border-radius:10px; background:#0a0a0c; color:#f5f5f5; font-size:.8rem; line-height:1.5; z-index:4; visibility:hidden; opacity:0; pointer-events:none; }
.directory-card-create:hover .directory-create-tooltip,.directory-card-create:focus-within .directory-create-tooltip { visibility:visible; opacity:1; }
.template-setup { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:60px; max-width:1000px; margin:55px auto 80px; align-items:start; }
.template-setup h1 { font:750 clamp(2.5rem,5vw,4rem)/1.08 var(--display); letter-spacing:-.05em; margin:12px 0 24px; }
.template-setup p { color:#bfc3c6; line-height:1.65; }
.template-preview { overflow:hidden; border:1px solid #34373b; border-radius:20px; background:#17191c; }
.template-preview img { display:block; width:100%; height:auto; aspect-ratio:1.5; object-fit:cover; }
.template-setup .eyebrow { color:#d8ff3e; }
.my-spaces { padding-bottom:70px; }
.my-spaces-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:52px 0 36px; }
.my-spaces-heading h1 { font:750 clamp(2.6rem,6vw,4.8rem)/1.1 var(--display); letter-spacing:-.05em; margin:15px 0; }
.my-spaces-heading h1 span { color:#d8ff3e; }
.my-spaces-heading p,.my-spaces-empty p { color:#bbc1c5; }
.owned-space-card h2 { font:700 1.35rem/1.3 var(--display); margin:0 0 10px; }
.owned-space-actions { display:flex; align-items:center; gap:20px; padding:0 22px 22px; }
.owned-space-actions > a { font-size:.85rem; }
.owned-space-actions .button { color:#0a0a0c; }
.my-spaces-empty { padding:45px; border:1px dashed #555a60; border-radius:18px; max-width:680px; }
@media(max-width:600px) { .my-spaces-heading { align-items:flex-start; flex-direction:column; } .my-spaces-empty { padding:24px; } }
.template-preview > div { padding:24px; }
.template-preview h2 { margin:0 0 10px; }
.template-form { display:grid; gap:20px; margin-top:24px; }
.template-form label { display:grid; gap:9px; }
.template-form input { width:100%; padding:14px; background:#17191c; color:#fff; border:1px solid #555a60; border-radius:10px; font:inherit; }
.template-error { padding:16px; border:1px solid #e6a796; border-radius:12px; }
@media (max-width:760px) { .template-setup { grid-template-columns:1fr; gap:24px; margin-top:28px; } .directory-card-create { right:18px; } }
.directory-card-photo { aspect-ratio:1.6; position:relative; background:#272a2d; overflow:hidden; }
.directory-card-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 55%,#0004); pointer-events:none; }
.directory-card-photo img { width:100%; height:100%; object-fit:cover; object-position:center 38%; transition:transform .4s; }
.directory-card:hover .directory-card-photo img { transform:scale(1.04); }
.directory-demo-label { position:absolute; top:16px; left:16px; background:#111d; color:white; border:1px solid #ffffff30; padding:4px 10px; border-radius:30px; font-size:.75rem; }
.directory-card-monogram { position:absolute; z-index:1; bottom:14px; left:20px; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--card-accent); color:#1c1c1e; font:800 .95rem var(--display); box-shadow:0 4px 15px #0002; }
.directory-card-copy { padding:20px 22px 0; }
.directory-card-category { margin:0 0 8px; color:var(--card-accent); font-size:.75rem; }
.directory-card-category span { color:#b8bdc1; }
.directory-card h3 { margin:0 0 8px; font:700 1.35rem/1.3 var(--display); letter-spacing:-.035em; }
.directory-card-headline { color:#bfc3c6; font-size:.9rem; min-height:2.8em; margin:0 0 17px; }
.directory-tags { display:flex; flex-wrap:wrap; gap:7px; }
.directory-tags span { display:inline-block; color:#c5c9cc; background:#ffffff06; border:1px solid #3e4146; padding:4px 9px; border-radius:5px; font-size:.75rem; }
.directory-card-bottom { margin-top:20px; border-top:1px solid #34373b; padding:22px 115px 22px 0; display:flex; align-items:center; justify-content:space-between; font-size:.875rem; }
.directory-card-bottom svg { display:none; }
.directory-save { position:absolute; top:12px; right:12px; border:1px solid #ffffff50; background:#121519d9; color:#fff; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer; }
.directory-save[aria-pressed=true] { background:var(--card-accent); color:#17191c; border-color:transparent; }
[data-save-space][aria-pressed=true] svg { fill:currentColor; }
.directory-empty { text-align:center; border:1px dashed #55595c; border-radius:16px; padding:60px 24px; }
.directory-empty > span { display:inline-flex; color:#d8ff3e; }
.directory-empty h2 { font:600 2rem/1.2 var(--display); margin:20px 0 12px; }
.directory-empty p { color:#b9bdc1; max-width:440px; margin:0 auto 24px; }
.directory-invite { display:flex; align-items:center; justify-content:space-between; gap:28px; margin:56px 0 20px; padding:36px 40px; border-radius:18px; background:#202716; border:1px solid #43512a; }
.directory-invite .eyebrow { color:#d8ff3e; margin-bottom:12px; }
.directory-invite h2 { font:600 clamp(2rem,4vw,3.5rem)/1.1 var(--display); letter-spacing:-.05em; margin:0 0 12px; }
.directory-invite p:last-child { color:#c8cfbc; margin:0; }
.directory-disclosure { color:#adb1b5; font-size:.8rem; max-width:850px; margin:22px 0 40px; }
.directory-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; border-top:1px solid #303236; padding:28px max(5vw,24px); font-size:.875rem; }
.directory-footer p { color:#afb3b6; margin:0; }
.directory-footer a { display:flex; align-items:center; gap:8px; }
.directory-toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:100; max-width:calc(100% - 36px); width:max-content; border-radius:12px; background:#d8ff3e; color:#111; padding:14px 22px; box-shadow:0 6px 40px #0005; margin:0; font-size:.875rem; }
.directory-notice { padding:16px; background:#252a1c; border-radius:10px; }
.demo-breadcrumb { display:flex; justify-content:space-between; gap:20px; padding:24px 0; font-size:.875rem; color:#c1c6ca; }
.demo-breadcrumb span { color:#a3a9ae; }
.demo-hero { display:grid; grid-template-columns:1.05fr 1fr; gap:50px; align-items:center; padding:16px 0 40px; }
.demo-hero-copy .eyebrow { color:var(--space-accent); }
.demo-hero h1 { font:600 clamp(2.7rem,5.2vw,5rem)/1.04 var(--display); letter-spacing:-.06em; margin:0 0 24px; }
.demo-hero h2 { font:500 clamp(1.4rem,2.2vw,2rem)/1.3 var(--display); letter-spacing:-.035em; margin:0 0 18px; color:var(--space-accent); }
.demo-description { color:#c0c5c9; line-height:1.75; margin:0 0 26px; max-width:540px; }
.demo-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.demo-space-page .demo-primary { background:var(--space-accent); color:#131519; }
.demo-hero-image { position:relative; margin:0; aspect-ratio:1; border-radius:22px; overflow:hidden; }
.demo-hero-image img { height:100%; width:100%; object-fit:cover; object-position:center 35%; }
.demo-hero-image figcaption { position:absolute; bottom:0; inset-inline:0; padding:32px 20px 15px; font-size:.75rem; color:white; background:linear-gradient(transparent,#000b); }
.demo-notice { display:flex; align-items:center; gap:20px; padding:17px 22px; border:1px solid #454b53; background:#1a1e24; border-radius:10px; }
.demo-notice > span { font-size:.75rem; white-space:nowrap; font-weight:700; color:var(--space-accent); }
.demo-notice p { margin:0; font-size:.875rem; color:#c8cdd2; }
.demo-section-nav { display:flex; align-items:center; gap:30px; padding:25px 0; border-bottom:1px solid #373c41; font-size:.875rem; }
.demo-section-nav button { margin-left:auto; display:flex; align-items:center; gap:8px; border:0; background:none; color:#d6dade; cursor:pointer; padding:8px 0; }
.demo-section { padding:48px 0 8px; scroll-margin-top:24px; }
.demo-section > header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.demo-section .eyebrow { color:var(--space-accent); margin-bottom:12px; }
.demo-section h2 { font:600 clamp(1.8rem,3vw,2.9rem)/1.15 var(--display); letter-spacing:-.045em; margin:0; }
.demo-section > header > p, .demo-section > header > a { margin:0; color:#b9bfc5; font-size:.875rem; }
.demo-section > header > a { display:flex; align-items:center; gap:8px; }
.demo-offers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.demo-offers article { display:flex; flex-direction:column; border:1px solid #373c41; background:#191c20; border-radius:14px; padding:28px; }
.demo-offer-number { color:var(--space-accent); font-size:.875rem; margin-bottom:28px; }
.demo-offers h3 { font:600 1.3rem/1.35 var(--display); letter-spacing:-.025em; margin:0 0 12px; }
.demo-offers p { color:#bbc2c8; margin:0 0 28px; font-size:1rem; }
.demo-offers strong { margin-top:auto; font-weight:500; font-size:1.1rem; color:var(--space-accent); }
.demo-offer-label { color:#adb6be; font-size:.75rem; margin-top:6px; }
.demo-sample-tag { color:#c9ced3; border:1px solid #4e555d; padding:5px 10px; border-radius:30px; font-size:.75rem; white-space:nowrap; }
.demo-updates { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.demo-updates article { display:flex; flex-direction:column; background:var(--space-accent); color:#171c21; padding:32px; border-radius:14px; }
.demo-updates article:nth-child(2) { background:#1c2025; color:#e9edf1; border:1px solid #373c41; }
.demo-updates article:first-child .eyebrow { color:#333b43; }
.demo-updates h3 { font:500 clamp(1.25rem,2vw,1.65rem)/1.5 var(--display); margin:12px 0 40px; letter-spacing:-.025em; }
.demo-updates footer { display:flex; justify-content:space-between; align-items:center; margin-top:auto; font-size:.875rem; }
.demo-faq { display:grid; grid-template-columns:1fr 1.3fr; gap:60px; padding-bottom:32px; }
.demo-faq details { border-bottom:1px solid #373c41; padding:18px 0; }
.demo-faq details:first-child { padding-top:0; }
.demo-faq summary { cursor:pointer; padding:6px 0; font-size:1rem; }
.demo-faq details p { color:#bbc2c8; margin:14px 0 0; }
.demo-faq details a { text-decoration:underline; color:var(--space-accent); }
.related-grid { grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:52px; }
@media (min-width:1600px) { .directory-shell { padding-inline:48px; } }
@media (max-width:1050px) { .directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .demo-hero { gap:30px; } .demo-offers { gap:12px; } .demo-offers article { padding:22px; } }
@media (max-width:760px) {
  .directory-nav { padding:18px 22px; gap:12px; flex-wrap:wrap; }
  .directory-nav .brand { font-size:.85rem; gap:8px; }
  .directory-nav nav { gap:14px; }
  .directory-nav nav > a:first-child { font-size:.8rem; }
  .directory-nav .button { font-size:.8rem; padding:10px 14px; }
  .directory-shell { padding-inline:22px; }
  .directory-intro { padding-top:34px; gap:22px; }
  .directory-intro-note p { display:none; }
  .directory-intro-note { max-width:115px; }
  .directory-search-row { flex-wrap:wrap; }
  .directory-search { flex-basis:100%; }
  .directory-search-row > .button { flex:1; }
  .directory-categories { flex-wrap:nowrap; overflow-x:auto; padding:20px 0; scrollbar-width:thin; }
  .directory-categories button { flex-shrink:0; }
  .directory-card-copy { padding:18px 18px 0; }
  .directory-card h3 { font-size:1.2rem; }
  .directory-invite { padding:28px; flex-direction:column; align-items:flex-start; }
  .directory-footer { padding-inline:22px; }
  .demo-hero { grid-template-columns:1fr; padding-top:4px; }
  .demo-hero h1 { max-width:600px; }
  .demo-hero-image { aspect-ratio:1.5; }
  .demo-notice { align-items:flex-start; flex-direction:column; gap:8px; }
  .demo-offers { grid-template-columns:1fr; }
  .demo-section-nav { gap:18px; flex-wrap:wrap; }
  .demo-section-nav button { margin-left:0; }
  .demo-faq { grid-template-columns:1fr; gap:24px; }
  .demo-section > header { align-items:flex-start; flex-direction:column; gap:16px; }
  .demo-updates { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .directory-grid { grid-template-columns:1fr; }
  .directory-nav { align-items:flex-start; }
  .directory-nav nav { width:100%; justify-content:space-between; }
  .directory-intro { align-items:flex-start; flex-direction:column; }
  .directory-intro-note { max-width:none; }
  .directory-results-bar p > span { display:none; }
  .directory-results-bar label { font-size:.8rem; }
  .directory-intro h1 { font-size:3.7rem; }
  .demo-breadcrumb { font-size:.8rem; }
}
@media (prefers-reduced-motion:reduce) { .directory-card, .directory-card-photo img { transition:none; } .directory-card:hover { transform:none; } }