/* assets/pricing-plans.css · the membership pages (plans/pro, max, infinite, teams), premium pass of 1 Nov 2026.
   1. Credits, "Coming soon" (owner, 1 Nov 2026, after Attio's seat and workspace credits): the same block as the /pricing cards
      (products.css .pp-credits). No amount is decided, so no number: only the label. Individual memberships name the seat credits;
      the teams page names the workspace credits.
   2. The questions: the one question component (assets/qa.css, assets/qa.js). Here only its place on these pages, where the
      old .pdp-qa-set and .pdp-faq used to sit (product.css, proof.css). */

/* 1. credits */
main.pdp .pp-credit{ display:grid; grid-template-columns:20px minmax(0,1fr); gap:6px 10px; align-items:start; margin:16px 0 0; padding:12px 14px;
  border-radius:12px; background:var(--ghost-white, #F8F8FA); font-size:.9375rem; line-height:1.4; color:var(--ink, #000); }
main.pdp .pp-credit .pp-ic{ width:20px; height:20px; margin-top:1px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
main.pdp .pp-credit__t b{ display:block; font-weight:600; }
main.pdp .pp-credit__t small{ display:block; margin-top:2px; font-size:.8125rem; color:var(--fg-soft, #4A4A68); }
main.pdp .pp-soon-tag{ grid-column:2; justify-self:start; display:inline-flex; align-items:center; min-height:22px; padding:3px 8px; border-radius:999px;
  background:#fff; box-shadow:inset 0 0 0 1px #E4E4EB; font:600 11px/1 var(--font-mono, 'IBM Plex Mono', monospace); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink, #000); }
/* inside the white "Plus everything in Free" card the block sits on ghost; on the paper section of the teams page it is a full-width row on the section's own paper (no card, no shadow) */
main.pdp .section--paper > .wrap > .pp-credit{ max-width:none; margin-top:10px; background:var(--paper, #F8F8FA); box-shadow:none; }
@media (min-width:768px){ main.pdp .pdp-chips--seats{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:10px; } }
:lang(ar) main.pdp .pp-soon-tag{ font-family:var(--font-ar); letter-spacing:0; }

/* 2. questions */
main.pdp .qa-list{ margin-top:clamp(32px, 3.5vw, 48px); max-width:880px; }
main.pdp .pq-pair > .qa-list{ margin-top:0; max-width:none; }
main.pdp .pdp-apply__more .qa-list{ margin-top:8px; }
main.pdp .wrap--faq .qa-list{ margin-top:0; max-width:none; }
main.pdp .qa-list .qa__a a{ color:inherit; font-weight:600; text-underline-offset:3px; }
/* in the "Plus everything in Free" card: the last line, on its own row (product.css lays that card out as a wrapping row from 1024px) */
main.pdp .pdp-inc__plus > p.pp-credit{ order:9; flex:1 1 100% !important; margin:6px 0 0; color:var(--ink, #000); }

/* 3. The hero card head: the member card of /pricing (assets/mcard.css, one duo per membership: Pro Command, Max Depth,
      Infinite Prestige) on the white card, in place of the old duo band. Markup:
      <div class="pdp-card__band pdp-card__band--mc"><div class="mcardobj mcardobj--{pro|max|infinite}" aria-hidden="true">…</div>
      <div class="pdp-card__id"><span class="pdp-card__k">…</span><h2 class="pdp-card__title">…</h2></div></div>
      The aside carries data-mc-tilt (assets/mcard.js). */
main.pdp .pdp-card .pdp-card__band.pdp-card__band--mc{ flex-direction:row; align-items:center; gap:14px 20px; padding:22px 24px 4px; background:none; color:var(--ink, #000); }
main.pdp .pdp-card__band--mc .mcardobj{ flex:0 0 auto; width:min(208px, 50%); max-width:none; }
main.pdp .pdp-card__id{ display:flex; flex-direction:column; gap:6px; min-width:0; }
main.pdp .pdp-card__band--mc .pdp-card__k{ max-width:none; color:var(--pdp-soft, #4A4A68); }
main.pdp .pdp-card__band--mc .pdp-card__title{ max-width:none; font-size:var(--role-card); line-height:1.2; letter-spacing:-.018em; color:var(--ink, #000); text-wrap:balance; }
@media (max-width:599px){
  main.pdp .pdp-card .pdp-card__band.pdp-card__band--mc{ padding:18px 20px 0; gap:14px; }
  main.pdp .pdp-card__band--mc .mcardobj{ width:176px; }
}
html[data-mode="dark"] main.pdp .pdp-card__band--mc :is(.pdp-card__title){ color:#F8F8FA; }
html[data-mode="dark"] main.pdp .pdp-card__band--mc .pdp-card__k{ color:var(--slate-on-dark, #9A9BBD); }

/* 4. Phones (under 768px): the price card and Apply come right after the H1, before the lead. The hero's top block opens up
      (display:contents) so its children join the hero grid; the eyebrow and the H1 lead, the card follows (DOM order), then the
      rest of the top block, then the bullets. Needs: .pdp-hero__top > .eyebrow + .pdp-h1, then aside.pdp-card, then .pdp-hero__more. */
@media (max-width:767px){
  main.pdp .pdp-hero__grid{ grid-template-areas:none; gap:16px; }
  main.pdp .pdp-hero__top{ display:contents; }
  main.pdp .pdp-hero__top > *{ order:1; }
  main.pdp .pdp-hero__top > :is(.eyebrow, .pdp-h1){ order:0; }
  main.pdp .pdp-hero__grid > .pdp-card{ grid-area:auto; order:0; margin-block:4px 8px; }
  main.pdp .pdp-hero__grid > .pdp-hero__more{ grid-area:auto; order:2; margin-top:8px; }
}

/* 5. One ladder on every plan page: Free · Pro · Max · Infinite, in that order at every width (no reordering by plan).
      The page's own column is .is-this with the "You are here" tag and the magenta Apply; the others link to their page.
      On phones only (the ladder is a scroll row under 600px) the snap row starts on the page's own column where the browser
      supports scroll-initial-target; from 600px up the nearest scroll container is the page, so the rule stays phone-only.
      1024-1279: the price keeps one line and the unit takes its own.
      A one-line note under it sends single-course buyers to /academy. */
main.pdp .pdp-ladder--u > .pdp-lcol{ order:0; }
@media (max-width:599px){ main.pdp .pdp-ladder--u > .pdp-lcol.is-this{ scroll-initial-target:nearest; } }
main.pdp .pdp-ladder__note{ margin:16px 0 0; font-size:.95rem; line-height:1.5; color:var(--pdp-soft, #4A4A68); }
@media (min-width:600px) and (max-width:1023px){ main.pdp .pdp-ladder--u{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px) and (max-width:1279px){ main.pdp .pdp-ladder--u .pdp-lcol__rows .pdp-price{ font-size:1.625rem; white-space:nowrap; } main.pdp .pdp-ladder--u .pdp-unit{ display:block; } }

/* 6. One benefits matrix: the same rows and four columns everywhere (Free, Pro, Max, Infinite). Phones: narrower plan columns,
      so the benefit column keeps room to read. */
@media (max-width:599px){
  main.pdp .pdp-mx--4 .pdp-mx__t thead th{ width:50px; }
  main.pdp .pdp-mx--4 .pdp-mx__t thead th:last-child{ width:calc(50px + var(--gutter, 20px)); }
  main.pdp .pdp-mx--4 .pdp-mx__t thead th a{ min-width:44px; }
  main.pdp .pdp-mx--4 .pdp-mx__tag{ font-size:9.5px; letter-spacing:.02em; line-height:1.2; }
}
/* 1024-1279: the chips keep one line (2px less padding makes room). Under 1024 the plan columns are too narrow for one
   line (the table would clip inside .pdp-mx's overflow:hidden), so the chips wrap there. */
@media (min-width:1024px) and (max-width:1279px){ main.pdp .pdp-mx--4 .pdp-mx__chip{ white-space:nowrap; padding-inline:6px; } }

/* 7. The questions beside the member quotes, in the "Everything in the membership" section. Desktop: questions, quotes, the
      app phone, top-aligned. Under 1024px: the quotes, then the questions (the phone hides on phones, product.css).
      Markup: .pdp-room.pdp-room--q.pdp-room--faq > .pdp-room__faq#faq (h3#faq-title + p + .qa-list), .pdp-room__says
      (h3 + ul.pdp-quotes), .pdp-room__vis. */
main.pdp .pdp-room--faq{ grid-template-areas:"says" "faq" "vis"; align-items:start; }
main.pdp .pdp-room__says{ grid-area:says; min-width:0; }
main.pdp .pdp-room__says > .h3, main.pdp .pdp-room__faq > .h3{ margin:0 0 clamp(16px,2vw,24px); }
main.pdp .pdp-room__faq{ grid-area:faq; min-width:0; scroll-margin-top:96px; }
main.pdp .pdp-room__faqlead{ margin:calc(-1 * clamp(8px,1vw,12px)) 0 0; font-size:.95rem; line-height:1.5; color:var(--pdp-soft, #4A4A68); }
main.pdp .pdp-room__faqlead a{ color:inherit; font-weight:600; text-underline-offset:3px; }
main.pdp .pdp-room__faq .qa-list{ margin-top:16px; max-width:none; }
main.pdp .pdp-room--faq > .pdp-room__vis{ grid-area:vis; }
@media (min-width:1024px){
  main.pdp .pdp-room--q.pdp-room--faq{ grid-template-columns:minmax(0,7fr) minmax(0,5fr) auto; grid-template-areas:"faq says vis"; align-items:start; column-gap:clamp(24px,3vw,40px); }
  main.pdp .pdp-room--faq .pdp-quotes{ grid-template-columns:minmax(0,1fr); }
}