/* The partner page.
   Same ink, same paper, same two faces as everywhere else. The one structural
   decision that is its own: the three ways in are numbered, because they are a
   real progression from least committed to most, and the number tells you that
   before you read a word. ⛔ Numbering anything on this site that is not a
   sequence is decoration wearing information's coat. */

.pt{
  background:var(--ink);color:var(--white);
  --rail:1080px;
  --gap:clamp(58px,7vw,104px);
}
.pt section{
  padding-inline:var(--pad);
  max-width:calc(var(--rail) + var(--pad) * 2);
  margin-inline:auto;
}
.pt h1,.pt h2,.pt h3{font-family:var(--face);letter-spacing:-.022em;}

.pt__hero{padding-top:clamp(130px,17vh,190px);padding-bottom:var(--gap);}
.pt__eyebrow{
  font:500 11px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.38);margin-bottom:clamp(16px,2vw,22px);
}
.pt__hero h1{
  font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.06;font-weight:600;margin:0;
}
.pt__lede{
  font-family:var(--ui);font-size:clamp(15.5px,1.35vw,18px);line-height:1.55;
  color:var(--soft);max-width:52ch;margin:clamp(18px,2.2vw,26px) 0 0;
}

/* two cards, them and you */
.pt__why{
  padding-block:var(--gap);border-top:1px solid var(--hair);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3.4vw,54px);
}
.pt__card h2{
  font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.2;font-weight:600;margin:0 0 12px;
}
.pt__card p{font:400 15px/1.65 var(--ui);color:var(--faint);}

/* the three ways in */
.pt__how{padding-block:var(--gap);border-top:1px solid var(--hair);}
.pt__how h2{
  font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.14;font-weight:600;
  margin:0 0 clamp(32px,4vw,52px);max-width:24ch;
}
.pt__ways{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,3.4vw,52px);
}
.pt__n{
  display:block;font:500 11px/1 var(--ui);letter-spacing:.16em;
  color:var(--signal);margin-bottom:14px;
}
.pt__ways h3{
  font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.25;font-weight:600;margin:0 0 10px;
}
.pt__ways p{font:400 14.5px/1.62 var(--ui);color:var(--faint);}

/* what it involves */
.pt__work{padding-block:var(--gap);border-top:1px solid var(--hair);}
.pt__work h2{
  font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.14;font-weight:600;
  margin:0 0 clamp(28px,3.4vw,44px);
}
.pt__spec{list-style:none;margin:0;padding:0;display:grid;}
.pt__spec li{
  display:grid;grid-template-columns:minmax(150px,230px) 1fr;
  gap:clamp(16px,2.4vw,40px);padding:18px 0;
  border-bottom:1px solid var(--hair);align-items:baseline;
}
.pt__spec li:first-child{border-top:1px solid var(--hair);}
.pt__spec strong{font:500 14.5px/1.4 var(--face);letter-spacing:-.01em;color:var(--white);}
.pt__spec span{font:400 14.5px/1.6 var(--ui);color:var(--faint);}
.pt__note{
  font:400 13.5px/1.6 var(--ui);color:rgba(255,255,255,.42);
  max-width:60ch;margin-top:clamp(20px,2.6vw,30px);
}

/* commercials, deliberately without a rate card */
.pt__terms{padding-block:var(--gap);border-top:1px solid var(--hair);}
.pt__terms h2{
  font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.14;font-weight:600;margin:0 0 22px;
}
.pt__terms p{font:400 15.5px/1.65 var(--ui);color:var(--soft);max-width:58ch;}

.pt__talk{padding-block:var(--gap);border-top:1px solid var(--hair);}
.pt__talk h2{
  font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.14;font-weight:600;margin:0 0 18px;
}
.pt__talk p{font:400 15.5px/1.65 var(--ui);color:var(--soft);max-width:56ch;margin-bottom:30px;}
.pt__btn{
  display:inline-block;padding:14px 32px;border-radius:999px;
  background:var(--white);color:var(--ink);
  font:500 15px/1 var(--ui);text-decoration:none;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .28s;
}
.pt__btn:hover{opacity:.9;transform:translateY(-1px);}

/* ⛔ Verified at 390. Every grid to one column, and the spec rows stop being
   two columns or the labels squeeze to two words a line. */
@media (max-width:860px){
  .pt__why,.pt__ways{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .pt__spec li{grid-template-columns:1fr;gap:6px;}
}

/* ⛔ ansard.css gives every h2 max-width:19ch and margin:0 auto, so any
   heading narrower than its column silently centres itself. On a left-aligned
   page that shows up as a heading sat a few pixels in from the text under it,
   which reads as a mistake rather than a choice. Every heading on this page is
   left, so every one of them says so. */
/* ⛔ ansard.css sets h2 to max-width:19ch, margin:0 auto AND text-align:center,
   because on the homepage headings are centred. Every one of those three has
   to be undone here or a left-aligned page ends up with centred headings
   floating above left-aligned text. */
.pt h2,.pt h3{margin-inline:0;max-width:none;text-align:left;}
.pt__how h2{max-width:24ch;}
.pt__hero h1{margin-inline:0;max-width:none;}

/* What each route pays, said on the card rather than buried in a table. */
.pt__pays{
  font-family:var(--face);font-weight:600;font-size:14.5px;line-height:1.35;
  letter-spacing:-.012em;color:var(--signal);
  margin:0 0 12px;padding-bottom:12px;
  border-bottom:1px solid rgba(159,255,0,.22);
}
.pt__small{
  font:400 13px/1.6 var(--ui);color:rgba(255,255,255,.38);margin-top:10px;
}

/* ── for platforms ────────────────────────────────────────────────────────
   Its own section with its own ground, because it is addressed to a different
   reader than the rest of the page: not a business buying a phone service, a
   company deciding whether to put their name on one. */
.pt__plat{
  padding-block:var(--gap);border-top:1px solid var(--hair);
}
.pt__plat h2{
  font-size:clamp(1.45rem,2.7vw,2.15rem);line-height:1.14;font-weight:600;
  margin:0 0 clamp(32px,4vw,52px);max-width:26ch;
}
.pt__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,3.4vw,46px);
}
.pt__grid h3{
  font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.25;font-weight:600;margin:0 0 10px;
}
.pt__grid p{font:400 14.5px/1.62 var(--ui);color:var(--faint);}

.pt__who{
  margin-top:clamp(40px,5vw,68px);padding-top:clamp(30px,3.6vw,44px);
  border-top:1px solid var(--hair);
}
.pt__who h3{
  font-size:clamp(1rem,1.4vw,1.18rem);font-weight:600;margin:0 0 22px;
}
.pt__who ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px clamp(24px,4vw,60px);
}
.pt__who li{
  display:grid;gap:3px;padding:14px 0;border-top:1px solid var(--hair);
}
.pt__who b{font:500 14.5px/1.35 var(--face);letter-spacing:-.01em;color:var(--white);}
.pt__who span{font:400 13.5px/1.5 var(--ui);color:var(--faint);}

@media (max-width:860px){
  .pt__grid,.pt__who ul{grid-template-columns:1fr;}
}