/*
 * The landing's own layout. The palette, the type and the base element rules
 * come from tokens.css, which every surface on the origin shares (ADR-0005 §6);
 * nothing here restates a colour or a font.
 *
 * The page is one column of full-width sections. Inside a section the content
 * sits on a twelve-column grid down to 900px and becomes a single column below
 * that, because every two-part section here is a heading beside its evidence —
 * squeezed into half a phone screen neither half is readable, and stacked they
 * read in the order they were written.
 */

.page {
  --gutter: clamp(20px, 5vw, 72px);
  --section-gap: clamp(56px, 8vw, 88px);
}

/* The paragraph is the band rather than its marker div. A live page keeps the
   marker and renders no paragraph, so it also leaves no empty strip behind. */
.surface-words {
  margin: 0;
  padding: 12px var(--gutter);
  border-bottom: var(--hairline) solid var(--line);
  background: var(--raised);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

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

.section {
  padding: 0 var(--gutter) var(--section-gap);
}

.span-5 {
  grid-column: span 5;
}

.span-7 {
  grid-column: span 7;
}

.eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A link sitting inside a sentence is underlined, because inside a sentence
   colour is the only thing separating it from the words around it and colour
   alone is not a signal everyone receives. Links that are already shaped like
   something to click — the nav, the buttons, the footer row — are left as the
   design drew them. */
.section__body a,
.cell__body a,
.row__body a,
.caption a,
.open__list a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Header */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px var(--gutter);
  border-bottom: var(--hairline) solid var(--line);
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.wordmark__name {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.wordmark__stage {
  font-size: 12px;
  color: var(--muted);
}

.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
  flex-wrap: wrap;
  font-size: 14px;
}

/* A link in the header or the footer is a thing a thumb has to hit, and a line
   of 14px text is 22px tall at most. These give every one of them a 24px box
   without moving anything on the page. */
.masthead__nav a,
.colophon__links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* The theme switch, in the documentation's own measurements: a 40 by 22 track,
   an 18 pixel knob that travels 18. A reader crosses between the two surfaces on
   one origin, and a control that changes shape halfway reads as two products.
   The one thing that is ours rather than theirs is the colour, which comes from
   the tokens like everything else on the page.

   Everything about the track is stated rather than inherited: a button takes
   neither size nor background from the page on its own, and the square corners
   the rest of the site uses would make this read as a box and not as a switch,
   so it is the one place with a full radius. */
.switch {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 22px;
  padding: 0;
  background: var(--raised);
  border: var(--hairline) solid var(--line);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color 0.25s;
}

.switch:hover {
  border-color: var(--line-strong);
}

.switch__knob {
  position: absolute;
  top: 1px;
  left: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--surface);
  border-radius: 50%;
  /* The travel is the one thing that has to be animated: it is what says the
     press did something, on a control whose two states otherwise differ by a
     glyph most people will not look at. */
  transition: transform 0.25s;
}

.switch[aria-checked="true"] .switch__knob {
  transform: translateX(18px);
}

.switch svg {
  position: absolute;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.switch__moon {
  fill: var(--muted);
  stroke: none;
}

/* One of the two, never both: the knob shows the state the page is in, and the
   title on the button says where a press would take it. */
.switch[aria-checked="true"] .switch__sun,
.switch:not([aria-checked="true"]) .switch__moon {
  display: none;
}

/* Buttons here are links: every one of them goes to a page, and none of them
   submits anything. */

.button {
  display: inline-block;
  border-radius: var(--radius);
  padding: 12px 22px;
  font-size: 15px;
  line-height: 1.3;
}

.button--primary {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 500;
}

/* The bordered buttons take --line-strong rather than the page's hairline: at
   1.31:1 the drawn hairline left "Talk to us" looking like a sentence that
   happened to have a box near it. */

.button--quiet {
  color: var(--fg);
  border: var(--hairline) solid var(--line-strong);
}

.button--small {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  font-size: 14px;
  color: var(--fg);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius);
}

/* Hero */

.hero {
  padding: clamp(48px, 9vw, 96px) var(--gutter) var(--section-gap);
  align-items: start;
}

.hero__title {
  font-size: clamp(31px, 4.2vw, 48px);
  line-height: 1.08;
}

.hero__lede {
  margin-top: 24px;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 32em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.hero__aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

/* The code panel. It is a picture of one real call, not a widget: the sample is
   the portal quickstart's own, so the two cannot disagree. */

.panel {
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 0;
}

.panel__label {
  padding: 10px 16px;
  border-bottom: var(--hairline) solid var(--line);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.panel pre {
  margin: 0;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted);
  overflow-x: auto;
}

.tok-key {
  color: var(--fg);
}

.tok-call {
  color: var(--accent);
}

.tok-str {
  color: var(--ok);
}

.caption {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.caption--spaced {
  margin-top: 12px;
}

/* Cells: the three-across strip and the numbered rows. Both are one hairline
   grid drawn by a 1px gap over a --line background, so the rules between cells
   never double up. */

.cells {
  display: grid;
  gap: var(--hairline);
  margin-top: 24px;
  background: var(--line);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.cells--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cells--rows {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

.cell {
  background: var(--surface);
  padding: 28px;
}

.cell__step {
  font-size: 12px;
  color: var(--accent);
}

.cell__title {
  font-size: 17px;
  margin-top: 14px;
}

.cell__body {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

.row {
  background: var(--surface);
  padding: 18px 24px;
  display: flex;
  gap: 16px;
  align-items: baseline;
}

.row__step {
  font-size: 12px;
  color: var(--accent);
  flex: 0 0 20px;
}

.row__title {
  font-size: 15px;
  font-weight: 500;
}

.row__body {
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
}

.section__title {
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.2;
}

.section__body {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
}

.section__body + .section__body {
  margin-top: 14px;
}

/* The money diagram. Two ends and the track between them; the track turns from
   a horizontal rule into a vertical one when the section stacks. */

.flow {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  padding: 28px 32px;
}

.flow__end {
  flex: 1;
  text-align: center;
}

.flow__wallet {
  font-size: 12px;
  color: var(--muted);
}

.flow__party {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
}

.flow__track {
  flex: 1.4;
  position: relative;
  height: 2px;
  background: var(--accent);
}

.flow__label {
  position: absolute;
  top: -26px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: var(--accent);
  white-space: nowrap;
}

.flow__head {
  position: absolute;
  right: -1px;
  top: -4px;
  width: 0;
  height: 0;
  border-left: 8px solid var(--accent);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.flow__note {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.flow__note span {
  border: var(--hairline) dashed var(--line);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* Open questions */

.open {
  background: var(--raised);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  padding: 32px clamp(20px, 3vw, 36px);
}

.open__title {
  font-size: 20px;
}

.open__lede {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

.open__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.55;
}

.open__list li {
  display: flex;
  gap: 12px;
}

.open__list li::before {
  content: "—";
  color: var(--warn);
  flex: none;
}

.slot {
  color: var(--warn);
}

/* Footer */

.colophon {
  border-top: var(--hairline) solid var(--line);
  padding: 32px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

.colophon__links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

/* Narrow. The twelve columns become one, the three-across strip becomes a
   stack, and the money diagram stands the payment on end. */

@media (max-width: 900px) {
  .grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .span-5,
  .span-7 {
    grid-column: auto;
  }

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

  .flow {
    flex-direction: column;
    padding: 28px 24px;
    gap: 12px;
  }

  .flow__track {
    flex: none;
    width: 2px;
    height: 56px;
    margin: 22px 0 0;
  }

  .flow__label {
    top: -22px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .flow__head {
    right: auto;
    left: -4px;
    top: auto;
    bottom: -1px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid var(--accent);
    border-bottom: none;
  }
}

@media (max-width: 560px) {
  .cell {
    padding: 22px 20px;
  }

  .row {
    padding: 18px 20px;
  }

  .open {
    padding: 24px 20px;
  }

  .hero__actions .button {
    flex: 1 1 100%;
    text-align: center;
  }
}