/* ============================================================
   Consola22 · Home v3
   Herramientas técnicas. Resultados claros.
   ============================================================ */

.page-home {
    --home-deep: var(--c22-deep, #0F2A33);
    --home-ink: var(--c22-ink, #1B1F23);
    --home-paper: var(--c22-paper, #F5F7F8);
    --home-cyan: var(--c22-cyan, #22C7D6);
    --home-success: var(--c22-success, #3BA272);
    --home-muted: #64767D;
    --home-border: #DDE6E8;
}

.home-page {
    overflow: hidden;
}

.home-hero {
    position: relative;
    padding: clamp(66px, 8vw, 108px) 0 clamp(54px, 6vw, 76px);
}

.home-hero::after {
    content: "";
    position: absolute;
    top: -250px;
    right: -200px;
    width: 620px;
    height: 620px;
    border-radius: 999px;
    background: radial-gradient(
        circle,
        rgba(34, 199, 214, .08) 0,
        rgba(34, 199, 214, .025) 42%,
        rgba(34, 199, 214, 0) 70%
    );
    pointer-events: none;
}

.home-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 930px;
}

.home-title {
    max-width: 860px;
    margin: 18px 0 24px;
    color: var(--home-deep);
    font-size: clamp(3rem, 7.2vw, 6.5rem);
    line-height: .94;
    letter-spacing: -.055em;
    font-weight: 850;
}

.home-title span {
    color: var(--home-deep);
}

.home-lead {
    max-width: 760px;
    margin: 0;
    color: var(--home-muted);
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    line-height: 1.65;
}

.home-primary-action {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
    padding: 12px 17px;
    border: 1px solid #CAD9DD;
    border-radius: 10px;
    color: var(--home-deep);
    background: rgba(255, 255, 255, .7);
    font-size: .88rem;
    font-weight: 800;
    text-decoration: none;
    transition:
        border-color .18s ease,
        color .18s ease,
        transform .18s ease,
        background .18s ease;
}

.home-primary-action:hover,
.home-primary-action:focus-visible {
    color: #087F8A;
    border-color: rgba(34, 199, 214, .55);
    background: #fff;
    transform: translateY(-1px);
}

.home-primary-action span {
    color: var(--home-cyan);
    font-size: 1rem;
}

.home-tools,
.home-next,
.home-notes,
.home-purpose,
.home-privacy {
    padding: clamp(54px, 6vw, 76px) 0;
}

.home-tools {
    padding-top: 10px;
}

.home-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 26px;
}

.home-section-heading-wide > p {
    max-width: 560px;
    margin: 0 0 2px;
    color: var(--home-muted);
    font-size: .96rem;
    line-height: 1.65;
}

.home-section-title {
    margin: 6px 0 0;
    color: var(--home-deep);
    font-size: clamp(1.85rem, 3.4vw, 2.8rem);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.featured-tool {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
    min-height: 390px;
    overflow: hidden;
    border-radius: 22px;
    background: var(--home-deep);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 24px 65px rgba(15, 42, 51, .12);
    transition: transform .2s ease, box-shadow .2s ease;
}

.featured-tool:hover,
.featured-tool:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 28px 76px rgba(15, 42, 51, .16);
}

.featured-tool-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(32px, 5vw, 54px);
}

.featured-tool-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #9ABBC1;
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--home-success);
    box-shadow: 0 0 0 4px rgba(59, 162, 114, .09);
}

.featured-tool h3 {
    margin: 18px 0 13px;
    color: #fff;
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.featured-tool-copy > p {
    max-width: 610px;
    margin: 0;
    color: #B6C9CE;
    font-size: 1rem;
    line-height: 1.65;
}

.featured-tool-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 25px;
}

.featured-tool-tags span {
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 7px;
    color: #AFC4C9;
    background: rgba(255, 255, 255, .025);
    font-size: .7rem;
    font-weight: 700;
}

.featured-tool-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 34px;
    color: #fff;
    font-size: .84rem;
    font-weight: 850;
}

.featured-tool-link span {
    color: var(--home-cyan);
}

.featured-tool-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(30px, 4vw, 46px);
    border-left: 1px solid rgba(255, 255, 255, .08);
    background:
        radial-gradient(
            circle at 92% 2%,
            rgba(34, 199, 214, .13) 0 19%,
            rgba(34, 199, 214, 0) 19.2%
        ),
        rgba(7, 25, 31, .22);
}

.preview-console {
    margin-bottom: 28px;
    color: var(--home-cyan);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .73rem;
    font-weight: 800;
}

.preview-main {
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    color: #fff;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    font-weight: 850;
    letter-spacing: -.025em;
}

.preview-lines {
    display: grid;
    gap: 0;
    margin-top: 10px;
}

.preview-lines > div {
    display: grid;
    grid-template-columns: 95px minmax(0, 1fr);
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .065);
}

.preview-lines span {
    color: #82A7AE;
    font-size: .72rem;
}

.preview-lines strong {
    color: #F5FAFB;
    font-size: .77rem;
    font-weight: 750;
}

.preview-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 25px;
    color: #AFC3C8;
    font-size: .72rem;
    font-weight: 700;
}

.preview-status span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--home-success);
}

.home-next {
    background: rgba(225, 234, 236, .24);
    border-top: 1px solid rgba(202, 216, 220, .6);
    border-bottom: 1px solid rgba(202, 216, 220, .6);
}

.next-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(34px, 6vw, 76px);
    row-gap: 0;
}

.next-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 15px;
    padding: 27px 0;
    border-top: 1px solid #D9E3E5;
}

.next-index {
    padding-top: 3px;
    color: var(--home-cyan);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem;
    font-weight: 850;
}

.next-item h3 {
    margin: 0 0 7px;
    color: var(--home-deep);
    font-size: 1.05rem;
}

.next-item p {
    margin: 0;
    color: var(--home-muted);
    font-size: .9rem;
    line-height: 1.55;
}

.purpose-panel {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(50px, 8vw, 110px);
    padding: clamp(38px, 5.5vw, 62px);
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--home-border);
}

.purpose-copy > p:last-child {
    max-width: 540px;
    margin: 22px 0 0;
    color: var(--home-muted);
    line-height: 1.7;
}

.principles {
    display: grid;
}

.principle {
    position: relative;
    padding: 22px 0 22px 44px;
    border-top: 1px solid var(--home-border);
}

.principle:first-child {
    border-top: 0;
    padding-top: 2px;
}

.principle span {
    position: absolute;
    left: 0;
    top: 24px;
    color: var(--home-cyan);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .68rem;
    font-weight: 850;
}

.principle:first-child span {
    top: 4px;
}

.principle h3 {
    margin: 0 0 7px;
    color: var(--home-deep);
    font-size: 1rem;
}

.principle p {
    margin: 0;
    color: var(--home-muted);
    font-size: .87rem;
    line-height: 1.55;
}

.home-privacy {
    padding-top: 4px;
    padding-bottom: 42px;
}

.privacy-strip {
    display: grid;
    grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr);
    gap: clamp(40px, 8vw, 110px);
    padding: 33px 0 20px;
    border-top: 1px solid var(--home-border);
}

.privacy-strip h2 {
    margin: 7px 0 0;
    color: var(--home-deep);
    font-size: clamp(1.5rem, 2.8vw, 2.15rem);
    letter-spacing: -.03em;
}

.privacy-strip-copy p {
    max-width: 660px;
    margin: 0 0 14px;
    color: var(--home-muted);
    line-height: 1.65;
}

.privacy-strip-copy a {
    display: inline-flex;
    gap: 9px;
    color: var(--home-deep);
    font-size: .84rem;
    font-weight: 850;
    text-decoration: none;
}

.privacy-strip-copy a span {
    color: var(--home-cyan);
}

.privacy-strip-copy a:hover,
.privacy-strip-copy a:focus-visible {
    color: #087F8A;
}


.home-notes{background:#fff}
.home-notes-list{border-top:1px solid var(--home-border)}
.home-note{display:grid;grid-template-columns:78px minmax(0,1fr) 24px;gap:20px;align-items:start;padding:23px 0;border-bottom:1px solid var(--home-border);color:inherit;text-decoration:none}

.home-note.has-image {
    grid-template-columns: 78px minmax(0, 1fr) 132px 24px;
}

.home-note-thumb {
    display: block;
    width: 132px;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    align-self: center;
    border: 1px solid #DDE6E8;
    border-radius: 10px;
    background: #EEF3F4;
}

.home-note-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-note-date{padding-top:4px;color:var(--home-cyan);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.7rem;font-weight:850}
.home-note-body{min-width:0}.home-note-category{display:block;margin-bottom:5px;color:#78888E;font-size:.68rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.home-note h3{margin:0 0 7px;color:var(--home-deep);font-size:1.04rem;line-height:1.3}.home-note p{max-width:760px;margin:0;color:var(--home-muted);font-size:.87rem;line-height:1.55}
.home-note-arrow{color:var(--home-cyan);font-weight:900}.home-note:hover h3,.home-note:focus-visible h3{color:#087F8A}
.home-notes-all{display:inline-flex;align-items:center;gap:9px;margin-top:19px;color:var(--home-deep);font-size:.82rem;font-weight:850;text-decoration:none}
.home-notes-all span{color:var(--home-cyan)}.home-notes-all:hover,.home-notes-all:focus-visible{color:#087F8A}
.home-notes-empty{padding:19px 0;border-top:1px solid var(--home-border);border-bottom:1px solid var(--home-border)}
.home-notes-empty p{margin:0;color:var(--home-muted)}

@media (max-width: 900px) {
    .featured-tool {
        grid-template-columns: 1fr;
    }

    .featured-tool-preview {
        min-height: 310px;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .purpose-panel {
        grid-template-columns: 1fr;
        gap: 42px;
    }
}

@media (max-width: 760px) {
    .home-hero {
        padding: 50px 0 48px;
    }

    .home-title {
        font-size: clamp(3rem, 14vw, 5.1rem);
    }

    .home-section-heading,
    .home-section-heading-wide {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .home-section-heading-wide > p {
        max-width: 100%;
    }

    .next-grid {
        grid-template-columns: 1fr;
    }

    .privacy-strip {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

@media (max-width: 560px) {
    .home-hero {
        padding-top: 48px;
    }

    .home-title {
        margin-top: 14px;
        font-size: clamp(2.9rem, 15vw, 4.4rem);
        line-height: .97;
    }

    .home-lead {
        font-size: 1rem;
    }

    .home-tools,
    .home-next,
    .home-notes,
    .home-purpose,
    .home-privacy {
        padding-top: 46px;
        padding-bottom: 46px;
    }

    .home-tools {
        padding-top: 4px;
    }

    .featured-tool {
        min-height: 0;
        border-radius: 18px;
    }

    .featured-tool-copy {
        padding: 28px 24px 31px;
    }

    .featured-tool h3 {
        font-size: 2.25rem;
    }

    .featured-tool-preview {
        min-height: 270px;
        padding: 27px 24px;
    }

    .preview-lines > div {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 10px;
    }

    .purpose-panel {
        padding: 29px 24px;
        border-radius: 18px;
    }

    .principle {
        padding-left: 39px;
    }

    .privacy-strip {
        padding-top: 27px;
    }
}

@media(max-width:560px){
.home-hero .eyebrow{max-width:320px;font-size:.66rem;letter-spacing:.075em;line-height:1.55}
.home-note{grid-template-columns:54px minmax(0,1fr) 16px;gap:12px;padding:19px 0}
.home-note p{font-size:.83rem}.home-note h3{font-size:.98rem}
}


/* ============================================================
   V2.4 · Segunda herramienta disponible
   ============================================================ */

.secondary-tool {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(290px, .88fr);
    min-height: 300px;
    overflow: hidden;
    margin-top: 18px;
    border: 1px solid #D8E3E6;
    border-radius: 22px;
    background: #fff;
    color: var(--home-deep);
    text-decoration: none;
    box-shadow: 0 16px 46px rgba(15, 42, 51, .07);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.secondary-tool:hover,
.secondary-tool:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(34, 199, 214, .36);
    box-shadow: 0 22px 58px rgba(15, 42, 51, .10);
}

.secondary-tool-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(28px, 4.2vw, 46px);
}

.secondary-tool .featured-tool-kicker {
    color: #657C83;
}

.secondary-tool h3 {
    margin: 16px 0 11px;
    color: var(--home-deep);
    font-size: clamp(1.8rem, 3.6vw, 2.7rem);
    line-height: 1.02;
    letter-spacing: -.04em;
}

.secondary-tool-copy > p {
    max-width: 620px;
    margin: 0;
    color: var(--home-muted);
    font-size: .96rem;
    line-height: 1.62;
}

.secondary-tool .featured-tool-tags span {
    border-color: #DCE6E8;
    color: #647A81;
    background: #F6F9FA;
}

.secondary-tool .featured-tool-link {
    color: var(--home-deep);
}

.secondary-tool-preview {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(26px, 4vw, 42px);
    border-left: 1px solid rgba(255, 255, 255, .07);
    background:
        radial-gradient(circle at 88% 10%, rgba(34, 199, 214, .12), transparent 32%),
        linear-gradient(145deg, #102D36, #153B46);
}

.ip-home-preview{gap:18px}
.ip-preview-label{color:#8FAAAF;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.ip-preview-address{padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08);color:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(1.45rem,3vw,2.15rem);font-weight:850;letter-spacing:-.03em}
.ip-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ip-preview-grid span{min-width:0;padding:10px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(255,255,255,.025)}
.ip-preview-grid small{display:block;margin-bottom:4px;color:#7FA1A8;font-size:.62rem}
.ip-preview-grid strong{display:block;overflow:hidden;color:#EAF4F6;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}
.ip-preview-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#8FAAAF;font-size:.69rem}
.ip-preview-meta span{display:inline-flex;align-items:center;gap:7px}.ip-preview-meta i{width:7px;height:7px;border-radius:50%;background:var(--home-success);box-shadow:0 0 0 3px rgba(59,162,114,.10)}
.ip-preview-meta strong{color:#E9F4F6;font-size:.72rem;text-align:right}
@media(max-width:560px){.ip-preview-grid{grid-template-columns:1fr}.ip-preview-meta{align-items:flex-start;flex-direction:column}.ip-preview-meta strong{text-align:left}}

.password-preview-secret {
    overflow: hidden;
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.password-preview-fingerprint {
    display: grid;
    grid-template-columns: repeat(7, 18px);
    gap: 6px;
    justify-content: center;
    margin: 24px 0;
}

.password-preview-fingerprint span {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .035);
}

.password-preview-fingerprint span.on {
    background: rgba(34, 199, 214, .72);
    box-shadow: 0 0 15px rgba(34, 199, 214, .10);
}

.password-preview-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    color: #8FAAAF;
    font-size: .69rem;
}

.password-preview-meta strong {
    color: #E9F4F6;
    font-size: .73rem;
}

.password-preview-bar {
    height: 6px;
    overflow: hidden;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
}

.password-preview-bar span {
    display: block;
    width: 88%;
    height: 100%;
    border-radius: inherit;
    background: #22C7D6;
}

@media (max-width: 820px) {
    .secondary-tool {
        grid-template-columns: 1fr;
    }

    .secondary-tool-preview {
        min-height: 245px;
        border-top: 1px solid rgba(255, 255, 255, .07);
        border-left: 0;
    }
}

@media (max-width: 560px) {
    .secondary-tool {
        border-radius: 18px;
    }

    .secondary-tool-copy {
        padding: 26px 22px;
    }

    .secondary-tool h3 {
        font-size: 1.8rem;
    }

    .secondary-tool-preview {
        min-height: 220px;
        padding: 28px 22px;
    }
}


/* V2.5 · navegación a la sección del proyecto */
#consola22 {
    scroll-margin-top: 92px;
}


/* V2.6.1 · Miniaturas de Notas */
@media (min-width: 641px) and (max-width: 900px) {
    .home-note.has-image {
        grid-template-columns: 64px minmax(0, 1fr) 96px 18px;
        gap: 15px;
    }

    .home-note-thumb {
        width: 96px;
        border-radius: 8px;
    }
}

@media (max-width: 640px) {
    /*
     * La Home móvil conserva la composición anterior:
     * la miniatura se oculta para no restar espacio al título/resumen.
     */
    .home-note.has-image {
        grid-template-columns: 54px minmax(0, 1fr) 16px;
    }

    .home-note-thumb {
        display: none;
    }
}


/* ============================================================
   V2.7 · Tercera herramienta disponible · Propagación DNS
   ============================================================ */
.dns-home-tool{margin-top:18px}
.dns-home-preview{gap:19px}
.dns-preview-query{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.dns-preview-query span{overflow:hidden;color:#F5FAFB;font-size:1rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.dns-preview-query strong{padding:4px 8px;border:1px solid rgba(34,199,214,.24);border-radius:7px;color:#86D8E1;font-size:.72rem}
.dns-preview-nodes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.dns-preview-nodes span{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 6px;border:1px solid rgba(255,255,255,.07);border-radius:9px;color:#D9E8EB;font-size:.72rem;font-weight:800}.dns-preview-nodes i{width:7px;height:7px;border-radius:50%;background:var(--home-success);box-shadow:0 0 0 3px rgba(59,162,114,.10)}
.dns-preview-meta{display:flex;align-items:baseline;justify-content:space-between;gap:14px;color:#8FAAAF;font-size:.69rem}.dns-preview-meta strong{color:#E9F4F6;font-size:.73rem}.dns-preview-bar{height:6px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.07)}.dns-preview-bar span{display:block;width:82%;height:100%;border-radius:inherit;background:#22C7D6}


/* ============================================================
   V2.8 · Cuarta herramienta · Comprobar contraseña filtrada
   ============================================================ */
.breach-home-tool{margin-top:18px}
.breach-home-preview{gap:18px}
.breach-preview-label{color:#8FAAAF;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.breach-preview-secret{padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08);color:#F5FAFB;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(1.35rem,3vw,2rem);font-weight:850;letter-spacing:.08em}
.breach-preview-flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:7px;align-items:center}
.breach-preview-flow span{min-width:0;padding:10px 8px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(255,255,255,.025);text-align:center}
.breach-preview-flow small,.breach-preview-flow strong{display:block}.breach-preview-flow small{color:#7FA1A8;font-size:.6rem}.breach-preview-flow strong{margin-top:3px;color:#EAF4F6;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.7rem}.breach-preview-flow>i{color:#4FBFCC;font-size:.78rem;font-style:normal}
.breach-preview-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#8FAAAF;font-size:.69rem}.breach-preview-meta>span{display:inline-flex;align-items:center;gap:7px}.breach-preview-meta>span i{width:7px;height:7px;border-radius:50%;background:var(--home-success);box-shadow:0 0 0 3px rgba(59,162,114,.10)}.breach-preview-meta strong{color:#E9F4F6;font-size:.72rem;text-align:right}
@media(max-width:560px){.breach-preview-flow{grid-template-columns:1fr}.breach-preview-flow>i{transform:rotate(90deg);text-align:center}.breach-preview-meta{align-items:flex-start;flex-direction:column}.breach-preview-meta strong{text-align:left}}