/* ══════════════════════════════════════════════════════════════════════
   tsgotouch.com — interior pages
   Prose layout for activate / faq / support / terms / privacy / refunds / 404.
   Loaded after site.css. The landing page does NOT use this file.
   ══════════════════════════════════════════════════════════════════════ */

.page{padding:126px 0 20px}
.doc{max-width:760px}
.doc.wide{max-width:920px}

/* ── PAGE HEAD ── */
.phead{margin-bottom:44px}
.phead h1{font-family:var(--display);font-weight:800;font-size:clamp(32px,5.2vw,50px);
  line-height:1.02;letter-spacing:-.03em;margin-top:14px}
.phead .lede{color:var(--mut);font-size:18px;line-height:1.6;margin-top:18px;max-width:660px}
.phead .lede b{color:var(--ink);font-weight:600}
.updated{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:20px;
  letter-spacing:.04em;padding-top:16px;border-top:1px solid var(--line)}

/* ── PROSE ── */
.doc h2{font-family:var(--display);font-weight:700;font-size:25px;letter-spacing:-.02em;
  margin:52px 0 16px;scroll-margin-top:88px}
.doc h2:first-child{margin-top:0}
.doc h3{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em;margin:32px 0 10px}
.doc p{color:var(--mut);font-size:15.5px;line-height:1.72;margin-bottom:15px}
.doc p b,.doc li b{color:var(--ink);font-weight:600}
.doc a:not(.btn):not(.nav-cta):not(.nav-login){color:var(--amber);border-bottom:1px solid rgba(255,178,62,.28);transition:border-color .2s}
.doc a:not(.btn):not(.nav-cta):not(.nav-login):hover{border-bottom-color:var(--amber)}
.doc ul,.doc ol{margin:0 0 18px 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.doc li{color:var(--mut);font-size:15.5px;line-height:1.65;padding-left:22px;position:relative}
.doc ul>li::before{content:"›";position:absolute;left:0;top:-1px;color:var(--amber);font-family:var(--mono)}
.doc ol{counter-reset:n}
.doc ol>li{counter-increment:n}
.doc ol>li::before{content:counter(n);position:absolute;left:0;top:1px;color:var(--amber);
  font-family:var(--mono);font-size:12px;font-weight:700}
.doc code{font-family:var(--mono);font-size:.9em;color:var(--amber);
  background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:2px 6px;
  overflow-wrap:break-word}
.doc hr{border:none;height:1px;background:var(--line);margin:44px 0}

/* ── STEP LIST (activate) ── */
.steps{counter-reset:s;display:flex;flex-direction:column;gap:2px;margin:26px 0 8px}
.step{display:grid;grid-template-columns:38px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .num{counter-increment:s;font-family:var(--mono);font-weight:700;font-size:13px;color:var(--amber);
  padding-top:2px}
.step .num::before{content:counter(s,decimal-leading-zero)}
.step h3{margin:0 0 7px;font-family:var(--display);font-weight:600;font-size:18px}
.step p{margin-bottom:0}
.step p+p{margin-top:10px}
@media(max-width:520px){.step{grid-template-columns:1fr;gap:6px}}

/* ── FAQ ── */
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;
  transition:color .2s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--amber)}
.qa summary::after{content:"+";position:absolute;right:6px;top:19px;color:var(--amber);
  font-family:var(--mono);font-size:19px;font-weight:400;transition:transform .25s}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa .a{padding:0 0 22px;max-width:660px}
.qa .a p:last-child{margin-bottom:0}

/* ── CALLOUT ── */
.note{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--amber);
  border-radius:0 12px 12px 0;padding:20px 24px;margin:26px 0}
.note.warn{border-left-color:var(--red)}
.note.good{border-left-color:var(--green)}
.note h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);margin-bottom:9px;font-weight:500}
.note.warn h4{color:var(--red)} .note.good h4{color:var(--green)}
.note p:last-child{margin-bottom:0}

/* ── DATA TABLE (privacy) ── */
.tbl-wrap{overflow-x:auto;margin:24px 0;border:1px solid var(--line);border-radius:12px}
.doc table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
.doc th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut);font-weight:500;text-align:left;padding:14px 18px;
  background:var(--bg2);border-bottom:1px solid var(--line);white-space:nowrap}
.doc td{padding:15px 18px;color:var(--mut);line-height:1.6;border-bottom:1px solid var(--line);
  vertical-align:top}
.doc tr:last-child td{border-bottom:none}
.doc td b{color:var(--ink);font-weight:600}

/* ── CONTACT CARD (support) ── */
.contact{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:30px 30px 32px;margin:8px 0 34px}
.contact .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);margin-bottom:12px}
.contact .addr{font-family:var(--mono);font-weight:700;font-size:clamp(18px,3.4vw,25px);
  color:var(--amber);letter-spacing:-.01em;word-break:break-all;display:inline-block}
.contact .addr:hover{text-decoration:underline;text-underline-offset:5px}
.contact p{margin:16px 0 0;font-size:14.5px}

/* ── 404 ── */
.nf{min-height:72vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:126px 0 60px}
.nf .code{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--amber);letter-spacing:.2em}
.nf h1{font-family:var(--display);font-weight:800;font-size:clamp(38px,7vw,68px);
  line-height:1;letter-spacing:-.035em;margin:18px 0 0}
.nf p{color:var(--mut);font-size:17px;margin:20px 0 32px;max-width:440px}