/* Training Software (LunchAssist PRO) page: real product screenshots and a tabbed tour. */

/* Screenshot frame: soft border and shadow so app screens read as "a window into PRO". */
.pro-shot {
  margin: 0;
}

.pro-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #e3e5e4;
  border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(31, 60, 63, .35), 0 2px 6px rgba(31, 60, 63, .08);
  background: #fff;
}

.pro-shot figcaption {
  margin-top: .85rem;
  color: #6b6560;
  font-size: .9375rem;
  text-align: center;
}

/* Checklist: the screenshot sits between the intro and the feature cards. */
.pro-shot-feature {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 1rem;
}

/* Tour */
.pro-tour .section-head-v {
  margin-bottom: 0;
}

.pro-tour-box {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.pro-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1.75rem;
}

.pro-tab {
  padding: .55rem 1rem;
  border: 1px solid #dcdfdd;
  border-radius: 999px;
  background: #fff;
  color: var(--colours--dark-teal);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}

.pro-tab:hover {
  border-color: var(--colours--main-green);
}

.pro-tab.is-active {
  border-color: var(--colours--main-green);
  background: var(--colours--main-green);
  color: #fff;
}

.pro-tab:focus-visible {
  outline: 2px solid var(--colours--main-orange);
  outline-offset: 2px;
}

.pro-panel-copy {
  max-width: 680px;
  margin: 0 auto 1.25rem;
  text-align: center;
}

.pro-panel-copy h3 {
  margin: 0 0 .35rem;
  color: var(--colours--dark-teal);
  font-size: 1.375rem;
  line-height: 1.3;
}

.pro-panel-copy p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.55;
}

.pro-tour-cta {
  margin: 2rem auto 0;
}

@media screen and (max-width: 767px) {
  .pro-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 0 1rem .25rem;
    scrollbar-width: none;
  }

  .pro-tabs::-webkit-scrollbar {
    display: none;
  }

  .pro-tab {
    flex: none;
  }

  .pro-shot img {
    border-radius: 10px;
  }
}

/* ---------- Scale the whole page down to match the home and About pages ---------- */

/* Section spacing: 112px -> 64px top and bottom. */
.section-content,
.section-beigecontent,
.section-kit {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.section-head-v {
  grid-row-gap: 1rem;
  row-gap: 1rem;
  margin-bottom: 2rem;
}

/* Hero */
.header-pro {
  padding-top: 8.5rem;
}

.header-pro .internal-page-header {
  grid-row-gap: 1.25rem;
  row-gap: 1.25rem;
}

.header-pro .hea {
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  line-height: 1.12;
  text-wrap: balance;
}

.header-pro .internal-header-p {
  max-width: 760px;
  font-size: 1.125rem;
  line-height: 1.6;
}

.pro-hero-image {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* Section headings and their intro lines */
.section-content .heading-4,
.section-beigecontent .gradient-heading,
.kit-header {
  font-size: clamp(2rem, 2.8vw, 2.5rem);
  line-height: 1.15;
  text-wrap: balance;
}

.header-p,
.header-pro + .section-content p {
  max-width: 760px;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Screenshots a little narrower */
.pro-tour-box,
.pro-shot-feature {
  max-width: 980px;
}

.pro-tab {
  padding: .45rem .9rem;
  font-size: .875rem;
}

.pro-panel-copy h3 {
  font-size: 1.25rem;
}

.pro-panel-copy p {
  font-size: 1rem;
}

/* "Getting started is easy" rows */
.section-beigecontent .heading-6 {
  font-size: clamp(1.625rem, 2.2vw, 2rem);
  line-height: 1.15;
}

.section-beigecontent p,
.section-beigecontent .col-20-left div {
  font-size: 1rem;
  line-height: 1.6;
}

.section-beigecontent .block-image-holder {
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

.section-beigecontent .row {
  grid-column-gap: 3rem;
  column-gap: 3rem;
}

.section-beigecontent .leftright-wrapper {
  grid-row-gap: 2.5rem;
  row-gap: 2.5rem;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* KIT funds band and the closing "Imagine" block */
.paragraph-3 {
  font-size: 1rem;
  line-height: 1.6;
}

.text-41 {
  font-size: clamp(2rem, 2.8vw, 2.5rem);
  line-height: 1.15;
}

.text-42 {
  font-size: 1.0625rem;
}

@media screen and (max-width: 767px) {
  .section-content,
  .section-beigecontent,
  .section-kit {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .header-pro {
    padding-top: 7rem;
  }

  .header-pro .hea {
    font-size: 1.875rem;
  }

  .section-content .heading-4,
  .section-beigecontent .gradient-heading,
  .kit-header,
  .text-41 {
    font-size: 1.75rem;
  }

  .section-beigecontent .heading-6 {
    font-size: 1.5rem;
  }
}

/* The little floating decoration cards were sized for the big images; with smaller images they overlap the next row. */
.section-beigecontent .d-element-1 {
  display: none;
}

/* ---------- Hero: About-page layout (text left, check-mark feature cards right) ---------- */
.header-pro.pro-intro {
  display: block;
  padding-top: 9rem;
  padding-bottom: 4rem;
  line-height: normal;
}

.pro-intro .centered-content {
  width: 100%;
}

.pro-intro-grid {
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
  text-align: left;
}

.pro-intro h1.home-eyebrow {
  margin-top: 0;
  line-height: 1.3;
}

.pro-intro .home-team-title {
  margin: 0 0 .5rem;
  text-wrap: balance;
}

.pro-intro-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.pro-intro-ctas .home-card-link {
  margin-top: 0;
}

.pro-features {
  gap: .6rem;
}

.pro-feature {
  align-items: center;
  padding: .85rem 1.1rem;
}

.pro-feature p {
  font-size: .9375rem;
}

.pro-check {
  display: flex;
  flex: 0 0 2.25rem;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--colours--main-green);
  color: #fff;
}

@media screen and (max-width: 767px) {
  .header-pro.pro-intro {
    padding-top: 7rem;
    padding-bottom: 3rem;
  }
}

.pro-intro-ctas .home-card-link {
  color: var(--colours--main-green);
  font-weight: 700;
  text-decoration: none;
}

.pro-intro-ctas .home-card-link:hover {
  text-decoration: underline;
}

@media screen and (min-width: 992px) {
  .header-pro.pro-intro {
    padding-top: 10rem;
  }

  .pro-feature {
    padding-top: .7rem;
    padding-bottom: .7rem;
  }
}

/* Hero heading one size down (48px -> 40px on laptops). */
.pro-intro .home-team-title {
  font-size: clamp(1.875rem, 2.8vw, 2.5rem);
  line-height: 1.15;
}

/* Feature check list: visible white cards, all the same height, so the rhythm is even. */
.pro-features {
  display: grid;
  grid-auto-rows: 1fr;
  gap: .625rem;
}

.pro-feature {
  align-items: center;
  background-color: #fff;
  border: 1px solid #ebe9e6;
  box-shadow: 0 1px 2px rgba(31, 60, 63, .04);
}

.pro-feature p {
  margin-top: .15rem;
  line-height: 1.45;
}

/* Feature checklist, compact: two columns of short tiles (names only; the tour below has the details). */
.pro-features {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.pro-feature {
  gap: .75rem;
  padding: .9rem 1rem;
}

.pro-feature strong {
  font-size: 1rem;
  line-height: 1.3;
}

.pro-check {
  flex-basis: 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
}

.pro-check svg {
  width: 14px;
  height: 14px;
}

@media screen and (min-width: 992px) {
  .pro-feature {
    padding-top: .9rem;
    padding-bottom: .9rem;
  }
}

@media screen and (max-width: 479px) {
  .pro-features {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .pro-feature {
    padding: .75rem 1rem;
  }
}

/* Webflow gives .header-p a fixed 800svh width; let it fit its column instead. */
.header-p {
  width: auto;
}

/* Little outlined note above each feature name ("English & Spanish", "New!"...). */
.pro-feature-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  min-width: 0;
}

.pro-tag {
  display: inline-block;
  padding: .1rem .5rem;
  border: 1px solid #f3b77a;
  border-radius: 999px;
  background: #fff7ef;
  color: var(--la-orange-text);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
  white-space: nowrap;
}

/* Note sits at the top of the tile; the check lines up with the feature name below it. */
.pro-feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "tag tag" "check name";
  align-items: center;
  align-content: start;
  row-gap: .55rem;
  column-gap: .75rem;
}

.pro-feature-text {
  display: contents;
}

.pro-feature .pro-tag {
  grid-area: tag;
  justify-self: start;
}

.pro-feature .pro-check {
  grid-area: check;
}

.pro-feature strong {
  grid-area: name;
}

/* Closing nudge toward consulting: PRO is the tech sidekick, consultants are the human ones. */
.pro-cta-human {
  margin: .25rem 0 0;
  color: #6b6560;
  font-size: 1rem;
}

.pro-cta-human a {
  color: var(--colours--main-green);
  font-weight: 700;
  text-decoration: none;
}

.pro-cta-human a:hover {
  text-decoration: underline;
}

/* Links to the tour land with the heading clear of the fixed nav bar. */
#inside-pro {
  scroll-margin-top: 3rem;
}

/* Tour tabs: second row starts at "Compliance checklist" on laptops. */
.pro-tabs-break {
  flex-basis: 100%;
  height: 0;
}

@media screen and (max-width: 767px) {
  .pro-tabs-break {
    display: none;
  }
}