/* Think Beyond Your Role feedback: Cloudflare Pages. Copied from the FinOps
   Tokens and components mirror mohdatasha.com/styles.css so this page is
   indistinguishable from the main site. Themes follow the reader's system
   settings (no script needed): light → Paper, dark → Ink, more contrast →
   High contrast. */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-latin-400-700.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype",
    Palatino, Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.1875rem, 1.13rem + 0.28vw, 1.375rem);
  --step-2: clamp(1.4375rem, 1.34rem + 0.48vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.6rem + 0.75vw, 2.25rem);
  --step-4: clamp(2.125rem, 1.9rem + 1.13vw, 2.875rem);

  --leading: 1.6;
  --para-gap: 2.4em;
  --measure: 57ch;
  --column: 38.5rem;

  --space-1: 0.5rem;
  --space-2: 0.875rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;

  --target: 2.75rem;
  --rule-width: 1px;
  --focus-width: 0.125rem;

  /* Paper */
  --bg: #fbfaf8;
  --bg-sunk: #f2f0ea;
  --ink: #16161a;
  --ink-muted: #4a4a52;
  --accent: #1f3a5f;
  --rule: #d5d1c8;
  --focus: #1f3a5f;
  --error: #8a1c1c;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Ink */
    --bg: #131316;
    --bg-sunk: #1c1c20;
    --ink: #edebe6;
    --ink-muted: #adaaa1;
    --accent: #9dbfe4;
    --rule: #33333a;
    --focus: #9dbfe4;
    --error: #f0a3a3;
    color-scheme: dark;
  }
}

@media (prefers-contrast: more) {
  :root {
    --bg: #ffffff;
    --bg-sunk: #ffffff;
    --ink: #000000;
    --ink-muted: #000000;
    --accent: #00006e;
    --rule: #000000;
    --focus: #000000;
    --error: #7a0000;
    --rule-width: 2px;
    color-scheme: light;
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading);
  text-align: left;
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-width);
  border-radius: 1px;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: var(--space-3);
  top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--bg);
  z-index: 10;
}

.wrap {
  width: 100%;
  max-width: calc(var(--column) + var(--space-3) * 2);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* Masthead */
.masthead {
  padding-block: var(--space-3);
  border-block-end: var(--rule-width) solid var(--rule);
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}

.wordmark:hover {
  color: var(--accent);
}

main {
  padding-block: var(--space-3) var(--space-6);
}

/* Breadcrumb */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.crumbs li + li::before {
  content: "/";
  margin-inline-end: var(--space-1);
  color: var(--rule);
}

/* Page head */
.page-head {
  margin-block-end: var(--space-5);
}

.page-head h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}

/* The certification mark beside the heading.

   A grid rather than a float, so the badge and the heading share a baseline
   row and the standfirst below starts at the page's left edge rather than
   wrapping around the mark. `align-items: start` keeps the badge pinned to
   the top of the heading when the title runs to two lines, which it does at
   every width below about 46rem.

   The heading drops its own max-width inside this layout. 22ch against the
   full column is right when the h1 owns the row; sharing the row with a 64px
   mark and a gap, it would cap the text well short of the space available
   and force a third line for no reason. The grid column already bounds it. */
.page-head--badged {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: var(--space-3);
}

.page-head--badged h1 {
  max-width: none;
}

/* The standfirst spans both columns, returning to the full measure. */
.page-head--badged .standfirst {
  grid-column: 1 / -1;
}

.page-head__badge {
  display: block;
  width: 4rem;
  height: auto;
}

/* Below the breakpoint the mark moves above the heading. Side by side on a
   narrow screen, a 64px badge plus its gap takes a fifth of the width from a
   title that already needs three lines there. */
@media (max-width: 30rem) {
  .page-head--badged {
    grid-template-columns: 1fr;
    row-gap: var(--space-2);
  }
}

.standfirst {
  margin-block: var(--space-3) 0;
  font-size: var(--step-1);
  color: var(--ink-muted);
  max-width: 48ch;
  line-height: 1.5;
}

/* Plain-language summary */
.plain {
  margin-block: var(--space-4);
  padding-block: var(--space-3);
  border-block: var(--rule-width) solid var(--ink-muted);
  max-width: var(--measure);
}

.plain h2 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2);
  font-weight: 600;
}

.plain p {
  margin: 0;
  line-height: var(--leading);
}

.plain p + p {
  margin-block-start: calc(var(--para-gap) * 0.7);
}

/* Sections */
.section {
  margin-block-start: var(--space-5);
}

.section > h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.25;
  margin: 0 0 var(--space-3);
  padding-block-end: var(--space-2);
  border-block-end: var(--rule-width) solid var(--rule);
}

.prose {
  max-width: var(--measure);
}

/* Fields */
.field {
  margin-block-end: var(--space-3);
}

.field label {
  display: block;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  margin-block-end: var(--space-1);
  font-weight: 600;
}

.field .hint {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin-block-end: var(--space-1);
}

.field__optional {
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0;
}

.field input,
.field textarea {
  width: 100%;
  min-height: var(--target);
  padding: var(--space-2);
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--bg);
  border: var(--rule-width) solid var(--ink-muted);
  border-radius: 0;
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: var(--leading);
}

.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--accent);
}

/* Honeypot */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Button */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  min-width: var(--target);
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-size: var(--step-0);
  letter-spacing: 0.02em;
  color: var(--bg);
  background: var(--accent);
  border: var(--rule-width) solid var(--accent);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
}

.button:hover {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}

/* Server-side error list */
.errors {
  margin: 0 0 var(--space-4);
  padding-block: var(--space-3);
  border-block: var(--rule-width) solid var(--error);
  max-width: var(--measure);
}

.errors h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--error);
}

.errors ul {
  margin: 0;
  padding-inline-start: 1.1em;
}

/* Footer */
.colophon {
  padding-block: var(--space-4);
  border-block-start: var(--rule-width) solid var(--rule);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.colophon p {
  margin: 0;
}

@media (max-width: 40rem) {
  .page-head {
    margin-block-end: var(--space-4);
  }
  .section {
    margin-block-start: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* --- FinOps experience form ----------------------------------------------
   Append to /styles.css. Only what the existing .field / .button / .plain
   components do not already cover. Every colour is a theme token, so Paper,
   Ink, Sepia and High contrast need nothing extra. Left edges stay on the
   column: no inline padding is introduced on any block. */

/* Radio groups. The site's bare `legend` rule is an uppercase eyebrow; a form
   question should read like the .field labels around it instead. */
.choices {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  min-width: 0;
}

.choices > legend {
  padding: 0;
  margin-block-end: var(--space-1);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink);
}

.choices > .hint {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin-block-end: var(--space-2);
}

/* Each option is a full-width row between hairlines. The label's ::after
   stretches the hit area to the whole row, well past the 44px target. */
.choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-block-start: var(--rule-width) solid var(--rule);
}

.choice:last-child {
  border-block-end: var(--rule-width) solid var(--rule);
}

.choice input {
  position: relative;
  z-index: 1;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.2em 0 0;
  accent-color: var(--accent);
}

.choice label {
  flex: 1;
  cursor: pointer;
}

.choice label::after {
  content: "";
  position: absolute;
  inset: 0;
}

.choice__title {
  display: block;
  font-weight: 600;
}

.choice__desc {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.choice:has(input:checked) .choice__title {
  color: var(--accent);
}

/* Visually hidden, but still read aloud. Used to give each number on a rating
   scale a self-sufficient accessible name: a screen reader announcing a bare
   "7" out of context tells the listener nothing about which scale it belongs
   to. Not display:none, which would remove it from the accessibility tree. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The date field is not stretched to the full column. A date is a short value
   and a full-width box overstates it, but the control keeps the --target
   minimum so it stays comfortable to tap.

   Selector note: `.field input` above is one class plus one element, so it
   outranks a lone `.input--date` and the width:100% there would win. Matching
   the same shape settles it on source order instead of reaching for
   !important. Measured, not assumed: this was 616px before the fix. */
.field input.input--date {
  width: auto;
  min-width: 12rem;
  max-width: 100%;
}

/* --- Rating scales ------------------------------------------------------ */

/* Eleven radios in a row, and no script anywhere on this page, so the numbers
   themselves are the control. The row wraps rather than scrolls: a horizontal
   scroller hides options off-screen, and an option a person cannot see is an
   option they will not choose, which would bias the result towards whatever
   happens to be visible. */
.scale {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  min-width: 0;
}

.scale > legend {
  padding: 0;
  margin-block-end: var(--space-1);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.scale > .hint {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin-block-end: var(--space-2);
}

/* The anchor labels sit above the row, pinned to each end, so the direction of
   the scale is legible before a choice is made. Repeating them on every button
   would be noise; they are hidden from assistive technology here because each
   end button already carries the same wording in its own accessible name. */
.scale__ends {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin-block-end: var(--space-1);
}

.scale__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.scale__item {
  flex: 1 1 var(--target);
  min-width: var(--target);
}

/* The input is hidden behind its own label rather than removed, so it keeps
   keyboard focus and arrow-key group behaviour. :focus-visible is mirrored
   onto the label below, because the thing a person sees is the label. */
.scale__item input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.scale__item label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  padding: var(--space-1);
  font-size: var(--step-0);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--bg);
  border: var(--rule-width) solid var(--ink-muted);
  cursor: pointer;
}

/* Checked state is carried by fill AND by weight, never by colour alone, so it
   survives greyscale and colour blindness. */
.scale__item input:checked + label {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 700;
}

.scale__item input:focus-visible + label {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-width);
}

@media (hover: hover) {
  .scale__item input:not(:checked) + label:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
}

/* Consent sits between --ink-muted rules, the same boundary as .plain, so it
   reads as the statement being agreed to rather than one more option. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-block: var(--space-4) 0;
  padding-block: var(--space-3);
  border-block: var(--rule-width) solid var(--ink-muted);
  max-width: var(--measure);
}

.consent input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.25em 0 0;
  accent-color: var(--accent);
}

.consent label {
  cursor: pointer;
  line-height: var(--leading);
}

/* Writing help. Closed by default so the question stays the first thing read. */
.starters {
  margin-block: var(--space-1) var(--space-2);
}

.starters > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-size: var(--step--1);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.starters[open] > summary {
  margin-block-end: var(--space-1);
}

.starters__body {
  padding-block: var(--space-2) var(--space-3);
  border-block: var(--rule-width) solid var(--rule);
  font-size: var(--step--1);
  line-height: var(--leading);
}

.starters__body h3 {
  margin: var(--space-3) 0 var(--space-1);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.starters__body h3:first-child {
  margin-block-start: 0;
}

.starters__body ul {
  margin: 0;
  padding-inline-start: 1.1em;
}

.starters__body p {
  margin: 0 0 var(--space-1);
}

.starters__template .blank {
  color: var(--ink-muted);
  letter-spacing: 0.05em;
}

.starters__body blockquote {
  margin: 0;
  padding-inline-start: var(--space-2);
  border-inline-start: 2px solid var(--ink-muted);
  font-family: var(--font-display);
  font-size: var(--step-0);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-block-start: var(--space-4);
}

.form-actions p {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

@media print {
  .starters,
  .form-actions {
    display: none;
  }
}

/* --- Think Beyond Your Role --------------------------------------------
   ADDED 2026-11-12. The FinOps page head carried the programme's badge; this
   session has none, so a small line above the heading says what it was. */
.eyebrow {
  margin: 0 0 var(--space-1);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Sponsor credit: a quiet band between hairlines, the same boundary the
   .plain summary uses, so it reads as a credit and not as part of the form. */
.sponsor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-block: 0 var(--space-4);
  padding-block-start: var(--space-3);
  border-block-start: var(--rule-width) solid var(--rule);
  max-width: var(--measure);
}

/* On the thanks page nothing follows with its own rule, so close the band. */
.page-head + .sponsor:not(:has(+ .plain)) {
  padding-block-end: var(--space-3);
  border-block-end: var(--rule-width) solid var(--rule);
}

.sponsor__label {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.sponsor picture {
  display: block;
}

.sponsor__logo {
  display: block;
  width: 7.5rem;
  height: auto;
}