/* ============================================================
   PUBLIC SHELL - Component library for the public (marketing) area.
   Prefix "ps-", loaded after bootstrap.min.css.
   Reference markup: templates/testing/examples-public.html
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand palette */
  --ps-brand:       #004eec;
  --ps-brand-rgb:   0, 78, 236;
  --ps-brand-dark:  #0040c4;
  --ps-brand-tint:  #eaf0ff;
  --ps-accent:      #b734b7;
  --ps-accent-rgb:  183, 52, 183;
  --ps-accent-tint: #fbeafb;
  --ps-success:     #1f9d2c;
  --ps-success-rgb: 31, 157, 44;
  --ps-success-tint:#e9fbec;
  --ps-warning:     #b47c05;
  --ps-warning-tint:#fff6e0;
  --ps-danger:      #d22d2d;
  --ps-danger-rgb:  210, 45, 45;
  --ps-danger-tint: #fdecec;

  /* Neutrals */
  --ps-ink:         #0a1628;
  --ps-ink-soft:    #33415a;
  --ps-muted:       #64748b;
  --ps-line:        #e4e9f2;
  --ps-surface:     #ffffff;
  --ps-bg:          #ffffff;
  --ps-bg-soft:     #f5f8fd;
  --ps-dark:        #060e1d;
  --ps-dark-soft:   #101c33;

  /* Radii */
  --ps-r-xs:   10px;
  --ps-r-sm:   14px;
  --ps-r:      20px;
  --ps-r-lg:   28px;
  --ps-r-xl:   36px;
  --ps-r-pill: 999px;

  /* Elevation */
  --ps-shadow-xs: 0 1px 2px rgba(10, 22, 40, .06);
  --ps-shadow-sm: 0 4px 16px rgba(10, 22, 40, .06);
  --ps-shadow-md: 0 12px 32px rgba(10, 22, 40, .09);
  --ps-shadow-lg: 0 24px 64px rgba(10, 22, 40, .14);
  --ps-shadow-brand: 0 12px 30px rgba(var(--ps-brand-rgb), .28);

  /* Fluid type scale */
  --ps-fs-display: clamp(2.375rem, 1.55rem + 4.1vw, 4.5rem);
  --ps-fs-h1:      clamp(2rem,     1.45rem + 2.7vw, 3.25rem);
  --ps-fs-h2:      clamp(1.625rem, 1.3rem  + 1.7vw, 2.5rem);
  --ps-fs-h3:      clamp(1.25rem,  1.1rem  + 0.8vw, 1.75rem);
  --ps-fs-h4:      clamp(1.0625rem,1rem    + 0.4vw, 1.25rem);
  --ps-fs-lead:    clamp(1.0625rem,0.98rem + 0.5vw, 1.3125rem);
  --ps-fs-body:    1rem;
  --ps-fs-sm:      0.9375rem;
  --ps-fs-xs:      0.8125rem;

  /* Fluid spacing */
  --ps-section-y:  clamp(3.5rem, 2rem + 6vw, 7rem);
  --ps-gap-xs:     0.5rem;
  --ps-gap-sm:     0.75rem;
  --ps-gap:        1rem;
  --ps-gap-md:     1.5rem;
  --ps-gap-lg:     2rem;
  --ps-gap-xl:     3rem;

  /* Layout */
  --ps-container:  1200px;
  --ps-container-pad: clamp(1.15rem, 0.6rem + 2.2vw, 2.5rem);

  /* Fixed header */
  --ps-header-h:         76px;
  --ps-header-h-compact: 58px;
  --ps-header-z:         900;

  /* Motion */
  --ps-ease: cubic-bezier(.2, .8, .3, 1);
}

@media (min-width: 992px) {
  :root {
    --ps-header-h:         92px;
    --ps-header-h-compact: 64px;
  }
}


/* ============================================================
   2. BASE & LAYOUT PRIMITIVES
   ============================================================ */

.ps-page {
  margin: 0;
  background: var(--ps-bg);
  color: var(--ps-ink);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: var(--ps-fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ps-page img { max-width: 100%; }

.ps-container {
  width: 100%;
  max-width: var(--ps-container);
  margin-inline: auto;
  padding-inline: var(--ps-container-pad);
}
.ps-container-narrow { max-width: 860px; }
.ps-container-wide   { max-width: 1400px; }

.ps-section {
  position: relative;
  padding-block: var(--ps-section-y);
}
.ps-section-sm   { padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
.ps-section-flush-top    { padding-top: 0; }
.ps-section-flush-bottom { padding-bottom: 0; }
.ps-section-soft { background: var(--ps-bg-soft); }
.ps-section-tint { background: linear-gradient(180deg, var(--ps-brand-tint), var(--ps-bg)); }
.ps-section-dark {
  background: var(--ps-dark);
  color: rgba(255, 255, 255, .78);
}

/* Section intro block (eyebrow + heading + lead) */
.ps-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--ps-gap-sm);
  margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3.25rem);
  max-width: 62ch;
}
.ps-section-head-center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

/* Generic vertical stack */
.ps-stack    { display: flex; flex-direction: column; gap: var(--ps-gap); }
.ps-stack-sm { gap: var(--ps-gap-sm); }
.ps-stack-md { gap: var(--ps-gap-md); }
.ps-stack-lg { gap: var(--ps-gap-lg); }

/* Horizontal cluster that wraps on small screens */
.ps-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ps-gap);
}
.ps-cluster-center { justify-content: center; }

/* Wrapper that optically aligns inline SVG icons with text */
.ps-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

.ps-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--ps-fs-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ps-brand);
  margin: 0;
}
.ps-eyebrow-dot::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.ps-eyebrow-accent { color: var(--ps-accent); }
.ps-eyebrow-invert { color: rgba(255, 255, 255, .72); }

.ps-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--ps-r-pill);
  border: 1px solid rgba(var(--ps-brand-rgb), .18);
  background: var(--ps-brand-tint);
  color: var(--ps-brand);
  font-size: var(--ps-fs-xs);
  font-weight: 700;
  line-height: 1.4;
}
.ps-badge-accent  { background: var(--ps-accent-tint); border-color: rgba(var(--ps-accent-rgb), .2); color: var(--ps-accent); }
.ps-badge-success { background: var(--ps-success-tint); border-color: rgba(31, 157, 44, .22); color: var(--ps-success); }
.ps-badge-glass {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .24);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Headline scale */
.ps-display, .ps-h1, .ps-h2, .ps-h3, .ps-h4 {
  margin: 0;
  color: var(--ps-ink);
  font-weight: 800;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.ps-display { font-size: var(--ps-fs-display); line-height: 1.04; font-weight: 900; letter-spacing: -.035em; }
.ps-h1      { font-size: var(--ps-fs-h1);      line-height: 1.1; }
.ps-h2      { font-size: var(--ps-fs-h2);      line-height: 1.15; }
.ps-h3      { font-size: var(--ps-fs-h3);      line-height: 1.25; letter-spacing: -.015em; }
.ps-h4      { font-size: var(--ps-fs-h4);      line-height: 1.35; letter-spacing: -.01em; font-weight: 700; }

.ps-lead  { margin: 0; font-size: var(--ps-fs-lead); line-height: 1.55; color: var(--ps-ink-soft); font-weight: 400; }
.ps-body  { margin: 0; font-size: var(--ps-fs-body); line-height: 1.7;  color: var(--ps-ink-soft); }
.ps-small { margin: 0; font-size: var(--ps-fs-sm);   line-height: 1.6;  color: var(--ps-muted); }
.ps-caption {
  margin: 0;
  font-size: var(--ps-fs-xs); line-height: 1.5;
  color: var(--ps-muted); font-weight: 600;
  letter-spacing: .01em;
}
/* Caps the line length of long paragraphs */
.ps-measure { max-width: 62ch; }
.ps-measure-narrow { max-width: 46ch; }

.ps-text-gradient {
  background: linear-gradient(100deg, var(--ps-brand) 10%, var(--ps-accent) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Marker sits behind the glyphs so the text stays readable */
.ps-text-mark {
  background: linear-gradient(180deg, transparent 58%, rgba(var(--ps-accent-rgb), .22) 58%);
  padding-inline: .1em;
}
.ps-text-underline {
  box-shadow: inset 0 -.14em 0 rgba(var(--ps-brand-rgb), .3);
}

.ps-text-brand   { color: var(--ps-brand); }
.ps-text-accent  { color: var(--ps-accent); }
.ps-text-muted   { color: var(--ps-muted); }
.ps-text-invert  { color: #fff; }
.ps-text-invert-soft { color: rgba(255, 255, 255, .74); }

.ps-text-center { text-align: center; }
.ps-text-start  { text-align: left; }

.ps-link {
  color: var(--ps-brand);
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .2s var(--ps-ease), color .2s ease;
}
.ps-link:hover { color: var(--ps-brand-dark); }
.ps-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--ps-brand);
  font-weight: 700;
  font-size: var(--ps-fs-sm);
  text-decoration: none;
}
.ps-link-arrow .ps-icon { transition: transform .2s var(--ps-ease); }

.ps-list-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ps-gap-sm);
}
.ps-list-check li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: var(--ps-fs-sm);
  color: var(--ps-ink-soft);
}
.ps-list-check .ps-icon { color: var(--ps-success); margin-top: .22em; }
.ps-list-check-inline { flex-direction: row; flex-wrap: wrap; gap: var(--ps-gap) var(--ps-gap-md); }

.ps-quote {
  margin: 0;
  padding-left: var(--ps-gap-md);
  border-left: 3px solid var(--ps-brand);
  font-size: var(--ps-fs-h4);
  line-height: 1.5;
  font-weight: 600;
  color: var(--ps-ink);
}
.ps-quote-cite {
  display: block;
  margin-top: .6rem;
  font-size: var(--ps-fs-xs);
  font-weight: 700;
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ps-muted);
}

.ps-section-dark .ps-display,
.ps-section-dark .ps-h1,
.ps-section-dark .ps-h2,
.ps-section-dark .ps-h3,
.ps-section-dark .ps-h4,
.ps-section-dark .ps-quote { color: #fff; }
.ps-section-dark .ps-lead,
.ps-section-dark .ps-body,
.ps-section-dark .ps-list-check li { color: rgba(255, 255, 255, .74); }
.ps-section-dark .ps-small,
.ps-section-dark .ps-caption { color: rgba(255, 255, 255, .55); }


/* ============================================================
   4. BUTTONS
   ============================================================ */
.ps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .8rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--ps-r-pill);
  font-family: inherit;
  font-size: var(--ps-fs-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s var(--ps-ease), box-shadow .22s var(--ps-ease),
              background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ps-btn:active { transform: translateY(0) scale(.98); }
.ps-btn .ps-icon { transition: transform .2s var(--ps-ease); }

.ps-btn-primary {
  background: var(--ps-brand);
  color: #fff;
  box-shadow: var(--ps-shadow-brand);
}
.ps-btn-secondary {
  background: transparent;
  border-color: rgba(var(--ps-brand-rgb), .35);
  color: var(--ps-brand);
}
.ps-btn-ghost {
  background: transparent;
  color: var(--ps-ink-soft);
}
.ps-btn-light {
  background: #fff;
  color: var(--ps-brand);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}
.ps-btn-outline-light {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
}

/* Sizes */
.ps-btn-sm { min-height: 40px; padding: .5rem 1.1rem; font-size: var(--ps-fs-xs); }
.ps-btn-lg {
  min-height: 58px;
  padding: 1rem 2.1rem;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
}
.ps-btn-block { width: 100%; }

.ps-btn-note {
  margin: 0;
  font-size: var(--ps-fs-xs);
  color: var(--ps-muted);
}

/* Buttons stack full width on phones */
.ps-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ps-gap-sm);
}
.ps-btn-group-center { justify-content: center; }
@media (max-width: 519px) {
  .ps-btn-group { flex-direction: column; align-items: stretch; }
  .ps-btn-group .ps-btn { width: 100%; }
}

/* Hover only where a real pointer exists, no sticky hover on touch */
@media (hover: hover) {
  .ps-btn-primary:hover       { background: var(--ps-brand-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 18px 38px rgba(var(--ps-brand-rgb), .34); }
  .ps-btn-secondary:hover     { border-color: var(--ps-brand); background: var(--ps-brand-tint); color: var(--ps-brand); transform: translateY(-2px); }
  .ps-btn-ghost:hover         { background: var(--ps-bg-soft); color: var(--ps-ink); }
  .ps-btn-light:hover         { color: var(--ps-brand-dark); transform: translateY(-2px); box-shadow: 0 18px 38px rgba(0, 0, 0, .24); }
  .ps-btn-outline-light:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; transform: translateY(-2px); }
  .ps-btn:hover .ps-icon-shift { transform: translateX(3px); }
  .ps-link:hover      { background-size: 100% 2px; }
  .ps-link-arrow:hover .ps-icon { transform: translateX(4px); }
}


/* ============================================================
   5. HERO A - SPLIT  (.ps-hero.ps-hero-split)
   ============================================================ */
.ps-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 1.5rem + 6vw, 6.5rem);
  background: var(--ps-bg);
}
.ps-hero-soft { background: linear-gradient(180deg, var(--ps-brand-tint) 0%, var(--ps-bg) 72%); }
.ps-hero-dark { background: var(--ps-dark); }

/* Decorative blurred blob, place as first child of .ps-hero */
.ps-hero-glow {
  position: absolute;
  z-index: 0;
  width: clamp(260px, 46vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  pointer-events: none;
}
.ps-hero-glow-a { top: -18%; right: -12%; background: rgba(var(--ps-brand-rgb), .45); }
.ps-hero-glow-b { bottom: -28%; left: -14%; background: rgba(var(--ps-accent-rgb), .32); }
.ps-hero > .ps-container { position: relative; z-index: 1; }

.ps-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}
.ps-hero-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ps-gap-md);
  min-width: 0;
}
.ps-hero-body .ps-lead { max-width: 54ch; }

.ps-hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ps-gap) var(--ps-gap-md);
  padding-top: .35rem;
}
.ps-hero-proof-item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--ps-fs-xs);
  font-weight: 700;
  color: var(--ps-muted);
}
.ps-hero-proof-item .ps-icon { color: var(--ps-brand); }
.ps-hero-stars { display: inline-flex; gap: 2px; color: #f4b400; }

.ps-avatar-row { display: flex; align-items: center; }
.ps-avatar-row > * + * { margin-left: -10px; }
.ps-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--ps-surface);
  background: var(--ps-brand);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 800;
  flex-shrink: 0;
}
.ps-avatar-accent { background: var(--ps-accent); }
.ps-avatar-dark   { background: var(--ps-ink); }
.ps-avatar-muted  { background: #d9e1f2; color: var(--ps-ink); }

.ps-hero-media { position: relative; min-width: 0; }
.ps-hero-media-frame {
  position: relative;
  border-radius: var(--ps-r-lg);
  overflow: hidden;
  background: var(--ps-bg-soft);
  box-shadow: var(--ps-shadow-lg);
  border: 1px solid var(--ps-line);
}
.ps-hero-media-frame img,
.ps-hero-media-frame svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Fixed aspect variant, prevents layout shift for wide screenshots */
.ps-hero-media-ratio { aspect-ratio: 16 / 10; }
.ps-hero-media-ratio img { height: 100%; object-fit: cover; }
.ps-hero-media-bare { background: none; border: none; box-shadow: none; }

.ps-hero-float {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem .95rem;
  border-radius: var(--ps-r-sm);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--ps-line);
  box-shadow: var(--ps-shadow-md);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.ps-hero-float-bl { left: clamp(.5rem, 2vw, 1.25rem); bottom: clamp(.5rem, 2vw, 1.25rem); }
.ps-hero-float-tr { right: clamp(.5rem, 2vw, 1.25rem); top: clamp(.5rem, 2vw, 1.25rem); }
.ps-hero-float-icon {
  width: 36px; height: 36px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ps-brand-tint); color: var(--ps-brand);
  flex-shrink: 0;
}
.ps-hero-float-value { font-size: var(--ps-fs-sm); font-weight: 800; color: var(--ps-ink); line-height: 1.2; }
.ps-hero-float-label { font-size: var(--ps-fs-xs); color: var(--ps-muted); line-height: 1.2; }

.ps-hero-dark .ps-display,
.ps-hero-dark .ps-h1,
.ps-hero-dark .ps-h2 { color: #fff; }
.ps-hero-dark .ps-lead,
.ps-hero-dark .ps-list-check li { color: rgba(255, 255, 255, .74); }
.ps-hero-dark .ps-hero-proof-item { color: rgba(255, 255, 255, .6); }
.ps-hero-dark .ps-hero-proof-item .ps-icon { color: #fff; }
.ps-hero-dark .ps-avatar { border-color: var(--ps-dark-soft); }
.ps-hero-dark .ps-hero-media-frame { background: var(--ps-dark-soft); border-color: rgba(255, 255, 255, .12); }

@media (min-width: 900px) {
  .ps-hero-split .ps-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  /* Media moves left visually but stays second in the DOM */
  .ps-hero-flip .ps-hero-body  { order: 2; }
  .ps-hero-flip .ps-hero-media { order: 1; }
}

@media (max-width: 639px) {
  .ps-hero-split .ps-hero-body { align-items: center; text-align: center; }
  .ps-hero-split .ps-hero-proof { justify-content: center; }
  .ps-hero-split .ps-btn-group { width: 100%; }
}


/* ============================================================
   6. HERO B - SPOTLIGHT  (.ps-hero.ps-hero-spot)
   ============================================================ */
.ps-hero-spot {
  background: radial-gradient(120% 120% at 50% 0%, #17285a 0%, var(--ps-dark) 60%);
  color: rgba(255, 255, 255, .78);
  text-align: center;
  padding-block: clamp(3.5rem, 2rem + 8vw, 8rem);
}
.ps-hero-spot.ps-hero-light {
  background: linear-gradient(180deg, var(--ps-brand-tint) 0%, var(--ps-bg) 70%);
  color: var(--ps-ink-soft);
}
.ps-hero-tall { padding-block: clamp(4.5rem, 2.5rem + 10vw, 10rem); }

.ps-hero-spot-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ps-gap-md);
  max-width: 880px;
  margin-inline: auto;
}
.ps-hero-spot-inner .ps-lead { max-width: 58ch; }

.ps-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ps-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 14, 29, .72) 0%, rgba(6, 14, 29, .88) 100%);
}
.ps-hero-scrim-light {
  background: linear-gradient(180deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .95) 100%);
}

.ps-hero-grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%);
          mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%);
}

.ps-hero-spot .ps-display,
.ps-hero-spot .ps-h1 { color: #fff; }
.ps-hero-spot .ps-lead { color: rgba(255, 255, 255, .76); }
.ps-hero-spot .ps-hero-proof-item { color: rgba(255, 255, 255, .62); }
.ps-hero-spot .ps-hero-proof-item .ps-icon { color: #fff; }
.ps-hero-spot .ps-avatar { border-color: var(--ps-dark-soft); }
.ps-hero-spot.ps-hero-light .ps-display,
.ps-hero-spot.ps-hero-light .ps-h1 { color: var(--ps-ink); }
.ps-hero-spot.ps-hero-light .ps-lead { color: var(--ps-ink-soft); }
.ps-hero-spot.ps-hero-light .ps-hero-proof-item { color: var(--ps-muted); }
.ps-hero-spot.ps-hero-light .ps-hero-proof-item .ps-icon { color: var(--ps-brand); }
.ps-hero-spot.ps-hero-light .ps-avatar { border-color: var(--ps-surface); }

.ps-logo-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--ps-gap-md) var(--ps-gap-xl);
  margin-top: var(--ps-gap-md);
  padding-top: var(--ps-gap-md);
  border-top: 1px solid rgba(255, 255, 255, .12);
  width: 100%;
}
.ps-logo-strip-item {
  font-size: var(--ps-fs-sm);
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .55);
}
.ps-hero-light .ps-logo-strip { border-top-color: var(--ps-line); }
.ps-hero-light .ps-logo-strip-item { color: var(--ps-muted); }


/* ============================================================
   7. FEATURES
   ============================================================ */
.ps-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(.85rem, .5rem + 1.2vw, 1.5rem);
}
@media (min-width: 640px) {
  .ps-features-2, .ps-features-3, .ps-features-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .ps-features-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ps-features-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Works as <article>, <div> or <a> (then the whole card is clickable) */
.ps-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;
  padding: clamp(1.15rem, .9rem + .8vw, 1.75rem);
  border-radius: var(--ps-r);
  background: var(--ps-surface);
  border: 1px solid var(--ps-line);
  box-shadow: var(--ps-shadow-xs);
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: transform .2s var(--ps-ease), box-shadow .22s var(--ps-ease), border-color .2s ease;
}
.ps-feature-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ps-brand-tint);
  color: var(--ps-brand);
  margin-bottom: .35rem;
  flex-shrink: 0;
}
.ps-feature-title { margin: 0; font-size: var(--ps-fs-h4); font-weight: 800; color: var(--ps-ink); letter-spacing: -.01em; }
.ps-feature-text  { margin: 0; font-size: var(--ps-fs-sm); line-height: 1.65; color: var(--ps-ink-soft); }
.ps-feature-link  { margin-top: auto; padding-top: .5rem; }

/* Icon tints, put on .ps-feature-icon */
.ps-tint-brand   { background: var(--ps-brand-tint);   color: var(--ps-brand); }
.ps-tint-accent  { background: var(--ps-accent-tint);  color: var(--ps-accent); }
.ps-tint-success { background: var(--ps-success-tint); color: var(--ps-success); }
.ps-tint-warning { background: var(--ps-warning-tint); color: var(--ps-warning); }
.ps-tint-ink     { background: #eef1f7;                color: var(--ps-ink); }
.ps-tint-solid   { background: var(--ps-brand);        color: #fff; }

.ps-feature-plain {
  background: none;
  border-color: transparent;
  box-shadow: none;
  padding-inline: 0;
}
.ps-feature-inline {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: var(--ps-gap);
}
.ps-feature-inline .ps-feature-icon { margin-bottom: 0; width: 46px; height: 46px; border-radius: 14px; }
.ps-feature-inline-body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.ps-feature-highlight {
  border-color: rgba(var(--ps-brand-rgb), .35);
  box-shadow: 0 10px 30px rgba(var(--ps-brand-rgb), .12);
}
.ps-feature-dark {
  background: var(--ps-dark-soft);
  border-color: rgba(255, 255, 255, .1);
}
.ps-feature-dark .ps-feature-title { color: #fff; }
.ps-feature-dark .ps-feature-text  { color: rgba(255, 255, 255, .7); }
.ps-feature-dark .ps-feature-icon  { background: rgba(255, 255, 255, .1); color: #fff; }

/* Replaces .ps-feature-icon in step listings */
.ps-feature-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ps-brand);
  color: #fff;
  font-size: var(--ps-fs-sm);
  font-weight: 900;
  margin-bottom: .35rem;
  flex-shrink: 0;
}

.ps-feature-stat-value {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ps-brand);
}

.ps-feature-split {
  display: grid;
  grid-template-columns: 1fr;   
  grid-template-areas: "body" "media";
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}

/* .ps-feature-regular{
  
} */

.ps-feature-split-body { display: flex; flex-direction: column; gap: var(--ps-gap); min-width: 0;  grid-area: body;}
.ps-feature-split-media {
  border-radius: var(--ps-r-lg);
  overflow: hidden;
  background: var(--ps-bg-soft);
  border: 1px solid var(--ps-line);
  box-shadow: var(--ps-shadow-md);
  grid-area: media;
}
.ps-feature-split-media img { display: block; width: 100%; height: auto; }

@media (min-width: 900px) {
  .ps-feature-split { 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    grid-template-areas: "media body";
  }

  .ps-feature-split-flip {
    grid-template-areas: "body media";
  }
  /* .ps-feature-split-flip .ps-feature-split-body  { order: 2; }
  .ps-feature-split-flip .ps-feature-split-media { order: 1; } */
}

@media (hover: hover) {
  a.ps-feature:hover,
  .ps-feature-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--ps-shadow-md);
    border-color: rgba(var(--ps-brand-rgb), .3);
  }
}


/* ============================================================
   8. CTA SECTION (centered)
   ============================================================ */
.ps-cta {
  position: relative;
  overflow: hidden;
  padding-block: var(--ps-section-y);
  text-align: center;
}
.ps-cta-soft  { background: var(--ps-bg-soft); }
.ps-cta-brand { background: linear-gradient(135deg, var(--ps-brand) 0%, #3b2ad8 55%, var(--ps-accent) 100%); }
.ps-cta-dark  { background: var(--ps-dark); }

.ps-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ps-gap-md);
  max-width: 760px;
  margin-inline: auto;
}
.ps-cta-inner .ps-lead { max-width: 52ch; }

/* Boxed variant, use inside a plain .ps-section */
.ps-cta-card {
  max-width: 980px;
  padding: clamp(1.75rem, 1.2rem + 3vw, 3.75rem) clamp(1.25rem, .9rem + 2.5vw, 3rem);
  border-radius: var(--ps-r-xl);
  background: var(--ps-surface);
  border: 1px solid var(--ps-line);
  box-shadow: var(--ps-shadow-md);
}
.ps-cta-brand .ps-cta-card,
.ps-cta-dark .ps-cta-card { background: transparent; border-color: rgba(255, 255, 255, .16); box-shadow: none; }

.ps-cta-icon {
  width: 64px; height: 64px;
  border-radius: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ps-brand-tint);
  color: var(--ps-brand);
}

.ps-cta-icon-warning {
  width: 64px; height: 64px;
  border-radius: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ps-warning-tint);
  color: var(--ps-warning);
}

.ps-cta-glow {
  position: absolute;
  z-index: 0;
  width: clamp(280px, 55vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  filter: blur(90px);
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.ps-cta-brand .ps-h1, .ps-cta-brand .ps-h2, .ps-cta-brand .ps-display,
.ps-cta-dark  .ps-h1, .ps-cta-dark  .ps-h2, .ps-cta-dark  .ps-display { color: #fff; }
.ps-cta-brand .ps-lead, .ps-cta-dark .ps-lead { color: rgba(255, 255, 255, .8); }
.ps-cta-brand .ps-eyebrow, .ps-cta-dark .ps-eyebrow { color: rgba(255, 255, 255, .7); }
.ps-cta-brand .ps-btn-note, .ps-cta-dark .ps-btn-note { color: rgba(255, 255, 255, .62); }
.ps-cta-brand .ps-list-check li, .ps-cta-dark .ps-list-check li { color: rgba(255, 255, 255, .8); }
.ps-cta-brand .ps-list-check .ps-icon, .ps-cta-dark .ps-list-check .ps-icon { color: #fff; }
.ps-cta-brand .ps-cta-icon, .ps-cta-dark .ps-cta-icon { background: rgba(255, 255, 255, .14); color: #fff; }


/* ============================================================
   9. PAGE SHELL  (fixed header / content / footer)
   Skeleton: templates/public/public-template.html
   ============================================================ */
.ps-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* padding-top reserves the LARGE header height so nothing shifts
   while the header shrinks */
.ps-main {
  flex: 1 0 auto;
  padding-top: var(--ps-header-h);
  min-width: 0;
}
.ps-main-flush { padding-top: 0; }

html { scroll-padding-top: calc(var(--ps-header-h-compact) + 1rem); }

/* Set by public-shell.js while the mobile drawer is open */
.ps-page.ps-no-scroll { overflow: hidden; }
html:has(> .ps-page.ps-no-scroll) { overflow: hidden; }

/* Drawer + backdrop ship with [hidden] so they stay inert without JS */
.ps-drawer[hidden],
.ps-drawer-backdrop[hidden] { display: none; }


/* ============================================================
   10. HEADER  (.ps-header)
   ============================================================ */
.ps-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--ps-header-z);
  height: var(--ps-header-h);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: height .28s var(--ps-ease), background-color .28s ease,
              box-shadow .28s ease, border-color .28s ease;
}
.ps-header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps-gap);
}

/* Scrolled state, set by public-shell.js */
.ps-header-compact {
  height: var(--ps-header-h-compact);
  background: rgba(255, 255, 255, .95);
  border-bottom-color: var(--ps-line);
  box-shadow: 0 2px 18px rgba(10, 22, 40, .07);
}

/* Height = scroll distance before the header shrinks */
.ps-header-sentinel {
  position: absolute;
  top: 0;
  height: 56px;
  width: 1px;
  pointer-events: none;
}

.ps-header-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.ps-header-logo {
  display: block;
  width: auto;
  height: 42px;
  transition: height .28s var(--ps-ease);
}
.ps-header-compact .ps-header-logo { height: 32px; }

.ps-header-nav { display: none; flex: 1; min-width: 0; }
.ps-header-links {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ps-header-links a {
  display: inline-flex;
  align-items: center;
  padding: .55rem .9rem;
  border-radius: var(--ps-r-xs);
  font-size: var(--ps-fs-sm);
  font-weight: 600;
  color: var(--ps-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.ps-header-links a.ps-is-active { color: var(--ps-brand); }

.ps-header-actions { display: none; align-items: center; gap: .5rem; flex-shrink: 0; }
.ps-header-cta-mobile { flex-shrink: 0; }

.ps-burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--ps-r-xs);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.ps-burger-bar {
  display: block;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--ps-ink);
  transition: transform .3s var(--ps-ease), opacity .2s ease;
}
.ps-burger[aria-expanded="true"] .ps-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ps-burger[aria-expanded="true"] .ps-burger-bar:nth-child(2) { opacity: 0; }
.ps-burger[aria-expanded="true"] .ps-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.ps-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ps-header-z) + 10);
  background: rgba(6, 14, 29, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.ps-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: calc(var(--ps-header-z) + 20);
  width: min(340px, 86vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--ps-gap);
  padding: 1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--ps-surface);
  box-shadow: -8px 0 40px rgba(10, 22, 40, .18);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .32s var(--ps-ease), visibility .32s ease;
}
.ps-drawer-backdrop.ps-is-open { opacity: 1; visibility: visible; }
.ps-drawer.ps-is-open { transform: translateX(0); visibility: visible; }

.ps-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps-gap);
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--ps-line);
  flex-shrink: 0;
}
.ps-drawer-head .ps-header-logo { height: 36px; }
.ps-drawer-close {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  border-radius: var(--ps-r-xs);
  background: var(--ps-bg-soft);
  color: var(--ps-ink);
  cursor: pointer;
  flex-shrink: 0;
}
.ps-drawer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.ps-drawer-links a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: .5rem .75rem;
  border-radius: var(--ps-r-xs);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ps-ink);
  text-decoration: none;
}
.ps-drawer-links a.ps-is-active { color: var(--ps-brand); background: var(--ps-brand-tint); }
.ps-drawer-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: auto; }
.ps-drawer-actions .ps-btn { width: 100%; }

@media (hover: hover) {
  .ps-header-links a:hover { background: var(--ps-brand-tint); color: var(--ps-brand); }
  .ps-burger:hover         { background: var(--ps-bg-soft); }
  .ps-drawer-links a:hover { background: var(--ps-bg-soft); color: var(--ps-brand); }
  .ps-drawer-close:hover   { background: var(--ps-brand-tint); color: var(--ps-brand); }
}

/* Desktop layout: nav + auth buttons instead of the drawer */
@media (min-width: 992px) {
  .ps-header-nav     { display: block; }
  .ps-header-actions { display: flex; }
  .ps-burger,
  .ps-drawer,
  .ps-drawer-backdrop,
  .ps-header-cta-mobile { display: none; }
}

/* The extra header CTA would crowd the logo on very small phones */
@media (max-width: 400px) {
  .ps-header-cta-mobile { display: none; }
}


/* ============================================================
   11. FOOTER  (.ps-footer)
   ============================================================ */
.ps-footer {
  flex-shrink: 0;
  background: var(--ps-dark);
  color: rgba(255, 255, 255, .7);
  padding-block: clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem);
}
.ps-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
.ps-footer-brand { display: flex; flex-direction: column; gap: .85rem; max-width: 34ch; }
.ps-footer-logo  { height: 40px; width: auto; display: block; }
.ps-footer-tagline { margin: 0; font-size: var(--ps-fs-sm); line-height: 1.6; color: rgba(255, 255, 255, .6); }

.ps-footer-col { display: flex; flex-direction: column; gap: .7rem; }
.ps-footer-title {
  margin: 0;
  font-size: var(--ps-fs-xs);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.ps-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.ps-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-size: var(--ps-fs-sm);
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color .18s ease;
}

.ps-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps-gap);
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  padding-top: var(--ps-gap-md);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.ps-footer-legal { margin: 0; font-size: var(--ps-fs-xs); color: rgba(255, 255, 255, .45); }

.ps-footer-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--ps-r-pill);
}
.ps-footer-lang a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .3rem .85rem;
  border-radius: var(--ps-r-pill);
  font-size: var(--ps-fs-xs);
  font-weight: 700;
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.ps-footer-lang a.ps-is-active { background: rgba(255, 255, 255, .14); color: #fff; }

@media (hover: hover) {
  .ps-footer-links a:hover { color: #fff; }
  .ps-footer-lang a:hover  { color: #fff; }
}

@media (min-width: 640px) {
  .ps-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
  .ps-footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
  .ps-footer-brand { grid-column: auto; }
}


/* ============================================================
   12. CHOICE & UPLOAD  (.ps-choice / .ps-dropzone / .ps-example)
   ============================================================ */
.ps-choice {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ps-gap-md);
  align-items: stretch;
}
@media (min-width: 900px) {
  .ps-choice {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--ps-gap-lg);
  }
}

.ps-choice-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ps-gap-sm);
  font-size: var(--ps-fs-xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ps-muted);
}
.ps-choice-divider::before,
.ps-choice-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ps-line);
}
@media (min-width: 900px) {
  .ps-choice-divider { flex-direction: column; }
  .ps-choice-divider::before,
  .ps-choice-divider::after { width: 1px; height: auto; }
}

.ps-choice-card {
  display: flex;
  flex-direction: column;
  gap: var(--ps-gap);
  height: 100%;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border-radius: var(--ps-r-lg);
  background: var(--ps-surface);
  border: 1px solid var(--ps-line);
  box-shadow: var(--ps-shadow-sm);
}
.ps-choice-card-featured {
  border-color: rgba(var(--ps-brand-rgb), .35);
  box-shadow: 0 10px 30px rgba(var(--ps-brand-rgb), .12);
}
.ps-choice-head { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .3rem; }
.ps-choice-head .ps-badge { align-self: center; margin-bottom: .25rem; text-align: center; }
.ps-choice-actions { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.ps-choice-actions + .ps-btn-note { margin-top: .75rem; }

/* Label wrapping a visually hidden file input, so no JS is needed to open the picker */
.ps-dropzone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  /* min-height: 210px; */
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  border: 2px dashed rgba(var(--ps-brand-rgb), .3);
  border-radius: var(--ps-r);
  background: #f8faff;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.ps-dropzone:focus-within {
  outline: 3px solid rgba(var(--ps-brand-rgb), .55);
  outline-offset: 3px;
}
.ps-dropzone-icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ps-brand-tint);
  color: var(--ps-brand);
  margin-bottom: .35rem;
  transition: background-color .18s ease, color .18s ease;
}
.ps-dropzone-title { font-size: var(--ps-fs-h4); font-weight: 800; color: var(--ps-ink); }
.ps-dropzone-sub   { margin: 0; font-size: var(--ps-fs-sm); color: var(--ps-muted); }
.ps-dropzone-browse { color: var(--ps-brand); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ps-dropzone-formats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .35rem;
  margin-top: .6rem;
}
.ps-format-chip {
  padding: .15rem .6rem;
  border-radius: var(--ps-r-pill);
  border: 1px solid var(--ps-line);
  background: var(--ps-surface);
  font-size: var(--ps-fs-xs);
  font-weight: 700;
  color: var(--ps-muted);
}

.ps-example-list { display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.ps-example {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  padding: .8rem .95rem;
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-r-sm);
  background: var(--ps-surface);
  font-family: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .18s var(--ps-ease);
}
.ps-example-icon {
  width: 42px; height: 42px;
  border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ps-example-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.ps-example-title { font-size: var(--ps-fs-sm); font-weight: 700; color: var(--ps-ink); }
.ps-example-meta {
  display: flex; flex-wrap: wrap; gap: .1rem .75rem;
  font-size: var(--ps-fs-xs); color: var(--ps-muted);
}
.ps-example-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.ps-example-chev { display: flex; flex-shrink: 0; color: #c3cbdd; }
.ps-example.ps-is-selected {
  border-color: var(--ps-brand);
  background: var(--ps-brand-tint);
}

@media (hover: hover) {
  .ps-dropzone:hover { border-color: var(--ps-brand); background: var(--ps-brand-tint); }
  .ps-dropzone:hover .ps-dropzone-icon { background: var(--ps-brand); color: #fff; }
  .ps-example:hover { border-color: var(--ps-brand); transform: translateY(-1px); }
  .ps-example:hover .ps-example-chev { color: var(--ps-brand); }
}

.ps-example:focus-visible {
  outline: 3px solid rgba(var(--ps-brand-rgb), .55);
  outline-offset: 3px;
}


/* ============================================================
   13. COURSE PREVIEW  (.ps-course / .ps-lesson / .ps-preview-lock)
   Accordion uses native <details>/<summary>, no JS required.
   ============================================================ */
.ps-course {
  border-radius: var(--ps-r-lg);
  background: var(--ps-surface);
  border: 1px solid var(--ps-line);
  box-shadow: var(--ps-shadow-sm);
  overflow: hidden;
}

.ps-course-head {
  display: flex;
  align-items: center;
  gap: var(--ps-gap);
  flex-wrap: wrap;
  padding: clamp(1.1rem, .9rem + .8vw, 1.6rem);
  border-bottom: 1px solid var(--ps-line);
  background: linear-gradient(135deg, var(--ps-brand-tint), var(--ps-surface) 70%);
}
.ps-course-icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ps-course-head-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.ps-course-title { margin: 0; font-size: var(--ps-fs-h3); font-weight: 800; color: var(--ps-ink); letter-spacing: -.015em; }
.ps-course-meta {
  display: flex; flex-wrap: wrap; gap: .2rem .9rem;
  font-size: var(--ps-fs-xs); font-weight: 600; color: var(--ps-muted);
}
.ps-course-meta span { display: inline-flex; align-items: center; gap: .35rem; }

.ps-lesson-list { display: flex; flex-direction: column; }
.ps-lesson { border-bottom: 1px solid var(--ps-line); }
.ps-lesson-summary {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem clamp(1.1rem, .9rem + .8vw, 1.6rem);
  cursor: pointer;
  list-style: none;
  transition: background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ps-lesson-summary::-webkit-details-marker { display: none; }
.ps-lesson-summary::marker { content: ''; }
.ps-lesson-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--ps-brand-tint);
  color: var(--ps-brand);
  font-size: var(--ps-fs-xs);
  font-weight: 900;
}
.ps-lesson-summary-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.ps-lesson-title { font-size: var(--ps-fs-sm); font-weight: 700; color: var(--ps-ink); }
.ps-lesson-sub   { font-size: var(--ps-fs-xs); color: var(--ps-muted); }
.ps-lesson-chev {
  display: flex; flex-shrink: 0;
  color: var(--ps-muted);
  transition: transform .2s var(--ps-ease), color .15s ease;
}
.ps-lesson[open] .ps-lesson-summary { background: #f8faff; }
.ps-lesson[open] .ps-lesson-num { background: var(--ps-brand); color: #fff; }
.ps-lesson[open] .ps-lesson-chev { transform: rotate(180deg); color: var(--ps-brand); }
.ps-lesson-summary:focus-visible {
  outline: 3px solid rgba(var(--ps-brand-rgb), .55);
  outline-offset: -3px;
}

.ps-lesson-body {
  padding: 0 clamp(1.1rem, .9rem + .8vw, 1.6rem) 1.1rem;
  padding-left: calc(clamp(1.1rem, .9rem + .8vw, 1.6rem) + 34px + .85rem);
}
.ps-lesson-label {
  margin: 0 0 .5rem;
  font-size: var(--ps-fs-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ps-muted);
}
.ps-objectives { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.ps-objectives li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: var(--ps-fs-sm);
  line-height: 1.55;
  color: var(--ps-ink-soft);
}
.ps-objectives li > .ps-icon { color: var(--ps-brand); margin-top: .3em; }

@media (hover: hover) {
  .ps-lesson-summary:hover { background: #f8faff; }
  .ps-lesson-summary:hover .ps-lesson-chev { color: var(--ps-brand); }
}

/* Blurred teaser for the remaining, locked content.
   .ps-preview-lock-content holds dummy rows, the overlay sits on top. */
.ps-preview-lock { position: relative; }
.ps-preview-lock-content {
  filter: blur(4px);
  opacity: .55;
  pointer-events: none;
  user-select: none;
}
.ps-preview-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
  padding: clamp(1.1rem, .9rem + 1vw, 1.75rem);
  background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .95) 55%);
}
.ps-preview-lock-icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ps-brand-tint);
  color: var(--ps-brand);
}
.ps-preview-lock-title { margin: 0; font-size: var(--ps-fs-h4); font-weight: 800; color: var(--ps-ink); }
.ps-preview-lock-sub   { margin: 0; font-size: var(--ps-fs-sm); color: var(--ps-muted); max-width: 44ch; }
.ps-preview-lock-overlay .ps-btn { margin-top: .35rem; }

/* Static stand-in for a lesson row inside the locked area */
.ps-lesson-ghost {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem clamp(1.1rem, .9rem + .8vw, 1.6rem);
  border-bottom: 1px solid var(--ps-line);
}
.ps-lesson-ghost:last-child { border-bottom: none; }
.ps-ghost-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.ps-ghost-bar {
  height: 10px;
  border-radius: 5px;
  background: #e4e9f2;
}
.ps-ghost-bar-sm { height: 8px; background: #edf1f8; }
.ps-ghost-w-40 { width: 40%; }
.ps-ghost-w-55 { width: 55%; }
.ps-ghost-w-70 { width: 70%; }


/* ============================================================
   14. EXERCISE STAGES  (.ps-stage / .ps-ex-btn)
   Icon tiles and stage numbers take their colour from .ps-tint-*
   ============================================================ */
.ps-stages { display: flex; flex-direction: column; gap: clamp(1rem, .8rem + 1vw, 1.5rem); }

.ps-stage {
  display: flex;
  flex-direction: column;
  gap: var(--ps-gap);
  padding: clamp(1.1rem, .9rem + .8vw, 1.6rem);
  border-radius: var(--ps-r-lg);
  background: var(--ps-surface);
  border: 1px solid var(--ps-line);
  box-shadow: var(--ps-shadow-xs);
}
.ps-stage-head { display: flex; align-items: center; gap: .85rem; }
.ps-stage-num {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: var(--ps-fs-sm);
  font-weight: 900;
}
.ps-stage-head-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.ps-stage-title { margin: 0; font-size: var(--ps-fs-h4); font-weight: 800; color: var(--ps-ink); }
.ps-stage-sub   { margin: 0; font-size: var(--ps-fs-xs); color: var(--ps-muted); }

.ps-ex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: .6rem;
}
.ps-ex-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 112px;
  padding: 1rem .7rem;
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-r-sm);
  background: var(--ps-surface);
  font-family: inherit;
  color: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s var(--ps-ease);
}
.ps-ex-icon {
  width: 42px; height: 42px;
  border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ps-ex-name { font-size: var(--ps-fs-sm); font-weight: 700; color: var(--ps-ink); line-height: 1.3; }

/* Playable right now */
.ps-ex-btn-ready {
  border-color: var(--ps-brand);
  box-shadow: 0 6px 18px rgba(var(--ps-brand-rgb), .14);
}
.ps-ex-btn-ready .ps-ex-name { color: var(--ps-brand); }
.ps-ex-flag {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  padding: .15rem .6rem;
  border-radius: var(--ps-r-pill);
  background: var(--ps-brand);
  color: #fff;
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ps-ex-btn:disabled {
  background: var(--ps-bg-soft);
  border-style: dashed;
  cursor: not-allowed;
}
.ps-ex-btn:disabled .ps-ex-name { color: var(--ps-muted); }
.ps-ex-btn:disabled .ps-ex-icon { background: #eef1f7; color: #c3cbdd; }
.ps-ex-lock { position: absolute; top: .5rem; right: .5rem; display: flex; color: #c3cbdd; }

/* Placeholder tile for exercises that are not built yet */
.ps-ex-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-height: 112px;
  padding: 1rem .7rem;
  border: 1px dashed var(--ps-line);
  border-radius: var(--ps-r-sm);
  text-align: center;
  color: var(--ps-muted);
  font-size: var(--ps-fs-xs);
  font-weight: 700;
}
.ps-ex-soon-wide { grid-column: 1 / -1; min-height: 0; padding: .9rem 1rem; }

@media (hover: hover) {
  .ps-ex-btn:not(:disabled):hover {
    border-color: var(--ps-brand);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(var(--ps-brand-rgb), .18);
  }
}
.ps-ex-btn:not(:disabled):active { transform: scale(.98); }
.ps-ex-btn:focus-visible {
  outline: 3px solid rgba(var(--ps-brand-rgb), .55);
  outline-offset: 3px;
}


/* ============================================================
   15. FORMS & INPUTS  (.ps-form / .ps-field / .ps-input)
   Every control is drawn without background images, so checkbox,
   radio, switch and select chevron stay CSP-safe.
   ============================================================ */

.ps-form { display: flex; flex-direction: column; gap: var(--ps-gap-md); }

.ps-form-card {
  padding: clamp(1.25rem, 1rem + 1.4vw, 2.5rem);
  border-radius: var(--ps-r-lg);
  background: var(--ps-surface);
  border: 1px solid var(--ps-line);
  box-shadow: var(--ps-shadow-sm);
}
.ps-form-card-narrow { max-width: 620px; margin-inline: auto; }
.ps-form-card-featured {
  border-color: rgba(var(--ps-brand-rgb), .35);
  box-shadow: 0 10px 30px rgba(var(--ps-brand-rgb), .12);
}

.ps-form-head {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding-bottom: var(--ps-gap-md);
  margin-bottom: var(--ps-gap-md);
  border-bottom: 1px solid var(--ps-line);
}
.ps-form-head-center { align-items: center; text-align: center; }
.ps-form-icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ps-brand-tint);
  color: var(--ps-brand);
  margin-bottom: .35rem;
}
.ps-form-title { margin: 0; font-size: var(--ps-fs-h3); font-weight: 800; color: var(--ps-ink); letter-spacing: -.015em; }
.ps-form-sub   { margin: 0; font-size: var(--ps-fs-sm); line-height: 1.6; color: var(--ps-muted); }

.ps-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--ps-gap);
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.ps-legend {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: 0;
  margin-bottom: .25rem;
  font-size: var(--ps-fs-xs);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ps-muted);
}
.ps-legend::after { content: ''; flex: 1; height: 1px; background: var(--ps-line); }

.ps-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ps-gap);
}
@media (min-width: 640px) {
  .ps-form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ps-form-span-2 { grid-column: span 2; }
  .ps-form-span-all { grid-column: 1 / -1; }
}

.ps-form-divider { height: 1px; border: 0; margin: 0; background: var(--ps-line); }

.ps-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ps-gap-sm);
  padding-top: var(--ps-gap-sm);
}
.ps-form-actions-end    { justify-content: flex-end; }
.ps-form-actions-center { justify-content: center; }
.ps-form-actions-split  { justify-content: space-between; }
.ps-form-actions .ps-btn-note { display: inline-flex; align-items: center; gap: .35rem; }
@media (max-width: 519px) {
  .ps-form-actions { flex-direction: column-reverse; align-items: stretch; }
  .ps-form-actions .ps-btn { width: 100%; }
}

/* Single-row form, e.g. newsletter signup */
.ps-form-inline { display: flex; flex-wrap: wrap; gap: var(--ps-gap-sm); align-items: flex-start; }
.ps-form-inline > .ps-field { flex: 1 1 240px; }


/* --- Field wrapper ------------------------------------------------ */
.ps-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }

/* Flex row so .ps-label-optional can be pushed to the far right */
.ps-label {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: var(--ps-fs-xs);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ps-ink);
}
.ps-label-req      { color: var(--ps-accent); }
.ps-label-optional { margin-left: auto; font-weight: 600; color: var(--ps-muted); }

.ps-hint { font-size: var(--ps-fs-xs); line-height: 1.5; color: var(--ps-muted); }
.ps-field-foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ps-gap-sm); }
.ps-counter { font-size: var(--ps-fs-xs); font-weight: 700; color: var(--ps-muted); flex-shrink: 0; }

.ps-feedback {
  display: inline-flex;
  align-items: flex-start;
  gap: .35rem;
  font-size: var(--ps-fs-xs);
  font-weight: 700;
  line-height: 1.45;
}
.ps-feedback-error   { color: var(--ps-danger); }
.ps-feedback-success { color: var(--ps-success); }
.ps-feedback .ps-icon { margin-top: .1em; }


/* --- Text controls ------------------------------------------------ */
.ps-input,
.ps-select,
.ps-textarea {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: .8rem 1.05rem;
  border: 2px solid var(--ps-line);
  border-radius: var(--ps-r-sm);
  background: var(--ps-surface);
  color: var(--ps-ink);
  font-family: inherit;
  font-size: var(--ps-fs-sm);
  font-weight: 500;
  line-height: 1.5;
  appearance: none;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.ps-input::placeholder,
.ps-textarea::placeholder { color: #9aa6bd; font-weight: 400; }

.ps-input:focus,
.ps-select:focus,
.ps-textarea:focus {
  outline: none;
  border-color: var(--ps-brand);
  box-shadow: 0 0 0 4px rgba(var(--ps-brand-rgb), .14);
}
.ps-input:disabled,
.ps-select:disabled,
.ps-textarea:disabled {
  background: var(--ps-bg-soft);
  border-color: var(--ps-line);
  color: var(--ps-muted);
  cursor: not-allowed;
}
.ps-input[readonly],
.ps-textarea[readonly] { background: var(--ps-bg-soft); }

.ps-textarea { min-height: 132px; resize: vertical; }
.ps-select   { padding-right: 2.9rem; cursor: pointer; }

.ps-input-sm { min-height: 42px; padding: .45rem .8rem; font-size: var(--ps-fs-xs); border-radius: var(--ps-r-xs); }
.ps-input-lg { min-height: 60px; padding: 1rem 1.25rem; font-size: var(--ps-fs-body); }

/* Validation states */
.ps-is-invalid          { border-color: var(--ps-danger); background: #fffafa; }
.ps-is-invalid:focus    { border-color: var(--ps-danger); box-shadow: 0 0 0 4px rgba(var(--ps-danger-rgb), .15); }
.ps-is-valid            { border-color: var(--ps-success); }
.ps-is-valid:focus      { border-color: var(--ps-success); box-shadow: 0 0 0 4px rgba(var(--ps-success-rgb), .15); }


/* --- Icons, affixes and inline buttons ---------------------------- */
.ps-input-wrap { position: relative; display: flex; align-items: center; min-width: 0; }

.ps-input-icon {
  position: absolute;
  left: 1rem;
  display: flex;
  color: var(--ps-muted);
  pointer-events: none;
}
.ps-input-wrap-icon .ps-input,
.ps-input-wrap-icon .ps-select { padding-left: 2.9rem; }

.ps-input-affix {
  position: absolute;
  right: 1rem;
  font-size: var(--ps-fs-xs);
  font-weight: 700;
  color: var(--ps-muted);
  pointer-events: none;
}
.ps-input-wrap-affix .ps-input { padding-right: 3.6rem; }

.ps-select-chev {
  position: absolute;
  right: 1.05rem;
  display: flex;
  color: var(--ps-muted);
  pointer-events: none;
}

/* Trailing action inside the field, e.g. reveal password */
.ps-input-btn {
  position: absolute;
  right: .35rem;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  border-radius: var(--ps-r-xs);
  background: transparent;
  color: var(--ps-muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ps-input-wrap-btn .ps-input { padding-right: 3.1rem; }

/* Field plus attached button, stacks on phones */
.ps-input-group { display: flex; gap: .6rem; align-items: stretch; }
.ps-input-group > .ps-input-wrap,
.ps-input-group > .ps-input { flex: 1 1 auto; }
.ps-input-group .ps-btn { flex-shrink: 0; }
@media (max-width: 519px) {
  .ps-input-group { flex-direction: column; }
  .ps-input-group .ps-btn { width: 100%; }
}


/* --- Checkbox, radio and switch ----------------------------------- */
/* Markup: <label class="ps-check"><input class="ps-check-input">
   <span class="ps-check-box"></span><span class="ps-check-text">…</span></label>
   The native control stays in the DOM (focusable, readable by AT) and is
   clipped away, the visible box is drawn with borders only. */
.ps-check,
.ps-radio,
.ps-switch {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  cursor: pointer;
}
.ps-check-input,
.ps-radio-input,
.ps-switch-input {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.ps-check-text,
.ps-radio-text,
.ps-switch-text {
  font-size: var(--ps-fs-sm);
  line-height: 1.5;
  color: var(--ps-ink-soft);
  min-width: 0;
}

.ps-check-box,
.ps-radio-box {
  position: relative;
  width: 22px; height: 22px;
  flex-shrink: 0;
  margin-top: .1rem;
  border: 2px solid #ccd4e6;
  background: var(--ps-surface);
  transition: background-color .15s ease, border-color .15s ease;
}
.ps-check-box { border-radius: 7px; }
.ps-radio-box { border-radius: 50%; }

.ps-check-box::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .15s var(--ps-ease);
}
.ps-radio-box::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform .15s var(--ps-ease);
}
.ps-check-input:checked + .ps-check-box,
.ps-radio-input:checked + .ps-radio-box { background: var(--ps-brand); border-color: var(--ps-brand); }
.ps-check-input:checked + .ps-check-box::after { transform: rotate(45deg) scale(1); }
.ps-radio-input:checked + .ps-radio-box::after { transform: scale(1); }

.ps-check-input:focus-visible + .ps-check-box,
.ps-radio-input:focus-visible + .ps-radio-box {
  outline: 3px solid rgba(var(--ps-brand-rgb), .55);
  outline-offset: 3px;
}
.ps-check-input:disabled + .ps-check-box,
.ps-radio-input:disabled + .ps-radio-box { background: var(--ps-bg-soft); border-color: var(--ps-line); }
.ps-check-input:disabled:checked + .ps-check-box,
.ps-radio-input:disabled:checked + .ps-radio-box { background: #c3cbdd; border-color: #c3cbdd; }
.ps-check:has(:disabled),
.ps-radio:has(:disabled),
.ps-switch:has(:disabled) { cursor: not-allowed; }
.ps-check:has(:disabled) .ps-check-text,
.ps-radio:has(:disabled) .ps-radio-text,
.ps-switch:has(:disabled) .ps-switch-text { color: var(--ps-muted); }

.ps-switch { align-items: center; }
.ps-switch-track {
  position: relative;
  width: 48px; height: 27px;
  flex-shrink: 0;
  border-radius: var(--ps-r-pill);
  background: #dde3f0;
  transition: background-color .2s ease;
}
.ps-switch-track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(10, 22, 40, .25);
  transition: transform .22s var(--ps-ease);
}
.ps-switch-input:checked + .ps-switch-track { background: var(--ps-brand); }
.ps-switch-input:checked + .ps-switch-track::after { transform: translateX(21px); }
.ps-switch-input:focus-visible + .ps-switch-track {
  outline: 3px solid rgba(var(--ps-brand-rgb), .55);
  outline-offset: 3px;
}
.ps-switch-input:disabled + .ps-switch-track { background: var(--ps-line); }

.ps-check-group { display: flex; flex-direction: column; gap: .7rem; }
.ps-check-group-inline { flex-direction: row; flex-wrap: wrap; gap: .7rem var(--ps-gap-md); }


/* --- Selectable cards (radio or checkbox tiles) ------------------- */
.ps-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: .6rem;
}
.ps-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  height: 100%;
  padding: .95rem 1rem;
  border: 2px solid var(--ps-line);
  border-radius: var(--ps-r-sm);
  background: var(--ps-surface);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.ps-option-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ps-option-title { font-size: var(--ps-fs-sm); font-weight: 700; color: var(--ps-ink); }
.ps-option-text  { font-size: var(--ps-fs-xs); line-height: 1.5; color: var(--ps-muted); }
.ps-option:has(:checked) {
  border-color: var(--ps-brand);
  background: var(--ps-brand-tint);
  box-shadow: 0 6px 18px rgba(var(--ps-brand-rgb), .12);
}
.ps-option:has(:focus-visible) {
  outline: 3px solid rgba(var(--ps-brand-rgb), .55);
  outline-offset: 3px;
}
.ps-option:has(:disabled) { background: var(--ps-bg-soft); cursor: not-allowed; }


/* --- Range -------------------------------------------------------- */
.ps-range {
  width: 100%;
  height: 26px;
  padding: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}
.ps-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #e4e9f2; }
.ps-range::-webkit-slider-thumb {
  appearance: none;
  width: 22px; height: 22px;
  margin-top: -8px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--ps-brand);
  box-shadow: 0 2px 8px rgba(var(--ps-brand-rgb), .35);
}
.ps-range::-moz-range-track { height: 6px; border-radius: 3px; background: #e4e9f2; }
.ps-range::-moz-range-thumb {
  width: 16px; height: 16px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--ps-brand);
  box-shadow: 0 2px 8px rgba(var(--ps-brand-rgb), .35);
}
.ps-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(var(--ps-brand-rgb), .3); }
.ps-range:focus-visible::-moz-range-thumb     { box-shadow: 0 0 0 5px rgba(var(--ps-brand-rgb), .3); }
.ps-range:disabled::-webkit-slider-thumb { background: #c3cbdd; box-shadow: none; }
.ps-range:disabled::-moz-range-thumb     { background: #c3cbdd; box-shadow: none; }


/* --- File picker (compact row, see .ps-dropzone for the large one) -- */
.ps-file {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .45rem .45rem .45rem 1rem;
  border: 2px dashed rgba(var(--ps-brand-rgb), .3);
  border-radius: var(--ps-r-sm);
  background: #f8faff;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.ps-file-input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ps-file-icon { display: flex; color: var(--ps-brand); flex-shrink: 0; }
.ps-file-text {
  flex: 1;
  min-width: 0;
  font-size: var(--ps-fs-sm);
  color: var(--ps-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-file-btn {
  flex-shrink: 0;
  padding: .55rem 1.1rem;
  border-radius: var(--ps-r-pill);
  background: var(--ps-brand-tint);
  color: var(--ps-brand);
  font-size: var(--ps-fs-xs);
  font-weight: 700;
}
.ps-file:focus-within {
  outline: 3px solid rgba(var(--ps-brand-rgb), .55);
  outline-offset: 3px;
}

@media (hover: hover) {
  .ps-input:hover:not(:disabled):not(:focus),
  .ps-select:hover:not(:disabled):not(:focus),
  .ps-textarea:hover:not(:disabled):not(:focus) { border-color: #ccd4e6; }
  .ps-check:hover .ps-check-box,
  .ps-radio:hover .ps-radio-box { border-color: var(--ps-brand); }
  .ps-check:has(:disabled):hover .ps-check-box,
  .ps-radio:has(:disabled):hover .ps-radio-box { border-color: var(--ps-line); }
  .ps-option:hover:not(:has(:disabled)) { border-color: var(--ps-brand); }
  .ps-input-btn:hover { background: var(--ps-brand-tint); color: var(--ps-brand); }
  .ps-file:hover { border-color: var(--ps-brand); background: var(--ps-brand-tint); }
  .ps-file:hover .ps-file-btn { background: var(--ps-brand); color: #fff; }
}


/* ============================================================
   16. HELPERS & ACCESSIBILITY
   ============================================================ */

.ps-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ps-skip-link {
  position: absolute;
  left: 1rem;
  top: -120%;
  z-index: 999;
  padding: .7rem 1.2rem;
  border-radius: var(--ps-r-xs);
  background: var(--ps-brand);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.ps-skip-link:focus { top: 1rem; color: #fff; }

.ps-btn:focus-visible,
.ps-link:focus-visible,
.ps-link-arrow:focus-visible,
a.ps-feature:focus-visible,
.ps-header-links a:focus-visible,
.ps-drawer-links a:focus-visible,
.ps-footer-links a:focus-visible,
.ps-footer-lang a:focus-visible,
.ps-burger:focus-visible,
.ps-drawer-close:focus-visible,
.ps-header-brand:focus-visible,
.ps-input-btn:focus-visible,
.ps-skip-link:focus-visible {
  outline: 3px solid rgba(var(--ps-brand-rgb), .55);
  outline-offset: 3px;
  border-radius: var(--ps-r-xs);
}
.ps-hero-dark .ps-btn:focus-visible,
.ps-hero-spot .ps-btn:focus-visible,
.ps-cta-brand .ps-btn:focus-visible,
.ps-cta-dark .ps-btn:focus-visible,
.ps-footer-links a:focus-visible,
.ps-footer-lang a:focus-visible,
.ps-section-dark .ps-btn:focus-visible { outline-color: rgba(255, 255, 255, .8); }

.ps-hidden { display: none !important; }
@media (max-width: 767px) { .ps-hide-mobile  { display: none !important; } }
@media (min-width: 768px) { .ps-hide-desktop { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .ps-page *,
  .ps-page *::before,
  .ps-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ps-btn:hover,
  a.ps-feature:hover { transform: none; }
}


/* ============================================================
   17. QUIZ ANSWER OPTIONS  (.ps-answer)
   ============================================================ */
.ps-answer {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  padding: .9rem 1.1rem;
  border: 2px solid var(--ps-line);
  border-radius: var(--ps-r-sm);
  background: var(--ps-surface);
  font-family: inherit;
  font-size: var(--ps-fs-sm);
  font-weight: 600;
  color: var(--ps-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.ps-answer-letter {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ps-line);
  border-radius: 50%;
  background: var(--ps-bg-soft);
  color: var(--ps-muted);
  font-size: var(--ps-fs-xs);
  font-weight: 800;
  transition: inherit;
}
.ps-answer-text { flex: 1; min-width: 0; }
.ps-answer-icon { flex-shrink: 0; }

.ps-answer-selected { border-color: var(--ps-brand); background: var(--ps-brand-tint); box-shadow: 0 6px 18px rgba(var(--ps-brand-rgb), .15); }
.ps-answer-selected .ps-answer-letter { background: var(--ps-brand); border-color: var(--ps-brand); color: #fff; }

.ps-answer-correct { border-color: var(--ps-success); background: var(--ps-success-tint); }
.ps-answer-correct .ps-answer-letter { background: var(--ps-success); border-color: var(--ps-success); color: #fff; }
.ps-answer-correct .ps-answer-icon { color: var(--ps-success); }

.ps-answer-wrong { border-color: var(--ps-danger); background: var(--ps-danger-tint); }
.ps-answer-wrong .ps-answer-letter { background: var(--ps-danger); border-color: var(--ps-danger); color: #fff; }
.ps-answer-wrong .ps-answer-icon { color: var(--ps-danger); }

.ps-answer:disabled { cursor: default; }
.ps-answer:focus-visible {
  outline: 3px solid rgba(var(--ps-brand-rgb), .55);
  outline-offset: 3px;
}

@media (hover: hover) {
  .ps-answer:not(:disabled):hover { border-color: var(--ps-brand); background: var(--ps-brand-tint); }
  .ps-answer:not(:disabled):hover .ps-answer-letter { border-color: var(--ps-brand); color: var(--ps-brand); }
}


/* ============================================================
   18. CAROUSEL  (.ps-carousel)
   Scroll-snap based, no JS: swipe, keyboard or anchor links.
   ============================================================ */
.ps-carousel {
  --ps-car-per-view: 1;
  --ps-car-gap: clamp(.85rem, .5rem + 1.2vw, 1.5rem);
  --ps-car-peek: 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ps-gap);
}

/* --- Optional head row (title left, arrows right) ------------------ */
.ps-carousel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ps-gap);
}
.ps-carousel-head-body { display: flex; flex-direction: column; gap: .35rem; min-width: 0; max-width: 62ch; }
.ps-carousel-head-nav  { display: flex; gap: .5rem; flex-shrink: 0; }

/* --- Stage (positioning context for the arrows) -------------------- */
.ps-carousel-stage { position: relative; }

/* --- Scroller ------------------------------------------------------ */
.ps-carousel-track {
  display: flex;
  gap: var(--ps-car-gap);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: .5rem;
  margin-block: -.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ps-carousel-track::-webkit-scrollbar { display: none; }
.ps-carousel-track:focus-visible {
  outline: 3px solid rgba(var(--ps-brand-rgb), .55);
  outline-offset: 4px;
  border-radius: var(--ps-r-sm);
}

.ps-carousel-slide {
  flex: 0 0 auto;
  width: calc(
    (100% - var(--ps-car-peek) - (var(--ps-car-per-view) - 1) * var(--ps-car-gap))
    / var(--ps-car-per-view)
  );
  scroll-snap-align: start;
  min-width: 0;
}

/* --- Items per view ------------------------------------------------ */
@media (min-width: 640px) {
  .ps-carousel-2, .ps-carousel-3, .ps-carousel-4 { --ps-car-per-view: 2; }
}
@media (min-width: 992px) {
  .ps-carousel-3 { --ps-car-per-view: 3; }
  .ps-carousel-4 { --ps-car-per-view: 3; }
}
@media (min-width: 1200px) {
  .ps-carousel-4 { --ps-car-per-view: 4; }
}

/* Shows a sliver of the next slide as a swipe affordance */
.ps-carousel-peek { --ps-car-peek: clamp(2rem, 8vw, 4rem); }

/* Breaks out of .ps-container on small screens */
.ps-carousel-bleed .ps-carousel-track {
  margin-inline: calc(var(--ps-container-pad) * -1);
  padding-inline: var(--ps-container-pad);
  scroll-padding-inline: var(--ps-container-pad);
}

/* Softens the cut-off edges */
.ps-carousel-fade .ps-carousel-track {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

/* --- Card slide ---------------------------------------------------- */
.ps-carousel-card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  height: 100%;
  border-radius: var(--ps-r);
  background: var(--ps-surface);
  border: 1px solid var(--ps-line);
  box-shadow: var(--ps-shadow-xs);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .2s var(--ps-ease), box-shadow .22s var(--ps-ease), border-color .2s ease;
}
.ps-carousel-card-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
  padding: clamp(1.15rem, .9rem + .8vw, 1.6rem);
}
.ps-carousel-card-title { margin: 0; font-size: var(--ps-fs-h4); font-weight: 800; color: var(--ps-ink); letter-spacing: -.01em; }
.ps-carousel-card-text  { margin: 0; font-size: var(--ps-fs-sm); line-height: 1.65; color: var(--ps-ink-soft); }
.ps-carousel-card-foot  { margin-top: auto; padding-top: .35rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }

.ps-carousel-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--ps-bg-soft);
  border-bottom: 1px solid var(--ps-line);
  overflow: hidden;
}
.ps-carousel-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-carousel-media-tag {
  position: absolute;
  left: .75rem; top: .75rem;
}

.ps-carousel-card-dark {
  background: var(--ps-dark-soft);
  border-color: rgba(255, 255, 255, .1);
}
.ps-carousel-card-dark .ps-carousel-card-title { color: #fff; }
.ps-carousel-card-dark .ps-carousel-card-text  { color: rgba(255, 255, 255, .7); }
.ps-carousel-card-dark .ps-carousel-media      { border-bottom-color: rgba(255, 255, 255, .1); }

/* --- Figure slide (gallery) ---------------------------------------- */
.ps-carousel-figure { margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.ps-carousel-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ps-r);
  border: 1px solid var(--ps-line);
  background: var(--ps-bg-soft);
}
.ps-carousel-caption { font-size: var(--ps-fs-xs); color: var(--ps-muted); }

/* --- Arrows (anchor links to a slide id) --------------------------- */
.ps-carousel-arrow {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--ps-line);
  background: var(--ps-surface);
  color: var(--ps-ink);
  box-shadow: var(--ps-shadow-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s var(--ps-ease);
}
.ps-carousel-stage > .ps-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.ps-carousel-stage > .ps-carousel-arrow-prev { left: 0;  margin-left: -22px; }
.ps-carousel-stage > .ps-carousel-arrow-next { right: 0; margin-right: -22px; }
.ps-carousel-arrow:focus-visible {
  outline: 3px solid rgba(var(--ps-brand-rgb), .55);
  outline-offset: 3px;
}
.ps-carousel-arrow.ps-is-disabled {
  opacity: .35;
  pointer-events: none;
}

.ps-carousel-dark .ps-carousel-arrow {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(8px);
}

/* Arrows are redundant on touch; the track is swipeable */
@media (max-width: 767px) {
  .ps-carousel-arrow { display: none; }
}

/* --- Dots (anchor links to a slide id) ------------------------------ */
.ps-carousel-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.ps-carousel-nav-start { justify-content: flex-start; }
.ps-carousel-nav-end   { justify-content: flex-end; }
.ps-carousel-nav[hidden] { display: none; }

.ps-carousel-dot {
  display: block;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--ps-line);
  cursor: pointer;
  transition: background-color .18s ease, width .22s var(--ps-ease);
}
.ps-carousel-dot:focus-visible {
  outline: 3px solid rgba(var(--ps-brand-rgb), .55);
  outline-offset: 3px;
}
.ps-carousel-dot.ps-is-active {
  width: 26px;
  border-radius: var(--ps-r-pill);
  background: var(--ps-brand);
}
.ps-carousel-dark .ps-carousel-dot { background: rgba(255, 255, 255, .25); }
.ps-carousel-dark .ps-carousel-dot.ps-is-active { background: #fff; }

/* --- Dark context --------------------------------------------------- */
.ps-carousel-dark .ps-carousel-card {
  background: var(--ps-dark-soft);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: none;
}
.ps-carousel-dark .ps-carousel-card-title { color: #fff; }
.ps-carousel-dark .ps-carousel-card-text  { color: rgba(255, 255, 255, .7); }
.ps-carousel-dark .ps-carousel-card .ps-small { color: rgba(255, 255, 255, .7); }
.ps-carousel-dark .ps-carousel-media      { border-bottom-color: rgba(255, 255, 255, .1); }
.ps-carousel-dark .ps-carousel-caption    { color: rgba(255, 255, 255, .6); }

@media (hover: hover) {
  a.ps-carousel-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ps-shadow-md);
    border-color: rgba(var(--ps-brand-rgb), .3);
  }
  .ps-carousel-arrow:hover {
    background: var(--ps-brand);
    border-color: var(--ps-brand);
    color: #fff;
  }
  .ps-carousel-dot:hover { background: var(--ps-brand); }
}


/* ============================================================
   19. FAQ ACCORDION  (.ps-faq)
   Native <details>/<summary>, no JS required. Add the "name"
   attribute on the items to get an exclusive accordion.
   ============================================================ */
.ps-faq {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.ps-faq-item {
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-r);
  background: var(--ps-surface);
  box-shadow: var(--ps-shadow-xs);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .22s var(--ps-ease);
}
.ps-faq-item[open] {
  border-color: rgba(var(--ps-brand-rgb), .35);
  box-shadow: 0 10px 30px rgba(var(--ps-brand-rgb), .1);
}

.ps-faq-q {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: clamp(.95rem, .85rem + .4vw, 1.3rem) clamp(1rem, .85rem + .6vw, 1.5rem);
  cursor: pointer;
  list-style: none;
  font-size: var(--ps-fs-h4);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ps-ink);
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease, background-color .15s ease;
}
.ps-faq-q::-webkit-details-marker { display: none; }
.ps-faq-q::marker { content: ''; }
.ps-faq-q-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.ps-faq-q-text { min-width: 0; }
.ps-faq-q-sub  { font-size: var(--ps-fs-xs); font-weight: 600; color: var(--ps-muted); }
.ps-faq-item[open] .ps-faq-q { color: var(--ps-brand); }

/* Leading tile, combine with .ps-tint-* */
.ps-faq-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--ps-brand-tint);
  color: var(--ps-brand);
}
.ps-faq-num {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--ps-brand-tint);
  color: var(--ps-brand);
  font-size: var(--ps-fs-xs);
  font-weight: 900;
}
.ps-faq-item[open] .ps-faq-num { background: var(--ps-brand); color: #fff; }

.ps-faq-chev {
  display: flex;
  flex-shrink: 0;
  color: var(--ps-muted);
  transition: transform .22s var(--ps-ease), color .15s ease;
}
.ps-faq-item[open] .ps-faq-chev { transform: rotate(180deg); color: var(--ps-brand); }

/* Drawn plus/minus, alternative to .ps-faq-chev */
.ps-faq-plus {
  position: relative;
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ps-brand-tint);
  transition: background-color .18s ease;
}
.ps-faq-plus::before,
.ps-faq-plus::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--ps-brand);
  transition: transform .22s var(--ps-ease), background-color .18s ease;
}
.ps-faq-plus::after { transform: rotate(90deg); }
.ps-faq-item[open] .ps-faq-plus { background: var(--ps-brand); }
.ps-faq-item[open] .ps-faq-plus::before,
.ps-faq-item[open] .ps-faq-plus::after { background: #fff; }
.ps-faq-item[open] .ps-faq-plus::after { transform: rotate(0); }

.ps-faq-a {
  padding: 0 clamp(1rem, .85rem + .6vw, 1.5rem) clamp(1rem, .9rem + .5vw, 1.4rem);
  font-size: var(--ps-fs-sm);
  line-height: 1.7;
  color: var(--ps-ink-soft);
}
.ps-faq-a p { margin: 0; }
.ps-faq-a > * + * { margin-top: .7rem; }
/* Aligns the answer with the question text when a tile or number is used */
.ps-faq-a-indent { padding-left: calc(clamp(1rem, .85rem + .6vw, 1.5rem) + 38px + .85rem); }

/* Intro column next to the questions */
.ps-faq-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
.ps-faq-aside { display: flex; flex-direction: column; gap: var(--ps-gap); min-width: 0; }

@media (min-width: 900px) {
  .ps-faq-split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .ps-faq-aside { position: sticky; top: calc(var(--ps-header-h-compact) + 1.5rem); }
  .ps-faq-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.25rem, .6rem + 2.5vw, 3rem);
    align-items: start;
  }
  /* Second column starts a new list, so it needs its own top border */
  .ps-faq-flush.ps-faq-2 .ps-faq-item:nth-child(2) { border-top: 1px solid var(--ps-line); }
}

/* Divider list instead of cards */
.ps-faq-flush { gap: 0; }
.ps-faq-flush .ps-faq-item {
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.ps-faq-flush .ps-faq-item:first-child { border-top: 1px solid var(--ps-line); }
.ps-faq-flush .ps-faq-item[open] { border-color: var(--ps-line); box-shadow: none; }
.ps-faq-flush .ps-faq-q,
.ps-faq-flush .ps-faq-a { padding-inline: 0; }
.ps-faq-flush .ps-faq-a-indent { padding-left: calc(38px + .85rem); }

.ps-faq-dark .ps-faq-item {
  background: var(--ps-dark-soft);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: none;
}
.ps-faq-dark .ps-faq-item[open] { border-color: rgba(255, 255, 255, .28); box-shadow: none; }
.ps-faq-dark .ps-faq-q,
.ps-faq-dark .ps-faq-item[open] .ps-faq-q { color: #fff; }
.ps-faq-dark .ps-faq-q-sub { color: rgba(255, 255, 255, .55); }
.ps-faq-dark .ps-faq-a { color: rgba(255, 255, 255, .72); }
.ps-faq-dark .ps-faq-chev,
.ps-faq-dark .ps-faq-item[open] .ps-faq-chev { color: rgba(255, 255, 255, .62); }
.ps-faq-dark .ps-faq-icon,
.ps-faq-dark .ps-faq-num,
.ps-faq-dark .ps-faq-plus { background: rgba(255, 255, 255, .12); color: #fff; }
.ps-faq-dark .ps-faq-plus::before,
.ps-faq-dark .ps-faq-plus::after { background: #fff; }
.ps-faq-dark .ps-faq-item[open] .ps-faq-num,
.ps-faq-dark .ps-faq-item[open] .ps-faq-plus { background: #fff; color: var(--ps-dark); }
.ps-faq-dark .ps-faq-item[open] .ps-faq-plus::before,
.ps-faq-dark .ps-faq-item[open] .ps-faq-plus::after { background: var(--ps-dark); }
.ps-faq-dark.ps-faq-flush .ps-faq-item,
.ps-faq-dark.ps-faq-flush .ps-faq-item:first-child,
.ps-faq-dark.ps-faq-flush .ps-faq-item:nth-child(2),
.ps-faq-dark.ps-faq-flush .ps-faq-item[open] { border-color: rgba(255, 255, 255, .1); }

.ps-faq-q:focus-visible {
  outline: 3px solid rgba(var(--ps-brand-rgb), .55);
  outline-offset: -3px;
}

@media (hover: hover) {
  .ps-faq-item:hover { border-color: rgba(var(--ps-brand-rgb), .3); }
  .ps-faq-q:hover { color: var(--ps-brand); }
  .ps-faq-q:hover .ps-faq-chev { color: var(--ps-brand); }
  .ps-faq-flush .ps-faq-item:hover { border-color: var(--ps-line); }
  .ps-faq-dark .ps-faq-item:hover { border-color: rgba(255, 255, 255, .28); }
  .ps-faq-dark .ps-faq-q:hover { color: #fff; }
  .ps-faq-dark .ps-faq-q:hover .ps-faq-chev { color: #fff; }
}