/* ============================================================
   PAYLAX · public + buyer + seller stylesheet
   Loaded AFTER escrow.css so it overrides the inherited chrome.
   Admin pages skip this file (they keep the dashboard styles).

   Design language (from PAYLAX reference screenshots):
   - Navy primary text (#000040), blue accent (#0073e5), green
     spark (#92e22b) — ring icon already uses these literals.
   - Light grey page background (#f7f7f7), white cards with thin
     border + subtle shadow, generous spacing.
   - Floating-label form fields (label inside field, animates up
     on focus/value).
   - Split-screen auth/wizard: navy panel left, white panel right.
   - Marketing pages: deep navy hero ribbon, vertical 4-step,
     protection cards, trust strip, white sticky nav.
   ============================================================ */

:root{
  --pl-navy:        #000040;   /* primary text + dark backgrounds */
  --pl-navy-2:      #1a2068;   /* hero gradient end */
  --pl-blue:        #0073e5;   /* CTA buttons, focus rings, brand accent */
  --pl-blue-soft:   #4d8be6;   /* hover */
  --pl-blue-text:   #0062c4;   /* blue for links/text on light bg — AA-safe (>=4.5:1 on white) */
  --pl-green:       #92e22b;   /* spark, success */
  --pl-bg:          #f7f7f7;   /* page bg */
  --pl-white:       #ffffff;
  --pl-line:        #e1e3ea;   /* field borders */
  --pl-line-strong: #c9ccd6;   /* hovered borders */
  --pl-text:        #2c2e4d;   /* body text */
  --pl-text-mute:   #6c7088;   /* helper / labels */
  --pl-text-faint:  #686d82;   /* faint text + placeholder — AA-safe (~5:1) at 11-12px on white */
  --pl-error:       #d32f2f;
  --pl-shadow-card: 0 6px 24px rgba(31, 41, 92, .08);

  /* layout + spacing tokens */
  --pl-gap-shell:   28px;   /* gap between sidebar / main / rail */
  --pl-gap-card:    18px;   /* vertical gap between stacked cards */
  --pl-pad-card:    32px;   /* default card padding */
  --pl-radius-card: 8px;    /* default card corner radius */
}

/* ============== RESET / TYPE ============== */
.pl, .pl *, .pl *::before, .pl *::after { box-sizing: border-box; }

body.pl-page{
  margin:0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size:15px; line-height:1.55;
  color:var(--pl-text);
  background:var(--pl-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.pl-page a{ color: var(--pl-blue-text); text-decoration:none; }
body.pl-page a:hover{ color: var(--pl-blue); text-decoration:underline; }
body.pl-page strong, body.pl-page b{ font-weight:700; }
body.pl-page h1, body.pl-page h2, body.pl-page h3, body.pl-page h4{
  margin:0 0 12px;
}
/* Default heading colour — applied as its own low-specificity rule so any
   component rule (.pl-hero h1, .pl-protect-card h3, .pl-statehead h1, ...)
   that sets a light colour on a dark background reliably wins. */
.pl h1, .pl h2, .pl h3, .pl h4{ color: var(--pl-navy); }

/* ============== PUBLIC NAV ============== */
.pl-nav{
  background:var(--pl-white);
  border-bottom:1px solid var(--pl-line);
  padding:18px 28px;
  position:sticky; top:0; z-index:50;
}
.pl-nav-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.pl-nav-logo img{ height:34px; width:auto; display:block; }
.pl-nav-links{ display:flex; gap:36px; align-items:center; }
.pl-nav-links a{
  color:var(--pl-navy); font-size:15px; font-weight:500;
  text-decoration:none; padding:6px 0; border-bottom:2px solid transparent;
  transition:border-color .15s, color .15s;
}
.pl-nav-links a:hover{ color:var(--pl-blue); border-color:var(--pl-blue); text-decoration:none; }
.pl-nav-cta{ display:flex; gap:14px; align-items:center; }
.pl-lang-form{ display:inline-flex; align-items:center; }
.pl-lang{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  color:var(--pl-text-mute); font-size:13px; font-weight:600;
  background:transparent
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%237b8499' d='M0 0l5 6 5-6z'/></svg>")
    right 4px center no-repeat;
  border:1px solid var(--pl-line); border-radius:4px;
  padding:4px 18px 4px 22px; cursor:pointer; font-family:inherit;
  background-position-x:calc(100% - 6px);
}
.pl-lang:hover{ border-color:var(--pl-blue); color:var(--pl-blue); }
.pl-lang-form{ position:relative; }
.pl-lang-form::before{
  content:"\1F310"; position:absolute; left:6px; top:50%;
  transform:translateY(-50%); font-size:13px; pointer-events:none; opacity:.7;
}
@media(max-width:760px){
  .pl-nav{ padding:12px 14px; }
  .pl-nav-links{ order:3; width:100%; gap:18px; font-size:13px; overflow-x:auto; padding-top:6px; }
  .pl-nav-logo img{ height:28px; }
}

/* Compact nav for auth/wizard pages — just the logo + lang + help icon */
.pl-nav.compact .pl-nav-inner{ justify-content:center; position:relative; }
.pl-nav.compact .pl-nav-cta{ position:absolute; right:0; top:50%; transform:translateY(-50%); }
.pl-nav-help{
  width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--pl-blue); border:2px solid currentColor;
  font-size:14px; font-weight:700;
}

/* ============== BUTTONS ============== */
.pl-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:inherit; font-size:14px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  height:46px; padding:0 28px; border-radius:6px;
  border:none; cursor:pointer;
  transition:background .15s, color .15s, box-shadow .15s, opacity .15s;
}
.pl-btn-primary{ background:var(--pl-blue); color:var(--pl-white); }
.pl-btn-primary:hover{ background:var(--pl-blue-soft); }
.pl-btn-primary:disabled,
.pl-btn-primary[disabled]{ background:#d8dae3; color:#fff; cursor:not-allowed; }
.pl-btn-text{
  background:transparent; color:var(--pl-blue);
  text-transform:uppercase; padding:0 6px; height:46px; font-weight:600;
}
.pl-btn-text:hover{ color:var(--pl-blue-soft); text-decoration:none; }
.pl-btn-lg{ height:54px; padding:0 36px; font-size:15px; }
.pl-btn-ghost{
  background:transparent; color:var(--pl-white);
  border:1.5px solid rgba(255,255,255,.5);
}
.pl-btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:#fff; }
.pl-btn-block{ width:100%; }

/* ============== FLOATING-LABEL FORM FIELDS ============== */
.pl-field{
  position:relative; margin:0 0 22px;
}
.pl-field input,
.pl-field select,
.pl-field textarea{
  width:100%;
  height:56px; padding:18px 14px 6px;
  font-family:inherit; font-size:15px; color:var(--pl-navy);
  background:var(--pl-white);
  border:1px solid var(--pl-line); border-radius:6px;
  transition:border-color .15s, box-shadow .15s;
  appearance:none; -webkit-appearance:none;
}
.pl-field textarea{ height:auto; min-height:96px; padding-top:24px; resize:vertical; }
.pl-field input:hover,
.pl-field select:hover,
.pl-field textarea:hover{ border-color:var(--pl-line-strong); }
.pl-field input:focus,
.pl-field select:focus,
.pl-field textarea:focus{
  outline:none; border-color:var(--pl-blue);
  box-shadow:0 0 0 3px rgba(0,115,229,.12);
}
.pl-field label{
  position:absolute; left:14px; top:18px;
  font-size:15px; color:var(--pl-text-faint);
  pointer-events:none;
  background:var(--pl-white); padding:0 4px;
  transition:transform .15s, color .15s, font-size .15s, top .15s;
  transform-origin:left top;
}
.pl-field label .req{ color:var(--pl-error); }
/* Float the label up when focused or when the field has a value
   (we set data-filled="1" via JS, plus :focus is enough for empty fields). */
.pl-field input:focus + label,
.pl-field select:focus + label,
.pl-field textarea:focus + label,
.pl-field input:not(:placeholder-shown) + label,
.pl-field textarea:not(:placeholder-shown) + label,
.pl-field.is-filled label,
.pl-field.is-error label{
  top:-8px; font-size:11.5px; color:var(--pl-text-mute);
}
.pl-field input:focus + label,
.pl-field select:focus + label,
.pl-field textarea:focus + label{ color:var(--pl-blue); }
/* Native <select> never matches :placeholder-shown, so we always lift its label */
.pl-field.has-select label{
  top:-8px; font-size:11.5px; color:var(--pl-text-mute);
}
.pl-field.has-select::after{
  /* custom dropdown chevron */
  content:""; position:absolute; right:14px; top:50%;
  width:12px; height:12px; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c7088'><path d='M7 10l5 5 5-5z'/></svg>");
  background-size:contain; background-repeat:no-repeat; background-position:center;
  transform:translateY(-50%);
}
.pl-field.has-select select{ padding-right:36px; }

.pl-field.is-error input,
.pl-field.is-error select,
.pl-field.is-error textarea{ border-color:var(--pl-error); }
.pl-field.is-error label{ color:var(--pl-error); }
.pl-field-error{ color:var(--pl-error); font-size:12.5px; margin:6px 4px 0; }
.pl-field-help{ color:var(--pl-text-mute); font-size:12.5px; margin:6px 4px 0; }

/* Checkboxes (square outline, blue check) */
.pl-check{
  display:flex; align-items:flex-start; gap:14px;
  font-size:14px; color:var(--pl-text); line-height:1.55;
  margin:14px 0; cursor:pointer;
}
.pl-check input[type=checkbox]{
  flex-shrink:0; appearance:none; -webkit-appearance:none;
  width:22px; height:22px; margin:0;
  border:1.5px solid var(--pl-line-strong); border-radius:3px;
  background:var(--pl-white); cursor:pointer;
  position:relative; transition:border-color .15s, background .15s;
}
.pl-check input[type=checkbox]:hover{ border-color:var(--pl-blue); }
.pl-check input[type=checkbox]:checked{ background:var(--pl-blue); border-color:var(--pl-blue); }
.pl-check input[type=checkbox]:checked::after{
  content:""; position:absolute; left:5px; top:1px;
  width:8px; height:13px; border:solid #fff;
  border-width:0 2px 2px 0; transform:rotate(45deg);
}
.pl-check.is-error input[type=checkbox]{ border-color:var(--pl-error); }
.pl-check.is-error{ color:var(--pl-error); }

/* ============== AUTH / WIZARD SHELL (split-screen) ============== */
.pl-auth{ display:grid; grid-template-columns: 1fr 1fr; min-height:calc(100vh - 200px); }
.pl-auth-aside{
  background:linear-gradient(135deg, #2c4a8e 0%, var(--pl-navy) 60%, var(--pl-navy-2) 100%);
  color:#fff; padding:80px 64px;
  display:flex; flex-direction:column; justify-content:center;
  position:relative; overflow:hidden;
}
.pl-auth-aside::after{
  /* Decorative ring watermark in the aside */
  content:""; position:absolute; right:-180px; bottom:-180px;
  width:520px; height:520px; border-radius:50%;
  border:80px solid rgba(255,255,255,.05);
  pointer-events:none;
}
.pl-auth-aside .pl-auth-mark{ height:46px; margin-bottom:40px; }
.pl-auth-aside h1{
  color:#fff; font-size:46px; font-weight:300; line-height:1.15;
  letter-spacing:-.01em; margin:0 0 20px; max-width:440px;
}
.pl-auth-aside h1 strong{ font-weight:700; }
.pl-auth-aside p{
  color:rgba(255,255,255,.85); font-size:16px; line-height:1.6;
  margin:0; max-width:440px;
}
.pl-auth-aside .pl-feature-pill{
  margin-top:30px; color:#9bc4f5; letter-spacing:.18em;
  font-size:13px; font-weight:600;
}

.pl-auth-main{
  background:var(--pl-white); padding:48px 56px 80px;
  display:flex; flex-direction:column;
}
.pl-auth-stepper{
  display:flex; flex-direction:column; gap:34px;
  margin:60px 0 0; max-width:280px;
  position:relative;
}
.pl-auth-stepper::before{
  /* vertical line behind the stepper dots */
  content:""; position:absolute; left:14px; top:30px; bottom:30px;
  width:1px; background:var(--pl-line);
}
.pl-step{
  display:flex; align-items:center; gap:16px;
  font-size:15px; color:var(--pl-text-mute);
  position:relative; z-index:1;
}
.pl-step .pl-step-num{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  background:var(--pl-line); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px;
}
.pl-step.active{ color:var(--pl-navy); font-weight:600; }
.pl-step.active .pl-step-num{ background:var(--pl-blue); }
.pl-step.done{ color:var(--pl-blue); }
.pl-step.done .pl-step-num{
  background:var(--pl-blue); position:relative;
}
.pl-step.done .pl-step-num::after{
  content:""; position:absolute; left:9px; top:6px;
  width:8px; height:13px; border:solid #fff;
  border-width:0 2px 2px 0; transform:rotate(45deg);
}
.pl-step.done .pl-step-num span{ display:none; }

.pl-auth-form{ max-width:520px; flex:1; }
.pl-auth-form h2{
  color:var(--pl-navy); font-size:30px; font-weight:600;
  margin:0 0 20px; letter-spacing:-.01em;
}
.pl-auth-form p.lead{
  color:var(--pl-navy); font-size:15px; margin:0 0 24px;
}
.pl-auth-top-link{
  text-align:right; font-size:14px; color:var(--pl-text-mute); margin:0 0 18px;
}
.pl-auth-top-link a{ color:var(--pl-blue-text); font-weight:600; }
.pl-auth-actions{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:34px; gap:18px;
}
.pl-auth-legal{
  color:var(--pl-text); font-size:14px; line-height:1.6; margin:14px 0;
}
.pl-auth-legal a{ color:var(--pl-blue-text); }

@media(max-width: 980px){
  .pl-auth{ grid-template-columns:1fr; }
  .pl-auth-aside{ padding:48px 28px; }
  .pl-auth-aside h1{ font-size:30px; }
  .pl-auth-main{ padding:36px 22px 60px; }
  .pl-auth-stepper{ margin-top:0; }
}

/* ============== HERO (marketing landing) ============== */
.pl-hero{
  background:linear-gradient(135deg, var(--pl-navy) 0%, var(--pl-navy-2) 100%);
  color:#fff; padding:100px 32px 120px;
  position:relative; overflow:hidden; text-align:center;
}
.pl-hero::before{
  /* faint diagonal stripe texture */
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 8px),
    linear-gradient(45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 8px);
  pointer-events:none;
}
.pl-hero-inner{ max-width:1080px; margin:0 auto; position:relative; z-index:1; }
.pl-hero h1{
  color:#fff; font-size:58px; font-weight:300;
  letter-spacing:.04em; text-transform:uppercase; line-height:1.1;
  margin:0 0 28px;
}
@media(max-width:980px){ .pl-hero h1{ font-size:46px; } }
.pl-hero .pl-hero-sub{
  font-size:18.5px; line-height:1.65; color:#cfd6ec;
  max-width:720px; margin:0 auto 32px;
}
.pl-hero .pl-hero-sub b{ color:#fff; }
.pl-hero-list{
  list-style:none; padding:0; margin:0 auto 36px;
  display:inline-block; text-align:left; color:#fff;
  font-size:16px; line-height:2;
}
.pl-hero-list li{ display:flex; align-items:center; gap:12px; }
.pl-hero-list li::before{
  content:""; flex-shrink:0;
  width:8px; height:8px; border-radius:50%; background:var(--pl-blue);
}
.pl-hero-list li::after{
  content:"\2713"; color:var(--pl-green); font-weight:700; margin-left:8px;
}
.pl-hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
@media(max-width:680px){
  .pl-hero{ padding:60px 18px 70px; }
  .pl-hero h1{ font-size:28px; letter-spacing:.04em; }
  .pl-hero .pl-hero-sub{ font-size:15px; }
  .pl-hero-list{ font-size:15px; }
}

/* Hero ribbon — the small dark bar between the hero and the next white section
   (mirrors the "ribbon with chevron" in the PAYLAX screenshots) */
.pl-hero-ribbon{
  background:var(--pl-navy); height:78px; position:relative;
}
.pl-hero-ribbon::after{
  content:""; position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  width:0; height:0;
  border-left:18px solid transparent; border-right:18px solid transparent;
  border-top:14px solid var(--pl-navy);
}

/* ============== MARKETING SECTIONS ============== */
.pl-section{ padding:80px 24px; background:var(--pl-white); }
.pl-section.alt{ background:var(--pl-bg); }
.pl-section-inner{ max-width:1100px; margin:0 auto; }
.pl-section-inner.narrow{ max-width:880px; }
.pl-eyebrow{
  display:block; text-align:center;
  font-size:14px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pl-navy); margin-bottom:10px;
}
.pl-section h2{
  text-align:center;
  font-size:34px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--pl-blue);
  margin:0 0 50px; line-height:1.2;
}
.pl-two-col{
  display:grid; grid-template-columns:280px 1fr; gap:64px;
  align-items:center;
}
.pl-two-col h3{
  color:var(--pl-blue); font-size:18px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; margin:0 0 14px;
}
.pl-two-col p{ color:var(--pl-navy); font-size:16px; line-height:1.7; margin:0 0 16px; }
@media(max-width:780px){
  .pl-two-col{ grid-template-columns:1fr; gap:32px; }
  .pl-section h2{ font-size:24px; }
}

/* iPhone mockup (CSS only — used on the "smart payment solution" block) */
.pl-phone{
  width:240px; height:420px;
  border:10px solid #e8eaf2; border-radius:38px;
  background:#fff; box-shadow:0 16px 48px rgba(31,41,92,.18);
  margin:0 auto; padding:14px; display:flex; flex-direction:column; gap:8px;
  font-size:11px;
}
.pl-phone .pl-phone-header{ color:var(--pl-text-mute); font-size:10px; }
.pl-phone .pl-phone-title{ font-weight:700; color:var(--pl-navy); font-size:13px; }
.pl-phone .pl-phone-img{ flex:1; border-radius:8px;
  background:linear-gradient(135deg,#cfd6ec,#e1e3ea); min-height:90px; }
.pl-phone .pl-phone-row{ display:flex; justify-content:space-between; }
.pl-phone .pl-phone-row b{ color:var(--pl-navy); font-size:12px; }
.pl-phone .pl-phone-cta{
  background:var(--pl-blue); color:#fff; text-align:center;
  padding:8px; border-radius:6px; font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
}
.pl-phone .pl-phone-link{
  text-align:center; font-size:10px; color:var(--pl-blue); text-decoration:underline;
}

/* ============== VERTICAL 4-STEP TIMELINE ============== */
.pl-steps-vert{ list-style:none; padding:0; margin:0; position:relative; }
.pl-steps-vert::before{
  /* the vertical line linking the circles */
  content:""; position:absolute;
  left:35px; top:36px; bottom:36px;
  width:1px; background:var(--pl-line);
}
.pl-steps-vert > li{
  display:grid; grid-template-columns:72px 1fr; gap:28px;
  padding:18px 0;
  align-items:flex-start;
}
.pl-steps-vert .pl-step-icon{
  width:72px; height:72px; border-radius:50%;
  background:#fff; border:1.5px solid var(--pl-line);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
}
.pl-steps-vert .pl-step-icon svg{ width:32px; height:32px; }
.pl-steps-vert li:nth-child(1) .pl-step-icon{ color:var(--pl-blue); }
.pl-steps-vert li:nth-child(2) .pl-step-icon{ color:var(--pl-green); }
.pl-steps-vert li:nth-child(3) .pl-step-icon{ color:#ff8aa3; }
.pl-steps-vert li:nth-child(4) .pl-step-icon{ color:var(--pl-green); }
.pl-steps-vert h3{
  color:var(--pl-navy); font-size:19px; font-weight:700; margin:8px 0 10px;
}
.pl-steps-vert p{ color:var(--pl-navy); font-size:15.5px; line-height:1.7; margin:0; }
@media(max-width:560px){
  .pl-steps-vert > li{ grid-template-columns:54px 1fr; gap:16px; }
  .pl-steps-vert .pl-step-icon{ width:54px; height:54px; }
  .pl-steps-vert .pl-step-icon svg{ width:24px; height:24px; }
  .pl-steps-vert::before{ left:26px; }
}

/* ============== PROTECTION CARDS ============== */
.pl-protect{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  max-width:920px; margin:0 auto;
}
.pl-protect-card{
  background:#5d5f86; color:#fff; border-radius:8px;
  padding:48px 36px; text-align:center;
}
.pl-protect-card .pl-protect-icon{
  width:80px; height:80px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.pl-protect-card h3{
  color:#fff; font-size:20px; font-weight:700;
  letter-spacing:.04em; margin:0 0 14px; text-transform:uppercase;
}
/* specificity bump: body.pl-page p would otherwise paint the body text
   dark navy on the dark purple card. */
body.pl-page .pl-protect-card p{
  color:rgba(255,255,255,.92); font-size:15px; line-height:1.65;
  margin:0;
}
.pl-protect + .pl-protect-q{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  max-width:920px; margin:18px auto 0;
}
.pl-protect-q a{
  display:block; text-align:center; color:var(--pl-blue);
  text-decoration:underline; font-size:15px; padding:0 16px;
}
@media(max-width:780px){
  .pl-protect, .pl-protect-q{ grid-template-columns:1fr; }
}

/* ============== TRUST STRIP ============== */
.pl-trust{
  background:var(--pl-bg); padding:36px 24px;
  border-top:1px solid var(--pl-line);
  border-bottom:1px solid var(--pl-line);
}
.pl-trust-inner{
  max-width:1200px; margin:0 auto;
  display:flex; justify-content:space-around; gap:32px;
  flex-wrap:wrap;
}
.pl-trust-pill{
  display:flex; align-items:center; gap:14px;
  color:#7f96c1; font-size:15px; line-height:1.4; font-weight:400;
  flex:0 0 auto;
}
.pl-trust-pill svg{ width:34px; height:34px; flex-shrink:0; color:#a3b6d8; }

/* ============== PUBLIC FOOTER ============== */
.pl-footer{
  background:var(--pl-white); padding:32px 24px;
  border-top:1px solid var(--pl-line);
}
.pl-footer-row{
  max-width:1200px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  gap:24px; flex-wrap:wrap; font-size:14px; color:var(--pl-text-mute);
}
.pl-footer-row .pl-footer-power{
  display:inline-flex; align-items:center; gap:10px;
}
.pl-footer-row img{ height:24px; vertical-align:middle; }
.pl-footer-bottom{
  max-width:1200px; margin:14px auto 0;
  padding-top:14px; border-top:1px solid var(--pl-line);
  display:flex; justify-content:center; gap:36px; flex-wrap:wrap;
  font-size:14px;
}
.pl-footer-bottom a{ color:var(--pl-text-mute); text-decoration:none; }
.pl-footer-bottom a:hover{ color:var(--pl-blue); text-decoration:underline; }

/* ============== CONTENT CARDS (used by buyer/seller dashboards) ============== */
.pl-page-shell{ max-width:1180px; margin:32px auto 64px; padding:0 32px; }
.pl-page-shell.narrow{ max-width:760px; }
.pl-page-shell h1{ font-size:28px; color:var(--pl-navy); margin:0 0 8px; font-weight:700; }
.pl-page-shell .pl-page-sub{ color:var(--pl-text-mute); font-size:15px; margin:0 0 28px; }

/* Responsive auto-fit grid (stat rows, card grids) */
.pl-grid-auto{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
}

.pl-card{
  background:var(--pl-white);
  border:1.5px solid #d8dce8; border-radius:var(--pl-radius-card);
  padding:var(--pl-pad-card); margin-bottom:var(--pl-gap-card);
  box-shadow: 0 4px 18px rgba(20,28,80,.07), 0 1px 2px rgba(20,28,80,.04);
}
.pl-card h2{
  font-size:12.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pl-navy);
  margin:0 0 18px;
}
.pl-card h3{ color:var(--pl-navy); font-size:18px; font-weight:600; margin:0 0 12px; }
.pl-card p{ color:var(--pl-text); font-size:15px; line-height:1.65; }
.pl-card.accent{ border-left:4px solid var(--pl-blue); }

/* Definition-list rows used in invoices/SEPA blocks */
.pl-kv{ display:grid; grid-template-columns:180px 1fr; gap:8px 18px; font-size:14.5px; }
.pl-kv dt{ color:var(--pl-text-mute); font-weight:500; }
.pl-kv dd{ color:var(--pl-navy); margin:0; word-break:break-word; }

/* Tables (deal lists) */
.pl-table{ width:100%; border-collapse:collapse; font-size:14px; }
.pl-table thead th{
  text-align:left; padding:10px 12px; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--pl-text-mute);
  border-bottom:1px solid var(--pl-line);
}
.pl-table tbody td{ padding:14px 12px; border-bottom:1px solid var(--pl-line); }
.pl-table tbody tr:hover td{ background:var(--pl-bg); }

/* Badges */
.pl-badge{
  display:inline-block; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; background:#eef0f7; color:var(--pl-text-mute);
}
.pl-badge.ok{ background:#e7f8ee; color:#1f7a3d; }
.pl-badge.warn{ background:#ffe8e8; color:#a32020; }
.pl-badge.info{ background:#e3efff; color:#0044a3; }
.pl-badge.held{ background:#fff4dc; color:#84620e; }

/* Alerts */
.pl-alert{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; border-radius:6px;
  background:#e3efff; color:var(--pl-navy);
  font-size:14px; line-height:1.55; margin:0 0 16px;
  border:1px solid #cfdef7;
}
.pl-alert.ok{ background:#e7f8ee; border-color:#bfe5cb; color:#1f4d2c; }
.pl-alert.error{ background:#ffe8e8; border-color:#f6c2c2; color:#7a1a1a; }
.pl-alert.warn{ background:#fff4dc; border-color:#f0d999; color:#84620e; }
.pl-alert svg{ flex-shrink:0; width:20px; height:20px; margin-top:1px; }

/* ============== BUYER / SELLER PAGE HEADER ============== */
.pl-app-header{
  background:var(--pl-white); border-bottom:1px solid var(--pl-line);
  padding:18px 32px;
}
.pl-app-header-inner{
  max-width:1440px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.pl-app-header img.logo{ height:30px; }
.pl-app-nav{ display:flex; gap:30px; align-items:center; }
.pl-app-nav a{
  color:var(--pl-navy); font-size:14.5px; font-weight:500; text-decoration:none;
}
.pl-app-nav a:hover{ color:var(--pl-blue); text-decoration:none; }
.pl-app-userpill{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 14px; border-radius:999px;
  background:var(--pl-bg); color:var(--pl-navy); font-size:13px;
}
.pl-app-userpill .pl-app-role{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; background:var(--pl-blue); color:#fff;
  padding:3px 8px; border-radius:999px;
}
.pl-app-signout{
  background:transparent; border:1px solid var(--pl-line); cursor:pointer;
  padding:8px 14px; border-radius:6px; color:var(--pl-text-mute); font-size:13px;
}
.pl-app-signout:hover{ color:var(--pl-blue); border-color:var(--pl-blue); }

@media(max-width:760px){
  .pl-app-header{ padding:12px 14px; }
  .pl-app-nav{ width:100%; gap:18px; order:3; }
  .pl-page-shell{ padding:0 14px; margin:18px auto 40px; }
  .pl-card{ padding:22px 18px; }
}

/* ============== SUPPORT CHAT — restyled to match PAYLAX ============== */
/* Override key colors of the inherited #bim-support widget so the chat
   bubble + panel look on-brand. The X-close fix is already in escrow.css. */
#bim-support-bubble{ background:var(--pl-blue) !important; }
#bim-support-bubble:hover{ background:var(--pl-blue-soft) !important; }
.bim-sup-hd{ background:var(--pl-navy) !important; }
.bim-sup-msg.theirs{ background:#dde7fa !important; border-color:#cfd9f0 !important; color:var(--pl-navy) !important; }
.bim-sup-msg.mine{ border-color:var(--pl-blue) !important; color:var(--pl-navy) !important; }
.bim-sup-send{ background:var(--pl-blue) !important; color:#fff !important;
  border-radius:6px !important; letter-spacing:.06em !important; }
.bim-sup-send:hover{ background:var(--pl-blue-soft) !important; }
.bim-sup-attach{ color:var(--pl-blue) !important; }
.bim-sup-read.read{ color:var(--pl-blue) !important; }

/* Safety net: hide the legacy skeleton topbar/footer if any page ever
   renders them under the Paylax body class. As of the full .pl-* rollout
   no template uses these — every page now ships Paylax chrome. */
body.pl-page > header.topbar,
body.pl-page > footer.footer{ display:none !important; }


/* ============================================================
   PAYLAX · contrast + QA fixes (rev 1)
   These overrides come last so they win without touching the
   originals above.
   ============================================================ */

/* 1. Hero subtitle — bump from #cfd6ec → lighter to read on navy */
.pl-hero .pl-hero-sub{ color:#e6ebf7; }

/* 2. Hero ghost button — boost border so it reads on navy */
.pl-hero .pl-btn-ghost{
  border-color:rgba(255,255,255,.65);
  color:#fff;
}
.pl-hero .pl-btn-ghost:hover{
  background:rgba(255,255,255,.12);
  border-color:#fff;
}

/* 3. Trust strip — pale blue is unreadable on light grey;
   use the navy at 75% so labels meet WCAG AA */
.pl-trust-pill{ color:var(--pl-navy); opacity:.78; }
.pl-trust-pill svg{ color:var(--pl-blue); opacity:.85; }

/* 4. Public nav links — keep a 4px baseline pad so the hover
   underline doesn't shift the row */
.pl-nav-links a{ padding:6px 0 4px; border-bottom-width:2px; }

/* 5. Default badge — text was #6c7088 on #eef0f7 (~3.4:1).
   Strengthen to navy at high contrast */
.pl-badge{ color:var(--pl-navy); background:#e8eaf3; }
.pl-badge.info{ color:#003b8a; background:#dcebff; }

/* 6. Pricing list checkmarks — color the unicode tick green */
.pl-card ul li{ color:var(--pl-navy); }
.pl-card ul li:first-letter{
  /* doesn't actually colour the ✓ unicode reliably across browsers — keep
     for fallback, the explicit chars in the templates handle the visual */
  color:var(--pl-green); font-weight:700;
}

/* 7. Footer text — bump tone to keep AA */
.pl-footer{ color:#56597a; }
.pl-footer-row{ color:#56597a; }
.pl-footer-bottom a{ color:#56597a; }
.pl-footer-bottom a:hover{ color:var(--pl-blue); }

/* 8. Floating-label safety: if a label is sitting over content
   make sure its background spans wide enough so descender ink
   from the value text behind doesn't smudge through */
.pl-field label{ background:linear-gradient(to bottom,transparent 0,transparent 50%,var(--pl-white) 50%,var(--pl-white) 100%); }
.pl-field input:focus + label,
.pl-field select:focus + label,
.pl-field textarea:focus + label,
.pl-field input:not(:placeholder-shown) + label,
.pl-field textarea:not(:placeholder-shown) + label,
.pl-field.is-filled label,
.pl-field.is-error label,
.pl-field.has-select label{
  background:var(--pl-white); padding:0 6px;
}

/* 9. Auth aside — make sure the small print is legible */
.pl-auth-aside p{ color:#dbe2f5; }
.pl-auth-aside .pl-feature-pill{ color:#a8d0ff; }

/* 10. Compact nav — make sure ? help icon and lang picker have
   breathing room on mobile */
.pl-nav.compact .pl-nav-cta{ gap:18px; }
@media(max-width:560px){
  .pl-nav.compact .pl-nav-cta{
    position:static; transform:none; margin-top:8px;
  }
  .pl-nav.compact .pl-nav-inner{ flex-direction:column; gap:8px; }
}

/* 11. Body text default — was light, bump base to navy mix */
body.pl-page{ color:#1f2245; }
body.pl-page p{ color:#262a4a; }

/* 12. Eyebrow text — was straight navy; the dimmer mute makes
   the section title pop more by contrast */
.pl-section .pl-eyebrow{ color:var(--pl-blue-text); }

/* 13. Section H2 — was a tad too pale blue on white; lock to
   our brand blue but in dark variant */
.pl-section h2{ color:#0044a3; }

/* 14. Trust pill text — bump weight for better legibility */
.pl-trust-pill{ font-weight:500; }

/* 15. Card body text within marketing sections — guarantee navy */
.pl-card p, .pl-card li{ color:#1f2245; }

/* 16. Top-link "Got an account? Login" — was right-aligned and
   could collide with the form. Shift up + add bottom margin */
.pl-auth-top-link{ margin:-12px 0 18px; font-size:14px; }

/* 17. Pricing card highlighted variant: tighter shadow so it pops */
.pl-card.accent{ box-shadow:0 12px 32px rgba(0,115,229,.18); }

/* 18. Forms inside the seller-new-deal "kind picker" radio cards —
   make the focused/checked state visible */
input[name="kind"]:focus + strong{ outline:2px solid var(--pl-blue); outline-offset:4px; }

/* 19. Mobile: shrink hero h1 even further on tiny phones */
@media(max-width:380px){
  .pl-hero h1{ font-size:24px; line-height:1.2; }
  .pl-hero{ padding:48px 14px 56px; }
}

/* 20. Buyer/seller dashboard cards — the "stat" tiles need the
   number to be more prominent on mobile */
@media(max-width:560px){
  .pl-page-shell h1{ font-size:22px; }
  .pl-page-shell .pl-page-sub{ font-size:14px; }
}

/* 21. Tables on mobile — let them scroll horizontally rather
   than crush column content. Raised from 760 to 880 so the new
   app-card dashboards (which already collapse the rail at 880) keep
   the deals table inside its card instead of pushing the page wider. */
@media(max-width:880px){
  .pl-table{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* 22. Floating-label color fixes: when the field is filled we
   were inheriting --pl-text-mute on focus too. Force focus blue */
.pl-field input:focus + label,
.pl-field select:focus + label,
.pl-field textarea:focus + label,
.pl-field.has-select select:focus + label{ color:var(--pl-blue) !important; }

/* ============================================================
   PAYLAX · landing additions (rev 2)
   New sections added with the German marketing-page polish.
   ============================================================ */

/* Payment-method strip (under the 4-step list + in the footer) */
.pl-pay-strip{
  display:flex; justify-content:center; gap:14px;
  flex-wrap:wrap; margin-top:36px;
}
.pl-pay-row{
  display:flex; gap:10px; flex-wrap:wrap;
}
.pl-pay-pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:72px; height:34px; padding:0 14px;
  background:var(--pl-white); border:1px solid var(--pl-line);
  border-radius:4px; color:var(--pl-navy);
  font-size:12px; font-weight:700; letter-spacing:.05em;
}

/* Marketplace-operators banner */
.pl-marketops{
  display:grid; grid-template-columns:1.2fr 1fr; gap:48px;
  background:var(--pl-white); border:1px solid var(--pl-line);
  border-radius:10px; padding:40px;
  box-shadow:var(--pl-shadow-card);
  align-items:center;
}
.pl-marketops-body h2{
  font-size:24px; line-height:1.25;
}
.pl-marketops-body p{
  color:var(--pl-text); font-size:15.5px; line-height:1.7;
  margin:0 0 22px;
}
.pl-marketops-aside{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.pl-marketops-tile{
  background:var(--pl-bg); border:1px solid var(--pl-line);
  border-radius:8px; padding:18px; text-align:center;
  font-size:13.5px; font-weight:600; color:var(--pl-navy);
  min-height:84px; display:flex; align-items:center; justify-content:center;
}
@media(max-width:780px){
  .pl-marketops{ grid-template-columns:1fr; padding:24px; }
}

/* Advantages (buyer + seller) — replaces the inline grid in landing */
.pl-advantages{
  display:grid; grid-template-columns:1fr 1fr; gap:40px;
  max-width:1080px; margin:0 auto;
}
.pl-adv-col h3{
  font-size:20px; font-weight:700; color:var(--pl-blue);
  letter-spacing:.04em; text-transform:uppercase;
  margin:0 0 22px; text-align:center;
}

/* New 2x2 icon-card grid for advantages (replaces the old plain list). */
.pl-adv-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.pl-adv-card{
  background:var(--pl-white); border:1px solid var(--pl-line);
  border-radius:10px; padding:20px 18px;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.pl-adv-card:hover{
  border-color:var(--pl-blue);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,115,229,.08);
}
.pl-adv-icon{
  width:40px; height:40px; border-radius:10px;
  background:#eaf3ff; color:var(--pl-blue);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
}
.pl-adv-icon svg{ width:22px; height:22px; }
.pl-adv-card h4{
  font-size:14px; font-weight:700; color:var(--pl-navy);
  margin:0 0 6px;
}
.pl-adv-card p{
  font-size:13.5px; color:var(--pl-text); line-height:1.55; margin:0;
}

/* Legacy list selector kept for any external usage. */
.pl-adv-list{ list-style:none; padding:0; margin:0; }
.pl-adv-list > li{
  position:relative; padding:14px 0 14px 32px;
  font-size:14.5px; line-height:1.65; color:var(--pl-text);
  border-bottom:1px solid var(--pl-line);
}
.pl-adv-list > li:last-child{ border-bottom:none; }
.pl-adv-list > li::before{
  content:""; position:absolute; left:0; top:18px;
  width:18px; height:18px; border-radius:50%;
  background:var(--pl-blue)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M6.5 11.5l-3-3 1.4-1.4L6.5 8.7l5.1-5.1L13 5z'/></svg>")
    center/12px 12px no-repeat;
}
.pl-adv-list > li b{ color:var(--pl-navy); font-weight:700; display:block; margin-bottom:2px; }

@media(max-width:780px){
  .pl-advantages{ grid-template-columns:1fr; gap:24px; }
  .pl-adv-grid{ grid-template-columns:1fr; }
}

/* "What our customers say" */
.pl-says{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.pl-says-card{
  background:var(--pl-white); border:1px solid var(--pl-line);
  border-radius:8px; padding:24px; margin:0;
  box-shadow:var(--pl-shadow-card);
  display:flex; flex-direction:column; gap:14px;
}
.pl-says-card blockquote{
  margin:0; color:var(--pl-navy); font-size:15px;
  line-height:1.65; font-style:italic;
}
.pl-says-card figcaption{
  color:var(--pl-text-mute); font-size:13px; font-weight:600;
  letter-spacing:.02em;
}
@media(max-width:880px){
  .pl-says{ grid-template-columns:1fr; }
}

/* Extended footer (payment methods + follow us + partner) */
.pl-footer-meta{
  max-width:1200px; margin:0 auto 24px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
  padding-bottom:24px; border-bottom:1px solid var(--pl-line);
}
.pl-footer-meta-col h4{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pl-navy); margin:0 0 12px; font-weight:700;
}
.pl-footer-partner{
  color:#56597a; font-size:13.5px; line-height:1.6; margin:0;
}
.pl-footer-partner a{ color:var(--pl-blue-text); text-decoration:none; }
.pl-footer-partner a:hover{ text-decoration:underline; }
.pl-social-row{ display:flex; gap:10px; align-items:center; }
.pl-social-row a{
  width:36px; height:36px; border-radius:50%;
  background:var(--pl-bg); border:1px solid var(--pl-line);
  color:var(--pl-navy);
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; transition:.15s;
}
.pl-social-row a:hover{
  background:var(--pl-blue); color:#fff; border-color:var(--pl-blue);
}
@media(max-width:780px){
  .pl-footer-meta{ grid-template-columns:1fr; gap:20px; }
}

/* ============================================================
   PAYLAX · app + admin components (rev 3)
   Paylax-styled equivalents of the old escrow.css skeleton
   components (.shell/.sidebar/.stat/.listing/.steps/.modal/...).
   Used by deal_detail.html and every admin_side/* page so the
   authenticated UI matches the marketing brand.
   ============================================================ */

/* ---- Button variants (skeleton parity) ---- */
.pl-btn-secondary{
  background:var(--pl-white); color:var(--pl-navy);
  border:1.5px solid var(--pl-line-strong);
}
.pl-btn-secondary:hover{ border-color:var(--pl-blue); color:var(--pl-blue); }
.pl-btn-danger{
  background:var(--pl-white); color:#a32020;
  border:1.5px solid #f0b6b6;
}
.pl-btn-danger:hover{ background:#ffe8e8; border-color:#e09090; }
.pl-btn-sm{ height:36px; padding:0 16px; font-size:12px; }

/* When a .pl-btn is an <a>, the global `body.pl-page a` colour rule
   (higher specificity) would override the button text colour and make
   it invisible. Re-assert each variant's text colour at link scope. */
body.pl-page a.pl-btn-primary{ color:var(--pl-white); }
body.pl-page a.pl-btn-primary:hover{ color:var(--pl-white); text-decoration:none; }
body.pl-page a.pl-btn-secondary{ color:var(--pl-navy); }
body.pl-page a.pl-btn-secondary:hover{ color:var(--pl-blue); text-decoration:none; }
body.pl-page a.pl-btn-danger{ color:#a32020; }
body.pl-page a.pl-btn-danger:hover{ color:#a32020; text-decoration:none; }
body.pl-page a.pl-btn-ghost{ color:var(--pl-white); }
body.pl-page a.pl-btn-ghost:hover{ color:var(--pl-white); text-decoration:none; }
body.pl-page a.pl-btn-text{ color:var(--pl-blue); }
body.pl-page a.pl-btn{ text-decoration:none; }
.pl-btn svg{ width:16px; height:16px; flex-shrink:0; }
.pl-btn-sm svg{ width:14px; height:14px; }
.pl-btn + .pl-btn{ margin-left:0; }
.pl-btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

/* ---- App shell: sidebar + main (+ optional right rail) ---- */
.pl-shell{
  display:grid; grid-template-columns:248px minmax(0,1fr); gap:var(--pl-gap-shell);
  max-width:1440px; margin:28px auto 64px; padding:0 32px;
  align-items:flex-start;
}
.pl-shell .pl-main,
.pl-main{ min-width:0; }

/* 3-zone variant: sidebar | main | right rail (deal_detail.html) */
.pl-shell.has-rail{ grid-template-columns:248px minmax(0,1fr) 320px; }
/* 2-zone variant used INSIDE the app-card chrome: no left sidebar
   (the icon rail outside the card replaces it), just main + right rail.
   The selectors below override the legacy tablet/phone tile-arrangement
   rules that assumed a sidebar was present. */
.pl-app-card-body .pl-shell,
.pl-app-card-body .pl-shell.has-rail{
  display:grid; gap:var(--pl-gap-shell);
  max-width:none; margin:0; padding:0;
  grid-template-areas:none;
}
.pl-app-card-body .pl-shell{ grid-template-columns:minmax(0,1fr); }
.pl-app-card-body .pl-shell.has-rail{
  grid-template-columns:minmax(0,1fr) 300px;
}
.pl-app-card-body .pl-shell.has-rail > .pl-main{ grid-column:1; grid-row:1; }
.pl-app-card-body .pl-shell.has-rail > .pl-rail{ grid-column:2; grid-row:1; }
@media(max-width:1100px){
  .pl-app-card-body .pl-shell.has-rail{ grid-template-columns:minmax(0,1fr); }
  .pl-app-card-body .pl-shell.has-rail > .pl-main,
  .pl-app-card-body .pl-shell.has-rail > .pl-rail{ grid-column:1; }
  .pl-app-card-body .pl-shell.has-rail > .pl-rail{ grid-row:auto; }
}
.pl-rail{
  min-width:0; display:flex; flex-direction:column; gap:var(--pl-gap-card);
}
@media(min-width:881px){
  /* Sticky rail with its own internal scroll — avoids the "stranded short
     rail" effect on long admin pages where the rail content sits idle in
     the corner while main keeps scrolling. */
  .pl-rail{
    position:sticky; top:24px; align-self:start;
    max-height:calc(100vh - 48px); overflow-y:auto;
    /* Subtle scrollbar styling */
    scrollbar-width:thin; scrollbar-color:var(--pl-line-strong) transparent;
  }
  .pl-rail::-webkit-scrollbar{ width:6px; }
  .pl-rail::-webkit-scrollbar-thumb{ background:var(--pl-line-strong); border-radius:3px; }
  .pl-rail::-webkit-scrollbar-track{ background:transparent; }
}
/* Rail cards are denser than main-column cards and self-spaced via the
   rail's flex gap, so they drop their own bottom margin. */
.pl-rail .pl-card{ padding:20px; margin-bottom:0; }
.pl-rail .pl-card h2{ font-size:12px; }
.pl-rail .pl-party-card{ margin-bottom:0; }

/* Rail drops under main on mid-width screens; sidebar stays. */
@media(max-width:1180px){
  .pl-shell.has-rail{ grid-template-columns:248px minmax(0,1fr); }
  .pl-shell.has-rail .pl-rail{ grid-column:2; }
}
/* Tablet (600-880px): sidebar becomes a horizontal strip above; main + rail share a row. */
@media(max-width:880px) and (min-width:600px){
  .pl-shell,
  .pl-shell.has-rail{
    grid-template-columns: minmax(0,1fr) minmax(0,290px);
    grid-template-areas: "side side" "main rail";
    gap:18px;
  }
  .pl-shell > .pl-sidebar         { grid-area:side; }
  .pl-shell > .pl-main            { grid-area:main; }
  .pl-shell.has-rail > .pl-rail   { grid-area:rail; position:static; }
  /* Shells without a rail just put main full-width under the sidebar strip. */
  .pl-shell:not(.has-rail){ grid-template-areas:"side side" "main main"; }
  .pl-sidebar{ position:static; padding:14px 16px;
    display:flex; align-items:center; flex-wrap:wrap; gap:0; }
  .pl-sidebar-me{ padding:0; border-bottom:none; margin-bottom:0; }
  /* Specificity bump: default .pl-sidebar-cta sets display:flex below; we
     need a more specific selector to win at the tablet breakpoint. */
  .pl-sidebar > h3,
  .pl-sidebar > .pl-sidebar-summary,
  .pl-sidebar > .pl-sidebar-cta{ display:none; }
  .pl-sidebar-nav{ flex-direction:row; flex-wrap:wrap; gap:4px; margin-left:14px; }
  .pl-sidebar-nav a{ padding:6px 10px; font-size:12.5px; }
  .pl-sidebar-nav a.active::before{ display:none; }
}

/* Phone (<600px): everything stacks; deal_detail.html shows a tabbed UI to avoid a long scroll. */
@media(max-width:599px){
  .pl-shell,
  .pl-shell.has-rail{ grid-template-columns:1fr; }
  .pl-shell.has-rail .pl-rail{ grid-column:1; position:static; }
}

/* ---- Sidebar ---- */
.pl-sidebar{
  background:var(--pl-white); border:1px solid var(--pl-line);
  border-radius:10px; padding:20px 18px;
  box-shadow:var(--pl-shadow-card);
  position:sticky; top:24px;
}
@media(max-width:880px){ .pl-sidebar{ position:static; top:auto; } }
.pl-sidebar-me{
  display:flex; gap:11px; align-items:center;
  padding:6px 6px 14px; border-bottom:1px solid var(--pl-line); margin-bottom:12px;
}
.pl-sidebar-avatar{
  width:40px; height:40px; border-radius:50%;
  background:var(--pl-blue); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px;
}
.pl-sidebar-who{ font-weight:700; font-size:13.5px; color:var(--pl-navy); line-height:1.2; }
.pl-sidebar-sub{ font-size:11.5px; color:var(--pl-text-mute); margin-top:2px; }
.pl-sidebar h3{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pl-text-mute); margin:4px 0 10px; padding:0 6px;
}
.pl-sidebar-nav{ display:flex; flex-direction:column; gap:2px; }
.pl-sidebar-nav a{
  position:relative;
  display:flex; align-items:center; gap:11px; padding:10px 12px;
  font-size:13.5px; color:var(--pl-text); text-decoration:none;
  border-radius:7px; font-weight:500; transition:background .12s, color .12s;
}
.pl-sidebar-nav a svg{ width:17px; height:17px; fill:currentColor; flex-shrink:0; opacity:.65; }
.pl-sidebar-nav a:hover{ background:var(--pl-bg); color:var(--pl-navy); text-decoration:none; }
.pl-sidebar-nav a.active{ background:#eaf3ff; color:var(--pl-blue-text); font-weight:700; }
.pl-sidebar-nav a.active svg{ opacity:1; fill:var(--pl-blue); }
.pl-sidebar-nav a.active::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px;
  border-radius:0 3px 3px 0; background:var(--pl-blue);
}
.pl-sidebar-nav a .pl-count{
  margin-left:auto; font-size:11px; font-weight:700;
  background:var(--pl-blue); color:#fff; padding:2px 7px; border-radius:999px;
}
.pl-sidebar-nav a .pl-count.alert{ background:#ffe8e8; color:#a32020; }

/* "This deal" summary block — only rendered when a deal is in context. */
.pl-sidebar-summary{
  margin-top:14px; padding-top:14px;
  border-top:1px solid var(--pl-line);
}
.pl-sidebar-summary h3{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pl-text-mute); margin:0 0 8px; padding:0 4px;
}
.pl-sidebar-summary-line{
  display:flex; justify-content:space-between; align-items:center;
  gap:8px; font-size:12.5px; padding:6px 4px;
  border-bottom:1px solid var(--pl-line);
}
/* Stacked variant — for long values (e.g. multi-word state badges) that would
   otherwise wrap awkwardly in the sidebar. Label goes on its own line. */
.pl-sidebar-summary-line.stacked{
  flex-direction:column; align-items:flex-start; gap:6px;
}
.pl-sidebar-summary-line.stacked .pl-badge{ white-space:normal; }
.pl-sidebar-summary-line:last-child{ border-bottom:none; }
.pl-sidebar-summary-k{ color:var(--pl-text-mute); flex-shrink:0; }
.pl-sidebar-summary-v{
  color:var(--pl-navy); text-align:right; min-width:0;
  word-break:break-word;
}
.pl-sidebar-summary-v b{ color:var(--pl-navy); font-weight:700; }
.pl-sidebar-summary .pl-badge{
  font-size:10px; padding:3px 8px; letter-spacing:.04em;
}

.pl-sidebar-cta{
  margin-top:16px; padding:14px 2px 0; border-top:1px solid var(--pl-line);
  display:flex; flex-direction:column; gap:8px;
}
.pl-sidebar-cta .pl-btn{ width:100%; }

/* ---- Page header inside the main column ---- */
.pl-pagehead{ margin:0 0 20px; }
.pl-pagehead .pl-eyebrow{ text-align:left; margin-bottom:6px; }
.pl-pagehead h1{
  font-size:26px; font-weight:700; color:var(--pl-navy);
  letter-spacing:-.01em; margin:0 0 6px; line-height:1.2;
}
.pl-pagehead .pl-sub{ color:var(--pl-text-mute); font-size:14.5px; line-height:1.6; margin:0; }
.pl-pagehead .pl-sub a{ color:var(--pl-blue-text); }
.pl-pagehead .pl-btn-row{ margin-top:14px; }

/* ---- Stat grid (admin dashboard metric cards) — auto-fit so 4 or 5 cards
   pack themselves without per-count overrides. ---- */
.pl-statgrid{
  display:grid; gap:14px; margin:0 0 18px;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}
@media(max-width:480px){ .pl-statgrid{ grid-template-columns:1fr; } }
.pl-stat{
  background:var(--pl-white); border:1px solid var(--pl-line);
  border-radius:10px; padding:16px 18px; text-decoration:none; display:block;
  box-shadow:var(--pl-shadow-card); transition:border-color .12s, transform .12s, box-shadow .12s;
}
.pl-stat:hover{ border-color:var(--pl-blue); transform:translateY(-1px); text-decoration:none; }
.pl-stat.active{ border-color:var(--pl-blue); box-shadow:0 6px 18px rgba(0,115,229,.16); }
.pl-stat-k{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--pl-text-mute); margin-bottom:6px; display:flex; align-items:center; gap:6px;
}
.pl-stat-k svg{ width:14px; height:14px; fill:currentColor; }
.pl-stat-v{ font-size:25px; font-weight:700; color:var(--pl-navy); line-height:1.1; }
.pl-stat-v.alert{ color:#a32020; }
.pl-stat-vv{ font-size:11.5px; color:var(--pl-text-mute); margin-top:3px; }

/* ---- Admin "Today's work" panel ---- */
.pl-todays-work{ margin-bottom:18px; }
.pl-todays-work-list{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.pl-todays-work-item{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; background:var(--pl-white);
  border:1px solid var(--pl-line); border-radius:8px;
  text-decoration:none; color:var(--pl-text);
  transition:border-color .12s, box-shadow .12s;
}
.pl-todays-work-item:hover{
  border-color:var(--pl-blue); box-shadow:0 4px 12px rgba(0,115,229,.08);
  text-decoration:none;
}
.pl-todays-work-item-icon{
  flex-shrink:0; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.pl-todays-work-item > div{
  flex:1; font-size:14px; color:var(--pl-navy);
}
.pl-todays-work-item b{ font-weight:700; color:var(--pl-navy); }
.pl-todays-work-item-sub{
  display:block; font-size:12px; color:var(--pl-text-mute);
  font-weight:400; margin-top:2px;
}
.pl-todays-work-item-go{
  flex-shrink:0; font-size:12.5px; font-weight:600;
  color:var(--pl-blue-text);
}

/* ---- Dashboard table header + filter pills ---- */
.pl-dashboard-tablehead{
  display:flex; justify-content:space-between; align-items:center;
  gap:14px; flex-wrap:wrap; margin-bottom:14px;
}
.pl-dashboard-tablehead-q{
  font-size:13px; font-weight:500; color:var(--pl-text-mute);
  letter-spacing:0; text-transform:none; margin-left:8px;
}
.pl-filter-pills{
  display:flex; gap:6px; flex-wrap:wrap;
}
.pl-filter-pill{
  display:inline-flex; align-items:center; padding:5px 12px;
  background:var(--pl-white); border:1px solid var(--pl-line);
  border-radius:999px; font-size:12px; font-weight:600;
  color:var(--pl-text-mute); text-decoration:none;
  transition:border-color .12s, color .12s, background .12s;
}
.pl-filter-pill:hover{ border-color:var(--pl-blue); color:var(--pl-blue-text); text-decoration:none; }
.pl-filter-pill.active{
  background:var(--pl-blue); border-color:var(--pl-blue); color:#fff;
}
body.pl-page a.pl-filter-pill{ color:var(--pl-text-mute); }
body.pl-page a.pl-filter-pill:hover{ color:var(--pl-blue-text); }
body.pl-page a.pl-filter-pill.active{ color:#fff; }
.pl-filter-pill-export{
  margin-left:auto;
}

/* ---- Breadcrumbs ---- */
.pl-breadcrumbs{
  display:flex; gap:6px; align-items:center; flex-wrap:wrap;
  font-size:13px; color:var(--pl-text-mute); margin:0 0 16px; padding:0 2px;
}
.pl-breadcrumbs a{ color:var(--pl-text-mute); text-decoration:none; }
.pl-breadcrumbs a:hover{ color:var(--pl-blue); text-decoration:underline; }
.pl-breadcrumbs .sep{ color:var(--pl-line-strong); padding:0 2px; }
.pl-breadcrumbs .current{ color:var(--pl-navy); font-weight:600; }
.pl-breadcrumbs .home svg{ width:15px; height:15px; fill:currentColor; vertical-align:-3px; }

/* ---- Listing card (deal item header) ---- */
.pl-listing{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:24px;
  background:var(--pl-white); border:1px solid var(--pl-line);
  border-radius:10px; padding:24px; box-shadow:var(--pl-shadow-card); margin-bottom:18px;
}
/* Service/rental deals have no photo — collapse the photo column. */
.pl-listing.noimg{ grid-template-columns:1fr; }
/* In the narrower 3-zone main column the photo would crowd the info column;
   stack them once the main column gets tight. */
@media(max-width:980px){ .pl-listing{ grid-template-columns:1fr; } }

/* Collapsed listing — opens to reveal the full .pl-listing inside. */
.pl-listing-collapsed{
  background:var(--pl-white);
  border:1.5px solid #d8dce8; border-radius:var(--pl-radius-card);
  margin-bottom:var(--pl-gap-card);
  box-shadow:var(--pl-shadow-card);
}
.pl-listing-collapsed > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:14px;
  padding:14px 18px;
  font-size:14px; color:var(--pl-navy);
}
.pl-listing-collapsed > summary::-webkit-details-marker{ display:none; }
.pl-listing-collapsed-title{
  flex:1; min-width:0; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pl-listing-collapsed-price{
  flex-shrink:0; font-weight:700; color:var(--pl-navy);
}
.pl-listing-collapsed-price .cur{ color:var(--pl-text-mute); font-weight:600; margin-left:3px; }
.pl-listing-collapsed-chev{
  flex-shrink:0; color:var(--pl-text-mute); font-size:13px;
  transition:transform .15s;
}
.pl-listing-collapsed[open] .pl-listing-collapsed-chev{ transform:rotate(180deg); }
.pl-listing-collapsed[open] > .pl-listing{
  border:none; box-shadow:none; margin-bottom:0;
  border-top:1px solid var(--pl-line); border-radius:0;
}
.pl-listing-photo{
  position:relative; background:var(--pl-bg); border-radius:8px; overflow:hidden;
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
}
.pl-listing-photo img{ width:100%; height:100%; object-fit:contain; display:block; }
.pl-listing-photo .flag{
  position:absolute; top:14px; left:0; background:var(--pl-navy); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 14px;
}
.pl-listing-photo .noimg{ color:var(--pl-line-strong); }
.pl-listing-photo .zoom{
  position:absolute; right:10px; bottom:10px; width:32px; height:32px;
  background:rgba(255,255,255,.92); border:1px solid var(--pl-line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--pl-navy); cursor:pointer;
}
.pl-listing-info h1{
  font-size:24px; font-weight:700; color:var(--pl-navy); letter-spacing:-.01em;
  line-height:1.25; margin:0 0 14px; padding-bottom:14px; border-bottom:1px solid var(--pl-line);
}
@media(max-width:760px){
  .pl-listing-info h1{
    font-size:18px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
  }
}
.pl-spec{ display:grid; grid-template-columns:minmax(0,max-content) minmax(0,1fr); gap:8px 18px; margin:0 0 16px; }
.pl-spec dt{ font-size:13px; color:var(--pl-text-mute); }
.pl-spec dd{ font-size:13.5px; color:var(--pl-navy); margin:0; font-weight:600; word-break:break-word; }
.pl-price{
  font-size:32px; font-weight:700; color:var(--pl-navy);
  letter-spacing:-.02em; margin:8px 0 12px;
}
@media(max-width:760px){ .pl-price{ font-size:26px; } }
.pl-price .cur{ font-size:22px; color:var(--pl-text-mute); font-weight:600; margin-left:6px; }
.pl-price .unit{ font-size:13px; color:var(--pl-text-mute); font-weight:500; margin-left:10px; }
.pl-listing-info .pl-report{
  display:inline-flex; align-items:center; gap:5px; margin-top:10px;
  font-size:12px; color:var(--pl-text-mute); text-decoration:none;
}
.pl-listing-info .pl-report svg{ width:14px; height:14px; fill:currentColor; }
.pl-badge.xl{ font-size:12px; padding:6px 14px; }

/* Skeleton badge-class aliases so templates can keep
   class="pl-badge {{ deal.state_badge_class }}". */
.pl-badge.badge-await{ background:#fff4dc; color:#84620e; }
.pl-badge.badge-held{ background:#e3efff; color:#0044a3; }
.pl-badge.badge-ok{ background:#e7f8ee; color:#1f7a3d; }
.pl-badge.badge-warn{ background:#ffe8e8; color:#a32020; }
.pl-badge.badge-muted{ background:#e8eaf3; color:var(--pl-navy); }

/* ---- Secure-transaction strip (inside deal page) ---- */
.pl-secure-strip{
  background:var(--pl-white); border:1px solid var(--pl-line);
  border-left:3px solid var(--pl-blue); border-radius:10px;
  padding:18px 22px; margin-bottom:16px;
}
.pl-secure-strip .hdr{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; flex-wrap:wrap; margin-bottom:14px;
}
.pl-secure-strip h3{ font-size:14px; font-weight:700; color:var(--pl-navy); margin:0; }
.pl-secure-strip .more{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  color:var(--pl-blue-text); text-decoration:underline; cursor:pointer;
  background:none; border:none; padding:0; font-family:inherit;
}
.pl-secure-strip .items{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:700px){ .pl-secure-strip .items{ grid-template-columns:1fr; } }
.pl-secure-strip .it{ display:flex; gap:10px; align-items:flex-start; }
.pl-secure-strip .it .ico{
  flex-shrink:0; width:32px; height:32px; background:#eaf3ff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--pl-blue);
}
.pl-secure-strip .it .ico svg{ width:16px; height:16px; fill:currentColor; }
.pl-secure-strip .it .t{ font-size:13px; font-weight:700; color:var(--pl-navy); line-height:1.35; }
.pl-secure-strip .it .d{ font-size:11.5px; color:var(--pl-text-mute); line-height:1.45; margin-top:2px; }

/* ---- Deal state header + 7-step progress ---- */
.pl-statehead{
  background:linear-gradient(135deg, var(--pl-navy) 0%, var(--pl-navy-2) 100%);
  color:#fff; border-radius:10px; padding:26px 28px; margin-bottom:18px;
  position:relative; overflow:hidden;
}
.pl-statehead-top{
  display:flex; justify-content:space-between; align-items:center;
  gap:14px; flex-wrap:wrap; margin-bottom:4px;
}
.pl-statehead .pl-eyebrow{
  text-align:left; color:#9bc4f5; margin-bottom:0;
}
.pl-statehead-help{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  color:#fff; font-family:inherit; font-size:11.5px; font-weight:600;
  letter-spacing:.04em; padding:5px 12px; border-radius:999px; cursor:pointer;
  transition:background .12s, border-color .12s;
}
.pl-statehead-help:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.45); }
.pl-statehead h1{ color:#fff; font-size:25px; font-weight:700; margin:0 0 6px; line-height:1.2; }
.pl-statehead .pl-statehead-sub{ color:rgba(255,255,255,.78); font-size:13.5px; }

.pl-progress{
  display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:22px;
}
@media(max-width:1080px){ .pl-progress{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:620px){ .pl-progress{ grid-template-columns:repeat(2,1fr); } }

/* --- Default = upcoming/inactive step. Solid (not translucent) navy-tint so
   text contrast is consistent regardless of the gradient behind it. --- */
.pl-progress-step{
  background:#2a2f5e;
  border:1px solid #43487a;
  border-radius:8px; padding:12px 12px 14px;
}
.pl-progress-step .n{
  width:26px; height:26px; border-radius:50%;
  background:#565b8c; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; margin-bottom:8px;
}
.pl-progress-step h4{
  font-size:12.5px; font-weight:700; color:#fff; margin:0 0 4px;
}
/* specificity bump: body.pl-page p (0,1,2) would otherwise win and paint
   the description dark-on-dark. */
.pl-statehead .pl-progress-step p{
  font-size:11.5px; color:#c4c7dd; line-height:1.45; margin:0;
}

/* --- Done = green-tinted panel, white text reads cleanly on the dark tint. --- */
.pl-progress-step.done{
  background:#2f4a2a;
  border-color:#5a8a3c;
}
.pl-progress-step.done .n{
  background:var(--pl-green); color:var(--pl-navy);
}
.pl-progress-step.done .n span{ display:none; }
.pl-progress-step.done .n::after{ content:'\2713'; font-size:14px; font-weight:800; }
.pl-progress-step.done h4{ color:#fff; }
.pl-progress-step.done p{ color:#d3e8c4; }

/* --- Active = bright blue chip, fully opaque text. --- */
.pl-progress-step.active{
  background:var(--pl-blue);
  border-color:var(--pl-blue);
  box-shadow:0 4px 14px rgba(0,115,229,.4);
}
.pl-progress-step.active .n{
  background:#fff; color:var(--pl-blue);
}
.pl-progress-step.active h4{ color:#fff; }
.pl-progress-step.active p{ color:#fff; }

/* ---- Key-value SEPA block with copy buttons ---- */
.pl-kv dd{ display:flex; align-items:center; gap:10px; justify-content:space-between; }
.pl-kv dd .copy{
  flex-shrink:0; font-size:11px; font-weight:600; font-family:inherit;
  background:var(--pl-white); color:var(--pl-blue);
  border:1px solid var(--pl-line-strong); border-radius:5px;
  padding:4px 10px; cursor:pointer; transition:background .12s, color .12s, border-color .12s;
}
.pl-kv dd .copy:hover{ background:var(--pl-blue); color:#fff; border-color:var(--pl-blue); }
.pl-kv dd .copy.ok{ background:#e7f8ee; border-color:#bfe5cb; color:#1f7a3d; }
.pl-kv.boxed{
  background:var(--pl-bg); border:1px solid var(--pl-line);
  border-radius:8px; padding:16px 18px; gap:10px 18px;
}

/* Mobile: the 180px label column + flex value+Copy crushes long strings
   (IBANs, BICs) into a one-character-per-line column. Stack vertically and
   force the value to wrap whole characters, never break-words across rows. */
@media(max-width:600px){
  .pl-kv{ grid-template-columns:1fr; gap:14px 0; }
  .pl-kv dt{
    font-size:11px; text-transform:uppercase; letter-spacing:.05em;
    margin-bottom:2px; font-weight:600;
  }
  .pl-kv dd{
    flex-wrap:wrap; gap:6px 10px;
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:13.5px;
  }
  .pl-kv dd > span,
  .pl-kv dd > [data-copy]{
    word-break:break-all; min-width:0; flex:1 1 100%;
  }
  .pl-kv dd .copy{
    flex:0 0 auto; font-size:10.5px; padding:3px 8px;
    margin-left:auto;
  }
  .pl-kv.boxed{ padding:12px 14px; }
}

/* ---- Pay-warning callout ---- */
.pl-pay-warning{
  display:flex; gap:12px; background:#fff6ed; border:1px solid #f6ad55;
  color:#7b341e; border-radius:8px; padding:14px 16px;
  line-height:1.55; font-size:13.5px; margin:16px 0;
}
.pl-pay-warning svg{ flex-shrink:0; width:22px; height:22px; fill:#dd6b20; margin-top:1px; }
.pl-pay-warning strong{ color:#7b341e; }
.pl-pay-warning a{ color:#7b341e; text-decoration:underline; }

/* ---- Chat / messages ---- */
/* Inverted scheme: the chat container is the tinted panel so message bubbles
   (white + light-blue) read as distinct blocks against it instead of floating
   on the surrounding white card. */
.pl-chat{
  display:flex; flex-direction:column; gap:10px; margin-bottom:14px;
  max-height:360px; overflow-y:auto;
  background:var(--pl-bg); border:1px solid var(--pl-line); border-radius:8px;
  padding:14px 12px;
}
.pl-chat .msg{
  background:var(--pl-white); border:1px solid var(--pl-line); border-radius:10px;
  padding:11px 15px; font-size:13.5px; color:var(--pl-text); line-height:1.55; max-width:86%;
  box-shadow:0 1px 2px rgba(20,28,80,.04);
}
.pl-chat .msg.mine{ align-self:flex-end; background:#dceaff; border-color:#b9d2ff; }
.pl-chat .msg .who{
  font-weight:700; color:var(--pl-navy); font-size:11px;
  letter-spacing:.04em; text-transform:uppercase; margin-bottom:3px;
}
.pl-chat .msg .when{ font-size:11px; color:var(--pl-text-faint); margin-top:5px; }
.pl-chat .empty{ color:var(--pl-text-mute); font-size:13px; text-align:center; padding:22px; }

/* ---- Plain input (non-floating; admin notes, chat composer, search) ---- */
.pl-input,
.pl-textarea{
  width:100%; font-family:inherit; font-size:14.5px; color:var(--pl-navy);
  background:var(--pl-white); border:1px solid var(--pl-line); border-radius:6px;
  padding:11px 13px; transition:border-color .15s, box-shadow .15s;
}
.pl-textarea{ min-height:90px; resize:vertical; line-height:1.5; }
.pl-input:focus,
.pl-textarea:focus{
  outline:none; border-color:var(--pl-blue);
  box-shadow:0 0 0 3px rgba(0,115,229,.12);
}
.pl-label{
  display:block; font-size:12.5px; font-weight:600; color:var(--pl-navy);
  margin:0 0 6px; letter-spacing:.01em;
}
.pl-hint{ font-size:12px; color:var(--pl-text-mute); margin-top:6px; line-height:1.5; }
.pl-inline-form{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.pl-inline-form .pl-input{ flex:1; min-width:240px; }

/* Two-up form rows for admin forms */
.pl-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; margin-bottom:16px; }
@media(max-width:560px){ .pl-form-row{ grid-template-columns:1fr; } }
.pl-form-row > div{ min-width:0; }
.pl-form-row label{
  display:block; font-size:12.5px; font-weight:600; color:var(--pl-navy);
  margin:0 0 6px; letter-spacing:.01em;
}
.pl-form-row input[type=text],
.pl-form-row input[type=email],
.pl-form-row input[type=tel],
.pl-form-row input[type=number],
.pl-form-row input[type=url],
.pl-form-row input[type=date],
.pl-form-row input[type=datetime-local],
.pl-form-row select,
.pl-form-row textarea{
  width:100%; font-family:inherit; font-size:14.5px; color:var(--pl-navy);
  background:var(--pl-white); border:1px solid var(--pl-line); border-radius:6px;
  padding:11px 13px; transition:border-color .15s, box-shadow .15s;
}
.pl-form-row textarea{ min-height:90px; resize:vertical; line-height:1.5; }
.pl-form-row input:focus,
.pl-form-row select:focus,
.pl-form-row textarea:focus{
  outline:none; border-color:var(--pl-blue);
  box-shadow:0 0 0 3px rgba(0,115,229,.12);
}

/* .pl-form-block auto-styles a bare label + input/select/textarea pair
   (drop-in replacement for the skeleton .field block). */
.pl-form-block{ margin-bottom:16px; }
.pl-form-block > label{
  display:block; font-size:12.5px; font-weight:600; color:var(--pl-navy);
  margin:0 0 6px; letter-spacing:.01em;
}
.pl-form-block > input[type=text],
.pl-form-block > input[type=email],
.pl-form-block > input[type=tel],
.pl-form-block > input[type=number],
.pl-form-block > input[type=password],
.pl-form-block > input[type=url],
.pl-form-block > input[type=date],
.pl-form-block > input[type=datetime-local],
.pl-form-block > input[type=file],
.pl-form-block > select,
.pl-form-block > textarea{
  width:100%; font-family:inherit; font-size:14.5px; color:var(--pl-navy);
  background:var(--pl-white); border:1px solid var(--pl-line); border-radius:6px;
  padding:11px 13px; transition:border-color .15s, box-shadow .15s;
}
.pl-form-block > input[type=file]{ padding:8px 10px; font-size:13px; }
.pl-form-block > textarea{ min-height:90px; resize:vertical; line-height:1.5; }
.pl-form-block > input:focus,
.pl-form-block > select:focus,
.pl-form-block > textarea:focus{
  outline:none; border-color:var(--pl-blue);
  box-shadow:0 0 0 3px rgba(0,115,229,.12);
}
.pl-form-block .pl-hint{ margin-top:6px; }

/* ---- Modal ---- */
.pl-modal-shade{
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,32,.55); align-items:center; justify-content:center; padding:24px;
}
.pl-modal-shade.open{ display:flex; }
.pl-modal{
  background:var(--pl-white); border-radius:12px; max-width:560px; width:100%;
  max-height:88vh; overflow-y:auto; box-shadow:0 24px 64px rgba(0,0,32,.4);
}
.pl-modal .head{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 24px; border-bottom:1px solid var(--pl-line);
}
.pl-modal .head h3{ font-size:19px; font-weight:700; color:var(--pl-navy); margin:0; }
.pl-modal .head button{
  background:none; border:none; cursor:pointer; color:var(--pl-text-mute);
  font-size:22px; line-height:1; padding:0; width:30px; height:30px;
}
.pl-modal .head button:hover{ color:var(--pl-navy); }
.pl-modal .body{ padding:22px 24px; }
.pl-modal .body h4{ font-size:13px; font-weight:700; color:var(--pl-navy); margin:14px 0 4px; }
.pl-modal .body h4:first-child{ margin-top:0; }
.pl-modal .body p{ font-size:13.5px; color:var(--pl-text); line-height:1.65; margin:0 0 8px; }
.pl-modal .body ol{ margin:6px 0 12px 20px; color:var(--pl-text); font-size:13.5px; line-height:1.7; }

/* ---- Card eyebrow (replaces .card-sub) ---- */
.pl-card-sub{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--pl-blue-text); margin-bottom:4px;
}
.pl-card.accent .pl-card-sub{ color:var(--pl-blue-text); }
.pl-card.success{ border-color:#9fd3b0; background:#f3fbf5; }
.pl-card.success .pl-card-sub{ color:#1f7a3d; }

/* ---- Admin-only card (deal_detail) — purple accent + label badge ---- */
.pl-card.admin-only{
  border-left:4px solid #6b46c1;
  background:linear-gradient(180deg, rgba(107,70,193,.04) 0%, rgba(255,255,255,1) 80%);
}
.pl-card.admin-only > .pl-card-sub{
  display:inline-flex; align-items:center; gap:6px;
  background:#6b46c1; color:#fff;
  padding:3px 10px; border-radius:99px;
  font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase;
}
.pl-card.admin-only > .pl-card-sub::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.45);
}

/* ---- Admin controls sub-sections (money / reversals / utility) ---- */
.pl-admin-actions{ margin-top:14px; }
.pl-admin-actions:first-of-type{ margin-top:6px; }
.pl-admin-actions-label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--pl-text-mute); margin-bottom:8px;
}
.pl-admin-actions-danger{
  padding-top:14px; border-top:1px dashed #f0b6b6;
}
.pl-admin-actions-danger .pl-admin-actions-label{ color:#a32020; }
.pl-card h2.normal{
  text-transform:none; letter-spacing:-.01em; font-size:18px;
  font-weight:700; color:var(--pl-navy); margin-bottom:8px;
}
.pl-card .pl-hint{ margin-bottom:12px; }

/* ---- Parties block (deal counterparties) ---- */
.pl-parties{ display:grid; grid-template-columns:1fr; gap:20px; }
@media(min-width:680px){ .pl-parties{ grid-template-columns:1fr 1fr; } }
.pl-party h3{
  margin:0 0 6px; font-size:11px; font-weight:700; letter-spacing:.1em;
  color:var(--pl-text-faint); text-transform:uppercase;
}
.pl-party p{ margin:0; line-height:1.6; font-size:14px; color:var(--pl-text); }
.pl-party strong{ color:var(--pl-navy); }

/* ---- Table polish for admin deal lists ---- */
.pl-table.data,
.pl-table{ width:100%; border-collapse:collapse; font-size:14px; }
.pl-table th.num,
.pl-table td.num{ text-align:right; }
.pl-table td .ref,
.pl-table .ref{ color:var(--pl-blue-text); font-weight:600; text-decoration:none; }
.pl-table .ref:hover{ text-decoration:underline; }
.pl-table .pl-badge{ white-space:nowrap; }
.pl-table-empty{
  text-align:center; padding:48px 16px; color:var(--pl-text-mute);
}
.pl-table-empty .pl-empty-title{
  font-size:15px; color:var(--pl-navy); font-weight:700; margin-bottom:6px;
}

/* ---- Generic page-section divider + helpers ---- */
.pl-divider{ border:none; border-top:1px solid var(--pl-line); margin:22px 0; }
.pl-card h2.section-title{
  text-transform:none; letter-spacing:-.01em; font-size:16px;
  color:var(--pl-navy); font-weight:700;
}

/* ---- Chat with avatars + composer ---- */
/* The avatar sits in a 44px gutter inside the chat's own padding. The
   message max-width is capped so msg + avatar never exceed the padding box
   (avoids a horizontal scrollbar inside the .pl-chat overflow container). */
.pl-chat.has-avatars{ padding-left:44px; padding-right:44px; }
.pl-chat.has-avatars .msg{ max-width:calc(86% - 44px); }
@media(max-width:600px){
  .pl-chat.has-avatars{ padding-left:6px; padding-right:6px; }
  .pl-chat.has-avatars .msg{ max-width:86%; }
}
.pl-chat .msg{ position:relative; }
.pl-chat .msg .ava{
  position:absolute; left:-40px; top:0;
  width:32px; height:32px; border-radius:50%;
  background:var(--pl-line-strong); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12.5px;
}
.pl-chat .msg.mine .ava{ left:auto; right:-40px; background:var(--pl-blue); color:#fff; }
@media(max-width:600px){ .pl-chat .msg .ava{ display:none; } }
.pl-chat .msg .meta{
  display:flex; align-items:center; gap:8px; margin-top:5px;
  font-size:11px; color:var(--pl-text-faint);
}
.pl-chat .msg .meta .read{ display:inline-flex; align-items:center; gap:3px; }
.pl-chat .msg .meta .read svg{ width:13px; height:13px; fill:#7ba4e0; }
.pl-chat .msg .meta .read.seen svg{ fill:#2e9c52; }
.pl-chat-form{ display:flex; gap:10px; align-items:center; }
.pl-chat-form .attach{
  flex-shrink:0; width:42px; height:42px; border-radius:50%;
  background:var(--pl-bg); border:1px solid var(--pl-line);
  display:flex; align-items:center; justify-content:center;
  color:var(--pl-text-mute); text-decoration:none;
}
.pl-chat-form .attach:hover{ background:#eaf3ff; color:var(--pl-blue); }
.pl-chat-form .attach svg{ width:18px; height:18px; fill:currentColor; }
.pl-chat-form .ta{ flex:1; min-width:0; }
.pl-chat-form textarea{
  width:100%; min-height:42px; padding:11px 16px; border-radius:22px;
  resize:none; font-family:inherit; font-size:14px; color:var(--pl-navy);
  border:1px solid var(--pl-line); background:var(--pl-white); line-height:1.4;
}
.pl-chat-form textarea:focus{
  outline:none; border-color:var(--pl-blue);
  box-shadow:0 0 0 3px rgba(0,115,229,.12);
}
.pl-chat-form .pl-btn{ flex-shrink:0; }
.pl-chat-help{ font-size:11.5px; color:var(--pl-text-faint); margin-top:8px; line-height:1.5; }
.pl-chat-help a{ color:var(--pl-blue-text); }

/* ---- Activity timeline ---- */
.pl-timeline{ list-style:none; padding:0; margin:0; }
.pl-timeline li{
  position:relative; padding:0 0 16px 22px;
  border-left:1px solid var(--pl-line); margin-left:4px;
}
.pl-timeline li:last-child{ border-left-color:transparent; padding-bottom:0; }
.pl-timeline li::before{
  content:""; position:absolute; left:-5px; top:3px;
  width:9px; height:9px; border-radius:50%;
  background:var(--pl-line-strong);
}
.pl-timeline li.done::before{
  background:var(--pl-green); box-shadow:0 0 0 2px rgba(146,226,43,.35);
}
.pl-timeline .when{
  font-size:11px; color:var(--pl-text-mute);
  white-space:nowrap; /* prevent wrap that visually merges with the dot pseudo */
}
.pl-timeline .what{ font-weight:700; color:var(--pl-navy); font-size:13.5px; margin:2px 0; }
.pl-timeline .note{ font-size:13px; color:var(--pl-text); white-space:pre-wrap; }
/* Compact rail variant: avoid the dot pseudo overlapping date digits when
   the timeline sits in a narrow rail card. */
.pl-timeline-compact .when{ white-space:nowrap; }

/* ---- Lightbox ---- */
.pl-lightbox{
  display:none; position:fixed; inset:0; z-index:1100;
  background:rgba(0,0,16,.88); align-items:center; justify-content:center; padding:32px;
}
.pl-lightbox.open{ display:flex; }
.pl-lightbox img{
  max-width:100%; max-height:100%; border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.pl-lightbox .x{
  position:absolute; top:20px; right:24px; color:#fff; font-size:32px;
  cursor:pointer; background:none; border:none; opacity:.8;
}
.pl-lightbox .x:hover{ opacity:1; }

/* ---- Counterparty card ---- */
.pl-party-card{
  background:var(--pl-white); border:1px solid var(--pl-line);
  border-radius:10px; padding:22px 24px; box-shadow:var(--pl-shadow-card);
  margin-bottom:18px;
}
.pl-party-card h3{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--pl-text-mute); margin:0 0 12px; padding-bottom:10px;
  border-bottom:2px solid var(--pl-blue);
}
.pl-party-card .country{
  display:flex; gap:8px; align-items:center; font-size:14px;
  color:var(--pl-navy); font-weight:700; margin-bottom:10px;
}
.pl-party-card .country .fl{ font-size:18px; }
.pl-party-card .row{ font-size:13px; color:var(--pl-text); margin:7px 0; line-height:1.45; }
.pl-party-card .row b{ color:var(--pl-navy); }
.pl-party-card .note{
  font-size:12.5px; color:var(--pl-text-mute); margin-top:12px;
  padding-top:12px; border-top:1px solid var(--pl-line); line-height:1.5;
}
.pl-party-card .how-to-buy{
  margin-top:12px; width:100%; background:var(--pl-blue); color:#fff;
  border:none; border-radius:6px; padding:11px; font-weight:600; font-size:13px;
  cursor:pointer; font-family:inherit; letter-spacing:.04em; text-transform:uppercase;
}
.pl-party-card .how-to-buy:hover{ background:var(--pl-blue-soft); }
.pl-party-card-actions{
  margin-top:12px; display:flex; flex-direction:column; gap:6px;
}
.pl-party-card-actions .pl-btn{ width:100%; }

/* ---- Secure-deal modal extras ---- */
.pl-modal .intro{
  font-size:14px; color:var(--pl-text); line-height:1.6;
  text-align:center; margin:0 0 18px;
}
.pl-modal .intro strong{ color:var(--pl-navy); }
.pl-modal ol.secure-steps{
  list-style:none; padding:0; margin:0 0 18px; text-align:left;
}
.pl-modal ol.secure-steps li{
  display:flex; gap:12px; align-items:flex-start;
  padding:8px 0; font-size:13.5px; color:var(--pl-text); line-height:1.5;
}
.pl-modal ol.secure-steps li .n{
  flex-shrink:0; width:24px; height:24px; border-radius:50%;
  background:var(--pl-blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
}
.pl-modal ol.secure-steps li strong{ color:var(--pl-navy); }
.pl-modal .safe-line{
  display:flex; gap:10px; align-items:center; justify-content:center;
  background:#f3fbf5; border:1px solid #bfe5cb; border-radius:8px;
  padding:12px 16px; margin:0 0 16px; font-size:13.5px; color:#1f4d2c;
}
.pl-modal .secure-cta .pl-btn{ width:100%; }

/* ---- FAQ accordion (deal page common questions) ---- */
.pl-faq details{
  border:1px solid var(--pl-line); border-radius:8px; padding:0;
  margin-bottom:8px; background:var(--pl-white); transition:border-color .15s;
}
.pl-faq details[open]{ border-color:var(--pl-blue); }
.pl-faq summary{
  padding:12px 16px; font-weight:600; color:var(--pl-navy); font-size:14px;
  cursor:pointer; list-style:none; display:flex;
  justify-content:space-between; align-items:center;
}
.pl-faq summary::-webkit-details-marker{ display:none; }
.pl-faq summary::after{
  content:'+'; color:var(--pl-text-mute); font-size:18px; font-weight:700; margin-left:10px;
}
.pl-faq details[open] summary::after{ content:'\2013'; }
.pl-faq details > div{
  padding:4px 16px 14px; color:var(--pl-text); font-size:13.5px; line-height:1.65;
}

/* ============================================================
   PAYLAX · phone tabs (deal_detail.html)
   Below 600px, a single deal page is too long to scroll. The
   template wraps its sections in [data-tab-pane=action|details|
   activity] groups and renders a <nav class="pl-tabs"> that flips
   the active pane via a data-active-tab attribute on the shell.
   ============================================================ */
.pl-tabs{ display:none; }
[data-tab-pane]{ /* desktop: all panes always visible */ }
@media(max-width:599px){
  .pl-tabs{
    display:flex; gap:6px; padding:6px;
    background:var(--pl-white); border:1px solid var(--pl-line);
    border-radius:8px; margin:0 0 14px;
    position:sticky; top:8px; z-index:5;
    box-shadow:var(--pl-shadow-card);
  }
  .pl-tab{
    flex:1; padding:9px 8px; font-size:13px; font-weight:600;
    background:none; border:none; border-radius:6px;
    color:var(--pl-text-mute); cursor:pointer; font-family:inherit;
    transition:background .12s, color .12s;
  }
  .pl-tab[aria-selected="true"]{
    background:var(--pl-blue); color:#fff;
  }
  .pl-tab:hover:not([aria-selected="true"]){ background:var(--pl-bg); color:var(--pl-navy); }
  /* Pane visibility — only the active pane renders on phone. */
  .pl-shell[data-active-tab="action"]   [data-tab-pane]:not([data-tab-pane="action"])   { display:none; }
  .pl-shell[data-active-tab="details"]  [data-tab-pane]:not([data-tab-pane="details"])  { display:none; }
  .pl-shell[data-active-tab="activity"] [data-tab-pane]:not([data-tab-pane="activity"]) { display:none; }
  /* Sidebar hidden on phone — nav is accessible via the top .pl-app-header. */
  .pl-shell.has-rail > .pl-sidebar{ display:none; }
}

/* ---- Tinted inner panel (utility) -----------------------------------------
   Used inside .pl-card to delineate sub-blocks (SMS export, admin sub-rows,
   timelines, key-value pairs) from the card's white background so text reads
   as distinct grouped content instead of a wall of white. */
.pl-panel{
  background:var(--pl-bg);
  border:1px solid var(--pl-line);
  border-radius:6px;
  padding:14px 16px;
  margin:14px 0;
}
.pl-panel:last-child{ margin-bottom:0; }
.pl-panel + .pl-panel{ margin-top:14px; }
.pl-panel > h3{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--pl-text-mute); margin:0 0 10px;
}

/* ============================================================
   PAYLAX · Home dashboard (left icon rail + floating white card)
   Matches the reference mockup: dark navy backdrop, slim left
   icon rail, floating white card holds the page content.
   ============================================================ */

/* Decorative dark-navy backdrop — opt in via body class `pl-app-bg`. */
body.pl-page.pl-app-bg{
  background:linear-gradient(135deg, #1a2068 0%, #000040 60%, #050828 100%) fixed;
  background-attachment:fixed;
}
body.pl-page.pl-app-bg::before{
  /* subtle radial highlight top-left */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(circle at 0% 0%, rgba(155,196,245,.06) 0%, transparent 50%);
}

/* The floating white card that holds the page content. */
.pl-app-card{
  position:relative; z-index:1;
  background:var(--pl-white); border-radius:14px;
  margin:24px 24px 24px 88px;
  box-shadow:0 24px 80px rgba(0,0,16,.45);
  min-height:calc(100vh - 48px);
  /* Clip wide children (e.g. the deals table) so they don't bleed past
     the card's rounded edge and trigger document-level horizontal scroll. */
  overflow:hidden;
}
/* The body inside the card scrolls its own content if needed — narrow
   viewports keep the deals table scrollable without the whole page scrolling. */
.pl-app-card-body{ overflow-x:hidden; }
/* Belt-and-braces: never let the body itself scroll horizontally on
   pages that opt into the app-card chrome. The rail off-canvas state
   uses translateX which could otherwise expand scrollWidth. */
body.pl-page.pl-app-bg{ overflow-x:hidden; }

/* Left vertical icon-only nav rail. */
.pl-app-rail{
  position:fixed; top:24px; bottom:24px; left:14px; width:52px;
  background:transparent;
  display:flex; flex-direction:column; align-items:center;
  padding:18px 0; z-index:60;
}
.pl-app-rail-logo{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; margin-bottom:14px;
  text-decoration:none;
}
.pl-app-rail-logo img{ height:24px; width:auto; display:block; }
.pl-app-rail a,
.pl-app-rail button{
  width:38px; height:38px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.72); text-decoration:none;
  background:none; border:none; cursor:pointer;
  margin-bottom:6px; transition:background .12s, color .12s, transform .12s;
  font-family:inherit;
}
.pl-app-rail a:hover,
.pl-app-rail button:hover{
  background:rgba(255,255,255,.10); color:#fff; text-decoration:none;
}
body.pl-page .pl-app-rail a{ color:rgba(255,255,255,.72); }
body.pl-page .pl-app-rail a:hover{ color:#fff; text-decoration:none; }
.pl-app-rail a.active{
  background:var(--pl-white); color:var(--pl-blue);
  box-shadow:0 6px 16px rgba(0,0,32,.3);
}
body.pl-page .pl-app-rail a.active{ color:var(--pl-blue); }
.pl-app-rail svg{ width:18px; height:18px; fill:currentColor; }
.pl-app-rail-spacer{ flex:1; }
.pl-app-rail .pl-app-rail-logout{ color:#ff8a8a; }
.pl-app-rail .pl-app-rail-logout:hover{
  background:rgba(255,138,138,.16); color:#ffb0b0;
}

/* Slim top strip inside the white card (logo + lang switcher). */
.pl-app-topstrip{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 32px; border-bottom:1px solid var(--pl-line);
  gap:14px;
}
.pl-app-topstrip-menu{
  display:none; background:none; border:none; cursor:pointer;
  width:36px; height:36px; border-radius:6px;
  color:var(--pl-navy); font-size:18px;
}
.pl-app-topstrip-menu:hover{ background:var(--pl-bg); }
.pl-app-topstrip-logo img{ height:26px; }
.pl-app-topstrip-right{
  display:flex; align-items:center; gap:14px; margin-left:auto;
}
.pl-app-topstrip .pl-lang-form{ margin:0; }

/* Page content padding inside the card. */
.pl-app-card-body{ padding:28px 36px 24px; }

/* Slim app footer inside the card. */
.pl-app-footer-slim{
  border-top:1px solid var(--pl-line);
  padding:18px 32px;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  font-size:12.5px; color:var(--pl-text-mute); flex-wrap:wrap;
}
.pl-app-footer-slim a{ color:var(--pl-text-mute); }
.pl-app-footer-slim a:hover{ color:var(--pl-blue-text); }

/* Mobile: rail collapses, hamburger appears. */
@media(max-width:880px){
  body.pl-page.pl-app-bg .pl-app-card{ margin:8px; border-radius:10px; min-height:calc(100vh - 16px); }
  .pl-app-rail{
    transform:translateX(-110%); transition:transform .25s;
    background:rgba(0,0,32,.96); width:72px; padding:14px 0;
    top:0; bottom:0; left:0; border-radius:0;
  }
  body.is-railopen .pl-app-rail{ transform:translateX(0); }
  body.is-railopen::after{
    content:""; position:fixed; inset:0; background:rgba(0,0,16,.45);
    z-index:55;
  }
  .pl-app-topstrip-menu{ display:inline-flex; }
  .pl-app-topstrip{ padding:14px 16px; }
  .pl-app-card-body{ padding:18px 16px; }
}

/* Below 480px the top strip's user pill + lang switcher + logo can't
   all fit. Hide the role badge + display name, shrink the logo + lang chip. */
@media(max-width:480px){
  .pl-app-topstrip{ padding:12px 12px; gap:8px; }
  .pl-app-topstrip .pl-app-userpill{ display:none; }
  .pl-app-topstrip-logo img{ height:22px; }
  .pl-app-topstrip .pl-lang{ font-size:12px; padding:4px 6px; }
}

/* ============================================================
   PAYLAX · Home dashboard rows (metric tiles)
   ============================================================ */

.pl-home-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:18px; flex-wrap:wrap; margin:0 0 28px;
}
.pl-home-head h1{
  font-size:28px; font-weight:700; color:var(--pl-navy);
  margin:0; line-height:1.2;
}
.pl-home-head .pl-home-sub{
  color:var(--pl-text-mute); font-size:14px; margin-top:4px;
}

.pl-home-row{ margin-bottom:32px; }
.pl-home-row-title{
  font-size:14px; font-weight:500; color:var(--pl-text-mute);
  margin:0 0 4px; letter-spacing:0; text-transform:none;
}
.pl-home-row-sub{
  font-size:13px; color:var(--pl-text-mute); margin:0 0 16px;
}
.pl-home-row-title-connect{
  display:flex; align-items:center; gap:6px;
  font-size:17px; font-weight:700; color:var(--pl-navy);
  letter-spacing:-.005em; text-transform:none; margin-bottom:4px;
}
.pl-home-row-title-connect img{ height:18px; }
.pl-home-row-title-connect sup{ font-size:9px; color:var(--pl-text-mute); margin-left:2px; }

.pl-home-row-dates{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  margin:0 0 18px;
}
.pl-home-row-dates label{
  display:flex; flex-direction:column;
  font-size:11px; color:var(--pl-text-mute);
  letter-spacing:.04em;
}
.pl-home-row-dates input[type=date]{
  background:var(--pl-white); border:1px solid var(--pl-line);
  border-radius:6px; padding:8px 12px; font-size:13.5px; color:var(--pl-navy);
  font-family:inherit;
}
.pl-home-row-dates input:focus{
  outline:none; border-color:var(--pl-blue);
  box-shadow:0 0 0 3px rgba(0,115,229,.12);
}

.pl-home-tiles{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
@media(max-width:880px){ .pl-home-tiles{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .pl-home-tiles{ grid-template-columns:1fr; } }

.pl-home-tile{
  background:var(--pl-white);
  border:1.5px solid var(--pl-line); border-radius:10px;
  padding:22px 22px 18px;
  box-shadow:var(--pl-shadow-card);
  position:relative;
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
.pl-home-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(20,28,80,.12);
}
.pl-home-tile-icon{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600;
  margin-bottom:14px;
}
.pl-home-tile-icon svg{ width:18px; height:18px; }
.pl-home-tile-value{
  font-size:28px; font-weight:300; color:var(--pl-navy);
  letter-spacing:-.01em; line-height:1.1;
  margin:0 0 4px;
}
.pl-home-tile-asof{
  font-size:11.5px; color:var(--pl-text-mute);
}

/* Per-metric colour-coded icon + value. */
.pl-home-tile-out{
  border-left:3px solid var(--pl-green);
}
.pl-home-tile-out .pl-home-tile-icon{ color:#5fa321; }
.pl-home-tile-out .pl-home-tile-value{ color:#3d7a14; }

.pl-home-tile-held{
  border-left:3px solid var(--pl-blue);
}
.pl-home-tile-held .pl-home-tile-icon{ color:var(--pl-blue-text); }
.pl-home-tile-held .pl-home-tile-value{ color:var(--pl-blue-text); }

.pl-home-tile-refund{
  border-left:3px solid #e88c2e;
}
.pl-home-tile-refund .pl-home-tile-icon{ color:#b3640a; }
.pl-home-tile-refund .pl-home-tile-value{ color:#b3640a; }

.pl-home-tile-processed{
  border-left:3px solid var(--pl-navy);
}
.pl-home-tile-processed .pl-home-tile-icon{ color:var(--pl-navy); }
.pl-home-tile-processed .pl-home-tile-value{ color:var(--pl-navy); font-weight:600; }

.pl-home-row-connect{
  border-top:1px solid var(--pl-line); padding-top:24px;
}

.pl-home-deals h2{
  font-size:16px; font-weight:600; color:var(--pl-navy);
  letter-spacing:-.01em; text-transform:none;
  margin:0 0 14px;
}

/* ============================================================
   PAYLAX · Floating "+" FAB (open new deal)
   ============================================================ */
.pl-fab{
  position:fixed; right:24px; bottom:24px; z-index:100;
  width:56px; height:56px; border-radius:50%;
  background:var(--pl-blue); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:300; text-decoration:none;
  line-height:1; padding-bottom:3px;
  box-shadow:0 12px 32px rgba(0,115,229,.40);
  transition:transform .12s, box-shadow .12s, background .12s;
}
.pl-fab:hover{
  transform:translateY(-2px); background:var(--pl-blue-soft);
  box-shadow:0 16px 40px rgba(0,115,229,.5); text-decoration:none;
}
body.pl-page a.pl-fab{ color:#fff; }
body.pl-page a.pl-fab:hover{ color:#fff; text-decoration:none; }
/* Sit clear of the bottom-right support chat bubble. */
.pl-fab{ right:96px; }
@media(max-width:600px){
  .pl-fab{ right:84px; bottom:18px; width:52px; height:52px; font-size:28px; }
}

/* ============================================================
   PAYLAX · Categories grid (/categories/ public page)
   ============================================================ */
.pl-cat-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:56px 32px;
  max-width:1100px; margin:0 auto;
}
.pl-cat{ text-align:center; padding:8px; }
.pl-cat-icon{
  width:96px; height:96px; margin:0 auto 24px;
  display:flex; align-items:center; justify-content:center;
  color:var(--pl-navy);
}
.pl-cat-icon svg{ width:72px; height:72px; fill:currentColor; }
.pl-cat h3{
  font-size:18px; font-weight:700; color:var(--pl-navy);
  letter-spacing:.04em; text-transform:uppercase; margin:0 0 14px;
}
.pl-cat p{
  font-size:15.5px; color:var(--pl-text); line-height:1.55;
  max-width:320px; margin:0 auto;
}
@media(max-width:760px){ .pl-cat-grid{ grid-template-columns:1fr; gap:36px; } }
@media(min-width:761px) and (max-width:980px){ .pl-cat-grid{ grid-template-columns:repeat(2, 1fr); } }

/* ============================================================
   PAYLAX · Compact step strip & activity timeline (deal_detail)
   Inside the new app-card chrome, the 7-step strip eats too much
   vertical real estate. Shrink padding + type, keep all hierarchy
   (active step still pops, done still green).
   ============================================================ */
.pl-app-card-body .pl-progress{ gap:6px; }
.pl-app-card-body .pl-progress-step{ padding:8px 10px 10px; border-radius:7px; }
.pl-app-card-body .pl-progress-step .n{
  width:22px; height:22px; font-size:11px; margin-bottom:6px;
}
.pl-app-card-body .pl-progress-step h4{ font-size:11.5px; margin-bottom:2px; }
.pl-app-card-body .pl-statehead .pl-progress-step p{ font-size:10.5px; line-height:1.4; }
.pl-app-card-body .pl-statehead{ padding:18px 20px 16px; }
.pl-app-card-body .pl-statehead h1{ font-size:22px; }

/* Compact activity timeline used in the right rail on admin view */
.pl-timeline-compact li{ padding:6px 0 6px 18px; }
.pl-timeline-compact .when{ font-size:11px; }
.pl-timeline-compact .what{ font-size:12.5px; line-height:1.35; }

/* ============================================================
   PAYLAX · Status dots (compact in dense tables)
   ============================================================ */
.pl-dot{
  display:inline-flex; align-items:center; justify-content:center;
  width:12px; height:12px; border-radius:50%;
  font-size:9px; font-weight:700; color:#fff;
  line-height:1;
}
.pl-dot.ok{ background:#22c55e; }
.pl-dot.fail{ background:#dc2626; }
.pl-dot.warn{ background:#f59e0b; }

.pl-table-emaillog tbody tr.is-error{ background:rgba(220,38,38,.03); }

/* ============================================================
   PAYLAX · Admin settings — sticky section nav + sectioned cards
   ============================================================ */
.pl-settings-layout{
  display:grid; grid-template-columns:180px minmax(0,1fr); gap:24px;
  align-items:flex-start;
}
.pl-settings-nav{
  position:sticky; top:24px;
  display:flex; flex-direction:column; gap:2px;
  border-left:2px solid var(--pl-line); padding-left:14px;
}
.pl-settings-nav a{
  color:var(--pl-text-mute); text-decoration:none;
  font-size:13.5px; padding:6px 0;
  border-left:2px solid transparent; margin-left:-16px; padding-left:14px;
  transition:color .12s, border-color .12s;
}
.pl-settings-nav a:hover{ color:var(--pl-blue-text); text-decoration:none; }
.pl-settings-form{ display:flex; flex-direction:column; gap:18px; }
.pl-settings-logo-frame{
  background:var(--pl-navy); border-radius:8px;
  padding:14px 16px; margin-bottom:8px;
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
}
.pl-settings-logo-frame img{ height:48px; width:auto; display:block; }
.pl-settings-logo-frame span{ color:rgba(255,255,255,.82); font-size:12.5px; }
.pl-settings-save{
  position:sticky; bottom:0; background:var(--pl-white);
  padding:14px 0; border-top:1px solid var(--pl-line);
  display:flex; justify-content:flex-end;
  margin-top:6px;
}
@media(max-width:880px){
  .pl-settings-layout{ grid-template-columns:1fr; }
  .pl-settings-nav{ position:static; flex-direction:row; flex-wrap:wrap;
    border-left:none; border-bottom:1px solid var(--pl-line); padding:0 0 10px; }
  .pl-settings-nav a{
    border-left:none; border-bottom:2px solid transparent;
    margin:0; padding:6px 12px;
  }
}

/* ============================================================
   PAYLAX · Sortable / clickable data tables
   Used on admin/users and similar admin lists.
   ============================================================ */
.pl-table-clickable tbody tr{ transition:background .1s; }
.pl-table-clickable tbody tr:hover{ background:rgba(0,115,229,.04); }
.pl-table-sort{
  color:inherit; text-decoration:none;
  display:inline-flex; align-items:center; gap:4px;
}
.pl-table-sort:hover{ color:var(--pl-blue-text); text-decoration:none; }

/* ============================================================
   PAYLAX · Deal tabs + action cards (buyer/seller home)
   Reference shows tabbed Bought/Sold sections with photo-thumb cards
   instead of a plain table.
   ============================================================ */
.pl-deal-tabs{
  display:flex; gap:4px; border-bottom:1px solid var(--pl-line);
  margin:0 0 18px;
}
.pl-deal-tab{
  background:none; border:none; cursor:pointer;
  padding:10px 14px; margin-bottom:-1px;
  font:600 13.5px/1 inherit; color:var(--pl-text-mute);
  border-bottom:2px solid transparent;
  display:inline-flex; align-items:center; gap:8px;
  transition:color .12s, border-color .12s;
}
.pl-deal-tab:hover{ color:var(--pl-navy); }
.pl-deal-tab.active{
  color:var(--pl-blue-text); border-bottom-color:var(--pl-blue);
}
.pl-deal-tab-count{
  background:var(--pl-bg); color:var(--pl-text-mute);
  border-radius:99px; padding:2px 8px;
  font-size:11px; font-weight:600;
}
.pl-deal-tab.active .pl-deal-tab-count{
  background:rgba(0,115,229,.12); color:var(--pl-blue-text);
}

.pl-deal-cards{ display:flex; flex-direction:column; gap:12px; }
.pl-deal-card{
  display:grid;
  grid-template-columns:84px minmax(0,1fr);
  gap:18px; align-items:stretch;
  background:var(--pl-white);
  border:1px solid var(--pl-line);
  border-radius:10px; padding:14px;
  text-decoration:none; color:inherit;
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
.pl-deal-card:hover{
  transform:translateY(-1px); text-decoration:none;
  border-color:var(--pl-blue); box-shadow:0 8px 24px rgba(20,28,80,.08);
}
body.pl-page a.pl-deal-card{ color:inherit; }
body.pl-page a.pl-deal-card:hover{ color:inherit; text-decoration:none; }
.pl-deal-card-thumb{
  width:84px; height:84px; border-radius:8px;
  background:var(--pl-bg); display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
  color:var(--pl-text-faint);
}
.pl-deal-card-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.pl-deal-card-thumb svg{ width:36px; height:36px; }
.pl-deal-card-body{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.pl-deal-card-head{
  display:flex; align-items:center; gap:10px;
  font-size:12.5px; color:var(--pl-text-mute);
  flex-wrap:wrap;
}
.pl-deal-card-ref{
  font-weight:700; color:var(--pl-blue-text); letter-spacing:.02em;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12.5px;
}
.pl-deal-card-title{
  margin:0; font-size:15px; font-weight:600; color:var(--pl-navy);
  line-height:1.3;
}
.pl-deal-card-meta{
  font-size:13px; color:var(--pl-text-mute);
  display:flex; gap:6px; align-items:center; flex-wrap:wrap;
}
.pl-deal-card-amount{ color:var(--pl-navy); font-weight:600; }
.pl-deal-card-sep{ opacity:.5; }
.pl-deal-card-cta{
  margin-top:4px; font-size:13px; font-weight:600;
  color:var(--pl-blue-text);
}
.pl-deal-card-cta-muted{ color:var(--pl-text-mute); font-weight:500; }
.pl-deal-card-done .pl-deal-card-thumb{
  color:var(--pl-green);
  background:rgba(95,163,33,.08);
}
.pl-deal-empty{
  text-align:center; color:var(--pl-text-mute);
  padding:24px 0; margin:0;
}
@media(max-width:560px){
  .pl-deal-card{ grid-template-columns:64px minmax(0,1fr); gap:14px; padding:12px; }
  .pl-deal-card-thumb{ width:64px; height:64px; }
  .pl-deal-card-thumb svg{ width:28px; height:28px; }
  .pl-deal-card-title{ font-size:14px; }
}

/* Polish on the existing 4-step timeline to match the reference */
.pl-steps-vert .pl-step-icon{ width:84px; height:84px; }
.pl-steps-vert .pl-step-icon svg{ width:38px; height:38px; }
.pl-steps-vert::before{ left:41px; }
@media(max-width:560px){
  .pl-steps-vert .pl-step-icon{ width:58px; height:58px; }
  .pl-steps-vert .pl-step-icon svg{ width:26px; height:26px; }
  .pl-steps-vert::before{ left:28px; }
}

/* ============================================================
   PAYLAX · Buyer view: compact state-header + inline step-strip
   (deal_detail.html)
   ============================================================ */

/* Top-right amount + state badge inside the dark navy statehead */
.pl-statehead-row{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:18px; flex-wrap:wrap; margin-bottom:14px;
}
.pl-statehead-row > div:first-child{ min-width:0; flex:1 1 320px; }
.pl-statehead-money{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.pl-statehead-amount{
  font-size:26px; font-weight:300; color:#fff; line-height:1;
  letter-spacing:-.01em;
}
.pl-statehead .pl-statehead-headline{
  color:#fff; font-size:22px; font-weight:700; margin:0 0 6px; line-height:1.25;
  letter-spacing:-.01em;
}

/* 7 narrow rounded segments that act like a progress bar with clickable
   hot-zones. Margin-top gives breathing room below the amount/badge row. */
.pl-stepdots{
  list-style:none; padding:0; margin:18px 0 0;
  display:flex; align-items:center; gap:6px;
}
.pl-stepdots li{
  flex:1; height:6px; border-radius:3px;
  background:rgba(255,255,255,.18);
  cursor:pointer; transition:background .12s, transform .12s;
  position:relative;
  outline:none;
}
.pl-stepdots li.done{ background:var(--pl-green); }
.pl-stepdots li.active{
  background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.18);
}
.pl-stepdots li:hover{ background:rgba(255,255,255,.42); }
.pl-stepdots li.done:hover{ background:#a8d97a; }
.pl-stepdots li.active:hover{ background:#fff; }
.pl-stepdots li:focus-visible{ box-shadow:0 0 0 3px rgba(255,255,255,.5); }
/* Number is for screen-readers only; visual is the bar itself. */
.pl-stepdots li span{
  position:absolute; left:-9999px; opacity:0; pointer-events:none;
}

/* Caption below the strip — flips to the hovered/clicked dot's caption.
   Selector carries .pl-statehead to beat `body.pl-page p`. */
.pl-statehead .pl-stepdots-caption,
.pl-stepdots-caption{
  color:rgba(255,255,255,.92); font-size:12.5px; margin:10px 0 0;
  min-height:1.2em; transition:opacity .15s;
  font-weight:500;
}

/* ============================================================
   PAYLAX · Compact payout preview (collapsible <details>)
   ============================================================ */
.pl-payout-mini{
  border:1px solid var(--pl-line); border-radius:8px;
  padding:10px 14px; margin:14px 0;
  background:var(--pl-white);
}
.pl-payout-mini > summary{
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; list-style:none;
  font-size:13.5px; color:var(--pl-text);
  gap:12px;
}
.pl-payout-mini > summary::-webkit-details-marker{ display:none; }
.pl-payout-mini > summary b{
  color:var(--pl-navy); font-weight:700; font-size:15px; margin-left:auto;
}
.pl-payout-mini-chev{
  font-size:11px; color:var(--pl-text-mute); transition:transform .15s;
  margin-left:8px;
}
.pl-payout-mini[open] .pl-payout-mini-chev{ transform:rotate(180deg); }
.pl-payout-mini > div{
  display:grid; grid-template-columns:1fr auto; gap:6px 18px;
  padding-top:10px; margin-top:10px;
  border-top:1px solid var(--pl-line);
  font-size:13px; color:var(--pl-text);
}
.pl-payout-mini > div b{ color:var(--pl-navy); font-weight:600; font-variant-numeric:tabular-nums; }

/* ============================================================
   PAYLAX · Buyer view — no mobile tab UI, single linear scroll
   (the new compact step-strip frees enough space)
   ============================================================ */
@media(max-width:599px){
  /* Buyer never sees the tabs (the template omits the nav already), but the
     pane-hiding rules at .pl-shell[data-active-tab=…] would still kick in if
     any JS set the attribute. Defensively force all panes visible for buyer. */
  body.pl-page [data-tab-pane]{ display:block !important; }
  /* Compact the statehead headline on phones. The row stacks vertically —
     reset the headline div's flex-basis (320px) so it doesn't become a
     320px-tall block creating a huge dead zone in the navy header. */
  .pl-statehead-row{ flex-direction:column; align-items:stretch; gap:8px; }
  .pl-statehead-row > div:first-child{ flex:0 0 auto; }
  .pl-statehead-money{
    flex-direction:row; align-items:center; justify-content:space-between;
    gap:10px; flex-wrap:wrap;
  }
  .pl-statehead-amount{ font-size:22px; }
  /* The state badge wraps to 2 lines on phones; shrink it so it sits
     on one line next to the amount. */
  .pl-statehead-money .pl-badge.xl{
    font-size:10.5px; padding:4px 10px; letter-spacing:.02em;
    line-height:1.2;
  }
  .pl-statehead .pl-statehead-headline{ font-size:19px; }
  .pl-stepdots{ gap:4px; }
  .pl-stepdots li{ height:5px; }
}

/* ============================================================
   PAYLAX · Landing page rebuild (lp-* namespace)
   1:1 with the frontend-team mockups.
   ============================================================ */

.lp-section{ max-width:1180px; margin:0 auto; padding:64px 32px; text-align:center; }
.lp-section-tight{ padding-top:24px; }
.lp-section-grey{ background:#f6f7f9; max-width:none; }
/* Centre every direct child to the 1180px column — but NOT .lp-section-lead,
   which keeps its own narrower 640px width (the `> *` rule would otherwise
   stretch the lead paragraph full-width and push it visually off-centre
   from the heading above it). */
.lp-section-grey > *:not(.lp-section-lead){
  max-width:1180px; margin-left:auto; margin-right:auto;
}
.lp-kicker{
  display:block; font-size:14px; font-weight:800; letter-spacing:.06em;
  color:var(--pl-navy); text-transform:uppercase; margin-bottom:6px;
}
.lp-h2{
  font-size:34px; font-weight:800; letter-spacing:.01em;
  color:#5b7cf5; text-transform:uppercase; margin:0 0 18px;
}
.lp-section-lead{
  font-size:16px; color:var(--pl-text); max-width:640px;
  margin:0 auto 48px; line-height:1.6;
}
.lp-center{ text-align:center; }

/* ---- 1 · HERO ---- */
.lp-hero{
  background:linear-gradient(160deg,#2b3186 0%,#222a78 45%,#1c2467 100%);
  position:relative; overflow:hidden;
}
.lp-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 30% 55%, rgba(255,255,255,.05), transparent 70%);
}
.lp-fraudbar{ background:#e6b13c; position:relative; z-index:2; }
.lp-fraudbar-inner{
  max-width:1180px; margin:0 auto; padding:11px 32px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:15px; color:#3a2c06; flex-wrap:wrap;
}
.lp-fraudbar-inner svg{ color:#5b7cf5; flex-shrink:0; }
.lp-fraudbar-inner a{ color:#7a8cd9; font-weight:600; }
.lp-fraudbar-inner a:hover{ color:#5b6fc4; text-decoration:underline; }

.lp-hero-body{
  max-width:1180px; margin:0 auto; padding:54px 32px 64px;
  position:relative; z-index:2;
}
.lp-hero-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
/* Hero sits on a dark navy background. Every text rule carries `body.pl-page`
   so it outranks `body.pl-page p` / `body.pl-page h1..h4` (specificity 0,1,2)
   — otherwise the global rules paint dark navy text on dark navy. */
body.pl-page .lp-hero-eyebrow{
  display:block; font-size:15px; font-weight:600; letter-spacing:.06em;
  color:#c3cbf0; margin-bottom:18px;
}
body.pl-page .lp-hero-title{
  font-size:58px; line-height:1.08; font-weight:800; letter-spacing:.02em;
  color:#fff; margin:0 0 26px;
}
body.pl-page .lp-hero-lead{
  font-size:18px; line-height:1.55; color:#dfe3f5; max-width:480px; margin:0 0 26px;
}
body.pl-page .lp-hero-lead b{ color:#fff; font-weight:700; }
body.pl-page .lp-hero-tag{
  font-size:18px; font-weight:800; color:#fff; letter-spacing:.02em; margin:0;
}

/* live dashboard mock */
.lp-hero-app{ display:flex; justify-content:flex-end; }
.lp-app{
  width:100%; max-width:520px; background:#fff; border-radius:12px;
  box-shadow:0 30px 70px rgba(0,0,16,.4);
  display:flex; overflow:hidden; font-size:10px;
}
.lp-app-rail{
  width:34px; background:#f4f5f8; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; gap:9px; padding:12px 0;
}
.lp-app-rail-burger{ width:14px; height:2px; background:#9aa0b4; box-shadow:0 4px 0 #9aa0b4,0 8px 0 #9aa0b4; margin-bottom:6px; }
.lp-app-rail-i{ width:14px; height:14px; border-radius:4px; background:#d7dae4; }
.lp-app-rail-i.active{ background:#5b7cf5; }
.lp-app-rail-i.out{ background:#e6a3a3; }
.lp-app-rail-spacer{ flex:1; }
.lp-app-main{ flex:1; padding:14px 16px; position:relative; min-width:0; }
.lp-app-top{ text-align:right; margin-bottom:10px; }
.lp-app-brand{ font-weight:800; font-size:11px; color:var(--pl-navy); letter-spacing:.04em; }
.lp-app-greet strong{ font-size:13px; color:var(--pl-navy); display:block; margin-bottom:5px; }
.lp-app-daterow{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.lp-app-sub{ color:#8b90a4; font-size:9px; }
.lp-app-dates{ display:flex; gap:5px; }
.lp-app-dates i{ font-style:normal; border:1px solid #e1e3ea; border-radius:3px; padding:3px 6px; color:#8b90a4; font-size:8px; }
.lp-app-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:9px 0; }
.lp-app-tile{
  border:1px solid #e8e9ef; border-radius:6px; padding:8px 9px;
  display:flex; flex-direction:column; gap:3px;
}
.lp-app-tile-k{ font-size:8px; color:#8b90a4; }
.lp-app-tile b{ font-size:11px; font-weight:700; }
.lp-app-tile i{ font-style:normal; font-size:7.5px; color:#aeb2c2; }
.lp-app-tile.out{ border-left:2px solid #7dc24a; }
.lp-app-tile.out b{ color:#5a9a2e; }
.lp-app-tile.held{ border-left:2px solid #5b7cf5; }
.lp-app-tile.held b{ color:#4661c8; }
.lp-app-tile.refund{ border-left:2px solid #e08e3a; }
.lp-app-tile.refund b{ color:#bd7322; }
.lp-app-tile.proc{ border-left:2px solid var(--pl-navy); }
.lp-app-tile.proc b{ color:var(--pl-navy); }
.lp-app-connect{ margin:9px 0 2px; }
.lp-app-connect-h{ font-weight:800; font-size:10px; color:var(--pl-navy); }
.lp-app-connect-h sup{ font-size:6px; }
.lp-app-foot{ text-align:center; margin-top:12px; color:#aeb2c2; font-size:7.5px; }
.lp-app-fab{
  position:absolute; right:12px; bottom:30px; width:22px; height:22px;
  border-radius:50%; background:#5b7cf5; color:#fff; font-size:15px;
  display:flex; align-items:center; justify-content:center; font-weight:300;
}

.lp-hero-badges{
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
  margin-top:60px;
}
.lp-hero-badge{
  display:flex; align-items:center; gap:11px;
  color:#fff; font-size:16px;
}
.lp-hero-badge svg{ width:26px; height:26px; color:#7d8cd6; flex-shrink:0; }

/* ---- 2 · STANDARD BAND ---- */
.lp-band{ background:#7b91e8; padding:34px 32px; text-align:center; }
.lp-band h2{
  color:#fff; font-size:30px; font-weight:800; margin:0; letter-spacing:.01em;
}

/* ---- 3 · HOW IT WORKS ---- */
.lp-steps{
  list-style:none; padding:0; margin:48px 0 40px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
.lp-step{ position:relative; padding:0 14px; }
.lp-step-line{
  position:absolute; top:46px; left:50%; width:100%; height:1px;
  background:#d7dae4; z-index:0;
}
.lp-step-icon{
  width:92px; height:92px; border-radius:50%; border:1px solid #d7dae4;
  background:#fff; margin:0 auto 22px; position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
}
.lp-step-icon svg{ width:46px; height:46px; }
.lp-step-text{
  font-size:17px; font-weight:700; color:var(--pl-navy); line-height:1.4;
  max-width:230px; margin:0 auto;
}
.lp-btn-outline{
  display:inline-block; border:1px solid #5b7cf5; color:#5b7cf5;
  font-size:15px; font-weight:600; padding:12px 26px; border-radius:6px;
  background:#fff; text-decoration:none; transition:background .12s,color .12s;
}
.lp-btn-outline:hover{ background:#5b7cf5; color:#fff; text-decoration:none; }
body.pl-page a.lp-btn-outline{ color:#5b7cf5; }
body.pl-page a.lp-btn-outline:hover{ color:#fff; }

/* ---- 4 · PROTECTION ---- */
.lp-protect{
  display:grid; grid-template-columns:1fr 1fr; gap:36px;
  max-width:1100px; margin:0 auto;
}
.lp-protect-col{ display:flex; flex-direction:column; }
.lp-protect-card{
  background:#5c5f7e; border-radius:8px; padding:40px 40px 36px;
  text-align:center; color:#fff;
}
.lp-protect-shield{
  width:66px; height:66px; margin:0 auto 18px;
}
.lp-protect-shield svg{ width:66px; height:66px; color:#fff; }
/* Selectors carry .lp-protect-card so they beat body.pl-page p / h3
   (specificity 0,1,1) — otherwise the purple card paints dark navy text
   on a dark purple ground (fails contrast). */
.lp-protect-card h3,
body.pl-page .lp-protect-card h3{
  color:#fff; font-size:22px; font-weight:800; letter-spacing:.04em;
  margin:0 0 16px;
}
.lp-protect-card p,
body.pl-page .lp-protect-card p{
  color:#eef0f6; font-size:15.5px; line-height:1.6; margin:0;
}
.lp-protect-q{
  display:block; text-align:center; margin:18px auto 0; max-width:420px;
  color:#5b7cf5; font-size:15.5px; text-decoration:underline; line-height:1.5;
}
body.pl-page a.lp-protect-q{ color:#5b7cf5; }

/* ---- 5 · TESTIMONIALS ---- */
.lp-testimonials{ background:#f6f7f9; padding:66px 32px; }
.lp-testi-track{ max-width:1080px; margin:0 auto; }
.lp-testi{ display:grid; grid-template-columns:170px 1fr; gap:48px; align-items:center; margin:0; }
.lp-testi[hidden]{ display:none; }
.lp-testi-logo{
  width:140px; height:140px; background:var(--pl-navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:34px; font-weight:800; letter-spacing:.02em; border-radius:2px;
}
.lp-testi-head{
  font-size:20px; font-weight:800; font-style:italic; color:var(--pl-navy);
  line-height:1.4; margin:0 0 14px;
}
.lp-testi-text{
  font-size:16px; font-style:italic; color:var(--pl-text);
  line-height:1.6; margin:0 0 16px;
}
.lp-testi-cite{
  font-size:16px; font-weight:700; color:#5b7cf5; text-decoration:underline;
}
body.pl-page a.lp-testi-cite{ color:#5b7cf5; }
.lp-testi-dots{ display:flex; justify-content:center; gap:10px; margin-top:40px; }
.lp-testi-dot{
  width:13px; height:13px; border-radius:50%; border:none; cursor:pointer;
  background:#cfd2dc; padding:0;
}
.lp-testi-dot.active{ background:#5b7cf5; }

/* ---- 6 · PROSE ---- */
.lp-prose{ max-width:720px; margin:30px auto 0; }
.lp-prose p{ font-size:17px; line-height:1.6; color:var(--pl-text); margin:0 0 18px; }
.lp-prose p b{ color:var(--pl-navy); font-weight:700; }

/* ---- 7 · APPLICATIONS ---- */
.lp-apps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:56px 32px;
  max-width:1040px; margin:0 auto;
}
.lp-app-cat{ text-align:center; }
.lp-app-cat-icon{
  width:88px; height:88px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
}
.lp-app-cat-icon svg{ width:68px; height:68px; color:#5c5f7e; }
.lp-app-cat h3{
  font-size:18px; font-weight:800; color:var(--pl-navy);
  letter-spacing:.04em; margin:0 0 12px;
}
.lp-app-cat p{
  font-size:15.5px; color:var(--pl-text); line-height:1.55;
  max-width:300px; margin:0 auto;
}

/* ---- 8 · ADVANTAGES ---- */
.lp-adv-list{ max-width:840px; margin:46px auto 0; }
.lp-adv-row{ margin-bottom:54px; }
.lp-adv-ring{
  width:78px; height:78px; border-radius:50%; border:1px solid #d7dae4;
  margin:0 auto 22px; display:flex; align-items:center; justify-content:center;
}
.lp-adv-ring svg{ width:38px; height:38px; color:#5c5f7e; }
.lp-adv-row h3{
  font-size:19px; font-weight:800; color:var(--pl-navy);
  letter-spacing:.03em; margin:0 0 12px;
}
.lp-adv-row p{
  font-size:16px; color:var(--pl-text); line-height:1.6;
  max-width:680px; margin:0 auto;
}

/* ---- PRESS STRIP ---- */
.lp-press{ border-top:1px solid var(--pl-line); padding:34px 32px; }
.lp-press-inner{
  max-width:1080px; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:space-around; gap:32px; flex-wrap:wrap;
}
.lp-press-logo{
  font-size:17px; font-weight:800; color:#9498a8; letter-spacing:.01em;
  opacity:.85;
}
.lp-press-logo.serif{ font-family:Georgia,'Times New Roman',serif; font-weight:700; }
.lp-press-link{ color:#5b7cf5; font-size:15.5px; }
body.pl-page a.lp-press-link{ color:#5b7cf5; }

/* ---- FOOTER ---- */
.lp-footer{ background:#f3f4f6; padding:48px 32px 56px; }
.lp-footer-meta{
  max-width:1080px; margin:0 auto; display:grid;
  grid-template-columns:1fr 1fr 1fr; gap:32px;
}
.lp-footer-col h4{ font-size:18px; font-weight:800; color:var(--pl-navy); margin:0 0 14px; }
.lp-pay-row{ display:flex; gap:10px; flex-wrap:wrap; }
.lp-pay-chip{
  font-size:11px; font-weight:800; padding:8px 12px; border-radius:5px;
  background:#fff; border:1px solid #e1e3ea; color:#555;
}
.lp-pay-chip.visa{ color:#1a1f71; }
.lp-pay-chip.mc{ color:#cf4500; }
.lp-pay-chip.sofort{ color:#e9618a; }
.lp-pay-chip.sepa{ color:#10298e; }
.lp-social{ display:flex; gap:10px; }
.lp-social a{
  width:34px; height:34px; border-radius:50%; background:#5b7cf5; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.lp-social a:hover{ background:#4661c8; }
.lp-footer-partner{ font-size:14.5px; color:var(--pl-text); }
.lp-footer-rule{ max-width:1080px; margin:28px auto; border-top:1px solid #e1e3ea; }
.lp-footer-share{
  display:flex; align-items:center; justify-content:center; gap:22px;
  flex-wrap:wrap; font-size:14.5px;
}
.lp-footer-share-l{ color:var(--pl-text-mute); font-weight:600; display:flex; align-items:center; gap:6px; }
.lp-footer-share a{ display:flex; align-items:center; gap:6px; color:var(--pl-text-mute); }
.lp-footer-share a:hover{ color:#5b7cf5; }
.lp-footer-share a svg{ color:#5b7cf5; }
.lp-footer-trust{
  max-width:1080px; margin:0 auto; display:grid;
  grid-template-columns:repeat(4,1fr); gap:24px;
}
.lp-footer-trust-item{
  display:flex; align-items:center; gap:11px;
  font-size:15px; color:var(--pl-text);
}
.lp-footer-trust-item svg{ width:26px; height:26px; color:#5b7cf5; flex-shrink:0; }
.lp-footer-copy{
  max-width:1080px; margin:0 auto; font-size:15px; color:var(--pl-navy);
  font-weight:600;
}
.lp-footer-links{
  max-width:1080px; margin:24px auto 0; display:grid;
  grid-template-columns:repeat(4,1fr); gap:32px;
}
.lp-footer-linkcol{ display:flex; flex-direction:column; gap:10px; }
.lp-footer-linkcol a{ font-size:15px; color:#5b7cf5; }
body.pl-page .lp-footer-linkcol a{ color:#5b7cf5; }
body.pl-page .lp-footer-linkcol a:hover{ color:#4661c8; text-decoration:underline; }

/* ---- RESPONSIVE ---- */
@media(max-width:920px){
  .lp-hero-grid{ grid-template-columns:1fr; gap:36px; }
  .lp-hero-app{ justify-content:center; }
  .lp-hero-title{ font-size:44px; }
  .lp-hero-badges{ grid-template-columns:1fr 1fr; gap:20px; }
  .lp-steps{ grid-template-columns:1fr 1fr; gap:36px 0; }
  .lp-step-line{ display:none; }
  .lp-protect{ grid-template-columns:1fr; }
  .lp-apps{ grid-template-columns:1fr 1fr; }
  .lp-testi{ grid-template-columns:1fr; gap:22px; text-align:center; justify-items:center; }
  .lp-footer-meta,.lp-footer-trust,.lp-footer-links{ grid-template-columns:1fr 1fr; }
}
@media(max-width:560px){
  .lp-section{ padding:44px 20px; }
  .lp-hero-body{ padding:38px 20px 48px; }
  .lp-hero-title{ font-size:34px; }
  .lp-h2{ font-size:26px; }
  .lp-band h2{ font-size:22px; }
  .lp-hero-badges{ grid-template-columns:1fr; }
  .lp-steps{ grid-template-columns:1fr; }
  .lp-apps{ grid-template-columns:1fr; }
  .lp-footer-meta,.lp-footer-trust,.lp-footer-links{ grid-template-columns:1fr; }
  .lp-testi-track{ padding:0; }
}

/* ============================================================
   PAYLAX · FAQ page — scam-warning banner + "not listed" block
   ============================================================ */
.pl-faq-warning{
  background:#e6b13c; border-radius:8px;
  padding:18px 22px; margin:8px 0 28px;
  display:flex; gap:12px; align-items:flex-start;
  color:#3a2c06;
}
.pl-faq-warning svg{ flex-shrink:0; margin-top:2px; color:#3a2c06; }
.pl-faq-warning p,
body.pl-page .pl-faq-warning p{
  margin:0; font-size:15px; line-height:1.6; color:#3a2c06;
}
.pl-faq-warning p b{ color:#2a2004; font-weight:700; }
.pl-faq-warning a,
body.pl-page .pl-faq-warning a{
  color:#1c2467; font-weight:600; text-decoration:underline;
}
.pl-faq-warning a:hover{ color:#000040; }

.pl-faq-notlisted{ margin:0 0 24px; text-align:left; }
.pl-faq-notlisted h3{
  font-size:20px; font-weight:800; color:var(--pl-navy);
  letter-spacing:.02em; margin:0 0 8px;
}
.pl-faq-notlisted p,
body.pl-page .pl-faq-notlisted p{
  font-size:15.5px; color:var(--pl-text); line-height:1.6; margin:0;
}
@media(max-width:560px){
  .pl-faq-warning{ padding:14px 16px; }
  .pl-faq-warning p,body.pl-page .pl-faq-warning p{ font-size:14px; }
}

/* ============================================================
   PAYLAX · Buyer deal page (bd-* namespace) — rebuilt from scratch
   ============================================================ */

/* ---- key-facts header ---- */
.bd-head{
  background:linear-gradient(135deg,#1c2467 0%,#222a78 100%);
  border-radius:14px; padding:24px 26px; margin-bottom:20px; color:#fff;
}
.bd-head-main{ display:flex; gap:20px; align-items:center; }
.bd-head-thumb{
  width:84px; height:84px; flex-shrink:0; border-radius:10px;
  background:rgba(255,255,255,.1); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.bd-head-thumb img{ width:100%; height:100%; object-fit:cover; }
.bd-head-thumb svg{ width:38px; height:38px; color:rgba(255,255,255,.4); }
.bd-head-info{ flex:1; min-width:0; }
body.pl-page .bd-head-eyebrow{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#9bb0ee; margin-bottom:5px;
}
body.pl-page .bd-head-title{
  font-size:23px; font-weight:800; color:#fff; margin:0 0 9px;
  line-height:1.25; letter-spacing:-.01em;
}
.bd-head-meta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.bd-chip{
  font-size:11px; font-weight:600; padding:3px 9px; border-radius:99px;
  background:rgba(255,255,255,.14); color:#dfe3f5;
}
.bd-head-dates{ font-size:12.5px; color:#aab3e0; }
.bd-head-amount{ text-align:right; flex-shrink:0; }
.bd-head-amount-label{
  display:block; font-size:11px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:#9bb0ee; margin-bottom:3px;
}
.bd-head-amount-value{
  font-size:26px; font-weight:300; color:#fff; letter-spacing:-.01em;
}
/* progress strip in header */
.bd-progress{ margin-top:20px; }
.bd-stepdots{
  list-style:none; padding:0; margin:0; display:flex; gap:6px;
}
.bd-stepdots li{
  flex:1; height:6px; border-radius:3px; cursor:pointer;
  background:rgba(255,255,255,.16); transition:background .12s;
  outline:none;
}
.bd-stepdots li.done{ background:var(--pl-green); }
.bd-stepdots li.active{ background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.16); }
.bd-stepdots li:hover{ background:rgba(255,255,255,.4); }
.bd-stepdots li.done:hover{ background:#a8d97a; }
.bd-stepdots li:focus-visible{ box-shadow:0 0 0 3px rgba(255,255,255,.5); }
body.pl-page .bd-stepcaption{
  color:rgba(255,255,255,.9); font-size:12.5px; font-weight:500;
  margin:10px 0 0; min-height:1.2em;
}

/* ---- two-column body ---- */
.bd-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px;
  align-items:start;
}
.bd-col-main{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.bd-col-side{ display:flex; flex-direction:column; gap:16px; }

/* ---- primary action card ---- */
.bd-action{
  background:#fff; border:1px solid var(--pl-line); border-radius:12px;
  padding:24px 26px;
}
.bd-action.accent{ border-left:4px solid var(--pl-blue); }
.bd-action.success{ border-left:4px solid var(--pl-green); background:#f4faf0; }
.bd-action-tag{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--pl-blue-text); margin-bottom:7px;
}
body.pl-page .bd-action h2{
  font-size:19px; font-weight:700; color:var(--pl-navy);
  margin:0 0 8px; letter-spacing:-.01em;
}
body.pl-page .bd-action p{
  font-size:14.5px; color:var(--pl-text); line-height:1.6; margin:0 0 8px;
}
.bd-action-note{ font-size:13px !important; color:var(--pl-text-mute) !important; }
.bd-action .pl-btn-row{ margin-top:14px; }

/* ---- generic content block ---- */
.bd-block{
  background:#fff; border:1px solid var(--pl-line); border-radius:12px;
  padding:22px 24px;
}
.bd-block-ok{ background:#f4faf0; border-color:#cbe6b8; }
.bd-block-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:6px;
}
body.pl-page .bd-block-head h2{
  font-size:16px; font-weight:700; color:var(--pl-navy); margin:0;
}
/* payment conditions — properly formatted, not raw ALL-CAPS */
.bd-conditions{
  background:var(--pl-bg); border:1px solid var(--pl-line); border-radius:8px;
  padding:14px 16px; font-size:14px; line-height:1.7; color:var(--pl-text);
}

/* ---- right-rail cards ---- */
.bd-side-card{
  background:#fff; border:1px solid var(--pl-line); border-radius:12px;
  padding:18px 20px;
}
.bd-side-h{
  font-size:11.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--pl-text-mute);
  margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--pl-line);
}
.bd-side-row{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; font-size:13.5px; padding:6px 0; color:var(--pl-text-mute);
}
.bd-side-row b{ color:var(--pl-navy); font-weight:600; text-align:right; }
.bd-seller{ display:flex; gap:12px; align-items:center; margin-bottom:6px; }
.bd-seller-ava{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:var(--pl-blue); color:#fff; font-weight:700; font-size:17px;
  display:flex; align-items:center; justify-content:center;
}
.bd-seller-name{ font-size:14.5px; font-weight:700; color:var(--pl-navy); }
.bd-seller-sub{ font-size:12.5px; color:var(--pl-text-mute); margin-top:2px; }
.bd-side-desc{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--pl-line);
  font-size:13px; color:var(--pl-text); line-height:1.6;
}
.bd-report{
  display:block; text-align:center; font-size:12.5px;
  color:var(--pl-text-mute); padding:6px;
}
body.pl-page a.bd-report{ color:var(--pl-text-mute); }
body.pl-page a.bd-report:hover{ color:var(--pl-blue-text); }

/* ---- responsive ---- */
@media(max-width:920px){
  .bd-grid{ grid-template-columns:1fr; }
  .bd-col-side{ order:2; }
}
@media(max-width:560px){
  .bd-head{ padding:18px 18px; }
  .bd-head-main{ flex-wrap:wrap; gap:14px; }
  .bd-head-thumb{ width:60px; height:60px; }
  .bd-head-amount{ text-align:left; width:100%;
    display:flex; justify-content:space-between; align-items:baseline;
    border-top:1px solid rgba(255,255,255,.14); padding-top:12px; }
  .bd-head-amount-label{ margin:0; }
  body.pl-page .bd-head-title{ font-size:19px; }
  .bd-action,.bd-block{ padding:18px 16px; }
}