/* /Components/Nbn/NbnPlanGrid.razor.rz.scp.css */
/* Scoped styles for the NBN plan cards - keeps price presentation out of the global stylesheet.
   Moved here from Nbn.razor.css when the plan markup became a shared component used by both
   the home and business pages. */
.nbn-plan[b-an6xicnfhr] { display: flex; flex-direction: column; }
.nbn-plan__price[b-an6xicnfhr] {
  font-size: 1.85rem; font-weight: 800; color: var(--ink-900);
  letter-spacing: -.02em; margin-bottom: var(--sp-2);
}
/* "ex GST" sits next to the figure, not in a footnote (catalogue FR4.4). */
.nbn-plan__gst[b-an6xicnfhr] {
  font-size: .8rem; font-weight: 600; color: var(--ink-600);
  letter-spacing: 0; margin-left: var(--sp-1);
}
/* A plan whose GST cannot be calculated shows no figure at all rather than an understated one. */
.nbn-plan__price--none[b-an6xicnfhr] { font-size: 1.35rem; color: var(--ink-600); }
.nbn-plan .btn[b-an6xicnfhr] { margin-top: auto; align-self: flex-start; }
/* /Components/Pages/DesignSystem.razor.rz.scp.css */
/* Scoped styles for the design-system reference page only (CSS isolation) - keeps the .razor
   free of inline styles (brief FR-C7 / acceptance) while still demonstrating token values. */

.ds-row[b-8h9h86kgs3] { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-4); }
.ds-row--center[b-8h9h86kgs3] { align-items: center; }
.ds-form[b-8h9h86kgs3] { max-width: 480px; }

.ds-swatches[b-8h9h86kgs3] { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-4); }
.ds-swatch[b-8h9h86kgs3] { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); }
.ds-swatch__chip[b-8h9h86kgs3] {
  width: 40px; height: 40px; border-radius: var(--r-md);
  border: 1px solid var(--line); flex: 0 0 auto;
}

/* One class per token so the swatch background is the datum, with no inline style. */
.ds-chip--teal-500[b-8h9h86kgs3] { background: var(--teal-500); }
.ds-chip--teal-600[b-8h9h86kgs3] { background: var(--teal-600); }
.ds-chip--teal-300[b-8h9h86kgs3] { background: var(--teal-300); }
.ds-chip--lime-500[b-8h9h86kgs3] { background: var(--lime-500); }
.ds-chip--lime-600[b-8h9h86kgs3] { background: var(--lime-600); }
.ds-chip--brand-gradient[b-8h9h86kgs3] { background: var(--brand-gradient); }
.ds-chip--ink-900[b-8h9h86kgs3] { background: var(--ink-900); }
.ds-chip--ink-700[b-8h9h86kgs3] { background: var(--ink-700); }
.ds-chip--ink-500[b-8h9h86kgs3] { background: var(--ink-500); }
.ds-chip--surface-2[b-8h9h86kgs3] { background: var(--surface-2); }
.ds-chip--dk-bg[b-8h9h86kgs3] { background: var(--dk-bg); }
.ds-chip--dk-card[b-8h9h86kgs3] { background: var(--dk-card); }
.ds-chip--sev-red-text[b-8h9h86kgs3] { background: var(--sev-red-text); }
.ds-chip--sev-amber-text[b-8h9h86kgs3] { background: var(--sev-amber-text); }
.ds-chip--sev-green-text[b-8h9h86kgs3] { background: var(--sev-green-text); }
.ds-chip--sev-info-text[b-8h9h86kgs3] { background: var(--sev-info-text); }

.ds-t-display[b-8h9h86kgs3] { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 800; margin: 0 0 var(--sp-2); }
.ds-t-h1[b-8h9h86kgs3] { font-size: var(--fs-h1); font-weight: 800; margin: 0 0 var(--sp-2); }
.ds-t-h2[b-8h9h86kgs3] { font-size: var(--fs-h2); font-weight: 800; margin: 0 0 var(--sp-2); }
.ds-t-h3[b-8h9h86kgs3] { font-size: var(--fs-h3); font-weight: 800; margin: 0 0 var(--sp-2); }
.ds-t-body[b-8h9h86kgs3] { font-size: var(--fs-body); margin: 0 0 var(--sp-2); }
.ds-t-sm[b-8h9h86kgs3] { font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.ds-t-xs[b-8h9h86kgs3] { font-size: var(--fs-xs); margin: 0; }
/* /Components/Pages/Monder.razor.rz.scp.css */
/* Scoped to the Monder page - the platform screenshot frame. */
.monder-shot[b-z1gsai27hl] {
  width: 100%; height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--sp-8);
}