/* GM360 website v2
   Phone first. Tablet: min-width 768px. Desktop: min-width 1100px.
   Colours and type from the approved prototype (CLAUDE.md section 5). */

:root {
  --base: #ECEDEA;
  --panel: #F8F8F6;
  --line: #D5D6D1;
  --line-2: #C4C6C1;
  --ink: #15171A;
  --ink-2: #4A4F57;
  --dark: #15171A;
  --dark-2: #1F2227;
  --dark-line: #33373E;
  --on-dark: #F8F8F6;
  --on-dark-2: #C3C6CC;
  --on-dark-3: #9DA3AC;
  --gold: #C9A24A;
  --gold-hover: #D9B560;
  --gold-accent: #B8912F;
  --gold-text: #7A5C12;
  --gold-on-dark: #E3C77A;
  --err: #A4262C;
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gutter: 16px;
  --nav-h: 64px;
}

/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body.gm { margin: 0; background: var(--base); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.gm.is-locked { overflow: hidden; }
.gm h1, .gm h2, .gm h3, .gm h4, .gm p, .gm ul, .gm ol, .gm figure { margin: 0; }
.gm ul, .gm ol { padding: 0; list-style: none; }
.gm img { max-width: 100%; height: auto; }
.gm a { color: var(--ink); }
.gm a:hover { color: var(--gold-text); }
.gm :where(button, input, textarea, select) { font: inherit; color: inherit; }
.gm :focus-visible { outline: 3px solid var(--gold-accent); outline-offset: 3px; }
.gm [hidden] { display: none !important; }
.js [data-inactive] { display: none !important; }
.gm h1, .gm h2, .gm h3 { overflow-wrap: break-word; hyphens: manual; } /* never split words with a hyphen */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--ink); color: var(--on-dark) !important; padding: 12px 18px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
/* Preview label: floats in a corner so the page looks exactly as visitors will see it */
/* Phone/tablet: in the middle of the header, between the logo and the Menu button */
.preview-bar { position: fixed; top: calc(var(--nav-h) / 2); left: 50%; transform: translate(-50%, -50%); z-index: 80; white-space: nowrap; background: #FFF4D6; color: var(--ink); font-size: 12px; line-height: 1.4; padding: 4px 10px; border: 1px solid #E8D59E; border-radius: 999px; }
@media (min-width: 1100px) { .preview-bar { top: auto; bottom: 12px; left: auto; right: 12px; transform: none; } }
.preview-bar a { font-weight: 700; }

/* ===== LAYOUT ===== */
.wrap { max-width: 1320px; margin: 0 auto; padding-inline: var(--gutter); }
.sec { padding-block: 72px; }
.band { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dark { background: var(--dark); color: var(--on-dark); }
.dark a:not(.btn) { color: var(--gold-on-dark); }
.stack { display: flex; flex-direction: column; gap: 18px; }
.stack--sm { gap: 12px; }
.stack--lg { gap: 22px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.gm .head { margin-bottom: 40px; }
.gm .head--sm { margin-bottom: 28px; }
.page-head { padding-top: 28px; padding-bottom: 32px; } /* small gap under the header, like the homepage */
.grid4, .grid3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }

/* ===== TYPE ===== */
.h1, .h-hero, .h2, .h3, .h-cta { font-family: var(--font); }
.h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1; font-weight: 800; font-stretch: 122%; letter-spacing: -0.03em; }
.h-hero { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.02; font-weight: 800; font-stretch: 120%; letter-spacing: -0.025em; }
.h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05; font-weight: 780; font-stretch: 116%; letter-spacing: -0.02em; }
.h3 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; font-weight: 800; font-stretch: 114%; }
.h-cta { font-size: clamp(44px, 6.4vw, 80px); line-height: 1; font-weight: 800; font-stretch: 122%; letter-spacing: -0.03em; }
.lead { font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.lead--lg { font-size: clamp(18px, 1.6vw, 20px); }
.body-lg { font-size: 17px; line-height: 1.6; }
.dark .lead { color: var(--on-dark-2); }
.muted { color: var(--ink-2); }
.muted-dark { color: var(--on-dark-2); }
.strong { font-weight: 600; }
.small { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.eyebrow { font-size: 16px; color: var(--gold-on-dark); }
.eyebrow--light { color: var(--gold-text); font-weight: 600; }
.note { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.dark .note { color: var(--on-dark-3); }
.star { color: var(--gold-on-dark); }
.tick { color: var(--gold-text); font-weight: 800; flex: none; }
.dark .tick, .flow__box--dark .tick, .benefits .tick { color: var(--gold); }

/* ===== BUTTONS & CHIPS ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 15px 28px; border-radius: 999px; border: 1.5px solid transparent; font: 700 17px/1.2 var(--font); text-decoration: none; text-align: center; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.gm .btn--gold { background: var(--gold); color: var(--ink); }
.gm .btn--gold:hover { background: var(--gold-hover); color: var(--ink); }
.gm .btn--line { background: transparent; color: var(--ink); border-color: var(--ink); font-weight: 600; }
.gm .btn--line:hover { background: var(--ink); color: var(--on-dark); }
.gm .btn--light { background: transparent; color: var(--on-dark); border-color: var(--on-dark); font-weight: 600; }
.gm .btn--light:hover { background: var(--on-dark); color: var(--ink); }
.btn--sm { min-height: 44px; padding: 10px 20px; font-size: 15px; }
.btn--block { width: 100%; }
.btn:disabled { opacity: .6; cursor: wait; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions .btn, .form button.btn, .benefits__cta .btn, .cta-row .btn, .cta .btn, .offer .btn { width: 100%; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; }
.chips--scroll::-webkit-scrollbar { display: none; }
.chips--scroll .chip { flex: none; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--ink); font: 600 15px/1.2 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.gm a.chip { color: var(--ink); }
.chip:hover { border-color: var(--ink); }
.gm .chip[aria-pressed="true"], .gm .chip[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.chips--lg .chip { font-size: 16px; padding: 12px 22px; }
.chip--sm { min-height: 44px; padding: 8px 16px; gap: 8px; }
/* Radio buttons shown as pills */
.chip--radio { position: relative; padding: 0; border: 0; background: none; min-height: 0; white-space: normal; }
.chip--radio input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip--radio span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--panel); }
.chip--radio:hover span { border-color: var(--ink); }
.chip--radio input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.chip--radio input:focus-visible + span { outline: 3px solid var(--gold-accent); outline-offset: 3px; }

/* ===== HEADER ===== */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(236, 237, 234, .95); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.nav__in { display: flex; align-items: center; gap: 24px; min-height: var(--nav-h); }
/* One logo on every device: an SVG image of the slim GM360 the founder chose */
.gm .logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.logo__svg { display: block; height: 19px; width: auto; }
.logo__gm { fill: currentColor; }
.logo__num { fill: var(--gold-accent); }
.logo--dark .logo__num { fill: var(--gold); }
.gm a.logo, .gm a.logo:hover { color: var(--ink); }
.gm a.logo--dark, .gm a.logo--dark:hover { color: var(--on-dark); }
.nav__links, .nav__tools { display: none; }
.nav__toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--line-2); border-radius: 8px; background: transparent; cursor: pointer; font-weight: 700; font-size: 15px; }
.nav__toggle:hover { border-color: var(--ink); }

.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--line-2); border-radius: 8px; font-weight: 700; font-size: 15px; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { border-color: var(--ink); }
.lang summary span { font-size: 11px; }
.lang__list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px; box-shadow: 0 16px 32px -16px rgba(21, 23, 26, .35); z-index: 50; }
.lang__list a { display: flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 6px; text-decoration: none; font-weight: 500; color: var(--ink); }
.lang__list a:hover { background: var(--base); color: var(--ink); }
.lang__list a[aria-current] { font-weight: 700; background: var(--base); }

/* Full-screen menu (phone and tablet) */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--base); overflow-y: auto; display: flex; flex-direction: column; }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); border-bottom: 1px solid var(--line); width: 100%; }
.menu__close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--line-2); border-radius: 8px; background: transparent; cursor: pointer; font-weight: 700; font-size: 15px; }
.menu__body { display: flex; flex-direction: column; gap: 32px; padding-top: 24px; padding-bottom: 40px; width: 100%; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line); font-size: 26px; font-weight: 780; font-stretch: 112%; text-decoration: none; }
.menu__links a[aria-current] { color: var(--gold-text); }
.menu__label { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--ink-2); }
.menu__langlist { display: flex; flex-wrap: wrap; gap: 8px; }
.menu__langlist a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1.5px solid var(--line-2); border-radius: 8px; text-decoration: none; font-weight: 600; }
.menu__langlist a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.menu__actions { display: flex; flex-direction: column; gap: 12px; }

/* ===== FOOTER ===== */
.foot { background: var(--dark); color: var(--on-dark-2); font-size: 15px; line-height: 1.8; }
.foot__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 56px; padding-bottom: 40px; }
.foot__brand .logo__svg { height: 18px; }
.gm .foot a.logo, .gm .foot a.logo:hover { color: var(--on-dark); } /* same logo as everywhere, not the grey link colour */
.gm .foot__h { color: var(--on-dark); font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.gm .foot a { color: var(--on-dark-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.gm .foot a:hover { color: var(--gold-on-dark); }
.foot__gap { margin-top: 8px; }
.gm .social { display: flex; gap: 10px; margin-top: 16px; }
.gm .foot .social a { width: 44px; height: 44px; min-height: 0; justify-content: center; border: 1.5px solid var(--dark-line); border-radius: 50%; color: var(--on-dark); transition: background-color .2s, color .2s, border-color .2s; }
.gm .foot .social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.foot__base { border-top: 1px solid var(--dark-line); padding-top: 20px; padding-bottom: 28px; font-size: 14px; color: var(--on-dark-3); }

/* ===== HOME: HERO ===== */
/* Phone: the hero is exactly one screen tall (under the header). The text box sits at the bottom
   and the photo fills whatever room is left above it, so the whole box is visible on opening. */
.hero { position: relative; display: flex; flex-direction: column; min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); }
.hero__media { position: relative; flex: 1 1 auto; min-height: 170px; overflow: hidden; background: #2A2E35; }
.gm .hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1); transition: opacity 1.4s ease, transform 7s ease-out; }
.hero__slide.is-on { opacity: 1; transform: scale(1.06); }
.hero__dots { position: absolute; right: 8px; top: 8px; display: flex; }
.hero__dots button { width: 44px; height: 44px; border: 0; padding: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hero__dots span { display: block; width: 10px; height: 6px; border-radius: 999px; background: rgba(248, 248, 246, .75); box-shadow: 0 0 0 1px rgba(21, 23, 26, .15); transition: width .3s, background-color .3s; }
.hero__dots [aria-current] span { width: 28px; background: var(--gold); }
.hero__card { position: relative; z-index: 2; margin: -40px var(--gutter) 16px; background: var(--panel); border-radius: 4px; padding: 24px 20px; box-shadow: 0 30px 60px -30px rgba(21, 23, 26, .45); display: flex; flex-direction: column; gap: 18px; }
.hero__sub { font-size: 18px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 767px) {
  .hero__card { gap: 16px; }
  .hero__card .btn { min-height: 48px; padding-block: 12px; }
  .hero__card .actions { gap: 10px; }
}
/* Short phone screens (e.g. iPhone SE): extra compact so the whole box still fits */
@media (max-width: 767px) and (max-height: 720px) {
  .hero__card .h-hero { font-size: 28px; }
  .hero__sub { font-size: 16px; }
  .hero__card { gap: 12px; padding: 20px 18px; }
  .hero__media { min-height: 120px; }
}
@media (max-width: 767px) and (max-height: 600px) {
  .hero__card .h-hero { font-size: 25px; }
  .hero__card { margin-top: -28px; }
}
/* The phrase sits on its own line; all phrases share one grid cell, so its height is fixed */
.typed { display: grid; color: var(--ink); font-weight: 700; }
.typed > * { grid-area: 1 / 1; }
.typed__sizer { visibility: hidden; }
.typed__caret { display: inline-block; width: 2px; height: 1.05em; background: var(--gold-accent); vertical-align: -0.15em; margin-left: 2px; }

/* ===== FEATURES ===== */
.feature { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 2px solid var(--gold); }
.feature svg { color: var(--gold-accent); }
.feature h3 { font-size: 21px; line-height: 1.25; font-weight: 700; }
.feature p { color: var(--ink-2); line-height: 1.55; }
.feature--lg h3 { font-size: 24px; font-weight: 800; font-stretch: 112%; }
.feature--lg p { font-size: 17px; }
.feature__n { font-size: 15px; font-weight: 700; color: var(--gold-text); }

/* ===== ADVERTISING vs GM360 ===== */
.vs { width: 100%; border-collapse: collapse; font-size: 17px; }
.vs thead { display: none; }
.vs tbody, .vs tr, .vs td { display: block; }
.vs tr { border: 1px solid var(--dark-line); border-radius: 4px; margin-bottom: 12px; overflow: hidden; }
.vs td { padding: 14px 18px; }
.vs td::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.vs td:first-child { color: var(--on-dark-3); background: var(--dark-2); }
.vs td:first-child::before { color: var(--on-dark-3); }
.vs td:last-child { color: var(--on-dark); font-weight: 600; }
.vs td:last-child::before { color: var(--gold-on-dark); }

/* ===== INDUSTRY SELECTOR & CARDS ===== */
.ind { margin-top: 28px; }
.ticks { display: flex; flex-direction: column; gap: 12px; font-size: 17px; line-height: 1.5; }
.ticks li { display: flex; gap: 12px; }
.ticks--sm { gap: 8px; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.ticks--sm li { gap: 10px; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.gm a.card, .gm a.card:hover { color: var(--ink); text-decoration: none; }
.card { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.card__media { position: relative; display: flex; align-items: center; justify-content: center; height: 220px; border-radius: 4px; overflow: hidden; background: var(--tone, #D4D4D0); color: rgba(21, 23, 26, .35); }
.gm .card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card:hover .card__media img { transform: scale(1.03); }
.card__play { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--on-dark); font-size: 13px; font-weight: 700; transition: background-color .2s, color .2s; }
.card:hover .card__play { background: var(--gold); color: var(--ink); }
.card__name { font-size: 19px; font-weight: 700; line-height: 1.3; }
/* Share button on the project photo, and its small menu on desktop */
.cardbox { position: relative; min-width: 0; }
.card__share { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--panel); color: var(--ink); font: 700 13px/1 var(--font); cursor: pointer; box-shadow: 0 2px 10px -4px rgba(21, 23, 26, .5); transition: background-color .2s, color .2s; }
.card__share:hover, .card__share[aria-expanded="true"] { background: var(--ink); color: var(--on-dark); }
.card__share.is-done { background: var(--gold); color: var(--ink); }
.sharemenu { position: absolute; top: 60px; right: 10px; z-index: 3; min-width: 190px; padding: 6px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 16px 40px -18px rgba(21, 23, 26, .55); display: flex; flex-direction: column; }
.gm .sharemenu a, .sharemenu button { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: 600 15px/1.2 var(--font); text-decoration: none; text-align: left; cursor: pointer; }
.gm .sharemenu a:hover, .sharemenu button:hover, .gm .sharemenu a:focus-visible, .sharemenu button:focus-visible { background: var(--base); color: var(--ink); }
.card__meta { font-size: 15px; color: var(--ink-2); margin-top: -8px; }
.more { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 20px; }

/* ===== THREE STEPS ===== */
.steps3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; position: relative; }
.steps3 li { position: relative; display: flex; flex-direction: column; gap: 12px; padding-left: 76px; }
.steps3 li:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 56px; bottom: -32px; width: 2px; background: var(--gold); }
.steps3__n { position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--base); border: 2px solid var(--gold-accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; color: var(--gold-text); }
.steps3 h3 { font-size: 22px; line-height: 1.25; font-weight: 700; padding-top: 12px; }
.steps3 p { color: var(--ink-2); line-height: 1.55; max-width: 340px; }

/* ===== CLIENT LOGOS (seamless loop) ===== */
.clients { border-top: 1px solid var(--line); padding-block: 64px; display: flex; flex-direction: column; gap: 32px; }
.clients__h { font-size: 16px; font-weight: 400; color: var(--ink-2); text-align: center; }
.logos { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logos__track { display: flex; width: max-content; animation: gm-logos 45s linear infinite; will-change: transform; }
.logos:hover .logos__track { animation-play-state: paused; }
.gm .logos__set { display: flex; align-items: center; gap: 48px; padding-right: 48px; }
.logos__set li { flex: none; }
.logos img { display: block; height: 36px; width: auto; max-width: none; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.logos img:hover { filter: none; opacity: 1; }
.logos img.is-white { filter: invert(1) hue-rotate(180deg) grayscale(1); }
.logos img.is-white:hover { filter: invert(1) hue-rotate(180deg); }
@keyframes gm-logos { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== STATS ===== */
.stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--dark-line); border: 1px solid var(--dark-line); align-self: stretch; }
.stats { grid-auto-rows: 1fr; } /* equal boxes */
.stat { background: var(--dark); padding: 22px 24px; color: var(--on-dark-2); display: flex; flex-direction: column; justify-content: center; gap: 4px; } /* text centred vertically in its box */
.stat b { font-size: clamp(34px, 3.2vw, 44px); line-height: 1.15; font-weight: 800; font-stretch: 116%; color: var(--gold); }

/* ===== FAQ TEASER ===== */
.qlinks { border-bottom: 1px solid var(--line); }
.qlinks a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 19px; font-weight: 600; text-decoration: none; }
.qlinks a span { color: var(--gold-accent); font-size: 24px; font-weight: 400; }

/* ===== CTA BANDS ===== */
.cta { padding-block: 88px; border-bottom: 0; }
.cta__in { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.cta__in .lead { font-size: 19px; max-width: 760px; }
.cta-row { padding-block: 72px; border-bottom: 0; margin-top: 16px; }
.cta-row__in { display: flex; flex-direction: column; gap: 24px; }

/* ===== SOLUTIONS ===== */
.benefits { background: var(--dark); color: var(--on-dark); border-radius: 4px; padding: 28px 22px; margin-top: 20px; display: flex; flex-direction: column; gap: 20px; }
.benefits__h { font-size: clamp(28px, 2.8vw, 36px); line-height: 1.08; font-weight: 800; font-stretch: 116%; }
.benefits .ticks { font-size: 16px; color: var(--on-dark-2); gap: 10px; }
.work { margin-top: 32px; padding-bottom: 72px; row-gap: 40px; }

/* ===== PARTNERS ===== */
.phero { padding-block: 36px 64px; }
.phero__login { font-size: 15px; color: var(--on-dark-2); }
.gm .phero__login a { font-weight: 700; }
.flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: stretch; }
.flow__box { display: flex; flex-direction: column; gap: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 28px 22px; }
.flow__box--dark { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.flow__box--dark .ticks--sm, .flow__box--dark .flow__intro { color: var(--on-dark-2); }
.flow__head { display: flex; align-items: center; gap: 14px; }
.flow__head h3 { font-size: 26px; font-weight: 800; font-stretch: 114%; }
.flow__intro { color: var(--ink-2); }
.gm .flow__h { font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.num { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--gold-text); color: var(--gold-text); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; }
.flow__box--dark .num { border-color: var(--gold); color: var(--gold); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.earn { background: var(--dark); color: var(--on-dark-2); border-radius: 4px; padding: 32px 24px; display: flex; flex-direction: column; gap: 10px; }
.earn__n { font-size: clamp(56px, 7vw, 88px); line-height: 1; font-weight: 800; font-stretch: 120%; color: var(--gold); overflow-wrap: anywhere; }
.rows { border-bottom: 1px solid var(--line); }
.rows li { display: flex; gap: 12px; font-size: 18px; line-height: 1.5; padding: 14px 0; border-top: 1px solid var(--line); }
.cities { border-top: 1px solid var(--line); }
.cities__h { font-size: 15px; font-weight: 700; padding: 16px 0 6px; }
.cities li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cities__more { padding: 12px 0; font-weight: 600; }
.cities__more a { display: inline-flex; min-height: 44px; align-items: center; }

/* ===== FORMS ===== */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 24px 18px; }
.form { display: flex; flex-direction: column; gap: 22px; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld label { font-weight: 700; font-size: 15px; }
.field { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink); font: 16px/1.4 var(--font); }
.field:hover { border-color: var(--ink-2); }
textarea.field { resize: vertical; }
.field[aria-invalid="true"], fieldset[aria-invalid="true"] .chip--radio span { border-color: var(--err); }
.err { color: var(--err); font-size: 14px; font-weight: 600; margin-top: 4px; }
.form-err { background: #FBEAEA; border: 1px solid #E6B8BA; color: var(--err); border-radius: 6px; padding: 12px 16px; font-weight: 600; }
.consent { display: flex; gap: 12px; align-items: flex-start; }
.consent input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--ink); }
.consent label, .consent span { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.consent--inline { align-items: center; min-height: 44px; }
.consent--inline input { margin: 0; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.done { display: flex; flex-direction: column; gap: 12px; }
.done:focus { outline: none; }
.notice { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; background: #FFF8E6; border: 1px solid #E8D59E; border-radius: 6px; padding: 16px 18px; font-size: 16px; line-height: 1.5; }

/* ===== CONTACT ===== */
.contact { padding-bottom: 72px; align-items: start; }
.contact__modes { margin-bottom: 28px; }
.contact__modes .chip { white-space: normal; }
.gm .direct__h { font-size: 26px; font-weight: 800; font-stretch: 114%; margin-bottom: 16px; }
.gm .direct__item { display: flex; flex-direction: column; gap: 4px; padding: 20px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.direct__item:last-child { border-bottom: 1px solid var(--line); }
.direct__item b { font-size: 21px; overflow-wrap: anywhere; }
.gm .direct__item:hover b { color: var(--gold-text); }
.direct__item .muted { font-size: 15px; }

/* ===== FAQ ===== */
.faq { padding-bottom: 72px; }
.faq__tabs { margin-bottom: 32px; }
.faq__panel { align-items: start; }
.faq__top { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.gm .faq__top-h { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.faq__top a { display: inline-flex; min-height: 40px; align-items: center; color: var(--ink-2); text-underline-offset: 3px; }
.faq__groups { display: flex; flex-direction: column; gap: 48px; }
.faq__group .h3 { font-size: 26px; margin-bottom: 12px; }
.acc { border-top: 1px solid var(--line); }
.acc__h { font-size: inherit; }
.acc__h button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 60px; padding: 18px 0; border: 0; background: none; text-align: left; font: 600 18px/1.35 var(--font); color: var(--ink); cursor: pointer; }
.acc__sign { position: relative; flex: none; width: 18px; height: 18px; }
.acc__sign::before, .acc__sign::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: var(--gold-accent); transition: transform .2s; }
.acc__sign::after { transform: rotate(90deg); }
[aria-expanded="true"] .acc__sign::after { transform: rotate(0); }
.acc__a { padding: 0 0 22px; display: flex; flex-direction: column; gap: 8px; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 720px; }
.gm .acc__list { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.gm ul.acc__list { list-style: disc; }
.gm ol.acc__list { list-style: decimal; }
.acc:target .acc__h button { color: var(--gold-text); }

/* ===== ABOUT ===== */
.road { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.road__box { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--dark-line); border-radius: 4px; padding: 28px; color: var(--on-dark-2); }
.road__box h3 { font-size: 26px; font-weight: 800; font-stretch: 114%; color: var(--on-dark); }
.road__when { font-size: 15px; font-weight: 700; }
.road__box--now { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.road__box--now h3 { color: var(--ink); }
.founder { display: flex; gap: 20px; align-items: center; }
.gm .founder__quote { margin: 0; padding-left: 22px; border-left: 3px solid var(--gold); display: flex; flex-direction: column; gap: 12px; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.gm .founder__quote p:last-child { color: var(--ink); font-weight: 600; }
.gm .founder__pic { flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--gold); box-shadow: 0 0 0 3px var(--gold); }
.founder__name { font-size: 24px; font-weight: 800; }
.timeline { border-bottom: 1px solid var(--line); align-self: start; }
.timeline li { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 20px; align-items: baseline; padding: 24px 0; border-top: 1px solid var(--line); }
.timeline__y { font-size: 21px; line-height: 1.3; font-weight: 800; font-stretch: 116%; color: var(--gold-text); }
.gm .timeline__t { font-size: 21px; line-height: 1.3; font-weight: 700; margin-bottom: 6px; }
.offer { display: flex; flex-direction: column; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 28px 24px; }
.offer h3 { font-size: 24px; font-weight: 800; font-stretch: 112%; }
.offer p { color: var(--ink-2); line-height: 1.55; flex-grow: 1; }
.offer--dark { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.offer--dark p { color: var(--on-dark-2); }

/* ===== LOGIN ===== */
.login { position: relative; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); }
/* Close button, top right. Phone/tablet: over the dark panel, next to the language button. */
.gm .login__close { position: absolute; top: 24px; right: var(--gutter); z-index: 5; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--dark-line); color: var(--on-dark); text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.gm .login__close:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); }
.login__top { padding-right: 56px; }
.login__side { background: var(--dark); color: var(--on-dark); padding: 24px var(--gutter) 40px; display: flex; flex-direction: column; gap: 40px; }
.login__side .lead { color: var(--on-dark-2); max-width: 460px; }
.login__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.login__top .lang summary { border-color: var(--dark-line); color: var(--on-dark); }
.login__top .lang summary:hover { border-color: var(--on-dark); }
.login__join { font-size: 15px; color: var(--on-dark-2); }
.gm .login__join a { font-weight: 700; color: var(--gold-on-dark); }
.login__main { display: flex; align-items: flex-start; justify-content: center; padding: 40px var(--gutter) 64px; }
.login__form { width: 100%; max-width: 440px; }
.login__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; font-size: 15px; }
.login__row a { display: inline-flex; min-height: 44px; align-items: center; }

/* ===== LEGAL ===== */
.legal__head { border-bottom: 1px solid var(--line); padding-block: 28px 40px; }
.legal__head .eyebrow { margin-bottom: 14px; }
.legal__head .h1 { font-size: clamp(38px, 5.4vw, 68px); line-height: 1.02; font-stretch: 120%; }
.gm .legal__updated { margin-top: 18px; }
.legal__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 32px; padding-bottom: 96px; }
.legal__nav { display: flex; flex-wrap: wrap; gap: 4px 8px; align-self: start; }
.legal__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-bottom: 3px solid transparent; font-weight: 600; text-decoration: none; }
.legal__nav a[aria-current] { border-bottom-color: var(--gold); background: var(--panel); }
.legal__help { display: none; }
.legal__content { font-size: 17px; line-height: 1.7; color: #3A3F47; min-width: 0; }
.legal__content > *:first-child { margin-top: 0; }
.legal__content h2 { font-size: 26px; line-height: 1.15; font-weight: 800; font-stretch: 112%; color: var(--ink); margin: 48px 0 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.legal__content h3 { font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--ink); margin: 28px 0 10px; }
.legal__content h4, .legal__content h5 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 20px 0 6px; }
.legal__content p { margin: 0 0 16px; }
.legal__content ul { margin: 0 0 20px; }
.legal__content ul li { position: relative; padding-left: 22px; margin: 8px 0; }
.legal__content ul li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.gm .legal__content ol { list-style: decimal; padding-left: 22px; margin: 0 0 20px; }
.legal__content a { color: var(--gold-text); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal__content strong { color: var(--ink); }
.legal__content table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 15px; display: block; overflow-x: auto; }
.legal__content th, .legal__content td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal__content th { color: var(--ink); background: var(--panel); }
.legal__content details { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 18px; margin: 12px 0; }
.legal__content summary { cursor: pointer; font-weight: 700; color: var(--ink); padding: 12px 0; }
.legal__card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 20px 24px; margin: 0 0 20px; }
.legal__content .notice { margin-bottom: 24px; }

/* ===== LANGUAGE BANNER ===== */
.langbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--dark); color: var(--on-dark); box-shadow: 0 -12px 32px -16px rgba(21, 23, 26, .5); }
.langbar__in { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; padding-bottom: 16px; }
.langbar__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.langbar__actions .btn { flex: 1 1 auto; }
.gm .langbar .btn--line { color: var(--on-dark); border-color: var(--on-dark); }
.gm .langbar .btn--line:hover { background: var(--on-dark); color: var(--ink); }

/* ============================================================
   TABLET  (768px and wider)
   ============================================================ */
@media (min-width: 768px) {
  :root { --gutter: 32px; --nav-h: 72px; }
  .sec { padding-block: 96px; }
  .page-head { padding-top: 40px; padding-bottom: 40px; }
  .gm .head { margin-bottom: 48px; }
  .grid4, .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .grid3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .actions .btn, .form button.btn, .benefits__cta .btn, .cta-row .btn, .cta .btn, .offer .btn { width: auto; }
  .chips--scroll { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }

  .foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 64px; }

  /* Photo fills the visible screen under the header (never taller), so the text box and its buttons are visible without scrolling */
  .hero { display: block; min-height: 0; }
  .hero__media { height: clamp(520px, calc(100vh - var(--nav-h)), 640px); height: clamp(520px, calc(100svh - var(--nav-h)), 640px); }
  .hero__card { position: absolute; left: var(--gutter); bottom: 32px; margin: 0; width: min(600px, calc(100% - 2 * var(--gutter))); padding: 36px 36px 32px; gap: 20px; }
  .hero__sub { font-size: 19px; }
  .hero__dots { top: auto; right: 24px; bottom: 32px; }

  .vs thead { display: table-header-group; }
  .vs { display: table; border: 1px solid var(--dark-line); border-radius: 4px; }
  .vs tbody { display: table-row-group; }
  .vs tr { display: table-row; border: 0; }
  .vs th, .vs td { display: table-cell; width: 50%; padding: 18px 24px; text-align: left; }
  .vs th { background: var(--dark-2); padding: 16px 24px; font-weight: 700; color: var(--on-dark-3); }
  .vs th:last-child { color: var(--gold-on-dark); }
  .vs td { border-top: 1px solid var(--dark-line); background: none !important; }
  .vs td::before { display: none; }

  .cards--2, .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .card__media { height: 230px; }
  .more { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }

  .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .steps3::before { content: ""; position: absolute; left: 28px; right: 28px; top: 27px; height: 2px; background: var(--gold); }
  .steps3 li { padding-left: 0; gap: 14px; }
  .steps3 li:not(:last-child)::after { display: none; }
  .steps3__n { position: relative; }
  .steps3 h3 { font-size: 23px; padding-top: 12px; }

  .clients { padding-block: 80px; }
  .logos img { height: 44px; }
  .gm .logos__set { gap: 64px; padding-right: 64px; }

  /* Four equal boxes: same width, same height, text starts at the same line */
  .stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; align-self: center; }
  .stats--2 .stat b { font-size: clamp(30px, 2.8vw, 40px); }
  .stat { padding: 28px; }

  .cta { padding-block: 120px; }
  .cta-row__in { flex-direction: row; justify-content: space-between; align-items: center; gap: 40px; }
  .cta-row { padding-block: 96px; }

  .benefits { padding: 36px; }
  .work { padding-bottom: 96px; }

  .phero { padding-block: 48px 88px; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__box:last-child { grid-column: 1 / -1; }
  .flow__box { padding: 36px; }
  .earn { padding: 40px; }

  .panel { padding: 32px; }
  .row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .road { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .road__box:last-child { grid-column: 1 / -1; }
  .timeline li { grid-template-columns: 110px minmax(0, 1fr); column-gap: 32px; }
  .gm .founder__pic { width: 120px; height: 120px; }
  .offer { padding: 36px; }

  .login__side { padding: 40px var(--gutter) 48px; }
  .gm .login__close { top: 40px; } /* level with the language button */
  .login__main { padding-top: 56px; }

  .legal__head { padding-block: 40px 48px; }
  .legal__body { padding-top: 48px; padding-bottom: 120px; }


  .langbar { left: auto; right: 24px; bottom: 24px; max-width: 520px; border-radius: 8px; }
  .langbar__in { padding: 20px 24px; }
  .langbar__actions .btn { flex: 0 0 auto; }
}

/* ============================================================
   DESKTOP  (1100px and wider)
   ============================================================ */
@media (min-width: 1100px) {
  :root { --gutter: 40px; --nav-h: 76px; }
  .sec { padding-block: 110px; }
  .page-head { padding-top: 48px; }

  /* 12-column splits: --a = span of the first block, --bs/--bn = start/span of the second */
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 0; }
  .split--end { align-items: end; }
  .split--center { align-items: center; }
  .split__a { grid-column: span var(--a, 6); }
  .split__b { grid-column: var(--bs, 7) / span var(--bn, 6); }
  .ind.split { align-items: start; }

  .nav__in { gap: 28px; }
  .nav__links { display: flex; flex-grow: 1; gap: clamp(16px, 1.8vw, 30px); align-items: center; }
  .nav__links a { font-size: 16px; font-weight: 500; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .nav__links a[aria-current] { font-weight: 700; border-bottom-color: var(--gold-accent); }
  .nav__tools { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
  .nav__login { font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .nav__cta { white-space: nowrap; }
  .nav__toggle { display: none; }

  .grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid3 > :last-child:nth-child(odd) { grid-column: auto; }

  .foot__in { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .hero__media { height: clamp(560px, calc(100vh - var(--nav-h)), 760px); height: clamp(560px, calc(100svh - var(--nav-h)), 760px); }
  .hero__card { left: 40px; bottom: 40px; padding: 40px 40px 36px; }
  .hero__dots { right: 40px; bottom: 40px; }

  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .card__media { height: 260px; }
  .ind .card__media { height: 230px; }

  .qlinks a { font-size: 20px; }

  .cta { padding-block: 130px; }
  .cta-row { padding-block: 100px; }

  .benefits { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; padding: 40px 44px; }
  .benefits__h { grid-column: span 5; }
  .benefits .ticks { grid-column: 6 / span 4; }
  .benefits__cta { grid-column: 10 / span 3; display: flex; justify-content: flex-end; }
  .work { padding-bottom: 120px; }

  .phero { padding-block: 56px 100px; }
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow__box:last-child { grid-column: auto; }
  .flow__box { padding: 40px; }
  .earn { padding: 48px; }
  .panel { padding: 40px; }
  .panel--lg { padding: 44px; }

  .faq__top { position: sticky; top: calc(var(--nav-h) + 24px); background: none; border: 0; padding: 0; }
  .faq__groups { gap: 56px; }
  .acc__h button { font-size: 20px; padding: 22px 0; }

  .road { display: flex; }
  .road__box { flex: 1; padding: 32px; }

  .login { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Desktop: the top-right corner is the light form side */
  .gm .login__close { top: 32px; right: 32px; border-color: var(--line-2); color: var(--ink); background: var(--base); }
  .gm .login__close:hover { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
  .login__top { padding-right: 0; }
  .login__side { padding: 64px 72px; justify-content: space-between; min-height: 100vh; }
  .login__main { align-items: center; padding: 64px; }

  .legal__head { padding-block: 48px 48px; }
  .legal__body { grid-template-columns: 260px minmax(0, 760px); gap: 72px; padding-top: 56px; }
  .legal__nav { position: sticky; top: calc(var(--nav-h) + 24px); flex-direction: column; gap: 4px; }
  .legal__nav a { border-bottom: 0; border-left: 3px solid transparent; }
  .legal__nav a:hover { background: var(--panel); }
  .legal__nav a[aria-current] { border-left-color: var(--gold); }
  .legal__help { display: block; margin-top: 24px; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
  .legal__help a { color: var(--gold-text); font-weight: 700; }
  .legal__content h2 { font-size: 28px; margin-top: 56px; }
}

/* Small desktops: longer menu labels (Albanian, Italian) must still fit on one row */
@media (min-width: 1100px) and (max-width: 1279px) {
  .nav__in { gap: 18px; }
  .nav__links { gap: 14px; }
  .nav__links a { font-size: 15px; }
  .nav__tools { gap: 12px; }
  .nav__cta { padding-inline: 16px; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__slide { transition: none; transform: none !important; }
  .typed__caret { display: none; }
  /* Logos: one static, centred list instead of the moving loop */
  .logos { -webkit-mask-image: none; mask-image: none; }
  .logos__track { animation: none; width: auto; justify-content: center; }
  .logos__set[aria-hidden] { display: none !important; }
  .gm .logos__set { flex-wrap: wrap; justify-content: center; padding: 0 var(--gutter); row-gap: 28px; }
  .card__media img { transition: none; }
}

/* ============================================================
   CITY PARTNER WAITLIST CAMPAIGN (popup + "Join for free" bar)
   Switch: GM360V2_WAITLIST_POPUP in v2/bootstrap.php
   ============================================================ */
/* same quiet gold line of text as the "eyebrow" above the page headlines */
.wl-badge { display: block; color: var(--gold-on-dark); font-size: 16px; line-height: 1.3; }

/* Bar at the top of the Partners page */
/* Bright gold, dark text, black button. Phone: label, sentence and a full-width button stacked,
   so every language has the same layout; tablet and desktop: one row. */
.joinbar { position: relative; overflow: hidden; background: linear-gradient(100deg, #C9A24A 0%, #E3C77A 30%, #F4E2A6 50%, #E3C77A 70%, #C9A24A 100%); color: var(--ink); box-shadow: inset 0 -1px 0 rgba(21, 23, 26, .18); }
/* a soft light that crosses the bar now and then */
.joinbar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-120%) skewX(-18deg); pointer-events: none; animation: joinbar-sweep 9s ease-in-out infinite; }
@keyframes joinbar-sweep { 0%, 72% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(420%) skewX(-18deg); } }
.joinbar__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding-block: 12px 14px; }
.gm .joinbar__msg { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; color: var(--ink); }
.joinbar__open { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--ink); color: #F4E2A6; font-size: 14px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; line-height: 1.3; }
.joinbar__text { font-size: 17px; line-height: 1.25; font-weight: 800; color: var(--ink); text-wrap: balance; }
.gm .joinbar__btn { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px; border-radius: 999px; background: #0B0C0E; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; text-align: center; line-height: 1.2; animation: joinbar-glow 2.8s ease-in-out infinite; transition: background-color .2s; }
.gm .joinbar__btn:hover, .gm .joinbar__btn:focus-visible { background: #2A2D33; color: #fff; }
.gm .joinbar__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@keyframes joinbar-glow { 0%, 100% { box-shadow: 0 6px 16px -8px rgba(11, 12, 14, .8), 0 0 0 0 rgba(255, 255, 255, .0); } 50% { box-shadow: 0 6px 16px -8px rgba(11, 12, 14, .8), 0 0 0 6px rgba(255, 255, 255, .5); } }
/* Phone only: everything centred, a lighter button that is not full width */
@media (max-width: 767px) {
  .joinbar__in { align-items: center; gap: 12px; padding-block: 14px 16px; text-align: center; }
  .gm .joinbar__msg { align-items: center; gap: 8px; }
  .joinbar__text { font-size: 17px; }
  .gm .joinbar__btn { align-self: center; min-height: 46px; padding: 10px 30px; font-size: 14px; animation: none; box-shadow: 0 8px 18px -10px rgba(11, 12, 14, .85); }
}
@media (min-width: 768px) {
  .joinbar__in { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; padding-block: 10px; }
  .gm .joinbar__msg { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
  .gm .joinbar__btn { flex: none; white-space: nowrap; }
}

/* The dialog */
.wl { padding: 0; border: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; background: transparent; color: var(--on-dark); overflow: hidden; }
.wl:not([open]) { display: none; }
.wl::backdrop { background: rgba(10, 11, 13, .8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
/* Plain dark band like the rest of the site; one thin gold line on top, a short fade-in, nothing else moves. */
.wl__shell { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--dark); animation: wl-in .25s ease-out both; }
.wl__shell::before { content: ""; flex: none; height: 3px; background: var(--gold); }
@keyframes wl-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.wl__close { position: absolute; top: 14px; right: 12px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(248, 248, 246, .45); background: rgba(21, 23, 26, .72); color: var(--on-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .2s, color .2s; }
.wl__close:hover { background: var(--on-dark); color: var(--ink); }

.wl__grid { position: relative; z-index: 1; flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px 16px 28px; align-content: start; }

/* Campaign message */
.wl__msg { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-right: 52px; }
.gm .wl__title { font-size: clamp(28px, 7.4vw, 42px); line-height: 1.04; font-weight: 800; font-stretch: 118%; letter-spacing: -0.025em; color: var(--on-dark); }
.wl__title span { display: block; }
.wl__title .is-gold { color: var(--gold-on-dark); }
.gm .wl__intro { font-size: 16px; line-height: 1.5; color: var(--on-dark-2); }
.wl__free { font-size: 15px; line-height: 1.5; color: var(--on-dark); font-weight: 600; padding-left: 12px; border-left: 3px solid var(--gold); }
.wl__art { display: none; }
.wl__msg { padding-right: 0; }
.wl__msg .wl-badge { margin-right: 52px; }

/* Form card */
.wl__card { background: var(--panel); color: var(--ink); border-radius: 12px; padding: 20px 16px; }
.wl__form { display: flex; flex-direction: column; gap: 14px; }
.gm .wl__formtitle { font-size: 21px; line-height: 1.15; font-weight: 800; font-stretch: 112%; }
.wl__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wl__fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wl__fld > label, .wl__fld > legend { font-weight: 700; font-size: 14px; margin: 0; }
.wl__fld > legend { margin-bottom: 6px; }
.wl .field { min-height: 46px; padding: 10px 12px; }
.wl .consent label { font-size: 14px; }
.gm .wl .consent a { color: var(--gold-text); font-weight: 700; }
.gm .wl__err { color: var(--err); font-size: 13px; font-weight: 700; margin: 0; }
.gm .wl__err--form { background: #FBEAEA; border: 1px solid #E6B8BA; border-radius: 6px; padding: 10px 12px; font-size: 14px; }
.wl .field[aria-invalid="true"] { border-color: var(--err); }
/* the site's normal gold button, full width */
.gm .wl__submit { width: 100%; min-height: 54px; background: var(--gold); border-color: var(--gold); color: var(--ink); }
.gm .wl__submit:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: var(--ink); }
.gm .wl__small { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.gm .wl__note { padding-top: 10px; border-top: 1px solid var(--line); }
.gm .wl__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--gold-text); text-underline-offset: 3px; }
.gm .wl__link--light { color: var(--gold-on-dark); }
.gm .wl__link--light:hover { color: var(--on-dark); }
.wl__done { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-block: 8px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.wl__done:focus { outline: none; }
.gm .wl__donetitle { font-size: clamp(24px, 6vw, 30px); line-height: 1.1; font-weight: 800; font-stretch: 114%; color: var(--ink); }

/* Benefits */
.wl__benefits { border: 1px solid var(--dark-line); border-radius: 12px; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.gm .wl__bh { font-size: 17px; line-height: 1.25; font-weight: 800; color: var(--gold-on-dark); }
.gm .wl__list { display: flex; flex-direction: column; gap: 9px; font-size: 15px; line-height: 1.4; color: var(--on-dark); }
.wl__list li { display: flex; gap: 10px; }
.wl__tick { flex: none; color: var(--gold); font-weight: 800; }
/* the equipment offer stands out */
.wl__list li.is-hot { margin: 2px -6px; padding: 11px 12px; border-radius: 8px; background: var(--gold); color: var(--ink); font-weight: 600; font-size: 16px; }
.wl__list li.is-hot .wl__tick { color: var(--ink); }
.wl__list strong { font-weight: 800; }
.wl__list li:not(.is-hot) strong { color: var(--gold-on-dark); }
.gm .wl__cheer { font-size: 14px; line-height: 1.5; color: var(--on-dark-2); }

@media (min-width: 560px) {
  .wl__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Desktop / tablet landscape: two columns, message + benefits left, form right */
@media (min-width: 900px) {
  .wl { width: min(1160px, calc(100vw - 48px)); height: fit-content; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; border-radius: 16px; box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .7); }
  .wl[open] { display: flex; flex-direction: column; }
  .wl__shell { height: auto; min-height: 0; flex: 1; border-radius: 16px; }
  .wl__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "msg card" "benefits card"; gap: 20px 36px; padding: 54px 44px 34px; }
  .wl__msg { grid-area: msg; margin-top: -20px; max-width: 560px; }
  .gm .wl__title { font-size: clamp(34px, 3.2vw, 44px); }
  .wl__card { grid-area: card; align-self: start; padding: 26px 26px 24px; }
  .wl__benefits { grid-area: benefits; padding: 18px 20px; }
  .wl__close { top: 8px; right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .wl__shell { animation: none !important; }
  .joinbar::after { display: none; }
  .gm .joinbar__btn { animation: none; }
}
/* Short desktop screens: smaller headline so the form stays in view */
@media (min-width: 900px) and (max-height: 780px) {
  .gm .wl__title { font-size: 34px; }
  .wl__grid { padding-top: 50px; }
}
/* ============================================================
   PARTNER PORTAL ( /partner-portal/ )  design: prototype/Portal.dc.html
   Phone and tablet: dark top bar with a Menu button. Desktop: dark sidebar.
   ============================================================ */
.pp { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; background: var(--base); }
.pp-side { background: var(--dark); color: var(--on-dark); }
.pp-side__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px var(--gutter); min-height: var(--nav-h); }
.pp-menu { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--dark-line); border-radius: 8px; background: none; color: var(--on-dark); font: 600 15px/1 var(--font); cursor: pointer; }
.pp-nav { display: none; flex-direction: column; gap: 4px; padding: 6px var(--gutter) 20px; }
.pp-nav.is-open { display: flex; }
.gm .pp-nav a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 14px; border-radius: 8px; color: var(--on-dark-2); font-weight: 600; font-size: 16px; text-decoration: none; }
.gm .pp-nav a:hover { color: var(--on-dark); background: rgba(255, 255, 255, .05); }
.gm .pp-nav a[aria-current="page"] { background: #2A2E35; color: var(--gold-on-dark); }
.pp-who { margin-top: 14px; padding: 14px; border-top: 1px solid var(--dark-line); display: flex; flex-direction: column; gap: 3px; }
.pp-who span { font-size: 14px; color: var(--on-dark-2); }
.pp-who button { margin-top: 6px; padding: 0; min-height: 44px; border: 0; background: none; color: var(--gold-on-dark); font: 600 15px/1 var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.pp-main { display: flex; flex-direction: column; gap: 20px; padding: 24px var(--gutter) 56px; min-width: 0; }
.pp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; }
.gm .pp-h1 { font-size: clamp(28px, 4.4vw, 40px); line-height: 1.05; font-weight: 800; font-stretch: 118%; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.gm .pp-h2 { font-size: 21px; line-height: 1.15; font-weight: 800; font-stretch: 112%; }
.gm .pp-h3 { font-size: 19px; line-height: 1.25; font-weight: 700; }
.gm .pp-sub { margin-top: 6px; font-size: 17px; color: var(--ink-2); }
.pp-back a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.pp-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pp-card--dark { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.pp-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pp-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pp-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.pp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pp-stats--3 { grid-template-columns: minmax(0, 1fr); }
.pp-stat { gap: 6px; padding: 16px; }
.pp-stat span { font-size: 14px; color: var(--ink-2); }
.pp-stat strong { font-size: clamp(24px, 6vw, 38px); line-height: 1.05; font-weight: 800; font-stretch: 114%; }
.pp-stat strong.pp-stat__sm { font-size: 18px; font-stretch: 100%; font-weight: 700; overflow-wrap: anywhere; }
.pp-stat .chip { align-self: flex-start; margin-top: 4px; }
.gm .pp-text { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.gm .pp-empty { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.gm .pp-hint { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.pp-hint.is-ok { color: #1F6B3F; font-weight: 700; }
.pp-hint.is-bad { color: var(--err); font-weight: 700; }
.gm .pp-note { font-size: 15px; line-height: 1.5; color: var(--on-dark-2); }
.pp-label { font-size: 15px; color: var(--on-dark-2); }
.pp-big { font-size: clamp(36px, 8vw, 46px); line-height: 1; font-weight: 800; font-stretch: 116%; color: var(--gold); }
.pp-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pp-actions .btn { width: 100%; }
.gm .pp-how { display: flex; flex-direction: column; gap: 10px; padding-left: 20px; list-style: decimal; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.gm .pp-todo { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 10px 0; border-top: 1px solid var(--dark-line); color: var(--on-dark); text-decoration: none; }
.gm .pp-todo span { font-size: 14px; color: var(--gold-on-dark); }
.gm .pp-todo:hover strong { text-decoration: underline; }

/* status pills */
.pp-pill { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.3; background: #E2E3DF; color: var(--ink); white-space: nowrap; }
.pp-pill--price_requested, .pp-pill--in_production { background: #F1E3B8; }
.pp-pill--price_confirmed, .pp-pill--accepted { background: #D9E2EC; }
.pp-pill--delivered, .pp-pill--client_paid, .pp-pill--files_received { background: #D6E6DD; }
.pp-pill--payout_sent { background: var(--ink); color: var(--on-dark); }
.pp-pill--cancelled { background: #EFD9D9; }

/* tables: stacked cards on phone, a real table from tablet up */
.pp-table { display: flex; flex-direction: column; }
.gm .pp-table .pp-tr--head { display: none; }
.gm .pp-tr { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: 1px solid #E2E3DF; color: var(--ink); text-decoration: none; font-size: 16px; }
.pp-table .pp-tr:nth-child(2) { border-top: 0; padding-top: 0; }
.gm a.pp-tr:hover .pp-td--name { text-decoration: underline; }
.pp-td--name { font-weight: 700; font-size: 17px; }
.pp-td--name small { display: block; font-weight: 400; font-size: 14px; color: var(--ink-2); }
.pp-tr [data-l]::before { content: attr(data-l) ": "; color: var(--ink-2); font-size: 14px; }
.pp-tr small { color: var(--ink-2); font-size: 13px; }

/* forms */
.pp-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.pp-main .form .btn, .pp-link .btn { width: 100%; }
.pp-main textarea.field { min-height: 110px; resize: vertical; }
.pp-guide { display: flex; flex-direction: column; }
.pp-guide li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--dark-line); font-size: 15px; color: var(--on-dark-2); }
.pp-guide li:first-child { border-top: 0; }
.pp-guide strong { color: var(--gold-on-dark); font-size: 17px; }
.gm .notice--ok { background: #E7F1EA; border-color: #B9D6C4; }
.gm .login__hint { font-size: 14px; color: var(--ink-2); margin: 0; }

/* "Send your capture" */
.pp-steps { display: flex; flex-direction: column; gap: 16px; }
.pp-steps li { display: flex; gap: 14px; align-items: flex-start; }
.pp-steps li > span { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--on-dark); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.pp-steps li > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.gm .pp-steps p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.pp-link { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }
.pp-link .field.is-ok { border-color: #1F6B3F; }

/* details + progress line */
.pp-dl { display: flex; flex-direction: column; }
.pp-dl > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid #E2E3DF; }
.pp-dl > div:first-child { border-top: 0; padding-top: 0; }
.pp-dl dt { font-size: 14px; color: var(--ink-2); }
.pp-dl dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.pp-line { display: flex; flex-direction: column; }
.pp-line li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; color: var(--ink-2); font-size: 15px; }
.pp-line li:last-child { padding-bottom: 0; }
.pp-line li::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--line); }
.pp-line li:last-child::before { display: none; }
.pp-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--panel); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; position: relative; z-index: 1; }
.pp-line .is-done { color: var(--ink); }
.pp-line .is-done .pp-dot { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.pp-line .is-done::before { background: var(--ink); }
.pp-line .is-now { color: var(--ink); }
.pp-line .is-now .pp-dot { border-color: var(--gold-accent); background: var(--gold); }
.pp-line .is-now strong { font-weight: 800; }
.gm .pp-line p { margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.pp-kit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.pp-kit .pp-card > div:last-child { margin-top: auto; }

@media (min-width: 768px) {
  .pp-main { padding: 32px 28px 64px; gap: 24px; }
  .pp-card { padding: 24px; }
  .pp-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .pp-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-stat { padding: 24px; }
  .pp-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-main .form .btn, .pp-link .btn { width: auto; }
  .pp-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .pp-actions .btn { width: auto; }
  .pp-guide li { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px; }
  .pp-dl > div { flex-direction: row; justify-content: space-between; gap: 20px; }
  .pp-dl dd { text-align: right; }
  /* real table */
  .gm .pp-table .pp-tr--head, .gm .pp-tr { display: grid; grid-template-columns: 2.2fr 1.4fr 1.2fr 1fr 1.5fr; gap: 12px; align-items: center; }
  .gm .pp-table--guide .pp-tr--head, .gm .pp-table--guide .pp-tr { grid-template-columns: 2.4fr 1fr 1fr 1.6fr; }
  .gm .pp-table--pay .pp-tr--head, .gm .pp-table--pay .pp-tr { grid-template-columns: 2fr 1.2fr 1fr 2fr; }
  .gm .pp-tr--head { border-top: 0; padding: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
  .gm .pp-tr, .pp-table .pp-tr:nth-child(2) { padding: 14px 0; border-top: 1px solid #E2E3DF; }
  .pp-td--name { font-size: 16px; }
  .pp-tr [data-l]::before { content: none; }
}
@media (min-width: 1100px) {
  .pp { grid-template-columns: 264px minmax(0, 1fr); align-content: stretch; }
  .pp-side { display: flex; flex-direction: column; padding: 18px 18px 24px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
  .pp-side__top { padding: 6px 12px 22px; min-height: 0; }
  .pp-menu { display: none; }
  .pp-nav { display: flex; flex: 1; padding: 0; }
  .pp-who { margin-top: auto; }
  .pp-main { padding: 40px 48px 72px; }
  .pp-cols { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .pp-cols--form { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .pp-kit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* portal: codes, + button, extras, capture standard */
.pp-code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; letter-spacing: .04em; white-space: nowrap; }
.pp-who .pp-code { color: var(--gold-on-dark); }
.pp-add span { font-size: 1.3em; line-height: 0; font-weight: 800; }
.gm .pp-fab { position: fixed; right: 16px; bottom: 18px; z-index: 5; width: 60px; height: 60px; border-radius: 50%; background: var(--gold); color: var(--ink); font-size: 34px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 10px 24px -8px rgba(21, 23, 26, .6); }
.pp-main fieldset.fld { border: 0; padding: 0; margin: 0; min-width: 0; }
.pp-main fieldset.fld legend { font-weight: 700; font-size: 15px; padding: 0; margin-bottom: 6px; }
.pp-checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; }
.pp-incl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.pp-incl > div { display: flex; flex-direction: column; gap: 10px; }
.pp-ticks { display: flex; flex-direction: column; gap: 7px; font-size: 16px; }
.pp-ticks li { position: relative; padding-left: 24px; }
.pp-ticks li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: #1F6B3F; }
.pp-ticks--plus li::before { content: "+"; color: var(--gold-text); }
.gm .pp-sec { margin-top: 12px; }
.pp-checklist { display: flex; flex-direction: column; }
.pp-checklist label { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 9px 0; border-top: 1px solid var(--dark-line); cursor: pointer; font-size: 16px; line-height: 1.4; }
.pp-checklist li:first-child label { border-top: 0; }
.pp-checklist input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--gold); }
.pp-checklist input:checked + span { color: var(--on-dark-2); text-decoration: line-through; }
.pp-cams { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-cams li { padding: 9px 16px; border-radius: 999px; background: var(--ink); color: var(--on-dark); font-weight: 700; font-size: 15px; }
.pp-dd { display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 1.5; }
.pp-dd ul { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; color: var(--ink-2); }
.pp-dd__do, .pp-dd__dont { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.pp-dd__do { background: #D6E6DD; color: #15402A; }
.pp-dd__dont { background: #EFD9D9; color: #7A1D22; }
.pp-main input[type=file].field { padding: 9px 10px; }
@media (min-width: 768px) {
  .gm .pp-fab { display: none; }
  .pp-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-incl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}.pp-start ol { display: flex; flex-direction: column; }
.pp-start li { display: flex; align-items: center; gap: 12px; min-height: 46px; border-top: 1px solid #E2E3DF; font-size: 16px; }
.pp-start li:first-child { border-top: 0; }
.gm .pp-start a { font-weight: 700; color: var(--ink); }
.pp-start .is-done { color: var(--ink-2); }
.pp-start .is-done .pp-dot { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.gm .pp-news { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 9px 0; border-top: 1px solid #E2E3DF; color: var(--ink); text-decoration: none; }
.gm .pp-news span { font-size: 14px; color: var(--ink-2); }
.gm .pp-news:hover strong { text-decoration: underline; }
.pp-more { border: 1px solid var(--line); border-radius: 8px; padding: 0 14px; }
.pp-more summary { min-height: 48px; display: flex; align-items: center; font-weight: 700; font-size: 15px; cursor: pointer; }
.pp-more[open] { padding-bottom: 16px; display: flex; flex-direction: column; gap: 18px; }
.pp-ranges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.pp-ranges .chip { min-height: 40px; padding: 6px 14px; font-size: 14px; background: var(--panel); cursor: pointer; }
/* ===== portal look: white cards on the warm grey, a dark welcome band, gold accents (no glow, no motion) ===== */
.pp-card { background: #fff; border-color: #E4E5E0; box-shadow: 0 1px 2px rgba(21, 23, 26, .04), 0 10px 24px -18px rgba(21, 23, 26, .25); }
.pp-card--dark { background: var(--dark); border-color: var(--dark); box-shadow: none; }
.pp-pill, .pp-line .pp-dot { box-shadow: none; }
.gm .pp-h1 { position: relative; }
.pp-head:not(.pp-hero) .pp-h1::after { content: ""; display: block; width: 44px; height: 4px; margin-top: 12px; border-radius: 2px; background: var(--gold); }
.pp-hero { align-items: center; background: var(--dark); color: var(--on-dark); border-radius: 12px; padding: 22px 20px; border-left: 5px solid var(--gold); }
.pp-hero__txt { flex: 1 1 220px; min-width: 0; }
.gm .pp-hero .pp-h1 { color: var(--on-dark); }
.gm .pp-hero .pp-sub { color: var(--on-dark-2); }
.pp-hero .pp-code { color: var(--gold-on-dark); }
.pp-stat { position: relative; overflow: hidden; }
.pp-stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #E4E5E0; }
.pp-stat--main::before { background: var(--gold); }
.pp-stat--main strong { color: var(--gold-text); }
.gm .pp-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gold); }
.pp-table .pp-tr--head { letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
.gm a.pp-tr:hover { background: #FAFAF8; }
.pp-pill--price_requested, .pp-pill--in_production { background: #F6E9C3; color: #5C4508; }
.pp-pill--price_confirmed, .pp-pill--accepted, .pp-pill--files_sent { background: #DCE8F5; color: #17406B; }
.pp-pill--delivered, .pp-pill--client_paid, .pp-pill--files_received { background: #D9EDE1; color: #15402A; }
.pp-pill--cancelled { background: #F3DCDC; color: #7A1D22; }
.pp-start { border-left: 5px solid var(--gold); }
.pp-more { background: #FAFAF8; }
/* photo */
.pp-av { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
.pp-av--ini { display: flex; align-items: center; justify-content: center; background: #2A2E35; color: var(--gold-on-dark); font-weight: 800; font-size: 16px; letter-spacing: .02em; }
.pp-av--lg { width: 72px; height: 72px; font-size: 24px; box-shadow: 0 0 0 3px var(--gold); }
.pp-who .pp-av { margin-bottom: 8px; }
.pp-photo { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.pp-photo .fld { flex: 1 1 220px; min-width: 0; }
.pp-photo .pp-av--ini { background: var(--ink); }
@media (min-width: 768px) { .pp-hero { padding: 28px 30px; } .pp-av--lg { width: 84px; height: 84px; } }.pp-crop { flex: 1 1 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #FAFAF8; }
.pp-crop[hidden] { display: none; }
.pp-crop canvas { width: 240px; height: 240px; max-width: 100%; border-radius: 50%; box-shadow: 0 0 0 3px var(--gold); background: #fff; cursor: grab; touch-action: none; }
.pp-crop canvas:active { cursor: grabbing; }
.pp-crop__zoom { display: flex; align-items: center; gap: 12px; width: 240px; max-width: 100%; font-weight: 700; font-size: 14px; }
.pp-crop__zoom input { flex: 1; min-height: 44px; accent-color: var(--gold-accent); }
.pp-crop__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-main .form .pp-crop__btns .btn { width: auto; }.pp-loc { display: flex; flex-direction: column; gap: 14px; }
.pp-loc .btn svg { flex: none; }
.pp-main .form .pp-loc .btn { width: auto; }
.pp-map iframe { display: block; width: 100%; height: 280px; border: 1px solid var(--line); border-radius: 10px; }.pp-public { padding-top: 16px; border-top: 1px solid #E2E3DF; font-size: 15px; }

/* ===== portal palette, round 2 (founder: no gold bars or gold accents, fewer greys) =====
   Four surfaces only: ivory page #F7F5F0, white cards, one warm line #E8E4DA, ink #15171A.
   Gold is kept for the main button alone. */
.pp { background: #F7F5F0; }
.pp-card { background: #fff; border-color: #E8E4DA; box-shadow: none; }
.pp-card--dark { background: var(--dark); border-color: var(--dark); }
.gm .pp-nav a[aria-current="page"] { background: #2A2E35; color: #fff; box-shadow: none; }
.pp-who .pp-code, .pp-hero .pp-code { color: var(--on-dark-2); }
.pp-who button { color: var(--on-dark); }
.pp-head:not(.pp-hero) .pp-h1::after { content: none; }
.pp-hero { border-left: 0; }
.pp-stat::before { content: none; }
.pp-stat--main { background: var(--dark); border-color: var(--dark); }
.pp-stat--main span { color: var(--on-dark-2); }
.pp-stat--main strong { color: #fff; }
.pp-stat--main .chip { background: transparent; color: var(--on-dark); border-color: var(--dark-line); }
.pp-start { border-left: 1px solid #E8E4DA; }
.pp-av--ini { color: #fff; }
.pp-av--lg { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.pp-photo .pp-av--lg, .pp-crop canvas { box-shadow: 0 0 0 1px #D9D5CA; }
.gm .pp-todo span { color: var(--on-dark-2); }
.pp-guide strong, .pp-big { color: #fff; }
.pp-line .is-now .pp-dot { border-color: var(--ink); background: #fff; box-shadow: inset 0 0 0 4px var(--ink); }
.pp-ticks--plus li::before { color: var(--ink); }
.pp-more, .pp-crop { background: #F7F5F0; border-color: #E8E4DA; }
.gm a.pp-tr:hover { background: #F7F5F0; }
.gm .pp-tr, .gm .pp-news { border-top-color: #EEEAE1; }
.pp-dl > div, .pp-start li, .pp-public { border-top-color: #EEEAE1; }
.pp-checklist input { accent-color: #fff; }
.pp-crop__zoom input { accent-color: var(--ink); }
.pp-map iframe { border-color: #E8E4DA; }
.pp-main .field { border-color: #D9D5CA; }
.pp-ranges .chip { background: #fff; border-color: #D9D5CA; }
/* ===== login page, institutional layout: form card on the left, brand panel with legal links on the right ===== */
.login { background: #F7F5F0; }
.login__main { order: 1; padding: 76px var(--gutter) 32px; align-items: flex-start; }
.login__side { order: 2; gap: 28px; padding: 36px var(--gutter) 40px; align-items: flex-start; }
.login__card { width: 100%; max-width: 520px; background: #fff; border: 1px solid #E8E4DA; border-radius: 12px; padding: 22px 20px 0; box-shadow: 0 24px 60px -40px rgba(21, 23, 26, .35); }
.login__cardtop { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.login__card .login__form { max-width: none; }
.gm .login__card .h3 { font-size: clamp(28px, 4vw, 38px); font-weight: 780; }
.login input[type=email].field, .login input[type=password].field { min-height: 56px; padding-left: 50px; background-color: #F7F5F0; border-color: #E8E4DA; background-repeat: no-repeat; background-position: 16px center; background-size: 22px 22px; }
.login input[type=email].field { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315171A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.login input[type=password].field { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315171A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.login .field:focus { background-color: #fff; border-color: var(--ink); }
.gm .login__form .btn--block { min-height: 58px; justify-content: space-between; padding-inline: 26px; border-radius: 10px; font-size: 18px; }
.gm .login__form button.btn--block::after { content: "→"; font-size: 22px; line-height: 1; }
.gm .login__help { font-size: 14px; color: var(--ink-2); text-align: center; margin: -6px 0 0; }
.gm .login__card .login__join { margin: 26px -20px 0; padding: 18px 20px; border-top: 1px solid #EEEAE1; text-align: center; font-size: 16px; color: var(--ink-2); }
.gm .login__card .login__join a { color: var(--ink); font-weight: 700; }
.login__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.login__brand .logo__svg { height: 34px; }
.gm .login__tag { font-size: 18px; font-weight: 700; font-stretch: 100%; letter-spacing: .02em; color: var(--on-dark); }
.login__links { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.gm .login__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark); font-size: 16px; text-decoration: none; }
.gm .login__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.gm .login__close { top: 16px; border-color: var(--line-2); color: var(--ink); background: #fff; }
.gm .login__close:hover { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
@media (min-width: 768px) {
  .login__card { padding: 34px 44px 0; }
  .gm .login__card .login__join { margin-inline: -44px; padding-inline: 44px; }
  .login__main { padding: 88px var(--gutter) 48px; justify-content: center; }
  .gm .login__close { top: 24px; }
}
@media (min-width: 1100px) {
  .login { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .login__main { padding: 64px; align-items: center; }
  .login__side { min-height: 100vh; padding: 64px 72px; align-items: center; justify-content: center; gap: 72px; text-align: center; }
  .login__brand { align-items: center; gap: 18px; }
  .login__brand .logo__svg { height: 64px; }
  .gm .login__tag { font-size: 22px; }
  .login__links { justify-content: center; gap: 8px 44px; }
  .gm .login__links a { font-size: 18px; }
  .gm .login__close { top: 28px; right: 28px; border-color: var(--dark-line); color: var(--on-dark); background: transparent; }
  .gm .login__close:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); }
}
/* login field icons (outlined envelope, padlock with three dots) and the show/hide password eye */
.login input[type=email].field, .login input[autocomplete$="password"].field { min-height: 56px; padding-left: 58px; background-color: #F7F5F0; border-color: #E8E4DA; background-repeat: no-repeat; background-position: 18px center; background-size: 28px 28px; }
.login input[type=email].field { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%2315171A' stroke-width='1.9' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='2.5' y='5.5' width='23' height='17' rx='1.5'/%3E%3Cpath d='M3 6.5l11 9 11-9'/%3E%3C/svg%3E"); }
.login input[autocomplete$="password"].field { padding-right: 58px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%2315171A' stroke-width='1.9' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='4.5' y='12' width='19' height='13' rx='1.5'/%3E%3Cpath d='M9 12V8.5a5 5 0 0 1 10 0V12'/%3E%3Cpath d='M9.5 18.5h.01M14 18.5h.01M18.5 18.5h.01' stroke-width='2.6'/%3E%3C/svg%3E"); }
.login input[autocomplete$="password"].field:focus, .login input[type=email].field:focus { background-color: #fff; border-color: var(--ink); }
.pw { position: relative; display: block; }
.pw__eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pw__eye:hover { color: var(--ink); }
.pw__eye .pw__off { display: none; }
.pw__eye[aria-pressed="true"] .pw__on { display: none; }
.pw__eye[aria-pressed="true"] .pw__off { display: block; }
/* login icons as elements + keep our colours when the browser autofills the fields */
.login input[type=email].field, .login input[autocomplete$="password"].field { background-image: none; }
.pw__ic { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: flex; color: var(--ink); pointer-events: none; }
.login input.field:-webkit-autofill, .login input.field:-webkit-autofill:hover, .login input.field:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #F7F5F0 inset; box-shadow: 0 0 0 1000px #F7F5F0 inset; -webkit-text-fill-color: #15171A; caret-color: #15171A; }
/* project page: progress stays in view. Desktop: the Progress box follows the scroll. Phone/tablet: a slim bar sticks to the top. */
.pp-stepbar { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-inline: calc(var(--gutter) * -1); padding: 10px var(--gutter) 12px; background: var(--dark); color: var(--on-dark); font-size: 15px; }
.pp-stepbar span { color: var(--on-dark-2); font-size: 13px; }
.pp-stepbar i { flex: 1 1 100%; height: 4px; border-radius: 2px; background: #33373E; overflow: hidden; }
.pp-stepbar b { display: block; height: 100%; background: #fff; }
@media (min-width: 768px) { .pp-stepbar { margin-inline: -28px; padding-inline: 28px; } }
@media (min-width: 1100px) {
  .pp-stepbar { display: none; }
  .pp-sticky { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
}
/* badges: grey until earned, in colour when active (amber momentum, green quality, blue skill, ink milestone) */
.pp-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-badge { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 6px 14px 6px 8px; border-radius: 999px; border: 1px solid #E1DED6; background: #F7F5F0; color: #8B8E94; font-size: 14px; line-height: 1.25; }
.pp-badge__dot { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px dashed #C4C2BA; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; }
.pp-badge__txt { display: flex; flex-direction: column; }
.pp-badge strong { font-weight: 700; }
.pp-badge small { font-size: 12px; }
.pp-badge.is-on { color: var(--ink); background: #fff; }
.pp-badge.is-on .pp-badge__dot { border-style: solid; }
.pp-badge--momentum.is-on { border-color: #E3B341; background: #FFF6DB; } .pp-badge--momentum.is-on .pp-badge__dot { background: #C98A00; border-color: #C98A00; }
.pp-badge--quality.is-on { border-color: #86C5A0; background: #E6F4EC; } .pp-badge--quality.is-on .pp-badge__dot { background: #1F7A45; border-color: #1F7A45; }
.pp-badge--skill.is-on { border-color: #8DB4E2; background: #E6F0FB; } .pp-badge--skill.is-on .pp-badge__dot { background: #1F5FA8; border-color: #1F5FA8; }
.pp-badge--milestone.is-on { border-color: var(--ink); background: #fff; } .pp-badge--milestone.is-on .pp-badge__dot { background: var(--ink); border-color: var(--ink); }
.pp-badges--full { flex-direction: column; }
.pp-badges--full .pp-badge { border-radius: 10px; align-items: flex-start; padding: 10px 12px; }
.pp-badges--full .pp-badge small { font-size: 13px; margin-top: 2px; }
.pp-badge.is-on small { color: var(--ink-2); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* bonus box under Progress */
.pp-bonus__lines { display: flex; flex-direction: column; }
.pp-bonus__lines li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px solid #EEEAE1; font-size: 15px; }
.pp-bonus__lines li:first-child { border-top: 0; padding-top: 0; }
.pp-bonus__total { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding-top: 10px; border-top: 2px solid var(--ink); font-size: 15px; }
.pp-bonus__total strong { font-size: 24px; font-weight: 800; color: #1F7A45; }
.gm .pp-bonus__miss { font-size: 14px; line-height: 1.45; color: var(--ink-2); padding: 10px 12px; border: 1px dashed #D9D5CA; border-radius: 8px; }
.pp-bonus__miss strong { color: var(--ink); }
@media (min-width: 1100px) { .pp-sticky.pp-stack { max-height: none; overflow: visible; } }.pp-badge { color: #63666D; background: #F1EFE9; border-color: #DDD9CF; }
.pp-badge__dot { border-color: #A9A79F; }

/* ===== drawn badges: full colour when earned, greys until then ===== */
.pp-bdgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
.pp-bdg { --b1: #9A9C9F; --b2: #C3C4C6; --b3: #E4E4E5; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 13px; line-height: 1.25; color: #6B6E75; }
.pp-bdg__art { width: 64px; height: 64px; }
.pp-bdg strong { font-size: 13.5px; font-weight: 700; margin-top: 4px; }
.pp-bdg small { font-size: 12px; }
.pp-bdg.is-on { color: var(--ink); }
.pp-bdg.is-on small { color: var(--ink-2); }
.pp-bdg--momentum.is-on { --b1: #B96A00; --b2: #F59E0B; --b3: #FFD98A; }
.pp-bdg--quality.is-on { --b1: #166534; --b2: #22A45D; --b3: #A7E8C2; }
.pp-bdg--skill.is-on { --b1: #1E4E8C; --b2: #3B82D6; --b3: #B5D4F7; }
.pp-bdg--milestone.is-on { --b1: #15171A; --b2: #3A3F47; --b3: #9AA0AA; }
.pp-bdg__bar { display: block; width: 56px; height: 5px; margin-top: 3px; border-radius: 3px; background: #E4E2DB; overflow: hidden; }
.pp-bdg__bar b { display: block; height: 100%; border-radius: 3px; background: #6B6E75; }
.pp-bdgrules { display: flex; flex-direction: column; }
.pp-bdgrules .pp-bdg { flex-direction: row; align-items: flex-start; gap: 16px; text-align: left; padding: 14px 0; border-top: 1px solid #EEEAE1; font-size: 15px; line-height: 1.5; }
.pp-bdgrules .pp-bdg:first-child { border-top: 0; padding-top: 0; }
.pp-bdgrules .pp-bdg__art { flex: none; }
.pp-bdgrules .pp-bdg strong { font-size: 17px; color: var(--ink); margin: 0; }
.gm .pp-bdgrules .pp-bdg p { font-size: 15px; color: var(--ink-2); }
.gm .pp-bdgrules .pp-bdg__pay { color: #166534; font-weight: 700; }
.gm .pp-bdgrules .pp-bdg__state { font-size: 14px; }
.pp-who__addr { font-size: 13px; line-height: 1.35; }
.pp-kit--2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .pp-bdgs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) { .pp-bdgs { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } .pp-bdg__art { width: 72px; height: 72px; } .pp-kit--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }/* bonus box: badge + what it adds */
.pp-bonus__rows { display: flex; flex-direction: column; }
.pp-bonus__rows .pp-bdg { flex-direction: row; align-items: center; gap: 12px; text-align: left; padding: 9px 0; border-top: 1px solid #EEEAE1; font-size: 14px; }
.pp-bonus__rows .pp-bdg:first-child { border-top: 0; padding-top: 0; }
.pp-bonus__rows .pp-bdg__art { flex: none; width: 44px; height: 44px; }
.pp-bonus__name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 700; }
.pp-bonus__name small { font-weight: 400; font-size: 12.5px; }
.pp-bonus__rows .pp-bdg > strong { margin: 0; font-size: 18px; font-weight: 800; white-space: nowrap; }
.pp-bonus__rows .pp-bdg.is-on > strong { color: #1F7A45; }
/* ===== tiers, Progress & Rewards, gold for rewards (trial) ===== */
.pp-tier { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.4; background: #E8E4DA; color: var(--ink); white-space: nowrap; vertical-align: middle; }
.pp-tier--onboarding { background: #EDF3FC; color: #245DA8; }
.pp-tier--partner { background: #EAF5EF; color: #18794E; }
.pp-tier--certified { background: #15171A; color: #fff; }
.pp-tier--premier { background: #FFF5DC; color: #946B16; box-shadow: inset 0 0 0 1px #E6CD8A; }
.pp-who .pp-tier { align-self: flex-start; margin: 2px 0 4px; }
.pp-tiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.pp-tiers li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; color: var(--ink-2); }
.pp-tiers li::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: #E8E4DA; }
.pp-tiers li:last-child::before { display: none; }
.pp-tiers strong { color: var(--ink); font-size: 16px; }
.gm .pp-tiers p { font-size: 14px; line-height: 1.45; margin-top: 2px; color: var(--ink-2); }
.pp-tiers .is-done .pp-dot { background: #18794E; border-color: #18794E; color: #fff; }
.pp-tiers .is-done::before { background: #18794E; }
.pp-tiers .is-now .pp-dot { border-color: #245DA8; background: #fff; box-shadow: inset 0 0 0 4px #245DA8; }
.pp-nextier { padding: 16px; border-radius: 10px; background: #F7F5F0; display: flex; flex-direction: column; gap: 10px; }
.pp-needs { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.pp-needs li { display: flex; align-items: center; gap: 10px; }
.pp-needs small { color: var(--ink-2); font-weight: 700; }
.pp-needs .is-done { color: var(--ink-2); }
.pp-needs .is-done .pp-dot { background: #18794E; border-color: #18794E; color: #fff; }
@media (min-width: 900px) { .pp-tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .pp-tiers li { flex-direction: column; padding-bottom: 0; } .pp-tiers li::before { left: 26px; right: -16px; top: 10px; bottom: auto; width: auto; height: 2px; } }
/* badge rules: tap a row to open it */
.pp-bdgrules { display: flex; flex-direction: column; }
.pp-rule { border-top: 1px solid #EEEAE1; }
.pp-rule:first-child { border-top: 0; }
.pp-rule summary { display: flex; align-items: center; gap: 14px; padding: 14px 0; cursor: pointer; list-style: none; min-height: 44px; }
.pp-rule summary::-webkit-details-marker { display: none; }
.pp-pair { position: relative; flex: none; width: 96px; height: 64px; }
.pp-pair .pp-bdg { position: absolute; top: 0; left: 0; }
.pp-pair .pp-bdg.is-on { left: 32px; filter: drop-shadow(-3px 0 0 #fff); }
.pp-pair .pp-bdg__art { width: 64px; height: 64px; }
.pp-rule__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pp-rule__txt strong { font-size: 17px; }
.pp-rule__state { font-size: 13.5px; font-weight: 700; }
.pp-rule__state--on { color: #18794E; }
.pp-rule__state--off { color: var(--ink-2); }
.pp-reward { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #FFF5DC; color: #946B16; font-size: 13.5px; font-weight: 700; }
.pp-rule__more { flex: none; width: 10px; height: 10px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); margin-right: 6px; }
.pp-rule[open] .pp-rule__more { transform: rotate(-135deg); }
.pp-rule__body { padding: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.gm .pp-rule__body p { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.pp-rule__body strong { color: var(--ink); }
@media (min-width: 768px) { .pp-rule__body { padding-left: 110px; } }
/* rewards in deep gold on pale gold (trial; say the word and they go back to green) */
.pp-bonus__rows .pp-bdg.is-on > strong, .pp-bonus__total strong { color: #946B16; }
.pp-bonus__total { border-top-color: #E6CD8A; }
.pp-bdg small { font-size: 13px; }.pp-bdgrules .pp-pair .pp-bdg { padding: 0; border: 0; gap: 0; display: block; }
.pp-perks { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.pp-perks li { position: relative; padding-left: 14px; }
.pp-perks li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: #B9B4A6; }
.pp-tiers .is-now .pp-perks, .pp-tiers .is-done .pp-perks { color: var(--ink); }
.pp-bonus__tier { flex: none; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 20px; }/* rewards */
.pp-tabs { margin-top: -6px; }
.gm .pp-tabs .chip { text-decoration: none; background: #fff; }
.gm .pp-tabs .chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pp-rw__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pp-rw .pp-more .form { gap: 18px; }
.pp-rw .pp-more[open] summary { margin-bottom: 4px; }
.pp-pill--rw-submitted { background: #DCE8F5; color: #17406B; }
.pp-pill--rw-changes { background: #F6E9C3; color: #5C4508; }
.pp-pill--rw-approved, .pp-pill--rw-paid { background: #D9EDE1; color: #15402A; }
.pp-pill--rw-rejected { background: #F3DCDC; color: #7A1D22; }
/* milestone badges: violet when earned (never black) */
.pp-bdg--milestone.is-on { --b1: #5B21B6; --b2: #7C3AED; --b3: #D8C7FB; }
/* "If you … you get …" */
.pp-ifcard { border-top: 4px solid #18794E; }
.pp-ifs { display: flex; flex-direction: column; }
.pp-ifs li { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid #EEEAE1; }
.pp-ifs li:first-child { border-top: 0; padding-top: 0; }
.pp-ifs__if { font-size: 16px; line-height: 1.4; }
.pp-ifs__if em { font-style: normal; font-weight: 800; color: var(--ink-2); text-transform: uppercase; font-size: 12px; letter-spacing: .08em; margin-right: 4px; }
.pp-ifs__get { display: inline-flex; align-items: baseline; gap: 8px; align-self: flex-start; padding: 6px 14px; border-radius: 10px; background: #EAF5EF; color: #18794E; }
.pp-ifs__get strong { font-size: 20px; font-weight: 800; white-space: nowrap; }
.pp-ifs__get small { font-size: 13.5px; font-weight: 600; color: #15402A; }
@media (min-width: 768px) { .pp-ifs li { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; } .pp-ifs__get { flex: none; align-self: center; min-width: 300px; } }
/* Earn rewards: the amount first, in colour */
.pp-earnbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pp-earnbar > div { border-radius: 12px; padding: 16px 18px; background: #18794E; color: #fff; display: flex; flex-direction: column; gap: 2px; }
.pp-earnbar > div + div { background: #EAF5EF; color: #15402A; }
.pp-earnbar span { font-size: 14px; opacity: .9; }
.pp-earnbar strong { font-size: clamp(26px, 6vw, 36px); line-height: 1.05; font-weight: 800; }
.pp-earn { --c: #18794E; --bg: #EAF5EF; border-top: 5px solid var(--c); gap: 12px; }
.pp-earn--blue { --c: #245DA8; --bg: #EDF3FC; }
.pp-earn--gold { --c: #946B16; --bg: #FFF5DC; }
.gm .pp-earn__amt { display: flex; align-items: baseline; gap: 10px; font-size: 44px; line-height: 1; font-weight: 800; font-stretch: 112%; color: var(--c); }
.pp-earn__amt small { font-size: 14px; font-weight: 700; font-stretch: 100%; padding: 4px 10px; border-radius: 999px; background: var(--bg); color: var(--c); }
.gm .pp-earn__if { font-size: 16px; line-height: 1.5; color: var(--ink); }
.gm .pp-earn__steps { counter-reset: s; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--ink-2); }
.pp-earn__steps li { counter-increment: s; display: flex; gap: 10px; align-items: flex-start; }
.pp-earn__steps li::before { content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); color: var(--c); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.gm .pp-earn__lock { margin-top: auto; padding: 10px 12px; border-radius: 8px; background: #F7F5F0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.pp-earn .pp-more { border-color: var(--c); background: var(--bg); }
.pp-earn .pp-more summary { color: var(--c); }
.pp-earn .pp-more[open] { background: #fff; }
/* tier crests: grey until reached, a colour per tier after */
.pp-tierb { --b1: #9A9C9F; --b2: #C3C4C6; --b3: #E4E4E5; display: inline-flex; align-items: center; gap: 8px; }
.pp-tierb__art { width: 56px; height: 56px; flex: none; }
.pp-tierb--onboarding.is-on { --b1: #0B6E8E; --b2: #17A2C8; --b3: #B5E9F7; }
.pp-tierb--partner.is-on { --b1: #166534; --b2: #22A45D; --b3: #A7E8C2; }
.pp-tierb--certified.is-on { --b1: #1E3A8A; --b2: #3559D1; --b3: #B8C7F8; }
.pp-tierb--premier.is-on { --b1: #8A5A00; --b2: #D99A0B; --b3: #FFE39A; }
.pp-who__tier { margin: 4px 0 2px; }
.pp-who__tier .pp-tierb__art { width: 34px; height: 34px; }
.pp-who__tier b { color: #fff; font-size: 15px; font-weight: 700; }
.pp-who .pp-who__tier { color: #fff; font-size: 15px; }
.pp-hero__tier { vertical-align: middle; gap: 6px; }
.pp-hero__tier .pp-tierb__art { width: 26px; height: 26px; }
.pp-hero__tier b { color: #fff; font-weight: 700; }
.pp-tiers li { gap: 14px; }
.pp-tiers li::before { left: 27px; top: 60px; }
.pp-tiers .is-done::before { background: #18794E; }
@media (min-width: 900px) { .pp-tiers li::before { left: 66px; right: -16px; top: 28px; height: 2px; width: auto; bottom: auto; } }
/* rewards as one list */
.pp-ifs--act { border-top: 0; }
.pp-ifrow { border-top: 1px solid #EEEAE1; }
.pp-ifrow:first-child { border-top: 0; }
.pp-ifrow summary { display: flex; flex-direction: column; gap: 8px; padding: 14px 28px 14px 0; cursor: pointer; list-style: none; position: relative; }
.pp-ifrow summary::-webkit-details-marker { display: none; }
.pp-ifrow summary::after { content: ""; position: absolute; right: 6px; top: 22px; width: 9px; height: 9px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); }
.pp-ifrow[open] summary::after { transform: rotate(-135deg); top: 26px; }
.pp-ifrow__body { padding: 4px 0 20px; display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.pp-ifrow__body .form { gap: 18px; }
.pp-ifrow:first-child summary { padding-top: 0; } .pp-ifrow:first-child summary::after { top: 8px; }
@media (min-width: 768px) { .pp-ifrow summary { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; } .pp-ifrow summary .pp-ifs__get { flex: none; min-width: 300px; } .pp-ifrow summary::after { top: 50%; margin-top: -7px; } .pp-ifrow[open] summary::after { margin-top: -2px; top: 50%; } }
/* tier ladder: the step rules must not reach the lists inside each step */
.pp-tiers > li > .pp-tierb { align-self: flex-start; }
.pp-tiers .pp-perks li { display: block; position: relative; padding: 0 0 0 14px; }
.pp-tiers .pp-perks li::before { content: ""; display: block; position: absolute; left: 0; right: auto; top: .6em; bottom: auto; width: 5px; height: 5px; border-radius: 50%; background: #B9B4A6; }
.pp-tiers > li:last-child::before { display: none; }
/* dashboard: the four tier badges in a row */
.pp-tierstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pp-tierstrip li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12.5px; line-height: 1.25; color: #6B6E75; }
.pp-tierstrip li::before { content: ""; position: absolute; top: 22px; left: calc(50% + 28px); right: calc(-50% + 28px); height: 2px; background: #E8E4DA; }
.pp-tierstrip li:last-child::before { display: none; }
.pp-tierstrip .is-done::before { background: #18794E; }
.pp-tierstrip .pp-tierb__art { width: 46px; height: 46px; }
.pp-tierstrip strong { font-weight: 700; }
.pp-tierstrip .is-done, .pp-tierstrip .is-now { color: var(--ink); }
@media (min-width: 768px) { .pp-tierstrip { max-width: 640px; } .pp-tierstrip li { font-size: 14px; } .pp-tierstrip .pp-tierb__art { width: 56px; height: 56px; } .pp-tierstrip li::before { top: 27px; left: calc(50% + 34px); right: calc(-50% + 34px); } }
/* dashboard tier badges: the same size as the other badges */
.pp-tierstrip { margin-bottom: 6px; padding-bottom: 18px; border-bottom: 1px solid #EEEAE1; }
.pp-tierstrip .pp-tierb__art { width: 64px; height: 64px; }
.pp-tierstrip li::before { top: 31px; left: calc(50% + 36px); right: calc(-50% + 36px); }
@media (min-width: 768px) { .pp-tierstrip .pp-tierb__art { width: 72px; height: 72px; } .pp-tierstrip li::before { top: 35px; left: calc(50% + 42px); right: calc(-50% + 42px); } }@media (max-width: 767px) { .pp-tierstrip li::before { display: none; } .pp-tierstrip li { font-size: 12px; overflow-wrap: anywhere; } }


/* Dashboard "Your progress": checklist on top, tiers, then badges in even rows of five */
.pp-progress .pp-nextier { margin-bottom: 4px; padding-bottom: 20px; border-bottom: 1px solid #EEEAE1; }
.pp-progress .pp-tierstrip { max-width: none; margin: 0 0 24px; padding: 0; border: 0; }
.pp-progress .pp-bdgs { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 26px 10px; padding-top: 24px; border-top: 1px solid #EEEAE1; }
.pp-progress .pp-bdgs > li:last-child:nth-child(3n + 1) { grid-column: 2; }
@media (min-width: 560px) {
  .pp-progress .pp-bdgs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pp-progress .pp-bdgs > li:last-child:nth-child(3n + 1) { grid-column: auto; }
  .pp-progress .pp-tierstrip { width: 80%; margin-left: auto; margin-right: auto; }
}

/* ===== PORTAL COLOUR (2026-10-07): royal blue = where you act or progress; navy feature panels.
   Sidebar stays charcoal, page ivory, cards white. Gold stays only on reward amounts and the Lead tier.
   To go back to the gold buttons, delete this block. ===== */
.pp { --pp-blue: #3454D1; --pp-blue-2: #2943AA; --pp-navy: #172554; --pp-pale: #EEF2FF; }
.gm .pp :focus-visible { outline-color: var(--pp-blue); }
.gm .pp .btn--gold { background: var(--pp-blue); color: #fff; }
.gm .pp .btn--gold:hover { background: var(--pp-blue-2); color: #fff; }
.gm .pp-main .btn--line { color: var(--pp-blue); border-color: var(--pp-blue); }
.gm .pp-main .btn--line:hover { background: var(--pp-blue); border-color: var(--pp-blue); color: #fff; }
.gm .pp-nav a[aria-current="page"] { background: var(--pp-blue); color: #fff; }
.pp-hero, .pp-stat--main { background: var(--pp-navy); border-color: var(--pp-navy); }
.gm .pp-hero .btn--gold { background: #fff; color: var(--pp-navy); }
.gm .pp-hero .btn--gold:hover { background: var(--pp-pale); color: var(--pp-navy); }
.gm .pp-main a:not(.btn):not(.chip) { color: var(--pp-blue); }
.gm .pp-main a:not(.btn):not(.chip):hover { color: var(--pp-blue-2); }
.gm .pp-hero a:not(.btn):not(.chip), .gm .pp-stat--main a:not(.btn):not(.chip) { color: #fff; }
.pp-main .chip:hover, .pp-main .chip--radio:hover span { border-color: var(--pp-blue); }
.gm .pp-tabs .chip.is-active, .pp-main .chip--radio input:checked + span { background: var(--pp-blue); border-color: var(--pp-blue); color: #fff; }
.pp-main .chip--radio input:focus-visible + span { outline-color: var(--pp-blue); }
.pp-main .field:focus { border-color: var(--pp-blue); }
.pp-bdg__bar b { background: var(--pp-blue); }
.pp-line .is-now .pp-dot, .pp-tiers .is-now .pp-dot { border-color: var(--pp-blue); box-shadow: inset 0 0 0 4px var(--pp-blue); }
.pp-start .is-done .pp-dot { background: #18794E; border-color: #18794E; color: #fff; }
.pp-progress .pp-nextier { background: var(--pp-pale); border: 0; border-radius: 10px; padding: 16px 18px; margin-bottom: 20px; }
/* Profile: only the badges the partner holds (tier badge first) */
.pp-bdgs--mine { display: flex; flex-wrap: wrap; gap: 18px 22px; }
.pp-bdgs--mine .pp-bdg { width: 96px; }
.pp-bdgs--mine .pp-tierb__art { width: 64px; height: 64px; }
@media (min-width: 768px) { .pp-bdgs--mine .pp-tierb__art { width: 72px; height: 72px; } }

/* Rewards are collected with the next finished project */
.gm .pp-collectrule { margin-top: -6px; }
.gm a.pp-collect { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; text-decoration: none; color: var(--ink); background: #FFF5DC; border-color: #F0E1B4; }
.pp-collect strong { font-size: 24px; font-weight: 800; color: #946B16; }
.pp-collect span { font-size: 15.5px; }
.pp-bonus__rw { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #FFF5DC; color: #946B16; font-weight: 800; font-size: 20px; }
.pp-ifcard > div + .pp-ifs + div { margin-top: 10px; padding-top: 22px; border-top: 1px solid #EEEAE1; }
.gm .pp-main a.pp-collect:not(.btn):not(.chip) { color: var(--ink); }

/* BONUS BOX: gold, on the project page and always in sight in the menu */
.gm .pp-bonus { background: #FFF5DC; border-color: #EBD594; }
.pp-bonus .pp-bonus__rows .pp-bdg { border-top-color: #EBD594; }
.pp-bonus .pp-bonus__rw { background: #fff; }
.pp-bonus .pp-bonus__total { border-top-color: #C9A24A; }
.pp-bonus .pp-bonus__total strong { font-size: 28px; }
.gm .pp .pp-bbside, .gm .pp .pp-bbpill { text-decoration: none; background: #C9A24A; color: #15171A; }
.gm .pp .pp-bbside:hover, .gm .pp .pp-bbpill:hover { background: #D9B560; color: #15171A; }
.pp-bbside { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding: 12px 14px; border-radius: 10px; }
.pp-who .pp-bbside span { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #15171A; }
.pp-bbside strong { font-size: 26px; line-height: 1.1; font-weight: 800; }
.pp-bbside small { font-size: 13px; line-height: 1.35; color: #3A2F0B; }
.pp-bbpill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: auto; padding: 6px 14px; border-radius: 8px; font-size: 13px; line-height: 1.1; white-space: nowrap; }
.pp-bbpill span { font-weight: 700; }
.pp-bbpill strong { font-size: 17px; font-weight: 800; }
@media (max-width: 359px) { .pp-bbpill span { display: none; } }
@media (min-width: 1100px) { .pp-bbpill { display: none; } }
.pp-bbside { align-items: flex-start; text-align: left; }
.pp-bbside span, .pp-bbside strong, .pp-bbside small { display: block; width: 100%; text-align: left; }
.pp-bonus .pp-bonus__total strong { white-space: nowrap; }
/* milestone medals: the ribbons hang below the frame, so every badge keeps the same circle size */
.pp-bdg__art { overflow: visible; }
.pp-bdgs .pp-bdg__art { margin-bottom: 8px; }
/* blue links: not on dark panels, and table rows keep dark text (only the project name is blue) */
.gm .pp-main a.pp-todo:not(.btn):not(.chip), .gm .pp-main a.pp-todo:not(.btn):not(.chip):hover { color: #fff; }
.gm .pp-main a.pp-tr:not(.btn):not(.chip), .gm .pp-main a.pp-tr:not(.btn):not(.chip):hover { color: var(--ink); }
.gm .pp-main a.pp-tr .pp-td--name { color: var(--pp-blue); }
/* Bonus box in the welcome band (desktop); on phone and tablet it is the gold button in the top bar */
.pp-bbhero { display: none; }
@media (min-width: 1100px) {
  .gm .pp .pp-hero a.pp-bbhero { display: flex; flex-direction: column; gap: 1px; min-width: 190px; max-width: 230px; padding: 12px 16px; border-radius: 10px; background: #C9A24A; color: #15171A; text-decoration: none; text-align: left; }
  .gm .pp .pp-hero a.pp-bbhero:hover { background: #D9B560; color: #15171A; }
  .pp-bbhero span { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .pp-bbhero strong { font-size: 26px; line-height: 1.1; font-weight: 800; }
  .pp-bbhero small { font-size: 13px; line-height: 1.3; color: #3A2F0B; }
  .gm a.pp-collect { display: none; }
}

/* ===== PORTAL POLISH (2026-10-08): ordered identity blocks, no black fills inside the pages ===== */
/* menu: photo with name and tier beside it, then city and code on one line */
.pp-who { gap: 6px; }
.pp-who__id { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.pp-who__id > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp-who .pp-who__id .pp-av { width: 48px; height: 48px; margin: 0; }
.pp-who__id strong { font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.pp-who .pp-who__tier { margin: 0; gap: 6px; }
.pp-who__tier .pp-tierb__art { width: 20px; height: 20px; }
.pp-who .pp-who__tier b { font-size: 13.5px; font-weight: 600; color: var(--on-dark-2); }
.pp-who .pp-who__meta { font-size: 13.5px; }
.pp-who .pp-who__meta .pp-code { font-size: 13px; }
.pp-who button { margin-top: 2px; }
/* welcome band: larger photo, calmer headline, one fact per line */
.pp-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; padding: 20px; }
.pp-hero .pp-av--lg { width: 84px; height: 84px; }
.pp-hero__txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gm .pp-hero .pp-h1 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -0.01em; }
.gm .pp-hero .pp-sub { font-size: 14.5px; line-height: 1.45; margin: 0; }
.pp-hero__tierline { margin: 0; line-height: 1; }
.pp-hero__tier .pp-tierb__art { width: 22px; height: 22px; }
.pp-hero__tier b { font-size: 15px; font-weight: 600; }
.pp-hero .pp-code { font-size: 13.5px; }
.gm .pp-hero .pp-add { flex: 1 1 100%; justify-content: center; }
@media (min-width: 768px) { .pp-hero { padding: 26px 30px; gap: 20px 24px; } .pp-hero .pp-av--lg { width: 96px; height: 96px; } .gm .pp-hero .pp-add { flex: none; } }
/* project page on phone: a real progress bar, light */
.pp-stepbar { background: #fff; color: var(--ink); border-bottom: 1px solid #E8E4DA; padding-top: 12px; padding-bottom: 14px; align-items: center; justify-content: space-between; }
.pp-stepbar span { color: var(--ink-2); order: 2; }
.pp-stepbar strong { order: 1; }
.pp-stepbar i { order: 3; height: 10px; border-radius: 5px; background: #E4E2DB; margin-top: 4px; }
.pp-stepbar b { background: var(--pp-blue); border-radius: 5px; }
/* black stays in the menu only */
.pp-card--dark { background: var(--pp-navy); border-color: var(--pp-navy); }
.pp-pill--payout_sent { background: var(--pp-navy); color: #fff; }
.pp-steps li > span { background: var(--pp-blue); color: #fff; }
.pp-line .is-done .pp-dot { background: #18794E; border-color: #18794E; color: #fff; }
.pp-line .is-done::before { background: #18794E; }
.pp-cams li, .pp-photo .pp-av--ini, .pp-tier--certified { background: var(--pp-navy); color: #fff; }
.gm .pp-main a.pp-fab:not(.btn):not(.chip), .gm .pp-main a.pp-fab:not(.btn):not(.chip):hover { background: var(--pp-blue); color: #fff; }

/* ===== GUIDES: numbered list + "Win clients" ===== */
.pp-guides { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.gm .pp-main a.pp-guide:not(.btn):not(.chip) { display: flex; flex-direction: row; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); }
.gm .pp-main a.pp-guide:not(.btn):not(.chip):hover { border-color: var(--pp-blue); color: var(--ink); }
.pp-guide__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pp-guide__txt strong { font-size: 18px; }
.pp-guide__txt span { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.pp-guide__go { flex: none; font-size: 22px; color: var(--pp-blue); }
.pp-pb__n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--pp-blue); color: #fff; font-size: 15px; font-weight: 800; font-stretch: 100%; letter-spacing: 0; }
.pp-pb .pp-h2 { display: flex; align-items: center; gap: 12px; }
.pp-pb .pp-tabs { margin-top: 0; }
.pp-pb__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.pp-pb__cols > div { display: flex; flex-direction: column; gap: 10px; }
.pp-pb__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 15.5px; line-height: 1.45; }
.pp-pb__list li { position: relative; padding-left: 18px; }
.pp-pb__list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #B9BCC2; }
.pp-pb__list--yes li::before { background: #18794E; }
.pp-pb__hooks { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pp-pb__hooks li { padding: 14px 16px; border-radius: 10px; background: var(--pp-pale); font-size: 17px; line-height: 1.4; font-weight: 600; }
.pp-pb__obj .pp-rule:first-child { border-top: 0; }
.pp-pb__obj .pp-rule__txt strong { font-size: 16px; line-height: 1.35; }
.gm .pp-pb__obj .pp-rule__body { padding-left: 0; }
.gm .pp-pb__obj .pp-rule__body p { font-size: 16px; color: var(--ink); }
.pp-msg { display: flex; flex-direction: column; gap: 10px; padding: 18px 0 4px; border-top: 1px solid #EEEAE1; }
.gm .pp-msg__subj { font-size: 15.5px; font-weight: 700; }
.pp-msg__subj span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-right: 6px; }
.gm .pp-msg__body { padding: 16px; border-radius: 10px; background: #F7F5F0; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.pp-msg__acts { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 767px) { .pp-msg__acts .btn { flex: 1 1 100%; } }
@media (min-width: 768px) { .pp-pb__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.gm .pp-main a.pp-guide .pp-guide__txt strong { color: var(--ink); }
.pp-msg[hidden] { display: none; }
.pp-pb__scope { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding: 16px 18px; border-radius: 10px; background: var(--pp-pale); }

/* Guides: a row of steps on top of each guide instead of a back link */
.pp-gsteps { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
.pp-gsteps::-webkit-scrollbar { display: none; }
.gm .pp-main .pp-gsteps a:not(.btn):not(.chip) { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1.5px solid #D9D5CA; border-radius: 999px; background: #fff; color: var(--ink); font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.gm .pp-main .pp-gsteps a:not(.btn):not(.chip):hover { border-color: var(--pp-blue); color: var(--ink); }
.pp-gstep b { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pp-pale); color: var(--pp-blue); font-size: 12.5px; font-weight: 800; }
.gm .pp-main .pp-gsteps a.is-active:not(.btn):not(.chip) { background: var(--pp-blue); border-color: var(--pp-blue); color: #fff; }
.pp-gstep.is-active b { background: #fff; }
.gm .pp-main .pp-gsteps a.pp-gsteps__all:not(.btn):not(.chip) { border-color: transparent; background: transparent; padding-left: 0; color: var(--ink-2); }
@media (min-width: 768px) { .pp-gsteps { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; } }

/* ===== WIN CLIENTS v2 (2026-10-08): one pitch per business type, coloured message boxes ===== */
.pp-back--pill { margin: 0; }
.gm .pp-main .pp-back--pill a.chip { min-height: 40px; padding: 8px 16px 8px 12px; gap: 8px; background: #fff; border-color: #D9D5CA; color: var(--ink); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.gm .pp-main .pp-back--pill a.chip:hover { border-color: var(--pp-blue); color: var(--pp-blue); }
.pp-pb__types { margin: 0; }
.pp-pitch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.pp-pitch__msg { display: flex; flex-direction: column; gap: 14px; padding: 24px 22px; }
.gm .pp-pitch__eyebrow { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #AFC0FF; }
.gm .pp-pitch__title { margin: 0; color: #fff; font-size: clamp(24px, 3vw, 34px); line-height: 1.12; font-weight: 800; font-stretch: 116%; letter-spacing: -0.01em; }
.pp-pitch__points { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.pp-pitch__points li { position: relative; padding-left: 32px; color: #fff; font-size: 17px; line-height: 1.4; }
.pp-pitch__points li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: #2F9E6A; color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.gm .pp-pitch__asset { margin: 4px 0 0; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 16px; font-weight: 600; line-height: 1.4; }
.gm .pp-pitch__who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 13.5px; color: #C8D0EE; }
.pp-pitch__who span { font-weight: 700; margin-right: 2px; }
.pp-pitch__who b { padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); font-weight: 600; color: #fff; }
.pp-pitch__show { display: flex; flex-direction: column; gap: 12px; }
.gm .pp-main a.pp-ex:not(.btn):not(.chip) { position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; text-decoration: none; color: var(--ink); }
.gm .pp-main a.pp-ex:not(.btn):not(.chip):hover { border-color: var(--pp-blue); color: var(--ink); }
.pp-ex img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #E8E4DA; }
.pp-ex__txt { display: flex; flex-direction: column; gap: 2px; padding: 14px 44px 16px 16px; }
.pp-ex__txt small { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-blue); }
.pp-ex__txt strong { font-size: 18px; line-height: 1.25; color: var(--ink); }
.pp-ex__txt span { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.pp-ex__go { position: absolute; right: 14px; bottom: 14px; font-size: 20px; color: var(--pp-blue); }
.gm .pp-pitch__note { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--pp-pale); font-size: 15px; line-height: 1.5; }
.pp-meet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pp-meet .pp-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 16px 18px; }
.pp-meet .pp-h3 { margin: 0; }
.gm .pp-meet p { grid-column: 1 / -1; margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.pp-meet .pp-card > div { grid-column: 1 / -1; margin-top: 6px; }
@media (min-width: 768px) { .pp-meet { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pp-meet .pp-card { align-content: start; } }
@media (min-width: 1100px) { .pp-pitch { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } .pp-pitch__msg { padding: 30px 30px 28px; } }
.pp-kit .pp-card > .pp-pb__n { margin-bottom: 2px; }
/* message boxes in the colour of their channel */
.pp-msg { --ch: #172554; --chd: #172554; --chbg: #F3F5FB; border-top: 0; margin-top: 14px; padding: 16px; border: 2px solid var(--ch); border-radius: 14px; }
.pp-msg--whatsapp { --ch: #25D366; --chd: #0B7A3E; --chbg: #EEFBF3; }
.pp-msg--linkedin { --ch: #0A66C2; --chd: #0A66C2; --chbg: #EEF5FC; }
.pp-msg--instagram { --ch: #DD2A7B; --chd: #C01F68; --chbg: #FDF0F6; border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF) border-box; }
.gm .pp-msg__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 700; }
.pp-msg__head span { padding: 4px 11px; border-radius: 999px; background: var(--chd); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; }
.gm .pp-msg .pp-msg__body { background: var(--chbg); }
.gm .pp-main .pp-chtabs .chip { border-width: 2px; }
.gm .pp-main .pp-chtabs .pp-ch--whatsapp { border-color: #25D366; color: #0B7A3E; }
.gm .pp-main .pp-chtabs .pp-ch--email { border-color: #172554; color: #172554; }
.gm .pp-main .pp-chtabs .pp-ch--linkedin { border-color: #0A66C2; color: #0A66C2; }
.gm .pp-main .pp-chtabs .pp-ch--instagram { border-color: #DD2A7B; color: #C01F68; }
.gm .pp-main .pp-chtabs .pp-ch--whatsapp.is-active { background: #0B7A3E; border-color: #0B7A3E; color: #fff; }
.gm .pp-main .pp-chtabs .pp-ch--email.is-active { background: #172554; border-color: #172554; color: #fff; }
.gm .pp-main .pp-chtabs .pp-ch--linkedin.is-active { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.gm .pp-main .pp-chtabs .pp-ch--instagram.is-active { background: #C01F68; border-color: #C01F68; color: #fff; }
.gm .pp-pitch__asset { display: flex; flex-direction: column; gap: 4px; font-size: 18px; line-height: 1.35; background: #C9A24A; color: #15171A; }
.pp-pitch__asset span { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #3A2F0B; }
.gm .pp-pitch__also { margin: 0; font-size: 14.5px; line-height: 1.45; color: #C8D0EE; }
.gm .pp-pitch__close { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 12px 14px; border-radius: 10px; background: #fff; color: #15171A; font-size: 17px; font-weight: 600; line-height: 1.35; }
.pp-pitch__close span { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #18794E; }
/* The last line, outside the pitch: used only when the pitch has not brought a yes */
.pp-killer { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 12px; background: #EAF5EF; border: 1px solid #BFE3CE; }
.gm .pp-killer__when { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #18794E; }
.gm .pp-killer__line { margin: 0; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.3; font-weight: 700; color: #15402A; }
.gm .pp-killer__hint { margin: 0; font-size: 14px; color: #3F6B54; }
@media (min-width: 768px) { .pp-killer { padding: 26px 30px; } }

/* ===== NEW PROJECT (2026-10-08): the price builds itself; proforma at the end ===== */
.pp-np { display: flex; flex-direction: column; gap: 20px; max-width: 860px; }
.pp-np .pp-card { display: flex; flex-direction: column; gap: 18px; }
.pp-np .pp-h2 { display: flex; align-items: center; gap: 12px; }
.pp-np .fld.is-bad .field, .pp-np fieldset.is-bad .pp-size span { border-color: #C0392B; }
.pp-np .fld.is-bad > label, .pp-np fieldset.is-bad > legend { color: #C0392B; }
.pp-sizes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pp-size { position: relative; display: block; cursor: pointer; }
.pp-size input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pp-size span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 14px 16px; border: 1.5px solid #D9D5CA; border-radius: 12px; background: #fff; }
.pp-size strong { font-size: 16px; }
.pp-size small { font-size: 13.5px; color: var(--ink-2); }
.pp-size b { margin-top: 4px; font-size: 15px; color: var(--pp-blue); }
.pp-size input:checked + span { border-color: var(--pp-blue); background: var(--pp-pale); box-shadow: inset 0 0 0 1px var(--pp-blue); }
.pp-size input:focus-visible + span { outline: 3px solid var(--pp-blue); outline-offset: 3px; }
.pp-np .pp-incl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.pp-np fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pp-np legend.pp-h3 { padding: 0; margin-bottom: 4px; }
.pp-xtras { display: flex; flex-direction: column; }
.pp-xtra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 0; border-top: 1px solid #EEEAE1; }
.pp-xtra:first-child { border-top: 0; padding-top: 0; }
.pp-xtra > .consent { flex: 1 1 200px; min-width: 0; }
.pp-xtra__qty .field { width: 72px; min-height: 40px; padding: 6px 8px; text-align: center; }
.pp-xtra__qty .field:disabled { opacity: .4; }
.pp-xtra__price { margin-left: auto; font-weight: 700; white-space: nowrap; color: #18794E; }
.pp-xtra__price small { font-weight: 500; color: var(--ink-2); }
.pp-np__total { background: var(--pp-navy); border-color: var(--pp-navy); color: #fff; }
.pp-np__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.pp-np__sum span { font-size: 15px; color: #C8D0EE; }
.pp-np__sum strong { font-size: clamp(28px, 5vw, 38px); line-height: 1; font-weight: 800; }
.pp-np__sum--you strong { font-size: 22px; color: #E3C77A; }
.gm .pp-np__total .pp-hint { color: #C8D0EE; }
.gm .pp-np__total .btn--gold { background: #fff; color: var(--pp-navy); }
@media (min-width: 768px) { .pp-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-np .pp-incl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.pp-infos { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-left: 22px; }
.pp-infos li::marker { font-weight: 700; color: var(--ink-2); }
.pp-infos--read { font-size: 15.5px; line-height: 1.5; }
.pp-kit .pp-kit__main { position: relative; border-color: #E6CD8A; background: #FFFBEF; }
.pp-kit__star { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #C9A24A; color: #15171A; font-size: 12.5px; font-weight: 800; }
.gm .pp-rwstate { margin: 0; padding: 10px 12px; border-radius: 8px; background: #F7F5F0; font-size: 14.5px; }
.gm .pp-rwstate span { display: block; margin-top: 4px; color: var(--ink-2); }
.gm .pp-rwstate--approved, .gm .pp-rwstate--paid { background: #EAF5EF; color: #15402A; }
.gm .pp-rwstate--changes, .gm .pp-rwstate--rejected { background: #FFF5DC; color: #5C4508; }

/* New project: the extras as a real table (extra | how many | price), the included list in two columns */
.pp-np .pp-card > div, .pp-np .pp-card > fieldset { min-width: 0; }
.pp-ticks--2 { margin-top: 10px; }
@media (min-width: 768px) { .pp-ticks--2 { columns: 2; column-gap: 32px; } .pp-ticks--2 li { break-inside: avoid; } }
.pp-xt { display: flex; flex-direction: column; border: 1px solid #E8E4DA; border-radius: 12px; overflow: hidden; }
.pp-xt__row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 110px; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid #EEEAE1; background: #fff; }
.pp-xt__row:first-child { border-top: 0; }
.pp-xt__row--head { padding-top: 9px; padding-bottom: 9px; background: #F7F5F0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.pp-xt__row--head span:nth-child(2) { text-align: center; }
.pp-xt__row--head span:nth-child(3), .pp-xt__price { text-align: right; }
.pp-xt__row .consent { margin: 0; min-width: 0; }
.pp-xt__row .field { width: 100%; min-height: 40px; padding: 6px 8px; text-align: center; }
.pp-xt__row .field:disabled { opacity: .35; }
.pp-xt__price { display: flex; flex-direction: column; align-items: flex-end; font-weight: 700; white-space: nowrap; color: var(--ink-2); }
.pp-xt__price small { font-size: 12px; font-weight: 500; }
.pp-xt__row.is-on { background: var(--pp-pale); }
.pp-xt__row.is-on .pp-xt__price { color: #18794E; }
.pp-size[hidden] { display: none; }
@media (max-width: 479px) { .pp-xt__row { grid-template-columns: minmax(0, 1fr) 60px 84px; gap: 8px; padding: 10px; } }
@media (min-width: 768px) { .gm .pp-np .pp-ticks--2 { display: block; columns: 2; column-gap: 32px; } .gm .pp-np .pp-ticks--2 li { break-inside: avoid; margin-bottom: 8px; } }

/* ===== BADGE ARTWORK v2 (2026-10-09): drawn with their own colours; not earned = the same drawing in grey ===== */
.pp-bdg:not(.is-on) .pp-bdg__art, .pp-tierb:not(.is-on) .pp-tierb__art { filter: grayscale(1) brightness(1.08) contrast(.82); opacity: .6; }
.pp-bdgs .pp-bdg__art { margin-bottom: 2px; }
.pp-bdg__art, .pp-tierb__art { overflow: visible; }

/* ===== BRAND KIT ===== */
.pp-brand { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.pp-brand__card { display: flex; flex-direction: column; gap: 14px; }
.pp-brand__pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.pp-brand__pics figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.pp-brand__pics canvas { display: block; width: 100%; max-width: 220px; height: auto; border-radius: 50%; background: #172554; }
.pp-brand__pics--post canvas { max-width: 100%; border-radius: 10px; }
.pp-brand__pics figcaption { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); }
.pp-brand__logos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pp-brand__logo { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 16px 16px; border: 1px solid #E8E4DA; border-radius: 12px; background: #fff; text-align: center; }
.pp-brand__logo--dark { background: #15171A; border-color: #15171A; color: #C3C6CC; }
.pp-brand__logo img { display: block; width: auto; max-width: 180px; height: 44px; object-fit: contain; }
.pp-brand__logo span { display: flex; gap: 8px; }
.pp-brand__logo small { font-size: 13px; }
.gm .pp-main .pp-brand__logo--dark a.chip { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
@media (min-width: 768px) { .pp-brand__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pp-brand { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gm .pp-brand__logo img { width: auto; height: 40px; max-width: 180px; }
.pp-brand__logo--dark { background: #172554; border-color: #172554; }

/* coins and the treasure chest */
.pp-coins { display: inline-flex; align-items: center; flex: none; padding-left: 8px; }
.pp-coin { display: block; width: 26px; height: 26px; margin-left: -8px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .18)); }
.pp-ifs__get { align-items: center; }
.pp-ifs__get strong { margin-left: 2px; }
.pp-bonus__head { display: flex; align-items: center; gap: 14px; }
.pp-bonus__head .pp-chest { width: 64px; height: auto; flex: none; }
.pp-bonus__head .pp-h2 { margin: 0; }
.pp-bonus .pp-bonus__rw { background: transparent; width: 44px; height: 44px; }
.pp-bonus__rw .pp-coin { width: 36px; height: 36px; margin: 0; }
.pp-earnbar > .pp-earnbar__ready { position: relative; padding-right: 110px; }
.pp-earnbar__ready .pp-chest { position: absolute; right: 16px; top: 50%; width: 82px; height: auto; transform: translateY(-50%); }
.pp-brand__pics canvas[data-pp-ring] { background: transparent; }
@media (max-width: 479px) { .pp-earnbar > .pp-earnbar__ready { padding-right: 78px; } .pp-earnbar__ready .pp-chest { width: 60px; right: 10px; } .pp-coin { width: 22px; height: 22px; margin-left: -7px; } }

/* New project: the same width as every other page */
.pp-np { max-width: none; }
/* Project details: what the partner will be paid (50% + bonus box) */
.pp-dl .pp-dl__total { margin-top: 6px; padding: 14px 16px; border: 0; border-radius: 10px; background: #EAF5EF; }
.pp-dl .pp-dl__total dt { color: #15402A; font-weight: 700; }
.pp-dl .pp-dl__total strong { font-size: 22px; color: #18794E; }
.pp-label--pay { color: #E3C77A; font-weight: 700; }
/* Earn rewards on a phone: the chest sits in the bottom corner, so "In your bonus box" stays on one line */
@media (max-width: 767px) {
  .pp-earnbar > .pp-earnbar__ready { padding-right: 16px; }
  .pp-earnbar__ready span, .pp-earnbar > div > span { white-space: nowrap; }
  .pp-earnbar__ready .pp-chest { top: auto; bottom: 8px; right: 8px; width: 46px; transform: none; }
  .pp-earnbar > div { padding: 14px 14px; }
}
.pp-brand__pics--one { grid-template-columns: minmax(0, 1fr); }
.pp-brand__pics canvas[data-pp-frame] { max-width: 260px; background: transparent; border-radius: 50%; }
.pp-brand__pics--post { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .pp-brand__pics--post { grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); } }

/* channel marks on the message buttons */
.pp-chicon { flex: none; width: 18px; height: 18px; }
.gm .pp-main .pp-chtabs .chip { gap: 8px; }
.pp-msg__head span { display: inline-flex; align-items: center; gap: 6px; }
.pp-msg__head .pp-chicon { width: 14px; height: 14px; }

/* message channel buttons: all the same size (two by two on a phone, four in a row from tablet up) */
.gm .pp-main .pp-chtabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gm .pp-main .pp-chtabs .chip { justify-content: center; width: 100%; min-height: 48px; padding-left: 10px; padding-right: 10px; }
@media (min-width: 768px) { .gm .pp-main .pp-chtabs { grid-template-columns: repeat(4, minmax(0, 190px)); } }
/* the partner code on its own line, with its name */
.pp-who .pp-who__code { margin-top: 4px; font-size: 12.5px; color: var(--on-dark-2); }
.pp-who .pp-who__code .pp-code { display: block; margin-top: 1px; font-size: 14px; color: #fff; letter-spacing: .04em; }
.gm .pp-hero .pp-hero__code { font-size: 13px; }
.pp-hero .pp-hero__code .pp-code { color: #fff; font-size: 14px; letter-spacing: .04em; }

/* Earn rewards: the group that opens with the first project stays dim until then (the welcome bonus stays lit) */
.pp-ifs.is-locked > .pp-ifrow:not(#rw-first) { opacity: .5; }
.pp-locktag { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: #F1EFE9; color: var(--ink-2); font-size: 12.5px; font-weight: 700; font-stretch: 100%; letter-spacing: 0; vertical-align: middle; }

/* Profile: the bank account for payouts */
.pp-payout .pp-h2 { display: inline-flex; align-items: center; gap: 10px; }
.pp-payout .pp-h2 svg { flex: none; color: var(--pp-blue); }
.pp-pill--ok { background: #EAF5EF; color: #18794E; }
.pp-pill--wait { background: #FFF5DC; color: #5C4508; }
.pp-ibanfield { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; text-transform: uppercase; }

/* bank account form: space between the fields; helper field kept off screen */
.pp-payout .pp-more > * + * { margin-top: 16px; }
.pp-payout .pp-more > summary + * { margin-top: 18px; }
.pp-offscreen { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* ===== NEW PROJECT, second design: the form on the left, a summary that stays in view on the right ===== */
.pp-np { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; max-width: none; }
.pp-np__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pp-np__main .pp-card { gap: 20px; padding-top: 26px; padding-bottom: 28px; }
.pp-np__main .pp-h2 { padding-bottom: 16px; border-bottom: 1px solid #EEEAE1; }
.pp-np__label, .gm .pp-np legend.pp-np__label { margin: 0 0 12px; padding: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); font-stretch: 100%; }
.pp-np__incl { padding: 18px 20px; border-radius: 12px; background: #F7F5F0; }
.pp-np__ticks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 28px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.4; }
.pp-np__ticks li { position: relative; padding-left: 26px; }
.pp-np__ticks li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: #18794E; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.pp-np__side { min-width: 0; }
.pp-np .pp-np__total { gap: 16px; padding: 24px; }
.pp-np__total .pp-np__label { color: #AFC0FF; margin: 0; }
.pp-np__lines { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0 0 16px; list-style: none; border-bottom: 1px solid rgba(255, 255, 255, .18); font-size: 15px; line-height: 1.35; }
.pp-np__lines li { display: flex; justify-content: space-between; gap: 14px; color: #fff; }
.pp-np__lines li strong { white-space: nowrap; font-weight: 700; }
.pp-np__lines .pp-np__empty { color: #C8D0EE; }
.gm .pp-np__total .btn--block { width: 100%; justify-content: center; }
@media (min-width: 768px) { .pp-np__ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-np .pp-sizes { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
@media (min-width: 1100px) { .pp-np { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; } .pp-np__side { position: sticky; top: 24px; } }
/* brand kit: the introduction images shown large */
.pp-brand { grid-template-columns: minmax(0, 1fr) !important; }
.pp-brand__pics--post { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.pp-brand__pics--post canvas { width: 100%; max-width: 560px; }
.pp-brand__pics--post figure:last-child canvas { max-width: 760px; }

/* ===== BRAND KIT, second layout: one gallery with the three images at the same height ===== */
.pp-bk { display: flex; flex-direction: column; gap: 18px; }
.pp-bk__gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
.pp-bk__item { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pp-bk__img { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 14px; overflow: hidden; line-height: 0; box-shadow: 0 1px 0 #E8E4DA, 0 10px 26px rgba(21, 23, 26, .10); }
.pp-bk__img canvas { display: block; width: 100%; height: auto; }
.pp-bk__item--round .pp-bk__img { border-radius: 50%; max-width: 260px; margin: 0 auto; }
.pp-bk__img:focus-visible { outline: 3px solid var(--pp-blue); outline-offset: 4px; }
.pp-bk__item figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pp-bk__item figcaption strong { font-size: 16px; }
.pp-bk__item figcaption span { font-size: 13.5px; color: var(--ink-2); }
.pp-bk__item figcaption .btn { margin-top: 10px; }
.pp-bk__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.pp-bk__row .pp-brand__logos { grid-template-columns: minmax(0, 1fr); }
.pp-bk__dd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; font-size: 15px; line-height: 1.5; }
.pp-bk__dd ul { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; color: var(--ink-2); }
.pp-bk__cta { gap: 16px; }
@media (min-width: 560px) {
  .pp-bk__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-bk__item--wide { grid-column: 1 / -1; }
  .pp-bk__item--round .pp-bk__img { max-width: none; }
}
@media (min-width: 768px) { .pp-bk__dd { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .pp-bk__cta { flex-direction: row; align-items: center; justify-content: space-between; } }
@media (min-width: 1100px) {
  .pp-bk__gallery { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.91fr); gap: 28px; }
  .pp-bk__item--wide { grid-column: auto; }
  .pp-bk__row { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
}
@media (min-width: 560px) { .pp-bk__gallery { align-items: stretch; } .pp-bk__item figcaption { flex: 1; } .pp-bk__item figcaption .btn { margin-top: auto; } .pp-bk__item figcaption span { margin-bottom: 12px; } }

/* ===== 2026-10-12: included list keeps its distance from its title; dashboard shows the tier shields only ===== */
.gm .pp-np__incl { display: flex; flex-direction: column; gap: 16px; }
.gm .pp-np__incl .pp-np__label { margin: 0; }
.gm .pp-np__ticks { gap: 10px 28px; }
.pp-progress.pp-progress--tiers .pp-tierstrip { margin-bottom: 4px; }

/* ===== Phone menu: language buttons all the same size, three per row ===== */
.menu__langlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.menu__langlist li { display: block; min-width: 0; }
.menu__langlist a { display: flex; justify-content: center; width: 100%; padding: 8px 6px; text-align: center; white-space: nowrap; }

/* ===== A side column taller than the window scrolls with the page (set by JS), so the bonus box can always be reached ===== */
.gm .pp-sticky.is-tall { position: static; max-height: none; overflow: visible; }
#bonus-box { scroll-margin: 24px 0; }

/* ===== Re-capture notice on the project page ===== */
.gm .notice--warn { background: #FFF4E5; border: 1px solid #F0CFA0; color: #6B4A12; border-radius: 10px; padding: 12px 16px; }
.gm .notice--warn p { margin: 0; }

/* ===== BUSINESSES: the partner's own list ===== */
.pp-bzstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pp-bzstat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid #E8E4DA; text-decoration: none; color: var(--ink); }
.gm .pp-bzstat strong { font-size: 24px; font-weight: 800; font-stretch: 112%; line-height: 1.1; color: var(--ink); }
.gm .pp-bzstat span { font-size: 13.5px; color: var(--ink-2); }
.gm .pp-bzstat.is-active { background: var(--pp-pale); border-color: var(--pp-blue); }
.gm .pp-bzstat--won strong { color: #18794E; } .gm .pp-bzstat--meeting strong, .gm .pp-bzstat--contacted strong { color: var(--pp-blue); }
.pp-bzchips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.pp-bzchips .chip { flex: 0 0 auto; white-space: nowrap; } .pp-bzchips .chip small { opacity: .65; font-weight: 600; margin-left: 4px; }
.gm .pp-bzcard { padding-top: 8px; padding-bottom: 8px; }
.pp-bz { list-style: none; margin: 0; padding: 0; }
.pp-bz__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 16px 0; border-bottom: 1px solid #EEEAE1; scroll-margin-top: 90px; }
.pp-bz__row:last-child { border-bottom: 0; }
.pp-bz__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp-bz__main strong { font-size: 16.5px; line-height: 1.3; }
.pp-bz__main span { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.pp-bz__km { font-weight: 700; font-size: 14px; color: var(--pp-blue); white-space: nowrap; }
.pp-bz__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pp-bz__acts form { margin: 0 0 0 auto; display: flex; gap: 6px; }
.gm .pp-bz__st { width: auto; min-height: 40px; padding: 6px 34px 6px 12px; font-size: 14px; font-weight: 600; border-radius: 999px; }
.gm .pp-bz__new { border-color: var(--pp-blue); color: var(--pp-blue); font-weight: 700; }
.pp-bz__row--no .pp-bz__main { opacity: .55; }
.pp-bz__row--won .pp-bz__st { border-color: #18794E; color: #18794E; } .pp-bz__row--contacted .pp-bz__st, .pp-bz__row--meeting .pp-bz__st { border-color: var(--pp-blue); color: var(--pp-blue); }
.pp-bz__pages { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 0 10px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 559px) { .pp-bz__acts form { margin-left: 0; width: 100%; } .gm .pp-bz__st { width: 100%; } }
@media (min-width: 768px) { .pp-bzstats { grid-template-columns: repeat(6, minmax(0, 1fr)); } .pp-bzchips { flex-wrap: wrap; overflow: visible; } }
@media (min-width: 1100px) {
  .pp-bz__row { grid-template-columns: minmax(0, 1fr) 70px auto; align-items: center; }
  .pp-bz__km { text-align: right; } .pp-bz__acts { grid-column: auto; flex-wrap: nowrap; } .pp-bz__acts form { margin-left: 6px; }
}

/* ===== Demo account label ===== */
.gm .pp-demo { margin: 0; padding: 10px 16px; border-radius: 10px; background: #FFF5DC; border: 1px solid #EBD594; color: #5C4510; font-size: 14px; }
.gm .pp-demo strong { margin-right: 6px; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }

/* =====================================================================================
   DESIGN PASS (2026-10-15). One block: delete it to go back to the look before.
   The "Tier and badges" page (view badges) is NOT touched: the founder likes it as it is. "Earn rewards" is included.
   Rules: blue = actions; navy = ONE hero block per page; green = done / paid only;
   gold = the bonus box only. Buttons are solid, filters are outlined chips, statuses are flat tags.
   ===================================================================================== */
/* -- one dark block per page: the stat and "next steps" become light -- */
.gm .pp-main:not(.pp-view--badges) .pp-stat--main { background: #fff; border-color: #E8E4DA; }
.gm .pp-main:not(.pp-view--badges) .pp-stat--main span { color: var(--ink-2); }
.gm .pp-main:not(.pp-view--badges) .pp-stat--main strong { color: var(--pp-blue); }
.gm .pp-main:not(.pp-view--badges) .pp-next { background: var(--pp-pale); border-color: #D9E0FA; }
.gm .pp-main:not(.pp-view--badges) .pp-next a.pp-todo:not(.btn):not(.chip), .gm .pp-main:not(.pp-view--badges) .pp-next a.pp-todo:not(.btn):not(.chip):hover { position: relative; padding: 12px 34px 12px 0; border-top: 1px solid #D9E0FA; color: var(--ink); }
.gm .pp-main:not(.pp-view--badges) .pp-next a.pp-todo::after { content: "→"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--pp-blue); font-weight: 700; }
.gm .pp-main:not(.pp-view--badges) .pp-next .pp-todo span { color: var(--ink-2); font-size: 14.5px; }
.gm .pp-hero .pp-h1 { font-size: clamp(22px, 2.1vw, 27px); overflow-wrap: normal; }
/* -- shapes: statuses are flat tags; a chosen filter is tinted, not a solid button -- */
.gm .pp-main:not(.pp-view--badges) .pp-pill { border-radius: 6px; padding: 3px 9px; font-size: 12.5px; letter-spacing: .01em; }
.gm .pp-main:not(.pp-view--badges) .chip.is-active { background: var(--pp-pale); border-color: var(--pp-blue); color: var(--pp-blue); }
/* -- businesses: one main action per row, the rest are quiet links -- */
.gm .pp-main:not(.pp-view--badges) .pp-bz__acts a.chip:not(.pp-bz__new):not(.is-active) { min-height: 0; padding: 6px 4px; border: 0; background: none; color: var(--pp-blue); font-weight: 600; }
.gm .pp-main:not(.pp-view--badges) .pp-bz__acts a.pp-bz__new { background: #fff; border-color: var(--pp-blue); color: var(--pp-blue); }
.gm .pp-main:not(.pp-view--badges) .pp-bz__acts a.pp-bz__new:hover { background: var(--pp-pale); }
/* -- type: card titles step back, small text is readable -- */
.gm .pp-main:not(.pp-view--badges) .pp-h2 { font-size: 19px; font-weight: 700; font-stretch: 106%; }
.gm .pp-main:not(.pp-view--badges) .pp-hint { font-size: 14.5px; }
.gm .pp-main:not(.pp-view--badges) .pp-bz__main span, .gm .pp-main:not(.pp-view--badges) .pp-perks, .gm .pp-main:not(.pp-view--badges) .pp-bzstat span { font-size: 14.5px; }
.gm .pp-main:not(.pp-view--badges) .pp-tr:not(.pp-tr--head) > span:nth-child(2) { font-size: 14.5px; color: var(--ink-2); }
/* -- Earn rewards: gold for the bonus box, no green banner, amounts in one even column -- */
.gm .pp-view--rewards .pp-earnbar > div { background: #fff; color: var(--ink); border: 1px solid #E8E4DA; }
.gm .pp-view--rewards .pp-earnbar > .pp-earnbar__ready { background: #FFF5DC; border-color: #EBD594; }
.gm .pp-view--rewards .pp-earnbar__ready strong { color: #7A5C12; }
.gm .pp-view--rewards .pp-ifcard { border-top: 1px solid #E8E4DA; }
.gm .pp-view--rewards .pp-ifs__get { background: #F7F5F0; color: var(--ink); }
.gm .pp-view--rewards .pp-ifs__get small { color: var(--ink-2); }
@media (min-width: 768px) { .gm .pp-view--rewards .pp-ifrow summary .pp-ifs__get, .gm .pp-view--rewards .pp-ifs__get { width: 372px; min-width: 0; flex: none; } }
@media (max-width: 767px) { .gm .pp-view--rewards .pp-ifrow summary .pp-ifs__get, .gm .pp-view--rewards .pp-ifs__get { display: flex; align-self: stretch; width: 100%; box-sizing: border-box; flex-wrap: wrap; } }

/* ===== ENGAGEMENT (2026-10-09): five tiers, next reward, ranking, camera reimbursement ===== */
@media (min-width: 900px) { .gm .pp-tiers { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } }
.gm .pp-tierstrip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gm .pp-tier--mid { background: #F1EAFE; color: #5B21B6; }
@media (max-width: 559px) { .gm .pp-tierstrip .pp-tierb__art { width: 48px; height: 48px; } .gm .pp-tierstrip li { font-size: 11.5px; } .gm .pp-tierstrip li::before { top: 23px; left: calc(50% + 26px); right: calc(-50% + 26px); } }
.gm a.pp-nextrw { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 18px; align-items: center; text-decoration: none; color: var(--ink); }
.gm .pp-main a.pp-nextrw:not(.btn):not(.chip) { color: var(--ink); }
.pp-nextrw__l { grid-column: 1 / -1; font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.pp-nextrw__t { font-size: 17px; font-weight: 600; line-height: 1.35; }
.gm .pp-nextrw strong { font-size: 24px; font-weight: 800; font-stretch: 112%; color: var(--pp-blue); white-space: nowrap; }
.pp-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pp-rank li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid #EEEAE1; font-size: 15px; }
.pp-rank li:first-child { border-top: 0; }
.pp-rank__n { font-weight: 800; color: var(--ink-2); } .pp-rank__who { color: var(--ink-2); min-width: 0; } .pp-rank__who strong { color: var(--ink); } .pp-rank__v { font-weight: 800; }
.pp-rank li.is-me { background: var(--pp-pale); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 8px; border-top-color: transparent; }
.pp-cam__parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pp-cam__parts li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 10px; background: #F7F5F0; font-size: 15px; }
.pp-cam__parts li.is-done { background: #EAF5EF; color: #15402A; }
.pp-cam__parts li.is-done .pp-dot { background: #18794E; border-color: #18794E; color: #fff; }
.pp-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .55); overflow-y: auto; }
.pp-modal__box { width: 100%; max-width: 520px; background: #fff; border-radius: 16px; padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 60px rgba(15, 23, 42, .25); }
.pp-modal__eyebrow { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7A5C12; }
.gm .pp-modal__t { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 800; font-stretch: 112%; }
.pp-modal__big { margin: 0; padding: 14px 16px; border-radius: 10px; background: #FFF5DC; border: 1px solid #EBD594; font-size: 18px; font-weight: 700; color: #5C4510; }
.pp-modal__steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.45; }
.pp-modal__acts { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
@media (min-width: 560px) { .pp-modal__acts { flex-direction: row; } }
.gm .pp-modal__steps { list-style: decimal; } .gm .pp-modal__steps li { display: list-item; }

/* ===== Payouts: when you are paid ===== */
.pp-payhow__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.pp-payhow__steps li { display: flex; gap: 12px; align-items: flex-start; }
.pp-payhow__steps li > span { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--pp-blue); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.pp-payhow__steps li:last-child > span { background: #18794E; }
.pp-payhow__steps strong { display: block; font-size: 16.5px; line-height: 1.3; }
.gm .pp-payhow__steps p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
@media (min-width: 900px) { .pp-payhow__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* ===== THE GOOD NEWS: chosen for the camera reimbursement (a celebration, with fireworks on the canvas behind) ===== */
.gm .pp-modal[data-pp-party] { background: radial-gradient(120% 90% at 50% 0%, #1E2F7A 0%, #0B1235 55%, #060A20 100%); padding: 20px 16px; }
.pp-party__sky { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: auto; }
.gm .pp-modal__box.pp-party { position: relative; max-width: 560px; padding: 0; gap: 0; overflow: hidden; border-radius: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 233, 166, .35); animation: pp-party-in .5s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes pp-party-in { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }
.pp-party__top { position: relative; padding: 30px 26px 26px; text-align: center; color: #fff; background: linear-gradient(140deg, #172554 0%, #2A45B8 55%, #3454D1 100%); }
.pp-party__top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: linear-gradient(90deg, #D9A21B, #FFE9A6, #D9A21B); }
.pp-party__medal { display: inline-flex; margin-bottom: 10px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); animation: pp-party-pop .7s .15s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes pp-party-pop { from { opacity: 0; transform: scale(.3) rotate(-25deg); } to { opacity: 1; transform: none; } }
.gm .pp-party__hello { margin: 0 0 6px; font-size: clamp(28px, 6.4vw, 40px); line-height: 1.05; font-weight: 800; font-stretch: 118%; letter-spacing: -.01em; color: #FFE08A; }
.gm .pp-party__t { margin: 0; font-size: clamp(17px, 3.6vw, 21px); line-height: 1.25; font-weight: 700; font-stretch: 104%; color: #fff; }
.pp-party__body { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px 24px; background: #fff; }
.pp-party__prize { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 14px; border-radius: 14px; text-align: center; background: linear-gradient(180deg, #FFF7DD, #FFE9A6); border: 1px solid #E7C55C; color: #5C4510; }
.pp-party__prize span { font-size: 15.5px; font-weight: 600; }
.gm .pp-party__prize strong { font-size: clamp(34px, 8vw, 46px); line-height: 1.05; font-weight: 800; font-stretch: 116%; color: #6B4A05; }
.pp-party__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pp-party__steps li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; line-height: 1.35; font-weight: 600; }
.pp-party__steps b { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; background: #3454D1; }
.pp-party__steps li:nth-child(2) b { background: #7C3AED; } .pp-party__steps li:nth-child(3) b { background: #18794E; }
.gm .pp-party__note { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); text-align: center; }
.pp-party__acts { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gm .pp-party__go { width: 100%; min-height: 54px; font-size: 18px; font-weight: 800; color: #1B1403; border: 0; background: linear-gradient(180deg, #FFD966, #E0A526); box-shadow: 0 6px 18px rgba(224, 165, 38, .45); }
.gm .pp-party__go:hover { background: linear-gradient(180deg, #FFE08A, #E9B23A); color: #1B1403; }
.gm .pp-main a.pp-party__later:not(.btn):not(.chip), .gm a.pp-party__later { color: var(--ink-2); font-size: 15px; font-weight: 600; text-decoration: underline; }
@media (min-width: 560px) { .pp-party__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .pp-party__steps li { flex-direction: column; text-align: center; gap: 8px; padding: 12px 8px; border-radius: 12px; background: #F4F6FF; } }
@media (prefers-reduced-motion: reduce) { .gm .pp-modal__box.pp-party, .pp-party__medal { animation: none; } }

/* ===== good-news card: a treasure chest with stars instead of the camera medal ===== */
.gm .pp-party__medal { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 150px; height: 104px; margin-bottom: 8px; }
.gm .pp-party__medal .pp-chest { position: static; width: 112px; height: auto; transform: none; }
.pp-party__star { position: absolute; animation: pp-party-twinkle 1.8s ease-in-out infinite; }
.pp-party__star--a { left: 0; top: 34px; width: 20px; height: 20px; }
.pp-party__star--b { left: 18px; top: 2px; width: 26px; height: 26px; animation-delay: .5s; }
.pp-party__star--c { left: 64px; top: -8px; width: 18px; height: 18px; animation-delay: 1s; }
.pp-party__star--d { right: 16px; top: 4px; width: 24px; height: 24px; animation-delay: .25s; }
.pp-party__star--e { right: 0; top: 40px; width: 18px; height: 18px; animation-delay: .8s; }
@keyframes pp-party-twinkle { 0%, 100% { opacity: .35; transform: scale(.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(18deg); } }
@media (prefers-reduced-motion: reduce) { .pp-party__star { animation: none; } }

/* ===== "GM360 is preparing this for you" ===== */
.gm .pp-prep { gap: 14px; border-color: #D9E0FA; background: linear-gradient(180deg, #F6F8FF, #fff 60%); }
.pp-prep__eyebrow { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--pp-blue); }
.pp-prep__bar { height: 14px; border-radius: 999px; background: #E3E8FB; overflow: hidden; }
.pp-prep__bar b { display: block; height: 100%; border-radius: 999px; background-color: var(--pp-blue); background-image: linear-gradient(110deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 75%); background-size: 200% 100%; animation: pp-prep-shine 1.8s linear infinite; transition: width .6s ease; }
@keyframes pp-prep-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.gm .pp-prep__due { margin: 0; font-size: 15.5px; font-weight: 700; }
.pp-prep__phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; font-size: 15px; color: var(--ink-2); }
.pp-prep__phases li { display: flex; align-items: center; gap: 10px; }
.pp-prep__phases li.is-done { color: var(--ink); } .pp-prep__phases li.is-done .pp-dot { background: #18794E; border-color: #18794E; color: #fff; }
.pp-prep__phases li.is-now { color: var(--ink); font-weight: 700; } .pp-prep__phases li.is-now .pp-dot { border-color: var(--pp-blue); box-shadow: inset 0 0 0 4px var(--pp-blue); animation: pp-prep-pulse 1.4s ease-in-out infinite; }
@keyframes pp-prep-pulse { 50% { box-shadow: inset 0 0 0 6px var(--pp-blue); } }
.pp-prep__mean { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid #E3E8FB; }
.pp-start__gm { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--pp-blue); }
@media (min-width: 768px) { .pp-prep__phases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .pp-prep__bar b, .pp-prep__phases li.is-now .pp-dot { animation: none; } }

/* ===== Get started: calm rows (number, what, whose turn); the whole row opens the step ===== */
.gm .pp-start li { position: relative; gap: 14px; min-height: 54px; padding: 6px 0; }
.gm .pp-start .pp-dot { flex: none; width: 28px; height: 28px; font-size: 13.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; color: var(--ink-2); background: #fff; border: 1.5px solid #D5D6D1; border-radius: 50%; }
.gm .pp-start .is-done .pp-dot { background: #18794E; border-color: #18794E; color: #fff; }
.gm .pp-start .is-done > span:last-child { color: var(--ink-2); }
.gm .pp-main .pp-start a.pp-start__link:not(.btn):not(.chip) { flex: 1; min-width: 0; color: var(--ink); font-weight: 700; text-decoration: none; }
.gm .pp-start a.pp-start__link::after { content: ""; position: absolute; inset: 0; }
.gm .pp-start .pp-start__todo:hover a.pp-start__link { text-decoration: underline; }
.pp-start__tag { flex: none; padding: 4px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: #F1EFE9; color: #4A4F57; }
.pp-start .is-gm .pp-start__tag { background: var(--pp-pale); color: #2943AA; }
.pp-start .is-gm .pp-dot { border-style: dashed; }
@media (max-width: 559px) { .gm .pp-start li { flex-wrap: wrap; row-gap: 4px; } .pp-start__tag { margin-left: 42px; white-space: normal; } .gm .pp-main .pp-start a.pp-start__link:not(.btn):not(.chip) { flex: 1 1 calc(100% - 42px); } }
/* ===== the badges a partner holds, as small icons beside the tier shield ===== */
.gm .pp-bdg.pp-mini { display: inline-flex; padding: 0; margin: 0; border: 0; background: none; gap: 0; min-width: 0; width: auto; }
.gm .pp-hero__tier .pp-mini .pp-bdg__art { width: 24px; height: 24px; }
.gm .pp-who__tier .pp-mini .pp-bdg__art { width: 20px; height: 20px; }
.gm .pp-hero__tier, .gm .pp-who .pp-who__tier { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; }

/* ===== the tier shield sits on the photo (lower right, about five o'clock); badges go under the name ===== */
.pp-avwrap { position: relative; flex: none; display: inline-flex; }
.gm .pp-avtier { position: absolute; right: -9px; bottom: -8px; display: block; margin: 0; padding: 0; line-height: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }
.gm .pp-avtier .pp-tierb__art { width: 28px; height: 28px; display: block; }
.gm .pp-avwrap--lg .pp-avtier { right: -12px; bottom: -10px; }
.gm .pp-avwrap--lg .pp-avtier .pp-tierb__art { width: 46px; height: 46px; }
@media (min-width: 768px) { .gm .pp-avwrap--lg .pp-avtier .pp-tierb__art { width: 52px; height: 52px; } }
.gm .pp-hero__tier b { font-size: 15.5px; }
.gm .pp-hero__badges { margin: 4px 0 2px; display: flex; flex-wrap: wrap; gap: 6px; line-height: 0; }
.gm .pp-hero__badges .pp-mini .pp-bdg__art { width: 28px; height: 28px; }
.pp-who__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; line-height: 0; }
.gm .pp-who__badges .pp-mini .pp-bdg__art { width: 20px; height: 20px; }
.gm .pp-who__id { gap: 16px; }

/* ===== bigger photos; the shield further out to the right (less over the face), same height ===== */
.gm .pp-hero .pp-av--lg { width: 100px; height: 100px; font-size: 30px; }
.gm .pp-who .pp-who__id .pp-av { width: 62px; height: 62px; }
.gm .pp-avtier { right: -16px; }
.gm .pp-avwrap { margin-right: 12px; }
.gm .pp-avtier .pp-tierb__art { width: 30px; height: 30px; }
.gm .pp-avwrap--lg .pp-avtier { right: -24px; }
.gm .pp-avwrap--lg { margin-right: 18px; }
@media (min-width: 768px) { .gm .pp-hero .pp-av--lg { width: 120px; height: 120px; font-size: 36px; } .gm .pp-avwrap--lg .pp-avtier { right: -28px; } .gm .pp-avwrap--lg .pp-avtier .pp-tierb__art { width: 56px; height: 56px; } .gm .pp-avwrap--lg { margin-right: 22px; } }
@media (min-width: 768px) { .gm .pp-hero .pp-av--lg { width: 112px; height: 112px; } .gm .pp-avwrap--lg { margin-right: 18px; } }
@media (min-width: 1100px) { .gm .pp-hero .pp-h1 { font-size: 24px; white-space: nowrap; } }
.gm .pp-who .pp-who__id .pp-av { width: 58px; height: 58px; }
.gm .pp-who .pp-who__tier b { font-size: 13px; }

/* ===== the photo is as tall as the text beside it (name, tier, badges, city, code): the script measures the text
   and sets --av; without script the sizes below apply ===== */
.gm .pp-avwrap--lg { width: var(--av, 112px); height: var(--av, 112px); align-self: center; }
.gm .pp-hero .pp-avwrap--lg .pp-av--lg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gm .pp-who .pp-avwrap { width: var(--av, 62px); height: var(--av, 62px); align-self: center; }
.gm .pp-who .pp-who__id .pp-avwrap .pp-av { position: absolute; inset: 0; width: 100%; height: 100%; }
.gm .pp-hero__txt, .gm .pp-who__id > div { justify-content: center; }

/* ===== phones: less text beside the photo (smaller headline, the code moves below), so photo and text are equally tall ===== */
.pp-hero__code--m { display: none; }
@media (max-width: 559px) {
  .gm .pp-hero .pp-h1 { font-size: clamp(18px, 5.4vw, 21px); line-height: 1.12; }
  .gm .pp-hero__txt { gap: 4px; }
  .gm .pp-hero__txt .pp-hero__code { display: none; }
  .gm .pp-hero__code--m { display: block; flex: 1 1 100%; order: 2; margin: 0; font-size: 14px; color: #C8D0EE; }
  .gm .pp-hero > .pp-add { order: 3; }
  .gm .pp-hero__badges .pp-mini .pp-bdg__art { width: 24px; height: 24px; }
  .gm .pp-avwrap--lg { margin-right: 14px; }
}

/* ===== FLAGS: on the photo (upper left, round, diagonal to the shield), in the Brand kit, in the phone field ===== */
.gm .pp-avflag { position: absolute; left: -6px; top: -4px; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; line-height: 0; box-shadow: 0 0 0 2px #fff, 0 2px 5px rgba(0, 0, 0, .4); background: #fff; }
.gm .pp-avflag[hidden] { display: none; }
.gm .pp-avflag img { width: 100%; height: 100%; display: block; object-fit: cover; }
.gm .pp-avwrap--lg .pp-avflag { left: -4px; top: 0; width: 34px; height: 34px; }
@media (min-width: 768px) { .gm .pp-avwrap--lg .pp-avflag { width: 40px; height: 40px; } }
.gm .pp-flagpick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; }
.pp-flagpick__show { display: flex; justify-content: center; padding: 22px; border-radius: 14px; background: var(--pp-navy); }
.gm .pp-flagpick__av { width: 112px; height: 112px; margin: 0; }
.gm .pp-flagpick__av .pp-av { position: absolute; inset: 0; width: 100%; height: 100%; font-size: 34px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.gm .pp-flagpick__av .pp-avflag { left: -2px; top: 0; width: 40px; height: 40px; }
.pp-flagpick__form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 768px) { .gm .pp-flagpick { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; } }
.pp-phone { display: flex; gap: 8px; align-items: stretch; }
.pp-phone .field { flex: 1; min-width: 0; }
.pp-phone__cc { position: relative; flex: none; display: flex; }
.pp-phone__cc select { min-height: 48px; max-width: 150px; border: 1.5px solid #D5D6D1; border-radius: 10px; background: #fff; font: inherit; padding: 0 8px; }
.pp-phone__face { display: none; }
.pp-phone.is-js .pp-phone__face { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; border: 1.5px solid #D5D6D1; border-radius: 10px; background: #fff; font-weight: 700; white-space: nowrap; }
.pp-phone.is-js .pp-phone__face img { width: 28px; height: 21px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); display: block; }
.pp-phone.is-js .pp-phone__face img[hidden] { display: none; }
.pp-phone.is-js .pp-phone__face i { font-style: normal; font-size: 12px; color: var(--ink-2); }
.pp-phone.is-js .pp-phone__cc select { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; opacity: 0; cursor: pointer; }
.pp-phone.is-js .pp-phone__cc:focus-within .pp-phone__face { outline: 3px solid var(--pp-blue); outline-offset: 2px; }

/* ===== menu block: one fixed photo size, so the name always has room; words are never broken letter by letter ===== */
.gm .pp-who .pp-avwrap { width: 64px; height: 64px; margin-right: 14px; align-self: center; }
.gm .pp-who__id { gap: 12px; align-items: center; }
.gm .pp-who__id > div { flex: 1; min-width: 0; }
.gm .pp-who__id strong { overflow-wrap: break-word; word-break: normal; hyphens: none; font-size: 15.5px; line-height: 1.2; }
.gm .pp-who .pp-avflag { left: -5px; top: -3px; width: 22px; height: 22px; }

/* ===== the flag: a small glossy badge with a steel rim like the shield's, sitting on the edge of the photo
   at upper left (its centre is on the circle, pushed out so only a little of it overlaps) ===== */
.gm .pp-avflag, .gm .pp-avwrap--lg .pp-avflag, .gm .pp-who .pp-avflag, .gm .pp-flagpick__av .pp-avflag {
  --f: 20px; width: var(--f); height: var(--f); left: calc(14.65% - var(--f) * .78); top: calc(14.65% - var(--f) * .78);
  overflow: visible; border-radius: 50%; background: #1B2430;
  box-shadow: 0 0 0 1.5px #AEB6C0, 0 0 0 3px #26303C, 0 2px 4px rgba(0, 0, 0, .45);
}
.gm .pp-avflag img { border-radius: 50%; }
.gm .pp-avflag::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .12) 36%, rgba(255, 255, 255, 0) 52%, rgba(0, 0, 0, .16) 100%); }
.gm .pp-avflag::before { content: ""; position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; background: #fff; z-index: 1; pointer-events: none;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.gm .pp-avwrap--lg .pp-avflag { --f: 26px; }
.gm .pp-flagpick__av .pp-avflag { --f: 28px; }
.gm .pp-who .pp-avflag { --f: 16px; box-shadow: 0 0 0 1px #AEB6C0, 0 0 0 2.2px #26303C, 0 1px 3px rgba(0, 0, 0, .45); }
.gm .pp-who .pp-avflag::before { width: 5px; height: 5px; left: -2px; top: -2px; }
@media (min-width: 768px) { .gm .pp-avwrap--lg .pp-avflag { --f: 30px; width: var(--f); height: var(--f); } }

/* the flag badge has no sparkle (founder) */
.gm .pp-avflag::before, .gm .pp-who .pp-avflag::before { content: none; display: none; }

/* ===== welcome band on desktop: photo, text and gold bonus box are one height; the box sits next to the text ===== */
@media (min-width: 1100px) {
  .gm .pp-hero .pp-hero__txt { flex: 0 1 auto; }
  .gm .pp-hero > .pp-bbhero { align-self: center; box-sizing: border-box; min-height: var(--av, 112px); margin-left: clamp(20px, 4vw, 72px); display: flex; flex-direction: column; justify-content: center; }
  .gm .pp-hero > .pp-add { margin-left: auto; }
}

/* ===== gold bonus box in the welcome band: "BONUS BOX" and, after it on the same line, the amount in large figures ===== */
@media (min-width: 1100px) {
  .gm .pp .pp-hero a.pp-bbhero { display: grid; grid-template-columns: auto auto; justify-content: start; align-content: center; align-items: center; column-gap: 14px; row-gap: 8px; max-width: 300px; }
  .gm .pp .pp-hero a.pp-bbhero > span { grid-column: 1; }
  .gm .pp .pp-hero a.pp-bbhero > strong { grid-column: 2; font-size: clamp(34px, 3.2vw, 46px); line-height: 1; }
  .gm .pp .pp-hero a.pp-bbhero > small { grid-column: 1 / -1; }
}

/* ===== welcome band on desktop: New project sits midway between the gold box and the right end of the band ===== */
@media (min-width: 1100px) { .gm .pp-hero > .pp-add { margin-left: auto; margin-right: auto; } }
@media (min-width: 1100px) {
  .gm .pp-hero { flex-wrap: nowrap; }                                   /* one row: the text gives way, nothing drops to a second line */
  .gm .pp-hero .pp-hero__txt { flex: 0 1 auto; min-width: 0; }
  .gm .pp-hero .pp-h1 { white-space: normal; }
  .gm .pp-hero > .pp-bbhero, .gm .pp-hero > .pp-add, .gm .pp-hero > .pp-avwrap--lg { flex: none; }
  .gm .pp-hero > .pp-add { position: relative; left: 3px; }             /* the gap on its left is 6 px smaller than the padding on its right */
}
@media (min-width: 1100px) and (max-width: 1399px) { .gm .pp-hero > .pp-bbhero { margin-left: 0; } .gm .pp .pp-hero a.pp-bbhero > strong { font-size: 32px; } .gm .pp .pp-hero a.pp-bbhero { column-gap: 10px; } }
/* smaller desktop screens: the same band with less room */
@media (min-width: 1250px) and (max-width: 1399px) {
  .gm .pp .pp-hero a.pp-bbhero > small { display: none; }
  .gm .pp .pp-hero a.pp-bbhero > strong { font-size: 30px; }
  .gm .pp .pp-hero a.pp-bbhero { min-width: 0; padding: 12px 16px; }
  .gm .pp-hero .pp-h1 { font-size: 22px; }
}
@media (min-width: 1100px) and (max-width: 1249px) {
  .gm .pp-hero { flex-wrap: wrap; }
  .gm .pp-hero .pp-hero__txt { flex: 1 1 0; }
  .gm .pp-hero > .pp-add { margin-left: auto; margin-right: 0; left: 0; }
  .gm .pp .pp-hero a.pp-bbhero { order: 5; flex: 1 1 100%; max-width: none; min-height: 0; margin-left: 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 16px; }
  .gm .pp .pp-hero a.pp-bbhero > strong { font-size: 26px; }
}

/* ===== Brand kit on desktop: the three images as tidy cards (a quiet stage with a modest preview, the caption below) ===== */
@media (min-width: 1100px) {
  .gm .pp-bk__gallery { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.55fr); gap: 18px; align-items: stretch; }
  .gm .pp-bk__item, .gm .pp-bk__item--wide { grid-column: auto; gap: 0; border: 1px solid #E8E4DA; border-radius: 14px; overflow: hidden; background: #fff; }
  .gm .pp-bk__item .pp-bk__img, .gm .pp-bk__item--round .pp-bk__img { display: flex; align-items: center; justify-content: center; width: 100%; max-width: none; height: 226px; margin: 0; padding: 24px; border-radius: 0; box-shadow: none; background: #F3F1EA; line-height: 0; }
  .gm .pp-bk__item .pp-bk__img canvas { width: auto; height: auto; max-width: 100%; max-height: 178px; border-radius: 12px; box-shadow: 0 8px 20px rgba(21, 23, 26, .16); }
  .gm .pp-bk__item--round .pp-bk__img canvas { border-radius: 50%; }
  .gm .pp-bk__item figcaption { flex: 1; padding: 16px 18px 18px; }
  .gm .pp-bk__item .pp-bk__img:hover canvas { box-shadow: 0 10px 26px rgba(21, 23, 26, .24); }
}

/* ===== MESSAGES: Ask GM360 and the question thread of a project ===== */
.pp-ask { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1100px) { .pp-ask { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); } }
.pp-msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.pp-msgs__day { align-self: center; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6B6E75; }
.pp-msgs__m { display: flex; flex-direction: column; gap: 5px; max-width: 86%; }
.pp-msgs__m--me { align-self: flex-end; align-items: flex-end; }
.pp-msgs__meta { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; color: #4A4F57; }
.pp-msgs__meta strong { color: var(--ink); font-size: 14px; }
.pp-msgs__b { padding: 12px 16px; border-radius: 14px; font-size: 16px; line-height: 1.5; background: #F3F1EA; overflow-wrap: anywhere; }
.pp-msgs__m--me .pp-msgs__b { background: var(--pp-pale); border: 1px solid #D9E0FA; }
.pp-msgs__m.is-new .pp-msgs__b { box-shadow: 0 0 0 2px var(--pp-blue); }
.pp-ask__form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; padding-top: 18px; border-top: 1px solid #EEEAE1; }
.pp-msgs + .pp-link { margin-top: 4px; padding-top: 16px; border-top: 1px solid #EEEAE1; }
.pp-ask__topics { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pp-ask__topic { position: relative; cursor: pointer; }
.pp-ask__topic input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pp-ask__topic span { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border: 1.5px solid #D5D6D1; border-radius: 999px; font-size: 15px; font-weight: 600; background: #fff; }
.pp-ask__topic input:checked + span { background: var(--pp-pale); border-color: var(--pp-blue); color: var(--pp-blue); }
.pp-ask__topic input:focus-visible + span { outline: 3px solid var(--pp-blue); outline-offset: 2px; }
.pp-ask__when { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pp-ask__when dt { font-size: 13.5px; color: var(--ink-2); } .pp-ask__when dd { margin: 0; font-weight: 700; font-size: 15.5px; }
.gm .pp-main a.pp-wa:not(.btn):not(.chip), .gm a.pp-wa { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: 999px; background: #128C4A; color: #fff; font-weight: 700; text-decoration: none; }
.gm .pp-main a.pp-wa:not(.btn):not(.chip):hover { background: #0E7A40; color: #fff; }
.gm .pp-main a.pp-wa--sm:not(.btn):not(.chip) { min-height: 40px; padding: 6px 14px; font-size: 14.5px; }
.gm .pp-who a.pp-who__wa { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 2px; color: #7EE2A8; font-size: 14.5px; font-weight: 700; text-decoration: none; }
.gm .pp-who a.pp-who__wa:hover { text-decoration: underline; }
.pp-nav__new { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #E0A526; color: #1B1403; font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }

/* ===== AUDIT FIXES (update 99): a short line under a money figure says what the figure depends on ===== */
.gm .pp .pp-stat small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; font-weight: 400; color: var(--ink-2); }

/* ===== BUSINESS NOTES (update 100): who the partner spoke to, a note and the day to follow up ===== */
.pp-bz__note { grid-column: 1 / -1; }
.pp-bz__note > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; list-style: none; cursor: pointer; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.pp-bz__note > summary::-webkit-details-marker { display: none; }
.gm .pp .pp-bz__nadd, .gm .pp .pp-bz__note > summary em { color: var(--pp-blue); font-weight: 600; font-style: normal; }
.gm .pp .pp-bz__fu { font-weight: 700; color: var(--ink); background: var(--pp-pale); border-radius: 6px; padding: 2px 8px; }
.gm .pp .pp-bz__note.is-due .pp-bz__fu { background: #FDECC8; color: #7A4B00; }
.pp-bz__who { font-weight: 600; color: var(--ink); }
.pp-bz__ntxt { flex: 1 1 220px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-bz__note[open] .pp-bz__ntxt { white-space: normal; }
.pp-bz__note > form { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0 4px; padding: 16px; background: #FAF9F5; border: 1px solid #EEEAE1; border-radius: 12px; }
.pp-bz__note > form .fld { margin: 0; }
.pp-bz__note textarea.field { min-height: 0; resize: vertical; }
@media (min-width: 768px) { .pp-bz__note > form { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .pp-bz__nwide { grid-column: 1 / -1; } }
.gm .pp a.pp-fu { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 14px 18px; text-decoration: none; color: var(--ink); background: #FFF8E8; border-color: #F0DDAE; }
.gm .pp a.pp-fu strong { font-size: 22px; font-weight: 800; font-stretch: 112%; color: #7A4B00; }
.gm .pp .pp-main a.pp-fu:not(.btn):not(.chip) span { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.gm .pp a.pp-fu em { margin-left: auto; font-style: normal; font-weight: 600; font-size: 14.5px; color: var(--pp-blue); }
.gm .pp a.pp-fu.is-active { background: var(--pp-pale); border-color: var(--pp-blue); }

/* ===== PORTAL LANGUAGES (update 101): longer words than English must not break the fixed pieces ===== */
.gm .pp .pp-hero a.pp-bbhero > span { white-space: nowrap; }

/* ===== BASE PRICE (update 105): the type of space gives the price; it is the first line of what the client gets ===== */
.pp-np__base { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid #E8E4DA; border-radius: 12px; background: #FAF9F5; }
.pp-np__base > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp-np__base strong { font-size: 17px; line-height: 1.3; }
.pp-np__base small { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.pp-np__base b { font-size: 24px; font-weight: 800; font-stretch: 112%; white-space: nowrap; color: var(--ink-2); }
.gm .pp .pp-np__base.is-on { background: var(--pp-pale); border-color: #C9D3F7; }
.gm .pp .pp-np__base.is-on b { color: var(--pp-blue); }
@media (min-width: 900px) { .gm .pp-table--base .pp-tr--head, .gm .pp-table--base .pp-tr { grid-template-columns: 2.6fr 1fr 1fr; } }

/* ===== SHOOTING DAY (update 108): the checklist of the day, made for a phone held in one hand ===== */
.pp-shoot { display: flex; flex-direction: column; gap: 16px; }
.pp-shoot__head { display: flex; align-items: flex-start; gap: 12px; }
.pp-shoot__head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-shoot__count { font-size: 13.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; padding-top: 4px; }
.gm .pp .pp-shoot__sec.is-done .pp-shoot__count { color: #18794E; }
.gm .pp .pp-shoot__sec.is-done .pp-pb__n { background: #18794E; }
.pp-sdlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pp-sdlist label { display: flex; align-items: flex-start; gap: 14px; min-height: 48px; padding: 12px 0; border-top: 1px solid #EEEAE1; cursor: pointer; font-size: 16px; line-height: 1.45; }
.pp-sdlist li:first-child label { border-top: 0; }
.pp-sdlist input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--pp-blue); }
.gm .pp .pp-sdlist input:checked + span { color: var(--ink-2); text-decoration: line-through; }
.pp-shoot__more > summary { cursor: pointer; font-weight: 600; color: var(--pp-blue); padding: 6px 0; list-style-position: inside; }
.pp-shoot__more[open] > summary { margin-bottom: 12px; }
.gm .pp a.pp-shootlink { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; text-decoration: none; color: var(--ink); background: var(--pp-pale); border-color: #C9D3F7; }
.gm .pp a.pp-shootlink span { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 260px; }
.gm .pp a.pp-shootlink strong { font-size: 18px; color: var(--ink); }
.gm .pp a.pp-shootlink small { font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.gm .pp a.pp-shootlink em { font-style: normal; font-weight: 700; color: var(--pp-blue); white-space: nowrap; }
.pp-cams--notes li { display: flex; flex-direction: column; gap: 2px; }
.pp-cams--notes small { font-size: 14px; line-height: 1.4; color: var(--ink-2); font-weight: 400; }
/* ===== PRICES (update 108): base prices as tiles, the extras beside them on a computer ===== */
.pp-prices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.pp-bases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pp-base { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid #E8E4DA; border-radius: 12px; background: #fff; min-width: 0; }
.pp-base__n { font-size: 14.5px; line-height: 1.3; font-weight: 600; color: var(--ink); min-height: 2.6em; }
.gm .pp .pp-base strong { font-size: 24px; font-weight: 800; font-stretch: 112%; line-height: 1.1; color: var(--pp-blue); }
.gm .pp .pp-base small { font-size: 13.5px; color: var(--ink-2); }
.gm .pp .pp-base--quote { background: #FAF9F5; }
.gm .pp .pp-base strong.pp-base__q { font-size: 15px; font-stretch: 100%; font-weight: 700; color: var(--ink-2); line-height: 1.35; }
.pp-xneed { display: block; font-size: 13px; color: var(--ink-2); font-weight: 400; }
@media (min-width: 768px) { .pp-bases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pp-prices { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); } .pp-prices__x { position: sticky; top: 24px; } }

/* ===== CAMERA NOTES (update 109): a camera with its note is a light card with dark text, not a navy pill ===== */
.gm .pp .pp-cams--notes { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.gm .pp .pp-cams--notes li { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 12px; background: #FAF9F5; border: 1px solid #E8E4DA; color: var(--ink); font-weight: 400; }
.gm .pp .pp-cams--notes li > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gm .pp .pp-cams--notes strong { font-size: 16.5px; font-weight: 700; color: var(--ink); }
.gm .pp .pp-cams--notes small { font-size: 15px; line-height: 1.45; font-weight: 400; color: var(--ink); }
.gm .pp .pp-cams--notes figure { margin: 0; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gm .pp .pp-cams--notes figcaption { font-size: 12.5px; line-height: 1.2; color: var(--ink-2); text-align: center; max-width: 84px; }
.pp-sdcard { display: block; width: 58px; height: auto; }

/* ===== PARTNER AUDIT A (update 110): shooting day on a project, own prospects, ready to shoot ===== */
.pp-shootbox__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 18px; }
.pp-shootbox__head > div { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pp-shootbox__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0; }
.pp-shootbox__form .fld { margin: 0; flex: 0 1 220px; }
.gm .pp .pp-shootbox { background: var(--pp-pale); border-color: #C9D3F7; }
.pp-bzadd > summary { display: flex; flex-direction: column; gap: 3px; cursor: pointer; list-style: none; }
.pp-bzadd > summary::-webkit-details-marker { display: none; }
.gm .pp .pp-bzadd > summary span { font-weight: 700; font-size: 16px; color: var(--pp-blue); }
.gm .pp .pp-bzadd > summary small { font-size: 14.5px; color: var(--ink-2); font-weight: 400; }
.pp-bzadd[open] > summary { margin-bottom: 14px; }
.gm .pp .pp-bz__own { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 6px; background: #EEEAE1; color: var(--ink-2); font-size: 12.5px; font-weight: 600; vertical-align: middle; }
.pp-terr { margin: 0 0 4px; font-size: 15.5px; color: var(--ink); }
.gm .pp .pp-terr span { color: var(--ink-2); margin-left: 6px; }
.gm .pp .pp-card--off { opacity: .72; }
.gm .pp .pp-pill--warn { background: #FDECC8; color: #7A4B00; }
/* Guides & Tools with four cards: two by two on a computer, not three and one */
@media (min-width: 1100px) { .gm .pp .pp-kit.pp-kit--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Win clients: the brochure to leave with the client */
.gm .pp .pp-pitch__bro { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.gm .pp .pp-pitch__bro > span { font-size: 14.5px; color: #4A4F57; }
/* Payment in two halves: the advance on the project page, and the half named in the payouts list */
.gm .pp .pp-advbox { background: #EEF2FF; border-color: #D5DDFA; }
.gm .pp .pp-advbox .pp-text { margin: 0; }
.gm .pp .pp-advbox .pp-hint { margin: 6px 0 0; }
.gm .pp .pp-table--pay .pp-td--name small { display: block; font-weight: 400; font-size: 13px; color: #4A4F57; }
/* ===== WIN CLIENTS, TWO TABS (update 121): type drop-down on phones, the message on top, Get the meeting / In the meeting ===== */
.gm .pp .pp-pbsel { display: none; margin: 0; }
.gm .pp .pp-pbsel label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.gm .pp .pp-pbsel select { width: 100%; }
@media (max-width: 767px) { .gm .pp .pp-pbsel { display: block; } .gm .pp .pp-pb__types { display: none; } }
.gm .pp .pp-wtabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; background: #fff; border: 1px solid #E8E4DA; border-radius: 14px; }
.gm .pp-main a.pp-wtab:not(.btn):not(.chip) { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 10px; font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--ink); text-decoration: none; text-align: left; }
.gm .pp-main a.pp-wtab:not(.btn):not(.chip):hover { background: var(--pp-pale); color: var(--ink); }
.gm .pp .pp-wtab b { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #E8E4DA; color: var(--ink); font-size: 13px; font-weight: 800; }
.gm .pp-main a.pp-wtab.is-active:not(.btn):not(.chip), .gm .pp-main a.pp-wtab.is-active:not(.btn):not(.chip):hover { background: var(--pp-blue); color: #fff; }
.gm .pp .pp-wtab.is-active b { background: #fff; color: var(--pp-blue); }
.gm .pp [data-pp-wtp][hidden] { display: none !important; }
.gm .pp .pp-askfor .pp-text { margin: 0; font-size: 17px; font-weight: 600; }
.gm .pp .pp-steps3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1100px) { .gm .pp .pp-steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.gm .pp .pp-step3 { display: flex; flex-direction: column; gap: 12px; }
.gm .pp .pp-step3__head { display: flex; align-items: center; gap: 10px; }
.gm .pp .pp-step3__head .pp-h3 { margin: 0; }
.gm .pp .pp-step3 > p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.gm .pp .pp-step3__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.gm .pp .pp-say { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.gm .pp .pp-say li { position: relative; padding: 12px 14px 12px 42px; border-radius: 10px; background: #F4F1EA; font-size: 15.5px; line-height: 1.4; font-weight: 600; }
.gm .pp .pp-say li::before { content: "✓"; position: absolute; left: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: #18794E; color: #fff; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; }
.gm .pp .pp-know .pp-text { margin: 0; }
@media (max-width: 767px) { .gm .pp .pp-step3__acts .btn { width: 100%; justify-content: center; } }
/* ===== PRICELIST (update 122): a real price list. Both tables share three columns: what, the client's price, your half ===== */
.gm .pp .pp-pl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1200px) { .gm .pp .pp-pl { grid-template-columns: minmax(0, 1fr) 340px; } .gm .pp .pp-pl > .pp-plhow { grid-column: 2; grid-row: 1; position: sticky; top: 24px; } .gm .pp .pp-pl > .pp-stack { grid-column: 1; grid-row: 1; } }
.gm .pp .pp-plhow { display: flex; flex-direction: column; gap: 16px; padding: 24px 22px; }
.gm .pp .pp-plhow__eye { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #AFC0FF; }
.gm .pp .pp-plhow__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.gm .pp .pp-plhow__steps li { display: flex; align-items: center; gap: 12px; }
.gm .pp .pp-plhow__steps b { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 16px; font-weight: 800; }
.gm .pp .pp-plhow__steps span { display: flex; flex-direction: column; font-size: 14px; line-height: 1.35; color: #DCE3FA; }
.gm .pp .pp-plhow__steps strong { font-size: 17px; font-weight: 700; color: #fff; }
.gm .pp .pp-plhow__ex { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; background: rgba(255, 255, 255, .08); }
.gm .pp .pp-plhow__ex dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gm .pp .pp-plhow__ex dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14.5px; line-height: 1.35; color: #fff; }
.gm .pp .pp-plhow__ex dt { color: #DCE3FA; }
.gm .pp .pp-plhow__ex dd { margin: 0; font-weight: 700; white-space: nowrap; color: #fff; }
.gm .pp .pp-plhow__ex .pp-plhow__sum { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .22); }
.gm .pp .pp-plhow__ex .pp-plhow__sum dt { color: #fff; font-weight: 700; }
.gm .pp .pp-plhow__ex .pp-plhow__you { margin-top: 2px; padding: 12px 14px; border-radius: 10px; background: #fff; }
.gm .pp .pp-plhow__ex .pp-plhow__you dt { color: #15171A; font-weight: 700; }
.gm .pp .pp-plhow__ex .pp-plhow__you dd { color: #18794E; font-size: 20px; font-weight: 800; }
.gm .pp .pp-plt { display: flex; flex-direction: column; margin-top: 4px; }
.gm .pp .pp-plt__h, .gm .pp .pp-plt__r { display: grid; grid-template-columns: minmax(0, 1fr) 130px 110px; align-items: center; gap: 12px; padding: 0 12px; }
.gm .pp .pp-plt__h { padding-bottom: 8px; border-bottom: 2px solid #15171A; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.gm .pp .pp-plt__h span + span, .gm .pp .pp-plt__r > strong, .gm .pp .pp-plt__half { text-align: right; }
.gm .pp .pp-plt__r { min-height: 52px; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid #E8E4DA; }
.gm .pp-main a.pp-plt__r:not(.btn):not(.chip) { color: var(--ink); text-decoration: none; }
.gm .pp-main a.pp-plt__r:not(.btn):not(.chip):hover { background: var(--pp-pale); color: var(--ink); }
.gm .pp .pp-plt__r:last-child { border-bottom: 0; }
.gm .pp .pp-plt__n { font-size: 16px; font-weight: 600; line-height: 1.3; }
.gm .pp .pp-plt__n small { display: block; font-size: 13.5px; font-weight: 400; color: var(--ink-2); }
.gm .pp .pp-plt__r > strong { font-size: 18px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.gm .pp .pp-plt__half { font-size: 16px; font-weight: 700; color: #18794E; white-space: nowrap; }
.gm .pp .pp-plt__r--q em { grid-column: 2 / -1; text-align: right; font-style: normal; font-size: 14.5px; color: var(--ink-2); }
.gm .pp .pp-plinc { margin-top: 14px; }
.gm .pp .pp-plincl { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 24px; font-size: 15px; }
.gm .pp .pp-plincl li { position: relative; padding: 3px 0 3px 22px; break-inside: avoid; }
.gm .pp .pp-plincl li::before { content: "✓"; position: absolute; left: 0; color: #18794E; font-weight: 800; }
.gm .pp .pp-plnote { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 599px) {
  .gm .pp .pp-plt__h { display: none; }
  .gm .pp .pp-plt__r { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding-left: 0; padding-right: 0; }
  .gm .pp .pp-plt__n { grid-row: 1 / span 2; }
  .gm .pp .pp-plt__half::before { content: attr(data-l) " "; font-weight: 400; font-size: 13px; color: var(--ink-2); }
  .gm .pp .pp-plt__r--q em { grid-column: 2; }
  .gm .pp .pp-plincl { columns: 1; }
}
/* ===== MENU THAT SHRINKS (update 123): on a computer the dark menu can be reduced to its icons; .pp--mini is on the shell ===== */
.gm .pp .pp-tog, .gm .pp .pp-mini { display: none; }
.gm .pp .pp-nav__sep { border: 0; border-top: 1px solid rgba(255, 255, 255, .14); margin: 8px 6px; width: auto; }
.gm .pp-tip { position: fixed; z-index: 60; transform: translateY(-50%); padding: 7px 12px; border-radius: 8px; background: #fff; color: #15171A; font: 600 14px/1.2 var(--font); white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, .28); pointer-events: none; }
@media (min-width: 1100px) {
  .gm .pp .pp-side__top { display: flex; align-items: center; justify-content: space-between; }
  /* twelve items: a little tighter, and on a low screen the menu scrolls instead of squeezing its top */
  .gm .pp .pp-side__top { flex: none; }
  .gm .pp .pp-nav { flex: 1 0 auto; gap: 2px; }
  .gm .pp .pp-nav a { min-height: 42px; padding-top: 8px; padding-bottom: 8px; }
  .gm .pp .pp-nav__sep { margin-top: 6px; margin-bottom: 6px; }
  .gm .pp .pp-tog { display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px; background: transparent; color: #fff; cursor: pointer; }
  .gm .pp .pp-tog:hover { background: rgba(255, 255, 255, .08); }
  .gm .pp.pp--mini { grid-template-columns: 76px minmax(0, 1fr); }
  .gm .pp.pp--mini .pp-side { padding: 18px 12px 20px; }
  .gm .pp.pp--mini .pp-side__top { flex-direction: column; gap: 14px; padding: 6px 0 16px; }
  .gm .pp.pp--mini .pp-side .logo__svg { height: 12px; }
  .gm .pp.pp--mini .pp-tog__a { transform: scaleX(-1); transform-origin: 15px 12px; }
  .gm .pp.pp--mini .pp-nav a { justify-content: center; gap: 0; padding: 10px 0; position: relative; }
  .gm .pp.pp--mini .pp-nav__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gm .pp.pp--mini .pp-nav__new { position: absolute; top: 4px; right: 6px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 11px; }
  .gm .pp.pp--mini .pp-nav__sep { width: 36px; margin: 8px auto; }
  .gm .pp.pp--mini .pp-who { display: none; }
  .gm .pp.pp--mini .pp-mini { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); }
  .gm .pp .pp-mini__id { display: flex; flex-direction: column; align-items: center; line-height: 0; }
  .gm .pp .pp-mini__flag { display: block; width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 1px #AEB6C0, 0 0 0 2.2px #26303C; position: relative; z-index: 1; }
  .gm .pp .pp-mini__tier { display: block; width: 40px; height: 40px; margin-top: -4px; position: relative; z-index: 2; }
  .gm .pp .pp-mini__tier svg { display: block; width: 100%; height: 100%; }
  .gm .pp .pp-mini form { margin: 0; }
  .gm .pp .pp-mini button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: none; color: #C3C6CC; cursor: pointer; }
  .gm .pp .pp-mini button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
}
/* ===== DASHBOARD IN THREE SECTIONS (update 126): menu, middle (where my work stands), right column (what I do next and what I gain). Dashboard only. ===== */
.gm .pp .pp-dash { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.gm .pp .pp-dash__mid, .gm .pp .pp-dash__rail { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.gm .pp .pp-dash__rail { gap: 16px; }
.gm .pp .pp-railh { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.gm .pp-main a.pp-bbrail:not(.btn):not(.chip) { display: none; }
@media (min-width: 1200px) {
  .gm .pp .pp-dash { grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; }
  /* the gold box lives in the right column here, so the welcome band keeps only the button, at its right end */
  .gm .pp .pp-dash .pp-hero a.pp-bbhero { display: none; }
  .gm .pp .pp-dash .pp-hero > .pp-add { margin-left: auto; margin-right: 0; left: 0; }
  .gm .pp .pp-dash a.pp-collect { display: none; }
  .gm .pp-main a.pp-bbrail:not(.btn):not(.chip) { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: #C9A24A; border-color: #C9A24A; color: #15171A; text-decoration: none; }
  .gm .pp-main a.pp-bbrail:not(.btn):not(.chip):hover { background: #D9B560; border-color: #D9B560; color: #15171A; }
  .gm .pp .pp-bbrail .pp-railh { color: #15171A; }
  .gm .pp .pp-bbrail strong { font-size: 36px; font-weight: 800; font-stretch: 112%; line-height: 1; }
  .gm .pp .pp-bbrail small { font-size: 14px; line-height: 1.4; color: #2A2208; }
  .gm .pp .pp-dash__rail .pp-card { padding: 18px 20px; }
  .gm .pp .pp-dash__rail .pp-next .pp-h2, .gm .pp .pp-dash__rail .pp-progress .pp-h2 { font-size: 17px; }
  .gm .pp .pp-dash__rail a.pp-nextrw { grid-template-columns: minmax(0, 1fr); }
  .gm .pp .pp-dash__rail a.pp-nextrw .pp-nextrw__t { font-size: 15px; line-height: 1.45; font-weight: 400; }
  .gm .pp .pp-dash__rail a.pp-nextrw strong { font-size: 20px; }
  .gm .pp .pp-dash__rail .pp-todo span { font-size: 14px; }
  .gm .pp .pp-dash__rail .pp-card__head { flex-wrap: wrap; gap: 8px; }
  /* five shields in a narrow column: the names would overlap, so only the drawings show (the heading above names the next tier) */
  .gm .pp .pp-dash__rail .pp-tierstrip { display: flex; justify-content: space-between; gap: 2px; width: 100%; max-width: none; padding: 0; margin: 4px 0 0; } /* the full width of the card, so the five shields sit evenly */
  .gm .pp .pp-dash__rail .pp-tierstrip li::before { display: none; }
  .gm .pp .pp-dash__rail .pp-tierstrip li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
  .gm .pp .pp-dash__rail .pp-tierstrip li strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gm .pp .pp-dash__rail .pp-tierstrip .pp-tierb, .gm .pp .pp-dash__rail .pp-tierstrip .pp-tierb svg { width: 46px; height: 46px; }
  .gm .pp .pp-dash__mid .pp-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}
/* Your path: six stages, only the current one open */
.gm .pp .pp-path .pp-card__head { margin-bottom: 4px; }
.gm .pp .pp-path__now { flex: none; padding: 5px 10px; border-radius: 6px; background: var(--pp-pale); color: #2943AA; font-size: 13px; font-weight: 700; white-space: nowrap; }
.gm .pp .pp-stage { border-top: 1px solid #EEEAE1; }
.gm .pp .pp-stage summary { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 12px 0; cursor: pointer; list-style: none; }
.gm .pp .pp-stage summary::-webkit-details-marker { display: none; }
.gm .pp .pp-stage__n { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #F1EFE9; color: var(--ink-2); font-size: 14px; font-weight: 800; }
.gm .pp .pp-stage.is-now .pp-stage__n { background: var(--pp-blue); color: #fff; }
.gm .pp .pp-stage.is-done .pp-stage__n { background: #18794E; color: #fff; }
.gm .pp .pp-stage__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gm .pp .pp-stage__t strong { font-size: 17px; line-height: 1.25; font-weight: 600; color: var(--ink-2); }
.gm .pp .pp-stage.is-now .pp-stage__t strong { font-weight: 700; color: var(--ink); }
.gm .pp .pp-stage__t small { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.gm .pp .pp-stage__chev { flex: none; width: 9px; height: 9px; margin: 0 8px 4px 0; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); }
.gm .pp .pp-stage[open] > summary .pp-stage__chev { margin-bottom: -4px; transform: rotate(-135deg); }
.gm .pp .pp-stage ol { margin: 0 0 14px 46px; padding: 0; list-style: none; border: 1px solid #E8E4DA; border-radius: 12px; overflow: hidden; }
.gm .pp .pp-stage ol li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 8px 14px; border-top: 1px solid #EEEAE1; background: #fff; font-size: 15.5px; }
.gm .pp .pp-stage ol li:first-child { border-top: 0; }
.gm .pp .pp-stage ol .pp-dot { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 1.5px solid #D5D6D1; border-radius: 50%; background: #fff; color: #fff; font-size: 12px; font-weight: 800; }
.gm .pp .pp-stage ol .is-done .pp-dot { background: #18794E; border-color: #18794E; }
.gm .pp .pp-stage ol .is-wait .pp-dot { border-style: dashed; }
.gm .pp .pp-stage ol .is-done .pp-stage__lbl { flex: 1; color: var(--ink-2); }
.gm .pp-main .pp-stage a.pp-stage__link:not(.btn):not(.chip) { flex: 1; min-width: 0; color: var(--ink); font-weight: 600; text-decoration: none; }
.gm .pp .pp-stage a.pp-stage__link::after { content: ""; position: absolute; inset: 0; }
.gm .pp .pp-stage ol li:hover a.pp-stage__link { text-decoration: underline; }
.gm .pp .pp-stage ol .is-wait .pp-start__tag { background: transparent; border: 1px dashed #B9BCC2; }
.gm .pp-main .pp-stage ol .is-wait a.pp-stage__link:not(.btn):not(.chip) { color: var(--ink-2); }
.gm .pp .pp-path__note { margin: 12px 0 0; padding: 14px 16px; border-radius: 10px; background: var(--pp-pale); font-size: 15px; line-height: 1.5; }
@media (max-width: 559px) { .gm .pp .pp-stage ol { margin-left: 0; } .gm .pp .pp-stage ol li { flex-wrap: wrap; row-gap: 4px; } .gm .pp .pp-stage ol .pp-start__tag { margin-left: 34px; white-space: normal; } .gm .pp-main .pp-stage a.pp-stage__link:not(.btn):not(.chip) { flex: 1 1 calc(100% - 34px); } }
/* the price-feedback card */
.gm .pp .pp-pricefb__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gm .pp .pp-pricefb__head .pp-h2 { margin: 0; }
.gm .pp .pp-pricefb__amt { flex: none; font-size: 22px; font-weight: 800; color: #18794E; white-space: nowrap; }
.gm .pp .pp-pricefb .pp-text { margin: 8px 0 0; }
.gm .pp .pp-pricefb__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.gm .pp .pp-pricefb__thanks { margin: 0; font-size: 15px; }
.gm .pp .pp-pricefb--sm .pp-h2 { font-size: 17px; } .gm .pp .pp-pricefb--sm .pp-pricefb__amt { font-size: 18px; } .gm .pp .pp-pricefb--sm .pp-text { font-size: 14.5px; }
/* fill your bonus box today */
.gm .pp .pp-fill { display: flex; flex-direction: column; gap: 0; }
.gm .pp .pp-fill .pp-railh { margin-bottom: 8px; }
.gm .pp-main a.pp-fill__r:not(.btn):not(.chip) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #EEEAE1; color: var(--ink); text-decoration: none; font-size: 14.5px; line-height: 1.35; }
.gm .pp-main .pp-fill .pp-railh + a.pp-fill__r:not(.btn):not(.chip) { border-top: 0; padding-top: 2px; }
.gm .pp-main a.pp-fill__r:not(.btn):not(.chip):hover span { text-decoration: underline; }
.gm .pp .pp-fill__r b { flex: none; font-size: 16px; font-weight: 800; color: #18794E; white-space: nowrap; }
.gm .pp-main a.pp-fill__more:not(.btn):not(.chip) { margin-top: 8px; font-size: 14px; font-weight: 700; text-decoration: none; }
/* what you can earn */
.gm .pp .pp-calc { display: flex; flex-direction: column; gap: 10px; }
.gm .pp .pp-calc__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14.5px; }
.gm .pp .pp-calc__pick { display: flex; gap: 4px; }
.gm .pp .pp-calc__pick button { min-height: 34px; padding: 4px 9px; border: 1px solid #E8E4DA; border-radius: 6px; background: #fff; color: var(--ink-2); font: 700 13px/1 var(--font); cursor: pointer; }
.gm .pp .pp-calc__pick button.is-on { background: var(--pp-pale); border-color: var(--pp-blue); color: var(--pp-blue); }
.gm .pp .pp-calc__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid #EEEAE1; font-size: 14.5px; font-weight: 700; }
.gm .pp .pp-calc__sum strong { font-size: 24px; font-weight: 800; color: #18794E; }
/* Dashboard: the right column follows the scroll (update 127). Taller than the window, it sticks by its bottom edge (the script for .pp-sticky). */
@media (min-width: 1200px) { .gm .pp .pp-dash__rail.pp-sticky { position: sticky; top: 24px; max-height: none; overflow: visible; gap: 16px; } }
@media (max-width: 1199px) { .gm .pp .pp-dash__rail.pp-sticky { position: static; max-height: none; overflow: visible; } }
/* ===== REWARDS PACKAGE (update 128): the five questions, the locked camera row, the price line on the Pricelist ===== */
.gm .pp .pp-quiz fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; }
.gm .pp .pp-quiz legend { padding: 0; margin-bottom: 6px; font-size: 16px; font-weight: 700; line-height: 1.35; }
.gm .pp .pp-quiz__a { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid #E8E4DA; border-radius: 10px; background: #fff; font-size: 15.5px; line-height: 1.4; cursor: pointer; }
.gm .pp .pp-quiz__a input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--pp-blue); }
.gm .pp .pp-quiz__a:has(input:checked) { border-color: var(--pp-blue); background: var(--pp-pale); }
.gm .pp .pp-cam--locked .pp-cam__parts { opacity: .45; }
.gm .pp .pp-cam--locked .pp-pill { background: #F1EFE9; color: #4A4F57; }
.gm .pp .pp-plnote--fb { padding: 14px 16px; border-radius: 10px; background: var(--pp-pale); color: var(--ink); }
/* ===== THREE SECTIONS EVERYWHERE (update 129): wherever a page has a right side it has the Dashboard's proportions:
   the middle and a 330 px right column that follows the scroll. Explanations and status on the right, the work in the middle. ===== */
.gm .pp .pp-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.gm .pp .pp-split__mid, .gm .pp .pp-split__rail { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.gm .pp .pp-split__rail { gap: 16px; }
@media (max-width: 1199px) { .gm .pp .pp-split__rail.pp-sticky { position: static; max-height: none; overflow: visible; } }
@media (min-width: 1200px) {
  .gm .pp .pp-split, .gm .pp .pp-cols, .gm .pp .pp-cols.pp-cols--form, .gm .pp .pp-np, .gm .pp .pp-pl, .gm .pp .pp-ask { grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; }
  .gm .pp .pp-split__rail.pp-sticky { position: sticky; top: 24px; max-height: none; overflow: visible; }
  .gm .pp .pp-split__rail .pp-card { padding: 18px 20px; }
  .gm .pp .pp-split__rail .pp-h2 { font-size: 17px; }
  .gm .pp .pp-ask__side.pp-sticky { position: sticky; top: 24px; max-height: none; overflow: visible; }
  /* Payouts: the three steps one under the other */
  .gm .pp .pp-split__rail .pp-payhow__steps { display: flex; flex-direction: column; gap: 14px; }
  .gm .pp .pp-split__rail .pp-payhow__steps p { font-size: 14px; }
  /* Earn rewards: the bonus box and what was collected, one under the other; the camera's five parts stay in one row */
  .gm .pp .pp-split__rail .pp-earnbar { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .gm .pp .pp-split__rail > .pp-collectrule { margin: 0; padding: 14px 18px; border: 1px solid #E8E4DA; border-radius: 12px; background: #fff; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
  .gm .pp .pp-split__rail .pp-cam__parts { gap: 4px; }
  .gm .pp .pp-split__rail .pp-cam__parts li { padding: 8px 2px; }
  .gm .pp .pp-split__rail .pp-cam__parts strong { font-size: 13px; }
  .gm .pp .pp-split__rail .pp-cam .pp-card__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* Brand kit: 'Posted?' and the rules for the name */
  .gm .pp .pp-split__rail .pp-bk__cta { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 20px; }
  .gm .pp .pp-split__rail .pp-bk__cta .pp-killer__line { font-size: 17px; }
  .gm .pp .pp-split__rail .pp-bk__cta .btn { width: 100%; justify-content: center; }
  .gm .pp .pp-split__rail .pp-bk__dd { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
/* Tier and badges: the ladder on the right, one tier under the other, each folded (the partner's own tier is open) */
.gm .pp .pp-tiercard { display: flex; flex-direction: column; gap: 12px; }
.gm .pp .pp-tierfold { display: flex; flex-direction: column; }
.gm .pp .pp-tierrow { border-top: 1px solid #EEEAE1; }
.gm .pp .pp-tierrow:first-child { border-top: 0; }
.gm .pp .pp-tierrow > summary { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px 0; cursor: pointer; list-style: none; }
.gm .pp .pp-tierrow > summary::-webkit-details-marker { display: none; }
.gm .pp .pp-tierrow > summary .pp-tierb { flex: none; display: block; width: 42px; height: 42px; line-height: 0; }
.gm .pp .pp-tierrow > summary .pp-tierb svg, .gm .pp .pp-tierrow > summary .pp-tierb .pp-tierb__art { width: 42px; height: 42px; }
.gm .pp .pp-tierrow__n { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.gm .pp .pp-tierrow__n strong { font-size: 15.5px; line-height: 1.25; }
.gm .pp .pp-tierrow[open] > summary .pp-stage__chev { margin-bottom: -4px; transform: rotate(-135deg); }
.gm .pp .pp-tierrow .pp-perks { margin: 0 0 12px 54px; padding: 0; list-style: none; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
@media (min-width: 1200px) { .gm .pp-view--rewards .pp-split__mid .pp-ifrow summary .pp-ifs__get, .gm .pp-view--rewards .pp-split__mid .pp-ifs__get { width: 290px; flex-wrap: wrap; row-gap: 2px; } }
.gm .pp .pp-tierrow .pp-perks li { margin: 2px 0; }
@media (min-width: 1200px) { .gm .pp .pp-sticky--profile .pp-bdgs--mine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 6px; } .gm .pp .pp-sticky--profile .pp-bdgs--mine .pp-bdg { width: auto; } .gm .pp .pp-sticky--profile .pp-bdgs--mine .pp-bdg__art, .gm .pp .pp-sticky--profile .pp-bdgs--mine .pp-tierb__art { width: 60px; height: 60px; } }
/* Earn rewards: what is inside the bonus box, line by line (update 130) */
.gm .pp .pp-bbwhy { display: flex; flex-direction: column; gap: 10px; }
.gm .pp .pp-bbwhy__l { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.gm .pp .pp-bbwhy__l li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #EEEAE1; font-size: 14.5px; line-height: 1.35; }
.gm .pp .pp-bbwhy__l li:first-child { border-top: 0; padding-top: 0; }
.gm .pp .pp-bbwhy__l strong { flex: none; font-weight: 800; white-space: nowrap; }
.gm .pp .pp-bbwhy__l small { display: block; font-size: 13px; color: #8A5A00; }
.gm .pp .pp-bbwhy__l .pp-bbwhy__sum { margin-top: 2px; border-top: 2px solid var(--ink); font-weight: 700; }
.gm .pp .pp-bbwhy__l .pp-bbwhy__sum strong { font-size: 18px; color: #7A5C12; }
.gm .pp .pp-bbwhy__l--wait li { color: var(--ink-2); }
.gm .pp .pp-bbwhy__h2 { margin-top: 8px; }
.gm .pp .pp-bbwhy .pp-hint { margin: 0; }
/* Earn rewards, right column: the gold box, what is inside it, what was collected, the rule, the camera (update 130) */
.gm .pp .pp-split__rail .pp-earnbar { display: contents; }
.gm .pp .pp-split__rail .pp-earnbar > div:first-child { order: 1; }
.gm .pp .pp-split__rail .pp-bbwhy { order: 2; }
.gm .pp .pp-split__rail .pp-earnbar > div + div { order: 3; }
.gm .pp .pp-split__rail > .pp-collectrule { order: 4; }
.gm .pp .pp-split__rail .pp-cam { order: 5; }
/* Earn rewards: the bonus box in the look of the project's Bonus box (update 131) */
.gm .pp .pp-split__rail .pp-bonus--earn { order: 0; }
.gm .pp .pp-bonus--earn .pp-bonus__total strong { white-space: nowrap; }
.gm .pp .pp-bonus__sub { margin: 10px 0 0; padding-top: 14px; border-top: 1px solid rgba(122, 92, 18, .25); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #5C4610; }
.gm .pp .pp-bonus__rows--wait li { opacity: .8; }
.gm .pp .pp-bonus__rows--wait li strong { color: var(--ink-2); }
.gm .pp .pp-earnbar--one { grid-template-columns: minmax(0, 1fr); }
/* Dashboard (update 135): the button of 'Your progress' sits under the shields; the gold line in the middle is gone (the bonus box is in the top bar / welcome band / right column) */
.gm .pp .pp-progress > .pp-h2 { margin: 0 0 14px; }
.gm .pp .pp-progress .pp-progress__more { display: flex; justify-content: center; margin-top: 16px; }
.gm .pp a.pp-collect { display: none; }
/* ===== NOTIFICATIONS (update 136): the bell beside the logo / in the top bar, and the list it opens ===== */
.gm .pp .pp-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border: 1.5px solid var(--dark-line); border-radius: 8px; color: var(--on-dark); text-decoration: none; }
.gm .pp .pp-bell:hover, .gm .pp .pp-bell[aria-current="page"] { background: rgba(255, 255, 255, .1); color: #fff; }
.gm .pp .pp-bell__n { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #E0A526; color: #1B1403; font-size: 12px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 1099px) {
  .gm .pp .pp-side__top { gap: 8px; }
}
@media (max-width: 419px) { .gm .pp .pp-menu span { display: none; } .gm .pp .pp-menu { padding: 8px 11px; } }
@media (max-width: 379px) { .gm .pp .pp-bbpill span { display: none; } }
@media (min-width: 1100px) {
  .gm .pp .pp-bell { width: 36px; height: 36px; margin-left: auto; border-width: 1px; border-color: rgba(255, 255, 255, .22); color: #fff; }
  .gm .pp .pp-side__top { gap: 8px; }
  .gm .pp.pp--mini .pp-bell { margin-left: 0; }
}
.gm .pp .pp-ntc { max-width: 860px; }
.gm .pp .pp-ntc__list { list-style: none; margin: 0; padding: 0; }
.gm .pp .pp-ntc__i { display: flex; flex-direction: column; gap: 5px; padding: 16px 0 16px 16px; border-top: 1px solid #EEEAE1; border-left: 3px solid transparent; margin-left: -16px; }
.gm .pp .pp-ntc__i:first-child { border-top: 0; padding-top: 4px; }
.gm .pp .pp-ntc__i:last-child { padding-bottom: 4px; }
.gm .pp .pp-ntc__i.is-new { border-left-color: #3454D1; }
.gm .pp .pp-ntc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: #4A4F57; }
.gm .pp .pp-ntc__tag { padding: 2px 8px; border-radius: 6px; background: #EEF2FF; color: #2943AA; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.gm .pp .pp-ntc__t { font-size: 17px; line-height: 1.3; color: var(--ink); }
.gm .pp .pp-ntc__i.is-new .pp-ntc__t { font-weight: 800; }
.gm .pp .pp-ntc__b { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.gm .pp .pp-ntc__go { align-self: flex-start; font-size: 15px; font-weight: 700; }
/* Camera reimbursement card (update 137): the 'Unlocks with your first deal' tag sits under the text at every width, never squeezed beside it */
.gm .pp .pp-cam .pp-card__head { flex-direction: column; align-items: flex-start; gap: 10px; }
.gm .pp .pp-cam .pp-card__head > * { min-width: 0; max-width: 100%; }
/* Messages (update 138): the count on a tab */
.gm .pp .pp-tabs .pp-tabs__n { margin-left: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #E0A526; color: #1B1403; font-size: 12px; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
/* ===== PROFORMA READY CARD (update 139): two figures, two numbered steps with pills of ONE size, one quiet line ===== */
.gm .pp .pp-deal { display: flex; flex-direction: column; gap: 0; }
.gm .pp .pp-deal__money { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 22px; }
.gm .pp .pp-deal__money > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gm .pp .pp-deal__you .pp-big { color: #F2D27A; }
.gm .pp .pp-deal__you small { font-size: 14.5px; line-height: 1.4; color: #DCE1F2; }
.gm .pp .pp-deal__step { display: flex; gap: 14px; align-items: flex-start; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.gm .pp .pp-deal__step > div { flex: 1; min-width: 0; }
.gm .pp .pp-deal__n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.gm .pp .pp-deal__step h3 { margin: 3px 0 12px; font-size: 18px; font-weight: 700; line-height: 1.3; color: #fff; }
.gm .pp .pp-deal__step .pp-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 250px)); gap: 10px; margin: 0; }
.gm .pp .pp-deal__step .pp-actions form { margin: 0; display: block; }
.gm .pp .pp-deal__step .pp-actions .btn { width: 100%; min-height: 46px; justify-content: center; text-align: center; font-size: 15.5px; padding: 8px 14px; }
.gm .pp .pp-deal__more { margin: 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 15px; line-height: 1.5; color: #DCE1F2; }
.gm .pp-main .pp-deal .pp-deal__more a:not(.btn):not(.chip) { color: #fff; font-weight: 700; text-decoration: underline; }
@media (max-width: 640px) {
  .gm .pp .pp-deal__money { grid-template-columns: 1fr; gap: 16px; }
  .gm .pp .pp-deal__step .pp-actions { grid-template-columns: minmax(0, 1fr); }
}
/* Dashboard price card (update 140): on phones and tablets its two buttons always share one row */
@media (max-width: 1199px) {
  .gm .pp .pp-pricefb__acts { flex-wrap: nowrap; }
  .gm .pp .pp-pricefb__acts .btn { flex: 1 1 auto; width: auto; min-width: 0; justify-content: center; white-space: nowrap; padding-left: 8px; padding-right: 8px; font-size: clamp(12px, 3.5vw, 15px); }
}
/* ===== CONTROL ROOM (update 141): GM360's own side, in the portal's clothes. Everything is under .pp--ctl ===== */
.gm .pp--ctl .ctl-tag { margin-left: auto; padding: 4px 9px; border-radius: 6px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.gm .pp--ctl.pp--mini .ctl-tag { display: none; }
.gm .pp--ctl .ctl-who { display: flex; flex-direction: column; gap: 4px; }
.gm .pp--ctl .ctl-who__link { color: #C3C6CC; font-size: 14px; }
.gm .pp--ctl .ctl-msg { margin-bottom: 4px; word-break: break-word; }
.gm .pp--ctl .ctl-msg.notice--err { background: #FCEBEA; border-color: #E9B8B4; }
.gm .pp--ctl .ctl-msg p { margin: 0; font-weight: 600; }
.gm .pp--ctl .ctl-n { flex: none; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: #EEEAE1; color: #4A4F57; font-size: 13.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.gm .pp--ctl .ctl-n.is-on { background: #3454D1; color: #fff; }
.gm .pp--ctl .ctl-tabn { margin-left: 6px; font-weight: 800; }
/* Today */
.gm .pp--ctl .ctl-today { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 900px) { .gm .pp--ctl .ctl-today { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .gm .pp--ctl .ctl-today { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gm .pp--ctl .ctl-group { display: flex; flex-direction: column; gap: 10px; }
.gm .pp--ctl .ctl-group.is-hot { border-color: #C9D2F5; background: #F7F8FF; }
.gm .pp--ctl .ctl-group.is-soft .ctl-n.is-on { background: #EEEAE1; color: #15171A; }
.gm .pp--ctl .ctl-group__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gm .pp--ctl .ctl-rows { list-style: none; margin: 0; padding: 0; }
.gm .pp--ctl .ctl-rows li { border-top: 1px solid #EEEAE1; }
.gm .pp-main.ctl-main .ctl-rows a:not(.btn):not(.chip) { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; color: var(--ink); text-decoration: none; }
.gm .pp--ctl .ctl-rows a span { font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.gm .pp--ctl .ctl-rows a:hover strong { text-decoration: underline; }
.gm .pp--ctl .ctl-all { align-self: flex-start; font-size: 15px; font-weight: 700; }
/* Partners */
.gm .pp--ctl .ctl-search { max-width: 520px; }
.gm .pp--ctl .ctl-people, .gm .pp--ctl .ctl-apps { display: flex; flex-direction: column; gap: 12px; }
.gm .pp--ctl .ctl-cp { padding: 0; }
.gm .pp--ctl .ctl-cp.is-off { opacity: .72; }
.gm .pp--ctl .ctl-cp > summary, .gm .pp--ctl .ctl-add > summary { display: flex; align-items: center; gap: 14px; padding: 14px 20px; cursor: pointer; list-style: none; }
.gm .pp--ctl .ctl-cp > summary::-webkit-details-marker, .gm .pp--ctl .ctl-add > summary::-webkit-details-marker { display: none; }
.gm .pp--ctl .ctl-cp > summary .pp-av, .gm .pp--ctl .ctl-cp > summary img { flex: none; width: 46px; height: 46px; border-radius: 50%; font-size: 15px; }
.gm .pp--ctl .ctl-cp__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gm .pp--ctl .ctl-cp__id strong { font-size: 17px; line-height: 1.25; }
.gm .pp--ctl .ctl-cp__id span { font-size: 14.5px; color: var(--ink-2); }
.gm .pp--ctl .ctl-cp__tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.gm .pp--ctl .ctl-tagx { padding: 3px 8px; border-radius: 6px; background: #EEEAE1; color: #15171A; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.gm .pp--ctl .ctl-tagx.is-hot { background: #3454D1; color: #fff; }
.gm .pp--ctl .ctl-tagx.is-off { background: #FCEBEA; color: #8A1F17; }
.gm .pp--ctl details[open] > summary .pp-stage__chev { transform: rotate(-135deg); margin-bottom: -4px; }
.gm .pp--ctl .ctl-cp__body { display: flex; flex-direction: column; gap: 18px; padding: 4px 20px 20px; border-top: 1px solid #EEEAE1; }
.gm .pp--ctl .ctl-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 24px; margin: 16px 0 0; }
.gm .pp--ctl .ctl-facts div { min-width: 0; }
.gm .pp--ctl .ctl-facts dt { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6B7079; }
.gm .pp--ctl .ctl-facts dd { margin: 2px 0 0; font-size: 15.5px; overflow-wrap: anywhere; }
.gm .pp--ctl .ctl-sw { display: flex; flex-direction: column; border: 1px solid #EEEAE1; border-radius: 10px; }
.gm .pp--ctl .ctl-sw__r { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 8px 18px; align-items: center; padding: 12px 16px; border-top: 1px solid #EEEAE1; }
.gm .pp--ctl .ctl-sw__r:first-child { border-top: 0; }
.gm .pp--ctl .ctl-sw__l { font-size: 15px; font-weight: 700; }
.gm .pp--ctl .ctl-f { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.gm .pp--ctl .ctl-f .field { width: auto; min-width: 0; flex: 0 1 200px; min-height: 40px; padding: 6px 10px; }
.gm .pp--ctl .ctl-ck { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; margin-right: 8px; }
.gm .pp--ctl .ctl-cp__acts, .gm .pp--ctl .ctl-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gm .pp--ctl .ctl-danger { color: #8A1F17; border-color: #E9B8B4; }
.gm .pp--ctl .ctl-add { padding: 0; }
.gm .pp--ctl .ctl-add > summary { justify-content: space-between; }
.gm .pp--ctl .ctl-add > form { padding: 0 20px 20px; }
.gm .pp--ctl .ctl-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; }
.gm .pp--ctl .ctl-lead { max-width: 820px; }
.gm .pp--ctl .ctl-app { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 16px 20px; }
.gm .pp--ctl .ctl-app__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.gm .pp--ctl .ctl-app__id strong { font-size: 17px; }
.gm .pp--ctl .ctl-app__meta { color: var(--ink-2); font-size: 14px; }
.gm .pp--ctl .ctl-app__do { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
/* Inbox */
.gm .pp--ctl .ctl-inbox { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 1100px) { .gm .pp--ctl .ctl-inbox { grid-template-columns: 340px minmax(0, 1fr); } .gm .pp--ctl .ctl-threads { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; } }
@media (max-width: 1099px) { .gm .pp--ctl .ctl-inbox.has-open .ctl-threads { order: 2; } }
.gm .pp--ctl .ctl-threads { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.gm .pp-main.ctl-main .ctl-threads a.ctl-thread:not(.btn):not(.chip) { display: flex; flex-direction: column; gap: 2px; padding: 11px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.gm .pp--ctl .ctl-thread strong { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15.5px; }
.gm .pp--ctl .ctl-thread__about { font-size: 13.5px; font-weight: 700; color: #4A4F57; }
.gm .pp--ctl .ctl-thread__last { font-size: 14px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm .pp--ctl .ctl-thread:hover { background: #F7F5F0; }
.gm .pp--ctl .ctl-thread.is-open { background: #EEF2FF; }
.gm .pp--ctl .ctl-thread.is-new .ctl-thread__last { color: var(--ink); font-weight: 700; }
.gm .pp--ctl .ctl-thread .ctl-n { min-width: 22px; height: 22px; font-size: 12.5px; }
.gm .pp--ctl .ctl-talk { display: flex; flex-direction: column; gap: 16px; }
.gm .pp--ctl .ctl-talk__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; padding-bottom: 14px; border-bottom: 1px solid #EEEAE1; }
.gm .pp--ctl .ctl-talk__head .pp-hint { margin: 2px 0 0; }
.gm .pp--ctl .ctl-adopt { margin: 0; }
.gm .pp--ctl .ctl-adopt button { padding: 0; border: 0; background: none; color: #2943AA; font: 600 13.5px/1.3 var(--font); text-decoration: underline; cursor: pointer; }
.gm .pp--ctl .ctl-adopted { font-size: 13.5px; font-weight: 700; color: #1A7F37; }
.gm .pp--ctl .ctl-reply { border-top: 1px solid #EEEAE1; padding-top: 16px; }
/* Prices by city */
.gm .pp--ctl .ctl-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0; }
.gm .pp--ctl .ctl-pick .fld { flex: 0 1 320px; margin: 0; }
.gm .pp--ctl .ctl-cities { margin-top: 14px; }
.gm .pp--ctl .ctl-prices { display: flex; flex-direction: column; gap: 14px; }
.gm .pp--ctl .ctl-prices__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.gm .pp--ctl .ctl-factor { flex: 0 0 230px; margin: 0; }
.gm .pp--ctl .ctl-ptable { display: flex; flex-direction: column; }
.gm .pp--ctl .ctl-ptable__h, .gm .pp--ctl .ctl-ptable__r { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid #EEEAE1; }
.gm .pp--ctl .ctl-ptable__h { border-top: 0; border-bottom: 2px solid #15171A; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.gm .pp--ctl .ctl-ptable__h span:not(:first-child), .gm .pp--ctl .ctl-ptable__r > :not(:first-child) { text-align: right; }
.gm .pp--ctl .ctl-ptable__n { font-weight: 700; }
.gm .pp--ctl .ctl-ptable__n small { display: block; font-weight: 400; font-size: 13.5px; color: var(--ink-2); }
.gm .pp--ctl .ctl-ptable .field { width: 100%; max-width: 130px; min-height: 40px; padding: 6px 10px; text-align: right; }
@media (max-width: 760px) {
  .gm .pp--ctl .ctl-sw__r { grid-template-columns: minmax(0, 1fr); }
  .gm .pp--ctl .ctl-cp > summary { flex-wrap: wrap; padding: 14px 16px; }
  .gm .pp--ctl .ctl-cp__tags { justify-content: flex-start; width: 100%; order: 3; }
  .gm .pp--ctl .ctl-cp__body { padding: 4px 16px 16px; }
  .gm .pp--ctl .ctl-f .field { flex: 1 1 140px; }
  .gm .pp--ctl .ctl-app__do .btn, .gm .pp--ctl .ctl-cp__acts .btn, .gm .pp--ctl .ctl-cp__acts form { width: 100%; }
  .gm .pp--ctl .ctl-cp__acts .btn { justify-content: center; }
  .gm .pp--ctl .ctl-ptable__h { display: none; }
  .gm .pp--ctl .ctl-ptable__r { grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 0; }
  .gm .pp--ctl .ctl-ptable__n { grid-column: 1 / -1; }
  .gm .pp--ctl .ctl-ptable__r > :not(:first-child) { text-align: left; }
  .gm .pp--ctl .ctl-ptable__r > [data-l]::before { content: attr(data-l); display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6B7079; }
  .gm .pp--ctl .ctl-ptable .field { text-align: left; }
}
/* A WordPress screen shown here as it is: its own classes, dressed like the portal */
.gm .pp--ctl .ctl-wp { font-size: 15.5px; line-height: 1.5; color: var(--ink); overflow-wrap: break-word; }
.gm .pp--ctl .ctl-wp--page { display: block; }
.gm .pp--ctl .ctl-wp .wrap { max-width: none; width: auto; margin: 0; padding: 0; }
.gm .pp--ctl .ctl-wp h1 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 40px); font-weight: 800; font-stretch: 112%; line-height: 1.1; }
.gm .pp--ctl .ctl-wp h2 { margin: 22px 0 8px; font-size: 20px; font-weight: 700; }
.gm .pp--ctl .ctl-wp h3 { margin: 16px 0 6px; font-size: 17px; font-weight: 700; }
.gm .pp--ctl .ctl-wp p { margin: 8px 0; }
.gm .pp--ctl .ctl-wp .description { font-size: 14px; color: var(--ink-2); font-style: normal; }
.gm .pp--ctl .ctl-wp code { padding: 1px 5px; border-radius: 4px; background: #EEEAE1; font-size: 13.5px; }
.gm .pp--ctl .ctl-wp input[type="text"], .gm .pp--ctl .ctl-wp input[type="email"], .gm .pp--ctl .ctl-wp input[type="url"], .gm .pp--ctl .ctl-wp input[type="number"], .gm .pp--ctl .ctl-wp input[type="date"], .gm .pp--ctl .ctl-wp input[type="search"], .gm .pp--ctl .ctl-wp input[type="file"], .gm .pp--ctl .ctl-wp select, .gm .pp--ctl .ctl-wp textarea { max-width: 100%; min-height: 40px; padding: 7px 10px; border: 1px solid #C9CCD2; border-radius: 8px; background: #fff; color: var(--ink); font: 400 15.5px/1.4 var(--font); }
.gm .pp--ctl .ctl-wp textarea, .gm .pp--ctl .ctl-wp .large-text { width: 100%; }
.gm .pp--ctl .ctl-wp .regular-text { width: 340px; }
.gm .pp--ctl .ctl-wp .button, .gm .pp-main.ctl-main .ctl-wp a.button:not(.btn):not(.chip) { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px 16px; border: 1.5px solid #3454D1; border-radius: 999px; background: #fff; color: #2943AA; font: 700 14.5px/1.2 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.gm .pp--ctl .ctl-wp .button.button-primary, .gm .pp-main.ctl-main .ctl-wp a.button.button-primary:not(.btn):not(.chip) { background: #3454D1; color: #fff; }
.gm .pp--ctl .ctl-wp .button.button-small { min-height: 34px; padding: 4px 12px; font-size: 13.5px; }
.gm .pp--ctl .ctl-wp .button-link { padding: 0; border: 0; background: none; color: #2943AA; font: 600 14.5px/1.3 var(--font); text-decoration: underline; cursor: pointer; }
.gm .pp--ctl .ctl-wp table { border-collapse: collapse; }
.gm .pp--ctl .ctl-wp table.widefat { width: 100%; max-width: none !important; background: #fff; border: 1px solid #E8E4DA; border-radius: 10px; }
.gm .pp--ctl .ctl-wp table.widefat th, .gm .pp--ctl .ctl-wp table.widefat td { padding: 10px 12px; border-top: 1px solid #EEEAE1; text-align: left; vertical-align: top; font-size: 14.5px; }
.gm .pp--ctl .ctl-wp table.widefat thead th { border-top: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.gm .pp--ctl .ctl-wp table.form-table th { text-align: left; vertical-align: top; font-weight: 700; }
.gm .pp--ctl .ctl-wp .notice { display: block; margin: 12px 0; padding: 12px 16px; border-radius: 10px; }
.gm .pp--ctl .ctl-wp .notice p { margin: 0; }
.gm .pp--ctl .ctl-wp .notice-info { background: #EEF2FF; border: 1px solid #C9D2F5; }
.gm .pp--ctl .ctl-wp .notice-warning { background: #FFF4E5; border: 1px solid #F0CFA0; }
.gm .pp--ctl .ctl-wp .notice-success { background: #E7F1EA; border: 1px solid #B9D6C4; }
.gm .pp--ctl .ctl-wp .notice-error { background: #FCEBEA; border: 1px solid #E9B8B4; }
.gm .pp--ctl .ctl-wp .subsubsub { display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none; margin: 10px 0; padding: 0; font-size: 14.5px; }
.gm .pp--ctl .ctl-wp .subsubsub .current { font-weight: 800; color: var(--ink); text-decoration: none; }
.gm .pp--ctl .ctl-wp .awaiting-mod { padding: 1px 7px; border-radius: 999px; background: #3454D1; color: #fff; font-size: 12px; font-weight: 800; }
.gm .pp--ctl .ctl-wp--cell form { margin: 4px 0 !important; }
@media (max-width: 900px) {
  .gm .pp--ctl .ctl-wp--page { overflow-x: auto; }
  .gm .pp--ctl .ctl-wp table.widefat { display: block; overflow-x: auto; }
  .gm .pp--ctl .ctl-wp div[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .gm .pp--ctl .ctl-wp .regular-text { width: 100%; }
}
/* ===== CONTROL ROOM, THE WORK PAGES (update 142): Projects, Payouts, Rewards, Business lists ===== */
.gm .pp--ctl .ctl-list { display: flex; flex-direction: column; gap: 10px; }
.gm .pp-main.ctl-main a.ctl-row:not(.btn):not(.chip) { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 20px; color: var(--ink); text-decoration: none; text-align: left; }
.gm .pp--ctl .ctl-row:hover { border-color: #C9D2F5; }
.gm .pp--ctl .ctl-row.is-hot { border-left: 4px solid #3454D1; }
.gm .pp--ctl .ctl-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gm .pp--ctl .ctl-row__main strong { font-size: 17px; line-height: 1.25; }
.gm .pp--ctl .ctl-row__main span { font-size: 14.5px; color: var(--ink-2); }
.gm .pp--ctl .ctl-row__main .ctl-row__hint { color: var(--ink); font-weight: 600; }
.gm .pp--ctl .ctl-row.is-hot .ctl-row__hint { color: #2943AA; }
.gm .pp--ctl .ctl-row__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.gm .pp--ctl .ctl-row__side strong { font-size: 17px; }
.gm .pp--ctl .ctl-stf { flex-wrap: wrap; }
/* one project */
.gm .pp--ctl .ctl-pj { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.gm .pp--ctl .ctl-pj__next { order: -1; display: flex; flex-direction: column; gap: 10px; }
.gm .pp--ctl .ctl-pj__what { margin: 0; font-size: 18px; line-height: 1.45; font-weight: 600; color: #fff; }
.gm .pp--ctl .ctl-pj__note { margin: 0; font-size: 14.5px; color: #DCE1F2; }
.gm .pp--ctl .ctl-pj__next .pp-actions { margin: 4px 0 0; }
.gm .pp--ctl .ctl-pj__fields { display: flex; flex-direction: column; gap: 14px; }
.gm .pp--ctl .ctl-pj__fields .fld { margin: 0; }
.gm .pp--ctl .ctl-fold { border-top: 1px solid #EEEAE1; padding-top: 12px; }
.gm .pp--ctl .ctl-fold > summary { cursor: pointer; font-size: 15px; font-weight: 700; color: #2943AA; }
.gm .pp--ctl .ctl-fold[open] > summary { margin-bottom: 14px; }
.gm .pp--ctl .ctl-fold .fld { margin-top: 10px; }
.gm .pp--ctl .ctl-box { padding: 12px 16px; border-radius: 10px; font-size: 15.5px; }
.gm .pp--ctl .ctl-box p { margin: 6px 0; }
.gm .pp--ctl .ctl-box--warn { background: #FFF4E5; border: 1px solid #F0CFA0; }
.gm .pp--ctl .ctl-box--info { background: #EEF2FF; border-color: #C9D2F5; }
.gm .pp--ctl .ctl-lines { margin: 0; }
.gm .pp--ctl .ctl-lines div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid #EEEAE1; font-size: 15.5px; }
.gm .pp--ctl .ctl-lines div:first-child { border-top: 0; }
.gm .pp--ctl .ctl-lines dd { margin: 0; white-space: nowrap; }
.gm .pp--ctl .ctl-lines .is-sum { font-weight: 800; border-top: 2px solid #15171A; }
.gm .pp--ctl .ctl-ol { margin: 4px 0 0 20px; padding: 0; font-size: 15px; }
.gm .pp--ctl .ctl-files { list-style: none; margin: 0; padding: 0; }
.gm .pp--ctl .ctl-files li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 9px 0; border-top: 1px solid #EEEAE1; font-size: 15px; }
.gm .pp--ctl .ctl-files li:first-child { border-top: 0; }
.gm .pp--ctl .ctl-files li > span:first-child { color: var(--ink-2); }
.gm .pp--ctl .ctl-files small { flex-basis: 100%; text-align: right; font-size: 13px; color: var(--ink-2); }
.gm .pp--ctl .ctl-files em { color: #6B7079; font-style: normal; }
.gm .pp--ctl .ctl-files form { margin: 0; }
/* payouts */
.gm .pp--ctl .ctl-pay { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 14px 24px; align-items: center; }
.gm .pp--ctl .ctl-pay__who, .gm .pp--ctl .ctl-pay__bank { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; font-size: 15px; }
.gm .pp--ctl .ctl-pay__who strong { font-size: 17px; }
.gm .pp--ctl .ctl-pay__bank code { padding: 2px 6px; border-radius: 4px; background: #F1EEE6; font-size: 15px; letter-spacing: .02em; }
.gm .pp--ctl .ctl-warn { color: #8A1F17; font-weight: 700; }
.gm .pp--ctl .ctl-pay__do { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin: 0; }
.gm .pp--ctl .ctl-pay__amt { font-size: 26px; font-weight: 800; line-height: 1; }
/* rewards */
.gm .pp--ctl .ctl-rw { display: flex; flex-direction: column; gap: 12px; }
.gm .pp--ctl .ctl-rw.is-hot { border-left: 4px solid #3454D1; }
.gm .pp--ctl .ctl-rw__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.gm .pp--ctl .ctl-rw__head div { display: flex; flex-direction: column; gap: 2px; }
.gm .pp--ctl .ctl-rw__head strong { font-size: 17px; }
.gm .pp--ctl .ctl-rw__head span { font-size: 14.5px; color: var(--ink-2); }
.gm .pp--ctl .ctl-rw__head .ctl-tagx { color: #15171A; }
.gm .pp--ctl .ctl-rw__head .ctl-tagx.is-hot { color: #fff; }
.gm .pp--ctl .ctl-rw__body { font-size: 15.5px; line-height: 1.5; overflow-wrap: anywhere; }
.gm .pp--ctl .ctl-rw__body p { margin: 0 0 6px; }
.gm .pp--ctl .ctl-rw__body:empty { display: none; }
.gm .pp--ctl .ctl-rw__do { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid #EEEAE1; }
.gm .pp--ctl .ctl-rw__do .field { width: auto; min-height: 40px; padding: 6px 10px; }
.gm .pp--ctl .ctl-rw__amt { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.gm .pp--ctl .ctl-rw__amt .field { width: 92px; }
.gm .pp--ctl .ctl-rw__note { flex: 1 1 260px; }
/* business lists */
.gm .pp--ctl .ctl-city { display: flex; flex-direction: column; gap: 12px; }
.gm .pp--ctl .ctl-city .ctl-acts { padding-top: 4px; }
.gm .pp--ctl .ctl-ptable--biz .ctl-ptable__h, .gm .pp--ctl .ctl-ptable--biz .ctl-ptable__r { grid-template-columns: minmax(0, 2fr) repeat(6, minmax(0, 1fr)); }
.gm .pp--ctl .ctl-admins .ctl-files { margin-bottom: 14px; }
@media (max-width: 760px) {
  .gm .pp-main.ctl-main a.ctl-row:not(.btn):not(.chip) { flex-direction: column; align-items: flex-start; padding: 14px 16px; }
  .gm .pp--ctl .ctl-row__side { flex-direction: row; align-items: center; gap: 12px; }
  .gm .pp--ctl .ctl-pay { grid-template-columns: minmax(0, 1fr); }
  .gm .pp--ctl .ctl-pay__do { flex-direction: row; align-items: center; justify-content: space-between; }
  .gm .pp--ctl .ctl-rw__do .btn { flex: 1 1 auto; justify-content: center; }
  .gm .pp--ctl .ctl-pj__next .pp-actions .btn { width: 100%; justify-content: center; }
  .gm .pp--ctl .ctl-ptable--biz .ctl-ptable__r { grid-template-columns: 1fr 1fr 1fr; }
}
.gm .pp-main.ctl-main .ctl-more a.pp-card:not(.btn):not(.chip) { color: var(--ink); text-decoration: none; }
.gm .pp--ctl .ctl-more a.pp-card:hover .pp-h2 { text-decoration: underline; }
.gm .pp--ctl .ctl-more .pp-text { color: var(--ink-2); }
/* ===== CONTROL ROOM, REBUILT (update 143): made for a computer first. One look on every page: left-aligned, tables that
   scroll instead of being cut, one main button per row. ===== */
.gm .pp--ctl .pp-main.ctl-main { max-width: 1480px; }
.gm .pp--ctl .pp-nav__new.is-quiet { background: rgba(255, 255, 255, .16); color: #fff; }
.gm .pp--ctl .ctl-tabs { margin-bottom: 4px; }
.gm .pp--ctl .pp-card { text-align: left; }
/* Today: four numbers */
.gm .pp--ctl .ctl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gm .pp-main.ctl-main a.ctl-stat:not(.btn):not(.chip) { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 20px; color: var(--ink); text-decoration: none; text-align: left; }
.gm .pp--ctl .ctl-stat span { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.gm .pp--ctl .ctl-stat strong { font-size: 34px; font-weight: 800; line-height: 1.1; font-stretch: 108%; }
.gm .pp--ctl .ctl-stat small { font-size: 13.5px; color: var(--ink-2); }
.gm .pp--ctl .ctl-stat:hover { border-color: #C9D2F5; }
.gm .pp--ctl .ctl-todo { display: flex; flex-direction: column; gap: 10px; }
.gm .pp--ctl .ctl-do { list-style: none; margin: 0; padding: 0; }
.gm .pp--ctl .ctl-do li { border-top: 1px solid #EEEAE1; }
.gm .pp--ctl .ctl-do li:first-child { border-top: 0; }
.gm .pp-main.ctl-main .ctl-do a:not(.btn):not(.chip) { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 4px; color: var(--ink); text-decoration: none; border-radius: 8px; }
.gm .pp-main.ctl-main .ctl-do--soft a:not(.btn):not(.chip) { grid-template-columns: minmax(0, 1fr) auto; }
.gm .pp--ctl .ctl-do a:hover { background: #F7F5F0; }
.gm .pp--ctl .ctl-do__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gm .pp--ctl .ctl-do__t strong { font-size: 16px; }
.gm .pp--ctl .ctl-do__t span { font-size: 14.5px; color: var(--ink-2); }
.gm .pp--ctl .ctl-do__go { color: #3454D1; font-weight: 700; padding-right: 6px; }
.gm .pp--ctl .ctl-kind { justify-self: start; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: #EEEAE1; color: #15171A; }
.gm .pp--ctl .ctl-kind--pay { background: #E3F2E8; color: #17603A; }
.gm .pp--ctl .ctl-kind--msg { background: #EEF2FF; color: #2943AA; }
.gm .pp--ctl .ctl-kind--pj { background: #FFF1DC; color: #7A4B00; }
.gm .pp--ctl .ctl-kind--rw { background: #F3E9FF; color: #5B2A9A; }
.gm .pp--ctl .ctl-mini { list-style: none; margin: 0 0 14px; padding: 0; }
.gm .pp--ctl .ctl-mini li { display: flex; flex-direction: column; gap: 1px; padding: 9px 0; border-top: 1px solid #EEEAE1; }
.gm .pp--ctl .ctl-mini li:first-child { border-top: 0; }
.gm .pp--ctl .ctl-mini strong { font-size: 15.5px; }
.gm .pp--ctl .ctl-mini span { font-size: 13.5px; color: var(--ink-2); }
.gm .pp--ctl .ctl-latest { display: flex; flex-direction: column; align-items: stretch; }
.gm .pp--ctl .ctl-latest .btn { align-self: flex-start; }
/* the bar above a list: search, filters, how many are shown */
.gm .pp--ctl .ctl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gm .pp--ctl .ctl-bar .field { width: auto; min-height: 42px; padding: 8px 12px; }
.gm .pp--ctl .ctl-bar__q { flex: 1 1 280px; max-width: 420px; }
.gm .pp--ctl .ctl-bar__n { margin-left: auto; font-size: 14.5px; color: var(--ink-2); }
.gm .pp--ctl .ctl-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 18px; background: #FFF8E6; border-color: #E8D59E; }
/* a list in columns: every row opens */
.gm .pp--ctl .ctl-tbl { padding: 0; overflow: hidden; }
.gm .pp--ctl .ctl-tbl__scroll { overflow-x: auto; }
.gm .pp--ctl .ctl-tbl__h, .gm .pp--ctl .ctl-tr > summary { display: grid; gap: 14px; align-items: center; padding: 12px 20px; min-width: 1040px; }
.gm .pp--ctl .ctl-tbl--apps .ctl-tbl__h, .gm .pp--ctl .ctl-tbl--apps .ctl-tr > summary { grid-template-columns: minmax(230px, 2.2fr) minmax(130px, 1.2fr) 76px 132px minmax(100px, 1fr) minmax(90px, .9fr) 96px 128px; }
.gm .pp--ctl .ctl-tbl__h { background: #F7F5F0; border-bottom: 1px solid #E8E4DA; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #4A4F57; }
.gm .pp--ctl .ctl-tr { border-top: 1px solid #EEEAE1; }
.gm .pp--ctl .ctl-tbl__h + .ctl-tr { border-top: 0; }
.gm .pp--ctl .ctl-tr > summary { cursor: pointer; list-style: none; font-size: 15px; }
.gm .pp--ctl .ctl-tr > summary::-webkit-details-marker { display: none; }
.gm .pp--ctl .ctl-tr > summary:hover { background: #FBFAF7; }
.gm .pp--ctl .ctl-tr[open] > summary { background: #F3F5FF; }
.gm .pp--ctl .ctl-td { min-width: 0; overflow-wrap: anywhere; }
.gm .pp--ctl .ctl-td strong { font-size: 16px; }
.gm .pp--ctl .ctl-td small { display: block; font-size: 13.5px; color: var(--ink-2); }
.gm .pp--ctl .ctl-td--act { text-align: right; }
.gm .pp--ctl .ctl-open { pointer-events: none; white-space: nowrap; }
.gm .pp--ctl .ctl-tr[open] .ctl-open { background: #fff; color: #2943AA; border-color: #3454D1; }
.gm .pp--ctl .ctl-dot { display: inline-flex; align-items: center; gap: 7px; }
.gm .pp--ctl .ctl-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #C9CCD2; flex: none; }
.gm .pp--ctl .ctl-dot.is-ok::before { background: #1A7F37; }
.gm .pp--ctl .ctl-tr__panel { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 18px; background: #F3F5FF; border-top: 1px solid #DDE3FA; }
.gm .pp--ctl .ctl-make { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 12px 24px; align-items: end; margin: 0; }
.gm .pp--ctl .ctl-make__f { display: flex; flex-direction: column; gap: 5px; }
.gm .pp--ctl .ctl-make__f label { font-size: 14px; font-weight: 700; }
.gm .pp--ctl .ctl-make__f small { font-size: 13px; color: var(--ink-2); }
.gm .pp--ctl .ctl-make__f .field { min-height: 42px; padding: 8px 12px; }
.gm .pp--ctl .ctl-make__cam { align-self: center; margin: 0; padding-top: 22px; }
.gm .pp--ctl .ctl-make__go { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.gm .pp--ctl .ctl-make .pp-hint { grid-column: 1 / -1; margin: 0; }
.gm .pp--ctl .ctl-tr__more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding-top: 10px; border-top: 1px solid #DDE3FA; font-size: 14.5px; }
.gm .pp--ctl .ctl-tr__more form { margin: 0 0 0 auto; }
.gm .pp--ctl .ctl-linkbtn { padding: 0; border: 0; background: none; font: 600 14.5px/1.3 var(--font); text-decoration: underline; cursor: pointer; }
/* partner cards: the facts of a partner in columns */
.gm .pp--ctl .ctl-cp__col { flex: 0 0 150px; display: flex; flex-direction: column; gap: 1px; font-size: 15px; }
.gm .pp--ctl .ctl-cp__col small { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6B7079; }
.gm .pp--ctl .ctl-cp__tags { flex: 0 0 auto; min-width: 20px; }
.gm .pp--ctl .ctl-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; margin-bottom: 12px; }
.gm .pp--ctl .ctl-add > form { display: flex; flex-direction: column; gap: 12px; }
/* settings and prices: short rows of label + amount, side by side */
.gm .pp--ctl .ctl-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.gm .pp--ctl .ctl-two--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gm .pp--ctl .ctl-two > .pp-card { display: flex; flex-direction: column; gap: 10px; }
.gm .pp--ctl .ctl-set { display: flex; flex-direction: column; }
.gm .pp--ctl .ctl-set__r { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px solid #EEEAE1; font-size: 15px; }
.gm .pp--ctl .ctl-set__r:first-child { border-top: 0; }
.gm .pp--ctl .ctl-set__r > span:first-child { min-width: 0; font-weight: 600; }
.gm .pp--ctl .ctl-set__r small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-2); }
.gm .pp--ctl .ctl-eur { flex: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink-2); }
.gm .pp--ctl .ctl-eur .field { width: 96px; min-height: 38px; padding: 6px 10px; text-align: right; font-weight: 700; color: var(--ink); }
.gm .pp--ctl .ctl-save { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; }
.gm .pp--ctl .ctl-prices .ctl-save { margin-top: 6px; }
.gm .pp--ctl .ctl-save .pp-hint { margin: 0; }
.gm .pp--ctl .ctl-how { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-radius: 10px; background: #EEF2FF; font-size: 14.5px; }
.gm .pp--ctl .ctl-how span { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.gm .pp--ctl .ctl-how b { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #3454D1; color: #fff; font-size: 12.5px; }
.gm .pp--ctl .ctl-how i { font-style: normal; color: #6B7079; }
.gm .pp--ctl .ctl-how em { margin-left: auto; font-style: normal; color: var(--ink-2); }
.gm .pp--ctl .ctl-ptable__r.is-set { background: #F3F5FF; box-shadow: -12px 0 0 #F3F5FF, 12px 0 0 #F3F5FF; }
.gm .pp--ctl .ctl-ptable--4 .ctl-ptable__h, .gm .pp--ctl .ctl-ptable--4 .ctl-ptable__r { grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(0, 1fr)); }
.gm .pp--ctl .ctl-prices__head { align-items: flex-start; }
.gm .pp--ctl .ctl-prices__head .pp-hint { margin: 4px 0 0; max-width: 720px; }
/* notices */
.gm .pp--ctl .ctl-notice { display: flex; flex-direction: column; gap: 14px; }
.gm .pp--ctl .ctl-who2 { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; }
.gm .pp--ctl .ctl-who2 legend { padding: 0; margin-bottom: 4px; font-size: 15px; font-weight: 700; }
.gm .pp--ctl .ctl-who2__r { display: grid; grid-template-columns: 20px 130px minmax(0, 320px); gap: 10px; align-items: center; min-height: 46px; padding: 2px 0; border-top: 1px solid #EEEAE1; font-size: 15.5px; }
.gm .pp--ctl .ctl-who2__r:first-of-type { border-top: 0; }
.gm .pp--ctl .ctl-who2__r .field { min-height: 38px; padding: 6px 10px; }
.gm .pp--ctl .ctl-lang { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid #EEEAE1; }
.gm .pp--ctl .ctl-lang .pp-h3 small { font-size: 13.5px; font-weight: 400; color: var(--ink-2); }
.gm .pp--ctl .ctl-lang .fld { margin: 0; }
.gm .pp--ctl .ctl-sent { list-style: none; margin: 0; padding: 0; }
.gm .pp--ctl .ctl-sent li { display: flex; flex-direction: column; gap: 1px; padding: 10px 0; border-top: 1px solid #EEEAE1; }
.gm .pp--ctl .ctl-sent li:first-child { border-top: 0; }
.gm .pp--ctl .ctl-sent span { font-size: 13.5px; color: var(--ink-2); }
.gm .pp--ctl .ctl-admins .pp-h3 { margin: 4px 0 0; }
.gm .pp--ctl .ctl-admins .form, .gm .pp--ctl #mypass .form { display: flex; flex-direction: column; gap: 12px; }
.gm .pp--ctl .ctl-admins .fld, .gm .pp--ctl #mypass .fld { margin: 0; }
@media (max-width: 1299px) { .gm .pp--ctl .ctl-two--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gm .pp--ctl .ctl-cp__col { flex-basis: 120px; } }
@media (max-width: 1099px) {
  .gm .pp--ctl .ctl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm .pp--ctl .ctl-two, .gm .pp--ctl .ctl-two--3 { grid-template-columns: minmax(0, 1fr); }
  .gm .pp--ctl .ctl-make { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .gm .pp--ctl .ctl-make__cam { padding-top: 0; }
  .gm .pp--ctl .ctl-make__go { justify-content: flex-start; }
  .gm .pp--ctl .ctl-cp__col { display: none; }
  .gm .pp--ctl .ctl-how em { margin-left: 0; flex-basis: 100%; }
  .gm .pp--ctl .ctl-grid3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* phone, for emergencies: the columns of a list become lines of one card */
  .gm .pp--ctl .ctl-tbl__h { display: none; }
  .gm .pp--ctl .ctl-tbl--apps .ctl-tr > summary { min-width: 0; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 14px 16px; }
  .gm .pp--ctl .ctl-td--main, .gm .pp--ctl .ctl-td--act { grid-column: 1 / -1; }
  .gm .pp--ctl .ctl-td--act { text-align: left; }
  .gm .pp--ctl .ctl-td[data-l]::before { content: attr(data-l); display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6B7079; }
  .gm .pp--ctl .ctl-tr__panel { padding: 14px 16px; }
  .gm .pp--ctl .ctl-tr__more form { margin-left: 0; }
  .gm .pp--ctl .ctl-make__go .btn { width: 100%; justify-content: center; }
  .gm .pp-main.ctl-main .ctl-do a:not(.btn):not(.chip) { grid-template-columns: minmax(0, 1fr) auto; }
  .gm .pp--ctl .ctl-kind { grid-column: 1 / -1; }
  .gm .pp--ctl .ctl-bar .field { flex: 1 1 100%; max-width: none; }
  .gm .pp--ctl .ctl-bar__n { margin-left: 0; }
  .gm .pp--ctl .ctl-who2__r { grid-template-columns: 20px minmax(0, 1fr); }
  .gm .pp--ctl .ctl-who2__r .field { grid-column: 2; }
}
@media (max-width: 520px) { .gm .pp--ctl .ctl-stats { grid-template-columns: minmax(0, 1fr); } }
/* ===== CALL WITH AN APPLICANT (update 144): the booking page on the public site, and the applicant's page in the Control room ===== */
.gm .bk { padding: clamp(36px, 6vw, 80px) 0; background: var(--base, #ECEDEA); min-height: 60vh; }
.gm .bk__wrap { max-width: 860px; }
.gm .bk__head { margin-bottom: 24px; }
.gm .bk__lead { margin-top: 12px; font-size: 18px; line-height: 1.55; color: var(--ink-2, #4A4F57); max-width: 640px; }
.gm .bk__card { background: #F8F8F6; border: 1px solid #D5D6D1; border-radius: 12px; padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.gm .bk__card p { margin: 0; }
.gm .bk__when { font-size: clamp(22px, 3vw, 30px); font-weight: 800; line-height: 1.2; }
.gm .bk__days { display: flex; flex-direction: column; gap: 18px; }
.gm .bk__day { margin: 0; padding: 0; border: 0; }
.gm .bk__day legend { padding: 0; margin-bottom: 8px; font-size: 16px; font-weight: 800; }
.gm .bk__slots { display: flex; flex-wrap: wrap; gap: 8px; }
.gm .bk__slot { position: relative; }
.gm .bk__slot input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gm .bk__slot span { display: inline-flex; align-items: center; justify-content: center; min-width: 84px; min-height: 44px; padding: 8px 14px; border: 1.5px solid #15171A; border-radius: 999px; background: #fff; font-size: 16px; font-weight: 700; }
.gm .bk__slot input:checked + span { background: #15171A; color: #F8F8F6; }
.gm .bk__slot input:focus-visible + span { outline: 3px solid #C9A24A; outline-offset: 2px; }
.gm .bk .err { color: #8A1F17; font-weight: 700; }
/* Control room */
.gm .pp--ctl .ctl-stage { display: inline-block; padding: 3px 9px; border-radius: 6px; background: #EEEAE1; color: #15171A; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.gm .pp--ctl .ctl-stage--invited { background: #FFF1DC; color: #7A4B00; }
.gm .pp--ctl .ctl-stage--booked { background: #EEF2FF; color: #2943AA; }
.gm .pp--ctl .ctl-stage--done { background: #E3F2E8; color: #17603A; }
.gm .pp--ctl .ctl-stage--later { background: #F1F1F1; color: #6B7079; }
.gm .pp--ctl .ctl-funnel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.gm .pp--ctl .ctl-funnel__s { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid #E8E4DA; border-radius: 10px; background: #fff; font-size: 14px; color: var(--ink-2); }
.gm .pp--ctl .ctl-funnel__s b { font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--ink); }
.gm .pp--ctl .ctl-tbl--apps .ctl-tbl__h, .gm .pp--ctl .ctl-tbl--apps .ctl-tr > summary, .gm .pp-main.ctl-main .ctl-tbl--apps a.ctl-tr--link:not(.btn):not(.chip) { grid-template-columns: minmax(230px, 2.2fr) minmax(130px, 1.2fr) 76px 132px minmax(90px, .9fr) 96px 150px 84px; }
.gm .pp-main.ctl-main a.ctl-tr--link:not(.btn):not(.chip) { display: grid; gap: 14px; align-items: center; padding: 12px 20px; min-width: 1040px; color: var(--ink); text-decoration: none; font-size: 15px; }
.gm .pp--ctl a.ctl-tr--link:hover { background: #FBFAF7; }
.gm .pp--ctl a.ctl-tr--link:hover .ctl-open { background: #3454D1; color: #fff; }
.gm .pp--ctl .ctl-step { display: flex; flex-direction: column; gap: 14px; }
.gm .pp--ctl .ctl-step__h { display: flex; gap: 14px; align-items: flex-start; }
.gm .pp--ctl .ctl-step__n { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #172554; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.gm .pp--ctl .ctl-step__h .pp-hint { margin: 3px 0 0; }
.gm .pp--ctl .ctl-step form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.gm .pp--ctl .ctl-step form.ctl-make { display: grid; }
.gm .pp--ctl .ctl-step .fld { margin: 0; }
.gm .pp--ctl .ctl-step code { padding: 2px 6px; border-radius: 4px; background: #F1EEE6; font-size: 13.5px; overflow-wrap: anywhere; }
.gm .pp--ctl .ctl-script { margin: 0; padding: 0; list-style: none; counter-reset: q; }
.gm .pp--ctl .ctl-script li { counter-increment: q; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px 20px; align-items: center; padding: 10px 0; border-top: 1px solid #EEEAE1; }
.gm .pp--ctl .ctl-script li:first-child { border-top: 0; }
.gm .pp--ctl .ctl-script__q { font-size: 15.5px; font-weight: 600; }
.gm .pp--ctl .ctl-script__q::before { content: counter(q) '. '; color: #6B7079; font-weight: 700; }
.gm .pp--ctl .ctl-script__a { display: flex; gap: 8px; }
.gm .pp--ctl .ctl-script__a .field { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 6px 10px; }
.gm .pp--ctl .ctl-script__say { padding: 10px 14px; border-radius: 8px; background: #F7F5F0; font-size: 15px; line-height: 1.45; }
.gm .pp--ctl .ctl-hours .ctl-set__r { justify-content: space-between; }
.gm .pp--ctl .ctl-hours__t { display: inline-flex; align-items: center; gap: 8px; }
.gm .pp--ctl .ctl-hours__t i { font-style: normal; color: var(--ink-2); }
.gm .pp--ctl .ctl-hours__t .field { width: 124px; min-height: 38px; padding: 6px 10px; }
.gm .pp-main.ctl-main .ctl-mini a:not(.btn):not(.chip) { display: flex; flex-direction: column; gap: 1px; color: var(--ink); text-decoration: none; }
.gm .pp--ctl .ctl-mini a:hover strong { text-decoration: underline; }
.gm .pp--ctl .ctl-ivw > summary { font-size: 15px; }
@media (max-width: 1099px) { .gm .pp--ctl .ctl-funnel { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gm .pp--ctl .ctl-script li { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .gm .pp-main.ctl-main .ctl-tbl--apps a.ctl-tr--link:not(.btn):not(.chip) { min-width: 0; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 14px 16px; }
  .gm .pp--ctl .ctl-funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm .pp--ctl .ctl-script__a { flex-direction: column; }
  .gm .pp--ctl .ctl-hours .ctl-set__r { flex-direction: column; align-items: flex-start; }
}
.gm .bk .eyebrow { color: #7A5C12; }
/* Deleted applicants (update 145) */
.gm .pp--ctl .ctl-row--trash { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 20px; }
.gm .pp--ctl .ctl-row--trash form { margin: 0; }
/* ===== BUSINESSES BY WHAT TO DO (update 146): four tabs, one line per business, "What happened?" inside ===== */
.gm .pp .pp-bztabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gm .pp-main a.pp-bztab:not(.btn):not(.chip) { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border: 1px solid #E8E4DA; border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; }
.gm .pp .pp-bztab strong { font-size: 26px; font-weight: 800; line-height: 1.1; }
.gm .pp .pp-bztab span { font-size: 15.5px; font-weight: 700; }
.gm .pp .pp-bztab small { font-size: 13px; color: var(--ink-2); }
.gm .pp-main a.pp-bztab.is-active:not(.btn):not(.chip) { border-color: #3454D1; background: #EEF2FF; box-shadow: inset 0 0 0 1px #3454D1; }
.gm .pp .pp-bztab.has-due strong { color: #B4540A; }
.gm .pp .pp-bzfive { display: flex; flex-direction: column; gap: 3px; padding: 14px 20px; border: 1px solid #C9D2F5; border-radius: 12px; background: #EEF2FF; }
.gm .pp .pp-bzfive strong { font-size: 17px; }
.gm .pp .pp-bzfive span { font-size: 14.5px; color: var(--ink-2); }
.gm .pp .pp-bzrest { margin: 12px 0 0; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #6B7079; }
.gm .pp .pp-bzlist { display: flex; flex-direction: column; gap: 10px; }
.gm .pp .pp-bzr { border: 1px solid #E8E4DA; border-radius: 12px; background: #fff; }
.gm .pp .pp-bzr[open] { border-color: #C9D2F5; }
.gm .pp .pp-bzr > summary { display: flex; align-items: center; gap: 14px; padding: 14px 20px; cursor: pointer; list-style: none; }
.gm .pp .pp-bzr > summary::-webkit-details-marker { display: none; }
.gm .pp .pp-bzr__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gm .pp .pp-bzr__id strong { font-size: 17px; line-height: 1.3; }
.gm .pp .pp-bzr__id > span { font-size: 14.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.gm .pp .pp-bzr__tag { flex: none; padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 800; white-space: nowrap; background: #EEEAE1; color: #15171A; }
.gm .pp .pp-bzr__tag--due { background: #FFF1DC; color: #7A4B00; }
.gm .pp .pp-bzr__tag--late { background: #FCEBEA; color: #8A1F17; }
.gm .pp .pp-bzr__tag--next { background: #EEF2FF; color: #2943AA; }
.gm .pp .pp-bzr__tag--ok { background: #E3F2E8; color: #17603A; }
.gm .pp .pp-bzr[open] > summary .pp-stage__chev { transform: rotate(-135deg); margin-bottom: -4px; }
.gm .pp .pp-bzr__body { display: flex; flex-direction: column; gap: 16px; padding: 16px 20px 20px; border-top: 1px solid #EEEAE1; }
.gm .pp .pp-bzw { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 16px 18px; border-radius: 10px; background: #F3F5FF; }
.gm .pp .pp-bzw__opts { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.gm .pp .pp-bzw__opts legend { padding: 0; margin-bottom: 10px; font-size: 16px; font-weight: 800; }
.gm .pp .pp-bzopt { position: relative; display: block; }
.gm .pp .pp-bzopt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.gm .pp .pp-bzopt > span { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 11px 13px; border: 1.5px solid #C9D2F5; border-radius: 10px; background: #fff; }
.gm .pp .pp-bzopt b { font-size: 15px; line-height: 1.25; }
.gm .pp .pp-bzopt small { font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.gm .pp .pp-bzopt input:checked + span { border-color: #3454D1; box-shadow: inset 0 0 0 1px #3454D1; background: #F8F9FF; }
.gm .pp .pp-bzopt input:focus-visible + span { outline: 3px solid #3454D1; outline-offset: 2px; }
.gm .pp .pp-bzw__more { display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 10px 12px; align-items: end; }
.gm .pp .pp-bzw__more .fld { margin: 0; }
.gm .pp .pp-bzw__more .field { min-height: 42px; padding: 8px 12px; }
.gm .pp .pp-bzw__more label { font-size: 14px; }
.gm .pp .pp-bzw__more [hidden] { display: none; }
.gm .pp .pp-bzr__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 14.5px; }
.gm .pp .pp-bzhist__h { margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #6B7079; }
.gm .pp .pp-bzhist ul { list-style: none; margin: 0; padding: 0; }
.gm .pp .pp-bzhist li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid #EEEAE1; font-size: 14.5px; line-height: 1.45; }
.gm .pp .pp-bzhist li:first-child { border-top: 0; }
.gm .pp .pp-bzhist time { color: #6B7079; }
@media (max-width: 1099px) {
  .gm .pp .pp-bzw__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm .pp .pp-bzw__more { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gm .pp .pp-bzw__note, .gm .pp .pp-bzw__go { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .gm .pp .pp-bztabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm .pp .pp-bzr > summary { flex-wrap: wrap; padding: 14px 16px; }
  .gm .pp .pp-bzr__id { flex-basis: calc(100% - 34px); }
  .gm .pp .pp-bzr__tag { order: 3; }
  .gm .pp .pp-bzr__body { padding: 14px 16px 16px; }
  .gm .pp .pp-bzw { padding: 14px; }
  .gm .pp .pp-bzw__more { grid-template-columns: minmax(0, 1fr); }
  .gm .pp .pp-bzw__go .btn { width: 100%; justify-content: center; }
}
/* Stat cards (update 147): the label, the number and the line under it sit on the same three lines in every card of a row,
   so a label that wraps never pushes its number lower than its neighbours' */
@supports (grid-template-rows: subgrid) {
  .gm .pp .pp-stats > .pp-stat { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 6px; align-content: start; }
  .gm .pp .pp-stats > .pp-stat > span:first-child { align-self: end; }
  .gm .pp .pp-stats > .pp-stat > strong { align-self: start; }
  .gm .pp .pp-stats > .pp-stat small { margin-top: 0; align-self: start; }
}
@media (min-width: 1200px) and (max-width: 1599px) { .gm .pp .pp-dash__mid .pp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* four cards would cut the amounts on a narrower computer screen */
/* Tier ladder (update 149): how a tier is reached, then what it gives. Text only: the shields are untouched. */
.gm .pp .pp-tierrow__how, .gm .pp .pp-tierrow__gives { margin: 0 0 8px 54px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.gm .pp .pp-tierrow__how b, .gm .pp .pp-tierrow__gives b { display: block; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #6B7079; }
.gm .pp .pp-tierrow__gives { margin-bottom: 2px; }
/* Calculator in the right column (update 154): the amount chips wrap instead of spilling out when a language writes longer amounts ('3.000 €'). */
.gm .pp .pp-calc .pp-calc__row { flex-wrap: wrap; row-gap: 6px; }
.gm .pp .pp-calc .pp-calc__pick { flex-wrap: nowrap; }
.gm .pp .pp-calc .pp-calc__pick button { white-space: nowrap; }