/* =====================================================
   R1 ReadyFirst – Support (Help) Page Layout
   Requires: shared.css
   Customer support page for app users. Plain Chat widget
   provides the conversation; static content carries the page.
   ===================================================== */

/* HERO */
.help-hero{background:var(--g-deep);color:var(--white);padding:var(--xl) var(--md);text-align:center}
.help-hero__inner{max-width:640px;margin:0 auto}
.help-hero .section-eyebrow{color:var(--eyebrow-dark);margin-bottom:var(--sm)}
.help-hero h1{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,2.75rem);font-weight:800;line-height:1.15;margin-bottom:var(--md);color:var(--white)}
.help-hero__sub{font-family:var(--font-prose);font-size:clamp(1.0625rem,2vw,1.1875rem);line-height:1.7;color:rgba(var(--sand-rgb),.92);max-width:540px;margin:0 auto var(--lg)}
.help-hero__actions{display:flex;gap:var(--sm);justify-content:center;flex-wrap:wrap}

/* HOW SUPPORT WORKS */
.help-channels{background:var(--sand);padding:var(--xl) var(--md)}
.help-channels__inner{max-width:var(--max);margin:0 auto;text-align:center}
.help-channels .section-eyebrow{color:var(--eyebrow-light);margin-bottom:var(--sm)}
.help-channels h2{margin-bottom:var(--sm)}
.help-channels__lead{font-family:var(--font-prose);font-size:clamp(1.0625rem,2vw,1.1875rem);color:var(--char);line-height:1.7;max-width:620px;margin:0 auto var(--lg)}
.help-channels__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--md);max-width:960px;margin:0 auto}
.help-channels__card{background:var(--white);border-radius:12px;padding:var(--md);box-shadow:var(--sh);text-align:left}
.help-channels__card-icon{width:56px;height:56px;border-radius:50%;background:rgba(var(--jade-rgb),.1);display:flex;align-items:center;justify-content:center;margin-bottom:var(--sm)}
.help-channels__card-icon svg{width:24px;height:24px;fill:none;stroke:var(--jade);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.help-channels__card h3{font-family:var(--font-ui);font-size:1.0625rem;font-weight:600;color:var(--char);margin-bottom:.5rem}
.help-channels__card p{font-family:var(--font-ui);font-size:.9375rem;color:var(--wgray);line-height:1.6}
.help-channels__card a{color:var(--jade);font-weight:600}
.help-channels__card a:hover{color:var(--jade-dk)}
.help-channels__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--sm);margin-top:var(--lg)}

/* QUICK LINKS */
.help-links{background:var(--g-forest);color:var(--white);padding:var(--xl) var(--md)}
.help-links__inner{max-width:var(--read);margin:0 auto;text-align:center}
.help-links__title{color:var(--white);margin-bottom:var(--md)}
.help-links__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.help-links__list a{font-family:var(--font-ui);font-size:1.0625rem;font-weight:600;color:var(--jade-lt);text-decoration:none;transition:color .3s}
.help-links__list a:hover{color:var(--white)}

/* TABLET */
@media(max-width:1024px){
  .help-channels__grid{grid-template-columns:1fr;max-width:520px}
}

/* MOBILE */
@media(max-width:767px){
  .help-hero{padding:var(--lg) var(--md)}
  .help-channels,.help-links{padding:var(--lg) var(--md)}
}

/* =====================================================
   R1 APP EMBED
   When /help is opened from inside the mobile app with an identity fragment
   (#r1=...), an inline <head> script adds .r1-embed to <html> before first
   paint. Strip the marketing chrome so only the hero and the support/FAQ
   content frame the Plain chat; the footer's marketing/donation links are an
   escape hatch out of the app. Hiding only – no layout change, so no responsive
   breakpoint is affected. Descendant selectors (0,2,0) outrank the base
   element-class rules, so no !important is needed.
   ===================================================== */
.r1-embed .launch-banner,
.r1-embed .site-nav,
.r1-embed .help-links,
.r1-embed .site-footer{display:none}