.plq{
  --navy:#1F3A5F; --navy-700:#162B47; --navy-50:#EEF2F7;
  --gold:#AB7D56; --gold-soft:#CFA686; --gold-50:#EFE4D8;
  --cream:#F7F1E8; --cream-line:#E6D8C6;

  --ink:#212121; --ink-mid:#303030; --muted:#838383; --faint:#ACACAC;
  --line:#EEEEEE; --line-strong:#E0E0E0;
  --bg:#FFFFFF; --bg-sub:#F9F9F9;

  --shell:1240px; --gut:24px;
  --s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px;
  --s6:48px; --s7:64px; --s8:88px; --s9:120px;

  --r-card:16px; --r-panel:22px; --r-pill:999px;
  --ease:cubic-bezier(.23,1,.32,1); --dur:200ms;

  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.plq *,.plq *::before,.plq *::after{box-sizing:border-box}
.plq :where(img){max-width:100%;display:block}
.plq :where(button){font:inherit;color:inherit;cursor:pointer;border:0;background:none;text-align:inherit}
.plq :where(a){color:inherit;text-decoration:none}
.plq :where(h1,h2,h3,h4){margin:0;font-weight:500;color:var(--ink-mid);letter-spacing:-.02em;text-wrap:balance}
.plq :where(p){margin:0}
.plq :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

.plq-shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
/* One rhythm, one token. The rails and the trust strip ran on their own tighter
   values left over from when they shared a single band, so those two read as
   squeezed next to everything else. Every section now breathes the same. */
.plq{--sec:112px}
@media(max-width:900px){.plq{--sec:72px}}
@media(max-width:600px){.plq{--sec:56px}}
.plq-sec,.plq-sec--railA,.plq-sec--railB,.plq-map,.plq-trust,.plq-ans{padding-block:var(--sec)}
.plq-sec{position:relative}

.plq-head{display:flex;flex-direction:column;gap:var(--s3);max-width:56ch;margin-bottom:var(--s6)}
.plq-head h2{font-size:42px;line-height:1.1}
.plq-lede{font-size:18px;line-height:1.55;font-weight:500;color:var(--muted);text-wrap:pretty}
.plq-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
@media(max-width:900px){
  .plq-head{margin-bottom:var(--s5);gap:var(--s2)}
  .plq-head h2{font-size:29px}
  .plq-lede{font-size:16px}
}

/* soft blurred grounds so the white sections are not empty white */
.plq-glow{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.plq-glow i{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.5}
.plq-glow i:nth-child(1){width:520px;height:520px;top:-160px;right:-120px;background:radial-gradient(circle,rgba(171,125,86,.28),transparent 68%)}
.plq-glow i:nth-child(2){width:460px;height:460px;bottom:-180px;left:-140px;background:radial-gradient(circle,rgba(0,46,79,.16),transparent 68%)}
.plq-sec>.plq-shell{position:relative;z-index:1}

/* ============================================================ BUTTONS */
.plq-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:0 30px;border-radius:var(--r-pill);
  font-size:16px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             transform 140ms var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.plq-btn:active{transform:scale(.975)}
.plq-btn svg{width:18px;height:18px;flex:none}
.plq-btn--pri{background:var(--navy);color:#fff;box-shadow:0 1px 2px rgba(0,46,79,.24)}
.plq-btn--sec{background:#fff;color:var(--ink-mid);border:1px solid var(--line-strong)}
.plq-btn--ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.plq-btn--sm{min-height:44px;padding:0 20px;font-size:14.5px}
.plq-btn--wide{width:100%}
@media(hover:hover) and (pointer:fine){
  .plq-btn--pri:hover{background:var(--navy-700);box-shadow:0 6px 20px rgba(0,46,79,.24)}
  .plq-btn--sec:hover{border-color:var(--ink-mid);background:var(--bg-sub)}
  .plq-btn--ghost:hover{background:rgba(255,255,255,.22)}
}

/* ============================================================ HEADER
   Mirrors the site header: burger left of the logo, four links centred,
   language + account + CTA on the right. Links point at the main site so
   the landing is not a dead end. */
.plq-hdr{position:fixed;inset:0 0 auto;z-index:60;border-bottom:1px solid transparent;
  transition:background 420ms var(--hdr-ease),border-color 420ms var(--hdr-ease),box-shadow 420ms var(--hdr-ease)}
/* The transparent state sits on whatever the hero photo happens to show there.
   A thin scrim under the bar keeps the white burger, globe and account mark
   readable over a bright frame instead of letting them disappear into it —
   and it dissolves as the solid header takes over. */
.plq-hdr::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,14,24,.42),rgba(4,14,24,0));
  opacity:1;transition:opacity 420ms var(--hdr-ease)}
.plq-hdr.is-stuck::before{opacity:0}
.plq-hdr__in{position:relative;z-index:1}
/* every part of the header changes colour on the same clock as the background */
.plq-hdr__nav a,.plq-ico,.plq-lang__btn,.plq-burger span,.plq-hdr__logo::after,.plq-hdr__logo img{
  transition:color 420ms var(--hdr-ease),background-color 420ms var(--hdr-ease),
             opacity 420ms var(--hdr-ease),filter 420ms var(--hdr-ease)}
.plq-hdr__in{display:flex;align-items:center;height:88px;gap:var(--s4)}
/* Both children get the same box so they sit on one optical line: the burger is
   a 40px hit area with its bars centred, the logo a 40px box with the mark
   centred in it. Left to their own heights they never quite agreed. */
.plq-hdr__l{flex:1 1 0;display:flex;align-items:center;gap:var(--s2);min-width:0}
.plq-hdr__logo{display:flex;align-items:center;height:40px;flex:none}
.plq-hdr__nav{flex:0 0 auto;display:flex;align-items:center;gap:28px}
.plq-hdr__r{flex:1 1 0;display:flex;align-items:center;justify-content:flex-end;gap:6px}
.plq-hdr__r .plq-btn--sm{min-height:40px}
.plq-hdr__logo img{height:26px;width:auto}
.plq-hdr__nav a{font-size:16px;font-weight:500;color:#fff;white-space:nowrap;position:relative;padding:6px 0}
.plq-hdr__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 240ms var(--ease)}
@media(hover:hover) and (pointer:fine){.plq-hdr__nav a:hover::after{transform:scaleX(1)}}
.plq-ico{width:40px;height:40px;border-radius:var(--r-pill);display:grid;place-items:center;color:#fff;flex:none;
  transition:background 180ms var(--ease),color 180ms var(--ease)}
.plq-ico svg{width:20px;height:20px}
.plq-ico b{position:absolute;font-size:9px;font-weight:700;transform:translate(11px,10px);color:inherit}

/* language switch — landing globe + code + caret, with a small popover */
.plq-lang{position:relative;flex:none}
.plq-lang__btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:var(--r-pill);color:#fff;
  transition:background 180ms var(--ease),color 180ms var(--ease)}
.plq-lang__btn:hover{background:rgba(255,255,255,.14)}
.plq-lang__btn>svg:first-child{width:19px;height:19px}
.plq-lang__btn b{font-size:13.5px;font-weight:700;letter-spacing:.02em}
.plq-lang__btn>svg:last-child{width:15px;height:15px;opacity:.7;transition:transform 200ms var(--ease)}
.plq-lang.is-on .plq-lang__btn>svg:last-child{transform:rotate(180deg)}
/* One motion for every popover on the page: it grows out of the control that
   opened it, overshoots a hair and settles. Opacity is deliberately much faster
   than the transform, so the panel is already readable while it is still
   arriving — the thing that makes Apple's menus feel quick rather than slow. */
.plq{--pop-in:cubic-bezier(.32,1.28,.42,1);--pop-out:cubic-bezier(.4,0,.2,1);--hdr-ease:cubic-bezier(.4,0,.2,1)}
.plq-lang__pop{position:absolute;top:46px;right:0;min-width:150px;padding:6px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 18px 40px rgba(16,24,40,.18);transform-origin:top right;
  transform:scale(.9) translateY(-6px);opacity:0;pointer-events:none;
  transition:opacity 130ms var(--pop-out),transform 200ms var(--pop-out);z-index:70}
.plq-lang.is-on .plq-lang__pop{opacity:1;transform:none;pointer-events:auto;
  transition:opacity 120ms linear,transform 420ms var(--pop-in)}
.plq-lang__pop button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 12px;
  border-radius:8px;font-size:14.5px;font-weight:500;color:var(--ink-mid);transition:background 140ms var(--ease)}
.plq-lang__pop button:hover{background:var(--bg-sub)}
.plq-lang__pop button.is-on{color:var(--navy);font-weight:600}
.plq-lang__pop button.is-on::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.plq-hdr.is-stuck .plq-lang__btn{color:var(--ink)}
.plq-hdr.is-stuck .plq-lang__btn:hover{background:rgba(0,0,0,.05)}
.plq-ico:hover{background:rgba(255,255,255,.14)}
.plq-burger{position:relative;width:40px;height:40px;border-radius:var(--r-pill);flex:none;display:grid;place-items:center;
  transition:background 180ms var(--ease)}
.plq-burger:hover{background:rgba(255,255,255,.14)}
.plq-burger span{position:absolute;left:11px;width:18px;height:1.7px;border-radius:2px;background:#fff;
  transition:transform 260ms var(--ease),width 260ms var(--ease)}
.plq-burger span:nth-child(1){transform:translateY(-4px)}
.plq-burger span:nth-child(2){transform:translateY(4px);width:13px}
.plq-burger.is-on span:nth-child(1){transform:rotate(45deg)}
.plq-burger.is-on span:nth-child(2){transform:rotate(-45deg);width:18px}

/* Scrolled state taken from the site header, value for value: solid white with
   its soft shadow rather than glass, links #212121, gold wordmark left alone.
   The transparent state stays as it is — the site's dark links would vanish on
   the hero photo, and that is the only place the two headers must differ. */
.plq-hdr.is-stuck{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:transparent;box-shadow:0 1px 16px rgba(0,0,0,.08)}
.plq-hdr.is-stuck .plq-hdr__nav a,.plq-hdr.is-stuck .plq-ico{color:var(--ink)}
.plq-hdr.is-stuck .plq-burger span{background:var(--ink)}
.plq-hdr.is-stuck .plq-ico:hover,.plq-hdr.is-stuck .plq-burger:hover{background:rgba(0,0,0,.05)}
.plq-hdr.is-stuck .plq-btn--ghost{background:var(--navy);color:#fff;border-color:var(--navy);backdrop-filter:none;-webkit-backdrop-filter:none}
/* The landing's wordmark file is white — it was made for the hero photo. On the
   scrolled white header it is repainted navy: the same file is reused as a mask,
   so the colour is exact instead of approximated by a filter chain. Browsers
   without masks keep the navy tint this header used before. */
.plq-hdr.is-stuck .plq-hdr__logo img{filter:brightness(0) saturate(100%) invert(13%) sepia(31%) saturate(2200%) hue-rotate(178deg) brightness(94%) contrast(101%)}
@supports ((-webkit-mask-size:cover) or (mask-size:cover)){
  .plq-hdr__logo{position:relative}
  .plq-hdr.is-stuck .plq-hdr__logo img{opacity:0;filter:none}
  .plq-hdr.is-stuck .plq-hdr__logo::after{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:142px;height:26px;background:var(--gold);pointer-events:none;
    -webkit-mask:url("https://cdn.prod.website-files.com/695e95490237d5f089a878b0/698478d239bf0b1ae86966b3_1pl.svg") left center/auto 100% no-repeat;
            mask:url("https://cdn.prod.website-files.com/695e95490237d5f089a878b0/698478d239bf0b1ae86966b3_1pl.svg") left center/auto 100% no-repeat}
  /* The mask is an absolutely positioned box, so `width:auto` collapses it to
     zero — and with the image already at opacity 0 the logo simply vanished on
     the white bar. The asset is 185x34, so every height has one right width. */
  @media(max-width:900px){.plq-hdr.is-stuck .plq-hdr__logo::after{width:131px;height:24px}}
  @media(max-width:400px){.plq-hdr.is-stuck .plq-hdr__logo::after{width:114px;height:21px}}
}
@media(max-width:1100px){.plq-hdr__nav{display:none}}
@media(max-width:900px){
  .plq-hdr__in{height:88px}
  .plq-ico--acc{display:none}
  /* The wordmark is unreadable at this size, so the logo is cropped to the PL
     crest. Measured off the asset rather than guessed: in the 185x34 artboard
     the crest ends at x=40 and the wordmark starts at x=49, so 44 units is the
     safe cut. At 30px tall that is 39px wide. No second logo file needed. */
  /* the anchor is a shrink-to-fit flex item, so without an explicit width it
     sizes to the image while max-width:100% sizes the image to it — the pair
     settles wherever it likes. Both get pinned. */
  /* v10: the crest alone left the bar looking empty (same call as on the site
     header), so the whole mark is back at 24px. */
  .plq-hdr__logo{flex:0 0 auto;width:auto;height:40px;overflow:visible;align-items:center}
  .plq-hdr__logo img{height:24px;width:auto;max-width:none;object-fit:contain;object-position:left center}
  /* below 768 the language switch lives in the drawer, exactly as it does on
     the rest of the site — the bar has no room for it beside the wordmark */
  @media(max-width:767px){.plq-lang{display:none}}
  .plq-burger{width:40px;height:40px}
  .plq-hdr__l{gap:8px}
  .plq-hdr__r{gap:2px}
  .plq-lang__btn{padding:6px 6px;font-size:12px}
  .plq-lang__btn>svg:first-child{width:16px;height:16px}
  .plq-hdr__r .plq-btn--sm{min-height:40px;padding:0 14px;font-size:13.5px;margin-left:2px!important}
}
@media(max-width:400px){
  .plq-hdr__logo img{height:21px}
  .plq-hdr__r .plq-btn--sm{padding:0 11px;font-size:13px}
  .plq-lang__btn b{font-size:12px}
}

/* header drawer */
.plq-drw{position:fixed;left:0;right:0;z-index:59;background:#fff;border-top:1px solid var(--line);
  clip-path:inset(0 0 100% 0);transition:clip-path 420ms var(--ease);overflow:auto;max-height:78vh}
.plq-drw.is-on{clip-path:inset(0 0 0 0)}
.plq-drw__in{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s6);padding:var(--s5) 0 var(--s6)}
@media(max-width:900px){.plq-drw__in{grid-template-columns:1fr;gap:var(--s4)}}
.plq-drw__lbl{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin-bottom:var(--s2)}
.plq-drw__big{display:flex;flex-direction:column}
.plq-drw__big a{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:13px 0;
  border-top:1px solid var(--line);font-size:25px;font-weight:500;letter-spacing:-.02em;color:var(--ink-mid);
  opacity:0;transform:translateY(10px);
  transition:color 180ms var(--ease),opacity 380ms var(--ease),transform 380ms var(--ease)}
.plq-drw__big a:last-child{border-bottom:1px solid var(--line)}
.plq-drw.is-on .plq-drw__big a{opacity:1;transform:none}
.plq-drw__big a:hover{color:var(--navy)}
.plq-drw__big svg{width:18px;height:18px;color:var(--faint);transition:transform 220ms var(--ease),color 180ms}
.plq-drw__big a:hover svg{transform:translateX(4px);color:var(--gold)}
.plq-drw__small{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4);margin-top:var(--s4)}
.plq-drw__small a{padding:8px 0;font-size:15px;font-weight:500;color:var(--muted)}
.plq-drw__small a:hover{color:var(--ink-mid)}
.plq-drw__side{display:flex;flex-direction:column;gap:var(--s4)}
.plq-drw__card{background:var(--navy);color:#fff;border-radius:var(--r-card);padding:var(--s4)}
.plq-drw__card h4{margin-bottom:6px;font-size:18px;font-weight:600;color:#fff}
.plq-drw__card p{font-size:14px;line-height:1.45;color:rgba(255,255,255,.72);margin-bottom:var(--s3)}
.plq-drw__card a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:var(--r-pill);background:#fff;color:var(--navy);font-size:15px;font-weight:600}
/* The same object as the site header's drawer: a wrapping row of pills with
   the messenger marks in their own colours. The two menus are one menu. */
.plq-drw__cont{display:flex;flex-wrap:wrap;gap:9px 10px}
.plq-drw__cont a{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 15px;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);
  font-size:14.5px;font-weight:500;color:var(--ink-mid);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform 140ms var(--ease)}
.plq-drw__cont a:hover{border-color:var(--navy);color:var(--navy)}
.plq-drw__cont a:active{transform:scale(.97)}
.plq-drw__cont svg{width:16px;height:16px;color:var(--gold);flex:none}
.plq-drw__cont .plq-c--wa svg{color:#25D366}
.plq-drw__cont .plq-c--tg svg{color:#229ED9}
.plq-drw__cont .plq-c--line svg{color:#06C755}
.plq-drw__cont .plq-c--max svg{color:#7B4DFF}
/* the phone copy of the language switch, same as the site header */
.plq-drw__lang{display:flex;gap:8px;margin:0 0 20px}
.plq-drw__lang button{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  font-size:15px;font-weight:600;color:var(--ink-mid);background:#fff;cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),
             color var(--dur) var(--ease),transform 140ms var(--ease)}
.plq-drw__lang button:active{transform:scale(.97)}
.plq-drw__lang button.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
@media(min-width:768px){.plq-drw__lang{display:none}}
.plq-scrim{position:fixed;inset:0;z-index:58;background:rgba(16,24,40,.34);opacity:0;pointer-events:none;transition:opacity 300ms var(--ease)}
.plq-scrim.is-on{opacity:1;pointer-events:auto}

/* ============================================================ HERO */
.plq-hero{position:relative;overflow:hidden;background:#071b2c;isolation:isolate}
.plq-hero__photo{position:absolute;inset:-4%;background-size:cover;background-position:58% 46%;
  transform:scale(1.06);filter:blur(12px);opacity:0;
  transition:transform 1400ms var(--ease),filter 1000ms var(--ease),opacity 800ms var(--ease)}
.plq-hero.is-lit .plq-hero__photo{transform:scale(1);filter:blur(0);opacity:1}
.plq-hero__scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(4,18,30,.94) 0%,rgba(4,18,30,.78) 38%,rgba(4,18,30,.34) 68%,rgba(4,18,30,.5) 100%),
  linear-gradient(180deg,rgba(4,18,30,.7) 0%,transparent 26%,rgba(4,18,30,.55) 100%)}
@media(max-width:960px){.plq-hero__scrim{background:linear-gradient(180deg,rgba(4,18,30,.84) 0%,rgba(4,18,30,.68) 46%,rgba(4,18,30,.92) 100%)}}
.plq-hero__in{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,504px);
  gap:var(--s7);align-items:center;padding-block:162px var(--s8)}
@media(max-width:960px){.plq-hero__in{grid-template-columns:1fr;gap:var(--s6);padding-block:140px var(--s7)}}
.plq-hero__col{display:flex;flex-direction:column;gap:var(--s4);max-width:42ch}
.plq-hero h1{font-size:52px;line-height:1.08;font-weight:500;letter-spacing:-.028em;color:#fff}
.plq-hero__sub{font-size:18px;line-height:1.55;font-weight:500;color:rgba(255,255,255,.78)}
@media(max-width:1200px){.plq-hero h1{font-size:46px}}
@media(max-width:960px){
  .plq-hero__in{padding-block:122px var(--s6)}
  .plq-hero__col{max-width:none;gap:var(--s3)}
  .plq-hero h1{font-size:34px}
  .plq-hero__sub{font-size:15.5px}
}
.plq-hero__pts{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s1)}
.plq-hero__pts div{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;font-weight:500;color:rgba(255,255,255,.86);line-height:1.45}
.plq-hero__pts svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--gold-soft)}
@media(max-width:960px){.plq-hero__pts{display:none}}

/* ============================================================ FORM PANEL */
.plq-form{position:relative;
  background:linear-gradient(168deg,#FBF7F0 0%,var(--cream) 62%,#F2E8DA 100%);
  border:1px solid var(--cream-line);border-radius:var(--r-panel);
  box-shadow:0 30px 70px rgba(2,14,24,.45),0 2px 0 rgba(255,255,255,.7) inset;
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);
  /* A grid item's automatic minimum size is its min-content, so one long
     listing name in the example card stretched the whole quiz to 432px inside
     a 375px column and the root clipped the overflow. The card must follow the
     column, never the other way round. */
  min-width:0}
@media(max-width:520px){.plq-form{padding:var(--s4);border-radius:18px}}
.plq-form__top{display:flex;flex-direction:column;gap:10px}
.plq-form__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.plq-form__step{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.plq-form__free{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);
  background:rgba(0,46,79,.08);padding:5px 11px;border-radius:var(--r-pill)}
@media(max-width:420px){.plq-form__free{display:none}}
.plq-bar{height:4px;border-radius:4px;background:rgba(171,125,86,.22);overflow:hidden}
.plq-bar i{display:block;height:100%;background:var(--gold);border-radius:4px;transition:width 420ms var(--ease)}
.plq-stage{transition:height 340ms var(--ease)}
.plq-panel{display:flex;flex-direction:column;gap:var(--s4);transition:opacity 190ms var(--ease),transform 190ms var(--ease),filter 190ms var(--ease)}
.plq-panel.is-leaving{opacity:0;transform:translateY(-8px);filter:blur(4px)}
.plq-panel.is-entering{opacity:0;transform:translateY(10px);filter:blur(4px)}
.plq-q{display:flex;flex-direction:column;gap:6px}
.plq-q h2{font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--ink-mid)}
.plq-q p{font-size:14.5px;line-height:1.45;font-weight:500;color:var(--muted)}
@media(max-width:520px){.plq-q h2{font-size:22px}}

/* What the four taps buy, above the first question. Tinted rather than white
   so it cannot be mistaken for a fifth option — the options on this card are
   white pills, and a white block above them reads as one. */
.plq-promise{padding:12px 14px;border-radius:13px;background:var(--navy-50);
  border:1px solid rgba(31,58,95,.10)}
.plq-promise b{display:block;font-size:13.5px;font-weight:700;color:var(--navy)}
.plq-promise ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 16px;margin:7px 0 0;padding:0}
.plq-promise li{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--ink-mid)}
.plq-promise svg{flex:none;width:14px;height:14px;color:var(--navy)}
@media(max-width:600px){
  .plq-promise{padding:11px 12px}
  .plq-promise b{font-size:13px}
  .plq-promise ul{gap:3px 12px;margin-top:6px}
  .plq-promise li{font-size:12.5px}}

/* The example listing above the contact form. Same shape as a real card —
   photo, name, place, price — at a size that cannot compete with the form
   underneath it. Labelled twice: a badge and a sentence. */
.plq-ex{display:flex;flex-direction:column;gap:8px}
.plq-ex__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plq-ex__badge{flex:none;padding:3px 9px;border-radius:var(--r-pill);background:var(--gold-50);
  color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.plq-ex__h{font-size:13px;font-weight:500;color:var(--muted)}
.plq-ex__card{display:flex;align-items:center;gap:13px;padding:10px;background:#fff;
  border:1px solid var(--cream-line);border-radius:13px}
.plq-ex__ph{flex:none;width:76px;height:76px;object-fit:cover;border-radius:10px;background:var(--bg-sub)}
.plq-ex__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.plq-ex__txt b{font-size:15px;font-weight:600;color:var(--ink-mid);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.plq-ex__loc{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:500;color:var(--muted)}
.plq-ex__loc svg{flex:none;width:13px;height:13px}
.plq-ex__price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  font-size:15px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
.plq-ex__price i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--muted)}
.plq-ex__price em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--faint)}
@media(max-width:600px){
  .plq-ex__ph{width:64px;height:64px}
  .plq-ex__txt b{font-size:14px}
  .plq-ex__price{font-size:14px}}

.plq-opts{display:flex;flex-direction:column;gap:9px}
.plq-opt{display:flex;align-items:center;gap:13px;min-height:60px;padding:12px 16px;
  background:#fff;border:1px solid var(--cream-line);border-radius:13px;
  transition:border-color 170ms var(--ease),background 170ms var(--ease),transform 130ms var(--ease),box-shadow 170ms var(--ease);
  opacity:0;transform:translateY(8px);animation:plq-rise 380ms var(--ease) forwards}
.plq-opt__mark{flex:none;width:20px;height:20px;border-radius:50%;border:1.6px solid var(--cream-line);
  display:grid;place-items:center;transition:border-color 170ms var(--ease),background 170ms var(--ease)}
.plq-opt__mark::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;transform:scale(0);transition:transform 170ms var(--ease)}
.plq-opt__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.plq-opt__t{font-size:16px;font-weight:600;color:var(--ink-mid);line-height:1.25}
.plq-opt__d{font-size:13.5px;font-weight:500;color:var(--muted);line-height:1.3}
.plq-opt:active{transform:scale(.99)}
@media(hover:hover) and (pointer:fine){
  .plq-opt:hover{border-color:var(--gold);background:#FFFDFA;box-shadow:0 4px 14px rgba(171,125,86,.14)}
  .plq-opt:hover .plq-opt__mark{border-color:var(--gold)}
}
.plq-opt.is-on{border-color:var(--navy);background:var(--navy-50)}
.plq-opt.is-on .plq-opt__mark{border-color:var(--navy);background:var(--navy)}
.plq-opt.is-on .plq-opt__mark::after{transform:scale(1)}
@keyframes plq-rise{to{opacity:1;transform:translateY(0)}}
.plq-form__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-top:var(--s3);border-top:1px solid var(--cream-line)}
.plq-back{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;color:var(--muted);padding:6px 0;transition:color var(--dur) var(--ease)}
.plq-back svg{width:15px;height:15px}
@media(hover:hover) and (pointer:fine){.plq-back:hover{color:var(--ink-mid)}}
.plq-form__note{font-size:13px;font-weight:500;color:var(--faint);text-align:right;min-width:0}
/* On a phone this note ran to two lines the moment Back appeared beside it and
   pushed the card taller on every step. Smaller, and allowed to shrink. */
/* Its own row on a phone, always. Sharing the row with Back made the note wrap
   to two lines only on steps 2-4, so the card grew the moment Back appeared. A
   dedicated row is the same height on every step. */
@media(max-width:560px){
  .plq-form__foot{flex-wrap:wrap;gap:8px 10px;align-items:center}
  .plq-form__note{flex:1 0 100%;order:2;text-align:left;font-size:11.5px;line-height:1.35}
}

/* ============================================================ CERTIFICATE */
.plq-cert__card{position:relative;border-radius:18px;overflow:hidden;
  background:linear-gradient(158deg,#0B2337 0%,#06182a 62%,#0a2135 100%);
  border:1px solid rgba(207,166,134,.4);box-shadow:0 18px 44px rgba(2,12,22,.34);
  transition:transform 220ms var(--ease)}
.plq-cert__card.is-pressing{transform:scale(.985)}
.plq-cert__foil{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);
  background:radial-gradient(120% 90% at 50% 0%,rgba(207,166,134,.22),transparent 62%),linear-gradient(150deg,#0d2a42 0%,#08192b 100%);
  background-color:#0a2034;transition:opacity 460ms var(--ease),transform 560ms var(--ease),filter 460ms var(--ease)}
.plq-cert__card.is-open .plq-cert__foil{opacity:0;transform:scale(1.12);filter:blur(14px);pointer-events:none}
.plq-seal{position:relative;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 33% 26%,rgba(255,238,220,.85),transparent 42%),
    conic-gradient(from 210deg,#8A6140,#D9B48E 22%,#A5764F 46%,#E3C29B 68%,#8A6140 92%,#8A6140),#AB7D56;
  box-shadow:0 10px 30px rgba(171,125,86,.42),0 0 0 1px rgba(255,255,255,.2) inset,
    0 -3px 8px rgba(88,58,34,.45) inset,0 3px 6px rgba(255,238,220,.28) inset;
  color:#402917;font-weight:800;font-size:23px;letter-spacing:.06em;
  text-shadow:0 1px 0 rgba(255,240,225,.45),0 -1px 0 rgba(76,49,28,.5);
  transition:transform 220ms var(--ease),box-shadow 220ms var(--ease);
  touch-action:none;user-select:none;-webkit-user-select:none}
.plq-seal::after{content:"";position:absolute;inset:10px;border-radius:50%;border:1px solid rgba(74,48,27,.32);box-shadow:0 1px 0 rgba(255,240,225,.24)}
.plq-seal__halo{position:absolute;inset:-6px;border-radius:50%;pointer-events:none;border:2px solid rgba(207,166,134,.55);animation:plq-pulse 2400ms var(--ease) infinite}
@keyframes plq-pulse{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.3);opacity:0}100%{transform:scale(1.3);opacity:0}}
.plq-cert__card.is-pressing .plq-seal{transform:scale(1.05);box-shadow:0 12px 44px rgba(171,125,86,.7),0 0 0 1px rgba(255,255,255,.24) inset}
.plq-cert__card.is-pressing .plq-seal__halo{animation:none;opacity:0}
.plq-seal__ring{position:absolute;inset:-11px;transform:rotate(-90deg)}
.plq-seal__ring circle{fill:none;stroke-width:3;stroke-linecap:round}
.plq-seal__ring .trk{stroke:rgba(255,255,255,.22)}
.plq-seal__ring .val{stroke:var(--gold-soft);stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 120ms linear}
.plq-cert__hint{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding-inline:var(--s4)}
.plq-cert__hint b{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.01em}
.plq-cert__hint span{font-size:13px;font-weight:500;color:rgba(255,255,255,.6)}
.plq-cert__body{position:relative;padding:var(--s4);min-height:292px;display:flex;flex-direction:column;gap:var(--s2);justify-content:center}
.plq-cert__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-bottom:auto}
.plq-cert__mark{font-size:10.5px;font-weight:700;letter-spacing:.2em;color:var(--gold-soft)}
.plq-cert__exp{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.44)}
.plq-cert__label{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.44);margin-top:var(--s4)}
.plq-cert__name{font-size:25px;line-height:1.18;font-weight:600;letter-spacing:-.02em;color:#fff}
.plq-cert__note{font-size:13.5px;font-weight:500;line-height:1.45;color:rgba(255,255,255,.6)}
.plq-cert__code{display:flex;flex-direction:column;gap:6px;margin-top:var(--s2);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.14)}
.plq-cert__code b{font-size:18px;font-weight:800;letter-spacing:.1em;color:var(--gold-soft);font-variant-numeric:tabular-nums}
.plq-cert__code span{font-size:11.5px;font-weight:500;line-height:1.45;color:rgba(255,255,255,.42)}
.plq-cert__shine{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);transform:translateX(-60%)}
.plq-cert__card.is-open .plq-cert__shine{animation:plq-shine 900ms var(--ease) 200ms 1}
@keyframes plq-shine{0%{opacity:0;transform:translateX(-60%)}22%{opacity:1}100%{opacity:0;transform:translateX(60%)}}
.plq-cert__card.is-open .plq-cert__body>*{animation:plq-rise 460ms var(--ease) backwards}
.plq-cert__card.is-open .plq-cert__label{animation-delay:200ms}
.plq-cert__card.is-open .plq-cert__name{animation-delay:260ms}
.plq-cert__card.is-open .plq-cert__note{animation-delay:310ms}
.plq-cert__card.is-open .plq-cert__code{animation-delay:360ms}
/* Confirmation of a lead that has already been sent, so the tick is the
   subject of the screen and the messengers are the offer underneath it. The
   ring and the check are drawn rather than faded in — a mark being written
   reads as "done", a mark appearing reads as decoration. */
.plq-done{display:flex;align-items:flex-start;gap:14px}
/* Gold ring, navy tick on a pale blue disc: three quiet colours where the one
   thing the screen has to say is "done". It is a filled navy disc with a white
   tick now — the same weight as the primary button, which is the only other
   navy object on the card. */
.plq-done__ic{flex:0 0 auto;width:50px;height:50px;display:grid;place-items:center;
  border-radius:999px;background:var(--navy);
  box-shadow:0 6px 18px rgba(0,46,79,.28);
  animation:plqDonePop 560ms var(--pop-in) both}
.plq-done__ic svg{width:30px;height:30px;overflow:visible}
/* The resting state is DRAWN, and the animation runs from the hidden state
   with `backwards`. With the old `stroke-dashoffset:145` base plus `forwards`
   the mark existed only as an animation result — and any repaint that dropped
   the finished animation (a compositing change on the parent, which also runs
   one) took the tick with it. That is the "draws, then disappears" the client
   saw. Now there is nothing to lose: the base is the final state. */
.plq-done__ring,.plq-done__tick{fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dashoffset:0}
.plq-done__ring{stroke:rgba(255,255,255,.34);stroke-width:2;stroke-dasharray:145;
  animation:plqDoneDraw 520ms cubic-bezier(.23,1,.32,1) 90ms backwards}
.plq-done__tick{stroke:#fff;stroke-width:3.6;stroke-dasharray:34;
  animation:plqDoneDraw 300ms cubic-bezier(.23,1,.32,1) 420ms backwards}
@keyframes plqDoneDraw{from{stroke-dashoffset:var(--plq-dash,145)}to{stroke-dashoffset:0}}
.plq-done__tick{--plq-dash:34}
@keyframes plqDonePop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
/* 14px under a 30px heading read as fine print, and this screen has room. */
.plq-done__msg{margin:18px 0 14px;padding-top:16px;border-top:1px solid var(--cream-line);
  font-size:16px;line-height:1.55;font-weight:500;color:var(--muted)}
.plq-done .plq-q p{font-size:16px;line-height:1.5}
@media(prefers-reduced-motion:reduce){
  .plq-done__ic{animation:none}
  .plq-done__ring,.plq-done__tick{animation:none}
}
@media(max-width:520px){.plq-done{gap:12px}.plq-done__ic{width:44px;height:44px}.plq-done__ic svg{width:26px;height:26px}}
.plq-exit{display:flex;flex-direction:column;gap:10px}
/* Two columns at every width. EN has three channels and RU four, so a fixed
   pair per row keeps both tidy; an odd last child takes the full width rather
   than sitting half-empty beside a gap. */
.plq-exit__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plq-exit__row .plq-btn{min-width:0;padding-inline:16px}
.plq-exit__row .plq-btn>span{overflow:hidden;text-overflow:ellipsis}
.plq-exit__row>.plq-btn:last-child:nth-child(odd){grid-column:1/-1}

/* Messenger buttons wear their own brand. Nothing else on the page changes
   colour — this is the one place where telling WhatsApp from Telegram from
   LINE at a glance matters more than the palette. */
.plq-ch{color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.14)}
.plq-ch--wa{background:#25D366}
.plq-ch--tg{background:#229ED9}
.plq-ch--line{background:#06C755}
/* MAX has no flat colour of its own — its mark is the gradient. */
.plq-ch--max{background:linear-gradient(135deg,#4cc2ff 0%,#5533ee 66%,#9933dd 100%)}
.plq-ch--plain{background:#fff;color:var(--ink-mid);border:1px solid var(--line-strong);box-shadow:none;min-height:50px;font-size:15px}
@media(hover:hover) and (pointer:fine){
  .plq-ch--wa:hover{background:#1eb85a}
  .plq-ch--tg:hover{background:#1c8cc0}
  .plq-ch--line:hover{background:#05ad4b}
  .plq-ch--max:hover{filter:saturate(1.1) brightness(1.06)}
  .plq-ch--plain:hover{border-color:var(--ink-mid);background:var(--bg-sub)}}

/* Lead step. Two plain fields — the point is that nothing here looks like a
   form to be endured: same pill language as the rest of the card. */
.plq-lead{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.plq-lead__f{display:flex;flex-direction:column;gap:6px}
/* `display:flex` beats the `hidden` attribute, and the handle field is hidden
   until a messenger is chosen — without this it showed as an empty white box. */
.plq-lead__f[hidden]{display:none}
.plq-lead__f>span{font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--muted)}
/* Says "you may skip me" without shouting it: lighter than the label it
   follows, on the two rows that stopped being required. */
.plq-lead__opt{font-style:normal;font-weight:500;color:var(--faint);margin-left:6px}
.plq-lead__opt::before{content:"· "}
.plq-lead__f input{height:52px;padding:0 16px;border-radius:14px;
  border:1px solid var(--line-strong);background:#fff;color:var(--ink);
  font:400 16px/1 inherit;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.plq-lead__f input::placeholder{color:var(--line-strong)}
.plq-lead__f input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,46,79,.1)}
.plq-lead__f input.is-bad{border-color:#C4442F;box-shadow:0 0 0 3px rgba(196,68,47,.12)}
/* Phone: dial code and national number in one box. Free text let anyone type
   any number of characters; the code caps the digits per country and shows the
   shape of a local number in the placeholder. */
.plq-tel{position:relative;display:flex;align-items:stretch;height:52px;
  border:1px solid var(--line-strong);border-radius:14px;background:#fff;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.plq-tel{overflow:hidden}
.plq-tel:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,46,79,.1)}
.plq-tel.is-bad{border-color:#C4442F;box-shadow:0 0 0 3px rgba(196,68,47,.12)}
/* One control with two zones, not a rounded block sitting inside a rounded
   box: the code side has no radius of its own and its hover fill is clipped by
   the field. */
.plq-tel__cc{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:0 12px 0 15px;border:0;border-right:1px solid var(--line);
  border-radius:0;background:none;cursor:pointer;
  font:600 14px/1 inherit;color:var(--ink);
  transition:background var(--dur) var(--ease)}
.plq-tel__cc:hover{background:var(--bg-sub)}
.plq-tel__code{font-weight:700;letter-spacing:.02em}
.plq-tel__dial{color:var(--muted);font-weight:600}
.plq-tel__cc svg{width:12px;height:12px;color:var(--faint);
  transition:transform var(--dur) var(--ease)}
.plq-tel__cc[aria-expanded="true"] svg{transform:rotate(180deg)}
/* Two class names on purpose: `.plq-lead__f input` is class+element and so
   out-specifies a single class here — the number field kept the border and the
   14px radius of a standalone input, a second rounded box inside the first.
   That is exactly what the client saw. */
.plq-tel .plq-tel__in{flex:1 1 auto;min-width:0;height:100%;border:0;border-radius:0;
  background:none;box-shadow:none;padding:0 16px;font:400 16px/1 inherit;color:var(--ink)}
.plq-tel .plq-tel__in:focus{outline:none;border:0;box-shadow:none}
.plq-tel .plq-tel__in::placeholder{color:var(--line-strong)}
/* the panel hangs outside a field that now clips its corners, so it is
   positioned from the field's wrapper instead */
.plq-lead__f{position:relative}
.plq-cc{position:absolute;z-index:40;top:calc(100% + 6px);left:0;
  width:min(340px,100%);background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 20px 44px rgba(16,24,40,.18);
  padding:8px;animation:plqCcIn 220ms var(--pop-in) both;transform-origin:20px -8px}
@keyframes plqCcIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.plq-cc__q{width:100%;height:40px;padding:0 12px;margin-bottom:6px;
  border:1px solid var(--line-strong);border-radius:10px;
  font:400 14px/1 inherit;color:var(--ink)}
.plq-cc__q:focus{outline:none;border-color:var(--navy)}
.plq-cc__list{max-height:220px;overflow:auto;-webkit-overflow-scrolling:touch}
.plq-cc__b{display:flex;width:100%;align-items:center;gap:10px;padding:9px 10px;
  border:0;border-radius:10px;background:none;cursor:pointer;text-align:left;
  font:500 14px/1.2 inherit;color:var(--ink)}
.plq-cc__b i{font-style:normal;margin-left:auto;color:var(--muted);font-weight:600}
.plq-cc__b:hover,.plq-cc__b.is-on{background:var(--navy-50)}
.plq-cc__none{padding:10px;color:var(--muted);font-size:14px}

/* Preferred channel. Brand colour lives in the glyph while the chip is
   unselected; the chosen chip goes navy and the glyph turns white with it. A
   coloured mark left on a coloured fill is exactly what made the project form
   unreadable when the card changed theme. */
.plq-ways{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.plq-way{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;min-height:66px;padding:8px 4px;border:1px solid var(--line-strong);
  border-radius:14px;background:#fff;cursor:pointer;
  font:600 12.5px/1.1 inherit;color:var(--ink-mid);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),
             color var(--dur) var(--ease),transform 140ms var(--ease)}
.plq-way svg{width:20px;height:20px;display:block;
  transition:color var(--dur) var(--ease)}
.plq-way--wa svg{color:#25D366}
.plq-way--tg svg{color:#229ED9}
.plq-way--line svg{color:#06C755}
.plq-way--max svg{color:#7B4DFF}
.plq-way--call svg{color:var(--gold)}
@media(hover:hover) and (pointer:fine){
  .plq-way:hover{border-color:var(--navy);background:var(--navy-50)}}
.plq-way:active{transform:scale(.97)}
.plq-way.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.plq-way.is-on svg{color:#fff}
.plq-ways.is-bad .plq-way{border-color:#C4442F}
@media(max-width:560px){
  .plq-ways{grid-template-columns:1fr 1fr}
  .plq-way{min-height:60px;font-size:13px}}

/* The field a person never sees and a bot fills in. */
.plq-lead__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Holds the visible SmartCaptcha checkbox widget — the widget node itself is
   moved in by JS, this just gives it a slot in the form's own flow and a
   place to hang an error ring when the visitor submits without ticking it. */
.plq-lead__captcha{display:flex;justify-content:center;min-height:74px}
.plq-lead__captcha.is-bad{outline:2px solid #C4442F;outline-offset:4px;border-radius:8px}
/* The consent line. It names the button it sits above, and it sits above it
   rather than under it: both Роскомнадзор and Yandex's own advertiser guidance
   look for the policy to be readable BEFORE the press, not after. Small, but
   never grey-on-grey — 12.5px at --muted clears AA on the card. */
.plq-lead__legal{margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.plq-lead__legal a{color:var(--navy);border-bottom:1px solid rgba(31,58,95,.28);
  text-decoration:none;transition:color 200ms var(--ease),border-color 200ms var(--ease)}
.plq-lead__legal a:hover{color:var(--gold);border-color:var(--gold)}
.plq-lead__err{font-size:14px;line-height:1.45;color:#C4442F}
.plq-lead .plq-btn{margin-top:2px}

@media(max-width:520px){.plq-exit__row{grid-template-columns:1fr}
  .plq-exit__row>.plq-btn:last-child:nth-child(odd){grid-column:auto}}

/* A light runs once around the card when the header CTA is pressed and the
   form is already on screen — a press has to answer for itself, and scrolling
   to something already in view answers nothing. One ring, one turn, gold. */
@property --plq-beam{syntax:'<angle>';initial-value:0deg;inherits:false}
.plq-form{position:relative}
.plq-form.is-beam::after{
  content:"";position:absolute;inset:-2px;border-radius:24px;pointer-events:none;z-index:6;
  padding:2px;
  background:conic-gradient(from var(--plq-beam),
    rgba(207,166,134,0) 0deg 250deg,rgba(207,166,134,.35) 300deg,
    var(--gold) 342deg,rgba(207,166,134,.35) 356deg,rgba(207,166,134,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:plqBeam 1150ms cubic-bezier(.4,0,.2,1) 1}
@keyframes plqBeam{from{--plq-beam:0deg}to{--plq-beam:360deg}}
@media(prefers-reduced-motion:reduce){.plq-form.is-beam::after{animation:none;opacity:0}}

/* ============================================================ TRUST STRIP
   Icon and headline share one line and carry the claim together; the line
   below adds a new fact instead of restating the number. Gold marks the
   icon, navy the figure, so the strip stays inside the brand palette. */
.plq-trust{background:#fff;border-block:1px solid var(--line)}
.plq-trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
@media(max-width:900px){.plq-trust__grid{grid-template-columns:1fr 1fr}}
.plq-t{background:#fff;padding:var(--s5) var(--s4);display:flex;flex-direction:column;gap:8px}
/* only the rating goes anywhere, so only the rating looks like it does */
.plq-t--link{transition:background 200ms var(--ease)}
.plq-t--link .plq-t__top>svg:last-child{width:15px;height:15px;color:var(--faint);
  opacity:0;transform:translateX(-4px);align-self:center;
  transition:opacity 200ms var(--ease),transform 200ms var(--ease),color 200ms var(--ease)}
@media(hover:hover) and (pointer:fine){
  .plq-t--link:hover{background:#FFFDFA}
  .plq-t--link:hover .plq-t__top>svg:last-child{opacity:1;transform:none;color:var(--gold)}
}
@media(hover:none){.plq-t--link .plq-t__top>svg:last-child{opacity:.55;transform:none}}
/* nowrap on purpose: "7 из 10" + its label was breaking onto a second line and
   knocking the four tiles out of alignment. The label shrinks instead. */
.plq-t__top{display:flex;align-items:baseline;gap:9px;flex-wrap:nowrap;min-width:0}
.plq-t__top b{flex:0 0 auto}
.plq-t__top span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plq-t__top svg{width:19px;height:19px;flex:none;color:var(--gold);align-self:center;translate:0 1px}
.plq-t__top b{font-size:28px;font-weight:700;letter-spacing:-.03em;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.plq-t__top span{font-size:14px;font-weight:600;color:var(--ink-mid);letter-spacing:-.015em}
.plq-t__k{font-size:13.5px;font-weight:500;color:var(--muted);line-height:1.45;text-wrap:pretty}
@media(max-width:900px){
  .plq-t{padding:var(--s4) var(--s3);gap:6px}
  .plq-t__top b{font-size:23px}
  .plq-t__top span{font-size:13px}
  .plq-t__k{font-size:12.5px}
}
/* On a phone a 163px tile cannot hold the number and its label side by side,
   and the ellipsis that keeps them on one line at desktop was eating the label
   instead. Below 600 the pair stacks: number keeps its line, label takes the
   whole of the next one. */
@media(max-width:600px){
  .plq-t{padding:16px 13px;gap:5px}
  .plq-t__top{flex-wrap:wrap;gap:0 7px}
  .plq-t__top b{font-size:21px}
  .plq-t__top span{flex:1 0 100%;white-space:normal;overflow:visible;font-size:12.5px;line-height:1.25}
  .plq-t__top svg{width:16px;height:16px}
  .plq-t__k{font-size:12.5px;line-height:1.4}
}

/* ============================================================ RAILS
   The rails sit on a tinted band so the white cards read as cards, and the
   track is masked at both ends so a half-shown card announces "there is more"
   instead of looking clipped. */
/* The two rails used to share one grey band with the map teaser between them,
   so all three ran together. They now alternate grey / white / grey and each
   carries its own hairline. */
.plq-band{border-bottom:1px solid var(--line)}
.plq-sec--railA,.plq-sec--railB{background:var(--bg-sub)}
.plq-map{background:#fff;border-block:1px solid var(--line)}
.plq-railhead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);margin-bottom:var(--s4)}
.plq-railhead .plq-head{margin-bottom:0}
.plq-ctrls{display:flex;align-items:center;gap:10px;flex:none}
.plq-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:#fff;color:var(--ink-mid);
  display:grid;place-items:center;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.plq-arrow svg{width:18px;height:18px}
.plq-arrow[disabled]{opacity:.3;pointer-events:none}
@media(hover:hover) and (pointer:fine){.plq-arrow:hover{background:var(--navy);border-color:var(--navy);color:#fff}}
/* touch scrolls; arrows there are just clutter that pushes the head taller */
@media(max-width:760px){.plq-ctrls{display:none}}

/* filter row: two dropdowns, nothing else */
.plq-fbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:var(--s4)}
.plq-dd{position:relative}
.plq-dd__btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 16px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:#fff;font-size:14.5px;white-space:nowrap;
  transition:border-color 170ms var(--ease),box-shadow 170ms var(--ease)}
.plq-dd__btn:hover{border-color:var(--ink-mid)}
.plq-dd.is-on .plq-dd__btn{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-50)}
.plq-dd__lab{color:var(--faint);font-weight:500}
.plq-dd__val{color:var(--ink-mid);font-weight:600}
.plq-dd__btn>svg{width:16px;height:16px;color:var(--muted);transition:transform 200ms var(--ease)}
.plq-dd.is-on .plq-dd__btn>svg{transform:rotate(180deg)}
.plq-dd__pop{position:absolute;top:50px;left:0;min-width:210px;max-height:280px;overflow:auto;padding:6px;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(16,24,40,.18);
  transform-origin:top left;transform:scale(.9) translateY(-6px);opacity:0;pointer-events:none;
  transition:opacity 130ms var(--pop-out),transform 200ms var(--pop-out);z-index:40}
.plq-dd.is-on .plq-dd__pop{opacity:1;transform:none;pointer-events:auto;
  transition:opacity 120ms linear,transform 420ms var(--pop-in)}
/* the trigger acknowledges the press instead of only the panel moving */
.plq-dd__btn:active{transform:scale(.97)}
.plq-dd__btn{transition:border-color 200ms var(--ease),box-shadow 200ms var(--ease),transform 160ms var(--pop-out)}
.plq-dd__opt{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;font-size:14.5px;font-weight:500;
  color:var(--ink-mid);transition:background 140ms var(--ease)}
.plq-dd__opt:hover{background:var(--bg-sub)}
.plq-dd__opt.is-on{background:var(--navy-50);color:var(--navy);font-weight:600}
@media(max-width:760px){
  /* Both triggers keep one row whatever is chosen in them. They were sized by
     their content, so picking a district pushed the second one onto a new line;
     now they split the row and the value truncates instead. */
  .plq-fbar{gap:6px;flex-wrap:nowrap}
  /* content-sized until the row runs out, then both shrink in proportion to what
     they hold — a long district takes its share from the shorter neighbour */
  .plq-fbar>.plq-dd{flex:0 1 auto;min-width:0}
  .plq-dd__btn{min-height:38px;padding:0 10px 0 12px;font-size:12.5px;gap:4px;width:100%}
  .plq-dd__lab{flex:0 0 auto}
  .plq-dd__val{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .plq-dd__btn>svg{flex:0 0 14px;width:14px;height:14px;margin-left:auto}
  .plq-dd__pop{top:44px;min-width:180px}
  .plq-dd__opt{font-size:13px;padding:8px 11px}
}
/* 390px is the common phone: at 12.5px the two pills together were ~11px wider
   than the row, so both ended in an ellipsis. One step down clears it. */
@media(max-width:420px){
  .plq-dd__btn{font-size:12px;padding:0 9px 0 11px}
  /* the label is the quieter half of the pill, so it gives up the width first */
  .plq-dd__lab{font-size:11.5px}
  .plq-dd__opt{font-size:12.5px}
}

/* Left fade removed on the client's call: the right one is what tells you there
   is more to come, the left one only greyed out the card you were reading. */
@property --fadeL{syntax:"<length>";inherits:false;initial-value:0px}
@property --fadeR{syntax:"<length>";inherits:false;initial-value:0px}
.plq-rail{--fadeL:0px;--fadeR:72px;
  overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding:8px 0 20px;margin:-8px 0 -20px;
  /* the fade only exists on the side that still has cards behind it, so the
     last card is never dimmed once you have reached the end */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fadeL),
      #000 calc(100% - var(--fadeR)),rgba(0,0,0,.55) calc(100% - var(--fadeR) * .45),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 var(--fadeL),
      #000 calc(100% - var(--fadeR)),rgba(0,0,0,.55) calc(100% - var(--fadeR) * .45),transparent 100%);
  /* the width of the fade is animated, so reaching the end eases it away
     instead of switching it off between two frames */
  transition:--fadeL 260ms var(--ease),--fadeR 260ms var(--ease)}
.plq-rail::-webkit-scrollbar{display:none}
.plq-rail.is-grabbing{scroll-behavior:auto;scroll-snap-type:none;cursor:grabbing}
.plq-rail__track{display:flex;align-items:stretch;gap:var(--s4);width:max-content}
.plq-rail__track>*{flex:0 0 auto;width:clamp(268px,27vw,336px);scroll-snap-align:start}
/* On a phone the card takes a little more width and a lot less gap, but never
   the whole viewport: the sliver of the next card is what tells a thumb the
   row scrolls sideways, so it is a feature, not leftover space. */
@media(max-width:640px){
  .plq-rail__track{gap:16px}
  .plq-rail__track>*{width:78vw;max-width:310px}
}
/* scroll progress, same idea as the home rail */
.plq-prog{height:3px;border-radius:3px;background:var(--line-strong);margin-top:var(--s4);overflow:hidden}
.plq-prog i{display:block;height:100%;border-radius:3px;background:var(--navy);width:22%;transform-origin:left;
  transition:transform 120ms linear,width 200ms var(--ease)}

/* ============================================================ CARD
   Compact by design: photo, one price line, one row of four facts, one link.
   The price is the loudest thing on the card and it never wraps. */
.plq-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;transition:border-color 260ms var(--ease),box-shadow 260ms var(--ease),transform 260ms var(--ease)}
@media(hover:hover) and (pointer:fine){
  .plq-card:hover{border-color:var(--line-strong);box-shadow:0 14px 34px rgba(16,24,40,.10);transform:translateY(-3px)}
  .plq-card:hover .plq-card__ph img.is-cur{transform:scale(1.05)}
}
.plq-card__ph{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--bg-sub)}
/* the track is exactly one frame wide and its children overflow it, so a step
   is a flat -100% and never has to be recomputed on resize */
.plq-card__track{display:flex;width:100%;height:100%;
  transition:transform 420ms cubic-bezier(0,0,.2,1)}
.plq-card__ph img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;
  transition:transform 620ms var(--ease)}
/* smaller than the listing page's 36px: the card here is 300px wide and the
   arrows must not compete with the photo */
.plq-card__nav{position:absolute;top:50%;z-index:3;width:30px;height:30px;padding:0;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.95);color:var(--ink-mid);
  box-shadow:0 2px 10px rgba(0,0,0,.16);opacity:0;
  transform:translateY(-50%) scale(.9);
  transition:opacity 200ms var(--ease),transform 200ms var(--ease),background 200ms var(--ease)}
.plq-card__nav svg{width:14px;height:14px;display:block}
.plq-card__nav--prev{left:10px}
.plq-card__nav--next{right:10px}
.plq-card__nav:active{transform:translateY(-50%) scale(.94);transition-duration:120ms}
@media(hover:hover) and (pointer:fine){
  .plq-card:hover .plq-card__nav{opacity:1;transform:translateY(-50%) scale(1)}
  .plq-card__nav:hover{background:#fff}
}
@media(hover:none){.plq-card__nav{opacity:.92;transform:translateY(-50%) scale(1)}}
.plq-card__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.34) 28%,transparent 56%)}
.plq-status{position:absolute;top:11px;left:11px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.95);
  font-size:12px;font-weight:600;color:var(--ink-mid);box-shadow:0 2px 8px rgba(0,0,0,.14)}
.plq-status i{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.plq-status.is-ready i{background:#2E7D5B}
.plq-card__cap{position:absolute;left:13px;right:13px;bottom:11px;z-index:2;color:#fff}
.plq-card__cap b{display:block;font-size:17.5px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.plq-card__cap span{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:rgba(255,255,255,.88);margin-top:2px}
.plq-card__cap svg{width:12.5px;height:12.5px;flex:none}
/* price band: one line, full number, cream ground so it reads as its own zone */
.plq-card__band{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 15px;
  background:linear-gradient(180deg,#FAF5EE,#F2EADE);border-bottom:1px solid var(--cream-line);white-space:nowrap}
.plq-card__band b{font-size:24px;font-weight:800;letter-spacing:-.035em;color:var(--navy);line-height:1.05;font-variant-numeric:tabular-nums}
.plq-card__band b i{font-style:normal;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--muted)}
.plq-card__band span{font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:640px){.plq-card__band b{font-size:22px}}
.plq-card__b{display:flex;flex-direction:column;gap:12px;padding:13px 15px 14px}
/* four facts in one row, divided by hairlines rather than boxed cells */
.plq-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.plq-facts div{display:flex;flex-direction:column;gap:2px;min-width:0;padding-left:10px;border-left:1px solid var(--line)}
.plq-facts div:first-child{padding-left:0;border-left:0}
.plq-facts dt{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plq-facts dd{margin:0;font-size:13.5px;font-weight:600;color:var(--ink-mid);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plq-card__go{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;font-weight:600;color:var(--navy)}
.plq-card__go svg{width:15px;height:15px;flex:none;transition:transform 220ms var(--ease)}
.plq-card:hover .plq-card__go svg{transform:translateX(4px)}
.plq-empty{padding:var(--s6) 0;font-size:16px;font-weight:500;color:var(--muted)}

/* the card that always closes the rail */
.plq-card--more{position:relative;overflow:hidden;justify-content:center;align-items:flex-start;gap:10px;
  padding:var(--s5) var(--s4);text-align:left;color:#fff;border-color:#96683F;
  background:linear-gradient(158deg,#B98A62 0%,var(--gold) 42%,#8A6039 100%)}
/* a soft sheen so the flat gold does not read as a colour swatch */
.plq-card--more::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(64% 52% at 84% 4%,rgba(255,255,255,.16),transparent 60%),
             radial-gradient(64% 54% at 4% 100%,rgba(74,40,12,.26),transparent 70%)}
.plq-card--more>*{position:relative;z-index:1}
.plq-card--more b{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.plq-card--more p{font-size:14px;line-height:1.5;font-weight:500;color:rgba(255,255,255,.82);max-width:30ch}
.plq-card--more .plq-card__go{color:#fff;justify-content:flex-start;gap:8px;margin-top:2px}
.plq-more__plus{position:relative;width:76px;height:76px;border-radius:50%;flex:none;margin-bottom:10px;
  background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 8px 22px rgba(74,42,14,.26);
  /* Apple-ish: one long spring on the rotation, a shorter ease on the fill,
     so the turn settles rather than snapping to a stop */
  transition:transform 620ms cubic-bezier(.32,1.28,.42,1),
             background 320ms var(--ease),border-color 320ms var(--ease),
             box-shadow 320ms var(--ease)}
.plq-more__plus::before,.plq-more__plus::after{content:"";position:absolute;left:50%;top:50%;
  background:#8A6039;border-radius:2px;transform:translate(-50%,-50%)}
.plq-more__plus::before{width:30px;height:2.4px}
.plq-more__plus::after{width:2.4px;height:30px}
.plq-card--more:active .plq-more__plus{transform:rotate(90deg) scale(.94);transition-duration:140ms}
/* The site stylesheet carries a global a:hover{color:#838383}, which outranks
   the class that sets this card's white and greys its heading out on hover.
   The animation is the whole hover state here; the colour never changes. */
.plq-card--more,.plq-card--more:hover,.plq-card--more:focus{color:#fff}
@media(hover:hover) and (pointer:fine){
  .plq-card--more:hover{border-color:#7E5A38;transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(122,79,40,.32)}
  .plq-card--more:hover .plq-more__plus{transform:rotate(90deg) scale(1.06);
    background:#fff;box-shadow:0 14px 30px rgba(74,42,14,.34)}
}

/* ============================================================ ANSWERS
   A real split: the worries stand in one column as a list you read down, the
   answer holds the other. The chip cloud that used to wrap across the top left
   two thirds of the section empty and gave the panel nothing to sit against. */
/* Flat navy across a full-height section read as a dead panel. It now carries
   the same idea as the map card: a lit navy ground with the gold coming across
   it, rather than one colour holding still. */
.plq-ans{color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(158deg,#2A4E7D 0%,var(--navy) 38%,var(--navy-700) 100%)}
.plq-ans::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 80% at 84% 6%,rgba(199,148,100,.62),transparent 58%),
             radial-gradient(40% 60% at 100% 62%,rgba(171,125,86,.34),transparent 62%),
             radial-gradient(52% 58% at -6% 88%,rgba(255,255,255,.10),transparent 66%)}
/* a hairline of gold along the top edge ties it to the band above */
.plq-ans::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(207,166,134,.55) 34%,rgba(207,166,134,.2) 72%,transparent)}
.plq-ans__in{position:relative;z-index:1}
.plq-ans h2{color:#fff;font-size:38px;line-height:1.1}
@media(max-width:900px){.plq-ans h2{font-size:28px}}
.plq-ans__lede{font-size:17px;line-height:1.5;font-weight:500;color:rgba(255,255,255,.66);max-width:44ch}
@media(max-width:900px){.plq-ans__lede{font-size:15.5px}}

/* Sized to its content and sticky, not stretched to the list. Stretching filled
   the card with a lake of white around four lines of text — the complaint was
   the emptiness, not the height of the column. */
.plq-ans__grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:var(--s6);align-items:start}
.plq-ans__right{display:flex;position:sticky;top:96px}
@media(max-width:1000px){.plq-ans__right{position:static}}
@media(max-width:1000px){.plq-ans__grid{grid-template-columns:1fr;gap:var(--s5)}}
.plq-ans__left{display:flex;flex-direction:column;gap:var(--s2)}
.plq-ans__left .plq-eyebrow{color:var(--gold-soft)}
.plq-ans__list{display:flex;flex-direction:column;gap:7px;margin-top:var(--s4)}

/* one worry per row, read down the column */
.plq-cn{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:10px 12px 10px 10px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  font-size:15px;font-weight:500;color:rgba(255,255,255,.82);
  transition:background 200ms var(--ease),border-color 200ms var(--ease),
             color 200ms var(--ease),transform 200ms var(--ease)}
.plq-cn__t{flex:1 1 auto;min-width:0}
.plq-cn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);color:#fff}
.plq-cn:active{transform:scale(.99)}
.plq-cn.is-on{background:#fff;border-color:#fff;color:var(--ink-mid);font-weight:600}
.plq-cn__ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.12);color:#fff;transition:background 200ms var(--ease),color 200ms var(--ease)}
.plq-cn.is-on .plq-cn__ic{background:var(--gold-50);color:var(--gold)}
.plq-cn__ic svg{width:16px;height:16px}
.plq-cn__go{flex:none;display:grid;place-items:center;width:16px;height:16px;
  opacity:0;transform:translateX(-4px);color:var(--gold);
  transition:opacity 200ms var(--ease),transform 200ms var(--ease)}
.plq-cn__go svg{width:14px;height:14px}
.plq-cn.is-on .plq-cn__go{opacity:1;transform:none}
/* the escape hatch is a row, but visibly not one of the six */
.plq-cn--other{margin-top:5px;background:transparent;border-style:dashed;
  border-color:rgba(255,255,255,.26);color:rgba(255,255,255,.72)}
.plq-cn--other .plq-cn__ic{background:transparent;border:1px solid rgba(255,255,255,.24)}
.plq-cn--other.is-on{background:#fff;border-style:solid}

.plq-ans__panel{position:relative;flex:1 1 auto;border-radius:var(--r-panel);
  padding:var(--s7) var(--s6) var(--s6);color:var(--ink-mid);
  display:flex;flex-direction:column;gap:var(--s3);
  background:linear-gradient(152deg,#fff 0%,#FFFCF8 52%,#F8F0E4 100%);
  box-shadow:0 30px 70px rgba(0,18,36,.34),0 0 0 1px rgba(255,255,255,.5);
  transition:opacity 190ms var(--ease),transform 190ms var(--ease),filter 190ms var(--ease)}
/* a gold seam along the top of the card, the same accent as the section edge */
.plq-ans__panel::before{content:"";position:absolute;left:var(--s5);right:var(--s5);top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),rgba(207,166,134,.25) 62%,transparent)}
@media(max-width:900px){.plq-ans__panel{padding:var(--s5) var(--s4) var(--s4)}}
.plq-ans__panel.is-swap{opacity:0;transform:translateY(6px);filter:blur(3px)}
.plq-ansp__n{position:absolute;top:18px;right:22px;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-variant-numeric:tabular-nums}
.plq-ansp__q{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--faint);max-width:40ch}
.plq-ansp__q::before{content:"“"}
.plq-ansp__q::after{content:"”"}
.plq-ansp__a{font-size:29px;font-weight:600;letter-spacing:-.025em;line-height:1.18;
  color:var(--ink-mid);max-width:26ch;text-wrap:balance}
@media(max-width:900px){.plq-ansp__a{font-size:22px}}
.plq-ansp__d{font-size:15.5px;line-height:1.6;font-weight:500;color:var(--muted);max-width:58ch;text-wrap:pretty}
/* the section's own call to action: the visitor is holding a question here */
/* 15. one line on a phone: the WhatsApp glyph already says WhatsApp, so the
   invitation moved out of the button and into the line beside it. */
/* Three channels now (WhatsApp, Telegram and MAX or LINE), so the row is
   allowed to wrap: the label takes the whole first line as soon as the three
   buttons no longer fit beside it. */
.plq-ansp__cta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding-top:var(--s3)}
.plq-ansp__lead{flex:0 1 auto;min-width:0;font-size:13.5px;font-weight:600;color:var(--faint);
  margin-right:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:561px) and (max-width:1080px){.plq-ansp__lead{flex:1 0 100%;margin-bottom:2px}}
/* Three equal discs, each in its own brand colour: three names of different
   lengths never fit one row on a phone, and the row wrapped into a stack. The
   colour and the mark carry the name — every other messenger row on this site
   is read the same way. */
.plq-ansp__ask{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:44px;height:44px;border-radius:50%;color:#fff;background:var(--navy);
  transition:transform 140ms var(--ease),filter 200ms var(--ease),box-shadow 200ms var(--ease)}
.plq-ansp__ask svg{width:20px;height:20px;flex:none}
.plq-ansp__ask:active{transform:scale(.94)}
@media(hover:hover) and (pointer:fine){
  .plq-ansp__ask:hover{filter:brightness(1.06) saturate(1.05);box-shadow:0 4px 14px rgba(16,24,40,.18)}}
.plq-ansp__ask--wa{background:#25D366}
.plq-ansp__ask--tg{background:#229ED9}
.plq-ansp__ask--line{background:#06C755}
.plq-ansp__ask--max{background:linear-gradient(135deg,#4cc2ff 0%,#5533ee 66%,#9933dd 100%)}
/* On a phone the two share the row evenly instead of asking for their natural
   widths: measuring them against the panel put the pair 2px over and flex-wrap
   dutifully stacked them. Splitting the row cannot overflow in any language. */
@media(max-width:560px){
  .plq-ansp__cta{flex-wrap:wrap}
  .plq-ansp__lead{flex:1 0 100%;margin-bottom:2px;white-space:normal}
  /* the discs keep their size on a phone: three of them and a label fit a
     390px row with room to spare, and stretching them would undo the point */
  .plq-ansp__ask{width:42px;height:42px}
  .plq-ansp__ask svg{width:19px;height:19px}
}

/* ============================================================ MAP TEASER
   A narrow band between the two rails, holding the same Google map and the same
   price pills as /map. It is a picture of the page it opens: gestures are off,
   there are no controls, and the whole card is one link. */
.plq-map__card{position:relative;overflow:hidden;border-radius:var(--r-panel);
  min-height:330px;display:flex;align-items:center;justify-content:flex-end;
  border:1px solid var(--cream-line);background:#E9EEF2;
  box-shadow:0 18px 44px rgba(16,24,40,.12)}
@media(max-width:820px){.plq-map__card{min-height:0;flex-direction:column;align-items:stretch}}
.plq-map__art{position:absolute;inset:0}
@media(max-width:820px){.plq-map__art{position:relative;height:290px}}
/* Google draws its own furniture inside the host; none of it belongs in a
   teaser, and the terms link steals the click from the card. */
.plq-map__art .gm-style a,.plq-map__art .gmnoprint,.plq-map__art .gm-style-cc{display:none!important}
.plq-map__art .gm-style img[src*="google"]{opacity:.5}
/* the map itself is the link; it sits under the wash and the words, so the
   button keeps its own click */
.plq-map__hit{position:absolute;inset:0;z-index:1}
.plq-pins{position:absolute;left:0;top:0}
/* the price pill from /map, value for value */
.plq-pin{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;
  padding:5px 10px;border-radius:var(--r-pill);background:#fff;border:1px solid #E8E8E8;
  font-size:13px;font-weight:800;letter-spacing:-.02em;color:var(--navy);
  box-shadow:0 2px 10px rgba(16,24,40,.18);font-variant-numeric:tabular-nums}
@media(max-width:820px){.plq-pin{font-size:12px;padding:4px 9px}}
/* the wash: gone by the time the map starts, solid where the words are */
.plq-map__wash{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,rgba(201,158,116,.14) 28%,rgba(171,125,86,.52) 43%,
    rgba(171,125,86,.90) 55%,rgba(150,105,66,.97) 68%,rgba(138,96,57,.99) 100%)}
@media(max-width:820px){.plq-map__wash{background:linear-gradient(180deg,
    rgba(171,125,86,0) 0%,rgba(171,125,86,.42) 26%,rgba(138,96,57,.98) 52%)}}
.plq-map__txt{position:relative;z-index:3;display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s5) var(--s6);width:min(46%,470px);color:#fff}
@media(max-width:820px){.plq-map__txt{width:auto;padding:var(--s4);margin-top:-96px}}
.plq-map__txt .plq-eyebrow{color:rgba(255,255,255,.82)}
.plq-map__txt h2{color:#fff;font-size:31px;line-height:1.12;max-width:16ch}
@media(max-width:900px){.plq-map__txt h2{font-size:25px}}
.plq-map__p{font-size:15.5px;line-height:1.55;font-weight:500;color:rgba(255,255,255,.9);max-width:46ch}
@media(max-width:900px){.plq-map__p{font-size:14.5px}}
.plq-map__acts{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s2)}
.plq-map__acts .plq-btn--pri{background:#fff;color:var(--navy);min-height:48px;padding:0 24px;font-size:15px}
.plq-map__acts .plq-btn--pri:hover{background:#fff;color:var(--navy-700);transform:translateY(-1px)}
.plq-map__count{font-size:13px;font-weight:600;color:rgba(255,255,255,.78);font-variant-numeric:tabular-nums}

/* The sitewide contact widget is injected by site footer code and hidden by a
   page-level rule; the landing wants it back, so this link (which loads after
   that rule) turns it on again. The floating Map view switch stays off. */
.pl-widget-wrap{display:block!important}

/* The two hidden Webflow collection lists that feed the rails, the map and the
   counters. They sit outside .plq as siblings, so they are hidden here rather
   than inside the namespace. Kept in the DOM, not removed: the script reads
   them at boot. */
#plq-projsrc,#plq-propsrc{display:none!important}
/* ---------------------------------------------------------------------------
   CONTACT WIDGET — landing dress, page-scoped
   The widget's markup, CSS and toggle live in the site's footer code and are
   shared with every other page, so nothing here touches them: this stylesheet
   loads later and simply outranks the defaults. Specificity is carried by
   .pl-widget-wrap rather than !important wherever the base rule allows it.
   --------------------------------------------------------------------------- */
/* The widget is a sibling of .plq, not a child, so none of the page's custom
   properties reach it. It carries its own copy of the handful it needs. */
.pl-widget-wrap{
  --navy:#1F3A5F; --navy-700:#162B47; --gold:#AB7D56; --cream-line:#E6D8C6;
  --ink-mid:#303030; --muted:#838383; --faint:#ACACAC;
  --ease:cubic-bezier(.23,1,.32,1);
  --pop-in:cubic-bezier(.32,1.28,.42,1); --pop-out:cubic-bezier(.4,0,.2,1);
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

/* Navy on navy over the objections section, so the button needs a collar. */
.pl-widget-wrap .pl-fab{
  box-shadow:0 0 0 3px rgba(255,255,255,.94),0 8px 24px rgba(0,20,40,.34)!important}
.pl-widget-wrap:has(.pl-card.show) .pl-fab{transform:scale(.88)}
.pl-widget-wrap:has(.pl-card.show) .pl-fab::before,
.pl-widget-wrap:has(.pl-card.show) .pl-fab::after{opacity:0;animation-play-state:paused}

/* The card grows out of the button it came from, the way a Notes window zooms
   out of its icon: origin at the button's corner, a spring that overshoots by
   a hair, and opacity running far ahead of the transform so the panel is
   readable while it is still arriving. Closing is short and linear — a window
   going away should not perform. */
body .pl-widget-wrap .pl-card{
  width:min(324px,calc(100vw - 32px));padding:0;overflow:hidden;text-align:left;
  border-radius:22px;border:1px solid var(--cream-line);
  background:linear-gradient(152deg,#fff 0%,#FFFCF8 54%,#F8F0E4 100%);
  box-shadow:0 30px 70px -18px rgba(0,18,36,.42),0 10px 24px -14px rgba(0,18,36,.28);
  transform-origin:100% 100%;
  transform:translate(10px,14px) scale(.72);filter:blur(4px);
  transition:transform 260ms var(--pop-out),opacity 150ms linear,filter 150ms linear}
body .pl-widget-wrap .pl-card.show{
  transform:none;filter:none;
  transition:transform 560ms var(--pop-in),opacity 170ms linear,filter 200ms linear}

/* a gold seam across the top, the page's own accent */
body .pl-widget-wrap .pl-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--gold),rgba(207,166,134,.3) 64%,transparent);z-index:2}

/* the contents arrive just behind the panel, in reading order */
body .pl-widget-wrap .pl-card>*{opacity:0;transform:translateY(9px);
  transition:opacity 200ms var(--ease),transform 320ms var(--pop-in)}
body .pl-widget-wrap .pl-card.show>*{opacity:1;transform:none}
body .pl-widget-wrap .pl-card.show .pl-logo{transition-delay:90ms}
body .pl-widget-wrap .pl-card.show h3{transition-delay:130ms}
body .pl-widget-wrap .pl-card.show .pl-cta{transition-delay:160ms}
body .pl-widget-wrap .pl-card.show .pl-phone{transition-delay:190ms}
body .pl-widget-wrap .pl-card.show .pl-socials{transition-delay:220ms}
body .pl-widget-wrap .pl-card .pl-close{opacity:1;transform:none;transition-delay:0ms}

body .pl-widget-wrap .pl-card .pl-logo{width:56px;height:56px;margin:26px 24px 12px;
  box-shadow:0 6px 18px rgba(0,20,40,.22),0 0 0 2px rgba(207,166,134,.55)}
body .pl-widget-wrap .pl-card h3{margin:0 24px 3px;font-size:19px;font-weight:600;
  letter-spacing:-.02em;color:var(--ink-mid)}
body .pl-widget-wrap .pl-card .pl-cta{margin:0 24px 16px;font-size:13.5px;line-height:1.45;
  font-weight:500;color:var(--muted)}
/* the number becomes the primary action rather than a line of blue text */
body .pl-widget-wrap .pl-card .pl-phone{display:flex;align-items:center;justify-content:center;
  margin:0 20px 14px;min-height:48px;padding:0 18px;border-radius:999px;
  background:var(--navy);color:#fff;font-size:16.5px;font-weight:600;letter-spacing:-.01em;
  transition:background 200ms var(--ease),transform 160ms var(--pop-out)}
body .pl-widget-wrap .pl-card .pl-phone:hover{background:var(--navy-700);color:#fff}
body .pl-widget-wrap .pl-card .pl-phone:active{transform:scale(.98)}
body .pl-widget-wrap .pl-card .pl-socials{gap:12px;padding:0 20px 22px}
body .pl-widget-wrap .pl-card .pl-socials a{width:46px;height:46px;
  box-shadow:0 4px 14px rgba(0,20,40,.18);
  transition:transform 320ms var(--pop-in),box-shadow 200ms var(--ease)}
body .pl-widget-wrap .pl-card .pl-socials a:hover{transform:translateY(-3px) scale(1.06);
  box-shadow:0 10px 22px rgba(0,20,40,.26)}
body .pl-widget-wrap .pl-card .pl-socials a:active{transform:scale(.95);transition-duration:120ms}
body .pl-widget-wrap .pl-card .pl-close{top:14px;right:14px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;color:var(--faint);z-index:3;
  transition:background 180ms var(--ease),color 180ms var(--ease)}
body .pl-widget-wrap .pl-card .pl-close:hover{background:rgba(0,0,0,.06);color:var(--ink-mid)}
@media(prefers-reduced-motion:reduce){
  body .pl-widget-wrap .pl-card,body .pl-widget-wrap .pl-card.show,
  body .pl-widget-wrap .pl-card>*{transition-duration:1ms!important}
}

/* ============================================================ OFFICE */
/* Grey, not cream: flat beige across a whole section reads as dust. The warmth
   stays, but as light falling across a neutral ground rather than as the ground
   itself — the same move as the map card and the objections section. */
.plq-off{position:relative;background:var(--bg-sub);color:var(--ink-mid);overflow:hidden;
  border-block:1px solid var(--line)}
.plq-off::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 62% at 86% -8%,rgba(171,125,86,.26),transparent 62%),
             radial-gradient(40% 46% at 8% 104%,rgba(0,46,79,.10),transparent 68%),
             linear-gradient(180deg,rgba(255,255,255,.75),transparent 32%)}
.plq-off__in{position:relative;z-index:2;padding-block:var(--sec);
  display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:var(--s6);align-items:center}
@media(max-width:1000px){.plq-off__in{grid-template-columns:1fr;gap:var(--s5)}}
.plq-off__col{display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start}
.plq-off h2{color:var(--ink-mid);font-size:40px;line-height:1.12}
@media(max-width:900px){.plq-off h2{font-size:28px}}
.plq-off__lede{font-size:17.5px;line-height:1.55;font-weight:500;color:var(--muted)}
.plq-off__rate{display:inline-flex;align-items:center;gap:10px;padding:9px 15px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--cream-line);font-size:14px;font-weight:600;
  align-self:flex-start;transition:background 200ms var(--ease),border-color 200ms var(--ease)}
.plq-off__rate:hover{background:#fff;border-color:var(--gold-soft)}
.plq-off__rate-go{width:15px;height:15px;flex:none;color:var(--gold);
  opacity:0;transform:translateX(-4px);transition:opacity 200ms var(--ease),transform 200ms var(--ease)}
.plq-off__rate:hover .plq-off__rate-go{opacity:1;transform:none}
@media(hover:none){.plq-off__rate-go{opacity:.7;transform:none}}
.plq-off__stars{display:inline-flex;gap:2px;color:var(--gold)}
.plq-off__stars svg{width:14px;height:14px}
.plq-off__rows{display:flex;flex-direction:column;width:100%;margin:0}
.plq-off__row{display:flex;gap:13px;align-items:flex-start;padding-block:var(--s3);border-top:1px solid var(--cream-line)}
.plq-off__row svg{width:19px;height:19px;flex:none;margin-top:2px;color:var(--gold)}
.plq-off__row dt{font-size:12px;font-weight:600;color:var(--faint);margin-bottom:3px}
.plq-off__row dd{margin:0;font-size:16px;font-weight:500;line-height:1.4;color:var(--ink-mid)}
/* These two buttons kept stacking. The cause was arithmetic, not flexbox: the
   text column was 430px and the pair needs ~410 at the default button size, so
   any longer label (Russian is longer) tipped it over and flex-wrap obeyed.
   Fixed at the source: the column is wider, this row is nowrap so wrapping is
   not even reachable, and the buttons are a size down with room to spare.
   Below 520px stacking is the correct layout, and only there is it allowed. */
/* The ghost button is a translucent white pill built for a dark ground; on the
   cream section it all but vanished, so here it takes an outlined form. */
.plq-off__acts .plq-btn--ghost{background:transparent;color:var(--ink-mid);
  border:1px solid var(--line-strong);backdrop-filter:none;-webkit-backdrop-filter:none}
.plq-off__acts .plq-btn--ghost:hover{background:#fff;border-color:var(--ink-mid)}
.plq-off__acts{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;width:100%}
.plq-off__acts .plq-btn{flex:0 0 auto;min-width:0;min-height:50px;padding-inline:20px;font-size:15px}
.plq-off__acts .plq-btn svg{width:17px;height:17px}
/* Below this the pair goes full-width, which is the right phone layout anyway.
   Measured: the Russian pair needs ~421px of row, and the single-column office
   layout gives vw-80, so side-by-side survives down to ~500px. 640 keeps a
   deliberate margin instead of sitting on the edge the way 430px did. */
@media(max-width:640px){
  .plq-off__acts{flex-wrap:wrap}
  .plq-off__acts .plq-btn{flex:1 1 100%}
}
/* The photo is the proof in this section, so it is lifted off the page rather
   than laid flat on it: a warm deep shadow plus a gold rim below. */
.plq-off__ph{position:relative;border-radius:var(--r-panel);margin:0;aspect-ratio:4/3;
  box-shadow:0 34px 70px -18px rgba(52,30,10,.42),0 12px 26px -12px rgba(16,24,40,.22),
             0 0 0 1px rgba(230,216,198,.9)}
.plq-off__ph img{border-radius:inherit}
/* a soft gold pool under the photo so it is not floating on nothing */
.plq-off__ph::after{content:"";position:absolute;left:8%;right:8%;bottom:-26px;height:52px;z-index:-1;
  border-radius:50%;filter:blur(26px);background:rgba(171,125,86,.42)}
.plq-off__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 44%;position:relative;z-index:1}
@media(max-width:1000px){.plq-off__ph{aspect-ratio:16/10}}

/* ============================================================ CLOSE */
/* The close sits on white so the card can be the dark note, mirroring the map
   teaser: navy ground with the gold coming across it, and the actions in white
   where the eye has to end up. */
.plq-fin{background:#fff;border-top:1px solid var(--line)}
.plq-fin__card{position:relative;overflow:hidden;border-radius:var(--r-panel);color:#fff;
  background:linear-gradient(152deg,#2A4E7D 0%,var(--navy) 40%,var(--navy-700) 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 34px 74px -22px rgba(0,26,48,.5),0 10px 24px -14px rgba(0,26,48,.34);
  padding:var(--s7);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:var(--s6);align-items:center}
.plq-fin__card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 96% at 92% -2%,rgba(203,152,104,.72),transparent 58%),
             radial-gradient(38% 62% at 104% 74%,rgba(171,125,86,.36),transparent 60%),
             radial-gradient(44% 56% at 2% 106%,rgba(255,255,255,.10),transparent 66%)}
.plq-fin__card>*{position:relative;z-index:1}
.plq-fin__t h2,.plq-fin__t p{color:#fff}
.plq-fin__t p{color:rgba(255,255,255,.78)}
.plq-fin__t .plq-eyebrow{color:var(--gold-soft)}
.plq-fin__note{color:rgba(255,255,255,.55)}
/* on the dark card the two buttons swap roles: white leads, outline follows */
.plq-fin__acts .plq-btn--pri{background:#fff;color:var(--navy)}
.plq-fin__acts .plq-btn--pri:hover{background:#fff;color:var(--navy-700);transform:translateY(-1px)}
.plq-fin__acts .plq-btn--sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.plq-fin__acts .plq-btn--sec:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}
@media(max-width:900px){.plq-fin__card{grid-template-columns:1fr;padding:var(--s5);gap:var(--s4)}}
.plq-fin__t{display:flex;flex-direction:column;gap:var(--s3)}
.plq-fin__t h2{font-size:38px;line-height:1.1;max-width:18ch}
@media(max-width:900px){.plq-fin__t h2{font-size:27px}}
.plq-fin__t p{font-size:17px;line-height:1.55;font-weight:500;color:rgba(255,255,255,.80);max-width:46ch}
.plq-fin__acts{display:flex;flex-direction:column;gap:10px}
.plq-fin__note{font-size:13px;font-weight:500;color:rgba(255,255,255,.62);text-align:center}

/* legal block: the RU audience wants to see who they are dealing with */
.plq-legal{margin-top:var(--s6);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);
  padding-top:var(--s5);border-top:1px solid var(--line-strong)}
@media(max-width:900px){.plq-legal{grid-template-columns:1fr 1fr;gap:var(--s3)}}
@media(max-width:520px){.plq-legal{grid-template-columns:1fr}}
.plq-legal div{display:flex;flex-direction:column;gap:4px}
.plq-legal dt{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.plq-legal dd{margin:0;font-size:14.5px;font-weight:600;color:var(--ink-mid);font-variant-numeric:tabular-nums;line-height:1.4}

.plq-ft{padding-block:var(--s4);border-top:1px solid var(--line)}
.plq-ft__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  font-size:14px;font-weight:500;color:var(--muted);line-height:1.5}
.plq-ft__ln{display:flex;align-items:center;gap:var(--s4)}
.plq-ft__ln a{color:var(--ink-mid);font-weight:600;transition:color var(--dur) var(--ease)}
.plq-ft__ln a:hover{color:var(--navy)}
/* one tidy column when the row no longer fits, rather than a ragged wrap */
@media(max-width:700px){
  .plq-ft__in{flex-direction:column;align-items:flex-start;gap:10px}
  .plq-ft__ln{gap:var(--s3)}
}

.plq-sticky{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line);transform:translateY(105%);transition:transform 320ms var(--ease)}
.plq-sticky.is-up{transform:translateY(0)}
/* Removed on the client's call: the same call to action already sits in the
   header on every breakpoint, and the bar was covering the contact widget. */
@media(max-width:900px){.plq-sticky{display:none}}

.plq-toast{max-width:min(92vw,460px);text-align:left;line-height:1.45;position:fixed;left:50%;bottom:26px;z-index:90;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  padding:13px 20px;border-radius:var(--r-pill);background:var(--ink-mid);color:#fff;font-size:14.5px;font-weight:600;
  box-shadow:0 12px 40px rgba(0,0,0,.28);transition:opacity 220ms var(--ease),transform 300ms var(--ease);
  max-width:calc(100vw - 32px);text-align:center}
.plq-toast.is-up{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.plq-toast{bottom:86px}}

/* ---- clipboard countdown --------------------------------------------------
   Telegram, LINE and MAX cannot receive a prefilled message, so the request is
   copied and the visitor has to paste it. A toast at the bottom edge lost that
   race — the messenger took the screen before the sentence was read. This is
   the same notice in the middle of the screen, with a ring that counts five
   seconds down, so the instruction always finishes first. */
/* The sheet is appended to <body>, not inside .plq — the page root carries
   overflow-x:clip, which turns position:fixed descendants into absolutely
   positioned ones. Being a sibling means none of the page tokens reach it, so
   the ones it needs are redeclared here. Same trap as the contact widget. */
.plq-cd{--cd-cream:#FAF6F0;--cd-line:#EFE4D8;--cd-navy:var(--navy);--cd-navy-700:#152B47;
  --cd-navy-50:#EEF2F7;--cd-gold:#AB7D56;--cd-ink:#212121;--cd-soft:#5A5A5A;--cd-faint:#9A9A9A;
  --cd-ease:cubic-bezier(.23,1,.32,1);--cd-pop:cubic-bezier(.32,1.28,.42,1);
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;
  background:rgba(8,20,34,.58);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity 200ms var(--cd-ease)}
.plq-cd.is-on{opacity:1;pointer-events:auto}
.plq-cd__box{width:min(100%,420px);border-radius:22px;padding:26px 24px 22px;text-align:center;
  background:linear-gradient(180deg,#fff 0%,var(--cd-cream) 100%);border:1px solid var(--cd-line);
  box-shadow:0 30px 80px rgba(8,20,34,.34);
  transform:scale(.9) translateY(12px);transition:transform 420ms var(--cd-pop)}
.plq-cd.is-on .plq-cd__box{transform:none}
.plq-cd__ic{width:46px;height:46px;margin:0 auto 14px;border-radius:999px;display:grid;place-items:center;
  background:var(--cd-navy-50);color:var(--cd-navy)}
.plq-cd__ic svg{width:22px;height:22px}
.plq-cd__t{margin:0 0 8px;font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--cd-ink)}
.plq-cd__b{margin:0 0 18px;font-size:14.5px;line-height:1.5;color:var(--cd-soft)}
.plq-cd__ring{position:relative;width:62px;height:62px;margin:0 auto 10px}
.plq-cd__ring svg{width:62px;height:62px;transform:rotate(-90deg)}
.plq-cd__trk{fill:none;stroke:var(--cd-line);stroke-width:3}
/* No transition here on purpose: the ring is driven frame by frame from JS,
   and a CSS transition on top of that fought the rAF updates. */
.plq-cd__arc{fill:none;stroke:var(--cd-gold);stroke-width:3;stroke-linecap:round}
.plq-cd__n{position:absolute;inset:0;display:grid;place-items:center;
  font-size:22px;font-weight:700;color:var(--cd-navy);font-variant-numeric:tabular-nums}
.plq-cd__c{margin:0 0 18px;font-size:13.5px;font-weight:600;color:var(--cd-soft)}
.plq-cd__row{display:flex;flex-direction:column;align-items:center;gap:10px}
/* .plq-btn is scoped to the page too, so the primary action is styled here
   rather than inherited. */
.plq-cd__go{display:inline-flex;align-items:center;justify-content:center;width:100%;
  min-height:50px;padding:0 22px;border:0;border-radius:999px;cursor:pointer;
  background:var(--cd-navy);color:#fff;font:600 15.5px/1 inherit;letter-spacing:-.01em;
  transition:background 200ms var(--cd-ease),transform 140ms var(--cd-ease)}
.plq-cd__go:hover{background:var(--cd-navy-700)}
.plq-cd__go:active{transform:scale(.97)}
.plq-cd__x{border:0;background:none;cursor:pointer;padding:6px 10px;
  font:500 14px/1 inherit;color:var(--cd-faint);transition:color 180ms var(--cd-ease)}
.plq-cd__x:hover{color:var(--cd-ink)}
@media(prefers-reduced-motion:reduce){
  .plq-cd,.plq-cd__box{transition-duration:1ms}
}

.plq-rv{opacity:0;transform:translateY(20px);transition:opacity 600ms var(--ease),transform 600ms var(--ease)}
.plq-rv.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .plq *,.plq *::before,.plq *::after{
    animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important}
  .plq-rv{opacity:1;transform:none}
  .plq-hero__photo{filter:none;opacity:1;transform:scale(1)}
}

/* FAQ — the legal groundwork, lifted from the main site so a visitor who has
   never bought abroad does not have to leave the page to find it. Deliberately
   the calm section: it sits between the navy objections block and the grey
   office block, so it stays white and quiet. Same accordion as the home page —
   40px ring, plus turning into a cross, navy when open. */
.plq-faq{padding-block:var(--sec);background:var(--bg)}
.plq-faq__in{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:var(--s7);align-items:start}
@media(max-width:900px){.plq-faq__in{grid-template-columns:1fr;gap:var(--s4)}}
.plq-faq h2{font-size:38px;line-height:1.1}
@media(max-width:900px){.plq-faq h2{font-size:28px}}
.plq-faq__lede{margin-top:var(--s2);font-size:17px;line-height:1.5;font-weight:500;color:var(--muted);max-width:40ch}
@media(max-width:900px){.plq-faq__lede{font-size:15.5px}}
.plq-faq__list{display:flex;flex-direction:column;gap:10px}

.plq-faq__item{border:1px solid var(--line-strong);border-radius:var(--r-card);background:var(--bg);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.plq-faq__item:hover{border-color:var(--navy)}
.plq-faq__item.is-open{background:var(--navy-50);border-color:var(--navy)}

.plq-faq__q{display:flex;align-items:center;gap:var(--s3);width:100%;
  padding:18px var(--s4);font-size:17px;font-weight:600;line-height:1.3;color:var(--ink-mid);
  transition:color var(--dur) var(--ease)}
@media(max-width:600px){.plq-faq__q{font-size:15.5px;padding:16px var(--s3)}}
.plq-faq__item.is-open .plq-faq__q{color:var(--navy)}
.plq-faq__qt{flex:1 1 auto;min-width:0}

/* The glyph is drawn, not a font icon: two bars, one rotates away. */
.plq-faq__ic{flex:0 0 auto;position:relative;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line-strong);background:var(--bg);
  transition:border-color 320ms var(--ease),background 320ms var(--ease),transform 320ms cubic-bezier(.32,.72,0,1)}
@media(max-width:600px){.plq-faq__ic{width:34px;height:34px}}
.plq-faq__ic::before,.plq-faq__ic::after{content:"";position:absolute;left:50%;top:50%;
  width:14px;height:2px;border-radius:2px;background:var(--ink-mid);
  transform:translate(-50%,-50%);transition:transform 320ms cubic-bezier(.32,.72,0,1),background 320ms var(--ease)}
.plq-faq__ic::after{transform:translate(-50%,-50%) rotate(90deg)}
.plq-faq__item.is-open .plq-faq__ic{border-color:var(--navy);background:var(--navy)}
.plq-faq__item.is-open .plq-faq__ic::before{background:#fff;transform:translate(-50%,-50%) rotate(45deg)}
.plq-faq__item.is-open .plq-faq__ic::after{background:#fff;transform:translate(-50%,-50%) rotate(135deg)}
.plq-faq__q:active .plq-faq__ic{transform:scale(.94)}

.plq-faq__a{height:0;overflow:hidden;transition:height 320ms cubic-bezier(.32,.72,0,1)}
.plq-faq__at{padding:0 var(--s4) 20px;font-size:16px;line-height:1.6;color:var(--muted);max-width:70ch}
@media(max-width:600px){.plq-faq__at{font-size:15px;padding:0 var(--s3) 18px}}
@media(prefers-reduced-motion:reduce){
  .plq-faq__a,.plq-faq__ic,.plq-faq__ic::before,.plq-faq__ic::after{transition-duration:1ms}
}