/* MTO quote wizard. One component for /quote (form "quote") and the popup (form "quote-popup").
   With JS off it is a plain one-page form. quote-wizard.js adds .qw-on and shows one question per screen.
   Also holds the /thank-you/ singing Mo stage (.ty-). Palette: royal, navy, baby blue, white, slate, light grey. */

.qw { display: grid; gap: 18px; container-type: inline-size; }
.qw [hidden] { display: none !important; }
.qpop .qw { gap: 14px; }

/* Progress: four little window panes that fill in as you go */
.qw-top { display: flex; align-items: center; gap: 14px; }
.qw-bar {
  flex: 1 1 auto; max-width: 280px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 3px;
  background: #fff; border-radius: 9px; box-shadow: 0 0 0 2px var(--navy), 0 4px 10px rgba(15, 42, 92, 0.1);
}
.qw-bar span { position: relative; height: 14px; border-radius: 4px; background: var(--mist); overflow: hidden; box-shadow: inset 0 0 0 1.5px rgba(15, 42, 92, 0.35); }
.qw-bar span::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, #EEF6FD 0%, var(--sky) 62%, #8EC3EE 100%); box-shadow: inset 0 0 0 1.5px var(--navy);
  transform: scaleX(0); transform-origin: left center; transition: transform 460ms cubic-bezier(.2, .8, .2, 1);
}
.qw-bar span::after {
  content: ""; position: absolute; top: -4px; bottom: -4px; left: 0; width: 38%; background: rgba(255, 255, 255, 0.85);
  transform: translateX(-160%) skewX(-20deg); opacity: 0;
}
.qw-bar span.on::before { transform: scaleX(1); }
.qw-bar span.on::after { animation: qw-glint 900ms 260ms ease-out both; }
.qw-bar span.now { box-shadow: inset 0 0 0 2px var(--royal); animation: qw-now 1.8s ease-in-out infinite; }
.qw-top.qw-done .qw-bar span::after { animation: qw-glint 700ms ease-out both; }
.qw-top.qw-done .qw-bar span:nth-child(2)::after { animation-delay: 90ms; }
.qw-top.qw-done .qw-bar span:nth-child(3)::after { animation-delay: 180ms; }
.qw-top.qw-done .qw-bar span:nth-child(4)::after { animation-delay: 270ms; }
@keyframes qw-glint { 0% { opacity: 1; transform: translateX(-160%) skewX(-20deg); } 100% { opacity: 1; transform: translateX(320%) skewX(-20deg); } }
@keyframes qw-now { 0%, 100% { background-color: var(--mist); } 50% { background-color: #fff; } }
.qw-of { margin: 0; flex: none; font-family: var(--head); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--royal); white-space: nowrap; }

/* Steps */
.qw-steps { position: relative; padding: 8px; margin: -8px; }
.qw-steps.qw-anim { overflow: hidden; transition: height 320ms cubic-bezier(.2, .8, .2, 1); }
.qw-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.qw-q {
  float: left; width: 100%; padding: 0; margin: 0 0 14px;
  font-family: var(--head); font-weight: 800; font-size: clamp(1.4rem, 5.6vw, 1.85rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--navy);
  text-wrap: balance;
}
.qw-q + * { clear: both; }
.qpop .qw-q { font-size: clamp(1.3rem, 5.4vw, 1.6rem); margin-bottom: 12px; }
.qw-hint { margin: -6px 0 14px; color: var(--muted); font-size: 0.98rem; }
.qw-step > * + .field, .qw-step > * + .qw-two, .qw-step > * + .qw-more, .qw-step > * + .consent, .qw-step > * + .qw-soft { margin-top: 14px; }
.qw:not(.qw-on) .qw-step + .qw-step { margin-top: 26px; padding-top: 24px; border-top: 1.5px dashed var(--line-2); }

/* Big tiles (single choice) */
.qw-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.qw-tiles.qw-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 540px) { .qw-tiles.qw-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qw-tile { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qw .qw-tile > input, .qw .qw-chip > input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: inherit;
  opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; box-shadow: none;
}
.qw-face {
  position: relative; height: 100%; min-height: 118px; display: grid; justify-items: center; align-content: center; gap: 10px;
  padding: 18px 8px 16px; border-radius: 16px; background: #fff; border: 2px solid rgba(15, 42, 92, 0.24);
  font-family: var(--head); font-weight: 700; font-size: 1.02rem; line-height: 1.15; color: var(--navy); text-align: center;
  box-shadow: 0 2px 0 rgba(15, 42, 92, 0.06);
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.qw-face::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--royal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 8'/%3E%3C/svg%3E") center / 14px no-repeat;
  transform: scale(0); transition: transform 220ms cubic-bezier(.34, 1.56, .64, 1);
}
.qw-tile:hover .qw-face { border-color: var(--royal); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 42, 92, 0.12); }
.qw-tile > input:checked + .qw-face { border-color: var(--royal); background: var(--ice); box-shadow: inset 0 0 0 1px var(--royal), 0 8px 18px rgba(29, 79, 163, 0.16); }
.qw-tile > input:checked + .qw-face::after { transform: scale(1); }
.qw-tile > input:checked + .qw-face .qw-ic { animation: qw-pop 360ms cubic-bezier(.34, 1.56, .64, 1); }
.qw-tile > input:focus-visible + .qw-face, .qw-chip > input:focus-visible + span { outline: 3px solid var(--royal); outline-offset: 3px; }
.qw-tile:active .qw-face { transform: scale(0.98); }
@keyframes qw-pop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* Window icons on the tiles */
.qw-ic { display: block; width: 58px; height: 50px; background: center / contain no-repeat; }
.qw-ic-win { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='10' y='3' width='28' height='40' rx='3' fill='%23fff' stroke='%230F2A5C' stroke-width='2.5'/%3E%3Crect x='14' y='7' width='20' height='14.5' rx='1.5' fill='%23A7D3F5' stroke='%230F2A5C' stroke-width='1.8'/%3E%3Crect x='14' y='24.5' width='20' height='14.5' rx='1.5' fill='%23A7D3F5' stroke='%230F2A5C' stroke-width='1.8'/%3E%3Cpath d='M17 17l7-7M17 34l7-7' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Crect x='20' y='21.6' width='8' height='2.8' rx='1.4' fill='%230F2A5C'/%3E%3Cpath d='M7 45h34' stroke='%230F2A5C' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.qw-ic-door { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='4' y='5' width='40' height='37' rx='3' fill='%23fff' stroke='%230F2A5C' stroke-width='2.5'/%3E%3Crect x='8' y='9' width='15' height='29' rx='1.5' fill='%23A7D3F5' stroke='%230F2A5C' stroke-width='1.8'/%3E%3Crect x='25' y='9' width='15' height='29' rx='1.5' fill='%23A7D3F5' stroke='%230F2A5C' stroke-width='1.8'/%3E%3Cpath d='M11 18l8-8M28 18l8-8' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Crect x='26.8' y='19.5' width='2.6' height='8' rx='1.3' fill='%230F2A5C'/%3E%3Cpath d='M2 45h44' stroke='%230F2A5C' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.qw-ic-both { width: 74px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 48'%3E%3Crect x='3' y='11' width='21' height='29' rx='2.5' fill='%23fff' stroke='%230F2A5C' stroke-width='2.5'/%3E%3Crect x='6.5' y='14.5' width='14' height='9.5' rx='1' fill='%23A7D3F5' stroke='%230F2A5C' stroke-width='1.6'/%3E%3Crect x='6.5' y='27' width='14' height='9.5' rx='1' fill='%23A7D3F5' stroke='%230F2A5C' stroke-width='1.6'/%3E%3Crect x='29' y='5' width='33' height='37' rx='3' fill='%23fff' stroke='%230F2A5C' stroke-width='2.5'/%3E%3Crect x='32.5' y='8.5' width='12' height='30' rx='1.2' fill='%23A7D3F5' stroke='%230F2A5C' stroke-width='1.6'/%3E%3Crect x='46.5' y='8.5' width='12' height='30' rx='1.2' fill='%23A7D3F5' stroke='%230F2A5C' stroke-width='1.6'/%3E%3Crect x='47.8' y='19.5' width='2.2' height='7' rx='1.1' fill='%230F2A5C'/%3E%3Cpath d='M1 45h64' stroke='%230F2A5C' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.qw-ic-n { height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 22'%3E%3Crect x='1' y='1' width='20' height='20' rx='2.5' fill='%230F2A5C'/%3E%3Crect x='4' y='4' width='6.3' height='6.3' fill='%23A7D3F5'/%3E%3Crect x='11.7' y='4' width='6.3' height='6.3' fill='%23A7D3F5'/%3E%3Crect x='4' y='11.7' width='6.3' height='6.3' fill='%23A7D3F5'/%3E%3Crect x='11.7' y='11.7' width='6.3' height='6.3' fill='%23A7D3F5'/%3E%3C/svg%3E"); background-size: 28px 22px; background-repeat: repeat-x; background-position: left center; }
.qw-ic-n1 { width: 22px; }
.qw-ic-n2 { width: 50px; }
.qw-ic-n3 { width: 78px; }
.qw-ic-n4 { width: 106px; }
.qw-4 .qw-face { min-height: 104px; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; }

/* Chips (pick all that fit) */
.qw-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.qw-chip { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qw-chip > span {
  display: inline-flex; align-items: center; gap: 9px; min-height: 50px; padding: 0 18px 0 12px; border-radius: 999px;
  background: #fff; border: 2px solid rgba(15, 42, 92, 0.24); color: var(--navy);
  font-family: var(--head); font-weight: 700; font-size: 0.98rem; line-height: 1.15;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.qw-chip > span::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(15, 42, 92, 0.32); background: #fff center / 13px no-repeat;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.qw-chip:hover > span { border-color: var(--royal); }
.qw-chip:active > span { transform: scale(0.97); }
.qw-chip > input:checked + span { background: var(--royal); border-color: var(--royal); color: #fff; }
.qw-chip > input:checked + span::before {
  border-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D4FA3' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 8'/%3E%3C/svg%3E");
  animation: qw-pop 320ms cubic-bezier(.34, 1.56, .64, 1);
}

/* Text fields */
.qw-two { display: grid; gap: 14px; }
@container (min-width: 520px) {
  .qw-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .qw-two.qw-addr { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}
.qw .field textarea { min-height: 88px; }
.qw .field input, .qw .field select, .qw .field textarea { font-size: 1.05rem; }
.qw .field input[aria-invalid="true"], .qw .field textarea[aria-invalid="true"] { border-color: var(--royal); box-shadow: 0 0 0 4px rgba(29, 79, 163, 0.16); background: var(--ice); }
.qw-ferr, .qw-err, .qw-status {
  display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--navy); font-weight: 700; font-size: 0.95rem; line-height: 1.4;
}
.qw-ferr::before, .qw-err::before, .qw-status::before {
  content: "!"; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--royal); color: #fff;
  font-family: var(--head); font-weight: 800; font-size: 0.8rem; line-height: 20px; text-align: center;
}
.qw-err { margin-top: 12px; }
.qw-status { padding: 12px 14px; border-radius: 12px; background: var(--ice); border-left: 5px solid var(--royal); }
.qw-status a { color: var(--royal); }
.qw-soft {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 0; padding: 12px 14px; border-radius: 0 12px 12px 0;
  background: var(--ice); border-left: 5px solid var(--sky); color: var(--navy); font-size: 0.97rem; line-height: 1.45;
}
.qw-soft::before {
  content: ""; flex: none; width: 20px; height: 22px; margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M10 21C5 15 2.5 11.5 2.5 8a7.5 7.5 0 0 1 15 0c0 3.5-2.5 7-7.5 13z' fill='%231D4FA3'/%3E%3Ccircle cx='10' cy='8' r='3' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}
.qw-shake { animation: qw-shake 360ms ease; }
@keyframes qw-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }

/* Optional extras (email, best time, how you heard) */
.qw-more { border-radius: 14px; background: var(--off); }
.qw-more summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: 0 14px; cursor: pointer; list-style: none;
  font-family: var(--head); font-weight: 700; font-size: 0.95rem; color: var(--navy); border-radius: 14px;
}
.qw-more summary::-webkit-details-marker { display: none; }
.qw-more summary::after {
  content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--royal);
  font-size: 1.25rem; line-height: 28px; text-align: center; box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.qw-more[open] summary::after { content: "\2013"; background: var(--royal); color: #fff; box-shadow: none; }
.qw-more .opt { font-family: var(--body); font-weight: 400; color: var(--muted); }
.qw-more-in { display: grid; gap: 14px; padding: 4px 14px 16px; }
.qw .consent a { display: inline-block; padding: 12px 2px; margin: -12px -2px; }

/* Back / Next / Send */
.qw-nav { display: flex; gap: 10px; align-items: stretch; }
.qw-nav .btn { flex: 1 1 auto; margin: 0; }
.qw-back {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 54px; min-width: 54px; padding: 0 18px 0 14px;
  border-radius: 999px; border: 2px solid rgba(15, 42, 92, 0.28); background: #fff; color: var(--navy); cursor: pointer;
  font-family: var(--head); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.05em; text-transform: uppercase;
  transition: border-color 140ms ease, background-color 140ms ease; -webkit-tap-highlight-color: transparent;
}
.qw-back:hover { border-color: var(--royal); background: var(--ice); }
.qw-back svg, .qw-next svg { width: 18px; height: 18px; flex: none; }
.qw-next svg { transition: transform 160ms ease; }
.qw-next:hover svg { transform: translateX(3px); }
.qw-send[disabled] { opacity: 0.75; cursor: progress; }

/* Slide between steps */
.qw-step.qw-in-f { animation: qw-in-f 340ms cubic-bezier(.2, .8, .2, 1) both; }
.qw-step.qw-in-b { animation: qw-in-b 340ms cubic-bezier(.2, .8, .2, 1) both; }
.qw-step.qw-out-f, .qw-step.qw-out-b { position: absolute; top: 8px; left: 8px; right: 8px; pointer-events: none; }
.qw-step.qw-out-f { animation: qw-out-f 260ms ease both; }
.qw-step.qw-out-b { animation: qw-out-b 260ms ease both; }
@keyframes qw-in-f { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes qw-in-b { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@keyframes qw-out-f { to { opacity: 0; transform: translateX(-36px); } }
@keyframes qw-out-b { to { opacity: 0; transform: translateX(36px); } }

/* Popup card around the wizard */
.qpop .qpop-card.qw-card { max-width: 500px; padding: 22px 18px 16px; }
.qw-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding-right: 44px; }
.qw-head .qpop-badge { width: 52px; height: 52px; margin: 0; flex: none; }
.qw-head h3 { font-size: 1.22rem; margin: 0 0 2px; padding-right: 0; }
.qw-head p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.4; }
.qpop .qw-card .qpop-alt { margin-top: 8px; }
@media (min-width: 560px) { .qpop .qpop-card.qw-card { padding: 26px 26px 18px; } }

@media (prefers-reduced-motion: reduce) {
  .qw-step.qw-in-f, .qw-step.qw-in-b, .qw-step.qw-out-f, .qw-step.qw-out-b, .qw-shake,
  .qw-bar span.on::after, .qw-bar span.now, .qw-top.qw-done .qw-bar span::after,
  .qw-tile > input:checked + .qw-face .qw-ic, .qw-chip > input:checked + span::before { animation: none; }
  .qw-steps.qw-anim, .qw-bar span::before, .qw-face, .qw-face::after, .qw-chip > span { transition: none; }
  .qw-tile:hover .qw-face, .qw-tile:active .qw-face, .qw-chip:active > span { transform: none; }
}

/* ---------- Thank you: Mo sings ---------- */
.ty-stage {
  position: relative; overflow: hidden; padding: 44px 0 58px; color: #fff;
  background: radial-gradient(ellipse 70% 60% at 50% 34%, rgba(29, 79, 163, 0.9), rgba(15, 42, 92, 0) 70%), var(--navy);
}
.ty-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--pin-dark);
}
.ty-stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
  background: linear-gradient(var(--royal) 0 6px, #fff 6px 8px, var(--sky) 8px 12px);
}
.ty-in { position: relative; z-index: 1; display: grid; gap: 22px; justify-items: center; text-align: center; }
.ty-art { position: relative; width: min(58vw, 230px); padding-top: 40px; }
.ty-glow {
  position: absolute; inset: -6% -34% -10%; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(167, 211, 245, 0.42), rgba(29, 79, 163, 0.32) 52%, rgba(29, 79, 163, 0) 100%);
}
.ty-mo { position: relative; z-index: 1; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 26px rgba(167, 211, 245, 0.35)); }
.ty-bob { transform-box: fill-box; transform-origin: 50% 50%; animation: ty-bob 3.2s ease-in-out infinite; }
@keyframes ty-bob { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(0, -6px) rotate(-8deg); } }
.ty-notes { position: absolute; z-index: 2; left: 66%; top: calc(40px + 13%); width: 0; height: 0; pointer-events: none; }
.ty-n {
  position: absolute; left: -11px; top: -15px; width: var(--w, 22px); height: auto; color: var(--c, var(--sky)); opacity: 0;
  filter: drop-shadow(0 0 8px rgba(167, 211, 245, 0.55));
  animation: ty-rise var(--d, 5.6s) var(--t, 0s) cubic-bezier(.3, .6, .4, 1) infinite;
}
.ty-n1 { --dx: 34px; --dy: -150px; --sw: 16px; --t: 0.1s; --d: 5.2s; --c: #fff; }
.ty-n2 { --dx: 78px; --dy: -118px; --sw: -14px; --t: 0.9s; --d: 5.8s; --w: 30px; }
.ty-n3 { --dx: -26px; --dy: -168px; --sw: 18px; --t: 1.8s; --d: 6.2s; --c: #fff; --w: 18px; }
.ty-n4 { --dx: 104px; --dy: -64px; --sw: 12px; --t: 2.6s; --d: 5.4s; --w: 26px; }
.ty-n5 { --dx: 10px; --dy: -190px; --sw: -18px; --t: 3.5s; --d: 6.4s; --c: #fff; --w: 28px; }
.ty-n6 { --dx: 62px; --dy: -160px; --sw: 14px; --t: 4.3s; --d: 5.6s; --w: 20px; }
@keyframes ty-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(0.45) rotate(-12deg); }
  14% { opacity: 1; }
  45% { transform: translate(calc(var(--dx) * 0.45 + var(--sw)), calc(var(--dy) * 0.45)) scale(0.85) rotate(10deg); }
  75% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(-8deg); }
}
.ty-copy { max-width: 34rem; }
.ty-copy .eyebrow { color: var(--sky); justify-content: center; }
.ty-copy h1 { color: #fff; font-size: clamp(2.3rem, 9.4vw, 4rem); margin: 6px 0 14px; text-wrap: balance; }
.ty-copy .lede { color: rgba(255, 255, 255, 0.88); margin: 0 auto 22px; text-wrap: balance; }
.ty-call { min-width: min(100%, 300px); }
@media (min-width: 900px) {
  .ty-stage { padding: 64px 0 84px; }
  .ty-in { grid-template-columns: 320px minmax(0, 1fr); gap: 64px; align-items: center; justify-items: start; text-align: left; max-width: 1000px; }
  .ty-art { width: 300px; padding-top: 56px; justify-self: center; }
  .ty-notes { top: calc(56px + 13%); }
  .ty-copy .eyebrow { justify-content: flex-start; }
  .ty-copy .lede { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ty-bob, .ty-n { animation: none; }
  .ty-n { opacity: 0.9; transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.5)) scale(0.8) rotate(6deg); }
  .ty-n4, .ty-n5, .ty-n6 { display: none; }
}