/* Product-only rules. Typography, themes, navigation, footer and focus inherit service.css. */
.product-pages { --product-live:#25995e; --product-delivered:#5685e0; }
.product-pages main,.product-pages section,.product-pages .wrap { min-width:0; }
.product-pages h1 { overflow-wrap:anywhere; }
.product-pages .product-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.product-pill { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:6px 10px; border-radius:999px; background:var(--hull-2); color:var(--mute); font:500 12px/1.3 var(--font-body); overflow-wrap:anywhere; }
.product-status i { display:inline-block; flex:none; width:6px; height:6px; border-radius:50%; background:var(--mute); }
.product-status[data-status="live"] i { background:var(--product-live); }
.product-status[data-status="delivered"] i { background:var(--product-delivered); }
.product-status[data-status="prototype"] i { background:transparent; border:1.5px dashed var(--mute); }

/* ---------- Products index ---------- */
.product-hero-actions { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:14px 28px; margin-top:32px; }
.product-index-hero { padding-bottom:80px; }
.product-catalog { padding-bottom:104px; }
.industry-filter h2 { font:600 17px/1.4 var(--font-body); letter-spacing:0; }
.industry-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.industry-chip { display:inline-flex; align-items:center; justify-content:center; min-height:44px; max-width:100%; padding:10px 16px; border-radius:999px; border:1px solid var(--line); color:var(--ink); background:var(--hull-2); font-size:14px; line-height:1.4; text-align:center; overflow-wrap:anywhere; }
.industry-chip:hover { background:var(--nav-hover); text-decoration:none; }
.product-status-key { max-width:760px; margin-top:24px; color:var(--mute); font-size:14px; }
.industry-section { margin-top:72px; scroll-margin-top:24px; }
.industry-section:target h3,.ready-now:target h2 { text-decoration:underline; text-decoration-color:var(--link); text-decoration-thickness:3px; text-underline-offset:10px; }
.industry-section h3,.ready-now h2,.product-more-heading { font-size:clamp(28px,3.6vw,42px); line-height:1.15; }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:28px; }
.product-card { display:flex; flex-direction:column; min-width:0; min-height:44px; overflow:hidden; border:1px solid var(--line); border-radius:24px; color:var(--ink); background:var(--hull); }
.product-card:hover { text-decoration:none; }
.product-card:hover h3 { text-decoration:underline; text-decoration-color:var(--link); text-underline-offset:5px; }
.product-card-image { display:grid; place-items:center; aspect-ratio:1586/992; background:var(--hull-2); }
.product-card-image img { width:100%; height:auto; object-fit:contain; }
.product-card-copy { display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:12px; padding:24px; }
.product-card h3 { font-size:23px; line-height:1.2; overflow-wrap:anywhere; }
.product-card-copy>p { color:var(--mute); font-size:16px; }
.product-card-copy .product-meta { margin-top:auto; padding-top:8px; }
.product-card-industry { color:var(--mute); font-size:13px; font-weight:600; letter-spacing:.01em; }
.product-neutral { display:grid; place-items:center; width:100%; min-width:0; aspect-ratio:1586/992; padding:24px; background:var(--hull-2); text-align:center; }
.product-neutral span { max-width:100%; font:600 clamp(26px,5vw,54px)/1.2 var(--font-display); letter-spacing:-.025em; overflow-wrap:anywhere; }
.product-card .product-neutral { height:100%; }
.product-card .product-neutral span { font-size:26px; }
.ready-now { margin-top:56px; scroll-margin-top:24px; }
.product-ready-line { max-width:720px; margin-top:12px; color:var(--mute); }
.product-more-heading { margin-top:96px; }
.product-video-chip { background:var(--ink); color:var(--void); font-weight:600; }
.gallery-note { margin-top:28px; color:var(--mute); font-size:13px; line-height:1.5; }
.product-image-note { margin-top:8px; }
.product-notice { margin-top:8px; padding:20px 22px; border-radius:18px; background:var(--hull); border:1px solid var(--line); }
.product-notice h2,.product-notice h3 { font:600 15px/1.4 var(--font-body); letter-spacing:0; }
.product-notice p { margin-top:8px; color:var(--mute); font-size:15px; line-height:1.55; }
.product-catalog .product-notice { max-width:760px; margin-top:20px; background:var(--hull-2); }
.product-cta .btn { padding:16px 24px; }
.product-cta .btn .ico { display:none; }
.product-back { margin-top:20px; }
.product-back a { color:#8d9bff; }
@media (max-width:1000px) { .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) {
  .product-grid { grid-template-columns:minmax(0,1fr); }
  .product-index-hero { padding-bottom:56px; }
  .product-catalog { padding-bottom:72px; }
  .industry-section { margin-top:56px; }
  .product-neutral { aspect-ratio:16/10; }
}
@media (prefers-reduced-motion:reduce) { .product-pages { scroll-behavior:auto; } }

/* ---------- Product page (designer lane, 2026-10-29): hero + viewer, at a glance, overview, capabilities, feature cards,
   How it works stepper, status. Rhythm: sections 128 px apart on desktop (88 px on phone); type scale 80/52/26/20/17/15/13. ---------- */
.product-pages:has(.pd-hero) { --pd-gap:clamp(88px,9vw,128px); --pd-accent:var(--link); --pd-card-bg:var(--hull); --pd-ico-bg:rgba(141,155,255,.12); --pv-bg:var(--hull-2); }
:root[data-theme="light"] .product-pages:has(.pd-hero) { --pd-ico-bg:rgba(62,76,168,.08); --pd-card-bg:#ffffff; }
.pd-kicker { margin:0 0 14px; color:var(--pd-accent); font:600 12.5px/1.2 var(--font-display); letter-spacing:.14em; text-transform:uppercase; }
.pd-head-row h2 { max-width:820px; font-size:clamp(32px,4vw,52px); line-height:1.04; letter-spacing:-.035em; }
.pd-section { padding-top:var(--pd-gap); scroll-margin-top:0; }

/* hero: name and headline left, the lead and actions right, the viewer full width under both */
.product-pages .product-hero { padding-top:64px; padding-bottom:0; text-align:left; }
.pd-hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:end; gap:28px 80px; }
.pd-title .product-category { margin:0; }
.product-pages .product-hero h1 { margin:18px 0 0; max-width:none; font-size:clamp(44px,5.6vw,80px); line-height:.98; letter-spacing:-.045em; }
.product-pages .product-headline { max-width:560px; margin:18px 0 0; color:var(--ink); font:600 clamp(20px,1.8vw,25px)/1.3 var(--font-display); letter-spacing:-.02em; }
.pd-lead { padding-bottom:4px; }
.pd-lead .product-intro { max-width:540px; margin:0; color:var(--mute); font-size:17px; line-height:1.6; }
.pd-lead .product-app-note { margin-top:12px; color:var(--mute); font-size:14px; }
.pd-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px; margin-top:26px; }
.pd-actions .tlink { color:var(--ink); font-size:15px; }
.pd-actions .tlink svg { color:var(--pd-accent); }
.pd-media { margin-top:52px; scroll-margin-top:0; }
.pd-notes { margin:2px 4px 0; }
.pd-notes .gallery-note { margin-top:14px; font-size:12.5px; }
.pd-notes .product-image-note { margin-top:4px; }

/* viewer: one glass-slab stage (fixed 16:10, so swapping never shifts the layout), caption bar, thumbnail strip */
.pv { position:relative; }
.pv-frame.fx-slab { width:auto; padding:10px; border-radius:30px; box-shadow:0 1px 1px rgba(0,0,0,.12),0 40px 90px -46px rgba(20,24,70,.55); }
.pv-frame.fx-slab .scr { border-radius:21px; }
.pv-stage { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--pv-bg); outline:0; touch-action:pan-y; }
.pv-slide { position:absolute; inset:0; display:grid; grid-template:100% / 100%; place-items:center; overflow:hidden; background:var(--pv-bg); opacity:0; visibility:hidden; transition:opacity .45s var(--ease),visibility 0s linear .45s; }
.pv-slide.is-on { z-index:2; opacity:1; visibility:visible; transition:opacity .45s var(--ease); }
.pv-slide.is-leaving { z-index:1; opacity:1; visibility:visible; transition:none; }
.pv-slide .pv-img { display:block; width:100%; height:auto; max-height:100%; border-radius:0; object-fit:cover; }   /* 16:10 screens fill the stage; a 1586x995 poster loses 2 px */
.pv-slide[data-kind="phone"] { background:radial-gradient(46% 70% at 50% 58%,rgba(108,125,255,.22),transparent 72%),var(--pv-bg); }
.pv-slide[data-kind="phone"] .pv-img { width:auto; height:90%; max-width:none; max-height:none; object-fit:contain; border-radius:clamp(12px,2.6vw,34px); box-shadow:0 0 0 1px rgba(0,0,0,.08),0 30px 60px -24px rgba(10,14,40,.55); }
.pv.is-loading .pv-stage { cursor:progress; }
.pv-bar { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin:18px 4px 0; }
.pv-caption { display:flex; align-items:baseline; gap:14px; min-width:0; margin:0; color:var(--ink); font-size:15.5px; line-height:1.45; }
.pv-caption-box { display:grid; min-width:0; }   /* every caption sits in the same cell (hidden sizers), so the box is as tall as the longest: swapping never shifts the layout */
.pv-caption-box > * { grid-area:1/1; }
.pv-caption-sizer { visibility:hidden; }
.pv-count { flex:none; color:var(--mute); font:600 12.5px/1.45 var(--font-display); letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.pv-count-i { color:var(--ink); }
.pv-arrows { display:flex; flex:none; gap:8px; margin-top:-8px; }
.pv-arrow { display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; background:var(--pd-card-bg); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; transition:background-color .2s,box-shadow .2s; }
.pv-arrow:hover { box-shadow:inset 0 0 0 1px var(--mute); }
.pv:not(.is-ready) .pv-arrow { visibility:hidden; }   /* they keep their space before the script runs (no shift); without JS they stay invisible */
.pv-thumbs { display:flex; gap:12px; margin:14px 0 0; padding:6px 4px 8px; list-style:none; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none; }
.pv-thumbs::-webkit-scrollbar { display:none; }
.pv-thumbs li { flex:none; scroll-snap-align:start; }
.pv-thumb { position:relative; display:grid; place-items:center; width:144px; aspect-ratio:16/10; padding:0; border:0; border-radius:12px; overflow:hidden; background:var(--pv-bg); box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; transition:box-shadow .25s var(--ease),transform .25s var(--ease); }
.pv-thumb img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.85); transition:filter .25s; }
.pv-thumb[data-kind="phone"] img { width:auto; max-width:none; height:86%; border-radius:6px; object-fit:contain; }
.pv-thumb::after { content:""; position:absolute; inset:0; border-radius:inherit; background:rgba(5,6,12,.3); transition:background-color .25s; pointer-events:none; }
:root[data-theme="light"] .pv-thumb::after { background:rgba(251,251,253,.38); }
.pv-thumb:hover::after,.pv-thumb:focus-visible::after,:root .pv-thumb[aria-current="true"]::after { background:transparent; }
.pv-thumb:hover img,.pv-thumb[aria-current="true"] img { filter:none; }
.pv-thumb:hover { transform:translateY(-2px); }
.pv-thumb[aria-current="true"] { box-shadow:0 0 0 2px var(--void),0 0 0 4px var(--pd-accent); }
.pv-thumb:focus-visible { outline:2px solid var(--pd-accent); outline-offset:4px; }

/* at a glance */
.pd-glance { margin-top:64px; }
.pd-glance-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; border-block:1px solid var(--line); }
.pd-glance-list > div { min-width:0; padding:24px 24px 26px; }
.pd-glance-list > div:first-child { padding-left:0; }
.pd-glance-list > div + div { border-left:1px solid var(--line); }
.pd-glance-list dt { color:var(--mute); font:600 11.5px/1.3 var(--font-display); letter-spacing:.14em; text-transform:uppercase; }
.pd-glance-list dd { margin:12px 0 0; color:var(--ink); font:600 16.5px/1.4 var(--font-body); overflow-wrap:anywhere; }
.pd-glance-list dd .product-pill { margin-right:8px; vertical-align:1px; text-transform:capitalize; }
.pd-glance-sub { display:block; margin-top:6px; color:var(--mute); font-size:14px; font-weight:400; }
.pd-glance-list dd > .product-pill + .pd-glance-sub { display:inline; margin:0; color:var(--ink); font-size:16.5px; font-weight:600; }
.pd-glance-list .product-industry { display:inline; min-height:0; color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-decoration-thickness:1px; text-underline-offset:4px; }
.pd-glance-list .product-industry:hover { text-decoration-color:var(--pd-accent); }
.pd-glance-stack { font-weight:500!important; }

/* video: "Play video" opens the popup (product-video.js / product-video.css); play icon on the left of the label */
.pd-play { gap:12px; padding:6px 24px 6px 6px; }
.pd-play .ico { order:-1; }
/* the film player: poster in the glass frame, a large glass play disc (white triangle, magenta glow on hover) */
.pd-player.fx-slab { width:auto; margin-top:36px; padding:10px; border-radius:30px; box-shadow:0 1px 1px rgba(0,0,0,.12),0 40px 90px -46px rgba(20,24,70,.55); }
.pd-player.fx-slab .scr { border-radius:21px; }
.pd-player-stage { position:relative; aspect-ratio:16/9; background:#05060c center/cover no-repeat; }
.pd-player-stage::after { content:""; position:absolute; inset:0; background:radial-gradient(70% 70% at 50% 50%,rgba(5,6,12,0),rgba(5,6,12,.42)); pointer-events:none; }
.pd-player-play { position:absolute; inset:0; z-index:2; display:grid; place-items:center; padding:0; border:0; border-radius:inherit; background:transparent; color:#fff; cursor:pointer; }
.pd-play-disc { display:grid; place-items:center; width:108px; height:108px; padding-left:5px; border-radius:50%;
  background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.3),rgba(255,255,255,.06) 48%),rgba(11,16,32,.46);   /* dark glass core: reads on light and dark posters */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1.5px rgba(255,255,255,.42),0 20px 50px -14px rgba(0,0,0,.6);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease); }
.pd-play-disc svg { display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.pd-player-play:hover .pd-play-disc,.pd-player-play:focus-visible .pd-play-disc { transform:scale(1.06);
  background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.34),rgba(255,255,255,.08) 48%),rgba(11,16,32,.56);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1.5px rgba(255,255,255,.6),0 20px 50px -14px rgba(0,0,0,.6),0 0 70px 6px rgba(236,20,90,.5); }
.pd-player-play:focus-visible { outline:2px solid #ff7aa6; outline-offset:-6px; }
.pd-soon-chip { position:absolute; z-index:3; left:18px; top:18px; display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border-radius:999px;
  background:rgba(5,6,12,.66); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); font:600 12.5px/1 var(--font-body); letter-spacing:.01em; }
.pd-soon-chip i { width:7px; height:7px; border-radius:50%; background:#ff4d87; box-shadow:0 0 10px rgba(255,77,135,.8); }
.pd-video-cap { margin:16px 4px 0; color:var(--mute); font-size:14px; line-height:1.5; }
@media (max-width:700px) {
  .pd-player.fx-slab { margin-top:26px; padding:6px; border-radius:20px; }
  .pd-player.fx-slab .scr { border-radius:15px; }
  .pd-play-disc { width:76px; height:76px; }
  .pd-play-disc svg { width:24px; height:24px; }
  .pd-soon-chip { left:12px; top:12px; padding:7px 11px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { .pd-play-disc { transition:none; } }
/* video */
.pd-video .product-video-frame { margin:36px 0 0; border-radius:24px; overflow:hidden; background:var(--hull-2); box-shadow:inset 0 0 0 1px var(--line); }
.product-video-frame video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:#000; }
.product-video-frame figcaption { padding:14px 18px; color:var(--mute); font-size:14px; line-height:1.5; }

/* overview: context left, who it's for right */
.pd-overview-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:32px 72px; align-items:start; }
.pd-overview .product-prose { max-width:720px; margin-top:22px; color:var(--ink-2,var(--mute)); font-size:21px; line-height:1.55; letter-spacing:-.012em; }
.pd-who { margin-top:28px; padding:30px 30px 24px; border-radius:22px; background:var(--pd-card-bg); box-shadow:inset 0 0 0 1px var(--line); }
.pd-who h2 { font-size:22px; line-height:1.2; letter-spacing:-.02em; }
.pd-who p { margin-top:12px; color:var(--mute); font-size:16px; line-height:1.6; }
.pd-who .tlink { margin-top:8px; color:var(--pd-accent); font-size:15px; }

/* capabilities (modules) */
.pd-modules { display:grid; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); margin:40px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); counter-reset:none; }
.pd-modules li { display:flex; flex-direction:column; gap:12px; min-width:0; padding:22px 24px 0 0; }
.pd-modules li + li { padding-left:24px; border-left:1px solid var(--line); }
.pd-modules span { color:var(--pd-accent); font:600 13px/1 var(--font-display); letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.pd-modules p { margin:0; color:var(--ink); font-size:16px; line-height:1.5; }

/* feature cards: a 6-column grid; rows of three, plus rows of two up front so the last row is always full */
.pd-cards { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; margin:40px 0 0; padding:0; list-style:none; }
.pd-card { grid-column:span 2; display:flex; flex-direction:column; min-width:0; padding:26px 26px 22px; border-radius:22px; background:var(--pd-card-bg); box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(11,16,32,.04); transition:box-shadow .3s var(--ease),transform .3s var(--ease); }
.pd-cards[data-big="2"] .pd-card:nth-child(-n+2),.pd-cards[data-big="4"] .pd-card:nth-child(-n+4) { grid-column:span 3; }
.pd-card:hover { box-shadow:inset 0 0 0 1px var(--stroke-2,var(--line)),0 18px 40px -24px rgba(11,16,32,.35); }
.pd-ico { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; background:var(--pd-ico-bg); color:var(--pd-accent); }
.pd-ico svg { display:block; }
.pd-card-title { margin-top:20px; font:600 18px/1.3 var(--font-display); letter-spacing:-.015em; }
.pd-card-title:empty { display:none; }
.pd-card-body { margin-top:8px; color:var(--mute); font-size:15.5px; line-height:1.55; }
.pd-card-title:empty + .pd-card-body { margin-top:20px; color:var(--ink); }
.pd-card-body::first-letter { text-transform:uppercase; }
.pd-card-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:18px; }
.pd-see { display:inline-flex; align-items:center; gap:6px; min-height:44px; margin:-12px 0 -12px auto; color:var(--pd-accent); font:600 14px/1 var(--font-body); }
.pd-see svg { transition:transform .3s var(--ease); }
.pd-see:hover { text-decoration:none; }
.pd-see:hover svg { transform:translateX(3px); }
.feature-status { display:inline-block; padding:3px 9px; border-radius:999px; border:1px solid var(--line); background:var(--hull-2); color:var(--mute); font:600 12px/1.3 var(--font-body); white-space:nowrap; }
.feature-status[data-s="now"] { color:var(--ink); border-color:var(--product-live); }
.feature-status[data-s="roadmap"] { border-style:dashed; }

/* How it works: numbered, connected steps on a tinted band */
.pd-how { margin-top:var(--pd-gap); padding-bottom:var(--pd-gap); background:var(--hull-2); }
.pd-how-lead { max-width:760px; margin-top:20px; color:var(--mute); font-size:20px; line-height:1.55; }
/* no numbered steps in the deck: the workflow sentence is the statement, larger and in ink, on a shorter band */
.pd-how:not(:has(.pd-steps)) { padding-bottom:calc(var(--pd-gap) * .8); }
.pd-how:not(:has(.pd-steps)) .pd-how-lead { max-width:900px; margin-top:24px; color:var(--ink); font:500 clamp(22px,2.3vw,30px)/1.4 var(--font-display); letter-spacing:-.02em; }
.pd-steps { --gap:28px; position:relative; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:var(--gap); margin:56px 0 0; padding:0; list-style:none; }
.pd-steps::before { content:""; position:absolute; top:22px; left:22px; right:calc((100% - var(--gap) * (var(--n) - 1)) / var(--n) - 22px); height:1px; background:linear-gradient(90deg,var(--pd-accent),var(--line)); }
.pd-step { position:relative; min-width:0; }
.pd-step-n { position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--hull-2); color:var(--pd-accent); box-shadow:inset 0 0 0 1px var(--pd-accent); font:600 14px/1 var(--font-display); font-variant-numeric:tabular-nums; }
.pd-step-title { margin-top:24px; font:600 21px/1.2 var(--font-display); letter-spacing:-.02em; }
.pd-step p { margin-top:10px; color:var(--mute); font-size:16px; line-height:1.55; }
.pd-step p::first-letter { text-transform:uppercase; }

/* implementation and status */
.pd-status { padding-bottom:var(--pd-gap); }
.pd-status-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:16px; margin-top:40px; }
.pd-panel { min-width:0; margin:0; padding:30px; border:0; border-radius:22px; background:var(--pd-card-bg); box-shadow:inset 0 0 0 1px var(--line); }
.pd-panel h3 { font:600 13px/1.3 var(--font-display); letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.pd-panel h3 + * { margin-top:12px; }
.pd-maturity .product-maturity { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin:0; }
.pd-maturity .product-maturity strong { font:600 24px/1.2 var(--font-display); letter-spacing:-.02em; }
.pd-maturity .product-pill { text-transform:capitalize; }
.pd-maturity p + p { margin-top:16px; color:var(--mute); font-size:16.5px; line-height:1.6; }
.pd-maturity .product-implementation { color:var(--ink); }
.pd-stack p { color:var(--ink); font-size:16px; }
.pd-stack ul + h3 { margin-top:26px; }
.pd-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.pd-chips li { padding:7px 12px; border-radius:999px; background:var(--hull-2); color:var(--ink); font:500 14px/1.2 var(--font-body); box-shadow:inset 0 0 0 1px var(--line); }
.pd-status .product-notice h3 { color:var(--ink); font:600 16px/1.4 var(--font-body); letter-spacing:0; text-transform:none; }
.pd-status .product-notice p { margin-top:8px; font-size:15px; }
.product-related { display:grid; align-content:start; gap:18px; font-size:16px; }
.product-related p { margin:0; }
.product-related strong { display:block; color:var(--mute); font:600 13px/1.3 var(--font-display); letter-spacing:.12em; text-transform:uppercase; }
.product-related-links { display:flex; flex-wrap:wrap; column-gap:20px; }
.product-related-links a,.product-related .tlink { display:inline-flex; align-items:center; min-height:44px; }

/* dark: cards and panels get the site's lit-edge glass finish */
:root:not([data-theme="light"]) :is(.pd-card,.pd-panel,.pd-who) { background:linear-gradient(90deg,transparent 12%,rgba(160,175,255,.45) 50%,transparent 88%) top/100% 1px no-repeat,linear-gradient(180deg,#11152b 0%,var(--hull) 70%); box-shadow:inset 0 0 0 1px rgba(178,190,255,.11); }
:root:not([data-theme="light"]) .pd-card:hover { box-shadow:inset 0 0 0 1px rgba(178,190,255,.22),0 0 60px -24px rgba(108,125,255,.45); }
:root:not([data-theme="light"]) .pv-frame.fx-slab { box-shadow:0 1px 1px rgba(0,0,0,.3),0 40px 100px -40px rgba(70,84,220,.45); }

@media (max-width:1000px) {
  .pd-hero { grid-template-columns:minmax(0,1fr); gap:22px; }
  .pd-lead .product-intro { max-width:680px; }
  .pd-cards .pd-card,.pd-cards[data-big] .pd-card:nth-child(n) { grid-column:span 3; }
  .pd-cards[data-count="3"] .pd-card:last-child,.pd-cards[data-count="5"] .pd-card:last-child,.pd-cards[data-count="7"] .pd-card:last-child,.pd-cards[data-count="9"] .pd-card:last-child { grid-column:1/-1; }
  .pd-overview-grid { grid-template-columns:minmax(0,1fr); }
  .pd-who { margin-top:0; }
  .pd-modules { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pd-modules li,.pd-modules li + li { padding:20px 20px 20px 0; border-left:0; border-bottom:1px solid var(--line); }
  .pd-modules li:nth-child(even) { padding-left:20px; border-left:1px solid var(--line); }
  .pd-glance-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pd-glance-list > div:nth-child(3) { padding-left:0; border-left:0; }
  .pd-glance-list > div:nth-child(n+3) { border-top:1px solid var(--line); }
  .pd-status-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:820px) {
  .pd-steps { grid-template-columns:minmax(0,1fr); gap:30px; margin-top:40px; }
  .pd-steps::before { top:22px; bottom:22px; left:22px; right:auto; width:1px; height:auto; background:linear-gradient(180deg,var(--pd-accent),var(--line)); }
  .pd-step { padding-left:68px; }
  .pd-step-n { position:absolute; left:0; top:-2px; }
  .pd-step-title { margin-top:8px; }
}
@media (max-width:700px) {
  .product-pages .product-hero { display:flex; flex-direction:column; padding-top:32px; }
  /* phone: name and headline, then the screens, then the intro and actions, so a screen is in the first view */
  .product-hero .pd-hero { display:contents; }
  .product-hero .pd-title,.product-hero .pd-lead { width:100%; padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px)); }
  .product-hero .pd-media { order:1; width:100%; margin-top:24px; }
  .product-hero .pd-lead { order:2; margin-top:28px; }
  .product-pages .product-hero h1 { margin-top:14px; font-size:clamp(40px,11vw,56px); }
  .product-pages .product-headline { margin-top:12px; font-size:20px; }
  .pd-lead .product-intro { font-size:16px; }
  .pd-actions { margin-top:20px; gap:8px 20px; }
  .pd-media { margin-top:32px; }
  .pv-frame.fx-slab { padding:6px; border-radius:20px; }
  .pv-frame.fx-slab .scr { border-radius:15px; }
  .pv[data-has-phone] .pv-stage { aspect-ratio:4/3; }
  .pv-bar { margin-top:14px; }
  .pv-caption { flex-direction:column; gap:4px; font-size:15px; }
  .pv-arrows { margin-top:0; }
  .pv-thumbs { gap:10px; margin:10px -16px 0; padding:6px 16px 8px; scroll-padding-inline:16px; }
  .pv-thumb { width:104px; border-radius:10px; }
  .pd-glance { margin-top:44px; }
  .pd-glance-list > div { padding:18px 14px 20px; }
  .pd-glance-list > div:nth-child(odd) { padding-left:0; }
  .pd-glance-list dd { font-size:15.5px; }
  .pd-glance-list dd > .product-pill + .pd-glance-sub { display:block; margin-top:8px; font-size:15.5px; }
  .pd-head-row h2 { font-size:clamp(30px,8.6vw,40px); }
  .pd-overview .product-prose { font-size:18px; }
  .pd-who { padding:24px 22px 18px; }
  .pd-modules { grid-template-columns:minmax(0,1fr); margin-top:28px; }
  .pd-modules li,.pd-modules li + li,.pd-modules li:nth-child(even) { flex-direction:row; gap:16px; padding:18px 0; border-left:0; }
  .pd-modules span { padding-top:4px; }
  .pd-cards { grid-template-columns:minmax(0,1fr); gap:12px; margin-top:28px; }
  .pd-cards .pd-card,.pd-cards[data-big] .pd-card:nth-child(n),.pd-cards[data-count] .pd-card:last-child { grid-column:auto; }
  .pd-card { padding:22px 22px 18px; }
  .pd-card-title { margin-top:16px; }
  .pd-how-lead { font-size:18px; }
  .pd-panel { padding:24px 22px; }
  .pd-maturity .product-maturity strong { font-size:21px; }
}
@media (prefers-reduced-motion:reduce) {
  .pv-slide,.pv-slide.is-on,.pv-thumb,.pv-thumb img,.pd-card { transition:none; }
}

/* Sticky product sub-header (Rohan 2026-10-29; product-header.js). Down past the hero: the main nav pill slides up and fades,
   and the sub-header moves up into its place, pinned at the top. Up: the nav comes back above it. Transform and opacity only. */
.product-pages .global-header .nav { transition:transform .42s var(--ease), opacity .3s var(--ease); }
.product-pages .local-header { transition:transform .42s var(--ease), box-shadow .3s var(--ease); }
.sub-pinned .product-pages .global-header .nav { transform:translate(-50%, calc(-100% - 28px)); opacity:0; }
.sub-pinned .product-pages .local-header { transform:translateY(-84px); box-shadow:0 12px 32px -20px rgba(0,0,0,.5); }
@media (prefers-reduced-motion:reduce) {
  .product-pages .global-header .nav, .product-pages .local-header { transition:none; }
}
/* the sub-header: "Products / <name>" on the left, section links (current one marked by product-header.js) and the CTA */
.local-crumb { display:flex; align-items:center; gap:10px; min-width:0; margin:0; }
.product-pages .local-crumb .local-title { max-width:none; color:var(--mute); font:500 15px/1.2 var(--font-body); letter-spacing:-.005em; }
.product-pages .local-crumb .local-title:hover { color:var(--ink); text-decoration:none; }
.local-sep { color:var(--line); color:color-mix(in srgb,var(--mute) 45%,transparent); font-size:15px; }
.local-name { overflow:hidden; color:var(--ink); font:700 18px/1.2 var(--font-display); letter-spacing:-.02em; white-space:nowrap; text-overflow:ellipsis; }
.product-pages .section-links a[aria-current="true"] { color:var(--ink); }
.product-pages .section-links a[aria-current="true"]::after { content:""; position:absolute; left:12px; right:12px; bottom:9px; height:2px; border-radius:2px; background:var(--pd-accent,var(--link)); }
.product-pages .section-links a { position:relative; }
/* In-page links land below both bars (the taller, unpinned case; on phone the sub-header has two rows). */
html:has(> body.product-pages) { scroll-padding-top:calc(env(safe-area-inset-top,0px) + 164px); }
@media (max-width:900px) {
  html:has(> body.product-pages) { scroll-padding-top:calc(env(safe-area-inset-top,0px) + 196px); }
  /* Phone and tablet: name and CTA on the first row, the section links as a compact, horizontally scrolling second row. */
  .product-pages .local-nav { flex-wrap:wrap; min-height:0; padding-top:6px; column-gap:12px; row-gap:0; }
  .product-pages .local-actions { display:contents; }
  .product-pages .local-crumb { order:0; flex:1 1 0; }
  .product-pages .product-local-cta { order:1; margin-left:auto; }
  .product-pages .section-links { order:2; display:flex; flex:1 0 100%; min-width:0; gap:2px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; padding-right:28px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); }
  .product-pages .section-links::-webkit-scrollbar { display:none; }
  .product-pages .section-links a { flex:none; min-height:40px; padding:0 10px; }
  .product-pages .section-links a:first-child { padding-left:0; }
  .product-pages .section-links a:first-child[aria-current="true"]::after { left:0; }
  .product-pages .section-links a[aria-current="true"]::after { bottom:6px; left:10px; right:10px; }
}
@media (max-width:420px) {
  .local-crumb .local-title,.local-sep { display:none; }
}