/* Homepage product chooser, right under the hero (2026-10-16).
   One framed panel, laid out like Salesforce's product tour: a single row of pill tabs along the top (all ten tools, with
   arrows that appear only when they do not all fit), and the demo inside the same frame. Ours adds a practice-area list
   down the left, so every example matches the visitor's kind of law. Built with the homepage's tokens: graphite, a gold
   hairline for the selected tab, one easing, hover zoom through `scale` so it never fights the reveal transform. */
.pv { position: relative; padding: 5rem 0 5.5rem; overflow: hidden; }
.pv::before { content: ''; position: absolute; left: 50%; top: 38%; width: min(1300px, 94vw); height: 700px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(201,168,76,.12), transparent 72%); pointer-events: none; }
.pv .wrap { position: relative; }
.pv-shell { max-width: 1340px; margin: 0 auto; }
.pv .sec-header { margin-bottom: 2.4rem; }

/* the frame */
.pv-frame { position: relative; border: 1px solid rgba(255,255,255,.11); border-radius: 30px; padding: 1.1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 50px 140px -50px rgba(201,168,76,.22), 0 30px 80px -30px rgba(0,0,0,.6); }
.pv-top { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }

/* the pill row: one row that slides so the chosen pill sits in the middle (script scrolls it), edges fade out */
.pv-tools { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: .45rem; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; touch-action: pan-x; padding: .3rem 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); }
.pv-tools::-webkit-scrollbar { display: none; }
.pv-sep { flex: none; width: 1px; height: 22px; margin: 0 .35rem; background: rgba(255,255,255,.14); }
.pv-tool { flex: none; display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; font: inherit; font-size: .9rem; font-weight: 500; letter-spacing: -.005em; color: #a1a1a6; cursor: pointer;
  background: transparent; border: 1px solid rgba(255,255,255,.1); border-radius: 980px; padding: .66rem 1.1rem; scale: 1;
  transition: scale .6s cubic-bezier(.4,0,.2,1), border-color .35s, background .45s, color .3s; }
.pv-tool .pv-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: #6e6e73; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.pv-tool:hover { scale: 1.02; color: #f5f5f7; border-color: rgba(255,255,255,.22); }
.pv-tool[aria-selected="true"] { color: #f5f5f7; border-color: rgba(232,196,106,.55); background: linear-gradient(90deg, rgba(201,168,76,.16), rgba(201,168,76,.05)); }
.pv-tool[aria-selected="true"] .pv-ic { stroke: var(--gold2); }

/* previous / next / pause, and the button to the full platform */
.pv-ctl { flex: none; display: flex; gap: .45rem; }
.pv-arrow { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer; color: #e4e4e7;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); transition: background .3s, border-color .3s; }
.pv-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pv-arrow:hover { background: rgba(201,168,76,.16); border-color: rgba(201,168,76,.55); }
.pv-pp .i-play { display: none; fill: currentColor; stroke-width: 1.2; }
.pv-pp.paused .i-pause { display: none; }
.pv-pp.paused .i-play { display: block; }
.pv-cta { flex: none; display: inline-flex; align-items: center; font-size: .85rem; font-weight: 700; color: #1a1303; text-decoration: none; padding: .7rem 1.25rem; border-radius: 980px;
  background: linear-gradient(135deg, var(--gold), var(--gold2) 55%, var(--gold)); transition: filter .3s, scale .6s cubic-bezier(.4,0,.2,1); scale: 1; }
.pv-cta:hover { filter: brightness(1.08); scale: 1.03; }
.pv-tool:focus-visible, .pv-area:focus-visible, .pv-link:focus-visible, .pv-arrow:focus-visible, .pv-cta:focus-visible { outline: 2px solid rgba(232,196,106,.9); outline-offset: 2px; }

/* practice areas + the window, inside the frame */
.pv-grid { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.pv-areas { padding: .2rem 0 .2rem .35rem; }
.pv-areas-label { margin: 0 0 .8rem .15rem; font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.pv-area-list { display: flex; flex-direction: column; }
.pv-area { display: block; width: 100%; text-align: left; font: inherit; font-size: .92rem; line-height: 1.35; color: #a1a1a6; background: none; border: 0; cursor: pointer;
  border-left: 2px solid rgba(255,255,255,.1); border-radius: 0 12px 12px 0; padding: .62rem .9rem;
  transition: color .3s, border-color .3s, background .4s; }
.pv-area:hover { color: #f5f5f7; }
.pv-area[aria-selected="true"] { color: #f5f5f7; font-weight: 600; border-left-color: var(--gold2); background: linear-gradient(90deg, rgba(201,168,76,.14), transparent); }
.pv-stage { min-width: 0; }
.pv-stage .dm { margin: 0; }
.pv-stage .dm-cap { margin: .75rem .3rem .1rem; text-align: center; }

/* under the frame */
.pv-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.4rem; margin: 1rem .6rem 0; }
.pv-now { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .82rem; color: #a1a1a6; }
.pv-now b { color: #f5f5f7; font-weight: 600; }
.pv-plan { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold2); border: 1px solid rgba(201,168,76,.4); border-radius: 980px; padding: .15rem .55rem; }
.pv-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.pv-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 600; color: var(--gold2); text-decoration: none; }
.pv-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s cubic-bezier(.4,0,.2,1); }
.pv-link:hover svg { transform: translateX(3px); }

/* tablet and phone: the area list becomes a row of chips above the window */
@media (max-width: 1060px) {
  .pv-frame { border-radius: 24px; padding: .8rem; }
  .pv-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .pv-areas { min-width: 0; padding: 0; }
  .pv-areas-label { margin-left: .2rem; }
  .pv-area-list { flex-direction: row; overflow-x: auto; gap: .5rem; scrollbar-width: none; touch-action: pan-x; padding-bottom: .2rem; }
  .pv-area-list::-webkit-scrollbar { display: none; }
  .pv-area { width: auto; flex: none; white-space: nowrap; border: 1px solid #2a2a30; border-radius: 980px; padding: .5rem .95rem; font-size: .85rem; }
  .pv-area[aria-selected="true"] { border-color: rgba(201,168,76,.6); background: rgba(201,168,76,.1); }
}
@media (max-width: 640px) {
  .pv { padding: 3.5rem 0 4rem; }
  .pv .sec-header { margin-bottom: 1.8rem; }
  .pv-frame { padding: .55rem; border-radius: 20px; }
  .pv-top { margin-bottom: .7rem; gap: .5rem; }
  .pv-ctl { gap: .35rem; }
  .pv-arrow { width: 36px; height: 36px; }
  .pv-cta { display: none; }
  .pv-tools { padding: .3rem 14px; }
  .pv-foot { flex-direction: column; align-items: flex-start; margin-left: .2rem; margin-right: .2rem; }
}
@media (prefers-reduced-motion: reduce) { .pv-tool, .pv-link svg { transition: none; } .pv-tool:hover { scale: 1; } }

/* the demo says it is a sample once, in the caption under the window; no second label inside it */
.pv .dm-sample { display: none; }

/* Choose a tool: demo outputs dark, matching the real app */
.pv .dm-paper { background:#1c1c21; color:#ecebe5; border:1px solid rgba(255,255,255,.08); }
.pv .dm-paper p { color:#e6e4dd; }
.pv .dm-paper b { color:#e8c46a; }
.pv .dm-paper .dm-re b, .pv .dm-letterhead b { color:inherit; }
.pv .dm-paper .dm-sig { color:#a1a1a6; }
.pv .dm-site { background:#18181c; border:1px solid rgba(255,255,255,.08); }
.pv .dm-note-ai { color:#a1a1a6; background:#202026; }
.pv .dm-site .dm-ma { background:#26262d; color:#ecebe5; border-color:rgba(255,255,255,.1); }
.pv .dm-site .dm-mu { background:#c9a84c; color:#14110a; border-color:#c9a84c; }
.pv .dm-site .dm-inbar { background:#202026; }
.pv .dm-site .dm-field { background:#131317; color:#ecebe5; border-color:rgba(255,255,255,.14); }
.pv .wd-doc { background:#18181c; color:#ecebe5; border:1px solid rgba(255,255,255,.08); }
.pv .wd-doc del { color:#f4a09b; background:rgba(248,113,113,.12); }
.pv .wd-doc ins { color:#7fe0b0; background:rgba(111,239,184,.1); }
.pv .wd-c { background:rgba(201,168,76,.12); color:#e8d9a8; }