/* 
   ESHA AI — PAGE SECTIONS (W1.2 Hero & Chat Mock)
    */

@layer components {

  /* -- Section 1: Hero -- */
  .hero {
    padding-block: clamp(40px, 7vw, 88px) clamp(48px, 7vw, 96px);
  }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 56px);
    align-items: center;
  }

  @media (min-width: 960px) {
    .hero-grid {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }
  }

  .hero-copy {
    max-inline-size: 560px;
  }

  .hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-block-end: var(--space-4);
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-muted);
  }

  .hero-kicker-dot {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background-color: var(--color-status-live);
    flex-shrink: 0;
  }

  .hero-title {
    margin: 0;
    font-size: var(--text-hero);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.03em;
  }

  .hero-highlight {
    display: inline-block;
    padding-block-end: 0.16em;
    margin-block-end: -0.16em;
    color: var(--color-accent);
  }

  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-highlight {
      background: linear-gradient(135deg, var(--color-highlight-a) 0%, var(--color-highlight-b) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
  }

  @media (forced-colors: active) {
    .hero-highlight {
      background: none;
      -webkit-text-fill-color: currentColor;
      color: currentColor;
    }
  }

  .hero-subhead {
    margin-block: var(--space-6) var(--space-8);
    max-inline-size: 48ch;
    font-size: clamp(1.0625rem, 1.25vw, 1.2rem);
    line-height: 1.6;
    color: var(--color-muted);
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  /* -- Phone-Style Telegram Chat Mock (Example) -- */
  .hero-visual {
    display: flex;
    justify-content: center;
  }

  .chat-phone {
    inline-size: 100%;
    max-inline-size: 430px;
    border: 1px solid var(--color-border);
    border-radius: 26px;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }

  .chat-phone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 14px 18px;
    border-block-end: 1px solid var(--color-border);
    background-color: var(--color-bg);
  }

  .chat-peer {
    display: flex;
    align-items: center;
    gap: 10px;
    min-inline-size: 0;
  }

  .chat-avatar {
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    flex-shrink: 0;
  }

  .chat-peer-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text);
  }

  .chat-peer-status {
    margin: 2px 0 0;
    font-size: var(--text-xs);
    line-height: 1.2;
    color: var(--color-muted);
  }

  .example-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-muted);
    flex-shrink: 0;
  }

  .chat-thread {
    display: grid;
    gap: 12px;
    padding: 18px;
    background-color: var(--color-surface);
  }

  .chat-bubble {
    max-inline-size: 92%;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  .chat-bubble--user {
    justify-self: end;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    color: var(--color-text);
    border-end-end-radius: 6px;
  }

  .chat-bubble--esha {
    justify-self: start;
    inline-size: 100%;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-text);
    border-end-start-radius: 6px;
  }

  .chat-time {
    display: block;
    margin-block-start: 6px;
    font-size: 11px;
    color: var(--color-muted);
    text-align: end;
  }

  /* Live Progress Card inside Esha Reply */
  .progress-card {
    display: grid;
    gap: 10px;
  }

  .progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text);
  }

  .progress-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  .progress-pulse {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background-color: var(--color-ember);
    flex-shrink: 0;
  }

  .chat-phone.is-complete .progress-pulse {
    background-color: var(--color-status-live);
    animation: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .progress-pulse {
      animation: pulseBeat 1.5s var(--ease-out) infinite;
    }
  }

  @keyframes pulseBeat {

    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }

    50% {
      opacity: 0.45;
      transform: scale(0.85);
    }
  }

  .progress-pct {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
  }

  .progress-bar-track {
    block-size: 5px;
    inline-size: 100%;
    border-radius: var(--radius-pill);
    background-color: var(--color-border);
    overflow: hidden;
  }

  .progress-bar-fill {
    display: block;
    inline-size: 43%;
    block-size: 100%;
    border-radius: var(--radius-pill);
    background: var(--brand-gradient);
    transition: inline-size var(--dur-base) var(--ease-out);
  }

  .chat-phone.is-complete .progress-bar-fill {
    inline-size: 100%;
    background: var(--color-status-live);
  }

  .progress-steps {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-xs);
    color: var(--color-muted);
  }

  .progress-steps li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .step-tag {
    font-weight: 600;
    color: var(--color-status-live);
  }

  .chat-phone:not(.is-complete) .step-tag--pending {
    color: var(--color-accent);
  }

  /* Typing Row & Finished File Card */
  .chat-typing {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    font-size: var(--text-xs);
    color: var(--color-muted);
  }

  .typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .typing-dots span {
    inline-size: 5px;
    block-size: 5px;
    border-radius: 50%;
    background-color: var(--color-muted);
  }

  @media (prefers-reduced-motion: no-preference) {
    .typing-dots span {
      animation: typingBounce 1.1s ease-in-out infinite;
    }

    .typing-dots span:nth-child(2) {
      animation-delay: 0.18s;
    }

    .typing-dots span:nth-child(3) {
      animation-delay: 0.36s;
    }
  }

  @keyframes typingBounce {

    0%,
    80%,
    100% {
      opacity: 0.35;
      transform: translateY(0);
    }

    40% {
      opacity: 1;
      transform: translateY(-2px);
    }
  }

  .chat-phone.is-complete .chat-typing {
    display: none;
  }

  .chat-result {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
  }

  .chat-phone:not(.is-complete) .chat-result {
    display: none;
    opacity: 0;
    transform: translateY(10px);
  }

  .file-attachment {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-block-end: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
  }

  .file-icon {
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 10px;
    background-color: var(--color-live-bg);
    color: var(--color-status-live);
    flex-shrink: 0;
  }

  .file-meta {
    min-inline-size: 0;
  }

  .file-name {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text);
    overflow-wrap: anywhere;
  }

  .file-sub {
    margin: 2px 0 0;
    font-size: 11px;
    color: var(--color-muted);
  }

  .chat-phone-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 10px 18px;
    border-block-start: 1px solid var(--color-border);
    background-color: var(--color-bg);
    font-size: 11px;
    color: var(--color-muted);
  }

  .chat-replay-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 44px;
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out);
  }

  .chat-replay-btn:hover {
    border-color: var(--color-muted);
  }

  @media (prefers-reduced-motion: reduce) {

    .progress-bar-fill,
    .chat-result {
      transition: none;
    }
  }

  /* -- Section 2: Trust Strip (Text Only) -- */
  .trust-strip {
    border-block: 1px solid var(--color-border);
    padding-block: var(--space-6);
    background-color: var(--color-surface);
  }

  .trust-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (min-width: 640px) {
    .trust-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 960px) {
    .trust-list {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .trust-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.4;
  }

  .trust-dot {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background-color: var(--color-cobalt);
    flex-shrink: 0;
  }

  /* -- Section 3 & 7: Shared 6-Card Grid (W2.1) -- */
  .cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  @media (min-width: 640px) {
    .cards-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-6);
    }
  }

  @media (min-width: 960px) {
    .cards-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-end: var(--space-1);
  }

  .card-icon {
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    color: var(--color-accent);
    flex-shrink: 0;
  }

  .card-icon svg {
    inline-size: 20px;
    block-size: 20px;
  }

  /* -- Section 4: How It Works (W2.2) -- */
  .section--tinted {
    border-block: 1px solid var(--color-border);
    background-color: var(--color-surface-tint);
  }

  .steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .step-arrow {
    display: grid;
    place-items: center;
    justify-self: center;
    color: var(--color-accent);
    transform: rotate(90deg);
  }

  @media (min-width: 900px) {
    .steps-grid {
      grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
      gap: var(--space-3);
      align-items: stretch;
    }

    .step-arrow {
      justify-self: auto;
      transform: none;
    }
  }

  .step-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg);
  }

  .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-accent);
  }

  .step-card h3 {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.35;
  }

  .step-card p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-muted);
  }

  .lang-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-start: auto;
    padding-block-start: var(--space-2);
  }

  .lang-pill {
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    font-size: var(--text-xs);
    color: var(--color-text);
  }

  .section-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-block-start: var(--space-6);
    min-block-size: 44px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
  }

  .section-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* -- Section 5: Resumable Timeline (W2.3) -- */
  .timeline-card {
    padding: clamp(20px, 4vw, 32px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }

  .resume-timeline {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (min-width: 960px) {
    .resume-timeline {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: var(--space-3);
    }
  }

  .timeline-node {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
  }

  @media (min-width: 960px) {
    .timeline-node {
      flex-direction: column;
      gap: var(--space-2);
      padding: var(--space-4);
    }
  }

  .timeline-node--pause {
    border-style: dashed;
    border-color: var(--color-amber);
  }

  .timeline-node--resume {
    border-color: var(--color-cobalt);
  }

  .node-icon {
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
  }

  .node-icon--done {
    color: var(--color-status-live);
    background-color: var(--color-live-bg);
    border-color: transparent;
  }

  .node-icon--pause {
    color: var(--color-status-build);
    background-color: var(--color-build-bg);
    border-color: transparent;
  }

  .node-icon--resume {
    color: var(--color-accent);
    border-color: var(--color-cobalt);
  }

  .node-meta {
    display: grid;
    gap: 2px;
  }

  .node-step {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-muted);
  }

  .node-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text);
  }

  .node-state {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-muted);
  }

  /* -- Section 6: Safety Ladder (W2.4) -- */
  .split-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 56px);
    align-items: start;
  }

  @media (min-width: 960px) {
    .split-layout {
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }
  }

  .split-layout .section-head {
    margin-block-end: var(--space-4);
  }

  .safety-ladder {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ladder-rung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5, 20px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
  }

  .ladder-rung--guarded {
    border-color: var(--color-cobalt);
  }

  .ladder-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-inline-size: 0;
  }

  .ladder-level {
    display: inline-grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-muted);
    flex-shrink: 0;
  }

  .ladder-rung--guarded .ladder-level {
    color: var(--color-accent);
    border-color: var(--color-cobalt);
  }

  .ladder-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
  }

  .ladder-desc {
    margin: 2px 0 0;
    font-size: var(--text-xs);
    color: var(--color-muted);
  }

  /* -- Section 7: Meet the Six (W2.5) -- */
  .role-pill {
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-bg);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-muted);
  }

  .team-warmth {
    margin: var(--space-6) 0 0;
    padding: var(--space-4) var(--space-6);
    border-inline-start: 3px solid var(--color-ember);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background-color: var(--color-surface-tint);
    font-size: var(--text-sm);
    color: var(--color-text);
  }

  /* -- Section 8: Status Board (W2.6) -- */
  .board-meta {
    margin: 0 0 var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-muted);
  }

  .board-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  @media (min-width: 960px) {
    .board-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-6);
      align-items: start;
    }
  }

  .board-column {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg);
  }

  .board-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-block-end: var(--space-3);
  }

  .board-count {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-muted);
  }

  .board-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .board-item {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
  }

  .board-item-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
  }

  .board-item-note {
    margin: 4px 0 0;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-muted);
  }

  /* -- Section 9: FAQ Accordion (W2.7) -- */
  .faq-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-end: var(--space-8);
  }

  .faq-head .section-head {
    margin-block-end: 0;
  }

  [data-faq-toggle-all][aria-expanded="true"] .faq-expand-label,
  [data-faq-toggle-all][aria-expanded="false"] .faq-collapse-label {
    display: none;
  }

  .faq-list {
    display: grid;
    gap: var(--space-3);
    max-inline-size: 760px;
  }

  .faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
  }

  .faq-item>summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    min-block-size: 52px;
    padding: var(--space-4) var(--space-5, 20px);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text);
    cursor: pointer;
  }

  .faq-item>summary::-webkit-details-marker {
    display: none;
  }

  .faq-item>summary::before {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-inline-end: 2px solid var(--color-accent);
    border-block-end: 2px solid var(--color-accent);
    transform: rotate(-45deg);
    flex-shrink: 0;
  }

  .faq-item[open]>summary::before {
    transform: rotate(45deg);
  }

  .faq-answer {
    padding: 0 var(--space-5, 20px) var(--space-4) calc(var(--space-5, 20px) + 20px);
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--color-muted);
  }

  .faq-answer p {
    margin: 0;
  }

  .faq-item::details-content {
    interpolate-size: allow-keywords;
    overflow: clip;
    contain: layout;
  }

  .faq-item:not([open])::details-content {
    block-size: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .faq-item>summary::before {
      transition: transform var(--dur-fast) var(--ease-out);
    }

    .faq-item::details-content {
      transition: block-size, content-visibility;
      transition-duration: 280ms;
      transition-timing-function: var(--ease-out);
      transition-behavior: allow-discrete;
    }
  }

  /* -- Section 10: Final Call to Action (W2.7) -- */
  .cta-box {
    max-inline-size: 720px;
  }

  .cta-box h2 {
    margin: 0 0 var(--space-3);
  }

  .cta-box p {
    margin: 0 0 var(--space-6);
    max-inline-size: 52ch;
    color: var(--color-muted);
  }

  .cta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

  .cta-note {
    margin: var(--space-4) 0 0;
    font-size: var(--text-xs);
    color: var(--color-muted);
  }

  /* -- Inner Pages Shared Layouts (Phase W3) -- */
  .page-hero {
    padding-block: clamp(40px, 6vw, 72px) var(--space-8);
    border-block-end: 1px solid var(--color-border);
    background-color: var(--color-surface-tint);
  }

  .page-hero h1 {
    margin: 0;
    font-size: clamp(2.125rem, 4vw, 3.25rem);
    line-height: 1.12;
    max-inline-size: 20ch;
  }

  .page-hero-lead {
    margin: var(--space-4) 0 0;
    max-inline-size: 56ch;
    font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
    line-height: 1.6;
    color: var(--color-muted);
  }

  .detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  @media (min-width: 768px) {
    .detail-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .example-box {
    margin-block-start: auto;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
    font-size: var(--text-xs);
    line-height: 1.55;
  }

  .example-label {
    display: block;
    margin-block-end: 4px;
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
  }

  .example-output {
    display: block;
    margin-block-start: 6px;
    font-family: var(--font-mono);
    color: var(--color-text);
  }

  .prose-stack {
    display: grid;
    gap: var(--space-4);
    max-inline-size: 760px;
  }

  .prose-card {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
  }

  .prose-card h2,
  .prose-card h3 {
    margin: 0 0 var(--space-3);
  }

  .prose-card p {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-muted);
  }

  .prose-card p:last-child,
  .prose-card ul:last-child {
    margin-block-end: 0;
  }

  .clean-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding-inline-start: 18px;
    font-size: var(--text-sm);
    color: var(--color-muted);
  }

  .arch-wrap {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    overflow-x: auto;
  }

  .arch-wrap svg {
    inline-size: 100%;
    min-inline-size: 640px;
    block-size: auto;
  }

  .cmd-grid {
    display: grid;
    gap: var(--space-3);
    margin: 0;
  }

  .cmd-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
  }

  @media (min-width: 640px) {
    .cmd-row {
      grid-template-columns: 180px 1fr;
      align-items: baseline;
      gap: var(--space-4);
    }
  }

  .cmd-row dt {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-accent);
  }

  .cmd-row dd {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-muted);
  }

  .error-box {
    max-inline-size: 560px;
    padding-block: var(--space-12);
  }

  .error-code {
    margin: 0 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent);
  }

  /* -- Performance: Defer off-screen home sections (W5.2) -- */
  #resumable,
  #safety,
  #team,
  #status-board,
  #faq,
  #updates {
    content-visibility: auto;
    contain-intrinsic-size: auto 480px;
  }

  /* -- Flow Controls & Interactive Sequences (W5.9) -- */
  .flow-actions,
  .arch-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
  }

  .flow-actions .section-link {
    margin-block-start: 0;
  }

  .flow-actions--end {
    justify-content: flex-end;
    margin-block-start: var(--space-4);
  }

  .arch-foot {
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-muted);
  }

  #archFlow .arch-box {
    fill: var(--color-bg);
    stroke: var(--color-border);
    stroke-width: 1.5;
  }

  #archFlow .arch-box--ember { stroke: var(--color-ember); }
  #archFlow .arch-box--live { stroke: var(--color-status-live); }

  #archFlow .arch-arrow {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  @media (prefers-reduced-motion: no-preference) {
    .card,
    .ladder-rung {
      transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), opacity 320ms var(--ease-out);
    }

    .card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: rgba(0, 87, 229, 0.28);
      transition-delay: 0ms;
    }

    .ladder-rung:hover {
      transform: translateX(2px);
      border-color: rgba(0, 87, 229, 0.28);
      transition-delay: 0ms;
    }

    #archFlow.is-motion-ready .arch-node {
      transform-box: fill-box;
      transform-origin: center;
    }

    #archFlow.is-motion-ready .arch-node,
    #howStepFlow.is-motion-ready .step-card,
    #resumeFlow.is-motion-ready .timeline-node {
      opacity: 0.34;
      transform: translateY(8px);
      transition: opacity 280ms var(--ease-out), transform 320ms var(--ease-out), border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
    }

    #archFlow.is-motion-ready .arch-node.is-lit,
    #howStepFlow.is-motion-ready .step-card.is-lit,
    #resumeFlow.is-motion-ready .timeline-node.is-lit {
      opacity: 1;
      transform: none;
    }

    #archFlow.is-motion-ready .arch-node.is-lit .arch-box {
      stroke: var(--color-accent);
      stroke-width: 2;
      filter: drop-shadow(0 6px 14px rgba(0, 87, 229, 0.14));
    }

    #archFlow.is-motion-ready .arch-node.is-lit .arch-box--ember {
      stroke: var(--color-ember);
      filter: drop-shadow(0 6px 14px rgba(255, 107, 74, 0.16));
    }

    #archFlow.is-motion-ready .arch-node.is-lit .arch-box--live {
      stroke: var(--color-status-live);
      filter: drop-shadow(0 6px 14px rgba(21, 115, 71, 0.16));
    }

    #howStepFlow.is-motion-ready .step-card.is-lit {
      border-color: rgba(0, 87, 229, 0.34);
      box-shadow: var(--shadow-md);
    }

    #howStepFlow .step-num {
      transition: background-color 240ms var(--ease-out), color 240ms var(--ease-out), border-color 240ms var(--ease-out);
    }

    #howStepFlow.is-motion-ready .step-card.is-lit .step-num {
      background-color: var(--color-accent-fill);
      border-color: var(--color-accent-fill);
      color: var(--color-accent-on-fill);
    }

    #archFlow.is-motion-ready .arch-arrow,
    #howStepFlow.is-motion-ready .step-arrow path {
      opacity: 0.16;
      stroke-dasharray: 42;
      stroke-dashoffset: 42;
      transition: stroke-dashoffset 260ms var(--ease-out), opacity 180ms var(--ease-out);
    }

    #archFlow.is-motion-ready .arch-arrow.is-lit,
    #howStepFlow.is-motion-ready .step-arrow.is-lit path {
      opacity: 1;
      stroke-dashoffset: 0;
    }

    html.motion-enabled [data-reveal]:not(.is-revealed) {
      opacity: 0;
      transform: translateY(10px);
    }
  }
}