/* Motor's design language, from the first motor.dev (Galadriel): black frames, square corners,
   flat gray shadows, Futura for display text, and a palette after Kandinsky. */

:root {
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: ui-serif, "New York", Charter, "Iowan Old Style", Georgia, Cambria, "Times New Roman", serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* Geometric display fonts with a system sans fallback. */
    --font-display: Futura, "Futura PT", "Century Gothic", "URW Gothic", "URW Gothic L", var(--font-sans);
    --tracking-caps: 0.08em;
    --color-text: #111;
    --color-muted: #4a4a4a;
    --color-line: #e4e4e4;
    --color-surface: #f2f2f2;
    --color-field: #fff;
    /* The gray shadow of buttons and raised panels. */
    --shadow: 0.25rem 0.25rem 0 var(--color-line);
    --color-background: #fefefe;

    /* Kandinsky palette. Contrast ratios: against background, white, and --color-text.
       WCAG AA minimums: 4.5:1 for text; 3:1 for lines, borders, and icons. */
    --color-cobalt: #1c4ba0;         /* 8.1:1, white 8.2:1, text 2.3:1 */
    --color-turquoise: #1a7f86;      /* 4.7:1, white 4.8:1, text 4.0:1 */
    --color-violet: #5b3a8e;         /* 8.5:1, white 8.6:1, text 2.2:1 */
    --color-rose-madder: #b8285f;    /* 5.9:1, white 6.0:1, text 3.2:1 */
    --color-vermilion: #e34234;      /* 4.1:1, white 4.1:1, text 4.6:1 */
    --color-cadmium-yellow: #f2c12e; /* 1.7:1, white 1.7:1, text 11.2:1: only for fills under dark text */
    --color-cadmium-yellow-line: #bc8c00; /* 3.0:1: the yellow for lines and borders */

    /* Links are bold, cobalt, and underlined: 8.1:1 on the background and 7.3:1 on the surface.
       Cobalt is only 2.3:1 with --color-text, so the underline, not the color, marks a link in a
       paragraph (WCAG 1.4.1). */
    --color-link: var(--color-cobalt);
    /* A lighter cobalt for a link under the pointer: 5.5:1 on the background and 4.9:1 on the
       surface. */
    --color-link-hover: #2563d3;
    /* The lightest gray with a contrast of 4.5:1 (WCAG AA) on the background. */
    --color-faint: #757575;
}

html {
    scroll-padding-top: 1.5rem;
    /* Every page keeps space for the scrollbar, so short pages and long pages have the same frame. */
    scrollbar-gutter: stable;
}

body {
    margin: 0 auto;
    max-width: 52rem;
    padding: 1.5rem;
    font-family: var(--font-sans);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-background);
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.15;
}

h1 {
    font-size: 2.5rem;
    line-height: 1.35;
}

h2 {
    font-size: 1.75rem;
}

main > section {
    margin-bottom: 3rem;
}

main > section:first-child p {
    font-size: 1.1875rem;
    line-height: 1.55;
}

a {
    color: var(--color-link);
    font-weight: 600;
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
    transition: color 150ms ease;
}

/* Hover changes the link color only where a link uses it, so the logo and links with their own
   color stay as they are. */
a:hover {
    --color-link: var(--color-link-hover);
}

a:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

code {
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

pre.code {
    margin: 0.75rem 0 1.25rem;
    padding: 0.875rem 1rem;
    overflow-x: auto;
    border-left: 4px solid var(--color-text);
    background: var(--color-surface);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.55;
}

pre.code code {
    font-size: inherit;
}

/* A button: a link in a black frame on the background, with the gray shadow. Under the pointer, it
   fills with the gray of the surface. When pressed, it moves onto its shadow. */
.button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--color-text);
    background: var(--color-background);
    box-shadow: var(--shadow);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.25;
    text-decoration-line: none;
    transition: background-color 150ms ease;
}

.button:hover {
    background: var(--color-surface);
}

.button:active {
    box-shadow: none;
    transform: translate(0.25rem, 0.25rem);
}

/* The paragraph of a Get started button, with room above it. The button is centered. */
.start {
    margin-top: 2rem;
    text-align: center;
}

/* The header: the logo at the left, the main navigation at the right. */
body > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 3rem;
}

/* The logo keeps the color of the text, without an underline. */
body > header > a {
    color: inherit;
    text-decoration-line: none;
}

body > header svg {
    display: block;
    height: 2rem;
    width: auto;
}

body > header ul {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body > header nav a {
    font-family: var(--font-display);
    font-size: 1.125rem;
    /* Futura has no semibold; use medium. */
    font-weight: 500;
    white-space: nowrap;
}

/* The link of the page that is open is black, without an underline. */
body > header nav a[aria-current="page"] {
    color: var(--color-text);
    text-decoration-line: none;
}

/* Sign out is a button, in a form, that looks like the links beside it. Every page has it, so
   it's here rather than in console.css. */
body > header form {
    margin: 0;
}

body > header nav button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-link);
    font: 500 1.125rem var(--font-display);
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
    white-space: nowrap;
    cursor: pointer;
    transition: color 150ms ease;
}

body > header nav button:hover {
    --color-link: var(--color-link-hover);
}

body > header nav button:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

/* The copyright line and the footer links. */
body > footer {
    margin-top: 3rem;
    color: var(--color-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 1.25rem;
}

body > footer ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body > footer a {
    font-weight: 500;
}

body > footer a[aria-current="page"] {
    color: var(--color-text);
    text-decoration-line: none;
}

/* The heading of the hero is centered, as its button is. The hero is tight enough that its rotors
   fly above the fold on a 13-inch laptop (a viewport of 1440 by 790). */
.hero h1 {
    margin: 0;
    text-align: center;
    text-wrap: balance;
}

/* The lead sits as far below the heading as the cards sit below it: the heading's leading is the
   rest of the space above. */
.hero .lead {
    margin-top: 1rem;
    text-align: center;
    text-wrap: balance;
}

/* The heading breaks into two lines at a chosen place. On a narrow screen, where that break would
   leave a short line, the browser balances the lines instead. */
@media (max-width: 40rem) {
    .hero br.wide {
        display: none;
    }
}

.hero > .start {
    margin-top: 1.5rem;
}

.hero > .tiles.rotors {
    margin-top: 1.5rem;
}

/* The hero's band of shapes is for a phone only. */
.hero > .tiles.phone {
    display: none;
}

/* On a phone, the rotors fly between the header and the heading, and the shapes fly below the
   button. The hero is a column, so that the rotors can go first; its margins don't collapse, so
   each part has only the space above it. */
@media (max-width: 40rem) {
    .hero {
        display: flex;
        flex-direction: column;
    }

    .hero > * {
        margin-bottom: 0;
    }

    .hero > .tiles.rotors {
        order: -1;
        margin: 0 0 2rem;
    }

    .hero > .tiles.phone {
        display: block;
        margin: 2.5rem 0 1.5rem;
    }
}

/* The bands of the hero are prayer flags, which flags.js flies on a canvas as wide as the screen, in
   front of the page but not in the way of the pointer. Each band keeps room for its flags and for
   the sag of its rope, so the page doesn't shift when they come. flags.js reads both sizes from the
   band: its height and its bottom padding. The canvas has room for one and a half flags above and
   below, for the wind. It has no positioned ancestor, so left and width are those of the screen. */
.tiles {
    --flag: clamp(2.5rem, 3.5vw, 4rem);
    --sag: clamp(0.75rem, 3vw, 3.5rem);
    box-sizing: content-box;
    height: var(--flag);
    padding-bottom: var(--sag);
    margin-bottom: 2.5rem;
}

.tiles.rotors,
.tiles.shapes {
    margin: 2.5rem 0 3rem;
}

.tiles canvas {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: calc(var(--flag) * 4 + var(--sag));
    margin-top: calc(var(--flag) * -1.5);
    pointer-events: none;
    opacity: 0;
    transition: opacity 400ms ease-out;
}

.tiles canvas.flying {
    opacity: 1;
}

/* Without WebGL 2, the flags hang flat from a straight rope. */
.tiles .flat {
    position: absolute;
    left: 0;
    width: 100%;
    display: flex;
    gap: calc(var(--flag) / 8);
    overflow: hidden;
    border-top: 1.5px solid var(--color-text);
}

.tiles .flat svg {
    flex: none;
    box-sizing: border-box;
    width: var(--flag);
    height: var(--flag);
    border: 1.25px solid var(--color-muted);
    border-top-width: 2.25px;
}

/* Text that only screen readers and agents that read the page get. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The path: a painting whose parts open a card with the text of that stage of the climb. */
.path > h2,
.path > .hint {
    text-align: center;
}

.path > p {
    font-size: 1.1875rem;
    line-height: 1.55;
}

.path > .hint {
    color: var(--color-muted);
    font-size: 1rem;
}

.painting {
    position: relative;
    margin: 2rem 0;
}

/* The painting has a layer of its own, so that nothing that moves over it makes the browser draw it
   again. */
.painting img {
    display: block;
    width: 100%;
    height: auto;
    will-change: transform;
}

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

/* The parts of the painting, in percent of its height, and where the marker of each part is, in
   percent of that part. The painting is 1200 by 1680 units, and its arch goes from 92 to 1108 across
   and starts at 92 down. */
.stage.summit { --top: 5.5%;  --height: 37%;   --x: 50%; --y: 76%; }
.stage.forge  { --top: 42.5%; --height: 14.9%; --x: 49%; --y: 22%; }
.stage.piston { --top: 57.4%; --height: 13.4%; --x: 82%; --y: 33%; }
.stage.base   { --top: 70.8%; --height: 17.9%; --x: 53%; --y: 89%; }

.stage summary {
    position: absolute;
    top: var(--top);
    left: 7.67%;
    z-index: 1;
    width: 84.66%;
    height: var(--height);
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.stage summary::-webkit-details-marker {
    display: none;
}

/* The top of the summit follows the arch, so that it doesn't reach the corners of the card. */
.stage.summit summary {
    border-radius: 50% 50% 0 0 / 65.5% 65.5% 0 0;
}

.stage summary:focus-visible {
    outline: none;
}

.stage summary:focus-visible .marker {
    outline: 3px solid var(--color-link);
    outline-offset: 3px;
}

/* Under the pointer, while no card is open, a stage is lighter. */
.stage summary::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgb(251 244 223 / 16%);
    opacity: 0;
    content: "";
    transition: opacity 150ms ease-out;
}

.painting:not(:has(.stage[open])) .stage summary:hover::after {
    opacity: 1;
}

/* While a card is open, the arch is darker, except for a hole at the stage of that card. Two panes
   make the hole: one from the top of the arch down to --from, and one from the bottom of the arch up
   to --to, in parts of the height of the arch. They change only by transform and opacity, which the
   browser can do without drawing anything again, so the panes stay in step with the page as it
   scrolls. The arch goes from 92 to 1490 down, and the stages meet at 714, 964, and 1190. */
.veil {
    --from: 0.785;
    --to: 1;
    position: absolute;
    top: 5.5%;
    left: 7.67%;
    width: 84.66%;
    height: 83.2%;
    overflow: hidden;
    border-radius: 50% 50% 0 0 / 29.2% 29.2% 0 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-out;
    will-change: opacity;
}

.veil::before,
.veil::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(29 20 12 / 72%);
    content: "";
    transition: transform 300ms ease-in-out;
    will-change: transform;
}

.veil::before {
    top: 0;
    transform: scaleY(var(--from));
    transform-origin: top;
}

.veil::after {
    bottom: 0;
    transform: scaleY(calc(1 - var(--to)));
    transform-origin: bottom;
}

.painting:has(.stage[open]) .veil { opacity: 1; }
.painting:has(.stage.summit[open]) .veil { --from: 0; --to: 0.445; }
.painting:has(.stage.forge[open]) .veil { --from: 0.445; --to: 0.624; }
.painting:has(.stage.piston[open]) .veil { --from: 0.624; --to: 0.785; }
.painting:has(.stage.base[open]) .veil { --from: 0.785; --to: 1; }

@media (prefers-reduced-motion: reduce) {
    .veil::before,
    .veil::after {
        transition: none;
    }
}

/* The marker of a stage: a white disc with its place on the climb, with a black outline and a soft
   shadow that lift it off the white parts of the painting. The first one pulses, until a card is open, to show where
   the climb starts. */
.marker {
    position: absolute;
    top: var(--y);
    left: var(--x);
    z-index: 1;
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 500;
    border: 2px solid #1d140c;
    color: #1d140c;
    background: #fff;
    box-shadow: 0 1px 6px rgb(29 20 12 / 40%);
    transform: translate(-50%, -50%);
    transition: transform 150ms ease-out;
}

.stage summary:hover .marker,
.stage[open] .marker {
    transform: translate(-50%, -50%) scale(1.15);
}

@media (prefers-reduced-motion: no-preference) {
    .painting:not(:has(.stage[open])) .stage.base .marker {
        animation: marker_pulse 1800ms ease-out infinite;
    }
}

@keyframes marker_pulse {
    from { box-shadow: 0 1px 6px rgb(29 20 12 / 40%), 0 0 0 0 rgb(255 255 255 / 80%); }
    to   { box-shadow: 0 1px 6px rgb(29 20 12 / 40%), 0 0 0 16px rgb(255 255 255 / 0%); }
}

/* The card of a stage: a small piece of paper over the painting, next to its stage. The summit is
   at the top of the painting, so its card is under it, and the others are over theirs. */
.stage .card {
    position: absolute;
    bottom: calc(100% - var(--top));
    left: 50%;
    z-index: 2;
    box-sizing: border-box;
    width: min(24rem, 100% - 1rem);
    padding: 1rem 1.25rem;
    border: 3px solid #1d140c;
    outline: 2px solid var(--color-cadmium-yellow);
    outline-offset: -8px;
    color: #1d140c;
    background: #fbf4df;
    box-shadow: 0 0.25rem 1rem rgb(29 20 12 / 20%);
    transform: translateX(-50%);
}

.stage.summit .card {
    top: calc(var(--top) + var(--height));
    bottom: auto;
}

.stage .card h3 {
    margin: 0;
    font-size: 1.5rem;
}

.stage .card p {
    margin: 0.5rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.5;
}

/* The arrows to the stage before and the stage after. path.js adds them, because they need it. */
.stage .steps {
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem;
}

.stage .steps button {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    place-items: center;
    border: 2px solid #1d140c;
    border-radius: 50%;
    color: #1d140c;
    background: transparent;
    cursor: pointer;
}

.stage .steps button:hover {
    color: #fbf4df;
    background: #1d140c;
}

.stage .steps button:focus-visible {
    outline: 3px solid var(--color-link);
    outline-offset: 2px;
}

.stage .steps .next {
    margin-left: auto;
}

.stage .steps svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Where the margin beside the painting has room for it, the card is there, and it covers nothing. */
@media (min-width: 87rem) {
    .stage .card,
    .stage.summit .card {
        top: calc(var(--top) + var(--height) / 2);
        bottom: auto;
        left: calc(100% + 1.5rem);
        width: 17rem;
        transform: translateY(-50%);
    }
}

/* On a narrow screen, the markers are smaller, so they cover less of the painting. */
@media (max-width: 40rem) {
    .marker {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.9375rem;
    }

    .stage .card {
        padding: 0.875rem 1rem;
    }

    .stage .card h3 {
        font-size: 1.25rem;
    }

    .stage .card p {
        font-size: 1rem;
    }
}

/* The products in the hero: a card for each, side by side, in the gray frame of the prices. Each
   card links to the product, and has its sign in a Kandinsky color, what it is in the muted color,
   its name in the display font, and a line about it. Under the pointer, a card fills with the gray
   of the surface, as a button does. On a narrow screen, the cards stack. */

.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.products a {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    height: 100%;
    box-sizing: border-box;
    padding: 1.25rem;
    border: 2px solid var(--color-faint);
    background-color: var(--color-background);
    color: var(--color-text);
    font-weight: 400;
    text-decoration-line: none;
}

/* The gray of a card under the pointer is a layer behind its content that fades in, so the browser
   fades it on the compositor and doesn't paint the card again in each frame. A touch screen has no
   pointer to hover, and a card it taps would otherwise stay gray. */
@media (hover: hover) {
    .products a {
        position: relative;
        isolation: isolate;
    }

    .products a::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-color: var(--color-surface);
        opacity: 0;
        transition: opacity 150ms ease;
    }

    .products a:hover::before {
        opacity: 1;
    }
}

.products .icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.75rem;
}


.products strong {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.25;
}

.products a > span:not(.replaces) {
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.45;
}

/* What a product replaces, as the lines of a diff at the bottom of its card: the old tool removed in
   red, the product added in green. On their tints, the rose madder is 5.1:1 and the green 5.8:1. */
.products .replaces {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    padding-top: 1rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.6;
}

.products .replaces del,
.products .replaces ins {
    padding: 0 0.5rem;
    text-decoration-line: none;
    white-space: pre;
}

.products .replaces del {
    background-color: #fbe9ef;
    color: var(--color-rose-madder);
}

.products .replaces ins {
    background-color: #e7f4ea;
    color: #1d6b34;
}

.products .replaces del::before { content: "- "; }
.products .replaces ins::before { content: "+ "; }

/* The section of a product on the home page: its sign and name above the heading, then its text and
   the list of what it does. Its text is the size of the list's, so the section has three sizes: the
   name, the heading, and the text. Each part is 1rem below the one above it, and the list 1.5rem. */
.product > p {
    margin: 0 0 1rem;
    line-height: 1.6;
}

/* A link after the list, such as Amp's, is a little apart from it. A button, such as the last
   "Get started" of the page, is further, so it stands apart from the list. */
.product > .features + p {
    margin-top: 1.5rem;
}

.product > p.start {
    margin-top: 3.5rem;
}

.product > h2 + p {
    max-width: 65ch;
}

.product > .name {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
}

.product > .name .icon {
    width: 2rem;
    height: 2rem;
}

.product > h2 {
    margin: 0 0 1rem;
}

.product > h3 {
    margin-top: 2rem;
    font-size: 1.25rem;
}

/* Space separates the products, and a small rotor marks the middle of each gap. */
main > .product {
    margin-bottom: 4.5rem;
}

/* The divider is a third of the content width, and it's faint, so it marks the gap without
   taking the reader's eye. Its hairlines fade out toward their ends. */
.product-divider {
    width: calc(100% / 3);
    margin: -1.5rem auto 3rem;
    opacity: 0.7;
}

.product-divider svg {
    display: block;
    width: 100%;
    height: auto;
    mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
}

.product-divider .rule {
    stroke: #cfcfcf;
    stroke-width: 1;
}

.product-divider .rotor {
    fill: var(--color-cobalt);
}

.product-divider .hub {
    fill: var(--color-background);
}

/* The rotor turns clockwise, slowly, as a prayer wheel does. Its color goes once around the
   palette in hue order, and each color stays a while before the next. Yellow is the yellow for
   lines, because the fill yellow is too faint on the background. divider.js speeds up both while
   the pointer is over a divider. */
@media (prefers-reduced-motion: no-preference) {
    .product-divider .turn {
        transform-box: view-box;
        transform-origin: 120px 12px;
        animation: rotor_turn 16s linear infinite;
    }

    .product-divider .rotor {
        animation: rotor_colors 36s ease-in-out infinite;
    }
}

@keyframes rotor_turn {
    to { transform: rotate(1turn); }
}

@keyframes rotor_colors {
    0%, 8%    { fill: var(--color-cobalt); }
    17%, 25%  { fill: var(--color-violet); }
    33%, 42%  { fill: var(--color-rose-madder); }
    50%, 58%  { fill: var(--color-vermilion); }
    67%, 75%  { fill: var(--color-cadmium-yellow-line); }
    83%, 92%  { fill: var(--color-turquoise); }
    100%      { fill: var(--color-cobalt); }
}

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

.features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 2rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

/* Each feature spans two rows of the list, its heading and its text, so the texts of a row start
   at the same height when one heading wraps and another doesn't. */
.features > li {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0.5rem;
}

.features h3 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
}

.features p {
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 40rem) {
    .features {
        grid-template-columns: 1fr;
    }
}

/* The signs of the products, each in a Kandinsky color: Piston's is the violet of compute. The
   cut-outs are in the color of the background, as the meters' holes are. */
.products .sign,
.product .sign {
    fill: var(--fill);
}

.products .hole,
.product .hole {
    fill: var(--color-background);
}

.products .hole-line,
.product .hole-line {
    fill: none;
    stroke: var(--color-background);
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Amp's sawtooth keeps the sharp corners of a sawtooth wave. */
.products .saw,
.product .saw {
    stroke-linejoin: miter;
}

.products .ring,
.product .ring {
    fill: none;
    stroke: var(--fill);
    stroke-width: 2.5;
}

.p-amp    { --fill: var(--color-cobalt); }
.p-gauss  { --fill: var(--color-vermilion); }
.p-piston { --fill: var(--color-violet); }

/* On a narrow screen, the cards stack, and each is compact: its sign beside its name, line, and
   diff, so the three cards fit on the screen with the heading. */
@media (max-width: 40rem) {
    .products {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .products a {
        display: grid;
        grid-template-columns: 2.25rem 1fr;
        align-content: start;
        column-gap: 0.875rem;
        row-gap: 0.125rem;
        padding: 1rem;
    }

    .products .icon {
        grid-row: 1 / span 3;
        width: 2.25rem;
        height: 2.25rem;
        margin: 0;
    }

    .products strong {
        font-size: 1.25rem;
    }

    .products .replaces {
        padding-top: 0.5rem;
        font-size: 0.8125rem;
    }
}

/* The prices on the pricing page: one row for each meter, in a gray frame (black frames are for
   buttons). Each meter has an icon in a Kandinsky color. The name and the price are in the display
   font, and the description and the unit are under them in the muted color. The header row is
   only for screen readers. The text above the prices is like the text of the hero. */
.pricing > p {
    font-size: 1.1875rem;
    line-height: 1.55;
}

.meters {
    width: 100%;
    margin-top: 1.5rem;
    border: 2px solid var(--color-faint);
    /* The borders are separate, so the gray dividers of the cells don't cut into the frame. */
    border-collapse: separate;
    border-spacing: 0;
}

.meters thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.meters tbody tr + tr > * {
    border-top: 2px solid var(--color-line);
}

.meters th,
.meters td {
    padding: 1rem 1.25rem;
    vertical-align: top;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.25;
}

.meters th {
    position: relative;
    padding-left: 4.5rem;
    text-align: left;
}

/* The icon is at the left of the name and the description, in the middle of the row. Each sign is
   in the color of its meter, with holes in the color of the background. */
.meters .icon {
    position: absolute;
    top: 50%;
    left: 1.25rem;
    width: 2rem;
    height: 2rem;
    transform: translateY(-50%);
}

.meters .sign {
    fill: var(--fill);
}

.meters .sign-line,
.meters .pin {
    fill: none;
    stroke: var(--fill);
    stroke-width: 3;
}

.meters .sign-line {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.meters .pin {
    stroke-width: 2;
}

.meters .hole {
    fill: var(--color-background);
}

/* The contacts of the memory module are a dashed line in the color of the background. */
.meters .contacts {
    fill: none;
    stroke: var(--color-background);
    stroke-width: 3;
    stroke-dasharray: 1.5 1.5;
}

.meters td {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.meters span {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-muted);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.45;
}

/* The color of each meter. Bytes stored uses the yellow for lines (3.0:1), because the yellow for
   fills is too light on the background. */
.meters .m-out     { --fill: var(--color-vermilion); }
.meters .m-stored  { --fill: var(--color-cadmium-yellow-line); }
.meters .m-compute { --fill: var(--color-violet); }
.meters .m-memory  { --fill: var(--color-turquoise); }

/* On a narrow screen, the rows have less padding and smaller text, and the icon is smaller and at
   the top of its row, as the pieces of the services are. */
@media (max-width: 40rem) {
    .meters th,
    .meters td {
        padding: 0.875rem 1rem;
        font-size: 1.1875rem;
    }

    .meters th {
        padding-left: 3.5rem;
    }

    .meters .icon {
        top: 0.875rem;
        left: 1rem;
        width: 1.625rem;
        height: 1.625rem;
        transform: none;
    }

    .meters td {
        padding-left: 0;
    }

    .meters span {
        font-size: 0.9375rem;
    }
}

/* The investors on the About page: a row of logos below the line that introduces them. */
.backers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.backers a {
    display: flex;
    color: inherit;
    text-decoration: none;
}

.backers img {
    width: auto;
    height: 1.625rem;
}

.backers li:last-child img {
    height: 2.25rem;
}

/* The Terms of Service and the Privacy Policy: long text in the body size, with numbered sections. */
main > section.legal p {
    font-size: 1rem;
    line-height: 1.5;
}

.legal .effective {
    color: var(--color-muted);
}

.legal h2 {
    margin-top: 2.5rem;
    font-size: 1.5rem;
}

.legal h3 {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.125rem;
}

.legal li + li {
    margin-top: 0.375rem;
}

/* On a phone, the text and the header are smaller, and the bands have two rows. */
@media (max-width: 40rem) {
    body {
        padding: 1rem;
    }

    h1 {
        font-size: 2rem;
    }

    /* The links go under the logo when they don't fit beside it. */
    body > header {
        flex-wrap: wrap;
        row-gap: 0.75rem;
        margin-bottom: 2rem;
    }

    body > header ul {
        flex-wrap: wrap;
        gap: 0.25rem 1rem;
    }

    body > header svg {
        height: 1.5rem;
    }

    body > header nav a {
        font-size: 1rem;
    }

}