/* ========================================================================
   * PAGE-SEGMENT-USE-CASE-PROJECT-MANAGEMENT-TEAMS · composition order:
   * SEC-16 · SEC-80 · SEC-81 · SEC-82 · SEC-83 · SEC-84 · SEC-25 · SEC-11
   *   · SEC-27 · SEC-08
   * 10 sections. Sage↔white↔sage↔white rhythm mirrors PAGE-HOMEPAGE-1.5.
   * ======================================================================== */

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: var(--font-body);
    background: var(--bg-page);
    color: var(--text-body);
    line-height: var(--lh-normal);
  }
  .container { max-width: var(--container-base); margin: 0 auto; padding: 0 var(--container-px); }
  .container-wide { max-width: calc(var(--container-base) + 120px); margin: 0 auto; padding: 0 var(--container-px); }
  @media (min-width: 1281px) { .container-wide { max-width: calc(var(--container-md) + 120px); } }
  @media (min-width: 1601px) { .container-wide { max-width: calc(var(--container-lg) + 120px); } }
  @media (min-width: 1921px) { .container-wide { max-width: calc(var(--container-xl) + 120px); } }
  .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--container-px); }
  @media (min-width: 1281px) { .container { max-width: var(--container-md); } }
  @media (min-width: 1601px) { .container { max-width: var(--container-lg); } }
  @media (min-width: 1921px) { .container { max-width: var(--container-xl); } }



  /* ===== SEC-80 · segment-hero ======================================== */
  .sec-80 { padding: var(--section-py-lg) 0; background: var(--bg-page); }
  .segment-hero-wrap { max-width: 720px; }
  .segment-eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--text-muted); margin: 0 0 var(--space-5) 0; }
  .segment-h1 { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); color: var(--text-heading); margin: 0 0 var(--space-5) 0; max-width: 640px; }
  .segment-dek { font-size: var(--text-lg); line-height: var(--lh-relaxed); color: var(--text-body); margin: 0 0 var(--space-8) 0; max-width: 600px; }
  .segment-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
  .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 14px 24px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-semibold); text-decoration: none; transition: background var(--transition), color var(--transition), border-color var(--transition); border: 1.5px solid transparent; white-space: nowrap; }
  .btn-primary { background: var(--primary); color: var(--text-inverse); }
  .btn-primary:hover { background: var(--primary-hover); }
  .btn-textlink { display: inline-flex; align-items: center; gap: 6px; padding: 14px 4px; background: transparent; border: none; color: var(--text-heading); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-semibold); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--transition); }
  .btn-textlink:hover { border-bottom-color: var(--text-heading); }
  .segment-trust { font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-3) 0 0 0; line-height: var(--lh-normal); }
  @media (max-width: 900px) { .segment-h1 { font-size: var(--text-4xl); } }
  @media (max-width: 640px) { .segment-h1 { font-size: var(--text-3xl); } .segment-dek { font-size: var(--text-md); } .segment-actions { flex-direction: column; align-items: stretch; gap: var(--space-3); } .btn, .btn-textlink { width: 100%; justify-content: center; } }

  /* ===== SEC-81 · segment-problem ===================================== */
  .sec-81 { padding: var(--section-py) 0; background: var(--bg-surface); }
  .problem-wrap { max-width: 760px; margin: 0 auto; text-align: left; }
  .problem-eyebrow { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-medium); font-style: italic; color: var(--text-muted); margin: 0 0 var(--space-4) 0; letter-spacing: var(--ls-normal); }
  .problem-body { font-size: var(--text-xl); line-height: var(--lh-relaxed); color: var(--text-heading); margin: 0; font-family: var(--font-display); font-weight: var(--fw-regular); letter-spacing: var(--ls-tight); }
  .problem-body strong { font-weight: var(--fw-medium); }
  @media (max-width: 640px) { .problem-body { font-size: var(--text-lg); } }

  /* ===== SEC-82 · segment-plugins-curated ============================= */
  .sec-82 { padding: var(--section-py) 0; background: var(--bg-page); }
  .curated-header { max-width: 680px; margin: 0 auto var(--space-10) auto; text-align: center; }
  .curated-eyebrow { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--text-muted); margin: 0 0 var(--space-3) 0; }
  .curated-h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); margin: 0; }
  .curated-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-bottom: var(--space-8); }
  .plugin-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--bg-surface-warm); border: 1px solid var(--border); border-top: 2px solid transparent; border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); }
  .plugin-card:hover, .plugin-card:focus-visible { background: var(--bg-surface); border-color: var(--border-strong); border-top-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .plugin-card:hover .plugin-card-name, .plugin-card:focus-visible .plugin-card-name { text-decoration: underline; text-underline-offset: 3px; }
  .plugin-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .plugin-card-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-heading); }
  .plugin-card-icon svg { width: 24px; height: 24px; }
  .plugin-card-name { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--text-heading); margin: 0; }
  .plugin-card-pitch { font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--text-body); margin: 0; flex: 1; }
  .plugin-card-cta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-heading); margin-top: var(--space-2); transition: gap var(--transition-fast); }
  .plugin-card:hover .plugin-card-cta { gap: var(--space-3); }
  .curated-see-all-row { text-align: center; }
  .curated-see-all { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-heading); text-decoration: none; border-bottom: 1px solid var(--text-heading); padding-bottom: 2px; transition: gap var(--transition-fast); }
  .curated-see-all:hover { gap: var(--space-3); }
  @media (max-width: 1024px) { .curated-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px) { .curated-grid { grid-template-columns: 1fr; } .curated-h2 { font-size: var(--text-2xl); } }

  /* ===== SEC-83 · segment-benefits ==================================== */
  .sec-83 { padding: var(--section-py) 0; background: var(--bg-surface); }
  .benefits-wrap { max-width: 760px; margin: 0 auto; }
  .benefits-header { margin-bottom: var(--space-10); }
  .benefits-eyebrow { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--text-muted); margin: 0 0 var(--space-3) 0; }
  .benefits-h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); margin: 0; }
  .benefits-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-6); }
  .benefit { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-4); align-items: flex-start; }
  .benefit-icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
  .benefit-icon svg { width: 20px; height: 20px; }
  .benefit-body p { margin: 0; font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--text-body); }
  .benefit-lead { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-medium); color: var(--text-heading); display: block; margin-bottom: var(--space-1); line-height: var(--lh-snug); }
  @media (max-width: 640px) { .benefits-h2 { font-size: var(--text-2xl); } .benefit-lead { font-size: var(--text-md); } }

  /* ===== SEC-84 · segment-mini-case ================================== */
  .sec-84 { padding: var(--section-py-sm) 0; background: var(--bg-page); }
  .case-placeholder { max-width: 720px; margin: 0 auto; padding: var(--space-10) var(--space-6); background: var(--bg-surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); text-align: center; }
  .case-placeholder p { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--text-body); margin: 0; }
  .case-placeholder a { color: var(--text-heading); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
  .case-placeholder a:hover { color: var(--accent-hover); }

  /* ===== SEC-25 · deployment-options-duo ============================= */
  .sec-25 { padding: var(--section-py) 0; background: var(--bg-surface); }
  .sec-25-header { max-width: 720px; margin: 0 auto var(--space-12) auto; text-align: center; }
  .sec-25-eyebrow { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--text-muted); margin: 0 0 var(--space-3) 0; }
  .sec-25-h2 { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); margin: 0 0 var(--space-4) 0; }
  .sec-25-sub { font-size: var(--text-lg); line-height: var(--lh-normal); color: var(--text-body); margin: 0; }
  .deploy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); align-items: stretch; }
  .deploy-card { position: relative; background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-10) var(--space-8); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-5); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
  .deploy-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
  .deploy-card--featured { border: 1.5px solid var(--accent); box-shadow: var(--shadow-xl); background: var(--bg-surface); }
  .deploy-push-badge { position: absolute; top: -12px; right: var(--space-6); display: inline-flex; align-items: center; padding: 6px 12px; background: var(--accent); color: var(--text-inverse); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wider); border-radius: var(--radius-full); box-shadow: var(--shadow-sm); }
  .deploy-icon-wrap { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--bg-muted); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--text-heading); }
  .deploy-icon-wrap svg { width: 24px; height: 24px; }
  .deploy-card--featured .deploy-icon-wrap { background: var(--accent-soft); border-color: transparent; color: var(--accent-hover); }
  .deploy-card-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); margin: 0; }
  .deploy-card-dek { font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--text-body); margin: 0; }
  .deploy-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .deploy-bullets li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-base); line-height: 1.55; color: var(--text-body); }
  .deploy-bullets li strong { color: var(--text-heading); font-weight: var(--fw-semibold); }
  .deploy-bullet-dot { flex-shrink: 0; width: 6px; height: 6px; margin-top: 8px; border-radius: var(--radius-full); background: var(--text-muted); }
  .deploy-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 14px 20px; font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-semibold); text-decoration: none; border-radius: var(--radius-sm); border: 1.5px solid var(--primary); background: transparent; color: var(--primary); transition: all var(--transition); margin-top: auto; }
  .deploy-cta:hover { background: var(--primary-soft); }
  .deploy-card--featured .deploy-cta { background: var(--primary); color: var(--text-inverse); }
  .deploy-card--featured .deploy-cta:hover { background: var(--primary-hover); }
  @media (max-width: 900px) { .deploy-grid { grid-template-columns: 1fr; } .sec-25-h2 { font-size: var(--text-4xl); } }

  /* ===== SEC-11 · faq-accordion ====================================== */
  .sec-11 { padding: var(--section-py-lg) 0; background: var(--bg-page); }
  .faq-wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-14); align-items: start; }
  .faq-intro { position: sticky; top: calc(80px + var(--space-4)); }
  .faq-eyebrow { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--text-muted); margin: 0 0 var(--space-3) 0; }
  .faq-heading { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); margin: 0 0 var(--space-4) 0; }
  .faq-dek { font-size: var(--text-lg); line-height: var(--lh-normal); color: var(--text-body); margin: 0 0 var(--space-8) 0; }
  .faq-contact { padding: var(--space-5); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
  .faq-contact-label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--text-muted); margin: 0 0 var(--space-2) 0; }
  .faq-contact-text { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-medium); color: var(--text-heading); margin: 0 0 var(--space-3) 0; line-height: var(--lh-snug); }
  .faq-contact-link { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--accent-hover); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
  .faq-contact-link:hover { color: var(--accent); }
  .faq-list { display: flex; flex-direction: column; gap: var(--space-2); }
  .faq-item { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color var(--transition), box-shadow var(--transition); overflow: hidden; }
  .faq-item[open] { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
  .faq-question { list-style: none; cursor: pointer; padding: var(--space-5) var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-medium); color: var(--text-heading); line-height: var(--lh-snug); transition: color var(--transition); }
  .faq-question::-webkit-details-marker { display: none; }
  .faq-question:hover { color: var(--accent-hover); }
  .faq-item[open] .faq-question { color: var(--accent-hover); }
  .faq-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--bg-muted); display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition); }
  .faq-item[open] .faq-icon { background: var(--accent); color: var(--text-inverse); }
  .faq-icon svg { transition: transform var(--transition); }
  .faq-item[open] .faq-icon svg { transform: rotate(45deg); }
  .faq-answer { padding: 0 var(--space-6) var(--space-5) var(--space-6); font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--text-body); }
  .faq-answer p { margin: 0 0 var(--space-3) 0; }
  .faq-answer p:last-child { margin-bottom: 0; }
  .faq-answer a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
  .faq-answer a:hover { color: var(--link-hover); }
  @media (max-width: 1000px) { .faq-wrap { grid-template-columns: 1fr; gap: var(--space-10); } .faq-intro { position: static; } }
  @media (max-width: 640px) { .faq-heading { font-size: var(--text-4xl); } .faq-question { font-size: var(--text-lg); padding: var(--space-4) var(--space-5); } .faq-answer { padding: 0 var(--space-5) var(--space-4) var(--space-5); font-size: var(--text-base); } }

  /* ===== SEC-27 · cta-banner-mid ===================================== */
  .sec-27 { padding: var(--section-py) 0; background: var(--bg-surface); position: relative; }
  .cta-card { max-width: 780px; margin: 0 auto; text-align: center; padding: var(--space-14) var(--space-10); background: var(--bg-muted); border-radius: var(--radius-xl); border: 1px solid var(--border); position: relative; overflow: hidden; }
  .cta-accent-ribbon { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--accent); }
  .cta-eyebrow { font-size: var(--text-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-widest); color: var(--text-muted); margin: 0 0 var(--space-4) 0; }
  .cta-heading { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-heading); margin: 0 0 var(--space-4) 0; }
  .cta-dek { font-size: var(--text-lg); line-height: var(--lh-normal); color: var(--text-body); margin: 0 auto var(--space-8) auto; max-width: 560px; }
  .cta-actions { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; align-items: center; }
  .cta-micro { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--text-muted); }
  @media (max-width: 640px) { .cta-heading { font-size: var(--text-4xl); } .cta-dek { font-size: var(--text-md); } .cta-card { padding: var(--space-10) var(--space-5); } }


  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition: none !important;
      animation-duration: 0.001ms !important;
    }
  }


  /* SEC-08 — Patel #5 freshness marker */
  .last-updated { font-size: var(--text-xs); color: var(--text-muted); text-align: center; margin: var(--space-4) 0 0 0; padding: 0; opacity: 0.7; }
  .last-updated time { font-variant-numeric: tabular-nums; }