/* CockpitV2 website. Design tokens and rules are documented in DESIGN.md.
   CSP is style-src 'self' and img-src 'self' data: every style lives in this file (no inline styles);
   the logo is embedded below as SVG data URIs, so no extra file has to be served. */

/* ---------- Font: Poppins (SIL OFL 1.1, fonts/OFL.txt), the typeface of the logo's wordmark ----------
   Self-hosted Latin subsets, 2 weights (~9 KB each). swap: text shows at once in the system font. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/poppins-400.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/poppins-600.woff2") format("woff2")}

/* ---------- Tokens ---------- */
:root{
color-scheme:dark;
/* Surfaces: near-black, as the logo sits on black in the car */
--bg:#06080a;--panel:#0d1115;--surface-input:#080b0e;--surface-raised:#161c22;--surface-cyan:#071619;--surface-selected:#082428;
/* Text */
--text:#f2f6f7;--text-strong:#fdfdfd;--muted:#a6b1b8;--text-dim:#919ea6;--link:#d7e2e6;--placeholder:#7b8891;
/* Brand cyan, measured from the logo. Primary action, accent, selection, success, focus.
   Always dark text on a cyan fill (--on-cyan 13.9:1). */
--cyan:#00fafc;--cyan-hover:#8afdfe;--cyan-active:#00cdd0;--cyan-soft:#b0fdfe;--on-cyan:#00191a;
--cyan-line:#0f6a6e;--cyan-glow:#00fafc14;
/* Lines */
--line:#1d252c;--line-strong:#2c363e;--line-input:#68757f;--tick:#5f7079;
/* Status: warning (amber) and error (red) are different on purpose; success is brand cyan */
--warn:#eed9b5;--warn-bg:#29231a;--warn-line:#e7ac56;
--unsure:#f3d77d;--unsure-bg:#2e2815;--unsure-line:#e7c35e;
--danger:#ffaaa1;--danger-bg:#2e171b;--danger-line:#f0837c;
--success:var(--cyan-soft);--success-bg:#062226;--success-line:var(--cyan);
/* Type */
--font:"Poppins",system-ui,sans-serif;--font-display:var(--font);
--text-xs:12px;--text-sm:13px;--text-ui:14px;--text-md:16px;--text-lg:17px;
/* Spacing (snap new work to this scale) */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;
/* Geometry: sharp, like the logo's angled eyes. Small radii only. */
--radius-xs:2px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-art:12px;--radius-pill:999px;
--shadow-pop:0 14px 30px #000a;
--focus:2px solid var(--cyan);
--speed:.2s;
/* Motifs. Gauge ruler: minor ticks every 8px, a cyan major tick every 64px (decorative). */
--ruler:repeating-linear-gradient(90deg,var(--cyan-line) 0 1px,transparent 1px 64px) 0 0/100% 9px no-repeat,
        repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 8px) 0 0/100% 5px no-repeat;
/* Nav arrow from the logo (points up); rotate it to use as a pointer. */
--chevron:polygon(50% 0,100% 100%,50% 76%,0 100%);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:var(--text-md)/1.65 var(--font)}
::selection{background:var(--cyan);color:var(--on-cyan)}
a{color:var(--link);text-underline-offset:5px}
main{max-width:1124px;margin:auto;padding:0 var(--space-6)}
p{color:var(--muted)}
h2{font:600 28px/1.25 var(--font-display);letter-spacing:-.5px;margin:5px 0 var(--space-4);color:var(--text-strong)}
h3{color:var(--text-strong);font-weight:600}
b,strong{font-weight:600}
h1,h2,h3,legend{font-family:var(--font-display)}
img{max-width:100%;height:auto}
code{background:var(--surface-input);border:1px solid var(--line);padding:2px 6px;border-radius:var(--radius-xs);font-size:var(--text-sm)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Eyebrow: cyan caps led by the logo's arrow, turned to point at the heading. */
.eyebrow{display:flex;align-items:center;gap:10px;font-size:var(--text-xs);font-weight:600;letter-spacing:3px;color:var(--cyan)}
.eyebrow::before{content:"";flex:none;width:9px;height:10px;background:currentColor;clip-path:var(--chevron);transform:rotate(90deg)}
.intro{max-width:400px;color:var(--muted);font-size:18px}

/* One focus style for everything that can take focus. */
:focus-visible{outline:var(--focus);outline-offset:4px}
.feature-track:focus-visible{outline-offset:-3px}
#panel h2[tabindex="-1"]:focus{outline:none}/* step headings take focus for screen readers only */

/* ---------- Brand logo (Jeff's logo, traced to SVG from design/loader-logo/plain/cockpit-v2-logo.png) ---------- */
.brand-logo{display:block;background:no-repeat center/contain}
.brand-logo-stacked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1207 635'%3E%3Cpath fill='%2300FAFC' fill-rule='evenodd' d='M5 4 21 10 29 14 47 20 77 32 99 40 115 47 136 54 162 65 175 69 234 93 308 121 322 127 334 131 350 138 421 165 450 177 457 179 532 209 547 214 562 220 561 222 535 242 489 273 477 280 472 284 426 309 354 344 350 345 156 266 80 132 67 112 33 53 6 9 4 5ZM1201 4 1202 5 1201 8 1124 136 1114 155 1070 229 1051 264 1049 266 958 304 856 345 851 344 767 303 717 274 670 241 645 222 645 220 682 206 703 197 711 195 744 181 795 162 882 127 921 113 952 100 969 94 1034 68 1049 63 1078 51 1101 43 1112 38 1172 16ZM39 33 41 37 53 52 60 63 67 72 82 93 100 120 115 146 118 149 149 206 170 248 173 251 182 254 192 259 201 262 230 275 243 280 251 284 296 302 325 315 351 325 381 311 392 307 414 296 424 292 462 273 489 258 503 248 535 227 535 225 478 205 469 201 454 196 390 171 388 172 388 175 383 188 379 194 370 202 361 207 354 208 348 209 337 207 332 205 324 200 317 193 311 181 308 171 308 162 310 154 314 144 313 142 270 126 246 116 239 114 207 100 199 98 173 87 109 62 103 59 60 42ZM1167 33 1085 67 893 143 896 153 898 161 898 172 896 181 893 188 888 195 881 201 872 206 866 208 856 209 849 208 839 204 835 201 826 191 822 183 820 172 818 170 750 197 673 225 672 227 674 229 705 249 721 260 728 263 734 267 762 282 816 308 832 314 856 326 881 314 907 304 924 296 937 292 965 279 974 276 1003 263 1031 252 1034 250 1036 247 1052 215 1065 193 1070 182 1101 129 1133 82 1168 34ZM192 207 199 211 200 213 183 234 175 230 175 228ZM1014 207 1016 209 1031 228 1030 230 1024 234 1023 234 1020 231 1007 213 1009 210ZM603 221 616 246 636 291 665 353 664 354 624 334 610 326 604 324 561 344 543 354 542 353 549 339 551 333 556 324 559 316 562 311ZM240 237 246 240 248 242 235 266 227 261ZM966 237 968 238 980 261 972 265 970 265 959 242 960 240ZM440 242 442 243 452 265 452 267 445 270 443 269 433 247 434 245 439 243ZM768 243 775 246 776 248 765 271 757 268 757 266 764 249ZM290 260 297 262 298 263 298 265 287 288 280 285 279 283ZM917 260 918 260 921 265 928 283 928 284 921 287 919 286 910 264 911 262ZM392 264 394 267 402 289 401 290 393 294 384 269 385 267ZM817 264 825 267 826 269 816 294 811 292 808 290 808 289ZM337 276 346 276 347 278 347 303 346 308 337 308 336 307 336 277ZM863 276 871 276 872 277 872 307 872 308 863 308 862 307 862 277ZM1101 409 1113 409 1127 412 1137 417 1145 423 1154 434 1158 443 1160 452 1160 467 1158 477 1155 484 1144 501 1127 518 1082 559 1082 560 1160 560 1160 561 1161 582 1160 583 1072 584 1048 583 1048 571 1051 560 1054 555 1064 544 1115 498 1125 487 1131 477 1134 469 1134 452 1131 444 1126 438 1116 432 1109 431 1097 432 1089 434 1085 436 1076 446 1071 459 1056 453 1049 450 1048 448 1052 440 1057 432 1070 420 1083 413 1089 411ZM892 413 906 413 913 414 914 414 965 554 967 550 975 526 1002 454 1006 442 1016 414 1017 414 1026 413 1042 414 1041 420 1033 440 978 582 977 583 969 584 953 584 951 583 930 527 926 518 922 507 910 477 904 458 886 415 886 414Z'/%3E%3Cpath fill='%23FDFDFD' fill-rule='evenodd' d='M137 408 160 408 175 411 184 414 194 419 205 426 206 427 206 429 188 463 182 458 170 451 155 447 136 447 131 448 120 452 109 459 104 464 98 473 93 485 92 491 92 504 95 515 103 528 110 535 120 541 132 545 138 546 151 546 161 544 175 538 182 533 188 528 189 528 195 540 207 563 207 564 201 569 182 579 166 584 152 586 134 586 120 584 110 581 94 574 84 568 77 562 65 550 59 541 53 530 48 514 47 507 47 491 49 478 52 468 57 457 63 448 76 433 88 424 97 418 110 413 119 410ZM775 408 783 408 789 410 792 412 797 418 800 426 799 435 795 442 790 446 784 448 774 448 769 446 764 441 760 434 760 423 762 418 768 411ZM481 409 517 409 518 410 518 487 518 511 525 504 560 460 608 460 608 461 586 486 556 518 589 556 610 583 601 584 563 583 529 539 520 528 518 528 518 583 507 584 484 584 480 583 480 410ZM826 427 861 428 862 428 862 459 863 460 890 460 890 461 890 490 863 490 862 491 862 540 864 547 869 550 875 550 882 549 887 546 888 547 891 571 892 578 891 579 887 581 882 583 872 585 857 585 846 582 838 577 832 571 828 564 824 551 824 490 807 489 807 461 808 460 823 460 824 459 824 428ZM270 456 289 456 296 457 311 462 322 468 334 478 342 490 345 497 348 510 348 528 347 535 343 547 334 561 328 567 316 576 303 582 289 585 270 585 264 584 251 580 240 574 228 564 220 554 216 545 212 530 212 516 214 503 218 491 224 481 233 472 245 464 257 459ZM418 456 435 456 446 458 460 464 469 470 470 473 456 499 446 493 435 490 422 490 414 493 411 495 403 503 399 510 398 514 398 527 399 531 404 539 409 544 415 548 422 550 435 550 440 549 448 545 457 539 466 558 471 569 461 576 448 582 441 584 435 585 416 585 406 583 397 580 382 571 373 563 368 556 363 546 359 533 358 513 360 504 363 495 369 484 381 471 388 466 400 460ZM689 456 701 456 715 460 724 465 734 475 743 490 747 503 748 509 748 529 747 535 743 548 738 558 732 566 723 575 717 579 708 583 699 585 687 585 678 583 668 578 654 566 654 611 654 626 653 630 620 630 616 629 616 461 617 460 653 460 654 461 654 480 661 471 670 463 681 458ZM761 460 797 460 798 462 797 582 796 584 764 584 761 583ZM275 490 268 492 262 496 257 501 252 509 250 515 250 524 253 534 260 543 270 549 274 550 285 550 290 549 297 545 306 536 309 526 309 513 306 504 298 496 287 490ZM678 490 668 493 665 495 658 502 654 512 653 525 654 530 657 537 662 543 672 549 677 550 684 550 690 549 696 546 703 539 706 534 708 529 709 517 707 508 705 504 698 496 689 491Z'/%3E%3C/svg%3E");aspect-ratio:1207/635}
.brand-logo-horizontal{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2006 244'%3E%3Cpath transform='scale(0.6711)' fill='%2300FAFC' fill-rule='evenodd' d='M5 4 21 10 29 14 47 20 77 32 99 40 115 47 136 54 162 65 175 69 234 93 308 121 322 127 334 131 350 138 421 165 450 177 457 179 532 209 547 214 562 220 561 222 535 242 489 273 477 280 472 284 426 309 354 344 350 345 156 266 80 132 67 112 33 53 6 9 4 5ZM1201 4 1202 5 1201 8 1124 136 1114 155 1070 229 1051 264 1049 266 958 304 856 345 851 344 767 303 717 274 670 241 645 222 645 220 682 206 703 197 711 195 744 181 795 162 882 127 921 113 952 100 969 94 1034 68 1049 63 1078 51 1101 43 1112 38 1172 16ZM39 33 41 37 53 52 60 63 67 72 82 93 100 120 115 146 118 149 149 206 170 248 173 251 182 254 192 259 201 262 230 275 243 280 251 284 296 302 325 315 351 325 381 311 392 307 414 296 424 292 462 273 489 258 503 248 535 227 535 225 478 205 469 201 454 196 390 171 388 172 388 175 383 188 379 194 370 202 361 207 354 208 348 209 337 207 332 205 324 200 317 193 311 181 308 171 308 162 310 154 314 144 313 142 270 126 246 116 239 114 207 100 199 98 173 87 109 62 103 59 60 42ZM1167 33 1085 67 893 143 896 153 898 161 898 172 896 181 893 188 888 195 881 201 872 206 866 208 856 209 849 208 839 204 835 201 826 191 822 183 820 172 818 170 750 197 673 225 672 227 674 229 705 249 721 260 728 263 734 267 762 282 816 308 832 314 856 326 881 314 907 304 924 296 937 292 965 279 974 276 1003 263 1031 252 1034 250 1036 247 1052 215 1065 193 1070 182 1101 129 1133 82 1168 34ZM192 207 199 211 200 213 183 234 175 230 175 228ZM1014 207 1016 209 1031 228 1030 230 1024 234 1023 234 1020 231 1007 213 1009 210ZM603 221 616 246 636 291 665 353 664 354 624 334 610 326 604 324 561 344 543 354 542 353 549 339 551 333 556 324 559 316 562 311ZM240 237 246 240 248 242 235 266 227 261ZM966 237 968 238 980 261 972 265 970 265 959 242 960 240ZM440 242 442 243 452 265 452 267 445 270 443 269 433 247 434 245 439 243ZM768 243 775 246 776 248 765 271 757 268 757 266 764 249ZM290 260 297 262 298 263 298 265 287 288 280 285 279 283ZM917 260 918 260 921 265 928 283 928 284 921 287 919 286 910 264 911 262ZM392 264 394 267 402 289 401 290 393 294 384 269 385 267ZM817 264 825 267 826 269 816 294 811 292 808 290 808 289ZM337 276 346 276 347 278 347 303 346 308 337 308 336 307 336 277ZM863 276 871 276 872 277 872 307 872 308 863 308 862 307 862 277Z'/%3E%3Cg transform='translate(839 -397)'%3E%3Cpath fill='%2300FAFC' fill-rule='evenodd' d='M1101 409 1113 409 1127 412 1137 417 1145 423 1154 434 1158 443 1160 452 1160 467 1158 477 1155 484 1144 501 1127 518 1082 559 1082 560 1160 560 1160 561 1161 582 1160 583 1072 584 1048 583 1048 571 1051 560 1054 555 1064 544 1115 498 1125 487 1131 477 1134 469 1134 452 1131 444 1126 438 1116 432 1109 431 1097 432 1089 434 1085 436 1076 446 1071 459 1056 453 1049 450 1048 448 1052 440 1057 432 1070 420 1083 413 1089 411ZM892 413 906 413 913 414 914 414 965 554 967 550 975 526 1002 454 1006 442 1016 414 1017 414 1026 413 1042 414 1041 420 1033 440 978 582 977 583 969 584 953 584 951 583 930 527 926 518 922 507 910 477 904 458 886 415 886 414Z'/%3E%3Cpath fill='%23FDFDFD' fill-rule='evenodd' d='M137 408 160 408 175 411 184 414 194 419 205 426 206 427 206 429 188 463 182 458 170 451 155 447 136 447 131 448 120 452 109 459 104 464 98 473 93 485 92 491 92 504 95 515 103 528 110 535 120 541 132 545 138 546 151 546 161 544 175 538 182 533 188 528 189 528 195 540 207 563 207 564 201 569 182 579 166 584 152 586 134 586 120 584 110 581 94 574 84 568 77 562 65 550 59 541 53 530 48 514 47 507 47 491 49 478 52 468 57 457 63 448 76 433 88 424 97 418 110 413 119 410ZM775 408 783 408 789 410 792 412 797 418 800 426 799 435 795 442 790 446 784 448 774 448 769 446 764 441 760 434 760 423 762 418 768 411ZM481 409 517 409 518 410 518 487 518 511 525 504 560 460 608 460 608 461 586 486 556 518 589 556 610 583 601 584 563 583 529 539 520 528 518 528 518 583 507 584 484 584 480 583 480 410ZM826 427 861 428 862 428 862 459 863 460 890 460 890 461 890 490 863 490 862 491 862 540 864 547 869 550 875 550 882 549 887 546 888 547 891 571 892 578 891 579 887 581 882 583 872 585 857 585 846 582 838 577 832 571 828 564 824 551 824 490 807 489 807 461 808 460 823 460 824 459 824 428ZM270 456 289 456 296 457 311 462 322 468 334 478 342 490 345 497 348 510 348 528 347 535 343 547 334 561 328 567 316 576 303 582 289 585 270 585 264 584 251 580 240 574 228 564 220 554 216 545 212 530 212 516 214 503 218 491 224 481 233 472 245 464 257 459ZM418 456 435 456 446 458 460 464 469 470 470 473 456 499 446 493 435 490 422 490 414 493 411 495 403 503 399 510 398 514 398 527 399 531 404 539 409 544 415 548 422 550 435 550 440 549 448 545 457 539 466 558 471 569 461 576 448 582 441 584 435 585 416 585 406 583 397 580 382 571 373 563 368 556 363 546 359 533 358 513 360 504 363 495 369 484 381 471 388 466 400 460ZM689 456 701 456 715 460 724 465 734 475 743 490 747 503 748 509 748 529 747 535 743 548 738 558 732 566 723 575 717 579 708 583 699 585 687 585 678 583 668 578 654 566 654 611 654 626 653 630 620 630 616 629 616 461 617 460 653 460 654 461 654 480 661 471 670 463 681 458ZM761 460 797 460 798 462 797 582 796 584 764 584 761 583ZM275 490 268 492 262 496 257 501 252 509 250 515 250 524 253 534 260 543 270 549 274 550 285 550 290 549 297 545 306 536 309 526 309 513 306 504 298 496 287 490ZM678 490 668 493 665 495 658 502 654 512 653 525 654 530 657 537 662 543 672 549 677 550 684 550 690 549 696 546 703 539 706 534 708 529 709 517 707 508 705 504 698 496 689 491Z'/%3E%3C/g%3E%3C/svg%3E");aspect-ratio:2006/244}
/* Windows high contrast drops background images: show the name as text instead. */
@media(forced-colors:active){.brand-logo{background:none;aspect-ratio:auto}.brand-logo::after{content:"CockpitV2";font:600 24px var(--font)}}

/* ---------- Buttons ---------- */
/* Primary: cyan fill, dark text (13.9:1). Hover brightens, pressed deepens. */
button,.button{border:1px solid transparent;border-radius:var(--radius-sm);background:var(--cyan);color:var(--on-cyan);padding:11px 18px;font:600 var(--text-ui) var(--font);letter-spacing:.2px;cursor:pointer;display:inline-block;text-decoration:none;transition:background-color var(--speed),color var(--speed),border-color var(--speed)}
button:hover,.button:hover{background:var(--cyan-hover)}
button:active,.button:active{background:var(--cyan-active)}
/* Disabled: a flat grey slab with a dashed edge, clearly "not yet" (the hint under it says why). */
button:disabled,button:disabled:hover,button:disabled:active{background:var(--surface-raised);color:var(--text-dim);border:1px dashed var(--line-input);cursor:not-allowed}
button[aria-busy=true]{cursor:progress}
button[aria-busy=true]::after{content:"";display:inline-block;width:.9em;height:.9em;margin-left:var(--space-2);vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){button[aria-busy=true]::after{animation:none;border-right-color:currentColor;opacity:.6}}
/* Secondary (Back, Use a different VIN): outlined in the input grey (4.0:1), never filled. */
.button-secondary,button.button-secondary{background:transparent;color:var(--text);border:1px solid var(--line-input)}
.button-secondary:hover,button.button-secondary:hover{background:var(--surface-raised);border-color:var(--muted)}
.button-secondary:active,button.button-secondary:active{background:#0f1418}
/* Brand CTA (Get started, Download CockpitV2): the primary button, with the logo's arrow as a pointer. */
.button-cta::after{content:"";display:inline-block;width:9px;height:10px;margin-left:12px;background:currentColor;clip-path:var(--chevron);transform:rotate(90deg);vertical-align:0}

/* ---------- Welcome screen ---------- */
#welcomeScreen[hidden],#setupScreen[hidden]{display:none!important}
.welcome-screen{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:var(--space-4) 0 var(--space-6)}
.welcome-brand{position:relative;display:flex;justify-content:center;margin:0 0 var(--space-2);font-size:inherit;font-weight:inherit;line-height:1}
/* A faint screen glow behind the logo, as on the car's black loading screen. */
.welcome-brand::before{content:"";position:absolute;inset:-20% 25%;background:radial-gradient(ellipse at center,var(--cyan-glow),transparent 70%);pointer-events:none}
.welcome-brand .brand-logo{position:relative;width:clamp(200px,18vw,236px)}
.welcome-actions{display:flex;align-items:center;justify-content:center;gap:var(--space-5);margin-top:var(--space-5)}
.welcome-start{padding:14px 26px;font-size:15px;white-space:nowrap}
.welcome-actions p{font-size:var(--text-sm);margin:0;color:var(--muted)}

/* ---------- Feature carousel ---------- */
.feature-banner{overflow:hidden}
.feature-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;position:relative;scroll-behavior:smooth}
.feature-track::-webkit-scrollbar{display:none}
.feature-slide{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center;scroll-snap-align:start;padding:16px 2px 26px}
.feature-copy h2{font-size:clamp(38px,4.8vw,60px);letter-spacing:-1.8px;line-height:1.1;margin:22px 0}
.feature-copy .intro{font-size:var(--text-lg);max-width:450px;min-height:82px}
.feature-art{position:relative;border:1px solid #16323a;border-radius:var(--radius-art);background:radial-gradient(ellipse at 50% 45%,#0c2a31,#070d10 72%);overflow:hidden;padding:20px 8px 12px}
/* Angled cyan corner, cut like the outer tip of the logo's eyes. */
.feature-art::before{content:"";position:absolute;top:0;left:0;width:56px;height:3px;background:var(--cyan);clip-path:polygon(0 0,100% 0,calc(100% - 3px) 100%,0 100%)}
.feature-art svg{display:block;width:100%;height:auto;aspect-ratio:520/300}

/* Overview slide (first slide). */
.feature-overview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center}
.overview-identity h2{font-size:clamp(34px,4.3vw,52px);line-height:1.1;letter-spacing:-1.6px;margin:18px 0}
.overview-identity .intro{font-size:var(--text-lg);max-width:355px;margin-bottom:14px}
.overview-cockpit{max-width:440px;margin-top:var(--space-6);background:radial-gradient(ellipse at center,var(--cyan-glow),transparent 70%)}
.overview-cockpit svg{display:block;width:100%;height:auto;aspect-ratio:500/195}
.overview-cockpit>span{display:block;text-align:center;font-size:var(--text-xs);letter-spacing:3px;color:var(--text-dim);margin-top:3px}
.overview-blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.overview-block{position:relative;padding:17px 14px 15px;border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:linear-gradient(160deg,#0f171b,#0a0e11);min-width:0}
.overview-block::before{content:"";position:absolute;top:-1px;left:14px;width:28px;height:2px;background:var(--cyan)}
.overview-block-heading{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.overview-block h3{font-size:15px;margin:0;line-height:1.25;letter-spacing:-.2px;color:var(--text-strong)}
.overview-mini-art{display:block;width:42px;height:34px;flex:none;overflow:hidden}.overview-mini-art svg{width:56px;height:34px;transform:translateX(-7px)}
.overview-block ul{list-style:none;padding:0;margin:0}
.overview-block li button{display:block;width:100%;padding:3px 0;background:transparent;border:0;border-radius:var(--radius-xs);color:#b7c4ca;font-size:var(--text-sm);font-weight:400;letter-spacing:0;line-height:1.45;text-align:left}
.overview-block li button:hover{background:transparent;color:var(--cyan)}
.overview-block li button:active{background:transparent;color:var(--cyan-active)}

/* Carousel controls: pause/play, arrows, and the slide indicator drawn as gauge ticks (counter on phones). */
.feature-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-2) var(--space-4);padding-top:18px;background:var(--ruler)}
.feature-dots{grid-column:2;display:flex;justify-content:center;align-items:center;gap:2px;min-height:30px}
.feature-controls .feature-dot{display:flex;align-items:center;justify-content:center;width:23px;height:30px;padding:0;background:transparent;border:0;border-radius:var(--radius-sm)}
.feature-dot span{width:3px;height:12px;border-radius:1px;background:var(--tick);transform:skewX(-14deg);transition:background var(--speed),transform var(--speed)}
.feature-dot[aria-current=true] span{background:var(--cyan);transform:skewX(-14deg) scaleY(1.6)}
.feature-dot:hover span{background:var(--cyan-soft)}
.feature-controls .feature-arrow{background:transparent;border:0;color:#a9bcc3;font-size:20px;padding:0;width:32px;height:34px;flex:none}
.feature-controls .feature-arrow:hover{background:transparent;color:var(--cyan)}
.feature-controls .feature-arrow:active{background:transparent;color:var(--cyan-active)}
.feature-count{display:none;font-size:var(--text-sm);color:var(--text-dim);min-width:64px;text-align:center;font-variant-numeric:tabular-nums}
.feature-pause{grid-column:1;justify-self:start;display:inline-flex;align-items:center;gap:var(--space-2);background:transparent;border:0;color:var(--text-dim);font-weight:500;font-size:var(--text-sm);padding:8px 10px 8px 0}
.feature-pause:hover,.feature-pause:active{background:transparent;color:var(--cyan)}
.feature-pause svg{width:12px;height:12px;flex:none}

/* ---------- Setup screen ---------- */
.setup-topbar{display:flex;justify-content:space-between;align-items:center;padding:22px 0;gap:var(--space-5)}
.setup-topbar a{text-decoration:none;font-size:var(--text-ui);color:var(--muted);border-radius:var(--radius-xs)}.setup-topbar a:hover{color:var(--cyan)}
.setup-wordmark{margin:0;line-height:1}
.setup-wordmark .brand-logo{height:28px}
/* Progress: a gauge ruler on top, then 5 angled segments, like the ticks in the logo's eyes. */
.progress{display:flex;align-items:center;gap:var(--space-5);padding:var(--space-5) 0;font-size:var(--text-ui);background:var(--ruler);border-bottom:1px solid var(--line)}
#progressText{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
progress{flex:1;height:8px;border:0;border-radius:0;background:var(--line-strong);color:var(--cyan);-webkit-appearance:none;appearance:none;transform:skewX(-24deg);
  -webkit-mask:repeating-linear-gradient(90deg,transparent 0 2px,#000 2px calc(20% - 2px),transparent calc(20% - 2px) 20%);mask:repeating-linear-gradient(90deg,transparent 0 2px,#000 2px calc(20% - 2px),transparent calc(20% - 2px) 20%)}
progress::-webkit-progress-bar{background:var(--line-strong)}
progress::-webkit-progress-value{background:var(--cyan)}
progress::-moz-progress-bar{background:var(--cyan)}
.layout{display:grid;grid-template-columns:240px 1fr;gap:38px;margin:38px 0}

/* Step nav. Current: raised + cyan bar + arrow pointer. Done: cyan check. Locked: lock icon, dimmed. */
nav{display:flex;flex-direction:column;gap:var(--space-2)}
nav button{position:relative;text-align:left;background:transparent;color:var(--muted);padding:16px 18px;border:0;border-left:3px solid transparent;border-radius:var(--radius-sm);font-weight:600}
nav button:hover{background:#11161b;color:var(--text)}
nav button:active{background:var(--surface-raised)}
nav button[aria-current=step]{background:var(--surface-raised);color:var(--text-strong);border-left-color:var(--cyan);padding-right:34px}
nav button[aria-current=step]::after{content:"";position:absolute;right:14px;top:50%;width:9px;height:10px;margin-top:-5px;background:var(--cyan);clip-path:var(--chevron);transform:rotate(90deg)}
.step-num{display:inline-block;min-width:20px;font-variant-numeric:tabular-nums;color:var(--text-dim)}
nav button[aria-current=step] .step-num,.step-num.done{color:var(--cyan)}
nav button small{display:block;margin-left:24px;font-weight:400;font-size:var(--text-xs);color:var(--text-dim)}
nav button[aria-current=step] small{color:var(--muted)}
nav button.locked{color:#8a959e}
nav button.locked:hover{color:var(--muted)}
.step-lock{display:inline-block;width:11px;height:11px;margin-left:6px;vertical-align:-1px;color:var(--text-dim)}

#panel{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-7);min-height:430px}
/* The visor: a short cyan edge with a slanted end on the panel's top-left. */
#panel::before{content:"";position:absolute;top:-1px;left:var(--space-7);width:88px;height:3px;background:var(--cyan);clip-path:polygon(0 0,100% 0,calc(100% - 3px) 100%,0 100%)}
#panel ol li{margin:10px 0}#panel details{margin:18px 0}#panel h3{margin-top:26px}
#panel ol li::marker{color:var(--cyan);font-variant-numeric:tabular-nums}

/* Actions row: primary Continue, secondary Back, and the reason Continue is disabled. */
.actions{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center;margin-top:28px;padding-top:var(--space-6);border-top:1px solid var(--line)}
.action-hint{flex-basis:100%;margin:0;font-size:var(--text-ui);color:var(--text-dim)}
.action-hint:empty{display:none}

/* ---------- Form fields ---------- */
label.field{display:block;margin:var(--space-5) 0 var(--space-2);font-size:var(--text-ui);color:var(--text)}
input[type=text],input[type=email],select{width:100%;border:1px solid var(--line-input);border-radius:var(--radius-sm);background:var(--surface-input);padding:13px;color:var(--text-strong);font:var(--text-md) var(--font);transition:border-color var(--speed)}
input[type=text]:hover,input[type=email]:hover{border-color:#8996a0}
input[type=text]:focus-visible,input[type=email]:focus-visible{border-color:var(--cyan);outline-offset:2px}
/* Invalid keeps its red edge even while focused (the cyan ring still shows focus). */
input[aria-invalid=true],input[aria-invalid=true]:hover,input[aria-invalid=true]:focus-visible{border-color:var(--danger-line)}
input::placeholder{color:var(--placeholder)}
.field-error{display:flex;gap:var(--space-2);margin:var(--space-2) 0 0;font-size:var(--text-ui);color:var(--danger)}
.field-error:empty{display:none}
.field-error::before{content:"!";flex:none;display:inline-grid;place-items:center;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--danger-line);color:var(--danger-bg);font-weight:600;font-size:var(--text-xs);line-height:1}
input[type=file]{font:var(--text-ui) var(--font);color:var(--muted)}
input[type=file]::file-selector-button{margin-right:var(--space-3);padding:8px 14px;border:1px solid var(--line-input);border-radius:var(--radius-sm);background:transparent;color:var(--text);font:600 var(--text-ui) var(--font);cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--surface-raised)}
.check{display:flex;align-items:flex-start;gap:var(--space-3);margin:var(--space-4) 0;cursor:pointer}
.check input{margin-top:5px;accent-color:var(--cyan);width:17px;height:17px;flex:none}
.check:has(input:checked)>span{color:var(--text-strong)}
summary{cursor:pointer;color:var(--cyan);font-size:var(--text-ui);border-radius:var(--radius-xs)}
summary:hover{color:var(--cyan-hover)}

/* ---------- Notices ---------- */
/* Amber = warning (check something). Cyan = success. Red = error (it failed, or not supported). Grey = info. */
.notice{border-left:3px solid var(--warn-line);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--warn-bg);padding:14px 18px;margin:22px 0;color:var(--warn)}
.notice.good{border-color:var(--success-line);background:var(--success-bg);color:var(--success)}
.notice.error{border-color:var(--danger-line);background:var(--danger-bg);color:var(--danger)}
.notice.info{border-color:var(--line-input);background:var(--surface-raised);color:var(--text)}
.status-text{color:var(--muted);margin:18px 0 0;font-size:var(--text-ui)}
.status-text:empty{display:none}
#firmwareStatus .notice.good{background:var(--surface-selected);color:var(--cyan-soft);border:2px solid var(--cyan);border-radius:var(--radius-md);padding:12px 16px}
.firmware-search-hint{font-size:var(--text-ui);color:var(--text-dim);margin:var(--space-2) 0 0}

/* ---------- Firmware combobox ---------- */
.firmware-search{position:relative}.firmware-options[hidden]{display:none}
.firmware-options{position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0;list-style:none;margin:0;padding:6px;background:var(--surface-input);border:1px solid var(--line-input);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);max-height:280px;overflow-y:auto}
.firmware-options [role=option]{padding:11px 12px;border-radius:var(--radius-xs);cursor:pointer;font-size:var(--text-ui);overflow-wrap:anywhere;color:#e0e9eb;font-variant-numeric:tabular-nums}
.firmware-options [role=option]:hover,.firmware-options [aria-selected=true]{background:#0b3236;color:var(--cyan-soft)}
.firmware-options [data-unlisted]{border-top:1px solid var(--line);margin-top:4px;color:var(--muted)}

/* ---------- Dashboard choice (stage 1) ---------- */
.dashboard-choice{border:1px solid var(--line-strong);border-radius:var(--radius-lg);padding:var(--space-4);margin:22px 0}
.dashboard-choice legend{font-size:var(--text-md);padding:0 var(--space-2);color:var(--text-strong)}
.dashboard-compare{display:grid;grid-template-columns:1fr;gap:18px;margin:18px 0}
/* Each option: radio + title on row 1, description on row 2, photo across row 3. */
.dashboard-option{cursor:pointer;min-width:0;display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;row-gap:6px;align-items:start;padding:4px 12px}
.dashboard-option>input{grid-column:1;grid-row:1;align-self:center;margin:0;width:16px;height:16px}
.dashboard-option>strong{grid-column:2;grid-row:1;align-self:center;display:block;font-size:15px;line-height:20px;color:var(--text-strong)}
.dashboard-option>span{grid-column:2;grid-row:2;display:block;font-size:var(--text-sm);line-height:1.6;color:var(--muted)}
.dashboard-option>.cockpit-screen-crop,.dashboard-option>img{grid-column:1/-1;grid-row:3;margin:12px 0 0}
.user-cockpit-photo{display:block;width:100%;height:auto;border-radius:var(--radius-sm)}
/* Virtual Cockpit is a card; selected = 2px cyan border + tinted fill (padding drops 1px so nothing moves). */
.dashboard-option.option-digital{padding:12px;background:var(--surface-cyan);border:1px solid #17363c;border-radius:var(--radius-lg)}
.dashboard-option.option-digital:hover{border-color:var(--cyan-line)}
.dashboard-option.option-digital:has(input:checked){padding:11px;border:2px solid var(--cyan);background:var(--surface-selected)}
.dashboard-option.option-digital:has(input:checked)>strong{color:var(--cyan)}
.dashboard-option.option-digital input{accent-color:var(--cyan)}
/* Traditional cockpit is not supported: selected text turns red. */
.dashboard-option.option-analog input{accent-color:var(--danger-line)}
/* The traditional-cockpit photo carries a third-party watermark. It was never visible before
   (an old grid bug squeezed it to 20px), so it stays hidden until an owned photo replaces it. */
.dashboard-option.option-analog>img{display:none}
.dashboard-option.option-analog:has(input:checked)>strong,.dashboard-option.option-analog:has(input:checked)>span{color:var(--danger)}
/* "Not sure" = amber. */
.dashboard-choice>.check{display:grid;grid-template-columns:20px minmax(0,1fr);gap:0 10px;align-items:center;padding:0 12px}
.dashboard-choice>.check>input{margin:0;width:16px;height:16px;accent-color:var(--unsure-line)}
.dashboard-choice>.check>span{line-height:20px}
.dashboard-choice>.check:has(input:checked),.dashboard-choice>.check:has(input:checked)>span{color:var(--unsure)}
#dashboardResult{font-size:var(--text-ui);color:var(--muted);margin:14px 0}
.dashboard-choice:has(input[value="unknown"]:checked) #dashboardResult{color:var(--unsure);border-left:3px solid var(--unsure-line);background:var(--unsure-bg);padding:12px 14px;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
#traditionalResult:not(:empty){font-size:var(--text-ui);color:var(--danger);border-left:3px solid var(--danger-line);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:12px 14px;margin:0 0 16px;background:var(--danger-bg)}
#dashboardResult:empty,#traditionalResult:empty{display:none}
.readiness-item{border-top:1px solid var(--line);padding:9px 0 16px}
.readiness-item details{margin:5px 0 0 29px}

/* ---------- Card and licence panels (stage 2) ---------- */
.desktop-preparation{position:relative;margin:22px 0;padding:var(--space-5);border:1px solid var(--cyan-line);background:var(--surface-cyan);border-radius:var(--radius-lg)}
#panel .desktop-preparation h3{margin-top:0}
.desktop-preparation ol{padding-left:22px}
.license-price{font:600 44px/1.1 var(--font-display);letter-spacing:-1px;margin:var(--space-5) 0;color:var(--cyan)}
.license-price small{font:400 var(--text-ui) var(--font);letter-spacing:0;color:var(--muted)}
.activation-details{padding:var(--space-4);border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:#0a0e11}
#panel .activation-details h3{margin-top:0}
.activation-details h3+p{font:600 var(--text-md) var(--font);letter-spacing:1.5px;color:var(--cyan);font-variant-numeric:tabular-nums}
.activation-details .button-secondary{margin-top:10px}
#checkoutStatus .notice{margin:18px 0 0}

/* ---------- Small screens ---------- */
@media(max-width:760px){
.feature-overview{grid-template-columns:1fr;gap:25px}.overview-identity h2{font-size:38px;letter-spacing:-1.2px}.overview-identity .intro{max-width:420px}
.overview-cockpit{max-width:330px;margin:15px auto 0}.overview-blocks{gap:10px}.overview-block{padding:15px 12px}.overview-block h3{font-size:var(--text-ui)}
}
@media(max-width:700px){
.layout{grid-template-columns:1fr;gap:18px}
nav{flex-direction:row;overflow:auto}nav button{min-width:150px;padding:10px;border-left:0;border-bottom:3px solid transparent;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
nav button[aria-current=step]{border-bottom-color:var(--cyan)}
nav button[aria-current=step]::after{display:none}
#panel{padding:22px}#panel::before{left:22px}.progress{flex-wrap:wrap}progress{min-width:100px}
.welcome-screen{justify-content:flex-start;padding-top:22px}.welcome-brand{margin-bottom:var(--space-3)}.welcome-brand .brand-logo{width:200px}
.welcome-actions{flex-direction:column;gap:10px;margin-top:18px}.welcome-start{width:100%;text-align:center}.welcome-actions p{text-align:center}
.setup-topbar{padding:18px 0}.setup-wordmark .brand-logo{height:20px}
.feature-slide{grid-template-columns:1fr;gap:22px;padding:12px 0 24px}
.feature-copy h2{font-size:38px;letter-spacing:-1.2px}.feature-copy .intro{min-height:0}
.feature-art{max-width:480px;width:100%;margin:auto;padding:10px 7px}.feature-art svg{max-height:220px}
}
@media(max-width:460px){.readiness-item details{margin-left:0}}
/* Phones: 15 ticks can't get usable targets, so show "3 of 15" between larger arrows. */
@media(max-width:480px){
.feature-controls{grid-template-columns:auto 1fr}
.feature-dots{grid-column:2;justify-content:flex-end;gap:var(--space-1)}
.feature-controls .feature-dot{display:none}
.feature-count{display:block}
.feature-controls .feature-arrow{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){.feature-track{scroll-behavior:auto}*{transition-duration:0s!important}}