/* Sectioned-page controls: FcsPageHero / FcsPageSection / FcsLinkButton / FcsDetailList
 * (FCSSite.Client/Controls/Ui — the client half renders them too) and FcsCardGrid /
 * FcsFeatureCard / FcsProductCard / FcsLineItemTable / FcsSummaryTotals (Components/Controls/Ui).
 *
 * Same theming rules as blog.css:
 *  · surfaces derive from --rz-base-background-color mixed toward --rz-text-color — those two
 *    invert with the theme, the --rz-base-100..300 ramp and the --rz-on-* inks do NOT;
 *  · --rz-border-normal is a BORDER SHORTHAND (`width solid colour`), so it is used whole;
 *  · no hex literals — every colour is a Radzen custom property or a color-mix of them. */

/* A sectioned page owns its background edge-to-edge, so the portal body padding comes off and each
   section centres its own container instead. */
.rz-body:has(> .fcs-section-page) {
  padding: 0;
}

/* Section links glide rather than jump. It goes on .rz-body because that — not the document — is
   what scrolls here, and scroll-behavior is honoured by the element actually doing the scrolling.
   Scoped to sectioned pages so it cannot surprise a data grid elsewhere in the portal. The scroll
   spy needs no say in this: the scroll events fire throughout the animation, so the highlight
   travels with the page instead of landing at the end. */
@media (prefers-reduced-motion: no-preference) {
  .rz-body:has(> .fcs-section-page) {
    scroll-behavior: smooth;
  }
}

/* Opaque, or the body's decorative backdrop bleeds through unshaded sections. */
.fcs-section-page {
  background: var(--rz-base-background-color);
  color: var(--rz-text-color);
  /* The serif heading face shared with the blog (see --blog-heading-font in blog.css); the
     webfont itself is vendored in google-fonts.css. Slabo ships weight 400 only. */
  --fcs-heading-font: "Slabo 27px", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Named once because the section menu row reuses it: docked at the top of the page the row is a
     translucent darkening of the banner behind it, but once it sticks there is nothing behind it,
     so it repaints the same gradient underneath its own darkening layer. */
  --fcs-banner-gradient: linear-gradient(
    45deg,
    var(--rz-primary-darker) 0%,
    var(--rz-primary) 48%,
    color-mix(in srgb, var(--rz-primary) 40%, var(--rz-danger)) 100%);
  /* The docked menu row's height, and so also how far a section reached from that row has to hold
     back to clear it. One number for both, because the scroll spy's "has this section reached the
     row" test is the row's bottom edge — a section that landed anywhere below it would leave the
     PREVIOUS entry highlighted after a click. */
  --fcs-nav-height: 2.7rem;
}

.fcs-container {
  width: min(1180px, calc(100% - 3rem));
  margin-inline: auto;
}

/* ── hero ─────────────────────────────────────────────────────────────────────────────────────── */

.fcs-hero {
  position: relative;
  overflow: hidden;
  color: var(--rz-on-primary);
  background: var(--fcs-banner-gradient);
}

/* Banner artwork over the gradient. Held well back — the title sits on top of it — and screened so
   a monochrome stand-in picks up the gradient underneath instead of greying it out. */
.fcs-hero-backdrop {
  position: absolute;
  inset: 0;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.35;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.fcs-hero-watermark.rzi {
  position: absolute;
  right: 1.5rem;
  bottom: -2.5rem;
  font-size: 14rem;
  opacity: 0.16;
  color: var(--rz-on-primary);
  pointer-events: none;
  user-select: none;
}

.fcs-hero-content {
  position: relative;
  z-index: 1;
  padding: 3.25rem 0 2.5rem;
  text-align: center;
}

/* FocusOnNavigate lands focus on the page's h1, and Chrome's default ring boxes the whole banner
   title — the heading is a scroll target, not an interactive control, so no ring. */
.fcs-hero-content h1:focus {
  outline: none;
}

.fcs-hero-content h1 {
  margin: 0;
  color: inherit;
  font-family: var(--fcs-heading-font);
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.1;
  text-shadow: 0 1px 1px color-mix(in srgb, var(--rz-primary-darker) 40%, transparent);
}

.fcs-hero-subtitle {
  max-width: 56rem;
  margin: 0.6rem auto 0;
  font-size: 1.1rem;
  font-weight: 300;
  opacity: 0.92;
}

/* The banner's calls to action, under the subtitle. */
.fcs-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.5rem;
}

/* Product purchasing shares the existing hero and Radzen theme. */
.fcs-hero-with-purchase { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 4rem; align-items: center; text-align: left; }
.fcs-hero-with-purchase .fcs-hero-subtitle { margin: 1rem 0 1.5rem; }
.fcs-hero-with-purchase .fcs-hero-actions { justify-content: flex-start; }
.fcs-hero-purchase > .rz-card.fcs-product-purchase { margin: 0; padding: 1.7rem; color: var(--rz-text-color); background: var(--rz-base-background-color); border: 1px solid var(--rz-base-500); box-shadow: var(--rz-shadow-3); }
.fcs-product-price { font-size: 2.05rem; font-weight: 650; line-height: 1.2; margin-bottom: 1.2rem; }
.fcs-product-purchase > .rz-button { display: flex; justify-content: center; width: 100%; }
.fcs-product-added { font-size: .85rem; color: var(--rz-success); margin-block: .5rem; }
@media (max-width: 800px) {
  .fcs-hero-with-purchase { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .fcs-hero-with-purchase .fcs-hero-introduction { text-align: center; }
  .fcs-hero-with-purchase .fcs-hero-actions { justify-content: center; }
  .fcs-hero-purchase { width: 100%; max-width: 420px; margin-inline: auto; }
}

/* The shaded menu row along the hero's bottom edge — a darkening of the same banner gradient, so it
   reads as part of the banner in both themes, and stays opaque once it lifts off it.
   position:sticky docks it under the app header (which lives OUTSIDE .rz-body, the scroll
   container, so top:0 lands directly below it) for the rest of the page. */
.fcs-hero-nav {
  position: sticky;
  top: 0;
  z-index: 3;
  /* Stated, not inherited: the row is a sibling of .fcs-hero now, so it no longer picks the banner
     ink up from it and would otherwise render body-coloured text on the banner gradient. */
  color: var(--rz-on-primary);
  background:
    linear-gradient(color-mix(in srgb, var(--rz-primary-darker) 55%, transparent) 0 100%),
    var(--fcs-banner-gradient);
  transition: box-shadow 180ms ease;
}

.fcs-hero-nav-stuck {
  box-shadow: var(--rz-shadow-3);
}

/* Three tracks, the outer two equal: the anchors sit on the ROW's centre line rather than on the
   centre of whatever the actions leave them, and the actions have a track of their own that the
   anchors can never be laid over. Because the outer tracks stay equal whether the actions track is
   filled or empty, both states centre the anchors identically and nothing moves when the row docks.
   `1fr` not `minmax(0, 1fr)` — the end track has to be allowed to grow to the buttons rather than
   let them spill out of it. */
.fcs-hero-nav-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  min-height: var(--fcs-nav-height);
}

.fcs-hero-nav-links {
  grid-column: 2;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  overflow-x: auto;
}

/* Absent, not merely invisible, until the row docks: the banner's own larger pair of calls to
   action is still on screen until then, so these would be redundant — and an element that is only
   invisible still takes part in the layout, which is what put the anchors off centre. */
.fcs-hero-nav-actions {
  grid-column: 3;
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  /* The gutter the anchors are entitled to. It counts toward the track's minimum width, so at the
     narrow end — where the buttons have already taken more than their equal share and the anchors
     have given up the centre line — the two still cannot end up touching. */
  margin-inline-start: 1rem;
}

.fcs-hero-nav-stuck .fcs-hero-nav-actions {
  display: flex;
}

/* One line each: wrapped button text sets the row's height against the docked height the sections
   hold back for. */
.fcs-hero-nav-actions .rz-button {
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .fcs-hero-nav {
    transition: none;
  }
}

.fcs-hero-nav-links a {
  display: flex;
  align-items: center;
  padding: 0 1.2rem;
  color: inherit;
  border-inline-end: 1px solid color-mix(in srgb, var(--rz-on-primary) 12%, transparent);
  font-size: 0.86rem;
  text-decoration: none;
  white-space: nowrap;
}

.fcs-hero-nav-links a:first-child {
  border-inline-start: 1px solid color-mix(in srgb, var(--rz-on-primary) 12%, transparent);
}

.fcs-hero-nav-links a:hover,
.fcs-hero-nav-links a:focus-visible {
  background: color-mix(in srgb, var(--rz-on-primary) 10%, transparent);
}

/* The section being read, tracked by the scroll spy in App.razor. An inset rule rather than a
   border or a bolder weight: both of those would resize the anchor and shuffle the row every time
   the highlight moved. */
.fcs-hero-nav-links a[aria-current] {
  background: color-mix(in srgb, var(--rz-on-primary) 16%, transparent);
  box-shadow: inset 0 -3px 0 var(--rz-on-primary);
}

/* Below the medium breakpoint the anchors alone fill the row; the buttons duplicate the banner's
   own calls to action, so they are the part that goes. */
@media (max-width: 767px) {
  .fcs-hero-nav-actions,
  /* Has to out-specify the docked rule above, which is two classes deep. */
  .fcs-hero-nav-stuck .fcs-hero-nav-actions {
    display: none;
  }
}

/* ── section rows ─────────────────────────────────────────────────────────────────────────────── */

.fcs-section {
  padding: 3.25rem 0;
  /* Lands the section flush under the docked menu row instead of beneath it. Its own 3.25rem of
     top padding is the air; the border box wants to meet the row exactly. */
  scroll-margin-top: var(--fcs-nav-height);
}

.fcs-section-shaded {
  background: color-mix(in srgb, var(--rz-base-background-color) 95%, var(--rz-text-color));
}

/* The slightly darker line separating adjacent rows. */
.fcs-section + .fcs-section {
  border-top: var(--rz-border-normal);
}

.fcs-section-title {
  margin: 0 0 0.6rem;
  color: var(--rz-text-title-color);
  font-family: var(--fcs-heading-font);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

.fcs-section-blurb {
  max-width: 50rem;
  margin: 0 auto 2.25rem;
  color: var(--rz-text-secondary-color);
  font-size: 1.05rem;
  text-align: center;
}

/* Separates two card rows that belong to the same section — a heading between them would promote
   the second row into a section of its own. */
.fcs-section-rule {
  margin: 2.75rem 0;
  border: 0;
  border-top: var(--rz-border-normal);
}

/* An emphasised standalone paragraph for an overview row. */
.fcs-section-lead {
  max-width: 56rem;
  margin: 0 auto;
  color: var(--rz-text-color);
  font-size: 1.18rem;
  font-weight: 300;
  line-height: 1.6;
  text-align: center;
}

/* ── feature cards ────────────────────────────────────────────────────────────────────────────── */

/* Full height so every card in a RadzenRow ends at the same edge and the calls to action line up. */
.fcs-feature-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fcs-feature-card-centered {
  align-items: center;
  text-align: center;
}

.fcs-feature-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  color: var(--rz-text-title-color);
  font-family: var(--fcs-heading-font);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
}

/* Monochrome text presentation, so the glyph takes its rz-color-* instead of the colour-emoji
   font's own palette (the fate of ⚒ and friends otherwise). */
.fcs-feature-icon,
.fcs-feature-icon-large {
  font-family: var(--rz-text-font-family), "DejaVu Sans", sans-serif;
  font-variant-emoji: text;
}

.fcs-feature-icon {
  font-size: 1.35rem;
  line-height: 1;
}

.fcs-feature-icon-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1.1rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 2.1rem;
  line-height: 1;
}

/* The showcase-tile thumbnail. Fixed 4:3 so a row of tiles keeps its titles on one line even when
   the underlying screenshots are not all the same shape. */
.fcs-feature-image {
  display: block;
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 1.1rem;
  border: var(--rz-border-normal);
  border-radius: var(--rz-card-border-radius, 4px);
}

.fcs-feature-body {
  flex: 1 1 auto;
  color: var(--rz-text-color);
}

.fcs-feature-body p {
  margin: 0 0 0.9rem;
}

.fcs-feature-body p:last-child {
  margin-bottom: 0;
}

/* margin-top auto pins the call to action to the bottom of the tallest card in the row. */
.fcs-feature-cta {
  margin-top: auto;
  padding-top: 1.25rem;
  text-align: center;
  align-self: center;
}

/* Depth on the call to action, and a slight rise on hover so it answers the pointer. The shadows
   go through the theme's own hooks (--rz-button-shadow / --rz-button-hover-shadow) rather than a
   box-shadow rule of ours: the theme's `.rz-button:…:hover` declaration loads after this sheet and
   ties any same-specificity override, but it paints whatever these variables hold. */
.fcs-feature-cta,
.fcs-hero-actions {
  --rz-button-shadow: var(--rz-shadow-1);
  /* Radzen's ramp gets SOFTER as the number climbs (wider blur, lower alpha), so a single higher
     step reads as the shadow fading just as the button lifts. Stacking two steps keeps the crisp
     near shadow and adds the wide drop underneath — darker and deeper, like a real lift. */
  --rz-button-hover-shadow: var(--rz-shadow-2), var(--rz-shadow-6);
}

.fcs-feature-cta .rz-button,
.fcs-hero-actions .rz-button {
  box-shadow: var(--rz-button-shadow);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.fcs-feature-cta .rz-button:hover,
.fcs-feature-cta .rz-button:focus-visible,
.fcs-hero-actions .rz-button:hover,
.fcs-hero-actions .rz-button:focus-visible {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .fcs-feature-cta .rz-button,
  .fcs-feature-cta .rz-button:hover,
  .fcs-feature-cta .rz-button:focus-visible,
  .fcs-hero-actions .rz-button,
  .fcs-hero-actions .rz-button:hover,
  .fcs-hero-actions .rz-button:focus-visible {
    transform: none;
    transition: none;
  }
}

.fcs-feature-footnote {
  margin: 0.9rem 0 0;
  color: var(--rz-text-tertiary-color);
  font-size: 0.86rem;
  font-style: italic;
  text-align: center;
}

/* ── price cards ──────────────────────────────────────────────────────────────────────────────── */

/* Full height so a row of offers ends on one line however much each consists of. */
.rz-card.fcs-price-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* The banded heading. Warning is the theme's amber, which is what carries the band on the
   reference; it is decoration here rather than a warning, so it takes the colour and not the
   semantics — no icon, no alert role. The title ink is the body's, NOT --rz-on-warning-*: those
   inks are the amber itself, which on an amber band is barely a shade apart. */
.fcs-price-card-title {
  margin: 0;
  padding: 0.85rem 1.15rem;
  background: var(--rz-warning-lighter);
  color: var(--rz-text-title-color);
  border-bottom: var(--rz-border-normal);
  font-family: var(--fcs-heading-font);
  font-size: 1.35rem;
  font-weight: 400;
  text-align: center;
}

.fcs-price-card-figure {
  padding: 1.4rem 1.15rem 1.1rem;
  text-align: center;
}

.fcs-price-card-amount {
  margin: 0;
  color: var(--rz-text-title-color);
  font-size: 3.2rem;
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* A figure that is still waiting on a choice reads as a gap, not as a price of nothing. */
.fcs-price-card-amount-muted {
  color: var(--rz-text-disabled-color);
}

.fcs-price-card-unit {
  margin: 0.35rem 0 0;
  color: var(--rz-text-secondary-color);
  font-size: 0.9rem;
}

.fcs-price-card-tiers {
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

.fcs-price-card-tiers summary {
  color: var(--rz-primary);
  cursor: pointer;
}

.fcs-price-card-tiers ul {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--rz-text-secondary-color);
}

.fcs-price-card-tiers li {
  padding: 0.15rem 0;
}

.fcs-price-card-action {
  padding: 0 1.15rem 1.15rem;
}

.fcs-price-card-button {
  width: 100%;
}

/* What the offer consists of, ruled off from the figure that buys it. margin-top:auto is what
   pins the divider to the same place whether the list is five items long or fifteen. */
.fcs-price-card-body {
  flex: 1 1 auto;
  padding: 1.15rem;
  border-top: var(--rz-border-normal);
}

.fcs-price-card-saving {
  margin: 0 0 0.6rem;
  color: var(--rz-text-secondary-color);
  font-size: 0.92rem;
}

/* Two columns for a long bundle, one for a short one — the contents are a reference list, not a
   sequence, so wrapping them into columns costs nothing and saves a lot of height. */
.fcs-price-card-contents {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 1.25rem;
  font-size: 0.94rem;
}

.fcs-price-card-contents li {
  padding: 0.16rem 0;
  break-inside: avoid;
}

/* The choosable list is a form, not a reference list: one column, and each row is a control with
   its label and its price. */
.fcs-price-card-choices {
  columns: 1;
}

.fcs-price-card-choices li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fcs-price-card-choices label {
  cursor: pointer;
}

.fcs-price-card-choice-price {
  margin-inline-start: auto;
  color: var(--rz-text-tertiary-color);
  font-variant-numeric: tabular-nums;
}

/* ── line items and totals ────────────────────────────────────────────────────────────────────── */

/* The line-item table and the money under it are one object, so they share a width and sit centred
   in the section rather than running its full 1180px. .rz-datagrid qualifies the grid's share of
   that because the Radzen theme sheet, which loads after this one, gives it width:100%. */
.fcs-line-items,
.rz-datagrid.fcs-line-items,
.fcs-totals,
.fcs-cart-checkout,
.fcs-secure-note {
  width: min(56rem, 100%);
  margin-inline: auto;
}

/* Notices run the full section width rather than the table's — they address the page, not the
   table. Only the surrounding rhythm is ours; the section's own padding is the spacing. */
.fcs-cart-notice {
  margin-block: 0;
}

/* The catalogue number ahead of the description, and the quantity a read-only table states there
   instead of in a column: present, but not competing with the description itself. */
.fcs-line-item-number,
.fcs-line-item-quantity {
  margin-inline-end: 0.4rem;
  color: var(--rz-text-tertiary-color);
  font-variant-numeric: tabular-nums;
}

.fcs-line-item-qty {
  width: 100%;
}

/* The reassurance under a checkout's order summary. Quiet by design — it is a footnote, not a
   claim the page needs to make loudly. */
.fcs-secure-note {
  margin: 1.25rem auto 0;
  color: var(--rz-text-tertiary-color);
  font-size: 0.86rem;
  text-align: center;
}

/* margin-BLOCK only: a plain `margin: 0` here would reset the margin-inline:auto that centres this
   under the table, and the block would sit flush against the container's left edge. */
.fcs-totals {
  margin-block: 0;
  padding-top: 0.35rem;
}

/* Label and amount as one right-aligned pair, the amount in a fixed column so the digits line up
   down the block and with the table's own trailing column. */
.fcs-totals-row {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 1rem;
  padding: 0.4rem 0;
}

.fcs-totals-row dt {
  color: var(--rz-text-secondary-color);
  text-align: end;
}

/* Sized and inset to land the amounts directly under the table's Total column. Box-sizing is
   border-box here, so the width carries the inset: 8rem of column plus 4.75rem clearing the
   actions column beyond it (4rem, set on the grid in the page) and the grid's cell padding.
   Change the actions column and both numbers have to follow. */
.fcs-totals-row dd {
  width: 12.75rem;
  margin: 0;
  padding-inline-end: 4.75rem;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* The figure being agreed to: ruled off from its parts and set heavier. */
.fcs-totals-row-strong {
  border-top: var(--rz-border-normal);
  margin-top: 0.25rem;
  padding-top: 0.7rem;
}

.fcs-totals-row-strong dt,
.fcs-totals-row-strong dd {
  color: var(--rz-text-title-color);
  font-size: 1.1rem;
  font-weight: 600;
}

.fcs-cart-checkout {
  margin-top: 1.75rem;
  text-align: center;
}

/* ── product cards ────────────────────────────────────────────────────────────────────────────── */

/* The whole card is the link, so the anchor carries no link colour or underline of its own and the
   text inside keeps reading as body copy. */
.fcs-product-card {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* .rz-card qualifies the selector because the Radzen theme sheet loads AFTER this one — a bare
   .fcs-product-card-inner would tie its padding declaration and lose. */
.rz-card.fcs-product-card-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  /* The screenshot runs to the card's edges, so the padding moves to the body below it. */
  padding: 0;
  overflow: hidden;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.fcs-product-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: var(--rz-border-normal);
}

.fcs-product-card-body {
  flex: 1 1 auto;
  padding: 1rem 1.15rem 1.15rem;
}

.fcs-product-card-title {
  margin: 0 0 0.4rem;
  color: var(--rz-text-title-color);
  font-family: var(--fcs-heading-font);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.3;
}

.fcs-product-card-text {
  margin: 0;
  color: var(--rz-text-secondary-color);
  font-size: 0.94rem;
  line-height: 1.5;
}

/* Only the clickable variant answers the pointer — an inert card that lifts is a lie. */
.fcs-product-card-link:hover .fcs-product-card-inner,
.fcs-product-card-link:focus-visible .fcs-product-card-inner {
  transform: translateY(-3px);
  border-color: var(--rz-primary);
  box-shadow: var(--rz-shadow-2), var(--rz-shadow-6);
}

.fcs-product-card-link:hover .fcs-product-card-title {
  color: var(--rz-primary);
}

@media (prefers-reduced-motion: reduce) {
  .fcs-product-card-inner,
  .fcs-product-card-link:hover .fcs-product-card-inner,
  .fcs-product-card-link:focus-visible .fcs-product-card-inner {
    transform: none;
    transition: none;
  }
}

/* ── account overviews ────────────────────────────────────────────────────────────────────────── */

/* The opening row of an account page: the postal address on the left, the label/value block on the
   right. Two columns while there is room for both to be read at a glance, stacked below that. */
.fcs-org-overview {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(18rem, 1fr);
  gap: 1.5rem 3rem;
  align-items: start;
}

@media (max-width: 767px) {
  .fcs-org-overview {
    grid-template-columns: 1fr;
  }
}

/* An address is written down the page, not run together, so the <address> lays its lines out
   itself — and without the browser's italic, which reads as emphasis it has not earned. */
.fcs-postal-address {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-style: normal;
  line-height: 1.5;
}

.fcs-postal-name {
  color: var(--rz-text-title-color);
  font-weight: 600;
}

/* Label column sized to its own content so the values start at one edge however long the labels
   are; the pairs stay side by side rather than wrapping the value under its label. */
.fcs-detail-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
}

.fcs-detail-row {
  display: contents;
}

.fcs-detail-row dt {
  color: var(--rz-text-secondary-color);
}

/* A label whose hover text expands it. The dotted rule is the long-standing sign for exactly that,
   and without it the tooltip is only ever found by accident. */
.fcs-detail-label-expandable {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

.fcs-detail-row dd {
  margin: 0;
  color: var(--rz-text-color);
}

/* Stacked cards within a section — one per product line in Purchases and Licences. The first sits
   flush under the section title; the section's own padding closes the last. */
.fcs-org-card + .fcs-org-card {
  margin-top: 1.25rem;
}

/* A notice addresses the page, so it runs the section's full width and keeps only the air under it
   that separates it from the content it qualifies. */
.fcs-org-notice {
  margin: 0 0 2rem;
}

/* Two label/value blocks side by side, on the same terms as the overview above: both readable at a
   glance or neither, so they stack rather than narrow. */
.fcs-detail-columns {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(18rem, 1fr);
  gap: 1.5rem 3rem;
  align-items: start;
}

@media (max-width: 767px) {
  .fcs-detail-columns {
    grid-template-columns: 1fr;
  }
}

/* Free text as it was typed: the notes hold line breaks, and running them together loses the shape
   whoever wrote them gave the thing. */
.fcs-org-notes {
  margin: 0.35rem 0 0;
  white-space: pre-line;
  line-height: 1.5;
}

/* What FCS knows and the customer does not, on the administrator's copy of the customer page. Set
   off by a rule rather than a border box: it belongs to the overview it follows, and a card would
   read as a separate thing. The rule is mixed from the two properties that DO invert with the
   theme — --rz-base-* is a fixed light ramp and would stay pale on a dark page. */
.fcs-staff-band {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px dashed
    color-mix(in srgb, var(--rz-base-background-color) 70%, var(--rz-text-color));
}

/* Marks a section the customer does not get. Sits above the section's own content and takes only
   the air that separates it, so it reads as a label on the thing rather than a line of its own. */
.fcs-staff-mark {
  display: block;
  margin-bottom: 0.75rem;
}

/* The eye on an invoice reference. A link, so it inherits the link colour that works in both
   themes; sized up because a glyph at body size in a compact grid row is a target nobody hits. */
.fcs-invoice-document {
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
}

/* The identifier trailing the banner subtitle: present, but not competing with the name. */
.fcs-hero-muted {
  opacity: 0.7;
}

/* ── forms ────────────────────────────────────────────────────────────────────────────────────── */

/* Wide enough for three fields across a row, held back from the section's full 1180px so the lines
   of a single form stay scannable. */
.fcs-org-form {
  width: min(70rem, 100%);
  margin-inline: auto;
}

/* Names a group of fields, so it is a size down from a section title and ruled off from the group
   above rather than centred in space of its own. */
.fcs-form-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 2.5rem 0 1.25rem;
  padding-top: 2rem;
  border-top: var(--rz-border-normal);
  color: var(--rz-text-title-color);
  font-family: var(--fcs-heading-font);
  font-size: 1.5rem;
  font-weight: 400;
}

.fcs-form-heading .rzi {
  color: var(--rz-primary);
  font-size: 1.5rem;
}

/* The instruction under a field it qualifies — how to change a name this form will not change.
   Tucked against the field rather than floating between rows. */
.fcs-field-note {
  margin: 0.35rem 0 0;
  color: var(--rz-text-tertiary-color);
}

.fcs-org-form-actions {
  margin-top: 2rem;
}

/* ── image upload ─────────────────────────────────────────────────────────────────────────────── */

.fcs-image-upload {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* A fixed frame whatever the image's own proportions: object-fit:contain letters-boxes a wide logo
   and a tall one alike, so the row's height never depends on what was uploaded. The chequerboard
   is what shows through a transparent PNG or SVG — a plain panel would hide exactly the mistake
   somebody wants to see. */
.fcs-image-upload-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12rem;
  height: 6rem;
  padding: 0.5rem;
  border: var(--rz-border-normal);
  border-radius: var(--rz-border-radius);
  background-color: var(--rz-base-background-color);
  background-image:
    linear-gradient(45deg, color-mix(in srgb, var(--rz-text-color) 8%, transparent) 25%, transparent 25%),
    linear-gradient(-45deg, color-mix(in srgb, var(--rz-text-color) 8%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--rz-text-color) 8%, transparent) 75%),
    linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--rz-text-color) 8%, transparent) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.fcs-image-upload-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.fcs-image-upload-empty {
  border-style: dashed;
}

.fcs-image-upload-empty .rzi {
  font-size: 2.5rem;
  color: var(--rz-text-tertiary-color);
}

.fcs-image-upload-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* The label IS the button, so the input it wraps must not be seen — but it must still be reachable
   by the keyboard, which display:none and visibility:hidden both prevent. */
.fcs-image-upload-actions input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* The address row takes the whole width under the file button and the hint. */
.fcs-image-upload-address {
  flex-basis: 100%;
  max-width: 32rem;
}

.fcs-image-upload-hint {
  flex-basis: 100%;
  margin: 0;
  color: var(--rz-text-tertiary-color);
}

/* The logo above an organization's postal address, sized by height so wide and square marks both
   sit on the same line as each other. */
.fcs-org-logo {
  max-width: 14rem;
  max-height: 4rem;
  margin-bottom: 0.5rem;
  object-fit: contain;
  object-position: left center;
}

/* A sponsored organization's own mark, inline beside its name. Bounded rather than sized: logos
   arrive at whatever aspect the customer uploaded, and a fixed height with auto width keeps a wide
   wordmark and a square badge on the same baseline without distorting either. */
.fcs-org-avatar {
  height: 1.4rem;
  width: auto;
  max-width: 6rem;
  object-fit: contain;
  vertical-align: middle;
}

/* ---- account pages (User/Account, Admin/User) ----------------------------------------------
   The person's photo, round, at the banner's right, the way the organization banner carries its
   watermark. */
.fcs-hero-avatar {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 8%;
  width: 7.5rem;
  height: 7.5rem;
  transform: translateY(-50%);
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  background: var(--rz-base-200);
}

@media (max-width: 767px) {
  .fcs-hero-avatar {
    position: static;
    display: block;
    margin: 1.5rem auto 0;
    transform: none;
    width: 5.5rem;
    height: 5.5rem;
  }
}