/* Page-scoped CSS for bundles.css, lifted verbatim out of the inline <style> block
   bundles.html carried (#7007). A plain file rather than an inline block or a
   .razor.css: the selectors below use sibling and descendant combinators that
   Blazor's CSS isolation rewriter would silently change the meaning of, and a
   file caches while an inline block is re-sent with every page. */

  /* page-local: the bundles page only. Everything visual comes from the design system
     (.rung, .bundle-card, .is-lifted, .segmented, .pill-soon, .faq) — this block is the
     JS-free toggle wiring, plus the two small pieces the system has no class for. */

  .bundles-hero{text-align:center;padding:var(--space-2xl) 0 var(--space-md)}
  .bundles-hero .lede{margin:1rem auto 0;max-width:44rem}

  /* --- the toggles ------------------------------------------------------
     The four radios are DIRECT CHILDREN of #bundles, ahead of everything they
     govern, so plain sibling selectors can reach both the labels and the cards.
     The checked state is in the markup: with JavaScript off the page still
     shows monthly / individual, and every label still switches, because a
     <label for> drives its input with no script at all. */
  .bundles-toggles{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;justify-content:center;
    align-items:center;margin:1.6rem 0 .4rem}
  .toggle-caption{display:none;margin:0 auto;max-width:34rem;text-align:center;
    color:var(--muted);font-size:var(--step--1)}
  .toggle-captions{margin-bottom:2rem}

  #term-monthly:checked  ~ .bundles-toggles label[for="term-monthly"],
  #term-yearly:checked   ~ .bundles-toggles label[for="term-yearly"],
  #buyer-me:checked      ~ .bundles-toggles label[for="buyer-me"],
  #buyer-company:checked ~ .bundles-toggles label[for="buyer-company"]{
    color:var(--text-on-accent);background:var(--accent);font-weight:var(--weight-heading)}

  #term-monthly:focus-visible  ~ .bundles-toggles label[for="term-monthly"],
  #term-yearly:focus-visible   ~ .bundles-toggles label[for="term-yearly"],
  #buyer-me:focus-visible      ~ .bundles-toggles label[for="buyer-me"],
  #buyer-company:focus-visible ~ .bundles-toggles label[for="buyer-company"]{
    outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}

  #term-yearly:checked   ~ .toggle-captions [data-cap="yearly"],
  #buyer-company:checked ~ .toggle-captions [data-cap="company"]{display:block}

  /* --- one price line at a time ------------------------------------------
     #6861: never two cadences at once. Exactly one .bundle-price per card is
     displayed, chosen by the pair of radios. */
  .bundle-price{display:none}
  #term-monthly:checked ~ #buyer-me:checked      ~ .rungs [data-price="monthly-individual"],
  #term-yearly:checked  ~ #buyer-me:checked      ~ .rungs [data-price="yearly-individual"],
  #term-monthly:checked ~ #buyer-company:checked ~ .rungs [data-price="monthly-company"],
  #term-yearly:checked  ~ #buyer-company:checked ~ .rungs [data-price="yearly-company"],
  #buyer-me:checked      ~ .rungs [data-price="free"],
  #buyer-company:checked ~ .rungs [data-price="minimal-company"]{display:flex}

  /* Minimal is not sold to companies: the card loses its button rather than
     showing a disabled one that says Free, which would read as a fault. */
  #buyer-company:checked ~ .rungs #bundle-minimal .bundle-cta{display:none}

  .bundle-what{list-style:none;margin:var(--space-xs) 0 0;padding:0;
    display:flex;flex-direction:column;gap:.5rem}
  .bundle-what li{position:relative;padding-left:1.15rem;font-size:var(--step--1);
    color:var(--text);line-height:1.5}
  .bundle-what li::before{content:"›";position:absolute;left:0;top:0;color:var(--accent);
    font-weight:var(--weight-strong)}
  .bundle-soon{margin:var(--space-xs) 0 0;font-size:var(--step--2);color:var(--muted)}
  .bundle-name{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}

  /* A rung holding one card keeps that card the width of a card, rather than
     stretching it across the row. auto-fill leaves the empty tracks in place. */
  .rung-grid.is-solo{grid-template-columns:minmax(0,32rem)}

  .fine{max-width:var(--content-narrow);margin:0 auto;display:flex;flex-direction:column;gap:.9rem}
  .fine p{margin:0;color:var(--muted);font-size:var(--step--1)}
  .fine b{color:var(--text-strong)}

  .faq-head{max-width:var(--content-narrow);margin:0 auto var(--space-md);text-align:center}

  /* ======================================================================
     THE GRANT MAP (#7027) — every add-on, and the bundles that grant it.

     The list is complete and legible on its own: each chip names its own
     bundles, so with no JavaScript this section answers the question in full.
     assets/lp-bundles.js only points — hovering, focusing or clicking a bundle
     card up the page brings its chips forward and lets the rest recede to .45,
     which is a de-emphasis, never a disappearance.
     ====================================================================== */
  .grant-map{margin:var(--space-2xl) 0 0}
  .grant-map h2{margin-bottom:var(--space-md)}
  .grant-list{list-style:none;margin:0;padding:0;display:grid;
    grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.6rem}
  .grant-chip{border:1px solid var(--border);border-radius:var(--radius-md);
    background:var(--surface);padding:.6rem .8rem;
    transition:opacity var(--duration-medium) var(--easing),
      border-color var(--duration-medium) var(--easing),
      background-color var(--duration-medium) var(--easing),
      transform var(--duration-medium) var(--easing)}
  .grant-name{display:block;color:var(--text-strong);font-size:var(--step-0)}
  .grant-in{display:block;margin-top:.15rem;color:var(--muted);font-size:var(--step--2);
    font-family:var(--mono)}
  .grant-chip.is-granted{border-color:var(--accent);background:var(--accent-soft);
    transform:translateY(-2px)}
  .grant-chip.is-granted .grant-name{color:var(--accent)}
  .grant-chip.is-aside{opacity:.4}
  /* the card being asked about keeps its own accent while it is answering */
  .bundle-card.is-asking{border-color:var(--accent)}

  @media (prefers-reduced-motion: reduce){
    .grant-chip{transition:none}
    .grant-chip.is-granted{transform:none}
  }