/* Product pages: Linear's pillar devices on V2 tokens. Lit stage, open-bottom windows, side fades, edge glint, command deck, status strip. */

/* pillar header row */
.pillar { padding: 128px 0; }
.pillar-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 20px; align-items: end; }
.pillar-head h2 { grid-column: 1 / span 6; }
.pillar-head .side { grid-column: 8 / span 5; }
.pillar-head .side p { color: var(--fg-3); font-size: 16px; line-height: 1.6; max-width: 40ch; }
.pillar-head .side p b { color: var(--fg-1); font-weight: 500; }
@media (max-width: 1024px) { .pillar { padding: 96px 0; } .pillar-head h2, .pillar-head .side { grid-column: 1 / -1; } }

/* the lit stage: a soft top-centre spotlight in an 8px frame with a fading hairline */
.stage2 { position: relative; margin-top: 64px; padding: 8px; border-radius: 20px; background: linear-gradient(#ffffff1f, #ffffff0a 40%, #ffffff05) border-box; }
.stage2-in { position: relative; height: 820px; border-radius: 14px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(64% 74% at 50% -10%, #4a4d53 0%, #2c2e33 26%, #17181b 56%, var(--bg) 92%),
    var(--bg); }
.stage2-in::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .18; mix-blend-mode: overlay; background-size: 256px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
/* the floor fade swallows the windows: solid page colour at the bottom, clear by half height */
.stage2-in::after { content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; background: linear-gradient(to top, var(--bg) 0 5%, transparent 52%); }
.stage2-cap { position: absolute; left: 40px; bottom: 36px; z-index: 9; max-width: 520px; }
.stage2-cap h3 { font-size: 15px; font-weight: 500; }
.stage2-cap p { margin-top: 4px; color: var(--fg-3); font-size: 15px; }
:root[data-theme="light"] .stage2-in { background: radial-gradient(60% 70% at 50% -8%, #ffffff 0%, #f1f1f3 40%, #e9e9ec 70%, var(--bg) 100%); }

/* windows: open at the bottom, rounded only on top, ringed, with a scroll-linked glint on the left edge */
.win { position: absolute; z-index: 2; border-radius: 12px 12px 0 0; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-3), 0 -1px 0 #ffffff0d, 0 30px 80px #00000066; overflow: hidden; font-size: 13px; color: var(--fg-1); }
:root[data-theme="light"] .win { background: #fff; box-shadow: inset 0 0 0 1px #00000014, 0 20px 60px #0000001a; }
.win.back { z-index: 1; filter: blur(var(--soft, 1.5px)) brightness(.78); }
.win-bar { height: 44px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-2); color: var(--fg-3); font-size: 12.5px; }
.win-bar b { color: var(--fg-1); font-weight: 500; }
.win-bar .r { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.glint { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; z-index: 3; pointer-events: none; background: #ffffff59; -webkit-mask-image: radial-gradient(100px 100px at 50% var(--gy, 30%), #000, transparent 70%); mask-image: radial-gradient(100px 100px at 50% var(--gy, 30%), #000, transparent 70%); }

/* side fades in the page colour: set --ft/--fr/--fb/--fl as "solid clear" percentages */
.fade { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--fc, var(--bg-1)) var(--ft0, 0%), transparent var(--ft1, 0%)),
    linear-gradient(to left, var(--fc, var(--bg-1)) var(--fr0, 0%), transparent var(--fr1, 0%)),
    linear-gradient(to top, var(--fc, var(--bg-1)) var(--fb0, 0%), transparent var(--fb1, 0%)),
    linear-gradient(to right, var(--fc, var(--bg-1)) var(--fl0, 0%), transparent var(--fl1, 0%)); }

/* placeholder rows: grey bars where real content would be, so the eye goes to the one complete card */
.ph { height: 8px; border-radius: 4px; background: var(--bg-3); }
.ph.s { width: 42%; } .ph.m { width: 64%; } .ph.l { width: 86%; }

/* feature grid cells reuse .fgrid from site.css; cell components sit centred and fade on their sides */
.cell-viz .comp { position: relative; width: 78%; max-width: 440px; }

/* command deck: three stacked boxes, the front one leaves forward and blurs */
.deck { position: relative; width: 420px; height: 150px; }
.deck .card { position: absolute; inset: 0; border-radius: 14px; padding: 16px 18px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3), 0 20px 40px #00000059; font-size: 13.5px; line-height: 1.5; color: var(--fg-2); transform-origin: 50% 100%; transition: transform var(--dur-swap) var(--ease-swap), opacity var(--dur-swap) var(--ease-swap), filter var(--dur-swap) var(--ease-swap); }
.deck .card[data-pos="0"] { transform: none; opacity: 1; z-index: 3; }
.deck .card[data-pos="1"] { transform: translateY(-14px) scale(.95); opacity: .7; z-index: 2; }
.deck .card[data-pos="2"] { transform: translateY(-26px) scale(.9); opacity: .35; z-index: 1; }
.deck .card[data-pos="out"] { transform: translateY(12px) scale(1.03); opacity: 0; filter: blur(4px); z-index: 4; }
.deck .card:not([data-pos="0"]) > * { opacity: 0; transition: opacity var(--dur-hover); }
.deck .card > * { transition: opacity var(--dur-enter) var(--ease-spring) .2s; }
.deck .card .who { display: flex; align-items: center; gap: 8px; color: var(--fg-3); font-size: 12px; margin-bottom: 8px; }
.deck .card .ft { position: absolute; left: 18px; right: 18px; bottom: 14px; display: flex; gap: 8px; align-items: center; color: var(--fg-3); font-size: 12px; }
.deck .card .ft .ap-btn { margin-left: auto; }

/* stepped status strip: icons 80px apart; neighbours shrink; only the centre names itself */
.strip { position: relative; width: 520px; height: 120px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.strip-track { position: absolute; left: 50%; top: 22px; display: flex; gap: 0; transition: transform var(--dur-swap) var(--ease-swap); }
.strip-i { width: 80px; display: flex; flex-direction: column; align-items: center; gap: 12px; transition: transform var(--dur-swap) var(--ease-swap), opacity var(--dur-swap) var(--ease-swap); }
.strip-i .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-3); color: var(--fg-3); }
.strip-i .ic svg { width: 18px; height: 18px; }
.strip-i > span:last-child { font-size: 12.5px; color: var(--fg-1); white-space: nowrap; opacity: 0; transition: opacity var(--dur-enter) var(--ease-spring); }
.strip-i.on > span:last-child { opacity: 1; }
.strip-i.on .ic { color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--fg-4); }
.strip-i.on .ic.cu { color: var(--cu); box-shadow: inset 0 0 0 1px var(--cu-line); background: var(--cu-tint); }
.strip-i.on .ic.ok { color: var(--ok); }

@media (max-width: 768px) { .stage2-in { height: 560px; } .stage2-cap { left: 20px; right: 20px; bottom: 20px; } .deck, .strip { width: 300px; } }