@import url("base.css");

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

html,
body {
  margin: 0;
  overflow-x: clip;
  scroll-behavior: smooth;
}

html {
  background: var(--color-paper);
  scroll-padding-block-start: var(--banner-height);
}

body {
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-inline-size: 100%;
}

button,
input {
  color: inherit;
  font: inherit;
}

button:active,
a:active {
  transform: translateY(1px);
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

button,
a {
  -webkit-tap-highlight-color: var(--color-transparent);
}

a {
  color: inherit;
  text-decoration-color: var(--color-secondary);
  text-decoration-thickness: var(--rule-hair);
  text-underline-offset: 0.25em;
}

h1,
h2,
h3,
h4,
p,
blockquote,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.035em;
  line-height: 1.08;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

h2 {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
}

h3 {
  font-size: clamp(var(--text-lg), 3vw, var(--text-xl));
}

:focus-visible {
  border-radius: var(--radius-control);
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

::selection {
  background: var(--color-secondary);
  color: var(--color-ink);
}

.skip-link {
  background: var(--color-dark);
  color: var(--color-light);
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  position: fixed;
  transform: translateY(-200%);
  transition: transform var(--dur-short) var(--ease-out);
  z-index: var(--z-tooltip);

  &:focus {
    transform: none;
  }
}

.section-shell {
  margin-inline: auto;
  max-inline-size: var(--page-max);
  padding-inline: var(--page-gutter);
}

.site-header {
  background: var(--color-dark);
  border-block-end: var(--rule-hair) solid var(--color-rule-dark);
  color: var(--color-light);
  inset-block-start: 0;
  position: sticky;
  z-index: var(--z-dropdown);

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

.nav-shell {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-block-size: var(--banner-height);
  margin-inline: auto;
  max-inline-size: var(--page-max);
  padding-inline: var(--page-gutter);
}

.brand {
  align-items: center;
  display: inline-flex;
  font-family: var(--font-display);
  font-size: var(--text-brand);
  font-weight: var(--font-weight-medium);
  gap: var(--space-sm);
  padding-block: var(--space-xs);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  img {
    flex: 0 0 auto;
  }
}

.nav-links {
  background: var(--color-dark);
  border-block-end: var(--rule-hair) solid var(--color-rule-dark);
  color: var(--color-light-muted);
  display: none;
  flex-direction: column;
  gap: var(--space-2xs);
  inset-block: var(--banner-height) auto;
  inset-inline: 0;
  padding: var(--space-md) var(--page-gutter) var(--space-lg);
  position: absolute;
  z-index: var(--z-dropdown);

  &.is-open {
    display: flex;
  }

  a {
    align-items: center;
    display: flex;
    min-block-size: 2.75rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
  }

  @media (min-width: 60rem) {
    background: var(--color-transparent);
    border: 0;
    display: flex;
    flex-direction: row;
    gap: var(--space-lg);
    inset-block: auto;
    inset-inline: auto;
    padding: 0;
    position: static;
  }
}

.menu-button {
  align-items: center;
  background: var(--color-transparent);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  line-height: 1;
  min-block-size: 2.75rem;
  padding-inline: var(--space-sm);

  @media (min-width: 60rem) {
    display: none;
  }
}

.hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding-block: var(--section-space-md);

  h1 {
    font-size: clamp(var(--text-2xl), 4.2vw + 0.25rem, 4.25rem);
    white-space: nowrap;

    @media (max-width: 59.999rem) {
      font-size: clamp(var(--text-xl), 8vw + 0.25rem, var(--text-3xl));
      letter-spacing: -0.055em;
    }
  }

  @media (min-width: 60rem) {
    align-items: center;
    flex-direction: row;

    .hero-copy {
      flex: 7 1 0;
    }

    .history-demo {
      flex: 5 1 0;
      min-inline-size: 18rem;
    }
  }
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-inline-size: 0;
}

.hero-lede {
  color: var(--color-ink);
  font-size: var(--text-lg);
  line-height: 1.35;
  max-inline-size: 45ch;
}

.hero-detail {
  max-inline-size: 64ch;
}

.history-demo {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-inline-size: 0;
}

.history-query {
  background: var(--color-dark);
  border: var(--rule-hair) solid var(--color-rule-dark);
  border-radius: var(--radius-panel);
  color: var(--color-light);
  overflow: clip;

  header {
    border-block-end: var(--rule-hair) solid var(--color-rule-dark);
    padding: var(--space-sm) var(--space-md);

    p {
      font-size: var(--text-sm);
      font-weight: var(--font-weight-semibold);
    }
  }

  pre {
    font-family: var(--font-data);
    font-size: var(--text-xs);
    line-height: 1.5;
    margin: 0;
    overflow-wrap: anywhere;
    padding: var(--space-sm) var(--space-md);
    white-space: pre-wrap;
  }
}

.query-response {
  align-items: center;
  background: var(--color-dark-2);
  border-block-start: var(--rule-hair) solid var(--color-rule-dark);
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);

  p {
    color: var(--color-light-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
  }

  pre {
    flex: 1;
    min-inline-size: 0;
    padding: 0;
  }
}

.hero-actions {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.button {
  align-items: center;
  border: var(--rule-hair) solid var(--color-transparent);
  border-radius: var(--radius-control);
  cursor: pointer;
  display: inline-flex;
  font-weight: var(--font-weight-semibold);
  gap: var(--space-xs);
  justify-content: center;
  min-block-size: 3rem;
  padding: var(--space-sm) var(--space-lg);
  box-shadow: var(--shadow-button);
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
  white-space: nowrap;

  &:active {
    box-shadow: none;
  }
}

.button-primary {
  background: var(--color-primary-button);
  color: var(--color-primary-button-ink);
}

.button-secondary {
  background: var(--color-secondary);
  color: var(--color-secondary-ink);
}

.waitlist {
  flex: 1;
  max-inline-size: 32rem;
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.field-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);

  @media (min-width: 40rem) {
    flex-direction: row;

    input {
      flex: 1;
      min-inline-size: 0;
    }
  }
}

input[type="email"] {
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-dark);
  border-radius: var(--radius-control);
  min-block-size: 3rem;
  outline: 2px solid var(--color-transparent);
  outline-offset: 1px;
  padding: var(--space-sm) var(--space-md);
  transition: background-color var(--dur-short) var(--ease-out);
  inline-size: 100%;

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

  &:disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }
}

.quote-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-block: var(--section-space-md);

  @media (min-width: 60rem) {
    flex-direction: row;

    .quote-stage {
      flex: 5 1 0;
      min-inline-size: 0;
    }

    .quote-source {
      align-self: end;
      flex: 4 1 0;
      min-inline-size: 14rem;
    }
  }
}

.quote-stage {
  blockquote {
    color: var(--color-ink);
    font-size: clamp(var(--text-lg), 3vw, var(--text-xl));
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.02em;
    line-height: 1.3;
    max-inline-size: 45ch;
    padding-inline-start: clamp(var(--space-xl), 7vw, var(--space-2xl));
    position: relative;
  }
}

.quote-mark {
  color: var(--color-ink-2);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 5rem);
  font-weight: var(--font-weight-semibold);
  inset-block-start: -0.15em;
  inset-inline-start: 0;
  line-height: 1;
  position: absolute;
}

.quote-source {
  color: var(--color-muted);
  max-inline-size: 54ch;
}

.dark-band {
  background: var(--color-dark);
  color: var(--color-light);
  padding-block: var(--section-space-md) var(--section-space-lg);

  h2 {
    color: var(--color-light);
  }
}

.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-block-end: var(--space-2xl);
}

.video-placeholder {
  --video-play-size: clamp(3.5rem, 8vw, 5rem);

  aspect-ratio: 16 / 9;
  background: var(--color-dark-2);
  border: var(--rule-hair) solid var(--color-rule-dark);
  border-radius: var(--radius-panel);
  margin-inline: auto;
  overflow: clip;
  position: relative;

  img {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
    opacity: 0.58;
  }

  .video-play {
    align-items: center;
    background: var(--color-secondary);
    block-size: var(--video-play-size);
    border: var(--rule-hair) solid var(--color-secondary-hover);
    border-radius: 50%;
    box-shadow: var(--shadow-button);
    color: var(--color-secondary-ink);
    cursor: pointer;
    display: inline-flex;
    inline-size: var(--video-play-size);
    inset: 50% auto auto 50%;
    justify-content: center;
    padding: 0;
    position: absolute;
    transform: translate(-50%, -50%);
    transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);

    svg {
      block-size: 42%;
      inline-size: 42%;
      margin-inline-start: var(--space-2xs);
    }

    &:active {
      box-shadow: none;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover .video-play {
      background: var(--color-secondary-hover);
    }

    cursor: pointer;
  }
}

.demo-section {
  align-items: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-md) var(--space-xl);
  padding-block: var(--section-space-md);

  @media (min-width: 60rem) {
    flex-direction: row;

    .demo-copy {
      flex: 0.9 1 0;
    }

    .demo-logo {
      flex: 0.6 1 0;
      min-inline-size: 9rem;
    }

    .demo-details {
      flex: 1.1 1 0;
      min-inline-size: 18rem;
    }
  }
}

.demo-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-inline-size: 0;
}

.demo-details {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  inline-size: 100%;
  min-inline-size: 0;

  @media (max-width: 59.999rem) {
    align-items: center;
  }
}

.demo-date {
  @media (max-width: 59.999rem) {
    text-align: center;

    time {
      align-items: center;
    }
  }

  time {
    color: var(--color-ink);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
}

.demo-day {
  font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.demo-time {
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.demo-registration {
  inline-size: 100%;
  max-inline-size: 32rem;
}

.alert {
  border: var(--rule-hair) solid;
  border-inline-start-width: var(--space-xs);
  border-radius: var(--radius-control);
  color: var(--color-ink);
  font-weight: var(--font-weight-medium);
  padding: var(--space-md);

  &.success {
    background: var(--color-success-surface);
    border-color: var(--color-success);
  }

  &.error {
    background: var(--color-error-surface);
    border-color: var(--color-error);
  }
}

.demo-logo {
  align-self: start;
  display: flex;
  inline-size: 100%;
  justify-content: center;

  object,
  picture {
    aspect-ratio: 1;
    display: block;
    inline-size: clamp(9rem, 18vw, 10rem);
  }

  object,
  img {
    block-size: auto;
  }

  picture img {
    aspect-ratio: 1;
    display: block;
    inline-size: 100%;
  }

  .demo-logo-static {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .demo-logo-animation {
      display: none;
    }

    .demo-logo-static {
      display: block;
    }
  }
}

.argument-section {
  padding-block: var(--section-space-sm) 0;
}

.argument {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-block: var(--space-xl);

  @media (min-width: 60rem) {
    flex-direction: row;

    >* {
      flex: 1 1 0;
    }

    .argument-visual {
      align-self: center;
      inline-size: 100%;
    }
  }
}

.argument-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-inline-size: 58ch;

  h2 {
    max-inline-size: 18ch;
  }
}

.argument-visual {
  min-inline-size: 0;

  services-graphic {
    display: block;
  }
}

:where(.demo-copy, .problem, .solution, .pricing-section, .team-section, .faq-section) h2::after {
  background: var(--color-secondary);
  block-size: 0.25rem;
  content: "";
  display: block;
  inline-size: 3rem;
  margin-block-start: var(--space-lg);
}

.quote-section,
.demo-section {
  background: var(--color-paper-2);
  max-inline-size: none;
  padding-inline: max(var(--page-gutter), calc((100% - var(--page-max)) / 2 + var(--page-gutter)));
}

.feature-stack {
  padding-block: var(--space-lg) var(--section-space-lg);
}

.feature-list {
  border-block-start: var(--rule-hair) solid var(--color-rule);
  border-inline-start: var(--rule-hair) solid var(--color-rule);
  display: flex;
  flex-wrap: wrap;
  overflow: clip;

  >article {
    border-block-end: var(--rule-hair) solid var(--color-rule);
    border-inline-end: var(--rule-hair) solid var(--color-rule);
    align-items: flex-start;
    display: flex;
    flex: 0 0 100%;
    gap: var(--space-md);
    padding: clamp(var(--space-lg), 5vw, var(--space-xl));

    >svg {
      block-size: var(--text-xl);
      color: var(--color-secondary);
      flex: 0 0 auto;
      inline-size: var(--text-xl);
      margin-block-start: var(--space-2xs);
    }

    >div {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      max-inline-size: 60ch;
      min-inline-size: 0;
    }
  }

  @media (min-width: 48rem) {
    >article {
      flex-basis: 50%;
    }
  }
}

.pricing-section,
.team-section,
.faq-section {
  max-inline-size: none;
  padding-block: var(--section-space-lg);
  padding-inline: max(var(--page-gutter), calc((100% - var(--page-max)) / 2 + var(--page-gutter)));
}

.pricing-section,
.faq-section {
  background: var(--color-paper-2);
}

.team-section {
  background: var(--color-paper);
}

.price-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-block: var(--space-xl);

  +.price-row {
    border-block-start: var(--rule-hair) solid var(--color-rule);
  }

  >div:first-child {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .price-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .price-details>p:last-child {
    color: var(--color-muted);
  }

  @media (min-width: 40rem) {
    flex-direction: row;

    >div:first-child {
      flex: 1.3 1 0;
      min-inline-size: 0;
    }

    .price-details {
      flex: 0.7 1 0;
      min-inline-size: 10rem;
    }
  }

  @media (min-width: 60rem) {
    align-items: center;

    >div:first-child {
      flex-grow: 5;
    }

    .price-details {
      align-items: center;
      flex-direction: row;
      flex-grow: 7;

      .price {
        flex: 3 1 0;
        min-inline-size: 12rem;
      }

      >p:last-child {
        flex: 4 1 0;
        min-inline-size: 14rem;
      }
    }
  }
}

.price {
  color: var(--color-ink);
  display: flex;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
  gap: var(--space-xs);

  strong {
    font-size: var(--text-xl);
    line-height: 1;
  }

  span {
    flex-basis: 100%;
    font-size: var(--text-sm);
  }

  s {
    color: var(--color-muted);
  }
}

.pricing-note,
.team-note {
  color: var(--color-muted);
  max-inline-size: 62ch;
}

.team-member {
  border-block-end: var(--rule-hair) solid var(--color-rule);
  border-inline-end: var(--rule-hair) solid var(--color-rule);
  align-items: start;
  display: flex;
  flex: 0 0 100%;
  gap: var(--space-lg);
  padding: clamp(var(--space-lg), 5vw, var(--space-xl));

  >img {
    block-size: auto;
    flex: 0 0 clamp(6rem, 14vw, 16rem);
    inline-size: clamp(6rem, 14vw, 16rem);
    object-fit: cover;
  }

  >div {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-inline-size: 62ch;
    min-inline-size: 0;
  }
}

.team-list {
  border-block-start: var(--rule-hair) solid var(--color-rule);
  border-inline-start: var(--rule-hair) solid var(--color-rule);
  display: flex;
  flex-wrap: wrap;
  overflow: clip;
}

.member-role {
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  margin-block: var(--space-2xs);
}

.faq-section {
  details+details {
    border-block-start: var(--rule-hair) solid var(--color-rule);
  }

  summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-family: var(--font-display);
    font-size: clamp(var(--text-md), 2.5vw, var(--text-lg));
    font-style: normal;
    font-weight: var(--font-weight-medium);
    gap: var(--space-md);
    inline-size: 100%;
    justify-content: space-between;
    line-height: 1.08;
    list-style: none;
    min-block-size: 4.5rem;
    overflow-wrap: anywhere;
    padding: var(--space-md) 0;
    text-align: start;

    &::-webkit-details-marker {
      display: none;
    }

    span {
      flex: 0 0 auto;
      transition: transform var(--dur-short) var(--ease-in-out);
    }
  }

  details[open] summary span {
    transform: rotate(45deg);
  }

  details>div {
    max-inline-size: 65ch;
    padding-block: 0 var(--space-lg);
  }
}

.site-footer {
  background: var(--color-dark);
  color: var(--color-light-muted);
  font-size: var(--text-sm);
  text-align: center;

  .section-shell {
    padding-block: var(--space-xl);
  }
}

@media (hover: hover) and (pointer: fine) {

  .nav-links a:hover,
  .menu-button:hover {
    color: var(--color-light);
  }

  .button-primary:hover {
    background: var(--color-primary-button-hover);
    transform: translateY(-1px);
  }

  .button-secondary:hover {
    background: var(--color-secondary-hover);
    transform: translateY(-1px);
  }

  input[type="email"]:hover {
    background: var(--color-paper-2);
  }
}

@media (prefers-color-scheme: dark) {

  .site-header,
  .nav-links,
  .site-footer {
    background: var(--color-paper);
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: var(--dur-micro) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--dur-micro) !important;
  }

  .quote-stage blockquote {
    transition: none !important;
  }
}