/* virai.com design system: generated from the approved homepage template (Oct 2026). */

  :root {
    --bg: #FFFFFF; --surface: #F5F6FF; --surface2: #EEF0FF;
    --ink: #1E1B4B; --muted: #4B4870; --line: #E2E4F6; --line2: #C7CAEB;
    --accent: #4338CA; --accent-hover: #3730A3; --hi: #4338CA;
    --panel: #1E1B4B; --hl: #A5F3FC; --btn-ink: #1E1B4B;
    --dash: 1; --pattern: rgba(67,56,202,.10); --shadow: 0 24px 48px -28px rgba(30,27,75,.35);
    --ava: #4F46E5; --mia: #0F766E; --leo: #B45309; --max: #BE185D; --nova: #15803D;
    color-scheme: light;
  }
  html[data-theme="dark"] {
    --bg: #0E0D1A; --surface: #151432; --surface2: #1F1D45;
    --ink: #FFFFFF; --muted: #B9B7DA; --line: #2A2856; --line2: #46437E;
    --accent: #4F46E5; --accent-hover: #4338CA; --hi: #A5F3FC;
    --panel: #1E1B4B; --hl: #A5F3FC; --btn-ink: #1E1B4B;
    --dash: .55; --pattern: rgba(165,243,252,.08); --shadow: 0 24px 48px -28px rgba(0,0,0,.7);
    --ava: #A5B4FC; --mia: #5EEAD4; --leo: #FCD34D; --max: #F9A8D4; --nova: #86EFAC;
    color-scheme: dark;
  }
  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
      --bg: #0E0D1A; --surface: #151432; --surface2: #1F1D45;
      --ink: #FFFFFF; --muted: #B9B7DA; --line: #2A2856; --line2: #46437E;
      --accent: #4F46E5; --accent-hover: #4338CA; --hi: #A5F3FC;
      --panel: #1E1B4B; --hl: #A5F3FC; --btn-ink: #1E1B4B;
      --dash: .55; --pattern: rgba(165,243,252,.08); --shadow: 0 24px 48px -28px rgba(0,0,0,.7);
      --ava: #A5B4FC; --mia: #5EEAD4; --leo: #FCD34D; --max: #F9A8D4; --nova: #86EFAC;
      color-scheme: dark;
    }
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Outfit", system-ui, sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  ::selection { background: var(--accent); color: #FFFFFF; }
  :focus-visible { outline: 3px solid var(--hi); outline-offset: 3px; border-radius: 6px; }
  a { color: var(--hi); text-underline-offset: 0.2em; }
  h1, h2, h3, p { margin: 0; }
  svg { display: block; }
  .wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
  .hl { color: var(--hi); }
  .muted { color: var(--muted); }
  .ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 14px 24px; border-radius: 999px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; border: 0; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--accent); color: #FFFFFF; }
  .btn-primary:hover { background: var(--accent-hover); color: #FFFFFF; }
  .btn-ghost { border: 1.5px solid var(--line2); color: var(--ink); background: transparent; }
  .btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
  .btn-white { background: #FFFFFF; color: var(--btn-ink); }
  .btn-white:hover { background: #EEF0FF; color: var(--btn-ink); }
  .btn-sm { min-height: 44px; padding: 11px 20px; font-size: 15px; }

  /* Logo */
  .logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; font-size: 30px; line-height: 1; }
  .logo svg { width: 1.13em; height: 1.13em; flex: none; }
  .m-ink { stroke: var(--ink); } .f-ink { fill: var(--ink); } .f-node { fill: var(--hi); }
  .m-dash { stroke: var(--ink); stroke-opacity: var(--dash); }

  /* Header */
  header { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); position: sticky; top: 0; z-index: 20; }
  .nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
  .nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-size: 15px; font-weight: 500; }
  .nav-links a:not(.btn) { color: var(--ink); text-decoration: none; }
  .nav-links a:not(.btn):hover { color: var(--hi); }
  .theme-toggle { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1.5px solid var(--line2); background: transparent; color: var(--ink); cursor: pointer; }
  .theme-toggle:hover { border-color: var(--ink); }
  .theme-toggle .moon { display: none; }
  html[data-theme="dark"] .theme-toggle .sun { display: none; }
  html[data-theme="dark"] .theme-toggle .moon { display: block; }
  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .theme-toggle .sun { display: none; }
    html:not([data-theme="light"]) .theme-toggle .moon { display: block; }
  }
  @media (max-width: 900px) { .nav-links .hide-sm { display: none; } }

  /* Hero */
  .hero-bg { position: relative; overflow: hidden; }
  .hero-bg .net { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--pattern); pointer-events: none; -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 14%, transparent 52%, #000 72%); mask-image: linear-gradient(90deg, #000 0, transparent 14%, transparent 52%, #000 72%); }
  .hero { position: relative; display: flex; flex-wrap: wrap; gap: 56px; align-items: center; padding-top: 88px; padding-bottom: 72px; }
  .hero-copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
  .pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--hi); background: var(--surface2); padding: 8px 14px; border-radius: 999px; }
  .pill i { width: 8px; height: 8px; border-radius: 4px; background: var(--hi); animation: pulse 2s ease-in-out infinite; }
  h1 { font-size: clamp(42px, 6vw, 68px); line-height: 1.02; font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; }
  .lead { font-size: 20px; color: var(--muted); max-width: 580px; }
  .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
  .trust { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; color: var(--muted); }
  .trust span { display: inline-flex; align-items: center; gap: 6px; }
  .trust svg { width: 18px; height: 18px; color: var(--hi); }

  .stage { flex: 1 1 420px; min-width: 0; position: relative; padding: 18px 0 64px; }
  .mock { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow); }
  .mock-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .who { display: flex; align-items: center; gap: 12px; }
  .face { width: 46px; height: 46px; border-radius: 50%; flex: none; }
  .live { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--hi); }
  .wave { display: flex; align-items: center; gap: 3px; height: 18px; }
  .wave b { width: 3px; height: 100%; border-radius: 2px; background: var(--hi); transform-origin: center; animation: wave 1.1s ease-in-out infinite; }
  .wave b:nth-child(2) { animation-delay: .15s } .wave b:nth-child(3) { animation-delay: .3s } .wave b:nth-child(4) { animation-delay: .45s } .wave b:nth-child(5) { animation-delay: .6s }
  @keyframes wave { 0%,100% { transform: scaleY(.3) } 50% { transform: scaleY(1) } }
  @keyframes pulse { 50% { opacity: .35; } }
  .bubble { max-width: 82%; padding: 12px 16px; }
  .bubble-in { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); border-radius: 18px 18px 18px 4px; }
  .bubble-out { align-self: flex-end; background: var(--accent); color: #FFFFFF; border-radius: 18px 18px 4px 18px; }
  .slots { display: flex; gap: 8px; align-self: flex-end; }
  .slot { font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--line2); background: var(--bg); }
  .slot.on { border-color: var(--hi); color: var(--hi); }
  .float { position: absolute; display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); font-size: 14px; animation: bob 6s ease-in-out infinite; }
  .float strong { display: block; font-weight: 600; font-size: 15px; }
  .float small { color: var(--muted); font-size: 13px; }
  .float .tile { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
  .float .tile svg { width: 20px; height: 20px; }
  .f1 { left: -28px; bottom: 0; }
  .f2 { right: -20px; top: -14px; animation-delay: -3s; }
  @keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
  @media (max-width: 1100px) { .f1 { left: 8px; } .f2 { right: 8px; } }
  @media (max-width: 640px) {
    .stage { padding: 0; display: flex; flex-direction: column; gap: 12px; }
    .float { position: relative; left: auto; right: auto; top: auto; bottom: auto; animation: none; }
    .f2 { order: 2; } .f1 { order: 3; }
    .mock { padding: 20px; }
    .mock-head { flex-wrap: wrap; }
  }
  .live { white-space: nowrap; }

  /* Stats */
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
  .stat { border: 1px solid var(--line); border-radius: 20px; padding: 24px 26px; display: flex; align-items: center; gap: 18px; background: var(--bg); }
  .stat .tile { width: 52px; height: 52px; border-radius: 16px; background: var(--surface2); color: var(--hi); display: flex; align-items: center; justify-content: center; flex: none; }
  .stat b { display: block; font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }

  /* Marquee */
  .logos { padding: 56px 0 64px; display: flex; flex-direction: column; gap: 22px; }
  .logos-label { text-align: center; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .track { display: flex; width: max-content; animation: drift 46s linear infinite; }
  .marquee:hover .track { animation-play-state: paused; }
  .group { display: flex; align-items: center; gap: 64px; padding-right: 64px; flex: none; }
  .brand { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 600; color: var(--ink); white-space: nowrap; opacity: .9; }
  .brand svg { width: 30px; height: 30px; flex: none; }
  .brand .ghl { width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: -0.02em; flex: none; }
  @keyframes drift { from { transform: translateX(-33.3333%); } to { transform: translateX(0); } }
  @keyframes drift2 { from { transform: translateX(-50%); } to { transform: translateX(0); } }
  .clients { padding: 64px 0 72px; display: flex; flex-direction: column; gap: 26px; }
  .clients .track { animation: drift2 140s linear infinite; }
  .clients .group { gap: 72px; padding-right: 72px; }
  .client { display: block; flex: none; -webkit-mask-image: var(--m); mask-image: var(--m); background-color: var(--ink); opacity: .62; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: opacity .2s ease; }
  .client:hover { opacity: 1; }
  .apps { padding: 8px 0 72px; display: flex; flex-direction: column; gap: 22px; }
  .soon-wrap { padding-bottom: 96px; display: flex; flex-direction: column; gap: 18px; }

  /* Sections */
  .band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .section { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 40px; }
  h2 { font-size: clamp(34px, 4.4vw, 48px); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
  .section-intro { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
  .section-intro p { font-size: 19px; color: var(--muted); }

  /* Agent cards */
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
  .card { --c: var(--ava); background: var(--bg); border: 1px solid var(--line); border-radius: 24px; padding: 14px 14px 26px; display: flex; flex-direction: column; gap: 16px; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .card > :not(.vis) { margin-left: 14px; margin-right: 14px; }
  .ag-mia { --c: var(--mia); } .ag-leo { --c: var(--leo); } .ag-max { --c: var(--max); } .ag-nova { --c: var(--nova); }
  .vis { height: 200px; border-radius: 16px; background: var(--surface2); background: color-mix(in srgb, var(--c) 12%, var(--surface)); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 16px; }
  .vis .row { display: flex; align-items: center; gap: 10px; background: var(--bg); border-radius: 12px; padding: 8px 12px; font-size: 14px; line-height: 1.35; box-shadow: 0 1px 0 var(--line); }
  .vis .row b { font-weight: 600; }
  .vis .chip { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--bg)); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
  .vis .msg { max-width: 85%; font-size: 14px; padding: 9px 12px; border-radius: 14px; }
  .vis .msg.in { background: var(--bg); align-self: flex-start; border-bottom-left-radius: 4px; }
  .vis .msg.out { background: var(--c); color: var(--bg); align-self: flex-end; border-bottom-right-radius: 4px; font-weight: 500; }
  .vis .bars { display: flex; align-items: flex-end; gap: 8px; height: 76px; padding: 0 4px; }
  .vis .bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--c) 35%, var(--bg)); }
  .vis .bars i:last-child { background: var(--c); }
  .vis .stars { color: #F59E0B; letter-spacing: 1px; font-size: 13px; }
  .vis .pin { width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: var(--bg); display: flex; align-items: center; justify-content: center; flex: none; font-size: 13px; font-weight: 700; }
  .vis .ring { position: relative; width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c); color: var(--bg); }
  .vis .ring::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--c); opacity: .5; animation: ripple 1.8s ease-out infinite; }
  .vis .ring svg { width: 18px; height: 18px; }
  @keyframes ripple { from { transform: scale(.8); opacity: .6 } to { transform: scale(1.35); opacity: 0 } }
  .card-head { display: flex; align-items: center; gap: 14px; }
  .avatar { width: 56px; height: 56px; border-radius: 18px; background: color-mix(in srgb, var(--c) 16%, var(--bg)); color: var(--c); display: flex; align-items: center; justify-content: center; flex: none; position: relative; }
  .avatar svg { width: 28px; height: 28px; }
  .avatar::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; background: #22C55E; border: 3px solid var(--bg); }
  .role { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c); }
  .name { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
  .feats { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; font-size: 14.5px; font-weight: 500; line-height: 1.4; }
  .feats li { display: flex; gap: 8px; align-items: flex-start; }
  .feats svg { flex: none; margin-top: 3px; width: 18px; height: 18px; color: var(--c); }
  .best { font-size: 14px; color: var(--muted); }
  .card .btn { margin-top: auto; align-self: flex-start; }
  .card-cta { background: var(--accent); color: #FFFFFF; border-color: transparent; justify-content: center; padding: 28px; position: relative; overflow: hidden; }
  .card-cta > * { margin: 0 !important; position: relative; }
  .card-cta .deco { position: absolute; right: -30px; bottom: -50px; width: 240px; height: 240px; opacity: .12; }
  .card-cta p { opacity: .92; }
  .card-cta h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
  .plus { width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; }
  .plus svg { width: 26px; height: 26px; }

  .soon-title { font-size: 22px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
  .soon-title span { font-size: 13px; font-weight: 600; color: var(--hi); background: var(--surface2); padding: 4px 10px; border-radius: 999px; }
  .soon { border: 1px dashed var(--line2); border-radius: 20px; padding: 22px; display: flex; gap: 16px; align-items: flex-start; background: var(--bg); }
  .soon .tile { width: 44px; height: 44px; border-radius: 14px; background: var(--surface2); color: var(--hi); display: flex; align-items: center; justify-content: center; flex: none; }
  .soon .body { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
  .soon-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .soon-head strong { font-weight: 600; font-size: 18px; }
  .soon-head a { font-size: 14px; font-weight: 600; text-decoration: none; padding: 10px 0; white-space: nowrap; }
  .soon p { font-size: 15px; color: var(--muted); }
  .tags { font-size: 13px; font-weight: 500; color: var(--muted); }

  /* Steps */
  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
  .step { display: flex; flex-direction: column; gap: 10px; }
  .step-vis { height: 190px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 14px; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; overflow: hidden; }
  .step .n { font-size: 14px; font-weight: 700; color: var(--hi); display: inline-flex; align-items: center; gap: 10px; }
  .step .n::after { content: ""; height: 2px; width: 40px; background: var(--accent); border-radius: 2px; }
  .step h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
  .step p { color: var(--muted); }
  .pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 300px; }
  .pick span { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 9px 12px; border-radius: 12px; background: var(--bg); border: 1.5px solid var(--line); }
  .pick span.on { border-color: var(--hi); color: var(--hi); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hi) 15%, transparent); }
  .pick svg { width: 16px; height: 16px; }
  .call { width: 100%; max-width: 300px; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
  .call .faces { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
  .call .faces .face { width: 30px; height: 30px; }
  .checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; font-size: 14px; font-weight: 500; }
  .checks span { display: flex; align-items: center; gap: 6px; }
  .checks svg { width: 16px; height: 16px; color: #16A34A; }
  .clock { position: relative; width: 150px; height: 150px; }
  .clock svg { width: 150px; height: 150px; }
  .clock .lbl { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .clock .lbl b { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
  .clock .lbl small { font-size: 12px; color: var(--muted); }
  .clock .hand { transform-origin: 75px 75px; animation: spin 12s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Why free */
  .panel { background: var(--panel); color: #FFFFFF; position: relative; overflow: hidden; }
  .free { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 56px; }
  .free-top { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
  .free-copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
  .free-copy p { font-size: 18px; }
  .free-copy .soft { opacity: .88; }
  .free-copy h2 span { color: var(--hl); }
  .compare { flex: 1 1 420px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cmp { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 20px; padding: 22px; }
  .cmp small { display: block; font-size: 14px; opacity: .82; }
  .cmp b { display: block; font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
  .cmp .strike { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .7; }
  .cmp .zero { color: var(--hl); }
  .flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; }
  .flow::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 31px; border-top: 2px dashed rgba(165,243,252,.45); }
  .fstep { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 10px; }
  .fstep .dot { width: 64px; height: 64px; border-radius: 50%; background: #2A2672; border: 2px solid rgba(165,243,252,.5); display: flex; align-items: center; justify-content: center; color: #A5F3FC; }
  .fstep .dot svg { width: 28px; height: 28px; }
  .fstep:last-child .dot { background: #A5F3FC; color: #1E1B4B; border-color: #A5F3FC; }
  .fstep strong { font-weight: 600; font-size: 17px; }
  .fstep small { font-size: 14px; opacity: .8; max-width: 22ch; }
  @media (max-width: 760px) {
    .flow { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .flow::before { left: 31px; right: auto; top: 32px; bottom: 32px; border-top: 0; border-left: 2px dashed rgba(165,243,252,.45); }
    .fstep { flex-direction: row; text-align: left; align-items: center; gap: 16px; padding: 0; }
    .fstep .dot { flex: none; }
  }

  /* FAQ */
  .faq { max-width: 880px; margin: 0 auto; padding: 96px 24px; display: flex; flex-direction: column; gap: 32px; }
  .faq-list { border-top: 1px solid var(--line); }
  details { border-bottom: 1px solid var(--line); padding: 20px 0; }
  summary { cursor: pointer; font-size: 19px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 28px; }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: ""; width: 12px; height: 12px; border-right: 2px solid var(--hi); border-bottom: 2px solid var(--hi); transform: rotate(45deg); transition: transform .2s ease; flex: none; margin-top: -6px; }
  details[open] summary::after { transform: rotate(-135deg); margin-top: 6px; }
  details p { margin-top: 12px; color: var(--muted); max-width: 65ch; }

  /* Contact */
  .contact { padding-top: 96px; padding-bottom: 96px; display: flex; flex-wrap: wrap; gap: 48px; }
  .contact-copy { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
  .contact-copy > p { font-size: 18px; color: var(--muted); }
  .contact-copy .email { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
  .contact-copy .email svg { width: 20px; height: 20px; }
  .callout { margin-top: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: flex; gap: 16px; align-items: center; }
  .callout .tile { width: 48px; height: 48px; border-radius: 14px; background: var(--accent); color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex: none; }
  .callout strong { display: block; font-weight: 600; }
  .callout span { color: var(--muted); font-size: 16px; }
  .tpl-form { flex: 1 1 460px; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 24px; padding: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; box-shadow: var(--shadow); }
  label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
  input, textarea { font: inherit; font-weight: 400; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line2); background: var(--bg); color: var(--ink); caret-color: var(--accent); }
  input:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--surface2); }
  textarea { resize: vertical; }
  .full { grid-column: 1 / -1; }
  form .btn { justify-self: start; }
  .hp { position: absolute; left: -9999px; }
  @media (max-width: 560px) { .tpl-form { grid-template-columns: minmax(0, 1fr); padding: 24px; } }

  /* Closing CTA */
  .closing { padding-top: 96px; padding-bottom: 96px; }
  .closing-box { position: relative; overflow: hidden; background: var(--accent); color: #FFFFFF; border-radius: 32px; padding: 64px 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
  .closing-box .deco { position: absolute; right: 18%; top: -60px; width: 320px; height: 320px; opacity: .12; pointer-events: none; }
  .closing-box > div, .closing-box > a { position: relative; }
  .closing-box > div { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
  .closing-box h2 { font-size: clamp(32px, 4vw, 44px); }
  .closing-box p { font-size: 19px; opacity: .92; }
  @media (max-width: 560px) { .closing-box { padding: 40px 24px; } }

  /* Footer */
  footer { border-top: 1px solid var(--line); }
  .foot { padding-top: 64px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 40px; }
  .foot-top { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
  .foot-brand { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; max-width: 360px; }
  .foot-brand p { color: var(--muted); font-size: 15px; }
  .foot-brand .addr { font-size: 14px; }
  .foot-cols { display: flex; flex-wrap: wrap; gap: 48px; font-size: 15px; }
  .foot-cols div { display: flex; flex-direction: column; gap: 10px; }
  .foot-cols strong { font-weight: 600; }
  .foot-cols a { color: var(--muted); text-decoration: none; }
  .foot-cols a:hover { color: var(--ink); }
  .legal-foot { border-top: 1px solid var(--line); padding-top: 24px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); }

  /* Reveal on scroll */
  .reveal { opacity: 1; transform: none; }
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
  .js .reveal.in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .reveal { opacity: 1; transform: none; }
    .track { width: auto; flex-wrap: wrap; justify-content: center; }
    .group { flex-wrap: wrap; justify-content: center; padding: 0 24px; row-gap: 20px; }
    .group[aria-hidden="true"] { display: none; }
  }

  /* ===== shared site additions ===== */
  .container { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
  .narrow { max-width: 820px; }
  .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 10px; }
  .skip-link:focus { left: 16px; }
  h1 em, h2 em { font-style: normal; color: var(--hi); }
  .burger { display: none; width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid var(--line2); background: transparent; color: var(--ink); align-items: center; justify-content: center; cursor: pointer; }
  .burger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .mnav { display: flex; flex-direction: column; padding: 4px 24px 20px; border-top: 1px solid var(--line); }
  .mnav[hidden] { display: none; }
  .mnav a:not(.btn) { padding: 14px 0; color: var(--ink); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--line); }
  .mnav .btn { margin-top: 16px; }
  @media (max-width: 900px) { .burger { display: inline-flex; } }
  @media (max-width: 560px) { .nav-links .nav-cta { display: none; } }
  .nav-min .nav-links { gap: 12px; }

  /* client logos: 3 alternating rows of chips */
  .clients { padding: 56px 0 64px; display: flex; flex-direction: column; gap: 10px; }
  .crow { overflow: hidden; padding: 5px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .ctrack { display: flex; width: max-content; animation: cscroll 80s linear infinite; }
  .crow.rev .ctrack { animation-direction: reverse; animation-duration: 95s; }
  .crow:nth-child(3) .ctrack { animation-duration: 70s; }
  .crow:hover .ctrack { animation-play-state: paused; }
  .cgroup { display: flex; gap: 14px; padding-right: 14px; flex: none; }
  @keyframes cscroll { from { transform: translateX(-50%); } to { transform: translateX(0); } }
  .chipc { flex: none; height: 76px; min-width: 150px; padding: 0 28px; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); transition: border-color .2s ease, background-color .2s ease; }
  .chipc:hover { border-color: var(--line2); background: var(--surface); }
  .chipc:hover .client { opacity: 1; }
  .band .chipc { background: var(--bg); }
  @media (max-width: 600px) { .chipc { height: 60px; min-width: 118px; padding: 0 18px; border-radius: 14px; } .chipc .client { zoom: .78; } .cgroup { gap: 10px; padding-right: 10px; } }
  .clients .logos-label, .apps .logos-label { margin-top: 18px; }
  .client { display: block; flex: none; -webkit-mask-image: var(--m); mask-image: var(--m); background-color: var(--ink); opacity: .66; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: opacity .2s ease; }
  .apps { padding: 8px 0 72px; display: flex; flex-direction: column; gap: 4px; }

  /* notify buttons styled as links */
  .notify { font: inherit; font-size: 14px; font-weight: 600; color: var(--hi); background: none; border: 0; padding: 10px 0; cursor: pointer; white-space: nowrap; }
  .notify:hover { text-decoration: underline; text-underline-offset: .2em; }
  .notify.done { color: var(--muted); cursor: default; text-decoration: none; }
  .soon-wrap { padding-bottom: 96px; display: flex; flex-direction: column; gap: 18px; }

  /* dialogs (lead form + waitlist) */
  dialog.lead { font-size: 16px; max-width: none; border: 0; padding: 0; border-radius: 24px; width: min(480px, calc(100% - 32px)); max-height: calc(100% - 32px); background: var(--bg); color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0,0,0,.55); }
  dialog.lead::backdrop { background: rgba(14,13,26,.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .lead-in { display: flex; flex-direction: column; gap: 14px; padding: 30px 28px 24px; position: relative; }
  .lead-in .x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 999px; border: 0; background: var(--surface2); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
  .lead-head { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
  .lead-head svg { width: 40px; height: 40px; flex: none; border-radius: 12px; }
  .lead-in h2 { font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; padding-right: 40px; }
  .lead-sub, .n-sub { color: var(--muted); font-size: 15.5px; }
  .field { display: flex; flex-direction: column; gap: 6px; }
  .field label { font-size: 14px; font-weight: 600; display: block; }
  .opt { color: var(--muted); font-weight: 500; }
  .phone { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; }
  select { font: inherit; font-size: 16px; padding: 12px 10px; border-radius: 12px; border: 1px solid var(--line2); background: var(--bg); color: var(--ink); }
  input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
  .err { color: #DC2626; font-size: 14px; font-weight: 500; min-height: 0; margin: 0; }
  .err:empty { display: none; }
  html[data-theme="dark"] .err { color: #FCA5A5; }
  @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .err { color: #FCA5A5; } }
  .ok { color: #16A34A; font-weight: 600; margin: 0; }
  .consent { font-size: 12px; color: var(--muted); line-height: 1.5; }
  .lead-in .btn { width: 100%; }
  .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .soon-pill { align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--hi); background: var(--surface2); padding: 4px 10px; border-radius: 999px; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  form.c-form { flex: 1 1 460px; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow); }
  .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  @media (max-width: 560px) { .two { grid-template-columns: minmax(0, 1fr); } form.c-form { padding: 24px; } }
  .c-form .btn { align-self: flex-start; }
  .fine { font-size: 12.5px; color: var(--muted); margin: 0; }

  /* landers */
  .lander { position: relative; padding-top: 64px; padding-bottom: 40px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; max-width: 980px; }
  .lander .pill { align-self: center; }
  .lander h1 { font-size: clamp(36px, 5.2vw, 60px); max-width: 18ch; }
  .lander .lead { max-width: 640px; margin: 0 auto; }
  .foot-cols nav { display: flex; flex-direction: column; gap: 10px; }
  .free > .free-copy { flex: none; }
  .lander2 { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-areas: "top vid" "cta vid"; column-gap: 56px; row-gap: 26px; padding-top: 72px; padding-bottom: 56px; position: relative; }
  .l-top { grid-area: top; display: flex; flex-direction: column; gap: 20px; align-self: end; }
  .l-top h1 { font-size: clamp(38px, 4.6vw, 58px); }
  .l-top .lead { margin: 0; }
  .l-vid { grid-area: vid; align-self: center; }
  .l-cta { grid-area: cta; align-self: start; display: flex; flex-direction: column; gap: 18px; }
  .l-cta .cta-stack { align-items: flex-start; }
  .l-cta .perks { justify-content: flex-start; }
  @media (max-width: 900px) {
    .lander2 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "vid" "cta"; text-align: center; padding-top: 48px; }
    .l-top .pill { align-self: center; }
    .l-cta .cta-stack { align-items: center; }
    .l-cta .perks { justify-content: center; }
  }
  .video-card { width: 100%; max-width: 560px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); text-align: left; }
  .video-card video { display: block; width: 100%; aspect-ratio: 1 / 1; background: #0E0D1A; object-fit: cover; }
  /* square (1:1) VSL: whole frame visible, never cropped or stretched, tap for sound */
  .vid-box { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #0E0D1A; }
  .vid-box video { display: block; width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
  .vid-box .unmute { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); border: 0; cursor: pointer;
    padding: 12px 22px; border-radius: 999px; font: 600 15px Outfit, sans-serif; color: #fff;
    background: rgba(67, 56, 202, .92); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); animation: vpulse 1.6s ease-in-out infinite; }
  .vid-box .unmute:hover { background: #4338ca; }
  @keyframes vpulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.06); } }
  @media (max-width: 400px) { .vid-box .unmute { padding: 10px 18px; font-size: 14px; } }
.video-card iframe { display: block; width: 100%; aspect-ratio: 1 / 1; border: 0; background: transparent; border-radius: inherit; }
  .video-note { margin: 0; padding: 16px 22px; font-size: 15px; color: var(--muted); }
  .video-note strong { color: var(--ink); }
  .cta-stack { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .btn-lg { min-height: 58px; padding: 16px 32px; font-size: 18px; }
  .micro { font-size: 14px; color: var(--muted); margin: 0; }
  .perks { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .perks li { display: inline-flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px 8px 8px; font-size: 15px; font-weight: 500; }
  .perks .ico, .ability .ico { width: 34px; height: 34px; border-radius: 50%; background: var(--surface2); color: var(--hi); display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .perks .ico svg, .ability .ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .does { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; }
  @media (max-width: 900px) { .does { grid-template-columns: minmax(0, 1fr); } }
  .does .card { position: sticky; top: 96px; }
  .abilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  @media (max-width: 640px) { .abilities { grid-template-columns: minmax(0, 1fr); } }
  .ability { display: flex; gap: 14px; align-items: flex-start; background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 20px; }
  .ability .ico { width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--c, var(--hi)) 14%, var(--bg)); color: var(--c, var(--hi)); }
  .ability .ico svg { width: 22px; height: 22px; }
  .ability b { display: block; font-weight: 600; font-size: 17px; margin-bottom: 2px; }
  .ability p { color: var(--muted); font-size: 15px; margin: 0; }

  /* thank-you */
  .ty-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  @media (max-width: 760px) { .ty-steps { grid-template-columns: minmax(0, 1fr); } }
  .ty-step { background: var(--bg); border: 1px solid var(--line); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 12px; }
  .ty-step .num { width: 44px; height: 44px; border-radius: 14px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
  .ty-step h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
  .ty-step p { color: var(--muted); margin: 0; }
  .ty-step p strong { color: var(--ink); }
  .warn { background: color-mix(in srgb, #F59E0B 14%, var(--bg)); border-radius: 12px; padding: 12px 14px; color: var(--ink) !important; font-size: 15px; font-weight: 500; }
  .included { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .included li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--line2); }
  .included li > span:first-child { display: flex; align-items: center; gap: 12px; }
  .included .chk { width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, #16A34A 16%, var(--bg)); color: #16A34A; display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .included .chk svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .tag-free { font-size: 12px; font-weight: 700; color: #16A34A; background: color-mix(in srgb, #16A34A 14%, var(--bg)); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
  .total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; }
  .total .lbl { font-weight: 600; font-size: 18px; }
  .total .val { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; color: var(--hi); }
  .inc-card { background: var(--bg); border: 1px solid var(--line); border-radius: 24px; padding: 10px 28px 26px; box-shadow: var(--shadow); }
  .honest { display: flex; flex-direction: column; gap: 14px; font-size: 18px; max-width: 760px; }
  .honest p { margin: 0; opacity: .9; }
  .honest strong { opacity: 1; }

  /* page hero + legal + about */
  .page-hero { position: relative; padding: 88px 0 40px; }
  .page-hero h1 { font-size: clamp(38px, 5vw, 58px); margin-top: 18px; }
  .page-hero .lede { font-size: 20px; color: var(--muted); margin-top: 18px; max-width: 640px; }
  .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--hi); background: var(--surface2); padding: 8px 14px; border-radius: 999px; }
  .legal { max-width: 820px; padding-bottom: 96px; }
  .legal h2 { font-size: 26px; letter-spacing: -0.02em; margin: 44px 0 12px; scroll-margin-top: 90px; }
  .legal h3 { font-size: 19px; margin: 26px 0 8px; }
  .legal p, .legal li { color: var(--muted); font-size: 16.5px; line-height: 1.7; }
  .legal p { margin: 0 0 14px; }
  .legal ul, .legal ol { padding-left: 22px; margin: 0 0 14px; }
  .legal strong, .legal b { color: var(--ink); }
  .legal table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; }
  .legal th, .legal td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
  .values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
  .value { background: var(--bg); border: 1px solid var(--line); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
  .value .tile { width: 48px; height: 48px; border-radius: 14px; background: var(--surface2); color: var(--hi); display: flex; align-items: center; justify-content: center; }
  .value h3 { font-size: 20px; font-weight: 600; }
  .value p { color: var(--muted); margin: 0; }
  .prose { display: flex; flex-direction: column; gap: 16px; font-size: 18px; color: var(--muted); max-width: 720px; }
  .prose p { margin: 0; }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
  @media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
  .c-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
  .c-list li { display: flex; gap: 14px; align-items: flex-start; background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
  .c-list .tile { width: 44px; height: 44px; border-radius: 14px; background: var(--surface2); color: var(--hi); display: flex; align-items: center; justify-content: center; flex: none; }
  .c-list strong { display: block; font-weight: 600; }
  .c-list span { color: var(--muted); }
  .center { text-align: center; }
  .nf { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding: 96px 24px; }
  .nf b { font-size: clamp(90px, 16vw, 160px); line-height: 1; letter-spacing: -0.05em; color: var(--hi); }

  /* client logo masks */
  .cl-rusticfurnitureoutlet{--m:url(clients/rusticfurnitureoutlet.png)}
  .cl-ascensionbrands{--m:url(clients/ascensionbrands.png)}
  .cl-lanterngear{--m:url(clients/lanterngear.png)}
  .cl-carved{--m:url(clients/carved.png)}
  .cl-advancedmixology{--m:url(clients/advancedmixology.png)}
  .cl-canvasvows{--m:url(clients/canvasvows.png)}
  .cl-scarlettos{--m:url(clients/scarlettos.png)}
  .cl-spoonk{--m:url(clients/spoonk.png)}
  .cl-teambeachbody{--m:url(clients/teambeachbody.png)}
  .cl-thedorchesterclinic{--m:url(clients/thedorchesterclinic.png)}
  .cl-horizonpayments{--m:url(clients/horizonpayments.png)}
  .cl-illevity{--m:url(clients/illevity.png)}
  .cl-jenniferbellbenefits{--m:url(clients/jenniferbellbenefits.png)}
  .cl-monda-gallery{--m:url(clients/monda-gallery.png)}
  .cl-savethegirls{--m:url(clients/savethegirls.png)}
  .cl-dress-code{--m:url(clients/dress-code.png)}
  .cl-whyweightonline{--m:url(clients/whyweightonline.png)}
  .cl-amber-lilyestrom{--m:url(clients/amber-lilyestrom.png)}
  .cl-bstrd{--m:url(clients/bstrd.png)}
  .cl-carolina-resorts-vacations{--m:url(clients/carolina-resorts-vacations.png)}
  .cl-claudiagcollection{--m:url(clients/claudiagcollection.png)}
  .cl-davetaylortraining{--m:url(clients/davetaylortraining.png)}
  .cl-dgdtransport-go-freight{--m:url(clients/dgdtransport-go-freight.png)}
  .cl-drcynthiacolon{--m:url(clients/drcynthiacolon.png)}
  .cl-eyelashesstore{--m:url(clients/eyelashesstore.png)}
  .cl-franharris{--m:url(clients/franharris.png)}
  .cl-getmainelobster{--m:url(clients/getmainelobster.png)}
  .cl-guerrillazen{--m:url(clients/guerrillazen.png)}
  .cl-healthyglow{--m:url(clients/healthyglow.png)}
  .cl-homesitedirect{--m:url(clients/homesitedirect.png)}
  .cl-iclinic{--m:url(clients/iclinic.png)}
  .cl-jamescorwin{--m:url(clients/jamescorwin.png)}
  .cl-lundeautosales{--m:url(clients/lundeautosales.png)}
  .cl-maryhendersoncoaching{--m:url(clients/maryhendersoncoaching.png)}
  .cl-mountainluxury{--m:url(clients/mountainluxury.png)}
  .cl-owrsfirm{--m:url(clients/owrsfirm.png)}
  .cl-theplumbingco{--m:url(clients/theplumbingco.png)}
  .cl-toothbank{--m:url(clients/toothbank.png)}
  .cl-visionlabart{--m:url(clients/visionlabart.png)}
  .cl-wanttosellnow{--m:url(clients/wanttosellnow.png)}
  .cl-wyantphoto{--m:url(clients/wyantphoto.png)}
  .cl-yogabyjulia{--m:url(clients/yogabyjulia.png)}