/* ============================================================
   stake-gambling.ca — independent affiliate informational site
   Stylesheet (mobile-first, 2026)
   ============================================================ */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #ffffff;
    background: #0f212e;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: #1475e1; text-decoration: none; }
a:hover { color: #3a8ce8; text-decoration: underline; }
a:focus-visible { outline: 2px solid #1475e1; outline-offset: 3px; border-radius: 2px; }

:root {
    --bg-1: #1a2c38;
    --bg-2: #213743;
    --bg-3: #0f212e;
    --text: #ffffff;
    --text-muted: #b1bad3;
    --accent: #1475e1;
    --accent-hover: #3a8ce8;
    --danger: #ff5252;
    --warn: #ffb400;
    --border: #2f4553;
    --radius: 10px;
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    --max: 1200px;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ------------------- Header ------------------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(15, 33, 46, 0.96);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--border);
}
.site-header__inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 14px 20px;
    display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap;
}
.site-branding { display: flex; align-items: center; gap: 10px; }
.site-branding__logo { height: 32px; width: auto; }
.site-branding__title {
    font-size: 1.1rem; font-weight: 700; letter-spacing: 0.2px;
    color: #fff; white-space: nowrap;
}
.site-branding__title .accent { color: var(--accent); }

.main-navigation { margin-left: auto; }
.main-navigation__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 6px; flex-wrap: wrap;
}
.main-navigation__list a {
    display: inline-block;
    padding: 8px 12px;
    color: var(--text-muted);
    font-size: 0.95rem;
    border-radius: 6px;
    transition: color .15s ease, background .15s ease;
}
.main-navigation__list a:hover,
.main-navigation__list a.is-current {
    color: #fff; background: var(--bg-2); text-decoration: none;
}

.header-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    background: var(--accent); color: #ffffff !important;
    font-weight: 700; border-radius: 8px;
    margin-left: 8px;
    line-height: 1;
    transition: background .2s ease, transform .12s ease, box-shadow .2s ease;
}
.header-cta:hover {
    background: var(--accent-hover); color: #ffffff !important; text-decoration: none;
    box-shadow: 0 6px 18px rgba(20,117,225,0.35);
}
.header-cta:active { transform: translateY(1px); }
.header-cta__icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
    display: inline-block;
    fill: none;
    stroke: currentColor;
    transition: transform .25s ease;
}
.header-cta:hover .header-cta__icon { transform: rotate(-12deg); }

.lang-switch {
    display: inline-flex; align-items: center;
    border: 1px solid var(--border); border-radius: 8px;
    overflow: hidden; line-height: 1;
}
.lang-switch a {
    padding: 7px 11px; font-size: 0.85rem; font-weight: 600;
    color: var(--text-muted); white-space: nowrap;
    transition: color .15s ease, background .15s ease;
}
.lang-switch a + a { border-left: 1px solid var(--border); }
.lang-switch a:hover { color: #fff; background: var(--bg-2); text-decoration: none; }
.lang-switch a.is-active { background: var(--accent); color: #fff; }
.lang-switch a.is-active:hover { background: var(--accent-hover); }

.nav-toggle {
    display: none;
    background: var(--bg-2); border: 1px solid var(--border);
    color: #fff; padding: 8px 10px; border-radius: 6px;
    cursor: pointer; font-size: 0.95rem;
}

/* ------------------- Layout ------------------- */
.container { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

.entry { padding: 28px 0 56px; }
.entry-header { margin-bottom: 24px; }
.entry-header h1 {
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1.2;
    margin: 12px 0 10px;
    letter-spacing: -0.01em;
}
.entry-subtitle {
    color: var(--text-muted);
    font-size: 1.05rem; margin: 0 0 16px;
}

.entry-content h2 {
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
    margin-top: 36px; margin-bottom: 12px;
    border-left: 4px solid var(--accent);
    padding-left: 12px;
}
.entry-content h3 {
    font-size: 1.18rem;
    margin-top: 26px; margin-bottom: 8px;
    color: #eaf2f8;
}
.entry-content p { margin: 0 0 14px; }
.entry-content ul, .entry-content ol { margin: 0 0 18px; padding-left: 22px; }
.entry-content li { margin-bottom: 6px; }
.entry-content strong { color: #fff; }

/* ------------------- Breadcrumbs ------------------- */
.breadcrumbs {
    font-size: 0.88rem; color: var(--text-muted);
    padding: 10px 0; border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
}
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs__sep { margin: 0 6px; opacity: 0.55; }

/* ------------------- Hero ------------------- */
.hero {
    background: radial-gradient(1200px 360px at 80% -10%, rgba(20,117,225,0.18), transparent 60%),
                linear-gradient(180deg, #1a2c38 0%, #0f212e 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 24px;
    margin-bottom: 28px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
}
.hero__copy h1 { margin-top: 0; }
.hero__lede {
    color: var(--text-muted); font-size: 1.08rem; margin-bottom: 18px;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.hero__media img { border-radius: 12px; box-shadow: var(--shadow); }

/* ------------------- Buttons ------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px;
    background: var(--bg-2); color: #fff;
    border: 1px solid var(--border);
    border-radius: 8px; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { background: #2a4554; text-decoration: none; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-accent {
    background: var(--accent); color: #ffffff !important;
    border-color: transparent; font-weight: 700;
}
.btn-accent:hover { background: var(--accent-hover); color: #ffffff !important; }
.btn-lg { padding: 14px 26px; font-size: 1.05rem; }

/* ------------------- Quick answer ------------------- */
.quick-answer {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    padding: 16px 18px;
    border-radius: 10px;
    margin: 18px 0 28px;
}
.quick-answer__label {
    display: inline-block;
    font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent); font-weight: 700; margin-bottom: 6px;
}
.quick-answer p { margin: 0; }

/* ------------------- Promo bar (horizontal) ------------------- */
.promo-bar {
    background: linear-gradient(135deg, #1a2c38 0%, #213743 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    margin: 28px 0;
    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}
.promo-bar__label {
    margin: 0 0 14px;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
}
.promo-bar__row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
}
.promo-bar__code {
    flex: 1 1 320px;
    min-width: 0;
    background: rgba(20,117,225,0.04);
    border: 2px dashed rgba(20,117,225,0.45);
    border-radius: 10px;
    padding: 14px 18px;
    color: #fff;
    font: inherit;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: space-between;
    transition: border-color .25s ease, background .25s ease, transform .12s ease;
}
.promo-bar__code:hover {
    border-color: var(--accent);
    background: rgba(20,117,225,0.10);
}
.promo-bar__code:active { transform: translateY(1px); }
.promo-bar__code:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.promo-bar__code-label {
    font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-muted); font-weight: 700;
}
.promo-bar__code-value {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 1.35rem; font-weight: 800;
    color: var(--accent);
    letter-spacing: 0.10em;
    flex: 1;
    text-align: center;
    word-break: break-all;
}
.promo-bar__code-hint {
    font-size: 0.78rem; color: var(--text-muted);
    white-space: nowrap;
    transition: color .2s ease;
}
.promo-bar__code.is-copied {
    border-color: var(--accent);
    background: rgba(20,117,225,0.16);
}
.promo-bar__code.is-copied .promo-bar__code-hint { color: var(--accent); }

.promo-bar__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent);
    color: #ffffff !important;
    padding: 0 24px;
    min-height: 56px;
    min-width: 160px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, transform .12s ease;
}
.promo-bar__cta:hover { background: var(--accent-hover); text-decoration: none; }
.promo-bar__cta:active { transform: translateY(1px); }
.promo-bar__cta.is-copied { background: var(--accent-hover); }

.promo-bar__helper {
    margin: 12px 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.promo-bar__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.promo-bar__actions .btn { flex: 1 1 auto; min-width: 180px; }

@media (max-width: 640px) {
    .promo-bar { padding: 18px; }
    .promo-bar__row { flex-direction: column; }
    .promo-bar__cta { width: 100%; }
    .promo-bar__code { justify-content: center; flex-wrap: wrap; gap: 8px; text-align: center; }
    .promo-bar__code-value { font-size: 1.2rem; }
    .promo-bar__actions .btn { width: 100%; }
}

/* ------------------- Comparison table ------------------- */
.wp-block-table { overflow-x: auto; margin: 18px 0; }
.wp-block-table table {
    width: 100%; border-collapse: collapse;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden;
    min-width: 520px;
}
.wp-block-table th,
.wp-block-table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    font-size: 0.95rem;
}
.wp-block-table th {
    background: var(--bg-2);
    color: #fff; font-weight: 700;
    letter-spacing: 0.02em;
}
.wp-block-table tr:last-child td { border-bottom: 0; }
.wp-block-table tr:nth-child(even) td { background: rgba(255,255,255,0.015); }

/* ------------------- Pros & Cons ------------------- */
.pros-cons {
    display: grid; gap: 16px; grid-template-columns: 1fr;
    margin: 20px 0 28px;
}
.pros-cons__card {
    background: var(--bg-1); border: 1px solid var(--border);
    border-radius: 12px; padding: 18px 20px;
}
.pros-cons__card h3 { margin: 0 0 10px; font-size: 1.1rem; }
.pros-cons__card.pros { border-top: 3px solid var(--accent); }
.pros-cons__card.cons { border-top: 3px solid var(--warn); }
.pros-cons__card ul { margin: 0; padding-left: 18px; }
.pros-cons__card li { margin-bottom: 6px; color: var(--text-muted); }
.pros-cons__card li strong { color: #fff; }

/* ------------------- CTA block ------------------- */
.cta-card {
    background: linear-gradient(135deg, rgba(20,117,225,0.18), rgba(20,117,225,0.04));
    border: 1px solid rgba(20,117,225,0.45);
    border-radius: 14px;
    padding: 22px;
    margin: 26px 0;
    display: grid; gap: 14px;
}
.cta-card h3 { margin: 0; font-size: 1.2rem; }
.cta-card p { margin: 0; color: var(--text-muted); }
.cta-card__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------- FAQ accordion -------------------
   Height is driven inline by JS (animating to/from measured scrollHeight)
   so the perceived speed is constant regardless of answer length.
   Opacity, translateY and icon rotation are CSS, all sharing the same
   easing curve for a synced, premium feel.
*/
.faq { margin: 16px 0 28px; display: grid; gap: 10px; }

.faq-item {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.faq-item:hover { border-color: rgba(20,117,225,0.4); }
.faq-item[open] {
    border-color: rgba(20,117,225,0.55);
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}

.faq-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    user-select: none;
    transition: color .2s ease, background .2s ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
.faq-item > summary:hover { background: rgba(255,255,255,0.02); }
.faq-item > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Plus → minus icon, synced to the answer's easing curve */
.faq-item__icon {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    position: relative;
    border-radius: 50%;
    background: rgba(20,117,225,0.12);
    transition: background .25s ease, transform .34s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.faq-item__icon::before,
.faq-item__icon::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    background: var(--accent);
    border-radius: 1px;
    transition:
        transform .34s cubic-bezier(0.4, 0, 0.2, 1),
        opacity .26s ease;
}
.faq-item__icon::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.faq-item__icon::after  { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-item__icon { background: rgba(20,117,225,0.22); }
.faq-item[open] .faq-item__icon::after { opacity: 0; }

/* Answer panel — height inline-set by JS, padding/opacity/translateY in CSS.
   Single shared cubic-bezier(0.4, 0, 0.2, 1) keeps every property synced. */
.faq-item__answer {
    display: block;
    height: 0;
    overflow: hidden;
    padding: 0 20px;
    color: var(--text-muted);
    opacity: 0;
    transform: translateY(-4px);
    transition:
        height .36s cubic-bezier(0.4, 0, 0.2, 1),
        padding-top .36s cubic-bezier(0.4, 0, 0.2, 1),
        padding-bottom .36s cubic-bezier(0.4, 0, 0.2, 1),
        opacity .30s cubic-bezier(0.4, 0, 0.2, 1) .04s,
        transform .32s cubic-bezier(0.4, 0, 0.2, 1) .02s;
    will-change: height, opacity, transform;
}

/* Open state — applied when <details> has [open] attribute. */
.faq-item[open] > .faq-item__answer {
    opacity: 1;
    transform: translateY(0);
    padding-top: 2px;
    padding-bottom: 18px;
}

/* Closing state — `.is-closing` is added by JS at the START of the close.
   Higher specificity than `[open]` so opacity/transform/padding actively
   transition AWAY from their open values WHILE the height collapses,
   instead of snapping at the end of the height transition.
   Also fades opacity slightly earlier than height (no delay) so the text
   visually dissolves into the collapsing container. */
.faq-item.is-closing[open] > .faq-item__answer {
    opacity: 0;
    transform: translateY(-4px);
    padding-top: 0;
    padding-bottom: 0;
    transition:
        height .36s cubic-bezier(0.4, 0, 0.2, 1),
        padding-top .36s cubic-bezier(0.4, 0, 0.2, 1),
        padding-bottom .36s cubic-bezier(0.4, 0, 0.2, 1),
        opacity .32s cubic-bezier(0.4, 0, 0.2, 1),
        transform .34s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item__answer p:first-child { margin-top: 0; }
.faq-item__answer p:last-child { margin-bottom: 0; }
.faq-item__answer a { color: var(--accent); }
.faq-item__answer a:hover { color: var(--accent-hover); }

@media (prefers-reduced-motion: reduce) {
    .faq-item,
    .faq-item summary,
    .faq-item__icon,
    .faq-item__icon::before,
    .faq-item__icon::after,
    .faq-item__answer { transition: none !important; }
    .faq-item__answer { transform: none !important; }
}

/* ------------------- Notices ------------------- */
.responsible-gambling {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 0.93rem;
    color: var(--text-muted);
    margin: 22px 0;
}
.responsible-gambling strong { color: #fff; }

/* ------------------- Card grids ------------------- */
.card-grid {
    display: grid; gap: 16px;
    grid-template-columns: 1fr;
    margin: 18px 0 28px;
}
.feature-card {
    background: var(--bg-1); border: 1px solid var(--border);
    border-radius: 12px; padding: 18px 20px;
}
.feature-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.feature-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }

/* ------------------- Compact editorial hero image (legality page) ------------------- */
.legality-hero {
    margin: 6px auto 22px;
    max-width: 640px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-3);
    box-shadow: var(--shadow);
    aspect-ratio: 16 / 9;
    position: relative;
}
.legality-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ------------------- Content figure (in-flow image with caption) ------------------- */
.content-figure {
    margin: 22px auto 26px;
    max-width: 560px;
    padding: 0;
}
.content-figure__image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    max-width: 560px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-3);
    box-shadow: var(--shadow);
    aspect-ratio: 1200 / 630;
    object-fit: cover;
}
.content-figure__caption {
    margin: 10px auto 0;
    max-width: 640px;
    text-align: center;
    font-size: 0.86rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.55;
}
/* Near-square game art (e.g. Plinko board): show in full, don't crop */
.content-figure__image--square {
    aspect-ratio: auto;
    object-fit: contain;
    max-width: 440px;
    padding: 14px;
}

/* ------------------- Activation guide block ------------------- */
.activation-guide {
    margin: 30px 0 36px;
    padding: 28px;
    background: linear-gradient(180deg, rgba(20,117,225,0.04) 0%, transparent 60%), var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 16px;
}
.activation-guide__lede {
    color: var(--text-muted);
    font-size: 1.02rem;
    margin: 6px 0 18px;
}
.activation-guide__steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: grid;
    gap: 12px;
}
.activation-guide__steps > li {
    position: relative;
    background: rgba(15, 33, 46, 0.55);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px 14px 56px;
    color: var(--text-muted);
    line-height: 1.55;
}
.activation-guide__steps > li strong { color: #fff; }
.activation-guide__steps > li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 14px; top: 14px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(20,117,225,0.18);
    color: var(--accent);
    border: 1px solid rgba(20,117,225,0.45);
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
}
.activation-guide__figure { margin: 0 auto; max-width: 820px; }
.activation-guide__image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 820px;
    margin: 0 auto;
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 14px 40px rgba(0,0,0,0.35);
    background: var(--bg-3);
}
.activation-guide__caption {
    margin: 10px auto 0;
    max-width: 720px;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-muted);
    font-style: italic;
}
.activation-guide__cta {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* ------------------- Related links ------------------- */
.related-links {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 28px 0;
}
.related-links h3 { margin: 0 0 10px; font-size: 1.05rem; }
.related-links ul { margin: 0; padding-left: 18px; }
.related-links li { margin-bottom: 4px; }

/* ------------------- Footer ------------------- */
.site-footer {
    background: #0a1721;
    border-top: 1px solid var(--border);
    padding: 36px 0 18px;
    margin-top: 40px;
    color: var(--text-muted);
    font-size: 0.92rem;
}
.site-footer__grid {
    display: grid; gap: 28px;
    grid-template-columns: 1fr;
    margin-bottom: 26px;
}
.site-footer h4 {
    color: #fff; font-size: 1rem; margin: 0 0 10px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 6px; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--accent); }

.site-footer__disclaimer {
    border-top: 1px solid var(--border);
    padding-top: 18px;
    font-size: 0.78rem;
    line-height: 1.6;
    color: #6c7a8d;
    max-width: 1000px;
}
.site-footer__disclaimer p { margin: 0 0 6px; }
.site-footer__disclaimer p:last-child { margin-bottom: 0; }
.site-footer__disclaimer strong { color: #8d9aae; font-weight: 600; }
.age-badge {
    display: inline-block;
    border: 1px solid #8a3a3a;
    color: #c66767;
    background: rgba(255, 82, 82, 0.04);
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    margin-right: 6px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    vertical-align: 1px;
}

/* ------------------- Forms ------------------- */
.contact-form { display: grid; gap: 14px; max-width: 600px; }
.contact-form label {
    display: block; margin-bottom: 6px;
    font-size: 0.92rem; color: var(--text-muted);
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    background: var(--bg-1); color: #fff;
    border: 1px solid var(--border);
    border-radius: 8px; padding: 10px 12px;
    font: inherit;
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: 2px solid var(--accent); outline-offset: 1px;
}

/* ------------------- 404 page ------------------- */
.error-404 {
    padding: 60px 20px 80px;
    text-align: center;
}
.error-404__code {
    font-size: clamp(5rem, 18vw, 9rem);
    font-weight: 900;
    line-height: 1;
    margin: 0 0 8px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.04em;
}
.error-404__title {
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    margin: 0 0 14px;
    color: #fff;
}
.error-404__lede {
    color: var(--text-muted);
    max-width: 560px;
    margin: 0 auto 26px;
    line-height: 1.65;
}
.error-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 32px;
}
.error-404__links {
    max-width: 560px;
    margin: 0 auto;
    padding: 18px 20px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: left;
}
.error-404__links h2 {
    font-size: 1rem;
    margin: 0 0 8px;
    color: #fff;
}
.error-404__links ul { margin: 0; padding-left: 18px; }
.error-404__links li { margin-bottom: 4px; color: var(--text-muted); }

/* ------------------- Responsive ------------------- */
@media (min-width: 640px) {
    .pros-cons { grid-template-columns: 1fr 1fr; }
    .card-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
    .hero {
        grid-template-columns: 1.1fr 0.9fr;
        padding: 44px;
    }
    .card-grid { grid-template-columns: repeat(3, 1fr); }
    .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
    .cta-card { grid-template-columns: 1fr auto; align-items: center; }
}

@media (max-width: 720px) {
    .main-navigation {
        flex-basis: 100%; order: 4;
        display: none;
    }
    .main-navigation.is-open { display: block; }
    .main-navigation__list { flex-direction: column; gap: 2px; }
    .main-navigation__list a { display: block; }
    .nav-toggle { display: inline-flex; margin-left: auto; }
    .lang-switch { order: 2; }
    .header-cta { order: 3; }
}

@media (max-width: 640px) {
    .promo-bar { padding: 18px; }
    .promo-bar__row { flex-direction: column; }
    .promo-bar__cta { width: 100%; }
    .promo-bar__code { justify-content: center; flex-wrap: wrap; gap: 8px; text-align: center; }
    .promo-bar__code-value { font-size: 1.2rem; }
    .promo-bar__actions .btn { width: 100%; }
    .legality-hero { margin: 8px auto 18px; border-radius: 10px; max-width: 100%; }
    .content-figure { margin: 18px 0 22px; }
    .content-figure__image { border-radius: 10px; }
    .content-figure__caption { font-size: 0.82rem; padding: 0 4px; }
    .activation-guide { padding: 20px; }
    .activation-guide__steps > li { padding: 12px 14px 12px 52px; }
}

/* Print */
@media print {
    .site-header, .site-footer, .header-cta, .nav-toggle, .cta-card { display: none !important; }
    body { background: #fff; color: #000; }
}