/* =====================================================================
   blessbible.app — product pages (features, pricing, FAQ, translations, press)
   gen/pages_product.py. Built on site.css tokens; every class is .pp-*.
   Animate transform/opacity only; content fades where it meets an edge.
   ===================================================================== */

/* ---------- hero: text + a visual ---------- */
.pp-hero { display: grid; gap: clamp(36px, 6vw, 64px); align-items: center; overflow-x: clip; margin-bottom: clamp(28px, 5vw, 56px); }
.pp-hero__title { font-size: clamp(2.3rem, 1.35rem + 3.3vw, 4.05rem); line-height: 1.02; max-width: calc(17 * var(--ch-serif)); }
.pp-hero .page-lede { max-width: calc(54 * var(--ch)); }
.pp-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 30px; }
.pp-hero__note { font-size: 14.5px; line-height: 1.45; color: var(--dim); max-width: calc(26 * var(--ch)); }
.pp-hero .page-meta { margin-top: 22px; }
.pp-hero__vis { position: relative; display: grid; place-items: center; min-width: 0; }
@media (min-width: 980px) {
  .pp-hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(40px, 5vw, 80px); }
  .pp-hero--stack { grid-template-columns: 1fr; }
}
.pp-hero--stack .pp-hero__title { max-width: calc(20 * var(--ch-serif)); }
.pp-hero--stack .page-lede { max-width: calc(62 * var(--ch)); }

/* a soft candle glow behind visuals (static; no blur filters) */
.pp-halo { position: absolute; z-index: -1; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(201 164 76 / .26), rgb(201 164 76 / .1) 45%, transparent 72%); }
:root[data-theme="light"] .pp-halo { background: radial-gradient(closest-side, rgb(201 164 76 / .42), rgb(201 164 76 / .14) 45%, transparent 72%); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .pp-halo { background: radial-gradient(closest-side, rgb(201 164 76 / .42), rgb(201 164 76 / .14) 45%, transparent 72%); } }

/* ---------- phones (real screenshots in core frames) ---------- */
.pp-phones { position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; padding-block: 8px 20px; }
.pp-phones > div { grid-area: 1 / 1; }
.pp-phones .phone { --sw: clamp(168px, 44vw, 268px); }
.pp-phones--2 .pp-phones__f { transform: translateX(15%); z-index: 2; }
.pp-phones--2 .pp-phones__b { transform: translate(-32%, 5%) rotate(-5deg) scale(.86); z-index: 1; opacity: .9; }
.pp-phones--3 .phone { --sw: clamp(150px, 40vw, 236px); }
.pp-phones--3 .pp-phones__f { z-index: 3; }
.pp-phones--3 .pp-phones__b { transform: translate(-52%, 6%) rotate(-7deg) scale(.82); z-index: 1; opacity: .88; }
.pp-phones--3 .pp-phones__c { transform: translate(52%, 6%) rotate(7deg) scale(.82); z-index: 2; opacity: .88; }
@media (min-width: 980px) {
  .pp-phones .phone { --sw: clamp(220px, 19vw, 272px); }
  .pp-phones--3 .phone { --sw: clamp(196px, 16.5vw, 240px); }
}

/* ---------- facts strip ---------- */
.pp-strip { position: relative; padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 34px); border-radius: 26px; background: linear-gradient(180deg, var(--glass-hi), transparent 70%), var(--card);
  box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 color-mix(in srgb, var(--rim) 60%, transparent); }
.pp-strip .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
.pp-strip .stats span { max-width: calc(24 * var(--ch)); }
@media (min-width: 860px) {
  .pp-strip .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .pp-strip .stats li { padding: 0 clamp(16px, 2vw, 28px); }
  .pp-strip .stats li:first-child { padding-left: 0; }
  .pp-strip .stats li + li { border-left: 1px solid var(--line); }
}

/* ---------- sections ---------- */
.pp .sec-head .lede a, .pp .pp-text a:not(.more) { color: var(--gold); }
.pp-sec { position: relative; margin-top: clamp(72px, 10vw, 132px); }
.pp-sec--tight { margin-top: clamp(40px, 6vw, 72px); }
.pp-h2 { margin-bottom: 0; }
.pp-text { margin-top: 22px; }
.pp-text > * + * { margin-top: 16px; }
.pp-text + * { margin-top: 26px; }
.pp-center { text-align: center; margin-inline: auto; }
.pp-links { display: flex; flex-wrap: wrap; gap: 4px 26px; }
/* a band that fades in and out top and bottom — never a hard edge */
.pp-sec--panel { isolation: isolate; padding-block: clamp(44px, 6vw, 80px); }
.pp-sec--panel::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--gutter)); pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--fg) 4.5%, transparent) 22%, color-mix(in srgb, var(--fg) 4.5%, transparent) 78%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }

/* split: text + demo */
.pp-split { display: grid; gap: clamp(32px, 5vw, 56px); align-items: start; }
.pp-split__text, .pp-split__demo { min-width: 0; }
@media (min-width: 980px) {
  .pp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
  .pp-split--flip .pp-split__text { order: 2; }
  .pp-split--wide { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .pp-split--sticky { align-items: start; }
  .pp-split--sticky .pp-split__text { position: sticky; top: calc(var(--head-h) + 40px); padding-top: 24px; }
}

/* demo frames (real data rendered as the app draws it) */
.pp-demo { position: relative; display: grid; gap: 14px; padding: clamp(18px, 3vw, 28px); border-radius: 28px;
  background: linear-gradient(180deg, var(--glass-hi), transparent 50%), var(--card); box-shadow: inset 0 0 0 1px var(--rim-dim), 0 30px 60px -40px var(--shadow); }
.pp-demo .verse { max-width: none; }
.pp-demo__note { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--dim); }
.pp-demo__cap { font-size: 14px; line-height: 1.5; color: var(--dim); max-width: calc(52 * var(--ch)); }
.pp-demo--ink { background: radial-gradient(120% 90% at 0% 0%, rgb(201 164 76 / .16), transparent 60%), radial-gradient(90% 80% at 100% 100%, rgb(110 140 214 / .14), transparent 60%), #1B1724;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), 0 30px 60px -36px rgb(0 0 0 / .55); }
.pp-demo--ink .pp-demo__cap { color: rgb(239 229 208 / .62); }
.pp-shot1 { display: grid; place-items: center; position: relative; isolation: isolate; }
.pp-shot1 .phone { --sw: clamp(200px, 56vw, 270px); }

/* ---------- a comments sheet, as the app draws it ---------- */
.pp-sheet { position: relative; max-width: 480px; margin-inline: auto; padding: 10px clamp(16px, 3vw, 24px) 18px; border-radius: 30px;
  background: linear-gradient(180deg, var(--glass-hi), transparent 30%), var(--sheet); box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 var(--rim), 0 40px 80px -40px var(--shadow); }
.pp-sheet__grab { display: block; width: 38px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: var(--faint); }
.pp-sheet__ex { font: 500 1.18rem/1.32 var(--serif); color: var(--dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-sheet__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
.pp-sheet__meta b { color: var(--fg); }
.pp-sheet__meta a { display: inline-flex; align-items: center; min-height: 44px; color: var(--dim); text-decoration: none; }
.pp-sheet__meta a:hover { color: var(--gold); }
.pp-sheet__list { margin-top: 4px; }
.pp-sheet__compose { display: flex; align-items: center; gap: 9px; margin-top: 14px; min-height: 48px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; color: var(--dim);
  background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rim-dim); }
.pp-sheet__compose .i { color: var(--gold); }
.pp-sheet__foot { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--dim); }
.pp-c { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
.pp-c + .pp-c { border-top: 1px solid var(--line); }
.pp-c__who { font: 700 14.5px/1.35 var(--sans); color: var(--fg); }
.pp-c__yr { font-weight: 450; color: var(--dim); }
.pp-c__q p { margin-top: 5px; font: 600 1.16rem/1.32 var(--serif); color: var(--fg); text-wrap: pretty; }
.pp-c__src { margin-top: 6px; font-size: 13px; color: var(--dim); }
.pp-c__src--attr { color: var(--crimson); }
.pp-c--ccc > div { padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--marian-fill) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marian-fill) 22%, transparent); }
.pp-c__pin { font: 700 11px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--marian); margin-bottom: 3px; }
.pp-c__topic { margin-top: 4px; font: 600 1.16rem/1.3 var(--serif); color: var(--fg); }
.pp-c__link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font: 650 13.5px/1 var(--sans); color: var(--marian); text-decoration: none; }
.pp-c__link:hover { text-decoration: underline; }
.pp-c__also { font-size: 13px; color: var(--dim); }
.pp-av--ccc { --av: #6E8CD6; font: 700 11px/1 var(--sans); letter-spacing: .04em; }
.pp-av--chal { --av: #C9A44C; color: #15121C; }

/* ---------- three kinds of voices ---------- */
.pp-voices { display: grid; gap: 20px; }
@media (min-width: 1080px) { .pp-voices { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.pp-voice { --vc: var(--gold-fill); position: relative; display: grid; gap: 14px; padding: clamp(20px, 3vw, 28px); border-radius: 26px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rim-dim); overflow: hidden; isolation: isolate; }
.pp-voice::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 160px; background: radial-gradient(90% 100% at 0% 0%, color-mix(in srgb, var(--vc) 16%, transparent), transparent 70%); }
.pp-voice--crimson { --vc: var(--crimson-fill); } .pp-voice--marian { --vc: var(--marian-fill); }
.pp-voice__k { display: flex; align-items: center; gap: 9px; font: 700 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.pp-voice__t { font: 600 clamp(1.45rem, 1.25rem + .7vw, 1.85rem)/1.12 var(--serif); color: var(--fg); text-wrap: balance; }
.pp-voice__d { font-size: 15.5px; line-height: 1.6; color: var(--fg-2); }
.pp-voice .quotes { padding: 2px 16px; }
.pp-voice .quote__q p { font-size: 1.2rem; }
.pp-voice__verse .vtext { font-size: 1.25rem; }
.pp-ccc { display: grid; gap: 10px; }
.pp-ccc .ccc-list { padding: 2px 16px; border-radius: 18px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rim-dim); }

/* ---------- how far it reaches ---------- */
.pp-reach { display: grid; gap: clamp(28px, 4vw, 44px); }
.pp-reach__head .body { margin-top: 20px; }
.pp-tiers { display: grid; gap: 14px; counter-reset: none; }
@media (min-width: 720px) { .pp-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pp-tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pp-tier { --t: 1; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 22px 22px 20px; border-radius: 22px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rim-dim); overflow: hidden; }
.pp-tier::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--crimson-fill); opacity: var(--t); }
.pp-tier:nth-child(2) { --t: .7; } .pp-tier:nth-child(3) { --t: .45; } .pp-tier:nth-child(4) { --t: .22; }
.pp-tier__n { font: 600 clamp(2.1rem, 1.7rem + 1.4vw, 2.9rem)/1 var(--serif); color: var(--gold); letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.pp-tier__u { font: 650 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.pp-tier p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.pp-reach__notes { display: grid; gap: 22px 64px; }
.pp-reach__col { display: grid; gap: 16px; align-content: start; }
@media (min-width: 980px) { .pp-reach__notes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- mini FAQ ---------- */
.pp-faq { display: grid; gap: 28px; }
@media (min-width: 980px) { .pp-faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); column-gap: clamp(40px, 6vw, 96px); row-gap: 18px; align-items: start; } .pp-faq .sec-head { position: sticky; top: calc(var(--head-h) + 32px); } .pp-faq__more { grid-column: 2; } }
.pp-faq .sec-head { margin-bottom: 0; }
.pp-faq__more { margin-top: 0; }

/* ---------- related pages ---------- */
.pp-related .kicker { margin-bottom: 18px; }
.pp-related__grid { display: grid; gap: 12px; }
@media (min-width: 760px) { .pp-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pp-rel { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; grid-template-areas: "ic k go" "ic t go" "ic d go"; column-gap: 14px; align-items: start;
  padding: 18px 18px 18px 16px; border-radius: 20px; text-decoration: none; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rim-dim); transition: transform .35s var(--ease), background-color .3s; }
.pp-rel:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--fg) 10%, transparent); }
.pp-rel__ic { grid-area: ic; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--gold); background: color-mix(in srgb, var(--gold-fill) 12%, transparent); }
.pp-rel__k { grid-area: k; font: 700 11.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.pp-rel__t { grid-area: t; margin-top: 3px; font: 600 1.25rem/1.2 var(--serif); color: var(--fg); }
.pp-rel__d { grid-area: d; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--dim); }
.pp-rel__go { grid-area: go; align-self: center; color: var(--gold); transition: transform .3s var(--ease); }
.pp-rel:hover .pp-rel__go { transform: translateX(3px); }

/* ---------- /features/: peek tiles ---------- */
.pp-tiles { display: grid; gap: 16px; }
@media (min-width: 720px) { .pp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pp-tile { position: relative; display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--glass-hi), transparent 40%), var(--card); box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 color-mix(in srgb, var(--rim) 50%, transparent); }
.pp-tile::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -30%; width: 120%; aspect-ratio: 1.3; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgb(201 164 76 / .2), transparent 72%); }
.pp-tile__text { padding: 26px 26px 6px; }
.pp-tile__k { display: flex; align-items: center; gap: 9px; font: 700 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.pp-tile__t { margin-top: 12px; font: 600 clamp(1.5rem, 1.3rem + .7vw, 1.9rem)/1.12 var(--serif); color: var(--fg); text-wrap: balance; }
.pp-tile__d { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--fg-2); }
.pp-tile__go { margin-top: 6px; }
.pp-tile__shot { position: relative; margin-top: auto; height: 340px; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; padding-top: 24px;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 98%); mask-image: linear-gradient(180deg, #000 58%, transparent 98%); }
.pp-tile__shot .phone { --sw: 226px; }
@media (max-width: 719.98px) { .pp-tile__shot { height: 300px; } .pp-tile__shot .phone { --sw: 210px; } }
/* a focal window: the phone is lifted by --fy of its screen height (screen = --sw × 1434/660) so its
   subject sits in the clear band; the cut top then fades in softly instead of meeting a hard edge */
.pp-tile__shot--focus .phone { translate: 0 calc(var(--sw) * -2.1727 * var(--fy, 0)); }
.pp-tile__shot--focus { -webkit-mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / .5) 7%, #000 16%, #000 64%, transparent 98%);
  mask-image: linear-gradient(180deg, transparent 0, rgb(0 0 0 / .5) 7%, #000 16%, #000 64%, transparent 98%); }
/* a tile drawn in HTML instead of a screenshot (Discover: the app's shot quotes the Douay-Rheims) */
.pp-tile__shot--card { padding: 22px 22px 0; }
.pp-sheet--mini { width: min(340px, 100%); margin: 0; padding: 10px 18px 16px; border-radius: 26px; }
.pp-sheet--mini .pp-sheet__ex { font-size: 1.05rem; }
.pp-sheet--mini .pp-sheet__meta { min-height: 0; padding-bottom: 10px; font-size: 13.5px; }
.pp-sheet--mini .pp-sheet__meta span { color: var(--dim); }
.pp-sheet--mini .pp-c { padding: 12px 0; }
.pp-dmini { position: relative; width: min(320px, 100%); margin: 0; padding: 20px 20px 26px; border-radius: 24px;
  background: linear-gradient(180deg, var(--glass-hi), transparent 40%), var(--card-2);
  box-shadow: inset 0 0 0 1px var(--rim-dim), 0 22px 44px -26px rgb(0 0 0 / .55); }
.pp-dmini__n { position: absolute; top: 14px; right: 14px; padding: 6px 10px; border-radius: 999px; font: 600 11px/1 var(--sans);
  color: var(--fg-2); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rim-dim); }
.pp-dmini__theme { display: inline-block; padding: 5px 10px; border-radius: 999px; font: 700 10.5px/1 var(--sans); letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); }
.pp-dmini__v { margin: 16px 0 0; font: 600 1.32rem/1.18 var(--serif); color: var(--fg); text-wrap: pretty; }
.pp-dmini__ref { margin-top: 10px; font: 600 11px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.pp-dmini__q { margin-top: 16px; padding: 13px 15px; border-radius: 16px; background: var(--card-2);
  box-shadow: inset 3px 0 0 var(--crimson-fill), inset 0 0 0 1px var(--rim-dim); }
.pp-dmini__k { display: flex; align-items: center; gap: 7px; font: 700 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--crimson); }
.pp-dmini__k i { width: 6px; height: 6px; border-radius: 50%; background: var(--crimson-fill); }
.pp-dmini__qt { margin-top: 8px; font: italic 600 1.08rem/1.25 var(--serif); color: var(--fg); }
.pp-dmini__src { margin-top: 7px; font-size: 12.5px; line-height: 1.35; color: var(--dim); }
@media (prefers-reduced-motion: no-preference) {
  .pp-tile__shot--card .pp-dmini { transition: transform .7s var(--ease-out); }
  .pp-tile:hover .pp-tile__shot--card .pp-dmini { transform: translateY(-10px); }
  .pp-tile__shot .phone { transition: transform .7s var(--ease-out); }
  .pp-tile:hover .pp-tile__shot .phone { transform: translateY(-10px); }
}
/* the wide cards: widgets + Duo */
.pp-wides { display: grid; gap: 16px; }
@media (min-width: 980px) { .pp-wides { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.pp-wide { position: relative; display: grid; gap: 22px; padding: 26px; border-radius: 28px; text-decoration: none; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--glass-hi), transparent 40%), var(--card); box-shadow: inset 0 0 0 1px var(--rim-dim); transition: transform .35s var(--ease); }
.pp-wide:hover { transform: translateY(-2px); }
.pp-wide .more { margin-top: 6px; }
.pp-wide { align-content: space-between; }
.pp-wide__vis { min-width: 0; }
.pp-wide__vis.pp-wstage { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 18px 0 6px; }

/* small features */
.pp-feats { display: grid; gap: 12px; }
@media (min-width: 640px) { .pp-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pp-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pp-feat { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; padding: 20px 20px 20px 18px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rim-dim); }
.pp-feat__ic { grid-row: span 2; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--gold); background: color-mix(in srgb, var(--gold-fill) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-fill) 26%, transparent); }
.pp-feat__t { font: 650 16px/1.3 var(--sans); color: var(--fg); margin-top: 2px; }
.pp-feat p { margin-top: 5px; font-size: 15px; line-height: 1.55; color: var(--dim); }

/* pricing box on the hub */
.pp-pricebox { display: grid; gap: 32px; }
.pp-pricebox .body { margin-top: 20px; }
.pp-pricebox__cols { display: grid; gap: 14px; }
@media (min-width: 720px) { .pp-pricebox__cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pp-pricebox { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); align-items: center; gap: 64px; } }
.pp-pcol { padding: 22px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rim-dim); }
.pp-pcol--prem { background: linear-gradient(180deg, rgb(201 164 76 / .12), transparent 70%), var(--card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-fill) 42%, transparent); }
.pp-pcol__h { font: 700 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); margin-bottom: 12px; }
.pp-pcol--prem .pp-pcol__h { color: var(--gold); }
.pp-plist { display: grid; gap: 10px; }
.pp-plist li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 11px; font-size: 15.5px; line-height: 1.5; color: var(--fg-2); }
.pp-plist .i { margin-top: 4px; color: var(--s-green); }
.pp-plist--gold .i { color: var(--gold); }

/* ---------- /features/study/ ---------- */
.pp-studygrid { display: grid; gap: clamp(32px, 5vw, 48px); }
@media (min-width: 1024px) {
  .pp-studygrid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(48px, 6vw, 88px); align-items: start; }
  .pp-anchor { position: sticky; top: calc(var(--head-h) + 32px); }
}
.pp-anchor .body { margin-top: 18px; }
.pp-anchor__verse { margin: 28px 0 22px; padding: clamp(22px, 3vw, 32px); border-radius: 26px; background: linear-gradient(180deg, var(--glass-hi), transparent 60%), var(--card);
  box-shadow: inset 0 0 0 1px var(--rim-dim), 0 30px 60px -40px var(--shadow); }
.pp-anchor__verse .verse { max-width: none; }
.pp-anchor .fine .pill { vertical-align: 1px; }
.pp-tabs .rtabs__bar { max-width: none; }
.pp-pnote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 22px 0 14px; font-size: 15px; line-height: 1.45; color: var(--dim); }
.pp-pnote .pill { vertical-align: 0; }
.pp-sub { margin-top: 14px; color: var(--gold); }
.pp-orig { font: 500 1.75rem/1.5 var(--hebrew); color: var(--fg); text-align: right; }
.pp-orig--g { font: 600 1.3rem/1.42 var(--serif); text-align: left; }
.pp-words { display: grid; gap: 6px; margin-top: 8px; }
.pp-words li { padding: 10px 13px; border-radius: 13px; background: color-mix(in srgb, var(--fg) 5%, transparent); font-size: 14.5px; line-height: 1.45; color: var(--fg-2); }
.pp-words b, .pp-kw b { font: 600 1.32rem/1.15 var(--serif); color: var(--fg); }
.pp-words b[lang="he"], .pp-kw b[lang="he"] { font-family: var(--hebrew); font-weight: 500; }
.pp-words i, .pp-kw i { margin-left: 6px; color: var(--dim); }
.pp-words span { display: block; margin-top: 2px; }
.pp-kw { margin-bottom: 4px; }
.pp-along li { padding: 9px 0; }
.pp-along li + li { border-top: 1px solid var(--line); }
.pp-along a { display: inline-flex; align-items: center; min-height: 32px; font: 650 14px/1.2 var(--sans); color: var(--gold); text-decoration: none; }
.pp-along a:hover { text-decoration: underline; }
.pp-along span { display: block; font: 600 1.14rem/1.32 var(--serif); color: var(--fg); }
.pp-latin { font: italic 500 1.3rem/1.4 var(--serif); color: var(--fg); }
.pp-lockrow { margin-top: 12px; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--gold-fill) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-fill) 22%, transparent); }
.pp-lockrow__k { display: flex; align-items: center; gap: 8px; font: 700 11.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.pp-lockrow__l { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pp-lockrow__l li { padding: 6px 11px; border-radius: 999px; font-size: 13.5px; color: var(--dim); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rim-dim); }

/* comparison tables */
.pp-compare th[scope="col"]:not(:first-child), .pp-compare td { text-align: center; }
.pp-compare td { width: 22%; min-width: 108px; }
.pp-compare tbody th { font-weight: 550; color: var(--fg); min-width: 200px; }
.pp-yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #15121C; background: var(--gold-fill); box-shadow: 0 0 14px rgb(201 164 76 / .32); }
.pp-no { color: var(--dim); font-size: 18px; }
.pp-txt { font-size: 14px; line-height: 1.35; color: var(--fg-2); }
.pp-compare--big tbody th { font-size: 16px; }
@media (max-width: 640px) {
  .pp-compare th, .pp-compare td { padding: 12px 8px; }
  .pp-compare th:first-child { padding-left: 16px; }
  .pp-compare tbody th { min-width: 0; font-size: 15px; }
  .pp-compare--big tbody th { font-size: 15px; }
  .pp-compare td { width: 76px; min-width: 76px; }
  .pp-compare thead th { font-size: 11px; letter-spacing: .08em; }
  .pp-txt { font-size: 13px; }
}
/* stack_table: one card per row on phones */
@media (max-width: 700px) {
  .pp-stack { background: none; box-shadow: none; overflow: visible; }
  .pp-stack table, .pp-stack tbody, .pp-stack tr, .pp-stack th, .pp-stack td { display: block; }
  .pp-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pp-stack caption { display: block; padding: 0 2px 12px; }
  .pp-stack .num { text-align: left; }
  .pp-numtable tbody tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .pp-numtable tbody th, .pp-numtable td:last-child { grid-column: 1 / -1; }
  .pp-stack tbody { display: grid; gap: 12px; }
  .pp-stack tbody tr { padding: 16px 18px; border-radius: 20px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rim-dim); }
  .pp-stack tbody tr + tr > * { border-top: 0; }
  .pp-stack th, .pp-stack td { padding: 0; min-width: 0 !important; }
  .pp-stack td { margin-top: 10px; }
  .pp-stack td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 700 11px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
}
.pp-compare--big tbody tr:nth-last-child(-n+3) th { color: var(--gold); }

/* ---------- /features/today/ ---------- */
.pp-week { margin-top: 30px; }
.pp-week__k { font: 700 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.pp-week ol { border-top: 1px solid var(--line); }
.pp-wk { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pp-wk__d { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 0; border-radius: 14px; font: 650 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
  background: color-mix(in srgb, var(--sc) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 30%, transparent); }
.pp-wk__d b { font: 600 1.45rem/1.05 var(--serif); letter-spacing: 0; color: var(--fg); }
.pp-wk__m { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.pp-wk__c { font: 600 1.08rem/1.25 var(--serif); color: var(--fg); text-wrap: pretty; }
.pp-wk__s { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13.5px; color: var(--dim); }
.pp-wk__s a { color: var(--gold); text-decoration: none; }
.pp-wk__s a:hover { text-decoration: underline; }
.pp-week .fine { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.pp-notes { display: grid; gap: 14px; }
@media (min-width: 900px) { .pp-notes { grid-template-columns: 1fr 1fr; } }
.pp-notes .notice { padding: 18px 20px 18px 22px; }

/* ---------- widgets (replicas of BlessWidgets — always dark, like the real ones) ---------- */
.pp-w { --u: 1px; position: relative; flex: none; display: flex; flex-direction: column; gap: calc(var(--u) * 6); padding: calc(var(--u) * 16); overflow: hidden;
  width: calc(var(--u) * 170); height: calc(var(--u) * 170); border-radius: calc(var(--u) * 24); color: #EFE5D0; text-align: left;
  background: radial-gradient(130% 90% at 0% 0%, rgb(201 164 76 / .1), transparent 60%), #15121C; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07), 0 calc(var(--u) * 14) calc(var(--u) * 30) calc(var(--u) * -14) rgb(0 0 0 / .55); }
.pp-w--medium { width: calc(var(--u) * 364); }
.pp-w__ref { font: 700 calc(var(--u) * 10)/1.2 var(--sans); letter-spacing: .08em; color: #C9A44C; }
.pp-w__v { font: 500 calc(var(--u) * 13.5)/1.3 var(--serif); color: #EFE5D0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.pp-w--medium .pp-w__v { font-size: calc(var(--u) * 15.5); -webkit-line-clamp: 5; }
.pp-w--saint { gap: calc(var(--u) * 5); }
.pp-w__k { font: 700 calc(var(--u) * 9)/1.2 var(--sans); letter-spacing: .11em; text-transform: uppercase; color: #D2606C; }
.pp-w__star { font-size: calc(var(--u) * 16); line-height: 1; color: #C9A44C; }
.pp-w__name { font: 600 calc(var(--u) * 16)/1.15 var(--serif); color: #EFE5D0; }
.pp-w__title { font: 400 calc(var(--u) * 11)/1.3 var(--sans); color: rgb(239 229 208 / .58); }
.pp-w--lock { align-items: center; justify-content: center; text-align: center; gap: calc(var(--u) * 6); }
.pp-w__lockc { width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 50%; display: grid; place-items: center; color: #15121C; background: linear-gradient(180deg, #E4C673, #C9A44C); }
.pp-w__lockc .i { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.pp-w__lockt { font: 650 calc(var(--u) * 11)/1.25 var(--sans); color: #EFE5D0; max-width: calc(16 * var(--ch)); }
.pp-w__locku { font: 700 calc(var(--u) * 9)/1.2 var(--sans); letter-spacing: .04em; color: #C9A44C; }
/* a stage that sizes widgets to its width */
.pp-wstage { container-type: inline-size; }
.pp-wstage .pp-w { --u: min(1.1px, calc(100cqw / 372)); }
.pp-wstage--pair { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; align-items: flex-start; }
@container (min-width: 600px) { .pp-wstage--pair .pp-w { --u: min(1.2px, calc((100cqw - 16px) / 534)); } }
.pp-wide__vis.pp-wstage .pp-w { --u: min(1.05px, calc((100cqw - 14px) / 350)); }

/* the Home Screen illustration */
.pp-hsfig { display: flex; flex-direction: column; align-items: center; gap: 16px; position: relative; isolation: isolate; }
.pp-hsfig figcaption { font-size: 13.5px; line-height: 1.5; color: var(--dim); text-align: center; max-width: calc(36 * var(--ch)); }
.pp-hsphone { --sw: clamp(232px, 64vw, 300px); }
.pp-hs { position: absolute; inset: 0; display: flex; flex-direction: column; color: #fff;
  background: radial-gradient(110% 60% at 15% 0%, #4a3a6a, transparent 62%), radial-gradient(90% 60% at 100% 100%, #6a2f42, transparent 62%), radial-gradient(70% 50% at 70% 45%, rgb(201 164 76 / .22), transparent 70%), #17131f; }
.pp-hs .pp-w { --u: calc(100cqw / 402); }
.pp-hs__bar { display: flex; justify-content: space-between; align-items: center; height: calc(var(--u) * 54); padding: calc(var(--u) * 16) calc(var(--u) * 34) 0 calc(var(--u) * 46); font: 650 calc(var(--u) * 16)/1 var(--sans); }
.pp-hs__icons { display: flex; align-items: center; gap: calc(var(--u) * 6); }
.pp-hs__icons .i-signal { width: calc(var(--u) * 18); height: auto; } .pp-hs__icons .i-wifi { width: calc(var(--u) * 16); height: auto; } .pp-hs__icons .i-battery { width: calc(var(--u) * 27); height: auto; }
.pp-hs__grid { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 24); padding: calc(var(--u) * 20) calc(var(--u) * 19) 0; }
.pp-hs__apps { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: calc(var(--u) * 22); width: 100%; margin-top: calc(var(--u) * 2); justify-items: center; }
.pp-hs__app { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); font: 500 calc(var(--u) * 11.5)/1 var(--sans); color: rgb(255 255 255 / .92); }
.pp-hs__app i, .pp-hs__app img { width: calc(var(--u) * 62); height: calc(var(--u) * 62); border-radius: calc(var(--u) * 15); }
.pp-hs__app i:empty { display: block; background: linear-gradient(160deg, rgb(255 255 255 / .2), rgb(255 255 255 / .07)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.pp-hs__app--b i { width: auto; height: auto; border-radius: 0; font-style: normal; background: none; }
.pp-hs__app--b img { box-shadow: 0 0 0 1px rgb(255 255 255 / .12); }
.pp-hs__dock { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); bottom: calc(var(--u) * 12); display: flex; justify-content: space-around; padding: calc(var(--u) * 14) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 34); background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }

.pp-how { display: grid; gap: 32px; }
@media (min-width: 980px) { .pp-how { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 72px; } }
.pp-steps { display: grid; gap: 4px; margin-top: 26px; counter-reset: none; }
.pp-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; padding: 12px 0; }
.pp-steps li + li { border-top: 1px solid var(--line); }
.pp-step__n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 1.2rem/1 var(--serif); color: #15121C; background: var(--gold-fill); }
.pp-steps p { padding-top: 4px; color: var(--fg-2); }
.pp-steps b { color: var(--fg); }
.pp-ticks { max-width: calc(72 * var(--ch)); }
.pp-bullets { display: grid; gap: 12px; max-width: calc(72 * var(--ch)); }
.pp-bullets li { position: relative; padding-left: 26px; color: var(--fg-2); line-height: 1.6; }
.pp-bullets li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-fill); box-shadow: 0 0 10px rgb(201 164 76 / .5); }
.pp-bullets a { color: var(--gold); }
.pp-numtable tbody th { white-space: nowrap; }
.pp-ticks li span { line-height: 1.6; }
.pp-ticks a { color: var(--gold); }
.pp-sec--panel .sec-head { margin-bottom: 28px; }

/* ---------- iPhone Duo (CSS device around real, cropped screens) ---------- */
.pp-sec--device { margin-top: 0; }
.pp-spreads { position: relative; isolation: isolate; max-width: 980px; margin-inline: auto; }
.pp-spreads::before { content: ""; position: absolute; z-index: -1; left: 0; top: 40%; width: 100%; aspect-ratio: 1.6; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgb(201 164 76 / .18), transparent 72%); pointer-events: none; }
.pp-spreads__in { position: absolute; opacity: 0; pointer-events: none; }
.pp-duo { --dr: clamp(16px, 2.8vw, 38px); position: relative; padding: clamp(5px, .95vw, 12px); border-radius: var(--dr);
  background: linear-gradient(155deg, #4c4655 0%, #1b1820 14%, #0c0b0f 50%, #18151c 86%, #3c3644 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .13), inset 0 0 0 clamp(2px, .35vw, 4px) #050407, 0 70px 110px -60px rgb(0 0 0 / .7), 0 30px 50px -36px rgb(0 0 0 / .5); }
.pp-duo__hinge { position: absolute; left: 50%; width: 9%; height: 3px; transform: translateX(-50%); border-radius: 2px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .16), transparent); }
.pp-duo__hinge--t { top: 1px; } .pp-duo__hinge--b { bottom: 1px; }
.pp-duo__screen { position: relative; aspect-ratio: 1060 / 746; border-radius: calc(var(--dr) * .66); overflow: hidden; background: #15121C; isolation: isolate; transform: translateZ(0); }
.pp-duo__shot { position: absolute; inset: 0; opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .pp-duo__shot { transition: opacity .6s var(--ease); } }
.pp-duo__shot img { position: absolute; max-width: none; width: 132.0755%; height: auto; left: -16.0377%; top: -25.2011%; }
.pp-duo__shot.is-on,
.pp-spreads__in:nth-of-type(1):checked ~ .pp-duo .pp-duo__shot:nth-child(1),
.pp-spreads__in:nth-of-type(2):checked ~ .pp-duo .pp-duo__shot:nth-child(2),
.pp-spreads__in:nth-of-type(3):checked ~ .pp-duo .pp-duo__shot:nth-child(3),
.pp-spreads__in:nth-of-type(4):checked ~ .pp-duo .pp-duo__shot:nth-child(4),
.pp-spreads__in:nth-of-type(5):checked ~ .pp-duo .pp-duo__shot:nth-child(5) { opacity: 1; }
/* the crease: a soft shade, never a line */
.pp-duo__crease { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 7%; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(0 0 0 / .16) 42%, rgb(255 255 255 / .045) 50%, rgb(0 0 0 / .16) 58%, transparent); }
.pp-duo--mini { --dr: clamp(14px, 2vw, 24px); padding: clamp(5px, .7vw, 8px); }
.pp-spreads__bar { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 22px calc(var(--gutter) * -1) 0; padding: 4px var(--gutter) 8px; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
.pp-spreads__bar::-webkit-scrollbar { display: none; }
.pp-spreads__tab { flex: none; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; width: 210px; min-height: 64px; padding: 13px 16px; border-radius: 18px; cursor: pointer;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--rim-dim); transition: background-color .3s, box-shadow .3s; }
.pp-spreads__tab b { font: 650 15px/1.2 var(--sans); color: var(--fg); }
.pp-spreads__tab span { font-size: 13.5px; line-height: 1.35; color: var(--dim); }
.pp-spreads__tab:hover { background: var(--card-2); }
.pp-spreads__in:nth-of-type(1):checked ~ .pp-spreads__bar .pp-spreads__tab:nth-child(1),
.pp-spreads__in:nth-of-type(2):checked ~ .pp-spreads__bar .pp-spreads__tab:nth-child(2),
.pp-spreads__in:nth-of-type(3):checked ~ .pp-spreads__bar .pp-spreads__tab:nth-child(3),
.pp-spreads__in:nth-of-type(4):checked ~ .pp-spreads__bar .pp-spreads__tab:nth-child(4),
.pp-spreads__in:nth-of-type(5):checked ~ .pp-spreads__bar .pp-spreads__tab:nth-child(5) { background: var(--card-2); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold-fill) 72%, transparent); }
.pp-spreads__in:nth-of-type(1):focus-visible ~ .pp-spreads__bar .pp-spreads__tab:nth-child(1),
.pp-spreads__in:nth-of-type(2):focus-visible ~ .pp-spreads__bar .pp-spreads__tab:nth-child(2),
.pp-spreads__in:nth-of-type(3):focus-visible ~ .pp-spreads__bar .pp-spreads__tab:nth-child(3),
.pp-spreads__in:nth-of-type(4):focus-visible ~ .pp-spreads__bar .pp-spreads__tab:nth-child(4),
.pp-spreads__in:nth-of-type(5):focus-visible ~ .pp-spreads__bar .pp-spreads__tab:nth-child(5) { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (min-width: 900px) {
  .pp-spreads__bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; margin: 24px 0 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .pp-spreads__tab { width: auto; }
}
.pp-sec--device .pp-demo__cap { margin-top: 14px; }
.pp-spreadtable tbody th { color: var(--gold); white-space: nowrap; }
.pp-spreadtable td { min-width: 200px; }

/* ---------- /pricing/ ---------- */
.pp-lumen { position: relative; isolation: isolate; display: grid; place-items: center; padding: 10px 0 20px; }
.pp-lumen img { width: clamp(130px, 34vw, 230px); height: auto; }
@media (prefers-reduced-motion: no-preference) { .pp-lumen img { animation: pp-float 7s ease-in-out infinite alternate; } }
@keyframes pp-float { to { transform: translateY(-10px); } }
.pp-hero--lumen .pp-halo { width: 150%; }
/* the keyword line inside the H1 ("Bless pricing:"), set small above the slogan */
.pp-h1pre { display: block; margin-bottom: .32em; font: 500 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1.25 var(--serif); letter-spacing: .01em; color: var(--fg-2); }
.pp-plans { display: grid; gap: 18px; }
@media (min-width: 900px) { .pp-plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: start; } }
.pp-plan { position: relative; padding: clamp(24px, 3.4vw, 36px); border-radius: 30px; background: linear-gradient(180deg, var(--glass-hi), transparent 40%), var(--card); box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 color-mix(in srgb, var(--rim) 55%, transparent); }
.pp-plan--prem { isolation: isolate; overflow: hidden; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold-fill) 55%, transparent), 0 30px 70px -40px rgb(201 164 76 / .35); }
.pp-plan--prem::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -55%; width: 140%; aspect-ratio: 1.4; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgb(201 164 76 / .2), transparent 72%); }
.pp-plan__name { font: 700 13px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--fg); }
.pp-plan--prem .pp-plan__name { color: var(--gold); }
.pp-plan__prices { display: flex; flex-wrap: wrap; gap: 8px 30px; }
.pp-plan__price { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 22px; }
.pp-plan__prices .pp-plan__price { margin-bottom: 8px; }
.pp-plan__price b { font: 600 clamp(2.6rem, 2rem + 2vw, 3.6rem)/1 var(--serif); color: var(--fg); letter-spacing: -.015em; font-variant-numeric: lining-nums; }
.pp-plan--prem .pp-plan__price b { color: var(--gold); }
.pp-plan__price span { font-size: 15px; color: var(--dim); }
.pp-plan__trial { margin: 6px 0 22px; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; color: var(--fg-2); background: color-mix(in srgb, var(--gold-fill) 9%, transparent); }
.pp-plan__plus { margin-bottom: 12px; font: 650 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.pp-plan__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.pp-howto { display: grid; gap: 14px; }
@media (min-width: 720px) { .pp-howto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pp-howto { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pp-howto__i { padding: 22px 22px 24px; border-radius: 22px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rim-dim); }
.pp-howto__t { font: 600 1.32rem/1.2 var(--serif); color: var(--fg); }
.pp-howto__i p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--fg-2); }
.pp-howto__i b { color: var(--fg); font-weight: 650; }

/* ---------- /faq/ ---------- */
.pp-faqgroup + .pp-faqgroup { margin-top: clamp(48px, 7vw, 80px); }
.pp-faqgroup__h { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; scroll-margin-top: calc(var(--head-h) + 20px); }
.pp-faqgroup__h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.pp-faqgroup .faq { border-top: 0; }
.pp-asidecard { position: relative; }
.pp-asidecard__lumen { width: 70px; height: auto; margin: 0 0 10px; }
.pp-asidecard a:not(.badge) { display: inline; min-height: 0; color: var(--gold); }

/* ---------- translations ---------- */
.pp-samples { display: grid; gap: 0; border-top: 1px solid var(--line); }
.pp-sample { padding: 20px 0; border-bottom: 1px solid var(--line); max-width: none; }
.pp-sample .vtext { font-size: 1.4rem; }
.pp-readtags { padding: 0 !important; list-style: none !important; }
.pp-readtags li + li { margin-top: 0; }
.pp-knowns { display: grid; gap: 12px; padding: 0 !important; list-style: none !important; }
@media (min-width: 640px) { .pp-knowns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pp-knowns li + li { margin-top: 0; }
.pp-known { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 16px; border-radius: 22px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rim-dim); }
.pp-known__p { font: italic 600 1.7rem/1.1 var(--serif); color: var(--gold); }
.pp-known__la { font: italic 500 1.08rem/1.4 var(--serif); color: var(--fg-2); }
.pp-known__en { font-size: 15px; line-height: 1.5; color: var(--fg); }
.pp-known__ref { display: inline-flex; align-items: center; min-height: 40px; margin-top: auto; font: 650 12.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dim) !important; text-decoration: none; }
.pp-known__ref:hover { color: var(--gold) !important; }

/* ---------- /press/ ---------- */
.pp-pressicon { position: relative; isolation: isolate; display: grid; place-items: center; padding: 24px 0; overflow-x: clip; }
.pp-pressicon img { width: clamp(150px, 34vw, 240px); height: auto; border-radius: 22.5%; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 40px 80px -30px rgb(0 0 0 / .6); }
.pp-bps { display: grid; gap: 14px; }
@media (min-width: 1024px) { .pp-bps { grid-template-columns: .8fr 1fr 1.3fr; align-items: start; } }
.pp-bp { padding: 22px; border-radius: 22px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rim-dim); }
.pp-bp__k { font: 700 11.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.pp-bp__t p { margin-top: 10px; font-size: 15.5px; line-height: 1.62; color: var(--fg); user-select: all; -webkit-user-select: all; }
.pp-iconkit { display: grid; gap: 28px; align-items: center; }
@media (min-width: 760px) { .pp-iconkit { grid-template-columns: auto minmax(0, 1fr); gap: 48px; } }
.pp-iconkit__art { position: relative; isolation: isolate; display: grid; place-items: center; padding: 30px; justify-self: center; overflow: clip; }
.pp-iconkit__art img { width: 180px; height: auto; border-radius: 22.5%; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 30px 60px -26px rgb(0 0 0 / .6); }
.pp-dl { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.pp-dl .i { transform: rotate(90deg); }
.pp-shots { display: grid; gap: 32px 16px; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); }
.pp-shot { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.pp-shot .phone { --sw: 148px; }
.pp-shot__t { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.35; color: var(--dim); }
.pp-shot__t b { font-size: 14.5px; color: var(--fg); }
.pp-shot__dl { display: inline-flex; align-items: center; min-height: 44px; font: 650 13px/1 var(--sans); color: var(--gold); text-decoration: none; }
.pp-shot__dl:hover { text-decoration: underline; }
.pp-dshots { display: grid; gap: 24px 16px; }
@media (min-width: 720px) { .pp-dshots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pp-dshots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pp-dshot { display: flex; flex-direction: column; gap: 10px; }
.pp-dshot img { width: 100%; border-radius: 18px; box-shadow: 0 0 0 1px var(--rim-dim), 0 24px 50px -30px var(--shadow); }
.pp-dshot .pp-shot__t { text-align: left; }

/* ---------- print ---------- */
@media print {
  .pp-hero__vis, .pp-tile__shot, .pp-spreads, .pp-duo, .pp-related, .pp-wstage, .pp-hsfig, .pp-halo { display: none !important; }
  .pp-sec--panel::before { display: none; }
  .pp-tile, .pp-voice, .pp-tier, .pp-plan, .pp-howto__i, .pp-known, .pp-feat { box-shadow: 0 0 0 1px #ccc; break-inside: avoid; }
}