/* The uplifted guides (site/guides.html and the guides that have moved to it), on top of site.css. A hero in the shape of the
   Features and home heroes (sky, sparkles, doors, a stage), then full-width colour bands. Every guide has a theme:
   the three colours and the pal on its row of the guides page. A theme is one class (.gu-t-gold, .gu-t-green, ...) that
   sets the --c, --c2 and --cd colours below. "Start free week" is only ever in the card at the bottom of a guide.
   Classes are all gu-: nothing here touches the older guide pages (guide.css) or the home page. */

/* ---------------------------------------------------------------- themes */
.gu-t-gold {
  --c: #ffe27a;
  --c2: #f0b800;
  --cd: #7a4f00;
  --soft: #fff3c4;
  --soft2: #fff8e1;
  --soft3: #ffe9a0;
  --brown: #4a3200;
  --acc: #5b3bf0;
  --acc-d: #3a1fb5;
  --acc-fg: #fff;
  --line: #ffd98a;
  --d: #ffb800;
}
.gu-t-green {
  --c: #a8ecc0;
  --c2: #3fb76f;
  --cd: #0f5c2c;
  --soft: #dcf6e4;
  --soft2: #eefaf2;
  --soft3: #c9f1d9;
  --brown: #0d3d22;
  --acc: #17803f;
  --acc-d: #0f5c2c;
  --acc-fg: #fff;
  --line: #a8e6bf;
  --d: #30c25a;
}
.gu-t-violet {
  --c: #d9ceff;
  --c2: #9a85ff;
  --cd: #3a1fb5;
  --soft: #ece6ff;
  --soft2: #f6f3ff;
  --soft3: #d9ceff;
  --brown: #261569;
  --acc: #5b3bf0;
  --acc-d: #3a1fb5;
  --acc-fg: #fff;
  --line: #cfc3ff;
  --d: #7a5cff;
}
.gu-t-blue {
  --c: #bfe0ff;
  --c2: #4a9fee;
  --cd: #06509a;
  --soft: #dcedff;
  --soft2: #eef6ff;
  --soft3: #bfe0ff;
  --brown: #04325f;
  --acc: #0a62c4;
  --acc-d: #06509a;
  --acc-fg: #fff;
  --line: #a9d2fa;
  --d: #0a84ff;
}
.gu-t-coral {
  --c: #ffd0c2;
  --c2: #f57a5a;
  --cd: #a8341a;
  --soft: #ffe6d6;
  --soft2: #fff3ec;
  --soft3: #ffd0c2;
  --brown: #5c1a0a;
  --acc: #c8452a;
  --acc-d: #a8341a;
  --acc-fg: #fff;
  --line: #ffc2ae;
  --d: #ff6b4a;
}

/* Only links inside running text are underlined (see .gu-band p a below). Cards, rows, doors and buttons are not. */
.gu a {
  text-decoration: none;
}

/* ---------------------------------------------------------------- the header over a themed hero */
/* The header sits on the hero. On a light themed hero its links and logo go dark; once it comes back as the slim violet
   bar (.stuck) they are white again, as everywhere else. */
.gu-light .top .brand img {
  display: none;
}
.gu-light .top .brand .gu-logo-dark {
  display: block;
}
.gu-light .top {
  color: var(--ink);
}
.gu-light .top .links a {
  color: var(--ink);
}
.gu-light .top .links a:hover {
  background: rgba(28, 26, 51, 0.1);
  color: var(--ink);
}
.gu-light .top .menu-btn {
  background: rgba(28, 26, 51, 0.1);
  color: var(--ink);
}
/* The slim bar that follows you down the page is the same solid colour as the header it came from. */
.gu-light .top.stuck {
  background: var(--c);
}
.gu-light .top .links a[aria-current],
.gu-light .top .links a[aria-current]:hover {
  background: #fff;
  color: #4c2dd8;
}

/* ---------------------------------------------------------------- the hero */
.gu-hero {
  position: relative;
  overflow: hidden;
  padding-top: 76px;
  color: var(--ink);
  background:
    radial-gradient(circle at 80% 48%, rgba(255, 255, 255, 0.5), transparent 42%),
    repeating-radial-gradient(circle at 80% 48%, transparent 0 74px, rgba(255, 255, 255, 0.22) 75px 79px),
    linear-gradient(180deg, var(--c), var(--c2));
}
.gu-hero.violet {
  color: #fff;
  background:
    radial-gradient(50% 60% at 50% 70%, rgba(170, 150, 255, 0.7), rgba(170, 150, 255, 0) 70%),
    linear-gradient(180deg, #6447f5 0%, #3f24c2 100%);
  text-align: center;
}
.gu-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gu-sp {
  position: absolute;
  width: 22px;
  height: 22px;
  fill: #fff;
  opacity: 0.9;
}
.gu-sp.v {
  fill: var(--acc);
  opacity: 0.85;
}
.gu-sp.gold {
  fill: #ffd43b;
  opacity: 0.95;
}
.gu-sp.s1 {
  left: 9%;
  top: 26%;
}
.gu-sp.s2 {
  right: 12%;
  top: 20%;
  width: 30px;
  height: 30px;
}
.gu-sp.s3 {
  left: 20%;
  top: 64%;
  width: 16px;
  height: 16px;
}
.gu-sp.s4 {
  right: 6%;
  top: 60%;
  width: 18px;
  height: 18px;
}
.gu-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 48px;
  align-items: start;
  padding-top: 40px;
}
.gu-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 110px;
}
.gu-crumbs {
  display: flex;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--brown);
}
.gu-crumbs span {
  opacity: 0.6;
}
.violet .gu-crumbs {
  color: rgba(255, 255, 255, 0.85);
}
.gu-eyebrow {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cd);
}
.violet .gu-eyebrow {
  color: #ebe7ff;
}
.gu-hero h1 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(42px, 3.6vw + 14px, 68px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
  color: var(--ink);
}
.violet.gu-hero h1 {
  max-width: 12ch;
  font-size: clamp(46px, 4vw + 18px, 84px);
  line-height: 0.97;
  color: #fff;
}
.gu-pill {
  display: inline-block;
  padding: 0 0.18em 0.04em;
  border-radius: 0.24em;
  background: var(--acc);
  color: var(--acc-fg);
  transform: rotate(-2deg);
  box-shadow: 0 0.07em 0 var(--acc-d);
}
.violet .gu-pill {
  background: #ffd43b;
  color: #1c1a33;
  box-shadow: 0 0.07em 0 #d99a00;
}
.gu-lede {
  max-width: 30em;
  margin: 0;
  font-size: clamp(17px, 0.4vw + 15px, 20px);
  line-height: 1.5;
  color: var(--brown);
}
.violet .gu-lede {
  max-width: 30em;
  color: #ebe7ff;
}
.gu-doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 640px;
  margin-top: 10px;
}
.gu-door {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.14),
    0 10px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease;
}
.gu-door:hover {
  transform: translateY(-2px);
}
.gu-di {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: 14px;
}
.gu-di img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  object-position: center 20%;
}
.gu-dt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.gu-dt b {
  font-size: 15px;
  font-weight: 800;
}
.gu-dt small {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
}
.gu-door.c1 .gu-di {
  background: #ffe9d3;
}
.gu-door.c2 .gu-di {
  background: #e3f8ec;
}
.gu-door.c3 .gu-di {
  background: #e2f0ff;
}
.gu-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin: 14px 0 0;
}
.gu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 800;
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 82%, #fff), var(--acc));
  color: var(--acc-fg);
  box-shadow:
    0 5px 0 var(--acc-d),
    0 12px 24px rgba(40, 20, 140, 0.22);
  transition: transform 0.15s ease;
}
.gu-btn:hover {
  transform: translateY(-1px);
}
.gu-btn:active {
  transform: scale(0.97);
}
.gu-btn.gold {
  background: linear-gradient(180deg, #ffd43b, #ffb800);
  color: #1c1a33;
  box-shadow:
    0 5px 0 #d99a00,
    0 12px 24px rgba(30, 10, 90, 0.22);
}
.gu-stage {
  position: relative;
  display: grid;
  place-items: start center;
  min-height: 540px;
  padding-top: 70px;
}
.gu-paper {
  position: relative;
  display: grid;
  gap: 12px;
  width: 320px;
  padding: 26px 24px 24px;
  border-radius: 28px;
  background: #fff;
  transform: rotate(3deg);
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.14),
    0 24px 50px rgba(0, 0, 0, 0.2);
}
.gu-paper .pe {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acc);
}
.gu-paper .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 2px dashed var(--line);
}
.gu-paper .row b {
  font-size: 15px;
  font-weight: 800;
}
.gu-paper .row span {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.gu-paper .row small {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink2);
}
.gu-paper .pal {
  position: absolute;
  right: -18px;
  top: -62px;
  width: 96px;
  height: auto;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.25));
}
.gu-st {
  position: absolute;
  display: inline-flex;
  margin: 0;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.14);
}
.gu-st1 {
  left: 0;
  top: 380px;
  background: var(--acc);
  color: var(--acc-fg);
  transform: rotate(-4deg);
}
.gu-st2 {
  right: 0;
  top: 140px;
  background: #fff;
  color: var(--ink);
  transform: rotate(3deg);
}
.gu-wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 2;
  width: 100%;
  height: 70px;
  fill: #fff;
}

/* ---------------------------------------------------------------- bands */
.gu-band {
  padding: 72px 0;
}
.gu-band.tight {
  padding-top: 56px;
  padding-bottom: 56px;
}
/* On the guides page the card follows the list, whose last card already carries a 16px margin. */
.gu-b-wide {
  padding-bottom: 0;
}
.gu-b-wide + .gu-band.tight {
  padding-top: 40px;
}
.gu-in {
  display: grid;
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 28px;
}
.gu-b-white {
  background: #fff;
}
.gu-b-1 {
  background: var(--soft);
}
.gu-b-2 {
  background: var(--soft2);
}
.gu-b-3 {
  background: var(--soft3);
}
.gu-band h2 {
  margin: 0;
  font-size: 36px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.gu-band h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
}
.gu-band p,
.gu-band li,
.gu-band dd {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
}
.gu-band p a,
.gu-band dd a {
  color: var(--acc);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.gu-eb {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cd);
}
.gu-note {
  font-size: 14px !important;
  color: var(--ink2);
}
.gu-start {
  padding: 16px 22px;
  border-radius: 20px;
  background: var(--soft);
  font-size: 18px;
  font-weight: 800;
}

/* The short answer: bars drawn to scale. */
.gu-ladder {
  display: grid;
  gap: 12px;
}
.gu-rung {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
.gu-rung .age {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}
.gu-bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 82px;
  padding: 0 22px;
  overflow: hidden;
  border-radius: 24px;
}
.gu-bar b {
  white-space: nowrap;
  font-size: 50px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
}
.gu-bar b small {
  margin-left: 4px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
}
.gu-bar img {
  position: absolute;
  right: 14px;
  bottom: 0;
  width: 66px;
  height: auto;
}
.gu-rung.r1 .gu-bar {
  width: 32%;
  background: #ffe6d6;
  color: #a8400f;
}
.gu-rung.r2 .gu-bar {
  width: 52%;
  background: #dcf6e4;
  color: #17703a;
}
.gu-rung.r3 .gu-bar {
  width: 100%;
  background: #dcedff;
  color: #0a5dba;
}
.gu-rung.r1 .gu-bar small,
.gu-rung.r1 .gu-bar img {
  display: none;
}

/* Tables */
.gu-tbl {
  overflow-x: auto;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 0 0 2px var(--line);
}
.gu-tbl table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.45;
}
.gu-tbl th,
.gu-tbl td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
}
.gu-tbl th {
  background: var(--soft);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cd);
}
.gu-tbl td {
  border-top: 1px solid var(--soft);
}
.gu-tbl td:first-child {
  font-weight: 800;
  white-space: nowrap;
}
.gu-tbl td:nth-child(2) {
  font-size: 22px;
  font-weight: 900;
}

/* Reasons with a chart beside them */
.gu-two {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px;
  align-items: center;
}
.gu-dots {
  display: grid;
  gap: 18px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.gu-dots li {
  position: relative;
  padding-left: 34px;
  font-size: 17px !important;
  line-height: 1.6 !important;
}
.gu-dots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 3px 0 var(--acc-d);
}
.gu-dots b {
  display: block;
  font-size: 19px;
}
.gu-card {
  padding: 20px;
  border-radius: 26px;
  background: #fff;
}
.gu-card svg,
.gu-viz svg {
  display: block;
  width: 100%;
  height: auto;
}
.gu-cap {
  margin-top: 8px !important;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.4 !important;
  color: var(--ink2);
}

/* Questions */
.gu-dl {
  display: grid;
  margin: 0;
}
.gu-dl div {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 28px;
  padding: 20px 0;
  border-top: 2px solid var(--soft);
}
.gu-dl div:first-child {
  border-top: 0;
}
.gu-dl dt {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.gu-dl dd {
  margin: 0;
  font-size: 17px !important;
}

/* The four ways to link chores */
.gu-four {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.gu-opt {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 16px;
  border-radius: 24px;
  background: #fff;
}
.gu-viz {
  padding: 10px;
  border-radius: 16px;
  background: var(--soft2);
}
.gu-opt h3 {
  font-size: 18px;
  color: var(--acc);
}
.gu-opt p {
  font-size: 15px !important;
  line-height: 1.55 !important;
}
.gu-banner {
  padding: 20px 24px;
  border-radius: 22px;
  background: #fff;
  font-size: 17px !important;
  line-height: 1.65 !important;
}
.gu-banner b {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cd);
}

/* Jars and splits */
.gu-jars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.gu-jar {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 16px 12px 18px;
  border-radius: 26px;
  text-align: center;
}
.gu-jar svg {
  width: 104px;
  height: auto;
}
.gu-jar b {
  font-size: 20px;
  font-weight: 900;
}
.gu-jar .m {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.gu-jar small {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink2);
}
.gu-jar.j1 {
  background: #ffe6d6;
}
.gu-jar.j2 {
  background: #dcf6e4;
}
.gu-jar.j3 {
  background: #fff;
}
.gu-presets {
  display: grid;
  gap: 10px;
}
.gu-pr {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 110px;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-radius: 18px;
  background: #fff;
}
.gu-pr b {
  font-size: 16px;
}
.gu-pr small {
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  color: var(--ink2);
}
.gu-mini {
  display: flex;
  height: 16px;
  overflow: hidden;
  border-radius: 99px;
}
.gu-mini i {
  display: block;
  height: 100%;
}
.gu-mini .cs,
.gu-mini .cv,
.gu-mini .cg {
  display: block;
}
.cs {
  background: #e8703c;
}
.cv {
  background: #1f9a45;
}
.cg {
  background: #0a6fe0;
}
.w20 {
  width: 20%;
}
.w30 {
  width: 30%;
}
.w40 {
  width: 40%;
}
.w50 {
  width: 50%;
}
.w70 {
  width: 70%;
}
.w10 {
  width: 10%;
}

/* Paying */
.gu-big {
  max-width: 20em;
  font-size: 28px !important;
  font-weight: 900;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
}
.gu-pay3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.gu-pc {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 18px;
  border-radius: 24px;
  background: #fff;
  font-size: 18px;
  font-weight: 800;
}
.gu-ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--acc);
  box-shadow: 0 4px 0 var(--acc-d);
}
.gu-ico svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The free-week card at the bottom of a guide */
.gu-free {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 34px 38px;
  overflow: hidden;
  border-radius: 30px;
  background: var(--soft);
}
.gu-free h2 {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.gu-free p {
  max-width: 44ch;
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.6;
}
.gu-free .gu-small {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--ink2);
}
.gu-free img {
  position: absolute;
  right: 28px;
  bottom: 0;
  width: 150px;
  height: auto;
}
.gu-related {
  display: grid;
  gap: 22px;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 28px 88px;
}
.gu-related h2 {
  margin: 0;
  font-size: 36px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.gu-sqs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* A square version of a guide's card on the guides page: its colours, its pal, its title. */
.gu-sq {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  aspect-ratio: 1;
  padding: 22px 22px 20px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 28px;
  background: var(--c);
  box-shadow: 0 7px 0 var(--c2);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.gu-sq::before {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  z-index: -1;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: var(--c2);
  opacity: 0.5;
}
.gu-sq:hover {
  transform: translateY(-4px);
  box-shadow: 0 11px 0 var(--c2);
}
.gu-sq .k {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cd);
}
.gu-sq b {
  align-self: start;
  max-width: 9em;
  font-size: 23px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink);
}
.gu-sq .more {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--cd);
}
.gu-sq .more svg {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 50%;
  background: #fff;
  fill: none;
  stroke: var(--cd);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}
.gu-sq:hover .more svg {
  transform: translateX(4px);
}
.gu-sq img {
  position: absolute;
  right: 6px;
  bottom: 0;
  width: 46%;
  height: auto;
  filter: drop-shadow(0 8px 8px rgba(40, 20, 100, 0.2));
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@media (hover: hover) {
  .gu-sq:hover img {
    transform: translateY(-6px) rotate(-4deg) scale(1.05);
  }
}

/* ---------------------------------------------------------------- the guides page */
.gu-search {
  position: relative;
  width: min(640px, 100%);
  margin-top: 10px;
}
.gu-search label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.gu-search input {
  width: 100%;
  height: 68px;
  padding: 0 28px 0 64px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  box-shadow:
    0 6px 0 rgba(28, 14, 110, 0.28),
    0 18px 36px rgba(28, 14, 110, 0.3);
}
.gu-search input::placeholder {
  font-weight: 600;
  color: #8c88a8;
}
.gu-search input:focus-visible {
  outline: 4px solid #ffd43b;
  outline-offset: 2px;
}
.gu-search svg {
  position: absolute;
  left: 24px;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  fill: none;
  stroke: #5b3bf0;
  stroke-width: 2.6;
  stroke-linecap: round;
  pointer-events: none;
}
.gu-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 760px;
}
.gu-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.gu-chip i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--d);
  box-shadow: 0 0 0 2px #fff;
}
.gu-chip.d-gold {
  --d: #ffb800;
}
.gu-chip.d-green {
  --d: #30c25a;
}
.gu-chip.d-blue {
  --d: #0a84ff;
}
.gu-chip.d-coral {
  --d: #ff6b4a;
}
.gu-chip[aria-pressed="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 0 rgba(28, 14, 110, 0.28);
}
.gu-hpal {
  position: absolute;
  bottom: 0;
  z-index: 1;
  height: auto;
  filter: drop-shadow(0 10px 10px rgba(20, 10, 80, 0.3));
}
.gu-hp1 {
  left: 5%;
  width: 170px;
}
.gu-hp2 {
  right: 5%;
  width: 190px;
}
.violet .gu-copy {
  align-items: center;
  padding: 34px 0 120px;
}
.gu-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.gu-count h2 {
  font-size: 30px !important;
}
.gu-count span {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink2);
}
.gu-rows {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gu-rows > li {
  margin-bottom: 16px;
}
.gu-rows li[hidden] {
  display: none;
}
.gu-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  box-shadow:
    0 0 0 2px var(--c2),
    0 7px 0 var(--c2);
  transition: transform 0.15s ease;
}
.gu-row:hover {
  transform: translateY(-3px);
}
.gu-row .art {
  position: relative;
  min-height: 150px;
  overflow: hidden;
  isolation: isolate;
  background: var(--c);
}
.gu-row .art::before {
  content: "";
  position: absolute;
  left: -30px;
  bottom: -120px;
  z-index: -1;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--c2);
  opacity: 0.55;
}
.gu-row .art img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 104px;
  height: auto;
  margin-left: -52px;
  filter: drop-shadow(0 8px 8px rgba(40, 20, 100, 0.2));
}
.gu-row .art b {
  position: absolute;
  left: 14px;
  top: 14px;
  max-width: 9em;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cd);
}
.gu-row .mid {
  display: grid;
  gap: 6px;
  align-content: center;
  padding: 20px 22px;
}
.gu-row h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.gu-row .mid p {
  margin: 0;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--ink2);
}
.gu-row .end {
  display: grid;
  gap: 4px;
  align-content: center;
  justify-items: end;
  padding: 0 26px 0 6px;
  text-align: right;
}
.gu-row .end span {
  max-width: 8em;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--cd);
}
.gu-row .end svg {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 50%;
  background: var(--c);
  fill: none;
  stroke: var(--cd);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gu-empty {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 30px;
  border-radius: 28px;
  background: #f1edff;
  text-align: center;
  font-size: 18px;
}
.gu-empty[hidden] {
  display: none;
}
.gu-empty b {
  font-size: 22px;
}
.gu-b-wide .gu-in {
  max-width: 1000px;
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 900px) {
  .gu-hero {
    padding-top: 68px;
  }
  .gu-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 20px;
  }
  .gu-copy {
    padding-bottom: 20px;
  }
  .gu-hero h1 {
    font-size: 40px;
  }
  .violet.gu-hero h1 {
    font-size: 42px;
  }
  .gu-doors {
    grid-template-columns: 1fr;
  }
  .gu-stage {
    min-height: 420px;
    padding-top: 50px;
    padding-bottom: 90px;
  }
  .gu-st1 {
    top: auto;
    bottom: 80px;
  }
  .gu-st2 {
    top: 20px;
  }
  .gu-band {
    padding: 48px 0;
  }
  .gu-band.tight {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .gu-b-wide + .gu-band.tight {
    padding-top: 24px;
  }
  .gu-in {
    padding: 0 18px;
  }
  .gu-band h2 {
    font-size: 28px;
  }
  .gu-band p,
  .gu-band li {
    font-size: 17px;
  }
  .gu-rung {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .gu-rung.r1 .gu-bar {
    width: 44%;
  }
  .gu-rung.r2 .gu-bar {
    width: 68%;
  }
  .gu-bar b {
    font-size: 38px;
  }
  .gu-two,
  .gu-dl div,
  .gu-four,
  .gu-jars,
  .gu-pay3 {
    grid-template-columns: 1fr;
  }
  .gu-dl div {
    gap: 6px;
  }
  .gu-pr {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .gu-pr small {
    text-align: left;
  }
  .gu-big {
    font-size: 23px !important;
  }
  /* Phones: the table's rows become cards, as on the older guides. */
  .gu-tbl {
    overflow: visible;
    background: none;
    box-shadow: none;
  }
  .gu-tbl table,
  .gu-tbl tbody,
  .gu-tbl tr,
  .gu-tbl td {
    display: block;
    min-width: 0;
  }
  .gu-tbl thead {
    display: none;
  }
  .gu-tbl tr {
    margin-bottom: 12px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 0 0 2px var(--line);
  }
  .gu-tbl td,
  .gu-tbl td:first-child {
    padding: 3px 0;
    border: 0;
    white-space: normal;
  }
  .gu-tbl td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cd);
  }
  .gu-free {
    margin: 0 18px;
    padding: 26px 22px 160px;
  }
  .gu-free .gu-btn {
    width: 100%;
  }
  .gu-free img {
    right: 50%;
    width: 120px;
    margin-right: -60px;
  }
  .gu-related {
    padding: 24px 0 56px;
  }
  .gu-related h2,
  .gu-related .gu-eb {
    padding: 0 18px;
    font-size: 28px;
  }
  .gu-related .gu-eb {
    font-size: 13px;
  }
  /* Phones: the squares sit in a row you swipe along, each snapping into place. */
  .gu-sqs {
    display: flex;
    gap: 14px;
    padding: 4px 18px 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 18px;
    -webkit-overflow-scrolling: touch;
  }
  .gu-sqs > li {
    flex: 0 0 min(74%, 290px);
    scroll-snap-align: start;
  }
  .gu-b-wide {
    padding-bottom: 0;
  }
  .gu-hpal {
    display: none;
  }
  .gu-search input {
    height: 60px;
    padding-left: 56px;
    font-size: 17px;
  }
  .violet .gu-copy {
    padding-bottom: 100px;
  }
  .gu-row {
    grid-template-columns: 1fr;
  }
  .gu-row .art {
    min-height: 130px;
  }
  .gu-row .end {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px 20px;
    text-align: left;
  }
}

/* ---------------------------------------------------------------- motion */
/* On load the title comes in, then the pill lands on it like a stamp. Scrolling brings each part of a page up as it
   arrives (guides.js adds .gu-reveal, then .in). All of it is off for anyone who asks for reduced motion, and none of it
   hides anything without the script. */
@media (prefers-reduced-motion: no-preference) {
  .gu-copy > * {
    animation: gu-rise 0.6s cubic-bezier(0.2, 0.8, 0.25, 1) backwards;
  }
  .gu-copy > :nth-child(1) {
    animation-delay: 0.05s;
  }
  .gu-copy > :nth-child(2) {
    animation-delay: 0.12s;
  }
  .gu-copy > :nth-child(3) {
    animation-delay: 0.2s;
  }
  .gu-copy > :nth-child(n + 4) {
    animation-delay: 0.85s;
  }
  .gu-hero h1 {
    animation: gu-rise 0.6s 0.2s cubic-bezier(0.2, 0.8, 0.25, 1) backwards;
  }
  /* The stamp: it drops in big and tilted, lands a touch small, settles, and a ring spreads out from the hit. */
  .gu-pill {
    position: relative;
    animation: gu-stamp 0.62s 0.7s cubic-bezier(0.3, 0.9, 0.3, 1) backwards;
  }
  .gu-pill::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 3px solid currentColor;
    opacity: 0;
    animation: gu-ring 0.6s 1.05s ease-out backwards;
  }
  .gu-paper {
    animation: gu-pop 0.7s 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards;
  }
  .gu-st1 {
    animation: gu-pop-a 0.5s 1.05s cubic-bezier(0.2, 0.9, 0.3, 1.3) backwards;
  }
  .gu-st2 {
    animation: gu-pop-b 0.5s 1.2s cubic-bezier(0.2, 0.9, 0.3, 1.3) backwards;
  }
  .gu-hpal {
    animation: gu-peek 0.7s 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.1) backwards;
  }
  .gu-sp {
    animation: gu-twinkle 3.2s ease-in-out infinite;
  }
  .gu-sp.s2 {
    animation-delay: -1s;
  }
  .gu-sp.s3 {
    animation-delay: -2s;
  }

  .gu-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 0.55s ease,
      transform 0.55s cubic-bezier(0.2, 0.8, 0.25, 1);
  }
  .gu-reveal.in {
    opacity: 1;
    transform: none;
  }
  /* The scale ladder: each bar stays put and widens from its left edge to its value. */
  .gu-rung.gu-reveal {
    transform: none;
  }
  .gu-rung.gu-reveal .gu-bar {
    transition:
      width 1s 0.1s cubic-bezier(0.2, 0.8, 0.25, 1),
      padding 1s 0.1s cubic-bezier(0.2, 0.8, 0.25, 1);
  }
  .gu-rung.gu-reveal:not(.in) .gu-bar {
    width: 0;
    padding-inline: 0;
  }
  .gu-rung.gu-reveal.in:nth-child(2) .gu-bar {
    transition-delay: 0.22s;
  }
  .gu-rung.gu-reveal.in:nth-child(3) .gu-bar {
    transition-delay: 0.34s;
  }
}
@keyframes gu-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
@keyframes gu-stamp {
  0% {
    opacity: 0;
    transform: translateY(-0.7em) scale(1.9) rotate(-9deg);
  }
  55% {
    opacity: 1;
    transform: translateY(0) scale(0.92) rotate(-1deg);
    box-shadow: 0 0 0 transparent;
  }
  75% {
    transform: translateY(0) scale(1.04) rotate(-2.6deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(-2deg);
  }
}
@keyframes gu-ring {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.35, 1.7);
  }
}
@keyframes gu-pop {
  from {
    opacity: 0;
    transform: translateY(34px) rotate(10deg) scale(0.92);
  }
}
@keyframes gu-pop-a {
  from {
    opacity: 0;
    transform: rotate(-4deg) scale(0.4);
  }
}
@keyframes gu-pop-b {
  from {
    opacity: 0;
    transform: rotate(3deg) scale(0.4);
  }
}
@keyframes gu-peek {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
}
@keyframes gu-twinkle {
  50% {
    opacity: 0.35;
    transform: scale(0.8) rotate(20deg);
  }
}

/* ---------------------------------------------------------------- the guides page in motion */
.gu-row .art img {
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.gu-row .end svg {
  transition:
    transform 0.25s ease,
    background 0.2s ease;
}
.gu-chip {
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}
.gu-chip:hover {
  transform: translateY(-2px);
}
.gu-chip:active {
  transform: scale(0.95);
}
.gu-search input {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.gu-search input:focus {
  transform: scale(1.015);
}
@media (hover: hover) {
  .gu-row:hover .art img {
    transform: translateY(-8px) rotate(-4deg) scale(1.06);
  }
  .gu-row:hover .end svg {
    transform: translateX(4px);
    background: var(--c2);
  }
}
@media (prefers-reduced-motion: no-preference) {
  /* The pals along the sides of the hero settle in, then keep a slow bob. */
  .gu-hpal {
    animation:
      gu-peek 0.7s 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.1) backwards,
      gu-bob 4.5s 1.7s ease-in-out infinite;
  }
  .gu-hp2 {
    animation-delay:
      1.05s,
      2.4s;
  }
  /* Narrowing the list: a card that doesn't match folds its height away while it fades, so the cards below slide up
     with it; one that matches opens back out in turn. */
  .gu-rows > li {
    display: grid;
    grid-template-rows: 1fr;
    transition:
      grid-template-rows 0.42s cubic-bezier(0.4, 0, 0.2, 1) var(--d, 0ms),
      margin 0.42s cubic-bezier(0.4, 0, 0.2, 1) var(--d, 0ms),
      opacity 0.3s ease var(--d, 0ms),
      transform 0.42s cubic-bezier(0.4, 0, 0.2, 1) var(--d, 0ms);
  }
  .gu-rows > li > .gu-row {
    min-height: 0;
  }
  .gu-rows > li.gu-collapsed {
    grid-template-rows: 0fr;
    margin-bottom: 0;
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
  }
  .gu-bump {
    animation: gu-bump 0.4s ease-out;
  }
  .gu-chip.gu-pop {
    animation: gu-chip-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
  }
  .gu-empty:not([hidden]) {
    animation: gu-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15) backwards;
  }
}
@keyframes gu-in {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.94);
  }
}
@keyframes gu-bump {
  40% {
    transform: scale(1.25);
  }
}
@keyframes gu-chip-pop {
  0% {
    transform: scale(0.9);
  }
  60% {
    transform: scale(1.1);
  }
}
@keyframes gu-bob {
  50% {
    transform: translateY(-9px) rotate(1.5deg);
  }
}

/* ---------------------------------------------------------------- things grow to their value as they scroll in */
/* guides.js tags these (.gu-stagger, .gu-grow) and adds .in when they arrive. Untagged they simply show, so the page is
   complete without the script and for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  /* A group of things (rows of a table, questions, jars, payment ways, presets) comes up one after another. */
  .gu-stagger > * {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.5s ease,
      transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  }
  .gu-stagger.in > * {
    opacity: 1;
    transform: none;
  }
  .gu-stagger.in > :nth-child(2) {
    transition-delay: 0.08s;
  }
  .gu-stagger.in > :nth-child(3) {
    transition-delay: 0.16s;
  }
  .gu-stagger.in > :nth-child(4) {
    transition-delay: 0.24s;
  }
  .gu-stagger.in > :nth-child(5) {
    transition-delay: 0.32s;
  }
  .gu-stagger.in > :nth-child(6) {
    transition-delay: 0.4s;
  }

  /* Bars and dots in the charts: each piece (guides.js numbers them in --i) grows from its base to its value. */
  .gu-grow rect,
  .gu-grow circle {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition:
      transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.1) calc(var(--i, 0) * 70ms),
      opacity 0.4s ease calc(var(--i, 0) * 70ms);
  }
  .gu-grow:not(.in) rect[width="48"],
  .gu-grow:not(.in) rect[width="48.4"] {
    transform: scaleY(0);
  }
  .gu-grow circle {
    transform-origin: center;
  }
  .gu-grow:not(.in) circle {
    transform: scale(0);
  }
  .gu-grow:not(.in) text {
    opacity: 0;
  }
  .gu-grow text {
    transition: opacity 0.5s ease 0.5s;
  }
  /* The three-bar chart in "the same every week" is wider bars. */
  .gu-grow:not(.in) rect[width="34"] {
    transform: scaleY(0);
  }
  /* The jars fill from the bottom. */
  .gu-grow g[clip-path] rect {
    transition: transform 1s cubic-bezier(0.3, 0.8, 0.3, 1) 0.15s;
  }
  .gu-grow:not(.in) g[clip-path] rect {
    transform: translateY(60px);
  }
  /* The split bars on the presets grow out from the left. */
  .gu-mini.gu-grow i {
    transform-origin: left;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.25, 1);
  }
  .gu-mini.gu-grow:not(.in) i {
    transform: scaleX(0);
  }
  .gu-mini.gu-grow.in i:nth-child(2) {
    transition-delay: 0.12s;
  }
  .gu-mini.gu-grow.in i:nth-child(3) {
    transition-delay: 0.24s;
  }
}

/* ---------------------------------------------------------------- the chores guide: a child's view */
.gu {
  --sm: #30c25a;
  --md: #ffb800;
  --lg: #ff6b4a;
}
.gu-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
svg.gu-i {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The title's progress bar: three small jobs, two done. */
.gu-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: min(460px, 100%);
}
.gu-steps i {
  position: relative;
  height: 16px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.08);
}
.gu-steps i.d {
  background: var(--acc);
  box-shadow: 0 3px 0 var(--acc-d);
}
.gu-steps i.d::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 3px;
  width: 10px;
  height: 5px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg);
}
.gu-stl {
  display: flex;
  justify-content: space-between;
  width: min(460px, 100%);
  margin-top: -12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--brown);
}
/* The phone on the stage. */
.gu-phone {
  position: relative;
  width: 272px;
  padding: 10px;
  border-radius: 42px;
  background: #1c1a33;
  transform: rotate(3deg);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.35),
    inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}
.gu-phone.flat {
  width: 250px;
  transform: none;
}
.gu-screen {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 520px;
  padding: 18px 12px 14px;
  border-radius: 33px;
  background: #f3f2f9;
}
.gu-screen.short {
  min-height: 0;
}
.gu-ptop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0 4px;
  font-size: 15px;
}
.gu-ptop b {
  font-weight: 900;
}
.gu-spk {
  padding: 3px 9px;
  border-radius: 999px;
  background: #fff3c4;
  font-size: 12px;
  font-weight: 800;
}
.gu-pc {
  padding: 12px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(60, 56, 90, 0.1);
}
.gu-palc {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  align-items: end;
  padding-bottom: 0;
  overflow: hidden;
  background: #ffe6d6;
}
.gu-palc img {
  width: 62px;
  height: auto;
}
.gu-palc p {
  align-self: center;
  margin: 0;
  padding-bottom: 10px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}
.gu-lbl {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink2);
}
.gu-screen.short .gu-lbl {
  margin: 0;
}
.gu-jtile {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.gu-jtile div {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 4px 8px;
  border-radius: 18px;
  background: var(--soft2);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}
.gu-jtile svg {
  width: 34px;
  height: 34px;
  stroke: var(--acc);
}
.gu-jtile .ok {
  background: var(--soft3);
}
.gu-jtile .ok::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sm);
}
.gu-jtile .ok::before {
  content: "";
  position: absolute;
  right: 9px;
  top: 10px;
  z-index: 1;
  width: 8px;
  height: 4px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg);
}
.gu-prog {
  height: 12px;
  overflow: hidden;
  border-radius: 99px;
  background: #e6e3f2;
}
.gu-prog i {
  display: block;
  width: 66%;
  height: 100%;
  background: var(--sm);
}
/* The short version: four picture cards. */
.gu-rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.gu-rule {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 14px 14px 18px;
  border-radius: 26px;
  text-align: center;
}
.gu-rule .big {
  display: grid;
  place-items: center;
  width: 100%;
  margin-bottom: 6px;
  aspect-ratio: 1.15;
  border-radius: 20px;
  background: #fff;
}
.gu-rule .big svg {
  width: 56%;
  height: 56%;
}
.gu-rule .n {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.gu-rule p {
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 700;
}
.gu-rule.r1 {
  background: var(--soft);
}
.gu-rule.r1 svg {
  stroke: var(--acc);
}
.gu-rule.r2 {
  background: #ffe6d6;
}
.gu-rule.r2 svg {
  stroke: #a8400f;
}
.gu-rule.r3 {
  background: #dcedff;
}
.gu-rule.r3 svg {
  stroke: #0a5dba;
}
.gu-rule.r4 {
  background: #f1edff;
}
.gu-rule.r4 svg {
  stroke: #5b3bf0;
}
.gu-starter {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--acc);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.gu-box {
  padding: 16px 22px;
  border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--line);
  font-size: 17px !important;
  line-height: 1.65 !important;
}
/* Every job is a picture tile. */
.gu-tiles {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gu-tiles.t3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gu-tiles.t4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gu-tiles.t2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gu-pt3 {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 16px 12px 14px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 5px 0 rgba(15, 92, 44, 0.14);
  text-align: center;
}
.gu-pt3 .ic {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 28px;
}
.gu-pt3 .ic svg {
  width: 50px;
  height: 50px;
}
.gu-pt3 b {
  font-size: 17px;
  line-height: 1.2;
}
.gu-pt3 small {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink2);
}
.gu-pt4 {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 12px 10px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(15, 92, 44, 0.12);
  text-align: center;
}
.gu-pt4 .ic {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
}
.gu-pt4 .ic svg {
  width: 34px;
  height: 34px;
}
.gu-pt4 b {
  font-size: 15px;
  line-height: 1.2;
}
.gu-pt4 small {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink2);
}
.gu-pt2 {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 2px 14px;
  align-items: center;
  padding: 12px 16px 12px 12px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(15, 92, 44, 0.12);
}
.gu-pt2 .ic {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
}
.gu-pt2 .ic svg {
  width: 30px;
  height: 30px;
}
.gu-pt2 b {
  font-size: 17px;
  line-height: 1.2;
}
.gu-pt2 small {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink2);
}
.k-small .ic {
  background: #dcf6e4;
}
.k-small svg {
  stroke: #17803f;
}
.k-medium .ic {
  background: #fff0c2;
}
.k-medium svg {
  stroke: #a97800;
}
.k-big .ic {
  background: #ffe0d6;
}
.k-big svg {
  stroke: #c94a2c;
}
.gu-z {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.gu-z::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.gu-z.z-small {
  background: #dcf6e4;
  color: #17703a;
}
.gu-z.z-medium {
  background: #fff0c2;
  color: #8a5f00;
}
.gu-z.z-big {
  background: #ffe0d6;
  color: #b23a1a;
}
.gu-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 28px;
  align-items: center;
}
.gu-warn {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 22px;
  border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 2px #ffd0c2;
  font-size: 17px !important;
  line-height: 1.6 !important;
}
.gu-warn::before {
  content: "!";
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--lg);
  color: #fff;
  font-weight: 900;
}
/* How many: ten tiles filling one at a time. */
.gu-fill {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
}
.gu-fill div {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 16px;
  background: #e2efe6;
  color: #6b8f77;
  font-size: 20px;
  font-weight: 900;
}
.gu-fill .on {
  background: var(--acc);
  color: #fff;
  box-shadow: 0 4px 0 var(--acc-d);
}
.gu-fill .mid {
  background: var(--c2);
  color: #fff;
}
.gu-fill .to {
  background: var(--soft3);
  color: var(--cd);
}
.gu-fl {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: -8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink2);
}
.gu-day {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.gu-slot {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
  border-radius: 24px;
  background: var(--soft2);
}
.gu-slot b {
  font-size: 15px;
}
.gu-slot .d {
  display: grid;
  gap: 6px;
}
.gu-slot .d i {
  position: relative;
  height: 30px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 0 rgba(15, 92, 44, 0.12);
}
.gu-slot .d i::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sm);
}
.gu-sizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}
.gu-sc {
  display: grid;
  gap: 4px;
  justify-items: start;
  align-content: end;
  padding: 16px;
  border-radius: 26px;
  background: var(--soft2);
}
.gu-sc .o {
  margin-bottom: 6px;
  border-radius: 50%;
}
.gu-sc.s .o {
  width: 34px;
  height: 34px;
  background: var(--sm);
}
.gu-sc.m .o {
  width: 56px;
  height: 56px;
  background: var(--md);
}
.gu-sc.l .o {
  width: 84px;
  height: 84px;
  background: var(--lg);
}
.gu-sc b {
  font-size: 19px;
}
.gu-sc span:not(.o) {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink2);
}
/* Sharing: the job on a different child's screen each week. */
.gu-kids {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.gu-kid {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 12px 12px 0;
  overflow: hidden;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(15, 92, 44, 0.1);
  text-align: center;
}
.gu-kid .w {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acc);
}
.gu-kid img {
  width: 76px;
  height: auto;
}
.gu-kid .job {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 16px;
  background: #ffe6d6;
  font-size: 15px;
  font-weight: 900;
}
.gu-kid .job svg {
  width: 22px;
  height: 22px;
  stroke: #a8400f;
}
.gu-kid.off .job {
  background: #eef0ee;
  color: #9a9aa8;
}
.gu-kid.off .job svg {
  stroke: #a8a8b8;
}
.gu-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.gu-pcard {
  display: grid;
  gap: 4px;
  padding: 18px 22px;
  border-radius: 26px;
  background: #fff;
}
.gu-pcard b {
  font-size: 21px;
  font-weight: 900;
}
.gu-pcard span {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink2);
}
.gu-pcard.x {
  background: var(--acc);
}
.gu-pcard.x b,
.gu-pcard.x span {
  color: #fff;
}
.gu-tips {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gu-tip {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 20px;
  border-radius: 24px;
  background: var(--soft2);
}
.gu-tipi {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: var(--acc);
  box-shadow: 0 4px 0 var(--acc-d);
}
.gu-tipi svg {
  width: 28px;
  height: 28px;
  stroke: #fff;
  stroke-width: 2.4;
}
.gu-tip b {
  display: block;
  font-size: 20px;
}
.gu-tip span:not(.gu-tipi) {
  font-size: 17px;
  line-height: 1.55;
  color: #3b3860;
}
@media (max-width: 900px) {
  .gu-stage:has(.gu-phone) {
    min-height: 600px;
    padding-top: 30px;
  }
  .gu-stage:has(.gu-phone) .gu-st1 {
    top: 540px;
  }
  .gu-stage:has(.gu-phone) .gu-st2 {
    top: 30px;
  }
  .gu-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gu-tiles.t3,
  .gu-tiles.t4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gu-tiles.t2,
  .gu-duo,
  .gu-sizes,
  .gu-pair {
    grid-template-columns: 1fr;
  }
  .gu-duo .gu-phone {
    justify-self: center;
  }
  .gu-kids {
    gap: 8px;
  }
  .gu-kid .job {
    padding: 6px;
    font-size: 12px;
  }
  .gu-day {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gu-fill {
    gap: 4px;
  }
  .gu-fill div {
    border-radius: 10px;
    font-size: 13px;
  }
  .gu-fl {
    font-size: 11px;
  }
}

/* ---------------------------------------------------------------- two heroes with their own look */
/* The chores guide (.h-steps): graph-paper ground, a giant outlined tick, a ruler under "by age" and an age staircase
   with the guide's pal on top. The tied-to-chores guide (.h-yn): halftone ground, a giant outlined question mark, a
   Yes / No / A bit of both pick and a choice card. Same structure as every other guide hero. */
.h-steps {
  background:
    radial-gradient(circle at 78% 52%, rgba(255, 255, 255, 0.5), transparent 42%),
    linear-gradient(rgba(255, 255, 255, 0.2) 2px, transparent 2px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 2px, transparent 2px) 0 0 / 44px 44px,
    linear-gradient(180deg, var(--c), var(--c2));
}
.h-yn {
  background:
    radial-gradient(circle at 80% 48%, rgba(255, 255, 255, 0.45), transparent 42%),
    radial-gradient(circle, rgba(255, 255, 255, 0.3) 0 4px, transparent 5px) 0 0 / 22px 22px,
    linear-gradient(180deg, var(--c), var(--c2));
}
.h-steps .gu-copy,
.h-yn .gu-copy {
  position: relative;
}
.h-steps .gu-copy > *:not(.gu-cq):not(.gu-qm),
.h-yn .gu-copy > *:not(.gu-cq):not(.gu-qm) {
  position: relative;
  z-index: 1;
}
.gu-cq {
  position: absolute;
  top: -40px;
  right: -30px;
  z-index: 0;
  width: 300px;
  height: 300px;
  pointer-events: none;
}
.gu-qm {
  position: absolute;
  top: -34px;
  right: -10px;
  z-index: 0;
  font-size: 340px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 5px rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
.gu-ruler {
  position: relative;
  display: inline-block;
  padding-bottom: 0.3em;
}
.gu-ruler::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.04em;
  left: 0;
  height: 0.26em;
  border-radius: 0.05em;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0 3px, transparent 3px 15px) 0 100% / 100% 58% no-repeat,
    var(--acc);
  box-shadow: 0 0.05em 0 var(--acc-d);
}
.gu-poll {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 0;
}
.gu-poll span {
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 800;
  color: var(--brown);
}
.gu-poll span.on {
  background: var(--acc);
  box-shadow: 0 4px 0 var(--acc-d);
  color: var(--acc-fg);
  transform: rotate(-1.5deg);
}
/* the age staircase */
.h-steps .gu-stage {
  padding-top: 130px;
}
.gu-steps3 {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: min(410px, 100%);
}
.gu-stp {
  display: grid;
  flex: 1;
  gap: 2px;
  align-content: start;
  min-width: 0;
  padding: 14px 14px 16px;
  border-radius: 22px 22px 8px 8px;
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.14),
    0 20px 36px rgba(0, 0, 0, 0.16);
}
.gu-stp .a {
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}
.gu-stp .j {
  font-size: 13px;
  font-weight: 800;
  opacity: 0.8;
}
.gu-stp .e {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}
.gu-stp.s1 {
  height: 140px;
  background: #fff;
  color: var(--ink);
}
.gu-stp.s2 {
  height: 210px;
  background: var(--soft);
  color: var(--brown);
}
.gu-stp.s3 {
  height: 280px;
  background: var(--acc);
  color: var(--acc-fg);
}
.gu-steps3 .pal {
  position: absolute;
  right: 6px;
  bottom: 290px;
  width: 118px;
  height: auto;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.25));
}
.gu-steps3 .flag {
  position: absolute;
  right: 112px;
  bottom: 352px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--d);
  box-shadow: 0 4px 0 var(--acc-d);
  transform: rotate(-8deg);
}
.gu-steps3 .flag::after {
  content: "";
  width: 14px;
  height: 8px;
  border-bottom: 4px solid #fff;
  border-left: 4px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.h-steps .gu-st1 {
  top: 495px;
}
.h-steps .gu-st2 {
  top: 90px;
  right: auto;
  left: 4px;
  transform: rotate(-3deg);
}
/* the choice card */
.gu-choice {
  position: relative;
  display: grid;
  gap: 8px;
  width: 350px;
  padding: 24px 22px 20px;
  border-radius: 28px;
  background: #fff;
  transform: rotate(2.5deg);
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.14),
    0 24px 50px rgba(0, 0, 0, 0.2);
}
.gu-choice .pe {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acc);
}
.gu-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 16px;
  background: var(--soft2);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}
.gu-opt i {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--c2);
}
.gu-opt.on {
  background: var(--acc);
  box-shadow: 0 4px 0 var(--acc-d);
  color: var(--acc-fg);
}
.gu-opt.on i {
  background: #ffd43b;
  box-shadow: inset 0 0 0 3px #fff;
}
.gu-eg {
  margin: -2px 0 2px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--soft);
  font-size: 15px;
  font-weight: 700;
  color: var(--brown);
}
.gu-choice .pal {
  position: absolute;
  top: -62px;
  right: -18px;
  width: 96px;
  height: auto;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.25));
}
.h-yn .gu-st1 {
  top: 440px;
}
.h-yn .gu-st2 {
  top: 20px;
  right: auto;
  left: 10px;
  transform: rotate(-3deg);
}
@media (prefers-reduced-motion: no-preference) {
  .gu-stp {
    animation: gu-pop 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards;
  }
  .gu-stp.s1 {
    animation-delay: 0.45s;
  }
  .gu-stp.s2 {
    animation-delay: 0.57s;
  }
  .gu-stp.s3 {
    animation-delay: 0.69s;
  }
  .gu-steps3 .pal,
  .gu-steps3 .flag {
    animation: gu-pop 0.6s 1s cubic-bezier(0.2, 0.9, 0.3, 1.3) backwards;
  }
  .gu-choice {
    animation: gu-pop 0.7s 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards;
  }
}
@media (max-width: 900px) {
  .gu-cq {
    top: -10px;
    right: 0;
    width: 170px;
    height: 170px;
  }
  .gu-qm {
    top: -10px;
    right: 0;
    font-size: 200px;
  }
  .h-steps .gu-stage {
    padding-top: 100px;
  }
  .gu-stp.s1 {
    height: 100px;
  }
  .gu-stp.s2 {
    height: 150px;
  }
  .gu-stp.s3 {
    height: 200px;
  }
  .gu-steps3 .pal {
    bottom: 210px;
    width: 90px;
  }
  .gu-steps3 .flag {
    right: 84px;
    bottom: 262px;
  }
  .h-steps .gu-st1 {
    top: auto;
    bottom: 30px;
    left: 12px;
  }
  .h-steps .gu-st2 {
    top: 50px;
  }
  .h-yn .gu-st1 {
    top: auto;
  }
  .gu-choice {
    width: min(350px, 100%);
  }
}

/* ---------------------------------------------------------------- the tied-to-chores guide's bands */
.gu-rules.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gu-vs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.gu-vcol {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 22px 24px 8px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.08);
}
.gu-band .gu-vcol h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 26px;
}
.gu-vcol h2 i {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--acc);
  font-size: 22px;
  font-style: normal;
  font-weight: 900;
  color: var(--acc-fg);
}
.gu-vcol.no h2 i {
  background: #ff6b4a;
}
.gu-vcol ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gu-band .gu-vcol li {
  padding: 14px 0;
  border-top: 2px dashed var(--line);
  font-size: 17px;
  line-height: 1.55;
}
.gu-vcol li b {
  display: block;
  margin-bottom: 2px;
  font-size: 18px;
}
.gu-pair.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gu-pair.three .gu-pcard.m {
  box-shadow: inset 0 0 0 2px var(--line);
}
.gu-ways {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.gu-way {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 18px 22px 20px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.08);
}
.gu-way .wn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--acc);
  box-shadow: 0 3px 0 var(--acc-d);
  font-size: 18px;
  font-weight: 900;
  color: var(--acc-fg);
}
.gu-band .gu-way h3 {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.gu-band .gu-way p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink2);
}
.gu-ex {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--soft);
}
.gu-ex small {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cd);
}
.gu-ex b {
  font-size: 18px;
  line-height: 1.3;
}
.gu-band .gu-way p.suit {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cd);
}
.gu-ages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.gu-age {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px 22px 22px;
  border-radius: 26px;
  background: var(--soft);
}
.gu-age .a {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cd);
}
.gu-age .big {
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--acc);
}
.gu-band .gu-age p {
  font-size: 16px;
  line-height: 1.55;
  color: #3b3860;
}
.gu-age.mid {
  background: var(--acc);
}
.gu-age.mid .a,
.gu-age.mid .big,
.gu-age.mid h3,
.gu-band .gu-age.mid p {
  color: #fff;
}
@media (max-width: 900px) {
  .gu-rules.three,
  .gu-vs,
  .gu-pair.three,
  .gu-ways,
  .gu-ages {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- the Spend, Save and Grow guide */
/* Hero C: a white chart card with a rising green curve and three dots, each with its balance. The title gets a gold pill
   with an up arrow. Spend is orange, Save is blue and Grow is green wherever the three jars appear. */
.gu-gp {
  display: inline-flex;
  align-items: center;
  gap: 0.14em;
  padding: 0 0.16em 0.04em 0.18em;
  background: #ffd43b;
  color: #1c1a33;
  box-shadow: 0 0.07em 0 #d99a00;
}
.gu-gp svg {
  width: 0.62em;
  height: 0.62em;
  padding: 0.08em;
  border-radius: 50%;
  background: #1b8a3e;
  stroke: #fff;
  stroke-width: 3.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gu-chart {
  position: relative;
  display: grid;
  gap: 8px;
  width: 360px;
  padding: 22px 22px 18px;
  border-radius: 28px;
  background: #fff;
  transform: rotate(2.5deg);
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.14),
    0 24px 50px rgba(0, 0, 0, 0.2);
}
.gu-chart .pe {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acc);
}
.gu-chart .amt {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}
.gu-chart .amt b {
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
}
.gu-chart .amt span {
  padding: 3px 10px;
  border-radius: 99px;
  background: #dcf6e4;
  font-size: 14px;
  font-weight: 900;
  color: #17703a;
}
.gu-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.gu-chart .cx {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink2);
}
.gu-chart .pal {
  position: absolute;
  top: -66px;
  right: -22px;
  width: 96px;
  height: auto;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.25));
}
.h-chart .gu-st1 {
  top: 450px;
}
@keyframes gu-draw {
  from {
    stroke-dashoffset: 420;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .gu-chart {
    animation: gu-pop 0.7s 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards;
  }
  .gu-chart .line {
    stroke-dasharray: 420;
    animation: gu-draw 1.2s 0.9s ease-out backwards;
  }
}
@media (max-width: 900px) {
  .h-chart .gu-stage {
    padding-top: 60px;
  }
  .h-chart .gu-st1 {
    top: auto;
    bottom: 24px;
    left: 12px;
  }
  .gu-chart {
    width: min(360px, 100%);
  }
}
.gu-jars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.gu-jarc {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 18px 20px 22px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.08);
}
.gu-jv {
  display: grid;
  place-items: center;
  height: 130px;
  margin-bottom: 4px;
  border-radius: 20px;
  background: var(--soft);
}
.gu-jv svg {
  width: 90px;
  height: auto;
}
.gu-band .gu-jarc h3 {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.gu-band .gu-jarc p {
  font-size: 16px;
  line-height: 1.55;
  color: #3b3860;
}
.gu-splits {
  display: grid;
  gap: 12px;
}
.gu-split {
  display: grid;
  gap: 12px;
  padding: 16px 20px 18px;
  border-radius: 24px;
  background: var(--soft);
}
.gu-split .sh {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}
.gu-split .sh b {
  font-size: 21px;
  font-weight: 900;
}
.gu-split .sh span {
  font-size: 15px;
  font-weight: 800;
  color: var(--cd);
}
.gu-sbar {
  display: flex;
  height: 22px;
  overflow: hidden;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 0 0 3px #fff;
}
.gu-sbar i {
  display: block;
}
.gu-sbar .a {
  background: #ff7a3d;
}
.gu-sbar .b {
  background: #0a62c4;
}
.gu-sbar .c {
  background: #2fbf5b;
}
.gu-sbar .w10 {
  width: 10%;
}
.gu-sbar .w20 {
  width: 20%;
}
.gu-sbar .w30 {
  width: 30%;
}
.gu-sbar .w40 {
  width: 40%;
}
.gu-sbar .w50 {
  width: 50%;
}
.gu-sbar .w70 {
  width: 70%;
}
.gu-sa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.gu-sa span {
  display: grid;
  padding: 10px 14px;
  border-radius: 16px;
  background: #fff;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.gu-sa small {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink2);
}
.gu-ramp {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
}
.gu-ramp .a,
.gu-ramp .c {
  padding: 14px 18px;
  border-radius: 20px;
  background: var(--soft);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}
.gu-ramp b {
  display: block;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--acc);
}
.gu-ramp small {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink2);
}
.gu-ramp .bar {
  position: relative;
  height: 12px;
  border-radius: 99px;
  background: linear-gradient(90deg, #2fbf5b, var(--acc));
}
.gu-ramp .bar::after {
  content: "+5c for every $1, each month";
  position: absolute;
  top: 20px;
  right: 0;
  left: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--cd);
}
@media (max-width: 900px) {
  .gu-jars,
  .gu-sa,
  .gu-ramp {
    grid-template-columns: 1fr;
  }
  .gu-ramp .bar::after {
    position: static;
    display: block;
    margin-top: 20px;
  }
}

/* ---------------------------------------------------------------- the kids' debit card or tracker guide */
/* Hero "card and tag": "debit card" is a bank card with a chip, "tracker?" a paper tag; the stage stacks a card over a
   tracker slip with the guide's pal. Same structure as every other guide hero. */
.h-card {
  background:
    radial-gradient(circle at 80% 48%, rgba(255, 255, 255, 0.45), transparent 42%),
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(255, 255, 255, 0.16) 40px 42px),
    linear-gradient(180deg, var(--c), var(--c2));
}
.h-card h1 {
  max-width: 15ch;
  font-size: clamp(36px, 3vw + 14px, 58px);
  line-height: 1.14;
}
.gu-bc {
  position: relative;
  display: inline-block;
  padding: 0 0.3em 0.04em 1.1em;
  border-radius: 0.22em;
  background: linear-gradient(135deg, #ff9b7a, var(--acc));
  color: #fff;
  transform: rotate(-2.4deg);
  box-shadow: 0 0.07em 0 var(--acc-d);
}
.gu-bc::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.24em;
  width: 0.56em;
  height: 0.42em;
  margin-top: -0.21em;
  border-radius: 0.09em;
  background: linear-gradient(135deg, #ffe27a, #f0b800);
}
.gu-tt {
  position: relative;
  display: inline-block;
  padding: 0 0.24em 0.04em 0.5em;
  border-radius: 0.2em 0.2em 0.2em 0.5em;
  background: #fff;
  color: var(--acc-d);
  transform: rotate(2deg);
  box-shadow: 0 0.07em 0 rgba(0, 0, 0, 0.25);
}
.gu-tt::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.16em;
  width: 0.16em;
  height: 0.16em;
  margin-top: -0.08em;
  border-radius: 50%;
  background: var(--c2);
}
.gu-pile {
  position: relative;
  width: 340px;
  height: 400px;
}
.gu-dcard {
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 2;
  display: grid;
  align-content: space-between;
  width: 300px;
  height: 188px;
  padding: 18px 20px;
  border-radius: 22px;
  background: linear-gradient(135deg, #ff9b7a, var(--acc) 70%);
  color: #fff;
  transform: rotate(-9deg);
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.2),
    0 24px 40px rgba(0, 0, 0, 0.22);
}
.gu-dcard .chip {
  width: 44px;
  height: 32px;
  border-radius: 7px;
  background: linear-gradient(135deg, #ffe27a, #f0b800);
}
.gu-dcard b {
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gu-dcard .num {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.gu-slip {
  position: absolute;
  top: 170px;
  left: 46px;
  z-index: 1;
  display: grid;
  gap: 4px;
  width: 290px;
  padding: 20px 22px;
  border-radius: 24px;
  background: #fff;
  transform: rotate(5deg);
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.14),
    0 24px 40px rgba(0, 0, 0, 0.2);
}
.gu-slip .pe {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acc);
}
.gu-slip .ln {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 2px dashed var(--line);
  font-size: 16px;
  font-weight: 800;
}
.gu-slip .tk {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--d);
}
.gu-slip .tk::after {
  content: "";
  width: 11px;
  height: 6px;
  border-bottom: 3px solid #fff;
  border-left: 3px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.gu-pile .pal {
  position: absolute;
  top: 0;
  right: -10px;
  z-index: 3;
  width: 110px;
  height: auto;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.25));
}
.h-card .gu-st1 {
  top: 450px;
}
.h-card .gu-st2 {
  top: 40px;
  right: auto;
  left: 0;
  transform: rotate(-3deg);
}
@media (prefers-reduced-motion: no-preference) {
  .gu-dcard {
    animation: gu-pop 0.7s 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards;
  }
  .gu-slip {
    animation: gu-pop 0.7s 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards;
  }
}
@media (max-width: 900px) {
  .h-card .gu-st1 {
    top: auto;
    bottom: 24px;
    left: 12px;
  }
  .gu-pile {
    width: min(340px, 100%);
  }
  .gu-slip {
    left: 20px;
    width: min(290px, calc(100% - 30px));
  }
}
/* how they compare: a header and six rows */
.gu-cmp {
  display: grid;
  gap: 8px;
}
.gu-cmp .row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 8px;
}
.gu-cmp .hd span {
  display: block;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gu-cmp .hd .c {
  background: var(--acc);
  color: #fff;
}
.gu-cmp .hd .t {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--line);
  color: var(--acc-d);
}
.gu-cmp .k,
.gu-cmp .v {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  font-size: 16px;
  line-height: 1.35;
}
.gu-cmp .k {
  background: var(--soft);
  font-weight: 900;
}
.gu-cmp .v {
  background: #fff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08);
  font-weight: 700;
}
.gu-cmp .v.c {
  box-shadow:
    inset 0 0 0 2px var(--line),
    0 4px 0 rgba(0, 0, 0, 0.08);
}
.gu-when {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.gu-wcol {
  padding: 22px 24px 10px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.08);
}
.gu-band .gu-wcol h2 {
  margin-bottom: 6px;
  font-size: 26px;
}
.gu-wcol ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gu-band .gu-wcol li {
  position: relative;
  padding: 14px 0 14px 38px;
  border-top: 2px dashed var(--line);
  font-size: 17px;
  line-height: 1.55;
}
.gu-wcol li::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--acc);
}
.gu-wcol li::after {
  content: "";
  position: absolute;
  top: 23px;
  left: 8px;
  width: 10px;
  height: 6px;
  border-bottom: 3px solid #fff;
  border-left: 3px solid #fff;
  transform: rotate(-45deg);
}
.gu-wcol.t li::before {
  background: #1b8a3e;
}
.gu-ramp.path .bar::after {
  content: "a few years of practice";
}
@media (max-width: 900px) {
  .gu-when {
    grid-template-columns: 1fr;
  }
  .gu-cmp .hd {
    display: none;
  }
  .gu-cmp .row {
    grid-template-columns: 1fr;
  }
  .gu-cmp .row + .row {
    margin-top: 10px;
  }
}