/* ==========================================================
   Go Atlas — Landing Page Styles
   The video editor for maps.
   ========================================================== */

/* ===== Variables ===== */
/* Editorial cartography palette: charcoal ink, aged paper, one amber accent. */
:root {
    --bg: #1a1a18;
    --bg-elevated: #2b2a28;
    --bg-elevated-strong: #222220;
    --bg-subtle: #35342f;

    --paper: #eee7d5;
    --paper-bright: #f5efe1;
    --paper-dim: #b2ada0;
    --charcoal: #272725;
    --section-ink: #272725;
    --section-copy: #53514c;
    --section-muted: #7b786f;

    --border: rgba(233, 221, 200, 0.10);
    --border-strong: rgba(233, 221, 200, 0.22);
    --rule: rgba(233, 221, 200, 0.14);

    /* Warm neutrals derived from the raisin↔eggshell axis (on-palette) */
    --text: #eee7d5;
    --text-secondary: #c2bdae;
    --text-muted: #949186;

    /* Pale-copper accent + Skobeloff teal (editorial palette) */
    --accent: #e1926a;
    /* Warm sepia-brown — muted orange for text on LIGHT (eggshell), matches the paper. */
    --accent-deep: #855e42;
    --accent-2: #e4ac8b;
    --accent-bright: #e9c9b4;
    --accent-glow: rgba(225, 146, 106, 0.16);
    --teal: #007074;
    --teal-bright: #1a9094;
    --ink: #c6a678;
    --evidence-border: rgba(198, 166, 120, 0.34);

    /* Smooth gradients — 2 stops, no rainbow */
    --grad-warm: linear-gradient(140deg, #d27d56 0%, #e5a380 100%);
    /* Deeper copper for accent text on LIGHT (eggshell) backgrounds — more punch. */
    --grad-warm-deep: linear-gradient(140deg, #b5572c 0%, #d2794e 100%);
    /* Teal accent text — alternates with copper on light sections. */
    --grad-teal: linear-gradient(140deg, #007074 0%, #1a9094 100%);
    --grad-headline: linear-gradient(95deg, #e8dac3 0%, #e0a35b 100%);

    --radius: 8px;
    --radius-lg: 14px;
    --max-width: 1180px;
    --page-pad: clamp(16px, 3vw, 28px);
    --shadow-soft: 0 16px 38px rgba(0, 0, 0, 0.32);
    --shadow-strong: 0 28px 72px rgba(0, 0, 0, 0.54);
    --nav-height: 64px;

    /* Vertical rhythm tokens — used everywhere for consistent spacing */
    --space-section-y: clamp(56px, 7vw, 96px);
    --space-block-y: clamp(28px, 3.4vw, 48px);
    --space-stack-y: clamp(14px, 1.6vw, 22px);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 56px; /* = real nav height (logo 32 + padding 2×12): anchors tuck right under the nav, no leftover band of the previous section */
    -webkit-font-smoothing: antialiased;
    min-height: 100%;
    background:
        radial-gradient(ellipse at top, rgba(225, 146, 106, 0.08), transparent 36%),
        linear-gradient(180deg, #272725 0%, #1c1c1a 34%, #eee7d5 34%, #e3dcc8 100%);
    background-color: #eee7d5;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background:
        radial-gradient(ellipse at top, rgba(225, 146, 106, 0.08), transparent 36%),
        linear-gradient(180deg, #272725 0%, #1c1c1a 34%, #eee7d5 34%, #e3dcc8 100%);
    background-color: #eee7d5;
    background-attachment: fixed;
    color: var(--text);
    line-height: 1.55;
    letter-spacing: 0;
    overflow-x: hidden;
    position: relative;
    min-height: 100svh;
}

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

a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
}

img {
    max-width: 100%;
    display: block;
}

section {
    padding-top: var(--space-section-y);
    padding-bottom: var(--space-section-y);
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
    position: relative;
    z-index: 2;
}

main > section:not(.hero) {
    color: var(--section-ink);
    --text: var(--section-ink);
    --text-secondary: var(--section-copy);
    --text-muted: var(--section-muted);
    --border: rgba(40, 35, 27, 0.14);
    --border-strong: rgba(40, 35, 27, 0.26);
    --rule: rgba(40, 35, 27, 0.18);
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1800' height='1800' viewBox='0 0 1800 1800'><defs><filter id='stain'><feTurbulence type='fractalNoise' baseFrequency='0.018' numOctaves='3' seed='37'/><feDisplacementMap in='SourceGraphic' scale='54'/><feGaussianBlur stdDeviation='42'/></filter><filter id='edge'><feTurbulence type='fractalNoise' baseFrequency='0.085' numOctaves='3' seed='9'/><feDisplacementMap in='SourceGraphic' scale='10'/></filter><filter id='rub'><feTurbulence type='fractalNoise' baseFrequency='0.055' numOctaves='4' seed='22'/><feDisplacementMap in='SourceGraphic' scale='26'/><feGaussianBlur stdDeviation='7'/></filter><filter id='soft'><feGaussianBlur stdDeviation='18'/></filter></defs><g filter='url(%23stain)' opacity='0.10'><path d='M92 238 C162 72 424 84 548 224 C674 366 548 590 350 620 C144 650 18 438 92 238Z' fill='%23624d30'/><path d='M1168 228 C1294 64 1602 152 1656 382 C1706 594 1430 692 1248 570 C1080 458 1054 374 1168 228Z' fill='%23fff1d4'/><path d='M564 1280 C706 1076 1068 1118 1166 1322 C1254 1506 1012 1692 742 1620 C552 1568 430 1462 564 1280Z' fill='%236a5638'/></g><g filter='url(%23edge)' fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M166 176 C238 228 294 304 370 356 C420 390 470 410 548 482' stroke='%23201811' stroke-width='1.15' opacity='0.13'/><path d='M170 170 C244 220 300 296 376 348 C428 382 478 402 556 474' stroke='%23fff4df' stroke-width='0.68' opacity='0.085'/><path d='M262 270 L226 250 M348 354 L314 328 M462 424 L426 404' stroke='%23201811' stroke-width='0.62' opacity='0.075'/></g><g filter='url(%23edge)' fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M1040 842 C1136 822 1214 890 1294 930 C1374 972 1480 960 1586 1038' stroke='%23201811' stroke-width='0.98' opacity='0.105'/><path d='M1044 836 C1140 814 1222 880 1302 922 C1380 964 1488 950 1592 1028' stroke='%23fff4df' stroke-width='0.58' opacity='0.065'/></g><g filter='url(%23rub)' opacity='0.115'><path d='M718 310 C840 250 1036 302 1122 410 C1002 474 806 452 718 310Z' fill='%23fff4df'/><path d='M244 1162 C388 1086 602 1130 710 1264 C554 1328 344 1308 244 1162Z' fill='%23624d30'/></g><g fill='none' stroke='%23201811' stroke-linecap='round' stroke-linejoin='round' opacity='0.085'><path d='M1380 178 C1416 244 1374 308 1426 374 C1460 416 1514 426 1546 484' stroke-width='0.86'/><path d='M1404 224 L1452 200 M1414 372 L1464 356' stroke-width='0.48'/></g><g filter='url(%23soft)' opacity='0.075'><path d='M848 744 C908 724 1002 742 1050 788 C984 816 900 806 848 744Z' fill='%23604b30'/></g></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'><filter id='grain'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' seed='19' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.22'/></feComponentTransfer></filter><rect width='360' height='360' filter='url(%23grain)' opacity='0.50'/></svg>"),
        linear-gradient(rgba(40, 35, 27, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40, 35, 27, 0.03) 1px, transparent 1px),
        linear-gradient(180deg, var(--paper-bright) 0%, var(--paper) 100%);
    background-size: min(1800px, 165vw) auto, 360px 360px, 96px 96px, 96px 96px, auto;
    background-position: 50% 8%, 0 0, 0 0, 0 0, 0 0;
    background-repeat: no-repeat, repeat, repeat, repeat, no-repeat;
    background-blend-mode: multiply, soft-light, multiply, multiply, normal;
}

main {
    position: relative;
}

main::before {
    content: "";
    position: absolute;
    top: 100svh;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    pointer-events: none;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='460' height='380' viewBox='0 0 460 380'><defs><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.075' numOctaves='3' seed='12'/><feDisplacementMap in='SourceGraphic' scale='7'/></filter></defs><g filter='url(%23r)' fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M46 54 C112 96 170 164 244 224 C286 258 330 278 386 336' stroke='%2317110c' stroke-width='1.08' opacity='0.18'/><path d='M82 48 C118 84 148 122 186 154' stroke='%2317110c' stroke-width='0.82' opacity='0.19'/><path d='M118 78 C182 132 214 190 300 246' stroke='%2317110c' stroke-width='0.52' opacity='0.15'/><path d='M210 126 C244 158 282 178 320 214 C348 240 368 264 396 292' stroke='%2317110c' stroke-width='0.72' opacity='0.17'/><path d='M68 182 C116 210 158 226 206 264' stroke='%2317110c' stroke-width='0.42' opacity='0.10'/><path d='M174 160 L112 124 M266 238 L224 204 M340 304 L292 282' stroke='%2317110c' stroke-width='0.64' opacity='0.13'/><path d='M50 50 C116 92 174 160 248 220 C290 254 334 274 390 332' stroke='%23fff5df' stroke-width='0.42' opacity='0.075'/></g></svg>") 8% 125px / 360px 297px no-repeat,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='780' height='360' viewBox='0 0 780 360'><defs><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='0.055' numOctaves='3' seed='23'/><feDisplacementMap in='SourceGraphic' scale='13'/></filter></defs><g filter='url(%23t)' fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M54 126 C146 78 232 136 338 158 C452 182 522 136 642 184 C696 206 724 226 748 252' stroke='%2317110c' stroke-width='1.1' opacity='0.18'/><path d='M58 118 C152 72 238 130 344 152 C456 174 528 130 648 176 C704 198 732 218 756 244' stroke='%23fff4dc' stroke-width='0.62' opacity='0.095'/><path d='M132 112 L104 84 M292 154 L270 116 M438 164 L466 126 M626 184 L660 150' stroke='%2317110c' stroke-width='0.58' opacity='0.10'/></g></svg>") 90% 300px / 560px 258px no-repeat,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='880' height='520' viewBox='0 0 880 520'><defs><filter id='a'><feTurbulence type='fractalNoise' baseFrequency='0.027' numOctaves='5' seed='44'/><feDisplacementMap in='SourceGraphic' scale='76'/><feGaussianBlur stdDeviation='28'/></filter><filter id='edge'><feTurbulence type='fractalNoise' baseFrequency='0.07' numOctaves='3' seed='45'/><feDisplacementMap in='SourceGraphic' scale='18'/><feGaussianBlur stdDeviation='10'/></filter></defs><g filter='url(%23a)' opacity='0.092'><path d='M36 206 C112 28 374 36 530 124 C666 202 814 228 846 344 C722 474 486 456 334 416 C174 374 -34 356 36 206Z' fill='%236b5538'/><path d='M126 264 C220 118 488 146 690 228 C790 270 824 338 750 414 C572 502 286 452 126 264Z' fill='%23fff3d6' opacity='0.58'/></g><g filter='url(%23edge)' opacity='0.06'><path d='M58 236 C198 112 440 132 622 210 C752 268 802 318 774 384 C612 312 444 302 274 330 C146 350 80 320 58 236Z' fill='%234f3d27'/></g></svg>") 72% 820px / 760px 449px no-repeat,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='500' viewBox='0 0 340 500'><defs><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.09' numOctaves='2' seed='33'/><feDisplacementMap in='SourceGraphic' scale='7'/></filter></defs><g filter='url(%23f)' fill='none' stroke-linecap='round'><path d='M180 36 C210 92 172 146 214 212 C244 258 284 282 292 344' stroke='%2317110c' stroke-width='1.05' opacity='0.20'/><path d='M184 34 C216 90 178 144 220 208 C250 254 290 278 298 340' stroke='%23fff4dc' stroke-width='0.58' opacity='0.11'/><path d='M204 112 L240 92 M214 218 L250 204 M274 300 L310 284' stroke='%2317110c' stroke-width='0.55' opacity='0.13'/></g></svg>") 92% 1120px / 280px 412px no-repeat,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='760' height='620' viewBox='0 0 760 620'><defs><filter id='s' x='-30%' y='-30%' width='160%' height='160%'><feTurbulence type='fractalNoise' baseFrequency='0.017' numOctaves='3' seed='51'/><feDisplacementMap in='SourceGraphic' scale='44'/><feGaussianBlur stdDeviation='34'/></filter></defs><g filter='url(%23s)' opacity='0.18'><path d='M164 266 C236 114 492 136 580 290 C650 414 440 516 274 468 C148 430 106 386 164 266Z' fill='%23685234'/></g></svg>") 8% 1510px / 470px 383px no-repeat,
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='300' viewBox='0 0 480 300'><defs><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='0.052' numOctaves='3' seed='62'/><feDisplacementMap in='SourceGraphic' scale='18'/><feGaussianBlur stdDeviation='5'/></filter></defs><g filter='url(%23d)' opacity='0.22'><path d='M56 148 C142 72 342 88 424 178 C306 230 148 238 56 148Z' fill='%23fff3d6'/></g></svg>") 62% 1830px / 420px 263px no-repeat;
    mix-blend-mode: multiply;
    opacity: 0.95;
}

/* Page-level damage lives in main::before; sections keep only paper grain + grid. */
main > section:not(.hero) {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'><filter id='grain'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' seed='19' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.22'/></feComponentTransfer></filter><rect width='360' height='360' filter='url(%23grain)' opacity='0.50'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'><filter id='paperRelief'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.043' numOctaves='5' seed='94' stitchTiles='stitch'/><feColorMatrix values='0.42 0 0 0 0.20 0 0.36 0 0 0.17 0 0 0.27 0 0.10 0 0 0 0.32 0'/></filter><rect width='900' height='900' filter='url(%23paperRelief)' opacity='0.52'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1560' height='1040' viewBox='0 0 1560 1040'><defs><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.026' numOctaves='3' seed='113'/><feDisplacementMap in='SourceGraphic' scale='28'/><feGaussianBlur stdDeviation='4.5'/></filter><linearGradient id='l' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='%23fff7e8' stop-opacity='0'/><stop offset='0.46' stop-color='%23fff7e8' stop-opacity='0.22'/><stop offset='0.54' stop-color='%235c472d' stop-opacity='0.15'/><stop offset='1' stop-color='%235c472d' stop-opacity='0'/></linearGradient><linearGradient id='d' x1='1' y1='0' x2='0' y2='0'><stop offset='0' stop-color='%235c472d' stop-opacity='0'/><stop offset='0.42' stop-color='%235c472d' stop-opacity='0.13'/><stop offset='0.58' stop-color='%23fff7e8' stop-opacity='0.18'/><stop offset='1' stop-color='%23fff7e8' stop-opacity='0'/></linearGradient></defs><g filter='url(%23w)' fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M-180 190 C80 120 270 286 520 220 C720 166 980 96 1760 220' stroke='url(%23l)' stroke-width='34' opacity='0.36'/><path d='M-120 482 C200 360 348 560 650 468 C900 392 1140 450 1660 552' stroke='url(%23d)' stroke-width='24' opacity='0.28'/><path d='M120 822 C360 760 514 878 742 820 C980 760 1150 730 1510 842' stroke='url(%23l)' stroke-width='18' opacity='0.22'/><path d='M-80 656 C120 610 248 676 444 640 C608 610 728 578 980 632' stroke='url(%23d)' stroke-width='12' opacity='0.16'/></g></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1260' height='1540' viewBox='0 0 1260 1540'><defs><filter id='v'><feTurbulence type='fractalNoise' baseFrequency='0.03' numOctaves='3' seed='151'/><feDisplacementMap in='SourceGraphic' scale='24'/><feGaussianBlur stdDeviation='3.5'/></filter><linearGradient id='a' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='%23fff7e8' stop-opacity='0'/><stop offset='0.48' stop-color='%23fff7e8' stop-opacity='0.16'/><stop offset='0.56' stop-color='%235c472d' stop-opacity='0.13'/><stop offset='1' stop-color='%235c472d' stop-opacity='0'/></linearGradient><linearGradient id='b' x1='1' y1='0' x2='0' y2='0'><stop offset='0' stop-color='%235c472d' stop-opacity='0'/><stop offset='0.46' stop-color='%235c472d' stop-opacity='0.12'/><stop offset='0.58' stop-color='%23fff7e8' stop-opacity='0.14'/><stop offset='1' stop-color='%23fff7e8' stop-opacity='0'/></linearGradient></defs><g filter='url(%23v)' fill='none' stroke-linecap='round'><path d='M242 -120 C334 170 222 338 322 610 C416 864 350 1034 262 1660' stroke='url(%23a)' stroke-width='23' opacity='0.28'/><path d='M702 -160 C580 150 744 360 650 664 C574 910 650 1118 876 1700' stroke='url(%23b)' stroke-width='17' opacity='0.20'/><path d='M1054 -100 C990 120 1050 254 1012 462 C970 700 1018 830 1140 1180' stroke='url(%23a)' stroke-width='10' opacity='0.15'/><path d='M110 520 C210 590 320 642 438 724 C540 796 664 842 796 980' stroke='url(%23b)' stroke-width='13' opacity='0.15'/></g></svg>"),
        linear-gradient(rgba(40, 35, 27, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40, 35, 27, 0.03) 1px, transparent 1px),
        linear-gradient(180deg, var(--paper-bright) 0%, var(--paper) 100%);
    background-size: 360px 360px, 900px 900px, 1560px 1040px, 1260px 1540px, 96px 96px, 96px 96px, auto;
    background-position: 0 0, 0 0, 9% 120px, 96% 360px, 0 0, 0 0, 0 0;
    background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
    background-blend-mode: soft-light, multiply, multiply, multiply, multiply, multiply, normal;
}

main > section:not(.hero)::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.18' numOctaves='4' seed='73' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.42'/></feComponentTransfer></filter><rect width='190' height='190' filter='url(%23g)' opacity='0.74'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.028 0.11' numOctaves='5' seed='81' stitchTiles='stitch'/><feColorMatrix values='0.38 0 0 0 0.18 0 0.34 0 0 0.15 0 0 0.26 0 0.10 0 0 0 0.26 0'/></filter><rect width='520' height='520' filter='url(%23f)' opacity='0.46'/></svg>"),
        radial-gradient(ellipse 820px 360px at 8% 10%, rgba(255, 255, 255, 0.26), transparent 62%),
        radial-gradient(ellipse 720px 320px at 94% 82%, rgba(80, 59, 34, 0.08), transparent 60%);
    background-size: 190px 190px, 520px 520px, auto, auto;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    mix-blend-mode: multiply;
    opacity: 0.62;
    z-index: 0;
}

main > section:not(.hero) > * {
    position: relative;
    z-index: 1;
}

main > section:not(.hero)::before {
    content: "";
    position: absolute;
    top: 0;
    left: max(var(--page-pad), calc((100% - var(--max-width)) / 2));
    right: max(var(--page-pad), calc((100% - var(--max-width)) / 2));
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rule), transparent);
    pointer-events: none;
    z-index: 1;
}

.skip-link {
    position: fixed;
    left: 12px;
    top: -100px;
    z-index: 2000;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--accent);
    background: #060d1c;
    color: #fff;
    font-weight: 600;
    transition: top 0.2s ease;
}

.skip-link:focus { top: 12px; }

/* Subtle paper grain and warm map-light, kept behind the content. */
.site-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.18'/></feComponentTransfer></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.42'/></svg>"),
        radial-gradient(ellipse 720px 500px at 18% 12%, rgba(225, 146, 106, 0.10), transparent 58%),
        radial-gradient(ellipse 920px 620px at 84% 10%, rgba(233, 221, 200, 0.045), transparent 54%),
        linear-gradient(180deg, #272725 0%, #1f1f1d 50%, #141413 100%);
    background-blend-mode: soft-light, normal, normal, normal;
}

/* Topographic contour and document-grid lines — quiet archival map texture. */
.site-grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.42;
    background-image:
        linear-gradient(rgba(233, 221, 200, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(233, 221, 200, 0.035) 1px, transparent 1px);
    background-size: 72px 72px, 72px 72px;
    background-repeat: repeat, repeat;
    mask-image: radial-gradient(ellipse 110% 90% at center, black 40%, transparent 95%);
    -webkit-mask-image: radial-gradient(ellipse 110% 90% at center, black 40%, transparent 95%);
}

.gradient-text {
    /* Default = deeper copper for accent text on LIGHT (eggshell) sections,
       where the lighter copper washed out. The dark hero overrides back to the
       lighter --grad-warm below (see .hero-title .gradient-text). */
    background: var(--grad-warm-deep);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Teal accent variant — alternates with copper on light sections. */
.gradient-text--teal {
    background: var(--grad-teal);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Brand copyright mark — small, raised, subtle. Uses position:relative
   instead of vertical-align:super to avoid the phantom inline whitespace
   that super introduces around the character. */
.brand-c {
    display: inline-block;
    font-size: 0.45em;
    font-weight: 500;
    position: relative;
    top: -0.55em;
    margin-left: 0.04em;
    margin-right: 0.04em;
    color: inherit; /* © matches the adjacent "Go Atlas" text color exactly — no fade */
    line-height: 0;
    letter-spacing: 0;
}

/* ===== Section primitives ===== */
.section-intro {
    text-align: center;
    max-width: min(900px, 94vw);
    margin: 0 auto var(--space-block-y);
    text-wrap: balance;
}

.section-headline {
    font-size: clamp(1.8rem, 3.8vw, 3rem);
    line-height: 1.1;
    letter-spacing: 0;
    font-weight: 850;
    margin-bottom: var(--space-stack-y);
    text-wrap: balance;
    word-spacing: 0;
}

/* ==========================================================
   SECTION 1 — HERO
   ========================================================== */
.hero {
    min-height: 100svh;
    min-height: 100dvh;
    padding-top: clamp(96px, 12vh, 152px);
    padding-bottom: clamp(48px, 7vh, 88px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.hero-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.48;
    pointer-events: none;
}

.hero-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    transform: scale(1.06);
    filter: brightness(0.58) saturate(0.72) sepia(0.10);
}

.hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        /* teal vignette: clear center, teal-tinted darkening toward the edges */
        radial-gradient(ellipse at center, transparent 0%, transparent 52%, rgba(0, 32, 34, 0.5) 84%, rgba(0, 13, 15, 0.92) 100%),
        /* bottom darkening kept for CTA/text legibility */
        linear-gradient(180deg, rgba(4, 16, 18, 0.16) 0%, transparent 30%, rgba(3, 13, 14, 0.94) 100%);
    pointer-events: none;
}

.hero-glow {
    position: absolute;
    top: 30px;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(225, 146, 106, 0.10) 0%, rgba(233, 221, 200, 0.035) 35%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* Faint eggshell map grid over the hero (above the veil, under the content),
   masked so it fades out toward the edges instead of forming a hard rectangle. */
.hero-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Tilt the grid for a map-projection feel; scale up so the rotation
       still covers the hero (the .hero overflow:hidden clips the spill). */
    transform: scale(1.7) rotate(-22deg);
    transform-origin: center;
    background-image:
        linear-gradient(rgba(238, 231, 213, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(238, 231, 213, 0.04) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px;
    mask-image: radial-gradient(circle at 50% 48%, transparent 15%, black 60%);
    -webkit-mask-image: radial-gradient(circle at 50% 48%, transparent 15%, black 60%);
}

/* Compass rose (rose des vents) watermark — signals "this is a map" at low opacity. */
.hero-compass {
    position: absolute;
    top: 0;
    left: 0;
    width: min(820px, 96vh);
    height: min(820px, 96vh);
    transform: translate(-34%, -36%); /* anchored top-left, ~1/3 off-screen — the hero clips it */
    z-index: 1;
    pointer-events: none;
    opacity: 0.035;
    filter: blur(0.8px); /* soften the lines — less digital/crisp, more like a printed chart */
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240' fill='none' stroke='%23eee7d5' stroke-linejoin='round'><circle cx='120' cy='120' r='112' stroke-width='0.8'/><circle cx='120' cy='120' r='106' stroke-width='0.45'/><circle cx='120' cy='120' r='99' stroke-width='3.2' stroke-dasharray='1 9'/><circle cx='120' cy='120' r='78' stroke-width='0.45'/><circle cx='120' cy='120' r='52' stroke-width='0.55'/><path d='M120 16 L130 120 L120 224 L110 120 Z' stroke-width='0.7'/><path d='M16 120 L120 130 L224 120 L120 110 Z' stroke-width='0.7'/><g transform='rotate(45 120 120)'><path d='M120 48 L127 120 L120 192 L113 120 Z' stroke-width='0.6'/><path d='M48 120 L120 127 L192 120 L120 113 Z' stroke-width='0.6'/></g><circle cx='120' cy='120' r='7' stroke-width='0.7'/><circle cx='120' cy='120' r='2.2' fill='%23eee7d5' stroke='none'/><path d='M120 8 L128 30 L120 23 L112 30 Z' stroke-width='0.7'/></svg>") no-repeat center / contain;
}

/* Second compass rose — bottom-right, smaller, different design (filled cardinal
   points + fine graduated bezel) so it doesn't read as a copy of the top-left one. */
.hero-compass-2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: min(520px, 58vh);
    height: min(520px, 58vh);
    transform: translate(32%, 34%); /* anchored bottom-right, ~1/3 off-screen */
    z-index: 1;
    pointer-events: none;
    opacity: 0.038;
    filter: blur(0.8px);
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23eee7d5' stroke-linejoin='round'><circle cx='100' cy='100' r='90' stroke-width='0.6'/><circle cx='100' cy='100' r='80' stroke-width='3' stroke-dasharray='0.6 13.4'/><circle cx='100' cy='100' r='34' stroke-width='0.45'/><path d='M100 18 L107 100 L100 182 L93 100 Z' stroke-width='0.6' fill='%23eee7d5' fill-opacity='0.22'/><path d='M18 100 L100 107 L182 100 L100 93 Z' stroke-width='0.6' fill='%23eee7d5' fill-opacity='0.22'/><g transform='rotate(45 100 100)'><path d='M100 44 L105 100 L100 156 L95 100 Z' stroke-width='0.6'/><path d='M44 100 L100 105 L156 100 L100 95 Z' stroke-width='0.6'/></g><circle cx='100' cy='100' r='6' stroke-width='0.6'/><circle cx='100' cy='100' r='1.8' fill='%23eee7d5' stroke='none'/></svg>") no-repeat center / contain;
}

/* Uniform dark ink (#222220) on the essence + pricing + FAQ headlines, matching
   the pricing-card base. Gradient/teal accent spans inside keep their own fill. */
.essence .section-headline,
.pricing .section-headline,
.close .section-headline {
    color: #222220;
}

.pricing-grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
}

.pricing-grid--two {
    max-width: 740px;
    grid-template-columns: repeat(2, 1fr);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--grad-warm);
    color: #ffffff;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
    z-index: 2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* Both plans share one premium editorial card design.
   Annual is set apart only by its "Save" badge and savings line — same card otherwise. */
.pricing-card {
    --text: #eee7d5;
    --text-secondary: #c2bdae;
    --text-muted: #949186;
    position: relative;
    padding: 38px 32px;
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(233, 221, 200, 0.045), rgba(233, 221, 200, 0.012) 42%, transparent 100%),
        #222220;
    border: 1px solid rgba(233, 221, 200, 0.18);
    text-align: left;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(.22,1,.36,1), border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(233, 221, 200, 0.07);
}

.pricing-card:hover {
    transform: translateY(-6px);
    border-color: rgba(233, 221, 200, 0.30);
    box-shadow:
        0 26px 58px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(233, 221, 200, 0.10);
}

.pricing-card h3 {
    /* Title inherited the page's dark global --text and vanished on the dark
       card. Pin it to the card's local light --text (mirrors the app license
       gate, which already does this — see license-gate.css). */
    color: var(--text);
    font-size: 1.4rem;
    margin-bottom: 8px;
    letter-spacing: 0;
}

.price {
    color: var(--text);
    font-size: 2.6rem;
    font-weight: 800;
    margin: 14px 0 4px;
    letter-spacing: 0;
}

.price span {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.price-was {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: line-through;
    margin-right: 6px;
}

.price-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 22px;
}

.pricing-features {
    list-style: none;
    margin: 0 0 22px 0;
    padding: 0;
    flex: 1;
}

.pricing-features li {
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 0.96rem;
    line-height: 1.4;
    padding-left: 22px;
    position: relative;
}

.pricing-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 12px;
    height: 6px;
    border-left: 2px solid var(--accent-2);
    border-bottom: 2px solid var(--accent-2);
    transform: rotate(-45deg);
}

@keyframes pricing-swipe-cue {
    0%, 100% { background-position: 10px 50%, 0 0; }
    50% { background-position: 58px 50%, 0 0; }
}

/* ==========================================================
   SECTION 5 — CLOSE (FAQ + Final CTA)
   ========================================================== */
.close {
    padding-top: clamp(52px, 5vw, 72px);
    padding-bottom: clamp(52px, 5vw, 72px);
}

.close .section-intro {
    margin-bottom: clamp(20px, 2vw, 28px);
}

/* Specs compatibility table — refined Apple/Linear-style */
.specs-table-wrap {
    margin: 22px 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid rgba(233, 221, 200, 0.10);
    background: rgba(233, 221, 200, 0.025);
}

.specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
    table-layout: fixed;
}

/* Tier indicator strip on top of each column (instead of chips) */
.specs-table thead th {
    padding: 14px 12px 10px;
    text-align: left;
    white-space: nowrap;
    vertical-align: bottom;
    border-bottom: 1px solid rgba(233, 221, 200, 0.10);
    position: relative;
}

.specs-table thead th:nth-child(2)::before,
.specs-table thead th:nth-child(3)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 2px;
    border-radius: 0 0 2px 2px;
}

.specs-table thead th:nth-child(2)::before { background: rgba(232, 160, 78, 0.7); }
.specs-table thead th:nth-child(3)::before { background: rgba(110, 190, 130, 0.7); }

/* In table-layout:fixed the header row sets the column widths. Pin the label
   column narrow so the two data columns get the room instead. */
.specs-table thead th:first-child { width: 88px; }

.specs-table tbody th {
    font-weight: 600;
    color: var(--text);
    width: 68px;
    white-space: nowrap;
    text-align: left;
    padding: 11px 12px;
    border-right: 1px solid rgba(233, 221, 200, 0.06);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.specs-table tbody td {
    padding: 11px 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    vertical-align: top;
    border-top: 1px solid rgba(233, 221, 200, 0.06);
}

.specs-table tbody tr:first-child td,
.specs-table tbody tr:first-child th { border-top: none; }

.specs-table tbody tr:hover td,
.specs-table tbody tr:hover th { background: rgba(233, 221, 200, 0.025); }

/* "Recommended" column (now 3rd) slightly emphasized */
.specs-table td:nth-child(3) { color: var(--text); }

/* Not-supported callout — pulled below the table, balances cleanly across lines */
.specs-unsupported {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(232, 100, 100, 0.06);
    border: 1px solid rgba(232, 100, 100, 0.18);
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.5;
    text-wrap: balance;
}

.specs-unsupported .spec-tier {
    margin-right: 8px;
}

/* Header tier label — minimal, monospace, color carries the tier semantic */
.spec-tier {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

.spec-tier--no  { color: rgba(232, 130, 130, 0.95); }
.spec-tier--min { color: rgba(232, 170, 90, 0.95); }
.spec-tier--rec { color: rgba(130, 210, 150, 0.95); }

/* FAQ */
.faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    --text: #eee7d5;
    --text-secondary: #c2bdae;
    --text-muted: #949186;
    /* Apply the local light --text on the container (like `section.bento` does)
       so the question <summary> is legible on the dark bar. Without this it
       inherits the section's dark --section-ink → dark-on-dark. The <p> answer
       and the "+" marker already set their own color, so only summary changes. */
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #222220;
    overflow: hidden;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.faq-item[open] {
    border-color: rgba(233, 221, 200, 0.24);
    background: #2f2e2b;
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 50px 18px 22px;
    font-weight: 600;
    font-size: 1rem;
    user-select: none;
    position: relative;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--text-muted);
    transition: transform 0.2s ease, color 0.2s ease;
    line-height: 1;
}

.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
    color: var(--text);
}

.faq-item p {
    padding: 0 22px 18px;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* ==========================================================
   REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}

/* ==========================================================
   RESPONSIVE
   Breakpoints:
   - 1024px: tablet landscape — bento → 2 cols
   - 768px:  tablet portrait — outputs/workflow → 1 col, nav hamburger
   - 560px:  large phone — pricing → 1 col, hero CTA stacks
   - 380px:  small phone — final tightening
   ========================================================== */

@media (max-width: 1024px) {
    :root { --page-pad: 20px; }
}

@media (max-width: 768px) {
    :root { --page-pad: 18px; }

    body {
        background-attachment: scroll;
        overscroll-behavior-x: none;
    }

    .hero {
        padding-top: clamp(96px, 14vh, 132px);
        padding-bottom: clamp(48px, 7vh, 72px);
    }

    .pricing-card { padding: 28px 22px; }
    .price { font-size: 2.1rem; }
}

@media (max-width: 560px) {

    .pricing-grid {
        display: flex;
        grid-template-columns: none;
        gap: 12px;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 18px var(--page-pad) 14px;
        overflow-x: auto;
        scroll-padding-inline: var(--page-pad);
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    }

    .pricing-grid::-webkit-scrollbar {
        display: none;
    }

    .pricing-grid .pricing-card {
        flex: 0 0 min(84vw, 330px);
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .pricing-badge {
        top: 12px;
        font-size: 0.58rem;
        padding: 4px 10px;
        letter-spacing: 0.04em;
    } /* hide chapter pills on small phones */
}

@media (max-width: 380px) {
    :root { --page-pad: 14px; }
    .pricing-card { padding: 24px 18px; }
}

/* ==========================================================
   LEGAL DOCUMENTS (preserved)
   ========================================================== */
.legal-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 140px var(--page-pad) 80px;
}

.legal-sidebar {
    position: sticky;
    top: 140px;
    align-self: start;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #222220;
    backdrop-filter: blur(8px);
}

.legal-sidebar a {
    position: relative;
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.legal-sidebar a:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
}

.legal-sidebar a.active {
    color: #fff;
    background: rgba(225, 146, 106, 0.14);
    border: 1px solid rgba(225, 146, 106, 0.36);
}

.legal-content { min-width: 0; }

.legal-doc {
    display: none;
    max-width: 820px;
    border: 1px solid var(--border);
    border-radius: 14px;
    /* same warm dark panel + subtle cream sheen as the index's bento tiles */
    background:
        linear-gradient(180deg, rgba(233, 221, 200, 0.028), transparent 48%),
        #14120f;
    box-shadow: var(--shadow-soft);
    padding: 30px 34px;
    font-size: 0.9rem; /* a touch smaller than the index body copy */
}

.legal-doc.is-active { display: block; }

.legal-doc h1 {
    font-size: clamp(1.55rem, 3vw, 2.05rem);
    margin-bottom: 16px;
    letter-spacing: 0;
}

.legal-doc h2 { margin-top: 28px; margin-bottom: 9px; font-size: 1.1rem; }
.legal-doc h3 { margin-top: 16px; margin-bottom: 6px; font-size: 0.95rem; }
.legal-doc p,
.legal-doc li { color: var(--text-secondary); line-height: 1.65; font-size: 0.9rem; }
.legal-doc ul { padding-left: 20px; }

.legal-meta { margin-top: 24px; font-size: 0.78rem; opacity: 0.72; }

@media (max-width: 900px) {
    .legal-layout {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 120px;
    }

    .legal-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        padding: 6px;
    }

    .legal-sidebar a {
        padding: 10px 4px;
        text-align: center;
        font-size: 0.85rem;
        white-space: nowrap;
    }
}

@media (max-width: 380px) {
    .legal-sidebar a {
        font-size: 0.78rem;
        padding: 10px 2px;
    }
}

/* ==========================================================
   MOBILE PERF — drop procedural SVG paper textures on phones
   ----------------------------------------------------------
   The kraft-paper look is built from stacked SVG data-URIs using
   feTurbulence + feDisplacementMap + feGaussianBlur, tiled across every
   section and two full-viewport fixed layers. Those filters get rasterised
   (often on the CPU) as content scrolls in — the main cause of mobile scroll
   jank. On phones we keep the flat paper tone + the document grid (cheap
   gradients) and remove every turbulence/displacement/blur layer.
   ========================================================== */
@media (max-width: 768px) {
    /* Decorative grain / damage overlays — pure cost on a small screen. */
    main::before,
    main > section:not(.hero)::after,
    main > section.bento::after,
    .site-grid {
        display: none !important;
    }

    /* Light paper sections: keep only the document grid + paper gradient base.
       .bento is excluded (stays dark with its blue grid). .pricing is excluded too
       so it keeps its plain #ffffff band — no paper texture or tint on mobile. */
    main > section:not(.hero):not(.bento):not(.pricing) {
        background:
            linear-gradient(rgba(40, 35, 27, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(40, 35, 27, 0.03) 1px, transparent 1px),
            linear-gradient(180deg, var(--paper-bright) 0%, var(--paper) 100%);
        background-size: 96px 96px, 96px 96px, auto;
        background-repeat: repeat, repeat, no-repeat;
        background-blend-mode: normal;
    }

    /* Fixed dark backdrop: keep the warm glows + gradient, drop the grain. */
    .site-bg {
        background:
            radial-gradient(ellipse 720px 500px at 18% 12%, rgba(225, 146, 106, 0.10), transparent 58%),
            radial-gradient(ellipse 920px 620px at 84% 10%, rgba(233, 221, 200, 0.045), transparent 54%),
            linear-gradient(180deg, #272725 0%, #1f1f1d 50%, #141413 100%);
        background-blend-mode: normal;
    }
}
.pricing-card { cursor: default; }

/* La carte qui reste vivante doit se voir la premiere : c'est la seule sur
   laquelle on peut cliquer. */
.pricing-card--early {
    outline: 1px solid rgba(214, 122, 74, 0.55);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    /* LA SEULE CARTE CLIQUABLE, DONC LA SEULE AVEC UNE MAIN.
       `.pricing-card { cursor: default }` plus haut date du jour ou les TROIS cartes avaient
       cesse d'etre des liens de paiement. L'acces anticipe en est redevenu un — un vrai <a>
       vers LemonSqueezy — et la regle generale continuait de lui retirer le curseur. Une carte
       qui se souleve au survol sans changer le curseur se lit comme une decoration, pas comme
       le bouton d'achat : c'est le seul chemin vers le paiement de la page. */
    cursor: pointer;
}

.pricing-card--early:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.pricing-badge--early {
    background: linear-gradient(135deg, #d67a4a, #c2643a);
    color: #fff;
}

@media (max-width: 1080px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 520px; }
}

/* Le compteur de places, dans le titre de la carte. Plus petit et en retrait : c'est une
   precision sur l'offre, pas l'offre. */
.seats-left {
    font-size: 0.62em;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.55);
    margin-left: 6px;
    white-space: nowrap;
}

/* ==========================================================
   THE PAGE IS A PRICE PAGE (2026-09-19)
   The map, its veil and its compass roses stay as the backdrop; on it, the name and the two licences.
   The name is set as on the Go Plugins home: Inter 800, with a copper "Go".
   ========================================================== */
.hero-pricing {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--page-pad);
}

.atlas-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--title-gap);
    margin-bottom: var(--title-margin);
}

.atlas-name {
    font-size: var(--name-size);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.02;
    color: var(--text);
}

.go-mark {
    background: linear-gradient(135deg, #c9683a 0%, #e08f5c 48%, #ecb46e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding-right: 0.02em;
}

.atlas-sub {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-size: var(--sub-size);
    font-weight: 500;
    color: var(--text-muted);
}

.atlas-sub-logo { width: 1.05em; height: 1.05em; }

@media (max-width: 560px) {
    /* the cards scroll sideways on a phone and bring their own side padding */
    .hero-pricing { padding: 0; }
    .atlas-title { padding-inline: var(--page-pad); }
}

/* ==========================================================
   LIGHT OVERLAY (2026-09-19)
   The veil over the map is paper, not night: the map shows through as a tinted print, the name is set
   in ink like the Go Plugins home, and the two dark licence cards stand out against it. The compass
   roses and the grid were drawn in eggshell for a dark backdrop, so they are flipped to ink here.
   ========================================================== */
.hero--prices { background: #f3ecdc; }

.hero--prices .hero-video-bg { opacity: 0.55; }
.hero--prices .hero-video-bg video { filter: brightness(1.7) saturate(0.4) sepia(0.12) contrast(0.9); }

.hero--prices .hero-veil {
    background:
        radial-gradient(ellipse at center, rgba(243, 236, 220, 0.70) 0%, rgba(243, 236, 220, 0.46) 55%, rgba(243, 236, 220, 0.78) 100%),
        linear-gradient(180deg, rgba(243, 236, 220, 0.30) 0%, transparent 28%, rgba(243, 236, 220, 0.88) 100%);
}

.hero--prices .hero-glow { display: none; }

.hero--prices .hero-grid {
    background-image:
        linear-gradient(rgba(22, 21, 19, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 21, 19, 0.06) 1px, transparent 1px);
}

.hero--prices .hero-compass,
.hero--prices .hero-compass-2 { filter: invert(1) blur(0.8px); opacity: 0.09; }

.hero--prices .atlas-name { color: #1a1917; }
/* Same optical correction as the Go Plugins home: the lighter "Go" leaves the weight to the right (measured +34 px at 1440 px). */
.hero--prices .atlas-name { transform: translateX(-0.12em); }
.hero--prices .atlas-sub { color: #6b675e; }
.hero--prices .go-mark { background-image: linear-gradient(135deg, #a9502a 0%, #cf7448 48%, #e3a35c 100%); }

/* THE TOP BAND IS PART OF THE PAGE NOW. It used to be a fixed bar the pages padded around; it is the shared band of the whole
   site (shared/css/bars.css), in the flow, so the hero and the legal page give its height back. */
/* THE NAME AND THE CARDS SIT AT THE SAME HEIGHT ON EVERY PAGE THAT SHARES THIS HERO (Go Atlas, Go Glow, Go Motion Blur), whatever
   the height of the cards. The block used to be centred on its own height, so a page whose cards were shorter than Go Atlas's
   (they wrap differently as soon as the browser's font size is larger) sat lower. Where the cards make a single row (wider than
   1080px, where Go Atlas's two sit side by side) it is now placed from the top, with exactly the offset the centring gave for a row
   as tall as it is at the default font size (26.5625rem): nothing moves at the default size, and no page depends on the height of
   its own cards. The title's sizes are variables so that the offset and the title are computed from the same numbers. Narrower,
   the cards stack, Go Atlas has two and the others one, and the block stays centred on its own height. */
.hero--prices {
    --hero-top: clamp(32px, 6vh, 72px);
    --hero-bottom: clamp(48px, 7vh, 88px);
    --title-gap: clamp(6px, 1vh, 12px);
    --title-margin: clamp(26px, 4.5vh, 48px);
    --name-size: clamp(2.6rem, min(6.4vw, 10vh), 4.8rem);
    --sub-size: clamp(0.85rem, min(1.1vw, 2.2vh), 1.05rem);
    --block-height: calc(var(--name-size) * 1.02 + var(--title-gap) + var(--sub-size) * 1.55 + var(--title-margin) + 26.5625rem);
    min-height: calc(100svh - 59px);
    min-height: calc(100dvh - 59px);
    padding-top: var(--hero-top);
}
@media (min-width: 1081px) {
    .hero--prices {
        justify-content: flex-start;
        padding-top: calc(var(--hero-top) + max(0px, (100svh - 59px - var(--hero-top) - var(--hero-bottom) - var(--block-height)) / 2));
        padding-top: calc(var(--hero-top) + max(0px, (100dvh - 59px - var(--hero-top) - var(--hero-bottom) - var(--block-height)) / 2));
    }
}
.legal-layout { padding-top: 64px; }
@media (max-width: 900px) {
    .legal-layout { padding-top: 40px; }
}

/* THE PRICE CARDS DO NOT MOVE OR GROW ON HOVER. They are laid out side by side and centred as a block; reaching this page from
   the home page leaves the pointer over one of them, and a moment after load that card rose (4px for Early access, 6px for
   Lifetime) and its shadow swelled, so it looked as if it had suddenly grown while the other stayed put. Only the border answers
   the pointer now. */
.pricing-card:hover {
    transform: none;
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(233, 221, 200, 0.07);
}
.pricing-card--early:hover {
    transform: none;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
}

/* THE SEAT COUNT ARRIVES FROM THE NETWORK, after the page is drawn, so it must not change the layout when it does: its place is
   reserved from the first paint by a placeholder of the same width, invisible until the number is known. Inserting it later made
   the title wrap wherever the text is large (a bigger browser font size), the two cards grow and the whole block rise. */
.seats-left { transition: opacity 0.4s ease; }
.seats-left[data-pending] { opacity: 0; visibility: hidden; }