1/*
   2 * impeccable.style — Renaissance Redesign
   3 *
   4 * Editorial precision meets fluid motion.
   5 * Light, high-contrast, typographically bold.
   6 */
   7
   8/* Shared design tokens + minimal reset */
   9@import "./tokens.css";
  10
  11/* Section partials (landing page only) */
  12@import "./problem-section.css";
  13@import "./workflow.css";
  14@import "./live-mode.css";
  15@import "./gallery.css";
  16@import "./skill-demos.css";
  17
  18
  19/* ============================================
  20   SKIP LINK (Accessibility)
  21   ============================================ */
  22
  23.skip-link {
  24  position: absolute;
  25  top: -100%;
  26  left: 50%;
  27  transform: translateX(-50%);
  28  z-index: 10000;
  29  padding: var(--spacing-sm) var(--spacing-lg);
  30  background: var(--color-ink);
  31  color: var(--color-paper);
  32  font-weight: 600;
  33  text-decoration: none;
  34  border-radius: 0 0 8px 8px;
  35  transition: top 0.2s ease;
  36}
  37
  38.skip-link:focus {
  39  top: 0;
  40  outline: 2px solid var(--color-accent);
  41  outline-offset: 2px;
  42}
  43
  44/* ============================================
  45   FLOATING BOTTOM NAV
  46   ============================================ */
  47
  48.section-nav {
  49  position: fixed;
  50  bottom: var(--spacing-md);
  51  left: 50%;
  52  transform: translateX(-50%) translateY(20px);
  53  z-index: 100;
  54  display: flex;
  55  align-items: center;
  56  gap: 2px;
  57  padding: 4px;
  58  background: oklch(98% 0 0 / 0.85);
  59  backdrop-filter: blur(12px);
  60  -webkit-backdrop-filter: blur(12px);
  61  border: 1px solid var(--color-mist);
  62  border-radius: 100px;
  63  box-shadow: 0 4px 24px -4px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
  64  opacity: 0;
  65  pointer-events: none;
  66  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  67}
  68
  69.section-nav.is-visible {
  70  opacity: 1;
  71  pointer-events: auto;
  72  transform: translateX(-50%) translateY(0);
  73}
  74
  75.section-nav-item {
  76  display: flex;
  77  align-items: center;
  78  gap: 4px;
  79  padding: 8px 12px;
  80  text-decoration: none;
  81  border-radius: 100px;
  82  transition: background 0.2s ease, color 0.2s ease;
  83}
  84
  85.section-nav-item:hover {
  86  background: var(--color-mist);
  87  text-decoration: none;
  88}
  89
  90.section-nav-item.is-active {
  91  background: var(--color-ink);
  92}
  93
  94.section-nav-item.is-active .section-nav-num {
  95  color: var(--color-paper);
  96}
  97
  98.section-nav-item.is-active .section-nav-label {
  99  color: var(--color-paper);
 100}
 101
 102.section-nav-num {
 103  font-family: var(--font-mono);
 104  font-size: 0.5625rem;
 105  font-weight: 500;
 106  color: var(--color-ash);
 107  letter-spacing: 0.02em;
 108  transition: color 0.2s ease;
 109}
 110
 111.section-nav-label {
 112  font-family: var(--font-body);
 113  font-size: 0.6875rem;
 114  font-weight: 500;
 115  color: var(--color-charcoal);
 116  transition: color 0.2s ease;
 117  white-space: nowrap;
 118}
 119
 120@media (max-width: 700px) {
 121  .section-nav-label {
 122    display: none;
 123  }
 124  .section-nav-item {
 125    padding: 8px 10px;
 126  }
 127}
 128
 129@media (max-width: 400px) {
 130  .section-nav-item {
 131    padding: 8px;
 132  }
 133
 134  .section-nav-num {
 135    font-size: 0.625rem;
 136  }
 137}
 138
 139
 140/* ============================================
 141   BASE STYLES
 142   ============================================ */
 143
 144html {
 145  -webkit-font-smoothing: antialiased;
 146  -moz-osx-font-smoothing: grayscale;
 147  text-rendering: optimizeLegibility;
 148  overflow-x: clip; /* Prevent horizontal scroll without breaking position:sticky */
 149}
 150
 151body {
 152  font-family: var(--font-body);
 153  font-size: 16px;
 154  line-height: 1.625;
 155  color: var(--color-text);
 156  background: var(--color-paper);
 157  overflow-x: clip;
 158  min-height: 100vh;
 159  min-height: 100dvh;
 160}
 161
 162h1, h2, h3, h4, h5, h6 {
 163  font-family: var(--font-display);
 164  font-weight: 400;
 165  line-height: 1.1;
 166  letter-spacing: -0.02em;
 167  color: var(--color-ink);
 168}
 169
 170a {
 171  color: var(--color-accent);
 172  text-decoration: underline;
 173  text-decoration-thickness: 1px;
 174  text-underline-offset: 2px;
 175  transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out);
 176}
 177
 178a:hover {
 179  color: var(--color-accent-hover);
 180  text-decoration-thickness: 2px;
 181}
 182
 183/* Remove underline for buttons styled as links */
 184.btn,
 185.footer-logo,
 186[class*="nav-item"] {
 187  text-decoration: none;
 188}
 189
 190strong {
 191  font-weight: 600;
 192  color: var(--color-ink);
 193}
 194
 195code {
 196  font-family: var(--font-mono);
 197  font-size: 0.9em;
 198  padding: 0.15em 0.4em;
 199  background: var(--color-accent-dim);
 200  color: var(--color-accent);
 201  border-radius: 4px;
 202}
 203
 204::selection {
 205  background: var(--color-accent-soft);
 206  color: var(--color-ink);
 207}
 208
 209/* ============================================
 210   GRAIN OVERLAY
 211   ============================================ */
 212
 213.grain-overlay {
 214  position: fixed;
 215  inset: 0;
 216  pointer-events: none;
 217  z-index: 9999;
 218  opacity: 0.03;
 219  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
 220  background-repeat: repeat;
 221}
 222
 223/* ============================================
 224   LAYOUT
 225   ============================================ */
 226
 227.site-content {
 228  max-width: var(--width-max);
 229  margin: 0 auto;
 230  padding: 0 var(--spacing-lg);
 231}
 232
 233@media (max-width: 768px) {
 234  .site-content {
 235    padding: 0 var(--spacing-md);
 236  }
 237}
 238
 239/* ============================================
 240   SECTION HEADERS
 241   ============================================ */
 242
 243.section-header {
 244  margin-bottom: var(--spacing-lg);
 245  position: relative;
 246}
 247
 248.section-number {
 249  display: block;
 250  font-family: var(--font-mono);
 251  font-size: 0.625rem;
 252  font-weight: 500;
 253  letter-spacing: 0.05em;
 254  color: var(--color-ash);
 255  margin-bottom: var(--spacing-xs);
 256  text-transform: uppercase;
 257}
 258
 259.section-title {
 260  font-size: clamp(1.75rem, 4vw, 2.5rem);
 261  font-weight: 400;
 262  line-height: 1.2;
 263  margin: 0;
 264}
 265
 266.section-subtitle {
 267  font-size: 1rem;
 268  line-height: 1.6;
 269  color: var(--color-charcoal);
 270  margin-top: var(--spacing-sm);
 271  max-width: 55ch;
 272}
 273
 274.cheatsheet-link {
 275  color: var(--color-accent);
 276  text-decoration: none;
 277  font-size: 0.875rem;
 278  margin-left: 0.5em;
 279}
 280
 281.cheatsheet-link:hover {
 282  text-decoration: underline;
 283}
 284
 285.section-lead {
 286  font-size: 1rem;
 287  line-height: 1.6;
 288  color: var(--color-charcoal);
 289  max-width: 55ch;
 290  margin-bottom: var(--spacing-lg);
 291}
 292
 293/* ============================================
 294   HERO SECTION - Combined Layout
 295   ============================================ */
 296
 297.hero-combined {
 298  position: relative;
 299  display: flex;
 300  flex-direction: column;
 301  justify-content: center;
 302  min-height: 100vh;
 303  min-height: 100dvh;
 304  padding: var(--spacing-lg) 0 var(--spacing-2xl);
 305  background: var(--color-paper);
 306}
 307
 308.github-link {
 309  position: absolute;
 310  top: var(--spacing-md);
 311  right: var(--spacing-lg);
 312  z-index: 10;
 313  color: var(--color-ash);
 314  transition: color 0.2s ease;
 315  display: flex;
 316  align-items: center;
 317  gap: 6px;
 318  text-decoration: none;
 319}
 320
 321.github-link:hover {
 322  color: var(--color-ink);
 323  text-decoration: none;
 324}
 325
 326.github-stars {
 327  font-family: var(--font-mono);
 328  font-size: 0.75rem;
 329  font-weight: 500;
 330  color: var(--color-ash);
 331  transition: color 0.2s ease;
 332}
 333
 334.github-link:hover .github-stars {
 335  color: var(--color-ink);
 336}
 337
 338.hero-combined-container {
 339  max-width: var(--width-max);
 340  margin: 0 auto;
 341  padding: 0 var(--spacing-lg);
 342  display: grid;
 343  grid-template-columns: 1fr 1fr;
 344  gap: var(--spacing-xl);
 345  align-items: center;
 346  width: 100%;
 347}
 348
 349@media (max-width: 1024px) {
 350  .hero-combined-container {
 351    grid-template-columns: 1fr;
 352    gap: var(--spacing-lg);
 353    text-align: center;
 354  }
 355}
 356
 357@media (max-width: 768px) {
 358  .hero-combined-right {
 359    order: -1;
 360    padding-top: var(--spacing-xl);
 361  }
 362
 363  .hero-combined-container {
 364    gap: var(--spacing-md);
 365  }
 366
 367  .hero-combined-left {
 368    gap: var(--spacing-sm);
 369    padding-top: var(--spacing-md);
 370  }
 371
 372  .hero-hook-text,
 373  .hero-included-box,
 374  .hero-cta-group {
 375    margin-top: var(--spacing-xs);
 376  }
 377}
 378
 379.hero-combined-left {
 380  display: flex;
 381  flex-direction: column;
 382  gap: var(--spacing-md);
 383}
 384
 385@media (max-width: 1024px) {
 386  .hero-combined-left {
 387    align-items: center;
 388  }
 389}
 390
 391.hero-title-combined {
 392  font-family: var(--font-display);
 393  font-size: clamp(2.5rem, 7vw, 4.5rem);
 394  font-weight: 300;
 395  font-style: italic;
 396  line-height: 1;
 397  letter-spacing: -0.02em;
 398  margin: 0;
 399  color: var(--color-ink);
 400}
 401
 402.hero-tagline-combined {
 403  font-family: var(--font-display);
 404  font-size: clamp(1.125rem, 2.5vw, 1.75rem);
 405  font-weight: 400;
 406  font-style: italic;
 407  line-height: 1.3;
 408  margin: 0;
 409  color: var(--color-charcoal);
 410}
 411
 412.hero-hook-text {
 413  font-size: 1rem;
 414  line-height: 1.6;
 415  color: var(--color-charcoal);
 416  max-width: 45ch;
 417  margin: 0;
 418}
 419
 420.hero-hook-text--short {
 421  display: none;
 422}
 423
 424@media (max-width: 768px) {
 425  .hero-hook-text--full {
 426    display: none;
 427  }
 428
 429  .hero-hook-text--short {
 430    display: block;
 431  }
 432}
 433
 434/* Hero Included Box - Subtle "What's included" */
 435.hero-included-box {
 436  display: flex;
 437  flex-direction: column;
 438  gap: 6px;
 439  padding: 10px 14px;
 440  border: 1px solid var(--color-mist);
 441  background: transparent;
 442  max-width: 45ch;
 443}
 444
 445.hero-included-title {
 446  font-family: var(--font-body);
 447  font-size: 0.5625rem;
 448  font-weight: 500;
 449  text-transform: uppercase;
 450  letter-spacing: 0.1em;
 451  color: var(--color-ash);
 452}
 453
 454.hero-included-items {
 455  display: flex;
 456  flex-wrap: wrap;
 457  align-items: center;
 458  gap: 6px;
 459  font-size: 0.8125rem;
 460  color: var(--color-charcoal);
 461  line-height: 1.5;
 462}
 463
 464.hero-included-items em {
 465  font-style: normal;
 466  font-family: var(--font-mono);
 467  font-size: 0.75rem;
 468}
 469
 470.hero-included-sep {
 471  color: var(--color-mist);
 472}
 473
 474@media (max-width: 500px) {
 475  .hero-included-items {
 476    flex-direction: column;
 477    align-items: flex-start;
 478    gap: 4px;
 479  }
 480
 481  .hero-included-sep {
 482    display: none;
 483  }
 484}
 485
 486.hero-cta-group {
 487  display: flex;
 488  align-items: center;
 489  gap: var(--spacing-lg);
 490  margin-top: var(--spacing-sm);
 491}
 492
 493@media (max-width: 600px) {
 494  .hero-cta-group {
 495    flex-direction: column;
 496    gap: var(--spacing-md);
 497  }
 498}
 499
 500.hero-cta-combined {
 501  display: inline-block;
 502  padding: var(--spacing-sm) var(--spacing-xl);
 503  font-family: var(--font-body);
 504  font-size: 0.9rem;
 505  font-weight: 500;
 506  letter-spacing: 0.05em;
 507  text-transform: uppercase;
 508  text-decoration: none;
 509  color: var(--color-paper);
 510  background: var(--color-ink);
 511  border: none;
 512  transition: transform 0.2s ease, background 0.2s ease;
 513}
 514
 515.hero-cta-combined:hover {
 516  transform: translateY(-2px);
 517  background: var(--color-accent);
 518  color: var(--color-paper);
 519}
 520
 521.hero-logos-inline {
 522  display: flex;
 523  flex-direction: column;
 524  align-items: flex-start;
 525  gap: 6px;
 526}
 527
 528.hero-logos-inline .hero-logos-label {
 529  font-size: 0.6875rem;
 530  color: var(--color-ash);
 531  letter-spacing: 0.03em;
 532}
 533
 534.hero-logos-inline .hero-logos-row {
 535  display: flex;
 536  align-items: center;
 537  gap: 8px;
 538  flex-wrap: wrap;
 539}
 540
 541.hero-logos-inline .hero-logos-row img {
 542  border-radius: 4px;
 543  opacity: 0.7;
 544  transition: opacity 0.2s ease;
 545}
 546
 547.hero-logos-inline .hero-logos-row img:hover {
 548  opacity: 1;
 549}
 550
 551.hero-combined-right {
 552  display: flex;
 553  justify-content: center;
 554}
 555
 556.hero-combined-right .split-comparison {
 557  max-width: 520px;
 558  width: 100%;
 559}
 560
 561.hero-combined-right .split-container {
 562  max-width: 100%;
 563}
 564
 565/* Bias tags at bottom of hero */
 566.hero-bias-tags {
 567  display: flex;
 568  flex-direction: column;
 569  align-items: center;
 570  gap: var(--spacing-xs);
 571  margin-top: var(--spacing-lg);
 572  padding-top: var(--spacing-md);
 573  border-top: 1px solid var(--color-mist);
 574  max-width: var(--width-max);
 575  margin-left: auto;
 576  margin-right: auto;
 577  width: 100%;
 578  padding-bottom: var(--spacing-md);
 579}
 580
 581/* ============================================
 582   PROBLEM SECTION - Clarity Lens
 583   ============================================ */
 584
 585.problem-section {
 586  padding: var(--spacing-2xl) 0;
 587  border-top: 1px solid var(--color-mist);
 588}
 589
 590.problem-content {
 591  display: grid;
 592  gap: var(--spacing-xl);
 593}
 594
 595/* Split Screen Comparison */
 596.split-comparison {
 597  position: relative;
 598  width: 100%;
 599  max-width: 600px;
 600  margin: 0 auto;
 601  padding: 20px;
 602  margin-top: -20px;
 603  margin-bottom: -20px;
 604}
 605
 606.split-container {
 607  position: relative;
 608  width: 100%;
 609  max-width: 500px;
 610  height: 380px;
 611  margin: 0 auto;
 612  border-radius: 12px;
 613  overflow: hidden;
 614  background: var(--color-cream);
 615  border: 1px solid var(--color-mist);
 616  cursor: ew-resize;
 617  user-select: none;
 618}
 619
 620.split-before,
 621.split-after {
 622  position: absolute;
 623  inset: 0;
 624  display: flex;
 625  align-items: center;
 626  justify-content: center;
 627}
 628
 629.split-before {
 630  z-index: 1;
 631}
 632
 633.split-content {
 634  width: 100%;
 635  height: 100%;
 636  display: flex;
 637  align-items: center;
 638  justify-content: center;
 639}
 640
 641.split-after {
 642  /* Angled clip-path matching divider's skewX(-10deg): top-right, bottom-left */
 643  clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%);
 644  z-index: 2;
 645  background: var(--color-paper);
 646}
 647
 648.split-divider {
 649  position: absolute;
 650  top: 0;
 651  bottom: 0;
 652  left: 50%;
 653  width: 3px;
 654  background: var(--color-accent);
 655  transform: translateX(-50%) skewX(-10deg);
 656  pointer-events: none;
 657  z-index: 3;
 658  box-shadow: 0 0 20px rgba(0,0,0,0.15);
 659}
 660
 661.split-label {
 662  position: absolute;
 663  top: 50%;
 664  left: 50%;
 665  transform: translate(-50%, -50%) skewX(10deg);
 666  font-size: 0.6875rem;
 667  font-weight: 600;
 668  letter-spacing: 0.08em;
 669  text-transform: uppercase;
 670  color: var(--color-paper);
 671  background: var(--color-accent);
 672  padding: 6px 14px;
 673  border-radius: 4px;
 674  white-space: nowrap;
 675  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
 676}
 677
 678/* Slop Card - Generic AI output */
 679.slop-card {
 680  width: 280px;
 681  height: 280px;
 682  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 50%, #ddd6fe 100%);
 683  border-radius: 16px;
 684  padding: 24px;
 685  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 686  font-family: 'Inter', system-ui, sans-serif;
 687  display: flex;
 688  flex-direction: column;
 689}
 690
 691.slop-header {
 692  display: flex;
 693  align-items: center;
 694  gap: 12px;
 695  margin-bottom: 16px;
 696}
 697
 698.slop-avatar {
 699  width: 40px;
 700  height: 40px;
 701  border-radius: 50%;
 702  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
 703  flex-shrink: 0;
 704}
 705
 706.slop-text { flex: 1; }
 707.slop-title { font-size: 14px; font-weight: 600; color: #1f2937; margin-bottom: 2px; }
 708.slop-subtitle { font-size: 12px; color: #6b7280; }
 709.slop-body { font-size: 13px; line-height: 1.5; color: #4b5563; margin-bottom: auto; flex: 1; }
 710
 711.slop-button {
 712  width: 100%;
 713  padding: 10px 20px;
 714  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
 715  color: white;
 716  border: none;
 717  border-radius: 8px;
 718  font-family: 'Inter', system-ui, sans-serif;
 719  font-size: 13px;
 720  font-weight: 500;
 721  cursor: pointer;
 722  margin-top: auto;
 723}
 724
 725/* Callout labels pointing to issues */
 726.slop-callouts {
 727  position: absolute;
 728  inset: 0;
 729  pointer-events: none;
 730}
 731
 732.slop-callout {
 733  position: absolute;
 734  font-size: 0.625rem;
 735  font-weight: 600;
 736  text-transform: uppercase;
 737  letter-spacing: 0.06em;
 738  color: var(--color-accent);
 739  background: var(--color-paper);
 740  padding: 4px 8px;
 741  border: 1px solid var(--color-accent);
 742  border-radius: 3px;
 743  white-space: nowrap;
 744  opacity: 0;
 745  animation: calloutFadeIn 0.4s var(--ease-out) forwards;
 746  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 747}
 748
 749.slop-callout[data-point="font"] {
 750  top: 15%;
 751  right: 5%;
 752  animation-delay: 0.1s;
 753}
 754
 755.slop-callout[data-point="gradient"] {
 756  top: 40%;
 757  left: 5%;
 758  animation-delay: 0.25s;
 759}
 760
 761.slop-callout[data-point="copy"] {
 762  bottom: 35%;
 763  right: 8%;
 764  animation-delay: 0.4s;
 765}
 766
 767.slop-callout[data-point="rounded"] {
 768  bottom: 12%;
 769  left: 10%;
 770  animation-delay: 0.55s;
 771}
 772
 773@keyframes calloutFadeIn {
 774  from {
 775    opacity: 0;
 776    transform: scale(0.9);
 777  }
 778  to {
 779    opacity: 1;
 780    transform: scale(1);
 781  }
 782}
 783
 784/* Impeccable Card - With Design Skills */
 785.impeccable-card {
 786  width: 280px;
 787  height: 300px;
 788  background: var(--color-paper);
 789  border: 1px solid var(--color-mist);
 790  padding: var(--spacing-lg);
 791  text-align: left;
 792  display: flex;
 793  flex-direction: column;
 794}
 795
 796.impeccable-eyebrow {
 797  font-family: var(--font-mono);
 798  font-size: 0.625rem;
 799  font-weight: 500;
 800  letter-spacing: 0.15em;
 801  text-transform: uppercase;
 802  color: var(--color-accent);
 803  margin-bottom: var(--spacing-xs);
 804}
 805
 806.impeccable-title {
 807  font-family: var(--font-display);
 808  font-size: 1.75rem;
 809  font-weight: 300;
 810  font-style: italic;
 811  color: var(--color-ink);
 812  margin-bottom: var(--spacing-sm);
 813  line-height: 1.1;
 814}
 815
 816.impeccable-body {
 817  font-size: 0.875rem;
 818  line-height: 1.6;
 819  color: var(--color-ash);
 820  margin-bottom: auto;
 821  flex: 1;
 822}
 823
 824.impeccable-button {
 825  display: inline-flex;
 826  margin-top: var(--spacing-sm);
 827  padding: 0.625rem 1.5rem;
 828  background: var(--color-ink);
 829  color: var(--color-paper);
 830  border: none;
 831  font-family: var(--font-body);
 832  font-size: 0.8125rem;
 833  font-weight: 500;
 834  letter-spacing: 0.03em;
 835  cursor: pointer;
 836  transition: all var(--duration-base) var(--ease-out);
 837  align-self: flex-start;
 838}
 839
 840.impeccable-button:hover {
 841  background: var(--color-accent);
 842}
 843
 844/* Split Labels */
 845.split-labels {
 846  display: flex;
 847  justify-content: center;
 848  gap: var(--spacing-xl);
 849  margin-top: var(--spacing-md);
 850}
 851
 852.split-label-item {
 853  display: flex;
 854  align-items: center;
 855  gap: var(--spacing-xs);
 856  font-size: 0.8125rem;
 857  color: var(--color-ash);
 858}
 859
 860@media (max-width: 768px) {
 861  .split-comparison {
 862    padding: 8px;
 863    margin-top: -8px;
 864    margin-bottom: -8px;
 865  }
 866
 867  .split-labels {
 868    display: none;
 869  }
 870}
 871
 872.split-label-dot {
 873  width: 8px;
 874  height: 8px;
 875  border-radius: 50%;
 876  background: var(--color-mist);
 877}
 878
 879.split-label-dot--accent {
 880  background: var(--color-accent);
 881}
 882
 883/* ============================================
 884   FOUNDATION SECTION
 885   ============================================ */
 886
 887.foundation-section {
 888  padding: var(--spacing-2xl) 0;
 889  border-top: 1px solid var(--color-mist);
 890}
 891
 892.foundation-content {
 893  display: grid;
 894  gap: var(--spacing-lg);
 895}
 896
 897.foundation-grid {
 898  display: flex;
 899  align-items: flex-end;
 900  height: 600px;
 901  gap: var(--spacing-sm);
 902  margin-top: -80px; /* Pull up into the header whitespace */
 903  position: relative;
 904}
 905
 906.foundation-column {
 907  flex: 1;
 908  display: flex;
 909  flex-direction: column;
 910  height: 100%;
 911  justify-content: flex-end;
 912  cursor: pointer;
 913  min-width: 0;
 914}
 915
 916.foundation-card {
 917  padding: var(--spacing-md);
 918  background: white;
 919  border: 1px solid var(--color-bg);
 920  border-radius: 12px;
 921  display: flex;
 922  flex-direction: column;
 923  height: 280px;
 924  margin-bottom: var(--spacing-xs);
 925  transition: transform var(--duration-slow) var(--ease-out-quint), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
 926  position: relative;
 927  z-index: 2;
 928  box-sizing: border-box;
 929}
 930
 931.foundation-column:hover .foundation-card {
 932  transform: translateY(-12px);
 933  border-color: var(--color-accent);
 934  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
 935}
 936
 937.foundation-plinth {
 938  width: 100%;
 939  background: repeating-linear-gradient(45deg, var(--color-bg), var(--color-bg) 2px, transparent 2px, transparent 10px);
 940  border: 1px solid var(--color-mist);
 941  border-bottom: none;
 942  border-radius: 8px 8px 0 0;
 943  transition: all var(--duration-base) var(--ease-out);
 944}
 945
 946.foundation-column:hover .foundation-plinth {
 947  background: var(--color-mist);
 948  opacity: 0.7;
 949}
 950
 951/* Plinth Heights - More dramatic steps */
 952.plinth-1 { height: 4%; }
 953.plinth-2 { height: 12%; }
 954.plinth-3 { height: 20%; }
 955.plinth-4 { height: 28%; }
 956.plinth-5 { height: 36%; }
 957.plinth-6 { height: 44%; }
 958.plinth-7 { height: 52%; }
 959
 960.foundation-card-viz {
 961  height: 52px;
 962  display: flex;
 963  align-items: center;
 964  justify-content: flex-start;
 965  color: var(--color-ink);
 966  margin-bottom: var(--spacing-md);
 967}
 968
 969.foundation-card-header {
 970  display: flex;
 971  align-items: baseline;
 972  gap: var(--spacing-xs);
 973  margin-bottom: 8px;
 974  overflow: hidden;
 975}
 976
 977.foundation-card-label {
 978  font-family: var(--font-display);
 979  font-size: 1.35rem;
 980  color: var(--color-ink);
 981  line-height: 1.1;
 982}
 983
 984.foundation-card-count {
 985  font-family: var(--font-mono);
 986  font-size: 0.7rem;
 987  color: var(--color-accent);
 988  flex-shrink: 0;
 989}
 990
 991.foundation-card-detail {
 992  font-size: 0.875rem;
 993  color: var(--color-ash);
 994  line-height: 1.4;
 995  margin: auto 0 0 0;
 996}
 997
 998.foundation-svg {
 999  width: 44px;
1000  height: 44px;
1001}
1002
1003/* Typography & Spatial (Breathing draw + full draw on hover) */
1004.anim-draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw-breathe 4s ease-in-out infinite; }
1005.foundation-column:hover .anim-draw { animation: draw-in 0.8s var(--ease-out) forwards; }
1006.anim-draw-delay { stroke-dasharray: 100; stroke-dashoffset: 100; }
1007.foundation-column:hover .anim-draw-delay { animation: draw-in 1s var(--ease-out) 0.2s forwards; }
1008@keyframes draw-breathe { 0%, 100% { stroke-dashoffset: 100; } 50% { stroke-dashoffset: 40; } }
1009@keyframes draw-in { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
1010
1011/* Color & Contrast (Breathing pulse + spread on hover) */
1012.anim-move-x { animation: pulse-x 3s ease-in-out infinite; }
1013.foundation-column:hover .anim-move-x { animation: spread-x 0.6s var(--ease-in-out) forwards; }
1014.anim-move-x-opp { animation: pulse-x-opp 3s ease-in-out infinite; }
1015.foundation-column:hover .anim-move-x-opp { animation: spread-x-opp 0.6s var(--ease-in-out) forwards; }
1016.anim-fade-in { opacity: 0; transition: opacity 0.6s var(--ease-in-out); }
1017.foundation-column:hover .anim-fade-in { opacity: 1; }
1018@keyframes pulse-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.5px); } }
1019@keyframes pulse-x-opp { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-1.5px); } }
1020@keyframes spread-x { from { transform: translateX(0); } to { transform: translateX(4px); } }
1021@keyframes spread-x-opp { from { transform: translateX(0); } to { transform: translateX(-4px); } }
1022
1023/* Responsive (Staggered reflow from desktop 2-col to mobile stack) */
1024.anim-res-frame, .anim-res-img, .anim-res-title, .anim-res-line-1, .anim-res-line-2 {
1025  transform-box: fill-box;
1026  transform-origin: 50% 50%;
1027  transition: transform 0.4s var(--ease-in-out);
1028}
1029.anim-res-frame { transition-delay: 0s; }
1030.anim-res-img { transition-delay: 0s; }
1031.anim-res-title { transition-delay: 0s; }
1032.anim-res-line-1 { transition-delay: 0s; }
1033.anim-res-line-2 { transition-delay: 0s; }
1034.foundation-column:hover .anim-res-frame { transform: scaleX(0.57) scaleY(1.17); transition-delay: 0s; }
1035.foundation-column:hover .anim-res-img { transform: translate(6px, -4px) scale(0.65); transition-delay: 0.05s; }
1036.foundation-column:hover .anim-res-title { transform: translate(-7px, 6px) scaleX(0.65); transition-delay: 0.1s; }
1037.foundation-column:hover .anim-res-line-1 { transform: translate(-7px, 4.75px) scaleX(0.65); transition-delay: 0.15s; }
1038.foundation-column:hover .anim-res-line-2 { transform: translate(-6px, 4.25px) scaleX(0.6); transition-delay: 0.2s; }
1039
1040/* Interaction (Gentle wobble + full toggle on hover) */
1041.anim-toggle-move { animation: toggle-wobble 3s ease-in-out infinite; }
1042.foundation-column:hover .anim-toggle-move { animation: toggle-snap 0.35s var(--ease-in-out) forwards; }
1043@keyframes toggle-wobble { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
1044@keyframes toggle-snap { from { transform: translateX(0); fill: var(--color-mist); } to { transform: translateX(8px); fill: var(--color-accent); } }
1045
1046/* Motion (Gentle bob + full bounce on hover) */
1047.anim-squash-ball { transform-origin: 20px 20px; animation: ball-bob 2.5s ease-in-out infinite; }
1048.foundation-column:hover .anim-squash-ball { animation: bounce-ball 1.5s linear infinite; }
1049@keyframes ball-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
1050@keyframes bounce-ball {
1051  0% { transform: translateY(0); }
1052  6% { transform: translateY(0.5px); }
1053  18% { transform: translateY(4px); }
1054  35% { transform: translateY(12px); }
1055  42% { transform: translateY(12px) scaleX(1.3) scaleY(0.6); }
1056  48% { transform: translateY(12px); }
1057  65% { transform: translateY(4px); }
1058  78% { transform: translateY(0.5px); }
1059  88%, 100% { transform: translateY(0); }
1060}
1061
1062/* UX Writing (Cursor always blinks) */
1063.anim-blink { animation: blink-key 1s step-end infinite; }
1064@keyframes blink-key { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
1065
1066/* Tablet: 3-col grid (switch before stairs clip) */
1067@media (max-width: 1200px) {
1068  .foundation-grid {
1069    display: grid;
1070    grid-template-columns: repeat(3, 1fr);
1071    height: auto;
1072    gap: var(--spacing-md);
1073    margin-top: var(--spacing-xl);
1074  }
1075  .foundation-column { height: auto; }
1076  .foundation-card { height: auto; min-height: 200px; }
1077  .foundation-plinth { display: none; }
1078  .foundation-column:hover .foundation-card { transform: translateY(-4px); }
1079
1080  /* Enable hover animations on card hover for grid */
1081  .foundation-card:hover .anim-draw { animation: draw-in 0.8s var(--ease-out) forwards; }
1082  .foundation-card:hover .anim-draw-delay { animation: draw-in 1s var(--ease-out) 0.2s forwards; }
1083  .foundation-card:hover .anim-move-x { animation: spread-x 0.6s var(--ease-in-out) forwards; }
1084  .foundation-card:hover .anim-move-x-opp { animation: spread-x-opp 0.6s var(--ease-in-out) forwards; }
1085  .foundation-card:hover .anim-fade-in { opacity: 1; }
1086  .foundation-card:hover .anim-res-frame { transform: scaleX(0.57) scaleY(1.17); }
1087  .foundation-card:hover .anim-res-img { transform: translate(6px, -4px) scale(0.65); }
1088  .foundation-card:hover .anim-res-title { transform: translate(-7px, 6px) scaleX(0.65); }
1089  .foundation-card:hover .anim-res-line-1 { transform: translate(-7px, 4.75px) scaleX(0.65); }
1090  .foundation-card:hover .anim-res-line-2 { transform: translate(-6px, 4.25px) scaleX(0.6); }
1091  .foundation-card:hover .anim-toggle-move { animation: toggle-snap 0.35s var(--ease-in-out) forwards; }
1092  .foundation-card:hover .anim-squash-ball { animation: bounce-ball 1.5s linear infinite; }
1093}
1094
1095/* Small tablet: 2-col grid */
1096@media (max-width: 768px) {
1097  .foundation-grid { grid-template-columns: repeat(2, 1fr); }
1098}
1099
1100/* Small mobile: compact horizontal cards */
1101@media (max-width: 520px) {
1102  .foundation-grid {
1103    grid-template-columns: 1fr;
1104    gap: var(--spacing-sm);
1105  }
1106  .foundation-card {
1107    display: grid;
1108    grid-template-columns: auto 1fr;
1109    grid-template-rows: auto auto;
1110    align-items: start;
1111    min-height: auto;
1112    padding: var(--spacing-sm) var(--spacing-md);
1113    gap: 0 var(--spacing-md);
1114  }
1115  .foundation-card-viz {
1116    grid-row: 1 / -1;
1117    align-self: center;
1118    height: auto;
1119    margin-bottom: 0;
1120  }
1121  .foundation-card-header { margin-bottom: 2px; }
1122  .foundation-card-label { font-size: 1.1rem; }
1123  .foundation-card-detail { margin: 0; font-size: 0.8125rem; }
1124}
1125
1126.foundation-cta {
1127  text-align: center;
1128}
1129
1130.foundation-cta-text {
1131  font-size: 0.9375rem;
1132  color: var(--color-charcoal);
1133  margin: 0;
1134}
1135
1136.foundation-cta-text code {
1137  font-family: var(--font-mono);
1138  font-size: 0.875rem;
1139  color: var(--color-ink);
1140}
1141
1142.foundation-slash {
1143  color: var(--color-accent);
1144}
1145
1146/* ============================================
1147   LANGUAGE SECTION (wraps periodic table + commands)
1148   ============================================ */
1149
1150.language-section {
1151  padding: var(--spacing-2xl) 0;
1152  border-top: 1px solid var(--color-mist);
1153}
1154
1155.language-content {
1156  display: grid;
1157  gap: var(--spacing-sm);
1158}
1159
1160/* Grid and flex items default to min-width: auto, which lets them expand to
1161   fit their intrinsic content. The mobile commands layout has a split-compare
1162   demo wide enough to blow out the entire section on mobile (~2400px wide).
1163   Cascade min-width: 0 through every layer of the language section so the
1164   intrinsic width can't propagate up the parent chain. */
1165.language-section,
1166.language-section * {
1167  min-width: 0;
1168}
1169
1170.language-content .section-lead {
1171  margin-bottom: 0;
1172}
1173
1174.commands-subsection {
1175  display: grid;
1176  gap: var(--spacing-md);
1177}
1178
1179.commands-header-subtitle {
1180  font-size: 0.9375rem;
1181  color: var(--color-warm-gray);
1182  margin: 0;
1183}
1184
1185/* ============================================
1186   VISUAL MODE SECTION
1187   ============================================ */
1188
1189.visual-mode-section {
1190  padding: var(--spacing-2xl) 0;
1191  border-top: 1px solid var(--color-mist);
1192}
1193
1194.visual-mode-content {
1195  display: grid;
1196  gap: var(--spacing-lg);
1197}
1198
1199.visual-mode-demo {
1200  display: grid;
1201  grid-template-columns: 3fr 2fr;
1202  gap: var(--spacing-xl);
1203  align-items: start;
1204}
1205
1206@media (max-width: 900px) {
1207  .visual-mode-demo {
1208    grid-template-columns: 1fr;
1209  }
1210}
1211
1212/* Browser chrome frame for the iframe */
1213.visual-mode-preview {
1214  border-radius: 8px;
1215  overflow: hidden;
1216  border: 1px solid var(--color-mist);
1217  box-shadow: 0 8px 30px -6px rgba(0,0,0,0.12);
1218}
1219
1220.visual-mode-preview-header {
1221  display: flex;
1222  align-items: center;
1223  gap: 6px;
1224  padding: 10px 14px;
1225  background: var(--color-cream);
1226  border-bottom: 1px solid var(--color-mist);
1227}
1228
1229.visual-mode-preview-dot {
1230  width: 10px;
1231  height: 10px;
1232  border-radius: 50%;
1233}
1234
1235.visual-mode-preview-dot.red { background: #ff5f56; }
1236.visual-mode-preview-dot.yellow { background: #ffbd2e; }
1237.visual-mode-preview-dot.green { background: #27c93f; }
1238
1239.visual-mode-preview-title {
1240  margin-left: auto;
1241  font-family: var(--font-mono);
1242  font-size: 0.75rem;
1243  color: var(--color-ash);
1244}
1245
1246.visual-mode-iframe {
1247  display: block;
1248  width: 100%;
1249  height: 480px;
1250  border: none;
1251  background: white;
1252}
1253
1254/* Details sidebar — editorial blocks, no cards.
1255   The live detection overlay (left iframe) is the visual anchor for the
1256   whole section; the right column should be quiet text + a single image
1257   for the Chrome extension CTA. Hierarchy via typography + space, not
1258   bordered containers. */
1259.visual-mode-details {
1260  display: flex;
1261  flex-direction: column;
1262  gap: var(--spacing-xl);
1263  padding: var(--spacing-md) 0;
1264}
1265
1266.visual-mode-feature {
1267  display: flex;
1268  flex-direction: column;
1269  gap: var(--spacing-xs);
1270}
1271
1272.visual-mode-feature-label {
1273  display: block;
1274  font-family: var(--font-mono);
1275  font-size: 0.6875rem;
1276  font-weight: 600;
1277  text-transform: uppercase;
1278  letter-spacing: 0.08em;
1279  color: var(--color-accent);
1280}
1281
1282.visual-mode-feature p {
1283  font-size: 0.9375rem;
1284  line-height: 1.55;
1285  color: var(--color-charcoal);
1286  margin: 0;
1287}
1288
1289.visual-mode-feature code {
1290  font-family: var(--font-mono);
1291  font-size: 0.875rem;
1292  color: var(--color-ink);
1293}
1294
1295/* ============================================
1296   SOLUTION SECTION (legacy styles for periodic table)
1297   ============================================ */
1298
1299.solution-section {
1300  padding: var(--spacing-2xl) 0;
1301}
1302
1303.solution-content {
1304  display: grid;
1305  gap: var(--spacing-lg);
1306}
1307
1308.solution-content .section-lead {
1309  margin-bottom: 0;
1310}
1311
1312/* Two-pillar visual layout */
1313.solution-visual {
1314  display: grid;
1315  grid-template-columns: 1fr auto 1fr;
1316  gap: var(--spacing-lg);
1317  align-items: stretch;
1318}
1319
1320@media (max-width: 900px) {
1321  .solution-visual {
1322    grid-template-columns: 1fr;
1323    gap: var(--spacing-md);
1324  }
1325}
1326
1327/* Interactive Framework Viz - Periodic Table */
1328.solution-visual-interactive {
1329  width: 100%;
1330  min-height: 380px;
1331  background: var(--color-paper);
1332  border: 1px solid var(--color-mist);
1333  border-radius: 8px;
1334  position: relative;
1335  overflow: visible;
1336}
1337
1338.solution-pillar {
1339  background: var(--color-cream);
1340  border: 1px solid var(--color-mist);
1341  padding: var(--spacing-lg);
1342  transition: all var(--duration-base) var(--ease-out);
1343}
1344
1345.solution-pillar:hover {
1346  border-color: var(--color-accent);
1347  transform: translateY(-4px);
1348  box-shadow: 0 20px 60px var(--color-accent-dim);
1349}
1350
1351.pillar-header {
1352  text-align: center;
1353  margin-bottom: var(--spacing-lg);
1354  padding-bottom: var(--spacing-md);
1355  border-bottom: 1px solid var(--color-mist);
1356}
1357
1358.pillar-icon {
1359  display: inline-flex;
1360  align-items: center;
1361  justify-content: center;
1362  width: 56px;
1363  height: 56px;
1364  border-radius: 50%;
1365  background: var(--color-accent-dim);
1366  color: var(--color-accent);
1367  margin-bottom: var(--spacing-sm);
1368}
1369
1370.pillar-title {
1371  font-family: var(--font-display);
1372  font-size: 1.75rem;
1373  font-weight: 400;
1374  margin: 0 0 var(--spacing-xs);
1375}
1376
1377.pillar-subtitle {
1378  font-size: 0.875rem;
1379  color: var(--color-ash);
1380  margin: 0;
1381}
1382
1383.pillar-content {
1384  display: flex;
1385  flex-direction: column;
1386  gap: var(--spacing-sm);
1387}
1388
1389.pillar-item {
1390  display: flex;
1391  justify-content: space-between;
1392  align-items: center;
1393  padding: var(--spacing-sm);
1394  background: var(--color-paper);
1395  border-radius: 4px;
1396  transition: all var(--duration-fast) var(--ease-out);
1397}
1398
1399.pillar-item:hover {
1400  background: var(--color-accent-dim);
1401}
1402
1403.pillar-item-name {
1404  font-weight: 500;
1405  color: var(--color-ink);
1406  font-size: 0.9375rem;
1407}
1408
1409.pillar-item-code {
1410  font-family: var(--font-mono);
1411  font-size: 0.875rem;
1412  font-weight: 500;
1413  color: var(--color-accent);
1414  background: transparent;
1415  padding: 0;
1416}
1417
1418.pillar-item-desc {
1419  font-size: 0.75rem;
1420  color: var(--color-ash);
1421}
1422
1423.pillar-item--more {
1424  justify-content: center;
1425  font-size: 0.8125rem;
1426  font-weight: 500;
1427  color: var(--color-accent);
1428  background: transparent;
1429  border: 1px dashed var(--color-mist);
1430}
1431
1432/* Connector between pillars */
1433.solution-connector {
1434  display: flex;
1435  align-items: center;
1436  justify-content: center;
1437}
1438
1439.connector-plus {
1440  font-family: var(--font-display);
1441  font-size: 3rem;
1442  font-weight: 300;
1443  color: var(--color-accent);
1444  opacity: 0.5;
1445}
1446
1447@media (max-width: 900px) {
1448  .solution-connector {
1449    padding: var(--spacing-sm) 0;
1450  }
1451  
1452  .connector-plus {
1453    font-size: 2rem;
1454  }
1455}
1456
1457
1458/* ============================================
1459   SKILLS SECTION
1460   ============================================ */
1461
1462.skills-section {
1463  padding: var(--spacing-2xl) 0;
1464  border-top: 1px solid var(--color-mist);
1465}
1466
1467.skills-gallery {
1468  display: grid;
1469  grid-template-columns: 200px 1fr;
1470  gap: var(--spacing-xl);
1471  align-items: start;
1472}
1473
1474@media (max-width: 968px) {
1475  .skills-gallery {
1476    grid-template-columns: 1fr;
1477    gap: var(--spacing-lg);
1478  }
1479}
1480
1481.skills-nav {
1482  display: flex;
1483  flex-direction: column;
1484  gap: 2px;
1485  position: sticky;
1486  top: var(--spacing-lg);
1487}
1488
1489@media (max-width: 968px) {
1490  .skills-nav {
1491    flex-direction: row;
1492    flex-wrap: wrap;
1493    gap: var(--spacing-xs);
1494    position: static;
1495  }
1496}
1497
1498.skill-nav-item {
1499  padding: var(--spacing-sm) var(--spacing-md);
1500  background: transparent;
1501  border: none;
1502  border-left: 2px solid transparent;
1503  color: var(--color-ash);
1504  font-family: var(--font-body);
1505  font-size: 0.9375rem;
1506  font-weight: 400;
1507  cursor: pointer;
1508  transition: all 0.2s ease;
1509  text-align: left;
1510  text-decoration: none;
1511  display: block;
1512}
1513
1514.skill-nav-item:hover {
1515  color: var(--color-text);
1516  background: var(--color-cream);
1517}
1518
1519.skill-nav-item.active {
1520  color: var(--color-accent);
1521  border-left-color: var(--color-accent);
1522  background: var(--color-accent-dim);
1523  font-weight: 500;
1524}
1525
1526@media (max-width: 968px) {
1527  .skill-nav-item {
1528    border-left: none;
1529    border-bottom: 2px solid transparent;
1530    padding: var(--spacing-xs) var(--spacing-md);
1531  }
1532  
1533  .skill-nav-item.active {
1534    border-bottom-color: var(--color-accent);
1535  }
1536}
1537
1538.skills-showcase {
1539  display: grid;
1540  grid-template-columns: 1.2fr 1fr;
1541  gap: var(--spacing-lg);
1542  align-items: start;
1543}
1544
1545@media (max-width: 1100px) {
1546  .skills-showcase {
1547    grid-template-columns: 1fr;
1548  }
1549}
1550
1551.loading-state {
1552  padding: var(--spacing-xl);
1553  text-align: center;
1554  color: var(--color-ash);
1555  font-style: italic;
1556}
1557
1558/* ============================================
1559   MOBILE COMMANDS LAYOUT
1560   ============================================ */
1561
1562.mobile-commands-layout {
1563  display: none;
1564}
1565
1566@media (max-width: 900px) {
1567  .mobile-commands-layout {
1568    display: flex;
1569    flex-direction: column;
1570    gap: var(--spacing-md);
1571    /* Without min-width: 0, the flex container expands to fit any intrinsically
1572       wide descendant (the split-compare demo blows it out to ~2400px otherwise).
1573       The same constraint cascades to direct children via the next rule. */
1574    min-width: 0;
1575    width: 100%;
1576  }
1577
1578  .mobile-commands-layout > * {
1579    min-width: 0;
1580    max-width: 100%;
1581  }
1582
1583  .commands-container {
1584    display: none;
1585  }
1586}
1587
1588.mobile-carousel-wrapper {
1589  overflow-x: auto;
1590  -webkit-overflow-scrolling: touch;
1591  scrollbar-width: none;
1592  padding: var(--spacing-xs) 0;
1593}
1594
1595.mobile-carousel-wrapper::-webkit-scrollbar {
1596  display: none;
1597}
1598
1599.mobile-carousel {
1600  display: flex;
1601  gap: var(--spacing-xs);
1602  padding-right: var(--spacing-md);
1603}
1604
1605.mobile-cmd-pill {
1606  flex-shrink: 0;
1607  padding: var(--spacing-sm) var(--spacing-md);
1608  min-height: 44px;
1609  font-family: var(--font-mono);
1610  font-size: 0.8125rem;
1611  font-weight: 500;
1612  color: var(--color-charcoal);
1613  background: none;
1614  border: none;
1615  border-radius: 100px;
1616  cursor: pointer;
1617  transition: background 0.2s ease, color 0.2s ease;
1618  white-space: nowrap;
1619}
1620
1621.mobile-cmd-pill:hover {
1622  background: var(--color-mist);
1623}
1624
1625.mobile-cmd-pill.active {
1626  color: var(--color-paper);
1627  background: var(--color-ink);
1628}
1629
1630.mobile-demo-area {
1631  padding: 0;
1632}
1633
1634.mobile-demo-area .demo-split-comparison {
1635  width: 100%;
1636}
1637
1638.mobile-demo-area .split-container {
1639  width: 100%;
1640  max-width: 100%;
1641  height: 320px;
1642}
1643
1644.mobile-demo-area .demo-caption {
1645  font-size: 0.75rem;
1646  margin-top: var(--spacing-sm);
1647}
1648
1649.mobile-info-area {
1650  padding-top: var(--spacing-sm);
1651}
1652
1653.mobile-cmd-info {
1654  display: none;
1655  padding: var(--spacing-sm) 0;
1656}
1657
1658.mobile-cmd-info.active {
1659  display: block;
1660}
1661
1662.mobile-cmd-name {
1663  font-family: var(--font-mono);
1664  font-size: 1.125rem;
1665  font-weight: 600;
1666  color: var(--color-ink);
1667  margin: 0 0 var(--spacing-xs) 0;
1668}
1669
1670.mobile-cmd-namespace {
1671  color: var(--color-ash);
1672  font-weight: 400;
1673}
1674
1675.mobile-cmd-desc {
1676  font-size: 0.875rem;
1677  color: var(--color-charcoal);
1678  line-height: 1.5;
1679  margin: 0;
1680}
1681
1682.mobile-cmd-rel {
1683  margin-top: var(--spacing-xs);
1684  font-size: 0.75rem;
1685  color: var(--color-ash);
1686}
1687
1688.mobile-cmd-rel code {
1689  font-family: var(--font-mono);
1690  color: var(--color-ink);
1691}
1692
1693/* ============================================
1694   DOWNLOADS SECTION
1695   ============================================ */
1696
1697.downloads-section {
1698  padding: var(--spacing-2xl) 0;
1699  border-top: 1px solid var(--color-mist);
1700}
1701
1702.downloads-grid {
1703  display: grid;
1704  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
1705  gap: var(--spacing-lg);
1706}
1707
1708.download-card {
1709  display: flex;
1710  flex-direction: column;
1711  align-items: center;
1712  text-align: center;
1713  padding: var(--spacing-lg);
1714  background: var(--color-cream);
1715  border: 1px solid var(--color-mist);
1716  transition: all var(--duration-base) var(--ease-out);
1717}
1718
1719.download-card:hover {
1720  border-color: var(--color-accent);
1721  transform: translateY(-4px);
1722  box-shadow: 0 20px 60px var(--color-accent-dim);
1723}
1724
1725.download-card-icon {
1726  margin-bottom: var(--spacing-sm);
1727}
1728
1729.download-card-icon img {
1730  width: 40px;
1731  height: 40px;
1732  object-fit: contain;
1733  border-radius: 8px;
1734}
1735
1736.download-card-title {
1737  font-family: var(--font-display);
1738  font-size: 1.25rem;
1739  font-weight: 400;
1740  margin: 0 0 var(--spacing-sm) 0;
1741}
1742
1743.download-card-note {
1744  font-size: 0.75rem;
1745  color: var(--color-ash);
1746  margin-bottom: var(--spacing-xs);
1747}
1748
1749.download-card .btn {
1750  margin-top: var(--spacing-xs);
1751}
1752
1753/* Install command box */
1754.install-command {
1755  display: flex;
1756  align-items: center;
1757  gap: var(--spacing-xs);
1758  background: var(--color-paper);
1759  border: 1px solid var(--color-mist);
1760  border-radius: 6px;
1761  padding: var(--spacing-sm);
1762  margin-top: var(--spacing-sm);
1763  width: 100%;
1764}
1765
1766.install-command code {
1767  flex: 1;
1768  font-family: var(--font-mono);
1769  font-size: 0.75rem;
1770  color: var(--color-ink);
1771  background: transparent;
1772  padding: 0;
1773  white-space: nowrap;
1774  overflow: hidden;
1775  text-overflow: ellipsis;
1776}
1777
1778.copy-btn {
1779  display: flex;
1780  align-items: center;
1781  justify-content: center;
1782  width: 28px;
1783  height: 28px;
1784  background: transparent;
1785  border: 1px solid var(--color-mist);
1786  border-radius: 4px;
1787  color: var(--color-ash);
1788  cursor: pointer;
1789  flex-shrink: 0;
1790  transition: all var(--duration-fast) var(--ease-out);
1791}
1792
1793.copy-btn:hover {
1794  background: var(--color-accent-dim);
1795  border-color: var(--color-accent);
1796  color: var(--color-accent);
1797}
1798
1799.copy-btn.copied {
1800  background: var(--color-accent);
1801  border-color: var(--color-accent);
1802  color: var(--color-paper);
1803}
1804
1805.install-hint {
1806  font-size: 0.75rem;
1807  color: var(--color-ash);
1808  margin: var(--spacing-xs) 0 0 0;
1809}
1810
1811.install-hint code {
1812  font-family: var(--font-mono);
1813  font-size: 0.6875rem;
1814  background: var(--color-mist);
1815  padding: 2px 5px;
1816  border-radius: 3px;
1817}
1818
1819.download-card-details {
1820  width: 100%;
1821  margin-top: var(--spacing-sm);
1822  font-size: 0.8125rem;
1823  text-align: left;
1824}
1825
1826.download-card-details summary {
1827  cursor: pointer;
1828  color: var(--color-ash);
1829  font-size: 0.75rem;
1830  padding: var(--spacing-xs) 0;
1831  list-style: none;
1832  display: flex;
1833  align-items: center;
1834  justify-content: center;
1835  gap: 4px;
1836}
1837
1838.download-card-details summary::before {
1839  content: '▶';
1840  font-size: 0.5rem;
1841  transition: transform var(--duration-fast) var(--ease-out);
1842}
1843
1844.download-card-details[open] summary::before {
1845  transform: rotate(90deg);
1846}
1847
1848.download-card-details summary::-webkit-details-marker {
1849  display: none;
1850}
1851
1852.download-card-details ol {
1853  margin: var(--spacing-sm) 0;
1854  padding-left: var(--spacing-md);
1855  color: var(--color-charcoal);
1856  line-height: 1.6;
1857}
1858
1859.download-card-details li {
1860  margin-bottom: 4px;
1861}
1862
1863.download-card-details code {
1864  font-family: var(--font-mono);
1865  font-size: 0.6875rem;
1866  background: var(--color-mist);
1867  padding: 2px 5px;
1868  border-radius: 3px;
1869}
1870
1871.download-card-details a {
1872  color: var(--color-accent);
1873  text-decoration: none;
1874  font-size: 0.75rem;
1875}
1876
1877.download-card-details a:hover {
1878  text-decoration: underline;
1879}
1880
1881/* ============================================
1882   OPEN SOURCE SECTION
1883   ============================================ */
1884
1885.opensource-section {
1886  padding: var(--spacing-2xl) 0;
1887  border-top: 1px solid var(--color-mist);
1888  text-align: center;
1889}
1890
1891.opensource-content {
1892  max-width: 500px;
1893  margin: 0 auto;
1894  display: flex;
1895  flex-direction: column;
1896  align-items: center;
1897  gap: var(--spacing-md);
1898}
1899
1900.opensource-title {
1901  font-size: clamp(1.5rem, 4vw, 2rem);
1902  font-weight: 300;
1903}
1904
1905.opensource-desc {
1906  font-size: 1.125rem;
1907  color: var(--color-ash);
1908  line-height: 1.6;
1909}
1910
1911/* ============================================
1912   FOOTER
1913   ============================================ */
1914
1915.site-footer {
1916  border-top: 1px solid var(--color-mist);
1917  padding: var(--spacing-xl) var(--spacing-lg);
1918  background: var(--color-cream);
1919}
1920
1921/* Single horizontal row: wordmark left, nav centered, credit right.
1922   Three groups, no two-tier split, no dividers. */
1923.footer-row {
1924  max-width: var(--width-max);
1925  margin: 0 auto;
1926  display: grid;
1927  grid-template-columns: auto 1fr auto;
1928  align-items: center;
1929  gap: var(--spacing-xl);
1930}
1931
1932.footer-logo {
1933  font-family: var(--font-display);
1934  font-size: 1.25rem;
1935  font-weight: 400;
1936  color: var(--color-ink);
1937  text-decoration: none;
1938}
1939
1940.footer-links {
1941  display: flex;
1942  justify-content: center;
1943  gap: var(--spacing-lg);
1944  flex-wrap: wrap;
1945}
1946
1947.footer-links a {
1948  font-size: 0.875rem;
1949  color: var(--color-ash);
1950  text-decoration: none;
1951  transition: color var(--duration-fast) var(--ease-out);
1952}
1953
1954.footer-links a:hover {
1955  color: var(--color-accent);
1956}
1957
1958.footer-credit {
1959  display: flex;
1960  align-items: center;
1961  gap: var(--spacing-sm);
1962  font-size: 0.875rem;
1963  color: var(--color-ash);
1964  white-space: nowrap;
1965}
1966
1967.footer-credit a {
1968  color: var(--color-text);
1969  text-decoration: none;
1970  transition: color var(--duration-fast) var(--ease-out);
1971}
1972
1973.footer-credit a:hover {
1974  color: var(--color-accent);
1975}
1976
1977.footer-social-link {
1978  display: inline-flex;
1979  align-items: center;
1980  justify-content: center;
1981  padding: 4px;
1982  color: var(--color-ash);
1983  transition: color var(--duration-fast) var(--ease-out);
1984}
1985
1986.footer-social-link:hover {
1987  color: var(--color-accent);
1988}
1989
1990@media (max-width: 900px) {
1991  .footer-row {
1992    grid-template-columns: 1fr;
1993    justify-items: center;
1994    text-align: center;
1995    gap: var(--spacing-md);
1996  }
1997
1998  .footer-links {
1999    justify-content: center;
2000    gap: var(--spacing-sm) var(--spacing-md);
2001    font-size: 0.8125rem;
2002  }
2003
2004  .site-footer {
2005    padding: var(--spacing-lg) var(--spacing-md);
2006  }
2007}
2008
2009/* ============================================
2010   BUTTONS
2011   ============================================ */
2012
2013.btn {
2014  display: inline-flex;
2015  align-items: center;
2016  justify-content: center;
2017  gap: var(--spacing-xs);
2018  padding: 1rem 2rem;
2019  font-family: var(--font-body);
2020  font-size: 0.9375rem;
2021  font-weight: 600;
2022  letter-spacing: 0.03em;
2023  border: none;
2024  cursor: pointer;
2025  transition: all var(--duration-base) var(--ease-out);
2026  position: relative;
2027  overflow: hidden;
2028  text-decoration: none;
2029}
2030
2031.btn-primary {
2032  background: var(--color-ink);
2033  color: var(--color-paper);
2034}
2035
2036.btn-primary::before {
2037  content: '';
2038  position: absolute;
2039  inset: 0;
2040  background: var(--color-accent);
2041  transform: translateY(100%);
2042  transition: transform var(--duration-base) var(--ease-out);
2043  z-index: 0;
2044}
2045
2046.btn-primary:hover::before {
2047  transform: translateY(0);
2048}
2049
2050.btn-primary:hover {
2051  color: var(--color-paper);
2052}
2053
2054.btn-primary span,
2055.btn-primary svg {
2056  position: relative;
2057  z-index: 1;
2058}
2059
2060/* For buttons without span wrapper */
2061.btn-primary:not(:has(span)) {
2062  position: relative;
2063  z-index: 1;
2064}
2065
2066.btn-secondary {
2067  background: transparent;
2068  color: var(--color-ink);
2069  border: 1px solid var(--color-ink);
2070}
2071
2072.btn-secondary:hover {
2073  background: var(--color-ink);
2074  color: var(--color-paper);
2075}
2076
2077/* Focus styles for all buttons */
2078.btn:focus-visible {
2079  outline: 2px solid var(--color-accent);
2080  outline-offset: 2px;
2081}
2082
2083.btn-primary:focus-visible {
2084  outline-color: var(--color-paper);
2085  box-shadow: 0 0 0 4px var(--color-accent);
2086}
2087
2088.btn-secondary:focus-visible {
2089  outline-color: var(--color-accent);
2090}
2091
2092/* ============================================
2093   ANIMATIONS
2094   ============================================ */
2095
2096@keyframes revealUp {
2097  to {
2098    opacity: 1;
2099    transform: translateY(0);
2100  }
2101}
2102
2103@keyframes fadeIn {
2104  to {
2105    opacity: 1;
2106  }
2107}
2108
2109@keyframes float {
2110  0%, 100% { transform: translateX(-50%) translateY(0); }
2111  50% { transform: translateX(-50%) translateY(-8px); }
2112}
2113
2114@keyframes bounce {
2115  0%, 100% { transform: translateY(0); }
2116  50% { transform: translateY(4px); }
2117}
2118
2119/* Reveal animation for scroll */
2120[data-reveal] {
2121  opacity: 0;
2122  transform: translateY(30px);
2123  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
2124}
2125
2126[data-reveal].revealed {
2127  opacity: 1;
2128  transform: translateY(0);
2129}
2130
2131/* Staggered reveals */
2132[data-reveal]:nth-child(1) { transition-delay: 0s; }
2133[data-reveal]:nth-child(2) { transition-delay: 0.1s; }
2134[data-reveal]:nth-child(3) { transition-delay: 0.2s; }
2135[data-reveal]:nth-child(4) { transition-delay: 0.3s; }
2136
2137/* ============================================
2138   REDUCED MOTION (Accessibility)
2139   ============================================ */
2140
2141@media (prefers-reduced-motion: reduce) {
2142  *,
2143  *::before,
2144  *::after {
2145    animation-duration: 0.01ms !important;
2146    animation-iteration-count: 1 !important;
2147    transition-duration: 0.01ms !important;
2148    scroll-behavior: auto !important;
2149  }
2150
2151  /* Allow smooth scrolling to remain for anchor links only if user explicitly triggers */
2152  html {
2153    scroll-behavior: auto;
2154  }
2155
2156  /* Disable hero canvas animation */
2157  .hero-canvas {
2158    display: none;
2159  }
2160
2161  /* Disable scroll indicator animation */
2162  .hero-scroll-indicator {
2163    animation: none;
2164    opacity: 1;
2165  }
2166
2167  /* Disable reveal animations - show content immediately */
2168  [data-reveal] {
2169    opacity: 1;
2170    transform: none;
2171  }
2172
2173  /* Disable gallery frame transitions */
2174  .gallery-frame {
2175    opacity: 1;
2176    transform: none;
2177  }
2178}
2179
2180/* ============================================
2181   ERROR STATES
2182   ============================================ */
2183
2184.load-error {
2185  display: flex;
2186  flex-direction: column;
2187  align-items: center;
2188  justify-content: center;
2189  text-align: center;
2190  padding: var(--spacing-2xl) var(--spacing-lg);
2191  gap: var(--spacing-md);
2192  background: var(--color-cream);
2193  border: 1px solid var(--color-mist);
2194  border-radius: 8px;
2195}
2196
2197.load-error-icon {
2198  font-size: 2.5rem;
2199  color: var(--color-accent);
2200}
2201
2202.load-error-title {
2203  font-family: var(--font-display);
2204  font-size: 1.5rem;
2205  font-weight: 400;
2206  color: var(--color-ink);
2207  margin: 0;
2208}
2209
2210.load-error-text {
2211  font-size: 1rem;
2212  color: var(--color-ash);
2213  max-width: 40ch;
2214  line-height: 1.5;
2215}
2216
2217.load-error-retry {
2218  margin-top: var(--spacing-sm);
2219}
2220
2221/* ============================================
2222   BIAS TAGS (Compact Problem Section)
2223   ============================================ */
2224
2225.bias-tags {
2226  display: flex;
2227  flex-direction: column;
2228  align-items: center;
2229  gap: var(--spacing-sm);
2230  margin-top: var(--spacing-lg);
2231}
2232
2233.bias-tags-label {
2234  font-family: var(--font-mono);
2235  font-size: 0.6875rem;
2236  font-weight: 500;
2237  letter-spacing: 0.1em;
2238  text-transform: uppercase;
2239  color: var(--color-ash);
2240}
2241
2242.bias-tags-list {
2243  display: flex;
2244  flex-wrap: wrap;
2245  justify-content: center;
2246  gap: var(--spacing-xs);
2247}
2248
2249.bias-tag {
2250  font-size: 0.75rem;
2251  font-weight: 500;
2252  padding: 6px 12px;
2253  background: var(--color-cream);
2254  border: 1px solid var(--color-mist);
2255  color: var(--color-charcoal);
2256  transition: all var(--duration-fast) var(--ease-out);
2257}
2258
2259.bias-tag:hover {
2260  border-color: var(--color-accent);
2261  color: var(--color-accent);
2262}
2263
2264/* ============================================
2265   ANTIDOTE SECTION
2266   ============================================ */
2267
2268.antidote-section {
2269  padding: var(--spacing-2xl) 0;
2270  border-top: 1px solid var(--color-mist);
2271}
2272
2273/* Antidote row: patterns + gallery side by side */
2274.antidote-row {
2275  display: flex;
2276  gap: var(--spacing-xl);
2277  align-items: stretch;
2278  margin-bottom: var(--spacing-xl);
2279}
2280
2281.antidote-row .patterns-tabbed {
2282  flex: 1;
2283  min-width: 0;
2284  margin-bottom: 0;
2285}
2286
2287/* Gallery of Shame — 3D card stack */
2288.gallery-stack-container {
2289  flex: 0 0 clamp(320px, 34vw, 420px);
2290  display: flex;
2291  flex-direction: column;
2292  gap: var(--spacing-xs);
2293  position: relative;
2294}
2295
2296
2297/* Header: ← Gallery of Shame → */
2298.gallery-stack-header {
2299  display: flex;
2300  align-items: center;
2301  gap: var(--spacing-xs);
2302  white-space: nowrap;
2303}
2304
2305.gallery-stack-title {
2306  font-family: var(--font-display);
2307  font-size: 1rem;
2308  font-weight: 600;
2309  color: var(--color-ink);
2310  flex: 1;
2311}
2312
2313.gallery-stack-btn {
2314  width: 24px;
2315  height: 24px;
2316  border-radius: 50%;
2317  border: 1px solid var(--color-mist);
2318  background: white;
2319  cursor: pointer;
2320  display: flex;
2321  align-items: center;
2322  justify-content: center;
2323  font-size: 0.6875rem;
2324  color: var(--color-charcoal);
2325  flex-shrink: 0;
2326  transition: border-color var(--duration-fast), background var(--duration-fast);
2327  position: relative;
2328}
2329
2330/* Invisible 44px touch target */
2331.gallery-stack-btn::after {
2332  content: '';
2333  position: absolute;
2334  inset: -10px;
2335}
2336
2337.gallery-stack-btn:hover {
2338  border-color: var(--color-charcoal);
2339}
2340
2341/* Card stack — stacked deck offset to bottom-right */
2342.gallery-stack {
2343  position: relative;
2344  width: calc(100% - 20px);
2345  aspect-ratio: 3 / 2;
2346  margin-bottom: 20px;
2347}
2348
2349.gallery-stack-card {
2350  position: absolute;
2351  top: 0;
2352  left: 0;
2353  width: 100%;
2354  height: 100%;
2355  display: flex;
2356  flex-direction: column;
2357  border-radius: 8px;
2358  overflow: hidden;
2359  border: 1px solid var(--color-mist);
2360  text-decoration: none;
2361  background: white;
2362  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, box-shadow 0.35s ease;
2363  will-change: transform, opacity;
2364}
2365
2366.gallery-stack-card img {
2367  flex: 1;
2368  min-height: 0;
2369  width: 100%;
2370  object-fit: cover;
2371  object-position: top left;
2372}
2373
2374.gallery-stack-label {
2375  padding: 6px 10px;
2376  font-size: 0.75rem;
2377  font-weight: 600;
2378  color: var(--color-charcoal);
2379  flex-shrink: 0;
2380}
2381
2382/* Stack depth: cards peek behind at bottom-right */
2383.gallery-stack-card[data-offset="0"] {
2384  z-index: 3;
2385  transform: translate(0, 0);
2386  opacity: 1;
2387  box-shadow: 0 2px 12px oklch(0.2 0 0 / 0.1);
2388}
2389
2390.gallery-stack-card[data-offset="1"] {
2391  z-index: 2;
2392  transform: translate(8px, 8px);
2393  opacity: 1;
2394  box-shadow: 0 1px 6px oklch(0.2 0 0 / 0.08);
2395  pointer-events: none;
2396}
2397
2398.gallery-stack-card[data-offset="2"] {
2399  z-index: 1;
2400  transform: translate(16px, 16px);
2401  opacity: 1;
2402  box-shadow: 0 1px 4px oklch(0.2 0 0 / 0.06);
2403  pointer-events: none;
2404}
2405
2406.gallery-stack-card:not([data-offset="0"]):not([data-offset="1"]):not([data-offset="2"]) {
2407  z-index: 0;
2408  transform: translate(20px, 20px);
2409  opacity: 0;
2410  pointer-events: none;
2411}
2412
2413.gallery-stack-link {
2414  font-size: 0.75rem;
2415  font-weight: 500;
2416  color: var(--color-accent);
2417  text-decoration: none;
2418  text-align: center;
2419}
2420
2421.gallery-stack-link:hover {
2422  text-decoration: underline;
2423}
2424
2425@media (max-width: 900px) {
2426  .antidote-row {
2427    flex-direction: column;
2428  }
2429
2430  .gallery-stack-container {
2431    flex: none;
2432    width: 100%;
2433    max-width: 360px;
2434  }
2435
2436}
2437
2438/* ---- Pattern tabs ---- */
2439.patterns-tabbed {
2440  margin-bottom: var(--spacing-xl);
2441  background: white;
2442  border-radius: 8px;
2443  padding: var(--spacing-lg);
2444}
2445
2446.patterns-tabs-wrap {
2447  position: relative;
2448  margin-bottom: var(--spacing-md);
2449}
2450
2451.patterns-tabs {
2452  display: flex;
2453  flex-wrap: nowrap;
2454  gap: 6px;
2455  overflow-x: auto;
2456  scrollbar-width: none;
2457  -webkit-overflow-scrolling: touch;
2458  scroll-snap-type: x proximity;
2459}
2460
2461.patterns-tabs::-webkit-scrollbar {
2462  display: none;
2463}
2464
2465/* Edge fade only on sides where more content exists. data-scroll is set
2466   by JS: start | middle | end | none. */
2467.patterns-tabs[data-scroll="start"] {
2468  mask-image: linear-gradient(to right, black calc(100% - 40px), transparent);
2469  -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent);
2470}
2471.patterns-tabs[data-scroll="middle"] {
2472  mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 40px), transparent);
2473  -webkit-mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 40px), transparent);
2474}
2475.patterns-tabs[data-scroll="end"] {
2476  mask-image: linear-gradient(to right, transparent, black 32px);
2477  -webkit-mask-image: linear-gradient(to right, transparent, black 32px);
2478}
2479.patterns-tabs[data-scroll="none"] {
2480  mask-image: none;
2481  -webkit-mask-image: none;
2482}
2483
2484/* Chevrons sit on the wrapper (outside the mask) so they're always fully
2485   opaque, regardless of edge fade. Visible only when scroll can progress
2486   in that direction. */
2487.patterns-tabs-wrap::before,
2488.patterns-tabs-wrap::after {
2489  content: '';
2490  position: absolute;
2491  top: 50%;
2492  width: 9px;
2493  height: 9px;
2494  border-top: 1.5px solid var(--color-ash);
2495  border-right: 1.5px solid var(--color-ash);
2496  pointer-events: none;
2497  opacity: 0;
2498  transition: opacity 0.18s ease;
2499}
2500.patterns-tabs-wrap::before {
2501  left: 2px;
2502  transform: translateY(-50%) rotate(-135deg);
2503}
2504.patterns-tabs-wrap::after {
2505  right: 2px;
2506  transform: translateY(-50%) rotate(45deg);
2507}
2508.patterns-tabs-wrap[data-scroll="start"]::after,
2509.patterns-tabs-wrap[data-scroll="middle"]::after { opacity: 1; }
2510.patterns-tabs-wrap[data-scroll="end"]::before,
2511.patterns-tabs-wrap[data-scroll="middle"]::before { opacity: 1; }
2512
2513.patterns-tab {
2514  scroll-snap-align: start;
2515  flex-shrink: 0;
2516}
2517
2518.patterns-tab {
2519  font-family: var(--font-body);
2520  font-size: 0.75rem;
2521  font-weight: 500;
2522  color: var(--color-charcoal);
2523  background: none;
2524  border: none;
2525  border-radius: 100px;
2526  padding: 6px 12px;
2527  cursor: pointer;
2528  white-space: nowrap;
2529  transition: background 0.2s ease, color 0.2s ease;
2530}
2531
2532.patterns-tab:hover {
2533  background: var(--color-mist);
2534}
2535
2536.patterns-tab.is-active {
2537  background: var(--color-ink);
2538  color: var(--color-paper);
2539}
2540
2541.patterns-content {
2542  display: none;
2543}
2544
2545.patterns-content.is-active {
2546  display: flex;
2547  flex-direction: column;
2548  gap: var(--spacing-md);
2549}
2550
2551.patterns-col ul {
2552  list-style: none;
2553  padding: 0;
2554  margin: 0;
2555  display: flex;
2556  flex-direction: column;
2557  gap: 6px;
2558}
2559
2560.patterns-col li {
2561  font-size: 0.8125rem;
2562  line-height: 1.55;
2563  padding-left: var(--spacing-sm);
2564  position: relative;
2565  color: var(--color-charcoal);
2566  overflow-wrap: break-word;
2567  word-break: break-word;
2568}
2569
2570.patterns-col--dont li::before {
2571  content: '\00d7';
2572  position: absolute;
2573  left: 0;
2574  color: var(--color-accent);
2575  font-weight: 600;
2576}
2577
2578.patterns-col--do li::before {
2579  content: '\2713';
2580  position: absolute;
2581  left: 0;
2582  color: var(--color-success, #22c55e);
2583  font-weight: 600;
2584}
2585
2586
2587/* Detection callout — flat editorial CTA, no card chrome.
2588   Image thumbnail on the left, NEW eyebrow + CTA stacked on the right.
2589   The whole element is a clickable anchor. Hover shifts color, no
2590   transform or shadow theatrics. */
2591.detection-callout {
2592  display: flex;
2593  align-items: center;
2594  gap: var(--spacing-md);
2595  text-decoration: none;
2596  color: inherit;
2597  padding: var(--spacing-sm) 0;
2598  border-top: 1px solid var(--color-mist);
2599}
2600
2601.detection-callout-image {
2602  display: block;
2603  width: 132px;
2604  height: 112px;
2605  flex-shrink: 0;
2606  object-fit: cover;
2607  object-position: top left;
2608  border: 1px solid var(--color-mist);
2609  border-radius: 6px;
2610  transition: border-color 0.2s ease;
2611}
2612
2613.detection-callout:hover .detection-callout-image {
2614  border-color: var(--color-accent);
2615}
2616
2617.detection-callout-inner {
2618  flex: 1;
2619  display: flex;
2620  flex-direction: column;
2621  align-items: flex-start;
2622  justify-content: center;
2623  gap: 6px;
2624}
2625
2626.detection-eyebrow {
2627  font-family: var(--font-mono);
2628  font-size: 0.6875rem;
2629  font-weight: 600;
2630  text-transform: uppercase;
2631  letter-spacing: 0.08em;
2632  color: var(--color-accent);
2633}
2634
2635.detection-callout-title {
2636  font-family: var(--font-display);
2637  font-size: 1.25rem;
2638  font-weight: 600;
2639  color: var(--color-ink);
2640  letter-spacing: -0.01em;
2641  line-height: 1.15;
2642}
2643
2644.detection-callout:hover .detection-callout-title {
2645  color: var(--color-accent);
2646}
2647
2648.detection-desc {
2649  flex: 1;
2650  font-size: 0.8125rem;
2651  line-height: 1.55;
2652  color: var(--color-ash);
2653  min-width: 200px;
2654}
2655
2656.detection-desc code {
2657  font-family: var(--font-mono);
2658  font-size: 0.8125rem;
2659  color: var(--color-charcoal);
2660}
2661
2662.detection-cmd {
2663  flex-shrink: 0;
2664  font-family: var(--font-body);
2665  font-size: 0.875rem;
2666  font-weight: 600;
2667  color: var(--color-ink);
2668  white-space: nowrap;
2669  transition: color 0.15s ease;
2670}
2671
2672.detection-callout:hover .detection-cmd {
2673  color: var(--color-accent);
2674}
2675
2676/* Antidote footer */
2677.antidote-footer {
2678  text-align: center;
2679}
2680
2681.antidote-suggest-link {
2682  font-size: 0.8125rem;
2683  color: var(--color-ash);
2684  text-decoration: none;
2685}
2686
2687.antidote-suggest-link:hover {
2688  color: var(--color-accent);
2689  text-decoration: underline;
2690}
2691
2692/* ============================================
2693   SOLUTION SECTION ENHANCEMENTS
2694   ============================================ */
2695
2696/* Main skill item styling */
2697.pillar-item--main {
2698  background: var(--color-accent-dim);
2699  border: 1px solid var(--color-accent);
2700}
2701
2702.pillar-item--main .pillar-item-name {
2703  font-size: 1.125rem;
2704  font-weight: 600;
2705  color: var(--color-accent);
2706}
2707
2708.pillar-item--ref {
2709  background: transparent;
2710  padding: var(--spacing-xs) var(--spacing-sm);
2711}
2712
2713.pillar-item-label {
2714  font-size: 0.75rem;
2715  font-weight: 500;
2716  text-transform: uppercase;
2717  letter-spacing: 0.05em;
2718  color: var(--color-ash);
2719}
2720
2721/* Reference domain tags */
2722.pillar-refs {
2723  display: flex;
2724  flex-wrap: wrap;
2725  gap: var(--spacing-xs);
2726  padding: 0 var(--spacing-sm);
2727}
2728
2729.pillar-ref {
2730  font-size: 0.6875rem;
2731  font-weight: 500;
2732  text-transform: uppercase;
2733  letter-spacing: 0.03em;
2734  padding: 4px 10px;
2735  background: var(--color-paper);
2736  color: var(--color-ash);
2737  border: 1px solid var(--color-mist);
2738  border-radius: 3px;
2739  transition: all var(--duration-fast) var(--ease-out);
2740}
2741
2742.pillar-ref:hover {
2743  border-color: var(--color-accent);
2744  color: var(--color-accent);
2745}
2746
2747/* Command groups */
2748.pillar-command-group {
2749  display: flex;
2750  flex-wrap: wrap;
2751  align-items: center;
2752  gap: var(--spacing-xs);
2753  padding: var(--spacing-sm);
2754  background: var(--color-paper);
2755  border-radius: 4px;
2756}
2757
2758.pillar-group-label {
2759  font-size: 0.6875rem;
2760  font-weight: 600;
2761  text-transform: uppercase;
2762  letter-spacing: 0.05em;
2763  color: var(--color-ash);
2764  width: 100%;
2765  margin-bottom: 4px;
2766}
2767
2768.pillar-command-group .pillar-item-code {
2769  font-size: 0.8125rem;
2770  padding: 4px 8px;
2771  background: var(--color-accent-dim);
2772  border-radius: 3px;
2773}
2774
2775/* ============================================
2776   PLATFORMS SECTION (alias for downloads)
2777   ============================================ */
2778
2779.platforms-section {
2780  padding: var(--spacing-2xl) 0;
2781  border-top: 1px solid var(--color-mist);
2782}
2783
2784@media (min-width: 1100px) {
2785  .platforms-section {
2786    border-top: none;
2787  }
2788}
2789
2790.platforms-section .section-subtitle {
2791  max-width: 60ch;
2792}
2793
2794/* Two-path install layout */
2795/* Row 1: full-width primary install card with internal 2-column split */
2796.install-row-primary {
2797  display: grid;
2798  grid-template-columns: 1fr 1fr;
2799  gap: var(--spacing-xl);
2800  align-items: start;
2801  margin: 0 0 var(--spacing-xl);
2802  background: white;
2803  border-radius: 16px;
2804  padding: var(--spacing-lg);
2805  min-width: 0;
2806}
2807
2808.install-primary-main,
2809.install-primary-howto {
2810  display: flex;
2811  flex-direction: column;
2812  min-width: 0;
2813}
2814
2815.install-primary-howto {
2816  padding-left: var(--spacing-xl);
2817  border-left: 1px solid var(--color-mist);
2818}
2819
2820/* The "Use it" side uses the hero body copy size so both columns feel balanced
2821   in typographic weight, not just pixel width. */
2822.install-primary-howto .install-path-desc {
2823  font-size: 0.9375rem;
2824  line-height: 1.6;
2825  color: var(--color-ink);
2826  max-width: 48ch;
2827}
2828
2829.install-primary-howto .install-path-desc em {
2830  font-family: var(--font-display);
2831  font-style: italic;
2832  font-weight: 500;
2833  color: var(--color-accent);
2834}
2835
2836.install-primary-alts {
2837  min-width: 0;
2838}
2839
2840/* "Other install methods" is a collapsed <details> panel that sits
2841   directly under the main install card. The alternatives are worth
2842   keeping discoverable but don't need to be visible by default. */
2843.install-primary-main > .install-primary-alts {
2844  margin-top: var(--spacing-lg);
2845  padding-top: var(--spacing-md);
2846  border-top: 1px solid var(--color-mist);
2847}
2848
2849.install-primary-alts[open] > .install-alts-summary > .install-alts-arrow {
2850  transform: rotate(90deg);
2851}
2852
2853.install-alts-summary {
2854  display: flex;
2855  align-items: center;
2856  gap: var(--spacing-xs);
2857  list-style: none;
2858  cursor: pointer;
2859  padding: 2px 0;
2860}
2861
2862.install-alts-summary::-webkit-details-marker {
2863  display: none;
2864}
2865
2866.install-alts-arrow {
2867  color: var(--color-ash);
2868  transition: transform var(--duration-fast) var(--ease-out, ease);
2869}
2870
2871.install-primary-alts[open] > .install-alts-summary {
2872  margin-bottom: var(--spacing-md);
2873}
2874
2875.install-primary-alts[open] > .install-alt-method + .install-alt-method {
2876  margin-top: var(--spacing-lg);
2877}
2878
2879/* Editorial "How to use" step list on the right side of the install row.
2880   Uses display-font numerals as prominent visual anchors, generous vertical
2881   rhythm, and body text at the same scale as the hero copy for hierarchy
2882   parity with the rest of the page. */
2883.install-howto-steps {
2884  list-style: none;
2885  counter-reset: howto-step;
2886  padding: 0;
2887  margin: var(--spacing-lg) 0 0;
2888  display: flex;
2889  flex-direction: column;
2890  gap: var(--spacing-lg);
2891}
2892
2893.install-howto-steps > li {
2894  counter-increment: howto-step;
2895  position: relative;
2896  padding-left: 3rem;
2897  min-height: 2.5rem;
2898}
2899
2900.install-howto-steps > li::before {
2901  content: counter(howto-step, decimal-leading-zero);
2902  position: absolute;
2903  left: 0;
2904  top: -0.1em;
2905  font-family: var(--font-display);
2906  font-size: 1.75rem;
2907  font-weight: 400;
2908  font-style: italic;
2909  color: var(--color-accent);
2910  line-height: 1;
2911  letter-spacing: -0.02em;
2912}
2913
2914.install-howto-step-label {
2915  font-family: var(--font-body);
2916  font-size: 1rem;
2917  font-weight: 600;
2918  color: var(--color-ink);
2919  margin-bottom: 0.35rem;
2920  line-height: 1.3;
2921  letter-spacing: -0.005em;
2922}
2923
2924.install-howto-steps > li p {
2925  margin: 0;
2926  font-size: 0.9375rem;
2927  color: var(--color-ink);
2928  line-height: 1.6;
2929}
2930
2931.install-howto-steps code {
2932  font-family: var(--font-mono);
2933  font-size: 0.8125rem;
2934  font-weight: 500;
2935  color: var(--color-ink);
2936  background: var(--color-accent-dim);
2937  padding: 1px 6px;
2938  border-radius: 3px;
2939  white-space: nowrap;
2940}
2941
2942.install-howto-steps .install-path-slash {
2943  color: var(--color-accent);
2944}
2945
2946/* Compact 3-row "try it" table. Replaces the numbered sub-steps
2947   inside step 2 to condense vertical height. Each row: mono command
2948   example + one-line caption. Collapses to stacked on narrow screens. */
2949.install-howto-rows {
2950  margin: var(--spacing-lg) 0 0;
2951  padding: 0;
2952  display: flex;
2953  flex-direction: column;
2954}
2955
2956.install-howto-row {
2957  display: grid;
2958  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
2959  gap: var(--spacing-md);
2960  align-items: baseline;
2961  padding: var(--spacing-sm) 0;
2962  border-bottom: 1px solid var(--color-mist);
2963}
2964
2965.install-howto-row:first-child {
2966  padding-top: 0;
2967}
2968
2969.install-howto-row:last-child {
2970  padding-bottom: 0;
2971  border-bottom: 0;
2972}
2973
2974.install-howto-row dt {
2975  margin: 0;
2976  min-width: 0;
2977}
2978
2979.install-howto-row dt code {
2980  font-family: var(--font-mono);
2981  font-size: 0.8125rem;
2982  font-weight: 500;
2983  color: var(--color-ink);
2984  background: var(--color-accent-dim);
2985  padding: 3px 8px;
2986  border-radius: 3px;
2987  white-space: nowrap;
2988}
2989
2990.install-howto-row dd {
2991  margin: 0;
2992  font-size: 0.9375rem;
2993  line-height: 1.55;
2994  color: var(--color-ink);
2995}
2996
2997.install-howto-row dd code {
2998  font-family: var(--font-mono);
2999  font-size: 0.8125em;
3000  background: var(--color-mist);
3001  padding: 1px 5px;
3002  border-radius: 3px;
3003  color: var(--color-ink);
3004  white-space: nowrap;
3005}
3006
3007.install-howto-row .install-path-slash {
3008  color: var(--color-accent);
3009}
3010
3011@media (max-width: 700px) {
3012  .install-howto-row {
3013    grid-template-columns: 1fr;
3014    gap: 6px;
3015  }
3016}
3017
3018.install-howto-footer {
3019  display: flex;
3020  flex-wrap: wrap;
3021  gap: var(--spacing-lg);
3022  margin-top: var(--spacing-xl);
3023  padding-top: var(--spacing-lg);
3024  border-top: 1px solid var(--color-mist);
3025}
3026
3027.install-howto-link {
3028  font-family: var(--font-body);
3029  font-size: 0.875rem;
3030  font-weight: 500;
3031  color: var(--color-accent);
3032  text-decoration: none;
3033  display: inline-flex;
3034  align-items: baseline;
3035  gap: 0.35em;
3036  transition: gap 0.2s var(--ease-out-quart, ease);
3037}
3038
3039.install-howto-link:hover {
3040  gap: 0.6em;
3041}
3042
3043.install-howto-link span {
3044  display: inline-block;
3045  transition: transform 0.2s var(--ease-out-quart, ease);
3046}
3047
3048.install-howto-link:hover span {
3049  transform: translateX(2px);
3050}
3051
3052/* Two-tool grid inside the "Anti-pattern tools" step. */
3053.install-tool-grid {
3054  display: grid;
3055  grid-template-columns: 1fr 1fr;
3056  gap: var(--spacing-lg);
3057  margin-top: var(--spacing-md);
3058}
3059
3060.install-tool {
3061  display: flex;
3062  flex-direction: column;
3063  gap: var(--spacing-sm);
3064  min-width: 0;
3065}
3066
3067/* Solo install-tool (no grid wrapper) — used when step 3 is Chrome-only.
3068   The preview screenshot sits to the left of the CTA button so neither
3069   dominates vertical space. Collapses to a stack on narrow screens. */
3070.install-tool--solo {
3071  flex-direction: row;
3072  align-items: center;
3073  gap: var(--spacing-lg);
3074  margin-top: var(--spacing-md);
3075  width: 100%;
3076}
3077
3078.install-tool--solo .install-tool-preview {
3079  flex: 0 1 260px;
3080  min-width: 0;
3081  margin-top: 0;
3082}
3083
3084.install-tool--solo .install-tool-cta {
3085  flex: 1 1 auto;
3086  margin-top: 0;
3087  width: auto;
3088  white-space: nowrap;
3089}
3090
3091@media (max-width: 640px) {
3092  .install-tool--solo {
3093    flex-direction: column;
3094    align-items: stretch;
3095  }
3096
3097  .install-tool--solo .install-tool-preview,
3098  .install-tool--solo .install-tool-cta {
3099    flex: 1 1 auto;
3100  }
3101}
3102
3103.install-tool-label {
3104  font-family: var(--font-body);
3105  font-size: 0.9375rem;
3106  font-weight: 600;
3107  color: var(--color-ink);
3108  display: flex;
3109  align-items: center;
3110  gap: 0.4rem;
3111}
3112
3113.install-tool-desc {
3114  margin: 0;
3115  font-size: 0.8125rem;
3116  color: var(--color-ink);
3117  line-height: 1.55;
3118}
3119
3120/* Chrome extension screenshot preview inside the install-tool column */
3121.install-tool-preview {
3122  display: block;
3123  margin-top: var(--spacing-sm);
3124  border: 1px solid var(--color-mist);
3125  border-radius: 8px;
3126  overflow: hidden;
3127  text-decoration: none;
3128  background: var(--color-paper);
3129  transition: border-color var(--duration-fast) var(--ease-out, ease),
3130              transform var(--duration-fast) var(--ease-out, ease);
3131}
3132
3133.install-tool-preview:hover {
3134  border-color: var(--color-accent);
3135  transform: translateY(-1px);
3136}
3137
3138.install-tool-preview img {
3139  display: block;
3140  width: 100%;
3141  height: auto;
3142}
3143
3144.install-tool-preview-caption {
3145  display: block;
3146  padding: 0.4rem 0.75rem;
3147  font-family: var(--font-body);
3148  font-size: 0.75rem;
3149  color: var(--color-ash);
3150  border-top: 1px solid var(--color-mist);
3151}
3152
3153/* "Install from Chrome Web Store" uses the standard .btn .btn-primary
3154   styles; this modifier only adds layout (full width + top spacing). */
3155.install-tool-cta {
3156  margin-top: var(--spacing-sm);
3157  width: 100%;
3158}
3159
3160.install-alts-label {
3161  display: block;
3162  font-family: var(--font-mono);
3163  font-size: 0.625rem;
3164  font-weight: 600;
3165  text-transform: uppercase;
3166  letter-spacing: 0.14em;
3167  color: var(--color-ash);
3168}
3169
3170.install-alt-sublabel {
3171  font-family: var(--font-body);
3172  font-size: 0.75rem;
3173  font-weight: 400;
3174  color: var(--color-ash);
3175  text-transform: none;
3176  letter-spacing: 0;
3177  margin-left: 4px;
3178}
3179
3180/* Compact zip download links — replaces the old big black download button.
3181   Two equal-weight options stacked vertically, each is its own affordance. */
3182.install-zip-links {
3183  display: flex;
3184  flex-direction: column;
3185  gap: 6px;
3186  margin-top: var(--spacing-xs);
3187}
3188
3189.install-zip-link {
3190  display: flex;
3191  align-items: center;
3192  gap: var(--spacing-sm);
3193  padding: 8px 12px;
3194  font-family: var(--font-body);
3195  font-size: 0.8125rem;
3196  color: var(--color-charcoal);
3197  background: transparent;
3198  border: 1px solid var(--color-mist);
3199  border-radius: 6px;
3200  cursor: pointer;
3201  text-align: left;
3202  transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
3203}
3204
3205.install-zip-link:hover {
3206  border-color: var(--color-accent);
3207  color: var(--color-accent);
3208}
3209
3210.install-zip-link svg {
3211  flex-shrink: 0;
3212  color: var(--color-ash);
3213}
3214
3215.install-zip-link:hover svg {
3216  color: var(--color-accent);
3217}
3218
3219.install-zip-link-name {
3220  font-weight: 600;
3221  color: var(--color-ink);
3222  white-space: nowrap;
3223}
3224
3225.install-zip-link:hover .install-zip-link-name {
3226  color: var(--color-accent);
3227}
3228
3229.install-zip-link-examples {
3230  display: flex;
3231  flex-wrap: nowrap;
3232  gap: 4px;
3233  margin-left: auto;
3234}
3235
3236.install-alt-method .install-zip-link-examples code {
3237  font-family: var(--font-mono);
3238  font-size: 0.6875rem;
3239  background: var(--color-accent-dim);
3240  color: var(--color-accent);
3241  padding: 2px 6px;
3242  border-radius: 3px;
3243  white-space: nowrap;
3244}
3245
3246.install-path {
3247  display: flex;
3248  flex-direction: column;
3249  min-width: 0;
3250}
3251
3252.install-path-primary {
3253  background: white;
3254  border-radius: 16px;
3255  padding: var(--spacing-lg);
3256}
3257
3258/* Steps 2-4: vertical accordion. Native <details name="install-steps">
3259   gives mutual exclusion (opening one closes the others). Items are
3260   separated by hairlines, not card chrome. */
3261.install-accordion {
3262  display: flex;
3263  flex-direction: column;
3264  margin: 0 0 var(--spacing-xl);
3265}
3266
3267.install-step {
3268  border-top: 1px solid var(--color-mist);
3269}
3270
3271.install-step:last-child {
3272  border-bottom: 1px solid var(--color-mist);
3273}
3274
3275.install-step-summary {
3276  display: flex;
3277  align-items: center;
3278  gap: var(--spacing-md);
3279  padding: var(--spacing-md) var(--spacing-xs);
3280  cursor: pointer;
3281  list-style: none;
3282  transition: background var(--duration-fast) var(--ease-out);
3283}
3284
3285.install-step-summary::-webkit-details-marker {
3286  display: none;
3287}
3288
3289.install-step-summary:hover {
3290  background: var(--color-cream);
3291}
3292
3293.install-step-summary h3 {
3294  flex: 1;
3295  margin: 0;
3296}
3297
3298.install-step-arrow {
3299  flex-shrink: 0;
3300  color: var(--color-ash);
3301  transition: transform var(--duration-base) var(--ease-out);
3302}
3303
3304.install-step[open] .install-step-arrow {
3305  transform: rotate(90deg);
3306}
3307
3308.install-step-body {
3309  padding: 0 var(--spacing-xs) var(--spacing-md);
3310  display: flex;
3311  flex-direction: column;
3312  max-width: 56ch;
3313}
3314
3315.install-step-body .install-path-desc {
3316  margin-top: 0;
3317}
3318
3319.install-step-status {
3320  font-size: 0.8125rem;
3321  color: var(--color-ash);
3322  margin: 0 0 var(--spacing-sm);
3323  font-style: italic;
3324}
3325
3326.install-path-title {
3327  display: flex;
3328  align-items: center;
3329  flex-wrap: wrap;
3330  gap: 10px;
3331  font-family: var(--font-display);
3332  font-size: 1.5rem;
3333  font-weight: 600;
3334  margin: 0 0 var(--spacing-sm);
3335  line-height: 1.2;
3336}
3337
3338/* titles unified - no size override for step 3 */
3339
3340.install-path-badge {
3341  font-family: var(--font-mono);
3342  font-size: 0.5rem;
3343  font-weight: 600;
3344  text-transform: uppercase;
3345  letter-spacing: 0.08em;
3346  color: var(--color-accent);
3347  border: 1px solid var(--color-accent);
3348  border-radius: 3px;
3349  padding: 2px 6px;
3350  vertical-align: middle;
3351  margin-left: 6px;
3352  position: relative;
3353  top: -2px;
3354}
3355
3356.install-path-badge-muted {
3357  color: var(--color-ash);
3358  border-color: var(--color-mist);
3359}
3360
3361.install-path-desc {
3362  font-size: 0.9375rem;
3363  line-height: 1.6;
3364  color: var(--color-charcoal);
3365  margin: 0 0 var(--spacing-md);
3366}
3367
3368.terminal-header-license {
3369  margin-left: auto;
3370  font-size: 0.6875rem;
3371  color: oklch(65% 0.01 350);
3372  letter-spacing: 0.01em;
3373}
3374
3375.terminal-header-license a {
3376  color: inherit;
3377  text-decoration: underline;
3378  text-decoration-color: oklch(85% 0.005 350);
3379  text-underline-offset: 2px;
3380}
3381
3382.terminal-header-license a:hover {
3383  color: var(--color-charcoal);
3384}
3385
3386/* removed - unified font sizes across columns */
3387
3388.install-path-terminal {
3389  margin-bottom: var(--spacing-sm);
3390}
3391
3392.install-path-terminal .glass-terminal {
3393  height: auto;
3394}
3395
3396.install-path-terminal .terminal-body {
3397  padding: 0;
3398}
3399
3400.install-path-next {
3401  font-size: 0.8125rem;
3402  color: var(--color-charcoal);
3403  line-height: 1.5;
3404  margin-top: auto;
3405  padding-top: var(--spacing-md);
3406}
3407
3408.install-path-next code {
3409  font-family: var(--font-mono);
3410  font-size: 0.8125rem;
3411  font-weight: 600;
3412  color: var(--color-ink);
3413}
3414
3415.install-path-slash {
3416  color: var(--color-accent);
3417}
3418
3419
3420.install-path-subcommands {
3421  display: flex;
3422  flex-direction: column;
3423  gap: 6px;
3424  margin-top: var(--spacing-sm);
3425}
3426
3427.install-path-subcommand {
3428  font-size: 0.75rem;
3429  color: var(--color-charcoal);
3430  line-height: 1.4;
3431}
3432
3433.install-path-subcommand code {
3434  font-family: var(--font-mono);
3435  font-size: 0.6875rem;
3436  font-weight: 600;
3437  color: var(--color-ink);
3438  background: var(--color-mist);
3439  padding: 2px 6px;
3440  border-radius: 3px;
3441  margin-right: 4px;
3442}
3443
3444.install-path-link {
3445  margin-top: auto;
3446  padding-top: var(--spacing-md);
3447  font-size: 0.8125rem;
3448}
3449
3450.install-path-link a {
3451  color: var(--color-accent);
3452  text-decoration: none;
3453}
3454
3455.install-path-link a:hover {
3456  text-decoration: underline;
3457}
3458
3459/* Lightweight terminal block — used in row 2 (CLI) where the heavy
3460   skeuomorphic glass-terminal would be visually too much. Just a thin
3461   bordered code line with a copy button and an optional note below. */
3462.install-cmd-block {
3463  display: flex;
3464  flex-direction: column;
3465  gap: var(--spacing-xs);
3466  margin-bottom: var(--spacing-sm);
3467}
3468
3469.install-cmd-line {
3470  display: flex;
3471  align-items: center;
3472  gap: var(--spacing-sm);
3473  padding: 10px 14px;
3474  background: var(--color-cream);
3475  border: 1px solid var(--color-mist);
3476  border-radius: 6px;
3477  min-width: 0;
3478}
3479
3480.install-cmd-line .terminal-prompt {
3481  flex-shrink: 0;
3482  color: var(--color-accent);
3483  font-family: var(--font-mono);
3484  font-size: 0.8125rem;
3485}
3486
3487.install-cmd-line code {
3488  flex: 1;
3489  font-family: var(--font-mono);
3490  font-size: 0.8125rem;
3491  color: var(--color-ink);
3492  background: transparent;
3493  padding: 0;
3494  white-space: nowrap;
3495  overflow: hidden;
3496  text-overflow: ellipsis;
3497}
3498
3499.install-cmd-line .copy-btn {
3500  flex-shrink: 0;
3501}
3502
3503.install-cmd-note {
3504  font-size: 0.75rem;
3505  color: var(--color-ash);
3506  line-height: 1.5;
3507  text-wrap: pretty;
3508}
3509
3510.install-cmd-note code {
3511  font-family: var(--font-mono);
3512  font-size: 0.6875rem;
3513  background: var(--color-mist);
3514  padding: 2px 5px;
3515  border-radius: 3px;
3516  color: var(--color-ink);
3517  white-space: nowrap;
3518}
3519
3520.install-cmd-note a {
3521  white-space: nowrap;
3522}
3523
3524
3525/* Better together callout */
3526.install-together {
3527  max-width: 960px;
3528  margin: 0 0 var(--spacing-xl);
3529  border: 1px solid var(--color-mist);
3530  border-radius: 8px;
3531  padding: var(--spacing-sm) var(--spacing-md);
3532}
3533
3534.install-together-inner {
3535  display: flex;
3536  align-items: center;
3537  gap: var(--spacing-md);
3538}
3539
3540.install-together-badge {
3541  font-family: var(--font-mono);
3542  font-size: 0.625rem;
3543  font-weight: 600;
3544  text-transform: uppercase;
3545  letter-spacing: 0.05em;
3546  color: var(--color-accent);
3547  border: 1px solid var(--color-accent);
3548  padding: 2px 10px;
3549  border-radius: 99px;
3550  flex-shrink: 0;
3551  white-space: nowrap;
3552}
3553
3554.install-together-text {
3555  font-size: 0.8125rem;
3556  line-height: 1.55;
3557  color: var(--color-ash);
3558  margin: 0;
3559}
3560
3561/* Inline step numbers — sit to the left of the title text inside each h3.
3562   The h3 uses flex with align-items: center so the step is centered with
3563   the text without needing vertical-align fiddling. Margin/gap is handled
3564   by the parent flex's gap. */
3565.install-path-step {
3566  display: inline-flex;
3567  align-items: center;
3568  justify-content: center;
3569  width: 22px;
3570  height: 22px;
3571  border-radius: 50%;
3572  border: 1.5px solid var(--color-accent);
3573  color: var(--color-accent);
3574  font-family: var(--font-mono);
3575  font-size: 0.625rem;
3576  font-weight: 700;
3577  line-height: 1;
3578  flex-shrink: 0;
3579}
3580
3581/* Stay updated (third column) */
3582.install-updated-subscribe {
3583  display: grid;
3584  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
3585  gap: var(--spacing-sm);
3586  margin-bottom: var(--spacing-md);
3587  align-items: stretch;
3588}
3589
3590.install-updated-substack {
3591  display: block;
3592  width: 100%;
3593  min-width: 0;
3594  height: 130px;
3595  border: 1px solid var(--color-mist);
3596  border-radius: 8px;
3597  background: var(--color-paper);
3598}
3599
3600.install-updated-x {
3601  display: flex;
3602  flex-direction: column;
3603  align-items: flex-start;
3604  justify-content: space-between;
3605  gap: var(--spacing-xs);
3606  height: 130px;
3607  padding: var(--spacing-sm) var(--spacing-md);
3608  border: 1px solid var(--color-mist);
3609  border-radius: 8px;
3610  background: var(--color-paper);
3611  color: var(--color-ink);
3612  text-decoration: none;
3613  transition: border-color var(--duration-fast) var(--ease-out),
3614              background var(--duration-fast) var(--ease-out),
3615              transform var(--duration-fast) var(--ease-out);
3616}
3617
3618.install-updated-x:hover {
3619  border-color: var(--color-ink);
3620  background: var(--color-cream);
3621}
3622
3623.install-updated-x-icon {
3624  color: var(--color-ink);
3625  flex-shrink: 0;
3626}
3627
3628.install-updated-x-label {
3629  font-size: 0.6875rem;
3630  font-weight: 600;
3631  text-transform: uppercase;
3632  letter-spacing: 0.08em;
3633  color: var(--color-ash);
3634  font-family: var(--font-mono);
3635}
3636
3637.install-updated-x-handle {
3638  font-size: 1rem;
3639  font-weight: 600;
3640  color: var(--color-ink);
3641  letter-spacing: -0.01em;
3642}
3643
3644.install-updated-x:hover .install-updated-x-handle {
3645  color: var(--color-accent);
3646}
3647
3648.install-updated-refs {
3649  margin-top: auto;
3650  padding-top: var(--spacing-md);
3651  border-top: 1px solid var(--color-mist);
3652}
3653
3654.install-updated-refs-label {
3655  display: block;
3656  font-family: var(--font-mono);
3657  font-size: 0.5625rem;
3658  font-weight: 600;
3659  text-transform: uppercase;
3660  letter-spacing: 0.1em;
3661  color: var(--color-ash);
3662  margin-bottom: 8px;
3663}
3664
3665.install-updated-ref {
3666  display: block;
3667  font-size: 0.8125rem;
3668  color: var(--color-charcoal);
3669  text-decoration: none;
3670  margin-bottom: 6px;
3671  transition: color var(--duration-fast) var(--ease-out);
3672}
3673
3674a.install-updated-ref:hover {
3675  color: var(--color-accent);
3676}
3677
3678.install-updated-ref-terminal {
3679  display: flex;
3680  align-items: center;
3681  gap: var(--spacing-xs);
3682  font-family: var(--font-mono);
3683  font-size: 0.75rem;
3684  color: var(--color-charcoal);
3685  background: var(--color-cream);
3686  border: 1px solid var(--color-mist);
3687  border-radius: 6px;
3688  padding: 6px 10px;
3689  margin-top: 8px;
3690}
3691
3692.install-updated-ref-terminal .terminal-prompt {
3693  color: var(--color-ash);
3694  font-size: 0.75rem;
3695}
3696
3697.install-updated-ref-terminal code {
3698  font-family: inherit;
3699  font-size: inherit;
3700  background: none;
3701  padding: 0;
3702  color: var(--color-ink);
3703}
3704
3705@media (max-width: 900px) {
3706  .install-row-primary {
3707    grid-template-columns: 1fr;
3708    gap: var(--spacing-lg);
3709    max-width: calc(100vw - var(--spacing-md) * 2);
3710  }
3711
3712  .install-primary-howto {
3713    padding-left: 0;
3714    padding-top: var(--spacing-lg);
3715    border-left: none;
3716    border-top: 1px solid var(--color-mist);
3717  }
3718
3719  .install-tool-grid {
3720    grid-template-columns: 1fr;
3721  }
3722
3723  .install-path-primary {
3724    margin-bottom: var(--spacing-sm);
3725    padding: var(--spacing-md);
3726  }
3727
3728  .install-path-title {
3729    font-size: 1.25rem;
3730  }
3731
3732  .install-path-desc {
3733    font-size: 0.875rem;
3734    overflow-wrap: break-word;
3735  }
3736
3737  .install-together-inner {
3738    flex-direction: column;
3739    align-items: flex-start;
3740    gap: var(--spacing-xs);
3741  }
3742
3743  .install-updated-subscribe {
3744    grid-template-columns: 1fr;
3745  }
3746
3747  .install-updated-substack {
3748    height: 130px;
3749  }
3750
3751  .install-updated-x {
3752    height: auto;
3753    flex-direction: row;
3754    align-items: center;
3755    justify-content: flex-start;
3756    gap: var(--spacing-sm);
3757    padding: var(--spacing-sm) var(--spacing-md);
3758  }
3759
3760  .install-updated-x-label {
3761    display: none;
3762  }
3763
3764  .install-terminal-cmd code {
3765    font-size: 0.75rem;
3766    white-space: normal;
3767    overflow-wrap: break-word;
3768  }
3769
3770  .install-alt-method {
3771    padding: var(--spacing-sm);
3772  }
3773
3774  .install-alt-method .install-terminal-cmd code {
3775    font-size: 0.6875rem;
3776    white-space: normal;
3777    overflow-wrap: break-word;
3778  }
3779
3780  .install-alt-method .install-terminal-cmd .copy-btn {
3781    display: none;
3782  }
3783
3784  .install-path-terminal .glass-terminal {
3785    box-shadow: none;
3786  }
3787
3788  .install-terminal {
3789    max-width: 100%;
3790  }
3791
3792  .install-alternatives {
3793    max-width: 100%;
3794  }
3795}
3796
3797/* Install terminal (glass terminal style) */
3798.install-terminal {
3799  max-width: 640px;
3800  margin: 0 auto;
3801}
3802
3803.install-terminal .glass-terminal {
3804  height: auto;
3805}
3806
3807.install-terminal .terminal-body {
3808  padding: 0;
3809  display: flex;
3810  flex-direction: column;
3811}
3812
3813.install-terminal-row {
3814  display: flex;
3815  flex-direction: column;
3816  gap: 6px;
3817  padding: var(--spacing-md) var(--spacing-lg);
3818}
3819
3820.install-terminal-label {
3821  font-family: var(--font-mono);
3822  font-size: 0.625rem;
3823  font-weight: 600;
3824  text-transform: uppercase;
3825  letter-spacing: 0.1em;
3826  color: var(--color-ash);
3827}
3828
3829.install-terminal-cmd {
3830  display: flex;
3831  align-items: center;
3832  gap: var(--spacing-sm);
3833}
3834
3835.install-terminal-cmd .terminal-prompt {
3836  flex-shrink: 0;
3837}
3838
3839.install-terminal-cmd code {
3840  flex: 1;
3841  font-family: var(--font-mono);
3842  font-size: 0.9375rem;
3843  color: var(--color-ink);
3844  background: transparent;
3845  padding: 0;
3846  white-space: nowrap;
3847  overflow: hidden;
3848  text-overflow: ellipsis;
3849}
3850
3851.install-terminal-cmd .copy-btn {
3852  flex-shrink: 0;
3853}
3854
3855.install-terminal-cmd .btn {
3856  padding: 0.5rem 1rem;
3857  font-size: 0.8125rem;
3858}
3859
3860.install-terminal-note {
3861  font-size: 0.75rem;
3862  color: var(--color-ash);
3863  padding-left: calc(0.75rem + var(--spacing-sm)); /* align with code after prompt */
3864}
3865
3866.install-terminal-note code {
3867  font-family: var(--font-mono);
3868  font-size: 0.6875rem;
3869  background: var(--color-mist);
3870  padding: 2px 5px;
3871  border-radius: 3px;
3872  color: var(--color-ink);
3873}
3874
3875.install-terminal-divider {
3876  height: 1px;
3877  background: var(--color-mist);
3878  margin: 0;
3879}
3880
3881@media (max-width: 600px) {
3882  .install-terminal-row {
3883    padding: var(--spacing-sm) var(--spacing-md);
3884  }
3885
3886  .install-terminal-cmd code {
3887    font-size: 0.75rem;
3888  }
3889}
3890
3891/* Works with provider badges */
3892.install-providers {
3893  display: flex;
3894  flex-direction: column;
3895  align-items: center;
3896  gap: var(--spacing-sm);
3897  margin-top: var(--spacing-md);
3898}
3899
3900.install-providers-label {
3901  font-size: 0.75rem;
3902  font-weight: 600;
3903  text-transform: uppercase;
3904  letter-spacing: 0.1em;
3905  color: var(--color-ash);
3906}
3907
3908.install-providers-row {
3909  display: flex;
3910  flex-wrap: wrap;
3911  justify-content: center;
3912  gap: var(--spacing-sm);
3913}
3914
3915.install-provider-badge {
3916  display: flex;
3917  align-items: center;
3918  gap: 6px;
3919  font-size: 0.8125rem;
3920  color: var(--color-charcoal);
3921}
3922
3923.install-provider-badge img {
3924  border-radius: 4px;
3925}
3926
3927/* Install alternatives (collapsible) */
3928.install-alternatives {
3929  max-width: 640px;
3930  margin: var(--spacing-sm) auto 0;
3931}
3932
3933.install-alternatives-toggle {
3934  font-family: var(--font-mono);
3935  font-size: 0.75rem;
3936  font-weight: 600;
3937  text-transform: uppercase;
3938  letter-spacing: 0.08em;
3939  color: var(--color-ash);
3940  cursor: pointer;
3941  padding: var(--spacing-sm) 0;
3942  list-style: none;
3943  display: flex;
3944  align-items: center;
3945  gap: 6px;
3946  transition: color var(--duration-fast) var(--ease-out);
3947}
3948
3949.install-alternatives-toggle::-webkit-details-marker {
3950  display: none;
3951}
3952
3953.install-alternatives-toggle::before {
3954  content: '';
3955  display: inline-block;
3956  width: 0;
3957  height: 0;
3958  border-left: 5px solid currentColor;
3959  border-top: 4px solid transparent;
3960  border-bottom: 4px solid transparent;
3961  transition: transform var(--duration-fast) var(--ease-out);
3962}
3963
3964.install-alternatives[open] .install-alternatives-toggle::before {
3965  transform: rotate(90deg);
3966}
3967
3968.install-alternatives-toggle:hover {
3969  color: var(--color-charcoal);
3970}
3971
3972.install-alternatives-content {
3973  animation: altFadeIn 0.2s var(--ease-out);
3974}
3975
3976@keyframes altFadeIn {
3977  from { opacity: 0; transform: translateY(-4px); }
3978  to { opacity: 1; transform: translateY(0); }
3979}
3980
3981.install-alt-method {
3982  padding: var(--spacing-md) var(--spacing-lg);
3983}
3984
3985.install-alt-label {
3986  display: block;
3987  font-family: var(--font-mono);
3988  font-size: 0.625rem;
3989  font-weight: 600;
3990  text-transform: uppercase;
3991  letter-spacing: 0.1em;
3992  color: var(--color-ash);
3993  margin-bottom: 6px;
3994}
3995
3996.install-alt-method .install-terminal-cmd {
3997  display: flex;
3998  align-items: center;
3999  gap: var(--spacing-sm);
4000}
4001
4002.install-alt-method .terminal-prompt {
4003  color: var(--color-accent);
4004  font-family: var(--font-mono);
4005  font-weight: bold;
4006  user-select: none;
4007}
4008
4009.install-alt-method code {
4010  font-family: var(--font-mono);
4011  font-size: 0.875rem;
4012  color: var(--color-ink);
4013}
4014
4015.install-alt-note {
4016  display: block;
4017  font-size: 0.75rem;
4018  color: var(--color-ash);
4019  margin-top: 4px;
4020}
4021
4022.install-alt-note code {
4023  font-family: var(--font-mono);
4024  font-size: 0.6875rem;
4025  background: var(--color-mist);
4026  padding: 2px 5px;
4027  border-radius: 3px;
4028  color: var(--color-ink);
4029}
4030
4031/* Visually hidden helper (kept for accessibility patterns elsewhere) */
4032.sr-only {
4033  position: absolute;
4034  width: 1px;
4035  height: 1px;
4036  padding: 0;
4037  margin: -1px;
4038  overflow: hidden;
4039  clip: rect(0, 0, 0, 0);
4040  white-space: nowrap;
4041  border: 0;
4042}
4043
4044@media (max-width: 600px) {
4045  .install-alt-method code {
4046    font-size: 0.75rem;
4047  }
4048}
4049
4050/* Tooltips */
4051.has-tooltip {
4052  position: relative;
4053  cursor: default;
4054}
4055
4056.has-tooltip::after {
4057  content: attr(data-tooltip);
4058  position: absolute;
4059  bottom: calc(100% + 8px);
4060  left: 50%;
4061  transform: translateX(-50%);
4062  padding: 6px 10px;
4063  background: var(--color-ink);
4064  color: var(--color-paper);
4065  font-size: 0.6875rem;
4066  line-height: 1.4;
4067  border-radius: 6px;
4068  white-space: nowrap;
4069  pointer-events: none;
4070  opacity: 0;
4071  transition: opacity 0.15s ease;
4072  z-index: 100;
4073}
4074
4075.has-tooltip:hover::after {
4076  opacity: 1;
4077}
4078
4079/* Hero logo icon wrapper */
4080.hero-logo-icon {
4081  display: inline-flex;
4082  align-items: center;
4083}
4084
4085.download-tip {
4086  font-size: 0.8125rem;
4087  color: var(--color-ash);
4088  margin-top: var(--spacing-sm);
4089  text-align: center;
4090}
4091
4092.download-tip a {
4093  color: var(--color-accent);
4094  text-decoration: none;
4095}
4096
4097.download-tip a:hover {
4098  text-decoration: underline;
4099}
4100
4101
4102/* ============================================
4103   CONSULTING SECTION
4104   ============================================ */
4105
4106.consulting-section {
4107  padding: var(--spacing-xl) 0;
4108  border-top: 1px solid var(--color-mist);
4109}
4110
4111.consulting-content {
4112  display: flex;
4113  align-items: center;
4114  justify-content: space-between;
4115  gap: var(--spacing-lg);
4116  flex-wrap: wrap;
4117}
4118
4119.consulting-actions {
4120  display: flex;
4121  gap: var(--spacing-sm);
4122  flex-shrink: 0;
4123}
4124
4125.consulting-text {
4126  flex: 1;
4127  min-width: 280px;
4128}
4129
4130.consulting-title {
4131  font-size: clamp(1.5rem, 4vw, 2rem);
4132  font-weight: 300;
4133  font-style: italic;
4134  margin: 0 0 var(--spacing-sm) 0;
4135}
4136
4137.consulting-desc {
4138  font-size: 1rem;
4139  color: var(--color-charcoal);
4140  line-height: 1.6;
4141  margin: 0;
4142  max-width: 45ch;
4143}
4144
4145@media (max-width: 600px) {
4146  .consulting-content {
4147    flex-direction: column;
4148    align-items: flex-start;
4149  }
4150
4151  .consulting-actions {
4152    flex-direction: column;
4153    width: 100%;
4154  }
4155
4156  .consulting-actions .btn {
4157    width: 100%;
4158    justify-content: center;
4159  }
4160}