/* Shared "Clarté" shell for every landing page: brand tokens, navigation, buttons,
   section typography and footer. Brand colours from branding/social-kit/charte.md.
   Loaded after styles.css (which provides the base navbar, mobile menu and language
   switcher) and before the page stylesheet (home.css, pm.css, docs.css, legal.css).
   Pages opt in with <body class="site-page">. */

.site-page {
    --night: #151e36;
    --ink: #0e1628;
    --teal: #389798;
    --petrol: #29768e;
    --mint: #a1ead4;
    --mint-soft: #e6f4f1;
    --ice: #f2f6f7;
    --grey: #4a5c68;
    --line: #dce6e8;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Re-tune the styles.css variables used by the shared components
       (language switcher, mobile menu, pricing cards) */
    --bg: #ffffff;
    --text: var(--night);
    --text-muted: var(--grey);
    --accent: var(--teal);
    --accent-strong: var(--petrol);
    --border: var(--line);

    background: #fff;
    color: var(--night);
    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;
}

.site-page .container {
    max-width: 1160px;
}

.site-page .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Skip link ---------- */
.site-page .skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--night);
    color: #fff;
    font-weight: 600;
}

.site-page .skip-link:focus {
    top: 12px;
}

/* ---------- Navigation ---------- */
.site-page .navbar {
    background: rgba(255, 255, 255, 0.86);
    border-bottom: 1px solid var(--line);
}

.site-page .navbar-inner {
    max-width: 1160px;
    gap: 28px;
    padding: 12px 24px;
}

.site-page .product-brand {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    color: var(--night);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.site-page .product-brand img {
    border-radius: 8px;
}

.site-page .nav-links {
    margin-right: auto;
}

.site-page .nav-links a:hover,
.site-page .nav-links a[aria-current='page'] {
    color: var(--night);
}

.site-page .nav-signin {
    padding: 8px 10px;
    color: var(--grey);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.site-page .nav-signin:hover {
    color: var(--night);
}

.site-page .nav-download {
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--night);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.site-page .nav-download:hover {
    background: var(--ink);
}

/* ---------- Buttons & shared text ---------- */
.hm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.hm-btn:hover {
    transform: translateY(-1px);
}

.site-page a:focus-visible,
.site-page summary:focus-visible,
.site-page button:focus-visible,
.site-page input:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
}

.hm-btn-primary {
    background: var(--night);
    color: #fff;
    box-shadow: 0 8px 24px -8px rgba(21, 30, 54, 0.5);
}

.hm-btn-ghost {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--night);
}

.hm-btn-mint {
    background: var(--mint);
    color: var(--night);
}

.hm-fine {
    margin: 0;
    color: var(--grey);
    font-size: 13px;
}

.hm-note {
    margin: 16px 0 0;
    color: var(--grey);
    font-size: 12px;
}

/* ---------- Section typography ---------- */
.hm-ice {
    background: var(--ice);
}

.hm-night {
    background: var(--night);
    color: #fff;
}

.hm-eyebrow {
    margin: 0;
    color: var(--teal);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hm-night .hm-eyebrow {
    color: var(--mint);
}

.hm-h2 {
    max-width: 760px;
    margin: 12px 0 14px;
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.hm-sub {
    max-width: 640px;
    margin: 0 0 16px;
    color: var(--grey);
    font-size: 18px;
    line-height: 1.55;
}

/* Page header for secondary pages (docs, legal, downloads) */
.sp-head {
    padding: 64px 0 40px;
    background:
        radial-gradient(900px 380px at 85% 0%, rgba(161, 234, 212, 0.3), transparent 60%),
        radial-gradient(700px 320px at 0% 30%, rgba(56, 151, 152, 0.08), transparent 60%);
    border-bottom: 1px solid var(--line);
}

.sp-head h1 {
    max-width: 760px;
    margin: 12px 0 12px;
    font-size: clamp(34px, 4.6vw, 52px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.sp-head .hm-sub {
    margin-bottom: 0;
}

/* ---------- Footer ---------- */
.site-page .product-footer {
    padding: 36px 0;
    border-top: 1px solid var(--line);
    background: #fff;
    color: var(--grey);
    font-size: 14px;
}

.site-page .footer-top,
.site-page .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.site-page .footer-top {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}

.site-page .footer-top p {
    margin: 0;
}

.site-page .footer-top .product-brand {
    color: var(--night);
}

.site-page .footer-bottom {
    padding-top: 20px;
    font-size: 13px;
}

.site-page .footer-bottom div {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.site-page .footer-bottom a:hover,
.site-page .footer-top a:hover {
    color: var(--night);
}

.site-page .footer-bottom a[aria-current='page'] {
    color: var(--night);
    font-weight: 600;
}

.site-page .footer-bottom button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.site-page .footer-bottom button:hover {
    color: var(--night);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .site-page .navbar-inner {
        gap: 12px;
    }
}

@media (max-width: 560px) {
    .site-page:not(.home-page) .navbar-inner {
        padding: 12px 16px;
    }

    .sp-head {
        padding: 44px 0 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hm-btn {
        transition: none;
    }
}