/* /products/drive */
.product-hero { padding: 88px 0 56px; }
  .product-hero h1 { margin-top: 24px; }
  .product-hero h1 .accent { color: var(--primary-strong);  }
  [data-theme="dark"] .product-hero h1 .accent { color: var(--primary); }
  .product-hero .lede { margin-top: 24px; max-width: 56ch; }
  .product-hero .cta-row { margin-top: 32px; }

  /* Lifted out of .container in the markup so it can run wider than the text
     column without negative margins or 100vw (which overshoots by the
     scrollbar width). Capped at 1600 rather than bled to the viewport edge:
     the source render is 1448px, and a UI screenshot upscaled much past that
     goes visibly soft on the small text inside it. */
  .drive-frame {
    width: calc(100% - var(--space-16));
    max-width: 1600px;
    margin: var(--space-16) auto 0;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    line-height: 0;
  }
  @media (max-width: 600px) {
    /* Match the narrower gutter .container switches to at this width. */
    .drive-frame { width: calc(100% - var(--space-10)); }
  }
  .drive-frame img { width: 100%; height: auto; display: block; }
  .preview-cap { margin-top: 14px; font-size: var(--text-sm); color: var(--muted); text-align: center; }

  /* ===== Storage breakdown (replaces generic icon-grid) ===== */
  .breakdown-head { margin-top: 128px; max-width: 60ch; }
  .breakdown-head h2 { margin-top: 12px; }
  .breakdown-head p { color: var(--muted); font-size: var(--text-lg); margin-top: 14px; }
  .breakdown { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .bd-item { padding: 26px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
  .bd-item .bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; margin-bottom: 16px; }
  .bd-item .bar .fill { height: 100%; background: var(--primary-strong); border-radius: inherit; }
  [data-theme="dark"] .bd-item .bar .fill { background: var(--primary); }
  .bd-item .amt { font-size: var(--text-2xl); letter-spacing: -0.02em; font-family: var(--font-sans); }
  .bd-item .lbl { margin-top: 4px; font-size: var(--text-sm); color: var(--muted); }
  @media (max-width: 860px) { .breakdown { grid-template-columns: repeat(2, 1fr); } }

  /* ===== Share-link feature row ===== */
  .drive-share { margin-top: 128px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .share-copy h2 { margin-top: 14px; max-width: 16ch; }
  .share-copy .lede { margin-top: 18px; font-size: 1.0625rem; max-width: 44ch; }
  .share-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 28px; }
  .share-card .file-row { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
  .share-card .file-row .ico { width: 40px; height: 40px; border-radius: 10px; background: var(--primary-soft); color: var(--on-primary-soft); display: grid; place-items: center; flex-shrink: 0; }
  .share-card .file-row .mock-title { font-size: var(--text-base); margin: 0; }
  .share-card .file-row span { display: block; font-size: var(--text-sm); color: var(--muted); margin-top: 2px; }
  .share-card .opt-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-soft); }
  .share-card .opt-row:first-of-type { border-top: none; }
  .share-card .opt-row .val { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
  .share-card .link-row { margin-top: 18px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
  @media (max-width: 860px) { .drive-share { grid-template-columns: 1fr; gap: 36px; } }

  /* ===== CTA: two-column with mini confirmation card ===== */
  .drive-cta { margin-top: 128px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; padding: 64px; background: var(--primary-soft); border-radius: var(--radius-xl); }
  [data-theme="dark"] .drive-cta { background: var(--surface-2); border: 1px solid var(--border); }
  .drive-cta h2 { color: var(--on-primary-soft); }
  [data-theme="dark"] .drive-cta h2 { color: var(--text); }
  .drive-cta .lede { color: var(--on-primary-soft); opacity: 0.85; margin-top: 14px; }
  [data-theme="dark"] .drive-cta .lede { color: var(--muted); opacity: 1; }
  .drive-cta .cta-row { margin-top: 28px; }
  .confirm-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 22px 24px; display: flex; align-items: flex-start; gap: 14px; }
  .confirm-card .tick { width: 30px; height: 30px; border-radius: 999px; background: var(--primary-strong); color: var(--primary-fg); display: grid; place-items: center; flex-shrink: 0; }
  [data-theme="dark"] .confirm-card .tick { background: var(--primary); color: #10160f; }
  .confirm-card .mock-title { font-size: var(--text-base); margin: 0 0 4px; }
  .confirm-card p { font-size: var(--text-sm); color: var(--muted); margin: 0; font-family: var(--font-mono); }
  @media (max-width: 860px) { .drive-cta { grid-template-columns: 1fr; padding: 40px 32px; } }