@font-face {
  font-family:CheckoutNunito;
  src:url('checkout-v7/nunito-regular.woff2') format('woff2');
  font-weight:400;
  font-display:swap}

@font-face {
  font-family:CheckoutNunito;
  src:url('checkout-v7/nunito-bold.woff2') format('woff2');
  font-weight:700;
  font-display:swap}

:root {
  color-scheme:light;
  --ink:#0c123d;
  --muted:#626a91;
  --blue:#0055e8;
  --line:#dce3ef;
  --selected:#e8f6fd;
  --orange:#e94e0b;
  --orange-hover:#cf4004;
  --page-width:81rem}

* {
  box-sizing:border-box}
body {
  margin:0;
  background:#fff;
  color:var(--ink);
  font:400 1rem/1.45 CheckoutNunito,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
button,input {
  font:inherit}
button,a,label {
  touch-action:manipulation}
button {
  cursor:pointer}
a {
  color:var(--blue);
  text-underline-offset:.15em}
a:hover {
  color:#003eb0}
button:disabled {
  cursor:wait;
  opacity:.8}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:4px}
[hidden] {
  display:none!important}
.icon-defs {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden}
.icon {
  width:1.5rem;
  height:1.5rem;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round}
.shell {
  width:calc(100% - 3rem);
  max-width:var(--page-width);
  margin-inline:auto}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0}
.skip {
  position:absolute;
  left:1rem;
  top:-5rem;
  background:white;
  padding:.75rem;
  z-index:5}
.skip:focus {
  top:1rem}
.offer {
  min-height:2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  background:#edf7ff;
  color:var(--blue);
  font-size:.875rem;
  text-align:center;
  padding:.35rem .75rem}
.offer.sale {
  background:#fffbe9;
  color:#915600}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-block:1rem .5rem}
.brand {
  flex-shrink:0;
  display:flex;
  align-items:center;
  min-height:2.75rem}
.brand img {
  width:clamp(9rem,39vw,12rem);
  height:auto;
  display:block}
.header-actions {
  display:flex;
  align-items:center}
.text-action {
  min-height:2.75rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.375rem 0;
  background:none;
  border:0;
  color:var(--blue);
  text-decoration:none;
  text-align:left}
.text-action:hover {
  text-decoration:underline}
.header-actions .text-action {
  font-size:.9375rem}
.desktop-action {
  display:none}
.progress {
  padding-block:.6rem 1.3rem}
.progress ol {
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  justify-content:space-between;
  position:relative}
.progress ol:before {
  content:'';
  position:absolute;
  top:1rem;
  left:2.5rem;
  right:2.5rem;
  height:1px;
  background:#a7afd0}
.progress li {
  display:flex;
  position:relative;
  align-items:center;
  flex-direction:column;
  gap:.35rem;
  min-width:0;
  flex:1;
  color:var(--muted);
  font-size:.75rem;
  text-align:center}
.step-number {
  display:grid;
  place-items:center;
  width:2rem;
  height:2rem;
  border:1px solid #828bb1;
  border-radius:50%;
  background:#fff;
  font-size:1rem;
  font-weight:700}
.progress [aria-current]  {
  color:var(--ink);
  font-weight:700}
.progress [aria-current] .step-number {
  color:white;
  background:var(--blue);
  border-color:var(--blue)}
.desktop-word {
  display:none}
.checkout {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0}
h1,h2,p {
  margin:0}
h1,h2 {
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.025em}
h1 {
  font-size:2rem;
  margin-block:.3rem 1.2rem}
h2 {
  font-size:1.25rem}
.selection {
  min-width:0;
  margin-bottom:1.5rem}
.selection h2 {
  font-size:1.2rem}
.track-list {
  list-style:none;
  margin:.5rem 0 0;
  padding:0}
.track-list>li {
  padding:.25rem 0;
  overflow-wrap:anywhere}
.track-title {
  font-size:1.125rem}
.version {
  color:var(--muted);
  font-size:.875rem;
  line-height:1.55;
  font-variant-numeric:tabular-nums}
.version-list {
  list-style:none;
  padding:0;
  margin:.25rem 0 0}
.inclusion {
  margin-top:.4rem;
  font-size:.875rem;
  color:var(--muted)}
.show-all {
  font-size:.875rem}
.plans {
  min-width:0;
  margin:0}
.plans h2 {
  font-size:1.75rem}
.pack-explanation {
  margin:.45rem 0 1.05rem;
  color:var(--muted);
  font-size:.9375rem;
  line-height:1.45}
.table-head {
  display:flex;
  justify-content:space-between;
  padding:0 .7rem .5rem 2.9rem;
  color:var(--muted);
  font-size:.875rem;
  font-weight:700}
.plan-list {
  padding:0;
  border:0;
  margin:0;
  min-width:0}
.plan {
  display:grid;
  grid-template-columns:1.3rem minmax(0,1fr) auto;
  align-items:center;
  gap:.7rem;
  border:1px solid var(--line);
  border-radius:.4rem;
  min-height:4.25rem;
  padding:.65rem .7rem;
  margin-bottom:.45rem;
  cursor:pointer;
  transition:background-color .12s,border-color .12s}
.plan:hover {
  background:#f5fbff;
  border-color:#8cabeb}
.plan:has(input:checked) {
  background:var(--selected);
  border-color:var(--selected)}
.plan:has(input:focus-visible) {
  outline:3px solid var(--blue);
  outline-offset:2px}
.plan input {
  width:1.2rem;
  height:1.2rem;
  margin:0;
  accent-color:var(--blue)}
.plan-copy {
  display:grid;
  gap:.1rem;
  min-width:0}
.quantity {
  font-weight:700;
  font-size:1.125rem;
  line-height:1.15}
.plan-detail {
  color:var(--muted);
  font-size:.8125rem;
  line-height:1.3;
  overflow-wrap:anywhere}
.upgrade {
  color:var(--blue)}
.money {
  display:flex;
  align-items:center;
  gap:.5rem;
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap}
.price {
  display:inline-flex;
  align-items:baseline;
  gap:.35rem;
  font-size:1.25rem;
  font-weight:700;
  line-height:1.2}
.old-price {
  font-size:.8125rem;
  color:var(--muted);
  display:block;
  font-weight:400;
  text-decoration:line-through}
.one-time {
  margin:1rem 0 .65rem;
  text-align:center;
  font-size:.9375rem;
  font-weight:700}
.cta {
  width:100%;
  border:0;
  border-radius:.375rem;
  background:var(--orange);
  color:#fff;
  min-height:3.1rem;
  padding:.7rem .6rem;
  font-size:1.2rem;
  font-weight:700;
  line-height:1.3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  transition:background-color .12s}
.cta:hover {
  background:var(--orange-hover)}
.secure {
  margin:.6rem 0 .8rem;
  display:flex;
  gap:.35rem;
  align-items:center;
  justify-content:center;
  font-size:.875rem;
  color:var(--muted)}
.secure .icon {
  width:1rem;
  height:1rem}
.payment-methods {
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
  min-height:2.1rem}
.payment-methods img {
  display:block;
  max-width:100%;
  height:1.4rem;
  object-fit:contain}
.payment-methods li {
  min-width:0}
.payment-methods li:first-child img {
  height:1.5rem}
.payment-methods li:nth-child(3) img {
  height:1.75rem}
.payment-methods li:nth-child(4) img {
  height:1.5rem}
.discover {
  display:none}
.benefits {
  margin-top:1.65rem}
.benefits h2 {
  font-size:1.25rem;
  margin-bottom:.7rem}
.benefits ul {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.65rem}
.benefits li {
  display:flex;
  align-items:center;
  gap:.65rem;
  font-size:.9375rem}
.check {
  flex:0 0 1.65rem;
  width:1.65rem;
  height:1.65rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e1f6e8;
  color:#056628}
.check .icon {
  width:1.05rem;
  height:1.05rem;
  stroke-width:2.2}
.agreement {
  margin-top:1.5rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
  font-size:.8125rem;
  line-height:1.65;
  color:var(--muted)}
.agreement a {
  color:#4d5982}
.mobile-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.2rem 1.25rem;
  margin-top:.75rem}
.mobile-actions .text-action {
  font-size:.9375rem}
.site-footer {
  margin-top:1.5rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  color:var(--muted);
  font-size:.8125rem}
.site-footer nav {
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap}
.site-footer a {
  color:var(--muted);
  min-height:2.75rem;
  display:inline-flex;
  align-items:center;
  text-decoration:none}
.trust img {
  width:6.25rem;
  height:auto}
.demo-caption {
  font:400 .75rem/1.5 Arial,sans-serif;
  text-align:center;
  color:#64697a;
  margin:1.25rem .75rem 1rem}
.empty {
  padding:1rem 0;
  color:var(--muted)}
.payment-error {
  color:#a12419;
  background:#fff3ef;
  border-radius:.3rem;
  padding:.75rem;
  margin-top:.75rem;
  font-size:.9375rem}
.spinner {
  width:1.1rem;
  height:1.1rem;
  border:2px solid #ffffff70;
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .75s linear infinite}
@keyframes spin {
  to {
  transform:rotate(360deg)}
}
.coupon {
  margin-top:.9rem;
  font-size:.9375rem}
.coupon label,dialog label {
  display:block;
  margin-bottom:.4rem;
  font-weight:700}
.field-row {
  display:flex;
  gap:.5rem}
.field-row input {
  width:100%;
  min-width:0;
  min-height:2.75rem;
  border:1px solid #a4adc3;
  border-radius:.35rem;
  padding:.6rem;
  font-size:1rem;
  color:var(--ink)}
.secondary-button {
  border:1px solid #a4adc3;
  background:#fff;
  color:var(--blue);
  border-radius:.35rem;
  min-height:2.75rem;
  padding:.5rem .85rem}
.secondary-button:hover {
  background:#edf7ff}
.field-feedback {
  font-size:.875rem;
  color:var(--muted);
  margin:.5rem 0}
.field-feedback.error {
  color:#a12419}
dialog {
  width:min(32rem,calc(100% - 2rem));
  max-height:calc(100dvh - 2rem);
  padding:2rem 1.25rem 1.25rem;
  border:1px solid var(--line);
  border-radius:.65rem;
  color:var(--ink);
  box-shadow:0 1.5rem 5rem #0c123d30}
dialog::backdrop {
  background:#0c123d65}
dialog h2 {
  font-size:1.6rem;
  padding-right:2rem;
  margin-bottom:.8rem}
dialog p {
  margin-bottom:1rem;
  color:var(--muted)}
.close-button {
  position:absolute;
  right:.5rem;
  top:.5rem;
  display:grid;
  place-items:center;
  width:2.75rem;
  height:2.75rem;
  border:0;
  background:none;
  color:var(--muted);
  border-radius:.3rem}
.close-button:hover {
  background:#edf7ff}
.dialog-note {
  font-size:.8125rem;
  margin-top:.75rem}
.dialog-lock {
  width:2rem;
  height:2rem;
  color:var(--blue);
  margin-bottom:.75rem}
.edit-list {
  list-style:none;
  margin:0 0 1rem;
  padding:0}
.edit-list li {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  border-top:1px solid var(--line);
  padding:.6rem 0;
  overflow-wrap:anywhere}
.remove-track {
  flex-shrink:0;
  background:none;
  border:0;
  color:#a12419;
  text-decoration:underline;
  min-height:2.75rem;
  padding:.4rem}
.restore-selection {
  margin-top:.5rem;
  font-size:.875rem}

@media(min-width:520px) {
  .shell {
  width:calc(100% - 4rem)}
.brand img {
  width:14rem}
.plan-detail {
  font-size:.9375rem}
.quantity {
  font-size:1.375rem}
.price {
  font-size:1.5rem}
.plan {
  padding:.85rem 1rem;
  gap:1rem}
.plans h2 {
  font-size:2rem}
.discover {
  display:block}
.payment-methods {
  gap:1.4rem}
.progress li {
  font-size:.9375rem}
.selection {
  margin-bottom:1.75rem}
.benefits li {
  font-size:1rem}
}

@media(min-width:800px) {
  .shell {
  width:calc(100% - 6rem);
  max-width:67.5rem}
.offer {
  min-height:1.75rem;
  font-size:.875rem}
.site-header {
  padding-block:.9rem .5rem}
.brand img {
  width:14.5rem}
.header-actions {
  gap:.9rem}
.header-actions .text-action {
  font-size:.875rem}
.desktop-action {
  display:inline-flex}
.header-actions>*+* {
  border-left:1px solid #a9b0c7;
  padding-left:.9rem}
.progress {
  max-width:38rem;
  padding-block:.25rem 1.5rem}
.progress li {
  font-size:1rem;
  gap:.5rem}
.progress ol:before {
  left:16.66%;
  right:16.66%}
.desktop-word {
  display:inline}
.checkout {
  max-width:57.5rem;
  grid-template-columns:minmax(0,.76fr) minmax(0,1fr);
  column-gap:2.5rem;
  grid-template-rows:auto auto 1fr auto;
  align-items:start}
.checkout h1 {
  grid-column:1;
  grid-row:1;
  font-size:2.25rem;
  margin:0 0 1.25rem}
.selection {
  grid-column:1;
  grid-row:2;
  margin:0 0 1.5rem}
.selection h2 {
  font-size:1.375rem}
.track-list {
  border-top:1px solid var(--line);
  margin-top:.75rem}
.track-list>li {
  border-bottom:1px solid var(--line);
  padding:.65rem 0}
.track-title {
  font-size:1.25rem}
.inclusion {
  font-size:1rem;
  margin-top:1rem}
.plans {
  grid-column:2;
  grid-row:1/5;
  border:1px solid var(--line);
  border-radius:.4rem;
  padding:.75rem}
.plans h2 {
  font-size:1.875rem}
.pack-explanation {
  font-size:.875rem;
  line-height:1.35;
  margin:.25rem 0 .375rem}
.table-head {
  font-size:.875rem;
  padding:0 .75rem .125rem 3.1rem}
.plan {
  grid-template-columns:1.4rem minmax(0,1fr) auto;
  min-height:3.5rem;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  margin:0;
  padding:.125rem .75rem;
  gap:1rem}
.plan:has(input:checked) {
  border-radius:.4rem}
.plan input {
  width:1.4rem;
  height:1.4rem}
.plan-detail {
  font-size:.875rem}
.quantity {
  font-size:1.25rem}
.price {
  font-size:1.25rem;
  line-height:1.1}
.plan .old_price {
  font-size:.8em;
  line-height:1}
.plan .save {
  line-height:1.1}
.one-time {
  font-size:.875rem;
  margin:.375rem 0 .25rem}
.cta {
  min-height:2.75rem;
  padding:.5rem .6rem;
  font-size:1rem}
.secure {
  font-size:.875rem;
  margin:.25rem 0}
.payment-methods {
  gap:.75rem;
  min-height:1.75rem;
  justify-content:space-around}
.payment-methods img,.payment-methods li:first-child img {
  height:1.65rem}
.payment-methods li:nth-child(3) img {
  height:2rem}
.payment-methods li:nth-child(4) img {
  height:1.8rem}
.benefits {
  grid-column:1;
  grid-row:3;
  margin-top:0}
.benefits h2 {
  font-size:1.375rem;
  margin-bottom:1rem}
.benefits ul {
  gap:.85rem}
.benefits li {
  font-size:1rem;
  gap:1rem}
.check {
  width:2.25rem;
  height:2.25rem;
  flex-basis:2.25rem}
.check .icon {
  width:1.4rem;
  height:1.4rem}
.agreement {
  grid-column:2;
  grid-row:4;
  position:relative;
  align-self:end;
  margin:0 1.5rem 1.1rem;
  border:0;
  padding:0;
  font-size:.8125rem;
  line-height:1.5}
.mobile-actions {
  display:none}
.site-footer {
  margin-top:1.25rem;
  font-size:.9375rem}
.site-footer nav {
  gap:.85rem}
.trust img {
  width:8.5rem}
.demo-caption {
  margin-top:1.5rem}
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  animation:none!important;
  transition:none!important}
}

/* Compact mobile spacing; selected tracks remain below their heading. */
@media(max-width:519px) {
  
  .offer {
  min-height:1.5rem;
  padding-block:.15rem;
  font-size:.8125rem}

  .site-header {
  padding-block:.5rem .2rem}

  .progress {
  padding-block:.35rem 1rem}

  .step-number {
  width:1.75rem;
  height:1.75rem}

  .progress ol:before {
  top:.875rem}

  h1 {
  font-size:1.875rem;
  margin-bottom:1.1rem}

  .single-track h2 {
  font-size:1.0625rem;
  white-space:nowrap}

  .single-track .track-list {
  margin:.5rem 0 0}

  .single-track .track-title {
  font-size:1.0625rem}

  .single-track .inclusion {
  grid-column:1/-1}

  .single-track .version {
  font-size:.8125rem}

  .single-track .version-list {
  margin-top:.4rem}

}

/* Production payment marks are supplied as card-shaped SVGs with internal whitespace. */
.payment-methods img {
  width:auto;
  height:2.1rem;
  max-width:4.3rem}

.payment-methods li:first-child img {
  height:2.7rem;
  max-width:5rem}

.payment-methods li:nth-child(3) img,.payment-methods li:nth-child(4) img {
  height:2.1rem}

@media(min-width:800px) {
  .payment-methods img {
  height:1.5rem;
  max-width:4.5rem}
.payment-methods li:first-child img {
  height:1.75rem;
  max-width:5rem}
.payment-methods li:nth-child(3) img,.payment-methods li:nth-child(4) img {
  height:1.5rem}
}

.save-submit { margin-top:.85rem; }

/* Server-rendered data uses the same hooks as the current checkout. */
.track-list > li > a { font-size:1.125rem; }
.track-list #addlater { display:block; color:var(--muted); }
.checkout-longoloops { margin:.3rem 0 0; color:var(--muted); font-size:.875rem; line-height:1.55; }
.checkout-longoloops-version { font-variant-numeric:tabular-nums; }
.plan .save { font-size:.75rem; color:#333; background:#FADF10; border-radius:3px; padding:0 .35rem; min-width:4.6875rem; text-align:center; line-height:1.7; white-space:nowrap; }
.old_price { font-size:.8em; color:#777; display:inline; font-weight:400; text-decoration:line-through; }
.old_price:empty { display:none; }
#this_purchase { display:none; }
.wrong { width:100%!important; padding:.75rem!important; margin:.75rem 0; color:#a12419; border:1px solid #a12419!important; }
#faspinner { width:1.1em; height:1.1em; border:2px solid #ffffff80; border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
#facontinue { display:inline; }
.plans .iagree { margin:1rem 0 0; color:var(--muted); font-size:.8125rem; line-height:1.6; }
.plans .iagree a { color:#4d5982; }
.benefits ul.info { list-style:none; margin:0; padding:0; }
.benefits .info li { display:flex; align-items:flex-start; gap:.85rem; }
.benefits .info li > i { flex:0 0 1.65rem; width:1.65rem; height:1.65rem; display:grid; place-items:center; border-radius:50%; background:#e1f6e8; color:#056628; font-style:normal; }
.benefits .info li > i::before { content:'✓'; font-weight:700; }
.benefits .info li > span { min-width:0; }
.couponform, .invalid, .expired, .applied, .sent, .validemail { display:none; }
.coupon_input { min-width:0; width:100%; }
#myModal.modal[open] { display:block; }
#myModal .close { float:right; border:0; background:none; padding:.5rem; min-width:44px; min-height:44px; font-size:1.5rem; }
#myModal .visible p, #myModal .sent p { margin:1rem 0; }
#myModal input { width:100%; }
#myModal .validemail { color:#a12419; }
#myModal .send { margin-top:.75rem; }
@media(min-width:800px) {
  .plans { padding-bottom:.75rem; }
  .plans .iagree { margin-top:.5rem; font-size:.75rem; line-height:1.45; }
  .track-list > li > a { font-size:1.25rem; }
  .benefits .info li > i { flex-basis:1.65rem; width:1.65rem; height:1.65rem; }
}
@media(prefers-reduced-motion:reduce) { #faspinner { animation:none; } }
@media(max-width:519px) {
  .single-track .track-list > li > a { font-size:1.0625rem; }
  .single-track #addlater, .single-track .checkout-longoloops { grid-column:1/-1; }
  .single-track #addlater { margin-top:.4rem; }
  .single-track .checkout-longoloops { margin-top:.4rem; }
}

/* Keep quantity and sale price readable without three competing price figures. */
@media(max-width:799px) {
  .plan { row-gap:.15rem; }
  .plan input { grid-column:1; grid-row:1 / span 2; }
  .plan-copy { grid-column:2; grid-row:1; }
  .quantity { white-space:nowrap; }
  .money { display:contents; }
  .price {
    grid-column:3;
    grid-row:1 / span 2;
    flex-direction:column;
    align-items:flex-end;
    gap:.1rem;
  }
  .plan .save { grid-column:2; grid-row:2; justify-self:start; }
}