/* =============================================================
   byo.css — "Try the agent on your own website" page
   Builds on colors_and_type.css + mila.css
   ============================================================= */

.byo-main { padding: var(--s-6) 0 var(--s-8); min-height: calc(100vh - 64px); }
.byo-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-13); font-weight: 600; color: var(--fg-muted);
  text-decoration: none; margin-bottom: var(--s-4);
  transition: color var(--dur-fast) var(--ease-out);
}
.byo-back:hover { color: var(--mila-accent); }

.byo-intro { padding-top: var(--s-2); }
.byo-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 2.6vw, 44px); line-height: 1.04;
  letter-spacing: var(--tr-tight); color: var(--fg-strong); text-wrap: balance;
}

.byo-grid {
  display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) 372px;
  gap: var(--s-6); align-items: start; max-width: 1200px; margin: 0 auto;
}
.byo-right { position: sticky; top: 88px; display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.byo-counter {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: var(--t-12); font-weight: 600;
  color: var(--fg-muted); letter-spacing: var(--tr-snug);
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 5px 12px 5px 10px;
}
.byo-counter-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--bull);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--bull) 55%, transparent);
  animation: counter-pulse 1.8s var(--ease-in-out) infinite;
}
@keyframes counter-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bull) 55%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--bull) 0%, transparent); }
}
.byo-disclaimer {
  max-width: 320px; text-align: center;
  font-size: var(--t-12); line-height: var(--lh-base); color: var(--fg-subtle);
  margin: 0;
}

/* ---- Left card --------------------------------------------- */
.byo-card {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.byo-card-head { display: flex; flex-direction: column; gap: 6px; }
.byo-card-head h2 { font-size: var(--t-18); font-weight: 700; color: var(--fg-strong); letter-spacing: var(--tr-snug); }
.byo-card-head p { font-size: var(--t-13); color: var(--fg-muted); line-height: var(--lh-base); }

/* ---- Phase: input ------------------------------------------ */
.byo-form { display: flex; flex-direction: column; gap: var(--s-3); }
.byo-url-wrap { display: flex; flex-direction: column; gap: var(--s-3); align-items: stretch; }
.byo-url-field { width: 100%; height: 48px; font-size: var(--t-16); }
.byo-url-field::placeholder { color: var(--fg-subtle); }
.byo-form .btn { height: 48px; white-space: nowrap; }
.byo-err { font-size: var(--t-13); color: var(--bear-600); min-height: 18px; }
.byo-reassure {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--t-13); color: var(--fg-muted); line-height: var(--lh-base);
  background: var(--bg-sunken); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 12px 14px;
}
.byo-reassure svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--mila-accent); margin-top: 1px; }
.byo-reassure strong { color: var(--fg-strong); font-weight: 600; }

/* ---- Phase: loading ---------------------------------------- */
.load-domain {
  font-family: var(--font-mono); font-size: var(--t-13); font-weight: 600;
  color: var(--mila-accent); background: var(--mila-accent-soft);
  border-radius: var(--r-sm); padding: 6px 10px; align-self: flex-start;
}
.load-steps { display: flex; flex-direction: column; gap: var(--s-3); }
.load-step {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--t-14); color: var(--fg-subtle);
  transition: color var(--dur-base) var(--ease-out);
}
.load-step.active { color: var(--fg-strong); font-weight: 600; }
.load-step.done { color: var(--fg-muted); }
.load-dot {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
}
.load-step.active .load-dot { border-color: var(--mila-accent); }
.load-step.active .load-dot::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--mila-accent); border-top-color: transparent;
  animation: spin 0.7s linear infinite;
}
.load-step.done .load-dot { border-color: var(--bull-500); background: var(--bull-500); color: #fff; }
.load-step .load-check { display: none; }
.load-step.done .load-check { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.load-preview {
  border: 1px solid var(--border-soft); border-radius: var(--r-md);
  background: var(--bg-sunken); padding: var(--s-4);
  display: flex; flex-direction: column; gap: 8px; min-height: 60px;
}
.load-preview-label {
  font-family: var(--font-mono); font-size: var(--t-12); font-weight: 600;
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fg-subtle);
}
.preview-line {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: var(--t-13); color: var(--fg); line-height: var(--lh-snug);
  animation: chip-pop 0.34s var(--ease-out) both;
}
.preview-line svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--bull-500); margin-top: 2px; }

/* ---- Phase: ready ------------------------------------------ */
.biz-card { display: flex; flex-direction: column; gap: 8px; }
.biz-top { display: flex; align-items: center; gap: 12px; }
.biz-logo {
  width: 44px; height: 44px; border-radius: var(--r-md); flex-shrink: 0;
  background: var(--mila-accent); color: var(--mila-accent-fg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 17px; font-weight: 700;
}
.biz-name { font-size: var(--t-20); font-weight: 700; color: var(--fg-strong); letter-spacing: var(--tr-snug); }
.biz-logo-emoji {
  background: var(--ink-100); color: inherit;
  font-family: -apple-system, system-ui, sans-serif; font-size: 24px; font-weight: 400;
}
.biz-cat { font-size: var(--t-13); color: var(--fg-muted); font-family: var(--font-mono); }
.biz-desc { font-size: var(--t-13); color: var(--fg); line-height: var(--lh-snug); text-wrap: pretty; }

/* ---- Stacked bubbles (ready state) ------------------------- */
.byo-stack { display: flex; flex-direction: column; gap: var(--s-4); }
.byo-win {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.byo-flag {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 9px 11px; border-radius: var(--r-md);
  font-size: var(--t-13); line-height: var(--lh-snug); color: var(--orange-800);
  background: color-mix(in srgb, var(--mila-accent) 10%, var(--bg-raised));
  border: 1px solid color-mix(in srgb, var(--mila-accent) 26%, transparent);
}
.byo-flag-mark {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  background: var(--mila-accent); color: var(--mila-accent-fg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  animation: alert-pulse 1.4s var(--ease-in-out) infinite;
}
@keyframes alert-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mila-accent) 50%, transparent); opacity: 1; }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--mila-accent) 0%, transparent); opacity: 0.45; }
}
.byo-flag-text { font-weight: 500; }

/* Collapsible "what your agent picked up" details */
.byo-details-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 8px 0 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--t-12); font-weight: 600;
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fg-subtle);
  border-top: 1px solid var(--border-soft);
  transition: color var(--dur-fast) var(--ease-out);
}
.byo-details-toggle:hover { color: var(--fg-muted); }
.byo-details-caret {
  display: flex; width: 16px; height: 16px; flex-shrink: 0; color: var(--fg-subtle);
  transition: transform var(--dur-base) var(--ease-out);
}
.byo-details-toggle.open .byo-details-caret { transform: rotate(180deg); }
.byo-details-inner {
  display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-3);
  animation: details-in var(--dur-base) var(--ease-out) both;
}
@keyframes details-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.byo-disc { display: flex; flex-direction: column; gap: 5px; }
.byo-win-label {
  font-family: var(--font-mono); font-size: var(--t-12); font-weight: 600;
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--mila-accent);
}
.byo-disc p { font-size: var(--t-13); line-height: var(--lh-base); color: var(--fg-muted); text-wrap: pretty; }
.biz-loc { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-13); color: var(--fg-muted); }
.biz-loc svg { width: 14px; height: 14px; }

.byo-divider { height: 1px; background: var(--border-soft); margin: 0; }

.checklist-head {
  font-family: var(--font-mono); font-size: var(--t-12); font-weight: 600;
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fg-subtle);
  margin-bottom: var(--s-1);
}
.checklist { display: grid; grid-template-columns: 20px max-content 1fr; row-gap: 6px; }
.check-item {
  display: grid; grid-template-columns: subgrid; grid-column: 1 / -1;
  align-items: center; column-gap: 10px;
  font-size: var(--t-13); color: var(--fg);
  animation: chip-pop 0.3s var(--ease-out) both;
}
.check-mark {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.check-item.known .check-mark { background: var(--bull-50); color: var(--bull-600); }
.check-item.miss .check-mark { background: var(--bear-50); color: var(--bear-600); }
.check-item.miss { color: var(--fg-muted); }
.check-mark svg { width: 13px; height: 13px; }
.check-label { min-width: 0; }
.check-value { font-size: var(--t-12); color: var(--fg-subtle); }
.check-item.miss .check-tag {
  font-size: var(--t-12); color: var(--bear-600);
  font-family: var(--font-mono);
}

/* ---- Add context ------------------------------------------- */
.ctx-block { display: flex; flex-direction: column; gap: 10px; }
.ctx-block.flash { animation: ctx-flash 1.1s var(--ease-out); border-radius: var(--r-md); }
@keyframes ctx-flash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mila-accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
.ctx-block textarea { min-height: 84px; }
.ctx-actions { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.redeploy-msg {
  font-size: var(--t-13); display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600;
}
.redeploy-msg.saving { color: var(--fg-muted); }
.redeploy-msg.done { color: var(--bull-600); }
.redeploy-msg svg { width: 15px; height: 15px; }

/* ---- Interactive iMessage compose -------------------------- */
.bcompose {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px 14px; border-top: 0.5px solid rgba(60,60,67,0.16);
  background: #fff; position: relative; z-index: 5;
}
.bcompose-field { position: relative; flex: 1; display: flex; }
.bcompose-input {
  flex: 1; width: 100%; min-height: 36px; border: 1px solid rgba(60,60,67,0.25);
  cursor: default;
  border-radius: 18px; padding: 8px 14px;
  font-size: 15px; line-height: 1.3; letter-spacing: -0.2px; color: #000;
  font-family: -apple-system, system-ui, sans-serif;
  background: #fff; outline: none;
}
.bcompose-faux {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; pointer-events: none;
  font-size: 15px; letter-spacing: -0.2px; color: rgba(60,60,67,0.45);
  font-family: -apple-system, system-ui, sans-serif;
}
.bcompose-caret {
  display: inline-block; width: 2px; height: 18px; margin-right: 4px;
  background: var(--mila-bubble); border-radius: 1px;
  animation: caret-blink 1.05s steps(1, end) infinite;
}
.bcompose-invite .bcompose-input { border-color: color-mix(in srgb, var(--mila-bubble) 55%, rgba(60,60,67,0.25)); }
.bcompose-input::placeholder { color: rgba(60,60,67,0.45); }
.bcompose-input:focus { border-color: rgba(10,132,255,0.6); }
.bcompose-input:disabled { background: #fff; }
.bcompose-send {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; border: 0;
  background: rgba(118,118,128,0.16); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
}
.bcompose-send.active { background: var(--mila-bubble); }
.bcompose-send:disabled { cursor: default; }

/* Pulse the input's blue ring to invite the first message */
.bcompose-highlight .bcompose-input {
  border-color: var(--mila-bubble);
  animation: compose-ring 1.5s var(--ease-in-out) infinite;
}
@keyframes compose-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(10,132,255,0); }
  50% { box-shadow: 0 0 0 4px rgba(10,132,255,0.22); }
}

.phone-idle {
  margin: auto; max-width: 230px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: rgba(60,60,67,0.6); font-family: -apple-system, system-ui, sans-serif;
}
.phone-idle .idle-glyph {
  width: 52px; height: 52px; border-radius: 50%;
  background: #F2F2F7; display: flex; align-items: center; justify-content: center;
  color: rgba(60,60,67,0.5);
}
.phone-idle .idle-glyph svg { width: 26px; height: 26px; }
.phone-idle .idle-title { font-size: 14px; font-weight: 600; color: rgba(60,60,67,0.8); }
.phone-idle .idle-sub { font-size: 13px; line-height: 1.4; }
.phone-idle.loading .idle-glyph { color: var(--mila-accent); }

/* ---- Teach blurb (slides in from right) -------------------- */
.teach-blurb {
  position: fixed; right: 24px; top: 50%; width: 320px; z-index: 150;
  transform: translate(360px, -50%); opacity: 0; pointer-events: none;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-left: 4px solid var(--mila-accent);
  border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
  padding: var(--s-5); display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.34s var(--ease-out), opacity 0.34s var(--ease-out);
}
.teach-blurb.show { transform: translate(0, -50%); opacity: 1; pointer-events: auto; }
.teach-blurb .tb-top { display: flex; align-items: center; gap: 10px; }
.teach-blurb .tb-icon {
  width: 30px; height: 30px; border-radius: var(--r-md); flex-shrink: 0;
  background: var(--mila-accent-soft); color: var(--mila-accent);
  display: flex; align-items: center; justify-content: center;
}
.teach-blurb .tb-icon svg { width: 17px; height: 17px; }
.teach-blurb h4 { font-size: var(--t-15); font-weight: 700; color: var(--fg-strong); }
.teach-blurb p { font-size: var(--t-13); color: var(--fg-muted); line-height: var(--lh-base); }
.teach-blurb .tb-topic { color: var(--fg-strong); font-weight: 600; }
.teach-blurb .btn { align-self: flex-start; }
.tb-close {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  border: 0; background: transparent; color: var(--fg-subtle); cursor: pointer;
  font-size: 17px; line-height: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.tb-close:hover { background: var(--ink-100); color: var(--fg-strong); }

/* ---- Prompt pointing at the phone -------------------------- */
.byo-prompt {
  display: flex; gap: 12px; align-items: center;
  background: var(--mila-accent-soft);
  border: 1px solid color-mix(in srgb, var(--mila-accent) 30%, transparent);
  border-radius: var(--r-md); padding: 14px 16px;
}
.byo-prompt > div { display: flex; flex-direction: column; gap: 3px; }
.byo-prompt strong { font-size: var(--t-14); color: var(--fg-strong); font-weight: 700; }
.byo-prompt span { font-size: var(--t-13); color: var(--fg-muted); line-height: var(--lh-base); }
.byo-prompt b { color: var(--fg-strong); font-weight: 600; }
.byo-prompt-arrow {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; border: 0; padding: 0;
  background: var(--mila-accent); color: var(--mila-accent-fg);
  display: flex; align-items: center; justify-content: center;
  animation: prompt-nudge 1.4s var(--ease-in-out) infinite;
}
button.byo-prompt-arrow { cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
button.byo-prompt-arrow:hover { background: var(--mila-accent-hover, var(--orange-600)); }
button.byo-prompt-arrow:active { transform: scale(0.94); }
.byo-prompt-arrow svg { width: 18px; height: 18px; }
@keyframes prompt-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.byo-prompt-up .byo-prompt-arrow { animation: prompt-nudge-up 1.4s var(--ease-in-out) infinite; }
@keyframes prompt-nudge-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---- End-of-demo note inside the phone --------------------- */
.chat-end-note {
  margin: 10px 6px 4px; padding: 12px 14px;
  background: #F2F2F7; border-radius: 14px;
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 12.5px; line-height: 1.45; color: rgba(60,60,67,0.85);
  text-align: center; animation: bubble-in 0.34s var(--ease-out) both;
}
.bcompose-done .bcompose-input { color: rgba(60,60,67,0.45); }

/* ---- Compact chat text inside the BYO phone ---------------- */
#byo-root .bubble { font-size: 13px; line-height: 1.32; padding: 7px 12px; }
#byo-root .chat-stamp { font-size: 10px; padding: 4px 0 6px; }
#byo-root .start-hint { font-size: 12.5px; padding: 10px 14px; max-width: 200px; }

/* ---- Responsive -------------------------------------------- */
@media (max-width: 860px) {
  .byo-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .byo-intro { order: -2; }
  .byo-title { font-size: clamp(26px, 6vw, 34px); }
  .byo-right { position: static; order: -1; }
  .teach-blurb {
    left: 16px; right: 16px; width: auto; top: auto; bottom: 16px;
    transform: translateY(160%);
  }
  .teach-blurb.show { transform: translateY(0); }
}
@media (max-width: 460px) {
  .byo-url-wrap { flex-direction: column; }
}

/* Mobile loading: just one stable spinner so the screen doesn't move while
   the rotating step text would have flipped between phases. */
@media (max-width: 768px) {
  .byo-main { padding: 12px 0 24px; display: flex; justify-content: center; }
  .byo-main > .container { width: 100%; max-width: 480px; margin: 0 auto; }
  .byo-back { margin-left: 4px; }
  .byo-card { padding: 18px 16px; gap: 12px; }
  .byo-card-head h2 { font-size: 16px; text-align: center; }
  .byo-card-head p { font-size: 12.5px; line-height: 1.4; text-align: center; }
  .byo-title { font-size: clamp(20px, 5.5vw, 26px); text-align: center; }
  .byo-intro { text-align: center; margin-bottom: 8px; }
  /* Hide the rotating progress copy + preview chips — just show the dot. */
  .byo-card .load-steps, .byo-card .load-preview, .byo-card .load-domain { display: none; }
  /* Inject one centered spinner inside the loading card. */
  .byo-card:has(.load-steps)::after {
    content: "";
    width: 40px; height: 40px; align-self: center;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--mila-accent) 20%, transparent);
    border-top-color: var(--mila-accent);
    animation: byo-spin 0.9s linear infinite;
    margin: 14px 0 6px;
  }
  @keyframes byo-spin { to { transform: rotate(360deg); } }
}

/* Mobile business view: vertical stack — phone fills the first viewport
   with the "messages left" counter under it; scrolling reveals the business
   card and the always-visible preview note. No horizontal overflow. */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  .byo-main { padding: 8px 0 24px; }
  .byo-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0 10px;
    max-width: 100%;
  }
  /* Intro headline above-the-fold becomes tighter when the phone is live. */
  .byo-grid:has(.byo-stack) .byo-intro { display: none; }
  /* Phone first (right column normally) — promoted to top, shrunk so the
     "messages left" counter fits beneath it inside one viewport. */
  .byo-grid:has(.byo-stack) .byo-right { order: 0; width: 100%; align-items: center; }
  .byo-grid:has(.byo-stack) .byo-right > div:first-child {
    transform: scale(0.72);
    transform-origin: top center;
    margin-bottom: -150px;
    transition: transform 0.3s ease, margin-bottom 0.3s ease;
  }
  /* When the visitor is mid-typing the input gets text — bring the phone
     forward (zoom in) so they're focused on the composing experience. */
  .byo-grid:has(.byo-stack) .byo-right > div:first-child:has(.compose-input.has-text) {
    transform: scale(0.86);
    margin-bottom: -80px;
  }
  /* Pulsing hint on the compose input until the visitor types — only on
     mobile, only when the input is empty. */
  .byo-grid:has(.byo-stack) .compose-input:not(.has-text) {
    animation: byo-input-pulse 1.7s ease-in-out infinite;
  }
  @keyframes byo-input-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0); }
    50% { box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18); }
  }
  /* Business stack below. */
  .byo-grid:has(.byo-stack) .byo-stack { order: 1; }
  .byo-stack { gap: 10px; }
  /* Compacted business card + alert. */
  .byo-win-biz { padding: 12px 14px; }
  .byo-win-biz .biz-name { font-size: 14px; }
  .byo-win-biz .biz-cat { font-size: 11.5px; }
  .byo-win-biz .biz-desc { font-size: 12.5px; line-height: 1.4; }
  .byo-win-biz .biz-logo { width: 30px; height: 30px; font-size: 17px; }
  .byo-win-biz .check-item { font-size: 12px; }
  .byo-flag-text { font-size: 12px; line-height: 1.4; }
  .byo-disc p { font-size: 11.5px; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
  .preview-line, .check-item, .byo-prompt-arrow, .byo-flag-mark, .bcompose-caret { animation: none; }
  .load-step.active .load-dot::after { animation: none; }
}