/* =========================================================
   CarbonAI — Pricing page
   Built from Figma: PricingPage_Final (node 7741:8366).
   Loaded after index.css and reuses its tokens (--teal, --amber,
   --ink, --muted, --card, --radius-*, --container, --gutter...),
   its header/footer/FAQ components and its .feature-cards block.
   Page-scoped classes use the `pr-` prefix (mirrors the `sol-`
   convention already used by solution.css).
   ========================================================= */

.pricing-page { background: var(--card); }

/* ---------- Decorative dot-grid (Figma: scattered translucent squares) ----------
   A tiled, low-alpha pattern approximates the many individually-placed
   rounded squares in the Figma canvas without hand-authoring dozens of
   absolutely-positioned nodes.
   Figma only clusters these squares at the left/right edges of the hero
   (roughly the outer ~25% on each side) and leaves the centered headline
   completely clear — our first pass tiled the pattern across the full
   width instead, so it visibly cluttered the text. The mask below fades
   the pattern out across the middle to match. */
.pr-dotgrid { position: relative; overflow: hidden; }
.pr-dotgrid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Crect x='10' y='14' width='64' height='64' rx='14' fill='%23ffffff' fill-opacity='0.08'/%3E%3Crect x='106' y='92' width='64' height='64' rx='14' fill='%23ffffff' fill-opacity='0.08'/%3E%3C/svg%3E");
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 34%, transparent 66%, #000 78%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 34%, transparent 66%, #000 78%, #000 100%);
  pointer-events: none;
  z-index: 0;
}
.pr-dotgrid > * { position: relative; z-index: 1; }

/* =========================================================
   Hero
   ========================================================= */
.pr-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma's own cover band shrank to match (node 7741:8594/8617/8415:
     header 76px + 68px top padding + a 2-line 48px headline (~106px) +
     82px bottom padding = 256px) — this used to deliberately undercut a
     taller Figma hero to reduce scroll to the pricing cards, but the
     design itself is now this compact, so it's a direct match.
     The pricing page overrides this to a shorter band — see
     ".pricing-page .pr-hero" below; the Figma-matching height stays the
     default here because Signup-page.html reuses .pr-hero as-is. */
  min-height: 256px;
  padding: 68px var(--gutter) 82px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(83, 83, 83, 0.7), rgba(0, 0, 0, 0.7)),
    url("../assets/problem/pricing-hero-aerial.jpg") center / cover no-repeat;
}
.pr-hero-inner { max-width: 720px; }
.pr-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
}

/* A pricing page should lead with pricing, not hero photography: at the
   Figma-matched 256px the cards start around the middle of a 1080p
   screen, pushing the feature comparison almost entirely below the fold.
   NB the min-height is not what sizes this band — measured in Chrome at
   1920px, the h1 wraps to two lines inside .pr-hero-inner's 720px cap
   and renders 106px tall, so content + padding always exceeds it. The
   padding is therefore the real dial: 34+40 around 106px gives the 180px
   band this page is budgeted for (see the fold arithmetic on .pr-plans).
   The top/bottom split is deliberately uneven, as in the original 68/82,
   which seats the headline a touch above true centre. min-height is kept
   only as a floor for the day the headline shortens to one line. Scoped
   to body.pricing-page so Signup-page.html, which reuses .pr-hero for
   its own cover band, keeps the taller Figma proportions. */
.pricing-page .pr-hero {
  min-height: 180px;
  padding: 34px var(--gutter) 40px;
  /* The flat 70% dark wash from .pr-hero above is dropped here and rebuilt
     as two layers (::before / ::after) so the aerial photo can carry the
     band. Signup-page.html keeps the original single-layer treatment. */
  background: #0c2429;
  isolation: isolate;
}

/* The photograph, brightened. A flat overlay at 0.7 leaves the image
   contributing only 30% of the band, which flattens the aerial pattern
   into grey-brown mud — yet the overlay can't simply be dialled down,
   because the headline sits on the photo's busiest, lightest area (the
   pale rock down the middle). So the two jobs are split: this layer
   brightens and saturates the photo everywhere, and ::after below puts
   the darkening back only where the text needs it.
   saturate() past brightness() is the point rather than a flourish —
   lifting exposure alone desaturates, and the teal water / ochre silt
   are what tie the image to the brand palette, so they get pushed back
   up. contrast() is nudged only slightly: more would crush the silt
   detail that makes the pattern read. */
.pricing-page .pr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../assets/problem/pricing-hero-aerial.jpg") center / cover
    no-repeat;
  filter: brightness(1.26) saturate(1.3) contrast(1.04);
}

/* Legibility scrim, shaped rather than flat. The radial ellipse tracks
   the centred .pr-hero-inner (max-width 720px), holding 0.72 alpha behind
   the headline and falling away to nothing by ~78% of the width, so the
   outer thirds — where the pattern is most interesting — stay bright. The
   linear layer underneath it is a light, even 0.18→0.30 graduation that
   keeps the band cohesive top-to-bottom and stops the ellipse reading as
   a visible vignette.
   The ellipse is deliberately strong because it is also cheap: simulating
   the full composite at 1920x210, taking the centre from 0.62 to 0.72
   lifts the headline's worst-case contrast from 4.03:1 to 4.88:1 while
   the outer-edge luminance drops only 0.349 → 0.344, because the scrim
   has already faded out by the time it reaches the interesting part of
   the photo. Worst case is the headline crossing a blown-out rock
   highlight; 4.88:1 clears the 3:1 that 48px text needs with room to
   spare, and the text-shadow on the h1 covers the rest. Tinted near-black
   (#031a1e) rather than pure black so the scrim sits in the image's own
   teal family. */
.pricing-page .pr-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(
      ellipse 52% 118% at 50% 50%,
      rgba(3, 26, 30, 0.72) 0%,
      rgba(3, 26, 30, 0.45) 45%,
      rgba(3, 26, 30, 0) 78%
    ),
    linear-gradient(180deg, rgba(3, 26, 30, 0.18), rgba(3, 26, 30, 0.3));
}

/* Both layers above are positioned, so the headline needs its own stacking
   context to stay on top of them. */
.pricing-page .pr-hero-inner {
  position: relative;
  z-index: 2;
}
.pricing-page .pr-hero h1 {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

/* =========================================================
   Pricing cards
   ========================================================= */
/* Figma puts a 112px gap here (hero band node 7741:8367/8368 ends at
   y=332, pricing-grid node 7741:8415 starts at y=444), but that reads as
   dead white space on screen: hero → gap → toggle → gap → cards, with
   the cards not starting until roughly halfway down a 1080p viewport.
   58px keeps the hero and the toggle clearly separate while pulling the
   cards up 54px. Bottom padding (96px) + .pr-brands's own 64px top
   padding already reproduces Figma's pricing-grid-to-"Trusted by" gap
   (160px) exactly, so that side is untouched. */
.pr-plans { padding: 48px 0 96px; }

/* ---- Fold budget at 1920x1080 ----
   Target composition, all above the fold: nav, hero, toggle, every card's
   full header block, CTA, divider, and 2-3 feature bullets.
   A maximised Chrome window on a 1080p screen leaves roughly 940px of
   viewport once browser chrome and the Windows taskbar are subtracted, so
   940 — not 1080 — is the line to clear. Measured in headless Chrome
   before this pass, the third feature bullet of the Team card (the worst
   case: its bullets wrap to two lines where the other cards' don't)
   ended at y=998, i.e. ~58px below that fold.
   76px was taken back, all of it above the bullets and none of it from
   the bullets themselves:
     hero band      222 -> 180  (-42, padding above)
     .pr-plans top   58 ->  48  (-10)
     .pr-toggle-wrap 32 ->  28  (-4)
     .pr-card pad    40 ->  32  (-8)
     .pr-card gap    24 ->  20  (-12, three gaps sit above the first bullet)
   That lands the Team card's third bullet at ~922 with ~18px to spare.
   .pr-card-header's 224px min-height was examined and left alone: the
   natural header heights are 201/221/182px, so it is only 3px above the
   tallest and trimming it would buy nothing while re-staggering the CTAs
   it exists to align. */

/* Figma has 52px here (toggle-container node 7741:8549 bottom edge at
   y=499, the Team card's top edge at y=551), tightened to 32px as part
   of the same fold cleanup as .pr-plans above — the toggle controls the
   cards, so it should sit close enough to read as attached to them. The
   Recommended badge (node 7741:8556) needs no separate adjustment: it's
   positioned via .pr-recommended's top:-15px relative to the card itself,
   so it travels with the cards automatically. */
/* Back to 28px now the pill straddles the card edge instead of sitting
   fully above it: it needs only 14px of clearance rather than 34px, so
   this no longer has to be widened to make room. That also puts this gap
   back inside the 25-30px the page was originally briefed to. */
.pr-toggle-wrap { display: flex; justify-content: center; margin-bottom: 28px; }
.pr-toggle {
  --thumb-left: 4px;
  --thumb-width: 89px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 54px;
  background: #f3f4f6;
  border-radius: var(--radius-pill);
  padding: 4px;
}
.pr-toggle-thumb {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: var(--thumb-left);
  width: var(--thumb-width);
  background: #fff;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.03);
  transition: left 0.3s ease, width 0.3s ease;
}
.pr-toggle-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 8px 16px;
  font-size: 16px;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.pr-toggle-btn.is-active { color: var(--ink); font-weight: 700; }
.pr-toggle-badge {
  padding: 6px;
  border-radius: var(--radius-pill);
  background: #fff9f1;
  color: var(--amber);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}

.pr-cards {
  display: grid;
  /* minmax(0, 364px) had no floor, so between the 3-column layout's
     "full size" point (~1324px viewport) and the old single-column
     switch (940px), cards continuously shrank all the way down to
     ~257px — meaning two common laptop widths (e.g. 1280px vs 1366px)
     could show visibly different card sizes (349px vs the full 364px)
     even though neither looked "broken." A 320px floor keeps that
     variance small and predictable; the single-column breakpoint below
     moves up to match so cards never actually need to shrink past it. */
  grid-template-columns: repeat(3, minmax(320px, 364px));
  justify-content: center;
  /* stretch (the grid default) so every card matches the tallest card's
     height, e.g. the shorter Enterprise card (6 features) stretches to
     match the taller Team card (7 features) — matches Figma, where every
     card instance is a fixed, equal 743px tall. */
  gap: 36px;
}
.pr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  background: var(--card);
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: 0 12px 12px rgba(0, 0, 0, 0.03);
}
/* Deliberately carries no border or shadow of its own any more: it keeps
   .pr-card's neutral #e2e8f0 edge like every other card. Four separate
   signals (teal border + amber glow, the pill, the filled CTA, and an
   amber plan name) were all competing to point at this one card. The
   heavier border was also actively misleading — a card outlined in the
   accent colour reads as selected or hovered, i.e. as the result of a
   micro-interaction, and there isn't one here. The border, the glow and
   the amber plan name are all gone now; the pill and the filled CTA
   carry the emphasis between them, which is enough.
   The plan name in particular has to match: "Individual" / "Team" /
   "Enterprise" is one row the eye reads straight across when comparing
   tiers, and colouring one of the three broke that row for emphasis it
   was already getting twice over.
   The class is still needed: it anchors the pill and drives the CTA's
   hover behaviour below. */
.pr-card--featured {
  border-color: #e2e8f0;
}

/* Recommended ribbon (Figma: a gradient pill straddling the featured
   card's top border, centered). Renamed from .pr-best-value along with
   the label: "Best Value" is an objective claim the page can't stand
   behind — for an org with many seats Enterprise's unlimited users may
   genuinely be the better value, so the badge could be simply false to
   the reader it most wants to convert. "Recommended" says the same thing
   as guidance rather than as arithmetic. */
.pr-recommended {
  position: absolute;
  /* Straddles the card's top edge, border through its middle: the pill is
     28px tall (12px line + 8px padding either side), so -14px centres it
     on the border. The pill is opaque, so it simply covers the border
     segment it crosses rather than being ruled through by it.
     Offset to the right rather than centred. Centred, it sat directly
     under the (also centred) toggle, so toggle and pill stacked into one
     vertical column of chrome above the grid and the pill read as part of
     the toggle rather than as a label on the card. Anchoring it 24px in
     from the card's right edge moves it clear of that column and ties it
     to the card it belongs to. left/transform are reset because the rule
     previously centred it and both would otherwise still apply. */
  top: -14px;
  right: 24px;
  left: auto;
  transform: none;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  /* Flat teal, not the amber-to-teal gradient: the gradient made the pill
     a third distinct colour treatment on a card that is now meant to be
     signalled quietly. */
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* This used to carry a 224px min-height to stop the CTAs staggering, back
   when the three headers held genuinely different structures (only Team
   had a caption line). They don't any more — every tier now runs plan /
   price-block / description, the first two are fixed-height, and
   .pr-card-desc below pins the third — so the headers come out equal by
   construction and the magic number is gone rather than merely retuned. */
.pr-card-header { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; text-align: center; }
.pr-card-plan { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
/* Every tier now uses this same three-level block (headline price / seat
   basis / billing basis) rather than only Team, which is what lets the
   cards be read across rather than one at a time. Because the three
   levels are structurally identical in all three cards, the block is a
   fixed height everywhere, so the description below it starts on the same
   line in each card — that plus .pr-card-desc's min-height is what keeps
   the CTAs, dividers and bullet lists aligned. */
.pr-card-price-block { display: flex; flex-direction: column; align-items: center; gap: 4px; }
/* The seat basis ("1 user" / "2-user minimum" / "Unlimited users"): the
   step between the headline number and the billing caption, so it sits
   between them in weight too — darker and larger than the caption, well
   below the 48px price. */
.pr-card-price-seats { margin: 0; font-size: 14px; font-weight: 600; color: #475569; }
.pr-card-price { display: flex; align-items: baseline; gap: 4px; margin: 0; min-height: 56px; }
.pr-card-price b { font-size: 48px; font-weight: 800; color: #0f172a; }
.pr-card-price span { font-size: 16px; font-weight: 500; color: #475569; }
.pr-card-price-caption { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--muted); }
/* 16px rather than 14px: at 14px this copy read small against how much
   air the card gives it — a spacious card that was still work to read.
   The size rise is paid for by shorter copy, so it costs no fold: all
   three descriptions now wrap to exactly three lines (70px each, measured
   at 1920px), where the old longer copy ran 4/4/3 lines at 78/78/59px.
   The min-height is the last thing keeping the cards aligned, and is the
   one number to revisit if this copy changes. It must stay >= the tallest
   description. Right now all three happen to be equal, so it is doing no
   work — but it is what stops a future edit to one card's copy silently
   dragging that card's CTA, divider and bullets out of line with the
   others. If copy grows, re-measure and raise it rather than letting it
   fall below the natural height, where it would be inert. */
.pr-card-desc { margin: 0; max-width: 100%; min-height: 70px; font-size: 16px; line-height: 1.45; color: #475569; }

.pr-card-cta {
  width: 100%;
  text-align: center;
  padding: 14px 0;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.pr-card-cta--outline { border: 1px solid var(--teal); color: var(--teal); background: transparent; }
.pr-card-cta--outline:hover { background: var(--teal); color: #fff; }
.pr-card-cta--filled { border: 1px solid var(--teal); background: var(--teal); color: #fff; }
.pr-card-cta--filled:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
/* The outline CTAs fill with teal on hover, so hovering Individual or
   Enterprise used to leave two solid teal buttons on screen at once and
   the pointer stopped being the thing that told you which was which.
   While another card's CTA is hovered, the featured one steps back to the
   outline treatment, so exactly one button reads as active at any moment.
   :has() is doing the work; where it isn't supported this rule simply
   doesn't apply and the buttons behave as they did before. */
.pr-cards:has(.pr-card:not(.pr-card--featured) .pr-card-cta:hover)
  .pr-card--featured
  .pr-card-cta--filled {
  background: transparent;
  color: var(--teal);
  border-color: var(--teal);
}

/* Scoped to the pricing page (Signup-page.html reuses .pr-card for its
   form panel, where the roomier 40px/24px is still right). These two
   values are worth 20px of fold on their own, because the card's gap
   applies three times before the first feature bullet — header->actions,
   actions->divider, divider->features. 32/20 is still comfortably above
   the 24/16 where the card would start to feel cramped. */
.pricing-page .pr-card { padding: 32px; gap: 20px; }

.pr-card-divider { width: 100%; height: 1px; background: #e2e8f0; }

/* The single currency line, replacing the per-card note. Deliberately
   quieter than .pr-trial below it: this qualifies the prices above, while
   the trial prompt is the closing call to action, so the fine print sits
   nearer the grid and the CTA gets the larger gap and the stronger type. */
.pr-fineprint {
  margin: 24px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* "Not ready to commit?" — the low-commitment path for visitors who
   aren't ready to pick a tier. Sits under the grid, inside .pr-plans, so
   it reads as a footnote to the cards rather than a fourth option
   competing with them. */
.pr-trial {
  margin: 32px 0 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}
.pr-trial-link {
  color: var(--teal);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.25s ease;
}
.pr-trial-link:hover { color: var(--teal-dark); }

.pr-card-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; width: 100%; }
.pr-card-features li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.4; color: #475569; }
.pr-check {
  flex: none;
  width: 16px;
  height: 16px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5l3 3 7-7' stroke='%23397f86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* =========================================================
   Trusted by leading organizations
   Figma (node 7741:8596) names this "div.logos-slider" / "div.logos-track"
   — the same left-to-right scrolling marquee pattern as the homepage's
   .brands--marquee, just on a white band instead of teal (so the logos
   keep their native teal-tinted artwork rather than the homepage's
   white-filtered ones). Reuses index.css's brand-scroll-ltr keyframe;
   the duplicated track + duration are set up the same way in JS.
   ========================================================= */
.pr-brands { padding: 64px 0 64px; text-align: center; }
.pr-brands .section-title { margin-bottom: 40px; font-size: 40px; font-weight: 500; line-height: 1.25; letter-spacing: -0.25px; }
/* Logo strip track, marks, and masks live in brands.css (shared with index.html). */

/* =========================================================
   Designed for Trust (reuses .feature-cards / .feature-icon
   from index.css — identical content to the "Why us" section)
   ========================================================= */
/* No dot-grid overlay here — a full-resolution isolated render of Figma
   node 7741:8558 confirmed the scattered translucent squares belong only
   to the hero, not this section (an earlier assumption wrongly carried
   .pr-dotgrid over to this section too). Just the video + dark base. */
.pr-trust { position: relative; overflow: hidden; background: #2e2e2e; padding: 88px 0; }
.pr-trust > .container { position: relative; z-index: 1; }
/* index.css's shared .feature-cards uses plain 1fr columns (no floor), so
   between the 4-column layout's full size (305px, matching Figma node
   7741:8562 exactly, capped from 1440px+) and its own 1100px 2-column
   switch, cards scale continuously all the way down to ~233px — the same
   floorless-shrink issue the pricing cards had. Scoped here (not in
   index.css, which index.html also uses) with a 260px floor and the
   4-column zone extended up to 1260px (where four 260px cards + three
   20px gaps, 1100px, first fits the container) so cards never actually
   need to shrink past that floor. */
.pr-trust .feature-cards { grid-template-columns: repeat(4, minmax(260px, 305px)); }
@media (max-width: 1260px) and (min-width: 1101px) {
  .pr-trust .feature-cards { grid-template-columns: repeat(2, 1fr); }
}
/* Figma (node 7741:8561) sets this title at 40px/Medium/1.25 line-height/
   -0.25px tracking — the same treatment as "Trusted by leading
   organizations" below, not the base .section-title's
   36px/Bold/1.15/-0.01em (that mismatch was the reported font difference). */
.pr-trust .section-title { color: #fff; margin-bottom: 40px; font-size: 40px; font-weight: 500; line-height: 1.25; letter-spacing: -0.25px; }
/* Figma (node 7741:8558) layers a faint forest/fog background behind this
   section — the same clip already used for the homepage's "footprints"
   band (index.css .footprints .bg), reused here at the same 14% opacity
   and slow ken-burns drift instead of authoring a second background asset. */
.pr-trust .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.14;
  animation: ken-burns 20s ease-in-out infinite alternate;
  transform-origin: center;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .pr-trust .bg { animation: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
/* Three cards at their 320px floor + two 36px gaps need ~1032px of content
   width; at the default 80px gutter that's a viewport of ~1192px, so the
   3-column layout switches to a single stacked column at 1200px (a little
   headroom above that) instead of squeezing the columns past their floor,
   which would otherwise overflow the page horizontally. */
@media (max-width: 1320px) {
  /* Cards are still 3-across here but narrower than their 364px desktop
     size, so the header text (plan/price/description) wraps onto more
     lines than the 224px min-height accounts for — without a bigger
     reserved height here, the "Get started"/"Contact Sales" buttons drift
     out of alignment again as the cards shrink. 284px covers the worst
     case (Team's header, right down to the 1200px single-column cutoff). */
  .pr-card-header { min-height: 284px; }
}

@media (max-width: 1200px) {
  /* Stay at justify-items: stretch (the default) here too — centering items
     would let each card shrink-to-fit its own content width, so a shorter
     card renders narrower than the others instead of matching them.
     Widened slightly past the desktop 364px cap — with only one card per
     row on tablet/mobile there's no neighbor to match width against, and
     the extra room reads more comfortably for the longer feature lines. */
  .pr-cards { grid-template-columns: minmax(0, 420px); }
  /* Cards stack into a single column below this point, so there's no
     neighbor to align a button row against — let the header size to its
     own content again instead of carrying the 3-column reserved height. */
  .pr-card-header { min-height: 0; }
}

@media (max-width: 820px) {
  /* Listed with the .pricing-page prefix as well so this matches the
     specificity of the desktop ".pricing-page .pr-hero" override and
     still wins here — a bare .pr-hero would lose to it on the pricing
     page and leave phones with the desktop band. */
  .pr-hero,
  .pricing-page .pr-hero { min-height: 200px; padding: 36px 24px 32px; }
  .pr-plans { padding: 24px 0 72px; }
  .pr-toggle-wrap { margin-bottom: 20px; }
  .pr-brands { padding: 48px 0 0; }
  .pr-trust { padding: 64px 0; }
}

@media (max-width: 520px) {
  .pr-card { padding: 28px 20px; gap: 24px; }
  .pr-toggle-btn { padding: 8px 12px; font-size: 14px; }
  /* index.css's shared .email-field has a hardcoded min-width:320px —
     harmless on index.html, where this "Request a call-back" form is
     hidden (.footer-callback.is-hidden), but this page actually shows
     it, and that floor doesn't fit inside the container's padded width
     on a 320px-wide phone, overflowing the whole footer grid by ~28px.
     Scoped here (not in index.css) since the homepage never renders
     this form at all.

     Simply zeroing the min-width isn't enough: .footer-callback's own
     flex-wrap was only ever triggering (pushing the field onto its own
     line, below the "Request a call-back" heading) because that 320px
     floor didn't fit next to the heading — remove it with nothing else
     changed and the field just shrinks to near-nothing on the SAME row
     as the heading instead of wrapping, squeezing the input to a few
     px. flex-basis:100% fixes that at the root: the field always wants
     the whole row, so it reliably wraps onto its own line and fills it
     cleanly, independent of exactly how wide the heading text is. */
  .footer-callback .email-field { flex: 1 1 100%; min-width: 0; }
  .footer-callback .email-field input { min-width: 0; }
}


/* same slim logo band as the homepage strip */
.pr-brands .pr-brands-marquee { padding: 3px 0; }

/* =========================================================
   2026-10 refresh: aligned with the homepage, solution, and About pages.
   Compact left-aligned hero with the shared photo grading, normalized
   card radii and buttons, a quieter logo strip, and a pale 2x2
   buyer-confidence section in place of the dark "Designed for Trust" band.
   All scoped to body.pr-page (the pricing page only); Signup-page.html shares
   .pricing-page and keeps its own hero and cards.
   ========================================================= */
.pr-page .pr-hero { min-height: 0; padding: 26px var(--gutter) 30px; justify-content: center; text-align: left; }
.pr-page .pr-hero-inner { width: 100%; max-width: calc(var(--container) - 2 * var(--gutter)); }
.pr-page .pr-hero::before { filter: brightness(1.12) saturate(1.02) contrast(1.04); }
/* teal and slate grade over the whole band, darker only behind the copy on the left */
.pr-page .pr-hero::after {
  background:
    linear-gradient(90deg, rgba(3, 26, 30, 0.74) 0%, rgba(3, 26, 30, 0.52) 32%, rgba(3, 26, 30, 0.14) 60%, rgba(3, 26, 30, 0) 78%),
    rgba(20, 52, 57, 0.22);
}
.pr-page .pr-hero h1 { font-size: clamp(28px, 2.6vw, 38px); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; text-shadow: 0 1px 18px rgba(3, 26, 30, 0.5); }
.pr-page .pr-hero h1 .accent { color: var(--amber); }
.pr-page .pr-hero p { margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 14px rgba(3, 26, 30, 0.5); }
.pr-page .pr-plans { padding-top: 28px; }

/* cards: the site's 12px panels, light edge, 6px buttons */
.pr-page .pr-card { border-radius: 12px; border-color: #e3ebec; box-shadow: 0 1px 3px rgba(8, 26, 28, 0.04); }
.pr-page .pr-card-cta { border-radius: 6px; font-size: 15px; font-weight: 500; }

/* logo strip: social proof, not a second hero */
.pr-page .pr-brands { padding: 40px 0 44px; }

/* buyer confidence */
.pr-conf { padding: clamp(48px, 5vw, 72px) 0; background: #eef5f5; border-top: 1px solid #e3ebec; }
.pr-conf-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px clamp(32px, 5vw, 72px); align-items: end; }
.pr-conf h2 { margin: 0; font-size: clamp(26px, 2.6vw, 38px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #1f2d2f; text-wrap: balance; }
.pr-conf-head p { max-width: 520px; margin: 0; font-size: 17px; line-height: 1.6; color: var(--body); }
.pr-conf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: clamp(24px, 2.8vw, 36px) 0 0; padding: 0; list-style: none; }
.pr-conf-grid li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 16px 24px; align-items: center; padding: 20px 22px; border: 1px solid #dfe8e9; border-radius: 8px; background: #fff; }
.pr-conf-no { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--amber); }
.pr-conf-grid h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; line-height: 1.3; color: #1f2d2f; }
.pr-conf-grid p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
/* product-derived fragments (the same language as the About principles) */
.pr-conf .pf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px; border-radius: 8px; background: #f7fafa; border: 1px solid #edf2f2; font-size: 12.5px; color: #374151; }
.pr-conf .pf:has(.pf-arrow) { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; }
.pr-conf .pf-node { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 7px; border: 1px solid #dfe8e9; background: #fff; font-weight: 500; white-space: nowrap; }
.pr-conf .pf-node.is-key { border-color: color-mix(in srgb, var(--teal) 45%, #dfe8e9); color: var(--teal-dark); }
.pr-conf .pf-node.is-warm { border-color: #f1d9ad; background: #fffaf1; color: #6b4a0e; }
.pr-conf .pf-ref { display: inline-grid; place-items: center; min-width: 16px; height: 16px; border-radius: 4px; background: #e3eff0; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--teal-dark); }
.pr-conf .pf-arrow { position: relative; flex: none; width: 2px; height: 10px; margin-left: 14px; background: #c9dcde; }
.pr-conf .pf-arrow::after { content: ""; position: absolute; left: -3px; bottom: -2px; border: 4px solid transparent; border-top: 5px solid #c9dcde; border-bottom: 0; }
.pr-conf .pf-scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pr-conf .pf-scale span { padding: 4px 0; border-radius: 5px; font-size: 12px; font-weight: 700; text-align: center; background: color-mix(in srgb, var(--g) 18%, #fff); color: var(--gd); }
.pr-conf [data-g="AAA"] { --g: #1e8e3e; --gd: #14652b; }
.pr-conf [data-g="AA"] { --g: #34a853; --gd: #1b6e34; }
.pr-conf [data-g="A"] { --g: #81c995; --gd: #2b6a3c; }
.pr-conf [data-g="BBB"] { --g: #fbc02d; --gd: #755300; }
.pr-conf [data-g="BB"] { --g: #f59e0b; --gd: #854800; }
.pr-conf [data-g="B"] { --g: #ef6c00; --gd: #9e3f00; }
.pr-conf [data-g="C"] { --g: #f28b82; --gd: #9c2f27; }
.pr-conf [data-g="D"] { --g: #c62828; --gd: #981b1b; }

@media (max-width: 960px) {
  .pr-conf-head, .pr-conf-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .pr-page .pr-hero { min-height: 0; padding: 24px 24px 26px; }
  .pr-page .pr-hero::after { background: linear-gradient(90deg, rgba(3, 26, 30, 0.72), rgba(3, 26, 30, 0.48)), rgba(20, 52, 57, 0.2); }
}
@media (max-width: 560px) {
  .pr-conf-grid li { grid-template-columns: minmax(0, 1fr); }
}
/* compact the confidence section so it stays well under the pricing in visual weight */
.pr-conf { padding: clamp(40px, 4vw, 56px) 0; }
.pr-conf-grid li { padding: 16px 20px; }
.pr-conf .pf { padding: 10px; gap: 4px; }
.pr-conf .pf-node { padding: 4px 9px; }
.pr-conf .pf-arrow { height: 8px; }
.pr-conf .pf-scale { gap: 5px; }

/* Pricing FAQ: section wrapper only; the accordion is the shared .qa-* component in index.css */
.pr-faq { padding: clamp(56px, 6vw, 88px) 0; background: #fff; border-top: 1px solid #e3ebec; }