/* The product pages (SITE-28): /product/{strategy,content,distribution,routines}. Built only from the v2 system
   (tokens.css, base.css, surfaces.css, components.css) and the carousel kit; no new tokens. Markup:
   src/v2/product/page.mjs and tidbits.mjs. Text sits inside .wrap's inset; boards, frames and card rows run to the
   rails. Layouts: 1440 (and up), 1024, 768, 430 and 390 are designed, not shrunk. */

/* ── The stand-in nav (SITE-21 owns the real one) ── */
.pp-nav { position: sticky; top: 0; z-index: 50; }
.pp-nav__bar { width: min(100% - 2 * var(--gutter), var(--column)); margin-inline: auto; padding-inline: var(--inset); height: 64px; display: flex; align-items: center; gap: 24px; }
.pp-nav__logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.pp-nav__logo img { width: 159px; height: 24px; }
.pp-nav__links { display: flex; gap: 4px; margin-inline: auto; }
.pp-nav__links .menu-trigger { height: 44px; }
.pp-nav__links [aria-current="true"] { color: var(--ink); }
.pp-nav__right { display: flex; align-items: center; gap: 8px; }
.pp-nav__right .btn, .pp-nav__right .menu-trigger { height: 44px; }
@media (max-width: 860px) {
  .pp-nav__links, .pp-nav__signin { display: none; }
  .pp-nav__right { margin-left: auto; }
}

/* ── Hero ── */
.pp-hero { padding-block: clamp(40px, 24px + 4vw, 88px) clamp(72px, 48px + 5vw, 120px); }
.pp-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 2rem + 2vw, 72px); align-items: center; }
.pp-hero__copy { display: grid; justify-items: start; gap: 22px; padding-block: 24px; }
.pp-kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1 var(--font-body); color: var(--ink-80); }
.pp-kicker .pixel-ui { color: var(--ink-58); }
.pp-kicker__sep { color: var(--ink-32); }
.pp-hero__h1 { max-width: 11.5em; }
.pp-hero__lead { max-width: 30em; }
.pp-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
/* The board: media, so it runs to the right rail. */
.pp-hero__stage { margin-right: calc(-1 * var(--inset)); display: grid; gap: 10px; }
.pp-board {
  position: relative; isolation: isolate; overflow: hidden; height: 540px; border-radius: var(--r-lg) 0 0 var(--r-lg);
  background: var(--paper); border: 1px solid var(--hairline); border-right: 0;
  display: grid; place-items: center;
}
.pp-board::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at center, rgb(21 19 15 / .12) .9px, transparent 1.3px); background-size: 22px 22px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 25%, transparent 100%); mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 25%, transparent 100%); }
.pp-hero__cap { padding-inline: 4px var(--inset); }
@media (max-width: 960px) {
  .pp-hero__grid { grid-template-columns: 1fr; }
  .pp-hero__stage { margin-inline: calc(-1 * var(--inset)); }
  .pp-board { border-radius: 0; border-inline: 0; height: 500px; padding-inline: var(--inset); }
  .pp-hero__cap { padding-inline: var(--inset); }
}
@media (max-width: 520px) {
  .pp-hero__copy { padding-block: 8px 0; gap: 18px; }
  .pp-hero__ctas { width: 100%; gap: 8px; }
  .pp-hero__ctas .btn { flex: 1 1 auto; height: 48px; padding: 0 16px; font-size: 15px; }
  .pp-board { height: 460px; }
}

/* Section heads without a numeral: the eyebrow, then the h2 and lead in one column. */
.pp-head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
.pp-head > * { grid-column: 1; }
.pp-head .sec-head__lead { margin-top: 0; }

/* ── 01 · the numbered tab showcase ── */
/* A section that ends in a full-width hairline frame (the tabs, the cards row, the jobs grid): half the usual padding under
   it, which otherwise read as an empty ruled strip between the rails (SITE-26 G3 advisory). */
.section:has(> .wrap > :is(.pp-frame, .pp-cards):last-child, > .wrap > .pp-own__body:last-child > .pp-jobs:last-child) { padding-bottom: calc(var(--section-y) / 2); }
.pp-frame { margin-top: clamp(36px, 24px + 2vw, 56px); border-block: 1px solid var(--hairline); padding: 16px var(--inset) clamp(24px, 16px + 1.5vw, 40px); background: var(--canvas); }
.pp-tabs { gap: clamp(20px, 12px + 1.5vw, 36px); }
.pp-tabs .tabs__list { margin-inline: -6px; }
.pp-panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(24px, 1rem + 3vw, 64px); align-items: center; }
.pp-panel__copy { display: grid; justify-items: start; gap: 18px; }
.pp-chip { background: var(--tone-soft); border-color: transparent; color: var(--tone-ink); box-shadow: none; }
.pp-panel__h { max-width: 14em; }
.pp-checks { display: grid; gap: 14px; margin-top: 6px; }
.pp-checks li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.4; color: var(--ink-80); }
.pp-checks i { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tone-soft); color: var(--tone-ink); }
.pp-checks svg { width: 12px; height: 12px; }
.pp-viz {
  position: relative; isolation: isolate; overflow: hidden; height: 440px; border-radius: var(--r-lg);
  background: var(--paper); box-shadow: inset 0 0 0 1px rgb(21 19 15 / .06); display: grid; place-items: center;
}
.pp-viz::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at center, rgb(21 19 15 / .11) .9px, transparent 1.3px); background-size: 22px 22px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 20%, transparent 100%); mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 20%, transparent 100%); }
@media (max-width: 960px) {
  .pp-panel { grid-template-columns: 1fr; gap: 24px; }
  .pp-viz { margin-inline: calc(-1 * var(--inset)); padding-inline: var(--inset); border-radius: 0; height: 400px; }
  .pp-frame { padding-bottom: 0; }
}
@media (max-width: 520px) { .pp-viz { height: 470px; } .pp-checks li { font-size: 15px; } }

/* ── 02 · the card row ── */
.pp-cards { margin-top: clamp(36px, 24px + 2vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--hairline); background: var(--canvas); }
.pp-card { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; padding: clamp(24px, 16px + 1vw, 32px) var(--inset) 0; min-width: 0; }
.pp-card + .pp-card { border-left: 1px solid var(--hairline); }
.pp-card__t { font: 500 20px/1.25 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.pp-card__b { max-width: 26em; }
.pp-card__viz { position: relative; height: 240px; margin: 18px calc(-1 * var(--inset)) 0; display: grid; place-items: center; overflow: hidden; border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--paper), rgb(250 247 242 / .4)); }
.pp-card.is-live .pp-card__viz { background: linear-gradient(180deg, color-mix(in oklab, var(--tone-soft) 55%, var(--paper)), rgb(250 247 242 / .4)); }
.pp-card__viz { transition: background-color 400ms var(--ease-out); }
@media (max-width: 960px) {
  .pp-cards { grid-template-columns: 1fr; }
  .pp-card + .pp-card { border-left: 0; border-top: 1px solid var(--hairline); }
  .pp-card { grid-template-columns: 1fr; }
}

/* ── The four-step strip (after SITE-27's FAQ) ── */
.pp-steps-sec { padding-block: clamp(56px, 40px + 3vw, 96px); }
@media (max-width: 760px) { .step__body { font-size: 14px; } }

/* ── The closing banner (stand-in until SITE-27's CTA reads ctx.cta) ── */
.pp-cta-sec { padding-top: 0; }
.pp-cta { display: grid; justify-items: center; text-align: center; gap: 18px; padding: clamp(56px, 32px + 5vw, 104px) var(--inset); }
.pp-cta__h { color: #fff; max-width: 13em; }
.pp-cta__lead { max-width: 30em; font-size: var(--t-lead); line-height: 1.45; color: rgb(255 255 255 / .9); }
.pp-cta__btns { margin-top: 10px; }
@media (max-width: 760px) { .pp-cta { border-radius: 0; } }

/* ── The stand-in footer ── */
.pp-foot { position: relative; padding: 72px 0 clamp(200px, 22vw, 360px); }
.pp-foot__in { display: grid; gap: 28px; justify-items: start; }
.pp-foot__logo { display: inline-flex; min-height: 48px; color: var(--ink); }
.pp-foot__logo img { width: 318px; height: 48px; }
.pp-foot__links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.pp-foot__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--ink-80); }
.pp-foot__links a:hover { color: var(--ink); }
.pp-foot__note { max-width: 60em; }
@media (max-width: 520px) { .pp-foot__logo img { width: 212px; height: 32px; } }

/* ════════════════════════════════════════════════════════════════════════
   The pages' own sections
   ════════════════════════════════════════════════════════════════════════ */
.pp-own__body { margin-top: clamp(36px, 24px + 2vw, 56px); }
.pp-examples { margin-top: 20px; max-width: 60em; }

/* Strategy: five awareness levels */
.pp-aware { position: relative; }
.pp-aware__line { position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: var(--hairline-strong); overflow: hidden; }
.pp-aware__line i { position: absolute; top: 0; left: 0; width: 18%; height: 100%; background: linear-gradient(90deg, transparent, var(--orange), #fff); opacity: 0; }
.pp-aware__cols { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.pp-aware__col { display: grid; justify-items: center; align-content: start; gap: 14px; padding: 0 8px; }
.pp-aware__col + .pp-aware__col { border-left: 1px solid var(--hairline); }
.pp-aware__head { display: grid; justify-items: center; gap: 8px; text-align: center; font: 500 16px/1.2 var(--font-body); color: var(--ink); }
.pp-aware__head .pixel-ui { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 24px; border-radius: 6px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--hairline-strong); color: var(--ink-58); transition: background-color 300ms, color 300ms, box-shadow 300ms; }
.pp-aware__col.is-on .pp-aware__head .pixel-ui { background: var(--orange); color: #fff; box-shadow: none; }
.pp-aware__cover { --w: min(204px, 100%) !important; transition: transform 400ms var(--ease-out), box-shadow 400ms; }
.pp-aware__col.is-on .pp-aware__cover { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--orange), var(--shadow-lg); }
.pp-aware__cols .chip { box-shadow: none; }
@media (max-width: 1100px) {
  .pp-aware__line { display: none; }
  .pp-aware__cols { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * var(--inset)); padding: 6px var(--inset) 18px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pp-aware__cols::-webkit-scrollbar { display: none; }
  .pp-aware__col { flex: none; width: 220px; scroll-snap-align: start; padding: 0; }
  .pp-aware__col + .pp-aware__col { border-left: 0; }
  .pp-aware__cover { --w: 220px !important; }
}

/* Content: the remix rail */
.pp-rail { overflow: hidden; }
.pp-own--rail { overflow-x: clip; }   /* the rail bleeds to the page edges; 100vw never adds a sideways scroll */

/* Distribution: warmed accounts */
.pp-warm { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 2rem + 3vw, 80px); align-items: center; }
.pp-warm__points { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.pp-warm__points li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.pp-warm__points b { font: 500 18px/1.3 var(--font-display); letter-spacing: -.015em; }
.pp-warm__points .t-small { margin-top: 4px; font-size: 15px; }
.pp-warm__n { padding-top: 4px; color: var(--orange); }
.pp-warm__note { margin-top: 16px; }
.pp-warm__stage { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px; padding: 36px 32px; border-radius: var(--r-lg) 0 0 var(--r-lg); margin-right: calc(-1 * var(--inset)); background: var(--paper); box-shadow: inset 0 0 0 1px rgb(21 19 15 / .06); }
.pp-warm__phone .ck-phone { --ck-phone-w: 220px; }
.pp-feed { position: absolute; left: 0; right: 0; top: 6.925%; bottom: 0; overflow: hidden; }
.pp-feed__run { display: grid; gap: 4px; }
.pp-feed__item { display: block; aspect-ratio: 9 / 14; overflow: hidden; }
.pp-feed__item img, .pp-feed__ph img { width: 100%; height: 100%; object-fit: cover; }
.pp-feed__post { position: absolute; inset: 0; opacity: 0; }
.pp-feed__ph { position: absolute; inset: 0; }
.pp-feed__badge { position: absolute; left: 50%; top: 14%; translate: -50% 0; }
.pp-warm__panel { display: grid; gap: 14px; }
.pp-warm__day { font-variant-numeric: tabular-nums; }
.pp-warm__niche { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pp-warm__niche .tb-label { width: 100%; margin-bottom: 2px; }
.pp-warm__meter { display: grid; grid-template-columns: repeat(21, 1fr); gap: 3px; }
.pp-warm__meter i { height: 14px; border-radius: 2px; background: rgb(21 19 15 / .07); transition: background-color 200ms; }
.pp-warm__meter i.is-on { background: var(--orange); }
.pp-warm__first { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; opacity: .35; transition: opacity 400ms; }
.pp-warm__first.is-on { opacity: 1; }
.pp-warm__first .tb-meter i { width: 0; background: #7E9270; }
@media (max-width: 960px) {
  .pp-warm { grid-template-columns: 1fr; }
  .pp-warm__stage { margin-inline: calc(-1 * var(--inset)); border-radius: 0; }
}
@media (max-width: 560px) {
  .pp-warm__stage { grid-template-columns: 1fr; justify-items: center; padding: 28px 16px; gap: 20px; }
  .pp-warm__phone .ck-phone { --ck-phone-w: 200px; }
  .pp-warm__panel { width: 100%; }
}

/* Routines: ready-made routines */
.pp-jobs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid var(--hairline); }
.pp-job { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 24px var(--inset) 28px; transition: background-color 240ms; }
.pp-job + .pp-job { border-left: 1px solid var(--hairline); }
.pp-job:hover { background: var(--paper); }
.pp-job__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pp-job__name { font: 500 18px/1.25 var(--font-display); letter-spacing: -.015em; }
.pp-job__line { font-size: 14px; }
.pp-job__when { margin-top: 8px; }
.pp-job__when .chip__dot { background: #4C95D3; }
@media (max-width: 1100px) {
  .pp-jobs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .pp-jobs::-webkit-scrollbar { display: none; }
  .pp-job { flex: none; width: min(78%, 280px); scroll-snap-align: start; }
}

/* ── Content: the media library (halftone photos, SITE-20's figure.halftone) ── */
.pp-media { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.pp-media__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 14px; }
.pp-media__tile { position: relative; min-width: 0; }
.pp-media__tile--tall { grid-row: span 2; }
.pp-media__tile:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.pp-media__tile:nth-child(4) { grid-column: 4; grid-row: 1 / span 2; }
.pp-media__ph { position: absolute; inset: 0; margin: 0; border-radius: var(--r-lg); }
.pp-media__ph img { width: 100%; height: 100%; object-fit: cover; }
.pp-media__tag { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 8px; border-radius: var(--r-sm); background: rgb(255 255 255 / .94); box-shadow: 0 0 0 1px rgb(21 19 15 / .08), var(--shadow-sm); font: 500 13px/1 var(--font-body); color: var(--ink); }
.pp-media__tag .pixel-ui { padding: 3px 4px 2px; border-radius: 3px; background: var(--paper-2); color: var(--ink-64); }
.pp-media__tag--yours .pixel-ui { background: var(--lilac-soft); color: var(--lilac-ink); }
.pp-media__tile:nth-child(4) .pp-media__tag { top: 12px; bottom: auto; }
.pp-media__legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hairline); }
.pp-media__legend > div { display: grid; gap: 6px; padding: 18px 24px 0 0; }
.pp-media__legend > div + div { padding-left: 24px; border-left: 1px solid var(--hairline); }
.pp-media__legend dt { font: 500 17px/1.3 var(--font-display); letter-spacing: -.015em; color: var(--ink); }
.pp-media__legend dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-64); }
@media (max-width: 760px) {
  .pp-media__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; gap: 10px; }
  .pp-media__tile:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .pp-media__tile:nth-child(4) { grid-column: 2; grid-row: 3 / span 2; }
  .pp-media__tag { left: 8px; bottom: 8px; height: 28px; font-size: 12px; gap: 6px; }
  .pp-media__tag .pixel-ui { display: none; }
  .pp-media__legend { grid-template-columns: 1fr; }
  .pp-media__legend > div, .pp-media__legend > div + div { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--hairline); }
}

/* ── Content: the agent's playbooks ── */
.pp-skills { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 32px + 3vw, 80px); }
/* (a) the journey, as stairs */
.pp-journey { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; }
.pp-journey__step { display: grid; align-content: start; gap: 8px; padding: 16px 20px 0 0; margin-top: calc((4 - var(--k)) * 14px); border-top: 2px solid color-mix(in oklab, var(--orange) calc(30% + var(--k) * 17%), #fff); }
.pp-journey__step + .pp-journey__step { padding-left: 20px; }
.pp-journey__step b { font: 500 18px/1.2 var(--font-display); letter-spacing: -.015em; }
.pp-journey__step .pixel-ui { color: var(--orange-ink); }
.pp-journey__step .chip { justify-self: start; box-shadow: none; }
.pp-journey__step p { font-size: 15px; line-height: 1.45; color: var(--ink-64); }
.pp-journey__step .tb-stage--get-found { background: var(--orange-soft); color: var(--orange-ink); border-color: transparent; }
.pp-journey__step .tb-stage--build-trust { background: var(--lilac-soft); color: var(--lilac-ink); border-color: transparent; }
.pp-journey__step .tb-stage--make-the-sale { background: #E7EDDF; color: #3F4D33; border-color: transparent; }
/* (b) one carousel, the playbook per slide */
.pp-story { position: relative; }
.pp-story__line { position: absolute; left: 0; right: 0; top: 13px; height: 1px; background: var(--hairline-strong); overflow: hidden; }
.pp-story__line i { position: absolute; top: 0; left: 0; width: 16%; height: 100%; background: linear-gradient(90deg, transparent, #7F89EC, #fff); opacity: 0; }
.pp-story__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pp-story__col { display: grid; justify-items: center; align-content: start; gap: 14px; min-width: 0; }
.pp-story__beat { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--canvas); box-shadow: inset 0 0 0 1px var(--hairline-strong); font-size: 14px; transition: background-color 300ms, color 300ms, box-shadow 300ms; }
.pp-story__beat .pixel-ui { color: var(--ink-58); transition: color 300ms; }
.pp-story__col.is-on .pp-story__beat { background: #7F89EC; color: #fff; box-shadow: none; }
.pp-story__col.is-on .pp-story__beat .pixel-ui { color: rgb(255 255 255 / .8); }
.pp-story__cover { --w: min(204px, 100%) !important; transition: transform 400ms var(--ease-out), box-shadow 400ms; }
.pp-story__col.is-on .pp-story__cover { transform: translateY(-6px); box-shadow: 0 0 0 2px #7F89EC, var(--shadow-lg); }
.pp-story__skill { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 14px; line-height: 1.4; color: var(--ink-64); max-width: 204px; }
.pp-story__skill .chip { transition: background-color 300ms, color 300ms, border-color 300ms; }
.pp-story__skill .pix-avatar { width: 16px; height: 16px; } .pp-story__skill .pix-avatar svg { width: 8px; height: 8px; }
.pp-story__col.is-on .pp-story__skill .chip { background: var(--lilac-soft); color: var(--lilac-ink); border-color: transparent; }
/* (c) the playbooks, in plain words */
.pp-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 980px; margin-inline: auto; }
.pp-cloud__chip { height: auto; min-height: 36px; padding: 8px 14px; white-space: normal; box-shadow: none; font-weight: 450; color: var(--ink-80); }
@media (max-width: 1100px) {
  .pp-journey { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--inset)); padding: 0 var(--inset) 8px; gap: 16px; align-items: stretch; }
  .pp-journey::-webkit-scrollbar { display: none; }
  .pp-journey__step, .pp-journey__step + .pp-journey__step { flex: none; width: 220px; margin-top: 0; padding: 16px 0 0; scroll-snap-align: start; }
  .pp-story__line { display: none; }
  .pp-story__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--inset)); padding: 8px var(--inset) 12px; gap: 16px; }
  .pp-story__row::-webkit-scrollbar { display: none; }
  .pp-story__col { flex: none; width: 220px; scroll-snap-align: start; }
  .pp-story__cover { --w: 220px !important; }
  .pp-cloud { justify-content: flex-start; }
  .pp-cloud__chip { font-size: 14px; }
}