/* trade_canvas/static/assets/css/public-site.css
 *
 * The public site's look (design guide, "Public site": direction B "Bands"
 * with A's split hero, C7, founder 2026-10-08). Loaded by
 * templates/public/site/base.html; every class is `ps-` so nothing here can
 * reach the app. Words come from vault Specs/Messaging.md; this file only
 * decides how they look.
 *
 * Measurable rules ui-reviewer's check G enforces on <body data-design="public">:
 * one family (Nunito), six text sizes (12/14/16/20/28 + H1 32|48), one 48px
 * button size, purple only for actions, green/red only inside data.
 */

.ps {
  --ps-bg: #070b14;
  /* Bands and panels share the app's card colour (custom.css --ss-card, C43 + C44). */
  --ps-band: var(--ss-card);
  --ps-surface: var(--ss-card);
  --ps-line: rgba(255, 255, 255, 0.08);
  --ps-text: #e6edf3;
  --ps-text-2: #c8d4e1;
  --ps-muted: #a3b6c8;
  /* Accent list (Y24 brand purple): the only non-neutral colours outside data. */
  --ps-brand: #6f42c1;
  --ps-brand-hover: #7c4fd4;
  --ps-brand-light: #a98ff8;
  --ps-brand-focus: #c4b5fd;
  --ps-brand-ink: #f3efff;
  --ps-fs-12: 0.75rem;
  --ps-fs-14: 0.875rem;
  --ps-fs-16: 1rem;
  --ps-fs-20: 1.25rem;
  --ps-fs-28: 1.75rem;
  --ps-fs-h1: 2rem;
  position: relative;
  isolation: isolate;
  background: var(--ps-bg);
  color: var(--ps-text);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--ps-fs-16);
  line-height: 1.6;
  /* Bands are full width; nothing inside may widen the page (one scroll context). */
  overflow-x: clip;
}

@media (min-width: 992px) {
  .ps { --ps-fs-h1: 3rem; }
}

/* The tonal background (.ss-tonal-bg) lives in custom.css: the app uses it too (C30). */

/* The site frame's tokens (custom.css) are shared with the header, so their edges stay aligned (C73). */
.ps-wrap {
  width: min(var(--ss-site-content-max-width), 100% - 2 * var(--ss-site-gutter));
  margin-inline: auto;
}

/* ---------- Type ---------- */

/* The theme sets its own heading tracking and sizes; the public site resets them. */
.ps h1,
.ps h2,
.ps h3 {
  margin: 0;
  color: var(--ps-text);
  font-family: inherit;
  letter-spacing: normal;
  text-wrap: balance;
}

.ps p { margin: 0; }

.ps .ps-h1 {
  font-size: var(--ps-fs-h1);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.ps .ps-h2 {
  font-size: var(--ps-fs-28);
  font-weight: 700;
  line-height: 1.2;
}

.ps .ps-h3 {
  font-size: var(--ps-fs-20);
  font-weight: 700;
  line-height: 1.3;
}

.ps-lead {
  max-width: 60ch;
  color: var(--ps-text-2);
  font-size: var(--ps-fs-16);
}

@media (min-width: 992px) {
  .ps-lead {
    font-size: var(--ps-fs-20);
    line-height: 1.55;
  }
}

/* The lead's key words read at a glance: weight and the brighter text colour,
   never a size step (founder 2026-10-10, C44). Nunito 700 is already loaded. */
.ps-lead strong {
  font-weight: 700;
  color: var(--ps-text);
}

/* 60ch, the guide's lead width: at 52ch Home's two-sentence Risk line took three
   lines and pushed the risk map past a 1280x720 screen (C44, measured). */
.ps-line {
  max-width: 60ch;
  color: var(--ps-text-2);
  font-size: var(--ps-fs-16);
}

.ps-terms {
  color: var(--ps-text-2);
  font-size: var(--ps-fs-14);
}

.ps-proof {
  color: var(--ps-muted);
  font-size: var(--ps-fs-14);
}

/* ---------- Actions: one button size, purple only (Y24) ---------- */

.ps-cta {
  display: grid;
  gap: 12px;
}

.ps-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: var(--ps-fs-16);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.ps-btn:focus-visible {
  outline: 2px solid var(--ps-brand-focus);
  outline-offset: 2px;
}

.ps .ps-btn--primary {
  background: var(--ps-brand);
  color: #fff;
}

.ps .ps-btn--primary:hover {
  background: var(--ps-brand-hover);
  color: #fff;
}

.ps .ps-btn--secondary {
  background: rgba(111, 66, 193, 0.28);
  border-color: rgba(169, 143, 248, 0.8);
  color: var(--ps-brand-ink);
}

.ps .ps-btn--secondary:hover {
  background: rgba(111, 66, 193, 0.4);
  color: var(--ps-brand-ink);
}

/* Phones: the pair shares one row at the 44px touch size, so the hero stays short
   (founder 2026-10-10, C43; was stacked full width at 48px). */
@media (max-width: 575.98px) {
  .ps-cta { gap: 8px; }
  .ps-ctas { gap: 8px; flex-wrap: nowrap; }
  .ps-ctas .ps-btn {
    flex: 1 1 0;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: var(--ps-fs-14);
  }
}

.ps a.ps-link {
  color: var(--ps-brand-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ps a.ps-link:hover { color: var(--ps-brand-focus); }

/* ---------- Layout ---------- */

.ps-hero { padding-block: 40px 56px; }

@media (min-width: 992px) {
  .ps-hero { padding-block: 72px 88px; }
}

.ps-hero-copy {
  display: grid;
  gap: 16px;
  align-content: start;
  max-width: 640px;
}

/* The compact hero (C40, /features): the H1 and one line with the CTAs
   beside them from 992px, so the page's content starts on the first screen.
   A reading page whose hero is the H1 alone uses it too (/faq, C52, ruling 25). */
.ps-hero--compact { padding-block: 32px 28px; }

.ps-hero-row {
  display: grid;
  gap: 20px;
}

.ps-hero-cta {
  display: grid;
  gap: 12px;
}

/* The band right after it continues the hero rather than opening a section. */
.ps-hero--compact + .ps-band { padding-top: 32px; }

@media (min-width: 992px) {
  .ps-hero--compact { padding-block: 48px 40px; }

  .ps-hero-row {
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 56px;
  }

  .ps-hero--compact + .ps-band { padding-top: 40px; }
}

/* Phones: a tighter hero so the first screen reaches the content (Home's device
   showcase, the /features tour) (founder 2026-10-10, C43). */
@media (max-width: 575.98px) {
  .ps-hero { padding-block: 20px 40px; }
  .ps-hero-copy { gap: 12px; }
  .ps-hero--compact { padding-block: 20px 16px; }
  .ps-hero-row { gap: 12px; }
  .ps-hero-cta { gap: 8px; }
  .ps-hero--compact + .ps-band { padding-top: 20px; }
}

.ps-band { padding-block: 56px; }

.ps-band--tinted { background: var(--ps-band); }

@media (min-width: 992px) {
  .ps-band { padding-block: 88px; }
}

.ps-section-head {
  display: grid;
  gap: 10px;
  max-width: 640px;
  margin-bottom: 28px;
}

.ps-split {
  display: grid;
  gap: 28px;
}

@media (min-width: 992px) {
  .ps-split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: center;
  }

  .ps-split > .ps-section-head { margin-bottom: 0; }
}

/* Neutral dots, never green checks. */
.ps-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  color: var(--ps-text-2);
}

.ps-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 0.6em;
  border-radius: 50%;
  background: var(--ps-muted);
}

.ps-steps {
  display: grid;
  gap: 24px;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ps-step;
}

@media (min-width: 992px) {
  .ps-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }
}

/* Each step: its number in a small purple ring beside the title, the text
   under the title (founder 2026-10-08). Packed at the top, so steps sharing a
   row never spread their title and text apart. */
.ps-step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 6px;
  align-content: start;
  align-items: start;
  counter-increment: ps-step;
}

.ps-step::before {
  content: counter(ps-step);
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(169, 143, 248, 0.8);
  border-radius: 50%;
  color: var(--ps-brand-light);
  font-size: var(--ps-fs-14);
  font-weight: 700;
}

.ps-step h3 { align-self: center; }

.ps-step p { color: var(--ps-text-2); }

.ps-final {
  display: grid;
  gap: 16px;
  max-width: 640px;
}

/* Broker logos: one static row, no motion (C7: no looping belt). The files are
   one neutral grey, so no logo brings a brand hue onto the page. */
.ps-brokers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
  align-items: center;
  margin: 40px 0 0;
  padding: 40px 0 0;
  border-top: 1px solid var(--ps-line);
  list-style: none;
}

@media (min-width: 576px) {
  .ps-brokers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ps-brokers li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

/* The coverage line carries as much weight as the logos above it: it says
   they are examples of a much longer list (founder 2026-10-08). */
.ps .ps-brokers-note {
  margin-top: 28px;
  color: var(--ps-text-2);
  font-size: var(--ps-fs-16);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

/* Sized like the lead: 16 on phones, 20 from 992px. */
@media (min-width: 992px) {
  .ps .ps-brokers-note { font-size: var(--ps-fs-20); }
}

.ps-brokers img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- Product visuals on the band ---------- */

/* Charts sit directly on the band: the component's card frame goes, and its
   inner padding with it, so a chart's title lines up with the section text.
   The doubled .ps outranks the components' own inline styles. */
.ps .pop2-card,
.ps .snapshot-analytics-card,
.ps .snapshot-flow-stage-wrap {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.ps .pop2-card-head { border-bottom-color: var(--ps-line); }

.ps.ps .pop2-card-head,
.ps.ps .pop2-chart-wrap,
.ps.ps .today-hero,
.ps.ps .today-mover-list {
  padding-left: 0;
  padding-right: 0;
}

.ps.ps .portfolio-story {
  margin-left: 0;
  margin-right: 0;
}

.ps.ps .pop2-metric:nth-child(2n+1) { padding-left: 0; }
.ps.ps .pop2-metric:nth-child(2n) { padding-right: 0; }

/* The Performance chart grows with its width (583px tall at 1200px); one
   desktop height keeps the chart and its cards on one screen under the band's
   question (C2's head-and-chart-on-one-screen rule). */
@media (min-width: 768px) {
  .ps .ps-perf-visual .pop2-chart-wrap { height: 340px; }
  .ps .ps-perf-visual .pop2-chart-canvas {
    min-height: 0;
    height: 100% !important;
  }
}

/* Browsers that support it cross-fade between public pages (Motion: page
   transition <= 500ms); the chart's own morph went with /features/performance
   (dropped 2026-10-09, C3). */
@view-transition { navigation: auto; }

.ps .ps-perf-visual { view-transition-name: ps-perf-chart; }

::view-transition-group(ps-perf-chart) {
  animation-duration: 480ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 220ms; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- /features tour (C4) ---------- */

/* Phones (and no JS): every tab stacked, title, picture, highlights. */
.ps-tour { display: grid; gap: 56px; }

.ps-tour-panels { display: grid; gap: 56px; }

/* A link to /features#tour-risk (the old /features/risk redirects there)
   lands with the tab's label and title clear of the fixed site bar. */
.ps-tour-panel { display: grid; gap: 16px; scroll-margin-top: 88px; }

.ps-tour-head { display: grid; gap: 6px; }

/* The tab's §4 question, a kicker over its name. */
.ps .ps-tour-q {
  font-size: var(--ps-fs-12);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ps-muted);
}

.ps-tour-shot { display: grid; gap: 8px; margin: 0; }

.ps-tour-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.ps-tour-shot figcaption {
  font-size: var(--ps-fs-12);
  color: var(--ps-muted);
}

.ps-tour-list strong {
  display: block;
  color: var(--ps-text);
  font-weight: 700;
}

.ps-tour-list span { display: block; }

.ps .ps-tour-link { font-weight: 700; }

/* From 992px: one tab at a time, the picture beside its highlights. */
@media (min-width: 992px) {
  .ps-tour { gap: 32px; }

  .ps-tour-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--ps-line);
  }

  .ps-tour-tabs[hidden] { display: none; }

  .ps-tour-tab {
    padding: 10px 14px 12px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--ps-muted);
    font: inherit;
    font-size: var(--ps-fs-14);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .ps-tour-tab:hover { color: var(--ps-text); }

  .ps-tour-tab[aria-selected="true"] {
    color: var(--ps-text);
    border-bottom-color: var(--ps-brand-light);
  }

  .ps-tour-tab:focus-visible {
    outline: 2px solid var(--ps-brand-focus);
    outline-offset: 2px;
  }

  .ps-tour-panel {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas:
      ". shot"
      "head shot"
      "list shot"
      "link shot"
      ". shot";
    column-gap: 40px;
    row-gap: 16px;
  }

  .ps-tour-head { grid-area: head; }
  .ps-tour-shot { grid-area: shot; align-self: center; }
  .ps-tour-list { grid-area: list; }
  .ps-tour-link { grid-area: link; }

  /* Every panel shares one cell, so the tour keeps the tallest tab's height
     and nothing below it moves when the tab changes. */
  .ps-tour-panels { gap: 0; }

  /* ... and on desktop with the tab row above it in view too. */
  .ps-tour-panel { grid-area: 1 / 1; scroll-margin-top: 152px; }

  .ps-tour-panel.is-inactive { visibility: hidden; }
}

/* ---------- Trust band and /security (C3) ---------- */

/* The short trust band (C3): heading, logos, coverage line and a link to
   /security; the logos sit under the heading without the list's divider. */
.ps-trust-band .ps-brokers {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.ps .ps-trust-link {
  margin: 28px 0 0;
  text-align: center;
}

/* One axis: the band's head is centred like the logos and the link under it. */
.ps-trust-band .ps-section-head {
  margin-inline: auto;
  text-align: center;
}

.ps-trust-band .ps-line { margin-inline: auto; }

/* /security: the full list at a readable measure. */
.ps-trust-facts { max-width: 720px; }

.ps .ps-trust-more { margin-top: 28px; }

/* /faq: question and answer always open, at the same readable measure as
   /security's list; spacing alone separates the items. */
.ps-faq {
  display: grid;
  gap: 32px;
  max-width: 720px;
}

.ps-faq-item {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.ps-faq-a { color: var(--ps-text-2); }

/* ---------- Pricing (design guide, Pricing; C5) ---------- */

/* The title beside the device picture from 992px, the offer panel under both.
   Phones: title, devices, offer. */
.ps-pricing {
  display: grid;
  gap: 20px;
}

/* Phones keep that order but tighten it so Start Free Trial ends on the first
   screen of an iPhone Safari with its toolbars showing (C60, 2026-10-12, measured
   in WebKit: bottom 640 of 664 at 390, 630 of 667 at 375, 628 of 739 at 430).
   The picture is narrowed here only: Home and /login show it full width. */
@media (max-width: 575.98px) {
  .ps-pricing { gap: 8px; }
  .ps-pricing .ps-offer { padding: 16px; }
  .ps-pricing .ps-offer-top { gap: 8px; }

  .ps-pricing-devices {
    width: 84%;
    margin-inline: auto;
  }
}

@media (min-width: 992px) {
  .ps-pricing {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 56px;
    row-gap: 48px;
    align-items: center;
  }

  .ps-pricing > .ps-offer { grid-column: 1 / -1; }
}

/* The one raised object on the public site: no border, no shadow. */
.ps-offer {
  display: grid;
  gap: 24px;
  padding: 24px;
  border-radius: 16px;
  background: var(--ps-surface);
}

@media (min-width: 992px) {
  .ps-offer { padding: 40px; }
}

.ps-offer-top {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.ps-offer-top > .ps-cta { justify-self: stretch; }

/* The offer panel is narrower than the page, so on phones half-width buttons would
   wrap "View Demo Portfolio" onto two lines: the pair stacks here (C43 review). */
@media (max-width: 575.98px) {
  .ps-offer .ps-ctas { flex-wrap: wrap; }
  .ps-offer .ps-ctas .ps-btn { flex: 1 1 100%; }
}

.ps-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.ps .ps-price-amount {
  font-size: var(--ps-fs-h1);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ps-price-unit {
  color: var(--ps-text-2);
  font-size: var(--ps-fs-20);
}

.ps-offer-status {
  color: var(--ps-text);
  font-weight: 700;
}

.ps-offer-groups {
  display: grid;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--ps-line);
}

@media (min-width: 768px) {
  .ps-offer-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 40px;
  }
}

.ps .ps-offer-groups h3 {
  margin-bottom: 8px;
  font-size: var(--ps-fs-16);
  font-weight: 700;
  line-height: 1.4;
}

.ps-offer-groups .ps-list { gap: 4px; }

.ps-offer-support {
  color: var(--ps-muted);
  font-size: var(--ps-fs-14);
}

/* ---------- Device showcase (design guide, Device showcase; founder 2026-10-09) ----------
   One picture that scales as a whole (container units): a monitor at the back,
   a tablet and a phone standing in front of it on one baseline. Each device is
   a graphite body a step lighter than the page with a 1px light edge, so it
   reads as hardware without shadows or glow. Screens are real captures of the
   Demo (templates/public/site/devices.html). */
.ps-devices {
  --dv-body: #1d2636;
  --dv-edge: rgba(255, 255, 255, 0.2);
  --dv-ink: #05080f;
  --dv-metal: #2a3344;
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 53.5;
  container-type: inline-size;
}

.ps-devices > div { position: absolute; }

.ps-dv-screen {
  overflow: hidden;
  background: var(--ps-bg);
}

.ps-dv-screen img {
  display: block;
  width: 100%;
  height: auto;
}

.ps-dv-monitor {
  left: 15.8%;
  bottom: 0;
  width: 73.7cqw;
}

.ps-dv-panel {
  position: relative;
  padding: 1.3cqw;
  border: 1px solid var(--dv-edge);
  border-radius: 1.2cqw;
  background: var(--dv-body);
}

/* Camera. */
.ps-dv-panel::before {
  content: "";
  position: absolute;
  top: 0.42cqw;
  left: 50%;
  width: 0.45cqw;
  height: 0.45cqw;
  border-radius: 50%;
  background: var(--dv-ink);
  transform: translateX(-50%);
}

.ps-dv-panel .ps-dv-screen { border-radius: 0.3cqw; }

.ps-dv-neck {
  width: 12cqw;
  height: 4.6cqw;
  margin: 0 auto;
  border-right: 1px solid var(--dv-edge);
  border-left: 1px solid var(--dv-edge);
  background: linear-gradient(90deg, #1a2130, #2c3547 50%, #1a2130);
}

.ps-dv-foot {
  width: 22cqw;
  height: 1.1cqw;
  margin: 0 auto;
  border: 1px solid var(--dv-edge);
  border-radius: 0.5cqw 0.5cqw 0.2cqw 0.2cqw;
  background: var(--dv-metal);
}

.ps-dv-tablet {
  left: 0;
  bottom: 0;
  width: 27.4cqw;
  padding: 1.3cqw;
  border: 1px solid var(--dv-edge);
  border-radius: 2.6cqw;
  background: var(--dv-body);
}

/* Front camera, then the top button. */
.ps-dv-tablet::before {
  content: "";
  position: absolute;
  top: 0.45cqw;
  left: 50%;
  width: 0.4cqw;
  height: 0.4cqw;
  border-radius: 50%;
  background: var(--dv-ink);
  transform: translateX(-50%);
}

.ps-dv-tablet::after {
  content: "";
  position: absolute;
  top: -0.35cqw;
  right: 3.4cqw;
  width: 3.2cqw;
  height: 0.35cqw;
  border-radius: 0.2cqw 0.2cqw 0 0;
  background: var(--dv-metal);
}

.ps-dv-tablet .ps-dv-screen { border-radius: 1.3cqw; }

.ps-dv-phone {
  right: 0;
  bottom: 0;
  width: 15.8cqw;
  padding: 0.65cqw;
  border: 1px solid var(--dv-edge);
  border-radius: 2.9cqw;
  background: var(--dv-body);
}

.ps-dv-phone .ps-dv-screen {
  box-sizing: border-box;
  aspect-ratio: 360 / 779;
  /* A status-bar strip under the island, as on a real phone, so the island
     never sits on the app's own header; the capture's bottom edge crops instead. */
  padding-top: 3cqw;
  border-radius: 2.25cqw;
}

.ps-dv-island {
  position: absolute;
  z-index: 1;
  top: 1.2cqw;
  left: 50%;
  width: 4.4cqw;
  height: 1.2cqw;
  border-radius: 999px;
  background: var(--dv-ink);
  transform: translateX(-50%);
}

.ps-dv-key {
  position: absolute;
  width: 0.3cqw;
  background: var(--dv-metal);
}

.ps-dv-key--left {
  left: -0.3cqw;
  top: 18%;
  height: 3.6cqw;
  border-radius: 0.2cqw 0 0 0.2cqw;
}

.ps-dv-key--lower { top: 32%; }

.ps-dv-key--right {
  right: -0.3cqw;
  top: 24%;
  height: 5.2cqw;
  border-radius: 0 0.2cqw 0.2cqw 0;
}

/* Phones: in one row the phone would be about 55px wide, so the devices stack
   in depth instead: the monitor across the top, the tablet and phone in front,
   overlapping its lower half to keep the picture short. On /pricing that alone
   left the trial button below the first screen; the page's own phone rules
   (Pricing, C60) bring it up. */
@media (max-width: 767.98px) {
  .ps-devices { aspect-ratio: 100 / 72; }

  .ps-dv-monitor {
    top: 0;
    bottom: auto;
    left: 11%;
    width: 78cqw;
  }

  .ps-dv-tablet {
    left: 3%;
    width: 35cqw;
    padding: 1.9cqw;
    border-radius: 3.8cqw;
  }

  .ps-dv-tablet .ps-dv-screen { border-radius: 1.9cqw; }

  .ps-dv-phone {
    right: 4%;
    width: 22.5cqw;
    padding: 1.1cqw;
    border-radius: 4.8cqw;
  }

  .ps-dv-phone .ps-dv-screen {
    padding-top: 4.8cqw;
    border-radius: 3.7cqw;
  }

  .ps-dv-island {
    top: 2cqw;
    width: 7.2cqw;
    height: 2cqw;
  }

  .ps-dv-key { width: 0.5cqw; }
  .ps-dv-key--left { left: -0.5cqw; height: 5.8cqw; }
  .ps-dv-key--right { right: -0.5cqw; height: 8.4cqw; }
}

/* ---------- Home chart panels: windows into the Demo (C70, founder 2026-10-15) ----------
   Ad visitors on phones tapped Home's charts because they look like the app,
   and nothing happened. Each of Home's charts now says what a tap does before
   the tap: it sits in a panel one step lighter than its band (background before
   border: no frame), under a bar naming the Demo tab it opens. The bar is a
   stretched link (public/site/macros.html demo_visual), so the whole panel
   opens that tab; only Today's mover rows are links of their own. */

.ps-demo-panel {
  /* The bar's stretched-link cover fills the panel. Isolated, so the cover and
     the rows above it stack inside the panel, never against the page's nav. */
  position: relative;
  isolation: isolate;
  padding-bottom: 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  transition: background-color 0.15s ease;
}

/* The bar stays unpositioned: a positioned bar would shrink the cover to itself. */
.ps .ps-demo-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px 14px 0 0;
  color: var(--ps-muted);
  font-size: var(--ps-fs-14);
  line-height: 1.4;
  text-decoration: none;
}

.ps-demo-panel__label {
  min-width: 0;
}

.ps-demo-panel__open {
  flex: none;
  color: var(--ps-brand-light);
  font-weight: 600;
  white-space: nowrap;
}

/* Hover and keyboard focus answer for the whole panel: one step lighter, and
   the site's focus ring around it. No glow, no movement. :has() keys both to
   the bar (its cover included), so hovering a mover row lights only that row. */
.ps-demo-panel:has(.ps-demo-panel__bar:hover),
.ps-demo-panel:has(.ps-demo-panel__bar:focus-visible) {
  background: rgba(255, 255, 255, 0.055);
}

.ps-demo-panel:has(.ps-demo-panel__bar:hover) .ps-demo-panel__label { color: var(--ps-text-2); }
.ps-demo-panel:has(.ps-demo-panel__bar:hover) .ps-demo-panel__open { color: var(--ps-brand-focus); }

/* The focused link changes too, not only the ring around its panel: its label
   and "Open" brighten as on hover (ui-reviewer W: visible focus on the element). */
.ps .ps-demo-panel__bar:focus-visible { color: var(--ps-text-2); }
.ps .ps-demo-panel__bar:focus-visible .ps-demo-panel__open { color: var(--ps-brand-focus); }

/* Without :has() the ring falls back to the bar itself. */
.ps .ps-demo-panel__bar:focus-visible {
  outline: 2px solid var(--ps-brand-focus);
  outline-offset: -2px;
}

@supports selector(:has(a)) {
  .ps .ps-demo-panel__bar:focus-visible { outline: none; }

  .ps-demo-panel:has(.ps-demo-panel__bar:focus-visible) {
    outline: 2px solid var(--ps-brand-focus);
    outline-offset: 2px;
  }
}

/* Each chart card keeps its own layers (Today's value over its sparkline, the
   maps' overlays) inside itself, so none can rise over the bar's cover. The
   movers' card is left open so its rows can. */
.ps-demo-panel .pop2-card:not(.today-movers-card),
.ps-demo-panel .snapshot-flow-stage-wrap {
  isolation: isolate;
}

/* Today's mover rows open their holding in the Demo's Positions tab, so they
   sit above the cover that opens the panel's tab. */
.ps-demo-panel a.today-mover {
  position: relative;
  z-index: 2;
}

/* On the band a chart's padding is zeroed so its title lines up with the
   section text (Product visuals, above); inside a panel it lines up with the
   bar's label instead. */
.ps.ps .ps-demo-panel .pop2-card-head,
.ps.ps .ps-demo-panel .pop2-chart-wrap,
.ps.ps .ps-demo-panel .today-hero,
.ps.ps .ps-demo-panel .today-mover {
  padding-left: 16px;
  padding-right: 16px;
}

/* The bar is the panel's one divider: a chart title under it (Performance's
   "Time-Weighted Return") keeps no rule of its own, and the risk map drops the
   gaps it keeps for the Risk tab's controls, which Home hides. */
.ps .ps-demo-panel .pop2-card-head { border-bottom: 0; }

.ps .ps-demo-panel .snapshot-analytics-shell {
  margin-top: 0;
  padding: 16px 16px 8px;
}

.ps .ps-demo-panel .snapshot-analytics-chart-stage { margin-top: 0; }