/* The landing page is one screen: the hero, and a terminal under it. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 74px var(--gutter) 56px;
  text-align: center;
}

.hero-inner { width: 100%; min-width: 0; max-width: 820px; }

/* The wordmark is one SVG: the word is outlined and the fin is drawn with it, so nothing can drift. */
.wordmark { margin: 0 0 22px; }
.wordmark svg {
  display: block;
  width: auto;
  height: 132px;
  margin: 0 auto;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
}

h1 {
  margin: 0 0 38px;
  font-size: clamp(36px, 6.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 600;
  background: linear-gradient(180deg, #fff 8%, #b9c0d2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1 .em {
  background: linear-gradient(180deg, var(--accent) 10%, #d98c2c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  margin-bottom: 42px;
}

/* The install command is the primary action, and clicking it copies. */
.install {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px 0 18px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-panel);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.install:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--bg-raised); }
.install .sigil { color: var(--accent); user-select: none; }
.install .cmd { white-space: nowrap; }
.install .copy {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: var(--text-faint);
  background: color-mix(in srgb, #fff 4%, transparent);
}
.install:hover .copy { color: var(--text); }
.install .copy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.install .copy .tick { display: none; }
.install.copied .copy { color: #6ee7a8; }
.install.copied .copy .tick { display: block; }
.install.copied .copy .clip { display: none; }

.docs-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 22px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, #ffc46e, var(--accent));
  color: #1a1204;
  font-size: 14.5px;
  font-weight: 600;
}
.docs-cta:hover { text-decoration: none; filter: brightness(1.07); }
.docs-cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

.demo { width: 100%; min-width: 0; max-width: 1000px; margin: 0 auto; }
.demo .terminal pre { min-height: 472px; }

.caret {
  display: inline-block;
  width: 8px;
  margin-left: 1px;
  background: var(--accent);
  color: transparent;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.footer {
  padding: 0 var(--gutter) 40px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}
.footer a { color: var(--text-dim); }
.footer .sep { margin: 0 10px; opacity: 0.45; }

/* A terminal transcript does not reflow: perch lays its tables out to a width and the narrowest
   one is still about eighty columns. So on a narrow screen it scrolls, and it has to look like it
   scrolls. The widest line is 87 characters, which stops fitting somewhere under 710px, so the
   fade is drawn only where there is something behind it. */
.demo .terminal { position: relative; }
.demo .terminal pre { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

@media (max-width: 720px) {
  .demo .terminal::after {
    content: "";
    position: absolute;
    top: 42px;
    right: 0;
    bottom: 0;
    width: 56px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--bg-panel) 78%);
  }
}

@media (max-width: 720px) {
  .hero { padding-top: 78px; }
  .install { font-size: 12.5px; padding-left: 14px; }
  .actions { gap: 10px; }
  .demo .terminal pre { min-height: 400px; }
}

/* Perch Cloud: what is not built yet, and the box for hearing when it is. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cloud {
  position: relative;
  padding: 0 var(--gutter) 96px;
}
.cloud-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 44px 40px 40px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(90% 120% at 50% -10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    var(--bg-panel);
  text-align: center;
}

.soon {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cloud h2 {
  margin: 0 0 34px;
  font-size: clamp(28px, 4.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.026em;
  font-weight: 600;
}

.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin: 0 0 38px;
  padding: 0;
  list-style: none;
  text-align: left;
}
.features li { display: flex; gap: 12px; }
.features svg {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.features h3 {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.features p {
  margin: 0;
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.5;
}

.notify {
  display: flex;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto;
}
.notify input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14.5px;
}
.notify input::placeholder { color: var(--text-faint); }
.notify input:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.notify button {
  height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffc46e, var(--accent));
  color: #1a1204;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.notify button:hover { filter: brightness(1.07); }
.notify button:disabled { opacity: 0.55; cursor: default; filter: none; }

.notify-said {
  min-height: 20px;
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--text-dim);
}
.notify-said.bad { color: var(--red); }
.notify-said.good { color: #6ee7a8; }

@media (max-width: 760px) {
  .cloud { padding-bottom: 72px; }
  .cloud-inner { padding: 34px 22px 30px; }
  .features { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 30px; }
  .notify { flex-direction: column; }
  /* flex: 1 sets the basis on the main axis, which is now the height: the field collapsed to nothing. */
  .notify input[type="email"] { flex: none; }
  .notify button { width: 100%; }
}

/* The badge, at the size of a subheading rather than of a shield. Built from status.json. */
.checks-row { margin: 0 0 40px; }
.checks {
  display: inline-flex;
  align-items: stretch;
  border-radius: 9px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1;
  box-shadow: 0 0 0 1px var(--line), 0 8px 22px -14px #000;
}
.checks-mark,
.checks-verdict,
.checks-count { display: inline-flex; align-items: center; padding: 10px 13px; }
.checks-mark { gap: 7px; background: #1a1d26; color: var(--text-dim); }
.checks-mark svg { width: 20px; height: 13px; display: block; }
.checks-verdict { background: #1f7a3d; color: #eafff1; font-weight: 500; }
.checks-verdict.broken { background: #a12d2d; color: #ffecec; }
.checks-count { background: #23262f; color: var(--text-dim); }

@media (max-width: 480px) {
  .checks { font-size: 12px; }
  .checks-mark, .checks-verdict, .checks-count { padding: 9px 10px; }
}

/* The contact form: shut by default, because most people came to read the terminal. */
.contact { padding: 0 var(--gutter) 64px; }
.contact-box {
  max-width: 1000px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-panel);
}
.contact-box summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
}
.contact-box summary::-webkit-details-marker { display: none; }
.contact-open {
  position: relative;
  padding-left: 22px;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}
.contact-open::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -5px;
  border-right: 1.8px solid var(--accent);
  border-bottom: 1.8px solid var(--accent);
  transform: rotate(-45deg);
  transition: transform 0.18s;
}
.contact-box[open] .contact-open::before { transform: rotate(45deg); }
.contact-why { color: var(--text-faint); font-size: 13.5px; }

.contact-form {
  display: grid;
  gap: 16px;
  padding: 4px 24px 24px;
  border-top: 1px solid var(--line-soft);
  margin-top: -1px;
  padding-top: 22px;
}
.contact-form .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label {
  display: grid;
  gap: 7px;
  color: var(--text-dim);
  font-size: 13px;
}
.contact-form .cap { display: block; }
/* The honeypot is an input too, and the rule above would give it the width of the form. */
.contact-form input.visually-hidden { width: 1px; padding: 0; border: 0; }
.contact-form .opt { color: var(--text-faint); font-weight: 400; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14.5px;
}
.contact-form textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.contact-send { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.contact-send button {
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(180deg, #ffc46e, var(--accent));
  color: #1a1204;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.contact-send button:hover { filter: brightness(1.07); }
.contact-send button:disabled { opacity: 0.55; cursor: default; filter: none; }
.contact-said { font-size: 13.5px; color: var(--text-dim); }
.contact-said.bad { color: var(--red); }
.contact-said.good { color: #6ee7a8; }

@media (max-width: 640px) {
  .contact-form .pair { grid-template-columns: minmax(0, 1fr); }
  .contact-send { display: grid; }
  .contact-send button { width: 100%; }
  .contact-box summary { padding: 18px 18px; }
  .contact-form { padding-left: 18px; padding-right: 18px; }
}