@layer components {
  /* Buttons */

  .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: var(--text-body);
    font-weight: 500;
    line-height: 1.6;
    text-decoration: none;
  }

  .button-small {
    padding: 8px 18px;
  }

  .button-quantum {
    background: var(--color-quantum-button);
    color: var(--color-on-quantum);
  }

  .button-training {
    background: var(--color-training);
    color: var(--color-on-training);
  }

  /* The text's colour behind the page's: a closing call to action */
  .button-inverse {
    background: var(--color-text);
    color: var(--color-page);
  }

  .button-outline {
    border-color: var(--color-border);
    color: var(--color-text-muted);
  }

  .button-outline:hover {
    border-color: var(--color-border-strong);
    color: var(--color-text);
  }

  .text-link {
    display: inline-flex;
    gap: 8px;
    margin-top: 8px;
    color: var(--color-quantum-text);
    font-size: var(--text-body);
    text-decoration: none;
  }

  .text-link:hover {
    text-decoration: underline;
  }

  /* Hero: the top of every page */

  /* The home page's hero is taller, with its text at the bottom; the others
     start their text at the top.

     Inside its bottom border, the hero is a whole number of the grid's rows,
     so none is cut off and they're the same height on every page: its
     content's height is rounded up to the next row. Its minimum height is
     eight rows (--hero-rows), 480 px, the nearest to the design's 460 px.
     calc-size, which can round a height that comes from the content, works
     only in Chrome and Edge 129 and later so far; elsewhere a hero taller
     than its minimum ends part-way through a row. On the home page, the
     rounding's extra space goes above the text */
  .hero {
    --hero-padding-top: 56px;
    --hero-padding-bottom: 60px;
    --hero-rows: 8;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: calc(var(--hero-rows) * var(--grid-size) + 1px);
    height: calc-size(auto, round(up, size - 1px, var(--grid-size)) + 1px);
    padding: var(--hero-padding-top) var(--gutter) var(--hero-padding-bottom);
    border-bottom: 1px solid var(--color-border);
  }

  /* Where the text starts at the top, the hero is as tall as its content
     needs, in whole rows, and at least five. The space below the text is the
     same as above it: the paddings above and below are both 44 px, or 28 px
     on phones, and any spare space, from rounding up to a whole row or from
     the minimum height, is shared equally above and below the text, so the
     space is 44 to 74 px, about one and a half times the side margins. The
     text so starts a little lower on some pages than others */
  .hero-inner {
    --hero-padding-top: 44px;
    --hero-padding-bottom: var(--hero-padding-top);
    --hero-rows: 5;

    justify-content: center;
  }

  /* Nor does the last of its text's margin add to the space below it */
  .hero-inner .hero-content > :last-child {
    margin-bottom: 0;
  }

  /* Where the page is narrower than the screen (--page-width), the hero is
     framed at the sides too, as the header's edge and its own bottom border
     frame it above and below: a window onto the plane, which the frame cuts
     off. Its padding gives up the border's 1 px, so its text still lines up
     with the sections' below */
  @media (min-width: 1081px) {
    .hero {
      padding-inline: calc(var(--gutter) - 1px);
      border-inline: 1px solid var(--color-border);
    }
  }

  /* The hero's own panel, a window onto the plane: the booth's backdrop, a
     grey, lighter towards the middle, with a spotlight in the page's accent
     colour and a grid of white lines. axe measures the hero's text against
     the panel's own colour, its darkest grey: the lighter middle, the
     spotlight and the grid are drawn by a box that isn't the text's
     ancestor, which axe leaves out */
  .hero-bg {
    position: absolute;
    inset: 0;
    background: var(--color-hero);
  }

  /* The light on the panel, under the grid, so the grid's lines stay crisp
     over it: the spotlight, a circle at the panel's top right, its middle
     150 px down and 170 px in from the right, partly off the panel, over
     the lighter middle */
  .hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle, var(--accent-spotlight), transparent 68%) right -40px top -60px / 420px 420px no-repeat,
      radial-gradient(ellipse at 40% 60%, var(--color-hero-glow), transparent 75%);
  }

  /* The grid's squares are --grid-size each way. Across, a square is centred
     on the panel, so the lines run half a square in from each side of the
     page's width. Down, they're whole rows from the panel's top, so a line
     is in the same place on every page, on a whole pixel, and no line of the
     grid's runs along the panel's top or bottom, which the header's edge and
     the hero's border frame: the layer starts 1 px down, and its rows start
     one row less 1 px below that, so the line a row draws at its top falls a
     row down, and the line above, at the panel's very top, is outside the
     layer */
  .hero-bg::after {
    content: "";
    position: absolute;
    inset: 1px 0 0;
    background:
      linear-gradient(to right, var(--color-grid) 1px, transparent 1px) 50% 0 / var(--grid-size) 100% repeat-x,
      linear-gradient(to bottom, var(--color-grid) 1px, transparent 1px) 0 calc(var(--grid-size) - 1px) / 100% var(--grid-size) repeat-y;
  }

  /* A wireframe airliner (hero_plane.js) filling the hero, over the
     glow and behind the text, as if the hero were a window onto it.
     hero_plane.js draws it towards the right */
  .hero-plane {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Fainter behind the text, which runs down the left, so it stays easy
       to read. Chrome, Edge and Samsung Internet before version 120 know
       only the prefixed property */
    --plane-fade: linear-gradient(to right, rgb(0 0 0 / 0.35) 45%, #000 72%);

    -webkit-mask-image: var(--plane-fade);
    mask-image: var(--plane-fade);
  }

  /* No plane on phones, upright or on their side, where the text covers
     the hero: the canvas is never in view, so neither hero_plane.js nor
     three.js is downloaded */
  @media (max-width: 768px), (max-height: 500px) {
    .hero-plane {
      display: none;
    }
  }

  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
  }

  /* Spaced and weighted as the booth's "Aviation training software" */
  .eyebrow {
    margin-bottom: 20px;
    color: var(--accent-text);
    font-size: var(--text-small);
    font-weight: 400;
    letter-spacing: 0.21em;
    text-transform: uppercase;
  }

  .hero-lead {
    max-width: 560px;
    margin-bottom: 30px;
    color: var(--color-text-muted);
    font-size: var(--text-lead);
    font-weight: 300;
    line-height: var(--line-height-paragraph);
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  /* Without the plane, the home page's text needn't sit at the bottom, so on
     phones every hero's text is between equal paddings, with any spare space
     shared above and below it */
  @media (max-width: 768px) {
    .hero {
      --hero-padding-top: 40px;
      --hero-padding-bottom: var(--hero-padding-top);

      justify-content: center;
    }

    .hero-inner {
      --hero-padding-top: 28px;
    }

    .hero-lead {
      font-size: 14px;
    }
  }

  /* Section label: a small heading with a rule running to the right */

  .section-label {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px var(--gutter);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-training-text);
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.6;
    text-transform: uppercase;
  }

  .section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
  }

  /* Tags and pills */

  .tag {
    display: inline-block;
    margin-bottom: 18px;
    padding: 6px 12px;
    border: 1px solid;
    border-radius: var(--radius-small);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .tag-quantum {
    border-color: var(--color-quantum-edge);
    background: var(--color-quantum-tint);
    color: var(--color-quantum-text);
  }

  .tag-training {
    border-color: var(--color-training-edge);
    background: var(--color-training-tint);
    color: var(--color-training-text);
  }

  .pill-list,
  .cert-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .pill {
    padding: 8px 16px;
    border: 1px solid var(--color-border-pill);
    border-radius: var(--radius-small);
    background: var(--color-pill);
    color: var(--color-text-soft);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  .pill-more {
    border-style: dashed;
    color: var(--color-text-muted);
  }

  .cert {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid var(--color-border-pill);
    border-radius: var(--radius-small);
    color: var(--color-text-muted);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: 0.07em;
  }

  .cert-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-training);
  }

  .cert-dot-warm {
    background: var(--color-warm);
  }

  .cert-dot-quantum {
    background: var(--color-quantum);
  }

  /* Product cards: the home page's two products side by side, in a
     two-columns layout */

  .product-card {
    display: flex;
    flex-direction: column;
  }

  .product-name {
    margin-bottom: 6px;
    font-size: 28px;
  }

  /* In the product's colour, as on the booth. The card sets it with
     data-accent */
  .product-for {
    margin-bottom: 18px;
    color: var(--accent-text);
    font-size: var(--text-small);
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .product-desc {
    flex: 1;
    max-width: 320px;
    margin-bottom: 28px;
    color: var(--color-text-muted);
    line-height: var(--line-height-paragraph);
  }


  /* Trust: customers and certifications */

  .trust {
    padding: 30px var(--gutter);
    border-bottom: 1px solid var(--color-border);
  }

  .trust-intro {
    margin-bottom: 18px;
    color: var(--color-text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  .trust .pill-list {
    margin-bottom: 20px;
  }

  .trust .cert-list {
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
  }

  /* Numbered points: three columns of title and text */

  .points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--color-border);
  }

  .point {
    display: flex;
    flex-direction: column;
    padding: 36px var(--gutter);
    border-right: 1px solid var(--color-border);
  }

  /* The end of each row of three: Security & trust has two rows */
  .point:nth-child(3n),
  .point:last-child {
    border-right: none;
  }

  .point-number {
    margin-bottom: 18px;
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.1em;
  }

  .point-title {
    margin-bottom: 10px;
    font-size: var(--text-body);
  }

  .points-aligned .point-title {
    min-height: 48px;
  }

  /* The minimum height covers titles of up to two lines. Where subgrid is
     supported, the points also share the grid's rows (number, title, text),
     so a title that wraps to three lines lowers all three texts together */
  @supports (grid-template-rows: subgrid) {
    .points-aligned .point {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }

  .point-text {
    flex: 1;
    color: var(--color-text-muted);
    line-height: var(--line-height-paragraph);
  }

  /* About strip: a two-columns layout of text, or text beside a pull quote */

  .about-strip {
    --column-padding: 48px;
  }

  .about-strip-col {
    display: flex;
    flex-direction: column;
  }

  .about-strip-title {
    margin-bottom: 16px;
    font-size: 20px;
  }

  .about-strip-body {
    flex: 1;
    color: var(--color-text-muted);
    line-height: var(--line-height-paragraph);
  }

  .about-strip-body p {
    margin-bottom: 14px;
  }

  .pull {
    padding: 18px 22px;
    border-left: 2px solid var(--color-warm);
    background: color-mix(in srgb, var(--color-warm) 4%, transparent);
    font-size: var(--text-lead);
    font-weight: 300;
    line-height: var(--line-height-paragraph);
  }

  /* Hero extras: the QUANTUM page's "Used by", a translucent pane lifted a
     little over the hero's panel, which blurs the grid behind it, so the
     grid's lines needn't meet its edges. It sits in the hero's bottom right
     corner, inside the page's margin each way. Its z-index keeps it over the
     panel when it runs beneath the text too: the hero lays out its content as
     flex items, which a z-index stacks even when static. Safari before 18
     knows only the prefixed backdrop-filter */

  .used-by {
    position: absolute;
    right: var(--gutter);
    bottom: var(--gutter);
    z-index: 2;
    padding: 16px 28px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-pane);
    box-shadow: var(--shadow-pane);
    -webkit-backdrop-filter: blur(var(--pane-blur));
    backdrop-filter: blur(var(--pane-blur));
  }

  .used-by-label {
    margin-bottom: 8px;
    color: var(--color-text-muted);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .used-by .pill-list {
    max-width: 260px;
    gap: 8px;
  }

  .used-by .pill {
    background: var(--color-pane-pill);
  }

  /* Beside the text, the pane comes within 44 px of the hero's text, and
     closer on narrower screens, so where the page fills the screen it runs
     the text's width beneath it instead, at the bottom of the hero's content,
     with the hero's padding below it as above the text, below any space a
     whole number of the grid's rows adds, and at least 28 px from the text */
  @media (max-width: 1080px) {
    .hero:has(.used-by) {
      row-gap: 28px;
    }

    .used-by {
      position: static;
      margin-top: auto;
    }

    .used-by .pill-list {
      max-width: none;
    }
  }

  .platforms {
    margin-top: 14px;
    color: var(--color-text-muted);
    font-size: var(--text-label);
    letter-spacing: 0.04em;
  }

  .hero .cert-list {
    margin-top: 20px;
  }

  .hero .cert-list-ruled {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
  }

  .cert-training {
    border-color: var(--color-training-edge);
  }

  .cert-warm {
    border-color: var(--color-warm-edge);
  }

  .cert-dot-muted {
    background: var(--color-text-muted);
  }

  /* Sections: a padded block with an optional introduction */

  .section-body {
    padding: 44px var(--gutter);
    border-bottom: 1px solid var(--color-border);
  }

  .section-intro {
    max-width: 540px;
    margin-bottom: 28px;
    color: var(--color-text-muted);
    line-height: var(--line-height-paragraph);
  }

  .section-intro strong {
    color: var(--color-text);
    font-weight: 500;
  }

  .section-intro .highlight {
    color: var(--color-warm-text);
  }

  .section-intro + .section-intro {
    margin-top: -18px;
  }

  /* Two columns divided by a rule, stacked on phones; --column-padding sets
     their padding above and below */
  .two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--color-border);
  }

  .two-columns > * {
    padding: var(--column-padding, 44px) var(--gutter);
  }

  .two-columns > * + * {
    border-left: 1px solid var(--color-border);
  }

  .two-columns-centred {
    align-items: center;
  }

  .column-title {
    margin-bottom: 16px;
    font-size: 20px;
  }

  .column-text {
    margin-bottom: 14px;
    color: var(--color-text-muted);
    line-height: var(--line-height-paragraph);
  }

  .statement {
    margin-top: 20px;
    padding-left: 16px;
    border-left: 2px solid var(--color-quantum);
    font-size: var(--text-lead);
    font-weight: 500;
    line-height: var(--line-height-paragraph);
  }

  /* Checklist: QUANTUM's modules */

  .checklist {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .checklist ul {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 5px;
  }

  .checklist li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .checklist li:last-child {
    border-bottom: none;
  }

  /* DM Sans has no ✓, so the system font draws it, in that font's bold */
  .checklist-mark {
    flex-shrink: 0;
    color: var(--color-training-text);
    font-size: 14px;
    font-weight: 700;
  }

  .checklist-extra {
    margin-top: 12px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
  }

  .checklist-extra .checklist-mark {
    color: var(--color-warm-text);
  }

  /* Feature rows: a feature's text beside its screenshot */

  .feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--color-border);
  }

  .feature-copy {
    padding: 44px var(--gutter);
  }

  .feature-copy + .feature-copy {
    border-left: 1px solid var(--color-border);
  }

  .feature-label {
    margin-bottom: 14px;
    color: var(--color-quantum-text);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .feature-title {
    margin-bottom: 13px;
    font-size: 20px;
  }

  .feature-text {
    color: var(--color-text-muted);
    line-height: var(--line-height-paragraph);
  }

  .feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
  }

  .feature-tags li {
    padding: 5px 11px;
    border: 1px solid var(--accent-edge);
    border-radius: var(--radius-small);
    background: var(--accent-tint);
    color: var(--accent-text);
    font-size: var(--text-label);
    letter-spacing: 0.05em;
  }

  /* The panel runs the row's full height, so its rule meets the row's
     borders; when the text is the taller, the screenshot sits in the middle */
  .feature-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    border-left: 1px solid var(--color-border);
    background: var(--color-panel);
  }

  .feature-row-flip .feature-screen {
    order: -1;
    border-right: 1px solid var(--color-border);
    border-left: none;
  }

  .feature-screen picture,
  .feature-screen img {
    width: 100%;
  }

  /* Each screenshot in a tablet's frame, as the booth shows the apps. The
     frame's width is in FEATURE_SCREEN_SIZES (ResponsiveImageHelper) too */
  .feature-screen img {
    border: 8px solid var(--color-bezel);
    border-radius: 16px;
    box-shadow: 0 0 0 1px var(--color-bezel-edge), var(--shadow-device);
  }

  .image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 200px;
    border: 1px dashed var(--color-border-strong);
    border-radius: 5px;
    color: var(--color-text-muted);
    font-size: var(--text-label);
  }

  .image-placeholder-label {
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Cards in a grid */

  .card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  /* The card surface, also used by the roles and the scenario cards */
  .card {
    padding: 24px 28px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
  }

  .card-title {
    margin-bottom: 8px;
    font-size: var(--text-lead);
  }

  .card-text {
    color: var(--color-text-muted);
    line-height: var(--line-height-paragraph);
  }

  /* Roles: QUANTUM's "Beyond pilots" */

  .role-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
  }

  .role {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    font-weight: 500;
  }

  .role-mark {
    flex-shrink: 0;
    color: var(--color-quantum);
    font-size: 14px;
  }

  /* Steps: four stages side by side, each marked as on the booth's "Plan.
     Prepare. Perform.": a dot at the start of a line, in the page's accent */

  .steps {
    --step-dot: 16px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }

  .step {
    position: relative;
    padding-top: calc(var(--step-dot) + 24px);
  }

  /* The line, through the dot's middle to the step's end */
  .step::before {
    content: "";
    position: absolute;
    top: calc(var(--step-dot) / 2 - 1px);
    right: 0;
    left: 0;
    height: 2px;
    background: var(--accent);
  }

  .step::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--step-dot);
    height: var(--step-dot);
    border-radius: 50%;
    background: var(--accent);
  }

  .step-phase {
    margin-bottom: 10px;
    color: var(--accent-text);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* In the display font, as the booth's "Plan." */
  .step-title {
    margin-bottom: 10px;
    font-size: 18px;
  }

  .step-text {
    color: var(--color-text-muted);
    line-height: var(--line-height-paragraph);
  }

  /* The Training App's scenario library and pricing */

  .scenario-card {
    padding: 20px;
  }

  .scenario-type {
    margin-bottom: 10px;
    color: var(--color-warm-text);
    font-family: var(--font-body);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .scenario-type-emergency {
    color: var(--color-danger);
  }

  .scenario-card li {
    padding: 5px 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-lead);
  }

  .scenario-card li:last-child {
    border-bottom: none;
  }

  .price-card {
    max-width: 480px;
    padding: 32px 36px;
    border: 1px solid color-mix(in srgb, var(--color-training) 35%, transparent);
    border-radius: var(--radius-large);
    background: var(--color-surface);
  }

  .price-name {
    margin-bottom: 4px;
    font-size: var(--text-body);
  }

  .price-amount {
    margin: 10px 0 4px;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: var(--letter-spacing-heading);
  }

  .price-amount span {
    font-size: var(--text-body);
    font-weight: 400;
  }

  .price-period {
    margin-bottom: 16px;
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  .price-text {
    margin: 12px 0 18px;
    color: var(--color-text-muted);
    font-size: var(--text-lead);
    line-height: var(--line-height-paragraph);
  }

  .price-card .button {
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    padding: 14px 20px;
    font-size: 14px;
  }

  /* Security & trust: certification cards, the documents table */

  .cert-card-icon {
    font-size: 22px;
  }

  .cert-card-title {
    margin: 16px 0 6px;
    font-size: 18px;
  }

  .cert-card-scope {
    margin-bottom: 14px;
    color: var(--color-training-text);
    font-size: var(--text-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .tick-list {
    display: grid;
    gap: 7px;
    margin-top: 16px;
  }

  .tick-list li {
    position: relative;
    padding-left: 16px;
    color: var(--color-text-muted);
    line-height: 1.5;
  }

  .tick-list li::before {
    content: "✓";
    content: "✓" / "";
    position: absolute;
    left: 0;
    color: var(--color-training-text);
  }

  .cert-card-note {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-small);
    line-height: 1.6;
  }

  .doc-table {
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }

  .doc-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }

  .doc-table caption {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-label);
    font-weight: 500;
    text-align: left;
  }

  .doc-table th,
  .doc-table td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--color-border);
    font-weight: 400;
    text-align: left;
  }

  .doc-table tr:last-child > * {
    border-bottom: none;
  }

  .doc-table th {
    color: var(--color-text-muted);
  }

  .doc-table td {
    color: var(--color-training-text);
    font-size: var(--text-label);
    text-align: right;
  }

  /* Collaborations: the organisations, a card each, as many across as fit at
     260 px or wider: three on wider screens, two on tablets, one on phones.
     A card on its own keeps that width rather than filling the row. The
     website's link covers the whole card */

  .collab-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 10px;
  }

  /* A .card, with its padding round the text below the plate instead */
  .collab-card {
    position: relative;
    padding: 0;
  }

  .collab-card:hover {
    border-color: var(--color-border-strong);
  }

  /* The card's top: the logo in its own colours, in the middle of the light
     ground it's drawn for, which fills the top inside the card's border */
  .collab-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 136px;
    padding: 24px;
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    background: var(--color-logo-plate);
  }

  /* collaborator_logo sets its size. Never wider than the plate. A logo
     supplied on white, such as Harms Aviation's, takes the plate's colour
     instead of showing a white box */
  .collab-logo {
    display: block;
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply;
  }

  .collab-card-text {
    padding: 24px 28px;
  }

  .collab-link {
    display: inline-flex;
    gap: 6px;
    font-size: var(--text-small);
    text-decoration: none;
  }

  .collab-link:hover {
    text-decoration: underline;
  }

  .collab-link::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  /* So the keyboard's focus shows round the whole card, the link's area */
  @supports selector(:has(a)) {
    .collab-card:has(.collab-link:focus-visible) {
      outline: 2px solid var(--accent-text);
      outline-offset: 2px;
    }

    .collab-link:focus-visible {
      outline: none;
    }
  }

  /* Careers: open roles */

  .job-list {
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
  }

  .job {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--color-border);
  }

  .job:last-child {
    border-bottom: none;
  }

  .job-title {
    margin-bottom: 3px;
    font-family: var(--font-body);
    font-size: var(--text-lead);
    font-weight: 500;
    letter-spacing: 0;
  }

  .job-details {
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  .job-team {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text-muted);
  }

  .job-tag {
    padding: 3px 9px;
    border: 1px solid var(--color-quantum-edge);
    border-radius: var(--radius-small);
    background: var(--color-quantum-tint);
    color: var(--color-quantum-text);
    font-size: var(--text-label);
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .after-list {
    margin-top: 20px;
    color: var(--color-text-muted);
  }

  /* Contact: the two product cards and their forms */

  /* The short hero, also on the forms' thank-you pages: at least
     four of the grid's rows */
  .hero-short {
    --hero-rows: 4;
  }

  .contact-cards {
    --column-padding: 40px;
  }

  .contact-title {
    margin: 14px 0 10px;
    font-size: 20px;
  }

  .contact-desc {
    margin-bottom: 24px;
    color: var(--color-text-muted);
    line-height: var(--line-height-paragraph);
  }

  .form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    container-type: inline-size;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .form-field label {
    color: var(--color-text-muted);
    font-size: var(--text-small);
    letter-spacing: 0.04em;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius);
    background: var(--color-surface-raised);
    color: var(--color-text);
    font-size: var(--text-body);
    line-height: 1.3;
  }

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

  .form-field ::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
  }

  .form-field textarea {
    height: 80px;
    resize: vertical;
  }

  /* The line about the privacy policy, below the button */
  .form-note {
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  /* Two fields side by side only when each has room for its placeholder,
     "Organisation (if applicable)": the form is 460 px wide on a full-width
     page, and narrower below about 1,060 px */
  @container (max-width: 449px) {
    .form-row {
      grid-template-columns: 1fr;
    }
  }

  /* Safari on iPhone zooms into a field whose text is under 16 px, and stays
     zoomed after the keyboard closes. At 16 px the placeholders need a
     slightly wider form to sit side by side */
  @media (pointer: coarse) {
    .form-field input,
    .form-field select,
    .form-field textarea {
      font-size: 16px;
    }

    @container (max-width: 479px) {
      .form-row {
        grid-template-columns: 1fr;
      }
    }
  }

  /* The select's own arrow is replaced by the design's ▾ */
  .select {
    position: relative;
  }

  .select select {
    padding-right: 36px;
    appearance: none;
    cursor: pointer;
  }

  /* While no answer is chosen, "Please select" looks like the other fields'
     placeholders, in the field and in the list, where it stays a choice so an
     answer can be taken back; the answers themselves keep the text colour */
  .select select:has(option[value=""]:checked) {
    color: var(--color-text-muted);
  }

  .select option {
    color: var(--color-text);
  }

  .select option[value=""] {
    color: var(--color-text-muted);
  }

  .select::after {
    content: "▾";
    content: "▾" / "";
    position: absolute;
    top: 50%;
    right: 14px;
    color: var(--color-text-muted);
    font-size: 14px;
    pointer-events: none;
    transform: translateY(-50%);
  }

  /* Where the browser allows it (Chrome and Edge 135+, Safari 27+), the open
     list is styled too, as a panel like the fields. Elsewhere the browser
     draws its own list, light or dark to match the site's version (see
     color-scheme in tokens.css). It's still a real <select>, so the keyboard
     and screen readers work as usual */
  @supports (appearance: base-select) {
    .select select,
    .select ::picker(select) {
      appearance: base-select;
    }

    .select select::picker-icon {
      display: none;
    }

    /* While the list is open, focus is on one of its options, so the select
       keeps the focused look the other fields have as you type in them */
    .select select:open {
      border-color: var(--accent-text);
      outline: 2px solid var(--accent-text);
      outline-offset: 2px;
    }

    .select ::picker(select) {
      margin-block: 8px;
      padding: 6px;
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius);
      background: var(--color-surface-raised);
      color: var(--color-text);
      box-shadow: var(--shadow-popover);
    }

    /* The text lines up with the field's (6 + 1 + 8 = 15 px in), with the ✓
       for the chosen one at the far end */
    .select option {
      justify-content: space-between;
      padding: 8px;
      border-radius: var(--radius-small);
    }

    .select option:hover,
    .select option:focus-visible {
      background: var(--color-wash);
    }

    /* On that lighter background the muted "Please select" falls below AA
       contrast, so it takes the full text colour */
    .select option[value=""]:hover,
    .select option[value=""]:focus-visible {
      color: var(--color-text);
    }

    /* The site's focus outline, inset so the panel doesn't clip it */
    .select option:focus-visible {
      outline-offset: -2px;
    }

    /* The accent's text colour, as the green and gold themselves are under
       the 3:1 a state's mark needs on the light field */
    .select option::checkmark {
      order: 1;
      color: var(--accent-text);
    }
  }

  .form .button {
    margin-top: 4px;
    border: none;
    cursor: pointer;
  }

  /* While forms.js sends the form, the button reads "Sending…" */
  .form .button[aria-disabled="true"] {
    cursor: progress;
  }

  .contact-info {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 48px;
    padding: 28px var(--gutter);
    border-bottom: 1px solid var(--color-border);
  }

  .contact-info-label {
    margin-bottom: 4px;
    color: var(--color-text-muted);
    font-size: var(--text-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .contact-info a {
    text-decoration: none;
  }

  .contact-info a:hover {
    text-decoration: underline;
  }

  /* Legal pages: long text at a comfortable reading width */

  .legal {
    max-width: calc(720px + 2 * var(--gutter));
    padding: 56px var(--gutter) 64px;
    color: var(--color-text-soft);
    font-size: var(--text-lead);
    line-height: var(--line-height-paragraph);
  }

  .legal h1 {
    font-size: 40px;
  }

  .legal h2 {
    margin: 36px 0 12px;
    color: var(--color-text);
    font-size: 18px;
  }

  .legal h3 {
    margin: 20px 0 8px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-lead);
    font-weight: 600;
    letter-spacing: 0;
  }

  .legal p,
  .legal ul {
    margin-bottom: 14px;
  }

  .legal ul {
    padding-left: 1.25em;
  }

  .legal li + li {
    margin-top: 6px;
  }

  .legal a {
    overflow-wrap: anywhere;
  }

  .legal-updated {
    color: var(--color-text-muted);
    font-size: var(--text-small);
  }

  /* A table in a legal page, boxed like Security & trust's documents table */
  .legal-table {
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
  }

  .legal-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }

  .legal-table th,
  .legal-table td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
  }

  .legal-table tr:last-child > * {
    border-bottom: none;
  }

  .legal-table thead th {
    color: var(--color-text-muted);
    font-weight: 500;
  }

  .legal-table tbody th {
    width: 40%;
    color: var(--color-text);
    font-weight: 500;
  }

  @media (max-width: 480px) {
    .legal h1 {
      font-size: 30px;
    }
  }

  .narrow {
    max-width: 680px;
  }

  .narrow .column-title {
    font-size: 22px;
  }

  /* Call to action: a closing headline beside its buttons */

  .cta-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 68px var(--gutter);
    border-bottom: 1px solid var(--color-border);
  }

  .cta-headline {
    max-width: 420px;
    font-size: 34px;
    line-height: var(--line-height-heading-large);
  }

  .cta-headline em {
    font-style: normal;
    color: var(--color-warm-large);
  }

  .cta-text {
    max-width: 380px;
    margin-top: 10px;
    color: var(--color-text-muted);
    line-height: var(--line-height-paragraph);
  }

  .cta-actions {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: flex-start;
    gap: 12px;
  }

  @media (max-width: 768px) {
    .two-columns,
    .feature-row,
    .card-grid {
      grid-template-columns: 1fr;
    }

    .two-columns > * + *,
    .feature-copy + .feature-copy {
      border-top: 1px solid var(--color-border);
      border-left: none;
    }

    .feature-screen,
    .feature-row-flip .feature-screen {
      order: 0;
      border-top: 1px solid var(--color-border);
      border-right: none;
      border-left: none;
    }

    .steps {
      grid-template-columns: 1fr 1fr;
    }

    .job {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }

    .form-row,
    .points {
      grid-template-columns: 1fr;
    }

    .point {
      border-right: none;
      border-bottom: 1px solid var(--color-border);
    }

    .point:last-child {
      border-bottom: none;
    }

    .points-aligned .point-title {
      min-height: 0;
    }

    .cta-block {
      flex-direction: column;
      align-items: stretch;
      gap: 24px;
      padding: 40px var(--gutter);
    }

    .cta-actions {
      align-items: stretch;
    }

    .cta-actions .button {
      justify-content: center;
    }
  }

  @media (max-width: 480px) {
    .steps,
    .role-grid {
      grid-template-columns: 1fr;
    }

    .trust .cert-list {
      flex-direction: column;
      gap: 8px;
    }
  }
}