/* ============================================================
   DamosX design system
   Palette via CSS variables per [data-theme]. Default: near-black
   with green accent (matches the admin reference). Themes swap the
   accent + icon set.
   ============================================================ */

/* DamosX brand theme — dark with the logo's red + white. Default. */
:root, [data-theme="dark-red"] {
  --bg: #0a0808;
  --bg-glow: rgba(227, 30, 36, .09);
  --surface: #131010;
  --surface-2: #1a1515;
  --surface-3: #221b1b;
  --border: #2e2525;
  --border-strong: #473636;
  --text: #f4eeee;
  --muted: #a89a9a;
  --accent: #e31e24;
  --accent-2: #b3161b;
  --accent-soft: rgba(227, 30, 36, .14);
  --accent-contrast: #ffffff;
  --danger: #ff6b6b;
  --warn: #f59e0b;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 10px 40px rgba(0,0,0,.5);
}

[data-theme="dark-green"] {
  --bg: #070a08;
  --bg-glow: rgba(34, 197, 94, .07);
  --surface: #0e1210;
  --surface-2: #141a16;
  --surface-3: #1a221c;
  --border: #223026;
  --border-strong: #2e4234;
  --text: #e8f0ea;
  --muted: #8fa899;
  --accent: #22c55e;
  --accent-2: #16a34a;
  --accent-soft: rgba(34, 197, 94, .12);
  --accent-contrast: #04140a;
}

[data-theme="dark-blue"] {
  --bg: #07090e;
  --bg-glow: rgba(59, 130, 246, .08);
  --surface: #0d1117;
  --surface-2: #12181f;
  --surface-3: #182028;
  --border: #1f2b3a;
  --border-strong: #2b3d52;
  --text: #e7edf3;
  --muted: #8aa0b3;
  --accent: #3b82f6;
  --accent-2: #2563eb;
  --accent-soft: rgba(59, 130, 246, .12);
  --accent-contrast: #ffffff;
}

[data-theme="orange"] {
  --bg: #0c0805;
  --bg-glow: rgba(249, 115, 22, .08);
  --surface: #151009;
  --surface-2: #1c150c;
  --surface-3: #241b0f;
  --border: #33250f;
  --border-strong: #4a3517;
  --text: #f3ede5;
  --muted: #b3a08a;
  --accent: #f97316;
  --accent-2: #ea580c;
  --accent-soft: rgba(249, 115, 22, .12);
  --accent-contrast: #1a0d02;
}

[data-theme="light"] {
  --bg: #f6f4f4;
  --bg-glow: rgba(227, 30, 36, .08);
  --surface: #ffffff;
  --surface-2: #f1eded;
  --surface-3: #e9e3e3;
  --border: #ded4d4;
  --border-strong: #c6b8b8;
  --text: #171010;
  --muted: #6b5b5b;
  --accent: #d61c22;
  --accent-2: #b3161b;
  --accent-soft: rgba(227, 30, 36, .10);
  --accent-contrast: #ffffff;
  --shadow: 0 10px 30px rgba(40,20,22,.12);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
/* The hidden attribute must always win, even over display:flex/grid classes. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(900px 420px at 75% -100px, var(--bg-glow), transparent 60%),
    radial-gradient(700px 380px at 10% 30%, var(--bg-glow), transparent 65%),
    var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  margin: 0;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: none; filter: brightness(1.15); }
h1, h2, h3 { letter-spacing: -.02em; }

/* ---------- navbar ---------- */
.navbar-dx {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.4rem;
  padding: .8rem 2rem;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.navbar-dx .brand {
  font-weight: 800; font-size: 1.15rem; color: var(--text);
  display: inline-flex; align-items: center; gap: .5rem;
}
.navbar-dx .brand .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
}
.navbar-dx .brand em { color: var(--accent); font-style: normal; }
.navbar-dx a.nav-link { color: var(--muted); font-weight: 500; font-size: .95rem; }
.navbar-dx a.nav-link:hover, .navbar-dx a.nav-link.active { color: var(--text); }
.navbar-dx .spacer { flex: 1; }

/* nav items as buttons */
.nav-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .9rem; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-weight: 600; font-size: .9rem;
  transition: border-color .12s ease, background .12s ease;
}
.nav-btn:hover { border-color: var(--accent); background: var(--surface-3); text-decoration: none; }

/* support online/offline dot */
.dot-status { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 8px; }
.dot-status.on { background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: pulse 2s infinite; }
.dot-status.off { background: var(--muted); opacity: .6; }

/* language switcher */
.lang-wrap { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .7rem; border-radius: 9px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-size: .85rem; font-weight: 700;
}
.lang-btn:hover { border-color: var(--accent); }
.lang-flag { font-size: 1.05rem; line-height: 1; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 70;
  min-width: 190px; padding: .35rem;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.lang-menu form { margin: 0; }
.lang-item {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  padding: .5rem .65rem; border: 0; border-radius: 8px; cursor: pointer;
  background: none; color: var(--text); font: inherit; font-size: .9rem; text-align: start;
}
.lang-item { text-decoration: none; }
.lang-item:hover { background: var(--surface-2); }
.lang-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }

/* ---------- RTL adjustments ---------- */
[dir="rtl"] .navbar-dx .brand { margin-inline-end: .5rem; }
[dir="rtl"] .hero-split .hero-copy .cta-row { justify-content: flex-start; }
[dir="rtl"] .price-card ul.feat li { padding: .4rem 1.6rem .4rem 0; }
[dir="rtl"] .price-card ul.feat li::before { left: auto; right: 0; }
[dir="rtl"] .md-drawer { left: 0; right: auto; border-left: 0; border-right: 1px solid var(--border-strong); transform: translateX(-100%); }
[dir="rtl"] .md-drawer.open { transform: translateX(0); }
[dir="rtl"] .md-close { float: left; }
[dir="rtl"] .chat-msg.customer { align-self: flex-start; }
[dir="rtl"] .chat-msg.support { align-self: flex-end; }
[dir="rtl"] .faq summary::after { right: auto; left: 1.1rem; }
[dir="rtl"] .admin-side { border-right: 0; border-left: 1px solid var(--border); }
[dir="rtl"] .bell-panel { right: auto; left: 0; }
[dir="rtl"] .marquee-track { animation-direction: reverse; }

/* credits chip */
.credits-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .8rem; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--text); font-size: .88rem; white-space: nowrap;
}
.credits-chip:hover { text-decoration: none; filter: brightness(1.1); }
.credits-chip svg { width: 15px; height: 15px; color: var(--accent); }
.credits-chip b { font-size: .98rem; }
.credits-chip .cc-lbl { color: var(--muted); font-size: .8rem; }
.credits-chip.none { background: var(--surface-2); border-color: var(--border); }
@media (max-width: 860px) { .credits-chip .cc-lbl { display: none; } }

.container-dx { max-width: 1160px; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; }

/* ---------- notification bell ---------- */
.bell-wrap { position: relative; }
.bell-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  transition: color .12s ease, border-color .12s ease;
}
.bell-btn:hover, .bell-btn.has-unread { color: var(--text); border-color: var(--accent); }
.bell-btn svg { width: 19px; height: 19px; }
.bell-count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: var(--accent-contrast);
  font-size: .68rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.bell-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 340px; max-width: 88vw; z-index: 60;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.bell-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem .9rem; border-bottom: 1px solid var(--border); }
.bell-head a { font-size: .8rem; }
.bell-list { max-height: 380px; overflow-y: auto; }
.bell-empty { padding: 1.6rem; text-align: center; color: var(--muted); font-size: .88rem; }
.bell-item { display: block; padding: .7rem .9rem; border-bottom: 1px solid var(--border); color: var(--text); }
.bell-item:hover { background: var(--surface-2); text-decoration: none; }
.bell-item.unread { background: var(--accent-soft); }
.bi-title { font-weight: 700; font-size: .9rem; }
.bi-body { color: var(--muted); font-size: .82rem; margin-top: .15rem; }
.bi-at { color: var(--muted); font-size: .72rem; margin-top: .25rem; }

/* ---------- notification popup ---------- */
.npopup-backdrop {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); backdrop-filter: blur(3px); padding: 1.5rem;
}
.npopup {
  position: relative; width: 100%; max-width: 480px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--accent); border-radius: var(--radius);
  box-shadow: var(--shadow), 0 0 60px color-mix(in srgb, var(--accent) 18%, transparent);
  padding: 1.8rem;
}
.npopup h3 { margin: 0 0 .6rem; }
.npopup-body { color: var(--muted); line-height: 1.6; }
.npopup-x {
  position: absolute; top: .8rem; right: .9rem; background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 1rem;
}
.npopup-x:hover { color: var(--text); }

/* ---------- cards & panels ---------- */
.card-dx {
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 92%, black) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  margin-bottom: 1.4rem;
}
.card-dx.pad-lg { padding: 2.2rem; }
.muted { color: var(--muted); }

/* ---------- buttons ---------- */
.btn-dx {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
  color: var(--accent-contrast);
  border: 0; border-radius: 10px;
  padding: .68rem 1.35rem;
  cursor: pointer; font-weight: 700; font-size: .95rem;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-dx:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-dx.secondary {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-strong); box-shadow: none;
}
.btn-dx.lg { padding: .85rem 1.8rem; font-size: 1.02rem; border-radius: 12px; }
.btn-dx.ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--text); box-shadow: none; }

/* ---------- forms ---------- */
.form-control-dx, select.form-control-dx {
  width: 100%; padding: .62rem .8rem;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: .95rem; outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control-dx:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
label { display: block; margin: .8rem 0 .35rem; color: var(--muted); font-size: .88rem; font-weight: 600; }
input[type="file"].form-control-dx { padding: .5rem; }

/* validation: hide the summary when there is nothing to show */
.validation-summary-valid { display: none; }
.alert-dx { padding: .85rem 1.1rem; border-radius: 10px; margin-bottom: 1.1rem; border: 1px solid var(--border); }
.alert-dx.error { border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: #fecaca; background: rgba(239,68,68,.09); }
.alert-dx.ok { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--text); background: var(--accent-soft); }
.alert-dx ul { margin: 0; padding-left: 1.1rem; }

/* ---------- landing: hero ---------- */
.hero {
  text-align: center;
  padding: 4.2rem 1rem 3rem;
}
.hero .eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 1rem;
}
.hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  margin: 0 0 1rem; line-height: 1.08; font-weight: 800;
}
.hero h1 .grad {
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, white));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { color: var(--muted); font-size: 1.12rem; max-width: 640px; margin: 0 auto 1.8rem; line-height: 1.6; }
.hero .cta-row { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

.stat-row {
  display: flex; gap: 2.6rem; justify-content: center; flex-wrap: wrap;
  margin: 2.6rem auto 0;
}
.stat-row .stat { text-align: center; }
.stat-row .stat b { display: block; font-size: 1.7rem; color: var(--text); }
.stat-row .stat span { color: var(--muted); font-size: .85rem; }

/* ---------- video hero ---------- */
.hero-video-wrap { position: relative; border-radius: var(--radius); overflow: hidden; margin-top: .6rem; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .32; pointer-events: none;
}
.hero-video-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(720px 340px at 22% 30%, transparent, color-mix(in srgb, var(--bg) 78%, transparent) 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 35%, transparent) 0%, var(--bg) 98%);
}
.hero-video-wrap .hero { position: relative; z-index: 1; padding-left: 1.6rem; padding-right: 1.6rem; }

/* ---------- supported makes marquee ---------- */
.marquee {
  overflow: hidden; position: relative;
  border-block: 1px solid var(--border);
  margin: 1.6rem 0 0; padding: .85rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: inline-flex; gap: 2.6rem; white-space: nowrap; animation: marquee 48s linear infinite; }
.marquee-logos { padding: 1.3rem 0; }
.marquee-logos .marquee-track { gap: 3rem; align-items: center; animation-duration: 140s; }
.marquee-logo { display: inline-flex; align-items: center; }
.marquee-logo img {
  height: 64px; width: auto; display: block;
  opacity: .9; filter: grayscale(10%);
  transition: opacity .15s ease, filter .15s ease, transform .15s ease;
}
.marquee-logo:hover img { opacity: 1; filter: none; transform: scale(1.15); }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  color: var(--muted); font-weight: 800; font-size: .92rem;
  letter-spacing: .14em; text-transform: uppercase;
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- why grid ---------- */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.why {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem;
}
.why-ic {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: .85rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
}
.why-ic svg { width: 22px; height: 22px; }
.why h4 { margin: 0 0 .35rem; }
.why p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: .6rem; overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; font-weight: 700; font-size: .97rem;
  padding: 1rem 1.2rem; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%);
  color: var(--accent); font-size: 1.25rem; font-weight: 800; transition: transform .18s ease;
}
.faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq[open] { border-color: var(--accent); }
.faq p { margin: 0; padding: 0 1.2rem 1.1rem; color: var(--muted); line-height: 1.6; font-size: .93rem; }

/* ---------- hero split + demo card ---------- */
.hero-split {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem;
  align-items: center; text-align: left; padding: 3.6rem 0 2.4rem;
}
.hero-split .hero-copy .cta-row { justify-content: flex-start; }
.hero-split .stat-row { grid-column: 1 / -1; justify-content: center; margin-top: 1.4rem; }
@media (max-width: 880px) {
  .hero-split { grid-template-columns: 1fr; text-align: center; }
  .hero-split .hero-copy .cta-row { justify-content: center; }
  .hero-demo { max-width: 420px; margin: 0 auto; }
}

.demo-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.2rem;
  box-shadow: var(--shadow), 0 0 60px color-mix(in srgb, var(--accent) 10%, transparent);
  animation: demo-loop 7s infinite;
}
@keyframes demo-loop { 0%, 100% { opacity: 1 } }
.demo-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .9rem; }
.demo-head .dot-r, .demo-head .dot-y, .demo-head .dot-g { width: 9px; height: 9px; border-radius: 50%; }
.demo-head .dot-r { background: #f87171; } .demo-head .dot-y { background: #fbbf24; } .demo-head .dot-g { background: #34d399; }
.demo-title { margin-left: .5rem; font-weight: 700; font-size: .85rem; color: var(--muted); }
.demo-badge {
  margin-left: auto; font-size: .62rem; font-weight: 800; letter-spacing: .12em;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft); padding: .12rem .5rem; border-radius: 999px;
  animation: pulse 1.6s infinite;
}
@keyframes pulse { 50% { opacity: .45 } }
.demo-file {
  display: flex; gap: .7rem; align-items: center;
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .65rem .75rem; margin-bottom: .8rem;
}
.demo-file .demo-fi {
  width: 38px; height: 38px; border-radius: 9px; flex: 0 0 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: .7rem;
}
.demo-file b { display: block; font-size: .84rem; }
.demo-file small { color: var(--muted); font-size: .72rem; }
.demo-row {
  display: flex; align-items: center; gap: .55rem;
  font-size: .86rem; font-weight: 600; padding: .42rem .2rem;
  opacity: 0; animation: demo-in .5s forwards; animation-delay: var(--d, 0s);
}
.demo-row .demo-sub { margin-left: auto; color: var(--muted); font-weight: 500; font-size: .74rem; }
@keyframes demo-in { to { opacity: 1 } }
.demo-chk {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-size: .72rem; font-weight: 800;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.demo-progress {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--surface-3); margin: .7rem 0 .8rem;
}
.demo-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  animation: demo-fill 2.2s ease-out forwards; animation-delay: 2.2s;
}
@keyframes demo-fill { to { width: 100% } }
.demo-done {
  display: flex; align-items: center; gap: .5rem;
  font-size: .86rem; color: var(--accent); font-weight: 700;
  opacity: 0; animation: demo-in .5s forwards; animation-delay: 4.4s;
}
.demo-done-ic {
  width: 24px; height: 24px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-contrast); font-size: .85rem;
}

/* ---------- PNG module icons (set chosen server-side per theme) ---------- */
.mi img.mi-png { width: 100%; height: 100%; object-fit: contain; }

/* Light theme: the icon artwork has white linework, invisible on a light card.
   Sit every solution icon on a dark rounded puck so it stays legible and on-brand. */
[data-theme="light"] .module-tile .mi,
[data-theme="light"] .solution-tile .mi,
[data-theme="light"] .md-head .md-ic {
  background: #141010;
  border: 1px solid #2a2020;
  border-radius: 14px;
  padding: 9px;
}
[data-theme="light"] .solution-tile .mi { border-radius: 11px; padding: 6px; }
[data-theme="light"] .md-head .md-ic { border-radius: 12px; padding: 8px; }
/* keep the inline-SVG fallback (uses currentColor) visible on the dark puck too */
[data-theme="light"] .mi svg { color: var(--accent); }

/* ---------- brand logo ---------- */
.brand-logo { height: 30px; width: auto; display: block; }
.footer-dx .brand-logo { height: 24px; opacity: .85; }

/* ---------- promo band ---------- */
.promo-band { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2.6rem; }
.promo-band img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); border: 1px solid var(--border);
}
@media (max-width: 720px) { .promo-band { grid-template-columns: 1fr; } }
/* the shipped promo art is wide banner strips — stack them full width */
.promo-band.promo-stack { grid-template-columns: 1fr; max-width: 860px; margin-inline: auto; }
.promo-band.promo-stack img { border: 0; background: transparent; }

/* ---------- drag & drop upload ---------- */
.dropzone {
  position: relative; text-align: center;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 2.4rem 1.2rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.dropzone:hover { border-color: var(--accent); }
.dropzone.drag {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface-2));
  transform: scale(1.005);
}
.dropzone input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.dropzone .dz-ic {
  width: 52px; height: 52px; margin: 0 auto .8rem; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
}
.dropzone .dz-ic svg { width: 26px; height: 26px; }
.dropzone .dz-title { font-weight: 700; }
.dropzone .dz-sub { color: var(--muted); font-size: .85rem; margin-top: .25rem; }
.dropzone .dz-file {
  display: none; margin-top: 1rem; padding: .6rem .9rem;
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--radius-sm); font-weight: 700; font-size: .9rem;
}
.dropzone.has-file .dz-file { display: inline-flex; align-items: center; gap: .5rem; }
.dropzone.has-file .dz-title, .dropzone.has-file .dz-sub { display: none; }

/* ---------- module search ---------- */
.module-search {
  position: relative; display: flex; align-items: center; gap: .7rem;
  max-width: 560px; margin: 0 auto 1.6rem;
}
.module-search svg { position: absolute; left: .8rem; width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.module-search input { padding-left: 2.5rem; border-radius: 999px; }
.module-count { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.module-empty { text-align: center; color: var(--muted); padding: 2rem 0; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .demo-row, .demo-done { opacity: 1; animation: none; }
  .demo-progress span { width: 100%; animation: none; }
}

/* ---------- landing: sections ---------- */
.section { padding: 3.2rem 0 1rem; }
.section-head { text-align: center; margin-bottom: 2.2rem; }
.section-head .eyebrow {
  font-size: .74rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent);
}
.section-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: .45rem 0 .55rem; font-weight: 800; }
.section-head p { color: var(--muted); max-width: 560px; margin: 0 auto; line-height: 1.55; }

/* ---------- module grid (like autohex.io #modules) ---------- */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 1rem;
}
.module-tile {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem .8rem 1rem;
  text-align: center;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.module-tile:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--accent) 22%, transparent);
}
.module-tile .mi {
  width: 62px; height: 62px; margin: 0 auto .85rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.module-tile .mi svg { width: 52px; height: 52px; stroke: currentColor; }
.module-tile .mi img.mi-png { width: 100%; height: 100%; object-fit: contain; }
.module-tile .mt {
  color: var(--text);
  font-weight: 700; font-size: .95rem; line-height: 1.25; min-height: 2.2em;
  display: flex; align-items: center; justify-content: center;
}
.module-tile .mb {
  display: inline-block; margin-top: .55rem;
  font-size: .72rem; font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px; padding: .12rem .6rem;
}

/* ---------- module tile as button or link ---------- */
/* The tile is an <a> with a real address so a crawler can follow it; the click handler still
   opens the drawer for anyone browsing, and the link is what happens if the script does not. */
button.module-tile,
a.module-tile {
  font-family: inherit; color: var(--text); text-align: center;
  cursor: pointer; width: 100%; margin: 0;
  display: block; text-decoration: none;
}

/* ---------- module library page ---------- */
.mod-lib-head { margin-bottom: 1.6rem; }
.mod-crumbs { font-size: .82rem; color: var(--muted); margin-bottom: 1.2rem; }
.mod-crumbs a { color: var(--muted); text-decoration: none; }
.mod-crumbs a:hover { color: var(--accent); }
.mod-crumbs span { margin: 0 .4rem; opacity: .5; }

.mod-page { max-width: 980px; margin: 0 auto; }
.mod-page .md-head { margin-top: .4rem; }
.mod-plans { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 .4rem; }
.mod-plan-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .8rem; border-radius: 999px; text-decoration: none;
  font-size: .82rem; font-weight: 700;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.mod-plan-chip:hover { border-color: var(--accent); }
.mod-related { margin-top: 2.6rem; }
.mod-related h3 { font-size: 1rem; margin-bottom: .9rem; }
.mod-related-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.mod-related-list a {
  padding: .38rem .8rem; border-radius: 999px; text-decoration: none;
  font-size: .84rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
}
.mod-related-list a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- module detail drawer (Swiftec-style) ---------- */
.md-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); z-index: 190; }
.md-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 720px; max-width: 94vw; z-index: 200;
  background: var(--surface); border-left: 1px solid var(--border-strong);
  box-shadow: -20px 0 60px rgba(0,0,0,.5);
  transform: translateX(100%); transition: transform .25s ease;
  overflow-y: auto; padding: 1.8rem 1.9rem 3rem;
}
.md-drawer.open { transform: translateX(0); }
.md-close {
  position: sticky; top: 0; float: right; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: .9rem;
}
.md-close:hover { color: var(--text); border-color: var(--accent); }
.md-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.md-head .md-ic { width: 56px; height: 56px; flex: 0 0 56px; }
.md-head .md-ic img, .md-head .md-ic svg { width: 100%; height: 100%; object-fit: contain; }
.md-title h2 { margin: 0; }
.md-key { color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.md-count { margin-left: auto; text-align: right; }
.md-count b { display: block; font-size: 1.6rem; color: var(--accent); }
.md-count span { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.md-desc { color: var(--muted); line-height: 1.6; }
.md-note-global {
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--radius-sm); padding: .8rem 1rem; margin: 1rem 0; font-size: .92rem;
}
.md-sub { margin: 1.6rem 0 1rem; font-size: 1.05rem; }
.md-sub strong, .md-groups .md-op strong { color: var(--accent); }
.md-group { margin-bottom: 1.3rem; }
.md-make { font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--text); font-size: .82rem; margin-bottom: .5rem; }
.md-row {
  display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: center;
  padding: .55rem .3rem; border-bottom: 1px solid var(--border);
}
.md-ecu { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; }
.md-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.md-op { color: var(--muted); font-size: .84rem; }
.md-op strong { font-weight: 800; margin-right: .3rem; }
@media (max-width: 620px) { .md-row { grid-template-columns: 1fr; gap: .25rem; } }

/* ---------- how it works ---------- */
.howto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.howto {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.4rem;
}
.howto .num {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  font-weight: 800; margin-bottom: .8rem;
}
.howto h4 { margin: 0 0 .35rem; }
.howto p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }

/* ---------- pricing ---------- */

/* Monthly / yearly switch. Both prices are rendered into every card and CSS decides which
   one is on screen, so switching is instant and needs no round trip. */
[data-pricing] .pm-yearly { display: none; }
[data-pricing].is-yearly .pm-monthly { display: none; }
[data-pricing].is-yearly .pm-yearly { display: block; }

.cycle-toggle {
  display: inline-flex; gap: .25rem; margin: 0 auto 1.6rem; padding: .25rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
}
.pricing-wrap { display: flex; flex-direction: column; align-items: center; }
.pricing-wrap > .pricing-grid { width: 100%; }
.cycle-toggle .ct-btn {
  border: 0; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 600;
  color: var(--muted); background: transparent;
  padding: .5rem 1.1rem; border-radius: 999px; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.cycle-toggle .ct-btn:hover { color: var(--text); }
.cycle-toggle .ct-btn.on { background: var(--accent); color: var(--accent-contrast); }

.price-card .price-block { margin: 1rem 0 .2rem; }
.price-card .price-block .amount { margin: 0; }
.price-card .save-pill {
  display: inline-block; margin-top: .45rem;
  background: var(--accent); color: var(--accent-contrast);
  font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  padding: .2rem .6rem; border-radius: 999px;
}
.price-card .muted-note { color: var(--muted); font-weight: 500; }

.pricing-foot { margin-top: 1.6rem; }

/* ---------- compare packages ---------- */
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table {
  width: 100%; min-width: 720px; border-collapse: collapse; font-size: .92rem;
}
.cmp-table th, .cmp-table td {
  padding: .78rem 1rem; border-bottom: 1px solid var(--border); text-align: center;
  vertical-align: middle;
}
.cmp-table th:first-child, .cmp-table td:first-child {
  text-align: left; width: 34%; min-width: 240px; color: var(--text);
}
.cmp-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--surface); border-bottom: 1px solid var(--border-strong);
  padding-top: 1rem; padding-bottom: 1rem;
}
.cmp-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.cmp-table .grp td {
  background: var(--surface-2); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; font-size: .74rem; color: var(--muted);
  border-bottom: 1px solid var(--border-strong);
}
.cmp-plan { display: flex; flex-direction: column; gap: .15rem; align-items: center; }
.cmp-plan .nm { font-size: 1rem; font-weight: 800; color: var(--text); }
.cmp-plan .pr { font-size: 1.35rem; font-weight: 800; color: var(--text); }
.cmp-plan .pr small { font-size: .72rem; font-weight: 600; color: var(--muted); }
.cmp-plan .sub { font-size: .74rem; color: var(--accent); font-weight: 700; }
.cmp-table th.is-popular { box-shadow: inset 0 3px 0 var(--accent); }
.cmp-yes { color: var(--accent); font-weight: 800; font-size: 1.05rem; }
.cmp-no { color: var(--border-strong); font-weight: 700; }
.cmp-val { font-weight: 700; }
.cmp-feat-name { display: flex; align-items: center; gap: .6rem; }
.cmp-feat-name .mi { width: 24px; height: 24px; flex: 0 0 24px; color: var(--accent); }
.cmp-feat-name .mi img, .cmp-feat-name .mi svg { width: 100%; height: 100%; object-fit: contain; }
.cmp-cta td { padding-top: 1.2rem; padding-bottom: 1.2rem; border-bottom: 0; }
.cmp-cta .btn-dx { width: 100%; max-width: 210px; }
@media (max-width: 720px) {
  .cmp-table th:first-child, .cmp-table td:first-child { width: auto; min-width: 200px; }
}

.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; align-items: stretch; }
.price-card {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.8rem 1.6rem 1.6rem;
}
.price-card.popular {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 14px 44px color-mix(in srgb, var(--accent) 22%, transparent);
}
.price-card .pop-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--accent-contrast);
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .22rem .8rem; border-radius: 999px;
}
.price-card h3 { margin: 0 0 .2rem; font-size: 1.15rem; }
.price-card .desc { color: var(--muted); font-size: .88rem; min-height: 2.6em; line-height: 1.45; }
.price-card .amount { margin: 1rem 0 .2rem; }
.price-card .amount b { font-size: 2.3rem; font-weight: 800; }
.price-card .amount span { color: var(--muted); font-size: .9rem; }
.price-card .perday { color: var(--accent); font-weight: 700; font-size: .86rem; margin-top: .1rem; }
.price-card ul.feat { list-style: none; padding: 0; margin: 1rem 0 1.4rem; }
.price-card ul.feat li {
  padding: .4rem 0 .4rem 1.6rem; position: relative;
  color: var(--muted); font-size: .92rem;
}
.price-card ul.feat li::before {
  content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800;
}
.price-card .btn-dx { margin-top: auto; width: 100%; }
/* "N included modules — see the list" opens the plan drawer */
.plan-mods-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--accent); text-align: left;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.plan-mods-link:hover { filter: brightness(1.15); text-decoration-color: var(--accent); }

/* plan module list inside the drawer */
.plan-mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; }
.plan-mod {
  display: flex; align-items: center; gap: .7rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .6rem .8rem;
}
.plan-mod .mi { width: 30px; height: 30px; flex: 0 0 30px; color: var(--accent); }
.plan-mod .mi img, .plan-mod .mi svg { width: 100%; height: 100%; object-fit: contain; }
.plan-mod-name { font-weight: 600; font-size: .9rem; }

/* ---------- CTA band & footer ---------- */
.cta-band {
  text-align: center;
  background:
    radial-gradient(600px 200px at 50% 0%, var(--accent-soft), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 3rem 1.5rem; margin-top: 3rem;
}
.cta-band h2 { margin: 0 0 .6rem; font-size: 1.7rem; font-weight: 800; }
.cta-band p { color: var(--muted); margin: 0 0 1.4rem; }

.footer-dx {
  border-top: 1px solid var(--border);
  color: var(--muted); font-size: .85rem;
  padding: 1.6rem 2rem; display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
}
.footer-dx .spacer { flex: 1; }

.footer-cols {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem; align-items: start; padding: 2.4rem 2.5rem 2.8rem;
  max-width: 1160px; margin: 0 auto;
}
.footer-cols .fcol { display: flex; flex-direction: column; gap: .45rem; }
.footer-cols .fcol h5 {
  margin: 0 0 .3rem; color: var(--text); font-size: .82rem;
  text-transform: uppercase; letter-spacing: .12em;
}
.footer-cols .fcol a { color: var(--muted); font-size: .88rem; }
.footer-cols .fcol a:hover { color: var(--accent); text-decoration: none; }
.footer-cols .brandcol p { margin: .7rem 0 0; line-height: 1.55; font-size: .86rem; max-width: 300px; }
@media (max-width: 820px) { .footer-cols { grid-template-columns: 1fr 1fr; } }

/* module tile hover shine */
.module-tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--accent) 14%, transparent) 48%, transparent 62%);
  opacity: 0; transition: opacity .25s ease;
}
.module-tile:hover::after { opacity: 1; }

/* ---------- wizard steps ---------- */
.steps { display: flex; gap: .55rem; margin: .4rem 0 1.4rem; flex-wrap: wrap; }
.steps .step {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .9rem; border: 1px solid var(--border);
  border-radius: 999px; color: var(--muted); font-size: .84rem; font-weight: 600;
  background: var(--surface);
}
.steps .step.active { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.steps .step .n {
  width: 18px; height: 18px; border-radius: 50%; font-size: .7rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--muted);
}
.steps .step.active .n { background: var(--accent); color: var(--accent-contrast); }
/* A step already behind you: legible, but clearly not where you are. */
.steps .step.done { color: var(--text); }
.steps .step.done .n { background: rgba(34,197,94,.18); color: #22c55e; }

/* ---------- solution selection tiles ---------- */
.grid-solutions { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .9rem; }
.solution-tile {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; display: flex; gap: .8rem; align-items: center; cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.solution-tile:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.solution-tile:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 6px 24px color-mix(in srgb, var(--accent) 18%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 60%, var(--surface-2)), var(--surface));
}
.solution-tile .mi { width: 40px; height: 40px; flex: 0 0 40px; color: var(--accent); }
.solution-tile .mi svg { width: 36px; height: 36px; }
.solution-tile strong { font-size: .93rem; }
.solution-tile .sub { color: var(--muted); font-size: .8rem; }
.solution-tile.locked { opacity: .45; cursor: not-allowed; }

/* Pickable tiles: no visible checkbox — the whole tile toggles and the icon lights up. */
.solution-tile.pickable { user-select: none; }
.solution-tile.pickable .tile-check { position: absolute; opacity: 0; pointer-events: none; }
.solution-tile.pickable .mi { opacity: .72; transition: opacity .15s ease, filter .15s ease, transform .15s ease; }
.solution-tile.pickable:hover .mi { opacity: .95; }
.solution-tile.pickable:has(.tile-check:checked) .mi {
  opacity: 1;
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 75%, transparent)) brightness(1.08);
}
.solution-tile.pickable .sel-badge {
  position: absolute; top: .5rem; right: .5rem;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-contrast);
  font-size: .7rem; font-weight: 800;
  opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .15s ease;
}
.solution-tile.pickable:has(.tile-check:checked) .sel-badge { opacity: 1; transform: scale(1); }
.badge-warn { color: var(--warn); font-size: .78rem; font-weight: 600; }

/* ---------- tables ---------- */
.table-dx { width: 100%; border-collapse: collapse; }
.table-dx th {
  text-align: left; padding: .55rem .6rem; color: var(--muted);
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--border-strong);
}
.table-dx td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--border); font-size: .93rem; }
.table-dx tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }

/* status pills */
.pill { display: inline-block; padding: .18rem .66rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.pill.ok { color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.pill.err { color: #fca5a5; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.35); }
.pill.mut { color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); }

/* ---------- auth card ---------- */
.auth-wrap { max-width: 430px; margin: 3rem auto; }
.auth-wrap .brand-line { text-align: center; margin-bottom: 1.2rem; font-weight: 800; font-size: 1.4rem; }
.auth-wrap .brand-line em { color: var(--accent); font-style: normal; }

/* ---------- my files list ---------- */
.files-list { display: flex; flex-direction: column; gap: .7rem; margin-top: .8rem; }
.file-row {
  display: flex; align-items: center; gap: 1rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.2rem;
  transition: border-color .12s ease;
}
.file-row:hover { border-color: var(--border-strong); }
.file-ic {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
}
.file-ic svg { width: 22px; height: 22px; }
.file-main { flex: 1; min-width: 0; }
.file-name { font-weight: 700; font-size: 1rem; word-break: break-all; }
.file-meta { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; margin-top: .3rem; font-size: .85rem; }
.file-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 640px) { .file-row { flex-wrap: wrap; } .file-actions { width: 100%; } }

/* ---------- applied solutions / instructions ---------- */
.applied-table td, .applied-table th { padding: .8rem .6rem; font-size: .96rem; }
.instr { color: var(--text); font-size: .96rem; line-height: 1.5; }
.instr-important {
  display: inline-block; font-weight: 800; letter-spacing: .04em;
  color: #ffd43b; margin-right: .35rem;
}

/* ---------- ticket chat ---------- */
.chat-box {
  display: flex; flex-direction: column; gap: .7rem;
  max-height: 460px; overflow-y: auto;
  padding: 1rem; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.chat-msg {
  max-width: 78%; padding: .65rem .9rem; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface);
}
.chat-msg.customer { align-self: flex-end; border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.chat-msg.support { align-self: flex-start; }
.chat-meta { color: var(--muted); font-size: .72rem; margin-bottom: .25rem; }
.chat-body { white-space: pre-wrap; font-size: .93rem; line-height: 1.45; }
.chat-att {
  display: inline-flex; gap: .35rem; margin-top: .4rem;
  font-size: .84rem; font-weight: 600;
}
.chat-composer { margin-top: .9rem; }
.chat-composer textarea { resize: vertical; }
.chat-actions { display: flex; gap: .6rem; margin-top: .6rem; align-items: center; }
.chat-attach-btn { cursor: pointer; }

/* ---------- result screen ---------- */
.result-hero {
  text-align: center; padding: 2.4rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--radius);
  background:
    radial-gradient(420px 160px at 50% 0%, var(--accent-soft), transparent 70%),
    var(--surface);
  margin-bottom: 1.4rem;
}
.result-hero .check {
  width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%;
  border: 2px solid var(--accent); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.9rem;
}

/* ============================================================
   Invoicing — billing details form, invoice list, document view
   ============================================================ */

.bill-wrap { max-width: 780px; margin-inline: auto; }
.bill-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .3rem 1rem; margin-top: .2rem;
}

/* Private / Company chooser */
.cust-type { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .4rem; }
@media (max-width: 620px) { .cust-type { grid-template-columns: 1fr; } }
.ct-tile {
    display: flex; align-items: flex-start; gap: .8rem; cursor: pointer;
    background: var(--surface-2); border: 2px solid var(--border);
    border-radius: var(--radius); padding: 1rem 1.1rem;
    transition: border-color .12s ease, background .12s ease;
}
.ct-tile:hover { border-color: var(--border-strong); }
.ct-tile.on { border-color: var(--accent); background: var(--accent-soft); }
.ct-tile input { position: absolute; opacity: 0; pointer-events: none; }
.ct-ic { font-size: 1.5rem; line-height: 1; }
.ct-body { display: flex; flex-direction: column; gap: .2rem; }
.ct-body b { font-size: 1rem; color: var(--text); }
.ct-body small { color: var(--muted); font-size: .83rem; line-height: 1.35; }

/* Invoice list */
.inv-summary {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .9rem; margin: 1rem 0 .4rem;
}
.inv-sum-card {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .85rem 1rem;
    display: flex; flex-direction: column; gap: .15rem; min-width: 0;
}
.inv-sum-card span { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.inv-sum-card b { font-size: 1.15rem; color: var(--text); overflow-wrap: anywhere; }
.inv-sum-card small { font-size: .8rem; overflow-wrap: anywhere; }
.inv-table td, .inv-table th { vertical-align: middle; }
.btn-dx.btn-sm { padding: .3rem .75rem; font-size: .82rem; }

/* Invoice document view */
.inv-doc-wrap { max-width: 880px; margin-inline: auto; }
.inv-doc { padding: 2rem 2.2rem 2.2rem; }
@media (max-width: 620px) { .inv-doc { padding: 1.2rem; } }
.inv-doc-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1.5rem; flex-wrap: wrap;
    border-bottom: 2px solid var(--accent); padding-bottom: 1.2rem;
}
.inv-party { font-size: .85rem; line-height: 1.5; margin-top: .6rem; }
.inv-doc-id { text-align: right; }
.inv-doc-id h1 {
    margin: 0; font-size: 1.6rem; color: var(--accent);
    letter-spacing: .04em; text-transform: uppercase;
}
.inv-doc-id .inv-num { font-size: 1.05rem; font-weight: 700; margin: .2rem 0 .3rem; }
.inv-doc-id .muted { font-size: .84rem; }
[dir="rtl"] .inv-doc-id { text-align: left; }

.inv-lbl {
    display: block; color: var(--muted); font-size: .7rem;
    font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .3rem;
}
.inv-billto {
    background: var(--surface-2); border-radius: var(--radius);
    padding: 1rem 1.1rem; margin: 1.4rem 0; line-height: 1.5;
}
.inv-lines { margin-top: .5rem; }
.inv-totals { margin: 1.4rem 0 0; margin-left: auto; max-width: 320px; }
[dir="rtl"] .inv-totals { margin-left: 0; margin-right: auto; }
.inv-totals > div {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .4rem 0; color: var(--muted); font-size: .92rem;
}
.inv-totals > div b { color: var(--text); }
.inv-totals .grand {
    border-top: 1px solid var(--border-strong); margin-top: .3rem;
    padding-top: .7rem; font-size: 1.05rem;
}
.inv-totals .grand span { color: var(--text); font-weight: 700; }
.inv-totals .grand b { color: var(--accent); font-size: 1.3rem; }
.inv-note {
    background: var(--surface-2); border-left: 3px solid var(--accent);
    border-radius: 8px; padding: .8rem 1rem; margin-top: 1.2rem;
    font-size: .86rem; color: var(--muted); font-style: italic;
}
[dir="rtl"] .inv-note { border-left: 0; border-right: 3px solid var(--accent); }

/* Checkout summary */
.checkout-sum {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .9rem 1.1rem; margin: 1.2rem 0 0;
}
.checkout-sum .cs-row {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .35rem 0; color: var(--muted); font-size: .93rem;
}
.checkout-sum .cs-row b { color: var(--text); }
.checkout-sum .grand {
    border-top: 1px solid var(--border-strong); margin-top: .35rem; padding-top: .7rem;
}
.checkout-sum .grand span { color: var(--text); font-weight: 700; }
.checkout-sum .grand b { color: var(--accent); font-size: 1.25rem; }
.checkout-billto {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-top: 1rem;
    background: var(--surface-2); border-radius: var(--radius); padding: .9rem 1.1rem;
    font-size: .9rem; line-height: 1.5;
}

/* Admin invoicing tables */
.inv-filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.inv-filters .f { display: flex; flex-direction: column; gap: .25rem; }
.inv-filters label { font-size: .74rem; color: var(--muted); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.inv-filters .form-control-dx { margin: 0; min-width: 130px; }
.money { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ============================================================
   SmartMatch — match badges, locked upsell, checksum warning
   ============================================================ */

.match-summary {
    display: flex; gap: 1.4rem; flex-wrap: wrap;
    margin: 1rem 0 .2rem; padding: .75rem 1rem;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
    font-size: .87rem; color: var(--muted);
}
.match-summary b { color: var(--text); font-size: 1rem; margin-right: .25rem; }

/* Match percentage on a solution tile */
.solution-tile { position: relative; }
.match-badge {
    position: absolute; top: 6px; inset-inline-end: 8px;
    background: var(--surface-3); border: 1px solid var(--border-strong);
    color: var(--muted); border-radius: 20px;
    padding: .1rem .45rem; font-size: .68rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.solution-tile.pickable input:checked ~ .match-badge { border-color: var(--accent); color: var(--text); }
.tile-note {
    display: block; margin-top: .25rem;
    font-size: .68rem; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

/* The donor's name, shown only when one product code has more than one version for this file.
   Picked out in the accent colour because it is the one thing distinguishing two tiles that
   otherwise read identically and do opposite things. */
.tile-note.variant-note {
    color: var(--accent);
    font-weight: 700;
}

/* Out-of-plan matches — visible, but plainly not available */
.locked-block {
    margin-top: 2rem; padding-top: 1.4rem;
    border-top: 1px solid var(--border);
}
.locked-block h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.grid-solutions.locked { margin-top: .9rem; }
.solution-tile.locked-tile {
    opacity: .55; cursor: not-allowed;
    filter: grayscale(0.75);
    border-style: dashed;
}
.solution-tile.locked-tile:hover { opacity: .75; }
.lock-badge {
    position: absolute; top: 6px; inset-inline-start: 8px;
    font-size: .8rem; line-height: 1; opacity: .9;
}

/* Checksum warning — the one thing the engine does not do */
.checksum-warn {
    display: flex; align-items: flex-start; gap: .8rem;
    background: var(--surface-2);
    border: 1px solid var(--accent);
    border-inline-start: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: .95rem 1.1rem; margin: 0 0 1.2rem;
    text-align: start;
}
.checksum-warn .cw-ic { font-size: 1.25rem; line-height: 1.2; color: var(--accent); flex: none; }
.checksum-warn .cw-text { font-size: .93rem; line-height: 1.55; color: var(--text); }
.checksum-warn .cw-link {
    display: inline-block; margin-top: .55rem;
    font-size: .87rem; font-weight: 700; color: var(--accent);
}

/* Admin: SmartMatch mapping table */
.map-row.unmapped { background: var(--accent-soft); }
.code-chip {
    display: inline-block; padding: .12rem .5rem; border-radius: 6px;
    background: var(--surface-3); border: 1px solid var(--border);
    font-family: ui-monospace, Consolas, monospace; font-size: .78rem; color: var(--text);
}
.code-chip.none { color: var(--muted); font-style: italic; font-family: inherit; }

/* ============================================================
   Progress overlay — shown while the engine works
   ============================================================ */

.dx-progress {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(4px);
    padding: 1.5rem;
}
.dx-progress[hidden] { display: none !important; }

.dxp-card {
    width: 100%; max-width: 420px;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--radius); padding: 1.9rem 1.8rem 1.5rem;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

/* Three pulsing dots — motion that keeps running even when a step reports no percentage */
.dxp-spinner { display: flex; gap: .38rem; justify-content: center; margin-bottom: 1.1rem; }
.dxp-spinner span {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent);
    animation: dxp-pulse 1.05s ease-in-out infinite;
}
.dxp-spinner span:nth-child(2) { animation-delay: .16s; }
.dxp-spinner span:nth-child(3) { animation-delay: .32s; }
@keyframes dxp-pulse {
    0%, 80%, 100% { transform: scale(.6); opacity: .35; }
    40%           { transform: scale(1);  opacity: 1; }
}

.dxp-title { font-size: 1.12rem; font-weight: 700; color: var(--text); }
.dxp-stage { margin-top: .35rem; font-size: .89rem; color: var(--muted); min-height: 1.25em; }

.dxp-bar {
    position: relative; overflow: hidden;
    height: 6px; margin-top: 1.2rem;
    background: var(--surface-3); border-radius: 20px;
}
.dxp-fill {
    height: 100%; width: 0;
    background: var(--accent); border-radius: 20px;
    transition: width .25s ease;
}

/* No measurable percentage (the engine is thinking) — sweep instead of sitting still */
.dxp-bar.indeterminate .dxp-fill {
    width: 38%;
    animation: dxp-sweep 1.25s ease-in-out infinite;
}
@keyframes dxp-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}

.dxp-meta {
    display: flex; justify-content: space-between;
    margin-top: .5rem; font-size: .78rem; color: var(--muted);
    font-variant-numeric: tabular-nums; min-height: 1.1em;
}
.dxp-note { margin-top: 1rem; font-size: .78rem; color: var(--muted); opacity: .8; }

/* Inline skeleton while the match runs on the solutions page */
.match-skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin-top: 1.2rem; }
.sk-tile {
    height: 96px; border-radius: var(--radius);
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.3s linear infinite;
}
@keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    .dxp-spinner span, .dxp-bar.indeterminate .dxp-fill, .sk-tile { animation: none; }
    .dxp-bar.indeterminate .dxp-fill { width: 100%; opacity: .5; }
}

/* Field-level validation text. The upload form's Make and Control unit are required and the
   summary above the form is ModelOnly, so without this the message has nowhere to render. */
.field-error {
    display: block;
    margin-top: .35rem;
    font-size: .82rem;
    color: var(--accent);
}
.field-error:empty { display: none; }

/* The module link under an applied solution's instructions. The address is shown in full because
   this table is what a tuner forwards to the customer who will flash the file, so it has to be
   readable when it is no longer a link. break-all keeps a long slug inside its table cell instead
   of stretching the whole page sideways. */
.instr-module {
    display: block;
    margin-top: .45rem;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--muted);
}
.instr-module strong { color: var(--text); font-weight: 600; }
.instr-module a {
    display: block;
    word-break: break-all;
    color: var(--accent);
    text-decoration: none;
}
.instr-module a:hover { text-decoration: underline; }

/* ---- DTC code picker ---------------------------------------------------------------
   A list of forty P-codes is a wall of identical text, so the row gives each code its own
   column, the description room to breathe, and severity a colour that means something. */
.dtc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.dtc-count { text-align: right; line-height: 1.1; }
.dtc-count b { display: block; font-size: 1.7rem; }
.dtc-count span { font-size: .8rem; color: var(--muted); }

.dtc-tools { display: flex; align-items: center; gap: .5rem; margin: 1.2rem 0 .8rem; flex-wrap: wrap; }
.dtc-tools .form-control-dx { max-width: 320px; }

.dtc-group { margin-bottom: 1rem; }
.dtc-group-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); padding: .35rem .2rem; border-bottom: 1px solid var(--border);
}

.dtc-row {
    display: grid; grid-template-columns: 20px 92px 1fr auto;
    align-items: center; gap: .8rem;
    padding: .6rem .5rem; border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.dtc-row:hover { background: var(--surface-2); }
.dtc-row input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.dtc-code { font-family: ui-monospace, Consolas, monospace; font-weight: 600; }
.dtc-desc { font-size: .9rem; line-height: 1.4; }
.dtc-meta { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }

.sev { font-size: .7rem; padding: .1rem .4rem; border-radius: 5px; border: 1px solid transparent; }
.sev-high { color: #ef4444; border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.1); }
.sev-med  { color: #f59e0b; border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.1); }
.sev-low  { color: #22c55e; border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.1); }
.sev-none { color: var(--muted); border-color: var(--border); }

/* The list scrolls inside itself. A provider that answers with two thousand codes for one file is
   normal, and a page two thousand rows tall buries the action bar under a mile of scrolling. */
.dtc-list {
    max-height: 58vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 .6rem;
}
.dtc-list .dtc-group:last-child .dtc-row:last-child { border-bottom: none; }
.dtc-list .dtc-group-head { position: sticky; top: 0; z-index: 1; background: var(--surface); }

/* Sticky, because the decision is at the top of a long list and the button was at the bottom. */
.dtc-bar {
    position: sticky; bottom: 0; z-index: 3;
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    margin-top: 1.2rem; padding: .8rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}

.dtc-empty { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.dtc-none-found { margin: 1rem .2rem; }

@media (max-width: 640px) {
    .dtc-row { grid-template-columns: 20px 1fr; row-gap: .2rem; }
    .dtc-desc, .dtc-meta { grid-column: 2; }
}

/* ---------- legal pages ----------
   Long-form prose, read once, usually in a hurry, sometimes by a payment provider's reviewer.
   Narrow measure and generous leading; nothing clever. */
.legal { max-width: 62ch; margin: 0 auto 4rem; line-height: 1.75; }
.legal h1 { font-size: 2rem; margin: .3rem 0 1rem; }
.legal h2 { font-size: 1.15rem; margin: 2.2rem 0 .6rem; padding-top: .3rem; border-top: 1px solid var(--border); }
.legal h2:first-of-type { border-top: 0; }
.legal h3 { font-size: 1rem; margin: 1.4rem 0 .4rem; }
.legal p, .legal li { color: var(--muted); }
.legal strong { color: var(--text); font-weight: 600; }
.legal .lead { font-size: 1.05rem; color: var(--text); margin-bottom: 1.8rem; }
.legal ul, .legal ol { padding-left: 1.2rem; display: grid; gap: .5rem; margin: .8rem 0; }
.legal a { color: var(--accent); }

.legal-callout {
    background: var(--surface-2); border: 1px solid var(--border-strong);
    border-left: 3px solid var(--accent);
    border-radius: 10px; padding: 1rem 1.1rem; margin: 1.2rem 0;
}
.legal-callout > strong { display: block; margin-bottom: .5rem; color: var(--text); }
.legal-callout p:last-child { margin-bottom: 0; }

.legal-meta {
    max-width: 62ch; margin: 0 auto .4rem; color: var(--muted);
    font-size: .82rem; display: flex; gap: .5rem; flex-wrap: wrap;
}
.legal-meta .dot { opacity: .5; }

.legal-nav {
    max-width: 62ch; margin: 0 auto 2rem; display: flex; gap: .4rem; flex-wrap: wrap;
    border-bottom: 1px solid var(--border); padding-bottom: 1rem;
}
.legal-nav a {
    font-size: .86rem; color: var(--muted); padding: .3rem .7rem;
    border: 1px solid var(--border); border-radius: 999px;
}
.legal-nav a:hover { color: var(--text); border-color: var(--accent); text-decoration: none; }

.legal-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.legal-table th {
    text-align: left; vertical-align: top; padding: .6rem .8rem .6rem 0;
    color: var(--text); font-weight: 600; font-size: .9rem; white-space: nowrap;
    border-bottom: 1px solid var(--border); width: 33%;
}
.legal-table td {
    padding: .6rem 0; color: var(--muted); font-size: .92rem;
    border-bottom: 1px solid var(--border);
}

.legal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1.4rem 0 2rem; }
.legal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; }
.legal-card h3 { margin: 0 0 .5rem; color: var(--text); }
.legal-card p { margin: .3rem 0; }

@media (max-width: 640px) {
    .legal-table th { white-space: normal; width: 40%; }
}

/* The two tick boxes at checkout. Deliberately not tucked away in small print: one of them is
   what ends the 14-day withdrawal right, and a consent nobody saw is not a consent. */
.consent-box {
    display: flex; gap: .7rem; align-items: flex-start; margin: 1rem 0 0; cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 10px; padding: .8rem .9rem;
    font-size: .88rem; line-height: 1.6; color: var(--muted);
}
.consent-box:hover { border-color: var(--border-strong); }
.consent-box input { accent-color: var(--accent); width: 17px; height: 17px; margin-top: .15rem; flex: none; }
.consent-box strong { color: var(--text); font-weight: 600; }