.to-a { --ink: #143e38; --green: #236e5f; --muted: #4d6961; --loop: 16s; max-width: 1400px; margin: auto; padding: 38px 6% 52px; }
.to-a h2, .to-a p { margin: 0; }
.to-a-copy { text-align: center; max-width: 1030px; margin: auto; }
.to-a h2 { font-size: clamp(32px, 4.35vw, 61px); font-weight: 550; line-height: 1.09; letter-spacing: -.045em; text-wrap: balance; }
.to-a h2 span { color: var(--green); }
.to-a-story { max-width: 1050px; margin: 22px auto 0; border-radius: 32px; background: #edf5f0; padding: 10px 4% 26px; overflow: hidden; }
.to-a-before, .to-a-after { grid-area: 1 / 1; }
.to-a-before { animation: toa-before var(--loop) linear infinite; }
.to-a-after { animation: toa-after var(--loop) linear infinite; }
.to-a-field { container-type: inline-size; position: relative; width: 100%; height: clamp(350px, 38vw, 475px); }
.to-a-system { position: absolute; inset: 9% 5% 4%; border: 1px solid #bad4c5; background: #f7fcf9; border-radius: 22px; box-shadow: 0 12px 28px #143e3808; animation: toa-system var(--loop) ease infinite; }
.to-a-system-title { position: absolute; top: 6%; left: 6%; right: 6%; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: clamp(14px, 1.5vw, 18px); font-weight: 550; }
.to-a-system-title span { font-size: 12px; color: var(--green); padding: 5px 9px; border-radius: 6px; background: #e2f0e7; font-weight: 450; }
.to-a-system-footer { position: absolute; bottom: 7%; left: 0; right: 0; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); }
.to-a-system-footer i { width: 3px; height: 3px; border-radius: 50%; background: #83a395; }
.to-a-tangle { position: absolute; inset: 0; animation: toa-tangle var(--loop) linear infinite; }
.to-a-tangle svg { width: 100%; height: 100%; }
.to-a-error { font-size: 12px; line-height: 1.25; color: #975039; background: #f9ebe4; border-radius: 5px; padding: 5px 9px; }
.to-a-cross { position: absolute; width: 22px; height: 22px; transform: translate(-50%, -50%); }
.to-a-cross > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 6px; background: #f9ebe4; color: #b95143; font: 600 23px/1 Arial, sans-serif; animation: toa-cross 2.4s ease-in-out infinite; animation-delay: var(--pulse-delay, 0s); }
.to-a-tile { position: absolute; left: var(--x); top: var(--y); width: 27%; height: 16.5%; background: #fbfdfc; border: 1px solid #d5e3db; border-radius: 12px; box-shadow: 0 7px 14px #143e380b; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; padding: 11px 12px; gap: 10px; animation: toa-tile var(--loop) cubic-bezier(.65,0,.2,1) infinite; }
.to-a-app-icon { display: block; width: 40px; height: 40px; border: 0; }
.to-a-tile-copy { min-width: 0; }
.to-a-tile strong { display: block; font-size: clamp(13px, 1.4vw, 17px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.to-a-tile-status { display: grid; margin-top: 4px; }
.to-a-fee, .to-a-included { grid-area: 1 / 1; font-size: 12px; line-height: 1.2; }
.to-a-fee { color: #91604c; animation: toa-before var(--loop) linear infinite; }
.to-a-fee small { font-size: 10px; padding-left: 2px; }
.to-a-included { color: var(--green); animation: toa-after var(--loop) linear infinite; }
.to-a-included b { font-weight: 400; margin-left: 3px; }
.to-a-more { position: absolute; bottom: -1%; left: 7%; right: 7%; display: flex; justify-content: center; gap: 9px; font-size: 11px; color: #758d80; animation: toa-tangle var(--loop) linear infinite; }
.to-a-more span { background: #f5faf6; padding: 6px 12px; border-radius: 6px; border: 1px dashed #c8d9ce; }
.to-a-outcome { display: grid; text-align: center; margin-top: 23px; min-height: 63px; }
.to-a-outcome > div { display: flex; flex-direction: column; gap: 7px; align-items: center; }
.to-a-cost { font-size: 28px; letter-spacing: .02em; color: #92644f; line-height: 1; }
.to-a-cost i { font-style: normal; color: #aeafa0; margin-inline: 8px; font-weight: 300; }
.to-a-outcome strong { font-size: clamp(27px, 3vw, 36px); font-weight: 550; line-height: 1; letter-spacing: -.035em; color: var(--green); }
.to-a-outcome-label { color: var(--muted); font-size: 14px; }
.to-a-benefits { display: flex; justify-content: center; gap: 30px; margin-top: 26px; font-size: 14px; color: var(--muted); }
.to-a-benefits span::before { content: '✓'; margin-right: 8px; color: var(--green); }
@keyframes toa-tile { 0%, 27%, 100% { transform: translate(calc(-50% + var(--dx) * 1cqw), calc(-50% + var(--dy) * 1cqw)) rotate(var(--tilt)); } 43%, 87% { transform: translate(-50%, -50%) rotate(0); } }
@keyframes toa-before { 0%, 27%, 97%, 100% { opacity: 1; } 34%, 91% { opacity: 0; } }
@keyframes toa-after { 0%, 40%, 94%, 100% { opacity: 0; } 48%, 86% { opacity: 1; } }
@keyframes toa-system { 0%, 31%, 98%, 100% { opacity: 0; transform: scale(.95); } 43%, 87% { opacity: 1; transform: scale(1); } }
@keyframes toa-tangle { 0%, 27%, 99%, 100% { opacity: 1; } 35%, 93% { opacity: 0; } }
@keyframes toa-cross { 0%, 100% { opacity: .65; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.06); } }
[data-paused="true"] .to-a *, [data-paused="true"] .to-a *::before,
#agency-site[data-motion="paused"] .to-a *, #agency-site[data-motion="paused"] .to-a *::before { animation-play-state: paused !important; }
@media (max-width: 700px) {
  .to-a { padding: 28px 18px 34px; }
  .to-a h2 { font-size: clamp(31px, 6.4vw, 44px); }
  .to-a-story { margin-top: 18px; border-radius: 22px; padding: 8px 8px 22px; }
  .to-a-field { height: 520px; }
  .to-a-tile { width: 28%; height: 18%; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; padding: 7px 4px; gap: 5px; text-align: center; }
  .to-a-app-icon { width: 28px; height: 28px; }
  .to-a-tile-copy { width: 100%; }
  .to-a-tile strong { font-size: clamp(11px, 3.1vw, 15px); font-weight: 500; }
  .to-a-tile-status { margin-top: 3px; }
  .to-a-fee, .to-a-included { font-size: 10px; }
  .to-a-system { inset-inline: 2%; }
  .to-a-system-title { top: 6%; left: 4%; right: 4%; font-size: 13px; }
  .to-a-system-title span { font-size: 10px; padding: 4px 6px; }
  .to-a-system-footer { font-size: 11px; gap: 7px; bottom: 8%; }
  .to-a-error { font-size: 11px; padding: 4px 8px; }
  .to-a-cross { width: 18px; height: 18px; }
  .to-a-cross > span { font-size: 20px; }
  .to-a-outcome { margin-top: 13px; }
  .to-a-outcome-label { font-size: 12px; }
  .to-a-benefits { flex-wrap: wrap; gap: 10px 20px; font-size: 12px; line-height: 1.4; }
}
@container (min-width: 600px) and (max-width: 760px) {
  .to-a-tile { grid-template-columns: 32px minmax(0, 1fr); gap: 7px; padding-inline: 9px; text-align: left; justify-items: stretch; }
  .to-a-app-icon { width: 32px; height: 32px; }
  .to-a-tile strong { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .to-a *, .to-a *::before { animation: none !important; }
  .to-a-tile { transform: translate(-50%, -50%); }
  .to-a-before, .to-a-tangle, .to-a-more, .to-a-fee { opacity: 0; }
  .to-a-after, .to-a-system, .to-a-included { opacity: 1; }
}