/* The partner host (catalog/website/partner, partner.zenind.com): its whole stylesheet. No theme and no Bootstrap
   load there. Colours are the site's colour system (zenind/css/colors.css, --zds-color-*), so the accent follows the
   system a visitor picked elsewhere on the site; the layout links it before this file.
   The world (Nov 2026): one partner link takes a founder from anywhere to a US company, so the pages draw that route.
   Zenind's neutral ground, one accent-wash route panel per page, thin accent routes that leave from a filled dot and
   arrive at a ring, white nodes with accent-border edges and 10px corners, Noto Sans only (display 500, tight
   tracking, tabular figures), status as a dot and a word. No gradients, globes or pictures of people.
   Written phone first, in logical properties: Arabic pages run right to left with the same rules. */

/* ---------- Noto Sans, self-hosted (the site's own files, fonts/noto-sans; OFL) ----------
   Registered under its own name: on Japanese, Korean, Chinese and Arabic pages the shared loader also registers a
   'Noto Sans', and the two must not replace each other. These files carry Latin, Cyrillic, Greek, Vietnamese and
   Devanagari; other scripts fall through the stack below. */

@font-face {
    font-family: 'Noto Sans Partner';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../../../fonts/noto-sans/noto-sans-v30-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2) format('woff2');
}
@font-face {
    font-family: 'Noto Sans Partner';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../../../fonts/noto-sans/noto-sans-v30-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-500.woff2) format('woff2');
}
@font-face {
    font-family: 'Noto Sans Partner';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../../../fonts/noto-sans/noto-sans-v30-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-600.woff2) format('woff2');
}
@font-face {
    font-family: 'Noto Sans Partner';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../../../fonts/noto-sans/noto-sans-v30-cyrillic_cyrillic-ext_devanagari_greek_greek-ext_latin_latin-ext_vietnamese-700.woff2) format('woff2');
}

/* ---------- tokens ---------- */

:root {
    --pp-ink: var(--zds-color-text-strong);
    --pp-text: var(--zds-color-text);
    --pp-muted: var(--zds-color-text-muted);
    --pp-line: var(--zds-color-border-subtle);
    --pp-line-strong: var(--zds-color-border);
    --pp-control: var(--zds-color-border-control);
    --pp-surface: var(--zds-color-surface);
    --pp-canvas: var(--zds-color-surface-canvas);
    --pp-hover: var(--zds-color-surface-hover);
    /* the route: its panel, its nodes' edges and its line */
    --pp-route-ground: var(--zds-color-accent-wash);
    --pp-route-edge: var(--zds-color-accent-border);
    --pp-route: var(--zds-color-accent);
    --pp-route-width: 1.5px;
    --pp-ring: 0 0 0 3px rgb(var(--zds-color-accent-rgb) / .2);
    --pp-radius: 10px;
    --pp-radius-panel: 14px;
    --pp-radius-control: 8px;
    --pp-shadow-card: 0 1px 2px rgb(var(--zds-color-shadow-soft-rgb) / .05), 0 8px 24px -16px rgb(var(--zds-color-shadow-soft-rgb) / .2);
    --pp-shadow-node: 0 1px 2px rgb(var(--zds-color-shadow-soft-rgb) / .06), 0 16px 32px -20px rgb(var(--zds-color-shadow-soft-rgb) / .32);
    --pp-shadow-pop: 0 0 0 1px rgb(var(--zds-color-text-strong-rgb) / .07), 0 2px 4px rgb(var(--zds-color-shadow-soft-rgb) / .06), 0 22px 48px -14px rgb(var(--zds-color-shadow-soft-rgb) / .36);
    --pp-ease: cubic-bezier(.16, 1, .3, 1);
    --pp-font: 'Noto Sans Partner', 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --pp-display-weight: 500;
    --pp-display-tracking: -.032em;
    --pp-heading-tracking: -.022em;
    --pp-gutter: 16px;
    --pp-header: 64px;
    accent-color: var(--zds-color-accent);
}

@media (min-width: 640px) {
    :root { --pp-gutter: 24px; }
}

/* Japanese, Korean, Chinese and Arabic come from the shared loader's Noto faces (only their 400 loads, so headings
   stay at 400-500 there: synthesized bold smears at size); Thai and Devanagari from the system. Those scripts are not
   tracked. */
:root:lang(ja) { --pp-font: 'Noto Sans Partner', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif; }
:root:lang(ko) { --pp-font: 'Noto Sans Partner', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
:root:lang(zh) { --pp-font: 'Noto Sans Partner', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; }
:root:lang(zh-TW) { --pp-font: 'Noto Sans Partner', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; }
:root:lang(ar) { --pp-font: 'Noto Sans Partner', 'Noto Sans', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; }
:root:lang(th) { --pp-font: 'Noto Sans Partner', 'Noto Sans Thai', 'Leelawadee UI', Thonburi, Tahoma, sans-serif; }
:root:is(:lang(ja), :lang(ko), :lang(zh), :lang(ar)) { --pp-display-weight: 400; }
:root:is(:lang(ja), :lang(ko), :lang(zh), :lang(ar), :lang(th), :lang(hi)) { --pp-display-tracking: 0; --pp-heading-tracking: 0; }

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--pp-header) + 16px);
}

html:has(body.pp-page--dashboard) { scroll-padding-top: calc(var(--pp-header) + 72px); }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    background: var(--pp-surface);
    color: var(--pp-text);
    font-family: var(--pp-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;
    overflow-wrap: break-word;
    text-align: start;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
legend { padding: 0; }
h1, h2, h3 { color: var(--pp-ink); font-family: inherit; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--zds-color-accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--zds-color-accent-hover); }
:focus-visible { outline: 2px solid var(--zds-color-accent); outline-offset: 2px; }
::selection { background: rgb(var(--zds-color-accent-rgb) / .16); color: var(--pp-ink); }
[hidden] { display: none !important; }
bdi { unicode-bidi: isolate; }
mark { background: transparent; color: inherit; }

.pp-main { display: block; outline: 0; }

.pp-wrap {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: var(--pp-gutter);
}

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

.pp-skip {
    position: absolute;
    inset-inline-start: 16px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: var(--pp-radius-control);
    background: var(--pp-ink);
    color: var(--zds-color-text-inverse);
    font-weight: 600;
    text-decoration: none;
}
.pp-skip:focus { top: 12px; color: var(--zds-color-text-inverse); }

.pp-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
[dir="rtl"] .pp-icon--mirror { transform: scaleX(-1); }

/* Signed-in hint (layout.twig): "Dashboard" for a partner, "Sign in" and "Join" for everyone else. */
html:not([data-pp-auth="member"]) [data-pp-when="member"],
html[data-pp-auth="member"] [data-pp-when="guest"] { display: none !important; }

/* a program number's slot (filled in the browser, common/index.js program()) holds two figure spaces while empty, so
   the line barely moves when the number lands */
[data-pp-var]:empty::before { content: "\2007\2007"; }

/* The route's two marks: a filled dot where a route leaves, a ring where it arrives. */
.pp-dot, .pp-ring {
    display: inline-block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
}
.pp-dot { background: var(--pp-route); }
.pp-ring { box-shadow: inset 0 0 0 var(--pp-route-width) var(--pp-route); background: var(--pp-surface); }

/* ---------- type ---------- */

.pp-display {
    font-size: clamp(34px, 3.1vw, 45px);
    font-weight: var(--pp-display-weight);
    letter-spacing: var(--pp-display-tracking);
    line-height: 1.08;
}
.pp-display__line { display: block; text-wrap: balance; }
:root:is(:lang(ja), :lang(ko), :lang(zh)) .pp-display { line-height: 1.3; }
:root:is(:lang(ar), :lang(th), :lang(hi)) .pp-display { line-height: 1.3; }
:root:lang(ja) :is(.pp-display, .pp-h2, .pp-page-title, .pp-route__label, .pp-route__title) { word-break: auto-phrase; }
/* Korean wraps at the spaces between words; by default browsers break Hangul between any two syllables. */
:root:lang(ko) { word-break: keep-all; }
:root:is(:lang(ja), :lang(zh)) { line-break: strict; }

.pp-h2 {
    max-width: 22ch;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: var(--pp-display-weight);
    letter-spacing: var(--pp-heading-tracking);
    line-height: 1.12;
    text-wrap: balance;
}
:root:is(:lang(ja), :lang(ko), :lang(zh)) .pp-h2 { max-width: 16em; line-height: 1.35; }

.pp-h3 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.3;
}

.pp-lede {
    margin-top: 22px;
    max-width: 52ch;
    color: var(--pp-text);
    font-size: clamp(17px, 1.35vw, 19px);
    line-height: 1.6;
    text-wrap: pretty;
}

.pp-note {
    margin-top: 20px;
    color: var(--pp-muted);
    font-size: 14px;
}

/* ---------- buttons ---------- */

.pp-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--pp-radius-control);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out;
    -webkit-tap-highlight-color: transparent;
}
.pp-btn .pp-icon { width: 18px; height: 18px; }
.pp-btn--primary {
    background: var(--zds-color-accent);
    color: var(--zds-color-accent-contrast);
    box-shadow: 0 1px 2px rgb(var(--zds-color-shadow-soft-rgb) / .14);
}
.pp-btn--primary:hover { background: var(--zds-color-accent-hover); color: var(--zds-color-accent-contrast); }
.pp-btn--secondary {
    border-color: var(--pp-line-strong);
    background: var(--pp-surface);
    color: var(--pp-ink);
    box-shadow: 0 1px 2px rgb(var(--zds-color-shadow-soft-rgb) / .06);
}
.pp-btn--secondary:hover { border-color: var(--zds-color-border-strong); background: var(--pp-hover); color: var(--pp-ink); }
.pp-btn--small { min-height: 36px; padding: 0 14px; font-size: 14px; }
.pp-btn--large { min-height: 52px; padding: 0 24px; font-size: 16px; }
.pp-btn--block { width: 100%; white-space: normal; }
.pp-btn:disabled { opacity: .55; cursor: default; }

/* A button at work keeps its size: the label fades and a spinner takes the middle. */
.pp-btn[aria-busy="true"] { color: transparent !important; pointer-events: none; }
.pp-btn[aria-busy="true"] > * { visibility: hidden; }
.pp-btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 20px;
    height: 20px;
    margin: auto;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-color: var(--zds-color-accent-contrast) var(--zds-color-accent-contrast) transparent transparent;
    animation: pp-spin .7s linear infinite;
}
.pp-btn--secondary[aria-busy="true"]::after { border-color: var(--pp-ink) var(--pp-ink) transparent transparent; }

@keyframes pp-spin { to { transform: rotate(360deg); } }

.pp-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--zds-color-accent-text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color .15s ease-out;
}
.pp-linkbtn:hover { text-decoration-color: currentColor; }
.pp-linkbtn:disabled { color: var(--pp-muted); cursor: default; text-decoration: none; }

.pp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

/* A list of points: each leaves from a route dot. The check icons some templates still carry stay hidden. */
.pp-checks { display: grid; gap: 12px; }
.pp-checks li { display: flex; gap: 12px; align-items: baseline; color: var(--pp-text); font-size: 15.5px; line-height: 1.5; }
.pp-checks li::before {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pp-route);
    transform: translateY(-2px);
}
.pp-checks .pp-icon { display: none; }

/* ---------- header ---------- */

.pp-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--pp-surface);
    box-shadow: inset 0 -1px 0 var(--pp-line);
}

.pp-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 16px;
    height: var(--pp-header);
}

.pp-brand {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
    color: var(--pp-ink);
    text-decoration: none;
}
.pp-brand:hover { color: var(--pp-ink); }
.pp-brand__logo { width: 96px; height: auto; aspect-ratio: 600 / 123.75; }
.pp-brand__name {
    padding-inline-start: 12px;
    border-inline-start: 1px solid var(--pp-line-strong);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
}

.pp-header__tools {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.pp-header__link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border-radius: var(--pp-radius-control);
    color: var(--pp-ink);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
}
.pp-header__link:hover { background: var(--pp-hover); color: var(--pp-ink); }
.pp-header__link[aria-current="page"] { color: var(--zds-color-accent-text); }

/* the home's sections, wide screens only; the first thing the row folds (layout.twig) */
.pp-header__nav { display: none; align-items: center; gap: 2px; margin-inline-end: 8px; }
@media (min-width: 1100px) {
    .pp-header__nav { display: flex; }
}
.pp-header.is-quiet .pp-header__nav { display: none; }

/* Phones: everything in the row a little tighter, so "Sign in" and "Join" both fit at 390px in English. */
@media (max-width: 479.98px) {
    .pp-header__row { column-gap: 12px; }
    .pp-brand { gap: 8px; }
    .pp-brand__logo { width: 80px; }
    .pp-brand__name { padding-inline-start: 8px; font-size: 14.5px; }
    .pp-header__tools { gap: 4px; }
    .pp-lang__button, .pp-header__link { padding: 0 8px; }
    .pp-header .pp-btn--small { padding: 0 12px; }
}

/* Folding (layout.twig): the language name goes first, then Join, then the word beside the logo (the logo's link
   carries its own label). */
.pp-header.is-compact .pp-lang__current,
.pp-header.is-compact .pp-lang .pp-chevron { display: none; }
.pp-header.is-tight .pp-header__join { display: none; }
.pp-header.is-bare .pp-brand__name { display: none; }

/* ---------- popovers: the language list ---------- */

.pp-pop { position: relative; }
.pp-pop > summary { list-style: none; }
.pp-pop > summary::-webkit-details-marker { display: none; }

.pp-lang__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: var(--pp-radius-control);
    color: var(--pp-ink);
    font-size: 14.5px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
.pp-lang__button:hover { background: var(--pp-hover); }
.pp-lang__button .pp-icon { width: 18px; height: 18px; }
.pp-lang__button .pp-chevron { width: 16px; height: 16px; color: var(--pp-muted); transition: transform .2s var(--pp-ease); }
.pp-lang[open] .pp-chevron { transform: rotate(180deg); }
.pp-lang__current { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }

.pp-pop__panel {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 60;
    width: min(480px, calc(100vw - 32px));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 12px;
    border-radius: var(--pp-radius-panel);
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow-pop);
    white-space: normal;
}
.pp-pop__title { padding: 4px 8px 8px; color: var(--pp-muted); font-size: 13px; font-weight: 600; }
.pp-lang__list { display: grid; grid-template-columns: 1fr; gap: 2px; }
@media (min-width: 520px) {
    .pp-lang__list { grid-template-columns: 1fr 1fr; }
}
.pp-lang__list a {
    display: block;
    padding: 8px 10px;
    border-radius: var(--pp-radius-control);
    color: var(--pp-text);
    font-size: 14.5px;
    line-height: 1.35;
    text-decoration: none;
}
.pp-lang__list a:hover { background: var(--pp-hover); color: var(--pp-ink); }
.pp-lang__list a[aria-current="true"] { background: var(--zds-color-accent-tint); color: var(--zds-color-accent-text); font-weight: 600; }

@media (max-width: 519.98px) {
    .pp-pop__panel { position: fixed; top: calc(var(--pp-header) + 4px); inset-inline: 16px; width: auto; }
}

/* ---------- footer ---------- */

.pp-footer {
    padding: 56px 0 32px;
    background: var(--pp-surface);
    box-shadow: inset 0 1px 0 var(--pp-line);
    font-size: 15px;
}
.pp-footer__top { display: grid; gap: 32px; }
@media (min-width: 640px) {
    .pp-footer__top { grid-template-columns: 1fr 1fr 1fr; }
    .pp-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .pp-footer__top { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
    .pp-footer__brand { grid-column: auto; }
}
.pp-footer__brand p { max-width: 42ch; margin-top: 14px; color: var(--pp-muted); font-size: 14.5px; }
.pp-footer__col h2 { color: var(--pp-ink); font-size: 14px; font-weight: 600; }
.pp-footer__col ul { display: grid; gap: 10px; margin-top: 14px; }
.pp-footer__col a { color: var(--pp-text); text-decoration: none; }
.pp-footer__col a:hover { color: var(--zds-color-accent-text); text-decoration: underline; }
.pp-footer__base {
    margin-top: 40px;
    padding-top: 24px;
    box-shadow: inset 0 1px 0 var(--pp-line);
    color: var(--pp-muted);
    font-size: 13.5px;
}

/* ---------- home: the hero and its route ---------- */

.pp-hero { padding: clamp(36px, 5vw, 72px) 0 clamp(56px, 7vw, 96px); }
.pp-hero__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1080px) {
    .pp-hero__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 56px; }
}

.pp-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 28px;
    padding-top: 22px;
    box-shadow: inset 0 1px 0 var(--pp-line);
    color: var(--pp-muted);
    font-size: 14.5px;
}
.pp-facts li { display: inline-flex; align-items: center; gap: 9px; }
.pp-facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pp-route); }

/* The route panel: the partner's link, the page a founder opens from it, the company they form. The lines between
   the nodes are drawn by js/page/partner/home/index.js into .pp-route__lines from where the nodes sit; without the
   script the nodes still read in order, with their labels between them. */
.pp-route {
    position: relative;
    padding: clamp(18px, 2.6vw, 30px);
    border-radius: var(--pp-radius-panel);
    background: var(--pp-route-ground);
    box-shadow: inset 0 0 0 1px var(--pp-route-edge);
}
.pp-route__stage { position: relative; display: grid; gap: 14px; }
.pp-route__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.pp-route__lines path { fill: none; stroke: var(--pp-route); stroke-width: var(--pp-route-width); }
.pp-route__lines .pp-route__start { fill: var(--pp-route); }
.pp-route__lines .pp-route__end { fill: var(--zds-color-surface); stroke: var(--pp-route); stroke-width: var(--pp-route-width); }
.pp-route__lines .pp-route__runner { fill: var(--pp-route); }

.pp-node {
    position: relative;
    z-index: 1;
    min-width: 0;
    border: 1px solid var(--pp-route-edge);
    border-radius: var(--pp-radius);
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow-node);
}

.pp-route__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.pp-route__key { color: var(--pp-muted); font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.pp-route__url { display: block; margin-top: 2px; color: var(--pp-ink); font-size: 16px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.pp-route__url mark { color: var(--zds-color-accent-text); }
.pp-route__copy {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid var(--pp-route-edge);
    border-radius: var(--pp-radius-control);
    color: var(--zds-color-accent-text);
}
.pp-route__copy .pp-icon { width: 16px; height: 16px; }

/* a label that sits on a route, between two nodes */
.pp-route__label {
    position: relative;
    z-index: 1;
    justify-self: start;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--pp-route-ground);
    color: var(--pp-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    text-wrap: balance;
}

/* the founder's page, as a small browser window */
.pp-route__page { overflow: hidden; }
.pp-route__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 10px 0;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--pp-canvas);
    color: var(--pp-muted);
    font-size: 12.5px;
    line-height: 1.4;
}
.pp-route__bar .pp-icon { width: 13px; height: 13px; }
.pp-route__sheet { padding: 16px 18px 18px; }
.pp-route__brand { display: flex; align-items: center; gap: 8px; color: var(--pp-ink); font-size: 13.5px; font-weight: 600; }
.pp-route__brand .pp-brand__logo { width: 64px; color: var(--zds-color-accent); }
.pp-route__brand span[aria-hidden] { color: var(--pp-muted); font-weight: 400; }
.pp-route__eyebrow { margin-top: 14px; color: var(--pp-muted); font-size: 13px; line-height: 1.4; }
.pp-route__title { margin-top: 6px; color: var(--pp-ink); font-size: 19px; font-weight: 500; letter-spacing: -.012em; line-height: 1.25; text-wrap: balance; white-space: pre-line; }
.pp-route__assure { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; color: var(--pp-text); font-size: 13px; }
.pp-route__assure li { display: inline-flex; align-items: center; gap: 7px; }
.pp-route__assure li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--zds-color-success); }
.pp-route__cta {
    display: block;
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: var(--pp-radius-control);
    background: var(--zds-color-accent);
    color: var(--zds-color-accent-contrast);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}
.pp-route__sheet[dir="rtl"] { text-align: right; }
:is(.pp-route__sheet, .pp-route__chip):lang(ja) { font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif; word-break: auto-phrase; }
:is(.pp-route__sheet, .pp-route__chip):lang(ko) { font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; word-break: keep-all; }
:is(.pp-route__sheet, .pp-route__chip):lang(zh) { font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
:is(.pp-route__sheet, .pp-route__chip):lang(zh-TW) { font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; }
:is(.pp-route__sheet, .pp-route__chip):lang(ar) { font-family: 'Noto Sans Arabic', 'Noto Sans', 'Segoe UI', Tahoma, sans-serif; }
@media (prefers-reduced-motion: no-preference) {
    .pp-route__sheet.is-switching > * { animation: pp-settle .45s var(--pp-ease) both; }
}
@keyframes pp-settle { from { opacity: 0; transform: translateY(4px); } }

/* the company the founder forms */
.pp-route__end-group { display: grid; gap: 12px; align-content: end; }
.pp-route__company { padding: 14px 16px 16px; }
.pp-route__company-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.pp-route__company-head .pp-route__key { white-space: nowrap; }
.pp-route__company-name { margin-top: 8px; color: var(--pp-ink); font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.pp-route__company-text { margin-top: 4px; color: var(--pp-text); font-size: 13.5px; line-height: 1.45; }
.pp-route__services { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pp-route__services li { padding: 2px 8px; border-radius: 6px; background: var(--pp-canvas); color: var(--pp-text); font-size: 12.5px; line-height: 1.5; }

/* Wide: the link at the top, the page under it with the first route dropping into it (its label beside the line),
   the company at the bottom of the far column, the second route turning across to it. */
@media (min-width: 700px) {
    .pp-route__stage {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-rows: auto auto auto;
        column-gap: 0;
        row-gap: 12px;
    }
    .pp-route__link { grid-column: 1 / 8; grid-row: 1; }
    .pp-route__label--click { grid-column: 5 / 12; grid-row: 2; justify-self: start; margin-inline-start: 12px; }
    .pp-route__page { grid-column: 2 / 8; grid-row: 3; align-self: start; }
    .pp-route__end-group { grid-column: 8 / 13; grid-row: 1 / 4; align-self: end; margin-inline-start: 40px; }
}

.pp-route__langs { margin-top: 22px; }
.pp-route__langs-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    color: var(--pp-ink);
    font-size: 14px;
    font-weight: 600;
}
.pp-route__langs-head span { color: var(--pp-muted); font-size: 13px; font-weight: 400; }
.pp-route__chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.pp-route__chip {
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid var(--pp-line-strong);
    border-radius: var(--pp-radius-control);
    background: var(--pp-surface);
    color: var(--pp-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
.pp-route__chip:hover { border-color: var(--pp-route-edge); background: var(--zds-color-accent-tint); }
.pp-route__chip[aria-pressed="true"] { border-color: var(--zds-color-accent); background: var(--zds-color-accent); color: var(--zds-color-accent-contrast); }
.pp-route__more {
    display: grid;
    place-items: center;
    min-height: 38px;
    padding: 6px 10px;
    border: 1px dashed var(--pp-route-edge);
    border-radius: var(--pp-radius-control);
    color: var(--pp-muted);
    font-size: 13.5px;
}

/* ---------- home: sections ---------- */

.pp-section { padding: clamp(64px, 8vw, 112px) 0; }
.pp-section--canvas { background: var(--pp-canvas); box-shadow: inset 0 1px 0 var(--pp-line), inset 0 -1px 0 var(--pp-line); }
.pp-section__head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); }
.pp-section__lede { margin-top: 14px; max-width: 60ch; color: var(--pp-text); font-size: 17px; text-wrap: pretty; }

/* how it works: three stops on one route */
.pp-steps { position: relative; display: grid; gap: 28px; }
.pp-steps::before {
    content: "";
    position: absolute;
    inset-block: 14px 14px;
    inset-inline-start: 13px;
    width: var(--pp-route-width);
    background: var(--pp-route);
}
.pp-step { position: relative; padding-inline-start: 52px; }
.pp-step__number {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pp-surface);
    box-shadow: inset 0 0 0 var(--pp-route-width) var(--pp-route);
    color: var(--zds-color-accent-text);
    font-size: 13.5px;
    font-weight: 600;
}
.pp-step:first-child .pp-step__number { background: var(--pp-route); color: var(--zds-color-accent-contrast); }
.pp-step__title { font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.pp-step p { margin-top: 8px; max-width: 46ch; color: var(--pp-text); font-size: 15.5px; }
@media (min-width: 860px) {
    .pp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
    .pp-steps::before { inset-block: 13px auto; inset-inline: 14px 0; width: auto; height: var(--pp-route-width); }
    .pp-step { padding-inline-start: 0; padding-top: 52px; }
}

/* the plans: two nodes side by side */
.pp-plans { display: grid; gap: 20px; }
@media (min-width: 800px) {
    .pp-plans { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.pp-plan {
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius-panel);
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow-card);
    transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
.pp-plan:target { border-color: var(--zds-color-accent); box-shadow: var(--pp-ring), var(--pp-shadow-card); }
.pp-plan__name { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.pp-plan__for { margin-top: 6px; color: var(--pp-muted); font-size: 15.5px; }
.pp-plan__figure {
    margin-top: 28px;
    color: var(--pp-ink);
    font-size: clamp(48px, 5.6vw, 68px);
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: 1;
}
.pp-plan__figure-label { margin-top: 10px; color: var(--pp-text); font-size: 16px; font-weight: 500; }
.pp-plan .pp-checks { margin: 24px 0 32px; padding-top: 24px; box-shadow: inset 0 1px 0 var(--pp-line); }
.pp-plan .pp-btn { margin-top: auto; }

/* the rules: a ruled list, each term on its own stop */
.pp-rules { display: grid; column-gap: 48px; box-shadow: inset 0 1px 0 var(--pp-line); }
@media (min-width: 860px) {
    .pp-rules { grid-template-columns: 1fr 1fr; }
}
.pp-rule { display: grid; gap: 6px; align-content: start; padding: 22px 0; box-shadow: inset 0 -1px 0 var(--pp-line); }
@media (min-width: 640px) and (max-width: 859.98px) {
    .pp-rule { grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 20px; }
}
.pp-rule dd { padding-inline-start: 17px; }
@media (min-width: 640px) and (max-width: 859.98px) {
    .pp-rule dd { padding-inline-start: 0; }
}
.pp-rule dt { display: flex; align-items: baseline; gap: 10px; color: var(--pp-ink); font-size: 16px; font-weight: 600; line-height: 1.45; }
.pp-rule dt::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 var(--pp-route-width) var(--pp-route); transform: translateY(-2px); }
.pp-rule dd { color: var(--pp-text); font-size: 15.5px; line-height: 1.6; }

.pp-faq { display: grid; gap: 28px; }
@media (min-width: 1000px) {
    .pp-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 64px; align-items: start; }
}
.pp-faq__list { box-shadow: inset 0 1px 0 var(--pp-line); }
.pp-faq__item { box-shadow: inset 0 -1px 0 var(--pp-line); }
.pp-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    color: var(--pp-ink);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}
.pp-faq__item summary::-webkit-details-marker { display: none; }
.pp-faq__item summary:hover { color: var(--zds-color-accent-text); }
.pp-faq__icon { color: var(--pp-muted); transition: transform .2s var(--pp-ease); }
.pp-faq__item[open] .pp-faq__icon { transform: rotate(45deg); }
.pp-faq__item p { max-width: 68ch; padding: 0 0 22px; color: var(--pp-text); font-size: 16px; }

.pp-awin {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    margin-top: 28px;
    padding: 22px 0 0;
    box-shadow: inset 0 1px 0 var(--pp-line);
}
@media (min-width: 800px) {
    .pp-awin { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
}
.pp-awin__copy p { margin-top: 4px; max-width: 64ch; color: var(--pp-text); font-size: 15px; }

/* the close: one more ask, on the canvas (the route panel stays the page's only accent ground) */
.pp-band { padding: clamp(56px, 7vw, 96px) 0; }
.pp-band__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 24px;
    align-items: center;
    padding: clamp(28px, 4vw, 48px);
    border-radius: var(--pp-radius-panel);
    background: var(--pp-canvas);
}
@media (min-width: 860px) {
    .pp-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
}
.pp-band .pp-h2 { max-width: 24ch; }
/* a long label ("Присъединете се към партньорската програма") wraps on a phone instead of widening the band */
.pp-band .pp-btn { max-width: 100%; padding-block: 12px; white-space: normal; }
.pp-band p { margin-top: 12px; max-width: 54ch; color: var(--pp-text); font-size: 17px; }

/* ---------- forms ---------- */

.pp-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.pp-field { display: grid; gap: 6px; min-width: 0; }
.pp-label { color: var(--pp-ink); font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.pp-label__optional { color: var(--pp-muted); font-weight: 400; }
fieldset.pp-field > legend.pp-label { margin-bottom: 6px; }
.pp-hint { color: var(--pp-muted); font-size: 13.5px; line-height: 1.5; }
.pp-error { color: var(--zds-color-danger-text); font-size: 13.5px; font-weight: 600; line-height: 1.5; }

.pp-input {
    display: block;
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--pp-control);
    border-radius: var(--pp-radius-control);
    background: var(--pp-surface);
    color: var(--pp-ink);
    font-size: 16px;
    line-height: 1.4;
    transition: border-color .15s ease-out, box-shadow .15s ease-out;
    -webkit-appearance: none;
    appearance: none;
}
.pp-input::placeholder { color: var(--zds-color-text-placeholder); opacity: 1; }
.pp-input:hover { border-color: var(--pp-ink); }
.pp-input:focus { border-color: var(--zds-color-accent); outline: 0; box-shadow: var(--pp-ring); }
.pp-input[aria-invalid="true"] { border-color: var(--zds-color-danger-text); }
.pp-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(var(--zds-color-danger-rgb) / .2); }
.pp-input[readonly] { background: var(--pp-canvas); }
.pp-input[dir="ltr"] { text-align: left; }

.pp-select {
    padding-inline-end: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5f7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px 18px;
    cursor: pointer;
    text-overflow: ellipsis;
}
[dir="rtl"] .pp-select { background-position: left 14px center; }
.pp-select:invalid, .pp-select.is-empty { color: var(--zds-color-text-placeholder); }
.pp-select option { color: var(--pp-ink); }

.pp-input--code {
    height: 64px;
    padding-inline-start: calc(14px + .42em);
    font-size: 28px;
    font-weight: 500;
    letter-spacing: .42em;
    text-align: center !important;
}

.pp-readonly {
    padding: 12px 14px;
    border-radius: var(--pp-radius-control);
    background: var(--pp-canvas);
    color: var(--pp-ink);
    font-weight: 500;
    overflow-wrap: anywhere;
    text-align: start;
    unicode-bidi: plaintext;
}

.pp-affix {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--pp-control);
    border-radius: var(--pp-radius-control);
    background: var(--pp-surface);
    transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.pp-affix:hover { border-color: var(--pp-ink); }
.pp-affix:focus-within { border-color: var(--zds-color-accent); box-shadow: var(--pp-ring); }
.pp-affix:has([aria-invalid="true"]) { border-color: var(--zds-color-danger-text); }
.pp-affix__text {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: var(--pp-radius-control) 0 0 var(--pp-radius-control);
    background: var(--pp-canvas);
    box-shadow: inset -1px 0 0 var(--pp-line-strong);
    color: var(--pp-muted);
    font-weight: 500;
}
.pp-affix .pp-input { height: 46px; border: 0; border-radius: 0 var(--pp-radius-control) var(--pp-radius-control) 0; box-shadow: none !important; }

/* sign-up through an invitation link: the account the team prepared, above the form (signup/index.js), set as the
   route's first node */
.pp-invite { margin: 0 0 24px; padding: 18px 20px; border: 1px solid var(--pp-route-edge); border-radius: var(--pp-radius); background: var(--pp-route-ground); }
.pp-invite__title { display: flex; align-items: center; gap: 10px; color: var(--pp-ink); font-size: 17px; font-weight: 600; line-height: 1.35; }
.pp-invite__title::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--pp-route); }
.pp-invite__text { margin-top: 4px; color: var(--pp-text); font-size: 15px; }
.pp-invite__name { margin-top: 12px; color: var(--pp-ink); font-size: 15px; font-weight: 600; }
.pp-invite__links { display: grid; gap: 6px; margin-top: 12px; }
.pp-invite__links li { padding: 8px 12px; border-radius: var(--pp-radius-control); background: var(--pp-surface); box-shadow: inset 0 0 0 1px var(--pp-route-edge); color: var(--pp-ink); font-weight: 500; overflow-wrap: anywhere; }
.pp-invite__plans { margin-top: 14px; }
.pp-auth__step > .pp-alert { margin-bottom: 20px; }

/* a field and its button on one row: the dashboard's link ending and Save */
.pp-inline { display: flex; gap: 8px; }
.pp-inline .pp-affix { flex: 1; min-width: 0; }
.pp-inline .pp-affix__text { white-space: nowrap; }
.pp-inline .pp-affix .pp-input { min-width: 0; }
.pp-inline > .pp-btn { flex-shrink: 0; min-height: 48px; }
@media (max-width: 479px) {
    .pp-inline { flex-wrap: wrap; }
    .pp-inline .pp-affix { flex-basis: 100%; }
    .pp-inline > .pp-btn { width: 100%; }
}

.pp-choices { display: grid; gap: 12px; }
@media (min-width: 560px) {
    .pp-choices { grid-template-columns: 1fr 1fr; }
    .pp-choices--stack { grid-template-columns: 1fr; }
}
.pp-choice {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid var(--pp-line-strong);
    border-radius: var(--pp-radius);
    background: var(--pp-surface);
    cursor: pointer;
    transition: border-color .15s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
}
.pp-choice:hover { border-color: var(--pp-control); }
.pp-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pp-choice__mark {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 2px solid var(--pp-control);
    border-radius: 50%;
    background: var(--pp-surface);
    transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.pp-choice input:checked + .pp-choice__mark { border-color: var(--zds-color-accent); box-shadow: inset 0 0 0 4px var(--pp-surface); background: var(--zds-color-accent); }
.pp-choice:has(input:checked) { border-color: var(--zds-color-accent); background: var(--pp-route-ground); box-shadow: 0 0 0 1px var(--zds-color-accent); }
.pp-choice:has(input:focus-visible) { outline: 2px solid var(--zds-color-accent); outline-offset: 2px; }
.pp-choice:has(input[aria-invalid="true"]) { border-color: var(--zds-color-danger-text); }
.pp-choice__body { display: grid; gap: 2px; }
.pp-choice__title { color: var(--pp-ink); font-size: 15.5px; font-weight: 600; }
.pp-choice__text { color: var(--pp-text); font-size: 14px; line-height: 1.5; }

.pp-check { display: flex; gap: 12px; align-items: flex-start; color: var(--pp-text); font-size: 15px; line-height: 1.5; cursor: pointer; }
.pp-check input { flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0; cursor: pointer; }
.pp-check input[aria-invalid="true"] { outline: 2px solid var(--zds-color-danger-text); outline-offset: 1px; }

.pp-captcha { min-height: 65px; border-radius: var(--pp-radius-control); background: var(--pp-canvas); }
.pp-captcha:has(iframe) { background: transparent; }

.pp-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
/* a long button label ("Αποθήκευση στοιχείων πληρωμής") wraps on a phone instead of widening the form */
.pp-form__foot .pp-btn { max-width: 100%; padding-block: 10px; white-space: normal; text-align: center; }
.pp-form__status { color: var(--zds-color-success-text); font-size: 14px; font-weight: 600; }
.pp-form__status:empty { display: none; }

.pp-alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: var(--pp-radius);
    font-size: 14.5px;
    line-height: 1.5;
}
.pp-alert .pp-icon { margin-top: 1px; }
.pp-alert--danger { background: var(--zds-color-danger-tint); color: var(--zds-color-danger-text); }
.pp-alert--danger a { color: inherit; font-weight: 700; text-decoration: underline; }
.pp-alert--warning { background: var(--zds-color-warning-tint); color: var(--zds-color-warning-text); }
.pp-alert--warning a { color: inherit; font-weight: 700; }
.pp-alert--info { background: var(--pp-route-ground); box-shadow: inset 0 0 0 1px var(--pp-route-edge); color: var(--pp-ink); }
.pp-alert--info .pp-icon { color: var(--zds-color-accent-text); }
.pp-alert__title { font-weight: 600; }
.pp-alert p + p { margin-top: 2px; }

/* ---------- sign-up and sign-in ---------- */

.pp-auth { padding: 28px 0 64px; }
@media (min-width: 600px) {
    .pp-auth { padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 8vw, 104px); background: var(--pp-canvas); }
}
.pp-auth__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) {
    .pp-auth__grid { grid-template-columns: minmax(0, 600px) minmax(0, 360px); justify-content: center; gap: 48px; align-items: start; }
}
.pp-auth__card { min-width: 0; }
@media (min-width: 600px) {
    .pp-auth__card {
        padding: clamp(28px, 4vw, 44px);
        border: 1px solid var(--pp-line);
        border-radius: var(--pp-radius-panel);
        background: var(--pp-surface);
        box-shadow: var(--pp-shadow-card);
    }
}
.pp-auth__card--narrow { max-width: 480px; margin-inline: auto; }
.pp-auth__title { font-size: clamp(26px, 3vw, 32px); font-weight: var(--pp-display-weight); letter-spacing: var(--pp-heading-tracking); line-height: 1.2; outline: 0; text-wrap: balance; }
.pp-auth__lede { margin: 10px 0 28px; color: var(--pp-text); font-size: 16px; }
.pp-auth__lede strong { color: var(--pp-ink); font-weight: 600; unicode-bidi: isolate; }
.pp-auth__switch { margin-top: 24px; color: var(--pp-muted); font-size: 15px; text-align: center; }
.pp-auth__switch a { font-weight: 600; }

/* the sign-up aside: what joining gives, as stops on one route */
.pp-auth__aside {
    padding: 24px;
    border-radius: var(--pp-radius-panel);
    background: var(--pp-route-ground);
    box-shadow: inset 0 0 0 1px var(--pp-route-edge);
}
@media (min-width: 1024px) {
    .pp-auth__aside { position: sticky; top: calc(var(--pp-header) + 32px); padding: 28px; }
}
.pp-auth__aside-title { margin-bottom: 20px; font-size: 18px; font-weight: 600; }
.pp-auth__aside .pp-checks { position: relative; gap: 18px; }
.pp-auth__aside .pp-checks::before {
    content: "";
    position: absolute;
    inset-block: 9px 9px;
    inset-inline-start: 3.25px;
    width: var(--pp-route-width);
    background: var(--pp-route);
}
.pp-auth__aside .pp-checks li { position: relative; gap: 16px; }
.pp-auth__aside .pp-checks li::before { width: 8px; height: 8px; box-shadow: 0 0 0 3px var(--pp-route-ground); }
.pp-auth__aside .pp-checks li:last-child::before { background: var(--pp-surface); box-shadow: inset 0 0 0 var(--pp-route-width) var(--pp-route), 0 0 0 3px var(--pp-route-ground); }

.pp-code__more { display: grid; gap: 14px; margin-top: 24px; }
.pp-code__notice { color: var(--pp-muted); font-size: 14px; }
.pp-code__notice:empty { display: none; }
.pp-code__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }

/* ---------- dashboard ---------- */

.pp-dash { min-height: 70vh; padding: 24px 0 72px; background: var(--pp-canvas); }
@media (min-width: 640px) {
    .pp-dash { padding-top: 40px; }
}
.pp-dash__state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 50vh;
    color: var(--pp-muted);
    text-align: center;
}
.pp-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--pp-line-strong);
    border-top-color: var(--zds-color-accent);
    border-radius: 50%;
    animation: pp-spin .8s linear infinite;
}

.pp-dash__content { display: grid; gap: 20px; }
@media (min-width: 640px) {
    .pp-dash__content { gap: 24px; }
}
.pp-dash__title { font-size: clamp(28px, 3vw, 36px); font-weight: var(--pp-display-weight); letter-spacing: var(--pp-heading-tracking); line-height: 1.2; outline: 0; }
.pp-dash__plan { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; color: var(--pp-text); font-size: 16px; }
.pp-dash__plan:not(:empty)::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--pp-route); transform: translateY(-2px); }

.pp-subnav {
    position: sticky;
    top: var(--pp-header);
    z-index: 20;
    margin-inline: calc(var(--pp-gutter) * -1);
    padding: 10px var(--pp-gutter);
    background: var(--pp-canvas);
    box-shadow: inset 0 -1px 0 var(--pp-line);
    overflow-x: auto;
    scrollbar-width: none;
}
.pp-subnav::-webkit-scrollbar { display: none; }
.pp-subnav ul { display: flex; gap: 6px; }
.pp-subnav a {
    display: block;
    padding: 7px 12px;
    border-radius: var(--pp-radius-control);
    color: var(--pp-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.pp-subnav a:hover { background: var(--pp-surface); color: var(--pp-ink); box-shadow: 0 0 0 1px var(--pp-line); }

.pp-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius-panel);
    background: var(--pp-surface);
    box-shadow: var(--pp-shadow-card);
}
@media (min-width: 640px) {
    .pp-card { padding: 28px; }
}
.pp-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.pp-card__title { font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.pp-card__text { margin-top: 6px; max-width: 70ch; color: var(--pp-muted); font-size: 15px; }
.pp-card__sub { margin-top: 32px; }
.pp-card .pp-form { margin-top: 20px; }

/* the links card is where every route starts: the accent-wash ground, its edge, the link field as the first node */
.pp-card--route { border-color: var(--pp-route-edge); background: var(--pp-route-ground); box-shadow: none; }
.pp-card--route .pp-card__title { display: flex; align-items: center; gap: 10px; }
.pp-card--route .pp-card__title::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--pp-route); }
.pp-card--route .pp-copyfield--hero .pp-copyfield__input { border-color: var(--pp-route-edge); background: var(--pp-surface); box-shadow: var(--pp-shadow-node); }
.pp-card--route .pp-subcard { padding: 20px 0 0; border-radius: 0; background: transparent; box-shadow: inset 0 1px 0 var(--pp-route-edge); }

.pp-copyfield { display: flex; gap: 8px; margin-top: 16px; }
.pp-field .pp-copyfield { margin-top: 0; }
.pp-copyfield__input { flex: 1; font-weight: 500; text-overflow: ellipsis; }
.pp-copyfield .pp-btn { flex-shrink: 0; min-height: 48px; }
.pp-copyfield--hero .pp-copyfield__input { height: 56px; font-size: 18px; }
.pp-copyfield--hero .pp-btn { min-height: 56px; padding: 0 20px; }
@media (max-width: 479.98px) {
    .pp-copyfield { flex-direction: column; }
    .pp-copyfield__input { flex: none; }
}
.pp-btn.is-copied { background: var(--zds-color-success-text); border-color: transparent; color: var(--zds-color-text-inverse); }

.pp-split { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 900px) {
    .pp-split { grid-template-columns: 1fr 1fr; gap: 20px; }
}
.pp-split--top { align-items: start; margin-top: 0; gap: 20px; }
@media (min-width: 640px) {
    .pp-split--top { gap: 24px; }
}
.pp-subcard { min-width: 0; padding: 20px; border-radius: var(--pp-radius); background: var(--pp-canvas); box-shadow: inset 0 0 0 1px var(--pp-line); }
.pp-subcard__title { font-size: 16.5px; font-weight: 600; line-height: 1.35; }
.pp-subcard__text { margin: 4px 0 16px; color: var(--pp-muted); font-size: 14.5px; }
.pp-subcard .pp-form { margin-top: 0; gap: 16px; }
.pp-subcard > .pp-field + .pp-field,
.pp-subcard > .pp-form + .pp-field { margin-top: 16px; }
/* the dashboard's permanent link under the card's text */
.pp-card__text + .pp-field { margin-top: 20px; }

.pp-segmented {
    display: inline-flex;
    max-width: 100%;
    padding: 3px;
    border-radius: var(--pp-radius);
    background: var(--pp-canvas);
    box-shadow: inset 0 0 0 1px var(--pp-line);
    overflow-x: auto;
    scrollbar-width: none;
}
.pp-segmented label { position: relative; flex-shrink: 0; }
.pp-segmented input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pp-segmented span {
    display: block;
    padding: 7px 12px;
    border-radius: 7px;
    color: var(--pp-muted);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out;
}
.pp-segmented label:hover span { color: var(--pp-ink); }
.pp-segmented input:checked + span { background: var(--pp-surface); color: var(--pp-ink); box-shadow: 0 0 0 1px var(--pp-line), 0 1px 3px rgb(var(--zds-color-shadow-soft-rgb) / .1); }
.pp-segmented input:focus-visible + span { outline: 2px solid var(--zds-color-accent); outline-offset: 1px; }

.pp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; box-shadow: inset 0 1px 0 var(--pp-line), inset 0 -1px 0 var(--pp-line); }
/* each number is sized to its column (container units) and never breaks: a phone's three columns are narrow */
.pp-stat { min-width: 0; padding: 16px 14px 18px 0; container-type: inline-size; }
.pp-stat + .pp-stat { padding-inline-start: 16px; box-shadow: inset 1px 0 0 var(--pp-line); }
[dir="rtl"] .pp-stat + .pp-stat { box-shadow: inset -1px 0 0 var(--pp-line); }
.pp-stat dt { color: var(--pp-muted); font-size: 13.5px; font-weight: 500; }
.pp-stat dd {
    margin-top: 4px;
    color: var(--pp-ink);
    font-size: min(clamp(28px, 3.6vw, 40px), 28cqi);
    font-weight: 400;
    letter-spacing: -.03em;
    line-height: 1.1;
    white-space: nowrap;
}

/* The five balances are the life of the money, in order: a commission on hold, in review, available (approved, the
   partner's to request), requested, paid. They sit on one route: a line through five stops, the stop filled once the
   money has arrived (paid). */
.pp-balances { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin-top: 20px; }
@media (min-width: 900px) {
    .pp-balances { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding-top: 26px; }
    .pp-balances::before {
        content: "";
        position: absolute;
        top: 6px;
        inset-inline: 4px 10%;
        height: var(--pp-route-width);
        background: var(--pp-route);
    }
}
.pp-balance { position: relative; min-width: 0; container-type: inline-size; }
.pp-balance::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--pp-surface);
    box-shadow: inset 0 0 0 var(--pp-route-width) var(--pp-route), 0 0 0 4px var(--pp-surface);
}
@media (min-width: 900px) {
    .pp-balance::before { position: absolute; top: -26px; inset-inline-start: 0; margin: 0; }
}
.pp-balance--paid::before { background: var(--pp-route); }
.pp-balance dt { color: var(--pp-muted); font-size: 13.5px; font-weight: 500; }
/* an amount is sized to its column and never breaks ("12,345.67 US$" in Arabic on a phone) */
.pp-balance dd { margin-top: 4px; color: var(--pp-ink); font-size: min(24px, 13cqi); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; white-space: nowrap; }
.pp-balance .pp-balance__hint { margin-top: 6px; color: var(--pp-muted); font-size: 13px; font-weight: 400; letter-spacing: 0; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }
.pp-balance--available dd:not(.pp-balance__hint) { color: var(--zds-color-accent-text); }
[data-pp-stats][aria-busy="true"] dd, .pp-balances[aria-busy="true"] dd:not(.pp-balance__hint) { opacity: .45; }

/* The payout request: one line under the route, on the route's own ground once the balance can be requested, and the
   confirmation it opens (a request cannot be cancelled). */
.pp-request { margin-top: 24px; padding: 14px 16px; border-radius: var(--pp-radius); background: var(--pp-canvas); }
.pp-request.is-ready { background: var(--pp-route-ground); box-shadow: inset 0 0 0 1px var(--pp-route-edge); }
.pp-request__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.pp-request__text { flex: 1 1 24ch; min-width: 0; color: var(--pp-text); font-size: 15px; }
.pp-request.is-ready .pp-request__text { color: var(--pp-ink); }
.pp-request__text bdi { font-weight: 600; }
.pp-request__confirm { margin-top: 14px; padding-top: 14px; box-shadow: inset 0 1px 0 var(--pp-route-edge); }
.pp-request__title { color: var(--pp-ink); font-size: 16px; font-weight: 600; line-height: 1.4; outline: 0; }
.pp-request__note { margin-top: 4px; max-width: 70ch; color: var(--pp-text); font-size: 14.5px; }
.pp-request__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pp-request > .pp-alert, .pp-request > .pp-form__status { margin-top: 12px; }

.pp-table-wrap { margin-top: 16px; border: 1px solid var(--pp-line); border-radius: var(--pp-radius); overflow-x: auto; }
.pp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pp-table th {
    padding: 10px 16px;
    background: var(--pp-canvas);
    color: var(--pp-muted);
    font-size: 13px;
    font-weight: 600;
    text-align: start;
    white-space: nowrap;
}
.pp-table td { padding: 13px 16px; box-shadow: inset 0 1px 0 var(--pp-line); color: var(--pp-ink); white-space: nowrap; }
.pp-table .pp-num { text-align: end; }
.pp-table td.pp-num { font-weight: 600; }
.pp-table .pp-cell-sub { display: block; margin-top: 2px; color: var(--pp-muted); font-size: 13px; }
/* the team's reason for a rejection: free text, so it wraps */
.pp-table .pp-cell-reason { max-width: 36ch; white-space: normal; overflow-wrap: anywhere; }
.pp-table .pp-cell-ltr { direction: ltr; unicode-bidi: isolate; }
.pp-table [aria-busy="true"] td { opacity: .5; }
.pp-table-wrap[aria-busy="true"] { opacity: .6; }

/* Phones: each row is a small card, its labels from the header (data-label, set by the script). */
@media (max-width: 639.98px) {
    .pp-table-wrap { border: 0; border-radius: 0; overflow: visible; }
    .pp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .pp-table, .pp-table tbody, .pp-table tr, .pp-table td { display: block; }
    .pp-table tr { padding: 6px 14px; border: 1px solid var(--pp-line); border-radius: var(--pp-radius); }
    .pp-table tr + tr { margin-top: 10px; }
    .pp-table td { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; box-shadow: none; white-space: normal; text-align: end; }
    .pp-table td + td { box-shadow: inset 0 1px 0 var(--pp-line); }
    .pp-table td::before { content: attr(data-label); color: var(--pp-muted); font-size: 13px; font-weight: 600; text-align: start; }
    .pp-table td > * { text-align: end; }
}

/* status: a dot and a word, the dot's colour where the money is: held, moving, arrived or stopped */
.pp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pp-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}
.pp-badge::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--pp-control); }
.pp-badge--hold::before { background: var(--zds-color-warning); }
.pp-badge--moving::before { background: var(--zds-color-accent); }
.pp-badge--arrived::before { background: var(--zds-color-success); }
.pp-badge--stopped::before { background: var(--zds-color-danger); }

.pp-empty {
    margin-top: 16px;
    padding: 28px 20px;
    border: 1px dashed var(--pp-line-strong);
    border-radius: var(--pp-radius);
    color: var(--pp-muted);
    font-size: 15px;
    text-align: center;
}
.pp-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.pp-pager__range { color: var(--pp-muted); font-size: 14px; }
.pp-pager__buttons { display: flex; gap: 8px; }

.pp-materials { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 560px) {
    .pp-materials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .pp-materials { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pp-material { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--pp-line); border-radius: var(--pp-radius); overflow: hidden; }
.pp-material__preview {
    display: grid;
    place-items: center;
    height: 150px;
    padding: 16px;
    background: var(--pp-canvas);
    box-shadow: inset 0 -1px 0 var(--pp-line);
}
.pp-material__preview--dark { background: var(--zds-color-surface-inverse); }
.pp-material__preview img { width: auto; max-width: 100%; height: auto; max-height: 118px; object-fit: contain; }
.pp-material__format { color: var(--pp-muted); font-size: 22px; font-weight: 600; }
.pp-material__meta { padding: 14px 16px 0; }
.pp-material__name { color: var(--pp-ink); font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.pp-material__specs { margin-top: 2px; color: var(--pp-muted); font-size: 13px; }
.pp-material .pp-btn { align-self: flex-start; margin: 12px 16px 16px; }

/* ---------- terms ---------- */

.pp-doc { padding: clamp(36px, 6vw, 72px) 0 clamp(64px, 8vw, 104px); }
.pp-doc__grid { display: grid; gap: 32px; }
@media (min-width: 1024px) {
    .pp-doc__grid { grid-template-columns: 260px minmax(0, 760px); justify-content: center; column-gap: 64px; row-gap: 40px; }
    .pp-doc__head { grid-column: 2; }
    .pp-doc__toc { grid-column: 1; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--pp-header) + 32px); }
    .pp-doc__body { grid-column: 2; }
}
.pp-page-title {
    font-size: clamp(34px, 4.4vw, 50px);
    font-weight: var(--pp-display-weight);
    letter-spacing: var(--pp-display-tracking);
    line-height: 1.1;
    text-wrap: balance;
}
:root:is(:lang(ja), :lang(ko), :lang(zh), :lang(ar)) .pp-page-title { line-height: 1.3; }
.pp-doc__version { margin-top: 12px; color: var(--pp-muted); font-size: 14.5px; font-weight: 500; }
.pp-doc__intro { margin-top: 24px; color: var(--pp-text); font-size: 17px; line-height: 1.7; }
.pp-doc__governs { margin-top: 20px; padding: 14px 16px; border-radius: var(--pp-radius); background: var(--pp-route-ground); box-shadow: inset 0 0 0 1px var(--pp-route-edge); color: var(--pp-ink); font-size: 15px; }

/* the contents as a route: one line through the sections, a stop at each */
.pp-doc__toc { padding: 22px 20px; border-radius: var(--pp-radius-panel); background: var(--pp-canvas); }
.pp-doc__toc-title { color: var(--pp-ink); font-size: 14px; font-weight: 600; }
.pp-doc__toc ol { position: relative; display: grid; gap: 2px; margin-top: 14px; counter-reset: pp-toc; }
.pp-doc__toc ol::before {
    content: "";
    position: absolute;
    inset-block: 12px 12px;
    inset-inline-start: 3.25px;
    width: var(--pp-route-width);
    background: var(--pp-route-edge);
}
.pp-doc__toc li { position: relative; display: flex; gap: 14px; align-items: baseline; counter-increment: pp-toc; }
.pp-doc__toc li::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pp-canvas);
    box-shadow: inset 0 0 0 var(--pp-route-width) var(--pp-route);
    transform: translateY(-1px);
}
.pp-doc__toc a { display: inline-block; padding: 3px 0; color: var(--pp-text); font-size: 14.5px; line-height: 1.45; text-decoration: none; }
.pp-doc__toc a::before { content: counter(pp-toc) ". "; color: var(--pp-muted); }
.pp-doc__toc a:hover { color: var(--zds-color-accent-text); text-decoration: underline; }
.pp-doc__section + .pp-doc__section { margin-top: 40px; }
.pp-doc__title { font-size: 21px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.pp-doc__number { color: var(--zds-color-accent-text); }
.pp-doc__section p, .pp-doc__section li { color: var(--pp-text); font-size: 16px; line-height: 1.75; }
.pp-doc__section p { margin-top: 12px; }
.pp-doc__section ul { display: grid; gap: 8px; margin-top: 12px; padding-inline-start: 22px; list-style: disc; }
.pp-doc__section li::marker { color: var(--pp-route); }
.pp-doc__cta { margin-top: 48px; }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; }
    .pp-spinner, .pp-btn[aria-busy="true"]::after { animation-duration: 1.6s; }
}