/* /Components/Layout/DocsLayout.razor.rz.scp.css */
/* Docs chrome. Scoped to DocsLayout; ::deep is used wherever the rule has to reach markup rendered by
   a child component — the page inside @Body, and PublicLanguageSwitcher's own elements. The public
   site's pnav-* classes live in PublicLayout's inline <style> block, so the top-bar link and CTA
   styles are restated here rather than inherited. */

.docs-shell[b-6vyzew7zwp] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #1a2233;
}

/* ---------- top bar ---------- */

.docs-topbar[b-6vyzew7zwp] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid #e2e5ea;
}

.docs-brand[b-6vyzew7zwp] {
    display: block;
    flex-shrink: 0;
}

.docs-brand img[b-6vyzew7zwp] {
    height: 36px;
    width: auto;
    display: block;
}

.docs-wordmark[b-6vyzew7zwp] {
    font-weight: 700;
    font-size: 1.05rem;
    color: #1a2233;
    text-decoration: none;
    padding: 0.25rem 0.1rem;
    border-left: 1px solid #d7dbe2;
    padding-left: 0.8rem;
    flex-shrink: 0;
}

.docs-wordmark:hover[b-6vyzew7zwp] {
    color: #d1415d;
}

.docs-searchform[b-6vyzew7zwp] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    max-width: 420px;
    margin-inline: auto;
}

.docs-searchform input[b-6vyzew7zwp] {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    font-size: 0.95rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid #d7dbe2;
    border-radius: 8px;
    background: #f6f8fa;
    color: #1a2233;
}

.docs-searchform input:focus[b-6vyzew7zwp] {
    outline: 2px solid #d1415d;
    outline-offset: 1px;
    background: #fff;
}

.docs-searchform button[b-6vyzew7zwp] {
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0.45rem 0.9rem;
    border: 1px solid #d7dbe2;
    border-radius: 8px;
    background: #fff;
    color: #1a2233;
    cursor: pointer;
    white-space: nowrap;
}

.docs-searchform button:hover[b-6vyzew7zwp] {
    border-color: #d1415d;
    color: #d1415d;
}

.docs-topnav[b-6vyzew7zwp] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

.docs-navlink[b-6vyzew7zwp] {
    color: #1a2233;
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    white-space: nowrap;
}

.docs-navlink:hover[b-6vyzew7zwp] {
    color: #d1415d;
}

.docs-cta[b-6vyzew7zwp] {
    margin-left: 0.35rem;
    background: #d1415d;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    white-space: nowrap;
}

.docs-cta:hover[b-6vyzew7zwp] {
    background: #b6304a;
}

/* PublicLanguageSwitcher renders its own markup, so these have to cross the component boundary.
   Restated from PublicLayout because that layout's styles are inline to it. */
.docs-topnav[b-6vyzew7zwp]  .pub-lang {
    position: relative;
}

.docs-topnav[b-6vyzew7zwp]  .pub-lang-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    list-style: none;
    cursor: pointer;
    color: #1a2233;
    font-weight: 700;
    padding: 0.5rem;
    user-select: none;
}

.docs-topnav[b-6vyzew7zwp]  .pub-lang-summary::-webkit-details-marker {
    display: none;
}

.docs-topnav[b-6vyzew7zwp]  .pub-lang-menu {
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 140px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    padding: 0.25rem 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
}

.docs-topnav[b-6vyzew7zwp]  .pub-lang-item {
    padding: 0.5rem 1rem;
    color: #1a2233;
    text-decoration: none;
    white-space: nowrap;
}

.docs-topnav[b-6vyzew7zwp]  .pub-lang-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

.docs-topnav[b-6vyzew7zwp]  .pub-lang-item.active {
    font-weight: 700;
    opacity: 0.6;
    pointer-events: none;
}

/* ---------- shell grid ---------- */

.docs-body[b-6vyzew7zwp] {
    flex: 1 1 auto;
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 2rem;
    padding: 0 1.25rem;
}

.docs-content[b-6vyzew7zwp] {
    min-width: 0;
    padding: 2rem 0 3rem;
}

/* ---------- sidebar ---------- */

.docs-nav[b-6vyzew7zwp] {
    border-right: 1px solid #eceff3;
    padding: 1.75rem 1rem 3rem 0;
}

.docs-nav > summary[b-6vyzew7zwp] {
    cursor: pointer;
    font-weight: 700;
    padding: 0.75rem 0;
    list-style: none;
}

.docs-nav > summary[b-6vyzew7zwp]::-webkit-details-marker {
    display: none;
}

.docs-nav > summary[b-6vyzew7zwp]::after {
    content: " \25BE";
}

.docs-nav[open] > summary[b-6vyzew7zwp]::after {
    content: " \25B4";
}

/* Sits above the first category, separated by a rule so it reads as a destination rather than as an
   unlabelled member of the first group. */
.docs-nav-home[b-6vyzew7zwp] {
    display: block;
    padding: 0.35rem 0.6rem;
    margin: 0 0 0.9rem -0.6rem;
    border-radius: 6px;
    color: #1a2233;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
}

.docs-nav-home[b-6vyzew7zwp]::before {
    content: "\2190\00a0";
    color: #9aa3b2;
}

.docs-nav-home:hover[b-6vyzew7zwp] {
    background: #f4f6f9;
    color: #d1415d;
}

.docs-nav-home.current[b-6vyzew7zwp] {
    background: #fdeef1;
    color: #b6304a;
}

/* The arrow reads as "back"; on the home page itself there is nowhere back to, so drop it. */
.docs-nav-home.current[b-6vyzew7zwp]::before {
    content: none;
}

.docs-nav-heading[b-6vyzew7zwp] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6b7280;
    margin: 1.5rem 0 0.5rem;
    font-weight: 700;
}

.docs-nav-heading:first-child[b-6vyzew7zwp] {
    margin-top: 0;
}

.docs-nav-list[b-6vyzew7zwp] {
    list-style: none;
    margin: 0 0 0.25rem;
    padding: 0;
}

.docs-nav-link[b-6vyzew7zwp] {
    display: block;
    padding: 0.3rem 0.6rem;
    margin-left: -0.6rem;
    border-radius: 6px;
    color: #33415c;
    text-decoration: none;
    font-size: 0.93rem;
    line-height: 1.4;
}

.docs-nav-link:hover[b-6vyzew7zwp] {
    background: #f4f6f9;
    color: #d1415d;
}

.docs-nav-link.current[b-6vyzew7zwp] {
    background: #fdeef1;
    color: #b6304a;
    font-weight: 600;
}

/* ---------- baseline ---------- */

.docs-baseline[b-6vyzew7zwp] {
    border-top: 1px solid #e2e5ea;
    padding: 1.25rem;
    text-align: center;
    color: #6b7280;
    font-size: 0.88rem;
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
}

.docs-baseline a[b-6vyzew7zwp] {
    color: #6b7280;
    text-decoration: none;
}

.docs-baseline a:hover[b-6vyzew7zwp] {
    color: #d1415d;
}

/* ---------- breakpoints ---------- */

/* Desktop: the sidebar is not a disclosure, it is just there. The <details> is closed in the markup so
   phones get a collapsed "Browse the docs" block, which means desktop has to force it open without
   JavaScript. ::details-content is the modern lever; the display rule covers engines that predate it.
   Both are harmless where the other applies. */
@media (min-width: 900px) {
    .docs-nav > summary[b-6vyzew7zwp] {
        display: none;
    }

    .docs-nav > .docs-nav-inner[b-6vyzew7zwp] {
        display: block;
    }

    .docs-nav[b-6vyzew7zwp]::details-content {
        content-visibility: visible;
        block-size: auto;
    }
}

@media (max-width: 899.98px) {
    .docs-body[b-6vyzew7zwp] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .docs-nav[b-6vyzew7zwp] {
        border-right: none;
        border-bottom: 1px solid #eceff3;
        padding: 0 0 0.75rem;
    }

    .docs-content[b-6vyzew7zwp] {
        padding-top: 1.5rem;
    }
}

@media (max-width: 780px) {
    /* The search box moves under the bar's own row rather than shrinking to nothing beside the CTA. */
    .docs-topbar[b-6vyzew7zwp] {
        flex-wrap: wrap;
    }

    .docs-searchform[b-6vyzew7zwp] {
        order: 3;
        flex-basis: 100%;
        max-width: none;
        margin-inline: 0;
    }

    .docs-topnav[b-6vyzew7zwp] {
        margin-left: auto;
    }
}

@media (max-width: 420px) {
    .docs-wordmark[b-6vyzew7zwp] {
        display: none;
    }

    .docs-navlink[b-6vyzew7zwp],
    .docs-cta[b-6vyzew7zwp] {
        font-size: 0.9rem;
        padding: 0.45rem 0.7rem;
    }
}

/* ---------------------------------------------------------------------------------------------
   Content column. These rules cross into DocsHome / DocsArticle / DocsSearch, which render inside
   @Body, so every selector is anchored on .docs-content and uses ::deep. Keeping them here rather
   than in three sibling .razor.css files means the docs read as one design in one file.
   --------------------------------------------------------------------------------------------- */

/* Article + "On this page". The right column disappears under 1200px rather than squeezing the prose. */
.docs-content[b-6vyzew7zwp]  .docs-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 2.5rem;
    align-items: start;
}

.docs-content[b-6vyzew7zwp]  .docs-article {
    max-width: 760px;
    min-width: 0;
    line-height: 1.7;
}

.docs-content[b-6vyzew7zwp]  .docs-breadcrumb {
    font-size: 0.85rem;
    color: #6b7280;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.docs-content[b-6vyzew7zwp]  .docs-breadcrumb a {
    color: #6b7280;
    text-decoration: none;
}

.docs-content[b-6vyzew7zwp]  .docs-breadcrumb a:hover {
    color: #d1415d;
    text-decoration: underline;
}

.docs-content[b-6vyzew7zwp]  .docs-article h1 {
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.docs-content[b-6vyzew7zwp]  .docs-lead {
    font-size: 1.1rem;
    color: #4a5568;
    margin: 0 0 1.75rem;
}

.docs-content[b-6vyzew7zwp]  .docs-draft-flag {
    display: inline-block;
    background: #fff6e5;
    border: 1px solid #f0d093;
    color: #7a5312;
    border-radius: 6px;
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
}

/* ---------- rendered markdown ---------- */

/* scroll-margin keeps a heading clear of the sticky top bar when an "On this page" link jumps to it. */
.docs-content[b-6vyzew7zwp]  .docs-prose h2 {
    font-size: 1.4rem;
    margin: 2.25rem 0 0.75rem;
    scroll-margin-top: 5rem;
}

.docs-content[b-6vyzew7zwp]  .docs-prose h3 {
    font-size: 1.12rem;
    margin: 1.75rem 0 0.6rem;
    scroll-margin-top: 5rem;
}

.docs-content[b-6vyzew7zwp]  .docs-prose p,
.docs-content[b-6vyzew7zwp]  .docs-prose ul,
.docs-content[b-6vyzew7zwp]  .docs-prose ol {
    margin: 0 0 1rem;
}

.docs-content[b-6vyzew7zwp]  .docs-prose ul,
.docs-content[b-6vyzew7zwp]  .docs-prose ol {
    padding-left: 1.4rem;
}

.docs-content[b-6vyzew7zwp]  .docs-prose li {
    margin-bottom: 0.35rem;
}

.docs-content[b-6vyzew7zwp]  .docs-prose a {
    color: #c03352;
}

.docs-content[b-6vyzew7zwp]  .docs-prose code {
    background: #f4f6f9;
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    font-size: 0.92em;
}

.docs-content[b-6vyzew7zwp]  .docs-prose pre {
    background: #f6f8fa;
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    overflow-x: auto;
}

.docs-content[b-6vyzew7zwp]  .docs-prose pre code {
    background: none;
    padding: 0;
}

/* Wide tables scroll inside their own box rather than widening the page on a phone. */
.docs-content[b-6vyzew7zwp]  .docs-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.95rem;
    display: block;
    overflow-x: auto;
}

.docs-content[b-6vyzew7zwp]  .docs-prose th,
.docs-content[b-6vyzew7zwp]  .docs-prose td {
    border: 1px solid #e2e5ea;
    padding: 0.5rem 0.7rem;
    text-align: left;
    vertical-align: top;
}

.docs-content[b-6vyzew7zwp]  .docs-prose thead th {
    background: #f6f8fa;
}

.docs-content[b-6vyzew7zwp]  .docs-prose blockquote {
    margin: 1.5rem 0;
    padding: 0.9rem 1.1rem;
    background: #f4fbf5;
    border-left: 4px solid #3fae5a;
    border-radius: 4px;
}

.docs-content[b-6vyzew7zwp]  .docs-prose blockquote p {
    margin: 0;
}

/* ---------- article footer ---------- */

.docs-content[b-6vyzew7zwp]  .docs-article-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e5ea;
}

.docs-content[b-6vyzew7zwp]  .docs-verified {
    color: #6b7280;
    font-size: 0.88rem;
    margin: 0 0 1.25rem;
}

.docs-content[b-6vyzew7zwp]  .docs-prevnext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.docs-content[b-6vyzew7zwp]  .docs-prevnext-link {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 1rem;
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    text-decoration: none;
    color: #1a2233;
}

.docs-content[b-6vyzew7zwp]  .docs-prevnext-link:hover {
    border-color: #d1415d;
}

/* Next always sits in the right cell, even when there is no previous page to fill the left one. */
.docs-content[b-6vyzew7zwp]  .docs-prevnext-link.next {
    text-align: right;
    grid-column: 2;
}

.docs-content[b-6vyzew7zwp]  .docs-prevnext-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
}

.docs-content[b-6vyzew7zwp]  .docs-prevnext-title {
    font-weight: 600;
}

.docs-content[b-6vyzew7zwp]  .docs-stuck {
    background: #f6f8fa;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    flex-wrap: wrap;
}

.docs-content[b-6vyzew7zwp]  .docs-stuck a {
    color: #c03352;
}

/* ---------- on this page ---------- */

.docs-content[b-6vyzew7zwp]  .docs-toc {
    position: sticky;
    top: 5.5rem;
    font-size: 0.88rem;
}

.docs-content[b-6vyzew7zwp]  .docs-toc h2 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6b7280;
    margin: 0 0 0.6rem;
}

.docs-content[b-6vyzew7zwp]  .docs-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid #e2e5ea;
}

.docs-content[b-6vyzew7zwp]  .docs-toc li {
    margin: 0;
}

.docs-content[b-6vyzew7zwp]  .docs-toc a {
    display: block;
    padding: 0.25rem 0 0.25rem 0.8rem;
    color: #4a5568;
    text-decoration: none;
    line-height: 1.4;
}

.docs-content[b-6vyzew7zwp]  .docs-toc a:hover {
    color: #d1415d;
}

.docs-content[b-6vyzew7zwp]  .docs-toc li.level-3 a {
    padding-left: 1.6rem;
    font-size: 0.84rem;
}

/* ---------- home ---------- */

.docs-content[b-6vyzew7zwp]  .docs-home {
    max-width: 960px;
}

.docs-content[b-6vyzew7zwp]  .docs-hero {
    padding: 1rem 0 2.5rem;
    border-bottom: 1px solid #eceff3;
    margin-bottom: 2.5rem;
}

.docs-content[b-6vyzew7zwp]  .docs-hero h1 {
    font-size: 2.3rem;
    line-height: 1.15;
    margin: 0 0 0.75rem;
}

.docs-content[b-6vyzew7zwp]  .docs-hero-copy {
    font-size: 1.1rem;
    color: #4a5568;
    margin: 0 0 1.75rem;
    max-width: 60ch;
}

.docs-content[b-6vyzew7zwp]  .docs-hero-search {
    display: flex;
    gap: 0.5rem;
    max-width: 560px;
}

.docs-content[b-6vyzew7zwp]  .docs-hero-search input {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    font-size: 1.02rem;
    padding: 0.7rem 1rem;
    border: 1px solid #d7dbe2;
    border-radius: 10px;
    background: #f6f8fa;
    color: #1a2233;
}

.docs-content[b-6vyzew7zwp]  .docs-hero-search input:focus {
    outline: 2px solid #d1415d;
    outline-offset: 1px;
    background: #fff;
}

.docs-content[b-6vyzew7zwp]  .docs-hero-search button {
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.7rem 1.4rem;
    border: none;
    border-radius: 10px;
    background: #d1415d;
    color: #fff;
    cursor: pointer;
}

.docs-content[b-6vyzew7zwp]  .docs-hero-search button:hover {
    background: #b6304a;
}

.docs-content[b-6vyzew7zwp]  .docs-home-intro {
    max-width: 70ch;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.docs-content[b-6vyzew7zwp]  .docs-howdoi {
    margin-bottom: 3rem;
}

.docs-content[b-6vyzew7zwp]  .docs-howdoi h2,
.docs-content[b-6vyzew7zwp]  .docs-topics h2 {
    font-size: 1.25rem;
    margin: 0 0 1rem;
}

.docs-content[b-6vyzew7zwp]  .docs-howdoi ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 2rem;
}

.docs-content[b-6vyzew7zwp]  .docs-howdoi li a {
    display: block;
    padding: 0.4rem 0;
    color: #c03352;
    text-decoration: none;
    line-height: 1.45;
}

/* The arrow is decoration, not content: "How do I" is the heading and each label completes it. */
.docs-content[b-6vyzew7zwp]  .docs-howdoi li a::before {
    content: "\2192\00a0";
    color: #9aa3b2;
}

.docs-content[b-6vyzew7zwp]  .docs-howdoi li a:hover {
    text-decoration: underline;
}

/* ---------- category cards ---------- */

.docs-content[b-6vyzew7zwp]  .docs-topics {
    margin-bottom: 3rem;
}

.docs-content[b-6vyzew7zwp]  .docs-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

/* scroll-margin because /{lang}/docs#events is the target of every category breadcrumb crumb. */
.docs-content[b-6vyzew7zwp]  .docs-card {
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
    scroll-margin-top: 5rem;
}

.docs-content[b-6vyzew7zwp]  .docs-card h3 {
    font-size: 1.02rem;
    margin: 0 0 0.45rem;
}

.docs-content[b-6vyzew7zwp]  .docs-card h3 a {
    color: #1a2233;
    text-decoration: none;
}

.docs-content[b-6vyzew7zwp]  .docs-card h3 a:hover {
    color: #d1415d;
}

.docs-content[b-6vyzew7zwp]  .docs-card p {
    margin: 0 0 0.5rem;
    color: #4a5568;
    font-size: 0.92rem;
    line-height: 1.5;
}

.docs-content[b-6vyzew7zwp]  .docs-card-count {
    color: #8a93a2;
    font-size: 0.82rem;
    margin: 0;
}

/* ---------- unpublished placeholder (hand-off 56) ---------- */

/* Deliberately plain: an H1 and a paragraph, no links, no cards. Sized like the search page so the
   content column does not jump between the two. Retires itself when the docs publish. */
.docs-content[b-6vyzew7zwp]  .docs-comingsoon {
    max-width: 760px;
}

.docs-content[b-6vyzew7zwp]  .docs-comingsoon h1 {
    font-size: 1.8rem;
    margin: 0 0 0.75rem;
}

.docs-content[b-6vyzew7zwp]  .docs-comingsoon p {
    color: #4a5568;
    margin: 0;
}

/* ---------- search results ---------- */

.docs-content[b-6vyzew7zwp]  .docs-searchpage {
    max-width: 760px;
}

/* The query is echoed as the h1, so an unbroken 200-character string must not widen the page. */
.docs-content[b-6vyzew7zwp]  .docs-searchpage h1 {
    font-size: 1.8rem;
    margin: 0 0 0.5rem;
    overflow-wrap: anywhere;
}

.docs-content[b-6vyzew7zwp]  .docs-search-count,
.docs-content[b-6vyzew7zwp]  .docs-search-note {
    color: #4a5568;
    margin: 0 0 1.5rem;
}

.docs-content[b-6vyzew7zwp]  .docs-hits {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}

.docs-content[b-6vyzew7zwp]  .docs-hit {
    padding: 1rem 0;
    border-bottom: 1px solid #eceff3;
}

.docs-content[b-6vyzew7zwp]  .docs-hit-title {
    font-size: 1.08rem;
    font-weight: 600;
    color: #c03352;
    text-decoration: none;
}

.docs-content[b-6vyzew7zwp]  .docs-hit-title:hover {
    text-decoration: underline;
}

.docs-content[b-6vyzew7zwp]  .docs-hit-category {
    margin-left: 0.6rem;
    font-size: 0.8rem;
    color: #8a93a2;
}

.docs-content[b-6vyzew7zwp]  .docs-hit-snippet {
    margin: 0.4rem 0 0;
    color: #4a5568;
    line-height: 1.6;
}

/* ts_headline's StartSel/StopSel. The only markup the snippet can carry. */
.docs-content[b-6vyzew7zwp]  .docs-hit-snippet mark {
    background: #fdeef1;
    color: #b6304a;
    padding: 0 0.1em;
    border-radius: 2px;
}

/* ---------- content-column breakpoints ---------- */

@media (max-width: 1199.98px) {
    .docs-content[b-6vyzew7zwp]  .docs-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .docs-content[b-6vyzew7zwp]  .docs-toc {
        display: none;
    }
}

@media (max-width: 720px) {
    .docs-content[b-6vyzew7zwp]  .docs-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .docs-content[b-6vyzew7zwp]  .docs-howdoi ul {
        grid-template-columns: minmax(0, 1fr);
    }

    .docs-content[b-6vyzew7zwp]  .docs-prevnext {
        grid-template-columns: minmax(0, 1fr);
    }

    .docs-content[b-6vyzew7zwp]  .docs-prevnext-link.next {
        grid-column: 1;
        text-align: left;
    }

    .docs-content[b-6vyzew7zwp]  .docs-hero h1 {
        font-size: 1.8rem;
    }

    .docs-content[b-6vyzew7zwp]  .docs-hero-search {
        flex-direction: column;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-cthlptd1nf] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-cthlptd1nf] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-9sdg92z716],
.components-reconnect-repeated-attempt-visible[b-9sdg92z716],
.components-reconnect-failed-visible[b-9sdg92z716],
.components-pause-visible[b-9sdg92z716],
.components-resume-failed-visible[b-9sdg92z716],
.components-rejoining-animation[b-9sdg92z716] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-9sdg92z716],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-9sdg92z716],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-9sdg92z716],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-9sdg92z716],
#components-reconnect-modal.components-reconnect-retrying[b-9sdg92z716],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-9sdg92z716],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-9sdg92z716],
#components-reconnect-modal.components-reconnect-failed[b-9sdg92z716],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-9sdg92z716] {
    display: block;
}


#components-reconnect-modal[b-9sdg92z716] {
    background-color: white;
    color: #1a1a1a;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-9sdg92z716 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-9sdg92z716 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-9sdg92z716 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-9sdg92z716]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-9sdg92z716 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-9sdg92z716 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-9sdg92z716 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-9sdg92z716 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-9sdg92z716] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-9sdg92z716] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-9sdg92z716] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-9sdg92z716] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-9sdg92z716] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-9sdg92z716] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-9sdg92z716] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-9sdg92z716 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-9sdg92z716] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-9sdg92z716 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Content/ContentSectionHubView.razor.rz.scp.css */
/* Section hub list. Mirrors .content-article's centered column + top offset (the app bar is fixed),
   then a simple stacked list of article cards. Kept in scoped CSS so it ships in the component bundle. */
.content-hub[b-3ziemhfjo4] {
    max-width: 820px;
    margin: 0 auto;
    padding: 6rem 1.25rem 3rem;
    line-height: 1.7;
}

.content-hub h1[b-3ziemhfjo4] {
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.hub-intro[b-3ziemhfjo4] {
    color: #4a5568;
    margin: 0 0 2rem;
    font-size: 1.05rem;
}

.hub-list[b-3ziemhfjo4] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hub-item[b-3ziemhfjo4] {
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hub-item:hover[b-3ziemhfjo4] {
    border-color: #cfe0ff;
    box-shadow: 0 2px 10px rgba(26, 34, 51, 0.06);
}

.hub-item-title[b-3ziemhfjo4] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a2233;
    text-decoration: none;
}

.hub-item-title:hover[b-3ziemhfjo4] {
    color: #d1415d;
}

.hub-item-desc[b-3ziemhfjo4] {
    margin: 0.4rem 0 0;
    color: #4a5568;
}

.hub-item-meta[b-3ziemhfjo4] {
    margin: 0.55rem 0 0;
    font-size: 0.85rem;
    color: #8a93a2;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Homepage (direction 1a "conservative refresh"): white background, brand rose accent, clear
   hierarchy, plain flex/grid, zero JS. Scoped to Home.razor. The brand rose (#D1415D) matches
   ChurchPlannerTheme.Public Primary. System UI font stack (Segoe UI / Roboto already shipped) so
   there is no new webfont request to hurt LCP. */

.home[b-yioc9yifj2] {
    --rose: #d1415d;
    --rose-dark: #b6304a;
    --rose-tint: #fdeef1;
    --ink: #1a1a1a;
    --muted: #5c5c66;
    --line: #e7e7ea;
    --bg-soft: #f8f7f8;
    color: var(--ink);
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

.home section[b-yioc9yifj2] {
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.home .wrap[b-yioc9yifj2] {
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* ---- Typography ---- */
.home h1[b-yioc9yifj2] {
    font-size: clamp(2.1rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    color: var(--ink);
}

.home h2[b-yioc9yifj2] {
    font-size: clamp(1.55rem, 3.4vw, 2.15rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 0.75rem;
    color: var(--ink);
}

.home p[b-yioc9yifj2] {
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: 1.0625rem;
}

.home .lead[b-yioc9yifj2] {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    color: var(--muted);
    max-width: 34ch;
}

.home .section-head[b-yioc9yifj2] {
    text-align: center;
    max-width: 46rem;
    margin-inline: auto;
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.home .section-head p[b-yioc9yifj2] {
    font-size: 1.1rem;
}

/* ---- Buttons ---- */
.home .btn[b-yioc9yifj2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font: inherit;
    font-weight: 600;
    font-size: 1.02rem;
    padding: 0.75rem 1.6rem;
    border-radius: 9px;
    border: 1.5px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.home .btn-primary[b-yioc9yifj2] {
    background: var(--rose);
    color: #fff;
    border-color: var(--rose);
}

.home .btn-primary:hover[b-yioc9yifj2] {
    background: var(--rose-dark);
    border-color: var(--rose-dark);
}

.home .btn-secondary[b-yioc9yifj2] {
    background: #fff;
    color: var(--rose);
    border-color: var(--line);
}

.home .btn-secondary:hover[b-yioc9yifj2] {
    border-color: var(--rose);
    background: var(--rose-tint);
}

.home .btn-ghost-light[b-yioc9yifj2] {
    background: #fff;
    color: var(--rose);
    border-color: #fff;
}

.home .btn-ghost-light:hover[b-yioc9yifj2] {
    background: rgba(255, 255, 255, 0.88);
}

.home .microcopy[b-yioc9yifj2] {
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0.85rem 0 0;
}

/* ---- Hero ---- */
.home .hero[b-yioc9yifj2] {
    padding-top: clamp(2rem, 5vw, 3.5rem);
}

.home .hero-grid[b-yioc9yifj2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.home .hero-cta[b-yioc9yifj2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.home .hero-shot[b-yioc9yifj2] {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--line);
    box-shadow: 0 20px 45px -25px rgba(26, 26, 26, 0.45);
    display: block;
}

/* ---- Trust strip ---- */
.home .trust[b-yioc9yifj2] {
    background: var(--bg-soft);
    border-block: 1px solid var(--line);
    padding-block: 1.5rem;
}

.home .trust-grid[b-yioc9yifj2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem 1.5rem;
}

.home .trust-item[b-yioc9yifj2] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.35;
}

.home .trust-item .tick[b-yioc9yifj2] {
    color: var(--rose);
    flex: 0 0 auto;
    font-size: 1.1rem;
    line-height: 1;
}

/* ---- Feature rows ---- */
.home .feature-row[b-yioc9yifj2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.75rem, 5vw, 4rem);
    align-items: center;
}

.home .feature-row + .feature-row[b-yioc9yifj2] {
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.home .feature-row.reversed .feature-media[b-yioc9yifj2] {
    order: -1;
}

.home .feature-shot[b-yioc9yifj2] {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--line);
    box-shadow: 0 16px 40px -28px rgba(26, 26, 26, 0.4);
    display: block;
}

.home .feature-copy h2[b-yioc9yifj2] {
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
}

/* ---- "More included" grid ---- */
.home .more[b-yioc9yifj2] {
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
}

.home .more-grid[b-yioc9yifj2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.home .more-card[b-yioc9yifj2] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.5rem;
}

.home .more-card .more-icon[b-yioc9yifj2] {
    margin-bottom: 0.6rem;
}

.home .more-card h3[b-yioc9yifj2] {
    font-size: 1.08rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    color: var(--ink);
}

.home .more-card p[b-yioc9yifj2] {
    margin: 0;
    font-size: 0.97rem;
}

/* Store badges inside the "Mobile apps" card. The img keeps its width/height attributes for the CLS
   reservation (hand-off 51); this only normalises both vendors' artwork to the same 40px height and
   lets width follow each badge's own aspect ratio, since Apple's and Google's differ. The flex gap
   plus the card padding supply the clear space both brand guidelines require. */
.home .store-badges[b-yioc9yifj2] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.home .store-badges img[b-yioc9yifj2] {
    height: 40px;
    width: auto;
    display: block;
}

/* ---- Free tool callout ---- */
.home .tool-callout[b-yioc9yifj2] {
    background: var(--rose-tint);
    border: 1px solid #f3d3da;
    border-radius: 16px;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.home .tool-callout .tool-text[b-yioc9yifj2] {
    max-width: 46rem;
}

.home .tool-callout h2[b-yioc9yifj2] {
    margin-bottom: 0.5rem;
}

.home .tool-callout p[b-yioc9yifj2] {
    margin: 0;
}

/* ---- Pricing ---- */
.home .pricing[b-yioc9yifj2] {
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
}

.home .pricing-note[b-yioc9yifj2] {
    text-align: center;
    color: var(--muted);
    margin-top: -0.25rem;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

/* Pure-CSS billing toggle: hidden radios drive which price spans show. No JS, no circuit. */
.home .bill-input[b-yioc9yifj2] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.home .bill-toggle[b-yioc9yifj2] {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.3rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    margin: 0 auto 2.25rem;
}

.home .bill-toggle-outer[b-yioc9yifj2] {
    display: flex;
    justify-content: center;
}

.home .bill-label[b-yioc9yifj2] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.home .bill-label .bill-save[b-yioc9yifj2] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--rose);
}

.home #bill-monthly:checked ~ .bill-toggle-outer label[for="bill-monthly"][b-yioc9yifj2],
.home #bill-yearly:checked ~ .bill-toggle-outer label[for="bill-yearly"][b-yioc9yifj2] {
    background: var(--rose);
    color: #fff;
}

.home #bill-monthly:checked ~ .bill-toggle-outer label[for="bill-yearly"] .bill-save[b-yioc9yifj2],
.home #bill-yearly:checked ~ .bill-toggle-outer label[for="bill-yearly"] .bill-save[b-yioc9yifj2] {
    color: #fff;
}

/* Default (monthly): show monthly prices, hide yearly. */
.home .price-yearly[b-yioc9yifj2] {
    display: none;
}

.home #bill-yearly:checked ~ .pricing-grid .price-monthly[b-yioc9yifj2] {
    display: none;
}

.home #bill-yearly:checked ~ .pricing-grid .price-yearly[b-yioc9yifj2] {
    display: block;
}

.home .pricing-grid[b-yioc9yifj2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 360px));
    gap: 1.5rem;
    justify-content: center;
    align-items: start;
}

/* ---- Free-trial callout (hand-off 17) ----
   Sits directly below the two pricing cards, deliberately NOT a third card (that would imply feature
   parity with Premium/Pro). The 15-contact limit lives in the body text, so "Unlimited" reads as
   duration-only, never unlimited contacts. Width matches the two-card grid; collapses with it. */
.home .trial-banner[b-yioc9yifj2] {
    max-width: 744px;
    margin: 1.5rem auto 0;
    background: var(--rose-tint);
    border: 1px solid var(--rose);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    text-align: center;
}

.home .trial-badge[b-yioc9yifj2] {
    display: inline-block;
    background: var(--rose);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 0.65rem;
}

.home .trial-body[b-yioc9yifj2] {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.6;
}

.home .price-card[b-yioc9yifj2] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 2rem;
    position: relative;
}

.home .price-card.featured[b-yioc9yifj2] {
    border: 2px solid var(--rose);
    box-shadow: 0 24px 50px -30px rgba(209, 65, 93, 0.55);
}

.home .price-badge[b-yioc9yifj2] {
    position: absolute;
    top: -0.85rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--rose);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    white-space: nowrap;
}

.home .price-card h3[b-yioc9yifj2] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.home .price-amount[b-yioc9yifj2] {
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
}

.home .price-per[b-yioc9yifj2] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--muted);
}

.home .price-usd[b-yioc9yifj2] {
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0.4rem 0 0;
}

.home .price-list[b-yioc9yifj2] {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
}

.home .price-list li[b-yioc9yifj2] {
    position: relative;
    padding-left: 1.7rem;
    margin-bottom: 0.6rem;
    color: var(--ink);
    font-size: 0.98rem;
}

.home .price-list li[b-yioc9yifj2]::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--rose);
    font-weight: 700;
}

.home .price-card .btn[b-yioc9yifj2] {
    width: 100%;
}

/* ---- Comparison teaser ---- */
.home .compare-teaser[b-yioc9yifj2] {
    padding-block: clamp(1.75rem, 4vw, 2.5rem);
    text-align: center;
}

.home .compare-teaser p[b-yioc9yifj2] {
    margin: 0;
    font-size: 1.02rem;
}

.home .compare-teaser a[b-yioc9yifj2] {
    color: var(--rose);
    font-weight: 600;
    text-decoration: none;
}

.home .compare-teaser a:hover[b-yioc9yifj2] {
    text-decoration: underline;
}

/* ---- FAQ ---- */
.home .faq-list[b-yioc9yifj2] {
    max-width: 46rem;
    margin-inline: auto;
}

.home .faq-list details[b-yioc9yifj2] {
    border-bottom: 1px solid var(--line);
    padding: 1.1rem 0;
}

.home .faq-list summary[b-yioc9yifj2] {
    font-weight: 600;
    font-size: 1.08rem;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.home .faq-list summary[b-yioc9yifj2]::-webkit-details-marker {
    display: none;
}

.home .faq-list summary[b-yioc9yifj2]::after {
    content: "+";
    color: var(--rose);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    flex: 0 0 auto;
}

.home .faq-list details[open] summary[b-yioc9yifj2]::after {
    content: "\2212";
}

.home .faq-list details p[b-yioc9yifj2] {
    margin: 0.85rem 0 0;
}

/* ---- Final CTA band ---- */
.home .cta-band[b-yioc9yifj2] {
    background: var(--rose);
    color: #fff;
    text-align: center;
}

.home .cta-band h2[b-yioc9yifj2] {
    color: #fff;
}

.home .cta-band p[b-yioc9yifj2] {
    color: rgba(255, 255, 255, 0.9);
}

.home .cta-band .microcopy[b-yioc9yifj2] {
    color: rgba(255, 255, 255, 0.85);
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
    .home .hero-grid[b-yioc9yifj2],
    .home .feature-row[b-yioc9yifj2] {
        grid-template-columns: 1fr;
    }

    .home .lead[b-yioc9yifj2] {
        max-width: none;
    }

    /* Text first, screenshot second on mobile so H1 + CTA stay above the fold. */
    .home .hero-media[b-yioc9yifj2] {
        order: 2;
    }

    .home .feature-row.reversed .feature-media[b-yioc9yifj2] {
        order: 0;
    }

    .home .trust-grid[b-yioc9yifj2] {
        grid-template-columns: repeat(2, 1fr);
    }

    .home .more-grid[b-yioc9yifj2] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .home .more-grid[b-yioc9yifj2] {
        grid-template-columns: 1fr;
    }

    .home .pricing-grid[b-yioc9yifj2] {
        grid-template-columns: minmax(0, 400px);
    }

    .home .hero-cta .btn[b-yioc9yifj2] {
        flex: 1 1 auto;
    }
}
/* /Components/Pages/Tools/ChordProConverter.razor.rz.scp.css */
.cp-tool[b-69ubvqe02g] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.cp-lede[b-69ubvqe02g] {
    color: var(--mud-palette-text-secondary);
    margin-bottom: 1.5rem;
    max-width: 720px;
}

/* ── Two-column workspace: input left, toolbar + tabbed preview right ───────── */
.cp-workspace[b-69ubvqe02g] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 820px) {
    .cp-workspace[b-69ubvqe02g] {
        grid-template-columns: 1fr;
    }
}

.cp-input-col[b-69ubvqe02g] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.cp-preview-col[b-69ubvqe02g] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.cp-label[b-69ubvqe02g] {
    font-weight: 600;
    font-size: 0.85rem;
}

.cp-input[b-69ubvqe02g],
.cp-select[b-69ubvqe02g] {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--mud-palette-lines-inputs, #c4c4c4);
    border-radius: 6px;
    font: inherit;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #000);
}

textarea.cp-input[b-69ubvqe02g] {
    width: 100%;
    min-height: 360px;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.9rem;
    line-height: 1.4;
    resize: vertical;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

.cp-input-row[b-69ubvqe02g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.cp-input-row-spacer[b-69ubvqe02g] {
    flex: 1 1 auto;
}

.cp-inline-label[b-69ubvqe02g] {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.cp-select-sm[b-69ubvqe02g] {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
}

/* ── Toolbar (mirrors the in-app chart preview toolbar) ─────────────────────── */
.cp-toolbar[b-69ubvqe02g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-radius: 8px;
    background: var(--mud-palette-background-grey, #f5f5f5);
}

.cp-tool-group[b-69ubvqe02g] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.cp-step[b-69ubvqe02g] {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mud-palette-lines-inputs, #c4c4c4);
    border-radius: 6px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #000);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.cp-step:hover[b-69ubvqe02g] {
    border-color: var(--mud-palette-primary, #594ae2);
}

.cp-step-val[b-69ubvqe02g] {
    min-width: 2.6rem;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Segmented flats/sharps control */
.cp-seg[b-69ubvqe02g] {
    gap: 0;
    border: 1px solid var(--mud-palette-lines-inputs, #c4c4c4);
    border-radius: 6px;
    overflow: hidden;
}

.cp-seg-btn[b-69ubvqe02g] {
    padding: 0.4rem 0.7rem;
    border: none;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #000);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.cp-seg-btn + .cp-seg-btn[b-69ubvqe02g] {
    border-left: 1px solid var(--mud-palette-lines-inputs, #c4c4c4);
}

.cp-seg-btn.active[b-69ubvqe02g] {
    background: var(--mud-palette-primary, #594ae2);
    color: var(--mud-palette-primary-text, #fff);
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.cp-btn[b-69ubvqe02g] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.cp-btn-sm[b-69ubvqe02g] {
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
}

.cp-btn-primary[b-69ubvqe02g] {
    background: var(--mud-palette-primary, #594ae2);
    color: var(--mud-palette-primary-text, #fff);
}

.cp-convert[b-69ubvqe02g] {
    margin-left: auto;
}

.cp-btn-ghost[b-69ubvqe02g] {
    background: transparent;
    border-color: var(--mud-palette-lines-inputs, #c4c4c4);
    color: var(--mud-palette-text-primary, #000);
}

.cp-btn-ghost:hover[b-69ubvqe02g] {
    border-color: var(--mud-palette-primary, #594ae2);
    color: var(--mud-palette-primary, #594ae2);
}

/* ── Pure-CSS tabs over the three pre-rendered outputs (no JS / no circuit) ──── */
.cp-tabs[b-69ubvqe02g] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    margin-top: 0.25rem;
}

.cp-tab-input[b-69ubvqe02g] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;   /* visually hidden but still keyboard-focusable */
}

.cp-tab[b-69ubvqe02g] {
    padding: 0.5rem 0.9rem;
    margin-bottom: -1px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
    border-bottom: 2px solid transparent;
    user-select: none;
}

.cp-tab-input:checked + .cp-tab[b-69ubvqe02g] {
    color: var(--mud-palette-primary, #594ae2);
    border-bottom-color: var(--mud-palette-primary, #594ae2);
}

.cp-tab-input:focus-visible + .cp-tab[b-69ubvqe02g] {
    outline: 2px solid var(--mud-palette-primary, #594ae2);
    outline-offset: 2px;
}

.cp-panel[b-69ubvqe02g] {
    flex: 0 0 100%;
    display: none;
    padding-top: 0.75rem;
}

/* When CSS is disabled the panels simply stack (display:none never applies). */
#cp-tab-cho:checked ~ #cp-panel-cho[b-69ubvqe02g],
#cp-tab-ovl:checked ~ #cp-panel-ovl[b-69ubvqe02g],
#cp-tab-nash:checked ~ #cp-panel-nash[b-69ubvqe02g] {
    display: block;
}

.cp-panel-actions[b-69ubvqe02g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.cp-dl-form[b-69ubvqe02g] {
    display: inline-flex;
    margin: 0;
}

.cp-output[b-69ubvqe02g] {
    background: var(--mud-palette-background-grey, #f5f5f5);
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-radius: 6px;
    padding: 1rem;
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre;
    overflow-x: auto;
    margin: 0;
}

.cp-empty[b-69ubvqe02g] {
    border: 1px dashed var(--mud-palette-lines-inputs, #c4c4c4);
    border-radius: 8px;
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-size: 0.9rem;
}

.cp-meta[b-69ubvqe02g] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
}

.cp-warning[b-69ubvqe02g] {
    color: var(--mud-palette-warning-darken, #b26a00);
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
}

/* ── CTA + FAQ (copy unchanged — ranking surface) ───────────────────────────── */
.cp-cta[b-69ubvqe02g] {
    margin-top: 2.5rem;
    padding: 1.5rem;
    border-radius: 8px;
    background: var(--mud-palette-primary, #594ae2);
    color: var(--mud-palette-primary-text, #fff);
    text-align: center;
}

.cp-cta a[b-69ubvqe02g] {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

.cp-faq[b-69ubvqe02g] {
    margin-top: 3rem;
    max-width: 720px;
}

.cp-faq h2[b-69ubvqe02g] {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.cp-faq details[b-69ubvqe02g] {
    border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    padding: 0.75rem 0;
}

.cp-faq summary[b-69ubvqe02g] {
    font-weight: 600;
    cursor: pointer;
}

.cp-faq p[b-69ubvqe02g] {
    margin: 0.5rem 0 0;
    color: var(--mud-palette-text-secondary);
}