/* ====================================================================
   TOKENS
   Palette derived from acctual.com: near-white ground, black ink, a
   single blue accent, colour used only where it carries meaning.
   ==================================================================== */
:root {
    color-scheme: light;

    --bg:          #FAFAFA;
    --surface:     #FFFFFF;
    --surface-2:   #F4F4F5;
    --ink:         #21232E;
    --ink-soft:    #33364A;
    --muted:       #6B6B70;
    --muted-2:     #8D8D8D;
    --line:        rgba(0,0,0,.09);
    --line-strong: rgba(0,0,0,.16);

    --accent:      #105BFF;
    --accent-ink:  #0A46C8;
    --accent-soft: rgba(16,91,255,.11);
    --violet:      #6C56FC;
    --violet-soft: rgba(108,86,252,.11);
    --good:        #4E8A05;
    --good-soft:   rgba(93,156,6,.12);
    --money:       #FE8500;
    --money-ink:   #C85F00;
    --money-soft:  rgba(254,133,0,.13);
    --warn:        #B26A00;
    --warn-soft:   rgba(232,137,12,.14);
    --bad:         #D3373C;
    --bad-soft:    rgba(229,72,77,.12);

    --btn-bg:      #105BFF;
    --btn-ink:     #FFFFFF;

    --shadow-sm:   0 1px 2px rgba(0,0,0,.05);
    --shadow:      0 2px 6px rgba(0,0,0,.05), 0 12px 28px rgba(0,0,0,.05);
    --shadow-lg:   0 4px 10px rgba(0,0,0,.06), 0 24px 56px rgba(0,0,0,.09);

    --r-sm: 10px;
    --r:    16px;
    --r-lg: 22px;
    --r-pill: 999px;
}

/* Same palette three times over: the OS default (no stamp), and both
   explicit choices, so neither can strand a colour undefined. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg:          #17181F;
        --surface:     #1E2029;
        --surface-2:   #262833;
        --ink:         #F6F6F7;
        --ink-soft:    #E4E4E7;
        --muted:       #A1A1A8;
        --muted-2:     #86868E;
        --line:        rgba(255,255,255,.10);
        --line-strong: rgba(255,255,255,.20);

        --accent:      #5B8CFF;
        --accent-ink:  #9DBAFF;
        --accent-soft: rgba(91,140,255,.16);
        --violet:      #9C8CFF;
        --violet-soft: rgba(156,140,255,.14);
        --good:        #8FCB3A;
        --good-soft:   rgba(143,203,58,.14);
        --money:       #FF9E33;
        --money-ink:   #FFB768;
        --money-soft:  rgba(255,158,51,.16);
        --warn:        #F0A94C;
        --warn-soft:   rgba(240,169,76,.14);
        --bad:         #FF6B6F;
        --bad-soft:    rgba(255,107,111,.14);

        --btn-bg:      #105BFF;
        --btn-ink:     #FFFFFF;

        --shadow-sm:   0 1px 2px rgba(0,0,0,.5);
        --shadow:      0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.4);
        --shadow-lg:   0 4px 10px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.5);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:          #17181F;
    --surface:     #1E2029;
    --surface-2:   #262833;
    --ink:         #F6F6F7;
    --ink-soft:    #E4E4E7;
    --muted:       #A1A1A8;
    --muted-2:     #86868E;
    --line:        rgba(255,255,255,.10);
    --line-strong: rgba(255,255,255,.20);

    --accent:      #5B8CFF;
    --accent-ink:  #9DBAFF;
    --accent-soft: rgba(91,140,255,.16);
    --violet:      #9C8CFF;
    --violet-soft: rgba(156,140,255,.14);
    --good:        #8FCB3A;
    --good-soft:   rgba(143,203,58,.14);
    --money:       #FF9E33;
    --money-ink:   #FFB768;
    --money-soft:  rgba(255,158,51,.16);
    --warn:        #F0A94C;
    --warn-soft:   rgba(240,169,76,.14);
    --bad:         #FF6B6F;
    --bad-soft:    rgba(255,107,111,.14);

    --btn-bg:      #105BFF;
    --btn-ink:     #FFFFFF;

    --shadow-sm:   0 1px 2px rgba(0,0,0,.5);
    --shadow:      0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.4);
    --shadow-lg:   0 4px 10px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.5);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { background: var(--bg); }

body {
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

h1, h2, h3 {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.14;
    text-wrap: balance;
}

a { color: var(--accent-ink); }
img { max-width: 100%; }
[hidden] { display: none !important; }

.wrap {
    max-width: 720px;
    margin: 0 auto;
    padding-inline: 20px;
    padding-block: 0 72px;
}

/* ---------------- top bar ---------------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 22px 8px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.015em;
    color: var(--ink);
}
.brand svg { flex-shrink: 0; }
.brand span { white-space: nowrap; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.langtog {
    display: inline-flex;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 3px;
}
/* Anchors, not buttons: each language is its own URL now, so this has to be
   something a crawler can follow and a reader can open in a new tab. */
.langtog a {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    border: 0;
    background: transparent;
    color: var(--muted);
    padding: 4px 11px;
    border-radius: var(--r-pill);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.5;
}
.langtog a:hover { color: var(--ink); }
.langtog a[aria-current="page"] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}

.ghost-btn {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    padding: 8px 15px;
    border-radius: var(--r-pill);
    cursor: pointer;
    transition: background .15s;
}
.ghost-btn:hover { background: var(--surface-2); }

.user-menu { position: relative; }
.user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow);
    min-width: 210px;
    display: none;
    z-index: 1000;
    overflow: hidden;
}
.user-dropdown.active { display: block; }
.user-email {
    padding: 11px 14px;
    font-size: 12.5px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    word-break: break-all;
}
.user-dropdown button {
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    border: 0;
    color: var(--ink);
    padding: 11px 14px;
    cursor: pointer;
}
.user-dropdown button:hover { background: var(--surface-2); }

@media (max-width: 420px) {
    .brand { font-size: 15px; gap: 7px; }
    .topbar { gap: 8px; }
    .ghost-btn { padding: 8px 12px; font-size: 13px; }
}

/* ---------------- hero ---------------- */
.hero { text-align: center; padding-block: 44px 8px; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: var(--r-pill);
    margin-bottom: 20px;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* The free tier is the hook, so it gets the loudest element above the
   headline: a solid chip that reads as a stamp, not a caption. The
   quiet .badge above stays as it is for the paid card. */
.hook {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 14px;
    font-weight: 600;
    padding: 5px 16px 5px 5px;
    border-radius: var(--r-pill);
    margin-bottom: 22px;
    max-width: 100%;
}
.hook-tag {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--accent);
    color: #fff;
    padding: 5px 13px;
    border-radius: var(--r-pill);
    flex-shrink: 0;
}
/* The dark palette's accent is a light blue, so white on it falls to
   about 2:1. The chip flips to dark text there instead. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hook-tag { color: #06131D; }
}
:root[data-theme="dark"] .hook-tag { color: #06131D; }

/* The two pills sit on one line and wrap together, so the row keeps the
   hero's single bottom margin instead of each pill carrying its own. */
.hooks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.hooks .hook { margin-bottom: 0; }

/* The second pill is a link to the Daily Hack, in red because that is the
   whole point of it: the free check is calm, the attack log is not. It never
   disappears, even on a day with no new victims, because it is the only
   internal link that page has. */
.hook-live {
    background: var(--accent-soft);
    color: var(--accent-ink);
    text-decoration: none;
    transition: opacity .15s ease;
}
.hook-live:hover { opacity: .85; text-decoration: none; }
.hook-live .hook-tag {
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.hook-live .live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .hook-live .live-dot { animation: livepulse 2.2s ease-out infinite; }
}
@keyframes livepulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
    70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
/* Same reason as .hook-tag above: the dark palette's red is light. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hook-live .hook-tag { color: #2A0608; }
}
:root[data-theme="dark"] .hook-live .hook-tag { color: #2A0608; }

/* The third pill links to the Money Pool, in the money colour (tangerine)
   because it is about money you can claim, not exposure. Same build as the
   Daily Hack link. */
.hook-pool {
    background: var(--accent-soft);
    color: var(--accent-ink);
    text-decoration: none;
    transition: opacity .15s ease;
}
.hook-pool:hover { opacity: .85; text-decoration: none; }
.hook-pool .hook-tag { background: var(--accent); color: #fff; }
.hook-new {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 10px;
    letter-spacing: .09em;
    text-transform: uppercase;
    background: var(--accent);
    color: #fff;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    flex-shrink: 0;
}
/* The dark palette's green is light, so white on it is low contrast: flip the
   tag and the NEW chip to dark text, like .hook-tag and .hook-live above. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hook-pool .hook-tag,
    :root:not([data-theme="light"]) .hook-new { color: #2A1500; }
}
:root[data-theme="dark"] .hook-pool .hook-tag,
:root[data-theme="dark"] .hook-new { color: #2A1500; }

/* The fourth pill: Pricing. Green, to sit apart from the blue Free, red Daily
   Hack and orange Money Pool pills. */
.hook-pricing {
    background: var(--accent-soft);
    color: var(--accent-ink);
    text-decoration: none;
    transition: opacity .15s ease;
}
.hook-pricing:hover { opacity: .85; text-decoration: none; }
.hook-pricing .hook-tag { background: var(--accent); color: #fff; }
/* The dark palette's green is light, so the tag text flips to dark there. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hook-pricing .hook-tag { color: #0C2200; }
}
:root[data-theme="dark"] .hook-pricing .hook-tag { color: #0C2200; }

@media (max-width: 420px) {
    .hook { font-size: 13px; gap: 8px; padding-right: 13px; }
    .hook-tag { font-size: 12px; padding: 4px 11px; }
    .hooks { gap: 8px; }
    .hook-new { font-size: 9px; padding: 2px 6px; }
}

.hero h1 { font-size: clamp(34px, 8.2vw, 54px); font-weight: 900; margin-bottom: 16px; }
.hero .lede {
    color: var(--muted);
    font-size: clamp(15px, 3.6vw, 17.5px);
    max-width: 30em;
    margin: 0 auto;
}

/* The hero card: a bright blue gradient block that anchors the page, so the
   first thing a visitor sees is a confident, modern centerpiece instead of a
   flat wall of text. The headline, lede, email form and trust row all sit
   inside it in white. The hooks row stays above it, on the page background. */
.hero-card {
    position: relative;
    overflow: hidden;
    margin-top: 10px;
    padding: clamp(34px, 6vw, 62px) clamp(22px, 5vw, 52px) clamp(30px, 5vw, 48px);
    border-radius: 28px;
    /* SettleMate's exact recipe: a vivid royal-blue base with a vertical
       overlay that glows white at the top, clears by 60%, and deepens
       slightly at the bottom. */
    background:
        linear-gradient(to bottom, rgba(255,255,255,.40) 0%, rgba(255,255,255,0) 58%, rgba(0,0,0,.10) 100%),
        #0067EB;
    box-shadow: 0 10px 24px rgba(0,103,235,.22), 0 28px 64px rgba(0,103,235,.20);
    color: #fff;
}
.hero-card h1 { color: #F5F5F7; letter-spacing: -0.01em; }
.hero-card .lede { color: rgba(255,255,255,.90); }
.hero-card .search { margin-top: 26px; }
/* The in-card CTA is white so it reads as the one action on the blue. */
.hero-card .search .btn {
    background: #fff;
    color: var(--accent-ink);
}
.hero-card .search .btn:hover { background: #F0F4FF; }
.hero-card .search input {
    border-color: rgba(255,255,255,.45);
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.hero-card .trust { color: rgba(255,255,255,.92); margin-top: 20px; }
.hero-card .trust span { color: rgba(255,255,255,.92); }

.search {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
    text-align: left;
}
.search input {
    flex: 1 1 260px;
    min-width: 0;
    font-family: 'Inter', sans-serif;
    font-size: 16.5px;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-pill);
    padding: 15px 22px;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s, box-shadow .15s;
}
.search input::placeholder { color: var(--muted-2); }
.search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.btn {
    font-family: 'Nunito', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
    background: var(--btn-bg);
    color: var(--btn-ink);
    border: 0;
    border-radius: var(--r-pill);
    padding: 15px 30px;
    cursor: pointer;
    flex: 1 1 100%;
    transition: opacity .15s, transform .12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
@media (min-width: 560px) { .search .btn { flex: 0 0 auto; } }
.btn:hover { opacity: .88; }
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.sm { font-size: 14.5px; padding: 11px 20px; flex: 0 0 auto; }
.btn.accent { background: var(--accent); color: #fff; }

.spinner {
    width: 15px; height: 15px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin .6s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin-top: 22px;
}
.trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--muted);
}
.trust svg { color: var(--accent); flex-shrink: 0; }

/* ---------------- result card ---------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 26px;
    margin-top: 28px;
}
@media (max-width: 480px) { .card { padding: 20px; border-radius: var(--r); } }

.verdict { display: flex; align-items: flex-start; gap: 14px; }
.verdict-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    display: grid; place-items: center;
    flex-shrink: 0;
    color: #fff;
}
.verdict-icon.good { background: var(--good); }
.verdict-icon.bad  { background: var(--bad); }
.verdict h2 { font-size: clamp(20px, 5vw, 25px); margin-bottom: 4px; }
.verdict p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.verdict .who { font-weight: 600; color: var(--ink); word-break: break-word; }

.tally { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.tally-box {
    flex: 1 1 130px;
    background: var(--surface-2);
    border-radius: var(--r-sm);
    padding: 14px 16px;
}
.tally-num {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 27px;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.tally-num.bad { color: var(--bad); }
.tally-lbl { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-top: 2px; }

.section-lbl {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin: 26px 0 12px;
}

.breach { border-top: 1px solid var(--line); padding: 15px 0; }
.breach-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.breach-name {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 16.5px;
    letter-spacing: -.01em;
}
.breach-url {
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-soft);
    word-break: break-all;
}
.breach-url:hover { border-bottom-color: currentColor; }
.breach-meta { font-size: 13px; color: var(--muted); margin-top: 5px; }
.breach-meta b { color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
    font-size: 12px;
    font-weight: 500;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--muted);
    padding: 3px 10px;
    border-radius: var(--r-pill);
}
.chip.hot { background: var(--bad-soft); border-color: transparent; color: var(--bad); font-weight: 600; }

.flag {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    background: var(--warn-soft);
    border-radius: var(--r-sm);
    padding: 13px 15px;
    margin-top: 16px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-soft);
}
.flag svg { color: var(--warn); flex-shrink: 0; margin-top: 2px; }

.more-btn {
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    background: var(--surface-2);
    border: 0;
    color: var(--ink);
    padding: 12px;
    border-radius: var(--r-sm);
    cursor: pointer;
    margin-top: 14px;
}
.more-btn:hover { background: var(--line); }

.rollup { margin-top: 6px; }
.rollup-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 13.5px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
}
.rollup-row:last-child { border-bottom: 0; }
.rollup-row span:first-child { color: var(--ink-soft); }
.rollup-count { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------- sign-in gate ---------------- */
.gate {
    margin-top: 22px;
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--r);
    padding: 22px;
    text-align: center;
}
.gate h3 { font-size: 18px; margin-bottom: 6px; }
.gate p { font-size: 14px; color: var(--muted); max-width: 34em; margin: 0 auto 16px; }
.gate-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.gate-btns .btn { flex: 0 0 auto; }

/* ---------------- next step ---------------- */
.nextstep {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
.nextstep p { font-size: 14.5px; color: var(--muted); flex: 1 1 220px; }
.nextstep strong { color: var(--ink); font-weight: 600; }

.strength { display: flex; gap: 5px; margin-top: 20px; }
.strength i { height: 5px; flex: 1; border-radius: var(--r-pill); background: var(--surface-2); }
.strength i.on { background: var(--bad); }

.steps-inline { list-style: none; counter-reset: q; display: grid; gap: 10px; margin-top: 16px; }
.steps-inline li {
    counter-increment: q;
    position: relative;
    padding-left: 30px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-soft);
}
.steps-inline li::before {
    content: counter(q);
    position: absolute; left: 0; top: 1px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--surface-2); color: var(--muted);
    font-family: 'Nunito', sans-serif;
    font-size: 11px; font-weight: 700;
    display: grid; place-items: center;
}

/* ---------------- password fold ---------------- */
.fold {
    margin-top: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.fold-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    text-align: left;
    font: inherit;
    background: transparent;
    border: 0;
    color: var(--ink);
    padding: 17px 20px;
    cursor: pointer;
}
.fold-head:hover { background: var(--surface-2); }
.fold-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--violet-soft);
    color: var(--violet);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.fold-title { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 15.5px; }
.fold-sub { font-size: 13px; color: var(--muted); line-height: 1.4; }
.fold-chev { margin-left: auto; color: var(--muted-2); transition: transform .2s; flex-shrink: 0; }
.fold[data-open="1"] .fold-chev { transform: rotate(180deg); }
.fold-body { padding: 18px 20px 20px; border-top: 1px solid var(--line); }

.pw-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pw-row input {
    flex: 1 1 200px;
    min-width: 0;
    font-family: 'Inter', sans-serif;
    font-size: 15.5px;
    color: var(--ink);
    background: var(--bg);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-pill);
    padding: 12px 20px;
}
.pw-row input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px var(--violet-soft); }

.linkish {
    font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 600;
    background: none; border: 0; color: var(--accent-ink);
    cursor: pointer; padding: 0; margin-top: 11px;
}
.linkish:hover { text-decoration: underline; }

.note {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 12.5px; line-height: 1.5; color: var(--muted);
    margin-top: 14px;
}
.note svg { flex-shrink: 0; margin-top: 2px; color: var(--muted-2); }

.error {
    background: var(--bad-soft);
    color: var(--bad);
    border-radius: var(--r-sm);
    padding: 12px 15px;
    font-size: 13.5px;
    margin-top: 14px;
}

/* ---------------- paid offer ---------------- */
.offer {
    margin-top: 38px;
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--r-lg);
    padding: 30px;
    box-shadow: var(--shadow-lg);
}
/* In dark mode this block inverts to a light card, so it needs an edge
   and its accent must go back to the light-mode blue, or the check
   marks wash out on white. The bare :root default must not match. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .offer { border: 1px solid var(--line); --accent: #0098F2; }
}
:root[data-theme="dark"] .offer { border: 1px solid var(--line); --accent: #0098F2; }
@media (max-width: 480px) { .offer { padding: 22px; border-radius: var(--r); } }

.offer .badge { background: rgba(128,128,128,.22); color: inherit; }
.offer .badge .dot { background: var(--accent); }
.offer h2 { font-size: clamp(23px, 5.6vw, 30px); margin-bottom: 10px; }
.offer > p { font-size: 15px; opacity: .72; max-width: 36em; }
.offer ul { list-style: none; margin: 22px 0 26px; display: grid; gap: 11px; }
.offer li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; }
.offer li svg { color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.offer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
/* En que moneda se cobra de verdad. Ocupa la fila entera debajo del precio y
   del boton, porque es una aclaracion del importe, no una etiqueta suya. */
.price-note {
    flex-basis: 100%;
    margin-top: -4px;
    font-size: 13px;
    color: var(--muted);
}
.offer .btn { background: var(--bg); color: var(--ink); flex: 0 0 auto; }
/* The primary buy button leads; "See an example" steps back to a secondary
   outline so the paid action is the obvious one. Fixed royal blue (the hero's)
   so white stays high-contrast on the card in both themes. */
.offer .btn.offer-buy { background: #0067EB; color: #fff; }
.offer .btn.offer-buy:hover { background: #0067EB; opacity: .92; }
.offer .btn.offer-example { background: transparent; color: inherit; border: 1px solid var(--field-line); }
.offer .btn.offer-example:hover { background: var(--field-bg); }

/* Missed-settlements card call to action: the forward-looking "turn on
   monitoring" button and its one-line note. Royal blue so it reads as the
   action, not the proof above it. */
.missed-cta { margin-top: 20px; }
.missed-cta .btn { background: #0067EB; color: #fff; }
.missed-cta .btn:hover { background: #0067EB; opacity: .92; }
.missed-cta-note { margin: 10px 0 0; font-size: 13px; color: inherit; opacity: .72; }

/* Brief pulse on the monitoring card when the reader is sent to it, so the
   connection between "catch the next one" and the offer is obvious. */
.flash { animation: cardflash 1.4s ease-out; }
@keyframes cardflash {
    0%   { box-shadow: 0 0 0 0 rgba(0,103,235,.55); }
    100% { box-shadow: 0 0 0 14px rgba(0,103,235,0); }
}
/* The explainer card. It shares .offer's look, and differs in carrying several
   paragraphs rather than one: the paid card's single <p> never needed the gap
   between them, so .offer does not set it. */
.explain > p { margin-bottom: 14px; }
.explain > p:last-of-type { margin-bottom: 0; }
.explain .offer-foot { margin-top: 22px; }
.explain .btn { text-decoration: none; }

/* ---------------- alert subscription ----------------
   Shares .offer entirely: same ground, radius and shadow, so the two cards
   read as one family rather than as a second pitch bolted on. Only the form
   grid is its own. */
.alerts-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 22px 0 18px;
}
.alerts-form label { display: block; font-size: 12.5px; opacity: .62; margin-bottom: 6px; }
.alerts-form .wide { grid-column: 1 / -1; }

/* Field colours are the card's own, not the page's.
   .offer inverts against the page, so --line-strong and friends point the
   wrong way inside it: in dark mode that token is white at 20%, and the card
   underneath it is near-white. The first version used it and the fields were
   invisible. These four are defined against the card's ground instead, and
   redefined wherever the card flips. */
.offer {
    --field-bg:   rgba(255,255,255,.10);
    --field-line: rgba(255,255,255,.34);
    --field-ink:  var(--bg);
    --field-ph:   rgba(255,255,255,.50);
}
/* color-scheme comes with them. The page is dark, so the browser draws every
   native control inside it for a dark ground, and the checkbox arrived as a
   solid grey block on a card that is light. Measured in the browser: the
   computed colour-scheme on these fields was "dark" while they sat on
   #F6F6F7. The card is light here, so it says so. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .offer {
        color-scheme: light;
        --field-bg:   #FFFFFF;
        --field-line: rgba(0,0,0,.30);
        --field-ink:  #0F0F0F;
        --field-ph:   rgba(0,0,0,.45);
    }
}
:root[data-theme="dark"] .offer {
    color-scheme: light;
    --field-bg:   #FFFFFF;
    --field-line: rgba(0,0,0,.30);
    --field-ink:  #0F0F0F;
    --field-ph:   rgba(0,0,0,.45);
}

.alerts-form input,
.alerts-form select {
    width: 100%;
    box-sizing: border-box;
    background: var(--field-bg);
    border: 1.5px solid var(--field-line);
    color: var(--field-ink);
    border-radius: var(--r-sm);
    padding: 12px 13px;
    font: inherit;
    font-size: 15px;
}
.alerts-form input::placeholder { color: var(--field-ph); }
.alerts-form select:invalid { color: var(--field-ph); }

/* Which field is in use, said with the card's own accent rather than the
   browser's default ring, which draws in its own blue regardless of theme. */
.alerts-form input:focus,
.alerts-form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* The option list is drawn by the operating system on its own white ground,
   so it does not inherit the card's colours and needs the ink back. */
.alerts-form select option { color: #0F0F0F; }

@media (max-width: 480px) { .alerts-form { grid-template-columns: 1fr; } }

.alerts-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    opacity: .72;
    margin-bottom: 20px;
}
/* The settlements this address already missed. Deliberately not styled as
   the tick list above it: those are things the subscription will do, these
   are things that already happened and were lost, and reading as the same
   kind of item would blunt the only concrete evidence on the card. */
.alerts-missed {
    list-style: none;
    margin: 18px 0;
    display: grid;
    gap: 10px;
}
.alerts-missed li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 12px 14px;
    border-radius: var(--r-sm);
    background: var(--field-bg);
    border: 1.5px solid var(--field-line);
    color: var(--field-ink);
    font-size: 14.5px;
}
.alerts-missed .m-co { font-weight: 700; color: inherit; }
a.alerts-missed .m-co,
.alerts-missed a.m-co { text-decoration: underline; text-underline-offset: 2px; }
.alerts-missed a.m-co:hover { text-decoration-thickness: 2px; }

/* Where the money is actually claimed. It sits on its own line under the
   amount because it is the one thing on this card somebody can act on, and
   a reader who finds it two lines later has already stopped reading. */
.alerts-missed .m-claim {
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    color: var(--field-ink);
    opacity: .85;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.alerts-missed .m-claim:hover { opacity: 1; }
.alerts-missed .m-amt {
    font-family: 'Nunito', sans-serif;
    font-weight: 900;
    font-size: 17px;
    letter-spacing: -.01em;
}
/* The date is the point of the line, not a footnote: it is what turns
   "there was money" into "there was money and it is gone". */
.alerts-missed .m-when { opacity: .62; font-size: 13px; width: 100%; }

.alerts-caveat {
    font-size: 12.5px;
    opacity: .6;
    margin: 14px 0 18px;
    padding-left: 12px;
    border-left: 2px solid var(--accent);
}

.alerts-consent input {
    margin-top: 2px;
    flex-shrink: 0;
    /* Sized up and given the brand colour. The native box at its default
       size, unchecked, on an inverted card, was as easy to miss as the
       fields were. */
    width: 17px;
    height: 17px;
    accent-color: var(--accent);
}
.alerts-consent label { font-size: 13px; }

/* ---------------- language hint ----------------
   A suggestion for a visitor who landed on the wrong language, not an
   announcement. Quiet enough to ignore, close enough to the top to see. */
.lang-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 44px 9px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
    color: var(--muted);
    position: relative;
}
.lang-hint a { color: var(--accent-ink); font-weight: 600; }
.lang-hint button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: var(--muted-2);
    font-size: 20px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
}
.lang-hint button:hover { color: var(--ink); }

.price { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 26px; letter-spacing: -.02em; }
.price small { font-size: 13px; font-weight: 600; opacity: .6; margin-left: 5px; }
/* The pricing grid also uses a .price class (a bordered, filled box). Scope that
   box styling out of the offer footer so it never lands on the offer's price
   text, which otherwise renders dark-on-dark and vanishes. */
.offer-foot .price { background: none; border: 0; padding: 0; }

/* ---------------- footer ---------------- */
.foot {
    margin-top: 54px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted-2);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    justify-content: space-between;
}

/* The only links out of this page. Without them the written pages are
   orphans: reachable from the sitemap, reachable by nobody else. */
.foot-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    order: -1;
    width: 100%;
    margin-bottom: 4px;
}

.foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foot a:hover { color: var(--ink); }
.foot-nav a { color: var(--muted-2); text-decoration: none; }
.foot-nav a:hover { color: var(--ink); text-decoration: underline; }

/* ====================================================================
   AUTH MODAL
   ==================================================================== */
.auth-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}
.auth-modal.active { display: flex; }
.auth-modal-content {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 30px;
    width: 100%;
    max-width: 400px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}
.auth-modal-close {
    position: absolute;
    top: 14px; right: 16px;
    background: none; border: 0;
    font-size: 26px; line-height: 1;
    color: var(--muted-2);
    cursor: pointer;
}
.auth-form { display: none; }
.auth-form.active { display: block; }
.auth-form h2 { font-size: 23px; margin-bottom: 18px; }
.auth-reveal { margin: -4px 0 14px; text-align: right; font-size: 13px; }
.auth-hint {
    font-size: 14px; line-height: 1.5; color: var(--muted);
    margin: -8px 0 16px;
}
.auth-form input {
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--ink);
    background: var(--bg);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-pill);
    padding: 12px 18px;
    margin-bottom: 11px;
}
.auth-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.auth-form .btn { width: 100%; margin-top: 4px; }
.auth-toggle { font-size: 13.5px; color: var(--muted); margin-top: 15px; text-align: center; }
.auth-toggle button {
    font: inherit; font-weight: 600;
    background: none; border: 0; color: var(--accent-ink);
    cursor: pointer; padding: 0;
}
.auth-toggle button:hover { text-decoration: underline; }

.auth-divider {
    position: relative;
    text-align: center;
    margin: 22px 0 16px;
    font-size: 12px;
    color: var(--muted-2);
}
.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 1px;
    background: var(--line);
}
.auth-divider span { position: relative; background: var(--surface); padding: 0 12px; }

.auth-providers { display: flex; gap: 10px; }
.provider-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    color: var(--ink);
    padding: 11px;
    border-radius: var(--r-pill);
    cursor: pointer;
}
.provider-btn:hover { background: var(--surface-2); }

.auth-msg { font-size: 13px; margin-top: 14px; display: none; }
.auth-msg.bad { color: var(--bad); }
.auth-msg.good { color: var(--good); }

/* ====================================================================
   PREVIEW BANNER
   ==================================================================== */
.demo-banner {
    background: var(--warn-soft);
    border-bottom: 1px solid var(--line);
    padding: 11px 20px;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    justify-content: center;
    font-size: 13px;
    color: var(--ink-soft);
    text-align: center;
}
.demo-banner strong {
    font-weight: 700;
    letter-spacing: .07em;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--warn);
}
.demo-banner button {
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    padding: 5px 12px;
    border-radius: var(--r-pill);
    cursor: pointer;
}
/* Same shape as the preview banner, in whatever tone the payment
   outcome calls for. */
.pay-banner {
    background: var(--accent-soft);
    border-bottom: 1px solid var(--line);
    padding: 11px 20px;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    justify-content: center;
    font-size: 13.5px;
    color: var(--ink-soft);
    text-align: center;
}
/* Pinned, and above the report view's 1500. Everything that raises this
   banner is a button inside that view, which is fixed and covers the whole
   screen: left in the normal flow the answer rendered underneath it, and the
   button looked dead. */
.pay-banner.show {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    padding-top: calc(11px + env(safe-area-inset-top, 0px));
}
.pay-banner.warn { background: var(--warn-soft); }
.pay-banner button {
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink);
    padding: 5px 12px;
    border-radius: var(--r-pill);
    cursor: pointer;
}

.demo-print-notice { display: none; }

/* ====================================================================
   ACTION PLAN (full-screen overlay, also the print surface)
   ==================================================================== */
.report-view {
    position: fixed;
    inset: 0;
    background: var(--bg);
    overflow-y: auto;
    display: none;
    z-index: 1500;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.report-view.active { display: block; }

.report-toolbar {
    position: sticky;
    top: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 13px 20px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    z-index: 10;
}
.report-body {
    max-width: 720px;
    margin: 0 auto;
    padding-inline: 20px;
    padding-block: 30px 80px;
}
.report-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 20px;
    color: var(--muted);
    font-size: 15px;
}
.report-loading .spinner { color: var(--muted); }

.plan-header {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 26px;
}
.plan-header h1 { font-size: clamp(26px, 6.4vw, 38px); }
.plan-meta { font-size: 13.5px; color: var(--muted); margin-top: 5px; word-break: break-word; }
.plan-brand {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: var(--muted-2);
    white-space: nowrap;
}

.plan-summary {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 22px;
    margin-bottom: 26px;
    box-shadow: var(--shadow-sm);
}
.plan-summary p { font-size: 14.5px; color: var(--muted); margin-bottom: 11px; }
.plan-summary p:last-child { margin-bottom: 0; }
.plan-summary strong { color: var(--ink); font-weight: 600; }
.plan-reassure {
    border-left: 3px solid var(--accent);
    padding-left: 13px;
    font-style: italic;
}

.plan-action {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 24px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}
.plan-action-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.plan-action-head h3 { font-size: 18.5px; flex: 1 1 auto; }
.plan-step-num {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 9px;
    background: var(--accent); color: #fff;
    display: grid; place-items: center;
    font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 14px;
}
.plan-step-num.muted { background: var(--surface-2); color: var(--muted-2); }
.plan-pill {
    font-size: 11px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    padding: 3px 9px; border-radius: var(--r-pill);
    white-space: nowrap;
}
.plan-critical { background: var(--bad-soft); color: var(--bad); }
.plan-high     { background: var(--warn-soft); color: var(--warn); }
.plan-medium   { background: var(--accent-soft); color: var(--accent-ink); }

.plan-time {
    font-size: 12.5px;
    color: var(--muted-2);
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.plan-block { margin-top: 18px; }
.plan-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 7px;
}
.plan-block p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; }

.plan-steps { list-style: none; counter-reset: p; display: grid; gap: 11px; }
.plan-steps li {
    counter-increment: p;
    position: relative;
    padding-left: 31px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink-soft);
}
.plan-steps li::before {
    content: counter(p);
    position: absolute; left: 0; top: 2px;
    width: 21px; height: 21px;
    border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-ink);
    font-family: 'Nunito', sans-serif;
    font-size: 11px; font-weight: 700;
    display: grid; place-items: center;
}

.teaser-note {
    font-size: 13.5px;
    color: var(--muted);
    text-align: center;
    margin-bottom: 14px;
}

.locked-action {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 14px 16px;
    margin-bottom: 8px;
}
.locked-body { flex: 1 1 auto; min-width: 0; }
.locked-title { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 15px; color: var(--muted); }
.locked-meta { font-size: 12.5px; color: var(--muted-2); margin-top: 2px; }
.locked-icon { color: var(--muted-2); flex-shrink: 0; }

.paywall {
    background: var(--surface);
    border: 1.5px solid var(--accent);
    border-radius: var(--r-lg);
    padding: 28px;
    margin-top: 24px;
    text-align: center;
    box-shadow: var(--shadow);
}
.paywall h2 { font-size: clamp(21px, 5vw, 27px); margin-bottom: 16px; }
.paywall .locked-list { text-align: left; margin-bottom: 20px; }
.paywall-pitch { font-size: 14.5px; color: var(--muted); max-width: 34em; margin: 0 auto 20px; }
.paywall-fine { font-size: 12.5px; color: var(--muted-2); margin-top: 14px; }

.plan-appendix { margin-top: 34px; }
.plan-appendix h2 { font-size: 21px; margin-bottom: 6px; }
.plan-appendix .plan-why { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.appendix-scroll { overflow-x: auto; }
.appendix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 460px;
}
.appendix-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted-2);
    padding: 9px 12px 9px 0;
    border-bottom: 1px solid var(--line-strong);
}
.appendix-table td {
    padding: 11px 12px 11px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    vertical-align: top;
}
.appendix-domain { font-size: 12px; color: var(--muted-2); }

.plan-footer {
    margin-top: 34px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--muted-2);
    line-height: 1.6;
}

/* ---------------- print ---------------- */
@media print {
    :root { --bg: #fff; --surface: #fff; --surface-2: #f4f4f5; }
    body { background: #fff; }
    .wrap, .demo-banner, .pay-banner, .report-toolbar, .auth-modal, .paywall { display: none !important; }
    .report-view { position: static; display: block !important; overflow: visible; background: #fff; }
    .report-body { max-width: none; padding: 0; }
    .plan-action { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
    .plan-summary { box-shadow: none; border: 1px solid #ddd; }
    body.demo-active .demo-print-notice {
        display: block;
        border: 2px solid var(--warn);
        color: var(--warn);
        font-weight: 700;
        font-size: 12px;
        padding: 9px 12px;
        border-radius: 6px;
        margin-bottom: 18px;
    }
}

/* La vinieta del catalogo es un enlace. Hereda el color de la lista para no
   romper la tarjeta, y se subraya para que se vea que lleva a algun sitio. */
.alerts-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.alerts-link:hover { text-decoration-thickness: 2px; }

/* -------------------------------------------------------------- cross-check funnel
   Paso 2 (company chips + state) widens the email match; the big number is the
   free hook, the itemized list and the gate are the paid tiers. Tokens only, so
   it rides the light/dark palette like the rest of the app. */
.crosscheck .cc-step {
    font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: var(--muted-2); margin: 20px 0 10px;
}
.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-chip {
    display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2);
    border: 1px solid var(--line-strong); border-radius: var(--r-pill);
    padding: 8px 14px; font: inherit; font-size: 14px; color: var(--ink-soft); cursor: pointer;
}
.cc-chip:hover { border-color: var(--accent); }
.cc-chip.on {
    background: var(--accent-soft); border-color: var(--accent);
    color: var(--accent-ink); font-weight: 600;
}
.cc-chip.on::before { content: "\2713"; color: var(--accent); font-weight: 800; }
/* Closed: matched but the claim window has passed. Greyed, dashed, not clickable;
   it states what it paid and when it shut instead of pretending to be selectable. */
.cc-chip.cc-closed {
    flex-direction: column; align-items: flex-start; gap: 3px;
    border-style: dashed; cursor: default; opacity: .72;
}
.cc-chip.cc-closed:hover { border-color: var(--line-strong); }
.cc-closed-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.cc-tag {
    font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 1px 7px; border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--ink-soft) 16%, transparent); color: var(--ink-soft);
}
.cc-closed-meta { font-size: 12px; opacity: .85; }

.cc-state { margin-top: 16px; }
.cc-state label { display: block; font-size: 12.5px; opacity: .62; margin-bottom: 6px; }
.cc-state select {
    width: 100%; max-width: 20em; background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    padding: 11px 13px; font: inherit;
}
.cc-state select:focus { outline: none; border-color: var(--accent); }

.cc-number {
    margin-top: 22px; padding: 24px 22px; text-align: center;
    background: linear-gradient(180deg, var(--accent-soft), transparent 80%), var(--surface);
    border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    display: flex; flex-direction: column; gap: 4px;
}
.cc-n-label { font-size: 14px; color: var(--muted); }
.cc-n-big {
    font-family: 'Nunito', sans-serif; font-weight: 800;
    font-size: clamp(34px, 9vw, 52px); line-height: 1.05; color: var(--ink);
}
.cc-n-sub { font-size: 15px; color: var(--ink-soft); }
.cc-n-note { font-size: 12.5px; color: var(--muted-2); margin-top: 6px; }

.cc-locked { margin-top: 20px; }
.cc-locked h3 { font-size: 17px; margin: 0 0 4px; }
.cc-locked-lede { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
.cc-locked-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.cc-locked-list li {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface-2);
}
.cc-l-co { font-weight: 600; filter: blur(5px); user-select: none; }
.cc-l-amt { font-weight: 700; color: var(--money-ink); white-space: nowrap; }
.cc-l-lock { color: var(--muted-2); }

.cc-gate { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cc-plan { border: 1px solid var(--line-strong); border-radius: var(--r); padding: 18px; }
.cc-plan.primary { border-color: var(--accent); background: var(--accent-soft); }
.cc-plan-k { font-size: 13px; color: var(--muted); }
.cc-plan-v { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 24px; margin: 2px 0; }
.cc-plan-v small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.cc-plan-d { font-size: 13px; color: var(--muted); margin-bottom: 14px; min-height: 2.6em; }
.cc-plan .btn { width: 100%; }
.cc-plan.primary .btn { background: var(--accent); color: #fff; }
.cc-plan .btn.ghost { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); }
.cc-unavail { font-size: 13px; color: var(--warn); margin: 12px 0 0; }

@media (max-width: 480px) { .cc-gate { grid-template-columns: 1fr; } }

/* Lista desbloqueada tras el pago de $5: sin desenfoque, con enlace oficial. */
.cc-unlocked-row { flex-wrap: wrap; }
.cc-l-co2 { font-weight: 600; color: var(--ink); text-decoration: none; flex: 1 1 auto; }
.cc-l-co2:hover { color: var(--accent-ink); }
.cc-l-claim {
    flex: 1 1 100%; font-size: 13.5px; font-weight: 600;
    color: var(--accent-ink); text-decoration: none;
}
.cc-l-claim:hover { text-decoration: underline; }

/* The money ask on the cross-check card: a green box that sells settlement
   monitoring at the moment the visitor is looking at claimable money. Inside
   the dark .offer card, so text inherits the card colour; the button is solid
   green with the dark-palette text flip. */
.cc-upsell {
    margin: 24px 0 6px; padding: 20px;
    border: 1px solid var(--money); border-radius: var(--r);
    background: var(--money-soft);
}
.cc-upsell h3 { font-size: 17px; margin: 0 0 8px; line-height: 1.3; }
.cc-upsell > p { font-size: 14px; opacity: .82; margin: 0 0 14px; }
.cc-upsell .btn { background: var(--money); color: #fff; border: none; }
.cc-upsell .btn:hover { opacity: .9; }
.cc-upsell-note { font-size: 12.5px; opacity: .6; margin: 10px 0 0; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cc-upsell .btn { color: #2A1500; }
}
:root[data-theme="dark"] .cc-upsell .btn { color: #2A1500; }

/* -------------------------------------------------------------- monitoring plans
   Three email-based plans (breach, settlement, both) with a month/year switch.
   Same build as the cross-check plan cards; the combo is featured in green
   because it is about the money, like the Money Pool. */
/* This card lives inside .offer, which is dark in light mode and light in
   dark mode, with its text set to var(--bg). So text here inherits that, and
   borders use a neutral grey that reads on either card colour. */
.monitor-interval {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 4px 0 18px; font-size: 14px; font-weight: 600; cursor: pointer; color: inherit;
}
.monitor-interval input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.monitor-plans { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.mon-plan {
    border: 1px solid rgba(128,128,128,.32); border-radius: var(--r);
    padding: 18px; display: flex; flex-direction: column;
}
.mon-plan.featured { border-color: var(--money); background: var(--money-soft); }
.mon-k { font-size: 13px; opacity: .72; font-weight: 600; }
.mon-v { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 24px; margin: 2px 0; }
.mon-v small { font-size: 12px; font-weight: 600; opacity: .62; margin-left: 4px; }
.mon-d { font-size: 13px; opacity: .72; margin-bottom: 14px; min-height: 3.6em; flex: 1; }
.mon-plan .btn { width: 100%; }
.mon-plan.featured .btn { background: var(--money); color: #fff; }
.mon-plan.featured .btn:hover { opacity: .9; }
.monitor-note { font-size: 12.5px; opacity: .62; margin: 14px 0 0; }
/* The dark palette's green is light, so white on it is low contrast. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mon-plan.featured .btn { color: #2A1500; }
}
:root[data-theme="dark"] .mon-plan.featured .btn { color: #2A1500; }
@media (max-width: 560px) { .monitor-plans { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- money-pool banner
   Public and ungated, right under the hero. The settlements pitch + the prices,
   so a visitor (and a payment reviewer) sees them without running a check. */
.pool {
    margin: 30px 0 0; padding: 26px 24px 24px; position: relative; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.pool::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 100% 0, var(--accent-soft), transparent 60%);
}
.pool > * { position: relative; }
.pool-tag {
    display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
    background: var(--accent-soft); color: var(--accent-ink);
    font-weight: 700; font-size: 12px; letter-spacing: .03em; text-transform: uppercase;
    border-radius: var(--r-pill); padding: 4px 12px;
}
.pool-title { font-size: clamp(22px, 5.4vw, 28px); font-weight: 800; margin: 0 0 8px; line-height: 1.18; }
.pool-lede { font-size: 14.5px; color: var(--muted); margin: 0 0 18px; max-width: 56ch; }
.pool-stats { display: flex; flex-wrap: wrap; gap: 22px 30px; margin: 0 0 16px; }
.pstat-n { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 26px; color: var(--ink); }
.pstat-l { font-size: 12.5px; color: var(--muted-2); }
.pool-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.pool-chip {
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill);
    padding: 6px 13px; font-size: 13px; color: var(--ink-soft);
}
.pool-chip b { color: var(--money-ink); font-weight: 700; }
.pool-btn { background: var(--accent); color: #fff; }

.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.price { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.price-k { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.price-v { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 20px; }
.price-v small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.price-d { font-size: 12.5px; color: var(--muted-2); margin-top: 4px; }
.price.soon { border-color: var(--accent-soft); }
.soon-tag {
    font-size: 10.5px; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft);
    border-radius: var(--r-pill); padding: 2px 8px; vertical-align: 2px;
    text-transform: uppercase; letter-spacing: .03em;
}
@media (max-width: 560px) { .pricing { grid-template-columns: 1fr; } }

/* ===================================================================
   Claim Pack (the money half of the paid report)
   =================================================================== */
.claim-pack {
    margin: 0 0 28px;
    padding: 22px;
    border: 1px solid var(--money-soft);
    border-radius: var(--r-lg);
    background: var(--money-soft);
}
.claim-pack > h2 {
    margin: 0 0 4px;
    color: var(--money-ink);
    font-size: 22px;
}
.claim-free-note {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--muted);
}
.claim-sub {
    margin: 20px 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}
.claim-sub:first-of-type { margin-top: 4px; }
.claim-lede { margin: 0 0 14px; color: var(--ink); opacity: .85; font-size: 14px; }
.claim-openline { margin: 10px 0 0; font-weight: 600; color: var(--money-ink); }

.claim-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.claim-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.claim-card.claim-open { border-color: var(--money); box-shadow: inset 3px 0 0 var(--money); }
.claim-card.claim-closed { opacity: .82; }
.claim-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.claim-co { font-weight: 700; color: var(--ink); }
.claim-badge {
    font-size: 11px; font-weight: 700; padding: 2px 8px;
    border-radius: var(--r-pill); white-space: nowrap;
}
.claim-badge-open { color: #fff; background: var(--money-ink); }
.claim-badge-closed { color: var(--muted); background: var(--surface-2); }
.claim-amt { font-size: 20px; font-weight: 800; color: var(--money-ink); }
.claim-elig { margin: 0; font-size: 13px; color: var(--ink); opacity: .78; line-height: 1.45; }
.claim-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.claim-deadline { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.claim-proof {
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill);
}
.claim-proof-flat { color: var(--accent-ink); background: var(--accent-soft); }
.claim-proof-need { color: var(--money-ink); background: var(--money-soft); }
.claim-link {
    margin-top: 2px; font-size: 13px; font-weight: 600;
    color: var(--accent-ink); text-decoration: none; word-break: break-word;
}
.claim-link:hover { text-decoration: underline; }

.claim-guide {
    margin-top: 22px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.claim-guide h3 { margin: 0 0 6px; font-size: 17px; color: var(--ink); }
.claim-guide-intro { margin: 0 0 12px; color: var(--ink); opacity: .85; font-size: 14px; }
.claim-guide-steps { margin: 0; padding-left: 20px; display: grid; gap: 9px; }
.claim-guide-steps li { line-height: 1.5; }

.plan-security-title {
    margin: 4px 0 10px;
    font-size: 22px;
    color: var(--ink);
}

@media (max-width: 560px) {
    .claim-pack { padding: 16px; }
    .claim-grid { grid-template-columns: 1fr; }
}