/*
  Protection Connect: Guides index + Article v2 page styles.
  Loaded after /assets/site.css by /guides/, the guide pages and /complaints/.
  site.css already carries the shared parts (pc-article, pc-prose, pc-table, pc-gcard,
  pc-cta, pc-related); this file only adds what those pages need on top.
  Sources: design/Guides v2.dc.html, design/Article v2.dc.html.
*/

/* Guides index: centred hero (H1 + intro). Content-box like the prototype:
   1200px of content plus 20px gutters. */
.pc-ghero {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 112px) 20px 0;
  text-align: center;
}
.pc-ghero__title {
  margin: 0 auto;
  max-width: 14ch;
  font-size: clamp(44px, 7.6vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  font-weight: 600;
  text-wrap: balance;
}
.pc-ghero__intro {
  margin: 24px auto 0;
  max-width: 560px;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--pc-muted);
  text-wrap: pretty;
}

/* Guides index: the 13-card grid. */
.pc-glist {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 80px) 20px 0;
}

/* Guides index: one group per category (H2 + short intro + cards). */
.pc-glist__group + .pc-glist__group { margin-top: clamp(56px, 7vw, 88px); }
.pc-glist__h { margin: 0; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; color: var(--pc-navy); }
.pc-glist__p { margin: 10px 0 24px; max-width: 560px; font-size: 17px; line-height: 1.5; color: var(--pc-muted); }

/* Article meta line is a <p> here (a <div> in the prototype): drop the UA margins. */
.pc-article__meta { margin-bottom: 0; }

/* Scrollable data tables are focusable regions (keyboard scrolling on narrow screens). */
.pc-table:focus-visible { outline-offset: 3px; }

/* ===========================================================================
   Lead costs guide only (/life-insurance-leads-cost/): the price table that
   opens the page. Scoped to .pc-prices; the shared .pc-table used by the
   other guides is not touched.
   Markup: section.pc-prices > h2.pc-prices__title, table.pc-prices__table
   (thead th[scope=col]; tbody th[scope=row] + td.pc-prices__price +
   td.pc-prices__what; the Exclusive row is tr.is-us and carries
   span.pc-prices__us), p.pc-prices__note.
   Plain on purpose: sentence-case headers, one navy rule under the header,
   hairlines between rows, one pale tinted row. Text lines up with the H1;
   the rules and the tint run --pr-bleed past it on both sides.
   From 601px it is a native table. At 600px and below each row stacks
   (lead type and price on one line, "What you get" under them), which is
   why the rows keep explicit ARIA roles.
   =========================================================================== */
/* The table is the point of this page: a tighter opening keeps it in the
   first screen. */
.pc-article--prices { padding-top: clamp(32px, 4.4vw, 64px); }
.pc-article--prices .pc-article__title { font-size: clamp(36px, 4.4vw, 58px); }

.pc-prices {
  --pr-bleed: 16px;
  max-width: 820px;
  margin: clamp(36px, 4.4vw, 56px) auto 0;
}
.pc-prices__title {
  margin: 0;
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--pc-navy);
  text-wrap: balance;
}
.pc-prices__table {
  width: calc(100% + 2 * var(--pr-bleed));
  margin: 20px calc(-1 * var(--pr-bleed)) 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.pc-prices__table th,
.pc-prices__table td { text-align: left; }
.pc-prices__table thead th {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--pc-muted);
}
.pc-prices__table thead tr { border-bottom: 1px solid var(--pc-navy); }
.pc-prices__table tbody tr { border-bottom: 1px solid var(--pc-border-5); }
.pc-prices__table tbody th {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--pc-navy);
}
.pc-prices__price {
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
  white-space: nowrap;
  color: var(--pc-navy);
}
.pc-prices__to { font-weight: 400; color: var(--pc-muted); }
.pc-prices__what {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--pc-nav-ink);
  text-wrap: pretty;
}
/* Exclusive (Protection Connect) row: navy, white text, a two-tone mark tag. */
.pc-prices__table tbody tr.is-us { background: var(--pc-navy); border-bottom-color: var(--pc-navy); }
.pc-prices__table tbody tr.is-us th,
.pc-prices__table tbody tr.is-us .pc-prices__price { color: #FFFFFF; }
.pc-prices__table tbody tr.is-us .pc-prices__to { color: rgba(255, 255, 255, .62); }
.pc-prices__table tbody tr.is-us .pc-prices__what { color: rgba(255, 255, 255, .8); }
.pc-prices__us {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 8px;
  padding: 3px 10px 3px 5px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 600;
  color: #FFFFFF;
  white-space: nowrap;
}
.pc-prices__us img { flex: none; display: block; width: 16px; height: 16px; }
.pc-prices__note {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--pc-muted);
  text-wrap: pretty;
}
/* Sign-up banner under the table: pale panel, mark, one line of copy, primary button. */
.pc-prices__cta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 28px calc(var(--pr-bleed, 16px) * -1) 0;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--pc-pale-2);
}
.pc-prices__cta-mark { flex: none; display: block; width: 36px; height: 36px; }
.pc-prices__cta-copy { flex: 1 1 auto; min-width: 0; }
.pc-prices__cta-h { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; color: var(--pc-navy); }
.pc-prices__cta-p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--pc-muted); }
.pc-prices__cta-btn { flex: none; }
@media (max-width: 700px) {
  .pc-prices__cta { flex-wrap: wrap; padding: 20px; }
  .pc-prices__cta-mark { width: 30px; height: 30px; }
  .pc-prices__cta-copy { flex-basis: calc(100% - 48px); }
  .pc-prices__cta-btn { flex: 1 1 100%; justify-content: center; }
}

/* 601px and up: a native table. First baselines line up across a row. */
@media (min-width: 601px) {
  .pc-prices__table th,
  .pc-prices__table td {
    padding: 20px 14px;
    vertical-align: baseline;
  }
  .pc-prices__table tr > :first-child { padding-left: var(--pr-bleed); }
  .pc-prices__table tr > :last-child { padding-right: var(--pr-bleed); }
  .pc-prices__table thead th {
    padding-top: 0;
    padding-bottom: 12px;
    vertical-align: bottom;
  }
  /* Whole-pixel widths for the first two columns ("What you get" takes the
     rest), so the tinted row has no hairline seams at fractional cell edges.
     Lead types and headers keep to one line. */
  .pc-prices__table thead th:nth-child(1) { width: 188px; }
  .pc-prices__table thead th:nth-child(2) { width: 196px; }
  .pc-prices__table th { box-sizing: border-box; white-space: nowrap; }
}
@media (min-width: 601px) and (max-width: 860px) {
  .pc-prices__table thead th:nth-child(1) { width: 160px; }
  .pc-prices__table thead th:nth-child(2) { width: 170px; }
}

/* Once the column meets the 20px page gutter, a smaller bleed keeps the
   rules and the tint 8px clear of the screen edge. */
@media (max-width: 860px) {
  .pc-prices { --pr-bleed: 12px; }
}

/* 600px and below: lead type and price share a line, "What you get" sits
   under them; its column header is kept for screen readers only. */
@media (max-width: 600px) {
  .pc-prices__table,
  .pc-prices__table thead,
  .pc-prices__table tbody { display: block; }
  .pc-prices__table { margin-top: 16px; }
  .pc-prices__table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: baseline;
    padding: 16px var(--pr-bleed) 17px;
  }
  .pc-prices__table thead tr { padding-top: 0; padding-bottom: 10px; }
  .pc-prices__table th,
  .pc-prices__table td { display: block; padding: 0; }
  .pc-prices__table thead th { font-size: 13.5px; }
  .pc-prices__table thead th:nth-child(2),
  .pc-prices__price { text-align: right; }
  .pc-prices__table thead th:nth-child(3) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pc-prices__table tbody th { font-size: 16.5px; }
  .pc-prices__price { font-size: 18px; }
  .pc-prices__what { grid-column: 1 / -1; margin-top: 6px; font-size: 15px; }
}