/* Content pages: FAQ, Contact, Help Center.
   The hero, brush word, tokens and Satoshi font come from browse-2026.css (these pages
   add `browse-page` to <body>); this file adds what they share: one two-column grid
   (a 240px label column and the content), the accordion, and the contact channel list.
   Scoped under .content-page so it cannot reach other pages.
   Content is visible without JavaScript: nothing waits on a scroll reveal. */

.content-page .c-main{
  max-width:var(--b-wrap);
  margin:0 auto;
  padding:36px var(--b-pad) 96px;
  font-family:var(--b-font);
  color:var(--b-text);
}

/* A labelled group: label on the left, content on the right. */
.content-page .c-group{display:grid;gap:6px 48px;margin:0 0 56px}
.content-page .c-group-title{margin:0;padding-top:16px;font-size:1.25rem;font-weight:600;line-height:1.25;letter-spacing:-.03em;color:var(--b-text)}
@media(min-width:900px){
  .content-page .c-group{grid-template-columns:240px minmax(0,1fr)}
}

/* Accordion (native <details>: works without JavaScript, keyboard and screen-reader friendly) */
.content-page .c-qs{border-bottom:1px solid var(--b-line)}
.content-page .c-q{border-top:1px solid var(--b-line)}
.content-page .c-q summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:56px;padding:16px 0;cursor:pointer;list-style:none;
  color:var(--b-text);font-size:1.0625rem;font-weight:500;line-height:1.4;
}
.content-page .c-q summary::-webkit-details-marker{display:none}
.content-page .c-q summary::after{
  content:"";flex:none;width:9px;height:9px;margin-right:4px;
  border-right:1.5px solid var(--b-text-3);border-bottom:1.5px solid var(--b-text-3);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--b-ease);
}
.content-page .c-q[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.content-page .c-q summary:hover{color:var(--b-sand)}
.content-page .c-q summary:focus-visible{outline:2px solid var(--b-sand);outline-offset:2px;border-radius:4px}
.content-page .c-q-body{max-width:62ch;margin:0;padding:0 0 22px;color:var(--b-text-2);font-size:1rem;line-height:1.7;text-wrap:pretty}
.content-page .c-q-body a{color:var(--b-sand);text-underline-offset:3px}

/* Contact channels: label | what it is for | action */
.content-page .c-channels{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--b-line)}
.content-page .c-channel{display:grid;gap:6px 48px;padding:26px 0;border-top:1px solid var(--b-line);align-items:start}
.content-page .c-channel h2{margin:0;font-size:1.25rem;font-weight:600;line-height:1.25;letter-spacing:-.03em;color:var(--b-text)}
.content-page .c-channel p{margin:0;max-width:52ch;color:var(--b-text-2);font-size:1rem;line-height:1.65;text-wrap:pretty}
.content-page .c-channel a{color:var(--b-sand);font-weight:500;text-underline-offset:4px;overflow-wrap:anywhere}
.content-page .c-channel a:hover{text-decoration:underline}
.content-page .c-channel a:focus-visible{outline:2px solid var(--b-sand);outline-offset:3px;border-radius:2px}
@media(min-width:900px){
  .content-page .c-channel{grid-template-columns:240px minmax(0,1fr) auto;align-items:baseline}
}

/* Closing line under a page */
.content-page .c-more{margin:40px 0 0;font-size:1rem;color:var(--b-text-2)}
.content-page .c-more a{color:var(--b-sand);font-weight:500;text-underline-offset:4px}

/* ── Help Center (/help): same tokens, one column system ── */
.content-page .hc-shell{
  max-width:var(--b-wrap);
  padding:120px var(--b-pad) 96px;
  font-family:var(--b-font);
  --ink:#efe9dc;
  --body:rgba(239,233,220,.78);
  --muted:rgba(239,233,220,.58);
  --line:rgba(232,213,183,.12);
  --line-2:rgba(232,213,183,.28);
  --surface:rgba(232,213,183,.05);
  --accent:#e8d5b7;
}
.content-page .hc-head{max-width:none;margin:0 0 28px}
.content-page .hc-head p{max-width:52ch;font-size:1.0625rem}
.content-page .hc-search input{border-radius:var(--b-r);font-family:var(--b-font)}
.content-page .hc-search input::placeholder{color:var(--b-text-3)}
.content-page .hc-section>h2{font-family:var(--b-font);font-size:1.625rem;font-weight:600;line-height:1.15;letter-spacing:-.035em}
.content-page .hc-visual img{border-radius:var(--b-r)}
.content-page .hc-guide{border-radius:var(--b-r)}
.content-page .hc-topic h3{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}

@media(max-width:700px){
  .content-page .c-main{padding-top:24px;padding-bottom:72px}
  .content-page .c-group{margin-bottom:40px}
  .content-page .hc-shell{padding-top:88px}
}

@media(prefers-reduced-motion:reduce){
  .content-page .c-q summary::after{transition:none}
}