/* ==========================================================================
   Pearl IMS — page-specific layout (grows as each template is built;
   Home first, then Solutions/Features/Industries/etc.)
   ========================================================================== */

.pim-section--tint{ background:var(--pim-surface-tint-2); border-top:1px solid var(--pim-border-4); border-bottom:1px solid var(--pim-border-4); }
.pim-section-head{ text-align:center; max-width:680px; margin:0 auto; }
.pim-accent{ color:var(--pim-blue); }

/* ---- Hero -------------------------------------------------------------- */
.pim-hero{ position:relative; background:linear-gradient(180deg,var(--pim-surface-tint) 0%,#fff 60%); border-bottom:1px solid var(--pim-border-4); }
.pim-hero__inner{ position:relative; padding-top:84px; padding-bottom:96px; display:flex; flex-wrap:wrap; gap:56px; align-items:center; }
.pim-hero__copy{ flex:1 1 460px; min-width:min(300px,100%); }
.pim-hero__title{ margin:24px 0 0; font-weight:800; font-size:clamp(38px,5.4vw,62px); line-height:1.04; letter-spacing:-.035em; color:var(--pim-text); text-wrap:balance; }
.pim-hero__subtitle{ margin:24px 0 0; font-size:19px; line-height:1.6; color:var(--pim-text-muted); max-width:540px; }
.pim-hero__ctas{ margin-top:34px; display:flex; flex-wrap:wrap; gap:13px; }
.pim-hero__trust-line{ margin-top:30px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.pim-hero__trust-item{ display:flex; align-items:center; gap:7px; color:var(--pim-text-muted); font-size:14px; font-weight:500; }
.pim-hero__trust-item svg{ color:var(--pim-green); flex:none; }
.pim-hero__trust-item strong{ color:var(--pim-text); }
.pim-hero__trust-sep{ width:1px; height:16px; background:var(--pim-border-2); }

.pim-hero__window{ flex:1 1 460px; min-width:min(300px,100%); }

/* Hero proportions ---------------------------------------------------------
   The even split is right for a single screenshot and wrong for a composed
   graphic: at ~570px a wide, detailed image renders too small to read, which
   is the whole reason someone made a detailed image. */
@media (min-width: 981px){
  /* Large: the copy stops growing and the image takes what is left — about
     690px in a 1200px container, against 570px for an even split. */
  .pim-hero__inner--wide .pim-hero__copy{ flex:0 1 430px; max-width:470px; }
  .pim-hero__inner--wide .pim-hero__window{ flex:1 1 560px; }

  /* Full width: copy centred above, image across the whole container. For a
     wide landscape composition this is the only arrangement that gives it
     enough room to be legible. */
  .pim-hero__inner--full{ flex-direction:column; gap:44px; align-items:stretch; }
  .pim-hero__inner--full .pim-hero__copy{ flex:0 0 auto; max-width:760px; margin-inline:auto; text-align:center; }
  .pim-hero__inner--full .pim-hero__subtitle{ max-width:none; margin-left:auto; margin-right:auto; }
  .pim-hero__inner--full .pim-hero__ctas,
  .pim-hero__inner--full .pim-hero__trust-line{ justify-content:center; }
  .pim-hero__inner--full .pim-hero__window{ flex:0 0 auto; width:100%; }
  /* Everything else in this layout is centred; a play button left-aligned
     under a centred hero reads as a mistake. */
  .pim-hero__inner--full .pim-hero__chips{ justify-content:center; margin-left:0; }
}
.pim-window{ border-radius:16px; border:1px solid var(--pim-border); background:#fff; box-shadow:var(--pim-shadow-sm), var(--pim-shadow-lg); overflow:hidden; }
.pim-window__bar{ display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--pim-border-4); background:#FBFCFE; }
.pim-window__bar span:not(.pim-window__url){ width:11px; height:11px; border-radius:50%; background:#E2E5EF; }
.pim-window__url{ margin-left:10px; font:500 12px/1 var(--pim-font-mono); color:var(--pim-text-faint-3); }


/* Hero visual styles -------------------------------------------------------
   "browser" is the frame above: right for a raw product screenshot, wrong for
   a graphic someone has composed, because it crops to 16:11 and sits on an
   opaque white card. These two let the image keep its own shape. */

/* Free: no frame, no background, no crop. A transparent PNG shows the page
   through it, and whatever its proportions are, they survive. */

/* Card: contained, but on the image's own terms — rounded and lifted, with no
   browser bar and no imposed ratio. For an opaque composition that still wants
   an edge. */
.pim-free-shot--card{
  border-radius:16px; overflow:hidden;
  border:1px solid var(--pim-border);
  background:#fff;
  box-shadow:var(--pim-shadow-sm), var(--pim-shadow-lg);
}

/* The chips tuck under the bottom-left corner of a framed image. A free image
   has no corner to tuck under and may be transparent exactly there, so they
   sit below it instead of overlapping into empty space. */
.pim-hero__window--free .pim-hero__chips{ margin-top:4px; margin-left:0; }

.pim-hero__chips{ display:flex; gap:12px; margin-top:-26px; margin-left:24px; flex-wrap:wrap; position:relative; }
.pim-chip{ background:#fff; border:1px solid var(--pim-border); border-radius:12px; padding:12px 15px; box-shadow:0 10px 24px -12px rgba(12,19,49,.25); display:flex; align-items:center; gap:11px; animation:pim-rise-sm .6s cubic-bezier(.16,1,.3,1) both; animation-delay:.3s; }
.pim-chip--dark{ background:var(--pim-navy); border-color:transparent; box-shadow:0 10px 24px -12px rgba(12,19,49,.4); animation-delay:.45s; }
.pim-chip__icon{ width:36px; height:36px; border-radius:9px; background:var(--pim-green-bg); color:var(--pim-green); display:flex; align-items:center; justify-content:center; flex:none; }
.pim-chip__icon--green{ background:var(--pim-green-bg); color:var(--pim-green); }
.pim-chip__icon--blue{ background:rgba(255,255,255,.1); color:#7FA0FF; }
.pim-chip__title{ font-weight:800; font-size:16px; color:var(--pim-text); }
.pim-chip__title--light{ color:#fff; }
.pim-chip__sub{ font-size:12px; color:var(--pim-text-faint); font-weight:500; }
.pim-chip__sub--light{ color:#9FAAD0; }

/* ---- Product overview ---------------------------------------------------- */
.pim-overview-grid{ margin-top:48px; display:flex; flex-wrap:wrap; gap:24px; }
.pim-overview-main{ flex:2 1 520px; min-width:min(300px,100%); border-radius:18px; border:1px solid var(--pim-border); background:linear-gradient(180deg,var(--pim-surface-tint),#fff); overflow:hidden; box-shadow:var(--pim-shadow-sm); }
.pim-overview-main__copy{ padding:30px 32px 0; }
.pim-overview-main__copy h3{ margin:0; font-weight:700; font-size:21px; color:var(--pim-text); }
.pim-overview-main__copy p{ margin:8px 0 0; font-size:15.5px; line-height:1.55; color:var(--pim-text-muted-2); max-width:440px; }
.pim-overview-main__shot{ margin:24px 32px 0; border-radius:12px 12px 0 0; border:1px solid var(--pim-border); border-bottom:none; }
.pim-overview-side{ flex:1 1 300px; min-width:min(260px,100%); display:flex; flex-direction:column; gap:24px; }
.pim-overview-side__card{ flex:1; border-radius:18px; border:1px solid var(--pim-border); background:#fff; padding:28px; box-shadow:var(--pim-shadow-sm); }
.pim-overview-side__card h3{ margin:18px 0 0; font-weight:700; font-size:19px; color:var(--pim-text); }
.pim-overview-side__card p{ margin:8px 0 0; font-size:14.5px; line-height:1.55; color:var(--pim-text-muted-2); }
.pim-overview-side__card--dark{ background:var(--pim-navy); color:#fff; border:none; position:relative; overflow:hidden; }
.pim-overview-side__card--dark h3{ color:#fff; }
.pim-overview-side__card--dark p{ color:#A8B2D4; }

/* ---- Why Pearl IMS band --------------------------------------------------- */
.pim-why-band{ background:var(--pim-navy-2); color:#fff; position:relative; overflow:hidden; }
.pim-why-band__inner{ position:relative; padding-top:96px; padding-bottom:96px; display:flex; flex-wrap:wrap; gap:56px; }
.pim-why-band__copy{ flex:1 1 380px; min-width:min(280px,100%); }
.pim-why-band__copy .pim-lede{ max-width:460px; }
.pim-why-band__ctas{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; }
.pim-why-band__stats{ flex:1 1 380px; min-width:min(280px,100%); align-content:start; }

/* ---- Industries ------------------------------------------------------------ */
.pim-industry-card{ border:1px solid var(--pim-border); border-radius:14px; padding:24px; background:var(--pim-surface-tint); transition:border-color .18s ease; }
.pim-industry-card:hover{ border-color:var(--pim-blue); }
.pim-industry-card h3{ margin:16px 0 4px; font-weight:700; font-size:17px; color:var(--pim-text); }
.pim-industry-card p{ margin:0; font-size:14px; line-height:1.5; color:var(--pim-text-muted-2); }
.pim-industry-card--cta{ border:1px dashed #C9D0E6; background:#fff; display:flex; flex-direction:column; justify-content:center; }
.pim-industry-card--cta h3{ margin:0 0 4px; color:var(--pim-blue); }

/* ---- Customer Success preview ---------------------------------------------- */
.pim-cs-featured{ margin-top:42px; border-radius:20px; overflow:hidden; border:1px solid var(--pim-border); background:#fff; display:flex; flex-wrap:wrap; box-shadow:var(--pim-shadow-sm); }
.pim-cs-featured__media{ flex:1 1 360px; min-width:min(280px,100%); min-height:340px; }
.pim-cs-featured__media img{ width:100%; height:100%; object-fit:cover; }
.pim-cs-featured__copy{ flex:1 1 380px; min-width:min(300px,100%); padding:44px; display:flex; flex-direction:column; justify-content:center; }
.pim-cs-featured__brand{ display:flex; align-items:center; gap:10px; }
.pim-cs-featured__logo-fallback{ width:36px; height:36px; border-radius:8px; background:var(--pim-navy); flex:none; }
.pim-cs-featured__school{ font-weight:700; font-size:15px; color:var(--pim-text); }
.pim-cs-featured__badge{ margin-left:auto; color:var(--pim-blue); background:var(--pim-blue-light); padding:6px 10px; border-radius:999px; letter-spacing:.06em; }
.pim-cs-featured__title{ margin:20px 0 0; font-weight:800; font-size:25px; line-height:1.2; letter-spacing:-.02em; color:var(--pim-text); }
.pim-cs-featured__title a{ text-decoration:none; color:inherit; }
.pim-cs-featured__copy > p{ margin:14px 0 0; font-size:16px; line-height:1.6; color:var(--pim-text-muted); }
.pim-cs-featured__stats{ margin-top:24px; display:flex; flex-wrap:wrap; gap:28px; }
.pim-cs-featured__stat-num{ font-weight:800; font-size:26px; color:var(--pim-blue); }
.pim-cs-featured__stat-label{ font-size:13px; color:var(--pim-text-faint); }
.pim-cs-featured .pim-link-arrow{ margin-top:28px; }

.pim-media-card{ display:block; text-decoration:none; border:1px solid var(--pim-border); border-radius:16px; overflow:hidden; background:#fff; transition:box-shadow .2s ease; }
.pim-media-card:hover{ box-shadow:0 18px 36px -20px rgba(12,19,49,.22); }
.pim-media-card__img{ display:block; }
.pim-media-card__img img{ width:100%; height:100%; object-fit:cover; }
.pim-media-card__body{ display:block; padding:24px; }
.pim-media-card__eyebrow{ display:block; color:var(--pim-blue); letter-spacing:.06em; }
.pim-media-card__title{ display:block; margin:10px 0 6px; font-weight:700; font-size:18px; color:var(--pim-text); }
.pim-media-card__desc{ display:block; font-size:14.5px; line-height:1.55; color:var(--pim-text-muted-2); }

/* ---- Insights preview -------------------------------------------------------- */
.pim-insights-preview{ margin-top:42px; display:flex; flex-wrap:wrap; gap:24px; }
.pim-insights-featured{ flex:1.6 1 420px; min-width:min(300px,100%); border:1px solid var(--pim-border); border-radius:18px; overflow:hidden; background:#fff; display:block; transition:box-shadow .2s ease; }
.pim-insights-featured:hover{ box-shadow:0 20px 40px -22px rgba(12,19,49,.24); }
.pim-insights-featured__img{ aspect-ratio:16/8; }
.pim-insights-featured__img img{ width:100%; height:100%; object-fit:cover; }
.pim-insights-featured__body{ padding:30px; }
.pim-insights-featured__meta{ display:flex; align-items:center; gap:10px; font:600 11px/1 var(--pim-font-mono); color:var(--pim-text-faint); letter-spacing:.04em; }
.pim-insights-featured__cat{ color:var(--pim-blue); }
.pim-insights-featured__body h3{ margin:14px 0 0; font-weight:800; font-size:24px; line-height:1.25; letter-spacing:-.02em; }
.pim-insights-featured__body h3 a{ color:var(--pim-text); text-decoration:none; }
.pim-insights-featured__body p{ margin:12px 0 0; font-size:15.5px; line-height:1.6; color:var(--pim-text-muted); }
.pim-insights-featured__byline{ margin-top:20px; display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--pim-text-muted-2); }
.pim-avatar-dot{ width:34px; height:34px; border-radius:50%; background:#E2E6F2; flex:none; }
.pim-insights-featured__byline strong{ color:var(--pim-text); }

.pim-insights-side{ flex:1 1 300px; min-width:min(260px,100%); display:flex; flex-direction:column; gap:14px; }
.pim-side-row{ text-decoration:none; display:flex; gap:16px; border:1px solid var(--pim-border); border-radius:14px; padding:18px; background:#fff; align-items:center; transition:border-color .18s ease; }
.pim-side-row:hover{ border-color:var(--pim-border-strong); }
.pim-side-row__icon{ flex:none; width:48px; height:48px; border-radius:10px; background:var(--pim-blue-light); color:var(--pim-blue); display:flex; align-items:center; justify-content:center; }
.pim-side-row__icon--blue{ background:var(--pim-blue-light); color:var(--pim-blue); }
.pim-side-row__icon--green{ background:var(--pim-green-bg); color:var(--pim-green); }
.pim-side-row__icon--orange{ background:var(--pim-orange-bg); color:var(--pim-orange); }
.pim-side-row__eyebrow{ display:block; letter-spacing:.06em; color:var(--pim-blue); }
.pim-side-row__title{ display:block; margin-top:5px; font-weight:700; font-size:15px; color:var(--pim-text); line-height:1.3; }
.pim-side-row--more{ justify-content:center; border-style:dashed; border-color:#C9D0E6; color:var(--pim-blue); font-weight:600; font-size:14.5px; gap:8px; }
.pim-side-row--more:hover{ background:var(--pim-surface-tint); }

/* ---- Featured video band -------------------------------------------------- */
.pim-video-band{ background:var(--pim-navy-2); color:#fff; }
.pim-video-band__inner{ padding-top:96px; padding-bottom:96px; display:flex; flex-wrap:wrap; gap:48px; align-items:center; }
.pim-video-band__copy{ flex:1 1 320px; min-width:min(280px,100%); }
.pim-video-band__copy .pim-lede{ max-width:420px; }
.pim-video-band__media{ flex:1.3 1 420px; min-width:min(300px,100%); }
.pim-video-band__frame{ position:relative; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.12); aspect-ratio:16/9; }
.pim-video-band__tag{ position:absolute; top:14px; left:14px; background:rgba(0,0,0,.25); border-color:rgba(255,255,255,.2); color:#9FAAD0; }
.pim-video-band__play{ width:74px; height:74px; border-radius:50%; background:var(--pim-blue); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(27,63,224,.5); color:#fff; transition:transform .2s ease; }
.pim-video-band__frame:hover .pim-video-band__play{ transform:scale(1.06); }

/* ---- CTA band ---------------------------------------------------------------- */
.pim-cta-band{ background:var(--pim-blue); color:#fff; position:relative; overflow:hidden; }
/* Decorative only — must never intercept clicks on the CTA buttons beneath it. */
.pim-cta-band__glow{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.14),transparent 40%),radial-gradient(circle at 10% 90%,rgba(255,255,255,.1),transparent 45%); }
.pim-cta-band__inner{ position:relative; max-width:1100px; padding:84px 32px; text-align:center; }
.pim-cta-band__title{ margin:0; font-weight:800; font-size:clamp(32px,4.4vw,52px); line-height:1.08; letter-spacing:-.03em; text-wrap:balance; }
.pim-cta-band__body{ margin:18px auto 0; font-size:19px; line-height:1.6; color:#D7DEFF; max-width:560px; }
.pim-cta-band__actions{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.pim-cta-band__footnote{ margin:22px 0 0; font-size:14px; color:#C3CEFF; }

@media (max-width: 640px){
	.pim-hero__inner{ padding-top:56px; padding-bottom:64px; }
	.pim-cs-featured__copy{ padding:28px; }
	.pim-why-band__inner, .pim-video-band__inner{ padding-top:64px; padding-bottom:64px; }
}

/* ==========================================================================
   Homepage pricing teaser (.pim-priceband)
   One shelf divided by hairlines rather than three floating cards — visually
   distinct from the pricing page's card grid, so the two don't read as the
   same component rendered twice.
   ========================================================================== */
.pim-priceband .pim-kicker-copy{ max-width:660px; margin:0 auto; text-align:center; }
.pim-priceband__shelf{ position:relative; margin-top:44px; border:1px solid var(--pim-border); border-radius:22px; background:#fff; box-shadow:0 28px 60px -34px rgba(12,19,49,.24); overflow:hidden; }
.pim-priceband__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.pim-pricecol{ position:relative; display:flex; flex-direction:column; padding:30px 22px 26px; border-right:1px solid var(--pim-border-3); }
.pim-pricecol:last-child{ border-right:0; }
.pim-pricecol--popular{ background:linear-gradient(180deg, rgba(27,63,224,.055), rgba(27,63,224,0) 62%); }
.pim-pricecol--popular::before{ content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--pim-blue),var(--pim-blue-soft)); pointer-events:none; }

.pim-pricecol__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:24px; }
.pim-pricecol__name{ font:600 13px/1 var(--pim-font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--pim-text-muted); }
.pim-pricecol--popular .pim-pricecol__name{ color:var(--pim-blue); }
.pim-pricecol__badge{ font:700 10px/1 var(--pim-font-mono); letter-spacing:.1em; text-transform:uppercase; padding:5px 9px; border-radius:999px; background:var(--pim-blue); color:#fff; }

.pim-pricecol__price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:5px; margin:16px 0 0; }
.pim-pricecol__cur{ font-weight:600; font-size:17px; color:var(--pim-text-muted); }
.pim-pricecol__amount{ font-weight:800; font-size:clamp(28px,2.6vw,36px); line-height:1; letter-spacing:-.03em; color:var(--pim-text); font-variant-numeric:tabular-nums; }
.pim-pricecol__period{ font-size:14px; color:var(--pim-text-faint-2); }
.pim-pricecol__summary{ margin:12px 0 0; font-size:13.5px; line-height:1.5; color:var(--pim-text-muted); }

.pim-pricecol__list{ margin:20px 0 0; display:flex; flex-direction:column; gap:10px; }
.pim-pricecol__list li{ display:flex; align-items:flex-start; gap:9px; font-size:14px; line-height:1.45; color:var(--pim-text); }
.pim-pricecol__tick{ flex:none; display:flex; align-items:center; justify-content:center; width:18px; height:18px; margin-top:1px; border-radius:50%; background:var(--pim-green-bg); color:var(--pim-green); }
.pim-pricecol__more{ display:inline-block; margin:14px 0 0; font:600 12.5px/1 var(--pim-font-mono); letter-spacing:.04em; color:var(--pim-blue); border-bottom:1px dashed currentColor; align-self:flex-start; transition:opacity .2s; }
.pim-pricecol__more:hover{ opacity:.7; }
/* The body block absorbs the column's spare height, which is what bottom-aligns
   the four buttons however differently their summaries and feature labels wrap.
   (Doing it with `margin-top:auto` on the button did not work: the more specific
   `.pim-pricecol__cta.pim-btn` rule needed for spacing overrode it.)
   Nothing here may touch the button's padding — its own symmetric padding is
   what centres the label, and an earlier `padding-top:0` zeroed the top only,
   pushing every label upward. */
.pim-pricecol__body{ flex:1 1 auto; display:flex; flex-direction:column; }
.pim-pricecol__cta.pim-btn{ margin-top:26px; text-align:center; }

.pim-priceband__foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:20px 30px; border-top:1px solid var(--pim-border-3); background:var(--pim-surface-tint); }
.pim-priceband__included{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 22px; }
.pim-priceband__included li{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--pim-text-muted); }
.pim-priceband__icon{ display:flex; color:var(--pim-green); }
.pim-priceband__link{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; color:var(--pim-blue); white-space:nowrap; transition:gap .2s ease; }
.pim-priceband__link:hover{ gap:12px; }

@media (max-width: 1180px){
  .pim-priceband__grid{ grid-template-columns:repeat(2,1fr); }
  .pim-pricecol:nth-child(2n){ border-right:0; }
  .pim-pricecol:nth-child(-n+2){ border-bottom:1px solid var(--pim-border-3); }
}
@media (max-width: 720px){
  .pim-priceband__grid{ grid-template-columns:1fr; }
  .pim-pricecol{ border-right:0; border-bottom:1px solid var(--pim-border-3); padding:28px 24px; }
  .pim-pricecol:last-child{ border-bottom:0; }
  .pim-pricecol--popular{ order:-1; }
  .pim-priceband__foot{ padding:20px 24px; }
}
@media (max-width: 560px){
  .pim-priceband__foot{ flex-direction:column; align-items:flex-start; }
  .pim-priceband__included{ gap:8px 16px; }
}

/* Editor-only prompt where a content-driven section has nothing to show ----- */
.pim-section-empty{ margin-top:28px; border:1px dashed var(--pim-border-2); border-radius:16px; background:var(--pim-surface-tint); padding:26px 28px; }
.pim-section-empty__note{ margin:0; font-size:14.5px; line-height:1.6; color:var(--pim-text-muted); }
.pim-section-empty__note strong{ color:var(--pim-text); }
.pim-section-empty__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }

/* Legal documents (Terms of Service, Privacy Policy) ------------------------ */
/* A wall of clauses needs a narrow measure and generous spacing far more than
   it needs decoration. The contents rail sticks beside it on desktop and sits
   above it on a phone, where there is no room to park anything. */
.pim-legal__body{
  display:grid; grid-template-columns:minmax(0,1fr); gap:32px;
  padding-top:clamp(32px,4vw,48px); padding-bottom:clamp(56px,7vw,88px);
}
/* The second column only exists when there is a rail to put in it. Applying
   the two-column track unconditionally put a page with no rail — content whose
   headings carry no ids, which is what WordPress's own boilerplate is — into
   the 240px column, leaving a narrow strip of text beside an empty half-screen. */
@media (min-width: 900px){
  .pim-legal__body--with-toc{ grid-template-columns:240px minmax(0,1fr); gap:56px; align-items:start; }
  .pim-legal__body--with-toc .pim-legal__toc{ position:sticky; top:calc(var(--pim-header-h) + 24px); }
}

.pim-legal__toc{
  background:var(--pim-surface-tint-2); border:1px solid var(--pim-border-3);
  border-radius:14px; padding:18px 20px;
  max-height:calc(100vh - var(--pim-header-h) - 48px); overflow-y:auto;
}
.pim-legal__toc-title{
  margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--pim-text-faint);
}
.pim-legal__toc ol{ margin:0; padding:0 0 0 18px; display:flex; flex-direction:column; gap:7px; }
.pim-legal__toc li{ font-size:13.5px; color:var(--pim-text-muted); }
.pim-legal__toc a{ color:var(--pim-text-muted); text-decoration:none; }
.pim-legal__toc a:hover{ color:var(--pim-blue); text-decoration:underline; }

.pim-legal__content{ max-width:72ch; }
/* Beside the rail it belongs on the left. With no rail, a 72ch block pinned to
   the left of a 1200px container just looks like a mistake — centre it. */
.pim-legal__body:not(.pim-legal__body--with-toc) .pim-legal__content{ margin-inline:auto; }
.pim-legal__updated{
  margin:0 0 28px; font-size:13px; color:var(--pim-text-faint);
  padding-bottom:16px; border-bottom:1px solid var(--pim-border-3);
}
.pim-legal__content .pim-legal-lede{ font-size:17.5px; line-height:1.65; color:var(--pim-text-muted); }
/* scroll-margin so an anchored heading clears the fixed header. */
.pim-legal__content h2{
  margin:40px 0 14px; font-size:clamp(20px,2.2vw,23px); font-weight:800;
  letter-spacing:-.01em; color:var(--pim-text); scroll-margin-top:calc(var(--pim-header-h) + 20px);
}
.pim-legal__content h2:first-of-type{ margin-top:8px; }
.pim-legal__content h3{ margin:26px 0 10px; font-size:16.5px; font-weight:700; color:var(--pim-text); }
.pim-legal__content p{ margin:0 0 15px; font-size:15.5px; line-height:1.75; color:var(--pim-text-muted); }
/* base.css strips list markers site-wide, which is right for navigation and
   card grids and wrong here: in a legal document the list is the content, and
   a run of indented paragraphs doesn't read as one. Put them back. */
.pim-legal__content ul,
.pim-legal__content ol{ margin:0 0 18px; padding-left:22px; display:flex; flex-direction:column; gap:9px; }
.pim-legal__content ul{ list-style:disc; }
.pim-legal__content ol{ list-style:decimal; }
.pim-legal__content li{ list-style:inherit; display:list-item; }
.pim-legal__content li::marker{ color:var(--pim-text-faint); }
/* The contents rail is navigation, so it keeps the numbers but not the dots. */
.pim-legal__toc ol{ list-style:decimal; }
.pim-legal__toc li{ list-style:decimal; display:list-item; }
.pim-legal__toc li::marker{ color:var(--pim-text-faint-2); font-size:12px; }
.pim-legal__content li{ font-size:15.5px; line-height:1.7; color:var(--pim-text-muted); }
.pim-legal__content strong{ color:var(--pim-text); font-weight:650; }
.pim-legal__content a{ color:var(--pim-blue); }

/* Admin-only, so it can be loud without costing a visitor anything. */
.pim-legal__notice{
  margin:0 0 28px; padding:14px 16px; border-radius:12px;
  background:#FFF8E5; border:1px solid #F0DCA4;
}
.pim-legal__notice p{ margin:0; font-size:13.5px; line-height:1.6; color:#6B5415; }
.pim-legal__notice p + p{ margin-top:8px; }
.pim-legal__notice a{ color:#6B5415; }


/* Mobile apps — a column per app ------------------------------------------
   Replaced a single drifting strip of all three apps. Three products reading
   as one strip was the problem; so was asking people to chase a moving target
   to read a screenshot. Each app now gets its own column, its own heading and
   its own arrows, and nothing moves until somebody presses one. */
.pim-appsgrid__row{
  display:grid; gap:clamp(20px,3vw,40px); margin-top:44px;
  grid-template-columns:repeat(var(--pim-app-columns,3),minmax(0,1fr));
  align-items:start;
}
@media (max-width: 1180px){
  /* Three columns in a narrower container: give the phone the room back by
     taking it off the arrows, which need far less of it. */
  .pim-appcol{ padding-left:10px; padding-right:10px; }
  .pim-appcol__viewer{ gap:4px; }
  .pim-appnav{ width:34px; height:34px; }
}
@media (max-width: 980px){
  .pim-appsgrid__row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pim-appcol{ padding-left:18px; padding-right:18px; }
  .pim-appcol__viewer{ gap:10px; }
  .pim-appnav{ width:38px; height:38px; }
}
@media (max-width: 620px){
  .pim-appsgrid__row{ grid-template-columns:minmax(0,1fr); gap:34px; }
}

.pim-appcol{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:24px 18px 20px;
  background:var(--pim-surface-tint-2);
  border:1px solid var(--pim-border-3); border-radius:18px;
}
.pim-appcol__name{
  margin:0; font-size:17px; font-weight:800; letter-spacing:-.01em;
  color:var(--pim-text); text-align:center;
}

/* The stage holds every screen of this app on top of one another, so the
   column's height is fixed by the tallest and the layout doesn't jump as you
   step. Hidden screens use the `hidden` attribute, which also keeps them out
   of the tab order and away from screen readers. */
/* Arrows beside the screen, not under it: the control sits where the thing it
   controls is, and the phone keeps the centre of the column. The stage is
   allowed to shrink (flex-shrink 1, min-width 0) so the three of them always
   fit the column rather than pushing a button out of it. */
.pim-appcol__viewer{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; }
.pim-appcol__stage{ position:relative; flex:0 1 230px; min-width:0; aspect-ratio:9/19.5; }
.pim-appcol__screen{ position:absolute; inset:0; margin:0; }
.pim-appcol__screen[hidden]{ display:none; }
.pim-appcol__img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  display:block; border-radius:14px; background:#fff;
}

/* A slim device bezel for raw screenshots; turned off for mockups that
   already have a phone drawn around them. */
.pim-appcol__stage--framed{ padding:7px; background:var(--pim-navy); border-radius:26px;
  box-shadow:0 18px 40px -22px rgba(12,19,49,.55), inset 0 0 0 1px rgba(255,255,255,.06); }
.pim-appcol__stage--framed .pim-appcol__screen{ inset:7px; }
.pim-appcol__stage--framed .pim-appcol__img{ border-radius:19px; }
.pim-appcol__stage--framed::after{
  content:""; position:absolute; top:13px; left:50%; transform:translateX(-50%);
  width:46px; height:5px; border-radius:3px; background:rgba(255,255,255,.22); z-index:2;
}

/* Reserve two lines so stepping between a short and a long caption doesn't
   shunt the arrows up and down. */
.pim-appcol__caption{
  margin:0; min-height:2.8em; font-size:13.5px; line-height:1.45;
  color:var(--pim-text-muted); text-align:center;
}

.pim-appnav{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--pim-border-2); color:var(--pim-text);
  cursor:pointer; transition:border-color .15s ease, color .15s ease, transform .15s ease;
}
.pim-appnav:hover{ border-color:var(--pim-blue); color:var(--pim-blue); }
.pim-appnav:active{ transform:scale(.94); }
.pim-appnav:focus-visible{ outline:2px solid var(--pim-blue); outline-offset:2px; }
.pim-appcol__count{
  margin:0; font-size:13px; color:var(--pim-text-faint);
  font-variant-numeric:tabular-nums; text-align:center;
}
.pim-appcol__count strong{ color:var(--pim-text); font-weight:700; }

.pim-appsgrid__foot{ margin:26px 0 0; text-align:center; font-size:13px; color:var(--pim-text-faint); }