/*
   Delve conversion refresh
   A familiar, product-led SaaS funnel with system-matched light and dark
   themes, one blue action color, direct CTAs, and an explicit price decision.
*/

:root {
    color-scheme: light dark;
    /* Two blues, one job each: --funnel-action fills controls (white label
       needs 4.5:1 on it), --funnel-blue is the text/link accent (needs
       4.5:1 on white AND on the soft gray sections). Measured 2026-07. */
    --funnel-action: #0071e3;
    --funnel-action-hover: #0077ed;
    --funnel-blue: #0066cc;
    --funnel-blue-hover: #005bb8;
    --funnel-ink: #1d1d1f;
    --funnel-copy: #5f6368;
    --funnel-muted: #6e6e73;
    --funnel-surface: #ffffff;
    --funnel-soft: #f5f5f7;
    --funnel-line: rgba(0, 0, 0, .09);
    --funnel-shadow: 0 32px 90px rgba(26, 38, 55, .16);
    --funnel-radius: 30px;

    /* App demo window. The mockup follows the visitor's appearance, the
       same way the real app follows macOS. One token set, flipped once
       in the dark block below, so the window never strands a dark slab
       on a light page again. */
    --demo-window: #ffffff;                 /* window body */
    --demo-bar: #f6f6f8;                    /* titlebar, toolbar, table heads */
    --demo-panel: #f9f9fb;                  /* sidebars */
    --demo-canvas: #e9ebee;                 /* treemap backdrop */
    --demo-inset: #eef0f3;                  /* recessed wells: segments, tabs, status */
    --demo-field: #ffffff;                  /* text fields, path pill */
    --demo-card: #ffffff;                   /* small stat cards */
    --demo-fill: rgba(0, 0, 0, .04);        /* quiet fills */
    --demo-ink: #1d1d1f;
    --demo-copy: #65656a;
    --demo-faint: #98989d;                  /* decorative labels only */
    --demo-line: rgba(0, 0, 0, .085);
    --demo-line-strong: rgba(0, 0, 0, .16);
    --demo-accent: var(--funnel-action);
    --demo-accent-soft: rgba(0, 113, 227, .1);
    --demo-pop: rgba(255, 255, 255, .97);   /* tooltips, floating hints */
    --demo-pop-shadow: 0 10px 30px rgba(30, 40, 55, .18);
    --demo-scrim: rgba(0, 0, 0, .42);
}

html { scroll-behavior: smooth; }

body.delve-page {
    color: var(--funnel-ink);
    background: var(--funnel-surface);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Helvetica, Arial, sans-serif;
}

body.delve-page main { background: var(--funnel-surface); }

body.delve-page .reading,
body.delve-page .reading-wide {
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
}

body.delve-page a:focus-visible,
body.delve-page button:focus-visible,
body.delve-page summary:focus-visible {
    outline: 3px solid rgba(0, 113, 227, .38);
    outline-offset: 3px;
}

/* Product navigation */
body.delve-page #nav {
    height: 56px;
    padding: 0 24px;
    color: var(--funnel-ink);
    background: rgba(255, 255, 255, .82);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    box-shadow: none;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

body.delve-page #nav.scrolled {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 10px 32px rgba(23, 31, 43, .06);
}

body.delve-page #nav::after { display: none; }

body.delve-page .nav-inner {
    width: min(100%, 1180px);
    height: 56px;
}

body.delve-page .nav-logo-glyph { color: var(--funnel-blue); }
body.delve-page .nav-logo-text { color: var(--funnel-ink); }
body.delve-page .nav-logo-studio { color: #7a7a7f; }
body.delve-page .nav-logo-studio::before { background: rgba(0, 0, 0, .16); }
body.delve-page .nav-logo-studio:hover { color: var(--funnel-ink); }
body.delve-page .nav-links {
    gap: 26px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
body.delve-page .nav-links a { color: #424245; font-weight: 500; }
body.delve-page .nav-links a:hover { color: #000; }

body.delve-page .nav-cta {
    padding: 8px 15px;
    color: #fff !important;
    background: var(--funnel-action);
    box-shadow: none;
}

body.delve-page .nav-cta:hover { color: #fff !important; background: var(--funnel-action-hover); }

body.delve-page .nav-mobile-toggle span { background: var(--funnel-ink); }

/* Shared actions */
body.delve-page .btn {
    min-height: 50px;
    padding: 13px 24px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.012em;
}

body.delve-page .btn-primary {
    color: #fff;
    background: var(--funnel-action);
    box-shadow: 0 8px 22px rgba(0, 113, 227, .2);
}

body.delve-page .btn-primary:hover {
    color: #fff;
    background: var(--funnel-action-hover);
    box-shadow: 0 10px 26px rgba(0, 113, 227, .25);
}

body.delve-page .btn-secondary {
    color: var(--funnel-blue);
    background: transparent;
    border: 1px solid rgba(0, 113, 227, .28);
}

body.delve-page .btn-secondary:hover {
    color: #005bb5;
    background: rgba(0, 113, 227, .05);
    border-color: rgba(0, 113, 227, .42);
}

/* Hero: promise, action, proof, product — all in the first screen. */
body.delve-page #hero {
    position: relative;
    padding: clamp(128px, 13vw, 168px) 0 96px;
    color: var(--funnel-ink);
    background:
        radial-gradient(circle at 50% 18%, rgba(57, 147, 255, .12), transparent 32%),
        linear-gradient(180deg, #fff 0%, #fff 58%, #f5f8fc 100%);
}

body.delve-page #hero-canvas { display: none; }

body.delve-page #hero > .reading:first-of-type {
    max-width: 920px;
    padding: 0 28px;
    text-align: center;
}

body.delve-page .product-lockup {
    margin: 0 0 20px;
    color: var(--funnel-blue);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
}

body.delve-page .hero-title {
    max-width: 900px;
    margin: 0 auto;
    color: var(--funnel-ink);
    font-size: clamp(3.9rem, 7.1vw, 6.6rem);
    font-weight: 700;
    line-height: .96;
    letter-spacing: -.066em;
    text-wrap: balance;
}

body.delve-page #hero .lede {
    max-width: 720px;
    margin: 28px auto 0;
    color: var(--funnel-copy);
    font-size: clamp(1.18rem, 2vw, 1.45rem);
    font-weight: 450;
    line-height: 1.48;
    letter-spacing: -.025em;
    text-wrap: balance;
}

body.delve-page #hero .hero-actions {
    justify-content: center;
    gap: 12px;
    margin-top: 31px;
}

body.delve-page #hero .hero-meta {
    margin-top: 15px;
    color: var(--funnel-muted);
    font-size: .82rem;
}

body.delve-page .trust-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px 28px;
    max-width: 960px;
    margin-top: 38px;
    padding: 0 28px;
    color: #646469;
    font-size: .83rem;
    font-weight: 600;
    text-align: center;
}

body.delve-page .trust-line span { padding: 0; color: inherit; white-space: nowrap; }
body.delve-page .trust-line b { color: #20a15a; font-weight: 800; }

body.delve-page .hero-figure {
    position: relative;
    width: min(calc(100% - 48px), 1180px);
    margin: 64px auto 0;
    padding: 0;
}

body.delve-page .mac-window {
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 20px;
    box-shadow: var(--funnel-shadow), 0 1px 0 rgba(255, 255, 255, .8) inset;
}

body.delve-page .hero-figure figcaption {
    max-width: 720px;
    margin: 28px auto 0;
    color: #75757a;
    font-size: .83rem;
    line-height: 1.55;
}

body.delve-page .hero-figure figcaption strong { color: #424245; }

body.delve-page .product-proof {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 190px;
    padding: 17px 19px;
    color: var(--funnel-ink);
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 17px;
    box-shadow: 0 16px 44px rgba(30, 44, 65, .16);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

body.delve-page .product-proof strong { font-size: 1.12rem; letter-spacing: -.025em; }
body.delve-page .product-proof span { color: #727277; font-size: .73rem; font-weight: 500; }
body.delve-page .product-proof-space { right: -28px; bottom: 88px; }
body.delve-page .product-proof-space strong { color: #18864b; font-size: 1.85rem; }
body.delve-page .product-proof-private { left: -28px; top: 70px; }

/* Feature proof */
body.delve-page #features {
    width: 100%;
    max-width: none;
    padding: clamp(105px, 11vw, 150px) var(--edge);
    color: var(--funnel-ink);
    background: var(--funnel-soft);
}

body.delve-page .showcase-heading {
    max-width: 850px;
    margin: 0 auto 64px;
    text-align: center;
}

body.delve-page .eyebrow,
body.delve-page .showcase-heading .eyebrow {
    color: var(--funnel-blue);
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .01em;
}

body.delve-page .showcase-heading h2 {
    margin: 0;
    color: var(--funnel-ink);
    font-size: clamp(3rem, 6vw, 5.6rem);
    letter-spacing: -.062em;
}

body.delve-page #features .feature-showcase { gap: 16px; }

body.delve-page #features .showcase-card {
    color: var(--funnel-ink);
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .055);
    border-radius: 26px;
    box-shadow: 0 14px 38px rgba(30, 38, 50, .045);
}

body.delve-page #features .showcase-kicker { color: var(--funnel-blue); }
body.delve-page #features .showcase-copy h3 { color: var(--funnel-ink); }
body.delve-page #features .showcase-copy p { color: var(--funnel-copy); }

body.delve-page #features .inspect-card {
    background: #f6f8fb;
    border-color: rgba(0, 0, 0, .065);
}
body.delve-page #features .inspect-title strong { color: var(--funnel-ink); }
body.delve-page #features .inspect-title small,
body.delve-page #features .inspect-facts dt { color: var(--funnel-muted); }
body.delve-page #features .inspect-facts dd { color: var(--funnel-ink); }
body.delve-page #features .inspect-facts .inspect-stale { color: #955e0a; }
body.delve-page #features .inspect-btn { color: #075fbc; background: #e7f2ff; }
body.delve-page #features .preview-icon { color: #075fbc; background: #e7f2ff; }

body.delve-page #features .safe-delete {
    color: var(--funnel-ink);
    background: #f6f8fb;
    border-color: rgba(0, 0, 0, .065);
}
body.delve-page #features .safe-delete-title strong { color: var(--funnel-ink); }
body.delve-page #features .safe-delete-title small,
body.delve-page #features .safe-delete-list dt { color: var(--funnel-muted); }
body.delve-page #features .safe-delete-list dd { color: var(--funnel-ink); }
body.delve-page #features .safe-delete-note { color: var(--funnel-copy); }
body.delve-page #features .safe-delete-undo { color: #075fbc; background: #e7f2ff; }

@media (hover: hover) {
    body.delve-page:not(.js-anim) #features .showcase-card:hover,
    body.js-anim #features .showcase-card.is-in:hover {
        border-color: rgba(0, 113, 227, .2);
        box-shadow: 0 20px 48px rgba(30, 38, 50, .08);
    }
}

/* Technical trust, written as plain proof instead of technical theater. */
body.delve-page #honest {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(105px, 11vw, 150px) var(--edge);
    color: var(--funnel-ink);
    background: #fff;
    border: 0;
    border-radius: 0;
}

body.delve-page #honest .eyebrow { color: var(--funnel-blue); }
body.delve-page #honest h2 {
    color: var(--funnel-ink);
    font-size: clamp(3rem, 5.6vw, 5.2rem);
}

body.delve-page #honest > p:not(.eyebrow):not(.callout-link) {
    color: var(--funnel-copy);
    font-size: 1.18rem;
}

body.delve-page #honest .acc-list {
    gap: 16px;
    margin-top: 54px;
    border: 0;
}

body.delve-page #honest .acc,
body.delve-page #honest .acc + .acc {
    padding: 30px;
    background: var(--funnel-soft);
    border: 1px solid rgba(0, 0, 0, .055);
    border-radius: 20px;
    box-shadow: none;
}

body.delve-page #honest .acc + .acc { padding-left: 30px; border-left: 1px solid rgba(0, 0, 0, .055); }
body.delve-page #honest .acc-head,
body.delve-page #honest .acc-grid > span,
body.delve-page #honest .acc-note { color: var(--funnel-copy); }
body.delve-page #honest .acc-head code { color: #424245; }
body.delve-page #honest .acc-val { color: var(--funnel-ink); }
body.delve-page #honest .acc-grid > span.acc-real { color: #18864b; }
body.delve-page #honest .callout-link { display: none; }

/* Privacy is the strong trust chapter. A calm panel in the page's own
   palette: the trust reads from the words and the whitespace, not from a
   change of temperature. */
body.delve-page #privacy {
    grid-template-columns: minmax(280px, .9fr) minmax(340px, .75fr);
    gap: clamp(50px, 9vw, 130px);
    width: min(calc(100% - 48px), 1180px);
    max-width: none;
    margin: 0 auto clamp(105px, 11vw, 150px);
    padding: clamp(62px, 8vw, 100px);
    color: var(--funnel-ink);
    background: var(--funnel-soft);
    border: 1px solid var(--funnel-line);
    border-radius: var(--funnel-radius);
    box-shadow: none;
}

body.delve-page #privacy .privacy-mark { color: var(--funnel-blue); opacity: .85; }
body.delve-page #privacy .eyebrow { color: var(--funnel-blue); }
body.delve-page #privacy h2 { color: var(--funnel-ink); font-size: clamp(2.8rem, 5.5vw, 5.1rem); }
body.delve-page #privacy .privacy-copy { color: var(--funnel-copy); }

/* Pricing */
body.delve-page #pricing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
    align-items: center;
    gap: clamp(54px, 9vw, 130px);
    width: min(calc(100% - 48px), 1180px);
    max-width: none;
    padding: clamp(80px, 9vw, 120px) 0;
}

body.delve-page .pricing-copy { max-width: 650px; }
body.delve-page .pricing-copy h2 {
    margin: 12px 0 24px;
    color: var(--funnel-ink);
    font-size: clamp(3rem, 5.7vw, 5.35rem);
    line-height: .97;
    letter-spacing: -.062em;
}

body.delve-page .pricing-copy > p:last-child {
    max-width: 580px;
    color: var(--funnel-copy);
    font-size: 1.15rem;
    line-height: 1.55;
}

body.delve-page .pricing-card {
    padding: 34px;
    background: var(--funnel-soft);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 25px;
    box-shadow: 0 24px 62px rgba(35, 45, 60, .08);
}

body.delve-page .pricing-label {
    margin: 0;
    color: var(--funnel-copy);
    font-size: .88rem;
    font-weight: 700;
}

body.delve-page .pricing-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 8px 0 24px;
}

body.delve-page .pricing-price strong {
    color: var(--funnel-ink);
    font-size: 3.8rem;
    line-height: 1;
    letter-spacing: -.06em;
}

body.delve-page .pricing-price span { color: var(--funnel-muted); font-size: .92rem; font-weight: 600; }

body.delve-page .pricing-card ul {
    display: grid;
    gap: 12px;
    margin: 0 0 28px;
    padding: 22px 0 0;
    list-style: none;
    border-top: 1px solid var(--funnel-line);
}

body.delve-page .pricing-card li {
    position: relative;
    padding-left: 25px;
    color: #424245;
    font-size: .94rem;
}

body.delve-page .pricing-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #18864b;
    font-weight: 800;
}

body.delve-page .pricing-card .btn { width: 100%; justify-content: center; }
body.delve-page .pricing-card small { display: block; margin-top: 13px; color: var(--funnel-muted); font-size: .72rem; text-align: center; }

/* FAQ and teams */
body.delve-page #faq {
    width: min(100%, 880px);
    padding: clamp(90px, 10vw, 135px) 28px;
    color: var(--funnel-ink);
    text-align: left;
}

body.delve-page #faq > h2 { color: var(--funnel-ink); font-size: clamp(2.9rem, 5vw, 4.7rem); }
body.delve-page #faq .faq { max-width: none; }
body.delve-page .faq details { border-color: var(--funnel-line); }
body.delve-page .faq summary { color: var(--funnel-ink); }
body.delve-page .faq details > p { color: var(--funnel-copy); }
body.delve-page .faq a { color: var(--funnel-blue); }

body.delve-page .enterprise-callout {
    width: min(calc(100% - 48px), 1180px);
    margin: 0 auto;
    padding: 48px 0;
    color: var(--funnel-ink);
    background: transparent;
    border-top: 1px solid var(--funnel-line);
    border-bottom: 1px solid var(--funnel-line);
    border-radius: 0;
}

body.delve-page .enterprise-callout h2 { color: var(--funnel-ink); }
body.delve-page .enterprise-callout p { color: var(--funnel-copy); }
body.delve-page .enterprise-callout .btn { color: var(--funnel-blue); white-space: nowrap; }

/* Final conversion. Same promise as the hero, same calm surface: the one
   blue button is the loudest thing on screen. */
body.delve-page #download {
    width: min(calc(100% - 48px), 1180px);
    max-width: none;
    margin: clamp(90px, 10vw, 135px) auto;
    padding: clamp(72px, 9vw, 116px) 32px;
    color: var(--funnel-ink);
    text-align: center;
    background: var(--funnel-soft);
    border: 1px solid var(--funnel-line);
    border-radius: var(--funnel-radius);
    box-shadow: none;
}

body.delve-page #download .eyebrow { color: var(--funnel-blue); }
body.delve-page #download h2 { color: var(--funnel-ink); font-size: clamp(3.1rem, 6vw, 5.7rem); }
body.delve-page #download > p:first-of-type { color: var(--funnel-copy); }
body.delve-page #download .hero-meta { color: var(--funnel-muted); }
body.delve-page #download .signoff { color: var(--funnel-muted); border-top-color: var(--funnel-line); }
body.delve-page #download a:not(.btn) { color: var(--funnel-blue); }

/* Footer follows the appearance too; the near-black slab is gone. */
body.delve-page #footer { background: var(--funnel-soft); border-top: 1px solid var(--funnel-line); }
body.delve-page .footer-brand { color: var(--funnel-copy); }
body.delve-page .footer-brand a { color: var(--funnel-ink); text-decoration-color: var(--funnel-line); }
body.delve-page .footer-brand a:hover { text-decoration-color: var(--funnel-blue); }
body.delve-page .footer-links a { color: var(--funnel-muted); }
body.delve-page .footer-links a:hover { color: var(--funnel-blue); }
body.delve-page .footer-copy { color: var(--funnel-muted); }

/* Mobile conversion bar stays out of the desktop experience. */
body.delve-page .mobile-conversion-bar { display: none; }

@media (max-width: 980px) {
    body.delve-page .nav-links { gap: 17px; }
    body.delve-page .nav-links a:not(.nav-cta) { display: none; }
    body.delve-page .product-proof { display: none; }

    body.delve-page #pricing { gap: 54px; }
}

@media (max-width: 760px) {
    body.delve-page #nav { padding: 0 18px; }
    body.delve-page .nav-links a:not(.nav-cta) { display: block; }
    body.delve-page .nav-links.open {
        top: 56px;
        right: 0;
        left: 0;
        gap: 0;
        width: auto;
        padding: 10px 24px 22px;
        color: var(--funnel-ink);
        background: #fff;
        border-bottom: 1px solid var(--funnel-line);
        border-radius: 0;
        box-shadow: 0 20px 40px rgba(24, 34, 48, .1);
    }
    body.delve-page .nav-links.open a { color: var(--funnel-ink); }
    body.delve-page .nav-links.open .nav-cta { color: #fff !important; }

    body.delve-page #hero {
        padding-top: 112px;
        padding-bottom: 72px;
    }

    body.delve-page #hero > .reading:first-of-type { text-align: left; }
    body.delve-page .product-lockup { margin-bottom: 16px; }
    body.delve-page .hero-title { font-size: clamp(3.25rem, 15vw, 5rem); }
    body.delve-page #hero .lede { margin-left: 0; font-size: 1.1rem; }
    body.delve-page #hero .hero-actions { align-items: stretch; justify-content: flex-start; }
    body.delve-page #hero .hero-actions .btn { justify-content: center; }
    body.delve-page .trust-line { justify-content: flex-start; flex-wrap: wrap; text-align: left; }

    body.delve-page .hero-figure { width: calc(100% - 24px); margin-top: 44px; }
    body.delve-page .mac-window { border-radius: 14px; }
    body.delve-page .hero-figure figcaption { padding: 0 12px; text-align: left; }

    body.delve-page #features { padding: 88px 22px; }
    body.delve-page .showcase-heading { text-align: left; }

    body.delve-page #honest { padding: 88px 22px; }
    body.delve-page #honest .acc + .acc { padding-left: 24px; border-left: 1px solid rgba(0, 0, 0, .055); }

    body.delve-page #privacy {
        grid-template-columns: 1fr;
        gap: 22px;
        width: calc(100% - 24px);
        margin-bottom: 80px;
        padding: 48px 26px;
        border-radius: 24px;
    }

    body.delve-page #privacy .privacy-mark { position: static; margin-bottom: 10px; }
    body.delve-page #privacy .privacy-copy { padding-top: 0; }

    body.delve-page #pricing {
        grid-template-columns: 1fr;
        gap: 44px;
        width: calc(100% - 44px);
        padding: 80px 0;
    }

    body.delve-page .pricing-card { padding: 28px 24px; }
    body.delve-page #faq { padding: 82px 22px; }

    body.delve-page .enterprise-callout {
        width: calc(100% - 44px);
        padding: 40px 0;
    }

    body.delve-page #download {
        width: calc(100% - 24px);
        margin: 80px auto 112px;
        padding: 64px 24px;
        text-align: left;
        border-radius: 24px;
    }

    body.delve-page #download h2 { margin-left: 0; }
    body.delve-page #download .hero-actions { justify-content: flex-start; }
    body.delve-page #download .signoff { margin-left: 0; }

    body.delve-page .mobile-conversion-bar {
        position: fixed;
        right: 10px;
        bottom: 10px;
        left: 10px;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 10px 10px 10px 16px;
        color: var(--funnel-ink);
        background: rgba(255, 255, 255, .94);
        border: 1px solid rgba(0, 0, 0, .08);
        border-radius: 16px;
        box-shadow: 0 18px 48px rgba(18, 28, 42, .2);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }

    body.delve-page .mobile-conversion-bar span { display: flex; flex-direction: column; }
    body.delve-page .mobile-conversion-bar strong { font-size: .92rem; }
    body.delve-page .mobile-conversion-bar small { color: var(--funnel-muted); font-size: .67rem; }
    body.delve-page .mobile-conversion-bar a {
        padding: 10px 16px;
        color: #fff;
        background: var(--funnel-action);
        border-radius: 999px;
        font-size: .82rem;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }
}

@media (max-width: 520px) {
    body.delve-page .nav-logo-studio { display: none; }
    body.delve-page #hero .hero-actions { flex-direction: column; }
    body.delve-page .trust-line { gap: 10px 18px; }
    body.delve-page .trust-line span { white-space: normal; }
    body.delve-page .pricing-copy h2 { font-size: 3.1rem; }
    body.delve-page #honest .acc,
    body.delve-page #honest .acc + .acc { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/*
   Dark appearance follows the visitor's operating-system preference.
   The layout and hierarchy remain identical so switching appearance never
   changes the conversion flow or moves content around.
*/
@media (prefers-color-scheme: dark) {
    :root {
        --funnel-action: #0071e3;
        --funnel-action-hover: #1a80ea;
        --funnel-blue: #2997ff;
        --funnel-blue-hover: #40a9ff;
        --funnel-ink: #f5f5f7;
        --funnel-copy: #a1a1a6;
        --funnel-muted: #86868b;
        --funnel-surface: #080b10;
        --funnel-soft: #0f141b;
        --funnel-line: rgba(255, 255, 255, .11);
        --funnel-shadow: 0 34px 100px rgba(0, 0, 0, .58);

        --demo-window: #15181e;
        --demo-bar: #1a1e25;
        --demo-panel: #171b21;
        --demo-canvas: #0b0e12;
        --demo-inset: #0d1015;
        --demo-field: #0d1015;
        --demo-card: rgba(255, 255, 255, .05);
        --demo-fill: rgba(255, 255, 255, .05);
        --demo-ink: #f5f5f7;
        --demo-copy: #a1a1a6;
        --demo-faint: #7c7c81;
        --demo-line: rgba(255, 255, 255, .09);
        --demo-line-strong: rgba(255, 255, 255, .18);
        --demo-accent-soft: rgba(41, 151, 255, .16);
        --demo-pop: rgba(26, 30, 37, .96);
        --demo-pop-shadow: 0 10px 30px rgba(0, 0, 0, .5);
        --demo-scrim: rgba(0, 0, 0, .62);
    }

    body.delve-page,
    body.delve-page main {
        color: var(--funnel-ink);
        background: var(--funnel-surface);
    }

    body.delve-page #nav {
        color: var(--funnel-ink);
        background: rgba(8, 11, 16, .8);
        border-bottom-color: rgba(255, 255, 255, .08);
    }

    body.delve-page #nav.scrolled {
        background: rgba(8, 11, 16, .94);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 12px 34px rgba(0, 0, 0, .34);
    }

    body.delve-page .nav-logo-text { color: var(--funnel-ink); }
    body.delve-page .nav-logo-studio { color: #85858b; }
    body.delve-page .nav-logo-studio::before { background: rgba(255, 255, 255, .2); }
    body.delve-page .nav-logo-studio:hover { color: #fff; }
    body.delve-page .nav-links a { color: #c7c7cc; }
    body.delve-page .nav-links a:hover { color: #fff; }
    body.delve-page .nav-mobile-toggle span { background: #f5f5f7; }

    body.delve-page .btn-secondary {
        color: #69b7ff;
        border-color: rgba(80, 169, 255, .42);
    }

    body.delve-page .btn-secondary:hover {
        color: #8bc7ff;
        background: rgba(41, 151, 255, .1);
        border-color: rgba(105, 183, 255, .62);
    }

    body.delve-page #hero {
        color: var(--funnel-ink);
        background:
            radial-gradient(circle at 50% 16%, rgba(41, 151, 255, .18), transparent 34%),
            linear-gradient(180deg, #080b10 0%, #080b10 56%, #0d131b 100%);
    }

    body.delve-page .hero-title { color: #f5f5f7; }
    body.delve-page #hero .lede { color: #a1a1a6; }
    body.delve-page #hero .hero-meta { color: #85858b; }
    body.delve-page .trust-line { color: #a1a1a6; }
    body.delve-page .trust-line b { color: #4bd681; }

    body.delve-page .mac-window {
        border-color: rgba(255, 255, 255, .14);
        box-shadow: var(--funnel-shadow), 0 1px 0 rgba(255, 255, 255, .08) inset;
    }

    body.delve-page .hero-figure figcaption { color: #85858b; }
    body.delve-page .hero-figure figcaption strong { color: #c7c7cc; }

    body.delve-page .product-proof {
        color: var(--funnel-ink);
        background: rgba(21, 27, 36, .92);
        border-color: rgba(255, 255, 255, .1);
        box-shadow: 0 18px 50px rgba(0, 0, 0, .44);
    }

    body.delve-page .product-proof span { color: #98989d; }
    body.delve-page .product-proof-space strong { color: #55d98a; }

    body.delve-page #features {
        color: var(--funnel-ink);
        background: var(--funnel-soft);
    }

    body.delve-page .showcase-heading h2,
    body.delve-page #features .showcase-copy h3 { color: var(--funnel-ink); }

    body.delve-page #features .showcase-card {
        color: var(--funnel-ink);
        background: #171c24;
        border-color: rgba(255, 255, 255, .07);
        box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
    }

    body.delve-page #features .showcase-copy p { color: var(--funnel-copy); }

    body.delve-page #features .inspect-card {
        background: #10151c;
        border-color: rgba(255, 255, 255, .08);
    }
    body.delve-page #features .inspect-facts .inspect-stale { color: #e0a95a; }
    body.delve-page #features .inspect-btn,
    body.delve-page #features .preview-icon {
        color: #8bc7ff;
        background: rgba(41, 151, 255, .16);
    }

    body.delve-page #features .safe-delete {
        color: var(--funnel-ink);
        background: #10151c;
        border-color: rgba(255, 255, 255, .08);
    }
    body.delve-page #features .safe-delete-undo { color: #8bc7ff; background: rgba(41, 151, 255, .16); }

    body.delve-page #honest {
        color: var(--funnel-ink);
        background: var(--funnel-surface);
    }

    body.delve-page #honest h2 { color: var(--funnel-ink); }
    body.delve-page #honest > p:not(.eyebrow):not(.callout-link) { color: var(--funnel-copy); }

    body.delve-page #honest .acc,
    body.delve-page #honest .acc + .acc {
        background: #11161e;
        border-color: rgba(255, 255, 255, .08);
    }

    body.delve-page #honest .acc-head,
    body.delve-page #honest .acc-grid > span,
    body.delve-page #honest .acc-note { color: var(--funnel-copy); }
    body.delve-page #honest .acc-head code { color: #d2d2d7; }
    body.delve-page #honest .acc-val { color: var(--funnel-ink); }
    body.delve-page #honest .acc-grid > span.acc-real { color: #55d98a; }

    body.delve-page .pricing-copy h2 { color: var(--funnel-ink); }
    body.delve-page .pricing-copy > p:last-child { color: var(--funnel-copy); }

    body.delve-page .pricing-card {
        background: #131820;
        border-color: rgba(255, 255, 255, .09);
        box-shadow: 0 26px 68px rgba(0, 0, 0, .28);
    }

    body.delve-page .pricing-price strong { color: var(--funnel-ink); }
    body.delve-page .pricing-card li { color: #d2d2d7; }
    body.delve-page .pricing-card li::before { color: #55d98a; }

    body.delve-page #faq { color: var(--funnel-ink); }
    body.delve-page #faq > h2,
    body.delve-page .faq summary { color: var(--funnel-ink); }
    body.delve-page .faq details > p { color: var(--funnel-copy); }

    body.delve-page .enterprise-callout {
        color: var(--funnel-ink);
        border-color: var(--funnel-line);
    }

    body.delve-page .enterprise-callout h2 { color: var(--funnel-ink); }
    body.delve-page .enterprise-callout p { color: var(--funnel-copy); }

    body.delve-page .nav-links.open {
        color: var(--funnel-ink);
        background: #10141a;
        border-bottom-color: rgba(255, 255, 255, .1);
        box-shadow: 0 20px 44px rgba(0, 0, 0, .48);
    }

    body.delve-page .nav-links.open a { color: #f5f5f7; }

    body.delve-page .mobile-conversion-bar {
        color: var(--funnel-ink);
        background: rgba(20, 25, 33, .94);
        border-color: rgba(255, 255, 255, .11);
        box-shadow: 0 18px 52px rgba(0, 0, 0, .48);
    }
}

/* ============================================================
   APP DEMO WINDOW — adaptive appearance.
   Every surface below was hardcoded dark in style.css, which left a
   near-black slab floating in the light page. The window now reads
   from the --demo-* tokens (defined at the top, flipped in the dark
   block), so it renders as a light macOS window in light mode and a
   dark one in dark mode, exactly like the app itself.
   Scoped under body.delve-page so subpages that still use the dark
   editorial theme are untouched.
   ============================================================ */

body.delve-page main a { color: var(--funnel-blue); }

body.delve-page .skip-link { background: var(--funnel-action); color: #fff; }

body.delve-page [tabindex]:focus-visible {
    outline: 3px solid rgba(0, 113, 227, .38);
    outline-offset: 3px;
}

/* Window chrome */
body.delve-page .mac-window,
body.delve-page .mac-window-app { background: var(--demo-window); border-color: var(--demo-line-strong); }
body.delve-page .mac-titlebar { background: var(--demo-bar); border-bottom-color: var(--demo-line); }
body.delve-page .mac-window-app .mac-title { color: var(--demo-ink); }

body.delve-page .mac-segment { background: var(--demo-inset); border-color: var(--demo-line); }
body.delve-page .mac-segment button { color: var(--demo-copy); }
body.delve-page .mac-segment button:hover { color: var(--demo-ink); background: var(--demo-fill); }
body.delve-page .mac-segment button.active {
    background: var(--demo-card);
    color: var(--demo-ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .16);
}

/* Toolbar */
body.delve-page .mac-toolbar { background: var(--demo-bar); border-bottom-color: var(--demo-line); }
body.delve-page .path-pill { background: var(--demo-field); border-color: var(--demo-line); color: var(--demo-ink); }
body.delve-page .path-pill svg { color: var(--demo-copy); }
body.delve-page .path-caret { color: var(--demo-accent); }
body.delve-page .tb-btn { background: var(--demo-fill); border-color: var(--demo-line); color: var(--demo-ink); }
body.delve-page .tb-btn-ghost { background: transparent; color: var(--demo-copy); }
body.delve-page .tb-btn-icon { color: var(--demo-copy); }
body.delve-page .tb-btn-primary {
    background: var(--demo-accent);
    border-color: var(--demo-accent);
    color: #fff;
    box-shadow: none;
}
body.delve-page .tb-btn-primary:hover {
    background: var(--funnel-action-hover);
    box-shadow: 0 0 0 3px var(--demo-accent-soft);
}
body.delve-page .tb-btn-primary:disabled,
body.delve-page .tb-btn-primary.scanning {
    background: var(--demo-accent);
    border-color: var(--demo-accent);
    opacity: .75;
}

/* Status bar */
body.delve-page .mac-statusbar { background: var(--demo-inset); border-bottom-color: var(--demo-line); color: var(--demo-copy); }
body.delve-page .mac-stat-path { color: var(--demo-copy); }
body.delve-page .status-dot { background: var(--demo-faint); }
body.delve-page .scan-hint { color: var(--demo-copy); }

/* Three-column body */
body.delve-page .app-body { background: var(--demo-panel); }
body.delve-page .app-side { color: var(--demo-ink); }
body.delve-page .app-side-l { border-right-color: var(--demo-line); }
body.delve-page .app-side-r { border-left-color: var(--demo-line); }
body.delve-page .app-main { background: var(--demo-canvas); }

body.delve-page .folder-card { background: var(--demo-card); border-color: var(--demo-line); }
body.delve-page .folder-card-glyph { background: var(--demo-fill); color: var(--demo-copy); }
body.delve-page .folder-card-title { color: var(--demo-ink); }
body.delve-page .folder-card-meta { color: var(--demo-copy); }
body.delve-page .side-title { color: var(--demo-copy); }

body.delve-page .stat-card { background: var(--demo-card); border-color: var(--demo-line); }
body.delve-page .stat-label { color: var(--demo-copy); }
body.delve-page .stat-value { color: var(--demo-ink); }
body.delve-page .stat-card.active,
body.delve-page .info-tile.active {
    border-color: color-mix(in srgb, var(--demo-accent) 60%, transparent);
    background: var(--demo-accent-soft);
}

body.delve-page .filter-label { color: var(--demo-copy); }
body.delve-page .filter-input { background: var(--demo-field); border-color: var(--demo-line); color: var(--demo-ink); }
body.delve-page .filter-btn { border-color: var(--demo-line); color: var(--demo-copy); }
body.delve-page .filter-btn-primary {
    background: var(--demo-accent-soft);
    border-color: color-mix(in srgb, var(--demo-accent) 45%, transparent);
    color: var(--demo-accent);
}

body.delve-page .view-tabs { background: var(--demo-inset); border-color: var(--demo-line); }
body.delve-page .view-tab { color: var(--demo-copy); }
body.delve-page .view-tab:not(.active):hover { color: var(--demo-ink); background: var(--demo-fill); }
body.delve-page .view-tab.active { background: var(--demo-accent); color: #fff; box-shadow: none; }

/* Treemap frame */
body.delve-page .treemap-frame { background: var(--demo-canvas); border-color: var(--demo-line); }
body.delve-page .treemap-frame-head,
body.delve-page .treemap-frame-foot { background: var(--demo-bar); color: var(--demo-copy); }
body.delve-page .treemap-frame-head { border-bottom-color: var(--demo-line); }
body.delve-page .treemap-frame-foot { border-top-color: var(--demo-line); }
body.delve-page .treemap-frame-foot span:first-child { color: var(--demo-ink); }
body.delve-page .treemap-frame-foot-path { color: var(--demo-faint); }
body.delve-page .treemap-frame-chip { background: var(--demo-fill); color: var(--demo-copy); }
body.delve-page .treemap-host { background: var(--demo-canvas); }

body.delve-page .crumb { color: var(--demo-copy); }
body.delve-page .crumb:not(.current):hover { color: var(--demo-ink); background: var(--demo-fill); }
body.delve-page .crumb.current { color: var(--demo-ink); }
body.delve-page .crumb-sep { color: var(--demo-faint); }

/* Folder table */
body.delve-page .app-table { background: var(--demo-window); border-color: var(--demo-line); }
body.delve-page .app-table > div { border-bottom-color: var(--demo-line); }
body.delve-page .app-table-head { background: var(--demo-bar); color: var(--demo-copy); }
body.delve-page .app-table .num { color: var(--demo-ink); }
body.delve-page .app-table-head .num { color: var(--demo-copy); }
body.delve-page .cell-folder { color: var(--demo-ink); }
body.delve-page .caret { color: var(--demo-faint); }
body.delve-page .folder-glyph {
    background: linear-gradient(180deg, color-mix(in srgb, var(--demo-accent) 62%, #fff), var(--demo-accent));
    box-shadow: none;
}
body.delve-page .bar { background: var(--demo-accent); }

/* Right sidebar: top folders, selection, file types */
body.delve-page .bar-row { background: var(--demo-card); border-color: var(--demo-line); }
body.delve-page .bar-row-name,
body.delve-page .bar-row-val { color: var(--demo-ink); }
body.delve-page .bar-row-fill { background: var(--demo-accent); }
body.delve-page .bar-row.top {
    border-color: color-mix(in srgb, var(--demo-accent) 55%, transparent);
    background: var(--demo-accent-soft);
}
body.delve-page .bar-row.top .bar-row-fill { background: var(--demo-accent); }

body.delve-page .selection-path { background: var(--demo-field); border-color: var(--demo-line); color: var(--demo-ink); }
body.delve-page .selection-stats > div { background: var(--demo-card); border-color: var(--demo-line); }

body.delve-page .filetype-count { color: var(--demo-copy); }
body.delve-page .filetype-table { border-color: var(--demo-line); }
body.delve-page .filetype-row { border-bottom-color: var(--demo-line); color: var(--demo-ink); }
body.delve-page .filetype-head-row { background: var(--demo-bar); color: var(--demo-copy); }

body.delve-page .filetype-row:not(.filetype-head-row):hover,
body.delve-page .bar-row:hover { border-color: var(--demo-line-strong); }
body.delve-page .filetype-row.selected,
body.delve-page .bar-row.selected {
    border-color: var(--demo-accent);
    box-shadow: 0 0 0 1px var(--demo-accent), inset 3px 0 0 var(--demo-accent);
    background: var(--demo-accent-soft);
}

/* Info view (rendered by script.js) */
body.delve-page .info-tile { background: var(--demo-card); border-color: var(--demo-line); }
body.delve-page .info-note { background: var(--demo-inset); border-color: var(--demo-line); color: var(--demo-copy); }

/* Tooltip, hint, reopen chip, backdrop */
body.delve-page .treemap-tooltip {
    background: var(--demo-pop);
    border-color: var(--demo-line);
    box-shadow: var(--demo-pop-shadow);
}
body.delve-page .tt-name { color: var(--demo-ink); }
body.delve-page .tt-meta { color: var(--demo-copy); }

body.delve-page .demo-hint {
    background: var(--demo-pop);
    border-color: color-mix(in srgb, var(--demo-accent) 45%, transparent);
    color: var(--demo-ink);
    box-shadow: var(--demo-pop-shadow);
}
body.delve-page .demo-hint-glyph { color: var(--demo-accent); }

body.delve-page .demo-reopen {
    border-color: color-mix(in srgb, var(--demo-accent) 50%, transparent);
    background: var(--demo-accent-soft);
    color: var(--funnel-ink);
}
body.delve-page .demo-reopen:hover { background: color-mix(in srgb, var(--demo-accent) 18%, transparent); }
body.delve-page .demo-reopen-glyph { color: var(--demo-accent); }

body.delve-page .demo-backdrop { background: var(--demo-scrim); }

/* Scan shimmer and the first-view glow, re-keyed to the action color */
body.delve-page .treemap-host.scanning::before {
    background: linear-gradient(
        110deg,
        transparent 0%,
        color-mix(in srgb, var(--demo-accent) 6%, transparent) 45%,
        color-mix(in srgb, var(--demo-accent) 16%, transparent) 50%,
        color-mix(in srgb, var(--demo-accent) 6%, transparent) 55%,
        transparent 100%
    );
    background-size: 220% 100%;
}
@keyframes demo-window-glow {
    0%, 100% {
        box-shadow: var(--funnel-shadow), 0 0 0 1px transparent;
    }
    50% {
        box-shadow:
            var(--funnel-shadow),
            0 0 0 1px color-mix(in srgb, var(--demo-accent) 55%, transparent),
            0 0 34px 6px color-mix(in srgb, var(--demo-accent) 22%, transparent);
    }
}

/* FAQ open state follows the action color, not the old mint */
body.delve-page .faq details[open] summary { color: var(--funnel-blue); }
body.delve-page .faq details[open] summary::after { color: var(--funnel-blue); }

/* ============================================================
   "AND A FEW MORE THINGS." — the compact feature grid.
   Quiet hairline rows under the three big tiles: the small print
   that closes the sale without shouting.
   ============================================================ */
body.delve-page .feature-grid-head {
    margin: clamp(90px, 10vw, 130px) auto 0;
    text-align: center;
}
body.delve-page .feature-grid-head h3 {
    margin: 0;
    color: var(--funnel-ink);
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -.035em;
}

body.delve-page #features > .feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 48px;
    margin: clamp(38px, 4vw, 54px) auto 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}
body.delve-page .feature {
    padding: 24px 0 30px;
    background: transparent;
    border-top: 1px solid var(--funnel-line);
}
body.delve-page .feature h4 {
    margin: 0 0 8px;
    color: var(--funnel-ink);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -.018em;
    line-height: 1.3;
}
body.delve-page .feature p {
    margin: 0;
    color: var(--funnel-copy);
    font-size: .92rem;
    line-height: 1.55;
}
body.delve-page .feature code {
    padding: 1px 6px;
    background: var(--demo-fill);
    border: 0;
    border-radius: 4px;
    color: inherit;
    font-size: .85em;
}

@media (max-width: 900px) {
    body.delve-page #features > .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 0 36px; }
}
@media (max-width: 640px) {
    body.delve-page .feature-grid-head { text-align: left; }
    body.delve-page #features > .feature-grid { grid-template-columns: 1fr; }
}

/* ── Referral banner ──────────────────────────────────────────────
   A dismissible announcement bar, shown only when the /r/CODE short link
   lands here with ?ref=CODE.

   The layout contract is --ref-banner-h: 0 when there's no banner, and the
   banner's measured height when there is. Everything pinned to the top of
   the viewport offsets by it, so the same rules hold in both states and
   there's no second layout to keep in sync. script.js owns the value. */
body.delve-page { --ref-banner-h: 0px; }

body.delve-page .ref-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Above the nav (z-index 100), since it displaces it. */
    z-index: 120;
    padding: 9px 24px;
    background: var(--ref-banner-bg);
    border-bottom: 1px solid var(--funnel-line);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}
body.delve-page .ref-banner-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: var(--rail, 1160px);
    margin: 0 auto;
}
body.delve-page .ref-banner p {
    margin: 0;
    color: var(--funnel-ink);
    font-size: .82rem;
    line-height: 1.45;
    text-align: center;
}
body.delve-page .ref-banner strong {
    font-weight: 650;
    letter-spacing: .05em;
    font-variant-numeric: tabular-nums;
}
body.delve-page .ref-banner a {
    color: var(--funnel-blue);
    font-weight: 550;
    text-decoration: none;
}
body.delve-page .ref-banner a:hover { color: var(--funnel-blue-hover); text-decoration: underline; }
body.delve-page .ref-banner-fallback {
    max-width: var(--rail, 1160px);
    margin: 6px auto 0 !important;
    color: var(--funnel-muted);
    font-size: .78rem !important;
}

/* Sits at the end of the flex row rather than absolutely, so a wrapped
   message pushes it along instead of colliding with it. */
body.delve-page .ref-banner-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--funnel-muted);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}
body.delve-page .ref-banner-close:hover {
    background: rgba(127, 127, 127, .16);
    color: var(--funnel-ink);
}
body.delve-page .ref-banner-close:focus-visible {
    outline: 2px solid var(--funnel-action);
    outline-offset: 2px;
}

/* The two things pinned to the viewport top, plus the hero's clearance
   under them. All no-ops while --ref-banner-h is 0. */
body.delve-page #nav { top: var(--ref-banner-h); }
body.delve-page #hero { padding-top: calc(clamp(128px, 13vw, 168px) + var(--ref-banner-h)); }

/* 760px is where the nav collapses and the hero's mobile padding is defined.
   The collapsed .nav-links dropdown needs no offset of its own: #nav carries a
   backdrop-filter, which makes it the containing block for its fixed-position
   children, so the dropdown already rides along with the nav. Offsetting it
   here too would double-count the banner and leave a gap under the bar. */
@media (max-width: 760px) {
    body.delve-page .ref-banner { padding: 9px 16px; }
    body.delve-page .ref-banner p { text-align: left; }
    body.delve-page #hero { padding-top: calc(112px + var(--ref-banner-h)); }
}

/* One tinted surface per theme. Declared here rather than in the token
   blocks above because this rule set is appended after them. */
:root { --ref-banner-bg: #e9f1fd; }
@media (prefers-color-scheme: dark) {
    :root { --ref-banner-bg: #0d1826; }
}

/* ── Ranked space eaters ──────────────────────────────────────────
   Replaces the five-colour block grid in the first showcase card. Two
   problems with that grid: it spent purple, green, orange and pink on a
   page whose palette is deliberately one blue (see "Two blues, one job
   each" above, and apple.css folding --delve-purple into the accent),
   and its 3/2 aspect ratio with a 260px floor made it the tallest thing
   in the section.

   Here the bar length carries the magnitude, so the fill needs no hue
   variation at all — one accent, five lengths. It also echoes the Top
   Folders panel in the app's own sidebar, which is the most on-brand
   thing this card could show. */
body.delve-page #features .hog-rank {
    display: grid;
    gap: 9px;
    align-content: start;
    padding: 22px 24px 24px;
    border: 1px solid var(--funnel-line);
    border-radius: 20px;
    background: var(--funnel-soft);
}
body.delve-page #features .hog-rank-head {
    margin: 0 0 3px;
    color: var(--funnel-muted);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}
body.delve-page #features .hog {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr) 3.4rem;
    align-items: center;
    gap: 12px;
}
body.delve-page #features .hog-name {
    color: var(--funnel-ink);
    font-size: .82rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.delve-page #features .hog-track {
    height: 9px;
    border-radius: 999px;
    background: rgba(127, 127, 127, .16);
    overflow: hidden;
}
body.delve-page #features .hog-track i {
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: 999px;
    background: var(--funnel-action);
}
body.delve-page #features .hog-size {
    color: var(--funnel-ink);
    font-size: .82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 760px) {
    body.delve-page #features .hog-rank { padding: 18px 18px 20px; }
    body.delve-page #features .hog { grid-template-columns: 7rem minmax(0, 1fr) 3.2rem; gap: 10px; }
    body.delve-page #features .hog-name,
    body.delve-page #features .hog-size { font-size: .78rem; }
}

/* Under ~520px the three columns leave the track about 66px, which squashes
   the small rows into indistinguishable dots. Drop the bar onto its own line
   so it gets the full width and the proportions stay readable. Costs a little
   height, but only in the one-column layout where there's room for it. */
@media (max-width: 520px) {
    body.delve-page #features .hog {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "name size" "track track";
        gap: 5px 10px;
    }
    body.delve-page #features .hog-name { grid-area: name; }
    body.delve-page #features .hog-size { grid-area: size; }
    body.delve-page #features .hog-track { grid-area: track; height: 8px; }
    body.delve-page #features .hog-rank { gap: 13px; }
}