/* ─────────────────────────────────────────────────────────────────────
   partner-page.css
   Typographic layer for the /partners/embrava-and-* sub-pages.

   WHY THIS FILE EXISTS
   The partner sub-pages load only site.css + partners.css, but their
   markup uses .pt-h1, .pt-lede, .breadcrumb, .hero-ctas and .about-copy —
   none of which either sheet defines. Those five classes have been
   inert on all 28 live partner pages, so:

     - the <h1> falls back to the UA default (2em = 30px) while the
       section <h2>s below it render at 51px, inverting the hierarchy;
     - the hero lede sits at body 15px across the full 1184px hero,
       a measure of roughly 164 characters;
     - .about-copy paragraphs get no margin, so consecutive <p>s butt
       together into one undifferentiated block.

   Load it after partners.css. It defines the missing classes and adds
   a scale + measure token set the page styles can build on. Nothing
   here overrides an existing partners.css rule.
   ───────────────────────────────────────────────────────────────────── */

:root{
  /* ── Scale ──────────────────────────────────────────────────────────
     The steps below are the sizes already in use across the site,
     ordered into a single ramp. Only two are new: --t-h1 (64px, to put
     the page title back above the 51px --t-h2) and --t-lede. Both sit
     inside the vocabulary index.css already uses at the display end
     (clamp(48px,5vw,64px), clamp(29px,5.6vw,67px)).                    */
  --t-kicker: 11px;   /* uppercase, .18em, 700                          */
  --t-micro:  12px;
  --t-fine:   13px;
  --t-small:  14px;
  --t-body:   15px;   /* body base, matches site.css                    */
  --t-body-lg:16px;
  --t-h4:     17px;
  --t-h3:     20px;
  --t-lede:   clamp(16px, 1.45vw, 19px);
  --t-h2:     clamp(22px, 4.25vw, 51px);
  --t-h1:     clamp(32px, 6.2vw, 64px);

  /* ── Measure ────────────────────────────────────────────────────────
     Bringhurst puts a comfortable single-column measure at 45–75
     characters and calls 66 the ideal. ch units track the font, so
     these hold at every step of the ramp above.                        */
  --measure:       66ch;  /* running body copy                          */
  --measure-lede:  58ch;  /* larger type, so fewer characters           */
  --measure-tight: 46ch;  /* card copy, captions, side notes            */

  /* ── Leading ────────────────────────────────────────────────────────
     Leading rises as measure lengthens and falls as size grows.        */
  --lh-display: 1.05;
  --lh-title:   1.15;
  --lh-lede:    1.5;
  --lh-body:    1.65;

  /* ── Partner accent ─────────────────────────────────────────────────
     Sampled from the supplied logo. Used only to mark the partner's own
     column, tag or track, never for buttons, links or Embrava surfaces. */
  --partner:      #0FB4CA;
  --partner-ink:  #0A8296;
  --partner-soft: #E6F7FA;
}

/* ── The five missing classes ─────────────────────────────────────── */

.pt-h1{
  font-size:var(--t-h1);
  line-height:var(--lh-display);
  letter-spacing:-.035em;   /* the larger the size, the tighter the fit */
  font-weight:700;
  color:var(--ink);
  max-width:18ch;
  text-wrap:balance;
  margin:0;
}

.pt-lede{
  font-size:var(--t-lede);
  line-height:var(--lh-lede);
  color:var(--muted);
  font-weight:400;
  max-width:var(--measure-lede);
  text-wrap:pretty;         /* no single-word last line               */
  margin:18px 0 0;
}

/* Centred heroes need the measure centred with them, or the cap does
   nothing but pin the text to the left of an otherwise centred block. */
.pt-hero-inner .pt-h1,
.pt-hero-inner .pt-lede{margin-inline:auto}

.breadcrumb{
  font-size:var(--t-kicker);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
}
.breadcrumb a{color:var(--muted);transition:color .2s}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb b{color:var(--ink);font-weight:700}

.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.pt-hero-inner .hero-ctas{justify-content:center}

.about-copy{max-width:var(--measure)}
.about-copy p{
  font-size:var(--t-body-lg);
  line-height:var(--lh-body);
  color:var(--muted);
  margin-bottom:1.1em;      /* the rule that was missing entirely     */
  text-wrap:pretty;
}
.about-copy p:last-child{margin-bottom:0}
.about-copy p.lede{
  font-size:var(--t-lede);
  line-height:var(--lh-lede);
  color:var(--ink);
  font-weight:500;
  max-width:var(--measure-lede);
}

/* partners.css caps .pt-section-head .lede at 560px, a measure that
   drifts with the font size. Hold it to characters instead.           */
.pt-section-head .lede{max-width:min(560px,var(--measure-lede))}

/* Section headings run 3+ lines at 51px and routinely strand a one-word
   last line. Balancing evens the rag out across the whole heading.     */
.pt-section-head h2,.final-cta h2{text-wrap:balance}

/* ── Shared partner-page primitives ───────────────────────────────────
   Lifted verbatim out of the per-page <style> blocks that every
   partner page repeats, so a page only carries what is unique to it. */

.rb-who{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.rb-who .rb-col{background:#fff;border:1px solid var(--line-soft);border-radius:20px;padding:32px 30px}
.rb-who .rb-col h3{font-size:var(--t-h3);line-height:var(--lh-title);letter-spacing:-.015em;margin:10px 0 14px;color:var(--ink)}
.rb-who .rb-tag{font-size:var(--t-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink)}
.rb-who ul{list-style:none;padding:0;margin:0}
.rb-who li{position:relative;padding-left:22px;margin-bottom:10px;color:var(--muted);font-size:var(--t-body);line-height:1.5;max-width:var(--measure-tight)}
.rb-who li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:3px;background:var(--teal)}

.rb-adds{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
.rb-adds .rb-card{background:var(--bg);border:1px solid var(--line-soft);border-radius:16px;padding:24px}
.rb-adds .rb-card h4{margin:0 0 8px;font-size:var(--t-h4);line-height:var(--lh-title);letter-spacing:-.01em;color:var(--ink)}
.rb-adds .rb-card p{margin:0;color:var(--muted);font-size:var(--t-small);line-height:1.55;max-width:var(--measure-tight)}

.rb-faq{max-width:820px;display:flex;flex-direction:column;gap:14px}
.faq-item{padding:0;border-radius:16px;background:#fff;border:1px solid var(--line-soft);transition:background .2s,border-color .2s}
.faq-item.is-open{border:1px solid transparent;background:linear-gradient(180deg,rgba(65,154,248,.16),rgba(65,154,248,0) 70%) padding-box,linear-gradient(#fff,#fff) padding-box,linear-gradient(180deg,rgba(65,154,248,.59),rgba(65,154,248,.2)) border-box}
.faq-q{width:100%;font:inherit;font-weight:600;font-size:var(--t-body-lg);line-height:1.4;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;color:var(--ink);background:none;border:0;transition:color .15s;padding:18px 24px}
.faq-item:hover .faq-q,.faq-q:hover{color:var(--teal-ink)}
.faq-icon{flex-shrink:0;width:16px;height:16px;position:relative}
.faq-icon-dash{position:absolute;top:50%;left:0;width:100%;height:2px;border-radius:1px;background:currentColor;transform:translateY(-50%)}
.faq-icon-dash--v{width:2px;height:100%;top:0;left:50%;transform:translateX(-50%);transition:transform .4s cubic-bezier(.165,.84,.44,1),opacity .4s}
.faq-item.is-open .faq-icon-dash--v{transform:translateX(-50%) rotate(90deg);opacity:0}
.faq-pane{display:grid;grid-template-columns:1fr;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .6s cubic-bezier(.165,.84,.44,1)}
.faq-item.is-open .faq-pane{grid-template-rows:1fr}
.faq-pane-mask{overflow:hidden}
.faq-pane-content{padding:0 24px 20px;font-size:var(--t-body);color:var(--muted);line-height:var(--lh-body);max-width:var(--measure);opacity:0;transform:translateY(1rem);transition:transform .8s cubic-bezier(.165,.84,.44,1),opacity .6s}
.faq-item.is-open .faq-pane-content{opacity:1;transform:translateY(0)}

@media(prefers-reduced-motion:reduce){
  .faq-pane,.faq-pane-content,.faq-icon-dash--v{transition:none}
}

@media(max-width:760px){
  .rb-who,.rb-adds{grid-template-columns:1fr}
  .pt-h1{max-width:none}
}