/* ============================================================
   PRODUCT PREVIEW — moved verbatim, deliberately.

   This mock depicts the real (light-mode) product UI. Its literal
   pixel sizes are the one place the fluid type scale is NOT
   applied: it has to keep looking like a screenshot at any
   viewport, not reflow like page copy.

   It sits on an INK chapter here, so the theme variables it reads
   are pinned back to their light values at the container — the
   same mechanism the original used for dark mode, re-scoped. Do
   not "simplify" that by rewriting the 31 rules underneath.
   ============================================================ */

.product-preview-wrap { position: relative; min-width: 0; }

.background-grid {
  position: absolute;
  inset: -30px -36px -35px 12%;
  /* The original's LIGHT values. These were swapped for the
     dark-mode set while the product chapter was ink; on a light
     section those bright lines shout. */
  border: 1px solid rgba(61, 54, 187, .13);
  background:
    linear-gradient(rgba(61, 54, 187, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 54, 187, .05) 1px, transparent 1px),
    linear-gradient(135deg, rgba(61, 54, 187, .03), transparent 42%);
  background-size: 38px 38px, 38px 38px, 100% 100%;
  border-radius: 42px;
  transform: rotate(-1.3deg);
}

.product-preview {
  position: relative;
  display: grid;
  grid-template-columns: 196px 1fr;
  border: 1px solid rgba(228, 230, 239, .95);
  border-radius: 29px;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(24px);
  overflow: hidden;
  transform-origin: center;
  /* Angles come from variables so the tilt can drive them per-frame
     while perspective, origin and timing stay here. The fallbacks
     are the resting angles, which is also what makes this degrade
     cleanly: with no JS the rule below still straightens the panel
     on hover, exactly as it did before. */
  transform: perspective(1600px) rotateY(var(--pv-ry, -2.2deg)) rotateX(var(--pv-rx, .7deg));
  transition: transform .6s var(--motion-ease);
}
.product-preview:hover {
  transform: perspective(1600px) rotateY(var(--pv-ry, 0deg)) rotateX(var(--pv-rx, 0deg));
}
/* While tracking, the .6s settle would lag half a second behind the
   cursor. Short and linear here; dropping the attribute on
   pointerleave hands the transition back so it eases home. */
.product-preview[data-tilting="true"] { transition: transform 110ms linear; }

/* The mock must never change with the world it sits on. 31 .pv-*
   rules read theme variables; rather than rewrite each one, the
   variables are pinned to their light values at the container.
   The explicit colour is essential, not redundant: several .pv-*
   elements have no colour rule of their own and inherit from the
   page. Inheritance passes the COMPUTED value, so on an ink chapter
   they would inherit resolved white and the variable pin could not
   reach them. */
.product-preview {
  color: #0E0D1A;
  --bg: #F7F6F8;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #F1F0F4;
  --ink: #0E0D1A;
  --muted: #545263;
  --muted-light: #9896A8;
  --line: #EDECED;
  --border: #E7E6EB;
  --border-strong: #D6D4DE;
  --primary: #3D36BB;
  --primary-dark: #1D138B;
  --primary-soft: #EDEAFC;
  --navy: #0E0D1A;
  --teal: #1D9E75;
  --elev-1: 0 1px 2px rgba(14, 13, 26, .04), 0 2px 8px rgba(14, 13, 26, .04);
  --elev-2: 0 2px 4px rgba(14, 13, 26, .04), 0 10px 26px rgba(14, 13, 26, .07);
  --elev-3: 0 4px 8px rgba(14, 13, 26, .05), 0 22px 60px rgba(14, 13, 26, .11);
  --elev-4: 0 8px 16px rgba(14, 13, 26, .06), 0 40px 100px rgba(14, 13, 26, .16);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* ---- Sidebar ---- */
.pv-sidebar {
  min-height: 0;
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 12px;
  background: linear-gradient(180deg, #1A1733 0%, #0E0D1A 100%);
  color: #C9C6E0;
  overflow: hidden;
}
.pv-brand { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; }
.pv-brand-mark { width: 22px; color: #8F87F0; }
.pv-brand-mark svg, .pv-brand-mark img { width: 100%; height: auto; display: block; }
.pv-brand-name { font-family: var(--font-fraunces), Georgia, serif; font-size: 17px; font-weight: 700; letter-spacing: -.03em; color: #fff; }
.pv-account { padding: 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(255,255,255,.03); }
.pv-account-top { display: flex; align-items: center; gap: 9px; }
.pv-account-avatar { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #4A42CE, #3D36BB); color: #fff; font-size: 12px; font-weight: 700; }
.pv-account-top strong { display: block; font-size: 11.5px; color: #fff; line-height: 1.2; }
.pv-account-top span { font-size: 8px; letter-spacing: .09em; color: #9C98BC; }
.pv-journey { margin-top: 11px; }
.pv-journey-label { display: flex; justify-content: space-between; font-size: 9px; color: #9C98BC; }
.pv-journey-label strong { color: #8F87F0; font-weight: 700; }
.pv-journey-bar { height: 4px; margin-top: 5px; border-radius: 999px; background: rgba(255,255,255,.09); overflow: hidden; }
.pv-journey-bar span { display: block; height: 100%; width: var(--w, 90%); border-radius: inherit; background: linear-gradient(90deg, #2A238F 0%, #3D36BB 55%, #7B72E0 100%); transform-origin: left; animation: bar-grow 1s cubic-bezier(.2,.7,.2,1) .5s backwards; }
.pv-pci-card { padding: 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: rgba(255,255,255,.03); }
.pv-pci-label { font-size: 8px; letter-spacing: .11em; color: #9C98BC; }
.pv-pci-num { display: block; margin: 2px 0 1px; font-family: var(--font-fraunces), Georgia, serif; font-size: 26px; font-weight: 600; color: #fff; line-height: 1; }
.pv-pci-num em { font-style: normal; font-size: 14px; font-weight: 400; color: rgba(255,255,255,.55); }
.pv-pci-sub { font-size: 8px; color: #807CA0; }
.pv-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.pv-sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.pv-nav-heading { padding: 0 6px; margin-bottom: 4px; font-size: 8px; letter-spacing: .12em; color: #807CA0; }
.pv-nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 9px; font-size: 10.5px; color: #B4B0D0; }
.pv-nav-item svg { width: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pv-nav-item.active { background: linear-gradient(135deg, #4A42CE, #3D36BB); color: #fff; box-shadow: 0 8px 18px rgba(61,54,187,.32); }

/* ---- Main ---- */
.pv-main { min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 11px; }
.pv-topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.pv-topbar h2 { margin: 0; font-family: var(--font-fraunces), Georgia, serif; font-size: 21px; font-weight: 500; line-height: 1.05; letter-spacing: -.035em; color: var(--ink); }
.pv-topbar p { margin: 5px 0 0; color: var(--muted-light); font-size: 11px; }
.pv-topbar p em { font-style: italic; color: var(--muted); font-weight: 400; }
.pv-benchmark-btn { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 8px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #545263; font-size: 10px; font-weight: 700; box-shadow: var(--shadow-sm); }

.pv-card { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }
.pv-card-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }

.pv-domains { padding: 14px 16px; }
.pv-domains-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; }
.pv-pci-inline { text-align: right; }
.pv-pci-inline span { display: block; font-size: 8px; letter-spacing: .1em; color: var(--muted-light); }
.pv-pci-inline strong { font-family: var(--font-fraunces), Georgia, serif; font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.pv-pci-inline em { font-style: normal; font-size: 13px; color: var(--muted-light); }
.pv-domain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 22px; }
.pv-domain { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.pv-domain-icon { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: var(--primary-soft); color: var(--primary); }
.pv-domain-icon svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pv-domain-body { min-width: 0; flex: 1; }
.pv-domain-label { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.pv-domain-label span { font-size: 10.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-domain-label strong { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--primary); }
.pv-domain-label em { font-style: normal; font-size: 8.5px; color: var(--muted-light); }
.pv-domain-bar { height: 4px; margin-top: 6px; border-radius: 999px; background: #EDECED; overflow: hidden; }
.pv-domain-bar span { display: block; height: 100%; width: var(--w, 60%); border-radius: inherit; background: linear-gradient(90deg, #2A238F 0%, #3D36BB 55%, #7B72E0 100%); transform-origin: left; animation: bar-grow .9s cubic-bezier(.2,.7,.2,1) backwards; }

.pv-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pv-tile { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.pv-tile-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--primary-soft); color: var(--primary); margin-bottom: 8px; }
.pv-tile-icon svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pv-tile strong { display: block; font-family: var(--font-fraunces), Georgia, serif; font-size: 20px; font-weight: 600; line-height: 1; color: var(--ink); }
.pv-tile-label { display: block; margin-top: 4px; font-size: 8.5px; color: var(--muted-light); }
.pv-tile-ready strong { color: var(--teal); font-size: 15px; }
.pv-tile-ready .pv-tile-icon { background: #E4F3EC; color: var(--teal); }
.pv-tile-ready em { font-style: normal; }

.pv-completed { flex: 1 1 auto; }
.pv-list-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 6px; }
.pv-list-head h3 { margin: 0; font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.pv-list-head h3 span { color: var(--muted-light); font-weight: 400; }
.pv-view-all { color: var(--primary); font-size: 9.5px; font-weight: 700; }
.pv-list-row { display: flex; align-items: center; gap: 9px; padding: 6px 14px; border-top: 1px solid var(--line); }
.pv-check { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #E4F3EC; color: var(--teal); }
.pv-check svg { width: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv-list-text { min-width: 0; flex: 1; }
.pv-list-text strong { display: block; font-size: 10px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.pv-list-text span { font-size: 8.5px; color: var(--muted-light); }
.pv-score { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--primary); }
.pv-score em { font-style: normal; font-size: 8px; color: var(--muted-light); }

/* --- Island hover ---------------------------------------------
   The panels inside the mock answer the cursor individually, so the
   preview reads as a live surface rather than a screenshot.
   Deliberately elevation and lighting only, never underlines or
   pointer cursors: nothing in here is clickable, and hover feedback
   that mimics a link would promise something the mock can't keep. */
.pv-tile, .pv-domain, .pv-list-row, .pv-nav-item,
.pv-account, .pv-pci-card, .pv-benchmark-btn {
  transition:
    transform var(--motion-pointer) var(--motion-ease),
    box-shadow var(--motion-pointer) var(--motion-ease),
    border-color var(--motion-pointer) var(--motion-ease),
    color var(--motion-pointer) var(--motion-ease),
    background-color var(--motion-pointer) var(--motion-ease);
}

.pv-tile:hover { transform: translateY(-3px); border-color: rgba(61,54,187,.32); box-shadow: 0 10px 24px rgba(61,54,187,.16); }
.pv-tile:hover .pv-tile-icon { background: var(--primary); color: #fff; }
.pv-tile-ready:hover .pv-tile-icon { background: var(--teal); color: #fff; }
.pv-tile-icon { transition: background var(--motion-pointer) var(--motion-ease), color var(--motion-pointer) var(--motion-ease); }

/* The negative margin cancels the padding exactly, so the hover
   surface is bigger than the row without moving anything in the grid. */
.pv-domain { margin: -6px; padding: 6px; border-radius: 11px; }
.pv-domain:hover { background-color: rgba(61,54,187,.055); }
.pv-domain:hover .pv-domain-icon { background: var(--primary); color: #fff; }
.pv-domain:hover .pv-domain-label strong { color: var(--primary-dark); }
.pv-domain-icon { transition: background var(--motion-pointer) var(--motion-ease), color var(--motion-pointer) var(--motion-ease); }
.pv-domain-label strong { transition: color var(--motion-pointer) var(--motion-ease); }

.pv-list-row:hover { background-color: rgba(61,54,187,.05); }
.pv-list-row:hover .pv-score { color: var(--primary-dark); }
.pv-score { transition: color var(--motion-pointer) var(--motion-ease); }

/* Sidebar sits on the dark gradient, so its highlights are light-on-dark. */
.pv-nav-item:not(.active):hover { background-color: rgba(255,255,255,.07); color: #fff; }
.pv-account:hover, .pv-pci-card:hover { border-color: rgba(255,255,255,.18); background-color: rgba(255,255,255,.06); }

.pv-benchmark-btn:hover { border-color: var(--primary); color: var(--primary); }

@media (max-width: 1240px) { .pv-domain-grid { gap: 12px 16px; } }
@media (max-width: 1050px) { .product-preview-wrap { max-width: 880px; margin-inline: auto; } }
@media (max-width: 760px) {
  .product-preview { grid-template-columns: 1fr; min-height: auto; transform: none; }
  .product-preview:hover { transform: none; }
  .pv-sidebar { display: none; }
  .pv-main { padding: 16px; }
  .pv-topbar h2 { font-size: 19px; }
  .pv-domain-grid { grid-template-columns: 1fr; }
  .pv-tiles { grid-template-columns: repeat(2, 1fr); }
  .background-grid { inset: -18px -16px -20px 4%; border-radius: 30px; }
}