/* ============================================================ DChat — secondary pages (faq / help / getting-started / guides / contact / enterprise). Loads AFTER style.css and reuses its tokens; everything here is scoped under body.pg so the landing page is untouched. The heavy Tron canvas FX are deliberately NOT loaded here: subpages are content surfaces, people arrive to read. If a page should get the laser treatment, add class="fx-on" to — that is the UI/UX decision point, one class. ============================================================ */ body.pg{background:var(--bg);min-height:100vh;display:flex;flex-direction:column} body.pg main{flex:1} /* ---------- static nav (no scroll-jack, links back to the landing) ---------- */ body.pg #nav{position:sticky;top:0;background:rgba(11,11,12,.86);backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.06);z-index:50} /* ---------- page hero: compact banner, not a 100vh act ---------- */ .pghero{position:relative;padding:110px 40px 64px;text-align:center;overflow:hidden} .pghero::before{content:'';position:absolute;left:50%;top:-40%;width:900px;height:520px; transform:translateX(-50%);pointer-events:none; background:radial-gradient(closest-side,rgba(39,150,195,.14),rgba(116,43,238,.06) 55%,transparent 75%)} .pghero .eyebrow{display:inline-block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--accent2);margin-bottom:16px} .pghero h1{font-size:clamp(30px,4vw,52px);line-height:1.15;position:relative} .pghero p{max-width:560px;margin:18px auto 0;color:var(--t3);font-size:15px;line-height:1.7;position:relative} /* ---------- content shells ---------- */ .pgwrap{max-width:1080px;margin:0 auto;padding:0 40px} .pgwrap.narrow{max-width:760px} .pgsec{padding:54px 0} .pgsec h2{font-size:clamp(22px,2.6vw,32px);margin-bottom:10px} .pgsec>.pgwrap>p.lead,.pgsec .lead{color:var(--t3);font-size:14.5px;line-height:1.75;max-width:640px;margin-bottom:26px} /* ---------- card grid (help topics, guides, offerings) ---------- */ .pgcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px} .pgcard{display:block;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:var(--bg1); padding:24px;transition:border-color .2s,transform .2s,box-shadow .25s} .pgcard:hover{border-color:rgba(91,184,212,.45);transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,.35),0 0 22px rgba(39,150,195,.12)} .pgcard .ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center; background:rgba(39,150,195,.14);color:var(--accent2);margin-bottom:14px} .pgcard h3{font-size:16px;margin-bottom:8px} .pgcard p{font-size:13px;line-height:1.65;color:var(--t3)} .pgcard .go{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--accent2)} /* ---------- prose articles (guides, getting started) ---------- */ .article{border:1px solid rgba(255,255,255,.07);border-radius:20px;background:var(--bg1); padding:34px 36px;margin-bottom:18px} .article h3{font-size:19px;margin-bottom:12px} .article h4{font-size:14.5px;color:var(--t1);margin:20px 0 8px} .article p,.article li{font-size:13.5px;line-height:1.75;color:var(--t3)} .article ol,.article ul{margin:10px 0 10px 20px} .article li{margin-bottom:6px} .article code{font-family:Consolas,monospace;font-size:12.5px;color:var(--accent2); background:rgba(39,150,195,.1);border-radius:5px;padding:1px 6px} .article .note{border-left:2px solid var(--accent);background:rgba(39,150,195,.07); border-radius:0 10px 10px 0;padding:12px 16px;margin:14px 0;font-size:13px;color:var(--t2)} /* ---------- step rail (getting started) ---------- */ .steps{counter-reset:st;display:flex;flex-direction:column;gap:0} .step{position:relative;padding:0 0 34px 62px;counter-increment:st} .step::before{content:counter(st);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-weight:600; color:var(--accent2);border:1px solid rgba(91,184,212,.4);background:rgba(39,150,195,.08); box-shadow:0 0 14px rgba(39,150,195,.18)} .step::after{content:'';position:absolute;left:19px;top:44px;bottom:6px;width:1px; background:linear-gradient(rgba(91,184,212,.35),rgba(91,184,212,.05))} .step:last-child::after{display:none} .step h3{font-size:16.5px;margin-bottom:8px;padding-top:7px} .step p{font-size:13.5px;line-height:1.7;color:var(--t3);max-width:560px} /* ---------- FAQ accordion (self-contained, no main.js) ---------- */ .pg .q{border-bottom:1px solid rgba(255,255,255,.07)} .pg .q button{width:100%;display:flex;justify-content:space-between;align-items:center; padding:20px 4px;font-size:14.5px;color:var(--t1);text-align:left} .pg .q .plus{color:var(--t4);font-size:18px;flex:none;margin-left:16px;transition:transform .3s} .pg .q.open .plus{transform:rotate(45deg);color:var(--accent2)} .pg .q .a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1); font-size:13px;line-height:1.7;color:var(--t3)} .pg .q .a div{padding:0 4px 20px;max-width:640px} .faq-group{margin-bottom:44px} .faq-group h2{font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent2);margin-bottom:6px} /* ---------- forms (contact, request quote) ---------- */ .pgform{border:1px solid rgba(255,255,255,.08);border-radius:20px;background:var(--bg1);padding:32px} .pgform .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .pgform label{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--t4);margin:16px 0 7px} .pgform input,.pgform select,.pgform textarea{width:100%;background:var(--bg2);color:var(--t1); border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:11px 14px;font:inherit;font-size:13.5px} .pgform input:focus,.pgform select:focus,.pgform textarea:focus{outline:none;border-color:var(--accent); box-shadow:0 0 0 3px rgba(39,150,195,.15)} .pgform textarea{min-height:120px;resize:vertical} .pgform .send{margin-top:22px} .pgform .hint{font-size:11.5px;color:var(--t4);margin-top:12px} /* ---------- enterprise offering cards + comparison ---------- */ .offers{display:grid;grid-template-columns:1fr 1fr;gap:18px} .offer{border:1px solid rgba(255,255,255,.09);border-radius:22px;background:var(--bg1);padding:32px;position:relative} .offer.hot{border-color:rgba(91,184,212,.4);box-shadow:0 0 34px rgba(39,150,195,.10)} .offer .tag{position:absolute;top:20px;right:20px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--accent2);border:1px solid rgba(91,184,212,.4);border-radius:999px;padding:4px 11px} .offer h3{font-size:21px;margin-bottom:6px} .offer .sub{font-size:12.5px;color:var(--t4);margin-bottom:18px} .offer ul{list-style:none;margin-bottom:24px} .offer li{font-size:13px;color:var(--t3);line-height:2;padding-left:20px;position:relative} .offer li::before{content:'◈';position:absolute;left:0;color:var(--accent2);font-size:10px;top:1px} .cmp{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px} .cmp th,.cmp td{padding:12px 14px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06)} .cmp th{font-family:var(--f-head);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--t1)} .cmp td{color:var(--t3)} .cmp td:first-child{color:var(--t2)} .cmp .y{color:var(--accent2)} /* ---------- contact channels ---------- */ .channels{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-bottom:34px} /* ---------- bottom CTA band ---------- */ .pgcta{text-align:center;padding:70px 24px;border-top:1px solid rgba(255,255,255,.05)} .pgcta h2{font-size:clamp(22px,3vw,34px)} .pgcta p{color:var(--t3);font-size:13.5px;margin:12px auto 26px;max-width:480px} .pgcta .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} @media (max-width:900px){ .pghero{padding:90px 22px 48px} .pgwrap{padding:0 22px} .offers,.pgform .row2{grid-template-columns:1fr} .article{padding:26px 22px} } /* ---------- v2 ---------- */ html{scroll-behavior:smooth} /* shared band heading for landing-page sections built from pages.css */ .bandhead{text-align:center;margin-bottom:52px;position:relative;z-index:3} .bandhead .eyebrow{display:inline-block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent2);margin-bottom:14px} .bandhead h2{font-size:clamp(26px,3.2vw,42px)} .bandhead p{margin:12px auto 0;color:var(--t4);font-size:13.5px;max-width:520px;line-height:1.7} /* ---------- download grid (replaces the spec-sheet .pcol cards) ---------- */ .dlgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1080px;margin:0 auto;position:relative;z-index:3} .dlcard{border:1px solid rgba(255,255,255,.08);border-radius:22px;background:linear-gradient(180deg,var(--bg2),var(--bg1) 55%); padding:34px 26px 26px;text-align:center;display:flex;flex-direction:column;align-items:center; transition:transform .25s,border-color .25s,box-shadow .3s} .dlcard:hover{transform:translateY(-4px);border-color:rgba(91,184,212,.4); box-shadow:0 18px 40px rgba(0,0,0,.4),0 0 26px rgba(39,150,195,.12)} .dlcard .glyph{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center; color:var(--t1);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);margin-bottom:18px; box-shadow:inset 0 1px 0 rgba(255,255,255,.06)} .dlcard.hot .glyph{color:#fff;background:linear-gradient(135deg,rgba(116,43,238,.35),rgba(39,150,195,.35)); border-color:rgba(91,184,212,.45);box-shadow:0 0 22px rgba(39,150,195,.25)} .dlcard h3{font-size:18px;margin-bottom:6px} .dlcard .sub{font-size:12.5px;color:var(--t4);line-height:1.6;margin-bottom:22px;min-height:34px} .dlcard .btn{width:100%;justify-content:center;margin-top:auto} .dlcard .meta{font-size:11px;color:var(--t4);margin-top:12px;letter-spacing:.04em} /* ---------- enterprise offer, refined ---------- */ .offer{background:linear-gradient(180deg,var(--bg2),var(--bg1) 60%);padding:34px} .offer .ichead{display:flex;align-items:center;gap:14px;margin-bottom:6px} .offer .ichead .ic{width:44px;height:44px;border-radius:13px;flex:none;display:flex;align-items:center;justify-content:center; color:var(--accent2);background:rgba(39,150,195,.12);border:1px solid rgba(91,184,212,.3)} .offer.hot .ichead .ic{color:#fff;background:linear-gradient(135deg,rgba(116,43,238,.4),rgba(39,150,195,.4));border-color:rgba(91,184,212,.5)} .offer h3{margin-bottom:0} .offer .tag{position:static;display:inline-block;margin:0 0 18px;order:-1} .offer .taglane{min-height:26px;margin-bottom:10px} .offer .sub{margin:4px 0 20px} .offer .btn{width:100%;justify-content:center} .offer:hover{border-color:rgba(91,184,212,.35)} @media (max-width:900px){.dlgrid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.dlgrid{grid-template-columns:1fr}} /* ---------- v3: ported doc pages (privacy / recovery / getting-started) ---------- */ .pgsec .eyebrow{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent2);margin-bottom:10px} .doc>section{margin-bottom:44px} .doc h2{font-size:clamp(20px,2.4vw,28px);margin-bottom:8px} .doc .lead{color:var(--t3);font-size:14px;line-height:1.75;max-width:660px;margin:0 0 20px} /* callouts */ .cx{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:14px 16px;margin:16px 0; font-size:13px;line-height:1.7;color:var(--t2);border:1px solid rgba(255,255,255,.08);background:var(--bg1)} .cx .ico{flex:none;font-size:16px;line-height:1.5} .cx.info{border-color:rgba(39,150,195,.35);background:rgba(39,150,195,.08)} .cx.warn{border-color:rgba(255,170,51,.35);background:rgba(255,170,51,.07)} .cx.danger{border-color:rgba(255,85,85,.4);background:rgba(255,85,85,.08)} /* do / don't lists */ .twocol{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:6px} .listhead{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:12px} .listhead.ok{color:var(--accent2)} .listhead.no{color:#ff6b6b} .oklist,.nolist{list-style:none;margin:0;padding:0} .oklist li,.nolist li{position:relative;padding:7px 0 7px 26px;font-size:13.5px;line-height:1.6;color:var(--t3); border-bottom:1px solid rgba(255,255,255,.05)} .oklist li::before{content:'\2713';position:absolute;left:0;color:var(--accent2);font-weight:700} .nolist li::before{content:'\2715';position:absolute;left:0;color:#ff6b6b;font-weight:700} /* code / address block */ .codeblock{font-family:Consolas,monospace;font-size:13px;color:var(--t1);background:var(--bg2); border:1px solid rgba(255,255,255,.09);border-radius:10px;padding:14px 16px;letter-spacing:.02em; line-height:1.9;word-break:break-all} .codeblock .cap{display:block;font-family:var(--f-head);font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--t4);margin-bottom:8px;word-break:normal} /* data table pills (used with .cmp) */ .pill{display:inline-block;font-size:11px;font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap} .pill.yes{color:var(--accent2);background:rgba(39,150,195,.14)} .pill.no{color:#ff8080;background:rgba(255,85,85,.12)} .pill.part{color:#ffbf66;background:rgba(255,170,51,.12)} /* related cards pair */ .related{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px} @media (max-width:760px){.twocol,.related{grid-template-columns:1fr}}