:root {

  --auth-scrim: linear-gradient(90deg, rgba(var(--bg-rgb),0.28) 0%, rgba(var(--bg-rgb),0.52) 46%, rgba(var(--bg-rgb),0.90) 100%);
  --auth-card-bg: color-mix(in srgb, var(--surface) 80%, transparent);

  --transition-toggle: 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="light"] {
  --auth-scrim: linear-gradient(90deg, rgba(var(--bg-rgb),0.55) 0%, rgba(var(--bg-rgb),0.82) 46%, rgba(var(--bg-rgb),0.96) 100%);
  --auth-card-bg: color-mix(in srgb, var(--surface) 88%, transparent);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-padding-top: the guest pill header is sticky and 90px tall (78px at
   <=720), so without this every in-page anchor jump lands underneath it — most
   visible on the guest knowledgebase. Harmless on authed pages, where it simply
   over-pads relative to the 56px topbar. The only scroll-margin-top rules in the
   theme (.legal-body h2, .support-section) target classes no template emits, so
   nothing double-offsets. */
html { scroll-behavior: smooth; scroll-padding-top: 106px; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; }

.nav {
  position: sticky; top: 0; left: 0; right: 0; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 100;
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.nav-logo-mark { width: 28px; height: 28px; border-radius: 6px; background: var(--cta-bg); display: grid; place-items: center; color: var(--cta-text); font-weight: 800; font-size: 14px; }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a { color: var(--fg-muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: color var(--transition); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--fg); }
.nav-cta { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--radius-md); background: var(--cta-bg); color: var(--cta-text); font-size: 13px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: background var(--transition); }
.nav-cta:hover { background: var(--cta-hover); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-ghost { color: var(--fg-muted); text-decoration: none; font-size: 13px; font-weight: 500; transition: color var(--transition); }
.nav-ghost:hover { color: var(--fg); }

.nav-hamburger {
  display: none; width: 36px; height: 36px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 0;
}
.nav-hamburger span {
  display: block; width: 18px; height: 2px;
  background: var(--fg); border-radius: 1px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  position: fixed; inset: 0; z-index: 99;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px;
  opacity: 0; visibility: hidden;
  transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), visibility 200ms;
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }
.nav-overlay a {
  color: var(--fg); text-decoration: none;
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  transition: color var(--transition);
}
.nav-overlay a:hover { color: var(--fg); }
.nav-overlay .nav-cta {
  margin-top: 12px; height: 44px; padding: 0 28px; font-size: 15px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 8px 16px; background: var(--cta-bg); color: var(--cta-text);
  font-size: 14px; font-weight: 600; text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* Animated theme toggle */
.theme-toggle { appearance: none; border: none; background: transparent; cursor: pointer; padding: 0; height: 32px; display: inline-flex; align-items: center; border-radius: var(--radius-full); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.theme-toggle-track { position: relative; width: 58px; height: 28px; border-radius: var(--radius-full); background: var(--surface); border: 1px solid var(--border); transition: border-color var(--transition), background var(--transition); overflow: hidden; }
.theme-toggle:hover .theme-toggle-track { border-color: var(--fg-subtle); }
.theme-toggle-knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; box-shadow: 0 0 10px rgba(var(--scrim-rgb), 0.25); transition: transform var(--transition-toggle), background var(--transition), box-shadow var(--transition); }
[data-theme="light"] .theme-toggle-knob { transform: translateX(30px); box-shadow: 0 0 12px rgba(var(--scrim-rgb), 0.15); }
.tt-icon { position: absolute; grid-area: 1 / 1; width: 13px; height: 13px; transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.tt-moon { opacity: 1; transform: rotate(0deg) scale(1); }
.tt-sun { opacity: 0; transform: rotate(-120deg) scale(0.4); }
[data-theme="light"] .tt-moon { opacity: 0; transform: rotate(120deg) scale(0.4); }
[data-theme="light"] .tt-sun { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle-stars { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; opacity: 1; transition: opacity var(--transition); }
[data-theme="light"] .theme-toggle-stars { opacity: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: var(--radius-md); font-family: var(--font-body); font-size: 14px; font-weight: 600; border: none; cursor: pointer; text-decoration: none; transition: all var(--transition); }
.btn-block { width: 100%; }
.btn-primary { background: var(--cta-bg); color: var(--cta-text); }
.btn-primary:hover { background: var(--cta-hover); }
.btn-secondary { background: transparent; color: var(--fg); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--surface-elevated); border-color: var(--fg-subtle); }
.btn-ghost { background: transparent; color: var(--fg-muted); }
.btn-ghost:hover { color: var(--fg); background: var(--surface-elevated); }

.field { display: grid; gap: 7px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.label { font-size: 13px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
.label .req { color: var(--danger); }
.label-hint { font-weight: 400; color: var(--fg-subtle); font-size: 12px; }
.input, .select {
  width: 100%; height: 44px; padding: 0 13px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--fg); font-family: var(--font-body); font-size: 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input::placeholder { color: var(--fg-subtle); }
.input:focus, .select:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(var(--fg-subtle-rgb), 0.12); }
.select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 38px; }
.field-mono .input { font-family: var(--font-mono); }
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 44px; }
.input-icon-btn { position: absolute; top: 0; right: 0; height: 44px; width: 42px; display: grid; place-items: center; background: transparent; border: none; color: var(--fg-subtle); cursor: pointer; transition: color var(--transition); }
.input-icon-btn:hover { color: var(--fg); }
.input-icon-btn svg { width: 17px; height: 17px; }
.check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--fg-muted); line-height: 1.5; cursor: pointer; }
.check input { appearance: none; flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; transition: all var(--transition); position: relative; }
.check input:checked { background: var(--cta-bg); border-color: var(--cta-bg); }
.check input:checked::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--cta-text); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.check a { color: var(--link); text-decoration: underline; }
.field-error { font-size: 12px; color: var(--danger); display: none; }
.field.has-error .input { border-color: var(--danger); }
.field.has-error .field-error { display: block; }

.form-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: rgba(var(--info-rgb), 0.08); border: 1px solid rgba(var(--info-rgb), 0.2); font-size: 12.5px; line-height: 1.55; color: var(--fg-muted); }
.form-note svg { width: 16px; height: 16px; color: var(--info); flex-shrink: 0; margin-top: 1px; }
.form-success { display: none; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: rgba(var(--success-rgb), 0.1); border: 1px solid rgba(var(--success-rgb), 0.24); font-size: 13px; line-height: 1.55; color: var(--fg); }
.form-success.show { display: flex; }
.form-success svg { width: 17px; height: 17px; color: var(--success); flex-shrink: 0; margin-top: 1px; }

.auth {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  isolation: isolate;

  background:
    var(--auth-scrim),
    url("dynavo-auth-side-bg-left-servers.png") center / cover no-repeat,
    var(--bg);
}
/* Subtle amber edge-glow + vignette over the photo for depth */
.auth::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 8% 30%, rgba(var(--accent-rgb), 0.07), transparent 42%),
    radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(var(--scrim-rgb), 0.32));
}
.auth-aside { position: relative; overflow: hidden; }

.auth-main { display: flex; flex-direction: column; padding: 24px 24px 40px; }
.auth-topbar { display: flex; align-items: center; justify-content: space-between; }
.auth-topbar .nav-ghost { display: inline-flex; align-items: center; gap: 6px; }
.auth-card-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 28px 0; }

.auth-card {
  width: 100%; max-width: 392px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.auth .input, .auth .select {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.auth .input:focus, .auth .select:focus { background: color-mix(in srgb, var(--surface) 86%, transparent); }

.auth-mobile-logo { display: inline-block; text-decoration: none; margin-bottom: 24px; }
.auth-logo-img { display: block; width: 168px; height: 36px; background: url('dynavo-lockup-white.svg') no-repeat left center / contain; }
[data-theme="light"] .auth-logo-img { background-image: url('dynavo-lockup-black.svg'); }
.auth-head { margin-bottom: 26px; }
.auth-head h1 { font-size: 27px; font-weight: 800; letter-spacing: -0.025em; }
.auth-head p { margin-top: 8px; color: var(--fg-muted); font-size: 14.5px; }
.auth-form { display: grid; gap: 16px; }
.auth-row-split { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.link-accent { color: var(--link); text-decoration: underline; font-size: 13px; font-weight: 600; }
.link-accent:hover { color: var(--link-hover); }
.auth-divider { display: flex; align-items: center; gap: 14px; color: var(--fg-subtle); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.auth-alt { text-align: center; font-size: 14px; color: var(--fg-muted); }
.auth-alt a { color: var(--link); text-decoration: underline; font-weight: 600; }
.auth-alt a:hover { color: var(--link-hover); }
.auth-legal { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border-subtle); text-align: center; font-size: 12px; color: var(--fg-subtle); line-height: 1.6; }
.auth-legal a { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 2px; }
.auth-legal a:hover { color: var(--fg); }

.page { flex: 1; max-width: 1100px; width: 100%; margin: 0 auto; padding: 56px 24px 88px; }
.page-narrow { max-width: 820px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-subtle); margin-bottom: 28px; flex-wrap: wrap; }
.breadcrumb a { color: var(--fg-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--fg); }
.breadcrumb svg { width: 13px; height: 13px; }

.page-head { margin-bottom: 36px; }
.page-eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--decor); }
.page-head h1 { margin-top: 12px; font-size: clamp(32px, 4vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
.page-head .lede { margin-top: 16px; color: var(--fg-muted); font-size: 17px; line-height: 1.6; max-width: 60ch; }
.page-meta { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-subtle); }

/* Legal document layout */
.legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; padding-bottom: 0; }
.legal-tab { display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface); color: var(--fg-muted); font-size: 13px; font-weight: 600; text-decoration: none; transition: all var(--transition); }
.legal-tab:hover { color: var(--fg); border-color: var(--fg-subtle); }
.legal-tab[aria-current="page"] { background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-text); }
.legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }
.legal-toc { position: sticky; top: 88px; display: grid; gap: 4px; }
.legal-toc-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); margin-bottom: 8px; }
.legal-toc a { font-size: 13px; color: var(--fg-muted); text-decoration: none; padding: 5px 0; border-left: 2px solid transparent; padding-left: 12px; margin-left: -2px; transition: color var(--transition), border-color var(--transition); }
.legal-toc a:hover { color: var(--fg); }
.legal-toc a.is-active { color: var(--fg); border-color: var(--fg-subtle); }
.legal-body { max-width: 70ch; }
.legal-body h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 40px 0 14px; scroll-margin-top: 86px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 16px; font-weight: 700; margin: 24px 0 10px; color: var(--fg); }
.legal-body p { color: var(--fg-muted); font-size: 15px; line-height: 1.72; margin-bottom: 16px; }
.legal-body ul, .legal-body ol { color: var(--fg-muted); font-size: 15px; line-height: 1.72; margin: 0 0 16px 0; padding-left: 22px; }
.legal-body li { margin-bottom: 8px; }
.legal-body strong { color: var(--fg); font-weight: 700; }
.legal-body a { color: var(--link); text-decoration: underline; }
.legal-body a:hover { color: var(--link-hover); }
.legal-body code { font-family: var(--font-mono); font-size: 13px; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 1px 6px; color: var(--fg); }
.legal-callout { padding: 16px 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); margin: 0 0 20px; }
.legal-callout p { margin-bottom: 0; font-size: 14px; }

.legal-table-wrap { width: 100%; overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.legal-table th { text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-subtle); background: color-mix(in srgb, var(--surface-elevated) 40%, var(--surface)); border-bottom: 1px solid var(--border); }
.legal-table td { padding: 13px 16px; color: var(--fg-muted); border-bottom: 1px solid var(--border-subtle); }
.legal-table tr:last-child td { border-bottom: none; }
.legal-table td.num, .legal-table th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg); }
.legal-table td strong { color: var(--fg); font-weight: 700; }

.kb-hero { border-radius: var(--radius-xl); padding: 46px 40px; text-align: center; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.kb-hero-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 14px; }
.kb-hero h1 { margin: 0 0 10px; font-family: 'Space Grotesk', var(--font-display), system-ui, sans-serif; font-size: 33px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }
.kb-hero-sub { margin: 0 auto 28px; max-width: 520px; font-size: 15px; line-height: 1.6; color: var(--fg-muted); }
.kb-hero form { margin: 0; }
.kb-search { max-width: 640px; margin: 0 auto; display: flex; align-items: stretch; border-radius: 14px; overflow: hidden; background: var(--bg); border: 1px solid var(--border); }
.kb-search-icon { display: flex; align-items: center; padding-left: 20px; color: var(--fg-subtle); }
.kb-field { flex: 1; min-width: 0; padding: 17px 18px; border: none; outline: none; background: transparent; font-family: var(--font-body); font-size: 15px; color: var(--fg); }
.kb-field::placeholder { color: var(--fg-subtle); }
.kb-search-btn { padding: 0 30px; border: none; cursor: pointer; background: var(--cta-grad, var(--cta-bg)); color: var(--cta-text); font-family: var(--font-body); font-size: 14.5px; font-weight: 700; }
.kb-search-btn:hover { filter: brightness(1.06); }

/* Breadcrumb pill */
.kb-bc { margin-top: 14px; padding: 13px 22px; border-radius: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; background: rgba(var(--fg-subtle-rgb), 0.05); border: 1px solid var(--border); }
.kb-bc a { color: var(--link); text-decoration: none; font-weight: 600; }
.kb-bc a:hover { color: var(--fg); }
.kb-bc .kb-sep { color: var(--fg-subtle); }
.kb-bc .kb-current { color: var(--fg); font-weight: 700; }

/* Intro heading */
.kb-intro { margin-top: 26px; margin-bottom: 22px; }
.kb-intro h1 { margin: 0 0 8px; font-family: 'Space Grotesk', var(--font-display), system-ui, sans-serif; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }
.kb-intro p { margin: 0; font-size: 15px; color: var(--fg-muted); }

/* Section heading (index categories/popular + search results) */
.kb-section-head { margin-top: 32px; margin-bottom: 18px; }
.kb-section-head h1, .kb-section-head h2 { margin: 0 0 6px; font-family: 'Space Grotesk', var(--font-display), system-ui, sans-serif; font-size: 23px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); }
.kb-section-head p { margin: 0; font-size: 14.5px; color: var(--fg-muted); }

/* Category grid — icon tile + body, restrained (no hover lift) */
.kb-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.kb-cat { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: 16px; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); transition: border-color .15s; }
.kb-cat:hover { border-color: var(--cta-bg); }
.kb-cat-icon { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: rgba(var(--fg-subtle-rgb), 0.08); border: 1px solid var(--border); color: var(--fg); }
.kb-cat-body { flex: 1; min-width: 0; }
.kb-cat-h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.kb-cat-h h3 { margin: 0; font-family: 'Space Grotesk', var(--font-display), system-ui, sans-serif; font-size: 18px; font-weight: 700; color: var(--fg); }
.kb-cat-badge { min-width: 22px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: 12px; font-weight: 700; background: rgba(var(--fg-subtle-rgb), 0.12); color: var(--fg); border: 1px solid var(--border); }
.kb-cat-desc { margin: 0; font-size: 14px; color: var(--fg-muted); line-height: 1.5; }
.kb-cat-desc p { margin: 0; }

/* Empty state */
.kb-empty { padding: 54px 24px; border-radius: 16px; text-align: center; font-size: 15px; color: var(--fg-muted); background: var(--surface-elevated); border: 1px solid var(--border); }

/* Article list rows — doc icon + title + arrow (no hover slide) */
.kb-list { display: flex; flex-direction: column; gap: 12px; }
.kb-list-item { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 14px; text-decoration: none; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); transition: border-color .15s; }
.kb-list-item:hover { border-color: var(--cta-bg); }
.kb-list-icon { flex: 0 0 auto; display: flex; color: var(--fg-subtle); }
.kb-list-item .kb-title { font-size: 15px; font-weight: 600; color: var(--fg); }
.kb-list-item .kb-arrow { margin-left: auto; color: var(--fg-subtle); font-size: 18px; line-height: 1; }
.kb-section { margin-top: 8px; }

/* Search-results pagination */
.kb-pagination { display: flex; justify-content: center; margin-top: 26px; }
.kb-pagination ul { margin: 0; }

/* Article detail */
.kb-article { max-width: 820px; }
.kb-doc { font-size: 15.5px; line-height: 1.85; color: var(--text-body, var(--fg-muted)); }
.kb-doc p { margin: 0 0 14px; }
.kb-doc h1, .kb-doc h2, .kb-doc h3, .kb-doc h4 { font-family: 'Space Grotesk', var(--font-display), system-ui, sans-serif; color: var(--fg); margin: 26px 0 12px; }
.kb-doc a { color: var(--link); }
.kb-doc ul, .kb-doc ol { margin: 0 0 14px; padding-left: 22px; }
.kb-doc code { font-family: var(--font-mono); background: var(--surface-elevated); padding: 2px 6px; border-radius: 6px; font-size: 0.9em; }
.kb-doc pre { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 16px; overflow: auto; }
.kb-doc pre code { background: none; padding: 0; }
.kb-doc img { max-width: 100%; height: auto; border-radius: 10px; }
.kb-edit { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 10px 22px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); font-family: var(--font-body); font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.kb-edit:hover { border-color: var(--fg-subtle); }

.kb-rate { margin-top: 38px; padding: 26px 28px; border-radius: 16px; background: var(--surface-elevated); border: 1px solid var(--border); }
.kb-rate h5 { margin: 0 0 4px; font-family: 'Space Grotesk', var(--font-display), system-ui, sans-serif; font-size: 19px; font-weight: 700; color: var(--fg); }
.kb-rate-sub { margin: 0 0 18px; font-size: 14px; color: var(--fg-muted); }
.kb-votes { display: flex; gap: 12px; flex-wrap: wrap; }
.kb-vote { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); font-family: var(--font-body); font-size: 14.5px; font-weight: 700; text-decoration: none; cursor: pointer; transition: border-color .15s; }
.kb-vote:hover { border-color: var(--cta-bg); color: var(--fg); }
.kb-vote.disabled { opacity: 0.5; pointer-events: none; }
.kb-vote .kb-vote-icon { display: flex; line-height: 1; }
.kb-vote .kb-vote-icon svg { display: block; }
.kb-vote.red .kb-vote-icon svg { transform: rotate(180deg); }
.kb-vote-count { min-width: 24px; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; background: rgba(var(--fg-subtle-rgb), 0.12); color: var(--fg); }
.kb-voted { margin-top: 14px; font-size: 14px; color: var(--fg-muted); }

@media (max-width: 768px) {
  .kb-cats { grid-template-columns: 1fr; }
  .kb-hero { padding: 32px 22px; }
  .kb-hero h1 { font-size: 26px; }
  .kb-search-btn { padding: 0 20px; }
}

.support-layout { display: grid; grid-template-columns: 1.45fr 1fr; gap: 28px; align-items: start; margin-top: 8px; }
.support-panel { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); padding: 28px; }
.support-panel + .support-panel { margin-top: 20px; }
.support-panel-head { margin-bottom: 20px; }
.support-panel-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.support-panel-head p { margin-top: 6px; color: var(--fg-muted); font-size: 14px; }
.support-section { scroll-margin-top: 86px; }
.section-eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--decor); margin: 56px 0 12px; }

/* System status list */
.status-banner { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--success) 32%, var(--border)); background: color-mix(in srgb, var(--success) 9%, transparent); margin-bottom: 20px; }
.status-banner .pulse { width: 11px; height: 11px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) { .status-banner .pulse { animation: status-pulse 2.4s ease-out infinite; } }
@keyframes status-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.status-banner-text strong { display: block; font-size: 15px; font-weight: 700; color: var(--fg); }
.status-banner-text span { font-size: 13px; color: var(--fg-muted); }
.status-list { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--border-subtle); }
.status-row:last-child { border-bottom: none; }
.status-row-name { font-size: 14px; font-weight: 600; color: var(--fg); }
.status-row-name small { display: block; font-weight: 400; color: var(--fg-subtle); font-size: 12px; margin-top: 2px; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; font-family: var(--font-mono); white-space: nowrap; }
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-pill.ok { color: var(--success); } .status-pill.ok::before { background: var(--success); box-shadow: 0 0 8px color-mix(in srgb, var(--success) 50%, transparent); }
.status-pill.warn { color: var(--warning); } .status-pill.warn::before { background: var(--warning); box-shadow: 0 0 8px color-mix(in srgb, var(--warning) 50%, transparent); }
.status-pill.down { color: var(--danger); } .status-pill.down::before { background: var(--danger); }

/* Support contact tiles */
.contact-tile { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--border-subtle); }
.contact-tile:last-child { border-bottom: none; }
.contact-tile-icon { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-elevated); color: var(--fg-subtle); }
.contact-tile-icon svg { width: 18px; height: 18px; }
.contact-tile-body h4 { font-size: 14px; font-weight: 700; }
.contact-tile-body p { font-size: 13px; color: var(--fg-muted); margin-top: 3px; line-height: 1.5; }
.contact-tile-body a { color: var(--link); text-decoration: underline; font-weight: 600; }
.contact-tile-body a:hover { color: var(--link-hover); }
.support-hours { font-family: var(--font-mono); font-size: 12px; color: var(--fg-subtle); margin-top: 16px; }

@media (max-width: 860px) {
  .support-layout { grid-template-columns: 1fr; }
}

.footer { border-top: 1px solid var(--border-subtle); padding: 48px 24px; width: 100%; max-width: 1200px; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 40px; margin-bottom: 40px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-logo-mark { width: 24px; height: 24px; border-radius: 5px; background: var(--cta-bg); display: grid; place-items: center; color: var(--cta-text); font-weight: 800; font-size: 12px; }
.footer-brand-name { font-weight: 800; font-size: 16px; letter-spacing: -0.02em; }
.footer-tagline { font-size: 13px; line-height: 1.6; color: var(--fg-subtle); max-width: 280px; }
.footer-col-title { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-subtle); margin-bottom: 16px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 14px; color: var(--fg-muted); text-decoration: none; cursor: pointer; transition: color var(--transition); }
.footer-links a:hover { color: var(--fg); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--border-subtle); max-width: 1200px; margin: 0 auto; gap: 16px; flex-wrap: wrap; }
.footer-copy { font-size: 12px; color: var(--fg-subtle); }
.footer-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--success); text-decoration: none; }
.footer-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}
@media (max-width: 900px) {

  .auth { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  :root { --auth-scrim: linear-gradient(180deg, rgba(var(--bg-rgb),0.74) 0%, rgba(var(--bg-rgb),0.86) 100%); }
  [data-theme="light"] { --auth-scrim: linear-gradient(180deg, rgba(var(--bg-rgb),0.84) 0%, rgba(var(--bg-rgb),0.95) 100%); }
}
@media (max-width: 860px) {
  .legal-layout { grid-template-columns: 1fr; gap: 0; }
  .legal-toc { display: none; }
}
@media (max-width: 768px) {
  .nav { padding: 0 18px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; justify-content: center; }
}
@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .auth-main { padding: 18px 16px 32px; }
  .page { padding: 40px 18px 64px; }
}

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

/* ---- order-scoped base: links, rules, labels ---- */
.client-main.order-flow .client-content a { color: var(--order-link); }
.client-main.order-flow .client-content a:hover { color: var(--link-hover); }
.client-main.order-flow .client-content hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-5) 0;
}
.client-main.order-flow .client-content label,
.client-main.order-flow .client-content .form-group > label {
  color: var(--fg-muted);
  font-weight: 500;
}

.client-main.order-flow .client-content .card,
.client-main.order-flow .client-content .card-blesta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  color: var(--text-body);
}
.client-main.order-flow .client-content .card-header {
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border);
  border-top-left-radius: var(--radius-card);  /* match the card's rounded top corners */
  border-top-right-radius: var(--radius-card);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: var(--space-4) var(--space-5);   /* rhythm: match client-area scale */
  font-size: 15px;
}
.client-main.order-flow .client-content .card-footer {
  background: transparent;
  border-top: 1px solid var(--border);
  padding: var(--space-4) var(--space-5);
}

.client-main.order-flow .client-content .card-body { color: var(--text-body); padding: var(--space-5); }
.client-main.order-flow .client-content .card { margin-bottom: var(--space-5); }
.client-main.order-flow .client-content .card strong,
.client-main.order-flow .client-content .card-body strong { color: var(--fg); }

.client-main.order-flow .client-content .btn {
  height: 36px;
  min-height: 0;
  padding: 0 16px;
  font-size: 13px;
  border-radius: var(--radius-md);   /* less pill than the old --radius-btn (20px) */
  font-family: var(--font-body);
  font-weight: 600;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
}

.client-main.order-flow .client-content .btn-lg { height: 40px; font-size: 14px; padding: 0 20px; }
.client-main.order-flow .client-content .btn-sm { height: 30px; font-size: 12px; padding: 0 12px; }
.client-main.order-flow .client-content .btn-xs { height: 26px; font-size: 12px; padding: 0 10px; border-radius: var(--radius-sm); gap: 5px; }

.client-main.order-flow .client-content .btn-group { display: inline-flex; vertical-align: middle; }
.client-main.order-flow .client-content .btn-group > .btn { border-radius: 0; }
.client-main.order-flow .client-content .btn-group > .btn:not(:first-child) { margin-left: -1px; }
.client-main.order-flow .client-content .btn-group > .btn:first-child {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}
.client-main.order-flow .client-content .btn-group > .btn:last-child {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}
.client-main.order-flow .client-content .btn-group > .btn:hover,
.client-main.order-flow .client-content .btn-group > .btn:focus { z-index: 1; }

.client-main.order-flow .client-content .btn-success {
  background: var(--cta-bg);
  border-color: var(--cta-bg);
  color: var(--cta-text);
}
.client-main.order-flow .client-content .btn-success:hover,
.client-main.order-flow .client-content .btn-success:focus {
  background: var(--cta-hover);
  border-color: var(--cta-hover);
  color: var(--cta-text);
  transform: translateY(-1px);
}

.client-main.order-flow .client-content .btn-light,
.client-main.order-flow .client-content .btn-secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--fg);
}
.client-main.order-flow .client-content .btn-light:hover,
.client-main.order-flow .client-content .btn-light:focus,
.client-main.order-flow .client-content .btn-secondary:hover,
.client-main.order-flow .client-content .btn-secondary:focus {
  background: var(--surface-elevated);
  border-color: var(--fg-subtle);
  color: var(--fg);
}

/* Destructive (Remove item) */
.client-main.order-flow .client-content .btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--on-danger);
}
.client-main.order-flow .client-content .btn-danger:hover,
.client-main.order-flow .client-content .btn-danger:focus {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--on-danger);
  filter: brightness(1.08);
}

/* Disabled sold-out / limit pseudo-buttons */
.client-main.order-flow .client-content .btn[disabled],
.client-main.order-flow .client-content .btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.client-main.order-flow .client-content .btn:focus,
.client-main.order-flow .client-content .btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

/* Form controls — selects, inputs (inset feel) */
.client-main.order-flow .client-content .form-control,
.client-main.order-flow .client-content select.form-control,
.client-main.order-flow .client-content .input-group .form-control {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--fg);
}
.client-main.order-flow .client-content .form-control::placeholder { color: var(--fg-subtle); }
.client-main.order-flow .client-content .form-control:focus {
  background: var(--bg);
  border-color: var(--focus-ring);
  color: var(--fg);
  box-shadow: 0 0 0 3px rgba(var(--fg-subtle-rgb), 0.30);
}
.client-main.order-flow .client-content select.form-control {
  font-family: var(--order-font-body);   /* UI font, not mono (mono stays on .currency_value/totals) */
  font-size: 14px;
}
.client-main.order-flow .client-content .input-sm,
.client-main.order-flow .client-content .form-control.input-sm {
  height: auto;
  padding: 6px 10px;
  font-size: 13px;
}

/* Input group (coupon apply) — seamless join, no double border */
.client-main.order-flow .client-content .input-group .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.client-main.order-flow .client-content .input-group-append .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Badges */
.client-main.order-flow .client-content .badge { border-radius: var(--radius-sm); font-weight: 500; }
.client-main.order-flow .client-content .badge-info    { background: rgba(var(--info-rgb), 0.12);    color: var(--info); }
.client-main.order-flow .client-content .badge-success { background: rgba(var(--success-rgb), 0.12); color: var(--success); }
.client-main.order-flow .client-content .badge-danger  { background: rgba(var(--danger-rgb), 0.12);  color: var(--danger); }
.client-main.order-flow .client-content .badge-warning { background: rgba(var(--warning-rgb), 0.12); color: var(--warning); }

/* Alerts */
.client-main.order-flow .client-content .alert {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  color: var(--text-body);
}

.client-main.order-flow .client-content .alert-warning {
  border-color: var(--border);
  background: var(--surface-elevated);
  color: var(--fg-muted);
}
.client-main.order-flow .client-content .alert-warning .fas,
.client-main.order-flow .client-content .alert-warning .fa { color: var(--fg-subtle); }
.client-main.order-flow .client-content .alert-danger {
  border-color: rgba(var(--danger-rgb), 0.35);
  background: rgba(var(--danger-rgb), 0.12);
  color: var(--danger);
}

/* Tables — hairline, no harsh stripes */
.client-main.order-flow .client-content .table { color: var(--text-body); }
.client-main.order-flow .client-content .table th {
  color: var(--fg-subtle);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-top: none;
  border-bottom: 1px solid var(--border);
}
.client-main.order-flow .client-content .table td {
  border-top: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.client-main.order-flow .client-content .table-striped > tbody > tr > td,
.client-main.order-flow .client-content .table-striped > tbody > tr > th {
  background-color: transparent;
}
.client-main.order-flow .client-content .table-striped > tbody > tr:nth-child(odd) > td,
.client-main.order-flow .client-content .table-striped > tbody > tr:nth-child(odd) > th {
  background-color: rgba(var(--fg-subtle-rgb), 0.05);
}
.client-main.order-flow .client-content .table tbody tr:hover > td,
.client-main.order-flow .client-content .table tbody tr:hover > th { background: var(--surface-elevated); }
.client-main.order-flow .client-content .text-danger { color: var(--danger); }
.client-main.order-flow .client-content .text-muted  { color: var(--fg-subtle); }

.card-steps .card-body { padding: 30px 40px; }
.card-steps .row { counter-reset: dynavo-step; align-items: flex-start; }
.card-steps [class*="col-md-3"] {
  counter-increment: dynavo-step;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-steps i.fas { display: none !important; }

/* title row — numbered circle + title */
.card-steps [class*="col-md-3"] > a {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  cursor: pointer;
}
.card-steps [class*="col-md-3"] > a::before {
  content: counter(dynavo-step);
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--order-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--order-step-idle-text);
  background: var(--order-step-idle-bg);
  border: 1.5px solid var(--order-step-idle-border);
}
.card-steps [class*="col-md-3"] > a strong {
  font-family: var(--order-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--order-step-title-idle);
}
.card-steps [class*="col-md-3"] > p {
  margin: 0;
  padding-left: 48px;            /* align under the title, past the 34px circle + gap */
  font-size: 13.5px;
  font-style: italic;
  color: var(--order-step-sub-idle);
}
.card-steps [class*="col-md-3"] > p em { font-style: italic; }

/* CURRENT + COMPLETED (the active step and any step before it) */
.card-steps [class*="col-md-3"]:has(a.active) > a::before,
.card-steps [class*="col-md-3"]:has(~ [class*="col-md-3"] a.active) > a::before {
  background: var(--order-cta-grad);
  border-color: transparent;
  color: var(--order-cta-fg);
  box-shadow: var(--order-cta-shadow);
}
.card-steps [class*="col-md-3"]:has(a.active) > a strong,
.card-steps [class*="col-md-3"]:has(~ [class*="col-md-3"] a.active) > a strong {
  color: var(--order-text-main);
}
.card-steps [class*="col-md-3"]:has(a.active) > p,
.card-steps [class*="col-md-3"]:has(~ [class*="col-md-3"] a.active) > p {
  color: var(--order-price);
}

.card-steps a.active::before {
  background: var(--order-cta-grad);
  border-color: transparent;
  color: var(--order-cta-fg);
  box-shadow: var(--order-cta-shadow);
}
.card-steps a.active strong { color: var(--order-text-main); }

.card-steps a:focus { outline: none; }
.card-steps a:focus-visible { outline: 2px solid var(--order-cta-solid); outline-offset: 3px; border-radius: var(--radius-sm); }

.pkg-description {
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.7;
  max-width: 65ch;
  margin-top: var(--space-2);
}

.pkg-description p { margin: 0 0 var(--space-3); }
.pkg-description p:last-child { margin-bottom: 0; }
.pkg-description ul,
.pkg-description ol { margin: 0 0 var(--space-3) var(--space-5); }
.pkg-description li { margin-bottom: var(--space-1); }
.client-main.order-flow .client-content .card-body .float-right .form-group { margin-bottom: var(--space-2); }
select[name="pricing_id"] { min-width: 220px; }

.client-main.order-flow .client-content .table-curved tbody > tr > td.price-col { vertical-align: bottom; text-align: right; }
.client-main.order-flow .client-content .table > tbody > tr.sub-item > td { border-top: none; }
/* real-spec numerics → mono, tabular */
.client-main.order-flow .client-content .currency_value,
.client-main.order-flow .client-content td.price-col {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.totals-box { margin-top: var(--space-5); }
.totals-box table { margin-bottom: var(--space-5); text-align: right; border: none; }
.totals-box table > tbody > tr > td { border: none; }
.totals-box strong { color: var(--fg); }

.client-main.order-flow .client-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;   /* cart aligns to the TOP of the content column */
  align-content: flex-start;
}

@media (min-width: 768px) {
  .client-main.order-flow .client-content .col-md-9 {
    flex: 0 0 66.6667% !important;
    max-width: 66.6667% !important;
  }
  .client-main.order-flow .client-content #summary_section {
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
  }
}

#summary_section .card { position: sticky; top: var(--space-4); }
/* The GUEST order flow is topped by the 90px sticky pill header, not the 56px
   authed topbar, so the cart panel was parking 74px underneath it while
   scrolling. --gh-h is redefined at <=720 where the header shrinks to 78px.
   Scoped to body.guest-chrome (1-2-1) so the authed order flow is untouched. */
body.guest-chrome { --gh-h: 90px; }
body.guest-chrome #summary_section .card { top: calc(var(--gh-h) + var(--space-4)); }
#summary_section .card-header { font-size: 15px; }
.cart-summary table.table tbody tr,
.cart-summary table.table tbody td { white-space: normal; }
.cart-summary .table td,
.client-main.order-flow .client-content .totals .table td,
.client-main.order-flow .client-content table.totals td { border-top: none; padding: 6px 8px; }
.client-main.order-flow .client-content table.totals tr:last-child td { border-top: 1px solid var(--border); color: var(--fg); font-weight: 600; }
/* coupon disclosure */
#coupon_box .input-group { margin-top: var(--space-2); }
#coupon_message:not(:empty) { margin-bottom: var(--space-2); }

#coupon_box .input-group .form-control,
#coupon_box .input-group-append .btn { height: 36px; }
/* currency selector */
.currency-selector select.form-control { font-family: var(--font-body); }
/* guest login box inside summary */
#login_box #login_message .alert { margin-top: var(--space-2); }
.client-main.order-flow .client-content .pass-reset { padding-top: var(--space-1); font-size: 12px; font-style: italic; }
.client-main.order-flow .client-content .pass-reset a { color: var(--order-link); }

.client-main.order-flow .client-content .card-body h4,
.client-main.order-flow .client-content .card-body h5 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  margin: var(--space-4) 0 var(--space-2);
}
.client-main.order-flow .client-content .card-body > form > h5:first-child { margin-top: 0; }

.client-main.order-flow .client-content label.radio,
.client-main.order-flow .client-content label.checkbox,
.client-main.order-flow .client-content .radio label,
.client-main.order-flow .client-content .checkbox label {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-weight: 400;
  color: var(--text-body);
  cursor: pointer;
}
.client-main.order-flow .client-content input[type="radio"],
.client-main.order-flow .client-content input[type="checkbox"] {
  accent-color: var(--fg);
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  cursor: pointer;
}

.client-main.order-flow .client-content .package_options:not(:empty) { margin-top: var(--space-3); }
.client-main.order-flow .client-content .generated_fields_div { margin-top: var(--space-1); }

.client-main.order-flow .client-content .fa-question-circle.text-info { color: var(--fg-subtle); }

.client-main.order-flow .client-content .package_options label,
.client-main.order-flow .client-content .generated_fields_div label {
  text-transform: capitalize;
  color: var(--fg-muted);
  font-weight: 500;
}
/* group each option as one block with consistent rhythm */
.client-main.order-flow .client-content .package_options .form-group,
.client-main.order-flow .client-content .generated_fields_div .form-group { margin-bottom: var(--space-4); }
/* per-option price helper (e.g. "× IP count $2.50") — muted, tabular */
.client-main.order-flow .client-content .package_options small,
.client-main.order-flow .client-content .package_options .option-price,
.client-main.order-flow .client-content .generated_fields_div small {
  display: inline-block;
  margin-top: var(--space-1);
  color: var(--fg-subtle);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

#configuration .slider.slider-horizontal {
  width: 100%;
  height: 20px;
  margin: var(--space-3) var(--space-4) var(--space-3) 0;   /* right gap → separates slider from its number box */
}

/* Track — thin + light/muted; recentred for the new 5px height */
#configuration .slider.slider-horizontal .slider-track {
  height: 5px !important;
  margin-top: -2.5px !important;
  top: 50% !important;
  background: var(--order-slider-track) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--radius-full) !important;
  box-shadow: none !important;
}
#configuration .slider-track-low,
#configuration .slider-track-high {
  background: var(--order-slider-track) !important;
  background-image: none !important;
  border-radius: var(--radius-full) !important;
  box-shadow: none !important;
}
/* Filled portion — slightly stronger accent token */
#configuration .slider-selection {
  background: var(--order-cta-grad) !important;
  background-image: var(--order-cta-grad) !important;
  border-radius: var(--radius-full) !important;
  box-shadow: none !important;
}

#configuration .slider.slider-horizontal .slider-handle,
#configuration .slider-handle.round {
  width: 18px !important;
  height: 18px !important;
  top: 50% !important;
  margin-top: -9px !important;
  margin-left: -9px !important;
  background: var(--order-text-main) !important;
  background-image: none !important;
  border: 2px solid var(--order-card-bg) !important;
  border-radius: 50% !important;
  box-shadow: var(--order-cta-shadow) !important;
}

/* Compact number box — sits neatly at the slider's right; mono numerals */
#configuration input[data-type="quantity"],
#configuration input[type="number"].form-control {
  width: 64px !important;
  max-width: 64px !important;
  padding: 7px 8px !important;
  height: auto !important;
  background: var(--order-inner-box) !important;
  border: 1px solid var(--order-card-border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  text-align: center !important;
}

/* payment columns divider */
.client-main.order-flow .client-content .col-border { border-left: 1px solid var(--border); }
/* grouped containers: signup "well" boxes + option sections */
.client-main.order-flow .client-content .well {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.client-main.order-flow .client-content .option_section { margin-top: var(--space-3); }

.client-main.order-flow .client-content {
  --font-display: var(--order-font-display);
  --font-body:    var(--order-font-body);
  color: var(--order-text-main);
  font-family: var(--order-font-body);
}

/* Cards — soft 22px panels on the design surface */
.client-main.order-flow .client-content .card,
.client-main.order-flow .client-content .card-blesta {
  background: var(--order-card-bg) !important;
  border: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  padding: 0 !important;
  box-shadow: var(--order-card-shadow) !important;
  color: var(--order-text-main);
}
.client-main.order-flow .client-content .card-body { color: var(--order-text-main); }

.client-main.order-flow .client-content .card-header {
  background: var(--order-group-header);
  border-bottom: 1px solid var(--order-card-border);
  border-radius: 22px 22px 0 0;
  color: var(--order-text-main);
  font-family: var(--order-font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.client-main.order-flow .client-content .card-header::before {
  content: "";
  flex: 0 0 5px;
  width: 5px;
  height: 24px;
  border-radius: 4px;
  background: var(--order-cta-grad);
}

/* Text roles, links, prices */
.client-main.order-flow .client-content .text-muted { color: var(--order-text-muted); }
.client-main.order-flow .client-content a { color: var(--order-link); }
.client-main.order-flow .client-content .currency_value,
.client-main.order-flow .client-content td.price-col,
.client-main.order-flow .client-content .price-col strong {
  color: var(--order-price);
  font-variant-numeric: tabular-nums;
}

.client-main.order-flow .client-content .btn { border-radius: 13px; font-family: var(--order-font-body); font-weight: 700; }
.client-main.order-flow .client-content .btn-success,
.client-main.order-flow .client-content .btn-primary {
  background: var(--order-cta-grad);
  border-color: transparent;
  color: var(--order-cta-fg);
  box-shadow: var(--order-cta-shadow);
}
.client-main.order-flow .client-content .btn-success:hover,
.client-main.order-flow .client-content .btn-primary:hover { color: var(--order-cta-fg); transform: translateY(-2px); }
.client-main.order-flow .client-content .btn-light,
.client-main.order-flow .client-content .btn-secondary {
  background: var(--order-select-bg);
  border: 1.5px solid var(--order-select-border);
  color: var(--order-text-main);
}
.client-main.order-flow .client-content .btn-light:hover,
.client-main.order-flow .client-content .btn-secondary:hover { border-color: var(--order-cta-solid); color: var(--order-text-main); }
.client-main.order-flow .client-content .btn-danger {
  background: var(--order-remove-bg);
  border-color: transparent;
  color: var(--order-on-accent);   /* always-white: --order-remove-bg is a dark pill in both themes */
}
.client-main.order-flow .client-content .btn-danger:hover { background: var(--order-remove-bg); color: var(--order-on-accent); filter: brightness(1.08); }

/* Form controls — design surface + custom chevron + accent focus */
.client-main.order-flow .client-content .form-control,
.client-main.order-flow .client-content select.form-control {
  background: var(--order-select-bg);
  border: 1.5px solid var(--order-select-border);
  border-radius: 13px;
  color: var(--order-text-main);
}
.client-main.order-flow .client-content select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--order-select-caret);   /* accent gold caret, theme-aware (token) */
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding: 11px 42px 11px 16px;                   /* roomier field + space for the caret */
  height: auto;
}
.client-main.order-flow .client-content .form-control:focus { border-color: var(--order-cta-solid); }

.client-main.order-flow .client-content .card-body h5 {
  font-family: var(--order-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--order-text-faint);
}
.client-main.order-flow .client-content .package_options label,
.client-main.order-flow .client-content .generated_fields_div label { color: var(--order-text-muted); font-weight: 700; }

.client-main.order-flow .client-content .generated_fields_div label[for=""] {
  font-weight: 400;
  font-size: 13px;
  color: var(--order-text-muted);
}

#configuration .btn-success {
  background: var(--order-cta-grad) !important;
  border-color: transparent !important;
  color: var(--order-cta-fg) !important;
  box-shadow: var(--order-cta-shadow) !important;
  font-weight: 700 !important;
  border-radius: 13px !important;
}
#configuration .btn-success:hover {
  color: var(--order-cta-fg) !important;
  filter: brightness(1.05);
  transform: translateY(-2px);
}

@media (max-width: 575.98px) {
  #configuration select.form-control,
  .client-main.order-flow .client-content .generated_fields_div select.form-control { width: 100%; }
  #configuration .btn-success { width: 100%; float: none !important; }
}

#review-order .table thead th {
  background: transparent !important;
  color: var(--order-table-head);
  border-top: none;
  border-bottom: 1px solid var(--order-divider);
}
/* Body — transparent rows, hairline separators, NO bright stripe */
#review-order .table > tbody > tr > td,
#review-order .table > tbody > tr > th {
  background: transparent !important;
  border-top: 1px solid var(--order-divider);
  color: var(--order-text-main);
}
#review-order .table-striped > tbody > tr > td,
#review-order .table-striped > tbody > tr > th { background: transparent !important; }

#review-order .table-striped > tbody > tr:not(:has(.btn-group)) > td { background: var(--order-inner-box) !important; }
#review-order .table tbody tr:hover > td { background: var(--order-inner-box) !important; }
#review-order .table .currency_value { color: var(--order-price); font-variant-numeric: tabular-nums; }

#review-order .table-curved {
  border: 0 !important;
  border-collapse: collapse !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}
#review-order .table-curved > * > tr > td,
#review-order .table-curved > * > tr > th {
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
}

#review-order .btn-group { display: inline-flex; gap: var(--space-2); vertical-align: middle; }
#review-order .btn-group > .btn { border-radius: var(--radius-sm) !important; margin: 0 !important; }
#review-order .btn-group .btn-light {           /* Edit + Order More = light/outline pill */
  background: var(--order-select-bg) !important;
  border: 1px solid var(--order-select-border) !important;
  color: var(--order-text-main) !important;
}
#review-order .btn-group .btn-danger {          /* Remove = muted-dark pill (palette role, NOT red) */
  background: var(--order-remove-bg) !important;
  border: 1px solid transparent !important;
  color: var(--order-on-accent) !important;     /* always-light text on the dark pill */
}
#review-order .btn-group .btn-danger:hover { filter: brightness(1.1); color: var(--order-on-accent) !important; }

#review-order .table .btn-group .btn-light,
#review-order .table .btn-group .btn-danger {
  height: 30px !important;
  min-height: 0 !important;
  padding: 0 13px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  gap: 6px !important;
  white-space: nowrap;
}
#review-order .table .btn-group .btn i { font-size: 11px; }
#review-order .table > tbody > tr > td:nth-child(2) { white-space: nowrap; width: 1%; }   /* button cell hugs its content */

#review-order .totals-box table { width: 100%; border: none; text-align: right; }
#review-order .totals-box td {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--order-divider) !important;
  padding: 7px 0 !important;
}
#review-order .totals-box tr:first-child td { border-top: 0 !important; }
#review-order .totals-box .float-right { float: none !important; }
#review-order .totals-box td:first-child:not([colspan]) { text-align: left; color: var(--order-text-muted); font-size: 13.5px; }
#review-order .totals-box td:last-child:not([colspan]) { text-align: right; }
/* "Total Due Today" emphasized (last currency value); Subtotal muted */
#review-order .totals-box .currency_value {
  color: var(--order-text-main);
  font-weight: 700;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
#review-order .totals-box tr:first-child .currency_value {
  color: var(--order-text-muted);
  font-weight: 400;
  font-size: 14px;
}
#review-order .totals-box td[colspan] .float-right { color: var(--order-text-muted); font-size: 13px; }

#review-order .btn-group.float-right { gap: var(--space-3); }
#review-order .btn-group .btn-success {
  background: var(--order-cta-grad) !important;
  border-color: transparent !important;
  color: var(--order-cta-fg) !important;
  box-shadow: var(--order-cta-shadow) !important;
}

@media (max-width: 575.98px) {
  #review-order .btn-group.float-right { float: none !important; flex-wrap: wrap; }
  #review-order .totals-box { width: 100%; }
}

#summary_section .card { box-shadow: var(--order-cart-shadow); }

#summary_section .card-header {
  background: var(--order-group-header) !important;
  color: var(--order-text-main) !important;          /* same as the package header; flips, readable on the tint */
  border-bottom: 1px solid var(--order-card-border) !important;   /* match the package header's hairline */
  font-family: var(--order-font-display) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  gap: 10px !important;
  padding: 18px 22px !important;
}
#summary_section .card-header::before {       /* repurpose the accent bar as a dot */
  content: "" !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: var(--radius-full) !important;
  background: var(--order-cta-solid) !important;
}

#summary_section .cart-summary table:not(.totals) {
  width: 100% !important;
  background: var(--order-inner-box) !important;
  border: 1px solid var(--order-card-border) !important;
  border-radius: var(--radius-md) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  margin-bottom: var(--space-3) !important;
}
#summary_section .cart-summary table:not(.totals) td {
  border: 0 !important;
  padding: 11px 13px !important;
  color: var(--order-price) !important;        /* the unwrapped "@ $X.XX" price → accent */
  vertical-align: top !important;
}
#summary_section .cart-summary table:not(.totals) td strong {
  color: var(--order-text-main) !important;    /* item name stays strong/main */
  font-weight: 700 !important;
}
#summary_section .cart-summary hr {
  border: 0 !important;
  border-top: 1px solid var(--order-divider) !important;
  opacity: 1 !important;
  margin: var(--space-3) 0 !important;
}

#summary_section .totals {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 4px !important;
}
#summary_section .totals td { border: 0 !important; padding: 5px 0 !important; vertical-align: baseline !important; }
#summary_section .totals td:not([colspan]) .float-right { float: none !important; }
#summary_section .totals td:first-child:not([colspan]) {
  text-align: left !important;
  color: var(--order-text-muted) !important;
  font-size: 13.5px !important;
}
#summary_section .totals td:last-child:not([colspan]) { text-align: right !important; }
/* Values: emphasis on "Total Due Today" (the last currency_value row) … */
#summary_section .totals .currency_value {
  color: var(--order-price) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  font-variant-numeric: tabular-nums !important;
}
/* … Subtotal (first row) stays muted-normal */
#summary_section .totals tr:first-child .currency_value {
  color: var(--order-text-muted) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}

#summary_section .totals td[colspan="2"] {
  background: var(--order-pill-bg) !important;
  border: 1px solid var(--order-card-border) !important;
  border-radius: var(--radius-full) !important;
  padding: 9px 14px !important;
  text-align: center !important;
}
#summary_section .totals td[colspan="2"] .float-right {
  float: none !important;
  display: block !important;
  text-align: center !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  color: var(--order-text-muted) !important;
}

/* "Have a coupon?" — centered accent link */
#summary_section a[href="#coupon_box"] {
  display: block !important;
  text-align: center !important;
  color: var(--order-link) !important;
  font-weight: 700 !important;
}

/* Stack the currency / checkout row so the button can span full width */
#summary_section .card-body .row > [class*="col-md-5"],
#summary_section .card-body .row > [class*="col-md-7"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* BIG full-width checkout button — the design's lg block primary button */
#summary_section a.btn.btn-success {
  display: flex !important;
  width: 100% !important;
  float: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  height: 50px !important;
  margin-top: 12px !important;
  padding: 0 26px !important;
  font-family: var(--order-font-body) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  border-radius: 13px !important;
  background: var(--order-cta-grad) !important;
  border-color: transparent !important;
  color: var(--order-cta-fg) !important;
  box-shadow: var(--order-cta-shadow) !important;
}
#summary_section a.btn.btn-success:hover { transform: translateY(-2px) !important; filter: brightness(1.05) !important; }
#summary_section a.btn.btn-success i { font-size: 13px !important; }

@media (max-width: 575.98px) {
  #summary_section .cart-summary { overflow-x: auto; }
  #summary_section .totals .currency_value { font-size: 18px !important; }
}

/* Totals + dividers + review table */
.client-main.order-flow .client-content table.totals td { color: var(--order-text-muted); }
.client-main.order-flow .client-content table.totals tr:last-child td { color: var(--order-price); }
.client-main.order-flow .client-content .table th { color: var(--order-table-head); border-bottom-color: var(--order-divider); }
.client-main.order-flow .client-content .table td { border-top-color: var(--order-divider); }
.client-main.order-flow .client-content .well { background: var(--order-inner-box); border: 1px solid var(--order-card-border); border-radius: 14px; }

.client-main.order-flow .client-content .pkg-name,
.client-main.order-flow .client-content .content_section .card-body > strong {
  display: inline !important;
  font-family: var(--order-font-display) !important;
  font-size: 23px !important; font-weight: 700 !important; letter-spacing: -0.01em;
  color: var(--order-text-main) !important;
  vertical-align: baseline !important;
}
.client-main.order-flow .client-content .content_section .pkg-description,
.client-main.order-flow .client-content .content_section .raw-html-embed { display: inline !important; }
.client-main.order-flow .client-content .pkg-tagline {
  display: inline !important;
  margin: 0 0 0 10px !important;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--order-text-muted);
  vertical-align: baseline;
}

.client-main.order-flow .client-content .pkg-specs {
  list-style: none; padding: 0; margin: 14px 0 4px; max-width: 560px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px;
}
.client-main.order-flow .client-content .pkg-specs li {
  display: flex; align-items: center; gap: 10px; padding: 3px 0;
  font-size: 14px; line-height: 1.4; color: var(--order-spec-text);
}
.client-main.order-flow .client-content .pkg-specs li::before {
  content: ""; flex: 0 0 7px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--order-cta-grad);
}

.client-main.order-flow .client-content .content_section .card-body > .float-right {
  float: none !important;
  clear: both;
  margin: var(--space-4) 0 0 !important;
}
.client-main.order-flow .client-content .content_section form.form-inline {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
}
.client-main.order-flow .client-content .content_section form.form-inline .form-group { margin: 0 !important; }

.client-main.order-flow .client-content .content_section form .btn {
  background: var(--order-cta-grad) !important;
  border-color: transparent !important;
  color: var(--order-cta-fg) !important;
  box-shadow: var(--order-cta-shadow) !important;
  font-weight: 700 !important;
  height: 34px !important;            /* proportionate to the input-sm billing-cycle select */
  padding: 0 14px !important;
  font-size: 13px !important;
}
.client-main.order-flow .client-content .content_section form .btn:hover {
  color: var(--order-cta-fg) !important;
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Subtle hairline separator between packages */
.client-main.order-flow .client-content .content_section .card-body > hr {
  border: 0 !important;
  border-top: 1px solid var(--order-divider) !important;
  opacity: 1 !important;
  margin: var(--space-6) 0 !important;
}

/* Mobile: controls go full-width and wrap cleanly */
@media (max-width: 575.98px) {
  .client-main.order-flow .client-content .content_section form.form-inline { width: 100%; }
  .client-main.order-flow .client-content .content_section form.form-inline .form-group,
  .client-main.order-flow .client-content .content_section form.form-inline select.form-control,
  .client-main.order-flow .client-content .content_section form .btn { width: 100%; }
}

/* ============================================================================
   PACKAGE CARD GRID  —  main_packages.pdt / main_index.pdt
   Markup:  .card-body > ul.pkg-grid > li.pkg-card
                                        > .pkg-name, .pkg-tagline,
                                          ul.pkg-specs | .pkg-description,
                                          .pkg-card-foot > form.pkg-card-form

   Two deliberate naming choices:
     - grid items are `.pkg-card`, NOT `.card` — `.card`/`.card-blesta` (l.954)
       forces padding:0 / overflow:hidden / 22px radius / heavy shadow with
       !important, which would nest a giant panel inside the panel.
     - the card interior is NOT `.card-body` — app.min.js injects an AJAX
       loading spinner into every `.card-body` inside div.content_section and
       resets position:static on complete. The single outer .card-body stays.

   The .pkg-name / .pkg-tagline / .pkg-specs rules at l.1323-1352 were written
   for this markup but never had a template to style; the display:inline
   !important on them is un-done below, scoped to the grid only, so the flat
   list in config.pdt / cart.pdt keeps working.
   ========================================================================= */
.client-main.order-flow .client-content .pkg-grid {
  display: grid;
  /* Capped at 2 columns by construction: a 3rd track needs 812px of package
     column and no viewport provides it (703px max at desktop). Falls to 1-up
     on its own below 536px, so no breakpoint of its own is needed. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;                       /* beats Bootstrap's ul { padding-left: 2rem } */
}
/* A one-package group shouldn't strand a single card across a 700px row */
.client-main.order-flow .client-content .pkg-grid--single { grid-template-columns: minmax(0, 420px); }

.client-main.order-flow .client-content .pkg-card {
  display: flex;                    /* also cancels list-item */
  flex-direction: column;
  min-width: 0;                     /* grid items default to min-content: long specs blow the track out */
  padding: 20px;
  background: var(--order-plan-bg);
  border: 1px solid var(--order-card-border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.client-main.order-flow .client-content .pkg-card:hover,
.client-main.order-flow .client-content .pkg-card:focus-within { border-color: var(--cta-bg); }
.client-main.order-flow .client-content .pkg-card:hover { transform: translateY(-2px); }
.client-main.order-flow .client-content .pkg-card.is-unavailable { opacity: 0.62; }

/* --- Name + tagline -------------------------------------------------------
   Overrides the display:inline !important at l.1324 / l.1334, grid-scoped.  */
.client-main.order-flow .client-content .pkg-grid .pkg-card .pkg-name {
  display: block !important;
  margin: 0 0 4px;
  font-size: 19px !important;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.client-main.order-flow .client-content .pkg-grid .pkg-card .pkg-tagline {
  display: block !important;
  margin: 0 0 12px !important;
  font-size: 11px;
}
.client-main.order-flow .client-content .pkg-grid .pkg-card .pkg-name:last-child { margin-bottom: 12px; }

/* --- Specs: reuse the dot-bullet list, forced to one column ---------------
   The base rule is `1fr 1fr` capped at 560px, impossible in a ~343px card.  */
.client-main.order-flow .client-content .pkg-grid .pkg-card .pkg-specs {
  grid-template-columns: 1fr;
  max-width: none;
  gap: 2px 0;
  margin: 0 0 18px;
  padding: 0;
}
.client-main.order-flow .client-content .pkg-grid .pkg-card .pkg-specs li {
  align-items: flex-start;          /* base rule centers; wrapped 2-line items need top-align */
  gap: 9px;
  padding: 2.5px 0;
  font-size: 13.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.client-main.order-flow .client-content .pkg-grid .pkg-card .pkg-specs li::before { margin-top: 6px; }

/* --- As-authored description fallback ------------------------------------ */
.client-main.order-flow .client-content .pkg-grid .pkg-card .pkg-description {
  display: block !important;
  max-width: none;
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--order-spec-text);
  overflow-wrap: anywhere;
}
.client-main.order-flow .client-content .pkg-grid .pkg-card .pkg-description > :last-child { margin-bottom: 0; }
/* An admin-authored <hr> inside a description must not slice the card open */
.client-main.order-flow .client-content .pkg-grid .pkg-card hr { display: none !important; }

/* --- Foot: price + form, pinned so CTAs line up across uneven cards ------- */
.client-main.order-flow .client-content .pkg-card .pkg-card-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--order-divider);
}
.client-main.order-flow .client-content .pkg-card .pkg-card-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.client-main.order-flow .client-content .pkg-card .pkg-card-amount {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--order-price);
}
.client-main.order-flow .client-content .pkg-card .pkg-card-term {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--order-text-muted);
}
.client-main.order-flow .client-content .pkg-card .pkg-card-renews {
  margin: -6px 0 12px;
  font-size: 11.5px;
  color: var(--order-text-muted);
}
.client-main.order-flow .client-content .pkg-card .pkg-card-renews strong {
  font-family: var(--font-mono);
  font-weight: 700;
}
.client-main.order-flow .client-content .pkg-card .pkg-card-term-label {
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--order-text-faint);
}

/* --- Form + controls ------------------------------------------------------
   The form deliberately does NOT carry .form-inline, so the flex-row rule at
   l.1360 never matches and this vertical stack needs no !important.         */
.client-main.order-flow .client-content .pkg-card .pkg-card-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 0;
}
.client-main.order-flow .client-content .pkg-grid select[name="pricing_id"] {
  min-width: 0;                     /* neutralizes l.761 min-width: 220px */
  width: 100%;
  max-width: 100%;
}
.client-main.order-flow .client-content .pkg-grid .pkg-card .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  height: 38px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  border-radius: var(--radius-md);
}
.client-main.order-flow .client-content .pkg-grid .pkg-card .btn[disabled] {
  background: transparent !important;
  border: 1px solid var(--order-card-border) !important;
  color: var(--order-text-muted) !important;
  box-shadow: none !important;
  opacity: 1;
  cursor: not-allowed;
  transform: none !important;
}
.client-main.order-flow .client-content .pkg-grid .pkg-card .btn[disabled]:hover {
  transform: none !important;
  filter: none;
  color: var(--order-text-muted) !important;
}

@media (max-width: 575.98px) {
  .client-main.order-flow .client-content .pkg-grid,
  .client-main.order-flow .client-content .pkg-grid--single { grid-template-columns: 1fr; }
  .client-main.order-flow .client-content .pkg-card { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .client-main.order-flow .client-content .pkg-card { transition: none; }
  .client-main.order-flow .client-content .pkg-card:hover { transform: none; }
}

/* ============================================================================
   IMAGE PICKER  —  category tabs + family cards built over a native select
   Markup:  .package_options .form-group > select.dyn-img-src (hidden, still posts)
                                          + .dyn-img > .dyn-img-tabbar, .dyn-img-panel*
   Cards are NOT .card / .card-body (see the package grid note above).
   Every colour is a token; brand fills live inside the icon sprite file.
   ========================================================================= */
.client-main.order-flow .client-content .package_options select.dyn-img-src { display: none; }

.client-main.order-flow .client-content .package_options .dyn-img {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* Tab strip with round previous / next buttons; scrollbar hidden */
.client-main.order-flow .client-content .package_options .dyn-img-tabbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.client-main.order-flow .client-content .package_options .dyn-img-nav {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--order-card-border);
  border-radius: 50%;
  background: var(--order-pill-bg);
  color: var(--order-text-main);
  cursor: pointer;
  transition: border-color var(--transition), opacity var(--transition);
}
.client-main.order-flow .client-content .package_options .dyn-img-nav:hover { border-color: var(--cta-bg); }
.client-main.order-flow .client-content .package_options .dyn-img-nav[disabled] { opacity: 0.35; cursor: default; }
.client-main.order-flow .client-content .package_options .dyn-img-nav svg { width: 12px; height: 12px; }
.client-main.order-flow .client-content .package_options .dyn-img-tabbar.no-overflow .dyn-img-nav { display: none; }

.client-main.order-flow .client-content .package_options .dyn-img-tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-1) 0;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.client-main.order-flow .client-content .package_options .dyn-img-tabs::-webkit-scrollbar { display: none; }

.client-main.order-flow .client-content .package_options .dyn-img-tab {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--order-card-border);
  border-radius: var(--radius-full);
  background: var(--order-pill-bg);
  color: var(--order-text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.client-main.order-flow .client-content .package_options .dyn-img-tab:hover { color: var(--order-text-main); }
.client-main.order-flow .client-content .package_options .dyn-img-tab[aria-selected="true"] {
  background: var(--cta-bg);
  color: var(--cta-text);
  border-color: transparent;
}
.client-main.order-flow .client-content .package_options .dyn-img-tab:focus-visible,
.client-main.order-flow .client-content .package_options .dyn-img-nav:focus-visible,
.client-main.order-flow .client-content .package_options .dyn-img-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.client-main.order-flow .client-content .package_options .dyn-img-panel { display: grid; gap: var(--space-2); }
.client-main.order-flow .client-content .package_options .dyn-img-group {
  margin: 0;
  font-size: 13px;
  color: var(--order-text-faint);
}

/* Two columns in the order column, one below 576px */
.client-main.order-flow .client-content .package_options .dyn-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
  align-items: stretch;
}
@media (max-width: 575.98px) {
  .client-main.order-flow .client-content .package_options .dyn-img-grid { grid-template-columns: 1fr; }
}

.client-main.order-flow .client-content .package_options .dyn-img-card {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-3);
  background: var(--order-plan-bg);
  border: 1px solid var(--order-card-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.client-main.order-flow .client-content .package_options .dyn-img-card:hover { border-color: var(--cta-bg); }
.client-main.order-flow .client-content .package_options .dyn-img-card.is-selected {
  border-color: var(--cta-bg);
  box-shadow: 0 0 0 1px var(--cta-bg);
}
.client-main.order-flow .client-content .package_options .dyn-img-card.is-unavailable { opacity: 0.55; cursor: default; }

.client-main.order-flow .client-content .package_options .dyn-img-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
}
/* Brand marks sit on a constant white tile so dark logos stay visible in both themes */
.client-main.order-flow .client-content .package_options .dyn-img-icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--order-on-accent);
  border: 1px solid var(--order-card-border);
}
.client-main.order-flow .client-content .package_options .dyn-img-icon svg { width: 18px; height: 18px; display: block; }
.client-main.order-flow .client-content .package_options .dyn-img-icon.is-fallback {
  background: var(--order-inner-box);
  color: var(--order-text-main);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.client-main.order-flow .client-content .package_options .dyn-img-name {
  min-width: 0;
  color: var(--order-text-main);
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.client-main.order-flow .client-content .package_options .dyn-img-count {
  margin-left: 4px;
  color: var(--order-text-faint);
  font-weight: 400;
}
.client-main.order-flow .client-content .package_options .dyn-img-badge {
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--order-card-border);
  border-radius: var(--radius-full);
  background: var(--order-pill-bg);
  color: var(--order-price);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.client-main.order-flow .client-content .package_options .dyn-img-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--order-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.client-main.order-flow .client-content .package_options select.dyn-img-ver { width: 100%; align-self: end; }
.client-main.order-flow .client-content .package_options select.dyn-img-ver.is-single {
  background-image: none;
  padding-right: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .client-main.order-flow .client-content .package_options .dyn-img-card,
  .client-main.order-flow .client-content .package_options .dyn-img-tab,
  .client-main.order-flow .client-content .package_options .dyn-img-nav { transition: none; }
  .client-main.order-flow .client-content .package_options .dyn-img-tabs { scroll-behavior: auto; }
}

.whois {
  background: rgba(var(--fg-subtle-rgb), 0.06);
  background-repeat: no-repeat;
  background-position: 110% -70px;
  background-image: url(../images/globe.svg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}
.whois div.checkbox label { padding-right: var(--space-1); }
.whois div.tlds,
.whois div.search { margin: 0 auto; text-align: center; display: block; }
.whois div.tlds { margin-bottom: 0; }
.whois .show_more { margin-left: var(--space-1); }

@media (max-width: 768px) {
  .client-main.order-flow .client-content .col-md-9,
  .client-main.order-flow .client-content .col-md-3,
  #summary_section {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  #summary_section { margin-top: var(--space-5); }
  #summary_section .card { position: static; }

  /* package row: stack name/description above the price-select + button */
  .client-main.order-flow .client-content .card-body .float-right {
    float: none !important;
    margin-top: var(--space-3);
  }
  .client-main.order-flow .client-content .card-body .float-right .form-group,
  .client-main.order-flow .client-content .card-body .float-right select.form-control {
    width: 100%;
    min-width: 0;
  }
  .client-main.order-flow .client-content .card-body .float-right .btn { width: 100%; }

  /* checkout payment columns stack → drop the vertical divider */
  .client-main.order-flow .client-content .col-border { border-left: none; }

  /* cart actions + totals full width, no horizontal scroll */
  .totals-box,
  .client-main.order-flow .client-content .col-md-4.offset-md-8 {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    flex: 0 0 100%;
  }
  .client-main.order-flow .client-content .btn-group.float-right {
    float: none !important; /* allow checkout buttons to wrap full-width on mobile */
    display: flex;
    width: 100%;
    gap: var(--space-2);
  }
  .client-main.order-flow .client-content .btn-group.float-right .btn { flex: 1; }

  /* tables: let long descriptions wrap instead of forcing a scrollbar */
  .client-main.order-flow .client-content .table-responsive { overflow-x: visible; }
  .client-main.order-flow .client-content .table td,
  .client-main.order-flow .client-content .table th { white-space: normal; }
}

/* Heading — Space Grotesk, larger, like the design. */
.instances-page .page-header h1 {
  font-family: 'Space Grotesk', var(--font-display), system-ui, sans-serif;
  font-size: clamp(30px, 4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.instances-page .page-header .subtitle { font-size: 15px; }

/* Segmented tab control. */
.instances-page .tabs { display: flex; width: 100%; padding: 5px; border-radius: 14px; }
.instances-page .tab {
  flex: 1 1 0;
  justify-content: center;
  font-family: 'Manrope', var(--font-body), system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 10px;
}
.instances-page .tab.is-active { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }

/* Table card — rounded, bordered, shadowed. */
.instances-page .data-table-wrap {
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.instances-page .data-table th {
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 15px 28px;
}
.instances-page .data-table td { padding: 22px 28px; }
.instances-page .data-table tbody tr:hover td {
  background: rgba(var(--fg-subtle-rgb), 0.05);
}

.instances-page .data-table tbody td:first-child { border-left: 3px solid var(--cta-bg); }

.instances-page .data-table .instance-name {
  font-family: 'Space Grotesk', var(--font-display), system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
}
.instances-page .data-table .instance-name:hover { color: var(--fg); }

/* Status pill — keep .pill-* colors; only roomier shape + subtle border. */
.instances-page .data-table .pill {
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid var(--border);
}

/* Manage button — filled accent, like the design. */
.instances-page .data-table .actions .btn {
  padding: 9px 20px;
  border-radius: 11px;
  transition: transform 0.15s var(--transition-ease, ease);
}

.instances-page .data-table .actions .btn:hover {
  background: var(--cta-bg);
  color: var(--cta-text);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .instances-page .data-table-wrap { overflow-x: auto; }
}

.guest-header {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 24px 34px 0;
}
/* The background/border/shadow live on .gh-bar, not on this sticky element, so
   page content used to scroll visibly through the 24px top gutter and both 34px
   side gutters. A plain opaque band would end in a hard edge under a floating
   capsule, so this is a masked scrim that overhangs 16px and fades out.
   inset bottom is NEGATIVE, so the header's own height is unchanged (90px, 78px
   at <=720) and no sticky offset downstream shifts. z-index:-1 keeps it behind
   .gh-inner within the header's own stacking context. Degrades safely: without
   backdrop-filter the translucent fill alone still fixes the bug. */
.guest-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -16px;
  z-index: -1;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  /* mask is alpha-only, so currentColor stands in for an opaque stop and keeps
     this block free of colour literals. */
  -webkit-mask-image: linear-gradient(to bottom, currentColor 0 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, currentColor 0 78%, transparent 100%);
}
.gh-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.gh-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px 13px 22px;
  border-radius: 46px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-elevated);
}

/* logo */
.gh-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.gh-logo-full {
  display: block;
  width: 160px;
  height: 34px;
  background: url('dynavo-lockup-white.svg') no-repeat left center / contain;
}
[data-theme="light"] .gh-logo-full { background-image: url('dynavo-lockup-black.svg'); }
/* Icon-only, shown on narrow viewports. */
.gh-logo-mini {
  display: none;
  width: 30px;
  height: 30px;
  background: url('dynavo-icon-white.svg') no-repeat center / contain;
}
[data-theme="light"] .gh-logo-mini { background-image: url('dynavo-icon-black.svg'); }

/* center nav — margin-inline auto centres it between logo and actions */
.gh-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline: auto;
}
.gh-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 11px;
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--fg-muted);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  transition: color var(--transition), background var(--transition);
}
.gh-link:hover,
.gh-dd.is-open .gh-dd-toggle {
  color: var(--fg);
  background: rgba(var(--fg-subtle-rgb), 0.10);
}
.gh-caret {
  font-size: 10px;
  line-height: 1;
  transition: transform 0.2s;
}
.gh-dd.is-open .gh-caret { transform: rotate(180deg); }

/* dropdowns */
.gh-dd { position: relative; }
.gh-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 210px;
  padding: 8px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-elevated);
  z-index: 40;
  display: none;
}
.gh-dd.is-open .gh-menu {
  display: block;
  animation: ghMenuIn 0.16s ease;
}
@keyframes ghMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gh-menu-item {
  display: block;
  padding: 11px 14px;
  border-radius: 10px;
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--fg);
  transition: color var(--transition), background var(--transition);
}
.gh-menu-item:hover { background: rgba(var(--fg-subtle-rgb), 0.10); }
.gh-menu-muted { color: var(--fg-muted); }
.gh-menu-muted:hover { color: var(--fg); }
.gh-menu-sep {
  height: 1px;
  margin: 8px 6px;
  background: var(--border);
}

/* right controls */
.gh-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.gh-cart {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--cta-grad);
  color: var(--cta-text);
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px var(--cta-shadow);
  transition: transform 0.15s;
}
.gh-cart:hover { transform: translateY(-2px); }
.gh-cart-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  /* translucent badge tuned to the CTA fill, which flips with the theme */
  background: rgba(0, 0, 0, 0.16);
}
[data-theme="light"] .gh-cart-count { background: rgba(255, 255, 255, 0.22); }

/* Sized in CSS rather than width/height attributes so it can't be overridden by
   the flex row; flex:none stops .gh-cart's gap from squeezing it. */
.gh-cart-glyph { width: 17px; height: 17px; display: block; flex: none; }

/* ---- Hamburger: .sidebar-toggle's 36x36 box (client-area.css:262-273) with
   .inv-funnel's bar primitive (client-area.css:1788-1792, currentColor so it can
   inherit a state colour). X-morph geometry harvested from the orphaned
   .nav-hamburger at l.50-79 — dead CSS with no markup and no JS on the box.
   Bars are 2px with 5px gaps, so the outer bar centres sit exactly +/-7px from
   the middle and translateY(7px) lands them dead on centre.
   Focus ring comes free from primitives.css:129 (button:focus-visible). ---- */
.gh-hamburger {
  display: none;                 /* revealed at <=900 */
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}
.gh-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}
body.gh-panel-open .gh-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.gh-panel-open .gh-hamburger span:nth-child(2) { opacity: 0; }
body.gh-panel-open .gh-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================================
   GUEST HEADER — PANEL MODE, <= 900px
   ----------------------------------------------------------------------------
   The ONE .gh-nav becomes a slide-down panel; no second nav is emitted. That is
   deliberate: client-area.js:218 is getElementById('nav-theme-toggle'), singular,
   so a duplicated bar would ship an inert toggle, and duplicating 12 links would
   double the i18n surface on a file that renders on 100% of the portal.

   WHY 900 AND NOT 860: measured from real Manrope 600 metrics the bar needs
   825px (logo 160 + nav 384 + actions 153 + bar padding 38 + borders 2 + header
   gutters 68), and nothing can shrink — no flex-wrap on .gh-bar, no min-width:0
   on .gh-nav, both flanks flex-shrink:0. But Manrope arrives from Google Fonts
   with display=swap, and the fallback stack runs 10-15% wider, pushing the true
   minimum to ~880px. 860 would break during FOUT and break permanently wherever
   Google Fonts is blocked. 900 clears both and is already this sheet's
   auth-chrome breakpoint (l.416) — the login pages are this header's primary
   surface, so header and page now reflow in the same instant. No new breakpoint
   value is introduced.
   ============================================================================ */
@media (max-width: 900px) {
  .gh-inner { position: relative; }
  .gh-hamburger { display: inline-flex; order: 1; }   /* order:1 -> paints last */

  /* .gh-nav's margin-inline:auto (l.1783) was the ONLY thing pushing the actions
     right. Once the nav leaves the flex flow they would collapse left with
     ~130px of empty pill beside them. */
  .gh-actions { margin-left: auto; }

  /* Positioned against .gh-inner, NOT .gh-bar. .gh-inner has no padding and no
     border, so top:100% is exactly the pill's outer bottom edge and left/right:0
     is exactly its width; off .gh-bar the panel would be inset by its 18px/14px
     padding and read as a thing inside the card rather than below it. */
  .gh-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 40;
    margin-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 10px;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-elevated);
    /* visibility (not display) also removes every link from the tab order while
       closed, so there is no inert/tabindex bookkeeping. display:none would also
       kill the transition. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition-normal),
                transform var(--transition-normal),
                visibility var(--transition-normal);
  }
  body.gh-panel-open .gh-nav { opacity: 1; visibility: visible; transform: translateY(0); }

  .gh-nav > .gh-link,
  .gh-dd-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: var(--radius-md);
  }

  /* sections become inline accordions rather than floating cards */
  .gh-dd { position: static; }
  .gh-menu {
    position: static;
    min-width: 0;
    padding: 2px 0 6px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .gh-menu-item { padding: 11px 14px 11px 28px; }
  .gh-menu-sep { margin: 6px 14px 6px 28px; background: var(--border-subtle); }

  /* primitives.css:138 already kills all transitions globally under reduced
     motion via !important; this is local documentation and insurance. */
  @media (prefers-reduced-motion: reduce) {
    .gh-nav { transition: none; }
    .gh-hamburger span { transition: none; }
    .gh-dd.is-open .gh-menu { animation: none; }
  }
}

@media (max-width: 720px) {
  .guest-header { padding: 16px 16px 0; }
  .gh-bar { padding: 11px 14px 11px 18px; }
  /* .gh-nav { display: none; } REMOVED — the nav is the panel now, and
     display:none would beat the visibility toggle so it could never open. */
  .gh-logo-full { display: none; }
  .gh-logo-mini { display: block; }
  /* the count is a hardcoded "0" (structure.pdt:359) that nothing populates */
  .gh-cart-count { display: none; }
  .gh-cart { padding: 9px 14px; }
  body.guest-chrome { --gh-h: 78px; }   /* header shrinks; keep the cart clear of it */
  html { scroll-padding-top: 94px; }
}

.err404 {
  width: 100%;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px 60px;
}
.err404-grid {
  width: 100%;
  max-width: 1000px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 56px;
}

/* --- left: copy --- */
.err404-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  margin-bottom: 22px;
  border-radius: var(--radius-full);
  font-family: var(--font-body), system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
}
.err404-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.err404-dot-red { background: #e05648; animation: err404-blink-red 1.4s infinite; }
.err404-dot-green { background: #3fae6a; box-shadow: 0 0 8px 1px rgba(63, 174, 106, 0.7); }
.err404-num {
  margin: 0 0 6px;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: clamp(64px, 15vw, 128px);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--fg) 0%, var(--fg-subtle) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.err404-title {
  margin: 6px 0 12px;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.err404-text {
  margin: 0 0 30px;
  max-width: 420px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fg-muted);
}
.err404-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.err404-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 13px;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.err404-btn-primary {
  padding: 14px 26px;
  border: none;
  background: var(--cta-grad);
  color: var(--cta-text);
  box-shadow: 0 8px 20px var(--cta-shadow);
}
.err404-btn-primary:hover { transform: translateY(-2px); }
.err404-btn-ghost {
  padding: 14px 24px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--fg);
}
.err404-btn-ghost:hover { border-color: var(--fg); }
.err404-arrow { font-size: 15px; line-height: 1; }

/* --- right: animated server-rack scene (fixed 300x340 canvas) --- */
.err404-scene { position: relative; width: 300px; height: 340px; }
.err404-glow {
  position: absolute;
  inset: 6% 12% 10%;
  border-radius: 40px;
  background: radial-gradient(circle at 50% 40%, rgba(120, 130, 160, 0.35), transparent 70%);
  filter: blur(30px);
}
.err404-packet {
  position: absolute;
  bottom: 14%;
  border-radius: 2px;
  background: rgba(180, 190, 220, 0.6);
}
.err404-packet-1 { left: 18%; width: 7px; height: 7px; animation: err404-packet 3.4s linear 0s infinite; }
.err404-packet-2 { left: 40%; width: 5px; height: 5px; animation: err404-packet 4.1s linear 0.9s infinite; }
.err404-packet-3 { left: 62%; width: 8px; height: 8px; animation: err404-packet 3.0s linear 1.7s infinite; }
.err404-packet-4 { left: 78%; width: 6px; height: 6px; animation: err404-packet 4.6s linear 0.4s infinite; }
.err404-packet-5 { left: 30%; width: 5px; height: 5px; animation: err404-packet 3.7s linear 2.3s infinite; }
.err404-packet-6 { left: 84%; width: 7px; height: 7px; animation: err404-packet 4.3s linear 1.2s infinite; }

.err404-float {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: err404-float 5.5s ease-in-out infinite;
}
.err404-rack {
  position: relative;
  width: 210px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  border-radius: 20px;
  background: linear-gradient(160deg, #1b1b22, #141419);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
}
.err404-scan {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  height: 38px;
  border-radius: 8px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent);
  animation: err404-scan 3.2s ease-in-out infinite;
}
.err404-unit {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.err404-unit.is-dead {
  background: rgba(224, 86, 72, 0.09);
  border-color: rgba(224, 86, 72, 0.35);
}
.err404-led { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.err404-led-green { background: #3fae6a; animation: err404-blink-green 2.2s infinite; }
.err404-led-amber { background: #e0a83c; animation: err404-blink-amber 1.6s infinite; }
.err404-led-red { background: #e05648; animation: err404-blink-red 1.3s infinite; }
.err404-bars { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.err404-bar { height: 4px; border-radius: 3px; }
.err404-bar-a { width: 70%; background: rgba(255, 255, 255, 0.16); }
.err404-bar-b { width: 45%; background: rgba(255, 255, 255, 0.07); }
.err404-bar-dim { width: 70%; background: rgba(255, 255, 255, 0.07); }
.err404-vents { display: flex; gap: 4px; }
.err404-vents span { width: 3px; height: 14px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }

.err404-plug {
  position: absolute;
  left: -34px;
  bottom: 26px;
  display: flex;
  align-items: center;
}
.err404-plug-body { width: 26px; height: 9px; border-radius: 5px 2px 2px 5px; background: #3a3a44; }
.err404-plug-pin { width: 14px; height: 3px; background: #6f6f7a; }
.err404-spark {
  position: absolute;
  left: -6px;
  top: -9px;
  font-size: 15px;
  color: #e0a83c;
  animation: err404-spark 1.8s ease-in-out infinite;
}
.err404-socket {
  position: absolute;
  left: 12px;
  bottom: 22px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: rgba(224, 86, 72, 0.5);
}

@keyframes err404-float { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 14px)); } }
@keyframes err404-blink-red { 0%, 45% { opacity: 1; box-shadow: 0 0 10px 1px rgba(224, 86, 72, 0.9); } 55%, 100% { opacity: 0.25; box-shadow: none; } }
@keyframes err404-blink-green { 0%, 60% { opacity: 1; } 72%, 100% { opacity: 0.35; } }
@keyframes err404-blink-amber { 0%, 30% { opacity: 1; } 42%, 80% { opacity: 0.4; } 100% { opacity: 1; } }
@keyframes err404-scan { 0% { transform: translateY(-6px); opacity: 0; } 20%, 80% { opacity: 0.55; } 100% { transform: translateY(150px); opacity: 0; } }
@keyframes err404-packet { 0% { transform: translateY(20px) scale(0.6); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(-150px) scale(1); opacity: 0; } }
@keyframes err404-spark { 0%, 100% { opacity: 0.2; transform: scale(0.9) rotate(0deg); } 50% { opacity: 0.7; transform: scale(1.15) rotate(8deg); } }

/* responsive — mirrors the design's own breakpoint notes */
@media (max-width: 880px) {
  .err404-grid { grid-template-columns: 1fr; text-align: center; gap: 30px; justify-items: center; }
  .err404-scene { margin: 0 auto; }
  .err404-ctas { justify-content: center; }
  .err404-text { margin-left: auto; margin-right: auto; }
}
@media (max-width: 480px) {
  .err404 { padding: 8px 18px 50px; }
  .err404-scene { transform: scale(0.82); width: 260px; height: 300px; }
  .err404-ctas .err404-btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 360px) {
  .err404-scene { transform: scale(0.7); }
}

.login-wrap {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.login-brand { line-height: 1.1; }
.login-brand-name {
  margin: 0 0 4px;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.login-brand-eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.login-card {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-elevated);
}

.login-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 30px;
  background: linear-gradient(135deg, #26282d 0%, #16181a 100%);
  color: #fff;
}
.login-accent-bar {
  flex-shrink: 0;
  width: 5px;
  height: 34px;
  border-radius: 4px;
  background: #d8d8dd;
}
.login-card-head h2 {
  margin: 0;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}
.login-card-head p {
  margin: 3px 0 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.62);
}

.login-card-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px;
}

.login-card-body > .alert {
  width: 100%;
  margin: 0;
}
.login-card-body fieldset {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.login-card-body .form-group { margin-bottom: 0; }
.login-card-body .form-group label {
  display: block;
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-muted);
}
/* Remember-me row. */
.login-check {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  cursor: pointer;
  font-size: 14px;
  color: var(--fg);
}
.login-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--fg);
  cursor: pointer;
}

.login-card-body .btn-block { width: 100%; }

.login-divider {
  height: 1px;
  background: var(--border-subtle);
}
.login-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.login-meta a {
  font-size: 14px;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
}
.login-meta a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .login-card-head { padding: 18px 22px; }
  .login-card-body { padding: 26px 22px 28px; }
  .login-brand-name { font-size: 34px; }
  .login-meta { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---- Back-link (reply / add) ---- */
.ticket-back {
  display: inline-block;
  margin-bottom: 22px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
  border-bottom: 1.5px dashed rgba(125,127,132,0.5);
}
.ticket-back:hover { color: var(--fg); text-decoration: none; }

/* ---- Department picker: card grid ---- */
.ticket-dept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ticket-dept {
  display: block;
  padding: 24px 26px;
  border-radius: 18px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: border-color var(--transition), transform var(--transition);
}
.ticket-dept:hover { border-color: var(--cta-bg); transform: translateY(-2px); text-decoration: none; }
.ticket-dept-name {
  margin: 0 0 10px;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--fg);
}
.ticket-dept-desc { font-size: 14px; line-height: 1.6; color: var(--fg-muted); }
.ticket-dept-desc :last-child { margin-bottom: 0; }

.ticket-table-wrap { border: none; border-radius: var(--radius-lg); margin-bottom: 24px; }
.ticket-table { border-collapse: separate !important; border-spacing: 0 !important; margin: 0; font-size: 14px; }
.ticket-table > thead > tr > th {
  padding: 12px 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-subtle);
  background: color-mix(in srgb, var(--surface-elevated) 40%, var(--surface)) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  white-space: nowrap;
}
.ticket-table > thead > tr > th a { color: var(--fg-subtle); }
.ticket-table > thead > tr > th:last-child { text-align: right; }
.ticket-table > thead > tr:first-child > th:first-child { border-top-left-radius: var(--radius-lg); }
.ticket-table > thead > tr:first-child > th:last-child  { border-top-right-radius: var(--radius-lg); }

.ticket-table > tbody > tr { background: transparent !important; }
.ticket-table > tbody > tr > td {
  padding: 14px 16px;
  vertical-align: middle;
  font-size: 14px;
  color: var(--fg-muted);
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
.ticket-table > tbody > tr:last-child > td { border-bottom: 0 !important; }
.ticket-table > tbody > tr:last-child > td:first-child { border-bottom-left-radius: var(--radius-lg); }
.ticket-table > tbody > tr:last-child > td:last-child  { border-bottom-right-radius: var(--radius-lg); }
.ticket-table > tbody > tr:hover > td { background: color-mix(in srgb, var(--surface-elevated) 30%, transparent) !important; }
.ticket-table > tbody > tr > td:first-child a {
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fg);
  text-decoration: none;
}
.ticket-table > tbody > tr > td:last-child { text-align: right; }
.ticket-table .ticket-last { font-family: var(--font-mono); font-size: 13px; }

.ticket-status-text { font-size: 13.5px; font-weight: 600; color: var(--fg); }

.ticket-table .btn-group { display: inline-flex; }
.ticket-table .btn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface-elevated);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: none;
  transition: border-color var(--transition);
}
.ticket-table .btn:hover { border-color: var(--cta-bg); background: var(--surface-elevated); color: var(--fg); }
.ticket-table .btn-group .btn:first-child { border-radius: 10px 0 0 10px; border-right: none; }
.ticket-table .btn-group .btn.dropdown-toggle { padding: 0 11px; border-radius: 0 10px 10px 0; color: var(--fg-muted); font-size: 10px; }

.ticket-table .btn-group .btn > i,
.ticket-table .btn > i { display: none; }

.card-blesta .ticket-empty {
  padding: 46px 24px;
  border-radius: 16px;
  text-align: center;
  font-size: 15px;
  color: var(--fg-muted);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
}
.card-blesta .ticket-empty p { margin: 0; }

/* ---- Priority badges → semantic pills (list + meta) ---- */
.ticket-table .badge,
.ticket-meta .badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--surface-elevated);
  color: var(--fg);
}
.ticket-table .badge-danger,  .ticket-meta .badge-danger  { background: rgba(var(--danger-rgb), 0.13);  border-color: var(--danger);  color: var(--danger); }
.ticket-table .badge-warning, .ticket-meta .badge-warning { background: rgba(var(--warning-rgb), 0.14); border-color: var(--warning); color: var(--warning); }
.ticket-table .badge-success, .ticket-meta .badge-success { background: rgba(var(--success-rgb), 0.13); border-color: var(--success); color: var(--success); }
.ticket-table .badge-info,    .ticket-meta .badge-info    { background: var(--surface-elevated); border-color: var(--border); color: var(--fg-muted); }

/* ---- Forms (add / reply / feedback) ---- */
.ticket-form .form-group { margin-bottom: 22px; }
.ticket-form > fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ticket-form label { display: block; font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 9px; }
.ticket-form .form-control {
  height: auto;
  padding: 14px 16px;
  border-radius: 13px;
  border: 1.5px solid var(--border);
  background: var(--surface-elevated);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  box-shadow: none;
}
.ticket-form .form-control:focus { border-color: var(--cta-bg); box-shadow: none; background: var(--surface-elevated); color: var(--fg); }
.ticket-form textarea.form-control { min-height: 150px; line-height: 1.6; }
.ticket-form select.form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: var(--select-caret);
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.ticket-form .drag-drop,
.ticket-form .dropzone {
  border: 2px dashed var(--border);
  border-radius: 14px;
  background: var(--surface-elevated);
  color: var(--fg-muted);
}
/* secondary buttons: Add Recipients toggle, Add Email, remove-recipient */
.ticket-form .btn-light {
  padding: 11px 20px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface-elevated);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
}
.ticket-form .btn-light:hover { border-color: var(--cta-bg); background: var(--surface-elevated); color: var(--fg); }
.ticket-form [data-target="#recipients-section"] { margin-bottom: 0; }
.ticket-form [data-target="#recipients-section"] i { display: none; }  /* design: no chevron */
.dz-message i { display: none; }  /* design dropzone is text-only */
.ticket-form #recipients-section .card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
}

/* ---- Submit row ---- */
.ticket-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 26px; }
.ticket-actions .btn i { display: none; }  /* design buttons are text-only */
.ticket-actions .btn {
  min-width: 120px;
  padding: 13px 28px;
  border: none;
  border-radius: 13px;
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 8px 20px var(--cta-shadow);
  transition: transform var(--transition);
}
.ticket-actions .btn-primary { background: var(--cta-grad); color: var(--cta-text); }
.ticket-actions .btn-danger  { background: var(--danger-grad); color: #fff; box-shadow: 0 8px 20px rgba(200,60,50,0.28); }
.ticket-actions .btn:hover { transform: translateY(-2px); }

/* ---- Ticket meta box (reply / feedback header) ---- */
.ticket-meta {
  padding: 24px 26px;
  margin-bottom: 26px;
  border-radius: 16px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
}
.ticket-meta-label { font-size: 13px; font-weight: 600; color: var(--fg-muted); margin-bottom: 6px; }
.ticket-meta-title {
  font-family: var(--font-display), system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--fg);
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.ticket-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ticket-meta-val { font-size: 14.5px; font-weight: 600; color: var(--fg); }
.ticket-meta-val a { color: var(--link); }
.ticket-meta-footer { margin-top: 20px; }
.ticket-meta-date { font-family: var(--font-mono); font-weight: 500; }

.ticket-msg-attachments { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.ticket-msg-attachments a { color: var(--link); font-size: 13px; }
.ticket-msg-body .image-attachments { margin-top: 14px; }
.ticket-log { margin: 0; }

/* ---- Feedback stars ---- */
.rating-star { cursor: pointer; }
.rating-star .fa-star.far { color: var(--fg-subtle) !important; }

/* ---- Responsive (legacy viewport fallback) ----
   Kept deliberately. Everything below in the TICKETS RESPONSIVE block is scoped
   to .client-main.support-flow (>= 0-2-0) and beats these on specificity in any
   browser that supports @container. These remain as the no-container-query net.  */
@media (max-width: 820px) {
  .ticket-dept-grid { grid-template-columns: 1fr; }
  .ticket-meta-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ticket-meta-grid { grid-template-columns: 1fr; }
  .ticket-actions { flex-direction: column; }
  .ticket-actions .btn { width: 100%; }
}

/* ============================================================================
   TICKETS — RESPONSIVE, CONTAINER-QUERY DRIVEN
   ----------------------------------------------------------------------------
   WHY CONTAINER QUERIES AND NOT @media: on the five client ticket screens the
   usable width is a function of four independent axes, and @media can only see
   one of them:

     * viewport                                              (continuous)
     * sidebar present   .client-shell 240px 1fr -> 1fr @768 (client-area.css:1211)
     * sidebar collapsed 240px -> 64px rail, COOKIE-driven   (client-area.css:1189)
     * logged out        body.guest-chrome hides it entirely (overrides.css:798)

   At viewport 1024 the card content box is 726px (authed), 902px (rail) or 966px
   (anonymous). One viewport, three widths — a media query is wrong in two of the
   three cases, always. It also produces an inversion where 820px viewport yields
   LESS content width (438px) than 768px does (650px), because the sidebar
   reappears above the drawer breakpoint. The @media(820)/@media(560) rules above
   fire against the wrong width nearly every time.

   Two thresholds only, 860 and 440, measured on the panel's own content box.
   Both numerals already exist in this codebase (860 x4; 440 at client-area.css:1064).
   No new VIEWPORT breakpoint is introduced.

   BROWSER SUPPORT adds no floor: @container ships earlier than color-mix() in
   every engine (Chrome 105/Safari 16.0/Firefox 110 vs 111/16.2/113), and this
   theme uses color-mix() unconditionally ~20x including on the ticket table
   headers at l.2309. A @supports fallback at the end of this block covers the
   remainder.
   ============================================================================ */

/* ---- The query container -------------------------------------------------
   Host is .card-content, NOT .card-body and NOT div.col-md-12:
     1. .card-footer (pagination) is a SIBLING of .card-body inside .card-content
        (widget_client.php:114/168/215) — only .card-content holds both.
     2. An element cannot be styled by its own container query; the .card-body
        padding steps below would be impossible if .card-body were the container.
     3. #attachment-lightbox (.support_manager_modal, position:fixed, plugin
        styles.css:534) sits in div.col-md-12 but OUTSIDE .card-content
        (client_tickets_reply.pdt:286). container-type implies `contain: layout`,
        which makes the element a containing block for fixed descendants — a
        container on col-md-12 or .client-content would shrink the lightbox to the
        content column. On .card-content it is untouched.
   `contain: style` is safe here: the only CSS counters in this file are
   --dynavo-step (l.671-689), which is order-flow only.
   The nested #recipients-section .card > .card-body is excluded by construction —
   the child-combinator chain .card-blesta > .card-content never matches it.       */
.client-main.support-flow .card-blesta > .card-content {
  container-type: inline-size;
  container-name: ticketpane;
}

/* ============================================================================
   UNCONDITIONAL REPAIRS — outside every query, so browsers without container
   query support still get them.
   ============================================================================ */

/* All five ticket templates open a bare <div class="col-md-12"> with no .row
   parent, so application.min.css's 10px column padding is never cancelled by a
   row's negative margin. 20px of dead gutter. Child combinator so the
   WidgetClient filter form's own .row > .col-md-12 (widget_client.php:451) keeps
   its normal gutter. */
.client-main.support-flow .client-content > .col-md-12 { padding-left: 0; padding-right: 0; }
.client-main.support-flow .ticket-form > .col-md-12 { padding-left: 0; padding-right: 0; }
.client-main.support-flow form.widget_filter_form { margin-left: 0; margin-right: 0; }

/* overrides.css:1-2 `.card:has(> .card-header){overflow:hidden}` is specificity
   0-2-0 and silently beats `.card-blesta{overflow:visible}` at overrides.css:863
   (0-1-0) — the !important on the neighbouring `padding` line was never added to
   `overflow`. That clips the per-row Close-Ticket dropdown and would clip an
   overflowing pagination row. Scoped, so no other card on the site changes. */
.client-main.support-flow .card-blesta { overflow: visible !important; }

/* Removing the clip above exposes the card's bottom corners, because the clip was
   the only thing rounding them. overrides.css:932-938 was meant to handle this but
   targets `#client_tickets.card-blesta > .card-footer` — and WidgetClient nests the
   footer INSIDE .card-content, so that selector has never matched and the footer
   still renders with the generic opaque `.card-footer` surface (overrides.css:19-23).
   Corrected here with the real DOM path. */
.client-main.support-flow .card-blesta > .card-content > .card-footer {
  background: transparent !important;
  border-top: 0 !important;
  padding: 0 32px 34px;
  display: flex;
  justify-content: center;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.client-main.support-flow .card-blesta > .card-content > .card-body:last-child {
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* .ticket-meta-grid is repeat(4,1fr) with no min-width:0 on the items. Grid items
   default to min-content, so a long department name blows its track out instead of
   wrapping — the same trap documented at l.1438 for .pkg-card. */
.client-main.support-flow .ticket-meta-grid > * { min-width: 0; }
.client-main.support-flow .ticket-meta-val,
.client-main.support-flow .ticket-meta-title { overflow-wrap: anywhere; }

/* Mirrors client-area.css:1032. Blesta ships word-wrap:break-word on div.response
   (plugin styles.css:217/393); the re-theme renamed that node to .ticket-msg-body
   and the guard was lost. .ticket-msg-main already has the min-width:0 half. */
.client-main.support-flow .ticket-msg-body,
.client-main.support-flow .ticket-msg-attachments a { overflow-wrap: anywhere; }

/* Markdown-embedded images in a reply have no max-width anywhere (only .kb-doc img
   at l.332 is covered). */
.client-main.support-flow .ticket-msg-body img { max-width: 100%; height: auto; }

/* client_tickets_reply.pdt:235 uses `col-md-2 col-xs-4`. col-xs-* is Bootstrap 3
   and has no width definition in BS4, so below 768px each thumbnail becomes a
   full-width block. Re-grid intrinsically; the PHP that reopens a .row every 6
   items still works, and the lightbox JS (.image-attachments img[data-slide]) is
   untouched because we only change layout. */
.client-main.support-flow .image-attachments .row.equal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr));
  gap: 10px;
  margin: 0 0 10px;
}
.client-main.support-flow .image-attachments .row.equal > [class*="col-"] {
  width: auto; max-width: none; flex: none; padding: 0;
}
.client-main.support-flow .image-attachments img {
  width: 100%; height: auto; border-radius: var(--radius-sm);
  border: 1px solid var(--border); display: block; cursor: pointer;
}

/* Let long values wrap in table mode instead of forcing the table wider. Blesta's
   application.min.css puts `white-space: nowrap` on EVERY td/th/tr inside
   .table-responsive, which is what drives the ~900-1100px min-content. Headers
   stay nowrap; only the data cells relax. Same treatment and rationale as the
   order flow at l.1654-1656. */
.client-main.support-flow .ticket-table > tbody > tr > td { white-space: normal; }
.client-main.support-flow .ticket-table > tbody > tr > td:nth-child(4) { overflow-wrap: anywhere; }

/* ============================================================================
   CARD MODE — container <= 860px
   The list stops being a table and becomes one card per ticket. Nothing is
   hidden: the summary is the largest element on the card and the Reply control
   is full width at the bottom, instead of ~1000px off the right edge behind an
   invisible scrollbar.
   ============================================================================ */
@container ticketpane (max-width: 860px) {

  .client-main.support-flow .card-blesta > .card-content > .card-body   { padding: 22px; }
  .client-main.support-flow .card-blesta > .card-content > .card-footer { padding: 0 22px 26px; }

  /* .table-responsive's overflow-x:auto must go, or the cards sit in a scroller. */
  .client-main.support-flow .ticket-table-wrap {
    overflow-x: visible; overflow-y: visible; border-radius: 0; margin-bottom: 20px;
  }
  /* display:block removes the table formatting context entirely. Without it a
     display:grid tbody inside a display:table parent triggers CSS table fixup and
     the browser generates anonymous table-cell/row/row-group boxes around it. */
  .client-main.support-flow .ticket-table { display: block; width: 100%; }

  /* The header row is REPURPOSED, not hidden. Those <th> anchors are the only sort
     UI on the page (client_tickets.pdt:34-49); display:none would silently remove
     sorting on every phone. Flatten to a chip strip and drop the two headers that
     carry no link (Summary, Options). */
  .client-main.support-flow .ticket-table > thead { display: block; }
  .client-main.support-flow .ticket-table > thead > tr {
    display: flex; flex-wrap: wrap; gap: 8px; padding: 0 2px 14px;
  }
  .client-main.support-flow .ticket-table > thead > tr > th {
    padding: 5px 11px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-full);
    background: var(--surface-elevated) !important;
    font-size: 10.5px;
    white-space: nowrap;
    text-align: left !important;
  }
  .client-main.support-flow .ticket-table > thead > tr > th:not(:has(a)) { display: none; }
  .client-main.support-flow .ticket-table > thead > tr > th:hover { border-color: var(--cta-bg) !important; }
  .client-main.support-flow .ticket-table > thead > tr > th a { display: block; }

  .client-main.support-flow .ticket-table > tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 14px;
  }

  /* Each row becomes a card. The corner-radius rules at l.2317/2318/2331/2332 and
     the text-align:right at l.2341 carry no !important, so 0-3-3 beats them; the
     border/background rules at l.2325-2333 DO, so those are re-declared. */
  .client-main.support-flow .ticket-table > tbody > tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    align-items: start;
    padding: 18px;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg);
    background: var(--surface-elevated) !important;
    transition: border-color var(--transition);
  }
  .client-main.support-flow .ticket-table > tbody > tr:hover { border-color: var(--cta-bg) !important; }
  .client-main.support-flow .ticket-table > tbody > tr > td,
  .client-main.support-flow .ticket-table > tbody > tr:hover > td,
  .client-main.support-flow .ticket-table > tbody > tr:last-child > td {
    display: block;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: left !important;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 13px;
  }

  /* Roles by position. Columns 1-5 are identical on both tabs; only slot 6 differs
     (Status on Open, the options cell on Closed), which is why the labelled-row
     treatment keys off [data-label] and the actions treatment off :last-child. */
  .client-main.support-flow .ticket-table > tbody > tr > td:nth-child(1) {
    order: 1; grid-column: 1;
  }
  .client-main.support-flow .ticket-table > tbody > tr > td:nth-child(1) a {
    font-size: 17px !important;
  }
  .client-main.support-flow .ticket-table > tbody > tr > td:nth-child(2) {
    order: 2; grid-column: 2; justify-self: end;
  }
  .client-main.support-flow .ticket-table > tbody > tr > td:nth-child(4) {
    order: 3; grid-column: 1 / -1;
    font-size: 14px; line-height: 1.55; color: var(--fg-muted);
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
  }
  .client-main.support-flow .ticket-table > tbody > tr > td:nth-child(3) { order: 4; }
  .client-main.support-flow .ticket-table > tbody > tr > td:nth-child(5) { order: 5; }
  .client-main.support-flow .ticket-table > tbody > tr > td:nth-child(6) { order: 6; }

  /* Labelled rows. data-label is emitted by client_tickets.pdt from the SAME lang
     keys the <thead> uses, so nothing new enters the 22 locale dirs. On the Closed
     tab nth-child(6) is the options cell and carries no data-label, so this simply
     does not apply to it. */
  .client-main.support-flow .ticket-table > tbody > tr > td[data-label] {
    grid-column: 1 / -1;
    display: flex; align-items: baseline; gap: 12px;
  }
  .client-main.support-flow .ticket-table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 96px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--fg-subtle);
  }

  /* Actions. Written AFTER the nth-child(6) rule so it wins the equal-specificity
     tie on the Closed tab, where :nth-child(6) and :last-child are the same cell. */
  .client-main.support-flow .ticket-table > tbody > tr > td:last-child {
    order: 7; grid-column: 1 / -1;
    padding-top: 14px !important;
    border-top: 1px solid var(--border-subtle) !important;
  }
  .client-main.support-flow .ticket-table > tbody > tr > td:last-child form { margin: 0; }
  .client-main.support-flow .ticket-table .btn-group { display: flex; width: 100%; }
  .client-main.support-flow .ticket-table .btn-group .btn:first-child { flex: 1 1 auto; }
  .client-main.support-flow .ticket-table .btn-group .btn.dropdown-toggle { flex: 0 0 52px; }
  .client-main.support-flow .ticket-table > tbody > tr > td:last-child > .btn { width: 100%; }
  .client-main.support-flow .ticket-table .btn { height: 44px; }

  /* Other screens */
  .client-main.support-flow .ticket-dept-grid { grid-template-columns: 1fr; }
  .client-main.support-flow .ticket-dept { padding: 20px; }
  .client-main.support-flow .ticket-meta-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  }
  .client-main.support-flow .ticket-meta { padding: 20px; }
  .client-main.support-flow .ticket-msg { padding: 18px; gap: 16px; }
  .client-main.support-flow .ticket-msg-avatar { flex: 0 0 60px; height: 60px; font-size: 17px; }
}

/* ============================================================================
   TIGHT MODE — container <= 440px  (phones)
   ============================================================================ */
@container ticketpane (max-width: 440px) {

  .client-main.support-flow .card-blesta > .card-content > .card-body   { padding: 16px 16px 22px; }
  .client-main.support-flow .card-blesta > .card-content > .card-footer { padding: 0 16px 22px; }
  .client-main.support-flow .card-blesta > .card-header { padding: 16px; font-size: 17px; gap: 10px; }

  .client-main.support-flow .ticket-table > tbody { gap: 12px; }
  .client-main.support-flow .ticket-table > tbody > tr { padding: 14px; }
  .client-main.support-flow .ticket-table > tbody > tr > td[data-label] {
    flex-direction: column; gap: 2px;
  }
  .client-main.support-flow .ticket-table > tbody > tr > td[data-label]::before { flex: none; }

  .client-main.support-flow .ticket-meta { padding: 16px; }
  .client-main.support-flow .ticket-dept { padding: 16px; }
  .client-main.support-flow .ticket-msg { flex-direction: column; padding: 14px; gap: 12px; }
  .client-main.support-flow .ticket-msg-avatar { flex: 0 0 44px; width: 44px; height: 44px; font-size: 15px; }

  /* Replaces the old @media(560) rule, now measured on the panel instead. */
  .client-main.support-flow .ticket-actions { flex-direction: column-reverse; gap: 10px; margin-top: 20px; }
  .client-main.support-flow .ticket-actions .btn { width: 100%; min-width: 0; }
  .client-main.support-flow .ticket-actions .btn:hover { transform: none; }

  /* Feedback stars. The .row wrapper is preserved — client_tickets_feedback.pdt:161
     does .closest('.row').find('.rating-star') and would break without it. The
     labels are `d-none d-md-block` in the template, so they are unhidden here
     rather than left invisible on exactly the screens that need them most. */
  .client-main.support-flow #tickets_feedback .row .col-2 {
    flex: 1 1 0; max-width: none; padding: 0 2px;
  }
  .client-main.support-flow #tickets_feedback .rating-star > .d-none {
    display: block !important;
    font-size: 10px; line-height: 1.2; overflow-wrap: anywhere;
  }
  .client-main.support-flow #tickets_feedback .rating-star .fa-star { font-size: 22px; }
}

/* ============================================================================
   LEGACY FALLBACK — pre Chrome 105 / Safari 16.0 / Firefox 110. Those are the
   same builds that already fail on color-mix(), which this file uses
   unconditionally, so this adds no support floor — it just keeps the list honest
   for anything that slips through: a real min-width so the table SCROLLS rather
   than pretending to fit.
   ============================================================================ */
@supports not (container-type: inline-size) {
  @media (max-width: 1158px) {
    .client-main.support-flow .ticket-table-wrap { overflow-x: auto; }
    .client-main.support-flow .ticket-table { min-width: 820px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-main.support-flow .ticket-table > tbody > tr { transition: none; }
}