/* Page styles. Color and type tokens live in fledge.css, copied from the brand kit. */

:root {
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fledge-background);
  color: var(--fledge-text-primary);
  font-family: var(--fledge-font-text);
  font-size: 17px;
  line-height: 27px;
  font-weight: 400;
}

h1,
h2,
h3 {
  font-family: var(--fledge-font-display);
  font-weight: 400;
  color: var(--fledge-primary);
  margin: 0;
}

h1 {
  font-size: 48px;
  line-height: 1.08;
  max-width: 12em;
}

h2 {
  font-size: 28px;
  line-height: 34px;
  margin-bottom: var(--fledge-space-4);
}

p,
li {
  max-width: 62ch;
}

a {
  color: var(--fledge-navy);
}

a:hover {
  color: var(--fledge-night);
}

.skip {
  position: absolute;
  left: var(--fledge-space-4);
  top: -4rem;
  background: var(--fledge-navy);
  color: var(--fledge-ivory);
  font-family: var(--fledge-font-ui);
  padding: var(--fledge-space-2) var(--fledge-space-3);
  z-index: 3;
}

.skip:focus {
  top: var(--fledge-space-4);
}

:focus-visible {
  outline: 3px solid var(--fledge-navy);
  outline-offset: 3px;
}

.wrap {
  width: min(68rem, calc(100% - 2 * var(--fledge-space-6)));
  margin: 0 auto;
}

.site-header {
  border-bottom: 1px solid var(--fledge-navy);
  background: var(--fledge-background);
}

.site-header .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--fledge-space-4);
  padding: var(--fledge-space-3) 0;
}

.home-lockup {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}

.header-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--fledge-navy);
  border-radius: var(--fledge-radius-control);
  font-family: var(--fledge-font-ui);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--fledge-navy);
  text-decoration: none;
}

.header-link:hover {
  background: var(--fledge-navy);
  color: var(--fledge-ivory);
}

.lockup {
  display: block;
  line-height: 0;
}

.lockup img {
  display: block;
  width: 100%;
  height: auto;
}

.lockup img.logo-dark {
  display: none;
}

.lockup-horizontal {
  width: 196px;
}

.lockup-wordmark {
  width: 148px;
  margin: 0 0 var(--fledge-space-3);
}

.hero-grid {
  display: grid;
  gap: var(--fledge-space-6);
  align-items: start;
  /* 24px under the picture to the rule, the same as the rule to the next heading. */
  padding: var(--fledge-space-6) 0 var(--fledge-space-6);
}

.hero-copy h1 {
  margin: 0;
}

.hero h1 {
  margin-top: 0;
}

.lede {
  margin: var(--fledge-space-4) 0 0;
  font-size: 21px;
  line-height: 28px;
  color: var(--fledge-text-secondary);
  max-width: 34ch;
}

/* The hero picture. Order inside .hero-grid is copy, picture, form at every width:
   the picture belongs with the headline and the subline (Robert). At
   60rem the explicit grid areas put the form in its own column. */

.hero-copy {
  order: 1;
  /* The text sits on top where the picture underlaps it at 60rem. */
  position: relative;
  z-index: 1;
}

.hero-grid > .panel {
  order: 3;
}

.hero-phone {
  order: 2;
  position: relative;
  z-index: 0;
  display: block;
  margin: 0;
}

/* Show the top two thirds of the picture: 1536 x 683 of the 1536 x 1024 file.
   The width and height attributes carry the same ratio, so nothing shifts. */
.hero-phone img {
  display: block;
  width: 100%;
  max-width: 36rem;
  height: auto;
  aspect-ratio: 1536 / 683;
  object-fit: cover;
  object-position: top;
  margin: 0 auto;
}

.layout {
  padding-bottom: var(--fledge-space-12);
}

.story {
  max-width: 42rem;
}

.story section {
  padding: var(--fledge-space-6) 0;
  border-top: 1px solid var(--fledge-border);
}

.story ul {
  margin: var(--fledge-space-4) 0 0;
  padding-left: 1.15rem;
}

.story li + li {
  margin-top: var(--fledge-space-3);
}

.panel {
  background: var(--fledge-surface-alt);
  border: 1px solid var(--fledge-border);
  border-radius: var(--fledge-radius-card);
  padding: var(--fledge-space-8);
}

.panel h2 {
  margin-top: 0;
}

.hint,
.privacy-note,
.domain,
.trademark {
  color: var(--fledge-text-secondary);
}

.hint,
.field-error {
  margin: 0;
  font-size: 15px;
  line-height: 23px;
}

.field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--fledge-space-2);
  margin: 0 0 var(--fledge-space-4);
}

.field > label {
  font-family: var(--fledge-font-ui);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fledge-text-secondary);
}

input[type="email"],
input[type="text"],
input[type="number"] {
  font-family: var(--fledge-font-text);
  font-size: 17px;
  line-height: 27px;
  color: var(--fledge-text-primary);
  background: var(--fledge-surface);
  border: 1px solid var(--fledge-slate);
  border-radius: var(--fledge-radius-control);
  padding: var(--fledge-space-3) var(--fledge-space-4);
  width: 100%;
  min-height: var(--fledge-target-min);
}

.choice {
  display: flex;
  gap: var(--fledge-space-3);
  align-items: flex-start;
  margin: var(--fledge-space-4) 0;
}

.choice input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.35rem;
  accent-color: var(--fledge-primary);
  flex: none;
}

button {
  font-family: var(--fledge-font-ui);
  cursor: pointer;
}

button.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--fledge-primary);
  color: var(--fledge-on-primary);
  border: 0;
  border-radius: var(--fledge-radius-control);
  min-height: var(--fledge-target-min);
  padding: 0 var(--fledge-space-6);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

button.primary:hover {
  background: var(--fledge-night);
  color: var(--fledge-ivory);
}

button.primary:active {
  background: var(--fledge-night);
  color: var(--fledge-ivory);
}

button.primary:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.form-status {
  min-height: 1.4em;
  margin-top: var(--fledge-space-4);
  font-family: var(--fledge-font-ui);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.form-status[data-kind="success"] {
  color: var(--fledge-settled);
}

.form-status[data-kind="warning"] {
  color: var(--fledge-notice);
}

.form-status[data-kind="error"] {
  color: var(--fledge-alert);
}

.mock-banner,
.badge {
  font-family: var(--fledge-font-ui);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.badge {
  display: inline-block;
  border: 1px solid var(--fledge-navy);
  color: var(--fledge-navy);
  padding: 0.15rem 0.45rem;
  margin-right: var(--fledge-space-2);
}

.mock-banner {
  display: block;
  letter-spacing: 0;
  text-transform: none;
  font-size: 15px;
  line-height: 23px;
  margin: 0 0 var(--fledge-space-4);
  padding: var(--fledge-space-3) var(--fledge-space-4);
  background: var(--fledge-surface);
  color: var(--fledge-notice);
  border: 1px solid var(--fledge-notice);
  border-radius: var(--fledge-radius-control);
}

.site-footer {
  border-top: 1px solid var(--fledge-border);
  padding: var(--fledge-space-6) 0 var(--fledge-space-8);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fledge-space-3) var(--fledge-space-6);
  padding: 0;
  margin: 0 0 var(--fledge-space-4);
  list-style: none;
}

.footer-links a {
  font-family: var(--fledge-font-ui);
  font-size: 15px;
  line-height: 20px;
}

.domain,
.trademark,
.privacy-note {
  font-size: 15px;
  line-height: 23px;
}

.domain {
  margin: 0;
}

.trademark {
  margin: var(--fledge-space-2) 0 0;
}

.privacy-note {
  margin: var(--fledge-space-6) 0 0;
}

.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 40rem) {
  .wrap {
    width: min(68rem, calc(100% - 2 * var(--fledge-space-4)));
  }

  h1 {
    font-size: 34px;
  }

  .lockup-horizontal {
    width: 148px;
  }

  .header-link {
    min-height: 40px;
    padding: 0 12px;
  }

  .panel {
    padding: var(--fledge-space-6);
  }
}

@media (min-width: 60rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.82fr);
    gap: var(--fledge-space-8);
    align-items: center;
    padding: var(--fledge-space-8) 0 var(--fledge-space-10, 40px);
    grid-template-areas:
      "copy form"
      "phone form";
  }

  /* The copy rests on the foot of its row and the picture on the top of its row, so
     the underlap is exact: the 2rem row gap less a 5rem pull is 3rem of overlap. */
  .hero-copy {
    grid-area: copy;
    align-self: end;
  }

  /* Under the headline, in the copy column. It underlaps the text block a little;
     below 60rem it follows the form, so it has no negative margin there. */
  .hero-phone {
    grid-area: phone;
    align-self: start;
    margin-top: -5rem;
  }

  .hero-phone img {
    margin: 0;
  }

  .hero-grid > .panel {
    grid-area: form;
  }

  /* The story uses the same columns as the hero, so its rule stays in the copy
     column and never runs under the form. It is pulled up into the space the form
     leaves under the cropped picture: at 1440 px the picture ends 101 px above the
     form, plus 40 px of hero padding. 7.25rem (116 px) leaves 25 px, the same as
     the rule to the next heading. On a narrower desktop the form is taller and the
     picture smaller, so the gap only grows; the rule never reaches the picture. */
  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.82fr);
    column-gap: var(--fledge-space-8);
    margin-top: -7.25rem;
  }

  .story {
    grid-column: 1;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }

  .lockup img.logo-light {
    display: none;
  }

  .lockup img.logo-dark {
    display: block;
  }

  a,
  .header-link {
    color: var(--fledge-ivory);
    border-color: var(--fledge-ivory);
  }

  .header-link:hover {
    background: var(--fledge-ivory);
    color: var(--fledge-navy);
  }

  .site-header {
    border-bottom-color: var(--fledge-ivory);
  }

  :focus-visible {
    outline-color: var(--fledge-ivory);
  }

  .badge {
    border-color: var(--fledge-ivory);
    color: var(--fledge-ivory);
  }

  button.primary:hover,
  button.primary:active {
    background: var(--fledge-paper);
    color: var(--fledge-navy);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}