/*
 * Vishow Tools stylesheet: Global public-site layout, typography, homepage sections, footer, and analytics consent UI.
 * Sections are intentionally kept unminified and human-readable for direct maintenance.
 */

:root {
    --ink: #111827;
    --muted: #64748b;
    --line: #dfe6ef;
    --paper: #fff;
    --canvas: #f6f8fb;
    --blue: #2563eb;
    --blue2: #1d4ed8;
    --soft: #eff6ff;
    --green: #16a34a;
    --navy: #0c172b;
    --red: #b91c1c;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button, input {
    font: inherit;
}

button, a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible {
    outline: 3px solid #93b4fb;
    outline-offset: 3px;
}

.shell {
    width: min(1160px, calc(100% - 40px));
    margin: auto;
}

.narrow {
    width: min(860px, calc(100% - 40px));
    margin: auto;
}

.skip {
    position: fixed;
    z-index: 50;
    top: 8px;
    left: 8px;
    padding: 10px;
    background: var(--ink);
    color: white;
    transform: translateY(-150%);
}

.skip:focus {
    transform: none;
}

.site-header {
    position: sticky;
    z-index: 20;
    top: 0;
    border-bottom: 1px solid var(--line);
    background: #fffffff0;
    backdrop-filter: blur(14px);
}

.top {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: 17px;
}

.brand b {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 9px;
    background: var(--blue);
    color: white;
    box-shadow: 0 6px 18px #2563eb38;
}

.top nav {
    display: flex;
    gap: 34px;
    color: #475569;
    font-size: 14px;
}

.top nav a:hover {
    color: var(--blue);
}

.browse {
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: white;
    font-size: 13px;
    font-weight: 700;
}

.hero {
    position: relative;
    overflow: hidden;
    padding: 104px 0 94px;
    background: radial-gradient(circle at 82% 28%, #2563eb14, transparent 30%), linear-gradient(#fff, #f8faff);
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .35;
    background-image: linear-gradient(#2563eb0d 1px, transparent 1px), linear-gradient(90deg, #2563eb0d 1px, transparent 1px);
    background-size: 44px 44px;
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    align-items: center;
    gap: 84px;
}

.eyebrow {
    display: block;
    margin-bottom: 14px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hero h1, .pagehead h1, .prosehead h1, .article h1, .missing h1 {
    margin: 0;
    font-size: clamp(45px, 5vw, 72px);
    line-height: 1.02;
    letter-spacing: -.055em;
}

.hero h1 em {
    color: var(--blue);
    font-style: normal;
}

.hero>div>div>p {
    max-width: 600px;
    color: #526176;
    font-size: 18px;
    line-height: 1.72;
}

.actions {
    display: flex;
    gap: 12px;
    margin-top: 30px;
}

.button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border: 0;
    border-radius: 9px;
    background: var(--blue);
    color: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: 720;
    box-shadow: 0 10px 26px #2563eb3d;
}

.button:hover {
    background: var(--blue2);
}

.button.ghost {
    border: 1px solid var(--line);
    background: white;
    color: #334155;
    box-shadow: none;
}

.button.full {
    width: 100%;
}

.trust {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 30px;
    color: #557064;
    font-size: 12px;
}

.feature, .workspace {
    padding: 28px;
    border: 1px solid #dbe4f0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 70px #0f17211f;
}

.featuretop {
    display: flex;
    justify-content: space-between;
}

.featuretop small, .workspace>small {
    color: #718096;
    font-size: 10px;
    font-weight: 780;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.featuretop h2 {
    margin: 5px 0;
    font-size: 20px;
}

.local {
    height: max-content;
    padding: 6px 9px;
    border-radius: 99px;
    background: #f0fdf4;
    color: #15803d;
    font-size: 10px;
    font-weight: 700;
}

.feature>p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.sample {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 22px 0;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #f8fafc;
}

.sample code {
    overflow: hidden;
    color: #172554;
    text-overflow: ellipsis;
}

.sample span {
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
}

.privacy {
    display: block;
    margin-top: 14px;
    color: #718096;
    text-align: center;
}

/* Keep the final tool row close to the trust-band separator, as approved. */
.toolbox {
    /* Approved screenshot: keep a deliberate gap between the final tool row
       and the upper separator of the Private by design band. */
    padding: 96px 0 65px;
}

.toolbox h2, .guides h2, .securityband h2 {
    margin: 0;
    font-size: clamp(32px, 4vw, 46px);
    letter-spacing: -.045em;
}

.lead {
    color: var(--muted);
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 38px;
}

.card {
    min-height: 242px;
    padding: 23px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #ffffffb8;
    opacity: .72;
}

.card.live {
    background: white;
    opacity: 1;
    box-shadow: 0 7px 26px #0f17210b;
    transition: .16s;
}

.card.live:hover {
    transform: translateY(-3px);
    border-color: #b8c9e2;
}

.badge {
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    border-radius: 10px;
    background: var(--soft);
    color: var(--blue);
    font: 800 12px monospace;
}

.card>small {
    float: right;
    margin-top: -26px;
    color: #94a3b8;
    font-size: 10px;
    text-transform: uppercase;
}

.card h3 {
    margin: 22px 0 9px;
    font-size: 17px;
}

.card>p {
    min-height: 58px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
}

.card footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding: 0;
    background: none;
    color: #718096;
    font-size: 9px;
}

.card footer span:first-letter {
    color: var(--green);
}

.card footer b {
    color: var(--blue);
    font-size: 18px;
}

.securityband {
    padding: 100px 0;
    background: var(--navy);
    color: white;
}

.bandgrid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 110px;
    align-items: center;
}

.securityband p {
    color: #a9b7ca;
    line-height: 1.78;
}

.securityband a {
    color: #a9c2ff;
    font-size: 13px;
    font-weight: 700;
}

.principles {
    border-top: 1px solid #ffffff1f;
}

.principles article {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 20px;
    padding: 25px 0;
    border-bottom: 1px solid #ffffff1f;
}

.principles article>span {
    color: #6f91d5;
    font: 11px monospace;
}

.principles h3 {
    margin: 0 0 7px;
    font-size: 15px;
}

.principles p {
    margin: 0;
    color: #91a1b6;
    font-size: 12px;
}

/* Match the approved separator-to-guides gap without changing the section bottom. */
.guides {
    /* Approved screenshot: the lower separator needs a larger breathing space
       before the Practical guides eyebrow and heading begin. */
    padding: 110px 0 100px;
    background: white;
}

.guidecards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 35px;
    border-top: 1px solid var(--line);
}

.guidecards>a {
    padding: 30px 28px 8px 0;
}

.guidecards>a+a {
    padding-left: 28px;
    border-left: 1px solid var(--line);
}

.guidecards small {
    color: #8795a8;
    font-size: 10px;
    text-transform: uppercase;
}

.guidecards h3, .guidecards h2 {
    font-size: 20px;
    line-height: 1.35;
}

.guidecards p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}

.guidecards b {
    color: var(--blue);
    font-size: 12px;
}

.pagehead {
    padding: 38px 0 34px;
    border-bottom: 1px solid var(--line);
    background: white;
}

.crumb {
    display: flex;
    gap: 9px;
    margin-bottom: 18px;
    color: var(--muted);
    font-size: 12px;
}

.crumb a {
    color: var(--blue);
}

.pagehead h1, .prosehead h1, .article h1 {
    font-size: clamp(38px, 5vw, 58px);
}

.pagehead .narrow>p {
    max-width: 730px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.72;
}

.pagebody {
    padding: 34px 0 88px;
}

.notice {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
    padding: 16px 18px;
    border: 1px solid #bbdfc8;
    border-radius: 11px;
    background: #f2fbf5;
}

.notice>b {
    color: var(--green);
}

.notice strong {
    font-size: 13px;
}

.notice p {
    margin: 4px 0 0;
    color: #557061;
    font-size: 11px;
}

.labelline {
    display: flex;
    justify-content: space-between;
    margin-bottom: 9px;
    font-size: 12px;
    font-weight: 700;
}

.labelline span {
    color: var(--green);
}

.output {
    display: flex;
    min-height: 60px;
    align-items: center;
    border: 1px solid #cfd9e7;
    border-radius: 10px;
    background: #f8fafc;
}

.output input {
    min-width: 0;
    flex: 1;
    padding: 0 16px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #172554;
    font: 15px monospace;
}

.output button, .copy {
    min-width: 72px;
    margin-right: 9px;
    padding: 9px 12px;
    border: 0;
    border-radius: 7px;
    background: var(--soft);
    color: var(--blue);
    cursor: pointer;
    font-size: 11px;
    font-weight: 750;
}

.meter {
    height: 4px;
    margin: 10px 0 26px;
    border-radius: 99px;
    background: #e5eaf1;
}

.meter span {
    display: block;
    width: 75%;
    height: 100%;
    background: var(--green);
}

.range {
    width: 100%;
    accent-color: var(--blue);
}

.options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    margin: 26px 0 16px;
    padding: 0;
    border: 0;
}

.options legend {
    grid-column: 1/-1;
    font-size: 12px;
    font-weight: 700;
}

.options label, .solo {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #475569;
    font-size: 12px;
}

.options input, .solo input {
    width: 16px;
    height: 16px;
    accent-color: var(--blue);
}

.options code, .solo code {
    margin-left: auto;
    color: #94a3b8;
}

.solo {
    padding: 14px 0 22px;
    border-top: 1px solid var(--line);
}

.error {
    min-height: 20px;
    color: var(--red);
    font-size: 12px;
}

.stacked {
    display: block;
    margin-bottom: 9px;
    font-size: 12px;
    font-weight: 700;
}

.help {
    color: var(--muted);
    font-size: 10px;
}

.totp {
    margin: 28px 0 20px;
    padding: 28px;
    border-radius: 12px;
    background: var(--navy);
    color: white;
    text-align: center;
}

.totp>span {
    color: #91a1b6;
    font-size: 10px;
    text-transform: uppercase;
}

.totp strong {
    display: block;
    margin: 14px 0;
    font: 35px monospace;
    letter-spacing: .18em;
}

.totp>div {
    height: 4px;
    background: #ffffff24;
}

.totp>div span {
    display: block;
    height: 100%;
    background: #7da6ff;
}

.totp small {
    display: block;
    margin-top: 10px;
    color: #91a1b6;
}

.twocol {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 26px;
    margin-top: 34px;
}

.twocol>* {
    padding: 27px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: white;
}

.twocol h2, .faq h2, .properties h2, .commands h2 {
    margin: 0 0 13px;
    font-size: 23px;
}

.twocol p, .twocol li {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.75;
}

.faq {
    margin-top: 64px;
}

.faq details {
    border-top: 1px solid var(--line);
    background: white;
}

.faq summary {
    padding: 19px 4px;
    cursor: pointer;
    font-weight: 700;
}

.faq details p {
    margin: -4px 4px 20px;
    color: var(--muted);
    line-height: 1.7;
}

.ip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 11px;
}

.ip strong {
    overflow-wrap: anywhere;
    font: clamp(28px, 5vw, 48px) monospace;
}

.properties, .commands {
    margin-top: 64px;
}

.properties>div {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) 70px;
    gap: 18px;
    padding: 14px 17px;
    border: 1px solid var(--line);
    border-bottom: 0;
    background: white;
    font-size: 11px;
}

.properties>div:last-child {
    border-bottom: 1px solid var(--line);
}

.properties span {
    color: var(--muted);
}

.properties code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.properties a {
    color: var(--blue);
    text-align: right;
}

.commands>div {
    margin-top: 13px;
    border-radius: 10px;
    background: var(--navy);
    color: #dbeafe;
}

.commands>div>span {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    background: #172338;
    color: #b6c2d3;
    font-size: 11px;
}

.commands code {
    display: block;
    padding: 18px;
    overflow-x: auto;
}

.prosehead {
    padding: 34px 0 38px;
    background: white;
    border-bottom: 1px solid var(--line);
}

.prosehead.dark {
    background: var(--navy);
    color: white;
}

.prose {
    width: min(760px, calc(100% - 40px));
    margin: auto;
}

.prosehead p {
    color: var(--muted);
    font-size: 18px;
    line-height: 1.75;
}

.prosehead.dark p {
    color: #a9b7ca;
}

.content {
    padding: 34px 0 90px;
}

.content h2 {
    margin: 30px 0 12px;
    font-size: 25px;
}

.content p {
    color: #526176;
    font-size: 15px;
    line-height: 1.85;
}

.guideindex {
    padding: 60px 0 100px;
}

.article {
    padding: 70px 0 110px;
}

.article header, .articlebody {
    width: min(760px, calc(100% - 40px));
    margin: auto;
}

.article header>p {
    color: var(--muted);
    font-size: 19px;
    line-height: 1.7;
}

.articlebody {
    padding-top: 44px;
    border-top: 1px solid var(--line);
}

.articlebody h2 {
    margin: 42px 0 12px;
    font-size: 27px;
}

.articlebody p, .articlebody li {
    color: #475569;
    font-size: 15px;
    line-height: 1.88;
}

.articlebody pre {
    overflow-x: auto;
    padding: 20px;
    border-radius: 10px;
    background: var(--navy);
    color: #dbeafe;
}

.articlebody p code {
    padding: 2px 5px;
    background: #eaf0f8;
}

.callout {
    margin-top: 48px;
    padding: 26px;
    border-left: 4px solid var(--blue);
    background: var(--soft);
}

.callout p {
    margin: 8px 0;
}

.callout a {
    color: var(--blue);
    font-weight: 700;
}

.missing {
    padding: 120px 0;
    text-align: center;
}

.missing>div>span {
    color: var(--blue);
    font: 800 18px monospace;
}

.missing p {
    color: var(--muted);
}

footer {
    padding: 64px 0 24px;
    background: #f1f5fa;
}

.foot {
    display: flex;
    justify-content: space-between;
    padding-bottom: 48px;
}

.foot p {
    color: var(--muted);
    font-size: 12px;
}

.footlinks {
    display: flex;
    gap: 90px;
}

.footlinks div {
    display: flex;
    min-width: 90px;
    flex-direction: column;
    gap: 10px;
}

.footlinks a {
    color: var(--muted);
    font-size: 11px;
}

.copyright {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    color: #8491a2;
    font-size: 10px;
}

@media (max-width:900px) {
    .top nav {
        display: none;
    }

    .hero-grid, .bandgrid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .cards {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width:640px) {
    .shell, .narrow, .prose, .article header, .articlebody {
        width: min(100% - 28px, 1160px);
    }

    .top {
        height: 64px;
    }

    .browse {
        display: none;
    }

    .hero {
        padding: 65px 0;
    }

    .hero h1 {
        font-size: 47px;
    }

    .actions {
        flex-direction: column;
    }

    .feature, .workspace {
        padding: 20px;
    }

    .toolbox, .guides, .securityband {
        padding: 72px 0;
    }

    .cards, .twocol {
        grid-template-columns: 1fr;
    }

    .guidecards>a, .guidecards>a+a {
        padding: 26px 0;
        border-left: 0;
        border-bottom: 1px solid var(--line);
    }

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

    .properties>div {
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .properties>div>*: last-child {
        display: none;
    }

    .foot {
        flex-direction: column;
        gap: 40px;
    }

    .footlinks {
        gap: 60px;
    }

    .copyright {
        flex-direction: column;
        gap: 8px;
    }
}

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

    *, *: before, *: after {
        transition-duration: .01ms!important;
    }
}

/* --------------------------------------------------------------------------
   Alpha13: public Guides index
   --------------------------------------------------------------------------
   Purpose:
   - Match the approved compact Guides-card layout without changing CMS text.
   - Keep every guide as its own clearly bounded card.
   - Avoid a large container/border around the entire guide collection.
   - Keep decorative icons separate from guide content and accessibility text.
   Future adjustment:
   - Card width and column count are controlled by .guide-listing.
   - Card padding/height are controlled by .guide-list-card.
   - Hero spacing is isolated to .guide-hero so other public pages are unchanged.
   -------------------------------------------------------------------------- */

.guide-hero {
    padding: 30px 0 28px;
}

.guide-hero .prose {
    width: min(1160px, calc(100% - 40px));
}

.guide-hero .crumb {
    margin-bottom: 18px;
}

/* The duplicated Guides eyebrow is hidden visually on this index only. */

.guide-hero .eyebrow {
    display: none;
}

.guide-hero h1 {
    font-size: clamp(36px, 4vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.guide-hero p {
    max-width: 760px;
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.6;
}

.pagebody.guideindex {
    padding: 28px 0 88px;
    background: #f7f9fc;
}

/* Preserve CMS-authored introduction content while making it visually compact. */

.guideindex > .shell > .cms-content {
    width: 100%;
    margin: 0;
}

.guideindex > .shell > .cms-content h2 {
    margin: 0 0 6px;
    font-size: 18px;
    letter-spacing: -0.02em;
}

.guideindex > .shell > .cms-content p {
    max-width: 760px;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

.guideindex .guidecards.guide-listing {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 24px;
    border: 0;
}

.guideindex .guidecards.guide-listing > .guide-list-card, .guideindex .guidecards.guide-listing > .guide-list-card + .guide-list-card {
    display: flex;
    min-width: 0;
    min-height: 224px;
    flex-direction: column;
    padding: 22px;
    border: 1px solid #dfe6ef;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 6px 20px #0f17210b;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.guideindex .guidecards.guide-listing > .guide-list-card:hover {
    transform: translateY(-2px);
    border-color: #bfd0ea;
    box-shadow: 0 10px 26px #0f172112;
}

.guide-card-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    background: #eef4ff;
    color: var(--blue);
}

.guide-card-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.guideindex .guide-list-card h2 {
    margin: 17px 0 8px;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -0.018em;
}

.guideindex .guide-list-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.65;
}

.guideindex .guide-list-card b {
    margin-top: auto;
    padding-top: 18px;
    color: var(--blue);
    font-size: 12px;
}

@media (max-width: 900px) {
    .guideindex .guidecards.guide-listing {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .guide-hero .prose {
        width: min(100% - 28px, 1160px);
    }

    .guide-hero {
        padding: 24px 0 22px;
    }

    .pagebody.guideindex {
        padding: 22px 0 64px;
    }

    .guideindex .guidecards.guide-listing {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .guideindex .guidecards.guide-listing > .guide-list-card, .guideindex .guidecards.guide-listing > .guide-list-card + .guide-list-card {
        min-height: 0;
        padding: 20px;
    }
}

/* Standard public-page vertical spacing is CMS-controlled.
   Positive values create vertical padding. Negative values use margin to pull the
   next section upward because CSS padding itself cannot be negative.
   Horizontal widths and indentation remain unchanged. */

.prosehead {
    padding-top: max(var(--site-page-header-top-spacing, 34px), 0px);
    margin-top: min(var(--site-page-header-top-spacing, 34px), 0px);
}

.prosehead + .content {
    padding-top: max(var(--site-page-content-top-spacing, 30px), 0px);
    margin-top: min(var(--site-page-content-top-spacing, 30px), 0px);
}

.prosehead + .content > :first-child {
    margin-top: 0;
}

.prosehead + .pagebody:not(.guideindex) {
    padding-top: max(var(--site-page-content-top-spacing, 30px), 0px);
    margin-top: min(var(--site-page-content-top-spacing, 30px), 0px);
}

.prosehead + .pagebody:not(.guideindex) > .shell > .cms-content {
    margin-top: 0;
}

/* Standard content pages place the reading column directly inside pagebody.
   Reset its generic article margin so the CMS spacing control is the single
   source of vertical distance below the page hero. */

.prosehead + .pagebody:not(.guideindex) > .prose.cms-content {
    margin-top: 0;
}

.prosehead + .pagebody:not(.guideindex) > .shell > .cms-content > :first-child, .prosehead + .pagebody:not(.guideindex) > .prose.cms-content > :first-child {
    margin-top: 0;
}

/*
 * Homepage “Private by design” trust band.
 *
 * Measurements are normalized from the approved screenshot against the known
 * tool-card dimensions. The resulting 50 px band padding, 36 px heading, 16 px
 * body copy, and explicit neighboring-section gaps reproduce the intended scale
 * without depending on the browser zoom used when the reference was captured.
 *
 * These page-specific selectors intentionally outrank the generic .cms-content
 * rules in tools.css so article margins cannot distort this homepage section.
 */

.home-trust-band {
    padding: 50px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}

.home-trust-band .home-trust-content {
    width: 100%;
    max-width: none;
    margin-top: 0;
}

.home-trust-band .home-trust-content h2 {
    margin: 0 0 14px;
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -.045em;
}

.home-trust-band .home-trust-content p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
}

.home-trust-band .home-trust-content p + p {
    margin-top: 8px;
}

.footer-privacy-settings {
    width: max-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.footer-privacy-settings:hover {
    color: var(--blue);
}

.analytics-consent {
    position: fixed;
    z-index: 50;
    right: 18px;
    bottom: 18px;
    width: min(430px, calc(100% - 36px));
    padding: 18px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 20px 55px #0f172126;
}

.analytics-consent.is-hidden {
    display: none;
}

.analytics-consent-copy strong {
    font-size: 14px;
}

.analytics-consent-copy p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.analytics-consent-copy .analytics-consent-status {
    color: #334155;
    font-weight: 650;
}

.analytics-consent-copy .consent-state {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #1e3a8a;
}

.analytics-consent-copy .consent-state.is-off {
    background: #f1f5f9;
    color: #475569;
}

.analytics-consent-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.analytics-consent-actions button, .analytics-consent-actions a {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
}

.analytics-consent-actions button {
    cursor: pointer;
}

.analytics-consent-actions button:disabled {
    cursor: wait;
    opacity: .6;
}

.analytics-consent-actions .consent-allow {
    border: 1px solid var(--blue);
    background: var(--blue);
    color: #fff;
}

.analytics-consent-actions .consent-decline, .analytics-consent-actions .consent-close {
    border: 1px solid var(--line);
    background: #fff;
    color: #334155;
}

.analytics-consent-actions a {
    display: inline-flex;
    align-items: center;
    color: var(--blue);
}

.analytics-consent-actions .consent-close {
    width: 34px;
    margin-left: auto;
    padding: 0;
    font-size: 18px;
}

@media (max-width: 640px) {
    .analytics-consent {
        right: 14px;
        bottom: 14px;
        width: calc(100% - 28px);
    }
}