/* ==========================================================================
   Della AI site: shared design tokens + components (2026-11-01, site UX pass)
   Loaded last in <head> on every page, so it settles the stacked inline layers
   (glass, site-dark, pod-type, mk-*) into one system. Presentation only.
   Edit tokens here, not per page.
   ========================================================================== */

:root {
  /* Palette (site runs dark: html[data-theme="dark"]) */
  --ds-bg: #0D0720;              /* page */
  --ds-bg-raised: #140C2A;       /* cards, menus, overlays */
  --ds-bg-sunk: #0A0518;         /* inputs on raised surfaces */
  --ds-line: rgba(185,168,240,.16);
  --ds-line-strong: rgba(185,168,240,.30);
  --ds-ink: #FFFFFF;             /* headings */
  --ds-text: #E4DEF5;            /* body copy  (14.9:1 on bg) */
  --ds-muted: #A99BD6;           /* secondary  (7.3:1 on bg)  */
  --ds-subtle: #8F84B8;          /* fine print (5.3:1 on bg)  */
  --ds-accent: #9B7BFF;          /* accent text/icons on dark (6.0:1) */
  --ds-accent-ink: #C9B8FF;      /* accent text on tinted fills */
  --ds-accent-soft: rgba(124,77,255,.16);
  --ds-primary: #6D3FE0;         /* primary action fill: white text 6.1:1 */
  --ds-primary-hover: #7A4DEB;   /* white text 5.2:1 */
  --ds-primary-light: #5B2BD9;   /* light surfaces (brand light accent) */
  --ds-good: #4ADE80;
  --ds-bad: #FF8A80;
  --ds-focus: #C9B8FF;

  /* Type: Figtree only (mono reserved for product mockups) */
  --ds-font: "Figtree", "Segoe UI", system-ui, sans-serif;
  --ds-display: clamp(3rem, 6vw, 5.25rem);         /* home hero only: 84px max */
  --ds-h1: clamp(2.5rem, 4.4vw, 4rem);             /* 64px max */
  --ds-h2: clamp(1.875rem, 3vw, 2.625rem);         /* 42px max */
  --ds-h2-close: clamp(2.25rem, 4vw, 3.5rem);      /* closing CTA band */
  --ds-h3: 1.25rem;
  --ds-lede: clamp(1.0625rem, 1.3vw, 1.1875rem);   /* 17 to 19px */
  --ds-body: 1rem;
  --ds-small: .875rem;
  --ds-eyebrow: .8125rem;

  /* Space (8pt) */
  --ds-s1: 4px; --ds-s2: 8px; --ds-s3: 12px; --ds-s4: 16px; --ds-s5: 24px; --ds-s6: 32px; --ds-s7: 48px; --ds-s8: 64px; --ds-s9: 96px;
  --ds-section-y: 96px;
  --ds-section-y-m: 64px;

  /* Shape */
  --ds-r-sm: 8px;    /* chips, tags, step numbers */
  --ds-r: 10px;      /* buttons, inputs */
  --ds-r-lg: 12px;   /* cards, menus, overlays */
  --ds-shadow-pop: 0 24px 60px -24px rgba(0,0,0,.75);

  /* Controls */
  --ds-btn-h: 48px;
  --ds-btn-h-lg: 52px;
  --ds-input-h: 48px;
}

/* ---------- Base ---------------------------------------------------------- */
html[data-theme="dark"] body { color: var(--ds-text); font-family: var(--ds-font); }
main { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--ds-focus) !important; outline-offset: 3px !important; border-radius: 6px; }
.btn:focus-visible, main input:focus-visible, main select:focus-visible, main textarea:focus-visible { border-radius: var(--ds-r); }
::selection { background: rgba(155,123,255,.35); color: #fff; }

/* ---------- Type scale ---------------------------------------------------- */
main h1:not(#ds-x) { font-family: var(--ds-font) !important; font-size: var(--ds-h1) !important; font-weight: 500 !important; line-height: 1.06 !important; letter-spacing: -.025em !important; color: var(--ds-ink); }
main .mk-hero .mk-h1c:not(#ds-x) { font-size: var(--ds-display) !important; }
main h2:not([style*="font-size"]) { font-size: var(--ds-h2) !important;
}
main h2 { font-family: var(--ds-font) !important; font-weight: 500 !important; line-height: 1.1 !important; letter-spacing: -.02em !important; color: var(--ds-ink); }
main section.final h2, main .mk-end h2 { font-size: var(--ds-h2-close) !important; }
main h3 { font-family: var(--ds-font) !important; font-size: var(--ds-h3); font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: -.01em; color: var(--ds-ink); }
main .lede, main .one { font-size: var(--ds-lede) !important; line-height: 1.55 !important; color: #D9D2EE !important; }
main p { line-height: 1.6; }
/* Eyebrows: one style site-wide (was mono caps on some pages, plain on others) */
main .eyebrow, main .eyb, main .mk-feat .n {
  font-family: var(--ds-font) !important; font-size: var(--ds-eyebrow) !important; font-weight: 600 !important;
  letter-spacing: .1em !important; text-transform: uppercase; color: var(--ds-accent-ink) !important; }
main .mk-feat .n { display: inline-block; margin-bottom: 4px; }
main .mk-trust { font-size: var(--ds-eyebrow) !important; letter-spacing: .12em !important; color: var(--ds-subtle) !important; }
main .legal, main .fineprint, main .fine, main small.fine { color: var(--ds-subtle); font-size: var(--ds-small); }
/* Body links inside copy keep an underline so they read as links */
main p a:not(.btn), main li a:not(.btn) { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
main p a:not(.btn):hover, main li a:not(.btn):hover { color: #fff; }

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  min-height: var(--ds-btn-h); padding: 0 22px !important; border-radius: var(--ds-r) !important;
  font-family: var(--ds-font) !important; font-weight: 600 !important; font-size: 1rem !important; letter-spacing: 0;
  justify-content: center; line-height: 1.2; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.btn:hover { transform: none; }
.btn-primary, main .btn-primary, .nav .nav-links .btn-primary {
  background: var(--ds-primary) !important; border-color: var(--ds-primary) !important; color: #fff !important; box-shadow: none !important; }
.btn-primary:hover, main .btn-primary:hover { background: var(--ds-primary-hover) !important; border-color: var(--ds-primary-hover) !important; }
.btn-ghost, main .btn-ghost {
  background: transparent !important; border: 1px solid var(--ds-line-strong) !important; color: #fff !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
.btn-ghost:hover, main .btn-ghost:hover { background: rgba(255,255,255,.06) !important; border-color: rgba(201,184,255,.55) !important; }
/* Light ghost on a purple band stays legible */
main .mk-close .btn-ghost, main .sd-close .btn-ghost { background: #fff !important; color: var(--ds-primary-light) !important; border-color: #fff !important; }
/* Hero / closing CTAs: one size up */
main header .btn, main .mk-hero .btn, main .hero-cta .btn, main .mk-cta .btn, main section.final .btn, main .mk-end .btn, main .dl-cta .btn, main .dd-cta .btn {
  min-height: var(--ds-btn-h-lg); padding: 0 26px !important; font-size: 1.0625rem !important; }
.nav .btn { min-height: 42px; padding: 0 18px !important; font-size: .95rem !important; }
.btn[disabled], button.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Surfaces: cards, plans, steps, testimonials ------------------- */
main .card, main .plan, main .pain, main .tm-card, main .tm-pull, main .mk-card, main .mk-tm figure, main .dl-step,
main .seatcalc, main .auto-strip, main .offer.pilot, main .side-card, main .fr-strip {
  background: var(--ds-bg-raised) !important; border: 1px solid var(--ds-line) !important; border-radius: var(--ds-r-lg) !important;
  box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
main .della-calc .dc-card { border-radius: var(--ds-r-lg) !important; box-shadow: none !important; }
main .della-calc .dc-results { background: #2A1460 !important; border: 1px solid rgba(201,184,255,.25) !important; }
main .della-calc .dc-cta { border-radius: var(--ds-r) !important; }
main .della-calc .dc-eyebrow { border-radius: 6px; }
main .plan.best, main .card.lead { border: 1.5px solid var(--ds-accent) !important; }
main .pain::before { border-radius: 2px; }
main .plan { padding: 28px !important; }
main .plan .badge, main .card .badge { border-radius: 6px !important; font-family: var(--ds-font) !important; font-weight: 700; letter-spacing: .08em; background: var(--ds-primary) !important; color: #fff !important; }
main .plan-price { font-family: var(--ds-font) !important; font-weight: 600 !important; letter-spacing: -.02em; }
main .plan-price span { color: var(--ds-muted) !important; font-weight: 500 !important; }
/* Feature lists: keep the check, let a link and its text wrap as one line */
main .plan li, main .offer li { display: block !important; position: relative; padding-left: 24px; }
main .plan li::before, main .offer li::before { position: absolute; left: 0; top: 0; color: var(--ds-accent) !important; }
/* Step numbers: quiet tinted squares instead of saturated circles */
main .dl-step b.n, main .bo-steps b, main .dd-steps b, main .mk-steps b, main .af-step > b, main .ob-num,
main span[style*="border-radius:50%;background:var(--accent);color:#fff"] {
  width: 30px !important; height: 30px !important; border-radius: var(--ds-r-sm) !important;
  background: var(--ds-accent-soft) !important; color: var(--ds-accent-ink) !important; border: 1px solid rgba(155,123,255,.35);
  font-weight: 700 !important; font-size: .9rem; font-variant-numeric: tabular-nums; }

/* ---------- Toggles / segmented ------------------------------------------- */
main .bill { border-radius: var(--ds-r-lg) !important; padding: 4px; background: var(--ds-bg-raised) !important; border: 1px solid var(--ds-line) !important; }
main .bill button { border-radius: var(--ds-r-sm) !important; color: var(--ds-muted) !important; }
main .bill button[aria-checked="true"] { background: var(--ds-primary) !important; color: #fff !important; }
main .bill button em { color: var(--ds-good) !important; }
main .bill button[aria-checked="true"] em { color: #fff !important; opacity: .9; }

/* ---------- Chips / tags: small, square-ish, never a pill wall ------------ */
main .chip, main .tm-tag, main .cs-pill { border-radius: 6px !important; }
main .mk-ind { gap: 8px !important; }
main .mk-ind a { border-radius: var(--ds-r-sm) !important; border-width: 1px !important; font-weight: 600 !important; padding: 10px 16px !important; }

/* Related-link clusters ("Still deciding?", "Comparing prices?") -> tidy link grid */
main .an-rel, main .v-rel {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px !important; max-width: 1000px; }
main .an-rel a, main .v-rel a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px;
  border: 1px solid var(--ds-line) !important; border-radius: var(--ds-r) !important; background: var(--ds-bg-raised) !important;
  padding: 12px 16px !important; font-weight: 600 !important; font-size: .95rem; color: #fff !important; text-decoration: none; line-height: 1.35; }
main .an-rel a::after, main .v-rel a::after { content: "\2192"; color: var(--ds-accent); flex: none; transition: transform .15s ease; }
main .an-rel a:hover, main .v-rel a:hover { border-color: var(--ds-line-strong) !important; background: rgba(255,255,255,.05) !important; }
main .an-rel a:hover::after, main .v-rel a:hover::after { transform: translateX(3px); }

/* ---------- Forms --------------------------------------------------------- */
main input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]), main select, main textarea {
  min-height: var(--ds-input-h); border-radius: var(--ds-r) !important; font-family: var(--ds-font); font-size: 1rem;
  background: rgba(255,255,255,.05) !important; color: #fff !important; border: 1px solid var(--ds-line-strong) !important;
  padding-inline: 14px; transition: border-color .15s ease, box-shadow .15s ease; }
main textarea { padding-block: 12px; }
main .stepper input, main .dc-money input { min-height: 0; border: 0 !important; background: transparent !important; border-radius: 0 !important; }
main .stepper input { border-inline: 1px solid var(--ds-line) !important; }
main input::placeholder, main textarea::placeholder { color: #9C90C4; opacity: 1; }
main input:not([type=range]):not([type=checkbox]):not([type=radio]):focus, main select:focus, main textarea:focus {
  outline: none !important; border-color: var(--ds-accent) !important; box-shadow: 0 0 0 3px rgba(155,123,255,.28) !important; }
main select option { background: #1A1033; color: #fff; }
main label { color: var(--ds-text); }
main input[type=checkbox], main input[type=radio] { accent-color: var(--ds-primary); }

/* ---------- FAQ blocks (.faq, .np-faq, .ins-faq, .mk-faq) ----------------- */
main details {
  background: var(--ds-bg-raised) !important; border: 1px solid var(--ds-line) !important; border-radius: var(--ds-r-lg) !important;
  padding: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; margin: 0 0 8px; }
main .faq, main .np-faq, main .ins-faq, main .mk-faq .wrap > div { gap: 0 !important; }
main details > summary {
  font-family: var(--ds-font) !important; font-weight: 600 !important; font-size: 1.0625rem !important; line-height: 1.4;
  padding: 18px 22px; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #fff; list-style: none; cursor: pointer; }
main details > summary::-webkit-details-marker { display: none; }
main details > summary::after {
  content: "" !important; flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid var(--ds-accent); border-bottom: 2px solid var(--ds-accent);
  transform: rotate(45deg) translate(-2px,-2px); transition: transform .2s ease; font-size: 0; }
main details[open] > summary::after { content: "" !important; transform: rotate(-135deg) translate(-2px,-2px); }
main details > summary:hover { color: #fff; }
main details > :not(summary) { padding-inline: 22px; }
main details > :last-child:not(summary) { padding-bottom: 20px; }
main details p { color: var(--ds-muted) !important; margin-top: 0 !important; line-height: 1.65; }
main details > summary + * { margin-top: 0 !important; }

/* ---------- Header / nav ---------------------------------------------------- */
.nav { background: rgba(13,7,32,.86) !important; border-bottom: 1px solid var(--ds-line) !important; -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
.nav .nav-links { gap: 28px; }
.nav .nav-links a:not(.btn), .nav .nav-links .pm-btn { color: #D9D2EE !important; }
.nav .nav-links a:not(.btn):hover, .nav .nav-links .pm-btn:hover, .nav .pm.open > .pm-btn { color: #fff !important; }
.brand-sub { color: var(--ds-subtle) !important; }
.pm-box { border-radius: var(--ds-r-lg) !important; background: #160C2E !important; border: 1px solid var(--ds-line-strong) !important; box-shadow: var(--ds-shadow-pop) !important; padding: 12px !important; }
.pm-h { font-family: var(--ds-font) !important; font-weight: 600; font-size: .72rem !important; letter-spacing: .1em !important; color: var(--ds-subtle) !important; }
.nav .nav-links .pm-box a.pm-i, .nav .pm-list a { border-radius: var(--ds-r-sm) !important; }
.pm-i b, .nav .pm-list a { color: #fff !important; font-weight: 600 !important; }
.pm-i small { color: var(--ds-muted) !important; }
.pm-i:hover, .nav .pm-list a:hover, .pm-i[aria-current="page"] { background: rgba(255,255,255,.06) !important; }
.pm-i[aria-current="page"] b, .nav .pm-list a[aria-current="page"] { color: var(--ds-accent-ink) !important; }
.pm-foot { border-top-color: var(--ds-line) !important; }
.nav .nav-links .pm-box a.pm-price { color: var(--ds-accent-ink) !important; }
@media (max-width: 860px) {
  .pm-box { left: 12px !important; right: 12px !important; top: 64px !important; max-height: calc(100dvh - 80px) !important; }
  .nav .nav-links .pm-box a.pm-i { padding: 10px 12px !important; }
}

/* ---------- Footer: grouped columns (markup: .ft-row, .ft-h labels, .ft-sep) ------ */
footer { border-top: 1px solid var(--ds-line) !important; padding-block: 56px 40px !important; color: var(--ds-muted); font-size: .9rem; }
footer .ft-v2 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px !important; justify-content: stretch !important; align-items: start; }
footer .ft-row { display: flex !important; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
footer .ft-sep { display: none; }
footer .ft-h { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ds-subtle); margin-bottom: 8px; }
footer .ft-row a, footer .ft-row .gd-open {
  color: #CFC6EA !important; text-decoration: none !important; font: 500 .9rem/1.4 var(--ds-font) !important; padding: 5px 0 !important; min-height: 0 !important; text-align: left; }
footer .ft-row a:hover, footer .ft-row .gd-open:hover { color: #fff !important; }
footer .ft-row .gd-open { color: var(--ds-accent-ink) !important; }
footer .ft-first { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
footer .ft-first .ft-h { grid-column: 1 / -1; }
footer .ft-copy { order: 99; grid-column: 1 / -1; color: var(--ds-subtle); font-size: .85rem; padding-top: 24px; margin-top: 16px; border-top: 1px solid var(--ds-line); }
@media (max-width: 980px) {
  footer .ft-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer .ft-first { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  footer { padding-block: 40px 32px !important; }
  footer .ft-v2 { gap: 28px 16px !important; }
  footer .ft-row a, footer .ft-row .gd-open { padding: 9px 0 !important; min-height: 40px !important; display: inline-flex !important; align-items: center; }
}
@media (max-width: 700px) { footer { padding-bottom: 104px !important; } }

/* ---------- Overlays ------------------------------------------------------ */
/* Guide popup */
.gd-box { border-radius: var(--ds-r-lg) !important; background: #140C2A !important; border: 1px solid var(--ds-line-strong) !important; box-shadow: var(--ds-shadow-pop) !important; }
.gd-box h2 { color: #fff; font-family: var(--ds-font) !important; font-weight: 600 !important; letter-spacing: -.015em !important; }
.gd-lab { font-family: var(--ds-font) !important; font-weight: 600; color: var(--ds-accent-ink) !important; letter-spacing: .1em !important; }
.gd-box [class*="promo"], .gd-box .gd-promo { border-radius: 6px !important; }
.gd-form input[type=email] { border-radius: var(--ds-r) !important; background: rgba(255,255,255,.05) !important; border: 1px solid var(--ds-line-strong) !important; color: #fff !important; }
.gd-form input[type=email]:focus { outline: none !important; border-color: var(--ds-accent) !important; box-shadow: 0 0 0 3px rgba(155,123,255,.28); }
.gd-sub, .gd-fine { color: var(--ds-muted) !important; }
.gd-x { border-radius: var(--ds-r) !important; }
.gd-err { color: var(--ds-bad) !important; }
@media (max-width: 600px) { .gd-box { border-radius: var(--ds-r-lg) var(--ds-r-lg) 0 0 !important; } }

/* Newsletter slide-in: match the dark site instead of a white card */
html #nl.nl-pop, html .nl-pop {
  background: #160C2E !important; color: #fff !important; border: 1px solid var(--ds-line-strong) !important;
  border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-pop) !important; }
html #nl * { color: inherit; }
html #nl .nl-k { color: var(--ds-subtle) !important; font-family: var(--ds-font); }
html #nl .nl-t { color: #fff !important; font-family: var(--ds-font) !important; font-weight: 600 !important; letter-spacing: -.01em; }
html #nl p:not(.nl-t), html #nl small, html #nl .nl-s { color: var(--ds-muted) !important; }
html #nl input { background: rgba(255,255,255,.05) !important; color: #fff !important; border: 1px solid var(--ds-line-strong) !important; border-radius: var(--ds-r) !important; }
html #nl input::placeholder { color: #9C90C4; }
html #nl input:focus { border-color: var(--ds-accent) !important; box-shadow: 0 0 0 3px rgba(155,123,255,.28) !important; }
html #nl button:not(.nl-x) { background: var(--ds-primary) !important; color: #fff !important; border-radius: var(--ds-r) !important; font-weight: 600 !important; }
html #nl button:not(.nl-x):hover { background: var(--ds-primary-hover) !important; filter: none; }
html #nl .nl-x { color: var(--ds-muted) !important; border-radius: var(--ds-r) !important; }
html #nl .nl-x:hover, html #nl .nl-x:focus-visible { background: rgba(255,255,255,.08) !important; color: #fff !important; }

/* Industry picker (first visit) */
.ipk-box { border-radius: 14px !important; }
.ipk-c { border-radius: var(--ds-r-lg) !important; }

/* Mobile sticky CTA */
.sdb .btn { border-radius: var(--ds-r) !important; box-shadow: 0 12px 30px -10px rgba(0,0,0,.7) !important; }

/* ---------- Section rhythm ------------------------------------------------ */
@media (min-width: 981px) {
  main > section { padding-top: var(--ds-section-y) !important; padding-bottom: var(--ds-section-y) !important; }
  main > section.final { padding-top: var(--ds-s8) !important; padding-bottom: var(--ds-s8) !important; }
}
@media (max-width: 980px) {
  main > section:not(.mk-hero):not(.final) { padding-top: var(--ds-section-y-m) !important; padding-bottom: var(--ds-section-y-m) !important; }
}
main .sec-head { margin-bottom: var(--ds-s6) !important; }

/* ---------- Contrast fixes (WCAG AA) -------------------------------------- */
main .fp-chips .no { color: var(--ds-bad) !important; }
main .fp-chips .ok { color: var(--ds-good) !important; }
main .pp-g { background: #1E6B4E !important; }
main .accent { color: var(--ds-accent); }

/* ---------- Mobile (390) -------------------------------------------------- */
@media (max-width: 560px) {
  main h1:not(#ds-x) { font-size: clamp(2.25rem, 9.6vw, 2.75rem) !important; }
  main .mk-hero .mk-h1c:not(#ds-x) { font-size: clamp(2.75rem, 12.4vw, 3.5rem) !important; }
  main h2:not([style*="font-size"]) { font-size: clamp(1.75rem, 7.4vw, 2.125rem) !important; }
  main section.final h2, main .mk-end h2 { font-size: clamp(2rem, 8.6vw, 2.5rem) !important; }
  /* Hero CTA pairs stack full width so both buttons match */
  main .hero-cta, main .mk-cta, main .dl-cta, main .dd-cta { flex-direction: column; align-items: stretch !important; width: 100%; }
  main .hero-cta .btn, main .mk-cta .btn, main .dl-cta .btn, main .dd-cta .btn { width: 100%; }
  main .mk-hero .mk-cta { max-width: 340px; margin-inline: auto; }
  /* Home stats: three across instead of 2 + orphan */
  main .mk-hero .mk-stats { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px !important; width: 100%; }
  main .mk-hero .mk-stats div b { font-size: 1.15rem !important; }
  main .mk-hero .mk-stats div span { font-size: .78rem !important; display: block; line-height: 1.3; }
  main .an-rel, main .v-rel { grid-template-columns: 1fr; }
  main .plan { padding: 22px !important; }
}

/* ---------- ROI calculator segmented control ------------------------------ */
main .della-calc .dc-seg { background: rgba(255,255,255,.04) !important; border: 1px solid var(--ds-line); border-radius: var(--ds-r) !important; }
main .della-calc .dc-seg button { border-radius: var(--ds-r-sm) !important; }
main .della-calc .dc-seg button[aria-pressed=true], main .della-calc .dc-seg button[aria-pressed=true] small { background: var(--ds-primary) !important; color: #fff !important; box-shadow: none !important; }
main .della-calc .dc-seg button[aria-pressed=true] small { background: transparent !important; }

/* ---------- Radius normalization: page-specific surfaces + media frames ---- */
main .af-card, main .af-ex, main .af-step, main .bo-code, main .dc-stat, main .dd-plan, main .dl-price, main .dl-proof, main .dl-tc, main .dl-step,
main .fp-card, main .ob-step, main .pex, main .pp-m, main .pp-s, main .pp-sc, main .pp-win, main .sc-out, main .tc, main .wy-chapters,
main .dp-faq details, main .hero-copy > form,
main [style*="border-radius:14px"], main [style*="border-radius:18px"], main [style*="border-radius:20px"], main [style*="border-radius:22px"],
main [style*="border-radius: 14px"], main [style*="border-radius: 18px"], main [style*="border-radius: 20px"], main [style*="border-radius: 22px"],
main .bo-steps > div, main .dd-steps > div, main .della-calc .dc-results {
  border-radius: var(--ds-r-lg) !important; }
main .pp-o, main .fp-line, main .pex-line { border-radius: var(--ds-r) !important; }
main .dd-vid, main .fp-vid, main .ob-vid, main .pp-vid, main .wy-player, main .yt, main .dx-video video, main .dl-duo img, main .dl-gif img, main .dl-shot img, main .ob-vid img {
  border-radius: var(--ds-r-lg) !important; }
main .dl-price, main .dl-tc, main .dd-plan, main .af-card { box-shadow: none !important; }
main .dd-plan.best { border: 1.5px solid var(--ds-accent) !important; }
main .dl-proof .big { font-family: var(--ds-font) !important; font-weight: 600 !important; letter-spacing: -.03em; }
main .dl-price .p, main .dd-plan .p { font-family: var(--ds-font) !important; font-weight: 600 !important; letter-spacing: -.02em; }
/* Della Live closing band: same open glow band as other pages, not a boxed panel */
main .dl-final { background: radial-gradient(55% 60% at 50% 50%, rgba(124,77,255,.28), transparent 70%) !important; border-radius: 0 !important; margin: 0 !important; }

/* ---------- Overlay type: same heading voice as the pages ----------------- */
.ipk-box h2 { font-family: var(--ds-font) !important; font-weight: 600 !important; letter-spacing: -.02em !important; }
.ipk-c b, .ipk-other { font-family: var(--ds-font) !important; font-weight: 600 !important; }
.ipk-x { border-radius: var(--ds-r) !important; }
.gd-box span[style*="border-radius:999px"] { border-radius: 6px !important; font-weight: 600 !important; color: var(--ds-accent-ink) !important; }

/* /try/ hero sat flush under the nav on small screens */
@media (max-width: 980px) { .tr > header { padding-top: 40px !important; } }
main .sc-total, main .plan-price, main .dc-big { font-family: var(--ds-font) !important; font-weight: 600 !important; letter-spacing: -.02em; }
@media (max-width: 560px) { main .ht-price[style*="repeat(2"] { grid-template-columns: 1fr !important; } }
main .px-card .p { font-family: var(--ds-font) !important; font-weight: 600 !important; letter-spacing: -.02em; }

/* ---------- One-section-per-screen, but only for real sections ------------
   Headless strips (a one-line cross-link, a promo card) and short link clusters
   were each taking a full screen, leaving near-empty viewports on /pricing/ and
   /practice/. They now sit at content height between the full-screen sections. */
@media (min-width: 981px) {
  main > section:not(:has(h2)):not(.final):not(.mk-end) { min-height: 0 !important; padding-top: 40px !important; padding-bottom: 40px !important; scroll-snap-align: none; }
  main > section:has(.an-rel), main > section:has(.v-rel), main > section.buyer-guides { min-height: 0 !important; scroll-snap-align: none; }
}

/* "Comparing AI sales coaching tools?" list -> same link grid as other cross-link clusters */
main .buyer-guides h2[style*="font-size"] { font-size: 1.25rem !important; font-weight: 600 !important; margin-bottom: 14px !important; }
main .buyer-guides ul { list-style: none; padding-left: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; max-width: 1000px; line-height: 1.35 !important; }
main .buyer-guides li { padding: 0 !important; }
main .buyer-guides li::before { display: none !important; }
main .buyer-guides li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 16px;
  border: 1px solid var(--ds-line); border-radius: var(--ds-r); background: var(--ds-bg-raised); color: #fff !important; text-decoration: none; font-weight: 600; font-size: .95rem; }
main .buyer-guides li a::after { content: "\2192"; color: var(--ds-accent); flex: none; }
main .buyer-guides li a:hover { border-color: var(--ds-line-strong); background: rgba(255,255,255,.05); }

/* ---------- Dark base for pages without the inline site-dark layer --------
   (/login/, /welcome/, /unsubscribe/ were still on the old light theme). Same
   values the marketing pages already carry inline, so this is a no-op there. */
:root[data-theme="dark"] { --bg: #0D0720; --surface: rgba(255,255,255,.04); --surface-2: rgba(255,255,255,.07); --line: rgba(185,168,240,.18); --muted: #A99BD6; --accent-soft: rgba(124,77,255,.18); }
html[data-theme="dark"] body { background: #0D0720 !important; }
.nav-free { background: none !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; }
.nav-free::before { display: none !important; }
.nav .nav-links a, .nav .nav-links .pm-btn, .nav .nav-links .nav-free, .nav .nav-login { font-family: var(--ds-font) !important; font-weight: 500 !important; font-size: 1rem !important; letter-spacing: 0 !important; }
.nav .nav-links a.btn-primary { font-weight: 600 !important; }

/* ---------- /login/ ---------------------------------------------------------- */
main .lg-wrap { min-height: calc(100vh - 140px); }
main .lg-bg img { opacity: .45 !important; filter: saturate(.85) brightness(.8) !important; }
main .lg-bg::after { background:
    linear-gradient(90deg, rgba(13,7,32,.97) 0%, rgba(13,7,32,.9) 40%, rgba(13,7,32,.6) 62%, rgba(13,7,32,.3) 100%),
    radial-gradient(ellipse 520px 480px at 50% 50%, rgba(13,7,32,.75), rgba(13,7,32,0) 70%) !important; }
main .lg-card { background: var(--ds-bg-raised) !important; border: 1px solid var(--ds-line-strong) !important; border-radius: var(--ds-r-lg) !important;
  box-shadow: var(--ds-shadow-pop) !important; padding: 32px 30px !important; gap: 14px; }
main .lg-brand b { font-family: var(--ds-font) !important; font-weight: 600 !important; color: #fff; letter-spacing: -.01em; }
main .lg-brand small { font-family: var(--ds-font) !important; font-weight: 600; letter-spacing: .12em !important; color: var(--ds-subtle) !important; }
main .lg-card h1.lg-h:not(#ds-x) { font-size: clamp(1.625rem, 3.4vw, 2rem) !important; font-weight: 600 !important; letter-spacing: -.02em !important; }
main .lg-sub { color: var(--ds-muted) !important; }
main .lg-form label { color: #D9D2EE !important; font-weight: 600 !important; font-size: .875rem !important; }
main .lg-go { min-height: var(--ds-btn-h-lg) !important; }
main .lg-help { color: var(--ds-muted) !important; line-height: 1.7; }
main .lg-help a { color: var(--ds-accent-ink) !important; text-underline-offset: 3px; }
main .lg-help a:hover { color: #fff !important; }
main .lg-err { background: rgba(255,138,128,.1) !important; color: #FFB4AC !important; border: 1px solid rgba(255,138,128,.35); border-radius: var(--ds-r) !important; }
@media (max-width: 760px) { main .lg-bg img { opacity: .18 !important; } main .lg-card { padding: 26px 22px !important; } }

/* /unsubscribe/ + /welcome/ small touches */
main img[src="/logo.png"][style*="border-radius:14px"] { border-radius: 0 !important; }