/* All IT's client-facing look, taken from allitservices.com.au (session 3, 3 Oct 2026; docs/brand.md).
 *
 * What the website does, and so what this does: League Spartan headings in navy, small spaced capitals over them
 * (the "eyebrow"), the navy-to-blue gradient, mint used sparingly — a rule, a mark, an icon, a button — and navy tiles
 * holding a mint line icon.
 *
 * Every class is namespaced (b-…), so this file can sit beside any page's own styles without changing anything else on
 * them: the portal, the console's previews of what a client sees, meeting mode's client screen, and the printed review
 * (which copies the page's stylesheets). Colours are the page's tokens with the website's values as their fallbacks, so
 * a page without those tokens still draws correctly, and dark mode (theme.css) re-colours all of it. The two gradients
 * (--hero-grad, --signature) are tokens on both pages' :root; without them a hero is plain navy and the rule is absent.
 *
 * Mint is never text on white: it is 1.5:1 there. On white, "mint" text is --mint-ink, the website's green.
 */

/* ------------------------------------------------------------------ type */
.b-eyebrow { display:block; margin:0 0 .45rem; font:700 .72rem/1.3 var(--body-font, "DM Sans", system-ui, sans-serif);
  letter-spacing:.16em; text-transform:uppercase; color:var(--eyebrow, #23519e); }
/* The website's short mint rule before a heading's eyebrow. Decorative. */
.b-eyebrow.b-ruled::before { content:""; display:inline-block; vertical-align:middle; width:1.75rem; height:2px; margin:0 .6rem .18rem 0;
  border-radius:2px; background:var(--brand-mint, #00f1b6); }

/* A page's own title, under the name of the area it is in. */
.b-pagehead { margin:.4rem 0 1.15rem; }
.b-pagehead h1 { margin:0; font-size:2.05rem; line-height:1.1; }
.b-pagehead p { margin:.5rem 0 0; color:var(--muted, #6d6e71); max-width:44rem; }

/* ------------------------------------------------------------------ icons */
/* The website's service-card tile: a navy rounded square with a mint line icon (the icons are in icons.mjs). */
.b-icon { flex:0 0 auto; display:inline-grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:10px;
  background:var(--tile-bg, #0b3777); color:var(--brand-mint, #00f1b6); }
.b-icon svg { display:block; width:1.25rem; height:1.25rem; }
.b-icon.b-sm { width:2.05rem; height:2.05rem; border-radius:8px; }
.b-icon.b-sm svg { width:1.05rem; height:1.05rem; }
/* A heading with its tile beside it. */
.b-titled { display:flex; align-items:center; gap:.7rem; margin:0 0 .6rem; }
div.b-titled > h2, div.b-titled > h3 { margin:0; }

/* ------------------------------------------------------------------ the hero */
/* The website's gradient, its mint eyebrow, and the logo's circle drawn large and faint in the corner. */
.b-hero { position:relative; overflow:hidden; isolation:isolate; display:flex; flex-wrap:wrap; gap:1.2rem 2rem; align-items:flex-end;
  justify-content:space-between; margin:0 0 1rem; padding:1.95rem 2.05rem; border-radius:16px; color:var(--on-dark, #fff);
  background:var(--navy-solid, #0b3777); background-image:var(--hero-grad, none);
  box-shadow:var(--shadow-card, 0 1px 2px rgba(11,55,119,.05), 0 10px 28px -18px rgba(11,55,119,.28)); }
.b-hero::before, .b-hero::after { content:""; position:absolute; z-index:-1; border-radius:50%; pointer-events:none; }
.b-hero::before { width:20rem; height:20rem; right:-9rem; top:-12.5rem; border:2px solid rgba(0,241,182,.26); }
.b-hero::after { width:30rem; height:30rem; left:-14rem; bottom:-24rem; border:2px solid rgba(255,255,255,.07); }
.b-hero h1, .b-hero h2 { margin:0; color:var(--on-dark, #fff); }
.b-hero h1 { font-size:2.35rem; line-height:1.08; }
.b-hero p { margin:.5rem 0 0; color:rgba(255,255,255,.86); }
.b-hero .b-eyebrow { color:var(--brand-mint, #00f1b6); }
.b-hero .b-meta { margin-top:.55rem; font-size:.88rem; color:rgba(255,255,255,.74); }
.b-hero-main { flex:1 1 20rem; min-width:0; }
.b-hero button.link, .b-hero .b-back { color:rgba(255,255,255,.86); }
.b-back { display:inline-block; margin:0 0 .9rem; font:inherit; font-size:.88rem; font-weight:600; border:0; background:none; padding:0; cursor:pointer; }
.b-back:hover { color:var(--on-dark, #fff); text-decoration:underline; }

/* A person — the client's Relationship Manager — in the hero, or at the head of their messages. */
.b-person { display:flex; align-items:center; gap:.75rem; padding:.7rem .95rem; border-radius:12px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); }
.b-person > div { min-width:0; }
.b-person > div > b { display:block; font-family:var(--heading-font, "League Spartan", system-ui, sans-serif); font-weight:700; color:var(--on-dark, #fff); }
.b-person > div > span { display:block; font-size:.82rem; color:rgba(255,255,255,.78); }
.b-person button, .b-person .b-mail { margin-left:.35rem; }
.b-person .b-mail { color:var(--brand-mint, #00f1b6); font-weight:700; white-space:nowrap; }
/* The mint button, smaller, where it sits beside a name. */
button.cta.b-small, button.primary.b-small { padding:.5rem 1.05rem; font-size:.88rem; }
.b-avatar { flex:0 0 auto; display:inline-grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%;
  background:var(--brand-mint, #00f1b6); color:var(--navy-solid, #0b3777);
  font:800 .95rem/1 var(--heading-font, "League Spartan", system-ui, sans-serif); letter-spacing:.02em; }

/* ------------------------------------------------------------------ rows, figures and callouts */
/* A line of a summary, with its tile: Home's "How things stand". */
.b-status { display:flex; gap:.9rem; align-items:flex-start; padding:.85rem 0; border-top:1px solid var(--line, #e3e6ea); }
.b-status.b-first { border-top:0; padding-top:.35rem; }
.b-status-body { flex:1; min-width:0; }
.b-status-head { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .6rem; margin-bottom:.12rem; }
.b-status-head b { font-family:var(--heading-font, "League Spartan", system-ui, sans-serif); font-size:1.04rem; font-weight:700; color:var(--heading, #0b3777); }

/* "See more →": the website's "Explore … →". The arrow is decoration, so a screen reader is not told about it. */
.b-more { font:inherit; font-weight:700; color:var(--link, var(--brand, #23519e)); background:none; border:0; padding:.15rem 0; cursor:pointer; white-space:nowrap; }
.b-more::after { content:" \2192"; content:" \2192" / ""; }
.b-more:hover { text-decoration:underline; }

/* The website's mint-tint card, with the mint rule down its side. */
.b-callout { background:var(--mint-tint, #f0faf6); border-left:4px solid var(--brand-mint, #00f1b6); border-radius:10px; padding:.85rem 1.05rem; color:var(--text, #4a4d52); }

/* Headline figures. */
.b-figures { display:grid; grid-template-columns:repeat(auto-fit, minmax(10.5rem, 1fr)); gap:.75rem; }
.b-figure { border:1px solid var(--line, #e3e6ea); border-radius:12px; padding:.85rem 1rem .9rem; background:var(--card, #fff); }
.b-figure .b-label { display:block; font-size:.7rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted, #6d6e71); }
.b-figure .b-value { display:block; margin:.3rem 0 .15rem; font:800 1.6rem/1.1 var(--heading-font, "League Spartan", system-ui, sans-serif);
  letter-spacing:-.01em; color:var(--heading, #0b3777); }
.b-figure .b-sub { display:block; font-size:.84rem; color:var(--muted, #6d6e71); }

/* ------------------------------------------------------------------ the navy band */
/* The website's call to action: navy, with its mint-blue-mint rule along the top. */
.b-band { position:relative; overflow:hidden; margin:0 0 1rem; padding:1.7rem 1.85rem 1.55rem; border-radius:16px;
  color:rgba(255,255,255,.88); background:var(--navy-solid, #0b3777); }
.b-band::before { content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:var(--signature, none); }
.b-band h2 { margin:.1rem 0 .45rem; color:var(--on-dark, #fff); }
.b-band p { margin:.35rem 0; }
.b-band .b-eyebrow { color:var(--brand-mint, #00f1b6); }
.b-band a { color:var(--brand-mint, #00f1b6); }
.b-band .b-quiet { color:rgba(255,255,255,.72); font-size:.88rem; }

/* ------------------------------------------------------------------ the page's foot */
/* The website's footer, in three columns: the brand, the support line, the support hours. */
.b-foot { display:grid; grid-template-columns:minmax(14rem, 1.4fr) auto auto; gap:1.2rem 3.2rem; align-items:start;
  padding:1.6rem 1.4rem 1.75rem; background:var(--foot-bg, #222429); color:rgba(255,255,255,.74); font-size:.86rem; }
.b-foot img { display:block; height:26px; width:auto; }
.b-foot a { color:var(--on-dark, #fff); font-weight:600; }
.b-foot-brand p { margin:.65rem 0 .3rem; }
.b-foot-col { display:flex; flex-direction:column; gap:.18rem; }
.b-foot-label { margin-bottom:.25rem; font:700 .68rem/1.3 var(--body-font, "DM Sans", system-ui, sans-serif); letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-mint, #00f1b6); }
.b-foot a.b-foot-phone { font:800 1.4rem/1.15 var(--heading-font, "League Spartan", system-ui, sans-serif); letter-spacing:.01em; text-decoration:none; }
.b-foot a.b-foot-phone:hover { text-decoration:underline; }
.b-foot-note { margin-top:.2rem; font-size:.8rem; color:rgba(255,255,255,.58); }

/* The support line on the navy band: the website's outlined button, the mint rule round it. */
.b-band a.b-call { display:inline-flex; align-items:center; padding:.72rem 1.5rem; border-radius:999px; border:2px solid var(--brand-mint, #00f1b6);
  color:var(--mint-tint, #f0faf6); font-weight:700; text-decoration:none; white-space:nowrap; transition:background .15s; }
.b-band a.b-call:hover { background:rgba(255,255,255,.1); }

/* ------------------------------------------------------------------ the sign-in screens */
/* Navy, as the website's hero is, with the logo's circle; the card holds the words. */
.b-gate { position:relative; overflow:hidden; isolation:isolate; min-height:100vh; display:grid; place-items:center; padding:2.5rem 1rem 3rem;
  background:var(--navy-solid, #0b3777); background-image:var(--hero-grad, none); }
.b-gate::before, .b-gate::after { content:""; position:absolute; z-index:-1; border-radius:50%; pointer-events:none; }
.b-gate::before { width:42rem; height:42rem; right:-16rem; top:-18rem; border:2px solid rgba(0,241,182,.2); }
.b-gate::after { width:26rem; height:26rem; left:-11rem; bottom:-14rem; border:2px solid rgba(255,255,255,.08); }
.b-gate-inner { width:100%; max-width:440px; text-align:center; }
.b-gate-logo { display:block; height:56px; width:auto; margin:0 auto 1.7rem; }
.b-gate-foot { margin:1.4rem 0 0; color:rgba(255,255,255,.78); font-size:.9rem; }
.b-gate-foot a { color:var(--on-dark, #fff); font-weight:700; white-space:nowrap; }

/* ------------------------------------------------------------------ phones */
@media (max-width: 560px) {
  .b-hero { padding:1.45rem 1.25rem; border-radius:14px; }
  .b-hero h1 { font-size:1.9rem; }
  .b-pagehead h1 { font-size:1.65rem; }
  .b-band { padding:1.4rem 1.25rem 1.3rem; border-radius:14px; }
  .b-status { gap:.75rem; flex-wrap:wrap; }
  .b-status > .b-more { flex-basis:100%; padding-left:3.25rem; text-align:left; }
  .b-person { width:100%; flex-wrap:wrap; }
  .b-person > div { flex:1 1 9rem; }
  .b-person button, .b-person .b-mail { margin-left:0; flex:1 0 100%; text-align:center; }
}
@media (max-width: 760px) { .b-foot { grid-template-columns:1fr; gap:1.15rem; } }

/* ------------------------------------------------------------------ marks */
/* A state, as a round badge: "Your security at a glance" and anything like it. The words beside it carry the state. */
.b-mark { flex:0 0 auto; display:inline-grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%; margin-top:.05rem;
  font-weight:800; font-size:.86rem; line-height:1; background:var(--surface-2, #f1f3f6); color:var(--muted, #6d6e71); }
.b-mark.ok { background:var(--ok-bg, #e6f6ee); color:var(--ok-ink, #1c6b4b); }
.b-mark.bad { background:var(--bad-bg, #fbeaea); color:var(--bad-ink, #95393b); }
.b-mark.warn { background:var(--warn-bg, #fdf3df); color:var(--warn-ink, #8a6524); }