/* ============================================================
   OBSIDIAN — showcase components (Domains / Reseller / Builder)
   Layers on top of clone.css; same tokens, same skin.
   ============================================================ */

/* language toggle (EN | ES) */
.lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.lang-toggle button{background:transparent;border:none;color:var(--muted);font:inherit;font-size:12.5px;font-weight:800;padding:8px 13px;cursor:pointer}
.lang-toggle button.on{background:var(--cyan);color:#fff}
.drawer .lang-row{display:flex;align-items:center;justify-content:space-between;padding:15px 4px;border-bottom:1px solid var(--line)}
.drawer .lang-row span{font-weight:800;font-size:15px;color:#fff}

/* live-data status + honesty lines */
.lane-note{color:var(--faint);font-size:13px;font-weight:600;text-align:center;max-width:720px;margin:16px auto 0}
.lane-status{text-align:center;color:var(--muted);font-weight:700;font-size:14px;padding:18px 0}

/* name-idea cards (featured domains, live-checked) */
.idea-card{display:flex;flex-direction:column;gap:6px}
.idea-card .dom{font-size:19px;font-weight:900;word-break:break-all}
.idea-card .avail{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.idea-card .avail::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
.idea-card .pr{font-size:15px;color:var(--muted);font-weight:700}
.idea-card .pr b{color:var(--cyan);font-size:19px}
.idea-card .go{margin-top:auto}

/* TLD price table */
.tld-table-wrap{max-width:820px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
table.tld-table{width:100%;border-collapse:collapse;font-size:15px}
table.tld-table th,table.tld-table td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line)}
table.tld-table th{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-weight:800}
table.tld-table tr:last-child td{border-bottom:none}
table.tld-table td.ext{font-weight:900;font-size:18px}
table.tld-table td.price{font-weight:900;color:var(--cyan)}
table.tld-table td.ren{color:var(--muted);font-weight:700}

/* browser-frame demo mock (style previews) */
.browser-mock{background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.browser-mock .bar{display:flex;align-items:center;gap:8px;background:var(--panel2);padding:11px 16px;border-bottom:1px solid var(--line)}
.browser-mock .dot{width:11px;height:11px;border-radius:50%;background:#3a3a46}
.browser-mock .dot.r{background:#5b2b33}.browser-mock .dot.y{background:#5b4d2b}.browser-mock .dot.g{background:#2b5b3d}
.browser-mock .url{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12.5px;font-weight:700;padding:6px 14px;text-align:center}
.browser-mock .screen{padding:26px}
.preview-tag{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#cf9fff;background:rgba(168,85,247,.13);border:1px solid rgba(168,85,247,.4);border-radius:999px;padding:6px 13px;margin-bottom:16px}
.mock-search{display:flex;gap:8px;background:#fff;border-radius:999px;padding:6px;margin:16px 0}
.mock-search span{flex:1;color:#8a8a93;font-size:13.5px;font-weight:600;padding:9px 14px}
.mock-search b{background:var(--cyan);color:#fff;border-radius:999px;padding:9px 20px;font-size:13.5px}
.mock-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:12px 2px;font-size:14px}
.mock-row b{color:var(--cyan)}
.mock-prompt{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:14.5px;color:#e8e8ee}
.mock-blocks{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-top:14px}
.mock-blocks div{background:var(--panel2);border:1px dashed #34343f;border-radius:12px;min-height:64px;padding:12px;color:var(--faint);font-size:12.5px;font-weight:700}

/* portfolio cards */
.portfolio-card .body h3{font-size:19px}
.portfolio-card .url{color:var(--cyan);font-weight:800;font-size:13.5px;text-decoration:none}
.portfolio-card img{height:200px}

/* cross-sell + CTA band */
.cta-band{background:linear-gradient(160deg,#101828,#0b0b12);border:1.5px solid rgba(37,99,235,.5);border-radius:28px;padding:36px 28px;text-align:center;max-width:900px;margin:0 auto}
.cta-band h2{font-size:clamp(24px,5.4vw,34px);font-weight:900}
.cta-band p{color:var(--muted);margin:12px auto 22px;max-width:560px}
.cta-band .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---- portfolio gallery (Layers-style: image-first, filterable) ---- */
.filter-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.filter-chips button{background:var(--panel2);border:1px solid var(--line);color:var(--ink);font:inherit;font-size:13.5px;font-weight:800;border-radius:999px;padding:10px 20px;cursor:pointer;min-height:44px}
.filter-chips button.on{background:var(--cyan);border-color:var(--cyan);color:#fff}
.gallery{display:grid;gap:18px}
@media(min-width:860px){.gallery{grid-template-columns:1fr 1fr}}
.gallery-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.gallery-card:hover{border-color:rgba(37,99,235,.55)}
.gallery-card .media{display:block;line-height:0}
.gallery-card img{width:100%;height:250px;object-fit:cover;object-position:top}
.gallery-card .gbody{padding:22px 24px 26px}
.gallery-card .gtop{display:flex;justify-content:space-between;align-items:center;gap:12px}
.gallery-card h3{font-size:20px;font-weight:800}
.gallery-card p{color:var(--muted);font-size:14.5px;margin-top:6px}
.gallery-card .go{display:inline-flex;gap:8px;margin-top:14px;font-weight:800;font-size:14px;text-decoration:none}
.cat-tag{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#c9d9fd;background:rgba(37,99,235,.13);border:1px solid rgba(37,99,235,.4);border-radius:999px;padding:5px 11px;white-space:nowrap}

/* ============================================================
   LAYERS PRESENTATION PASS (per layers-study SPEC §6/§6.4)
   Monochrome chrome, cinematic content: saturated color comes
   from the artwork; metadata sits in a quiet mono register;
   headings are statements that end in periods; CTAs stay small
   and literal.
   ============================================================ */
.mono{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.03em}
.lane-note{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
table.tld-table td.price,table.tld-table td.ren{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace}
.count-line{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;color:var(--faint);font-size:13px;font-weight:600;text-align:center;letter-spacing:.04em}

/* idea cards get an art band — our own site art, name as display type */
.idea-card{padding:0;overflow:hidden}
.idea-card .art{height:96px;width:100%;object-fit:cover;display:block}
.idea-card .ibody{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.idea-card{display:flex;flex-direction:column}

/* gallery v2 — full-bleed previews, quiet metadata */
.gallery-card .media img{height:300px}
.gallery-card.feature{grid-column:1/-1}
.gallery-card.feature .media img{height:380px}
.new-badge{position:absolute;top:14px;left:14px;background:var(--cyan);color:#fff;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:6px 12px}
.gallery-card .media{position:relative}
.gallery-card .feel{color:#e8e8ee;font-size:15.5px;margin-top:8px}
.gallery-card .meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.gallery-card .meta .url{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;color:var(--faint);font-size:12.5px;font-weight:600}
.filter-axis{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.filter-axis .axis-label{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;color:var(--faint);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-right:4px}
.filter-axis button{background:var(--panel2);border:1px solid var(--line);color:var(--ink);font:inherit;font-size:13px;font-weight:800;border-radius:999px;padding:8px 16px;cursor:pointer;min-height:40px}
.filter-axis button.on{background:var(--cyan);border-color:var(--cyan);color:#fff}

/* numbered argument beats (Reseller, Layers About shape) */
.beats{display:grid;gap:16px;max-width:980px;margin:0 auto}
@media(min-width:860px){.beats{grid-template-columns:repeat(3,1fr)}}
.beat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.beat .num{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;color:var(--cyan);font-size:14px;font-weight:700;letter-spacing:.1em}
.beat h3{font-size:20px;font-weight:800;margin:12px 0 8px}
.beat p{color:var(--muted);font-size:14.5px}

/* freshness / digest band — woven into the scroll */
.digest-band{border:1px solid var(--line);border-radius:28px;padding:30px 28px;text-align:center;background:var(--panel);max-width:900px;margin:0 auto}
.digest-band h2{font-size:clamp(22px,5vw,30px);font-weight:900}
.digest-band p{color:var(--muted);margin:10px auto 20px;max-width:520px;font-size:15px}

/* style detail page */
.style-hero{position:relative;border-radius:28px;overflow:hidden;border:1px solid var(--line);line-height:0}
.style-hero img{width:100%;height:min(56vh,520px);object-fit:cover;object-position:top}
.style-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 18px}
.style-tabs button{background:var(--panel2);border:1px solid var(--line);color:var(--ink);font:inherit;font-size:14px;font-weight:800;border-radius:999px;padding:11px 22px;cursor:pointer;min-height:46px}
.style-tabs button.on{background:var(--cyan);border-color:var(--cyan);color:#fff}
.style-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}
.style-panel p{color:var(--muted);font-size:15.5px;max-width:640px}
.style-panel ul{list-style:none;display:grid;gap:10px}
.style-panel ul li{display:flex;gap:10px;font-size:15px;color:#e8e8ee}
.style-panel ul li i{color:var(--green);font-style:normal}
.crumb{font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;color:var(--faint);font-size:13px;font-weight:600}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--cyan)}
.mini-wall{display:grid;gap:14px}
@media(min-width:860px){.mini-wall{grid-template-columns:repeat(3,1fr)}}
.mini-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;text-decoration:none;color:var(--ink)}
.mini-card img{height:130px;width:100%;object-fit:cover;object-position:top}
.mini-card .mb{padding:14px 16px}
.mini-card h4{font-size:15.5px;font-weight:800}
.mini-card span{color:var(--faint);font-size:12.5px;font-weight:700}