/* ===========================================================================
   Digital Deletion — application stylesheet  (single file, no framework/CDN)
   Layers: palette -> base/tokens -> utilities (generated) -> components
   Regenerate utilities/palette with:  python build_css.py
   =========================================================================== */


:root{
  /* palette (generated) */
  --gray-50: #f8fafc;
  --gray-50-rgb: 248 250 252;
  --gray-100: #f1f5f9;
  --gray-100-rgb: 241 245 249;
  --gray-200: #e2e8f0;
  --gray-200-rgb: 226 232 240;
  --gray-300: #cbd5e1;
  --gray-300-rgb: 203 213 225;
  --gray-400: #94a3b8;
  --gray-400-rgb: 148 163 184;
  --gray-500: #64748b;
  --gray-500-rgb: 100 116 139;
  --gray-600: #475569;
  --gray-600-rgb: 71 85 105;
  --gray-700: #334155;
  --gray-700-rgb: 51 65 85;
  --gray-800: #1e293b;
  --gray-800-rgb: 30 41 59;
  --gray-900: #0f172a;
  --gray-900-rgb: 15 23 42;
  --blue-50: #eff6ff;
  --blue-50-rgb: 239 246 255;
  --blue-100: #dbeafe;
  --blue-100-rgb: 219 234 254;
  --blue-200: #bfdbfe;
  --blue-200-rgb: 191 219 254;
  --blue-500: #3b82f6;
  --blue-500-rgb: 59 130 246;
  --blue-600: #2563eb;
  --blue-600-rgb: 37 99 235;
  --blue-700: #1d4ed8;
  --blue-700-rgb: 29 78 216;
  --green-100: #dcfce7;
  --green-100-rgb: 220 252 231;
  --green-200: #bbf7d0;
  --green-200-rgb: 187 247 208;
  --green-400: #4ade80;
  --green-400-rgb: 74 222 128;
  --green-500: #22c55e;
  --green-500-rgb: 34 197 94;
  --green-600: #16a34a;
  --green-600-rgb: 22 163 74;
  --green-700: #15803d;
  --green-700-rgb: 21 128 61;
  --green-800: #166534;
  --green-800-rgb: 22 101 52;
  --green-900: #14532d;
  --green-900-rgb: 20 83 45;
  --red-100: #fee2e2;
  --red-100-rgb: 254 226 226;
  --red-400: #f87171;
  --red-400-rgb: 248 113 113;
  --red-500: #ef4444;
  --red-500-rgb: 239 68 68;
  --red-600: #dc2626;
  --red-600-rgb: 220 38 38;
  --red-700: #b91c1c;
  --red-700-rgb: 185 28 28;
  --red-800: #991b1b;
  --red-800-rgb: 153 27 27;
  --amber-100: #fef3c7;
  --amber-100-rgb: 254 243 199;
  --amber-400: #fbbf24;
  --amber-400-rgb: 251 191 36;
  --amber-700: #b45309;
  --amber-700-rgb: 180 83 9;
  --amber-800: #92400e;
  --amber-800-rgb: 146 64 14;
  --orange-100: #ffedd5;
  --orange-100-rgb: 255 237 213;
  --orange-500: #f97316;
  --orange-500-rgb: 249 115 22;
  --yellow-100: #fef9c3;
  --yellow-100-rgb: 254 249 195;
  --yellow-500: #eab308;
  --yellow-500-rgb: 234 179 8;
  --yellow-700: #a16207;
  --yellow-700-rgb: 161 98 7;
  --indigo-100: #e0e7ff;
  --indigo-100-rgb: 224 231 255;
  --indigo-300: #a5b4fc;
  --indigo-300-rgb: 165 180 252;
  --indigo-500: #6366f1;
  --indigo-500-rgb: 99 102 241;
  --indigo-600: #4f46e5;
  --indigo-600-rgb: 79 70 229;
  --indigo-700: #4338ca;
  --indigo-700-rgb: 67 56 202;
  --purple-100: #f3e8ff;
  --purple-100-rgb: 243 232 255;
  --purple-500: #a855f7;
  --purple-500-rgb: 168 85 247;
}


/* ============================================================
   DESIGN SYSTEM  —  Digital Deletion
   Hand-owned, no Tailwind. Tokens + reset + base typography.
   ============================================================ */
:root {
  /* brand */
  --c-primary:    #6366f1;
  --c-primary-200:#c7d2fe;
  --c-secondary:  #8b5cf6;
  --c-accent:     #06b6d4;
  --c-dark:       #0b1020;
  --c-dark-card:  #141a2e;
  --c-success:    #16a34a;
  --c-danger:     #dc2626;
  --c-warning:    #d97706;

  /* gradients */
  --grad-brand: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
  --grad-brand-3: linear-gradient(120deg, var(--c-primary), var(--c-secondary) 55%, var(--c-accent));

  /* semantic — light theme */
  --bg:         #f6f7fb;
  --surface:    #ffffff;
  --surface-2:  #f8fafc;
  --text:       #0f172a;
  --text-muted: #64748b;
  --border:     #e6e8ef;
  --ring:       rgb(99 102 241 / 0.45);

  /* type */
  --font-sans: "Inter", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;

  /* radius + shadow scale (component use) */
  --r-sm: .5rem; --r-md: .75rem; --r-lg: 1rem; --r-xl: 1.5rem;
  --shadow-sm: 0 1px 2px rgb(15 23 42 / .06);
  --shadow:    0 8px 24px -10px rgb(15 23 42 / .18);
  --shadow-lg: 0 24px 48px -16px rgb(15 23 42 / .28);
  --shadow-brand: 0 18px 40px -14px rgb(99 102 241 / .45);
}

.dark {
  --bg:         #0b1020;
  --surface:    #141a2e;
  --surface-2:  #1b2238;
  --text:       #e8ecf5;
  --text-muted: #9aa7c2;
  --border:     #26304a;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; tab-size: 4; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
svg { display: inline-block; vertical-align: middle; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
h1,h2,h3,h4,h5,h6 { line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
hr { border: 0; border-top: 1px solid var(--border); }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
::selection { background: rgb(99 102 241 / .22); }

/* nicer container width cap */
.container { max-width: 1200px; }

/* form controls inherit modern defaults; pages still add their own borders */
input, select, textarea { accent-color: var(--c-primary); }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
/* consistent brand focus ring on every text control across all pages
   (pages that add their own focus utilities keep them — class beats element) */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):focus,
select:focus, textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgb(99 102 241 / .15);
}

/* ---------- scrollbar ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); background-clip: content-box; }

/* ---------- leftover utilities not covered by generator ---------- */
.placeholder-gray-500::placeholder { color: var(--gray-500); }
.placeholder-white\/70::placeholder { color: rgb(255 255 255 / .7); }
.bg-light-bg { background: var(--bg); }
.hover\:shadow-primary\/25:hover { box-shadow: var(--shadow-brand); }
.focus\:ring-offset-2:focus,
.focus\:ring-offset-gray-100:focus,
.focus\:ring-offset-gray-800:focus,
.focus\:ring-opacity-50:focus,
.ring-opacity-5 { /* offset/opacity helpers — folded into ring shadow */ }

/* ---------- keyframes ---------- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes glow { from { box-shadow: 0 0 24px rgb(99 102 241 / .3); } to { box-shadow: 0 0 42px rgb(99 102 241 / .6); } }
@keyframes shimmer { 100% { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}


/* ============================================================
   UTILITY LAYER  —  generated by build_css.py (do not hand-edit)
   Hand-owned re-implementation of the utility classes the app
   uses, so Digital Deletion no longer loads the Tailwind CDN.
   ============================================================ */
.-mb-px{margin-bottom:-1px}
.-mr-0\.5{margin-right:-0.125rem}
.absolute{position:absolute}
.align-bottom{vertical-align:bottom}
.animate-fade-in-up{animation:fadeInUp .7s ease-out forwards}
.appearance-none{appearance:none;-webkit-appearance:none}
.bg-\[\#f8f9fa\]{background-color:#f8f9fa}
.bg-amber-100{background-color:var(--amber-100)}
.bg-blue-100{background-color:var(--blue-100)}
.bg-blue-50{background-color:var(--blue-50)}
.bg-blue-500{background-color:var(--blue-500)}
.bg-blue-600{background-color:var(--blue-600)}
.bg-dark{background-color:var(--c-dark)}
.bg-gray-100{background-color:var(--gray-100)}
.bg-gray-200{background-color:var(--gray-200)}
.bg-gray-300{background-color:var(--gray-300)}
.bg-gray-50{background-color:var(--gray-50)}
.bg-gray-500{background-color:var(--gray-500)}
.bg-gray-700{background-color:var(--gray-700)}
.bg-gray-800{background-color:var(--gray-800)}
.bg-gray-900{background-color:var(--gray-900)}
.bg-green-100{background-color:var(--green-100)}
.bg-green-500{background-color:var(--green-500)}
.bg-green-600{background-color:var(--green-600)}
.bg-indigo-600{background-color:var(--indigo-600)}
.bg-orange-100{background-color:var(--orange-100)}
.bg-primary{background-color:var(--c-primary)}
.bg-primary-200{background-color:var(--c-primary-200)}
.bg-purple-100{background-color:var(--purple-100)}
.bg-red-100{background-color:var(--red-100)}
.bg-red-600{background-color:var(--red-600)}
.bg-white{background-color:#ffffff}
.bg-yellow-100{background-color:var(--yellow-100)}
.block{display:block}
.border{border-width:1px;border-style:solid}
.border-2{border-width:2px;border-style:solid}
.border-amber-400{border-color:var(--amber-400)}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-b-2{border-bottom-width:2px;border-bottom-style:solid}
.border-blue-500{border-color:var(--blue-500)}
.border-gray-200{border-color:var(--gray-200)}
.border-gray-300{border-color:var(--gray-300)}
.border-green-400{border-color:var(--green-400)}
.border-green-500{border-color:var(--green-500)}
.border-green-600{border-color:var(--green-600)}
.border-l-4{border-left-width:4px;border-left-style:solid}
.border-r{border-right-width:1px;border-right-style:solid}
.border-red-400{border-color:var(--red-400)}
.border-red-500{border-color:var(--red-500)}
.border-red-600{border-color:var(--red-600)}
.border-t{border-top-width:1px;border-top-style:solid}
.border-transparent{border-color:transparent}
.border-yellow-500{border-color:var(--yellow-500)}
.container{width:100%;margin-inline:auto;padding-inline:1rem}
.cursor-pointer{cursor:pointer}
.dark .dark\:bg-gray-700{background-color:var(--gray-700)}
.dark .dark\:bg-gray-800{background-color:var(--gray-800)}
.dark .dark\:bg-gray-900{background-color:var(--gray-900)}
.dark .dark\:border-gray-600{border-color:var(--gray-600)}
.dark .dark\:border-gray-700{border-color:var(--gray-700)}
.dark .dark\:text-gray-200{color:var(--gray-200)}
.dark .dark\:text-gray-300{color:var(--gray-300)}
.dark .dark\:text-gray-400{color:var(--gray-400)}
.dark .dark\:text-primary{color:var(--c-primary)}
.dark .dark\:text-white{color:#ffffff}
.divide-gray-200{border-color:var(--gray-200)}
.divide-y{}
.duration-150{transition-duration:150ms}
.duration-200{transition-duration:200ms}
.duration-300{transition-duration:300ms}
.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}
.fill-current{fill:currentColor}
.fixed{position:fixed}
.flex{display:flex}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-grow{flex-grow:1}
.flex-shrink-0{flex-shrink:0}
.flex-wrap{flex-wrap:wrap}
.focus\:bg-white:focus{background-color:#ffffff}
.focus\:border-blue-500:focus{border-color:var(--blue-500)}
.focus\:border-indigo-300:focus{border-color:var(--indigo-300)}
.focus\:border-indigo-500:focus{border-color:var(--indigo-500)}
.focus\:border-primary:focus{border-color:var(--c-primary)}
.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus\:ring:focus{box-shadow:0 0 0 3px rgb(99 102 241 / 0.45)}
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--c-primary)}
.focus\:ring-blue-200:focus{box-shadow:0 0 0 3px var(--blue-200)}
.focus\:ring-blue-500:focus{box-shadow:0 0 0 3px var(--blue-500)}
.focus\:ring-green-500:focus{box-shadow:0 0 0 3px var(--green-500)}
.focus\:ring-indigo-100:focus{box-shadow:0 0 0 3px var(--indigo-100)}
.focus\:ring-indigo-500:focus{box-shadow:0 0 0 3px var(--indigo-500)}
.focus\:ring-inset:focus{}
.focus\:ring-primary:focus{box-shadow:0 0 0 3px var(--c-primary)}
.focus\:ring-red-500:focus{box-shadow:0 0 0 3px var(--red-500)}
.focus\:ring-white:focus{box-shadow:0 0 0 3px #ffffff}
.focus\:shadow-outline:focus{box-shadow:0 0 0 3px rgb(99 102 241 / 0.45)}
.focus\:z-10:focus{z-index:10}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.font-medium{font-weight:500}
.font-poppins{font-family:var(--font-sans)}
.font-semibold{font-weight:600}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.group{}
.h-12{height:3rem}
.h-16{height:4rem}
.h-2{height:0.5rem}
.h-4{height:1rem}
.h-40{height:10rem}
.h-5{height:1.25rem}
.h-6{height:1.5rem}
.h-8{height:2rem}
.h-80{height:20rem}
.h-auto{height:auto}
.h-full{height:100%}
.h-screen{height:100vh}
.hidden{display:none}
.hover\:bg-blue-600:hover{background-color:var(--blue-600)}
.hover\:bg-blue-700:hover{background-color:var(--blue-700)}
.hover\:bg-gray-100:hover{background-color:var(--gray-100)}
.hover\:bg-gray-200:hover{background-color:var(--gray-200)}
.hover\:bg-gray-400:hover{background-color:var(--gray-400)}
.hover\:bg-gray-50:hover{background-color:var(--gray-50)}
.hover\:bg-gray-600:hover{background-color:var(--gray-600)}
.hover\:bg-gray-700:hover{background-color:var(--gray-700)}
.hover\:bg-green-100:hover{background-color:var(--green-100)}
.hover\:bg-green-600:hover{background-color:var(--green-600)}
.hover\:bg-green-700:hover{background-color:var(--green-700)}
.hover\:bg-indigo-700:hover{background-color:var(--indigo-700)}
.hover\:bg-red-100:hover{background-color:var(--red-100)}
.hover\:bg-red-700:hover{background-color:var(--red-700)}
.hover\:bg-secondary:hover{background-color:var(--c-secondary)}
.hover\:text-blue-500:hover{color:var(--blue-500)}
.hover\:text-gray-500:hover{color:var(--gray-500)}
.hover\:text-gray-600:hover{color:var(--gray-600)}
.hover\:text-green-800:hover{color:var(--green-800)}
.hover\:text-red-800:hover{color:var(--red-800)}
.hover\:text-white:hover{color:#ffffff}
.hover\:underline:hover{text-decoration:underline}
.inline{display:inline}
.inline-block{display:inline-block}
.inline-flex{display:inline-flex}
.inset-0{inset:0}
.inset-y-0{top:0;bottom:0}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.leading-5{line-height:1.25rem}
.leading-6{line-height:1.5rem}
.leading-tight{line-height:1.25}
.left-0{left:0}
.list-decimal{list-style-type:decimal}
.list-disc{list-style-type:disc}
.list-inside{list-style-position:inside}
.max-h-96{max-height:24rem}
.max-w-2xl{max-width:42rem}
.max-w-7xl{max-width:80rem}
.max-w-8xl{max-width:90rem}
.max-w-md{max-width:28rem}
.mb-0{margin-bottom:0}
.mb-10{margin-bottom:2.5rem}
.mb-12{margin-bottom:3rem}
.mb-16{margin-bottom:4rem}
.mb-2{margin-bottom:0.5rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.min-h-full{min-height:100%}
.min-h-screen{min-height:100vh}
.min-w-full{min-width:100%}
.ml-1{margin-left:0.25rem}
.ml-2{margin-left:0.5rem}
.ml-3{margin-left:0.75rem}
.ml-4{margin-left:1rem}
.ml-8{margin-left:2rem}
.ml-auto{margin-left:auto}
.mr-1{margin-right:0.25rem}
.mr-2{margin-right:0.5rem}
.mr-3{margin-right:0.75rem}
.mr-4{margin-right:1rem}
.mt-0{margin-top:0}
.mt-1{margin-top:0.25rem}
.mt-2{margin-top:0.5rem}
.mt-3{margin-top:0.75rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mx-auto{margin-left:auto;margin-right:auto}
.my-4{margin-top:1rem;margin-bottom:1rem}
.origin-top-right{transform-origin:top right}
.outline-none{outline:2px solid transparent;outline-offset:2px}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.overflow-x-hidden{overflow-x:hidden}
.overflow-y-auto{overflow-y:auto}
.p-1{padding:0.25rem}
.p-10{padding:2.5rem}
.p-2{padding:0.5rem}
.p-3{padding:0.75rem}
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.pb-12{padding-bottom:3rem}
.pb-20{padding-bottom:5rem}
.pb-3{padding-bottom:0.75rem}
.pb-4{padding-bottom:1rem}
.pl-11{padding-left:2.75rem}
.pl-4{padding-left:1rem}
.pl-5{padding-left:1.25rem}
.pointer-events-none{pointer-events:none}
.pr-8{padding-right:2rem}
.pt-2{padding-top:0.5rem}
.pt-36{padding-top:9rem}
.pt-4{padding-top:1rem}
.pt-5{padding-top:1.25rem}
.px-2{padding-left:0.5rem;padding-right:0.5rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.relative{position:relative}
.right-0{right:0}
.ring-0{box-shadow:none}
.ring-1{box-shadow:0 0 0 1px rgb(15 23 42 / 0.06)}
.ring-black{box-shadow:0 0 0 3px #0b1020}
.rounded{border-radius:0.5rem}
.rounded-full{border-radius:9999px}
.rounded-l-lg{border-top-left-radius:0.875rem;border-bottom-left-radius:0.875rem}
.rounded-l-md{border-top-left-radius:0.625rem;border-bottom-left-radius:0.625rem}
.rounded-lg{border-radius:0.875rem}
.rounded-md{border-radius:0.625rem}
.rounded-r-lg{border-top-right-radius:0.875rem;border-bottom-right-radius:0.875rem}
.rounded-r-md{border-top-right-radius:0.625rem;border-bottom-right-radius:0.625rem}
.rounded-t-lg{border-top-left-radius:0.875rem;border-top-right-radius:0.875rem}
.rounded-xl{border-radius:1rem}
.scroll-smooth{scroll-behavior:smooth}
.shadow{box-shadow:0 1px 3px 0 rgb(15 23 42 / 0.10), 0 1px 2px -1px rgb(15 23 42 / 0.10)}
.shadow-lg{box-shadow:0 12px 28px -6px rgb(15 23 42 / 0.18)}
.shadow-md{box-shadow:0 4px 12px -2px rgb(15 23 42 / 0.12)}
.shadow-none{box-shadow:none}
.shadow-sm{box-shadow:0 1px 2px 0 rgb(15 23 42 / 0.06)}
.shadow-xl{box-shadow:0 24px 48px -12px rgb(15 23 42 / 0.25)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sticky{position:sticky}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-8xl{font-size:6rem;line-height:1}
.text-amber-700{color:var(--amber-700)}
.text-base{font-size:1rem;line-height:1.5rem}
.text-blue-500{color:var(--blue-500)}
.text-blue-600{color:var(--blue-600)}
.text-center{text-align:center}
.text-gray-200{color:var(--gray-200)}
.text-gray-400{color:var(--gray-400)}
.text-gray-500{color:var(--gray-500)}
.text-gray-600{color:var(--gray-600)}
.text-gray-700{color:var(--gray-700)}
.text-gray-800{color:var(--gray-800)}
.text-gray-900{color:var(--gray-900)}
.text-green-500{color:var(--green-500)}
.text-green-600{color:var(--green-600)}
.text-green-700{color:var(--green-700)}
.text-indigo-600{color:var(--indigo-600)}
.text-left{text-align:left}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-orange-500{color:var(--orange-500)}
.text-primary{color:var(--c-primary)}
.text-purple-500{color:var(--purple-500)}
.text-red-400{color:var(--red-400)}
.text-red-500{color:var(--red-500)}
.text-red-600{color:var(--red-600)}
.text-red-700{color:var(--red-700)}
.text-right{text-align:right}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-white{color:#ffffff}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-xs{font-size:0.75rem;line-height:1rem}
.text-yellow-500{color:var(--yellow-500)}
.text-yellow-700{color:var(--yellow-700)}
.top-0{top:0}
.top-8{top:2rem}
.tracking-wider{letter-spacing:.05em}
.transform{transform:translate(var(--tw-tx,0),var(--tw-ty,0)) rotate(var(--tw-rot,0)) scale(var(--tw-scale,1))}
.transition{transition:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform .2s ease}
.transition-all{transition:all .25s ease}
.transition-colors{transition:color,background-color,border-color,fill,stroke .2s ease}
.transition-opacity{transition:opacity .25s ease}
.transition-transform{transition:transform .25s ease}
.uppercase{text-transform:uppercase}
.w-0{width:0}
.w-11{width:2.75rem}
.w-12{width:3rem}
.w-32{width:8rem}
.w-4{width:1rem}
.w-48{width:12rem}
.w-5{width:1.25rem}
.w-6{width:1.5rem}
.w-60{width:15rem}
.w-64{width:16rem}
.w-72{width:18rem}
.w-8{width:2rem}
.w-auto{width:auto}
.w-full{width:100%}
.whitespace-nowrap{white-space:nowrap}
.whitespace-pre-wrap{white-space:pre-wrap}
.z-10{z-index:10}
.z-20{z-index:20}
.z-40{z-index:40}
.z-50{z-index:50}

/* placeholder colour */
.placeholder-gray-400::placeholder{color:var(--gray-400)}
.placeholder-white::placeholder{color:#fff}

/* space-between & divide */
.space-x-2 > * + *{margin-left:0.5rem}
.space-x-3 > * + *{margin-left:0.75rem}
.space-x-4 > * + *{margin-left:1rem}
.space-y-1 > * + *{margin-top:0.25rem}
.space-y-2 > * + *{margin-top:0.5rem}
.space-y-4 > * + *{margin-top:1rem}
.space-y-6 > * + *{margin-top:1.5rem}
.space-y-8 > * + *{margin-top:2rem}

@media (min-width:640px){
  .sm\:align-middle{vertical-align:middle}
  .sm\:block{display:block}
  .sm\:col-span-2{grid-column:span 2/span 2}
  .sm\:divide-gray-200{border-color:var(--gray-200)}
  .sm\:divide-y{}
  .sm\:flex{display:flex}
  .sm\:flex-row-reverse{flex-direction:row-reverse}
  .sm\:gap-4{gap:1rem}
  .sm\:grid{display:grid}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:h-10{height:2.5rem}
  .sm\:h-screen{height:100vh}
  .sm\:hidden{display:none}
  .sm\:inline{display:inline}
  .sm\:inline-block{display:inline-block}
  .sm\:items-center{align-items:center}
  .sm\:items-start{align-items:flex-start}
  .sm\:max-w-lg{max-width:32rem}
  .sm\:ml-3{margin-left:0.75rem}
  .sm\:ml-4{margin-left:1rem}
  .sm\:ml-6{margin-left:1.5rem}
  .sm\:mt-0{margin-top:0}
  .sm\:mx-0{margin-left:0;margin-right:0}
  .sm\:my-8{margin-top:2rem;margin-bottom:2rem}
  .sm\:p-0{padding:0}
  .sm\:p-6{padding:1.5rem}
  .sm\:pb-4{padding-bottom:1rem}
  .sm\:px-0{padding-left:0;padding-right:0}
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}
  .sm\:rounded-lg{border-radius:0.875rem}
  .sm\:text-left{text-align:left}
  .sm\:text-sm{font-size:0.875rem;line-height:1.25rem}
  .sm\:w-10{width:2.5rem}
  .sm\:w-auto{width:auto}
  .sm\:w-full{width:100%}
}

@media (min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width:1024px){
  .lg\:flex-row{flex-direction:row}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:hidden{display:none}
  .lg\:mb-0{margin-bottom:0}
  .lg\:p-8{padding:2rem}
  .lg\:px-8{padding-left:2rem;padding-right:2rem}
  .lg\:static{position:static}
  .lg\:translate-x-0{transform:translateX(0)}
  .lg\:w-1\/2{width:50%}
  .lg\:w-1\/3{width:33.333333%}
  .lg\:w-2\/3{width:66.666667%}
}

@media (min-width:1280px){
  .xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ============================================================
   COMPONENTS  —  Digital Deletion
   App widgets + polish + marketing design system. No Tailwind.
   ============================================================ */

/* ---------- app shell: client top nav ---------- */
.topnav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border), 0 4px 16px -8px rgb(99 102 241 / .08);
  position: sticky; top: 0; z-index: 30;
}
.topnav::after {
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-brand-3); opacity: .6;
}
.topnav-link {
  padding: .5rem 1rem; border-radius: var(--r-sm);
  font-weight: 600; font-size: .875rem;
  color: var(--text-muted);
  transition: background .18s ease, color .18s ease;
  position: relative;
}
.topnav-link:hover { background: rgb(99 102 241 / .07); color: var(--text); }
.topnav-link.active {
  background: rgb(99 102 241 / .1);
  color: var(--c-primary);
}
.topnav-link.active::after {
  content: "";
  position: absolute; bottom: -2px; left: 25%; right: 25%; height: 2px;
  background: var(--c-primary); border-radius: 2px 2px 0 0;
}

/* ---------- app shell: admin sidebar ---------- */
.side-link {
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
  border-radius: var(--r-sm);
  color: #94a3b8 !important;
}
.side-link:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; }
.side-link.active {
  background: var(--grad-brand) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px -4px rgb(99 102 241 / .5);
}

/* ---------- dashboard polish ---------- */
.page-title { font-size: 1.85rem; font-weight: 800; letter-spacing: -.025em; color: var(--text); }
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 3px rgb(15 23 42 / .06), 0 4px 16px -4px rgb(15 23 42 / .08);
  overflow: hidden;
}
.panel-head {
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: .95rem;
  background: var(--surface-2);
  display: flex; align-items: center; gap: .6rem;
}
.stat-card {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.4rem 1.5rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 3px rgb(15 23 42 / .06), 0 4px 16px -4px rgb(15 23 42 / .08);
  transition: transform .22s ease, box-shadow .22s ease;
  position: relative; overflow: hidden;
}
.stat-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-brand); opacity: 0;
  transition: opacity .22s ease;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px -8px rgb(15 23 42 / .16); }
.stat-card:hover::before { opacity: 1; }
.stat-ico {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.stat-val { font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--text); letter-spacing: -.02em; }
.stat-label { font-size: .8rem; color: var(--text-muted); margin-bottom: .3rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.step-num-circle {
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--text-muted);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.step-num-circle.done { border-color: var(--c-success); background: var(--c-success); color: #fff; box-shadow: 0 4px 12px -4px rgb(22 163 74 / .45); }
table.data-table thead th {
  background: var(--surface-2); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); font-weight: 700;
  padding: .85rem 1.4rem; text-align: left;
  border-bottom: 1px solid var(--border);
}
table.data-table tbody td { padding: .95rem 1.4rem; border-top: 1px solid var(--border); font-size: .9rem; }
table.data-table tbody tr { transition: background .15s ease; }
table.data-table tbody tr:hover { background: rgb(99 102 241 / .04); }

/* ---------- brand helpers ---------- */
.gradient-text {
  background: var(--grad-brand-3);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.glass-effect {
  background: rgb(255 255 255 / .7);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgb(255 255 255 / .5);
  box-shadow: var(--shadow);
}
.dark .glass-effect { background: rgb(20 26 46 / .6); border-color: rgb(255 255 255 / .08); }
.mesh-bg, .bg-mesh {
  background: linear-gradient(120deg, var(--c-primary), var(--c-secondary), var(--c-accent), #10b981);
  background-size: 300% 300%; animation: gradient 16s ease infinite;
}
.logo-white { filter: brightness(0) invert(1); }
.logo-dark  { display: none; }
.dark .logo-light { display: none; }
.dark .logo-dark  { display: inline; filter: brightness(0) invert(1); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; line-height: 1; cursor: pointer; border-radius: var(--r-md);
  padding: .75rem 1.4rem; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  white-space: nowrap; border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn-primary { color: #fff; background: var(--grad-brand); box-shadow: var(--shadow-brand); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -12px rgb(99 102 241 / .55); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--c-primary); color: var(--c-primary); }
.btn-light { background: #fff; color: var(--c-primary); box-shadow: var(--shadow); }
.btn-light:hover { transform: translateY(-2px); }
.btn-block { width: 100%; }
.btn-lg { padding: .95rem 1.8rem; font-size: 1.05rem; }

/* ---------- forms ---------- */
.form-input, .form-select, .form-textarea,
.field input, .field select, .field textarea {
  width: 100%; display: block;
  padding: .7rem .9rem; font-size: .95rem;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-input:focus, .form-select:focus, .form-textarea:focus,
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgb(99 102 241 / .15);
}
.form-checkbox { width: 1.05rem; height: 1.05rem; border-radius: .3rem; accent-color: var(--c-primary); }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.field label { font-size: .85rem; font-weight: 600; color: var(--text-muted); }

/* ---------- alerts ---------- */
.alert {
  padding: 1rem 1.2rem; border-radius: var(--r-md);
  border-left: 3px solid; font-size: .9rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.alert .alert-title { font-weight: 700; font-size: .95rem; }
.alert-success { background: rgb(22 163 74 / .08); border-color: var(--green-500); color: var(--green-700); }
.alert-error, .error-message { background: rgb(220 38 38 / .08); border-color: var(--red-500); color: var(--red-700); }
.alert-warning { background: rgb(217 119 6 / .08); border-color: var(--amber-400); color: var(--amber-700); }
.alert-info, .info { background: rgb(37 99 235 / .08); border-color: var(--blue-500); color: var(--blue-600); }

/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .22rem .65rem; font-size: .7rem; font-weight: 700;
  border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid transparent;
}
.badge-success { background: rgb(22 163 74 / .1); color: var(--green-700); border-color: rgb(22 163 74 / .2); }
.badge-pending { background: rgb(217 119 6 / .1); color: var(--amber-700); border-color: rgb(217 119 6 / .2); }
.badge-info    { background: rgb(37 99 235 / .1); color: var(--blue-600); border-color: rgb(37 99 235 / .2); }
.badge-muted   { background: var(--gray-100); color: var(--gray-600); border-color: var(--gray-200); }
.badge-danger  { background: rgb(220 38 38 / .1); color: var(--red-600); border-color: rgb(220 38 38 / .2); }

/* ---------- card + table polish ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 3px rgb(15 23 42 / .06), 0 4px 16px -4px rgb(15 23 42 / .08);
}
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--gray-100); padding: .15rem .4rem; border-radius: .35rem; font-size: .85em; }

/* ---------- dropdown ---------- */
.dropdown-container { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; margin-top: .6rem;
  min-width: 13rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 8px 32px -8px rgb(15 23 42 / .2), 0 2px 8px -2px rgb(15 23 42 / .08);
  padding: .4rem; z-index: 50;
}
.dropdown-menu a, .dropdown-menu button {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; padding: .6rem .75rem;
  border-radius: var(--r-sm); font-size: .875rem;
  font-weight: 500; color: var(--text);
  transition: background .15s ease, color .15s ease;
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--surface-2); }

/* ---------- tabs ---------- */
.tab-link { padding: .7rem 1rem; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; cursor: pointer; }
.tab-link:hover { color: var(--text); }
.tab-link.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ---------- pricing toggle switch ---------- */
.switch { position: relative; display: inline-block; width: 52px; height: 30px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-label, .switch .track { position: absolute; inset: 0; background: var(--gray-300); border-radius: 999px; transition: background .25s ease; cursor: pointer; }
.toggle-label::after, .switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform .25s ease; }
.toggle-checkbox:checked + .toggle-label, .switch input:checked + .track { background: var(--c-primary); }
.toggle-checkbox:checked + .toggle-label::after, .switch input:checked + .track::after { transform: translateX(22px); }

/* ---------- FAQ ---------- */
.faq-item { border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: .9rem; background: var(--surface); overflow: hidden; }
.faq-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 1rem; padding: 1.15rem 1.3rem; font-weight: 600; font-size: 1.05rem; text-align: left; }
.faq-toggle svg { flex-shrink: 0; transition: transform .25s ease; color: var(--c-primary); }
.faq-toggle.open svg { transform: rotate(180deg); }
.faq-content { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-content > div { padding: 0 1.3rem 1.2rem; color: var(--text-muted); }

/* ============================================================
   MARKETING DESIGN SYSTEM  (dd-*)  — used by the public pages
   ============================================================ */
.dd { color: var(--text); }
.dd-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 1.5rem; }

/* top nav */
.dd-nav { position: fixed; inset: 0 0 auto 0; z-index: 60; transition: background .3s ease, box-shadow .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; }
.dd-nav.scrolled { background: rgb(255 255 255 / .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--border); box-shadow: var(--shadow-sm); }
.dark .dd-nav.scrolled { background: rgb(11 16 32 / .82); }
.dd-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.dd-brand { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; }
.dd-nav-links { display: flex; align-items: center; gap: 2rem; }
.dd-nav-links a { color: var(--text-muted); font-weight: 500; transition: color .2s ease; }
.dd-nav-links a:hover { color: var(--c-primary); }
.dd-nav-cta { display: flex; align-items: center; gap: .85rem; }
.dd-burger { display: none; padding: .5rem; }
.dd-mobile { display: none; flex-direction: column; gap: .25rem; padding: 1rem 1.5rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.dd-mobile.open { display: flex; }
.dd-mobile a { padding: .7rem 0; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border); }

/* icon button */
.dd-icon-btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); transition: background .2s ease; }
.dd-icon-btn:hover { background: var(--gray-100); }

/* hero */
.dd-hero { position: relative; overflow: hidden; padding: 11rem 0 6rem; }
.dd-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; }
.dd-eyebrow { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .9rem; border-radius: 999px; background: rgb(99 102 241 / .1); color: var(--c-primary); font-weight: 600; font-size: .85rem; margin-bottom: 1.6rem; }
.dd-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); animation: pulse 2s infinite; }
.dd-hero h1 { font-size: clamp(2.6rem, 5.5vw, 4.4rem); line-height: 1.05; margin-bottom: 1.4rem; }
.dd-hero p.lead { font-size: 1.2rem; color: var(--text-muted); max-width: 34rem; margin-bottom: 2rem; }
.dd-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.dd-trustline { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; margin-top: 2.4rem; color: var(--text-muted); font-size: .9rem; }
.dd-trustline span { display: inline-flex; align-items: center; gap: .5rem; }
.dd-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; z-index: -1; }
.dd-blob.one { width: 460px; height: 460px; background: rgb(99 102 241 / .35); top: -120px; right: -120px; }
.dd-blob.two { width: 420px; height: 420px; background: rgb(6 182 212 / .28); bottom: -160px; left: -140px; }

/* floating product/agent card */
.dd-agent { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 1.6rem; animation: float 6s ease-in-out infinite; }
.dd-agent::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: var(--grad-brand-3); opacity: .18; filter: blur(22px); z-index: -1; }
.dd-agent .dots { display: flex; gap: .45rem; margin-bottom: 1.2rem; }
.dd-agent .dots i { width: 11px; height: 11px; border-radius: 50%; }
.dd-agent-row { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; }
.dd-agent-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--grad-brand); display: flex; align-items: center; justify-content: center; color: #fff; }
.dd-agent-panel { background: var(--surface-2); border-radius: var(--r-md); padding: 1rem; }
.dd-stat-row { display: flex; justify-content: space-between; font-size: .9rem; padding: .35rem 0; }
.dd-progress { height: 8px; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
.dd-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--grad-brand); }

/* generic section */
.dd-section { padding: 6rem 0; }
.dd-section.alt { background: var(--surface); }
.dd-section-head { text-align: center; max-width: 42rem; margin: 0 auto 3.5rem; }
.dd-section-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
.dd-section-head p { color: var(--text-muted); font-size: 1.1rem; }

/* feature grid */
.dd-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.dd-feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 2rem; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.dd-feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.dd-feature-icon { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--grad-brand); display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 1.3rem; }
.dd-feature h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.dd-feature p { color: var(--text-muted); }

/* steps */
.dd-steps { display: flex; flex-direction: column; gap: 1.2rem; }
.dd-step { display: flex; gap: 1.1rem; align-items: flex-start; }
.dd-step-num { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--grad-brand); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-brand); }
.dd-step-body { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.1rem 1.3rem; flex: 1; }
.dd-step-body h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.dd-step-body p { color: var(--text-muted); font-size: .95rem; }

/* pricing */
.dd-price-toggle { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: 1.5rem 0; font-weight: 600; }
.dd-save { color: var(--c-primary); }
.dd-pricing { max-width: 460px; margin-inline: auto; position: relative; }
.dd-pricing::before { content: ""; position: absolute; inset: -2px; border-radius: var(--r-xl); background: var(--grad-brand-3); opacity: .3; filter: blur(16px); z-index: -1; }
.dd-pricing-card { background: var(--surface); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.dd-pricing-head { background: var(--grad-brand); color: #fff; text-align: center; padding: 2.2rem 1.5rem; }
.dd-pricing-head h3 { font-size: 1.6rem; }
.dd-pricing-body { padding: 2rem; }
.dd-price { text-align: center; font-size: 3.4rem; font-weight: 800; letter-spacing: -.03em; }
.dd-price small { font-size: 1.1rem; font-weight: 500; color: var(--text-muted); }
.dd-price-sub { text-align: center; color: var(--text-muted); margin-top: .4rem; }
.dd-feature-list { margin: 1.8rem 0; display: flex; flex-direction: column; gap: .9rem; }
.dd-feature-list li { display: flex; align-items: center; gap: .7rem; }
.dd-check { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--grad-brand); color: #fff; display: flex; align-items: center; justify-content: center; }

/* CTA band */
.dd-cta { position: relative; overflow: hidden; padding: 5.5rem 0; color: #fff; }
.dd-cta .mesh-bg { position: absolute; inset: 0; z-index: -1; }
.dd-cta-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.dd-cta h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 1rem; }
.dd-cta .card-form { background: rgb(255 255 255 / .12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgb(255 255 255 / .25); border-radius: var(--r-lg); padding: 2rem; }
.dd-cta .card-form input { background: rgb(255 255 255 / .15); border: 1px solid rgb(255 255 255 / .3); color: #fff; }
.dd-cta .card-form input::placeholder { color: rgb(255 255 255 / .7); }

/* footer */
.dd-footer { background: var(--c-dark); color: #cbd5e1; padding: 4.5rem 0 2rem; }
.dd-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; }
.dd-footer h4 { color: #fff; margin-bottom: 1.1rem; font-size: 1rem; }
.dd-footer a { color: #94a3b8; transition: color .2s ease; }
.dd-footer a:hover { color: #fff; }
.dd-footer-links { display: flex; flex-direction: column; gap: .65rem; }
.dd-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgb(255 255 255 / .1); font-size: .85rem; color: #94a3b8; }
.dd-social { display: flex; gap: .7rem; margin-top: 1.2rem; }
.dd-social a { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--grad-brand); display: flex; align-items: center; justify-content: center; color: #fff; }

/* scroll-reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* sticky bottom alert + cookie */
.dd-banner { position: fixed; inset: auto 0 0 0; z-index: 70; background: var(--grad-brand); color: #fff; transform: translateY(100%); transition: transform .4s ease; }
.dd-banner.show { transform: translateY(0); }
.dd-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.5rem; max-width: 1200px; margin-inline: auto; }
.dd-cookie { position: fixed; bottom: 1.2rem; right: 1.2rem; max-width: 22rem; z-index: 65; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 1.3rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .3s ease; }
.dd-cookie.show { opacity: 1; visibility: visible; transform: none; }

/* progress bar */
.dd-progressbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 80; background: var(--grad-brand-3); }

/* auth pages */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-aside { position: relative; overflow: hidden; color: #fff; padding: 3.5rem; display: flex; flex-direction: column; justify-content: space-between; }
.auth-aside .mesh-bg { position: absolute; inset: 0; z-index: -1; }
.auth-aside h2 { font-size: 2.2rem; line-height: 1.15; margin-bottom: 1rem; }
.auth-aside ul { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.6rem; }
.auth-aside li { display: flex; align-items: center; gap: .7rem; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; background: var(--bg); }
.auth-card { width: 100%; max-width: 26rem; }
.auth-card .logo { margin-bottom: 2rem; }
.auth-card h1 { font-size: 1.8rem; margin-bottom: .4rem; }
.auth-card .sub { color: var(--text-muted); margin-bottom: 1.8rem; }
.auth-meta { margin-top: 1.5rem; text-align: center; color: var(--text-muted); font-size: .9rem; }
.auth-meta a, .link { color: var(--c-primary); font-weight: 600; }

/* responsive marketing */
@media (max-width: 1024px) {
  .dd-hero-grid, .dd-cta-grid { grid-template-columns: 1fr; }
  .dd-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .dd-footer-grid { grid-template-columns: 1fr 1fr; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
}
@media (max-width: 880px) {
  .dd-nav-links, .dd-nav-cta .btn, .dd-nav-cta a.dd-login { display: none; }
  .dd-burger { display: inline-flex; }
}
@media (max-width: 720px) {
  .dd-grid-3, .dd-footer-grid { grid-template-columns: 1fr; }
  .dd-section { padding: 4rem 0; }
  .dd-hero { padding: 9rem 0 4rem; }
}

/* ============================================================
   PLATFORM POLISH  — client app & admin panel
   ============================================================ */

/* topnav user avatar button */
.topnav-avatar-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--grad-brand);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.3rem;
  border: 2px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.topnav-avatar-btn:hover, .topnav-avatar-btn:focus {
  box-shadow: 0 0 0 3px rgb(99 102 241 / .25);
  border-color: var(--c-primary);
}

/* admin sidebar header */
.admin-sidebar-header {
  background: linear-gradient(135deg, #0b1020, #141a2e);
  border-bottom: 1px solid rgb(255 255 255 / .06);
}

/* admin main header */
.admin-topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border), 0 4px 12px -8px rgb(15 23 42 / .08);
}

/* getting-started progress steps */
.gs-step-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.5rem;
  text-align: center;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gs-step-card:hover { border-color: rgb(99 102 241 / .3); box-shadow: 0 4px 16px -4px rgb(99 102 241 / .12); }

/* page-level breadcrumb / subheader */
.page-subheader {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.75rem; flex-wrap: wrap; gap: .8rem;
}

/* empty state */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 4rem 2rem; gap: 1rem;
  color: var(--text-muted); text-align: center;
}
.empty-state svg { opacity: .35; }
.empty-state h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.empty-state p { max-width: 28rem; font-size: .92rem; }

/* skeleton loader */
@keyframes skeleton-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.6s infinite;
  border-radius: var(--r-sm);
}

/* scrollable panel body */
.panel-body { padding: 1.4rem; }
.panel-body + .panel-body { border-top: 1px solid var(--border); }

/* divider */
.divider { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }

/* platform responsive */
@media (max-width: 640px) {
  .page-title { font-size: 1.5rem; }
  .stat-card { padding: 1.1rem 1.2rem; }
  .stat-val { font-size: 1.4rem; }
  .panel-head { padding: .85rem 1.1rem; }
  .panel-body { padding: 1rem; }
}