/* Polar section library (S1-S20), page-system round 1, 2026-10-04.
   Extracted from the brand package (brand-package-a/src.html): color tokens, type, frosted controls (pc-), forms (pf-),
   Aurora charts (pcx-), photography and logo wall (pph-), diagrams (pdg-), video (pvd-), nav (w1-), pricing (w2-),
   tables and code (w3-), states (w4-), the Record (.rc), capability scenes (.mods) and story cards (.sband).
   Structure (widths, breakpoints, type roles, spacing) follows motions/website-hybrid/page-system-requirements.md section 3.
   Everything is scoped under pn- class names. A page sets one theme on <body>: .pn-night or .pn-day.
   Assets resolve from ../assets/ (sections/ and pages/ are siblings of assets/). */

/* ---------- tokens ---------- */
.pn {
  --pn-sans: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  --pn-mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  --pn-ease: cubic-bezier(.16, 1, .3, 1);
  /* brand constants */
  --k-night: #0F0A1A; --k-panel: #19132A; --k-line: #2B2440; --k-line-2: #3A3152;
  --k-head: #F3F0F8; --k-body: #B3ACC1; --k-cap: #847D94;
  --k-violet: #6738B8; --k-lilac: #9E62DD; --k-lilac-t: #B794F0;
  --k-screen: #F7F6F9; --k-screen-ink: #19132A;
  --k-ok-bg: #DDF0DE; --k-ok-fg: #1F4D22; --k-no-bg: #FBE1E5; --k-no-fg: #8A1F33;
  --k-paper: #FFFFFF; --k-mist: #F4F3FA; --k-navy: #202060; --k-dbody: #45457A; --k-dcap: #6B6990; --k-dline: #E2DFEE; --k-lilac-ink: #7B45C8;
  --k-glass: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 56px -22px rgba(5, 2, 14, .75);
  --k-screen-sh: 0 0 0 1px rgba(255, 255, 255, .35), 0 4px 10px rgba(5, 2, 14, .45), 0 30px 70px -10px rgba(5, 2, 14, .65);
  /* structure: widths */
  --pn-container: 1200px; --pn-wide: 960px; --pn-measure-head: 760px; --pn-measure-prose: 700px; --pn-form: 540px;
  --pn-gut: 16px;
  /* structure: section padding (compact, default, spacious) */
  --pn-pad-c: 48px; --pn-pad-d: 64px; --pn-pad-s: 80px;
  /* type roles, fluid from 390 to 1280 */
  --pn-display: clamp(48px, calc(30px + 3.6vw), 80px);
  --pn-title: clamp(40px, calc(31px + 2.2vw), 56px);
  --pn-heading: clamp(34px, calc(25px + 2vw), 52px);
  --pn-h3: clamp(22px, calc(20px + .45vw), 26px);
  --pn-h4: clamp(18px, calc(17px + .2vw), 20px);
  font-family: var(--pn-sans); -webkit-font-smoothing: antialiased; font-size: 17px; line-height: 1.55;
}
@media (min-width: 640px) { .pn { --pn-gut: 24px; } }
@media (min-width: 1024px) { .pn { --pn-gut: 32px; --pn-pad-c: 64px; --pn-pad-d: 96px; --pn-pad-s: 128px; } }

/* themes: one per page */
.pn-night { --bg: #0F0A1A; --bg-2: #19132A; --bg-3: #221B37; --ink: #F3F0F8; --ink-2: #B3ACC1; --ink-3: #9F98B0; --line: #2B2440; --link: #B794F0; --focus: #F3F0F8; --mark: #9E62DD; color-scheme: dark; background: var(--bg); color: var(--ink-2); }
.pn-day { --bg: #FFFFFF; --bg-2: #F4F3FA; --bg-3: #ECEAF5; --ink: #202060; --ink-2: #45457A; --ink-3: #6B6990; --line: #E2DFEE; --link: #7B45C8; --focus: #202060; --mark: #9E62DD; color-scheme: light; background: var(--bg); color: var(--ink-2); }

.pn *, .pn *::before, .pn *::after { box-sizing: border-box; }
:where(.pn) img { display: block; max-width: 100%; }
:where(.pn) a { color: var(--link); text-underline-offset: 3px; }
.pn :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
:where(.pn) p { margin: 0; }
:where(.pn) :is(h1, h2, h3, h4) { margin: 0; color: var(--ink); font-weight: 500; text-wrap: balance; }
:where(.pn) code { font-family: var(--pn-mono); font-size: .9em; }
.pn-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- layout ---------- */
.pn-wrap { width: 100%; max-width: calc(var(--pn-container) + 2 * var(--pn-gut)); margin: 0 auto; padding-inline: var(--pn-gut); }
.pn-sec { position: relative; padding-block: var(--pn-pad-d); }
.pn-sec.pn-compact { padding-block: var(--pn-pad-c); }
.pn-sec.pn-spacious { padding-block: var(--pn-pad-s); }
.pn-g12 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
@media (min-width: 640px) { .pn-g12 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 32px 24px; } }
@media (min-width: 1024px) { .pn-g12 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; } }
.pn-g12 > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1024px) {
  .pn-c4 { grid-column: span 4 !important; } .pn-c5 { grid-column: span 5 !important; } .pn-c6 { grid-column: span 6 !important; }
  .pn-c7 { grid-column: span 7 !important; } .pn-c8 { grid-column: span 8 !important; } .pn-c3 { grid-column: span 3 !important; }
}

/* ---------- type roles ---------- */
.pn-label { font: 500 12px/1.2 var(--pn-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pn-display { font-size: var(--pn-display); line-height: .98; letter-spacing: -.036em; max-width: 14em; }
.pn-title { font-size: var(--pn-title); line-height: 1.05; letter-spacing: -.032em; max-width: 20em; }
.pn-h2 { font-size: var(--pn-heading); line-height: 1.06; letter-spacing: -.032em; max-width: 22em; }
.pn-h3 { font-size: var(--pn-h3); line-height: 1.2; letter-spacing: -.015em; max-width: 32em; }
.pn-h4 { font-size: var(--pn-h4); line-height: 1.35; letter-spacing: -.01em; }
.pn-lede { font-size: 20px; line-height: 30px; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.pn-ui { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); max-width: 36em; }
.pn-small { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.pn-head { display: grid; gap: 16px; max-width: var(--pn-measure-head); margin-bottom: 48px; }
.pn-head .pn-lede { margin-top: 4px; }
.pn-head.pn-center { justify-items: center; text-align: center; margin-inline: auto; }
.pn-head.pn-tight { margin-bottom: 32px; }

/* ---------- controls (package Controls, B frosted) ---------- */
.pn-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pn-b { appearance: none; border: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 999px; font: 500 15.5px/1 var(--pn-sans); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color .18s var(--pn-ease), box-shadow .18s var(--pn-ease), transform .12s var(--pn-ease); }
.pn-b.lg { height: 50px; padding: 0 26px; font-size: 16px; }
.pn-b:active { transform: translateY(1px); }
.pn-b svg { width: 18px; height: 18px; flex: none; }
.pn .pn-p { background: #6738B8; color: #fff; }
.pn .pn-p:hover { background: #7A4ACD; }
.pn-night .pn-p, .pn-onveil .pn-p { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 28px -8px rgba(103, 56, 184, .75); }
.pn-day .pn-p { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 8px 18px -10px rgba(103, 56, 184, .7); }
.pn-night .pn-s, .pn-onveil .pn-s { color: #F3F0F8; background: rgba(243, 240, 248, .1); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 24px -12px rgba(4, 2, 12, .8); }
.pn-night .pn-s:hover, .pn-onveil .pn-s:hover { background: rgba(243, 240, 248, .17); }
.pn-day .pn-s { color: #202060; background: #fff; box-shadow: 0 0 0 1px rgba(32, 32, 96, .1), 0 1px 2px rgba(32, 32, 96, .1), 0 8px 18px -10px rgba(32, 32, 96, .32); }
.pn-day .pn-onveil .pn-s { color: #F3F0F8; background: rgba(243, 240, 248, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .18); }
.pn-g { color: var(--ink-2); padding: 0 12px; background: transparent; }
.pn-g:hover { color: var(--ink); }
/* arrow variant: the main button with an arrow disc, only for a single next-step button */
.pn-arw { padding-right: 6px; gap: 14px; }
.pn-arw .pn-disc { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); transition: transform .2s var(--pn-ease), background-color .2s var(--pn-ease); }
.pn-b.lg.pn-arw .pn-disc { width: 38px; height: 38px; }
.pn-arw:hover .pn-disc { transform: translateX(3px); background: rgba(255, 255, 255, .24); }
.pn-lnk { display: inline-flex; align-items: center; gap: 6px; color: var(--link); font: 500 15.5px/1.4 var(--pn-sans); text-decoration: none; }
.pn-lnk svg { width: 16px; height: 16px; transition: transform .2s var(--pn-ease); }
.pn-lnk:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pn-lnk:hover svg { transform: translateX(2px); }
.pn-rail { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 999px; max-width: 100%; }
.pn-rail button, .pn-rail a { appearance: none; border: 0; margin: 0; display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border-radius: 999px; font: 500 14.5px/1 var(--pn-sans); background: transparent; color: var(--ink-2); cursor: pointer; white-space: nowrap; text-decoration: none; }
.pn-night .pn-rail { background: rgba(243, 240, 248, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pn-night .pn-rail [aria-pressed="true"], .pn-night .pn-rail [aria-current="true"] { color: #fff; background: rgba(243, 240, 248, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34); }
.pn-day .pn-rail { background: rgba(32, 32, 96, .05); box-shadow: inset 0 0 0 1px rgba(32, 32, 96, .05); }
.pn-day .pn-rail button:hover, .pn-day .pn-rail a:hover { color: #202060; background: rgba(255, 255, 255, .6); }
.pn-day .pn-rail [aria-pressed="true"], .pn-day .pn-rail [aria-current="true"] { color: #202060; background: #fff; box-shadow: 0 0 0 1px rgba(32, 32, 96, .08), 0 2px 6px -2px rgba(32, 32, 96, .24); }
.pn-fld { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; color: var(--ink); font: 400 15.5px/1 var(--pn-sans); }
.pn-fld input { all: unset; flex: 1; min-width: 0; height: 100%; font: inherit; color: inherit; }
.pn-fld input::placeholder { color: var(--ink-3); opacity: 1; }
.pn-fld > svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.pn-fld:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.pn-night .pn-fld { background: rgba(243, 240, 248, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pn-day .pn-fld { background: #fff; box-shadow: 0 0 0 1px rgba(32, 32, 96, .12), 0 1px 2px rgba(32, 32, 96, .08), 0 6px 14px -10px rgba(32, 32, 96, .3); }

/* status chips and the Record chip */
.pn-st { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/1 var(--pn-mono); letter-spacing: .08em; padding: 5px 7px; border-radius: 5px; white-space: nowrap; }
.pn-st::before { content: ""; width: 11px; height: 11px; background: currentColor; -webkit-mask: var(--pn-glyph-ok) center / contain no-repeat; mask: var(--pn-glyph-ok) center / contain no-repeat; }
.pn { --pn-glyph-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 L10 17.5 L19 7.5'/%3E%3C/svg%3E"); --pn-glyph-no: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6 L18 18'/%3E%3Cpath d='M18 6 L6 18'/%3E%3C/svg%3E"); }
.pn-st.ok { background: var(--k-ok-bg); color: var(--k-ok-fg); }
.pn-st.no { background: var(--k-no-bg); color: var(--k-no-fg); }
.pn-st.no::before { -webkit-mask-image: var(--pn-glyph-no); mask-image: var(--pn-glyph-no); }
.pn-rc { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 11px; border-radius: 11px; font: 500 13.5px/1.2 var(--pn-mono); white-space: nowrap; color: #F3F0F8; background: rgba(25, 19, 42, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.12); }
.pn-rc em { font-style: normal; color: var(--k-lilac-t); }
.pn-rc.hl { box-shadow: none; }
.pn-rc.hl::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: linear-gradient(115deg, #9E62DD 10%, #F49AD8 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* ---------- chrome: nav (package Navigation A, glass bar), breadcrumb, footer ---------- */
.pn-nav { position: sticky; top: 0; z-index: 30; }
.pn-nav .pn-wrap { height: 64px; display: flex; align-items: center; gap: 22px; }
.pn-night .pn-nav { background: rgba(15, 10, 26, .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }
.pn-day .pn-nav { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 -1px 0 #E2DFEE; }
.pn-brand { display: inline-flex; color: var(--ink); }
.pn-lk { display: block; width: 118px; height: auto; aspect-ratio: 280 / 42; color: currentColor; }
.pn-navl { display: flex; gap: 2px; }
.pn-navl a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 11px; border-radius: 10px; font-size: 15px; color: var(--ink-2); text-decoration: none; }
.pn-navl a svg { width: 14px; height: 14px; opacity: .7; }
.pn-night .pn-navl a:hover, .pn-night .pn-navl a[aria-current] { color: #fff; background: rgba(243, 240, 248, .1); }
.pn-day .pn-navl a:hover, .pn-day .pn-navl a[aria-current] { color: #202060; background: rgba(32, 32, 96, .06); }
.pn-navr { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pn-nav .pn-b { height: 40px; padding: 0 18px; font-size: 15px; }
.pn-burger { display: none !important; width: 40px; padding: 0 !important; }
@media (max-width: 1023px) { .pn-navl, .pn-navr .pn-g, .pn-navr .pn-s:not(.pn-burger) { display: none; } .pn-burger { display: inline-flex !important; } }
.pn-crumb { padding-top: 24px; font-size: 14px; color: var(--ink-3); }
.pn-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pn-crumb li + li::before { content: "\203A"; margin-right: 6px; color: var(--ink-3); }
.pn-crumb a { color: var(--ink-2); text-decoration: none; }
.pn-crumb a:hover { text-decoration: underline; }
.pn-foot { padding-block: 56px 28px; }
.pn-night .pn-foot { background: var(--k-night); box-shadow: inset 0 1px 0 #2B2440; }
.pn-day .pn-foot { background: var(--k-mist); }
.pn-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.pn-fsign { grid-column: 1 / -1; display: grid; gap: 12px; align-content: start; }
.pn-fsign p { font-size: 17px; font-weight: 500; color: var(--ink); }
@media (min-width: 1024px) { .pn-fgrid { grid-template-columns: minmax(0, 1.4fr) repeat(6, minmax(0, 1fr)); } .pn-fsign { grid-column: auto; } }
.pn-fh { margin: 0 0 10px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.pn-fgrid a { display: block; padding: 4px 0; font-size: 14.5px; color: var(--ink-2); text-decoration: none; }
.pn-fgrid a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.pn-legal { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 18px; font-size: 13.5px; color: var(--ink-3); box-shadow: inset 0 1px 0 var(--line); }

/* ---------- grounds: the night plate at the top, ribbons for dark stretches, veil for one feature panel per view ---------- */
.pn-sky { position: relative; isolation: isolate; }
/* RULE (Andrew, 2026-10-04): the night snow plate is the homepage's alone. No other page or section uses it.
   Display heroes on night pages use Polar sky behind the h1, then the product visual on an aurora veil panel (.pn-heropanel),
   the package's own "Polar sky, then the aurora veil" night composition. */
/* Polar sky: the night ground for every night hero (Display, Title, Split, Media) */
.pn-sky::before { content: ""; position: absolute; z-index: -1; inset: -64px 0 0 0; pointer-events: none; background: linear-gradient(180deg, #2E2456 0%, #1B1636 38%, #0F0A1A 100%); }
.pn-ribbons { background: linear-gradient(180deg, #0F0A1A 0, rgba(15,10,26,.35) 45%, rgba(15,10,26,.15) 80%, #0F0A1A 100%), url(../assets/aurora-ribbons.jpg) 50% 100% / cover no-repeat, #0F0A1A; }
.pn-veil { position: relative; isolation: isolate; overflow: hidden; color: #E6E1F0; }
.pn-veil::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #0F0A1A url(../assets/aurora-veil.jpg) var(--veil-pos, 22% 50%) / cover no-repeat; transform: var(--veil-flip, scaleX(-1)); }

/* ---------- S1 hero ---------- */
.pn-hero { padding-block: var(--pn-pad-s) var(--pn-pad-d); }
.pn-hero .pn-in { display: grid; gap: 20px; justify-items: start; }
.pn-hero .pn-sub { font-size: 20px; line-height: 30px; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.pn-hero .pn-btns { margin-top: 12px; }
.pn-trust { font-size: 14px; color: var(--ink-3); display: flex; align-items: center; gap: 10px; }
.pn-trust::before { content: ""; width: 20px; height: 1px; background: currentColor; opacity: .7; }
/* Display: centered over the night sky, the visual rises out of the snow below */
.pn-hero--display { padding-top: clamp(56px, 7vw, 104px); }
.pn-hero--display .pn-in { justify-items: center; text-align: center; }
.pn-hero--display .pn-display { margin-inline: auto; }
.pn-hero--display .pn-sub { max-width: 40em; }
.pn-hero--display .pn-btns { justify-content: center; }
.pn-hero-vis { position: relative; margin: clamp(40px, 5vw, 64px) auto 0; max-width: 1040px; padding-bottom: var(--pn-pad-d); }
.pn-hero-vis.pn-narrow { max-width: 880px; }
.pn-hero-vis .pn-screen { border-radius: 14px; overflow: hidden; box-shadow: var(--k-screen-sh); background: var(--k-screen); }
.pn-hero-vis .pn-screen img { width: 100%; height: auto; }
.pn-hero-vis .pn-rc { position: absolute; right: -18px; bottom: calc(var(--pn-pad-d) + 28px); font-size: 14px; }
@media (max-width: 639px) { .pn-hero-vis .pn-rc { right: 8px; font-size: 12px; } }
/* Title: left aligned, one column, optional contained visual beside or below */
.pn-hero--title { padding-block: clamp(40px, 5vw, 72px) var(--pn-pad-d); }
.pn-hero--title .pn-sub { max-width: 34em; }
.pn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 14px; color: var(--ink-3); }
.pn-meta b { font-weight: 500; color: var(--ink); }
.pn-meta .pn-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--pn-sans); color: var(--ink); background: var(--bg-3); }
.pn-byline { display: flex; align-items: center; gap: 12px; }
.pn-hero-media { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-2) var(--img) 50% 50% / cover no-repeat; }
.pn-night .pn-hero-media.pn-graded { position: relative; filter: saturate(.85) brightness(.95); }
.pn-night .pn-hero-media.pn-graded::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27, 22, 54, .1), rgba(15, 10, 26, .5)); mix-blend-mode: multiply; }
.pn-hero--title .pn-below { margin-top: 48px; max-width: var(--pn-wide); }
/* Split: copy in 7 columns, the form or media in 5 */
.pn-hero--split { padding-block: clamp(48px, 6vw, 88px) var(--pn-pad-d); }
.pn-hero--split .pn-g12 { align-items: center; }
.pn-split-media { position: relative; border-radius: 22px; padding: clamp(20px, 3vw, 36px); min-height: 360px; display: grid; align-items: end; }
.pn-split-media .pn-screen { border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 20px 40px -18px rgba(5,2,14,.7); }
.pn-split-media .pn-rc { position: absolute; right: 20px; top: 20px; }
/* Media: the recording leads */
.pn-hero--media { padding-block: clamp(40px, 5vw, 72px) var(--pn-pad-d); }

/* ---------- S2 logo bar ---------- */
.pn-logos { display: grid; gap: 20px; }
.pn-logos .pn-label { text-align: left; }
.pn-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .pn-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pn-wall { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); } }
.pn-wm { display: grid; place-items: center; min-height: 64px; padding: 8px; border-radius: 12px; font: 600 16px/1.1 var(--pn-sans); letter-spacing: -.01em; text-align: center; }
.pn-night .pn-wm { color: rgba(243, 240, 248, .82); background: rgba(243, 240, 248, .06); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.09); }
.pn-day .pn-wall { padding: 8px; border-radius: 18px; background: var(--k-mist); }
.pn-day .pn-wm { color: #202060; background: #fff; box-shadow: 0 0 0 1px rgba(32,32,96,.08), 0 6px 14px -10px rgba(32,32,96,.3); }

/* ---------- S3 problem: system problems on solid panels ---------- */
.pn-cards { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pn-cards.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pn-cards.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pn-card { display: grid; gap: 12px; align-content: start; padding: 32px 28px; border-radius: 18px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.pn-card .pn-h3 { font-size: 22px; }
.pn-card p { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.pn-card .pn-label { margin-bottom: 8px; }

/* ---------- S4 how it works ---------- */
.pn-dia { border-radius: 22px; padding: clamp(16px, 2.4vw, 32px); }
.pn-night .pn-dia { background: var(--k-night); box-shadow: inset 0 0 0 1px var(--k-line); }
.pn-day .pn-dia { background: var(--k-mist); }
.pn-dia-scroll { overflow-x: auto; }
.pn-dia-scroll svg { display: block; width: 100%; min-width: 720px; height: auto; }
.pn-dia figcaption { margin-top: 14px; font-size: 14px; color: var(--ink-3); max-width: 70ch; }
.pn-steps4 { display: grid; grid-template-columns: minmax(0, 1fr); counter-reset: s; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .pn-steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pn-steps4.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pn-steps4.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pn-steps4 li { list-style: none; counter-increment: s; display: grid; gap: 12px; align-content: start; padding: 28px 24px 32px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) { .pn-steps4 li { border-bottom: 0; } .pn-steps4 li + li { padding-left: 24px; box-shadow: inset 1px 0 0 var(--line); } }
.pn-steps4 li .pn-num::before { content: counter(s, decimal-leading-zero); }
.pn-num { font: 500 13px/1 var(--pn-mono); letter-spacing: .08em; color: var(--ink-3); }
.pn-steps4 .pni { width: 48px; height: 48px; }
.pn-steps4 p { font-size: 16.5px; color: var(--ink-2); }

/* ---------- S5 what you look at afterwards ---------- */
.pn-after .pn-g12 { align-items: center; }
.pn-outs { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.pn-outs li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 14px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.pn-outs svg { width: 22px; height: 22px; color: var(--ink); margin-top: 2px; }
.pn-outs b { font-weight: 500; color: var(--ink); font-size: 18px; }
.pn-outs p { grid-column: 2; font-size: 16px; color: var(--ink-2); }
.pn-shotpanel { border-radius: 22px; padding: clamp(16px, 3vw, 40px); }
.pn-win { border-radius: 12px; overflow: hidden; background: var(--k-screen); color: #19132A; box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 24px 50px -20px rgba(5,2,14,.75); font-size: 13px; }
.pn-win-bar { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; background: #EEECF3; box-shadow: inset 0 -1px 0 #E2DFEE; font-size: 12.5px; color: #6E6880; }
.pn-win-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D6D3DF; }
.pn-win-bar span { margin-left: 8px; }
.pn-win-body { padding: 16px; display: grid; gap: 14px; }
.pn-win-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pn-win-h b { font: 600 15px/1.2 var(--pn-sans); color: #19132A; }
.pn-win-h small { font-size: 12px; color: #6E6880; }
.pn-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pn-kpi { padding: 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #E6E3EE; display: grid; gap: 4px; }
.pn-kpi small { font-size: 11.5px; color: #6E6880; }
.pn-kpi b { font: 500 22px/1 var(--pn-sans); letter-spacing: -.02em; color: #19132A; font-variant-numeric: tabular-nums; }
.pn-wtbl { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px #E6E3EE; }
.pn-wtbl th { text-align: left; font: 500 11.5px/1.2 var(--pn-sans); color: #6E6880; padding: 9px 12px; border-bottom: 1px solid #ECEAF2; }
.pn-wtbl td { padding: 9px 12px; border-bottom: 1px solid #F0EEF5; color: #19132A; white-space: nowrap; }
.pn-wtbl tr:last-child td { border-bottom: 0; }
.pn-wtbl td code { font-size: 12px; }
.pn-wtbl td.num { font-variant-numeric: tabular-nums; text-align: right; }
.pn-wtbl tr.hl td { box-shadow: inset 0 1px 0 #9E62DD, inset 0 -1px 0 #9E62DD; }
.pn-wtbl tr.hl td:first-child { box-shadow: inset 1px 1px 0 #9E62DD, inset 0 -1px 0 #9E62DD; }
.pn-wtbl tr.hl td:last-child { box-shadow: inset -1px 1px 0 #9E62DD, inset 0 -1px 0 #9E62DD; }
@media (max-width: 639px) { .pn-kpis { grid-template-columns: 1fr 1fr; } .pn-kpi:nth-child(3) { display: none; } .pn-wtbl .pn-hide-s { display: none; } }

/* ---------- S6 capabilities: ruled items with frosted-glass concept icons ---------- */
.pn-caps { display: grid; gap: 0 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pn-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pn-caps.n3, .pn-caps.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pn-caps.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pn-cap { display: grid; gap: 12px; align-content: start; padding: 28px 0 36px; border-top: 1px solid var(--line); }
.pn-cap .pni { width: 48px; height: 48px; margin-bottom: 4px; }
.pn-cap .pn-h3 { font-size: 22px; }
.pn-cap p { font-size: 16.5px; color: var(--ink-2); }
.pn-cap .pn-lnk { margin-top: 4px; }
.pn-caps.pn-boxed { gap: 16px; }
.pn-caps.pn-boxed .pn-cap { padding: 28px; border-top: 0; border-radius: 18px; background: var(--bg-2); }
.pn-day .pn-caps.pn-boxed .pn-cap { background: var(--k-mist); }

/* ---------- S7 feature split ---------- */
.pn-feat .pn-g12 { align-items: center; }
.pn-feat .pn-copy { display: grid; gap: 18px; align-content: center; }
.pn-feat .pn-h2 { font-size: clamp(30px, calc(24px + 1.4vw), 44px); }
.pn-feat .pn-ui { font-size: 17.5px; }
.pn-ticks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.pn-ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 16.5px; color: var(--ink-2); }
.pn-ticks svg { width: 20px; height: 20px; color: var(--ink); margin-top: 2px; }
@media (min-width: 1024px) { .pn-feat.pn-flip .pn-copy { order: 2; } }
/* the capability scene stage (package Homepage modules), sized for a section */
.pn-stage { --b1: rgba(228, 216, 255, .9); --b2: rgba(118, 94, 232, .66); --b3: rgba(52, 168, 214, .3); --bx: 50%; --by: 0%;
  position: relative; isolation: isolate; min-height: 340px; border-radius: 22px; padding: clamp(24px, 3.6vw, 48px); display: grid; gap: 14px; align-content: center; overflow: hidden;
  background: #0B0A11; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 70px -30px rgba(10,6,24,.75); font-family: var(--pn-mono); color: #F3F0F8;
  --m-rim: 0 0 0 1px rgba(255,255,255,.55), 0 0 0 9px rgba(206,184,255,.2), 0 0 0 10px rgba(236,226,255,.42); --m-glass: linear-gradient(180deg, #FCFBFF, #EDE8F8); --m-ink: #1B1530; --m-ink-2: #5E5873; }
.pn-stage > * { position: relative; z-index: 2; }
.pn-stage::before { content: ""; position: absolute; inset: -12%; z-index: 0; pointer-events: none;
  background: radial-gradient(18% 9% at var(--bx) var(--by), var(--b1), transparent 100%), radial-gradient(34% 18% at var(--bx) var(--by), var(--b1), transparent 100%),
    radial-gradient(62% 34% at var(--bx) calc(var(--by) + 10%), var(--b2), transparent 100%), radial-gradient(110% 62% at var(--bx) calc(var(--by) + 28%), var(--b3), transparent 100%);
  filter: blur(30px); }
.pn-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 23px 41px, rgba(255,255,255,.55) 0 .7px, transparent 1.3px), radial-gradient(circle at 131px 17px, rgba(255,255,255,.35) 0 .6px, transparent 1.2px),
    radial-gradient(circle at 71px 97px, rgba(255,255,255,.28) 0 .9px, transparent 1.6px), radial-gradient(circle at 190px 150px, rgba(255,255,255,.45) 0 .6px, transparent 1.2px),
    radial-gradient(circle at 12px 260px, rgba(255,255,255,.3) 0 1.1px, transparent 2px);
  background-size: 180px 180px, 173px 139px, 241px 199px, 317px 263px, 283px 331px, 409px 367px; mix-blend-mode: screen; }
.pn-stage.sc-col { --b1: rgba(255,236,250,1); --b2: rgba(156,102,240,.78); --b3: rgba(78,116,232,.34); --bx: 75%; --by: 4%; grid-template-columns: 1fr 1fr; align-items: center; }
.pn-stage.sc-id { --b1: rgba(208,230,255,.88); --b2: rgba(98,108,232,.64); --b3: rgba(154,92,222,.32); --bx: 50%; --by: 86%; }
.pn-stage.sc-rt { --b1: rgba(255,208,238,.92); --b2: rgba(178,90,216,.66); --b3: rgba(84,120,232,.32); --bx: 26%; --by: 10%; grid-template-columns: 1fr 1.2fr; align-items: center; }
.pn-stage em { font-style: normal; font: 600 11px/1 var(--pn-mono); letter-spacing: .06em; padding: 5px 7px; border-radius: 4px; background: var(--k-ok-bg); color: var(--k-ok-fg); white-space: nowrap; }
.pn-stage .lane { display: grid; grid-template-columns: minmax(0, 1fr) auto 112px; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; font-size: 12.5px; }
.pn-stage .lane code { font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-stage .lane b { font: 500 12px/1.2 var(--pn-mono); text-align: right; }
.pn-stage .lane.ok { background: var(--m-glass); color: var(--m-ink); box-shadow: var(--m-rim), 0 24px 50px -20px rgba(0,0,0,.6); }
.pn-stage .lane.ok b { color: var(--m-ink-2); }
.pn-stage .lane.bad { background: rgba(255,255,255,.07); color: #E6E3EE; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.pn-stage .lane.bad em { background: var(--k-no-bg); color: var(--k-no-fg); }
.pn-stage .lane.bad b { color: #B9B5C6; }
.pn-stage .gate { justify-self: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 12px; border-radius: 999px; font-size: 11.5px; color: #D8D5E2; background: rgba(12,11,18,.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.pn-stage .mini-pdp { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: #F7F6F9; color: #15171A; font-family: var(--pn-sans); box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 20px 40px -20px rgba(0,0,0,.6); }
.pn-stage .mini-pdp img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; }
.pn-stage .mini-pdp b { display: block; font: 600 17px/1.15 var(--pn-sans); }
.pn-stage .mini-pdp span { display: block; font-size: 13px; color: #666B70; }
.pn-stage .atc { display: block; width: fit-content; margin-top: 10px; font: 600 13px/1 var(--pn-sans); font-style: normal; padding: 9px 12px; border-radius: 8px; background: #15171A; color: #fff; }
.pn-stage .glass-list { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--m-glass); color: var(--m-ink); box-shadow: var(--m-rim), 0 24px 50px -20px rgba(0,0,0,.6); }
.pn-stage .gl-row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; background: rgba(27,21,48,.05); font-size: 12.5px; }
.pn-stage .gl-row small { display: block; color: var(--m-ink-2); font-size: 11px; margin-top: 3px; }
.pn-stage .gl-new { background: #fff; }
.pn-stage .gl-new::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: linear-gradient(115deg, #9E62DD 10%, #F49AD8 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.pn-stage .devs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pn-stage .dev { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: #F7F6F9; color: #666B70; font: 400 12px/1.3 var(--pn-mono); text-align: center; box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 20px 40px -20px rgba(0,0,0,.6); }
.pn-stage .dev b { color: #15171A; font: 600 14px/1.2 var(--pn-sans); }
.pn-stage .joins { width: 100%; height: 70px; display: block; }
.pn-stage .joins path { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pn-stage .one { justify-self: center; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--m-glass); color: var(--m-ink); box-shadow: var(--m-rim), 0 24px 50px -20px rgba(0,0,0,.6); }
.pn-stage .one code { font: 600 16px/1 var(--pn-mono); }
.pn-stage .one em { background: transparent; color: #5A2FA6; padding: 0; font-size: 12px; letter-spacing: .02em; }
.pn-stage .attr { display: grid; gap: 8px; padding: 18px; border-radius: 14px; background: var(--m-glass); color: #3A3450; font-size: 12.5px; box-shadow: var(--m-rim), 0 24px 50px -20px rgba(0,0,0,.6); }
.pn-stage .attr strong { font: 600 44px/1 var(--pn-mono); color: var(--m-ink); font-variant-numeric: tabular-nums; }
.pn-stage .attr small { color: var(--m-ink-2); font-size: 11.5px; }
.pn-stage .mini-rail { padding: 14px; border-radius: 14px; background: #F7F6F9; color: #15171A; box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 20px 40px -20px rgba(0,0,0,.6); }
.pn-stage .mini-rail h4 { margin: 0 0 10px; font: 600 14px/1 var(--pn-sans); color: #15171A; }
.pn-stage .mini-rail div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pn-stage .mini-rail i { aspect-ratio: 1; border-radius: 8px; background: #E8E6EE center / cover; }
.pn-stage .mini-rail i:first-child { box-shadow: 0 0 0 2px #9E62DD; }
@media (prefers-reduced-motion: no-preference) {
  .pn-stage.play .lane.ok { animation: pn-arrive .6s var(--pn-ease) .2s both; } .pn-stage.play .gate { animation: pn-arrive .5s var(--pn-ease) .6s both; } .pn-stage.play .lane.bad { animation: pn-arrive .6s var(--pn-ease) 1s both; }
  .pn-stage.play .gl-new, .pn-stage.play .one, .pn-stage.play .mini-rail i:first-child { animation: pn-arrive .6s var(--pn-ease) 1.1s both; }
}
@keyframes pn-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 639px) { .pn-stage { padding: 22px; } .pn-stage.sc-col, .pn-stage.sc-rt { grid-template-columns: 1fr; } .pn-stage .lane { grid-template-columns: minmax(0, 1fr) auto; } .pn-stage .lane b { display: none; } .pn-stage .devs { gap: 6px; } .pn-stage .dev { padding: 10px 6px; font-size: 10.5px; } .pn-stage .dev b { font-size: 12px; } }
/* a light customer screen on the aurora veil (one feature panel per view) */
.pn-veilpanel { border-radius: 22px; padding: clamp(18px, 3vw, 40px); min-height: 320px; display: grid; align-content: center; }
.pn-veilpanel .pn-screen { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 24px 50px -20px rgba(5,2,14,.75); }
.pn-veilpanel .pn-screen img { width: 100%; height: auto; }
.pn-veilpanel .pn-rc { position: absolute; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 2; }

/* ---------- S8 comparison table (package Tables A, panel) ---------- */
.pn-tblw { overflow-x: auto; border-radius: 18px; }
.pn-night .pn-tblw { background: var(--k-panel); box-shadow: inset 0 0 0 1px var(--k-line); }
.pn-day .pn-tblw { background: #fff; box-shadow: inset 0 0 0 1px var(--k-dline); }
.pn-tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 620px; }
.pn-tbl th, .pn-tbl td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.pn-tbl thead th { font: 500 14px/1.3 var(--pn-sans); color: var(--ink-3); vertical-align: bottom; }
.pn-tbl thead th.pn-us { color: var(--ink); }
.pn-tbl thead .pn-lk { width: 104px; color: var(--ink); }
.pn-tbl tbody th { font-weight: 500; color: var(--ink); width: 28%; }
.pn-tbl td { color: var(--ink-2); }
.pn-tbl tr:last-child th, .pn-tbl tr:last-child td { border-bottom: 0; }
.pn-tbl td .pn-yes, .pn-tbl td .pn-part { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; }
.pn-tbl td svg { width: 18px; height: 18px; margin-top: 3px; color: var(--ink); }
.pn-tbl td .pn-part svg { color: var(--ink-3); }
.pn-srcnote { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 14px; color: var(--ink-3); }

/* ---------- S9 proof ---------- */
/* story cards (package Homepage modules, .sband) */
.pn-sband { position: relative; border-radius: 22px; overflow: hidden; display: grid; gap: clamp(28px, 3.4vw, 44px); padding: clamp(32px, 4.4vw, 60px) clamp(20px, 3vw, 40px) clamp(24px, 3vw, 40px); color: #F3F0F8;
  background: linear-gradient(180deg, rgba(15,10,26,0) 40%, rgba(15,10,26,.55)), url(../assets/aurora-ribbons.jpg) 50% 100% / cover no-repeat, #0F0A1A; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.pn-sband blockquote { margin: 0; max-width: 20ch; font: 500 clamp(30px, 3.8vw, 54px)/1.03 var(--pn-sans); letter-spacing: -.032em; color: #F3F0F8; text-wrap: balance; }
.pn-sband blockquote span { color: rgba(243,240,248,.42); }
.pn-sband .pn-src { font-size: 14px; color: rgba(243,240,248,.62); display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.pn-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.pn-story { --g: rgba(150,118,196,.6); position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 10px; align-content: end; min-height: 240px; padding: 30px 28px; background: rgba(9,7,20,.55); color: #fff; text-decoration: none; }
.pn-story + .pn-story { border-left: 1px solid rgba(255,255,255,.12); }
.pn-story > * { position: relative; }
.pn-story b { position: absolute; top: 30px; left: 28px; font: 600 24px/1 var(--pn-sans); letter-spacing: -.01em; color: #fff; }
.pn-story span { max-width: 30ch; font-size: 19px; line-height: 1.4; color: #F4F1FA; text-shadow: 0 1px 12px rgba(8,6,18,.45); }
.pn-story i { font-style: normal; font-size: 15.5px; color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--pn-ease), transform .35s var(--pn-ease); }
.pn-story i::after { content: " \2192"; }
.pn-story::before { content: ""; position: absolute; inset: -30%; z-index: -2; pointer-events: none; background: var(--img) var(--pos, 50% 20%) / 190% auto no-repeat; filter: blur(30px) saturate(1.8) brightness(.8); transform: scale(1.1) translate(-2%, 2%); opacity: .16; transition: opacity .6s var(--pn-ease), transform 1.2s var(--pn-ease); }
.pn-story::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.22) 45%, rgba(255,255,255,.05) 53%, rgba(255,255,255,0) 68%) 120% 0 / 260% 100% no-repeat, linear-gradient(0deg, rgba(8,6,18,.8), rgba(8,6,18,.35) 45%, rgba(8,6,18,0) 72%), linear-gradient(180deg, rgba(8,6,18,.3), rgba(8,6,18,0) 34%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.08); opacity: 0; transition: opacity .5s var(--pn-ease), background-position 1.4s var(--pn-ease); }
.pn-story:hover::before, .pn-story:focus-visible::before { opacity: 1; transform: none; }
.pn-story:hover::after, .pn-story:focus-visible::after { opacity: 1; background-position: -40% 0, 0 0, 0 0; }
.pn-story:hover i, .pn-story:focus-visible i { opacity: 1; transform: none; }
.pn-story:focus-visible { outline: 2px solid var(--k-lilac-t); outline-offset: -2px; }
@media (hover: none), (max-width: 1023px) { .pn-story::before { opacity: .7; transform: none; } .pn-story::after { opacity: 1; } .pn-story i { opacity: 1; transform: none; } }
@media (max-width: 1023px) { .pn-stories { grid-template-columns: 1fr; } .pn-story { min-height: 200px; } .pn-story + .pn-story { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); } }
/* one quote, with the customer's photo through frosted glass (package Photography, story card) */
.pn-quote .pn-g12 { align-items: center; }
.pn-quote blockquote { margin: 0; font: 500 clamp(26px, calc(20px + 1.4vw), 40px)/1.15 var(--pn-sans); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.pn-quote figcaption { margin-top: 24px; display: grid; gap: 2px; font-size: 15.5px; color: var(--ink-2); }
.pn-quote figcaption b { color: var(--ink); font-weight: 500; }
.pn-quote figure { margin: 0; }
.pn-quote .pn-lnk { margin-top: 20px; }
.pn-photo { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 4.2; background: var(--img) 50% 50% / cover no-repeat; }
.pn-night .pn-photo { filter: saturate(.85) brightness(.95); }
.pn-night .pn-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,22,54,.1), rgba(15,10,26,.55)); mix-blend-mode: multiply; }
.pn-photo .pn-wmtag { position: absolute; left: 14px; bottom: 14px; z-index: 1; padding: 10px 14px; border-radius: 12px; font: 600 17px/1 var(--pn-sans); color: #fff; background: rgba(14,10,34,.35); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.14); }
/* daylight proof: quote on a mist panel, raised white story cards */
.pn-mist { border-radius: 24px; background: var(--k-mist); padding: clamp(20px, 3.4vw, 48px); }
.pn-dstories { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .pn-dstories { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pn-dstory { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 16px; background: #fff; color: var(--ink-2); text-decoration: none; box-shadow: 0 0 0 1px rgba(32,32,96,.08), 0 8px 18px -12px rgba(32,32,96,.3); transition: box-shadow .2s var(--pn-ease); }
.pn-dstory:hover { box-shadow: 0 0 0 1px rgba(32,32,96,.14), 0 14px 26px -12px rgba(32,32,96,.38); }
.pn-dstory b { font: 600 20px/1 var(--pn-sans); color: #202060; }
.pn-dstory span { font-size: 16.5px; line-height: 1.45; }
.pn-dstory i { font-style: normal; color: var(--link); font-weight: 500; font-size: 15px; }

/* ---------- S10 stats (package Charts B, Aurora) ---------- */
.pn-stats { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pn-stats.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pn-stats.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pn-stats.pn-lead { grid-template-columns: minmax(0, 2fr) repeat(var(--rest, 2), minmax(0, 1fr)); } }
.pn-stat { display: grid; gap: 10px; align-content: space-between; min-height: 220px; padding: 28px; border-radius: 18px; }
.pn-night .pn-stat { background: var(--k-panel); box-shadow: inset 0 0 0 1px var(--k-line); }
.pn-day .pn-stat { background: var(--k-mist); }
.pn-stat .pn-big { font: 500 clamp(52px, calc(40px + 2.4vw), 76px)/.9 var(--pn-sans); letter-spacing: -.045em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pn-stat .pn-what { font-size: 17px; line-height: 1.4; color: var(--ink-2); max-width: 24ch; }
.pn-stat .pn-src { font-size: 13.5px; color: var(--ink-3); }
.pn-stat svg.pn-spark { width: 100%; max-width: 320px; height: auto; overflow: visible; }
.pn-stat.pn-lit { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pn-stat.pn-lit .pn-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: end; } }

/* ---------- S11 steps: ruled rows, optional code sample (package Code A, panel) ---------- */
.pn-steps { list-style: none; margin: 0; padding: 0; counter-reset: st; border-top: 1px solid var(--line); }
.pn-steps > li { counter-increment: st; display: grid; gap: 14px 32px; padding: 32px 0; border-bottom: 1px solid var(--line); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .pn-steps > li { grid-template-columns: 64px minmax(0, 4fr) minmax(0, 6fr); } }
.pn-steps > li::before { content: counter(st, decimal-leading-zero); font: 500 14px/1.6 var(--pn-mono); color: var(--ink-3); letter-spacing: .06em; }
.pn-steps .pn-h3 { font-size: 22px; }
.pn-steps .pn-sbody { display: grid; gap: 14px; align-content: start; }
.pn-steps .pn-sbody p { font-size: 16.5px; color: var(--ink-2); }
.pn-code { border-radius: 14px; overflow: hidden; }
.pn-night .pn-code { background: var(--k-panel); box-shadow: inset 0 0 0 1px var(--k-line); }
.pn-day .pn-code { background: var(--k-mist); }
.pn-codeh { display: flex; align-items: center; gap: 12px; padding: 7px 7px 7px 14px; box-shadow: inset 0 -1px 0 var(--line); }
.pn-codeh span { font: 400 13px/1 var(--pn-mono); color: var(--ink-3); }
.pn-codeh .pn-rail { padding: 3px; } .pn-codeh .pn-rail button { height: 28px; padding: 0 11px; font-size: 13px; }
.pn-copybtn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; font: 500 13.5px/1 var(--pn-sans); background: transparent; color: var(--ink); cursor: pointer; }
.pn-copybtn svg { width: 16px; height: 16px; }
.pn-code pre { margin: 0; padding: 16px 18px 18px; font: 400 13.5px/1.7 var(--pn-mono); overflow-x: auto; color: var(--ink); }
.pn-night .pn-code .k { color: #B794F0; } .pn-night .pn-code .s { color: #F2B8DC; } .pn-night .pn-code .f { color: #fff; font-weight: 500; } .pn-night .pn-code .c { color: #847D94; }
.pn-day .pn-code .k { color: #7B45C8; } .pn-day .pn-code .s { color: #A3326F; } .pn-day .pn-code .f { color: #202060; font-weight: 500; } .pn-day .pn-code .c { color: #6B6990; }

/* ---------- S12 fact strip ---------- */
.pn-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0; }
@media (min-width: 1024px) { .pn-facts { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
.pn-facts > div { display: grid; gap: 8px; align-content: start; padding: 22px 20px 22px 0; }
@media (min-width: 1024px) { .pn-facts > div + div { padding-left: 24px; box-shadow: inset 1px 0 0 var(--line); } }
@media (max-width: 1023px) { .pn-facts > div:nth-child(even) { padding-left: 16px; box-shadow: inset 1px 0 0 var(--line); } .pn-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
.pn-facts dt { font: 500 12px/1.2 var(--pn-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pn-facts dd { margin: 0; font-size: 17px; line-height: 1.4; color: var(--ink); }
.pn-facts dd a { color: var(--ink); text-decoration-color: var(--line); }

/* ---------- S13 integrations ---------- */
.pn-integ .pn-g12 { align-items: start; }
.pn-integ .pn-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .pn-integ .pn-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pn-integ .pn-wm { min-height: 72px; font-size: 15.5px; }
.pn-integ .pn-copy { display: grid; gap: 16px; align-content: start; }

/* ---------- S14 media (package Video A, aurora veil) ---------- */
.pn-media .pn-g12 { align-items: start; }
.pn-player { position: relative; margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; container-type: inline-size; isolation: isolate; color: #fff; background: #0F0A1A; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.pn-player::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url(../assets/aurora-veil.jpg) 25% 50% / cover no-repeat; transform: scaleX(-1); }
.pn-player::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(15,10,26,.75), rgba(15,10,26,0) 62%); }
.pn-player .pn-lk { position: absolute; left: 4cqw; top: 4cqw; width: 15cqw; color: rgba(255,255,255,.9); }
.pn-player h3 { position: absolute; left: 4.4cqw; top: 13cqw; width: 46cqw; color: #fff; font-size: 6.4cqw; line-height: .98; letter-spacing: -.035em; }
.pn-player h3 em { font-style: normal; color: #B794F0; }
.pn-player .pn-pscr { position: absolute; left: 52cqw; right: -6cqw; top: 18cqw; border-radius: 1.6cqw; overflow: hidden; box-shadow: 0 0 0 .3cqw rgba(255,255,255,.35), 0 3cqw 6cqw -2cqw rgba(5,2,14,.7); }
.pn-player .pn-pscr img { width: 100%; }
.pn-play { position: absolute; left: 4.4cqw; bottom: 5cqw; z-index: 2; display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 20px 0 8px; border: 0; border-radius: 999px; font: 500 16px/1 var(--pn-sans); color: #fff; cursor: pointer;
  background: rgba(243,240,248,.12); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.16); }
.pn-play i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0F0A1A; }
.pn-play i svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
.pn-play small { font-size: 14px; color: rgba(255,255,255,.75); }
@container (max-width: 520px) { .pn-player h3 { font-size: 7.6cqw; width: 60cqw; } .pn-play { height: 44px; font-size: 14.5px; } .pn-play i { width: 32px; height: 32px; } .pn-play small { display: none; } }
.pn-moments { display: grid; gap: 0; border-top: 1px solid var(--line); }
.pn-moments h3 { font: 500 13px/1.2 var(--pn-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 18px 0 8px; }
.pn-moments a { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); text-decoration: none; font-size: 16px; }
.pn-moments a span { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.pn-moments a:hover { color: var(--ink); }
.pn-media-copy { display: grid; gap: 12px; margin-top: 24px; max-width: 46em; }

/* ---------- S15 prose ---------- */
.pn-article { display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .pn-article.pn-has-toc { grid-template-columns: minmax(0, var(--pn-measure-prose)) minmax(0, 260px); justify-content: space-between; } }
.pn-prose { max-width: var(--pn-measure-prose); font-size: 18px; line-height: 28px; color: var(--ink-2); }
.pn-prose > * + * { margin-top: 20px; }
.pn-prose h2 { font-size: clamp(28px, calc(22px + 1.2vw), 36px); line-height: 1.12; letter-spacing: -.025em; margin-top: 56px; }
.pn-prose h3 { font-size: var(--pn-h3); line-height: 1.25; letter-spacing: -.015em; margin-top: 40px; }
.pn-prose h4 { font-size: var(--pn-h4); line-height: 1.35; margin-top: 32px; }
.pn-prose h2:first-child, .pn-prose h3:first-child { margin-top: 0; }
.pn-prose h2 + *, .pn-prose h3 + *, .pn-prose h4 + * { margin-top: 14px; }
.pn-prose ul, .pn-prose ol { padding-left: 22px; display: grid; gap: 8px; }
.pn-prose li::marker { color: var(--ink-3); }
.pn-prose b, .pn-prose strong { color: var(--ink); font-weight: 600; }
.pn-prose a { color: var(--link); }
.pn-prose figure { margin: 36px 0 0; }
.pn-prose figure img { border-radius: 14px; width: 100%; }
.pn-prose figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.pn-prose .pn-code, .pn-prose .pn-tblw { margin-top: 28px; }
.pn-prose .pn-tbl { font-size: 15px; min-width: 520px; }
.pn-prose .pn-tbl th, .pn-prose .pn-tbl td { padding: 12px 16px; }
.pn-prose .pn-tbl td code { font-size: 13.5px; color: var(--ink); }
.pn-callout { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; padding: 20px 22px; border-radius: 14px; font-size: 16.5px; line-height: 1.55; }
.pn-callout svg { width: 22px; height: 22px; color: var(--ink); margin-top: 2px; }
.pn-day .pn-callout { background: var(--k-mist); }
.pn-night .pn-callout { background: var(--k-panel); box-shadow: inset 0 0 0 1px var(--k-line); }
.pn-tldr { padding: 24px 26px; border-radius: 18px; max-width: var(--pn-measure-prose); }
.pn-day .pn-tldr { background: var(--k-mist); }
.pn-night .pn-tldr { background: var(--k-panel); box-shadow: inset 0 0 0 1px var(--k-line); }
.pn-tldr h2 { font: 500 12px/1.2 var(--pn-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.pn-tldr ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 17px; line-height: 1.5; color: var(--ink); }
.pn-toc { display: none; }
@media (min-width: 1024px) { .pn-toc { display: grid; gap: 4px; align-content: start; position: sticky; top: 96px; padding-left: 20px; border-left: 1px solid var(--line); font-size: 15px; } }
.pn-toc h2 { font: 500 12px/1.2 var(--pn-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.pn-toc a { padding: 5px 0; color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.pn-toc a[aria-current] { color: var(--ink); font-weight: 600; }
.pn-toc a:hover { color: var(--ink); }
.pn-author { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: start; padding: 24px; border-radius: 18px; max-width: var(--pn-measure-prose); }
.pn-day .pn-author { background: var(--k-mist); }
.pn-night .pn-author { background: var(--k-panel); }
.pn-author .pn-av { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 600 20px/1 var(--pn-sans); color: var(--ink); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.pn-night .pn-author .pn-av { background: var(--bg-3); }
.pn-author b { display: block; color: var(--ink); font-weight: 600; font-size: 17px; }
.pn-author small { display: block; color: var(--ink-3); font-size: 14px; margin-bottom: 8px; }
.pn-author p { font-size: 16px; color: var(--ink-2); }
.pn-pull { margin: 40px 0 0; padding: 0 0 0 24px; border-left: 2px solid var(--line); font: 500 clamp(22px, calc(18px + .8vw), 28px)/1.3 var(--pn-sans); letter-spacing: -.015em; color: var(--ink); }
.pn-pull footer { margin-top: 12px; font: 400 15px/1.4 var(--pn-sans); color: var(--ink-3); letter-spacing: 0; }

/* ---------- S16 FAQ ---------- */
.pn-faq .pn-g12 { align-items: start; }
.pn-qa { border-top: 1px solid var(--line); }
.pn-qa details { border-bottom: 1px solid var(--line); }
.pn-qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 16px; align-items: center; padding: 22px 0; font: 500 19px/1.35 var(--pn-sans); color: var(--ink); }
.pn-qa summary::-webkit-details-marker { display: none; }
.pn-qa summary svg { width: 22px; height: 22px; color: var(--ink-2); transition: transform .25s var(--pn-ease); justify-self: end; }
.pn-qa details[open] summary svg { transform: rotate(45deg); }
.pn-qa summary:focus-visible { outline-offset: 4px; }
.pn-qa .pn-ans { padding: 0 44px 26px 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: var(--pn-measure-prose); display: grid; gap: 12px; }

/* ---------- S17 form (package Forms A; daylight only) ---------- */
.pn-formsec .pn-g12 { align-items: start; }
.pn-next { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: nx; }
.pn-next li { counter-increment: nx; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; font-size: 16.5px; color: var(--ink-2); }
.pn-next li::before { content: counter(nx); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--pn-sans); color: #202060; background: #fff; box-shadow: 0 0 0 1px rgba(32,32,96,.12); }
.pn-next b { color: var(--ink); font-weight: 600; }
.pn-fcard { max-width: var(--pn-form); border-radius: 20px; padding: clamp(20px, 2.6vw, 32px); background: #fff; box-shadow: 0 0 0 1px rgba(32,32,96,.08), 0 16px 36px -20px rgba(32,32,96,.35); display: grid; gap: 16px; color: #45457A; }
.pn-fcard h3 { color: #202060; font-size: 22px; letter-spacing: -.02em; }
.pn-form { display: grid; gap: 16px; margin: 0; }
.pn-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 14px; }
@media (max-width: 519px) { .pn-two { grid-template-columns: 1fr; } }
.pn-fg { display: grid; gap: 7px; align-content: start; min-width: 0; }
.pn-flabel { display: flex; justify-content: space-between; gap: 10px; font: 500 14.5px/1.3 var(--pn-sans); color: #202060; }
.pn-flabel span + span { font-weight: 400; color: #6B6990; }
.pn-fhelp { font: 400 13.5px/1.4 var(--pn-sans); color: #6B6990; }
.pn-fmsg { font: 400 14px/1.35 var(--pn-sans); color: #8A1F33; }
.pn-ffld { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 12px; background: #fff; color: #202060; font: 400 15.5px/1.3 var(--pn-sans); box-shadow: 0 0 0 1px rgba(32,32,96,.14), 0 1px 2px rgba(32,32,96,.08), 0 6px 14px -10px rgba(32,32,96,.3); }
.pn-ffld input, .pn-ffld select, .pn-ffld textarea { all: unset; box-sizing: border-box; flex: 1; min-width: 0; font: inherit; color: inherit; }
.pn-ffld input, .pn-ffld select { height: 44px; }
.pn-ffld select { display: block; line-height: 44px; padding-right: 26px; cursor: pointer; }
.pn-ffld textarea { padding: 11px 0; min-height: 76px; }
.pn-ffld input::placeholder, .pn-ffld textarea::placeholder { color: #6B6990; opacity: 1; }
.pn-ffld .pn-chev { position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: #6B6990; pointer-events: none; }
.pn-ffld:focus-within { outline: 2px solid #202060; outline-offset: 2px; }
.pn-ffld.err { box-shadow: 0 0 0 1.5px #8A1F33, 0 6px 14px -10px rgba(138,31,51,.3); }
.pn-cb { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font: 400 14.5px/1.45 var(--pn-sans); color: #45457A; cursor: pointer; }
.pn-cb input { appearance: none; -webkit-appearance: none; margin: 1px 0 0; width: 22px; height: 22px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgba(32,32,96,.24), 0 1px 2px rgba(32,32,96,.1); cursor: pointer; }
.pn-cb input:checked { background: #2B2440 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 L10 17.5 L19 7.5'/%3E%3C/svg%3E") 50% 50% / 16px no-repeat; box-shadow: none; }
.pn-cb input:focus-visible { outline: 2px solid #202060; outline-offset: 2px; }
.pn-cb a { color: #7B45C8; }
.pn-fsum { border-radius: 12px; padding: 14px 16px; background: #FBE1E5; color: #8A1F33; display: grid; gap: 6px; font: 400 14.5px/1.4 var(--pn-sans); }
.pn-fsum b { font-weight: 600; font-size: 15px; }
.pn-fsum ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.pn-fsum a { color: #8A1F33; }
.pn-fsub { justify-self: start; }
.pn-fnote { font-size: 13.5px; color: #6B6990; }

/* ---------- S18 listing (daylight index) ---------- */
.pn-feature { display: grid; gap: 24px 40px; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 16px; border-radius: 24px; background: var(--k-mist); text-decoration: none; color: inherit; }
@media (min-width: 1024px) { .pn-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding: 16px 40px 16px 16px; } }
.pn-feature .pn-thumb { aspect-ratio: 16 / 9; border-radius: 14px; }
.pn-feature .pn-fx { display: grid; gap: 14px; padding: 8px; }
.pn-feature .pn-h2 { font-size: clamp(28px, calc(22px + 1.2vw), 38px); }
.pn-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--bg-2) var(--img) var(--pos, 50% 50%) / cover no-repeat; }
.pn-tools { margin: 48px 0 28px; display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; }
.pn-tools .pn-fld { width: min(340px, 100%); }
.pn-tools .pn-rail { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
@media (min-width: 1024px) { .pn-tools { flex-wrap: nowrap; } .pn-tools .pn-rail { max-width: calc(100% - 300px); } .pn-tools .pn-fld { width: 280px; flex: none; } }
@media (max-width: 639px) { .pn-tools .pn-rail { border-radius: 16px; flex-wrap: wrap; } }
.pn-results { display: grid; gap: 40px 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pn-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pn-results { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pn-post { display: grid; gap: 12px; align-content: start; color: inherit; text-decoration: none; }
.pn-post .pn-h3 { font-size: 21px; line-height: 1.25; }
.pn-post:hover .pn-h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pn-post p { font-size: 16px; color: var(--ink-2); }
.pn-post .pn-small { display: flex; gap: 10px; }
.pn-pager { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.pn-pager a, .pn-pager span { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; font: 500 15px/1 var(--pn-sans); color: var(--ink-2); text-decoration: none; }
.pn-pager a:hover { background: var(--k-mist); color: var(--ink); }
.pn-pager [aria-current] { color: #202060; background: #fff; box-shadow: 0 0 0 1px rgba(32,32,96,.12), 0 2px 6px -2px rgba(32,32,96,.24); }
.pn-pager .pn-s { padding: 0 16px; }

/* ---------- S19 related ---------- */
.pn-rel { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .pn-rel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pn-relc { display: grid; gap: 14px; align-content: start; padding: 12px 12px 22px; border-radius: 18px; text-decoration: none; color: inherit; transition: box-shadow .2s var(--pn-ease), background-color .2s var(--pn-ease); }
.pn-night .pn-relc { background: var(--k-panel); box-shadow: inset 0 0 0 1px var(--k-line); }
.pn-night .pn-relc:hover { background: #1E1733; }
.pn-night .pn-relc .pn-thumb { filter: saturate(.85) brightness(.95); }
.pn-day .pn-relwrap { border-radius: 24px; background: var(--k-mist); padding: clamp(12px, 2vw, 16px); }
.pn-day .pn-relc { background: #fff; box-shadow: 0 0 0 1px rgba(32,32,96,.08), 0 8px 18px -12px rgba(32,32,96,.3); }
.pn-relc > :not(.pn-thumb) { padding-inline: 10px; }
.pn-relc .pn-h3 { font-size: 20px; line-height: 1.3; }
.pn-relc .pn-lnk { font-size: 15px; }

/* ---------- S20 CTA band ---------- */
.pn-close { text-align: center; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #0F0A1A 0, rgba(15,10,26,.2) 55%, rgba(15,10,26,.5) 100%), url(../assets/aurora-ribbons.jpg) 50% 100% / cover no-repeat, #0F0A1A; }
.pn-close .pn-in { position: relative; display: grid; justify-items: center; gap: 22px; }
.pn-close .pn-mark { width: clamp(120px, 14vw, 180px); height: auto; margin-bottom: -4px; }
.pn-close .pn-glow { position: absolute; left: 50%; top: -40px; width: min(720px, 100%); height: 360px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(122,69,214,.5), transparent 70%); filter: blur(30px); z-index: -1; pointer-events: none; }
.pn-close .pn-h2 { max-width: 14em; }
.pn-close p.pn-line { font-size: 20px; line-height: 30px; color: var(--ink-2); max-width: 34em; }
.pn-close .pn-btns { justify-content: center; margin-top: 6px; }
.pn-ctapanel { border-radius: 24px; padding: clamp(28px, 4.4vw, 56px); display: grid; gap: 24px 40px; grid-template-columns: minmax(0, 1fr); align-items: center; min-height: 260px; }
@media (min-width: 1024px) { .pn-ctapanel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .pn-ctapanel .pn-btns { justify-content: flex-end; } }
.pn-ctapanel .pn-h2 { color: #fff; font-size: clamp(30px, calc(24px + 1.4vw), 44px); max-width: 14em; }
.pn-ctapanel p { margin-top: 14px; font-size: 18px; line-height: 1.5; color: #E6E1F0; max-width: 32em; }
.pn-ctapanel.pn-veil::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(15,10,26,.72) 0%, rgba(15,10,26,.35) 60%, rgba(15,10,26,.1) 100%); }

/* ---------- reduced transparency (package Accessibility A) ---------- */
@media (prefers-reduced-transparency: reduce) {
  .pn-night .pn-s, .pn-night .pn-rail, .pn-night .pn-fld, .pn-rc, .pn-play, .pn-photo .pn-wmtag, .pn-night .pn-nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .pn-night .pn-s, .pn-play { background: #2B2440 !important; }
  .pn-night .pn-rail, .pn-night .pn-fld, .pn-rc, .pn-photo .pn-wmtag, .pn-night .pn-nav { background: #19132A !important; }
}
@media (prefers-reduced-motion: reduce) { .pn * { transition: none !important; animation: none !important; } }

/* ---------- T2 pricing only (bespoke, package Pricing A): three cards on mist, the featured plan on the veil ---------- */
.pn-pricing { padding-top: 0; }
.pn-plans { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); padding: 12px; border-radius: 24px; background: var(--k-mist); }
@media (min-width: 1024px) { .pn-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pn-plan { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 28px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(32,32,96,.08), 0 8px 18px -12px rgba(32,32,96,.3); min-height: 300px; }
.pn-plan.feat { background: transparent; box-shadow: none; color: #E6E1F0; }
.pn-plan.feat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(15,10,26,.78) 0%, rgba(15,10,26,.45) 55%, rgba(15,10,26,.1) 100%); }
.pn-tn { font-size: 16px; font-weight: 500; color: #202060; }
.pn-price { font-size: 38px; font-weight: 500; letter-spacing: -.03em; line-height: 1.05; color: #202060; font-variant-numeric: tabular-nums; }
.pn-plan.feat .pn-tn, .pn-plan.feat .pn-price { color: #fff; }
.pn-pd { font-size: 16px; line-height: 1.5; }
.pn-pcta { padding-top: 8px; }
.pn-incl { margin-top: 40px; display: grid; gap: 16px; }
.pn-incl ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 24px; }
.pn-incl li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; color: var(--ink-2); }
.pn-incl li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: #202060; }
/* breadcrumb inside the hero */
.pn-hero .pn-crumb { padding-top: 0; margin-bottom: clamp(32px, 4vw, 56px); text-align: left; }
.pn-hero--display { padding-top: 24px; }
.pn-hero--display .pn-in { padding-top: clamp(24px, 4vw, 56px); }
.pn-hero--title, .pn-hero--split, .pn-hero--media { padding-top: 24px; }
.pn-article > *, .pn-article > div > * { min-width: 0; }
.pn-prose .pn-tblw, .pn-prose .pn-code { max-width: 100%; }
.pn-fsign .pn-lk { color: var(--ink); }
.pn-codeh .pn-rail { flex-wrap: nowrap; }
@media (max-width: 639px) { .pn-codeh > span { display: none; } .pn-codeh .pn-copybtn span { display: none; } }
/* heroes without a breadcrumb (T2, homepage-like pages) get their top padding back */
.pn-hero:not(:has(.pn-crumb)) { padding-top: clamp(56px, 6vw, 96px); }
.pn-hero--display:not(:has(.pn-crumb)) .pn-in { padding-top: 0; }
.pn-sec.pn-pricing { padding-top: 0; }
@media (min-width: 1024px) { .pn-incl ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pn-sticky { position: sticky; top: 96px; } }
.pn-prosesec .pn-h2 { font-size: clamp(30px, calc(24px + 1.4vw), 44px); }
.pn-hero + .pn-sec.pn-compact { padding-top: 0; }
@media (max-width: 639px) { .pn-hero--display .pn-in { justify-items: start; text-align: left; } .pn-hero--display .pn-btns { justify-content: flex-start; } }
.pn-faq .pn-head { margin-bottom: 0; }

[hidden] { display: none !important; }
/* Display hero visual: the product on an aurora veil panel, the screen cropped by the panel's lower edge */
.pn-heropanel { position: relative; margin: clamp(40px, 5vw, 64px) auto 0; max-width: 1080px; border-radius: 24px; max-height: clamp(260px, 38vw, 540px); padding: clamp(20px, 3.4vw, 48px) clamp(16px, 6vw, 80px) 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 40px 90px -40px rgba(5,2,14,.9); }
.pn-heropanel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,10,26,.15), rgba(15,10,26,0) 40%); }
.pn-hp-screen { border-radius: 14px 14px 0 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 30px 60px -20px rgba(5,2,14,.8); background: #F7F6F9; }
.pn-hp-screen img { width: 100%; height: auto; }
.pn-heropanel.is-scene { height: auto; padding: clamp(28px, 4vw, 56px) clamp(16px, 8vw, 120px); display: grid; align-content: center; }
.pn-stage.pn-bare { background: transparent; box-shadow: none; min-height: 0; padding: 0; overflow: visible; }
.pn-stage.pn-bare::before, .pn-stage.pn-bare::after { display: none; }
.pn-heropanel .pn-rc { position: absolute; right: clamp(12px, 3vw, 32px); bottom: clamp(12px, 3vw, 32px); z-index: 2; font-size: 14px; }
@media (max-width: 639px) { .pn-heropanel .pn-rc { font-size: 12px; } .pn-hp-screen { border-radius: 10px 10px 0 0; } }
.pn-hero--display + .pn-sec { padding-top: var(--pn-pad-d); }

/* ---------- S21 testimonials (addition to the requirements' S1-S20) ---------- */
.pn-tsts { columns: 1; column-gap: 16px; }
@media (min-width: 640px) { .pn-tsts { columns: 2; } }
@media (min-width: 1024px) { .pn-tsts.n3, .pn-tsts.n5, .pn-tsts.n6 { columns: 3; } }
.pn-tst { break-inside: avoid; margin: 0 0 16px; padding: 28px; border-radius: 20px; display: grid; gap: 22px; }
.pn-night .pn-tst { background: rgba(243,240,248,.06); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.1); }
.pn-day .pn-tst { background: #fff; box-shadow: 0 0 0 1px rgba(32,32,96,.08), 0 8px 18px -12px rgba(32,32,96,.3); }
.pn-tst blockquote { margin: 0; display: grid; gap: 12px; }
.pn-tst blockquote p { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.pn-tst .pn-tst-lead { font-size: clamp(20px, calc(17px + .5vw), 24px); line-height: 1.3; letter-spacing: -.012em; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.pn-tst figcaption { display: grid; gap: 2px; padding-top: 16px; box-shadow: inset 0 1px 0 var(--line); font-size: 15px; color: var(--ink-3); }
.pn-tst figcaption b { color: var(--ink); font-weight: 600; font-size: 16px; }
.pn-day .pn-tstsec .pn-mist .pn-tst:last-child { margin-bottom: 0; }
@media (prefers-reduced-transparency: reduce) { .pn-night .pn-tst { -webkit-backdrop-filter: none; backdrop-filter: none; background: #19132A; } }

/* S17 consent (draft, for legal review) */
.pn-opt { color: #6B6990; white-space: nowrap; }
.pn-cver { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: #F4F3FA; box-shadow: inset 0 0 0 1px #E2DFEE; font: 500 12px/1.3 var(--pn-mono); letter-spacing: .04em; color: #6B6990; }
.pn-cver b { font-weight: 600; color: #202060; padding: 3px 8px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgba(32,32,96,.12); }
.pn-fnote a { color: #7B45C8; }
/* the scene's lanes sit on the veil, so they carry their own frosted night fill for contrast */
.pn-heropanel .pn-stage.pn-bare .lane.bad, .pn-heropanel .pn-stage.pn-bare .gate { background: rgba(15,10,26,.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.pn-heropanel .pn-stage.pn-bare .lane.bad b { color: #D8D5E2; }

/* ---------- T8 paid landing page (2026-10-06): reduced chrome, hero with the action beside the copy, night forms ---------- */
.pn-ubar { position: relative; z-index: 30; }
.pn-ubar .pn-wrap { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pn-back { font-size: 15px; color: var(--ink-2) !important; text-decoration: none; }
.pn-back:hover { color: var(--ink) !important; text-decoration: underline; }
.pn-mfoot { padding-block: 28px; font-size: 13.5px; color: var(--ink-3); box-shadow: inset 0 1px 0 var(--line); }
.pn-mfoot .pn-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.pn-mfoot nav { display: flex; gap: 20px; }
.pn-mfoot a { color: var(--ink-3); text-decoration: none; }
.pn-mfoot a:hover { color: var(--ink); text-decoration: underline; }
.pn-sec.pn-lphero { padding-block: 24px 40px; }
.pn-lphero .pn-sky::before, .pn-lphero::before { inset: -72px 0 0 0; }
.pn-lphero .pn-g12 { align-items: start; }
@media (min-width: 1024px) { .pn-lphero .pn-in { padding-top: 40px; } .pn-lphero .pn-g12 { grid-auto-flow: dense; row-gap: 28px; } .pn-lphero .pn-lpright { grid-column: 7 / span 6 !important; grid-row: 1 / span 2; } .pn-lphero .pn-lpnextc { grid-column: 1 / span 6 !important; grid-row: 2; } }
@media (min-width: 1024px) { .pn-lphero .pn-g12 { gap: 32px 64px; } }
.pn-lph1 { font-size: clamp(40px, calc(28px + 2.6vw), 60px); max-width: 13em; }
.pn-lphero .pn-sub { font-size: 19px; line-height: 29px; max-width: 30em; }
.pn-lpnextw { display: grid; gap: 12px; padding-top: 20px; box-shadow: inset 0 1px 0 var(--line); width: 100%; max-width: 30em; }
.pn-lpk { font: 500 12px/1.2 var(--pn-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pn-lpnext { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: nx; }
.pn-lpnext li { counter-increment: nx; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16.5px; line-height: 1.45; color: var(--ink-2); }
.pn-lpnext li::before { content: counter(nx); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12.5px/1 var(--pn-sans); color: var(--ink); background: rgba(243,240,248,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.12); }
.pn-lpafter { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-2); }
.pn-lpafter svg { color: var(--k-lilac-t); flex: none; }
.pn-lpright { min-width: 0; }
/* A: the daylight form card on an aurora veil panel (the package's form, unchanged; the veil carries the night world) */
.pn-formstage { border-radius: 28px; padding: clamp(16px, 3vw, 40px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 40px 90px -40px rgba(5,2,14,.9); }
.pn-formstage .pn-fcard { max-width: none; box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 30px 60px -24px rgba(5,2,14,.75); }
/* B: frosted night form on Polar sky. Labels and inputs stay above 4.5:1 on the glass. */
.pn-fglassw { position: relative; }
.pn-fglassw::before { content: ""; position: absolute; inset: 8% -6% -4% 10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(121,69,223,.45), rgba(121,69,223,0)); filter: blur(30px); }
.pn-fcard.pn-fglass { max-width: none; color: var(--ink-2); background: linear-gradient(180deg, rgba(243,240,248,.11), rgba(243,240,248,.05)); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); box-shadow: var(--k-glass); }
.pn-fglass h3, .pn-fglass .pn-flabel { color: var(--ink); }
.pn-fglass .pn-flabel span + span, .pn-fglass .pn-fhelp, .pn-fglass .pn-fnote { color: #A39CB4; }
.pn-fglass .pn-ffld { background: rgba(15,10,26,.55); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 2px rgba(0,0,0,.35); }
.pn-fglass .pn-ffld input::placeholder { color: #8F88A2; }
.pn-fglass .pn-ffld .pn-chev { color: #A39CB4; }
.pn-fglass .pn-ffld:focus-within { outline-color: var(--ink); box-shadow: inset 0 0 0 1px rgba(183,148,240,.7); }
.pn-fglass .pn-ffld select option { color: #19132A; }
.pn-fglass .pn-cb { color: var(--ink-2); }
.pn-fglass .pn-cb input { background: rgba(15,10,26,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.pn-fglass .pn-cb input:checked { background-color: var(--k-violet); }
.pn-fglass a { color: var(--k-lilac-t); }
/* logo bar straight under the paid hero: one quiet row */
.pn-lplogos { padding-block: 8px var(--pn-pad-c); }
.pn-lplogos .pn-label { margin-bottom: 16px; }
/* content pages: placeholder cover */
.pn-cover { aspect-ratio: 4 / 5; max-width: 380px; margin-inline: auto; border-radius: 18px; padding: 32px; display: grid; align-content: space-between; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 40px 80px -30px rgba(5,2,14,.9); }
.pn-cover b { font-size: 32px; line-height: 1.08; font-weight: 500; letter-spacing: -.02em; }
.pn-cover .pn-label { color: rgba(255,255,255,.8); }
.pn-cover .pn-lk { width: 104px; }
.pn-lphero { overflow-x: clip; }
/* T8 review fixes (2026-10-06): quiet logo row, tighter rhythm on a page that should read in two minutes, night error state */
.pn-lplogos .pn-wall { gap: 0; }
.pn-night .pn-lplogos .pn-wm { min-height: 48px; background: none; box-shadow: none; color: rgba(243,240,248,.62); font-size: 18px; }
.pn-lp main > .pn-sec:not(.pn-lphero):not(.pn-lplogos) { padding-block: var(--pn-pad-c); }
.pn-fglass .pn-fmsg { color: #FFB3C0; }
.pn-fglass .pn-ffld.err { box-shadow: inset 0 0 0 1.5px #FF8FA3; }
.pn-fglass .pn-fsum a { color: #8A1F33; }
.pn-lpesc { margin-top: 14px; text-align: center; font-size: 15px; color: var(--ink-2); }
.pn-lpesc a { display: inline-flex; align-items: center; gap: 4px; color: var(--ink) !important; font-weight: 500; text-decoration: none; }
.pn-lpesc a:hover { text-decoration: underline; }
@media (min-width: 1024px) { .pn-lphero .pn-g12 { grid-template-rows: auto 1fr; } .pn-lphero .pn-lpnextc { align-self: start; } }
.pn-lphero .pn-lpright > .pn-heropanel.is-scene { padding: 40px 28px; min-height: 380px; }
@media (min-width: 1024px) { .pn-lphero .pn-lpright:has(> .pn-heropanel) { align-self: center; margin-top: 40px; } }
/* T8 day (2026-10-06): plain white page; the form card keeps its aurora panel (treatment A); quiet logo row; day number discs */
.pn-day .pn-lplogos .pn-wall { padding: 0; background: none; }
.pn-day .pn-lplogos .pn-wm { min-height: 48px; background: none; box-shadow: none; color: #6B6990; font-size: 18px; }
.pn-day .pn-lpnext li::before { color: #202060; background: #fff; box-shadow: 0 0 0 1px rgba(32,32,96,.16), 0 1px 2px rgba(32,32,96,.08); }
.pn-day .pn-lpafter svg { color: #7B45C8; }
.pn-day .pn-formstage { box-shadow: 0 30px 70px -36px rgba(32,32,96,.55); }
/* T8 day surfaces: a visible tone step plus an edge (the 2026-10-05 daylight rule: lavender group #EBE5F7 with a #C9BEE3 edge; white tiles with a #CFC6E5 border), never mist on white alone */
.pn-day.pn-lp .pn-card { background: #fff; box-shadow: 0 0 0 1px #CFC6E5, 0 10px 24px -16px rgba(32,32,96,.35); }
.pn-day.pn-lp .pn-tstsec .pn-mist { background: #EBE5F7; box-shadow: inset 0 0 0 1px #C9BEE3; }
.pn-day.pn-lp .pn-tst { box-shadow: 0 0 0 1px #CFC6E5, 0 10px 24px -16px rgba(32,32,96,.35); }
/* T8 logo row (2026-10-06): real one-color logos, inlined so they take the theme's text color */
.pn-lrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; align-items: center; justify-items: center; }
@media (min-width: 640px) { .pn-lrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pn-lrow { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.pn-lg { display: flex; align-items: center; justify-content: center; min-height: 48px; color: var(--ink-2); opacity: .85; }
.pn-day .pn-lg { color: var(--ink); opacity: .7; }
.pn-lg svg { display: block; width: auto; max-width: 100%; }

/* ---------- Readability fixes, 8 Oct 2026 (readability check: worst 10% of pixels behind each line; 4.5:1 body, 3:1 large) ----------
   Rule: caption grey (#847D94 night, --ink-3) only on plain night or a flat panel; on glass, plates and gradients small text uses body grey. */
.pn-heropanel .pn-rc, .pn-veilpanel .pn-rc, .pn-split-media .pn-rc { background: rgba(20, 15, 36, .92); }
.pn-ctapanel .pn-b.pn-s { background: rgba(20, 15, 36, .72); }
.pn-plan.feat::after { background: linear-gradient(100deg, rgba(15,10,26,.85) 0%, rgba(15,10,26,.66) 60%, rgba(15,10,26,.3) 100%); }
.pn-night .pn-tst figcaption { color: var(--ink-2); }
.pn-logos .pn-label { color: var(--ink-2); }
@media (max-width: 760px) {
  .pn-ctapanel.pn-veil::after { background: linear-gradient(180deg, rgba(15,10,26,.84) 0%, rgba(15,10,26,.66) 65%, rgba(15,10,26,.4) 100%); }
  .pn-story { background: rgba(9, 7, 20, .78); }
  /* The overlay is always on below 1024px, so its hover glint sat static over the story line; drop it and deepen the bottom shade. */
  .pn-story::after { background: linear-gradient(0deg, rgba(8,6,18,.88), rgba(8,6,18,.55) 50%, rgba(8,6,18,.1) 82%), linear-gradient(180deg, rgba(8,6,18,.3), rgba(8,6,18,0) 34%); }
}
@media (max-width: 639px) {
  .pn-wtbl th, .pn-wtbl td { padding: 8px 8px; }
  .pn-wtbl td code { font-size: 11.5px; }
  .pn-win-body { padding: 12px; }
}

/* ---------- Testimonial photos and the panel CTA, 8 Oct 2026 (Andrew) ----------
   S21 shows the person's headshot beside their name, as the live homepage does (assets/people/). No photo, no avatar.
   The main button on the aurora CTA panel is snow with violet ink and a violet arrow disc: violet on the veil measured
   1.08:1 against the panel at 1440 (a control needs 3:1); snow measures 4.6:1 at 1440 and 16:1 at 390. */
.pn-tst-id { display: grid; gap: 2px; }
.pn-tst figcaption.pn-tst-who { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; }
.pn-tst-ph { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }
.pn-night .pn-tst-ph { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.pn-day .pn-tst-ph { box-shadow: 0 0 0 1px rgba(32, 32, 96, .1); }
.pn-ctapanel .pn-b.pn-p { background: #fff; color: #3B2390; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 12px 30px -12px rgba(5, 2, 14, .7); }
.pn-ctapanel .pn-b.pn-p:hover { background: #F1ECFB; }
.pn-ctapanel .pn-p .pn-disc { background: #6738B8; color: #fff; }
.pn-ctapanel .pn-p:hover .pn-disc { background: #7A4ACD; }
/* S21 card without a headshot: the company logo at the top of the card, as the homepage carousel shows (8 Oct). */
.pn-tst-logo { display: flex; align-items: center; min-height: 28px; color: var(--ink); }
.pn-tst-logo svg { display: block; width: auto; max-width: 100%; }