/* Applyready site: header, hero, sections, pricing, footer, docs. */

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Half-transparent, the bar let a question or a person's card read through it behind the
     wordmark and the menu. It is the page's own white. */
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--line-200);
  box-shadow: var(--shadow-1);
}

/* Three columns rather than a row spread apart: the block of buttons on the right is 176px
   wide on the landing and 79px on the pages with one button, and a row spread apart moved the
   menu 49px sideways on every navigation. The middle column is the middle of the bar. */
.site-header .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-6);
  min-height: 68px;
}

.site-header .header-actions {
  justify-self: end;
}

.site-header .nav-toggle {
  justify-self: end;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  font-weight: var(--fw-strong);
  font-size: var(--fs-body);
  letter-spacing: -0.02em;
}

.brand {
  transition: opacity var(--dur-2) var(--ease);
}

.brand:hover {
  opacity: 0.78;
}

.brand-mark {
  width: 26px;
  height: 26px;
  flex: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.nav a {
  padding: var(--sp-2) var(--sp-3);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--ink-700);
  transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}

.nav a:hover {
  color: var(--ink-900);
  background: var(--surface);
}

.nav a[aria-current="page"] {
  color: var(--ink-900);
  background: var(--surface-2);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  /* the row is a flex line: without this the button was squeezed to 41 px at 360 */
  min-width: 44px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur-2) var(--ease);
}

.nav-toggle:hover {
  background: var(--surface);
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line-200);
    padding: var(--sp-2) var(--sp-4) var(--sp-4);
    box-shadow: var(--shadow-2);
    display: none;
  }

  .nav.is-open {
    display: flex;
    animation: panel-in var(--dur-2) var(--ease-out) both;
  }

  .header-actions .btn-secondary {
    display: none;
  }

  /* and the same door stands in the menu instead. The rule below this block hides it at every
     width and comes later in the file, so this one has to outrank it rather than tie with it. */
  .site-header .nav .nav-account {
    display: block;
  }
}

/* On the first-run page the corner offered "Add to Chrome" - a button back to the page it was
   pressed on. The page itself is that door. */
body[data-page="welcome"] .site-header .header-actions .btn-primary,
body[data-page="uninstall"] .site-header .header-actions .btn-primary {
  display: none;
}

/* At 320 the wordmark, the menu and "Add to Chrome" together are 41px wider than the window:
   the button read "Add to Chro..." and the whole page scrolled sideways. The button gives up
   the padding it does not need, and the name beside the mark steps aside - the same as it does
   in the panel, and a screen reader still reads it. */
@media (max-width: 380px) {
  .site-header .header-actions .btn-primary {
    padding: 0 var(--sp-3);
    font-size: var(--fs-micro);
  }

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

/* Written as one class, this lost to `.nav a` beside it and the link showed at every width:
   two Sign in controls in one header, two hundred pixels apart. */
.nav .nav-account {
  display: none;
}

/* Hero */

.hero {
  position: relative;
  padding-block: var(--sp-20) var(--sp-16);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: var(--sp-16);
  align-items: center;
}

.hero h1 {
  max-width: 19ch;
}

.hero .lead {
  max-width: 46ch;
  margin-top: var(--sp-5);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

/* On a phone the two buttons wrapped to a line each with different widths, ragged down the
   right. Below this width they take the column. */
@media (max-width: 480px) {
  .hero-cta > .btn {
    flex: 1 1 100%;
  }
}

.hero-note {
  margin-top: var(--sp-4);
  font-size: var(--fs-micro);
  color: var(--ink-500);
}

.hero-boards {
  margin-top: var(--sp-12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
  /* On a phone the last name on a line ended one pixel short of the column edge and read as
     cut off. A gutter of its own makes the row wrap before it gets that close. */
  padding-right: var(--sp-4);
}

.hero-boards span {
  font-size: var(--fs-micro);
  color: var(--ink-400);
}

/* The names are the proof on the first screen and the word before them is a caption. Written
   with one class each, the caption's rule won on specificity and both came out at 13px grey. */
.hero-boards .board-name {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--ink-700);
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-10);
  }

  .hero {
    padding-block: var(--sp-12) var(--sp-10);
  }

  .hero h1 {
    max-width: none;
  }
}

/* Panel mock used on the landing */

.mock {
  border: 1px solid var(--line-200);
  border-radius: var(--r-xl);
  background: var(--bg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  width: 100%;
  max-width: 460px;
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--line-200);
}

.mock-title {
  margin-left: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--ink-500);
}

.mock-body {
  padding: var(--sp-4);
}

.mock-job {
  padding: var(--sp-3);
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  background: var(--surface);
}

.mock-job strong {
  display: block;
  font-size: var(--fs-small);
}

.mock-job span {
  font-size: var(--fs-micro);
  color: var(--ink-500);
}

.mock-steps {
  margin-top: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
}

.mock-step {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  /* A step still to come used to be the same grey at 40 per cent - 1.8 to 1, which is a shape
     rather than a word. What it is waiting for is said by the tick beside it, so the words stay
     readable and the tick carries the state. */
  color: var(--ink-500);
  transition: opacity var(--dur-3) var(--ease), color var(--dur-3) var(--ease);
}

.mock-step.is-active {
  opacity: 1;
  color: var(--ink-900);
}

.mock-step.is-played {
  opacity: 1;
  color: var(--ink-700);
}

.mock-step .tick {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line-200);
  flex: none;
  display: grid;
  place-items: center;
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.mock-step.is-played .tick {
  background: var(--ok-600);
  border-color: var(--ok-600);
}

.mock-step.is-played .tick svg {
  color: #fff;
}

.mock-step .tick svg {
  width: 12px;
  height: 12px;
  color: transparent;
  transition: color var(--dur-2) var(--ease);
}

.mock-result {
  display: grid;
  gap: var(--sp-3);
}

.mock-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line-200);
  margin-bottom: var(--sp-3);
}

.mock-tab {
  position: relative;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  color: var(--ink-500);
}

.mock-tab.is-on {
  color: var(--ink-900);
}

.mock-tab.is-on::after {
  content: "";
  position: absolute;
  inset-inline: var(--sp-2);
  bottom: -1px;
  height: 2px;
  background: var(--accent-600);
}

.step-num {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--accent-600);
  letter-spacing: 0.04em;
}

.feature-list {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.feature-list li {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-body);
  color: var(--ink-700);
}

/* The tick that used to stand before every line said nothing the line did not: these are
   sentences, not a list of what is included. A dot in its place would be the same decoration
   again, so the rows are told apart by the rule between them. */
.feature-list li + li {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-200);
}

/* Pricing */

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}

/* Matched to the taller card, the shorter one used to carry a hole of 117px between its last
   line and its button. The cards are the same height again, and the hole is gone because the
   button sits on the floor of the card rather than a fixed distance under the last line. */
.price-card {
  border: 1px solid var(--line-200);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.price-card.is-primary {
  border-color: var(--accent-600);
  box-shadow: var(--shadow-2);
}

.price-amount {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.price-amount b {
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: -0.02em;
}

.price-features {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  /* The card stretches to match its neighbour, and a grid stretches its rows with it: one list
     came out at 34px between lines and the other at 57px, in cards of the same height. The list
     keeps its own rhythm and the space goes under it, where the button sits. */
  align-content: start;
  flex: 1;
}

.price-features li {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--ink-700);
}

.price-features li + li {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-200);
}

/* The two cards do not hold the same number of lines, and the buttons drifted 93px apart with
   the highlighted card the short one. Both cards fill the row and both buttons sit on its
   floor.

   The room over the button belongs to the list, not to the button. It was written here as
   max(var(--sp-6), auto), which is not a value CSS accepts: the browser dropped the whole
   declaration, and on a phone - where the cards no longer stretch to match each other, so auto
   comes out at nothing - the button stood against the last line of the list. */
.price-card .btn {
  margin-top: auto;
}

.price-card .price-features {
  margin-bottom: var(--sp-6);
}

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

/* Compare table */

.compare td:not(:first-child),
.compare th:not(:first-child) {
  text-align: center;
}

.compare .own {
  background: var(--accent-100);
}

/* FAQ */

/* A question and its plus sign at opposite ends of a 1677px line have nothing to do with each
   other. The questions are held to the width the prose uses, inside the page's own column: a
   narrower box centred in the page put them on a third left edge, 180px from the heading above
   them and the form below. */
/* The questions are held to the width the prose uses and start where the heading starts. Made
   to depend on whether the heading above happened to be centred, the same list sat at 104px on
   one page and 260px on another. */
/* The row of a question is the width of the section, like every other row on the page; the
   answer inside it is held to the width prose is read at. Holding the whole row to that width
   left 312px of nothing to the right of every question, under a heading that ran the full
   width. */
.faq .acc-body-inner {
  max-width: var(--container-narrow);
}

/* Callout band */

.band {
  background: var(--ink-900);
  color: #fff;
}

.band .lead,
.band .muted {
  color: rgba(255, 255, 255, 0.72);
}

.band .btn-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

.band .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--line-200);
  padding-block: var(--sp-12) var(--sp-8);
  background: var(--surface);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: var(--sp-8);
}

.footer-col .footer-head {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--ink-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

/* A rule written for the column's links reached the wordmark standing in the same column and
   shrank it to 14px, so the name of the product had two sizes on every page. A context never
   restyles an object that has a class of its own. */
.footer-col a:not(.brand) {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-small);
  color: var(--ink-700);
  transition: color var(--dur-2) var(--ease);
}

.footer-col a:not(.brand):hover {
  color: var(--ink-900);
}

.footer-bottom {
  margin-top: var(--sp-10);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-200);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--fs-micro);
  color: var(--ink-500);
}

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

  /* Halved to two columns, the brand column's three lines sat beside one short list and left a
     hole where the second list should have been. It takes the width and the lists sit under it. */
  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
}

/* Document pages */

.doc {
  padding-block: var(--sp-12) var(--sp-20);
}

.doc h1 {
  margin-bottom: var(--sp-3);
}

.doc h2 {
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
}

.doc p,
.doc li {
  color: var(--ink-700);
  max-width: var(--measure);
}

.doc p + p,
/* a paragraph after a list used to sit on the last item and read as part of it */
.doc ul + p,
.doc ol + p {
  margin-top: var(--sp-4);
}

.doc ul,
/* the list may carry the class itself, and then it used to lose the spacing and read as one
   block of text */
ul.doc {
  margin-top: var(--sp-3);
  display: grid;
  gap: var(--sp-2);
}

/* A list reads as a list without a dot in front of every line: the dot is decoration, and it
   was the same grey circle on a legal document and on a page of settings. The rows are told
   apart by the space between them and by the bold word each one opens with. */
.doc ul li,
ul.doc > li,
.stack > li {
  padding-left: 0;
}

.doc ul li + li,
ul.doc > li + li,
.stack > li + li {
  margin-top: var(--sp-3);
}

.doc-meta {
  font-size: var(--fs-micro);
  color: var(--ink-500);
  margin-bottom: var(--sp-8);
}

/* Auth pages */

.auth-wrap {
  min-height: calc(100vh - 68px);
  display: grid;
  place-items: center;
  padding: var(--sp-10) var(--sp-4);
}

.auth-card {
  width: min(420px, 100%);
  background: var(--bg);
  border: 1px solid var(--line-200);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-1);
}

/* With Google not configured its button and the divider are gone, and the form takes over the
   space the divider used to hold. */
#email-form.is-first {
  margin-top: var(--sp-6);
}

.divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block: var(--sp-5);
  color: var(--ink-400);
  font-size: var(--fs-micro);
}

.divider::before,
.divider::after {
  content: "";
  height: 1px;
  background: var(--line-200);
  flex: 1;
}

/* Onboarding */

.onb-steps {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}

.onb-tick {
  height: 4px;
  flex: 1;
  border-radius: var(--r-pill);
  background: var(--line-200);
  transition: background-color var(--dur-3) var(--ease);
}

.onb-tick.is-done {
  background: var(--accent-600);
}

.onb-step {
  animation: panel-in var(--dur-3) var(--ease-out) both;
}

.drop {
  border: 1.5px dashed var(--line-200);
  border-radius: var(--r-lg);
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
  background: var(--surface);
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}

.drop.is-over {
  border-color: var(--accent-600);
  background: var(--accent-100);
}

/* Pin-the-icon illustration on the last onboarding step */

.pin-demo {
  margin-top: var(--sp-4);
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-3);
}

.pin-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  position: relative;
}

.pin-chip {
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  background: var(--line-200);
}

.pin-puzzle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  background: var(--bg);
  border: 1px solid var(--line-200);
  color: var(--ink-700);
}

.pin-cursor {
  position: absolute;
  left: 58px;
  top: 16px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-600);
  opacity: 0.5;
  animation: pin-tap 2.6s var(--ease) infinite;
}

@keyframes pin-tap {
  0%, 60% { opacity: 0.5; }
  75% { opacity: 0.15; }
  100% { opacity: 0.5; }
}

.pin-menu {
  margin-top: var(--sp-3);
  border: 1px solid var(--line-200);
  border-radius: var(--r-sm);
  background: var(--bg);
  overflow: hidden;
}

.pin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-micro);
  color: var(--ink-700);
}

.pin-row + .pin-row {
  border-top: 1px solid var(--line-100);
}

.pin-row.is-target {
  background: var(--accent-100);
  color: var(--accent-700);
  font-weight: var(--fw-medium);
}

.pin-pin {
  font-size: var(--fs-micro);
  color: var(--accent-700);
}