/* Small brand details, separate from the pricing-card animation. */
.pbj-underline {
  position: relative;
  isolation: isolate;
  display: inline-block;
}
.pbj-underline::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -.035em -.04em;
  height: .19em;
  background: var(--pink);
  border-radius: 65% 35% 60% 40% / 55% 70% 30% 45%;
  transform: rotate(-1.3deg);
}
.pbj-note {
  font-family: "Segoe Print", "Bradley Hand", "Chalkboard SE", cursive;
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-weight: 400;
  line-height: 1.5;
  color: #803d78;
  transform: rotate(-3deg);
}
.pbj-ink-word { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .pbj-note[data-pbj-ink] .pbj-ink-word { clip-path: inset(0 100% 0 0); }
  .pbj-note[data-pbj-ink].is-written .pbj-ink-word {
    animation: pbj-write-word var(--ink-duration) linear var(--ink-delay) both;
  }
  .pbj-signoff .pbj-note[data-pbj-ink]::after { transform: scaleX(0); transform-origin: left; }
  .pbj-signoff .pbj-note[data-pbj-ink].is-written::after {
    animation: pbj-write-underline 400ms ease-out var(--ink-finish) both;
  }
}
@keyframes pbj-write-word { to { clip-path: inset(0); } }
@keyframes pbj-write-underline { to { transform: scaleX(1); } }
.pbj-dollop {
  display: inline-block;
  width: 11px;
  height: 13px;
  margin-right: .65rem;
  background: var(--pink);
  border-radius: 70% 30% 62% 38% / 68% 35% 65% 32%;
  transform: rotate(24deg);
  vertical-align: -1px;
}
.pbj-cameo {
  display: block;
  width: 112px;
  aspect-ratio: 240 / 250;
  pointer-events: none;
  user-select: none;
  flex: none;
}
.pbj-cameo > svg, .pbj-cameo > img {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.pbj-signoff {
  padding: 6.5rem 0 4rem;
  background: var(--bg);
  text-align: left;
}
.pbj-signoff-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: center;
  gap: 2rem;
  padding: clamp(2rem, 4.5vw, 3.5rem);
  border-radius: var(--radius-lg);
  background: #232528;
  color: #fff;
  border: 1px solid #423443;
}
.pbj-signoff .eyebrow { color: #f6b5d5; }
.pbj-signoff h2 {
  color: #fff;
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}
.pbj-signoff-copy > p { color: #e5dde2; max-width: 58ch; }
.pbj-signoff .btn-row { justify-content: flex-start; }
.pbj-signoff .btn-secondary { color: #fff; border-color: #ded5db; }
.pbj-signoff .btn-secondary:hover { color: var(--text); }
.pbj-signoff .pbj-note {
  color: #f6b5d5;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  max-width: 15ch;
  margin: 1.5rem 0 0;
}
.pbj-signoff .pbj-note::after {
  content: "";
  display: block;
  width: 64px;
  height: 9px;
  border-bottom: 2px solid var(--pink);
  border-radius: 0 0 50% 45%;
  margin-top: .65rem;
}
.pbj-signoff .pbj-cameo {
  position: absolute;
  top: -82px;
  right: 48px;
}
.pbj-story .pbj-note {
  color: #f6b5d5;
  font-size: 1.2rem;
  margin: 0 0 1.5rem;
}
.pbj-start-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2.75rem;
}
.pbj-start-heading h2 { max-width: 23ch; }
.pbj-start-heading .lead { margin-bottom: 0; }
.pbj-start-heading .pbj-note { margin: 0; }
.pbj-start-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pbj-start-steps > li { position: relative; min-width: 0; }
.pbj-start-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 47px;
  left: 136px;
  right: -16px;
  height: 25px;
  border-top: 2px dashed #8faab3;
  border-radius: 50%;
  transform: rotate(-5deg);
}
.pbj-start-art { width: 112px; height: auto; margin-bottom: 1.25rem; }
.pbj-start-steps h3 { font-size: 1.3rem; margin-bottom: .7rem; }
.pbj-start-steps p { color: var(--text-muted); font-size: .97rem; margin: 0; max-width: 35ch; }
@media (max-width: 900px) {
  .pbj-start-heading { grid-template-columns: minmax(0, 1fr) 160px; }
  .pbj-start-steps { gap: 1.75rem; }
  .pbj-start-steps > li:not(:last-child)::after { right: -5px; left: 120px; }
}
@media (max-width: 700px) {
  .pbj-start-heading { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-bottom: 2.5rem; }
  .pbj-start-heading .pbj-note { font-size: 1.2rem; }
  .pbj-start-steps { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .pbj-start-steps > li { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 1rem; }
  .pbj-start-steps > li:not(:last-child)::after { display: none; }
  .pbj-start-art { grid-row: 1 / span 2; width: 72px; margin: 0; }
  .pbj-start-steps h3 { margin-bottom: .5rem; }
  .pbj-start-steps p { grid-column: 2; }
}
.pbj-values { background: #e8f5fa; }
.pbj-values-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #c4dbe1;
}
.pbj-values-heading h2 { margin-bottom: 0; font-size: clamp(2rem, 3.8vw, 3rem); }
.pbj-values-heading .lead { margin: 0; max-width: 44ch; justify-self: end; }
.pbj-value {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: 3rem 0;
}
.pbj-value-heading { align-self: start; }
.pbj-value-art { width: 136px; height: auto; margin: 0 0 1.5rem; }
.pbj-value-heading h3 { font-size: clamp(1.65rem, 2.65vw, 2.25rem); line-height: 1.2; margin: 0; }
.pbj-value-copy { align-self: center; }
.pbj-value-copy p { font-size: .98rem; line-height: 1.8; color: var(--text-muted); margin: 0 0 1.15rem; }
.pbj-value-copy p:first-child { color: var(--text); font-size: 1.04rem; }
.pbj-value-copy p:last-child { margin-bottom: 0; }
.pbj-value--clear {
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  background: #fff;
  color: var(--text);
  border: 1px solid #cbdfe6;
}
.pbj-value-copy .pbj-value-promise {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding-top: 1.25rem;
  border-top: 1px solid #d6e2e5;
  font-weight: 600;
  color: #17708b;
}
.pbj-value-promise svg { width: 20px; height: 20px; flex-shrink: 0; }
@media (max-width: 820px) {
  .pbj-values-heading { grid-template-columns: 1fr; gap: 1.25rem; }
  .pbj-values-heading .lead { justify-self: start; max-width: 55ch; }
  .pbj-value { grid-template-columns: 1fr; gap: 1.75rem; }
  .pbj-value-heading { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1.25rem; align-items: center; }
  .pbj-value-art { width: 96px; margin: 0; }
}
@media (max-width: 480px) {
  .pbj-value-heading { grid-template-columns: 1fr; gap: 1rem; }
  .pbj-value-art { width: 100px; }
  .pbj-value-copy p { font-size: .95rem; line-height: 1.75; }
  .pbj-value-copy p:first-child { font-size: 1rem; }
}
.pbj-cleanup { padding: 1rem 0 4rem; }
.pbj-cleanup-inner {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  border-top: 1px solid #d9c6d3;
  border-bottom: 1px solid #d9c6d3;
  padding: 2rem 0;
}
.pbj-cleanup h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.pbj-cleanup p { color: var(--text-muted); max-width: 58ch; margin: .5rem 0 0; }
.pbj-cleanup .pbj-note { color: #803d78; font-size: 1.15rem; margin: 0 0 .7rem; }
.pbj-form-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.pbj-form-intro h2 { font-size: 1.4rem; margin-bottom: .65rem; }
.pbj-form-intro .pbj-note { font-size: 1.1rem; margin: .75rem 0 0; }
.pbj-form-intro .pbj-cameo { width: 90px; }
.pbj-form-intro + p { color: var(--text-muted); font-size: .92rem; margin-bottom: 1.5rem; }
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .pbj-cameo.is-greeting [data-pbj-arm] {
    transform-origin: 177px 119px;
    animation: pbj-detail-wave 1.6s ease-in-out 1;
  }
  .pbj-cameo.is-greeting[data-pbj-motion="settle"] {
    animation: pbj-detail-settle 1s ease-out 1;
  }
}
@keyframes pbj-detail-wave {
  0%, 100% { transform: rotate(0); }
  20%, 55% { transform: rotate(-15deg); }
  37%, 72% { transform: rotate(12deg); }
}
@keyframes pbj-detail-settle {
  0%, 100% { transform: rotate(0); }
  35% { transform: translateY(-4px) rotate(-4deg); }
  65% { transform: rotate(2deg); }
}
@media (max-width: 900px) {
  .pbj-signoff-panel { grid-template-columns: minmax(0, 1fr) 160px; gap: 1.5rem; }
  .pbj-cleanup-inner { grid-template-columns: 90px minmax(0, 1fr); }
  .pbj-cleanup .pbj-cameo { width: 90px; }
  .pbj-cleanup .btn-secondary { grid-column: 2; justify-self: start; }
}
@media (max-width: 768px) {
  .pbj-cameo { width: 76px; }
  .pbj-signoff { padding: 4.5rem 0 2.5rem; }
  .pbj-signoff-panel { grid-template-columns: minmax(0, 1fr); gap: .5rem; padding: 2rem 1.5rem; }
  .pbj-signoff .pbj-cameo { top: -55px; right: 24px; }
  .pbj-signoff .pbj-note { max-width: none; margin: 1rem 0 0; }
  .pbj-cleanup { padding-bottom: 2.5rem; }
  .pbj-cleanup-inner { gap: 1rem; grid-template-columns: 64px minmax(0, 1fr); }
  .pbj-cleanup .pbj-cameo { width: 64px; }
  .pbj-form-intro { grid-template-columns: minmax(0, 1fr) 60px; }
  .pbj-form-intro .pbj-cameo { width: 60px; }
}

/* Illustrated PB&J story cards. */
.pbj-story-art .why-card { padding-top: 1.5rem; }
.pbj-story-illustration { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; margin: 0 0 1.5rem; }
@media (min-width: 680px) and (max-width: 1023px) {
  .pbj-story-art .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .pbj-story-art .why-card { padding: 1.25rem; }
}
@media (max-width: 679px) {
  .pbj-story-art .why-grid { grid-template-columns: minmax(0, 1fr); }
  .pbj-story-illustration { max-width: 360px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pbj-story-art .why-card { transition: none; }
  .pbj-story-art .why-card:hover { transform: none; }
}