/* ============================================================
   Workflow OS — Product page · desktop hero refinement (SITE-P6)
   ------------------------------------------------------------
   Link AFTER workflowos-v2.css, on /workflowos/ only.

   Goal: make the product-page hero read as a calm product
   explainer / buyer-confidence showcase — deliberately quieter
   than the homepage hero's more dynamic treatment. This is a
   REFINEMENT, not a new animated hero: the cockpit is presented
   on a composed "stage" with real depth, the existing trust line
   becomes a verified-assurance strip, and the hero settles in
   once on load. No new copy, CTAs, colors, fonts, or JS.
   Token-only (--wos-* / :root + --sp-/--r-).

   Scope is gated to desktop / large-tablet (>=861px), so the
   mobile card stack from home-v2.css is untouched. All motion is
   one-pass and lives inside prefers-reduced-motion:no-preference;
   the readable base style is always the resting state, so
   reduced-motion, print, and no-JS show the composed static hero.
   ============================================================ */

@media (min-width: 861px) {

  /* ── Composition rhythm ─────────────────────────────────── */
  .wp-hero { padding-top: clamp(28px, 4vw, 56px); }

  /* ── Verified-assurance strip ───────────────────────────────
     The three existing guarantees become explicit confidence
     markers — checkmarks + hairline dividers — reading as a
     verified "what you keep" list rather than a soft caption.
     Copy is unchanged; only the dot becomes a check. */
  .wp-hero .hp-trust {
    width: fit-content; max-width: 100%; gap: 0;
    padding-top: 0;
    border-top: 1px solid var(--wos-border);
    border-bottom: 1px solid var(--wos-border);
  }
  .wp-hero .hp-trust__item {
    padding: 13px 24px 13px 0; margin-right: 24px;
    border-right: 1px solid var(--wos-border);
    font-size: 13.5px; color: var(--wos-text-primary);
  }
  .wp-hero .hp-trust__item:last-child { border-right: none; margin-right: 0; padding-right: 0; }
  /* dot → checkmark (verified / included) */
  .wp-hero .hp-trust__item::before {
    width: 6px; height: 10px; border-radius: 0; background: none;
    border: solid var(--wos-accent); border-width: 0 2px 2px 0;
    transform: rotate(43deg) translateY(-1px);
  }

  /* ── Product showcase stage ─────────────────────────────────
     The cockpit no longer floats on the bare page background — it
     sits on a faintly accent-tinted stage with its own hairline
     frame and an inner ring, so it reads as a deliberately
     presented product screenshot. The existing scroll-mask fades
     the 960px cockpit cleanly into the stage at its edges. */
  .wp-hero .hp-hero__product {
    position: relative;
    margin-top: clamp(18px, 2.4vw, 32px);
    padding: clamp(22px, 2.6vw, 40px) clamp(20px, 2.4vw, 34px) clamp(26px, 3vw, 44px);
    border: 1px solid var(--wos-border);
    border-radius: 26px;
    background:
      radial-gradient(120% 90% at 10% -12%, var(--wos-accent-subtle) 0%, transparent 52%),
      radial-gradient(90% 80% at 112% 118%, var(--wos-accent-subtle) 0%, transparent 54%),
      color-mix(in srgb, var(--wos-canvas) 92%, var(--wos-accent));
  }
  /* crafted, framed inner edge */
  .wp-hero .hp-hero__product::after {
    content: ""; position: absolute; inset: 0; border-radius: 26px; pointer-events: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wos-border) 55%, transparent);
  }
  .wp-hero .hp-hero__producthead {
    position: relative; z-index: 1;
    padding: 0 2px; margin-bottom: clamp(14px, 1.6vw, 22px);
  }
  .wp-hero .hp-prodcap { color: var(--wos-text-secondary); }

  /* lift the cockpit off the stage with a real drop shadow (light) */
  .wp-hero .hp-hero__product .wos-product {
    box-shadow:
      0 30px 60px -34px rgba(16, 24, 32, 0.40),
      0 12px 26px -20px rgba(16, 24, 32, 0.26);
  }
  /* dark theme: keep the lift, but use the theme-correct token shadow */
  html[data-theme="dark"] .wp-hero .hp-hero__product .wos-product {
    box-shadow: var(--wos-shadow-md, var(--wos-shadow));
  }
}

/* Tablet-large: tighten the stage radius a touch */
@media (min-width: 861px) and (max-width: 1040px) {
  .wp-hero .hp-hero__product,
  .wp-hero .hp-hero__product::after { border-radius: 22px; }
}