/* ============================================================
   pages.css — shared styles for YappRoom sub-pages
   (room landing pages + support pages). Pairs with brand.css.
   Each page sets its accent via :root{ --accent: var(--<color>) }.
   ============================================================ */

/* ---------- sub-page hero ---------- */
.subhero { position: relative; overflow: hidden; padding: 46px 0 76px; }
.subhero .blob { z-index: 0; }
.subhero .blob.a { width: 600px; height: 600px; top: -170px; right: -130px; background: color-mix(in oklab, var(--accent) 22%, transparent); }
.subhero .blob.b { width: 420px; height: 420px; bottom: -170px; left: -130px; background: color-mix(in oklab, var(--accent) 12%, transparent); }
.subhero .grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 36px; align-items: center; }
.subhero h1 { color: #fff; margin-top: 18px; }
.subhero h1 em { color: var(--accent); }
.subhero .lead { margin-top: 22px; max-width: 480px; }
.subhero .cta-row { margin-top: 32px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

.breadcrumb { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); display: inline-flex; gap: 9px; align-items: center; }
.breadcrumb a { color: var(--accent); }
.breadcrumb .cs { color: var(--accent); }

/* icon-led hero emblem (pages with no screenshot) */
.emblem { position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; }
.emblem .glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; filter: blur(110px); background: color-mix(in oklab, var(--accent) 28%, transparent); z-index: 0; }
.emblem .ring { position: relative; z-index: 2; width: 300px; height: 300px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--accent) 38%, transparent); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 38%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 62%); }
.emblem .ring::before { content: ""; position: absolute; inset: 26px; border-radius: 50%; border: 1px dashed color-mix(in oklab, var(--accent) 26%, transparent); }
.emblem .ring svg { width: 120px; height: 120px; color: var(--accent); }
.emblem .soon-badge { position: absolute; top: 30px; right: 30px; z-index: 3; }

/* phone hero (pages with a screenshot) */
.subhero-visual { position: relative; display: flex; justify-content: center; }
.subhero-visual .glow { position: absolute; width: 380px; height: 380px; border-radius: 50%; filter: blur(110px); background: color-mix(in oklab, var(--accent) 24%, transparent); top: 50%; left: 50%; transform: translate(-50%,-50%); }
.subhero-visual .phone { position: relative; z-index: 2; width: 318px; transform: rotate(2.5deg); }
.subhero-visual .fchip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 12.5px; padding: 10px 14px; border-radius: 13px; background: rgba(16,13,22,.85); backdrop-filter: blur(10px); border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); color: var(--accent); box-shadow: 0 14px 36px rgba(0,0,0,.45); }

/* meta stat row */
.hmeta { display: flex; gap: 28px; margin-top: 34px; flex-wrap: wrap; }
.hmeta .v { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 800; color: #fff; }
.hmeta .k { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-top: 4px; }

/* ---------- step grid ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-top: 50px; }
.pstep { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px; }
.pstep .n { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .12em; color: var(--accent); }
.pstep h4 { font-family: 'Playfair Display', serif; font-size: 21px; font-weight: 700; color: #fff; margin-top: 14px; }
.pstep p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin-top: 9px; }

/* ---------- two-up split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split .copy h2, .split .copy h3 { color: #fff; margin-top: 16px; }
.split .copy .lead { margin-top: 16px; }

/* ---------- example Wall card ---------- */
.exwrap { display: flex; justify-content: center; margin-top: 48px; }
.excard { width: min(580px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: 0 30px 70px rgba(0,0,0,.4); }
.excard .top { display: flex; align-items: center; gap: 12px; }
.excard .av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--gold)); flex: none; }
.excard .nm { font-weight: 800; font-size: 15px; color: #fff; }
.excard .mt { font-family: 'Space Mono', monospace; font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.excard .tag { margin-left: auto; font-family: 'Space Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); padding: 4px 9px; border-radius: 999px; }
.excard .body { color: #fff; font-size: 19px; line-height: 1.45; margin-top: 18px; font-family: 'Playfair Display', serif; font-weight: 600; }
.excard .quote { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin-top: 10px; }
.excard .acts { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.excard .ca { display: inline-flex; align-items: center; gap: 6px; font-family: 'Space Mono', monospace; font-weight: 700; font-size: 12px; padding: 9px 14px; border-radius: 999px; }
.excard .ca.coin { background: var(--accent); color: var(--ink); }
.excard .ca.ghost { background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid var(--line-2); }

/* ---------- safety note ---------- */
.safety { display: flex; gap: 18px; align-items: flex-start; background: color-mix(in oklab, var(--accent) 7%, var(--card)); border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent); border-radius: var(--r-lg); padding: 28px 30px; margin-top: 30px; }
.safety .si { width: 44px; height: 44px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); }
.safety .si svg { width: 22px; height: 22px; }
.safety h4 { color: #fff; font-size: 17px; font-weight: 700; }
.safety p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin-top: 6px; max-width: 760px; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 44px auto 0; }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 2px; }
.faq summary { font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; font-size: 17px; color: #fff; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { color: var(--accent); font-size: 24px; line-height: 1; transition: transform .2s ease; flex: none; }
.faq details[open] summary .pm { transform: rotate(45deg); }
.faq .ans { color: var(--muted); font-size: 15px; line-height: 1.6; margin-top: 12px; max-width: 720px; }

/* ---------- crosslinks ---------- */
.crosslinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 50px; }
.xlink { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 22px; transition: border-color .2s ease, transform .2s ease; }
.xlink:hover { border-color: var(--line-2); transform: translateY(-3px); }
.xlink .xt { font-weight: 700; font-size: 15px; color: #fff; }
.xlink .xs { font-family: 'Space Mono', monospace; font-size: 11.5px; color: var(--dim); margin-top: 4px; }
.xlink .xa { width: 18px; height: 18px; color: var(--accent); flex: none; }

/* ---------- CTA band ---------- */
.ctaband { text-align: center; }
.ctaband .appicon { width: 84px; height: 84px; border-radius: 22px; margin: 0 auto 24px; display: block; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.ctaband h2 { color: #fff; }
.ctaband .lead { margin: 18px auto 0; max-width: 520px; }
.ctaband .stores { justify-content: center; margin-top: 30px; }
.disclaimer { max-width: 820px; margin: 24px auto 0; color: var(--dim); font-size: 12.5px; line-height: 1.6; text-align: center; }

@media (max-width: 960px) {
  .subhero .grid, .split { grid-template-columns: 1fr; gap: 40px; }
  .emblem { min-height: 300px; }
}
@media (max-width: 560px) {
  .emblem .ring { width: 230px; height: 230px; }
  .emblem .ring svg { width: 92px; height: 92px; }
}


/* ---------- legal / doc pages ---------- */
.docwrap { max-width: 860px; }
.dochero { padding: 36px 0 0; }
.dochero .breadcrumb { margin-bottom: 18px; }
.dochero h1 { color:#fff; }
.dochero .upd { font-family:'Space Mono',monospace; font-size:12.5px; color:var(--dim); margin-top:16px; letter-spacing:.03em; }
.doc h2 { font-family:'Playfair Display',serif; font-weight:700; font-size:clamp(23px,2.5vw,29px); color:#fff; margin-top:42px; padding-top:26px; border-top:1px solid var(--line); letter-spacing:-0.01em; }
.doc h2:first-child { border-top:none; padding-top:0; margin-top:28px; }
.doc h3 { font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:18px; color:#fff; margin-top:26px; }
.doc h4 { font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:16px; color:var(--text); margin-top:22px; }
.doc p { color:var(--muted); font-size:16px; line-height:1.7; margin-top:14px; }
.doc ul { list-style:none; margin-top:14px; }
.doc li { color:var(--muted); font-size:16px; line-height:1.6; padding-left:24px; position:relative; margin:9px 0; }
.doc li::before { content:""; position:absolute; left:3px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.doc strong { color:var(--text); font-weight:700; }
.doc a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.doc-foot { margin-top:50px; padding-top:24px; border-top:1px solid var(--line); font-family:'Space Mono',monospace; font-size:12.5px; color:var(--dim); line-height:1.7; }
.sitemap-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:30px; margin-top:44px; }
.smcol h3 { font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
.smcol a { display:block; color:var(--muted); font-size:16px; padding:10px 0; border-bottom:1px solid var(--line); transition:color .15s ease; }
.smcol a:hover { color:var(--gold); }
.smcol a .d { font-family:'Space Mono',monospace; font-size:11px; color:var(--dim); display:block; margin-top:2px; }

.dcard .tok .coinimg { width:30px; height:30px; }
.excard .ca.primary { background: var(--accent); color: var(--ink); }