/* Anodyne site: the industry pages.
   Link this file after site.css. It uses the type scale, the colors and the gutter of site.css. */

:root {
  --ink-soft: #69717A;   /* ink, 85% tint: smaller, lighter text (4.9:1 on white) */
  --wash: #EEF5F6;       /* accent, 7% tint: the background of a band or a callout */
}

h3,
h4,
ol {
  margin: 0;
}

/* Text for screen readers only */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Keeps a hyphenated term on one line */
.nowrap {
  white-space: nowrap;
}

/* Intro: the eyebrow, the page heading, the subhead and the body. At 960 px and wider, the header sits over the top of it. */

.intro {
  padding: 216px var(--gutter) clamp(40px, 4vw, 64px);
}

.intro h1 {
  max-width: 22ch;
  margin-bottom: 32px;
  font-size: clamp(44px, 5.4vw, 84px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
}

.intro .lede {
  max-width: 34ch;
  margin-bottom: 28px;
}

.intro-body {
  max-width: 46rem;
  font-size: clamp(18px, 1.3vw, 20px);
  line-height: 1.6;
}

/* Sections. A list section is two columns: the heading at the left, the list at the right.
   A row section (.section without .split) puts the heading above the content.
   The page groups the sections in two parts, "How it works" and "Applications". Each part has an h2; its sections have an h3. */

.section {
  padding: clamp(56px, 6vw, 96px) var(--gutter);
}

/* One size for every section heading: "How it works" and "Applications" (h2) and the headings inside them (h3). */
.section h2,
.section-head h3 {
  font-size: clamp(30px, 2.9vw, 44px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.1;
  text-wrap: balance;
}

.section-head {
  max-width: 60rem;
  margin-bottom: clamp(44px, 5vw, 72px);
}

.section-line {
  max-width: 32ch;
  margin-top: 24px;
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.5;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px clamp(40px, 5vw, 96px);
  align-items: start;
}

.split .section-head {
  margin-bottom: 0;
}

/* Rows: a list with a hairline above each item */

.rows {
  padding: 0;
  list-style: none;
}

.rows > li {
  padding: 20px 0 22px;
  border-top: 1px solid var(--rule);
  font-size: clamp(19px, 1.45vw, 22px);
  line-height: 1.4;
}

.rows-strong > li {
  font-weight: 500;
}

/* Name and line: the name at the left, its line at the right (Connect, Prove, Replace and the apps) */

.app-list > li {
  display: grid;
  grid-template-columns: minmax(0, 10em) minmax(0, 1fr);
  gap: 4px 32px;
  align-items: baseline;
}

.app-list h3,
.app-list h4 {
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
}

.app-list p {
  font-size: 18px;
  line-height: 1.45;
}

/* A callout under the rows (the end-of-support line) */

.callout {
  margin-top: 32px;
  padding: 24px 28px;
  border-left: 3px solid var(--accent);
  background: var(--wash);
  font-size: clamp(18px, 1.35vw, 20px);
  font-weight: 500;
  line-height: 1.5;
}

/* Proven on your history: a band in the accent wash, with one column for each point */

.proof {
  background: var(--wash);
}

.proof-list {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 40px clamp(24px, 2.6vw, 48px);
  padding: 0;
  list-style: none;
}

.proof-list li::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: 25px;
  background: var(--accent);
}

.proof-list h4 {
  margin-bottom: 10px;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.proof-list p {
  font-size: 18px;
  line-height: 1.45;
}

/* From your spreadsheets: sheet, link, app. The columns line up across the rows. */

.pairs {
  display: grid;
  grid-template-columns: max-content auto minmax(0, 1fr);
  column-gap: 28px;
}

.pairs > li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}

.pair-app {
  font-weight: 500;
}

.pair-link {
  display: block;
  width: 64px;
  height: 12px;
}

/* Automate */

.trust-line {
  margin-top: 36px;
  color: var(--accent);
  font-size: clamp(18px, 1.35vw, 20px);
  font-weight: 600;
  line-height: 1.45;
}

/* The link under the trust line, to the tab of this industry on the Automations page */
.more-link {
  margin-top: 16px;
  font-size: clamp(18px, 1.35vw, 20px);
  line-height: 1.45;
}

.more-link a {
  font-weight: 600;
  text-underline-offset: 4px;
}

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

/* The process: one row of nodes in the logo grammar, with any number of steps. The step name is above each node, the system name below.
   Each step name keeps the height of two lines, so the nodes stay on one line when a name wraps.
   Each item draws the line to the next node, with a small gap at each end. */

.process-name {
  margin-bottom: 20px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.process {
  --node: 20px;
  --gap: 5px;
  --stroke: 4px;
  --step-lh: 30px;
  --step-h: calc(2 * var(--step-lh));
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  padding: 0;
  list-style: none;
}

.process li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 8px;
  text-align: center;
}

.process-step {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: var(--step-h);
  font-size: clamp(19px, 1.5vw, 24px);
  font-weight: 500;
  line-height: var(--step-lh);
  text-wrap: balance;
}

.process-node {
  flex: none;
  width: var(--node);
  height: var(--node);
  margin: 18px 0 16px;
  border-radius: 50%;
  background: var(--ink);
}

.process-system {
  color: var(--ink-soft);
  font-size: clamp(15px, 1.1vw, 16px);
  line-height: 1.4;
}

.process li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--step-h) + 18px + (var(--node) - var(--stroke)) / 2);
  left: calc(50% + var(--node) / 2 + var(--gap));
  width: calc(100% - var(--node) - 2 * var(--gap));
  height: var(--stroke);
  background: var(--accent);
}

/* Built-in trust: two columns of rows, then the security line */

.trust-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
}

.trust-note {
  margin-top: 28px;
  font-size: clamp(18px, 1.35vw, 20px);
  line-height: 1.45;
}

.trust-note a {
  font-weight: 600;
  text-underline-offset: 4px;
}

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

/* The end line of each example page: "Every business is different." It sits between Works with and the contact section, which give the space around it. */
.different {
  padding-top: 0;
  padding-bottom: 0;
}

.different-line {
  width: fit-content;
  max-width: 100%;
  margin-top: 0;
}

.different-line a {
  font-weight: 600;
  text-underline-offset: 4px;
}

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

/* Works with: a short list, so it stays still (the home page moves its longer list) */

.systems {
  padding-top: clamp(56px, 6vw, 96px);
}

.systems-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 0;
  padding: 16px var(--gutter);
  list-style: none;
}

.systems-list li {
  display: flex;
  align-items: center;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.3;
}

.systems-list li:not(:last-child)::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 clamp(28px, 3.2vw, 52px);
  border-radius: 50%;
  background: var(--accent);
}

/* Under 960 px: one column. The process row becomes a column, with the names at the right of the nodes. */

@media (max-width: 959px) {
  .intro {
    padding: 24px var(--gutter) 24px;
  }

  .intro h1 {
    margin-bottom: 24px;
  }

  .intro .lede {
    margin-bottom: 20px;
  }

  .section h2,
  .section-head h3 {
    font-size: clamp(26px, 7vw, 32px);
  }

  .section-head {
    margin-bottom: 36px;
  }

  .section-line {
    margin-top: 16px;
    font-size: 19px;
  }

  .split {
    display: block;
  }

  .split .section-head {
    margin-bottom: 36px;
  }

  .rows > li {
    padding: 16px 0 18px;
  }

  .proof-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 36px 24px;
  }

  .proof-list li::before {
    margin-bottom: 18px;
  }

  .proof-list h4 {
    margin-bottom: 6px;
  }

  .process-name {
    margin-bottom: 24px;
  }

  .process {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
  }

  .process li {
    display: grid;
    grid-template-columns: var(--node) minmax(0, 1fr);
    column-gap: 20px;
    align-items: start;
    padding: 0 0 32px;
    text-align: left;
  }

  .process-step {
    display: block;
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
  }

  .process-node {
    grid-column: 1;
    grid-row: 1;
    margin: calc((var(--step-lh) - var(--node)) / 2) 0 0;
  }

  .process-system {
    grid-column: 2;
    grid-row: 2;
  }

  .process li:not(:last-child)::after {
    top: calc((var(--step-lh) + var(--node)) / 2 + var(--gap));
    bottom: calc(var(--gap) - (var(--step-lh) - var(--node)) / 2);
    left: calc((var(--node) - var(--stroke)) / 2);
    width: var(--stroke);
    height: auto;
  }
}

/* Under 600 px: the names and lines, the points, the spreadsheet pairs and the trust items each take one column. */

@media (max-width: 599px) {
  .app-list > li {
    display: block;
  }

  .app-list p {
    margin-top: 4px;
    font-size: 17px;
  }

  .callout {
    padding: 20px;
  }

  .proof-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .pairs {
    display: block;
  }

  .pairs > li {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "sheet sheet"
      "link app";
    gap: 6px 16px;
  }

  .pair-sheet {
    grid-area: sheet;
  }

  .pair-link {
    grid-area: link;
    width: 48px;
  }

  .pair-app {
    grid-area: app;
  }

  .trust-list {
    display: block;
  }

  /* Works with: one system on each line, with the dot before it */
  .systems-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .systems-list li::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 18px;
    border-radius: 50%;
    background: var(--accent);
  }

  .systems-list li:not(:last-child)::after {
    content: none;
  }
}

/* Legal and error pages: the page heading and the date line, then one column of text with a readable line length */

.page-date {
  color: var(--ink-soft);
  font-size: 16px;
}

.legal {
  padding-top: 0;
}

.prose {
  max-width: 42rem;
  font-size: clamp(18px, 1.3vw, 20px);
  line-height: 1.6;
}

.prose p + p {
  margin-top: 1.1em;
}

.prose strong {
  font-weight: 600;
}

/* Why Anodyne and Automations pages */

/* The story: three paragraphs of body text in the intro */
.intro-body + .intro-body {
  margin-top: 1.1em;
}

/* The proof band with h3 points: "What we believe" (Why Anodyne) and the principles (Automations), under a page h2 */
.proof-list h3 {
  margin-bottom: 10px;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* FAQ: rows, with each question above its answer */
.faq-list > li {
  display: block;
}

.faq-list p {
  max-width: 60ch;
  margin-top: 8px;
}

.faq-list a {
  font-weight: 600;
  text-underline-offset: 4px;
}

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

/* Call to action: the button above the address (both pages) */
.contact-action {
  margin-bottom: 28px;
}

@media (max-width: 959px) {
  .proof-list h3 {
    margin-bottom: 6px;
  }
}