.ma-flow{
  /* Core */
  --ma-flow-accent:var(--gradient-accent);
  --ma-flow-surface:var(--color-white)/*color-mix(in srgb, var(--color-ink) 80%, var(--color-muted))*/;
  --ma-flow-border:rgba(0, 0, 0, 0.15);
  --ma-flow-radius:var(--radius-sm);
  --ma-flow-gap:12px;
  --ma-flow-max-width:100%;
  --ma-flow-scroll-offset:16px;

  /* Motion */
  --ma-flow-interaction-duration:260ms;
  --ma-flow-interaction-ease:cubic-bezier(.2,.8,.2,1);
  --ma-flow-motion-duration:var(--ma-flow-interaction-duration);
  --ma-flow-motion-ease:var(--ma-flow-interaction-ease);
  --ma-flow-step-duration:280ms;
  --ma-flow-step-distance:18px;
  --ma-flow-step-ease:cubic-bezier(.22,1,.36,1);
  --ma-flow-progress-duration:260ms;

  /* Option cards */
  --ma-flow-card-ratio:4 / 3;
  --ma-flow-card-min-width:150px;
  --ma-flow-option-media-size:44px;
  --ma-flow-option-bg:color-mix(in srgb, var(--color-ink) 80%, var(--color-muted));
  --ma-flow-option-color:var(--color-white);
  --ma-flow-option-border:var(--ma-flow-border);
  --ma-flow-option-shadow:none;

  --ma-flow-option-hover-bg:var(--gradient-accent);
  --ma-flow-option-hover-color:var(--color-white);
  --ma-flow-option-hover-border:var(--color-accent-dark);
  --ma-flow-option-hover-shadow:0 10px 28px rgba(0,0,0,.10);
  --ma-flow-option-hover-translate-y:-3px;

  --ma-flow-option-focus-bg:var(--gradient-accent);
  --ma-flow-option-focus-color:var(--color-white);
  --ma-flow-option-focus-border:var(--color-accent-dark);
  --ma-flow-option-focus-shadow:var(--ma-flow-option-hover-shadow);
  --ma-flow-option-focus-translate-y:-2px;
  --ma-flow-option-focus-ring:color-mix(in srgb,var(--ma-flow-accent) 28%,transparent);
  --ma-flow-option-focus-ring-width:3px;
  --ma-flow-option-focus-ring-offset:2px;

  --ma-flow-option-selected-bg:var(--color-accent-dark);
  --ma-flow-option-selected-color:var(--color-white);
  --ma-flow-option-selected-border:var(--color-accent-dark);
  --ma-flow-option-selected-shadow:0 0 0 2px color-mix(in srgb,var(--ma-flow-accent) 24%,transparent);
  --ma-flow-option-selected-translate-y:-1px;
  --ma-flow-option-selected-hover-bg:var(--ma-flow-option-hover-bg);
  --ma-flow-option-selected-hover-color:var(--ma-flow-option-hover-color);
  --ma-flow-option-selected-hover-border:var(--ma-flow-option-hover-border);
  --ma-flow-option-selected-hover-shadow:var(--ma-flow-option-hover-shadow);
  --ma-flow-option-selected-hover-translate-y:var(--ma-flow-option-hover-translate-y);
  --ma-flow-option-media-hover-scale:1/*1.045*/;
  --ma-flow-option-media-selected-scale:1/*1.035*/;

  /* Fields */
  --ma-flow-field-bg:var(--ma-flow-surface);
  --ma-flow-field-color:inherit;
  --ma-flow-field-border:var(--ma-flow-border);
  --ma-flow-field-radius:calc(var(--ma-flow-radius) * .75);
  --ma-flow-field-focus-bg:var(--ma-flow-field-bg);
  --ma-flow-field-focus-border:var(--ma-flow-accent);
  --ma-flow-field-focus-ring:color-mix(in srgb,var(--ma-flow-accent) 18%,transparent);
  --ma-flow-contact-max-width:360px;

  /* Buttons: primary */
  --ma-flow-button-bg:var(--ma-flow-accent);
  --ma-flow-button-color:var(--color-white);
  --ma-flow-button-border:var(--ma-flow-accent);
  --ma-flow-button-radius:var(--radius-sm);
  --ma-flow-button-padding-y:11px;
  --ma-flow-button-padding-x:18px;
  --ma-flow-button-font-weight:600;
  --ma-flow-button-shadow:none;
  --ma-flow-button-hover-bg:var(--color-accent-dark);
  --ma-flow-button-hover-color:var(--ma-flow-button-color);
  --ma-flow-button-hover-border:var(--ma-flow-button-border);
  /*--ma-flow-button-hover-shadow:0 8px 22px rgba(0,0,0,.12);*/
  --ma-flow-button-hover-translate-y:0px;
  --ma-flow-button-active-translate-y:0px;
  --ma-flow-button-focus-bg:var(--ma-flow-button-hover-bg);
  --ma-flow-button-focus-color:var(--ma-flow-button-hover-color);
  --ma-flow-button-focus-border:var(--ma-flow-button-hover-border);
  /*--ma-flow-button-focus-shadow:var(--ma-flow-button-hover-shadow);*/
  --ma-flow-button-focus-translate-y:var(--ma-flow-button-hover-translate-y);
  --ma-flow-button-focus-ring:color-mix(in srgb,var(--ma-flow-accent) 28%,transparent);
  --ma-flow-button-focus-ring-width:3px;
  --ma-flow-button-focus-ring-offset:2px;

  /* Buttons: secondary */
  --ma-flow-button-secondary-bg:transparent;
  --ma-flow-button-secondary-color:inherit;
  --ma-flow-button-secondary-border:var(--ma-flow-border);
  --ma-flow-button-secondary-shadow:none;
  --ma-flow-button-secondary-hover-bg:color-mix(in srgb,var(--ma-flow-accent) 7%,transparent);
  --ma-flow-button-secondary-hover-color:inherit;
  --ma-flow-button-secondary-hover-border:var(--ma-flow-accent);
  --ma-flow-button-secondary-hover-shadow:none;
  --ma-flow-button-secondary-focus-bg:var(--ma-flow-button-secondary-hover-bg);
  --ma-flow-button-secondary-focus-color:var(--ma-flow-button-secondary-hover-color);
  --ma-flow-button-secondary-focus-border:var(--ma-flow-button-secondary-hover-border);
  --ma-flow-button-secondary-focus-shadow:var(--ma-flow-button-secondary-hover-shadow);

  /* Mobile stack carousel */
  --ma-flow-stack-card-width:82%;
  --ma-flow-stack-side-offset:58%;
  --ma-flow-stack-side-scale:.92;
  --ma-flow-stack-side-opacity:.62;
  --ma-flow-stack-duration:260ms;

  font:inherit;
  color:inherit;
  width:100%;
  max-width:var(--ma-flow-max-width);
  min-width:0;
  flex:1 1 100%;
  align-self:stretch;
  justify-self:stretch;
  overflow-anchor:none;
}
.ma-flow *{box-sizing:border-box}
.ma-flow__loading{padding:24px 0}
.ma-flow__header{margin-bottom:24px}
.ma-flow__progress{height:6px;background:rgba(127,127,127,.18);border-radius:999px;overflow:hidden}
.ma-flow__progress-bar{height:100%;width:0;background:var(--ma-flow-accent);transition:width var(--ma-flow-progress-duration) var(--ma-flow-motion-ease)}
.ma-flow__progress-text{margin-top:8px;font-size:.875em;opacity:.7}
.ma-flow__form,.ma-flow__steps,.ma-flow__step{width:100%;min-width:0}
.ma-flow__steps{position:relative}
.ma-flow__steps.ma-flow__steps--animating{overflow:hidden;transition:height var(--ma-flow-step-duration) var(--ma-flow-step-ease)}
.ma-flow__step[hidden]{display:none!important}
.ma-flow__step--entering{animation:ma-flow-step-forward var(--ma-flow-step-duration) var(--ma-flow-step-ease) both}
.ma-flow[data-ma-flow-direction="backward"] .ma-flow__step--entering{animation-name:ma-flow-step-backward}
@keyframes ma-flow-step-forward{from{opacity:0;transform:translate3d(var(--ma-flow-step-distance),0,0)}to{opacity:1;transform:none}}
@keyframes ma-flow-step-backward{from{opacity:0;transform:translate3d(calc(-1 * var(--ma-flow-step-distance)),0,0)}to{opacity:1;transform:none}}

.ma-flow__title{margin:0 0 10px}
.ma-flow__description{opacity:.8}
.ma-flow__options{display:grid;width:100%;min-width:0;gap:var(--ma-flow-gap);align-items:stretch; margin-top:32px;}
.ma-flow__options--cards{grid-template-columns:repeat(auto-fit,minmax(min(var(--ma-flow-card-min-width),100%),1fr));grid-auto-rows:1fr}
.ma-flow__options--list{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
.ma-flow__option{position:relative;width:100%;min-width:0;height:100%}
.ma-flow__option input{position:absolute;opacity:0;pointer-events:none}
.ma-flow__option-label{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  height:100%;
  padding:18px;
  border:1px solid var(--ma-flow-option-border);
  border-radius:var(--ma-flow-radius);
  background:var(--ma-flow-option-bg);
  color:var(--ma-flow-option-color);
  box-shadow:var(--ma-flow-option-shadow);
  cursor:pointer;
  text-align:center;
  transform:translateY(0);
  transition:
    color var(--ma-flow-motion-duration) var(--ma-flow-motion-ease),
    border-color var(--ma-flow-motion-duration) var(--ma-flow-motion-ease),
    box-shadow var(--ma-flow-motion-duration) var(--ma-flow-motion-ease),
    transform var(--ma-flow-motion-duration) var(--ma-flow-motion-ease),
    opacity var(--ma-flow-motion-duration) var(--ma-flow-motion-ease);
}
.ma-flow__option-label::before,
.ma-flow__option-label::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  z-index:0;
  transition:opacity var(--ma-flow-motion-duration) var(--ma-flow-motion-ease);
}
.ma-flow__option-label::before{background:var(--ma-flow-option-selected-bg)}
.ma-flow__option-label::after{background:var(--ma-flow-option-hover-bg)}
.ma-flow__option-label>*{position:relative;z-index:1}
.ma-flow__options--cards .ma-flow__option-label,
.ma-flow__options--grid .ma-flow__option-label,
.ma-flow__options--stack .ma-flow__option-label{aspect-ratio:var(--ma-flow-card-ratio)}
.ma-flow__options--list .ma-flow__option-label{align-items:flex-start;text-align:left}

.ma-flow__option-label:hover{
  color:var(--ma-flow-option-hover-color);
  border-color:var(--ma-flow-option-hover-border);
  box-shadow:var(--ma-flow-option-hover-shadow);
  transform:translateY(var(--ma-flow-option-hover-translate-y));
}
.ma-flow__option-label:hover::after{opacity:1}
.ma-flow__option-label:hover .ma-flow__option-icon{transform:scale(var(--ma-flow-option-media-hover-scale))}
.ma-flow__option input:checked+.ma-flow__option-label{
  color:var(--ma-flow-option-selected-color);
  border-color:var(--ma-flow-option-selected-border);
  box-shadow:var(--ma-flow-option-selected-shadow);
  transform:translateY(var(--ma-flow-option-selected-translate-y));
}
.ma-flow__option input:checked+.ma-flow__option-label::before{
  background:var(--ma-flow-option-selected-bg);
  opacity:1;
}
.ma-flow__option input:checked+.ma-flow__option-label .ma-flow__option-icon{transform:scale(var(--ma-flow-option-media-selected-scale))}
.ma-flow__option input:checked+.ma-flow__option-label:hover{
  color:var(--ma-flow-option-selected-hover-color);
  border-color:var(--ma-flow-option-selected-hover-border);
  box-shadow:var(--ma-flow-option-selected-hover-shadow);
  transform:translateY(var(--ma-flow-option-selected-hover-translate-y));
}
.ma-flow__option input:checked+.ma-flow__option-label:hover::after{
  background:var(--ma-flow-option-selected-hover-bg);
  opacity:1;
}
.ma-flow__option input:checked+.ma-flow__option-label:hover .ma-flow__option-icon{transform:scale(var(--ma-flow-option-media-hover-scale))}
.ma-flow__option input:focus-visible+.ma-flow__option-label{
  color:var(--ma-flow-option-focus-color);
  border-color:var(--ma-flow-option-focus-border);
  box-shadow:var(--ma-flow-option-focus-shadow);
  transform:translateY(var(--ma-flow-option-focus-translate-y));
  outline:var(--ma-flow-option-focus-ring-width) solid var(--ma-flow-option-focus-ring);
  outline-offset:var(--ma-flow-option-focus-ring-offset);
}
.ma-flow__option input:focus-visible+.ma-flow__option-label::before{
  background:var(--ma-flow-option-focus-bg);
  opacity:1;
}
.ma-flow__option-label:active{transform:translateY(0) scale(.99)}
.ma-flow__option-title{display:block;min-width:0;overflow-wrap:anywhere;font-weight:600}
.ma-flow__option-description{display:block;min-width:0;overflow-wrap:anywhere;margin-top:6px;font-size:.92em;opacity:.75}
.ma-flow__option-icon{
  display:block;
  width:var(--ma-flow-option-media-size);
  height:var(--ma-flow-option-media-size);
  max-width:100%;
  object-fit:contain;
  margin:0 auto 12px;
  transform:scale(1);
  transition:transform var(--ma-flow-motion-duration) var(--ma-flow-motion-ease),opacity var(--ma-flow-motion-duration) var(--ma-flow-motion-ease);
}

.ma-flow__field{display:grid;gap:8px;min-width:0;text-align:left;justify-items:stretch}
.ma-flow__field>span{display:block;text-align:left;justify-self:start}
.ma-flow__field input,.ma-flow__field textarea,.ma-flow__field select{
  display:block;width:100%;min-width:0;font:inherit;color:var(--ma-flow-field-color);
  padding:12px 14px;border:1px solid var(--ma-flow-field-border);border-radius:var(--ma-flow-field-radius);
  background:var(--ma-flow-field-bg);text-align:left;outline:0;
  transition:background-color var(--ma-flow-motion-duration) var(--ma-flow-motion-ease),border-color var(--ma-flow-motion-duration) var(--ma-flow-motion-ease),box-shadow var(--ma-flow-motion-duration) var(--ma-flow-motion-ease);
}
.ma-flow__field input:focus-visible,.ma-flow__field textarea:focus-visible,.ma-flow__field select:focus-visible{
  background:var(--ma-flow-field-focus-bg);
  border-color:var(--ma-flow-field-focus-border);
  box-shadow:0 0 0 3px var(--ma-flow-field-focus-ring);
}
.ma-flow__contact{display:grid;gap:14px;width:100%;max-width:var(--ma-flow-contact-max-width);margin:32px auto;text-align:left}

.ma-flow__navigation{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:24px}
.ma-flow__nav-group{display:flex;gap:10px;margin-left:auto}
.ma-flow__button{
  --ma-flow-button-state-bg:var(--ma-flow-button-hover-bg);
  position:relative;
  isolation:isolate;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45em;
  min-height:44px;
  padding:var(--ma-flow-button-padding-y) var(--ma-flow-button-padding-x);
  border:1px solid var(--ma-flow-button-border);
  border-radius:var(--ma-flow-button-radius);
  background:var(--ma-flow-button-bg);
  color:var(--ma-flow-button-color);
  box-shadow:var(--ma-flow-button-shadow);
  font:inherit;
  font-weight:var(--ma-flow-button-font-weight);
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transform:translateY(0);
  transition:
    color var(--ma-flow-motion-duration) var(--ma-flow-motion-ease),
    border-color var(--ma-flow-motion-duration) var(--ma-flow-motion-ease),
    box-shadow var(--ma-flow-motion-duration) var(--ma-flow-motion-ease),
    transform var(--ma-flow-motion-duration) var(--ma-flow-motion-ease),
    opacity var(--ma-flow-motion-duration) var(--ma-flow-motion-ease);
}
.ma-flow__button::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--ma-flow-button-state-bg);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--ma-flow-motion-duration) var(--ma-flow-motion-ease);
}
.ma-flow__button--secondary,.ma-flow__button--icon{
  --ma-flow-button-state-bg:var(--ma-flow-button-secondary-hover-bg);
  background:var(--ma-flow-button-secondary-bg);
  color:var(--ma-flow-button-secondary-color);
  border-color:var(--ma-flow-button-secondary-border);
  box-shadow:var(--ma-flow-button-secondary-shadow);
}
.ma-flow__button--icon{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-radius:50%}
.ma-flow__button:hover{
  --ma-flow-button-state-bg:var(--ma-flow-button-hover-bg);
  color:var(--ma-flow-button-hover-color);
  border-color:var(--ma-flow-button-hover-border);
  box-shadow:var(--ma-flow-button-hover-shadow);
  transform:translateY(var(--ma-flow-button-hover-translate-y));
}
.ma-flow__button:hover::before{opacity:1}
.ma-flow__button--secondary:hover,.ma-flow__button--icon:hover{
  --ma-flow-button-state-bg:var(--ma-flow-button-secondary-hover-bg);
  color:var(--ma-flow-button-secondary-hover-color);
  border-color:var(--ma-flow-button-secondary-hover-border);
  box-shadow:var(--ma-flow-button-secondary-hover-shadow);
}
.ma-flow__button:focus-visible{
  --ma-flow-button-state-bg:var(--ma-flow-button-focus-bg);
  color:var(--ma-flow-button-focus-color);
  border-color:var(--ma-flow-button-focus-border);
  box-shadow:var(--ma-flow-button-focus-shadow);
  transform:translateY(var(--ma-flow-button-focus-translate-y));
  outline:var(--ma-flow-button-focus-ring-width) solid var(--ma-flow-button-focus-ring);
  outline-offset:var(--ma-flow-button-focus-ring-offset);
}
.ma-flow__button:focus-visible::before{opacity:1}
.ma-flow__button--secondary:focus-visible,.ma-flow__button--icon:focus-visible{
  --ma-flow-button-state-bg:var(--ma-flow-button-secondary-focus-bg);
  color:var(--ma-flow-button-secondary-focus-color);
  border-color:var(--ma-flow-button-secondary-focus-border);
  box-shadow:var(--ma-flow-button-secondary-focus-shadow);
}
.ma-flow__button:active{transform:translateY(var(--ma-flow-button-active-translate-y)) scale(.985)}
.ma-flow__button:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.ma-flow__error{margin-top:12px;color:#b42318}
.ma-flow__error:not(:empty){animation:ma-flow-error-in var(--ma-flow-motion-duration) var(--ma-flow-motion-ease) both}
@keyframes ma-flow-error-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ma-flow__summary{display:grid;gap:0;border-top:1px solid var(--ma-flow-border)}
.ma-flow__summary-row{display:grid;grid-template-columns:minmax(120px,.65fr) 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--ma-flow-border)}
.ma-flow__summary-label{font-weight:600; text-align: left;}
.ma-flow__honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.ma-flow__stack-controls{display:none}
.ma-flow__success{padding:20px 0}

@media(max-width:640px){
  .ma-flow__summary-row{grid-template-columns:1fr;gap:4px}
  .ma-flow__options--grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
  .ma-flow__options--list{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .ma-flow__options--stack{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto;
    position:relative;
    overflow:hidden;
    min-width:0;
    gap:0;
    padding-block:4px;
    touch-action:pan-y;
  }
  .ma-flow__options--stack .ma-flow__option{
    grid-column:1;
    grid-row:1;
    width:var(--ma-flow-stack-card-width);
    min-width:0;
    justify-self:center;
    align-self:stretch;
    transform-origin:center center;
    transition:transform var(--ma-flow-stack-duration) var(--ma-flow-step-ease),opacity var(--ma-flow-stack-duration) var(--ma-flow-motion-ease);
    will-change:transform,opacity;
  }
  .ma-flow__options--stack .ma-flow__option[data-stack-pos="0"]{z-index:3;transform:translateX(0) scale(1);opacity:1;pointer-events:auto}
  .ma-flow__options--stack .ma-flow__option[data-stack-pos="-1"]{z-index:2;transform:translateX(calc(-1 * var(--ma-flow-stack-side-offset))) scale(var(--ma-flow-stack-side-scale));opacity:var(--ma-flow-stack-side-opacity);pointer-events:none}
  .ma-flow__options--stack .ma-flow__option[data-stack-pos="1"]{z-index:2;transform:translateX(var(--ma-flow-stack-side-offset)) scale(var(--ma-flow-stack-side-scale));opacity:var(--ma-flow-stack-side-opacity);pointer-events:none}
  .ma-flow__options--stack .ma-flow__option[data-stack-pos="hidden"]{z-index:1;transform:scale(.88);opacity:0;pointer-events:none}
  .ma-flow__stack-controls{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-top:16px}
  .ma-flow__stack-counter{justify-self:center;font-size:.875em;opacity:.7}
  .ma-flow__contact{max-width:min(100%,var(--ma-flow-contact-max-width))}
}
@media(max-width:340px){.ma-flow__options--grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .ma-flow *, .ma-flow *::before, .ma-flow *::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* Submission loading state */
.ma-flow__button--loading{gap:.65em}
.ma-flow__button--loading::after{
  content:"";
  width:.9em;
  height:.9em;
  flex:0 0 .9em;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:ma-flow-spin .7s linear infinite;
}
@keyframes ma-flow-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ma-flow__button--loading::after{animation:none}}


/* Pricing */
.ma-flow__option-price{
  display:block;
  margin-top:10px;
  font-weight:600;
  line-height:1.2;
}
.ma-flow__summary-value{min-width:0; text-align: left;}
.ma-flow__summary-option{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.ma-flow__summary-option+.ma-flow__summary-option{margin-top:6px}
.ma-flow__summary-price{font-weight:600;white-space:nowrap; text-align: right;}
.ma-flow__summary-total{font-size:1.05em;font-weight:600}
@media(max-width:640px){
  .ma-flow__summary-option{gap:10px}
}