/* ========================================================================
   BatiBid — Editorial Real Estate Design System
   Palette respectée : terracotta #D9571E · brun #3B1F0B · crème #FFF9F2

   HEADS UP FOR THE NEXT DEVELOPER
   This hand-written file is the stylesheet the browser actually loads, see
   the <link> in resources/views/layouts/app.blade.php. The Vite + Tailwind
   toolchain present in the repository (vite.config.js, resources/css/app.css)
   is NOT wired to any view: editing resources/css/app.css changes nothing on
   the site. Make your changes here.
   ======================================================================== */

/* ------------------------------------------------------------------------
   Self-hosted fonts, latin subset.

   Previously pulled from fonts.googleapis.com, which meant a render blocking
   stylesheet on a cold origin plus a second cold origin (fonts.gstatic.com)
   discovered only once that stylesheet had parsed. Same files, served from
   our own domain, discovered by a preload in the document head.
   ------------------------------------------------------------------------ */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/fraunces-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 400 500;
    font-display: swap;
    src: url('fonts/fraunces-italic-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/geist-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light;
    --clr-primary: #D9571E;
    --clr-primary-dark: #C34E1B;
    /* Light text on the brand colour reaches only 3.77:1. Solid surfaces that
       carry cream or white text use this deeper variant, which clears AA. */
    --clr-primary-deep: #B84718;
    --clr-primary-soft: #F2D9C6;
    --clr-dark: #3B1F0B;
    --clr-dark-soft: #5a4538;
    --clr-light: #FFF9F2;
    --clr-light-2: #FCF6EE;
    --clr-dark-bg: #1A1A1A;
    --clr-card-bg: #2C2C2C;
    --clr-border: rgba(59, 31, 11, 0.12);
    --clr-border-strong: rgba(59, 31, 11, 0.22);

    --ff-display: 'Fraunces', 'Times New Roman', serif;
    --ff-base: 'Geist', 'Inter', system-ui, sans-serif;
    --ff-mono: 'JetBrains Mono', 'Courier New', monospace;

    --radius-sm: 6px;
    --radius: 14px;
    --radius-lg: 24px;
    --radius-xl: 36px;

    --gap: 1rem;
    --shadow-sm: 0 1px 2px rgba(59, 31, 11, .04), 0 2px 4px rgba(59, 31, 11, .04);
    --shadow-md: 0 8px 24px rgba(59, 31, 11, .08), 0 2px 6px rgba(59, 31, 11, .04);
    --shadow-lg: 0 24px 48px rgba(59, 31, 11, .12), 0 8px 16px rgba(59, 31, 11, .06);
    --shadow-warm: 0 20px 40px rgba(217, 87, 30, .18);

    --ease: cubic-bezier(.2, .8, .2, 1);
}

/* Fonts are declared above and self-hosted from public/fonts. The layout
   preloads the two faces the first screen needs. */

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

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

body {
    font-family: var(--ff-base);
    font-weight: 400;
    line-height: 1.6;
    color: var(--clr-dark);
    background: var(--clr-light);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}

/* Subtle paper grain overlay, desktop only.
   A fixed full-viewport layer combining an feTurbulence filter with
   mix-blend-mode forces a compositing layer that is re-blended on every
   scroll frame. On entry-level Android hardware that alone causes visible
   stutter, for a decorative effect barely perceptible at 0.35 opacity. */
@media (min-width: 1024px) {
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        opacity: .35;
        mix-blend-mode: multiply;
        background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.23 0 0 0 0 0.12 0 0 0 0 0.04 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    }
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

/* ---------- Icons ----------
   Local SVG sprite, injected once per page by
   resources/views/partials/icon-sprite.blade.php. It replaces the Bootstrap
   Icons webfont, which cost a 93.7 KB render blocking stylesheet plus a
   121.3 KB font from a third-party CDN to draw ten glyphs. Icons size from
   the font-size of their container and take their colour from currentColor,
   exactly like the glyphs they replace. */
.icon-sprite {
    display: none;
}

.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex-shrink: 0;
    vertical-align: -0.125em;
}

figure, blockquote {
    margin: 0;
}

button {
    font-family: inherit;
}

::selection {
    background: var(--clr-primary);
    color: var(--clr-light);
}

:focus-visible {
    outline: 2px solid var(--clr-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--clr-dark);
    color: var(--clr-light);
    padding: .75rem 1.25rem;
    border-radius: 8px;
    z-index: 1000;
    transition: top .2s var(--ease);
}

.skip-link:focus {
    top: 1rem;
}

/* ---------- Layout ---------- */
.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 2;
}

section {
    padding: 4.5rem 0;
    position: relative;
    z-index: 2;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
    font-family: var(--ff-display);
    font-weight: 500;
    color: var(--clr-dark);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

h1 {
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    font-weight: 400;
    letter-spacing: -0.035em;
}

h2 {
    font-size: clamp(2rem, 4.5vw, 3.75rem);
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
}

h3 {
    font-size: 1.25rem;
    letter-spacing: -0.015em;
}

p {
    font-size: 1rem;
    line-height: 1.65;
}

.highlight {
    color: var(--clr-primary);
    font-style: italic;
    font-weight: 500;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--ff-base);
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .18em;
    /* 12px text on light surfaces. Dark sections override this below: there a
       darker terracotta would lower contrast, not raise it. */
    color: var(--clr-primary-dark);
    margin-bottom: 1.25rem;
}

/* On the dark sections the brand terracotta drops to 3.28:1 against near
   black. Lighten it there instead of darkening it. */
.benefits .eyebrow,
.testimonials .eyebrow,
.plans .eyebrow {
    color: #F08A55;
}

.eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--clr-primary);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 52px;
    padding: 0 1.75rem;
    border: none;
    border-radius: 999px;
    background: var(--clr-dark);
    color: var(--clr-light);
    font-family: var(--ff-base);
    font-weight: 500;
    font-size: .95rem;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: "→";
    transition: transform .35s var(--ease);
    display: inline-block;
}

.btn:hover {
    background: var(--clr-primary-deep);
    transform: translateY(-2px);
    box-shadow: var(--shadow-warm);
}

.btn:hover::after {
    transform: translateX(4px);
}

/* Touch screens have no hover. Without an active state, tapping a button
   gives no feedback at all, which reads as an unresponsive page. */
.btn:active {
    background: var(--clr-primary-dark);
    transform: translateY(1px) scale(.985);
    box-shadow: none;
}

.nav__item > a:active,
.hamburger:active {
    opacity: .6;
}

.btn--outline {
    background: transparent;
    border: 1.5px solid var(--clr-dark);
    color: var(--clr-dark);
}

.btn--outline:hover {
    background: var(--clr-dark);
    color: var(--clr-light);
    border-color: var(--clr-dark);
}

.btn--ghost {
    background: transparent;
    color: var(--clr-dark);
    border: 1px solid var(--clr-border-strong);
}

.btn--ghost:hover {
    background: var(--clr-dark);
    color: var(--clr-light);
    border-color: var(--clr-dark);
}

.plan .btn--outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
}

.plan .btn--outline:hover {
    background: #fff;
    color: var(--clr-dark);
    border-color: #fff;
}

/* ---------- Header ---------- */
header {
    background: rgba(255, 249, 242, 0.78);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--clr-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
    padding: 0 .5rem;
    position: relative;
}

.logo img {
    height: 40px;
    transition: transform .3s var(--ease);
}

.logo:hover img {
    transform: scale(1.03);
}

.nav__list {
    display: flex;
    gap: .25rem;
    align-items: center;
}

.nav__item {
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 400;
    color: var(--clr-dark);
    position: relative;
}

.nav__item > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .65rem 1rem;
    border-radius: 999px;
    transition: background .25s var(--ease), color .25s var(--ease);
}

.nav__item a {
    position: relative;
}

.nav__item > a:hover {
    background: var(--clr-primary-soft);
    color: var(--clr-primary);
}

/* The auth entries were added to the nav list so the burger panel would have
   a sign-up route on mobile, but no rule ever kept them out of the desktop
   bar, where the header already carries its own sign-up button: the wide
   layout showed "S'inscrire" twice. The sign-in link stays, it has no
   equivalent on desktop. */
@media (min-width: 768px) {
    .nav__item--auth .btn--nav {
        display: none;
    }
}

.header > .btn {
    height: 44px;
    padding: 0 1.25rem;
    font-size: .9rem;
}

.hamburger {
    display: none;
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 102;
    color: var(--clr-dark);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--clr-light);
    box-shadow: var(--shadow-sm);
}

.overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 26, .4);
    backdrop-filter: blur(4px);
    z-index: 100;
}

.overlay--show {
    display: block;
}

/* ========================================================================
   HERO — Editorial split with floating accents
   ======================================================================== */
.hero {
    padding: 4rem 0 5rem;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    top: 10%;
    right: -10%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle at center, rgba(217, 87, 30, .18), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.hero::after {
    content: "";
    position: absolute;
    bottom: 5%;
    left: -8%;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle at center, rgba(59, 31, 11, .08), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.hero h1 {
    font-size: clamp(2.5rem, 7vw, 5.75rem);
    max-width: 1100px;
    margin-bottom: 1.5rem;
    animation: fadeUp .9s var(--ease) both;
}

.hero h1 .highlight {
    font-family: var(--ff-display);
    font-style: italic;
}

.h1-break {
    display: block;
}

.hero__lead {
    font-family: var(--ff-base);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.5;
    color: var(--clr-dark-soft);
    max-width: 640px;
    margin-bottom: 0;
    letter-spacing: 0;
    animation: fadeUp .9s .15s var(--ease) both;
}

.cta {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    animation: fadeUp .9s .3s var(--ease) both;
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 4rem;
    padding: 2rem;
    background: var(--clr-light-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    animation: fadeUp .9s .45s var(--ease) both;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    position: relative;
    padding-left: 1rem;
    border-left: 1px solid var(--clr-border);
}

.stats .stat:first-child {
    border-left: none;
    padding-left: 0;
}

.stat img {
    width: 20px;
    height: 20px;
    margin-bottom: .25rem;
}

.stat-text {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    align-items: flex-start;
}

.stat .number {
    font-family: var(--ff-display);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 500;
    color: var(--clr-dark);
    line-height: 1;
    letter-spacing: -0.03em;
}

.stat .label {
    font-size: .8rem;
    color: var(--clr-dark-soft);
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.hero__img {
    margin: 4rem 0 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    max-height: 580px;
    box-shadow: var(--shadow-lg);
    position: relative;
    animation: fadeUp 1s .6s var(--ease) both;
}

.hero__img::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
    pointer-events: none;
}

.hero__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 8s ease;
}

.hero__img:hover img {
    transform: scale(1.04);
}

/* ========================================================================
   BENEFITS — Dark editorial duo
   ======================================================================== */
.benefits {
    background: var(--clr-dark-bg);
    color: var(--clr-light);
    text-align: left;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.benefits::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(217, 87, 30, .15), transparent 60%);
    border-radius: 50%;
    pointer-events: none;
}

.benefits .container {
    text-align: center;
}

.benefits h2 {
    color: var(--clr-light);
    max-width: 900px;
    margin: 1rem auto 3rem;
}

.benefits h2 + .benefits__cards {
    margin-top: 4rem;
}

.benefits__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 3rem 0;
    text-align: left;
}

.card {
    background: linear-gradient(165deg, #2c2c2c, #232323);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
    max-width: none;
    flex: none;
}

.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-primary), transparent);
    opacity: 0;
    transition: opacity .4s var(--ease);
}

.card:hover {
    transform: translateY(-6px);
    border-color: rgba(217, 87, 30, .3);
}

.card:hover::before {
    opacity: 1;
}

.card-number {
    width: 48px;
    height: 48px;
    background: transparent;
    border: 1px solid var(--clr-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--clr-primary);
    margin-bottom: .5rem;
}

.card-title {
    font-family: var(--ff-display);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--clr-light);
    text-align: left;
    letter-spacing: -0.02em;
}

.card-text {
    font-size: .98rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .65);
    text-align: left;
}

.benefits .btn {
    /* Cream label on the brand colour is 3.77:1. The deep variant clears AA
       and keeps the button reading as the primary action. */
    background: var(--clr-primary-deep);
    margin-top: 2rem;
}

.benefits .btn:hover {
    background: #fff;
    color: var(--clr-dark);
}

/* ========================================================================
   TESTIMONIALS — Magazine cards in marquee
   ======================================================================== */
.testimonials {
    background: var(--clr-light);
    text-align: center;
    padding-top: 5rem;
    overflow: hidden;
}

.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--clr-light-2);
    color: var(--clr-dark);
    padding: .6rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--clr-border);
    font-size: .85rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.rating-badge img {
    width: 16px;
    height: 16px;
}

.testimonials h2 {
    max-width: 800px;
    margin: 0 auto 4rem;
}

.testimonials__wrapper {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 1rem 0 3rem;
    margin: 0 -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.testimonials__wrapper::-webkit-scrollbar {
    display: none;
}

.testimonial {
    flex: 0 0 360px;
    min-height: 280px;
    aspect-ratio: unset;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: var(--radius-lg);
    border: 1px solid var(--clr-border);
    background: var(--clr-light-2);
    position: relative;
    text-align: left;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}

.testimonial:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--clr-border-strong);
}

.testimonial__quote {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    left: auto;
    opacity: .25;
}

.testimonial__text {
    font-family: var(--ff-display);
    font-size: 1.1rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.45;
    color: var(--clr-dark);
    margin: 1.5rem 0;
    letter-spacing: -0.005em;
}

.testimonial__author {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--clr-border);
    width: 100%;
}

.testimonial__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--clr-light);
    box-shadow: var(--shadow-sm);
}

.testimonial__author h3 {
    font-family: var(--ff-base);
    font-size: .95rem;
    font-weight: 600;
    color: var(--clr-dark);
    margin: 0;
    letter-spacing: 0;
}

.testimonial__author p {
    font-size: .8rem;
    color: var(--clr-dark-soft);
    margin: 0;
}

/* ========================================================================
   PLANS — Premium dark with elegant tabs
   ======================================================================== */
.plans {
    background: var(--clr-dark-bg);
    color: #fff;
    text-align: center;
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.plans::before {
    content: "";
    position: absolute;
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 400px;
    background: radial-gradient(ellipse at center, rgba(217, 87, 30, .14), transparent 70%);
    pointer-events: none;
}

.plans h2 {
    color: #fff;
    margin-bottom: .5rem;
}

.plans > .container > p {
    margin-bottom: 3rem;
    color: rgba(255, 255, 255, .55);
    font-size: 1.05rem;
}

.plans-toggle {
    display: inline-flex;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    padding: .35rem;
    gap: .25rem;
}

.plans-toggle-btn {
    padding: .75rem 1.5rem;
    min-height: 44px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, .72);
    font-weight: 500;
    font-size: .9rem;
    cursor: pointer;
    transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
    border-radius: 999px;
    letter-spacing: -0.005em;
}

.plans-toggle-btn:hover {
    color: #fff;
}

.plans-toggle-btn.active {
    /* White label, so the surface needs the deep variant to clear AA. */
    background: var(--clr-primary-deep);
    color: #fff;
    box-shadow: 0 4px 12px rgba(217, 87, 30, .35);
}

.plans-cards {
    display: none;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 3rem;
}

.plans-cards.active {
    display: flex;
    flex-wrap: wrap;
    animation: fadeUp .5s var(--ease) both;
}

.plan {
    background: linear-gradient(165deg, #2c2c2c, #1f1f1f);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    max-width: 360px;
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
    position: relative;
    transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}

.plan:hover {
    transform: translateY(-6px);
    border-color: rgba(217, 87, 30, .25);
}

.plan--highlight {
    border: 1px solid rgba(217, 87, 30, .5);
    background: linear-gradient(165deg, #382318, #2a1d12);
    box-shadow: 0 12px 32px rgba(217, 87, 30, .15);
    position: relative;
}

.plan--highlight::before {
    content: "Recommandé";
    position: absolute;
    top: -12px;
    right: 1.5rem;
    background: var(--clr-primary-deep);
    color: #fff;
    padding: .35rem .9rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.plan-header {
    background: transparent;
    padding: 0;
    border-radius: 0;
    display: block;
    font-family: var(--ff-display);
    font-size: 1.65rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.02em;
}

.plan p {
    font-family: var(--ff-display);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--clr-primary);
    letter-spacing: -0.02em;
    margin: -.5rem 0 .5rem;
}

.plan ul {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    flex: 1;
    margin-bottom: .5rem;
}

.plan ul li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    color: rgba(255, 255, 255, .8);
    font-size: .92rem;
    line-height: 1.45;
}

.plan-bullet {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    margin-top: .15rem;
    color: var(--clr-primary);
}

.plan .btn {
    background: var(--clr-primary-deep);
    color: #fff;
    border: none;
}

.plan .btn:hover {
    background: #fff;
    color: var(--clr-dark);
}

/* ========================================================================
   SERVICE — Magazine layout with hand-drawn feel
   ======================================================================== */
.service {
    background: var(--clr-light);
    padding: 5rem 0;
    position: relative;
}

.service__intro {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 3.5rem;
}

.service__text {
    max-width: 560px;
}

.service__media {
    text-align: center;
    position: relative;
}

.service__media::before {
    content: "";
    position: absolute;
    top: -16px;
    right: -16px;
    width: 80px;
    height: 80px;
    border: 1.5px solid var(--clr-primary);
    border-radius: 50%;
    z-index: 0;
}

.service__media::after {
    content: "";
    position: absolute;
    bottom: -16px;
    left: -16px;
    width: 120px;
    height: 120px;
    background: var(--clr-primary-soft);
    border-radius: 50%;
    z-index: 0;
    opacity: .6;
}

.service__media img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 1;
    aspect-ratio: 4/5;
    width: 100%;
    object-fit: cover;
}

.service__intro-text {
    margin: 1.25rem 0 2.25rem;
    color: var(--clr-dark-soft);
    line-height: 1.6;
    font-size: 1.05rem;
}

.service__cta {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.service__steps-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem 1.5rem;
    margin: 2rem 0;
    padding: 1.75rem;
    background: var(--clr-light-2);
    border-radius: var(--radius);
    border: 1px solid var(--clr-border);
}

.service__steps-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-weight: 500;
    color: var(--clr-dark);
    font-size: .92rem;
    line-height: 1.4;
}

.service__steps-list li .plan-bullet {
    flex-shrink: 0;
    margin-top: .15rem;
}

.service__benefits-full {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    padding: 2rem 0;
    margin-bottom: 3rem;
}

.benefit-card {
    background: var(--clr-light-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

.benefit-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--clr-primary);
    transition: width .4s var(--ease);
}

.benefit-card:hover::before {
    width: 100%;
}

.benefit-card .icon {
    color: var(--clr-primary);
    background: var(--clr-primary-soft);
    width: 52px;
    height: 52px;
    padding: 13px;
    box-sizing: border-box;
    border-radius: 14px;
}

.benefit-card h3 {
    margin: 0;
    font-family: var(--ff-display);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--clr-dark);
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.benefit-card p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--clr-dark-soft);
}

.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--clr-border-strong);
    background: #fff;
}

.service__footer {
    text-align: center;
}

.service__note {
    display: inline-block;
    padding: 1rem 1.75rem;
    background: var(--clr-dark);
    color: var(--clr-light);
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 400;
    letter-spacing: -0.005em;
}

/* ========================================================================
   ARTICLES — Editorial grid
   ======================================================================== */
.articles {
    background: var(--clr-light);
    padding: 5rem 0;
    color: var(--clr-dark);
}

.articles .container > .eyebrow,
.articles h2,
.articles-subtitle {
    text-align: center;
}

.articles .container {
    text-align: center;
}

.articles h2 {
    margin-bottom: 1rem;
}

.articles-subtitle {
    max-width: 600px;
    margin: 0 auto 4rem;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--clr-dark-soft);
    text-align: center;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.article-card {
    background: var(--clr-light-2);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-width: none;
    width: 100%;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}

.article-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--clr-border-strong);
}

.article-card img {
    height: 240px;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.article-card:hover img {
    transform: scale(1.05);
}

.article-content {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.article-content .category {
    font-family: var(--ff-base);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    /* 11px on a tinted card: the dark variant lands at 4.42:1, just short of
       the 4.5:1 floor, so use the deep one. */
    color: var(--clr-primary-deep);
    letter-spacing: .15em;
    margin-bottom: .75rem;
}

.article-content h3 {
    font-family: var(--ff-display);
    font-size: 1.35rem;
    font-weight: 500;
    margin-bottom: .85rem;
    color: var(--clr-dark);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.article-content p {
    flex: 1;
    font-size: .92rem;
    line-height: 1.55;
    margin-bottom: 1.5rem;
    color: var(--clr-dark-soft);
    text-align: left;
}

.article-content a.btn {
    margin-top: auto;
    align-self: flex-start;
    height: 44px;
    padding: 0 1.25rem;
    font-size: .85rem;
    background: transparent;
    color: var(--clr-dark);
    border: 1.5px solid var(--clr-dark);
}

.article-content a.btn:hover {
    background: var(--clr-dark);
    color: var(--clr-light);
}

/* ========================================================================
   FOOTER — Refined dark
   ======================================================================== */
footer {
    background-color: var(--clr-dark-bg);
    color: var(--clr-light);
    padding: 5rem 0 2rem;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    margin-top: -2rem;
    position: relative;
    z-index: 2;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 3rem;
    padding: 0 1.5rem;
    max-width: 1240px;
    margin: 0 auto;
}

.footer-logo img {
    height: 40px;
    width: auto;
    margin-bottom: 1.5rem;
}

.footer-logo p {
    font-size: .92rem;
    color: rgba(255, 255, 255, .55);
    line-height: 1.55;
    max-width: 280px;
}

.footer-content h4 {
    font-family: var(--ff-base);
    color: var(--clr-light);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    margin-bottom: 1.25rem;
}

.footer-contact, .footer-legal, .footer-nav {
    font-style: normal;
}

.footer-contact li, .footer-legal li, .footer-nav li {
    margin-bottom: .15rem;
    font-size: .92rem;
    color: rgba(255, 255, 255, .65);
}

/* These are the only routes to the legal pages, and they are the links a
   visitor goes looking for on purpose. With no vertical padding the touch
   target fell to roughly 20px, below the 24px minimum of WCAG 2.5.8. */
.footer-contact a, .footer-legal a, .footer-nav a,
.footer-legal .link-button {
    display: inline-block;
    padding: .45rem 0;
    min-height: 24px;
    transition: color .25s var(--ease);
}

.footer-contact a:hover, .footer-legal a:hover, .footer-nav a:hover,
.footer-legal .link-button:hover {
    color: var(--clr-primary);
}

.footer-contact a:active, .footer-legal a:active, .footer-nav a:active,
.footer-legal .link-button:active {
    color: var(--clr-primary-soft);
}

/* Cookie preferences trigger: a button, because it opens a panel rather than
   navigating, but it reads as one more entry in the legal list. */
.link-button {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.footer-socials {
    display: flex;
    gap: .6rem;
    margin-top: 1rem;
}

.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-light);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1rem;
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}

.footer-socials a:hover {
    background: var(--clr-primary);
    color: #fff;
    border-color: var(--clr-primary);
    transform: translateY(-2px);
}

.footer-bottom {
    max-width: 1240px;
    margin: 4rem auto 0;
    padding: 1.5rem 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .82rem;
    /* 13px legal line at 40% white on near black is 3.81:1. */
    color: rgba(255, 255, 255, .72);
    flex-wrap: wrap;
    gap: 1rem;
}

/* ========================================================================
   WhatsApp floating CTA
   ======================================================================== */
.whatsapp-call {
    position: fixed;
    bottom: var(--whatsapp-offset, 1.5rem);
    right: 1.5rem;
    min-width: 60px;
    height: 60px;
    background: #0E7A6E;
    color: #fff;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 0;
    font-size: 1.65rem;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .35);
    z-index: 1000;
    transition: transform .3s var(--ease), bottom .3s var(--ease);
    animation: pulse 2.5s infinite;
}

/* An icon with an aria-label only tells assistive technology what the button
   does; sighted visitors were left guessing. There is room for the words on a
   desktop viewport, so use them. */
.whatsapp-call__label {
    display: none;
    font-family: var(--ff-base);
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .whatsapp-call {
        padding: 0 1.5rem;
        border-radius: 999px;
    }

    .whatsapp-call__label {
        display: inline;
    }
}

/* The floating button sits over the bottom-right corner of the viewport at
   every scroll position, where the article cards and the plan cards put their
   call to action on a phone. Shrink it, tuck it into the safe area and give
   the last section room underneath. */
@media (max-width: 767px) {
    .whatsapp-call {
        min-width: 52px;
        height: 52px;
        right: 1rem;
        bottom: calc(var(--whatsapp-offset, 1rem) + env(safe-area-inset-bottom, 0px));
        font-size: 1.4rem;
    }

    .articles {
        padding-bottom: calc(5rem + 52px);
    }
}

/* While the consent bar is on screen it owns the bottom edge: the floating
   button moves above it and the page gains exactly the bar's height at the
   bottom, so no content ends up permanently hidden underneath. The height is
   measured by public/main.js, since it depends on how the text wraps. */
body.has-consent-banner {
    --whatsapp-offset: calc(var(--consent-height, 5rem) + 1rem);
    padding-bottom: var(--consent-height, 5rem);
}

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

.whatsapp-call:hover {
    transform: scale(1.1);
    animation: none;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 8px 24px rgba(37, 211, 102, .35), 0 0 0 0 rgba(37, 211, 102, .4);
    }
    50% {
        box-shadow: 0 8px 24px rgba(37, 211, 102, .35), 0 0 0 16px rgba(37, 211, 102, 0);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================================================
   Reveal-on-scroll utility (handled by main.js)
   ======================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================================================
   Responsive
   ======================================================================== */
@media (max-width: 1100px) {
    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .stats .stat {
        border-left: none;
        padding-left: 0;
    }

    .service__benefits-full {
        grid-template-columns: repeat(3, 1fr);
    }

    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 768px) {
    section {
        padding: 3rem 0;
    }

    section.hero {
        padding: 2.5rem 0 4rem;
    }

    .hero__img {
        margin: 2rem 0 .5rem;
    }

    .hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cta {
        flex-direction: column;
        width: 100%;
    }

    .cta .btn {
        width: 100%;
    }

    .stats {
        grid-template-columns: 1fr 1fr;
        padding: 1.5rem;
        gap: 1.25rem;
    }

    .nav__list {
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background: var(--clr-light);
        padding: 5rem 1.5rem 2rem;
        transform: translateX(100%);
        transition: transform .35s var(--ease);
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
        z-index: 101;
        box-shadow: -16px 0 40px rgba(0, 0, 0, .08);
    }

    .nav__list--open {
        transform: translateX(0);
    }

    .nav__item {
        width: 100%;
        font-size: 1.15rem;
        font-family: var(--ff-display);
    }

    .nav__item > a {
        display: block;
        padding: .9rem 1rem;
    }

    /* Keep the sign-up call to action reachable on phones: it is the primary
       conversion entry point and mobile is where the traffic is. */
    .header > .btn {
        display: inline-flex;
        order: 2;
        /* The burger is position:fixed, so it sits outside the flex flow and
           was overlapping the label. Clear its 44px footprint plus its own
           1.25rem inset, minus the container padding, plus a gap. */
        margin-right: 3.25rem;
        padding: .55rem 1rem;
        font-size: .85rem;
        min-height: 44px;
    }

    .hamburger {
        order: 3;
    }

    .plans-cards {
        flex-direction: column;
        align-items: center;
    }

    .plan {
        width: 100%;
        max-width: 100%;
    }

    .service__intro {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .service__intro {
        display: flex;
        flex-direction: column-reverse;
    }

    .service__benefits-full {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem 0;
    }

    .benefits__cards {
        grid-template-columns: 1fr;
    }

    .articles-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .testimonial {
        flex: 0 0 280px;
    }

    .testimonial__text {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1.25rem;
    }

    h1 {
        font-size: 2.4rem;
    }

    h2 {
        font-size: 1.85rem;
    }

    .stats {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================
   CAROUSEL CONTROLS, testimonials

   The strip scrolls on its own and its native scrollbar is hidden, so it had
   no navigation affordance at all and no way to stop it. WCAG 2.2.2 requires
   an explicit pause for anything that moves for more than five seconds, and
   pausing on hover does not exist on a touch screen.
   ======================================================================== */
.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: -1rem;
}

.carousel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0 .75rem;
    border: 1px solid var(--clr-border-strong);
    border-radius: 999px;
    background: var(--clr-light-2);
    color: var(--clr-dark);
    font-family: var(--ff-base);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

.carousel-btn:hover {
    background: var(--clr-dark);
    border-color: var(--clr-dark);
    color: var(--clr-light);
}

.carousel-btn:active {
    background: var(--clr-primary-dark);
    border-color: var(--clr-primary-dark);
    color: var(--clr-light);
}

.carousel-btn--toggle {
    margin-left: .5rem;
}

.carousel-dots {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.carousel-dot {
    /* 10px mark, but a 24px hit area: the visual size is not the target. */
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
}

.carousel-dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--clr-border-strong);
    transition: background .25s var(--ease), width .25s var(--ease);
}

.carousel-dot.is-active::before {
    background: var(--clr-primary);
    width: 22px;
    border-radius: 999px;
}

.carousel-dot:hover::before {
    background: var(--clr-primary-dark);
}

/* On a narrow screen the eight dots take the whole width, so they get their
   own row and the three buttons line up underneath. */
@media (max-width: 560px) {
    .carousel-controls {
        gap: .4rem;
    }

    .carousel-dots {
        order: 1;
        flex-basis: 100%;
        justify-content: center;
        margin-bottom: .25rem;
    }

    .carousel-controls [data-testimonials="prev"] {
        order: 2;
    }

    .carousel-btn--toggle {
        order: 3;
        margin-left: 0;
    }

    .carousel-controls [data-testimonials="next"] {
        order: 4;
    }
}

/* ========================================================================
   CONSENT BANNER

   Measurement cookies now wait for an explicit opt-in. The bar is not a
   modal: it does not dim the page, does not trap focus and does not stop the
   visitor from reading or navigating while it is up.
   ======================================================================== */
.consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    background: var(--clr-dark-bg);
    color: var(--clr-light);
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 24px rgba(59, 31, 11, .18);
}

.consent[hidden] {
    display: none;
}

.consent__inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.consent__text {
    flex: 1 1 320px;
    margin: 0;
    font-size: .88rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .78);
}

.consent__text a {
    color: var(--clr-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.consent__actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.consent__btn {
    min-height: 44px;
    padding: 0 1.4rem;
    font-size: .88rem;
}

/* Refusal must be as easy to find and to press as acceptance. */
.btn--ghost {
    background: transparent;
    color: var(--clr-light);
    border: 1.5px solid rgba(255, 255, 255, .35);
}

.btn--ghost:hover {
    background: rgba(255, 255, 255, .1);
    border-color: var(--clr-light);
    color: var(--clr-light);
}

.btn--ghost:active {
    background: rgba(255, 255, 255, .18);
}

@media (max-width: 600px) {
    .consent__inner {
        flex-direction: column;
        align-items: stretch;
        gap: .85rem;
    }

    /* The basis above is a width for the row layout; in a column it would be
       read as a height and turn the bar into a 400px panel. */
    .consent__text {
        flex: 0 0 auto;
        font-size: .82rem;
    }

    .consent__actions {
        justify-content: stretch;
    }

    .consent__btn {
        flex: 1;
    }
}

/* ---------------------------------------------------------------------------
   Error pages
   ---------------------------------------------------------------------------
   Laravel's default page answers with the right status but says "Not Found" in
   English, carries no identity and offers no way back. A visitor who mistypes an
   address, or follows a link to a page that moved, deserves the site around them
   and somewhere to go.
--------------------------------------------------------------------------- */
.error-page {
    padding: clamp(4rem, 12vw, 9rem) 1.25rem clamp(5rem, 12vw, 10rem);
    max-width: 46rem;
}

.error-page__title {
    font-family: var(--ff-display);
    font-size: clamp(2.1rem, 6vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0.75rem 0 0;
}

.error-page__lead {
    margin-top: 1.25rem;
    max-width: 38rem;
    color: var(--clr-muted);
    font-size: 1.05rem;
    line-height: 1.65;
}

.error-page__cta {
    margin-top: 2.25rem;
}

.error-page__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--clr-border);
}

.error-page__links a {
    color: var(--clr-muted);
    text-decoration: none;
    font-size: .95rem;
}

.error-page__links a:hover,
.error-page__links a:focus-visible {
    color: var(--clr-primary);
    text-decoration: underline;
}