/* ============================================================
   Partner program page — /partners/ (VIV-7080)

   Loaded after /styles.css, which owns the tokens, .wrap, .section,
   .section-head, .eyebrow, .btn*, .hero-bg and the .sbx-input / .sbx-err form
   primitives this file builds on. Everything here is `pt-`-prefixed and
   page-scoped, following the src/convene.css convention.

   No new visual language: the card, form and success treatments are the same
   shapes /convene/ uses (white card on --light-cream, teal-tinted accent for
   the state that matters, --dark-blue reserved for final CTAs). No product
   screenshots and no partner logos exist for this page yet, so it ships with
   no <img> at all rather than an invented asset.
   ============================================================ */

/* ============================ HERO ============================ */
.pt-hero { position: relative; padding: 84px 0 72px; overflow: hidden; }
.pt-hero .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pt-hero .wrap { position: relative; z-index: 1; }
.pt-hero h1 {
  font-size: clamp(38px, 5.6vw, 62px);
  max-width: 22ch;
  margin: 20px 0 0;
}
.pt-hero .lead {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink-2);
  max-width: 62ch;
  margin: 22px 0 0;
  line-height: 1.55;
}
.pt-hero .hero-actions {
  margin-top: 30px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}

/* ============================ 1 — WHY PARTNER ============================ */
.pt-why-sec { background: var(--light-cream); }
.pt-why-sec.ruled::before { background: var(--line-strong); }
/* Two columns: the argument on the left, the "what you get" list on the right,
   so the four benefits read as a unit instead of a long single-column scroll. */
.pt-why { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.pt-why-lede h2 {
  font-size: clamp(28px, 3.2vw, 42px); max-width: 24ch; margin-top: 18px;
}
.pt-why-lede .lead {
  font-size: 17px; color: var(--ink-2); line-height: 1.6;
  margin: 18px 0 0; max-width: 54ch;
}
.pt-why-leadin {
  margin: 0;
  font-size: 16px; font-weight: 700; color: var(--ink);
}
.pt-benefits {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--line-strong);
}
.pt-benefits li {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px; color: var(--ink-2); line-height: 1.6;
}
/* --ink, not --brand: the palette has no AA-safe teal for body-size text
   (teal measures 2.17:1 on white), so emphasis is carried by weight and the
   rule above, never by colour. Same reasoning as src/convene.css. */
.pt-benefits li strong { color: var(--ink); font-weight: 700; }

/* ============================ 2 — THREE WAYS TO PARTNER ============================ */
/* minmax(0, 1fr), not a bare 1fr: a bare `1fr` track keeps its automatic
   minimum of min-content, so the track refuses to shrink below the widest
   card and blows the page out horizontally (VIV-7084 — +13px at 1440px,
   +71px at 375px). `min-width: 0` on .pt-card is the matching half — the grid
   ITEM's own `min-width: auto` is what the track's automatic minimum reads.

   Neither is the load-bearing fix on its own. Measured: with min-width:0
   alone the page reports scrollWidth === clientWidth at all three widths
   while the CTA's border box still visibly spills across the card border into
   the next column — the overflow just lands somewhere documentElement does
   not count. What actually resolves it is releasing `white-space: nowrap` on
   .pt-card-cta (see that rule). These two are the correct grid idiom kept as
   defence in depth for any future long unbreakable card content. */
.pt-cards {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
}
.pt-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 32px 30px 30px;
  min-width: 0;
  /* Flex column + margin-top:auto on the CTA aligns all three buttons on one
     line regardless of how long each card's body copy runs. */
  display: flex; flex-direction: column; align-items: flex-start;
}
.pt-card-k {
  display: block;
  font-size: 11.5px; font-weight: 700; color: var(--ink-2);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.pt-card h3 { font-size: 21px; margin-top: 12px; max-width: 24ch; }
.pt-card p {
  font-size: 15px; color: var(--ink-2); line-height: 1.6; margin: 14px 0 0;
}
.pt-best {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line);
  width: 100%;
  font-size: 14.5px;
}
.pt-best-k {
  display: block;
  font-size: 11px; font-weight: 700; color: var(--ink-3);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  margin-bottom: 6px;
}
/* THE fix for VIV-7084. The min-content dominator inside a card is this
   button, not the <h3> — measured, the h3's min-content is 84px while this
   button's is 346px, because `.btn` in styles.css is `white-space: nowrap`
   and "Apply as a Technology Partner" cannot break. A 1200px .wrap gives each
   of three tracks ~359px, i.e. ~297px of card content box, so the label had
   nowhere to go but past the card edge. Releasing nowrap here — page-scoped,
   so the hero and form buttons keep theirs — lets the label take two lines.
   text-align: left keeps the wrapped second line ranged left with the rest of
   the card; the ≤540px rule below re-centres it once the button goes
   full-width. */
.pt-card-cta { margin-top: 24px; white-space: normal; text-align: left; }
/* The three card CTAs are peers of each other, not of the hero's primary
   button, so they stay outlined (.btn-ghost) rather than teal-filled. */

/* ============================ 3 — PARTNER PROOF ============================
   Layout only. The section does not render at all until the `partnerProof`
   front-matter flag flips to true, so nothing here can put an empty heading or
   a placeholder logo strip on the page. */
.pt-proof {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 40px;
}
.pt-proof-logo { display: block; height: 34px; width: auto; opacity: .78; }

/* ============================ 4 — APPLICATION FORM ============================ */
.pt-form-sec { background: var(--light-cream); }
.pt-form-sec.ruled::before { background: var(--line-strong); }
.pt-form-card {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px;
  align-items: start;
}
.pt-form-intro h2 { font-size: clamp(26px, 2.7vw, 36px); margin-top: 16px; max-width: 16ch; }
.pt-form-intro p {
  font-size: 16.5px; color: var(--ink-2); line-height: 1.6; margin-top: 18px; max-width: 40ch;
}
/* The form column sits on white so the inputs read as a card against the
   section's --light-cream ground. */
.pt-form-col {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 34px 34px 30px;
}
#partner-form-el[hidden] { display: none; }
.pt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pt-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.pt-field label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.pt-opt { font-weight: 500; color: var(--ink-3); }
/* .sbx-input (styles.css) carries the border / focus ring / .is-invalid state;
   only the box model differs here, since this is a stacked form not an inline one. */
.pt-form-col .sbx-input { width: 100%; }
.pt-textarea {
  resize: vertical; min-height: 108px; line-height: 1.55;
  font-family: var(--font-body);
}
/* styles.css has no <select> rule, so .pt-select borrows .sbx-input's box and
   adds only what a select needs: the native chevron suppressed and replaced
   with an inline SVG (so it looks identical across browsers), plus room for it.
   The SVG is a data URI rather than a file — one fewer request, and it cannot
   go missing. */
.pt-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23707070' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
#partner-form-el .btn-brand { margin-top: 6px; }

.pt-success {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 28px 30px;
  background: var(--brand-tint); border: 1px solid var(--brand-tint-2);
  border-radius: var(--r-md);
}
.pt-success[hidden] { display: none; }
.pt-success-ic { color: var(--brand-strong); flex: none; line-height: 1; }
.pt-success-msg {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--heading-weight);
  font-size: 18px; line-height: 1.45; color: var(--ink);
}

.pt-form-foot {
  margin: 22px 0 0; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-3); line-height: 1.6;
}
.pt-form-foot a { color: var(--ink-2); text-decoration: underline; }
.pt-form-foot a:hover { color: var(--ink); }

/* ============================ 5 — FAQ ============================
   Native <details>/<summary>: no JS, real disclosure semantics, and the
   answer height is not capped by a max-height transition the way
   src/book-demo.css's .faq-a is (a long answer there silently clips). */
.pt-faq { margin-top: 40px; border-top: 1px solid var(--line-strong); }
.pt-faq-item { border-bottom: 1px solid var(--line); }
.pt-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px;
  cursor: pointer;
  font-family: var(--font-display); font-weight: var(--heading-weight);
  font-size: 17.5px; line-height: 1.35; color: var(--ink);
  list-style: none;
}
/* Hide the native disclosure triangle in both engines; .pt-faq-ic replaces it. */
.pt-faq-q::-webkit-details-marker { display: none; }
.pt-faq-q::marker { content: ""; }
.pt-faq-q:hover { color: var(--brand-strong); }
.pt-faq-q:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
/* Plus sign that becomes a minus when the item is open, built from the two
   pseudo-elements so no second SVG is needed. */
.pt-faq-ic { position: relative; width: 16px; height: 16px; flex: none; }
.pt-faq-ic::before, .pt-faq-ic::after {
  content: ""; position: absolute; background: var(--ink-3);
  transition: transform .24s var(--ease), opacity .24s var(--ease);
}
.pt-faq-ic::before { top: 7px; left: 0; width: 16px; height: 2px; }
.pt-faq-ic::after { left: 7px; top: 0; width: 2px; height: 16px; }
.pt-faq-item[open] .pt-faq-ic::after { transform: rotate(90deg); opacity: 0; }
.pt-faq-a { padding: 0 4px 24px; }
.pt-faq-a p {
  margin: 0;
  font-size: 15.5px; color: var(--ink-2); line-height: 1.65; max-width: 76ch;
}

/* ============================ RESPONSIVE ============================
   Breakpoints measured (documentElement.scrollWidth === clientWidth) at
   1440 / 768 / 375 — VIV-7084. Collapsing a grid to a single column is NOT
   by itself enough: a `1fr` track still carries a min-content floor, which is
   what overflowed /partners/ at 375px. Single-column grids below therefore
   use minmax(0, 1fr) too. */
@media (max-width: 1000px) {
  .pt-why { grid-template-columns: 1fr; gap: 40px; }
  .pt-cards { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pt-form-card { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 720px) {
  .pt-hero { padding: 56px 0 48px; }
  .pt-card { padding: 26px 24px 26px; }
  .pt-form-col { padding: 26px 22px 22px; }
  .pt-row { grid-template-columns: 1fr; gap: 0; }
  .pt-success { padding: 22px 22px; }
  .pt-faq-q { font-size: 16.5px; padding: 20px 2px; }
}

@media (max-width: 540px) {
  .pt-hero .hero-actions { align-items: stretch; }
  .pt-hero .hero-actions .btn-brand { width: 100%; justify-content: center; }
  .pt-card-cta { width: 100%; justify-content: center; }
  #partner-form-el .btn-brand { width: 100%; justify-content: center; }
}