/* ============================================================================
   AIToolsay — Submit a Deal (public)
   Namespace: .dlp-
   ----------------------------------------------------------------------------
   Layering rules for this file:

   1. Every colour resolves through a LOCAL --dlp-* token. The public token set
      (--aits-*) has no dark twins for its *-ink colours, so
      `color: var(--aits-green-ink)` on a tint renders dark-on-dark. The local
      set in §1 declares its own *-ink values and remaps ALL of them under
      body.theme-dark.
   2. Icons are FontAwesome FREE 5.15.3 on the public site. FA6-only names
      render as an EMPTY BOX, so §0 ships the shim for every name used here.
   3. Every :hover lift/tint sits inside @media (hover:hover). On touch, :hover
      latches after a tap — two "selected" cards is the classic symptom.
   4. Small white text on the brand blue #3680ED is only 3.4:1. Anything under
      ~15px on a solid brand fill uses --dlp-brand-solid (#2060C0, 6.0:1).
   ========================================================================== */

/* ============================================================================
   §0  FA6 → FA5 shim
   The public layouts do not load fa6-shim.css, so every FA6 name used in this
   module needs its FA5 glyph mapped here or it renders blank.
   ========================================================================== */
.dlp .fa-magnifying-glass:before        { content: "\f002"; }
.dlp .fa-xmark:before                   { content: "\f00d"; }
.dlp .fa-circle-check:before            { content: "\f058"; }
.dlp .fa-circle-xmark:before            { content: "\f057"; }
.dlp .fa-circle-info:before             { content: "\f05a"; }
.dlp .fa-circle-question:before         { content: "\f059"; }
.dlp .fa-circle-exclamation:before      { content: "\f06a"; }
.dlp .fa-triangle-exclamation:before    { content: "\f071"; }
.dlp .fa-arrow-right-long:before        { content: "\f30b"; }  /* long-arrow-alt-right */
.dlp .fa-arrow-up-right-from-square:before { content: "\f35d"; } /* external-link-alt */
.dlp .fa-shield-halved:before           { content: "\f3ed"; }
.dlp .fa-pen-to-square:before           { content: "\f044"; }
.dlp .fa-chart-simple:before            { content: "\f080"; }
.dlp .fa-wand-magic-sparkles:before     { content: "\f0d0"; }
.dlp .fa-rotate-left:before             { content: "\f0e2"; }
.dlp .fa-arrows-rotate:before           { content: "\f021"; }
.dlp .fa-file-lines:before              { content: "\f15c"; }
.dlp .fa-floppy-disk:before             { content: "\f0c7"; }
.dlp .fa-comment-dots:before            { content: "\f4ad"; }
.dlp .fa-square-check:before            { content: "\f14a"; }
.dlp .fa-list-check:before              { content: "\f0ae"; }
.dlp .fa-folder-tree:before             { content: "\f07b"; }
.dlp .fa-box-archive:before             { content: "\f187"; }
.dlp .fa-trash-can:before               { content: "\f2ed"; }
.dlp .fa-cloud-arrow-up:before          { content: "\f0ee"; }  /* cloud-upload-alt */
.dlp .fa-calendar-days:before           { content: "\f073"; }
.dlp .fa-calendar-day:before            { content: "\f783"; }
.dlp .fa-hourglass-half:before          { content: "\f252"; }
.dlp .fa-hourglass-end:before           { content: "\f253"; }
.dlp .fa-hourglass-start:before         { content: "\f251"; }
.dlp .fa-earth-americas:before          { content: "\f57d"; }  /* globe-americas */
.dlp .fa-scale-balanced:before          { content: "\f24e"; }  /* balance-scale */
.dlp .fa-user-check:before              { content: "\f4fc"; }
.dlp .fa-user-shield:before             { content: "\f505"; }
.dlp .fa-building-shield:before         { content: "\f1ad"; }  /* building */
.dlp .fa-building-columns:before        { content: "\f19c"; }  /* university */
.dlp .fa-envelope-circle-check:before   { content: "\f0e0"; }  /* envelope */
.dlp .fa-circle-pause:before            { content: "\f28b"; }
.dlp .fa-circle-play:before             { content: "\f144"; }
.dlp .fa-tower-broadcast:before         { content: "\f519"; }  /* broadcast-tower */
.dlp .fa-clock-rotate-left:before       { content: "\f1da"; }  /* history */
.dlp .fa-note-sticky:before             { content: "\f249"; }
.dlp .fa-screwdriver-wrench:before      { content: "\f7d9"; }  /* tools */
.dlp .fa-arrow-up-right-dots:before     { content: "\f062"; }  /* arrow-up */
.dlp .fa-table-cells-large:before       { content: "\f009"; }  /* th-large */
.dlp .fa-money-bill-wave:before         { content: "\f53a"; }
.dlp .fa-id-badge:before                { content: "\f2c1"; }
.dlp .fa-receipt:before                 { content: "\f543"; }
.dlp .fa-file-contract:before           { content: "\f56c"; }
.dlp .fa-graduation-cap:before          { content: "\f19d"; }
.dlp .fa-handshake:before               { content: "\f2b5"; }
.dlp .fa-infinity:before                { content: "\f534"; }
.dlp .fa-bullseye:before                { content: "\f140"; }
.dlp .fa-plug:before                    { content: "\f1e6"; }
.dlp .fa-industry:before                { content: "\f275"; }
.dlp .fa-brain:before                   { content: "\f5dc"; }
.dlp .fa-desktop:before                 { content: "\f108"; }
.dlp .fa-hashtag:before                 { content: "\f292"; }
.dlp .fa-cube:before                    { content: "\f1b2"; }
.dlp .fa-ticket:before                  { content: "\f145"; }  /* ticket-alt */
.dlp .fa-tags:before                    { content: "\f02c"; }
.dlp .fa-gift:before                    { content: "\f06b"; }
.dlp .fa-cloud:before                   { content: "\f0c2"; }
.dlp .fa-rocket:before                  { content: "\f135"; }
.dlp .fa-compass:before                 { content: "\f14e"; }
.dlp .fa-diagram-project:before         { content: "\f542"; }  /* project-diagram */
.dlp .fa-align-left:before              { content: "\f036"; }
.dlp .fa-images:before                  { content: "\f302"; }
.dlp .fa-panorama:before                { content: "\f03e"; }  /* image */
.dlp .fa-layer-group:before             { content: "\f5fd"; }
.dlp .fa-comments:before                { content: "\f086"; }

/* ============================================================================
   §1  Tokens
   ========================================================================== */
.dlp {
    /* ── Brand ───────────────────────────────────────────────────────────
       Everything resolves through --aits-*, so this module inherits the site
       palette and its dark twins for free and cannot drift from the brand. */
    --dlp-brand:      var(--aits-blue, #3680ED);
    --dlp-brand-2:    var(--aits-blue-dark, #2060C0);
    --dlp-brand-lite: var(--aits-blue-light, #60A4F5);
    --dlp-brand-ink:  var(--aits-blue-dark, #2060C0);   /* text on a brand tint */
    --dlp-brand-soft: var(--aits-blue-tint, #EAF2FD);
    --dlp-brand-soft2:var(--aits-blue-tint-2, #F4F8FE);
    --dlp-brand-line: var(--aits-blue-line, #CFE0FA);
    --dlp-grad:       linear-gradient(135deg, var(--dlp-brand) 0%, var(--dlp-brand-2) 100%);

    /* Small white text on #3680ED is 3.4:1. Anything that puts a SMALL white
       glyph on a solid brand fill (step dots, chips, counters) uses this
       deeper twin at 6.0:1. Large buttons keep the base brand so the module
       matches the rest of the site. */
    --dlp-brand-solid: var(--aits-blue-dark, #2060C0);

    /* ── Surfaces ───────────────────────────────────────────────────────── */
    --dlp-bg:      var(--aits-bg, #FFFFFF);
    --dlp-bg-deep: var(--aits-bg-deep, #F6F8FB);
    --dlp-card:    var(--aits-card, #FFFFFF);
    --dlp-card-2:  var(--aits-surface-2, #F8FAFC);
    --dlp-card-3:  var(--aits-surface-3, #F1F5F9);
    /* Translucent AND theme-aware: backdrop-filter does nothing behind an
       opaque background, so this must NOT be a plain card token. §4 carries an
       @supports fallback for engines without color-mix. */
    --dlp-glass:   color-mix(in srgb, var(--aits-card, #fff) 76%, transparent);

    /* ── Ink ─────────────────────────────────────────────────────────────
       `--dlp-faint` deliberately points at --aits-mut rather than
       --aits-faint: the site's faint grey is #999 (2.85:1 on white) and this
       module uses the token for placeholders and field hints. That is
       instructional text, not decoration, so it needs 4.5:1. */
    --dlp-ink:      var(--aits-ink, #0F172A);
    --dlp-ink-soft: var(--aits-ink-soft, #1E293B);
    --dlp-txt:      var(--aits-txt, #334155);
    --dlp-mut:      var(--aits-mut, #64748B);
    --dlp-faint:    var(--aits-mut, #64748B);

    /* ── Lines ──────────────────────────────────────────────────────────── */
    --dlp-line:        var(--aits-line, #E2E8F0);
    --dlp-line-soft:   var(--aits-line-soft, #EEF2F7);
    --dlp-line-strong: var(--aits-line-strong, #CBD5E1);

    /* ── Semantic hues ───────────────────────────────────────────────────
       Local because --aits-green-ink and its siblings have NO dark twin in
       custom.ltr.css — used unqualified they render dark-on-dark. The dark
       block below remaps every one of them. */
    --dlp-green:  #0CA678; --dlp-green-soft:  #E6FCF3; --dlp-green-ink:  #087F5B; --dlp-green-solid:  #0A7F5C;
    --dlp-amber:  #D97706; --dlp-amber-soft:  #FFF5E1; --dlp-amber-ink:  #B45309; --dlp-amber-solid:  #A85D06;
    --dlp-red:    #E03131; --dlp-red-soft:    #FFECEC; --dlp-red-ink:    #B71C1C; --dlp-red-solid:    #C42121;
    --dlp-violet: #7048E8; --dlp-violet-soft: #EEE6FF; --dlp-violet-ink: #4C2FBE; --dlp-violet-solid: #5B34D6;
    --dlp-cyan:   #0BA5C7; --dlp-cyan-soft:   #E4F8FC; --dlp-cyan-ink:   #05687E; --dlp-cyan-solid:   #0A7F99;
    --dlp-rose:   #E8497E; --dlp-rose-soft:   #FDEBF1; --dlp-rose-ink:   #B32458; --dlp-rose-solid:   #C42B63;
    --dlp-teal:   #0D9488; --dlp-teal-soft:   #E3F8F5; --dlp-teal-ink:   #0B6E66; --dlp-teal-solid:   #0B6E66;
    --dlp-indigo: #4F46E5; --dlp-indigo-soft: #EBEAFE; --dlp-indigo-ink: #372FB0; --dlp-indigo-solid: #3B32C4;
    --dlp-blue:   var(--aits-blue, #3680ED);
    --dlp-blue-soft:  var(--aits-blue-tint, #EAF2FD);
    --dlp-blue-ink:   var(--aits-blue-dark, #2060C0);
    --dlp-blue-solid: var(--aits-blue-dark, #2060C0);
    --dlp-slate:  #64748B; --dlp-slate-soft: var(--aits-surface-3, #F1F5F9); --dlp-slate-ink: var(--aits-mut, #64748B); --dlp-slate-solid: #46536B;

    /* ── Geometry — the house scale ─────────────────────────────────────── */
    --dlp-r-xs: var(--r-xs, 6px);
    --dlp-r-sm: var(--r-sm, 8px);
    --dlp-r:    var(--r-md, 10px);
    --dlp-r-md: var(--r-lg, 14px);
    --dlp-r-lg: var(--r-xl, 18px);
    --dlp-r-xl: var(--r-2xl, 24px);

    /* ── Elevation + motion ─────────────────────────────────────────────── */
    --dlp-sh-xs: var(--sh-xs, 0 1px 2px rgba(15,23,42,.04));
    --dlp-sh-sm: var(--sh-sm, 0 1px 2px rgba(15,23,42,.06));
    --dlp-sh:    var(--sh-md, 0 8px 20px rgba(15,23,42,.07));
    --dlp-sh-lg: var(--sh-lg, 0 12px 32px rgba(15,23,42,.12));
    --dlp-sh-xl: var(--sh-pop, 0 16px 48px rgba(15,23,42,.16));
    --dlp-sh-brand: var(--sh-brand, 0 6px 18px rgba(54,128,237,.28));
    --dlp-ring:  var(--ring, 0 0 0 3px rgba(96,164,245,.32));

    --dlp-ease: cubic-bezier(.22,.9,.32,1);
    --dlp-fast: 140ms var(--dlp-ease);
    --dlp-mid:  var(--t, .18s) var(--dlp-ease);
    --dlp-slow: 420ms var(--dlp-ease);

    --dlp-max: 1220px;
    --dlp-gap: 24px;

    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--dlp-txt);
    font-size: 15.5px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

/* --- Dark -----------------------------------------------------------------
   Surfaces, ink and lines flip automatically because they resolve through
   --aits-*. Only the semantic hues need remapping: each keeps its identity,
   its TINT darkens, and its -ink lifts. Greying one out is what makes
   "required" and "optional" look identical. */
body.theme-dark .dlp {
    --dlp-brand-ink:  #8DBEFF;
    --dlp-brand-lite: #7FB6FF;
    --dlp-brand-soft: rgba(54,128,237,.16);
    --dlp-brand-soft2:rgba(54,128,237,.09);
    --dlp-brand-line: rgba(54,128,237,.34);

    --dlp-green-soft:  rgba(12,166,120,.16);  --dlp-green-ink:  #6BE3B8;
    --dlp-amber-soft:  rgba(217,119,6,.16);   --dlp-amber-ink:  #F0B44E;
    --dlp-red-soft:    rgba(224,49,49,.16);   --dlp-red-ink:    #FF8A8A;
    --dlp-violet-soft: rgba(112,72,232,.18);  --dlp-violet-ink: #B79DFF;
    --dlp-cyan-soft:   rgba(11,165,199,.16);  --dlp-cyan-ink:   #5FD8F0;
    --dlp-rose-soft:   rgba(232,73,126,.16);  --dlp-rose-ink:   #FF9CBE;
    --dlp-teal-soft:   rgba(13,148,136,.16);  --dlp-teal-ink:   #5FD9CB;
    --dlp-indigo-soft: rgba(79,70,229,.18);   --dlp-indigo-ink: #A9A3FF;
    --dlp-blue-soft:   rgba(54,128,237,.16);  --dlp-blue-ink:   #8DBEFF;
    --dlp-slate-ink:   var(--aits-mut, #94A3B8);

    --dlp-glass: color-mix(in srgb, var(--aits-card, #111827) 72%, transparent);
    --dlp-ring:  0 0 0 3px rgba(96,164,245,.42);
}

/* ============================================================================
   §2  Shell + layout
   ========================================================================== */
.dlp {
    position: relative;
    background: var(--dlp-bg);
    overflow-x: clip;
}

.dlp.is-mesh::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 720px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(46rem 26rem at 12% -6%, rgba(54,128,237,.13), transparent 62%),
        radial-gradient(38rem 22rem at 92% 2%,  rgba(112,72,232,.10), transparent 60%),
        radial-gradient(34rem 20rem at 50% 18%, rgba(11,165,199,.07), transparent 66%);
}
body.theme-dark .dlp.is-mesh::before {
    background:
        radial-gradient(46rem 26rem at 12% -6%, rgba(54,128,237,.20), transparent 62%),
        radial-gradient(38rem 22rem at 92% 2%,  rgba(112,72,232,.16), transparent 60%),
        radial-gradient(34rem 20rem at 50% 18%, rgba(11,165,199,.11), transparent 66%);
}

.dlp-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--seo-shell-max, 1600px);
    margin-inline: auto;
    padding-left: max(var(--seo-shell-pad, 24px), env(safe-area-inset-left));
    padding-right: max(var(--seo-shell-pad, 24px), env(safe-area-inset-right));
}
.dlp-wrap-narrow { max-width: 860px; }
.dlp-wrap-form   { max-width: 1000px; }

.dlp-sec { padding-block: clamp(48px, 7vw, 84px); }

.dlp-sec-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(28px, 4vw, 44px);
}

/* Screen-reader-only. .sr-only exists on this site only inside
   fontawesome.min.css, which is not guaranteed on every public layout, so this
   module ships its own. */
.dlp-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================
   §3  Typography
   ========================================================================== */
.dlp-h1 {
    margin: 0 0 14px;
    font-size: clamp(2rem, 4.4vw, 3.35rem);
    line-height: 1.08;
    font-weight: 850;
    letter-spacing: -.028em;
    color: var(--dlp-ink);
}
.dlp-h1.is-sm { font-size: clamp(1.55rem, 3vw, 2.2rem); }

.dlp-h1-accent {
    background: var(--dlp-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* A gradient-clipped heading disappears entirely if background-clip is
       unsupported; this keeps a readable colour underneath. */
    -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .dlp-h1-accent { color: var(--dlp-brand-ink); -webkit-text-fill-color: currentColor; }
}

.dlp-h2 {
    margin: 0 0 10px;
    font-size: clamp(1.45rem, 2.7vw, 2.05rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.022em;
    color: var(--dlp-ink);
}

.dlp-lede {
    margin: 0;
    font-size: clamp(1rem, 1.35vw, 1.135rem);
    line-height: 1.68;
    color: var(--dlp-mut);
    max-width: 62ch;
}
.dlp-lede.is-sm { font-size: 1rem; }

.dlp-sub {
    margin: 0;
    font-size: 1.02rem;
    color: var(--dlp-mut);
    line-height: 1.66;
}

.dlp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--dlp-brand-soft);
    border: 1px solid var(--dlp-brand-line);
    color: var(--dlp-brand-ink);
    font-size: .795rem;
    font-weight: 700;
    letter-spacing: .012em;
}
.dlp-eyebrow i { font-size: .82em; }

.dlp-mono {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    letter-spacing: .01em;
}

.dlp-prose { color: var(--dlp-txt); line-height: 1.75; }
.dlp-prose.is-small { font-size: .93rem; color: var(--dlp-mut); }

.dlp-center { text-align: center; }

.dlp-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dlp-brand-ink);
    font-weight: 650;
    font-size: .92rem;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color var(--dlp-fast);
}
.dlp-link:hover { color: var(--dlp-brand); text-decoration: underline; }
.dlp-link i { font-size: .84em; }

/* ============================================================================
   §4  Cards + glass
   ========================================================================== */
.dlp-card {
    position: relative;
    background: var(--dlp-card);
    border: 1px solid var(--dlp-line);
    border-radius: var(--dlp-r-lg);
    box-shadow: var(--dlp-sh-sm);
}

.dlp.is-glass .dlp-card {
    background: var(--dlp-glass);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
}
/* color-mix is the whole mechanism; without it the glass token is invalid and
   the card would inherit nothing at all. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .dlp.is-glass .dlp-card { background: var(--dlp-card); backdrop-filter: none; }
}

.dlp-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 16px;
    margin-bottom: 18px;
    border-radius: var(--dlp-r-md);
    border: 1px solid var(--dlp-line);
    background: var(--dlp-card-2);
    font-size: .93rem;
    line-height: 1.6;
}
.dlp-note p { margin: 0; }
.dlp-note i { flex: none; margin-top: .2em; font-size: 1.02em; }

.dlp-note.is-info { background: var(--dlp-blue-soft);  border-color: var(--dlp-brand-line); color: var(--dlp-blue-ink); }
.dlp-note.is-ok   { background: var(--dlp-green-soft); border-color: color-mix(in srgb, var(--dlp-green) 34%, transparent); color: var(--dlp-green-ink); }
.dlp-note.is-bad  { background: var(--dlp-red-soft);   border-color: color-mix(in srgb, var(--dlp-red) 34%, transparent);   color: var(--dlp-red-ink); }
.dlp-note.is-warn { background: var(--dlp-amber-soft); border-color: color-mix(in srgb, var(--dlp-amber) 34%, transparent); color: var(--dlp-amber-ink); }
.dlp-note .dlp-link { margin-inline-start: auto; }

.dlp-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .715rem;
    font-weight: 750;
    letter-spacing: .012em;
    white-space: nowrap;
    background: var(--dlp-slate-soft);
    color: var(--dlp-slate-ink);
}
.dlp-chip i { font-size: .88em; }
.dlp-chip.is-green  { background: var(--dlp-green-soft);  color: var(--dlp-green-ink); }
.dlp-chip.is-blue   { background: var(--dlp-blue-soft);   color: var(--dlp-blue-ink); }
.dlp-chip.is-violet { background: var(--dlp-violet-soft); color: var(--dlp-violet-ink); }
.dlp-chip.is-amber  { background: var(--dlp-amber-soft);  color: var(--dlp-amber-ink); }
.dlp-chip.is-red    { background: var(--dlp-red-soft);    color: var(--dlp-red-ink); }
.dlp-chip.is-cyan   { background: var(--dlp-cyan-soft);   color: var(--dlp-cyan-ink); }
.dlp-chip.is-teal   { background: var(--dlp-teal-soft);   color: var(--dlp-teal-ink); }
.dlp-chip.is-rose   { background: var(--dlp-rose-soft);   color: var(--dlp-rose-ink); }
.dlp-chip.is-indigo { background: var(--dlp-indigo-soft); color: var(--dlp-indigo-ink); }
.dlp-chip.is-slate  { background: var(--dlp-slate-soft);  color: var(--dlp-slate-ink); }

.dlp-empty {
    text-align: center;
    color: var(--dlp-mut);
    padding: 34px 16px;
    font-size: .96rem;
}
.dlp-empty i { display: block; font-size: 1.7rem; opacity: .45; margin-bottom: 10px; }

/* ============================================================================
   §5  Buttons
   ========================================================================== */
.dlp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 19px;
    border-radius: var(--dlp-r);
    border: 1px solid transparent;
    font-size: .935rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--dlp-fast), box-shadow var(--dlp-mid),
                background var(--dlp-mid), border-color var(--dlp-mid), color var(--dlp-mid);
}
.dlp-btn i { font-size: .92em; }
.dlp-btn:disabled,
.dlp-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.dlp-btn.is-busy { pointer-events: none; opacity: .72; }

.dlp-btn-lg    { padding: 13px 26px; font-size: 1rem; border-radius: var(--dlp-r-md); }
.dlp-btn-sm    { padding: 7px 13px;  font-size: .845rem; gap: 6px; }
.dlp-btn-block { display: flex; width: 100%; }

.dlp-btn-primary {
    background: var(--dlp-grad);
    color: #fff;
    box-shadow: var(--dlp-sh-brand);
}
.dlp-btn-ghost {
    background: var(--dlp-card);
    border-color: var(--dlp-line-strong);
    color: var(--dlp-ink);
}
.dlp-btn-quiet {
    background: var(--dlp-card-3);
    color: var(--dlp-txt);
}
.dlp-btn-light        { background: #fff; color: var(--dlp-brand-solid); }
.dlp-btn-outline-light{ background: transparent; border-color: rgba(255,255,255,.62); color: #fff; }

@media (hover: hover) {
    .dlp-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--dlp-sh-lg); color: #fff; }
    .dlp-btn-ghost:hover   { border-color: var(--dlp-brand); color: var(--dlp-brand-ink); background: var(--dlp-brand-soft2); }
    .dlp-btn-quiet:hover   { background: var(--dlp-brand-soft); color: var(--dlp-brand-ink); }
    .dlp-btn-light:hover   { transform: translateY(-2px); color: var(--dlp-brand-solid); }
    .dlp-btn-outline-light:hover { background: rgba(255,255,255,.14); color: #fff; }
}

.dlp-btn:focus-visible,
.dlp-pill:focus-visible,
.dlp-input:focus-visible,
.dlp-link:focus-visible { outline: 2px solid var(--dlp-brand); outline-offset: 2px; }

.dlp-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    flex: none;
    border-radius: var(--dlp-r-sm);
    border: 1px solid var(--dlp-line);
    background: var(--dlp-card);
    color: var(--dlp-mut);
    cursor: pointer;
    transition: all var(--dlp-fast);
}
@media (hover: hover) {
    .dlp-icon-btn:hover { border-color: var(--dlp-line-strong); color: var(--dlp-ink); }
    .dlp-icon-btn.is-danger:hover { border-color: var(--dlp-red); color: var(--dlp-red); background: var(--dlp-red-soft); }
}

.dlp-spin { animation: dlp-spin 900ms linear infinite; }
@keyframes dlp-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   §6  Hero
   ========================================================================== */
.dlp-hero { padding-block: clamp(46px, 7vw, 92px) clamp(30px, 4vw, 54px); }

.dlp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}

.dlp-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.dlp-hero-art { display: flex; justify-content: center; min-width: 0; }

.dlp-sample { position: relative; width: 100%; max-width: 400px; }

.dlp-sample-glow {
    position: absolute;
    inset: -22% -12% -14%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(54,128,237,.24), transparent 68%);
    filter: blur(28px);
    pointer-events: none;
}

.dlp-deal-card.is-sample {
    transform: rotate(-1.4deg);
    box-shadow: var(--dlp-sh-xl);
}
.dlp.no-anim .dlp-deal-card.is-sample { transform: none; }

/* ============================================================================
   §7  Trust strip + stats
   ========================================================================== */
.dlp-trust { padding-block: 8px clamp(24px, 3vw, 40px); }

.dlp-trust-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dlp-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--dlp-r-md);
    border: 1px solid var(--dlp-line);
    background: var(--dlp-card);
    transition: transform var(--dlp-mid), box-shadow var(--dlp-mid);
}
@media (hover: hover) {
    .dlp-trust-item:hover { transform: translateY(-3px); box-shadow: var(--dlp-sh); }
}

.dlp-trust-ico {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    flex: none;
    border-radius: var(--dlp-r-sm);
    background: var(--dlp-slate-soft);
    color: var(--dlp-slate-ink);
    font-size: .96rem;
}
.dlp-trust-item.tone-green  .dlp-trust-ico { background: var(--dlp-green-soft);  color: var(--dlp-green-ink); }
.dlp-trust-item.tone-blue   .dlp-trust-ico { background: var(--dlp-blue-soft);   color: var(--dlp-blue-ink); }
.dlp-trust-item.tone-violet .dlp-trust-ico { background: var(--dlp-violet-soft); color: var(--dlp-violet-ink); }
.dlp-trust-item.tone-amber  .dlp-trust-ico { background: var(--dlp-amber-soft);  color: var(--dlp-amber-ink); }
.dlp-trust-item.tone-cyan   .dlp-trust-ico { background: var(--dlp-cyan-soft);   color: var(--dlp-cyan-ink); }
.dlp-trust-item.tone-teal   .dlp-trust-ico { background: var(--dlp-teal-soft);   color: var(--dlp-teal-ink); }
.dlp-trust-item.tone-rose   .dlp-trust-ico { background: var(--dlp-rose-soft);   color: var(--dlp-rose-ink); }

.dlp-trust-text { display: flex; flex-direction: column; min-width: 0; }
.dlp-trust-text b { font-size: .93rem; font-weight: 750; color: var(--dlp-ink); }
.dlp-trust-text i { font-style: normal; font-size: .795rem; color: var(--dlp-mut); }

.dlp-stats { padding-block: clamp(20px, 3vw, 36px); }

.dlp-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.dlp-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 22px 16px;
    border-radius: var(--dlp-r-lg);
    border: 1px solid var(--dlp-line);
    background: var(--dlp-card);
}
.dlp-stat-ico {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--dlp-blue-soft);
    color: var(--dlp-blue-ink);
}
.dlp-stat.tone-green  .dlp-stat-ico { background: var(--dlp-green-soft);  color: var(--dlp-green-ink); }
.dlp-stat.tone-violet .dlp-stat-ico { background: var(--dlp-violet-soft); color: var(--dlp-violet-ink); }
.dlp-stat.tone-amber  .dlp-stat-ico { background: var(--dlp-amber-soft);  color: var(--dlp-amber-ink); }
.dlp-stat.tone-cyan   .dlp-stat-ico { background: var(--dlp-cyan-soft);   color: var(--dlp-cyan-ink); }

.dlp-stat-val  { font-size: clamp(1.5rem, 2.6vw, 2.05rem); font-weight: 850; letter-spacing: -.02em; color: var(--dlp-ink); line-height: 1.1; }
.dlp-stat-lbl  { font-size: .88rem; font-weight: 650; color: var(--dlp-txt); }
.dlp-stat-note { font-size: .78rem; color: var(--dlp-mut); }

/* ============================================================================
   §8  Eligibility, benefits, process, types
   ========================================================================== */
.dlp-elig-grid,
.dlp-ben-grid,
.dlp-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dlp-elig-item {
    display: flex;
    gap: 14px;
    padding: 18px;
}
.dlp-elig-ico {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    flex: none;
    border-radius: var(--dlp-r);
    background: var(--dlp-blue-soft);
    color: var(--dlp-blue-ink);
    font-size: 1.02rem;
}
.dlp-elig-item.tone-green  .dlp-elig-ico { background: var(--dlp-green-soft);  color: var(--dlp-green-ink); }
.dlp-elig-item.tone-violet .dlp-elig-ico { background: var(--dlp-violet-soft); color: var(--dlp-violet-ink); }
.dlp-elig-item.tone-cyan   .dlp-elig-ico { background: var(--dlp-cyan-soft);   color: var(--dlp-cyan-ink); }
.dlp-elig-item.tone-rose   .dlp-elig-ico { background: var(--dlp-rose-soft);   color: var(--dlp-rose-ink); }
.dlp-elig-item.tone-amber  .dlp-elig-ico { background: var(--dlp-amber-soft);  color: var(--dlp-amber-ink); }

.dlp-elig-body { min-width: 0; }
.dlp-elig-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 5px;
    font-size: .995rem;
    font-weight: 750;
    color: var(--dlp-ink);
}
.dlp-elig-note { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--dlp-mut); }

.dlp-ben { padding: 22px; }
.dlp-ben-ico {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    margin-bottom: 14px;
    border-radius: var(--dlp-r);
    background: var(--dlp-blue-soft);
    color: var(--dlp-blue-ink);
    font-size: 1.06rem;
}
.dlp-ben.tone-green  .dlp-ben-ico { background: var(--dlp-green-soft);  color: var(--dlp-green-ink); }
.dlp-ben.tone-violet .dlp-ben-ico { background: var(--dlp-violet-soft); color: var(--dlp-violet-ink); }
.dlp-ben.tone-amber  .dlp-ben-ico { background: var(--dlp-amber-soft);  color: var(--dlp-amber-ink); }
.dlp-ben.tone-cyan   .dlp-ben-ico { background: var(--dlp-cyan-soft);   color: var(--dlp-cyan-ink); }
.dlp-ben.tone-rose   .dlp-ben-ico { background: var(--dlp-rose-soft);   color: var(--dlp-rose-ink); }
.dlp-ben.tone-teal   .dlp-ben-ico { background: var(--dlp-teal-soft);   color: var(--dlp-teal-ink); }

.dlp-ben-title { margin: 0 0 7px; font-size: 1.02rem; font-weight: 750; color: var(--dlp-ink); }
.dlp-ben-text  { margin: 0; font-size: .905rem; line-height: 1.66; color: var(--dlp-mut); }

@media (hover: hover) {
    .dlp-ben:hover,
    .dlp-elig-item:hover,
    .dlp-type:hover { transform: translateY(-3px); box-shadow: var(--dlp-sh); }
}
.dlp-ben, .dlp-elig-item, .dlp-type { transition: transform var(--dlp-mid), box-shadow var(--dlp-mid); }

.dlp-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: dlp-flow;
}
.dlp-flow-step { position: relative; display: flex; flex-direction: column; gap: 12px; }

/* The connector between process steps. Hidden on the last one and on mobile,
   where the steps stack and a horizontal rule would point at nothing. */
.dlp-flow-step::after {
    content: "";
    position: absolute;
    top: 23px;
    inset-inline-start: 58px;
    inset-inline-end: -18px;
    height: 2px;
    background: linear-gradient(90deg, var(--dlp-line-strong), transparent);
}
.dlp-flow-step:last-child::after { display: none; }

.dlp-flow-dot {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--dlp-blue-soft);
    color: var(--dlp-blue-ink);
    font-size: 1.08rem;
    border: 2px solid var(--dlp-card);
    box-shadow: var(--dlp-sh-sm);
}
.dlp-flow-step.tone-green  .dlp-flow-dot { background: var(--dlp-green-soft);  color: var(--dlp-green-ink); }
.dlp-flow-step.tone-amber  .dlp-flow-dot { background: var(--dlp-amber-soft);  color: var(--dlp-amber-ink); }
.dlp-flow-step.tone-violet .dlp-flow-dot { background: var(--dlp-violet-soft); color: var(--dlp-violet-ink); }

.dlp-flow-n     { display: block; font-size: .73rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--dlp-faint); }
.dlp-flow-title { margin: 4px 0 6px; font-size: 1rem; font-weight: 750; color: var(--dlp-ink); }
.dlp-flow-text  { margin: 0; font-size: .885rem; line-height: 1.64; color: var(--dlp-mut); }

.dlp-type { padding: 20px; }
.dlp-type-ico {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    margin-bottom: 12px;
    border-radius: var(--dlp-r);
    background: var(--dlp-blue-soft);
    color: var(--dlp-blue-ink);
}
.dlp-type.tone-green  .dlp-type-ico { background: var(--dlp-green-soft);  color: var(--dlp-green-ink); }
.dlp-type.tone-violet .dlp-type-ico { background: var(--dlp-violet-soft); color: var(--dlp-violet-ink); }
.dlp-type.tone-cyan   .dlp-type-ico { background: var(--dlp-cyan-soft);   color: var(--dlp-cyan-ink); }
.dlp-type.tone-teal   .dlp-type-ico { background: var(--dlp-teal-soft);   color: var(--dlp-teal-ink); }
.dlp-type.tone-rose   .dlp-type-ico { background: var(--dlp-rose-soft);   color: var(--dlp-rose-ink); }
.dlp-type.tone-amber  .dlp-type-ico { background: var(--dlp-amber-soft);  color: var(--dlp-amber-ink); }
.dlp-type.tone-indigo .dlp-type-ico { background: var(--dlp-indigo-soft); color: var(--dlp-indigo-ink); }

.dlp-type-name { margin: 0 0 6px; font-size: 1rem; font-weight: 750; color: var(--dlp-ink); }
.dlp-type-text { margin: 0 0 12px; font-size: .875rem; line-height: 1.6; color: var(--dlp-mut); }

.dlp-type-needs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.dlp-type-needs li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .805rem;
    color: var(--dlp-mut);
}
.dlp-type-needs i { width: 14px; font-size: .82em; color: var(--dlp-faint); }

/* ============================================================================
   §9  The wizard
   ========================================================================== */
.dlp-form-sec { padding-block: clamp(28px, 4vw, 52px); scroll-margin-top: 90px; }

/* --- Progress ------------------------------------------------------------- */
.dlp-prog { margin-bottom: 22px; }

.dlp-prog-bar {
    height: 5px;
    border-radius: 999px;
    background: var(--dlp-card-3);
    overflow: hidden;
}
.dlp-prog-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--dlp-grad);
    transition: width var(--dlp-slow);
}

.dlp-prog-steps {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 14px 0 0;
    padding: 0 0 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.dlp-prog-steps::-webkit-scrollbar { display: none; }
.dlp-prog-step { flex: 1 1 0; min-width: 92px; }

.dlp-prog-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 6px 4px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--dlp-faint);
    transition: color var(--dlp-mid);
}
.dlp-prog-btn:disabled { cursor: default; }

.dlp-prog-dot {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--dlp-card-3);
    border: 2px solid transparent;
    color: var(--dlp-mut);
    font-size: .85rem;
    font-weight: 750;
    transition: all var(--dlp-mid);
}
.dlp-prog-lbl {
    font-size: .755rem;
    font-weight: 650;
    text-align: center;
    line-height: 1.25;
}

.dlp-prog-step.is-done .dlp-prog-dot { background: var(--dlp-green-soft); color: var(--dlp-green-ink); }
.dlp-prog-step.is-done .dlp-prog-btn { color: var(--dlp-txt); }

/* Solid brand fill with a small white glyph → the deeper twin, not the base
   brand, or the tick sits at 3.4:1. */
.dlp-prog-step.is-now .dlp-prog-dot {
    background: var(--dlp-brand-solid);
    color: #fff;
    border-color: var(--dlp-brand-soft);
    box-shadow: 0 0 0 4px var(--dlp-brand-soft);
}
.dlp-prog-step.is-now .dlp-prog-btn { color: var(--dlp-brand-ink); }

/* --- Panel ---------------------------------------------------------------- */
.dlp-panel { padding: clamp(20px, 3.2vw, 34px); }

.dlp-panel-head { margin-bottom: 22px; }
.dlp-panel-step {
    display: inline-block;
    font-size: .735rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dlp-brand-ink);
    margin-bottom: 7px;
}
.dlp-panel-title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 7px;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -.018em;
    color: var(--dlp-ink);
}
.dlp-panel-title i { color: var(--dlp-brand-ink); font-size: .92em; }
.dlp-panel-sub  { margin: 0 0 6px; font-size: .97rem; color: var(--dlp-txt); }
.dlp-panel-desc { margin: 0; font-size: .885rem; line-height: 1.66; color: var(--dlp-mut); }

/* Honeypot: off-screen rather than display:none — some bots skip hidden
   inputs, and none of them read the label. */
.dlp-hp {
    position: absolute !important;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* --- Field grid ----------------------------------------------------------- */
.dlp-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}
/* min-width:0 is load-bearing: without it a long unbroken value (a URL, a
   coupon) forces the grid item past its track and the layout overflows the
   viewport on mobile. */
.dlp-field { min-width: 0; grid-column: span 12; }
.dlp-field.is-half  { grid-column: span 6; }
.dlp-field.is-third { grid-column: span 4; }
.dlp-field.is-two3  { grid-column: span 8; }

.dlp-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    font-size: .875rem;
    font-weight: 700;
    color: var(--dlp-ink);
}
.dlp-label > i { color: var(--dlp-faint); font-size: .92em; }
.dlp-req { color: var(--dlp-red); font-weight: 800; }
.dlp-opt {
    margin-inline-start: auto;
    font-size: .715rem;
    font-weight: 600;
    color: var(--dlp-faint);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* --- Inputs --------------------------------------------------------------- */
.dlp-input {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--dlp-r);
    border: 1px solid var(--dlp-line-strong);
    background: var(--dlp-card);
    color: var(--dlp-ink);
    font-family: inherit;
    font-size: .945rem;
    line-height: 1.45;
    transition: border-color var(--dlp-fast), box-shadow var(--dlp-fast), background var(--dlp-fast);
}
.dlp-input::placeholder { color: var(--dlp-faint); }
.dlp-input:focus {
    outline: none;
    border-color: var(--dlp-brand);
    box-shadow: var(--dlp-ring);
}
.dlp-field.has-error .dlp-input { border-color: var(--dlp-red); }

.dlp-textarea { resize: vertical; min-height: 96px; }
.dlp-textarea.is-tall { min-height: 200px; }

.dlp-input-wrap { position: relative; display: flex; align-items: stretch; }
.dlp-input-wrap .dlp-input { flex: 1 1 auto; min-width: 0; }

.dlp-affix {
    display: grid;
    place-items: center;
    padding-inline: 13px;
    flex: none;
    border: 1px solid var(--dlp-line-strong);
    border-inline-end: 0;
    border-start-start-radius: var(--dlp-r);
    border-end-start-radius: var(--dlp-r);
    background: var(--dlp-card-3);
    color: var(--dlp-mut);
    font-size: .9rem;
    font-weight: 650;
}
.dlp-input-wrap .dlp-affix + .dlp-input {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}
.dlp-affix.is-end {
    border-inline-end: 1px solid var(--dlp-line-strong);
    border-inline-start: 0;
    border-radius: 0 var(--dlp-r) var(--dlp-r) 0;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}
.dlp-input-wrap:has(.dlp-affix.is-end) .dlp-input:not(:first-child) { border-radius: 0; }
.dlp-input-wrap .dlp-input:has(+ .dlp-affix.is-end) { border-end-end-radius: 0; border-start-end-radius: 0; }
.dlp-affix.is-path { font-size: .845rem; color: var(--dlp-faint); }

.dlp-input-ico {
    position: absolute;
    inset-inline-end: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dlp-faint);
    pointer-events: none;
}
.dlp-input-wrap.is-coupon .dlp-input { padding-inline-end: 38px; letter-spacing: .06em; font-weight: 650; }

.dlp-auto {
    position: absolute;
    inset-inline-end: 52px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--dlp-violet-soft);
    color: var(--dlp-violet-ink);
    font-size: .66rem;
    font-weight: 750;
    pointer-events: none;
}

.dlp-select-wrap { position: relative; }
.dlp-select {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 38px;
    cursor: pointer;
}
.dlp-select-caret {
    position: absolute;
    inset-inline-end: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dlp-mut);
    font-size: .78rem;
    pointer-events: none;
}
.dlp-select-wrap.is-sm .dlp-input { padding-block: 8px; font-size: .875rem; }

.dlp-counter { margin-top: 5px; text-align: end; font-size: .72rem; color: var(--dlp-faint); }
.dlp-help    { margin: 6px 0 0; font-size: .805rem; line-height: 1.55; color: var(--dlp-mut); }
.dlp-help i  { margin-inline-end: 5px; color: var(--dlp-faint); }

.dlp-err {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    font-size: .805rem;
    font-weight: 600;
    color: var(--dlp-red-ink);
}

/* --- Radio cards ---------------------------------------------------------- */
.dlp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 11px;
}

.dlp-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 15px 15px 15px 14px;
    border-radius: var(--dlp-r-md);
    border: 1.5px solid var(--dlp-line);
    background: var(--dlp-card);
    text-align: start;
    cursor: pointer;
    transition: all var(--dlp-mid);
}
.dlp-choice-ico {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: var(--dlp-r-sm);
    background: var(--dlp-slate-soft);
    color: var(--dlp-slate-ink);
    font-size: .93rem;
    transition: all var(--dlp-mid);
}
.dlp-choice.tone-blue   .dlp-choice-ico { background: var(--dlp-blue-soft);   color: var(--dlp-blue-ink); }
.dlp-choice.tone-green  .dlp-choice-ico { background: var(--dlp-green-soft);  color: var(--dlp-green-ink); }
.dlp-choice.tone-violet .dlp-choice-ico { background: var(--dlp-violet-soft); color: var(--dlp-violet-ink); }
.dlp-choice.tone-cyan   .dlp-choice-ico { background: var(--dlp-cyan-soft);   color: var(--dlp-cyan-ink); }
.dlp-choice.tone-teal   .dlp-choice-ico { background: var(--dlp-teal-soft);   color: var(--dlp-teal-ink); }
.dlp-choice.tone-rose   .dlp-choice-ico { background: var(--dlp-rose-soft);   color: var(--dlp-rose-ink); }
.dlp-choice.tone-amber  .dlp-choice-ico { background: var(--dlp-amber-soft);  color: var(--dlp-amber-ink); }
.dlp-choice.tone-indigo .dlp-choice-ico { background: var(--dlp-indigo-soft); color: var(--dlp-indigo-ink); }

.dlp-choice-name { font-size: .91rem; font-weight: 750; color: var(--dlp-ink); line-height: 1.3; }
.dlp-choice-note { font-size: .775rem; line-height: 1.5; color: var(--dlp-mut); }

.dlp-choice-tick {
    position: absolute;
    top: 11px;
    inset-inline-end: 11px;
    color: var(--dlp-brand);
    opacity: 0;
    transform: scale(.6);
    transition: all var(--dlp-mid);
}

.dlp-choice.is-on {
    border-color: var(--dlp-brand);
    background: var(--dlp-brand-soft2);
    box-shadow: 0 0 0 3px var(--dlp-brand-soft);
}
.dlp-choice.is-on .dlp-choice-tick { opacity: 1; transform: scale(1); }

@media (hover: hover) {
    .dlp-choice:hover { border-color: var(--dlp-brand-line); transform: translateY(-2px); }
}

/* --- Checkboxes ----------------------------------------------------------- */
.dlp-checks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}

/* A button, not an <input>. Styling the checkbox INPUT itself is the trap that
   makes ticks invisible in dark mode; the box below is a real element. */
.dlp-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--dlp-r);
    border: 1px solid var(--dlp-line);
    background: var(--dlp-card);
    text-align: start;
    cursor: pointer;
    transition: all var(--dlp-fast);
}
.dlp-check-box {
    display: grid;
    place-items: center;
    width: 20px; height: 20px;
    flex: none;
    border-radius: var(--dlp-r-xs);
    border: 1.5px solid var(--dlp-line-strong);
    background: var(--dlp-card);
    color: transparent;
    font-size: .68rem;
    transition: all var(--dlp-fast);
}
.dlp-check-lbl {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .885rem;
    font-weight: 600;
    color: var(--dlp-txt);
    line-height: 1.35;
}
.dlp-check-lbl i { color: var(--dlp-faint); font-size: .9em; }

.dlp-check.is-on { border-color: var(--dlp-brand); background: var(--dlp-brand-soft2); }
.dlp-check.is-on .dlp-check-box { background: var(--dlp-brand-solid); border-color: var(--dlp-brand-solid); color: #fff; }
.dlp-check.is-on .dlp-check-lbl { color: var(--dlp-ink); }

@media (hover: hover) {
    .dlp-check:hover { border-color: var(--dlp-brand-line); }
}

/* --- Radio group ---------------------------------------------------------- */
.dlp-radios { display: flex; flex-wrap: wrap; gap: 10px; }
.dlp-radio  { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.dlp-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.dlp-radio-box {
    width: 19px; height: 19px;
    border-radius: 50%;
    border: 2px solid var(--dlp-line-strong);
    background: var(--dlp-card);
    transition: all var(--dlp-fast);
}
.dlp-radio input:checked + .dlp-radio-box {
    border-color: var(--dlp-brand-solid);
    border-width: 6px;
}
.dlp-radio input:focus-visible + .dlp-radio-box { box-shadow: var(--dlp-ring); }
.dlp-radio-lbl { font-size: .9rem; color: var(--dlp-txt); }

/* --- Chip multi-select ---------------------------------------------------- */
.dlp-chipset { display: flex; flex-wrap: wrap; gap: 7px; }

.dlp-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--dlp-line);
    background: var(--dlp-card);
    color: var(--dlp-txt);
    font-size: .845rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dlp-fast);
}
.dlp-chip-btn i { font-size: .78em; }
.dlp-chip-btn.is-on {
    background: var(--dlp-brand-solid);
    border-color: var(--dlp-brand-solid);
    color: #fff;
    font-weight: 700;
}
@media (hover: hover) {
    .dlp-chip-btn:hover { border-color: var(--dlp-brand); color: var(--dlp-brand-ink); }
    .dlp-chip-btn.is-on:hover { color: #fff; }
}

/* --- Free tags ------------------------------------------------------------ */
.dlp-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}
.dlp-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 12px;
    border-radius: 999px;
    background: var(--dlp-brand-soft);
    color: var(--dlp-brand-ink);
    font-size: .82rem;
    font-weight: 650;
}
.dlp-tag button {
    display: grid;
    place-items: center;
    width: 19px; height: 19px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: .68rem;
    cursor: pointer;
    opacity: .62;
    transition: opacity var(--dlp-fast), background var(--dlp-fast);
}
.dlp-tag button:hover { opacity: 1; background: rgba(0,0,0,.09); }

.dlp-tag-add { display: flex; gap: 8px; }
.dlp-tag-add .dlp-input { flex: 1 1 auto; min-width: 0; }

/* --- Toggle + acceptance -------------------------------------------------- */
.dlp-switch { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.dlp-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.dlp-switch-track {
    position: relative;
    width: 44px; height: 25px;
    flex: none;
    border-radius: 999px;
    background: var(--dlp-line-strong);
    transition: background var(--dlp-mid);
}
.dlp-switch-knob {
    position: absolute;
    top: 3px; inset-inline-start: 3px;
    width: 19px; height: 19px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--dlp-sh-sm);
    transition: transform var(--dlp-mid);
}
.dlp-switch input:checked + .dlp-switch-track { background: var(--dlp-brand-solid); }
.dlp-switch input:checked + .dlp-switch-track .dlp-switch-knob { transform: translateX(19px); }
[dir="rtl"] .dlp-switch input:checked + .dlp-switch-track .dlp-switch-knob { transform: translateX(-19px); }
.dlp-switch input:focus-visible + .dlp-switch-track { box-shadow: var(--dlp-ring); }
.dlp-switch-lbl { display: flex; align-items: center; gap: 7px; font-size: .9rem; font-weight: 600; color: var(--dlp-txt); }
.dlp-switch-lbl i { color: var(--dlp-faint); }

.dlp-accept {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border-radius: var(--dlp-r);
    border: 1px solid var(--dlp-line);
    background: var(--dlp-card-2);
    cursor: pointer;
    transition: all var(--dlp-fast);
}
.dlp-accept input { position: absolute; opacity: 0; width: 0; height: 0; }
.dlp-accept-box {
    display: grid;
    place-items: center;
    width: 21px; height: 21px;
    flex: none;
    margin-top: 1px;
    border-radius: var(--dlp-r-xs);
    border: 1.5px solid var(--dlp-line-strong);
    background: var(--dlp-card);
    color: transparent;
    font-size: .7rem;
    transition: all var(--dlp-fast);
}
.dlp-accept input:checked + .dlp-accept-box {
    background: var(--dlp-brand-solid);
    border-color: var(--dlp-brand-solid);
    color: #fff;
}
.dlp-accept input:focus-visible + .dlp-accept-box { box-shadow: var(--dlp-ring); }
.dlp-accept-lbl { font-size: .885rem; line-height: 1.6; color: var(--dlp-txt); }
.dlp-accept.has-error { border-color: var(--dlp-red); background: var(--dlp-red-soft); }
@media (hover: hover) {
    .dlp-accept:hover { border-color: var(--dlp-brand-line); }
}

/* --- Uploads -------------------------------------------------------------- */
.dlp-drop {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 132px;
    padding: 22px 18px;
    border-radius: var(--dlp-r-md);
    border: 2px dashed var(--dlp-line-strong);
    background: var(--dlp-card-2);
    cursor: pointer;
    text-align: center;
    transition: all var(--dlp-mid);
}
.dlp-drop.is-drag {
    border-color: var(--dlp-brand);
    background: var(--dlp-brand-soft);
    transform: scale(1.012);
}
@media (hover: hover) {
    .dlp-drop:hover { border-color: var(--dlp-brand-line); background: var(--dlp-brand-soft2); }
}

/* The input covers the whole zone so the browser handles the drop natively. */
.dlp-drop-input {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
}
.dlp-drop-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.dlp-drop-ico {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: var(--dlp-brand-soft);
    color: var(--dlp-brand-ink);
    font-size: 1.1rem;
}
.dlp-drop-main { font-size: .91rem; font-weight: 700; color: var(--dlp-ink); }
.dlp-drop-hint { font-size: .775rem; color: var(--dlp-mut); }

.dlp-drop-busy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: inherit;
    background: var(--dlp-glass);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    font-size: .875rem;
    font-weight: 700;
    color: var(--dlp-brand-ink);
}

.dlp-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 10px;
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}
.dlp-thumbs:not(.is-multi) { grid-template-columns: minmax(0, 208px); }

.dlp-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--dlp-r);
    overflow: hidden;
    border: 1px solid var(--dlp-line);
    background: var(--dlp-card-3);
}
.dlp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dlp-thumb-tools {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 6px;
    background: linear-gradient(transparent, rgba(0,0,0,.62));
    opacity: 0;
    transition: opacity var(--dlp-mid);
}
/* Touch has no hover, so the tools have to be permanently visible there or a
   phone user can never delete an image. */
@media (hover: hover) { .dlp-thumb:hover .dlp-thumb-tools { opacity: 1; } }
@media (hover: none)  { .dlp-thumb-tools { opacity: 1; } }

.dlp-thumb-btn {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border: 0;
    border-radius: var(--dlp-r-xs);
    background: rgba(255,255,255,.92);
    color: #0F172A;
    font-size: .72rem;
    cursor: pointer;
}
.dlp-thumb-btn:disabled { opacity: .38; cursor: not-allowed; }
.dlp-thumb-btn.is-danger { background: rgba(224,49,49,.94); color: #fff; }

.dlp-thumb-tag {
    position: absolute;
    top: 6px; inset-inline-start: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(15,23,42,.78);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
}

/* --- Verification --------------------------------------------------------- */
.dlp-verify { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }

.dlp-verify-box { padding: 18px; }
.dlp-verify-box.is-done { border-color: color-mix(in srgb, var(--dlp-green) 42%, transparent); background: var(--dlp-green-soft); }

.dlp-verify-head { display: flex; align-items: flex-start; gap: 13px; }
.dlp-verify-ico {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    flex: none;
    border-radius: var(--dlp-r);
    background: var(--dlp-brand-soft);
    color: var(--dlp-brand-ink);
    font-size: 1.02rem;
}
.dlp-verify-box.is-done .dlp-verify-ico { background: color-mix(in srgb, var(--dlp-green) 22%, transparent); color: var(--dlp-green-ink); }
.dlp-verify-title { margin: 0 0 3px; font-size: 1rem; font-weight: 750; color: var(--dlp-ink); }
.dlp-verify-sub   { margin: 0; font-size: .865rem; color: var(--dlp-mut); }
.dlp-verify-head .dlp-chip { margin-inline-start: auto; flex: none; }

.dlp-otp { margin-top: 16px; }
.dlp-otp-row { display: flex; gap: 9px; flex-wrap: wrap; }
.dlp-otp-input {
    flex: 0 1 190px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: .34em;
    text-align: center;
}
.dlp-otp-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 11px;
    flex-wrap: wrap;
}
.dlp-otp-timer { font-size: .8rem; color: var(--dlp-faint); }
[data-dlp-otp-resend].is-waiting { opacity: .5; cursor: not-allowed; }

/* --- Actions bar ---------------------------------------------------------- */
.dlp-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--dlp-line);
}
.dlp-actions-l,
.dlp-actions-r { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.dlp-save {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .79rem;
    font-weight: 650;
    color: var(--dlp-green-ink);
    opacity: 0;
    transform: translateY(3px);
    transition: opacity var(--dlp-mid), transform var(--dlp-mid);
}
.dlp-save.is-on { opacity: 1; transform: none; }

/* Sticky action bar. Only above the mobile breakpoint: a sticky bar on a short
   phone viewport eats the field the user is typing into. */
@media (min-width: 768px) {
    .dlp.is-sticky .dlp-actions.is-sticky {
        position: sticky;
        bottom: 0;
        z-index: 4;
        margin-inline: calc(clamp(20px, 3.2vw, 34px) * -1);
        margin-bottom: calc(clamp(20px, 3.2vw, 34px) * -1);
        padding: 16px clamp(20px, 3.2vw, 34px);
        background: var(--dlp-glass);
        -webkit-backdrop-filter: saturate(160%) blur(12px);
        backdrop-filter: saturate(160%) blur(12px);
        border-radius: 0 0 var(--dlp-r-lg) var(--dlp-r-lg);
    }
}

/* ============================================================================
   §10  Preview
   ========================================================================== */
.dlp-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.dlp-preview-card { position: sticky; top: 90px; }

.dlp-preview-flags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }

.dlp-preview-block {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--dlp-line-soft);
}
.dlp-preview-block:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.dlp-preview-h {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 11px;
    font-size: .95rem;
    font-weight: 750;
    color: var(--dlp-ink);
}
.dlp-preview-h i { color: var(--dlp-brand-ink); font-size: .92em; }
.dlp-preview-h .dlp-opt { margin-inline-start: auto; }

.dlp-preview-co { display: flex; gap: 13px; align-items: flex-start; }
.dlp-preview-co-logo {
    width: 46px; height: 46px;
    flex: none;
    border-radius: var(--dlp-r);
    object-fit: cover;
    border: 1px solid var(--dlp-line);
    background: var(--dlp-card-3);
}
.dlp-preview-co b { display: block; font-size: .95rem; color: var(--dlp-ink); margin-bottom: 3px; }
.dlp-preview-co p { margin: 6px 0 0; font-size: .865rem; color: var(--dlp-mut); line-height: 1.6; }

.dlp-faq-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 11px; }
.dlp-faq-inputs { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; }

.dlp-sum { margin-bottom: 14px; border: 1px solid var(--dlp-line); border-radius: var(--dlp-r-md); overflow: hidden; }
.dlp-sum-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--dlp-card-2);
    font-size: .85rem;
    font-weight: 750;
    color: var(--dlp-ink);
}
.dlp-sum-head > span { display: inline-flex; align-items: center; gap: 7px; }
.dlp-sum-head i { color: var(--dlp-faint); }

.dlp-sum-list { margin: 0; padding: 4px 14px 10px; }
.dlp-sum-row {
    display: grid;
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--dlp-line-soft);
}
.dlp-sum-row:last-child { border-bottom: 0; }
.dlp-sum-row dt { font-size: .81rem; color: var(--dlp-mut); }
.dlp-sum-row dd { margin: 0; font-size: .865rem; color: var(--dlp-ink); word-break: break-word; }

/* ============================================================================
   §11  Deal card, coupon, countdown
   ========================================================================== */
.dlp-deal-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    overflow: hidden;
}
.dlp-deal-card.is-compact { padding: 14px; gap: 10px; }

.dlp-deal-banner {
    position: relative;
    margin: -18px -18px 0;
    aspect-ratio: 1200 / 630;
    background: var(--dlp-card-3);
}
.dlp-deal-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dlp-deal-flags {
    position: absolute;
    top: 10px; inset-inline-start: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dlp-flag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15,23,42,.82);
    color: #fff;
    font-size: .7rem;
    font-weight: 750;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.dlp-flag.is-amber  { background: rgba(217,119,6,.94); }
.dlp-flag.is-green  { background: rgba(10,127,92,.94); }
.dlp-flag.is-violet { background: rgba(91,52,214,.94); }
.dlp-flag.is-cyan   { background: rgba(10,127,153,.94); }
.dlp-flag.is-blue   { background: rgba(32,96,192,.94); }
.dlp-flag.is-rose   { background: rgba(196,43,99,.94); }
.dlp-flag.is-teal   { background: rgba(11,110,102,.94); }
.dlp-flag.is-indigo { background: rgba(59,50,196,.94); }

.dlp-deal-top { display: flex; align-items: flex-start; gap: 12px; }

.dlp-deal-logo {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    flex: none;
    border-radius: var(--dlp-r);
    background: var(--dlp-brand-soft);
    color: var(--dlp-brand-ink);
    font-size: 1.06rem;
    font-weight: 800;
    overflow: hidden;
}
.dlp-deal-logo img { width: 100%; height: 100%; object-fit: cover; }

.dlp-deal-id { min-width: 0; flex: 1 1 auto; }
.dlp-deal-name {
    margin: 0 0 3px;
    font-size: 1.02rem;
    font-weight: 780;
    line-height: 1.3;
    color: var(--dlp-ink);
    letter-spacing: -.012em;
}
.dlp-deal-co {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: .82rem;
    color: var(--dlp-mut);
}
.dlp-vmark { color: var(--dlp-blue); font-size: .88em; }

.dlp-deal-off {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 54px;
    padding: 7px 9px;
    border-radius: var(--dlp-r);
    background: var(--dlp-green-solid);
    color: #fff;
    font-size: 1.02rem;
    font-weight: 850;
    line-height: 1;
}
.dlp-deal-off i { font-style: normal; font-size: .58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .9; }

.dlp-deal-desc { margin: 0; font-size: .875rem; line-height: 1.62; color: var(--dlp-mut); }

.dlp-deal-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; }
.dlp-deal-price b { font-size: 1.55rem; font-weight: 850; color: var(--dlp-ink); letter-spacing: -.02em; }
.dlp-deal-price s { font-size: 1rem; color: var(--dlp-faint); }
.dlp-deal-save {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--dlp-green-soft);
    color: var(--dlp-green-ink);
    font-size: .74rem;
    font-weight: 750;
}

.dlp-coupon {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-radius: var(--dlp-r);
    border: 1.5px dashed var(--dlp-brand-line);
    background: var(--dlp-brand-soft2);
    overflow: hidden;
}
.dlp-coupon code {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 11px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .95rem;
    font-weight: 750;
    letter-spacing: .09em;
    color: var(--dlp-brand-ink);
    background: none;
    overflow-x: auto;
    white-space: nowrap;
}
.dlp-coupon-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    padding: 11px 15px;
    border: 0;
    border-inline-start: 1.5px dashed var(--dlp-brand-line);
    background: var(--dlp-brand-soft);
    color: var(--dlp-brand-ink);
    font-size: .82rem;
    font-weight: 750;
    cursor: pointer;
    transition: all var(--dlp-fast);
}
.dlp-coupon-btn.is-copied { background: var(--dlp-green-solid); color: #fff; border-color: transparent; }
@media (hover: hover) {
    .dlp-coupon-btn:hover { background: var(--dlp-brand-solid); color: #fff; }
}

.dlp-deal-cd { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.dlp-deal-cd-lbl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 650;
    color: var(--dlp-mut);
}

.dlp-cd { display: flex; gap: 6px; flex-wrap: wrap; }
.dlp-cd-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 42px;
    padding: 5px 7px;
    border-radius: var(--dlp-r-sm);
    background: var(--dlp-card-3);
    line-height: 1.1;
}
.dlp-cd-cell b { font-size: .98rem; font-weight: 800; color: var(--dlp-ink); font-variant-numeric: tabular-nums; }
.dlp-cd-cell i { font-style: normal; font-size: .6rem; font-weight: 650; color: var(--dlp-mut); text-transform: uppercase; letter-spacing: .05em; }

.dlp-cd.is-urgent .dlp-cd-cell { background: var(--dlp-red-soft); }
.dlp-cd.is-urgent .dlp-cd-cell b { color: var(--dlp-red-ink); }
.dlp-cd.is-urgent .dlp-cd-cell i { color: var(--dlp-red-ink); opacity: .82; }

.dlp-cd-done {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--dlp-slate-soft);
    color: var(--dlp-slate-ink);
    font-size: .78rem;
    font-weight: 750;
}

.dlp-deal-limit {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: .79rem;
    color: var(--dlp-mut);
}
.dlp-deal-limit i { color: var(--dlp-faint); }

/* ============================================================================
   §12  Status page
   ========================================================================== */
.dlp-status-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.dlp-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 750;
    background: var(--dlp-slate-soft);
    color: var(--dlp-slate-ink);
    white-space: nowrap;
}
.dlp-status-badge.is-sm { padding: 3px 9px; font-size: .715rem; gap: 5px; }
.dlp-status-badge.is-blue   { background: var(--dlp-blue-soft);   color: var(--dlp-blue-ink); }
.dlp-status-badge.is-green  { background: var(--dlp-green-soft);  color: var(--dlp-green-ink); }
.dlp-status-badge.is-amber  { background: var(--dlp-amber-soft);  color: var(--dlp-amber-ink); }
.dlp-status-badge.is-red    { background: var(--dlp-red-soft);    color: var(--dlp-red-ink); }
.dlp-status-badge.is-violet { background: var(--dlp-violet-soft); color: var(--dlp-violet-ink); }
.dlp-status-badge.is-cyan   { background: var(--dlp-cyan-soft);   color: var(--dlp-cyan-ink); }
.dlp-status-badge.is-teal   { background: var(--dlp-teal-soft);   color: var(--dlp-teal-ink); }
.dlp-status-badge.is-slate  { background: var(--dlp-slate-soft);  color: var(--dlp-slate-ink); }

.dlp-track { padding: 20px; margin-bottom: 20px; }
.dlp-track-bar { height: 5px; border-radius: 999px; background: var(--dlp-card-3); overflow: hidden; }
.dlp-track-fill { display: block; height: 100%; border-radius: 999px; background: var(--dlp-grad); transition: width var(--dlp-slow); }
.dlp-track-fill.is-red   { background: var(--dlp-red); }
.dlp-track-fill.is-amber { background: var(--dlp-amber); }
.dlp-track-fill.is-green { background: var(--dlp-green); }

.dlp-track-steps {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}
.dlp-track-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    font-size: .765rem;
    font-weight: 650;
    color: var(--dlp-faint);
    text-align: center;
}
.dlp-track-dot {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--dlp-card-3);
    color: transparent;
    font-size: .68rem;
}
.dlp-track-step.is-done { color: var(--dlp-txt); }
.dlp-track-step.is-done .dlp-track-dot { background: var(--dlp-green-solid); color: #fff; }
.dlp-track-step.is-off { opacity: .38; }

.dlp-status-grid {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    margin-top: 20px;
}
.dlp-status-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.dlp-feedback { padding: 20px; margin-bottom: 18px; }
.dlp-feedback.is-bad { border-color: color-mix(in srgb, var(--dlp-red) 40%, transparent); }
.dlp-quote {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-inline-start: 3px solid var(--dlp-brand);
    border-radius: 0 var(--dlp-r) var(--dlp-r) 0;
    background: var(--dlp-card-2);
    font-size: .91rem;
    line-height: 1.66;
    color: var(--dlp-txt);
}

.dlp-stats-box { padding: 20px; margin-bottom: 18px; }

.dlp-mini-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 10px;
}
.dlp-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 13px 8px;
    border-radius: var(--dlp-r);
    background: var(--dlp-card-2);
    text-align: center;
}
.dlp-mini b { font-size: 1.28rem; font-weight: 800; color: var(--dlp-ink); letter-spacing: -.018em; }
.dlp-mini span { font-size: .755rem; color: var(--dlp-mut); }

.dlp-thread, .dlp-timeline { padding: 20px; margin-bottom: 16px; }

.dlp-msg {
    padding: 11px 14px;
    margin-bottom: 9px;
    border-radius: var(--dlp-r);
    background: var(--dlp-card-2);
    border-inline-start: 3px solid var(--dlp-line-strong);
}
.dlp-msg.is-mine { background: var(--dlp-brand-soft2); border-inline-start-color: var(--dlp-brand); }
.dlp-msg-who { display: block; font-size: .78rem; font-weight: 750; color: var(--dlp-ink); margin-bottom: 3px; }
.dlp-msg p   { margin: 0 0 5px; font-size: .885rem; line-height: 1.6; color: var(--dlp-txt); }
.dlp-msg time{ font-size: .715rem; color: var(--dlp-faint); }

.dlp-reply { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.dlp-reply .dlp-textarea { width: 100%; }

.dlp-tl { list-style: none; margin: 0; padding: 0; }
.dlp-tl-item {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 15px;
}
.dlp-tl-item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 30px; bottom: 2px;
    inset-inline-start: 14px;
    width: 2px;
    background: var(--dlp-line);
}
.dlp-tl-dot {
    display: grid;
    place-items: center;
    width: 29px; height: 29px;
    flex: none;
    border-radius: 50%;
    background: var(--dlp-card-3);
    color: var(--dlp-mut);
    font-size: .72rem;
    z-index: 1;
}
.dlp-tl-item b    { display: block; font-size: .875rem; font-weight: 650; color: var(--dlp-ink); }
.dlp-tl-item time { font-size: .74rem; color: var(--dlp-faint); }

/* ============================================================================
   §13  Dashboard
   ========================================================================== */
.dlp-dash-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.dlp-dash-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 18px 0;
}
.dlp-dash-right { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }

.dlp-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.dlp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--dlp-line);
    background: var(--dlp-card);
    color: var(--dlp-txt);
    font-size: .85rem;
    font-weight: 650;
    cursor: pointer;
    transition: all var(--dlp-fast);
}
.dlp-pill.is-on { background: var(--dlp-brand-solid); border-color: var(--dlp-brand-solid); color: #fff; font-weight: 700; }
.dlp-pill-n {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--dlp-card-3);
    font-size: .72rem;
    font-weight: 750;
    color: var(--dlp-mut);
}
.dlp-pill.is-on .dlp-pill-n { background: rgba(255,255,255,.24); color: #fff; }
@media (hover: hover) {
    .dlp-pill:hover { border-color: var(--dlp-brand); color: var(--dlp-brand-ink); }
    .dlp-pill.is-on:hover { color: #fff; }
}

.dlp-search { position: relative; display: flex; align-items: center; }
.dlp-search i {
    position: absolute;
    inset-inline-start: 13px;
    color: var(--dlp-faint);
    font-size: .84rem;
    pointer-events: none;
}
.dlp-search input {
    width: 100%;
    min-width: 210px;
    padding: 9px 14px 9px 36px;
    border-radius: 999px;
    border: 1px solid var(--dlp-line-strong);
    background: var(--dlp-card);
    color: var(--dlp-ink);
    font-family: inherit;
    font-size: .885rem;
}
[dir="rtl"] .dlp-search input { padding: 9px 36px 9px 14px; }
.dlp-search input:focus { outline: none; border-color: var(--dlp-brand); box-shadow: var(--dlp-ring); }

.dlp-dash-list { display: flex; flex-direction: column; gap: 12px; }

.dlp-row { padding: 16px 18px; }
.dlp-row-main { display: flex; align-items: flex-start; gap: 13px; flex-wrap: wrap; }

.dlp-row-logo {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    flex: none;
    border-radius: var(--dlp-r);
    background: var(--dlp-brand-soft);
    color: var(--dlp-brand-ink);
    font-weight: 800;
    overflow: hidden;
}
.dlp-row-logo img { width: 100%; height: 100%; object-fit: cover; }

.dlp-row-id { flex: 1 1 240px; min-width: 0; }
.dlp-row-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 5px;
    font-size: .995rem;
    font-weight: 750;
    color: var(--dlp-ink);
}
.dlp-row-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    font-size: .785rem;
    color: var(--dlp-mut);
}
.dlp-row-meta i { margin-inline-end: 4px; color: var(--dlp-faint); }
.dlp-row-meta .is-urgent { color: var(--dlp-red-ink); font-weight: 700; }
.dlp-row-meta .is-urgent i { color: currentColor; }

.dlp-row-nums { display: flex; gap: 16px; flex: none; }
.dlp-row-nums span { display: flex; flex-direction: column; align-items: center; font-size: .7rem; color: var(--dlp-mut); }
.dlp-row-nums b { font-size: 1.05rem; font-weight: 780; color: var(--dlp-ink); }

.dlp-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--dlp-line-soft);
}

.dlp-drawer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--dlp-line-soft);
}

.dlp-spark {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 68px;
    margin: 14px 0;
    padding: 0 2px;
}
.dlp-spark-bar {
    flex: 1 1 0;
    min-width: 3px;
    border-radius: 2px 2px 0 0;
    background: var(--dlp-brand);
    opacity: .82;
    transition: opacity var(--dlp-fast);
}
@media (hover: hover) { .dlp-spark-bar:hover { opacity: 1; } }

.dlp-break-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 14px;
}
.dlp-break h4 {
    margin: 0 0 7px;
    font-size: .755rem;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dlp-faint);
}
.dlp-break ul { list-style: none; margin: 0; padding: 0; }
.dlp-break li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font-size: .825rem;
    color: var(--dlp-txt);
    border-bottom: 1px solid var(--dlp-line-soft);
}
.dlp-break li:last-child { border-bottom: 0; }
.dlp-break li b { color: var(--dlp-ink); font-weight: 700; }

.dlp-renew { padding: 18px; margin-bottom: 16px; border-color: var(--dlp-brand-line); }
.dlp-renew-row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.dlp-renew-row .dlp-input { flex: 0 1 240px; }

.dlp-empty-box { padding: 46px 24px; text-align: center; }
.dlp-empty-ico {
    display: grid;
    place-items: center;
    width: 62px; height: 62px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--dlp-brand-soft);
    color: var(--dlp-brand-ink);
    font-size: 1.5rem;
}
.dlp-empty-box h2 { margin: 0 0 7px; font-size: 1.18rem; font-weight: 780; color: var(--dlp-ink); }
.dlp-empty-box p  { margin: 0 0 20px; font-size: .93rem; color: var(--dlp-mut); }

.dlp-pager { margin-top: 22px; display: flex; justify-content: center; }
.dlp-pager .pagination { margin: 0; }

/* ============================================================================
   §14  FAQ accordion
   ========================================================================== */
.dlp-faq-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.dlp-acc { display: flex; flex-direction: column; gap: 9px; }

.dlp-acc-item {
    border: 1px solid var(--dlp-line);
    border-radius: var(--dlp-r-md);
    background: var(--dlp-card);
    overflow: hidden;
    transition: border-color var(--dlp-mid), box-shadow var(--dlp-mid);
}
.dlp-acc-item.is-open { border-color: var(--dlp-brand-line); box-shadow: var(--dlp-sh-sm); }

.dlp-acc-head {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 15px 18px;
    border: 0;
    background: none;
    text-align: start;
    font-family: inherit;
    font-size: .945rem;
    font-weight: 700;
    color: var(--dlp-ink);
    cursor: pointer;
}
.dlp-acc-head > span { flex: 1 1 auto; min-width: 0; }
.dlp-acc-ico { color: var(--dlp-brand-ink); font-size: .9em; flex: none; }
.dlp-acc-caret {
    flex: none;
    font-size: .78rem;
    color: var(--dlp-mut);
    transition: transform var(--dlp-mid);
}
.dlp-acc-item.is-open .dlp-acc-caret { transform: rotate(180deg); }

.dlp-acc-body {
    padding: 0 18px 17px;
    font-size: .9rem;
    line-height: 1.72;
    color: var(--dlp-txt);
}

/* ============================================================================
   §15  Closing CTA
   ========================================================================== */
.dlp-cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: clamp(28px, 4vw, 46px);
    border-radius: var(--dlp-r-xl);
    background: var(--dlp-grad);
    box-shadow: var(--dlp-sh-lg);
    overflow: hidden;
    position: relative;
}
.dlp-cta-band::after {
    content: "";
    position: absolute;
    inset: -50% -20% auto auto;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: rgba(255,255,255,.09);
    pointer-events: none;
}
.dlp-cta-copy { position: relative; z-index: 1; min-width: 0; }
.dlp-cta-title { margin: 0 0 7px; font-size: clamp(1.3rem, 2.4vw, 1.85rem); font-weight: 820; color: #fff; letter-spacing: -.02em; }
.dlp-cta-sub   { margin: 0; font-size: .985rem; color: rgba(255,255,255,.9); line-height: 1.62; }
.dlp-cta-actions { position: relative; z-index: 1; display: flex; gap: 11px; flex-wrap: wrap; }

/* ============================================================================
   §16  Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .dlp-hero-grid      { grid-template-columns: 1fr; }
    .dlp-hero-art       { order: -1; }
    .dlp-sample         { max-width: 340px; }
    .dlp-preview-grid,
    .dlp-status-grid    { grid-template-columns: 1fr; }
    .dlp-preview-card   { position: static; }
}

@media (max-width: 768px) {
    .dlp-field.is-half,
    .dlp-field.is-third,
    .dlp-field.is-two3 { grid-column: span 12; }
    .dlp-flow-step::after { display: none; }
    .dlp-prog-lbl    { display: none; }
    .dlp-prog-step   { min-width: 44px; flex: 0 0 auto; }
    .dlp-prog-steps  { justify-content: center; }
    .dlp-row-nums    { width: 100%; justify-content: flex-start; padding-top: 4px; }
    .dlp-actions     { flex-direction: column-reverse; align-items: stretch; }
    .dlp-actions-l,
    .dlp-actions-r   { justify-content: center; }
    .dlp-actions-r .dlp-btn { flex: 1 1 auto; }
    .dlp-cta-band    { text-align: center; justify-content: center; }
    .dlp-cta-actions { justify-content: center; width: 100%; }
    .dlp-sum-row     { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 480px) {
    .dlp-deal-price b { font-size: 1.3rem; }
    .dlp-coupon       { flex-direction: column; }
    .dlp-coupon-btn   { border-inline-start: 0; border-top: 1.5px dashed var(--dlp-brand-line); justify-content: center; }
    .dlp-otp-input    { flex: 1 1 100%; }
    .dlp-search input { min-width: 0; }
}

/* ============================================================================
   §17  Motion + accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .dlp *,
    .dlp *::before,
    .dlp *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .dlp-deal-card.is-sample { transform: none; }
}

.dlp.no-anim *,
.dlp.no-anim *::before,
.dlp.no-anim *::after {
    animation: none !important;
    transition: none !important;
}

/* High-contrast mode strips backgrounds, so the borders have to carry the
   shape on their own. */
@media (forced-colors: active) {
    .dlp-btn,
    .dlp-card,
    .dlp-input,
    .dlp-choice,
    .dlp-check,
    .dlp-chip-btn { border: 1px solid; }
    .dlp-choice.is-on,
    .dlp-check.is-on,
    .dlp-chip-btn.is-on { outline: 2px solid; outline-offset: -3px; }
}

/* Any element the reveal observer never fires for stays at opacity 0 forever,
   which reads as missing text. Print always shows everything. */
@media print {
    .dlp [data-dlp-reveal] { opacity: 1 !important; transform: none !important; }
    .dlp-actions, .dlp-prog, .dlp-cta { display: none !important; }
}