:root {
    --surface-sunken: #06100e;
    --background: #0b1614;
    --surface: #12211e;
    --surface-raised: #182b27;
    --border: #243632;
    --border-strong: #2f4540;
    --text-primary: #eaf5f1;
    --text-secondary: #a7c2bb;
    --text-muted: #7e9891;
    --text-placeholder: #44544f;
    --text-reading: #dceae5;
    --primary: #2fd69a;
    --primary-pressed: #26bd86;
    --primary-foreground: #03251a;
    --primary-glow: rgb(47 214 154 / 22%);
    --success-surface: #0f2a21;
    --error: #ff6f61;
    --error-surface: #331311;
}

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

html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
    background: var(--background);
    color: var(--text-primary);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.55;
    min-width: 18rem;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input { color: inherit; font: inherit; }
button { cursor: pointer; }
:focus-visible { border-radius: .375rem; outline: .125rem solid var(--primary); outline-offset: .125rem; }

.page-shell { display: flex; flex-direction: column; min-height: 100dvh; }
.container { margin-inline: auto; max-width: 70rem; padding-inline: clamp(1rem, 4vw, 2rem); width: 100%; }
.site-header { align-items: center; display: flex; justify-content: space-between; padding-block: 1.4rem; }
.brand { align-items: center; display: flex; font-weight: 650; gap: .6rem; letter-spacing: -.01em; }
.brand-mark { flex-shrink: 0; height: 2.125rem; width: 2.125rem; }

.main-content { display: flex; flex: 1; flex-direction: column; gap: 2.5rem; justify-content: center; padding-block: clamp(2.5rem, 8vh, 5rem); }
.hero { align-items: flex-start; display: flex; flex-direction: column; gap: 1.15rem; max-width: 46rem; }
.hero h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; max-width: 18ch; }
.reading-copy { color: var(--text-reading); font-family: Literata, Georgia, serif; font-size: 1.02rem; line-height: 1.7; max-width: 68ch; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .35rem; }
.meta-copy, .site-footer { color: var(--text-muted); font-size: .8rem; }

.button { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 999px; display: inline-flex; font-size: .9rem; font-weight: 600; height: 2.6rem; justify-content: center; padding-inline: 1.15rem; transition: background-color .14s, border-color .14s, color .14s, transform .14s; white-space: nowrap; }
.button:active { transform: translateY(.0625rem); }
.button-primary { background: var(--primary); box-shadow: 0 .625rem 1.75rem -.375rem var(--primary-glow); color: var(--primary-foreground); }
.button-primary:hover { background: var(--primary-pressed); }
.button-secondary { border-color: var(--border-strong); color: var(--text-secondary); }
.button-secondary:hover { background: var(--surface-raised); color: var(--text-primary); }
.button-small { font-size: .82rem; height: 2.05rem; padding-inline: .8rem; }

.badge { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); display: inline-flex; font-size: .74rem; font-weight: 600; height: 1.6rem; letter-spacing: .01em; padding-inline: .6rem; align-items: center; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 1.25rem; padding: 1.25rem 1.4rem; position: relative; }
.card::before { background: linear-gradient(90deg, transparent, rgb(234 245 241 / 13%), transparent); border-radius: 1.25rem 1.25rem 0 0; content: ""; height: .0625rem; inset: 0 0 auto; position: absolute; }
.subscription-card { display: flex; flex-direction: column; gap: .9rem; max-width: 34rem; }
.subscription-card h2 { font-size: 1.35rem; font-weight: 650; letter-spacing: -.012em; line-height: 1.25; }
.subscription-form { align-items: flex-end; display: flex; gap: .7rem; }
.subscription-form .button { flex-shrink: 0; }
.field-group { display: flex; flex: 1; flex-direction: column; gap: .4rem; }
.field-group label { color: var(--text-secondary); font-size: .82rem; font-weight: 550; }
.field-group input { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: .75rem; height: 2.6rem; padding-inline: .85rem; transition: border-color .14s, box-shadow .14s; width: 100%; }
.field-group input::placeholder { color: var(--text-placeholder); }
.field-group input:focus { border-color: var(--primary); box-shadow: 0 0 0 .1875rem var(--primary-glow); outline: none; }
.field-group input[aria-invalid="true"] { border-color: var(--error); }
.honeypot { height: .0625rem; left: -9999px; overflow: hidden; position: absolute; width: .0625rem; }
.notice { border: 1px solid transparent; border-radius: .875rem; font-size: .88rem; padding: .8rem 1rem; }
.notice-success { background: var(--success-surface); border-color: rgb(47 214 154 / 28%); color: var(--primary); }
.notice-error { background: var(--error-surface); border-color: rgb(255 111 97 / 28%); color: var(--error); }
.site-footer { border-top: 1px solid var(--border); display: flex; justify-content: space-between; padding-block: 1.6rem; }
.site-footer a:hover { color: var(--text-primary); }
.footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; justify-content: flex-end; }

/* Privacy policy (/privacidade): plain reading page in the landing's identity. */
.legal { flex: 1; padding-block: clamp(2rem, 6vh, 3.5rem) clamp(2.5rem, 8vh, 5rem); }
.legal-body { display: flex; flex-direction: column; gap: 2.25rem; max-width: 46rem; }
.legal-intro { align-items: flex-start; display: flex; flex-direction: column; gap: 1rem; }
.legal h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.legal h2 { font-size: 1.3rem; font-weight: 650; letter-spacing: -.012em; line-height: 1.25; margin-bottom: .75rem; }
.legal h3 { color: var(--text-secondary); font-size: 1rem; font-weight: 650; margin-block: 1.1rem .5rem; }
.legal p, .legal li { color: var(--text-reading); font-family: Literata, Georgia, serif; font-size: 1.02rem; line-height: 1.7; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: .75rem; }
.legal ul { display: flex; flex-direction: column; gap: .45rem; padding-left: 1.2rem; }
.legal li::marker { color: var(--primary); }
.legal strong { color: var(--text-primary); font-weight: 650; }
.legal a { color: var(--primary); text-decoration: underline; text-decoration-color: rgb(47 214 154 / 40%); text-underline-offset: .18em; overflow-wrap: anywhere; }
.legal a:hover { text-decoration-color: currentColor; }
.legal code { background: var(--surface-raised); border: 1px solid var(--border); border-radius: .35rem; font-size: .88em; padding: 0 .3em; }

@media (max-width: 30rem) {
    .subscription-form { align-items: stretch; flex-direction: column; }
    .site-header .brand span { display: none; }
    .site-footer { align-items: flex-start; flex-direction: column; gap: .6rem; }
    .footer-links { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}