@import '_content/HopDev.Platform.Components/HopDev.Platform.Components.06ds0eqftz.bundle.scp.css';
@import '_content/HopDev.Platform.Preview/HopDev.Platform.Preview.ajjccxg6ts.bundle.scp.css';
@import '_content/HopDev.Platform.Theming/HopDev.Platform.Theming.v1p78oh656.bundle.scp.css';

/* /Pages/Landing.razor.rz.scp.css */
/* PLAT-205 — the production landing page.

   Scoped to this component so it cannot reach the prototype at /beta, which the operator
   asked to keep separate until a decision to merge is taken.

   ARCHCON-MultiTenant-01: every colour here is a var(--brand-*) token or a neutral. No brand
   hex literal appears in this file — the tokens are resolved and emitted by <BrandTokens /> in
   the document head. */

.landing[b-qagnhw0l47] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    box-sizing: border-box;
}

.landing-inner[b-qagnhw0l47] {
    max-width: 46rem;
    text-align: center;
}

/* The mark is an inline SVG drawn in currentColor, so the brand colour reaches it through
   this rule rather than being baked into an asset file. */
.landing-mark[b-qagnhw0l47] {
    display: block;
    margin: 0 auto 1.75rem;
    line-height: 0;
    color: var(--brand-primary);
}

/* Depth. A flat outline reads as a sticker; a cast shadow puts the shield above the page.
   drop-shadow follows the alpha channel, so it traces the shield's silhouette rather than
   boxing it the way box-shadow would. */
.landing-shield[b-qagnhw0l47] {
    filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.18));
}

/* The sweeping arcs. Each is a short dash on a path declared as 100 units long, so animating
   the offset walks it once round the ellipse regardless of the ellipse's real perimeter. The
   glow is what separates the moving arc from the dim ring underneath it. */
.landing-orbit-a[b-qagnhw0l47],
.landing-orbit-b[b-qagnhw0l47] {
    filter: drop-shadow(0 0 2.5px currentColor);
}

.landing-orbit-a[b-qagnhw0l47] { animation: landingOrbitSweep-b-qagnhw0l47 4.4s linear infinite; }
.landing-orbit-b[b-qagnhw0l47] { animation: landingOrbitSweep-b-qagnhw0l47 6s linear infinite reverse; }

@keyframes landingOrbitSweep-b-qagnhw0l47 {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -100; }
}

/* An orbit is decoration. Anyone who has asked their system for less motion gets the static
   mark, which still reads correctly because the dim rings carry the shape on their own. */
@media (prefers-reduced-motion: reduce) {
    .landing-orbit-a[b-qagnhw0l47],
    .landing-orbit-b[b-qagnhw0l47] { animation: none; }
}

.landing-name[b-qagnhw0l47] {
    margin: 0;
    font-size: clamp(1.9rem, 5.5vw, 3.1rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* Blazor's FocusOnNavigate focuses the h1 on every navigation, including the first render, so
   the browser draws a focus ring around the page title on arrival — the rectangle the operator
   reported. PCS hit this and fixed it the same way (PLAT-136).

   Suppressing the ring is safe HERE and would not be on a control: the heading is not a tab
   stop, so no keyboard user ever navigates to it and needs to see where they are. The focus
   move is programmatic, for screen-reader position, and that still works — it is only the
   painted ring that goes. */
.landing-name:focus[b-qagnhw0l47],
.landing-name:focus-visible[b-qagnhw0l47] {
    outline: none;
}

.landing-tagline[b-qagnhw0l47] {
    margin: 0.85rem 0 0;
    font-size: clamp(1.05rem, 2.6vw, 1.35rem);
    font-style: italic;
    color: var(--brand-accent);
}

.landing-positioning[b-qagnhw0l47] {
    margin: 1.4rem 0 0;
    font-size: clamp(0.95rem, 2.2vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-primary);
}

.landing-description[b-qagnhw0l47] {
    margin: 1.6rem auto 0;
    max-width: 36rem;
    font-size: 1.02rem;
    line-height: 1.7;
    opacity: 0.85;
}

.landing-actions[b-qagnhw0l47] {
    margin-top: 2.4rem;
    display: flex;
    gap: 0.9rem;
    justify-content: center;
    flex-wrap: wrap;
}

.landing-btn[b-qagnhw0l47] {
    display: inline-block;
    padding: 0.72rem 1.5rem;
    border-radius: 10px;
    font-size: 0.97rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
}

.landing-btn-primary[b-qagnhw0l47] {
    background: var(--brand-primary);
    color: #fff;
}

.landing-btn-ghost[b-qagnhw0l47] {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.landing-btn:focus-visible[b-qagnhw0l47] {
    outline: 2px solid var(--brand-accent);
    outline-offset: 3px;
}

/* A phone should get one column and full-width targets rather than two cramped ones. */
@media (max-width: 30rem) {
    .landing-actions[b-qagnhw0l47] { flex-direction: column; }
    .landing-btn[b-qagnhw0l47] { width: 100%; box-sizing: border-box; }
}