/* Hero-only revision: the catchphrase itself is the breakout wall. */
.hero--refresh .hero__content {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0;
}
.hero--refresh .hero__copy {
  width: 100%;
  max-width: none;
  padding: 0;
}
.hero--refresh .hero__eyebrow { margin-bottom: 18px; }
.hero--refresh .hero__title {
  max-width: none;
  font-size: clamp(75px, 8.8vw, 138px);
  line-height: .96;
  letter-spacing: -.08em;
}
.breakout__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(240px, .7fr);
  gap: clamp(20px, 4vw, 65px);
  align-items: center;
}
.breakout__photo {
  position: relative;
  justify-self: end;
  width: min(100%, 480px);
  aspect-ratio: 1.15;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: #d2d0c9;
  box-shadow: 10px 10px 0 rgba(23,24,20,.22);
  transition: background-color .28s ease;
}
.breakout__photo-scene {
  position: absolute;
  inset: 9% 9% 21%;
  overflow: hidden;
  border: 1px solid #aaa9a2;
  background: linear-gradient(140deg, #deddd7, #c1c1bb);
}
.breakout__photo-scene i {
  position: absolute;
  display: block;
  transition: inset .3s ease, width .3s ease, height .3s ease, background-color .3s ease;
}
.breakout__photo-scene i:first-child {
  top: 13%;
  left: 17%;
  width: 35%;
  height: 52%;
  border-radius: 50% 50% 30% 30%;
  background: #aaa9a2;
}
.breakout__photo-scene i:last-child {
  right: 7%;
  bottom: -11%;
  width: 73%;
  height: 42%;
  border-radius: 45% 45% 0 0;
  background: #999a96;
}
.breakout__photo-meta {
  position: absolute;
  top: 15px;
  right: 15px;
  display: grid;
  gap: 3px;
  min-width: 68px;
  padding: 7px 9px;
  border: 1px solid #777974;
  color: #555752;
  background: rgba(255,255,255,.62);
  font-family: Arial, sans-serif;
  text-align: right;
}
.breakout__photo-meta small { font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.breakout__photo-meta b { font-size: 11px; line-height: 1; }
.breakout__photo-hits { display: flex; justify-content: flex-end; gap: 4px; margin-top: 2px; }
.breakout__photo-hits i { width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; }
.breakout__photo[data-hits="1"] .breakout__photo-hits i:first-child,
.breakout__photo[data-hits="2"] .breakout__photo-hits i:nth-child(-n+2) { background: currentColor; }
.breakout__photo-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px 13px;
  border-top: 1px solid #9d9e98;
  color: #555752;
  background: #e5e4df;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
}
.breakout__photo[data-photo-index="1"] { background: #c6cacb; }
.breakout__photo[data-photo-index="1"] .breakout__photo-scene { background: linear-gradient(30deg, #b5bcbf, #e0e2df); }
.breakout__photo[data-photo-index="1"] .breakout__photo-scene i:first-child { top: 18%; left: 54%; width: 29%; height: 44%; background: #a3aab0; }
.breakout__photo[data-photo-index="1"] .breakout__photo-scene i:last-child { right: 39%; width: 70%; height: 53%; background: #959da0; }
.breakout__photo[data-photo-index="2"] { background: #d0c8c5; }
.breakout__photo[data-photo-index="2"] .breakout__photo-scene { background: linear-gradient(160deg, #e2d9d4, #bcb7b4); }
.breakout__photo[data-photo-index="2"] .breakout__photo-scene i:first-child { top: 9%; left: 38%; width: 27%; height: 38%; background: #aaa5a1; }
.breakout__photo[data-photo-index="2"] .breakout__photo-scene i:last-child { right: 17%; width: 62%; height: 59%; background: #97928f; }
.breakout__photo.is-flashing { animation: photo-hit .38s ease-out; }
@keyframes photo-hit {
  0% { filter: brightness(1.3); }
  100% { filter: brightness(1); }
}
.hero--refresh .hero__title > span {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}
.hero--refresh .hero__title .breakout__brick {
  display: inline-block;
  white-space: pre;
  font-weight: 800;
  transform-origin: center;
  transition: opacity .2s, transform .2s;
}
.hero--refresh .hero__title > span:first-child .breakout__brick:nth-child(n+2):nth-child(-n+5) {
  color: #d72435;
  font-weight: 900;
  -webkit-text-stroke: 1.7px currentColor;
}
.hero--refresh .hero__title > span:nth-child(2) .breakout__brick:nth-child(n+2):nth-child(-n+5) {
  color: var(--blue);
  font-weight: 900;
  -webkit-text-stroke: 1.7px currentColor;
}
.hero--refresh .hero__title > span:nth-child(-n+2) .breakout__brick:is(:first-child, :nth-child(6)) {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .66em;
  font-weight: 700;
  letter-spacing: -.13em;
  vertical-align: .14em;
  -webkit-text-stroke: 0;
}
.hero--refresh .hero__title > span:nth-child(-n+2) .breakout__brick:nth-child(7) {
  margin-left: .06em;
  color: var(--ink);
  font-size: .78em;
  font-weight: 700;
  -webkit-text-stroke: 0;
}
.hero--refresh .hero__title .breakout__brick.is-hit {
  opacity: .16;
  transform: scale(.8) rotate(-8deg);
}
.breakout {
  position: relative;
  width: 100%;
  padding-bottom: 87px;
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.breakout:focus { outline: none; }
.breakout:focus-visible .breakout__paddle { box-shadow: 0 0 0 4px rgba(23,24,20,.35); }
.breakout__field {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.breakout__tap-hint {
  position: absolute;
  z-index: 3;
  bottom: 34px;
  left: calc(50% + 72px);
  padding: 5px 8px 4px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 99px;
  color: var(--ink);
  background: rgba(255,253,248,.82);
  font: 900 12px/1 Arial, sans-serif;
  letter-spacing: .12em;
  white-space: nowrap;
  transform: rotate(-8deg);
  animation: tap-hint-bob 1.8s ease-in-out infinite;
  transition: opacity .25s ease;
}
.breakout__tap-hint::after { content: "↖"; margin-left: 5px; font-size: 13px; }
.breakout.has-started .breakout__tap-hint { opacity: 0; animation: none; }
@keyframes tap-hint-bob {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-5px) rotate(-8deg); }
}
.breakout__point {
  position: absolute;
  z-index: 6;
  padding: 4px 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--white);
  background: var(--blue);
  box-shadow: 2px 2px 0 var(--ink);
  font: 900 clamp(15px, 1.6vw, 22px)/1 Arial, sans-serif;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: point-float .9s ease-out forwards;
}
.breakout__perfect {
  position: absolute;
  z-index: 7;
  top: 42%;
  left: 50%;
  padding: .18em .4em .22em;
  border: 4px solid var(--ink);
  color: var(--white);
  background: var(--blue);
  box-shadow: 8px 9px 0 var(--ink);
  font: 900 clamp(33px, 6.2vw, 92px)/1 Arial, sans-serif;
  letter-spacing: -.06em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6) rotate(-7deg);
}
.breakout__perfect::before,
.breakout__perfect::after {
  content: "✦";
  position: absolute;
  color: var(--white);
  font-size: .5em;
  text-shadow: 2px 2px 0 var(--blue);
}
.breakout__perfect::before { top: -.8em; left: -.6em; }
.breakout__perfect::after { right: -.7em; bottom: -.7em; }
.breakout.is-perfect .breakout__perfect {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(-7deg);
  animation: perfect-pop .55s cubic-bezier(.2,1.7,.4,1) both;
}
@keyframes point-float {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.7); }
  20% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(1.08); }
}
@keyframes perfect-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(-14deg); }
  65% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(-5deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-7deg); }
}
.breakout__ball {
  position: absolute;
  z-index: 2;
  width: 16px;
  height: 16px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 2px 2px 0 var(--ink);
  transform: translate(-50%, -50%);
}
.breakout__ball--extra { background: var(--red); }
.breakout.is-fast .breakout__ball { background: var(--red); box-shadow: 0 0 0 4px rgba(200,63,43,.2), 2px 2px 0 var(--ink); }
.breakout__paddle {
  position: absolute;
  bottom: 16px;
  left: 50%;
  width: 100px;
  height: 13px;
  border: 2px solid var(--ink);
  border-radius: 99px;
  background: var(--blue);
  transform: translateX(-50%);
}
.breakout__paddle.is-wide { width: min(300px, calc(100% - 12px)); }
.breakout__bonus {
  position: absolute;
  z-index: 8;
  bottom: 48px;
  left: 50%;
  padding: 8px 13px;
  border: 2px solid var(--ink);
  border-radius: 99px;
  color: var(--white);
  background: var(--blue);
  box-shadow: 3px 3px 0 var(--ink);
  font: 900 clamp(14px, 1.5vw, 19px)/1 Arial, sans-serif;
  letter-spacing: .03em;
  white-space: nowrap;
  transform: translateX(-50%);
  animation: breakout-bonus 1.4s ease-out forwards;
}
.breakout__bonus--wide { background: var(--green); }
.breakout__bonus--speed { background: var(--red); }
@keyframes breakout-bonus {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); }
  18%, 75% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -18px) scale(1); }
}
.breakout::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 9px;
  left: 0;
  border-bottom: 1px solid rgba(23,24,20,.35);
  pointer-events: none;
}
.hero--refresh .hero__lead { margin-top: 19px; }
.hero--refresh .hero__roadmap { max-width: 800px; margin-top: 19px; }
.hero--refresh .hero__line { width: min(60vw, 850px); opacity: .3; }
.hero--refresh .hero__outline { opacity: .35; }

@media (max-width: 767px) {
  .hero--refresh .hero__content {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    align-items: center;
    padding-top: 125px;
    padding-bottom: 65px;
  }
  .hero--refresh .hero__copy { padding: 0; }
  .hero--refresh .hero__title {
    font-size: clamp(44px, 14.1vw, 66px);
    line-height: 1.01;
    letter-spacing: -.085em;
  }
  .breakout__layout { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .breakout__photo { width: min(53%, 210px); aspect-ratio: 1.36; box-shadow: 6px 6px 0 rgba(23,24,20,.2); }
  .breakout__photo-meta { top: 8px; right: 8px; min-width: 50px; padding: 4px 6px; }
  .breakout__photo-meta small { font-size: 7px; }
  .breakout__photo-meta b { font-size: 9px; }
  .breakout__photo-hits { gap: 3px; margin-top: 1px; }
  .breakout__photo-hits i { width: 5px; height: 5px; }
  .breakout__photo-caption { padding: 5px 8px; font-size: 8px; }
  .hero--refresh .hero__title > span:nth-child(-n+2) .breakout__brick:nth-child(n+2):nth-child(-n+5) {
    -webkit-text-stroke-width: 1px;
  }
  .hero--refresh .hero__eyebrow { margin-bottom: 14px; }
  .breakout { padding-bottom: 66px; }
  .breakout__ball { width: 13px; height: 13px; border-width: 2px; }
  .breakout__paddle { bottom: 12px; width: 72px; height: 11px; }
  .breakout__paddle.is-wide { width: min(216px, calc(100% - 12px)); }
  .breakout__bonus { bottom: 40px; padding: 6px 10px; font-size: 13px; }
  .breakout__tap-hint { bottom: 28px; left: calc(50% + 53px); font-size: 11px; }
  .breakout::after { bottom: 6px; }
  .hero--refresh .hero__lead { margin-top: 14px; }
  .hero--refresh .hero__roadmap { margin-top: 17px; }
  .hero--refresh .hero__line { width: 100%; opacity: .25; }
}
@media (max-width: 380px) {
  .hero--refresh .hero__title { font-size: 14vw; }
}
@media (prefers-reduced-motion: reduce) {
  .hero--refresh .hero__title .breakout__brick { transition: none; }
  .breakout__point, .breakout.is-perfect .breakout__perfect { animation: none; }
  .breakout__point { opacity: 1; }
  .breakout__photo, .breakout__photo-scene i { transition: none; animation: none; }
  .breakout__tap-hint { animation: none; }
  .breakout__bonus { animation: none; }
}