/* ╔═══════════════════════════════════════════════════════════════════
   DONEZO · DZ-LP-03-Sections.css
   © 2026 Sequence Theory · Amsterdam · donezo.space
   All rights reserved. Unauthorised redistribution is prohibited.

   INTELLECTUAL PROPERTY NOTICE
   · EU Directive 2009/24/EC Art. 4 — Reproduction prohibited
   · Dutch Auteurswet Art. 1, 10, 13 — Copyright protection
   · EU Directive 2004/48/EC Art. 13 — Damages include infringer profits
   Infringement: legal@donezo.space · Source: https://donezo.space

   DZ:FILE:START
   slug:   dz-lp-sections
   id:     LP-CSS-003
   role:   Sections: suite render styles, review, how/vision
   canary: dz-c-lp-sec-2026
   build:  lp-1.0.0+2026.04.30
   name:   DZ-LP-03-Sections.css
╚═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────── */

    /* === DZ:SUITE_CSS BEGIN === */
    /* Suite section header chips — visual summary of Donezo principles */
    .dz-suite-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
    }
    .dz-suite-chip {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 9px 14px;
      background: color-mix(in oklab, var(--fg) 5%, transparent);
      border: 1px solid var(--cs);
      border-radius: 12px;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.4;
      transition: border-color var(--fast) ease, color var(--fast) ease;
    }
    .dz-suite-chip:hover {
      border-color: var(--cs2);
      color: var(--fg);
    }
    .dz-suite-chip strong { color: var(--fg); font-weight: 700; }
    .dz-suite-chip-ico {
      width: 15px; height: 15px;
      opacity: .7; flex-shrink: 0; color: var(--fg);
    }

    .dz-suite-section {
      padding: 20px 0 72px;
    }

    .dz-suiteHead {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 14px;
    }
    .dz-suiteTitle {
      margin: 0;
      /* Match dz-sectionTitle so all section H2s share one scale */
      font-size: clamp(28px, 3.5vw, 44px);
      letter-spacing: -0.03em;
      font-weight: 980;
      line-height: 1.12;
    }
    .dz-suiteSub {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
      max-width: 72ch;
    }
    .dz-suiteActions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
    }

    /* Tabs */
    .dz-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 14px;
    }
    .dz-tab {
      border-radius: 999px;
      border: 1px solid color-mix(in oklab, var(--fg) 12%, var(--border));
      background: color-mix(in oklab, var(--bg) 90%, var(--soft));
      color: color-mix(in oklab, var(--fg) 60%, transparent);
      padding: 9px 13px;
      font-size: 12.5px;
      font-weight: 950;
      cursor: pointer;
      transition: transform var(--fast) var(--ease), border-color var(--fast) ease, color var(--fast) ease, background var(--fast) ease;
      user-select: none;
      white-space: nowrap;
    }
    .dz-tab:hover {
      transform: translateY(-1px);
      border-color: color-mix(in oklab, var(--fg) 28%, var(--border));
      color: var(--fg);
    }
    .dz-tab.active {
      color: var(--fg);
      background: color-mix(in oklab, var(--fg) 10%, transparent);
      border-color: color-mix(in oklab, var(--fg) 50%, var(--border));
    }

    /* Suite grid */
    .dz-suiteGrid {
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 0;
      align-items: stretch;
      border-radius: var(--radius2);
      border: 1px solid color-mix(in oklab, var(--fg) 12%, var(--border));
      background: color-mix(in oklab, var(--soft) 85%, var(--bg));
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    /* Left panel */
    .dz-leftPanel {
      border-right: 1px solid color-mix(in oklab, var(--fg) 12%, var(--border));
      background: color-mix(in oklab, var(--soft) 90%, var(--bg));
      display: flex;
      flex-direction: column;
      min-height: 720px;
    }

    .dz-leftTitle {
      font-size: 11.5px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 14px 16px 10px;
    }

    .dz-appBtns {
      padding: 0 14px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow: auto;
      max-height: 540px;
      flex: 1;
    }
    .dz-appBtns::-webkit-scrollbar { width: 10px; }
    .dz-appBtns::-webkit-scrollbar-thumb {
      background: color-mix(in oklab, var(--fg) 12%, transparent);
      border: 3px solid transparent;
      background-clip: padding-box;
      border-radius: 999px;
    }
    .dz-appBtns::-webkit-scrollbar-track { background: transparent; }

    .dz-appBtn {
      width: 100%;
      text-align: left;
      border-radius: 14px;
      border: 1px solid transparent;
      background: transparent;
      padding: 11px 12px;
      cursor: pointer;
      transition: transform var(--fast) var(--ease), border-color var(--fast) ease, background var(--fast) ease;
      user-select: none;
      color: var(--fg);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .dz-appBtn:hover {
      transform: translateY(-1px);
      border-color: color-mix(in oklab, var(--fg) 22%, var(--border));
      background: color-mix(in oklab, var(--fg) 4%, transparent);
    }
    .dz-appBtn.active {
      border-color: color-mix(in oklab, var(--fg) 45%, var(--border));
      background: color-mix(in oklab, var(--fg) 9%, transparent);
    }

    .dz-appNameRow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .dz-appTitle {
      font-weight: 980;
      letter-spacing: -0.01em;
      font-size: 13.5px;
      line-height: 1.2;
      margin: 0;
    }
    .dz-appTag {
      font-size: 10.5px;
      color: var(--muted);
      border: 1px solid color-mix(in oklab, var(--fg) 10%, var(--border));
      padding: 4px 8px;
      border-radius: 999px;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .dz-appDesc {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .dz-bullets {
      margin: 2px 0 0;
      padding-left: 16px;
      font-size: 11.5px;
      line-height: 1.45;
    }
    .dz-bullets li {
      margin: 1px 0;
      color: color-mix(in oklab, var(--muted) 80%, var(--fg));
    }

    /* Right panel */
    .dz-rightPanel {
      display: flex;
      flex-direction: column;
      min-height: 580px;
      overflow: hidden;
      position: relative;
    }

    .dz-previewTop {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 16px;
      border-bottom: 1px solid color-mix(in oklab, var(--fg) 10%, var(--border));
    }
    .dz-previewMeta {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    .dz-previewH {
      margin: 0;
      font-size: 16px;
      font-weight: 980;
      letter-spacing: -0.02em;
    }
    .dz-previewP {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
      max-width: 60ch;
    }

    /* previewBullets now handled inside dz-dpBullets in detailPane */
    .dz-previewBulletsWrap{display:none}
    .dz-previewBulletsLabel{display:none}
    .dz-previewBullets{display:none}
    html[dir="rtl"] .dz-previewBullets{
      padding-left: 0;
      padding-right: 18px;
    }
    /* ── View toggle ── */
    .dz-pvTagRow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
    .dz-pvTag{font-size:10px;font-weight:980;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:4px 9px;border-radius:999px;border:1px solid color-mix(in oklab,var(--fg) 11%,var(--border));}
    .dz-pvViewToggle{display:flex;border-radius:10px;border:1px solid color-mix(in oklab,var(--fg) 12%,var(--border));overflow:hidden;background:color-mix(in oklab,var(--bg) 80%,transparent);}
    .dz-pvVBtn{padding:5px 11px;font-size:11.5px;font-weight:960;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:background .12s,color .12s;white-space:nowrap;}
    .dz-pvVBtn.active{background:color-mix(in oklab,var(--fg) 10%,transparent);color:var(--fg);}
    .dz-pvVBtn:hover:not(.active){color:var(--fg);}

    /* ── Detail pane ── */
    .dz-detailPane{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:0;}
    .dz-dpSection{padding:14px 16px;border-bottom:1px solid color-mix(in oklab,var(--fg) 8%,var(--border));}
    .dz-dpLabel{font-size:10px;font-weight:980;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;}
    .dz-dpText{margin:0;font-size:13px;line-height:1.7;color:color-mix(in oklab,var(--muted) 85%,var(--fg));}
    .dz-dpBullets{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:7px;font-size:13px;line-height:1.6;color:color-mix(in oklab,var(--muted) 80%,var(--fg));}
    .dz-dpBullets li{padding-left:2px;}
    .dz-dpUserList{display:flex;flex-direction:column;gap:6px;}
    .dz-dpUser{display:flex;align-items:center;gap:9px;font-size:13px;color:color-mix(in oklab,var(--muted) 75%,var(--fg));line-height:1.5;}
    .dz-dpUser::before{content:"→";color: var(--fg);font-weight:980;font-size:12px;flex-shrink:0;}
    .dz-dpBenList li::marker{color: var(--fg);}
    .dz-dpVault{display:flex;align-items:flex-start;gap:10px;padding:13px 16px;font-size:12px;color:var(--muted);line-height:1.6;border-top:1px solid color-mix(in oklab,var(--fg) 6%,var(--border));margin-top:auto;}
    .dz-dpVaultIcon{flex-shrink:0;font-size:15px;margin-top:1px;}

    /* Animate detail pane in */
    @keyframes dpIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
    .dz-detailPane{animation:dpIn .22s ease both;}
    .dz-dpSection{opacity:0;animation:dpIn .25s ease both;}
    .dz-dpSection:nth-child(1){animation-delay:.04s}
    .dz-dpSection:nth-child(2){animation-delay:.10s}
    .dz-dpSection:nth-child(3){animation-delay:.16s}
    .dz-dpSection:nth-child(4){animation-delay:.22s}
    .dz-dpVault{opacity:0;animation:dpIn .25s ease .28s both;}

    .dz-previewActions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
      flex-shrink: 0;
    }

    .dz-mini {
      border-radius: 999px;
      border: 1px solid color-mix(in oklab, var(--fg) 14%, var(--border));
      background: transparent;
      color: var(--fg);
      padding: 9px 13px;
      cursor: pointer;
      font-weight: 980;
      font-size: 12px;
      transition: transform var(--fast) var(--ease), border-color var(--fast) ease, opacity var(--fast) ease, background var(--fast) ease;
      user-select: none;
      white-space: nowrap;
    }
    .dz-mini:hover {
      transform: translateY(-1px);
      border-color: color-mix(in oklab, var(--fg) 50%, var(--border));
    }
    .dz-mini:active { transform: translateY(0); opacity: .90; }
    .dz-mini.primary {
      background: var(--fg);
      color: var(--bg);
      border-color: color-mix(in oklab, var(--fg) 20%, transparent);
    }
    .dz-mini:disabled {
      opacity: .40;
      cursor: not-allowed;
      transform: none !important;
    }

    /* Iframe chrome */
    .dz-iframeWrap {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .dz-iframeChrome {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 14px;
      background: color-mix(in oklab, var(--soft) 60%, transparent);
      border-bottom: 1px solid color-mix(in oklab, var(--fg) 10%, var(--border));
      color: var(--muted);
      font-size: 12px;
      user-select: none;
    }
    .dz-dots { display: flex; gap: 6px; }
    .dz-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      border: 1px solid color-mix(in oklab, var(--fg) 14%, var(--border));
      background: color-mix(in oklab, var(--bg) 80%, transparent);
      opacity: .85;
    }
    .dz-url {
      max-width: 68%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dz-iframe {
      width: 100%;
      flex: 1;
      border: none;
      background: color-mix(in oklab, var(--soft) 70%, transparent);
      opacity: 0;
      transform: scale(0.985);
      transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
      min-height: 420px;
      /* Browser hint for the embedded page's user-agent defaults. Inner pages
         that don't theme themselves at least inherit a dark form-control /
         scrollbar / canvas baseline. Pages with their own theme override this. */
      color-scheme: dark;
    }
    body.light .dz-iframe {
      color-scheme: light;
    }
    .dz-iframe.ready {
      opacity: 1;
      transform: scale(1);
    }

    .dz-empty {
      position: absolute;
      inset: 42px 0 0 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 18px;
      color: var(--muted);
      z-index: 2;
      background: transparent;
    }
    .dz-empty strong { color: var(--fg); font-weight: 980; letter-spacing: -0.02em; font-size: 15px; }
    .dz-empty div { margin-top: 8px; font-size: 13px; line-height: 1.6; }

    .dz-previewBlocked {
      position: absolute;
      inset: 42px 0 0 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      z-index: 2;
    }
    .dz-previewBlocked .box {
      width: min(520px, 100%);
      border-radius: 18px;
      border: 1px solid color-mix(in oklab, var(--fg) 14%, var(--border));
      background: linear-gradient(180deg, var(--card), var(--card2));
      box-shadow: var(--shadow);
      padding: 18px;
      text-align: center;
    }
    .dz-previewBlocked h4 {
      margin: 0;
      font-size: 14px;
      font-weight: 980;
    }
    .dz-previewBlocked p {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
    }
    .dz-previewBlocked .row {
      margin-top: 14px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .dz-smallBtn {
      border-radius: 14px;
      border: 1px solid color-mix(in oklab, var(--fg) 14%, var(--border));
      background: transparent;
      color: var(--fg);
      padding: 10px 14px;
      cursor: pointer;
      font-weight: 980;
      font-size: 12px;
      transition: transform var(--fast) var(--ease), border-color var(--fast) ease, opacity var(--fast) ease;
      user-select: none;
    }
    .dz-smallBtn:hover {
      transform: translateY(-1px);
      border-color: color-mix(in oklab, var(--fg) 42%, var(--border));
    }
    .dz-smallBtn.primary {
      background: var(--fg);
      color: var(--bg);
      border-color: color-mix(in oklab, var(--fg) 20%, transparent);
    }
    .dz-smallBtn:active { transform: translateY(0); opacity: .90; }

    /* Responsive */
    @media (max-width: 980px) {
      .dz-suiteGrid { grid-template-columns: 1fr; }
      .dz-leftPanel {
        border-right: none;
        border-bottom: 1px solid color-mix(in oklab, var(--fg) 12%, var(--border));
        min-height: auto;
      }
      .dz-appBtns { max-height: 340px; }
      .dz-suiteHead { flex-direction: column; align-items: flex-start; }
      .dz-previewTop { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 640px) {
      .dz-url { max-width: 50%; }
      .dz-suiteActions { width: 100%; justify-content: flex-start; }
    }
    /* === DZ:SUITE_CSS END === */
  

/* ─────────────────────────────────────────────────────────── */


    /* ── GUARDIAN SECTION ──────────────────────────────────────── */
    .dz-guardian-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 36px;
    }
    .dz-guardian-intro {
      max-width: 760px;
    }
    .dz-guardian-lead {
      font-size: 17px;
      line-height: 1.75;
      color: var(--muted);
      margin: 0 0 20px;
      font-weight: 300;
    }
    .dz-guardian-rule {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 18px 22px;
      border-left: 3px solid;
      border-image: var(--rainbow) 1;
      background: color-mix(in oklab, var(--fg) 4%, transparent);
      border-radius: 0 12px 12px 0;
    }
    .dz-guardian-rule-text {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.02em;
    }
    .dz-guardian-rule-sub {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.6;
    }
    .dz-guardian-apps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    .dz-guardian-app {
      padding: 18px 16px;
      border: 1px solid var(--cs);
      border-radius: var(--radius);
      background: var(--card);
      transition: border-color var(--fast) ease, transform var(--fast) var(--ease);
    }
    .dz-guardian-app:hover {
      border-color: color-mix(in oklab, var(--fg) 24%, var(--border));
      transform: translateY(-2px);
    }
    .dz-guardian-app-name {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: -0.01em;
      margin-bottom: 8px;
    }
    .dz-guardian-app-desc {
      font-size: 12.5px;
      color: var(--muted);
      line-height: 1.65;
    }
    .dz-guardian-principles {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    .dz-gp {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .dz-gp-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .dz-gp-text {
      font-size: 13px;
      color: var(--fg);
      line-height: 1.6;
      opacity: .8;
    }
    .dz-guardian-cta {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }
    .dz-guardian-tier {
      font-size: 13px;
      color: var(--muted);
    }

    /* ── AGENTIC TIMELINE ──────────────────────────────────────── */
    .dz-agentic-timeline {
      display: flex;
      flex-direction: column;
      gap: 0;
      border: 1px solid var(--cs);
      border-radius: var(--radius2);
      overflow: hidden;
      background: var(--card);
      margin-bottom: 20px;
    }
    .dz-at-row {
      display: grid;
      grid-template-columns: 160px 1fr;
      gap: 0;
      padding: 24px 28px;
      border-bottom: 1px solid var(--cs);
    }
    .dz-at-row:last-child { border-bottom: none; }
    .dz-at-row--accent {
      background: color-mix(in oklab, var(--fg) 3%, transparent);
    }
    .dz-at-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--muted);
      padding-top: 3px;
      padding-right: 20px;
    }
    .dz-at-title {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -0.015em;
      margin-bottom: 8px;
    }
    .dz-at-text {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.7;
    }
    .dz-at-text em {
      font-style: normal;
      color: var(--fg);
      font-weight: 500;
    }
    .dz-agentic-note {
      font-size: 12.5px;
      color: var(--muted);
      line-height: 1.7;
      padding: 16px 20px;
      border: 1px solid var(--cs);
      border-radius: 12px;
      background: var(--card);
      max-width: 680px;
    }

    @media (max-width: 860px) {
      .dz-guardian-apps,
      .dz-guardian-principles { grid-template-columns: repeat(2, 1fr); }
      .dz-at-row { grid-template-columns: 1fr; gap: 8px; }
    }
    @media (max-width: 600px) {
      .dz-guardian-apps,
      .dz-guardian-principles { grid-template-columns: 1fr; }
    }

    /* ── Flow row accordion ────────────────────────────────────── */
    .dz-sf-row--expand {
      cursor: pointer;
      flex-direction: column;
      gap: 0;
      padding: 0;
      border-radius: 10px;
      border: 1px solid color-mix(in oklab, var(--fg) 8%, var(--border));
      transition: border-color var(--fast) ease;
    }
    .dz-sf-row--expand:hover {
      border-color: color-mix(in oklab, var(--fg) 20%, var(--border));
    }
    .dz-sf-row-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
    }
    .dz-sf-chevron {
      flex-shrink: 0;
      color: var(--muted);
      transition: transform 220ms var(--ease);
      margin-left: auto;
    }
    .dz-sf-row--expand.open .dz-sf-chevron {
      transform: rotate(180deg);
    }
    .dz-sf-detail {
      display: none;
      padding: 0 16px 14px 40px;
      font-size: 12.5px;
      color: var(--muted);
      line-height: 1.7;
      border-top: 1px solid color-mix(in oklab, var(--fg) 6%, transparent);
      margin-top: 0;
      padding-top: 12px;
    }
    .dz-sf-row--expand.open .dz-sf-detail {
      display: block;
    }
    .dz-sf-detail { display: none; }
    .dz-sf-row--expand.open {
      border-color: color-mix(in oklab, var(--fg) 22%, var(--border));
    }

    /* ── Connected + AI section ──────────────────────────────────
       Two-column grid where the left column stretches to match the
       video's height. The "More" button is pushed to the bottom of
       the left column via margin-top:auto on the spacer, so it
       aligns with the bottom of the video instead of leaving a
       hollow gap mid-section. */
    .dz-cai-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: stretch;       /* both columns share the same height */
      margin-bottom: 32px;
    }
    .dz-cai-bullets {
      display: flex;
      flex-direction: column;     /* stack content vertically */
      min-height: 0;              /* allow grid to size correctly */
    }
    .dz-cai-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 16px;
    }
    .dz-cai-list {
      list-style: none;
      padding: 0;
      margin: 0 0 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .dz-cai-list li {
      display: flex;
      gap: 10px;
      font-size: 14px;
      line-height: 1.6;
      color: var(--fg);
    }
    .dz-cai-list li::before {
      content: "→";
      color: var(--muted);
      flex-shrink: 0;
      margin-top: 1px;
    }
    .dz-cai-close {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.75;
      margin: 0;
      padding: 16px;
      border: 1px solid var(--cs);
      border-radius: 12px;
      background: var(--card);
    }
    .dz-cai-principles {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 24px;
    }
    .dz-cai-cta {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    /* ── YouTube video wrapper ─────────────────────────────── */
    .dz-video-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: var(--radius2);
      overflow: hidden;
      background: var(--card);
      border: 1px solid var(--cs);
    }
    .dz-video-caption {
      font-size: 12px;
      color: var(--muted);
      margin-top: 10px;
      text-align: center;
      line-height: 1.5;
    }

    /* ── Cinema (focus) mode toggle button ──────────────────────────────
       Sits below the video. Subtle pill — does not compete with the
       primary CTA. Single button swaps icon + label based on state. */
    .dz-video-cinemaBtn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 12px auto 0;
      padding: 7px 14px;
      border-radius: 999px;
      border: 1px solid var(--cs);
      background: color-mix(in oklab, var(--fg) 3%, transparent);
      color: var(--muted);
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.01em;
      cursor: pointer;
      transition: color var(--fast) ease, border-color var(--fast) ease, background var(--fast) ease;
    }
    .dz-video-cinemaBtn:hover {
      color: var(--fg);
      border-color: var(--cs2);
      background: color-mix(in oklab, var(--fg) 6%, transparent);
    }
    .dz-video-cinemaBtn-icon { flex-shrink: 0; }
    /* Single button — show expand label at rest, collapse label in cinema */
    .dz-video-cinemaBtn-collapse,
    .dz-video-cinemaBtn-lbl-collapse { display: none; }
    body.dz-cinema .dz-video-cinemaBtn-expand,
    body.dz-cinema .dz-video-cinemaBtn-lbl-expand { display: none; }
    body.dz-cinema .dz-video-cinemaBtn-collapse,
    body.dz-cinema .dz-video-cinemaBtn-lbl-collapse { display: inline; }
    body.dz-cinema .dz-video-cinemaBtn {
      color: var(--fg);
      border-color: color-mix(in oklab, var(--fg) 22%, var(--border));
    }

    /* ── body.dz-cinema — focus mode on the Guardian demo ─────────────
       Collapses the surrounding text so the video can breathe. The
       transitions ease the collapse so it doesn't snap. Scoped tightly
       to the connected-ai section — nothing else on the page is touched. */
    #connected-ai .dz-sectionHead,
    #connected-ai .dz-cai-bullets,
    #connected-ai .dz-cai-principles,
    #connected-ai .dz-cai-cta {
      transition: opacity 280ms var(--ease), max-height 320ms var(--ease), margin 280ms var(--ease);
      overflow: hidden;
    }
    body.dz-cinema #connected-ai .dz-sectionHead,
    body.dz-cinema #connected-ai .dz-cai-bullets,
    body.dz-cinema #connected-ai .dz-cai-principles,
    body.dz-cinema #connected-ai .dz-cai-cta {
      opacity: 0;
      max-height: 0;
      margin-top: 0;
      margin-bottom: 0;
      pointer-events: none;
    }
    /* Grid flattens to a single column so the video occupies the full shell */
    body.dz-cinema #connected-ai .dz-cai-grid {
      grid-template-columns: 1fr;
      gap: 0;
      margin-bottom: 0;
    }
    /* Cinema video BREAKS OUT of the shell to span the full viewport width
       with a small breathing margin. Uses the standard "full-bleed inside
       constrained parent" technique: position relative, left:50%, then pull
       back with negative viewport-half margins. The result is the video
       extending edge-to-edge of the viewport — wider than nav content,
       genuine focus mode. */
    body.dz-cinema #connected-ai .dz-cai-video {
      /* Bulletproof viewport-centered full-bleed.
         The previous `left:50% + margin-left:-50vw` recipe relied on the
         parent's containing block being symmetric around the viewport
         centre — which it usually is, but a grid-cell / flex-item parent
         can offset that math and the video drifts left.
         Transform-based centering avoids the assumption entirely: width
         100vw, position relative, left 50% of parent, then translateX(-50%)
         pulls back 50% of OWN width (= 50vw). End result is always exactly
         viewport-centered, no matter what the parent looks like. */
      width: 100vw;
      max-width: 100vw;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      margin-left: 0;
      margin-right: 0;
      padding: 0 16px;
      box-sizing: border-box;
      transition: width 320ms var(--ease), transform 320ms var(--ease), padding 320ms var(--ease);
    }
    /* Bigger video aspect in cinema — 16:9 stays, but fills the shell */
    body.dz-cinema #connected-ai .dz-video-thumb,
    body.dz-cinema #connected-ai .dz-video-iframe-wrap {
      max-height: 88vh;
    }
    body.dz-cinema #connected-ai {
      padding-top: 40px;
      padding-bottom: 40px;
    }

    /* ── Dual-mode video iframes ──────────────────────────────────────
       Two iframes layered in the wrap; the theme picks which is visible.
       Cross-fade is opacity-only so YouTube's player chrome doesn't
       reflow. The hidden iframe keeps z-index 1 so its scrollbars and
       focus rings can't bleed through. */
    .dz-video-iframe-wrap iframe {
      transition: opacity 320ms var(--ease);
    }
    .dz-video-iframe-dark  { opacity: 1; z-index: 2; }
    .dz-video-iframe-light { opacity: 0; z-index: 1; pointer-events: none; }
    body.light .dz-video-iframe-dark  { opacity: 0; z-index: 1; pointer-events: none; }
    body.light .dz-video-iframe-light { opacity: 1; z-index: 2; pointer-events: auto; }

    /* ── Video placeholder ─────────────────────────────────────── */
    .dz-video-placeholder {
      border-radius: var(--radius2);
      border: 1px solid var(--cs);
      background: var(--card);
      aspect-ratio: 16/9;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color var(--fast) ease;
      overflow: hidden;
    }
    .dz-video-placeholder:hover {
      border-color: var(--cs2);
    }
    .dz-video-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      text-align: center;
      padding: 20px;
    }
    .dz-video-play {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: color-mix(in oklab, var(--fg) 8%, transparent);
      border: 1px solid var(--cs2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--fg);
      transition: background var(--fast) ease;
    }
    .dz-video-placeholder:hover .dz-video-play {
      background: color-mix(in oklab, var(--fg) 14%, transparent);
    }
    .dz-video-label {
      font-size: 15px;
      font-weight: 800;
      color: var(--fg);
    }
    .dz-video-sub {
      font-size: 12px;
      color: var(--muted);
      max-width: 220px;
    }

    /* ── Try free row ──────────────────────────────────────────── */
    .dz-try-free-headline {
      font-size: clamp(22px, 4vw, 32px);
      font-weight: 980;
      letter-spacing: -0.03em;
      margin: 0 0 8px;
    }
    .dz-try-free-sub {
      font-size: 14px;
      color: var(--muted);
      margin: 0 0 20px;
    }
    .dz-try-free-btns {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .dz-try-btn {
      padding: 10px 20px;
      border-radius: 10px;
      border: 1px solid var(--cs);
      background: var(--card);
      color: var(--fg);
      font-size: 13.5px;
      font-weight: 700;
      text-decoration: none;
      transition: border-color var(--fast) ease, transform var(--fast) var(--ease);
    }
    .dz-try-btn:hover {
      border-color: var(--cs2);
      transform: translateY(-2px);
    }

    /* ── Why modal founder note ────────────────────────────────── */
    .dz-why-founder {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid var(--cs);
    }
    .dz-why-founder-label {
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--muted);
      margin-bottom: 12px;
    }
    .dz-why-founder-sig {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 16px;
    }
    .dz-why-founder-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--rainbow);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      color: var(--bg);
      flex-shrink: 0;
    }
    .dz-why-founder-name {
      font-size: 13px;
      font-weight: 700;
    }
    .dz-why-founder-role {
      font-size: 11px;
      color: var(--muted);
    }

    @media (max-width: 860px) {
      .dz-cai-grid { grid-template-columns: 1fr; }
      .dz-cai-principles { grid-template-columns: repeat(2,1fr); }
    }

    /* ── Clean full-width FAQ ────────────────────────────────────── */
    .dz-faq-section {
      max-width: 680px;
      margin: 0 auto;
      width: 100%;
    }
    .dz-faq-list {
      display: flex;
      flex-direction: column;
    }
    .dz-faq-item {
      border-bottom: 1px solid var(--cs);
    }
    .dz-faq-item:first-child {
      border-top: 1px solid var(--cs);
    }
    .dz-faq-q {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 0;
      background: none;
      border: none;
      color: var(--fg);
      font-size: 15px;
      font-weight: 700;
      font-family: inherit;
      text-align: left;
      cursor: pointer;
      letter-spacing: -0.01em;
      transition: color var(--fast) ease;
    }
    .dz-faq-q:hover { color: var(--fg); opacity: .8; }
    .dz-faq-icon {
      flex-shrink: 0;
      color: var(--muted);
      transition: transform 220ms var(--ease);
    }
    .dz-faq-q[aria-expanded="true"] .dz-faq-icon {
      transform: rotate(180deg);
    }
    .dz-faq-a {
      display: none;
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.75;
      padding: 0 0 20px;
      max-width: 600px;
    }
    .dz-faq-item.open .dz-faq-a {
      display: block;
      animation: dzFadeIn 180ms ease both;
    }

    /* ── Early access price banner ─────────────────────────── */
    .dz-early-banner {
      display: flex;
      align-items: center;
      gap: 20px;
      background: color-mix(in oklab, var(--fg) 4%, transparent);
      border: 1px solid var(--cs);
      border-radius: var(--radius);
      padding: 20px 28px;
      margin-bottom: 16px;
    }
    .dz-early-price-row {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 4px;
    }
    .dz-early-was {
      font-size: 15px;
      color: var(--muted);
      text-decoration: line-through;
    }
    .dz-early-now {
      font-size: 38px;
      font-weight: 980;
      letter-spacing: -0.04em;
      color: var(--fg);
      line-height: 1;
    }
    .dz-early-note {
      font-size: 12px;
      color: var(--muted);
    }
    .dz-early-tag {
      margin-left: auto;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      background: color-mix(in oklab, var(--fg) 8%, transparent);
      border: 1px solid var(--cs);
      color: var(--muted);
      padding: 5px 12px;
      border-radius: 8px;
      white-space: nowrap;
    }

    /* ── Tier accordion ────────────────────────────────────── */
    .dz-tier-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 16px;
    }
    .dz-tier-row {
      border: 1px solid var(--cs);
      border-radius: var(--radius);
      overflow: hidden;
      cursor: pointer;
      transition: border-color var(--fast) ease;
    }
    .dz-tier-row:hover { border-color: var(--cs2); }
    .dz-tier-row.open  { border-color: color-mix(in oklab, var(--fg) 22%, var(--border)); }
    .dz-tier-head {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
    }
    .dz-tier-icon {
      width: 38px; height: 38px;
      border-radius: 10px;
      background: color-mix(in oklab, var(--fg) 6%, transparent);
      border: 1px solid var(--cs);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      color: var(--fg);
    }
    .dz-tier-name {
      font-size: 14px;
      font-weight: 800;
      letter-spacing: -0.01em;
    }
    .dz-tier-desc {
      font-size: 12px;
      color: var(--muted);
      margin-top: 2px;
    }
    .dz-tier-right {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
    }
    .dz-tier-was {
      font-size: 12px;
      color: var(--muted);
      text-decoration: line-through;
    }
    .dz-tier-badge {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 6px;
      background: color-mix(in oklab, var(--fg) 6%, transparent);
      border: 1px solid var(--cs);
      color: var(--muted);
      white-space: nowrap;
    }
    .dz-tier-chev {
      color: var(--muted);
      transition: transform 220ms var(--ease);
      flex-shrink: 0;
    }
    .dz-tier-row.open .dz-tier-chev { transform: rotate(180deg); }
    .dz-tier-body {
      display: none;
      border-top: 1px solid var(--cs);
      padding: 14px 16px 16px;
    }
    .dz-tier-row.open .dz-tier-body {
      display: block;
      animation: dzFadeIn 180ms var(--ease) both;
    }
    .dz-feats-clean {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .dz-feats-clean li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.55;
    }
    .dz-feats-clean li::before {
      content: "✓";
      color: var(--fg);
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px;
    }

    /* ── Space card ────────────────────────────────────────── */
    .dz-space-card {
      border: 1px solid var(--cs);
      border-radius: var(--radius);
      padding: 20px 22px;
      margin-bottom: 16px;
    }
    .dz-space-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--cs);
    }
    .dz-space-title {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -0.01em;
    }
    .dz-space-sub {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.6;
      margin-top: 4px;
    }
    .dz-space-price { text-align: right; flex-shrink: 0; }
    .dz-space-amount {
      font-size: 26px;
      font-weight: 980;
      letter-spacing: -0.03em;
    }
    .dz-space-note {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
    }
    .dz-feats-clean--space { margin-bottom: 14px; }
    .dz-space-req {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.65;
      padding-top: 14px;
      border-top: 1px solid var(--cs);
    }

    /* ── Trust card expand button ──────────────────────────── */
    .dz-trustCardDetail {
      display: none;
      font-size: 12.5px;
      color: var(--muted);
      line-height: 1.7;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--cs);
    }
    .dz-trustCardDetail:not([hidden]) {
      display: block;
    }
    .dz-trustCardMore {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 10px;
      font-size: 12px;
      color: var(--muted);
      font-weight: 600;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      font-family: inherit;
      transition: color var(--fast) ease;
    }
    .dz-trustCardMore:hover { color: var(--fg); }
    .dz-trustCardMore[aria-expanded="true"] { color: var(--fg); }

    /* ── CAI body paragraphs ───────────────────────────────── */
    .dz-cai-body {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.75;
      margin: 14px 0 0;
    }
    .dz-cai-statement {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--fg);
      margin: 18px 0 0;
      line-height: 1.5;
    }

    @media (max-width: 640px) {
      .dz-early-banner { flex-direction: column; align-items: flex-start; }
      .dz-early-tag { margin-left: 0; }
      .dz-space-head { flex-direction: column; }
    }

    /* ── Connected "More" button ──────────────────────────────────
       margin-top: auto pushes the button to the bottom of the flex
       column when collapsed, eliminating the hollow gap and
       aligning the button with the bottom of the video. When the
       expand panel opens, the panel grows above the button (the
       button stays anchored to the bottom). */
    .dz-cai-more {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: auto;            /* anchor to bottom of left column */
      padding-top: 16px;           /* breathing room above the button */
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
      background: none;
      border: none;
      cursor: pointer;
      font-family: inherit;
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 0;
      align-self: flex-start;      /* keep button left-aligned, not stretched */
      transition: color var(--fast) ease;
    }
    .dz-cai-more:hover { color: var(--fg); }
    .dz-cai-more svg { transition: transform 240ms var(--ease); }

    /* ── Expand panel — smooth reveal ──────────────────────────────
       max-height transition with overflow:hidden gives a buttery
       reveal without layout-shift jitter. Opacity fades in slightly
       behind the height so the content doesn't pop before it has
       room. 1200px max accommodates the four paragraphs at any
       comfortable line-height. */
    .dz-cai-expand {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      margin-top: 0;
      transition:
        max-height 420ms cubic-bezier(.4, 0, .2, 1),
        opacity   280ms ease,
        margin-top 320ms ease;
    }
    .dz-cai-expand.open {
      max-height: 1200px;          /* generous ceiling — fits 4+ paragraphs */
      opacity: 1;
      margin-top: 16px;
    }

    @media (prefers-reduced-motion: reduce) {
      .dz-cai-expand,
      .dz-cai-more svg { transition: none; }
    }

    /* ── Video thumbnail ───────────────────────────────────── */
    .dz-video-thumb {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: var(--radius2);
      overflow: hidden;
      cursor: pointer;
      border: 1px solid var(--cs);
    }
    .dz-video-thumb:hover .dz-video-overlay { background: rgba(0,0,0,0.4); }
    .dz-video-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.32);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: background 200ms ease;
    }
    .dz-video-play-btn {
      width: 56px; height: 56px;
      border-radius: 50%;
      background: rgba(255,255,255,0.15);
      border: 1.5px solid rgba(255,255,255,0.4);
      backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center;
      color: #fff;
      transition: background 200ms ease, transform 200ms ease;
    }
    .dz-video-thumb:hover .dz-video-play-btn {
      background: rgba(255,255,255,0.22);
      transform: scale(1.06);
    }
    .dz-video-play-lbl {
      font-size: 13px;
      font-weight: 600;
      color: #fff;
      letter-spacing: 0.01em;
    }

/* ═══════════════════════════════════════════════════════════════════
   POWERS SECTION — JS-pinned scroll container
   JS manages position:fixed when scrolling through.
   No CSS sticky — avoids overflow-x breakage.
═══════════════════════════════════════════════════════════════════ */
.dz-powersScroll {
  /* background: transparent — LP canvas shows through */
  position: relative;
  height: 650vh;
  /* Talk power gets 45% = ~293vh for conversations + comparison */
}
.dz-powers-pin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 5;
}
.dz-pow-ifr {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.dz-pow-ifr.active {
  opacity: 1;
  pointer-events: auto;
}
/* Progress dots */
.dz-powers-dots {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dz-powers-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--muted, rgba(138,138,154,0.3));
  opacity: 0.4;
  transition: opacity 0.3s, transform 0.3s, background 0.3s;
}
.dz-powers-dot:hover { opacity: 0.7; transform: scale(1.4); }
.dz-powers-dot.active { opacity: 1; background: var(--fg); transform: scale(1.2); }
@media (max-width: 600px) {
  .dz-powers-dots { right: 10px; gap: 10px; }
  .dz-powers-dot { width: 5px; height: 5px; }
}

/* ═══════════════════════════════════════════════════════════════════
   UNIVERSE — scroll-driven constellation finale
   Replaces the old Final CTA. 500vh scroll container with sticky
   canvas + 5 text phases. Canvas uses LP tokens + accent.
═══════════════════════════════════════════════════════════════════ */
.dz-univ{position:relative;height:300vh;}
.dz-us  {position:absolute;top:0;left:0;width:100%;height:100vh;overflow:hidden;z-index:5;}
#uCv    {position:absolute;inset:0;width:100%;height:100%;display:block;}
.dz-us::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(6,6,9,0.75) 0%,rgba(6,6,9,0.5) 15%,
    rgba(6,6,9,0.2) 35%,transparent 55%);}
body.light .dz-us::before{
  background:linear-gradient(to top,
    rgba(250,250,250,0.75) 0%,rgba(250,250,250,0.5) 15%,
    rgba(250,250,250,0.2) 35%,transparent 55%);}
.u-phases{position:absolute;inset:0;
  z-index:2;pointer-events:none;
  display:grid;place-items:center;}
.u-ph{grid-area:1/1;
  padding:0 clamp(16px,5vw,80px);opacity:0;text-align:center;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transform:translateY(18px);}
.u-ph.show{opacity:1;transform:none}
.u-ph.out {opacity:0;transform:translateY(-18px);transition-duration:.3s}
.u-ph>*{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);}
.u-ph.show>*:nth-child(1){opacity:1;transform:none;transition-delay:.04s}
.u-ph.show>*:nth-child(2){opacity:1;transform:none;transition-delay:.15s}
.u-ph.show>*:nth-child(3){opacity:1;transform:none;transition-delay:.26s}
.u-ph.show>*:nth-child(4){opacity:1;transform:none;transition-delay:.36s}
.u-ph.show>*:nth-child(5){opacity:1;transform:none;transition-delay:.44s}
.u-ph.out>*{opacity:0;transform:translateY(-8px);transition-delay:0s!important;transition-duration:.2s}
#ph0>*{opacity:0;transform:translateY(14px);transition:none;}
.u-line{display:block;line-height:1.02;letter-spacing:-.055em;}
.f-hv{font-size:clamp(44px,7.2vw,96px);font-weight:980;}
.f-th{font-size:clamp(42px,6.8vw,92px);font-weight:200;letter-spacing:-.03em;line-height:1.04;}
.f-ky{font-size:clamp(10px,1.05vw,14px);font-weight:200;letter-spacing:.14em;
  text-transform:lowercase;color:var(--dim);display:block;
  margin-bottom:clamp(6px,1vh,16px);}
.c-fg{color:var(--fg);}
.c-mu{color:var(--muted);}
.c-dm{color:var(--dim);}
/* Gradient text — uses LP --acc-prismatic */
.c-gr{
  background:var(--acc-prismatic);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body.light .c-gr{
  background:var(--acc-prismatic);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body.has-accent .c-gr{
  background:linear-gradient(100deg,var(--uA-tint) 0%,var(--uA) 50%,var(--uA-shade) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* CTAs */
.u-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
  margin-top:clamp(18px,2.5vh,32px);pointer-events:auto;}
/* Orbit wrapper */
.bow{position:relative;display:inline-flex;}
.boc{position:absolute;inset:-20px;
  width:calc(100% + 40px);height:calc(100% + 40px);
  pointer-events:none;border-radius:20px;
  opacity:0;transition:opacity .35s ease;}
.bow:hover .boc{opacity:1;}
/* Scroll hint */
.u-hint{position:absolute;top:20px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  color:var(--dim);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;animation:ufade 1s ease 2.4s forwards;z-index:3;}
@keyframes ufade{to{opacity:1}}
.u-hl{width:1px;height:28px;background:linear-gradient(to bottom,transparent,var(--dim));
  animation:uhp 2.4s ease-in-out 2.4s infinite;}
@keyframes uhp{0%,100%{opacity:.32}50%{opacity:.88}}
@media(max-width:600px){
  .f-hv{font-size:clamp(38px,10.5vw,64px);}
  .f-th{font-size:clamp(36px,10vw,62px);}
}

/* Last universe phase: text at bottom so vault mascot has room above */
#ph4 {
  align-self: end;
  padding-bottom: clamp(40px, 8vh, 80px);
}

/* Mobile optimization for universe section */
@media (max-width: 600px) {
  .dz-univ { height: 280vh; }
  #ph4 { padding-bottom: clamp(24px, 5vh, 48px); }
  .u-cta { gap: 10px; flex-direction: column; align-items: center; }
  .u-cta .dz-btn { padding: 12px 24px; font-size: 14px; }
  .bow { width: 100%; display: flex; justify-content: center; }
}

/* Mobile powers section */
@media (max-width: 600px) {
  .dz-powersScroll { height: 600vh; }
  .dz-powers-dots { right: 8px; gap: 8px; }
  .dz-powers-dot { width: 4px; height: 4px; }
}

/* Hero-size words for universe intro */
.f-hero{font-size:clamp(64px,12vw,150px);font-weight:980;letter-spacing:-.06em;line-height:0.95;}
@media(max-width:600px){.f-hero{font-size:clamp(48px,15vw,100px);}}

/* ═══ COMPREHENSIVE MOBILE POLISH ═══ */

/* Cosmic section mobile */
@media (max-width: 880px) {
  .dz-cosmic .dz-sectionTitle { font-size: clamp(32px, 8vw, 48px); }
  .dz-cosmic .dz-sectionSub { font-size: 16px; }
  #cosViz { margin-top: 32px !important; margin-bottom: 48px !important; }
}
@media (max-width: 540px) {
  #cosViz > div[style*="position:absolute"] { display: none; }
  .dz-cosmic .cos-close-q,
  .dz-cosmic [style*="font-size:28px"] { font-size: 22px !important; }
  .dz-cosmic .cos-close-a,
  .dz-cosmic [style*="font-size:34px"] { font-size: 26px !important; }
}

/* Universe word reveal mobile */
@media (max-width: 480px) {
  .f-hero { font-size: clamp(44px, 14vw, 80px) !important; }
  .f-th { font-size: clamp(32px, 9vw, 56px) !important; }
  .u-cta .dz-btn { padding: 14px 28px; font-size: 14px; }
}

/* Powers section mobile - taller for more scroll time */
@media (max-width: 600px) {
  .dz-powersScroll { height: 620vh !important; }
  .dz-powers-dots { right: 6px; gap: 6px; }
  .dz-powers-dot { width: 5px; height: 5px; }
}

/* Pricing section mobile */
@media (max-width: 540px) {
  .dz-faq-q { font-size: 14px; }
  .dz-faq-a { font-size: 13px; }
}

/* ═══ Talk Power Intro Overlay ═══ */
.dz-talk-intro {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(.22,1,.36,1);
}
body.light .dz-talk-intro {
  background: rgba(255,255,255,0.96);
}
.dz-talk-intro.on {
  opacity: 1;
  pointer-events: auto;
}
.dz-talk-intro.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(.22,1,.36,1);
}
.dz-talk-intro-inner {
  text-align: center;
  transform: translateY(10px);
  opacity: 0;
  transition: all 0.5s cubic-bezier(.22,1,.36,1) 0.2s;
}
.dz-talk-intro.on .dz-talk-intro-inner {
  transform: none;
  opacity: 1;
}
.dz-talk-intro-title {
  font-size: clamp(36px, 7vw, 72px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fg);
  margin: 0 0 32px;
}
.dz-talk-intro-play {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--border-2, rgba(255,255,255,0.14));
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  transition: all 0.3s cubic-bezier(.22,1,.36,1);
}
.dz-talk-intro-play:hover {
  border-color: var(--fg);
  transform: scale(1.08);
}
body.has-accent .dz-talk-intro-play:hover {
  border-color: var(--uA);
  color: var(--uA);
}
.dz-talk-intro-play svg {
  margin-left: 3px;
}
.dz-talk-intro-hint {
  font-size: 12px;
  color: var(--dim, rgba(255,255,255,0.42));
  letter-spacing: 0.08em;
  margin: 0;
}

/* ═══ MOBILE POLISH: Powers + Workflows ═══ */
@media (max-width: 600px) {
  /* Powers iframe container */
  .dz-powers-pin { padding: 0 8px; }
  .dz-pow-ifr { border-radius: 16px; }
  
  /* Workflow tabs: scrollable on mobile */
  .dz-wf-tabs { 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 4px;
  }
  .dz-wf-tabs::-webkit-scrollbar { display: none; }
  .dz-wf-tab { white-space: nowrap; font-size: 11px; padding: 8px 14px; }
  
  /* Workflow description */
  .dz-conn-bar-text { font-size: 12px; }
  
  /* Cosmic lifecycle cards */
  .dz-cos-life > div { padding: 20px 16px 24px !important; }
  .dz-cos-life > div > div:last-child { font-size: 12px !important; }
  
  /* Member banner mobile */
  .dz-mb-title { font-size: clamp(28px, 8vw, 48px) !important; }
}

@media (max-width: 380px) {
  .dz-powersScroll { height: 650vh !important; }
  .dz-pow-ifr { border-radius: 12px; }
  .dz-wf-tab { font-size: 10px; padding: 6px 10px; }
}