:root {
  color-scheme: light;
  --bg: #f4faf1;
  --surface: #eef5e9;
  --border: #dce9d4;
  --text: #1a201c;
  --text-muted: #55605a;
  --accent: #3b5bdb;
  --maxw: 1440px;

  /* Type scale — perfect fourth (1.333) off a 1rem / 19px base */
  --text-xs: 0.5625rem;  /* 1rem / 1.333 / 1.333  ~11px */
  --text-sm: 0.75rem;    /* 1rem / 1.333          ~14px */
  --text-base: 1rem;     /*                        19px */
  --text-md: 1.333rem;   /* 1rem * 1.333          ~25px */
  --text-lg: 1.7769rem;  /* * 1.333^2             ~34px */
  --text-xl: 2.3686rem;  /* * 1.333^3             ~45px */
  --text-2xl: 3.1573rem; /* * 1.333^4             ~60px */
  --text-3xl: 4.2087rem; /* * 1.333^5             ~80px */
}

html {
  font-size: 16px;
}

/* Below 720px the perfect-fourth scale makes headings balloon relative to
   the viewport — switch to a tighter minor-third ratio (1.2) off the
   same 1rem base so the steps compress without shrinking body text. */
@media (max-width: 720px) {
  :root {
    --text-xs: 0.6944rem;  /* 1rem / 1.2 / 1.2 */
    --text-sm: 0.8333rem;  /* 1rem / 1.2 */
    --text-base: 1rem;
    --text-md: 1.2rem;     /* 1rem * 1.2 */
    --text-lg: 1.44rem;    /* * 1.2^2 */
    --text-xl: 1.728rem;   /* * 1.2^3 */
    --text-2xl: 2.0736rem; /* * 1.2^4 */
    --text-3xl: 2.4883rem; /* * 1.2^5 */
  }
}

/* Light green scheme applies in both light and dark system settings. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #f4faf1;
    --surface: #eef5e9;
    --border: #dce9d4;
    --text: #1a201c;
    --text-muted: #55605a;
    --accent: #3b5bdb;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--text-base)/1.65 "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
}

article{
  display: flex;
  flex-direction: column;
  gap: 40px;
}

h1 {
  font-family: "Boska", "Yeseva One", Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-style: italic;
  color: #1f3d2b;
}

h2, h3, h4, h5, h6 {
  font-family: "Merriweather", Georgia, "Times New Roman", serif;
  font-weight: 700;
}

main{
  padding: 128px 60px 192px;
}

@media (max-width: 720px) {
  main{
    padding: 64px 20px 80px;
  }

  /* main already provides the side gutter on small screens — drop .wrap's
     and .text-wrap's own padding (and any nesting of either inside the
     other) so every section lines up on the same consistent margin and
     runs full width. */
  .wrap,
  .text-wrap {
    width:100%;
    margin: 0 auto;
    padding: 0;
  }
}

.wrap {
  max-width: 1024px;
  margin: 0 auto;
}

/* Keyboard focus, switched to light on the dark footer. */
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.page-footer :focus-visible { outline-color: var(--bg); }

.back-link {
  display: inline-block;
  margin: 0 0 32px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--surface);
  color: #1f3d2b;
  font-family: "Merriweather Sans", sans-serif;
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background 0.15s;
}

.back-link:hover {
  background: var(--border);
}

.text-wrap {
  max-width: 760px;
  margin: 0 auto;
}

h1 {
  font-size: var(--text-3xl);
  line-height: 1.1;
  margin: 0 0 64px;
}

/* The minor-third mobile type scale still leaves h1 (--text-3xl) feeling
   oversized against a narrow viewport — drop it further, independent of
   the shared scale, so it reads as punchy rather than overwhelming. This
   has to come after the unconditional h1 rule above to win the cascade
   (equal specificity, so source order decides, not the media query). */
@media (max-width: 720px) {
  h1 {
    font-size: 2rem;
    margin: 0 0 40px;
  }
}

h2 {
  font-size: var(--text-xl);
  line-height: 1.2;
  margin: 56px 0 36px;
}

h3 {
  font-size: var(--text-md);
  line-height: 1.3;
  margin: 32px 0 16px;
  color: var(--text);
}

p { 
  margin: 0 0 16px;
  max-width:760px;
}

a { color: var(--accent); }

ul { margin: 0 0 1em; padding-left: 1.25em; }

li { margin: 0 0 0.75em;}

li h4{margin-top:0;}

img{
  width:100%;
}

.overview {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 24px;
  align-items: top;
  margin: 0 0 8px;
}

@media (max-width: 720px) {
  .overview {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.meta {
  display: flex;
  flex-direction: row;
  gap: 16px ;
  list-style: none;
  /* padding: 20px 24px; */
  margin: 0;
  /* background: var(--surface); */
  /* border: 1px solid var(--border); */
  /* border-radius: 12px; */
}

@media (min-width: 720px) {
  .meta {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

.meta li { margin: 0; width:100%;}

.meta .label {
  display: block;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.meta strong { font-weight: 600; }

.intro {
  font-size: var(--text-md);
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  max-width: 50ch;
}

.context, .solution-section{
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.context__text > :first-child {
  margin-top: 0;
}


.goals ul{
  list-style: none;
  margin: 0;
  padding: 0;
  /*max-width: none;*/
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.goal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 24px 32px;
  background: var(--surface);
}

.goal__icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--text-muted);
}

.challenges ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

@media (min-width: 640px) {
  .challenges ul {
    grid-template-columns: 1fr 1fr;
  }
}

.challenge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 32px;
  background: var(--surface);
}

.challenge h3 {
  font-size: 1em;
  line-height: inherit;
  margin: 0 0 0.5rem;
}

.challenge__icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--text);
}

.outcomes ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

@media (min-width: 960px) {
  .outcomes ul {
    grid-template-columns: repeat(4, 1fr);
  }
}

.outcome {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 32px;
  background: var(--surface);
}

.outcome__icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--text-muted);
}

/* Set apart from the outcome grid — a quote reads as evidence, not just
   another stat, so it shouldn't look like one of the panels. */
.customer-quote {
  margin: 40px 0 0;
  padding: 0 0 0 24px;
  border-left: 3px solid #1f3d2b;
}

.customer-quote p {
  font-family: "Yeseva One", Georgia, "Times New Roman", serif;
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--text);
  margin: 0 0 12px;
  max-width: 44ch;
}

.customer-quote cite {
  display: block;
  font-style: normal;
  font-family: "Merriweather Sans", sans-serif;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.feedback {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.feedback-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 24px 32px;
  background: var(--surface);
}

.feedback-item p {
  margin: 0;
}

.feedback-item__icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--text-muted);
}

.context__media {
  margin: 24px 0;
  border-radius: 12px;
  overflow: hidden;
}

.context__media img,
.context__media video {
  display: block;
  width: 100%;
  height: auto;
  
  /*border: 1px solid var(--border);*/
}

 .lottie {
  width: 100%;
  min-height: 200px; /* fallback until JS sets the real aspect-ratio */
}

.context__media .lottie svg {
  display: block;
}

/* Two columns on larger screens: image on the left, text on the right,
   both vertically centred against each other. */
@media (min-width: 960px) {
  .context__body {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 64px;
    align-items: top;
  }
  .context__body > .context__media {
    margin: 0;
  }
}

.solution-section{
  display: flex;
  flex-direction: column;
  gap: 40px;
}

@media (min-width: 961px) {
  .solution-section{
    gap: 80px;
  }
}

/* Split image / text layouts for the solution sections.
   *-2-1 = image two-thirds, text one-third; *-1-1 = 50/50.
   image-right-* flips the visual order so the figure sits on the right.

   The heading sits outside .text-wrap (a sibling before the figure) so
   that on small screens — where these are plain block-flow, not a grid —
   the natural DOM order gives title -> media -> content. From 721px up
   they're arranged as a grid via named areas, putting the title back
   beside the media at the top of the text column. */

.image-left-2-1 h3,
.image-right-2-1 h3,
.image-left-1-1 h3,
.image-right-1-1 h3 {
  margin-top: 0;
}

@media (min-width: 721px) {
  /* Inside these split image/text grids, .text-wrap is just a grid cell —
     it shouldn't carry the padding/margin/max-width that make it work as
     a standalone section wrapper elsewhere on the page. */
  .image-left-2-1 .text-wrap,
  .image-right-2-1 .text-wrap,
  .image-left-1-1 .text-wrap,
  .image-right-1-1 .text-wrap {
    padding: 0;
    margin: 0;
    max-width: none;
  }

  .image-left-2-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content 1fr;
    grid-template-areas:
      "media title"
      "media text";
    gap: 0 40px;
    align-items: start;
  }
  .image-left-2-1 .context__media {
    grid-area: media;
    margin: 0;
  }
  .image-left-2-1 h3 {
    grid-area: title;
  }
  .image-left-2-1 .text-wrap {
    grid-area: text;
  }

  /* image on the right at 2/3 width, text in the remaining third, top-aligned */
  .image-right-2-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content 1fr;
    grid-template-areas:
      "title media"
      "text media";
    gap: 0 64px;
    align-items: start;
  }
  .image-right-2-1 .context__media {
    grid-area: media;
    margin: 0;
  }
  .image-right-2-1 h3 {
    grid-area: title;
  }
  .image-right-2-1 .text-wrap {
    grid-area: text;
  }

  /* 50/50 — image on the left, text vertically centred alongside it */
  .image-left-1-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content 1fr;
    grid-template-areas:
      "media title"
      "media text";
    gap: 0 64px;
    align-items: start;
  }
  .image-left-1-1 .context__media {
    grid-area: media;
    margin: 0;
  }
  .image-left-1-1 h3 {
    grid-area: title;
  }
  .image-left-1-1 .text-wrap {
    grid-area: text;
  }

  /* 50/50 — as image-left-1-1 but with the image on the right */
  .image-right-1-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content 1fr;
    grid-template-areas:
      "title media"
      "text media";
    gap: 0 64px;
    align-items: start;
  }
  .image-right-1-1 .context__media {
    grid-area: media;
    margin: 0;
  }
  .image-right-1-1 h3 {
    grid-area: title;
  }
  .image-right-1-1 .text-wrap {
    grid-area: text;
  }
}

@media (min-width: 961px) {
  .image-left-2-1 {
    grid-template-columns: 2fr 1fr;
    column-gap: 40px;
  }
  .image-left-2-1 .text-wrap {
    margin: 0;
    align-items: start;
  }
  .image-left-2-1 p:last-child {
    margin-bottom: 0;
  }

  /* image on the right at 2/3 width, text in the remaining third, top-aligned */
  .image-right-2-1 {
    grid-template-columns: 1fr 2fr;
  }
}


.media {
  position: relative;
}

.media video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  /*border: 1px solid var(--border);
  background: var(--surface);*/
}

/* Scroll drives this video's playhead, so it has no native controls — this
   gives keyboard and screen-reader users a real, focusable way to play it
   without needing to scroll at all. */
.media__toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(26, 32, 28, 0.6);
  color: #fff;
  cursor: pointer;
}

.media__toggle:hover {
  background: rgba(26, 32, 28, 0.8);
}

.media__toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.media__toggle-icon--play {
  margin-left: 2px; /* optically centre the play triangle */
}

/* The "hidden" attribute isn't styled display:none by Chrome's SVG UA
   stylesheet the way it is for HTML elements — enforce it explicitly. */
.media__toggle-icon[hidden] {
  display: none;
}

/* Full-bleed dark close to the page, matching the dark hero-style bookend
   used elsewhere on the site — sits outside <main> so it isn't constrained
   by main's side padding. */
.page-footer {
  background: var(--text);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  margin-top: clamp(3rem, 8vw, 6rem);
}

/* .wrap normally relies on <main>'s side padding for its gutter — the
   footer sits outside <main>, so it needs its own. */
.page-footer .wrap {
  padding: 0 60px;
}

@media (max-width: 720px) {
  .page-footer .wrap {
    padding: 0 20px;
  }
}

.page-footer__eyebrow {
  color: #8a9985;
  font-family: "Merriweather Sans", sans-serif;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
}

.page-footer h2 {
  color: var(--bg);
  max-width: 16ch;
  margin: 0 0 32px;
}

/* The email itself is the conclusion this page is building towards —
   give it the weight of a headline, not just another pill button. */
.page-footer__cta {
  display: inline-block;
  color: #1f3d2b;
  text-decoration: none;
  font-family: "Merriweather Sans", sans-serif;
  font-weight: 700;
  font-size: var(--text-md);
  padding: 16px 32px;
  border-radius: 999px;
  background: var(--surface);
  margin: 0 0 48px;
  transition: background 0.15s, transform 0.15s;
}

.page-footer__cta:hover {
  background: var(--bg);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(244, 250, 241, 0.15);
}

.footer-link {
  color: #b9c4b3;
  text-decoration: none;
  font-family: "Merriweather Sans", sans-serif;
  font-weight: 600;
  font-size: var(--text-sm);
  transition: color 0.15s;
}

.footer-link:hover {
  color: var(--bg);
}