/* ==========================================================================
   CORSAIR Eco-Circuit Challenge
   Shared stylesheet. Every page reuses .site-nav, .page-grid and .site-footer;
   only the contents of .rail-main change from page to page.

   Sizing model
   ------------
   The design is a fixed 1920x2150 comp. Every length below is authored in rem
   as (design px / 16), and the root font-size is tied to the viewport, so the
   whole page scales as one unit and stays pixel-proportional to the comp at any
   width down to the 1200px reflow breakpoint. Below that the root reverts to a
   fixed 16px and the three rails stack.

   The comp is only ever rendered at its full 1920 on a 1920 viewport, edge to
   edge, which reads far too wide. The root is therefore capped so the shell
   tops out at a 1320px content width - Bootstrap's xxl container - and centres
   beyond that. The comp's proportions are untouched; the whole thing is drawn
   at 68.75% scale, so 28px body copy renders at 19.25px.

   Because the shell now centres, the comp's own outer margins are redundant -
   they were the 1920 page's breathing room, and the container supplies that.
   So the design is flush to the shell on both sides: nav, left rail and footer
   start at x0, and the right rail's widest child ends at x1920. The 1920 canvas
   is still the coordinate system every length here is measured in - it is just
   fully used now. Anything that reads x0 or x1920 below is a container edge,
   and adding an inset there re-opens the dead space this removed.

   Do not introduce raw hex colours or px lengths in page-level CSS - add a
   token here instead. That is what keeps the remaining pages cheap to build.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette, sampled from screenshtos/corsair-home.png */
  --eco-black: #000000;
  --eco-yellow: #ebe81a;
  --eco-teal: #3a96a1;   /* button outlines */
  --eco-frame: #003a30;  /* photo frame - a darker green than the teal */
  --eco-white: #ffffff;
  --eco-muted: #8d8d8d;  /* the support line under the left-rail photo */

  /* The signed-in area inverts the site: black ink on white. Sampled from
     dashboard-v2.png and corsair-inner-christine-2.png. Those two comps set
     their yellow as #deff00, a lime, rather than the --eco-yellow the
     marketing comps use; the site keeps one brand yellow. See CLAUDE.md. */
  --eco-paper: #ffffff;      /* app + auth page background */
  --eco-panel: #e2e2e2;      /* the dashboard sidebar's fill */
  --eco-field: #e9e9e9;      /* input and textarea fill */
  --eco-field-line: #aaaaaa; /* input border */
  --eco-hint: #585858;       /* helper copy under a field label */
  --eco-card: #f9f9f9;       /* the workspace's numbered audit cards */
  --eco-card-line: #d8d8d8;  /* and their border */

  /* Status ink for the upload rows. The workspaces currently inline the delete
     link as style="color: red"; this is that colour as a token. */
  --eco-alert: #cc0000;      /* the delete link */
  --eco-ok: #1c7a3e;         /* a finished upload */

  /* Type. Saira is specified for the nav; Saira Condensed stands in for the
     squared CORSAIR display face; Poppins carries the geometric headline/UI
     voice; Source Sans 3 is the body-copy face - the PSD's text layers are set
     in Myriad Pro, and Poppins is far too wide to reproduce the comp's line
     breaks, so paragraph copy uses the Myriad-metric substitute instead. The
     footer legal block is Verdana in the source PSD. */
  --font-nav: "Saira", system-ui, sans-serif;
  --font-display: "Saira Condensed", "Saira", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;
  --font-copy: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
  --font-legal: Verdana, Geneva, system-ui, sans-serif;

  /* Layout */
  --shell: 120rem;          /* 1920 */
  --rail-left: 47.5rem;     /* 760  */
  --rail-main: 40rem;       /* 640  */
  --rail-main-wide: 52rem;  /* 832  - see .rail-main--wide */
  --rail-right: 32.5rem;    /* 520  */
  --nav-height: 7.625rem;   /* 122  */
  --btn-border: 0.25rem;    /* 4    */
  --frame-border: 0.9375rem;/* 15   */

  /* Signed-in area. See section 11. */
  --side-nav: 19.25rem;     /* 308  */
  --app-inset: 6.3125rem;   /* 101  - content's left inset past the sidebar */
  --app-measure: 88rem;     /* 1408 - widest .app-main's copy is allowed to read */
  --auth-col: 43.25rem;     /* 692  */
  --hairline: 0.0625rem;    /* 1    */

  /* Total side margin kept outside the shell, split evenly: the client's 80 a
     side at 1920 and 120 at 3840, on the line through both. Not rem - it is
     consumed by the root font-size rule below, which is what defines rem.
     100vw is measured across the scrollbar and the shell is not, so a classic
     ~15px scrollbar takes half of it and the two sides sit a few px apart. */
  --gutter: calc(100vw / 24 + 80px);
}

/* The root tracks the viewport, so the 120rem shell always fills it bar
   --gutter and the page stays proportional to the 1920 comp at any width.
   It is uncapped: capping it stranded the design in margin on a wide screen. */
html {
  font-size: calc((100vw - var(--gutter)) / 120);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

body {
  margin: 0;
  background: var(--eco-black);
  color: var(--eco-white);
  font-family: var(--font-body);
  overflow-x: hidden;
}

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

a {
  text-decoration: none;
  color: inherit;
}

.shell {
  max-width: var(--shell);
  margin-inline: auto;
}

/* Visually hidden but available to assistive tech. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   2b. Brand lockup type  (shared by the nav, the right rail and the footer)
   -------------------------------------------------------------------------- */

/* The three rows of the lockup used to be flat PNGs cropped out of the supplied
   corsairindexlogo.png; they are live text now. Each was fitted to the crop it
   replaces, so the rendered ink lands where the image's did:

     font-size      = (crop cap height / font cap height) x the width the image
                      occupied - 0.1850 x width for the wordmark, 0.0630 for the
                      line, 0.0528 for the tagline
     letter-spacing = whatever closes the gap between the font's natural width
                      and the crop's ink width
     line-height    = reproduces the old <img> box, so the flex stacks around
                      these are undisturbed
     font-weight    = the weight whose stroke density matches the crop, measured
                      at the crop's own pixel scale

   Only font-size changes per placement; the other three are ratios, so they
   hold at every size. The crops are still in assets/img/ as the reference these
   numbers were fitted to - see README-assets.md.

   Note that CSS adds letter-spacing after the *last* character too, so each row
   carries an invisible trailing gap of one tracking step. It is empty space in
   a box with no background, but it does count towards the box width. */
.brand-wordmark,
.brand-line,
.brand-tagline {
  display: block;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-wordmark {
  font-family: var(--font-nav);
  font-weight: 500;
  letter-spacing: 0.1859em;
  line-height: 0.901;
  color: var(--eco-white);
}

.brand-line {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.134em;
  line-height: 0.897;
  color: var(--eco-white);
}

.brand-tagline {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.1469em;
  line-height: 1.162;
  color: var(--eco-yellow);
}

/* --------------------------------------------------------------------------
   3. Navigation  (shared by every page)
   -------------------------------------------------------------------------- */

.site-nav {
  background: var(--eco-black);
  border-bottom: 0.125rem solid var(--eco-white);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  min-height: var(--nav-height);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 2.375rem;           /* mark x48-114, text block starts x152 */
  margin-top: 1.375rem;    /* the comp sits the brand low in the bar, not centred */
}

.nav-brand__mark {
  width: 4.1875rem;        /* 67 */
}

.nav-brand__text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Sized from the 159 / 388 / 230 wide crops these rows replace. */
.nav-brand__wordmark { font-size: 1.8382rem; }  /* 29.4 */
.nav-brand__line     { font-size: 1.5276rem; }  /* 24.4 */
.nav-brand__tagline  { font-size: 0.7596rem; }  /* 12.2 */

/* Home's header, shared by every page that opts in with .site-nav--hori. The
   .home-bleed half keeps home.html's own markup unchanged. */
.home-bleed .site-nav__inner,
.site-nav--hori .site-nav__inner {
  min-height: 9rem;            /* 144 against the template's 122 */
  padding-inline: 3.75rem;     /* 60  - the logo starts x60 */
}

.home-bleed .nav-brand,
.site-nav--hori .nav-brand { margin-top: 0; }   /* centred, not sat low */

/* The 1000x213 horizontal lockup at 302 x 64, which is what the comp draws. */
.home-bleed .nav-brand__mark--hori,
.site-nav--hori .nav-brand__mark--hori { width: 18.875rem; }

.home-bleed .site-nav__menu,
.site-nav--hori .site-nav__menu {
  margin-left: 7.125rem;       /* 114 - logo ends x362, OVERVIEW starts x476 */
  gap: 3.25rem;                /* 52  */
}

.home-bleed .site-nav__link,
.site-nav--hori .site-nav__link { font-size: 1.4375rem; }   /* 23 -> 16 cap */

/* The comp ends LOGIN at x1797 but sets the panel and the legal block below
   at x1857. Normalised to the one 60 inset, so these two sit ~63 right of
   where they are drawn. */
.home-bleed .site-nav__auth,
.site-nav--hori .site-nav__auth { gap: 4.8125rem; }         /* 77 */

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: 1.625rem;
  margin-left: 5.375rem;   /* brand ends x538, OVERVIEW starts x624 */
  list-style: none;
  padding: 0;
  margin-block: 0;
}

.site-nav__link {
  font-family: var(--font-nav);
  font-size: 1.75rem;      /* 28 -> 20px cap height, as measured */
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--eco-white);
  white-space: nowrap;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--eco-yellow);
}

/* Marks the page you are on; each page sets this on its own item. */
.site-nav__link[aria-current="page"] {
  color: var(--eco-yellow);
}

.site-nav__auth {
  display: flex;
  align-items: center;
  gap: 4.4375rem;          /* SIGNUP ends x1651, LOGIN starts x1722 */
  margin-left: auto;
}

.site-nav__auth .site-nav__link,
.site-nav__account .site-nav__link {
  font-weight: 600;
}

.site-nav__signup,
.site-nav__link--accent {
  color: var(--eco-yellow);
}

/* Signup - and Support, its counterpart in the signed-in header - is the one
   nav item that starts yellow, so it inverts the hover the rest of them use
   rather than landing on the colour it already is. Same specificity as
   .site-nav__link:hover above, and later, so it wins. */
.site-nav__signup:hover,
.site-nav__signup:focus-visible,
.site-nav__link--accent:hover,
.site-nav__link--accent:focus-visible {
  color: var(--eco-white);
}

.site-nav__toggle {
  display: none;
}

/* At desktop widths the collapse wrapper must not create a box, so that the
   menu and the auth links participate directly in .site-nav__inner's flex row.
   Bootstrap 5.3 has no d-*-contents utility, hence doing it here. Below the
   breakpoint the wrapper reverts to a normal .collapse driven by Bootstrap's JS. */
@media (min-width: 1200px) {
  .site-nav__collapse {
    display: contents !important;
  }
}

/* --------------------------------------------------------------------------
   4. Page template  (three rails, shared by every page)
   -------------------------------------------------------------------------- */

.page-grid {
  display: grid;
  grid-template-columns: var(--rail-left) var(--rail-main) var(--rail-right);
  padding-bottom: 6.375rem;
}

.rail-left  { padding-top: 3.6875rem; }
.rail-main  { padding-top: 7.8125rem; }
/* clip, not hidden: the wordmark's negative margin trims its side bearing, and
   that overhang would scroll the page once the shell reaches the viewport. */
.rail-right { padding-top: 1.5625rem; overflow-x: clip; }

/* Page heading pair, left rail. */
.page-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.1875rem;      /* 51 -> 37px cap height */
  line-height: 1;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  color: var(--eco-white);
}

.page-subtitle {
  margin: 0.5625rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5625rem;      /* 25 */
  line-height: 1;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--eco-yellow);
}

/* Framed, slightly tilted photograph. The -0.82deg rotation swings the lower
   left corner about 5px further left than the untilted box, so a flush 0 here
   would hang the corner off the container. The small offset is that overhang -
   (h/2)sin(0.82deg) on the tallest photo - which lands the corner on x0. */
.photo-card {
  width: 32.8125rem;         /* 525 incl. frame */
  margin: 1.5625rem 0 0 0.34375rem;  /* 5.5 - clears the rotation, see above */
  padding: var(--frame-border);
  background: var(--eco-frame);
  transform: rotate(-0.82deg);
  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.85);
}

.photo-card img {
  width: 100%;
}

/* Yellow key-dates panel. */
.date-block {
  width: 41.8125rem;         /* 669 */
  margin: 2rem 0 0;
  padding: 0.9375rem 1.25rem;
  background: var(--eco-yellow);
  color: var(--eco-black);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6875rem;      /* 27 */
  line-height: 1.4;
  text-align: center;
}

/* "Contact Support" under the photo, centred across the left rail. The comp
   sets the raw e-mail address here, left-aligned at x98; the live site sends
   people to the support page instead. */
.support-link {
  display: block;
  margin: 0.5625rem 0 0;
  color: var(--eco-muted);
  font-family: var(--font-display);
  font-size: 1.5rem;         /* 24 */
  letter-spacing: 0.01em;
  text-align: center;
}

.support-link:hover,
.support-link:focus-visible { color: var(--eco-white); }

/* --------------------------------------------------------------------------
   5. Centre rail
   -------------------------------------------------------------------------- */

/* The prize pitch sits in its own box so the three lines share a centre that
   is independent of the button stack below them. */
.hero-pitch {
  width: 37.1875rem;         /* 595, spans x755-1350 */
  margin-left: -0.3125rem;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--eco-yellow);
}

.hero-pitch p {
  margin: 0;
  font-size: 2.75rem;        /* 44 */
  line-height: 1.6;
}

.btn-eco-stack {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;             /* 90px boxes on a 100px pitch */
  width: 34.5625rem;         /* 553 */
  margin: 3.6875rem 0 0 1.5rem;
}

.btn-eco {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.625rem;      /* 90 */
  padding: 0 1rem;
  border: var(--btn-border) solid var(--eco-teal);
  background: var(--eco-black);
  color: var(--eco-yellow);
  font-family: var(--font-body);
  font-size: 2.25rem;        /* 36 */
  font-weight: 400;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-eco:hover,
.btn-eco:focus-visible {
  background: var(--eco-yellow);
  border-color: var(--eco-yellow);
  color: var(--eco-black);
}

/* --------------------------------------------------------------------------
   5b. Inner-page centre content

   The home page fills the centre track with the button stack. Every other page
   fills it with copy, which the comps set wider than the track: the text spans
   x668-1500, eating into the gutter on both sides. .rail-main--wide is that
   widened box; the components below live inside it.
   -------------------------------------------------------------------------- */

.rail-main--wide {
  width: var(--rail-main-wide);
  margin-left: -5.75rem;     /* the track starts x760, the copy starts x668 */
}

/* Centred yellow page heading - "Who Can Apply", "Choose Your Track". */
.eco-heading {
  margin: 0 0 1.3125rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 2.875rem;       /* 46 */
  line-height: 1.2;
  text-align: center;
  color: var(--eco-yellow);
}

/* The Rules comp sets its heading pair a step smaller than Who Can Apply's. */
.eco-heading--sm {
  font-size: 2.5rem;         /* 40 */
  margin-bottom: 0.5625rem;
}

/* Centred line carrying a standalone .eco-cta. It repeats the CTA's own type
   scale so connecting words ("or") sit on the same line rather than dropping to
   the inherited body size. */
.eco-cta-line {
  margin: 0 0 1.4375rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 2.5rem;         /* 40 */
  line-height: 1.2;
  text-align: center;
  color: var(--eco-yellow);
}

/* The eligibility list. Markers sit at x690, so they are drawn by hand rather
   than left to ::marker's browser-chosen offset.

   The comp sets this at 46/64.5, but its bullets are the spec's short ones. The
   real copy is longer - the age item runs 75 characters - and at 46 most of it
   wraps to two and three lines in the 832 column, which overruns the left rail
   and reads as a wall of yellow. 34 puts the short items back on one line and
   caps the longest at two, and the leading comes in to match. Wrapping is why
   the items also need space between them: at a flat 1.4 pitch a wrapped item
   and its neighbour are indistinguishable. */
.eco-bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--eco-yellow);
  font-family: var(--font-nav);
  font-size: 2.125rem;       /* 34 */
  line-height: 1.3;
}

.eco-bullets li {
  position: relative;
  padding-left: 2.75rem;     /* text column, x712 */
}

.eco-bullets li + li {
  margin-top: 0.75rem;       /* 12 - separates one item from the next when both wrap */
}

.eco-bullets li::before {
  content: "\2022";
  position: absolute;
  left: 1.375rem;            /* marker, x690 */
}

/* Deliverable lists sit at prose scale, not the eligibility page's display scale. */
.eco-bullets--sm {
  margin-bottom: 1.5rem;
  font-family: var(--font-copy);
  font-size: 1.75rem;        /* 28 */
  line-height: 1.45;
  color: var(--eco-white);
}

.eco-bullets--sm li { padding-left: 2.25rem; }
.eco-bullets--sm li::before { left: 0.75rem; color: var(--eco-yellow); }

/* These are short deliverable lines that do not wrap, so they keep the flat
   pitch rather than the eligibility list's item spacing. */
.eco-bullets--sm li + li { margin-top: 0; }

/* Paragraph copy - Overview, Choose Your Track, Submission Portal, Support.
   This used to carry a symmetric 30px inset to keep long copy off the right
   rail's corsair.com link. The link now starts at x1527, past the x1500 where
   this column ends, so the copy runs the full width of the track again. */
.eco-prose {
  margin: 0 0 1.5rem;
  font-family: var(--font-copy);
  font-size: 1.75rem;        /* 28 */
  line-height: 1.45;
  color: var(--eco-white);
}

/* Scoped to the rail's own children: inside a nested <section> these elements
   are first/last too, and resetting their margins there closes up the gap
   between one section and the next. */
.rail-main > .eco-prose:last-child { margin-bottom: 0; }

.eco-subhead {
  margin: 2.25rem 0 0.75rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 2.25rem;        /* 36 */
  line-height: 1.2;
  color: var(--eco-yellow);
}

.rail-main > .eco-subhead:first-child { margin-top: 0; }

/* Sections keep the same rhythm as a subhead would. */
.rail-main > section { margin-bottom: 2.25rem; }

/* Uppercase lead-in line, e.g. "THERE ARE TWO DISTINCT TRACKS:". */
.eco-lede {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;           /* 32 */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--eco-yellow);
}

/* The "CLICK HERE" / "ENTER TRACK 1 SUBMISSION TEMPLATE HERE" links. Yellow
   text that goes white on hover, matching .support-link and .rail-right__link
   rather than .btn-eco - at this size a solid fill reads as a highlighter. */
.eco-cta {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 2.5rem;         /* 40 */
  line-height: 1.2;
  color: var(--eco-yellow);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.15s ease;
}

.eco-cta:hover,
.eco-cta:focus-visible { color: var(--eco-white); }

/* A link inside a run of .eco-prose. */
.eco-inline-link {
  color: var(--eco-yellow);
  text-decoration: underline;
}

.eco-inline-link:hover,
.eco-inline-link:focus-visible { color: var(--eco-white); }

/* Key dates set as text rather than as the left rail's yellow panel. */
.eco-dates {
  margin: 2.5rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.875rem;       /* 30 */
  line-height: 1.6;
  text-align: center;
  color: var(--eco-yellow);
}

/* Judging: two rubric links, each a two-line title over a "Click Here". */
.rubric-block {
  margin: 0 0 5.375rem;
  text-align: center;
}

.rubric-block__title {
  margin: 0;
  font-family: var(--font-nav);
  font-weight: 500;
  font-size: 2.875rem;       /* 46 */
  line-height: 1.4;
  color: var(--eco-yellow);
}

.rubric-block .eco-cta {
  margin-top: 0.375rem;
  font-size: 3.125rem;       /* 50 */
  text-decoration: none;
}

.rubric-block .eco-cta:hover,
.rubric-block .eco-cta:focus-visible { text-decoration: underline; }

/* The disqualification note. The comp sets a 3.25 leading here - a 65px pitch
   on 20px text - which double-spaces the four lines and stops them reading as
   one paragraph. 1.5 holds it together as a block. */
.eco-note {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.25rem;        /* 20 */
  line-height: 1.5;
  text-align: center;
  color: var(--eco-yellow);
}

/* Rules: the big yellow block of dates and entry requirements. It fills the
   widened track, so it takes no width of its own. */
.info-panel {
  margin: 1.75rem 0 0;
  padding: 2.9375rem 1.875rem 3.5rem;
  background: var(--eco-yellow);
  color: var(--eco-black);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8125rem;      /* 29 */
  line-height: 1.25;
  text-align: center;
}

.info-panel dl { margin: 0; }
.info-panel dt { text-transform: uppercase; }
.info-panel dd { margin: 0 0 4.5rem; }   /* 145px label-to-label pitch */
.info-panel dd:last-of-type { margin-bottom: 3.25rem; }
.info-panel p { margin: 0 0 2.25rem; }
.info-panel p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   5c. FAQ page

   The only page the spec sets full width - it drops the three rails entirely.
   -------------------------------------------------------------------------- */

.faq-page {
  padding: 4.375rem 0 6.375rem;
}

.faq-page__title {
  margin: 0 0 3.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 3rem;           /* 48 */
  text-align: center;
  color: var(--eco-yellow);
}

/* Held well inside the shell: at the full 1920 the answers would run to ~140
   characters a line, which is unreadable. 68rem keeps them near 80. */
.faq-item {
  max-width: 68rem;          /* 1088 */
  margin: 0 auto 2.75rem;
}

.faq-item__q {
  margin: 0 0 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.75rem;        /* 28 */
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--eco-yellow);
}

.faq-item p {
  margin: 0 0 0.75rem;
  font-family: var(--font-copy);
  font-size: 1.5rem;         /* 24 */
  line-height: 1.5;
  color: var(--eco-white);
}

.faq-item p:last-child { margin-bottom: 0; }

.faq-footnote {
  max-width: 68rem;
  margin: 4rem auto 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.5rem;         /* 24 */
  text-align: center;
  color: var(--eco-yellow);
}

.faq-footnote a { text-decoration: underline; }
.faq-footnote a:hover { color: var(--eco-white); }

/* --------------------------------------------------------------------------
   6. Right rail
   -------------------------------------------------------------------------- */

/* The comp stops the right rail 47px short of the canvas edge, which was the
   1920 page's outer margin. The shell supplies that now, so all four children
   move right by a matched 2.9375rem (47) and the wordmark - the widest of them,
   and so the rail's true right edge - lands flush on the container. Shifting
   them together is what keeps the lockup's internal alignment intact. */
.rail-right__mark {
  width: 10.0625rem;         /* 161 */
  margin-left: 16.625rem;    /* x1666 */
}

/* Sized from the 348 wide crop. This is the one row whose right edge is load
   bearing - it is what puts the rail's edge on x1920 - so the trailing
   letter-spacing after the final R has to come back off, or the ink stops a
   full tracking step short of flush. Shrink-wrapping the box and pushing it
   right with auto is what makes the negative margin trim rather than widen. */
.rail-right__wordmark {
  width: max-content;
  font-size: 4.0233rem;      /* 64.4 */
  margin: 1.625rem -0.1859em 0 auto;  /* ends flush at x1920 */
}

/* Yellow panel with the downward point. Also carries the "Links" list on the
   inner pages, via the .banner-tail--links modifier. */
.banner-tail {
  width: 20.6875rem;         /* 331 */
  margin: 0.1875rem 0 0 11.3125rem;  /* x1581 */
  padding: 0.8125rem 1.25rem 9.0625rem;
  background: var(--eco-yellow);
  color: var(--eco-black);
  clip-path: polygon(0 0, 100% 0, 100% 81%, 50% 100%, 0 81%);
  text-align: center;
  font-family: var(--font-copy);
  font-size: 1.6875rem;      /* 27 */
  line-height: 1.11;         /* 30px pitch, as measured in the comp */
}

.banner-tail p { margin: 0 0 1.625rem; }
.banner-tail p:last-child { margin-bottom: 0; }
.banner-tail strong { font-weight: 700; }

.banner-tail--links {
  padding-top: 1.5rem;
  font-family: var(--font-nav);
  font-size: 1.875rem;       /* 30 */
  line-height: 1.15;
}

.banner-tail--links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.banner-tail--links a:hover,
.banner-tail--links a:focus-visible { text-decoration: underline; }

.banner-tail__title {
  margin: 0 0 1.375rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.875rem;       /* 30 */
}

/* "Entry Portal Templates:" breaks into a left-aligned pair of bullets. It is a
   nested ul, so `.banner-tail--links ul` already applies to it; this block has
   the same specificity and comes later, so it wins the properties it restates. */
.banner-tail--links .banner-tail__sub {
  gap: 0.375rem;
  margin-top: 0.625rem;
  padding-left: 0.625rem;    /* the Track bullets sit at x1567 */
  text-align: left;
}

.banner-tail__sub li {
  position: relative;
  padding-left: 1.375rem;
}

.banner-tail__sub li::before {
  content: "\2022";
  position: absolute;
  left: 0;
}

.rail-right__link {
  display: block;
  margin: 1.0625rem 0 0 7.9375rem;  /* x1527 - clear of the centre column's x1500 */
  color: var(--eco-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.5rem;         /* 24 */
  text-decoration: underline;
}

.rail-right__link:hover { color: var(--eco-yellow); }

/* --------------------------------------------------------------------------
   7. Divider + footer  (shared by every page)
   -------------------------------------------------------------------------- */

.section-divider {
  height: 2px;    /* matches the header's border-bottom, and scales with it */
  background: var(--eco-white);
  display: none; 
}

/* The background is not decoration here. The footer used to inherit black from
   body; the signed-in pages set a white body, and without this the whole legal
   block would render black-on-white at 21px. It has to be stated. */
.site-footer {
  padding: 6.375rem 0 5.3125rem;
  background: var(--eco-black);
  color: var(--eco-white);
  text-align: center;
}

.footer-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.footer-lockup__mark { width: 4.3125rem; }  /* 69 */

.footer-lockup__text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

/* Sized from the 200 / 388 wide crops. The rows are content-width flex items,
   so the footer's centre alignment does not reach inside them. */
.footer-lockup__wordmark { font-size: 2.3122rem; }  /* 37.0 */
.footer-lockup__line     { font-size: 1.5276rem; }  /* 24.4 */

.site-footer__heading {
  margin: 1.375rem 0 0;
  color: var(--eco-yellow);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.875rem;       /* 30 */
}

.site-footer__legal {
  max-width: 94rem;          /* 1504 */
  margin: 1.75rem auto 0;
  font-family: var(--font-legal);
  font-size: 1.3125rem;      /* 21 */
  line-height: 1.381;
  text-align: left;
}

.site-footer__credit {
  margin: 2.875rem 0 0;
  font-family: var(--font-body);
  font-size: 2.125rem;       /* 34 */
}

.site-footer__credit + .site-footer__credit {
  margin-top: 1.875rem;
}

/* Both credit lines are plain white in the comp - the sponsor URL is not
   underlined or tinted there either - so the resting state is left alone and
   the affordance only shows on hover, using the white-to-yellow the rest of
   the site's links use. */
.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
  color: var(--eco-yellow);
  text-decoration: underline;
}

/* Shrink-wraps the logo so only the logo is clickable, not the full-width strip
   a plain block anchor would give it. max-content picks up whatever width the
   image is set to, so the reflow override below needs no counterpart here. */
.site-footer__partner-link {
  display: block;
  width: max-content;
  margin-inline: auto;
  transition: opacity 0.15s ease;
}

.site-footer__partner-link:hover,
.site-footer__partner-link:focus-visible {
  opacity: 0.75;
}

.site-footer__partner {
  width: 23.375rem;          /* 374 */
  margin: 0.375rem auto 0;
}

/* --------------------------------------------------------------------------
   7b. Home page  (screenshtos/corsair-layout-home.png)

   The home comp is a layout of its own: a two-column band - full-bleed photo
   left, one dark content column right - with the footer split across those
   same two columns. None of the three-rail template survives on it.

   Everything here is scoped to .home-bleed, which sits on <html> rather than
   <body>, left from when it capped the root font-size; the overrides below
   would work on either. The nav and footer are not forked - they inherit the token overrides and
   the handful of box-model overrides below, and no other page sees either.

   Measurements come off a 4356px-wide comp, so design_px = canvas_px / 2.26875
   and then rem = design_px / 16 as everywhere else. The page is 1920 x 1632.
   -------------------------------------------------------------------------- */

html.home-bleed {
  /* The comp's palette, which is not the site's: a soft black rather than
     #000, and a fourth brand yellow after #ebe81a, #deff00 and #fff000.
     Redefined here so the shared nav and footer pick them up on this page
     only - the client still owes a ruling on one site yellow. See CLAUDE.md. */
  --eco-black: #231f20;
  --eco-yellow: #fef200;
  --eco-muted: #bfbfc1;        /* the sponsor credit under the photo */
  --eco-slate: #58595b;        /* the CORSAIR blurb panel            */
}

/* .shell centres a 1320 track everywhere else; here it stops at the 1440 the
   12px cap resolves 120rem to, and below that it is the guttered viewport. */
.home-bleed .shell {
  width: 100%;
  max-width: var(--shell);
}

/* ---- Nav ----------------------------------------------------------------
   Moved to section 3 and shared with .site-nav--hori; the reflow pair is in
   the max-width block alongside it. */

/* ---- The two-column band ------------------------------------------------ */

.home-hero {
  display: grid;
  min-height: 92.75rem;        /* 1484 - home's own band, a hair under so it
                                  never rounds home's credit off its pixel.
                                  The pages that share this layout are shorter
                                  and would otherwise pull the credit and the
                                  legal block up off the bottom, where every
                                  comp bottoms them out. */
  grid-template-columns: 53.5rem 1fr;   /* photo 856, content takes the rest */
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
}

.home-hero__aside {
  display: flex;
  flex-direction: column;
}

.home-hero__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 856 / 1175;
}

.home-hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- The prize banners over the photo -----------------------------------
   Three boxes with staggered left edges, each outlined in a 3px white rule.
   They stack overlapping by that rule's width, so the shared edges stay one
   line thick rather than two, which is what the comp draws. */

.home-win {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11.625rem;           /* 186 above the photo's bottom edge */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-win__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;                   /* Bootstrap's reboot would space the stack */
  border: 0.1875rem solid var(--eco-white);   /* 3 */
  font-family: var(--font-nav);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}

.home-win__box + .home-win__box { margin-top: -0.1875rem; }

.home-win__win {
  margin-left: 18.8125rem;     /* 301 */
  width: 14.625rem;            /* 234 */
  height: 8.5625rem;           /* 137 */
  background: var(--eco-black);
  color: var(--eco-white);
  font-size: 3.4375rem;        /* 55  */
  text-align: center;
}

.home-win__prize {
  margin-left: 7.9375rem;      /* 127 */
  width: 37.375rem;            /* 598 */
  height: 9rem;                /* 144 */
  padding-inline: 2.5rem;      /* 40  */
  background: var(--eco-yellow);
  color: var(--eco-black);
  font-size: 2.9375rem;        /* 47  */
}

/* The comp hangs line 1 off the box's left edge and line 2 off its right.
   That is the same stagger the three boxes make, not a centred block. */
.home-win__prize span + span { text-align: right; }

.home-win__tech {
  margin-left: 10.9375rem;     /* 175 */
  width: 37.375rem;            /* 598 */
  height: 6.0625rem;           /* 97  */
  background: var(--eco-white);
  color: var(--eco-black);
  font-size: 2.0625rem;        /* 33  */
  font-style: italic;
  text-align: center;
}

/* ---- Sponsor credit, bottom of the photo column -------------------------
   margin-top:auto drops it to the foot of the column, where the comp bottoms
   it out against the legal block in the other one. Its 86 inset is the comp's
   own and is not the nav's 60. */

.home-credit {
  display: flex;
  align-items: center;
  gap: 3.0625rem;              /* the comp's 43, plus the 6 our credit
                                  line renders narrower than its own */
  margin-top: auto;
  padding: 2.5rem 0 5.625rem 5.375rem;   /* 90 below, 86 in */
}

.home-credit__text {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 1.375rem;         /* 22 */
  line-height: 1.24;
  color: var(--eco-muted);
}

.home-credit .site-footer__partner-link { margin-inline: 0; }

.home-credit__partner { width: 16.125rem; }   /* 258 */

/* ---- The content column ------------------------------------------------- */

.home-main {
  display: flex;               /* so .page-body can take the slack on the
                                  pages that share this layout; home's own
                                  margins are one-directional, so none of them
                                  were collapsing and nothing here moves */
  flex-direction: column;
  margin-left: 3.4375rem;      /* 55 - photo ends x856, column starts x911 */
  padding-right: 3.75rem;      /* 60 - content ends x1860 */
  padding-bottom: 3.625rem;    /* 58 */
  font-family: var(--font-nav);
}

/* The comp indents the headline block 49 past the grey panel and the footer
   copy beneath it, both of which sit flush to the column's own left edge. */
.home-intro { padding-left: 3.0625rem; }

.home-intro__title {
  margin: 0;
  padding-top: 4.9375rem;      /* nav ends y146, the cap lands y231 */
  font-size: 3.25rem;          /* 52 */
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.home-intro__sub {
  margin: 0.5rem 0 0;
  font-size: 2.1875rem;        /* 35 */
  font-weight: 400;
  font-style: italic;
  line-height: 1;
}

.home-dates {
  margin: 3.25rem 0 0;
  font-size: 2.1875rem;        /* 35 */
  line-height: 1.185;          /* 41.5 pitch */
  color: var(--eco-yellow);
}

.home-dates + .home-dates { margin-top: 2.5625rem; }

.home-links {
  margin: 2.8125rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 2rem;             /* 32 - the comp sets these smaller than the dates */
  line-height: 1.1875;         /* 38 pitch */
}

.home-links a:hover,
.home-links a:focus-visible { color: var(--eco-yellow); }

/* ---- The CORSAIR blurb panel -------------------------------------------- */

.home-panel {
  margin-top: 5.625rem;        /* 90 */
  padding: 2.625rem 2.375rem;  /* 42 / 38 */
  background: var(--eco-slate);
}

/* Floated, so the first paragraph wraps beside it and the rest run full width
   underneath - which is what the comp draws.

   The sail crop is an opaque white-on-black PNG (see README-assets.md), which
   would show as a black tile on the grey panel. screen drops the black and
   leaves the white, so no second asset is needed and assets/img/ stays
   generated-only. */
.home-panel__mark {
  float: left;
  width: 4.1875rem;            /* 67 */
  margin: 0.3125rem 1.6875rem 0 0;
  mix-blend-mode: screen;
}

.home-panel p {
  margin: 0;
  font-size: 1.5625rem;        /* 25 */
  line-height: 1.24;           /* 31 pitch */
}

.home-panel p + p { margin-top: 2.0625rem; }   /* 33 */

/* The comp never splits the compound across a line; left to itself the browser
   breaks at its hyphen and leaves "high-" hanging. */
.home-panel__keep { white-space: nowrap; }

/* ---- The footer copy, in the same column -------------------------------- */

.home-rules {
  margin: 1.625rem 0 0;        /* 26 under the panel */
  font-size: 1.4375rem;        /* 23 */
  line-height: 1.2;
  color: var(--eco-yellow);
}

.home-legal {
  margin: 0.875rem 0 0;
  font-size: 1.125rem;         /* 18 */
  line-height: 1.15;           /* 21 pitch */
}

/* The comp leaves every link in the legal block unstyled; underlined on the
   client's instruction, so Privacy Policy and the rest read as links. */
.home-rules a,
.home-legal a { text-decoration: underline; }

.home-rules a:hover,
.home-rules a:focus-visible { color: var(--eco-white); }

.home-legal a:hover,
.home-legal a:focus-visible { color: var(--eco-yellow); }

/* --------------------------------------------------------------------------
   7c. Inner pages on the home layout

   overview.html, who-can-apply.html, judging-rubric.html and
   teacher-resources.html take section 7b's page whole - the nav, the photo
   with its prize banners, the sponsor credit, the headline block and the
   split footer are all home's, to the pixel - and change only the block
   between the subtitle and the Official Rules line.

   The client comped the content column alone, so all four crops are measured
   against home's own geometry: 1.769 design px per comp px, calibrated on the
   844-wide headline ink that every crop shares.

   The block starts on the headline's edge (x960), on the client's instruction.
   -------------------------------------------------------------------------- */

.page-body {
  flex: 1 1 auto;              /* takes the slack, so the footer copy stays
                                  bottomed out as it is on home */
  margin-top: 3.75rem;         /* 60 under the subtitle */
  padding-left: 3.0625rem;     /* 49 - flush with the headline, x960 */
}

.page-heading {
  margin: 0;
  font-size: 2rem;             /* 32 */
  font-weight: 700;
  line-height: 1.2;
}

.page-heading--caps { text-transform: uppercase; }
.page-heading--centre { text-align: center; }

/* ---- Running copy: overview.html ---------------------------------------- */

.page-prose {
  margin: 2rem 0 0;            /* 32 */
  font-size: 1.65625rem;       /* 26.5 */
  line-height: 1.207;          /* 32 pitch */
}

.page-prose--lede,
.page-key { color: var(--eco-yellow); }

/* ---- Bullets: who-can-apply.html ----------------------------------------
   The comp prints a literal dash rather than a bullet, so the marker is in
   the copy and the list carries none of its own. */

.page-list {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 1.625rem;         /* 26 - the comp's own 26.5 runs its longest
                                  bullet 9 past the column's right edge */
  line-height: 1.22;
}

.page-list li + li { margin-top: 2rem; }   /* 32 - a 64 pitch */

.page-list li::before { content: "- "; }

/* ---- Download rows: teacher-resources.html ------------------------------ */

.page-heading + .page-rows { margin-top: 2rem; }      /* 32 */

.page-rows {
  margin: 2.875rem 0 0;        /* 46 - a 93 pitch */
  font-size: 2.4375rem;        /* 39 */
  line-height: 1.2;
}

.page-rows a {
  color: var(--eco-yellow);
  text-decoration: underline;
}

/* ---- Rubric blocks: judging-rubric.html ---------------------------------
   Centred on the column, where the comp centres on x1366 against its true
   x1384 - the comp's own drift, not a narrower measure. */

.page-heading + .page-rubric { margin-top: 4.0625rem; }   /* 65 */

.page-rubric {
  margin-top: 2.9375rem;       /* 47 - a 94 pitch between the two blocks */
  font-size: 2.4375rem;        /* 39 */
  line-height: 1.2;
  text-align: center;
}

.page-rubric__title,
.page-rubric__link { margin: 0; }

.page-rubric a {
  color: var(--eco-yellow);
  text-decoration: underline;
}

.page-note {
  margin: 3.4375rem 0 0;       /* 55 */
  font-size: 1.5rem;           /* 24 */
  line-height: 1.33;           /* 32 pitch */
  color: var(--eco-muted);
}

/* ---- The Links list -----------------------------------------------------
   On every page but Overview, which the comp leaves without one. Indented
   95 past the body's edge, its own inset. Each page lists itself, as drawn. */

.page-links {
  margin: 0;
  padding: 3.5rem 0 0 5.9375rem;   /* 56 above, 95 in */
}

.page-links__title {
  margin: 0;
  font-size: 2.4375rem;        /* 39 */
  font-weight: 700;
  line-height: 1.2;
  color: var(--eco-yellow);
}

.page-links ul {
  margin: 0.125rem 0 0;        /* 2 */
  padding: 0;
  list-style: none;
  font-size: 2rem;             /* 32 */
  line-height: 1.3;            /* 42 pitch */
}

.page-links a { text-decoration: underline; }
.page-links a:hover,
.page-links a:focus-visible { color: var(--eco-yellow); }

/* The dates block is not in the comp - it is overview.html's own, kept at
   the page's copy size rather than the headline block's 35. */
.page-dates {
  margin: 3rem 0 0;            /* 48 */
  font-size: 1.65625rem;       /* 26.5 */
  line-height: 1.3;
  color: var(--eco-yellow);
}


/* --------------------------------------------------------------------------
   8. Light theme  (the signed-in area)

   Everything above this line is white-on-black marketing. login, signup and
   the two dashboard pages invert that. It is a body class rather than a
   separate stylesheet so the nav lockup and the footer stay one component -
   those two are copied verbatim onto the light pages and must not fork.

   Nothing below section 8 applies to the nine marketing pages.
   -------------------------------------------------------------------------- */

body.theme-light {
  background: var(--eco-paper);
  color: var(--eco-black);
}

/* --------------------------------------------------------------------------
   9. Form controls  (shared by the auth pages and the workspace)
   -------------------------------------------------------------------------- */

/* The comps draw every text control as a flat grey box with a hairline border
   and no radius. Height 62 on the auth pages, which is also the pitch the
   workspace's single-line fields use. */
.field {
  position: relative;
  margin: 0 0 2.3125rem;
}

.field__control,
.field__select {
  display: block;
  width: 100%;
  min-height: 3.875rem;      /* 62 */
  padding: 0.5rem 1.25rem;
  border: var(--hairline) solid var(--eco-field-line);
  border-radius: 0;
  background: var(--eco-field);
  color: var(--eco-black);
  font-family: var(--font-display);
  font-size: 1.75rem;        /* 28 */
  line-height: 1.4;
}

/* Placeholder-as-label is what the comps draw. Every control still carries a
   real <label> - visually hidden where the comp shows none - because the
   placeholder disappears the moment anything is typed. */
.field__control::placeholder { color: var(--eco-hint); opacity: 1; }

/* The team-code box, which the two team comps centre. */
.field__control--centre { text-align: center; }

.field__control:focus-visible,
.field__select:focus-visible {
  outline: 0.125rem solid var(--eco-black);
  outline-offset: 0.125rem;
}

textarea.field__control {
  min-height: 11.25rem;      /* 180 */
  resize: vertical;
}

/* The eye button inside the password fields. Sits on the control's own right
   edge, so it scales with it. */
.field__reveal {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 3.875rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--eco-black);
  cursor: pointer;
}

.field__reveal svg {
  width: 2rem;
  height: 2rem;
  display: block;
}

/* Only one of the two icons is ever shown; the script flips the flag. */
.field__reveal .field__reveal-on  { display: none; }
.field__reveal[aria-pressed="true"] .field__reveal-on  { display: block; }
.field__reveal[aria-pressed="true"] .field__reveal-off { display: none; }

/* Checkbox + label pair. align-items: start keeps the box on the first line
   when the label wraps, which the attestation on the workspace does. */
.check {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  font-family: var(--font-display);
  font-size: 1.625rem;       /* 26 */
  line-height: 1.35;
}

.check input {
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
  margin: 0.0625rem 0 0;
  accent-color: var(--eco-black);
}

.check + .check { margin-top: 0.75rem; }

.check a {
  color: #0645ad;
  text-decoration: underline;
}

.req { color: #e02020; }

/* Solid action button - SUBMIT, SAVE PROGRESS. The accent modifier is the
   workspace's SUBMIT THIS TRACK, which sets its label in the brand yellow. */
.btn-app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.125rem;      /* 66 */
  padding: 0 2.5rem;
  border: 0;
  background: var(--eco-black);
  color: var(--eco-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;           /* 32 */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn-app:hover,
.btn-app:focus-visible { opacity: 0.8; }

/* Disabled while an upload is in flight, and before upload.js has run. */
.btn-app:disabled,
.btn-app:disabled:hover { opacity: 0.4; cursor: default; }

.btn-app--accent { color: var(--eco-yellow); }

/* --------------------------------------------------------------------------
   10. Auth pages  (login.html, signup.html)

   These two keep the marketing .site-nav and .site-footer - they are reached
   from the public site - and put a single centred form column between them.
   The two comps are exported at slightly different zooms (a 692 column on
   login, 600 on signup); one width serves both.
   -------------------------------------------------------------------------- */

.auth-page {
  padding: 9.375rem 1.25rem 12.5rem;
}

.auth-form {
  width: var(--auth-col);
  max-width: 100%;
  margin-inline: auto;
}

.auth-title {
  margin: 0 0 1.875rem;
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: 2.75rem;        /* 44 */
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--eco-black);
}

/* Fields on the signup page group into blocks - credentials, name, school -
   with a wider gap between groups than within one. */
.auth-group + .auth-group { margin-top: 2.5rem; }

/* "Keep me logged in" on the left, "Forgot Password?" on the right. */
.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 3.75rem;
}

.auth-link {
  font-family: var(--font-display);
  font-size: 1.625rem;       /* 26 */
  color: var(--eco-black);
}

.auth-link:hover,
.auth-link:focus-visible { text-decoration: underline; }

/* SUBMIT on the left, "Don't have an account yet?" on the right. */
.auth-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 3.75rem;
}

.auth-consent { margin-top: 3.75rem; }

/* --------------------------------------------------------------------------
   10b. Prizes page  (prizes.html)

   Light like the auth pages, full width like the FAQ: corsair-prizes.png
   drops the three rails and sets the whole page black-on-white. Its content
   is drawn on the 1920 canvas even though its nav is pasted in at the 0.689
   scale the signed-in header used at the time, so the measurements below are
   read off it directly.
   -------------------------------------------------------------------------- */

.prize-page {
  padding: 4.375rem 0 6.375rem;
}

/* The comp draws its bands at three different widths; one 1650 column is what
   they all normalise to. */
.prize-shell {
  max-width: 103.125rem;     /* 1650 */
  margin-inline: auto;
}

.prize-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5625rem;            /* 9 - the gap the comp leaves after the sail */
  padding: 2.6875rem 3.375rem 1.25rem;
  background: var(--eco-black);
}

.prize-banner__mark { width: 2.9375rem; }  /* 47 */

/* Held to the footer lockup's fitted ratio: 47/69 x 37.0. */
.prize-banner__wordmark { font-size: 1.5757rem; }  /* 25.2 */

.prize-banner__title {
  flex: 1 0 100%;
  margin: 2.3125rem 0 0;
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 3.75rem;        /* 60 */
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--eco-yellow);
}

.prize-title {
  margin: 3.75rem 0 0;
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 3.75rem;        /* 60 */
  line-height: 1;
  text-transform: uppercase;
  color: var(--eco-black);
}

.prize-lede {
  margin: 1.5rem 0 0;
  font-family: var(--font-nav);
  font-style: italic;
  font-size: 1.75rem;        /* 28 */
  line-height: 1.4;
  color: var(--eco-hint);
}

.prize-group { margin-top: 2.5rem; }

.prize-group__bar {
  margin: 0;
  padding: 0.625rem 2.5rem;
  background: var(--eco-black);
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 1.875rem;       /* 30 */
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--eco-yellow);
}

/* Two equal columns. The second cell's own left border draws the divider, so
   the grid needs no gap and the outer box stays square. */
.prize-group__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 0.125rem solid var(--eco-black);
  border-top: 0;
}

.prize-cell { padding: 2.5rem; }

.prize-cell + .prize-cell { border-left: 0.125rem solid var(--eco-black); }

.prize-cell__track {
  margin: 0 0 1.375rem;
  font-family: var(--font-nav);
  font-size: 1.9375rem;      /* 31 */
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--eco-hint);
}

.prize-cell__label {
  margin: 0 0 0.75rem;
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 1.5rem;         /* 24 */
  letter-spacing: 0.16em;    /* the comp tracks this row far wider than the rest */
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--eco-black);
}

.prize-cell__body,
.prize-cell__list {
  margin: 0;
  font-family: var(--font-nav);
  font-size: 1.625rem;       /* 26 */
  line-height: 1.45;
  color: var(--eco-hint);
}

/* The comp marks every item with an em dash rather than a bullet. */
.prize-cell__list {
  padding: 0;
  list-style: none;
}

.prize-cell__list li { margin-bottom: 0.625rem; }
.prize-cell__list li:last-child { margin-bottom: 0; }
.prize-cell__list li::before { content: "\2014\00a0"; }

.prize-cell__list strong {
  font-weight: 500;
  color: var(--eco-black);
}

.prize-cell__arv {
  margin: 0.6875rem 0 0;
  font-family: var(--font-nav);
  font-style: italic;
  font-size: 1.5rem;         /* 24 */
  line-height: 1.4;
  color: var(--eco-hint);
}

/* --------------------------------------------------------------------------
   10c. Official Rules page  (official-rules2.html)

   Light and full width, like the prizes page. The client's screenshot keeps
   the source document's own look: a centred masthead, and every heading
   picked out in yellow on a black highlight that runs only as wide as its
   own text - so .legal-mark is an inline box, never a band.
   -------------------------------------------------------------------------- */

.legal-page {
  padding: 4.375rem 0 6.375rem;
}

.legal-title {
  margin: 0 0 1.125rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 3rem;           /* 48 */
  line-height: 1.1;
  text-align: center;
  color: var(--eco-black);
}

.legal-mark {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  background: var(--eco-black);
  color: var(--eco-yellow);
}

.legal-subtitle {
  margin: 0 0 1.75rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 2.375rem;       /* 38 */
  line-height: 1.3;
  text-align: center;
}

.legal-lede {
  max-width: 68rem;
  margin: 0 auto 3rem;
  font-family: var(--font-copy);
  font-size: 1.5rem;         /* 24 */
  line-height: 1.4;
  text-align: center;
  color: var(--eco-black);
}

/* The FAQ's measure, and for the same reason: at the full 1920 the copy would
   run to ~140 characters a line. */
.legal-rule {
  max-width: 68rem;
  margin: 0 auto 2.5rem;
}

.legal-rule__title {
  margin: 0 0 0.875rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.625rem;       /* 26 */
  line-height: 1.3;
}

.legal-rule p {
  margin: 0 0 0.75rem;
  font-family: var(--font-copy);
  font-size: 1.5rem;         /* 24 */
  line-height: 1.45;
  color: var(--eco-black);
}

.legal-rule > :last-child { margin-bottom: 0; }

.legal-list {
  margin: 0 0 0.75rem;
  padding-left: 2.5rem;
  font-family: var(--font-copy);
  font-size: 1.5rem;         /* 24 */
  line-height: 1.45;
  color: var(--eco-black);
}

.legal-list li { margin-bottom: 0.5rem; }
.legal-list li:last-child { margin-bottom: 0; }

/* Rule 13 is one long disclaimer the source sets in bold capitals throughout. */
.legal-caps { font-weight: 700; }

.legal-rule a { text-decoration: underline; }
.legal-rule a:hover,
.legal-rule a:focus-visible { background: var(--eco-black); color: var(--eco-yellow); }

/* --------------------------------------------------------------------------
   11. App shell  (dashboard/)

   The header is the marketing one - .site-nav--hori, the same rules home and
   the auth pages run. It used to be that nav shrunk to 0.689, the factor the
   four early comps drew; the client's later screenshot sets it at full size
   with the page's own name centred in the bar. Centring that name is now the
   only thing .site-nav--app does.
   -------------------------------------------------------------------------- */

/* Absolute so neither the lockup nor the account links can pull it off centre. */
.site-nav--app .site-nav__inner { position: relative; }

.site-nav__page {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-nav);
  font-size: 1.4375rem;    /* 23 - the links beside it */
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--eco-yellow);
  white-space: nowrap;
}

/* Two links only, so they never need the collapse the marketing menu uses. */
.site-nav__account {
  display: flex;
  align-items: center;
  gap: 3.0625rem;
  margin-left: auto;
}

/* The sidebar column is a fixed 308 of the 1920 canvas; the content takes the
   rest. Grid rather than flex so the grey rail stretches to the taller of the
   two, which is what the comps show at the foot of both pages. */
.app-shell {
  display: grid;
  grid-template-columns: var(--side-nav) 1fr;
}

.side-nav {
  background: var(--eco-panel);
  border-right: var(--hairline) solid var(--eco-black);
  font-family: var(--font-nav);
  font-size: 1.25rem;        /* 20 */
}

/* The white cell at the top naming the page you are on. It is the only part
   of the rail that is not grey, and it reads as a tab. */
.side-nav__current {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6.0625rem;     /* 97 */
  margin: 0;
  padding: 0 1rem;
  background: var(--eco-paper);
  border-bottom: var(--hairline) solid var(--eco-black);
  font-weight: 400;
  font-size: 1.5rem;         /* 24 */
  color: var(--eco-black);
}

.side-nav__groups { padding: 2.75rem 0 4rem; }

/* The rail is a Bootstrap .collapse so it can fold away on a phone. Above the
   breakpoint there is nothing to fold, so it is forced open - same override
   .site-nav__collapse needs, for the same reason. */
@media (min-width: 1200px) {
  .side-nav__groups { display: block !important; }
}

.side-nav__group {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The comp separates the three groups - workspaces, account, reference - with
   whitespace rather than a rule. */
.side-nav__group + .side-nav__group { margin-top: 2.5rem; }

.side-nav__group li + li { margin-top: 1.375rem; }

/* The inset is 24 rather than the comp's 30 so that the longest item - ADD
   PARENT INFORMATION, at 22 characters - still clears the 308 column on one
   line. The comp sets this type smaller than is comfortable to read; 20 is as
   far down as it goes here, and the inset makes up the difference. */
.side-nav__link {
  display: block;
  padding: 0.125rem 0.5rem 0.125rem 1.5rem;
  color: var(--eco-black);
  text-transform: uppercase;
}

.side-nav__link:hover,
.side-nav__link:focus-visible { text-decoration: underline; }

/* The active workspace's sub-items on track-2-workspace.html. */
.side-nav__link--sub { padding-left: 3.75rem; }

/* Everything the comps link to that has no page yet. Muted and inert rather
   than a live link to a 404 - see CLAUDE.md for the list. */
.side-nav__link--todo,
.side-nav__link--todo:hover,
.side-nav__link--todo:focus-visible {
  color: var(--eco-hint);
  text-decoration: none;
  cursor: default;
}

.side-nav__toggle { display: none; }

/* Insets are asymmetric per the comps, and absorb any width past --app-measure. */
.app-main {
  --app-slack: max(0rem, (100% - 6.25rem - 8.75rem - var(--app-measure)) / 2);
  padding: 3.75rem calc(8.75rem + var(--app-slack))
           7.5rem  calc(6.25rem + var(--app-slack));
  background: var(--eco-paper);
}

.app-title {
  margin: 0;
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: 3.75rem;        /* 60 -> 43px cap height, as measured */
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  color: var(--eco-black);
}

.app-lede {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.25rem;        /* 36 */
  line-height: 1.3;
  text-align: center;
  color: var(--eco-black);
}

.app-sub {
  margin: 0.625rem 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.125rem;       /* 34 */
  line-height: 1.35;
  text-align: center;
  color: var(--eco-black);
}

/* Body copy. The comps set the whole signed-in area in the squared condensed
   face, headings and paragraphs alike - not the Source Sans the marketing
   pages use for prose. */
.app-prose {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;           /* 32 */
  line-height: 1.3;
  color: var(--eco-black);
}

.app-prose:last-child { margin-bottom: 0; }
.app-prose strong { font-weight: 700; }

.app-heading {
  margin: 3.5rem 0 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.25rem;        /* 36 */
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--eco-black);
}

/* The centred section headings - YOUR CHALLENGE, WHAT IS REPAIRABILITY? */
.app-heading--centre {
  margin-top: 4.5rem;
  font-size: 1.875rem;       /* 30 */
  text-align: center;
}

/* Track 1 sets its section headings in title case at regular weight - PROBLEM
   STATEMENT, REFURBISHMENT POTENTIAL - rather than the bold caps the rest of
   the app uses. Size and rhythm are unchanged. */
.app-heading--plain {
  font-weight: 400;
  text-transform: none;
}

/* The smaller trailing clause on some of them: "(Must do a minimum of 4)". */
.app-heading__note {
  margin-left: 0.75rem;
  font-size: 1.75rem;        /* 28 */
}

/* Dash-marker lists, which is how both comps draw every list. */
.app-list {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.35;
  color: var(--eco-black);
}

.app-list li {
  position: relative;
  padding-left: 2.125rem;
}

.app-list li::before {
  content: "\2013";
  position: absolute;
  left: 0.75rem;
}

/* The glossary's definition list. The deck runs each term into its own
   definition rather than stacking them, so dt and dd are set inline inside a
   per-entry wrapper - that keeps the term/definition pairing for a screen
   reader while reproducing the layout. The colon is drawn by CSS so it can
   never go missing from the markup, which is exactly what happened three
   times in the source deck. */
.gloss-list {
  margin: 2.5rem 0 0;
}

.gloss-item {
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;           /* 32 - the .app-prose scale */
  line-height: 1.3;
  color: var(--eco-black);
}

.gloss-item:last-child { margin-bottom: 0; }

.gloss-item dt {
  display: inline;
  font-weight: 700;
}

.gloss-item dt::after { content: ":"; }

.gloss-item dd {
  display: inline;
  margin: 0;
}

/* The Design FAQ's question blocks. The client's mockup picks its first
   question out in yellow on a black bar and leaves the other ten plain; a
   yellow rule carries the same accent down the whole list without turning
   every question into a banner - and --eco-yellow as ink on white paper is
   not legible anyway. The one place the black-and-yellow does earn its
   weight, the closing call to action, reuses .band instead. */
.app-faq {
  margin: 0 0 2.5rem;
  border-left: var(--btn-border) solid var(--eco-yellow);
  padding-left: 1.75rem;     /* 28 */
}

.app-faq__q {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.125rem;       /* 34 - between .app-heading's 36 and the 32 answer */
  line-height: 1.25;
  color: var(--eco-black);
}

.app-link {
  color: var(--eco-hint);
  text-decoration: underline;
}

.app-link:hover,
.app-link:focus-visible { color: var(--eco-black); }

/* The keyboard example sets its closing paragraph beside the photograph. */
.app-figure-row {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  margin-bottom: 1.5rem;
}

.app-figure-row > :first-child { flex: 1 1 auto; }

.app-figure {
  flex: none;
  width: 26.5rem;            /* 424 */
  margin: 0;
}

/* Inline black/yellow workspace buttons. The border is transparent rather than
   absent so the fill and the outline state below are the same box - swapping
   one for the other must not move the label or change the button's height.
   cursor is set explicitly because these are also drawn on href="#" links,
   where the pointer is the only thing that says the label is a control. */
.btn-track {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4375rem;     /* 55 */
  padding: 0 1.75rem;
  border: var(--btn-border) solid transparent;
  background: var(--eco-black);
  color: var(--eco-yellow);
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: 2rem;           /* 32 */
  letter-spacing: 0.01em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Hover inverts to the yellow the label was drawn in rather than fading the
   whole button - a translucent black button on a white page goes grey, which
   reads as disabled at the exact moment it is being pointed at. */
.btn-track:hover,
.btn-track:focus-visible {
  background: var(--eco-yellow);
  border-color: var(--eco-black);
  color: var(--eco-black);
}

/* Nothing here is built yet - Track 1's workspace, the glossary PDF - so the
   button is drawn as an empty outline instead of a filled one. Greying the
   label inside the black fill reads as a redacted bar, and fading the whole
   button turns that fill light grey, which reads as a rendering fault. An
   outline reads as a button waiting for its destination, which is what it is.
   It keeps the pointer and a hover state: the control is real, and the page
   says elsewhere that the file has not arrived yet. */
.btn-track[aria-disabled="true"] {
  background: transparent;
  border-color: var(--eco-field-line);
  color: var(--eco-hint);
}

.btn-track[aria-disabled="true"]:hover,
.btn-track[aria-disabled="true"]:focus-visible {
  background: transparent;
  border-color: var(--eco-hint);
  color: var(--eco-black);
}

.btn-track-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0 4.5rem;
}

/* The closing pair on the dashboard stacks and sits left, unlike the centred
   pair under the page title. */
.btn-track-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   11b. App forms  (the workspace and the four account pages in dashboard/)
   -------------------------------------------------------------------------- */

.app-form { margin-top: 4.5rem; }

/* The account forms hang a narrow column off the centre, as the comps draw it. */
.app-form--narrow {
  width: var(--auth-col);
  max-width: 100%;
  margin-inline: auto;
}

.field-label {
  display: block;
  margin: 0 0 0.375rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.875rem;       /* 30 */
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--eco-black);
}

/* The grey explanatory line that sits between a label and its control. */
.field-hint {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.625rem;       /* 26 */
  line-height: 1.3;
  color: var(--eco-hint);
}

.field-note {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-size: 1.75rem;        /* 28 */
  color: var(--eco-black);
}

/* An inline label and control on one line - "What would you change?" */
.field-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2.3125rem;
}

.field-inline .field-label { margin: 0; }
.field-inline .field__select { width: auto; min-width: 18rem; }
.field-inline .field__control { flex: 1 1 26rem; width: auto; max-width: 46rem; }

/* Track 1 draws every dropdown outside its audit cards at a third of the
   column. Pinned rather than sized to content so they stay aligned once the
   client supplies the option lists. */
.field__select--short { width: 32.5rem; max-width: 100%; }
.field-inline .field__select--short { width: 32.5rem; min-width: 0; }

/* Track 1's audit cards line two of these up, so their labels share a column. */
.field-inline--label-col .field-label { width: 11rem; }

.field-set {
  margin: 0 0 2.3125rem;
  padding: 0;
  border: 0;
}

.field-set legend { padding: 0; }

.field-choices {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.field-choices li + li { margin-top: 0.5rem; }

/* The Materials list. The comp fills it column-wise - Plastic down to Paper or
   cardboard, then Wood down to Other - which is what grid-auto-flow buys. */
.field-choices--cols {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(9, auto);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3rem;
  row-gap: 0.5rem;
}

/* The Yes/No pairs, which sit beside their question rather than under it. */
.field-choices--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin: 0;
}

.field-choices--cols li + li,
.field-choices--inline li + li { margin-top: 0; }

/* The file inputs. The comp labels these buttons "UPLOAD VIDEO" and "UPLOAD
   VISUAL" - copy, not chrome - and no browser lets CSS rewrite the text on a
   native file control. So the input itself is visually hidden behind a <label>
   that carries the real wording, and the script writes the chosen filename
   into the span beside it.

   Hidden with .sr-only, not display:none, so the control keeps its place in
   the tab order; the focus ring is forwarded to the label below. */
.upload {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 0.75rem;
}

.upload__button {
  display: inline-block;
  padding: 0.4375rem 1.25rem;
  border: var(--hairline) solid var(--eco-hint);
  background: var(--eco-field);
  color: var(--eco-black);
  font-family: var(--font-display);
  font-size: 1.75rem;        /* 28 */
  line-height: 1.3;
  text-transform: uppercase;
  cursor: pointer;
}

.upload__button:hover { background: var(--eco-panel); }

.upload__input:focus-visible + .upload__button {
  outline: 0.125rem solid var(--eco-black);
  outline-offset: 0.125rem;
}

/* Where the button is an <a> to the upload page, it takes the ring itself. */
a.upload__button:focus-visible {
  outline: 0.125rem solid var(--eco-black);
  outline-offset: 0.125rem;
}

.upload__name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--eco-black);
}

/* The chunked uploader's own furniture: a progress bar while the file goes up,
   and the file-plus-delete readout that replaces the button once it lands. Both
   halves of that swap sit in the page and upload.js toggles [hidden] - which
   needs the !important here, because .upload and .btn-row both set display and
   would beat the browser's own [hidden] rule. */
.app-form [hidden] { display: none !important; }

.upload-progress {
  max-width: 32.5rem;        /* 520 - the .field__select--short column */
  margin-bottom: 0.75rem;
}

.upload-progress__track {
  height: 1.25rem;           /* 20 */
  border: var(--hairline) solid var(--eco-field-line);
  background: var(--eco-field);
  overflow: hidden;
}

.upload-progress__bar {
  width: 0;
  height: 100%;
  background: var(--eco-yellow);
  transition: width 0.15s linear;
}

.upload-progress__text {
  margin: 0.25rem 0 0;
  font-family: var(--font-display);
  font-size: 1.25rem;        /* 20 */
  color: var(--eco-hint);
}

/* The uploaded readout. The workspaces draw this pair inline; these are the
   same two lines with the styling moved out of the markup. */
.upload-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
}

.upload-state__icon { width: 1.5rem; height: auto; }

.upload-state__link {
  font-size: 1.375rem;       /* 22 */
  color: var(--eco-ok);
}

.upload-state__delete {
  font-size: 1.375rem;
  color: var(--eco-alert);
  text-decoration: underline;
}

.upload-state__delete[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.upload-error {
  margin: 0 0 0.75rem;
  max-width: 32.5rem;
  font-family: var(--font-copy);
  font-size: 1.25rem;
  color: var(--eco-alert);
}

/* Track 1 splits its form into two phases, each announced by a yellow-on-black
   tab sized to its own text - the same inline box as the rules page's
   .legal-mark, at the app's scale. The spare-parts table reuses it. */
.phase-mark {
  margin: 5rem 0 0;
  text-align: center;
}

.phase-mark span {
  display: inline-block;
  padding: 0.125rem 1.375rem;
  background: var(--eco-black);
  color: var(--eco-yellow);
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: 3.25rem;        /* 52 */
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.phase-title {
  margin: 0.75rem 0 0;
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: 3.25rem;        /* 52 */
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--eco-black);
}

/* Phase 1 titles its own sentence; Phase 2 is set in caps. */
.phase-title--caps { text-transform: uppercase; }

.phase-sub {
  margin: 0.625rem 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;           /* 32 */
  line-height: 1.35;
  text-align: center;
  color: var(--eco-black);
}

/* The numbered audit cards - four for the component audit, four for the spare
   parts table. A panel one form column wide, its number set large down the
   left and the fields to its right. */
.audit-card {
  margin: 0 0 2.5rem;
  padding: 2rem 2.5rem 2.5rem;
  border: 0.125rem solid var(--eco-card-line);
  background: var(--eco-card);
}

.audit-card__head {
  display: flex;
  align-items: flex-start;
  gap: 3.5rem;
  margin-bottom: 2.5rem;
}

.audit-card__id {
  flex: none;
  width: 12rem;
  text-align: center;
}

.audit-card__no {
  margin: 0;
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: 7rem;           /* 112 */
  line-height: 1;
  color: var(--eco-black);
}

.audit-card__flag {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;        /* 28 */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--eco-black);
}

.audit-card > :last-child { margin-bottom: 0; }

/* The comp sets "Materials" in a left gutter beside the two columns. A legend
   cannot be a flex item, so it is positioned into the padding instead. */
.audit-card .field-set {
  position: relative;
  padding-left: 11rem;
}

.audit-card .field-set legend {
  position: absolute;
  left: 0;
  top: 0;
  width: 11rem;
}

.audit-card__intro { flex: 1 1 auto; }
.audit-card__intro .field-inline:last-child { margin-bottom: 0; }

/* 12 (the number column) + 3.5 (its gap) + 11 (the head's own label column)
   is where the Component and Function inputs start; the rows below the head
   begin at the card's padding, so their labels take all of that less the
   1.5rem gap. Change any of those four and this follows. */
.audit-card > .field-inline .field-label { width: 26.5rem; }

/* Source evidence keeps its label on the textarea's first line. */
.field-inline--top { align-items: flex-start; }

/* Every control below the card head takes one width - the dropdown would
   otherwise size to its own content, and the textarea would run to the card's
   edge. They match the Component and Function inputs above them. */
.audit-card > .field-inline .field__select {
  flex: 1 1 26rem;
  width: auto;
  min-width: 0;
  max-width: 46rem;
}

/* The spare-parts cards run their four fields as two columns instead. */
.audit-card--parts .audit-card__head { margin-bottom: 0; }

.audit-card__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3.5rem;
  flex: 1 1 auto;
}

.audit-card__cols > * > .field:last-child { margin-bottom: 0; }

/* Notes fills whatever height the three fields beside it come to. */
.audit-card__notes { display: flex; }
.audit-card__notes .field { display: flex; flex-direction: column; flex: 1 1 auto; }
.audit-card__notes textarea.field__control { flex: 1 1 auto; }

/* The black section banner, one form column wide. It used to pull back out of
   .app-main's insets on both sides; the client's Track 2 edit squared it to the
   column and Track 1 is drawn the same way, so that is the rule now. */
.band {
  margin: 4rem 0 3rem;
  padding: 1.75rem 2.5rem 1.625rem;
  background: var(--eco-black);
  text-align: center;
}

.band__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.875rem;       /* 46 */
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--eco-white);
}

.band p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2rem;           /* 32 */
  line-height: 1.3;
  color: var(--eco-white);
}

/* "Judging focus:" is the yellow half of the line; its value stays white. */
.band__label { color: var(--eco-yellow); }

/* Qualified because .band p would otherwise win on specificity. */
.band p.band__note {
  font-weight: 700;
  color: var(--eco-yellow);
}

.app-check-block { margin-top: 2rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 5rem;
}

/* The upload pages draw their single button against the left margin. */
.btn-row--start { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   12. Reflow below 1200px
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  html { font-size: 16px; }

  /* Nav collapses to a Bootstrap offcanvas-style toggle. */
  .site-nav__inner {
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    min-height: 0;
    row-gap: 0.75rem;
  }

  .nav-brand { gap: 0.75rem; flex: 1 1 auto; }
  .nav-brand__mark    { width: 2.25rem; }
  .nav-brand__wordmark{ font-size: 1.0174rem; }  /* the 5.5rem crop */
  .nav-brand__line    { font-size: 0.8189rem; }  /* the 13rem crop   */
  .nav-brand__tagline { font-size: 0.4227rem; }  /* the 8rem crop    */
  .nav-brand__text    { gap: 0.25rem; }

  /* The tagline is set too small to read once the lockup shrinks; it becomes a
     smear rather than type, so drop it on phones. */
  @media (max-width: 767.98px) {
    .nav-brand__tagline { display: none; }
  }

  .site-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 2;
    margin-left: auto;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 1px solid var(--eco-white);
    color: var(--eco-white);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }

  .site-nav__collapse {
    order: 3;
    flex-basis: 100%;
  }

  .site-nav__menu,
  .site-nav__auth {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
  }

  .site-nav__menu { padding: 0.75rem 0; }
  .site-nav__auth { padding-bottom: 0.75rem; }

  .site-nav__link { font-size: 1rem; }

  /* Rails stack; every hard-coded offset from the comp is dropped. */
  .page-grid {
    grid-template-columns: 1fr;
    padding: 0 1rem 2.5rem;
    row-gap: 2rem;
  }

  .rail-left,
  .rail-main,
  .rail-right { padding-top: 2rem; }

  .page-title,
  .page-subtitle,
  .photo-card,
  .date-block,
  .support-link,
  .hero-pitch,
  .btn-eco-stack,
  .rail-main--wide,
  .info-panel,
  .rail-right__mark,
  .rail-right__wordmark,
  .banner-tail,
  .rail-right__link {
    margin-left: auto;
    margin-right: auto;
    width: auto;
    max-width: 34rem;
  }

  /* The auto margins above centred the wordmark while it was an image. As text
     it fills the column instead, so the centring has to move inside the box. */
  .rail-right__wordmark { text-align: center; }

  .page-title {
    font-size: clamp(1.75rem, 6vw, 2.75rem);
    text-align: center;
  }

  .page-subtitle {
    font-size: clamp(0.875rem, 3vw, 1.25rem);
    text-align: center;
  }

  .photo-card {
    width: min(100%, 22rem);
    padding: 0.625rem;
    transform: none;
  }

  .date-block { font-size: 1.125rem; }

  .support-link { font-size: 1rem; }

  .hero-pitch p { font-size: clamp(1.25rem, 5vw, 1.75rem); }

  .btn-eco {
    min-height: 3.5rem;
    border-width: 2px;
    font-size: 1.125rem;
  }

  /* Inner-page centre content. The comp's type scale is sized against an 832px
     column; on a phone it all comes down to a readable single column. */
  .eco-heading  { font-size: 1.5rem; margin-bottom: 0.875rem; }
  .eco-heading--sm { font-size: 1.3125rem; margin-bottom: 0.5rem; }
  .eco-cta-line { margin-bottom: 1rem; font-size: 1.125rem; }
  .eco-bullets  { font-size: 1.0625rem; line-height: 1.45; }
  .eco-bullets li      { padding-left: 1.5rem; }
  .eco-bullets li::before { left: 0.25rem; }
  .eco-bullets--sm     { font-size: 1rem; }
  .eco-prose    { font-size: 1rem; }
  .eco-subhead  { font-size: 1.1875rem; margin-top: 1.5rem; }
  .eco-lede     { font-size: 1.125rem; }
  .eco-cta      { font-size: 1.125rem; }
  .eco-dates    { font-size: 1.0625rem; margin-top: 1.5rem; }

  .rubric-block { margin-bottom: 2.25rem; }
  .rubric-block__title { font-size: 1.25rem; }
  .rubric-block .eco-cta { font-size: 1.25rem; }

  .eco-note { font-size: 0.875rem; line-height: 1.7; }

  .info-panel {
    padding: 1.5rem 1.25rem;
    font-size: 1.0625rem;
  }

  .info-panel dd { margin-bottom: 1.5rem; }
  .info-panel dd:last-of-type { margin-bottom: 1.25rem; }
  .info-panel p  { margin-bottom: 1rem; }

  /* FAQ - already a single column, so it only needs the type scale. */
  .faq-page { padding: 2rem 1rem 3rem; }
  .faq-page__title { font-size: 1.5rem; margin-bottom: 1.75rem; }
  .faq-item        { margin-bottom: 1.75rem; }
  .faq-item__q     { font-size: 1.0625rem; }
  .faq-item p      { font-size: 1rem; }
  .faq-footnote    { font-size: 1rem; margin-top: 2rem; }

  .rail-right__mark     { width: 6rem; }
  .rail-right__wordmark { font-size: 2.4047rem; }  /* the 13rem crop */

  .banner-tail {
    padding: 1.25rem 1.5rem 5rem;
    font-size: 1.0625rem;
  }

  .banner-tail--links { font-size: 1.0625rem; }
  .banner-tail--links ul { gap: 0.875rem; }
  .banner-tail__title { font-size: 1.125rem; margin-bottom: 0.875rem; }

  .rail-right__link { text-align: center; font-size: 1rem; }

  .section-divider { height: 2px; }

  .site-footer { padding: 2.5rem 1rem 3rem; }

  .footer-lockup__mark     { width: 2.5rem; }
  .footer-lockup__wordmark { font-size: 1.2949rem; }  /* the 7rem crop    */
  .footer-lockup__line     { font-size: 0.8504rem; }  /* the 13.5rem crop */

  .site-footer__heading { font-size: 1.125rem; }
  .site-footer__legal   { font-size: 0.8125rem; }
  .site-footer__credit  { font-size: 1.0625rem; }
  .site-footer__partner { width: 14rem; }

  /* ---- Signed-in area -------------------------------------------------- */

  /* The app header reflows on the marketing nav's own rules. Its two links fit
     the bar at every width down to 320, so unlike the marketing menu it never
     collapses - it only needs its gap closing up. */
  .site-nav__account { gap: 1.25rem; }

  /* No room beside the lockup once the bar narrows; the sidebar names the page. */
  .site-nav__page { display: none; }

  /* Rails stack: the grey sidebar becomes a disclosure above the content. */
  .app-shell { grid-template-columns: 1fr; }

  .side-nav {
    border-right: 0;
    border-bottom: var(--hairline) solid var(--eco-black);
    font-size: 1rem;
  }

  .side-nav__current {
    min-height: 0;
    justify-content: flex-start;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    font-weight: 600;
  }

  .side-nav__toggle {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 0;
    border-bottom: var(--hairline) solid var(--eco-black);
    background: var(--eco-panel);
    color: var(--eco-black);
    font-family: var(--font-nav);
    font-size: 1rem;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
  }

  .side-nav__groups { padding: 1rem 0 1.25rem; }
  .side-nav__group + .side-nav__group { margin-top: 1.25rem; }
  .side-nav__group li + li { margin-top: 0.75rem; }
  .side-nav__link { padding-left: 1rem; }
  .side-nav__link--sub { padding-left: 2rem; }

  .app-main { padding: 1.75rem 1rem 2.5rem; }

  .app-title   { font-size: clamp(1.5rem, 6vw, 2.25rem); }
  .app-lede    { font-size: 1.125rem; }
  .app-sub     { font-size: 1rem; }
  .app-prose   { font-size: 1rem; }
  .app-list    { font-size: 1rem; }
  .gloss-list  { margin-top: 1.5rem; }
  .gloss-item  { font-size: 1rem; margin-bottom: 1rem; }
  .app-faq     { padding-left: 0.875rem; margin-bottom: 1.5rem; }
  .app-faq__q  { font-size: 1.125rem; }
  .app-heading { font-size: 1.1875rem; margin-top: 2rem; }
  .app-heading--centre { font-size: 1.0625rem; margin-top: 2.25rem; }
  .app-heading__note { display: block; margin-left: 0; font-size: 0.9375rem; }

  .phase-mark { margin-top: 2.5rem; }
  .phase-mark span { padding: 0.125rem 0.75rem; font-size: 1.375rem; }
  .phase-title { font-size: 1.375rem; }
  .phase-sub   { font-size: 1rem; }

  /* The photo drops below its paragraph rather than shrinking to a stamp. */
  .app-figure-row { flex-direction: column; gap: 1.25rem; }
  .app-figure { width: min(100%, 22rem); }

  .btn-track { min-height: 2.75rem; font-size: 1rem; }
  .btn-track-row { margin-bottom: 2rem; }

  /* At this width the banner bleeds to the padding edge instead of sitting
     inside the form column. */
  .band {
    margin: 2rem -1rem 1.5rem;
    padding: 1rem 1.25rem;
  }

  .band__title { font-size: 1.25rem; }
  .band p      { font-size: 1rem; }

  .app-form { margin-top: 2rem; }
  .app-form--narrow { width: 100%; }

  .field-label   { font-size: 1.0625rem; }
  .field-hint    { font-size: 0.9375rem; }
  .field-note    { font-size: 1rem; }
  .field-inline .field__select,
  .field-inline .field__control,
  .audit-card > .field-inline .field__select,
  .field__select--short,
  .field-inline .field__select--short { width: 100%; min-width: 0; max-width: none; }
  .field-inline--label-col .field-label { width: auto; }

  /* Both grids go single column, and the card's number sits above its fields
     rather than beside them. */
  .field-choices--cols {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: 1fr;
  }

  .field-choices--inline { gap: 1.5rem; }

  .audit-card {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem 1.25rem;
    border-width: var(--hairline);
  }

  .audit-card__head {
    display: block;
    margin-bottom: 1.25rem;
  }

  .audit-card__id {
    width: auto;
    margin-bottom: 0.75rem;
    text-align: left;
  }

  /* Materials returns to sitting above its list. */
  .audit-card .field-set { padding-left: 0; }
  .audit-card .field-set legend { position: static; width: auto; }

  .audit-card__no   { font-size: 2rem; }
  .audit-card__flag { font-size: 0.9375rem; }
  .audit-card > .field-inline .field-label { width: auto; }
  .audit-card__cols { grid-template-columns: 1fr; gap: 0; }
  .audit-card__cols > :first-child > .field:last-child { margin-bottom: 1.25rem; }

  .upload { gap: 0.75rem; }
  .upload__button,
  .upload__name { font-size: 1rem; }
  .upload-progress,
  .upload-error { max-width: none; }
  .upload-progress__text,
  .upload-state__link,
  .upload-state__delete,
  .upload-error { font-size: 0.9375rem; }

  /* Auth pages. */
  .auth-page  { padding: 2.5rem 1rem 3.5rem; }
  .auth-title { font-size: 1.5rem; margin-bottom: 1.25rem; }
  .auth-link  { font-size: 1rem; }
  .auth-row      { margin-bottom: 1.75rem; }
  .auth-actions  { margin-top: 1.75rem; }
  .auth-consent  { margin-top: 1.75rem; }

  /* 1rem is a floor, not a preference: iOS Safari zooms the viewport on focus
     for anything under 16px, and the page never zooms back out. */
  .field { margin-bottom: 1.25rem; }

  .field__control,
  .field__select {
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
  }

  textarea.field__control { min-height: 8rem; }

  .field__reveal { width: 2.75rem; height: 2.75rem; }
  .field__reveal svg { width: 1.25rem; height: 1.25rem; }

  .check { font-size: 0.9375rem; }
  .check input { width: 1rem; height: 1rem; }

  .btn-app { min-height: 2.75rem; padding: 0 1.25rem; font-size: 1rem; }

  /* Both split rows put their halves on separate lines rather than squeezing
     a button and a sentence onto one. */
  .auth-row,
  .auth-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
  }

  .btn-row { gap: 1rem; margin-top: 2.5rem; }

  /* Prizes. The two-column grid stacks, so the divider moves to the top edge
     of the second cell. */
  .prize-page   { padding: 2rem 1rem 3rem; }
  .prize-banner { padding: 1.25rem 1rem 1.5rem; }

  .prize-banner__mark     { width: 2rem; }
  .prize-banner__wordmark { font-size: 1.0728rem; }
  .prize-banner__title    { font-size: 1.5rem; margin-top: 1rem; }

  .prize-title { font-size: 1.375rem; margin-top: 2rem; }
  .prize-lede  { font-size: 1rem; margin-top: 1rem; }

  .prize-group      { margin-top: 1.5rem; }
  .prize-group__bar { padding: 0.75rem 1rem; font-size: 1.0625rem; }

  .prize-group__grid { grid-template-columns: 1fr; }

  .prize-cell { padding: 1.25rem 1rem; }

  .prize-cell + .prize-cell {
    border-left: 0;
    border-top: 0.125rem solid var(--eco-black);
  }

  .prize-cell__track { font-size: 1.125rem; margin-bottom: 1rem; }
  .prize-cell__label { font-size: 1.0625rem; margin-bottom: 0.75rem; }

  .prize-cell__body,
  .prize-cell__list { font-size: 1rem; }

  .prize-cell__arv { font-size: 0.9375rem; margin-top: 1rem; }

  /* Official Rules - single column already, so only the type scale changes. */
  .legal-page     { padding: 2rem 1rem 3rem; }
  .legal-title    { font-size: 1.5rem; margin-bottom: 0.75rem; }
  .legal-subtitle { font-size: 1.1875rem; margin-bottom: 1.25rem; }
  .legal-lede     { font-size: 1rem; margin-bottom: 1.75rem; }
  .legal-rule     { margin-bottom: 1.75rem; }
  .legal-rule__title { font-size: 1.0625rem; }
  .legal-rule p   { font-size: 1rem; }
  .legal-list     { font-size: 1rem; padding-left: 1.5rem; }

  /* ---- Home page ------------------------------------------------------- */

  /* The lockup pair has to outrank .nav-brand__mark above, which is later in
     the file and would otherwise shrink the hori crop to 36. */
  .home-bleed .site-nav__inner,
  .site-nav--hori .site-nav__inner { min-height: 0; padding-inline: 1rem; }
  .home-bleed .nav-brand__mark--hori,
  .site-nav--hori .nav-brand__mark--hori { width: 9rem; }
  .home-bleed .site-nav__menu,
  .site-nav--hori .site-nav__menu { margin-left: 0; gap: 0.75rem; }
  .home-bleed .site-nav__link,
  .site-nav--hori .site-nav__link { font-size: 1rem; }
  .home-bleed .site-nav__auth,
  .site-nav--hori .site-nav__auth { gap: 0.75rem; }

  .home-hero {
    grid-template-columns: 1fr;
    padding: 2rem 1rem 2.5rem;
    row-gap: 2rem;
  }

  /* The photo column dissolves so the sponsor credit can follow the content
     instead of sitting between the photo and the headline, and everything
     lands on the same 34rem centred measure the rails reflow to. */
  .home-bleed .home-hero__aside { display: contents; }

  .home-hero__figure,
  .home-main,
  .home-credit {
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
  }

  .home-hero__figure { order: 1; width: min(100%, 24rem); }
  .home-main         { order: 2; }
  .home-credit       { order: 3; }

  /* The banners go proportional, so the stagger survives and the boxes keep
     landing on the sweater at any photo width. cqw ties the type to the photo
     rather than to the viewport, which is the only thing that holds the comp's
     ratios - 1em is 1.89% of the photo's width, the size the 47 prize line is
     against its 856. */
  .home-hero__figure { container-type: inline-size; }

  .home-win {
    bottom: 15.8%;
    font-size: max(1.89cqw, 7px);
  }

  /* The paddings are em of each box's own size, not of the stack's, so they
     are the comp's insets over its own font: 40/47 across the prize box, and
     whatever squares each box back to its drawn height. */
  /* The outline and its overlap go proportional with everything else - the
     comp's 3px rule is 0.35% of the photo's 856. */
  .home-win__box { border-width: max(0.35cqw, 1px); }
  .home-win__box + .home-win__box { margin-top: calc(-1 * max(0.35cqw, 1px)); }

  .home-win__win   { margin-left: 35.2%; width: 27.3%; height: auto; padding-block: 0.65em;   font-size: 3.4em; }
  .home-win__prize { margin-left: 14.8%; width: 69.9%; height: auto; padding: 0.43em 0.85em;  font-size: 2.9em; }
  .home-win__tech  { margin-left: 20.4%; width: 69.9%; height: auto; padding-block: 0.915em;  font-size: 2em; }

  .home-credit {
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    text-align: center;
  }

  .home-credit__text    { font-size: 1rem; }
  .home-credit__partner { width: 14rem; }

  /* margin-inline:auto above already cancels the column's desktop offset. */
  .home-main {
    padding-right: 0;
    padding-bottom: 0;
  }

  .home-intro { padding-left: 0; }

  .home-intro__title { padding-top: 0; font-size: clamp(1.75rem, 6vw, 2.75rem); }
  .home-intro__sub   { font-size: 1.25rem; }

  .home-dates { margin-top: 1.5rem; font-size: 1.25rem; }
  .home-dates + .home-dates { margin-top: 1.25rem; }

  .home-links { margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.5; }

  .home-panel { margin-top: 2rem; padding: 1.25rem; }
  .home-panel__mark { width: 3rem; margin-right: 1rem; }
  .home-panel p { font-size: 1rem; line-height: 1.45; }
  .home-panel p + p { margin-top: 1rem; }

  .home-rules { margin-top: 1.5rem; font-size: 1.125rem; }
  .home-legal { font-size: 0.8125rem; line-height: 1.4; }

  /* ---- Section 7c: the pages that share the layout -------------------- */

  /* The band is taller than 1484 everywhere down here, but the floor would
     still show as dead space under a short page. */
  .home-hero { min-height: 0; }

  .page-body { margin-top: 1.5rem; padding-left: 0; }

  .page-heading { font-size: 1.375rem; }
  .page-heading--centre { text-align: left; }   /* nothing to centre against */

  .page-prose { margin-top: 1rem; font-size: 1rem; line-height: 1.45; }

  .page-list { font-size: 1rem; line-height: 1.45; }
  .page-list li + li { margin-top: 0.75rem; }

  .page-heading + .page-rows { margin-top: 1rem; }
  .page-rows { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.4; }

  .page-heading + .page-rubric { margin-top: 1.5rem; }
  .page-rubric { margin-top: 1.5rem; font-size: 1.0625rem; line-height: 1.4; text-align: left; }

  .page-note { margin-top: 1.5rem; font-size: 0.9375rem; line-height: 1.45; }

  .page-links { padding: 1.75rem 0 0; }
  .page-links__title { font-size: 1.25rem; }
  .page-links ul { margin-top: 0.25rem; font-size: 1rem; line-height: 1.6; }

  .page-dates { margin-top: 1.5rem; font-size: 1rem; line-height: 1.5; }

}

@media (prefers-reduced-motion: reduce) {
  .btn-eco,
  .eco-cta,
  .btn-app,
  .btn-track,
  .site-footer__partner-link { transition: none; }
}