.to-a { --ink: #143e38; --green: #236e5f; --muted: #4d6961; --loop: 6.933333s; 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); }
/* Parent layout owns spacing and centring so the page's list-margin reset cannot undo them. */
.to-a-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 1050px; margin: 22px auto 0; border-radius: 32px; background: #edf5f0; padding: 10px 4% 26px; overflow: hidden; }
.to-a-field { container-type: inline-size; position: relative; width: 100%; height: clamp(330px, 34vw, 410px); }
.to-a-system { position: absolute; inset: 3% 5%; 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%; text-align: center; font-size: clamp(14px, 1.5vw, 18px); font-weight: 550; }
.to-a-tangle { position: absolute; inset: 0; animation: toa-tangle var(--loop) linear infinite; }
.to-a-tangle svg { width: 100%; height: 100%; }
.to-a-errors { position: absolute; inset: 0; pointer-events: none; animation: toa-tangle var(--loop) linear infinite; }
.to-a-error { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-size: 12px; line-height: 1.25; color: #975039; background: #f9ebe4; border-radius: 5px; padding: 3px 7px; }
.to-a-error--passcode { left: 50%; top: calc(44% - 2cqw); }
.to-a-error--connection { left: 22%; top: calc(65% + 1.5cqw); }
.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; }
.to-a-tile { position: absolute; left: var(--x); top: var(--y); width: 27%; height: 20%; 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-included { color: var(--green); animation: toa-included var(--loop) linear infinite; }
.to-a-included b { font-weight: 400; margin-left: 3px; }
.to-a-progress { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 74%; max-width: 320px; margin: 12px auto 0; }
.to-a-progress-step { display: grid; gap: 7px; font-size: 12px; font-weight: 500; line-height: 1; }
.to-a-progress-step--before { color: #975039; animation: toa-progress-before-active var(--loop) linear infinite; }
.to-a-progress-step--after { color: var(--green); animation: toa-progress-after-active var(--loop) linear infinite; }
.to-a-progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: linear-gradient(180deg, #cbded2, #e1ece5); box-shadow: inset 0 1px 2px #143e3826, 0 1px 0 #ffffffb3; }
.to-a-progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(180deg, #ffffff3d, #ffffff00 48%, #143e3826), currentColor; box-shadow: inset 0 1px 0 #ffffff59, inset 0 -1px 0 #143e3826; transform: scaleX(0); transform-origin: left; }
.to-a-progress-step--before .to-a-progress-fill { animation: toa-progress-before var(--loop) linear infinite; }
.to-a-progress-step--after .to-a-progress-fill { animation: toa-progress-after var(--loop) linear infinite; }
/* Selected FIFO-style cards, with the same apricot marks and rounded edges. */
.to-a-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; width: min(100%, 820px); justify-self: center; margin: 0; padding: 0; list-style: none; color: var(--ink); }
.to-a-benefits li { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 14px; min-width: 0; min-height: 64px; padding: 12px 20px 12px 12px; border: 1px solid #c9ddd1; border-radius: 24px; background: linear-gradient(110deg, #edf5ef, #fbfdfc); box-shadow: 0 12px 28px #294c3910, inset 0 1px 0 #fefffe; font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.022em; }
.to-a-benefit-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #ffb17a; color: var(--ink); box-shadow: 0 7px 16px #ff8a2624; font-size: 18px; font-weight: 600; line-height: 1; }
.to-a-benefit-mark--cross { background: #f9ebe4; color: #975039; box-shadow: none; font-size: 24px; }
/* One shared clock: 2.8 seconds to read each state, then a 2/3-second transition.
   Keeping the progress fills on this same loop preserves pause/resume timing. */
@keyframes toa-tile { 0%, 40.384615%, 100% { transform: translate(calc(-50% + var(--dx) * 1cqw), calc(-50% + var(--dy) * min(1cqw, 4px))) rotate(var(--tilt)); } 50%, 90.384615% { transform: translate(-50%, -50%) rotate(0); } }
@keyframes toa-before { 0%, 40.384615%, 100% { opacity: 1; } 50%, 90.384615% { opacity: 0; } }
@keyframes toa-included { 0%, 40.384615%, 100% { opacity: 0; } 50%, 90.384615% { opacity: 1; } }
@keyframes toa-system { 0%, 40.384615%, 100% { opacity: 0; transform: scale(.95); } 50%, 90.384615% { opacity: 1; transform: scale(1); } }
@keyframes toa-tangle { 0%, 40.384615%, 100% { opacity: 1; } 45.192308%, 95.192308% { opacity: 0; } }
@keyframes toa-progress-before { 0% { transform: scaleX(0); } 40.384615%, 100% { transform: scaleX(1); } }
@keyframes toa-progress-after { 0%, 50% { transform: scaleX(0); } 90.384615%, 100% { transform: scaleX(1); } }
@keyframes toa-progress-before-active { 0%, 40.384615%, 100% { opacity: 1; } 50%, 90.384615% { opacity: .45; } }
@keyframes toa-progress-after-active { 0%, 40.384615%, 100% { opacity: .45; } 50%, 90.384615% { opacity: 1; } }
[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: 18px 18px 24px; }
  .to-a h2 { font-size: clamp(31px, 6.4vw, 44px); }
  .to-a-story { gap: 22px; margin-top: 12px; border-radius: 22px; padding: 4px 8px 22px; }
  .to-a-field { height: 350px; }
  .to-a-tile { width: 28%; height: 22%; 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: 3% 2%; }
  .to-a-system-title { top: 6%; left: 4%; right: 4%; font-size: 13px; }
  .to-a-error { font-size: 10px; padding: 3px 6px; }
  .to-a-error--passcode { top: calc(41% - 2cqw); }
  .to-a-error--connection { top: 69%; }
  .to-a-cross { width: 18px; height: 18px; }
  .to-a-cross > span { font-size: 20px; }
  .to-a-progress { margin-top: 8px; }
  .to-a-benefits { gap: 9px; }
  .to-a-benefits li { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; min-height: 76px; padding: 10px; border-radius: 21px; font-size: 14px; }
  .to-a-benefit-mark { width: 28px; height: 28px; font-size: 16px; }
  .to-a-benefit-mark--cross { font-size: 22px; }
}
@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-tangle, .to-a-errors, .to-a-fee { opacity: 0; }
  .to-a-system, .to-a-included { opacity: 1; }
  .to-a-progress { display: none; }
}