/* Couplet brand layer, loaded by every page of couplet.love after the
   page's own styles. One type family (Nunito, as in the app), the
   italic wordmark next to the chili mark, and the app's colour tokens
   (apps/couplet/designsystem.py CoupletColors). No emoji anywhere on
   the site: icons are inline SVG or the app's own illustrations. */

:root {
    --brand-coral: #ED6B7A;
    --brand-coral-dark: #D5586A;
    --brand-coral-soft: #F4A8B3;
    --brand-bg: #181135;
    --brand-surface: #251A4F;
    --brand-surface-2: #2E2161;
    --brand-border: #3A2D6E;
    --brand-text: #FFFFFF;
    --brand-text-2: #A99BC5;
    --brand-text-3: #7E739B;
}

body,
button,
input,
textarea,
select {
    font-family: 'Nunito', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', system-ui, -apple-system, sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* The wordmark: same italic black as the app header. */
.fixed-header .logo .logo-text,
.fixed-header .logo-text,
.logo-link .logo-text,
.wordmark {
    font-family: 'Nunito', system-ui, -apple-system, sans-serif;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -0.02em;
    color: var(--brand-text);
}

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

/* Inline SVG icons (stars, feature marks) inherit the text colour. */
.icon-star {
    width: 1em;
    height: 1em;
    vertical-align: -0.12em;
    fill: currentColor;
}

.stars,
.rating {
    color: var(--brand-coral);
    display: inline-flex;
    gap: 2px;
    align-items: center;
}

.feature-icon {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(237, 107, 122, 0.14);
    color: var(--brand-coral);
    margin-bottom: 10px;
}

.feature-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feature-icon img {
    width: 26px;
    height: 26px;
}