/* ============================================================
   ExpatTel brand layer — shared by every page.

   Load after Bootstrap so these win on equal specificity:
     <link rel="stylesheet" href="/assets/css/brand.css?v=1">
   Bump ?v= on change: .htaccess caches CSS for a week.

   Tokens are the only place a brand colour is spelled out.
   One pink (the logo's), one navy, one button system.

   The logo pink (#f72c81) is too light to carry text: white on it
   is 3.7:1, and it is 3.7:1 as text on white — both under WCAG AA's
   4.5:1. So it paints accents (icons, rules, dots, glows), and
   anything that carries text uses --et-pink-hover (#d81e6f, 4.85:1):
   primary button fills, small pink text, eyebrows.
   ============================================================ */

:root {
    --et-navy: #243c70;         /* brand navy: headings, secondary buttons */
    --et-navy-deep: #1a2d57;    /* footer, dark panels */
    --et-ink: #1a2340;          /* strongest text on light */
    --et-pink: #f72c81;         /* the logo pink: accents that carry no text */
    --et-pink-hover: #d81e6f;   /* pink that carries text: buttons, small text */
    --et-pink-press: #b8155d;   /* primary button hover */
    --et-peach: #fdb18a;        /* logo globe gradient, start */
    --et-rose: #f75fa8;         /* logo globe gradient, end */
    --et-grad: linear-gradient(135deg, #fdb18a 0%, #f75fa8 60%, #f72c81 100%);
    --et-text: #333;
    --et-muted: #5b6478;        /* secondary text, AA on white */
    --et-line: #e4e9f0;
    --et-surface: #f7f9fc;
    --et-success: #16a34a;
    --et-radius: 12px;
    --et-shadow: 0 10px 30px rgba(36, 60, 112, 0.12);
}

/* ------------------------------------------------------------
   Buttons. .et-btn plus one colour:
     .et-btn-primary    pink, the main action ("Get started") — the
                        text-safe pink, see the note at the top
     .et-btn-secondary  navy outline, the alternative on light
     .et-btn-light      white outline, the alternative on dark
   Sizes: .et-btn-sm, .et-btn-lg.
   ------------------------------------------------------------ */
.et-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 12px 26px;
    border: 2px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.et-btn:focus-visible {
    outline: 3px solid rgba(247, 44, 129, 0.45);
    outline-offset: 2px;
}
.et-btn-primary,
.et-btn-primary:visited {
    background-color: var(--et-pink-hover);
    border-color: var(--et-pink-hover);
    color: #fff;
}
.et-btn-primary:hover,
.et-btn-primary:active {
    background-color: var(--et-pink-press);
    border-color: var(--et-pink-press);
    color: #fff;
}
.et-btn-secondary,
.et-btn-secondary:visited {
    background-color: transparent;
    border-color: var(--et-navy);
    color: var(--et-navy);
}
.et-btn-secondary:hover,
.et-btn-secondary:active {
    background-color: var(--et-navy);
    border-color: var(--et-navy);
    color: #fff;
}
.et-btn-light,
.et-btn-light:visited {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}
.et-btn-light:hover,
.et-btn-light:active {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}
.et-btn-light:focus-visible { outline-color: rgba(255, 255, 255, 0.6); }
.et-btn-sm { padding: 7px 18px; font-size: 0.95rem; }
.et-btn-lg { padding: 14px 30px; font-size: 1.1rem; }

/* ------------------------------------------------------------
   Section rhythm and type. PolySans Neutral is a single weight,
   so hierarchy comes from size, tracking and colour — asking it
   for bold renders regular anyway.
   ------------------------------------------------------------ */
.et-section { padding: 88px 0; }
@media (max-width: 767px) { .et-section { padding: 60px 0; } }

.et-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--et-pink-hover);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.et-h2 {
    margin: 0 0 12px;
    color: var(--et-navy);
    font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.4rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.et-lede {
    margin: 0 auto;
    max-width: 60ch;
    color: var(--et-muted);
    font-size: 1.08rem;
    line-height: 1.6;
}