/* PlayArea OS sub-pages in the home page's look (TASK-111). Loaded after home.css,
   which carries the palette, type, header, footer, buttons and FAQ accordion.
   First user: the FAQ page (website/faq/). */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- help hero: title and search, on the footer's deep teal ---- */
.help-hero{background:var(--deep);color:#fff;padding:72px 0 80px;text-align:center}
.help-hero h1{color:#fff;font-size:clamp(2.1rem,4vw,2.9rem);line-height:1.12;letter-spacing:-.03em}
.help-lead{margin:14px auto 0;max-width:560px;color:#cdeeea;font-size:1.04rem;line-height:1.6}
.help-search{position:relative;margin:30px auto 0;max-width:640px}
.help-search-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#5f7275;pointer-events:none}
.help-search-icon svg{display:block;width:100%;height:100%}
.help-search input{width:100%;height:60px;box-sizing:border-box;padding:0 20px 0 54px;border:0;border-radius:16px;background:#fff;color:var(--ink);font:inherit;font-size:1.02rem;box-shadow:0 18px 40px #04292b40}
.help-search input::placeholder{color:#6b7f82}
.help-search input:focus-visible{outline:3px solid #8ff0e8;outline-offset:3px}

/* ---- topic cards ---- */
.help-cards-band{background:#f4f9f9;padding:56px 0 64px}
.help-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.help-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:34px 26px 28px;background:#fff;border:1px solid #e1eeed;border-radius:20px;transition:transform .17s ease,box-shadow .17s ease,border-color .17s ease}
.help-card:hover{transform:translateY(-3px);border-color:#bfe2dc;box-shadow:0 18px 40px #0a5f6314}
.help-icon{width:64px;height:64px;margin-bottom:6px}
.help-icon svg{width:100%;height:100%}
.help-icon .i-line{stroke:var(--deep)}
.help-icon .i-accent{stroke:var(--cta,#08c2bb)}
.help-title{font-family:var(--font-display);font-weight:900;font-size:1.28rem;color:var(--ink);letter-spacing:-.01em}
.help-text{color:var(--body);font-size:.95rem;line-height:1.6;max-width:30ch}
.help-count{margin-top:4px;color:#078f97;font-size:.82rem;font-weight:800;letter-spacing:.04em}

/* ---- every question, by topic ---- */
.faq-all{max-width:860px;padding-block:72px 96px}
.faq-cat{scroll-margin-top:100px}
.faq-cat+.faq-cat{margin-top:72px}
.faq-cat h2{font-size:clamp(1.7rem,3vw,2.1rem);letter-spacing:-.02em}
.faq-group{margin-top:30px}
.faq-group h3{font-family:var(--font-sans);font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.faq-group h3 a{color:#078f97}
.faq-group h3 a:hover{color:var(--deep);text-decoration:underline}
.faq-group .faq-list{margin-top:12px}
.faq-results{color:var(--body);font-size:.95rem;margin-bottom:24px}
.faq-none{text-align:center;padding:40px 0}
.faq-none h2{font-size:1.7rem}
.faq-none p{margin-top:12px;color:var(--body)}
mark.faq-hit{background:#c8f3ef;color:inherit;border-radius:3px;padding:0 2px}

@media(max-width:1000px){.help-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .help-hero{padding:52px 0 60px}
  .help-search input{height:54px}
  .help-cards-band{padding:40px 0 48px}
  .help-cards{grid-template-columns:1fr;gap:14px}
  .help-card{flex-direction:row;align-items:center;text-align:left;padding:18px 18px;gap:14px}
  .help-icon{flex:none;width:44px;height:44px;margin:0}
  .help-card .help-text{display:none}
  .help-count{margin:0 0 0 auto;white-space:nowrap}
  .faq-all{padding-block:52px 72px}
}