/* ── /partnerships ─────────────────────────────────────────────────────────
   Written for the person reading it: someone who wants to sell to our members
   and has three questions (will you promote me, will you come to my place,
   will you partner with me). The first screen answers all three, each answer
   linking down to the why, so nobody has to read the whole page to get it.

   Everything else follows three rules:
   - One line down the middle of the page. No numbers, no labels, no dividers
     and no colour bands, so it reads as one piece, not a stack of sections.
   - Short text, said once. The one line in a part that matters most is said
     a little bigger; nothing else is.
   - A thing is shown the way it exists: the asks we get look like messages,
     the price looks like a price, the "no" list looks like a list.
   The site's own colours and type (main.css .activity), nothing new.

   assets/js/partnerships.js adds two touches: a thin bar under the nav that
   fills as you read, and things arriving as they scroll in. Without it, or with
   reduced motion asked for, everything is simply there. */

.pt-page { background: var(--white); padding: calc(var(--nh) + 40px) 0 112px; }
.pt-page .ah-crumb { color: var(--muted); }
.pt-page .ah-crumb a { color: var(--muted); }
.pt-page .ah-crumb a:hover { color: var(--dark); }
.pt-page .ah-crumb-sep { color: var(--line); }

/* A part: centred, with room around it but not a screen of it. */
.pt-part { text-align: center; padding-top: 96px; }
.pt-part > * { margin-left: auto; margin-right: auto; }
.pt-part[id] { scroll-margin-top: calc(var(--nav-h, 68px) - 48px); }
.pt-hero { padding-top: 56px; }

.pt-h1 { max-width: 1120px; text-wrap: balance; font-family: var(--fh); font-weight: 800; color: var(--dark);
  font-size: clamp(38px, 5.4vw, 74px); line-height: 1.04; letter-spacing: -.04em; }
.pt-h1 em, .pt-h2 em { display: block; font-style: italic; color: var(--golddim); }
.pt-h2 { max-width: 900px; text-wrap: balance; font-family: var(--fh); font-weight: 800; color: var(--dark);
  font-size: clamp(30px, 3.6vw, 50px); line-height: 1.1; letter-spacing: -.035em; }

.pt-sub { max-width: 680px; margin-top: 22px; font-size: 19px; line-height: 1.7; color: #4A4B60; }
.pt-sub a, .pt-two-q a { color: var(--dark); border-bottom: 2px solid rgba(20,199,176,.55); }
.pt-sub a:hover, .pt-two-q a:hover { color: var(--golddim); }
.pt-short { max-width: 720px; margin-top: 18px; font-size: 19px; line-height: 1.7; color: var(--dark); }
.pt-short strong { color: var(--golddim); }

/* The one line in a part that matters most. */
.pt-say { max-width: 820px; text-wrap: balance; margin-top: 40px; font-family: var(--fh); font-weight: 800; color: var(--dark);
  font-size: clamp(23px, 2.5vw, 34px); line-height: 1.22; letter-spacing: -.025em; }
.pt-say em { font-style: italic; color: var(--golddim); }
.pt-say--sm { font-size: clamp(20px, 2vw, 27px); }
.pt-say + .pt-sub { margin-top: 18px; }
.pt-note { max-width: 640px; margin-top: 26px; font-size: 17px; line-height: 1.65; font-style: italic;
  color: #4A4B60; }

/* The three answers, up top. */
.pt-answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  max-width: 1040px; margin-top: 52px; text-align: left; }
.pt-answer { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 22px; border-radius: 18px;
  background: var(--offwhite); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.pt-answer:hover { border-color: rgba(20,199,176,.6); transform: translateY(-2px); }
.pt-answer-q { font-size: 14.5px; font-weight: 600; color: var(--muted); }
.pt-answer-a { font-family: var(--fh); font-weight: 800; font-size: 21px; line-height: 1.3; color: var(--dark);
  letter-spacing: -.015em; }
.pt-answer-why { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 700; color: var(--golddim); }

/* Intention and values. */
.pt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 980px; margin-top: 40px;
  text-align: left; }
.pt-two-card { padding: 28px; border-radius: 18px; background: var(--offwhite); border: 1px solid var(--line); }
.pt-two-k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--golddim); }
.pt-two-q { margin: 8px 0 12px; font-family: var(--fh); font-weight: 800; color: var(--dark);
  font-size: clamp(21px, 2vw, 25px); line-height: 1.25; letter-spacing: -.02em; }
.pt-two-t { font-size: 16.5px; line-height: 1.7; color: #4A4B60; }

/* The inbox: one thread after another, theirs on the left, ours on the right. */
.pt-inbox { display: grid; gap: 34px; max-width: 860px; margin-top: 44px; padding: clamp(20px, 3.4vw, 40px);
  border-radius: 28px; background: var(--offwhite); border: 1px solid var(--line); text-align: left; }
.pt-thread { display: flow-root; }
.pt-from { margin: 0 0 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); }
.pt-bubble { width: fit-content; max-width: 78%; padding: 13px 18px; border-radius: 20px;
  font-size: 16px; line-height: 1.6; }
.pt-bubble--them { background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 6px;
  font-family: var(--fh); font-weight: 700; color: var(--dark); }
.pt-bubble--us { margin: 10px 0 0 auto; max-width: 84%; background: var(--dark); color: rgba(255,255,255,.9);
  border-bottom-right-radius: 6px; }

/* What we don't do. */
.pt-nos { list-style: none; padding: 0; max-width: 900px; margin-top: 32px; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 10px; }
.pt-nos li { display: inline-flex; gap: 10px; align-items: flex-start; padding: 12px 18px 12px 14px;
  border-radius: 16px; background: var(--offwhite); border: 1px solid var(--line); text-align: left;
  font-family: var(--fh); font-weight: 700; font-size: 16px; line-height: 1.45; color: var(--dark); }
.pt-nos li::before { content: "\00D7"; flex: none; display: inline-flex; align-items: center;
  justify-content: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--dark); color: var(--white); font-size: 15px; line-height: 1; }

/* The price, and why. */
.pt-price { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px 52px;
  align-items: center; max-width: 980px; margin-top: 40px; padding: clamp(28px, 4vw, 48px);
  border-radius: 24px; background: var(--dark); text-align: left; }
.pt-price-lead { font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,.78); }
.pt-price-n { margin-top: 8px; font-family: var(--fh); font-weight: 800; color: var(--gold); line-height: 1;
  font-size: clamp(54px, 6.4vw, 86px); letter-spacing: -.045em; }
.pt-price-why { list-style: none; counter-reset: why; padding: 0; display: grid; gap: 18px; }
.pt-price-why li { counter-increment: why; display: grid; grid-template-columns: 30px 1fr; gap: 14px;
  font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,.86); }
.pt-price-why li::before { content: counter(why); display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: var(--dark);
  font-weight: 800; font-size: 14px; }

/* The three ways of asking: the first two step back, the third stays lit. */
.pt-compare { margin-top: 40px; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.pt-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1040px;
  margin-top: 16px; text-align: left; }
.pt-quote { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  padding: 26px; border-radius: 18px; border: 1px solid var(--line); background: var(--offwhite);
  transition: opacity .7s ease .5s, transform .7s ease .5s; }
.pt-quote-t { font-family: var(--fh); font-weight: 700; font-size: 18px; line-height: 1.45; color: var(--dark); }
.pt-quote-tag { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); }
.pt-quote--us { background: var(--dark); border-color: var(--dark); }
.pt-quote--us .pt-quote-t { color: var(--white); }
.pt-quote--us .pt-quote-tag { color: var(--gold); }
.pt-quote--me { opacity: .5; }

/* The end. */
.pt-end { margin-top: 120px; padding: clamp(44px, 6vw, 76px) 24px; border-radius: 28px;
  background: var(--dark); text-align: center; }
.pt-end > * { margin-left: auto; margin-right: auto; }
.pt-end .pt-h2 { color: var(--white); }
.pt-end > p:not(.pt-sign) { max-width: 620px; margin-top: 18px; margin-bottom: 30px; font-size: 18px;
  line-height: 1.7; color: rgba(255,255,255,.78); }
.pt-end .pt-sign { margin-top: 36px; font-family: var(--fh); font-weight: 800; font-style: italic;
  font-size: 28px; line-height: 1.2; color: var(--white); letter-spacing: -.02em; }
.pt-sign span { display: block; margin-top: 6px; font-style: normal; font-weight: 500; font-size: 13px;
  letter-spacing: .04em; color: rgba(255,255,255,.55); }

/* How far through you are. */
.pt-progress { display: none; position: fixed; left: 0; right: 0; top: var(--nav-h, 68px); height: 3px;
  z-index: 999; pointer-events: none; }
.pt-read .pt-progress { display: block; }
.pt-progress span { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%;
  transform: scaleX(0); }

/* Arriving as they scroll in, only once the script is running (.pt-js). The
   transition sits on the arrived state only, so hiding them at the start is
   instant and only the arriving is animated. */
.pt-js [data-reveal] { opacity: 0; transform: translateY(18px); }
.pt-js [data-reveal].is-in { opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.pt-js .pt-quotes .pt-quote--me { opacity: 1; }
.pt-js .pt-quotes.is-in .pt-quote--me { opacity: .45; transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .pt-quote, .pt-answer { transition: none; }
}

/* On a phone, centred paragraphs are hard to read, so everything lines up on
   the left and the grids become one column. */
@media (max-width: 900px) {
  .pt-page { padding: calc(var(--nh) + 28px) 0 72px; }
  .pt-part { text-align: left; padding-top: 72px; }
  .pt-hero { padding-top: 36px; }
  .pt-part > * { margin-left: 0; margin-right: 0; }
  .pt-sub, .pt-short { font-size: 17px; }
  .pt-answers, .pt-two, .pt-price, .pt-quotes { grid-template-columns: minmax(0, 1fr); }
  .pt-answers { margin-top: 36px; gap: 12px; }
  .pt-answer { padding: 18px 20px; }
  .pt-answer-a { font-size: 19px; }
  .pt-inbox { gap: 28px; padding: 16px; border-radius: 22px; }
  .pt-bubble { max-width: 100%; padding: 12px 15px; }
  .pt-bubble--us { max-width: calc(100% - 14px); }
  .pt-nos { justify-content: flex-start; }
  .pt-end { margin-top: 88px; text-align: left; padding: 36px 24px; }
  .pt-end > * { margin-left: 0; margin-right: 0; }
}