/* =============================================================
   Thadus Group — base.css
   Shared foundation for every page of the group marketing site.

   Architecture: raw brand colours are declared once, then mapped
   onto SEMANTIC tokens (--bg, --text, --accent...). Every component
   below reads ONLY the semantic tokens, so a product section can
   change its identity by re-mapping ~10 variables (see
   styles/staffroom.css and styles/forge.css) without forking a
   single component rule.

   Contents
     1. Reset
     2. Tokens        — spacing, type ramp, radius, shadow, colour
     3. Base elements
     4. Typography
     5. Layout
     6. Components    — buttons, cards, inputs, badges
     7. Header / footer chrome
     8. Motion & scroll-reveal
     9. Utilities & accessibility
   ============================================================= */


/* ---------- 1. Reset ---------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }

img, svg, video { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; }

/* The UA stylesheet gives [hidden] display:none, but any author
   `display` rule outranks it — and .field, .grid and .btn all set one.
   Without this, hiding an element with the attribute silently does
   nothing. Applies site-wide, including the nav panel and the form. */
[hidden] { display: none !important; }


/* ---------- 2. Tokens --------------------------------------- */

:root {

  /* --- 2.1 Spacing: one 8-point scale, used for EVERY margin,
         padding and gap on the site. No ad-hoc pixel values. --- */
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  96px;

  /* --- 2.2 Type ramp: 13/14/16/18/24/32/48/64.
         The three largest steps interpolate between two ramp
         values so mobile still lands ON the ramp, never between. */
  --fs-caption: 13px;
  --fs-small:   14px;
  --fs-body:    16px;
  --fs-lead:    18px;
  --fs-h3:      24px;
  --fs-h2:      clamp(24px, 3.2vw, 32px);   /* 24 -> 32 */
  --fs-h1:      clamp(32px, 5vw,   48px);   /* 32 -> 48 */
  --fs-display: clamp(48px, 7vw,   64px);   /* 48 -> 64 */

  /* Fixed line-heights, one per ramp step. */
  --lh-tight:   1.1;    /* display, h1 */
  --lh-heading: 1.25;   /* h2, h3 */
  --lh-body:    1.6;    /* body, lead */
  --lh-flat:    1.4;    /* captions, buttons, labels */

  /* The wordmark is a heavy geometric rounded sans, so the display face
     follows it rather than the serif the original brief called for.
     Nunito is also what the Staffroom product itself ships, which ties
     the group and the product together instead of fighting them. */
  --ff-display: "Nunito", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  --ff-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                Helvetica, Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-black:   900;   /* display only */

  --tracking-tight: -0.03em;
  --tracking-wide:   0.06em;

  /* --- 2.3 Radius: one scale (matches the 4/8/14 scale already
         used in the Forge prototype, so all three sections agree). */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  14px;
  --radius-full: 999px;

  /* --- 2.4 Shadow: one resting style, one raised (hover) style. */
  --shadow:        0 1px 2px rgba(15, 23, 42, 0.06),
                   0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-raised: 0 2px 4px rgba(15, 23, 42, 0.07),
                   0 12px 24px rgba(15, 23, 42, 0.09);

  /* --- 2.5 Group brand palette, taken from the wordmark ---
     Deep navy ground, cream type, and the flower colours as the accents.
     The rose is the coral flower centre darkened until it is safe as
     text; the raw coral and pink stay decorative. */
  --navy:        #141B2E;
  --navy-soft:   #1E2740;   /* raised surface inside a dark band */
  --navy-line:   #2C3654;   /* border inside a dark band */
  --cream:       #FBF6EC;
  --cream-alt:   #F4EDDF;
  --rose:        #B83E50;   /* accent: links, primary fill */
  --rose-deep:   #A83A4A;   /* hover / active only */
  --rose-tint:   #FBEAEC;   /* soft accent surface */
  --pink:        #F9A8B4;   /* petal — decorative, and the accent on navy */
  --pink-light:  #FBC4CD;
  --coral:       #F97A7A;   /* flower centre — decorative only */
  --gold:        #F2B33D;   /* flower centre — decorative only */
  --gold-deep:   #8A6206;   /* the gold that is safe as text or an icon */
  --gold-tint:   #FDF3DE;
  --slate:       #4A5169;
  --slate-mid:   #5A6178;
  --border:      #E6DECD;
  --white:       #ffffff;

  /* --- Product identity colours. These are NOT decoration: on group
     pages they are the only cue telling you which of the three
     products a card or link leads into, and each one is that
     section's own accent. Used as a 3px rule or a dot, never as
     text, so 3:1 is the bar and all three clear it. */
  --brand-codelabs:  #3b82f6;   /* one step lighter than the CodeLabs
                                   accent: the identity rule sits on the
                                   navy card, where #2563eb is only
                                   2.9:1 and barely registers */
  --brand-staffroom: #F4A259;
  --brand-forge:     #7FCF97;

  /* --- 2.6 Semantic layer — the only colours components may use.
     The default map is the GROUP theme: navy, the ground the wordmark
     sits on. Product themes live in section 2.6b as classes. --- */
  /* --- 2.7 Layout --- */
  --container: 1152px;   /* 144 x 8 */
  --measure:    68ch;    /* max line length for body copy */

  /* --- 2.8 Motion --- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur:  180ms;
  --dur-slow: 520ms;
}


/* ---------- 3. Base elements -------------------------------- */

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--c-accent-soft); color: var(--c-text); }

hr {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin: var(--space-5) 0;
}


/* ---------- 4. Typography ----------------------------------- */

/* Two tiers, split by TYPEFACE rather than size alone:
   .display/h1/h2 are the display face and mark section-level breaks;
   h3-h6 are the body face and mark block-level ones.

   The split is load-bearing on mobile. --fs-h2 clamps down to 24px
   there, which is exactly --fs-h3, so a size-only hierarchy would
   collapse at 375px. Different faces keep the two ranks readable at
   every width. */

.display, h1, h2 {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  color: var(--c-text);
}

.display  { font-size: var(--fs-display); line-height: var(--lh-tight); }
h1        { font-size: var(--fs-h1);      line-height: var(--lh-tight); }
h2        { font-size: var(--fs-h2);      line-height: var(--lh-heading); }

h3, h4, h5, h6 {
  font-family: var(--ff-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: 0;
  color: var(--c-text);
}

h3        { font-size: var(--fs-h3); }
h4, h5, h6{ font-size: var(--fs-lead); }

p { max-width: var(--measure); }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
}

.small   { font-size: var(--fs-small);   line-height: var(--lh-flat); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-flat); color: var(--c-text-subtle); }

/* Small uppercase section label. */
.eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-flat);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}

.text-muted { color: var(--c-text-muted); }

/* Inline links inside prose. */
.prose a,
a.link {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease);
}
.prose a:hover,
a.link:hover { color: var(--c-accent-hover); }

/* A paragraph sitting directly under a block heading belongs to it, so
   it gets one space step rather than none. Containers that already
   space their own children with `gap` opt out below, otherwise the two
   compound and the rhythm drifts off the scale. */
h3 + p,
h4 + p { margin-top: var(--space-1); }

.card > h3 + p,
.card > h4 + p,
.price > h3 + p,
.stack > h3 + p,
.stack-3 > h3 + p,
.stack-4 > h3 + p { margin-top: 0; }

.prose > * + * { margin-top: var(--space-2); }
.prose > * + h2,
.prose > * + h3 { margin-top: var(--space-4); }


/* ---------- 5. Layout --------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.section       { padding-block: var(--space-6); background: var(--c-bg); color: var(--c-text); }
.section--tight{ padding-block: var(--space-5); }
.section--loose{ padding-block: var(--space-7); }
.section--alt  { background: var(--c-bg-alt); }

/* ---------- 2.6b Theme maps ---------------------------------
   Put one of these on <body> to theme a whole page, or on a single
   <section> to theme one band. Each re-maps the semantic tokens only,
   so every button, card, badge, input and skeleton keeps working with
   no per-theme component rules written anywhere.

   Nothing here paints a background: .section and body do that from
   --c-bg, which keeps .section--alt working inside any theme.
   ------------------------------------------------------------ */

/* Group — navy. Also pinned to the header and footer so the brand bar
   stays navy no matter which product theme the page body carries. */
:root,
.theme-group,
.site-header,
.site-footer {
  --c-bg:            #141B2E;
  --c-bg-alt:        #1E2740;
  --c-surface:       #1E2740;
  --c-text:          #FBF6EC;
  --c-text-muted:    #C9CEDD;
  --c-text-subtle:   #A8AFC4;
  --c-border:        #2C3654;
  --c-accent:        #F9A8B4;
  --c-accent-hover:  #FBC4CD;
  --c-accent-soft:   #26304C;
  --c-accent-on:     #141B2E;
  --c-highlight:     #F2B33D;
  --c-highlight-ink: #F2B33D;
  --c-highlight-soft:#2A2A44;
  --c-danger:        #F9A8B4;
  --c-focus:         #F9A8B4;

  --shadow:        0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 24px rgba(0, 0, 0, 0.4);
}

/* CodeLabs — the blue system already live on thaduscodelabs.com. */
.theme-codelabs {
  --c-bg:            #ffffff;
  --c-bg-alt:        #f8fafc;
  --c-surface:       #ffffff;
  --c-text:          #0f172a;
  --c-text-muted:    #475569;
  --c-text-subtle:   #64748b;
  --c-border:        #e2e8f0;
  --c-accent:        #2563eb;
  --c-accent-hover:  #1d4ed8;
  --c-accent-soft:   #eff6ff;
  --c-accent-on:     #ffffff;
  --c-highlight:     #f97316;
  --c-highlight-ink: #c2410c;
  --c-highlight-soft:#fff7ed;
  --c-danger:        #c2410c;
  --c-focus:         #2563eb;

  --shadow:        0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-raised: 0 2px 4px rgba(15, 23, 42, 0.07), 0 12px 24px rgba(15, 23, 42, 0.09);
}

/* Staffroom — the warm cream the product itself ships. */
.theme-staffroom {
  --c-bg:            #FDF8F2;
  --c-bg-alt:        #F7EFE4;
  --c-surface:       #FFFFFF;
  --c-text:          #2A2320;
  --c-text-muted:    #5C5049;
  --c-text-subtle:   #6E6157;
  --c-border:        #E8DBCA;
  --c-accent:        #B34449;
  --c-accent-hover:  #983A40;
  --c-accent-soft:   #F7E7E3;
  --c-accent-on:     #FFFFFF;
  --c-highlight:     #8CB369;
  --c-highlight-ink: #527038;
  --c-highlight-soft:#EDF3E5;
  --c-danger:        #983A40;
  --c-focus:         #B34449;

  --shadow:        0 1px 2px rgba(42, 35, 32, 0.06), 0 4px 12px rgba(42, 35, 32, 0.07);
  --shadow-raised: 0 2px 4px rgba(42, 35, 32, 0.08), 0 12px 24px rgba(42, 35, 32, 0.10);
}

/* Forge — the green set from thadusforge.com.

   --c-accent is #2A7853 rather than Forge's own #2C7D57: the brand
   green lands at 4.44:1 on the alt background, just under AA. The
   brand value stays as the fill colour (--forge-green); the two-shades
   darker token is what carries link and label text. */
.theme-forge {
  --forge-sand:   #BAA466;
  --forge-willow: #A9D983;
  --forge-lime:   #5BCF57;
  --forge-palm:   #889F5C;
  --forge-sea:    #308E61;
  --forge-green:  #2C7D57;   /* brand fill */

  --c-bg:            #FBFAF5;
  --c-bg-alt:        #F3F1E8;
  --c-surface:       #FFFFFF;
  --c-text:          #1B1F16;
  --c-text-muted:    #565B4A;
  --c-text-subtle:   #666B54;
  --c-border:        #E3DECC;
  --c-accent:        #2A7853;
  --c-accent-hover:  #235345;
  --c-accent-soft:   #E7F1E8;
  --c-accent-on:     #FBFAF5;
  --c-highlight:     var(--forge-willow);  /* decorative */
  --c-highlight-ink: #3A6B24;              /* readable as text/icon */
  --c-highlight-soft:#E7F1E8;
  --c-danger:        #A8442F;
  --c-focus:         #2A7853;

  --shadow:        0 1px 2px rgba(27, 31, 22, 0.06), 0 4px 12px rgba(27, 31, 22, 0.07);
  --shadow-raised: 0 2px 4px rgba(27, 31, 22, 0.08), 0 12px 24px rgba(27, 31, 22, 0.10);
}

/* Forge ships a dark mode, so the Forge PAGE follows the reader's
   preference the way the product does. Deliberately scoped to <body>:
   a single Forge-themed band inside an otherwise light group page
   should not flip on its own. */
@media (prefers-color-scheme: dark) {
  body.theme-forge {
    --c-bg:            #14170F;
    --c-bg-alt:        #1B1F16;
    --c-surface:       #1B1F16;
    --c-text:          #E9EDDE;
    --c-text-muted:    #A2A88F;
    --c-text-subtle:   #939A80;
    --c-border:        #2B3023;
    --c-accent:        #7FCF97;
    --c-accent-hover:  #A9D983;
    --c-accent-soft:   #1E2A1E;
    --c-accent-on:     #12160D;
    --c-highlight:     var(--forge-lime);
    --c-highlight-ink: var(--forge-willow);
    --c-highlight-soft:#1E2A1E;
    --c-danger:        #E0917A;
    --c-focus:         #7FCF97;

    --shadow:        0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 24px rgba(0, 0, 0, 0.4);
  }
}

/* The shimmer sweep is white; dial it back on any dark ground. */
.theme-group .skeleton::after,
.site-footer .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
}


/* ---------- Blooms ------------------------------------------
   The flowers from the wordmark, reused as page furniture. Purely
   decorative: aria-hidden in the markup, pointer-events off, and
   never carrying meaning or text.
   ------------------------------------------------------------ */

.bloom {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.bloom--cream { --bloom-petal: #F7EBCE; --bloom-heart: #F2B33D; }
.bloom--pink  { --bloom-petal: #F9C9D2; --bloom-heart: #F97A7A; }
.bloom--rose  { --bloom-petal: #F9A8B4; --bloom-heart: #F97A7A; }

/* The corner clusters, echoing the wordmark's own layout. */
.bloom-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Each bloom is roughly twice its own offset, so about two thirds of
   the flower stays inside the clipped band — the same partial crop the
   wordmark uses. Offsets stay on the 8pt scale. */
.bloom-tl-1 { top: -56px;  left: -48px;  width: 176px; }
.bloom-tl-2 { top: -88px;  left: 88px;   width: 144px; }
.bloom-br-1 { bottom: -56px; right: -40px; width: 184px; }
.bloom-br-2 { bottom: -88px; right: 128px; width: 144px; }

@media (max-width: 900px) {
  .bloom-tl-2 { left: 72px; width: 112px; }
  .bloom-br-2 { right: 96px; width: 112px; }
}
@media (max-width: 640px) {
  .bloom-tl-2, .bloom-br-2 { display: none; }
  /* Pulled further off-canvas than on desktop: at this width the hero
     copy starts much closer to the top, and the petals were landing on
     the eyebrow. */
  .bloom-tl-1 { top: -72px; left: -56px; width: 120px; }
  .bloom-br-1 { bottom: -48px; right: -56px; width: 128px; }
}

.stack > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }

.grid { display: grid; gap: var(--space-3); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .section        { padding-block: var(--space-5); }
  .section--loose { padding-block: var(--space-6); }
}


/* ---------- 6. Components ----------------------------------- */

/* 6.1 Buttons — exactly two variants. Do not add a third. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-flat);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.btn--primary {
  background: var(--c-accent);
  color: var(--c-accent-on);
}
.btn--primary:hover {
  background: var(--c-accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.btn--outline {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-border);
}
.btn--outline:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  transform: translateY(-2px);
}

.btn--sm { padding: var(--space-1) var(--space-2); font-size: var(--fs-small); }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Loading state: the button keeps its width, swaps label for a spinner.
   Every async action on the site uses this — never a silent gap. */
.btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--space-2);
  height: var(--space-2);
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  color: var(--c-accent-on);
  animation: spin 640ms linear infinite;
}
.btn--outline.is-loading::after { color: var(--c-accent); }

@keyframes spin { to { transform: rotate(360deg); } }

/* 6.2 Cards */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

a.card { text-decoration: none; }

/* A card title is a block label, not a section break. At --fs-h3 it
   out-weighs the serif h2 above it, so it takes the next ramp step down. */
.card h3 { font-size: var(--fs-lead); }

.card--link:hover,
a.card:hover {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-raised);
  transform: translateY(-2px);
}

/* 6.3 Form fields */
.field { display: flex; flex-direction: column; gap: var(--space-1); }

.label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-flat);
  color: var(--c-text);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: var(--space-2);
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  line-height: var(--lh-flat);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.textarea { min-height: var(--space-7); resize: vertical; line-height: var(--lh-body); }

.input::placeholder,
.textarea::placeholder { color: var(--c-text-subtle); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.hint  { font-size: var(--fs-caption); line-height: var(--lh-flat); color: var(--c-text-subtle); }
.error { font-size: var(--fs-caption); line-height: var(--lh-flat); color: var(--c-danger); }

/* 6.3b Form status message. Hidden until the submit resolves; the
   button's .is-loading state covers the wait in between. */
.form-status {
  display: none;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}
.form-status.is-shown { display: flex; }
.form-status--ok {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
  color: var(--c-accent-hover);
}
.form-status--error {
  background: var(--c-bg-alt);
  border-color: var(--c-danger);
  color: var(--c-danger);
}

/* A labelled row of contact details. */
.detail { display: flex; gap: var(--space-2); }
.detail + .detail { margin-top: var(--space-3); }
.detail__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--c-accent-soft);
  color: var(--c-accent-hover);
}
.detail__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-flat);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text-subtle);
}
.detail__value { font-size: var(--fs-body); line-height: var(--lh-body); }

/* 6.4 Badge / pill */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--c-accent-soft);
  color: var(--c-accent-hover);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: var(--lh-flat);
}

/* 6.5 Skeleton — the loading placeholder for lists and cards. */
.skeleton {
  background: var(--c-bg-alt);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: shimmer 1200ms infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }


/* ---------- 7. Header / footer chrome ----------------------- */

/* 7.1 Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--space-7);
  padding-block: var(--space-2);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  line-height: var(--lh-flat);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  color: var(--c-text);
  white-space: nowrap;
}
.nav__mark { width: var(--space-4); height: var(--space-4); flex: none; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav__link {
  position: relative;
  padding-block: var(--space-1);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  text-decoration: none;
  color: var(--c-text-muted);
  transition: color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--c-text); }

/* Active section: a 2px rule in that product's own colour. */
.nav__link[aria-current="page"] { color: var(--c-text); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: var(--radius-sm);
  background: var(--nav-accent, var(--c-accent));
}

.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  color: var(--c-text);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.nav__toggle:hover { border-color: var(--c-accent); }

@media (max-width: 900px) {
  /* Baseline, no JavaScript: the toggle would do nothing, so it stays
     hidden and the links sit in the header as a plain stacked list.
     nav.js sets .has-js-nav, which upgrades that list to a dropdown. */
  .nav { flex-wrap: wrap; }
  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .has-js-nav .nav__toggle { display: inline-flex; }
  .has-js-nav .nav__links {
    position: absolute;
    left: 0; right: 0; top: 100%;
    width: auto;
    padding: var(--space-2);
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow);
  }

  .nav__link {
    padding: var(--space-2);
    border-radius: var(--radius-md);
  }
  .nav__link[aria-current="page"]::after { left: var(--space-2); right: auto; width: var(--space-3); }
  .nav__links .btn { justify-content: center; margin-top: var(--space-1); }
}

/* 7.2 Footer */
.site-footer {
  background: var(--c-bg-alt);
  border-top: 1px solid var(--c-border);
  padding-block: var(--space-6) var(--space-4);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-5) var(--space-3);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__title {
  font-family: var(--ff-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-flat);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text-subtle);
  margin-bottom: var(--space-2);
}

.footer__list > li + li { margin-top: var(--space-1); }

.footer__link {
  font-size: var(--fs-small);
  color: var(--c-text-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.footer__link:hover { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-border);
}

.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  color: var(--c-text-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.social:hover { color: var(--c-accent); border-color: var(--c-accent); transform: translateY(-2px); }


/* ---------- 7.3 Page sections ------------------------------- */

.hero { padding-block: var(--space-7) var(--space-6); }
@media (max-width: 640px) { .hero { padding-block: var(--space-6) var(--space-5); } }

.hero__title { max-width: 20ch; }
.hero__lead  { margin-top: var(--space-3); max-width: 60ch; }
.hero__cta   { margin-top: var(--space-4); }

/* Section heading block: eyebrow + title + optional standfirst. */
.section-head { max-width: 60ch; margin-bottom: var(--space-4); }
.section-head > * + * { margin-top: var(--space-2); }

/* Heading beside body copy. Without this, a --measure-capped column
   leaves the right third of a 1152px container empty on every text
   section, which reads as unfinished rather than restrained. */
.split {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-3) var(--space-6);
  align-items: start;
}
.split .section-head { margin-bottom: 0; }

/* Same layout, wide column first — for when the visual leads. */
.split--flip { grid-template-columns: 1.6fr 1fr; }

@media (max-width: 900px) {
  .split,
  .split--flip { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .split .section-head { margin-bottom: 0; }
}

/* Product card: same .card anatomy, plus a rule in the product colour. */
.product {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-4);
}
.product::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--product-color, var(--c-accent));
}
.product__name { display: flex; align-items: center; gap: var(--space-1); }
.product__more {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-accent);
}
.product__more i { transition: transform var(--dur) var(--ease); }
.product:hover .product__more i { transform: translateX(4px); }

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 900px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stat__value {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--c-text);
}
.stat__label {
  margin-top: var(--space-1);
  font-size: var(--fs-small);
  line-height: var(--lh-flat);
  color: var(--c-text-muted);
}

/* 7.4 People */
/* A muted counterpart to .eyebrow: .eyebrow is accent-coloured and marks
   a section, this marks a role inside a card. Two label styles, two jobs. */
.person__role {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-flat);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text-subtle);
}

.person__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

.person__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--c-accent);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.person__link:hover { color: var(--c-accent-hover); text-decoration: underline; text-underline-offset: 3px; }

/* 7.5 Pull quote */
.quote {
  max-width: 30ch;
  padding-left: var(--space-3);
  border-left: 3px solid var(--c-accent);
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--c-text);
}
.quote cite {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-style: normal;
  letter-spacing: 0;
  color: var(--c-text-subtle);
}

/* 7.6 Closing call to action */
.cta-band { text-align: center; }
.cta-band .section-head { margin-inline: auto; }
.cta-band .cluster { justify-content: center; }

/* A quoted credit line, e.g. the ABC News feature. */
.credit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}
.credit i { color: var(--c-highlight-ink); }


/* ---------- 8. Motion & scroll-reveal ----------------------- */

/* Gated on .js, which the inline script in <head> sets before first
   paint. Without that gate a failed or blocked script would leave every
   revealed section stuck at opacity 0 — the content would simply never
   appear. No JavaScript now means no animation, not no page. */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--space-2));
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Staggered children within one revealed block. */
.reveal[data-reveal-delay="1"] { transition-delay:  80ms; }
.reveal[data-reveal-delay="2"] { transition-delay: 160ms; }
.reveal[data-reveal-delay="3"] { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}


/* ---------- 9. Utilities & accessibility -------------------- */

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: calc(var(--space-2) * -6);
  z-index: 20;
  padding: var(--space-1) var(--space-2);
  background: var(--c-accent);
  color: var(--c-accent-on);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-2); }

.text-center { text-align: center; }
.mx-auto    { margin-inline: auto; }
.full       { width: 100%; }


/* ---------- 7.7 Product previews ----------------------------
   Snippets of the actual products, shown on group pages. Each one
   carries its OWN product colours rather than the group palette —
   that is the point of a preview. Scoped to the block so nothing
   leaks into the surrounding page.
   ------------------------------------------------------------ */

/* --- Staffroom: a board as it goes up on the projector --- */
.sr-board {
  --sr-cream: #FDF8F2;
  --sr-sand:  #F4A259;
  --sr-olive: #8CB369;
  --sr-brick: #BC4B51;
  --sr-steel: #9AADBF;
  --sr-ink:   #2A2320;
  --sr-line:  #E8DBCA;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
@media (max-width: 640px) { .sr-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sr-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  color: var(--c-text);
}
.sr-tile__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-flat);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text-subtle);
}
.sr-tile__value {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.sr-tile__sub { font-size: var(--fs-caption); line-height: var(--lh-flat); color: var(--c-text-subtle); }

.sr-lamps { display: flex; gap: var(--space-1); }
.sr-lamp {
  width: var(--space-2); height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--c-border);
}
.sr-lamp--on-amber { background: var(--sr-sand); }

.sr-bars { display: flex; align-items: flex-end; gap: 3px; height: var(--space-4); }
.sr-bars span { flex: 1; background: var(--sr-olive); border-radius: 2px; }
.sr-bars span.is-off { background: var(--c-border); }

/* Row of widget names under the board. */
.sr-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.sr-chip {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-full);
  font-size: var(--fs-caption);
  line-height: var(--lh-flat);
  color: var(--c-text-muted);
}

/* --- Forge: a line of the builder conversation --- */
.fg-panel {
  --fg-bg:      #161826;
  --fg-surface: #232532;
  --fg-line:    #33364a;
  --fg-accent:  #9184d9;
  --fg-text:    #e9e9ed;
  --fg-muted:   #b4b4c2;

  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  color: var(--c-text);
}
.fg-row { display: flex; gap: var(--space-2); align-items: flex-start; }
.fg-avatar {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--space-4); height: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--c-surface);
  color: var(--c-accent);
  font-size: var(--fs-caption);
}
.fg-bubble {
  padding: var(--space-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--c-text);
}
.fg-bubble--muted { color: var(--c-text-muted); }
.fg-caret {
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--c-accent);
  animation: fg-blink 1s steps(2) infinite;
}
@keyframes fg-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fg-caret { animation: none; } }


/* ---------- 7.8 Code sample --------------------------------- */

.code {
  margin: 0;
  padding: var(--space-3);
  overflow-x: auto;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--c-text);
  tab-size: 2;
}
.code__c { color: var(--c-text-subtle); }
.code__k { color: var(--c-accent); font-weight: var(--fw-semibold); }
.code__f { color: var(--c-highlight-ink); }


/* ---------- 7.9 Course list --------------------------------- */

.course {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  padding-block: var(--space-3);
  border-top: 1px solid var(--c-border);
}
.course:last-child { border-bottom: 1px solid var(--c-border); }

.course__no {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-full);
  background: var(--c-accent-soft);
  color: var(--c-accent-hover);
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-body);
  line-height: 1;
}
.course__month {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-flat);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text-subtle);
}
.course__name { font-size: var(--fs-lead); font-weight: var(--fw-semibold); line-height: var(--lh-heading); }
.course__body { grid-column: 2; color: var(--c-text-muted); }

@media (max-width: 560px) {
  .course { grid-template-columns: 1fr; gap: var(--space-1); }
  .course__no { grid-row: auto; }
  .course__body { grid-column: 1; }
}


/* ---------- 7.10 Pricing ------------------------------------ */

.price {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.price--featured {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-raised);
}
.price__name { display: flex; align-items: center; gap: var(--space-1); }
.price__tag {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.price__tag span { font-family: var(--ff-body); font-size: var(--fs-body); font-weight: var(--fw-medium); }
.price__sub { font-size: var(--fs-small); color: var(--c-text-subtle); }
.price__list { display: flex; flex-direction: column; gap: var(--space-1); }
.price__list li {
  display: flex;
  gap: var(--space-1);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--c-text-muted);
}
.price__list i { color: var(--c-highlight-ink); margin-top: 4px; flex: none; }
.price .btn { margin-top: auto; justify-content: center; }


/* ---------- 7.11 Tick list ---------------------------------- */

.ticks { display: flex; flex-direction: column; gap: var(--space-2); }
.ticks li { display: flex; gap: var(--space-2); color: var(--c-text-muted); }
.ticks i { color: var(--c-accent); margin-top: 5px; flex: none; }


/* ---------- 7.12 Product mark -------------------------------
   A product's own icon, shown beside its name on group pages so a
   reader can tell CodeLabs / Staffroom / Forge apart at a glance.
   Decorative — the product name is always next to it in text.
   ------------------------------------------------------------ */

.mark {
  width: var(--space-4);
  height: var(--space-4);
  flex: none;
  border-radius: var(--radius-sm);
}
.mark--lg { width: var(--space-5); height: var(--space-5); }


/* ---------- 7.13 Callout ------------------------------------
   A band pointing somewhere else — used to make clear that the
   CodeLabs product site is a separate place from these pages.
   ------------------------------------------------------------ */

.callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--c-accent-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}

/* A closed/paused notice reads differently from a "here's more info"
   callout — plain surface instead of the inviting accent tint, so it
   doesn't look like a click-here banner. */
.callout--muted { background: var(--c-bg-alt); }

/* A status tag that means "not currently open" rather than "go" —
   default .badge always uses the accent colour, which reads as an
   invitation. This one deliberately doesn't. */
.badge--muted {
  background: var(--c-bg-alt);
  color: var(--c-text-subtle);
  border: 1px solid var(--c-border);
}
.callout__body { flex: 1 1 24ch; }
.callout__body p { margin-top: var(--space-1); }

/* Links that leave for another site get the arrow, so it is not a
   surprise. Paired with an "opens the CodeLabs site" style label. */
.link--out i,
.footer__link i { font-size: 0.85em; margin-left: 4px; opacity: 0.7; }


/* ---------- 7.14 Numbered steps ------------------------------ */

.steps { display: flex; flex-direction: column; gap: var(--space-3); }
.step { display: flex; gap: var(--space-3); }
.step__no {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-full);
  background: var(--c-accent-soft);
  color: var(--c-accent-hover);
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  line-height: 1;
}
.step__body h3 { font-size: var(--fs-lead); }


/* ---------- 7.15 Forge: a published project ------------------
   An illustration of what shipping looks like. Deliberately shows
   no creator name and no like/comment counts: Forge is not public,
   so there is no real activity to represent and inventing some
   would misrepresent the product.
   ------------------------------------------------------------ */

.fg-project {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
}
.fg-project__head { display: flex; align-items: center; gap: var(--space-2); }
.fg-project__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
.fg-project__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--c-border);
}
.fg-project__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-small);
  color: var(--c-text-muted);
}
.fg-project__action i { color: var(--c-accent); }


/* Forge sets its code blocks on a dark ground in both light and dark
   mode, the way the product site does — so a snippet reads the same
   whichever theme the page is in. */
.theme-forge .code {
  background: #16190F;
  border-color: #2B3023;
  color: #E7EBDC;
}
.theme-forge .code__c { color: #939A80; }   /* comment      6.1:1 */
.theme-forge .code__k { color: #7FCF97; }   /* keyword      9.6:1 */
.theme-forge .code__f { color: #BAA466; }   /* string/call  7.3:1 */


/* ---------- 7.16 Footer trust badges -------------------------
   Added to the footer column that holds the People + Planet First
   badge, on every page, from this one file. The footer is pinned to
   the navy theme, so the light-text version of the AI pledge badge is
   always the right one. The two new badges are pseudo-elements (no
   markup to maintain); each carries its alt text via `content`.
   ------------------------------------------------------------ */

.footer__grid > div:has(> .footer__verified) { position: relative; }

.footer__verified {
  width: auto !important;
  height: 48px !important;
  max-width: none !important;
}

.footer__grid > div:has(> .footer__verified)::before,
.footer__grid > div:has(> .footer__verified)::after {
  position: absolute;
  bottom: 0;
  height: 48px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

/* AI Trustworthy Pledge sits one gap to the right of the 37px-wide
   People + Planet badge; GDPR follows it. */
.footer__grid > div:has(> .footer__verified)::before {
  content: "";
  content: "" / "Cloud Security Alliance AI Trustworthy Pledge 2026";
  left: calc(37px + var(--space-2));
  width: 48px;
  background-image: url("../assets/badge-csa-ai-pledge-dark.png");
}
.footer__grid > div:has(> .footer__verified)::after {
  content: "";
  content: "" / "GDPR Ready";
  left: calc(37px + var(--space-2) + 48px + var(--space-2));
  width: 36px;
  background-image: url("../assets/badge-gdpr.png");
}