/* Find & Resell — web app styles.
   Deliberately no CSS framework: a small, hand-written system built
   around a light, neutral base, a single restrained blue accent for
   interactive/brand elements, and colors that only ever carry meaning
   where the product actually has something to say (a profitable BUY,
   an uncertain REVIEW, a real risk) -- the identity this product needs
   is "serious analytics tool a reseller pays for monthly," not a
   terminal, a trading screen, or an underground marketplace. */

:root {
    /* Neutral foundation -- a very light, cool-neutral gray page (not
       stark white, not warm cream) with clean white card surfaces, so
       there's real depth between "page" and "card" without either
       looking sterile or tinted. Text is dark slate/charcoal, never the
       accent color, so hierarchy comes from weight/size/spacing rather
       than color doing double duty as both "important" and "on-brand." */
    --paper: #f5f6f8;
    --paper-raised: #ffffff;
    --line: #dde1e7;
    --ink: #1b2330;
    --ink-soft: #57606e;
    --ink-muted: #626b77;
    /* One restrained accent, spent deliberately -- a muted steel/royal
       blue, not a neon or a generic "AI SaaS" indigo. --accent is the
       interactive fill (buttons, links, active states); --accent-strong
       is the same hue darkened, used for hover/active states and the
       handful of places that need a stronger blue text (brand wordmark,
       active nav); --accent-soft is a pale wash for badge/pill
       backgrounds. --on-accent is the text color for anything filled
       with the accent (white, the ordinary light-UI convention).
       --focus centralizes every :focus-visible ring on this one color
       instead of borrowing a semantic status color for focus, which is
       its own small coherence bug worth avoiding. The accent is used
       for buttons, links, active nav and selected states only -- it
       never fills a whole surface or a heading. */
    --accent: #2c5f8a;
    --accent-strong: #1d4260;
    --accent-soft: #e3ecf4;
    --on-accent: #ffffff;
    --focus: var(--accent);
    /* Semantic colors, restrained and reserved for meaning. --success is
       a professional, muted green -- BUY badges, positive profit, an
       active/healthy subscription -- never the page's brand color, so
       green keeps meaning "this is working" instead of being spent on
       decoration. --review is a restrained amber/orange for "uncertain,
       take a look." --danger is a restrained red for risk/destructive
       actions. --warn (subscription past-due/pending) shares --review's
       amber family on purpose -- both mean "needs attention," and giving
       them separate hues would be a distinction with no real meaning. */
    --success: #1c7a4a;
    --success-soft: #dcf1e4;
    --review: #8a530f;
    --review-soft: #f7ecd9;
    --danger: #b3261e;
    --danger-soft: #fbe4e2;
    --warn: var(--review);
    --warn-soft: var(--review-soft);
    --radius: 10px;
    --shadow: 0 1px 2px rgba(27, 35, 48, 0.05), 0 6px 16px rgba(27, 35, 48, 0.04);
    --shadow-lift: 0 10px 24px rgba(44, 95, 138, 0.14), 0 2px 6px rgba(44, 95, 138, 0.08);
    /* Georgia (a real, system-available serif -- this app's CSP is
       same-origin only, see web/security_headers.py, and ships no
       webfonts) carries headings and the brand mark: an established,
       editorial-feeling display face reads as "serious publication /
       analyst desk," not a startup template. Body copy stays each
       platform's native UI sans. --mono is kept, deliberately narrowed
       to *only* numeric figures (price/profit/ROI) -- a fintech
       convention (tabular figures read as data), not a terminal
       reference -- using each platform's own system monospace rather
       than a coding-tool face, so it never reads as a code editor. */
    --display: Georgia, "Iowan Old Style", "Palatino Linotype", "URW Palladio L", ui-serif, serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* --- Decision / lifecycle semantics ---------------------------------
       One named token per meaning a result/hunt/status can carry, reused
       everywhere that meaning appears (result cards, hunt cards, dashboard
       badges) instead of picking a color per component. BUY and an active
       subscription both alias --success (the same "this is working"
       green); REVIEW aliases the shared amber/warn family so a REVIEW
       never reads as a rejected BUY or a duplicate of the brand accent;
       dismissed/neutral reuses the muted ink tone rather than inventing a
       new gray. */
    --buy: var(--success);
    --buy-soft: var(--success-soft);
    --saved-mark: var(--review);
    --dismissed: var(--ink-muted);
}

* { box-sizing: border-box; }

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

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.55;
}

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 0.5em;
}

a { color: var(--accent); }
a:hover { color: var(--accent-strong); }

.shell {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Header / nav ------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid transparent;
    background: rgba(245, 246, 248, 0.85);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}

.site-header.is-scrolled {
    border-bottom-color: var(--line);
    box-shadow: 0 4px 16px rgba(27, 35, 48, 0.06);
    background: rgba(255, 255, 255, 0.96);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
}

.brand {
    font-family: var(--display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent-strong);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.15s ease;
}

.brand__mark {
    color: var(--accent);
    font-size: 1.1rem;
    display: inline-block;
}

.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a {
    text-decoration: none;
    color: var(--ink);
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
}
.site-nav a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -4px;
    height: 2px;
    background: var(--accent);
    transition: right 0.2s var(--ease);
}
.site-nav a:not(.btn):hover::after { right: 0; }
.site-nav a:hover { color: var(--accent); }
.site-nav a.is-active { color: var(--accent-strong); font-weight: 700; }
.site-nav a.is-active:not(.btn)::after { right: 0; background: var(--accent-strong); }
.site-nav__muted { color: var(--ink-soft) !important; }
.site-nav__divider { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }

/* Mobile nav: hidden by default, shown only once JS confirms the toggle
   button works (progressive enhancement -- see base.html's script). Below
   the 760px breakpoint the nav becomes a dropdown panel anchored under the
   header instead of wrapping/overflowing the header row. */
.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    color: var(--accent-strong);
}
.nav-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* --- Buttons -------------------------------------------------------- */

.btn {
    display: inline-block;
    background: var(--accent);
    color: var(--on-accent) !important;
    padding: 10px 20px;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s var(--ease), box-shadow 0.2s ease;
    box-shadow: 0 1px 2px rgba(44, 95, 138, 0.12);
}

.btn:hover { background: var(--accent-strong); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(44, 95, 138, 0.12); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn--small { padding: 6px 14px; font-size: 0.85rem; }
.btn--large { padding: 14px 26px; font-size: 1.05rem; }
.btn--full { width: 100%; text-align: center; }
.btn--ghost { background: transparent; color: var(--accent-strong) !important; border: 1.5px solid var(--accent); }
.btn--ghost:hover { background: var(--accent-soft); }
.btn--danger { background: var(--danger); }
.btn--danger:hover { background: #8f1f1a; }
.btn--disabled {
    background: var(--paper-raised);
    color: var(--ink-soft) !important;
    cursor: default;
    box-shadow: none;
}
.btn--disabled:hover { background: var(--paper-raised); transform: none; box-shadow: none; }
.btn--google {
    background: var(--paper-raised);
    color: var(--ink) !important;
    border: 1px solid var(--line);
}
.btn--google:hover { background: var(--paper); }

/* --- Entrance animation ------------------------------------------------
   Deliberately plays once on load rather than being scroll-triggered:
   a scroll/IntersectionObserver-gated reveal would leave below-the-fold
   content invisible to anything that doesn't scroll first (a static
   screenshot, a test's full-page capture, a screen reader). This way the
   page is always fully visible and correct with zero JS, and still gets
   the staggered fade/slide-in motion. */

.reveal {
    animation: fade-in-up 0.6s var(--ease) both;
}
.steps .step.reveal:nth-child(2) { animation-delay: 0.08s; }
.steps .step.reveal:nth-child(3) { animation-delay: 0.16s; }
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Hero ------------------------------------------------------------ */

.hero { position: relative; padding: 88px 24px 56px; overflow: hidden; }
.hero__blob {
    /* Deliberately faint -- a hint of depth behind the hero copy, not a
       glowing decoration. A saturated blurred-color "blob" is one of the
       more common generic-SaaS/AI-template tells, so this stays a
       near-invisible, monochrome-blue tint rather than a vivid pop. */
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
    pointer-events: none;
    animation: blob-float 18s ease-in-out infinite;
}
.hero__blob--one {
    width: 420px;
    height: 420px;
    top: -140px;
    right: -80px;
    background: radial-gradient(circle at 30% 30%, rgba(44, 95, 138, 0.08), transparent 70%);
}
.hero__blob--two {
    width: 320px;
    height: 320px;
    bottom: -160px;
    right: 220px;
    background: radial-gradient(circle at 60% 40%, rgba(29, 66, 96, 0.06), transparent 70%);
    animation-delay: -7s;
}
@keyframes blob-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-18px, 22px) scale(1.06); }
}
.hero__text { position: relative; z-index: 1; max-width: 640px; }
.hero h1 { font-size: 2.4rem; }
.hero__lede { font-size: 1.15rem; color: var(--ink-soft); margin-bottom: 28px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    color: var(--accent-strong);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}
.live-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 rgba(44, 95, 138, 0.35);
    animation: live-pulse 2s infinite;
}
@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(44, 95, 138, 0.3); }
    70% { box-shadow: 0 0 0 6px rgba(44, 95, 138, 0); }
    100% { box-shadow: 0 0 0 0 rgba(44, 95, 138, 0); }
}
/* A separate, success-green pulse for status dots that mean "healthy /
   active" (e.g. an ACTIVE subscription badge) rather than "this feature
   is live" -- kept as its own keyframes so recoloring one context never
   bleeds into the other. */
@keyframes live-pulse-success {
    0% { box-shadow: 0 0 0 0 rgba(28, 122, 74, 0.3); }
    70% { box-shadow: 0 0 0 6px rgba(28, 122, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(28, 122, 74, 0); }
}

.how-it-works { padding: 40px 24px 56px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 28px; position: relative; }
.step {
    position: relative;
    padding: 22px;
    border-radius: var(--radius);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}
.step:hover {
    transform: translateY(-5px);
    background: var(--paper-raised);
    box-shadow: var(--shadow-lift);
}
.step__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 700;
    font-family: var(--display);
    margin-bottom: 10px;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.step:hover .step__index { background: var(--accent); color: var(--on-accent); }
.step h3 { font-size: 1.1rem; margin-top: 4px; }
.step p { color: var(--ink-soft); font-size: 0.95rem; }

/* --- Alert preview ------------------------------------------------------ */

.alert-preview {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: center;
    padding: 32px 24px 56px;
}
.alert-preview__text p { color: var(--ink-soft); font-size: 1rem; margin-top: 12px; }
.alert-preview__bubble {
    position: relative;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    padding: 22px 24px;
    font-family: var(--mono);
    transition: transform 0.25s var(--ease);
}
.alert-preview__bubble:hover { transform: translateY(-4px) rotate(-0.4deg); }
.alert-preview__tag {
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--success);
    color: var(--on-accent);
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}
.alert-preview__line { margin: 0 0 8px; font-size: 0.88rem; color: var(--ink); }
.alert-preview__line--title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--accent-strong);
}
.alert-preview__line--highlight { color: var(--success); font-weight: 700; }

/* --- FAQ ------------------------------------------------------------- */

.faq { padding: 32px 24px 56px; }
.faq__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 32px; margin-top: 24px; }
.faq__item h3 { font-size: 1rem; margin-bottom: 6px; }
.faq__item p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

.cta-band {
    position: relative;
    padding: 56px 24px;
    text-align: center;
    border-top: 1px solid var(--line);
    margin-top: 24px;
    overflow: hidden;
}
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(44, 95, 138, 0.06) 0%, transparent 65%);
    z-index: 0;
}
.cta-band h2, .cta-band p, .cta-band a { position: relative; z-index: 1; }
.cta-band p { color: var(--ink-soft); margin-bottom: 22px; }

/* --- Pricing ----------------------------------------------------------- */

.pricing-page { padding: 56px 24px 72px; }
.pricing-page h1 { font-size: 2rem; text-align: center; }
.pricing-page__lede {
    max-width: 560px;
    margin: 0 auto 40px;
    text-align: center;
    color: var(--ink-soft);
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
}
.plan-card {
    position: relative;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s ease;
}
.plan-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--accent); }
.plan-card--highlighted { border-color: var(--accent); border-width: 2px; }
.plan-card--highlighted:hover { transform: translateY(-8px); }
.plan-card__tag {
    position: absolute;
    top: -12px;
    left: 24px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}
.plan-card h2 { font-size: 1.3rem; }
.plan-card__note { color: var(--ink-soft); font-size: 0.82rem; margin-top: 8px; text-align: center; }
.plan-card__price { font-size: 1.4rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.plan-card__tagline { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 18px; }
.plan-card__features { list-style: none; padding: 0; margin: 0 0 24px; flex-grow: 1; }
.plan-card__features li {
    padding: 7px 0;
    border-top: 1px solid var(--line);
    font-size: 0.92rem;
}
.plan-card__features li:first-child { border-top: none; }
.pricing-page__note {
    text-align: center;
    color: var(--ink-soft);
    font-size: 0.9rem;
    margin-top: 36px;
}
.pricing-page__legal {
    text-align: center;
    color: var(--ink-soft);
    font-size: 0.8rem;
    margin-top: 16px;
}

/* Visually hidden but still readable by screen readers/assistive tech --
   for a label whose text is already obvious from surrounding context
   (a heading, a button) but that a form control still needs
   programmatically for accessibility. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.legal-page { max-width: 720px; padding-top: 40px; padding-bottom: 64px; }
.legal-page__updated { color: var(--ink-soft); font-size: 0.88rem; margin-bottom: 24px; }
.legal-page__body h2 { font-size: 1.15rem; margin-top: 2em; }
.legal-page__body h2:first-child { margin-top: 0; }
.legal-page__body p { margin: 0 0 1.1em; }
.legal-page__body code {
    background: var(--accent-soft);
    color: var(--accent-strong);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.85em;
}

/* --- Auth forms ------------------------------------------------------ */

.auth-page { padding: 56px 24px; display: flex; justify-content: center; }
.auth-card {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 36px;
    width: 100%;
    max-width: 400px;
}
.auth-card--centered { text-align: center; }
.auth-card h1 { font-size: 1.6rem; }
/* error.html's HTTP status badge: same visual as .plan-card__tag but not
   absolutely positioned against a relatively-positioned card, since
   error.html's card has no such ancestor. */
.error-page__code { position: static; display: inline-block; margin-bottom: 16px; }
.auth-card__subtitle { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 22px; }
.auth-form { display: flex; flex-direction: column; gap: 6px; }
.auth-form label { font-size: 0.85rem; font-weight: 600; margin-top: 10px; }
.auth-form input {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: var(--sans);
}
.auth-form input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.auth-form .btn { margin-top: 18px; }
.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
    color: var(--ink-soft);
    font-size: 0.82rem;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-card__footer { text-align: center; margin-top: 20px; font-size: 0.88rem; color: var(--ink-soft); }
.auth-card__legal { text-align: center; margin-top: 12px; font-size: 0.8rem; color: var(--ink-soft); }
.onboarding-examples { margin-top: 10px; font-family: var(--mono); font-size: 0.82rem; line-height: 1.7; }
.form-error {
    background: var(--danger-soft);
    color: var(--danger);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    margin-bottom: 14px;
}

/* --- Dashboard --------------------------------------------------------- */

.dashboard { padding: 40px 24px 64px; }
.dashboard__head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.dashboard__head h1 { margin: 0; font-size: 1.7rem; }

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.status-badge--active { background: var(--success-soft); color: var(--success); }
.status-badge--pending_payment { background: var(--warn-soft); color: var(--warn); }
.status-badge--past_due { background: var(--warn-soft); color: var(--warn); }
.status-badge--canceled { background: var(--danger-soft); color: var(--danger); }
.status-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    animation: live-pulse-success 2s infinite;
}

.banner {
    background: var(--accent-soft);
    color: var(--accent-strong);
    padding: 14px 18px;
    border-radius: var(--radius);
    font-size: 0.92rem;
    margin-bottom: 24px;
}
.banner--warning { background: var(--warn-soft); color: var(--warn); }
.banner__action { margin-top: 10px; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.stat-tile {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.stat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.stat-tile__label {
    font-size: 0.78rem;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.stat-tile__value {
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
}

.dashboard__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}
.card {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card--wide { grid-column: 1 / -1; }
.card--wide:hover { transform: none; box-shadow: var(--shadow); }
.card h2 { font-size: 1.05rem; margin-bottom: 12px; }
.card__status { font-size: 0.95rem; margin: 0 0 14px; }
.card__status--muted { color: var(--ink-soft); }
.card__hint { color: var(--ink-soft); font-size: 0.85rem; }

.link-code {
    background: var(--paper);
    border: 1px dashed var(--line);
    border-radius: 8px;
    padding: 14px;
}
.link-code code {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: var(--accent-soft);
    color: var(--accent-strong);
    padding: 8px 12px;
    border-radius: 6px;
    margin: 8px 0;
}

.settings-form { display: flex; flex-direction: column; gap: 6px; }
.settings-form label { font-size: 0.85rem; font-weight: 600; margin-top: 10px; }
.settings-form input,
.settings-form select,
.settings-form textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.92rem;
    font-family: var(--sans);
}
.settings-form input:focus,
.settings-form select:focus,
.settings-form textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.settings-form textarea { resize: vertical; }
.settings-form input:disabled { color: var(--ink-soft); background: var(--paper); }
.settings-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
/* A single field that doesn't pair up with a sibling (e.g. "Primary
   market") -- capped width so it doesn't stretch full-bleed across a
   wide card the way a lone .settings-form__row grid cell would. */
.settings-form__field { max-width: 360px; }
.settings-form .btn { margin-top: 20px; align-self: flex-start; }

/* --- Deal Hunts (Custom Deal Hunt Phase 4) ------------------------------ */

.status-badge--paused { background: var(--warn-soft); color: var(--warn); }

.hunt-list { display: flex; flex-direction: column; gap: 16px; }
.hunt-card { display: flex; flex-direction: column; gap: 4px; }
.hunt-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.hunt-card__head h2 { margin: 0; }
.hunt-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.hunt-card__actions form { margin: 0; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.chip {
    display: inline-flex;
    align-items: center;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.78rem;
    padding: 3px 10px;
    border-radius: 999px;
}

/* --- Dashboard greeting / section heads (Custom Deal Hunt Phase 12,
   frontend design pass) --------------------------------------------- */

.dashboard__greeting { font-size: 1.7rem; margin-bottom: 2px; }
.dashboard__subhead { color: var(--ink-soft); font-size: 1.02rem; margin: 0 0 20px; }
.dashboard__cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 36px 0 14px;
}
.section-head h2 { margin: 0; font-size: 1.2rem; }
.section-head__count { font-family: var(--mono); color: var(--ink-soft); font-size: 0.88rem; }

/* --- Result cards (Custom Deal Hunt Phase 12): replaces the old dense
   admin-table on the hunt detail page -- task's own explicit "a result
   should make it possible to understand the opportunity in seconds"
   requirement. One card per opportunity; the left edge encodes the
   decision as color AND the badge repeats it as text, so nothing here
   depends on color alone (task STEP 14). Every numeric figure uses
   --mono so a column of prices/profit/ROI reads as data, not prose. */

.result-list { display: flex; flex-direction: column; gap: 10px; }
.result-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-left: 4px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 18px;
    transition: box-shadow 0.2s ease, transform 0.2s var(--ease);
}
.result-card:hover { box-shadow: var(--shadow); }
.result-card--buy { border-left-color: var(--buy); }
.result-card--review { border-left-color: var(--review); }
.result-card--dismissed { opacity: 0.55; }
.result-card--dismissed:hover { opacity: 0.85; }

.result-card__decision {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 4px 10px;
    border-radius: 999px;
    min-width: 66px;
}
.result-card--buy .result-card__decision { background: var(--buy-soft); color: var(--buy); }
.result-card--review .result-card__decision { background: var(--review-soft); color: var(--review); }

.result-card__main { flex: 1 1 260px; min-width: 0; }
.result-card__title {
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.result-card__title:hover { color: var(--accent); }
.result-card__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--ink-soft); font-size: 0.82rem; margin-top: 2px; }
.result-card__meta .is-saved { color: var(--saved-mark); font-weight: 600; }

.result-card__figures { flex: 0 0 auto; display: flex; gap: 22px; }
.figure { display: flex; flex-direction: column; gap: 1px; min-width: 64px; }
.figure__label { font-size: 0.7rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.figure__value { font-family: var(--mono); font-size: 0.98rem; font-weight: 600; color: var(--ink); }
.figure__value--profit { color: var(--buy); }
.figure__value--muted { color: var(--ink-soft); font-weight: 400; }

.result-card__actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.result-card__actions form { margin: 0; }

@media (max-width: 640px) {
    .result-card { flex-direction: column; align-items: stretch; }
    .result-card__figures { gap: 16px; flex-wrap: wrap; }
    .result-card__actions { margin-left: 0; }
}

/* --- Footer ------------------------------------------------------------ */

.site-footer { border-top: 1px solid var(--line); margin-top: 40px; }
.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 20px;
    padding: 24px;
    font-size: 0.82rem;
    color: var(--ink-soft);
}

/* --- Admin surface ------------------------------------------------------- */

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 0.92rem;
}
.admin-table th, .admin-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.admin-table th { background: var(--accent-soft); color: var(--accent-strong); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(44, 95, 138, 0.05); }
.admin-table a { font-weight: 600; }
.admin-table__scroll { overflow-x: auto; }
.admin-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 20px; }
.admin-meta__item { display: flex; flex-direction: column; }
.admin-meta__item span:first-child { font-size: 0.78rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.admin-meta__item span:last-child { font-weight: 600; }
.admin-inline-form { display: inline-flex; gap: 8px; align-items: center; }
.admin-inline-form select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-family: var(--sans); }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 760px) {
    .steps { grid-template-columns: 1fr; }
    .settings-form__row { grid-template-columns: 1fr; }
    .hero h1 { font-size: 1.9rem; }
    .alert-preview { grid-template-columns: 1fr; }
    .faq__grid { grid-template-columns: 1fr; }

    /* Scoped to the header's own nav only -- .site-nav is also reused on
       the Deal Hunt detail page for its All/BUY/REVIEW and lifecycle
       filter pill groups, which must stay visible (not collapsed into a
       hidden dropdown) at every width. */
    .nav-toggle { display: inline-flex; }
    .site-header .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: var(--paper-raised);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 12px 24px rgba(27, 35, 48, 0.12);
        padding: 10px 24px 16px;
        display: none;
    }
    .site-header .site-nav.is-open { display: flex; }
    .site-header .site-nav a { padding: 10px 0; }
    .site-header .site-nav a:not(.btn)::after { display: none; }
    .site-header .site-nav__divider { display: none; }
    .site-header__inner { position: relative; }
}