/* ---------------------------------------------------------------------------
   Search guide: the explanatory content under the search box on the email,
   username and phone pages (what the search does, how, what it returns, use
   cases, FAQ, privacy). Plain HTML so it is readable without JavaScript and by
   search engines. Same tokens as the showcase page; `sg-` prefixed because the
   pages also carry Webflow, Tailwind and Geist classes.
   --------------------------------------------------------------------------- */

.sg {
    --sg-surface: #0a0a0a;
    --sg-raised: hsla(0, 0%, 100%, 0.024);
    --sg-border: hsla(0, 0%, 100%, 0.12);
    --sg-border-strong: hsla(0, 0%, 100%, 0.22);
    --sg-fg: #ededed;
    --sg-muted: #a1a1a1;
    --sg-faint: #7d7d7d;
    --sg-accent: #cf362d;
    --sg-accent-text: #f0786f;
    --sg-ok: #6bd17c;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 72px 16px 24px;
    box-sizing: border-box;
    color: var(--sg-fg);
    text-align: left;
}

.sg *,
.sg *::before,
.sg *::after {
    box-sizing: border-box;
}

.sg-section {
    padding: 0 0 64px;
    scroll-margin-top: 84px;
}

.sg-head {
    max-width: 680px;
    margin: 0 auto 26px;
    text-align: center;
}

.sg-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sg-accent-text);
}

.sg h2 {
    margin: 0;
    font-size: clamp(1.375rem, 3vw, 1.75rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--sg-fg);
}

.sg h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sg-fg);
}

.sg p,
.sg li,
.sg dd {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--sg-muted);
}

.sg p {
    margin: 0 0 12px;
}

.sg-head p {
    margin: 10px 0 0;
}

.sg b,
.sg strong {
    color: var(--sg-fg);
    font-weight: 600;
}

.sg a {
    color: var(--sg-accent-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sg a:hover {
    color: var(--sg-fg);
}

.sg code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
    color: var(--sg-fg);
}

/* --- intro: lead + key facts ------------------------------------------- */
.sg-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.sg-intro h2 {
    margin-bottom: 14px;
}

.sg-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    background: var(--sg-raised);
    overflow: hidden;
}

.sg-facts div {
    padding: 16px 18px;
    border-bottom: 1px solid var(--sg-border);
    min-width: 0;
}

.sg-facts div:nth-child(odd) {
    border-right: 1px solid var(--sg-border);
}

.sg-facts div:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.sg-facts dt {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sg-faint);
}

.sg-facts dd {
    margin: 4px 0 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sg-fg);
}

.sg-facts dd small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--sg-muted);
}

/* --- how it works ------------------------------------------------------- */
.sg-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: sg-step;
}

.sg-steps li {
    position: relative;
    padding: 18px 18px 16px;
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    background: var(--sg-raised);
    counter-increment: sg-step;
}

.sg-steps li::before {
    content: counter(sg-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-bottom: 12px;
    border-radius: 50%;
    border: 1px solid rgba(207, 54, 45, 0.5);
    background: rgba(207, 54, 45, 0.12);
    color: var(--sg-accent-text);
    font-size: 12px;
    font-weight: 600;
}

.sg-steps p {
    margin: 0;
    font-size: 0.875rem;
}

/* --- what you get: checklist + sample result ---------------------------- */
.sg-get {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.sg-check {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-check li {
    position: relative;
    padding: 0 0 0 26px;
}

.sg-check li + li {
    margin-top: 12px;
}

.sg-check li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 0.5em;
    width: 10px;
    height: 5px;
    border-left: 1.6px solid var(--sg-ok);
    border-bottom: 1.6px solid var(--sg-ok);
    transform: rotate(-45deg);
}

/* A schematic result card: what a hit looks like, with made-up data. */
.sg-sample {
    margin: 0;
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    background: var(--sg-surface);
    overflow: hidden;
}

.sg-sample-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--sg-border);
    font-size: 12px;
    color: var(--sg-muted);
}

.sg-sample-bar code {
    color: var(--sg-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-badge {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(107, 209, 124, 0.35);
    background: rgba(107, 209, 124, 0.08);
    color: var(--sg-ok);
    font-size: 11px;
    font-weight: 500;
}

.sg-sample-rows {
    margin: 0;
    padding: 6px 0;
    list-style: none;
}

.sg-sample-rows li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px 14px;
    font-size: 13px;
    line-height: 1.4;
}

.sg-sample-rows li + li {
    border-top: 1px solid hsla(0, 0%, 100%, 0.05);
}

.sg-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: hsla(0, 0%, 100%, 0.06);
    color: var(--sg-fg);
    font-size: 12px;
    font-weight: 600;
}

.sg-sample-rows b {
    display: block;
    font-size: 13px;
}

.sg-sample-rows span {
    display: block;
    color: var(--sg-muted);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sg-sample-rows em {
    font-style: normal;
    font-size: 11px;
    color: var(--sg-faint);
    white-space: nowrap;
}

.sg-sample-rows em.hit {
    color: var(--sg-ok);
}

.sg-sample-rows em.warn {
    color: #f5d984;
}

.sg-sample figcaption {
    padding: 9px 14px;
    border-top: 1px solid var(--sg-border);
    font-size: 11.5px;
    color: var(--sg-faint);
}

/* Real screenshots from the showcase recordings. */
.sg-shots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0 0;
}

.sg-shots figure {
    margin: 0;
}

.sg-shots a {
    display: block;
    border: 1px solid var(--sg-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--sg-surface);
    transition: border-color 0.15s ease;
}

.sg-shots a:hover {
    border-color: var(--sg-border-strong);
}

.sg-shots img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.sg-shots figcaption {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--sg-muted);
}

.sg-more {
    margin: 16px 0 0 !important;
    text-align: center;
    font-size: 0.875rem !important;
}

/* --- use cases ---------------------------------------------------------- */
.sg-cases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.sg-case {
    padding: 18px;
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    background: var(--sg-raised);
}

.sg-case svg {
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    color: var(--sg-accent-text);
}

.sg-case p {
    margin: 0;
    font-size: 0.875rem;
}

/* --- FAQ ---------------------------------------------------------------- */
.sg-faq {
    max-width: 760px;
    margin: 0 auto;
    border-top: 1px solid var(--sg-border);
}

.sg-faq details {
    border-bottom: 1px solid var(--sg-border);
}

.sg-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 2px;
    cursor: pointer;
    list-style: none;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--sg-fg);
}

.sg-faq summary::-webkit-details-marker {
    display: none;
}

.sg-faq summary::after {
    content: '';
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 1.5px solid var(--sg-muted);
    border-bottom: 1.5px solid var(--sg-muted);
    transform: rotate(45deg) translateY(-3px);
    transition: transform 0.2s ease;
}

.sg-faq details[open] summary::after {
    transform: rotate(-135deg) translateX(-2px);
}

.sg-faq summary:hover {
    color: #fff;
}

.sg-faq summary:focus-visible {
    outline: 2px solid var(--sg-accent-text);
    outline-offset: 2px;
    border-radius: 4px;
}

.sg-faq h3 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.sg-faq .sg-answer {
    padding: 0 2px 16px;
}

.sg-faq .sg-answer p:last-child {
    margin-bottom: 0;
}

/* --- privacy & legal ---------------------------------------------------- */
.sg-legal {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
    padding: 22px;
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    background: var(--sg-raised);
}

/* The shield sits in a small tile, like the other icon tiles on the page. */
.sg-legal > svg {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 9px;
    border: 1px solid var(--sg-border);
    border-radius: 10px;
    background: hsla(0, 0%, 100%, 0.03);
    color: var(--sg-muted);
}

.sg-legal h2 {
    font-size: 1.125rem;
    margin-bottom: 10px;
}

.sg-legal ul {
    margin: 0;
    padding-left: 18px;
}

.sg-legal li + li {
    margin-top: 6px;
}

/* --- related searches --------------------------------------------------- */
.sg-related {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.sg a.sg-link {
    display: block;
    padding: 16px;
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    background: var(--sg-raised);
    color: var(--sg-fg);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.sg a.sg-link:hover {
    border-color: var(--sg-border-strong);
    background: hsla(0, 0%, 100%, 0.045);
}

.sg-link b {
    display: block;
    margin-bottom: 4px;
    font-size: 0.9375rem;
}

.sg-link span {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--sg-muted);
}

.sg-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.sg a.sg-btn {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    border: 1px solid #ededed;
    border-radius: 8px;
    background: #ededed;
    color: #0a0a0a;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.sg a.sg-btn:hover {
    background: #cfcfcf;
    border-color: #cfcfcf;
}

.sg a.sg-btn.ghost {
    background: transparent;
    border-color: var(--sg-border);
    color: var(--sg-fg);
}

.sg a.sg-btn.ghost:hover {
    background: hsla(0, 0%, 100%, 0.06);
}

/* --- blog guides under "Keep investigating" ----------------------------- */
.sg-guides {
    margin: 22px auto 0;
    max-width: 760px;
}

.sg-guides h3 {
    margin-bottom: 8px;
    font-size: 0.875rem;
    color: var(--sg-muted);
    text-align: center;
}

.sg-guides ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-guides li {
    font-size: 0.875rem;
}

/* --- responsive --------------------------------------------------------- */
/* Tablets and phones. The desktop layout used to be squeezed into the full
   screen width with a 16px edge, which left 3-up cards a few words wide and
   paragraphs running edge to edge. Below 860px the guide gets a real side
   margin, a readable line length, and layouts made for a narrow column. */
@media (max-width: 860px) {
    .sg {
        padding-left: clamp(20px, 5vw, 40px);
        padding-right: clamp(20px, 5vw, 40px);
    }

    .sg-section {
        padding-bottom: 56px;
    }

    /* Lead text at a comfortable measure, the key facts as one row of four. */
    .sg-intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .sg-intro > div:first-child,
    .sg-check {
        max-width: 640px;
    }

    .sg-facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sg-facts div,
    .sg-facts div:nth-child(odd) {
        border-right: 1px solid var(--sg-border);
        border-bottom: 0;
    }

    .sg-facts div:last-child {
        border-right: 0;
    }

    /* Steps as a numbered list: badge on the left, text beside it. */
    .sg-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .sg-steps li {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        column-gap: 14px;
        align-items: start;
        padding: 16px 18px;
    }

    .sg-steps li::before {
        grid-row: 1 / span 2;
        margin: 0;
        width: 28px;
        height: 28px;
    }

    .sg-steps h3 {
        margin-bottom: 4px;
    }

    .sg-get {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .sg-sample {
        width: 100%;
        max-width: 560px;
    }

    /* Screenshots as a swipeable row instead of three thumbnails or a tall
       stack of full-width images. */
    .sg-shots {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 46%;
        gap: 12px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;
        padding-bottom: 6px;
        scrollbar-width: thin;
        scrollbar-color: var(--sg-border-strong) transparent;
    }

    .sg-shots figure {
        scroll-snap-align: start;
    }

    .sg-cases {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sg-related {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sg-faq summary {
        padding: 15px 2px;
        line-height: 1.45;
    }
}

@media (max-width: 600px) {
    .sg {
        padding-top: 48px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .sg-section {
        padding-bottom: 44px;
    }

    .sg-head {
        margin-bottom: 20px;
        text-align: left;
    }

    .sg h2 {
        font-size: 1.375rem;
    }

    .sg p,
    .sg li,
    .sg dd {
        font-size: 0.9375rem;
        line-height: 1.6;
    }

    /* Key facts back to a 2 x 2 grid. */
    .sg-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sg-facts div {
        padding: 14px 16px;
        border-right: 0;
        border-bottom: 1px solid var(--sg-border);
    }

    .sg-facts div:nth-child(odd) {
        border-right: 1px solid var(--sg-border);
        border-bottom: 1px solid var(--sg-border);
    }

    .sg-facts div:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .sg-facts dd {
        font-size: 1.0625rem;
    }

    .sg-steps li {
        padding: 14px 16px;
    }

    .sg-steps p,
    .sg-case p {
        font-size: 0.875rem;
    }

    .sg-sample-rows li {
        padding: 8px 12px;
    }

    .sg-shots {
        grid-auto-columns: 84%;
    }

    /* Use cases as compact rows: icon on the left, text beside it. */
    .sg-cases {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .sg-case {
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr);
        column-gap: 14px;
        padding: 16px;
    }

    .sg-case svg {
        grid-row: 1 / span 2;
        margin: 2px 0 0;
    }

    .sg-case h3 {
        margin-bottom: 4px;
    }

    .sg-related {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .sg a.sg-link {
        padding: 14px 16px;
    }

    .sg-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .sg a.sg-btn {
        justify-content: center;
    }

    /* Phone: icon beside the heading, the list full width below both
       (the icon used to sit alone on a row of its own). */
    .sg-legal {
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 12px;
        align-items: center;
        padding: 18px;
    }

    .sg-legal > svg {
        width: 36px;
        height: 36px;
        padding: 8px;
    }

    .sg-legal > div {
        display: contents;
    }

    .sg-legal h2 {
        margin: 0;
    }

    .sg-legal ul {
        grid-column: 1 / -1;
    }

    .sg-guides h3,
    .sg .sg-more {
        text-align: left;
    }

    .sg-guides ul {
        flex-direction: column;
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sg-faq summary::after {
        transition: none;
    }
}

/* Site logos in the example results: the same light tile as the logos on
   real result cards, so dark marks (GitHub, TikTok) stay visible. */
img.sg-ico.sg-logo {
    display: block;
    box-sizing: border-box;
    padding: 4px;
    background: #f4f4f5;
    object-fit: contain;
}

/* Rows that aren't a website (the number itself, the mailbox check, breaches)
   get a drawn icon on a tinted tile instead of a logo. */
.sg-ico.sg-glyph {
    background: hsla(0, 0%, 100%, 0.08);
    color: #e4e4e7;
}

.sg-ico.sg-glyph-ok {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.sg-ico.sg-glyph-warn {
    background: rgba(245, 158, 11, 0.12);
    color: #f5d984;
}

/* `.sg-sample-rows span` (the grey detail line) makes every span a block,
   which also caught the icon tiles and pushed their icon into the corner. */
.sg-sample-rows .sg-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    white-space: normal;
}

.sg-sample-rows .sg-ico svg {
    display: block;
    flex: 0 0 auto;
}