/* Long product page (owner request 2026-10-27): a wide app screen for each feature,
   magnified crops of that screen, and a grid of screens with short text. Colors come
   only from the public tokens in site-neutral.css; type and spacing follow dds-product.css.
   Crop geometry is generated into product-long-slots.css from scripts/dds-capture-slots.json.
   Scroll motion is CSS only. It runs where animation-timeline is supported and the visitor
   has not asked for reduced motion; everywhere else every picture stays at its final size. */
.product-long {
  --product-long-hero-from: .9;
  --product-long-shot-from: .88;
  --product-long-shot-to: .94;
  --product-long-zoom-depth: 1;
}
.product-long-hero { padding-bottom: 32px; }
.product-long-tagline { margin: 24px auto 0; max-width: 850px; color: var(--public-ink); font-size: clamp(22px, 2.5vw, 38px); font-weight: 550; line-height: 1.2; letter-spacing: -.03em; text-wrap: balance; }
.product-long-shot { position: relative; margin: 64px 0 0; overflow: hidden; border: 1px solid var(--public-line); border-radius: 16px; background: var(--public-surface-raised); box-shadow: 0 24px 72px color-mix(in srgb, var(--public-ink) 12%, transparent); }
.product-long-shot img { display: block; width: 100%; height: auto; }
.product-long-hero-shot { transform-origin: 50% 0; }
.product-long-shot > .product-long-frame { border: 0; border-radius: 0; }
.product-long-shot:has(> .product-long-pending) { border-style: dashed; box-shadow: none; }
.product-long-statement { padding-block: 112px 32px; text-align: center; }
.product-long-statement p { margin: 0 auto; max-width: 1040px; color: var(--public-ink); font-size: clamp(28px, 3.4vw, 48px); font-weight: 550; line-height: 1.18; letter-spacing: -.04em; text-wrap: balance; }
.product-long-statement p + p { margin-top: 32px; max-width: 660px; color: var(--public-muted); font-size: clamp(17px, 1.65vw, 22px); font-weight: 400; line-height: 1.55; letter-spacing: 0; }
.product-long-section { padding-block: 112px 32px; scroll-margin-top: 96px; }
.product-long-section .dds-section-intro { margin-bottom: 0; }
.product-long .dds-section-intro h2 { text-wrap: balance; }
.product-long-details { display: flex; gap: 24px; align-items: flex-start; margin-top: 24px; }
.product-long-detail { flex: var(--slot-flex, 1) 1 0; min-width: 0; margin: 0; }
.product-long-details--single .product-long-detail { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.product-long-details--flip .product-long-frame { order: 2; }
.product-long-frame { position: relative; overflow: hidden; aspect-ratio: var(--slot-ratio); border: 1px solid var(--public-line); border-radius: 12px; }
.product-long-zoom { background: var(--public-surface-raised); }
.product-long-lens { position: absolute; inset: 0; }
.product-long-lens img { position: absolute; display: block; max-width: none; width: var(--slot-width); height: auto; left: var(--slot-left); top: var(--slot-top); }
.product-long-pending { display: grid; place-items: center; border-style: dashed; background: color-mix(in srgb, var(--public-ink) 4%, transparent); }
.product-long-pending span { color: var(--public-muted); font-size: 13px; letter-spacing: .02em; }
.product-long-detail figcaption, .product-long-card figcaption { margin-top: 18px; }
.product-long-details--single figcaption { margin-top: 0; }
.product-long-detail h3, .product-long-card h3 { margin: 0 0 8px; color: var(--public-ink); font-size: 20px; font-weight: 550; line-height: 1.3; letter-spacing: -.02em; }
.product-long-detail p, .product-long-card p { margin: 0; color: var(--public-muted); font-size: 16px; line-height: 1.6; }
.product-long-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; max-width: 1040px; margin: 48px auto 0; padding: 0; list-style: none; }
.product-long-facts li { padding: 16px 0; border-top: 1px solid var(--public-line); color: var(--public-muted); font-size: 16px; line-height: 1.6; }
/* A picture place whose scene is not captured yet keeps only its text, in the columns of the facts below. */
.product-long-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; max-width: 1040px; margin: 48px auto 0; }
.product-long-link, .product-long-aside { margin: 32px auto 0; max-width: 850px; text-align: center; }
.product-long-aside { color: var(--public-muted); font-size: 16px; line-height: 1.6; }
.product-long-link a, .product-long-aside a { color: var(--public-ink); font-size: 15px; text-underline-offset: 5px; }
.product-long a:focus-visible { outline: 2px solid var(--public-ink); outline-offset: 5px; }
.product-long-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; margin-top: 72px; }
.product-long-card { margin: 0; min-width: 0; }
@media (max-width: 1100px) {
  .product-long-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .product-long { --product-long-hero-from: .96; --product-long-shot-from: .95; --product-long-shot-to: .98; --product-long-zoom-depth: .5; }
  .product-long-shot { margin-top: 40px; border-radius: 12px; }
  .product-long-statement { padding-block: 72px 16px; }
  .product-long-section { padding-block: 72px 16px; }
  .product-long-details { flex-direction: column; gap: 40px; margin-top: 40px; }
  .product-long-detail { flex: none; width: 100%; }
  .product-long-details--single .product-long-detail { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .product-long-details--flip .product-long-frame { order: 0; }
  .product-long-facts { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .product-long-notes { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .product-long-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 40px; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .product-long-hero-shot { animation: product-long-grow linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
    .product-long-section .product-long-shot { animation: product-long-breathe linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .product-long-details .product-long-lens { animation: product-long-zoom linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    @keyframes product-long-grow { from { scale: var(--product-long-hero-from); } to { scale: 1; } }
    @keyframes product-long-breathe { 0% { scale: var(--product-long-shot-from); } 40%, 60% { scale: 1; } 100% { scale: var(--product-long-shot-to); } }
    @keyframes product-long-zoom { from { scale: calc(1 - (1 - var(--slot-zoom, 1)) * var(--product-long-zoom-depth)); } to { scale: 1; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-long :is(.product-long-hero-shot, .product-long-shot, .product-long-lens) { animation: none; scale: none; }
}