1/* Workflow / Commands - Renaissance Edition */
   2
   3.commands-section {
   4  position: relative;
   5  padding: var(--spacing-xl) 0;
   6  background: var(--color-paper);
   7}
   8
   9.commands-gallery {
  10  /* Reset grid */
  11  display: block;
  12}
  13
  14/* ============================================
  15   MAGAZINE SPREAD - Desktop Layout
  16   ============================================ */
  17
  18/* Category accent colors */
  19.magazine-spread[data-category="create"] { --spread-accent: oklch(55% 0.20 340); }
  20.magazine-spread[data-category="evaluate"] { --spread-accent: oklch(55% 0.20 300); }
  21.magazine-spread[data-category="refine"] { --spread-accent: oklch(55% 0.18 260); }
  22.magazine-spread[data-category="simplify"] { --spread-accent: oklch(55% 0.20 80); }
  23.magazine-spread[data-category="harden"] { --spread-accent: oklch(55% 0.20 160); }
  24.magazine-spread[data-category="system"] { --spread-accent: oklch(45% 0.05 0); }
  25
  26.magazine-container {
  27  position: relative;
  28  width: 100%;
  29  display: grid;
  30  grid-template-columns: 200px 1fr;
  31  gap: var(--spacing-lg);
  32  align-items: start;
  33  overflow: hidden;
  34}
  35
  36@media (min-width: 1100px) {
  37  .magazine-container {
  38    background: white;
  39    border-radius: 16px;
  40    padding: var(--spacing-lg);
  41  }
  42}
  43
  44/* Fisheye command list */
  45.fisheye-list {
  46  position: relative;
  47  height: 400px;
  48  align-self: center;
  49  overflow: hidden;
  50  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  51  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  52}
  53
  54.fisheye-scroll {
  55  height: 100%;
  56  overflow-y: auto;
  57  scrollbar-width: none;
  58  position: relative;
  59}
  60
  61.fisheye-scroll::-webkit-scrollbar { display: none; }
  62
  63.fisheye-item {
  64  display: block;
  65  font-family: var(--font-display);
  66  font-size: 1.5rem;
  67  font-weight: 400;
  68  color: var(--color-ink);
  69  background: none;
  70  border: none;
  71  padding: 0;
  72  position: absolute;
  73  left: 0;
  74  cursor: pointer;
  75  white-space: nowrap;
  76  text-align: left;
  77  width: 100%;
  78  line-height: 1.3;
  79  transform-origin: left center;
  80  will-change: transform, opacity;
  81}
  82
  83.fisheye-slash {
  84  color: var(--color-mist);
  85  font-weight: 300;
  86}
  87
  88.fisheye-item.is-active {
  89  font-weight: 600;
  90}
  91
  92.fisheye-item.is-active .fisheye-slash {
  93  color: var(--color-accent);
  94}
  95
  96
  97.fisheye-beta {
  98  font-family: var(--font-body);
  99  font-size: 0.45rem;
 100  font-weight: 600;
 101  letter-spacing: 0.08em;
 102  text-transform: uppercase;
 103  color: var(--color-ash);
 104  border: 1px solid var(--color-mist);
 105  border-radius: 3px;
 106  padding: 1px 4px;
 107  margin-left: 0.35em;
 108  vertical-align: middle;
 109}
 110
 111/* The viewport that clips to one spread at a time */
 112.magazine-viewport {
 113  position: relative;
 114  height: 520px;
 115  overflow: hidden;
 116}
 117
 118/* Individual spread */
 119.magazine-spread {
 120  position: absolute;
 121  inset: 0;
 122  display: grid;
 123  grid-template-columns: 38% 1fr;
 124  grid-template-rows: 1fr auto;
 125  gap: 0 var(--spacing-2xl);
 126  padding: var(--spacing-lg) var(--spacing-lg);
 127  opacity: 0;
 128  pointer-events: none;
 129  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
 130              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
 131  transform: translateY(16px);
 132  will-change: opacity, transform;
 133}
 134
 135.magazine-spread.active {
 136  opacity: 1;
 137  pointer-events: auto;
 138  transform: translateY(0);
 139  z-index: 2;
 140}
 141
 142.magazine-spread.exiting {
 143  opacity: 0;
 144  transform: translateY(-16px);
 145  z-index: 1;
 146}
 147
 148/* Left column: Big name + meta */
 149.spread-identity {
 150  grid-column: 1;
 151  grid-row: 1 / 3;
 152  display: flex;
 153  flex-direction: column;
 154  justify-content: center;
 155  gap: var(--spacing-md);
 156  padding-right: var(--spacing-lg);
 157}
 158
 159.spread-category-label {
 160  font-family: var(--font-body);
 161  font-size: 0.6875rem;
 162  font-weight: 600;
 163  text-transform: uppercase;
 164  letter-spacing: 0.14em;
 165  color: var(--spread-accent);
 166}
 167
 168.spread-command-name {
 169  white-space: nowrap;
 170  font-family: var(--font-display);
 171  font-size: clamp(3rem, 5.5vw, 5.5rem);
 172  font-weight: 600;
 173  line-height: 0.95;
 174  color: var(--color-ink);
 175  margin: 0;
 176  letter-spacing: -0.02em;
 177}
 178
 179.spread-command-name .spread-slash {
 180  color: var(--spread-accent);
 181  font-weight: 300;
 182}
 183
 184/* Sub-commands: stack the /impeccable namespace as a smaller label above the
 185   command name so the command name stays at full display size and never
 186   clips (e.g., "overdrive" is long). */
 187.spread-command-name .spread-namespace {
 188  display: block;
 189  font-family: var(--font-body);
 190  font-size: 0.875rem;
 191  font-weight: 500;
 192  color: var(--color-ash);
 193  letter-spacing: 0.04em;
 194  margin-bottom: 0.4em;
 195}
 196
 197.spread-command-name .spread-namespace .spread-slash {
 198  color: var(--spread-accent);
 199  font-weight: 400;
 200}
 201
 202.spread-command-name .beta-badge {
 203  font-family: var(--font-body);
 204  font-size: 0.55rem;
 205  font-weight: 600;
 206  letter-spacing: 0.08em;
 207  text-transform: uppercase;
 208  color: var(--spread-accent);
 209  border: 1px solid var(--spread-accent);
 210  border-radius: 3px;
 211  padding: 2px 6px;
 212  vertical-align: super;
 213  margin-left: 8px;
 214}
 215
 216.spread-description {
 217  font-family: var(--font-body);
 218  font-size: 0.9375rem;
 219  line-height: 1.6;
 220  color: var(--color-charcoal);
 221  max-width: 360px;
 222}
 223
 224/* Flow / relationship line */
 225.spread-flow {
 226  display: flex;
 227  align-items: center;
 228  gap: 6px;
 229  flex-wrap: nowrap;
 230  margin-top: var(--spacing-xs);
 231  white-space: nowrap;
 232}
 233
 234.spread-flow-label {
 235  font-family: var(--font-body);
 236  font-size: 0.75rem;
 237  color: var(--color-ash);
 238}
 239
 240.spread-flow-icon {
 241  color: var(--spread-accent);
 242  font-weight: 600;
 243  font-size: 0.8125rem;
 244}
 245
 246.spread-flow-cmd {
 247  font-family: var(--font-mono);
 248  font-size: 0.6875rem;
 249  background: var(--color-mist);
 250  padding: 2px 7px;
 251  border-radius: 3px;
 252  color: var(--color-ink);
 253}
 254
 255/* Right column: Demo area */
 256.spread-demo-area {
 257  grid-column: 2;
 258  grid-row: 1 / 3;
 259  display: flex;
 260  flex-direction: column;
 261  min-height: 0;
 262  overflow: hidden;
 263}
 264
 265/* Demo split comparison inside the spread */
 266.spread-demo-area .demo-split-comparison {
 267  display: flex;
 268  flex-direction: column;
 269  height: 100%;
 270  flex: 1;
 271  min-height: 0;
 272}
 273
 274.spread-demo-area .demo-split-comparison .split-container {
 275  position: relative;
 276  flex: 1;
 277  min-height: 0;
 278  overflow: hidden;
 279  cursor: ew-resize;
 280  user-select: none;
 281  background: var(--color-cream);
 282}
 283
 284.spread-demo-area .demo-split-comparison .split-before,
 285.spread-demo-area .demo-split-comparison .split-after {
 286  position: absolute;
 287  inset: 0;
 288  display: flex;
 289  align-items: center;
 290  justify-content: center;
 291  padding: var(--spacing-md);
 292}
 293
 294.spread-demo-area .demo-split-comparison .split-before {
 295  z-index: 1;
 296  background: var(--color-cream);
 297}
 298
 299.spread-demo-area .demo-split-comparison .split-after {
 300  z-index: 2;
 301  background: var(--color-paper);
 302  clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%);
 303}
 304
 305.spread-demo-area .demo-split-comparison .split-content {
 306  width: 100%;
 307  max-width: 320px;
 308  display: flex;
 309  flex-direction: column;
 310  align-items: center;
 311  justify-content: center;
 312}
 313
 314.spread-demo-area .demo-split-comparison .split-divider {
 315  position: absolute;
 316  top: 0;
 317  bottom: 0;
 318  left: 50%;
 319  width: 2px;
 320  background: var(--spread-accent, var(--color-accent));
 321  transform: translateX(-50%) skewX(-10deg);
 322  pointer-events: none;
 323  z-index: 3;
 324  box-shadow: 0 0 12px rgba(0,0,0,0.1);
 325}
 326
 327.spread-demo-area .demo-split-comparison .split-label {
 328  position: absolute;
 329  top: 50%;
 330  left: 50%;
 331  transform: translate(-50%, -50%) skewX(10deg);
 332  font-size: 0.5625rem;
 333  font-weight: 600;
 334  letter-spacing: 0.08em;
 335  text-transform: uppercase;
 336  color: var(--color-paper);
 337  background: var(--spread-accent, var(--color-accent));
 338  padding: 4px 10px;
 339  border-radius: 3px;
 340  white-space: nowrap;
 341}
 342
 343.spread-demo-area .demo-split-comparison .demo-caption {
 344  flex-shrink: 0;
 345  font-size: 0.75rem;
 346  color: var(--color-ash);
 347  text-align: center;
 348  padding: var(--spacing-sm) var(--spacing-md);
 349}
 350
 351/* Fallback demo container inside spread */
 352.spread-demo-area .demo-container {
 353  flex: 1;
 354  display: flex;
 355  flex-direction: column;
 356}
 357
 358.spread-demo-area .demo-container .demo-viewport {
 359  flex: 1;
 360  display: flex;
 361  align-items: center;
 362  justify-content: center;
 363  max-width: 420px;
 364  background: none;
 365  min-height: auto;
 366}
 367
 368/* (nav moved to fisheye list) */
 369
 370/* ============================================
 371   OLD DESKTOP STYLES (kept for mobile reuse)
 372   ============================================ */
 373
 374.commands-container {
 375  display: grid;
 376  grid-template-columns: 1fr 1.2fr;
 377  gap: var(--spacing-2xl);
 378  align-items: start;
 379}
 380
 381@media (max-width: 900px) {
 382  .commands-container {
 383    grid-template-columns: 1fr;
 384  }
 385}
 386
 387/* Left: The Manual (Scrollable) */
 388.command-manual {
 389  display: flex;
 390  flex-direction: column;
 391  gap: var(--spacing-sm);
 392  padding-bottom: 20vh;
 393}
 394
 395.command-category-header {
 396  font-family: var(--font-display);
 397  font-size: 0.875rem;
 398  font-weight: 600;
 399  color: var(--color-accent);
 400  text-transform: uppercase;
 401  letter-spacing: 0.1em;
 402  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-sm);
 403  margin-top: var(--spacing-md);
 404  border-bottom: 1px solid var(--color-mist);
 405}
 406
 407.command-category-header:first-child {
 408  margin-top: 0;
 409}
 410
 411.manual-entry {
 412  position: relative;
 413  padding: var(--spacing-lg);
 414  padding-left: calc(var(--spacing-lg) + 16px); /* Reserve space for transform */
 415  border-left: 2px solid var(--color-mist);
 416  transition: border-color 0.4s var(--ease-out), opacity 0.4s var(--ease-out), background 0.4s var(--ease-out), transform 0.4s var(--ease-out);
 417  opacity: 0.4;
 418  cursor: pointer;
 419  transform: translateX(-16px);
 420}
 421
 422.manual-entry:hover {
 423  opacity: 0.7;
 424}
 425
 426.manual-entry.active {
 427  border-left-color: var(--color-accent);
 428  opacity: 1;
 429  transform: translateX(0);
 430  background: linear-gradient(to right, var(--color-bg), transparent);
 431}
 432
 433.manual-cmd-name {
 434  font-family: var(--font-mono);
 435  font-size: 1.5rem;
 436  margin: 0 0 var(--spacing-sm);
 437  color: var(--color-ink);
 438  font-weight: 500;
 439}
 440
 441.beta-badge {
 442  font-family: var(--font-body);
 443  font-size: 0.55rem;
 444  font-weight: 600;
 445  letter-spacing: 0.08em;
 446  text-transform: uppercase;
 447  color: var(--color-accent);
 448  border: 1px solid var(--color-accent);
 449  border-radius: 3px;
 450  padding: 1px 5px;
 451  vertical-align: middle;
 452  margin-left: 6px;
 453}
 454
 455.section-title .beta-badge {
 456  font-size: 0.6875rem;
 457  padding: 2px 7px;
 458  border-radius: 4px;
 459  vertical-align: 0.35em;
 460  margin-left: 10px;
 461}
 462
 463.manual-cmd-desc {
 464  font-size: 0.875rem;
 465  line-height: 1.5;
 466  color: var(--color-charcoal);
 467  margin: 0;
 468}
 469
 470.manual-cmd-rel {
 471  font-size: 0.8125rem;
 472  color: var(--color-ash);
 473  margin-top: var(--spacing-sm);
 474  display: flex;
 475  align-items: center;
 476  gap: 0.5ch;
 477  flex-wrap: wrap;
 478}
 479
 480.manual-cmd-rel .rel-icon {
 481  color: var(--color-accent);
 482  font-weight: 600;
 483}
 484
 485.manual-cmd-rel code {
 486  font-family: var(--font-mono);
 487  font-size: 0.75rem;
 488  background: var(--color-mist);
 489  padding: 2px 6px;
 490  border-radius: 3px;
 491  color: var(--color-ink);
 492}
 493
 494/* Right: The Terminal Stack (Sticky, vertically centered) */
 495.glass-terminal-wrapper {
 496  position: sticky;
 497  top: 50vh;
 498  transform: translateY(-50%);
 499  height: calc(100vh - var(--spacing-xl) * 2);
 500  max-height: 800px;
 501  min-height: 500px;
 502}
 503
 504/* Stacked Windows Container */
 505.terminal-stack {
 506  position: relative;
 507  height: 100%;
 508  perspective: 1200px;
 509}
 510
 511.terminal-stack-tabs {
 512  position: absolute;
 513  top: -31px;
 514  right: 8px;
 515  display: flex;
 516  gap: 4px;
 517  z-index: 10;
 518}
 519
 520.terminal-stack-tab {
 521  font-family: var(--font-mono);
 522  font-size: 0.75rem;
 523  padding: 5px 12px;
 524  background: var(--color-cream);
 525  border: 1px solid var(--color-mist);
 526  border-bottom: none;
 527  border-radius: 6px 6px 0 0;
 528  color: var(--color-ash);
 529  cursor: pointer;
 530  transition: all 0.2s ease;
 531}
 532
 533.terminal-stack-tab:hover {
 534  background: var(--color-paper);
 535  color: var(--color-charcoal);
 536}
 537
 538.terminal-stack-tab.active {
 539  background: var(--color-paper);
 540  color: var(--color-ink);
 541  border-color: var(--color-mist);
 542}
 543
 544/* Individual Windows */
 545.terminal-window {
 546  position: absolute;
 547  inset: 0;
 548  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
 549              opacity 0.3s ease,
 550              filter 0.3s ease;
 551  transform-origin: center bottom;
 552}
 553
 554/* Demo window (front by default) */
 555.terminal-window--demo {
 556  z-index: 2;
 557}
 558
 559.terminal-window--demo.is-back {
 560  transform: translateY(16px) translateX(12px) scale(0.96);
 561  opacity: 0.6;
 562  filter: brightness(0.92);
 563  pointer-events: none;
 564  z-index: 1;
 565}
 566
 567/* Source window (back by default) */
 568.terminal-window--source {
 569  z-index: 1;
 570  transform: translateY(16px) translateX(12px) scale(0.96);
 571  opacity: 0.6;
 572  filter: brightness(0.92);
 573  pointer-events: none;
 574}
 575
 576.terminal-window--source.is-front {
 577  transform: translateY(0) translateX(0) scale(1);
 578  opacity: 1;
 579  filter: brightness(1);
 580  pointer-events: auto;
 581  z-index: 2;
 582}
 583
 584/* Source Window Content */
 585.source-window {
 586  background: var(--color-paper);
 587  backdrop-filter: blur(12px);
 588  -webkit-backdrop-filter: blur(12px);
 589  border: 1px solid var(--color-mist);
 590  border-radius: 8px;
 591  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.15);
 592  height: 100%;
 593  display: flex;
 594  flex-direction: column;
 595  overflow: hidden;
 596}
 597
 598.source-header {
 599  background: var(--color-cream);
 600  padding: 12px 16px;
 601  display: flex;
 602  align-items: center;
 603  gap: 8px;
 604  border-bottom: 1px solid var(--color-mist);
 605  flex-shrink: 0;
 606}
 607
 608.source-title {
 609  font-family: var(--font-mono);
 610  font-size: 0.875rem;
 611  color: var(--color-ink);
 612  font-weight: 500;
 613}
 614
 615.source-body {
 616  flex: 1;
 617  padding: var(--spacing-md);
 618  font-family: var(--font-mono);
 619  font-size: 0.75rem;
 620  line-height: 1.5;
 621  color: var(--color-charcoal);
 622  overflow-y: auto;
 623  overscroll-behavior: contain;
 624  white-space: pre-wrap;
 625  word-break: break-word;
 626  background: var(--color-cream);
 627}
 628
 629.source-loading {
 630  color: var(--color-ash);
 631  font-style: italic;
 632}
 633
 634@media (max-width: 900px) {
 635  .magazine-container { display: none; }
 636  .fisheye-list { display: none; }
 637  .glass-terminal-wrapper {
 638    display: none; /* Hide on mobile for now, or stack */
 639  }
 640}
 641
 642.glass-terminal {
 643  background: var(--color-paper);
 644  backdrop-filter: blur(12px);
 645  -webkit-backdrop-filter: blur(12px);
 646  border: 1px solid var(--color-mist);
 647  border-radius: 8px;
 648  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.15);
 649  height: 100%;
 650  display: flex;
 651  flex-direction: column;
 652  overflow: hidden;
 653}
 654
 655.terminal-header {
 656  background: var(--color-cream);
 657  padding: 12px 16px;
 658  display: flex;
 659  align-items: center;
 660  gap: 8px;
 661  border-bottom: 1px solid var(--color-mist);
 662}
 663
 664.terminal-dot {
 665  width: 10px;
 666  height: 10px;
 667  border-radius: 50%;
 668}
 669.terminal-dot.red { background: #ff5f56; }
 670.terminal-dot.yellow { background: #ffbd2e; }
 671.terminal-dot.green { background: #27c93f; }
 672
 673.terminal-title {
 674  margin-left: auto;
 675  font-family: var(--font-mono);
 676  font-size: 0.75rem;
 677  color: var(--color-ash);
 678}
 679
 680.terminal-body {
 681  flex: 1;
 682  padding: var(--spacing-md);
 683  font-family: var(--font-mono);
 684  font-size: 0.9375rem;
 685  color: var(--color-ink);
 686  overflow-y: auto;
 687  display: flex;
 688  flex-direction: column;
 689  min-height: 0; /* Allow flex shrinking */
 690}
 691
 692.terminal-line {
 693  margin-bottom: var(--spacing-sm);
 694  display: flex;
 695  gap: var(--spacing-sm);
 696  line-height: 1.5;
 697}
 698
 699.terminal-prompt {
 700  color: var(--color-accent);
 701  user-select: none;
 702  font-weight: bold;
 703}
 704
 705.terminal-cursor {
 706  display: inline-block;
 707  width: 8px;
 708  height: 1.2em;
 709  background: var(--color-accent);
 710  vertical-align: middle;
 711  animation: blink 1s step-end infinite;
 712}
 713
 714.terminal-output {
 715  color: var(--color-ash);
 716  margin-bottom: var(--spacing-md);
 717  white-space: pre-wrap;
 718}
 719
 720/* Hide steps when viewport is short */
 721@media (max-height: 800px) {
 722  .terminal-output {
 723    display: none;
 724  }
 725}
 726
 727.terminal-cmd {
 728  color: var(--color-accent);
 729  font-weight: 600;
 730}
 731
 732.terminal-step {
 733  color: var(--color-charcoal);
 734}
 735
 736.terminal-done {
 737  color: var(--color-success, #22c55e);
 738  font-weight: 500;
 739}
 740
 741.terminal-preview {
 742  background: var(--color-paper);
 743  margin: var(--spacing-sm) 0;
 744  flex: 1;
 745  min-height: 0; /* Allow shrinking */
 746  overflow: hidden;
 747  border-radius: 12px;
 748}
 749
 750.terminal-cursor-line {
 751  flex-shrink: 0;
 752  margin-top: var(--spacing-sm) !important;
 753}
 754
 755/* Demo Split Comparison in Terminal */
 756.terminal-preview .demo-split-comparison {
 757  display: flex;
 758  flex-direction: column;
 759  height: 100%;
 760}
 761
 762.terminal-preview .demo-split-comparison .split-container {
 763  position: relative;
 764  flex: 1;
 765  min-height: 0;
 766  overflow: hidden;
 767  cursor: ew-resize;
 768  user-select: none;
 769  background: var(--color-cream);
 770}
 771
 772.terminal-preview .demo-split-comparison .split-before,
 773.terminal-preview .demo-split-comparison .split-after {
 774  position: absolute;
 775  inset: 0;
 776  display: flex;
 777  align-items: center;
 778  justify-content: center;
 779  padding: var(--spacing-md);
 780}
 781
 782.terminal-preview .demo-split-comparison .split-before {
 783  z-index: 1;
 784  background: var(--color-cream);
 785}
 786
 787.terminal-preview .demo-split-comparison .split-after {
 788  z-index: 2;
 789  background: var(--color-paper);
 790  clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%);
 791}
 792
 793.terminal-preview .demo-split-comparison .split-content {
 794  width: 100%;
 795  max-width: 280px;
 796  display: flex;
 797  flex-direction: column;
 798  align-items: center;
 799  justify-content: center;
 800}
 801
 802.terminal-preview .demo-split-comparison .split-divider {
 803  position: absolute;
 804  top: 0;
 805  bottom: 0;
 806  left: 50%;
 807  width: 2px;
 808  background: var(--color-accent);
 809  transform: translateX(-50%) skewX(-10deg);
 810  pointer-events: none;
 811  z-index: 3;
 812  box-shadow: 0 0 12px rgba(0,0,0,0.1);
 813}
 814
 815.terminal-preview .demo-split-comparison .split-label {
 816  position: absolute;
 817  top: 50%;
 818  left: 50%;
 819  transform: translate(-50%, -50%) skewX(10deg);
 820  font-size: 0.5625rem;
 821  font-weight: 600;
 822  letter-spacing: 0.08em;
 823  text-transform: uppercase;
 824  color: var(--color-paper);
 825  background: var(--color-accent);
 826  padding: 4px 10px;
 827  border-radius: 3px;
 828  white-space: nowrap;
 829}
 830
 831.terminal-preview .demo-split-comparison .demo-caption {
 832  flex-shrink: 0;
 833  font-size: 0.75rem;
 834  color: var(--color-ash);
 835  text-align: center;
 836  padding: var(--spacing-sm) var(--spacing-md);
 837}
 838
 839@keyframes blink { 50% { opacity: 0; } }
 840
 841/* ============================================
 842   CASE STUDIES / TRANSFORMATIONS SECTION
 843   ============================================ */
 844
 845.casestudies-section {
 846  position: relative;
 847  padding: var(--spacing-2xl) 0;
 848  border-top: 1px solid var(--color-mist);
 849}
 850
 851/* Tabbed transformations */
 852.transformations-tabbed {
 853  margin-top: var(--spacing-xl);
 854}
 855
 856.transformation-tabs {
 857  display: flex;
 858  gap: var(--spacing-xs);
 859  border-bottom: 1px solid var(--color-mist);
 860  margin-bottom: var(--spacing-lg);
 861}
 862
 863.transformation-tab {
 864  font-family: var(--font-display);
 865  font-size: 0.9375rem;
 866  font-weight: 500;
 867  color: var(--color-ash);
 868  background: none;
 869  border: none;
 870  padding: var(--spacing-sm) var(--spacing-md);
 871  cursor: pointer;
 872  position: relative;
 873  transition: color 0.2s ease;
 874}
 875
 876.transformation-tab:hover {
 877  color: var(--color-charcoal);
 878}
 879
 880.transformation-tab.active {
 881  color: var(--color-ink);
 882}
 883
 884.transformation-tab.active::after {
 885  content: '';
 886  position: absolute;
 887  bottom: -1px;
 888  left: 0;
 889  right: 0;
 890  height: 2px;
 891  background: var(--color-accent);
 892}
 893
 894.transformation-panels {
 895  position: relative;
 896}
 897
 898.transformation-panel {
 899  display: none;
 900  flex-direction: column;
 901  gap: var(--spacing-lg);
 902  animation: fadeInPanel 0.3s ease;
 903}
 904
 905.transformation-panel.active {
 906  display: flex;
 907}
 908
 909@keyframes fadeInPanel {
 910  from {
 911    opacity: 0;
 912    transform: translateY(8px);
 913  }
 914  to {
 915    opacity: 1;
 916    transform: translateY(0);
 917  }
 918}
 919
 920/* Side-by-side images */
 921.transformation-images {
 922  display: flex;
 923  align-items: center;
 924  gap: var(--spacing-md);
 925}
 926
 927.transformation-before,
 928.transformation-after {
 929  flex: 1;
 930  margin: 0;
 931}
 932
 933.transformation-before img,
 934.transformation-after img,
 935.transformation-placeholder {
 936  width: 100%;
 937  aspect-ratio: 16 / 10;
 938  object-fit: cover;
 939  border-radius: 8px;
 940  border: 1px solid var(--color-mist);
 941  cursor: pointer;
 942  transition: transform 0.2s ease, box-shadow 0.2s ease;
 943}
 944
 945.transformation-before img:hover,
 946.transformation-after img:hover,
 947.transformation-placeholder:hover {
 948  transform: scale(1.02);
 949  box-shadow: 0 8px 24px -4px rgba(0,0,0,0.15);
 950}
 951
 952.transformation-placeholder {
 953  background: linear-gradient(135deg, var(--color-mist) 0%, var(--color-cream) 100%);
 954  display: flex;
 955  align-items: center;
 956  justify-content: center;
 957  color: var(--color-ash);
 958  font-size: 0.8125rem;
 959  font-style: italic;
 960}
 961
 962.transformation-before figcaption,
 963.transformation-after figcaption {
 964  font-size: 0.75rem;
 965  font-weight: 600;
 966  text-transform: uppercase;
 967  letter-spacing: 0.05em;
 968  color: var(--color-ash);
 969  margin-top: var(--spacing-xs);
 970  text-align: center;
 971}
 972
 973.transformation-arrow {
 974  font-size: 1.5rem;
 975  color: var(--color-accent);
 976  font-weight: 300;
 977  flex-shrink: 0;
 978}
 979
 980/* Info section */
 981.transformation-info {
 982  max-width: 600px;
 983}
 984
 985.transformation-title {
 986  font-family: var(--font-display);
 987  font-size: 1.25rem;
 988  font-weight: 600;
 989  color: var(--color-ink);
 990  margin: 0 0 var(--spacing-xs);
 991}
 992
 993.transformation-desc {
 994  font-size: 0.9375rem;
 995  color: var(--color-charcoal);
 996  line-height: 1.6;
 997  margin: 0 0 var(--spacing-sm);
 998}
 999
1000.transformation-commands {
1001  display: flex;
1002  flex-wrap: wrap;
1003  gap: 6px;
1004}
1005
1006.transformation-command {
1007  font-family: var(--font-mono);
1008  font-size: 0.75rem;
1009  background: var(--color-mist);
1010  color: var(--color-charcoal);
1011  padding: 4px 10px;
1012  border-radius: 4px;
1013}
1014
1015/* Lightbox */
1016.lightbox {
1017  position: fixed;
1018  inset: 0;
1019  background: rgba(0, 0, 0, 0.9);
1020  display: flex;
1021  align-items: center;
1022  justify-content: center;
1023  z-index: 1000;
1024  opacity: 0;
1025  visibility: hidden;
1026  transition: opacity 0.3s ease, visibility 0.3s ease;
1027}
1028
1029.lightbox.active {
1030  opacity: 1;
1031  visibility: visible;
1032}
1033
1034.lightbox-close {
1035  position: absolute;
1036  top: 20px;
1037  right: 24px;
1038  background: none;
1039  border: none;
1040  color: white;
1041  font-size: 2.5rem;
1042  cursor: pointer;
1043  opacity: 0.7;
1044  transition: opacity 0.2s ease;
1045  line-height: 1;
1046}
1047
1048.lightbox-close:hover {
1049  opacity: 1;
1050}
1051
1052.lightbox-image {
1053  max-width: 90vw;
1054  max-height: 85vh;
1055  object-fit: contain;
1056  border-radius: 8px;
1057  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
1058}
1059
1060@media (max-width: 768px) {
1061  .transformation-images {
1062    flex-direction: column;
1063  }
1064
1065  .transformation-arrow {
1066    transform: rotate(90deg);
1067  }
1068
1069  .transformation-before,
1070  .transformation-after {
1071    width: 100%;
1072  }
1073}
1074
1075/* ============================================
1076   HERO VERSION LINK
1077   ============================================ */
1078
1079.hero-version-link {
1080  font-size: 0.8125rem;
1081  color: var(--color-ash);
1082  margin-top: var(--spacing-sm);
1083}
1084
1085.hero-version-link a {
1086  color: var(--color-ash);
1087  text-decoration: none;
1088  border-bottom: 1px solid transparent;
1089  transition: color 0.2s ease, border-color 0.2s ease;
1090}
1091
1092.hero-version-link a:hover {
1093  color: var(--color-accent);
1094  border-bottom-color: var(--color-accent);
1095}
1096
1097/* ============================================
1098   CHANGELOG + FAQ ROW (side-by-side on desktop)
1099   ============================================ */
1100
1101.changelog-faq-row {
1102  position: relative;
1103}
1104
1105@media (min-width: 1024px) {
1106  .changelog-faq-row {
1107    display: grid;
1108    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
1109    column-gap: calc(var(--spacing-xl) * 1.5);
1110    border-top: 1px solid var(--color-mist);
1111  }
1112
1113  .changelog-faq-row > .changelog-section,
1114  .changelog-faq-row > .faq-section {
1115    border-top: none;
1116  }
1117
1118  .changelog-faq-row > .faq-section {
1119    border-left: 1px solid var(--color-mist);
1120    padding-left: calc(var(--spacing-xl) * 0.75);
1121    margin-left: calc(var(--spacing-xl) * -0.75);
1122  }
1123}
1124
1125/* ============================================
1126   CHANGELOG SECTION
1127   ============================================ */
1128
1129.changelog-section {
1130  position: relative;
1131  padding: var(--spacing-xl) 0;
1132  border-top: 1px solid var(--color-mist);
1133}
1134
1135.changelog-list {
1136  display: flex;
1137  flex-direction: column;
1138  gap: 0;
1139}
1140
1141.changelog-entry {
1142  padding: var(--spacing-md) 0;
1143}
1144
1145.changelog-entry + .changelog-entry {
1146  border-top: 1px solid var(--color-mist);
1147}
1148
1149.changelog-version-header {
1150  display: flex;
1151  align-items: baseline;
1152  gap: var(--spacing-sm);
1153  margin-bottom: var(--spacing-sm);
1154}
1155
1156.changelog-version {
1157  font-family: var(--font-mono);
1158  font-size: 1.125rem;
1159  font-weight: 600;
1160  color: var(--color-ink);
1161}
1162
1163.changelog-date {
1164  font-size: 0.8125rem;
1165  color: var(--color-ash);
1166}
1167
1168.changelog-items {
1169  margin: 0;
1170  padding-left: var(--spacing-md);
1171  color: var(--color-charcoal);
1172  font-size: 0.9375rem;
1173  line-height: 1.65;
1174  max-width: 72ch;
1175}
1176
1177.changelog-items li {
1178  margin-bottom: var(--spacing-xs);
1179}
1180
1181.changelog-items code {
1182  font-family: var(--font-mono);
1183  font-size: 0.875em;
1184  background: var(--color-mist);
1185  padding: 2px 6px;
1186  border-radius: 3px;
1187  color: var(--color-ink);
1188}
1189
1190/* Changelog: highlight reel */
1191.changelog-highlights {
1192  padding-bottom: var(--spacing-md);
1193  border-bottom: 1px solid var(--color-mist);
1194}
1195.changelog-highlights-label {
1196  font-family: var(--font-mono);
1197  font-size: 1.125rem;
1198  font-weight: 600;
1199  color: var(--color-ink);
1200  margin: 0 0 var(--spacing-sm);
1201}
1202.changelog-highlights-label .changelog-date {
1203  margin-left: var(--spacing-xs);
1204}
1205
1206/* Changelog: collapsible older entries */
1207.changelog-older {
1208  margin-top: 0;
1209}
1210.changelog-older + .changelog-older {
1211  margin-top: 0;
1212  border-top: 1px solid var(--color-mist);
1213}
1214
1215.changelog-older-toggle {
1216  font-family: var(--font-body);
1217  font-size: 0.875rem;
1218  font-weight: 500;
1219  color: var(--color-accent);
1220  padding: var(--spacing-md) 0;
1221  cursor: pointer;
1222  list-style: none;
1223  display: flex;
1224  align-items: center;
1225  gap: 6px;
1226  transition: color 0.2s ease;
1227}
1228
1229.changelog-older-toggle::-webkit-details-marker {
1230  display: none;
1231}
1232
1233.changelog-older-toggle::before {
1234  content: '+';
1235  font-size: 1.25rem;
1236  font-weight: 300;
1237  transition: transform 0.3s var(--ease-out);
1238}
1239
1240.changelog-older[open] .changelog-older-toggle::before {
1241  transform: rotate(45deg);
1242}
1243
1244.changelog-older-toggle:hover {
1245  color: var(--color-accent-hover);
1246}
1247
1248.changelog-older-entries {
1249  animation: faqFadeIn 0.3s var(--ease-out);
1250}
1251
1252
1253/* ============================================
1254   FAQ SECTION
1255   ============================================ */
1256
1257.faq-section {
1258  position: relative;
1259  padding: var(--spacing-xl) 0;
1260  border-top: 1px solid var(--color-mist);
1261}
1262
1263.faq-list {
1264  display: flex;
1265  flex-direction: column;
1266  gap: 0;
1267}
1268
1269.faq-item {
1270  border-bottom: 1px solid var(--color-mist);
1271}
1272
1273.faq-question {
1274  font-family: var(--font-display);
1275  font-size: 1.125rem;
1276  font-weight: 500;
1277  color: var(--color-ink);
1278  padding: var(--spacing-md) calc(var(--spacing-md) + 1.5rem) var(--spacing-md) 0;
1279  cursor: pointer;
1280  list-style: none;
1281  position: relative;
1282  transition: color 0.2s ease;
1283}
1284
1285.faq-question::-webkit-details-marker {
1286  display: none;
1287}
1288
1289.faq-question::after {
1290  content: '+';
1291  font-family: var(--font-body);
1292  font-size: 1.5rem;
1293  font-weight: 300;
1294  color: var(--color-accent);
1295  transition: transform 0.3s var(--ease-out);
1296  position: absolute;
1297  right: 0;
1298  top: 50%;
1299  transform: translateY(-50%);
1300}
1301
1302.faq-item[open] .faq-question::after {
1303  transform: translateY(-50%) rotate(45deg);
1304}
1305
1306.faq-question:hover {
1307  color: var(--color-accent);
1308}
1309
1310.faq-answer {
1311  padding: 0 0 var(--spacing-md);
1312  color: var(--color-charcoal);
1313  line-height: 1.7;
1314  max-width: 70ch;
1315  animation: faqFadeIn 0.3s var(--ease-out);
1316}
1317
1318.faq-answer p {
1319  margin: 0 0 var(--spacing-sm);
1320}
1321
1322.faq-answer p:last-child {
1323  margin-bottom: 0;
1324}
1325
1326.faq-answer ul {
1327  margin: var(--spacing-sm) 0;
1328  padding-left: var(--spacing-md);
1329}
1330
1331.faq-answer li {
1332  margin-bottom: var(--spacing-xs);
1333}
1334
1335.faq-answer code {
1336  font-family: var(--font-mono);
1337  font-size: 0.875em;
1338  background: var(--color-mist);
1339  padding: 2px 6px;
1340  border-radius: 3px;
1341  color: var(--color-ink);
1342}
1343
1344.faq-answer a {
1345  color: var(--color-accent);
1346  text-decoration: none;
1347  border-bottom: 1px solid transparent;
1348  transition: border-color 0.2s ease;
1349}
1350
1351.faq-answer a:hover {
1352  border-bottom-color: var(--color-accent);
1353}
1354
1355/* Mobile: FAQ + Changelog */
1356@media (max-width: 600px) {
1357  .faq-question {
1358    font-size: 1rem;
1359    padding: var(--spacing-md) 0;
1360    min-height: 44px;
1361    gap: var(--spacing-sm);
1362  }
1363
1364  .faq-answer {
1365    font-size: 0.875rem;
1366  }
1367
1368  .changelog-version {
1369    font-size: 1rem;
1370  }
1371
1372  .changelog-version-header {
1373    flex-wrap: wrap;
1374    gap: var(--spacing-xs);
1375  }
1376
1377  .changelog-items {
1378    padding-left: var(--spacing-sm);
1379    font-size: 0.875rem;
1380  }
1381
1382  .changelog-older-toggle {
1383    min-height: 44px;
1384  }
1385}
1386
1387@keyframes faqFadeIn {
1388  from {
1389    opacity: 0;
1390    transform: translateY(-8px);
1391  }
1392  to {
1393    opacity: 1;
1394    transform: translateY(0);
1395  }
1396}
1397
1398/* ============================================
1399   WHY IMPECCABLE — tabbed feature loop
1400   ============================================ */
1401
1402.why-section {
1403  padding: var(--spacing-2xl) 0;
1404  border-top: 1px solid var(--color-mist);
1405}
1406
1407.why-layout {
1408  display: grid;
1409  grid-template-columns: minmax(240px, 300px) 1fr;
1410  gap: var(--spacing-xl);
1411  align-items: start;
1412}
1413
1414.why-left {
1415  display: flex;
1416  flex-direction: column;
1417  gap: var(--spacing-lg);
1418}
1419
1420.why-tabs {
1421  list-style: none;
1422  padding: 0;
1423  margin: 0;
1424  display: flex;
1425  flex-direction: column;
1426  gap: 0;
1427}
1428
1429.why-tabs li + li {
1430  border-top: 1px solid var(--color-mist);
1431}
1432
1433.why-tab {
1434  display: grid;
1435  grid-template-columns: 40px 1fr;
1436  gap: var(--spacing-sm);
1437  align-items: baseline;
1438  width: 100%;
1439  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
1440  background: transparent;
1441  border: 0;
1442  border-left: 2px solid transparent;
1443  padding-left: var(--spacing-sm);
1444  cursor: pointer;
1445  text-align: left;
1446  font-family: var(--font-body);
1447  color: var(--color-ash);
1448  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), background 180ms var(--ease-out);
1449}
1450
1451.why-tab-num {
1452  font-family: var(--font-mono);
1453  font-size: 0.6875rem;
1454  letter-spacing: 0.18em;
1455  color: var(--color-ash);
1456  transition: color 180ms var(--ease-out);
1457}
1458
1459.why-tab-label {
1460  font-family: var(--font-body);
1461  font-size: 0.9375rem;
1462  font-weight: 500;
1463  line-height: 1.3;
1464}
1465
1466.why-tab:hover {
1467  color: var(--color-ink);
1468}
1469
1470.why-tab:hover .why-tab-num {
1471  color: var(--color-charcoal);
1472}
1473
1474.why-tab.is-active {
1475  color: var(--color-ink);
1476}
1477
1478.why-tab.is-active .why-tab-num {
1479  color: var(--color-accent);
1480}
1481
1482.why-tab:focus-visible {
1483  outline: 2px solid var(--color-accent);
1484  outline-offset: 2px;
1485}
1486
1487.why-panels {
1488  position: relative;
1489  min-height: 280px;
1490  background: var(--color-paper);
1491  border: 1px solid var(--color-mist);
1492  border-radius: 10px;
1493  padding: var(--spacing-xl);
1494  box-shadow: 0 1px 2px oklch(0.2 0 0 / 0.04);
1495  /* All panels stack in one grid cell so the outgoing panel can cross-fade
1496     out while the incoming one fades in. Container auto-sizes to the
1497     tallest panel, so switching between tabs doesn't jump. */
1498  display: grid;
1499  grid-template-columns: minmax(0, 1fr);
1500  grid-template-areas: "stack";
1501}
1502
1503.why-panel,
1504.why-panel[hidden] {
1505  /* [hidden] attribute on initial markup would force display:none and skip
1506     the crossfade; keep the element rendered so opacity/transform can run. */
1507  display: block;
1508  grid-area: stack;
1509  min-width: 0;
1510  opacity: 0;
1511  visibility: hidden;
1512  transform: translateY(8px);
1513  transition:
1514    opacity 650ms var(--ease-out),
1515    transform 800ms var(--ease-out),
1516    visibility 0s linear 650ms;
1517  pointer-events: none;
1518}
1519
1520.why-panel-title,
1521.why-panel-body,
1522.why-panel-meta {
1523  max-width: 60ch;
1524}
1525
1526.why-panel.is-active {
1527  opacity: 1;
1528  visibility: visible;
1529  transform: translateY(0);
1530  pointer-events: auto;
1531  transition:
1532    opacity 650ms var(--ease-out),
1533    transform 800ms var(--ease-out),
1534    visibility 0s linear 0s;
1535}
1536
1537.why-panel-title {
1538  font-family: var(--font-display);
1539  font-style: italic;
1540  font-weight: 400;
1541  font-size: clamp(1.75rem, 3vw, 2.5rem);
1542  line-height: 1.1;
1543  color: var(--color-ink);
1544  margin: 0 0 var(--spacing-md);
1545  letter-spacing: -0.01em;
1546}
1547
1548.why-panel-body {
1549  font-family: var(--font-body);
1550  font-size: 1.0625rem;
1551  line-height: 1.65;
1552  color: var(--color-charcoal);
1553  margin: 0 0 var(--spacing-md);
1554}
1555
1556.why-panel-body em {
1557  font-style: italic;
1558  color: var(--color-ink);
1559  font-weight: 500;
1560}
1561
1562.why-panel-body a {
1563  color: var(--color-ink);
1564  text-decoration: underline;
1565  text-underline-offset: 3px;
1566  text-decoration-color: var(--color-accent);
1567}
1568
1569.why-panel-body a:hover {
1570  color: var(--color-accent);
1571}
1572
1573.why-panel-body code {
1574  font-family: var(--font-mono);
1575  font-size: 0.875em;
1576  background: var(--color-mist);
1577  padding: 2px 6px;
1578  border-radius: 3px;
1579  color: var(--color-ink);
1580}
1581
1582.why-panel-meta {
1583  font-family: var(--font-mono);
1584  font-size: 0.75rem;
1585  letter-spacing: 0.05em;
1586  color: var(--color-ash);
1587  margin: var(--spacing-md) 0 0;
1588}
1589
1590.why-panel-meta code {
1591  font-family: var(--font-mono);
1592  font-size: 0.875em;
1593  color: var(--color-charcoal);
1594}
1595
1596.why-panel-meta a {
1597  color: var(--color-ink);
1598  text-decoration: underline;
1599  text-underline-offset: 3px;
1600  text-decoration-color: var(--color-accent);
1601}
1602
1603.why-panel-meta a:hover { color: var(--color-accent); }
1604
1605@media (prefers-reduced-motion: reduce) {
1606  .why-panel,
1607  .why-panel.is-active {
1608    transition: none;
1609    transform: none;
1610  }
1611}
1612
1613@media (max-width: 900px) {
1614  .why-layout {
1615    grid-template-columns: minmax(0, 1fr);
1616    gap: var(--spacing-md);
1617  }
1618
1619  /* Sticky horizontal tab strip under the 54px site header */
1620  .why-left {
1621    position: sticky;
1622    top: 54px;
1623    z-index: 10;
1624    min-width: 0;
1625    padding: var(--spacing-xs) 0;
1626    background: oklch(96% 0.005 350 / 0.92);
1627    backdrop-filter: blur(8px);
1628    -webkit-backdrop-filter: blur(8px);
1629    border-bottom: 1px solid var(--color-mist);
1630    gap: 0;
1631    /* Horizontal edge fade signals scrollable content */
1632    mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 24px), transparent);
1633    -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 24px), transparent);
1634  }
1635
1636  .why-tabs {
1637    flex-direction: row;
1638    flex-wrap: nowrap;
1639    gap: 4px;
1640    min-width: 0;
1641    width: 100%;
1642    overflow-x: auto;
1643    scrollbar-width: none;
1644    -webkit-overflow-scrolling: touch;
1645    scroll-snap-type: x proximity;
1646    padding: 0 var(--spacing-sm);
1647  }
1648
1649  .why-tabs::-webkit-scrollbar {
1650    display: none;
1651  }
1652
1653  .why-tabs li + li {
1654    border-top: 0;
1655  }
1656
1657  .why-tab {
1658    display: inline-flex;
1659    grid-template-columns: none;
1660    align-items: center;
1661    gap: 6px;
1662    width: auto;
1663    padding: 7px 12px;
1664    border: 0;
1665    border-radius: 100px;
1666    scroll-snap-align: center;
1667    white-space: nowrap;
1668  }
1669
1670  .why-tab-label {
1671    font-size: 0.8125rem;
1672    font-weight: 500;
1673  }
1674
1675  .why-tab-num {
1676    font-size: 0.5625rem;
1677    letter-spacing: 0.1em;
1678  }
1679
1680  .why-tab.is-active {
1681    background: var(--color-ink);
1682    color: var(--color-paper);
1683  }
1684
1685  .why-tab.is-active .why-tab-label,
1686  .why-tab.is-active .why-tab-num {
1687    color: var(--color-paper);
1688  }
1689
1690  /* Vertical progress stripe is meaningless on a horizontal strip */
1691  .why-tab-progress {
1692    display: none;
1693  }
1694
1695  .why-panels {
1696    padding: var(--spacing-md);
1697    min-height: auto;
1698    border-radius: 8px;
1699  }
1700}
1701
1702/* ============================================
1703   WHY — per-panel visuals + auto-rotation
1704   ============================================ */
1705
1706.why-tab-progress {
1707  position: absolute;
1708  left: -2px;
1709  top: 0;
1710  bottom: 0;
1711  width: 2px;
1712  background: var(--color-accent);
1713  transform-origin: top;
1714  transform: scaleY(0);
1715  pointer-events: none;
1716  opacity: 0;
1717  transition: opacity 220ms var(--ease-out);
1718}
1719
1720.why-tab { position: relative; }
1721
1722/* Active tab always shows the accent column. When cycling, the column
1723   fills from top to bottom over the cycle window. When not cycling
1724   (user paused or clicked), it stays full-height so the active state
1725   is unambiguous. */
1726.why-tab.is-active .why-tab-progress {
1727  opacity: 1;
1728  transform: scaleY(1);
1729}
1730
1731.why-tab.is-active.is-cycling .why-tab-progress {
1732  animation: whyTabProgress var(--why-cycle-ms, 7000ms) linear forwards;
1733}
1734
1735@keyframes whyTabProgress {
1736  from { transform: scaleY(0); }
1737  to { transform: scaleY(1); }
1738}
1739
1740@media (prefers-reduced-motion: reduce) {
1741  .why-tab.is-active.is-cycling .why-tab-progress {
1742    animation: none;
1743    transform: scaleY(1);
1744  }
1745}
1746
1747/* Visual frame — common base */
1748.why-visual {
1749  background: transparent;
1750  border: 0;
1751  padding: 0;
1752  margin-bottom: var(--spacing-md);
1753  min-height: 0;
1754  display: flex;
1755  align-items: stretch;
1756  position: relative;
1757  overflow: hidden;
1758}
1759
1760/* ─ Panel 01: Generic vs PRODUCT.md ─ */
1761.why-visual--compare {
1762  gap: var(--spacing-md);
1763}
1764.why-compare-card {
1765  flex: 1;
1766  display: flex;
1767  flex-direction: column;
1768  gap: 10px;
1769  min-width: 0;
1770}
1771.why-compare-label {
1772  font-family: var(--font-mono);
1773  font-size: 0.625rem;
1774  letter-spacing: 0.2em;
1775  text-transform: uppercase;
1776  color: var(--color-ash);
1777}
1778.why-slop-card {
1779  flex: 1;
1780  background: linear-gradient(135deg, oklch(35% 0.14 280), oklch(55% 0.18 220));
1781  border-radius: 10px;
1782  padding: 14px;
1783  color: white;
1784  display: flex;
1785  flex-direction: column;
1786  gap: 6px;
1787  box-shadow: 0 20px 40px oklch(40% 0.14 270 / 0.25);
1788}
1789.why-slop-pill {
1790  font-family: 'Inter', system-ui, sans-serif;
1791  font-size: 9px;
1792  font-weight: 700;
1793  letter-spacing: 0.12em;
1794  background: rgba(255, 255, 255, 0.2);
1795  padding: 2px 6px;
1796  border-radius: 999px;
1797  align-self: flex-start;
1798}
1799.why-slop-title {
1800  font-family: 'Inter', system-ui, sans-serif;
1801  font-size: 14px;
1802  font-weight: 700;
1803  background: linear-gradient(135deg, #fff, #c4b5fd);
1804  -webkit-background-clip: text;
1805  background-clip: text;
1806  color: transparent;
1807  line-height: 1.1;
1808}
1809.why-slop-line {
1810  height: 4px;
1811  background: rgba(255, 255, 255, 0.15);
1812  border-radius: 2px;
1813}
1814.why-slop-line--short { width: 60%; }
1815.why-slop-cta {
1816  font-family: 'Inter', system-ui, sans-serif;
1817  font-size: 10px;
1818  font-weight: 600;
1819  padding: 6px 10px;
1820  background: rgba(255, 255, 255, 0.2);
1821  border-radius: 6px;
1822  align-self: flex-start;
1823  margin-top: auto;
1824}
1825.why-impeccable-card {
1826  flex: 1;
1827  background: var(--color-cream);
1828  border: 1px solid var(--color-mist);
1829  padding: 14px;
1830  display: flex;
1831  flex-direction: column;
1832  gap: 6px;
1833}
1834.why-impeccable-kicker {
1835  font-family: var(--font-mono);
1836  font-size: 9px;
1837  letter-spacing: 0.2em;
1838  text-transform: uppercase;
1839  color: var(--color-accent);
1840}
1841.why-impeccable-title {
1842  font-family: var(--font-display);
1843  font-size: 22px;
1844  line-height: 1.05;
1845  color: var(--color-ink);
1846}
1847.why-impeccable-title em {
1848  font-style: italic;
1849  color: var(--color-accent);
1850}
1851.why-impeccable-line {
1852  height: 4px;
1853  background: var(--color-mist);
1854  border-radius: 2px;
1855}
1856.why-impeccable-line--short { width: 55%; }
1857.why-impeccable-cta {
1858  font-family: var(--font-body);
1859  font-size: 11px;
1860  font-weight: 500;
1861  letter-spacing: 0.1em;
1862  text-transform: uppercase;
1863  color: var(--color-ink);
1864  border-bottom: 1.5px solid var(--color-ink);
1865  align-self: flex-start;
1866  margin-top: auto;
1867  padding-bottom: 3px;
1868}
1869
1870/* ─ Panel 02: Brand vs Product registers ─ */
1871.why-visual--registers {
1872  gap: var(--spacing-md);
1873}
1874.why-register {
1875  flex: 1;
1876  display: flex;
1877  flex-direction: column;
1878  gap: 10px;
1879  min-width: 0;
1880}
1881.why-register-label {
1882  font-family: var(--font-mono);
1883  font-size: 0.625rem;
1884  letter-spacing: 0.2em;
1885  text-transform: uppercase;
1886  color: var(--color-accent);
1887}
1888.why-register-mock {
1889  flex: 1;
1890  border-radius: 6px;
1891  padding: 18px;
1892  display: flex;
1893  flex-direction: column;
1894  justify-content: center;
1895}
1896.why-register-mock--brand {
1897  background: var(--color-cream);
1898  border: 1px solid var(--color-mist);
1899  gap: 12px;
1900}
1901.why-brand-hero-mono {
1902  font-family: var(--font-mono);
1903  font-size: 9px;
1904  letter-spacing: 0.24em;
1905  text-transform: uppercase;
1906  color: var(--color-ash);
1907}
1908.why-brand-hero-title {
1909  font-family: var(--font-display);
1910  font-size: 28px;
1911  line-height: 1;
1912  color: var(--color-ink);
1913  letter-spacing: -0.02em;
1914}
1915.why-brand-hero-title em {
1916  font-style: italic;
1917  color: var(--color-accent);
1918}
1919.why-register-mock--product {
1920  background: var(--color-paper);
1921  border: 1px solid var(--color-mist);
1922  padding: 0;
1923  gap: 0;
1924}
1925.why-product-row {
1926  display: flex;
1927  justify-content: space-between;
1928  align-items: baseline;
1929  padding: 10px 14px;
1930  border-bottom: 1px solid var(--color-mist);
1931}
1932.why-product-row:last-child { border-bottom: 0; }
1933.why-product-k {
1934  font-family: var(--font-mono);
1935  font-size: 10px;
1936  letter-spacing: 0.1em;
1937  text-transform: uppercase;
1938  color: var(--color-ash);
1939}
1940.why-product-v {
1941  font-family: var(--font-body);
1942  font-size: 14px;
1943  font-weight: 500;
1944  color: var(--color-ink);
1945}
1946
1947/* ─ Panel 03: Terminal output ─ */
1948.why-visual--terminal,
1949.why-visual--ci {
1950  padding: 0;
1951  background: oklch(12% 0 0);
1952  border-color: oklch(18% 0 0);
1953}
1954.why-terminal {
1955  width: 100%;
1956  display: flex;
1957  flex-direction: column;
1958}
1959.why-terminal-header {
1960  display: flex;
1961  align-items: center;
1962  gap: 6px;
1963  padding: 10px 14px;
1964  border-bottom: 1px solid oklch(20% 0 0);
1965  background: oklch(14% 0 0);
1966  border-radius: 7px 7px 0 0;
1967}
1968.why-terminal-dot {
1969  width: 10px;
1970  height: 10px;
1971  border-radius: 50%;
1972  background: oklch(35% 0 0);
1973}
1974.why-terminal-title {
1975  font-family: var(--font-mono);
1976  font-size: 11px;
1977  color: oklch(65% 0 0);
1978  margin-left: 10px;
1979}
1980.why-terminal-body {
1981  padding: 14px;
1982  font-family: var(--font-mono);
1983  font-size: 12px;
1984  line-height: 1.7;
1985  color: oklch(80% 0 0);
1986}
1987.why-terminal-line { white-space: pre; }
1988.why-terminal-line--prompt { color: oklch(90% 0 0); }
1989.why-terminal-prompt { color: var(--color-accent); margin-right: 4px; }
1990.why-terminal-ok { color: oklch(75% 0.15 145); }
1991.why-terminal-arrow { color: var(--color-accent); }
1992.why-terminal-line--hint {
1993  margin-top: 6px;
1994  color: oklch(90% 0 0);
1995}
1996
1997/* ─ Panel 04: Harness grid ─ */
1998.why-visual--harnesses {
1999  flex-direction: column;
2000  padding: 16px;
2001  gap: 14px;
2002}
2003.why-prompt-bar {
2004  font-family: var(--font-mono);
2005  font-size: 12px;
2006  color: var(--color-ink);
2007  background: var(--color-cream);
2008  border: 1px solid var(--color-mist);
2009  border-radius: 4px;
2010  padding: 8px 12px;
2011  display: flex;
2012  align-items: center;
2013  gap: 2px;
2014}
2015.why-prompt-slash {
2016  color: var(--color-accent);
2017  margin-right: 4px;
2018  font-weight: 500;
2019}
2020.why-prompt-caret {
2021  display: inline-block;
2022  width: 7px;
2023  height: 14px;
2024  background: var(--color-accent);
2025  margin-left: 2px;
2026  animation: whyCaret 1.1s steps(1) infinite;
2027}
2028@keyframes whyCaret {
2029  0%, 50% { opacity: 1; }
2030  50.01%, 100% { opacity: 0; }
2031}
2032.why-harness-grid {
2033  display: grid;
2034  grid-template-columns: repeat(4, 1fr);
2035  gap: 8px;
2036  flex: 1;
2037}
2038.why-harness {
2039  display: flex;
2040  flex-direction: column;
2041  align-items: center;
2042  justify-content: center;
2043  gap: 6px;
2044  padding: 10px 4px;
2045  background: var(--color-cream);
2046  border: 1px solid var(--color-mist);
2047  border-radius: 6px;
2048  font-family: var(--font-mono);
2049  font-size: 9px;
2050  letter-spacing: 0.08em;
2051  text-transform: uppercase;
2052  color: var(--color-charcoal);
2053}
2054.why-harness img {
2055  width: 24px;
2056  height: 24px;
2057  object-fit: contain;
2058  opacity: 0.85;
2059}
2060
2061/* ─ Panel 05: DESIGN.md file ─ */
2062.why-visual--designmd {
2063  padding: 0;
2064}
2065.why-designmd-file {
2066  flex: 1;
2067  display: flex;
2068  flex-direction: column;
2069  background: var(--color-paper);
2070  border-radius: 7px;
2071}
2072.why-designmd-header {
2073  display: flex;
2074  justify-content: space-between;
2075  align-items: center;
2076  padding: 10px 14px;
2077  border-bottom: 1px solid var(--color-mist);
2078  background: var(--color-cream);
2079  border-radius: 7px 7px 0 0;
2080}
2081.why-designmd-filename {
2082  font-family: var(--font-mono);
2083  font-size: 11px;
2084  font-weight: 500;
2085  color: var(--color-ink);
2086}
2087.why-designmd-badge {
2088  font-family: var(--font-mono);
2089  font-size: 9px;
2090  letter-spacing: 0.15em;
2091  text-transform: uppercase;
2092  color: var(--color-accent);
2093  background: var(--color-accent-dim);
2094  border: 1px solid var(--color-accent-soft);
2095  padding: 3px 8px;
2096  border-radius: 999px;
2097}
2098.why-designmd-sections {
2099  list-style: none;
2100  padding: 10px 14px;
2101  margin: 0;
2102  display: flex;
2103  flex-direction: column;
2104  font-family: var(--font-mono);
2105  font-size: 12px;
2106  line-height: 2;
2107  color: var(--color-ink);
2108}
2109.why-designmd-num {
2110  color: var(--color-accent);
2111  margin-right: 8px;
2112  font-weight: 500;
2113}
2114.why-designmd-footer {
2115  padding: 10px 14px;
2116  border-top: 1px solid var(--color-mist);
2117  font-family: var(--font-display);
2118  font-style: italic;
2119  font-size: 13px;
2120  color: var(--color-charcoal);
2121}
2122
2123/* ─ Panel 06: CI output ─ */
2124.why-ci-window {
2125  width: 100%;
2126  display: flex;
2127  flex-direction: column;
2128}
2129.why-ci-header {
2130  display: flex;
2131  justify-content: space-between;
2132  align-items: center;
2133  padding: 10px 14px;
2134  border-bottom: 1px solid oklch(20% 0 0);
2135  background: oklch(14% 0 0);
2136  border-radius: 7px 7px 0 0;
2137}
2138.why-ci-branch {
2139  font-family: var(--font-mono);
2140  font-size: 11px;
2141  color: oklch(75% 0 0);
2142}
2143.why-ci-status {
2144  font-family: var(--font-mono);
2145  font-size: 10px;
2146  letter-spacing: 0.1em;
2147  text-transform: uppercase;
2148  padding: 2px 8px;
2149  border-radius: 999px;
2150}
2151.why-ci-status--fail {
2152  color: oklch(78% 0.18 25);
2153  background: oklch(30% 0.15 25 / 0.3);
2154}
2155.why-ci-body {
2156  padding: 14px;
2157  font-family: var(--font-mono);
2158  font-size: 12px;
2159  line-height: 1.8;
2160  color: oklch(80% 0 0);
2161}
2162.why-ci-line { color: oklch(85% 0 0); }
2163.why-ci-cmd { color: var(--color-accent); margin-right: 6px; }
2164.why-ci-issue {
2165  display: flex;
2166  align-items: baseline;
2167  gap: 10px;
2168  padding-left: 4px;
2169  color: oklch(85% 0 0);
2170}
2171.why-ci-issue code {
2172  background: transparent;
2173  color: oklch(70% 0.12 220);
2174  padding: 0;
2175  font-size: 1em;
2176}
2177.why-ci-x { color: oklch(75% 0.18 25); }
2178.why-ci-summary {
2179  margin-top: 8px;
2180  padding-top: 8px;
2181  border-top: 1px solid oklch(20% 0 0);
2182  font-weight: 500;
2183  color: oklch(85% 0 0);
2184}
2185
2186/* ─ Panel 07: Chrome extension ─ */
2187.why-visual--extension {
2188  padding: 0;
2189  background: var(--color-cream);
2190}
2191.why-browser {
2192  flex: 1;
2193  display: flex;
2194  flex-direction: column;
2195  background: var(--color-paper);
2196  border-radius: 7px;
2197  overflow: hidden;
2198}
2199.why-browser-chrome {
2200  display: flex;
2201  align-items: center;
2202  gap: 6px;
2203  padding: 10px 14px;
2204  background: var(--color-mist);
2205  border-bottom: 1px solid oklch(86% 0 0);
2206}
2207.why-browser-dot {
2208  width: 9px;
2209  height: 9px;
2210  border-radius: 50%;
2211  background: oklch(75% 0 0);
2212}
2213.why-browser-url {
2214  margin-left: 12px;
2215  padding: 3px 10px;
2216  background: var(--color-paper);
2217  border-radius: 4px;
2218  font-family: var(--font-mono);
2219  font-size: 10px;
2220  color: var(--color-charcoal);
2221  flex: 1;
2222}
2223.why-browser-body {
2224  flex: 1;
2225  position: relative;
2226  padding: 20px;
2227  background:
2228    linear-gradient(var(--color-cream), var(--color-cream)) padding-box,
2229    repeating-linear-gradient(90deg, transparent 0 60px, var(--color-mist) 60px 61px);
2230}
2231.why-ext-popup {
2232  position: absolute;
2233  top: 16px;
2234  right: 16px;
2235  width: 180px;
2236  background: var(--color-paper);
2237  border: 1px solid var(--color-mist);
2238  border-radius: 6px;
2239  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.12);
2240  overflow: hidden;
2241  z-index: 2;
2242}
2243.why-ext-popup-header {
2244  font-family: var(--font-mono);
2245  font-size: 10px;
2246  letter-spacing: 0.1em;
2247  text-transform: uppercase;
2248  color: var(--color-ink);
2249  padding: 8px 12px;
2250  background: var(--color-cream);
2251  border-bottom: 1px solid var(--color-mist);
2252}
2253.why-ext-popup-row {
2254  display: flex;
2255  align-items: center;
2256  gap: 8px;
2257  padding: 6px 12px;
2258  font-size: 11px;
2259  color: var(--color-charcoal);
2260  border-bottom: 1px solid var(--color-mist);
2261}
2262.why-ext-popup-row:last-child { border-bottom: 0; }
2263.why-ext-sev {
2264  color: var(--color-accent);
2265  font-weight: 600;
2266}
2267.why-ext-overlay-a,
2268.why-ext-overlay-b {
2269  position: absolute;
2270  border: 2px solid var(--color-accent);
2271  border-radius: 4px;
2272  pointer-events: none;
2273}
2274.why-ext-overlay-a {
2275  left: 20px;
2276  top: 30px;
2277  width: 42%;
2278  height: 36px;
2279}
2280.why-ext-overlay-b {
2281  left: 20px;
2282  bottom: 24px;
2283  width: 30%;
2284  height: 30px;
2285}
2286
2287/* Mobile */
2288@media (max-width: 700px) {
2289  .why-visual { min-height: 200px; }
2290  .why-harness-grid { grid-template-columns: repeat(3, 1fr); }
2291  .why-compare-card, .why-register { gap: 8px; }
2292}
2293
2294/* ============================================
2295   WHY — updated visuals (panels 1, 3, 4, 5)
2296   ============================================ */
2297
2298/* ─ Panel 01: PRODUCT.md file view ─ */
2299.why-visual--productmd {
2300  padding: 0;
2301  background: transparent;
2302  display: grid;
2303  grid-template-columns: minmax(0, 1fr) auto;
2304  gap: var(--spacing-lg);
2305  align-items: start;
2306}
2307@media (max-width: 780px) {
2308  .why-visual--productmd {
2309    grid-template-columns: 1fr;
2310  }
2311}
2312.why-productmd-file {
2313  display: flex;
2314  flex-direction: column;
2315  background: var(--color-paper);
2316  border: 1px solid var(--color-mist);
2317  border-radius: 8px;
2318  overflow: hidden;
2319  min-width: 0;
2320}
2321.why-productmd-commands {
2322  display: flex;
2323  flex-direction: column;
2324  gap: 8px;
2325  padding-top: 4px;
2326  min-width: 160px;
2327}
2328.why-productmd-commands-label {
2329  font-family: var(--font-mono);
2330  font-size: 9.5px;
2331  letter-spacing: 0.16em;
2332  text-transform: uppercase;
2333  color: var(--color-ash);
2334  margin-bottom: 4px;
2335}
2336.why-productmd-commands code {
2337  font-family: var(--font-mono);
2338  font-size: 12px;
2339  color: var(--color-ink);
2340  background: var(--color-paper);
2341  border: 1px solid var(--color-mist);
2342  border-radius: 5px;
2343  padding: 5px 9px;
2344  white-space: nowrap;
2345}
2346.why-productmd-header {
2347  display: flex;
2348  align-items: center;
2349  justify-content: space-between;
2350  padding: 10px 14px;
2351  border-bottom: 1px solid var(--color-mist);
2352  background: var(--color-cream);
2353  border-radius: 7px 7px 0 0;
2354}
2355.why-productmd-filename {
2356  font-family: var(--font-mono);
2357  font-size: 11px;
2358  font-weight: 500;
2359  color: var(--color-ink);
2360}
2361.why-productmd-status {
2362  font-family: var(--font-mono);
2363  font-size: 9px;
2364  letter-spacing: 0.15em;
2365  text-transform: uppercase;
2366  color: var(--color-accent);
2367}
2368.why-productmd-body {
2369  padding: 6px 14px;
2370  display: flex;
2371  flex-direction: column;
2372}
2373.why-productmd-field {
2374  display: grid;
2375  grid-template-columns: 110px 1fr;
2376  gap: 16px;
2377  align-items: baseline;
2378  padding: 9px 0;
2379  border-bottom: 1px dashed var(--color-mist);
2380}
2381.why-productmd-field:last-child { border-bottom: 0; }
2382.why-productmd-k {
2383  font-family: var(--font-mono);
2384  font-size: 10px;
2385  letter-spacing: 0.1em;
2386  text-transform: uppercase;
2387  color: var(--color-ash);
2388}
2389.why-productmd-v {
2390  font-family: var(--font-body);
2391  font-size: 13px;
2392  line-height: 1.5;
2393  color: var(--color-ink);
2394}
2395.why-productmd-footer {
2396  padding: 10px 14px;
2397  border-top: 1px solid var(--color-mist);
2398  font-family: var(--font-display);
2399  font-style: italic;
2400  font-size: 13px;
2401  line-height: 1.4;
2402  color: var(--color-charcoal);
2403  display: flex;
2404  align-items: center;
2405  gap: 8px;
2406  background: var(--color-cream);
2407  border-radius: 0 0 7px 7px;
2408}
2409.why-productmd-footer-dot {
2410  display: inline-block;
2411  width: 7px;
2412  height: 7px;
2413  border-radius: 50%;
2414  background: var(--color-accent);
2415  animation: whyPulse 2.4s ease-out infinite;
2416  flex-shrink: 0;
2417}
2418@keyframes whyPulse {
2419  0%, 100% { transform: scale(1); opacity: 1; }
2420  50% { transform: scale(0.6); opacity: 0.5; }
2421}
2422@media (prefers-reduced-motion: reduce) {
2423  .why-productmd-footer-dot { animation: none; }
2424}
2425
2426/* ─ Panel 03: path + meta additions ─ */
2427.why-terminal-path {
2428  color: oklch(88% 0.05 220);
2429}
2430.why-terminal-meta {
2431  color: oklch(58% 0 0);
2432  font-size: 0.9em;
2433}
2434
2435/* ─ Panel 04: waterfall vs unified surface ─ */
2436.why-visual--flow {
2437  flex-direction: column;
2438  gap: 14px;
2439  padding: 16px;
2440}
2441.why-flow-row {
2442  display: flex;
2443  flex-direction: column;
2444  gap: 8px;
2445  flex: 1;
2446  min-height: 0;
2447}
2448.why-flow-label {
2449  font-family: var(--font-mono);
2450  font-size: 10px;
2451  letter-spacing: 0.2em;
2452  text-transform: uppercase;
2453  color: var(--color-ash);
2454}
2455.why-flow-row--old .why-flow-label { color: var(--color-ash); }
2456.why-flow-row--new .why-flow-label { color: var(--color-accent); }
2457
2458.why-flow-steps {
2459  display: flex;
2460  align-items: center;
2461  flex-wrap: wrap;
2462  gap: 6px;
2463  opacity: 0.5;
2464}
2465.why-flow-step {
2466  font-family: var(--font-body);
2467  font-size: 12px;
2468  color: var(--color-charcoal);
2469  padding: 4px 10px;
2470  background: var(--color-paper);
2471  border: 1px solid var(--color-mist);
2472  border-radius: 3px;
2473  text-decoration: line-through;
2474  text-decoration-color: var(--color-ash);
2475}
2476.why-flow-arrow {
2477  color: var(--color-ash);
2478  font-size: 12px;
2479}
2480.why-flow-pair {
2481  display: grid;
2482  grid-template-columns: 1fr auto 1fr;
2483  gap: 12px;
2484  align-items: stretch;
2485}
2486.why-flow-tile {
2487  display: flex;
2488  flex-direction: column;
2489  gap: 6px;
2490  padding: 14px 16px;
2491  background: var(--color-paper);
2492  border: 1px solid var(--color-mist);
2493  border-radius: 6px;
2494  min-width: 0;
2495}
2496.why-flow-tile--agent {
2497  background: var(--color-ink);
2498  border-color: var(--color-ink);
2499  color: var(--color-paper);
2500}
2501.why-flow-tile--browser {
2502  background: var(--color-cream);
2503  border-color: var(--color-mist);
2504}
2505.why-flow-tile-kicker {
2506  font-family: var(--font-mono);
2507  font-size: 9px;
2508  letter-spacing: 0.24em;
2509  text-transform: uppercase;
2510  color: var(--color-accent);
2511}
2512.why-flow-tile--agent .why-flow-tile-kicker { color: oklch(72% 0.15 350); }
2513.why-flow-tile-title {
2514  font-family: var(--font-display);
2515  font-style: italic;
2516  font-size: 20px;
2517  line-height: 1.1;
2518  color: inherit;
2519}
2520.why-flow-tile--browser .why-flow-tile-title { color: var(--color-ink); }
2521.why-flow-tile-meta {
2522  font-family: var(--font-body);
2523  font-size: 12px;
2524  line-height: 1.4;
2525  color: inherit;
2526  opacity: 0.75;
2527}
2528.why-flow-tile--browser .why-flow-tile-meta { color: var(--color-charcoal); opacity: 1; }
2529.why-flow-plus {
2530  align-self: center;
2531  font-family: var(--font-display);
2532  font-size: 28px;
2533  color: var(--color-accent);
2534  font-weight: 300;
2535  padding: 0 4px;
2536}
2537.why-flow-surface-foot {
2538  font-family: var(--font-display);
2539  font-style: italic;
2540  font-size: 13px;
2541  color: var(--color-charcoal);
2542  padding: 0 4px;
2543  margin-top: 6px;
2544}
2545
2546/* ─ Panel 05: rich DESIGN.md tiles ─ */
2547.why-visual--designmd-v2 {
2548  flex-direction: column;
2549  gap: 12px;
2550  padding: 12px;
2551  background: var(--color-cream);
2552}
2553.why-dm-header {
2554  display: flex;
2555  justify-content: space-between;
2556  align-items: center;
2557  padding: 0 2px;
2558}
2559.why-dm-filename {
2560  font-family: var(--font-mono);
2561  font-size: 11px;
2562  font-weight: 500;
2563  color: var(--color-ink);
2564}
2565.why-dm-badge {
2566  font-family: var(--font-mono);
2567  font-size: 9px;
2568  letter-spacing: 0.15em;
2569  text-transform: uppercase;
2570  color: var(--color-accent);
2571  background: var(--color-accent-dim);
2572  border: 1px solid var(--color-accent-soft);
2573  padding: 3px 8px;
2574  border-radius: 999px;
2575}
2576.why-dm-grid {
2577  display: grid;
2578  grid-template-columns: 1.1fr 1fr 1fr;
2579  grid-template-rows: 1fr 1fr;
2580  gap: 8px;
2581  flex: 1;
2582  min-height: 0;
2583}
2584.why-dm-tile {
2585  background: var(--color-paper);
2586  border: 1px solid var(--color-mist);
2587  border-radius: 6px;
2588  padding: 10px;
2589  display: flex;
2590  flex-direction: column;
2591  gap: 8px;
2592  min-width: 0;
2593  overflow: hidden;
2594}
2595.why-dm-tile-meta {
2596  display: flex;
2597  justify-content: space-between;
2598  font-family: var(--font-mono);
2599  font-size: 9px;
2600  letter-spacing: 0.1em;
2601  text-transform: uppercase;
2602  color: var(--color-ash);
2603}
2604.why-dm-tile-meta span:first-child { color: var(--color-ink); }
2605
2606.why-dm-tile--color { grid-row: 1 / 3; }
2607.why-dm-color-hero {
2608  flex: 1;
2609  background: var(--c);
2610  border-radius: 4px;
2611  min-height: 40px;
2612}
2613.why-dm-color-ramp {
2614  display: grid;
2615  grid-template-columns: repeat(8, 1fr);
2616  gap: 2px;
2617  height: 16px;
2618}
2619.why-dm-color-ramp span {
2620  border-radius: 2px;
2621}
2622
2623.why-dm-tile--type {
2624  align-items: flex-start;
2625}
2626.why-dm-type-specimen {
2627  font-family: var(--font-display);
2628  font-style: italic;
2629  font-size: 48px;
2630  line-height: 0.9;
2631  color: var(--color-ink);
2632  flex: 1;
2633  display: flex;
2634  align-items: center;
2635}
2636.why-dm-type-specimen--sans {
2637  font-family: var(--font-body);
2638  font-style: normal;
2639  font-weight: 400;
2640}
2641.why-dm-type-family {
2642  font-family: var(--font-mono);
2643  font-size: 10px;
2644  color: var(--color-charcoal);
2645}
2646
2647.why-dm-tile--components {
2648  justify-content: space-between;
2649}
2650.why-dm-comp-row {
2651  display: flex;
2652  gap: 6px;
2653}
2654.why-dm-comp-chip {
2655  font-family: var(--font-body);
2656  font-size: 10px;
2657  font-weight: 500;
2658  padding: 5px 10px;
2659  background: var(--color-paper);
2660  border: 1px solid var(--color-mist);
2661  border-radius: 3px;
2662  color: var(--color-ink);
2663}
2664.why-dm-comp-chip--primary {
2665  background: var(--color-ink);
2666  color: var(--color-paper);
2667  border-color: var(--color-ink);
2668}
2669.why-dm-comp-input {
2670  font-family: var(--font-body);
2671  font-size: 11px;
2672  padding: 6px 10px;
2673  background: var(--color-paper);
2674  border: 1px solid var(--color-mist);
2675  border-radius: 4px;
2676  color: var(--color-ash);
2677}
2678
2679.why-dm-foot {
2680  font-family: var(--font-display);
2681  font-style: italic;
2682  font-size: 13px;
2683  color: var(--color-charcoal);
2684  padding: 0 2px;
2685}
2686
2687@media (max-width: 700px) {
2688  .why-dm-grid {
2689    grid-template-columns: 1fr 1fr;
2690  }
2691  .why-dm-tile--color { grid-row: 1 / 3; }
2692  .why-flow-step { font-size: 11px; padding: 4px 8px; }
2693}
2694
2695/* ============================================
2696   WHY panel 04 — split diagonal (canvas vs. agent+browser)
2697   Carbonized from live session afb9794d.
2698   ============================================ */
2699
2700.why-visual--v2 {
2701  padding: 0;
2702  gap: 0;
2703  display: grid;
2704  grid-template-columns: 1fr 1fr;
2705  overflow: hidden;
2706}
2707.why-visual--v2 .v2-side {
2708  padding: 16px;
2709  display: flex;
2710  flex-direction: column;
2711  gap: 10px;
2712  min-width: 0;
2713}
2714.why-visual--v2 .v2-side--old {
2715  background: oklch(94% 0 0);
2716  position: relative;
2717}
2718.why-visual--v2 .v2-side--old::after {
2719  content: "";
2720  position: absolute;
2721  inset: 0;
2722  background: repeating-linear-gradient(0deg, transparent 0 24px, oklch(0% 0 0 / 0.04) 24px 25px);
2723  pointer-events: none;
2724}
2725.why-visual--v2 .v2-side--new {
2726  background: var(--color-cream);
2727  border-left: 1px solid var(--color-mist);
2728}
2729.why-visual--v2 .v2-label {
2730  font-family: var(--font-mono);
2731  font-size: 10px;
2732  letter-spacing: 0.2em;
2733  text-transform: uppercase;
2734  color: var(--color-ash);
2735  z-index: 1;
2736}
2737.why-visual--v2 .v2-side--new .v2-label { color: var(--color-accent); }
2738.why-visual--v2 .v2-canvas-chrome {
2739  display: flex;
2740  gap: 6px;
2741  align-items: center;
2742  padding-bottom: 8px;
2743  border-bottom: 1px solid oklch(86% 0 0);
2744  z-index: 1;
2745}
2746.why-visual--v2 .v2-canvas-tool {
2747  font-family: var(--font-mono);
2748  font-size: 9px;
2749  color: oklch(45% 0 0);
2750  background: var(--color-paper);
2751  padding: 3px 7px;
2752  border-radius: 3px;
2753  border: 1px solid oklch(86% 0 0);
2754}
2755.why-visual--v2 .v2-canvas-art {
2756  flex: 1;
2757  display: flex;
2758  flex-direction: column;
2759  justify-content: center;
2760  align-items: center;
2761  gap: 6px;
2762  z-index: 1;
2763}
2764.why-visual--v2 .v2-canvas-file {
2765  font-family: var(--font-mono);
2766  font-size: 10px;
2767  color: oklch(40% 0 0);
2768}
2769.why-visual--v2 .v2-canvas-mock {
2770  width: 100%;
2771  max-width: 120px;
2772  height: 60px;
2773  background: var(--color-paper);
2774  border: 1px solid oklch(82% 0 0);
2775  border-radius: 4px;
2776  box-shadow: 0 4px 16px oklch(0% 0 0 / 0.08);
2777}
2778.why-visual--v2 .v2-canvas-stamp {
2779  font-family: var(--font-display);
2780  font-style: italic;
2781  font-size: 11px;
2782  color: oklch(50% 0 0);
2783}
2784.why-visual--v2 .v2-new-surface {
2785  flex: 1;
2786  display: flex;
2787  flex-direction: column;
2788  justify-content: center;
2789  gap: 8px;
2790}
2791.why-visual--v2 .v2-new-line {
2792  font-family: var(--font-mono);
2793  font-size: 12px;
2794  color: var(--color-ink);
2795  background: var(--color-paper);
2796  border: 1px solid var(--color-mist);
2797  padding: 8px 12px;
2798  border-radius: 4px;
2799  display: flex;
2800  align-items: center;
2801  gap: 8px;
2802}
2803.why-visual--v2 .v2-new-line::before {
2804  content: "/";
2805  color: var(--color-accent);
2806  font-weight: 500;
2807}
2808.why-visual--v2 .v2-new-browser {
2809  flex: 1;
2810  background: var(--color-paper);
2811  border: 1px solid var(--color-mist);
2812  border-radius: 4px;
2813  overflow: hidden;
2814  display: flex;
2815  flex-direction: column;
2816  min-height: 60px;
2817}
2818.why-visual--v2 .v2-new-browser-dots {
2819  display: flex;
2820  gap: 4px;
2821  padding: 6px 8px;
2822  background: var(--color-mist);
2823}
2824.why-visual--v2 .v2-new-browser-dot {
2825  width: 6px;
2826  height: 6px;
2827  border-radius: 50%;
2828  background: oklch(78% 0 0);
2829}
2830.why-visual--v2 .v2-new-browser-frame {
2831  flex: 1;
2832  background: linear-gradient(0deg, var(--color-cream) 0, transparent 40%), var(--color-paper);
2833  position: relative;
2834}
2835.why-visual--v2 .v2-new-browser-frame::after {
2836  content: "";
2837  position: absolute;
2838  left: 10px;
2839  top: 10px;
2840  width: 40%;
2841  height: 8px;
2842  border: 1.5px solid var(--color-accent);
2843  border-radius: 3px;
2844}
2845.why-visual--v2 .v2-new-bar {
2846  align-self: center;
2847  background: var(--color-ink);
2848  color: var(--color-paper);
2849  padding: 4px 10px;
2850  border-radius: 999px;
2851  font-family: var(--font-mono);
2852  font-size: 9px;
2853  letter-spacing: 0.15em;
2854  text-transform: uppercase;
2855  margin-top: -2px;
2856}
2857
2858/* ─ Panel: Visualize, then ship: generated inputs plus live build ─ */
2859.why-visual--vizfirst {
2860  display: grid;
2861  grid-template-columns: 0.88fr 0.68fr 1.18fr;
2862  gap: clamp(10px, 1.5vw, 18px);
2863  align-items: stretch;
2864  padding: 0;
2865  overflow: visible;
2866}
2867
2868.why-vz-plate {
2869  margin: 0;
2870  display: flex;
2871  flex-direction: column;
2872  gap: 8px;
2873  min-width: 0;
2874}
2875
2876.why-vz-plate-kind {
2877  font-family: var(--font-mono);
2878  font-size: 0.625rem;
2879  font-weight: 600;
2880  letter-spacing: 0.18em;
2881  text-transform: uppercase;
2882  color: var(--color-accent);
2883}
2884
2885.why-vz-plate-frame {
2886  display: block;
2887  background: var(--color-cream);
2888  border: 1px solid var(--color-mist);
2889  overflow: hidden;
2890  height: 250px;
2891  transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
2892}
2893
2894.why-vz-plate:hover .why-vz-plate-frame {
2895  border-color: var(--color-accent);
2896  transform: translateY(-2px);
2897}
2898
2899.why-vz-plate-frame img {
2900  display: block;
2901  width: 100%;
2902  height: 100%;
2903  object-fit: cover;
2904  object-position: top center;
2905}
2906
2907.why-vz-plate--live .why-vz-plate-frame img {
2908  object-position: top left;
2909}
2910
2911@media (max-width: 720px) {
2912  .why-visual--vizfirst {
2913    grid-template-columns: 1fr;
2914    gap: 12px;
2915  }
2916  .why-vz-plate-frame {
2917    height: 240px;
2918  }
2919}
2920
2921
2922/* ============================================
2923   LANGUAGE section — Palette / Periodic tabs
2924   ============================================ */
2925
2926.language-intro-row {
2927  display: flex;
2928  align-items: flex-end;
2929  justify-content: space-between;
2930  gap: var(--spacing-lg);
2931}
2932
2933.language-intro-row .section-lead {
2934  margin: 0;
2935  flex: 1;
2936}
2937
2938.language-view-toggle {
2939  display: inline-flex;
2940  gap: 2px;
2941  padding: 3px;
2942  background: var(--color-mist);
2943  border-radius: 999px;
2944  flex-shrink: 0;
2945}
2946
2947.language-view-tab {
2948  font-family: var(--font-mono);
2949  font-size: 0.6875rem;
2950  letter-spacing: 0.14em;
2951  text-transform: uppercase;
2952  padding: 8px 18px;
2953  background: transparent;
2954  border: 0;
2955  border-radius: 999px;
2956  color: var(--color-ash);
2957  cursor: pointer;
2958  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
2959}
2960
2961.language-view-tab:hover { color: var(--color-ink); }
2962
2963.language-view-tab.is-active {
2964  background: var(--color-paper);
2965  color: var(--color-ink);
2966  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.08);
2967}
2968
2969.language-view-tab:focus-visible {
2970  outline: 2px solid var(--color-accent);
2971  outline-offset: 2px;
2972}
2973
2974.language-view { display: none; }
2975.language-view.is-active { display: block; }
2976
2977@media (max-width: 680px) {
2978  .language-intro-row {
2979    flex-direction: column;
2980    align-items: flex-start;
2981  }
2982}
2983
2984/* ============================================
2985   ANTIDOTE — two-column editorial layout
2986   ============================================ */
2987
2988.antidote-row--split {
2989  display: grid;
2990  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
2991  gap: var(--spacing-2xl);
2992  align-items: start;
2993}
2994
2995.antidote-intro {
2996  display: flex;
2997  flex-direction: column;
2998  gap: var(--spacing-lg);
2999  max-width: 60ch;
3000}
3001
3002.antidote-intro .section-lead {
3003  margin-bottom: 0;
3004}
3005
3006.antidote-stats {
3007  display: flex;
3008  flex-direction: column;
3009  gap: var(--spacing-sm);
3010  margin: 0;
3011  padding: var(--spacing-md) 0 0;
3012  border-top: 1px solid var(--color-mist);
3013}
3014
3015.antidote-stat {
3016  display: grid;
3017  grid-template-columns: 80px 1fr;
3018  gap: var(--spacing-md);
3019  align-items: baseline;
3020  padding: var(--spacing-sm) 0;
3021  border-bottom: 1px dashed var(--color-mist);
3022}
3023
3024.antidote-stat:last-child { border-bottom: 0; }
3025
3026.antidote-stat dt {
3027  font-family: var(--font-display);
3028  font-style: italic;
3029  font-weight: 400;
3030  font-size: 3rem;
3031  line-height: 1;
3032  color: var(--color-accent);
3033  letter-spacing: -0.02em;
3034}
3035
3036.antidote-stat dd strong {
3037  font-weight: 600;
3038  color: var(--color-ink);
3039}
3040
3041.antidote-stat dd {
3042  margin: 0;
3043  font-family: var(--font-body);
3044  font-size: 0.9375rem;
3045  line-height: 1.5;
3046  color: var(--color-charcoal);
3047}
3048
3049.antidote-stat dd code {
3050  font-family: var(--font-mono);
3051  font-size: 0.875em;
3052  background: var(--color-mist);
3053  padding: 1px 6px;
3054  border-radius: 3px;
3055  color: var(--color-ink);
3056}
3057
3058.antidote-catalog-link {
3059  font-family: var(--font-body);
3060  font-weight: 500;
3061  font-size: 0.875rem;
3062  letter-spacing: 0.06em;
3063  text-transform: uppercase;
3064  color: var(--color-ink);
3065  border-bottom: 2px solid var(--color-ink);
3066  padding-bottom: 4px;
3067  text-decoration: none;
3068  align-self: flex-start;
3069  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
3070}
3071
3072.antidote-catalog-link:hover {
3073  color: var(--color-accent);
3074  border-color: var(--color-accent);
3075}
3076
3077@media (max-width: 900px) {
3078  .antidote-row--split {
3079    grid-template-columns: 1fr;
3080    gap: var(--spacing-xl);
3081  }
3082}
3083
3084/* ============================================
3085   ANTIDOTE — visual-first wall of three
3086   ============================================ */
3087
3088.antidote-content .section-lead {
3089  max-width: 54ch;
3090  margin-bottom: var(--spacing-xl);
3091}
3092
3093.antidote-wall {
3094  display: grid;
3095  grid-template-columns: repeat(3, 1fr);
3096  gap: var(--spacing-lg);
3097  margin-bottom: var(--spacing-xl);
3098}
3099
3100.antidote-pair {
3101  display: grid;
3102  grid-template-rows: 1fr 1fr auto;
3103  gap: 12px;
3104  text-decoration: none;
3105  color: inherit;
3106  transition: transform 260ms var(--ease-out);
3107}
3108.antidote-pair:hover { transform: translateY(-4px); }
3109
3110.antidote-pair-figure {
3111  position: relative;
3112  margin: 0;
3113  min-height: 140px;
3114  border-radius: 8px;
3115  background: var(--color-paper);
3116  border: 1px solid var(--color-mist);
3117  overflow: hidden;
3118  transition: box-shadow 260ms var(--ease-out);
3119  display: flex;
3120  align-items: center;
3121  justify-content: center;
3122  padding: 20px 18px;
3123}
3124.antidote-pair-figure--before {
3125  background: oklch(98% 0 0);
3126}
3127.antidote-pair-figure--after {
3128  background: var(--color-cream);
3129}
3130.ab-slot {
3131  width: 100%;
3132  display: flex;
3133  flex-direction: column;
3134  justify-content: center;
3135  align-items: flex-start;
3136}
3137.antidote-pair-figure img {
3138  width: 100%;
3139  height: 100%;
3140  object-fit: cover;
3141  object-position: center top;
3142  display: block;
3143}
3144.antidote-pair-figure figcaption {
3145  position: absolute;
3146  top: 8px;
3147  right: 8px;
3148  z-index: 2;
3149  font-family: var(--font-mono);
3150  font-size: 9px;
3151  font-weight: 600;
3152  letter-spacing: 0.2em;
3153  text-transform: uppercase;
3154  padding: 2px 8px;
3155  border-radius: 3px;
3156  background: oklch(100% 0 0 / 0.9);
3157  color: var(--color-ink);
3158  backdrop-filter: blur(6px);
3159  -webkit-backdrop-filter: blur(6px);
3160}
3161.antidote-pair-figure--before figcaption { color: oklch(35% 0.15 25); background: oklch(98% 0.04 25 / 0.9); }
3162.antidote-pair-figure--after figcaption { color: oklch(45% 0.18 145); background: oklch(96% 0.04 145 / 0.9); }
3163.antidote-pair:hover .antidote-pair-figure {
3164  box-shadow: 0 14px 28px oklch(0% 0 0 / 0.1);
3165}
3166
3167.antidote-pair-caption {
3168  display: flex;
3169  align-items: baseline;
3170  gap: var(--spacing-sm);
3171  padding: 0 2px;
3172}
3173.antidote-pair-num {
3174  font-family: var(--font-mono);
3175  font-size: 0.6875rem;
3176  font-weight: 600;
3177  letter-spacing: 0.2em;
3178  text-transform: uppercase;
3179  color: var(--color-accent);
3180}
3181.antidote-pair-name {
3182  font-family: var(--font-display);
3183  font-style: italic;
3184  font-weight: 400;
3185  font-size: 1.375rem;
3186  line-height: 1.1;
3187  color: var(--color-ink);
3188  letter-spacing: -0.01em;
3189}
3190
3191/* After mocks — pure HTML/CSS impressions of what Impeccable steers toward */
3192.ab-after {
3193  position: absolute;
3194  inset: 0;
3195  padding: 12px;
3196  display: flex;
3197  flex-direction: column;
3198}
3199
3200/* After 01: editorial hero */
3201.ab-after--editorial {
3202  background: var(--color-cream);
3203  gap: 10px;
3204}
3205.ab-after-nav {
3206  display: flex;
3207  align-items: center;
3208  gap: 6px;
3209  padding-bottom: 8px;
3210  border-bottom: 1px solid var(--color-mist);
3211}
3212.ab-after-logo {
3213  width: 12px;
3214  height: 12px;
3215  border-radius: 3px;
3216  background: var(--color-ink);
3217}
3218.ab-after-link {
3219  width: 22px;
3220  height: 5px;
3221  border-radius: 2px;
3222  background: var(--color-mist);
3223}
3224.ab-after-cta {
3225  margin-left: auto;
3226  width: 48px;
3227  height: 16px;
3228  border-radius: 2px;
3229  background: var(--color-ink);
3230}
3231.ab-after-hero {
3232  display: flex;
3233  flex-direction: column;
3234  gap: 6px;
3235  flex: 1;
3236  justify-content: center;
3237}
3238.ab-after-kicker {
3239  font-family: var(--font-mono);
3240  font-size: 9px;
3241  letter-spacing: 0.22em;
3242  text-transform: uppercase;
3243  color: var(--color-accent);
3244}
3245.ab-after-title {
3246  font-family: var(--font-display);
3247  font-weight: 400;
3248  font-size: 20px;
3249  line-height: 1.05;
3250  color: var(--color-ink);
3251  letter-spacing: -0.01em;
3252  max-width: 10ch;
3253}
3254.ab-after-title em {
3255  font-style: italic;
3256  color: var(--color-accent);
3257}
3258.ab-after-line {
3259  height: 5px;
3260  border-radius: 2px;
3261  background: var(--color-mist);
3262}
3263.ab-after-line--short { width: 60%; }
3264.ab-after-btn {
3265  align-self: flex-start;
3266  margin-top: 4px;
3267  font-family: var(--font-body);
3268  font-weight: 500;
3269  font-size: 10px;
3270  letter-spacing: 0.12em;
3271  text-transform: uppercase;
3272  padding: 7px 12px;
3273  background: var(--color-ink);
3274  color: var(--color-paper);
3275  border-radius: 0;
3276}
3277
3278/* After 02: flat data table */
3279.ab-after--data {
3280  background: var(--color-paper);
3281  gap: 0;
3282  padding: 14px 14px 10px;
3283}
3284.ab-after-data-kicker {
3285  font-family: var(--font-mono);
3286  font-size: 9px;
3287  letter-spacing: 0.22em;
3288  text-transform: uppercase;
3289  color: var(--color-ash);
3290  margin-bottom: 10px;
3291}
3292.ab-after-data-row {
3293  display: grid;
3294  grid-template-columns: 1fr max-content max-content;
3295  gap: 10px;
3296  align-items: baseline;
3297  padding: 8px 0;
3298  border-bottom: 1px solid var(--color-mist);
3299  font-family: var(--font-body);
3300  font-size: 11px;
3301}
3302.ab-after-data-row:last-child { border-bottom: 0; }
3303.ab-after-data-k { color: var(--color-charcoal); }
3304.ab-after-data-v {
3305  font-family: var(--font-display);
3306  font-weight: 500;
3307  font-size: 14px;
3308  color: var(--color-ink);
3309  letter-spacing: -0.01em;
3310}
3311.ab-after-data-d {
3312  font-family: var(--font-mono);
3313  font-size: 10px;
3314  color: oklch(45% 0.18 145);
3315}
3316
3317/* After 03: one big honest insight */
3318.ab-after--insight {
3319  background: var(--color-cream);
3320  padding: 18px 20px;
3321  gap: 6px;
3322  justify-content: center;
3323}
3324.ab-after-insight-kicker {
3325  font-family: var(--font-mono);
3326  font-size: 9px;
3327  letter-spacing: 0.24em;
3328  text-transform: uppercase;
3329  color: var(--color-ash);
3330}
3331.ab-after-insight-num {
3332  font-family: var(--font-display);
3333  font-style: italic;
3334  font-weight: 400;
3335  font-size: 52px;
3336  line-height: 1;
3337  color: var(--color-ink);
3338  letter-spacing: -0.03em;
3339}
3340.ab-after-insight-num span {
3341  font-size: 0.5em;
3342  font-style: normal;
3343  color: var(--color-accent);
3344  margin-left: 2px;
3345  vertical-align: top;
3346}
3347.ab-after-insight-label {
3348  font-family: var(--font-body);
3349  font-size: 12px;
3350  line-height: 1.4;
3351  color: var(--color-charcoal);
3352  max-width: 24ch;
3353}
3354.ab-after-insight-label em {
3355  font-style: italic;
3356  color: var(--color-ink);
3357}
3358.ab-after-spark {
3359  width: 100%;
3360  height: 28px;
3361  margin-top: 6px;
3362  color: var(--color-accent);
3363  opacity: 0.8;
3364}
3365
3366.antidote-foot {
3367  display: flex;
3368  align-items: baseline;
3369  gap: var(--spacing-lg);
3370  padding-top: var(--spacing-md);
3371  border-top: 1px solid var(--color-mist);
3372  flex-wrap: wrap;
3373}
3374
3375.antidote-foot-meta {
3376  flex: 1;
3377  min-width: 0;
3378  font-family: var(--font-body);
3379  font-style: italic;
3380  font-size: 0.875rem;
3381  line-height: 1.55;
3382  color: var(--color-charcoal);
3383}
3384
3385.antidote-foot .antidote-suggest-link {
3386  font-size: 0.8125rem;
3387  color: var(--color-ash);
3388  text-decoration: none;
3389  white-space: nowrap;
3390}
3391.antidote-foot .antidote-suggest-link:hover {
3392  color: var(--color-accent);
3393  text-decoration: underline;
3394}
3395
3396@media (max-width: 820px) {
3397  .antidote-wall {
3398    grid-template-columns: 1fr;
3399    gap: var(--spacing-md);
3400  }
3401  .antidote-foot {
3402    flex-direction: column;
3403    align-items: flex-start;
3404    gap: var(--spacing-sm);
3405  }
3406}
3407
3408/* ============================================
3409   WHY — Anti-patterns, caught (tab 08 visual)
3410   ============================================ */
3411
3412.why-visual--antidote {
3413  display: grid;
3414  grid-template-columns: minmax(0, 1fr) 340px;
3415  gap: var(--spacing-lg);
3416  align-items: start;
3417}
3418
3419.why-visual--antidote .patterns-tabbed {
3420  margin: 0;
3421  min-width: 0;
3422  width: 100%;
3423}
3424
3425.why-visual--antidote .gallery-stack-container {
3426  flex: none;
3427  width: 100%;
3428  max-width: none;
3429}
3430
3431.gallery-stack-link {
3432  display: inline-flex;
3433  align-self: center;
3434  margin-top: var(--spacing-sm);
3435  font-family: var(--font-body);
3436  font-size: 0.82rem;
3437  color: var(--color-ink);
3438  text-decoration: underline;
3439  text-underline-offset: 3px;
3440  text-decoration-color: var(--color-accent);
3441  transition: color 0.12s ease;
3442}
3443
3444.gallery-stack-link:hover { color: var(--color-accent); }
3445
3446@media (max-width: 860px) {
3447  .why-visual--antidote { grid-template-columns: 1fr; }
3448}