/* Decorative dot grid. No image asset is needed: one radial-gradient tiled by background-size draws the
   dots, and a second radial-gradient used as a mask fades them out toward the edges so the grid reads as
   a vignette rather than a hard-edged tiled texture. */
/* Tall enough that the dot field fades out completely before it reaches the top or bottom edge - see the
   mask stops below. */
.dotted-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2rem 0;
}

.dotted-backdrop {
    position: absolute;
    /* inset:0 rather than a negative bleed so this can never widen the page or cause a scrollbar. */
    inset: 0;
    background-image: radial-gradient(circle, var(--mud-palette-primary) 1px, transparent 2px);
    background-size: 20px 20px;
    /* An annulus: clear inside the logo ring, dots outside it, faded to nothing before any edge of the box
       so the grid never ends in a hard line. The hole (116px) sits just outside the 110px ring radius.
       Every stop is in px on purpose - percentage stops on a radial-gradient are measured along the
       diagonal, so on a box that is wider than it is tall the fade would still be part-way through at the
       top and bottom edges and cut off visibly there. */
    -webkit-mask: radial-gradient(circle at center, transparent 0 100px, #ffffff44 130px,  transparent 200px);
    mask: radial-gradient(circle at center, transparent 0 100px, #ffffff44 130px,  transparent 200px);
    pointer-events: none;
}
/* The thin ring around the brand mark. MudPaper draws the border and the circle; this only clears its
   surface fill so the dot grid shows through instead of the ring reading as a solid disc.
   Two-class specificity because MudBlazor.min.css is linked AFTER app.css, so a single-class rule would
   lose to .mud-paper at equal specificity. */
.mud-paper.logo-ring {
    background-color: transparent;
}

/* Platform buttons. Same specificity note as above - each of these overrides a single-class MudBlazor
   rule that would otherwise win on source order. */
.mud-button-root.download-option {
    min-height: 72px;                              /* .mud-button-outlined-size-large is only 7px padding */
    padding: 0 1.75rem;
    border-radius: 12px;
    background-color: var(--mud-palette-surface);
    /* MudBlazor's outlined border is text-primary - i.e. white - at the theme's border opacity, which on
       black reads as a bright hairline. The reference edge is barely perceptible. */
    border-color: rgba(255, 255, 255, 0.09);
    letter-spacing: .06em;
}

.mud-button-root.download-option:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.18);
}