/* Support — the layer the support section shares.
   The hub, the three role pages and the homepage's support block all read from
   here: the role cards a visitor recognises themselves in, the workflow that
   runs across a page, the compact tiles that list who a page is for, and the
   question a page answers. Every value comes from assets/css/tokens.css.
   The homepage uses the same classes, because its support block is this same
   component with three cards instead of four. */

/* -------------------------------------------------------- Role cards -- */
.support-roles{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.support-roles--three{grid-template-columns:repeat(3,1fr)}
.role-card{display:flex;flex-direction:column;padding:28px 26px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}
.role-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-float)}
.role-card__meta{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
.role-card__title{margin:0;font-size:20px;line-height:1.3;color:var(--color-heading)}
.role-card__body{margin:14px 0 0;font-size:15px;color:var(--color-muted)}
.role-card__for{margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--color-line);list-style:none;font-size:13.5px;color:var(--color-muted)}
.role-card__for li{margin:0 0 7px}
.role-card__for li:last-child{margin-bottom:0}
.role-card__for li::before{content:"";display:inline-block;width:5px;height:5px;margin-right:9px;background:var(--color-sun);vertical-align:middle}
.role-card__link{display:inline-flex;align-items:center;gap:9px;margin-top:auto;padding-top:24px;font-size:14px;font-weight:600;text-decoration:none}
.role-card__link:hover{text-decoration:underline;text-underline-offset:4px}
.role-card__badge{align-self:flex-start;margin:0 0 14px;padding:4px 10px;background:var(--color-sun);border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-navy)}

/* The one card that carries the page's main customer: same component, tinted
   and outlined, so it reads first without shouting over the other two. */
.role-card--feature{background:var(--color-accent-pale);border-color:var(--color-accent);box-shadow:0 18px 40px rgba(21,89,166,.1)}
.role-card--feature .role-card__meta{color:var(--color-accent)}
.role-card--feature .role-card__for{border-top-color:rgba(21,89,166,.24)}
.role-card--feature .role-card__title{color:var(--color-accent-dark)}

/* ----------------------------------------------------------- Workflow -- */
/* The stages a page works through, in the order they happen. A grid rather
   than a row, so nine stages read as three rows of three instead of shrinking
   into unreadable columns. */
.wflow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0;padding:0;list-style:none}
.wflow--four{grid-template-columns:repeat(4,1fr)}
.wflow--five{grid-template-columns:repeat(5,1fr)}
.wflow__stage{padding:18px 20px;background:var(--color-surface);border:1px solid var(--color-line);border-left:3px solid var(--color-accent);border-radius:var(--radius-sm)}
.wflow__num{display:block;margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.1em;font-variant-numeric:tabular-nums;color:var(--color-accent)}
.wflow__label{display:block;font-size:15px;font-weight:600;line-height:1.35;color:var(--color-heading)}
.wflow__note{display:block;margin:7px 0 0;font-size:13px;color:var(--color-muted)}

/* Inside a navy band the same diagram takes the band's own colours. */
.section--navy .wflow__stage{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);border-left-color:var(--color-sun)}
.section--navy .wflow__num{color:var(--color-sun)}
.section--navy .wflow__label{color:#fff}
.section--navy .wflow__note{color:#c4d3e0}

/* -------------------------------------------------------------- Tiles -- */
/* Who a page is for, and what each of them arrives with. One hairline between
   the tiles rather than a card each, so four of them read as one block. */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--color-line);border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden}
.tiles--three{grid-template-columns:repeat(3,1fr)}
.tiles__item{padding:22px 20px;background:var(--color-surface)}
.tiles__item h3{margin:0;font-size:16px}
.tiles__item p{margin:10px 0 0;font-size:13.5px;color:var(--color-muted)}

/* ----------------------------------------------------- Question block -- */
/* The question the page exists to answer, in the visitor's own words. */
.support-question{margin:0 0 32px;padding:24px 28px;background:var(--color-accent-pale);border-left:3px solid var(--color-accent);border-radius:0 var(--radius-md) var(--radius-md) 0;font-size:19px;font-weight:600;line-height:1.45;color:var(--color-navy)}
.support-question span{display:block;margin:10px 0 0;font-size:15px;font-weight:400;color:var(--color-muted)}

/* --------------------------------------------------------- Responsive -- */
@media(max-width:1180px){
  .support-roles{grid-template-columns:repeat(2,1fr)}
  .wflow--four,.wflow--five{grid-template-columns:repeat(3,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .support-roles--three{grid-template-columns:repeat(2,1fr)}
  .wflow{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .support-roles,.support-roles--three,.wflow,.wflow--four,.wflow--five,.tiles,.tiles--three{grid-template-columns:1fr}
  .support-question{padding:20px 22px;font-size:17px}
}