/* Start custom CSS *//* ============================================================
   GET STARTED PAGE — master.css
   Own scoped file, own prefix (gs-) to avoid collision with
   every other page.
   ============================================================ */


/* ============================================================
   SECTION: Hero (asymmetric two-column -- text left, real
   product visual right. Reframed around signup as the one real
   action, since there's no bookable demo. Body copy adjusted
   from the original draft, which assumed a live call ("pick a
   time") that doesn't exist -- flagged explicitly since this is
   a substantive copy change, not just a layout decision.)
   ============================================================ */

.gs-hero{
  background:#FFFFFF;
  box-sizing:border-box;
}

.gs-hero__wrap{
  max-width:1180px;
  margin:0 auto;
  padding:88px 32px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.gs-hero__text{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.gs-hero.gs-in-view .gs-hero__text{ opacity:1; transform:translateY(0); }

#gsHero .gs-hero__eyebrow{
  display:block !important;
  font-family:var(--e-global-typography-secondary-font-family, 'Manrope'), Arial, sans-serif !important;
  font-weight:800 !important;
  font-size:13px !important;
  letter-spacing:0.08em !important;
  text-transform:uppercase !important;
  text-align:left !important;
  color:var(--e-global-color-accent, #0E7C86) !important;
  margin:0 0 20px !important;
}

#gsHero .gs-hero__h1{
  font-family:var(--e-global-typography-primary-font-family, 'Manrope'), Arial, sans-serif !important;
  font-weight:800 !important;
  font-size:42px !important;
  line-height:1.15 !important;
  text-align:left !important;
  color:var(--e-global-color-9524497, #2D3042) !important;
  margin:0 0 20px !important;
}

#gsHero .gs-hero__sub{
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif !important;
  font-weight:400 !important;
  font-size:16px !important;
  line-height:1.6 !important;
  text-align:left !important;
  color:var(--e-global-color-text, #383B4C) !important;
  margin:0 0 32px !important;
}

.gs-hero__cta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}

.hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  padding:15px 28px !important;
  border-radius:8px;
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-weight:700 !important;
  font-size:15px;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .15s ease, background-color .15s ease;
}
.hero-btn:hover{ transform:translateY(-1px); }
.hero-btn-solid{
  background:var(--e-global-color-accent, #0E7C86);
  color:#FFFFFF !important;
}
.hero-btn-solid:hover{
  background:var(--e-global-color-pl_tealhover, #0B6A72);
}

.gs-hero__microcopy{
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-size:13px;
  color:var(--e-global-color-pl_muted, #8A8D9B);
  margin:0;
}

/* ---- Real product visual: base image + floating chip ---- */
.gs-hero__stage{
  position:relative;
  opacity:0;
  transform:translateY(24px) scale(0.98);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1) .1s, transform .8s cubic-bezier(.22,.61,.36,1) .1s;
}
.gs-hero.gs-in-view .gs-hero__stage{ opacity:1; transform:translateY(0) scale(1); }

.gs-hero__stage img.gs-hero__base{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
  box-shadow:0 30px 60px -20px rgba(45,48,66,.3);
}

.gs-hero__chip{
  position:absolute;
  bottom:-20px;
  left:-20px;
  width:38%;
}
.gs-hero__chip img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 12px 20px rgba(45,48,66,.22));
}

@media(max-width:900px){
  .gs-hero__wrap{ grid-template-columns:1fr; gap:36px; text-align:center; }
  #gsHero .gs-hero__eyebrow{ text-align:center !important; }
  #gsHero .gs-hero__h1{ text-align:center !important; }
  #gsHero .gs-hero__sub{ text-align:center !important; }
  .gs-hero__cta{ align-items:center; }
  .gs-hero__stage{ max-width:480px; margin:0 auto; }
}

@media(max-width:640px){
  .gs-hero__wrap{ padding:48px 20px; }
  #gsHero .gs-hero__h1{ font-size:28px !important; }
  .hero-btn{ width:100%; }
}


/* Shared eyebrow, reused above section H2s on this page */
.gs-eyebrow{
  display:block;
  font-family:var(--e-global-typography-secondary-font-family, 'Manrope'), Arial, sans-serif;
  font-weight:800;
  font-size:13px !important;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--e-global-color-accent, #0E7C86) !important;
  margin:0 0 12px;
}


/* ============================================================
   SECTION: Stats Band (animated count-up, same exact sizing as
   every other page's stats -- 36px numbers, 13px labels)
   ============================================================ */

#gsStats{
  max-width:1180px;
  margin:0 auto;
  padding:88px 32px;
  box-sizing:border-box;
}

.gs-stat-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:60px;
  flex-wrap:wrap;
}

.gs-stat{
  text-align:center;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
#gsStats.gs-in-view .gs-stat{ opacity:1; transform:translateY(0); }
#gsStats.gs-in-view .gs-stat:nth-child(1){ transition-delay:0ms; }
#gsStats.gs-in-view .gs-stat:nth-child(3){ transition-delay:100ms; }
#gsStats.gs-in-view .gs-stat:nth-child(5){ transition-delay:200ms; }

.gs-stat-num{
  font-family:var(--e-global-typography-accent-font-family, 'Inter'), Arial, sans-serif;
  font-weight:800;
  font-size:44px;
  line-height:1.1;
  background:linear-gradient(90deg, var(--e-global-color-accent, #0E7C86) 0%, var(--e-global-color-9524497, #2D3042) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:10px;
}

.gs-stat-label{
  display:block;
  font-family:var(--e-global-typography-secondary-font-family, 'Manrope'), Arial, sans-serif;
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--e-global-color-text, #383B4C);
  line-height:1.5;
}

.gs-stat-divider{
  width:1px;
  height:56px;
  background:var(--e-global-color-pl_border, #E2E4E9);
  flex-shrink:0;
}

@media(max-width:640px){
  #gsStats{ padding:48px 20px; }
  .gs-stat-row{ gap:32px; }
  .gs-stat-divider{ display:none; }
  .gs-stat-num{ font-size:36px; }
}


/* ============================================================
   SECTION: Demo Embed (reused from the homepage's real
   interactive Reimbursement Benchmarks demo -- .bd-wrap pattern,
   adapted to this page's gs- prefix. Click-to-load facade: the
   SupaDemo iframe is ~1.4MB of JS, so a poster image + play
   button loads first, and the real iframe (and its JS payload)
   is only injected once someone clicks it. This is the exact
   fix that solved a 27s LCP on the homepage -- keeping it here
   rather than eager-loading the iframe by default.)
   ============================================================ */

#gsDemo{
  max-width:1180px;
  margin:0 auto;
  padding:88px 32px;
  box-sizing:border-box;
}

#gsDemo .gs-demo-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 32px;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
#gsDemo.gs-in-view .gs-demo-head{ opacity:1; transform:translateY(0); }

#gsDemo .gs-demo-head h2{
  font-family:var(--e-global-typography-primary-font-family, 'Manrope'), Arial, sans-serif !important;
  font-weight:800 !important;
  font-size:26px !important;
  line-height:1.3 !important;
  text-align:center !important;
  color:var(--e-global-color-9524497, #2D3042) !important;
  margin:0 0 12px;
}

.gs-demo-head p{
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-size:14.5px;
  color:var(--e-global-color-text, #383B4C);
  line-height:1.6;
  margin:0;
}

/* ---- Real demo frame: poster image + play facade -> real iframe on click ---- */
.gs-demo-frame{
  position:relative;
  width:100%;
  max-width:820px;
  margin:0 auto;
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--e-global-color-pl_border, #E2E4E9);
  box-shadow:0 30px 60px -20px rgba(45,48,66,.25);
  background:#EEF1F4;
  opacity:0;
  transform:translateY(18px) scale(0.98);
  transition:opacity .7s ease .1s, transform .7s ease .1s;
}
#gsDemo.gs-in-view .gs-demo-frame{ opacity:1; transform:translateY(0) scale(1); }

.gs-demo-frame iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:none;
  display:block;
}

.gs-demo-play-facade{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  border:none;
  background:none;
  cursor:pointer;
  display:block;
}

.gs-demo-play-facade img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.gs-demo-play-facade::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(27,37,48,.28);
  transition:background .2s ease;
}
.gs-demo-play-facade:hover::after{ background:rgba(27,37,48,.4); }

.gs-demo-play-btn{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:76px;
  height:76px;
  border-radius:50%;
  background:var(--e-global-color-accent, #0E7C86);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
  box-shadow:0 12px 30px rgba(14,124,134,.4);
  transition:transform .2s ease;
}
.gs-demo-play-facade:hover .gs-demo-play-btn{ transform:translate(-50%,-50%) scale(1.06); }

.gs-demo-play-btn svg{
  width:26px;
  height:26px;
  margin-left:4px;
}

@media(max-width:640px){
  #gsDemo{ padding:48px 20px; }
  #gsDemo .gs-demo-head h2{ font-size:21px !important; }
  .gs-demo-play-btn{ width:60px; height:60px; }
  .gs-demo-play-btn svg{ width:20px; height:20px; }
}


/* ============================================================
   SECTION: Sample Export (single real artifact -- Reimbursement
   Benchmark export. VOB Worksheet and Eligibility Check were
   dropped: both were real staff-demo records redacted via a
   Figma overlay, which only hid the data visually -- the
   original screenshot underneath was still fully intact and
   extractable. Not worth the risk for two cards when this one
   card is genuinely safe: aggregate claims data, never tied to
   an individual to begin with. Structured as a single media+text
   feature row, matching the real pf-wrap pattern used for the
   homepage's Platform Rows, rather than a 3-card grid with two
   empty slots.)
   ============================================================ */

#gsExports{
  max-width:1180px;
  margin:0 auto;
  padding:88px 32px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}

.gs-exports-media{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
#gsExports.gs-in-view .gs-exports-media{ opacity:1; transform:translateY(0); }

.gs-exports-media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
  border:1px solid var(--e-global-color-pl_border, #E2E4E9);
  box-shadow:0 25px 50px -18px rgba(45,48,66,.25);
}

.gs-exports-caption{
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-style:italic;
  font-size:12.5px;
  color:var(--e-global-color-pl_muted, #8A8D9B);
  text-align:center;
  margin:14px 0 0;
}

.gs-exports-text{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease .1s, transform .6s ease .1s;
}
#gsExports.gs-in-view .gs-exports-text{ opacity:1; transform:translateY(0); }

#gsExports .gs-exports-text h2{
  font-family:var(--e-global-typography-primary-font-family, 'Manrope'), Arial, sans-serif !important;
  font-weight:800 !important;
  font-size:26px !important;
  line-height:1.3 !important;
  color:var(--e-global-color-9524497, #2D3042) !important;
  margin:0 0 12px;
}

.gs-exports-body{
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-size:14.5px;
  color:var(--e-global-color-text, #383B4C);
  line-height:1.6;
  margin:0 0 20px;
}

.gs-exports-list{
  list-style:none;
  margin:0 0 24px;
  padding:0;
}
.gs-exports-list li{
  position:relative;
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-size:13.5px;
  font-weight:600;
  color:var(--e-global-color-9524497, #2D3042);
  padding:11px 0 11px 24px;
  border-bottom:1px solid var(--e-global-color-pl_border, #E2E4E9);
}
.gs-exports-list li:first-child{ border-top:1px solid var(--e-global-color-pl_border, #E2E4E9); }
.gs-exports-list li::before{
  content:"\2713";
  position:absolute;
  left:0;
  top:11px;
  color:var(--e-global-color-accent, #0E7C86);
  font-weight:700;
}

.gs-exports-download{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 22px !important;
  border-radius:8px;
  background:var(--e-global-color-accent, #0E7C86);
  color:#FFFFFF !important;
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-weight:700 !important;
  font-size:14px;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .15s ease, background-color .15s ease;
}
.gs-exports-download:hover{
  transform:translateY(-1px);
  background:var(--e-global-color-pl_tealhover, #0B6A72);
}
.gs-exports-download svg{ width:16px; height:16px; flex-shrink:0; }

@media(max-width:860px){
  #gsExports{ grid-template-columns:1fr; gap:32px; padding:48px 20px; }
  .gs-exports-media{ order:2; }
  .gs-exports-text{ order:1; }
  #gsExports .gs-exports-text h2{ font-size:21px !important; }
}


/* ============================================================
   SECTION: Why PayerLenz (text left, credibility badge right --
   reused verbatim from the RCM Directors page's "Built by an
   RCM firm" section. No product screenshot on purpose: this is
   the "you're convinced, now commit" moment, not a "try it"
   moment. Sign Up + View Pricing as real buttons.)
   ============================================================ */

#gsWhy{
  max-width:1180px;
  margin:0 auto;
  padding:88px 32px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:60px;
  align-items:center;
}

.gs-why-text{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
#gsWhy.gs-in-view .gs-why-text{ opacity:1; transform:translateY(0); }

#gsWhy .gs-why-text h2{
  font-family:var(--e-global-typography-primary-font-family, 'Manrope'), Arial, sans-serif !important;
  font-weight:800 !important;
  font-size:28px !important;
  line-height:1.3 !important;
  color:var(--e-global-color-9524497, #2D3042) !important;
  margin:0 0 16px !important;
}

.gs-why-text p{
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-size:15px;
  line-height:1.65;
  color:var(--e-global-color-text, #383B4C);
  margin:0 0 28px;
}

.gs-why-text p a{
  color:var(--e-global-color-accent, #0E7C86) !important;
  font-weight:700 !important;
  text-decoration:none;
}
.gs-why-text p a:hover{ text-decoration:underline; }

.gs-why-ctas{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.hero-btn-ghost{
  background:transparent;
  color:var(--e-global-color-accent, #0E7C86) !important;
  border:1.5px solid var(--e-global-color-accent, #0E7C86);
}
.hero-btn-ghost:hover{
  background:rgba(14,124,134,.06);
}

.gs-why-badge{
  background:linear-gradient(160deg, #1B2530, #2D3042);
  border-radius:16px;
  padding:36px 28px;
  text-align:center;
  opacity:0;
  transform:translateY(18px) scale(0.98);
  transition:opacity .7s ease .1s, transform .7s ease .1s;
}
#gsWhy.gs-in-view .gs-why-badge{ opacity:1; transform:translateY(0) scale(1); }

.gs-why-badge-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(94,196,204,.15);
  margin-bottom:18px;
}
.gs-why-badge-icon svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:#5EC4CC;
  stroke-width:1.6;
}

.gs-why-badge-name{
  font-family:var(--e-global-typography-primary-font-family, 'Manrope'), Arial, sans-serif;
  font-weight:800;
  font-size:18px;
  color:#FFFFFF;
  margin:0 0 6px;
}

.gs-why-badge-tag{
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-size:13.5px;
  color:#C7CAD3;
  line-height:1.5;
  margin:0 0 20px;
}

.gs-why-badge-divider{
  width:36px;
  height:1px;
  background:rgba(255,255,255,.2);
  margin:0 auto 20px;
}

.gs-why-badge-stat{
  font-family:var(--e-global-typography-primary-font-family, 'Manrope'), Arial, sans-serif;
  font-weight:800;
  font-size:13px;
  color:#5EC4CC;
  letter-spacing:0.02em;
  margin:0;
}

@media(max-width:900px){
  #gsWhy{ grid-template-columns:1fr; gap:32px; text-align:center; }
  .gs-why-ctas{ justify-content:center; }
}

@media(max-width:640px){
  #gsWhy{ padding:48px 20px; }
  #gsWhy .gs-why-text h2{ font-size:23px !important; }
  .gs-why-ctas{ flex-direction:column; align-items:stretch; }
}


/* ============================================================
   SECTION: FAQ (native details/summary, exclusive group via
   shared "name" attribute -- no JS needed. Structure and sizing
   reused verbatim from the real homepage faq-wrap pattern.)
   ============================================================ */

#gsFaq{
  max-width:1180px;
  margin:0 auto;
  padding:88px 32px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:60px;
  align-items:start;
}

#gsFaq .faq-left h2{
  font-family:var(--e-global-typography-primary-font-family, 'Manrope'), Arial, sans-serif;
  font-weight:800;
  font-size:28px;
  line-height:1.3;
  color:var(--e-global-color-9524497, #2D3042);
  margin:0 0 16px;
}

.faq-sub{
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-size:14px;
  color:var(--e-global-color-text, #383B4C);
  line-height:1.6;
  margin:0 0 16px;
}

.faq-right{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}

.faq-item{
  background:#FFFFFF;
  border:1px solid var(--e-global-color-pl_border, #E2E4E9);
  border-radius:12px;
  box-sizing:border-box;
  overflow:hidden;
  transition:border-color .2s ease;
}
.faq-item[open]{
  border-color:var(--e-global-color-accent, #0E7C86);
}

.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  list-style:none;
  padding:18px 20px;
  box-sizing:border-box;
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-weight:700;
  font-size:14.5px;
  color:var(--e-global-color-9524497, #2D3042);
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q::marker{ content:""; }

.faq-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--e-global-color-pl_mist, #EEF1F4);
  color:var(--e-global-color-pl_muted, #8A8D9B);
  font-size:14px;
  font-weight:700;
  flex-shrink:0;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.faq-item[open] .faq-icon{
  background:var(--e-global-color-accent, #0E7C86);
  color:#FFFFFF;
  transform:rotate(45deg);
}

.faq-a p{
  margin:0;
  padding:0 20px 18px;
  box-sizing:border-box;
  font-family:var(--e-global-typography-text-font-family, 'Inter'), Arial, sans-serif;
  font-size:13.5px;
  color:var(--e-global-color-text, #383B4C);
  line-height:1.6;
}

@media(max-width:800px){
  #gsFaq{ grid-template-columns:1fr; gap:32px; }
  #gsFaq .faq-left h2{ font-size:23px; }
}
@media(max-width:640px){
  #gsFaq{ padding:48px 20px; }
}


/* ============================================================
   NEXT SECTION GOES HERE — this file grows top-to-bottom
   in the same order the sections appear on the page.
   ============================================================ *//* End custom CSS */