/* ============================================================================
   PACKAGES + FAQ — the bridge  (google-ads.html)
   ----------------------------------------------------------------------------
   pkg.css and gfaq.css are the two sections verbatim. This file is everything
   the sections need that the source page gave them and this page does not —
   nothing else belongs in here, and nothing in here restyles the sections.

     1 · the two tokens this site does not declare
     2 · the source page's element reboot, scoped to the two sections
     3 · the page lane
     4 · minmax(0, 1fr) — `1fr` is a floor, not a ceiling
     5 · the UA list indent
   ========================================================================== */


/* ── 1 · tokens ───────────────────────────────────────────────────────────────
   The reference page's :root was dropped: every colour in it already exists on
   this page at the same value. These two do not exist anywhere on the site, so
   they are declared here under a --pk- prefix. An unprefixed shared token
   collides exactly like a class name. */
:root{
  --pk-muted:       #5F6875;   /* was --text-muted: 5.9:1 on paper, 5.6:1 on mist */
  --pk-accent-deep: #1257C4;   /* was --accent-deep: hover / pressed */
}


/* ── 2 · reboot ───────────────────────────────────────────────────────────────
   The reference page carried a Bootstrap-style reboot; this page carries its
   own, and the two differ in four places that the sections rely on. Written at
   0,0,1 so it settles the page's own element rules by source order (this file
   is last in the head) and still loses to every class rule inside the sections. */
:where(#pricing, #gfaq){
  line-height: 1.5;            /* this page leaves body at `normal` */
}
:where(#pricing, #gfaq) p{
  margin-top: 0; margin-bottom: 1rem;   /* this page has p{margin:0} */
}
:where(#pricing, #gfaq) h1,
:where(#pricing, #gfaq) h2,
:where(#pricing, #gfaq) h3{
  margin-top: 0; margin-bottom: .5rem;
}
:where(#pricing, #gfaq) ul,
:where(#pricing, #gfaq) ol{
  margin-top: 0;
}


/* ── 3 · the lane ─────────────────────────────────────────────────────────────
   Measured off this page, not guessed: #gads-services, #w8-system and #wcu-ga
   all sit on min(1400px, 100% - 2*var(--pad)) — 1104 at 1200, 1324.8 at 1440,
   1400 at 1920. The reference gave these two sections a 1300px box and a flat
   24px gutter, which would step in and out against every section above them.
   The FAQ keeps its own narrower measure; its gutter is now the page's, so on
   anything under ~1250px its left edge is the page's left edge too. */
#pricing .pricing-wrap{
  width: min(1400px, 100% - 2 * var(--pad));
  max-width: none; padding: 0; margin-inline: auto;
}
#gfaq .gfaq-wrap{
  width: min(1120px, 100% - 2 * var(--pad));
  max-width: none; padding: 0; margin-inline: auto;
}


/* ── 4 · minmax(0, 1fr) ───────────────────────────────────────────────────────
   `1fr` is `minmax(auto, 1fr)`: a track never shrinks below its content, so a
   long price row or a nowrap label pushes the grid — and the page — wider than
   the phone. The desktop .pricing-cards rule already does this; the responsive
   overrides and the plan bar do not. */
.pricing-cards   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pricing-plan-bar{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Three levels, not four packages (gads-pkg-compare/_align.py). Two-up leaves
   an orphan with three cards, so the summary goes straight to one column.
   1080 is measured, not chosen: .pcf-feat-label is nowrap + ellipsis, and
   "Optimisation Rhythm — Twice weekly" — the longest line the comparison
   model produces — starts truncating below a 311px card, which is a 1053px
   viewport on this lane. 1080 leaves the cushion. */
@media (max-width: 1080px){
  .pricing-cards   { grid-template-columns: minmax(0, 1fr); }
}

/* The two-line clamp reserves calc(12px * 1.5 * 2) while the line-height is
   1.55, so a one-line description sat 1.2px short of a two-line one and the
   three CTAs stopped being level. The reserve is the real line box. */
.pricing-card-rec{ min-height: calc(12px * 1.55 * 2); }


/* ── 5 · the UA list indent ───────────────────────────────────────────────────
   .pcf-list and .pcf-res-list take `list-style:none` and draw their own marker
   (a numbered chip, a ring) but never reset padding-inline-start, so the UA's
   40px survives. Measured on the reference: the whole feature list sits 40px
   inside an 18px-padded card, and .pcf-feat-label — flex:1, nowrap, ellipsis —
   truncates 40px early because of it. The bottom margins are left alone, so the
   vertical rhythm is the rhythm that was signed off. */
#pricing .pcf-list,
#pricing .pcf-res-list{ padding-inline-start: 0; }