/* ============================================================================
   The add-on pages — landingpage/packs.html and landingpage/packs/*.html (#6895).

   Layered on top of saascade.css: every colour, space, radius and step comes
   from a token there and none is redefined here. The file name stays `packs`
   because the URLs stay `packs/` until the port (#6928); the pages themselves
   say "add-ons", which is what the app says (LicencedAddons.cs, BundleCatalog.cs).
   ========================================================================== */

/* ---- breadcrumb ----------------------------------------------------------- */
.crumb{padding-top:1.4rem;font-size:var(--step--1);color:var(--muted)}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--text-strong)}

/* ---- add-on page hero ----------------------------------------------------- */
.addon-hero{padding:3rem 0 1rem}
.addon-hero .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr);
  gap:var(--space-lg);align-items:center}
.addon-hero h1{margin:var(--space-sm) 0 var(--space-xs)}
.addon-hero .lede{margin-bottom:var(--space-sm)}
.addon-status{margin:0 0 var(--space-md)}
.addon-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.addon-mark{justify-self:center;width:7rem;height:7rem;border-radius:var(--radius-xl);
  display:grid;place-items:center;font-size:3.4rem;line-height:1;
  background:linear-gradient(135deg,var(--accent-soft),var(--surface-strong));
  border:1px solid var(--border-strong);box-shadow:0 0 30px var(--accent-glow)}
@media (max-width:760px){
  .addon-hero .wrap{grid-template-columns:1fr}
  .addon-mark{justify-self:start;width:4.5rem;height:4.5rem;font-size:2.2rem;order:-1}
}

/* a quieter band, so the sections alternate without a second palette */
.addon-band{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* ---- "three things you can do" -------------------------------------------- */
.things{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.1rem}
.thing{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem}
.thing .num{display:inline-block;font-family:var(--mono);font-size:var(--font-size-mono);
  color:var(--accent);letter-spacing:.1em;margin-bottom:.4rem}
.thing h3{margin-bottom:.4rem}
.thing p{color:var(--muted);margin:0}

.note-card{margin:1.6rem auto 0;padding:1rem 1.2rem;border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--surface);color:var(--muted);max-width:var(--measure)}

/* ---- bundle chips --------------------------------------------------------- */
.bundle-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.bundle-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--step--1);
  font-weight:var(--weight-label);color:var(--text);background:var(--surface);
  border:1px solid var(--border);padding:.4rem .8rem;border-radius:var(--pill)}
.bundle-chip:hover{color:var(--text-strong);background:var(--surface-strong);border-color:var(--accent)}
.chip-note{color:var(--muted);font-weight:var(--weight-body);font-size:var(--step--2)}
.bundles-note{margin-top:var(--space-sm)}

/* ---- "ships, you switch it on" and "coming soon" lists --------------------- */
.statelist{list-style:none;margin:0 auto;padding:0;max-width:var(--measure);
  display:flex;flex-direction:column;gap:.7rem}
.statelist li{display:block;color:var(--muted);padding-left:1.1rem;position:relative}
.statelist li::before{content:"\2022";position:absolute;left:0;color:var(--accent);font-weight:800}
.statelist li .pill{margin-right:.4rem}

/* ---- closing block -------------------------------------------------------- */
.addon-foot{border:1px solid var(--accent);border-radius:var(--radius-xl);padding:2.2rem;text-align:center;
  background:var(--surface);box-shadow:0 0 0 1px var(--accent-glow)}
.addon-foot h2{font-size:var(--step-3)}
.addon-foot p{max-width:var(--measure);margin:0 auto var(--space-md)}
.addon-foot .addon-cta{justify-content:center}

/* ---- the index page (packs.html) ------------------------------------------ */
.addon-index-hero{text-align:center;padding:3.5rem 0 1rem}
.addon-index-hero .lede{margin:1.1rem auto 0}

.ess{display:block;margin-top:2.5rem;padding:2rem;color:var(--text);
  border:1px solid var(--accent);border-radius:var(--radius-xl);background:var(--surface);
  box-shadow:0 0 0 1px var(--accent-glow)}
.ess:hover{color:var(--text);border-color:var(--accent-secondary)}
.ess-head{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  margin-bottom:var(--space-sm)}
.ess-head .t{display:flex;gap:.9rem;align-items:center}
.ess-head .ico{flex:none;width:3rem;height:3rem;border-radius:var(--radius-md);display:grid;place-items:center;
  font-size:1.5rem;background:linear-gradient(135deg,var(--accent-soft),var(--surface-strong));
  border:1px solid var(--border-strong)}
.ess-head h2{font-size:var(--step-3);margin:0}
.ess-head .who{color:var(--muted);font-size:var(--step--1);margin:.1rem 0 0}
.ess .go, .addon-card .go{display:inline-block;margin-top:var(--space-sm);color:var(--accent);
  font-weight:var(--weight-label);font-size:var(--step--1)}

.addon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1.1rem}
.addon-card{display:flex;flex-direction:column;color:var(--text)}
.addon-card:hover{color:var(--text);border-color:var(--accent)}
.addon-card .ico{width:2.8rem;height:2.8rem;border-radius:var(--radius-md);display:grid;place-items:center;
  font-size:1.4rem;margin-bottom:.9rem;
  background:linear-gradient(135deg,var(--accent-soft),var(--surface-strong));border:1px solid var(--border)}
.addon-card h3{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.4rem}
.addon-card .who{color:var(--muted);font-size:var(--step--1);margin:0 0 1rem}
.addon-card .in-bundles{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--border)}
.addon-card .in-bundles b{display:block;color:var(--text-strong);font-size:var(--step--2);
  font-weight:var(--weight-strong);letter-spacing:var(--tracking-label);text-transform:uppercase;
  margin-bottom:.45rem}
.addon-card .bundle-chip{padding:.25rem .6rem;font-size:var(--step--2)}

/* The section head is centred, so what follows it lines up under it. */
.addon-band .bundle-chips{justify-content:center}
.section .bundles-note{margin-left:auto;margin-right:auto;text-align:center}
.section > .wrap > .muted.measure{margin-left:auto;margin-right:auto;text-align:center}

.note{max-width:var(--measure);margin:2rem auto 0;text-align:center;font-size:var(--step--1)}
.index-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:2.5rem}