/* Global base styles — Starter (neutral tokens) */
:root {
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Space Grotesk', system-ui, sans-serif;

    --bg: #f7f7f8;
    --text: #141416;
    --text-muted: #6b6b76;

    --brand: #2563eb;
    --brand-muted: #e8eefc;
    --alert: #dc2626;

    --bg-white: #ffffff;
    --bg-white-muted: rgba(255, 255, 255, 0.72);
    --bg-footer: #ececef;
    --bg-black: rgba(0, 0, 0, 0.55);

    --list-item-marker: rgba(0, 0, 0, 0.16);
    --border: rgba(0, 0, 0, 0.12);
    --radius: 0.75rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
}

h1 {
    margin: 0 0 1.5rem;
    font-size: 2.25rem;
}

h2 {
    margin: 0;
    font-size: 1.75rem;
}

p {
    margin: 0 0 0.75rem;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--brand);
    text-decoration: none;
    transition: color 0.2s ease;
}

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

button {
    font-family: inherit;
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem;
}

section {
    margin-bottom: 4rem;
}

.entry--page {
    padding-top: 1.5rem;
}

/* Scroll reveal */
@media (prefers-reduced-motion: no-preference) {
    html.js-reveal-ready section.js-reveal:not(.is-revealed) {
        opacity: 0;
        transform: translate3d(0, 1rem, 0);
    }

    html.js-reveal-ready section.js-reveal {
        transition: opacity 0.55s ease, transform 0.55s ease;
    }

    html.js-reveal-ready section.js-reveal.is-revealed {
        opacity: 1;
        transform: none;
    }
}

/* Dialogs */
dialog {
    opacity: 0;
    transform: translateY(0.75rem);
    transition:
        opacity 0.32s ease,
        transform 0.32s ease,
        overlay 0.32s ease allow-discrete,
        display 0.32s ease allow-discrete;
}

dialog[open] {
    opacity: 1;
    transform: translateY(0);
}

dialog::backdrop {
    opacity: 0;
    background: rgba(20, 20, 22, 0.45);
    backdrop-filter: blur(2px);
    transition:
        opacity 0.32s ease,
        overlay 0.32s ease allow-discrete,
        display 0.32s ease allow-discrete;
}

dialog[open]::backdrop {
    opacity: 1;
}

@starting-style {
    dialog[open] {
        opacity: 0;
        transform: translateY(0.75rem);
    }

    dialog[open]::backdrop {
        opacity: 0;
    }
}

@media (max-width: 768px) {
    html.is-dialog-sheet-open,
    html.is-dialog-sheet-open body {
        overflow: hidden;
        overscroll-behavior: none;
    }

    dialog.feedback-dialog,
    dialog.thanks-dialog {
        opacity: var(--dialog-drag-opacity, 1);
        transform: translate3d(0, var(--dialog-drag-y, 100%), 0);
        transition: none;
        overscroll-behavior: none;
    }

    dialog.feedback-dialog[open],
    dialog.thanks-dialog[open] {
        opacity: var(--dialog-drag-opacity, 1);
        transform: translate3d(0, var(--dialog-drag-y, 100%), 0);
    }

    dialog.feedback-dialog[open].is-sheet-ready,
    dialog.thanks-dialog[open].is-sheet-ready {
        transition: transform 0.32s ease, opacity 0.32s ease;
    }

    dialog.feedback-dialog[open].is-dragging,
    dialog.thanks-dialog[open].is-dragging {
        transition: none;
        touch-action: none;
    }

    dialog.feedback-dialog[open].is-dragging .feedback-dialog__inner,
    dialog.thanks-dialog[open].is-dragging .thanks-dialog__inner {
        overflow: hidden;
        touch-action: none;
        overscroll-behavior: none;
    }

    dialog.feedback-dialog .feedback-dialog__inner,
    dialog.thanks-dialog .thanks-dialog__inner {
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    dialog.feedback-dialog::backdrop,
    dialog.thanks-dialog::backdrop {
        opacity: var(--dialog-drag-opacity, 1);
        transition: none;
        touch-action: none;
    }

    dialog.feedback-dialog[open].is-sheet-ready::backdrop,
    dialog.thanks-dialog[open].is-sheet-ready::backdrop {
        transition: opacity 0.32s ease;
    }

    dialog.feedback-dialog[open].is-dragging::backdrop,
    dialog.thanks-dialog[open].is-dragging::backdrop {
        transition: none;
    }

    @starting-style {
        dialog.feedback-dialog[open],
        dialog.thanks-dialog[open] {
            opacity: 1;
            transform: translate3d(0, 100%, 0);
        }

        dialog.feedback-dialog[open]::backdrop,
        dialog.thanks-dialog[open]::backdrop {
            opacity: 1;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    dialog,
    dialog::backdrop {
        transition: none;
    }
}

@media (max-width: 1024px) {
    h1,
    h2 {
        font-size: 1.75rem;
    }
}