/** Shopify CDN: Minification failed

Line 1283:75 Unexpected "__us"
Line 1298:73 Unexpected "__us"
Line 1305:75 Unexpected "__us"

**/
/* Guide product page (templates/product.guide.json). Brand: ../../../_shared/brand-design.md.
   Base palette only for structure; skill pigments only where they identify a skill.
   Sentence case, no italics, 1px rules, 8px grid. */

:root {
  --gp-cream: #F7F3ED;
  --gp-white: #FFFFFF;
  --gp-ink: #1C1917;
  --gp-ink-soft: #44403C;
  --gp-ink-muted: #6E6762;
  --gp-rule: #E2DBD3;
  --gp-viridian: #2C7D6E;
  --gp-star: #D98E2A;
}

/* ---------- Buy box blocks ---------- */

.gp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding-left: 13px;
  margin-top: var(--margin-top);
  margin-bottom: var(--margin-bottom);
}

.gp-pill {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  padding: 6px 4px;
}

/* Watercolour pill: fixed end caps via border-image so the round ends never stretch (as in the guide). */
.gp-pill::before {
  content: '';
  position: absolute;
  inset: 0 -13px;
  z-index: -1;
  border-style: solid;
  border-color: transparent;
  border-width: 0 13px;
  border-image-source: var(--pill-wash);
  border-image-slice: 0 65 fill;
  border-image-repeat: stretch;
}

.gp-intro {
  margin-top: var(--margin-top);
  margin-bottom: var(--margin-bottom);
}

.gp-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gp-ink-soft);
  font-size: 14px;
  text-decoration: none;
}

.gp-rating:hover .gp-rating__count {
  text-decoration: underline;
}

.gp-rating__count {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gp-rule);
}

.gp-stars {
  display: inline-flex;
  gap: 2px;
  font-size: 16px;
  line-height: 1;
}

/* Each star is filled to its share of the rating (4.8 → the fifth star 80%). */
.gp-star {
  display: block;
  width: 1em;
  height: 1em;
  background: linear-gradient(90deg, var(--gp-star) var(--fill), #CEC5BA var(--fill));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7L12 17.5 5.8 21.2l1.6-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7L12 17.5 5.8 21.2l1.6-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gp-tagline {
  margin: var(--margin-top) 0 var(--margin-bottom);
  max-width: 34em;
  color: var(--gp-ink-soft);
  font-size: 16px;
  line-height: 1.65;
}

.gp-benefits {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
  margin-top: var(--margin-top);
  margin-bottom: var(--margin-bottom);
}

.gp-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--gp-ink);
}

.gp-benefits svg {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: -1px;
  color: var(--gp-viridian);
}

.gp-trust {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: var(--margin-top);
  margin-bottom: var(--margin-bottom);
  padding: 16px 0 0;
  border-top: 1px solid var(--gp-rule, rgba(62, 65, 71, 0.15));
  color: var(--gp-ink-soft);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

.gp-trust li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.gp-trust svg {
  width: 26px;
  height: 26px;
  color: var(--gp-viridian);
}

/* ---------- Shared section frame ---------- */

.gp-section {
  background: var(--gp-cream);
  color: var(--gp-ink);
  padding: 56px 0;
}

.gp-section--white {
  background: var(--gp-white);
}

.gp-section__head {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}

.gp-section__head h2 {
  margin: 0;
  line-height: 1.15;
}

.gp-section__head p {
  margin: 16px 0 0;
  color: var(--gp-ink-soft);
  line-height: 1.65;
}

.gp-label {
  display: block;
  margin-bottom: 8px;
  color: var(--gp-ink-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
}

@media screen and (min-width: 750px) {
  .gp-section {
    padding: 80px 0;
  }
}

/* ---------- Five minutes, wherever you are ---------- */

.gp-moments {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1040px;
  display: grid;
  gap: 16px;
}

.gp-moment {
  background: var(--gp-white);
  border: 1px solid var(--gp-rule);
  border-radius: 12px;
  padding: 24px;
}

.gp-section--white .gp-moment {
  background: var(--gp-cream);
}

.gp-moment__when {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--gp-viridian);
  font-size: 13px;
  font-weight: 500;
}

.gp-moment__when::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.gp-moment h3 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.2;
}

.gp-moment p {
  margin: 0;
  color: var(--gp-ink-soft);
  font-size: 15px;
  line-height: 1.65;
}

@media screen and (min-width: 750px) {
  .gp-moments {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media screen and (min-width: 1100px) {
  .gp-moments {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- The six skills (cards, after lomi.com's feature gallery) ---------- */

/* Phones: one row that swipes, with the next card peeking in. Desktop: three columns.
   Every card stretches to the tallest card (one row on phones, equal rows on desktop). */
.gp-skills {
  list-style: none;
  margin: 0;
  padding: 0 20px 8px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 16px;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
  scrollbar-width: none;
}

.gp-skills::-webkit-scrollbar {
  display: none;
}

.gp-skill {
  position: relative;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  background: var(--gp-cream);
  border: 1px solid var(--gp-rule);
  border-radius: 12px;
  overflow: hidden;
}

.gp-section:not(.gp-section--white) .gp-skill {
  background: var(--gp-white);
}

.gp-skill__toggle {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gp-skill__toggle:disabled {
  cursor: default;
}

.gp-skill__toggle:focus-visible {
  outline: 2px solid var(--gp-viridian);
  outline-offset: -2px;
}

.gp-skill__media {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* Cream, so the motifs' paper background disappears. */
  background: var(--gp-cream);
}

.gp-skill__motif {
  /* The motif files are cropped to the figure, so contain fills the square and centres it. */
  width: 86%;
  height: 86%;
  min-height: 0;
  object-fit: contain;
  /* The motif files have their paper cleaned to white, so multiplying onto Cream makes the
     paper disappear and leaves the pigment as painted. */
  mix-blend-mode: multiply;
}

/* The 3-4 EI crop is nearly square and tight to the child, so contain blows it up further than
   the wider crops. Scaled down so the child reads the same size as in the other tiles. */
.gp-skill__motif--3-4-ei {
  width: 68%;
  height: 68%;
}

/* The white area grows to fill the card, so all cards end level. */
.gp-skill__head {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--gp-rule);
}

.gp-skill__name,
.gp-skill__more-name {
  display: block;
  margin-bottom: 4px;
  color: var(--skill-color);
  font-family: var(--font-heading-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.gp-skill__line {
  display: block;
  color: var(--gp-ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

/* Round button: plus on the card, cross on the open panel. */
.gp-skill__plus,
.gp-skill__close {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--gp-rule);
  border-radius: 50%;
  background: var(--gp-white);
}

.gp-skill__plus::before,
.gp-skill__plus::after,
.gp-skill__close::before,
.gp-skill__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--gp-ink);
  transform: translate(-50%, -50%);
}

.gp-skill__plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.gp-skill__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.gp-skill__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.gp-skill__close {
  position: absolute;
  top: 16px;
  right: 16px;
}

/* The open panel covers the whole card, so the card's size never changes. */
.gp-skill__more {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 20px 20px 24px;
  background: var(--gp-cream);
  border-top: 4px solid var(--skill-color);
  color: var(--gp-ink-soft);
  font-size: 14px;
  line-height: 1.6;
  cursor: pointer;
}

.gp-section:not(.gp-section--white) .gp-skill__more {
  background: var(--gp-white);
}

.gp-skill__more[hidden] {
  display: none;
}

.gp-skill__more-name {
  padding-right: 48px;
  margin-bottom: 12px;
}

.gp-skill__more p {
  margin: 0 0 12px;
}

.gp-skill__more p:last-child {
  margin-bottom: 0;
}

.gp-skill__more .gp-skill__headline {
  color: var(--gp-ink);
  font-family: var(--font-heading-family);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

@media screen and (min-width: 750px) {
  .gp-skills {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
    overflow: visible;
  }

}

@media screen and (min-width: 1100px) {
  .gp-skills {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- How each skill builds: the skill tree ---------- */

/* Phones and tablets: this guide's age, the six branches with their sub-skills, then the next guide.
   Desktop (1200px+): one tree read top to bottom. The trunk runs from this guide's age (top)
   down to the next guide (bottom); three skills branch left and three right, sub-skills numbered
   from the outside in (5 beside the trunk), and each branch curves down into the trunk to show
   the progression moving on. */

.gp-section {
  --gp-sec-bg: var(--gp-cream);
}

.gp-section--white {
  --gp-sec-bg: var(--gp-white);
}

.gp-tree {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}

/* Plain filled pills: skills in their pigment, this guide's age in Viridian. */
.gp-tree-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--skill-color, var(--gp-viridian));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
}

.gp-tree-pill--age {
  font-weight: 400;
  font-size: 14px;
  padding: 8px 18px;
}

.gp-tree-pill--next {
  background: var(--gp-sec-bg);
  color: var(--gp-viridian);
  border: 1px solid var(--gp-viridian);
  font-size: 14px;
  padding: 8px 18px;
}

a.gp-tree-pill--next:hover {
  background: var(--gp-viridian);
  color: #fff;
}

.gp-tree-pill--plain {
  color: var(--gp-ink-soft);
  border-color: var(--gp-rule);
}

.gp-tree__line {
  display: none;
}

.gp-tree__base {
  margin-bottom: 32px;
  text-align: center;
}

.gp-tree__next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  text-align: center;
}

.gp-tree__next-when {
  color: var(--gp-ink-muted);
  font-size: 13px;
}

.gp-branch {
  position: relative;
  margin: 0 0 24px 8px;
  padding: 0 0 0 20px;
  border-left: 1px solid var(--skill-color);
}

.gp-branch__skill {
  margin: 0 0 12px;
}

.gp-branch__sub-skills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.gp-leaf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gp-leaf__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--skill-color);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.gp-leaf__name {
  color: var(--gp-ink);
  font-size: 14px;
  line-height: 1.3;
}

.gp-tree__foot {
  margin: 24px auto 0;
  max-width: 640px;
  color: var(--gp-ink-muted);
  font-size: 13px;
  text-align: center;
}

/* Tablets: the six branches in two columns. */
@media screen and (min-width: 750px) and (max-width: 1199px) {
  .gp-tree {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
  }

  .gp-tree__base,
  .gp-tree__next {
    grid-column: 1 / -1;
  }
}

@media screen and (min-width: 1200px) {
  .gp-tree {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr);
    grid-template-rows: auto repeat(3, auto) auto;
    row-gap: 48px;
  }

  /* The trunk: from this guide's age at the top down to the next guide. */
  .gp-tree__line {
    display: block;
    grid-column: 2;
    grid-row: 1 / 6;
    justify-self: center;
    width: 2px;
    margin: 24px 0;
    background: var(--gp-ink-muted);
  }

  .gp-tree__base {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    z-index: 1;
  }

  .gp-tree__next {
    grid-column: 2;
    grid-row: 5;
    margin: 0;
    padding-top: 8px;
    background: var(--gp-sec-bg);
    z-index: 1;
  }

  .gp-branch {
    grid-row: var(--row);
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* A branch: the skill pill on the outside, sub-skills numbered 1 (outside) to 5 (beside the trunk).
     The line runs level through the sub-skills (::before), then turns down into the trunk in one
     rounded corner (::after). --leaf-mid is the distance from a branch edge to the centre of
     its nearest sub-skill (five equal cells, 8px gaps); 100px is half the trunk column. */
  .gp-branch {
    --leaf-mid: calc((100% - 32px) / 10);
    --bend: 28px;
  }

  .gp-branch::before,
  .gp-branch::after {
    content: '';
    position: absolute;
    top: 55px;
  }

  .gp-branch::before {
    left: var(--leaf-mid);
    right: var(--leaf-mid);
    height: 1px;
    background: var(--skill-color);
  }

  .gp-branch::after {
    height: var(--bend);
    border-top: 1px solid var(--skill-color);
  }

  .gp-branch--left {
    grid-column: 1;
    align-items: flex-start;
  }

  .gp-branch--left::after {
    left: calc(100% - var(--leaf-mid));
    right: -100px;
    border-right: 1px solid var(--skill-color);
    border-top-right-radius: var(--bend);
  }

  .gp-branch--right {
    grid-column: 3;
    align-items: flex-end;
  }

  .gp-branch--right::after {
    left: -100px;
    right: calc(100% - var(--leaf-mid));
    border-left: 1px solid var(--skill-color);
    border-top-left-radius: var(--bend);
  }

  .gp-branch__skill {
    margin-bottom: 0;
  }

  /* The pill's rounded end lines up with the outer edge of sub-skill 1's circle (30px wide). */
  .gp-branch--left .gp-branch__skill {
    margin-left: calc(var(--leaf-mid) - 15px);
  }

  .gp-branch--right .gp-branch__skill {
    margin-right: calc(var(--leaf-mid) - 15px);
  }

  .gp-branch__sub-skills {
    position: relative;
    z-index: 1; /* above the branch lines, so each circle's ring gaps the line */
    align-self: stretch;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .gp-branch--right .gp-branch__sub-skills {
    flex-direction: row-reverse;
  }

  .gp-leaf {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .gp-leaf__num {
    width: 30px;
    height: 30px;
    font-size: 13px;
    /* A ring in the section colour, so the branch line reads as passing behind each sub-skill. */
    box-shadow: 0 0 0 4px var(--gp-sec-bg);
  }

  .gp-leaf__name {
    font-size: 13px;
    line-height: 1.35;
  }

  .gp-tree__foot {
    margin-top: 40px;
  }
}

/* ---------- Try one activity ---------- */

.gp-sample {
  /* guide-tabs is a custom element, inline by default; inline, its border drew a stray
     sliver at the top left before the first block child. */
  display: block;
  margin: 0 auto;
  background: var(--gp-cream);
}

.gp-sample__top {
  padding: 8px 0 24px;
  border-bottom: 1px solid var(--gp-rule);
}

.gp-sample__top .gp-tree-pill {
  margin-bottom: 16px;
}

.gp-section__head--wide {
  max-width: none;
}

.gp-sample__title {
  margin: 0;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.12;
}

.gp-sample__meta {
  margin: 8px 0 0;
  color: var(--gp-ink-muted);
  font-size: 13px;
}

.gp-sample__intro {
  margin: 16px 0 0;
  color: var(--gp-ink-soft);
  line-height: 1.65;
}

.gp-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 16px 0 0;
  border-bottom: 1px solid var(--gp-rule);
  scrollbar-width: none;
}

.gp-tab {
  flex: none;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 4px 12px;
  margin-right: 16px;
  font: inherit;
  font-size: 14px;
  color: var(--gp-ink-muted);
  cursor: pointer;
}

.gp-tab[aria-selected='true'] {
  color: var(--gp-ink);
  border-bottom-color: var(--gp-viridian);
}

.gp-tab:focus-visible {
  outline: 2px solid var(--gp-viridian);
  outline-offset: 2px;
}

.gp-panel {
  padding: 24px 0;
  line-height: 1.65;
}

.gp-panel[hidden] {
  display: none;
}

.gp-panel ol,
.gp-panel ul {
  margin: 0;
  padding-left: 24px;
}

.gp-panel li {
  break-inside: avoid;
  margin-bottom: 12px;
}

.gp-panel p {
  margin: 0;
}

/* Desktop: lists in two columns, so the card stays short. */
@media screen and (min-width: 990px) {
  .gp-panel ol,
  .gp-panel ul {
    columns: 2;
    column-gap: 48px;
  }
}

.gp-adjust {
  display: grid;
  gap: 16px;
}

.gp-adjust > div {
  border-radius: 8px;
  padding: 16px;
}

.gp-adjust__easier {
  background: #F5E8E8;
}

.gp-adjust__harder {
  background: #E8F2E8;
}

.gp-adjust__easier .gp-label {
  color: #8B2A2A;
}

.gp-adjust__harder .gp-label {
  color: #2D6A2D;
}

.gp-panel__refs {
  margin-top: 16px !important;
  color: var(--gp-ink-muted);
  font-size: 13px;
}

/* ---- Full-activity panels (the guide's nine sections) ---- */

.gp-prose {
  display: grid;
  gap: 12px;
}

.gp-panel__sub {
  display: block;
  margin: 24px 0 12px;
  color: var(--gp-ink-muted);
}

.gp-panel__lead {
  margin-bottom: 16px !important;
  color: var(--gp-ink-soft);
}

.gp-panel__meta {
  margin-bottom: 16px !important;
  color: var(--gp-ink-muted);
  font-size: 13px;
}

.gp-panel .gp-checks,
.gp-panel .gp-dots,
.gp-panel .gp-arrows {
  list-style: none;
  padding-left: 0;
  columns: auto;
}

.gp-checks li,
.gp-dots li,
.gp-arrows li {
  position: relative;
  padding-left: 28px;
}

.gp-checks li::before,
.gp-arrows li::before {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gp-viridian);
  font-weight: 700;
}

.gp-checks li::before {
  content: '\2713';
}

.gp-arrows li::before {
  content: '\2192';
}

.gp-dots li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0.65em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gp-viridian);
}

.gp-steps {
  display: grid;
  gap: 10px;
}

.gp-steps__step {
  display: flex;
  gap: 10px;
}

.gp-steps__num {
  flex: none;
  min-width: 18px;
  font-weight: 700;
  color: var(--gp-viridian);
}

.gp-steps__example {
  margin: -4px 0 0 28px !important;
  color: var(--gp-ink-soft);
  font-style: italic;
}

.gp-prompts {
  display: grid;
  gap: 16px;
}

.gp-prompts__item {
  display: flex;
  gap: 12px;
}

.gp-prompts__mark {
  flex: none;
  font-family: var(--font-heading-family);
  font-size: 32px;
  line-height: 1;
  color: var(--gp-viridian);
}

.gp-prompts__q {
  font-weight: 700;
}

.gp-prompts__note {
  color: var(--gp-ink-soft);
  font-size: 14px;
}

.gp-panel__final {
  font-family: var(--font-heading-family);
  font-size: 18px;
  line-height: 1.5;
}

/* Phones: the tab row scrolls sideways; a fade on the right shows there's more. */
@media screen and (max-width: 989px) {
  .gp-tabs {
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
  }
}

/* Desktop: nine tabs wrap onto a second row rather than scroll. */
@media screen and (min-width: 990px) {
  .gp-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 0;
  }
}

@media screen and (min-width: 750px) {

  .gp-adjust {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Reviews ---------- */

.gp-reviews__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.gp-reviews__score .gp-stars {
  font-size: 22px;
}

.gp-reviews__score-text {
  color: var(--gp-ink-soft);
  font-size: 14px;
}

.gp-quotes {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1040px;
  display: grid;
  gap: 16px;
}

.gp-quote {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--gp-white);
  border: 1px solid var(--gp-rule);
  border-radius: 12px;
  padding: 24px;
}

.gp-section--white .gp-quote {
  background: var(--gp-cream);
}

.gp-quote .gp-stars {
  font-size: 14px;
}

.gp-quote h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}

.gp-quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--gp-ink-soft);
  font-size: 15px;
  font-style: normal;
  line-height: 1.65;
}

.gp-quote blockquote p {
  margin: 0;
}

.gp-quote footer {
  margin-top: auto;
  color: var(--gp-ink-muted);
  font-size: 13px;
}

@media screen and (min-width: 750px) {
  .gp-quotes {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* ---------- How we compare ---------- */

.gp-compare {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  line-height: 1.5;
}

.gp-compare th,
.gp-compare td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gp-rule);
  text-align: left;
  vertical-align: top;
}

.gp-compare thead th {
  padding-top: 20px;
  padding-bottom: 20px;
  color: var(--gp-ink-soft);
  font-size: 14px;
  font-weight: 700;
}

.gp-compare tbody th {
  width: 18%;
  color: var(--gp-ink);
  font-weight: 700;
}

.gp-compare td {
  width: 27%;
  color: var(--gp-ink-muted);
}

/* This guide's column: a Viridian-edged band from header to last row. */
.gp-compare .gp-compare__us {
  background: var(--gp-cream);
  color: var(--gp-ink);
  border-left: 1px solid var(--gp-viridian);
  border-right: 1px solid var(--gp-viridian);
}

/* On cream, the column's rows go white; the header keeps its Viridian fill. */
.gp-section:not(.gp-section--white) .gp-compare tbody .gp-compare__us {
  background: var(--gp-white);
}

.gp-compare thead .gp-compare__us {
  background: var(--gp-viridian);
  color: #fff;
  border-radius: 12px 12px 0 0;
}

.gp-compare tbody tr:last-child .gp-compare__us {
  border-bottom: 1px solid var(--gp-viridian);
  border-radius: 0 0 12px 12px;
}

.gp-compare td.gp-compare__us {
  display: table-cell;
}

.gp-compare__icon {
  width: 16px;
  height: 16px;
  margin: 3px 8px 0 0;
  float: left;
  color: var(--gp-viridian);
}

.gp-compare td.gp-compare__us span {
  display: block;
  overflow: hidden;
}

/* Phones: each row becomes a card, column names repeated (text cells only; ticks and crosses stay a table). */
@media screen and (max-width: 749px) {
  .gp-compare:not(.gp-compare--marks),
  .gp-compare:not(.gp-compare--marks) tbody,
  .gp-compare:not(.gp-compare--marks) tr,
  .gp-compare:not(.gp-compare--marks) th,
  .gp-compare:not(.gp-compare--marks) td {
    display: block;
    width: auto;
  }

  .gp-compare:not(.gp-compare--marks) thead {
    display: none;
  }

  .gp-compare:not(.gp-compare--marks) tr {
    margin-bottom: 16px;
    border: 1px solid var(--gp-rule);
    border-radius: 12px;
    overflow: hidden;
    background: var(--gp-sec-bg);
  }

  .gp-compare:not(.gp-compare--marks) tbody th {
    width: auto;
    padding: 12px 16px;
    background: var(--gp-cream);
  }

  .gp-section:not(.gp-section--white) .gp-compare:not(.gp-compare--marks) tbody th {
    background: var(--gp-white);
  }

  .gp-compare:not(.gp-compare--marks) td,
  .gp-compare:not(.gp-compare--marks) td.gp-compare:not(.gp-compare--marks)__us {
    display: block;
    padding: 12px 16px;
    font-size: 14px;
  }

  .gp-compare:not(.gp-compare--marks) td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--gp-ink-muted);
    font-size: 12px;
    font-weight: 500;
  }

  .gp-compare:not(.gp-compare--marks) .gp-compare:not(.gp-compare--marks)__us,
  .gp-compare:not(.gp-compare--marks) tbody tr:last-child .gp-compare:not(.gp-compare--marks)__us {
    border: 0;
    border-radius: 0;
    background: #EAF3F1;
  }

  .gp-compare:not(.gp-compare--marks) td.gp-compare:not(.gp-compare--marks)__us::before {
    color: var(--gp-viridian);
  }

  .gp-compare:not(.gp-compare--marks) tr > :last-child {
    border-bottom: 0;
  }
}

/* Ticks and crosses (home page): centred marks, the row label carries the meaning. */
.gp-compare--marks td,
.gp-compare--marks thead th:not(:first-child) {
  text-align: center;
  vertical-align: middle;
}

.gp-compare--marks tbody th {
  width: 40%;
  vertical-align: middle;
}

.gp-compare--marks td {
  width: 20%;
}

.gp-mark {
  display: inline-flex;
  vertical-align: middle;
}

.gp-mark svg {
  width: 24px;
  height: 24px;
}

.gp-mark--yes {
  color: var(--gp-viridian);
}

.gp-mark--no,
.gp-mark--some {
  color: var(--gp-ink-muted);
}

@media screen and (max-width: 749px) {
  .gp-compare--marks th,
  .gp-compare--marks td {
    padding: 12px 6px;
    font-size: 13px;
  }

  .gp-compare--marks thead th {
    font-size: 12px;
    line-height: 1.3;
  }

  .gp-compare--marks tbody th {
    padding-left: 0;
  }
}

/* A button under a section's content. */
.gp-section__foot {
  margin-top: 40px;
  text-align: center;
}

/* ---------- Theme overrides on the guide template ---------- */

/* The compare-at price and sale badge show when a product has a compare-at price (owner's call,
   2026-10-29, overriding brand-design.md's general "no strikethrough" for real discounts). */

.product__title h1 {
  text-wrap: balance;
}

/* Accordion lists (What's inside): bullets flush with the accordion title, and every line of a
   point starts at the same indent. The theme's rte sets list-style-position: inside, which
   wraps second lines back under the bullet. */
.accordion__content.rte ul {
  list-style: none;
  padding-left: 0;
}

.accordion__content.rte ul > li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.6em;
}

.accordion__content.rte ul > li::before {
  content: '';
  position: absolute;
  left: 0.2em;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Why this guide (text left, image right) ---------- */

.gp-why {
  display: grid;
  gap: 32px;
  align-items: center;
}

.gp-why__body {
  min-width: 0;
}

.gp-why__media {
  /* The painting's paper is white, so it sits straight on the section with no frame. */
  background: transparent;
}

.gp-why__img {
  display: block;
  width: 100%;
  height: auto;
}

/* The stand-in motif sits on cream with its paper multiplied away. */
.gp-why__img--motif {
  width: 78%;
  margin: 12% auto;
  mix-blend-mode: multiply;
}

.gp-why__title {
  margin: 0 0 16px;
}

.gp-why__intro p {
  margin: 0;
  color: var(--gp-ink-soft);
  line-height: 1.65;
}

/* Questions: one at a time, bold question over its answer, green bar on the left, white ground. */
.gp-carousel {
  display: block;
  margin-top: 28px;
}

.gp-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.gp-carousel__track::-webkit-scrollbar {
  display: none;
}

.gp-carousel__track:focus-visible {
  outline: 2px solid var(--gp-viridian);
  outline-offset: 4px;
}

.gp-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 4px 0 4px 18px;
  background: var(--gp-white);
  border-left: 3px solid var(--gp-viridian);
}

.gp-carousel__q {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--gp-ink);
}

.gp-carousel__a,
.gp-carousel__a p {
  margin: 0;
  line-height: 1.65;
  color: var(--gp-ink-soft);
}

.gp-carousel__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.gp-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--gp-rule);
  border-radius: 50%;
  background: var(--gp-white);
  color: var(--gp-ink);
  cursor: pointer;
}

.gp-carousel__arrow:hover {
  border-color: var(--gp-viridian);
  color: var(--gp-viridian);
}

.gp-carousel__arrow svg {
  width: 20px;
  height: 20px;
}

.gp-carousel__dots {
  display: flex;
  gap: 8px;
}

.gp-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--gp-rule);
  cursor: pointer;
}

.gp-carousel__dot[aria-current] {
  background: var(--gp-viridian);
}

@media screen and (min-width: 990px) {
  .gp-why {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

/* ---------- What's in each activity (image centre, features both sides) ---------- */

.gp-features {
  display: grid;
  gap: 32px;
}

.gp-features__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.gp-features__col {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
  align-content: center;
}

.gp-feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.gp-feature__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gp-cream);
  color: var(--gp-viridian);
}

.gp-section:not(.gp-section--white) .gp-feature__icon {
  background: var(--gp-white);
}

.gp-feature__icon svg {
  width: 24px;
  height: 24px;
}

.gp-feature__title {
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.3;
}

.gp-feature__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--gp-ink-soft);
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .gp-features {
    grid-template-columns: 1fr 1fr;
  }

  .gp-features__media {
    grid-column: 1 / -1;
    max-width: 520px;
    margin: 0 auto;
  }
}

/* Desktop: left features, image, right features. Left column reads towards the image. */
@media screen and (min-width: 990px) {
  .gp-features {
    grid-template-columns: 1fr minmax(0, 1.15fr) 1fr;
    gap: 48px;
    align-items: center;
  }

  .gp-features__col--left {
    order: -1;
  }

  .gp-features__col--left .gp-feature {
    flex-direction: row-reverse;
    text-align: right;
  }
}

/* ---------- Checkout band (Viridian; end of Try one activity, and under the FAQ) ---------- */

/* The band closes the section, so the section's own bottom padding goes. */
.gp-section--cta-end {
  padding-bottom: 0;
}

.gp-section--cta-end .gp-cta {
  margin-top: 56px;
}

.gp-cta {
  background: var(--gp-viridian);
  color: #fff;
}

.gp-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 44px;
  padding-bottom: 44px;
  text-align: center;
}

.gp-cta__text {
  margin: 0;
  font-family: var(--font-heading-family);
  font-size: 20px;
  line-height: 1.4;
  color: #fff;
  text-wrap: balance;
}

.gp-cta__form {
  margin: 0;
}

.gp-cta__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 32px;
  border: 1.5px solid #fff;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.gp-cta__button:hover,
.gp-cta__button:focus-visible {
  background: #fff;
  color: var(--gp-viridian);
}

.gp-cta__button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.gp-cta__button--disabled {
  opacity: 0.6;
  cursor: default;
}

@media screen and (min-width: 750px) {
  .gp-cta__text {
    font-size: 22px;
  }
}

/* Guide cards row (guide pages, article pages): every card the same height, the age on
   its own line under "Raising Future Thinkers" */
.gp-other-ages .grid__item {
  display: flex;
}

.gp-other-ages .card-wrapper,
.gp-other-ages .card {
  width: 100%;
  height: 100%;
}

/* The card's text area contrasts with the band: white on cream, cream on white. */
.gp-other-ages .card.gradient {
  background: var(--gp-white);
}

.gp-other-ages.gp-section--white .card.gradient {
  background: var(--gp-cream);
}

.card__title-line {
  display: block;
  white-space: nowrap;
}

/* Five across: a smaller title so "Raising Future Thinkers" fits on one line on desktop */
@media screen and (min-width: 990px) {
  .gp-other-ages .grid--5-col-desktop .card__heading {
    font-size: 1.4rem;
  }

  .gp-other-ages .grid--5-col-desktop .card__content,
  .gp-other-ages .grid--5-col-desktop .card__information {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
}

/* ---------- Guides landing hero (sections/guide-landing-hero.liquid) ---------- */

.gp-hero {
  padding: 32px 0 48px;
}

.gp-hero__inner {
  display: grid;
  gap: 32px;
}

.gp-hero__title {
  margin: 0;
  line-height: 1.1;
  text-wrap: balance;
}

.gp-hero__text {
  margin-top: 16px;
  color: var(--gp-ink-soft);
  font-size: 17px;
  line-height: 1.6;
}

.gp-hero__text p {
  margin: 0;
}

.gp-hero__picker {
  margin-top: 28px;
}

.gp-hero__picker-label {
  margin: 0 0 12px;
  font-family: var(--font-heading-family);
  font-size: 18px;
  color: var(--gp-ink);
}

.gp-ages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gp-age {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 8px 4px;
  border: 1px solid var(--gp-viridian);
  border-radius: 12px;
  background: var(--gp-white);
  color: var(--gp-viridian);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.gp-age:hover,
.gp-age:focus-visible {
  background: var(--gp-viridian);
  color: #fff;
}

.gp-age:focus-visible {
  outline: 2px solid var(--gp-ink);
  outline-offset: 2px;
}

.gp-age__num {
  font-family: var(--font-heading-family);
  font-size: 22px;
  line-height: 1.1;
}

.gp-age__unit {
  font-size: 12px;
  letter-spacing: .02em;
}

.gp-hero__proof {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

.gp-hero__trust {
  margin: 0;
  color: var(--gp-ink-muted);
  font-size: 14px;
}

.gp-hero__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Phones: a bar at the bottom that jumps to the guide cards (shown by the section's script). */
.gp-jump {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 52px;
  border-radius: 999px;
  background: var(--gp-viridian);
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(28, 25, 23, .18);
}

.gp-jump[hidden] {
  display: none;
}

/* Anchored sections land below the sticky header. */
.gp-anchor {
  scroll-margin-top: 80px;
}

@media screen and (min-width: 750px) {
  .gp-hero {
    padding: 56px 0 72px;
  }

  .gp-ages {
    grid-template-columns: repeat(5, 1fr);
  }

  .gp-jump {
    display: none;
  }
}

@media screen and (min-width: 990px) {
  .gp-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }

  .gp-hero__inner--text-only {
    grid-template-columns: minmax(0, 720px);
    justify-content: center;
    text-align: center;
  }

  .gp-hero__inner--text-only .gp-hero__proof {
    align-items: center;
  }
}