/* dm-listing.css — shared layout for crawlable listing landing pages
 * (/directory/{uuid}, /jobs/{uuid}). Visitors browsing the site keep using
 * the in-page modals; these pages are where Google (and anyone arriving
 * from Google) lands. Mobile-first; uses the DM tokens from dm-nav-footer.css
 * (--t, --tx1, --tx2, --bgc, --br) and brand gold #F5C842 for Join Free. */
.dml{--dml-gold:#F5C842;--dml-ink:#0A1628;max-width:1120px;margin:0 auto;padding:14px 16px 96px;font-family:'DM Sans',system-ui,sans-serif;color:var(--tx1,#EEF4FF)}
.dml a{color:inherit}
.dml-crumbs{display:flex;flex-wrap:nowrap;white-space:nowrap;gap:6px;align-items:center;font-size:.8rem;color:var(--tx2,#8FAEC8);margin:0 0 14px;padding:0;list-style:none}
.dml-crumbs li+li::before{content:'/';margin-right:6px;opacity:.5}
.dml-crumbs a{text-decoration:none;color:var(--t,#00D9FF)}
.dml-crumbs li:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dml-crumbs [aria-current]{color:var(--tx2,#8FAEC8)}
.dml-hero{position:relative;overflow:hidden;border:1px solid var(--brs,rgba(0,217,255,.3));border-radius:16px;padding:22px 18px 20px;background:radial-gradient(120% 140% at 0% 0%,rgba(0,217,255,.16),transparent 55%),radial-gradient(90% 120% at 100% 100%,rgba(245,200,66,.10),transparent 60%),var(--bgc,#0E1A2C)}
.dml-hero-top{display:flex;gap:14px;align-items:flex-start}
.dml-logo{flex:0 0 auto;width:64px;height:64px;border-radius:14px;background:#fff;border:1px solid var(--br,rgba(0,217,255,.12));display:flex;align-items:center;justify-content:center;overflow:hidden}
.dml-logo img{width:100%;height:100%;object-fit:contain;padding:6px;display:block}
.dml-logo.ini{background:linear-gradient(135deg,#00B4C8,#0A5C7A);color:#fff;font:800 1.35rem/1 'Lexend Deca','DM Sans',sans-serif;letter-spacing:.02em}
.dml-kicker{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--t,#00D9FF);background:rgba(0,217,255,.08);border:1px solid var(--br,rgba(0,217,255,.12));border-radius:999px;padding:4px 10px;margin:0 0 8px;text-decoration:none}
.dml-kicker svg{width:12px;height:12px;flex:0 0 12px}
.dml-h1{font-family:'Playfair Display',Georgia,serif;font-weight:900;font-size:clamp(1.45rem,5.6vw,2.4rem);line-height:1.15;letter-spacing:-.02em;margin:0;word-break:break-word}
.dml-sub{margin:10px 0 0;font-size:.95rem;line-height:1.55;color:var(--tx2,#8FAEC8)}
.dml-sub strong{color:var(--tx1,#EEF4FF);font-weight:700}
.dml-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.dml-chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 11px;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--tx1,#EEF4FF);background:rgba(255,255,255,.04);border:1px solid var(--br,rgba(0,217,255,.12))}
.dml-chip svg{width:14px;height:14px;flex:0 0 14px;color:var(--t,#00D9FF)}
.dml-chip.ok{color:#7CF0B4;border-color:rgba(124,240,180,.3)}
.dml-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.dml-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 20px;border-radius:10px;font-size:.95rem;font-weight:800;text-decoration:none;border:1px solid transparent;cursor:pointer;flex:1 1 auto}
.dml-btn svg{width:16px;height:16px}
.dml-btn-p{background:var(--t,#00D9FF);color:#001820 !important}
.dml-btn-g{background:transparent;color:var(--tx1,#EEF4FF) !important;border-color:var(--brs,rgba(0,217,255,.3))}
.dml-btn-y{background:var(--dml-gold);color:var(--dml-ink) !important}
.dml-btn:hover{filter:brightness(1.08)}
.dml-btn:focus-visible,.dml a:focus-visible{outline:3px solid var(--t,#00D9FF);outline-offset:2px}
.dml-grid{display:grid;gap:16px;margin:16px 0 0}
.dml-card{background:var(--bgc,#0E1A2C);border:1px solid var(--br,rgba(0,217,255,.12));border-radius:14px;padding:18px}
.dml-card h2{font-family:'Playfair Display',Georgia,serif;font-size:1.15rem;font-weight:800;margin:0 0 12px}
.dml-prose{font-size:1rem;line-height:1.75;color:var(--tx1,#EEF4FF);white-space:pre-line;margin:0;overflow-wrap:anywhere}
.dml-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.dml-fact{border:1px solid var(--br,rgba(0,217,255,.12));border-radius:10px;padding:10px 12px;min-width:0}
.dml-fact dt{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--txd,#6A8FA8);margin:0 0 4px}
.dml-fact dd{margin:0;font-size:.92rem;font-weight:600;overflow-wrap:anywhere}
.dml-fact dd a{color:var(--t,#00D9FF);text-decoration:none}
.dml-fact.wide{grid-column:1/-1}
.dml-map{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px;border-radius:10px;text-decoration:none;background:linear-gradient(135deg,rgba(0,217,255,.10),rgba(0,217,255,.02));border:1px dashed var(--brs,rgba(0,217,255,.3))}
.dml-map svg{width:28px;height:28px;color:var(--t,#00D9FF);flex:0 0 28px}
.dml-map b{display:block;font-size:.92rem}
.dml-map span{font-size:.78rem;color:var(--tx2,#8FAEC8)}
.dml-social{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.dml-social a{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border-radius:8px;border:1px solid var(--br,rgba(0,217,255,.12));font-size:.82rem;font-weight:700;text-decoration:none;color:var(--tx1,#EEF4FF)}
.dml-join{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(245,200,66,.14),rgba(245,200,66,.03) 60%),var(--bgc,#0E1A2C);border-color:rgba(245,200,66,.35)}
.dml-join p{margin:0 0 14px;font-size:.92rem;line-height:1.6;color:var(--tx2,#8FAEC8)}
.dml-join ul{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:6px;font-size:.88rem}
.dml-join li::before{content:'✓';color:var(--dml-gold);font-weight:900;margin-right:8px}
.dml-join .dml-btn{width:100%}
.dml-join small{display:block;margin-top:8px;text-align:center;font-size:.75rem;color:var(--txd,#6A8FA8)}
.dml-explore{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dml-explore a{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:10px;border:1px solid var(--br,rgba(0,217,255,.12));text-decoration:none;min-height:64px}
.dml-explore b{font-size:.92rem}
.dml-explore span{font-size:.75rem;color:var(--tx2,#8FAEC8)}
.dml-rel{margin:28px 0 0}
.dml-rel h2{font-family:'Playfair Display',Georgia,serif;font-size:1.25rem;font-weight:800;margin:0 0 12px}
.dml-rel ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
.dml-rel a{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;background:var(--bgc,#0E1A2C);border:1px solid var(--br,rgba(0,217,255,.12));text-decoration:none;min-height:64px;transition:transform .15s,border-color .15s}
.dml-rel a:hover{transform:translateY(-2px);border-color:var(--brs,rgba(0,217,255,.3))}
.dml-rel .dml-logo{width:42px;height:42px;border-radius:10px;font-size:.9rem}
.dml-rel b{display:block;font-size:.93rem;line-height:1.35}
.dml-rel span{display:block;font-size:.78rem;color:var(--tx2,#8FAEC8);margin-top:2px}
.dml-note{font-size:.78rem;color:var(--txd,#6A8FA8);line-height:1.6;margin:12px 0 0}
@media (min-width:720px){
  .dml{padding:22px 24px 96px}
  .dml-hero{padding:30px 30px 26px}
  .dml-logo{width:88px;height:88px;border-radius:18px}
  .dml-logo.ini{font-size:1.8rem}
  .dml-btn{flex:0 0 auto}
  .dml-rel ul{grid-template-columns:1fr 1fr}
}
@media (min-width:980px){
  .dml-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
  .dml-side{position:sticky;top:88px;display:grid;gap:16px}
  .dml-rel ul{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:979px){.dml-side{display:grid;gap:16px}}
/* Light themes: keep gold as a fill only, AA text tokens elsewhere */
[data-theme=light] .dml-hero,[data-theme=solarized] .dml-hero{background:radial-gradient(120% 140% at 0% 0%,rgba(0,96,100,.10),transparent 55%),var(--bgc,#fff)}
[data-theme=light] .dml-kicker,[data-theme=light] .dml-crumbs a,[data-theme=light] .dml-fact dd a,[data-theme=solarized] .dml-kicker,[data-theme=solarized] .dml-crumbs a{color:#006064}
[data-theme=light] .dml-chip.ok,[data-theme=solarized] .dml-chip.ok{color:#1B6B3A}
[data-theme=light] .dml-join li::before,[data-theme=solarized] .dml-join li::before{color:#7A4E00}
@media (prefers-reduced-motion:reduce){.dml-rel a{transition:none}.dml-rel a:hover{transform:none}}