/* #region Document Base */
/* Defines root page behavior, font stack, background, and default text color. */

html {
    scroll-padding-top: var(--nav-height);
    overflow-x: hidden;
}

body {
    margin: 0;
    padding-top: 0;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    background: var(--color-soft);
    color: var(--color-text);
    line-height: 1.6;
    letter-spacing: 0;
    overflow-x: hidden;
}

/* #endregion Document Base */

/* #region App Layout Reset */
/* Removes framework layout constraints so Beaver sections can render full width. */

.page,
main,
article.content {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html body article.content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.beaver-site {
    width: 100%;
    overflow-x: hidden;
}

.beaver-site > section {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* #endregion App Layout Reset */

/* #region Global Elements */
/* Sets shared defaults for links, media, headings, and paragraphs. */

a {
    color: var(--color-accent-dark);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--color-accent);
}

img,
video {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: var(--color-ink);
    font-weight: 640;
    line-height: 1.08;
    letter-spacing: 0;
}

h1 {
    font-size: 4.72rem;
}

h2 {
    font-size: 2.65rem;
}

h3 {
    font-size: 1.15rem;
}

p {
    margin: 0;
}

/* #endregion Global Elements */

/* #region Blazor Layout Helpers */
/* Keeps Blazor shell content aligned with the custom landing page layout. */

.fixed-top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
}

.content {
    min-height: 100vh;
}

.content > .container,
.content > .container-fluid:not(.beaver-site) {
    max-width: var(--site-width);
    margin: 0 auto;
    padding: 88px 24px;
}

.content > h1,
.content > p,
.content > a {
    display: block;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.content > h1 {
    padding-top: 88px;
}

.content > a.btn {
    display: inline-flex;
    margin-top: 24px;
    margin-left: calc((100% - min(var(--site-width), calc(100% - 56px))) / 2);
}

/* #endregion Blazor Layout Helpers */

/* #region Blazor Reconnect */

.beaver-reconnect-modal {
    display: none;
}

.beaver-reconnect-modal.components-reconnect-failed,
.beaver-reconnect-modal.components-reconnect-rejected,
.beaver-reconnect-modal.components-reconnect-resume-failed {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 2147483647;
    display: block;
    max-width: min(320px, calc(100vw - 32px));
}

.beaver-reconnect-dialog {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: var(--color-paper);
    color: var(--color-ink);
    box-shadow: 0 18px 42px var(--color-ink-18);
}

.beaver-reconnect-dialog strong {
    font-size: 0.92rem;
}

.beaver-reconnect-dialog span {
    color: var(--color-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

/* #endregion Blazor Reconnect */

/* #region Site Shell */
/* Provides the reusable max-width container used across Beaver sections. */

.site-shell {
    width: min(var(--site-width), calc(100% - 56px));
    margin: 0 auto;
}

.beaver-site > section:not(.hero-section) > .site-shell {
    width: min(var(--section-width), calc(100% - 48px));
}

/* #endregion Site Shell */

/* #region Section Primitives */
/* Defines shared section spacing, grids, intro text, and kicker labels. */

.section-block,
.trusted-section,
.workflow-section,
.about-section,
.tutorial-section,
.checkout-section {
    padding: 104px 0;
}

.section-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(280px, 0.68fr);
    gap: 80px;
    align-items: end;
    margin-bottom: 44px;
}

.section-intro {
    color: var(--color-muted);
    font-size: 1.08rem;
}

.section-kicker,
.pricing-topline,
.project-type,
.feature-index {
    color: var(--color-steel);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section-kicker {
    color: rgb(95, 41, 34);
}

/* #endregion Section Primitives */