/* ============================================================================
   AIToolsay — Claim a Listing (public)
   Namespace: .clmp-
   ----------------------------------------------------------------------------
   Layering rules for this file:

   1. Every colour resolves through a LOCAL --clmp-* token. The public token set
      (--aits-*) has no dark twins for its *-ink colours, so a bare
      `color:var(--aits-green-ink)` on a tint is invisible in dark mode. The
      local set below declares its own *-ink values and remaps ALL of them
      under body.theme-dark.
   2. Icons are FontAwesome FREE 5.15 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 is inside @media (hover:hover). On touch, :hover
      latches after a tap — two "selected" listing cards is the classic symptom.
   4. Nothing here sets `color:inherit` on a bare `a` or `button`. That is the
      trap that produced the invisible-text reports on the homepage kit.
   ========================================================================== */

/* ============================================================================
   §0  FA6 → FA5 shim
   Only the names this page uses. The public layouts do not load fa6-shim.css.
   ========================================================================== */
.clmp .fa-magnifying-glass:before        { content: "\f002"; }
.clmp .fa-xmark:before                   { content: "\f00d"; }
.clmp .fa-circle-check:before            { content: "\f058"; }
.clmp .fa-circle-xmark:before            { content: "\f057"; }
.clmp .fa-circle-info:before             { content: "\f05a"; }
.clmp .fa-circle-question:before         { content: "\f059"; }
.clmp .fa-circle-exclamation:before      { content: "\f06a"; }
.clmp .fa-triangle-exclamation:before    { content: "\f071"; }
.clmp .fa-arrow-right-long:before        { content: "\f30b"; }
.clmp .fa-arrow-up-right-from-square:before { content: "\f35d"; }
.clmp .fa-shield-halved:before           { content: "\f3ed"; }
.clmp .fa-pen-to-square:before           { content: "\f044"; }
.clmp .fa-envelope-circle-check:before   { content: "\f0e0"; }
.clmp .fa-user-check:before              { content: "\f4fc"; }
.clmp .fa-user-shield:before             { content: "\f505"; }
.clmp .fa-clipboard-check:before         { content: "\f46c"; }
.clmp .fa-file-lines:before              { content: "\f15c"; }
.clmp .fa-file-shield:before             { content: "\f15b"; }
.clmp .fa-list-check:before              { content: "\f0ae"; }
.clmp .fa-wand-magic-sparkles:before     { content: "\f0d0"; }
.clmp .fa-ranking-star:before            { content: "\f091"; }
.clmp .fa-chart-line:before              { content: "\f201"; }
.clmp .fa-share-nodes:before             { content: "\f1e0"; }
.clmp .fa-arrows-rotate:before           { content: "\f021"; }
.clmp .fa-rotate-left:before             { content: "\f0e2"; }
.clmp .fa-comment-dots:before            { content: "\f4ad"; }
.clmp .fa-check-double:before            { content: "\f560"; }
.clmp .fa-filter-circle-xmark:before     { content: "\f0b0"; }
.clmp .fa-id-badge:before                { content: "\f2c1"; }
.clmp .fa-hourglass:before               { content: "\f254"; }
.clmp .fa-gauge-high:before              { content: "\f625"; }
.clmp .fa-box-archive:before             { content: "\f187"; }
.clmp .fa-sitemap:before                 { content: "\f0e8"; }
.clmp .fa-headset:before                 { content: "\f590"; }
.clmp .fa-layer-group:before             { content: "\f5fd"; }
.clmp .fa-paper-plane:before             { content: "\f1d8"; }
.clmp .fa-spinner:before                 { content: "\f110"; }

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

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

    /* ── Surfaces ───────────────────────────────────────────────────────── */
    --clmp-bg:      var(--aits-bg, #FAFAFA);
    --clmp-bg-deep: var(--aits-bg-deep, #F1F1F3);
    --clmp-card:    var(--aits-card, #FFFFFF);
    --clmp-card-2:  var(--aits-surface-2, #FAFAFA);
    --clmp-card-3:  var(--aits-surface-3, #F7F7F8);

    /* 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. */
    --clmp-glass:      color-mix(in srgb, var(--aits-card, #FFF) 76%, transparent);
    --clmp-glass-line: color-mix(in srgb, var(--aits-ink, #111) 8%, transparent);

    /* ── Ink ─────────────────────────────────────────────────────────────
       --clmp-faint points at --aits-mut, not --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, so it needs
       4.5:1. */
    --clmp-ink:      var(--aits-ink, #111);
    --clmp-ink-soft: var(--aits-ink-soft, #2B2B2B);
    --clmp-txt:      var(--aits-txt, #444);
    --clmp-mut:      var(--aits-mut, #666);
    --clmp-faint:    var(--aits-mut, #666);

    /* ── Lines ──────────────────────────────────────────────────────────── */
    --clmp-line:        var(--aits-line, #ECECEC);
    --clmp-line-soft:   var(--aits-line-soft, #F1F1F1);
    --clmp-line-strong: var(--aits-line-strong, #DADADA);

    /* ── 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. */
    --clmp-green:      #0CA678;  --clmp-green-soft:  #E6FCF3;  --clmp-green-ink:  #087F5B;
    --clmp-amber:      #D97706;  --clmp-amber-soft:  #FFF5E1;  --clmp-amber-ink:  #B45309;
    --clmp-rose:       #E03131;  --clmp-rose-soft:   #FFECEC;  --clmp-rose-ink:   #B71C1C;
    --clmp-violet:     #7048E8;  --clmp-violet-soft: #EEE6FF;  --clmp-violet-ink: #4C2FBE;
    --clmp-cyan:       #0B9CB5;  --clmp-cyan-soft:   #E2F8FC;  --clmp-cyan-ink:   #086F80;
    --clmp-indigo:     #4C6EF5;  --clmp-indigo-soft: #E8EDFF;  --clmp-indigo-ink: #3450BF;
    --clmp-teal:       #0CA5A5;  --clmp-teal-soft:   #E0F8F8;  --clmp-teal-ink:   #077A7A;
    --clmp-slate:      #64748B;  --clmp-slate-soft:  #F1F3F6;  --clmp-slate-ink:  #475569;
    --clmp-blue-ink:   var(--clmp-brand-ink);
    --clmp-blue-soft:  var(--clmp-brand-soft);

    /* ── Geometry ───────────────────────────────────────────────────────── */
    --clmp-r-sm: 10px;
    --clmp-r:    14px;
    --clmp-r-lg: 22px;
    --clmp-r-xl: 30px;

    --clmp-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --clmp-shadow:    0 4px 16px rgba(16, 24, 40, .07), 0 1px 3px rgba(16, 24, 40, .05);
    --clmp-shadow-lg: 0 18px 48px rgba(16, 24, 40, .11), 0 4px 12px rgba(16, 24, 40, .06);
    --clmp-shadow-brand: 0 12px 28px rgba(54, 128, 237, .28);

    --clmp-ease: cubic-bezier(.22, .9, .32, 1);

    color: var(--clmp-txt);
    position: relative;
}

/* ============================================================================
   §2  Tokens — dark
   Every *-ink twin is remapped. A tint that is legible in light mode is not
   automatically legible on #17171A, and vice versa.
   ========================================================================== */
body.theme-dark .clmp {
    --clmp-brand-ink:   #9CC4F8;
    --clmp-brand-solid: var(--aits-blue, #3680ED);
    --clmp-brand-soft:  rgba(54, 128, 237, .16);
    --clmp-brand-soft2: rgba(54, 128, 237, .10);
    --clmp-brand-line:  rgba(54, 128, 237, .32);

    --clmp-glass:      color-mix(in srgb, var(--aits-card, #17171A) 72%, transparent);
    --clmp-glass-line: rgba(255, 255, 255, .10);

    --clmp-green-soft:  rgba(12, 166, 120, .16);  --clmp-green-ink:  #6EE7B7;
    --clmp-amber-soft:  rgba(217, 119, 6, .18);   --clmp-amber-ink:  #FCD34D;
    --clmp-rose-soft:   rgba(224, 49, 49, .18);   --clmp-rose-ink:   #FCA5A5;
    --clmp-violet-soft: rgba(112, 72, 232, .20);  --clmp-violet-ink: #C4B5FD;
    --clmp-cyan-soft:   rgba(11, 156, 181, .18);  --clmp-cyan-ink:   #7DD3E8;
    --clmp-indigo-soft: rgba(76, 110, 245, .18);  --clmp-indigo-ink: #A5B4FC;
    --clmp-teal-soft:   rgba(12, 165, 165, .18);  --clmp-teal-ink:   #6EE0E0;
    --clmp-slate-soft:  rgba(148, 163, 184, .14); --clmp-slate-ink:  #CBD5E1;
    --clmp-blue-ink:    #9CC4F8;
    --clmp-blue-soft:   rgba(54, 128, 237, .16);

    --clmp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --clmp-shadow:    0 4px 16px rgba(0, 0, 0, .46), 0 1px 3px rgba(0, 0, 0, .4);
    --clmp-shadow-lg: 0 18px 48px rgba(0, 0, 0, .58), 0 4px 12px rgba(0, 0, 0, .4);
    --clmp-shadow-brand: 0 12px 28px rgba(54, 128, 237, .34);
}

/* ============================================================================
   §2b  Screen-reader-only text
   On this build `.sr-only` happens to be defined by fontawesome.min.css, which
   the public layout does load — but depending on an ICON library for an
   accessibility primitive is one refactor away from making six labels visible.
   Declared locally so the module owns it.
   ========================================================================== */
.clmp .sr-only {
    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  Shell + layout primitives
   ========================================================================== */
.clmp {
    background: var(--clmp-bg);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: clip;   /* the mesh blobs overhang; never let them scroll the page */
}

/* The ambient mesh. Fixed-position blurred blobs rather than a background
   image: no request, no layout cost, and it recolours with the theme. */
.clmp.is-mesh::before,
.clmp.is-mesh::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
}

.clmp.is-mesh::before {
    inset: -180px auto auto -140px;
    width: 620px; height: 620px;
    background: radial-gradient(circle, rgba(54, 128, 237, .38), transparent 68%);
}

.clmp.is-mesh::after {
    inset: 320px -180px auto auto;
    width: 560px; height: 560px;
    background: radial-gradient(circle, rgba(112, 72, 232, .28), transparent 68%);
}

body.theme-dark .clmp.is-mesh::before { opacity: .34; }
body.theme-dark .clmp.is-mesh::after  { opacity: .28; }

.clmp-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    /* Matches the site-wide 1600px shell (partials/shell-cap.blade.php). */
    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));
}

.clmp-sec { position: relative; z-index: 1; padding: 68px 0; }
.clmp-sec.is-tight { padding: 44px 0; }
.clmp-sec.is-alt   { background: var(--clmp-bg-deep); }

/* Section headings ------------------------------------------------------- */
.clmp-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }

.clmp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 14px;
    border: 1px solid var(--clmp-brand-line);
    border-radius: 999px;
    background: var(--clmp-brand-soft);
    color: var(--clmp-brand-ink);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.clmp-head h2 {
    margin: 0 0 12px;
    color: var(--clmp-ink);
    font-size: clamp(1.65rem, 3.4vw, 2.3rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.clmp-head p {
    margin: 0;
    color: var(--clmp-mut);
    font-size: 1.02rem;
}

/* ============================================================================
   §4  Surfaces
   ========================================================================== */
.clmp-card {
    position: relative;
    border: 1px solid var(--clmp-line);
    border-radius: var(--clmp-r-lg);
    background: var(--clmp-card);
    box-shadow: var(--clmp-shadow-sm);
    transition: transform .3s var(--clmp-ease), box-shadow .3s var(--clmp-ease), border-color .3s var(--clmp-ease);
}

/* Glassmorphism, opt-in from the admin. Applied only where there is actually
   something behind the card to blur — a frosted panel over a flat background
   just looks like a lighter panel. */
.clmp.is-glass .clmp-card,
.clmp.is-glass .clmp-panel {
    border-color: var(--clmp-glass-line);
    background: var(--clmp-glass);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
}

/* color-mix is ~2023; without it --clmp-glass is invalid and the card renders
   with NO background at all, which is unreadable rather than merely unstyled. */
@supports not (background: color-mix(in srgb, #fff 50%, transparent)) {
    .clmp.is-glass .clmp-card,
    .clmp.is-glass .clmp-panel { background: var(--clmp-card); }
}

.clmp-panel {
    border: 1px solid var(--clmp-line);
    border-radius: var(--clmp-r-xl);
    background: var(--clmp-card);
    box-shadow: var(--clmp-shadow-lg);
}

/* Icon chip -------------------------------------------------------------- */
.clmp-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--clmp-brand-soft);
    color: var(--clmp-brand-ink);
    font-size: 1.05rem;
}

.clmp-ic.is-sm { width: 30px; height: 30px; border-radius: 9px; font-size: .82rem; }
.clmp-ic.is-lg { width: 58px; height: 58px; border-radius: 17px; font-size: 1.35rem; }

.clmp-ic[data-tone="blue"]   { background: var(--clmp-blue-soft);   color: var(--clmp-blue-ink); }
.clmp-ic[data-tone="green"]  { background: var(--clmp-green-soft);  color: var(--clmp-green-ink); }
.clmp-ic[data-tone="amber"]  { background: var(--clmp-amber-soft);  color: var(--clmp-amber-ink); }
.clmp-ic[data-tone="rose"]   { background: var(--clmp-rose-soft);   color: var(--clmp-rose-ink); }
.clmp-ic[data-tone="violet"] { background: var(--clmp-violet-soft); color: var(--clmp-violet-ink); }
.clmp-ic[data-tone="cyan"]   { background: var(--clmp-cyan-soft);   color: var(--clmp-cyan-ink); }
.clmp-ic[data-tone="indigo"] { background: var(--clmp-indigo-soft); color: var(--clmp-indigo-ink); }
.clmp-ic[data-tone="teal"]   { background: var(--clmp-teal-soft);   color: var(--clmp-teal-ink); }
.clmp-ic[data-tone="slate"]  { background: var(--clmp-slate-soft);  color: var(--clmp-slate-ink); }

/* Status pill ------------------------------------------------------------ */
.clmp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--clmp-slate-soft);
    color: var(--clmp-slate-ink);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}

.clmp-pill[data-tone="blue"]   { background: var(--clmp-blue-soft);   color: var(--clmp-blue-ink); }
.clmp-pill[data-tone="green"]  { background: var(--clmp-green-soft);  color: var(--clmp-green-ink); }
.clmp-pill[data-tone="amber"]  { background: var(--clmp-amber-soft);  color: var(--clmp-amber-ink); }
.clmp-pill[data-tone="rose"]   { background: var(--clmp-rose-soft);   color: var(--clmp-rose-ink); }
.clmp-pill[data-tone="violet"] { background: var(--clmp-violet-soft); color: var(--clmp-violet-ink); }
.clmp-pill[data-tone="cyan"]   { background: var(--clmp-cyan-soft);   color: var(--clmp-cyan-ink); }

/* ============================================================================
   §5  Buttons
   ========================================================================== */
.clmp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: var(--clmp-r, 14px);
    background: transparent;
    color: var(--clmp-ink);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .22s var(--clmp-ease), box-shadow .22s var(--clmp-ease),
                background-color .22s var(--clmp-ease), border-color .22s var(--clmp-ease), opacity .2s;
    -webkit-appearance: none;
    appearance: none;
}

.clmp-btn:disabled,
.clmp-btn.is-busy { opacity: .58; cursor: not-allowed; pointer-events: none; }

.clmp-btn-primary {
    background: var(--clmp-grad);
    color: #FFFFFF;
    box-shadow: var(--clmp-shadow-brand);
}

/* An <a> inside the site layout inherits a link colour; without this the label
   on a gradient button renders in link-blue on blue. */
.clmp-btn-primary,
.clmp-btn-primary:hover,
.clmp-btn-primary:focus,
.clmp-btn-primary:visited { color: #FFFFFF; }

.clmp-btn-ghost {
    border-color: var(--clmp-line-strong);
    background: var(--clmp-card);
    color: var(--clmp-ink);
}

.clmp-btn-soft {
    background: var(--clmp-brand-soft);
    color: var(--clmp-brand-ink);
}

.clmp-btn-link {
    padding: 6px 4px;
    color: var(--clmp-brand-ink);
    font-weight: 600;
    text-decoration: none;
}

.clmp-btn-lg { padding: 15px 30px; border-radius: calc(var(--clmp-r, 14px) + 2px); font-size: 1.02rem; }
.clmp-btn-sm { padding: 8px 14px; font-size: .85rem; }
.clmp-btn-block { width: 100%; }

@media (hover: hover) {
    .clmp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(54, 128, 237, .36); }
    .clmp-btn-ghost:hover   { border-color: var(--clmp-brand); background: var(--clmp-brand-soft2); color: var(--clmp-brand-ink); }
    .clmp-btn-soft:hover    { background: var(--clmp-brand-line); }
    .clmp-btn-link:hover    { text-decoration: underline; }
}

.clmp-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--aits-focus, rgba(54, 128, 237, .28));
}

/* Livewire's wire:loading target. The spinner replaces nothing — it sits
   beside the label so the button never changes width mid-click. */
.clmp-spin {
    display: inline-block;
    width: 15px; height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: clmp-spin .7s linear infinite;
}

@keyframes clmp-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   §6  Hero
   ========================================================================== */
.clmp-hero { padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px); }

.clmp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: clamp(28px, 5vw, 60px);
    align-items: center;
}

.clmp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    padding: 7px 15px 7px 8px;
    border: 1px solid var(--clmp-brand-line);
    border-radius: 999px;
    background: var(--clmp-brand-soft);
    color: var(--clmp-brand-ink);
    font-size: .84rem;
    font-weight: 700;
}

.clmp-hero-badge .d {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--clmp-brand-solid);
    color: #FFFFFF;
    font-size: .68rem;
}

.clmp-hero h1 {
    margin: 0 0 18px;
    color: var(--clmp-ink);
    font-size: clamp(2.1rem, 5.2vw, 3.5rem);
    font-weight: 850;
    line-height: 1.08;
    letter-spacing: -.03em;
}

.clmp-hero h1 .g {
    background: var(--clmp-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--clmp-brand);   /* fallback for engines without background-clip:text */
}

.clmp-hero-lede {
    max-width: 60ch;
    margin: 0 0 30px;
    color: var(--clmp-mut);
    font-size: clamp(1rem, 1.5vw, 1.14rem);
    line-height: 1.62;
}

.clmp-hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 34px; }

/* Trust badges ----------------------------------------------------------- */
.clmp-hero-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 12px;
}

.clmp-hb {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid var(--clmp-line);
    border-radius: var(--clmp-r);
    background: var(--clmp-card);
    box-shadow: var(--clmp-shadow-sm);
    transition: transform .28s var(--clmp-ease), box-shadow .28s var(--clmp-ease);
}

.clmp-hb .t { display: block; color: var(--clmp-ink); font-size: .88rem; font-weight: 700; line-height: 1.3; }
.clmp-hb .s { display: block; color: var(--clmp-faint); font-size: .78rem; }

@media (hover: hover) {
    .clmp-hb:hover { transform: translateY(-3px); box-shadow: var(--clmp-shadow); }
}

/* Illustration ----------------------------------------------------------- */
.clmp-hero-art { position: relative; }
.clmp-hero-art img { display: block; width: 100%; height: auto; border-radius: var(--clmp-r-xl); }

.clmp-lightonly { display: block; }
.clmp-darkonly  { display: none; }
body.theme-dark .clmp-lightonly { display: none; }
body.theme-dark .clmp-darkonly  { display: block; }

.clmp-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    border: 1px solid var(--clmp-line);
    border-radius: var(--clmp-r);
    background: var(--clmp-card);
    box-shadow: var(--clmp-shadow-lg);
    animation: clmp-bob 5.5s ease-in-out infinite;
}

.clmp-float .v { display: block; color: var(--clmp-ink); font-size: 1rem; font-weight: 800; line-height: 1.15; }
.clmp-float .l { display: block; color: var(--clmp-faint); font-size: .74rem; }

.clmp-float.is-1 { top: 8%;  left: -18px; }
.clmp-float.is-2 { bottom: 9%; right: -14px; animation-delay: -2.6s; }

@keyframes clmp-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-11px); }
}

/* ── The inline SVG scene (no hero image uploaded) ───────────────────────── */
.clmp-scene {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 22px 48px rgba(16, 24, 40, .14));
}

body.theme-dark .clmp-scene { filter: drop-shadow(0 22px 48px rgba(0, 0, 0, .55)); }

.clmp-scene .s-card   { fill: var(--clmp-card); stroke: var(--clmp-line-strong); }
.clmp-scene .s-soft   { fill: var(--clmp-brand-soft); }
.clmp-scene .s-line   { fill: var(--clmp-line); }
.clmp-scene .s-line-2 { fill: var(--clmp-line-strong); }
.clmp-scene .s-brand  { fill: var(--clmp-brand); }
.clmp-scene .s-brand-2{ fill: var(--clmp-brand-2); }
.clmp-scene .s-green  { fill: var(--clmp-green); }
.clmp-scene .s-white  { fill: #FFFFFF; }

/* ============================================================================
   §7  Sticky progress rail
   ========================================================================== */
.clmp-progress {
    position: sticky;
    top: var(--aits-hd-h, 76px);
    z-index: 30;
    margin-bottom: 28px;
    border: 1px solid var(--clmp-line);
    border-radius: var(--clmp-r-lg);
    background: var(--clmp-glass);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: var(--clmp-shadow);
}

@supports not (background: color-mix(in srgb, #fff 50%, transparent)) {
    .clmp-progress { background: var(--clmp-card); }
}

.clmp-progress-bar {
    height: 4px;
    border-radius: var(--clmp-r-lg) var(--clmp-r-lg) 0 0;
    background: var(--clmp-line-soft);
    overflow: hidden;
}

.clmp-progress-bar > i {
    display: block;
    height: 100%;
    background: var(--clmp-grad);
    transition: width .5s var(--clmp-ease);
}

.clmp-steps {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 12px 10px;
}

.clmp-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--clmp-r);
    background: transparent;
    text-align: left;
    min-width: 0;   /* or a long step title blows the grid track out on mobile */
}

.clmp-step .n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border: 2px solid var(--clmp-line-strong);
    border-radius: 50%;
    background: var(--clmp-card);
    color: var(--clmp-mut);
    font-size: .82rem;
    font-weight: 800;
    transition: all .3s var(--clmp-ease);
}

.clmp-step .lab { min-width: 0; }
.clmp-step .t { display: block; color: var(--clmp-mut); font-size: .86rem; font-weight: 700; line-height: 1.25;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clmp-step .s { display: block; color: var(--clmp-faint); font-size: .74rem;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.clmp-step.is-active { background: var(--clmp-brand-soft2); }
.clmp-step.is-active .n { border-color: var(--clmp-brand); background: var(--clmp-brand-solid); color: #FFFFFF; }
.clmp-step.is-active .t { color: var(--clmp-brand-ink); }

.clmp-step.is-done .n { border-color: var(--clmp-green); background: var(--clmp-green); color: #FFFFFF; }
.clmp-step.is-done .t { color: var(--clmp-ink); }

/* ============================================================================
   §8  Step 1 — search + listing picker
   ========================================================================== */
.clmp-search { position: relative; margin-bottom: 22px; }

.clmp-search input {
    width: 100%;
    padding: 17px 52px 17px 52px;
    border: 1.5px solid var(--clmp-line-strong);
    border-radius: var(--clmp-r-lg);
    background: var(--clmp-card);
    color: var(--clmp-ink);
    font-family: inherit;
    font-size: 1.02rem;
    transition: border-color .22s, box-shadow .22s;
}

.clmp-search input::placeholder { color: var(--clmp-faint); }

.clmp-search input:focus {
    outline: none;
    border-color: var(--clmp-brand);
    box-shadow: 0 0 0 4px var(--aits-focus, rgba(54, 128, 237, .28));
}

.clmp-search .ico {
    position: absolute;
    top: 50%; left: 20px;
    transform: translateY(-50%);
    color: var(--clmp-faint);
    font-size: 1.05rem;
    pointer-events: none;
}

.clmp-search .busy {
    position: absolute;
    top: 50%; right: 20px;
    transform: translateY(-50%);
    color: var(--clmp-brand);
}

/* Result cards ----------------------------------------------------------- */
.clmp-results { display: grid; gap: 12px; }

.clmp-listing {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 15px;
    align-items: center;
    padding: 15px 17px;
    border: 1.5px solid var(--clmp-line);
    border-radius: var(--clmp-r-lg);
    background: var(--clmp-card);
    transition: transform .26s var(--clmp-ease), border-color .26s var(--clmp-ease), box-shadow .26s var(--clmp-ease);
}

.clmp-listing.is-selected { border-color: var(--clmp-brand); background: var(--clmp-brand-soft2); }
.clmp-listing.is-taken    { opacity: .68; }

@media (hover: hover) {
    .clmp-listing:hover { transform: translateY(-2px); border-color: var(--clmp-brand-line); box-shadow: var(--clmp-shadow); }
}

.clmp-listing-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; height: 50px;
    border: 1px solid var(--clmp-line);
    border-radius: 13px;
    background: var(--clmp-card-3);
    overflow: hidden;
}

.clmp-listing-logo img { width: 100%; height: 100%; object-fit: cover; }
.clmp-listing-logo i   { color: var(--clmp-brand); font-size: 1.15rem; }

.clmp-listing-body { min-width: 0; }

.clmp-listing-body .t {
    display: block;
    margin-bottom: 3px;
    color: var(--clmp-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clmp-listing-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.clmp-listing-meta .c { color: var(--clmp-faint); font-size: .82rem; }

.clmp-listing-act { display: flex; align-items: center; gap: 8px; }

/* Empty state ------------------------------------------------------------ */
.clmp-empty {
    padding: 44px 24px;
    border: 1.5px dashed var(--clmp-line-strong);
    border-radius: var(--clmp-r-lg);
    background: var(--clmp-card-2);
    text-align: center;
}

.clmp-empty h4 { margin: 14px 0 8px; color: var(--clmp-ink); font-size: 1.08rem; font-weight: 700; }
.clmp-empty p  { max-width: 46ch; margin: 0 auto 18px; color: var(--clmp-mut); font-size: .94rem; }

/* Selected-listing banner ------------------------------------------------ */
.clmp-chosen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    padding: 15px 18px;
    border: 1.5px solid var(--clmp-brand-line);
    border-radius: var(--clmp-r-lg);
    background: var(--clmp-brand-soft2);
}

.clmp-chosen .lab { color: var(--clmp-brand-ink); font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.clmp-chosen .nm  { color: var(--clmp-ink); font-size: 1.05rem; font-weight: 800; }

/* ============================================================================
   §9  Forms
   ========================================================================== */
.clmp-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

.clmp-fld { min-width: 0; grid-column: span 12; }
.clmp-fld.is-half       { grid-column: span 6; }
.clmp-fld.is-third      { grid-column: span 4; }
.clmp-fld.is-two-thirds { grid-column: span 8; }

.clmp-fld > label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--clmp-ink);
    font-size: .9rem;
    font-weight: 700;
}

.clmp-fld > label .req  { color: var(--clmp-rose); }
.clmp-fld > label .opt  { color: var(--clmp-faint); font-size: .78rem; font-weight: 600; }
.clmp-fld > label i     { color: var(--clmp-brand); font-size: .86rem; }

.clmp-in {
    width: 100%;
    padding: 13px 15px;
    border: 1.5px solid var(--clmp-line-strong);
    border-radius: var(--clmp-r);
    background: var(--clmp-card);
    color: var(--clmp-ink);
    font-family: inherit;
    font-size: .97rem;
    line-height: 1.5;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
    -webkit-appearance: none;
    appearance: none;
}

.clmp-in::placeholder { color: var(--clmp-faint); }

.clmp-in:focus {
    outline: none;
    border-color: var(--clmp-brand);
    box-shadow: 0 0 0 4px var(--aits-focus, rgba(54, 128, 237, .28));
}

.clmp-in:disabled { background: var(--clmp-card-3); cursor: not-allowed; }

textarea.clmp-in { min-height: 118px; resize: vertical; }

select.clmp-in {
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}

/* Validation states ------------------------------------------------------ */
.clmp-in.is-bad {
    border-color: var(--clmp-rose);
    background: var(--clmp-rose-soft);
}

.clmp-in.is-bad:focus { box-shadow: 0 0 0 4px rgba(224, 49, 49, .22); }
.clmp-in.is-good      { border-color: var(--clmp-green); }

.clmp-err {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 7px;
    color: var(--clmp-rose-ink);
    font-size: .84rem;
    font-weight: 600;
}

.clmp-hint { margin-top: 7px; color: var(--clmp-faint); font-size: .83rem; }

.clmp-count { float: right; color: var(--clmp-faint); font-size: .78rem; font-variant-numeric: tabular-nums; }
.clmp-count.is-over { color: var(--clmp-rose-ink); font-weight: 700; }

/* Checkbox --------------------------------------------------------------- */
.clmp-chk {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 17px;
    border: 1.5px solid var(--clmp-line);
    border-radius: var(--clmp-r);
    background: var(--clmp-card-2);
    cursor: pointer;
    transition: border-color .22s, background-color .22s;
}

/* The box itself is the <input>. Styling `.clmp-chk` as if it were the box is
   the mistake that makes the label unclickable in the .crs- kit. */
.clmp-chk input[type="checkbox"] {
    flex: 0 0 auto;
    width: 19px; height: 19px;
    margin: 2px 0 0;
    accent-color: var(--clmp-brand);
    cursor: pointer;
}

.clmp-chk .txt  { color: var(--clmp-ink); font-size: .93rem; font-weight: 600; line-height: 1.45; }
.clmp-chk .help { display: block; margin-top: 4px; color: var(--clmp-faint); font-size: .82rem; font-weight: 400; }
.clmp-chk.is-bad { border-color: var(--clmp-rose); background: var(--clmp-rose-soft); }

@media (hover: hover) {
    .clmp-chk:hover { border-color: var(--clmp-brand-line); background: var(--clmp-brand-soft2); }
}

/* Upload zone ------------------------------------------------------------ */
.clmp-drop {
    position: relative;
    padding: 26px 20px;
    border: 1.5px dashed var(--clmp-line-strong);
    border-radius: var(--clmp-r);
    background: var(--clmp-card-2);
    text-align: center;
    transition: border-color .22s, background-color .22s;
}

.clmp-drop.is-drag { border-color: var(--clmp-brand); background: var(--clmp-brand-soft2); }
.clmp-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.clmp-drop .t { display: block; margin-top: 10px; color: var(--clmp-ink); font-size: .93rem; font-weight: 700; }
.clmp-drop .s { display: block; margin-top: 4px; color: var(--clmp-faint); font-size: .81rem; }

.clmp-files { display: grid; gap: 8px; margin-top: 12px; }

.clmp-file {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border: 1px solid var(--clmp-line);
    border-radius: var(--clmp-r-sm);
    background: var(--clmp-card);
}

.clmp-file .n { flex: 1 1 auto; min-width: 0; color: var(--clmp-ink); font-size: .88rem; font-weight: 600;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clmp-file .z { color: var(--clmp-faint); font-size: .79rem; }

.clmp-file-x {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border: 0;
    border-radius: 8px;
    background: var(--clmp-rose-soft);
    color: var(--clmp-rose-ink);
    cursor: pointer;
}

/* Form footer ------------------------------------------------------------ */
.clmp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--clmp-line);
}

.clmp-actions .grow { flex: 1 1 auto; }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and a screen reader is told to ignore it via aria-hidden. */
.clmp-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* ============================================================================
   §10  Step 3 — OTP
   ========================================================================== */
.clmp-otp-wrap { max-width: 520px; margin: 0 auto; text-align: center; }

.clmp-sent {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 26px;
    padding: 15px 18px;
    border: 1px solid color-mix(in srgb, var(--clmp-green) 34%, transparent);
    border-radius: var(--clmp-r);
    background: var(--clmp-green-soft);
    text-align: left;
}

@supports not (border-color: color-mix(in srgb, #fff 50%, transparent)) {
    .clmp-sent { border-color: var(--clmp-green); }
}

.clmp-sent .t { display: block; color: var(--clmp-green-ink); font-size: .96rem; font-weight: 800; }
.clmp-sent .s { display: block; color: var(--clmp-txt); font-size: .87rem; }
.clmp-sent .em { font-weight: 700; color: var(--clmp-ink); }

.clmp-otp {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 26px 0 20px;
}

.clmp-otp input {
    width: 58px;
    height: 68px;
    padding: 0;
    border: 2px solid var(--clmp-line-strong);
    border-radius: var(--clmp-r);
    background: var(--clmp-card);
    color: var(--clmp-ink);
    font-family: inherit;
    font-size: 1.7rem;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: border-color .18s, box-shadow .18s, transform .18s;
    -webkit-appearance: none;
    appearance: none;
}

/* Number spinners in a 58px box overlap the digit itself. */
.clmp-otp input::-webkit-outer-spin-button,
.clmp-otp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.clmp-otp input:focus {
    outline: none;
    border-color: var(--clmp-brand);
    box-shadow: 0 0 0 4px var(--aits-focus, rgba(54, 128, 237, .28));
    transform: translateY(-2px);
}

.clmp-otp input.is-filled { border-color: var(--clmp-brand); background: var(--clmp-brand-soft2); }
.clmp-otp.is-bad input    { border-color: var(--clmp-rose); }
.clmp-otp.is-bad          { animation: clmp-shake .4s; }

@keyframes clmp-shake {
    0%, 100%      { transform: translateX(0); }
    20%, 60%      { transform: translateX(-7px); }
    40%, 80%      { transform: translateX(7px); }
}

.clmp-otp-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    margin-top: 18px;
    color: var(--clmp-faint);
    font-size: .86rem;
}

.clmp-otp-meta b { color: var(--clmp-ink); font-variant-numeric: tabular-nums; }

.clmp-otp-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

/* Change-email inline panel */
.clmp-change {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid var(--clmp-line);
    border-radius: var(--clmp-r);
    background: var(--clmp-card-2);
    text-align: left;
}

/* ============================================================================
   §11  Step 4 — review timeline
   ========================================================================== */
.clmp-done-hero { max-width: 640px; margin: 0 auto 34px; text-align: center; }

.clmp-done-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px; height: 92px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--clmp-green-soft);
    color: var(--clmp-green-ink);
    font-size: 2.5rem;
    animation: clmp-pop .55s var(--clmp-ease) both;
}

@keyframes clmp-pop {
    0%   { transform: scale(.6); opacity: 0; }
    60%  { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

.clmp-done-hero h2 { margin: 0 0 12px; color: var(--clmp-ink); font-size: clamp(1.5rem, 3.4vw, 2.05rem); font-weight: 800; letter-spacing: -.02em; }
.clmp-done-hero p  { margin: 0; color: var(--clmp-mut); font-size: 1.02rem; }

.clmp-timeline { display: grid; gap: 0; margin: 0 auto; max-width: 560px; }

.clmp-tl {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    padding-bottom: 26px;
}

/* The connector. Drawn on the item, not between them, so the last row can
   simply not draw one rather than needing a different class. */
.clmp-tl:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 40px; left: 19px;
    width: 2px;
    height: calc(100% - 40px);
    background: var(--clmp-line-strong);
}

.clmp-tl.is-done:not(:last-child)::before { background: var(--clmp-green); }

.clmp-tl .dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: 2px solid var(--clmp-line-strong);
    border-radius: 50%;
    background: var(--clmp-card);
    color: var(--clmp-mut);
    font-size: .92rem;
}

.clmp-tl.is-done .dot   { border-color: var(--clmp-green); background: var(--clmp-green); color: #FFFFFF; }
.clmp-tl.is-active .dot { border-color: var(--clmp-amber); background: var(--clmp-amber-soft); color: var(--clmp-amber-ink); }
.clmp-tl.is-failed .dot { border-color: var(--clmp-rose); background: var(--clmp-rose-soft); color: var(--clmp-rose-ink); }

.clmp-tl .t { display: block; margin-top: 8px; color: var(--clmp-ink); font-size: .99rem; font-weight: 700; }
.clmp-tl .s { display: block; margin-top: 3px; color: var(--clmp-mut); font-size: .88rem; }

.clmp-tl.is-pending .t { color: var(--clmp-mut); }

/* The pulsing "in progress" ring */
.clmp-tl.is-active .dot { animation: clmp-pulse 2.1s ease-in-out infinite; }

@keyframes clmp-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, .38); }
    50%      { box-shadow: 0 0 0 8px rgba(217, 119, 6, 0); }
}

/* Reference / meta strip -------------------------------------------------- */
.clmp-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 14px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--clmp-line);
}

.clmp-meta .k { display: block; color: var(--clmp-faint); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.clmp-meta .v { display: block; margin-top: 5px; color: var(--clmp-ink); font-size: .97rem; font-weight: 700; }

/* ============================================================================
   §12  Card grids — benefits / why / security
   ========================================================================== */
.clmp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 18px;
}

.clmp-tile {
    padding: 24px 22px;
    border: 1px solid var(--clmp-line);
    border-radius: var(--clmp-r-lg);
    background: var(--clmp-card);
    box-shadow: var(--clmp-shadow-sm);
    transition: transform .3s var(--clmp-ease), box-shadow .3s var(--clmp-ease), border-color .3s var(--clmp-ease);
}

.clmp-tile h3 { margin: 16px 0 8px; color: var(--clmp-ink); font-size: 1.03rem; font-weight: 750; line-height: 1.35; }
.clmp-tile p  { margin: 0; color: var(--clmp-mut); font-size: .92rem; line-height: 1.6; }

@media (hover: hover) {
    .clmp-tile:hover {
        transform: translateY(-5px);
        border-color: var(--clmp-brand-line);
        box-shadow: var(--clmp-shadow-lg);
    }
}

/* The security band gets a subtle top accent so it reads as a distinct group
   without needing a different card shape. */
.clmp-tile.is-secure { position: relative; overflow: hidden; }

.clmp-tile.is-secure::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--clmp-grad);
    opacity: 0;
    transition: opacity .3s var(--clmp-ease);
}

@media (hover: hover) {
    .clmp-tile.is-secure:hover::before { opacity: 1; }
}

/* Compact "why" list variant --------------------------------------------- */
.clmp-why {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
    gap: 14px;
}

.clmp-why-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 17px 19px;
    border: 1px solid var(--clmp-line);
    border-radius: var(--clmp-r);
    background: var(--clmp-card);
    transition: transform .26s var(--clmp-ease), border-color .26s var(--clmp-ease);
}

.clmp-why-row .t { display: block; margin-bottom: 4px; color: var(--clmp-ink); font-size: .97rem; font-weight: 700; }
.clmp-why-row .s { display: block; color: var(--clmp-mut); font-size: .88rem; line-height: 1.55; }

@media (hover: hover) {
    .clmp-why-row:hover { transform: translateX(4px); border-color: var(--clmp-brand-line); }
}

/* ============================================================================
   §13  FAQ
   ========================================================================== */
.clmp-faq { max-width: 820px; margin: 0 auto; }

.clmp-faq-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.clmp-chip {
    padding: 8px 15px;
    border: 1px solid var(--clmp-line-strong);
    border-radius: 999px;
    background: var(--clmp-card);
    color: var(--clmp-txt);
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .22s var(--clmp-ease);
}

.clmp-chip.is-on { border-color: var(--clmp-brand); background: var(--clmp-brand-soft); color: var(--clmp-brand-ink); }

@media (hover: hover) {
    .clmp-chip:hover { border-color: var(--clmp-brand); color: var(--clmp-brand-ink); }
}

.clmp-q {
    margin-bottom: 12px;
    border: 1px solid var(--clmp-line);
    border-radius: var(--clmp-r);
    background: var(--clmp-card);
    overflow: hidden;
    transition: border-color .26s var(--clmp-ease), box-shadow .26s var(--clmp-ease);
}

.clmp-q[open] { border-color: var(--clmp-brand-line); box-shadow: var(--clmp-shadow); }

.clmp-q > summary {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 19px;
    color: var(--clmp-ink);
    font-size: .99rem;
    font-weight: 700;
    line-height: 1.45;
    cursor: pointer;
    list-style: none;
}

.clmp-q > summary::-webkit-details-marker { display: none; }

.clmp-q > summary .caret {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--clmp-brand);
    transition: transform .28s var(--clmp-ease);
}

.clmp-q[open] > summary .caret { transform: rotate(180deg); }

.clmp-q-body {
    padding: 0 19px 19px 51px;
    color: var(--clmp-txt);
    font-size: .93rem;
    line-height: 1.68;
}

.clmp-q-body p:last-child { margin-bottom: 0; }
.clmp-q-body strong       { color: var(--clmp-ink); }

.clmp-q-body a { color: var(--clmp-brand-ink); text-decoration: underline; }

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

/* ============================================================================
   §14  CTA band
   ========================================================================== */
.clmp-cta {
    position: relative;
    padding: clamp(38px, 6vw, 62px) clamp(24px, 5vw, 56px);
    border-radius: var(--clmp-r-xl);
    background: var(--clmp-grad);
    color: #FFFFFF;
    text-align: center;
    overflow: hidden;
}

.clmp-cta::after {
    content: "";
    position: absolute;
    inset: -40% -10% auto auto;
    width: 460px; height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 66%);
    pointer-events: none;
}

.clmp-cta h2 { position: relative; z-index: 1; margin: 0 0 12px; color: #FFFFFF;
               font-size: clamp(1.5rem, 3.6vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; }

.clmp-cta p  { position: relative; z-index: 1; max-width: 58ch; margin: 0 auto 26px;
               color: rgba(255, 255, 255, .9); font-size: 1.02rem; }

.clmp-cta-acts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 13px; }

.clmp-cta .clmp-btn-primary {
    background: #FFFFFF;
    color: var(--clmp-brand-ink);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

.clmp-cta .clmp-btn-primary:visited { color: var(--clmp-brand-ink); }

.clmp-cta .clmp-btn-ghost,
.clmp-cta .clmp-btn-ghost:visited {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .12);
    color: #FFFFFF;
}

@media (hover: hover) {
    .clmp-cta .clmp-btn-ghost:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .22); color: #FFFFFF; }
}

/* ============================================================================
   §15  Alerts
   ========================================================================== */
.clmp-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding: 14px 17px;
    border: 1px solid var(--clmp-line);
    border-radius: var(--clmp-r);
    background: var(--clmp-card-2);
    color: var(--clmp-txt);
    font-size: .92rem;
    line-height: 1.55;
}

.clmp-alert i { flex: 0 0 auto; margin-top: 2px; font-size: 1rem; }

.clmp-alert.is-error   { border-color: var(--clmp-rose);   background: var(--clmp-rose-soft);   color: var(--clmp-rose-ink); }
.clmp-alert.is-ok      { border-color: var(--clmp-green);  background: var(--clmp-green-soft);  color: var(--clmp-green-ink); }
.clmp-alert.is-warn    { border-color: var(--clmp-amber);  background: var(--clmp-amber-soft);  color: var(--clmp-amber-ink); }
.clmp-alert.is-info    { border-color: var(--clmp-brand);  background: var(--clmp-brand-soft);  color: var(--clmp-brand-ink); }

/* ============================================================================
   §16  Status page + my-claims
   ========================================================================== */
.clmp-status-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}

.clmp-status-head h1 { margin: 0; color: var(--clmp-ink); font-size: clamp(1.5rem, 3.4vw, 2.05rem); font-weight: 800; letter-spacing: -.02em; }

.clmp-claim-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 17px 19px;
    border: 1px solid var(--clmp-line);
    border-radius: var(--clmp-r-lg);
    background: var(--clmp-card);
    margin-bottom: 12px;
    transition: border-color .26s var(--clmp-ease), box-shadow .26s var(--clmp-ease);
}

.clmp-claim-row .t { display: block; color: var(--clmp-ink); font-size: 1.01rem; font-weight: 700; }
.clmp-claim-row .s { display: block; margin-top: 4px; color: var(--clmp-faint); font-size: .85rem; }

@media (hover: hover) {
    .clmp-claim-row:hover { border-color: var(--clmp-brand-line); box-shadow: var(--clmp-shadow); }
}

.clmp-note {
    padding: 14px 17px;
    border-left: 3px solid var(--clmp-brand);
    border-radius: 0 var(--clmp-r-sm) var(--clmp-r-sm) 0;
    background: var(--clmp-brand-soft2);
    margin-bottom: 10px;
}

.clmp-note .who { display: block; margin-bottom: 5px; color: var(--clmp-brand-ink); font-size: .8rem; font-weight: 700; }
.clmp-note .bod { color: var(--clmp-txt); font-size: .92rem; line-height: 1.6; }

/* ============================================================================
   §17  Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .clmp-hero-grid   { grid-template-columns: 1fr; }
    .clmp-hero-art    { order: -1; max-width: 520px; margin-inline: auto; }
    .clmp-float.is-1  { left: 0; }
    .clmp-float.is-2  { right: 0; }
}

@media (max-width: 860px) {
    .clmp-fld.is-half,
    .clmp-fld.is-third,
    .clmp-fld.is-two-thirds { grid-column: span 12; }

    /* The step rail becomes a horizontal scroller rather than four crushed
       columns. Labels are hidden below the active one so the numbers stay
       legible at any width. */
    .clmp-steps {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .clmp-steps::-webkit-scrollbar { display: none; }
    .clmp-step .s { display: none; }
}

@media (max-width: 640px) {
    .clmp-sec { padding: 46px 0; }

    .clmp-hero { padding-top: 34px; }
    .clmp-hero-cta .clmp-btn { flex: 1 1 100%; }

    .clmp-listing { grid-template-columns: auto minmax(0, 1fr); }
    .clmp-listing-act { grid-column: 1 / -1; justify-content: flex-end; }

    /* 6 × 58px + gaps overflows a 360px viewport; shrink rather than scroll —
       a horizontally scrolling OTP row is unusable one-handed. */
    .clmp-otp { gap: 7px; }
    .clmp-otp input { width: 46px; height: 58px; font-size: 1.4rem; }

    .clmp-q-body { padding-left: 19px; }
    .clmp-actions .clmp-btn { flex: 1 1 100%; }
    .clmp-progress { border-radius: var(--clmp-r); }
}

@media (max-width: 380px) {
    .clmp-otp input { width: 40px; height: 52px; font-size: 1.22rem; }
}

/* ============================================================================
   §18  Motion + print
   ========================================================================== */
.clmp.no-anim *,
.clmp.no-anim *::before,
.clmp.no-anim *::after {
    animation: none !important;
    transition: none !important;
}

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

@media print {
    .clmp.is-mesh::before,
    .clmp.is-mesh::after,
    .clmp-progress,
    .clmp-cta,
    .clmp-hero-art { display: none !important; }

    .clmp-card,
    .clmp-panel { box-shadow: none !important; border: 1px solid #CCC !important; }
}