/* IntakeDrive — site chrome. Editorial, gallery-grade aesthetic for high-end auction sellers:
   warm near-black ink, ivory paper, a single restrained brass accent, Newsreader display + Inter UI,
   flat hairline surfaces, generous whitespace. (Document themes are styled separately in BuildThemes.) */
:root {
    --id-ink: #1A1613;        /* warm near-black */
    --id-ink-2: #2C2620;
    --id-accent: #9A6A3C;     /* muted cognac / brass */
    --id-accent-2: #B5824F;
    --id-paper: #FAF7F1;      /* warm ivory */
    --id-card: #FFFFFF;
    --id-line: #E7E0D4;       /* warm hairline */
    --id-muted: #6B6453;      /* warm gray — darkened to clear WCAG AA 4.5:1 on ivory */
    --id-radius: 7px;
    --id-shadow: 0 1px 2px rgba(26,22,19,.03), 0 12px 28px rgba(26,22,19,.05);

    /* ---- Dark "gallery" canvas (public marketing + auth pages: body.id-dark) ---- */
    --id-canvas: #0D0C0B;          /* deep warm near-black — public page bg */
    --id-canvas-2: #131110;        /* slightly raised band */
    --id-surface-dark: #17140F;    /* elevated dark card/surface */
    --id-surface-dark-2: #211C16;  /* hover / nested dark surface */
    --id-on-dark: #F5F1EA;         /* warm off-white text on dark */
    --id-on-dark-muted: #A9A296;   /* muted warm gray on dark (AA on canvas) */
    --id-line-dark: rgba(255,255,255,.11);  /* hairline on dark */
    --id-accent-bright: #C89456;   /* brass brightened for contrast on dark */
    --id-radius-lg: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--id-ink);
    background: var(--id-paper);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    letter-spacing: .003em;
    /* Safety net against stray horizontal scroll on mobile. `clip` (not `hidden`)
       preserves the sticky nav since it doesn't create a scroll container. */
    overflow-x: clip;
}
main { flex: 1 0 auto; }

h1, h2, h3, .id-serif {
    font-family: 'Newsreader', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--id-ink);
}

a { color: var(--id-ink); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--id-accent); }

.id-eyebrow {
    text-transform: uppercase;
    letter-spacing: .24em;
    font-size: .68rem;
    font-weight: 600;
    color: #8A5E34;   /* darkened brass — clears WCAG AA (4.5:1) on ivory for small text */
    font-family: 'Inter', sans-serif;
}
.id-rule { height: 1px; background: var(--id-line); border: 0; margin: 0; }

/* ---- Nav: warm black, gallery-quiet ---- */
.id-nav {
    background: var(--id-ink);
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: .85rem 0;
}
.id-nav .nav-link {
    color: rgba(255,255,255,.72);
    font-weight: 500;
    font-size: .92rem;
    letter-spacing: .01em;
    padding-left: .9rem; padding-right: .9rem;
}
.id-nav .nav-link:hover { color: #fff; }
.id-brand {
    color: #fff !important;
    font-family: 'Newsreader', serif;
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: .01em;
}
.id-brand-mark {
    color: var(--id-accent-2);
    font-weight: 600;
}

/* ---- Buttons: refined, low radius, quiet ---- */
.btn { border-radius: 5px; font-weight: 600; letter-spacing: .01em; padding: .5rem 1.15rem; }
.btn-lg { padding: .7rem 1.6rem; }
.btn-accent { background: var(--id-accent); border-color: var(--id-accent); color: #fff; }
.btn-accent:hover, .btn-accent:focus { background: var(--id-accent-2); border-color: var(--id-accent-2); color: #fff; }
.btn-ink { background: var(--id-ink); border-color: var(--id-ink); color: #fff; }
.btn-ink:hover, .btn-ink:focus { background: var(--id-ink-2); border-color: var(--id-ink-2); color: #fff; }
.btn-outline-dark { border-color: var(--id-ink); color: var(--id-ink); }
.btn-outline-dark:hover { background: var(--id-ink); color: #fff; }

/* ---- Hero: full-bleed car photo, dark scrim, gallery air ---- */
.id-hero {
    position: relative;
    color: var(--id-on-dark);
    background: var(--id-canvas);
    border-bottom: 1px solid var(--id-line-dark);
    overflow: hidden;
}
/* Layered scrim + photo in one background so the page still looks finished
   if the image is ever missing (the gradients alone render a clean dark hero). */
.id-hero__bg {
    position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(96deg, rgba(13,12,11,.94) 0%, rgba(13,12,11,.78) 34%, rgba(13,12,11,.34) 66%, rgba(13,12,11,.62) 100%),
        linear-gradient(0deg, rgba(13,12,11,.9) 0%, rgba(13,12,11,0) 42%),
        radial-gradient(1100px 460px at 84% -10%, rgba(200,148,86,.22), transparent 60%),
        url('/img/hero-car.jpg');
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
}
@media (max-width: 720px) {
    .id-hero__bg {
        background-image:
            linear-gradient(0deg, rgba(13,12,11,.96) 4%, rgba(13,12,11,.45) 60%, rgba(13,12,11,.7) 100%),
            url('/img/hero-car-sm.jpg');
        background-position: center 70%;
    }
}
.id-hero .container { position: relative; z-index: 1; }
.id-hero__content {
    max-width: 46rem;
    padding: clamp(4.5rem, 9vw, 7.5rem) 0 clamp(4rem, 8vw, 6.5rem);
}
@media (max-width: 900px) { .id-hero__content { padding: 5rem 0 4rem; } }
.id-hero .id-eyebrow { color: var(--id-accent-bright); }
.id-hero h1 {
    color: #fff;
    font-size: clamp(2.5rem, 5.6vw, 4.1rem);
    line-height: 1.03;
    letter-spacing: -.02em;
    max-width: 15ch;
}
.id-hero .lead { color: rgba(255,255,255,.82); max-width: 42rem; font-size: 1.12rem; line-height: 1.65; }
.id-hero__link, .id-quiet-link { color: rgba(255,255,255,.72); text-decoration: underline; text-underline-offset: 2px; }
.id-hero__link:hover, .id-quiet-link:hover { color: #fff; }

.btn-outline-light { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--id-ink); border-color: #fff; }

/* ---- Cards: flat, hairline, airy ---- */
.id-card {
    background: var(--id-card);
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    box-shadow: var(--id-shadow);
    padding: 1.75rem;
    /* wide data tables scroll inside the card on small screens instead of the whole page */
    overflow-x: auto;
}
.id-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem;
    border-radius: 50%;
    border: 1px solid var(--id-ink);
    background: transparent;
    color: var(--id-ink);
    font-family: 'Newsreader', serif;
    font-weight: 600; font-size: 1rem;
}
.text-muted { color: var(--id-muted) !important; }

/* ---- Pricing ---- */
.id-price { font-family: 'Newsreader', serif; font-size: 2.5rem; font-weight: 600; color: var(--id-ink); }
.id-price small { font-size: .85rem; color: var(--id-muted); font-family: 'Inter', sans-serif; font-weight: 500; }
.id-plan ul { list-style: none; padding: 0; margin: .5rem 0 0; }
.id-plan ul li { padding: .35rem 0; border-bottom: 1px solid var(--id-line); }
.id-plan ul li:last-child { border-bottom: 0; }
.id-plan.featured { border-color: var(--id-ink); box-shadow: 0 14px 36px rgba(26,22,19,.12); }
.id-badge-accent {
    background: var(--id-ink); color: #fff; font-size: .62rem; font-weight: 700;
    padding: .25rem .6rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .14em;
}

/* ---- Footer ---- */
.id-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--id-line-dark);
    padding: 2.25rem 0;
    color: var(--id-on-dark-muted);
    font-size: .85rem;
    background: var(--id-canvas);
    letter-spacing: .02em;
}
.id-footer a { color: var(--id-on-dark-muted); }
.id-footer a:hover { color: var(--id-accent-bright); }
.id-footer .text-muted { color: rgba(255,255,255,.6) !important; }  /* >= 4.5:1 on canvas */

/* ---- Forms ---- */
.form-control, .form-select { border-color: var(--id-line); border-radius: 5px; }
.form-control:focus, .form-select:focus {
    border-color: var(--id-accent);
    box-shadow: 0 0 0 .2rem rgba(154,106,60,.15);
}
.id-auth-card { max-width: 27rem; margin: 4.5rem auto; }

/* ---- Tables (admin etc.) ---- */
.table { color: var(--id-ink); }
.table > :not(caption) > * > * { border-bottom-color: var(--id-line); }

/* ---- Accessibility: skip link + visible keyboard focus ---- */
.id-skip {
    position: absolute;
    left: 8px;
    top: -48px;
    z-index: 2000;
    background: var(--id-ink);
    color: #fff;
    padding: .55rem 1rem;
    border-radius: var(--id-radius);
    text-decoration: none;
    transition: top .15s ease;
}
.id-skip:focus { top: 8px; color: #fff; outline: 2px solid var(--id-accent-2); }
main:focus { outline: none; }

/* A clearly visible focus ring for keyboard users across interactive elements.
   :focus-visible keeps it off for mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.btn-check:focus-visible + .btn,
.btn-check:focus-visible + label {
    outline: 3px solid var(--id-accent-2);
    outline-offset: 2px;
    box-shadow: none;
}

/* =====================================================================
   MARKETING / DARK GALLERY SYSTEM
   Applied to public + auth pages via <body class="id-dark">. Logged-in
   app pages keep the default light canvas and white working surfaces;
   they still inherit the refreshed nav, footer, buttons, type, accent.
   ===================================================================== */

/* White cards stay self-contained (ink text) even on a dark page, so the
   auth card, sheet mockups, and pricing cards never inherit on-dark colors.
   The body.id-dark .id-card selectors below intentionally out-specify the
   body.id-dark blanket flips (h1/h2/h3, p, a) so card text never goes light. */
.id-card { color: var(--id-ink); }
.id-card h1, .id-card h2, .id-card h3 { color: var(--id-ink); }
.id-card .text-muted { color: var(--id-muted) !important; }
body.id-dark .id-card,
body.id-dark .id-card h1, body.id-dark .id-card h2, body.id-dark .id-card h3,
body.id-dark .id-card p { color: var(--id-ink); }
body.id-dark .id-card .text-muted { color: var(--id-muted) !important; }
body.id-dark .id-card a:not(.btn) { color: var(--id-ink); }
body.id-dark .id-card a:not(.btn):hover { color: var(--id-accent); }
body.id-dark .id-card .id-eyebrow { color: #8A5E34; }  /* darker brass: AA on white cards */

/* ---- Dark canvas ---- */
body.id-dark { background: var(--id-canvas); color: var(--id-on-dark); }
body.id-dark h1, body.id-dark h2, body.id-dark h3 { color: var(--id-on-dark); }
body.id-dark p { color: var(--id-on-dark); }
body.id-dark a:not(.btn) { color: var(--id-on-dark); }
body.id-dark a:not(.btn):hover { color: var(--id-accent-bright); }
body.id-dark .text-muted { color: var(--id-on-dark-muted) !important; }
body.id-dark .id-eyebrow { color: var(--id-accent-bright); }  /* ~7:1 on the dark canvas */
body.id-dark .id-rule { background: var(--id-line-dark); }
body.id-dark hr { border-color: var(--id-line-dark); opacity: 1; }

/* ---- Section rhythm + display type ---- */
/* padding-block (not the shorthand) so a combined "container id-section" keeps Bootstrap's inline padding. */
.id-section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.id-section-tight { padding-block: clamp(2.25rem, 4vw, 3.25rem); }
.id-band { background: var(--id-canvas-2); border-top: 1px solid var(--id-line-dark); border-bottom: 1px solid var(--id-line-dark); }
.id-band-surface { background: var(--id-surface-dark); border-top: 1px solid var(--id-line-dark); border-bottom: 1px solid var(--id-line-dark); }
.id-display { font-size: clamp(2.3rem, 4.6vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em; }
.id-h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -.015em; }
.id-lead-lg { font-size: 1.18rem; line-height: 1.6; }
.id-measure { max-width: 42rem; }
.id-measure-sm { max-width: 34rem; }

/* ---- Dark cards (feature/step on the canvas) ---- */
.id-card-dark {
    background: var(--id-surface-dark);
    border: 1px solid var(--id-line-dark);
    border-radius: var(--id-radius-lg);
    padding: 1.9rem;
    height: 100%;
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.id-card-dark h3 { color: var(--id-on-dark); }
.id-card-dark p { color: var(--id-on-dark-muted); }
.id-card-dark:hover { border-color: rgba(200,148,86,.5); background: var(--id-surface-dark-2); }
body.id-dark .id-step-num,
.id-card-dark .id-step-num { border-color: var(--id-accent-bright); color: var(--id-accent-bright); }

/* ---- Full-bleed image feature/CTA band (graceful gradient fallback) ---- */
.id-feature-bleed { position: relative; color: #fff; overflow: hidden; background: var(--id-canvas); }
.id-feature-bleed__bg {
    position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(95deg, rgba(13,12,11,.92) 0%, rgba(13,12,11,.74) 42%, rgba(13,12,11,.45) 100%),
        url('/img/band-detail.jpg');
    background-size: cover; background-position: center 45%; background-repeat: no-repeat;
}
.id-feature-bleed .container { position: relative; z-index: 1; }
.id-feature-bleed h2, .id-feature-bleed p { color: #fff; }

/* ---- "Who it's for" wordmark strip (text only — no third-party logos/scripts) ---- */
.id-logos { display: flex; flex-wrap: wrap; gap: 1.4rem 2.6rem; align-items: center; }
.id-logos span {
    font-family: 'Newsreader', serif; font-weight: 600; font-size: 1.05rem;
    color: var(--id-on-dark-muted); letter-spacing: .01em; white-space: nowrap;
}

/* ---- Full-bleed "range of cars" band (replaces the cropped gallery tiles) ---- */
.id-feature-bleed--cars { border-top: 1px solid var(--id-line-dark); border-bottom: 1px solid var(--id-line-dark); }
.id-feature-bleed--cars .id-feature-bleed__bg {
    background-image:
        linear-gradient(180deg, rgba(13,12,11,.5) 0%, rgba(13,12,11,.72) 100%),
        url('/img/showcase-1.jpg');
    background-position: center 42%;
}
.id-feature-bleed--cars h2 { text-shadow: 0 2px 24px rgba(0,0,0,.5); }

/* ---- CTA band ---- */
.id-cta-band { background: linear-gradient(180deg, var(--id-canvas-2), var(--id-canvas)); border-top: 1px solid var(--id-line-dark); }

/* ---- FAQ (native <details>, no JS) ---- */
.id-faq details {
    border-bottom: 1px solid var(--id-line-dark);
    padding: 1.1rem 0;
}
.id-faq summary {
    cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem;
    font-family: 'Newsreader', serif; font-weight: 600; font-size: 1.12rem; color: var(--id-on-dark);
}
.id-faq summary::-webkit-details-marker { display: none; }
.id-faq summary::after { content: '+'; color: var(--id-accent-bright); font-family: 'Inter', sans-serif; font-weight: 400; font-size: 1.5rem; line-height: 1; transition: transform .18s ease; }
.id-faq details[open] summary::after { transform: rotate(45deg); }
.id-faq details p { color: var(--id-on-dark-muted); margin: .8rem 0 0; max-width: 54rem; }

/* ---- Pricing on the dark canvas: white cards already read premium;
        just lift the featured plan with the brass accent + glow. ---- */
body.id-dark .id-plan.featured { border-color: var(--id-accent); box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(200,148,86,.25); }
body.id-dark .id-badge-accent { background: var(--id-accent); }

/* =====================================================================
   SHEET MOCKUPS — mirror the real generated documents (default "editorial"
   theme): accent seller name + accent rule, serif title, uppercase
   VIN, uppercase section headers with hairline underlines, label/value specs,
   right-aligned amounts, category chips, and the "Driven by IntakeDrive"
   attribution over an accent footer rule. Self-hosted, no external assets.
   --m-primary / --m-accent stand in for a seller's chosen brand colors.
   ===================================================================== */
.id-mock {
    --m-primary: #16130F;
    --m-accent: #9A6A3C;
    position: relative;
    background: #fff; color: #1A1A1A;
    border: 1px solid var(--id-line); border-radius: 6px;
    box-shadow: 0 30px 70px rgba(0,0,0,.5);
    padding: 1.1rem 1.15rem 1rem;
    min-height: 24rem;
    display: flex; flex-direction: column; overflow: hidden;
    font-size: 11px;
}
.id-hero__art .id-mock { transform: rotate(-1.4deg); }
.id-mock > *:not(.id-mock-wm) { position: relative; z-index: 1; }

/* faint brand watermark, mirroring the real sheet background */
.id-mock-wm { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; }
.id-mock-wm span { font-family: 'Newsreader', serif; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 2.4rem; line-height: 1; color: var(--m-accent); opacity: .07; transform: rotate(-24deg); white-space: nowrap; }

.id-mock-hd { border-bottom: 2px solid var(--m-accent); padding-bottom: .42rem; }
.id-mock-seller { color: var(--m-accent); font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; line-height: 1.1; }
.id-mock-sub { color: #667085; font-size: .58rem; margin-top: .14rem; }
.id-mock-title { font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: 1.18rem; letter-spacing: -.02em; line-height: 1.06; margin: .55rem 0 .12rem; color: var(--m-primary); }
.id-mock-vin { font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: #98a2b3; }

.id-mock-h { font-size: .58rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--m-primary); border-bottom: 1px solid #eef0f3; padding-bottom: .25rem; margin: .75rem 0 .32rem; }

.id-mock-kv { width: 100%; border-collapse: collapse; }
.id-mock-kv th { text-align: left; font-weight: 500; width: 44%; color: #667085; padding: .16rem 0; font-size: .66rem; }
.id-mock-kv td { padding: .16rem 0; font-size: .66rem; font-weight: 600; }

.id-mock-price { width: 100%; border-collapse: collapse; }
.id-mock-price td { padding: .22rem 0; border-bottom: 1px solid #f0f1f3; font-size: .66rem; }
.id-mock-price .amt { text-align: right; font-variant-numeric: tabular-nums; color: #475467; white-space: nowrap; }

.id-mock-rec { width: 100%; border-collapse: collapse; margin-top: .35rem; }
.id-mock-rec th { text-align: left; font-size: .5rem; text-transform: uppercase; letter-spacing: .1em; color: #98a2b3; padding: .24rem .3rem; border-bottom: 2px solid #e3e6ea; }
.id-mock-rec td { padding: .3rem .3rem; border-bottom: 1px solid #f0f1f3; font-size: .62rem; vertical-align: top; }
.id-mock-rec .prov { color: #98a2b3; font-size: .54rem; margin-top: .12rem; }
.id-mock-chip { display: inline-block; padding: .04rem .42rem; border-radius: 999px; font-size: .5rem; font-weight: 600; white-space: nowrap; }
.id-mock-chip.maintenance { background: #e0f2fe; color: #075985; }
.id-mock-chip.repair { background: #fee2e2; color: #991b1b; }
.id-mock-chip.upgrade { background: #dcfce7; color: #166534; }
.id-mock-chip.inspection { background: #f3e8ff; color: #6b21a8; }
.id-mock-chip.restoration { background: #fef3c7; color: #92400e; }
.id-redact { display: inline-block; background: #16130F; color: transparent; border-radius: 2px; padding: 0 .12rem; user-select: none; }

.id-mock-ft { margin-top: auto; border-top: 2px solid var(--m-accent); padding-top: .42rem; display: flex; justify-content: space-between; align-items: flex-end; gap: .6rem; }
.id-mock-disc { color: #98a2b3; font-size: .5rem; line-height: 1.3; max-width: 64%; }
.id-mock-attrib { font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; color: #667085; font-weight: 600; white-space: nowrap; }
.id-mock-attrib b { color: var(--m-accent); font-weight: 800; }

/* Original uploaded service record (invoice) — what redaction is actually applied to */
.id-mock-doc { background: #fdfdfb; }
.id-doc-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; border-bottom: 1px solid #dcdcd5; padding-bottom: .45rem; }
.id-doc-shop { font-weight: 800; font-size: .9rem; letter-spacing: -.01em; }
.id-doc-shop small { display: block; font-weight: 500; font-size: .54rem; color: #667085; letter-spacing: 0; }
.id-doc-meta { font-size: .56rem; color: #667085; text-align: right; white-space: nowrap; }
.id-doc-meta b { color: #1A1A1A; }
.id-doc-label { font-size: .5rem; text-transform: uppercase; letter-spacing: .12em; color: #98a2b3; margin: .65rem 0 .3rem; }
.id-doc-cust { display: flex; flex-direction: column; gap: .26rem; }
.id-doc-redact { height: .64rem; background: #16130F; border-radius: 2px; }
.id-doc-redact.w1 { width: 58%; } .id-doc-redact.w2 { width: 74%; } .id-doc-redact.w3 { width: 44%; }
.id-doc-items { width: 100%; border-collapse: collapse; margin-top: .35rem; }
.id-doc-items td { font-size: .6rem; padding: .2rem 0; border-bottom: 1px dotted #e2e2da; }
.id-doc-items td.amt { text-align: right; font-variant-numeric: tabular-nums; color: #475467; }
.id-doc-total { display: flex; justify-content: space-between; font-weight: 800; font-size: .72rem; margin-top: auto; padding-top: .5rem; border-top: 2px solid #16130F; }

/* The package: three documents side by side, each captioned, equal height */
.id-pkg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
.id-pkg figure { margin: 0; display: flex; flex-direction: column; height: 100%; }
.id-pkg .id-mock { transform: none; flex: 1 1 auto; }
.id-pkg figcaption { color: var(--id-on-dark-muted); font-size: .82rem; text-align: center; margin-top: .75rem; letter-spacing: .02em; }
@media (max-width: 900px) { .id-pkg { grid-template-columns: 1fr; max-width: 21rem; margin: 0 auto; gap: 2rem; } }

/* =====================================================================
   INTERACTIVE: steps carousel + pricing tabs/toggle (Bootstrap JS already
   loaded; no new dependencies).
   ===================================================================== */

/* ---- How-it-works carousel ---- */
.id-steps { max-width: 52rem; margin: 0 auto; position: relative; }
.id-step-slide {
    display: flex; align-items: center; gap: 2.25rem;
    background: var(--id-surface-dark); border: 1px solid var(--id-line-dark);
    border-radius: var(--id-radius-lg); padding: 2.75rem; min-height: 15rem;
}
.id-step-slide__num {
    font-family: 'Newsreader', serif; font-weight: 600; font-size: 6rem; line-height: 1;
    color: var(--id-accent-bright); flex: 0 0 auto;
}
@media (max-width: 640px) {
    .id-step-slide { flex-direction: column; align-items: flex-start; gap: .4rem; padding: 2rem 1.5rem; }
    .id-step-slide__num { font-size: 3.6rem; }
}
.id-steps__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.id-steps__arrow {
    width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--id-line-dark);
    background: transparent; color: var(--id-on-dark); font-size: 1.35rem; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s ease, color .15s ease;
}
.id-steps__arrow:hover { border-color: var(--id-accent-bright); color: var(--id-accent-bright); }
.id-steps__dots { position: static; margin: 0; }
.id-steps__dots [data-bs-slide-to] {
    box-sizing: border-box; width: .6rem; height: .6rem; border-radius: 50%;
    background: rgba(255,255,255,.28); border: 0; margin: 0 .28rem; opacity: 1; text-indent: 0;
    transition: background .15s ease, transform .15s ease;
}
.id-steps__dots [data-bs-slide-to].active { background: var(--id-accent-bright); transform: scale(1.3); }

/* ---- Pricing: billing period segmented toggle ---- */
.id-seg { display: inline-flex; align-items: center; gap: .15rem; background: var(--id-surface-dark); border: 1px solid var(--id-line-dark); border-radius: 999px; padding: .25rem; }
.id-seg__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.id-seg__btn { margin: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem 1.05rem; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--id-on-dark-muted); transition: background .15s ease, color .15s ease; }
.id-seg__input:checked + .id-seg__btn { background: var(--id-accent); color: #fff; }
.id-seg__input:focus-visible + .id-seg__btn { outline: 3px solid var(--id-accent-2); outline-offset: 2px; }
.id-seg__save { font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .1rem .42rem; border-radius: 999px; background: var(--id-accent-bright); color: #16130F; }

/* price blocks swapped by the toggle */
#pricing .js-annual { display: none; }
#pricing.show-annual .js-monthly { display: none; }
#pricing.show-annual .js-annual { display: block; }

/* ---- Pricing: plan tabs ---- */
.id-plan-tabs { border-bottom: 0; gap: .15rem; }
.id-plan-tabs .nav-link {
    border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent;
    color: var(--id-on-dark-muted); font-family: 'Newsreader', serif; font-weight: 600; font-size: 1.05rem; padding: .5rem 1.1rem;
}
.id-plan-tabs .nav-link:hover { color: var(--id-on-dark); border-bottom-color: rgba(255,255,255,.2); }
.id-plan-tabs .nav-link.active { color: var(--id-on-dark); background: transparent; border-bottom-color: var(--id-accent-bright); }

/* =====================================================================
   BEFORE / AFTER: "turn this into this" (messy records -> clean package)
   ===================================================================== */
.id-xform { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; }
.id-xform__col { text-align: center; }
.id-xform__arrow { font-size: 2.4rem; line-height: 1; color: var(--id-accent-bright); }
@media (max-width: 800px) {
    .id-xform { grid-template-columns: 1fr; gap: 2.5rem; }
    .id-xform__arrow { transform: rotate(90deg); }
}

/* messy pile of paper service records / shop invoices */
.id-messy { position: relative; height: 27rem; max-width: 23rem; margin: 0 auto; }
.id-receipt {
    position: absolute; left: 50%; width: 15rem;
    background: #fbfaf6; border: 1px solid #e2ddd0; border-radius: 3px;
    box-shadow: 0 14px 30px rgba(0,0,0,.45); padding: 1rem 1rem .9rem;
}
.id-receipt__tag {
    font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: .82rem; color: #37322a;
    border-bottom: 1px solid #e6e1d5; padding-bottom: .4rem; margin-bottom: .45rem;
}
.id-receipt__l { height: .36rem; background: #e5e0d4; border-radius: 2px; margin: .32rem 0; }
.id-receipt__l.short { width: 54%; }
.id-receipt__amt { height: .44rem; width: 30%; background: #c39a63; border-radius: 2px; margin-top: .55rem; margin-left: auto; }
.id-receipt.r1 { top: 15%; transform: translate(-58%, -50%) rotate(-11deg); }
.id-receipt.r2 { top: 32%; transform: translate(-43%, -50%) rotate(7deg); }
.id-receipt.r3 { top: 49%; transform: translate(-54%, -50%) rotate(-4deg); }
.id-receipt.r4 { top: 66%; transform: translate(-45%, -50%) rotate(5deg); z-index: 1; }
.id-receipt.r5 { top: 82%; transform: translate(-52%, -50%) rotate(-2deg); z-index: 2; }

/* clean branded package — the spec sheet on top of a hint of more sheets behind */
.id-clean { position: relative; max-width: 22rem; margin: 0 auto; }
.id-clean .id-mock { position: relative; z-index: 1; }
.id-clean__behind {
    position: absolute; inset: 0; z-index: 0; background: #fff;
    border: 1px solid var(--id-line); border-radius: 6px;
    box-shadow: 0 24px 55px rgba(0,0,0,.4); transform: rotate(4deg) translate(10px, 8px);
}

/* =====================================================================
   LISTING WORKSPACE — left-rail navigation (_ListingNav), light app surface
   ===================================================================== */
.id-lnav { position: sticky; top: 84px; }
.id-lnav__back { display: inline-block; font-size: .82rem; color: var(--id-muted); margin-bottom: 1rem; }
.id-lnav__back:hover { color: var(--id-accent); }
.id-lnav__car { padding-bottom: .9rem; margin-bottom: .7rem; border-bottom: 1px solid var(--id-line); }
.id-lnav__title { font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: 1.08rem; line-height: 1.2; color: var(--id-ink); }
.id-lnav__vin { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--id-muted); margin-top: .25rem; }
.id-lnav__list { list-style: none; margin: 0; padding: 0; }
.id-lnav__item { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 7px; color: var(--id-ink); font-weight: 600; font-size: .95rem; }
.id-lnav__item:hover { background: var(--id-paper); color: var(--id-ink); }
.id-lnav__item.active { background: var(--id-ink); color: #fff; }
.id-lnav__num { width: 1.55rem; height: 1.55rem; border-radius: 50%; border: 1px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; flex: none; }
.id-lnav__item.active .id-lnav__num { border-color: rgba(255,255,255,.55); }
.id-lnav__tick { margin-left: auto; color: #16794a; font-weight: 700; }
.id-lnav__item.active .id-lnav__tick { color: #8fe3b4; }
.id-lnav__sub { list-style: none; margin: .15rem 0 .5rem 2.3rem; padding: 0; }
.id-lnav__sub-item { display: block; padding: .3rem .6rem; border-radius: 6px; font-size: .85rem; color: var(--id-muted); }
.id-lnav__sub-item:hover { color: var(--id-ink); }
.id-lnav__sub-item.active { color: var(--id-ink); font-weight: 600; }
.id-lnav__sub-item.disabled { color: #c9c3b6; pointer-events: none; }
/* Mobile: the rail collapses into a compact header — back link + car title on one line, then the three
   steps as a horizontal, swipeable bar. The sub-items disappear (each page offers those actions inline). */
@media (max-width: 991px) {
    .id-lnav { position: static; margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--id-line); }
    .id-lnav__back { margin-bottom: .35rem; }
    .id-lnav__car { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; padding-bottom: .5rem; margin-bottom: .5rem; border-bottom: 0; }
    .id-lnav__vin { margin-top: 0; }
    .id-lnav__list { display: flex; gap: .35rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .15rem; }
    .id-lnav__list > li { flex: 1 0 auto; }
    .id-lnav__item { white-space: nowrap; padding: .4rem .65rem; font-size: .85rem; justify-content: center; }
    .id-lnav__sub { display: none; }
}

/* ---- Nav "Settings" dropdown: keep items dark/legible even under the dark-canvas link cascade ---- */
.navbar .dropdown-menu { --bs-dropdown-link-color: var(--id-ink); --bs-dropdown-link-hover-color: var(--id-ink);
    --bs-dropdown-link-hover-bg: var(--id-paper); border: 1px solid var(--id-line); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
body.id-dark .navbar .dropdown-item { color: var(--id-ink); }
body.id-dark .navbar .dropdown-item:hover, body.id-dark .navbar .dropdown-item:focus { color: var(--id-ink); background: var(--id-paper); }

/* ---- Listing sidebar: progress + completion state ---- */
.id-lnav__progress { height: 5px; border-radius: 3px; background: var(--id-line); overflow: hidden; margin-bottom: .35rem; }
.id-lnav__progress-bar { height: 100%; background: #16794a; border-radius: 3px; transition: width .3s ease; }
.id-lnav__progress-label { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--id-muted); margin-bottom: .8rem; }
.id-lnav__item.done .id-lnav__num { border-color: #16794a; color: #16794a; }
.id-lnav__item.active.done .id-lnav__num { border-color: rgba(255,255,255,.55); color: #fff; }
.id-lnav__next { margin-left: auto; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
    color: var(--id-accent); background: rgba(154,106,60,.12); border-radius: 999px; padding: .12rem .5rem; }
.id-lnav__item.active .id-lnav__next { color: #fff; background: rgba(255,255,255,.18); }

/* ---- Dashboard: resume banner + per-listing mini progress ---- */
.id-resume { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: var(--id-card); border: 1px solid var(--id-line); border-left: 4px solid var(--id-accent);
    border-radius: 12px; padding: 1rem 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.id-resume__body { flex: 1 1 16rem; }
.id-resume__title { font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: 1.2rem; color: var(--id-ink); line-height: 1.2; }
.id-resume .btn { flex: none; }
.id-steps-mini { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.id-steps-mini__pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600;
    color: var(--id-muted); background: var(--id-paper); border: 1px solid var(--id-line); border-radius: 999px; padding: .2rem .55rem; }
.id-steps-mini__pill.done { color: #0f5f39; background: #e8f5ee; border-color: #bfe3ce; }
.id-steps-mini__mk { display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem;
    border-radius: 50%; border: 1px solid currentColor; font-size: .62rem; line-height: 1; }
.id-steps-mini__pill.done .id-steps-mini__mk { background: #16794a; border-color: #16794a; color: #fff; }
/* The pills are links into each workspace section — give them hover/focus affordance. */
a.id-steps-mini__pill { text-decoration: none; transition: border-color .12s ease, box-shadow .12s ease; }
a.id-steps-mini__pill:hover { border-color: var(--id-ink); color: var(--id-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
a.id-steps-mini__pill.done:hover { border-color: #16794a; color: #0f5f39; }

/* ---- Dashboard: compact stat strip + responsive listing rows ---- */
.id-statbar { display: flex; align-items: stretch; padding: .9rem 1.25rem; }
.id-statbar__item { flex: 1 1 0; min-width: 0; padding: .1rem 1rem; border-left: 1px solid var(--id-line); }
.id-statbar__item:first-child { border-left: 0; padding-left: 0; }
.id-statbar__label { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--id-muted); }
.id-statbar__value { font-size: 1.15rem; font-weight: 700; color: var(--id-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575px) {
    .id-statbar { padding: .75rem 1rem; }
    .id-statbar__item { padding: .1rem .65rem; }
    .id-statbar__value { font-size: .95rem; }
}
.id-llist { display: flex; flex-direction: column; }
.id-lrow { display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap; padding: .9rem 0; border-bottom: 1px solid var(--id-line); }
.id-lrow:first-child { padding-top: .25rem; }
.id-lrow:last-child { border-bottom: 0; padding-bottom: .1rem; }
.id-lrow__id { flex: 1 1 15rem; min-width: 0; }
.id-lrow__title { font-weight: 600; color: var(--id-ink); }
.id-lrow__vin { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--id-muted); margin-top: .1rem; }
.id-lrow__act { margin-left: auto; display: flex; align-items: center; gap: .35rem; flex: none; }
@media (max-width: 575px) {
    /* Each row reads as a small card: identity, then pills, then a full-width action. */
    .id-lrow__id { flex-basis: 100%; }
    .id-lrow__act { margin-left: 0; width: 100%; justify-content: space-between; }
    .id-lrow__act .btn-accent { flex: 1 1 auto; }
    .id-resume .btn { width: 100%; }
}

/* ---- Respect reduced-motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .id-hero__art .id-mock { transform: none !important; }
}