/* ---------------------------------------------------------------------------
   partner-a1f3.css — shared styling for the three partner-facing pages:
   /properties/register, /properties/broker/login, /properties/call-list.

   Built on the module's existing tokens rather than a new palette: --orange
   #F5A623 and the three helvetica weights are the client's live brand and he
   polices black/amber/white. What is added here is a warm-biased neutral set,
   because a pure grey next to amber reads as unconsidered.

   ⚠️ .htaccess serves CSS immutable for a year. The hash in the filename is
   not decoration — ANY edit to this file must rename it and update the three
   <link> tags, or Safari keeps the old copy for twelve months.
--------------------------------------------------------------------------- */

:root{
  --pk-ink:#0E0E10;
  --pk-ink-2:#1A1A1D;
  --pk-amber:#F5A623;
  --pk-lift:#FFC95C;
  --pk-sand:#FFF8EE;
  --pk-line:#EDE5D8;
  --pk-body:#4B473F;
  --pk-mute:#726C63;
  --pk-white:#fff;
  --pk-link:#8A5D12;
}

.pk{
  --step-0:13px; --step-1:15.5px; --step-2:17px;
  --step-3:21px; --step-4:clamp(27px,3.4vw,36px); --step-5:clamp(31px,4.6vw,50px);
  background:var(--pk-sand);
  color:var(--pk-ink);
  font-family:'helvetica-light','Helvetica Neue',Helvetica,Arial,sans-serif;
}
.pk *{box-sizing:border-box}
.pk-in{max-width:1080px;margin:0 auto;padding:0 22px}
.pk-med{font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif}

/* ---------- thesis band ------------------------------------------------- */
.pk-hero{
  background:var(--pk-ink);color:#fff;position:relative;overflow:hidden;
  padding:64px 0 74px;
}
.pk-hero::before{
  content:"";position:absolute;inset:auto -10% -62% 40%;height:120%;
  background:radial-gradient(closest-side,rgba(245,166,35,.30),transparent 72%);
  pointer-events:none;
}
/* a single lit horizon under the band — the one flourish, kept quiet */
.pk-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--pk-amber) 22%,var(--pk-lift) 50%,var(--pk-amber) 78%,transparent);
  opacity:.85;
}
.pk-hero > *{position:relative}

.pk-eyebrow{
  font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:12px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--pk-amber);margin:0 0 16px;
}
.pk-hero h1{
  font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:var(--step-5);line-height:1.06;letter-spacing:-.028em;
  margin:0 0 16px;text-wrap:balance;max-width:19ch;color:#fff;
}
.pk-hero h1 em{font-style:normal;color:var(--pk-amber)}
.pk-lede{color:#C9C3B8;font-size:var(--step-2);line-height:1.6;margin:0;max-width:58ch}

/* Sign-in variant: the form sits INSIDE the band, so an existing partner sees
   the password field without scrolling while a prospect still gets the pitch
   beside it. A full-width hero pushed the field to 884px on an 800px screen. */
.pk-hero--split .pk-in{display:grid;grid-template-columns:1fr 372px;gap:44px;align-items:start}
.pk-hero--split h1{font-size:var(--step-4);max-width:16ch}
.pk-hero--split .pk-lede{font-size:var(--step-1)}
.pk-hero--split .pk-card{margin-top:4px}
@media(max-width:920px){
  .pk-hero--split .pk-in{grid-template-columns:1fr;gap:28px}
  .pk-hero--split .pk-card{order:-1}
}

.pk-proof{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.pk-proof span{
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  border-radius:999px;padding:8px 15px;font-size:13.5px;color:#EDE9E2;
}

/* ---------- the four ways ------------------------------------------------
   Deliberately NOT numbered. These are alternatives you choose between, not
   steps you work through, and numbering them would assert an order that does
   not exist. The register page's actual sequence keeps its numbers.        */
.pk-ways{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:30px}
.pk-way{
  display:flex;flex-direction:column;gap:8px;
  border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055);
  border-radius:15px;padding:18px 17px 17px;text-decoration:none;color:#fff;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.pk-way:hover,.pk-way:focus-visible{
  background:rgba(245,166,35,.11);border-color:var(--pk-amber);transform:translateY(-2px);
}
.pk-way svg{width:21px;height:21px;fill:none;stroke:var(--pk-amber);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pk-way b{font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:14.5px;letter-spacing:-.005em}
.pk-way span{color:#A9A399;font-size:12.5px;line-height:1.45}

/* Same tiles on the sand ground rather than the ink band. Kept as a modifier
   so the two never fight over specificity. */
.pk-ways--light .pk-way{
  background:var(--pk-white);border-color:var(--pk-line);color:var(--pk-ink);
  box-shadow:0 12px 30px -26px rgba(60,42,10,.5);
}
.pk-ways--light .pk-way:hover,
.pk-ways--light .pk-way:focus-visible{background:#FFFDF8;border-color:var(--pk-amber)}
.pk-ways--light .pk-way svg{stroke:#B1770F}
.pk-ways--light .pk-way span{color:var(--pk-body)}

/* ---------- body ---------------------------------------------------------- */
.pk-body{padding:52px 0 78px}
.pk-grid{display:grid;grid-template-columns:1fr 380px;gap:38px;align-items:start}
.pk-grid--wide{grid-template-columns:1fr}

.pk-card{
  background:var(--pk-white);border:1px solid var(--pk-line);border-radius:18px;
  padding:30px 30px 28px;box-shadow:0 18px 44px -30px rgba(60,42,10,.35);
  /* A card is self-contained. Dropped into .pk-hero (which sets color:#fff for
     the dark band) it would otherwise inherit white text onto its own white
     background — which is exactly how the h2 on sign-in and register went
     invisible. Anything added to a card from now on inherits ink, not the band. */
  color:var(--pk-ink);
}
.pk-card h2{
  font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:var(--step-3);margin:0 0 6px;letter-spacing:-.018em;
}
.pk-card .pk-note{color:var(--pk-body);font-size:14.5px;margin:0 0 22px;line-height:1.55}

.pk-f{display:flex;flex-direction:column;margin-bottom:16px}
.pk-f--2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.pk-f label,.pk-lab{
  font-size:var(--step-0);color:var(--pk-body);margin-bottom:7px;
  font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;
}
.pk-req{color:#C0392B}
.pk-hint{color:var(--pk-mute);font-size:12.5px;font-family:'helvetica-light','Helvetica Neue',Helvetica,Arial,sans-serif}
.pk input,.pk select,.pk textarea{
  width:100%;border:1px solid var(--pk-line);border-radius:11px;
  padding:12px 14px;font-size:var(--step-1);font-family:inherit;
  background:var(--pk-white);color:var(--pk-ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.pk input:hover,.pk select:hover,.pk textarea:hover{border-color:#DCD1BE}
.pk input:focus,.pk select:focus,.pk textarea:focus{
  outline:none;border-color:var(--pk-amber);box-shadow:0 0 0 3px rgba(245,166,35,.2);
}
.pk textarea{min-height:96px;resize:vertical}
.pk-err{color:#C0392B;font-size:12.5px;margin-top:6px}
.pk-has-err input,.pk-has-err select,.pk-has-err textarea{border-color:#C0392B}

.pk-btn{
  display:inline-block;border:0;cursor:pointer;text-decoration:none;text-align:center;
  background:var(--pk-amber);color:var(--pk-ink);border-radius:999px;
  padding:14px 30px;font-size:var(--step-1);
  font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;
  transition:background .16s ease,transform .16s ease;
}
.pk-btn:hover{background:var(--pk-lift);transform:translateY(-1px)}
.pk-btn--block{display:block;width:100%}
.pk-btn--quiet{background:transparent;color:var(--pk-ink);border:1px solid var(--pk-line)}
.pk-btn--quiet:hover{background:var(--pk-white);border-color:var(--pk-ink)}
.pk-btn:focus-visible,.pk-way:focus-visible,.pk a:focus-visible{
  outline:2px solid var(--pk-amber);outline-offset:3px;
}

.pk-alert{border-radius:12px;padding:13px 16px;font-size:14px;margin-bottom:20px}
.pk-alert--bad{background:#FDECEA;border:1px solid #F3C4BE;color:#8F2D24}
.pk-alert--ok{background:#EEF8F1;border:1px solid #CBE6D5;color:#15683C}

/* side rail */
.pk-rail{display:flex;flex-direction:column;gap:14px}
.pk-rail-card{
  background:var(--pk-white);border:1px solid var(--pk-line);border-radius:16px;padding:22px 22px 20px;
}
.pk-rail-card h3{
  font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:15.5px;margin:0 0 12px;letter-spacing:-.01em;
}
.pk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.pk-list li{display:flex;gap:11px;font-size:14px;color:var(--pk-body);line-height:1.45}
.pk-list li::before{
  content:"";flex:0 0 auto;width:7px;height:7px;margin-top:6px;border-radius:50%;
  background:var(--pk-amber);
}

/* the genuine sequence — these ARE ordered, so they are numbered */
.pk-seq{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 30px;counter-reset:pk}
.pk-seq div{
  background:var(--pk-white);border:1px solid var(--pk-line);border-radius:14px;
  padding:16px 17px;counter-increment:pk;
}
.pk-seq div::before{
  content:counter(pk);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--pk-amber);color:var(--pk-ink);font-size:12.5px;margin-bottom:10px;
  font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;
}
.pk-seq b{display:block;font-size:14px;margin-bottom:3px;
  font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif}
.pk-seq span{font-size:13px;color:var(--pk-body);line-height:1.45}

.pk-foot{text-align:center;margin-top:20px;font-size:14px;color:var(--pk-mute)}
.pk-foot a{color:var(--pk-link)}

.pk-done{
  background:var(--pk-white);border:1px solid var(--pk-line);border-left:4px solid var(--pk-amber);
  border-radius:16px;padding:38px 34px;
}
.pk-done h2{font-family:'helvetica-medium','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:var(--step-4);margin:0 0 10px;letter-spacing:-.02em}
.pk-done p{color:var(--pk-body);font-size:var(--step-2);line-height:1.6;margin:0 0 12px;max-width:60ch}
.pk-done strong{color:var(--pk-ink)}

@media (prefers-reduced-motion: reduce){
  .pk-way,.pk-btn{transition:none}
  .pk-way:hover,.pk-btn:hover{transform:none}
}
@media(max-width:920px){
  .pk-grid{grid-template-columns:1fr}
  .pk-ways{grid-template-columns:1fr 1fr}
  .pk-seq{grid-template-columns:1fr 1fr}
  /* Sign-in only: most people opening a SIGN IN page are existing partners who
     came to sign in, so the form jumps above the supporting rail once the two
     columns stack. Prospects still get the pitch — it is in the band above and
     directly under the form. */
  .pk-grid--form-first > aside{order:2}
  .pk-grid--form-first > div{order:1}
}
@media(max-width:600px){
  .pk-hero{padding:46px 0 54px}
  .pk-ways{grid-template-columns:1fr}
  .pk-f--2{grid-template-columns:1fr}
  .pk-card{padding:24px 22px}
  .pk-body{padding:36px 0 60px}
}


/* ---------- folded in from per-page <style> blocks ------------------------- */

/* Rail laid out across the full width, for pages where the form moved into the
   hero and the rail dropped below it rather than sitting in a 380px column. */
.pk-rail--row{flex-direction:row;gap:18px}
.pk-rail--row > .pk-rail-card{flex:1 1 0;min-width:0}
@media(max-width:900px){.pk-rail--row{flex-direction:column}}

/* --step-1 computes to about 15.5px on a phone, and iOS zooms the whole page
   whenever a focused field is under 16px. These are forms people fill in
   one-handed, so that zoom costs more than the half pixel. */
@media(max-width:640px){
  .pk input,.pk select,.pk textarea{font-size:16px}
}